/* home.css — the home folds (built by build-home.py from content/home.md).
   Mobile-first: one column everywhere, the desktop layout under a single min-width query.
   Components (.card .cta .price .cards-5 .tiles .faq-item .tbl-wrap .nl-form) come from site.css;
   tokens from tokens.css. Motion lives in motion.css only. */

.fold{width:100%;max-width:calc(var(--max-w) + 2*var(--pad-x));margin:0 auto;
  padding:var(--s6) var(--pad-x);border-top:0.0625rem solid var(--line)}
.fold p{max-width:36rem}
.fold img{max-width:100%;height:auto}
.fold-h2{font-size:var(--fs-h2);max-width:30ch;margin-bottom:var(--s3)}   /* family · weight · colour · tracking come from the base h2 rule */
.fold .cta{margin-top:var(--s3)}

/* 1 hero — statement left, the five bottles right (stacked on phones, text first) */
.fold-hero{border-top:0;display:grid;gap:var(--s5);align-items:center;padding-top:var(--s5)}
.fold-hero h1{font-size:var(--fs-hero);line-height:1.05;max-width:20ch}
.hero-sub{margin-top:var(--s3);font-size:var(--fs-lead);line-height:1.6;max-width:32rem}
.hero-price{margin-top:var(--s3);font-size:1.125rem;color:var(--ink-deep)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.fold-hero .cta{margin-top:var(--s4)}
.fold-cards .fold-h2{margin-bottom:var(--s2)}
.hero-soft{margin-top:var(--s4);font-size:var(--fs-small);text-decoration:underline;text-underline-offset:.2em}
.hero-soft:hover{color:var(--brand)}
.hero-bottles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s1);align-items:end}
.hero-bottles img{width:100%}

/* 2 trust bar — the red full-bleed .trustbar (site.css); the fold only spans the page edge to edge */
.fold-trust{max-width:none;padding:0;border-top:0}

/* 3 five personalities — cards come from build-pages.card_html; the accent is the card's thin rule only */
.cards-intro{font-size:var(--fs-lead);line-height:1.6;margin-bottom:var(--s4);max-width:40rem}

/* 4 discovery set band */
.fold-discovery{display:grid;gap:var(--s4);align-items:center}
.disc-copy p{margin-bottom:var(--s2)}
.disc-steps{max-width:34rem;padding-left:1.4rem;display:flex;flex-direction:column;gap:.5rem;margin:var(--s2) 0 var(--s3)}
.disc-steps li::marker{color:var(--brand);font-weight:600}
.disc-stock{font-size:var(--fs-small);color:var(--ink-soft)}
.disc-visual img{width:min(100%,22rem);margin:0 auto}

/* 5 find your scent — centred teaser */
.fold-finder{text-align:center}
.fold-finder .fold-h2,.fold-finder p{margin-left:auto;margin-right:auto}
.fold-finder p{color:var(--ink-soft)}

/* 6 proof (112-tester block; the reviews grid replaces it once reviews exist) */
.fold-proof p{margin-bottom:var(--s2)}
.fold-proof .tbl-wrap{max-width:36rem;margin:var(--s3) 0}

/* 7 why 20% — the table scrolls sideways on phones (site.css .tbl-wrap) */
.fold-why .tbl-wrap{margin:var(--s3) 0}
.fold-why table{min-width:36rem}
.fold-why .tbl-wrap + p{font-size:var(--fs-small);color:var(--ink-soft);max-width:44rem}

/* 8 sets — three tiles (site.css .tiles/.tile) */
.fold-sets .tiles{margin:var(--s3) 0}
.fold-sets .tile p{max-width:none;font-size:var(--fs-small);color:var(--ink-soft)}

/* 9 origins teaser */
.fold-origins{display:grid;gap:var(--s4);align-items:center}
.origins-link{display:inline-block;margin-top:var(--s3);font-size:var(--fs-label);letter-spacing:var(--track-label);
  text-transform:uppercase;text-decoration:underline;text-underline-offset:.2em}
.origins-link:hover{color:var(--brand)}
.origins-visual img{width:min(100%,20rem);margin:0 auto}

/* 10 faq — native <details> (site.css .faq-item) */
.faq-list{max-width:47rem}

/* 11 newsletter + whatsapp opt-in (site.css .nl-form) */
.fold-newsletter{text-align:center}
.fold-newsletter .fold-h2,.fold-newsletter p{margin-left:auto;margin-right:auto}
.fold-newsletter p{color:var(--ink-soft);margin-bottom:var(--s4)}
.fold-newsletter .cta{margin-top:0}


/* desktop */
@media (min-width:53.76rem){
  .fold{padding:var(--s7) var(--pad-x)}
  .fold-hero{grid-template-columns:1.05fr .95fr;gap:var(--s6);min-height:min(36rem,78svh)}
    .fold-discovery,.fold-origins{grid-template-columns:1.1fr .9fr;gap:var(--s6)}
}