@import url("https://fonts.googleapis.com/css2?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: #faf8f3;
  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; }

.page {
  --landing-ink: #2b2721;
  --landing-green: #356142;
  --landing-deep: #1f3a28;
  --landing-cream: #f4f0e7;
  --landing-paper: #ffffff;
  --landing-teal: #5f9c93;
  --landing-clay: #bd6440;
  --landing-gold: #c9973f;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 7% 8%, rgb(95 156 147 / 10%), transparent 24rem),
    var(--landing-cream);
  color: var(--landing-ink);
  font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
}

.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(1400px, calc(100% - 64px));
  height: 92px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid rgb(43 39 33 / 12%);
}

.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: 32px; font-size: .88rem; font-weight: 500; }
.nav a, .loginLink { transition: color 160ms ease; }
.nav a:hover, .loginLink:hover { color: var(--landing-green); }
.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: 38px;
  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(1400px, 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; 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(3.2rem, 4.35vw, 4.85rem);
  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 / 16%); border-radius: 999px; color: #e7eee9 !important; font-size: .9rem; font-weight: 600; transition: background 180ms ease, border 180ms ease; }
.secondaryCta:hover { border-color: rgb(255 255 255 / 30%); 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 - 1400px) / 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 - 1400px) / 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 - 1400px) / 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 - 1400px) / 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 - 1400px) / 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 - 1400px) / 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); }
}

.faqSection { padding: 125px max(32px, calc((100vw - 1400px) / 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 - 1400px) / 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 - 1400px) / 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 - 1400px) / 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 - 1400px) / 2));
  background: var(--landing-paper);
}
.blogGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
  max-width: 1200px;
  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; }
  .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; }
  .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, 1400px); }
  .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.55rem, 11.5vw, 3.6rem); }
  .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, .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; }
  .planSummary button { animation: none !important; }
}

.legalPage {
  min-height: 100vh;
  background: var(--landing-paper);
}
.legalHero {
  padding: 80px max(32px, calc((100vw - 1400px) / 2)) 60px;
  background: #f4f0e7;
  text-align: center;
}
.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;
  }
  .legalContent {
    padding: 60px 20px;
  }
  .legalContent h2 {
    font-size: 1.6rem;
  }
  .legalContent h3 {
    font-size: 1.2rem;
  }
}

/* ==========================================================================
   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"] h3,
[dir="ltr"] h4,
[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"] .faqIntro h2,
[dir="ltr"] .contactCopy h2 {
  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, 4.6vw, 4.65rem);
  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;
}

[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"] .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;
  }
}