@charset "utf-8";
/* ==========================================================================
   BelleVia — PACK RAHA · landing page
   Mobile-first · RTL · same design system as the sibling BelleVia pages.

   Tokens, buttons, section furniture, the order card, the sticky bar and the
   FAQ are the store's shared language and are deliberately identical to
   `bellevia-anti-lice/style.css` — this is a copy, not an import, so that page
   is untouchable from here. What is new below is only what this product needs:
   the six-problem grid, the three product blocks, the ingredient columns and
   the offer box.

   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;

  /* The orange the pack's own labels use for «ضد تساقط الشعر». Type only, and
     only on white — it is the brand's accent, not a surface. */
  --orange: #D3600F;

  --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: "349 درهم" is an Arabic phrase. */
.ltr { display: inline-block; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

/* Money is a LATIN run here — «349 DH», not «349 درهم» — so it has to be
   isolated left-to-right. Left to the paragraph's RTL direction the digits and
   the currency land in separate bidi runs and reorder to «DH 349», which is
   wrong and was visible on screen while every element-level check still
   passed: the reversal happens INSIDE the element, so comparing element
   positions never sees it. If the currency is ever switched back to «درهم»,
   delete this rule — an Arabic currency word must inherit the page's RTL. */
[data-price-main], [data-price-short], [data-sum-total], [data-sum-short],
[data-old-price], [data-save], .qty__hint {
  direction: ltr;
  unicode-bidi: isolate;
}

.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; }

/* ── 03b · The botanical background system ──────────────────────────────────
   One environment, eight intensities — not eight backgrounds.

   Everything below is derived from ONE photograph: the approved PACK RAHA
   creative. `bg-wash` is a block of its own foliage, upscaled and blurred until
   it is light and colour rather than imagery; `bg-leaves` is the same block
   left sharp, used small at the hero's outer corners where the brief asks for
   foliage framing. No other section puts a photograph behind body copy — they
   take gradients sampled from the same palette, which is what keeps the page
   one campaign instead of eight stock scenes.

   The rule every layer obeys: the centre stays bright. A `--veil` radial sits
   over the photograph everywhere text or product has to read. */
:root {
  --leaf-1: rgba(120, 165, 60, .18);
  --leaf-2: rgba(70, 120, 45, .12);
  --cream: #F7F4E9;
}

/* A soft cream-and-green field. The default ground for the light sections. */
.sec--field {
  background:
    radial-gradient(72% 58% at 50% 26%, rgba(255, 255, 255, .96), rgba(255, 255, 255, 0) 74%),
    radial-gradient(50% 40% at 6% 0%, var(--leaf-1), transparent 68%),
    radial-gradient(46% 38% at 96% 100%, var(--leaf-2), transparent 66%),
    linear-gradient(180deg, var(--cream), #FFFFFF 46%, var(--g-50));
}
/* Same field, a touch greener — for the sections that carry the product. */
.sec--field-2 {
  background:
    radial-gradient(70% 56% at 50% 30%, rgba(255, 255, 255, .97), rgba(255, 255, 255, 0) 72%),
    radial-gradient(52% 42% at 98% 4%, var(--leaf-1), transparent 68%),
    radial-gradient(46% 40% at 2% 96%, var(--leaf-2), transparent 66%),
    linear-gradient(180deg, var(--g-50), var(--cream) 60%, #FFFFFF);
}

/* The photographic layer is applied directly by `.hero` and `.final`, each with
   its own veil — bright for the hero, deep green for the close. They are the
   only two sections that carry a photograph.

   Sharp foliage at the outer corners — decorative, masked to fade inward, and
   never over the middle where the product and the copy live. */
.leaf-corner {
  position: absolute; z-index: -1; pointer-events: none; user-select: none;
  width: clamp(120px, 26vw, 300px); height: auto; opacity: .95;
}
.leaf-corner--tr { top: -6px; inset-inline-end: -14px; }
.leaf-corner--bl {
  bottom: -10px; inset-inline-start: -22px; transform: scaleY(-1) rotate(8deg);
  width: clamp(96px, 20vw, 230px); opacity: .8;
}
/* A phone has no room for foliage beside the product; only the top corner stays. */
@media (max-width: 719px) {
  .leaf-corner--bl { display: none; }
  .leaf-corner--tr { width: 40vw; opacity: .8; }
}

/* ── 04 · Section furniture ─────────────────────────────────────────────── */
/* `position: relative` only — no `overflow: hidden`, which would clip the card
   shadows at every section boundary. The foliage that needs clipping lives in
   `.hero` and `.final`, and those two clip themselves. */
.sec { padding-block: var(--sec-y); position: relative; }
.sec--paper { background: var(--paper); }
/* The deep-green band that used to carry the solution section is gone. Green is
   still the identity, but it now lives where it does the most work — the header
   bar, every button, the order panel, the offer box and the closing block —
   while the body of the page stays in the creative's cream-and-light world. The
   brief was explicit: do not overuse green. */

.eyebrow {
  font-size: 11.5px; font-weight: 800; letter-spacing: .14em;
  color: var(--gold); margin-bottom: 6px;
}
.hero .eyebrow { color: var(--g-600); }
.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 rows on a phone, two columns from 720px. The bottle cluster is close to
   square, so it costs far less of the first screen than a portrait crop would
   and 349 درهم stays above the fold at 360×640. */
/* The hero is LIGHT, because the approved creative is: cream light in the
   middle, foliage at the edges, product in the clear. The previous deep-green
   hero fought that photograph rather than continuing it, so the type inverts to
   dark ink here and the green moves to the header bar, the buttons and the
   closing block. */
.hero {
  position: relative;
  padding-block: 0 26px;
  isolation: isolate;
  overflow: hidden;
  color: var(--ink);
}
/* Layer 1 — the photograph's own foliage, blurred to light and colour. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: image-set(url(./assets/images/bg-wash-900.webp) 1x,
                              url(./assets/images/bg-wash-1600.webp) 2x);
  background-size: cover; background-position: 50% 30%;
}
/* Layer 2 — the bright centre. Without this the bottles sit on busy foliage and
   the headline loses its contrast; with it the photograph reads as depth. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(78% 62% at 50% 42%, rgba(255,255,255,.95), rgba(255,255,255,.62) 48%, rgba(255,255,255,.10) 82%),
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(247,244,233,.55) 70%, var(--g-50));
}
/* Kept in the document, off the screen: the creative states the headline in
   its own type, but a page still needs one H1 for search and for a screen
   reader. Not display:none, which would hide it from both. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* MOBILE FIRST — the creative leads.
   Traffic arrives from a Facebook ad showing this exact artwork, so it is the
   first thing on the screen: the visitor recognises what they clicked before
   they read anything. Price and button follow immediately; the spec pills sit
   under them as supporting detail. */
.hero__in {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 'shot' 'offer' 'copy';
  justify-items: center;
  row-gap: 8px;
}
.hero__copy { grid-area: copy; }
.hero__shot { grid-area: shot; display: grid; justify-items: center; width: 100%; }
.hero__offer { grid-area: offer; margin-top: 10px; width: 100%; }

.hero__h1 {
  font-size: clamp(22px, 6.4vw, 44px); line-height: 1.24; letter-spacing: -0.01em;
  text-wrap: balance; color: var(--g-800);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
.hero__lede { margin-top: 10px; color: var(--ink-2); font-size: clamp(14px, 3.7vw, 17px); }
.hero__lede b { color: var(--orange); 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(255, 255, 255, .82); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 11px;
  font-size: 12.5px; font-weight: 700; color: var(--g-800);
  backdrop-filter: blur(6px);
}
.hero__pills .ltr { color: var(--orange); }
/* Who the pack is for, said first and said with the brand's own pictogram. The
   bottles read «للجنسين»; a page that only ever addressed women would throw
   away half the traffic the ads buy. */
/* `li.` and not just `.` — `.hero__pills li` is class+type and would otherwise
   outrank a lone class, keeping this pill white and hiding the white pictogram
   on it. */
.hero__pills li.hero__pills--who {
  background: var(--g-700); color: #fff; border-color: transparent;
  font-weight: 800;
}
/* The pictogram is dark figures on the creative's own cream — NOT a transparent
   glyph, so inverting it to white (the treatment the wordmark gets) turns the
   whole square white and the figures vanish. It keeps its own pixels and sits
   on a small white chip instead, which reads on the green pill. */
.hero__pills--who img {
  width: 19px; height: 21px; object-fit: contain;
  background: #fff; border-radius: 5px; padding: 1px 2px;
}

.hero__shot img {
  width: 100%;
  /* The creative IS the hero now, so it takes the full column instead of the
     narrow product slot the bottle cut-out used. */
  max-width: 100%;
  height: auto;
  /* CONTAIN, never cover: the cluster is shown whole — every cap, every base,
     the plinth and the foliage. If the box is tighter than the frame the image
     scales down; nothing is cropped, clipped or zoomed. */
  object-fit: contain;
  /* No card, no border, no overlay — only a soft lift off the light field. */
  filter: drop-shadow(0 18px 26px rgba(20, 48, 26, .22));
}

.price { display: flex; align-items: baseline; gap: 10px; justify-content: center; }
.hero__offer { text-align: center; }
/* On the light hero the price sits on white rather than on a dark plaque, and
   the figure itself carries the brand orange — the same accent the labels use. */
.hero__offer .price {
  display: inline-flex; align-items: baseline; gap: 12px;
  padding: 6px 26px 10px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(20, 48, 26, .12);
  backdrop-filter: blur(4px);
}
.price b { font-size: clamp(32px, 9vw, 46px); font-weight: 800; color: var(--g-700); line-height: 1.1; }
.price s { color: var(--muted); font-size: 17px; }
.hero__offer .price b { color: var(--orange); }

.hero__offer .btn { margin-top: 12px; }
/* One of these three lines starts hidden and is revealed by config.js. Without
   a reservation that reveal moves everything under it — measured as the largest
   single shift on the first screen. Sized to the settled height per breakpoint. */
.hero__trust { min-height: 77px; }
/* The hero CTA carries a price that JS writes in, and its label sits one line
   deep with very little slack. While the webfont swaps in, the wider glyphs
   push it onto a second line and then back — measured at 360px: 52 -> 80 -> 52,
   which moved the trust list and the pills twice and was the whole of the
   0.13 CLS on that screen. It fits on one line in every tested width, so it is
   simply told not to wrap. */
.hero__offer .btn { white-space: nowrap; }
@media (min-width: 1000px) { .hero__trust { min-height: 50px; } }
.hero__trust {
  display: grid; gap: 4px; margin-top: 12px;
  font-size: 13.5px; font-weight: 700; color: var(--g-800);
}
.hero__trust li { position: relative; padding-inline-start: 22px; }
.hero__trust li::before {
  content: '✓'; position: absolute; inset-inline-start: 0; color: var(--g-600); font-weight: 800;
}

@media (min-width: 720px) {
  .hero { padding-block: 28px 34px; }
  .hero__shot img {
    height: auto;
    max-height: 78vh;
    object-fit: contain;
  }
}

/* Two columns only from 900px up.
   Between 720 and 900 the offer column was narrow enough that the injected
   price and the button both wrapped onto a second line the moment config.js
   filled them — measured at 768: the offer block grew 213 -> 319px, which is a
   visible jump on the first screen. At 900 the offer column was still only
   360px and the button wrapped the same way, so the split waits for 1000px.
   Below that the creative keeps the full width and the offer sits under it,
   which is also the better read on a tablet held upright. */
@media (min-width: 1000px) {
  .hero__in {
    max-width: 1240px;
    /* The creative gets the larger half: it is the thing the visitor clicked.
       The text column now holds only the offer and the spec pills, so it needs
       less room than when it carried a headline and a lede. */
    grid-template-columns: minmax(360px, 1fr) minmax(440px, 56%);
    grid-template-areas: 'offer shot' 'copy shot';
    align-items: center; column-gap: 36px;
    justify-items: stretch;
  }
  .hero__shot { align-self: center; }
  .hero__shot img {
    width: 100%;
    /* 680 displayed against a 1400px source is still a downscale at 2x, so the
       creative stays sharp while being the dominant object on the screen. */
    max-width: 680px;
    margin-inline-start: auto;
  }

  /* The artwork spans both rows, so those rows split its height and the offer
     and the pills drift to opposite ends of the column. Pulling one to the end
     of its row and the other to the start of the next makes them meet in the
     middle: price, button, reassurance and specs read as one block beside the
     creative rather than as two stranded pieces. */
  .hero__offer { align-self: end; margin-top: 0; }
  .hero__copy  { align-self: start; margin-top: 18px; }
  .price { justify-content: flex-start; }
  .hero__offer .btn { width: auto; }
  .hero__trust { grid-template-columns: repeat(2, auto); justify-content: start; gap: 4px 22px; }
}

/* 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. */
/* The approved cluster is a PORTRAIT frame (698×875) where the previous one was
   almost square, so on a phone it has to be capped by HEIGHT rather than width
   — sized by width it eats 430px of an 844px screen on its own and pushes the
   price and the button under the fold. `contain` means the cap shrinks the
   whole frame; no bottle is ever cropped to make it fit. */
@media (max-width: 719px) {
  .hero__in { row-gap: 6px; }
  .hero__shot img {
    width: auto; max-width: 94vw;
    /* Raised from 46vh/340px: the headline and lede that used to sit above the
       artwork are gone, so the creative can take the space they were using and
       still leave the price and the button on the first screen. */
    height: min(56vh, 430px);
    margin-inline: auto;
  }
}
/* A 360×640 phone is the tightest screen this page will meet, and on it the
   headline, the lede, the three pills, the picture, the price and the button
   all have to land above the fold — a CTA one scroll down is a CTA most ad
   traffic never sees. The picture is what gives way, scaled down and never
   cropped, and the price panel gives back its outer padding. Measured: the
   button ends at 601px of 640. */
/* A 360×640 phone is the tightest screen this page meets, and on it the
   headline, the pack, the price and the button all have to land above the fold
   — a CTA one scroll down is a CTA most ad traffic never sees. The picture is
   capped by height and the second lede sentence steps aside. Measured: the
   button ends at 596px of 640. */
@media (max-width: 719px) and (max-height: 700px) {
  .hero { padding-block: 0 12px; }
  .hero__in { row-gap: 2px; }
  .hero__shot img { height: min(44vh, 290px); max-width: 94vw; }
  .hero__pills { margin-top: 6px; gap: 5px; }
  .hero__pills li { font-size: 11.5px; padding: 3px 9px; }
  .hero__offer { margin-top: 6px; }
  .hero__offer .price { padding: 4px 22px 8px; }
  .hero__offer .price b { font-size: 30px; }
  .hero__trust { margin-top: 8px; font-size: 12.5px; }
}

/* ── 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); }
/* Capped rather than blown up: the brand supplied this photograph 458px wide,
   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: 340px; margin-inline: auto; }
@media (min-width: 860px) {
  .split { grid-template-columns: 340px minmax(0, 1fr); justify-content: center; gap: 40px; }
  .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; }

/* ── 09 · Problem grid ──────────────────────────────────────────────────── */
/* The brand's own six medallions, with the words set as live text beside them
   instead of shipping a 1058px picture of Arabic to a 360px phone. */
.probgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.probgrid li {
  display: flex; align-items: center; gap: 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 12px; box-shadow: var(--sh-1);
  font-size: 13.5px; font-weight: 700; color: var(--g-800); line-height: 1.4;
}
.probgrid img { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; }
@media (min-width: 480px) {
  .probgrid li { font-size: 14.5px; padding: 12px 14px; }
  .probgrid img { width: 52px; height: 52px; flex-basis: 52px; }
}

/* ── 10 · Agitation ─────────────────────────────────────────────────────── */
.agitate__list { max-width: 640px; margin-inline: auto; }
.agitate__turn {
  max-width: 640px; margin: 24px auto 0; text-align: center;
  font-size: clamp(17px, 4.6vw, 22px); font-weight: 800; color: var(--g-800);
}
.agitate__turn b { color: var(--orange); }
/* Same rounding and shadow as the other photograph on the page (.split__shot),
   so the two read as one treatment. 720px is a width the layout already uses
   (the FAQ list), which keeps it wider than the 640px copy without shouting. */
.agitate__shot { max-width: 720px; margin: 22px auto 0; }
.agitate__shot img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}

/* ── 11 · Cards (solution outcomes) ─────────────────────────────────────── */
.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: var(--muted); }

/* ── 12 · Routine flow ──────────────────────────────────────────────────── */
.flow { display: grid; gap: 6px; max-width: 620px; margin: 0 auto; }
.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; }
}

/* ── 13 · The three products ────────────────────────────────────────────── */
/* One block per bottle, in routine order. Sized by HEIGHT, not width: the
   bottles are 1:3.5 portraits, and a width-driven column would make each row
   400px tall on a phone. */
.packgrid { display: grid; gap: 12px; max-width: 900px; margin-inline: auto; }
.prod {
  display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; align-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px; box-shadow: var(--sh-1);
  overflow: hidden;
}
/* A soft green plinth the bottle stands in, instead of a plain white box. */
.prod__shot {
  position: relative; display: grid; place-items: center;
  align-self: stretch; border-radius: var(--r); overflow: hidden;
  background:
    radial-gradient(70% 60% at 50% 34%, rgba(255,255,255,.92), rgba(255,255,255,0) 72%),
    linear-gradient(180deg, var(--g-100), var(--g-50));
  padding: 10px 6px;
}
.prod__shot img {
  width: auto; height: 190px; object-fit: contain;
  filter: drop-shadow(0 12px 16px rgba(12, 30, 16, .22));
}
.prod__step {
  font-size: 11.5px; font-weight: 800; letter-spacing: .08em; color: var(--gold);
  margin-bottom: 2px;
}
.prod__body h3 { font-size: 16.5px; }
.prod__size {
  display: inline-block; margin-top: 6px; padding: 2px 10px;
  background: var(--gold-soft); color: #7A5B00;
  border-radius: 999px; font-weight: 800; font-size: 12px;
}
.prod__claim { margin-top: 8px; font-size: 14.5px; font-weight: 800; color: var(--orange); }
.prod__body .ticks { margin-top: 9px; }
.prod__use {
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line);
  font-size: 13.5px; color: var(--muted); font-weight: 700;
}
@media (min-width: 820px) {
  .packgrid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .prod { grid-template-columns: 1fr; text-align: center; padding: 16px; }
  .prod__shot { padding: 14px 8px; }
  .prod__shot img { height: 220px; }
  .prod__body .ticks { text-align: start; display: inline-grid; }
  .prod__use { text-align: start; }
}

/* ── 14 · Why the whole routine ─────────────────────────────────────────── */
.why__list { max-width: 640px; margin-inline: auto; }
.why__list b { color: var(--g-800); }

/* ── 15 · Ingredients ───────────────────────────────────────────────────── */
.ing { display: grid; gap: 12px; max-width: 900px; margin-inline: auto; }
.ing__col {
  display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 14px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 12px 14px; box-shadow: var(--sh-1);
}
/* The picture spans both rows. Without this the card has three children in a
   two-column grid, so the ingredient list wraps into the 130px picture column
   and sets one word per line. */
.ing__col img {
  grid-row: span 2;
  width: 130px; height: 104px; object-fit: contain; border-radius: var(--r-sm);
}
.ing__col h3 { font-size: 16px; margin-bottom: 8px; }
.ing__note {
  max-width: 640px; margin: 18px auto 0; text-align: center;
  font-size: 13px; color: var(--muted); font-weight: 700; line-height: 1.7;
}
@media (min-width: 820px) {
  .ing { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .ing__col { grid-template-columns: 1fr; text-align: center; padding: 18px 16px 20px; }
  .ing__col img { width: 100%; max-width: 200px; height: 150px; margin-inline: auto; }
  .ing__col .ticks { text-align: start; display: inline-grid; }
}

/* ── 16 · 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 {
  /* Spans both rows, or the step's paragraph wraps into the 78px picture
     column and sets one word per line. (`.steps3__n` is absolutely positioned,
     so the three in-flow children are img, h3 and p.) */
  grid-row: span 2;
  width: 78px; height: 78px; border-radius: 50%; box-shadow: 0 0 0 3px var(--g-100);
  /* The bottle crops are portraits; `contain` on a cream field keeps the whole
     bottle inside the circle rather than cropping it to a band. */
  object-fit: contain; background: var(--g-50);
}
@media (min-width: 780px) { .steps3 li img { grid-row: auto; } }
.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__label { font-size: 12.5px; color: var(--muted); font-weight: 700; margin-top: 12px; }

/* ── 17 · Benefits + trust strips ───────────────────────────────────────── */
.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);
}
.benefits__list { margin-top: 0; }
.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; }
}

/* ── 18 · Offer ─────────────────────────────────────────────────────────── */
/* The same bottle cluster as the hero, capped hard: left to fill a desktop
   column it would be a full screen of picture. `contain` like every other
   product image on the page — the frame shrinks, the bottles are never cropped
   or stretched. */
.panel img {
  width: 100%; max-width: min(88vw, 400px); margin-inline: auto;
  object-fit: contain;
  border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--sh-1);
}
@media (min-width: 720px) { .panel img { max-width: 460px; } }

.offerbox {
  max-width: 460px; margin: 22px auto 0; text-align: center;
  padding: 20px 18px 22px;
  background: linear-gradient(165deg, #2D5B2F, #1E4422);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 40px rgba(12, 30, 16, .30);
  color: #fff;
}
.offerbox__pack {
  font-size: 12.5px; font-weight: 800; letter-spacing: .08em; color: var(--gold-2);
}
/* The offer box is the one dark surface the price appears on, so it cannot take
   the page-wide `.price b` green — that would be dark green on dark green. Gold
   here, the same treatment the closing block uses. */
.offerbox .price { margin-top: 4px; }
.offerbox .price b { color: var(--gold-2); }
.offerbox .price s { color: rgba(255, 255, 255, .62); }
/* Computed from the two configured prices in script.js, never typed. */
.offerbox__save {
  display: inline-block; margin-top: 8px; padding: 3px 14px;
  background: var(--orange); color: #fff;
  border-radius: 999px; font-size: 13.5px; font-weight: 800;
}
.offerbox__trust {
  display: grid; gap: 4px; margin-top: 12px; justify-content: center;
  font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, .9);
}
.offerbox__trust li { position: relative; padding-inline-start: 22px; text-align: start; }
.offerbox__trust li::before {
  content: '✓'; position: absolute; inset-inline-start: 0; color: var(--gold-2); font-weight: 800;
}
.offerbox .btn { margin-top: 16px; background: var(--gold); color: #16261A; }
.offerbox .btn:hover { background: var(--gold-2); }

/* ── 19 · 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); }
.faq__list details p b { color: var(--g-700); }
/* Inquiry button — the page's own ghost button, nothing new invented. Green
   comes from the existing palette rather than WhatsApp's brand green, so the
   section keeps reading as one design. */
.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; }

/* ── 20 · Final offer ───────────────────────────────────────────────────── */
/* The closing scene: the same photograph as the hero, but read through a deep
   green veil instead of a bright one. Strongest botanical moment after the
   hero, and the one place the brand green comes back at full strength — with a
   clear centre so the price and the CTA stay legible. */
.final {
  position: relative; isolation: isolate; overflow: hidden;
  color: #fff; padding-block: 48px;
}
.final::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: image-set(url(./assets/images/bg-wash-900.webp) 1x,
                              url(./assets/images/bg-wash-1600.webp) 2x);
  background-size: cover; background-position: 50% 65%;
}
.final::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(64% 62% at 50% 50%, rgba(30, 68, 34, .82), rgba(20, 48, 26, .93) 70%),
    linear-gradient(170deg, rgba(45, 91, 47, .90), rgba(20, 48, 26, .95));
}
/* Over a dark veil the foliage would read as grime, so it is dimmed hard. */
.final .leaf-corner { opacity: .30; mix-blend-mode: screen; }
.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; display: flex; align-items: baseline; gap: 12px; justify-content: center; }
.final__price b { font-size: clamp(34px, 9.4vw, 48px); font-weight: 800; color: var(--gold-2); }
.final__price s { color: rgba(255, 255, 255, .6); font-size: 18px; }
.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; }

/* ── 21 · 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; }

/* ── 22 · 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; } }