/* Hero: version 6 "Light & heavy" (chosen by Alai, V2.8 round 8, 24 Oct 2026). */

/* ---------- Shared ---------- */
body.home main > .hero.hx{
  position: relative;
  overflow: hidden;
  min-height: clamp(600px, 88vh, 880px);
  display: flex;
  align-items: center;
  padding: clamp(3rem, 7vw, 6rem) 0 calc(clamp(3rem, 7vw, 6rem) + 2.4rem);
}
body.home .hx > .container{ position: relative; z-index: 1; width: min(var(--container), calc(100% - 2rem)); }
body.home .hx-photo{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%;
  z-index: 0;
}
/* Every photo fades into the page colour at the bottom, where the trust strip sits */
body.home .hx > .hx-photo::after{
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 22%;
  background: linear-gradient(0deg, #f8fef5 0%, rgba(248,254,245,0) 100%);
}
body.home .hx .hx-title{
  margin: .6rem 0 1rem;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(2.5rem, 5.2vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  text-shadow: none;
  background: none;
  padding: 0;
}
body.home .hx-eyebrow{
  display: inline-block;
  margin: 0;
  padding: .38rem .8rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(255,255,255,.88);
  color: var(--aya-green-dark);
}
body.home .hx-intro{ margin: 0 0 1.5rem; max-width: 36rem; font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.6; }
body.home .hx-ctas{ display: flex; flex-wrap: wrap; gap: .75rem; }
body.home .hx-ctas .btn{ padding: .95rem 1.6rem; font-size: 1.02rem; }

body.home .hx-stars{ display: inline-flex; gap: 2px; }
body.home .hx-stars svg{ width: 18px; height: 18px; fill: var(--sun); display: block; }
body.home .hx-review{ margin: 0; }
body.home .hx-review blockquote{ margin: .4rem 0 .35rem; font-style: italic; line-height: 1.45; }
body.home .hx-review figcaption{ font-size: .85rem; font-weight: 600; }
body.home .hx-review a,
body.home .hx-review-line a,
body.home .hx-who a{ color: inherit; text-decoration: none; border-bottom: 1.5px solid rgba(255,217,102,.8); }

/* Photo shade: dark at the bottom, where the words are */
body.home .hx-shade-bottom::before{ content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18,34,20,.82) 10%, rgba(18,34,20,.35) 50%, rgba(18,34,20,.05) 85%); }

/* White text, sun-coloured main button, light outline button */
body.home .hx-6, body.home .hx-6 .hx-title{ color: #fff; }
body.home .hx-6 .hx-intro{ color: rgba(255,255,255,.92); }
body.home .hx-6 .btn-ghost{ background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.55); }
body.home .hx-6 .btn-primary{ background: var(--sun) !important; color: #2c4220 !important; border-color: var(--sun) !important; }

/* Review as a glass card */
body.home .hx-review-glass{
  margin-top: 1.6rem;
  max-width: 30rem;
  padding: .9rem 1.1rem;
  border-radius: 16px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
}

/* ---------- 6 Light and heavy ---------- */
body.home main > .hero.hx-6{ align-items: flex-end; }
body.home .hx-6 .hx-inner{ display: flex; align-items: flex-end; justify-content: space-between; gap: 2.5rem; }
body.home .hx-6 .hx-copy{ max-width: 700px; }
body.home .hx-6 .hx-title{ margin-bottom: 1rem; }
/* Round 8: the headline in Aya's brand font (Chewy), white, no highlight blocks.
   "Come home" a little smaller and softer, "to yourself." big. */
body.home .hx-6 .hx-title{
  font-family: var(--font-title);
  font-weight: 400;
  letter-spacing: .005em;
  line-height: .98;
  text-shadow: 0 3px 18px rgba(10,24,12,.35);
}
body.home .hx-thin{ display: block; font-size: .72em; color: rgba(255,255,255,.9); }
body.home .hx-bold{ display: block; font-size: 1.12em; }

body.home .hx-6 .hx-review-glass{ flex: 0 1 340px; margin: 0 0 .4rem; }

/* ---------- Tablets and phones ---------- */
@media (max-width: 980px){
  body.home .hx-6 .hx-inner{ flex-direction: column; align-items: flex-start; }
  body.home .hx-6 .hx-review-glass{ flex: none; width: 100%; max-width: 30rem; }
}
@media (max-width: 640px){
  body.home .hx .hx-title{ font-size: clamp(2.4rem, 11vw, 3.2rem); }
  body.home .hx-eyebrow{ font-size: .68rem; letter-spacing: .08em; }
}

/* Readability of the intro on bright parts of the photo */
body.home .hx-6 .hx-intro{ text-shadow: 0 1px 2px rgba(10,24,12,.45), 0 2px 14px rgba(10,24,12,.4); }
@media (max-width: 980px){
  body.home .hx-shade-bottom::before{ background: linear-gradient(0deg, rgba(18,34,20,.88) 15%, rgba(18,34,20,.5) 55%, rgba(18,34,20,.1) 90%); }
}

/* ============================================================
   V2.8 round 13 (24 Oct 2026): hero style 7 "Organic", chosen by Alai, with round buttons.
   Main button in the sun-to-mint gradient with an arrow, a soft yellow brush under "to yourself.",
   a mint eyebrow and a leaf-shaped review card.
   ============================================================ */
body.home .hx-6 .hx-bold{
  display: inline;
  background: linear-gradient(transparent 72%, rgba(255,217,102,.55) 72%, rgba(255,217,102,.55) 90%, transparent 90%);
}
body.home .hx-6 .hx-eyebrow{ background: rgba(223,244,224,.95); }
body.home .hx-6 .hx-ctas .btn{ font-weight: 600; transition: transform .2s ease, box-shadow .2s ease; }
body.home .hx-6 .btn-primary{
  background: var(--sun-mint) !important;
  color: #2c4220 !important;
  border-color: transparent !important;
}
body.home .hx-6 .btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(191,230,180,.35); }
body.home .hx-6 .btn-primary::after{ content: "→"; font-weight: 600; transition: transform .2s ease; }
body.home .hx-6 .btn-primary:hover::after{ transform: translateX(3px); }
body.home .hx-6 .hx-review-glass{ border-radius: 26px 8px 26px 8px; border-color: rgba(223,244,224,.45); }

/* ============================================================
   V2.9 (24 Oct 2026): audit fixes
   ============================================================ */
/* A small line under the buttons: when, how much, what happens next */
body.home .hx-6 .hx-meta{
  margin: .95rem 0 0;
  font-size: .92rem;
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 8px rgba(10,24,12,.65);
}
/* "See what's included": a darker see-through button, so it reads clearly on the photo */
body.home .hx-6 .btn-ghost{
  background: rgba(16,30,18,.45);
  border-color: rgba(255,255,255,.8);
  color: #fff;
}
body.home .hx-6 .btn-ghost:hover{ background: rgba(16,30,18,.6); }
/* Phones: a calmer label, and no review card, so the page content starts sooner */
@media (max-width: 640px){
  body.home .hx-6 .hx-eyebrow{ font-size: .78rem; letter-spacing: .06em; }
  body.home .hx-6 .hx-eyebrow-more{ display: none; } /* the trust strip right below says it */
  body.home .hx-review-glass{ display: none; }
  body.home .hx-6 .hx-meta{ font-size: .85rem; }
}