/* ============================================================
   VENVITY — Editorial Art Direction Layer
   Shared visual language for the photography-led redesign of
   the Homepage, The System page and the Shop page.
   Loaded ONLY by index.html / system.html / shop.html.
   Does not touch product-visuals.css, product detail pages,
   cart, checkout or any shared/global component.
   ============================================================ */

/* ---- The "matted print" photo frame ----
   A recurring motif: every photograph sits inside a soft-toned
   mat/frame with generous padding, like a printed photograph in
   an editorial spread. This is what ties hero, product and
   collection imagery into one cohesive photoshoot feeling. */
.ed-frame {
  position: relative;
  background: var(--bg-white);
  padding: clamp(0.75rem, 1.6vw, 1.5rem);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.ed-frame__img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius-md) - 3px);
}

.ed-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ed-frame:hover img {
  transform: scale(1.035);
}

.ed-frame--flush {
  padding: 0;
  box-shadow: none;
  background: none;
}

/* ---- Photo eyebrow tag (overlay pill on top of an image) ---- */
.ed-tag-photo {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  background: rgba(250, 248, 245, .92);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--primary-dark);
  box-shadow: 0 2px 10px rgba(47,52,55,.08);
}

/* ---- Serif italic caption under a photo ---- */
.ed-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--text-light);
  margin-top: 0.9rem;
  line-height: 1.4;
}

/* ---- Small numbered/labelled eyebrow used across editorial sections ---- */
.ed-kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.ed-kicker__line {
  width: 28px;
  height: 1px;
  background: var(--primary);
  flex-shrink: 0;
}

.ed-kicker--center {
  justify-content: center;
}

/* ---- Full-bleed editorial band (image with dark overlay + copy) ---- */
.ed-band {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}

.ed-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(47,52,55,.72) 0%, rgba(47,52,55,.42) 55%, rgba(47,52,55,.62) 100%);
}

.ed-band__inner {
  position: relative;
  z-index: 1;
}

/* ---- Asymmetric editorial two-up (used for problem section, mosaics, etc) ---- */
.ed-asym {
  display: grid;
  align-items: center;
}

/* ---- Generic pull-quote-style mark ---- */
.ed-mark {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--primary);
  font-size: 1.5rem;
  line-height: 1;
}

/* ---- Aspect-ratio helpers (apply to .ed-frame__img-wrap) ---- */
.ed-ratio-square    { aspect-ratio: 1 / 1; }
.ed-ratio-portrait  { aspect-ratio: 4 / 5; }
.ed-ratio-tall       { aspect-ratio: 3 / 4; }
.ed-ratio-wide       { aspect-ratio: 16 / 10; }
.ed-ratio-panorama   { aspect-ratio: 21 / 9; }

/* ---- Editorial "index" row — a magazine contents-page style list
   item used to present secondary products as a curated list rather
   than a repeating card grid. ---- */
.ed-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 1.75rem;
  align-items: center;
  padding: 1.75rem 0;
  border-top: 1px solid var(--border-light);
}

.ed-row:last-child {
  padding-bottom: 0.25rem;
}

.ed-row__thumb {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.ed-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.ed-row:hover .ed-row__thumb img {
  transform: scale(1.07);
}

.ed-row__num {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 0.35rem;
}

.ed-row__body { min-width: 0; }

.ed-row__foot {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}

/* ---- Photo mood filter — used sparingly on secondary/supporting
   imagery so a reused photo reads as a distinct editorial moment
   rather than a literal repeat. ---- */
.ed-photo-mood {
  filter: grayscale(0.25) sepia(0.12) contrast(1.02);
}

/* ============================================================
   HOMEPAGE — Full-bleed editorial hero
   Replaces the two-column card layout with a full-bleed
   photograph, a dark gradient scrim for legibility, and text
   set directly over the image (Aesop / Kinfolk cover-story feel).
   Scoped to index.html's .hero.ed-hero only.
   ============================================================ */
.ed-hero {
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  padding-top: 68px;
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
  position: relative;
  overflow: hidden;
}

.ed-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ed-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.ed-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(47,52,55,.06) 0%, rgba(47,52,55,.12) 40%, rgba(47,52,55,.72) 100%);
}

.ed-hero__inner {
  position: relative;
  z-index: 1;
}

.ed-hero__content {
  max-width: 640px;
}

.ed-hero__eyebrow {
  color: #6F8F86;
  margin-bottom: 1.5rem;
}

.ed-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;
  color: #2F3437;
}

.ed-hero__title em {
  font-style: italic;
  color: #6F8F86;
}

.ed-hero__sub {
  max-width: 500px;
  color: #2F3437;
  margin-bottom: 2.5rem;
}

.ed-hero__badge {
  position: absolute;
  right: clamp(1.25rem, 4vw, 3rem);
  bottom: clamp(3.5rem, 8vw, 6rem);
  z-index: 1;
  width: 200px;
  background: rgba(250,248,245,.94);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.5rem 1.75rem;
  box-shadow: var(--shadow-lg);
}

.ed-hero__badge-mark {
  display: block;
  font-size: 0.9rem;
  color: var(--primary);
  margin-bottom: 0.6rem;
}

.ed-hero__badge-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--text-dark);
  margin: 0 0 0.9rem;
}

.ed-hero__badge-line {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--border);
}

@media (max-width: 1024px) {
  .ed-hero__badge { display: none; }
}

@media (max-width: 768px) {
  .ed-hero {
    min-height: auto;
    align-items: flex-end;
    padding-top: 88px;
    padding-bottom: 3rem;
  }
  .ed-hero__media {
    position: absolute;
    overflow: hidden;
  }

  /* Mobile hero image — FINAL approved treatment (Task T, Option A).
     A dedicated, purpose-built AI-generated still-life image
     (images/hero-mobile-generated-option-a.png, loaded via the
     <picture> mobile <source> in index.html) replaces the old
     recropped desktop photo on mobile only. This image was composed
     from the start with a calm, dark upper-left/middle-left zone for
     text, so it uses simple object-fit: cover with the approved
     object-position — no scale/zoom transform is needed or applied.
     All previous mobile-only recrop rules (object-position: 92% 8%;
     transform: scale(1.38); transform-origin) have been removed, not
     left active alongside this rule, since they targeted the old
     desktop image and would misalign this new one. Desktop/tablet
     .ed-hero__img (outside this media query) is completely untouched
     and continues to render the original images/hero-editorial-clean.png. */
  .ed-hero__img {
    object-fit: cover;
    object-position: 75% 70%;
  }

  /* Mobile scrim — FINAL approved treatment (Task T, Option A).
     Exact overlay gradient approved in the Option A preview: same
     190deg direction and same 4 stops/opacities as
     preview-hero-mobile-options-v3.html. Replaces the previous
     stronger/conflicting 195deg mobile scrim tuned for the old photo. */
  .ed-hero__scrim {
    background: linear-gradient(190deg, rgba(47,52,55,.30) 0%, rgba(47,52,55,.42) 40%, rgba(47,52,55,.72) 78%, rgba(47,52,55,.86) 100%);
  }

  /* Mobile-only, forced typography colors: on the darker mobile scrim
     the original desktop dark-brand text (#2F3437) no longer reads
     cleanly. These rules update the SAME selectors used everywhere
     else (.ed-hero__eyebrow / .ed-hero__title / .ed-hero__title em /
     .ed-hero__sub) rather than introducing new classes, so there is
     no separate/duplicate rule that could silently be skipped or
     overridden — this IS the mobile color for these elements. Both
     the base (desktop) rule and this media-query rule live in this
     same file, loaded last on the page (after style.css/home.css),
     and this block appears after the base rule in source order, so
     at equal specificity it wins the cascade on its own — no
     !important needed. Desktop/tablet keep the original dark-brand
     (#2F3437) and original green (#6F8F86) — only the widths at or
     below 768px are affected. */
  .ed-hero__title {
    color: #FFFFFF;
    text-shadow: 0 1px 4px rgba(0,0,0,.32);
  }

  /* Sage-green italic statement ("You need a system.") — FINAL
     approved treatment (Task T, Option A). Same unchanged sage color
     (#8FA98F) and same italic serif styling. Text-shadow matches the
     approved Option A preview exactly (single shadow layer — the
     previous two-stacked-layer shadow tuned for the old busier photo
     is removed since this calmer image needs less correction). */
  .ed-hero__title em {
    color: #8FA98F;
    text-shadow: 0 1px 3px rgba(0,0,0,.42);
  }

  .ed-hero__sub {
    color: rgba(255,255,255,0.88);
  }

  /* Sage-green eyebrow — FINAL approved treatment (Task T, Option A).
     Same unchanged sage color (#8FA98F) and same wording/weight/
     letter-spacing. Text-shadow matches the approved Option A preview
     exactly (single shadow layer, replacing the previous two-layer
     shadow tuned for the old photo). */
  .ed-hero__eyebrow {
    color: #8FA98F;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
  }

  .ed-hero__content { max-width: 100%; }

  /* Mobile-only: the secondary CTA ("Shop All Products") now always
     sits over the darker base of the photo (see .ed-hero__scrim
     above), so the dark-on-dark outline loses contrast. Switch it to
     a light/white outline variant for this hero only — same size,
     padding, radius and hover motion as .btn--outline, just inverted
     colors for legibility. Desktop is completely untouched. */
  .ed-hero .hero__actions .btn--outline {
    color: #faf8f5;
    border-color: rgba(250,248,245,.85);
  }

  .ed-hero .hero__actions .btn--outline:hover {
    background: #faf8f5;
    color: var(--text-dark);
  }
}

/* ============================================================
   HOMEPAGE — The Problem, editorial asymmetric split
   A tall portrait photograph paired with a narrower text column,
   offset so the composition reads as intentional, not a plain
   two-up grid.
   ============================================================ */
.ed-problem__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.ed-problem__photo {
  max-width: 380px;
}

.ed-problem__text {
  padding-top: 0;
}

@media (max-width: 900px) {
  .ed-problem__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .ed-problem__photo {
    max-width: 320px;
    margin: 0 auto;
  }
}

/* ============================================================
   HOMEPAGE — System Intro, editorial feature + index list
   ============================================================ */
.ed-system-intro__head {
  max-width: 640px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.ed-feature {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.ed-feature__content {
  max-width: 420px;
}

@media (max-width: 900px) {
  .ed-feature {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .ed-feature__content { max-width: 100%; }
}

/* ============================================================
   HOMEPAGE — CTA band with a background photograph
   Adds an image + dark gradient behind the existing .cta-band
   content without altering the shared .cta-band base rules used
   on system.html (this file/rule is additive only).
   ============================================================ */
.ed-cta-photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  opacity: 0.55;
}

.ed-cta-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border: none;
  border-radius: 0;
  transform: none;
  right: auto;
  top: auto;
  z-index: 1;
  background: linear-gradient(100deg, rgba(47,52,55,.94) 15%, rgba(47,52,55,.78) 55%, rgba(47,52,55,.5) 100%);
}

.ed-cta-photo::after {
  display: none;
}

.ed-cta-photo .cta-band__inner {
  position: relative;
  z-index: 2;
}

/* ============================================================
   SYSTEM PAGE — Editorial photo hero
   Full-bleed photograph behind the page-hero text, with the
   ecosystem diagram floating on a soft translucent card so it
   stays legible over the image. Scoped to system.html's
   .system-hero.ed-system-hero only — does not touch the shared
   .page-hero base rules used across cart/checkout/faq/shop.
   ============================================================ */
.ed-system-hero {
  position: relative;
  overflow: hidden;
}

.ed-system-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ed-system-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.ed-system-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, var(--bg-main) 0%, var(--bg-main) 32%, rgba(244,241,236,.75) 55%, rgba(244,241,236,.25) 100%);
}

.ed-system-hero__crumb,
.ed-system-hero__text,
.ed-system-hero .system-hero__inner {
  position: relative;
  z-index: 1;
}

.ed-system-hero__diagram {
  background: rgba(250,248,245,.86);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
}

/* ------------------------------------------------------------
   Premium floating diagram card ("ed-eco-card") — refines the
   ecosystem diagram to match the approved editorial mockup:
   solid opaque white card (not a translucent glass panel),
   more generous padding, thinner/quieter connecting rings,
   more elegant node circles and stronger typographic hierarchy
   on the center mark. Only descendant selectors under
   .ed-eco-card are used, so the original .ecosystem-diagram /
   .eco-* base rules in css/system.css (used only on this page)
   remain fully intact and unaffected on their own.
   ------------------------------------------------------------ */
.ed-eco-card {
  background: var(--bg-white);
  backdrop-filter: none;
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 3vw, 2.75rem);
  box-shadow: 0 30px 60px -20px rgba(47,52,55,.16), 0 8px 20px -8px rgba(47,52,55,.08);
  border: 1px solid rgba(47,52,55,.05);
}

.ed-eco-card .eco-orbit::before {
  border-color: rgba(111,143,134,.14);
}

.ed-eco-card .eco-center {
  box-shadow: 0 10px 26px -6px rgba(111,143,134,.5);
}

.ed-eco-card .eco-center span {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

.ed-eco-card .eco-node {
  border-color: rgba(47,52,55,.08);
  box-shadow: 0 6px 16px -4px rgba(47,52,55,.10);
  transition: transform var(--transition), box-shadow var(--transition);
}

.ed-eco-card .eco-node span {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-mid);
}

@media (max-width: 1024px) {
  .ed-system-hero::before {
    background: linear-gradient(180deg, var(--bg-main) 0%, var(--bg-main) 38%, rgba(244,241,236,.8) 65%, rgba(244,241,236,.35) 100%);
  }
}

@media (max-width: 640px) {
  .ed-system-hero__img { object-position: center 30%; }
}

/* ------------------------------------------------------------
   Mobile-only contrast refinement for the ecosystem diagram card
   (≤768px). Both the diagram itself (white/light circles) and its
   card (`.ed-eco-card`, `var(--bg-white)` = #FAF8F5) sit on the
   page's own light cream background (`--bg-main` = #F4F1EC), and on
   mobile the card also sits directly under the light hero photo's
   fade-to-cream gradient (`.ed-system-hero::before`) — leaving very
   little tonal separation between "card" and "page" at a glance.
   This override only changes the CARD's own background/border/
   shadow/padding tuning (all under the .ed-eco-card scope, which is
   used only by this one diagram on this one page) to a slightly
   deeper warm neutral with a firmer (but still restrained) hairline
   border and shadow, giving it clear visual definition. The diagram
   itself (.ecosystem-diagram/.eco-* — sizing/positions fixed in
   css/system.css's own new mobile block) and every desktop/tablet
   rule above are unaffected; only card surface values change here,
   only on mobile. */
@media (max-width: 768px) {
  .ed-eco-card {
    background: #e9e3db;
    border: 1px solid rgba(47,52,55,.12);
    box-shadow: 0 12px 30px rgba(47,52,55,.08);
    padding: clamp(1.5rem, 6vw, 2rem);
  }
}

/* ============================================================
   THE FIVE TOOLS — quick ecosystem overview strip (system.html)
   Editorial horizontal index of all 5 products, sitting directly
   below the hero. Airy, premium, minimalist line icons + thin
   vertical dividers. Scoped entirely via .ed-tools-strip.
   ============================================================ */
.ed-tools-strip {
  background: var(--bg-main);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  padding-top: clamp(2.75rem, 5vw, 3.75rem);
  padding-bottom: clamp(2.75rem, 5vw, 3.75rem);
}

.ed-tools-strip__kicker {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.ed-tools-strip__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.ed-tools-strip__item {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 0 0.5rem;
}

.ed-tools-strip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1.1rem;
  color: var(--primary);
}

.ed-tools-strip__icon svg {
  width: 100%;
  height: 100%;
}

.ed-tools-strip__name {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.ed-tools-strip__desc {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-mid);
  margin: 0;
}

.ed-tools-strip__divider {
  width: 1px;
  align-self: stretch;
  background: var(--border-light);
  flex-shrink: 0;
  margin-top: 22px;
}

@media (max-width: 900px) {
  .ed-tools-strip__row {
    flex-wrap: wrap;
    justify-content: center;
  }

  .ed-tools-strip__item {
    flex: 1 1 30%;
    min-width: 150px;
  }

  .ed-tools-strip__divider {
    display: none;
  }
}

@media (max-width: 560px) {
  .ed-tools-strip__item {
    flex: 1 1 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .ed-tools-strip__row {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
}

/* ============================================================
   SYSTEM PAGE — Mobile spacing refinement (≤768px only): reduces
   the excessive gap between the end of "The Five Tools" strip
   (last stacked item on mobile is Reset Kit, ending with "Your
   starting point for any reset.") and the "THE FOUNDATION" /
   "What makes this a system, not a product" section that follows.

   Root cause: `.ed-tools-strip`'s own unconditional
   `padding-bottom: clamp(2.75rem, 5vw, 3.75rem)` (≈44px flat on
   every tested mobile width) was stacking with the NEXT section's
   shared `.section` desktop-tuned top padding (clamp(4rem,8vw,8rem)
   ≈64px flat on mobile, css/style.css, no page-specific override
   existed before now) for a combined ≈108px gap — a near-empty
   band on a phone. Only THIS section's own bottom padding is
   reduced here (its top padding, which controls the space after
   the hero above it, is untouched and out of scope). The paired
   fix for the next section's top padding lives in css/system.css
   (`section[aria-labelledby="what-heading"]`).

   Scope/placement note: this override must live in THIS file
   (not css/system.css) because .ed-tools-strip's unconditional
   base rule above is also defined in css/editorial.css, which
   loads AFTER css/system.css on system.html — a same-specificity
   override placed in system.css would lose to this file's later,
   equal-specificity, unconditional rule at every width. Since
   .ed-tools-strip is used only on system.html (confirmed via a
   project-wide search), this change cannot affect any other page.
   Result: ≈40-48px (this section's reduced bottom padding) +
   ≈16-24px (next section's reduced top padding, see
   css/system.css) ≈ 56-72px total — within the requested
   ~56-80px target, down from ≈108px. ============================================================ */
@media (max-width: 768px) {
  .ed-tools-strip {
    padding-bottom: clamp(2.5rem, 5.5vw, 3rem);
  }
}

/* ============================================================
   SYSTEM PAGE — The 5 products in detail, editorial photography
   Replaces the old CSS-icon .product-visual mockups inside each
   .sys-product__visual with real photographs, framed with the
   shared .ed-frame treatment. Zig-zag grid mechanics (order swap,
   gap, responsive stacking) come from the existing .sys-product
   rules in css/system.css — untouched.
   ============================================================ */
.ed-sys-product__visual {
  box-shadow: none;
  overflow: visible;
  border-radius: 0;
}

/* Refinement pass: images enlarged ~20% (320px -> 390px desktop,
   260px -> 300px mobile) to feel more premium/dominant within the
   existing zig-zag layout. Hover zoom (.ed-frame:hover img, defined
   above) is untouched — only the frame's height changed, so the
   zoom interaction still applies to the same element. */
.ed-sys-product__visual .ed-frame__img-wrap {
  height: 390px;
}

@media (max-width: 768px) {
  /* Two-column compact card (360-768px): image sits in the fixed
     left column (width forced via .sys-product__visual in
     css/system.css). Height is driven by a portrait aspect-ratio
     rather than a fixed px value so the photo stays consistent and
     proportionate at every width in this range, while reading
     noticeably larger/more present than a small thumbnail.
     !important is used here defensively: this exact rule previously
     failed to visibly apply on the rendered page even though it was
     present in the source, and no other stylesheet loading after
     this one was found to explain it — forcing it removes any doubt
     about a silent override. Rounded corners and hover/tap zoom are
     inherited unchanged from .ed-frame__img-wrap / .ed-frame:hover
     img above. */
  .ed-sys-product__visual .ed-frame__img-wrap {
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    width: 100% !important;
  }
}

@media (max-width: 359px) {
  /* Narrowest phones fall back to a full-width stacked image
     (see css/system.css). Noticeably taller than the previous
     mobile stack height, since it now has the whole compact card
     to itself and can afford to be the visually dominant element. */
  .ed-sys-product__visual .ed-frame__img-wrap {
    aspect-ratio: auto !important;
    height: 300px !important;
    width: 100% !important;
  }
}

/* ============================================================
   SHOP PAGE — editorial photography
   ============================================================ */
.ed-shop-hero { position: relative; overflow: hidden; }

.ed-shop-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  z-index: 0;
  opacity: 0.16;
}

.ed-shop-hero .container { position: relative; z-index: 1; }

.ed-shop-featured__visual {
  position: relative;
  overflow: hidden;
}

.ed-shop-featured__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Photographic treatment for the 4-card "curated collection" grid —
   the CSS-icon .card-visual div is replaced by a real <img>; these
   rules give it the same box behaviour (height, hover zoom) as the
   original component defined in css/shop.css. */
.shop-card__visual .card-visual {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

/* ============================================================
   HOMEPAGE — "Where to start", premium editorial banner
   A rounded photographic card replaces the plain dark background
   of the shared .cta-band component. Scoped to index.html's
   .ed-start-banner only — .cta-band base rules (background,
   decorative circles, spacing) used by system.html are untouched;
   this class simply hides/overrides them locally via higher
   specificity on the same element.
   ============================================================ */
.ed-start-banner {
  background: var(--bg-main);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.ed-start-banner::before,
.ed-start-banner::after {
  display: none;
}

/* ============================================================
   DESKTOP-ONLY (min-width: 1025px) — paired half of the two
   homepage gap fixes (see css/home.css's matching
   `@media (min-width: 1025px)` block for the full root-cause
   explanation of both gaps). `.ed-start-banner`'s own top and
   bottom padding is reduced here on desktop only, since it stacks
   against the preceding `.pillars-section` and following
   `.challenge-section` (both reduced in css/home.css) to form the
   two reported excessive gaps. Mobile/tablet (≤1024px) keep the
   original `clamp(3rem, 6vw, 5rem) 0` unconditional padding
   completely unchanged — this override only applies above 1024px.
   The banner's own card, image, overlay, copy, buttons and
   border-radius (all defined on `.ed-start-banner__card` and its
   descendants) are not touched by this rule. No negative margins
   are used. */
@media (min-width: 1025px) {
  .ed-start-banner {
    padding: clamp(2rem, 3.5vw, 2.75rem) 0;
  }
}

.ed-start-banner__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: 420px;
  display: flex;
  align-items: center;
  box-shadow: var(--shadow-lg);
}

.ed-start-banner__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ed-start-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.ed-start-banner__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(47,52,55,.88) 0%, rgba(47,52,55,.72) 32%, rgba(47,52,55,.28) 58%, rgba(47,52,55,.05) 78%);
}

.ed-start-banner__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 5vw, 4rem);
}

@media (max-width: 768px) {
  .ed-start-banner__card {
    min-height: auto;
  }
  .ed-start-banner__scrim {
    background: linear-gradient(180deg, rgba(47,52,55,.55) 0%, rgba(47,52,55,.88) 60%, rgba(47,52,55,.94) 100%);
  }
  .ed-start-banner__img {
    object-position: 70% center;
  }

  /* Mobile-only, definitive fix: "Start with the Annual System" was
     overflowing/clipping on narrow phones (e.g. Galaxy S25) because a
     fixed-width box + nowrap label left no room to breathe at small
     viewports. This rule keeps the button at 100% of its own
     container (matching the shared `.cta-band__actions .btn { width:
     100% }` mobile rule — no fixed/min width, box-sizing: border-box
     so padding never pushes it past its parent), then lets font-size,
     letter-spacing and horizontal padding scale down responsively via
     clamp() so the full label fits with room to spare at 360–412px.
     Text stays centered and is allowed to wrap (white-space: normal)
     so that on the narrowest phones (320px) — where even the reduced
     size can't fit on one line — it breaks cleanly onto a second line
     at a word boundary instead of ever clipping a character. Same
     color, radius, font-weight and hover motion as every other
     .btn--accent.btn--lg on the site; only sizing/box-model changes,
     only on this mobile breakpoint. Desktop/tablet are untouched. */
  .cta-band__actions .cta-annual-btn {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: clamp(0.5rem, 2.5vw, 1.125rem);
    padding-right: clamp(0.5rem, 2.5vw, 1.125rem);
    font-size: clamp(0.68rem, 2.9vw, 0.8125rem);
    letter-spacing: 0.015em;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    text-align: center;
  }
}

/* ---- Responsive: frames get tighter on small screens ---- */
@media (max-width: 768px) {
  .ed-frame {
    padding: 0.6rem;
  }
  .ed-tag-photo {
    top: 0.75rem;
    left: 0.75rem;
    font-size: 0.58rem;
    padding: 0.35rem 0.75rem;
  }
  .ed-row {
    grid-template-columns: 68px 1fr;
    row-gap: 0.75rem;
  }
  .ed-row__thumb { width: 68px; height: 68px; }
  .ed-row__foot { grid-column: 1 / -1; padding-left: calc(68px + 1rem); }
}

/* ============================================================
   HOMEPAGE — "The Venvity System" section, MOBILE-ONLY redesign
   (≤767px). Approved-mockup editorial layout showing only 3
   featured products (Annual System, Reset Kit, Focus Modules).

   Scope & safety notes:
   - Every rule below is scoped either to a class that only exists in
     index.html's .ed-system-intro section (.ed-feature__num-mobile,
     .ed-feature__mobile-foot, .ed-system-intro__head-mobile,
     .ed-index__mobile-cta, .ed-index__desktop-cta, .ed-row--hide-
     mobile) or to a descendant selector rooted at
     .ed-system-intro / .ed-index, so nothing here can leak onto
     system.html or shop.html (which load this same stylesheet) or
     onto any other component.
   - This is a NEW, dedicated max-width:767px breakpoint. It does not
     edit or remove the pre-existing @media (max-width: 900px) rule
     for .ed-feature above, or the pre-existing @media (max-width:
     768px) "frames get tighter" rule for .ed-row above — those
     continue to govern the 768–899px tablet range exactly as before.
     Below 767px, the higher-specificity descendant selectors used
     here (e.g. ".ed-index .ed-row") win the cascade regardless of
     source order, so there is no ambiguity with those older rules.
   - Quarterly Reset and Seasonal Reset are NOT removed from the DOM —
     only visually hidden on this homepage section at ≤767px via
     .ed-row--hide-mobile. They remain fully present/linked/priced on
     system.html, shop.html, their own product pages, and cart logic.
   - No global classes (.btn, .title, .label, .product-card__price,
     .mt-*, .divider, .section, .container, etc.) are edited directly;
     every override below targets these only through a scoped
     descendant selector.
   ============================================================ */

/* Mobile-only elements: hidden by default (desktop/tablet never see
   this duplicate copy or these mobile-specific rows), shown only
   inside the max-width:767px query below. */
.ed-system-intro__head-mobile,
.ed-feature__num-mobile,
.ed-feature__mobile-foot,
.ed-index__mobile-cta {
  display: none;
}

@media (max-width: 767px) {

  /* ---- Section intro: centered eyebrow / heading / supporting text,
     matching the approved mockup. Desktop copy (.ed-system-intro__head)
     is hidden here only; its text/markup is untouched. ---- */
  .ed-system-intro__head {
    display: none;
  }

  /* FIX: the standalone desktop eyebrow ("One ecosystem. Five tools.")
     is a separate sibling element, not nested inside
     .ed-system-intro__head, so hiding .ed-system-intro__head alone
     never hid it — it was rendering above the new mobile-only
     "THE VENVITY SYSTEM" eyebrow, duplicating the section intro on
     mobile. Hidden here only, via its own dedicated scoped class;
     desktop/tablet keep this eyebrow exactly as before. */
  .ed-system-intro__eyebrow-desktop {
    display: none;
  }

  .ed-system-intro__head-mobile {
    display: block;
    text-align: center;
    max-width: 100%;
    margin-bottom: clamp(1.75rem, 6vw, 2.5rem);
  }

  .ed-system-intro__head-mobile .ed-kicker {
    margin-bottom: 0.85rem;
  }

  .ed-system-intro__head-mobile .headline {
    font-size: clamp(1.5rem, 6.5vw, 1.85rem);
  }

  .ed-system-intro__head-mobile .subtitle {
    margin-top: 0.5rem;
    font-size: 0.9rem;
  }

  /* Tighter section padding on mobile only — scoped to this section's
     own selector, the shared .section rule elsewhere is untouched. */
  .ed-system-intro {
    padding-top: clamp(2.5rem, 9vw, 3.5rem);
    padding-bottom: clamp(2.5rem, 9vw, 3.5rem);
  }

  /* ---- Product 1 — Venvity Annual System (.ed-feature) becomes a
     vertical editorial card matching the other two products below. ---- */
  .ed-system-intro .ed-feature {
    display: block;
    padding-bottom: clamp(1.5rem, 5vw, 1.85rem);
    border-bottom: 1px solid var(--border-light);
  }

  .ed-system-intro .ed-feature__photo {
    margin-bottom: 1.1rem;
  }

  .ed-system-intro .ed-feature .ed-frame {
    padding: 0;
    box-shadow: none;
    background: none;
    border-radius: 0;
  }

  .ed-system-intro .ed-feature .ed-frame__img-wrap {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-md);
  }

  /* No overlay pill on mobile — the number+role now lives as plain
     text under the image, matching Reset Kit / Focus Modules below. */
  .ed-system-intro .ed-feature .ed-tag-photo {
    display: none;
  }

  .ed-system-intro .ed-feature__content {
    max-width: 100%;
  }

  .ed-system-intro .ed-feature .ed-mark {
    display: none;
  }

  .ed-feature__num-mobile {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 0.4rem;
  }

  .ed-system-intro .ed-feature .title {
    font-size: 1.3rem;
  }

  /* Desktop price/action block replaced by the compact mobile row
     below — same price, same links, just a different presentation. */
  .ed-system-intro .ed-feature .system-card__price,
  .ed-system-intro .ed-feature .system-card__actions {
    display: none;
  }

  .ed-feature__mobile-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: nowrap;
    margin-top: 1.1rem;
  }

  .ed-feature__mobile-foot .product-card__price {
    font-size: 1.1rem;
    flex-shrink: 0;
  }

  .ed-feature__mobile-foot .btn {
    min-height: 44px;
    padding: 0.6rem 1.05rem;
    font-size: clamp(0.66rem, 2.6vw, 0.78rem);
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  /* ---- Products 2 & 3 — Reset Kit / Focus Modules (.ed-row) become
     the same large-image vertical editorial card. Higher-specificity
     descendant selectors (".ed-index .ed-row" etc.) guarantee these
     win over the older, lower-specificity 768px ".ed-row" rules
     above regardless of source order. ---- */
  .ed-index .ed-row {
    display: block;
    grid-template-columns: none;
    padding: clamp(1.5rem, 5vw, 1.85rem) 0;
  }

  .ed-index .ed-row__thumb {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    margin-bottom: 1.1rem;
    border-radius: var(--radius-md);
  }

  .ed-index .ed-row__body {
    min-width: 0;
    margin-bottom: 0;
  }

  .ed-index .ed-row__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: nowrap;
    grid-column: auto;
    padding-left: 0;
    margin-top: 1.1rem;
  }

  .ed-index .ed-row__foot .product-card__price {
    font-size: 1.1rem;
    flex-shrink: 0;
  }

  .ed-index .ed-row__foot .btn {
    min-height: 44px;
    padding: 0.6rem 1.05rem;
    font-size: clamp(0.66rem, 2.6vw, 0.78rem);
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  /* Adds the "→" required by the mockup's "VIEW →" button purely via
     a CSS-generated pseudo-element — the underlying anchor text
     itself ("View") is left completely unchanged in the HTML, so
     desktop/tablet (where this pseudo-element does not apply, since
     it's declared inside this max-width:767px query) keep the exact
     original label with no risk of a stray arrow character leaking
     into any other context that might reuse this same markup. */
  .ed-index .ed-row__foot .btn::after {
    content: ' →';
  }

  /* Reduce the large desktop gap between the featured card and the
     index list — spacing stays generous but controlled on mobile. */
  .ed-system-intro .ed-index {
    margin-top: 0;
  }

  /* Hide Quarterly Reset / Seasonal Reset ONLY inside this homepage
     section at this breakpoint. They remain in the DOM (so no broken
     structure/anchors) and remain fully visible/functional on
     system.html, shop.html, their own product pages and the cart —
     this rule only ever applies within .ed-system-intro on index.html.

     FIX: the rule above, ".ed-index .ed-row { display: block; ... }",
     is a two-class-selector (specificity 0,2,0) that was unintentionally
     beating the one-class ".ed-row--hide-mobile { display: none; }"
     (specificity 0,1,0) regardless of source order, so Quarterly Reset
     and Seasonal Reset kept rendering (as full editorial cards) even
     though they were "hidden". Using the equally/more-specific
     ".ed-index .ed-row--hide-mobile" selector here guarantees this
     hide rule always wins the cascade against ".ed-index .ed-row". */
  .ed-index .ed-row--hide-mobile {
    display: none;
  }

  /* ---- Mobile-only full-width primary CTA, placed right after
     Focus Modules (product 3) in source order. ---- */
  .ed-index__mobile-cta {
    display: block;
    margin-top: 0.25rem;
  }

  .ed-index__mobile-cta .btn {
    min-height: 48px;
  }

  /* The desktop/tablet "Understand the Full System" link is replaced
     on mobile by the CTA above (same destination, system.html). */
  .ed-index__desktop-cta {
    display: none;
  }
}

/* ============================================================
   HOMEPAGE — Mobile-only vertical spacing/flow refinement
   (≤767px). Two things happen in this dedicated block:

   1) SUB-TASK 1 — reorder "The Honest Truth" text block before
      the Reset Kit photo. The photo (.ed-problem__photo) has an
      empty alt="" in index.html (fully decorative — confirmed in
      the markup), so reordering only the *visual* position via
      CSS `order` (DOM order is left completely untouched) creates
      no screen-reader/visual mismatch: assistive tech ignores an
      alt="" image regardless of where it sits, so the effective
      reading order already matches the new visual order. This
      avoids an unnecessary HTML rewrite. The pre-existing
      @media (max-width: 900px) rule for .ed-problem__grid (photo
      max-width 320px, centered, 1-column stack) is NOT edited —
      it continues to govern the 768–900px tablet range with the
      ORIGINAL photo-first order, exactly as before. This new
      ≤767px query only adds `order`, so tablet/desktop are 100%
      unaffected.

   2) SUB-TASKS 2–4 — remove excessive, redundant mobile spacing
      at several section transitions. Every section touched below
      (.ed-problem, .pillars-section, .challenge-section,
      .home-faq-section) was still using the shared `.section`
      class's desktop-tuned padding (clamp(4rem, 8vw, 8rem) — a
      flat 64px top+bottom on every mobile width) because no
      homepage mobile override existed for them. That un-reduced
      64px, stacking with the next/previous section's own padding
      (and, in the Problem section's case, with .quote-block's own
      2.5rem/40px bottom margin) is what produced the reported
      "almost empty screen" gaps. The fix reuses the exact
      restrained tier already approved for .ed-system-intro in the
      Task Q mobile redesign (clamp(2.5rem, 9vw, 3.5rem) ≈ 40–56px)
      for top padding and general section padding, with a tighter
      clamp(1.5rem, 5vw, 2rem) ≈ 24–32px specifically for the two
      bottom-padding values that sit directly against the two
      flagged CTAs ("THE VENVITY SYSTEM" and "WHERE TO START"), so
      the whole page keeps one consistent, restrained rhythm
      instead of ad hoc values.

   Scope & safety notes:
   - `.section` itself (css/style.css) is NEVER edited — it is
     shared by every page on the site. Every selector below is a
     more specific / later-loaded, homepage-only class
     (.ed-problem, .pillars-section, .challenge-section,
     .home-faq-section — none of which exist on system.html or
     shop.html) or a scoped descendant selector
     (`.ed-problem .quote-block`) so the shared `.quote-block`
     class (also used on system.html and all 4 product detail
     pages) is likewise never touched directly.
   - No negative margins are used anywhere in this block — every
     fix is a reduction of an existing, identified padding/margin
     source.
   - The hero, the dark manifesto banner (.intro-strip), the
     approved 3-product mobile section (.ed-system-intro and its
     Task Q rules above), the pillar cards' own design, the
     "Where to start" banner's image/overlay/typography/buttons,
     the free challenge section's internal layout, the FAQ
     accordion, and the footer are NOT redesigned — only the
     outer section wrapper's top/bottom padding is adjusted where
     it was clearly excessive.
   ============================================================ */
@media (max-width: 767px) {

  /* ---- Sub-task 1: visual reorder only (DOM order unchanged,
     safe per the empty alt="" reasoning above). ---- */
  .ed-problem__text {
    order: 1;
  }

  .ed-problem__photo {
    order: 2;
  }

  /* ---- Sub-task 2 (part 1): Honest Truth section. Top padding
     (space after the dark manifesto banner) uses the same
     restrained tier as the approved .ed-system-intro block.
     Bottom padding is reduced further since it directly stacks
     with .quote-block's own bottom margin (below) and with
     .ed-system-intro's own top padding on the section after it. */
  .ed-problem {
    padding-top: clamp(2.5rem, 9vw, 3.5rem);
    padding-bottom: clamp(1.5rem, 5vw, 2rem);
  }

  /* ---- Sub-task 2 (part 2): .quote-block is shared sitewide, so
     it is only ever adjusted through this descendant selector,
     matching just the quote box inside this homepage section.
     Only the BOTTOM margin (which stacks with .ed-problem's own
     bottom padding above) is reduced; the TOP margin — the normal
     internal spacing below the 2nd paragraph — is left at its
     original 2.5rem/40px and is not touched. */
  .ed-problem .quote-block {
    margin-bottom: 1.5rem;
  }

  /* ---- Sub-task 3 + Sub-task 4: Pillars section. Same shared
     .section desktop padding was leaking onto mobile here too,
     stacking with .ed-start-banner's own top padding to create
     the large gap before "WHERE TO START". The "Where to start"
     banner itself (.ed-start-banner) is not modified — its image,
     overlay, typography and buttons stay exactly as approved;
     only the padding of the PRECEDING section is reduced. */
  .pillars-section {
    padding-top: clamp(2.5rem, 9vw, 3.5rem);
    padding-bottom: clamp(1.5rem, 5vw, 2rem);
  }

  /* ---- Sub-task 4: full-page audit — the same shared .section
     desktop padding was also still leaking onto mobile at the
     Free Challenge and FAQ section boundaries, stacking with the
     neighbouring section's own padding at every transition.
     Brought in line with the same restrained tier used throughout
     this block. Only the section wrapper's own padding changes —
     no internal content (photo, form, benefits list, accordion
     items, footer link) is touched. */
  .challenge-section {
    padding-top: clamp(2.5rem, 9vw, 3.5rem);
    padding-bottom: clamp(2.5rem, 9vw, 3.5rem);
  }

  .home-faq-section {
    padding-top: clamp(2.5rem, 9vw, 3.5rem);
    padding-bottom: clamp(2.5rem, 9vw, 3.5rem);
  }
}

/* ============================================================
   HOMEPAGE — Mobile-only removal of the first Reset Kit
   lifestyle photograph (≤768px).

   Target: the dedicated image wrapper `.ed-problem__photo`
   inside the "Honest Truth" section (.ed-problem), which holds
   the tablet + candle lifestyle photo
   (images/product-reset-kit-editorial.png) via
   .ed-frame.ed-frame--flush > .ed-frame__img-wrap.ed-ratio-tall
   > img. This wrapper class is unique to this single section of
   index.html — it is NOT reused by the System Intro's Reset Kit
   row thumb, nor by system.html/shop.html/product pages, which
   each use their own, different wrapper classes for the same
   image asset. Hiding `.ed-problem__photo` here therefore cannot
   affect any other Reset Kit image on the site.

   `display: none` removes the whole wrapper (frame, img-wrap and
   <img> inside it) from the mobile render tree, not just the
   <img> tag, so no empty figure/frame is left behind. Because
   `.ed-problem__grid` is a CSS grid whose `gap` only applies
   between tracks that actually render, hiding this one grid item
   leaves `.ed-problem__text` as the sole rendered track — no
   residual blank gap/row is produced by the grid's own gap value.
   The section's own top/bottom padding (reduced in the mobile
   spacing block above) already provides a controlled, consistent
   gap to the sections before/after, so no extra spacing rule is
   needed here.

   Scope note: this uses `max-width: 768px` (rather than reusing
   the 767px block above) to precisely match "mobile widths up to
   768px" as requested. Desktop/tablet (>768px), including the
   existing @media (max-width: 900px) tablet rules for
   `.ed-problem__photo` above, are completely unaffected — they
   sit outside this query and keep rendering the photo exactly as
   before. DOM order in index.html is not changed; only visual
   rendering on mobile is affected.
   ============================================================ */
@media (max-width: 768px) {
  .ed-problem__photo {
    display: none;
  }
}