/* ==========================================================================
   Elite Core V6 homepage (front-page.php)
   Depends on assets/css/v6-core.css for the tokens (--ec-*) and the shared
   classes (.v6-container, .v6-btn, .v6-eyebrow, .v6-h1, .v6-h2, .v6-highlight,
   .v6-pill, .v6-dot, .v6-stage). Everything here is prefixed v6-home-.
   Spec: design/project/Main.dc.html (desktop), MobileHome.dc.html (390px).
   ========================================================================== */

.v6-home {
  color: var(--ec-ink, #0A0A0A);
  background: var(--ec-paper, #FAFAF8);
  overflow-x: clip;
}

.v6-home-top {
  display: flex;
  flex-direction: column;
}

/* DOM order is hero, then ticker (the phone spec). Main.dc.html draws the gold
   ticker above the hero on desktop, so flex order lifts it there; the ticker holds
   no focusable content, so keyboard and reading order stay hero first. */
.v6-home-top > .v6-home-ticker {
  order: 2;
}

.v6-home-top > .v6-home-hero {
  order: 1;
}

.v6-home-sr {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.v6-home-arrow {
  flex: none;
}

/* --------------------------------------------------------------------------
   1. Trust ticker
   -------------------------------------------------------------------------- */

.v6-home-ticker {
  border-top: 2px solid var(--ec-gold, #C9A961);
  border-bottom: 2px solid var(--ec-gold, #C9A961);
  background: var(--ec-card, #FFFFFF);
  overflow: hidden;
  padding: 22px 0;
}

/* Two groups are printed by PHP; the CSS fallback shifts by -50% (one group).
   v6-home.js clones extra groups on wide screens and sets the shift to one exact
   group width in px plus a duration from data-speed, so the loop never gaps. */
.v6-home-ticker__track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: v6HomeMarquee var(--v6-home-ticker-duration, 32s) linear infinite;
}

.v6-home-ticker:hover .v6-home-ticker__track {
  animation-play-state: paused;
}

.v6-home-ticker__group {
  display: flex;
  gap: 56px;
  padding-right: 56px;
}

.v6-home-ticker__item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.v6-home-ticker__item .v6-dot {
  flex: none;
}

.v6-home-ticker__title {
  font-family: var(--ec-font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--ec-ink, #0A0A0A);
}

.v6-home-ticker__body {
  font-size: 14px;
  color: var(--ec-muted, #6B6B6B);
}

@keyframes v6HomeMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(var(--v6-home-ticker-shift, -50%)); }
}

/* --------------------------------------------------------------------------
   2. Hero
   -------------------------------------------------------------------------- */

.v6-home-hero.v6-container {
  /* Explicit width: as a column-flex item with auto side margins it would
     otherwise shrink to its content's max-content width. */
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 56px;
}

.v6-home-hero__copy {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.v6-home-hero__eyebrow {
  margin: 0;
}

.v6-home-hero__title {
  margin: 0;
}

/* Rolling word (trust. / verify. / trace.) */
.v6-home-roll {
  display: inline-block;
  vertical-align: bottom;
  height: 0.95em;
  overflow: hidden;
}

.v6-home-roll__track {
  display: block;
  transform: translateY(0);
  transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}

.v6-home-roll__track.is-reset {
  transition: none;
}

.v6-home-roll__word {
  display: block;
  height: 0.95em;
}

.v6-home-hero__sub {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ec-muted, #6B6B6B);
  max-width: 460px;
}

.v6-home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.v6-home-hero__ruo {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ec-muted, #6B6B6B);
}

.v6-home-hero__ruo::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ec-gold, #C9A961);
}

/* Stage: cream circle, thin ring, floor shadow, three sliding vials */
.v6-stage.v6-home-stage {
  --v6-home-step: 190px;
  flex: 1 1 460px;
  min-width: 0;
  position: relative;
  min-height: 0;
  height: 580px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 56px;
  box-sizing: border-box;
}

/* Ring and circle keep a 1:1 aspect ratio (like .v6-stage__ring in v6-core.css),
   so they stay circular when max-width caps them on narrow stages. */
.v6-home-stage .v6-home-stage__ring {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  width: 540px;
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: 108%;
  border-radius: 50%;
  border: 1px solid var(--ec-border, #E8E4DC);
  background: transparent;
  box-sizing: border-box;
}

.v6-home-stage .v6-home-stage__circle {
  position: absolute;
  left: 50%;
  top: 40px;
  transform: translateX(-50%);
  width: 480px;
  height: auto;
  aspect-ratio: 1 / 1;
  max-width: 96%;
  border-radius: 50%;
  background: var(--ec-cream, #F7F5F0);
}

.v6-home-stage .v6-home-stage__shadow {
  position: absolute;
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%);
  width: 380px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(10, 10, 10, 0.16), rgba(10, 10, 10, 0));
}

.v6-home-showcase {
  position: relative;
  width: 600px;
  max-width: 100%;
  height: 400px;
}

.v6-home-stage .v6-home-vial {
  position: absolute;
  left: 50%;
  bottom: 0;
  top: auto;
  right: auto;
  height: 250px;
  width: auto;
  max-width: none;
  margin: 0;
  object-fit: contain;
  transform-origin: center bottom;
  transform: translateX(-50%) scale(1);
  opacity: 0;
  z-index: 1;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.5s ease;
  will-change: transform, opacity;
  pointer-events: none;
}

.v6-home-stage .v6-home-vial--c {
  transform: translateX(-50%) scale(1.52);
  opacity: 1;
  z-index: 3;
}

.v6-home-stage .v6-home-vial--l {
  transform: translateX(calc(-50% - var(--v6-home-step))) scale(1);
  opacity: 1;
  z-index: 2;
}

.v6-home-stage .v6-home-vial--r {
  transform: translateX(calc(-50% + var(--v6-home-step))) scale(1);
  opacity: 1;
  z-index: 2;
}

.v6-home-stage .v6-home-vial--pl {
  transform: translateX(calc(-50% - 2 * var(--v6-home-step))) scale(1);
  opacity: 0;
  z-index: 1;
}

.v6-home-stage .v6-home-vial--pr {
  transform: translateX(calc(-50% + 2 * var(--v6-home-step))) scale(1);
  opacity: 0;
  z-index: 1;
}

.v6-home-caption {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ec-ink, #0A0A0A);
}

.v6-home-caption__name {
  font-weight: 700;
  color: var(--ec-ink, #0A0A0A);
  text-decoration: none;
}

.v6-home-caption__name:hover,
.v6-home-caption__name:focus-visible {
  color: var(--ec-ink, #0A0A0A);
  text-decoration: underline;
  text-decoration-color: var(--ec-gold, #C9A961);
  text-underline-offset: 3px;
}

.v6-home-caption__meta {
  color: var(--ec-muted, #6B6B6B);
}

.v6-home-dots {
  display: inline-flex;
  gap: 4px;
  margin-left: 6px;
}

.v6-home-dots__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ec-border, #E8E4DC);
  transition: background 0.4s;
}

.v6-home-dots__dot.is-active {
  background: var(--ec-gold, #C9A961);
}

.v6-home-pill {
  position: absolute;
  z-index: 2;
  white-space: nowrap;
}

.v6-home-pill--coa {
  top: 92px;
  right: 4px;
}

.v6-home-pill--purity {
  bottom: 150px;
  left: 4px;
}

/* --------------------------------------------------------------------------
   3. Shop more
   -------------------------------------------------------------------------- */

.v6-home-shop.v6-container {
  padding-top: 96px;
  padding-bottom: 40px;
}

.v6-home-shop__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 36px;
}

.v6-home-shop__intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.v6-home-shop__title {
  margin: 0;
}

.v6-home-tabs {
  display: flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--ec-border, #E8E4DC);
  border-radius: 999px;
  background: var(--ec-card, #FFFFFF);
  align-self: flex-start;
  max-width: 100%;
}

.v6-home-tab {
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ec-ink, #0A0A0A);
  font-family: var(--ec-font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.v6-home-tab__count {
  font-size: 12px;
  color: var(--ec-muted, #6B6B6B);
  transition: color 0.2s ease;
}

.v6-home-tab[aria-selected="true"] {
  background: var(--ec-ink, #0A0A0A);
  color: var(--ec-paper, #FAFAF8);
}

.v6-home-tab[aria-selected="true"] .v6-home-tab__count {
  color: var(--ec-gold, #C9A961);
}

.v6-home-tab:focus-visible {
  outline: 2px solid var(--ec-gold, #C9A961);
  outline-offset: 2px;
}

.v6-home-shop__all {
  font-size: 14px;
  font-weight: 600;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ec-ink, #0A0A0A);
  text-decoration: none;
  white-space: nowrap;
}

.v6-home-shop__all:hover,
.v6-home-shop__all:focus-visible {
  color: var(--ec-muted, #6B6B6B);
}

.v6-home-panel[hidden] {
  display: none;
}

/* Compound cards */
.v6-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.v6-home-card {
  text-decoration: none;
  color: var(--ec-ink, #0A0A0A);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.v6-home-card:hover,
.v6-home-card:focus-visible {
  color: var(--ec-ink, #0A0A0A);
}

.v6-home-card:focus-visible {
  outline: 2px solid var(--ec-gold, #C9A961);
  outline-offset: 4px;
  border-radius: 20px;
}

.v6-home-card__well {
  background: var(--ec-cream, #F7F5F0);
  border-radius: 20px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.v6-home-card .v6-home-card__img {
  height: 290px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.v6-home-card:hover .v6-home-card__img {
  transform: translateY(-6px);
}

.v6-home-card__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.v6-home-card__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.v6-home-card__name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

.v6-home-card__meta {
  font-size: 13px;
  color: var(--ec-muted, #6B6B6B);
}

.v6-home-card__pricing {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}

.v6-home-card__price {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

.v6-home-card__points {
  font-size: 12px;
  font-weight: 500;
  color: var(--ec-muted, #6B6B6B);
  white-space: nowrap;
}

.v6-home-swipe {
  display: none;
}

/* Bundle cards */
.v6-home-bundles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.v6-home-bundle {
  background: var(--ec-card, #FFFFFF);
  border: 1px solid var(--ec-border, #E8E4DC);
  border-radius: 24px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.v6-home-bundle__media {
  display: block;
  border-radius: 16px;
  overflow: hidden;
}

.v6-home-bundle .v6-home-bundle__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
}

.v6-home-bundle__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.v6-home-bundle__label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ec-muted, #6B6B6B);
}

.v6-home-bundle__name {
  margin: 0;
  font-family: var(--ec-font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.v6-home-bundle__name a {
  color: var(--ec-ink, #0A0A0A);
  text-decoration: none;
}

.v6-home-bundle__name a:hover,
.v6-home-bundle__name a:focus-visible {
  color: var(--ec-muted, #6B6B6B);
}

.v6-home-bundle__items {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ec-muted, #6B6B6B);
}

.v6-home-bundle__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.v6-home-bundle__price {
  font-size: 22px;
  font-weight: 600;
}

.v6-home-bundle__btn {
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--ec-ink, #0A0A0A);
  background: transparent;
  color: var(--ec-ink, #0A0A0A);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.v6-home-bundle__btn:hover,
.v6-home-bundle__btn:focus-visible {
  background: var(--ec-ink, #0A0A0A);
  color: var(--ec-paper, #FAFAF8);
}

.v6-home-bundle__arrow {
  display: none;
}

/* --------------------------------------------------------------------------
   4. Quiz band
   -------------------------------------------------------------------------- */

.v6-home-quiz.v6-container {
  padding-top: 72px;
  padding-bottom: 96px;
}

.v6-home-quiz__band {
  position: relative;
  overflow: hidden;
  background: var(--ec-ink, #0A0A0A);
  color: var(--ec-paper, #FAFAF8);
  border-radius: 32px;
  padding: 72px 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: space-between;
}

.v6-home-quiz__ring {
  display: none;
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.v6-home-quiz__ring--1 {
  right: -96px;
  top: -96px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(201, 169, 97, 0.35);
}

.v6-home-quiz__ring--2 {
  right: -56px;
  top: -56px;
  width: 160px;
  height: 160px;
  border: 1px solid rgba(201, 169, 97, 0.22);
}

.v6-home-quiz__copy {
  position: relative;
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.v6-home-quiz__eyebrow {
  margin: 0;
}

.v6-home-quiz__title {
  margin: 0;
  color: var(--ec-paper, #FAFAF8);
}

.v6-home-quiz__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ec-border, #E8E4DC);
  max-width: 440px;
}

.v6-btn.v6-home-quiz__btn {
  position: relative;
  height: 68px;
  padding: 0 44px;
  gap: 12px;
  font-weight: 700;
  font-size: 18px;
  flex: none;
}

.v6-home-quiz__btn .v6-btn__arrow {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

/* --------------------------------------------------------------------------
   5. Lab results
   -------------------------------------------------------------------------- */

.v6-home-lab {
  background: var(--ec-cream, #F7F5F0);
}

.v6-home-lab__inner.v6-container {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: center;
  padding-top: 96px;
  padding-bottom: 96px;
}

.v6-home-lab__copy {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.v6-home-lab__eyebrow,
.v6-home-lab__title {
  margin: 0;
}

.v6-home-lab__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ec-muted, #6B6B6B);
  max-width: 480px;
}

.v6-home-lookup {
  display: flex;
  gap: 0;
  width: 100%;
  max-width: 460px;
  border: 1px solid var(--ec-ink, #0A0A0A);
  border-radius: 999px;
  overflow: hidden;
  background: var(--ec-card, #FFFFFF);
}

.v6-home-lookup__input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: 0 22px;
  height: 52px;
  font-family: var(--ec-font-body, 'Inter', sans-serif);
  font-size: 15px;
  color: var(--ec-ink, #0A0A0A);
  background: transparent;
  outline-offset: -3px;
}

.v6-home-lookup__input::placeholder {
  color: var(--ec-muted, #6B6B6B);
  opacity: 1;
}

.v6-home-lookup__btn {
  flex: none;
  border: 0;
  border-radius: 0;
  background: var(--ec-ink, #0A0A0A);
  color: var(--ec-paper, #FAFAF8);
  padding: 0 26px;
  height: 52px;
  font-family: var(--ec-font-body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.v6-home-lookup__btn:focus-visible {
  outline: 2px solid var(--ec-gold, #C9A961);
  outline-offset: -4px;
}

.v6-home-lookup__icon {
  display: none;
}

.v6-home-lookup__hint {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ec-muted, #6B6B6B);
}

.v6-home-lookup__hintdot {
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--ec-gold, #C9A961);
}

/* COA card */
.v6-home-coa {
  flex: 1 1 420px;
  min-width: 0;
  background: var(--ec-card, #FFFFFF);
  border: 1px solid var(--ec-border, #E8E4DC);
  border-radius: 24px;
  padding: 36px;
  display: flex;
  flex-direction: column;
}

.v6-home-coa__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ec-border, #E8E4DC);
}

.v6-home-coa__title {
  margin: 0;
  font-family: var(--ec-font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ec-ink, #0A0A0A);
}

.v6-home-coa__sub {
  margin: 0;
  font-size: 13px;
  color: var(--ec-muted, #6B6B6B);
}

.v6-home-coa__rows {
  margin: 0;
  padding: 0;
}

.v6-home-coa__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ec-border, #E8E4DC);
  font-size: 14px;
}

.v6-home-coa__key {
  margin: 0;
  color: var(--ec-muted, #6B6B6B);
}

.v6-home-coa__val {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  text-align: right;
}

.v6-home-coa__val .v6-dot {
  flex: none;
}

.v6-home-coa__note {
  margin: 0;
  padding-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ec-muted, #6B6B6B);
}

/* --------------------------------------------------------------------------
   Tablet (<= 1024px)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  /* Two narrower hero columns: a shorter vial step keeps the side vials
     inside the stage instead of over the copy column. */
  .v6-stage.v6-home-stage {
    --v6-home-step: 150px;
  }

  .v6-home-shop.v6-container {
    padding-top: 80px;
  }

  .v6-home-quiz__band {
    padding: 56px 40px;
  }
}

/* --------------------------------------------------------------------------
   Small tablet and phone (<= 768px)
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  /* Hero first, trust grid second: the natural DOM order (MobileHome.dc.html). */
  .v6-home-top > .v6-home-ticker {
    order: 2;
    border-top: 1px solid var(--ec-border, #E8E4DC);
    border-bottom: 1px solid var(--ec-border, #E8E4DC);
    padding: 0;
  }

  .v6-home-top > .v6-home-hero {
    order: 1;
  }

  .v6-home-ticker__track {
    display: block;
    width: auto;
    white-space: normal;
    animation: none;
  }

  .v6-home-ticker__group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 0;
  }

  .v6-home-ticker__group--clone,
  .v6-home-ticker__group[data-v6-clone] {
    display: none;
  }

  .v6-home-ticker__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 20px 16px;
    border-bottom: 1px solid var(--ec-border, #E8E4DC);
    min-width: 0;
  }

  .v6-home-ticker__item:nth-child(odd) {
    border-right: 1px solid var(--ec-border, #E8E4DC);
  }

  .v6-home-ticker__item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .v6-home-ticker__item .v6-dot {
    margin-bottom: 4px;
  }

  .v6-home-ticker__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
  }

  .v6-home-ticker__body {
    font-size: 13px;
    line-height: 1.5;
  }

  /* Hero */
  .v6-home-hero.v6-container {
    padding-top: 32px;
    padding-bottom: 48px;
    gap: 30px;
  }

  .v6-home-hero__copy {
    flex: 1 1 100%;
    gap: 22px;
  }

  .v6-home-hero__sub {
    font-size: 16px;
  }

  .v6-home-hero__actions {
    flex-direction: column;
    gap: 12px;
    margin-top: 6px;
  }

  .v6-btn.v6-home-hero__btn {
    width: 100%;
    justify-content: center;
  }

  .v6-stage.v6-home-stage {
    --v6-home-step: 150px;
    flex: 1 1 100%;
    height: 500px;
    padding-bottom: 72px;
  }

  .v6-home-stage .v6-home-stage__ring {
    top: 20px;
    width: 440px;
    max-width: 96%;
  }

  .v6-home-stage .v6-home-stage__circle {
    top: 40px;
    width: 400px;
    max-width: 86%;
  }

  .v6-home-stage .v6-home-stage__shadow {
    bottom: 62px;
    width: 300px;
    height: 26px;
  }

  .v6-home-showcase {
    height: 340px;
  }

  .v6-home-stage .v6-home-vial {
    height: 220px;
  }

  .v6-home-caption {
    bottom: 14px;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
    white-space: normal;
    text-align: center;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .v6-home-dots {
    flex-basis: 100%;
    justify-content: center;
    margin-left: 0;
    flex-wrap: wrap;
  }

  .v6-home-pill--coa {
    top: 14px;
    right: 16px;
  }

  .v6-home-pill--purity {
    bottom: 128px;
    left: 16px;
  }

  /* Shop more */
  .v6-home-shop.v6-container {
    padding-top: 72px;
    padding-bottom: 56px;
  }

  .v6-home-shop__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 12px;
    margin-bottom: 24px;
  }

  .v6-home-shop__intro {
    display: contents;
  }

  .v6-home-shop__title {
    grid-column: 1;
    grid-row: 1;
    white-space: nowrap;
  }

  .v6-home-shop__all {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .v6-home-tabs {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 8px;
  }

  .v6-home-tab {
    padding: 0 20px;
  }

  /* Compound cards become a horizontal scroll row that bleeds to the edges */
  .v6-home-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 32px;
    margin: 0 -32px;
    padding: 0 32px 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .v6-home-grid::-webkit-scrollbar {
    display: none;
  }

  .v6-home-grid::after {
    content: "";
    flex: 0 0 18px;
  }

  .v6-home-card {
    flex: 0 0 220px;
    width: 220px;
    scroll-snap-align: start;
    gap: 14px;
  }

  .v6-home-card__well {
    height: 290px;
  }

  .v6-home-card .v6-home-card__img {
    height: 256px;
  }

  .v6-home-swipe {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 20px;
    font-size: 13px;
    color: var(--ec-muted, #6B6B6B);
    white-space: nowrap;
  }

  .v6-home-swipe__line {
    flex: 1;
    height: 1px;
    background: var(--ec-border, #E8E4DC);
  }

  /* Bundles become compact rows */
  .v6-home-bundles {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .v6-home-bundle {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 20px;
  }

  .v6-home-bundle__media {
    flex: none;
    width: 104px;
    border-radius: 14px;
  }

  .v6-home-bundle .v6-home-bundle__img {
    width: 104px;
    height: 104px;
    border-radius: 14px;
  }

  .v6-home-bundle__body {
    flex: 1;
    gap: 4px;
  }

  .v6-home-bundle__name {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.15;
  }

  .v6-home-bundle__items {
    font-size: 13px;
    line-height: 1.45;
  }

  .v6-home-bundle__foot {
    margin-top: 4px;
    gap: 8px;
  }

  .v6-home-bundle__price {
    font-size: 16px;
  }

  .v6-home-bundle__btn {
    height: auto;
    padding: 0;
    border: 0;
    gap: 6px;
    font-size: 13px;
    min-height: 44px;
  }

  .v6-home-bundle__btn:hover,
  .v6-home-bundle__btn:focus-visible {
    background: transparent;
    color: var(--ec-ink, #0A0A0A);
  }

  .v6-home-bundle__arrow {
    display: inline-block;
  }

  /* Quiz band */
  .v6-home-quiz.v6-container {
    padding-top: 0;
    padding-bottom: 72px;
  }

  .v6-home-quiz__band {
    border-radius: 28px;
    padding: 40px 24px;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .v6-home-quiz__ring {
    display: block;
  }

  .v6-home-quiz__copy {
    flex: 1 1 auto;
    gap: 14px;
  }

  .v6-home-quiz__text {
    font-size: 15px;
  }

  .v6-btn.v6-home-quiz__btn {
    width: 100%;
    height: 56px;
    padding: 0 24px;
    margin-top: 14px;
    justify-content: center;
    gap: 10px;
    font-size: 15px;
  }

  /* Lab results */
  .v6-home-lab__inner.v6-container {
    padding-top: 72px;
    padding-bottom: 72px;
    gap: 32px;
  }

  .v6-home-lab__copy {
    flex: 1 1 100%;
    gap: 16px;
  }

  .v6-home-lab__text {
    font-size: 15px;
    line-height: 1.6;
  }

  .v6-home-lookup {
    flex-direction: column;
    gap: 10px;
    max-width: none;
    margin-top: 8px;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
  }

  .v6-home-lookup__input {
    height: 52px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--ec-ink, #0A0A0A);
    border-radius: 999px;
    background: var(--ec-card, #FFFFFF);
    font-size: 16px;
  }

  .v6-home-lookup__btn {
    height: 52px;
    border-radius: 999px;
    font-size: 15px;
  }

  .v6-home-lookup__btn:focus-visible {
    outline-offset: 2px;
  }

  .v6-home-lookup__icon {
    display: inline-block;
  }

  .v6-home-coa {
    flex: 1 1 100%;
    padding: 22px;
  }

  .v6-home-coa__head {
    padding-bottom: 16px;
  }

  .v6-home-coa__title {
    font-size: 20px;
    font-weight: 700;
  }

  .v6-home-coa__row {
    padding: 13px 0;
  }
}

/* --------------------------------------------------------------------------
   Phone (<= 480px, 390px target)
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
  /* The eyebrow wraps to two lines at 390px; the gold rule sits on the first
     line (MobileHome.dc.html), not vertically centred across both. */
  .v6-eyebrow.v6-home-hero__eyebrow {
    align-items: flex-start;
  }

  .v6-eyebrow.v6-home-hero__eyebrow::before {
    margin-top: 9px;
  }

  .v6-h1.v6-home-hero__title {
    font-size: 46px;
    line-height: 1;
  }

  .v6-stage.v6-home-stage {
    --v6-home-step: 112px;
    height: 480px;
    margin: 0 -16px;
    width: calc(100% + 32px);
    flex-basis: auto;
    padding-bottom: 76px;
  }

  .v6-home-stage .v6-home-stage__ring {
    top: 24px;
    width: 364px;
    max-width: 94%;
  }

  .v6-home-stage .v6-home-stage__circle {
    top: 41px;
    width: 330px;
    max-width: 85%;
  }

  .v6-home-stage .v6-home-stage__shadow {
    bottom: 66px;
    width: 260px;
    height: 24px;
  }

  .v6-home-showcase {
    height: 300px;
  }

  .v6-home-stage .v6-home-vial {
    height: 200px;
  }

  .v6-home-stage .v6-home-vial--c {
    transform: translateX(-50%) scale(1.5);
  }

  .v6-home-caption {
    bottom: 12px;
    font-size: 13px;
  }

  .v6-home-grid {
    scroll-padding-left: 16px;
    margin: 0 -16px;
    padding: 0 16px 4px;
  }

  .v6-home-grid::after {
    flex-basis: 2px;
  }

  .v6-home-tabs {
    gap: 4px;
  }

  .v6-home-tab {
    padding: 0 16px;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion: no marquee, no word roll, no sliding vials
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .v6-home-ticker__track {
    animation: none;
    width: auto;
    white-space: normal;
    justify-content: center;
  }

  .v6-home-ticker__group {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 48px;
    padding: 0 32px;
  }

  .v6-home-ticker__group--clone,
  .v6-home-ticker__group[data-v6-clone] {
    display: none;
  }

  .v6-home-roll__track,
  .v6-home-stage .v6-home-vial,
  .v6-home-dots__dot,
  .v6-home-card .v6-home-card__img,
  .v6-home-tab,
  .v6-home-tab__count,
  .v6-home-bundle__btn {
    transition: none;
  }

  .v6-home-card:hover .v6-home-card__img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
  .v6-home-ticker__track {
    display: block;
  }

  .v6-home-ticker__group {
    display: grid;
    gap: 0;
    padding: 0;
  }
}

/* Shop more cards (client request): the cream well lights up with a gold border and glow on hover; the image lift stays */
.v6-home-card__well {
  border: 1.5px solid transparent;
  transition: border-color 0.45s ease, box-shadow 0.45s ease;
}
.v6-home-card:hover .v6-home-card__well,
.v6-home-card:focus-visible .v6-home-card__well {
  border-color: var(--ec-gold, #C9A961);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.22), 0 18px 40px rgba(201, 169, 97, 0.18);
}
@media (prefers-reduced-motion: reduce) {
  .v6-home-card__well { transition: none; }
}

/* ==========================================================================
   Phone pass (<= 767px), 2026-10-15 client request: one clear hero with one
   primary CTA (Shop) and one secondary (Lab results), a compact 2 x 2 trust
   grid instead of the ticker, snap-scroll card rails with 1.3 cards visible,
   16px gutters, 48 to 56px section rhythm, no "Verify your vial" box on
   phones (a text link to /v/ replaces it). Desktop (>= 768px) is untouched:
   every rule below sits inside the 767px query except the two defaults that
   hide the phone-only markup there.
   ========================================================================== */

/* Phone-only markup (.v6-home-m, .v6-home-trust) is hidden on wider screens. */
.v6-home-m,
.v6-home-trust {
  display: none;
}

@media (max-width: 767px) {
  /* Phone-only / desktop-only text and blocks. `revert` keeps a p block
     and a span inline. */
  .v6-home-m {
    display: revert;
  }

  .v6-home-d {
    display: none;
  }

  .v6-home .v6-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 1. Hero: short headline, 2-line copy, Shop (primary) + lab results (outline) */
  .v6-home-hero.v6-container {
    padding-top: 24px;
    padding-bottom: 0;
    gap: 16px;
  }

  .v6-home-hero__copy {
    gap: 18px;
  }

  .v6-eyebrow.v6-home-hero__eyebrow {
    align-items: center;
    gap: 10px;
    font-size: 11px;
    letter-spacing: 0.18em;
  }

  .v6-eyebrow.v6-home-hero__eyebrow::before {
    margin-top: 0;
    width: 28px;
  }

  .v6-h1.v6-home-hero__title {
    font-size: clamp(42px, 12.2vw, 58px);
    line-height: 1;
  }

  .v6-home-hero__sub {
    font-size: 16px;
    line-height: 1.55;
    max-width: none;
  }

  .v6-home-hero__actions {
    gap: 10px;
    margin-top: 2px;
  }

  .v6-btn.v6-home-hero__btn {
    height: 56px;
    font-size: 16px;
  }

  .v6-btn.v6-home-hero__btn.v6-btn--outline {
    height: 52px;
    font-size: 15px;
  }

  .v6-home-hero__ruo {
    font-size: 12px;
  }

  /* Stage: one centred vial (the side vials were cut off by the viewport),
     a tappable caption pill, no 35-dot strip. The showcase JS keeps rotating. */
  .v6-stage.v6-home-stage {
    --v6-home-step: 120px;
    flex-basis: auto;
    width: calc(100% + 32px);
    height: 400px;
    min-height: 0;
    margin: 4px -16px 0;
    padding-bottom: 66px;
  }

  .v6-home-stage .v6-home-stage__ring {
    top: 18px;
    width: 306px;
    max-width: 88%;
  }

  .v6-home-stage .v6-home-stage__circle {
    top: 34px;
    width: 274px;
    max-width: 78%;
  }

  .v6-home-stage .v6-home-stage__shadow {
    bottom: 60px;
    width: 200px;
    height: 20px;
  }

  .v6-home-showcase {
    height: 262px;
  }

  .v6-home-stage .v6-home-vial {
    height: 180px;
  }

  .v6-home-stage .v6-home-vial--c {
    transform: translateX(-50%) scale(1.45);
  }

  .v6-home-stage .v6-home-vial--l,
  .v6-home-stage .v6-home-vial--r {
    opacity: 0;
  }

  .v6-home-caption {
    bottom: 10px;
    width: auto;
    max-width: calc(100% - 32px);
    min-height: 44px;
    padding: 0 16px;
    box-sizing: border-box;
    flex-wrap: nowrap;
    row-gap: 0;
    gap: 8px;
    white-space: nowrap;
    font-size: 14px;
    background: var(--ec-card, #FFFFFF);
    border: 1px solid var(--ec-border, #E8E4DC);
    border-radius: 999px;
    box-shadow: var(--ec-shadow-pill, 0 6px 20px rgba(10, 10, 10, 0.06));
    overflow: hidden;
  }

  .v6-home-caption__name {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .v6-home-caption__meta {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
  }

  .v6-home-dots {
    display: none;
  }

  .v6-home-pill--coa {
    top: 6px;
    right: 16px;
  }

  /* 2. Trust: the ticker grid gives way to a compact 2 x 2 card grid */
  .v6-home-top > .v6-home-ticker {
    display: none;
  }

  .v6-home-top > .v6-home-trust {
    order: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 20px 16px 0;
    padding: 0;
    list-style: none;
    background: var(--ec-border, #E8E4DC);
    border: 1px solid var(--ec-border, #E8E4DC);
    border-radius: 18px;
    overflow: hidden;
  }

  /* Icon left, two-line title right; the one-line body is kept in the markup
     for later but hidden so the grid stays 2 rows of about 64px. */
  .v6-home-trust__item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 14px 12px;
    background: var(--ec-card, #FFFFFF);
  }

  .v6-home-trust__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ec-cream, #F7F5F0);
    color: var(--ec-ink, #0A0A0A);
  }

  .v6-home-trust__icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .v6-home-trust__title {
    font-family: var(--ec-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ec-ink, #0A0A0A);
  }

  .v6-home-trust__body {
    display: none;
  }

  /* 3. Shop: title, tabs, rail, then one full-width "All compounds" button.
     The head wrappers become display: contents so flex order can move the
     link under the rail; the tablist and its ids are untouched. */
  .v6-home-shop.v6-container {
    display: flex;
    flex-direction: column;
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .v6-home-shop__head,
  .v6-home-shop__intro {
    display: contents;
  }

  .v6-home-shop__title {
    order: 1;
    font-size: 32px;
    line-height: 1.05;
    white-space: normal;
  }

  .v6-home-tabs {
    order: 2;
    align-self: flex-start;
    margin: 16px 0 18px;
  }

  .v6-home-tab {
    min-height: 44px;
    padding: 0 18px;
  }

  .v6-home-panel {
    order: 3;
  }

  .v6-home-shop__all {
    order: 4;
    width: 100%;
    min-height: 50px;
    margin-top: 18px;
    justify-content: center;
    border: 1.5px solid var(--ec-ink, #0A0A0A);
    border-radius: 999px;
    box-sizing: border-box;
    font-size: 15px;
    color: var(--ec-ink, #0A0A0A);
  }

  .v6-home-shop__all:hover,
  .v6-home-shop__all:focus-visible {
    color: var(--ec-ink, #0A0A0A);
    background: var(--ec-cream, #F7F5F0);
  }

  .v6-home-swipe {
    display: none;
  }

  /* Card rail: 1.3 cards visible at 375 and 414, equal card heights */
  .v6-home-grid {
    gap: 12px;
    margin: 0 -16px;
    padding: 0 16px 6px;
    scroll-padding-left: 16px;
  }

  .v6-home-grid::after {
    flex-basis: 4px;
  }

  .v6-home-card {
    flex: 0 0 70vw;
    width: 70vw;
    max-width: 300px;
    gap: 12px;
  }

  .v6-home-card__well {
    height: 236px;
    border-radius: 18px;
  }

  .v6-home-card .v6-home-card__img {
    height: 206px;
  }

  .v6-home-card__info {
    min-height: 60px;
  }

  .v6-home-card__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 15px;
  }

  .v6-home-card__meta {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .v6-home-card__price {
    font-size: 15px;
  }

  .v6-home-card__points {
    font-size: 11px;
  }

  /* Bundle rows: same compact rows, tighter, 2-line description */
  .v6-home-bundles {
    gap: 10px;
  }

  .v6-home-bundle {
    gap: 12px;
    padding: 10px;
    border-radius: 18px;
  }

  .v6-home-bundle__media {
    width: 96px;
    border-radius: 12px;
  }

  .v6-home-bundle .v6-home-bundle__img {
    width: 96px;
    height: 96px;
    border-radius: 12px;
  }

  .v6-home-bundle__label {
    font-size: 10px;
  }

  .v6-home-bundle__name {
    font-size: 17px;
  }

  .v6-home-bundle__items {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
  }

  /* 4. Quiz band */
  .v6-home-quiz.v6-container {
    padding-top: 0;
    padding-bottom: 40px;
  }

  .v6-home-quiz__band {
    gap: 8px;
    padding: 30px 22px 24px;
    border-radius: 24px;
  }

  .v6-home-quiz__copy {
    gap: 10px;
  }

  .v6-eyebrow.v6-home-quiz__eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
  }

  .v6-h2.v6-home-quiz__title {
    font-size: 30px;
    line-height: 1.05;
  }

  .v6-home-quiz__text {
    font-size: 15px;
    line-height: 1.5;
  }

  .v6-btn.v6-home-quiz__btn {
    height: 52px;
    margin-top: 12px;
    font-size: 15px;
  }

  /* 5. Lab results: 2-line copy, one-row batch lookup, "Verify a vial" text
     link instead of the second form, shorter COA example */
  .v6-home-lab__inner.v6-container {
    padding-top: 40px;
    padding-bottom: 56px;
    gap: 24px;
  }

  .v6-home-lab__copy {
    gap: 14px;
  }

  .v6-eyebrow.v6-home-lab__eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
  }

  .v6-h2.v6-home-lab__title {
    font-size: 32px;
    line-height: 1.05;
  }

  .v6-home-lab__text {
    font-size: 15px;
    line-height: 1.5;
    max-width: none;
  }

  .v6-home-lookup {
    flex-direction: row;
    gap: 0;
    margin-top: 4px;
    border: 1px solid var(--ec-ink, #0A0A0A);
    border-radius: 999px;
    overflow: hidden;
    background: var(--ec-card, #FFFFFF);
  }

  .v6-home-lookup__input {
    height: 50px;
    border: 0;
    border-radius: 0;
    padding: 0 18px;
    background: transparent;
    font-size: 16px;
  }

  .v6-home-lookup__btn {
    height: 50px;
    padding: 0 20px;
    border-radius: 0;
    font-size: 14px;
  }

  .v6-home-lookup__btn:focus-visible {
    outline-offset: -4px;
  }

  .v6-home-lookup__icon {
    display: none;
  }

  .v6-home-lookup__hint {
    font-size: 12px;
  }

  /* v6-verify.css loads after this file with .v6-home-verify{display:flex},
     so the phone rule needs the extra ancestor to win. */
  .v6-home-lab .v6-home-verify {
    display: none;
  }

  .v6-home-verify-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    min-height: 44px;
    margin-top: -6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ec-ink, #0A0A0A);
    text-decoration: none;
  }

  .v6-home-verify-link:hover,
  .v6-home-verify-link:focus-visible {
    color: var(--ec-ink, #0A0A0A);
    text-decoration: underline;
    text-decoration-color: var(--ec-gold, #C9A961);
    text-underline-offset: 3px;
  }

  .v6-home-coa {
    padding: 20px;
    border-radius: 20px;
  }

  .v6-home-coa__head {
    padding-bottom: 14px;
  }

  .v6-home-coa__title {
    font-size: 18px;
  }

  .v6-home-coa__sub {
    font-size: 12px;
  }

  .v6-home-coa__row {
    padding: 11px 0;
    font-size: 13px;
  }

  /* Appearance and Identity rows are hidden on phones: the example card keeps
     compound, batch, purity, test date and status. */
  .v6-home-coa__row:nth-child(3),
  .v6-home-coa__row:nth-child(4) {
    display: none;
  }

  .v6-home-coa__note {
    padding-top: 12px;
    font-size: 12px;
  }
}