/* Chemmus & Chuppas — HOMEPAGE ONLY (isolated release).
 * ============================================================================
 * ISOLATION CONTRACT
 * ----------------------------------------------------------------------------
 * 1. This file is enqueued ONLY on is_front_page() (see cc_enqueue_homepage_assets
 *    in functions.php). It never loads on product, cart, checkout or account.
 * 2. EVERY selector below is scoped beneath .cc-homepage (the wrapper div in
 *    front-page.php). Nothing here can match an element on another template
 *    even if this file were somehow loaded there.
 * 3. It loads AFTER tokens/base/layout/components + style.css, and every scoped
 *    selector carries at least one extra class of specificity, so it reliably
 *    wins over the shared baseline without a single !important.
 *
 * WHY SO MANY EXPLICIT OVERRIDES:
 * The homepage reuses shared class names (.benefits/.ing/.steps/.cod/.reviews/
 * .faq/.card/.story...). The shared stylesheets still style those classes for
 * the product & cart pages, and we are deliberately NOT touching those files in
 * this release. So for every shared class the homepage reuses, this file
 * re-declares the full set of properties the baseline sets — otherwise baseline
 * values (borders, paddings, aspect-ratios, gradients) would bleed through.
 * Each such block is marked "[neutralises baseline]".
 * ==========================================================================*/

/* ---------- SECTION RHYTHM ----------
 * [neutralises baseline] tokens.css .section{padding-block:clamp(2.15rem,1.55rem + 2vw,3.6rem)}
 * More generous vertical rhythm so each section breathes and reads as its own
 * chapter. Target: ~80-112px desktop, ~56-72px mobile. */
/* The shared --pad token (tokens.css) uses an invalid unspaced clamp, so the
   baseline .wrap gutter resolves to 0. Restore a valid gutter for the homepage. */
.cc-homepage .wrap{padding-inline:clamp(1rem, 0.7rem + 1.1vw, 1.6rem)}
.cc-homepage .section{padding-block:clamp(3.6rem,2.6rem + 3.2vw,7rem)}
.cc-homepage .section__head{margin-bottom:clamp(1.8rem,1.4rem + 1vw,2.6rem)}
.cc-homepage .h2{font-size:clamp(1.8rem,1.4rem + 1.5vw,2.65rem);letter-spacing:.2px}
.cc-homepage .section__head .lede{font-size:1.06rem;line-height:1.6}
.cc-homepage .eyebrow{font-size:.74rem;letter-spacing:.24em;margin-bottom:.35rem}

/* ---------- HERO ---------- */
.cc-homepage .hero{position:relative;overflow:hidden}
.cc-homepage .hero.section{padding-block:0}
.cc-homepage .hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.8rem,1.2rem + 3.4vw,4.6rem);
  align-items:center;padding-block:clamp(3rem,2.2rem + 3vw,5rem)}
.cc-homepage .hero__title{font-size:clamp(2.6rem,1.7rem + 3.7vw,4.5rem);font-weight:800;line-height:1.0;
  letter-spacing:-.015em;margin:.55rem 0 .95rem;text-wrap:balance;color:var(--charcoal)}
.cc-homepage .hero__title .accent{color:var(--rose-deep);font-style:italic;font-weight:800}
.cc-homepage .hero__lede{color:var(--muted);font-size:clamp(1.05rem,1rem + .35vw,1.2rem);line-height:1.62;
  max-width:44ch;margin-bottom:1.6rem}
.cc-homepage .hero__cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.6rem}
.cc-homepage .hero__cta .btn{padding:.95rem 1.8rem;font-size:1rem}
.cc-homepage .hero__mini{display:flex;align-items:center;gap:.7rem;font-size:.9rem;color:var(--muted);font-weight:500}
.cc-homepage .hero__mini .stars{font-size:1.05rem;color:var(--gold);letter-spacing:1px}

/* Real product photograph in an editorial frame — no water splash, no fake 3D. */
.cc-homepage .hero__media{position:relative;display:grid;place-items:center;isolation:isolate}
.cc-homepage .hero__media::before{content:"";position:absolute;inset:auto;z-index:0;
  width:min(78%,360px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,var(--rose-tint),transparent 72%);filter:blur(6px);opacity:.9}
.cc-homepage .hero__figure{position:relative;z-index:1;width:min(440px,100%);aspect-ratio:4/5;
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);
  border:1px solid var(--gold-line);animation:cc-float 7s ease-in-out infinite}
.cc-homepage .hero__figure img,.cc-homepage .hero__shot{width:100%;height:100%;object-fit:cover;display:block}
.cc-homepage .hero__badge{position:absolute;z-index:2;left:1rem;bottom:1rem;background:rgba(253,251,247,.92);
  backdrop-filter:blur(4px);border:1px solid var(--gold-line);border-radius:var(--r-pill);
  padding:.5rem 1rem;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--charcoal);box-shadow:var(--shadow-sm)}
@keyframes cc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ---------- TRUST BAND (compact) ---------- */
.cc-homepage .trust{background:var(--charcoal);color:var(--ivory)}
.cc-homepage .trust__inner{display:flex;align-items:center;justify-content:center;gap:clamp(1rem,.5rem + 2vw,3rem);
  flex-wrap:wrap;padding-block:1.35rem;text-align:center}
.cc-homepage .trust__item{display:flex;flex-direction:column;gap:.15rem;padding-inline:.5rem}
.cc-homepage .trust__num{font-family:var(--serif);font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);color:#fff;line-height:1}
.cc-homepage .trust__num b{color:var(--gold-soft);font-weight:600}
.cc-homepage .trust__lbl{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,241,232,.86);font-weight:600}
.cc-homepage .trust__sep{width:1px;height:28px;background:linear-gradient(var(--gold-line),transparent);opacity:.6}

/* ---------- CARDS: TWO SIZES + COMBO ----------
 * Larger canvas, bigger jars, roomier bodies and a clearer featured card so the
 * three purchase options read as a confident, premium row (not cramped). */
.cc-homepage .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,1rem + 1.4vw,2.1rem)}
.cc-homepage .card{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .28s ease,box-shadow .28s ease;position:relative;
  box-shadow:var(--shadow-sm)}
.cc-homepage .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.cc-homepage .card--feature{border-color:var(--gold-line);box-shadow:0 0 0 1px var(--gold-line),var(--shadow-md);
  transform:translateY(-6px)}
.cc-homepage .card--feature:hover{transform:translateY(-12px)}
/* [neutralises baseline] layout.css .card__canvas{aspect-ratio:1/1}. A taller
   bounded canvas gives the jars real presence without the square ballooning. */
.cc-homepage .card__canvas{aspect-ratio:auto;height:clamp(290px,26vw,360px);padding:3rem 1.2rem 1.6rem;
  background:radial-gradient(120% 140% at 50% 28%,#fff,var(--paper) 60%,var(--ivory-deep));
  display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid var(--line-2)}
/* Product photos fill the canvas: the jar is the subject, not the empty space.
   Widths are relative to the canvas so the three cards stay in proportion:
   30 g visibly smaller than 70 g; the 2 × 70 g composition the widest. */
.cc-homepage .card__canvas img{display:block;height:auto;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 14px 18px rgba(58,42,38,.18));transition:transform .35s ease}
.cc-homepage .card--s30 .card__canvas .card__img{width:62%}
.cc-homepage .card--s70 .card__canvas .card__img{width:84%}
.cc-homepage .card--combo .card__canvas .card__img{width:96%}
.cc-homepage .card:hover .card__canvas img{transform:translateY(-3px)}
.cc-homepage .card__canvas .combo{display:flex;gap:0;align-items:flex-end;justify-content:center;width:96%}
.cc-homepage .card__canvas .combo img{width:56%}
.cc-homepage .card__canvas .combo img:last-child{width:50%;margin-left:-14%;transform:translateY(6px) scale(.94)}
.cc-homepage .tag{position:absolute;top:14px;left:14px;font-size:.66rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:.36rem .7rem;border-radius:var(--r-pill)}
.cc-homepage .tag--save{background:var(--rose-deep);color:#fff}
.cc-homepage .tag--value{background:var(--gold-soft);color:var(--charcoal)}
.cc-homepage .stock{position:absolute;top:14px;right:14px;font-size:.68rem;font-weight:600;color:var(--green);
  display:flex;align-items:center;gap:.32rem}
.cc-homepage .stock i{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block}
.cc-homepage .stock--out{color:var(--muted-2)}
.cc-homepage .stock--out i{background:var(--muted-2)}
.cc-homepage .stock--back{color:var(--gold)}
.cc-homepage .stock--back i{background:var(--gold)}
.cc-homepage .btn.is-disabled{opacity:.5;pointer-events:none;cursor:not-allowed;text-align:center;justify-content:center}
.cc-homepage .card__body{padding:1.35rem 1.4rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.cc-homepage .card__name{font-size:1.4rem;line-height:1.12}
.cc-homepage .card__size{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-deep);font-weight:700}
.cc-homepage .price{display:flex;align-items:baseline;gap:.55rem;margin-top:.1rem;flex-wrap:wrap}
.cc-homepage .price__now{font-family:var(--serif);font-size:1.7rem;color:var(--charcoal);font-weight:600}
.cc-homepage .price__was{font-size:.95rem;color:var(--muted-2);text-decoration:line-through}
.cc-homepage .price__save{font-size:.8rem;font-weight:700;color:var(--rose-deep)}
.cc-homepage .card__body>p{color:var(--muted);font-size:.92rem;line-height:1.5}
.cc-homepage .card__cta{margin-top:auto;display:flex;flex-direction:column;gap:.55rem;padding-top:.7rem}
.cc-homepage .card__cta form{margin:0}
.cc-homepage .card__cta .btn{width:100%;min-height:52px}
.cc-homepage .card__link{text-align:center;font-size:.84rem;font-weight:600;color:var(--charcoal);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold-line);
  min-height:44px;display:flex;align-items:center;justify-content:center}
.cc-homepage .card__link:hover{color:var(--rose-deep)}

/* ---------- BENEFITS ----------
 * [neutralises baseline] base.css .benefit{border;border-radius;padding:1.2rem 1.15rem;align-items:flex-start}
 * Six separate bordered boxes -> one hairline-divided panel. */
.cc-homepage .benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  border:1px solid var(--line-2);border-radius:var(--r-md);overflow:hidden;background:var(--line-2)}
.cc-homepage .benefit{background:var(--white);border:0;border-radius:0;padding:1.3rem 1.35rem;
  display:flex;gap:.8rem;align-items:center;transition:background .2s}
.cc-homepage .benefit:hover{background:var(--paper)}
.cc-homepage .benefit svg{flex:none;color:var(--rose-deep)}
.cc-homepage .benefit b{display:block;font-weight:600;font-size:1rem;color:var(--charcoal);
  font-family:var(--sans);line-height:1.25}

/* ---------- INGREDIENTS ----------
 * [neutralises baseline] base.css .ing / .ing__cell — editorial columns. */
.cc-homepage .ing{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2);
  border:0;border-radius:var(--r-md);overflow:hidden}
.cc-homepage .ing__cell{background:var(--paper);padding:1.55rem 1.5rem 1.6rem;display:flex;
  flex-direction:column;gap:.45rem;transition:background .2s}
.cc-homepage .ing__cell:hover{background:var(--white)}
.cc-homepage .ing__ico{width:42px;height:42px;border-radius:50%;background:var(--white);
  border:1px solid var(--gold-line);color:var(--rose-deep);display:grid;place-items:center;margin-bottom:.2rem}
.cc-homepage .ing__name{font-family:var(--serif);font-size:1.24rem;color:var(--charcoal)}
.cc-homepage .ing__desc{color:var(--muted);font-size:.94rem;line-height:1.5}

/* ---------- HOW TO USE ----------
 * [neutralises baseline] base.css .step{padding:1rem .8rem} + connector line. */
.cc-homepage .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;position:relative}
.cc-homepage .steps::before{content:"";position:absolute;top:32px;left:calc(50%/4);right:calc(50%/4);height:1px;
  background:linear-gradient(90deg,var(--gold-line),var(--gold-line) 92%,transparent);z-index:0}
.cc-homepage .step{text-align:center;padding:0 .8rem;position:relative}
.cc-homepage .step__n{width:64px;height:64px;border-radius:50%;border:1px solid var(--gold-line);
  color:var(--rose-deep);font-family:var(--serif);font-size:1.7rem;display:grid;place-items:center;
  margin:0 auto .9rem;background:var(--ivory);position:relative;z-index:1;box-shadow:var(--shadow-sm)}
.cc-homepage .step h3{font-size:1.24rem;margin-bottom:.35rem}
.cc-homepage .step p{color:var(--muted);font-size:.95rem;line-height:1.55;max-width:30ch;margin:0 auto}
.cc-homepage .disclaim{text-align:center;color:var(--muted-2);font-size:.82rem;margin-top:1.7rem;font-style:italic}

/* ---------- COMPARE THE SIZES ---------- */
.cc-homepage .compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,1rem + 1.4vw,2rem)}
.cc-homepage .cmp{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:1.7rem;display:flex;flex-direction:column;gap:.75rem;box-shadow:var(--shadow-sm)}
.cc-homepage .cmp--best{border-color:var(--gold-line);position:relative;box-shadow:0 0 0 1px var(--gold-line),var(--shadow-sm)}
.cc-homepage .cmp__ribbon{position:absolute;top:-12px;left:1.7rem;background:var(--gold);color:var(--charcoal);
  font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.28rem .8rem;border-radius:var(--r-pill)}
.cc-homepage .cmp__row{display:flex;justify-content:space-between;font-size:.96rem;padding:.6rem 0;
  border-bottom:1px solid var(--line-2)}
.cc-homepage .cmp__row span:first-child{color:var(--muted)}
.cc-homepage .cmp__row b{color:var(--charcoal);font-weight:600}
.cc-homepage .cmp__price{font-family:var(--serif);font-size:1.75rem;color:var(--charcoal)}
.cc-homepage .cmp form{margin:0}
.cc-homepage .cmp .btn{min-height:52px}

/* ---------- COMBO OFFER BAND ---------- */
.cc-homepage .combo-band{background:linear-gradient(135deg,var(--charcoal),var(--charcoal-2));color:var(--ivory);
  border-radius:var(--r-lg);padding:clamp(1.7rem,1.2rem + 2.4vw,3rem);display:grid;grid-template-columns:1fr 1fr;
  gap:1.8rem;align-items:center;overflow:hidden;position:relative}
.cc-homepage .combo-band .eyebrow{color:var(--gold-soft)}
.cc-homepage .combo-band h2{color:#fff;font-size:clamp(1.7rem,1.2rem + 2.2vw,2.9rem);margin:.5rem 0;
  font-weight:800;text-wrap:balance;letter-spacing:-.01em}
.cc-homepage .combo-band p{color:rgba(246,241,232,.8);font-size:1.02rem}
.cc-homepage .combo-price{display:flex;align-items:baseline;gap:.9rem;margin:1.2rem 0}
.cc-homepage .combo-price .now{font-family:var(--serif);font-size:2.4rem;color:#fff}
.cc-homepage .combo-price .was{text-decoration:line-through;color:rgba(246,241,232,.55);font-size:1.15rem}
.cc-homepage .combo-save{display:inline-flex;align-items:center;gap:.4rem;background:var(--rose-deep);color:#fff;
  font-weight:700;padding:.55rem 1.1rem;border-radius:var(--r-pill);font-size:.92rem}
.cc-homepage .combo-jars{display:flex;justify-content:center;align-items:flex-end;position:relative}
.cc-homepage .combo-jars::before{content:"";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:86%;height:74%;z-index:0;background:radial-gradient(60% 60% at 50% 46%,rgba(199,166,100,.28),transparent 72%);filter:blur(16px)}
.cc-homepage .combo-jars::after{content:"";position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
  width:72%;height:16px;z-index:0;background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent);filter:blur(6px)}
.cc-homepage .combo-jars img{width:210px;max-width:46%;position:relative;z-index:1;
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.42))}
.cc-homepage .combo-jars img:first-child{z-index:2}
.cc-homepage .combo-jars img:last-child{margin-left:-36px;transform:translateY(6px)}
.cc-homepage .combo-band form{margin:0}
/* Custom uploaded offer image — single visual, no overlap/offset */
.cc-homepage .combo-jars.is-custom{display:block;text-align:center}
.cc-homepage .combo-jars.is-custom::before,.cc-homepage .combo-jars.is-custom::after{display:none}
.cc-homepage .combo-jars.is-custom img{width:auto;max-width:100%;margin:0;transform:none;
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.42));border-radius:var(--r-md)}

/* ---------- REVIEW SUMMARY ----------
 * Confirmed figures only. No invented quotes. */
.cc-homepage .reviews{display:grid;grid-template-columns:.78fr 1.22fr;gap:2.6rem;align-items:center}
.cc-homepage .rev-score{text-align:center;background:var(--white);border:1px solid var(--gold-line);
  border-radius:var(--r-lg);padding:2.1rem 1.5rem;box-shadow:var(--shadow-sm)}
.cc-homepage .rev-score .stars{font-size:1.5rem;color:var(--gold);letter-spacing:2px}
.cc-homepage .rev-score .big{font-family:var(--serif);font-size:3.2rem;color:var(--charcoal);line-height:1;margin-top:.25rem}
.cc-homepage .rev-score .big span{font-size:1.6rem;color:var(--muted)}
.cc-homepage .rev-score .cnt{color:var(--muted);font-size:.92rem;margin-top:.45rem}
.cc-homepage .rev-statement{font-family:var(--serif);font-size:clamp(1.4rem,1.1rem + 1.1vw,1.75rem);
  color:var(--charcoal);line-height:1.36}
.cc-homepage .rev-statement b{color:var(--rose-deep);font-weight:600}
.cc-homepage .rev-chips{display:flex;gap:.8rem;margin-top:1.4rem;flex-wrap:wrap}
.cc-homepage .rev-chip{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:.6rem 1.1rem;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.cc-homepage .rev-chip b{font-family:var(--serif);font-size:1.2rem;color:var(--charcoal);
  text-transform:none;letter-spacing:0;font-weight:600}

/* ---------- CASH ON DELIVERY ----------
 * [neutralises baseline] base.css .cod / .cod__item — one clean strip. */
.cc-homepage .cod{display:flex;background:var(--paper);border:1px solid var(--line-2);
  border-radius:var(--r-md);overflow:hidden}
.cc-homepage .cod__item{display:flex;gap:.85rem;align-items:flex-start;padding:1.4rem 1.5rem;flex:1;
  position:relative;background:transparent;border:0;border-radius:0}
.cc-homepage .cod__item + .cod__item::before{content:"";position:absolute;left:0;top:1.4rem;bottom:1.4rem;
  width:1px;background:var(--line-2)}
.cc-homepage .cod__item svg{color:var(--rose-deep);flex:none;margin-top:.1rem}
.cc-homepage .cod__item b{display:block;font-family:var(--sans);font-weight:600;color:var(--charcoal);
  margin-bottom:.2rem;font-size:1rem}
.cc-homepage .cod__item p{font-size:.9rem;color:var(--muted);line-height:1.5}

/* ---------- BRAND STORY ----------
 * [neutralises baseline] layout.css .story__media — a real photo fills it. */
.cc-homepage .story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,1.2rem + 3vw,3.8rem);align-items:center}
.cc-homepage .story__media{aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-md);background:none;border:1px solid var(--gold-line);display:block;padding:0}
.cc-homepage .story__media img{width:100%;height:100%;object-fit:cover;filter:none;transition:transform .6s ease}
.cc-homepage .story__media:hover img{transform:scale(1.04)}
.cc-homepage .story h2{font-size:clamp(1.9rem,1.4rem + 1.6vw,2.7rem)}
.cc-homepage .story p{color:var(--muted);margin-top:1rem;font-size:1.05rem;line-height:1.6}
.cc-homepage .story .est{font-family:var(--serif);font-style:italic;color:var(--rose-deep);font-size:1.2rem}

/* ---------- FAQ (button/panel accordion) ---------- */
.cc-homepage .faq{max-width:840px;margin:0 auto}
.cc-homepage .faq__item{background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-md);
  margin-bottom:.7rem;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.cc-homepage .faq__item.is-open{border-color:var(--gold-line);box-shadow:var(--shadow-sm)}
.cc-homepage .faq__h{margin:0;font-family:var(--sans)}
.cc-homepage .faq__q{width:100%;cursor:pointer;padding:1.05rem 1.3rem;font-weight:600;color:var(--charcoal);
  display:flex;justify-content:space-between;align-items:center;font-size:1rem;background:none;border:0;
  text-align:left;font-family:var(--sans);gap:1rem;min-height:44px}
.cc-homepage .faq__ic{position:relative;flex:none;width:18px;height:18px}
.cc-homepage .faq__ic::before,.cc-homepage .faq__ic::after{content:"";position:absolute;
  background:var(--rose-deep);top:50%;left:50%;transform:translate(-50%,-50%)}
.cc-homepage .faq__ic::before{width:12px;height:1.6px}
.cc-homepage .faq__ic::after{width:1.6px;height:12px;transition:transform .2s ease}
.cc-homepage .faq__item.is-open .faq__ic::after{transform:translate(-50%,-50%) rotate(90deg) scale(0)}
.cc-homepage .faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.cc-homepage .faq__ainner{overflow:hidden;min-height:0}
.cc-homepage .faq__item.is-open .faq__a{grid-template-rows:1fr}
/* [neutralises baseline] base.css .faq p{padding:0 1.3rem 1.2rem;font-size:.94rem} */
.cc-homepage .faq__a p{padding:0 1.3rem 1.2rem;color:var(--muted);font-size:.95rem;line-height:1.6}

/* No-JS fallback for the accordion. */
@media (scripting: none){
  .cc-homepage .faq__a{grid-template-rows:1fr}
  .cc-homepage .faq__ic{display:none}
  .cc-homepage .faq__q{cursor:default}
}

/* ============================================================================
 * SCROLL REVEAL
 * Elements tagged .cc-reveal fade+rise into place as they enter the viewport.
 * homepage.js adds .is-in via IntersectionObserver. If JS never runs, the
 * @media(scripting:none) rule below shows everything, so nothing is hidden.
 * Stagger is driven by --d (a per-item delay set inline in the markup).
 * ==========================================================================*/
/* FAIL-SAFE: content is visible by default. It is only hidden for the reveal
 * animation once homepage.js confirms it is running by adding `.cc-reveal-on`
 * to the .cc-homepage wrapper. So if the JS is missing, blocked or errors, the
 * homepage still shows everything instead of going blank. */
.cc-homepage .cc-reveal{
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0ms);will-change:opacity,transform}
.cc-homepage.cc-reveal-on .cc-reveal{opacity:0;transform:translateY(26px)}
.cc-homepage.cc-reveal-on .cc-reveal.is-in{opacity:1;transform:none}
@media (scripting: none){
  .cc-homepage .cc-reveal{opacity:1;transform:none}
}

/* Respect reduced-motion for reveal, hero float, card lift and accordion. */
@media (prefers-reduced-motion: reduce){
  .cc-homepage .faq__a,.cc-homepage .faq__ic::after,.cc-homepage .card,.cc-homepage .benefit,
  .cc-homepage .card__canvas img,.cc-homepage .story__media img{transition:none}
  .cc-homepage .card:hover{transform:none}
  .cc-homepage .hero__figure{animation:none}
  .cc-homepage .cc-reveal{opacity:1;transform:none;transition:none}
}

/* ============================================================================
 * RESPONSIVE
 * ==========================================================================*/
@media(max-width:960px){
  .cc-homepage .section__head{align-items:flex-start}
  .cc-homepage .section__head>div{max-width:100%}
  .cc-homepage .section__head .lede{text-align:left;align-self:flex-start;padding-bottom:0;flex-basis:100%}

  .cc-homepage .hero__grid{grid-template-columns:1fr;text-align:center;gap:2rem}
  .cc-homepage .hero__media{order:-1}
  .cc-homepage .hero__lede{margin-inline:auto}
  .cc-homepage .hero__cta,.cc-homepage .hero__mini{justify-content:center}

  .cc-homepage .cards{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .cc-homepage .card--feature{transform:none}
  .cc-homepage .compare,.cc-homepage .story,.cc-homepage .combo-band{grid-template-columns:1fr}
  .cc-homepage .combo-band{text-align:center}
  .cc-homepage .combo-band .combo-price{justify-content:center}
  .cc-homepage .combo-jars{margin-top:1.6rem}
  .cc-homepage .combo-jars img{width:180px}

  .cc-homepage .benefits{grid-template-columns:1fr 1fr}
  .cc-homepage .ing{grid-template-columns:1fr}

  .cc-homepage .steps{grid-template-columns:1fr;gap:1.6rem}
  .cc-homepage .steps::before{display:none}
  .cc-homepage .step{display:grid;grid-template-columns:58px 1fr;grid-template-rows:auto auto;
    column-gap:1.1rem;text-align:left;padding:0}
  .cc-homepage .step__n{grid-row:1/3;grid-column:1;width:58px;height:58px;font-size:1.4rem;margin:0}
  .cc-homepage .step h3{grid-row:1;grid-column:2;align-self:center}
  .cc-homepage .step p{grid-row:2;grid-column:2;max-width:none;margin:0}

  .cc-homepage .cod{flex-direction:column}
  .cc-homepage .cod__item + .cod__item::before{left:1.4rem;right:1.4rem;top:0;bottom:auto;width:auto;height:1px}

  .cc-homepage .reviews{grid-template-columns:1fr;gap:1.6rem;text-align:center}
  .cc-homepage .reviews .rev-score{max-width:300px;margin:0 auto}
  .cc-homepage .rev-statement{text-align:center}
  .cc-homepage .rev-chips{justify-content:center}
}

@media(max-width:560px){
  /* Trust band becomes a clean vertical list — one stat per row, number and
     label stacked and centred, divided by hairlines. Numbers count-up (JS). */
  .cc-homepage .trust__sep{display:none}
  .cc-homepage .trust__inner{flex-direction:column;align-items:stretch;gap:0;padding-block:.5rem}
  .cc-homepage .trust__item{flex:1 1 auto;flex-direction:column;align-items:center;justify-content:center;
    gap:.25rem;padding:.95rem .2rem;border-bottom:1px solid rgba(246,241,232,.16);text-align:center;padding-inline:.2rem}
  .cc-homepage .trust__item:last-child{border-bottom:0}
  .cc-homepage .trust__num{font-size:1.75rem}
  .cc-homepage .trust__lbl{font-size:.74rem;letter-spacing:.12em;text-align:center}

  .cc-homepage .hero__title{font-size:clamp(2.2rem,1.4rem + 4.2vw,3rem);letter-spacing:-.01em}
  .cc-homepage .hero__figure{width:min(340px,86%)}

  .cc-homepage .benefits{grid-template-columns:1fr}
  .cc-homepage .combo-jars img{width:44%}
  .cc-homepage .cmp{padding:1.4rem}

  /* Review stat chips: even 3-across row instead of an unbalanced 2 + 1. */
  .cc-homepage .rev-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
  .cc-homepage .rev-chip{padding:.65rem .35rem;align-items:center;text-align:center}
  .cc-homepage .rev-chip b{font-size:1.05rem}
}

/* 0.8.0 — real customer reviews (only rendered when reviews exist) */
.cc-homepage .cc-rev-list{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cc-homepage .cc-rev{margin:0;background:var(--white);border-radius:var(--r-md);padding:1.4rem 1.5rem}
.cc-homepage .cc-rev__stars{margin:0 0 .5rem;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--rose-deep)}
.cc-homepage .cc-rev blockquote{margin:0 0 .8rem;font-size:1rem;line-height:1.55;color:var(--charcoal)}
.cc-homepage .cc-rev figcaption{font-size:.85rem;color:var(--muted)}
.cc-homepage .ing__num{display:block;margin-bottom:.5rem}
.cc-homepage .benefit{align-items:center}

.cc-homepage .section.cc-continue{padding-top:0}
.cc-homepage .story__media img{object-position:50% 80%}
@media (max-width:560px){
  .cc-homepage .trust__inner{display:grid;grid-template-columns:1fr 1fr;padding-block:.4rem}
  .cc-homepage .trust__item{border-bottom:1px solid rgba(218,199,156,.18);padding-block:.85rem}
  .cc-homepage .trust__item:nth-last-child(-n+2){border-bottom:0}
  .cc-homepage .trust__num{font-size:1.35rem}
  .cc-homepage .trust__lbl{font-size:.64rem;letter-spacing:.1em}
}

/* ---- Shop page (/shop/) — reuses the homepage cards ---- */
.cc-shoppage__hero{background:var(--ivory-deep);border-bottom:1px solid var(--line-2);text-align:center;padding-block:clamp(1.6rem,1.2rem + 2vw,2.8rem)}
.cc-shoppage__hero .crumb{display:flex;justify-content:center;flex-wrap:wrap;padding-top:0}
.cc-shoppage__title{font-size:clamp(1.9rem,1.4rem + 2vw,2.9rem);margin:.4rem 0 .6rem}
.cc-shoppage__hero .lede{margin:0 auto}
.cc-shoppage__guide{max-width:76ch;margin:1.4rem auto 0;text-align:center;color:var(--muted);font-size:.96rem;line-height:1.75}
.cc-shoppage__facts{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2.4rem 0 0;padding:0}
.cc-shoppage__facts li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:1rem 1.15rem;display:flex;flex-direction:column;gap:.2rem}
.cc-shoppage__facts strong{color:var(--charcoal);font-weight:600}
.cc-shoppage__facts span{color:var(--muted);font-size:.92rem}
.cc-shoppage__more{text-align:center;margin-top:1.6rem;color:var(--muted);font-size:.95rem}
.cc-shoppage__more a{color:var(--rose-deep);text-decoration:underline;text-underline-offset:3px}
.cc-shoppage__more span{margin:0 .5rem}
@media (max-width:900px){.cc-shoppage__facts{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}

/* ---- 0.11.0: factual strip under the hero (was a dark "stats" band) ---- */
.cc-homepage .trust{background:var(--paper);color:var(--charcoal);border-block:1px solid var(--line-2)}
.cc-homepage .trust__inner{padding-block:1.15rem}
.cc-homepage .trust__num{font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--charcoal);line-height:1.3}
.cc-homepage .trust__num b{color:inherit}
.cc-homepage .trust__lbl{font-size:.88rem;letter-spacing:0;text-transform:none;font-weight:400;color:var(--muted)}
.cc-homepage .trust__sep{background:var(--line);opacity:1}
@media (max-width:900px){
  .cc-homepage .trust__item{border-color:var(--line-2)}
  .cc-homepage .trust__num{font-size:.95rem}
  .cc-homepage .trust__lbl{font-size:.8rem;letter-spacing:0}
}

/* ---- Blog preview (shown only when articles are published) ---- */
.cc-homepage .cc-homeblog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.cc-homepage .cc-homeblog__card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cc-homepage .cc-homeblog__card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.cc-homepage .cc-homeblog__body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.4rem}
.cc-homepage .cc-homeblog__cat{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-deep)}
.cc-homepage .cc-homeblog__card h3{font-size:1.15rem;line-height:1.3}
.cc-homepage .cc-homeblog__card h3 a:hover{color:var(--rose-deep)}
.cc-homepage .cc-homeblog__all{margin-top:1.4rem;text-align:center}
.cc-homepage .cc-homeblog__all a{color:var(--rose-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.cc-homepage .cc-homeblog__grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* =====================================================================
 * 0.13.0 — approved product artwork, four-item strip, balanced hero,
 * aligned cards, four-step routine.
 * ===================================================================*/

/* Hero: text and photo share the row evenly; no wasted top padding. */
@media (min-width:961px){
  .cc-homepage .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,5rem);
    padding-block:clamp(2.4rem,1.6rem + 2.6vw,4.2rem)}
  .cc-homepage .hero__copy{max-width:560px;justify-self:end;width:100%}
}
.cc-homepage .hero__title{font-size:clamp(2.4rem,1.6rem + 3vw,3.9rem);line-height:1.04;margin:.6rem 0 1.1rem}
.cc-homepage .hero__lede{max-width:40ch;margin-bottom:1.8rem}
.cc-homepage .hero__cta{gap:.75rem;margin-bottom:0}
.cc-homepage .hero__media{justify-self:start;width:100%}
.cc-homepage .hero__figure{width:min(470px,100%);animation:none}
.cc-homepage .hero__media::before{display:none}

/* Four-item strip: one ruled row of four equal columns. */
.cc-homepage .trust__inner{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding-block:0;align-items:stretch}
.cc-homepage .trust__sep{display:none}
.cc-homepage .trust__item{align-items:center;justify-content:center;text-align:center;gap:.2rem;
  padding:1.15rem 1rem;border-left:1px solid var(--line-2);border-bottom:0}
.cc-homepage .trust__item:first-of-type{border-left:0}
.cc-homepage .trust__num{font-size:1.02rem;font-weight:700;letter-spacing:.01em}
.cc-homepage .trust__lbl{font-size:.86rem}
@media (max-width:900px){
  .cc-homepage .trust__inner{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cc-homepage .trust__item{border-left:0;border-bottom:1px solid var(--line-2)}
  .cc-homepage .trust__item:nth-of-type(2n){border-left:1px solid var(--line-2)}
  .cc-homepage .trust__item:nth-last-of-type(-n+2){border-bottom:0}
  .cc-homepage .trust__num{font-size:.98rem}
  .cc-homepage .trust__lbl{font-size:.8rem}
}
@media (max-width:360px){
  .cc-homepage .trust__inner{grid-template-columns:1fr}
  .cc-homepage .trust__item,.cc-homepage .trust__item:nth-of-type(2n){border-left:0;border-bottom:1px solid var(--line-2)}
  .cc-homepage .trust__item:last-of-type{border-bottom:0}
}

/* Cards: one canvas height, approved artwork on the brand cream surface.
   The single-jar photo is used for both sizes; 30 g is drawn smaller. */
.cc-homepage .card__canvas{height:clamp(260px,22vw,310px);padding:3rem 1.4rem 1.4rem;
  background:linear-gradient(180deg,#fff,var(--paper));align-items:flex-end}
/* Sized by height so the 30 g stays visibly smaller at every width. */
.cc-homepage .card__canvas img{filter:none;max-width:100%;object-fit:contain}
.cc-homepage .card--s30 .card__canvas .card__img{width:auto;height:62%;margin-bottom:4%}
.cc-homepage .card--s70 .card__canvas .card__img{width:auto;height:86%}
.cc-homepage .card--combo .card__canvas .card__img{width:100%;height:auto;max-height:100%}
.cc-homepage .card--feature{transform:none}
.cc-homepage .card--feature:hover,.cc-homepage .card:hover{transform:translateY(-4px)}
.cc-homepage .card__body{padding:1.3rem 1.4rem 1.4rem}
.cc-homepage .card__body>p{min-height:2.9em}
.cc-homepage .price{min-height:2.1rem;display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem}

/* Offer band: the approved combo artwork on a cream panel. */
/* Offer band image. Photo (default: the evening-light lifestyle photo): a
   cropped portrait frame. Fallback combo artwork: a cream panel. */
.cc-homepage .combo-band{align-items:center}
.cc-homepage .combo-jars.is-photo{justify-self:center;width:100%;max-width:400px}
.cc-homepage .combo-jars.is-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 35%;
  border-radius:var(--r-md);filter:none;box-shadow:0 24px 40px rgba(0,0,0,.35)}
.cc-homepage .combo-jars.is-art{background:var(--paper);border-radius:var(--r-md);padding:clamp(1rem,.6rem + 1.6vw,2rem)}
.cc-homepage .combo-jars.is-art img{filter:none;border-radius:0;width:100%;height:auto}
@media (max-width:960px){
  .cc-homepage .combo-band{gap:1.6rem}
  .cc-homepage .combo-jars{order:-1;margin-top:0}
  .cc-homepage .combo-jars.is-photo{max-width:none}
  .cc-homepage .combo-jars.is-photo img{aspect-ratio:4/3;object-position:50% 62%}
  .cc-homepage .combo-band h2{margin:.4rem 0 .6rem}
  .cc-homepage .combo-band p{margin-inline:auto;max-width:36ch}
  .cc-homepage .combo-save{margin-top:.9rem}
  .cc-homepage .combo-band form,.cc-homepage .combo-band form .btn{width:100%}
}

/* Four steps: one row on wide screens, 2 × 2 on tablets, a list on phones. */
/* Four columns only where there is room. (0.13.0 set this without a media
   query, which overrode the phone layout below and squeezed four columns
   into 400 px.) */
@media (min-width:961px){.cc-homepage .steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:960px) and (min-width:561px){
  .cc-homepage .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.4rem}
  .cc-homepage .steps::before{display:none}
  .cc-homepage .step{display:block;text-align:center}
  .cc-homepage .step__n{margin:0 auto .9rem}
  .cc-homepage .step p{margin:0 auto}
}

/* Shop page: less air between the heading and the cards. */
.cc-shoppage .cc-shoppage__range.section{padding-top:clamp(1.6rem,1.2rem + 1.4vw,2.6rem)}
.cc-shoppage__hero{padding-block:clamp(1.4rem,1rem + 1.6vw,2.4rem)}

@media (max-width:960px){
  .cc-homepage .hero__copy{justify-self:center;max-width:600px}
  .cc-homepage .hero__media{justify-self:center}
  .cc-homepage .hero__figure{width:min(380px,82%)}
  .cc-homepage .card__canvas{height:260px}
}
@media (max-width:560px){
  .cc-homepage .hero__grid{padding-block:1.6rem 2.2rem;gap:1.6rem}
  .cc-homepage .hero__figure{width:min(300px,78%)}
  .cc-homepage .hero__cta{justify-content:center}
  .cc-homepage .card__canvas{height:230px}
  .cc-homepage .card__body>p{min-height:0}
}
/* Shop facts: as many equal columns as there are facts. */
.cc-shoppage__facts{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
@media (max-width:560px){
  .cc-homepage .hero__figure{width:min(260px,72%)}
  /* Compact, balanced mobile hero: short editorial heading, readable copy, tidy CTAs. */
  .cc-homepage .hero__title{font-size:clamp(2.15rem,7.5vw,2.65rem);line-height:1.1;letter-spacing:-.025em;max-width:15ch;margin:.65rem auto .85rem;text-wrap:balance}
  .cc-homepage .hero__lede{font-size:1rem;line-height:1.55;max-width:34ch;margin:0 auto 1.4rem}
  .cc-homepage .hero__cta{gap:.65rem;margin-bottom:0}
  .cc-homepage .hero__cta .btn{min-width:0;max-width:100%;padding:.8rem 1.45rem;font-size:.98rem}
}
/* Story image when it is the transparent jar artwork: shown whole on cream. */
.cc-homepage .story__media:has(img[src*="cc-whitening-cream-jar"]),.cc-homepage .story__media:has(img[src*="jar-cutout"]){background:linear-gradient(180deg,#fff,var(--paper))}
.cc-homepage .story__media img[src*="cc-whitening-cream-jar"],.cc-homepage .story__media img[src*="jar-cutout"]{object-fit:contain;padding:10% 12%;object-position:50% 50%}
.cc-homepage .story__media:hover img[src*="cc-whitening-cream-jar"]{transform:none}