/* =========================================================
   Elvya Solution — زيت ضد القمل والصئبان (Mauritania)
   Arabic RTL COD landing. Hand-written CSS, no framework.
   Mobile-first: everything below is designed for a phone and
   only widens at the two breakpoints at the bottom of the file.

   Palette is sampled from the product photography the client
   supplied: forest green, warm gold, cream paper.
   ========================================================= */

@import url('assets/vendor/fonts/tajawal.css');

/* ---------------------------------------------------------
   1. Tokens
   --------------------------------------------------------- */
:root {
  --bg: #FBF8F2;
  --bg-2: #F3EEE3;
  --surface: #FFFFFF;
  --line: #E7DECB;
  --line-soft: #F1EADC;

  --text: #1D2A21;
  --text-dim: #55645A;
  --text-mute: #8B958D;

  --green: #1B4332;
  --green-2: #2D6A4F;
  --green-3: #40916C;
  --green-deep: #102A20;
  --green-soft: #E8F1EB;

  --gold: #C08A2E;
  --gold-2: #D4A73E;
  --gold-soft: #FBF0D8;

  --cta: #1B4332;
  --cta-2: #2D6A4F;
  --cta-press: #12301F;

  --warn: #9A6410;
  --warn-soft: #FDF4E3;

  --radius: 18px;
  --radius-lg: 26px;
  --radius-sm: 12px;

  --shadow: 0 8px 24px rgba(27, 67, 50, .09);
  --shadow-lg: 0 22px 55px rgba(16, 42, 32, .18);

  --wrap: 520px;
  --dock-h: 74px;

  --font: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------------------------------------------------------
   2. Reset
   --------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 74px;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
}

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

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

.hidden { display: none !important; }

.ic {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
}

/* ---------------------------------------------------------
   3. Layout helpers
   --------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 18px;
}

.sec { padding: 54px 0; }
.sec--soft { background: var(--bg-2); }

.sec--green {
  background:
    radial-gradient(120% 60% at 50% 0%, #24583F 0%, transparent 60%),
    var(--green);
  color: #EAF3EC;
}

.sec--order { padding-bottom: 62px; }

.kicker {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gold);
  margin-bottom: 6px;
}
.kicker--on-green { color: var(--gold-2); }

.h2 {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.45;
  color: var(--green);
  margin-bottom: 16px;
}
.h2--on-green { color: #FFFFFF; }

.lead {
  color: var(--text-dim);
  margin-bottom: 22px;
  font-size: 1rem;
}
.sec--green .lead { color: #C9DDD1; }

/* ---------------------------------------------------------
   4. Buttons
   --------------------------------------------------------- */
.btn {
  --btn-bg: linear-gradient(135deg, var(--cta-2), var(--cta));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--btn-bg);
  color: #FFF;
  font-weight: 700;
  font-size: 1rem;
  padding: 13px 22px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(27, 67, 50, .25);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: translateY(1px) scale(.99); }

@media (hover: hover) {
  .btn:hover { filter: brightness(1.06); box-shadow: 0 14px 28px rgba(27, 67, 50, .3); }
}

/* Keyboard users get a ring; mouse users never see it. */
.btn:focus-visible,
.q summary:focus-visible,
.brand:focus-visible {
  outline: 3px solid var(--gold-2);
  outline-offset: 3px;
}

.btn--sm { padding: 8px 16px; font-size: .88rem; box-shadow: none; }
.btn--lg { padding: 16px 26px; font-size: 1.06rem; width: 100%; }
.btn--block { width: 100%; }

.btn--ghost {
  background: transparent;
  color: var(--green);
  border: 1.5px solid var(--green-3);
  box-shadow: none;
}

/* The one deliberately loud animation: the hero call to action. */
.pulse { animation: pulse 2.6s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 10px 22px rgba(27, 67, 50, .25); }
  50%      { box-shadow: 0 10px 22px rgba(27, 67, 50, .25), 0 0 0 12px rgba(45, 106, 79, .10); }
}

/* ---------------------------------------------------------
   5. Navbar
   --------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(251, 248, 242, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

.nav.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 20px rgba(27, 67, 50, .07);
}

.nav__in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand { display: flex; align-items: center; gap: 10px; }

.brand__mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--green-2), var(--green));
  color: var(--gold-2);
  flex: none;
}
.brand__mark .ic { width: 20px; height: 20px; }

.brand__mark--lg {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  margin: 0 auto 12px;
}
.brand__mark--lg .ic { width: 28px; height: 28px; }

.brand__txt { display: flex; flex-direction: column; line-height: 1.25; }
.brand__txt b { font-size: .98rem; color: var(--green); letter-spacing: .01em; }
.brand__txt i { font-style: normal; font-size: .72rem; color: var(--text-mute); }

/* ---------------------------------------------------------
   6. Hero
   --------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 30px 0 0;
  background:
    radial-gradient(90% 55% at 80% 0%, #EFF6F0 0%, transparent 70%),
    var(--bg);
  text-align: center;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}
.blob--1 {
  width: 260px; height: 260px;
  top: -70px; inset-inline-start: -80px;
  background: #CFE6D8;
  animation: drift 15s ease-in-out infinite;
}
.blob--2 {
  width: 220px; height: 220px;
  top: 190px; inset-inline-end: -90px;
  background: #F4E3BE;
  animation: drift 19s ease-in-out infinite reverse;
}

@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(18px, 26px, 0) scale(1.12); }
}

.hero__in { position: relative; z-index: 1; }

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--green-2);
  background: var(--green-soft);
  border: 1px solid #D6E7DC;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.hero__h1 {
  font-size: clamp(2rem, 10vw, 2.6rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--green);
  margin-bottom: 12px;
}

.hero__h1 .hl {
  position: relative;
  display: inline-block;
  color: var(--gold);
}
.hero__h1 .hl::after {
  content: '';
  position: absolute;
  inset-inline: -2px;
  bottom: 4px;
  height: 9px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(212, 167, 62, .28), rgba(212, 167, 62, .07));
  z-index: -1;
}

.hero__sub {
  color: var(--text-dim);
  font-size: 1.02rem;
  max-width: 33ch;
  margin: 0 auto 20px;
}

/* --- the bottle --- */
.hero__art {
  position: relative;
  margin: 6px auto 22px;
  width: min(74%, 300px);
}

.hero__art .glow {
  position: absolute;
  inset: 12% 6% 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(64, 145, 108, .35), transparent 72%);
  filter: blur(18px);
  z-index: 0;
}

.hero__art img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
}

.float { animation: float 6s ease-in-out infinite; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

.tag {
  position: absolute;
  z-index: 2;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: var(--shadow);
  white-space: nowrap;
}

.tag--price {
  inset-inline-start: -14px;
  top: 16%;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  width: 78px;
  height: 78px;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gold-2), var(--gold));
  color: #FFF;
  animation: pop 3.4s ease-in-out infinite;
}
.tag--price b { font-size: 1.32rem; }
.tag--price i { font-style: normal; font-size: .58rem; font-weight: 600; opacity: .95; }

.tag--deal {
  inset-inline-end: -10px;
  bottom: 14%;
  background: var(--surface);
  color: var(--green);
  border: 1px solid var(--line);
  font-size: .8rem;
  padding: 7px 13px;
}

@keyframes pop {
  0%, 100% { transform: scale(1) rotate(-4deg); }
  50%      { transform: scale(1.07) rotate(-4deg); }
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
}
.chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--green-2);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 6px 12px;
}
.chips .ic { width: 15px; height: 15px; color: var(--gold); }

.wave {
  height: 26px;
  background: var(--bg-2);
  -webkit-mask: radial-gradient(28px 26px at 50% 0, transparent 98%, #000) repeat-x;
  mask: radial-gradient(28px 26px at 50% 0, transparent 98%, #000) repeat-x;
  -webkit-mask-size: 56px 26px;
  mask-size: 56px 26px;
}

/* ---------------------------------------------------------
   7. Problem
   --------------------------------------------------------- */
.split { display: grid; gap: 18px; }

.fig { border-radius: var(--radius); overflow: hidden; }

.fig--itch img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.split__txt p { color: var(--text-dim); margin-bottom: 14px; }
.split__txt b { color: var(--text); }

.ticks { display: grid; gap: 9px; }
.ticks li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: .95rem;
  color: var(--text-dim);
}
.ticks .ic {
  width: 18px; height: 18px;
  color: var(--green-3);
  margin-top: 6px;
}
.ticks--sm li { font-size: .88rem; }

.fig--lice {
  margin-top: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 10px 4px;
  box-shadow: var(--shadow);
}
.fig--lice img { border-radius: 12px; width: 100%; }
.fig--lice figcaption {
  font-size: .8rem;
  color: var(--text-mute);
  padding: 9px 4px 8px;
  text-align: center;
}

/* ---------------------------------------------------------
   8. Cards
   --------------------------------------------------------- */
.cards { display: grid; gap: 12px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 4px 14px rgba(27, 67, 50, .05);
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
  .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
}

.card__ic {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--green-soft);
  color: var(--green-2);
  margin-bottom: 10px;
}
.card__ic .ic { width: 22px; height: 22px; }

.card h3 { font-size: 1.02rem; color: var(--green); margin-bottom: 4px; }
.card p { font-size: .9rem; color: var(--text-dim); line-height: 1.65; }

.disclaim {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 20px;
  padding: 14px 15px;
  background: var(--warn-soft);
  border: 1px solid #EFDDB8;
  border-radius: var(--radius-sm);
  font-size: .87rem;
  color: var(--warn);
  line-height: 1.6;
}
.disclaim .ic { width: 19px; height: 19px; margin-top: 5px; }

/* ---------------------------------------------------------
   9. Steps
   --------------------------------------------------------- */
.fig--apply {
  width: min(70%, 260px);
  margin: 4px auto 24px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.fig--apply img { width: 100%; }

.steps { display: grid; gap: 12px; }

.step {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius);
  padding: 14px 15px;
}

.step__n {
  flex: none;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gold-2), var(--gold));
  color: #fff;
  font-weight: 800;
  font-size: .98rem;
}

.step h3 { font-size: 1rem; color: #FFF; margin-bottom: 2px; }
.step p { font-size: .89rem; color: #C4D8CB; line-height: 1.65; }

.tipbox {
  margin-top: 18px;
  background: rgba(212, 167, 62, .12);
  border: 1px solid rgba(212, 167, 62, .3);
  border-radius: var(--radius);
  padding: 16px;
}
.tipbox h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--gold-2);
  margin-bottom: 6px;
}
.tipbox p { font-size: .89rem; color: #CFE0D4; line-height: 1.7; }

/* ---------------------------------------------------------
   10. Gallery
   --------------------------------------------------------- */
.gal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.gal figure { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.gal img { width: 100%; height: 100%; object-fit: cover; }
.gal__a { grid-column: 1 / -1; }
.gal__b, .gal__c { aspect-ratio: 1 / 1; }

/* ---------------------------------------------------------
   11. Offer
   --------------------------------------------------------- */
.offers { display: grid; gap: 14px; }

.offer {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  box-shadow: var(--shadow);
}

.offer--best {
  border-color: var(--green-3);
  box-shadow: 0 16px 38px rgba(27, 67, 50, .16);
}

.offer__flag {
  position: absolute;
  top: -12px;
  inset-inline-start: 18px;
  background: linear-gradient(140deg, var(--gold-2), var(--gold));
  color: #fff;
  font-size: .74rem;
  font-weight: 800;
  padding: 4px 13px;
  border-radius: 999px;
  box-shadow: var(--shadow);
}

.offer h3 { font-size: 1.1rem; color: var(--green); margin-bottom: 2px; }

.offer__p { line-height: 1.2; margin-bottom: 4px; }
.offer__p b { font-size: 2.1rem; font-weight: 800; color: var(--green); }
.offer__p i { font-style: normal; font-size: .84rem; color: var(--text-mute); }

.offer__save {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--gold);
  background: var(--gold-soft);
  border-radius: 999px;
  padding: 3px 11px;
  margin-bottom: 10px;
}

.offer .ticks { margin: 10px 0 16px; }
.offer .btn { width: 100%; }

/* ---------------------------------------------------------
   12. Order box (the form appears twice: hero and bottom)
   --------------------------------------------------------- */

/* The hero is centred; the form inside it must not be. */
.orderbox { text-align: start; }

.orderbox--hero { padding-bottom: 34px; }

.orderbox__h {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--green);
  text-align: center;
  line-height: 1.5;
}

.orderbox__s {
  font-size: .85rem;
  color: var(--text-dim);
  text-align: center;
  margin-bottom: 12px;
}

/* Only the hero copy gets the attention-seeking button. */
.orderbox--hero .form { box-shadow: var(--shadow-lg); }
.orderbox--hero .submit-btn { animation: pulse 2.6s ease-in-out infinite; }

.form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  box-shadow: var(--shadow);
}

/* .field is itself the <label>, so the input needs no id to be clickable. */
.field { display: block; margin-bottom: 15px; }

.field__l {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  padding: 13px 15px;
  background: #FCFBF8;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.field input::placeholder { color: #B6BDB7; font-size: .92rem; }

.field input:focus {
  background: #fff;
  border-color: var(--green-3);
  box-shadow: 0 0 0 4px rgba(64, 145, 108, .13);
}

.err {
  display: none;
  font-size: .8rem;
  color: #B4362F;
  margin-top: 5px;
}
.field.invalid input { border-color: #E0A29D; background: #FEF7F6; }
.field.invalid .err { display: block; }

.packs { border: 0; margin: 4px 0 14px; }
.packs legend {
  font-size: .88rem;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 8px;
}

.pack { display: block; cursor: pointer; margin-bottom: 9px; }
.pack input { position: absolute; opacity: 0; pointer-events: none; }

.pack__box {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: #FCFBF8;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.pack__box b { font-size: .96rem; color: var(--text); }
.pack__box i { font-style: normal; font-size: .84rem; color: var(--text-mute); }

.pack__box em {
  font-style: normal;
  font-size: .68rem;
  font-weight: 700;
  color: #fff;
  background: var(--gold);
  border-radius: 999px;
  padding: 2px 8px;
  margin-inline-start: 6px;
  vertical-align: middle;
}

/* The radio itself is invisible, so the focus ring goes on its box. */
.pack input:focus-visible + .pack__box {
  outline: 3px solid var(--gold-2);
  outline-offset: 2px;
}

.pack.is-on .pack__box {
  border-color: var(--green-3);
  background: var(--green-soft);
  box-shadow: 0 0 0 3px rgba(64, 145, 108, .12);
}
.pack.is-on .pack__box i { color: var(--green-2); }

.total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px;
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
  background: var(--green-soft);
  border: 1px dashed #BBD8C6;
}
.total span { font-size: .92rem; color: var(--green-2); font-weight: 600; }
.total b { font-size: 1.16rem; color: var(--green); font-weight: 800; }

.form__note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: .82rem;
  color: var(--text-mute);
  margin-top: 12px;
  line-height: 1.6;
}
.form__note .ic { width: 17px; height: 17px; margin-top: 5px; color: var(--green-3); }

.spinner {
  width: 17px; height: 17px;
  border: 2.5px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  display: inline-block;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#submitBtn:disabled { opacity: .8; cursor: default; }

/* --- confirmation --- */
.done {
  background: var(--surface);
  border: 1px solid var(--green-3);
  border-radius: var(--radius-lg);
  padding: 30px 20px;
  text-align: center;
  box-shadow: var(--shadow);
  animation: rise .4s ease both;
}
.done__ic {
  width: 62px; height: 62px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green-2);
}
.done__ic .ic { width: 32px; height: 32px; }
.done h3 { font-size: 1.2rem; color: var(--green); margin-bottom: 6px; }
.done p { color: var(--text-dim); font-size: .95rem; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------
   13. Safety
   --------------------------------------------------------- */
.warns { display: grid; gap: 10px; }
.warns li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-inline-start: 3px solid var(--gold-2);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  font-size: .89rem;
  color: var(--text-dim);
  line-height: 1.65;
}
.warns .ic { width: 18px; height: 18px; color: var(--warn); margin-top: 5px; }

/* ---------------------------------------------------------
   14. FAQ
   --------------------------------------------------------- */
.faq { display: grid; gap: 9px; }

.q {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 15px;
  font-weight: 700;
  font-size: .96rem;
  color: var(--green);
  cursor: pointer;
  list-style: none;
}
.q summary::-webkit-details-marker { display: none; }

.q__x {
  width: 19px; height: 19px;
  color: var(--gold);
  transition: transform .25s ease;
}
.q[open] .q__x { transform: rotate(45deg); }

.q p {
  padding: 0 15px 15px;
  font-size: .9rem;
  color: var(--text-dim);
  line-height: 1.75;
  animation: rise .28s ease both;
}

/* ---------------------------------------------------------
   15. Footer
   --------------------------------------------------------- */
.foot {
  background: var(--green-deep);
  color: #B9CDC0;
  text-align: center;
  padding: 34px 0 30px;
}
.foot__b { font-size: 1.1rem; font-weight: 800; color: #fff; }
.foot__s { font-size: .84rem; margin-top: 3px; }
.foot__c {
  font-size: .75rem;
  color: #7C9587;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

/* ---------------------------------------------------------
   16. Sticky dock
   --------------------------------------------------------- */
.dock {
  position: fixed;
  z-index: 70;
  inset-inline: 0;
  bottom: 0;
  height: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 16px env(safe-area-inset-bottom, 0px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(115%);
  transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}
.dock.up { transform: none; }

.dock__p { line-height: 1.15; }
.dock__p b { font-size: 1.3rem; font-weight: 800; color: var(--green); }
.dock__p i { display: block; font-style: normal; font-size: .68rem; color: var(--text-mute); }

.dock__btn { padding: 12px 24px; }

/* ---------------------------------------------------------
   17. Scroll reveal
   --------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .3, 1);
}
.reveal.seen { opacity: 1; transform: none; }

/* Stagger whatever sits in a grid of siblings. */
.cards .reveal:nth-child(2), .steps .reveal:nth-child(2),
.warns .reveal:nth-child(2), .faq .reveal:nth-child(2) { transition-delay: .06s; }
.cards .reveal:nth-child(3), .steps .reveal:nth-child(3),
.warns .reveal:nth-child(3), .faq .reveal:nth-child(3) { transition-delay: .12s; }
.cards .reveal:nth-child(4), .steps .reveal:nth-child(4),
.warns .reveal:nth-child(4), .faq .reveal:nth-child(4) { transition-delay: .18s; }
.steps .reveal:nth-child(5), .warns .reveal:nth-child(5),
.faq .reveal:nth-child(5) { transition-delay: .24s; }

/* ---------------------------------------------------------
   18. Wider screens
   --------------------------------------------------------- */
@media (min-width: 720px) {
  :root { --wrap: 700px; }

  .sec { padding: 70px 0; }
  .h2 { font-size: 1.85rem; }

  .split { grid-template-columns: 1fr 1fr; align-items: center; gap: 26px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .offers { grid-template-columns: 1fr 1fr; align-items: start; }
  .gal { grid-template-columns: repeat(3, 1fr); }
  .gal__a { grid-column: auto; }
  .gal__a, .gal__b, .gal__c { aspect-ratio: 1 / 1; }

  .fig--apply { width: min(46%, 300px); }
  .hero__art { width: min(56%, 320px); }
  .btn--lg { width: auto; }
  .btn--block { width: 100%; }
}

@media (min-width: 1040px) {
  :root { --wrap: 980px; }

  .hero { padding-top: 46px; }
  .hero__h1 { font-size: 3rem; }
  .hero__sub { font-size: 1.1rem; max-width: 46ch; }
  .cards { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: 1fr 1fr; }
  .form { max-width: 620px; margin-inline: auto; }
  .done { max-width: 620px; margin-inline: auto; }
  .offers { max-width: 760px; margin-inline: auto; }

  /* The dock is a phone affordance; on a desktop the page is short enough. */
  .dock { display: none; }
  body { padding-bottom: 0; }
}

/* ---------------------------------------------------------
   19. Reduced motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}