/* Swalfy marketing site — "majlis at night" redesign (Fable art direction,
 * 2026-08-11 spec). Dark-luxe, teal-night ground, one lit object (the phone).
 * Self-hosted fonts, no framework, vanilla JS (~2 IntersectionObservers).
 * RTL is first-class: every positioning rule uses logical properties.
 */

/* ============================== FONTS ============================== */
/* Alexandria: display (600/700/800). Zain: UI/body (300/400/700). Reem Kufi:
 * AR eyebrows only (500). Noto Nastaliq Urdu: showcase Urdu bubbles only,
 * font-display:optional so its large file never blocks LCP. Each split into
 * latin/arabic faces by unicode-range per spec §F so a page never downloads
 * the other script's outlines. */
@font-face {
  font-family: "Alexandria";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/alexandria-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Alexandria";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/alexandria-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Alexandria";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/alexandria-latin-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Alexandria";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/alexandria-arabic-600.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Alexandria";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/alexandria-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Alexandria";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/alexandria-arabic-800.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Zain";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/zain-latin-300.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Zain";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/zain-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Zain";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/zain-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Zain";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/zain-arabic-300.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Zain";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/zain-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Zain";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/zain-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Reem Kufi";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/reemkufi-arabic-500.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Noto Nastaliq Urdu";
  font-style: normal;
  font-weight: 400;
  font-display: optional; /* large file (~155KB); showcase-only, must never gate LCP */
  src: url("/fonts/nastaliq-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* ============================== TOKENS ============================== */
:root {
  /* ground */
  --swalfy-night: #061412;
  --swalfy-night-2: #0b211e;
  --swalfy-surface: #11302c;
  --swalfy-line: #1e4a45; /* decorative hairlines ONLY — 1.90:1, never a UI border */
  --swalfy-line-ui: #4a9089; /* interactive control borders — 5.05:1 on night */

  /* brand (fills only on dark — see teal note below) */
  --swalfy-teal: #0f766e; /* 3.44:1 on night — NEVER text on dark, fill only */
  --swalfy-teal-deep: #134e4a;
  --swalfy-teal-bright: #14b8a6;

  /* accents */
  --swalfy-glow: #2dd4bf;
  --swalfy-brass: #c9a063;
  --swalfy-sand: #e8d5b5;
  --swalfy-cream: #f5ede0;
  --swalfy-muted: #a8beb9;
  --swalfy-muted-2: #8aa39e;

  /* the lit screen */
  --wa-paper: #ede4d8;
  --wa-in: #ffffff;
  --wa-out: #cff3ea;
  --wa-ink: #15201e;
  --wa-time: #526b67;

  /* dispositions */
  --disp-booked: #34d399;
  --disp-booked-ink: #04241b;
  --disp-lead: #14b8a6;
  --disp-needs-you: #f59e0b;
  --disp-needs-you-ink: #241503;
  --disp-answered: #8aa39e;

  /* fonts */
  --font-display: "Alexandria", ui-sans-serif, system-ui, sans-serif;
  --font-ui: "Zain", ui-sans-serif, system-ui, sans-serif;
  --font-urdu: "Noto Nastaliq Urdu", "Zain", serif;
  --font-accent: "Reem Kufi", var(--font-display), sans-serif;

  --page-pad: 40px;
  --container-w: 1200px;
}

@media (max-width: 859px) {
  :root {
    --page-pad: 20px;
  }
}

/* ============================== RESET ============================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--swalfy-night);
  color: var(--swalfy-cream);
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  position: relative;
}
img,
svg {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}
ul,
ol {
  padding-inline-start: 0;
  list-style: none;
}
button {
  font: inherit;
}

/* grain — fixed full-viewport feTurbulence overlay, A4 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- focus ---- */
:focus-visible {
  outline: 2px solid var(--swalfy-brass);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- skip link ---- */
.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -3rem;
  background: var(--swalfy-teal-deep);
  color: var(--swalfy-cream);
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  z-index: 100;
  transition: inset-block-start 0.15s ease;
}
.skip-link:focus {
  inset-block-start: 1rem;
}

/* ============================== LAYOUT ============================== */
.wrap {
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}
section {
  position: relative;
}
.bg-night {
  background: var(--swalfy-night);
}
.bg-night-2 {
  background: var(--swalfy-night-2);
}

/* ============================== SADU RULE ============================== */
/* Section divider — real weave geometry (brass zigzag + alternating teal/sand
 * diamonds), used EXACTLY three times per page (above showcase, above
 * pricing, above footer). Decorative only — aria-hidden. */
.sadu-rule {
  height: 22px;
  opacity: 0.85;
  background-repeat: repeat-x;
  background-size: 96px 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='22' viewBox='0 0 96 22'%3E%3Cpath d='M0 5 L12 0 L24 5 L36 0 L48 5 L60 0 L72 5 L84 0 L96 5' fill='none' stroke='%23C9A063' stroke-width='1.5'/%3E%3Cpath d='M0 17 L12 22 L24 17 L36 22 L48 17 L60 22 L72 17 L84 22 L96 17' fill='none' stroke='%23C9A063' stroke-width='1.5'/%3E%3Cg fill='%230F766E'%3E%3Cpath d='M12 6 l7 5 -7 5 -7 -5 Z'/%3E%3Cpath d='M36 6 l7 5 -7 5 -7 -5 Z'/%3E%3Cpath d='M60 6 l7 5 -7 5 -7 -5 Z'/%3E%3Cpath d='M84 6 l7 5 -7 5 -7 -5 Z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23E8D5B5' stroke-width='1.2'%3E%3Cpath d='M24 6 l7 5 -7 5 -7 -5 Z'/%3E%3Cpath d='M48 6 l7 5 -7 5 -7 -5 Z'/%3E%3Cpath d='M72 6 l7 5 -7 5 -7 -5 Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ============================== EYEBROW ============================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--swalfy-sand);
  margin-block-end: 22px;
}
.eyebrow::before {
  content: "";
  width: 30px;
  height: 9px;
  flex-shrink: 0;
  background: var(--swalfy-brass);
  clip-path: polygon(0 50%, 12.5% 0, 25% 50%, 37.5% 0, 50% 50%, 62.5% 0, 75% 50%, 87.5% 0, 100% 50%, 87.5% 100%, 75% 50%, 62.5% 100%, 50% 50%, 37.5% 100%, 25% 50%, 12.5% 100%, 0 100%);
}
/* AR eyebrows use Reem Kufi — its "one job" (B4). EN eyebrows stay Zain 700.
 * (Fable fix L) letter-spacing was dead here — the global
 * `[lang="ar"] { letter-spacing: 0 !important; }` rule always wins over it
 * regardless of this selector's specificity or source order. Removed rather
 * than left as a corpse. */
[lang="ar"] .eyebrow {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 13px;
}

/* ============================== HEADER (C0) ============================== */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  padding-block: 22px;
  background: transparent;
  transition: background 0.2s ease, backdrop-filter 0.2s ease, border-color 0.2s ease;
  border-block-end: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(6, 20, 18, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block-end-color: var(--swalfy-line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--swalfy-cream);
}
.brand img {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.brand-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.02em;
}
[lang="ar"] .brand-word {
  font-size: 20px;
  letter-spacing: 0;
}
.nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav-link {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--swalfy-muted);
  text-decoration: none;
}
.nav-link:hover {
  color: var(--swalfy-cream);
}
.lang-pill {
  border: 1px solid var(--swalfy-line-ui);
  border-radius: 999px;
  padding: 7px 16px;
  color: var(--swalfy-sand);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.lang-pill:hover {
  background: var(--swalfy-surface);
}
/* the header nav links hide on mobile — language pill + mark stay */
@media (max-width: 859px) {
  .nav-link {
    display: none;
  }
}

/* ============================== TYPE SCALE ============================== */
h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 76px;
  line-height: 0.99;
  letter-spacing: -0.035em;
  margin: 0 0 24px;
}
h1 .glow-line {
  color: var(--swalfy-glow);
  display: block;
}
h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 46px;
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}
h2 .glow-line {
  color: var(--swalfy-glow);
}
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.lede {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 19px;
  line-height: 1.72;
  color: var(--swalfy-muted);
  margin: 0;
}
p,
.body-text {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.8;
  color: var(--swalfy-muted);
}
.small,
.caption {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  color: var(--swalfy-muted-2);
}
@media (max-width: 859px) {
  h1 {
    font-size: 40px;
    line-height: 1.06;
    letter-spacing: -0.02em;
  }
  h2 {
    font-size: 30px;
    line-height: 1.12;
    letter-spacing: -0.02em;
  }
  h3 {
    font-size: 19px;
  }
  .lede {
    font-size: 17px;
  }
  p,
  .body-text {
    font-size: 16px;
  }
  .small,
  .caption {
    font-size: 13.5px;
  }
  .eyebrow {
    font-size: 11.5px;
  }
}

/* Arabic overrides — applied globally on the AR page (B5). Negative tracking
 * breaks letter joining; Arabic needs looser leading for ascenders/descenders.
 * (Fable fix A) font-size was `.94em`, which resolves against the PARENT's
 * computed font-size (h1/h2's own competing rule doesn't count — `em` on
 * `font-size` never does), not against 76px/46px as intended. Since neither
 * h1 nor h2 has a parent with a large font-size set, this collapsed AR
 * headlines to roughly body-text size. Explicit px instead. Declared after
 * the mobile media query above so these — being a more specific selector —
 * still win at both breakpoints; the mobile sizes are set here too so the
 * cascade order doesn't matter. */
[lang="ar"],
[dir="rtl"] {
  letter-spacing: 0 !important;
}
[lang="ar"] h1 {
  font-size: 71px;
  /* (Fable re-verify) 1.28 let the yaa subscript dots of "يكتفي" (hero line 1)
   * descend onto line 2's "لك" — bench-tested at 72px: 1.28 collides, 1.34
   * marginal, 1.42 first clean. Set with headroom above that floor. */
  line-height: 1.45;
}
[lang="ar"] h2 {
  font-size: 43px;
  line-height: 1.45;
}
[lang="ar"] .lede,
[lang="ar"] p {
  line-height: 1.92;
}
@media (max-width: 859px) {
  [lang="ar"] h1 {
    font-size: 38px;
  }
  [lang="ar"] h2 {
    font-size: 28px;
  }
}

/* ============================== BUTTONS ============================== */
.btn-primary {
  display: inline-block;
  background: var(--swalfy-glow);
  color: #04100e;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  padding: 15px 28px;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.btn-primary:hover {
  background: var(--swalfy-teal-bright);
}
.btn-secondary {
  color: var(--swalfy-sand);
  font-family: var(--font-ui);
  font-size: 16px;
  text-decoration: none;
  border-block-end: 1px solid var(--swalfy-brass);
  padding-block-end: 3px;
}

/* ============================== HERO (C1) ============================== */
.hero {
  padding-block-start: 96px;
  padding-block-end: 60px;
  overflow: hidden;
}
.hero .glow-1 {
  position: absolute;
  width: 900px;
  height: 640px;
  inset-inline-end: -160px;
  inset-block-start: -220px;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(20, 184, 166, 0.2), rgba(20, 184, 166, 0) 72%);
}
.hero .glow-2 {
  position: absolute;
  width: 620px;
  height: 480px;
  inset-inline-start: -200px;
  inset-block-end: -160px;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 160, 99, 0.13), rgba(201, 160, 99, 0) 72%);
}
.hero-bg {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 640px;
  z-index: 0;
  opacity: 0.12;
  object-fit: cover;
  object-position: center top;
}
.hero-scrim {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 640px;
  z-index: 0;
  background: linear-gradient(180deg, rgba(6, 20, 18, 0.35) 0%, var(--swalfy-night) 88%);
}
.hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.03fr 0.97fr;
  gap: 56px;
  align-items: center;
}
[dir="rtl"] .hero .wrap {
  grid-template-columns: 0.97fr 1.03fr;
}
.hero-copy .sub {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 19px;
  line-height: 1.72;
  color: var(--swalfy-muted);
  max-width: 465px;
  margin: 0 0 34px;
}
.hero-copy .sub b {
  color: var(--swalfy-cream);
  font-weight: 700;
}
.hero-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-trust {
  margin-block-start: 26px;
  font-size: 13.5px;
  color: var(--swalfy-muted-2);
}

/* hero right column: majlis niche + phone */
.hero-stage {
  position: relative;
  display: flex;
  justify-content: center;
}
.majlis-niche {
  position: absolute;
  inset-block-start: -90px;
  pointer-events: none;
}
.phone {
  position: relative;
  width: 330px;
  border-radius: 38px;
  background: #0e1b18;
  padding: 11px;
  box-shadow: 0 44px 90px -28px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--swalfy-line), 0 0 90px -20px rgba(20, 184, 166, 0.3);
  transform: rotate(-1.5deg);
}
[dir="rtl"] .phone {
  transform: rotate(1.5deg);
}
.phone-screen {
  background: var(--wa-paper);
  border-radius: 29px;
  overflow: hidden;
}
.wa-top {
  background: var(--swalfy-teal-deep);
  color: #fff;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  direction: ltr; /* phone interior never mirrors — F block */
}
.wa-av {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: var(--swalfy-sand);
  flex-shrink: 0;
}
.wa-name {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14.5px;
  display: block;
}
.wa-status {
  font-size: 11px;
  opacity: 0.85;
}
.wa-thread {
  padding: 14px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  direction: ltr;
  background-image: radial-gradient(rgba(15, 118, 110, 0.08) 1px, transparent 1px);
  background-size: 15px 15px;
}
.msg {
  max-width: 80%;
  padding: 8px 11px;
  font-family: var(--font-ui);
  font-size: 14.5px;
  line-height: 1.55;
  border-radius: 15px;
  color: var(--wa-ink);
  position: relative;
}
/* Bubble sides (spec C4, get this right): customer = outgoing = right/teal-tint;
 * Swalfy = incoming = left/white. Physical properties on purpose — the phone
 * interior never mirrors, even on the AR page (F block). */
.msg-in {
  background: var(--wa-in);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.msg-out {
  background: var(--wa-out);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.msg[dir="rtl"] {
  text-align: right;
}
.msg.ur {
  font-family: var(--font-urdu);
  line-height: 2.35;
  font-size: 13.5px;
}
.msg-time {
  font-size: 10.5px;
  color: var(--wa-time);
  display: block;
  text-align: end;
  margin-top: 3px;
}
.vn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 190px;
}
.vn-play {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--swalfy-teal);
  flex-shrink: 0;
  position: relative;
}
.vn-play::after {
  content: "";
  position: absolute;
  inset-inline-start: 10px;
  inset-block-start: 7px;
  border-inline-start: 7px solid #fff;
  border-block-start: 5px solid transparent;
  border-block-end: 5px solid transparent;
}
.vn-wf {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 22px;
}
.vn-wf i {
  flex: 1;
  background: #8fb8b2;
  border-radius: 2px;
  font-style: normal;
}
.wa-chip {
  align-self: center;
  background: var(--disp-booked);
  color: var(--disp-booked-ink);
  font-size: 11px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: 0.03em;
  margin-top: 2px;
}

/* floating annotation cards (hero — smaller variant) */
.float-card {
  position: absolute;
  background: linear-gradient(180deg, #0e2a26, #0a211e);
  border: 1px solid var(--swalfy-line-ui);
  border-radius: 14px;
  padding: 10px 13px;
  font-size: 12.5px;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.7);
  max-width: 210px;
}
.float-card .k {
  color: var(--swalfy-brass);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 3px;
}
.float-card .n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  color: var(--swalfy-glow);
  display: block;
}
.float-card .muted {
  color: var(--swalfy-muted);
}
.hero-float-1 {
  inset-inline-start: -74px;
  inset-block-start: 120px;
}
[dir="rtl"] .hero-float-1 {
  inset-inline-start: auto;
  inset-inline-end: -74px;
}
.hero-float-2 {
  /* (Fable fix I) -56px bled the card past the .wrap edge at 1280 (40px page
   * padding leaves no room for a 56px overhang). Pulled inside. */
  inset-inline-end: 8px;
  inset-block-end: 96px;
}
[dir="rtl"] .hero-float-2 {
  inset-inline-end: auto;
  inset-inline-start: 8px;
}

@media (max-width: 859px) {
  .hero {
    padding-block-start: 48px;
  }
  .hero .wrap {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  [dir="rtl"] .hero .wrap {
    grid-template-columns: 1fr;
  }
  .float-card {
    display: none; /* hero floats are a desktop flourish; the showcase carries the proof on mobile */
  }
  .majlis-niche {
    display: none;
  }
  .phone {
    width: 260px;
  }
}

/* ============================== PROBLEM (C2) ============================== */
.problem {
  padding-block: 90px;
}
.problem .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
[dir="rtl"] .problem .wrap {
  grid-template-columns: 1fr 1fr;
}
.problem-copy {
  max-width: 640px;
  grid-column: 1;
}
[dir="rtl"] .problem-copy {
  grid-column: 2;
}
.problem-copy p {
  margin-block-end: 20px;
}
.problem-copy p:last-child {
  margin-block-end: 0;
}
.problem-art {
  grid-column: 2;
  position: relative;
  /* (Fable fix E) uncapped, this column ran ~715px tall against a copy
   * column of ~500px of actual content at 1280 — a bare void beneath the
   * text. Capping the art's width (height follows via the 4:5 ratio) closes
   * most of the gap without touching the grid's alignment behavior. */
  max-width: 460px;
  margin-inline-start: auto;
}
[dir="rtl"] .problem-art {
  grid-column: 1;
  margin-inline-start: 0;
  margin-inline-end: auto;
}
.problem-art img {
  width: 100%;
  /* (Fable re-verify, item 3 root cause) the HTML width/height attributes
   * (1000x1333, for CLS prevention) map to an implicit CSS height that this
   * rule never overrode — aspect-ratio only fills a MISSING dimension, and
   * with an attribute-derived height already present, it had nothing to
   * compute. The img rendered at its raw 1333px intrinsic height instead of
   * 575px (460 * 5/4), which was the real source of Fable's ~670px empty
   * copy-column gap at 1280 — not the grid/alignment itself. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  clip-path: url(#majlis-arch);
}
.problem-art .arch-stroke {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pull-stat {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 46px;
  color: var(--swalfy-glow);
  line-height: 1.1;
  margin-block-start: 44px;
  max-width: 320px;
}
@media (max-width: 859px) {
  .problem {
    padding-block: 56px;
  }
  .problem .wrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  [dir="rtl"] .problem .wrap {
    grid-template-columns: 1fr;
  }
  .problem-copy,
  .problem-art,
  [dir="rtl"] .problem-copy,
  [dir="rtl"] .problem-art {
    grid-column: 1;
  }
  .problem-art {
    max-width: 280px;
    margin-inline: auto;
  }
  .pull-stat {
    font-size: 32px;
  }
}

/* ============================== SHOWCASE (C4) ============================== */
.showcase {
  padding-block: 70px 90px;
}
.showcase-head {
  max-width: 640px;
  margin-block-end: 44px;
}
.showcase-stage-wrap {
  position: relative;
}
.showcase-stage {
  position: static;
  display: grid;
  grid-template-columns: 1fr 420px 1fr;
  align-items: center;
  gap: 0;
  min-height: 0;
}
.showcase-archwrap {
  position: absolute;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inset-block-start: -10px;
  pointer-events: none;
}
[dir="rtl"] .showcase-archwrap {
  transform: translateX(50%);
}
.showcase-phone {
  grid-column: 2;
  position: relative;
  width: 352px;
  justify-self: center;
  border-radius: 40px;
  background: #0e1b18;
  padding: 11px;
  box-shadow: 0 50px 100px -30px #000, 0 0 0 1px var(--swalfy-line), 0 0 110px -18px rgba(20, 184, 166, 0.34);
  transform: rotate(-1.5deg);
}
[dir="rtl"] .showcase-phone {
  transform: rotate(1.5deg);
}
.showcase-phone .phone-screen {
  border-radius: 31px;
}
.showcase-phone .wa-thread {
  padding: 15px 13px 17px;
  gap: 10px;
}
.showcase-phone .msg {
  max-width: 82%;
  padding: 9px 12px;
  font-size: 14.5px;
}
.showcase-phone .vn {
  width: 206px;
}
.showcase-phone .vn-play {
  width: 28px;
  height: 28px;
}
.showcase-phone .wa-chip {
  font-size: 11.5px;
}

/* owner-view annotation cards (bigger variant, showcase only) */
.ann-card {
  position: absolute;
  background: linear-gradient(180deg, #0e2a26, #0a211e);
  border: 1px solid var(--swalfy-line-ui);
  border-radius: 16px;
  padding: 13px 15px;
  box-shadow: 0 26px 54px -20px rgba(0, 0, 0, 0.85);
  width: 284px;
}
.ann-card .k {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--swalfy-brass);
  display: block;
  margin-bottom: 7px;
}
.ann-card .src {
  font-size: 14px;
  direction: rtl;
  text-align: right;
  color: var(--swalfy-cream);
  margin-bottom: 6px;
  font-family: var(--font-ui);
}
.ann-card .en {
  font-size: 13.5px;
  color: var(--swalfy-muted);
  line-height: 1.5;
}
.ann-1 {
  inset-inline-start: 0;
  inset-block-start: 64px;
}
.ann-2 {
  inset-inline-end: 0;
  inset-block-start: 236px;
}
.ann-3 {
  inset-inline-end: 14px;
  inset-block-end: 44px;
  width: 230px;
}
[dir="rtl"] .ann-1 {
  inset-inline-start: auto;
  inset-inline-end: 0;
}
[dir="rtl"] .ann-2 {
  inset-inline-end: auto;
  inset-inline-start: 0;
}
[dir="rtl"] .ann-3 {
  inset-inline-end: auto;
  inset-inline-start: 14px;
}
.ann-3 .n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  color: var(--swalfy-glow);
  line-height: 1;
  display: block;
}
.ann-3 .lb {
  font-size: 13px;
  color: var(--swalfy-muted-2);
}
.wire {
  position: absolute;
  border-block-start: 1px dashed #3e7d75;
  height: 0;
}
.wire-1 {
  inset-inline-start: 284px;
  inset-block-start: 112px;
  width: 104px;
}
.wire-2 {
  inset-inline-end: 284px;
  inset-block-start: 284px;
  width: 104px;
}
[dir="rtl"] .wire-1 {
  inset-inline-start: auto;
  inset-inline-end: 284px;
}
[dir="rtl"] .wire-2 {
  inset-inline-end: auto;
  inset-inline-start: 284px;
}

/* waypoints only matter for the desktop scroll-driven version */
.wp {
  display: none;
}

/* mobile: stack the annotation cards under the phone as a normal list */
.ann-stack {
  display: none;
}

@media (max-width: 859px) {
  .showcase-stage {
    display: block;
  }
  .showcase-archwrap {
    display: none;
  }
  .showcase-phone {
    width: 300px;
    margin-inline: auto;
    transform: none;
  }
  .ann-card {
    display: none; /* absolute-positioned desktop cards hidden; stacked list below instead */
  }
  .wire {
    display: none;
  }
  .ann-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-block-start: 28px;
    max-width: 400px;
    margin-inline: auto;
  }
  .ann-stack .ann-card {
    display: block;
    position: static;
    width: auto;
  }
}

/* Desktop scroll-driven sequence — only when JS adds .js-enhanced (progressive
 * enhancement). Below 860px the sticky sequence is dropped entirely per spec;
 * gating this whole block behind the media query means even a JS-enabled
 * mobile browser never gets position:sticky here. */
@media (min-width: 860px) {
  .showcase.js-enhanced {
    height: 420vh;
  }
  .showcase.js-enhanced .showcase-stage-wrap {
    position: sticky;
    inset-block-start: 14vh;
  }
  .showcase.js-enhanced .wp {
    display: block;
    height: 80vh;
  }
  .showcase.js-enhanced [data-beat] {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1), transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .showcase.js-enhanced .ann-card[data-beat] {
    transform: translateY(10px) translateX(8px);
  }
  [dir="rtl"] .showcase.js-enhanced .ann-card[data-beat] {
    transform: translateY(10px) translateX(-8px);
  }
  .showcase.js-enhanced [data-beat].revealed {
    opacity: 1;
    transform: translateY(0) translateX(0);
  }
}

/* prefers-reduced-motion: the stage stops being sticky (handled by the media
 * query above never engaging — .js-enhanced is only added when motion is
 * allowed), and nothing here needs a transform. This block is a defensive
 * second guarantee in case .js-enhanced somehow got added regardless. */
@media (prefers-reduced-motion: reduce) {
  .showcase.js-enhanced {
    height: auto;
  }
  .showcase.js-enhanced .showcase-stage-wrap {
    position: static;
  }
  .showcase.js-enhanced [data-beat] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================== OUTCOMES (C5) ============================== */
.outcomes {
  padding-block: 90px;
}
.outcomes-panel {
  background: var(--swalfy-surface);
  border-radius: 24px;
  border: 1px solid var(--swalfy-line);
  padding: 40px;
}
.outcomes-line {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 19px;
  color: var(--swalfy-cream);
  margin-block-end: 32px;
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stat-block .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.03em;
  display: block;
}
.stat-block .lbl {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--swalfy-muted);
  margin-block-start: 6px;
  display: block;
}
.stat-bar {
  /* (Fable fix F) this is a <span> — inline by default — and `width` is
   * ignored on non-replaced inline elements per spec, so the inline
   * `style="width:N%"` on every bar was silently doing nothing. */
  display: block;
  height: 3px;
  border-radius: 2px;
  margin-block-start: 12px;
  background: currentColor;
  opacity: 0.9;
}
.stat-booked {
  color: var(--disp-booked);
}
.stat-lead {
  color: var(--disp-lead);
}
.stat-needs-you {
  color: var(--disp-needs-you);
}
.stat-answered {
  color: var(--disp-answered);
}
.outcomes-note {
  margin-block-start: 24px;
  font-size: 13px;
  color: var(--swalfy-muted-2);
}
@media (max-width: 859px) {
  .outcomes {
    padding-block: 56px;
  }
  .outcomes-panel {
    padding: 24px;
    border-radius: 18px;
  }
  .stat-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .stat-block .num {
    font-size: 44px;
  }
}

/* ============================== HOW IT WORKS (C6) ============================== */
.how {
  padding-block: 90px;
}
.how-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.18;
  object-fit: cover;
}
.how-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, var(--swalfy-night-2) 0%, rgba(11, 33, 30, 0.55) 40%, var(--swalfy-night-2) 100%);
}
.how .wrap {
  position: relative;
  z-index: 1;
}
.how-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-block-start: 44px;
}
.how-step {
  padding-inline: 28px;
  border-inline-end: 1px solid var(--swalfy-line);
}
.how-step:first-child {
  padding-inline-start: 0;
}
.how-step:last-child {
  border-inline-end: none;
}
.how-step .step-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 46px;
  color: var(--swalfy-line-ui);
  display: block;
  margin-block-end: 12px;
}
.how-step h3 {
  color: var(--swalfy-cream);
}
.how-step p {
  margin: 0;
}
@media (max-width: 859px) {
  .how {
    padding-block: 56px;
  }
  .how-steps {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .how-step {
    padding-inline: 0;
    border-inline-end: none;
    border-block-end: 1px solid var(--swalfy-line);
    padding-block-end: 24px;
  }
  .how-step:last-child {
    border-block-end: none;
    padding-block-end: 0;
  }
}

/* ============================== PRICING (C8) ============================== */
.pricing {
  padding-block: 90px;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
  margin-block-start: 44px;
}
.price-card {
  position: relative;
  background: var(--swalfy-surface);
  border: 1px solid var(--swalfy-line);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.price-card--featured {
  border-color: var(--swalfy-line-ui);
  transform: translateY(-12px);
}
.price-badge {
  /* (Fable fix D) was in normal flow, pushing Business's h3/price down by the
   * badge's own height relative to Starter/Pro — the three cards' baselines
   * never lined up. Floating it outside the flow fixes that. */
  position: absolute;
  inset-block-start: -14px;
  inset-inline-start: 32px;
  background: var(--swalfy-glow);
  color: #04100e;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 5px 14px;
  border-radius: 999px;
}
.price-card h3 {
  color: var(--swalfy-cream);
  margin-block-end: 4px;
}
.price-amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 56px;
  letter-spacing: -0.03em;
  color: var(--swalfy-cream);
  margin: 8px 0 4px;
}
.price-amount sup {
  font-size: 24px;
  font-weight: 800;
  top: -0.5em;
}
.price-amount .per {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 17px;
  color: var(--swalfy-muted);
}
.price-for {
  font-size: 14px;
  color: var(--swalfy-muted-2);
  margin-block-end: 20px;
}
.price-card ul {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 15px;
  color: var(--swalfy-muted);
}
.price-card li {
  padding-inline-start: 24px;
  position: relative;
}
.price-card li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 4px;
  width: 14px;
  height: 14px;
  background: var(--swalfy-brass);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.pricing-footnote {
  margin-block-start: 24px;
  font-size: 14px;
  color: var(--swalfy-muted-2);
}
@media (max-width: 859px) {
  .pricing {
    padding-block: 56px;
  }
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .price-card--featured {
    transform: none;
  }
  .price-amount {
    font-size: 44px;
  }
}

/* ============================== CTA BAND (C9) ============================== */
.cta-band {
  padding-block: 100px;
  overflow: hidden;
}
.cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.15;
  object-fit: cover;
}
.cta-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, var(--swalfy-night-2) 0%, rgba(11, 33, 30, 0.4) 45%, var(--swalfy-night-2) 100%);
}
.cta-glow {
  position: absolute;
  width: 800px;
  height: 600px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inset-block-start: -180px;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(closest-side, rgba(20, 184, 166, 0.22), rgba(20, 184, 166, 0) 72%);
}
.cta-band .wrap {
  position: relative;
  z-index: 1;
  text-align: center;
}
.cta-band h2 {
  max-width: 720px;
  margin-inline: auto;
  margin-block-end: 32px;
}
.cta-form {
  max-width: 480px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cta-form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cta-input {
  flex: 1;
  min-width: 200px;
  background: var(--swalfy-surface);
  border: 1px solid var(--swalfy-line-ui);
  border-radius: 12px;
  padding: 13px 16px;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--swalfy-cream);
}
.cta-input::placeholder {
  color: var(--swalfy-muted-2);
}
.cta-form button {
  align-self: center;
}
.cta-trust {
  margin-block-start: 18px;
  font-size: 13.5px;
  color: var(--swalfy-muted-2);
}
.cta-success {
  display: none;
  background: var(--swalfy-surface);
  border: 1px solid var(--swalfy-line-ui);
  border-radius: 12px;
  padding: 16px 20px;
  color: var(--swalfy-cream);
  font-size: 15px;
}
.cta-success.is-visible {
  display: block;
}
.cta-form.is-hidden {
  display: none;
}
.cta-error {
  display: none;
  color: var(--disp-needs-you);
  font-size: 13.5px;
}
.cta-error.is-visible {
  display: block;
}
@media (max-width: 859px) {
  .cta-band {
    padding-block: 64px;
  }
}

/* ============================== FOOTER (C10) ============================== */
.site-footer {
  padding-block: 40px 48px;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-block-end: 24px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}
.footer-brand img {
  width: 24px;
  height: 24px;
}
.footer-desc {
  font-size: 14px;
  color: var(--swalfy-muted-2);
  margin-inline-start: 14px;
  padding-inline-start: 14px;
  border-inline-start: 1px solid var(--swalfy-line);
}
@media (max-width: 620px) {
  .footer-desc {
    display: none;
  }
}
.footer-links {
  display: flex;
  gap: 24px;
}
.footer-links a {
  color: var(--swalfy-muted);
  font-size: 14px;
  text-decoration: none;
}
.footer-links a:hover {
  color: var(--swalfy-cream);
}
.footer-credit {
  font-size: 13.5px;
  color: var(--swalfy-muted-2);
}
.footer-credit a {
  color: var(--swalfy-sand);
  text-decoration: none;
}
.footer-credit a:hover {
  text-decoration: underline;
}

/* ============================== UTIL ============================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}