@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: #f4f0e7;
  color: #3d372d;
  font-family: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
:focus-visible { outline: 2px solid #356142; outline-offset: 3px; }
/* The green focus ring above disappears on the dark-green hero and contact panels.
   Keyboard users need to see where focus is on those sections too. */
.hero :focus-visible,
.contactSection :focus-visible { outline-color: #f4f0e7; }

.page {
  --landing-ink: #2b2721;
  --landing-green: #356142;
  --landing-deep: #1f3a28;
  --landing-cream: #f4f0e7;
  --landing-paper: #ffffff;
  --landing-border: #e8e1d3;
  --landing-muted: #7a6f5c;
  --landing-primary-soft: #eef4f0;
  --landing-teal: #5f9c93;
  --landing-clay: #bd6440;
  --landing-gold: #c9973f;
  position: relative;
  z-index: 0;
  min-height: 100vh;
  overflow: hidden;
  background: var(--landing-cream);
  color: var(--landing-ink);
  font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
}
/* Soft, slow-drifting accent glows behind all content — the only motion on an
   otherwise static background, so it reads as ambient depth rather than a
   distraction. The negative z-index is scoped to .page's own stacking context
   (established by the position+z-index pair above), so it stays strictly
   behind every section without touching any section's own z-index. */
.page::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(38rem 38rem at 12% 15%, rgb(95 156 147 / 16%), transparent 60%),
    radial-gradient(34rem 34rem at 88% 82%, rgb(201 151 63 / 12%), transparent 60%);
  animation: pageBgDrift 42s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes pageBgDrift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(2.5%, -2%) scale(1.06); }
  100% { transform: translate(-2%, 2.5%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .page::before { animation: none; }
}

.page * { box-sizing: border-box; }
.page a { color: inherit; text-decoration: none; }
.page button, .page input, .page select { font: inherit; }

.header {
  position: relative;
  z-index: 20;
  width: min(1300px, calc(100% - 64px));
  height: 92px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 0;
}

.brand { justify-self: start; }
.logoLockup { display: inline-flex; align-items: center; gap: 12px; }
.logoTile {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: 11px;
  background: var(--landing-green);
}
.logoTile img { width: 28px; height: 28px; display: block; }
/* A plain image of the ink-coloured wordmark, not the white one recoloured through a CSS mask.
   Masking worked over http but broke when a page was opened straight from disk: file:// gives
   every file its own opaque origin, so the mask resource counts as cross-origin, fails to load,
   and the wordmark vanished from the header entirely. An <img> has no such restriction. */
.logoWordmark {
  width: 84px;
  height: 22px;
  display: inline-block;
  object-fit: contain;
}

.nav { display: flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 500; }
.nav > a, .loginLink { transition: color 160ms ease; }
.nav > a:hover, .loginLink:hover { color: var(--landing-green); }

/* ── Dropdown nav items ── */
.navDrop { position: relative; }
.navDrop > button {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px; border: 0; border-radius: 10px;
  background: transparent; color: inherit;
  font: inherit; font-weight: 500; cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.navDrop > button:hover { background: rgb(43 39 33 / 6%); color: var(--landing-green); }
.navDrop > button svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 200ms ease; }
.navDrop[open] > button svg { transform: rotate(180deg); }
.navDrop > a {
  display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: 10px;
  transition: background 160ms ease, color 160ms ease;
}
.navDrop > a:hover { background: rgb(43 39 33 / 6%); }

.navPanel {
  position: absolute; top: calc(100% + 10px);
  min-width: 240px; padding: 10px;
  border: 1px solid rgb(43 39 33 / 10%);
  border-radius: 16px; background: var(--landing-paper);
  box-shadow: 0 16px 40px rgb(37 41 35 / 12%);
  opacity: 0; transform: translateY(6px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 30;
}
[dir="rtl"] .navPanel { right: 0; }
[dir="ltr"] .navPanel { left: 0; }
.navDrop[open] .navPanel { opacity: 1; transform: translateY(0); pointer-events: auto; }

.navPanel a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  font-size: .86rem; font-weight: 500;
  color: var(--landing-ink); transition: background 140ms ease;
  white-space: nowrap;
}
.navPanel a:hover { background: rgb(53 97 66 / 8%); color: var(--landing-green); }
.navPanel a .navIcon {
  width: 32px; height: 32px; display: grid; place-items: center; flex-shrink: 0;
  border-radius: 9px; background: rgb(53 97 66 / 8%);
}
.navPanel a .navIcon svg { width: 16px; height: 16px; stroke: var(--landing-green); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.headerActions { justify-self: end; display: flex; align-items: center; gap: 16px; font-size: .86rem; font-weight: 600; }
.langSwitch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid rgb(43 39 33 / 14%);
  background: var(--landing-paper);
  color: var(--landing-ink);
  font-size: .83rem;
  font-weight: 600;
  line-height: 1;
  transition: all 180ms ease;
  text-decoration: none !important;
  cursor: pointer;
  user-select: none;
}
.langSwitch:hover {
  border-color: var(--landing-green);
  color: var(--landing-green);
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgb(53 97 66 / 10%);
}
.langSwitch svg {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  opacity: .85;
  transition: opacity 160ms ease, transform 180ms ease;
}
.langSwitch:hover svg {
  opacity: 1;
  transform: rotate(15deg);
}
.footerLangSwitch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgb(43 39 33 / 15%);
  background: transparent;
  color: var(--landing-ink);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
  transition: all 160ms ease;
  width: fit-content;
  text-decoration: none !important;
  cursor: pointer;
  user-select: none;
}
.footerLangSwitch:hover {
  border-color: var(--landing-green);
  color: var(--landing-green);
  background: var(--landing-paper);
}
.footerLangSwitch svg {
  display: block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  opacity: .85;
  transition: opacity 160ms ease, transform 180ms ease;
}
.footerLangSwitch:hover svg {
  opacity: 1;
  transform: rotate(15deg);
}
.mobileNavActions {
  display: none;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e7e3dc;
}
.headerCta, .primaryCta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff !important;
  background: var(--landing-green);
  box-shadow: 0 9px 22px rgb(53 97 66 / 16%);
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.headerCta { min-height: 44px; padding: 0 20px; }
.headerCta:hover, .primaryCta:hover { transform: translateY(-2px); background: #2a4d35; box-shadow: 0 13px 26px rgb(53 97 66 / 22%); }
.menuButton { display: none; width: 44px; height: 44px; padding: 11px; border: 0; border-radius: 50%; background: var(--landing-paper); cursor: pointer; }
.menuButton span { display: block; height: 2px; margin: 4px 0; background: var(--landing-ink); }

#menu-toggle:checked ~ .nav { display: flex; }

.hero {
  position: relative;
  width: min(1300px, calc(100% - 64px));
  min-height: 730px;
  margin: 24px auto 34px;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  align-items: center;
  gap: clamp(44px, 5vw, 82px);
  padding: 68px clamp(38px, 5vw, 76px) 72px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 34px;
  background:
    radial-gradient(circle at 13% 18%, rgb(95 156 147 / 16%), transparent 19rem),
    radial-gradient(circle at 91% 92%, rgb(189 100 64 / 12%), transparent 22rem),
    linear-gradient(135deg, #356142 0%, #2a4d35 58%, #1f3a28 100%);
  box-shadow: 0 28px 70px rgb(31 58 40 / 14%);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 18px;
  border: 1px solid rgb(255 255 255 / 6%);
  border-radius: 23px;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  left: -180px;
  top: -250px;
  bottom: auto;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 50%;
  box-shadow:
    0 0 0 44px rgb(255 255 255 / 2.5%),
    0 0 0 88px rgb(255 255 255 / 2%);
  pointer-events: none;
}
.heroBrandMark {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 30%;
  width: min(34vw, 480px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) rotate(-7deg);
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    transparent 0 58%,
    rgb(95 156 147 / 6%) 59% 60%,
    transparent 61%
  );
  box-shadow:
    0 0 0 38px rgb(255 255 255 / 2.5%),
    0 0 0 76px rgb(255 255 255 / 1.5%);
  opacity: .5;
  pointer-events: none;
  user-select: none;
}
.heroBrandMark img {
  width: 62%;
  height: 62%;
  display: block;
  opacity: .38;
}
.heroCopy { position: relative; z-index: 2; min-width: 0; animation: riseIn 700ms cubic-bezier(.2,0,0,1) both; }
.eyebrow, .kicker { margin: 0 0 18px; color: var(--landing-green); font-size: .8rem; font-weight: 700; letter-spacing: .025em; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: #c6ddd7; }
.eyebrow span { width: 26px; height: 1px; background: currentColor; box-shadow: 8px 0 0 -3px currentColor; }
.hero h1 {
  max-width: 650px;
  margin: 0;
  color: #ffffff;
  font-family: inherit;
  font-size: clamp(2.85rem, 3.7vw, 3.3rem);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -.01em;
}
.heroTitleLine { display: flex; align-items: baseline; gap: .24em; direction: rtl; white-space: nowrap; }
.heroAccentGraphic { width: auto; height: 1.12em; display: inline-block; flex: none; margin-inline: .04em; transform: rotate(-1.5deg) scaleX(1.1); transform-origin: center; }
.heroLead { max-width: 580px; margin: 28px 0 0; color: #dbe7df; font-size: 1.02rem; line-height: 1.95; }
.heroActions { display: flex; align-items: center; gap: 16px; margin-top: 34px; }
.hero .primaryCta {
  min-height: 54px;
  padding: 0 28px;
  gap: 20px;
  color: var(--landing-deep) !important;
  background: #faf8f3;
  box-shadow: 0 12px 28px rgb(7 25 15 / 24%);
  font-weight: 700;
}
.hero .primaryCta:hover { background: #fff; box-shadow: 0 16px 32px rgb(7 25 15 / 32%); }
.primaryCta span { font-size: 1.2rem; }
.secondaryCta { min-height: 54px; padding: 0 19px; display: inline-flex; align-items: center; gap: 12px; border: 1px solid rgb(255 255 255 / 38%); border-radius: 999px; background: none; color: #e7eee9 !important; font-size: .9rem; font-weight: 600; cursor: pointer; transition: background 180ms ease, border 180ms ease; }
.secondaryCta:hover { border-color: rgb(255 255 255 / 60%); background: rgb(255 255 255 / 7%); }
.secondaryCta span { color: #a9cbc4; }
.heroTrust { display: flex; align-items: center; gap: 15px; margin-top: 42px; }
/* The claim carries itself: it is sourced from real interviews, so it gets a quiet rule
   rather than the stacked avatars that used to sit here — those read as "these people are
   our users", which is a different (and untrue) claim. */
.heroTrust p {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding-inline-start: 14px;
  border-inline-start: 2px solid rgb(169 203 196 / 45%);
  line-height: 1.5;
}
.heroTrust b { color: #f4f7f4; font-size: .82rem; }
.heroTrust small { color: #a9b9ae; font-size: .72rem; }

.heroVisual { position: relative; z-index: 2; min-width: 0; direction: rtl; padding-top: 24px; }
.heroVisual::before {
  content: '';
  position: absolute;
  inset: 4% 7% -5% 3%;
  border: 1px solid rgb(255 255 255 / 11%);
  border-radius: 30px;
  background: linear-gradient(145deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 2%));
  transform: rotate(3deg);
}
.previewBadge {
  position: absolute;
  z-index: 4;
  top: -3px;
  right: 28px;
  min-height: 36px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 999px;
  background: rgb(13 43 29 / 72%);
  color: #dce9e0;
  box-shadow: 0 10px 25px rgb(7 25 15 / 18%);
  backdrop-filter: blur(12px);
  font-size: .67rem;
  font-weight: 600;
}
.previewBadge i { width: 7px; height: 7px; border-radius: 50%; background: #5f9c93; box-shadow: 0 0 0 4px rgb(95 156 147 / 14%); }
.productFrame {
  position: relative;
  z-index: 1;
  width: min(100%, 755px);
  min-height: 520px;
  margin-inline: auto;
  overflow: visible;
  border: 1px solid #d8cfbc;
  border-radius: 24px;
  background: #faf8f3;
  box-shadow: 0 36px 80px rgb(5 22 12 / 38%);
  transform: perspective(1300px) rotateY(3deg) rotateX(1deg) rotateZ(-.6deg);
  animation: productIn 850ms cubic-bezier(.2,0,0,1) 120ms both;
}
.productTopbar { height: 60px; padding: 0 19px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e8e1d3; }
.productBrand { display: flex; align-items: center; gap: 9px; font-size: .73rem; font-weight: 700; }
.productBrand .logoTile { width: 28px; height: 28px; border-radius: 8px; }
.productBrand .logoTile img { width: 20px; height: 20px; }
.avatar { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: #eef4f0; color: var(--landing-green); font-size: .7rem; font-weight: 700; }
.productBody { min-height: 458px; display: grid; grid-template-columns: 132px 1fr; direction: rtl; }
.productNav { padding: 20px 10px; display: flex; flex-direction: column; gap: 7px; border-left: 1px solid #e8e1d3; background: #f4f0e7; border-radius: 0 0 23px 0; }
.productNav span { min-height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 8px; color: #524d42; font-size: .62rem; font-weight: 500; }
.productNav i { width: 9px; height: 9px; border: 1px solid currentColor; border-radius: 3px; }
.productNav .navActive { background: #eef4f0; color: var(--landing-green); font-weight: 700; }
.productMain { padding: 26px 24px; min-width: 0; }
.previewHeading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 19px; }
.previewHeading > div { display: flex; flex-direction: column; }
.previewHeading small { color: #5c5547; font-size: .64rem; font-weight: 600; }
.previewHeading strong { margin-top: 2px; font-size: 1.02rem; color: var(--landing-ink); font-weight: 700; }
.status { padding: 7px 11px; border-radius: 999px; background: #eef4f0; color: var(--landing-green); font-size: .59rem; font-weight: 700; }
.previewGrid { display: grid; grid-template-columns: 1.55fr .75fr; gap: 15px; }
.planCard, .macroCard, .nextCard { border: 1px solid #e8e1d3; border-radius: 14px; background: var(--landing-paper); box-shadow: 0 5px 14px rgb(61 55 45 / 6%); }
/* Sized for four meal rows even while the snack row is hidden, so adding it does not grow the
   card and nudge .productMain and the whole frame down. The button is pushed to the bottom by
   auto margin, which turns the reserved space into breathing room above "إضافة وجبة" rather
   than a gap under it. */
.planCard { min-height: 356px; display: flex; flex-direction: column; overflow: hidden; }
.planCard button { margin-top: auto; }
.planHead { height: 45px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; background: #eef4f0; }
.planHead span { font-size: .69rem; font-weight: 700; color: var(--landing-ink); }
.planHead small { color: var(--landing-green); font-size: .58rem; font-weight: 700; }
.mealRow { min-height: 67px; padding: 10px 13px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; border-bottom: 1px solid #e8e1d3; }
.mealIcon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #eef4f0; color: var(--landing-green); font-size: .6rem; font-weight: 700; }
.mealIconClay { color: #9a563f; background: #f2dfd6; }
.mealIconGold { color: #8d702f; background: #f3ead3; }
.mealRow div { display: flex; flex-direction: column; }
.mealRow b { font-size: .66rem; color: var(--landing-ink); font-weight: 600; }
.mealRow small { margin-top: 3px; color: #4a4d46; font-size: .56rem; font-weight: 500; }
.mealRow em { color: #3b3f37; font-size: .59rem; font-style: normal; font-weight: 700; }
.planCard button { width: 100%; padding: 11px; border: 0; background: transparent; color: var(--landing-green); font-size: .61rem; font-weight: 700; cursor: pointer; }
.sideStack { display: grid; gap: 15px; }
.macroCard { padding: 15px; text-align: center; }
.macroCard > small, .nextCard span { display: block; color: #4a4d46; font-size: .58rem; text-align: right; font-weight: 600; }
/* The ring carries two readings at once. How far round it goes is the day against its calorie
   target, so it starts part-empty and fills as meals are added; the colours inside that arc are
   the macro split — protein → carbs → fat, matching the legend beneath. Each stop is the
   cumulative end of its slice, and --donutFat doubles as the end of the filled arc; past it the
   ring is the neutral remainder.

   The stops are tweened from JS rather than by a CSS transition: a custom property only
   interpolates once registered with @property, and that is not honoured everywhere — where it
   is not, the ring snaps between splits instead of sweeping. rAF behaves the same everywhere. */
.donut {
  --donutProtein: 16.7%;
  --donutCarbs: 52.2%;
  --donutFat: 72.5%;
  width: 100px;
  height: 100px;
  margin: 12px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--landing-paper) 56%, transparent 58%),
    conic-gradient(
      var(--landing-green) 0 var(--donutProtein),
      var(--landing-clay) var(--donutProtein) var(--donutCarbs),
      var(--landing-gold) var(--donutCarbs) var(--donutFat),
      #ebe7de var(--donutFat) 100%
    );
}
.donut b { font-size: .9rem; color: var(--landing-ink); font-weight: 700; }
.donut span { color: #4a4d46; font-size: .53rem; font-weight: 600; }
.macroLegend { display: flex; justify-content: center; gap: 10px; color: #3f433c; font-size: .48rem; font-weight: 600; }
.macroLegend span { display: flex; align-items: center; gap: 3px; }
.macroLegend i { width: 5px; height: 5px; border-radius: 50%; }
.greenDot { background: var(--landing-green); }
.clayDot { background: var(--landing-clay); }
.goldDot { background: var(--landing-gold); }
.nextCard { padding: 15px; text-align: right; }
.nextCard b { display: block; margin: 7px 0 3px; font-size: .7rem; color: var(--landing-ink); font-weight: 700; }
.nextCard small { color: #4a4d46; font-size: .53rem; font-weight: 500; }
.floatingNote {
  position: absolute;
  left: -28px;
  bottom: 31px;
  min-width: 220px;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #dce3db;
  border-radius: 14px;
  background: rgb(255 253 248 / 95%);
  box-shadow: 0 15px 35px rgb(35 50 40 / 17%);
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
  transition: opacity 450ms cubic-bezier(.16, 1, .3, 1),
              transform 450ms cubic-bezier(.16, 1, .3, 1);
  z-index: 10;
}
.floatingNote.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.floatingNote > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #e3eee7; color: var(--landing-green); font-size: .72rem; }
.floatingNote div { display: flex; flex-direction: column; }
.floatingNote b { font-size: .66rem; color: var(--landing-ink); font-weight: 700; }
.floatingNote small { margin-top: 2px; color: #4a4d46; font-size: .54rem; font-weight: 500; }

.proofStrip { min-height: 122px; padding: 24px max(32px, calc((100vw - 1300px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 40px; background: var(--landing-deep); color: #fff; }
.proofStrip > p { max-width: 380px; margin: 0; color: #e8eee9; font-family: inherit; font-size: 1.25rem; line-height: 1.5; }
.proofStrip > div { display: flex; align-items: center; gap: 42px; }
.proofStrip span { display: flex; align-items: center; gap: 10px; color: #d8e3dc; font-size: .8rem; }
.proofStrip b { color: #a4c9b8; font-size: .72rem; font-weight: 600; }

.featuresSection { padding: 130px max(32px, calc((100vw - 1300px) / 2)); background: var(--landing-paper); }
.sectionIntro { max-width: 770px; margin-bottom: 55px; }
.sectionIntro h2, .plannerCopy h2, .deliveryCopy h2, .workflowCopy h2, .aboutSection h2, .faqIntro h2, .contactCopy h2 { margin: 0; color: var(--landing-ink); font-family: inherit; font-size: clamp(2.5rem, 4vw, 4.25rem); font-weight: 600; line-height: 1.18; letter-spacing: -.01em; }
.sectionIntro > p:last-child { max-width: 610px; margin: 22px 0 0; color: #666a61; line-height: 1.85; }
.featureGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.featureCard {
  --card-rx: 0deg;
  --card-ry: 0deg;
  --shine-x: 50%;
  --shine-y: 50%;
  position: relative;
  min-height: 348px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e8e1d3;
  border-radius: 18px;
  background: #faf8f3;
  box-shadow: 0 7px 18px rgb(38 52 42 / 5%);
  transform: perspective(950px) rotateX(var(--card-rx)) rotateY(var(--card-ry)) translateY(0);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms ease, border 200ms ease;
}
.featureCard::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--shine-x) var(--shine-y), rgb(255 255 255 / 88%), transparent 43%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.featureCard:hover { transform: perspective(950px) rotateX(var(--card-rx)) rotateY(var(--card-ry)) translateY(-5px); border-color: #cbd8ce; box-shadow: 0 20px 42px rgb(38 52 42 / 11%); }
.featureCard[data-tilt-active='true']::before { opacity: .52; }
.featureCard > * { position: relative; z-index: 1; transform: translateZ(18px); }
.featureCard h3 { transform: translateZ(28px); }
.featureCard > small { transform: translateZ(14px); }
.featureTop { display: flex; align-items: center; justify-content: space-between; color: var(--landing-green); }
.featureTop span { font-size: .72rem; font-weight: 700; }
.featureTop i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #d7ded7;
  border-radius: 50%;
  background: rgb(255 255 255 / 35%);
  font-style: normal;
  transition: border-color 220ms ease, background 220ms ease, color 220ms ease, transform 260ms cubic-bezier(.2,.8,.2,1);
}
.featureTop svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.featureCard:hover .featureTop i {
  border-color: #a9c3af;
  background: #edf3ee;
  color: #214f32;
  transform: translateZ(8px) scale(1.06);
}
.featureCard h3 { max-width: 310px; margin: 54px 0 18px; font-family: inherit; font-size: 1.75rem; font-weight: 600; line-height: 1.35; }
.featureCard p { margin: 0; color: #676b62; font-size: .9rem; line-height: 1.8; }
.featureCard > small { margin-top: auto; padding-top: 25px; border-top: 1px solid #e9e5dd; color: var(--landing-green); font-size: .69rem; font-weight: 600; }

.plannerSection {
  position: relative;
  height: 880px;
  padding: 130px max(32px, calc((100vw - 1300px) / 2));
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  grid-template-rows: minmax(0, 620px);
  align-items: stretch;
  gap: clamp(55px, 7vw, 110px);
  overflow: hidden;
  isolation: isolate;
  background: #f4f0e7;
}
.plannerCopy, .plannerVisual { position: relative; z-index: 2; height: 620px; }
.plannerCopy {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.plannerVisual { min-width: 0; isolation: isolate; }
.journeyTabs {
  margin: 27px 0 34px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid #d7d4ca;
}
.journeyTabs button {
  position: relative;
  min-height: 48px;
  padding: 0 5px 13px;
  border: 0;
  background: transparent;
  color: #82877f;
  font-family: inherit;
  font-size: .68rem;
  font-weight: 600;
  cursor: pointer;
}
.journeyTabs button::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--landing-teal);
  transform: scaleX(0);
  transition: transform 260ms ease;
}
.journeyTabs button span { display: block; margin-bottom: 4px; color: #a1a49d; font-size: .55rem; }
.journeyTabs button[aria-selected='true'] { color: var(--landing-green); }
.journeyTabs button[aria-selected='true']::after { transform: scaleX(1); }
.journeyTabs button:focus-visible { border-radius: 8px; outline: 2px solid var(--landing-teal); outline-offset: 3px; }
.journeyCopyPanels { min-height: 0; height: 100%; }
.journeyCopyPanel {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  animation: journeyCopyIn 520ms cubic-bezier(.22, .61, .36, 1) both;
}
.journeyCopyPanel[hidden] { display: none; }
.journeyCopyPanel h2 {
  margin: 0;
  font-size: clamp(1.95rem, 2.8vw, 2.85rem);
  line-height: 1.22;
  letter-spacing: -.015em;
  font-weight: 600;
}
.journeyCopyPanel > p {
  max-width: 550px;
  margin: 0;
  color: #62675f;
  font-size: 1rem;
  line-height: 1.75;
}
.journeyCopyPanel .plannerPills { margin: 4px 0 0; }
.journeyCopyPanel .researchNote { margin-top: auto; width: 100%; }
@keyframes journeyCopyIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
.plannerPills { display: flex; flex-wrap: wrap; gap: 9px; }
.plannerPills span { padding: 9px 13px; border: 1px solid #d9ded6; border-radius: 999px; background: #faf8f3; color: var(--landing-green); font-size: .7rem; font-weight: 600; }
.researchNote { padding: 18px 20px; border-inline-start: 3px solid var(--landing-teal); border-radius: 12px; background: rgb(255 255 255 / 65%); }
.researchNote b { color: var(--landing-green); font-size: .76rem; }
.researchNote p { margin: 7px 0 0; color: #666b62; font-size: .75rem; line-height: 1.8; }
.journeyControls {
  margin: 24px auto 0;
  align-self: start;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  direction: ltr;
}
.journeyControls button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #cfd7cf;
  border-radius: 50%;
  background: #faf8f3;
  color: var(--landing-green);
  font-size: 1rem;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, opacity 180ms ease;
}
.journeyControls button:hover:not(:disabled) { background: var(--landing-green); color: #fff; }
.journeyControls button:disabled { opacity: .32; cursor: default; }
.journeyControls > span { min-width: 54px; color: #8b8f88; font-size: .65rem; text-align: center; }
.journeyControls b { color: var(--landing-green); font-size: .8rem; }

.journeyVisual { min-height: 0; height: 620px; }
.journeyDecorLayer { position: absolute; inset: 0; pointer-events: none; }
.journeyDecorBack { z-index: 1; }
.journeyDecorFront { z-index: 3; }
.journeyDecorSet {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms ease, visibility 0s linear 260ms;
}
.journeySection[data-journey-index='0'] [data-decor-step='0'],
.journeySection[data-journey-index='1'] [data-decor-step='1'],
.journeySection[data-journey-index='3'] [data-decor-step='3'] {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.decorAppointment,
.decorTemplate,
.decorCloud,
.decorLink,
.decorWhatsapp { position: absolute; display: block; scale: .75; }
.decorPrimary { top: 72px; left: -132px; }
.decorRearTop { top: -12px; left: 52px; }
.decorRearLeft { top: 220px; left: -96px; }
.decorAppointment {
  width: 218px;
  height: 92px;
  overflow: hidden;
  border: 1px solid #ccd8d0;
  border-radius: 20px;
  background: #fffdfa;
  box-shadow: 0 12px 30px rgb(48 76 57 / 10%);
  transform: rotate(-7deg);
}
.decorAppointment::before {
  content: '';
  position: absolute;
  top: 17px;
  bottom: 17px;
  left: 17px;
  width: 7px;
  border-radius: 99px;
  background: var(--decor-accent);
}
.decorAppointment::after {
  content: '';
  position: absolute;
  right: 20px;
  bottom: 22px;
  width: 92px;
  height: 8px;
  border-radius: 99px;
  background: #e8eee9;
  box-shadow: 0 -17px 0 #829087;
}
.decorAppointment b {
  position: absolute;
  top: 15px;
  right: 20px;
  color: #294435;
  font: 700 22px/1 Arial, sans-serif;
  direction: ltr;
}
.decorAppointment.decorPrimary {
  width: 306px;
  height: 126px;
  border-radius: 26px;
  transform: rotate(2.5deg);
  box-shadow: 0 18px 42px rgb(48 76 57 / 13%);
  animation: decorFloat 6.5s ease-in-out infinite;
}
.decorAppointment.decorPrimary::before { top: 22px; bottom: 22px; left: 22px; width: 9px; }
.decorAppointment.decorPrimary::after { right: 27px; bottom: 29px; width: 128px; height: 10px; box-shadow: 0 -23px 0 #829087; }
.decorAppointment.decorPrimary b { top: 20px; right: 27px; font-size: 31px; }
.decorAppointment.decorRearTop { transform: rotate(6deg); }
.decorAppointment.decorRearLeft { transform: rotate(8deg); }
.decorTemplate {
  width: 142px;
  height: 178px;
  overflow: hidden;
  border: 1px solid #ccd8d0;
  border-radius: 18px;
  background:
    radial-gradient(circle at calc(100% - 23px) 78px, #4f9486 0 5px, transparent 6px),
    radial-gradient(circle at calc(100% - 23px) 120px, #d6ddd7 0 5px, transparent 6px),
    linear-gradient(var(--decor-accent), var(--decor-accent)) 16px 17px / calc(100% - 32px) 28px no-repeat,
    linear-gradient(#9da9a0, #9da9a0) 18px 71px / 58px 7px no-repeat,
    linear-gradient(#9da9a0, #9da9a0) 18px 113px / 74px 7px no-repeat,
    linear-gradient(#eef0eb, #eef0eb) 15px 56px / calc(100% - 30px) 39px no-repeat,
    linear-gradient(#f2eee7, #f2eee7) 15px 98px / calc(100% - 30px) 39px no-repeat,
    #fffdfa;
  box-shadow: 0 12px 30px rgb(48 76 57 / 10%);
}
.decorTemplate.decorRearTop { top: -18px; left: 72px; transform: rotate(7deg); }
.decorTemplate.decorRearLeft { top: 180px; left: -72px; transform: rotate(9deg); }
.decorTemplatePrimary {
  top: -16px;
  left: -96px;
  width: 186px;
  height: 232px;
  border-radius: 22px;
  transform: rotate(-4deg);
  animation: decorFloat 6.8s ease-in-out -.6s infinite;
}
.decorCloud { top: 200px; left: -86px; width: 164px; height: 110px; }
.decorLink {
  top: -4px;
  left: 50px;
  width: 98px;
  height: 58px;
  border: 13px solid #69a89b;
  border-radius: 50px;
  transform: rotate(22deg);
  box-shadow: 0 10px 24px rgb(48 76 57 / 9%);
}
.decorWhatsapp {
  top: 86px;
  left: -72px;
  width: 126px;
  height: 126px;
  animation: decorFloat 6.2s ease-in-out -.8s infinite;
}
.decorCloud img,
.decorWhatsapp img { width: 100%; height: 100%; display: block; object-fit: contain; }
@keyframes decorFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 7px -9px; }
}
.journeyFoodArt {
  position: absolute;
  top: -104px;
  left: -138px;
  width: 430px;
  height: 320px;
  pointer-events: none;
}
.journeyFoodDish {
  position: absolute;
  display: block;
  opacity: 0;
  transform: rotate(var(--dish-rotation));
  transform-origin: 50% 55%;
  transition: opacity 420ms ease;
}
.journeyFoodDish img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.82) contrast(.96);
}
.journeyFoodChicken {
  top: 23%;
  left: 0;
  z-index: 3;
  width: 58%;
  aspect-ratio: 3 / 2;
  --dish-rotation: -7deg;
  --dish-rotation-shift: 1.1deg;
  --dish-drift-x: 7px;
  --dish-drift-y: -9px;
  --dish-duration: 6.6s;
  --dish-delay: -.8s;
  will-change: transform;
  animation: foodDishFloat var(--dish-duration) ease-in-out var(--dish-delay) infinite;
  animation-play-state: paused;
}
.journeyFoodRice {
  top: 20%;
  left: 56%;
  z-index: 1;
  width: 36%;
  aspect-ratio: 1;
  --dish-rotation: 8deg;
}
.journeyFoodLabneh {
  top: 68%;
  left: 5%;
  z-index: 1;
  width: 41%;
  aspect-ratio: 3 / 2;
  --dish-rotation: -2deg;
}
.journeySection[data-journey-index='2'] .journeyFoodDish { opacity: .86; }
.journeySection[data-journey-index='2'] .journeyFoodChicken { opacity: .94; animation-play-state: running; }
@keyframes foodDishFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--dish-rotation)); }
  50% { transform: translate3d(var(--dish-drift-x), var(--dish-drift-y), 0) rotate(calc(var(--dish-rotation) + var(--dish-rotation-shift))) scale(1.018); }
}
.journeyAppShell {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 555px;
  margin-top: 32px;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  direction: rtl;
  overflow: hidden;
  border: 1px solid #d7d1c5;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 65px rgb(52 61 52 / 13%);
}

@media (prefers-reduced-motion: reduce) {
  .journeyFoodDish { animation: none !important; transition: none !important; }
}
.journeyAppNav {
  grid-column: 1;
  min-width: 0;
  display: grid;
  grid-template-rows: 68px minmax(0, 1fr) auto;
  overflow: hidden;
  border-left: 1px solid #e4e2dc;
  background: #fbfaf7;
}
.journeyAppBrand { min-width: 0; padding: 0 12px; display: flex; align-items: center; gap: 8px; overflow: hidden; border-bottom: 1px solid #e4e2dc; }
.journeyAppBrand .logoTile { width: 29px; height: 29px; border-radius: 8px; }
.journeyAppBrand .logoTile img { width: 21px; height: 21px; }
.journeyAppBrand > img { width: 62px; height: 18px; object-fit: contain; }
.journeyAppNav nav { padding: 15px 9px; display: flex; flex-direction: column; gap: 4px; }
.journeyAppNav nav > span,
.journeyAppNav nav > button,
.journeyAppSettings {
  width: 100%;
  min-height: 43px;
  padding: 0 9px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #777e77;
  font-family: inherit;
  font-size: .57rem;
  text-align: right;
  white-space: nowrap;
}
.journeyAppNav nav > button { cursor: pointer; }
.journeyAppNav nav > button:hover { background: #f0f3ef; color: #46564b; }
.journeyAppNav nav > .isActive { background: #e7f0e9; color: var(--landing-green); font-weight: 700; }
.journeyAppNav i,
.journeyAppSettings i { display: grid; place-items: center; color: currentColor; font-size: .76rem; font-style: normal; }
.journeyAppNav b,
.journeyAppSettings b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.journeyAppSettings { align-self: end; margin: 0 9px 12px; width: calc(100% - 18px); }
.journeyAppMain { grid-column: 2; min-width: 0; height: 555px; display: grid; grid-template-rows: 50px 505px; background: #fff; }
.journeyAppTopbar { padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e4e2dc; background: #fff; }
.journeyAppTopbar > div { min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; }
.journeyAppTopbar span,
.journeyAppTopbar i { color: #91958e; font-size: .53rem; font-style: normal; }
.journeyAppTopbar b { overflow: hidden; color: #455048; font-size: .57rem; text-overflow: ellipsis; }
.journeyAppAvatar { width: 27px; height: 27px; display: grid; place-items: center; flex: none; border-radius: 50%; background: #e8f0ea; color: var(--landing-green) !important; font-weight: 700; }
.journeyPanels { position: relative; z-index: 2; width: 100%; height: 505px; min-height: 0; perspective: 1300px; }
.journeyPanel { position: absolute; inset: 0; display: grid; align-items: center; animation: journeyPanelIn 680ms cubic-bezier(.22, .61, .36, 1) both; }
.journeyPanel[hidden] { display: none; }
@keyframes journeyPanelIn {
  from { opacity: 0; transform: translateY(18px) rotateX(2deg) scale(.985); }
  to { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }
}
.journeyBoard { position: relative; overflow: hidden; width: 100%; height: 505px; min-height: 0; border: 1px solid #d7d1c5; border-radius: 24px; background: rgb(255 255 255 / 96%); box-shadow: 0 30px 65px rgb(52 61 52 / 13%); }
.journeyAppShell .journeyBoard,
.journeyAppShell .plannerBoard { border: 0; border-radius: 0; box-shadow: none; }
.mockToolbar { min-height: 72px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #e8e3da; background: #faf8f3; }
.mockToolbar > div { display: flex; flex-direction: column; }
.mockToolbar b { color: #38483e; font-size: .75rem; }
.mockToolbar small { margin-top: 4px; color: #8a8d85; font-size: .56rem; }
.mockToolbar button { min-height: 35px; padding: 0 13px; border: 0; border-radius: 9px; background: var(--landing-green); color: #fff; font-family: inherit; font-size: .61rem; font-weight: 700; }
.mockSearch { min-width: 185px; min-height: 37px; padding: 0 13px; display: flex; align-items: center; border: 1px solid #dcd7cd; border-radius: 10px; background: #fff; color: #999b95; font-size: .58rem; }

.calendarDays { height: 53px; padding-right: 42px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid #e7e3dc; background: #fff; }
.calendarDays span { display: flex; flex-direction: column; align-items: center; justify-content: center; border-inline-start: 1px solid #efebe4; color: #7b8079; font-size: .5rem; }
.calendarDays small { margin-top: 2px; color: #3e5144; font-size: .62rem; font-weight: 700; }
.calendarDays span:first-child small { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #e7f0e9; color: var(--landing-green); }
.calendarTimeGrid {
  position: relative;
  height: 380px;
  margin-right: 42px;
  background:
    repeating-linear-gradient(to bottom, #e8e4dd 0 1px, transparent 1px 14.2857%),
    repeating-linear-gradient(to left, transparent 0 calc(20% - 1px), #ece8e0 calc(20% - 1px) 20%),
    #faf9f6;
}
.calendarHour { position: absolute; top: calc(var(--hour-top) - 5px); right: -38px; width: 33px; color: #989c95; font-size: .43rem; text-align: left; }
.calendarEvent { position: absolute; top: var(--event-top); width: calc(20% - 8px); height: var(--event-height); min-height: 34px; padding: 5px 6px; display: flex; flex-direction: column; overflow: hidden; border-radius: 7px; background: #e4efe7; color: var(--landing-green); box-shadow: inset -3px 0 0 #79a58a; }
.calendarEvent time { color: currentColor; font-size: .49rem; font-weight: 700; line-height: 1; }
.calendarEvent b { margin-top: 4px; overflow: hidden; font-size: .48rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.calendarEvent.dayOne { right: 4px; }
.calendarEvent.dayTwo { right: calc(20% + 4px); }
.calendarEvent.dayFour { right: calc(60% + 4px); }
.calendarEvent.dayFive { right: calc(80% + 4px); }
.eventNew { border: 1px dashed #c7a963; background: #f7eedb; color: #806626; box-shadow: none; }
.eventOnline { background: #e8f0ee; color: #47756d; box-shadow: inset -3px 0 0 #79a79e; }
.eventReview { background: #f1e2db; color: #8b543f; box-shadow: inset -3px 0 0 #bd7b61; }
.eventBlocked { background: #efefec; color: #777b75; box-shadow: inset -3px 0 0 #b8bbb5; }
.journeySchedule.isActive .eventNew { animation: calendarConfirm 4.8s ease-in-out infinite; }
@keyframes calendarConfirm { 0%, 55% { opacity: .72; } 68%, 88% { opacity: 1; border-color: transparent; background: #e4efe7; color: var(--landing-green); box-shadow: inset -3px 0 0 #79a58a; } 100% { opacity: .72; } }

.templateShelf { min-height: 282px; padding: 46px 34px 30px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 15px; perspective: 900px; }
.templateShelf article { position: relative; min-height: 198px; padding: 21px; display: flex; flex-direction: column; border: 1px solid #dedad1; border-radius: 16px; background: #fffdfa; box-shadow: 0 13px 30px rgb(47 59 49 / 8%); transform: rotateY(5deg) translateZ(0); }
.templateShelf article:nth-child(3) { transform: rotateY(-5deg); }
.templateShelf article > span { color: var(--landing-teal); font-size: .55rem; font-weight: 700; }
.templateShelf article > b { margin-top: 25px; color: #35453b; font-size: .82rem; }
.templateShelf article > small { margin-top: 6px; color: #858a82; font-size: .54rem; }
.templateShelf article > i { position: relative; height: 5px; margin-top: auto; overflow: hidden; border-radius: 99px; background: #ece9e2; }
.templateShelf article > i::after { content: ''; display: block; width: var(--template-fill); height: 100%; background: var(--landing-teal); }
.templateShelf article > em { position: absolute; top: 12px; left: 12px; padding: 4px 7px; border-radius: 999px; background: #e8f0ea; color: var(--landing-green); font-size: .48rem; font-style: normal; }
.templateShelf .selectedTemplate { border-color: #91b19b; background: #f7faf7; box-shadow: 0 22px 42px rgb(42 68 50 / 16%); transform: translateY(-15px) translateZ(25px); }
.journeyTemplates.isActive .selectedTemplate { animation: templateLift 3.8s ease-in-out infinite; }
@keyframes templateLift { 0%, 100% { transform: translateY(-10px) translateZ(15px) rotateY(0); } 48% { transform: translateY(-25px) translateZ(42px) rotateY(-2deg); } }
.templateAssign { min-height: 105px; margin: 0 24px 22px; padding: 15px 17px; display: flex; align-items: center; gap: 18px; border-radius: 14px; background: #eef4f0; }
.templateAssign div { display: flex; flex-direction: column; }
.templateAssign small { color: #7f8780; font-size: .51rem; }
.templateAssign b { margin-top: 3px; color: #34473a; font-size: .7rem; }
.templateAssign span { margin-top: 4px; color: #777d76; font-size: .52rem; }
.templateAssign button { margin-inline-start: auto; min-height: 38px; padding: 0 15px; border: 0; border-radius: 9px; background: var(--landing-green); color: #fff; font-family: inherit; font-size: .57rem; font-weight: 700; }

.journeyPlanner .plannerBoard { width: 100%; height: 505px; min-height: 0; }
.exportStatus { padding: 6px 10px; border-radius: 999px; background: #e7f0e9; color: var(--landing-green); font-size: .53rem; font-weight: 700; }
.exportWorkspace { position: relative; min-height: 432px; padding: 28px 145px 24px 125px; background: #f0eee8; }
.layoutTools { position: absolute; top: 24px; right: 20px; bottom: 24px; width: 120px; padding: 15px 12px; display: flex; flex-direction: column; gap: 7px; border: 1px solid #dedad2; border-radius: 12px; background: #fff; }
.layoutTools small { margin-bottom: 5px; color: #7f847d; font-size: .52rem; font-weight: 700; }
.layoutTools span { padding: 9px 8px; border-radius: 7px; color: #777d76; font-size: .51rem; }
.layoutTools span.active { background: #eaf2ec; color: var(--landing-green); font-weight: 700; }
.printSheet { width: min(100%, 330px); min-height: 350px; margin: auto; padding: 23px; border: 1px solid #d9d5cd; border-radius: 5px; background: #fff; box-shadow: 0 20px 45px rgb(47 55 49 / 15%); transform-origin: 50% 70%; }
.journeyExport.isActive .printSheet { animation: paperPresent 4.5s ease-in-out infinite; }
@keyframes paperPresent { 0%, 100% { transform: rotateX(0) rotateZ(0); } 42% { transform: rotateX(4deg) rotateZ(-1.2deg) translateY(-6px); box-shadow: 0 30px 55px rgb(47 55 49 / 19%); } }
.printSheet header { display: flex; align-items: center; gap: 9px; padding-bottom: 14px; border-bottom: 2px solid var(--landing-green); }
.printSheet .logoTile { width: 30px; height: 30px; border-radius: 8px; }
.printSheet .logoTile img { width: 21px; height: 21px; }
.printSheet header div { display: flex; flex-direction: column; }
.printSheet header b { color: #34473a; font-size: .67rem; }
.printSheet header small { color: #8b8e88; font-size: .46rem; }
.printDays { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.printDays span { min-height: 30px; display: grid; place-items: center; border-radius: 5px; background: #eaf2ec; color: var(--landing-green); font-size: .45rem; }
.printLines { margin-top: 14px; display: grid; gap: 12px; }
.printLines i { height: 9px; border-radius: 4px; background: linear-gradient(90deg, #e5e2dc 0 65%, #f1eee8 65%); }
.printLines i:nth-child(even) { width: 82%; }
.printSheet footer { margin-top: 25px; padding: 10px; border-radius: 6px; background: #f4f1ea; color: #838780; font-size: .46rem; }
.outputChoices { position: absolute; bottom: 25px; left: 18px; display: grid; gap: 8px; }
.outputChoices span { width: 106px; min-height: 49px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; border: 1px solid #d7dcd6; border-radius: 11px; background: #fff; box-shadow: 0 8px 18px rgb(47 55 49 / 8%); }
.outputChoices i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; background: #eaf2ec; color: var(--landing-green); font-size: .48rem; font-style: normal; font-weight: 700; }
.outputChoices b { color: #4b554d; font-size: .52rem; }
.journeyExport.isActive .outputChoices span { animation: outputArrive 4.5s ease-in-out infinite both; }
.journeyExport.isActive .outputChoices span:nth-child(2) { animation-delay: .15s; }
.journeyExport.isActive .outputChoices span:nth-child(3) { animation-delay: .3s; }
@keyframes outputArrive { 0%, 18% { opacity: 0; transform: translateX(-12px); } 32%, 82% { opacity: 1; transform: translateX(0); } 96%, 100% { opacity: 0; transform: translateX(7px); } }
.plannerBoard { position: relative; z-index: 2; overflow: hidden; border: 1px solid #d7d1c5; border-radius: 24px; background: #fff; box-shadow: 0 30px 65px rgb(52 61 52 / 13%); }
.plannerBoard::before {
  content: '';
  position: absolute;
  top: 68px;
  right: 0;
  z-index: 5;
  width: 3px;
  height: calc(100% - 68px);
  background: linear-gradient(180deg, transparent, var(--landing-teal), transparent);
  opacity: 0;
  pointer-events: none;
}
.plannerVisual[data-flow-active='true'] .plannerBoard::before { animation: wordIngest 1.15s ease both; }
@keyframes wordIngest {
  0% { opacity: 0; transform: translateY(-24%); }
  35% { opacity: .78; }
  100% { opacity: 0; transform: translateY(24%); }
}
.plannerToolbar { min-height: 72px; padding: 14px 18px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid #e8e3da; background: #faf8f3; }
.plannerToolbar > span { min-height: 42px; flex: 1; padding: 0 15px; display: flex; align-items: center; gap: 10px; border: 1px solid #dcd7cd; border-radius: 11px; background: #fff; color: #85877f; font-size: .69rem; }
.plannerToolbar > span i { width: 11px; height: 11px; border: 1.5px solid var(--landing-green); border-radius: 50%; }
.plannerToolbar em { color: var(--landing-green); font-size: .63rem; font-style: normal; font-weight: 700; }
/* The search field is a mock, not an input: the typed query lands in .searchTyped and the
   placeholder is a pseudo-element that only shows while the field is empty. */
.searchQuery { display: inline-flex; align-items: center; min-height: 1.1em; }
.searchQuery[data-empty='true']::before { content: attr(data-placeholder); color: #a3a59d; }
.searchTyped { color: #3f453f; font-weight: 600; }
.searchCaret { width: 1px; height: 14px; margin-inline-start: 2px; background: var(--landing-green); opacity: 0; }
.plannerSearch.isTyping .searchCaret { animation: caretBlink 900ms steps(1) infinite; }
@keyframes caretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.plannerContent { min-height: 410px; display: grid; grid-template-columns: 1fr 210px; }
.foodResults { position: relative; padding: 24px; }
.foodResults > small { display: block; margin-bottom: 14px; color: #8a8d85; font-size: .63rem; }
/* Shown while the search is empty — the list has nothing in it until something is looked up.
   Absolutely positioned on purpose: in flow its padding added ~200px at the instant it was
   un-hidden, while the cards were still mid-collapse, so the pair briefly overflowed
   .plannerContent's 410px and the whole board grew and snapped back. Out of flow it costs no
   height, the board stays a fixed size, and it crossfades with the cards instead. */
.foodEmpty {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 20px;
  display: grid;
  place-items: center;
  color: #a2a49c;
  font-size: .66rem;
  text-align: center;
  animation: emptyFade 420ms ease both;
}
.foodEmpty[hidden] { display: none; }
@keyframes emptyFade { from { opacity: 0; } to { opacity: 1; } }
.foodResults article {
  position: relative;
  min-height: 91px;
  padding: 13px;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #ece8df;
  transition:
    opacity 280ms ease,
    transform 380ms cubic-bezier(.22, .61, .36, 1),
    min-height 340ms cubic-bezier(.22, .61, .36, 1),
    padding 340ms cubic-bezier(.22, .61, .36, 1);
}
.foodResults article:last-child { border-bottom: 0; }
.foodResults article.foodSelected { border: 1px solid #b8cdbd; border-radius: 13px; background: #f1f6f2; }
/* The hidden state sits above its resting position, so a card slides DOWN into the list when
   a search matches it and slides UP out of the way when the list clears. The height collapses
   at the same time, which is what lets the cards below travel with it instead of jumping. */
.foodResults article.isFiltered {
  min-height: 0;
  padding-block: 0;
  opacity: 0;
  overflow: hidden;
  border-bottom-color: transparent;
  transform: translateY(-14px);
}
.foodResults article.justAdded { animation: foodAdded 900ms ease; }
@keyframes foodAdded {
  0% { background: #f1f6f2; }
  30% { background: #dcebe0; }
  100% { background: #f1f6f2; }
}
.foodGlyph { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: #e2eee6; color: var(--landing-green); font-size: .7rem; font-weight: 700; }
.foodGlyphClay { background: #f2dfd6; color: #9a563f; }
.foodGlyphGold { background: #f3ead3; color: #8d702f; }
.foodResults article > div { display: flex; flex-direction: column; }
.foodResults article b { font-size: .72rem; }
.foodResults article small { margin-top: 4px; color: #8a8d85; font-size: .58rem; }
.foodResults dl { margin: 0; display: flex; gap: 14px; }
.foodResults dl div { display: flex; flex-direction: column; text-align: center; }
.foodResults dt { color: #92948e; font-size: .49rem; }
.foodResults dd { margin: 4px 0 0; color: #51564f; font-size: .61rem; font-weight: 700; }
.planSummary { padding: 25px 20px; border-right: 1px solid #e8e3da; background: #f7f5ef; }
.planSummary > span { color: #7c8179; font-size: .61rem; }
.planSummary > strong { position: relative; margin: 8px 0 25px; display: block; color: var(--landing-green); font-size: 1.65rem; }
.planSummary > strong small { font-size: .55rem; font-weight: 500; }
/* The "+130" that rises off the total when a food is added — the visible link between the
   click and the number moving. */
.planDelta {
  position: absolute;
  inset-inline-end: 0;
  top: 2px;
  color: var(--landing-green);
  font-size: .62rem;
  font-style: normal;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
}
.planDelta.show { animation: deltaRise 1100ms ease; }
@keyframes deltaRise {
  0% { opacity: 0; transform: translateY(8px); }
  22% { opacity: 1; transform: translateY(0); }
  70% { opacity: 1; transform: translateY(-4px); }
  100% { opacity: 0; transform: translateY(-14px); }
}
.planSummary > div { position: relative; height: 52px; padding-top: 10px; }
.planSummary > div > i { position: absolute; right: 0; left: 0; bottom: 8px; height: 5px; overflow: hidden; border-radius: 99px; background: #e5e2da; }
.planSummary > div > i::after { content: ''; display: block; width: var(--fill); height: 100%; border-radius: inherit; background: var(--landing-teal); transition: width 640ms cubic-bezier(.4, 0, .2, 1); }
.planSummary > div span { display: flex; justify-content: space-between; color: #6b7069; font-size: .57rem; }
.planSummary > div b { color: #3f453f; }
.planSummary button { width: 100%; min-height: 42px; margin-top: 18px; border: 0; border-radius: 10px; background: var(--landing-green); color: #fff; font-size: .65rem; font-weight: 700; cursor: pointer; transition: transform 120ms ease, background 160ms ease; }
.planSummary button.isPressed { transform: scale(.965); background: var(--landing-deep); }

.deliverySection { min-height: 760px; padding: 120px max(32px, calc((100vw - 1300px) / 2)); display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 110px; overflow: hidden; background: var(--landing-deep); }
.deliveryCopy .kicker { color: #9ec0af; }
.deliveryCopy h2 { color: #fff; }
.deliveryCopy > p:nth-of-type(2) { max-width: 600px; margin: 25px 0 36px; color: #c9d6cd; line-height: 1.9; }
.deliveryCopy ul { margin: 0; padding: 0; list-style: none; }
.deliveryCopy li { min-height: 78px; display: flex; align-items: center; gap: 17px; border-top: 1px solid rgb(255 255 255 / 13%); }
.deliveryCopy li:last-child { border-bottom: 1px solid rgb(255 255 255 / 13%); }
.deliveryCopy li > span { color: #8fb2a1; font-size: .66rem; font-weight: 700; }
.deliveryCopy li div { display: flex; flex-direction: column; }
.deliveryCopy li b { color: #f5f7f5; font-size: .83rem; }
.deliveryCopy li small { margin-top: 4px; color: #a9b9ae; font-size: .68rem; }
.phoneStage { position: relative; min-height: 570px; display: grid; place-items: center; }
.phoneStage::before { content: ''; position: absolute; width: 480px; height: 480px; border: 1px solid rgb(255 255 255 / 7%); border-radius: 50%; box-shadow: 0 0 0 55px rgb(255 255 255 / 2%), 0 0 0 110px rgb(255 255 255 / 1.4%); }
.deliveryIcons { position: absolute; inset: 0; pointer-events: none; }
.deliveryTrail {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 420px;
  height: 310px;
  border: 1px dashed rgb(179 213 195 / 18%);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
}
.deliveryIcon { position: absolute; display: block; transform-origin: center; animation-play-state: paused !important; }
.deliveryIcon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.deliveryLinkIcon {
  z-index: 1;
  top: 76px;
  left: calc(50% + 76px);
  width: 132px;
  aspect-ratio: 1;
  transform: rotate(12deg);
  animation: deliveryLinkBeat 9s ease-in-out infinite;
}
.deliveryWhatsappIcon {
  z-index: 3;
  top: 190px;
  left: calc(50% + 92px);
  width: 118px;
  aspect-ratio: 1;
  transform: rotate(-7deg);
  animation: deliveryWhatsappBeat 9s ease-in-out infinite;
}
.deliverySecureIcon {
  z-index: 1;
  bottom: 68px;
  left: calc(50% - 206px);
  width: 126px;
  aspect-ratio: 1;
  transform: rotate(-8deg);
  animation: deliverySecureBeat 9s ease-in-out infinite;
}
.deliveryRunning .deliveryIcon { animation-play-state: running !important; }
@keyframes deliveryLinkBeat {
  0%, 27%, 100% { transform: translate(0, 0) rotate(12deg) scale(1); }
  10%, 18% { transform: translate(5px, -8px) rotate(7deg) scale(1.08); }
}
@keyframes deliveryWhatsappBeat {
  0%, 31%, 61%, 100% { transform: translate(0, 0) rotate(-7deg) scale(1); }
  42%, 52% { transform: translate(-7px, -10px) rotate(-2deg) scale(1.1); }
}
@keyframes deliverySecureBeat {
  0%, 64%, 94%, 100% { transform: translate(0, 0) rotate(-8deg) scale(1); }
  75%, 85% { transform: translate(6px, -8px) rotate(-2deg) scale(1.08); }
}
.phoneShell { position: relative; z-index: 2; width: 295px; min-height: 550px; padding: 15px; border: 8px solid #112b1f; border-radius: 38px; background: #fbfaf6; box-shadow: 0 35px 70px rgb(5 20 12 / 35%); transform: rotate(-3deg); }
.phoneTop { height: 48px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #e8e3da; color: #51564f; font-size: .64rem; font-weight: 700; }
.phoneTop .logoTile { width: 25px; height: 25px; border-radius: 7px; }
.phoneTop .logoTile img { width: 18px; height: 18px; }
.phonePatient { padding: 22px 5px; display: flex; flex-direction: column; }
.phonePatient small { color: var(--landing-green); font-size: .54rem; }
.phonePatient b { margin-top: 3px; font-family: inherit; font-size: 1.2rem; }
.phonePatient span { margin-top: 5px; color: #84877f; font-size: .55rem; }
.phoneDay { min-height: 42px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; border-radius: 10px; background: #eaf2ec; }
.phoneDay b { font-size: .64rem; }
.phoneDay small { color: var(--landing-green); font-size: .53rem; }
.phoneMeal { min-height: 74px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid #e8e3da; }
.phoneMeal > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #f1e5dc; color: #9a563f; font-size: .6rem; font-weight: 700; }
.phoneMeal div { display: flex; flex-direction: column; }
.phoneMeal b { font-size: .65rem; }
.phoneMeal small { margin-top: 3px; color: #85877f; font-size: .54rem; }
.shareTicket { position: absolute; z-index: 3; left: 8%; bottom: 55px; min-width: 235px; padding: 15px 17px; display: flex; align-items: center; gap: 11px; border: 1px solid #dce3db; border-radius: 15px; background: #fffdfa; box-shadow: 0 20px 45px rgb(5 20 12 / 28%); transform: rotate(3deg); }
.shareTicket > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: #e3eee7; color: var(--landing-green); font-size: .72rem; }
.shareTicket div { display: flex; flex-direction: column; }
.shareTicket b { font-size: .69rem; }
.shareTicket small { margin-top: 2px; color: #85877f; font-size: .55rem; }
.deliveryRunning .shareTicket { animation: deliveryTicketCycle 9s ease-in-out infinite; }
.deliveryRunning .deliveryCopy li { animation: deliveryStepBeat 9s ease-in-out infinite; }
.deliveryRunning .deliveryCopy li:nth-child(2) { animation-delay: 3s; }
.deliveryRunning .deliveryCopy li:nth-child(3) { animation-delay: 6s; }
@keyframes deliveryTicketCycle {
  0%, 31%, 96%, 100% { opacity: 0; transform: translateX(-18px) rotate(3deg) scale(.96); }
  42%, 86% { opacity: 1; transform: translateX(0) rotate(3deg) scale(1); }
}
@keyframes deliveryStepBeat {
  0%, 22%, 100% { background: transparent; box-shadow: inset 0 0 0 transparent; transform: translateX(0); }
  7%, 16% { background: rgb(255 255 255 / 4%); box-shadow: inset -3px 0 0 #76ae9d; transform: translateX(-5px); }
}

.workflowSection { min-height: 770px; padding: 120px max(32px, calc((100vw - 1300px) / 2)); display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 100px; overflow: hidden; isolation: isolate; background: #eef4f0; }
.workflowVisual { position: relative; min-height: 450px; isolation: isolate; }
.workflowOrbit { position: absolute; inset: 0; pointer-events: none; }
.workflowTrail {
  position: absolute;
  z-index: 0;
  top: 42px;
  right: -34px;
  width: 590px;
  height: 340px;
  border: 1px dashed rgb(53 97 66 / 14%);
  border-radius: 50%;
  transform: rotate(-8deg);
}
.workflowIcon { position: absolute; display: block; transform-origin: center; animation-play-state: paused !important; }
.workflowIcon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.workflowCalendarIcon {
  z-index: 1;
  top: -4px;
  left: 18px;
  width: 148px;
  aspect-ratio: 1;
  transform: rotate(-8deg);
  animation: workflowCalendarBeat 12s ease-in-out infinite;
}
.workflowPlanIcon {
  z-index: 3;
  right: -36px;
  bottom: -25px;
  width: 158px;
  height: 194px;
  transform: rotate(7deg);
  animation: workflowPlanBeat 12s ease-in-out infinite;
}
.workflowProgressIcon {
  z-index: 1;
  left: -58px;
  bottom: 18px;
  width: 168px;
  aspect-ratio: 1;
  transform: rotate(-10deg);
  animation: workflowProgressBeat 12s ease-in-out infinite;
}
.workflowRunning .workflowIcon { animation-play-state: running !important; }
@keyframes workflowCalendarBeat {
  0%, 23%, 100% { transform: translate(0, 0) rotate(-8deg) scale(1); }
  8%, 17% { transform: translate(7px, -9px) rotate(-3deg) scale(1.08); }
}
@keyframes workflowPlanBeat {
  0%, 25%, 49%, 100% { transform: translate(0, 0) rotate(7deg) scale(1); }
  33%, 42% { transform: translate(-6px, -10px) rotate(2deg) scale(1.07); }
}
@keyframes workflowProgressBeat {
  0%, 74%, 98%, 100% { transform: translate(0, 0) rotate(-10deg) scale(1); }
  82%, 91% { transform: translate(7px, -8px) rotate(-5deg) scale(1.08); }
}
.patientCard { position: absolute; z-index: 2; width: min(100%, 520px); top: 108px; right: 0; padding: 26px; border-radius: 22px; background: var(--landing-paper); box-shadow: 0 28px 60px rgb(35 58 43 / 14%); transform: rotate(1.5deg); }
.patientHead { display: flex; align-items: center; gap: 12px; }
.patientAvatar { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 50%; background: #eef4f0; color: var(--landing-green); font-weight: 700; }
.patientHead div { display: flex; flex-direction: column; }
.patientHead b { font-size: .86rem; }
.patientHead small { color: #888b83; font-size: .68rem; }
.patientHead em { margin-inline-start: auto; padding: 5px 9px; border-radius: 999px; background: #e9f1ea; color: var(--landing-green); font-size: .58rem; font-style: normal; }
.patientStats { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.patientStats span { padding: 13px; display: flex; flex-direction: column; border-radius: 12px; background: #f6f3ec; }
.patientStats small { color: #8a8d84; font-size: .6rem; }
.patientStats b { margin-top: 5px; font-size: .8rem; }
.workflowLead { max-width: 570px; margin: 24px 0 36px; color: #5c645b; line-height: 1.85; }
.workflowCopy ol { margin: 0; padding: 0; list-style: none; }
.workflowCopy li { min-height: 78px; display: flex; align-items: center; gap: 18px; border-top: 1px solid rgb(31 65 45 / 16%); }
.workflowCopy li:last-child { border-bottom: 1px solid rgb(31 65 45 / 16%); }
.workflowCopy li > span { color: var(--landing-green); font-size: .68rem; font-weight: 700; }
.workflowCopy li div { display: flex; flex-direction: column; }
.workflowCopy li b { font-size: .86rem; }
.workflowCopy li small { margin-top: 3px; color: #6c716a; font-size: .7rem; }
.workflowRunning .patientCard { animation: gentleFloat 6s ease-in-out infinite; --rotate: 1.5deg; }
.workflowRunning .patientHead em { animation: workflowStatusBeat 12s ease-in-out infinite; }
.workflowRunning .workflowCopy li { animation: workflowStepBeat 12s ease-in-out infinite; }
.workflowRunning .workflowCopy li:nth-child(2) { animation-delay: 3s; }
.workflowRunning .workflowCopy li:nth-child(3) { animation-delay: 6s; }
.workflowRunning .workflowCopy li:nth-child(4) { animation-delay: 9s; }
@keyframes workflowStatusBeat {
  0%, 49%, 75%, 100% { transform: scale(1); background: #e9f1ea; box-shadow: 0 0 0 0 rgb(79 148 134 / 0%); }
  58%, 67% { transform: scale(1.08); background: #dcece2; box-shadow: 0 0 0 9px rgb(79 148 134 / 10%); }
}
@keyframes workflowStepBeat {
  0%, 18%, 100% { background: transparent; box-shadow: inset 0 0 0 transparent; transform: translateX(0); }
  6%, 14% { background: rgb(53 97 66 / 4%); box-shadow: inset -3px 0 0 #4f9486; transform: translateX(-5px); }
}

.aboutSection { padding: 125px max(32px, calc((100vw - 1300px) / 2)); display: grid; grid-template-columns: 1fr 1fr; gap: 70px; background: var(--landing-paper); }
.aboutSection > p { max-width: 600px; margin: 35px 0 0; color: #62665e; font-size: 1rem; line-height: 1.9; }
.aboutFacts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 20px; border-top: 1px solid #e2ded5; border-bottom: 1px solid #e2ded5; }
.aboutFacts span {
  min-height: 300px;
  padding: 25px 28px 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  border-inline-start: 1px solid #e2ded5;
  transition: background 220ms ease;
}
.aboutFacts span:first-child { border-inline-start: 0; }
.aboutFacts span:hover { background: #f7f4ed; }
.aboutFactIcon {
  width: min(100%, 215px);
  height: 145px;
  margin: 0 auto 14px;
  display: block;
  object-fit: contain;
  transform-origin: center;
}
.aboutFacts b { color: var(--landing-green); font-family: inherit; font-size: 1.35rem; font-weight: 600; }
.aboutFacts small { margin-top: 6px; color: #797d74; font-size: .73rem; }
.aboutRunning .aboutFacts span { animation: aboutFactIn 620ms cubic-bezier(.22, .61, .36, 1) both; }
.aboutRunning .aboutFacts span:nth-child(2) { animation-delay: 100ms; }
.aboutRunning .aboutFacts span:nth-child(3) { animation-delay: 200ms; }
.aboutRunning .aboutFacts span:nth-child(1) .aboutFactIcon { animation: aboutIconFloat 6.4s ease-in-out -.7s infinite; }
.aboutRunning .aboutFacts span:nth-child(2) .aboutFactIcon { animation: aboutIconFloat 6.8s ease-in-out -2.2s infinite; }
.aboutRunning .aboutFacts span:nth-child(3) .aboutFactIcon { animation: aboutIconFloat 6.2s ease-in-out -3.8s infinite; }
@keyframes aboutFactIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes aboutIconFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-6px) rotate(1deg); }
}

.demoSection {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 112px max(32px, calc((100vw - 1300px) / 2));
  display: grid;
  grid-template-columns: minmax(360px, .82fr) minmax(520px, 1.18fr);
  align-items: center;
  gap: clamp(54px, 7vw, 108px);
  text-align: start;
  background:
    radial-gradient(circle at 12% 18%, rgba(95, 156, 147, .14), transparent 26%),
    radial-gradient(circle at 86% 78%, rgba(189, 100, 64, .1), transparent 24%),
    var(--landing-deep);
}
.demoCopy { position: relative; z-index: 1; max-width: 600px; }
.demoCopy .kicker { color: #5f9c93; }
.demoCopy h2 { margin: 0 0 20px; color: #fff; }
.demoCopy > p { max-width: 600px; margin: 0 0 32px; color: rgba(255, 255, 255, .9); font-size: 1rem; line-height: 1.85; }
.demoCta {
  min-height: 48px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--landing-green);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 240ms ease, box-shadow 240ms ease;
}
.demoCta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .25); }
.demoCta span { font-size: 1.1rem; }
.demoPills { margin-top: 24px; display: flex; justify-content: flex-start; gap: 16px; flex-wrap: wrap; }
.demoPills span { color: rgba(255, 255, 255, .7); font-size: .7rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.demoVisual { position: relative; z-index: 1; width: min(100%, 760px); justify-self: center; }
.demoVisual img { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 40px rgba(31, 58, 40, .18)); animation: demoVisualFloat 7s ease-in-out infinite; }
@keyframes demoVisualFloat {
  0%, 100% { transform: translateY(0) rotate(-.35deg); }
  50% { transform: translateY(-8px) rotate(.35deg); }
}

@media (max-width: 900px) {
  .demoSection { grid-template-columns: 1fr; gap: 46px; text-align: center; }
  .demoCopy { max-width: 700px; margin-inline: auto; }
  .demoCopy > p { margin-inline: auto; }
  .demoPills { justify-content: center; }
  .demoVisual { width: min(100%, 650px); }
}

.faqSection { padding: 125px max(32px, calc((100vw - 1300px) / 2)); display: grid; grid-template-columns: .75fr 1.25fr; gap: 100px; background: #f4f0e7; }
.faqIntro { position: sticky; top: 30px; align-self: start; }
.faqIntro > p:nth-of-type(2) { max-width: 520px; margin: 24px 0 0; color: #666a62; line-height: 1.85; }
.faqIconCluster { position: relative; width: min(100%, 450px); height: 245px; margin-top: 28px; }
.faqIcon { position: absolute; display: block; transform-origin: center; }
.faqIcon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.faqQuestionIcon { z-index: 2; top: 0; right: 8px; width: 126px; aspect-ratio: 1; transform: rotate(8deg); }
.faqAnswerIcon { z-index: 3; top: 34px; left: 26px; width: 114px; aspect-ratio: 1; transform: rotate(-7deg); }
.faqGuideIcon { z-index: 1; right: 82px; bottom: -4px; width: 205px; height: 145px; transform: rotate(-3deg); }
.faqRunning .faqQuestionIcon { animation: faqIconFloat 6.2s ease-in-out -.8s infinite; --faq-rotate: 8deg; }
.faqRunning .faqAnswerIcon { animation: faqIconFloat 6.7s ease-in-out -2.4s infinite; --faq-rotate: -7deg; }
.faqRunning .faqGuideIcon { animation: faqIconFloat 7.1s ease-in-out -4.1s infinite; --faq-rotate: -3deg; }
@keyframes faqIconFloat {
  0%, 100% { transform: translateY(0) rotate(var(--faq-rotate)); }
  50% { transform: translateY(-7px) rotate(calc(var(--faq-rotate) + 2deg)); }
}
.faqList { display: grid; gap: 12px; }
.faqList details {
  border: 1px solid #d9d6cd;
  border-radius: 16px;
  background: rgb(255 255 255 / 36%);
  box-shadow: 0 8px 22px rgb(63 61 54 / 4%);
  transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.faqList details[open] { border-color: #afc6b5; background: #faf8f3; box-shadow: 0 14px 30px rgb(53 76 59 / 8%); }
.faqList summary { min-height: 84px; padding: 0 20px; display: grid; grid-template-columns: 34px 1fr 28px; align-items: center; gap: 13px; color: #353a34; cursor: pointer; list-style: none; font-size: .87rem; font-weight: 700; }
.faqList summary::-webkit-details-marker { display: none; }
.faqList summary > span { color: var(--landing-green); font-size: .62rem; }
.faqList summary i { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #ccd5cc; border-radius: 50%; color: var(--landing-green); font-size: .9rem; font-style: normal; font-weight: 400; transition: transform 180ms ease; }
.faqList details[open]:not(.isClosing) summary i { transform: rotate(45deg); }
.faqList details p { max-width: 680px; margin: -3px 0 0; padding: 0 74px 24px 54px; color: #686d65; font-size: .78rem; line-height: 1.9; }

.contactSection { margin: 0; padding: 110px max(32px, calc((100vw - 1300px) / 2)); display: grid; grid-template-columns: 1fr .82fr; gap: 100px; align-items: center; background: var(--landing-deep); color: #fff; }
.contactCopy .kicker { color: #9ec0af; }
.contactCopy h2 { color: #fff; }
.contactCopy h2 > span { display: block; }
.contactTitleLine { display: flex !important; align-items: center; gap: .22em; white-space: nowrap; }
.contactTitleLine img { width: clamp(205px, 16vw, 285px); height: auto; display: inline-block; flex: none; }
.contactCopy > p:last-child { max-width: 590px; margin: 25px 0 0; color: #cdd9d0; line-height: 1.9; }
.contactForm, .successCard { padding: 32px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 20px; background: rgb(255 255 255 / 6%); }
.contactForm { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contactForm label { display: flex; flex-direction: column; gap: 8px; }
.contactForm label > span { color: #e5eee7; font-size: .73rem; font-weight: 600; }
.contactForm label small { color: #9fb1a5; font-weight: 400; }
.contactForm input, .contactForm select { width: 100%; height: 49px; padding: 0 14px; border: 1px solid rgb(255 255 255 / 17%); border-radius: 10px; outline: 0; background: rgb(255 255 255 / 8%); color: #fff; transition: border 160ms ease, background 160ms ease; }
.contactForm select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #9fb1a5 50%), linear-gradient(135deg, #9fb1a5 50%, transparent 50%); background-position: 16px 21px, 11px 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.contactForm select option { color: #222; }
.contactForm input::placeholder { color: #8fa297; }
.contactForm input:focus, .contactForm select:focus { border-color: #9ec0af; background-color: rgb(255 255 255 / 11%); }
.contactForm button { grid-column: 1 / -1; height: 52px; margin-top: 3px; display: flex; align-items: center; justify-content: space-between; padding: 0 21px; border: 0; border-radius: 10px; background: #f4efe5; color: var(--landing-deep); font-weight: 700; cursor: pointer; transition: background 160ms ease, transform 160ms ease; }
.contactForm button:hover { background: #fff; transform: translateY(-2px); }
.contactForm > small { grid-column: 1 / -1; color: #94a69a; font-size: .62rem; }
.successCard { min-height: 310px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.successCard > span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: #e2eee6; color: var(--landing-green); font-size: 1.2rem; }
.successCard h3 { margin: 18px 0 5px; color: #fff; font-family: inherit; font-size: 1.8rem; }
.successCard p { margin: 0; color: #b9c8be; }
.successCard button { margin-top: 20px; border: 0; background: none; color: #dce8e0; text-decoration: underline; cursor: pointer; }

.footer { 
  padding: 60px max(32px, calc((100vw - 1300px) / 2));
  background: #112b1f;
  color: #d7e1da;
}
.footer > .footerInner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 60px;
  margin-bottom: 50px;
}
.footerColumn { display: flex; flex-direction: column; gap: 14px; }
/* align-items pins the lockup, tagline and social row to the inline start — the right, in RTL.
   Without it they depend on how the column flex container happens to size an inline-flex child,
   and .footerLogo carries direction: ltr (so the mark stays left of the Latin wordmark), which
   drags its contents to the left edge the moment the box is stretched to full width. */
.footerBrand { gap: 18px; align-items: flex-start; }
.footerLogo { display: inline-flex; align-items: center; gap: 11px; direction: ltr; }
.footerLogoMark { width: 40px; height: 40px; display: block; }
.footerLogoType { width: 132px; height: auto; display: block; }
.footerTagline { margin: 0; color: #8fa095; font-size: .82rem; line-height: 1.65; }
.footerSocial { display: flex; gap: 12px; margin-top: 8px; }
.socialIcon { 
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgb(255 255 255 / 6%);
  color: #9fb1a5;
  transition: background 160ms ease, color 160ms ease;
}
.socialIcon:hover {
  background: rgb(255 255 255 / 10%);
  color: #c6ddd7;
}
.footerColumn h3 { 
  margin: 0 0 6px;
  color: #e5eee7;
  font-size: .82rem;
  font-weight: 600;
}
.footerColumn a { 
  color: #9fb1a5;
  font-size: .78rem;
  transition: color 160ms ease;
}
.footerColumn a:hover { color: #c6ddd7; }
.footerBottom {
  padding-top: 30px;
  border-top: 1px solid rgb(255 255 255 / 8%);
  text-align: center;
}
.footerBottom p {
  margin: 0;
  color: #7f9387;
  font-size: .68rem;
  line-height: 1.6;
  direction: ltr;
}

.blogPage { min-height: 100vh; }
.blogHero {
  padding: 80px max(32px, calc((100vw - 1300px) / 2)) 60px;
  background: #f4f0e7;
  text-align: center;
}
.blogHero h1 {
  margin: 0 0 16px;
  color: var(--landing-ink);
  font-size: clamp(2.8rem, 5vw, 4rem);
  font-weight: 600;
}
.blogHero p {
  max-width: 600px;
  margin: 0 auto;
  color: #62675f;
  font-size: 1.05rem;
  line-height: 1.75;
}
.blogContent {
  padding: 80px max(32px, calc((100vw - 1300px) / 2));
  background: var(--landing-paper);
}
.blogGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
  max-width: 1300px;
  margin: 0 auto;
}
.blogCard {
  display: flex;
  flex-direction: column;
  border: 1px solid #e8e1d3;
  border-radius: 16px;
  background: #faf8f3;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.blogCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgb(38 52 42 / 10%);
}
.blogCard .blogCardImage {
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, #e8e1d3 0%, #d8cfbc 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9b9486;
  font-size: .8rem;
}
.blogCard .blogCardContent {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.blogCard .blogCardDate {
  color: var(--landing-green);
  font-size: .7rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.blogCard h3 {
  margin: 0 0 12px;
  color: var(--landing-ink);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.4;
}
.blogCard .blogCardExcerpt {
  margin: 0;
  color: #666a61;
  font-size: .88rem;
  line-height: 1.7;
  flex: 1;
}
/* .blogGrid and .blogCard above are unused while the blog is empty; they are kept because the
   first real post reuses them verbatim. */
/* Confirmation shown after the early-access form is submitted (thanks.html). */
.thanksCard {
  max-width: 620px;
  margin: 0 auto;
  padding: 52px 32px;
  border: 1px solid #e8e1d3;
  border-radius: 16px;
  background: #faf8f3;
  text-align: center;
}
.thanksMark {
  width: 54px;
  height: 54px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e2eee6;
  color: var(--landing-green);
  font-size: 1.4rem;
  font-weight: 700;
}
.thanksCard h2 { margin: 0 0 14px; color: var(--landing-ink); font-size: 1.35rem; font-weight: 600; }
.thanksCard p { margin: 0 0 14px; color: #666a61; font-size: .92rem; line-height: 1.8; }
.thanksCard .thanksMeta { color: #8a8d84; font-size: .82rem; }
.thanksCta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 12px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--landing-deep);
  color: #f4f7f4 !important;
  font-size: .88rem;
  font-weight: 600;
  transition: background 180ms ease;
}
.thanksCta:hover { background: var(--landing-green); }
.thanksCta span { color: #a9cbc4; }

.blogEmpty {
  max-width: 620px;
  margin: 0 auto;
  padding: 56px 32px;
  border: 1px solid #e8e1d3;
  border-radius: 16px;
  background: #faf8f3;
  text-align: center;
}
.blogEmpty > p:first-child {
  margin: 0 0 14px;
  color: var(--landing-ink);
  font-size: 1.35rem;
  font-weight: 600;
}
.blogEmpty .blogEmptyLead {
  margin: 0 0 26px;
  color: #666a61;
  font-size: .92rem;
  line-height: 1.8;
}
.blogEmpty .blogEmptyCta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--landing-deep);
  color: #f4f7f4 !important;
  font-size: .88rem;
  font-weight: 600;
  transition: background 180ms ease;
}
.blogEmpty .blogEmptyCta:hover { background: var(--landing-green); }
.blogEmpty .blogEmptyCta span { color: #a9cbc4; }

/* Blog Article Pages */
.blogCard {
  text-decoration: none;
  color: inherit;
}
.blogArticleHero {
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 24px 60px;
  text-align: left;
}
[dir="rtl"] .blogArticleHero {
  text-align: right;
}
.blogArticleMeta {
  margin: 0 0 16px;
  color: var(--landing-green);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.blogArticleHero h1 {
  margin: 0;
  color: var(--landing-ink);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.2;
}
@media (max-width: 768px) {
  .blogArticleHero {
    padding: 60px 20px 40px;
  }
  .blogArticleHero h1 {
    font-size: 2rem;
  }
}
.blogArticleBody {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px 100px;
  color: #3e4138;
  font-size: 1.05rem;
  line-height: 1.85;
}
@media (max-width: 768px) {
  .blogArticleBody {
    padding: 0 20px 80px;
    font-size: 1rem;
  }
}
.blogArticleBody h2 {
  margin: 56px 0 24px;
  color: var(--landing-ink);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
}
.blogArticleBody h2:first-child {
  margin-top: 0;
}
.blogArticleBody p {
  margin: 0 0 24px;
}
.blogArticleTakeaway {
  margin: 56px 0;
  padding: 28px 32px;
  background: #e8f0ea;
  border-left: 4px solid var(--landing-green);
  border-radius: 8px;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--landing-ink);
  font-weight: 500;
}
[dir="rtl"] .blogArticleTakeaway {
  border-left: none;
  border-right: 4px solid var(--landing-green);
}
@media (max-width: 768px) {
  .blogArticleTakeaway {
    padding: 22px 24px;
    font-size: .98rem;
  }
}
.blogArticleCta {
  margin: 56px 0 0;
  text-align: center;
}
.blogArticleCta a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--landing-deep);
  color: #f4f7f4 !important;
  font-size: .94rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}
.blogArticleCta a:hover {
  background: var(--landing-green);
  transform: translateY(-2px);
}
.blogArticleCta a span {
  color: #a9cbc4;
}

@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes productIn { from { opacity: 0; transform: perspective(1300px) rotateY(3deg) rotateX(1deg) rotateZ(-.6deg) translateY(25px); } to { opacity: 1; transform: perspective(1300px) rotateY(3deg) rotateX(1deg) rotateZ(-.6deg) translateY(0); } }
@keyframes productInMobile { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(10px); }
}
@keyframes floatIn {
  from { opacity: 0; transform: translateX(-15px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes floatOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-15px); }
}
@keyframes gentleFloat {
  0%, 100% { transform: translateY(0) rotate(var(--rotate, 0deg)); }
  50% { transform: translateY(-5px) rotate(var(--rotate, 0deg)); }
}
@keyframes buttonPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.mealRowSnack {
  max-height: 0;
  min-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 0px solid transparent;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: max-height 500ms cubic-bezier(.4, 0, .2, 1),
              min-height 500ms cubic-bezier(.4, 0, .2, 1),
              opacity 400ms cubic-bezier(.4, 0, .2, 1),
              padding 500ms cubic-bezier(.4, 0, .2, 1),
              border-color 400ms ease,
              transform 500ms cubic-bezier(.4, 0, .2, 1);
}
.mealRowSnack.is-visible {
  max-height: 80px;
  min-height: 67px;
  opacity: 1;
  padding: 10px 13px;
  border-bottom: 1px solid #e8e1d3;
  pointer-events: auto;
  transform: translateY(0);
}

.planSummary button.pulse { animation: buttonPulse 400ms ease-out; }

@media (min-width: 1101px) {
  .heroBrandMark {
    top: auto;
    bottom: -255px;
    right: -195px;
    left: auto;
    width: 780px;
    transform: rotate(-7deg);
    opacity: .34;
  }
}

@media (max-width: 1100px) {
  .header { grid-template-columns: 1fr auto; }
  .nav { position: absolute; top: 78px; left: 0; right: 0; padding: 20px; display: none; flex-direction: column; align-items: stretch; border: 1px solid #ded9cf; border-radius: 15px; background: var(--landing-paper); box-shadow: 0 20px 40px rgb(37 41 35 / 14%); z-index: 10; }
  #menu-toggle:checked ~ .nav { display: flex; }
  .loginLink, .headerCta { display: none; }
  .menuButton { display: block; }
  .navDrop > button { padding: 10px 0; border-radius: 0; }
  .navDrop > button:hover { background: transparent; }
  .navPanel { position: static; min-width: 0; padding: 0 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; opacity: 1; transform: none; pointer-events: auto; }
  .navDrop:not([open]) .navPanel { display: none; }
  .navDrop[open] .navPanel { display: block; }
  .navPanel a { padding: 8px 6px; font-size: .85rem; }
  .navPanel a .navIcon { display: none; }
  .hero { grid-template-columns: 1fr; padding: 70px 52px 72px; }
  .heroCopy { padding-inline: 0; text-align: center; }
  .eyebrow, .heroActions, .heroTrust { justify-content: center; }
  .hero h1, .heroLead { margin-inline: auto; }
  /* Body copy stays start-aligned even when the hero block is centred — a centred
     multi-line Arabic paragraph is ragged on both edges and harder to scan. */
  .heroLead { text-align: start; }
  .heroVisual { width: min(820px, 100%); margin: 20px auto 0; }
  .proofStrip { flex-direction: column; text-align: center; }
  .plannerSection, .deliverySection, .faqSection { grid-template-columns: 1fr; gap: 60px; }
  .journeySection { height: auto; grid-template-rows: 620px 620px; }
  .plannerCopy, .deliveryCopy, .faqIntro { max-width: 780px; }
  .journeyCopyPanels { min-height: 0; }
  .journeyVisual { width: min(820px, 100%); margin-inline: auto; }
  .faqIntro { position: static; }
  .phoneStage { min-height: 620px; }
  .workflowSection { grid-template-columns: 1fr; gap: 55px; }
  .workflowVisual { order: 2; width: min(650px, 100%); min-height: 460px; margin: auto; }
  .patientCard { width: min(calc(100% - 34px), 520px); right: 17px; --rotate: 1.5deg; }
  .workflowTrail { right: 4px; width: 540px; }
  .footer > .footerInner { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}

@media (max-width: 760px) {
  .header { width: min(100% - 32px, 1300px); }
  .header { height: 74px; }
  .hero { width: calc(100% - 20px); min-height: auto; margin-top: 10px; padding: 52px 20px 55px; gap: 42px; border-radius: 22px; }
  .hero::before { inset: 9px; border-radius: 15px; }
  .heroBrandMark { top: 24%; left: 50%; width: min(88vw, 390px); opacity: .28; }
  .hero h1 { font-size: clamp(2.25rem, 10.3vw, 3rem); }
  .heroLead { font-size: .92rem; }
  .heroActions { flex-direction: column; align-items: stretch; }
  .secondaryCta { justify-content: center; }
  .heroTrust { align-items: flex-start; text-align: right; }
  .heroVisual { padding-top: 20px; }
  .previewBadge { top: 0; right: 14px; }
  .productFrame { min-height: 380px; border-radius: 17px; transform: none; animation-name: productInMobile; }
  .productBody { min-height: 320px; grid-template-columns: 1fr; }
  .productNav { display: none; }
  .productMain { padding: 18px 13px; }
  .previewGrid { grid-template-columns: 1fr; }
  .sideStack { display: none; }
  .floatingNote { left: 8px; bottom: -15px; min-width: 190px; }
  /* Four full-width rows ate a third of the screen. A 2×2 grid halves the height and the
     numbering stays scannable. Start-aligned so the sentence and the list agree. */
  .proofStrip { align-items: flex-start; gap: 22px; padding: 30px 20px; text-align: start; }
  .proofStrip > p { font-size: 1.05rem; }
  .proofStrip > div { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px 12px; text-align: start; }
  .featuresSection, .plannerSection, .deliverySection, .workflowSection, .aboutSection, .demoSection, .faqSection, .contactSection { padding: 82px 20px; }
  .featureGrid { grid-template-columns: 1fr; }
  .featureCard { min-height: 310px; }
  .journeySection { grid-template-rows: 620px 465px; gap: 45px; }
  .plannerCopy { height: 620px; }
  .plannerVisual { height: 465px; margin-top: 0; }
  .journeyTabs { grid-template-columns: repeat(2, 1fr); margin-bottom: 28px; }
  .journeyTabs button { min-height: 45px; padding-bottom: 10px; }
  .journeyCopyPanels { min-height: 0; }
  .journeyCopyPanel { display: flex; flex-direction: column; gap: 14px; }
  .journeyCopyPanel h2 { font-size: clamp(1.85rem, 8.5vw, 2.4rem); line-height: 1.22; }
  .journeyCopyPanel > p { font-size: 0.95rem; line-height: 1.65; }
  .journeyCopyPanel .researchNote { display: none; }
  .journeyControls { margin: 22px auto 0; justify-self: center; }
  .journeyVisual { height: 465px; min-height: 0; }
  .journeyAppShell { height: 430px; margin-top: 17px; grid-template-columns: 58px minmax(0, 1fr); border-radius: 17px; }
  .journeyAppNav { grid-template-rows: 48px minmax(0, 1fr) auto; }
  .journeyAppBrand { padding: 0; justify-content: center; }
  .journeyAppBrand .logoTile { width: 27px; height: 27px; }
  .journeyAppBrand > img { display: none; }
  .journeyAppNav nav { padding: 10px 7px; }
  .journeyAppNav nav > span,
  .journeyAppNav nav > button,
  .journeyAppSettings { min-height: 39px; padding: 0; grid-template-columns: 1fr; place-items: center; }
  .journeyAppNav b,
  .journeyAppSettings b { display: none; }
  .journeyAppSettings { margin: 0 7px 9px; width: calc(100% - 14px); }
  .journeyAppMain { height: 430px; grid-template-rows: 48px 382px; }
  .journeyAppTopbar { padding-inline: 11px; }
  .journeyPanels { height: 382px; min-height: 0; }
  .journeyDecorLayer { width: 139%; height: 139%; transform: scale(.72); transform-origin: left top; }
  .journeyFoodArt { top: -60px; left: -88px; width: 300px; height: 230px; }
  .journeySection[data-journey-index='2'] .journeyFoodDish { opacity: .76; }
  .journeySection[data-journey-index='2'] .journeyFoodChicken { opacity: .9; }
  .journeyBoard { height: 382px; min-height: 0; border-radius: 0; }
  .mockToolbar { min-height: 61px; padding: 11px 13px; }
  .mockSearch { min-width: 135px; }
  .calendarDays { height: 45px; padding-right: 34px; }
  .calendarDays span { font-size: .38rem; }
  .calendarDays small { font-size: .46rem; }
  .calendarDays span:first-child small { width: 18px; height: 18px; }
  .calendarTimeGrid { height: 276px; margin-right: 34px; }
  .calendarHour { right: -31px; width: 27px; font-size: .36rem; }
  .calendarEvent { width: calc(20% - 4px); min-height: 24px; padding: 3px; border-radius: 5px; }
  .calendarEvent.dayOne { right: 2px; }
  .calendarEvent.dayTwo { right: calc(20% + 2px); }
  .calendarEvent.dayFour { right: calc(60% + 2px); }
  .calendarEvent.dayFive { right: calc(80% + 2px); }
  .calendarEvent time { font-size: .37rem; }
  .calendarEvent b { margin-top: 2px; font-size: .36rem; }
  .templateShelf { min-height: 214px; padding: 20px 45px 12px; grid-template-columns: 1fr; }
  .templateShelf article:not(.selectedTemplate) { display: none; }
  .templateShelf article { min-height: 170px; }
  .templateAssign { min-height: 82px; margin: 0 13px 13px; padding: 10px 12px; }
  .templateAssign span { display: none; }
  .templateAssign button { padding-inline: 11px; }
  .journeyPlanner .plannerBoard { height: 382px; min-height: 0; }
  .plannerContent { height: 310px; min-height: 0; grid-template-columns: 1fr; }
  .planSummary { display: none; }
  .plannerToolbar em { display: none; }
  .foodResults { padding: 15px; }
  .foodResults article { grid-template-columns: 38px 1fr; }
  .foodResults dl { display: none; }
  .exportWorkspace { min-height: 321px; padding: 18px 18px 16px 80px; }
  .layoutTools { display: none; }
  .printSheet { width: min(100%, 245px); min-height: 275px; padding: 15px; }
  .printSheet footer { margin-top: 16px; }
  .outputChoices { bottom: 20px; left: 9px; }
  .outputChoices span { width: 72px; min-height: 42px; padding: 6px; }
  .outputChoices i { width: 22px; height: 22px; }
  .outputChoices b { display: none; }
  .deliverySection { gap: 30px; }
  .deliveryCopy { order: 1; }
  .phoneStage { order: 2; min-height: 580px; }
  .deliveryTrail { width: 330px; height: 265px; }
  .deliveryLinkIcon { top: 82px; left: calc(50% + 52px); width: 106px; }
  .deliveryWhatsappIcon { top: 188px; left: calc(50% + 72px); width: 96px; }
  .deliverySecureIcon { bottom: 76px; left: calc(50% - 174px); width: 106px; }
  /* Cards are already stacked by the ≤1100 rules; only the phone padding differs. */
  .patientCard { padding: 22px; }
  .workflowVisual { min-height: 420px; }
  .patientCard { top: 105px; right: 15px; width: calc(100% - 30px); }
  .workflowTrail { top: 55px; right: -48px; width: 410px; height: 285px; }
  .workflowCalendarIcon { top: 2px; left: -20px; width: 116px; }
  .workflowPlanIcon { right: -26px; bottom: -12px; width: 122px; height: 150px; }
  .workflowProgressIcon { left: -42px; bottom: 17px; width: 126px; }
  .aboutSection, .contactSection { grid-template-columns: 1fr; gap: 42px; }
  .aboutFacts { grid-template-columns: 1fr; }
  .aboutFacts span { min-height: 0; padding: 24px; border-inline-start: 0; border-top: 1px solid #e2ded5; }
  .aboutFacts span:first-child { border-top: 0; }
  .aboutFactIcon { width: 155px; height: 105px; margin-bottom: 10px; }
  .contactForm { grid-template-columns: 1fr; padding: 23px; }
  .contactForm button, .contactForm > small { grid-column: auto; }
  .contactTitleLine { flex-wrap: wrap; white-space: normal; }
  .contactTitleLine img { width: clamp(180px, 48vw, 250px); }
  .faqIconCluster { width: min(100%, 340px); height: 190px; margin-top: 20px; }
  .faqQuestionIcon { width: 92px; }
  .faqAnswerIcon { top: 25px; left: 16px; width: 84px; }
  .faqGuideIcon { right: 60px; width: 155px; height: 108px; }
  .faqList summary { min-height: 76px; padding: 0 14px; grid-template-columns: 28px 1fr 28px; gap: 10px; }
  .faqList details p { margin-right: 0; padding: 0 52px 20px 18px; }
  /* One centred column per group made the footer taller than the viewport (871px on a 812px
     screen). Two columns for the link groups, brand across the top, start-aligned. */
  .footer { padding: 46px 20px 34px; }
  .footer > .footerInner { grid-template-columns: repeat(2, 1fr); gap: 32px 18px; margin-bottom: 32px; text-align: start; }
  .footerBrand { grid-column: 1 / -1; }
  .footerColumn { gap: 11px; }
  .blogGrid { grid-template-columns: 1fr; }
  .blogHero { padding: 60px 20px 50px; }
  .blogContent { padding: 60px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .heroCopy, .productFrame { animation: none; }
  .featureCard, .headerCta, .primaryCta, .contactForm button { transition: none; }
  .featureCard, .featureCard:hover { transform: none; }
  .featureCard::before { display: none; }
  .decorAppointment.decorPrimary, .decorTemplatePrimary, .decorWhatsapp { animation: none !important; }
  .journeyCopyPanel, .journeyPanel, .calendarEvent, .selectedTemplate, .printSheet, .outputChoices span { animation: none !important; }
  .patientCard, .patientHead em, .workflowIcon, .workflowCopy li { animation: none !important; }
  .mealRow, .floatingNote, .shareTicket, .deliveryIcon, .deliveryCopy li { animation: none !important; }
  .aboutFacts span, .aboutFactIcon { animation: none !important; }
  .faqIcon { animation: none !important; }
  .demoVisual img { animation: none !important; }
  .planSummary button { animation: none !important; }
}

.legalPage {
  min-height: 100vh;
}
.legalHero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 80px max(32px, calc((100vw - 1300px) / 2)) 60px;
  background-color: #f4f0e7;
  background-image: url("assets/legal-hero-background.svg");
  background-position: center;
  background-size: cover;
  text-align: center;
}
.legalHero > * { position: relative; z-index: 1; }
.legalHero.thanksHero { background-image: url("assets/success-hero-background.svg"); }
.legalHero h1 {
  margin: 0 0 16px;
  color: var(--landing-ink);
  font-size: clamp(2.8rem, 5vw, 4rem);
  font-weight: 600;
}
.legalHero p {
  max-width: 600px;
  margin: 0 auto;
  color: #62675f;
  font-size: 1.05rem;
  line-height: 1.75;
}
.legalContent {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 32px;
}
.legalContent .lastUpdated {
  display: inline-block;
  margin-bottom: 40px;
  padding: 10px 16px;
  border-radius: 8px;
  background: #f4f0e7;
  color: var(--landing-green);
  font-size: .8rem;
  font-weight: 600;
}
/* Marks a clause describing something the product does not do yet. The beta is running with
   real clinics entering real patient data, so a promise the platform cannot keep has to be
   visibly labelled rather than quietly worded — inline tag for a single sentence, block note
   for a whole section. Remove the marker when the feature ships; do not remove the clause. */
.legalContent .soonTag {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f1ddd5;
  color: #96553e;
  font-size: .68rem;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
}
.legalContent .soonNote {
  margin: 14px 0 22px;
  padding: 14px 18px;
  border-inline-start: 3px solid #d8a189;
  border-radius: 10px;
  background: #fdf6f2;
  color: #7a5344;
  font-size: .86rem;
  line-height: 1.75;
}
.legalContent .soonNote strong { color: #96553e; }
.legalContent h2 {
  margin: 48px 0 20px;
  color: var(--landing-ink);
  font-size: 1.85rem;
  font-weight: 600;
  line-height: 1.4;
}
.legalContent h2:first-of-type {
  margin-top: 0;
}
.legalContent h3 {
  margin: 32px 0 16px;
  color: var(--landing-ink);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.4;
}
.legalContent p {
  margin: 0 0 20px;
  color: #4a4e47;
  font-size: 1rem;
  line-height: 1.85;
}
.legalContent ul, .legalContent ol {
  margin: 0 0 24px;
  padding-right: 24px;
  color: #4a4e47;
  font-size: 1rem;
  line-height: 1.85;
}
.legalContent li {
  margin-bottom: 12px;
}
.legalContent a {
  color: var(--landing-green);
  text-decoration: underline;
  transition: color 160ms ease;
}
.legalContent a:hover {
  color: var(--landing-deep);
}
.legalContent strong {
  color: var(--landing-ink);
  font-weight: 600;
}
.legalContent .contactBox {
  margin: 40px 0;
  padding: 24px;
  border-right: 3px solid var(--landing-green);
  border-radius: 12px;
  background: #f4f0e7;
}
.legalContent .contactBox h3 {
  margin-top: 0;
  font-size: 1.1rem;
}
.legalContent .contactBox p {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .legalHero {
    padding: 60px 20px 50px;
    background-position: left center;
  }
  .legalContent {
    padding: 60px 20px;
  }
  .legalContent h2 {
    font-size: 1.6rem;
  }
  .legalContent h3 {
    font-size: 1.2rem;
  }
}

/* ==========================================================================
   About Page
   ========================================================================== */

.aboutPage {
  min-height: 100vh;
}
.aboutHero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 100px max(32px, calc((100vw - 1300px) / 2)) 70px;
  background-color: #f4f0e7;
  background-image: url("assets/about-hero-background.svg");
  background-position: center;
  background-size: cover;
  text-align: center;
}
.aboutHero > * { position: relative; z-index: 1; }
.aboutHero h1 {
  margin: 0 0 18px;
  color: var(--landing-ink);
  font-size: clamp(3rem, 5.5vw, 4.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.aboutHero p {
  max-width: 640px;
  margin: 0 auto;
  color: #62675f;
  font-size: 1.15rem;
  line-height: 1.65;
}
.aboutContent {
  max-width: 760px;
  margin: 0 auto;
  padding: 90px 32px 100px;
}
.aboutStorySection {
  padding: 50px 0;
  border-bottom: 1px solid #e8e3da;
}
.aboutStorySection:first-child {
  padding-top: 0;
}
.aboutStorySection:last-of-type {
  border-bottom: 0;
}
.aboutStorySection .kicker {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--landing-green);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.aboutStorySection h2 {
  margin: 0 0 26px;
  color: var(--landing-ink);
  font-size: clamp(2rem, 3.5vw, 2.85rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.aboutStorySection p {
  margin: 0 0 22px;
  color: #4a4e47;
  font-size: 1.05rem;
  line-height: 1.8;
}
.aboutStorySection p:last-child {
  margin-bottom: 0;
}
.aboutValues {
  margin: 28px 0 0;
  display: grid;
  gap: 26px;
}
.aboutValues > div {
  padding-inline-start: 18px;
  border-inline-start: 3px solid var(--landing-green);
}
.aboutValues dt {
  margin-bottom: 8px;
  color: var(--landing-ink);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
}
.aboutValues dd {
  margin: 0;
  color: #4a4e47;
  font-size: 1rem;
  line-height: 1.75;
}
.aboutCta {
  margin-top: 70px;
  padding: 44px 40px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f4f9f6 0%, #eef4f0 100%);
  text-align: center;
}
.aboutCta h3 {
  margin: 0 0 24px;
  color: var(--landing-ink);
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.4;
}
.aboutCta .primaryCta {
  min-height: 54px;
  padding: 0 28px;
  gap: 16px;
  border: 0;
  border-radius: 999px;
  color: #fff !important;
  background: var(--landing-green);
  box-shadow: 0 9px 22px rgb(53 97 66 / 16%);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.aboutCta .primaryCta:hover {
  transform: translateY(-2px);
  background: #2a4d35;
  box-shadow: 0 13px 26px rgb(53 97 66 / 22%);
}
.aboutCta .primaryCta span {
  font-size: 1.2rem;
}

@media (max-width: 760px) {
  .aboutHero {
    padding: 70px 20px 55px;
  }
  .aboutHero h1 {
    font-size: 2.4rem;
  }
  .aboutHero p {
    font-size: 1rem;
  }
  .aboutContent {
    padding: 60px 20px 70px;
  }
  .aboutStorySection {
    padding: 40px 0;
  }
  .aboutStorySection h2 {
    font-size: 1.75rem;
  }
  .aboutStorySection p {
    font-size: 1rem;
  }
  .aboutValues dt {
    font-size: 1rem;
  }
  .aboutValues dd {
    font-size: 0.95rem;
  }
  .aboutCta {
    padding: 32px 24px;
  }
  .aboutCta h3 {
    font-size: 1.4rem;
  }
}

/* ==========================================================================
   LTR (English) Styles & Overrides
   ========================================================================== */

[dir="ltr"] body,
.page[dir="ltr"] {
  font-family: "Plus Jakarta Sans", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

[dir="ltr"] h1,
[dir="ltr"] h2,
[dir="ltr"] .hero h1,
[dir="ltr"] .sectionIntro h2,
[dir="ltr"] .journeyCopyPanel h2,
[dir="ltr"] .deliveryCopy h2,
[dir="ltr"] .workflowCopy h2,
[dir="ltr"] .aboutSection h2,
[dir="ltr"] .aboutStorySection h2,
[dir="ltr"] .faqIntro h2,
[dir="ltr"] .contactCopy h2 {
  font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  letter-spacing: -0.01em;
}

[dir="ltr"] h3,
[dir="ltr"] h4 {
  font-family: "Plus Jakarta Sans", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}

[dir="ltr"] .hero h1 {
  font-size: clamp(2.85rem, 3.7vw, 3.3rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: #ffffff;
}

[dir="ltr"] .eyebrow {
  color: #cde4de;
  font-weight: 700;
  letter-spacing: 0.06em;
}

[dir="ltr"] .heroTitleLine {
  direction: ltr;
}

/* The English accents are symbols, while the Arabic SVGs are the highlighted words
   themselves. Keeping the English symbols compact prevents their intrinsic width from
   enlarging the copy track and squeezing the product preview outside the 1300px shell. */
[dir="ltr"] .heroAccentGraphic {
  height: .62em;
  margin-inline: .02em;
  transform: rotate(-1.5deg);
}

[dir="ltr"] .heroLead {
  font-size: 1.12rem;
  line-height: 1.75;
  color: #e2ede6;
}

[dir="ltr"] .heroTrust b {
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 600;
}

[dir="ltr"] .heroTrust small {
  color: #c4d7cc;
  font-size: 0.78rem;
}

[dir="ltr"] .heroBrandMark {
  left: auto;
  right: 30%;
  transform: translate(50%, -50%) rotate(7deg);
}

@media (min-width: 1101px) {
  [dir="ltr"] .heroBrandMark {
    top: auto;
    bottom: -255px;
    left: -195px;
    right: auto;
    transform: rotate(7deg);
  }
}

[dir="ltr"] .heroVisual {
  direction: ltr;
}

[dir="ltr"] .previewBadge {
  right: auto;
  left: 28px;
}

[dir="ltr"] .productFrame {
  transform: perspective(1300px) rotateY(-3deg) rotateX(1deg) rotateZ(.6deg);
}

[dir="ltr"] .productBody {
  direction: ltr;
  grid-template-columns: 132px 1fr;
}

[dir="ltr"] .productNav {
  border-left: 0;
  border-right: 1px solid #e8e1d3;
  border-radius: 0 0 0 23px;
}

[dir="ltr"] .macroCard > small,
[dir="ltr"] .nextCard span {
  text-align: left;
}

[dir="ltr"] .nextCard {
  text-align: left;
}

[dir="ltr"] .floatingNote {
  left: auto;
  right: -24px;
}

[dir="ltr"] .proofStrip {
  text-align: left;
}

[dir="ltr"] .proofStrip > div {
  text-align: left;
}

/* --------------------------------------------------------------------------
   LTR Journey / Planner Layout & Typography (Fixing Text Readability & Overlap)
   -------------------------------------------------------------------------- */

[dir="ltr"] .journeyCopyPanel h2 {
  font-size: clamp(1.85rem, 2.5vw, 2.55rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--landing-ink);
  margin: 0;
}

[dir="ltr"] .journeyCopyPanel > p {
  font-size: 1.02rem;
  line-height: 1.72;
  color: #555b52;
  margin: 0;
  max-width: 520px;
}

[dir="ltr"] .plannerPills span {
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  font-weight: 600;
}

[dir="ltr"] .researchNote {
  border-right: 0;
  border-left: 3px solid var(--landing-teal);
  padding: 16px 20px;
}

[dir="ltr"] .journeyAppShell {
  direction: ltr;
  grid-template-columns: 132px minmax(0, 1fr);
}

[dir="ltr"] .journeyAppNav {
  border-left: 0;
  border-right: 1px solid #ded9ce;
}

[dir="ltr"] .journeyAppNav nav > span,
[dir="ltr"] .journeyAppNav nav > button,
[dir="ltr"] .journeyAppSettings {
  padding: 0 10px;
  text-align: left;
}

[dir="ltr"] .calendarDays {
  padding-right: 0;
  padding-left: 42px;
}

[dir="ltr"] .calendarDays span {
  border-inline-start: 0;
  border-inline-end: 1px solid #efebe4;
}

[dir="ltr"] .calendarTimeGrid {
  margin-right: 0;
  margin-left: 42px;
}

[dir="ltr"] .calendarHour {
  right: auto;
  left: -38px;
  text-align: right;
}

[dir="ltr"] .calendarEvent {
  box-shadow: inset 3px 0 0 #79a58a;
}

[dir="ltr"] .calendarEvent.dayOne {
  right: auto;
  left: 4px;
}

[dir="ltr"] .calendarEvent.dayTwo {
  right: auto;
  left: calc(20% + 4px);
}

[dir="ltr"] .calendarEvent.dayFour {
  right: auto;
  left: calc(60% + 4px);
}

[dir="ltr"] .calendarEvent.dayFive {
  right: auto;
  left: calc(80% + 4px);
}

[dir="ltr"] .plannerSearch i {
  right: auto;
  left: 16px;
}

[dir="ltr"] .plannerSearch .searchQuery {
  padding-right: 0;
  padding-left: 40px;
}

[dir="ltr"] .foodResults article dl {
  margin-right: 0;
  margin-left: auto;
}

[dir="ltr"] .exportWorkspace {
  padding: 22px 22px 22px 90px;
}

[dir="ltr"] .layoutTools {
  right: auto;
  left: 18px;
}

[dir="ltr"] .outputChoices {
  left: auto;
  right: 18px;
}

/* --------------------------------------------------------------------------
   LTR Floating Decor Components (Flipped to Top-Right Corner of App Mockup)
   -------------------------------------------------------------------------- */

[dir="ltr"] .journeyDecorLayer {
  direction: ltr;
}

/* Base decor positioning in LTR - Right Top Corner */
[dir="ltr"] .decorPrimary {
  top: 60px;
  left: auto;
  right: -115px;
}
[dir="ltr"] .decorRearTop {
  top: -24px;
  left: auto;
  right: 70px;
}
[dir="ltr"] .decorRearLeft {
  top: 200px;
  left: auto;
  right: -80px;
}

/* Step 01: Appointment Badges in LTR */
[dir="ltr"] .decorAppointment {
  transform: rotate(6deg);
}
[dir="ltr"] .decorAppointment::before {
  left: auto;
  right: 17px;
}
[dir="ltr"] .decorAppointment::after {
  right: auto;
  left: 20px;
}
[dir="ltr"] .decorAppointment b {
  right: auto;
  left: 20px;
  direction: ltr;
}
[dir="ltr"] .decorAppointment.decorPrimary {
  transform: rotate(-3deg);
}
[dir="ltr"] .decorAppointment.decorPrimary::before {
  left: auto;
  right: 22px;
}
[dir="ltr"] .decorAppointment.decorPrimary::after {
  right: auto;
  left: 27px;
}
[dir="ltr"] .decorAppointment.decorPrimary b {
  right: auto;
  left: 27px;
}
[dir="ltr"] .decorAppointment.decorRearTop {
  transform: rotate(-6deg);
}
[dir="ltr"] .decorAppointment.decorRearLeft {
  transform: rotate(-8deg);
}

/* Step 02: Template Cards in LTR */
[dir="ltr"] .decorTemplate {
  background:
    radial-gradient(circle at 23px 78px, #4f9486 0 5px, transparent 6px),
    radial-gradient(circle at 23px 120px, #d6ddd7 0 5px, transparent 6px),
    linear-gradient(var(--decor-accent), var(--decor-accent)) 16px 17px / calc(100% - 32px) 28px no-repeat,
    linear-gradient(#9da9a0, #9da9a0) calc(100% - 76px) 71px / 58px 7px no-repeat,
    linear-gradient(#9da9a0, #9da9a0) calc(100% - 92px) 113px / 74px 7px no-repeat,
    linear-gradient(#eef0eb, #eef0eb) 15px 56px / calc(100% - 30px) 39px no-repeat,
    linear-gradient(#f2eee7, #f2eee7) 15px 98px / calc(100% - 30px) 39px no-repeat,
    #fffdfa;
}
[dir="ltr"] .decorTemplate.decorRearTop {
  top: -24px;
  left: auto;
  right: 80px;
  transform: rotate(-7deg);
}
[dir="ltr"] .decorTemplate.decorRearLeft {
  top: 170px;
  left: auto;
  right: -60px;
  transform: rotate(-9deg);
}
[dir="ltr"] .decorTemplatePrimary {
  top: -16px;
  left: auto;
  right: -85px;
  transform: rotate(4deg);
}

/* Step 03: Food Dishes in LTR (Top-Right of Board) */
[dir="ltr"] .journeyFoodArt {
  top: -95px;
  left: auto;
  right: -130px;
}
[dir="ltr"] .journeyFoodChicken {
  top: 23%;
  left: auto;
  right: 0;
  --dish-rotation: 7deg;
}
[dir="ltr"] .journeyFoodRice {
  top: 18%;
  left: auto;
  right: 54%;
  --dish-rotation: -8deg;
}
[dir="ltr"] .journeyFoodLabneh {
  top: 66%;
  left: auto;
  right: 6%;
  --dish-rotation: 3deg;
}

/* Step 04: Delivery & WhatsApp in LTR */
[dir="ltr"] .decorCloud {
  top: 190px;
  left: auto;
  right: -75px;
  transform: scaleX(-1);
}
[dir="ltr"] .decorLink {
  top: -8px;
  left: auto;
  right: 60px;
  transform: rotate(-22deg);
}
[dir="ltr"] .decorWhatsapp {
  top: 80px;
  left: auto;
  right: -60px;
}

/* --------------------------------------------------------------------------
   LTR Plan Delivery Section (Mirrored Icons, Flipped Badges & Crisp Typography)
   -------------------------------------------------------------------------- */

[dir="ltr"] .deliverySection {
  direction: ltr;
}

[dir="ltr"] .deliveryCopy .kicker {
  color: #9ec0af;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  font-weight: 700;
}

[dir="ltr"] .deliveryCopy h2 {
  font-size: clamp(2.3rem, 3.6vw, 3.65rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: #ffffff;
}

[dir="ltr"] .deliveryCopy > p:nth-of-type(2),
[dir="ltr"] .deliveryCopy > p {
  max-width: 580px;
  margin: 22px 0 34px;
  color: #c9d6cd;
  font-size: 1.05rem;
  line-height: 1.75;
}

[dir="ltr"] .deliveryCopy li {
  min-height: 82px;
  gap: 18px;
  border-top: 1px solid rgb(255 255 255 / 13%);
}

[dir="ltr"] .deliveryCopy li:last-child {
  border-bottom: 1px solid rgb(255 255 255 / 13%);
}

[dir="ltr"] .deliveryCopy li > span {
  color: #8fb2a1;
  font-size: 0.76rem;
  font-weight: 700;
}

[dir="ltr"] .deliveryCopy li b {
  color: #f5f7f5;
  font-size: 0.98rem;
  font-weight: 600;
}

[dir="ltr"] .deliveryCopy li small {
  margin-top: 4px;
  color: #c4d7cc;
  font-size: 0.82rem;
  line-height: 1.55;
}

[dir="ltr"] .deliveryRunning .deliveryCopy li {
  animation-name: deliveryStepBeatLTR;
}

@keyframes deliveryStepBeatLTR {
  0%, 22%, 100% { background: transparent; box-shadow: inset 0 0 0 transparent; transform: translateX(0); }
  7%, 16% { background: rgb(255 255 255 / 4%); box-shadow: inset 3px 0 0 #76ae9d; transform: translateX(5px); }
}

[dir="ltr"] .phoneShell {
  transform: rotate(3deg);
}

[dir="ltr"] .phoneTop {
  direction: ltr;
}

[dir="ltr"] .phonePatient {
  direction: ltr;
}

[dir="ltr"] .phonePatient b {
  font-size: 1.25rem;
  font-weight: 700;
}

[dir="ltr"] .phoneMeal {
  direction: ltr;
}

[dir="ltr"] .phoneMeal b {
  font-size: 0.72rem;
  font-weight: 600;
}

[dir="ltr"] .phoneMeal small {
  font-size: 0.6rem;
  color: #7f827a;
}

[dir="ltr"] .shareTicket {
  left: auto;
  right: 8%;
  bottom: 55px;
  transform: rotate(-3deg);
}

[dir="ltr"] .shareTicket b {
  font-size: 0.76rem;
  font-weight: 700;
}

[dir="ltr"] .shareTicket small {
  font-size: 0.62rem;
  color: #7f827a;
}

[dir="ltr"] .deliveryRunning .shareTicket {
  animation-name: deliveryTicketCycleLTR;
}

@keyframes deliveryTicketCycleLTR {
  0%, 31%, 96%, 100% { opacity: 0; transform: translateX(18px) rotate(-3deg) scale(.96); }
  42%, 86% { opacity: 1; transform: translateX(0) rotate(-3deg) scale(1); }
}

[dir="ltr"] .deliveryTrail {
  transform: translate(-50%, -50%) rotate(18deg);
}

[dir="ltr"] .deliveryLinkIcon {
  top: 76px;
  left: auto;
  right: calc(50% + 76px);
  transform: rotate(-12deg);
  animation-name: deliveryLinkBeatLTR;
}

[dir="ltr"] .deliveryWhatsappIcon {
  top: 190px;
  left: auto;
  right: calc(50% + 92px);
  transform: rotate(7deg);
  animation-name: deliveryWhatsappBeatLTR;
}

[dir="ltr"] .deliverySecureIcon {
  bottom: 68px;
  left: auto;
  right: calc(50% - 206px);
  transform: rotate(8deg);
  animation-name: deliverySecureBeatLTR;
}

@keyframes deliveryLinkBeatLTR {
  0%, 27%, 100% { transform: translate(0, 0) rotate(-12deg) scale(1); }
  10%, 18% { transform: translate(-5px, -8px) rotate(-7deg) scale(1.08); }
}

@keyframes deliveryWhatsappBeatLTR {
  0%, 31%, 61%, 100% { transform: translate(0, 0) rotate(7deg) scale(1); }
  42%, 52% { transform: translate(7px, -10px) rotate(2deg) scale(1.1); }
}

@keyframes deliverySecureBeatLTR {
  0%, 64%, 94%, 100% { transform: translate(0, 0) rotate(8deg) scale(1); }
  75%, 85% { transform: translate(-6px, -8px) rotate(2deg) scale(1.08); }
}

/* --------------------------------------------------------------------------
   LTR Patient Records / Workflow Section (Mirrored Visuals, Flipped Icons & Typography)
   -------------------------------------------------------------------------- */

[dir="ltr"] .workflowSection {
  direction: ltr;
}

[dir="ltr"] .workflowVisual {
  direction: ltr;
}

[dir="ltr"] .workflowCopy .kicker {
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--landing-green);
}

[dir="ltr"] .workflowCopy h2 {
  font-size: clamp(2.3rem, 3.6vw, 3.65rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--landing-ink);
}

[dir="ltr"] .workflowLead {
  max-width: 580px;
  margin: 24px 0 36px;
  color: #5c645b;
  font-size: 1.05rem;
  line-height: 1.75;
}

[dir="ltr"] .workflowCopy li {
  min-height: 82px;
  gap: 18px;
  border-top: 1px solid rgb(31 65 45 / 16%);
}

[dir="ltr"] .workflowCopy li:last-child {
  border-bottom: 1px solid rgb(31 65 45 / 16%);
}

[dir="ltr"] .workflowCopy li > span {
  color: var(--landing-green);
  font-size: 0.76rem;
  font-weight: 700;
}

[dir="ltr"] .workflowCopy li b {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--landing-ink);
}

[dir="ltr"] .workflowCopy li small {
  margin-top: 4px;
  color: #6c716a;
  font-size: 0.82rem;
  line-height: 1.55;
}

[dir="ltr"] .workflowRunning .workflowCopy li {
  animation-name: workflowStepBeatLTR;
}

@keyframes workflowStepBeatLTR {
  0%, 18%, 100% { background: transparent; box-shadow: inset 0 0 0 transparent; transform: translateX(0); }
  6%, 14% { background: rgb(53 97 66 / 4%); box-shadow: inset 3px 0 0 #4f9486; transform: translateX(5px); }
}

[dir="ltr"] .patientCard {
  top: 108px;
  left: 0;
  right: auto;
  transform: rotate(-1.5deg);
  padding: 28px;
}

[dir="ltr"] .patientHead {
  direction: ltr;
}

[dir="ltr"] .patientHead b {
  font-size: 0.96rem;
  font-weight: 700;
}

[dir="ltr"] .patientHead small {
  font-size: 0.76rem;
  color: #5c6057;
  font-weight: 500;
}

[dir="ltr"] .patientHead em {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 5px 12px;
}

[dir="ltr"] .patientStats {
  margin-top: 32px;
  gap: 14px;
}

[dir="ltr"] .patientStats span {
  padding: 14px 16px;
  border-radius: 14px;
}

[dir="ltr"] .patientStats small {
  font-size: 0.66rem;
  color: #52564d;
  font-weight: 500;
}

[dir="ltr"] .patientStats b {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--landing-ink);
  margin-top: 4px;
}

[dir="ltr"] .workflowRunning .patientCard {
  animation: gentleFloatLTR 6s ease-in-out infinite;
  --rotate: -1.5deg;
}

@keyframes gentleFloatLTR {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-7px) rotate(-1.5deg); }
}

[dir="ltr"] .workflowTrail {
  top: 42px;
  left: -34px;
  right: auto;
  transform: rotate(8deg) scaleX(-1);
}

[dir="ltr"] .workflowCalendarIcon {
  top: -4px;
  left: auto;
  right: 18px;
  transform: rotate(8deg);
  animation-name: workflowCalendarBeatLTR;
}

[dir="ltr"] .workflowPlanIcon {
  left: -36px;
  right: auto;
  bottom: -25px;
  transform: rotate(-7deg);
  animation-name: workflowPlanBeatLTR;
}

[dir="ltr"] .workflowProgressIcon {
  left: auto;
  right: -58px;
  bottom: 18px;
  transform: rotate(10deg);
  animation-name: workflowProgressBeatLTR;
}

@keyframes workflowCalendarBeatLTR {
  0%, 23%, 100% { transform: translate(0, 0) rotate(8deg) scale(1); }
  8%, 17% { transform: translate(-7px, -9px) rotate(3deg) scale(1.08); }
}

@keyframes workflowPlanBeatLTR {
  0%, 25%, 49%, 100% { transform: translate(0, 0) rotate(-7deg) scale(1); }
  33%, 42% { transform: translate(6px, -10px) rotate(-2deg) scale(1.07); }
}

@keyframes workflowProgressBeatLTR {
  0%, 74%, 98%, 100% { transform: translate(0, 0) rotate(10deg) scale(1); }
  82%, 91% { transform: translate(-7px, -8px) rotate(5deg) scale(1.08); }
}

/* --------------------------------------------------------------------------
   Other LTR Section Rules
   -------------------------------------------------------------------------- */

[dir="ltr"] .featureTop i {
  transform: scaleX(-1);
}

[dir="ltr"] .featureCard h3 {
  font-size: 1.32rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

[dir="ltr"] .featureCard p {
  font-size: 0.96rem;
  line-height: 1.7;
  color: #5a5f56;
}

[dir="ltr"] .aboutFacts span {
  border-inline-start: 1px solid #ded9ce;
}

[dir="ltr"] .aboutFacts span:first-child {
  border-inline-start: 0;
}

[dir="ltr"] .faqList summary {
  font-size: 1.06rem;
  letter-spacing: -0.01em;
}

[dir="ltr"] .faqList details p {
  margin-right: 0;
  padding-right: 0;
  padding-left: 64px;
  font-size: 0.98rem;
  line-height: 1.75;
  color: #555a50;
}

[dir="ltr"] .contactTitleLine {
  direction: ltr;
}

[dir="ltr"] .contactForm input[type="tel"] {
  text-align: left;
}

[dir="ltr"] .footerBrand,
[dir="ltr"] .footerColumn {
  text-align: left;
}

[dir="ltr"] .legalContent ul,
[dir="ltr"] .legalContent ol {
  padding-right: 0;
  padding-left: 24px;
}

[dir="ltr"] .legalContent .contactBox {
  border-right: 0;
  border-left: 3px solid var(--landing-green);
}

@media (max-width: 760px) {
  [dir="ltr"] .hero h1 {
    font-size: clamp(2.25rem, 10.3vw, 3rem);
  }
  [dir="ltr"] .heroAccentGraphic {
    height: .54em;
  }
  [dir="ltr"] .heroBrandMark {
    left: 50%;
    right: auto;
    top: 24%;
  }
  [dir="ltr"] .previewBadge {
    left: 14px;
    right: auto;
    top: 0;
  }
  [dir="ltr"] .productFrame {
    min-height: 380px;
    border-radius: 17px;
    transform: none !important;
    width: 100%;
    max-width: 100%;
    animation-name: productInMobile;
  }
  [dir="ltr"] .productBody {
    min-height: 320px;
    grid-template-columns: 1fr !important;
    direction: ltr;
  }
  [dir="ltr"] .productNav {
    display: none !important;
  }
  [dir="ltr"] .productMain {
    padding: 18px 13px;
    width: 100%;
    box-sizing: border-box;
  }
  [dir="ltr"] .previewGrid {
    grid-template-columns: 1fr;
  }
  [dir="ltr"] .sideStack {
    display: none;
  }
  [dir="ltr"] .floatingNote {
    left: auto;
    right: 8px;
    bottom: -15px;
    min-width: 190px;
  }
  [dir="ltr"] .journeyAppShell {
    grid-template-columns: 58px minmax(0, 1fr);
  }
  [dir="ltr"] .calendarDays {
    padding-left: 34px;
    padding-right: 0;
  }
  [dir="ltr"] .calendarTimeGrid {
    margin-left: 34px;
    margin-right: 0;
  }
  [dir="ltr"] .calendarHour {
    left: -31px;
    right: auto;
  }
  [dir="ltr"] .calendarEvent.dayOne { left: 2px; right: auto; }
  [dir="ltr"] .calendarEvent.dayTwo { left: calc(20% + 2px); right: auto; }
  [dir="ltr"] .calendarEvent.dayFour { left: calc(60% + 2px); right: auto; }
  [dir="ltr"] .calendarEvent.dayFive { left: calc(80% + 2px); right: auto; }
  [dir="ltr"] .exportWorkspace {
    padding: 18px 80px 18px 18px;
  }
  [dir="ltr"] .outputChoices {
    right: 9px;
    left: auto;
  }
  [dir="ltr"] .patientCard {
    left: 15px;
    right: auto;
  }
  [dir="ltr"] .workflowTrail {
    left: -48px;
    right: auto;
  }
  [dir="ltr"] .workflowCalendarIcon { right: -20px; left: auto; }
  [dir="ltr"] .workflowPlanIcon { left: -26px; right: auto; }
  [dir="ltr"] .workflowProgressIcon { right: -42px; left: auto; }
  [dir="ltr"] .deliveryTrail {
    transform: translate(-50%, -50%) rotate(18deg);
  }
  [dir="ltr"] .deliveryLinkIcon {
    left: auto;
    right: calc(50% + 52px);
  }
  [dir="ltr"] .deliveryWhatsappIcon {
    left: auto;
    right: calc(50% + 72px);
  }
  [dir="ltr"] .deliverySecureIcon {
    left: auto;
    right: calc(50% - 174px);
  }
  [dir="ltr"] .faqList details p {
    padding-left: 52px;
    padding-right: 18px;
  }
}

/* ==========================================================================
   Pricing Page Styles
   ========================================================================== */

.pricingPage {
  min-height: 100vh;
}

.pricingHero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 90px max(32px, calc((100vw - 1300px) / 2)) 70px;
  background-color: var(--landing-deep);
  background-image: url("assets/pricing-hero-background.svg");
  background-position: center;
  background-size: cover;
  text-align: center;
}

.pricingHero h1 {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(2.8rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1.12;
  text-shadow: 0 3px 24px rgb(10 28 18 / 22%);
}

.pricingHero p {
  max-width: 650px;
  margin: 0 auto;
  color: #d7e4dc;
  font-size: 1.05rem;
  line-height: 1.75;
}

.priceFromBadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 24%);
  background: #faf8f3;
  color: var(--landing-deep);
  box-shadow: 0 10px 26px rgb(7 25 15 / 20%);
  font-size: .82rem;
  font-weight: 700;
}

.priceFromBadge span {
  font-size: 1.1rem;
}

.pricingCalculator {
  max-width: 900px;
  margin: 0 auto;
}

.calculatorCard {
  padding: 42px;
  border: 1px solid #e8e1d3;
  border-radius: 22px;
  background: #faf8f3;
  box-shadow: 0 12px 32px rgb(38 52 42 / 8%);
}

.calculatorHeader {
  margin-bottom: 38px;
  text-align: center;
}

.calculatorHeader h2 {
  margin: 0 0 12px;
  color: var(--landing-ink);
  font-size: 1.95rem;
  font-weight: 600;
}

.calculatorHeader p {
  margin: 0;
  color: #676b62;
  font-size: .92rem;
}

.calculatorBody {
  display: grid;
  gap: 28px;
}

.calculatorRow {
  display: grid;
  grid-template-columns: 1fr minmax(280px, .55fr);
  gap: 32px;
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid #e8e1d3;
}

.calculatorRow:last-child {
  border-bottom: 0;
}

.calculatorLabel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.calculatorLabel h3 {
  margin: 0;
  color: var(--landing-ink);
  font-size: 1.05rem;
  font-weight: 600;
}

.calculatorLabel p {
  margin: 0;
  color: #7a7e75;
  font-size: .78rem;
  line-height: 1.6;
}

.calculatorControl {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* Tier selector (radio buttons styled as buttons) */
.tierOptions {
  display: flex;
  gap: 10px;
}

.tierOption {
  position: relative;
}

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

.tierOption label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  min-width: 145px;
  padding: 14px 18px;
  border: 2px solid #d9d6cd;
  border-radius: 14px;
  background: var(--landing-paper);
  color: #575a53;
  font-weight: 600;
  cursor: pointer;
  transition: all 200ms ease;
}

.tierOption label span {
  display: block;
  font-size: .7rem;
  color: #8a8d84;
  margin-bottom: 4px;
}

.tierOption label strong {
  font-size: 1.12rem;
  color: var(--landing-ink);
}

.tierOption input:checked + label {
  border-color: var(--landing-green);
  background: #eef4f0;
  color: var(--landing-green);
}

.tierOption input:checked + label strong {
  color: var(--landing-green);
}

.tierOption:hover label {
  border-color: #b8c6b8;
  background: #f7f4ed;
}

/* Bundle toggles (switches) */
.bundleToggles {
  display: grid;
  gap: 12px;
}

.bundleToggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 14px 18px;
  border: 1px solid #e8e1d3;
  border-radius: 12px;
  background: var(--landing-paper);
  transition: all 200ms ease;
}

.bundleToggle.isActive {
  border-color: var(--landing-green);
  background: #eef4f0;
}

.bundleInfo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.bundleInfo strong {
  color: var(--landing-ink);
  font-size: .92rem;
  font-weight: 600;
}

.bundleInfo small {
  color: #7a7e75;
  font-size: .72rem;
}

.bundleToggle.isActive .bundleInfo strong {
  color: var(--landing-green);
}

/* Toggle switch */
.toggleSwitch {
  position: relative;
  width: 52px;
  height: 30px;
  flex-shrink: 0;
}

.toggleSwitch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggleSlider {
  position: absolute;
  inset: 0;
  background: #d9d6cd;
  border-radius: 999px;
  cursor: pointer;
  transition: background 200ms ease;
}

.toggleSlider::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  left: 4px;
  top: 4px;
  background: var(--landing-paper);
  border-radius: 50%;
  transition: transform 200ms ease;
}

.toggleSwitch input:checked + .toggleSlider {
  background: var(--landing-green);
}

.toggleSwitch input:checked + .toggleSlider::before {
  transform: translateX(22px);
}

/* Seat counters (+/- steppers) */
.seatCounters {
  display: grid;
  gap: 12px;
}

.seatCounter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 10px 16px;
  border: 1px solid #e8e1d3;
  border-radius: 10px;
  background: var(--landing-paper);
}

.seatCounter.hasValue {
  border-color: var(--landing-teal);
  background: rgb(95 156 147 / 6%);
}

.seatInfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.seatInfo strong {
  color: var(--landing-ink);
  font-size: .88rem;
  font-weight: 600;
}

.seatInfo small {
  color: #7a7e75;
  font-size: .7rem;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stepper button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #cfd7cf;
  border-radius: 8px;
  background: var(--landing-paper);
  color: var(--landing-green);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 180ms ease;
}

.stepper button:hover:not(:disabled) {
  background: var(--landing-green);
  color: #fff;
  border-color: var(--landing-green);
}

.stepper button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.stepper span {
  min-width: 32px;
  text-align: center;
  color: var(--landing-ink);
  font-size: .95rem;
  font-weight: 700;
}

/* Price summary */
.priceSummary {
  margin-top: 18px;
  padding: 32px;
  border-radius: 18px;
  background: var(--landing-deep);
  color: #fff;
}

.priceSummaryRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgb(255 255 255 / 12%);
  color: #c6ddd7;
  font-size: .85rem;
}

.priceSummaryRow:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

.priceSummaryRow.priceTotalRow {
  margin-top: 10px;
  padding-top: 22px;
  border-top: 2px solid rgb(255 255 255 / 16%);
  border-bottom: 0;
}

.priceSummaryRow strong {
  font-weight: 600;
}

.priceSummaryRow .price {
  font-weight: 700;
  color: #fff;
}

.priceTotalRow {
  font-size: 1.15rem !important;
}

.priceTotalRow .price {
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
}

.priceDisclaimer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgb(255 255 255 / 10%);
  color: #9ec0af;
  font-size: .7rem;
  text-align: center;
}

.priceCtaRow {
  margin-top: 20px;
  text-align: center;
}

.priceCtaRow a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  background: #faf8f3;
  color: var(--landing-deep) !important;
  font-weight: 700;
  box-shadow: 0 12px 28px rgb(7 25 15 / 24%);
  transition: all 180ms ease;
}

.priceCtaRow a:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgb(7 25 15 / 32%);
}

/* Seat types section */
.seatTypesSection {
  padding: 110px max(32px, calc((100vw - 1300px) / 2));
  background: #eef4f0;
}

.seatTypesSection .sectionIntro {
  max-width: 720px;
  margin-inline-end: auto;
  margin-bottom: 48px;
}

.seatTypesGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.seatCard {
  min-height: 280px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  border: 1px solid #d9ded6;
  border-radius: 16px;
  background: var(--landing-paper);
  box-shadow: 0 7px 18px rgb(38 52 42 / 5%);
  transition: all 220ms ease;
}

.seatCard:hover {
  transform: translateY(-4px);
  border-color: #b8c6b8;
  box-shadow: 0 14px 30px rgb(38 52 42 / 9%);
}

.seatCard .seatIcon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #eef4f0;
  color: var(--landing-green);
  font-size: 1.3rem;
  margin-bottom: 18px;
}

.seatCard .seatIcon svg {
  width: 24px;
  height: 24px;
}

.seatCard h3 {
  margin: 0 0 10px;
  color: var(--landing-ink);
  font-size: 1.2rem;
  font-weight: 600;
}

.seatCard p {
  margin: 0;
  color: #676b62;
  font-size: .86rem;
  line-height: 1.75;
  flex: 1;
}

.seatCard .seatIncluded {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e8e1d3;
  color: var(--landing-teal);
  font-size: .75rem;
  font-weight: 600;
}

/* Pricing FAQ section */
.pricingFaqSection {
  padding: 110px max(32px, calc((100vw - 1300px) / 2));
  background: #f4f0e7;
}

.pricingFaqSection .sectionIntro {
  max-width: 720px;
  margin: 0 auto 42px;
  text-align: center;
}

.pricingFaqList {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.pricingFaqList details {
  border: 1px solid #d9d6cd;
  border-radius: 14px;
  background: rgb(255 255 255 / 36%);
  box-shadow: 0 6px 18px rgb(63 61 54 / 4%);
  transition: all 220ms ease;
}

.pricingFaqList details[open] {
  border-color: #afc6b5;
  background: #faf8f3;
  box-shadow: 0 10px 24px rgb(53 76 59 / 8%);
}

.pricingFaqList summary {
  min-height: 72px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #353a34;
  cursor: pointer;
  list-style: none;
  font-size: .9rem;
  font-weight: 600;
}

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

.pricingFaqList summary i {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid #ccd5cc;
  border-radius: 50%;
  color: var(--landing-green);
  font-size: .85rem;
  font-style: normal;
  font-weight: 400;
  transition: transform 180ms ease;
  flex-shrink: 0;
}

.pricingFaqList details[open] summary i {
  transform: rotate(45deg);
}

.pricingFaqList details p {
  max-width: 720px;
  margin: -3px 0 0;
  padding: 0 18px 20px;
  color: #686d65;
  font-size: .8rem;
  line-height: 1.8;
}

/* 3-Tier Pricing Cards */

/* Billing controls sit inside the pricing-card section as its toolbar. */
.billingControls {
  position: relative;
  width: min(100%, 820px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  margin: 0 auto 56px;
  padding: 20px 22px;
  border: 1px solid var(--landing-border);
  border-radius: 20px;
  background: var(--landing-paper);
  box-shadow: 0 14px 36px rgb(61 55 45 / 8%);
}

.billingControlCopy {
  grid-column: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.billingControlCopy > span {
  color: var(--landing-deep);
  font-size: .92rem;
  font-weight: 700;
}

.billingControlCopy small {
  color: var(--landing-muted);
  font-size: .72rem;
  line-height: 1.5;
}

.billingControlActions {
  display: contents;
}

.billingToggle {
  grid-column: 2;
  justify-self: center;
  flex: none;
  display: inline-flex;
  min-height: 48px;
  border: 1px solid var(--landing-border);
  border-radius: 999px;
  background: var(--landing-cream);
  padding: 4px;
  gap: 0;
}

.billingOption {
  position: relative;
  padding: 8px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #7a7e75;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 200ms ease;
}

.billingOption.active {
  background: var(--landing-green);
  color: #fff;
  box-shadow: 0 2px 8px rgb(53 97 66 / 20%);
}

.saveBadge {
  min-height: 22px;
  margin-inline-start: 0;
  padding: 3px 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  background: var(--landing-clay);
  color: #fff;
  box-shadow: 0 5px 12px rgb(189 100 64 / 24%);
  font-size: .65rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  transform: translateY(-1px);
}

.saveBadge::before {
  content: "";
  width: 4px;
  height: 4px;
  flex: none;
  border-radius: 50%;
  background: #faf1de;
  box-shadow: 0 0 0 3px rgb(250 241 222 / 20%);
}

.billingOption.active .saveBadge {
  background: #fff;
  color: var(--landing-green);
  box-shadow: 0 5px 12px rgb(31 58 40 / 18%);
}

.billingOption.active .saveBadge::before {
  background: var(--landing-clay);
  box-shadow: 0 0 0 3px rgb(189 100 64 / 12%);
}

.currencySelect {
  grid-column: 3;
  justify-self: end;
  position: relative;
  width: 160px;
  min-width: 160px;
}

.currencySelectLabel {
  position: absolute;
  z-index: 2;
  top: -7px;
  inset-inline-start: 14px;
  padding-inline: 6px;
  background: var(--landing-paper);
  color: var(--landing-muted);
  font-size: .62rem;
  font-weight: 700;
  line-height: 1;
}

.currencyTrigger {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--landing-border);
  border-radius: 13px;
  background: var(--landing-paper);
  color: var(--landing-ink);
  box-shadow: 0 2px 5px rgb(61 55 45 / 4%);
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.currencyTrigger:hover {
  border-color: #b8c6b8;
  background: #faf8f3;
}

.currencyTrigger:focus-visible,
.currencySelect[data-open="true"] .currencyTrigger {
  outline: none;
  border-color: var(--landing-green);
  box-shadow: 0 0 0 3px rgb(53 97 66 / 13%);
}

.currencyTrigger > svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--landing-green);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms ease;
}

.currencySelect[data-open="true"] .currencyTrigger > svg {
  transform: rotate(180deg);
}

.currencyCurrent {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .82rem;
  font-weight: 700;
}

.currencyCurrent > span {
  min-width: 28px;
  min-height: 26px;
  padding-inline: 6px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--landing-primary-soft);
  color: var(--landing-green);
  font-size: .7rem;
}

.currencyMenu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 9px);
  inset-inline-end: 0;
  width: 270px;
  padding: 7px;
  border: 1px solid var(--landing-border);
  border-radius: 15px;
  background: var(--landing-paper);
  box-shadow: 0 20px 44px rgb(31 58 40 / 16%);
}

.currencyMenu[hidden] {
  display: none;
}

.currencyOption {
  width: 100%;
  min-height: 54px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--landing-ink);
  text-align: start;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.currencyOption:hover,
.currencyOption:focus-visible {
  outline: none;
  background: var(--landing-cream);
}

.currencyOption[aria-selected="true"] {
  background: var(--landing-primary-soft);
  color: var(--landing-green);
}

.currencySymbol {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--landing-border);
  border-radius: 9px;
  background: var(--landing-paper);
  color: var(--landing-green);
  font-size: .82rem;
  font-weight: 700;
}

.currencySymbolWide {
  font-size: .62rem;
}

.currencyOptionText {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.currencyOptionText bdi {
  font-size: .78rem;
  font-weight: 700;
}

.currencyOptionText small {
  overflow: hidden;
  color: var(--landing-muted);
  font-size: .65rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.currencyCheck {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--landing-green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

.currencyOption[aria-selected="true"] .currencyCheck {
  opacity: 1;
}

.tierPriceOld {
  display: inline-block;
  color: #b0a898;
  font-size: 1.3rem;
  font-weight: 500;
  text-decoration: line-through;
  margin-inline-end: 8px;
}

.pricingTiersSection {
  padding: 90px max(32px, calc((100vw - 1300px) / 2));
  background: var(--landing-paper);
}

.pricingTiersGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1300px;
  margin: 0 auto;
}

.pricingTierCard {
  position: relative;
  min-height: 520px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  border: 2px solid #e8e1d3;
  border-radius: 20px;
  background: #faf8f3;
  box-shadow: 0 8px 24px rgb(38 52 42 / 6%);
  transition: all 260ms ease;
}

.pricingTierCard:hover {
  transform: translateY(-6px);
  border-color: #b8c6b8;
  box-shadow: 0 16px 36px rgb(38 52 42 / 11%);
}

.pricingTierCard.featured {
  border-color: var(--landing-green);
  background: #eef4f0;
  box-shadow: 0 12px 32px rgb(53 97 66 / 14%);
  transform: scale(1.04);
}

.pricingTierCard.featured:hover {
  transform: scale(1.04) translateY(-6px);
  box-shadow: 0 20px 42px rgb(53 97 66 / 18%);
}

.tierBadge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--landing-green);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

.tierBadge.freeBadge {
  background: var(--landing-teal);
}

.tierHeader {
  margin-bottom: 24px;
}

.tierName {
  margin: 0 0 8px;
  color: var(--landing-ink);
  font-size: 1.55rem;
  font-weight: 600;
}

.tierFor {
  margin: 0;
  color: #7a7e75;
  font-size: .84rem;
  line-height: 1.6;
}

.tierPrice {
  margin: 0 0 28px;
  padding: 20px 0;
  border-top: 1px solid #e8e1d3;
  border-bottom: 1px solid #e8e1d3;
}

.tierPriceAmount {
  display: block;
  color: var(--landing-ink);
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 8px;
}

.tierPriceAmount.custom {
  font-size: 1.95rem;
}

.tierPricePeriod {
  color: #8a8d84;
  font-size: .8rem;
}

.trialChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -14px 0 20px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff8e6;
  border: 1px solid #f0d98a;
  color: #8a6d1a;
  font-size: .76rem;
  font-weight: 700;
}

.tierFeatures {
  flex: 1;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.tierFeatures li {
  position: relative;
  padding-inline-start: 28px;
  margin-bottom: 14px;
  color: #575a53;
  font-size: .88rem;
  line-height: 1.65;
}

.tierFeatures li::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 0;
  color: var(--landing-green);
  font-weight: 700;
  font-size: 1rem;
}

.tierFeatures li.notIncluded {
  color: #a8aba4;
}

.tierFeatures li.notIncluded::before {
  content: '—';
  color: #c9cbc6;
}

.tierCta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--landing-green);
  color: #fff !important;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 200ms ease;
}

.tierCta:hover {
  background: var(--landing-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgb(31 58 40 / 20%);
}

.tierCta.secondary {
  background: transparent;
  border: 2px solid var(--landing-green);
  color: var(--landing-green) !important;
}

.tierCta.secondary:hover {
  background: var(--landing-green);
  color: #fff !important;
}

.tierNote {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e8e1d3;
  color: #8a8d84;
  font-size: .75rem;
  text-align: center;
  line-height: 1.5;
}

/* Feature Comparison Table */
.pricingComparisonSection {
  padding: 90px max(32px, calc((100vw - 1300px) / 2));
  background:
    radial-gradient(circle at 8% 12%, rgb(95 156 147 / 10%), transparent 22rem),
    #f4f0e7;
}

.pricingComparisonSection .sectionIntro {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
}

.comparisonFrame {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  border: 1px solid rgb(53 97 66 / 14%);
  border-radius: 28px;
  background: var(--landing-paper);
  box-shadow: 0 26px 65px rgb(38 52 42 / 11%);
  overflow: hidden;
}

.comparisonTableScroll {
  overflow-x: auto;
}

.comparisonTable {
  width: 100%;
  min-width: 760px;
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
}

.comparisonTable caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.comparisonTable th,
.comparisonTable td {
  padding: 20px 22px;
  border-bottom: 1px solid #ece7dc;
  color: #53584f;
  font-size: .86rem;
  line-height: 1.45;
  text-align: center;
  vertical-align: middle;
}

.comparisonTable thead th {
  height: 148px;
  padding-block: 28px 24px;
  background: #fbfaf7;
  color: var(--landing-ink);
  border-bottom-color: #ded8ca;
}

.comparisonTable thead th:not(:first-child) {
  border-inline-start: 1px solid #ece7dc;
}

.comparisonTable th:first-child {
  width: 34%;
  text-align: start;
}

.comparisonFeatureHeading {
  padding-inline: 30px !important;
  background: var(--landing-deep) !important;
  color: #fff !important;
}

.comparisonFeatureHeading span {
  display: block;
  margin-bottom: 7px;
  color: #b8d2c6;
  font-size: .73rem;
  font-weight: 700;
}

.comparisonFeatureHeading strong {
  font-size: 1.25rem;
  font-weight: 600;
}

.comparisonPlanName,
.comparisonPlanLabel {
  display: block;
}

.comparisonPlanName {
  color: var(--landing-ink);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

.comparisonPlanLabel {
  margin-top: 6px;
  color: #7b8077;
  font-size: .77rem;
  font-weight: 600;
}

.comparisonTable .comparisonRecommended {
  position: relative;
  background: #eff5f0;
  box-shadow: inset 1px 0 rgb(53 97 66 / 14%), inset -1px 0 rgb(53 97 66 / 14%);
}

.comparisonTable thead .comparisonRecommended {
  background: var(--landing-green);
  color: #fff;
  box-shadow: none;
}

.comparisonTable thead .comparisonRecommended .comparisonPlanName,
.comparisonTable thead .comparisonRecommended .comparisonPlanLabel {
  color: #fff;
}

.comparisonTable thead .comparisonRecommended .comparisonPlanLabel {
  opacity: .76;
}

.comparisonPopular {
  display: table;
  margin: 0 auto 13px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--landing-green);
  font-size: .64rem;
  font-weight: 700;
  white-space: nowrap;
}

.comparisonTable tbody th {
  padding-inline: 26px;
  color: var(--landing-ink);
}

.comparisonTable tbody th > span:not(.comparisonFeatureIcon) {
  display: inline-block;
  vertical-align: middle;
}

.comparisonTable tbody th strong,
.comparisonTable tbody th small {
  display: block;
}

.comparisonTable tbody th strong {
  font-size: .88rem;
  font-weight: 600;
}

.comparisonTable tbody th small {
  margin-top: 4px;
  color: #92968e;
  font-size: .69rem;
  font-weight: 500;
}

.comparisonFeatureIcon {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  margin-inline-end: 13px;
  border-radius: 11px;
  background: rgb(53 97 66 / 8%);
  color: var(--landing-green);
  vertical-align: middle;
}

.comparisonFeatureIcon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.comparisonMetric,
.comparisonUnit {
  display: block;
}

.comparisonMetric {
  color: var(--landing-ink);
  font-size: .93rem;
  font-weight: 700;
}

.comparisonUnit {
  margin-top: 3px;
  color: #92968e;
  font-size: .68rem;
}

.comparisonStatus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

.comparisonStatus.included {
  background: rgb(53 97 66 / 10%);
  color: var(--landing-green);
}

.comparisonRecommended .comparisonStatus.included {
  background: #fff;
  box-shadow: 0 3px 10px rgb(53 97 66 / 8%);
}

.comparisonStatus.unavailable {
  background: #f0eee9;
  color: #8f918a;
}

.comparisonStatus.comingSoon {
  background: rgb(201 151 63 / 15%);
  color: #94691f;
}

.comparisonTable tbody tr:not(.comparisonActionRow):hover > * {
  background-color: #fafbf8;
}

.comparisonTable tbody tr:not(.comparisonActionRow):hover > .comparisonRecommended {
  background-color: #e8f1ea;
}

.comparisonActionRow th,
.comparisonActionRow td {
  height: 104px;
  border-bottom: 0;
}

.comparisonActionRow th {
  background: #faf8f3;
}

.comparisonActionRow a {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid rgb(53 97 66 / 24%);
  border-radius: 999px;
  color: var(--landing-green) !important;
  font-size: .75rem;
  font-weight: 700;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.comparisonActionRow a:hover {
  transform: translateY(-2px);
  background: rgb(53 97 66 / 7%);
}

.comparisonActionRow a.primary {
  border-color: var(--landing-green);
  background: var(--landing-green);
  color: #fff !important;
  box-shadow: 0 9px 20px rgb(53 97 66 / 17%);
}

.comparisonActionRow a.primary:hover {
  background: var(--landing-deep);
}

.comparisonMobile {
  display: none;
}

/* Keep the existing English comparison grid intact until that page adopts the
   richer table markup used by the Arabic pricing page. */
.comparisonTable[role="table"] {
  max-width: 860px;
  min-width: 0;
  margin: 0 auto;
  border: 1px solid #e2d9c5;
  border-spacing: initial;
  border-radius: 16px;
  background: var(--landing-paper);
  box-shadow: 0 12px 32px rgb(38 52 42 / 9%);
  table-layout: auto;
  overflow: hidden;
}

.comparisonTable[role="table"] .comparisonRow {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid #ebe2cf;
}

.comparisonTable[role="table"] .comparisonRow:last-child {
  border-bottom: 0;
}

.comparisonTable[role="table"] .comparisonFeature,
.comparisonTable[role="table"] .comparisonValue {
  display: flex;
  align-items: center;
  padding: 14px 22px;
  color: #545850;
  font-size: .875rem;
  line-height: 1.45;
}

.comparisonTable[role="table"] .comparisonFeature {
  color: var(--landing-ink);
  font-weight: 600;
}

.comparisonTable[role="table"] .comparisonValue {
  justify-content: center;
  border-inline-start: 1px solid #ebe2cf;
  text-align: center;
}

.comparisonTable[role="table"] .comparisonRow.header {
  background: #efe8d9;
}

.comparisonTable[role="table"] .comparisonRow.header .comparisonFeature,
.comparisonTable[role="table"] .comparisonRow.header .comparisonValue {
  padding-block: 14px;
  color: var(--landing-ink);
  font-size: .92rem;
  font-weight: 700;
}

.comparisonTable[role="table"] .comparisonRow.header .comparisonValue {
  flex-direction: column;
  gap: 7px;
}

.comparisonTable[role="table"] .comparisonPopular {
  display: inline-block;
  margin: 0;
  padding: 3px 11px;
  background: var(--landing-green);
  color: #fff;
  font-size: .62rem;
}

.comparisonTable[role="table"] .comparisonValue.check {
  color: var(--landing-green);
  font-size: 1.05rem;
  font-weight: 700;
}

.comparisonTable[role="table"] .comparisonValue.comingSoon {
  color: #94691f;
  font-size: .75rem;
  font-weight: 700;
}

.comparisonTable[role="table"] .comparisonValue.dash {
  color: #b9b4a6;
}

/* Calculator Reposition */
.pricingCalculatorCollapsible {
  max-width: 1300px;
  margin: 0 auto;
  padding: 80px 32px;
  background: var(--landing-paper);
}

.calculatorIntro {
  max-width: 720px;
  margin: 0 auto 32px;
  text-align: center;
}

.calculatorIntro h2 {
  margin: 0 0 12px;
  color: var(--landing-ink);
  font-size: 1.85rem;
  font-weight: 600;
}

.calculatorIntro p {
  margin: 0;
  color: #676b62;
  font-size: .92rem;
}

/* Responsive pricing styles */
@media (max-width: 900px) {
  .pricingTiersGrid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  
  .pricingTierCard.featured {
    transform: scale(1);
  }
  
  .pricingTierCard.featured:hover {
    transform: translateY(-6px);
  }
  
  .comparisonTable th,
  .comparisonTable td {
    padding-inline: 16px;
  }

  .comparisonTable tbody th {
    padding-inline: 20px;
  }

  .comparisonTable[role="table"] .comparisonRow {
    grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
  }

  .comparisonTable[role="table"] .comparisonFeature,
  .comparisonTable[role="table"] .comparisonValue {
    padding: 13px 14px;
    font-size: .82rem;
  }

  .comparisonTable[role="table"] .comparisonRow.header .comparisonFeature,
  .comparisonTable[role="table"] .comparisonRow.header .comparisonValue {
    padding-block: 13px;
    font-size: .84rem;
  }

  .calculatorRow {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .seatTypesGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .billingControls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    margin-bottom: 44px;
    padding: 20px;
    border-radius: 17px;
  }

  .billingControlCopy {
    text-align: center;
  }

  .billingControlActions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .billingToggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .billingOption {
    padding-inline: 10px;
  }

  .currencySelect,
  .currencyTrigger {
    width: 100%;
  }

  .currencySelect {
    min-width: 0;
    justify-self: stretch;
  }

  .currencyMenu {
    inset-inline: 0;
    width: auto;
  }

  .pricingHero {
    padding: 70px 20px 55px;
  }
  
  .pricingTiersSection,
  .pricingComparisonSection,
  .pricingCalculatorCollapsible,
  .pricingCalculator {
    padding: 70px 20px;
  }
  
  .pricingTierCard {
    min-height: auto;
    padding: 32px 24px;
  }

  .comparisonTable[role="table"] {
    overflow-x: auto;
  }

  .comparisonTable[role="table"] .comparisonRow {
    grid-template-columns: minmax(136px, 1.3fr) repeat(3, minmax(72px, 1fr));
    min-width: 452px;
  }

  .comparisonTable[role="table"] .comparisonFeature,
  .comparisonTable[role="table"] .comparisonValue {
    padding: 12px;
    font-size: .78rem;
  }

  .comparisonFrame {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .comparisonTableScroll {
    display: none;
  }

  .comparisonMobile {
    display: grid;
    gap: 18px;
  }

  .comparisonMobileCard {
    overflow: hidden;
    border: 1px solid #dfd8c9;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 30px rgb(38 52 42 / 8%);
  }

  .comparisonMobileCard.featured {
    border-color: var(--landing-green);
    box-shadow: 0 18px 36px rgb(53 97 66 / 14%);
  }

  .comparisonMobileCard header {
    position: relative;
    padding: 24px 22px 21px;
    background: #faf8f3;
    border-bottom: 1px solid #ece7dc;
  }

  .comparisonMobileCard.featured header {
    background: var(--landing-green);
    border-bottom-color: transparent;
    color: #fff;
  }

  .comparisonMobileCard header > span {
    position: absolute;
    top: 22px;
    inset-inline-end: 22px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgb(53 97 66 / 9%);
    color: var(--landing-green);
    font-size: .63rem;
    font-weight: 700;
  }

  .comparisonMobileCard.featured header > span {
    background: #fff;
    color: var(--landing-green);
  }

  .comparisonMobileCard h3 {
    margin: 0;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
  }

  .comparisonMobileCard header p {
    margin: 5px 0 0;
    color: #7e827a;
    font-size: .72rem;
  }

  .comparisonMobileCard.featured header p {
    color: rgb(255 255 255 / 70%);
  }

  .comparisonMobileCard dl {
    margin: 0;
    padding: 6px 20px;
  }

  .comparisonMobileCard dl > div {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #efebe2;
  }

  .comparisonMobileCard dl > div:last-child {
    border-bottom: 0;
  }

  .comparisonMobileCard dt {
    color: #696e65;
    font-size: .74rem;
  }

  .comparisonMobileCard dd {
    margin: 0;
    color: var(--landing-ink);
    font-size: .76rem;
    font-weight: 700;
    text-align: end;
  }

  .comparisonMobileCard dd.muted {
    color: #aaa9a3;
    font-weight: 600;
  }

  .comparisonMobileCard dd.soon {
    color: #94691f;
  }

  .comparisonMobileCard > a {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 8px 20px 20px;
    border: 1px solid rgb(53 97 66 / 22%);
    border-radius: 999px;
    color: var(--landing-green) !important;
    font-size: .79rem;
    font-weight: 700;
  }

  .comparisonMobileCard.featured > a {
    border-color: var(--landing-green);
    background: var(--landing-green);
    color: #fff !important;
  }

  .calculatorCard {
    padding: 28px 20px;
  }
  
  .calculatorHeader h2 {
    font-size: 1.65rem;
  }
  
  .tierOptions {
    flex-direction: column;
    width: 100%;
  }
  
  .tierOption label {
    width: 100%;
  }
  
  .priceSummary {
    padding: 24px 18px;
  }
  
  .seatTypesSection,
  .pricingFaqSection {
    padding: 75px 20px;
  }
}


/* The inbox leads the services grid while existing clinic tools keep their layout. */
.omnichannelService {
  grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.15fr;
  gap: 36px; align-items: center; padding: clamp(24px, 4vw, 48px);
  border: 1px solid #cbd8ce; border-radius: 18px; background: #eef3ee;
}
.omnichannelService h3 { margin: 12px 0 18px; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.4; }
.omnichannelService p:not(.kicker) { color: #515c51; line-height: 1.85; }
.omnichannelLink { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; color: #284e34; font-weight: 600; text-underline-offset: 5px; }
.omnichannelLink:focus-visible { outline: 2px solid #356142; outline-offset: 6px; border-radius: 2px; }
@media (max-width: 960px) { .omnichannelService { grid-template-columns: 1fr; gap: 24px; } }

.omnichannelDemo { min-width: 0; width: 100%; max-width: 560px; margin-inline: auto; }
.inboxDemoSvg { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 16px rgb(38 52 42 / 7%)); }
.inboxDemoCaption { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 14px; color: #596552; font-size: .7rem; }

/* Compact branding on the original homepage shell. */
.header .logoLockup{gap:8px;min-height:44px}.header .logoTile{width:34px;height:34px;border-radius:9px}.header .logoTile img{width:27px;height:27px}.header .logoWordmark{width:80px;height:auto}
@media(max-width:600px){.header .logoTile{width:30px;height:30px;border-radius:8px}.header .logoTile img{width:24px;height:24px}.header .logoWordmark{width:76px}}