/* =========================================================
   دعامة الركبة — Knee brace (Mauritania)
   Arabic RTL COD landing (Mauritania). Hand-written CSS,
   no framework, no runtime compiler. Mobile-first.
   ========================================================= */

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

/* ---------------------------------------------------------
   1. Tokens — brand green + gold on cream
   --------------------------------------------------------- */
:root {
  --bg: #FBF8F1;
  --bg-2: #F4EFE2;
  --surface: #FFFFFF;
  --line: #E4DBC6;
  --line-soft: #EFE8D8;

  --text: #2A3320;
  --text-dim: #5F6B50;
  --text-mute: #8C9679;

  /* Brand */
  --green: #123B73;
  --green-2: #1E5BB8;
  --green-deep: #0E2A54;
  --green-soft: #E6EEFA;

  --gold: #E1873A;
  --gold-2: #F0A657;
  --gold-soft: #FDEDDD;

  --cta: #1E5BB8;
  --cta-2: #3B7DE0;
  --cta-press: #123B73;

  --ok: #2E9E6B;
  --warn: #B4791A;

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

  --shadow: 0 8px 24px rgba(18, 59, 115, 0.09);
  --shadow-lg: 0 22px 55px rgba(14, 42, 84, 0.16);

  --maxw: 480px;

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

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

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

button {
  cursor: pointer;
  background: none;
  border: 0;
}

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

/* ---------------------------------------------------------
   3. Shell — phone-width column, centred on desktop
   --------------------------------------------------------- */
.shell {
  max-width: var(--maxw);
  margin-inline: auto;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 80px rgba(14, 42, 84, 0.10);
}

.wrap {
  padding-inline: 18px;
  margin-inline: auto;
}

section {
  padding-block: 50px;
  position: relative;
}

/* ---------------------------------------------------------
   4. Typography
   --------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  background: var(--green-soft);
  border: 1px solid var(--line);
  padding: 6px 13px;
  border-radius: 999px;
  margin-bottom: 13px;
}

.eyebrow svg {
  width: 14px;
  height: 14px;
}

h1 {
  font-size: clamp(27px, 8vw, 36px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(22px, 6.2vw, 28px);
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 9px;
}

h3 {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.45;
}

.lead {
  color: var(--text-dim);
  font-size: 15px;
}

.section-head {
  text-align: center;
  margin-bottom: 26px;
}

.section-head .lead {
  max-width: 36ch;
  margin-inline: auto;
}

.hl {
  color: var(--green);
}

.hl-gold {
  color: var(--gold);
}

/* ---------------------------------------------------------
   5. Announcement + nav
   --------------------------------------------------------- */
.announce {
  background: linear-gradient(90deg, var(--green-deep), var(--green-2), var(--green-deep));
  color: #fff;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 14px;
  position: relative;
  z-index: 40;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  background: rgba(251, 248, 241, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s, background 0.25s;
}

.nav.scrolled {
  border-bottom-color: var(--line);
  background: rgba(251, 248, 241, 0.97);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.15;
}

.brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--green-2), var(--green-deep));
  color: var(--gold-2);
  box-shadow: 0 4px 12px rgba(18, 59, 115, 0.28);
  flex-shrink: 0;
}

.brand-mark svg {
  width: 19px;
  height: 19px;
}

.brand small {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-mute);
  letter-spacing: 0.1em;
}

.nav-cta {
  background: var(--cta);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 15px;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform 0.15s, background 0.2s;
}

.nav-cta:active {
  transform: scale(0.96);
  background: var(--cta-press);
}

/* ---------------------------------------------------------
   6. Buttons
   --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 16px 22px;
  border-radius: 15px;
  font-weight: 800;
  font-size: 16.5px;
  transition: transform 0.15s, box-shadow 0.25s, background 0.2s;
}

.btn svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--cta-2), var(--cta));
  color: #fff;
  box-shadow: 0 10px 26px rgba(30, 91, 184, 0.36);
}

.btn-primary > * {
  position: relative;
  z-index: 1;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg);
  animation: shine 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shine {
  0% { left: -60%; }
  55%, 100% { left: 140%; }
}

.btn-primary:active {
  transform: scale(0.975);
}

.pulse {
  animation: pulseRing 2.2s ease-out infinite;
}

@keyframes pulseRing {
  0% { box-shadow: 0 10px 26px rgba(30, 91, 184, 0.36), 0 0 0 0 rgba(30, 91, 184, 0.5); }
  70% { box-shadow: 0 10px 26px rgba(30, 91, 184, 0.36), 0 0 0 14px rgba(30, 91, 184, 0); }
  100% { box-shadow: 0 10px 26px rgba(30, 91, 184, 0.36), 0 0 0 0 rgba(30, 91, 184, 0); }
}

.cta-move {
  animation: ctaBob 2.6s ease-in-out infinite;
}

.pulse.cta-move {
  animation: pulseRing 2.2s ease-out infinite, ctaBob 2.6s ease-in-out infinite;
}

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

.cta-move:active {
  filter: brightness(0.94);
}

/* ---------------------------------------------------------
   7. Hero
   --------------------------------------------------------- */
.hero {
  padding-top: 24px;
  padding-bottom: 34px;
  text-align: center;
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  top: -40px;
  left: 50%;
  width: 430px;
  height: 340px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 0%, rgba(30, 91, 184, 0.14), transparent 65%);
  pointer-events: none;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero-sub {
  color: var(--text-dim);
  font-size: 15px;
  margin-top: 11px;
  margin-inline: auto;
  max-width: 38ch;
}

.figure {
  margin-top: 20px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  background: var(--surface);
}

.figure img {
  width: 100%;
}

.price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.price-now {
  font-size: 42px;
  font-weight: 800;
  color: var(--green);
  line-height: 1;
}

.price-cur {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dim);
}

.price-note {
  font-size: 13.5px;
  color: var(--text-mute);
  margin-top: 6px;
}

.hero-actions {
  margin-top: 18px;
}

/* ---------------------------------------------------------
   8. Trust strip
   --------------------------------------------------------- */
.trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 15px 12px;
  background: var(--green-deep);
  color: #fff;
}

.trust-item {
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
  opacity: 0.95;
}

.trust-item svg {
  width: 21px;
  height: 21px;
  margin: 0 auto 5px;
  color: var(--gold-2);
  display: block;
}

/* ---------------------------------------------------------
   9. Benefits
   --------------------------------------------------------- */
.benefits {
  display: grid;
  gap: 10px;
}

.benefit {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 15px;
  box-shadow: var(--shadow);
  transition: transform 0.25s, border-color 0.25s;
}

.benefit:hover {
  transform: translateY(-2px);
  border-color: var(--green-2);
}

.benefit-ico {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--green-soft);
  color: var(--green);
}

.benefit-ico svg {
  width: 22px;
  height: 22px;
}

.benefit h3 {
  font-size: 15px;
  margin-bottom: 2px;
}

.benefit p {
  font-size: 13.5px;
  color: var(--text-mute);
  line-height: 1.6;
}

/* ---------------------------------------------------------
   10. Steps (how to use)
   --------------------------------------------------------- */
.steps {
  display: grid;
  gap: 10px;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 15px;
  box-shadow: var(--shadow);
}

.step-num {
  width: 31px;
  height: 31px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-weight: 800;
  font-size: 14.5px;
}

.step h3 {
  font-size: 15px;
  margin-bottom: 1px;
}

.step p {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.6;
}

/* ---------------------------------------------------------
   11. Nutrition table
   --------------------------------------------------------- */
.nutri {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.nutri-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 15px;
  font-size: 13.5px;
  background: var(--surface);
}

.nutri-row:nth-child(odd) {
  background: var(--bg-2);
}

.nutri-row dt {
  color: var(--text-dim);
}

.nutri-row dd {
  font-weight: 700;
  color: var(--text);
}

.nutri-cap {
  font-size: 11.5px;
  color: var(--text-mute);
  text-align: center;
  margin-top: 8px;
}

/* ---------------------------------------------------------
   12. Order form
   --------------------------------------------------------- */
.order {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201, 162, 39, 0.12), transparent 70%),
    var(--bg-2);
  border-block: 1px solid var(--line);
}

.order-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 15px;
  box-shadow: var(--shadow-lg);
  max-width: 420px;
  margin-inline: auto;
}

.packs {
  display: grid;
  gap: 9px;
  margin-bottom: 15px;
}

.pack {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius);
  border: 2px solid var(--line);
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.pack input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pack-dot {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 2px solid var(--text-mute);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  transition: border-color 0.2s;
}

.pack-dot::after {
  content: '';
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--green);
  transform: scale(0);
  transition: transform 0.2s;
}

.pack-body {
  flex: 1;
  min-width: 0;
}

.pack-title {
  display: block;
  font-weight: 800;
  font-size: 15px;
}

.pack-sub {
  display: block;
  font-size: 12px;
  color: var(--text-mute);
  line-height: 1.4;
}

.pack-price {
  font-weight: 800;
  font-size: 17px;
  white-space: nowrap;
  color: var(--green);
}

.pack-save {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ok);
  text-align: left;
}

.pack.is-on {
  border-color: var(--green-2);
  background: var(--green-soft);
}

.pack.is-on .pack-dot {
  border-color: var(--green);
}

.pack.is-on .pack-dot::after {
  transform: scale(1);
}

.pack-tag {
  position: absolute;
  top: -9px;
  inset-inline-start: 13px;
  background: var(--gold);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
}

.field {
  margin-bottom: 11px;
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--text-dim);
}

.field input,
.field textarea {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-mute);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green-2);
  box-shadow: 0 0 0 3px rgba(30, 91, 184, 0.13);
}

.field textarea {
  resize: vertical;
  min-height: 60px;
}

.field.invalid input,
.field.invalid textarea {
  border-color: #C0392B;
}

.err {
  display: none;
  font-size: 12px;
  color: #C0392B;
  margin-top: 5px;
  font-weight: 600;
}

.field.invalid .err {
  display: block;
}

.total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  margin: 13px 0;
  border-radius: var(--radius);
  background: var(--gold-soft);
  border: 1px dashed var(--gold);
}

.total-label {
  font-size: 14px;
  color: var(--text-dim);
  font-weight: 700;
  line-height: 1.35;
}

.total-label em {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-mute);
}

.total-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--green-deep);
  white-space: nowrap;
}

.form-note {
  text-align: center;
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.form-note svg {
  width: 14px;
  height: 14px;
  color: var(--ok);
}

.spinner {
  width: 17px;
  height: 17px;
  border: 2.5px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.done {
  text-align: center;
  padding: 26px 16px;
}

.done-ico {
  width: 66px;
  height: 66px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(46, 158, 107, 0.12);
  border: 2px solid var(--ok);
  color: var(--ok);
  animation: popIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.done-ico svg {
  width: 32px;
  height: 32px;
}

@keyframes popIn {
  from { transform: scale(0.3); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.done h3 {
  font-size: 21px;
  margin-bottom: 8px;
}

.done p {
  color: var(--text-dim);
  font-size: 14.5px;
}

.hidden {
  display: none !important;
}

/* ---------------------------------------------------------
   13. Warnings
   --------------------------------------------------------- */
.warn {
  background: #FDF8EC;
  border: 1px solid #EBDCB6;
  border-radius: var(--radius);
  padding: 16px 17px;
}

.warn-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 14.5px;
  color: var(--warn);
  margin-bottom: 8px;
}

.warn-head svg {
  width: 18px;
  height: 18px;
}

.warn ul {
  list-style: none;
  display: grid;
  gap: 6px;
}

.warn li {
  position: relative;
  padding-inline-start: 16px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
}

.warn li::before {
  content: '';
  position: absolute;
  inset-inline-start: 3px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

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

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

.qa summary {
  padding: 14px 15px;
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
}

.qa summary::-webkit-details-marker {
  display: none;
}

.qa summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-inline-end: 2px solid var(--green-2);
  border-block-end: 2px solid var(--green-2);
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: transform 0.25s;
}

.qa[open] summary::after {
  transform: rotate(-135deg);
}

.qa-body {
  padding: 0 15px 14px;
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.65;
}

/* ---------------------------------------------------------
   15. Footer
   --------------------------------------------------------- */
.footer {
  background: var(--green-deep);
  color: #fff;
  padding: 30px 18px calc(84px + env(safe-area-inset-bottom, 0px));
  text-align: center;
}

.footer .brand {
  justify-content: center;
  margin-bottom: 10px;
}

.footer .brand small {
  color: rgba(255, 255, 255, 0.6);
}

.footer p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}

.footer .disclaimer {
  margin-top: 10px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  max-width: 42ch;
  margin-inline: auto;
}

/* ---------------------------------------------------------
   16. Sticky dock
   --------------------------------------------------------- */
.dock {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 35;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateY(120%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.dock.up {
  transform: translateY(0);
}

.dock-price {
  flex-shrink: 0;
  line-height: 1.2;
}

.dock-price b {
  font-size: 19px;
  font-weight: 800;
  color: var(--green);
}

.dock-price span {
  display: block;
  font-size: 10px;
  line-height: 1.3;
  color: var(--text-mute);
}

.dock .btn {
  padding: 13px 18px;
  font-size: 15px;
}

/* ---------------------------------------------------------
   17. Scroll reveal
   --------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.seen {
  opacity: 1;
  transform: none;
}

.reveal-group.seen > * {
  animation: riseIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.reveal-group.seen > *:nth-child(1) { animation-delay: 0.04s; }
.reveal-group.seen > *:nth-child(2) { animation-delay: 0.10s; }
.reveal-group.seen > *:nth-child(3) { animation-delay: 0.16s; }
.reveal-group.seen > *:nth-child(4) { animation-delay: 0.22s; }
.reveal-group.seen > *:nth-child(5) { animation-delay: 0.28s; }
.reveal-group.seen > *:nth-child(6) { animation-delay: 0.34s; }
.reveal-group.seen > *:nth-child(7) { animation-delay: 0.40s; }

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   18. Responsive — mobile-first above, widening from here.
   Phones keep the single column; from tablet up the page
   stops being a 480px strip and uses the screen.
   ========================================================= */

/* ---- Dense infographics -----------------------------------
   These artboards were drawn ~1000px wide. In the phone column they render at
   about 34% scale, so the Arabic text inside them lands around 6px — present
   but unreadable, and each one adds a screen of scrolling. The same content is
   already on the page as real HTML (the benefit cards and the numbered steps),
   which reflows and stays legible. So phones get the HTML and the artwork
   appears from tablet up, where it is actually readable. */
.only-wide {
  display: none;
}

/* ---- Large phones: a touch more breathing room ---------- */
@media (min-width: 400px) {
  .wrap {
    padding-inline: 22px;
  }
}

/* ---- Tablet ---------------------------------------------- */
@media (min-width: 620px) {
  :root {
    --maxw: 720px;
  }

  body {
    background:
      radial-gradient(ellipse 60% 50% at 50% 0%, rgba(30, 91, 184, 0.10), transparent 70%),
      #EDE7D8;
  }

  .wrap {
    padding-inline: 32px;
  }

  section {
    padding-block: 64px;
  }

  h1 {
    font-size: 40px;
  }

  h2 {
    font-size: 30px;
  }

  .hero-sub,
  .lead {
    font-size: 16.5px;
  }

  /* Two-up grids */
  .benefits,
  .steps {
    grid-template-columns: 1fr 1fr;
  }

  /* Wide enough for the infographic text to read */
  .only-wide {
    display: block;
  }

  /* Keep tall artwork from dominating the fold */
  .figure img {
    max-height: 640px;
    object-fit: contain;
    margin-inline: auto;
  }

  .trust {
    padding-block: 20px;
  }

  .trust-item {
    font-size: 13px;
  }

  .trust-item svg {
    width: 24px;
    height: 24px;
  }

  /* The dock is a phone affordance; on tablet+ the inline CTAs suffice. */
  .dock {
    display: none;
  }

  .footer {
    padding-bottom: 34px;
  }
}

/* ---- Desktop --------------------------------------------- */
@media (min-width: 1000px) {
  :root {
    --maxw: 1120px;
  }

  .wrap {
    padding-inline: 40px;
  }

  section {
    padding-block: 76px;
  }

  .shell {
    box-shadow: 0 0 120px rgba(14, 42, 84, 0.12);
  }

  /* Hero becomes two columns: copy beside the pack shot. */
  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* In RTL the first column is the right one, so the copy leads and the
       pack shot sits on the left. */
    grid-template-areas:
      'eyebrow media'
      'title   media'
      'sub     media'
      'price   media'
      'note    media'
      'cta     media';
    align-content: center;
    justify-items: start;
    text-align: start;
    gap: 0 48px;
    padding-block: 56px 64px;
  }

  .hero .eyebrow { grid-area: eyebrow; }
  .hero h1 { grid-area: title; font-size: 46px; }
  .hero .hero-sub { grid-area: sub; margin-inline: 0; text-align: start; }
  .hero .price-row { grid-area: price; justify-content: flex-start; }
  .hero .price-note { grid-area: note; }
  .hero .hero-actions { grid-area: cta; width: 100%; max-width: 340px; }

  .hero .figure {
    grid-area: media;
    margin-top: 0;
    align-self: center;
    width: 100%;
  }

  .hero .figure img {
    max-height: 560px;
  }

  /* Three-up benefits, two-up steps */
  .benefits {
    grid-template-columns: repeat(3, 1fr);
  }

  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Order section: form beside a reassurance panel */
  .order-card {
    max-width: 560px;
  }

  /* Side-by-side name/phone inside the wider card */
  .order-card .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
  }

  /* Constrain the tall artwork so it doesn't run the page long */
  .figure img {
    max-height: 720px;
  }

  .faq,
  .warn,
  .nutri {
    max-width: 780px;
    margin-inline: auto;
  }

  .qa summary,
  .qa-body {
    font-size: 15px;
  }
}

/* ---- Very wide: stop growing, just centre ---------------- */
@media (min-width: 1400px) {
  :root {
    --maxw: 1200px;
  }
}