/**
 * Harvest — Home (task 1).
 *
 * Scoped to `.cms-index-index` (the real core body class for cms/index/index) AND
 * our own `.hrv-page-home` hook, so nothing here can bleed onto another route.
 * Colours are --hrv-* tokens only (no hex), so all 5 palettes work with no rebuild.
 *
 * Comp: design/store-theme/03-harvest-food/colors/<palette>/pages/Home.dc.html
 *   hero split           grid-template-columns: 1.1fr 1fr   (copy-left)
 *   BOTH bands           grid-template-columns: 1.1fr 1fr   (copy-left — NOT mirrored)
 *   recipe card          grid-template-columns: 1fr 1.1fr   (the comp's ONLY media-left
 *                        block, and the sole source of its single `1fr 1.1fr`)
 *   Fresh this week / trust row / Bestsellers   repeat(4, 1fr)
 *   aisles               display:flex; gap:18px; overflow-x:auto  (a SCROLL STRIP,
 *                        not a 4-up grid)
 *
 * CORRECTED (S7-Home c5). This header said the "This week" band was `1fr 1.1fr
 * (mirrored)` — the exact claim B-3 disproved — and attributed one of the comp's three
 * `repeat(4, 1fr)` rows to the aisles, which are a flex scroll strip. The corrected
 * rule has been 89 lines below since B-3; the file was carrying the fix and the
 * original error at once, with the error at the top where a reader looks first.
 * A CORRECTION THAT DOES NOT REACH THE HEADER HAS NOT REACHED THE READER.
 *
 * Section classes (hrv-home-*) are OUR OWN markup contract, emitted by the CMS
 * content seed for this page — they are not core Magento classes. The product grid
 * is the one exception: it reuses the NATIVE `.products-grid .product-item-*`
 * markup so real catalog data renders through the shared card component.
 */

/* `.hrv-home-section` handles VERTICAL RHYTHM ONLY. It must NOT re-declare
   max-width/padding: `.page-main` (see components/_base.css) already caps the
   container at --hrv-container with --hrv-page-pad gutters, so repeating them here
   produced a 64px double gutter and left every Home section visibly narrower than
   the header and footer. The container is the shell's job, not the section's. */
.cms-index-index.hrv-page-home .hrv-home-section {
  margin: 0;
}
.cms-index-index.hrv-page-home .hrv-home-section + .hrv-home-section {
  margin-top: 56px;
}
.cms-index-index.hrv-page-home .hrv-home-eyebrow {
  font-family: var(--hrv-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hrv-accent-2);
  margin: 0 0 8px;
}
.cms-index-index.hrv-page-home .hrv-home-title {
  font-family: var(--hrv-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--hrv-text);
  margin: 0 0 14px;
}

/* ── 1. Hero split (1.1fr 1fr) ─────────────────────────────────────────────── */
.cms-index-index.hrv-page-home .hrv-home-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  align-items: center;
  background: var(--hrv-surface);
  border: 1px solid var(--hrv-border);
  border-radius: var(--hrv-radius);
  padding: 40px;
}
.cms-index-index.hrv-page-home .hrv-home-hero .hrv-home-title {
  font-size: 44px;
  line-height: 1.08;
}
.cms-index-index.hrv-page-home .hrv-home-hero-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--hrv-radius);
  overflow: hidden;
  background: var(--hrv-accent-tint);
}
.cms-index-index.hrv-page-home .hrv-home-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------------------------------------------------------------------------
   EMPTY MEDIA FRAMES — striped, matching the comp.

   S7 c7 measured all 12 media boxes as empty: --hrv-accent-tint on white is
   contrast 1.077, i.e. functionally invisible. That reading is correct.

   The remedy it implied — generate editorial photography — would have been WRONG,
   and I nearly spent an hour doing it. The Wheat Home artboard contains ZERO <img>,
   ZERO background-image, ZERO url(), ZERO <svg>, and TWENTY repeating-linear-
   gradients: THE COMP HAS NO PHOTOGRAPHY EITHER. It draws visible striped
   placeholders. Shipping real photos here would have DEVIATED from the artboard
   while looking like an improvement.

   So the defect was never "no imagery" — it was that our placeholder is invisible
   where the comp's is visible. Recipe lifted verbatim from the comp (45deg,
   10%/4% accent over surface, 12px/24px).

   I also have to correct myself: I recorded that this was "already fixed on T2 and
   Home never got the fix." False. T2's frames are empty on purpose too, and its own
   template says so, citing Home as the pattern it followed. Neither page missed
   anything. That claim reached waiting-on.txt and PR #2065's body before I checked it.

   :empty means the stripes vanish the moment a real <img> is added — the placeholder
   cannot outlive the thing it stands in for.
   --------------------------------------------------------------------------- */
.cms-index-index.hrv-page-home .hrv-home-hero-media:empty,
.cms-index-index.hrv-page-home .hrv-home-band-media:empty,
.cms-index-index.hrv-page-home .hrv-home-aisle-media:empty,
.cms-index-index.hrv-page-home .hrv-home-recipe-media:empty {
  background-image: repeating-linear-gradient(
    45deg,
    color-mix(in oklab, var(--hrv-accent) 10%, var(--hrv-surface)),
    color-mix(in oklab, var(--hrv-accent) 10%, var(--hrv-surface)) 12px,
    color-mix(in oklab, var(--hrv-accent) 4%, var(--hrv-surface)) 12px,
    color-mix(in oklab, var(--hrv-accent) 4%, var(--hrv-surface)) 24px
  );
}
.cms-index-index.hrv-page-home .hrv-home-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

/* ── 2/3. Feature bands ("This week", "Boxes & subscriptions") ─────────────── */
.cms-index-index.hrv-page-home .hrv-home-band {
  display: grid;
  /* CORRECTED (S7-Home B-3). This read `1fr 1.1fr` with the comment "mirrored vs the
     hero, per the comp" — and the comp says the opposite. Counted in
     colors/Wheat/pages/Home.dc.html: THREE `1.1fr 1fr` against ONE `1fr 1.1fr`, and
     every hero slide is copy-left / media-right. So the DEFAULT band was the inverted
     one, and only a band opting into --reverse happened to match the artboard.
     The old comment did not merely drift from the code; it cited the comp as authority
     for the one thing the comp contradicts. A CITATION IS NOT A CHECK.

     THIS RULE ALONE DOES NOT SET ORIENTATION, and I proved that the hard way. After
     swapping the ratio here I re-measured and the olive-oil band's media was STILL at
     x=138 — it had only grown from 534px to 588px. grid-template-columns sizes the
     COLUMNS; which element lands in which column is DOM order, set in
     HarvestHomePage::band() by `($reverse ? $media . $copy : $copy . $media)`.
     The ratio below is correct for the comp (leading column 1.1fr = the copy), but the
     orientation fix is in the PHP. Change both together or neither. */
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  align-items: center;
  background: var(--hrv-surface);
  border: 1px solid var(--hrv-border);
  border-radius: var(--hrv-radius);
  padding: 32px;
}
.cms-index-index.hrv-page-home .hrv-home-band--reverse {
  /* Now genuinely the reversed variant: media-left / copy-right. It previously held
     `1.1fr 1fr`, which is the comp's DEFAULT — so the two rules were swapped and the
     modifier named --reverse was the only one rendering the artboard's orientation. */
  grid-template-columns: 1fr 1.1fr;
}
.cms-index-index.hrv-page-home .hrv-home-band .hrv-home-title {
  font-size: 28px;
}
.cms-index-index.hrv-page-home .hrv-home-band-media {
  /* 4/3, matching the comp's band media (S7-Home B-3). Shipped 3/2, which is a
     different shape, not a rounding of it. */
  aspect-ratio: 4 / 3;
  border-radius: var(--hrv-radius);
  overflow: hidden;
  background: var(--hrv-accent-tint);
}

/* ── 4. Shop by aisle — 4-up tiles ─────────────────────────────────────────── */
.cms-index-index.hrv-page-home .hrv-home-aisles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hrv-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.cms-index-index.hrv-page-home .hrv-home-aisle {
  display: block;
  background: var(--hrv-surface);
  border: 1px solid var(--hrv-border);
  border-radius: var(--hrv-radius);
  padding: 18px;
  text-decoration: none;
  color: var(--hrv-text);
  font-family: var(--hrv-font-display);
  font-weight: 600;
  font-size: 15px;
}
.cms-index-index.hrv-page-home .hrv-home-aisle:hover {
  border-color: var(--hrv-accent);
}
.cms-index-index.hrv-page-home .hrv-home-aisle:focus-visible {
  outline: 2px solid var(--hrv-focus-ring);
  outline-offset: 2px;
}
/* Comp aisle tiles are 96px CIRCLES, centred over the label — not square cards. */
.cms-index-index.hrv-page-home .hrv-home-aisle {
  text-align: center;
}
.cms-index-index.hrv-page-home .hrv-home-aisle-media {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: var(--hrv-radius-circle);
  overflow: hidden;
  background: var(--hrv-accent-tint);
  margin: 0 auto 12px;
}
.cms-index-index.hrv-page-home .hrv-home-aisle-label {
  display: block;
}

/* ── 5. Fresh this week — native product grid, 4-up (real catalog data) ─────── */
/* `.products.list.items` is the CATEGORY listing's class — a CMS widget does not
   emit it. `Magento\CatalogWidget\Block\Product\ProductsList` renders
   `.product-items.widget-product-grid`, so that is the selector that must match
   here; the category class is kept only for a non-widget block render. */
.cms-index-index.hrv-page-home .widget-product-grid,
.cms-index-index.hrv-page-home .products-grid .products.list.items,
.cms-index-index.hrv-page-home .products-grid .product-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hrv-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* N-1: these resets were scoped ONLY under .products-grid, but Home's Bestsellers
   block (templates/home/bestsellers.phtml) emits `ol.product-items
   .widget-product-grid` with NO .products-grid ancestor — so the C2-1 dead-band
   fix did NOT reach it, while Magento's generated 240/300 container ratio DID.
   The comment above claimed a systemic fix that was half-inert. Verified by
   reading what the template actually emits, not by assuming the scope. */
/* Blank floats each item and gives it a percentage width — both must go. */
/* These two selectors are (0,4,0) and they LOSE the width battle. Blank's styles-l.css
   declares, inside @media (min-width:1024px):
       .page-layout-1column .block.widget .products-grid .product-item { width: 18.4% }
   which is (0,5,0). MEASURED consequence before the fix: every card computed 53.72px
   inside a 292px track — a ratio of 0.184, i.e. 82% of every track empty, with the image
   box collapsed to 24x24, "Creator Station 17" wrapped into a 24px-wide vertical ribbon,
   and a 132px Add-to-Cart spilling out of a 54px card. Broken at 768 and >=1024; fine at
   375 only because Blank's rule is MEDIA-GATED at min-width:768.
   CORRECTED (S7-Home c5): this said "and this file loads later". The order is the
   opposite — _home.css is head link #4, styles-l.css is #5, so Blank loads LATER.
   I had the mechanism backwards and still reached the right conclusion, which is worse
   than being plainly wrong: anyone re-deriving this on another page would inherit the
   false reason and mis-predict where the rule applies.
   `float: none` DID win here (Blank's float rule is only (0,2,0)) — which is exactly why
   reading this block looks correct. PROPERTIES IN THE SAME DECLARATION BLOCK DO NOT SHARE
   A FATE; each one loses or wins against whatever else targets it.
   Kept as-is because Bestsellers' grid has NO .block.widget ancestor, so the
   Blank-shaped selector below cannot reach it. */
.cms-index-index.hrv-page-home .products-grid .product-item,
.cms-index-index.hrv-page-home .widget-product-grid .product-item {
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
}

/* Matches Blank's own shape and adds the two body classes, so (0,7,0) beats its (0,5,0)
   without !important. Scoped to this page; it must be re-derived per page rather than
   copied blindly, because the winning vendor selector differs by layout. */
.cms-index-index.hrv-page-home.page-layout-1column .block.widget .products-grid .product-item,
.cms-index-index.hrv-page-home.page-layout-1column .block.widget .widget-product-grid .product-item {
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
}
/* SYSTEMIC FIX carried from T3's C2-1. The comment above this block claimed Blank
   sizes the media with `height: 0` + percentage padding. THIS MAGENTO DOES NOT — a
   render on disk (.cg/t3.html) shows
     .product-image-container-NNN { width:240px; height:auto; aspect-ratio:240/300 }
   with the padding hack only inside @supports not (aspect-ratio: auto). Resetting the
   wrapper to 1/1 while leaving the CONTAINER at 240/300 leaves a ~25% dead band under
   every tile. This page shipped CLOSED with that defect, and T3 inherited both the
   omission and the comment from here — which is exactly how an unmeasured claim
   propagates. The container is now pinned to the same 1/1 the wrapper already
   declares, so the two agree instead of fighting. */
.cms-index-index.hrv-page-home .products-grid .product-image-container,
.cms-index-index.hrv-page-home .widget-product-grid .product-image-container {
  display: block;
  /* NO !important (M3-5, propagated here from _t3.css). The old reason -- "beats
     Magento's inline style=width:NNNpx" -- is fiction: the capture contains zero
     `style="width:`. The width comes from a generated per-product class rule at
     (0,1,0) against this selector's (0,3,0), so a plain declaration already wins. */
  width: 100%;
  aspect-ratio: 1 / 1;      /* beats Magento's per-product 240/300 container ratio */
  height: auto;
}
.cms-index-index.hrv-page-home .products-grid .product-image-wrapper,
.cms-index-index.hrv-page-home .widget-product-grid .product-image-wrapper {
  padding: 0;   /* m4-2: (0,3,0)+ beats the generated (0,2,1); no !important needed, and !important here would also break the @supports-not padding fallback */
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
  overflow: hidden;
  border-radius: var(--hrv-radius-sm);
}
.cms-index-index.hrv-page-home .products-grid .product-image-photo,
.cms-index-index.hrv-page-home .widget-product-grid .product-image-photo {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 6. Trust row — 4-up ───────────────────────────────────────────────────── */
/* auto-fit, NOT a fixed repeat(4). The artboard states FOUR trust claims; an earlier
   revision wrongly dropped one and this comment wrongly said "three". auto-fit keeps
   the row correct for whatever the seed provides, so a miscount can never leave an
   empty track again — but the seed must still carry every claim the comp states. */
.cms-index-index.hrv-page-home .hrv-home-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--hrv-gap);
  border-top: 1px solid var(--hrv-border);
  padding-top: 28px;
}
.cms-index-index.hrv-page-home .hrv-home-trust-item {
  font-size: 14px;
  color: var(--hrv-text-muted);
  line-height: 1.6;
}
.cms-index-index.hrv-page-home .hrv-home-trust-item strong {
  display: block;
  font-family: var(--hrv-font-display);
  font-weight: 600;
  color: var(--hrv-text);
  margin-bottom: 4px;
}


/* ── Section head row ("Bestsellers" + "View all →") ───────────────────────── */
.cms-index-index.hrv-page-home .hrv-home-headrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.cms-index-index.hrv-page-home .hrv-home-headrow .hrv-home-title {
  font-size: 22px;   /* comp: section headings are 22px */
  margin-bottom: 0;
}
.cms-index-index.hrv-page-home .hrv-home-viewall {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hrv-accent);
  text-decoration: none;
  white-space: nowrap;
}
.cms-index-index.hrv-page-home .hrv-home-viewall:focus-visible {
  outline: 2px solid var(--hrv-focus-ring);
  outline-offset: 2px;
}

/* ── Recipe-journal card ────────────────────────────────────────────────────── */
.cms-index-index.hrv-page-home .hrv-home-recipe {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 28px;
  align-items: center;
  background: var(--hrv-surface);
  border: 1px solid var(--hrv-border);
  border-radius: var(--hrv-radius);
  padding: 32px;
}
.cms-index-index.hrv-page-home .hrv-home-recipe .hrv-home-title {
  font-size: 28px;
}
.cms-index-index.hrv-page-home .hrv-home-recipe-media {
  /* 4/3 (S7-Home c4 SHOULD-FIX-3). The comp's four 4/3 frames are 3 hero slides + the
     recipe card. My earlier 3/2 -> 4/3 correction reached the bands and stopped there,
     leaving the recipe on the value the correction itself declared wrong — the fix and
     the defect shipped in the same file. FIX EVERY SITE THE CORRECTION NAMES. */
  aspect-ratio: 4 / 3;
  border-radius: var(--hrv-radius);
  overflow: hidden;
  background: var(--hrv-accent-tint);
}

/* ── Newsletter band (inverted: comp sets its text to the bg colour) ────────── */
.cms-index-index.hrv-page-home .hrv-home-newsletter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  background: var(--hrv-band);
  color: var(--hrv-band-text);
  border-radius: var(--hrv-radius);
  padding: 32px;
}
.cms-index-index.hrv-page-home .hrv-home-newsletter .hrv-home-title {
  color: var(--hrv-band-text);
  font-size: 22px;
  margin-bottom: 6px;
}
/* The lede sits on the SAME dark band as the title above, and was left on the
   light-surface --hrv-text-muted: contrast 2.16, against the artboard's own 5.29.
   The dark-band correction reached the title and stopped one selector short — the
   third time this file has produced exactly that defect (the 767 media block missed
   .hrv-home-recipe/.hrv-home-newsletter; the band comment survived its own
   disproof). WHEN YOU INVERT A CONTAINER, INVERT EVERY TEXT ROLE INSIDE IT. */
.cms-index-index.hrv-page-home .hrv-home-newsletter .hrv-home-lede {
  color: var(--hrv-band-text-muted);
}
.cms-index-index.hrv-page-home .hrv-home-newsletter-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cms-index-index.hrv-page-home .hrv-home-newsletter-form .form-control {
  min-width: 220px;
}

/* ── Responsive ────────────────────────────────────────────────────────────────
   Theme scale is 1023 / 767 (no extra breakpoints — see _category.css). The
   dedicated Mobile/Tablet/Desktop tasks own the full sweep; these are the baseline
   reflows so the page never scrolls horizontally at 768 or 375. */
@media (max-width: 1023px) {
  /* `.widget-product-grid` added (S7-Home c4 SHOULD-FIX-2). The BASE rule already
     included it; this media block did not, so the reflow was half-inert — proven by
     cloning the grid outside `.products-grid` at 768 (the exact Bestsellers shape): it
     stayed at 4 tracks x 164px while the real grid correctly went to 2 x 344.5px.
     Latent only because Bestsellers is currently hidden; live the moment a tenant has
     order history. A "systemic" fix applied to the base rule and not to its own media
     query is not systemic. */
  .cms-index-index.hrv-page-home .hrv-home-aisles,
  .cms-index-index.hrv-page-home .products-grid .products.list.items,
  .cms-index-index.hrv-page-home .products-grid .product-items,
  .cms-index-index.hrv-page-home .widget-product-grid,
  .cms-index-index.hrv-page-home .hrv-home-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  /* TAP TARGETS >= 44px (the mobile task's DoD number), measured at 375 rather than assumed.
     min-height with a flex centre is used instead of height so a label that wraps still grows
     the box rather than overflowing a fixed one. inline-flex keeps these inline where the
     layout expects inline. */
  .hrv-home-viewall { min-height: 44px; display: inline-flex; align-items: center; }

  /* CATEGORY TILES 4 -> 2 -> 1, the mobile task's own reflow line. The 4->2 step already
     existed in the <=1023 block; the 2->1 step did not, so 375 measured 2 columns and the
     spec says 1. Same selector shape as that rule (0,3,0) in a LATER media block, so it wins
     by order rather than by a specificity bump.

     PRODUCT RAILS SCROLL HORIZONTALLY, also from that line. They were a 2-up grid at 375,
     which is a grid rather than a rail. grid-template-columns must be cleared to `none` or it
     keeps winning over grid-auto-columns and the row never becomes a track flow.

     The scroll is contained: overflow-x on the RAIL, never the page. 11.4 is explicit that
     wide content scrolls inside its own container and <body> never does, so the page-level
     hScroll assertion is what proves this rule rather than the rail's own scrollWidth. */
  .cms-index-index.hrv-page-home .hrv-home-aisles {
    grid-template-columns: minmax(0, 1fr);
  }
  .cms-index-index.hrv-page-home .products-grid .products.list.items,
  .cms-index-index.hrv-page-home .products-grid .product-items,
  .cms-index-index.hrv-page-home .widget-product-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 66%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-bottom: 10px;
  }
  .cms-index-index.hrv-page-home .products-grid .product-items > li,
  .cms-index-index.hrv-page-home .widget-product-grid > li {
    scroll-snap-align: start;
  }
  /* ALL FOUR two-column grids collapse here, not two (S7-Home c5 BLOCKER).
     .hrv-home-recipe (:311) and .hrv-home-newsletter (:336) were never in this block —
     not a regression, they have been absent across all 13 revisions of this file, but
     that is exactly why nobody noticed. MEASURED at 375 on the deployed page:
       newsletter copy column 76.93px — "The Weekly Basket letter" broke into 4 lines of
         roughly one word each, 101px tall
       newsletter form right edge 368.93 vs its band's 359.33 — 9.59px of content sitting
         OUTSIDE the tinted band, on the page background
       recipe media crushed to 119x89; its 28px h2 became 8 lines, 258px tall
     This is the SAME defect class fixed eleven lines above (SF-2: base rule listed a
     selector, the media query did not). I fixed the instance and did not sweep the block.
     WHEN A MEDIA QUERY ENUMERATES SELECTORS, ENUMERATE THE PAGE — not the one you were
     chasing.
     And the probe that missed it: `scrollWidth === 375` was TRUE the whole time. The
     overflow lands inside the 16px page gutter, so it never reaches the viewport. A
     viewport-scroll check cannot see a component-scoped overflow; the assertion that
     catches it is child.right <= parent.right, swept over every element. */
  .cms-index-index.hrv-page-home .hrv-home-hero,
  .cms-index-index.hrv-page-home .hrv-home-band,
  .cms-index-index.hrv-page-home .hrv-home-band--reverse,
  .cms-index-index.hrv-page-home .hrv-home-recipe,
  .cms-index-index.hrv-page-home .hrv-home-newsletter {
    grid-template-columns: 1fr;   /* the section owns its tracks at every breakpoint */
    padding: 24px;
    gap: 20px;
  }
  /* The form's own min-width is what pushed it past the band edge once the column
     narrowed; releasing it is part of the same fix, not a separate tweak. */
  .cms-index-index.hrv-page-home .hrv-home-newsletter .form-control {
    min-width: 0;
    width: 100%;
  }
  .cms-index-index.hrv-page-home .hrv-home-hero .hrv-home-title {
    font-size: 30px;
  }
  /* No horizontal padding here either — `.page-main` owns the gutter. */
  .cms-index-index.hrv-page-home .hrv-home-section + .hrv-home-section {
    margin-top: 36px;
  }
  /* Touch targets ≥44px on the hero CTAs. */
  .cms-index-index.hrv-page-home .hrv-home-ctas .action,
  .cms-index-index.hrv-page-home .hrv-home-ctas .hrv-btn {
    min-height: 44px;
  }
}

/* Section body copy ("lede"). The artboard gives the hero and both feature bands a
   supporting paragraph; an earlier revision shipped headings only, which the S4 gate
   caught as paraphrasing the comp rather than reproducing it. */
.cms-index-index.hrv-page-home .hrv-home-lede {
  font-size: 15px;
  line-height: 1.65;
  color: var(--hrv-text-muted);
  margin: 0 0 4px;
  max-width: 48ch;
}
.cms-index-index.hrv-page-home .hrv-home-hero .hrv-home-lede {
  font-size: 16px;
}
/* Secondary/tertiary CTA sits beside the primary one in the band + recipe blocks. */
.cms-index-index.hrv-page-home .action.tertiary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  margin-left: 14px;
  font-weight: 600;
  color: var(--hrv-accent);
  text-decoration: underline;
}