@charset "utf-8";
/* ==========================================================================
   BelleVia — Pack ضد القمل · landing page
   Mobile-first · RTL · palette sampled off the pack artwork and the logo.

   Three colours and nothing else: forest green carries every action, cream and
   white carry every surface, gold appears only as a hairline, a rule and the
   medallions the brand itself drew. Sections alternate cream/white — never a
   third background — so the page reads as one object rather than a stack of
   templates.
   ========================================================================== */

/* ── 00 · Fonts ─────────────────────────────────────────────────────────── */
@font-face {
  font-family: Tajawal; font-style: normal; font-weight: 400; font-display: swap;
  src: url(./assets/fonts/tajawal-400-ar.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: Tajawal; font-style: normal; font-weight: 400; font-display: swap;
  src: url(./assets/fonts/tajawal-400-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+2190-21BB, U+2212;
}
@font-face {
  font-family: Tajawal; font-style: normal; font-weight: 700; font-display: swap;
  src: url(./assets/fonts/tajawal-700-ar.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: Tajawal; font-style: normal; font-weight: 700; font-display: swap;
  src: url(./assets/fonts/tajawal-700-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+2190-21BB, U+2212;
}
@font-face {
  font-family: Tajawal; font-style: normal; font-weight: 800; font-display: swap;
  src: url(./assets/fonts/tajawal-800-ar.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: Tajawal; font-style: normal; font-weight: 800; font-display: swap;
  src: url(./assets/fonts/tajawal-800-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+2190-21BB, U+2212;
}

/* ── 01 · Tokens ────────────────────────────────────────────────────────── */
:root {
  /* Greens — the brand's own identity, deep to fresh. */
  --g-900: #14301A;
  --g-800: #1E4422;
  --g-700: #2D5B2F;   /* PRIMARY — every action, every dark surface */
  --g-600: #3A6E33;
  --g-500: #5D8F24;   /* SECONDARY — fresh herbal, for life and highlights */
  --g-300: #9CBF6E;
  --g-100: #DCEBCD;
  --g-50:  #F1F7EA;   /* very light natural green — the page ground */

  /* Warm BelleVia gold. Accent only: a price, a rule, a badge, an icon. */
  --gold: #E8A900;
  --gold-2: #F4C13F;
  --gold-soft: #FCEFCB;
  /* Gold is a fill colour; on a green field small gold TEXT needs to be lighter
     to clear 4.5:1. Used only for type on green. */
  --gold-ink: #FFDD8A;

  --paper: #FFFFFF;

  --ink: #16261A;
  --ink-2: #42544A;
  --muted: #5E7060;
  --line: #DDE8D3;
  --danger: #B3261E;

  --r-sm: 12px;
  --r: 16px;
  --r-lg: 22px;

  --sh-1: 0 1px 2px rgba(20, 48, 26, .05), 0 4px 14px rgba(20, 48, 26, .06);
  --sh-2: 0 2px 8px rgba(20, 48, 26, .07), 0 16px 38px rgba(20, 48, 26, .12);

  --pad: 16px;
  --sec-y: 46px;
  --wrap: 1080px;
}

/* ── 02 · Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 12px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: Tajawal, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--g-50);
  overflow-x: hidden; /* no horizontal scroll, ever */
}

img { max-width: 100%; height: auto; display: block; }

/* Any class that sets `display` outranks the UA stylesheet's `[hidden]`, so a
   hidden flex element stays on screen. This makes `hidden` mean hidden. */
[hidden] { display: none !important; }

h1, h2, h3 { margin: 0; line-height: 1.3; color: var(--g-800); font-weight: 800; }
p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
/* `figure` carries a UA default of `1em 40px`; left alone it insets images by
   80px on a phone. */
figure { margin: 0; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

/* Standalone Latin runs only — a volume, a digit, an order number. Never used
   mid-sentence: `display:inline-block` cuts the bidi run and reorders Latin
   inside Arabic. And never on money: "299 درهم" is an Arabic phrase. */
.ltr { display: inline-block; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 99;
  background: var(--g-700); color: #fff; padding: 10px 18px; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { inset-inline-start: 0; }

:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--gold-2); outline-offset: 2px; border-radius: 4px;
}

.is-placeholder {
  color: #7A5B00; font-size: .8em;
  background: repeating-linear-gradient(-45deg, #FCEFCB, #FCEFCB 6px, #F6E0A8 6px, #F6E0A8 12px);
  border-radius: 6px; padding: 1px 6px;
}

/* ── 03 · Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 52px; padding: 12px 26px;
  font: inherit; font-weight: 800; font-size: 16.5px; text-decoration: none;
  border: 0; border-radius: 999px; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.btn--primary { background: var(--g-700); color: #fff; box-shadow: 0 8px 22px rgba(45, 91, 47, .30); }
.btn--primary:hover { background: var(--g-600); }
.btn--gold { background: var(--gold); color: #16261A; box-shadow: 0 8px 22px rgba(232, 169, 0, .34); }
.btn--gold:hover { background: var(--gold-2); color: #16261A; }
.btn--ghost { background: transparent; color: var(--g-700); border: 1.5px solid var(--g-100); min-height: 46px; }
.btn--block { width: 100%; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ── 04 · Section furniture ─────────────────────────────────────────────── */
.sec { padding-block: var(--sec-y); }
.sec--paper { background: var(--paper); }
/* Deep-green band. Used where the brief asks for it: the order section and the
   benefits. White cards and gold accents sit on top. */
.sec--green {
  background:
    radial-gradient(70% 50% at 85% 0%, rgba(93, 143, 36, .45), transparent 62%),
    linear-gradient(165deg, #2D5B2F, #24502A);
  color: #fff;
}
.sec--green h2 { color: #fff; }
/* Cards on a green band keep their own light surface, so their headings stay
   dark — white-on-light-green was unreadable. */
.sec--green h3 { color: #fff; }
.sec--green .flow__step h3, .sec--green .card h3 { color: var(--g-800); }
.sec--green .flow__step p { color: var(--ink-2); }
.sec--green .sec__lede { color: rgba(255, 255, 255, .86); }
.sec--green .eyebrow { color: var(--gold-ink); }
.sec--green .rule { filter: brightness(0) invert(1); opacity: .55; }

.eyebrow {
  font-size: 11.5px; font-weight: 800; letter-spacing: .14em;
  color: var(--gold); margin-bottom: 6px;
}
.hero .eyebrow { color: #FFE9B0; }
.sec__head { text-align: center; max-width: 620px; margin-inline: auto; margin-bottom: 28px; }
.sec__head h2 { font-size: clamp(21px, 5.2vw, 31px); text-wrap: balance; }
.sec__lede { margin-top: 10px; color: var(--ink-2); font-size: 15px; }

/* The brand's own gold rule with a leaf at its centre, redrawn in CSS so it
   costs no request. */
.rule {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  min-height: 16px; margin-top: 12px;
  background: center / 16px 16px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232D5B2F'%3E%3Cpath d='M12 21c-.4-4 .6-7 3-9 2-1.7 4.6-2.4 8-2.2-.3 3.7-1.6 6.4-3.8 8-2 1.5-4.4 2.2-7.2 2.2Z'/%3E%3Cpath d='M11 21c.4-4-.6-7-3-9C6 10.3 3.4 9.6 0 9.8c.3 3.7 1.6 6.4 3.8 8 2 1.5 4.4 2.2 7.2 2.2Z'/%3E%3C/svg%3E");
}
.rule::before, .rule::after {
  content: ''; flex: 0 0 auto; height: 1px; width: min(80px, 20vw);
  background: linear-gradient(to left, transparent, var(--gold-2));
}
.rule::after { background: linear-gradient(to right, transparent, var(--gold-2)); }

/* ── 05 · Header ────────────────────────────────────────────────────────── */
.head { background: linear-gradient(180deg, #244C27, #2D5B2F); border-bottom: 1px solid rgba(255,255,255,.10); }
/* The wordmark is dark green on transparent, so on the green header it becomes
   a white monochrome mark — the same treatment the footer uses. */
.head__logo img { filter: brightness(0) invert(1); opacity: .95; }
.head__in {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 50px;
}
.head__logo { display: flex; }
.head__note {
  font-size: 12.5px; font-weight: 800; color: #16261A;
  background: var(--gold-2); border-radius: 999px; padding: 4px 12px; white-space: nowrap;
}

/* ── 06 · Hero ──────────────────────────────────────────────────────────── */
/* Two columns even on the smallest phone. The pack crop is a tall portrait; if
   it sits above the copy it eats 280px of the first screen on its own and
   pushes 299 درهم and the button under the fold. Beside the headline it costs
   nothing extra, because the copy fills the same height. */
.hero {
  position: relative;
  /* ~20px of the old top padding is given back to pull the copy upward. */
  padding-block: 0 22px;
  isolation: isolate;
  /* A green scene, not a flat rectangle: two botanical washes over a deep-to-
     fresh gradient, with a bright halo behind the product so the white bottle
     stays legible. Green is the identity; the product sits in the light. */
  background:
    radial-gradient(58% 42% at 26% 46%, rgba(255, 255, 255, .96), rgba(234, 243, 228, .55) 46%, rgba(45, 91, 47, 0) 74%),
    radial-gradient(80% 55% at 92% 0%, rgba(93, 143, 36, .55), transparent 60%),
    radial-gradient(70% 50% at 0% 100%, rgba(20, 48, 26, .55), transparent 62%),
    linear-gradient(155deg, #2D5B2F 0%, #3A6E33 52%, #2A5430 100%);
  color: #fff;
}
/* Botanical shadow, drawn once in CSS — leaves falling across the top corner,
   soft enough that they never compete with the bottles. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220' fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.07'%3E%3Cpath d='M18 10c34 6 58 26 66 58-34-4-58-24-66-58Z'/%3E%3Cpath d='M96 4c22 26 26 56 10 86-20-24-24-54-10-86Z'/%3E%3Cpath d='M150 34c30 10 48 32 52 64-30-6-50-26-52-64Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -20px top -10px / 260px auto,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M30 190c-8-38 4-68 34-88 6 38-6 68-34 88Z'/%3E%3Cpath d='M120 196c-18-30-16-60 6-88 16 30 12 60-6 88Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat left -30px bottom -20px / 220px auto;
}
.hero__in {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 'copy' 'shot' 'offer';
  align-items: center;
  row-gap: 10px;
}
.hero__copy { grid-area: copy; }
.hero__shot { grid-area: shot; display: grid; justify-items: center; }
.hero__offer { grid-area: offer; margin-top: 14px; }

.hero__h1 {
  /* 1.24 was tight enough that Arabic descenders (ي، ن، ج) painted 2–5px below
     the element box. Nothing was hidden — overflow is visible — but the glyphs
     leaned into whatever sits underneath. 1.38 gives the script its room. */
  font-size: clamp(22px, 6.4vw, 44px); line-height: 1.38; letter-spacing: -0.01em;
  text-wrap: balance; color: #fff; text-shadow: 0 1px 2px rgba(20, 48, 26, .28);
}
/* «كتبدأ من هنا» lifted out of the headline. Warm gold on the green field, the
   same accent the price already uses — a shift in colour, not in size or
   weight, so the line still reads as one sentence. */
.hero__h1-em { color: var(--gold-ink); }

.hero__lede { margin-top: 10px; color: rgba(255, 255, 255, .92); font-size: clamp(14px, 3.7vw, 17px); }
.hero__lede b { color: var(--gold-ink); font-weight: 800; }

.hero__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hero__pills li {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(16, 40, 21, .42); border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 999px; padding: 4px 11px;
  font-size: 12.5px; font-weight: 700; color: #fff;
  backdrop-filter: blur(6px);
}
.hero__pills .ltr { color: var(--gold-ink); }

.hero__shot img {
  width: 100%;
  height: auto;
  /* CONTAIN, never cover: the supplied 1537×1023 frame is shown whole — wordmark,
     bottles, shield, foliage and all four edges. If the box is tighter than the
     frame the image scales down; nothing is ever cropped, clipped or zoomed. */
  object-fit: contain;
  /* No card, no border, no overlay — only a soft lift off the green. */
  filter: drop-shadow(0 16px 30px rgba(10, 26, 14, .34));
}

.price { display: flex; align-items: baseline; gap: 10px; justify-content: center; }
.hero__offer { text-align: center; }
.offer-line {
  display: inline-flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; gap: 4px 10px;
  padding: 8px 20px 10px;
  /* The plate is what makes gold legible on green — inline gold text measured
     2.08:1 against the lit part of the gradient. On this ground it reads 8:1. */
  background: linear-gradient(160deg, #1E4422, #122C17);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(10, 26, 14, .38);
  font-size: 14.5px; font-weight: 700; color: rgba(255, 255, 255, .92);
}
.offer-line b {
  font-size: clamp(24px, 6vw, 30px); font-weight: 800; color: var(--gold-2);
  line-height: 1.1;
}
.offer-line__sep { color: rgba(255, 255, 255, .38); }

/* Reference price. Deliberately quieter than the live one — about half the
   size, dimmer and struck — so the eye lands on 299 and reads 350 as what the
   pack used to cost. Kept a sibling of the <b> rather than a separate line so
   the two always wrap together. */
.offer-line__price { display: inline-flex; align-items: baseline; gap: 8px; }
.offer-line s,
.final__price s {
  font-weight: 700;
  color: rgba(255, 255, 255, .74);
  text-decoration-line: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255, 255, 255, .6);
}
.offer-line s { font-size: clamp(14px, 3.4vw, 16px); }
.final__price s { font-size: clamp(18px, 5vw, 24px); }

.hero__note {
  margin-top: 10px; font-size: 13px; font-weight: 700;
  color: rgba(255, 255, 255, .86);
}
.price b { font-size: clamp(32px, 9vw, 46px); font-weight: 800; color: var(--gold-2); line-height: 1.1; text-shadow: 0 2px 6px rgba(20, 48, 26, .3); }
.price s { color: rgba(255, 255, 255, .62); font-size: 17px; }

.hero__offer .btn { margin-top: 12px; }
/* The single most important control on the page sits on a green field, so it
   takes the gold. A green button on green is invisible — the one place the
   accent has to carry an action rather than decorate one. */
.hero__offer .btn--primary {
  background: var(--gold); color: #16261A;
  box-shadow: 0 10px 26px rgba(232, 169, 0, .38);
}
.hero__offer .btn--primary:hover { background: var(--gold-2); }

@media (min-width: 720px) {
  .hero { padding-block: 28px 34px; }
  .hero__in {
    /* The hero gets a wider container than the rest of the page — the shared
       1080px `.wrap` was capping the artwork long before the image itself ran
       out. Hero only; no other section's width changes. */
    max-width: 1440px;
    /* The artwork is landscape, so the visual column is the wider of the two —
       the only way a whole 3:2 frame reads large without being cropped. */
    grid-template-columns: minmax(0, 1fr) minmax(480px, 58%);
    grid-template-areas: 'copy shot' 'offer shot';
    align-items: center; column-gap: 28px;
  }
  .hero__shot { align-self: center; }
  .hero__shot img {
    width: 100%;
    /* The artwork renders ~817px wide at 1440, which on a retina screen asks
       for 1634 device px from a 1537px file — a 6% upscale, invisible on a
       photographic composition. Capping at 768 to avoid that was what made the
       hero feel weak, so the cap moves out of the way and the column decides. */
    max-width: 900px;
    height: auto;
    max-height: 82vh;
    object-fit: contain;
    margin-inline-start: auto;
  }

  /* The copy and the offer ride ~46px higher, so the headline and the price sit
     level with the middle of the artwork instead of below it. Transform only —
     no text, spacing or hierarchy is altered. */
  .hero__copy, .hero__offer { transform: translateY(-46px); }
  .hero__offer { margin-top: 22px; }
  .price { justify-content: flex-start; }
  .hero__offer .btn { width: auto; }
}

/* Tablet band only. Above ~868px the 58% track is already wider than its own
   480px floor and the floor never applies; below 720px the hero is a single
   column. In between, the floor wins and takes 480 of the ~728px available,
   leaving the headline a 220px column it has to break seven ways.
   Only the track sizing changes — the areas, the gap, the artwork rules, the
   -46px lift and every colour and font stay exactly as they are above. */
@media (min-width: 720px) and (max-width: 867px) {
  .hero__in { grid-template-columns: minmax(0, 1fr) minmax(340px, 50%); }
}

/* On a short phone the artwork gives back a few pixels so the CTA keeps clear
   air beneath it. The frame is scaled down, never cropped — every edge stays. */
@media (max-width: 719px) {
  .hero__in { row-gap: 6px; }
  .hero__shot img { width: min(100%, 86vw); margin-inline: auto; }
}
@media (max-width: 719px) and (max-height: 700px) {
  .hero__shot img { width: min(100%, 78vw); }
}

/* ── 07 · Order card ────────────────────────────────────────────────────── */
.order {
  padding-block: 30px 44px;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(93, 143, 36, .40), transparent 60%),
    linear-gradient(180deg, #2D5B2F, #24502A);
}
.order__card {
  background: var(--paper);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(12, 30, 16, .34);
  padding: 24px var(--pad) 26px;
  max-width: 640px; margin-inline: auto; scroll-margin-top: 12px;
  /* A gold hairline along the top edge — the accent, used once. */
  border-top: 3px solid var(--gold);
}
.order__head { text-align: center; margin-bottom: 18px; }
.order__head h2 { font-size: clamp(19px, 4.8vw, 25px); }
.order__head p { margin-top: 6px; color: var(--muted); font-size: 14.5px; }

.notice {
  background: #FFF6E3; border: 1px solid var(--gold-soft); color: #6C5219;
  border-radius: var(--r-sm); padding: 10px 14px; font-size: 14px; margin-bottom: 14px;
}

.fields { display: grid; gap: 13px; }
.field { display: grid; gap: 5px; }
.field label { font-size: 13.5px; font-weight: 700; color: var(--g-800); }
.field input {
  font: inherit; font-size: 16px; /* 16px or iOS zooms on focus */
  min-height: 50px; padding: 10px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--g-50); color: var(--ink); width: 100%;
  transition: border-color .15s ease, background-color .15s ease;
}
.field input::placeholder { color: #9AA69E; }
.field input:focus { border-color: var(--g-500); background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(74, 115, 80, .12); }
.field input[aria-invalid='true'] { border-color: var(--danger); background: #FDF5F4; }
.field input[dir='ltr'] { text-align: right; }

/* Quantity stepper — a multiplier, not a pack ladder. */
.field--qty { gap: 8px; }
.qty { display: inline-flex; align-items: center; gap: 4px; }
.qty__btn {
  width: 48px; height: 48px; flex: 0 0 48px;
  font: inherit; font-size: 22px; font-weight: 800; line-height: 1;
  color: var(--g-700); background: var(--g-50);
  border: 1.5px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
}
.qty__btn:hover:not([disabled]) { border-color: var(--g-500); background: #fff; }
.qty__btn[disabled] { opacity: .4; cursor: default; }
.qty__value {
  min-width: 56px; height: 48px; line-height: 48px; text-align: center;
  font-size: 17px; font-weight: 800; color: var(--g-800);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-sm);
}
.qty__hint { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.qty__hint:empty { display: none; }

.err { color: var(--danger); font-size: 13px; font-weight: 700; }
.err--form {
  margin-top: 14px; background: #FDF2F1; border: 1px solid #F0D4D1;
  border-radius: var(--r-sm); padding: 10px 14px; line-height: 1.6;
}

.sum {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding: 13px 16px;
  background: var(--g-50); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-weight: 800; color: var(--g-800);
}
.sum b { color: var(--g-700); font-size: 20px; }

#submit { margin-top: 14px; }

.reassure {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px;
  margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--g-600);
}
.reassure li { position: relative; padding-inline-start: 18px; }
.reassure li::before { content: '✓'; position: absolute; inset-inline-start: 0; color: var(--gold); }

.done { text-align: center; padding-block: 8px 4px; }
.done__tick {
  width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--g-100); color: var(--g-700);
  font-size: 28px; font-weight: 800; line-height: 56px;
}
.done h3 { font-size: 21px; }
.done p { margin-top: 8px; color: var(--ink-2); }
.done__num b { color: var(--g-700); }
.done .btn { margin-top: 16px; }

/* ── 08 · Split (image + list) ──────────────────────────────────────────── */
.split { display: grid; gap: 20px; align-items: center; }
.split__shot img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh-1); }
/* Both photographs are capped rather than blown up to fill their column: the
   brand supplied them at 600px and 320px wide respectively, and stretching a
   picture past its own resolution on a big phone looks worse than a smaller,
   sharp one. */
.problem .split__shot img { max-width: 360px; margin-inline: auto; }
.who .split__shot img { max-width: 300px; margin-inline: auto; }
@media (min-width: 860px) {
  .split { grid-template-columns: 380px minmax(0, max-content); justify-content: center; gap: 46px; }
  .split--rev .split__shot { order: 2; }
}

.ticks { display: grid; gap: 11px; }
.ticks li { position: relative; padding-inline-start: 28px; color: var(--ink-2); font-size: 15.5px; }
.ticks li::before {
  content: '✓'; position: absolute; inset-inline-start: 0; top: 0;
  width: 20px; height: 20px; margin-top: 3px;
  display: grid; place-items: center;
  background: var(--g-100); color: var(--g-700);
  border-radius: 50%; font-size: 11px; font-weight: 800; line-height: 1;
}
.ticks--minus li::before { content: '—'; background: var(--gold-soft); color: #B58200; }
.ticks--sm li { font-size: 14px; padding-inline-start: 24px; }
.ticks--sm li::before { width: 17px; height: 17px; font-size: 10px; }

/* AVANT / APRÈS. The frame is shown whole — `contain` and its own aspect
   ratio, never cropped — capped at 680px so a 1402px source still has 2× to
   give on a retina screen. */
.ba { padding-block: 34px; }
.ba__shot img {
  width: 100%;
  max-width: 680px;
  height: auto;
  object-fit: contain;
  margin-inline: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

/* ── 09 · Why the pack — flow ───────────────────────────────────────────── */
.flow { display: grid; gap: 6px; max-width: 620px; margin: 0 auto 22px; }
.flow__step {
  display: grid; grid-template-columns: 30px 1fr; align-items: start; gap: 11px;
  background: var(--g-50); border: 1px solid var(--line); border-radius: var(--r);
  padding: 11px 14px;
}
/* The numeral spans both rows. Without this the card has three children in a
   two-column grid, so the paragraph wraps into the 30px numeral column and sets
   one word per line. */
.flow__n { grid-row: span 2; }
.flow__n {
  width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--g-700); color: #fff; border-radius: 50%;
  font-size: 13px; font-weight: 800;
  box-shadow: 0 0 0 3px var(--g-100);
}
.flow__step h3 { font-size: 15.5px; }
.flow__step p { font-size: 14px; color: var(--ink-2); margin-top: 1px; }
.flow__step--end { background: var(--g-100); border-color: transparent; }
.flow__arrow { text-align: center; color: var(--gold-2); font-size: 15px; line-height: 1; }
@media (min-width: 780px) {
  /* Three across on a wide screen: the arrows are only a vertical device. */
  .flow { grid-template-columns: repeat(3, 1fr); max-width: 900px; gap: 14px; }
  .flow__arrow { display: none; }
}

.cards { display: grid; gap: 10px; }
.cards--3 { grid-template-columns: 1fr; max-width: 940px; margin-inline: auto; }
@media (min-width: 780px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  display: flex; align-items: center; gap: 13px;
  background: var(--paper); border: 0; border-radius: var(--r-lg);
  padding: 15px; box-shadow: 0 10px 26px rgba(12, 30, 16, .18);
  border-top: 3px solid var(--gold);
}
.card img { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; }
.card h3 { font-size: 15px; font-weight: 700; line-height: 1.55; color: var(--g-800); }
@media (min-width: 780px) {
  .card { flex-direction: column; text-align: center; padding: 22px 18px; gap: 10px; }
}
.cards__src { text-align: center; margin-top: 14px; font-size: 12.5px; color: rgba(255,255,255,.7); }

/* ── 10 · What's inside ─────────────────────────────────────────────────── */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 720px; margin-inline: auto; }
.duo__card {
  position: relative; overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 12px 18px; text-align: center;
  box-shadow: var(--sh-1);
  display: flex; flex-direction: column; align-items: center;
}
/* A soft green plinth the bottle stands in, instead of a plain white box. */
.duo__card::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 62%;
  background:
    radial-gradient(70% 78% at 50% 30%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, var(--g-100), var(--g-50));
}
.duo__card > * { position: relative; }
.duo__card img {
  width: auto; height: 210px; object-fit: contain; margin-bottom: 8px;
  filter: drop-shadow(0 12px 16px rgba(12, 30, 16, .22));
}
.duo__card h3 { font-size: 16.5px; color: var(--g-800); }
.duo__size {
  display: inline-block; margin-top: 4px; padding: 2px 10px;
  background: var(--gold-soft); color: #7A5B00;
  border-radius: 999px; font-weight: 800; font-size: 12px;
}
.duo__card .ticks { margin-top: 10px; text-align: start; }
@media (min-width: 720px) {
  .duo { gap: 20px; }
  .duo__card { padding: 22px 18px 24px; }
  .duo__card img { height: 260px; }
}

.panel img { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.panel figcaption { margin-top: 12px; text-align: center; font-size: 14.5px; font-weight: 700; color: var(--g-600); }
@media (min-width: 900px) { .panel { max-width: 880px; margin-inline: auto; } }

/* ── 11 · Three-step rows (usage + order process) ───────────────────────── */
.steps3 { display: grid; gap: 12px; max-width: 780px; margin-inline: auto; }
.steps3 li {
  position: relative;
  display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 13px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 12px 14px; box-shadow: var(--sh-1);
}
.steps3 li img { width: 78px; height: 78px; border-radius: 50%; box-shadow: 0 0 0 3px var(--g-100); }
.steps3__n {
  position: absolute; top: 10px; inset-inline-end: 12px;
  width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--gold); color: #16261A; border-radius: 50%;
  font-size: 12.5px; font-weight: 800;
}
.steps3 h3 { font-size: 16px; padding-inline-end: 30px; }
.steps3 p { font-size: 14.5px; color: var(--ink-2); margin-top: 3px; }
/* The order-process variant has no photographs. */
.steps3--plain li { grid-template-columns: 1fr; padding: 18px 16px; }
.steps3--plain h3 { font-size: 17px; }
@media (min-width: 780px) {
  .steps3 { grid-template-columns: repeat(3, 1fr); }
  .steps3 li { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 22px 16px 20px; }
  .steps3 li img { margin-bottom: 6px; }
  .steps3__n { position: static; margin-bottom: 8px; }
  .steps3 h3 { padding-inline-end: 0; }
}

.usage__note {
  text-align: center; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--g-600);
}

/* Precautions, folded away but present — it is printed on the pack. */
.care { max-width: 780px; margin: 18px auto 0; }
.care summary {
  cursor: pointer; list-style: none;
  font-size: 14.5px; font-weight: 800; color: var(--g-700);
  background: var(--g-50); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 16px; min-height: 46px; display: flex; align-items: center; gap: 8px;
}
.care summary::-webkit-details-marker { display: none; }
.care summary::after { content: '＋'; margin-inline-start: auto; color: var(--gold); font-weight: 800; }
.care[open] summary::after { content: '－'; }
.care__in { padding: 14px 16px 4px; }
.care__in > p { font-size: 14px; margin-top: 10px; color: var(--g-800); }
.care__in > p:first-child { margin-top: 0; }
.care__label { font-size: 12.5px !important; color: var(--muted) !important; font-weight: 700; margin-top: 12px !important; }

/* ── 12 · Showcase ──────────────────────────────────────────────────────── */
.showcase__main { display: grid; justify-items: center; }
.showcase__main img {
  width: min(76vw, 360px); border-radius: var(--r-lg); box-shadow: var(--sh-2);
}
.showcase__main figcaption {
  margin-top: 12px; font-size: 14.5px; font-weight: 700; color: var(--g-600);
}

/* Trust strip — five facts, each true of this page as configured. */
.trust {
  display: grid; gap: 8px;
  max-width: 780px; margin: 26px auto 0;
  padding: 16px 18px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.trust li {
  position: relative; padding-inline-start: 28px;
  font-size: 14.5px; font-weight: 700; color: var(--g-800);
}
.trust li::before {
  content: '✓'; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; display: grid; place-items: center;
  background: var(--gold); color: #16261A; border-radius: 50%;
  font-size: 11px; font-weight: 800; line-height: 1;
}
@media (min-width: 640px) {
  .trust { grid-template-columns: 1fr 1fr; gap: 10px 26px; }
}

/* ── 13 · FAQ ───────────────────────────────────────────────────────────── */
/* Native <details>: no JavaScript, no layout shift, still works if a script
   fails to load. */
.faq__list { display: grid; gap: 8px; max-width: 720px; margin-inline: auto; }
.faq__list details {
  background: var(--g-50); border: 1px solid var(--line); border-radius: var(--r);
}
.faq__list summary {
  cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 800; color: var(--g-800);
  padding: 14px 16px; min-height: 48px; display: flex; align-items: center; gap: 10px;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: '＋'; margin-inline-start: auto; color: var(--gold); font-weight: 800; }
.faq__list details[open] summary::after { content: '－'; }
.faq__list details p { padding: 0 16px 14px; font-size: 14.5px; color: var(--ink-2); }

/* Inquiry button under the FAQ. Same treatment as Pack Raha's. */
.faq__ask { margin-top: 18px; text-align: center; }
.btn--wa {
  min-width: 264px; font-weight: 800;
  /* The ghost button's own --g-100 hairline is too faint to read as the one
     action in this section, so the border steps up to the primary green. Same
     palette, just the weight the button needs to be found. */
  border: 2px solid var(--g-700);
}
.btn--wa:hover { background: var(--g-700); color: #fff; }

/* ── 14 · Final offer ───────────────────────────────────────────────────── */
.final {
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(93, 143, 36, .5), transparent 62%),
    linear-gradient(170deg, #2D5B2F, #1E4422);
  color: #fff; padding-block: 44px;
}
.final__in { text-align: center; max-width: 580px; margin-inline: auto; }
.final h2 { color: #fff; font-size: clamp(21px, 5.2vw, 30px); }
.final__pack {
  margin-top: 10px; font-size: 13px; font-weight: 800; letter-spacing: .08em;
  color: var(--gold-2);
}
.final__price { margin-top: 6px; }
.final__price b { font-size: clamp(34px, 9.4vw, 48px); font-weight: 800; color: var(--gold-2); }
.final__trust {
  display: grid; gap: 5px; margin-top: 16px;
  font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, .86);
  justify-content: center;
}
.final__trust li { position: relative; padding-inline-start: 22px; text-align: start; }
.final__trust li::before {
  content: '✓'; position: absolute; inset-inline-start: 0; color: var(--gold-2); font-weight: 800;
}
.final .btn { margin-top: 20px; min-width: 220px; }

/* ── 15 · Footer ────────────────────────────────────────────────────────── */
.foot { background: #14301A; color: rgba(255, 255, 255, .7); padding-block: 26px; }
.foot__in { display: grid; justify-items: center; gap: 8px; text-align: center; }
/* The wordmark is dark green on transparent; on the near-black footer it needs
   to become a white monochrome mark or it vanishes. */
.foot img { filter: brightness(0) invert(1); opacity: .9; }
.foot__prod { font-size: 13px; color: rgba(255, 255, 255, .8); }
.foot__contact { font-size: 14px; font-weight: 700; color: #fff; }
.foot__contact a { text-decoration: none; }
.foot__legal { font-size: 12px; line-height: 1.6; max-width: 44ch; }

/* ── 16 · Sticky mobile CTA ─────────────────────────────────────────────── */
.sticky {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
  padding: 9px var(--pad) calc(9px + env(safe-area-inset-bottom));
  background: rgba(241, 247, 234, .97);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 22px rgba(22, 40, 27, .08);
  animation: rise .22s ease-out;
}
@keyframes rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sticky .btn { font-size: 16px; min-height: 50px; }
@media (min-width: 720px) { .sticky { display: none !important; } }