/* physiplan.pro marketing pages (EN "/" and AR "/ar/"). Rules live in DESIGN.md.
   Logical properties throughout so the Arabic page mirrors without a second stylesheet. */

/* Self-hosted Google Fonts (OFL), latin + arabic subsets only. */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/hanken-latin-v1.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/readex-arabic-v1.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/readex-latin-v1.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* PhysiPlan palette. Brand greens come from the logo (landing/brand/): dark green #1E5E3B and
     light green #8EC73A. Surfaces and ink come from constants/theme.ts. Every colour on the page is a
     token here; derived shades are marked. #8EC73A is 2.0:1 on white, so it is shapes only, never text. */
  --ground: #FFFFFF;
  --ground-2: #F4EEE2;          /* app canvas (SURFACE.canvas) */
  --beige: #F8F3E9;             /* app nested cream (SURFACE.card2) */
  --tint: #F4EEE2;
  --surface: #FFFFFF;
  --ink: #16243C;               /* TEXT_TONES.ink */
  --ink-2: #3B4A6E;             /* light theme textSub */
  --line: rgba(22, 36, 60, .12);
  --brand: #1E5E3B;             /* logo dark green: brand text, selected tab, stats */
  --brand-ink: #F4EEE2;
  --accent: #8EC73A;            /* logo light green: rail fill, bullets, slot edges (shapes only) */
  --accent-soft: #EEF6E2;       /* derived: logo light green at 15% on white, fills behind brand text */
  --action: #1E5E3B;            /* filled buttons, white text */
  --action-ink: #FFFFFF;
  --action-hover: #164A2E;      /* derived: logo dark green, darker */
  --deep: #1E5E3B;              /* text on white buttons over dark */
  --hero-start: #133F27;        /* derived: logo dark green, darker */
  --hero-mid: #1E5E3B;          /* logo dark green */
  --hero-end: #24704A;          /* derived: logo dark green, lighter */
  --glow: 142, 199, 58;         /* logo light green, as rgba(var(--glow), a) */
  --glow-2: 46, 125, 80;        /* derived: #2E7D50, a lighter dark green for soft light on dark */
  --dark: #1E5E3B;              /* dark bands (receptionist, demo, close) */
  --darker: #0E2E1D;            /* derived: the far end of dark bands */
  --scrim: 9, 31, 20;           /* derived, for overlays and shadows on dark */
  --mint: #8EC73A;              /* logo light green: icons on dark (non-text) */
  --mint-soft: #D4EBB0;         /* derived: logo light green lifted, kicker text on dark */
  --tint-hover: #EEF6E2;        /* hover on white buttons over dark */
  --bezel: #18211C;             /* phone frame */
  --wa: #1FA855;
  --wa-soft: #DCF3E4;
  --wa-ink: #137A3D;
  --wa-bar: #008069;
  --wa-out: #D9FDD3;
  --wa-out-ink: #0F3B20;
  --wa-chat: #EFE7DC;
  --profit: #1E5E3B;
  --profit-ink: #F4EEE2;
  --tile: #EEE2CC;             /* the logo's own cream (icon-cream) */
  --shadow: 0 1px 2px rgba(22, 36, 60, .06), 0 8px 24px -16px rgba(22, 36, 60, .25);
  --shadow-lg: 0 24px 40px -24px rgba(19, 63, 39, .45), 0 6px 12px -6px rgba(19, 63, 39, .18);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --r: 8px;
  --r-in: 6px;
  --font-display: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nav-h: 68px;
  color-scheme: light;
}

/* Always light: the founder chose a white and beige page (2026-09-25), even on dark-mode devices. */

:lang(ar) {
  --font-display: "Readex Pro", system-ui, sans-serif;
  --font-body: "Readex Pro", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
:lang(ar) body, body:lang(ar) { line-height: 1.75; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
/* Phones: no grey flash on tap. Keyboard focus still gets the outline above. */
a, button, summary, input { -webkit-tap-highlight-color: transparent; }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.i { width: 1.15em; height: 1.15em; flex: none; }
.i--lg { width: 30px; height: 30px; color: var(--brand); margin-block-end: 18px; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--ground); padding: 10px 16px; border-radius: var(--r-in); }
.skip:focus { top: 12px; }

/* ---------- type ---------- */
.display {
  font: 700 clamp(2.4rem, 4.5vw, 3.6rem)/1.1 var(--font-display);
  letter-spacing: -.022em;
  text-wrap: balance;
}
.display--md { font-size: clamp(2.1rem, 4vw, 3.4rem); }
.h2 {
  font: 650 clamp(1.8rem, 3vw, 2.5rem)/1.15 var(--font-display);
  letter-spacing: -.02em;
  text-wrap: balance;
  max-width: 20ch;
}
h3 { font: 700 1.2rem/1.25 var(--font-display); letter-spacing: -.015em; }
:lang(ar) .display { font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.2; letter-spacing: 0; font-weight: 700; }
:lang(ar) .display--md { font-size: clamp(2.2rem, 4.2vw, 3.5rem); }
:lang(ar) .h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.3; letter-spacing: 0; font-weight: 600; }
:lang(ar) h3 { letter-spacing: 0; font-weight: 600; line-height: 1.45; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 22px; border-radius: var(--r-in);
  font: 600 1rem/1 var(--font-body); text-decoration: none; white-space: nowrap;
  border: 1.5px solid transparent;
  transition: transform .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: .95rem; }
.btn--action { background: var(--action); color: var(--action-ink); }
@media (hover: hover) and (pointer: fine) { .btn--action:hover { background: var(--action-hover); } }
.btn--action .i { transition: transform .25s var(--ease); }
@media (hover: hover) and (pointer: fine) { .btn--action:hover .i { transform: translateX(3px); } }
[dir="rtl"] .btn .i { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) { [dir="rtl"] .btn--action:hover .i { transform: scaleX(-1) translateX(3px); } }
.btn--ghost { color: var(--ink); border-color: var(--line); background: transparent; }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { border-color: var(--ink-2); } }
.btn--line { color: var(--ink); border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn--line:hover { background: var(--ink); color: var(--ground); } }

/* ---------- nav ---------- */
/* Fixed height on purpose: the bar sits in the page flow, and changing its height on scroll moved the whole
   page, which re-fired the scroll detector and made the page shake. Only colour and shadow change. */
.nav { position: sticky; top: 0; z-index: 20; height: var(--nav-h); background: var(--ground); border-block-end: 1px solid transparent; transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.is-stuck .nav { border-block-end-color: var(--line); box-shadow: 0 10px 30px -22px rgba(22, 36, 60, .45); }
.nav-sentinel { position: absolute; top: 8px; height: 1px; width: 1px; }
/* Over the green hero the bar is part of it (transparent, white type); after scrolling it becomes a solid white bar. */
.has-hero .nav { position: fixed; inset-inline: 0; background: transparent; }
.has-hero main { padding-top: var(--nav-h); }
.has-hero .hero2 { margin-top: calc(-1 * var(--nav-h)); padding-top: calc(var(--nav-h) + clamp(40px, 5vw, 72px)); }
.has-hero:not(.is-stuck):not(.menu-open) .nav { color: #FFFFFF; }
.has-hero:not(.is-stuck):not(.menu-open) .nav__links a, .has-hero:not(.is-stuck):not(.menu-open) .nav__sign, .has-hero:not(.is-stuck):not(.menu-open) .nav__lang { color: rgba(255, 255, 255, .86); }
@media (hover: hover) and (pointer: fine) { .has-hero:not(.is-stuck):not(.menu-open) .nav__links a:hover, .has-hero:not(.is-stuck):not(.menu-open) .nav__sign:hover { color: #FFFFFF; } }
.has-hero:not(.is-stuck):not(.menu-open) .nav__links a::after { background: #FFFFFF; }
.has-hero:not(.is-stuck):not(.menu-open) .nav .btn--action { background: #FFFFFF; color: var(--deep); }
.has-hero:not(.is-stuck):not(.menu-open) .nav__menu { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }
.has-hero:not(.is-stuck):not(.menu-open) .nav__menu span { background: #FFFFFF; }
.has-hero.is-stuck .nav, .has-hero.menu-open .nav { background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
.nav__sign { padding: 9px 14px; border-radius: 6px; border: 1px solid transparent; }
@media (hover: hover) and (pointer: fine) { .nav__sign:hover { border-color: currentColor; } }
.nav__in { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; flex: none; min-height: 44px; align-items: center; gap: 10px; text-decoration: none; font: 700 1.2rem/1 var(--font-display); letter-spacing: -.01em; }
.brand img { width: 38px; height: 38px; padding: 6px 5px; background: var(--tile); border-radius: 8px; box-shadow: var(--shadow); object-fit: contain; }
.nav__links { display: flex; gap: 4px; margin-inline-start: 12px; height: 100%; }
.nav__links a { position: relative; display: flex; align-items: center; padding-inline: 12px; }
.nav__links a::after { content: ""; position: absolute; inset-inline: 12px; bottom: -1px; height: 2px; background: var(--brand); transform: scaleX(0); transition: transform .3s var(--ease); }
.nav__links a[aria-current="true"] { color: var(--ink); }
.nav__links a[aria-current="true"]::after { transform: scaleX(1); }
.nav__links a, .nav__sign, .nav__lang { text-decoration: none; font-weight: 500; color: var(--ink-2); transition: color .2s; }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover, .nav__sign:hover, .nav__lang:hover { color: var(--ink); } }
.nav__end { margin-inline-start: auto; display: flex; align-items: center; gap: 20px; }
.nav__lang { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; font-family: "Readex Pro", var(--font-body); }
.nav__menu { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav__menu span { width: 18px; height: 2px; background: var(--ink); transition: transform .25s var(--ease); }
.nav__menu[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__menu[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.navsheet { position: sticky; top: 58px; z-index: 19; background: var(--ground); border-block-end: 1px solid var(--line); box-shadow: 0 16px 30px -24px rgba(22, 36, 60, .5); }
.navsheet[hidden] { display: none; }
.navsheet__in { display: grid; gap: 2px; padding-block: 10px 18px; }
.navsheet__in a:not(.btn) { padding: 12px 4px; text-decoration: none; font-weight: 600; color: var(--ink); border-block-end: 1px solid var(--line); }
.navsheet__in .btn { margin-block-start: 12px; }
.nav__lang:lang(en) { font-family: var(--font-body); }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 5vw, 72px); align-items: center; padding-block: clamp(40px, 5vw, 64px) clamp(64px, 7vw, 96px); }
.hero__copy { max-width: 560px; }
.hero__kicker { display: inline-block; padding: 5px 10px; border-radius: 4px; background: var(--accent-soft); color: var(--brand); font-size: .85rem; margin-block-end: 20px; }
.hero__proof { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-block-start: 26px; color: var(--ink-2); font-size: .92rem; }
.hero__proof li { display: inline-flex; align-items: center; gap: 7px; }
.hero__proof .i { width: 15px; height: 15px; color: var(--brand); }
.hero__kicker { font-weight: 600; color: var(--brand); margin-block-end: 18px; display: inline-flex; align-items: center; gap: 10px; }
.hero .display { font-size: clamp(2.1rem, 3.3vw, 2.9rem); line-height: 1.12; letter-spacing: -.025em; font-weight: 700; text-wrap: balance; }
.hero__sub { margin-block: 18px 30px; font-size: clamp(1.08rem, 1.5vw, 1.25rem); color: var(--ink-2); max-width: 44ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__stage { position: relative; max-width: 1120px; margin: clamp(40px, 5vw, 64px) auto 0; }
.browser { position: relative; z-index: 1; border-radius: 8px; border: 1px solid rgba(22, 36, 60, .16); background: var(--surface); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(22, 36, 60, .35), 0 2px 6px rgba(22, 36, 60, .06); }
.browser__bar { display: flex; align-items: center; gap: 7px; height: 38px; padding-inline: 14px; background: #F2F2F0; border-block-end: 1px solid rgba(22, 36, 60, .1); direction: ltr; }
.browser__bar i { width: 11px; height: 11px; border-radius: 50%; background: #D8D8D4; }
.browser__bar span { margin-inline: auto; padding: 4px 40px; border-radius: 6px; background: #fff; border: 1px solid rgba(22, 36, 60, .08); font-size: .76rem; color: var(--ink-2); }
.browser img { display: block; width: 100%; height: auto; }
.browser__cap { margin-block-start: 14px; font-size: .8rem; color: var(--ink-2); text-align: center; }

/* the floating logo tile: one flat image of the logo (landing/brand/mark-176.png), tilted as a whole. */
.tile { position: absolute; z-index: 3; top: -44px; inset-inline-start: -40px; width: 120px; height: 120px; perspective: 700px; animation: float 7s ease-in-out infinite; }
.tile__face {
  position: absolute; inset: 0; border-radius: 34px; background: var(--tile);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 10deg)) rotateY(var(--ry, -14deg));
  transition: transform .6s var(--ease);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 0 #D6CAB4, var(--shadow-lg);
}
.tile__mark { position: absolute; inset: 20% 16%; width: 68%; height: 60%; object-fit: contain; }
[dir="rtl"] .tile__face { transform: rotateX(var(--rx, 10deg)) rotateY(var(--ry, 14deg)); }
.tile--sm { position: relative; inset: auto; width: 104px; height: 104px; margin: 0 auto 28px; }
.tile--sm .tile__face { border-radius: 26px; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } }
@keyframes float-rtl { 0%, 100% { transform: translateY(0) rotate(2deg); } 50% { transform: translateY(-14px) rotate(-1.5deg); } }

/* hero stage: the real product, lit and staged. A deep green set with one soft key
   light and film grain; the calendar close-up sits tilted in 3D and settles flat as
   the visitor scrolls; two real details float in front of it. */
.stage { position: relative; aspect-ratio: 1 / .92; border-radius: 8px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 20% 0%, var(--hero-end) 0%, rgba(var(--glow-2), 0) 55%),
              radial-gradient(90% 70% at 100% 100%, rgba(var(--glow), .28) 0%, rgba(var(--glow), 0) 60%),
              linear-gradient(160deg, var(--dark) 0%, var(--darker) 100%);
  box-shadow: 0 40px 80px -40px rgba(var(--scrim), .55); }
.stage::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(80% 70% at 60% 40%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(80% 70% at 60% 40%, #000 30%, transparent 80%); }
.stage::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.stage__light { position: absolute; z-index: 1; top: -30%; inset-inline-start: 10%; width: 70%; height: 80%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--glow), .35), rgba(var(--glow), 0)); filter: blur(20px); }
.stage__scene { position: absolute; inset: 0; z-index: 2; perspective: 1400px; }
.stage__main { position: absolute; margin: 0; top: 12%; inset-inline-start: 16%; width: 92%; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18); background: #F7F3EA;
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .2);
  transform: rotateY(-16deg) rotateX(7deg) rotateZ(1.5deg); transform-origin: 30% 50%; }
[dir="rtl"] .stage__main { transform: rotateY(16deg) rotateX(7deg) rotateZ(-1.5deg); transform-origin: 70% 50%; }
.stage__main img { display: block; width: 100%; height: auto; }
.stage__main::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.22) 45%, rgba(255,255,255,0) 60%); background-size: 250% 100%; background-position: 120% 0; }
.stage__card { position: absolute; z-index: 3; margin: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .12); }
.stage__alert { bottom: 8%; inset-inline-start: 5%; width: 56%; background: #FBF8F2; }
.stage__alert img { display: block; width: 100%; height: auto; }
.stage__wa { top: 7%; inset-inline-start: 5%; width: 44%; padding: 0 0 10px; background: var(--wa-chat); display: flex; flex-direction: column; gap: 6px; }
.stage__wa-bar { display: flex; align-items: center; gap: 7px; padding: 8px 11px; background: var(--wa-bar); color: #fff; font-size: .74rem; font-weight: 600; }
.stage__wa .bubble { margin-inline: 9px; font-size: .72rem; }
.tile--hero { position: absolute; top: 5%; inset-inline-end: 4%; width: 78px; height: 78px; z-index: 5; }
.tile--hero .tile__face { border-radius: 20px; }
.stage__cap { position: absolute; z-index: 7; bottom: 12px; inset-inline-end: 14px; margin: 0; font-size: .72rem; color: rgba(238, 231, 218, .7); }
@media (prefers-reduced-motion: no-preference) {
  .stage__main::after { animation: sweep 2.4s var(--ease) .6s both; }
  .stage__alert { animation: rise 1s var(--ease) .5s both, drift 9s ease-in-out 1.6s infinite; }
  .stage__wa { animation: rise 1s var(--ease) .8s both, drift 8s ease-in-out 2s infinite reverse; }
  @supports (animation-timeline: view()) {
    .stage__main { animation: settle linear both; animation-timeline: view(); animation-range: exit-crossing 0% exit-crossing 60%; }
    [dir="rtl"] .stage__main { animation-name: settle-rtl; }
  }
}
@keyframes sweep { to { background-position: -40% 0; } }
@keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes settle { to { transform: rotateY(-4deg) rotateX(2deg) rotateZ(0deg) scale(1.03); } }
@keyframes settle-rtl { to { transform: rotateY(4deg) rotateX(2deg) rotateZ(0deg) scale(1.03); } }

/* devices: laptop with the calendar, phone with WhatsApp */
.laptop { position: relative; z-index: 1; }
.laptop__screen { background: var(--surface); border: 10px solid var(--bezel); border-block-end-width: 12px; border-radius: 10px 10px 3px 3px; overflow: hidden; box-shadow: var(--shadow-lg); }
.laptop__screen img { display: block; width: 100%; height: auto; }
.laptop__base { height: 14px; margin-inline: -6%; border-radius: 2px 2px 14px 14px; background: linear-gradient(#DADDE3, #A9AEB8); box-shadow: 0 16px 24px -14px rgba(22, 36, 60, .45); }
.laptop__base::before { content: ""; display: block; width: 18%; height: 5px; margin: 0 auto; border-radius: 0 0 6px 6px; background: #BCC1CA; }
.laptop .cal { box-shadow: none; border: 0; border-radius: 0; }
.laptop__cap { margin-block-start: 14px; font-size: .78rem; color: var(--ink-2); text-align: center; }
.phone { position: absolute; z-index: 2; inset-inline-end: -36px; bottom: -8px; width: 228px; border: 8px solid var(--bezel); border-radius: 32px; background: var(--ground-2); overflow: hidden; box-shadow: var(--shadow-lg); }
.phone__notch { position: absolute; z-index: 1; top: 6px; left: 50%; translate: -50% 0; width: 64px; height: 16px; border-radius: 99px; background: var(--bezel); }
.phone .wa__bar { padding-top: 28px; }
.phone--flat { position: relative; inset: auto; width: min(100%, 360px); margin-inline: auto; }
.phone--flat .wa__bar { padding-top: 12px; }
.bubble__time { display: block; margin-block-start: 3px; font-size: .64rem; font-weight: 500; opacity: .6; text-align: end; }

/* calendar */
.cal { position: relative; z-index: 1; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 18px 18px 20px; border: 1px solid var(--line); }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline-end: 84px; margin-block-end: 14px; font-size: .95rem; }
.cal__tag { font-size: .75rem; font-weight: 600; color: var(--ink-2); background: var(--tint); border-radius: 4px; padding: 4px 10px; white-space: nowrap; }
.cal__cols { position: relative; display: grid; grid-template-columns: 38px repeat(3, 1fr); gap: 8px; height: 360px; }
.cal__cols::before {
  content: ""; position: absolute; inset: 44px 0 0 38px; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% 20%;
}
[dir="rtl"] .cal__cols::before { inset: 44px 38px 0 0; }
.cal__times { position: relative; padding-top: 44px; display: grid; grid-template-rows: repeat(5, 1fr); font-size: .72rem; color: var(--ink-2); }
.cal__times span { transform: translateY(-.7em); }
.cal__col { position: relative; }
.cal__col > b { display: block; height: 44px; font-size: .82rem; line-height: 1.2; }
.cal__col > b small { display: block; font-weight: 500; color: var(--ink-2); font-size: .72rem; }
.appt, .cal__prayer { --body: calc(100% - 44px); position: absolute; inset-inline: 0; top: calc(44px + var(--body) * var(--s) / 300); height: calc(var(--body) * var(--d) / 300 - 3px); }
.appt {
  z-index: 1; border-radius: 4px; padding: 4px 8px; overflow: hidden;
  background: var(--accent-soft); border-inline-start: 3px solid var(--accent);
  font-size: .7rem; line-height: 1.2; color: var(--ink-2);
}
.appt i { display: block; font-style: normal; font-weight: 700; color: var(--ink); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt--wa { background: var(--wa-soft); border-inline-start-color: var(--wa); }
.appt__ok { display: inline-flex; align-items: center; gap: 3px; margin-inline-start: 6px; color: var(--wa-ink); font-weight: 700; }
.appt__ok .i { width: 11px; height: 11px; }
.cal__prayer {
  inset-inline-start: 46px; inset-inline-end: 0; z-index: 0; border-radius: 6px;
  background: repeating-linear-gradient(135deg, transparent 0 6px, var(--line) 6px 7px);
  display: flex; align-items: center; justify-content: flex-end; padding-inline: 8px;
  font-size: .68rem; font-weight: 700; color: var(--ink-2);
}

/* WhatsApp */
.wa__bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--wa-bar); color: #fff; font-size: .82rem; font-weight: 600; }
.wa__body { position: relative; padding: 12px; min-height: 150px; background: var(--ground-2); display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 88%; padding: 8px 11px; border-radius: 12px; font-size: .8rem; line-height: 1.4; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.bubble--in { align-self: flex-start; background: var(--surface); border-start-start-radius: 4px; }
.bubble--out { align-self: flex-end; background: var(--wa-out); color: var(--wa-out-ink); border-start-end-radius: 4px; font-weight: 600; }
.wa__typing { position: absolute; inset-inline-start: 12px; top: 12px; display: flex; gap: 4px; padding: 10px 12px; background: var(--surface); border-radius: 12px; }
.wa__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-2); opacity: .5; }

/* hero choreography: the day fills, the reminder goes out, the patient confirms */
@media (prefers-reduced-motion: no-preference) {
  .appt { opacity: 0; animation: drop .7s var(--ease) forwards; animation-delay: calc(.3s + var(--n) * 90ms); }
  .appt--wa { animation: drop .7s var(--ease) forwards calc(.3s + var(--n) * 90ms), wa-confirm .5s var(--ease) backwards 3.3s; }
  .appt__ok { opacity: 0; animation: pop .45s var(--ease) forwards 3.3s; }
  .hero .phone { opacity: 0; animation: rise .8s var(--ease) forwards 1.15s; }
  .wa__typing { animation: typing-out .2s linear forwards 2.2s; }
  .wa__typing i { animation: blink 1s infinite; }
  .wa__typing i:nth-child(2) { animation-delay: .15s; }
  .wa__typing i:nth-child(3) { animation-delay: .3s; }
  .hero .phone .bubble--in { opacity: 0; animation: pop .45s var(--ease) forwards 2.25s; }
  .hero .phone .bubble--out { opacity: 0; animation: pop .45s var(--ease) forwards 2.95s; }
  .tile { opacity: 0; animation: tile-in 1.1s var(--ease) forwards .1s, float 7s ease-in-out infinite 1.2s; }
  [dir="rtl"] .tile { animation-name: tile-in, float-rtl; }
}
@media (prefers-reduced-motion: reduce) {
  .wa__typing { display: none; }
  .tile { animation: none; }
  html { scroll-behavior: auto; }
}
@keyframes drop { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: .8; } }
@keyframes typing-out { to { opacity: 0; visibility: hidden; } }
@keyframes wa-confirm { from { background: var(--surface); border-inline-start-color: var(--line); } }
@keyframes tile-in { from { opacity: 0; transform: translateY(30px) scale(.85) rotate(-8deg); } to { opacity: 1; transform: translateY(0) rotate(-2deg); } }

/* Off-screen sections are not rendered until needed (large first-paint win on phones).
   The journey panel stays sticky: containment does not create a scroll container. */
.inside, .feature, .bonus, .faq, .close { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.journey { content-visibility: auto; contain-intrinsic-size: auto 3200px; }

/* ---------- bands (full-width beige behind a section) ---------- */
.band { background: var(--beige); }

/* ---------- facts ---------- */
.stats { border-block-end: 1px solid var(--line); }
.stats ul { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: clamp(36px, 4vw, 56px); }
.stats li { display: grid; align-content: start; gap: 8px; padding-inline: clamp(16px, 2vw, 28px); border-inline-start: 1px solid var(--line); }
.stats li:first-child { border-inline-start: 0; padding-inline-start: 0; }
.stats b { font: 700 clamp(2.2rem, 3.6vw, 3.2rem)/1 var(--font-display); letter-spacing: -.03em; color: var(--brand); font-variant-numeric: tabular-nums; }
:lang(ar) .stats b { letter-spacing: 0; }
.stats span { color: var(--ink-2); font-size: .95rem; line-height: 1.45; max-width: 26ch; }

/* ---------- section heads ---------- */
.sec-head { display: grid; gap: 12px; margin-block-end: 40px; }
.sec-head p { color: var(--ink-2); max-width: 52ch; font-size: 1.1rem; }
.sec-head--center { justify-items: center; text-align: center; }
.sec-head--center .h2 { max-width: 24ch; }

/* ---------- journey ---------- */
.journey { padding-block: clamp(64px, 7vw, 96px) 48px; }
.journey__grid { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.05fr); gap: 0 clamp(20px, 3vw, 44px); align-items: start; }
.journey__rail { position: relative; height: 100%; clip-path: inset(0 -20px); }
.journey__rail::before { content: ""; position: absolute; inset-block: 24px 20vh; inset-inline-start: 50%; width: 2px; translate: -50% 0; background: var(--line); }
.journey__marker { position: sticky; top: calc(50vh - 18px); width: 30px; height: 36px; margin-inline: auto; margin-block-start: 16px; filter: drop-shadow(0 6px 8px rgba(19, 63, 39, .3)); }
@supports (animation-timeline: view()) {
  .journey__rail::after { content: ""; position: absolute; top: 24px; height: calc(100% - 24px - 20vh); inset-inline-start: 50%; width: 2px; translate: -50% 0; background: var(--accent); transform-origin: top; animation: rail-fill linear both; animation-timeline: view(); animation-range: contain 0% contain 100%; }
}
@keyframes rail-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.steps { counter-reset: s; }
.step { min-height: 42vh; padding-block: 28px; opacity: .7; transition: opacity .5s var(--ease); }
.step:last-child { min-height: 46vh; }
.step.is-on { opacity: 1; }
.step__when { display: inline-block; font-size: .85rem; font-weight: 700; color: var(--brand); background: var(--accent-soft); padding: 4px 10px; border-radius: 4px; margin-block-end: 14px; }
.step h3 { font-size: clamp(1.35rem, 2.1vw, 1.75rem); margin-block-end: 12px; max-width: 22ch; }
.step p { color: var(--ink-2); max-width: 42ch; }

.panel { position: sticky; top: calc(50vh - 200px); }
.panel__in { position: relative; height: 370px; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow-lg); border: 1px solid var(--line); overflow: hidden; }
.panel__note { margin-block-start: 10px; font-size: .78rem; color: var(--ink-2); text-align: end; }
.state { position: absolute; inset: 0; padding: 22px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(16px) scale(.985); transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s linear .45s; }
.panel__in[data-active="0"] [data-state="0"], .panel__in[data-active="1"] [data-state="1"], .panel__in[data-active="2"] [data-state="2"],
.panel__in[data-active="3"] [data-state="3"], .panel__in[data-active="4"] [data-state="4"], .panel__in[data-active="5"] [data-state="5"] {
  opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease) .1s, transform .6s var(--ease) .1s, visibility 0s;
}
.state--chat { padding: 0; }
.state--chat .wa__bar { padding: 14px 18px; font-size: .95rem; }
.chat { flex: 1; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: var(--ground-2); }
.chat .bubble { font-size: .92rem; }
.chat__btns { display: flex; gap: 8px; align-self: flex-start; }
.chat__btns span { padding: 8px 14px; border-radius: 8px; background: var(--surface); color: var(--wa-ink); font-weight: 700; font-size: .88rem; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.mini-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-block-end: 14px; margin-block-end: 16px; border-bottom: 1px solid var(--line); }
.mini-head span { font-size: .85rem; color: var(--ink-2); }
.slot { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: stretch; margin-block-end: 12px; }
.slot > span { font-size: .8rem; color: var(--ink-2); padding-top: 12px; }
.slot__b { border-radius: 4px; padding: 12px 14px; background: var(--accent-soft); border-inline-start: 3px solid var(--accent); font-weight: 700; }
.slot__b small { display: block; font-weight: 500; color: var(--ink-2); }
.slot__b--live { background: var(--wa-soft); border-inline-start-color: var(--wa); }
.slot__b em { display: inline-flex; align-items: center; gap: 5px; margin-block-start: 6px; font-style: normal; font-size: .82rem; color: var(--wa-ink); }
.slot__b--free { background: none; border: 1.5px dashed var(--line); color: var(--ink-2); font-weight: 500; }
.tx { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-in); background: var(--tint); font-weight: 600; }
.tx b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 6px; background: var(--brand); color: var(--brand-ink); font-family: var(--font-display); }
.tx__chip { margin-inline-start: auto; font-size: .78rem; padding: 4px 10px; border-radius: 4px; background: var(--accent-soft); color: var(--brand); }
.kit li { display: flex; align-items: center; gap: 10px; padding-block: 12px; border-bottom: 1px solid var(--line); font-weight: 500; }
.kit li:last-child { border-bottom: 0; }
.roll { margin-inline-start: auto; position: relative; display: inline-block; width: 4ch; height: 1.4em; overflow: hidden; text-align: end; font-variant-numeric: tabular-nums; font-weight: 700; }
.roll s, .roll b { position: absolute; inset-inline-end: 0; text-decoration: none; transition: transform .6s var(--ease) .35s, opacity .6s var(--ease) .35s; }
.roll b { transform: translateY(100%); opacity: 0; }
.panel__in[data-active="3"] .roll s { transform: translateY(-100%); opacity: 0; }
.panel__in[data-active="3"] .roll b { transform: none; opacity: 1; }
.kit__next { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.kit__u { color: var(--ink-2); font-size: .8rem; margin-inline-start: -4px; }
.kit__low { color: var(--action); }
.nw { white-space: nowrap; }
.cal__hijri { display: block; font-weight: 500; font-size: .74rem; color: var(--ink-2); }
.kit__low em { font-style: normal; font-size: .75rem; font-weight: 700; padding: 3px 8px; border-radius: 4px; border: 1.5px solid currentColor; }
.bill div { display: flex; justify-content: space-between; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.bill dd { font-variant-numeric: tabular-nums; font-weight: 600; }
.bill__total { font-weight: 700; font-size: 1.1rem; border-bottom: 0 !important; }
.bill__share { margin-block-start: 10px; padding: 12px 14px !important; border: 0 !important; border-radius: var(--r-in); background: var(--accent-soft); color: var(--brand); font-weight: 600; }


/* ---------- hero v5: brand-green stage, centred message, real app on a laptop and a phone ---------- */
.hero2 { position: relative; isolation: isolate; color: #FFFFFF; padding-block: clamp(56px, 7vw, 96px) 0; text-align: center; }
.hero2::before { content: ""; position: absolute; inset: 0 0 clamp(120px, 16vw, 220px) 0; z-index: -1;
  background: radial-gradient(70% 60% at 50% 0%, rgba(var(--glow), .18), rgba(var(--glow), 0) 70%),
              radial-gradient(50% 50% at 90% 80%, rgba(var(--glow-2), .55), rgba(var(--glow-2), 0) 70%),
              linear-gradient(165deg, var(--hero-start) 0%, var(--hero-mid) 55%, var(--hero-end) 100%); }
.hero2::after { content: ""; position: absolute; inset: 0 0 clamp(120px, 16vw, 220px) 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: radial-gradient(70% 80% at 50% 30%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(70% 80% at 50% 30%, #000 20%, transparent 75%); }
.hero2__in { display: grid; justify-items: center; }
.hero2__kicker { font-size: clamp(1rem, 1.3vw, 1.12rem); font-weight: 600; color: var(--mint-soft); margin-block-end: 18px; }
.hero2__title { font: 700 clamp(2.4rem, 5vw, 4.2rem)/1.04 var(--font-display); letter-spacing: -.032em; max-width: 14ch; text-wrap: balance; }
:lang(ar) .hero2__title { font-size: clamp(2.3rem, 4.8vw, 4rem); line-height: 1.3; letter-spacing: 0; font-weight: 700; }
.hero2__sub { margin-block: 20px 32px; max-width: 46ch; font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: rgba(255, 255, 255, .9); }
.hero2__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero2__primary { background: #FFFFFF; color: var(--deep); }
@media (hover: hover) and (pointer: fine) { .hero2__primary:hover { background: var(--tint-hover); } }
.hero2__ghost { color: #FFFFFF; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .06); }
@media (hover: hover) and (pointer: fine) { .hero2__ghost:hover { border-color: #FFFFFF; } }
.hero2__proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-block-start: 24px; font-size: .92rem; color: rgba(255, 255, 255, .82); }
.hero2__proof li { display: inline-flex; align-items: center; gap: 7px; }
.hero2__proof .i { width: 15px; height: 15px; color: var(--mint); }
.hero2__devices { position: relative; margin-block-start: clamp(44px, 6vw, 72px); max-width: 1160px; }
.hero2__laptop { position: relative; z-index: 1; width: 100%; border-radius: 8px; overflow: hidden; background: #F7F3EA;
  border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 50px 100px -40px rgba(var(--scrim), .7), 0 0 0 8px rgba(255, 255, 255, .08); }
.hero2__laptop img { display: block; width: 100%; height: auto; }
/* the phone overlaps the laptop's lower corner; the logo tile sits on the opposite top corner */
.hero2__phone { position: absolute; z-index: 3; bottom: -6%; inset-inline-end: 3%; width: 23%; aspect-ratio: 1 / 2; border: 8px solid var(--bezel); border-radius: 30px; overflow: hidden; background: #F7F3EA;
  box-shadow: 0 40px 80px -30px rgba(var(--scrim), .75); }
.hero2__phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tile.tile--hero2 { top: -34px; inset-inline-start: -26px; width: 92px; height: 92px; z-index: 4; }
.tile--hero2 .tile__face { border-radius: 24px; }
/* below the two-column hero the frame spans the page, so the tile sits inside the edge */
@media (max-width: 1099px) { .tile.tile--hero2 { inset-inline-start: 12px; } }
.hero2__card { position: absolute; z-index: 4; margin: 0; border-radius: 8px; overflow: hidden; text-align: start; color: var(--ink); box-shadow: 0 30px 60px -24px rgba(var(--scrim), .6), 0 0 0 1px rgba(22, 36, 60, .08); }
.hero2__wa { top: auto; bottom: -28px; inset-inline-end: 12px; width: 244px; background: var(--wa-chat); padding-block-end: 10px; display: flex; flex-direction: column; gap: 6px; }
.hero2__wa .bubble { margin-inline: 9px; font-size: .72rem; }

@media (min-width: 1100px) {
  .hero2 { display: grid; grid-template-columns: minmax(0, .66fr) minmax(0, 1fr); align-items: center; column-gap: clamp(32px, 3.5vw, 64px);
    max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); padding-bottom: 56px; text-align: start; min-height: min(100dvh, 800px); }
  .hero2::before, .hero2::after { inset: 0 calc(50% - 50vw); }
  .hero2 > .wrap { max-width: none; padding-inline: 0; margin: 0; }
  .hero2__in { justify-items: start; }
  .hero2__title { font-size: clamp(2.6rem, 3.9vw, 4rem); }
  :lang(ar) .hero2__title { font-size: clamp(2.4rem, 3.5vw, 3.6rem); }
  .hero2__ctas, .hero2__proof { justify-content: flex-start; }
  /* copy lines up with the header; the screen runs on toward the page edge (24px short of it) so it can be big */
  .hero2 > .hero2__devices { width: auto; margin-block-start: 0; max-width: none; margin-inline-end: min(0px, calc((1200px - 100vw) / 2 - 8px)); }
  .hero2 .hero2__cap { grid-column: 1 / -1; margin-block-start: 44px; color: rgba(255, 255, 255, .9); }
  .hero2__wa { inset-inline-end: -12px; }
}
.hero2__cap { margin-block: 18px 0; text-align: center; font-size: .78rem; color: var(--ink-2); }
[dir="rtl"] .hero2__laptop { margin-inline-start: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero2__laptop { animation: rise 1s var(--ease) .1s both; }
  .hero2__phone { animation: rise 1s var(--ease) .35s both; }
  .hero2__wa { animation: rise .9s var(--ease) .6s both, drift 8s ease-in-out 1.6s infinite; }
}
@media (max-width: 720px) {
  .hero2__devices { margin-block-end: 48px; }
  .hero2__phone { width: 30%; bottom: -10%; inset-inline-end: 8px; border-width: 5px; border-radius: 18px; }
  .tile.tile--hero2 { width: 56px; height: 56px; top: -24px; inset-inline-start: 8px; }
  .tile--hero2 .tile__face { border-radius: 14px; }
}

/* ---------- product film: plays only while on screen ---------- */
.film { padding-block: clamp(40px, 4vw, 64px) clamp(16px, 2vw, 32px); }
.film__title { text-align: center; margin: 0 auto 28px; }
.film__sub { max-width: 60ch; margin: -12px auto 28px; text-align: center; color: var(--ink-2); font-size: 1.08rem; }
.film__frame { position: relative; max-width: 1120px; margin-inline: auto; border-radius: 8px; overflow: hidden; background: #F7F3EA; border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(var(--scrim), .45); }
.film__controls { position: absolute; z-index: 2; bottom: 14px; inset-inline-end: 14px; display: flex; gap: 8px; }
.film__controls[hidden] { display: none; }
.film__toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 6px; background: rgba(var(--scrim), .82); color: #FFFFFF; font: 600 .85rem/1 var(--font-body); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .film__toggle:hover { background: var(--darker); } }
.film__cap { margin-block-start: 14px; text-align: center; font-size: .78rem; color: var(--ink-2); }
.film__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }

/* ---------- AI receptionist on WhatsApp: a voice note becomes a booking in the calendar ---------- */
.assist { padding-block: clamp(72px, 8vw, 112px); color: #EEE7DA;
  background: radial-gradient(90% 60% at 50% 0%, rgba(var(--glow), .12), rgba(var(--glow), 0) 70%), linear-gradient(180deg, var(--dark) 0%, var(--darker) 100%); }
.assist__head { max-width: 720px; margin: 0 auto 48px; text-align: center; display: grid; justify-items: center; }
.assist__kicker { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--mint-soft); margin-block-end: 14px; }
.assist__kicker .i { width: 18px; height: 18px; }
.assist__head .h2 { color: #FFFFFF; max-width: 18ch; }
.assist__head > p:not([class]) { margin-block-start: 14px; color: rgba(238, 231, 218, .92); font-size: 1.1rem; }
.assist__plan { margin-block-start: 20px; padding: 6px 14px; border-radius: 6px; border: 1px solid rgba(var(--glow), .45); background: rgba(var(--glow), .1); color: var(--mint-soft); font-size: .88rem; font-weight: 600; }
.assist__stage { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 360px); justify-content: center; align-items: start; gap: clamp(24px, 4vw, 48px); }
.assist__phone { margin: 0; width: 100%; color: var(--ink); border-color: var(--bezel); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .8); }
.assist__bar { gap: 10px; }
.assist__who { display: grid; line-height: 1.2; }
.assist__who small { font-weight: 500; font-size: .72rem; opacity: .8; }
.assist__ai { margin-inline-start: auto; padding: 3px 8px; border-radius: 4px; background: rgba(255, 255, 255, .18); font-size: .7rem; font-weight: 700; white-space: nowrap; }
.assist__phone .chat { gap: 8px; }
.assist__phone .bubble { font-size: .84rem; max-width: 86%; }
.assist__turn { display: grid; }
.assist__turn--p { justify-items: end; }
.assist__turn--c { justify-items: start; }
.assist__turn > * { grid-area: 1 / 1; }
.assist__turn--p .assist__heard { grid-area: 2 / 1; }
.assist__voice { display: flex; align-items: center; gap: 8px; min-width: 220px; }
.assist__play { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--wa-ink); color: #FFFFFF; flex: none; }
.assist__play .i { width: 13px; height: 13px; }
.assist__wave { display: flex; align-items: center; gap: 2px; height: 20px; flex: 1; }
.assist__wave i { width: 3px; height: calc(var(--h) * 1px); border-radius: 2px; background: rgba(19, 122, 61, .55); }
.assist__len { font-size: .72rem; font-weight: 600; opacity: .7; }
.assist__voice .bubble__time { margin: 0; align-self: flex-end; }
.assist__heard { max-width: 86%; margin-block-start: 4px; font-size: .74rem; font-style: italic; color: var(--ink-2); text-align: end; }
.assist__typing { display: inline-flex; gap: 4px; align-self: start; padding: 10px 12px; border-radius: 12px; border-start-start-radius: 4px; background: var(--surface); opacity: 0; }
.assist__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-2); opacity: .5; }
.assist__cal { padding: 22px; border-radius: 8px; background: var(--surface); color: var(--ink); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.assist__fill { display: grid; }
.assist__fill > * { grid-area: 1 / 1; }
.assist__cal .slot__b--live em { display: flex; }
.assist__sync { display: flex; align-items: center; gap: 8px; margin-block-start: 4px; padding: 10px 12px; border-radius: 6px; background: var(--wa-soft); color: var(--wa-ink); font-size: .82rem; font-weight: 600; }
.assist__sync .i { width: 16px; height: 16px; }
.assist__cap { margin-block-start: 18px; text-align: center; font-size: .78rem; color: rgba(238, 231, 218, .82); }
.assist__proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 32px; margin-block-start: 44px; }
.assist__proof li { display: flex; gap: 12px; padding-block-start: 16px; border-block-start: 1px solid rgba(255, 255, 255, .16); color: rgba(238, 231, 218, .82); font-size: .95rem; }
.assist__proof b { display: block; color: #FFFFFF; font-size: 1.05rem; margin-block-end: 4px; }
.assist__proof .i { flex: none; width: 22px; height: 22px; color: var(--mint); margin-block-start: 2px; }
/* Plays once when the stage comes into view. Every element keeps its space from the start (opacity only),
   so nothing moves the page. Without motion, the finished conversation is shown as is. */
@media (prefers-reduced-motion: no-preference) {
  .js .assist__stage .assist__turn > .bubble, .js .assist__stage .assist__heard { opacity: 0; }
  .js .assist__stage.in .assist__turn--p > .bubble, .js .assist__stage.in .assist__heard { animation: fade-in .35s var(--ease) forwards; animation-delay: calc(.4s + var(--d) * 1.1s); }
  .js .assist__stage.in .assist__turn--c > .assist__typing { animation: typing 1s ease forwards; animation-delay: calc(-.35s + var(--d) * 1.1s); }
  .js .assist__stage.in .assist__turn--c > .bubble { animation: fade-in .35s var(--ease) forwards; animation-delay: calc(.4s + var(--d) * 1.1s); }
  .js .assist__stage.in .assist__typing i { animation: dot 1s ease-in-out infinite; }
  .js .assist__stage.in .assist__typing i:nth-child(2) { animation-delay: .15s; } .js .assist__stage.in .assist__typing i:nth-child(3) { animation-delay: .3s; }
  .js .assist__stage .slot__b--live, .js .assist__stage .assist__sync { opacity: 0; }
  .js .assist__stage.in .slot__b--live, .js .assist__stage.in .assist__sync { animation: fade-in .5s var(--ease) forwards 6.1s; }
  .js .assist__stage.in .slot__b--free:first-child { animation: fade-out .5s var(--ease) forwards 6.1s; }
}
@keyframes fade-in { to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes typing { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dot { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (max-width: 860px) { .assist__stage { grid-template-columns: minmax(0, 380px); } .assist__proof { grid-template-columns: 1fr; } }

/* ---------- what's inside (tabs) ---------- */
.inside { padding-block: clamp(64px, 7vw, 96px); }
.xp__tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-block-end: 28px; }
.xp__tabs [role="tab"] { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-weight: 600; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .xp__tabs [role="tab"]:hover { color: var(--ink); border-color: var(--ink-2); } }
.xp__tabs [aria-selected="true"], .xp__tabs [aria-selected="true"]:hover { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.xp__tabs .i { width: 18px; height: 18px; }
.xp__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(24px, 3vw, 40px); border-radius: var(--r); border: 1px solid var(--line); background: var(--beige); }
.xp__panel[hidden] { display: none; }
.no-js .xp__panel[hidden], html:not(.js) .xp__panel[hidden] { display: grid; margin-block-start: 16px; }
.xp__list { display: grid; gap: 18px; }
.xp__list li { position: relative; padding-inline-start: 22px; color: var(--ink-2); }
.xp__list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.xp__list b { display: block; color: var(--ink); font-size: 1.05rem; margin-block-end: 2px; }
.xp__visual--mock { padding: 22px; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); }
.xp__note { margin-block-start: 10px; font-size: .78rem; color: var(--ink-2); text-align: end; }
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: var(--surface); }
.shotset > img { max-height: none; }
.shotset__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-block-start: 10px; align-items: start; }
.shotset__row img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--surface); }
.shot figcaption { margin-block-start: 10px; font-size: .78rem; color: var(--ink-2); text-align: end; }
.kit--static li b { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.kit--static li b small { color: var(--ink-2); font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .js .xp__panel:not([hidden]) { animation: rise .5s var(--ease); }
}

/* ---------- one feature, one screen: copy beside a single framed screenshot ---------- */
.feature { padding-block: clamp(64px, 7vw, 104px); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.feature__kicker { font-size: .85rem; font-weight: 700; color: var(--brand); margin-block-end: 12px; }
.feature__copy > p:not(.feature__kicker) { margin-block-start: 14px; color: var(--ink-2); font-size: 1.1rem; max-width: 44ch; }
.feature__points { display: grid; gap: 12px; margin-block-start: 26px; }
.feature__points li { display: flex; gap: 12px; align-items: center; font-weight: 600; }
.feature__points .i { width: 20px; height: 20px; color: var(--brand); }
.feature__shot { margin: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 40px 80px -40px rgba(var(--scrim), .45); }
.feature__shot img { display: block; width: 100%; height: auto; }
.feature__shot figcaption { padding: 10px 14px; border-block-start: 1px solid var(--line); font-size: .78rem; color: var(--ink-2); }

/* ---------- secret bonuses ---------- */
.bonus { padding-block: clamp(64px, 7vw, 96px); }
.bonus__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lock { position: relative; display: grid; gap: 14px; align-content: start; min-height: 190px; padding: 26px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.lock__n { font: 700 1rem/1 var(--font-body); color: var(--ink-2); }
.lock p { font: 600 1.15rem/1.35 var(--font-display); color: var(--ink); max-width: 22ch; }
.lock__tag { margin-block-start: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; color: var(--brand); }
.lock__tag .i { width: 15px; height: 15px; transition: transform .3s var(--ease); }
@media (hover: hover) and (pointer: fine) { .lock:hover .lock__tag .i { transform: rotate(-12deg) translateY(-2px); } }

.sec-head--center p { margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- book a demo: dark green band, white form card (prices are given on the call) ---------- */
.demo { padding-block: clamp(64px, 7vw, 104px); color: #FFFFFF;
  background: radial-gradient(70% 90% at 90% 10%, rgba(var(--glow-2), .45), rgba(var(--glow-2), 0) 70%), linear-gradient(160deg, var(--dark) 0%, var(--darker) 100%); }
.demo__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(32px, 5vw, 72px); align-items: center; }
.demo__copy .h2 { color: #FFFFFF; }
.demo__copy > p { margin-block-start: 14px; max-width: 48ch; font-size: 1.1rem; color: rgba(255, 255, 255, .82); }
.demo__why { display: grid; gap: 18px; margin-block: 32px; }
.demo__why li { display: flex; gap: 14px; align-items: flex-start; color: rgba(255, 255, 255, .75); }
.demo__why b { display: block; color: #FFFFFF; }
.demo__why .i { flex: none; width: 22px; height: 22px; margin-block-start: 2px; color: var(--mint); }
.demo__direct { color: rgba(255, 255, 255, .75); }
.demo__direct a { display: inline-flex; align-items: center; min-height: 44px; color: #FFFFFF; font-weight: 600; }
.demo__form { display: grid; gap: 14px; padding: clamp(24px, 3vw, 36px); border-radius: var(--r); background: var(--surface); color: var(--ink); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); }
.demo__form h3 { font-size: 1.35rem; margin-block-end: 4px; }
.demo__form label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.demo__form small { font-weight: 500; color: var(--ink-2); }
.demo__form input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-in); background: var(--ground); color: var(--ink); font: 400 1rem/1.2 var(--font-body); }
.demo__form input:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
[dir="rtl"] .demo__form input[dir="ltr"] { text-align: right; }
.demo__form .btn { margin-block-start: 6px; width: 100%; }
.demo__note { font-size: .85rem; color: var(--ink-2); text-align: center; }
@media (max-width: 960px) { .demo__in { grid-template-columns: 1fr; } }

/* ---------- faq ---------- */
.faq { padding-block: clamp(64px, 7vw, 96px); display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; align-items: start; }
.faq__list details { border-bottom: 1px solid var(--line); }
.faq__list details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 22px; font: 600 1.12rem/1.35 var(--font-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-block-end: 22px; color: var(--ink-2); max-width: 62ch; }

/* ---------- close ---------- */
.close { position: relative; padding-block: clamp(88px, 10vw, 140px); color: #F4EEE2; isolation: isolate; overflow: hidden;
  background: radial-gradient(60% 80% at 85% 20%, rgba(var(--glow-2), .45), rgba(var(--glow-2), 0) 70%), linear-gradient(160deg, var(--dark) 0%, var(--darker) 100%); }
.close::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(var(--scrim), .9) 0%, rgba(var(--scrim), .72) 45%, rgba(var(--scrim), .35) 100%); }
[dir="rtl"] .close::before { background: linear-gradient(270deg, rgba(var(--scrim), .9) 0%, rgba(var(--scrim), .72) 45%, rgba(var(--scrim), .35) 100%); }
.close__in { text-align: start !important; max-width: 1200px; }
.close__in .display { color: #FFFFFF; margin-inline: 0 !important; }
.close__in p { color: rgba(244, 238, 226, .85) !important; margin-inline: 0 !important; }
.close__in a:not(.btn) { color: #FFFFFF; }
.close .tile--sm { margin: 0 0 28px; }
.close .btn--action { background: #FFFFFF; color: var(--deep); }
@media (hover: hover) and (pointer: fine) { .close .btn--action:hover { background: var(--tint-hover); } }
.close__in { text-align: center; }
.close__in .display { max-width: 16ch; margin-inline: auto; }
.close__in p { margin: 18px auto 32px; color: var(--ink-2); max-width: 48ch; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding-block: 32px 40px; font-size: .92rem; color: var(--ink-2); }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.foot .brand { color: var(--ink); font-size: 1.05rem; }
.foot .brand img { width: 34px; height: 34px; }
.foot nav { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 20px; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; }
.foot nav a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot nav a:hover { color: var(--ink); } }

/* ---------- reveal (only when JS is running; content is visible without it) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .js [data-reveal].in { opacity: 1; transform: none; }
  .js .bonus__grid [data-reveal]:nth-child(3n+2) { transition-delay: .08s; }
  .js .bonus__grid [data-reveal]:nth-child(3n) { transition-delay: .16s; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__menu { display: inline-flex; }
}
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  .hero__copy { max-width: none; }
  .stage { max-width: 640px; width: 100%; margin-inline: auto; }
  .stats ul { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .stats li:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .faq { grid-template-columns: 1fr; }
  .xp__panel { grid-template-columns: 1fr; }
  .feature { grid-template-columns: 1fr; }
  .bonus__grid { grid-template-columns: 1fr 1fr; }

  /* Phone: the product panel sticks under the nav; the rail + green marker run beside the steps below it.
     --jline (set by landing.js) is the panel's bottom edge, so the active step always starts in view. */
  .journey__grid { grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; }
  .journey__rail { grid-row: 2; grid-column: 1; }
  .steps { grid-row: 2; grid-column: 2; }
  .journey__marker { top: calc(var(--jline, 60vh) + 20px); width: 24px; height: 29px; }
  .panel { grid-row: 1; grid-column: 1 / -1; top: var(--nav-h); z-index: 2; margin-block-end: 8px; padding-block: 8px 14px; background: var(--beige); box-shadow: 0 -40px 0 var(--beige); }
  .panel__in { height: 300px; }
  .panel__note { display: none; }
  .state { padding: 16px; }
  .state--chat { padding: 0; }
  .panel__in { height: 340px; }
  .step { min-height: max(260px, calc(100svh - var(--jline, 440px))); padding-block: 20px 28px; }
  .step:last-child { min-height: max(260px, calc(100svh - var(--jline, 440px))); }
}
@media (max-width: 720px) {
  .bonus__grid { grid-template-columns: 1fr; }
  .xp__tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * clamp(16px, 4vw, 32px)); padding-inline: clamp(16px, 4vw, 32px); scrollbar-width: none; }
  .xp__tabs [role="tab"] { flex: none; }
  .nav__sign { display: none; }
  .nav__end { gap: 14px; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .cal { padding: 14px 12px 16px; }
  .cal__head { flex-wrap: wrap; justify-content: flex-start; gap: 6px 10px; padding-inline-end: 92px; }
  .tile { width: 56px; height: 56px; top: -22px; inset-inline-start: -6px; }
  .browser__bar span { padding-inline: 14px; }
  .browser__bar { height: 30px; }
  .tile__face { border-radius: 16px; }
  .cal__cols { height: 360px; gap: 5px; grid-template-columns: 30px repeat(3, 1fr); }
  .cal__cols::before { inset-inline-start: 30px; }
  [dir="rtl"] .cal__cols::before { inset: 44px 30px 0 0; }
  .appt { padding: 4px 5px; font-size: .64rem; }
  .appt__ok { display: flex; margin: 2px 0 0; }
  .cal__prayer { inset-inline-start: 35px; }
  .stage { aspect-ratio: 1 / 1.05; }
  .stage__wa { width: 58%; }
  .stage__alert { width: 78%; }
  .tile--hero { width: 56px; height: 56px; }

  .appt { font-size: 0; }
  .appt i, .appt__ok { font-size: .66rem; }

  .brand span { display: none; }
  .lock { padding: 24px; }
  .xp__panel { padding: 18px; }
}
/* 360px phones: logo, language, menu and the trial button must all fit on one row (the Arabic button is the widest) */
@media (max-width: 420px) {
  .nav__in { gap: 12px; }
  .nav__end { gap: 8px; }
  .nav .btn--sm { padding: 0 12px; font-size: .9rem; }
}