/* =============================================================================
   JAHO — Public landing design layer
   Loaded LAST, over the landing theme (main.css).
   Structure:
     1. Fonts (Arabic self-hosted)   5. Header / nav
     2. Tokens                        6. Sections
     3. Base + type scale             7. Footer
     4. Utilities                     8. Arabic typography  (html[lang="ar"])
                                      9. Direction geometry ([dir="rtl"])
   RULES OF THE FILE
   - Sizes are px/clamp, NEVER rem: main.css sets html{font-size:14px}, so every
     rem here would silently ship 12.5% smaller than written.
   - New rules use LOGICAL properties (inline-start/end) so they mirror for free.
     The [dir="rtl"] block at the end carries ONLY what logical props cannot
     express: object-position, gradient angle, SVG mirroring, animation-name.
   - Script (html[lang="ar"]) and direction ([dir="rtl"]) are separate axes and
     live in separate blocks on purpose.
   ========================================================================== */

/* =============================================================================
   1. FONTS — IBM Plex Sans Arabic, self-hosted, Arabic unicode-range only.
   OFL-1.1. Same family the JAHO mobile apps ship, subset to the Arabic blocks
   so Latin still resolves to the theme's Rubik and only Arabic pulls Plex.
   The Bold face is declared 700..900 so the design layer's heavy weights map to
   a real Bold instead of a synthesised extra-bold (which closes Arabic counters).
   ========================================================================== */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../../jaho/fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../../jaho/fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2");
  font-weight: 500 600; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../../jaho/fonts/IBMPlexSansArabic-Bold.woff2") format("woff2");
  font-weight: 700 900; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

 /* Rubik ships its OWN Arabic glyphs, so a stack that names Rubik first never
   reaches Plex on an Arabic page: the 105KB of preloaded woff2 was downloaded
   and then never painted. Order therefore has to be chosen per script. The
   @font-face rules above are unicode-range'd to the Arabic blocks, so putting
   Plex first on an Arabic page still leaves Latin runs (JAHO, 250-650, 30g) on
   Rubik. Everything below points at the two variables so exactly one place
   decides which family wins. */
:root {
  --heading-fonts: "Rubik", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body-fonts:    "Rubik", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
}
html[lang="ar"], html[lang^="ar-"] {
  --heading-fonts: "IBM Plex Sans Arabic", "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body-fonts:    "IBM Plex Sans Arabic", "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body, input, textarea, button, select,
.jaho-hero__lead, .jaho-section__lead, .jaho-diet__lead {
  font-family: var(--body-fonts);
}
h1, h2, h3, h4, h5, h6,
.jaho-hero__title, .jaho-section__title, .jaho-diet__title {
  font-family: var(--heading-fonts);
}

/* =============================================================================
   2. TOKENS — the real JAHO brand marks.
   Brand green is a FILL colour. It is never text on a light ground (#13B983 on
   white is ~2.6:1); every green text uses --ja-primary-ink (~4.9:1).
   Orange has exactly ONE job on this page: the "coming soon" ribbon.
   ========================================================================== */
:root {
  --ja-primary:      #13B983;
  --ja-primary-rgb:  19, 185, 131;
  --ja-primary-600:  #0FA271;
  --ja-primary-700:  #0FA271;   /* legacy alias */
  --ja-primary-ink:  #0B6B4C;   /* the only green allowed as text on light */
  --ja-primary-900:  #083D2C;   /* dark surfaces: footer, launch card */

  --ja-accent:       #FA5709;
  --ja-accent-rgb:   250, 87, 9;
  --ja-accent-ink:   #C43C00;

  --ja-ink:      #14261C;
  --ja-body:     #3E4E45;
  --ja-muted:    #5A6B62;

  --ja-line:      #E2EAE5;
  --ja-surface:   #FFFFFF;
  --ja-surface-2: #F1F8F4;
  --ja-bg:        #F1F8F4;      /* legacy alias used by inner-page rules */

  /* radius scale */
  --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-pill: 999px;

  /* elevation scale */
  --sh-1: 0 6px 18px rgba(16,24,40,.06);
  --sh-2: 0 14px 32px rgba(16,24,40,.10);
  --sh-3: 0 24px 48px rgba(16,24,40,.14);

  /* spacing scale */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  /* type scale — px, because the root is 14px */
  --t-eyebrow: 13px;
  --t-body-sm: 15px;
  --t-body:    16px;
  --t-lead:    clamp(17px, 1.4vw, 19px);
  --t-h3:      20px;
  --t-h2:      clamp(26px, 3vw, 38px);
  --t-h1:      clamp(32px, 4.4vw, 54px);

  --ja-section-pad: clamp(56px, 8vw, 96px);
}

html { scroll-behavior: smooth; }
body { background: var(--ja-surface); }
#how, #launch, #why, #about, #healthy { scroll-margin-top: 96px; }

/* The theme's own accent paints .btn-base (through a ::before/::after gradient,
   not a background) and the active nav link. Re-point the theme variables at the
   JAHO brand so the page runs ONE accent — and override the two pseudo-element
   gradients directly, because a stale business_settings.backgroundChange value
   is injected inline in <head> and would otherwise put orange back. */
:root {
  --base-1: #13B983;
  --base-2: #0FA271;
  --base-rgb: 19, 185, 131;
}
.btn-base { background: var(--ja-primary); color: #fff; border-radius: var(--r-pill); font-weight: 700; box-shadow: 0 10px 22px rgba(var(--ja-primary-rgb), .26); }
.btn-base::before, .btn-base::after { border-radius: var(--r-pill); background-image: linear-gradient(90deg, var(--ja-primary) 0%, var(--ja-primary-600) 100%) !important; }
.btn-base * { color: #fff; }
.btn-base:hover { filter: brightness(.97); }

/* =============================================================================
   3. BASE CONTENT TYPOGRAPHY (about / privacy / terms bodies)
   ========================================================================== */
.about--content, .privacy-section .about--content, .main-body-div, .jaho-doc__card {
  color: var(--ja-body); line-height: 1.8; font-size: var(--t-body);
}
.about--content h1, .about--content h2, .about--content h3, .about--content h4,
.main-body-div h1, .main-body-div h2, .main-body-div h3,
.jaho-doc__card h1, .jaho-doc__card h2, .jaho-doc__card h3, .jaho-doc__card h4,
.privacy-section .section-header .title {
  color: var(--ja-ink); font-weight: 700; line-height: 1.32; margin: 1.4em 0 .5em;
}
.about--content h1:first-child, .about--content h2:first-child,
.jaho-doc__card h1:first-child, .jaho-doc__card h2:first-child { margin-top: 0; }
.about--content p, .main-body-div p, .jaho-doc__card p { margin-bottom: 1em; }
.about--content a, .main-body-div a, .jaho-doc__card a { color: var(--ja-primary-ink); }
.about--content ul, .about--content ol,
.jaho-doc__card ul, .jaho-doc__card ol { padding-inline-start: 1.3rem; margin-bottom: 1em; }
.about--content li, .jaho-doc__card li { margin-bottom: .4em; }
.about--content img, .jaho-doc__card img { max-width: 100%; height: auto; border-radius: var(--r-sm); }

/* =============================================================================
   4. SHARED PIECES
   ========================================================================== */

/* --- empty-content guard: a page body must never ship as a blank white box --- */
.jaho-empty {
  border: 1px dashed var(--ja-line); border-radius: var(--r-md);
  background: var(--ja-surface-2); padding: clamp(20px, 3vw, 32px);
  color: var(--ja-body); font-size: var(--t-body); line-height: 1.8; text-align: center;
}
.jaho-empty a { color: var(--ja-primary-ink); font-weight: 700; }

/* --- eyebrow chip --- */
.jaho-hero__eyebrow, .jaho-section__eyebrow {
  display: inline-block; color: var(--ja-primary-ink); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; font-size: var(--t-eyebrow);
  background: rgba(var(--ja-primary-rgb), .10); padding: 7px 14px;
  border-radius: var(--r-pill); margin-bottom: var(--sp-3);
}

/* --- inline "learn more" link --- */
.jaho-link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--ja-primary-ink); font-weight: 700; font-size: var(--t-body);
  text-decoration: none; min-height: 44px;
}
.jaho-link:hover { color: var(--ja-primary-600); text-decoration: underline; gap: 11px; }
.jaho-link svg { flex: 0 0 auto; }
/* the directional-arrow wrapper: a transformable box in both directions */
.jaho-icon--dir { display: inline-flex; align-items: center; flex: 0 0 auto; line-height: 0; }

/* --- solid pill button --- */
.jaho-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  background: var(--ja-primary); color: #fff; font-weight: 700; font-size: var(--t-body);
  border: 0; border-radius: var(--r-pill); min-height: 52px; padding: 0 28px;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 22px rgba(var(--ja-primary-rgb), .26);
  transition: filter .15s ease, transform .15s ease;
}
.jaho-btn:hover, .jaho-btn:focus { color: #fff; filter: brightness(.96); transform: translateY(-1px); }

/* --- app-store badges ------------------------------------------------------
   direction:ltr is UNCONDITIONAL. Official Apple/Google lockups must never
   mirror, so this lives in the base block and not in [dir="rtl"]. */
.jaho-badges { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-4) 0 0; }
.jaho-badges__caption { margin: var(--sp-3) 0 0; color: var(--ja-muted); font-size: var(--t-body-sm); }
.jaho-badge {
  direction: ltr;
  position: relative; display: inline-flex; align-items: center; gap: var(--sp-3);
  background: var(--ja-ink); color: #fff; min-height: 48px; padding: 8px 18px;
  border-radius: var(--r-pill); text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.jaho-badge span { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.jaho-badge small { font-size: 12px; opacity: .82; text-transform: uppercase; letter-spacing: .03em; }
.jaho-badge strong { font-size: var(--t-body); font-weight: 600; }
.jaho-badge svg { flex: 0 0 auto; }
a.jaho-badge:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--sh-2); }
.jaho-badge--light { background: #fff; color: var(--ja-ink); }
a.jaho-badge--light:hover { color: var(--ja-ink); }
/* disabled "coming soon" lockup — not an anchor, cannot be clicked */
.jaho-badge.is-soon { opacity: .62; cursor: default; transform: none; box-shadow: none; }
.jaho-badge.is-soon .jaho-badge__ribbon {
  position: absolute; inset-block-start: -9px; inset-inline-end: 10px;
  background: var(--ja-accent); color: #fff; font-size: 11px; font-weight: 700;
  line-height: 1; padding: 4px 8px; border-radius: var(--r-pill); letter-spacing: .02em;
}

/* --- trust chips (hero) --- */
.jaho-hero__proof {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) 18px;
  border: 1px solid var(--ja-line); border-radius: var(--r-pill);
  background: var(--ja-surface); padding: 10px 18px; margin: 0 0 var(--sp-5);
}
.jaho-hero__chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--ja-body); font-size: var(--t-body-sm); font-weight: 600; line-height: 1.4;
}
.jaho-hero__chip svg { flex: 0 0 auto; color: var(--ja-primary); }

/* =============================================================================
   5. HEADER / NAV
   ========================================================================== */
/* Fixed, not absolute: the theme positioned the header absolutely, so on a
   ~4,000px page it scrolled away after the first screen and the `header.active`
   glass state it still toggles could never be seen. Fixed keeps the nav, the
   CTA and the language switcher reachable, and lets the hero paint behind the
   floating card exactly as the design intends. Every first section below
   carries the matching top padding. */
header {
  position: fixed !important; top: 12px; inset-inline: 0; z-index: 1000;
  background: transparent !important;
}
.header-wrapper {
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(160%) blur(8px); backdrop-filter: saturate(160%) blur(8px);
  border: 1px solid var(--ja-line); border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  padding-inline: 18px; padding-block: 8px;
  gap: var(--sp-3);
  transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
header.active { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
header.active .header-wrapper {
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-color: rgba(255,255,255,.6); box-shadow: var(--sh-2);
}
@media (prefers-reduced-transparency: reduce) {
  .header-wrapper, header.active .header-wrapper {
    background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* logo — raise specificity past main.css so the 40px cap actually applies */
header .header-wrapper .logo img, .navbar-brand img { max-height: 40px; width: auto; }
@media (max-width: 575.98px) { header .header-wrapper .logo img { max-height: 32px; } }

/* menu links */
header .menu > li > a > svg { display: none !important; }
header .header-wrapper .menu > li > a {
  color: var(--ja-ink); font-weight: 700; font-size: var(--t-body-sm);
  display: inline-flex; align-items: center; position: relative;
  padding-block: 10px; text-decoration: none;
}
header .header-wrapper .menu > li > a:hover { color: var(--ja-primary-ink); }
header .header-wrapper .menu > li > a.active { color: var(--ja-primary-ink); font-weight: 700; }
header .header-wrapper .menu > li > a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--ja-primary); border-radius: 2px;
}

/* header CTA */
.jaho-nav-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  background: var(--ja-primary); color: #fff !important; font-weight: 700; font-size: var(--t-body-sm);
  min-height: 44px; padding: 0 20px; border-radius: var(--r-pill); text-decoration: none;
  white-space: nowrap; box-shadow: 0 8px 18px rgba(var(--ja-primary-rgb), .26);
  transition: filter .15s ease, transform .15s ease;
}
.jaho-nav-cta:hover { filter: brightness(.96); transform: translateY(-1px); }
@media (max-width: 575.98px) { .header-wrapper > .jaho-nav-cta { display: none; } }

/* language segmented control */
.jaho-langseg {
  display: inline-flex; align-items: stretch; border: 1px solid var(--ja-line);
  border-radius: var(--r-pill); overflow: hidden; background: #fff; flex: 0 0 auto;
}
.jaho-langseg__item {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 14px; font-size: var(--t-body-sm); font-weight: 600;
  color: var(--ja-body); text-decoration: none; white-space: nowrap; line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.jaho-langseg__item:hover { background: var(--ja-surface-2); color: var(--ja-ink); }
.jaho-langseg__item.is-active { background: var(--ja-primary); color: #fff; }
.jaho-langseg__item.is-active:hover { background: var(--ja-primary); color: #fff; }

 /* mobile toggle — 44x44 hit area.
   The theme built its X as rotate(45deg) translate(3px,10px): because translate
   is applied in the ALREADY-rotated frame it resolves to about (-5px, +9.2px),
   so the two bars crossed 1.6px apart and both slid ~5px past the inline-start
   edge of the 25px box — the X broke out of the header card at 390px. Rotating
   about the centre instead makes the two strokes meet exactly, inside the box.
   Margin is logical so the toggle sits correctly in RTL too. */
.nav-toggle {
  padding: 12px; margin-block: -12px; margin-inline: -12px 8px;
  box-sizing: content-box; width: 24px; height: 18px;
}
.nav-toggle span:first-child  { top: 0; bottom: auto; }
.nav-toggle span:nth-child(2) { top: 50%; bottom: auto; transform: translateY(-50%); }
.nav-toggle span:last-child   { top: auto; bottom: 0; }
.nav-toggle span { border-radius: 2px; background: var(--ja-ink); }
.nav-toggle.active span:first-child,
.nav-toggle.active span:last-child { top: 50%; bottom: auto; }
.nav-toggle.active span:first-child { transform: translateY(-50%) rotate(45deg); }
.nav-toggle.active span:last-child  { transform: translateY(-50%) rotate(-45deg); }

/* mobile menu sheet */
@media (max-width: 991.98px) {
  /* the theme's mobile menu is an inset ~260px popover floating over the hero
     photo; anchor it to the header card instead, as a full-width sheet */
  .header-wrapper { position: relative; }
  header .header-wrapper .menu {
    left: 0; right: 0; inset-inline: 0; width: auto;
    top: calc(100% + 14px); margin-top: 0;
    background: #fff; border: 1px solid var(--ja-line); border-radius: var(--r-md);
    box-shadow: var(--sh-2); padding: 10px 16px 16px;
  }
  header .header-wrapper .menu > li { width: 100%; border-bottom: 1px solid var(--ja-line); }
  header .header-wrapper .menu > li:last-child { border-bottom: 0; }
  header .header-wrapper .menu > li > a {
    width: 100%; min-height: 48px; padding-block: 12px; justify-content: flex-start;
  }
  header .header-wrapper .menu > li > a.active::after { display: none; }
  .jaho-menu-cta { display: block !important; margin-top: var(--sp-3); }
  /* `header .header-wrapper .menu > li > a` (0,2,3) sets justify-content:flex-start
     for the sheet's list rows and out-specifies `.jaho-menu-cta .jaho-nav-cta`
     (0,2,0), so the CTA label sat jammed against the inline-start edge of its own
     full-width pill. Re-state centring at the higher specificity. */
  header .header-wrapper .menu > li.jaho-menu-cta { border-bottom: 0; padding-top: var(--sp-2); }
  header .header-wrapper .menu > li.jaho-menu-cta > a.jaho-nav-cta {
    width: 100%; justify-content: center; text-align: center; padding-inline: 20px;
  }
}
.jaho-menu-cta { display: none; }

/* =============================================================================
   6. SECTIONS
   ========================================================================== */

/* --- hero --- */
.jaho-hero {
  position: relative;
  background: linear-gradient(180deg, var(--ja-surface-2) 0%, var(--ja-surface) 100%);
  padding: clamp(120px, 13vw, 172px) 0 clamp(40px, 5vw, 64px);
  overflow: hidden;
}
.jaho-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 12% 0%, rgba(var(--ja-primary-rgb), .14), transparent 70%);
}
.jaho-hero > .container { position: relative; }
.jaho-hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center;
}
.jaho-hero__title {
  color: var(--ja-ink); font-weight: 800; letter-spacing: -.02em;
  font-size: var(--t-h1); line-height: 1.1; margin: 0 0 var(--sp-4); text-wrap: balance;
}
.jaho-hero__lead {
  color: var(--ja-body); font-size: var(--t-lead); line-height: 1.7;
  margin: 0 0 var(--sp-5); max-width: 46ch;
}
.jaho-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin: 0 0 var(--sp-5); }
.jaho-hero__btn { /* alias of .jaho-btn, kept for the class name in the markup */
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  background: var(--ja-primary); color: #fff; font-weight: 700; font-size: var(--t-body);
  border-radius: var(--r-pill); min-height: 52px; padding: 0 28px; text-decoration: none;
  box-shadow: 0 10px 22px rgba(var(--ja-primary-rgb), .26);
  transition: filter .15s ease, transform .15s ease;
}
.jaho-hero__btn:hover { color: #fff; filter: brightness(.96); transform: translateY(-1px); }
.jaho-hero__media { text-align: center; }
.jaho-hero__img {
  width: 100%; max-width: 520px; aspect-ratio: 4 / 3.2; height: auto; object-fit: cover;
  object-position: center; border-radius: var(--r-lg); box-shadow: var(--sh-3);
}
/* kept for a future honest, data-driven stats row */
.jaho-hero__stats { display: flex; gap: clamp(20px, 4vw, 48px); flex-wrap: wrap; }
.jaho-hero__stat { display: flex; flex-direction: column; }
.jaho-hero__stat strong { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; color: var(--ja-ink); line-height: 1; }
.jaho-hero__stat span { color: var(--ja-body); font-size: var(--t-body-sm); margin-top: 6px; }

/* --- generic section shell --- */
.jaho-section { padding: var(--ja-section-pad) 0; }
.jaho-section--tint { background: var(--ja-surface-2); }
.jaho-section__head { text-align: center; max-width: 720px; margin: 0 auto clamp(32px, 5vw, 56px); }
.jaho-section__title {
  color: var(--ja-ink); font-weight: 800; letter-spacing: -.02em;
  font-size: var(--t-h2); line-height: 1.22; margin: 0; text-wrap: balance;
}
.jaho-section__lead { color: var(--ja-body); font-size: var(--t-body); line-height: 1.7; margin: 14px 0 0; }

/* --- how it works --- */
.jaho-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px); }
.jaho-step {
  position: relative; background: var(--ja-surface); border: 1px solid var(--ja-line);
  border-radius: var(--r-md); box-shadow: var(--sh-1);
  padding: clamp(22px, 2.6vw, 30px); text-align: start;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.jaho-step:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: rgba(var(--ja-primary-rgb), .3); }
.jaho-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-pill); margin-bottom: var(--sp-4);
  background: rgba(var(--ja-primary-rgb), .12); color: var(--ja-primary-ink);
  font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; line-height: 1;
}
.jaho-step h3 { color: var(--ja-ink); font-weight: 700; font-size: var(--t-h3); line-height: 1.35; margin: 0 0 var(--sp-2); }
.jaho-step p { color: var(--ja-body); font-size: var(--t-body-sm); line-height: 1.65; margin: 0; }
/* connector grows in the reading direction — needs no RTL override */
@media (min-width: 992px) {
  .jaho-step:not(:last-child)::after {
    content: ""; position: absolute; inset-block-start: 46px;
    inset-inline-start: 100%; inset-inline-end: auto;
    width: clamp(16px, 2.5vw, 28px); border-top: 1px dashed var(--ja-line);
  }
}

/* --- why JAHO: benefit cards --- */
.jaho-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px); }
.jaho-feature {
  background: var(--ja-surface); border: 1px solid var(--ja-line); border-radius: var(--r-md);
  padding: clamp(20px, 2.4vw, 28px); text-align: center; box-shadow: var(--sh-1);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.jaho-feature:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: rgba(var(--ja-primary-rgb), .3); }
.jaho-feature__icon {
  width: 72px; height: 72px; margin: 0 auto var(--sp-4); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--ja-primary-rgb), .12); color: var(--ja-primary-ink);
}
.jaho-feature__icon svg { width: 28px; height: 28px; }
.jaho-feature__icon img { width: 34px; height: 34px; object-fit: contain; }
.jaho-feature h3 { color: var(--ja-ink); font-weight: 700; font-size: var(--t-h3); line-height: 1.35; margin: 0 0 var(--sp-2); }
.jaho-feature p { color: var(--ja-body); font-size: var(--t-body-sm); line-height: 1.65; margin: 0; }
 /* illustrated variant — the art bleeds to the card's top edge and its box is
   reserved by aspect-ratio, so the card never reflows when the SVG lands. */
.jaho-feature--art { padding: 0 0 clamp(20px, 2.4vw, 28px); overflow: hidden; }
.jaho-feature--art > h3, .jaho-feature--art > p { padding-inline: clamp(20px, 2.4vw, 28px); }
.jaho-feature__art {
  display: block; width: 100%; aspect-ratio: 3 / 2; overflow: hidden;
  background: var(--ja-surface-2); border-bottom: 1px solid var(--ja-line);
  margin-bottom: clamp(18px, 2.2vw, 24px);
}
.jaho-feature__art > img, .jaho-feature__art > svg {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
.jaho-feature--art:hover .jaho-feature__art > img,
.jaho-feature--art:hover .jaho-feature__art > svg { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) {
  .jaho-feature--art:hover .jaho-feature__art > img,
  .jaho-feature--art:hover .jaho-feature__art > svg { transform: none; }
}

/* media variant, if a section ever puts a photo back on a card */
.jaho-feature__thumb { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-sm); overflow: hidden; margin-bottom: var(--sp-4); }
.jaho-feature__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.jaho-feature:hover .jaho-feature__thumb img { transform: scale(1.06); }

/* --- about / showcase --- */
.jaho-showcase { padding: var(--ja-section-pad) 0; }
.jaho-showcase__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.jaho-showcase__media img {
  width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; object-position: center;
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
}
.jaho-showcase__content .jaho-section__title { margin-bottom: var(--sp-3); }
.jaho-showcase__content p { color: var(--ja-body); font-size: var(--t-body); line-height: 1.8; margin-bottom: var(--sp-5); }

/* --- smart features --- */
.jaho-smart { background: var(--ja-surface-2); padding: var(--ja-section-pad) 0; }
.jaho-smart__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.6vw, 28px); }
/* the row lost its third card to the Healthy & Diet band; keep the pair centred
   and at a card width close to the 3-up rhythm instead of stretching them */
.jaho-smart__grid--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; }
.jaho-smart__card {
  position: relative; overflow: hidden; background: var(--ja-surface);
  border: 1px solid var(--ja-line); border-radius: var(--r-md);
  padding: clamp(24px, 3vw, 34px); box-shadow: var(--sh-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.jaho-smart__card::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
  background-image: linear-gradient(90deg, var(--ja-primary), var(--ja-accent));
  transform: scaleX(0); transform-origin: center; transition: transform .25s ease;
}
.jaho-smart__card:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: rgba(var(--ja-primary-rgb), .32); }
.jaho-smart__card:hover::before { transform: scaleX(1); }
.jaho-smart__icon {
  width: 64px; height: 64px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-4); margin-inline-end: auto; color: #fff;
  background: linear-gradient(135deg, var(--ja-primary) 0%, var(--ja-primary-600) 100%);
  box-shadow: 0 10px 22px rgba(var(--ja-primary-rgb), .28);
}
.jaho-smart__icon svg { width: 28px; height: 28px; }
.jaho-smart__card h3 { color: var(--ja-ink); font-weight: 700; font-size: var(--t-h3); line-height: 1.35; margin: 0 0 var(--sp-2); }
.jaho-smart__card p { color: var(--ja-body); font-size: var(--t-body-sm); line-height: 1.7; margin: 0; }
.jaho-smart__note { text-align: center; color: var(--ja-muted); font-size: 14px; margin: clamp(24px,3vw,32px) 0 0; }

/* --- HEALTHY & DIET MODE — the flagship band ------------------------------
   JAHO's one real differentiator, so it is the only full-bleed DARK section
   between the hero and the footer. Everything around it is white or the same
   mint tint; the tonal break is what makes this read as the centrepiece rather
   than as one more card row. The phone mockup keeps a light "stage" behind it so
   the dark device frame never sinks into the dark band. */
.jaho-diet {
  position: relative; overflow: hidden; color: #fff;
  padding: clamp(64px, 9vw, 112px) 0;
  background: linear-gradient(158deg, #0E7A57 0%, #0B6B4C 44%, #083D2C 100%);
}
.jaho-diet::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(46% 56% at 78% 8%,  rgba(var(--ja-primary-rgb), .42), transparent 68%),
    radial-gradient(44% 52% at 4% 98%,  rgba(var(--ja-primary-rgb), .18), transparent 72%);
}
.jaho-diet > .container { position: relative; z-index: 1; }
.jaho-diet__grid {
  display: grid; grid-template-columns: .92fr 1.08fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}

/* media column */
.jaho-diet__media { margin: 0; text-align: center; }
.jaho-diet__stage { position: relative; display: block; }
.jaho-diet__stage::before {
  content: ""; position: absolute; inset: 4% 4% 2%; border-radius: 48px; z-index: 0;
  background: radial-gradient(62% 56% at 50% 44%, rgba(255,255,255,.26), rgba(255,255,255,.06) 66%, rgba(255,255,255,0) 78%);
}
.jaho-diet__phone {
  position: relative; z-index: 1; display: block; margin-inline: auto;
  /* the SVG carries its own glow margin, so the painted handset is ~62% of
     this box; sized so the device reads at roughly 300px on desktop */
  width: 100%; max-width: 480px; height: auto; aspect-ratio: 720 / 900;
  filter: drop-shadow(0 30px 56px rgba(0,0,0,.40));
}
.jaho-diet__caption {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-5) 0 0; padding: 9px 16px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.92); font-size: 14px; font-weight: 600; line-height: 1.4;
}
.jaho-diet__caption svg { flex: 0 0 auto; color: #7BE3BE; }

/* copy column */
.jaho-diet__eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-4); padding: 8px 16px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
  color: #fff; font-weight: 700; font-size: var(--t-eyebrow); letter-spacing: .04em;
}
.jaho-diet__eyebrow svg { flex: 0 0 auto; color: #7BE3BE; }
.jaho-diet__title {
  color: #fff; font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(30px, 3.8vw, 48px); line-height: 1.14;
  margin: 0 0 var(--sp-4); text-wrap: balance;
}
.jaho-diet__lead {
  color: rgba(255,255,255,.86); font-size: var(--t-lead); line-height: 1.75;
  margin: 0 0 var(--sp-5); max-width: 56ch;
}

/* the four capability tiles mirror the four controls on the mockup screen */
.jaho-diet__list {
  list-style: none; padding: 0; margin: 0 0 var(--sp-6);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3);
}
.jaho-diet__item {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 13px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
}
.jaho-diet__item-icon {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); color: #7BE3BE;
}
.jaho-diet__item-icon svg { width: 17px; height: 17px; }
.jaho-diet__item-label {
  flex: 1 1 auto; min-width: 0;
  color: #fff; font-weight: 700; font-size: var(--t-body-sm); line-height: 1.4; text-wrap: balance;
}
.jaho-diet__item-val {
  flex: 0 0 auto; padding: 3px 8px; border-radius: var(--r-pill);
  background: rgba(19,185,131,.30); border: 1px solid rgba(123,227,190,.42);
  color: #CFF7E7; font-size: 12px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.jaho-diet__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-5); }
.jaho-diet__cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 30px; border-radius: var(--r-pill);
  background: #fff; color: var(--ja-primary-ink); font-weight: 800; font-size: var(--t-body);
  text-decoration: none; box-shadow: 0 12px 26px rgba(0,0,0,.26);
  transition: filter .15s ease, transform .15s ease;
}
.jaho-diet__cta:hover, .jaho-diet__cta:focus { color: var(--ja-primary-ink); filter: brightness(.95); transform: translateY(-1px); }
.jaho-diet__link {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px;
  color: #fff; font-weight: 700; font-size: var(--t-body); text-decoration: none;
}
.jaho-diet__link:hover { color: #CFF7E7; text-decoration: underline; }
.jaho-diet__note { color: rgba(255,255,255,.70); font-size: 14px; line-height: 1.6; margin: var(--sp-4) 0 0; }

/* --- launch waitlist band --- */
.jaho-download { padding: 0 0 var(--ja-section-pad); background: var(--ja-surface); }
.jaho-download__card {
  display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center;
  gap: clamp(20px, 4vw, 40px);
  background: linear-gradient(135deg, var(--ja-primary-ink) 0%, var(--ja-primary-900) 100%);
  border-radius: var(--r-lg); padding: clamp(32px, 5vw, 64px); overflow: hidden; color: #fff;
}
.jaho-download__text { max-width: 620px; }
.jaho-download__text h2 {
  color: #fff; font-weight: 800; letter-spacing: -.02em;
  font-size: var(--t-h2); line-height: 1.25; margin: 0 0 var(--sp-3); text-wrap: balance;
}
.jaho-download__text p { color: rgba(255,255,255,.86); font-size: var(--t-body); line-height: 1.7; margin: 0 0 var(--sp-5); }
.jaho-download__text .jaho-badges { justify-content: center; margin-top: var(--sp-5); }
.jaho-download__text .jaho-badges__caption { color: rgba(255,255,255,.7); }

.jaho-launch__form {
  display: flex; align-items: center; gap: var(--sp-2);
  background: #fff; border-radius: var(--r-pill); padding: 4px;
  max-width: 560px; margin-inline: auto; box-shadow: var(--sh-2);
}
.jaho-launch__form input[type="email"] {
  flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent;
  color: var(--ja-ink); font-size: 16px; height: 48px; padding-inline: 18px; border-radius: var(--r-pill);
}
.jaho-launch__form input[type="email"]::placeholder { color: var(--ja-muted); }
.jaho-launch__form button {
  flex: 0 0 auto; border: 0; cursor: pointer; background: var(--ja-primary); color: #fff;
  font-weight: 700; font-size: var(--t-body-sm); min-height: 48px; padding: 0 24px;
  border-radius: var(--r-pill); transition: filter .15s ease;
}
.jaho-launch__form button:hover { filter: brightness(.96); }
.jaho-launch__note { color: rgba(255,255,255,.68); font-size: 14px; line-height: 1.6; margin: var(--sp-4) 0 0; }

/* =============================================================================
   7. FOOTER
   ========================================================================== */
footer.footer-bg, .footer-bg {
  position: relative;
  background:
    radial-gradient(1100px 460px at 82% -12%, rgba(var(--ja-primary-rgb), .20) 0%, rgba(var(--ja-primary-rgb), 0) 60%),
    radial-gradient(760px 320px at 12% 4%, rgba(var(--ja-primary-rgb), .12) 0%, rgba(var(--ja-primary-rgb), 0) 58%),
    linear-gradient(168deg, #0C3226 0%, #0A2A20 38%, #082018 70%, #06170F 100%) !important;
  color: rgba(255,255,255,.82); border-top: 0;
}
.footer-bg::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
  background-image: linear-gradient(90deg, rgba(var(--ja-primary-rgb),0) 0%, var(--ja-primary) 22%, var(--ja-accent) 50%, var(--ja-primary) 78%, rgba(var(--ja-primary-rgb),0) 100%);
}
.footer-bg .footer-bottom {
  background: transparent !important; background-image: none !important;
  border-radius: 0 !important; padding: clamp(40px,4.5vw,64px) 0 0 !important;
}
.footer-bg .footer-wrapper { display: flex; flex-wrap: wrap; gap: clamp(20px,2.4vw,36px); align-items: flex-start; }
.footer-bg .footer-widget { flex: 1 1 170px; min-width: 0; }
.footer-bg .footer-widget:first-child { flex: 1.6 1 260px; }
.footer-bg .footer-logo img { max-height: 42px; margin-bottom: var(--sp-4); }
.footer-bg .footer-widget .txt { color: rgba(255,255,255,.74); line-height: 1.8; font-size: var(--t-body-sm); margin-bottom: var(--sp-4); max-width: 340px; }

/* heading > link, unambiguously */
.footer-bg .footer-widget .subtitle {
  position: relative; color: #fff !important; font-weight: 700; font-size: 18px;
  letter-spacing: .01em; line-height: 1.35; margin-bottom: var(--sp-4); padding-bottom: 10px;
}
.footer-bg .footer-widget .subtitle::after {
  content: ""; position: absolute; left: 0; right: auto; bottom: 0;
  width: 30px; height: 3px; border-radius: 3px;
  background-image: linear-gradient(90deg, var(--ja-primary), var(--ja-accent));
}
.footer-bg .footer-widget ul { list-style: none; padding: 0; margin: 0; }
.footer-bg .footer-widget li { margin-bottom: 2px; }
.footer-bg a { color: rgba(255,255,255,.74); text-decoration: none; transition: color .15s ease, padding .15s ease; }
.footer-bg .footer-widget li a { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.5; padding-block: 9px; }
.footer-bg .footer-widget li a:hover { color: var(--ja-primary); }
.footer-bg a:hover { color: var(--ja-primary); }
.footer-bg .footer-widget li a svg { flex: 0 0 auto; fill: currentColor; }

/* contact items: icon outside the text flow so RTL text cannot wrap around it */
.jaho-foot-contact { display: flex; gap: 10px; align-items: flex-start; }
.jaho-foot-contact svg { margin-top: 3px; }
.jaho-foot-contact span { min-width: 0; word-break: break-word; }

.footer-bg .jaho-social { display: flex; gap: var(--sp-3); list-style: none; padding: 0; margin: var(--sp-5) 0 0; flex-wrap: wrap; }
.footer-bg .jaho-social li { margin: 0; }
.footer-bg .jaho-social__btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); background: rgba(255,255,255,.08); color: #fff !important;
  border: 1px solid rgba(255,255,255,.14); text-decoration: none; padding: 0;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.footer-bg .jaho-social__btn i { font-size: 17px; line-height: 1; color: #fff !important; }
.footer-bg .jaho-social__btn svg { width: 18px !important; height: 18px !important; fill: #fff !important; }
.footer-bg .jaho-social__btn:hover { transform: translateY(-2px); border-color: transparent; background: var(--ja-primary); box-shadow: 0 8px 20px rgba(var(--ja-primary-rgb), .32); }
.footer-bg .jaho-social__btn--facebook:hover { background: #1877f2; }
.footer-bg .jaho-social__btn--instagram:hover { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.footer-bg .jaho-social__btn--x:hover, .footer-bg .jaho-social__btn--twitter:hover { background: #000; }
.footer-bg .jaho-social__btn--youtube:hover { background: #f00; }
.footer-bg .jaho-social__btn--linkedin:hover { background: #0a66c2; }

.footer-bg .copyright {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: clamp(34px,4vw,52px) !important;
  padding: 22px 0; color: rgba(255,255,255,.62); font-size: 13px;
}

@media (min-width: 1100px) { .footer-bg .footer-wrapper { flex-wrap: nowrap; } }
@media (max-width: 1099.98px) { .footer-bg .footer-widget { flex: 1 1 200px; } }
@media (max-width: 575.98px) {
  .footer-bg .footer-wrapper { gap: 30px; text-align: center; }
  .footer-bg .footer-widget, .footer-bg .footer-widget:first-child { flex: 1 1 100%; }
  .footer-bg .jaho-social { justify-content: center; }
  .footer-bg .footer-widget .txt { margin-inline: auto; }
  .footer-bg .footer-widget li a { justify-content: center; }
  .jaho-foot-contact { justify-content: center; }
  /* symmetric physical centring — a logical inset plus a physical translate
     lands the bar 30px off-centre under RTL */
  .footer-bg .footer-widget .subtitle::after { left: 50%; right: auto; transform: translateX(-50%); }
}

/* =============================================================================
   INNER PAGES — one page-hero component and one card system for all four
   content pages (about / privacy / terms / cancellation).
   ========================================================================== */
.jaho-page-hero {
  background: radial-gradient(1100px 480px at 18% 0%, rgba(var(--ja-primary-rgb), .55) 0%, transparent 55%),
              linear-gradient(135deg, var(--ja-primary-ink) 0%, var(--ja-primary-900) 100%);
  color: #fff; padding: clamp(120px,13vw,168px) 0 clamp(48px,6vw,80px); text-align: center;
}
.jaho-page-hero__crumb {
  display: inline-block; font-size: 13px; color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r-pill); padding: 6px 14px; margin-bottom: var(--sp-4);
}
.jaho-page-hero__crumb a { color: rgba(255,255,255,.95); text-decoration: none; }
.jaho-page-hero__title { color: #fff; font-weight: 800; letter-spacing: -.02em; font-size: clamp(26px,3.4vw,40px); line-height: 1.25; margin: 0 0 var(--sp-2); text-wrap: balance; }
.jaho-page-hero__lead { color: rgba(255,255,255,.86); max-width: 620px; margin: 0 auto; font-size: var(--t-body); line-height: 1.7; }

.jaho-doc { background: var(--ja-surface-2); padding: 0 0 clamp(48px,7vw,88px); }
.jaho-doc__card {
  max-width: 920px; margin: -56px auto 0; background: var(--ja-surface);
  border: 1px solid var(--ja-line); border-radius: var(--r-md);
  box-shadow: var(--sh-2); padding: clamp(24px, 5vw, 56px);
}
@media (max-width: 575.98px) { .jaho-doc__card { margin-top: -40px; } }

/* about page body */
.jaho-about { background: var(--ja-surface-2); padding: clamp(48px,7vw,88px) 0; }
.jaho-about__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px,5vw,60px); align-items: center; }
.jaho-about__content {
  background: var(--ja-surface); border: 1px solid var(--ja-line); border-radius: var(--r-md);
  padding: clamp(26px,3.5vw,44px); box-shadow: var(--sh-1);
}
.jaho-about__content .about--content { color: var(--ja-body); line-height: 1.85; }
.jaho-about__content .about--content h1, .jaho-about__content .about--content h2,
.jaho-about__content .about--content h3 { color: var(--ja-ink); font-weight: 700; line-height: 1.32; margin: 1.2em 0 .5em; }
.jaho-about__content .about--content h1:first-child, .jaho-about__content .about--content h2:first-child { margin-top: 0; }
.jaho-about__media img { width: 100%; aspect-ratio: 4 / 3.4; height: auto; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh-3); }

/* the theme masks .section-wrapper-inner with a leftover decorative PNG, which
   eats the card's bottom edge and adds 138px of dead padding */
.about-section, .privacy-section, .contact-section {
  background: var(--ja-surface-2) !important; padding: clamp(40px,7vw,80px) 0 !important;
}
.about-section .section-wrapper-inner, .privacy-section .section-wrapper-inner {
  -webkit-mask: none !important; mask: none !important;
  background: var(--ja-surface); border: 1px solid var(--ja-line); border-radius: var(--r-md);
  padding: clamp(24px,4vw,48px); padding-bottom: clamp(24px,4vw,48px);
  box-shadow: var(--sh-1); max-width: 980px; margin: 0 auto;
}
.about-section .section-header .title, .privacy-section .section-header .title,
.contact-section .section-header .title {
  color: var(--ja-ink); font-weight: 800; font-size: clamp(24px,3vw,34px); line-height: 1.25;
}

/* =============================================================================
   CONTACT PAGE
   ========================================================================== */
.jaho-contact { background: var(--ja-surface-2); padding: clamp(40px,6vw,72px) 0 clamp(56px,8vw,96px); }
.jaho-contact__cards { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,2vw,22px); margin-bottom: clamp(28px,4vw,44px); }
.jaho-contact__card {
  background: var(--ja-surface); border: 1px solid var(--ja-line); border-radius: var(--r-md);
  padding: clamp(22px,3vw,30px); text-align: center; box-shadow: var(--sh-1); color: var(--ja-body);
  text-decoration: none; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.jaho-contact__card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: rgba(var(--ja-primary-rgb),.3); color: var(--ja-body); }
.jaho-contact__icon {
  width: 60px; height: 60px; margin: 0 auto var(--sp-3); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; background: var(--ja-primary); color: #fff;
}
.jaho-contact__icon svg { width: 26px; height: 26px; }
.jaho-contact__card h5 { color: var(--ja-ink); font-weight: 700; font-size: var(--t-body); margin-bottom: 6px; }
.jaho-contact__val { color: var(--ja-body); font-size: 14px; word-break: break-word; }
.jaho-contact__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px,4vw,48px); align-items: stretch; }
.jaho-contact__media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh-3); }
.jaho-contact__form {
  background: var(--ja-surface); border: 1px solid var(--ja-line); border-radius: var(--r-md);
  padding: clamp(26px,3.5vw,44px); box-shadow: var(--sh-1);
}
.jaho-contact__form-title { color: var(--ja-ink); font-weight: 800; font-size: 22px; line-height: 1.3; margin-bottom: var(--sp-5); }
.jaho-contact__form label { font-weight: 600; color: var(--ja-ink); font-size: 14px; }
.jaho-contact__form .form-control, .jaho-contact__form .form--control {
  border-radius: var(--r-sm); border: 1.5px solid var(--ja-line); min-height: 50px;
  padding: .7rem 1rem; box-shadow: none; font-size: 16px; color: var(--ja-ink);
}
.jaho-contact__form textarea.form-control { min-height: 130px; }
.jaho-contact__form .form-control:focus { border-color: var(--ja-primary); box-shadow: 0 0 0 4px rgba(var(--ja-primary-rgb),.16); }
.jaho-contact__form .btn-base { width: 100%; justify-content: center; min-height: 52px; border-radius: var(--r-pill); font-weight: 700; }
/* purpose-built captcha row — the bootstrap col-6 + p-3 combo overflowed 390px by 2px */
.jaho-captcha { display: flex; align-items: center; gap: var(--sp-2); }
.jaho-captcha__img { flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
  background: #fff; border: 1.5px solid var(--ja-line); border-radius: var(--r-sm); height: 50px; overflow: hidden; }
.jaho-captcha__img img { width: 100%; height: 100%; object-fit: contain; }
.jaho-captcha__reload {
  flex: 0 0 auto; width: 46px; height: 50px; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--ja-line); border-radius: var(--r-sm); background: #fff;
  color: var(--ja-primary-ink); cursor: pointer;
}
.jaho-captcha__reload.active i { animation: ja-spin .8s linear infinite; }
@keyframes ja-spin { to { transform: rotate(360deg); } }

/* form inputs everywhere: 16px floor stops iOS zooming the page on focus */
.form-control, .form-select, input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  font-size: 16px;
}
.form-control, .form-select {
  border-radius: var(--r-sm); border: 1.5px solid var(--ja-line); min-height: 46px;
  box-shadow: none; color: var(--ja-ink);
}
.form-control:focus, .form-select:focus { border-color: var(--ja-primary); box-shadow: 0 0 0 4px rgba(var(--ja-primary-rgb),.16); }
textarea.form-control { min-height: 110px; }
.form-label, label { font-weight: 600; color: var(--ja-ink); }
.restaurant_registration .card, .container .card.border-0 {
  border: 1px solid var(--ja-line) !important; border-radius: var(--r-md); box-shadow: var(--sh-1);
}
.nav-pills .nav-link.active { background: var(--ja-primary); color: #fff; }

/* =============================================================================
   RESPONSIVE — the intermediate 2-column step the stylesheet never had
   ========================================================================== */
@media (min-width: 640px) and (max-width: 991.98px) {
  .jaho-features, .jaho-smart__grid, .jaho-steps, .jaho-contact__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991.98px) {
  .jaho-hero__grid { grid-template-columns: 1fr; text-align: center; }
  .jaho-hero__lead { margin-inline: auto; }
  .jaho-hero__actions, .jaho-hero__proof, .jaho-badges { justify-content: center; }
  .jaho-hero__media { order: -1; }
  .jaho-hero__img { max-width: 100%; }
  .jaho-showcase__grid { grid-template-columns: 1fr; }
  .jaho-showcase__media { order: -1; }
  /* the phone stacks ABOVE the argument: <figure> is already first in the DOM,
     so no order swap is needed and the reading order stays correct */
  .jaho-diet__grid { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 44px); }
  .jaho-diet__phone { max-width: 420px; }
  .jaho-diet__lead { margin-inline: auto; }
  .jaho-about__grid { grid-template-columns: 1fr; }
  .jaho-about__media { order: -1; }
  .jaho-contact__grid { grid-template-columns: 1fr; }
  .jaho-contact__media { order: -1; min-height: 220px; }
}
@media (max-width: 639.98px) {
  .jaho-features, .jaho-smart__grid, .jaho-steps, .jaho-contact__cards { grid-template-columns: 1fr; }
  .jaho-hero__actions { flex-direction: column; align-items: stretch; }
  .jaho-hero__actions .jaho-hero__btn { width: 100%; }
  .jaho-hero__actions .jaho-link { justify-content: center; }
  .jaho-hero__proof { border-radius: var(--r-md); flex-direction: column; align-items: flex-start; gap: 10px; }
  .jaho-launch__form { flex-direction: column; background: transparent; box-shadow: none; padding: 0; gap: 10px; }
  .jaho-launch__form input[type="email"] { background: #fff; width: 100%; }
  .jaho-launch__form button { width: 100%; }
  .jaho-diet__list { grid-template-columns: 1fr; }
  .jaho-diet__phone { max-width: 340px; }
  .jaho-diet__actions { flex-direction: column; align-items: stretch; }
  .jaho-diet__actions .jaho-diet__cta { width: 100%; }
  .jaho-diet__actions .jaho-diet__link { justify-content: center; }
}

/* =============================================================================
   8. ARABIC TYPOGRAPHY — script axis. Kept separate from direction on purpose.
   ========================================================================== */
html[lang="ar"] * {
  /* Arabic is a connected script: tracking cuts the joining strokes */
  letter-spacing: normal !important;
}
html[lang="ar"] .jaho-hero__eyebrow,
html[lang="ar"] .jaho-section__eyebrow,
html[lang="ar"] .jaho-badge small { text-transform: none; }
html[lang="ar"] body { font-size: 105%; line-height: 1.9; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] .jaho-section__title, html[lang="ar"] .jaho-download__text h2,
html[lang="ar"] .jaho-page-hero__title { line-height: 1.45; font-weight: 700; }
html[lang="ar"] .jaho-hero__title { line-height: 1.32; font-weight: 700; }
html[lang="ar"] .jaho-feature h3, html[lang="ar"] .jaho-step h3,
html[lang="ar"] .jaho-smart__card h3 { line-height: 1.5; }
html[lang="ar"] .jaho-diet__title { line-height: 1.34; font-weight: 700; }
html[lang="ar"] .jaho-diet__lead { line-height: 1.9; }
html[lang="ar"] .jaho-diet__eyebrow { letter-spacing: 0; }
html[lang="ar"] .jaho-diet__item-label { line-height: 1.6; }
html[lang="ar"] .jaho-hero__lead, html[lang="ar"] .jaho-showcase__content p { line-height: 1.9; }
/* hero has overflow:hidden; give tall Arabic marks room */
html[lang="ar"] .jaho-hero { padding-top: clamp(124px, 13.5vw, 180px); }

/* =============================================================================
   9. DIRECTION GEOMETRY — [dir="rtl"], ONLY what logical properties cannot do.
   ========================================================================== */

/* object-position has no logical equivalent; the logos are pinned to the
   physical left of their box by main.css:454/548 */
[dir="rtl"] .header-wrapper .logo img,
[dir="rtl"] .footer-widget .footer-logo img { object-position: right center; }

/* directional arrows: one class applied at the call site */
 /* Exactly ONE flip. Mirroring the wrapper AND the svg inside it composes to
   scaleX(-1) * scaleX(-1) = identity, which is why the "learn more" arrows kept
   pointing right on the RTL page. The wrapper is the one that flips; it is given
   inline-flex in the base block so the transform has a box to act on. */
[dir="rtl"] .jaho-icon--dir { transform: scaleX(-1); }

/* animate.css fadeInRight starts at translateX(60px) — a physical offset that
   ignores dir, so the hero photo flies in across the whole page */
[dir="rtl"] .fadeInLeft  { animation-name: fadeInRight; }
[dir="rtl"] .fadeInRight { animation-name: fadeInLeft; }

/* gradient angles are physical and never mirror */
[dir="rtl"] .footer-bg .footer-widget .subtitle::after,
[dir="rtl"] .jaho-smart__card::before { background-image: linear-gradient(270deg, var(--ja-primary), var(--ja-accent)); }
[dir="rtl"] .footer-bg::before {
  background-image: linear-gradient(270deg, rgba(var(--ja-primary-rgb),0) 0%, var(--ja-primary) 22%, var(--ja-accent) 50%, var(--ja-primary) 78%, rgba(var(--ja-primary-rgb),0) 100%);
}

/* the hero light belongs behind the headline, which is on the visual right */
[dir="rtl"] .jaho-diet { background: linear-gradient(202deg, #0E7A57 0%, #0B6B4C 44%, #083D2C 100%); }
[dir="rtl"] .jaho-diet::before {
  background:
    radial-gradient(46% 56% at 22% 8%,  rgba(var(--ja-primary-rgb), .42), transparent 68%),
    radial-gradient(44% 52% at 96% 98%, rgba(var(--ja-primary-rgb), .18), transparent 72%);
}
[dir="rtl"] .jaho-hero::before {
  background: radial-gradient(60% 60% at 88% 0%, rgba(var(--ja-primary-rgb), .14), transparent 70%);
}

/* footer underline sits at the inline start of its heading */
[dir="rtl"] .footer-bg .footer-widget .subtitle::after { left: auto; right: 0; }
@media (max-width: 575.98px) {
  [dir="rtl"] .footer-bg .footer-widget .subtitle::after { left: 50%; right: auto; transform: translateX(-50%); }
}

/* badge internals stay LTR (see .jaho-badge{direction:ltr} above), so its
   "coming soon" ribbon must be pinned physically for both directions */
[dir="rtl"] .jaho-badge.is-soon .jaho-badge__ribbon { inset-inline-end: auto; inset-inline-start: 10px; }

/* =============================================================================
   ACCESSIBILITY
   ========================================================================== */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ja-primary-ink); outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--ja-primary-rgb), .18); border-radius: 8px;
}
.jaho-skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 2000;
  background: var(--ja-primary); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0;
}
.jaho-skip:focus { inset-inline-start: 0; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =============================================================================
   LEGACY PAGE-HERO ALIAS
   terms-and-conditions.blade.php (owned by another workstream) still uses
   .jaho-doc__hero / .jaho-doc__breadcrumb. Alias them onto the unified
   .jaho-page-hero design so all four content pages read as one component
   without editing that view. Delete the aliases once it is migrated.
   ========================================================================== */
.jaho-doc__hero {
  background: radial-gradient(1100px 480px at 18% 0%, rgba(var(--ja-primary-rgb), .55) 0%, transparent 55%),
              linear-gradient(135deg, var(--ja-primary-ink) 0%, var(--ja-primary-900) 100%);
  color: #fff; padding: clamp(120px,13vw,168px) 20px clamp(48px,6vw,80px); text-align: center;
}
.jaho-doc__hero h1 { color: #fff; font-weight: 800; letter-spacing: -.02em; font-size: clamp(26px,3.4vw,40px); line-height: 1.25; margin: 0 0 var(--sp-2); text-wrap: balance; }
.jaho-doc__hero p { color: rgba(255,255,255,.86); max-width: 620px; margin: 0 auto; font-size: var(--t-body); line-height: 1.7; }
.jaho-doc__breadcrumb {
  display: inline-flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4);
  font-size: 13px; color: rgba(255,255,255,.85); background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-pill); padding: 6px 14px;
}
.jaho-doc__breadcrumb a { color: rgba(255,255,255,.95); text-decoration: none; }
html[lang="ar"] .jaho-doc__hero h1 { line-height: 1.45; font-weight: 700; }

/* privacy-policy.blade.php has no hero at all — just a `h-148px` spacer above a
   green H2. With a sticky header that spacer is now dead white space. */
.privacy-section .h-148px, .about-section .h-148px { height: clamp(96px,11vw,132px) !important; }
.privacy-section .section-header .title { text-align: center; margin-bottom: var(--sp-5); }

/* =============================================================================
   MOBILE HEADER ORDER + AJAX CAPTCHA SHAPE
   ========================================================================== */
@media (max-width: 991.98px) {
  /* keep the logo at the inline start and group the switcher + toggle at the
     inline end, instead of stranding the toggle in the middle of the bar */
  .header-wrapper .logo { order: 1; }
  .header-wrapper .jaho-langseg { order: 2; margin-inline-start: auto; }
  .header-wrapper .nav-toggle { order: 3; }
  .header-wrapper .menu { order: 4; }
}
@media (max-width: 400px) {
  .jaho-langseg__item { padding: 0 10px; font-size: 14px; }
}

/* The captcha reload endpoint re-injects a shared partial (auth/custom-captcha)
   built from two bootstrap .col-6 columns. That markup is not ours to change,
   so make its shape safe here: without this the 46px reload button is pushed
   past the edge and /contact-us rubber-bands sideways on a 390px phone. */
#reload-captcha { --bs-gutter-x: 0; align-items: center; }
#reload-captcha > .col-6 { flex: 1 1 0; min-width: 0; max-width: 50%; padding-inline: 4px; }
#reload-captcha > .col-6.d-flex {
  align-items: center; gap: var(--sp-2); height: 50px; overflow: hidden;
  border: 1.5px solid var(--ja-line); border-radius: var(--r-sm);
}
#reload-captcha > .col-6.d-flex img { flex: 1 1 auto; min-width: 0; height: 100%; object-fit: contain; }
#reload-captcha #reloadCaptcha, #reload-captcha .capcha-spin {
  flex: 0 0 auto; padding: 0 10px !important; color: var(--ja-primary-ink); cursor: pointer;
}

/* Bootstrap 5 beta ships .visually-hidden; guarantee it regardless of build. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }