/* FARAH — pricing page. Sits on the home page's dark canvas (home.css supplies
   the header, buttons, section headings and footer) and adds only the plan
   cards, table, questions and waitlist. Logical properties throughout, so the
   Arabic page mirrors without extra rules. */

.pricing {
  padding-block-end: 0;
}
.pr-sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pr-hero,
.pr-plans,
.pr-vat,
.pr-compare,
.pr-faq,
.pr-wait {
  margin-inline: clamp(20px, 6vw, 88px);
}
.pr-hero {
  padding-block: clamp(48px, 8vw, 96px) clamp(28px, 4vw, 48px);
  max-inline-size: 760px;
}
.pr-hero h1 {
  margin: 10px 0 16px;
  font-size: clamp(36px, 6vw, 68px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.pr-hero h1:lang(ar) {
  line-height: 1.3;
  letter-spacing: 0;
}
.pr-hero__sub {
  margin: 0;
  color: var(--home-muted);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.6;
  max-inline-size: 60ch;
}

/* plan cards */
.pr-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  align-items: stretch;
  max-inline-size: 980px;
}
.pr-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--home-border);
  border-radius: 24px;
  background: var(--home-bg-2);
}
.pr-plan--pass {
  border-color: var(--home-gold-border);
  background: linear-gradient(160deg, rgba(214, 146, 58, 0.14), transparent 55%), var(--home-bg-3);
}
.pr-plan__badge {
  position: absolute;
  inset-block-start: 18px;
  inset-inline-end: 18px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--home-gold-border);
  color: var(--home-gold);
  font-size: 12.5px;
  font-weight: 700;
}
.pr-plan__name {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
}
.pr-plan__tag {
  margin: 0 0 14px;
  color: var(--home-muted);
  font-size: 15px;
}
.pr-plan__price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.pr-plan__amount {
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}
.pr-plan__cur {
  font-size: 18px;
  font-weight: 700;
  color: var(--home-muted);
}
.pr-plan__period {
  margin: 4px 0 22px;
  color: var(--home-muted);
  font-size: 14.5px;
}
.pr-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 12px;
  flex: 1;
}
.pr-list li {
  position: relative;
  padding-inline-start: 26px;
  line-height: 1.5;
  font-size: 15.5px;
}
.pr-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: 0.45em;
  inline-size: 10px;
  block-size: 6px;
  border-inline-start: 2px solid var(--home-gold);
  border-block-end: 2px solid var(--home-gold);
  transform: rotate(-45deg);
}
.pr-plan__cta {
  align-self: stretch;
  text-align: center;
}
.pr-vat {
  margin-block: 18px 0;
  color: var(--home-muted);
  font-size: 13.5px;
}

/* comparison table */
.pr-compare,
.pr-faq {
  margin-block-start: clamp(64px, 9vw, 110px);
  max-inline-size: 980px;
}
.pr-tablewrap {
  position: relative; /* keeps the visually-hidden cell text inside the scroller */
  margin-block-start: 26px;
  overflow-x: auto;
  border: 1px solid var(--home-border);
  border-radius: 20px;
}
.pr-table {
  inline-size: 100%;
  border-collapse: collapse;
  min-inline-size: 520px;
}
.pr-table th,
.pr-table td {
  padding: 16px 20px;
  text-align: start;
  border-block-end: 1px solid var(--home-border);
  font-size: 15px;
}
.pr-table thead th {
  font-size: 14px;
  color: var(--home-gold);
  font-weight: 800;
  background: rgba(244, 238, 228, 0.03);
}
.pr-table tbody th {
  font-weight: 600;
}
.pr-table tbody tr:last-child th,
.pr-table tbody tr:last-child td {
  border-block-end: 0;
}
.pr-table td {
  color: var(--home-ink);
}
.pr-yes {
  color: var(--home-gold);
  font-weight: 900;
}

/* questions */
.pr-faq__list {
  margin-block-start: 22px;
  border-block-start: 1px solid var(--home-border);
}
.pr-q {
  border-block-end: 1px solid var(--home-border);
}
.pr-q summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 4px;
  font-weight: 700;
  font-size: 17px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.pr-q summary::-webkit-details-marker {
  display: none;
}
.pr-q summary::after {
  content: "+";
  color: var(--home-gold);
  font-size: 22px;
  line-height: 1;
}
.pr-q[open] summary::after {
  content: "−";
}
.pr-q summary:focus-visible {
  outline: 2px solid #6ea8ff;
  outline-offset: 2px;
  border-radius: 6px;
}
.pr-q p {
  margin: 0 0 20px;
  padding-inline: 4px;
  color: var(--home-muted);
  line-height: 1.65;
  max-inline-size: 70ch;
}

/* waitlist */
.pr-wait {
  margin-block: clamp(64px, 9vw, 110px);
  max-inline-size: 980px;
  scroll-margin-block-start: 24px;
}
.pr-wait__box {
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--home-gold-border);
  border-radius: 24px;
  background: radial-gradient(520px 320px at 10% 0%, rgba(214, 146, 58, 0.16), transparent 70%), var(--home-bg-3);
}
.pr-wait h2 {
  margin: 0 0 10px;
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 800;
  line-height: 1.15;
}
.pr-wait h2:lang(ar) {
  line-height: 1.35;
}
.pr-wait__sub,
.pr-wait__note {
  margin: 0 0 20px;
  color: var(--home-muted);
  line-height: 1.6;
  max-inline-size: 60ch;
}
.pr-wait__note {
  margin: 16px 0 0;
  font-size: 13.5px;
}
.pr-wait__note a {
  color: var(--home-gold);
  text-decoration: underline;
}
.pr-wait__form label {
  display: block;
  margin-block-end: 8px;
  font-weight: 700;
  font-size: 14.5px;
}
.pr-wait__row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.pr-wait__row input {
  flex: 1 1 260px;
  min-inline-size: 0;
  padding: 14px 18px;
  border-radius: 100px;
  border: 1.5px solid var(--home-border);
  background: rgba(244, 238, 228, 0.05);
  color: var(--home-ink);
  font: inherit;
  text-align: start;
}
.pr-wait__row input:focus-visible {
  outline: 2px solid #6ea8ff;
  outline-offset: 2px;
  border-color: var(--home-gold-border);
}
.pr-wait__error {
  margin: 0 0 14px;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(164, 71, 47, 0.18);
  border: 1px solid rgba(164, 71, 47, 0.5);
}
.pr-wait__done {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--home-gold);
}

@media (max-width: 760px) {
  .pr-plans {
    grid-template-columns: 1fr;
  }
  .pr-plan__badge {
    position: static;
    align-self: flex-start;
    margin-block-end: 6px;
  }
  .pr-table {
    min-inline-size: 0; /* all three columns fit a phone; text wraps instead of scrolling */
    table-layout: fixed;
  }
  .pr-table th,
  .pr-table td {
    padding: 12px 10px;
    font-size: 14px;
    overflow-wrap: anywhere;
  }
  .pr-table th:first-child {
    inline-size: 46%;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .pr-plan {
    transition: border-color 0.18s ease;
  }
  .pr-plan:hover {
    border-color: var(--home-gold-border);
  }
}