/* =========================================================
   GlowVibe — Urdu / RTL layer
   Loaded AFTER style.css. Contains only what the Urdu page needs:
   typography for Arabic script, and mirrors for every rule in
   style.css that uses a physical left/right direction.

   style.css is untouched, so the English page is unaffected.

   1.  Type tokens
   2.  Script-specific typography
   3.  Latin runs (digits, brand name)
   4.  Direction mirrors
   5.  Responsive mirrors
   ========================================================= */

/* ---------- 1. Type tokens ---------- */
/* Redefining the two families style.css declares re-skins the whole page.
   Nastaliq now carries all of it, headings and body alike — Naskh is only
   there as the fallback for devices with no Nastaliq face at all.

   The local names come first, so a machine that already has one (common on
   Pakistani Windows) uses it instantly, with no download and no reflow. */
:root {
  --urdu:
    "Jameel Noori Nastaleeq",
    "Alvi Nastaleeq",
    "Urdu Typesetting",
    "Noto Nastaliq Urdu",
    "Noto Naskh Arabic",
    "Segoe UI",
    "Geeza Pro",
    serif;

  --serif: var(--urdu);
  --sans:  var(--urdu);

  /* Latin digits: prices, phone number, step numbers. Every face here has
     lining figures — Georgia's old-style ones sit at uneven heights, which
     reads as unsteady on a price. */
  --latin: Cambria, "Noto Serif", "Times New Roman", serif;

  /* Nastaliq's letterforms sit small inside their em box, so the same pixel
     size reads noticeably smaller than a Latin face. Everything steps up by
     roughly a tenth to compensate. */
  --fs-xs:   0.875rem;
  --fs-sm:   1rem;
  --fs-base: 1.15rem;
  --fs-md:   1.28rem;
  --fs-lg:   1.5rem;
  --fs-xl:   1.9rem;

  /* Deep descenders on a steep slope: without this much leading the lines
     collide and the tails clip. */
  --lh-nastaliq: 1.95;
}

/* ---------- 2. Script-specific typography ---------- */

/* Arabic script is cursive: letter-spacing breaks the joins between
   letters. Every tracked rule in style.css is reset here. */
h1, h2, h3,
.hero-title,
.hero-badges li,
.contact-tag,
.plan-flag,
.plan-price,
.contact-number,
.nav-list a,
.btn,
.footer-col h2,
.product-flag,
.product-off,
.price-new,
.price-save {
  letter-spacing: normal;
}

body { line-height: 2; }

/* Display headings — Nastaliq, with room to breathe */
h1, h2 {
  font-family: var(--serif);
  line-height: var(--lh-nastaliq);
  font-weight: 400;
}

/* Nastaliq's descenders overshoot the line box, so large text gets
   explicit padding rather than relying on line-height alone. */
.hero-title {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3.9vw, 2.9rem);
  line-height: 1.9;
  padding-bottom: .15em;
  margin-bottom: 1.1rem;
}

.section-head h2,
.about-copy h1,
.contact-copy h2 {
  padding-bottom: .12em;
}

h3,
.plan-name,
.footer-col h2 {
  line-height: 1.85;
}

/* Nastaliq comes in a single weight. Anything heavier gets synthesised by
   the browser and smears the joins, so emphasis is left to size and colour. */
body, h1, h2, h3,
.lede, .note,
.btn,
.nav-list a, .nav-list a.is-current,
.footer-col h2,
.plan-name, .plan-flag,
.plan-features li,
.hero-badges li,
.product-name, .product-flag, .product-off,
.price-save {
  font-weight: 400;
}

/* Small pills and buttons need the extra leading too, or the tails of the
   letters run into the border. */
.btn { line-height: 1.9; }
.hero-badges li,
.plan-flag,
.product-flag,
.product-off { line-height: 1.9; }
.plan-features li { line-height: 1.9; }
.nav-list a { line-height: 1.8; }
.usage-card p { line-height: 1.9; }

.lede { line-height: 2; }

/* Urdu runs longer than English at the same measure */
.lede { max-width: 60ch; }
.about-copy h1 { max-width: 22ch; }
.contact-copy h2 { max-width: 20ch; }

.note { line-height: 2; }

/* ---------- 3. Latin runs (digits, brand name) ---------- */
/* Prices, the phone number and the step numbers are Latin digits, so they
   take a system serif rather than the Naskh stack's digit forms. */
.plan-price,
.contact-number,
.contact-brand,
.price-new,
.price-old,
.price-save [dir="ltr"] {
  font-family: var(--latin);
}

/* "روپے" follows the number in Urdu, so it is a plain suffix here rather
   than the raised prefix the English page uses. In RTL the number is laid
   out first and sits to its RIGHT, so the gap goes on the suffix's right. */
.plan-price .cur,
.price-new .cur {
  font-family: var(--sans);
  font-size: .3em;
  vertical-align: baseline;
  margin-left: 0;
  margin-right: .4em;
}

.price-old .cur {
  font-family: var(--sans);
  font-size: .78em;
  vertical-align: baseline;
  margin-left: 0;
  margin-right: .3em;
}

.contact-number { line-height: 1.3; }
.plan-price { line-height: 1.15; }
.price-new, .price-old { line-height: 1.15; }

/* ---------- 4. Direction mirrors ---------- */
/* Each block below mirrors a physical left/right value in style.css. */

/* Skip link */
.skip-link { left: auto; right: 1rem; }

/* Nav underline grows from the right in RTL */
.nav-list a::after {
  left: auto;
  right: 0;
  transform-origin: right;
}

/* HERO FOR RTL.
   The copy sits on the right, where an RTL page begins — in RTL a block
   already sits at the inline-start edge, so it needs no margin to get there.

   This page points at hero-right-space-wide.jpg, not the English hero:
   that photo keeps the product on the left and the clear counter on the
   right, under the words. (Flipping the English one with scaleX puts the
   space on the right too, but it reverses the wordmark on the labels.)

   The photo is full-bleed, so the copy has no reason to stay inside the
   centred 1180px container — on a 1920 screen that stranded roughly 400px
   of unused image past its right edge. It runs to the edge instead, and
   grows with the viewport, capped so it never reaches the jars. */
.hero-inner {
  max-width: none;
  padding-inline-start: var(--gutter);
  padding-inline-end: clamp(1.5rem, 5vw, 5rem);
}

/* The jars run to about half the frame and the reaching fingers to ~62%,
   so the block is capped at roughly the third of the width that is left
   after the end gutter — that keeps every right-flush line clear of them.
   The 20rem floor stops it collapsing on small laptops. */
.hero-copy {
  max-width: min(34rem, max(33vw, 20rem));
}


/* The veil follows the copy: dense on the right, clearing over the jars.
   style.css runs this at 96deg for the English page; 264deg is its mirror. */
.hero-veil {
  background:
    linear-gradient(264deg,
      rgba(16, 44, 25, .90) 0%,
      rgba(16, 44, 25, .80) 26%,
      rgba(16, 44, 25, .50) 50%,
      rgba(16, 44, 25, .16) 72%,
      rgba(16, 44, 25, .04) 100%),
    linear-gradient(to top, rgba(16, 44, 25, .34), rgba(16, 44, 25, 0) 45%);
}

/* Right-aligned lines are all flush at the block's right edge, so the
   measure is set by the block itself — an inner cap would only pull the
   text further right, toward the jars. */
.hero-title { max-width: none; }
.hero-lede  { max-width: none; }

/* Badge padding is asymmetric (tick side vs text side) */
.hero-badges li { padding: .48rem .85rem .48rem 1rem; }

/* About collage */
.about-shape { right: auto; left: -6%; }
.about-inset { left: auto; right: -8%; }

/* Disclaimer rule moves to the reading edge */
.note {
  border-left: 0;
  border-right: 2.5px solid var(--sage-deep);
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}

/* Plan feature ticks */
.plan-features li { padding-left: 0; padding-right: 1.7rem; }
.plan-features li::before { left: auto; right: 0; }
.plan-features li::after  { left: auto; right: 3.2px; }

/* Benefit ticks */
.benefit-compact li { padding-left: 0; padding-right: 1.8rem; }
.benefit-compact li::before { left: auto; right: 0; }
.benefit-compact li::after  { left: auto; right: 3.5px; }

/* Product cards */
.product-off { left: auto; right: .9rem; }
.product-flag { right: auto; left: .9rem; }

/* Floating WhatsApp button mirrors to the other corner */
.wa-float {
  right: auto;
  left: clamp(1rem, 3vw, 1.75rem);
}

/* ---------- 5. Responsive mirrors ---------- */

@media (max-width: 900px) {
  /* Mobile menu links keep their hairline rules; only inset flips */
  .nav-list a { padding: .95rem .25rem; }
}

@media (max-width: 720px) {
  /* Hero goes full width here, so the auto margin has nothing to absorb
     and the crop in style.css already suits the portrait layout. */
  .hero-copy { max-width: none; }
  .hero-inner { padding-inline-end: var(--gutter); }
  .hero-title { font-size: clamp(2rem, 8.4vw, 2.7rem);text-align:center; }
  .about-inset { left: auto; right: -4%; }

  /* Four badges wrap to two rows on a phone; centring keeps the short
     second row under the middle instead of stranded at one edge. */
  .hero-badges { justify-content: center; }

  .product-flag { left: .6rem; }
}

@media (max-width: 520px) {
  /* style.css hides the inset here; nothing to mirror */
  .hero-title { line-height: 1.85; }
}