/* ===========================================================================
   06 — PRICING

   The band was measured off the template at a 1440x1000 viewport and those
   numbers are kept, because the shape is kept:

     74      section padding-top      (eyebrow sits here)
     20      eyebrow -> h2            48/56.16 w500 ls -2.88px, centred
     20      h2 -> lede               16/24, max 652
     20      lede -> dark pill        48 high, r999, ink fill, lime-soft text
     64      pill -> grey tray        #f2f2f2, r24, pad 12, gap 12
             three cards              #fff, r12, pad 20, internal gap 21
     72      section padding-bottom

   NO CARD IS HIGHLIGHTED. All three are the same white, the same lime-soft
   tile, the same dark button. The template gives the middle plan no emphasis
   of any kind, and neither does this.

   TWO DEPARTURES FROM THE MEASURED BAND
   1. The price row no longer holds a figure and a "/month" unit. It holds one
      line of text at the same 40px weight in the same slot, so the row keeps
      its 52px band but is allowed to grow if the sentence wraps. All three
      cards carry the SAME sentence, so they wrap together and stay level.
   2. A full-width Deema row is added inside the tray. It is --ink because the
      Deema wordmark is white on transparent: on the grey tray, or on a card,
      it would be a blank space.

   RTL
   Every inset is logical, so one stylesheet serves both directions. Three
   things needed real handling rather than mirroring:
     - .mono resolves to Geist Mono, which has no Arabic. In RTL the chain ends
       at generic monospace and the browser substitutes something arbitrary, so
       RTL sends the mono class back to --sans.
     - the +1.68px mono tracking breaks the joins between Arabic letters; it is
       zeroed in RTL.
     - the arrow in the pill is diagonal and directional, so it is mirrored.
       The tick, the phone, the dashboard and the Deema wordmark are not.
   =========================================================================== */

.prc-section {
  padding-top: 74px;
  padding-bottom: 72px;
  background: #fff;
}

/* ---------------------------------------------------------- header ----- */

/* line-height:0 zeroes the strut. .eyebrow and .prc-cta are inline-flex, so
   the line box they sit on is set by THIS block's leading, not by their own
   height — with the inherited 24px body leading the eyebrow lands 6px low and
   the whole section grows 6px. Every child below restores its own leading. */
.prc-head { text-align: center; line-height: 0; }

.prc-title {
  margin: 0;                         /* was 20px, the gap under the section label */
  font-size: 48px;
  line-height: 56.16px;              /* measured, not 1.17 rounded */
  font-weight: 500;
  letter-spacing: -0.06em;           /* -2.88px at 48px */
  text-wrap: balance;                /* the <br> pins the desktop break, balance
                                        carries the phone one */
  color: var(--ink);
}

.prc-lede {
  margin: 20px auto 0;
  max-width: 652px;                  /* measured paragraph width */
  line-height: 24px;                 /* restores body leading past .prc-head's 0 */
  text-wrap: balance;
  color: var(--body);
}

/* The section's own call to action is the INVERSE of .btn--go: an ink pill
   with lime-soft text and a lime-soft disc. Its own class, because .btn--go
   is the lime pill with the black disc and both appear on this page. */
.prc-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  height: 48px;
  padding-block: 0;
  padding-inline: 20px 4px;          /* logical: the 4px stays on the disc side
                                        in both directions */
  border-radius: 999px;
  background: var(--ink);
  color: var(--lime-soft);
  transition: transform .25s cubic-bezier(.22,.61,.36,1), background .25s;
}
.prc-cta:hover  { background: var(--ink-lift); }
.prc-cta:active { transform: scale(.975); }

.prc-cta__dot {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--lime-soft);
  color: var(--ink);
  display: grid;
  place-items: center;
  flex: none;
}
.prc-cta__dot svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------ tray ----- */

.prc-tray {
  margin-top: 64px;
  padding: 12px;
  border-radius: 24px;
  background: var(--card-grey);      /* rgb(242,242,242) */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;                         /* 3x429.3 + 2x12 = 1311.9 = 1336 - 24 */
}

/* ------------------------------------------------------------ card ----- */

.prc-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 21px;                         /* measured — an odd number, but it is the
                                        number the reference card is built on */
}

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

.prc-tile {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--lime-soft);      /* rgb(214,253,112) */
  display: grid;
  place-items: center;
  flex: none;
}
.prc-tile svg {
  width: 24px; height: 24px;
  color: var(--ink);                 /* the plan icons are stroked, not filled */
  fill: none;
}

.prc-plan {
  margin: 0;
  color: var(--ink);                 /* .mono supplies 14/20 w500 +1.68px */
}

.prc-desc {
  min-height: 48px;                  /* pinning two lines keeps the price, feature
                                        and button rows level across the three
                                        cards once one description drops to one */
  text-wrap: balance;
  color: var(--body);                /* rgb(47,47,47), 16/24 w400, -0.32px */
}

/* ---- the slot the price used to be in --------------------------------- */

/* Same position, same 40px weight, no invented number. min-height keeps the
   52px band the figure had; the line is allowed to wrap past it, and since all
   three cards carry the same sentence they wrap identically. */
.prc-price {
  display: flex;
  align-items: center;
  min-height: 52px;
}
.prc-note {
  font-size: 40px;
  line-height: 48px;                 /* the figure scale: 40/48, -2.4px */
  font-weight: 500;
  letter-spacing: -0.06em;
  text-wrap: balance;
  color: var(--ink);
}

/* ---- feature list ----------------------------------------------------- */

.prc-feats {
  margin: 0;
  padding: 8px;
  border-radius: 12px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;                         /* rows sit 40px apart: 24 icon + 16 gap */
}
.prc-feats li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--body);
}
.prc-check {
  width: 24px; height: 24px;
  fill: var(--ink);
  flex: none;
}

/* ---- per-card button -------------------------------------------------- */

.prc-buy {
  margin-top: auto;                  /* keeps the buttons on one line when the
                                        descriptions wrap to different heights */
  height: 40px;
  border-radius: 999px;
  /* Ahmad: «ال button بلون اسود جدا خليه افتح شوي». Pure --ink next to three
     white cards was the heaviest object in the section. The lime label still
     reads 13.4:1 on this, so nothing is traded for it. */
  background: var(--ink-soft);
  color: var(--lime-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s cubic-bezier(.22,.61,.36,1), background .25s;
}
.prc-buy:hover  { background: #383838; }
.prc-buy:active { transform: scale(.975); }

/* ----------------------------------------------------------- deema ----- */

/* Full-width row across the tray, after the three cards. Card radius, card
   padding rhythm, but ink — the wordmark is white on transparent and there is
   no light surface on this page it can be seen on. */
.prc-deema {
  grid-column: 1 / -1;
  background: var(--ink);
  border-radius: 12px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px 40px;
}

/* flex-basis, not a hard width: at 900 a fixed 620 plus the gap plus the logo
   is wider than the panel, and the logo wrapped to a second line for no
   reason. The copy shrinks instead, and only wraps below its 340px basis —
   by which point the 810 rule has already stacked the panel anyway. */
.prc-deema__copy { flex: 1 1 340px; max-width: 660px; }

.prc-deema__title {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -0.04em;           /* -0.96px at 24px */
  color: #fff;
}

.prc-deema__body {
  margin-top: 8px;
  line-height: 24px;
  text-wrap: balance;                /* without it the English drops one word
                                        ("agreed.") onto a line of its own */
  color: rgba(255, 255, 255, 0.68);
}

.prc-deema__logo { display: block; flex: none; }
.prc-deema__logo img { width: 196px; height: auto; }

/* ============================================================== RTL ==== */

/* Geist Mono carries no Arabic, so in RTL the mono chain ends at generic
   monospace and the browser substitutes a face nobody chose. Send it back to
   the page's own family, and drop the tracking that breaks Arabic joins. */
[dir="rtl"] .prc-section .mono {
  font-family: var(--sans);
  letter-spacing: 0;
}

/* Directional glyph: the arrow points up and forward, so it mirrors. The tick,
   the phone, the dashboard and the Deema wordmark do not. */
[dir="rtl"] .prc-cta__dot svg { transform: scaleX(-1); }

/* Arabic wants more leading and far less negative tracking than Latin at the
   same size; -2.88px at 48px crushes the joins and the marks above them. */
[dir="rtl"] .prc-title { letter-spacing: -0.01em; line-height: 1.34; }
[dir="rtl"] .prc-note  { letter-spacing: -0.01em; line-height: 52px; }
[dir="rtl"] .prc-lede  { line-height: 27px; }
[dir="rtl"] .prc-plan  { line-height: 22px; }
[dir="rtl"] .prc-desc  { line-height: 26px; min-height: 52px; }
[dir="rtl"] .prc-feats li { letter-spacing: 0; line-height: 22px; }
[dir="rtl"] .prc-deema__title { line-height: 36px; letter-spacing: -0.01em; }
[dir="rtl"] .prc-deema__body  { line-height: 27px; }

/* On a phone the buy button is the actual conversion target and it repeats
   three times, yet it was the shortest button on the site: 40px, against 44px
   for the hero's .btn--go and 48px for the closing CTA. Scoped to this
   breakpoint rather than changed at source, so the measured three-up desktop
   geometry the compare gate holds us to is untouched. */
@media (max-width: 809px) {
  .prc-buy { height: 48px; }
}

/* ======================================================= RESPONSIVE ==== */

/* The house rule is "below 1280 collapse to 2, below 810 to 1". This section
   goes 3 -> 1 at 1280, because three plan cards have no honest two-up: the
   third is left orphaned across the full row beside a four-line feature list.
   The template drops straight from three columns to one as well. */
@media (max-width: 1279px) {
  .prc-tray { grid-template-columns: 1fr; }
  .prc-desc { min-height: 0; }       /* nothing left to keep level once stacked */
  [dir="rtl"] .prc-desc { min-height: 0; }
}

@media (max-width: 809px) {
  .prc-section { padding-top: 56px; padding-bottom: 56px; }
  .prc-title {
    font-size: 35px;
    line-height: 40.95px;
  }
  .prc-title br { display: none; }   /* let it reflow instead of breaking mid-clause */
  .prc-note {
    font-size: 28px;
    line-height: 36px;
  }
  [dir="rtl"] .prc-note { line-height: 40px; }
  .prc-price { min-height: 40px; }
  .prc-deema {
    padding: 24px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  /* the basis is on the main axis, and the main axis is now vertical: left
     alone, `flex: 1 1 340px` would make the copy 340px TALL */
  .prc-deema__copy { flex: 0 1 auto; }
  .prc-deema__logo img { width: 164px; }
}