/* ============================================================
   VENVITY — Homepage Styles
   ============================================================ */

/* ---- Hero ---- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 68px;
  position: relative;
  overflow: hidden;
}

.hero__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(111,143,134,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,143,134,.06) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding: clamp(3rem, 6vh, 6rem) 0;
}

.hero__eyebrow {
  margin-bottom: 1.5rem;
}

.hero__title {
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 1.75rem;
}

.hero__title em {
  font-style: italic;
  color: var(--primary);
}

.hero__sub {
  max-width: 480px;
  color: var(--text-mid);
  margin-bottom: 2.5rem;
}

.hero__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1rem;
}

/* Hero visual cluster */
.hero__visual {
  position: relative;
  height: 460px;
}

.hero-visual-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  position: absolute;
}

.hero-visual-card--main {
  width: 75%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.hero-visual-card--sm {
  width: 48%;
  right: 0;
}

.hero-visual-card--top {
  top: 6%;
}

.hero-visual-card--btm {
  bottom: 6%;
}

.hero-visual-card--main .home-visual {
  height: 220px;
}

.hero-visual-card--sm .home-visual {
  height: 100px;
}

/* ============================================================
   HERO — EDITORIAL PHOTOGRAPHY (visual identity v1)
   Replaces the CSS-mockup card cluster with a single commissioned-
   look lifestyle photograph. Scoped to index.html only.
   ============================================================ */
.hero-photo {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.hero-photo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-photo__badge {
  position: absolute;
  left: 8%;
  top: 18%;
  width: 190px;
  background: var(--primary);
  color: var(--bg-white);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.5rem 1.75rem;
  box-shadow: var(--shadow-lg);
}

.hero-photo__badge-mark {
  display: block;
  font-size: 0.9rem;
  color: rgba(244,241,236,.8);
  margin-bottom: 0.6rem;
}

.hero-photo__badge-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 0 0 0.9rem;
}

.hero-photo__badge-line {
  display: block;
  width: 32px;
  height: 1px;
  background: rgba(244,241,236,.4);
}

/* ============================================================
   FREE CHALLENGE — EDITORIAL PHOTOGRAPHY (visual identity v2)
   Enlarged, full-height editorial photo with an integrated quote
   card anchored to the bottom edge of the frame (replaces the
   floating .ed-caption paragraph that used to sit below the photo).
   Scoped entirely to index.html / .challenge-* — does not touch any
   shared classes used elsewhere on the site.
   ============================================================ */
.challenge-photo {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  margin: 0;
}

.challenge-photo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  aspect-ratio: 3 / 4;
}

/* Soft dark gradient at the base of the photo so the quote text
   stays legible while sitting directly on top of the photograph. */
.challenge-photo__scrim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(38,42,38,0) 0%, rgba(30,34,30,.55) 78%, rgba(24,28,24,.72) 100%);
  pointer-events: none;
}

.challenge-photo__badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: var(--shadow-md);
  z-index: 2;
}

.challenge-photo__badge-text {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35;
  margin: 0;
}

/* Quote integrated directly into the photo, anchored bottom-left
   over the scrim — reads as a designed editorial caption card
   rather than a disconnected paragraph beneath the image. */
.challenge-photo__quote {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 0 2rem 1.9rem;
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.4;
  color: var(--bg-white);
  text-shadow: 0 1px 12px rgba(0,0,0,.18);
}

.challenge-photo__quote-mark {
  display: block;
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 2.4rem;
  line-height: 0.6;
  color: rgba(244,241,236,.75);
  margin-bottom: 0.35rem;
}

/* ============================================================
   HOMEPAGE PRODUCT MOCKUPS ("home-visual")
   Scoped ONLY to index.html markup — does not touch the shared
   .visual-annual / .visual-reset / .visual-focus / .visual-quarterly
   / .visual-seasonal classes used on shop.html, system.html and the
   product-*.html detail pages. Inspired by the .challenge-mockup
   "book cover" treatment (spine + ruled page + title + brand) so the
   homepage previews read as literal planner/workbook covers instead
   of abstract shapes.
   ============================================================ */
.home-visual {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.home-visual--lg { min-height: 200px; }
.home-visual--compact { min-height: 100px; }

/* soft background ring, echoes .challenge-visual__bg-ring — large
   variant only, to keep small cards clean/uncluttered */
.home-visual--lg::before {
  content: '';
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  border: 1px solid rgba(111,143,134,.15);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.home-visual__mock {
  position: relative;
  z-index: 1;
  display: flex;
  background: var(--bg-white);
  border-radius: 4px 10px 10px 4px;
  box-shadow: 6px 8px 24px rgba(47,52,55,.14), 0 2px 6px rgba(47,52,55,.06);
  overflow: hidden;
  transition: transform var(--transition);
}

.home-visual--lg .home-visual__mock {
  width: 156px;
  height: 182px;
}

.home-visual--compact .home-visual__mock {
  width: 86%;
  max-width: 264px;
  height: 80px;
}

.system-card:hover .home-visual__mock,
.hero-visual-card:hover .home-visual__mock {
  transform: translateY(-2px);
}

.home-visual__spine {
  width: 7px;
  flex-shrink: 0;
  border-radius: 2px 0 0 2px;
}

.home-visual__page {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 13px,
      rgba(111,143,134,.09) 13px,
      rgba(111,143,134,.09) 14px
    );
}

.home-visual--lg .home-visual__page {
  padding: 1.15rem 1rem 1rem;
}

.home-visual--compact .home-visual__page {
  padding: 0.65rem 0.85rem 0.6rem;
  justify-content: space-between;
}

.home-visual__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.home-visual--lg .home-visual__top {
  margin-bottom: 0.6rem;
}

.home-visual__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  white-space: nowrap;
  line-height: 1;
}

.home-visual__brand {
  font-family: var(--font-serif);
  font-size: 0.52rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-light);
  white-space: nowrap;
  line-height: 1;
}

.home-visual__title {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.25;
}

.home-visual--lg .home-visual__title {
  font-size: 1rem;
  margin: 0 0 auto;
}

.home-visual--compact .home-visual__title {
  font-size: 0.72rem;
  margin: 0.25rem 0 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-visual__icon {
  display: flex;
  align-items: center;
  gap: 4px;
}

.home-visual--lg .home-visual__icon {
  margin: 0.85rem 0;
}

/* Per-product accent colors + backdrop tones (kept close to the
   original palette for continuity) */
.home-visual--annual { background: linear-gradient(145deg, #e8e2d8 0%, #d4cdc3 100%); }
.home-visual--annual .home-visual__spine { background: var(--primary); }

.home-visual--reset { background: linear-gradient(145deg, #ece6dd 0%, #e0d8ce 100%); }
.home-visual--reset .home-visual__spine { background: var(--secondary); }

.home-visual--focus { background: linear-gradient(145deg, #e4e8e6 0%, #d5dbd8 100%); }
.home-visual--focus .home-visual__spine { background: var(--accent); }

.home-visual--quarterly { background: linear-gradient(145deg, #e8e2d8 0%, #ddd6c9 100%); }
.home-visual--quarterly .home-visual__spine { background: var(--primary-dark); }

.home-visual--seasonal { background: linear-gradient(145deg, #f0e8dc 0%, #e6dcce 100%); }
.home-visual--seasonal .home-visual__spine { background: #b5a08a; }

/* Annual — month grid (12 markers, first 3 "filled" = progress) */
.home-visual__months {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  width: 100%;
}

.home-visual__months span {
  aspect-ratio: 1;
  border-radius: 2px;
  background: rgba(111,143,134,.16);
}

.home-visual__months span:nth-child(-n+3) {
  background: var(--primary);
}

/* Reset — circular loop badge */
.home-visual__loop {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.home-visual__loop::after {
  content: '↺';
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
}

.home-visual--lg .home-visual__icon .home-visual__loop {
  width: 40px;
  height: 40px;
}

.home-visual--lg .home-visual__icon .home-visual__loop::after {
  font-size: 1.3rem;
}

/* Focus — module bars */
.home-visual__modules {
  display: flex;
  gap: 4px;
  width: 100%;
}

.home-visual__modules span {
  flex: 1;
  height: 16px;
  border-radius: 3px;
  opacity: 0.9;
}

.home-visual--lg .home-visual__modules span { height: 26px; }

.home-visual__modules span:nth-child(1) { background: var(--primary); }
.home-visual__modules span:nth-child(2) { background: var(--secondary); }
.home-visual__modules span:nth-child(3) { background: var(--accent); }

/* Quarterly — 2x2 quarter grid */
.home-visual__quarters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.home-visual--lg .home-visual__quarters {
  width: 48px;
  height: 48px;
}

.home-visual__quarters span {
  border-radius: 2px;
}

.home-visual__quarters span:nth-child(1) { background: var(--primary); }
.home-visual__quarters span:nth-child(2) { background: rgba(111,143,134,.4); }
.home-visual__quarters span:nth-child(3) { background: rgba(111,143,134,.25); }
.home-visual__quarters span:nth-child(4) { background: rgba(111,143,134,.1); border: 1.5px dashed rgba(111,143,134,.4); }

/* Seasonal — mini season bars */
.home-visual__seasons {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.home-visual__seasons span {
  width: 6px;
  border-radius: 2px 2px 0 0;
}

.home-visual--lg .home-visual__seasons span { width: 10px; }

.home-visual__seasons span:nth-child(1) { height: 14px; background: #8fa98f; }
.home-visual__seasons span:nth-child(2) { height: 20px; background: var(--accent); }
.home-visual__seasons span:nth-child(3) { height: 16px; background: var(--primary); }
.home-visual__seasons span:nth-child(4) { height: 10px; background: #b5a08a; }

.home-visual--lg .home-visual__seasons span:nth-child(1) { height: 22px; }
.home-visual--lg .home-visual__seasons span:nth-child(2) { height: 32px; }
.home-visual--lg .home-visual__seasons span:nth-child(3) { height: 26px; }
.home-visual--lg .home-visual__seasons span:nth-child(4) { height: 16px; }

/* ---- Intro Strip ---- */
.intro-strip {
  background: var(--text-dark);
  padding: 1.75rem 0;
  overflow: hidden;
}

.intro-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-strip__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-family: var(--font-sans);
  font-size: clamp(0.8rem, 1.2vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244,241,236,.7);
  text-align: center;
}

.intro-strip__text span {
  padding: 0 1.25rem;
}

.intro-strip__text span + span {
  border-left: 1px solid rgba(244,241,236,.2);
}

.intro-strip__text .ornament {
  background: rgba(244,241,236,.3);
  width: 32px;
}

/* ---- Problem Section ---- */
.problem-section {
  background: var(--bg-main);
}

.problem-grid {
  align-items: start;
  gap: 4rem;
}

.problem-left { padding-top: 0.5rem; }

/* ---- System Intro ---- */
.system-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  align-items: start;
}

.system-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}

.system-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.system-card__visual {
  overflow: hidden;
}

.system-card__visual .product-visual,
.system-card__visual .home-visual {
  height: 200px;
}

.system-card__visual--sm .product-visual,
.system-card__visual--sm .home-visual {
  height: 110px;
}

.system-card__body {
  padding: 1.5rem;
}

.system-card--featured .system-card__body {
  padding: 2rem;
}

.system-card--featured .title {
  font-size: 1.75rem;
}

.system-card__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.system-grid-sm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

/* ---- Pillars ---- */
.pillars-section {
  background: var(--bg-main);
}

.pillar {
  padding: 2rem;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  transition: transform var(--transition), box-shadow var(--transition);
}

.pillar:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.pillar__number {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.875rem;
}

.pillar__title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

/* ---- CTA Band ---- */
.cta-band {
  background: var(--text-dark);
  padding: clamp(4rem, 8vw, 7rem) 0;
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  border: 1px solid rgba(111,143,134,.15);
  right: -100px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.cta-band::after {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  border: 1px solid rgba(111,143,134,.1);
  right: 0; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  position: relative;
  z-index: 1;
}

.cta-band__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-shrink: 0;
}

/* ---- Free Challenge / Email Capture ---- */
.challenge-section {
  background: var(--bg-white);
  border-top: 1px solid var(--border-light);
}

/* Asymmetric editorial grid: the photo column now takes noticeably
   more room than the text column (was a plain 1fr/1fr split), so the
   enlarged photo visually balances/dominates against the copy —
   mirroring a magazine spread rather than a centered web block. */
.challenge-inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: stretch;
}

/* Left visual — stretches to the full height of the row (matched by
   align-items: stretch above) so the photo reads as a tall editorial
   plate rather than a small centered thumbnail. */
.challenge-visual {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.challenge-visual__frame {
  position: relative;
  width: 100%;
  max-width: 370px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #edeae4 0%, #e2ddd5 100%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.challenge-visual__bg-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.challenge-visual__bg-ring--1 {
  width: 310px; height: 310px;
  border: 1px solid rgba(111,143,134,.15);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.challenge-visual__bg-ring--2 {
  width: 200px; height: 200px;
  border: 1px solid rgba(111,143,134,.2);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* Mockup illustration */
.challenge-mockup {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.challenge-mockup__cover {
  display: flex;
  width: 175px;
  height: 232px;
  border-radius: 4px 10px 10px 4px;
  background: var(--bg-white);
  box-shadow: 6px 8px 28px rgba(47,52,55,.14), 0 2px 6px rgba(47,52,55,.06);
  overflow: hidden;
  position: relative;
}

.challenge-mockup__spine {
  width: 10px;
  flex-shrink: 0;
  background: var(--primary);
  border-radius: 2px 0 0 2px;
}

.challenge-mockup__body {
  flex: 1;
  padding: 1.5rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 18px,
      rgba(111,143,134,.1) 18px,
      rgba(111,143,134,.1) 19px
    );
}

.challenge-mockup__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.5rem;
  line-height: 1;
}

.challenge-mockup__title {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.3;
  margin-bottom: auto;
}

.challenge-mockup__days {
  display: flex;
  gap: 4px;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.challenge-mockup__days span {
  display: block;
  width: 18px; height: 22px;
  border-radius: 3px;
  background: rgba(111,143,134,.15);
  border: 1px solid rgba(111,143,134,.25);
}

.challenge-mockup__days span:first-child {
  background: var(--primary);
  border-color: var(--primary);
}

.challenge-mockup__brand {
  font-family: var(--font-serif);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  line-height: 1;
}

/* Right content */
.challenge-content {
  max-width: 540px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 560px;
}

/* Benefits list */
.challenge-benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.challenge-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--text-dark);
  font-weight: 400;
  line-height: 1.5;
}

.challenge-benefits__check {
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* Form */
.challenge-form__row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.challenge-form__input {
  flex: 1;
  min-width: 220px;
  height: 52px;
  padding: 0 1.25rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-main);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--text-dark);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.challenge-form__input::placeholder {
  color: var(--text-light);
}

.challenge-form__input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(111,143,134,.12);
}

.challenge-form__btn {
  flex-shrink: 0;
  height: 52px;
  white-space: nowrap;
}

.challenge-form__trust {
  font-size: 0.78rem;
  color: var(--text-light);
  letter-spacing: 0.03em;
}

.challenge-form__success {
  font-size: 0.9375rem;
  color: var(--primary);
  font-weight: 500;
  padding: 1rem 1.25rem;
  background: rgba(111,143,134,.08);
  border: 1px solid rgba(111,143,134,.2);
  border-radius: var(--radius-md);
}

.challenge-form__error {
  font-size: 0.875rem;
  color: #b94a3b;
  font-weight: 500;
  padding: 0.75rem 1rem;
  background: rgba(185,74,59,.06);
  border: 1px solid rgba(185,74,59,.2);
  border-radius: var(--radius-md);
  margin-top: 0.5rem;
}

/* ---- Homepage FAQ ---- */

.home-faq-section {
  background: var(--bg-white);
  border-top: 1px solid var(--border-light);
}

.home-faq__header {
  max-width: 640px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

.home-faq__intro {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-mid);
  margin-top: 0.875rem;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.home-faq__list {
  max-width: 720px;
  margin: 0 auto;
}

/* Each accordion item */
.home-faq__item {
  border-bottom: 1px solid var(--border-light);
}

.home-faq__item:first-child {
  border-top: 1px solid var(--border-light);
}

/* Question button */
.home-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.375rem 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-dark);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  line-height: 1.5;
  transition: color var(--transition);
}

.home-faq__question:hover {
  color: var(--primary-dark);
}

.home-faq__item--open .home-faq__question {
  color: var(--primary-dark);
  font-weight: 500;
}

/* +/× icon */
.home-faq__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  position: relative;
  transition:
    background var(--transition),
    border-color var(--transition);
}

.home-faq__icon::before {
  content: '';
  position: absolute;
  width: 9px;
  height: 1.5px;
  background: var(--text-mid);
  border-radius: 1px;
  transition: background var(--transition);
}

.home-faq__icon::after {
  content: '';
  position: absolute;
  width: 1.5px;
  height: 9px;
  background: var(--text-mid);
  border-radius: 1px;
  transition:
    background var(--transition),
    transform var(--transition),
    opacity var(--transition);
}

.home-faq__item--open .home-faq__icon {
  background: var(--primary);
  border-color: var(--primary);
}

.home-faq__item--open .home-faq__icon::before {
  background: #fff;
}

.home-faq__item--open .home-faq__icon::after {
  background: #fff;
  transform: rotate(90deg);
  opacity: 0;
}

.home-faq__question:hover .home-faq__icon {
  border-color: var(--primary);
}

.home-faq__question:hover .home-faq__icon::before,
.home-faq__question:hover .home-faq__icon::after {
  background: var(--primary-dark);
}

.home-faq__item--open .home-faq__question:hover .home-faq__icon::before {
  background: #fff;
}

/* Answer panel */
.home-faq__answer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding-bottom: 0;
  transition:
    max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    opacity    0.28s ease,
    padding    0.28s ease;
}

.home-faq__item--open .home-faq__answer {
  max-height: 500px;
  opacity: 1;
  padding-bottom: 1.625rem;
}

.home-faq__answer p {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-mid);
  max-width: 620px;
}

.home-faq__answer p + p {
  margin-top: 0.625rem;
}

/* Footer link */
.home-faq__footer {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}


/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .system-intro__grid {
    grid-template-columns: 1fr;
  }

  .system-grid-sm {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  /* ============================================================
     FREE BONUS / FREE CHALLENGE — unified mobile editorial card.
     Previously the photo (.challenge-visual > .challenge-photo,
     its own rounded-corner + box-shadow "card") and the copy/form
     (.challenge-content) rendered as two visually separate floating
     blocks stacked with a 2.5rem gap between them. `.challenge-inner`
     (the existing grid wrapper that already contains BOTH the photo
     and the content — no new wrapper markup needed) now becomes the
     single visual card: it gets the warm cream Venvity background,
     the same rounded-corner language as the "Where to start" card
     (`border-radius: var(--radius-lg)`, matching `.ed-start-banner__card`)
     and a restrained shadow + hairline border (shadow-md/border-light
     — deliberately lighter than the full-bleed photographic
     `.ed-start-banner__card`'s shadow-lg, since this card is mostly
     text/form content, not a photo). `gap` is reduced from 2.5rem to
     0 so the photo and the content sit flush against each other,
     reading as one continuous block instead of two stacked cards.
     `overflow: hidden` on this same element clips the top corners of
     the photo (see .challenge-photo override below, which drops its
     own independent radius/shadow) and the bottom corners of the
     content block to the SAME outer radius — i.e. only the outer
     card has rounded corners; the photo is only ever rounded at its
     top edge, exactly as requested. Desktop/tablet (>768px) are
     untouched: this whole rule lives inside the existing 768px query
     and `.challenge-inner`'s desktop rule (asymmetric 1.15fr/1fr grid,
     gap clamp(2.5rem,5vw,4.5rem), no background/radius/shadow) is
     unmodified above this breakpoint. */
  .challenge-inner {
    grid-template-columns: 1fr;
    gap: 0;
    /* Refinement pass: the card previously used `var(--bg-main)`
       (#F4F1EC) — the exact same color as the homepage's own
       `body` background — so the unified card had no visible
       boundary and appeared to "disappear" into the page. This is
       the ONLY visible background of the card (the photo covers
       itself; `.challenge-content` below has no background of its
       own and sits transparently on top of this), so a single new
       warm-neutral tone here is what makes the whole card read as
       one clearly defined object. #ECE7E0 is a slightly deeper,
       still-warm neutral drawn from the same cream/tan family as
       the site's existing `--bg-main`/`--border` tokens (not grey,
       pink or brown) — visibly distinct from the page background
       behind/around the card, while remaining light and elegant.
       Border and shadow are strengthened to match (subtle warm-
       charcoal hairline border + a soft, premium ambient shadow),
       replacing the previous `var(--border-light)`/`var(--shadow-
       md)` pairing, which read as too faint against the new,
       slightly deeper card tone. Radius/overflow/single-silhouette
       behavior (rounded image corners on top, rounded corners on
       the content area at the bottom, one continuous outline) are
       unchanged from the approved unified-card structure — only
       the color/border/shadow VALUES change here, no new elements
       or separate borders are introduced. */
    background: #ece7e0;
    border: 1px solid rgba(47,52,55,.12);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(47,52,55,.09);
  }

  /* Image area: fills the full internal width of the new card and
     connects directly into the content below (no gap, see .challenge-
     inner above). aspect-ratio changed from the old 4/3 to a wider
     16/10 so the photo reads as a landscape band across the top of
     the card instead of a tall block that would push the copy/form
     too far down — object-fit/object-position (cover, center 30%,
     inherited from the base .challenge-photo__img rule) are left
     untouched, so the crop/visual subject/focus point are preserved,
     only the visible height changes. Its own border-radius/box-shadow/
     margin (from the base .challenge-photo rule, meant for when it
     was an independent floating card) are removed here so it reads as
     part of the single unified card — the outer .challenge-inner's own
     border-radius + overflow:hidden above already gives it rounded
     top corners "for free", without rounding its bottom edge where it
     meets the content area. */
  .challenge-photo,
  .challenge-photo__img {
    max-width: 100%;
    aspect-ratio: 16 / 10;
  }

  .challenge-photo {
    height: auto;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
  }

  /* ---- Mobile-only contrast fix for the live italic quote ----
     Root cause: the base `.challenge-photo__scrim` gradient (defined
     above, shared with desktop/tablet) only covers the bottom 46% of
     the photo and stays nearly transparent until ~78% down that band
     — tuned for the taller desktop 3/4 crop. On mobile the photo is
     now a shorter 16/10 landscape band (see .challenge-photo__img
     above), so the quote's anchor point sits higher up, over a
     lighter/brighter part of the photograph (particularly its left
     and central area), leaving the white italic statement with too
     little contrast. This mobile-only override enlarges the gradient
     band and softens its top so the darkening starts earlier (barely
     visible near the top of the band, i.e. mid-photo) and builds up
     smoothly to a stronger, warm-charcoal tone only in the lower
     portion where the quote text actually sits — using the same
     Venvity charcoal (`rgba(47,52,55,*)`, matching `--text-dark:
     #2f3437`) already used by every other scrim/overlay on the site
     (.ed-hero__scrim, .ed-start-banner__scrim), rather than the
     photo's own slightly cooler dark tones. The image itself stays
     visibly warm/soft above the band and the gradient never becomes
     fully opaque, so the photograph keeps its editorial, premium
     look instead of reading as dark/grey/muddy.
     - The scrim element (`.challenge-photo__scrim`) sits below both
       `.challenge-photo__badge` and `.challenge-photo__quote` purely
       by DOM/paint order (it is the first of the three absolutely-
       positioned children inside `.challenge-photo`, and none of the
       three declare a z-index that would reorder that on mobile), and
       above the `<img>` beneath it (which is painted first, before
       any of `.challenge-photo`'s absolutely-positioned children).
       No z-index or markup change was needed to guarantee this
       stacking order.
     - The badge sits in the top-right corner, entirely outside this
       bottom-anchored gradient band, so it stays exactly as bright/
       readable as before — completely unaffected.
     - The gradient is contained inside `.challenge-photo`, which is
       itself clipped by `.challenge-inner`'s `overflow: hidden` +
       rounded top corners (see above) and sits only in the image
       area — it cannot extend into the cream `.challenge-content`
       area below. */
  .challenge-photo__scrim {
    /* Refinement pass: the previous 72%-tall band still left the
       upper-middle of the photo (where part of the italic statement
       sits, since it runs across the middle/lower-left area, not
       just the very bottom) too light. The scrim now spans the
       FULL height of the image (100%, still anchored via the base
       rule's `left/right/bottom: 0`) so the whole photo receives at
       least a light warm-charcoal veil, building up to a stronger
       tone lower down where the text sits most densely. Values are
       tuned from the suggested starting gradient: still fully
       transparent-reading near the very top (.10 — enough to add a
       first layer of contrast without flattening the sky/highlight
       areas of the photo), rising steadily through the middle
       (.18 / .40) and reaching a deeper — but still not opaque —
       .66 at the base. The badge is unaffected: it has its own
       solid, opaque `background: var(--primary)` circle and sits at
       a higher paint order, so darkening the scrim underneath it
       changes nothing about its own appearance. */
    height: 100%;
    background: linear-gradient(
      180deg,
      rgba(47,52,55,.10) 0%,
      rgba(47,52,55,.18) 30%,
      rgba(47,52,55,.40) 58%,
      rgba(47,52,55,.66) 100%
    );
  }

  /* Restrained, editorial text-shadow (no visible outline/glow/
     stroke) added only on mobile, stacked on top of the existing
     `text-shadow: 0 1px 12px rgba(0,0,0,.18)` already declared on
     `.challenge-photo__quote` for desktop/tablet — this mobile rule
     fully replaces that value with a slightly firmer two-layer
     shadow tuned for the smaller, shorter mobile image, giving the
     white italic statement a crisp edge against the photo even where
     the gradient above is at its lightest. Color stays white
     (var(--bg-white)), font-family/style/size/line-height and
     wording are all untouched — only the shadow value changes. */
  .challenge-photo__quote {
    /* Refinement pass: strengthened one step further (up to the
       requested maximum) now that the scrim itself also covers more
       of the image — the combination gives the white italic
       statement a crisp, immediately legible edge across the whole
       photo, including over its brighter areas, without any visible
       outline, glow or stroke. Color/font/size/line-height/wording
       are all still untouched. */
    text-shadow:
      0 1px 3px rgba(0,0,0,.52),
      0 3px 12px rgba(0,0,0,.32);
  }

  /* Content area: sits immediately below the image inside the same
     card. Since .challenge-inner now provides the card's own
     background/border/radius/shadow, .challenge-content only needs
     its own controlled internal padding (it has none by default —
     on desktop it relies on the grid `gap` for breathing room from
     the photo column, which no longer exists as a separate column on
     mobile). Text stays left-aligned (no text-align rule is added —
     the existing heading/paragraphs/benefit list/form already render
     left-aligned by default; nothing here centers them). */
  .challenge-content {
    min-height: 0;
    max-width: none;
    padding: clamp(1.75rem, 6vw, 2.25rem) clamp(1.25rem, 5.5vw, 1.75rem) clamp(1.75rem, 6vw, 2.25rem);
  }

  /* Internal vertical rhythm, tightened for the compact card context.
     These override the shared `.mt-md` / `.mt-sm` / `.mt-lg` utility
     classes (css/style.css, reused sitewide) ONLY via a descendant
     selector scoped to `.challenge-content` inside this mobile query
     — the utility classes themselves, and every other place they're
     used (system.html, product pages, etc.), are completely
     untouched. Wording/order/elements are unchanged; only the gap
     above each element is reduced so the card doesn't read as
     unnecessarily tall. */
  .challenge-content .mt-md { margin-top: 1rem; }
  .challenge-content .mt-sm { margin-top: 0.75rem; }
  .challenge-content .challenge-benefits.mt-lg { margin-top: 1.25rem; }

  /* Benefit list — mobile presentation only (wording/order/markup
     unchanged). Checkmark alignment is already correct at the base
     level (`align-items: flex-start` + a small top-nudge on the
     check so it lines up with the first line of text, never
     "floating" away from its label) — this only compacts the vertical
     gap between items and softens the line-height slightly so five
     short lines don't take up more room than needed inside the card. */
  .challenge-benefits {
    gap: 0.6rem;
  }

  .challenge-benefits li {
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .challenge-form__row {
    flex-direction: column;
  }

  .challenge-form__input,
  .challenge-form__btn {
    width: 100%;
  }

  /* Taller tap target for the email field on mobile only.
     Root cause of the previous fix not rendering: .challenge-form__row
     switches to flex-direction: column on mobile, which makes HEIGHT
     the flex main-axis. The base rule's `flex: 1` (flex-basis: 0%)
     overrides the explicit `height` on the main axis, so the input's
     real height collapsed to its content size (~20px) regardless of
     the height value set. Overriding flex-basis to `auto` makes the
     main-axis size fall back to the `height` property below, so the
     height now actually renders. Width stays 100% (cross-axis, set by
     the existing width:100% rule above — completely unaffected by
     flex-basis on the main axis). Border, radius, colors, typography
     are untouched — inherited from the base .challenge-form__input
     rule. No vertical padding is added, so the input box itself grows
     via height and the browser vertically centers the single-line
     placeholder/text by default within that box. */
  .challenge-form__input {
    flex: 0 0 auto;
    height: 56px;
    min-height: 56px;
  }

  /* Matches the input's height above so the stacked input+button
     pair reads as one consistent, evenly-sized control group inside
     the card (both already exceed the 44px accessible tap-target
     minimum). Width/stacking/gap are unchanged (still governed by
     .challenge-form__row's flex-direction:column + gap, and the
     width:100% rule above); only the button's own height is
     adjusted so it now matches the input exactly. */
  .challenge-form__btn {
    height: 56px;
  }

  /* Mobile hero: hide floating product mockups, headline sits
     immediately below the nav bar instead of being vertically
     centered in the viewport. Desktop layout (outside this
     media query) is untouched. */
  .hero {
    min-height: auto;
    align-items: flex-start;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .hero__visual {
    display: none;
  }

  .problem-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .cta-band__inner {
    flex-direction: column;
    text-align: center;
  }

  .cta-band__actions {
    width: 100%;
  }

  .cta-band__actions .btn {
    width: 100%;
  }

  .system-grid-sm {
    grid-template-columns: 1fr;
  }

  .intro-strip__text {
    gap: 0.5rem;
  }

  .intro-strip__text .ornament {
    display: none;
  }

  .home-faq__question {
    font-size: 0.9375rem;
    padding: 1.25rem 0;
  }

  .home-faq__answer p {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .hero__actions {
    flex-direction: column;
    flex-wrap: wrap;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .pillar {
    padding: 1.5rem;
  }
}

/* ============================================================
   DESKTOP-ONLY (min-width: 1025px) — reduce two excessive
   vertical gaps on the homepage. This project's existing desktop
   threshold (already used by css/enhancements.css's cart-sticky
   fix, `@media (min-height:700px) and (min-width:1025px)`) is
   reused here rather than inventing a new breakpoint, so mobile
   (≤768px) and the ≤1024px tablet tier are both completely
   unaffected — neither range is touched by this block.

   ---- Root cause, gap 1 (six principle cards → "Where to start"
   banner) ----
   `.pillars-section` has no padding rule of its own — it inherits
   100% of its top/bottom padding from the shared, desktop-tuned
   `.section` utility (css/style.css): `padding: clamp(4rem, 8vw,
   8rem) 0`, i.e. 64-128px depending on viewport width. This stacks
   directly against `.ed-start-banner`'s own unconditional
   `padding: clamp(3rem, 6vw, 5rem) 0` (css/editorial.css, 48-80px)
   on its top edge. Combined, the two independently desktop-tuned
   values produced ~112-208px of dead space between the 6th pillar
   card and the banner across 1025-1920px — the reported "excessive
   empty vertical space".

   Fix: only THIS section's bottom padding is reduced here (via the
   page-specific `.pillars-section` selector — the shared `.section`
   class itself is never touched, so no other page using `.section`
   is affected). The paired reduction of `.ed-start-banner`'s own
   top padding lives in css/editorial.css (the file that already
   owns that selector), right next to its other homepage-only
   rules. Combined final gap ≈ 72-88px across 1025-1920px — inside
   the requested ~72-104px target, using proportional clamp() values
   rather than one forced fixed number. No negative margins used.

   The six cards themselves (grid, width, count), the banner
   (dimensions, image, overlay, copy, buttons, border-radius) are
   completely unaffected — only the padding of the section that
   PRECEDES the banner is adjusted here. ============================================================ */
@media (min-width: 1025px) {
  .pillars-section {
    padding-bottom: clamp(2.5rem, 4vw, 3rem);
  }

  /* ---- Root cause, gap 2 ("Where to start" banner → Free Bonus
     section) ----
     `.challenge-section` also has no padding of its own — it
     inherits the same shared `.section` top padding (64-128px),
     which stacks against `.ed-start-banner`'s own unconditional
     bottom padding (48-80px, paired override also in
     css/editorial.css). Combined original gap ≈ 112-208px.
     Fix: only this section's top padding is reduced here (page-
     specific `.challenge-section` selector; `.section` itself
     untouched). Combined final gap ≈ 80-104px across 1025-1920px —
     inside the requested ~80-120px target. Internal spacing of the
     Free Bonus card (photo, copy, form) and every pixel of the
     banner are unaffected — only this section's own top padding
     changes. No negative margins used. */
  .challenge-section {
    padding-top: clamp(3rem, 4.5vw, 4rem);
  }
}