/* =========================================================
   ASSURION LABS (wellness edition) — Front page + category landings
   Owner: B4 home-landings. Namespace: home-
   Design language: "Still Water" — dark surfaces, one cyan accent, concentric ripple rings,
   a soft cyan bloom, faint contour lines. Tokens only (var(--x)); no hard-coded hex.
   Backgrounds come from assets/images/backgrounds/*.svg via custom properties set in PHP
   (--home-ripples-img, --home-bloom-img, --home-contours-img, --home-grain-img) and the data-bg
   attribute on the page wrapper; every one has a CSS-only fallback below.
   Breakpoints: 1100 / 900 / 768 / 640 / 480. No horizontal scroll at 375px.
   ========================================================= */

/* ─────────────────────────────────────────
   LOCAL TOKENS (derived from the design tokens)
   ───────────────────────────────────────── */
:root {
  --home-ease:   cubic-bezier(.2, 0, 0, 1);
  --home-ring:   color-mix(in srgb, var(--cyan) 28%, transparent);
  --home-ring-2: color-mix(in srgb, var(--cyan) 15%, transparent);
  --home-ring-3: color-mix(in srgb, var(--cyan) 8%, transparent);
  --home-bloom:  color-mix(in srgb, var(--cyan) 17%, transparent);
  --home-line:   color-mix(in srgb, var(--cyan) 9%, transparent);
  --home-veil:   color-mix(in srgb, var(--bg) 80%, transparent);
  --home-scrim:  color-mix(in srgb, var(--bg) 92%, transparent);
  --home-glass:  color-mix(in srgb, var(--bg-2) 68%, transparent);
  --home-hair:   color-mix(in srgb, var(--white) 10%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --home-ring:   var(--border-cyan);
    --home-ring-2: var(--cyan-dim);
    --home-ring-3: var(--cyan-dim);
    --home-bloom:  var(--cyan-glow-sm);
    --home-line:   var(--cyan-dim);
    --home-veil:   var(--bg);
    --home-scrim:  var(--bg);
    --home-glass:  var(--bg-2);
    --home-hair:   var(--border);
  }
}

/* ─────────────────────────────────────────
   SCOPE + SHARED
   ───────────────────────────────────────── */
.home-page,
.al-landing {
  position: relative;
  overflow-x: clip;
  background: var(--bg);
}
.home-page:focus,
.al-landing:focus { outline: none; }

.home-page .section-header,
.al-landing .section-header { margin-bottom: clamp(28px, 4vw, 48px); }
.home-page .section-title,
.al-landing .section-title { text-wrap: balance; }
.home-page .section-sub,
.al-landing .section-sub { text-wrap: pretty; }

.home-page .screen-reader-text,
.al-landing .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.home-page a:focus-visible,
.al-landing a:focus-visible,
.home-rail:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* press feedback on buttons only */
.home-page .btn:active,
.al-landing .btn:active { transform: scale(.96); }

.home-section {
  position: relative;
  padding-block: clamp(56px, 7vw, 96px);
}
.home-section--band {
  background: var(--bg-2);
  border-block: 1px solid var(--border);
}
/* surfaces inside a band step up one level so cards stay readable */
.home-section--band .home-guide,
.home-section--band .home-path,
.home-section--band .home-empty,
.home-section--band .home-ing { background: var(--bg-3); }

/* faint contour lines behind a section (CSS fallback, replaced by contours.svg when the file exists) */
.home-contours { isolation: isolate; }
.home-contours::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-radial-gradient(ellipse 95% 75% at 8% -12%, transparent 0 44px, var(--home-line) 44px 45px);
  -webkit-mask-image: linear-gradient(180deg, var(--white), transparent 78%);
  mask-image: linear-gradient(180deg, var(--white), transparent 78%);
  opacity: .8;
}
[data-bg~="contours"] .home-contours::before {
  background-image: var(--home-contours-img);
  background-size: cover;
  background-position: center;
  -webkit-mask-image: none;
  mask-image: none;
  opacity: .5;
}

/* fine grain over hero surfaces (only when grain.png exists) */
[data-bg~="grain"] .home-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--home-grain-img);
  background-size: 256px 256px;
  mix-blend-mode: overlay;
  opacity: .06;
}

.home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan);
}
.home-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}

.home-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 4vw, 44px);
}

/* text link with arrow (>= 40px tall hit area) */
.home-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan);
  text-decoration: none;
  transition: color .2s ease;
}
.home-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform .25s var(--home-ease);
}
.home-link:hover { color: var(--white); }
.home-link:hover svg { transform: translateX(3px); }

/* honest stat chips (hero + landing heroes) */
.home-stats {
  list-style: none;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  max-width: 100%;
  overflow: hidden;
  background: var(--home-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.home-stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  padding: 14px 22px;
}
.home-stat + .home-stat { border-left: 1px solid var(--border); }
.home-stat__label {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
}
.home-stat__value {
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

/* empty states (before the catalog exists) */
.home-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 640px;
  margin-inline: auto;
  padding: clamp(32px, 5vw, 56px) 24px;
  text-align: center;
  background: var(--bg-2);
  border: 1px dashed var(--border-cyan);
  border-radius: var(--r-xl);
}
.home-empty__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  color: var(--cyan);
  border: 1px solid var(--home-ring);
  border-radius: 50%;
  box-shadow: 0 0 0 7px var(--home-ring-3);
}
.home-empty__icon svg { width: 24px; height: 24px; }
.home-empty__title {
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 600;
  color: var(--white);
  text-wrap: balance;
}
.home-empty__text { max-width: 46ch; color: var(--text-2); text-wrap: pretty; }
.home-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.home-empty__admin { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--text-3); margin-top: 8px; }

.home-fallback-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 22px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.home-fallback-card__name { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.home-fallback-card__name a { color: var(--white); }
.home-fallback-card__price { font-family: var(--font-mono); color: var(--cyan); font-variant-numeric: tabular-nums; }
.home-fallback-card__save { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--success); }

/* ─────────────────────────────────────────
   RIPPLES + DROPS (hero stage and landing hero)
   ───────────────────────────────────────── */
.home-ripple {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--home-ring);
  pointer-events: none;
}
.home-ripple--s1 { inset: 3%; }
.home-ripple--s2 { inset: -7%; border-color: var(--home-ring-2); }
.home-ripple--s3 { inset: -20%; border-color: var(--home-ring-3); }
.home-ripple--pulse {
  inset: 10%;
  opacity: 0;
  animation: home-pulse 9s var(--home-ease) infinite;
}
.home-ripple--p2 { animation-delay: 3s; }
.home-ripple--p3 { animation-delay: 6s; }

.home-drop {
  position: absolute;
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
  animation: home-float 9s ease-in-out infinite;
}
.home-drop__disc {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  background: var(--bg-2);
  /* concentric halos = ripples radiating from the pebble */
  box-shadow:
    0 0 0 1px var(--home-ring),
    0 0 0 10px var(--home-ring-3),
    0 0 0 11px var(--home-ring-2),
    0 0 0 26px var(--home-ring-3),
    var(--shadow-lg);
  transition: box-shadow .5s var(--home-ease);
}
.home-drop__disc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  outline: 1px solid var(--home-hair);
  outline-offset: -1px;
  transition: transform .6s var(--home-ease);
}
.home-drop:hover .home-drop__disc {
  box-shadow:
    0 0 0 1px var(--border-cyan),
    0 0 0 14px var(--home-ring-3),
    0 0 0 15px var(--home-ring-2),
    0 0 0 34px var(--home-ring-3),
    var(--shadow-lg);
}
.home-drop:hover .home-drop__disc img { transform: scale(1.05); }
.home-drop__cap {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  padding: 7px 14px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--home-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-cyan);
  border-radius: var(--r-sm);
}

/* ─────────────────────────────────────────
   HOME HERO
   ───────────────────────────────────────── */
.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.home-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.home-hero__bg > span { position: absolute; inset: 0; }

.home-hero__photo { display: none; }
.home-hero.has-photo .home-hero__photo {
  display: block;
  background: var(--home-hero-photo) 70% 40% / cover no-repeat;
  opacity: .78;
}
/* ripples: CSS rings by default, ripples.svg when the file exists */
.home-hero__ripples {
  background: repeating-radial-gradient(circle at 74% 46%, transparent 0 60px, var(--home-ring-3) 60px 61px);
  -webkit-mask-image: radial-gradient(ellipse 60% 78% at 74% 46%, var(--white), transparent 78%);
  mask-image: radial-gradient(ellipse 60% 78% at 74% 46%, var(--white), transparent 78%);
}
[data-bg~="ripples"] .home-hero__ripples {
  background: var(--home-ripples-img) center / cover no-repeat;
  -webkit-mask-image: none;
  mask-image: none;
  opacity: .9;
}
/* bloom: CSS radial glow by default, bloom.svg when the file exists */
.home-hero__bloom {
  background: radial-gradient(ellipse 55% 70% at 74% 46%, var(--home-bloom), transparent 72%);
}
[data-bg~="bloom"] .home-hero__bloom {
  background: var(--home-bloom-img) center / cover no-repeat;
  opacity: .85;
}
/* dark gradient overlay: keeps the copy legible over the photo and blends the hero into the page */
.home-hero__veil {
  background:
    linear-gradient(180deg, transparent 62%, var(--bg) 100%),
    linear-gradient(90deg, var(--bg) 0%, var(--home-veil) 36%, transparent 92%);
}

.home-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  min-height: 560px;
  min-height: clamp(540px, 78svh, 780px);
  padding-block: clamp(44px, 7vw, 92px);
}
.home-hero__copy { min-width: 0; }
.home-hero__eyebrow { margin-bottom: 20px; }
.home-hero__title {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(32px, 4.6vw, 60px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--white);
  text-wrap: balance;
}
.home-hero__accent { color: var(--cyan); }
.home-hero__sub {
  max-width: 46ch;
  margin-bottom: 32px;
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}
.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(28px, 4vw, 44px);
}

/* staged entrance: title stays put (LCP), everything else rises in sequence */
.home-hero__eyebrow,
.home-hero__sub,
.home-hero__actions,
.home-hero__stats { animation: home-rise .7s var(--home-ease) both; }
.home-hero__eyebrow { animation-delay: .04s; }
.home-hero__sub     { animation-delay: .12s; }
.home-hero__actions { animation-delay: .2s; }
.home-hero__stats   { animation-delay: .3s; }

/* stage */
.home-hero__stage {
  position: relative;
  isolation: isolate;
  width: min(100%, 560px);
  aspect-ratio: 1;
  margin-inline: auto;
  animation: home-fade 1.1s var(--home-ease) .12s both;
}
.home-hero__stage::before {
  content: '';
  position: absolute;
  inset: -14%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--home-bloom), transparent);
  pointer-events: none;
}
.home-hero__stage .home-drop--main  { z-index: 1; width: 62%; left: 30%; top: 17%; animation-duration: 10s; }
.home-hero__stage .home-drop--left  { z-index: 2; width: 35%; left: 5%;  top: 55%; animation-duration: 8s;  animation-delay: -3s; }
.home-hero__stage .home-drop--right { z-index: 2; width: 29%; right: 3%; top: 3%;  animation-duration: 11s; animation-delay: -6s; }
.home-hero__stage-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--cyan);
  opacity: .7;
}
.home-hero__stage-icon svg { width: 56px; height: 56px; }

/* ─────────────────────────────────────────
   CATEGORY / LANDING TILES
   ───────────────────────────────────────── */
.home-tiles { list-style: none; margin: 0; padding: 0; --tile-gap: 16px; }
.home-tiles__item { display: flex; min-width: 0; }
.home-tiles__item > .home-tile { flex: 1 1 auto; min-width: 0; }

/* uniform grid: N columns, last row centered */
.home-tiles--grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tile-gap);
}
.home-tiles--grid .home-tiles__item { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--tile-gap)) / var(--cols)); }
.home-tiles--cols-3 { --cols: 3; }
.home-tiles--cols-4 { --cols: 4; }
.home-tiles--cols-5 { --cols: 5; }

/* bento (front page): two feature tiles on top, six regular tiles below */
.home-tiles--bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--tile-gap);
}
.home-tiles--bento .home-tiles__item { grid-column: span 2; }
.home-tiles--bento .home-tiles__item--feature { grid-column: span 3; }
.home-tiles--bento .home-tiles__item--feature .home-tile { aspect-ratio: 2 / 1; }
.home-tiles--bento .home-tile { aspect-ratio: 3 / 2; }
/* feature tiles: keep the label in the dark half so it never runs over the packaging */
.home-tiles__item--feature .home-tile__body { max-width: 44%; }

.home-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color .25s var(--home-ease), box-shadow .25s var(--home-ease), transform .25s var(--home-ease);
}
.home-tile__media { position: absolute; inset: 0; overflow: hidden; }
.home-tile__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 80%; /* products sit in the lower two thirds of the category art: crop the empty top, not the bottom */
  outline: 1px solid var(--home-hair);
  outline-offset: -1px;
  transition: transform .6s var(--home-ease);
}
.home-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 38%, var(--home-scrim) 100%);
  background: linear-gradient(180deg, transparent 46%, color-mix(in srgb, var(--bg) 42%, transparent) 76%, var(--home-scrim) 100%);
}
.home-tile__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-bottom: 14%;
  background:
    radial-gradient(70% 70% at 50% 38%, var(--home-bloom), transparent 72%),
    repeating-radial-gradient(circle at 50% 38%, transparent 0 34px, var(--home-ring-3) 34px 35px),
    var(--bg-3);
}
.home-tile__ph svg { width: 40px; height: 40px; color: var(--cyan); opacity: .75; }

.home-tile__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px 16px;
}
.home-tile__name {
  font-family: var(--font-display);
  font-size: clamp(12px, 1.15vw, 14px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .02em;
  text-wrap: balance;
}
.home-tiles__item--feature .home-tile__name { font-size: clamp(15px, 1.7vw, 20px); }
.home-tile__desc { font-size: 15px; line-height: 1.4; color: var(--text-2); }
.home-tile__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.home-tile__arrow {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--cyan);
  background: var(--home-glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-cyan);
  border-radius: var(--r-sm);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .25s var(--home-ease), transform .25s var(--home-ease);
}
.home-tile__arrow svg { width: 16px; height: 16px; }
.home-tile:focus-visible .home-tile__arrow { opacity: 1; transform: none; }
@media (hover: hover) {
  .home-tile:hover {
    border-color: var(--border-cyan);
    box-shadow: 0 0 30px var(--cyan-dim), var(--shadow-card);
    transform: translateY(-3px);
  }
  .home-tile:hover .home-tile__media img { transform: scale(1.05); }
  .home-tile:hover .home-tile__arrow { opacity: 1; transform: none; }
}
@media (hover: none) {
  .home-tile__arrow { opacity: 1; transform: none; }
}

/* a square product packshot used as a tile: shown whole and faded into the tile so it sits beside the category collages */
.home-tile__media--product { background: var(--bg); }
.home-tile__media--product img {
  object-fit: contain;
  -webkit-mask-image: radial-gradient(closest-side, var(--white) 70%, transparent 100%);
  mask-image: radial-gradient(closest-side, var(--white) 70%, transparent 100%);
  outline: 0;
}

/* grid variant (landings): image on top, caption underneath, so dense category lists stay legible */
.home-tiles--grid .home-tile { display: flex; flex-direction: column; aspect-ratio: auto; }
.home-tiles--grid .home-tile::after { display: none; }
.home-tiles--grid .home-tile__media { position: relative; inset: auto; flex: none; aspect-ratio: 4 / 3; background: var(--bg-3); }
.home-tiles--grid .home-tile__media--product { background: var(--bg); }
.home-tiles--grid .home-tile__media img { object-position: 50% 50%; }
.home-tiles--grid .home-tile__body {
  position: static;
  flex: 1;
  padding: 13px 44px 15px 16px;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
}
.home-tiles--grid .home-tile__arrow {
  top: auto;
  right: 14px;
  bottom: 15px;
  width: auto;
  height: auto;
  background: none;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: .75;
  transform: none;
}
@media (hover: hover) {
  .home-tiles--grid .home-tile:hover .home-tile__arrow { opacity: 1; transform: translateX(3px); }
}

/* ─────────────────────────────────────────
   SHOP BY CONCERN
   ───────────────────────────────────────── */
.home-concerns__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
}
.home-concerns__item { min-width: 0; }
/* Seven cards (skin care only): the last row of three is centred instead of leaving a gap at the end. Two classes so the 1000-1099px
   rule further down (four columns) cannot undo it. Below 1000px the grid is two columns and this does not apply. */
@media (min-width: 1000px) {
  .home-concerns__grid.home-concerns__grid--n7 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .home-concerns__grid--n7 > .home-concerns__item { grid-column: span 2; }
  .home-concerns__grid--n7 > .home-concerns__item:nth-child(5) { grid-column: 2 / span 2; }
}
.home-concern {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 22px;
  color: var(--text);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color .25s var(--home-ease), background-color .25s var(--home-ease), transform .25s var(--home-ease);
}
.home-concern__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.home-concern__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--cyan);
  background: var(--cyan-dim);
  border: 1px solid var(--border-cyan);
  border-radius: var(--r-md);
}
.home-concern__icon svg { width: 22px; height: 22px; }
.home-concern__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.home-concern__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .02em;
  color: var(--white);
  text-wrap: balance;
}
.home-concern__desc { font-size: 15px; line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.home-concern__go {
  display: inline-flex;
  margin-top: auto;
  padding-top: 8px;
  color: var(--cyan);
  transition: transform .25s var(--home-ease);
}
.home-concern__go svg { width: 18px; height: 18px; }
@media (hover: hover) {
  .home-concern:hover { border-color: var(--border-cyan); background-color: var(--bg-4); transform: translateY(-3px); }
  .home-concern:hover .home-concern__go { transform: translateX(4px); }
}

/* ─────────────────────────────────────────
   BEST SELLERS RAIL (grid on desktop, snap-scroll rail below 1000px)
   ───────────────────────────────────────── */
.home-rail {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
}
.home-rail__item { display: flex; min-width: 0; }
.home-rail__item > * { flex: 1 1 auto; min-width: 0; }

/* ─────────────────────────────────────────
   "NOT SURE WHERE TO START?" CALLOUT
   ───────────────────────────────────────── */
.home-callout {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 5vw, 64px);
  background: var(--bg-2);
  border: 1px solid var(--border-cyan);
  border-radius: var(--r-xl);
}
.home-callout__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.home-callout__bg > span { position: absolute; inset: 0; }
.home-callout__photo { display: none; }
.home-callout.has-photo .home-callout__photo {
  display: block;
  background: var(--home-callout-photo) center / cover no-repeat;
  opacity: .42;
}
.home-callout__ripples {
  background: repeating-radial-gradient(circle at 82% 50%, transparent 0 48px, var(--home-ring-3) 48px 49px);
  -webkit-mask-image: radial-gradient(ellipse 55% 90% at 82% 50%, var(--white), transparent 78%);
  mask-image: radial-gradient(ellipse 55% 90% at 82% 50%, var(--white), transparent 78%);
}
[data-bg~="ripples"] .home-callout__ripples {
  background: var(--home-ripples-img) 70% center / cover no-repeat;
  -webkit-mask-image: none;
  mask-image: none;
  opacity: .8;
}
.home-callout__veil {
  background:
    radial-gradient(ellipse 50% 80% at 82% 50%, var(--home-bloom), transparent 70%),
    linear-gradient(90deg, var(--bg-2) 0%, var(--home-veil) 52%, transparent 100%);
}
.home-callout__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}
.home-callout__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
.home-callout__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.6vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--white);
  text-wrap: balance;
}
.home-callout__text { max-width: 44ch; font-size: clamp(17px, 1.6vw, 19px); color: var(--text-2); text-wrap: pretty; }
.home-callout__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 6px; }
.home-callout__note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
}

.home-steps {
  min-width: 0;
  padding: 18px;
  background: var(--home-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-cyan);
  border-radius: var(--r-lg);
}
.home-steps__title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-2);
}
.home-steps__list { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.home-steps__item {
  display: grid;
  grid-template-columns: 24px 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.home-steps__item.is-optional { background: transparent; border-style: dashed; border-color: var(--border-cyan); }
.home-steps__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--cyan); font-variant-numeric: tabular-nums; }
.home-steps__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--cyan);
  background: var(--cyan-dim);
  border-radius: var(--r-xs);
}
.home-steps__icon svg { width: 20px; height: 20px; }
.home-steps__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.home-steps__text strong { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--white); }
.home-steps__text span { font-size: 14px; color: var(--text-2); }

/* ─────────────────────────────────────────
   BUNDLES
   ───────────────────────────────────────── */
.home-bundles__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
}
.home-bundles__item { display: flex; min-width: 0; }
.home-bundles__item > * { flex: 1 1 auto; min-width: 0; }

/* ─────────────────────────────────────────
   INGREDIENT EDUCATION
   ───────────────────────────────────────── */
.home-ingredients__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
}
.home-ingredients__item { min-width: 0; }
.home-ing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 26px 24px 20px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color .25s var(--home-ease), transform .25s var(--home-ease);
}
/* ripple rings drifting in the corner */
.home-ing::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -70px;
  right: -70px;
  width: 240px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 22px, var(--home-ring-2) 22px 23px);
  -webkit-mask-image: radial-gradient(closest-side, var(--white), transparent);
  mask-image: radial-gradient(closest-side, var(--white), transparent);
  transition: transform .7s var(--home-ease);
}
.home-ing__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 0 6px 6px;
  color: var(--cyan);
  border: 1px solid var(--home-ring);
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--home-ring-3);
}
.home-ing__icon svg { width: 22px; height: 22px; }
.home-ing__title { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: .02em; line-height: 1.25; color: var(--white); }
.home-ing__title a { color: inherit; text-decoration: none; }
.home-ing__guide::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.home-ing__text { font-size: 16px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.home-ing__links { display: flex; flex-direction: column; margin: auto 0 0; padding-top: 8px; }
.home-ing__links .home-link--shop { position: relative; z-index: 2; align-self: flex-start; }
@media (hover: hover) {
  .home-ing:hover { border-color: var(--border-cyan); transform: translateY(-3px); }
  .home-ing:hover::before { transform: scale(1.14); }
  .home-ing:hover .home-link--guide svg { transform: translateX(3px); }
}

/* ─────────────────────────────────────────
   WHY CHOOSE (trust)
   ───────────────────────────────────────── */
.home-trust__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
}
.home-trust__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 4px clamp(18px, 2.4vw, 32px);
}
.home-trust__item:first-child { padding-left: 0; }
.home-trust__item:last-child { padding-right: 0; }
.home-trust__item + .home-trust__item { border-left: 1px solid var(--border); }
.home-trust__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 7px 7px 10px;
  color: var(--cyan);
  border: 1px solid var(--home-ring);
  border-radius: 50%;
  box-shadow: 0 0 0 7px var(--home-ring-3);
}
.home-trust__icon svg { width: 22px; height: 22px; }
.home-trust__title { font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: .03em; line-height: 1.3; color: var(--white); text-wrap: balance; }
.home-trust__text { font-size: 16px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.home-trust__item .home-link { margin-top: auto; }

/* ─────────────────────────────────────────
   REVIEWS (empty state only; never invented reviews)
   ───────────────────────────────────────── */
.home-reviews__empty { display: grid; gap: 32px; }
.home-reviews__slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.home-review-slot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--bg-2);
  background: color-mix(in srgb, var(--bg-2) 60%, transparent);
  border: 1px dashed var(--border-cyan);
  border-radius: var(--r-lg);
}
.home-review-slot__stars { display: flex; gap: 4px; color: var(--text-3); opacity: .6; }
.home-review-slot__stars svg { width: 18px; height: 18px; }
.home-review-slot__line { display: block; height: 10px; background: var(--home-hair); border-radius: var(--r-xs); }
.home-review-slot__line--short { width: 55%; }
.home-reviews__message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
}
.home-reviews__title { font-family: var(--font-display); font-size: clamp(17px, 2vw, 21px); font-weight: 600; color: var(--white); }
.home-reviews__text { color: var(--text-2); text-wrap: pretty; margin-bottom: 8px; }

/* ─────────────────────────────────────────
   SIGNUP + PAGE CONTENT
   ───────────────────────────────────────── */
.home-signup__frame { position: relative; max-width: 1000px; margin-inline: auto; }

.home-editor__content { max-width: 860px; margin-inline: auto; color: var(--text-2); }
.home-editor__content > * + * { margin-top: 1.1em; }
.home-editor__content h2,
.home-editor__content h3,
.home-editor__content h4 { font-family: var(--font-display); color: var(--white); line-height: 1.2; text-wrap: balance; margin-top: 1.6em; }
.home-editor__content h2 { font-size: clamp(22px, 2.6vw, 30px); }
.home-editor__content h3 { font-size: clamp(18px, 2vw, 22px); }
.home-editor__content p { text-wrap: pretty; }
.home-editor__content a { text-decoration: underline; text-underline-offset: 3px; }
.home-editor__content ul,
.home-editor__content ol { padding-left: 1.3em; }
.home-editor__content ul { list-style: disc; }
.home-editor__content ol { list-style: decimal; }
.home-editor__content img { border-radius: var(--r-lg); outline: 1px solid var(--home-hair); outline-offset: -1px; height: auto; }
.home-editor__content .alignwide { max-width: 1100px; margin-inline: auto; }

/* ─────────────────────────────────────────
   LANDING HERO (photo or product-render)
   ───────────────────────────────────────── */
.home-photo-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.home-photo-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.home-photo-hero__bg > span { position: absolute; inset: 0; }
.home-photo-hero__photo { display: none; }
.home-photo-hero.has-photo .home-photo-hero__photo {
  display: block;
  background: var(--home-hero-photo) center / cover no-repeat;
  opacity: .62;
}
.home-photo-hero__ripples {
  background: repeating-radial-gradient(circle at 78% 50%, transparent 0 56px, var(--home-ring-3) 56px 57px);
  -webkit-mask-image: radial-gradient(ellipse 55% 90% at 78% 50%, var(--white), transparent 78%);
  mask-image: radial-gradient(ellipse 55% 90% at 78% 50%, var(--white), transparent 78%);
}
[data-bg~="ripples"] .home-photo-hero__ripples {
  background: var(--home-ripples-img) 70% center / cover no-repeat;
  -webkit-mask-image: none;
  mask-image: none;
  opacity: .8;
}
.home-photo-hero__bloom { background: radial-gradient(ellipse 50% 80% at 78% 50%, var(--home-bloom), transparent 72%); }
[data-bg~="bloom"] .home-photo-hero__bloom { background: var(--home-bloom-img) center / cover no-repeat; opacity: .7; }
.home-photo-hero__veil {
  background:
    linear-gradient(180deg, transparent 70%, var(--bg-2) 100%),
    linear-gradient(90deg, var(--bg-2) 0%, var(--home-veil) 48%, transparent 100%);
}
.home-photo-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 40px;
  min-height: clamp(360px, 40vw, 500px);
  padding-block: clamp(36px, 6vw, 72px);
}
.home-photo-hero.has-drop .home-photo-hero__grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
}
.home-photo-hero__copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 680px; }
.home-photo-hero__copy .breadcrumb { margin-bottom: 22px; flex-wrap: wrap; }
.home-photo-hero__copy .home-eyebrow { margin-bottom: 16px; }
.home-photo-hero__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--white);
  text-wrap: balance;
}
.home-photo-hero__intro { max-width: 56ch; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.65; color: var(--text-2); text-wrap: pretty; }
.home-photo-hero__intro p { margin: 0; max-width: none; font-size: inherit; color: inherit; }
.home-photo-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.home-photo-hero__stats { margin-top: 28px; }
.home-photo-hero__stage {
  position: relative;
  isolation: isolate;
  width: min(100%, 420px);
  aspect-ratio: 1;
  margin-inline: auto;
}
.home-photo-hero__stage::before {
  content: '';
  position: absolute;
  inset: -16%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--home-bloom), transparent);
  pointer-events: none;
}
.home-photo-hero__stage .home-drop--solo { z-index: 1; width: 70%; left: 15%; top: 15%; }
.home-photo-hero__stage .home-ripple--pulse { inset: 15%; }

/* ─────────────────────────────────────────
   PATH CARDS (shopping paths / shop by goal)
   ───────────────────────────────────────── */
.home-paths {
  list-style: none;
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
}
.home-paths--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-paths--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-paths__item { min-width: 0; }
.home-path {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  height: 100%;
  padding: 22px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color .25s var(--home-ease), transform .25s var(--home-ease);
}
.home-paths--cols-4 .home-path { display: flex; flex-direction: column; gap: 14px; }
.home-path__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--cyan);
  background: var(--cyan-dim);
  border: 1px solid var(--border-cyan);
  border-radius: var(--r-md);
}
.home-path__icon svg { width: 22px; height: 22px; }
.home-path__body { min-width: 0; }
.home-path__title { font-family: var(--font-display); font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: .02em; color: var(--white); text-wrap: balance; }
.home-path__link { color: inherit; text-decoration: none; }
.home-path__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.home-path__desc { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.home-path__extra { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 4px; }
.home-path__extra .home-link { position: relative; z-index: 2; }
.home-path__arrow { display: inline-flex; color: var(--cyan); transition: transform .25s var(--home-ease); }
.home-path__arrow svg { width: 18px; height: 18px; }
.home-paths--cols-4 .home-path__arrow { margin-top: auto; }
@media (hover: hover) {
  .home-path:hover { border-color: var(--border-cyan); transform: translateY(-3px); }
  .home-path:hover .home-path__arrow { transform: translateX(4px); }
}

/* ─────────────────────────────────────────
   GUIDE CARDS
   ───────────────────────────────────────── */
.home-guides {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
}
.home-guides__item { min-width: 0; }
.home-guide {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 22px;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color .25s var(--home-ease), transform .25s var(--home-ease);
}
.home-guide__top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.home-guide__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: var(--cyan);
  background: var(--cyan-dim);
  border-radius: var(--r-sm);
}
.home-guide__icon svg { width: 18px; height: 18px; }
.home-guide__type { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.home-guide__title { font-family: var(--font-display); font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: .02em; color: var(--white); text-wrap: balance; }
.home-guide__excerpt {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-guide__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 10px;
}
.home-guide__read { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); font-variant-numeric: tabular-nums; }
.home-guide__arrow { display: inline-flex; color: var(--cyan); transition: transform .25s var(--home-ease); }
.home-guide__arrow svg { width: 18px; height: 18px; }
@media (hover: hover) {
  .home-guide:hover { border-color: var(--border-cyan); transform: translateY(-3px); }
  .home-guide:hover .home-guide__arrow { transform: translateX(4px); }
}

/* goals section: banner sits under the path cards */
.home-goals__banner { margin-top: clamp(28px, 4vw, 44px); }

/* ─────────────────────────────────────────
   HOW TO CHOOSE A MOISTURIZER (face creams landing)
   ───────────────────────────────────────── */
.home-choose__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto clamp(28px, 4vw, 48px);
  text-align: center;
}
.home-choose__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--white);
  text-wrap: balance;
}
.home-choose__lead { max-width: 56ch; margin-bottom: 6px; font-size: 17px; color: var(--text-2); text-wrap: pretty; }
.home-choose__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
}
.home-choose__item { min-width: 0; }
.home-choose__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  height: 100%;
  padding: 24px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.home-choose__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 0 8px 6px;
  color: var(--cyan);
  border: 1px solid var(--home-ring);
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--home-ring-3);
}
.home-choose__icon svg { width: 22px; height: 22px; }
.home-choose__card-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: .02em; color: var(--white); text-wrap: balance; }
.home-choose__card-text { font-size: 16px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.home-choose__card .home-link { margin-top: auto; }
.home-choose__note { max-width: 860px; margin: clamp(28px, 4vw, 40px) auto 0; }

/* ─────────────────────────────────────────
   COMPLIANCE TEXT (FDA statement / cosmetic disclaimer)
   ───────────────────────────────────────── */
.home-legal { padding-block: 40px 56px; border-top: 1px solid var(--border); }
.home-legal__inner { display: grid; gap: 12px; max-width: 860px; margin-inline: auto; }
.home-legal .al-disclaimer,
.home-choose__note .al-disclaimer {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-3);
  text-wrap: pretty;
}

/* ─────────────────────────────────────────
   STAGGER + KEYFRAMES
   ───────────────────────────────────────── */
/* without JavaScript (no html.al-js flag) reveal targets must never stay hidden */
html:not(.al-js) .home-page .al-reveal,
html:not(.al-js) .al-landing .al-reveal { opacity: 1; transform: none; }

.home-page .al-reveal.is-visible,
.al-landing .al-reveal.is-visible { transition-delay: calc(var(--i, 0) * 70ms); }

@keyframes home-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes home-fade {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes home-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -10px, 0); }
}
@keyframes home-pulse {
  0%   { transform: scale(.64); opacity: 0; }
  16%  { opacity: .55; }
  100% { transform: scale(1.22); opacity: 0; }
}

/* ─────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────── */
@media (max-width: 1099px) {
  .home-tiles--cols-5 { --cols: 4; }
  .home-bundles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-concerns__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-ingredients__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-choose__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-paths--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) and (max-width: 1099px) {
  .home-concerns__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* below 1000px the best-seller grid becomes a swipeable rail (scroll region is keyboard focusable) */
@media (max-width: 999px) {
  .home-rail {
    display: flex;
    gap: 14px;
    margin-inline: -24px;
    padding: 4px 24px 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-cyan) transparent;
  }
  .home-rail__item { flex: 0 0 min(44vw, 300px); scroll-snap-align: start; }
}

@media (max-width: 1099px) {
  .home-drop__cap { display: none; }
}

@media (min-width: 640px) and (max-width: 899px) {
  .home-tiles__item--feature .home-tile__desc { display: none; }
}

@media (max-width: 899px) {
  .home-hero.has-photo .home-hero__photo { opacity: .5; }
  .home-hero__veil {
    background:
      linear-gradient(180deg, transparent 70%, var(--bg) 100%),
      linear-gradient(180deg, var(--home-veil) 0%, var(--home-veil) 55%, transparent 100%);
  }
  .home-hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 36px; }
  .home-hero__stage { width: min(88%, 420px); margin-top: 8px; }
  .home-ripple--s3 { display: none; }
  .home-tiles--cols-4,
  .home-tiles--cols-5 { --cols: 3; }
  /* narrower feature tiles need more height and more room for the label */
  .home-tiles--bento .home-tiles__item--feature .home-tile { aspect-ratio: 4 / 3; }
  .home-tiles__item--feature .home-tile__body { max-width: 68%; }
  .home-callout__grid { grid-template-columns: minmax(0, 1fr); }
  .home-photo-hero.has-drop .home-photo-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .home-photo-hero__stage { display: none; }
  .home-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 0; }
  .home-trust__item { padding: 4px 20px; }
  .home-trust__item + .home-trust__item { border-left: 0; }
  .home-trust__item:nth-child(odd) { padding-left: 0; }
  .home-trust__item:nth-child(even) { padding-right: 0; border-left: 1px solid var(--border); }
  .home-reviews__slots .home-review-slot:nth-child(3) { display: none; }
  .home-reviews__slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-paths--cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .home-callout { border-radius: var(--r-lg); }
}

@media (max-width: 639px) {
  .home-tiles { --tile-gap: 12px; }
  .home-tiles--grid { --cols: 2; }
  .home-tiles--cols-3,
  .home-tiles--cols-4,
  .home-tiles--cols-5 { --cols: 2; }
  .home-tiles--grid .home-tiles__item:last-child:nth-child(odd) { flex-basis: 100%; }
  .home-tiles--grid .home-tiles__item:last-child:nth-child(odd) .home-tile__media { aspect-ratio: 16 / 9; }
  .home-tiles--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-tiles--bento .home-tiles__item { grid-column: span 1; }
  .home-tiles--bento .home-tiles__item--feature { grid-column: span 2; }
  .home-tiles--bento .home-tile { aspect-ratio: 1 / 1; }
  .home-tiles--bento .home-tiles__item--feature .home-tile { aspect-ratio: 16 / 10; }
  .home-tiles__item--feature .home-tile__body { max-width: 50%; }
  .home-tile__body { padding: 12px 14px 14px; }
  .home-tile__desc { font-size: 14px; }
  .home-bundles__grid {
    display: flex;
    gap: 14px;
    margin-inline: -24px;
    padding: 4px 24px 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-cyan) transparent;
  }
  .home-bundles__item { flex: 0 0 min(78vw, 320px); scroll-snap-align: start; }
  /* items inside a horizontal scroller are revealed by the scroller, not one by one */
  .home-bundles__item.al-reveal { opacity: 1; transform: none; }
  .home-rail__item { flex-basis: min(74vw, 300px); }
  .home-ingredients__grid { grid-template-columns: minmax(0, 1fr); }
  .home-guides { grid-template-columns: minmax(0, 1fr); }
  .home-choose__grid { grid-template-columns: minmax(0, 1fr); }
  .home-paths--cols-3,
  .home-paths--cols-4 { grid-template-columns: minmax(0, 1fr); }
  .home-paths--cols-4 .home-path { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; }
  .home-paths--cols-4 .home-path__arrow { margin-top: 0; }
  .home-reviews__slots { grid-template-columns: minmax(0, 1fr); }
  .home-reviews__slots .home-review-slot:nth-child(2) { display: none; }
  .home-concern { padding: 16px; gap: 8px; }
  .home-concern__icon { width: 38px; height: 38px; }
  .home-concern__icon svg { width: 20px; height: 20px; }
  .home-concern__tag { display: none; }
  .home-concern__title { font-size: 13px; }
  .home-concern__desc { font-size: 14px; }
  .home-trust__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .home-trust__item,
  .home-trust__item:nth-child(odd),
  .home-trust__item:nth-child(even) { padding: 24px 0; border-left: 0; }
  .home-trust__item + .home-trust__item { border-top: 1px solid var(--border); }
  .home-trust__item:first-child { padding-top: 4px; }
  .home-trust__item:last-child { padding-bottom: 4px; }
  .home-callout__note { width: 100%; }
}

@media (max-width: 480px) {
  .home-hero__actions,
  .home-photo-hero__actions { flex-direction: column; align-items: stretch; }
  .home-hero__actions .btn,
  .home-photo-hero__actions .btn { justify-content: center; }
  .home-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .home-stat { padding: 12px 12px; }
  .home-stat__label { letter-spacing: .06em; }
  .home-steps__item { grid-template-columns: 20px 36px minmax(0, 1fr); gap: 10px; }
  .home-steps__icon { width: 36px; height: 36px; }
  .home-callout__actions .btn { width: 100%; }
  .home-drop__cap { font-size: 9px; padding: 6px 10px; }
}

/* ─────────────────────────────────────────
   REDUCED MOTION
   ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .home-ripple--pulse,
  .home-drop,
  .home-hero__eyebrow,
  .home-hero__sub,
  .home-hero__actions,
  .home-hero__stats,
  .home-hero__stage { animation: none; }
  .home-ripple--pulse { opacity: .35; transform: scale(.9); }
  .home-page .al-reveal,
  .al-landing .al-reveal { opacity: 1; transform: none; transition: none; }
  .home-tile,
  .home-tile__media img,
  .home-tile__arrow,
  .home-concern,
  .home-concern__go,
  .home-ing,
  .home-ing::before,
  .home-path,
  .home-path__arrow,
  .home-guide,
  .home-guide__arrow,
  .home-link svg,
  .home-drop__disc,
  .home-drop__disc img { transition: none; }
  @media (hover: hover) {
    .home-tile:hover,
    .home-concern:hover,
    .home-ing:hover,
    .home-path:hover,
    .home-guide:hover { transform: none; }
    .home-tile:hover .home-tile__media img,
    .home-drop:hover .home-drop__disc img { transform: none; }
  }
}