@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/cairo-arabic-400.woff2?v=1b36945f") format("woff2");
}

@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./assets/cairo-arabic-700.woff2?v=673212b4") format("woff2");
}

:root {
  color-scheme: light;
  --ink: #26352f;
  --muted: #66736c;
  --paper: #fffdf9;
  --sand: #f5eee3;
  --sand-deep: #eadcc9;
  --line: #ded7cd;
  --brand: #287661;
  --brand-dark: #1d5d4d;
  --accent: #d56849;
  --success: #e6f3ec;
  --danger: #a52a2a;
  --shadow: 0 18px 45px rgba(38, 53, 47, 0.11);
  font-family: "Cairo", Tahoma, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 18px;
}

body {
  margin: 0;
  overflow-wrap: break-word;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

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

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

.shell {
  width: min(100% - 30px, 1080px);
  margin-inline: auto;
}

.section {
  padding-block: 58px;
}

.hero {
  padding-block: 18px 52px;
  background: linear-gradient(180deg, var(--sand) 0%, var(--paper) 100%);
}

.hero__grid {
  display: grid;
  gap: 30px;
}

.hero__media {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: 40vh;
  margin-inline: auto;
  width: fit-content;
  max-width: 100%;
  border-radius: 28px;
  background: var(--sand-deep);
  box-shadow: var(--shadow);
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eyebrow {
  margin: 0 0 7px;
  color: var(--brand);
  font-size: 1rem;
  font-weight: 900;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 16px;
  font-size: clamp(1.8rem, 8vw, 2.4rem);
  line-height: 1.18;
}

h2 {
  margin-bottom: 22px;
  font-size: clamp(1.75rem, 8vw, 2.8rem);
  line-height: 1.35;
}

h3 {
  margin-bottom: 9px;
  font-size: 1.35rem;
  line-height: 1.4;
}

.hero__subheadline,
.lead-copy {
  color: var(--muted);
  font-size: 1.08rem;
}

.hero__subheadline {
  margin-bottom: 26px;
}

.hero__offer-line {
  margin-bottom: 0;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
}

.button {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border: 0;
  border-radius: 16px;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}

.button--primary {
  width: 100%;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 11px 25px rgba(40, 118, 97, 0.24);
}

.button--primary:active {
  background: var(--brand-dark);
  transform: translateY(1px);
}

.button:focus-visible {
  outline: 3px solid rgba(213, 104, 73, 0.5);
  outline-offset: 3px;
}

.button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.objections-section {
  padding-block: 24px;
  background: var(--brand-dark);
  color: #fff;
}

.objections-list {
  display: grid;
  gap: 0;
}

.objections-list p {
  position: relative;
  margin: 0;
  padding: 13px 30px 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font-weight: 800;
  line-height: 1.65;
}

.objections-list p:last-child {
  border-bottom: 0;
}

.objections-list p::before {
  position: absolute;
  top: 13px;
  right: 0;
  content: "✓";
  color: #bce5d2;
  font-weight: 900;
}

.prose-shell {
  max-width: 760px;
}

.prose p {
  margin-bottom: 18px;
  font-size: 1.06rem;
}

.prose p:last-child,
.lead-copy:last-child {
  margin-bottom: 0;
}

.narrative-section {
  padding-top: 76px;
}

.turn-section {
  background: var(--sand);
}

.benefits-section {
  padding-block: 72px;
}

.benefits-list {
  display: grid;
  gap: 16px;
}

.benefit-card {
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(38, 53, 47, 0.06);
}

.benefit-card__copy p {
  margin: 0;
  color: var(--muted);
}

.benefit-card__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin: -10px -6px 20px;
  border-radius: 17px;
  background: var(--sand);
}

.benefit-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.repeat-cta {
  width: min(100%, 620px);
  margin: 34px auto 0;
}

.how-to-wear-section {
  background: var(--sand);
}

.content-card {
  padding: 28px 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow);
}

.content-card--accent {
  border-color: #c5dbd2;
  background: var(--success);
}

.check-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-right: 31px;
}

.check-list li::before {
  position: absolute;
  right: 0;
  content: "✓";
  color: var(--brand);
  font-weight: 900;
}

.size-guide__rows {
  display: grid;
  gap: 10px;
}

.size-guide__rows p {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgba(40, 118, 97, 0.2);
  border-radius: 14px;
  background: #fff;
  font-size: 1.05rem;
  font-weight: 900;
}

.section-note {
  margin: 20px 0 0;
  color: var(--muted);
}

.after-birth-section {
  background: var(--sand);
}

.offer-section {
  padding-block: 78px;
  background: var(--brand-dark);
  color: #fff;
}

.offer-card {
  max-width: 720px;
  padding: 30px 22px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.07);
}

.offer-card h2 {
  margin-bottom: 10px;
}

.offer-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 14px;
  margin-bottom: 6px;
  color: #fff1c8;
  line-height: 1.1;
}

.offer-price__compare {
  color: #d5eee6;
  font-size: 1.35rem;
  font-weight: 700;
  opacity: 0.82;
}

.offer-price__current {
  font-size: clamp(2.7rem, 15vw, 4.5rem);
  font-weight: 900;
}

.offer-price__saving {
  flex-basis: 100%;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
}

.offer-price-note {
  margin-bottom: 24px;
  color: #d5eee6;
  font-weight: 800;
}

.offer-card .check-list li::before {
  color: #bce5d2;
}

.order-section {
  padding-block: 64px;
  background: var(--sand);
}

.order-grid {
  display: grid;
  gap: 24px;
}

.order-intro p:last-child {
  color: var(--muted);
}

.order-card,
.success-card {
  display: grid;
  gap: 16px;
  padding: 21px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow);
}

.field {
  display: grid;
  gap: 6px;
}

.field label {
  font-size: 1rem;
  font-weight: 800;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 51px;
  padding: 10px 12px;
  border: 1px solid #c9cec9;
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font-size: 1rem;
  outline: none;
}

.field textarea {
  resize: vertical;
}

.variant-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.variant-option {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-inline-size: 120px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}

.variant-option input {
  position: absolute;
  opacity: 0;
}

.variant-option:has(input:checked) {
  border-color: var(--brand);
  background: var(--success);
  color: var(--brand-dark);
}

.variant-option:has(input:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.governorate-options {
  display: flex;
  gap: 10px;
}

.governorate-option {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  cursor: pointer;
}

.governorate-option input {
  position: absolute;
  opacity: 0;
}

.governorate-option:has(input:checked) {
  border-color: var(--brand);
  background: var(--success);
  color: var(--brand-dark);
}

.governorate-option:has(input:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.whatsapp-link {
  color: var(--brand);
  font-weight: 700;
  text-align: center;
}

.masthead__whatsapp {
  font-size: 0.78rem;
  white-space: nowrap;
}

.form-whatsapp {
  margin-top: -6px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(40, 118, 97, 0.13);
}

.shipping-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--success);
  color: var(--brand-dark);
}

.form-status {
  min-height: 1.5em;
  margin: 0;
  color: var(--danger);
  font-size: 1rem;
  font-weight: 700;
}

/* #form-status sits five fields below the phone input, so on a 390px screen a
   phone error scrolls out of sight exactly when focus() brings her back to the
   field. This one renders under the input she has to fix. */
.field__error {
  margin: 0.35rem 0 0;
  color: var(--danger);
  font-size: 0.9rem;
  font-weight: 700;
}

.field__error:empty {
  display: none;
}

.success-card {
  place-items: center;
  padding-block: 42px;
  text-align: center;
}

.success-card__icon,
.guarantee-card__icon {
  display: grid;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: var(--success);
  color: var(--brand);
  font-size: 1.5rem;
  font-weight: 900;
}

.serial {
  margin: 0;
  padding: 9px 15px;
  border-radius: 10px;
  background: var(--sand);
}

.faq-section {
  padding-block: 72px;
}

.faq-list {
  display: grid;
  gap: 11px;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
}

.faq-item summary {
  padding: 17px;
  font-weight: 900;
  cursor: pointer;
}

.faq-item p {
  padding: 0 17px 17px;
  margin: 0;
  color: var(--muted);
}

.guarantee-section {
  padding-top: 0;
}

.guarantee-card {
  display: flex;
  gap: 15px;
  padding: 23px;
  border: 1px solid #b8dfcf;
  border-radius: 22px;
  background: var(--success);
}

.guarantee-card h2,
.guarantee-card p {
  margin-bottom: 4px;
}

.final-cta-section {
  padding-block: 18px 78px;
}

.final-cta-section .shell {
  max-width: 620px;
}

.fatal-error {
  margin-block: 40px;
  padding: 20px;
  border: 1px solid #e8b3ad;
  border-radius: 14px;
  background: #fff2ef;
  color: var(--danger);
  text-align: center;
}

[hidden] {
  display: none !important;
}

@media (min-width: 760px) {
  .section {
    padding-block: 88px;
  }

  .hero {
    min-height: 92vh;
    padding-block: 42px;
  }

  h1 {
    font-size: clamp(3rem, 6vw, 4.3rem);
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    align-items: center;
    gap: 58px;
  }

  .hero__media {
    aspect-ratio: 1 / 1;
    max-height: none;
    width: 100%;
  }

  .objections-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

  .objections-list p {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 0;
  }

  .objections-list p:last-child {
    border-left: 0;
  }

  .benefits-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

  .benefit-card {
    padding: 28px;
  }

  .benefit-card--with-media {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 32px;
  }

  .benefit-card--with-media:nth-child(even) .benefit-card__media {
    order: 2;
  }

  .benefit-card__media {
    margin: 0;
  }

  .content-card,
  .offer-card {
    padding: 40px;
  }

  .order-grid {
    grid-template-columns: 0.7fr 1.3fr;
    align-items: start;
    gap: 52px;
  }

  .order-card {
    grid-template-columns: 1fr 1fr;
    padding: 29px;
  }

  .field--wide,
  .shipping-row,
  .form-status {
    grid-column: 1 / -1;
  }

  .success-card {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
/* ==========================================================================
   Track A theme (tohfa). Added 2026-08-12, revised same day.
   Scoped to [data-theme="tohfa"] so Track B keeps its own look off one template.
   Type: Almarai 800 display against Readex Pro 400/600 body. Chosen by rendering
   the real headline in eight Arabic faces and comparing; Almarai carries weight at
   headline size where Plex went reserved, and Readex is the most readable of the
   eight in long body text. Deliberately not Tajawal or Cairo, which every Arabic
   DTC page already uses.
   Colour: the product is bright yellow, so yellow arrives only through photography
   and the one warm price figure. Everything else is limestone, ink, petrol.
   Kept ASCII-only on purpose: this file is appended to by tooling.
   ========================================================================== */

@font-face {
  font-family: "Almarai";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./assets/almarai-800-arabic.woff2?v=7acac6ae") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "Almarai";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./assets/almarai-800-latin.woff2?v=7f9acc49") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212;
}

@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/readex-400-arabic.woff2?v=2c23706a") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/readex-400-latin.woff2?v=e846a3aa") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212;
}

@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./assets/readex-600-arabic.woff2?v=39fb8813") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./assets/readex-600-latin.woff2?v=d6318c6f") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212;
}

:root[data-theme="tohfa"] {
  /* Three text weights, and the gaps between them must be VISIBLE. The first cut used
     #161a18 / #3c433f / #6b726d and the page read as one colour, because 38 points of
     luminance between the top two tiers is below what the eye separates on cream. */
  --ink: #12191c;
  --body: #515b57;
  --muted: #838d88;

  --paper: #f7f3ec;
  --sand: #efe7d9;
  --sand-deep: #e4d8c2;
  --line: #dccfb8;
  --brand: #12595c;
  --brand-dark: #0c4144;
  --brand-soft: #d5eee6;
  --accent: #12595c;
  --price: #ffe1a3;
  --mist: #dce8e6;
  --shadow: 0 10px 0 -4px rgba(22, 26, 24, 0.09);
  --edge: 1.5px solid var(--ink);
  --offset: 5px 5px 0 -1px rgba(22, 26, 24, 0.14);

  font-family: "Readex Pro", "Cairo", Tahoma, Arial, sans-serif;
  color: var(--body);
}

/* The base sheet sets `body { color: var(--ink) }` (styles.css:47), which beats the
   inherited colour above and painted 64 of ~113 text elements at heading weight. The
   three tiers existed and almost nothing reached them. Running text starts at --body;
   the headings opt back up to --ink explicitly. */
:root[data-theme="tohfa"] body {
  color: var(--body);
}

/* ---- Type ------------------------------------------------------------- */

:root[data-theme="tohfa"] h1,
:root[data-theme="tohfa"] h2,
:root[data-theme="tohfa"] .offer-price,
:root[data-theme="tohfa"] .sticky-bar__price,
:root[data-theme="tohfa"] .masthead__name {
  font-family: "Almarai", "Readex Pro", Tahoma, Arial, sans-serif;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

:root[data-theme="tohfa"] h1 {
  font-size: clamp(1.62rem, 5.9vw, 2.2rem);
  color: var(--ink);
  margin: 0 0 12px;
}

/* Section headings carry the petrol, not the near-black. The accent was reaching only
   5 elements on the page (the eyebrows and a tick) and read as absent. */
:root[data-theme="tohfa"] h2 {
  font-size: clamp(1.42rem, 4.5vw, 1.7rem);
  color: var(--brand);
}

/* h3 measured LARGER than h2 (21.6px vs 20.5px) — the hierarchy was inverted. */
:root[data-theme="tohfa"] .benefits-list h3,
:root[data-theme="tohfa"] .faq-list summary {
  font-size: 1.2rem;
}

:root[data-theme="tohfa"] .eyebrow {
  font-family: "Readex Pro", Tahoma, Arial, sans-serif;
  /* Arabic needs more size than Latin at the same legibility; 12.2px was below the floor. */
  font-size: 0.87rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--brand);
  margin: 0 0 10px;
}

/* running text sits a step down from the headings, supporting detail a step below that */
:root[data-theme="tohfa"] .prose p,
:root[data-theme="tohfa"] .lead-copy,
:root[data-theme="tohfa"] .hero__subheadline,
:root[data-theme="tohfa"] .faq-list p,
:root[data-theme="tohfa"] .check-list li {
  color: var(--body);
}

:root[data-theme="tohfa"] .benefits-list p,
:root[data-theme="tohfa"] .section-note,
:root[data-theme="tohfa"] .masthead__tagline,
:root[data-theme="tohfa"] #order-copy {
  color: var(--muted);
}

:root[data-theme="tohfa"] .benefits-list h3,
:root[data-theme="tohfa"] .faq-list summary {
  color: var(--ink);
  font-weight: 600;
}

:root[data-theme="tohfa"] .offer-price,
:root[data-theme="tohfa"] .sticky-bar__price,
:root[data-theme="tohfa"] .hero__offer-line {
  font-variant-numeric: tabular-nums;
}

/* ---- Masthead --------------------------------------------------------- */

:root[data-theme="tohfa"] .masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

:root[data-theme="tohfa"] .masthead__inner {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
}

:root[data-theme="tohfa"] .masthead__name {
  font-size: 1.16rem;
  color: var(--ink);
}

:root[data-theme="tohfa"] .masthead__tagline {
  font-size: 0.87rem;
}

/* ---- Hero ------------------------------------------------------------- */

:root[data-theme="tohfa"] .hero {
  background: linear-gradient(180deg, var(--paper) 0%, var(--sand) 100%);
}

/* The hero was eating 373-443px and pushing the price line off the fold on a 360x640
   phone. The CONTAINER owns the ratio (base sheet .hero__media, max-height 40vh), so
   capping it here is what actually buys the space back; setting aspect-ratio on the img
   alone did nothing. */
:root[data-theme="tohfa"] .hero__media {
  /* The source is 1200x800 (3:2). object-fit:cover CROPS to whatever ratio the container
     declares, so the base sheet 4/5 was already cutting the sides and a 4/3 cut the top
     and bottom. Match the source and nothing is lost; the fold space comes from height
     alone, which shrinks both axes together. */
  aspect-ratio: 3 / 2;
  /* Cap the WIDTH, never the height. A max-height fights aspect-ratio and the height
     loses: the box keeps its width, gets shorter, and object-fit:cover silently crops
     the difference. Measured 2026-08-12 at 1440x900 — the box came out 553x270 (2.048)
     against a 3:2 source, a 36.5% crop that cut both panels off the before/after hero,
     while 360x640 passed by landing exactly on the boundary. 45vh of width IS 30vh of
     height at 3:2, so this buys the same fold space with the ratio guaranteed. */
  max-width: 45vh;
  margin-inline: auto;
}

@media (min-width: 760px) {
  :root[data-theme="tohfa"] .hero__media {
    max-width: none;
  }
}

:root[data-theme="tohfa"] .hero__grid {
  gap: 18px;
}

:root[data-theme="tohfa"] .hero__media img,
:root[data-theme="tohfa"] #hero-video {
  width: 100%;
  object-fit: cover;
  border: var(--edge);
  border-radius: 14px;
  box-shadow: var(--offset);
  background: var(--paper);
}

:root[data-theme="tohfa"] #demo-video {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin-inline: auto;
  border: var(--edge);
  border-radius: 14px;
  background: var(--paper);
}

:root[data-theme="tohfa"] .demo-section h2 {
  text-align: center;
}

:root[data-theme="tohfa"] .masthead__phone {
  margin-inline-start: auto;
  color: var(--brand);
  font-size: 0.87rem;
  font-weight: 700;
  white-space: nowrap;
}

:root[data-theme="tohfa"] .form-guarantee,
:root[data-theme="tohfa"] .form-contact {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
}

:root[data-theme="tohfa"] .form-guarantee {
  padding: 10px 12px;
  border-inline-start: 4px solid var(--brand);
  background: var(--success);
  color: var(--brand-dark);
}

:root[data-theme="tohfa"] .form-contact {
  text-align: center;
  color: var(--muted);
}

:root[data-theme="tohfa"] .form-contact a {
  color: var(--brand);
  font-weight: 700;
}

/* The second-most-read line on the page measured SMALLER than the story body (16.3 vs 17). */
:root[data-theme="tohfa"] .hero__subheadline {
  font-size: 1.12rem;
}

:root[data-theme="tohfa"] .hero__offer-line {
  display: block;
  margin: 4px 0 0;
  padding: 12px 16px;
  border: var(--edge);
  border-radius: 14px;
  /* The one commercial object in the hero, so it stops reading as another paragraph.
     Petrol ground rather than the near-black of the price plate further down: the two
     rhyme without competing, and the plate keeps the heavier weight. */
  background: var(--brand);
  color: var(--paper);
  font-family: "Almarai", "Readex Pro", Tahoma, Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.65;
  /* NOT text-wrap:balance — it optimises line evenness and split «الشحن مجاني» across
     lines. The copy carries non-breaking spaces inside each phrase instead, so the line
     can only break at the separators. */
}

:root[data-theme="tohfa"] .trust-row {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

:root[data-theme="tohfa"] .trust-row li {
  position: relative;
  padding-inline-start: 26px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--body);
}

:root[data-theme="tohfa"] .trust-row li::before {
  content: "\2713";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  color: var(--brand);
  font-weight: 700;
}

/* ---- Cards and sections ----------------------------------------------- */

:root[data-theme="tohfa"] .order-card,
:root[data-theme="tohfa"] .content-card,
:root[data-theme="tohfa"] .guarantee-card,
:root[data-theme="tohfa"] .success-card {
  border: var(--edge);
  border-radius: 16px;
  box-shadow: var(--offset);
  background: var(--paper);
}

:root[data-theme="tohfa"] .objections-section {
  background: var(--ink);
  color: var(--paper);
}

:root[data-theme="tohfa"] .benefits-section {
  background: var(--sand);
}

/* The price plate is the one dark block on a light page, and its text was written
   for a dark ground. Keeping the card cream is what made it unreadable. */
:root[data-theme="tohfa"] .offer-section {
  background: var(--sand);
}

:root[data-theme="tohfa"] .offer-card {
  background: var(--ink);
  color: var(--paper);
  border: var(--edge);
  border-radius: 16px;
  box-shadow: var(--offset);
}

:root[data-theme="tohfa"] .offer-card h2 {
  color: var(--paper);
}

:root[data-theme="tohfa"] .offer-price {
  color: var(--price);
}

:root[data-theme="tohfa"] .offer-price-note {
  color: #cfd8d3;
}

:root[data-theme="tohfa"] .offer-card .check-list li {
  color: var(--paper);
}

/* The single cool moment on the page. Heat is the argument, so the page drops
   its own temperature exactly where the argument turns. */
:root[data-theme="tohfa"] .turn-section {
  background: linear-gradient(180deg, var(--paper) 0%, var(--mist) 45%, var(--paper) 100%);
}

:root[data-theme="tohfa"] .faq-list details {
  border-bottom: 1px solid var(--line);
}

:root[data-theme="tohfa"] .final-cta-section {
  padding-bottom: 104px;
}

/* ---- Controls --------------------------------------------------------- */

:root[data-theme="tohfa"] .button--primary {
  background: var(--brand);
  color: #fff;
  border: var(--edge);
  border-radius: 12px;
  box-shadow: var(--offset);
  font-family: "Almarai", "Readex Pro", Tahoma, Arial, sans-serif;
  font-size: 1.06rem;
  font-weight: 800;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

:root[data-theme="tohfa"] .button--primary:hover {
  background: var(--brand-dark);
}

:root[data-theme="tohfa"] .button--primary:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 -1px rgba(22, 26, 24, 0.14);
}

:root[data-theme="tohfa"] label {
  color: var(--ink);
  font-weight: 600;
}

:root[data-theme="tohfa"] input:focus-visible,
:root[data-theme="tohfa"] select:focus-visible,
:root[data-theme="tohfa"] textarea:focus-visible,
:root[data-theme="tohfa"] button:focus-visible,
:root[data-theme="tohfa"] summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---- Sticky ask ------------------------------------------------------- */

:root[data-theme="tohfa"] .sticky-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  background: var(--paper);
  border-top: var(--edge);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

:root[data-theme="tohfa"] .sticky-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: 720px;
  margin: 0 auto;
  padding: 9px 14px;
}

:root[data-theme="tohfa"] .sticky-bar__price {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.96rem;
  line-height: 1.35;
  color: var(--ink);
}

:root[data-theme="tohfa"] .sticky-bar .button--primary {
  flex: 0 0 auto;
  width: auto;
  padding: 11px 16px;
  font-size: 1rem;
  white-space: nowrap;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="tohfa"] .button--primary {
    transition: none;
  }
}