:root {
  --page-padding: 20px;
  --page-width: 1240px;
}

/* The browser's own rule for the hidden attribute is display:none, and it sits
   in the user-agent sheet — so any author `display:` on the same element beats
   it and the element stays on screen. Several sections set display on a class
   that JS or the template also marks hidden, which is why a few "hidden"
   elements were still rendering. Settle it once here rather than adding a
   [hidden] override per class. */
[hidden] {
  display: none !important;
}

/* Sep 3: nothing in this theme constrained media to its container — the only
   img rule of that kind was scoped to .rte, which the article bodies and most
   migration sections do not use. So any picture whose own section did not size
   it rendered at its intrinsic width and scrolled the whole document sideways,
   which is what was happening on a phone. An article body proved it; the same
   hole was open on every page.

   height:auto goes with max-width so a constrained picture keeps its shape
   rather than squashing to an attribute height. Both are the floor: any
   section that sizes its own media is more specific and still wins. */
img,
svg,
video,
iframe,
canvas {
  max-width: 100%;
}

img,
video {
  height: auto;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

body {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

.migration-section,
[data-section-key="site-header"],
[data-section-key="site-footer"] {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
}

.migration-section {
  color: rgba(var(--color-text));
  background-color: rgba(var(--color-background));
}

.migration-section *,
[data-section-key="site-header"] *,
[data-section-key="site-footer"] * {
  box-sizing: border-box;
}

.migration-section h1,
.migration-section h2,
.migration-section h3,
.migration-section p,
[data-section-key="site-footer"] p {
  padding: 0;
  margin: 0;
}

.migration-section a,
[data-section-key="site-header"] a,
[data-section-key="site-footer"] a {
  color: inherit;
  text-decoration: none;
}

.migration-container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
}

.migration-container--narrow {
  max-width: 1180px;
}

.migration-eyebrow {
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 700;
  line-height: normal;
  color: rgba(var(--color-button-text-link));
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.migration-title {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 700;
  line-height: 1.12;
  color: rgba(var(--color-text));
  text-wrap: balance;
}

.migration-copy {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(var(--color-light-text));
}

.migration-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px 34px;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: normal;
  color: rgba(var(--color-button-text)) !important;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  background: rgba(var(--color-button-background));
  border: 0;
  border-radius: 999px;
  transition: color 0.25s ease, background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.migration-button:hover {
  color: rgba(var(--color-button-text)) !important;
  background: rgba(var(--color-button-background), 0.9);
  box-shadow: 0 10px 24px rgba(var(--color-text), 0.18);
  transform: translateY(-2px);
}

.migration-text-link {
  display: inline-block;
  padding-bottom: 4px;
  font-size: 13px;
  font-weight: 700;
  line-height: normal;
  color: rgba(var(--color-button-text-link)) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 2px solid rgba(var(--color-button-text-link));
}

.migration-field {
  position: relative;
  display: block;
}

.migration-field > input {
  width: 100%;
  min-height: 51px;
  padding: 22px 20px 8px;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 15px;
  color: rgba(var(--color-text));
  background: rgba(var(--color-card-background));
  border: 1px solid rgba(var(--color-text), 0.3);
  border-radius: 999px;
  outline: none;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.migration-field > input:focus {
  border-color: rgba(var(--color-text));
  box-shadow: 0 0 0 3px rgba(var(--color-text), 0.12);
}

.migration-field__label {
  position: absolute;
  top: 15px;
  left: 20px;
  font-size: 15px;
  color: rgba(var(--color-light-text));
  pointer-events: none;
  transform-origin: left top;
  transition: color 0.18s ease, transform 0.18s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.migration-field > input:focus ~ .migration-field__label,
.migration-field > input:not(:placeholder-shown) ~ .migration-field__label {
  font-weight: 600;
  color: rgba(var(--color-text));
  letter-spacing: 0.06em;
  transform: translateY(-9px) scale(0.72);
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Shared header */
/* The promo bar is its own pinned layer, sitting above the header so the nav
   can retract behind it while the offer stays on screen. Heights are tokens
   because the header top offset and the flow spacer both derive from them. */
:root {
  --migration-promo-height: 32px;
  --migration-header-height: 69px;
}

.migration-promo-bar {
  display: grid;
  height: var(--migration-promo-height);
  padding: 9px 16px;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  line-height: normal;
  color: rgba(var(--color-text));
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  background: rgba(var(--color-background));
}

.migration-promo-bar--pinned {
  position: fixed;
  inset: 0 0 auto;
  z-index: 61;
  width: 100%;
}

.migration-promo-bar--pinned ~ .migration-site-header {
  top: var(--migration-promo-height);
}

.migration-promo-bar--pinned ~ .migration-site-header-spacer {
  height: calc(var(--migration-promo-height) + var(--migration-header-height));
}

/* Not pinned: the offer scrolls away with the page and the nav sticks alone. */
.migration-promo-bar--inline ~ .migration-site-header {
  position: sticky;
}

.migration-promo-bar--inline ~ .migration-site-header-spacer {
  display: none;
}

.migration-site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: block;
  width: 100%;
  height: var(--migration-header-height);
  max-height: 100vh;
  padding: 0;
  overflow-y: auto;
  color: rgba(var(--color-text));
  background: rgba(var(--color-background));
  border-bottom: 1px solid rgba(var(--color-text), 0.14);
  border-radius: 0;
  transform: translateY(0);
  transition: transform 0.35s, box-shadow 0.35s;
}

.migration-site-header.is-shadowed {
  box-shadow: 0 6px 24px rgba(var(--migration-header-shadow-color, var(--color-text)), 0.12);
}

.migration-site-header.is-hidden {
  transform: translateY(-101%);
}

.migration-site-header__nav-band {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  height: 68px;
  padding: 14px 20px;
  margin: 0 auto;
  gap: 20px;
}

.migration-site-header__home-title {
  display: contents;
  font: inherit;
  margin: 0;
}

.migration-site-header__logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.migration-site-header__logo img {
  display: block;
  width: auto;
  height: 38px;
}

.migration-site-header__nav {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 30px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(var(--migration-header-text-color, var(--color-text)));
}

.migration-site-header__nav a {
  padding: 6px 0;
  color: inherit !important;
  border-bottom: 2px solid transparent;
}

.migration-site-header__nav a:hover,
.migration-site-header__nav a:focus-visible {
  border-bottom-color: currentColor;
}

.migration-site-header__actions {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 8px;
}

.migration-site-header__action,
.migration-site-header__menu-button {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  color: rgba(var(--color-button-background)) !important;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 999px;
  place-items: center;
}

.migration-site-header__action:hover,
.migration-site-header__menu-button:hover {
  background: rgba(var(--color-text), 0.08);
}

.migration-site-header__action theme-cart-bubble {
  position: absolute;
  inset: 0;
  display: block;
  cursor: pointer;
}

.migration-site-header__action theme-cart-bubble > svg {
  display: none;
}

.migration-site-header__action svg {
  width: 20px;
  height: 20px;
}

.migration-site-header__action .cart-bubble__count {
  position: absolute;
  top: 2px;
  right: 0;
  display: grid;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(var(--color-button-text));
  background: rgba(var(--color-button-background));
  border-radius: 999px;
  place-items: center;
}

.migration-site-header__action .cart-bubble__count:empty {
  display: none;
}

.migration-site-header__action .cart-bubble__count[hidden] {
  display: none;
}

.migration-site-header__menu-button {
  display: none;
  width: 30px;
  height: 38px;
  padding: 8px 8px 8px 0;
  background: transparent !important;
  border-radius: 0;
}

.migration-site-header__menu-button:hover {
  background: transparent !important;
}

.migration-site-header__menu-button span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 4px 0;
  background: currentColor;
}

/* Aug 28 #1: the header search panel. It drops out of the nav band at every
   width — the same field on a phone as on a desktop — and the predictive
   results render underneath it. */
.migration-site-header__search {
  position: static;
  z-index: 59;
  padding: 14px 20px 18px;
  background: rgba(var(--color-background));
  border-top: 1px solid rgba(var(--color-button-background), 0.14);
}

.migration-site-header__search-form {
  display: flex;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  gap: 10px;
  padding: 0 6px 0 14px;
  color: rgba(var(--color-button-background));
  background: rgba(var(--color-button-background), 0.06);
  border: 1px solid rgba(var(--color-button-background), 0.22);
  border-radius: 999px;
}

.migration-site-header__search-form:focus-within {
  border-color: rgba(var(--color-button-background), 0.55);
}

.migration-site-header__search-icon {
  flex: 0 0 auto;
  opacity: 0.7;
}

.migration-site-header__search-input {
  min-width: 0;
  height: 46px;
  padding: 0;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 14px;
  color: rgba(var(--color-button-background));
  background: none;
  border: 0;
  flex: 1;
}

.migration-site-header__search-input:focus {
  outline: none;
}

.migration-site-header__search-input::-webkit-search-cancel-button {
  display: none;
}

.migration-site-header__search-submit {
  height: 36px;
  padding: 0 20px;
  font-size: 11px;
  flex: 0 0 auto;
}

.migration-site-header__search-close {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  color: rgba(var(--color-button-background));
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 999px;
  flex: 0 0 auto;
  place-items: center;
}

.migration-site-header__search-close:hover {
  background: rgba(var(--color-button-background), 0.1);
}

.migration-site-header__search-results {
  max-width: 1280px;
  max-height: min(58vh, 420px);
  margin: 14px auto 0;
  overflow-y: auto;
}

.migration-site-header__search-results[aria-busy="true"] {
  opacity: 0.5;
}

/* The predictive results come back as the platform's own markup, which is
   styled by the stock header stylesheet this migration header does not load.
   These are the few rules that markup needs to read correctly here. */
.migration-site-header__search-results .predictive-search__title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(var(--color-button-background), 0.7);
}

.migration-site-header__search-results .predictive-search__results {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.migration-site-header__search-results .predictive-search__product {
  display: grid;
  gap: 10px;
}

.migration-site-header__search-results .predictive-search__product-image-wrap {
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: rgba(var(--color-button-background), 0.06);
  border-radius: 6px;
}

.migration-site-header__search-results .predictive-search__product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.migration-site-header__search-results .predictive-search__product-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(var(--color-button-background));
}

.migration-site-header__search-results .predictive-search__product-price {
  font-size: 13px;
  color: rgba(var(--color-button-background), 0.75);
}

.migration-site-header__search-results .predictive-search__product-save-price {
  display: none;
}

.migration-site-header__search-results .predictive-search__footer {
  padding-top: 14px;
  margin-top: 16px;
  border-top: 1px solid rgba(var(--color-button-background), 0.14);
}

.migration-site-header__search-results .predictive-search__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(var(--color-button-background));
  cursor: pointer;
  background: none;
  border: 0;
}

.migration-site-header__search-results .predictive-search__more svg {
  width: 14px;
  height: 14px;
}

.migration-site-header__search-empty {
  padding: 12px 2px;
  font-size: 13px;
  color: rgba(var(--color-button-background), 0.75);
}

@media (max-width: 759px) {
  .migration-site-header__search {
    padding: 12px 16px 16px;
  }

  .migration-site-header__search-submit {
    display: none;
  }

  .migration-site-header__search-results .predictive-search__results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

.migration-site-header__mobile-menu {
  position: static;
  z-index: 59;
  display: grid;
  padding: 8px 20px 20px;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  text-transform: none;
  letter-spacing: normal;
  background: rgba(var(--color-background));
  border-top: 1px solid rgba(var(--color-button-background), 0.14);
  border-bottom: 0;
  box-shadow: none;
  gap: 2px;
}

.migration-site-header__mobile-menu[hidden] {
  display: none;
}

.migration-site-header__mobile-menu a {
  height: 48px;
  padding: 14px 4px;
  color: rgba(var(--color-button-background)) !important;
  border-bottom: 1px solid rgba(var(--color-button-background), 0.1);
}

.migration-site-header__mobile-menu a:last-child {
  height: 47px;
  border-bottom: 0;
}

.migration-site-header.is-menu-open,
.migration-site-header.is-search-open {
  height: auto;
}

.migration-site-header-spacer {
  height: var(--migration-header-height);
}

@media (max-width: 1079px) {
  .migration-site-header__menu-button {
    display: block;
  }

  .migration-site-header__logo img {
    height: 30px;
  }

  .migration-site-header__nav {
    display: none;
  }
}

/* Media banners */
.media-banner {
  position: relative;
  overflow: hidden;
}

.media-banner__media,
.media-banner__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.media-banner__media {
  display: block;
  object-fit: cover;
}

.media-banner--hero {
  display: flex;
  min-height: min(78vh, 720px);
  align-items: flex-end;
}

/* Bottle's stock banner rules share the media-banner namespace. Keep the
 * captured source minimum authoritative after the stock stylesheet cascade. */
[data-section-key="hero-banner"].media-banner--hero {
  min-height: min(78vh, 720px) !important;
}

.media-banner--hero .media-banner__media {
  opacity: 0.92;
}

.media-banner--hero .media-banner__shade {
  background: linear-gradient(180deg, rgba(var(--color-background), 0.15) 0%, rgba(var(--color-background), 0.55) 55%, rgba(var(--color-background), 0.9) 100%);
}

.media-banner--hero .media-banner__content {
  position: relative;
  width: 100%;
  max-width: 1280px;
  padding: clamp(48px, 8vw, 90px) 20px;
  margin: 0 auto;
}

.media-banner--hero .media-banner__copy {
  max-width: 640px;
}

.media-banner__pill {
  display: inline-block;
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(var(--color-light-text));
  text-transform: uppercase;
  letter-spacing: 0.2em;
  border: 1px solid rgba(var(--color-light-text), 0.5);
  border-radius: 999px;
}

.media-banner--hero h1 {
  margin: 22px 0 18px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(38px, 6.4vw, 74px);
  font-weight: 700;
  line-height: 1.02;
  color: rgba(var(--color-text));
  text-wrap: balance;
}

.media-banner--hero p {
  max-width: 520px;
  margin-bottom: 30px;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.65;
  color: rgba(var(--color-text), 0.9);
}

.media-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.media-banner--hero .migration-button {
  padding: 18px 30px;
}

.media-banner__secondary {
  color: rgba(var(--color-text)) !important;
  background: transparent;
  border: 1px solid rgba(var(--color-text), 0.6);
}

.media-banner__secondary:hover {
  color: rgba(var(--color-text)) !important;
  background: rgba(var(--color-text), 0.14);
}

.media-banner--hero .migration-button:hover,
.media-banner--closing .migration-button:hover,
.benefit-grid__action .migration-button:hover {
  box-shadow: none;
  transform: none;
}

.media-banner--hero .migration-button:not(.media-banner__secondary):hover,
.media-banner--closing .migration-button:hover {
  color: #173824 !important;
  background: #DDE7E0;
}

.benefit-grid__action .migration-button:hover {
  background: #173824;
}

/* Aug 28 #2: on a phone the hero ran most of the screen before the first
   product was reachable. It loses roughly a fifth of its height and the copy
   centres in what is left; the desktop banner is untouched. The scrim evens
   out because the text no longer sits in the dark band at the bottom. */
@media (max-width: 759px) {
  .media-banner--hero,
  [data-section-key="hero-banner"].media-banner--hero {
    min-height: min(62vh, 520px) !important;
    align-items: center;
  }

  .media-banner--hero .media-banner__shade {
    background: linear-gradient(180deg, rgba(var(--color-background), 0.4) 0%, rgba(var(--color-background), 0.6) 50%, rgba(var(--color-background), 0.85) 100%);
  }

  .media-banner--hero .media-banner__content {
    padding: 32px 20px;
  }

  .media-banner--hero .media-banner__copy {
    max-width: none;
    text-align: center;
  }

  .media-banner--hero h1 {
    margin: 16px 0 14px;
  }

  .media-banner--hero p {
    max-width: 34ch;
    margin-right: auto;
    margin-bottom: 24px;
    margin-left: auto;
  }

  .media-banner--hero .media-banner__actions {
    justify-content: center;
  }
}

.media-banner--closing .media-banner__media {
  opacity: 0.55;
}

.media-banner--closing .media-banner__content {
  position: relative;
  max-width: 820px;
  padding: clamp(64px, 10vw, 130px) 20px;
  margin: 0 auto;
  text-align: center;
}

.media-banner--closing .migration-button {
  padding: 18px 34px;
}

.media-banner--closing .media-banner__actions {
  justify-content: center;
}

.media-banner--closing h2 {
  margin-bottom: 18px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(30px, 4.6vw, 56px);
  font-weight: 700;
  line-height: 1.08;
  color: rgba(var(--color-text));
}

.media-banner--closing p {
  margin-bottom: 30px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(var(--color-text), 0.9);
}

/* Compact one-action closing banners retain the family while exposing a
 * tighter crop and rhythm for shorter compositions. */
.media-banner--closing-compact .media-banner__media {
  opacity: 0.5;
}

.media-banner--closing-compact .media-banner__content {
  max-width: 760px;
  padding: 120px 20px;
}

.media-banner--closing-compact h2 {
  margin: 0 0 18px;
  font-size: 50px;
  line-height: 1.1;
}

.media-banner--closing-compact .migration-button {
  display: inline-block;
  width: auto;
  padding: 18px 32px;
}

@media (min-width: 750px) and (max-width: 1079px) {
  .media-banner--closing-compact .media-banner__content {
    padding-block: 69.12px;
  }

  .media-banner--closing-compact h2 {
    font-size: 32.256px;
  }
}

@media (max-width: 749px) {
  .media-banner--closing-compact .media-banner__content {
    padding-block: 56px;
  }

  .media-banner--closing-compact h2 {
    font-size: 28px;
    line-height: 1.1;
  }
}

/* Statement banners carry an eyebrow, a single display heading, and intro
 * copy over a dimmed full-bleed photo — no actions. */
.media-banner--statement .media-banner__media {
  opacity: 0.4;
}

.media-banner--statement .media-banner__content {
  position: relative;
  width: 100%;
  max-width: 1280px;
  padding: clamp(56px, 8vw, 110px) 20px;
  margin: 0 auto;
}

.media-banner__eyebrow {
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 700;
  line-height: normal;
  color: #dde7e0;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.media-banner--statement h1 {
  max-width: 720px;
  margin: 0 0 18px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(30px, 4.6vw, 56px);
  font-weight: 700;
  line-height: 1.08;
  color: rgba(var(--color-text));
  text-wrap: balance;
}

.media-banner--statement p {
  max-width: 600px;
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(var(--color-text), 0.88);
}

/* Proof bar */
.proof-bar__grid {
  display: grid;
  max-width: 1280px;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  text-align: center;
}

.proof-bar__item {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Benefit grid */
.benefit-grid__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(32px, 5vw, 48px);
}

.benefit-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.benefit-grid__icon {
  display: block;
  width: 92px;
  height: 92px;
  margin-bottom: 20px;
  object-fit: contain;
}

.benefit-grid__item h3 {
  max-width: 17ch;
  margin-bottom: 12px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 700;
  line-height: 1.25;
  color: rgba(var(--color-text));
  text-wrap: balance;
}

.benefit-grid__item p {
  max-width: 34ch;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(var(--color-light-text));
}

.benefit-grid__action {
  margin-top: clamp(36px, 5vw, 52px);
  text-align: center;
}

/* Aug 28 #8 centred the icon over its column on desktop but left the title and
   copy flush left, so the column read as a centred icon sitting on top of
   left-aligned text. Aug 31 #27 then asked for centring on a phone, and the
   same mismatch showed up there.
   The whole column centres, at every width. Scoped to the columns that carry
   an icon, so the rule-topped variant — which is meant to read as a
   left-aligned list under its top border — keeps its alignment. The rail on a
   phone is the shared [data-migration-rail] treatment at the foot of this
   file, and is unaffected either way. */
.benefit-grid--columns .benefit-grid__item:has(.benefit-grid__icon) {
  align-items: center;
  text-align: center;
}

.benefit-grid--columns .benefit-grid__item:has(.benefit-grid__icon) .benefit-grid__icon {
  margin-right: auto;
  margin-left: auto;
}

/* Process / evidence split */
.process-media__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: center;
  gap: clamp(32px, 5vw, 68px);
}

.process-media__copy > .migration-copy {
  max-width: 560px;
  margin-top: 20px;
  margin-bottom: 26px;
}

.process-media__items {
  display: grid;
  max-width: 520px;
  gap: 18px;
}

.process-media__step {
  display: flex;
  align-items: flex-start;
  padding-bottom: 18px;
  gap: 14px;
  border-bottom: 1px solid rgba(var(--color-text), 0.16);
}

.process-media__step:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.process-media__step-number {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 15px;
  color: rgba(var(--color-button-text-link));
}

.process-media__step-title {
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  color: rgba(var(--color-text));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.process-media__step-copy {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(var(--color-light-text));
}

.process-media__link {
  margin-top: 28px;
}

.process-media__media-wrap {
  position: relative;
}

.process-media__media {
  display: block;
  width: 100%;
  height: clamp(320px, 44vw, 560px);
  object-fit: cover;
  border-radius: 4px;
}

.process-media__fact {
  position: absolute;
  bottom: -18px;
  left: -18px;
  max-width: 230px;
  padding: 20px 24px;
  color: rgba(var(--color-text));
  background: rgba(var(--color-background));
}

.process-media__fact-value {
  display: block;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 30px;
  line-height: 1;
}

.process-media__fact-label {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Aug 28 #16: the fact badge as a link. On desktop it keeps the plain badge it
   has always been — the "shop" affordance only appears at the phone width,
   where the badge is a full-width block under the image. */
.process-media__fact--link {
  color: rgba(var(--color-text)) !important;
}

.process-media__fact-cta {
  display: none;
}

.process-media--evidence .process-media__grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 64px);
}

.process-media--evidence .process-media__copy > .migration-copy {
  max-width: 540px;
  margin-bottom: 32px;
}

.process-media--evidence .process-media__media {
  height: clamp(300px, 40vw, 520px);
}

.process-media__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: rgba(var(--color-text), 0.2);
}

.process-media__stat {
  padding: 22px 18px;
  color: rgba(var(--color-text));
  background: rgba(var(--color-background));
}

.process-media__stat-value {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 34px;
  line-height: 1;
}

.process-media__stat-label {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(var(--color-light-text));
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Product cards */
.product-card-grid__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 16px;
}

.product-card-grid__header .migration-eyebrow {
  margin-bottom: 14px;
}

.product-card-grid__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.product-card-grid__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: rgba(var(--color-text)) !important;
  background: rgba(var(--color-card-background));
  border: 1px solid rgba(var(--color-text), 0.16);
  border-radius: 6px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.product-card-grid__card:hover {
  color: rgba(var(--color-text)) !important;
  border-color: rgba(var(--color-text));
  box-shadow: 0 14px 34px rgba(var(--color-text), 0.1);
  transform: translateY(-3px);
}

.product-card-grid__media {
  position: relative;
  display: grid;
  padding: 22px;
  overflow: hidden;
  aspect-ratio: 1;
  background: rgba(var(--color-media-background));
  place-items: center;
}

.product-card-grid__media img {
  position: absolute;
  inset: 22px;
  display: block;
  width: calc(100% - 44px);
  height: calc(100% - 44px);
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.product-card-grid__card:hover .product-card-grid__media img {
  transform: scale(1.045);
}

.product-card-grid__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 11px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(var(--color-text));
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: rgba(var(--color-background));
  border-radius: 999px;
}

.product-card-grid__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px;
  gap: 8px;
}

.product-card-grid__title {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 17px;
  line-height: 1.3;
  color: rgba(var(--color-text));
}

.product-card-grid__description {
  flex: 1;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(var(--color-light-text));
}

.product-card-grid__price-row {
  display: flex;
  align-items: baseline;
  margin-top: 4px;
  gap: 9px;
}

.product-card-grid__price {
  font-size: 18px;
  font-weight: 700;
  color: rgba(var(--color-text));
}

.product-card-grid__compare {
  font-size: 13px;
  color: rgba(var(--color-light-text), 0.72);
  text-decoration: line-through;
}

.product-card-grid__cta {
  padding: 14px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(var(--color-button-text));
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: rgba(var(--color-button-background));
  border-radius: 999px;
}

.product-card-grid__note {
  margin-top: 22px;
  font-size: 12px;
  color: rgba(var(--color-light-text));
  text-align: center;
}

/* Product catalog variant */
.product-card-grid--catalog .product-card-grid__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  margin-bottom: 32px;
  gap: 10px;
  border-bottom: 1px solid rgba(33, 78, 52, 0.16);
}

.product-card-grid--catalog .product-card-grid__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-card-grid--catalog .product-card-grid__filter {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  height: 39px;
  padding: 0 20px;
  margin: 0;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  color: #214e34;
  letter-spacing: 0.06em;
  cursor: pointer;
  background: transparent;
  border: 1.5px solid #214e34;
  border-radius: 999px;
}

.product-card-grid--catalog .product-card-grid__filter::before {
  position: absolute;
  inset: -3px 0;
  content: "";
}

.product-card-grid--catalog .product-card-grid__filter[aria-pressed="true"] {
  color: #f7f4ec;
  background: #214e34;
}

.product-card-grid--catalog .product-card-grid__filter:hover:not([aria-pressed="true"]) {
  background: rgba(33, 78, 52, 0.08);
}

.product-card-grid--catalog .product-card-grid__filter:focus-visible {
  outline: 2px solid #173824;
  outline-offset: 3px;
}

.product-card-grid--catalog .product-card-grid__result {
  font-size: 12px;
  line-height: normal;
  color: #5c6b60;
}

.product-card-grid--catalog .product-card-grid__items {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 22px;
}

.product-card-grid--catalog .product-card-grid__card {
  color: #222 !important;
  background: #fff;
  border-color: rgba(33, 78, 52, 0.16);
}

.product-card-grid--catalog .product-card-grid__card[hidden] {
  display: none;
}

.product-card-grid--catalog .product-card-grid__card:hover {
  color: #222 !important;
  border-color: #214e34;
  box-shadow: 0 14px 34px rgba(23, 56, 36, 0.1);
}

.product-card-grid--catalog .product-card-grid__card:focus-visible {
  outline: 3px solid #214e34;
  outline-offset: 3px;
}

.product-card-grid--catalog .product-card-grid__media {
  padding: 24px;
  aspect-ratio: 4 / 3;
  background: #f7f4ec;
}

.product-card-grid--catalog .product-card-grid__media img {
  inset: 24px;
  width: calc(100% - 48px);
  height: calc(100% - 48px);
}

.product-card-grid--catalog .product-card-grid__body {
  padding: 22px;
  gap: 9px;
}

.product-card-grid--catalog .product-card-grid__title {
  font-size: 18px;
  color: #173824;
}

.product-card-grid--catalog .product-card-grid__description {
  font-size: 13px;
  line-height: 1.65;
  color: #3d4c42;
}

.product-card-grid--catalog .product-card-grid__contents {
  font-size: 12px;
  line-height: normal;
  color: #5c6b60;
}

.product-card-grid--catalog .product-card-grid__price-row {
  margin-top: 2px;
}

.product-card-grid--catalog .product-card-grid__price {
  font-size: 19px;
  color: #173824;
}

.product-card-grid--catalog .product-card-grid__compare {
  color: #7d8a81;
}

.product-card-grid--catalog .product-card-grid__cta {
  margin-top: 10px;
}

/* Marquee */
@keyframes migration-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.text-marquee {
  color: #222222;
  overflow: hidden;
}

.text-marquee__track {
  display: flex;
  width: max-content;
  animation: migration-marquee 26s linear infinite;
}

.text-marquee__group {
  display: flex;
  padding-right: 64px;
  gap: 64px;
}

.text-marquee__item {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: normal;
  color: #F7F4EC;
  white-space: nowrap;
}

/* Hotspots */
.image-hotspots__header {
  margin-bottom: 36px;
  text-align: center;
}

.image-hotspots__header .migration-eyebrow {
  margin-bottom: 14px;
}

.image-hotspots__header .migration-title {
  font-size: clamp(28px, 3.8vw, 46px);
}

.image-hotspots__helper {
  margin-top: 14px !important;
  font-size: 14px;
  color: rgba(var(--color-light-text));
}

.image-hotspots__media {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
}

.image-hotspots__stage {
  position: relative;
}

.image-hotspots__media > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-hotspots__marker {
  position: absolute;
  top: var(--hotspot-top);
  left: var(--hotspot-left);
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  color: rgba(var(--color-text));
  cursor: pointer;
  background: rgba(var(--color-card-background), 0.92);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(var(--color-text), 0.35);
  transform: translate(-50%, -50%);
  place-items: center;
}

.image-hotspots__panel {
  position: absolute;
  top: var(--panel-top, 55%);
  left: var(--panel-left, 26%);
  display: block;
  max-width: min(320px, 68%);
  padding: 22px 24px;
  background: rgba(var(--color-card-background), 0.96);
  border-radius: 8px;
  box-shadow: 0 14px 40px rgba(var(--color-text), 0.3);
  transform: translate(-50%, -50%);
}

.image-hotspots__panel-title {
  margin-bottom: 10px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 17px;
  line-height: normal;
  color: rgba(var(--color-text));
}

.image-hotspots__panel-copy {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(var(--color-light-text));
}

@media (max-width: 759px) {
  .image-hotspots__panel {
    position: relative;
    top: auto;
    left: auto;
    max-width: none;
    padding: 20px 22px;
    margin-top: 14px;
    background: rgba(var(--color-card-background));
    border: 1px solid rgba(var(--color-text), 0.18);
    box-shadow: none;
    transform: none;
  }
}

/* Editorial grid */
.editorial-card-grid__title {
  margin-bottom: 40px !important;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.14;
  text-align: center;
}

.editorial-card-grid__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: stretch;
  gap: 18px;
}

/* Each card is one box: its own image and its own text, together. This used to
   be display:contents, which spilled both into the grid as loose cells — a card's
   text could end up a row away from its picture. */
.editorial-card-grid__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: rgba(var(--color-text));
  background: rgba(var(--color-background));
  border-radius: 10px;
}

.editorial-card-grid__media {
  display: block;
  width: 100%;
  height: 240px;
  flex: 0 0 auto;
  object-fit: cover;
}

.editorial-card-grid__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 3vw, 38px);
}

/* No picture: the card is just its copy, and needs the height the image gave it. */
.editorial-card-grid__card--no-media .editorial-card-grid__content {
  min-height: 260px;
}

.editorial-card-grid__content h3 {
  margin-bottom: 14px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 400;
  line-height: normal;
}

.editorial-card-grid__content p {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(var(--color-light-text));
}

.editorial-card-grid__content .migration-text-link {
  align-self: flex-start;
  margin-top: 18px;
  color: rgba(var(--color-light-text)) !important;
  border-bottom-color: rgba(var(--color-light-text));
}

/* Coverage cards */
.coverage-grid__intro {
  max-width: 620px;
  margin-bottom: 40px;
}

.coverage-grid__intro .migration-title {
  margin-bottom: 16px;
}

.coverage-grid__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.coverage-grid__card {
  position: relative;
  padding: 28px;
  color: rgba(var(--color-text));
  background: rgba(var(--color-background));
  border-radius: 6px;
}

/* Aug 31 #36: stretched link — the card is the target, but only the anchor is
   in the accessibility tree, carrying the card's title as its name. */
.coverage-grid__card-link {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.coverage-grid__card-link:focus-visible {
  outline: 2px solid rgba(var(--color-text), 0.9);
  outline-offset: 3px;
}

.coverage-grid__badge {
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(var(--color-light-text));
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.coverage-grid__card h3 {
  margin-bottom: 12px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
}

.coverage-grid__card p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(var(--color-light-text));
}

/* Review app shell */
.review-summary__header {
  max-width: 620px;
  margin: 0 auto 12px;
  text-align: center;
}

.review-summary__header .migration-eyebrow {
  margin-bottom: 14px;
}

.review-summary__header .migration-title {
  margin-bottom: 18px;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.15;
}

/* Deferred variant: theme-owned band only (eyebrow + heading), Shopline Reviews app mounts below */
.review-summary__header--deferred {
  max-width: 560px;
  margin: 0 auto;
  padding-bottom: 30px;
}

.review-summary__header--deferred .migration-eyebrow {
  margin-bottom: 14px;
}

.review-summary__header--deferred .migration-title {
  margin-bottom: 0;
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.15;
}

.review-summary__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.review-summary__stars {
  font-size: 20px;
  line-height: 1;
  letter-spacing: 2px;
}

.review-summary__score {
  font-size: 15px;
  font-weight: 700;
  color: rgba(var(--color-text));
}

.review-summary__count {
  font-size: 14px;
  color: rgba(var(--color-light-text));
}

.review-summary__mount:empty {
  display: none;
}

.review-summary__action {
  margin-top: 32px;
  text-align: center;
}

.review-summary__action .migration-button {
  padding: 15px 28px;
  font-size: 12px;
  color: rgba(var(--color-text)) !important;
  background: transparent;
  border: 1.5px solid rgba(var(--color-text));
}

/* Footer trust band */
.trust-bar__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: 1280px;
  margin: 0 auto;
  gap: 28px;
}

.trust-bar__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.trust-bar__icon {
  display: block;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  flex: 0 0 auto;
  object-fit: contain;
}

.trust-bar__title {
  margin-bottom: 6px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 16px;
  color: rgba(var(--color-text));
}

.trust-bar__copy {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(var(--color-light-text));
}

/* Shared footer */
.migration-site-footer {
  display: block;
  width: 100%;
  padding: clamp(48px, 7vw, 80px) 20px 32px;
  color: rgba(var(--color-text));
  background: rgba(var(--color-background));
}

/* Aug 28 #19: the footer now carries a fourth link column (Legal), so the
   brand block gets its own wider track and the link columns share what is
   left instead of every track being equal — five 220px tracks plus 44px gaps
   overran the 1280px row. */
.migration-site-footer__grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) repeat(auto-fit, minmax(150px, 1fr));
  max-width: 1280px;
  margin: 0 auto;
  gap: 44px 32px;
}

.migration-site-footer__brand {
  max-width: 340px;
}

.migration-site-footer__logo {
  display: block;
  width: auto;
  height: 42px;
  filter: brightness(0) invert(1);
}

.migration-site-footer__description {
  margin: 18px 0 22px !important;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(var(--color-text), 0.8);
}

.migration-site-footer__eyebrow,
.migration-site-footer__column-title {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.migration-site-footer__column-title {
  margin-bottom: 16px;
}

/* Sep 3 #55: the form element is the platform helper's to render now, so these
   hang off the wrapper the template owns and match the form as a child rather
   than by a class we do not control. Same rules, addressed from outside. */
.migration-site-footer__form,
.migration-site-footer__form-wrap > form {
  display: flex;
  align-items: stretch;
  max-width: 340px;
  gap: 8px;
}

.migration-site-footer__form-wrap .migration-field {
  min-width: 0;
  flex: 1;
}

.migration-site-footer__form-wrap .migration-field > input {
  color: rgba(var(--color-text));
  background: rgba(var(--color-text), 0.1);
  border-color: rgba(var(--color-text), 0.35);
}

.migration-site-footer__form-wrap .migration-field__label {
  color: rgba(var(--color-text), 0.75);
}

.migration-site-footer__form-wrap .migration-button {
  padding: 0 22px;
  font-size: 12px;
  letter-spacing: 0.08em;
  flex: 0 0 auto;
}

.migration-site-footer__status {
  min-height: 16px;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(var(--color-light-text));
}

.migration-site-footer__links {
  display: grid;
  font-size: 13px;
  gap: 11px;
}

.migration-site-footer__links a {
  color: rgba(var(--color-text), 0.85) !important;
}

.migration-site-footer__links a:hover {
  color: rgba(var(--color-text)) !important;
}

.migration-site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  max-width: 1280px;
  padding-top: 22px;
  margin: 44px auto 0;
  font-size: 11px;
  color: rgba(var(--color-text), 0.7);
  border-top: 1px solid rgba(var(--color-text), 0.2);
  gap: 16px 32px;
}

.migration-site-footer__legal {
  display: grid;
  max-width: 640px;
  gap: 8px;
}

.migration-site-footer__credit {
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}

.migration-site-footer__credit a {
  color: rgba(var(--color-text)) !important;
  border-bottom: 1px solid rgba(var(--color-text), 0.5);
}

/* The footer ran to ~1400px on a phone. The guarantee band collapses to three
   icon-over-title cells with the bodies dropped, the link columns pair up, and
   the paddings come in — the same content, roughly half the scroll. */
@media (max-width: 759px) {
  .trust-bar__items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 10px;
    text-align: center;
  }

  .trust-bar__item {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .trust-bar__icon {
    margin-top: 0;
  }

  .trust-bar__title {
    margin-bottom: 0;
    font-size: 13px;
    line-height: 1.3;
  }

  .trust-bar__copy {
    display: none;
  }

  .migration-site-footer {
    padding: 36px 20px 24px;
  }

  .migration-site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 20px;
  }

  .migration-site-footer__brand {
    grid-column: 1 / -1;
    max-width: none;
  }

  .migration-site-footer__description {
    margin: 14px 0 18px !important;
  }

  .migration-site-footer__column-title {
    margin-bottom: 10px;
  }

  .migration-site-footer__links {
    gap: 9px;
  }

  .migration-site-footer__bottom {
    padding-top: 18px;
    margin-top: 26px;
  }
}

@media (max-width: 479px) {
  .migration-site-footer__form,
  .migration-site-footer__form-wrap > form {
    flex-wrap: wrap;
  }

  .migration-site-footer__form-wrap .migration-button {
    min-height: 51px;
  }

  .migration-site-footer__bottom {
    align-items: flex-start;
  }

  .migration-site-footer__credit {
    margin-left: 0;
    text-align: left;
    white-space: normal;
  }
}

/* Promotional modal */
.promotional-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  width: 100%;
  height: 100%;
  color: rgba(var(--color-text));
  background: transparent;
  place-items: center;
}

.promotional-modal[hidden] {
  display: none;
}

.promotional-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 56, 36, 0.6);
  animation: migration-fade 0.28s ease both;
}

.promotional-modal__panel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  width: 100%;
  max-width: 760px;
  overflow: hidden;
  background: rgba(var(--color-background));
  border-radius: 8px;
  animation: migration-pop 0.34s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

.promotional-modal__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
}

.promotional-modal__content {
  padding: 36px 32px;
}

.promotional-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  color: rgba(var(--color-text));
  cursor: pointer;
  background: none;
  border: 0;
}

.promotional-modal__eyebrow {
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.promotional-modal h3 {
  margin-bottom: 12px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
}

.promotional-modal p {
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(var(--color-light-text));
}

/* Sep 3 #55: as in the footer — the helper renders the form, so the layout is
   addressed from the wrapper the template owns. */
.promotional-modal__form,
.promotional-modal__form-wrap > form {
  display: grid;
  gap: 10px;
}

.promotional-modal__form[hidden] {
  display: none;
}

.promotional-modal__form-wrap .migration-button {
  min-height: 48px;
  padding: 16px;
  font-size: 12px;
}

/* Sep 3 #55: the offer only stands up if a failed signup says so. Sits under
   the form, which stays put so the address can be sent again. */
.promotional-modal__error {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgb(var(--color-error-message));
}

.promotional-modal__decline {
  padding: 12px 0 0;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 12px;
  color: rgba(var(--color-light-text));
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: 0;
}

.promotional-modal__success {
  padding: 18px;
  text-align: center;
  background: rgba(var(--color-media-background));
  border-radius: 6px;
}

.promotional-modal__success[hidden] {
  display: none;
}

.promotional-modal__code-label {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.promotional-modal__code {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 24px;
}

.promotional-teaser {
  position: fixed;
  bottom: 28px;
  left: 0;
  z-index: 120;
  display: block;
  width: auto;
  height: 44px;
  padding: 14px 16px;
  margin: 0;
  font-family: Montserrat, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: normal;
  color: #F7F4EC;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  background: #214E34;
  border: 1px solid transparent;
  border-radius: 0 6px 6px 0;
  transition: color 0.3s ease, background 0.3s ease;
}

.promotional-teaser[hidden] {
  display: none;
}

.promotional-teaser.is-on-dark {
  color: #214E34;
  background: #F7F4EC;
  border-color: #214E34;
}

@keyframes migration-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes migration-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .text-marquee__track { animation: none; transform: none; }
  .product-card-grid__card:hover,
  .product-card-grid__card:hover .product-card-grid__media img,
  .migration-button:hover { transform: none; }
}

/* Benefit grid — media-free columns variant (rule-topped uppercase titles) */
.benefit-grid--columns .benefit-grid__items {
  gap: 24px;
}

.benefit-grid--columns .benefit-grid__item {
  align-items: flex-start;
  text-align: left;
  padding-top: 22px;
  border-top: 2px solid #214e34;
}

/* An icon replaces the rule line — the column gets one or the other, never both. */
.benefit-grid--columns .benefit-grid__item:has(.benefit-grid__icon) {
  padding-top: 0;
  border-top: 0;
}

.benefit-grid--columns .benefit-grid__item h3 {
  max-width: none;
  margin: 0 0 12px;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: normal;
  text-transform: uppercase;
  color: #173824;
}

.benefit-grid--columns .benefit-grid__item p {
  max-width: none;
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: #3d4c42;
}

/* Review summary — detailed variant (rating shell + histogram + app mount) */
.review-summary--detailed .review-summary__header {
  max-width: 560px;
  margin: 0 auto 30px;
  text-align: center;
}

.review-summary__frame {
  overflow: hidden;
  border: 1px solid rgba(33, 78, 52, 0.18);
  border-radius: 10px;
  background: #fff;
}

.review-summary__shell {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(24px, 3.5vw, 36px);
  border-bottom: 1px solid rgba(33, 78, 52, 0.14);
}

.review-summary__aggregate {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.review-summary__score-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.review-summary--detailed .review-summary__score {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 52px;
  line-height: 1;
  color: #173824;
}

.review-summary__score-side {
  padding-bottom: 6px;
}

.review-summary__stars-row {
  font-size: 19px;
  letter-spacing: 2px;
  line-height: 1;
}

.review-summary__stars-empty {
  color: #cfd8d2;
}

.review-summary__based {
  margin-top: 6px;
  font-size: 12.5px;
  color: #5c6b60;
}

.review-summary__write {
  display: inline-block;
  align-self: flex-start;
  margin-top: 20px;
  padding: 11px 20px;
  border: 1.5px solid #214e34;
  border-radius: 999px;
  color: #214e34;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

.review-summary__write:hover {
  background: #214e34;
  color: #f7f4ec;
}

.review-summary__histogram {
  display: grid;
  gap: 7px;
  align-content: center;
}

.review-summary__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-summary__row-label {
  flex: 0 0 auto;
  width: 30px;
  font-size: 12px;
  color: #5c6b60;
}

.review-summary__row-bar {
  flex: 1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(33, 78, 52, 0.12);
}

.review-summary__row-bar > div {
  height: 100%;
  background: #d9a441;
}

.review-summary__row-count {
  flex: 0 0 auto;
  width: 26px;
  text-align: right;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: #5c6b60;
}

.review-summary--detailed .review-summary__mount:empty {
  display: none;
}

/* Process media — media-first ordering and plain (unruled) step rows */
.process-media--media-first .process-media__copy {
  order: 2;
}

.process-media--media-first .process-media__media-wrap {
  order: 1;
}

.process-media--plain-steps .process-media__items {
  gap: 14px;
  max-width: 460px;
}

.process-media--plain-steps .process-media__step {
  padding-bottom: 0;
  gap: 12px;
  border-bottom: 0;
}

.process-media--plain-steps .process-media__step-number {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #dde7e0;
}

.process-media--plain-steps .process-media__step-title {
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  text-transform: none;
  color: rgba(247, 244, 236, 0.9);
}

/* Process media — scroll-synced steps beside a sticky cross-fade media panel.
 * The step nearest the viewport middle is active; its stage image is shown. */
.process-media--scroll-steps .process-media__scroll-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: start;
  gap: clamp(28px, 4vw, 60px);
  min-width: 0;
}

.process-media__scroll-sticky {
  position: sticky;
  top: 150px;
  min-width: 0;
}

.process-media__scroll-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #dde7e0;
  border-radius: 8px;
  min-width: 0;
}

.process-media__scroll-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s;
}

.process-media__scroll-image.is-active {
  opacity: 1;
}

.process-media__scroll-items {
  display: grid;
  min-width: 0;
}

.process-media__scroll-step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(72vh, 560px);
  padding: 20px 0;
  opacity: 0.35;
  transition: opacity 0.4s;
}

.process-media__scroll-step.is-active {
  opacity: 1;
}

[data-step-list]:not(:has(.is-active)) .process-media__scroll-step:first-child {
  opacity: 1;
}

.process-media__scroll-marker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.process-media__scroll-rule {
  width: 38px;
  height: 2px;
  background: #214e34;
}

.process-media__scroll-number {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: #214e34;
}

.process-media__scroll-step .process-media__scroll-title {
  max-width: 480px;
  margin: 0 0 18px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.12;
  color: #173824;
}

.process-media__scroll-copy {
  max-width: 500px;
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: #3d4c42;
}

/* The per-step image only exists for the phone layout below. */
.process-media__scroll-step-media {
  display: none;
}

/* Aug 28 #12 + #13: at one column each step held 72vh whether or not it had
   that much to say, so the section read as four screens of blank space. That
   pass answered it by dropping the pinned stage on a phone and giving every
   step its own inline image — which removed the effect along with the space.
   Aug 31 #12 asks for the effect back, as the desktop layout rotated: the
   image pinned at the TOP, the copy scrolling underneath it, the image
   cross-fading as each step comes up. So the stage returns, the steps stay
   sized to their content, and the per-step images go. */
@media (max-width: 759px) {
  /* Sep 1: the frame used to pin at 8px, which put its top 24px behind the
     promo bar and let the nav land on top of it. It now stops under whatever
     chrome is actually on screen: the promo bar, which never moves, plus the
     nav band while it is out. Both are measured rather than assumed — the
     promo bar only takes room while it is pinned, and the nav retracts on the
     way down and returns on the way up, so the offset is live. */
  :root {
    --process-stage-promo-offset: 0px;
    --process-stage-nav-offset: 0px;
  }

  :root:has(.migration-promo-bar--pinned) {
    --process-stage-promo-offset: var(--migration-promo-height);
  }

  :root:has(.migration-site-header:not(.is-hidden)) {
    --process-stage-nav-offset: var(--migration-header-height);
  }

  /* Sep 3 #51: the copy passing behind the frame was leaking out around it at
     both ends — a step title fully legible in the 24px band above the image,
     and a line of copy sliced in half on its bottom edge.

     The top band was gap: the frame pinned 24px below the chrome and nothing
     was painted in between, so text scrolling up stayed readable right until it
     reached the image. That 24px now belongs to the sticky element as padding
     rather than sitting above it as offset — the image holds its position, but
     the block is opaque from the chrome down and copy disappears at the chrome
     line instead of under the picture. The step text and the frame share this
     container's content box, so the background covers the full width text can
     occupy without needing to bleed past it. */
  .process-media--scroll-steps .process-media__scroll-sticky {
    display: block;
    position: sticky;
    top: calc(
      var(--process-stage-promo-offset) + var(--process-stage-nav-offset)
    );
    padding-block-start: 24px;
    background: rgb(var(--color-background));
    /* The same 0.35s the nav moves on, so the frame is pushed down by the menu
       arriving rather than jumping out from under it. */
    transition: top 0.35s;
    z-index: 1;
  }

  /* The bottom edge is a hard cut by nature — a line crossing it is half
     painted for as long as it takes to clear. Fading the band it emerges into
     means copy arrives rather than surfacing mid-letter. Sits outside the
     element's own box, so it costs the frame no height. */
  .process-media--scroll-steps .process-media__scroll-sticky::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 100%;
    height: 44px;
    background: linear-gradient(
      rgb(var(--color-background)),
      rgba(var(--color-background), 0)
    );
    pointer-events: none;
  }

  /* Shorter than the desktop 4:3 — the stage is the reference here, not the
     subject, and the copy under it should still get most of the screen. */
  .process-media--scroll-steps .process-media__scroll-stage {
    aspect-ratio: auto;
    height: 32vh;
    box-shadow: 0 12px 22px -18px rgba(23, 56, 36, 0.85);
  }

  .process-media--scroll-steps .process-media__scroll-grid {
    gap: 20px;
  }

  /* The copy passes behind the stage, which is the point of the effect: the
     stage is positioned and the list is not, so it paints over the list on its
     own. It needs an opaque background for that to read as intended — it has
     one, and the shadow above gives the copy an edge to disappear under. */
  .process-media__scroll-step {
    min-height: 0;
    padding: 0 0 40px;
    opacity: 0.45;
  }

  .process-media__scroll-step.is-active {
    opacity: 1;
  }

  .process-media__scroll-step:last-child {
    padding-bottom: 0;
  }

  .process-media__scroll-marker {
    margin-bottom: 12px;
  }

  .process-media__scroll-step .process-media__scroll-title {
    margin-bottom: 12px;
  }

  /* One pinned image again, so the per-step copies would be duplicates. */
  .process-media__scroll-step-media {
    display: none;
  }
}

/* Process media — placement checklist (numbered rows, no titles or rules,
 * compact centered two-column grid beside a fixed-height cover image) */
.process-media--placement .process-media__grid {
  gap: clamp(28px, 5vw, 60px);
}

.process-media--placement .migration-eyebrow {
  margin-bottom: 14px;
  color: #214e34;
}

.process-media--placement .migration-title {
  margin-bottom: 20px;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.14;
  color: #173824;
  text-wrap: initial;
}

.process-media--placement .process-media__items {
  max-width: 540px;
  gap: 16px;
}

.process-media--placement .process-media__step {
  gap: 14px;
  padding-bottom: 0;
  border-bottom: 0;
}

.process-media--placement .process-media__step-number {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  color: #214e34;
}

.process-media--placement .process-media__step-copy {
  font-size: 15px;
  line-height: 1.7;
  color: #3d4c42;
}

.process-media--placement .process-media__media {
  height: clamp(280px, 36vw, 460px);
}

/* Process media — short media band (compact image and tighter grid gap) */
.process-media--media-short .process-media__grid {
  gap: clamp(28px, 5vw, 60px);
}

.process-media--media-short .process-media__media {
  height: clamp(280px, 38vw, 480px);
}

.process-media--media-short .process-media__copy > .migration-copy {
  max-width: 520px;
}

/* Process media — short band typography matches its compact scale */
.process-media--media-short .migration-title {
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.14;
  margin-bottom: 18px;
  text-wrap: initial;
}

.process-media--media-short .process-media__copy > .migration-copy {
  margin-top: 0;
}

.process-media--media-short .migration-eyebrow {
  color: #dde7e0;
}

/* Review summary — detailed header type scale */
.review-summary--detailed .review-summary__header .migration-title {
  font-size: clamp(24px, 3.2vw, 38px);
}

/* Process-media link rendered as a button (Aug 26 #12). */
.process-media__button {
  display: inline-block;
  align-self: flex-start;
  margin-top: 8px;
  padding: 16px 30px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f7f4ec !important;
  background: #214e34;
  border-radius: 999px;
  transition: background-color 0.2s ease;
}

.process-media__button:hover {
  background: #173824;
}

/* Coverage section over a yard photograph, with the badge beside the title so
   all three card titles share a baseline (v2 #14). Cards take an image each
   (Aug 26 #14). */
/* Aug 31 #36: the scrim was light enough that the Station photograph behind it
   still read as the subject, competing with the three cards it sits behind.
   Deepened so the photo carries depth and texture without asking to be looked
   at — the cards are what this section is for. */
.coverage-grid--has-media {
  background-image: linear-gradient(rgba(11, 28, 18, 0.88), rgba(11, 28, 18, 0.88)), var(--coverage-image);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.coverage-grid--has-media .migration-eyebrow,
.coverage-grid--has-media .migration-title,
.coverage-grid--has-media .coverage-grid__intro .migration-copy {
  color: #f7f4ec;
}

/* The container's scheme is a light one, so the shared rail dots would come
   out dark against this section's photographic scrim. */
.coverage-grid--has-media .migration-rail__dot {
  background: rgba(247, 244, 236, 0.4);
}

.coverage-grid--has-media .migration-rail__dot.is-active {
  background: #f7f4ec;
}

.coverage-grid__card-media {
  display: block;
  width: 100%;
  height: 140px;
  margin-bottom: 16px;
  /* contain, not cover — these are product shots, and cropping them lands on
     a random band of the Station rather than the product. */
  object-fit: contain;
  border-radius: 6px;
  background: rgba(247, 244, 236, 0.9);
}

.coverage-grid__card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.coverage-grid__card-head h3 {
  margin: 0;
}

.coverage-grid__chip {
  display: inline-block;
  padding: 4px 10px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #f7f4ec;
  background: #214e34;
  border-radius: 999px;
}

/* Mobile product rails (v2 #7, #29). Cards snap, the next one peeks, and each
   group gets its own labelled rail with dots. */
.product-card-grid__items--railed {
  display: block;
}

.product-card-grid__rail-group + .product-card-grid__rail-group {
  margin-top: 30px;
}

.product-card-grid__rail-heading {
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--color-text));
}

/* Sep 3: same trap as the PDP thumbnail strip — a scroller that is not a
   containing block does not clip absolutely positioned descendants, so any
   visually-hidden label or badge inside a card could sit past the viewport and
   widen the document. Fixed here before it bites; the card badges are already
   held by .product-card-grid__media, which is relative in its own right. */
.product-card-grid__rail {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82%;
  overflow-x: auto;
  gap: 14px;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.product-card-grid__rail::-webkit-scrollbar {
  display: none;
}

.product-card-grid__rail > * {
  scroll-snap-align: start;
}

.product-card-grid__dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
}

.product-card-grid__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  background: rgba(var(--color-text), 0.25);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.product-card-grid__dot.is-active {
  background: rgba(var(--color-text));
  transform: scale(1.25);
}

/* Hotspot CTA below the image (v2 #12, repositioned by Aug 26 #10). The offset
   is a setting so the horizontal placement can be tuned without code. */
.image-hotspots__cta-row {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

/* A percentage instead of 'center' pins the button that far from the left. */
.image-hotspots__cta-row--offset {
  justify-content: flex-start;
  padding-inline: var(--cta-offset, 60%) 0;
}

.image-hotspots__cta {
  white-space: nowrap;
}

/* Every closed marker breathes, and the CTA breathes with them on the same
   rhythm, staggered so they ripple rather than fire together (v2 #12). */
@keyframes bpn-hotspot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(33, 78, 52, 0.45); }
  50%      { box-shadow: 0 0 0 12px rgba(33, 78, 52, 0); }
}

.image-hotspots__marker[aria-expanded="false"] {
  animation: bpn-hotspot-pulse 2.4s ease-out infinite;
}

.image-hotspots__marker[aria-expanded="false"]:nth-of-type(2) { animation-delay: 0.8s; }
.image-hotspots__marker[aria-expanded="false"]:nth-of-type(3) { animation-delay: 1.6s; }

.image-hotspots__cta {
  animation: bpn-hotspot-pulse 2.4s ease-out infinite;
  animation-delay: 2.4s;
}

@media (prefers-reduced-motion: reduce) {
  .image-hotspots__marker,
  .image-hotspots__cta {
    animation: none;
  }
}

@media (max-width: 759px) {
  .image-hotspots__cta-row {
    padding-inline: 0;
  }

  .image-hotspots__cta {
    width: 100%;
  }
}

/* v2 #28: on a phone the "30 days" badge drops below the image instead of
   overlapping its corner. The desktop overlap is untouched. */
@media (max-width: 759px) {
  .process-media__media-wrap {
    display: flex;
    flex-direction: column;
  }

  .process-media__fact {
    position: static;
    max-width: none;
    margin-top: 14px;
    padding: 16px 18px;
    border-radius: 6px;
  }

  /* Aug 28 #16: at this width the badge is the tappable target — it reads as a
     button and carries the section's shop CTA. */
  .process-media__fact--link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 16px 18px 14px;
  }

  .process-media__fact--link .process-media__fact-label {
    margin-top: 0;
    flex: 1 1 auto;
  }

  .process-media__fact-cta {
    display: flex;
    align-items: center;
    width: 100%;
    padding-top: 12px;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-top: 1px solid rgba(var(--color-text), 0.25);
    gap: 8px;
  }

  .process-media__fact-cta svg {
    margin-left: auto;
  }

  /* Aug 28 #10: the swipe dots under the step media. */
  .process-media__media-dots {
    margin-top: 12px;
  }

  /* Sep 3 #53: on a phone the intro leads, the image follows, and the step
     sits under it. --media-first lifts the whole copy column above the image,
     and the eyebrow and title went up with it — they belong at the top of the
     section, not below the picture. display:contents lets the intro, the image
     and the step list take their own order without disturbing the markup the
     desktop two-column layout is built on. The row gap goes with it: these
     elements carry their own vertical rhythm and a 28px grid gap between an
     eyebrow and its own title is not it. */
  .process-media--expandable-steps .process-media__grid {
    row-gap: 0;
  }

  .process-media--expandable-steps .process-media__copy {
    display: contents;
  }

  .process-media--expandable-steps .process-media__copy > .migration-eyebrow {
    order: 1;
  }

  .process-media--expandable-steps .process-media__copy > .migration-title {
    order: 2;
  }

  .process-media--expandable-steps .process-media__copy > .migration-copy {
    order: 3;
  }

  /* Later in the file than the --media-first order it replaces, which is what
     settles it — the two selectors carry the same weight. */
  .process-media--expandable-steps .process-media__media-wrap {
    order: 4;
    margin-bottom: 22px;
  }

  .process-media--expandable-steps .process-media__items {
    order: 5;
  }

  .process-media--expandable-steps .process-media__copy > .process-media__link,
  .process-media--expandable-steps .process-media__copy > .process-media__button {
    order: 6;
  }

  /* Only the step you are on. The image is the control on this screen — a
     swipe moves through the steps and the dot row under it carries the count —
     so the other three rows were a second, quieter copy of a navigation that
     already exists, and they pushed the open step's own copy off the screen.
     The script keeps exactly one step open at all times, so this can never
     hide the list entirely. */
  .process-media--expandable-steps .process-media__step--expandable:not(.is-open) {
    display: none;
  }

  /* One row, always open: the glyph has nothing left to toggle and the rule
     under it has nothing left to separate. */
  .process-media--expandable-steps .process-media__step--expandable {
    border-bottom: 0;
  }

  .process-media--expandable-steps .process-media__step-glyph {
    display: none;
  }

  .process-media--expandable-steps .process-media__step-toggle {
    padding-block: 0 4px;
    grid-template-columns: 34px 1fr;
    cursor: default;
  }
}

/* Media slider on the evidence band (Aug 26 #13). Slides stack in one cell and
   crossfade; the arrows sit in the bottom-right corner of the image. */
.process-media__slider {
  position: relative;
}

.process-media__slides {
  display: grid;
}

.process-media__slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.process-media__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.process-media__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.process-media__slide figcaption {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(var(--color-light-text));
}

.process-media__slider-nav {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  gap: 8px;
}

.process-media__slider-arrow {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  cursor: pointer;
  color: #173824;
  background: rgba(247, 244, 236, 0.92);
  border: 0;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.process-media__slider-arrow:hover {
  background: #f7f4ec;
}

@media (prefers-reduced-motion: reduce) {
  .process-media__slide {
    transition: none;
  }
}

/* Cart drawer discounts (Aug 26 #7). Amount off on its own line above the
   subtotal, with the discount's name as a chip beneath. */
.migration-cart-footer__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  font-weight: 600;
}

.migration-cart-footer__row--discount {
  margin-bottom: 6px;
  color: #7a1c22;
}

.migration-cart-footer__discount-names {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.migration-cart-footer__discount-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #214e34;
  background: rgba(33, 78, 52, 0.09);
  border-radius: 999px;
}

.migration-cart-footer__discount-chip em {
  font-style: normal;
  font-weight: 600;
  color: #7a1c22;
}

/* Reward meter checkpoints (v2 #34). One marker per configured checkpoint, the
   bar scaled to the furthest one. */
.migration-cart-progress__track,
.cart-workspace__shipping-track {
  position: relative;
}

/* Aug 31: a staged track carries pucks taller than itself, and both surfaces
   clip their overflow to keep the fill's rounded ends — which squashed the
   markers to 4x7. The clip goes only where stages exist; the single-checkpoint
   bar keeps it. Declared here so the cart page gets it too: the drawer's own
   stylesheet only knows about its own track. */
.migration-cart-progress__track.has-stages,
.cart-workspace__shipping-track.has-stages {
  overflow: visible;
}

.migration-cart-progress__track.has-stages > [data-cart-shipping-fill],
.cart-workspace__shipping-track.has-stages > [data-cart-shipping-fill] {
  border-radius: 999px;
}

.migration-cart-progress__marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Aug 31: these are the checkpoints, so they have to be legible as pucks on the
   bar. Two things were stopping that. The fill came from
   rgba(var(--color-background)), which under the cart's scheme resolves to the
   same green as the bar itself — an invisible dot on top of the thing it marks.
   And both tracks clip their overflow, which squashed a 10px dot into the 6px
   track: it measured 4x7. Fixed colours here rather than scheme variables,
   because this pair has to hold against both the empty track and the filled
   bar, and a scheme is free to make those the same colour. */
.migration-cart-progress__mark {
  position: absolute;
  top: 50%;
  z-index: 1;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  background: #f7f4ec;
  border: 2px solid #214e34;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(247, 244, 236, 0.9);
  transform: translate(-50%, -50%);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Reached: filled, and ringed in cream so it still separates from the bar it
   is now sitting on top of. */
.migration-cart-progress__mark.is-reached {
  background: #214e34;
  border-color: #f7f4ec;
}

/* The last checkpoint sits at 100%, so half of it would hang past the track. */
.migration-cart-progress__mark:last-child {
  transform: translate(-100%, -50%);
}

.migration-cart-progress__mark:first-child:not(:last-child) {
  transform: translate(-50%, -50%);
}

/* One checkpoint: the label can hang under its dot without colliding. Once the
   dots divide the track into stages they sit at 50% and 100%, where hanging
   labels overlap and the last runs off the end — the legend row below takes
   over there. */
:not(.has-stages) > .migration-cart-progress__marks .migration-cart-progress__mark::after {
  content: attr(data-label);
  position: absolute;
  top: 14px;
  left: 50%;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--color-light-text, 92 107 96));
  transform: translateX(-50%);
}

/* Aug 31: stage names, one cell per stage, aligned to the end of the stage
   each one names — the same reading order as the dots, with no way to
   collide. */
.migration-cart-progress__legend {
  display: flex;
  margin-top: 8px;
  gap: 8px;
}

.migration-cart-progress__legend-item {
  flex: 1 1 0;
  min-width: 0;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-align: right;
  text-transform: uppercase;
  color: rgba(var(--color-light-text, 92 107 96));
  transition: color 0.25s ease;
}

.migration-cart-progress__legend-item.is-reached {
  color: #214e34;
}

/* Expandable setup steps (v2 #22). */
.process-media__step--expandable {
  display: block;
  border-bottom: 1px solid rgba(var(--color-text), 0.16);
}

.process-media__step-toggle {
  display: grid;
  width: 100%;
  padding: 16px 2px;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
}

.process-media__step--expandable .process-media__step-number {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 15px;
  color: rgba(var(--color-light-text));
}

.process-media__step--expandable .process-media__step-title {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
}

.process-media__step-glyph {
  font-size: 20px;
  line-height: 1;
  color: rgba(var(--color-light-text));
}

.process-media__step--expandable .process-media__step-copy {
  padding: 0 2px 18px 46px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(var(--color-light-text));
}

.process-media__step-counter {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #173824;
  background: rgba(247, 244, 236, 0.92);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* Belt and braces for empty chips: these elements carry their own padding and
   background, so an empty one renders as a coloured blob on the card. */
.product-card-grid__badge:empty,
.coverage-grid__chip:empty,
.product-purchase__coverage-tag:empty,
.product-purchase__pack-tag:empty {
  display: none;
}

/* v2 #10: the highlighted card carries a heavier border and a lift, matching
   the prototype's 2px #214E34 and its soft shadow. */
.product-card-grid__card--featured {
  border: 2px solid #214e34;
  box-shadow: 0 10px 30px rgba(23, 56, 36, 0.1);
}

/* ---------------------------------------------------------------------------
   Shared mobile rail (Aug 28 #4, #8, #9, #10, #15)

   Five sections were each asked to become a slider on a phone. Rather than a
   bespoke rail per section, a track opts in with data-migration-rail and gets
   the same snap-and-peek scroller plus the dot row the JS appends after it.
   Sections tune the slide width and gap through --rail-slide and --rail-gap.

   The attribute is repeated three times on purpose. Sections that ship their
   own stylesheet have it injected after this one, so on a specificity tie they
   win on source order — and media queries add no specificity. Two attribute
   selectors are only (0,2,0), which ties with a two-class selector like
   `.text-columns-with-image-section--tips .…__card-group`; that rule sets
   grid-auto-flow:row and quietly kept the tips cards stacked. Three puts the
   rail above it without an !important on every declaration.
   ------------------------------------------------------------------------ */
.migration-rail__dots {
  display: none;
  justify-content: center;
  gap: 7px;
  margin-top: 16px;
}

.migration-rail__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  background: rgba(var(--color-text), 0.25);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.migration-rail__dot.is-active {
  background: rgba(var(--color-text));
  transform: scale(1.25);
}

@media (max-width: 759px) {
  [data-migration-rail][data-migration-rail][data-migration-rail] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--rail-slide, 82%);
    grid-template-columns: none;
    grid-template-rows: none;
    gap: var(--rail-gap, 14px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  [data-migration-rail][data-migration-rail][data-migration-rail]::-webkit-scrollbar {
    display: none;
  }

  [data-migration-rail][data-migration-rail][data-migration-rail] > * {
    scroll-snap-align: start;
    min-width: 0;
  }

  .migration-rail__dots {
    display: flex;
  }
}

/* Policy pages (Shipping, Refund, Privacy, Terms). Sep 3: these were the stock
   template and had none of the design system on them — full-width text at the
   default size, no measure, no type. The header and footer were right, so the
   pages looked like the middle had been left out.

   This is the article reading treatment rather than anything policy-specific:
   one measure, the serif for headings, the body face for text. A legal page is
   the one people actually have to read carefully. */
.policy-page {
  padding-block: clamp(40px, 6vw, 80px);
  background: rgb(var(--color-background));
}

.policy-page__inner {
  max-width: 720px;
}

.policy-page__title,
.policy-page__prose h1 {
  margin: 0 0 10px;
  color: #173824;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
}

/* The body almost always opens with its own heading, and it is usually the
   better wording — the store names one policy "Refund Policy" while its text
   says "Returns and Refund Policy". Where it does, the template's fallback
   heading steps aside rather than printing the title twice. */
.policy-page__inner:has(.policy-page__prose > h1:first-child) .policy-page__title {
  display: none;
}

.policy-page__prose {
  font-family: Montserrat, Arial, sans-serif;
  color: #3d4c42;
  /* Same reasoning as the article body: a policy can name a URL, and an
     unbreakable one would widen the page rather than wrap. */
  overflow-wrap: break-word;
}

.policy-page__prose a {
  overflow-wrap: anywhere;
}

.policy-page__prose > :first-child {
  margin-top: 0;
}

.policy-page__prose p,
.policy-page__prose li {
  font-size: 16px;
  line-height: 1.85;
}

.policy-page__prose p {
  margin: 0 0 18px;
}

.policy-page__prose h2 {
  margin: 38px 0 12px;
  color: #173824;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

.policy-page__prose h3 {
  margin: 26px 0 10px;
  color: #173824;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.policy-page__prose ul,
.policy-page__prose ol {
  margin: 0 0 18px;
  padding-left: 22px;
}

.policy-page__prose li {
  margin-bottom: 8px;
}

.policy-page__prose strong {
  color: #173824;
  font-weight: 700;
}

.policy-page__prose a {
  color: #214e34;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The date line these open with is metadata, not part of the argument, so it
   reads quieter and is separated from the text that follows. */
.policy-page__prose > h1:first-child + p:has(strong:only-child) {
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(33, 78, 52, 0.16);
  color: #5c6b60;
  font-size: 13.5px;
}

.policy-page__prose > h1:first-child + p:has(strong:only-child) strong {
  color: #5c6b60;
  font-weight: 600;
}

@media (max-width: 759px) {
  .policy-page__prose p,
  .policy-page__prose li {
    font-size: 15.5px;
    line-height: 1.8;
  }
}