/* ==========================================================================
   Numera - pages/pricing.css
   The plans and prices page (generator/templates/pricing.html): the onboarding line, the two buckets and the plan
   table. css/pages.css holds what the other pages share (page head, glance cards, callout, FAQ, band, nav) and
   base.html links this file after it. The table is one row per plan on a wide screen and one card per plan on a
   phone (760px, like main.css). Logical properties make the same rules work in Arabic; only the fonts are set
   again in the Arabic block, because main.css gives these elements a Latin font that Tajawal has to replace.
   ========================================================================== */

.plans-section__title { text-wrap: balance; }

/* A link to #essentials or #onboarding must not land under the sticky nav */
.plans tr[id],
.plans-section[id],
.onboarding[id] { scroll-margin-top: 96px; }

/* ---- Onboarding: the one one-time charge ---- */
.onboarding {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  padding: 20px 24px;
  border-radius: 16px;
  background: rgba(20,82,76,0.07);
  border: 1px solid rgba(20,82,76,0.22);
}
.onboarding__line {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-primary);
}
.onboarding__note {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(10,21,23,0.78);
}

/* ---- The two buckets ---- */
.plans-section {
  padding: 64px 0 72px;
  border-top: 1px solid var(--c-line);
}
.plans-section--small { background: var(--c-ground-deep); }
.plans-section--team { background: var(--c-ground); }
.plans-section__header {
  max-width: 820px;
  margin-bottom: 32px;
}
.plans-section__title {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 700;
  margin-bottom: 14px;
}
.plans-section__audience {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(10,21,23,0.78);
}
.plans-wrap {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  overflow: hidden;
  /* hidden makes a scroll container, so the first row's scroll margin can not apply; clip rounds the corners without one */
  overflow: clip;
}
.plans {
  width: 100%;
  border-collapse: collapse;
}
.plans th,
.plans td {
  padding: 26px 24px;
  text-align: start;
  vertical-align: top;
  border-top: 1px solid var(--c-line);
}
.plans thead th {
  padding: 14px 24px;
  border-top: 0;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-ground);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.plans thead th:nth-child(1) { width: 15%; }
.plans thead th:nth-child(2) { width: 22%; }
.plans thead th:nth-child(3) { width: 22%; }
.plans tbody tr:first-child th,
.plans tbody tr:first-child td { border-top: 0; }
.plans__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-ink);
}
.plans__from {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-primary);
}
/* inline-block, not block: in Arabic a block would sit at the left edge, away from the words above it */
.plans__amount {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--c-primary);
}
.plans__unit {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--c-muted);
}
.plans__audience {
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-ink);
}
.plans__list {
  margin: 0 0 20px;
  padding: 0;
}
.plans__list li {
  position: relative;
  margin-bottom: 8px;
  padding-inline-start: 18px;
  font-size: 15px;
  line-height: 1.5;
}
.plans__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-secondary);
}
/* The approved caveat of a plan ("Valuation analysis" in the CFO plan), between the list and the button */
.plans__note {
  margin: -6px 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-muted);
}
.plans__action { margin: 0; }
.plans__cta {
  padding: 11px 20px;
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
}

/* Tablet: tighter cells, so the four columns still fit just above the card layout */
@media (max-width: 1000px) {
  .plans th,
  .plans td { padding: 22px 16px; }
  .plans thead th { padding: 12px 16px; }
}

/* ---- Phone: the table becomes one card per plan; the column headings stay for screen readers ---- */
@media (max-width: 760px) {
  .onboarding {
    padding: 16px 18px;
    border-radius: 14px;
  }
  .plans-section { padding: 48px 0 56px; }
  .plans-section__header { margin-bottom: 24px; }
  .plans,
  .plans tbody,
  .plans tr,
  .plans th,
  .plans td { display: block; }
  .plans thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .plans tr {
    padding: 24px 20px;
    border-top: 1px solid var(--c-line);
  }
  .plans tbody tr:first-child { border-top: 0; }
  .plans th,
  .plans td {
    padding: 0;
    border: 0;
  }
  .plans__name { font-size: 22px; }
  .plans__price { margin: 10px 0 4px; }
  .plans [data-label]::before {
    content: attr(data-label);
    display: block;
    margin: 18px 0 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-muted);
  }
  [dir="rtl"] .plans [data-label]::before {
    font-family: var(--font-arabic);
    font-size: 14px;
    text-transform: none;
  }
  .plans__list { margin-bottom: 18px; }
}

/* ---- Arabic: Tajawal for every element that carries words, larger sizes for Arabic letters ---- */
[dir="rtl"] .plans-section__title { line-height: 1.25; }
[dir="rtl"] .plans__from,
[dir="rtl"] .plans__unit,
[dir="rtl"] .plans thead th {
  font-family: var(--font-arabic);
  font-size: 14px;
  text-transform: none;
}
[dir="rtl"] .plans__name,
[dir="rtl"] .onboarding__line { font-family: var(--font-arabic); }
/* The amount is "990 ريال" in Arabic: JetBrains Mono has no Arabic letters, so Tajawal carries the number too */
[dir="rtl"] .plans__amount { font-family: var(--font-arabic); }
/* rtl.css keeps every .pill left-to-right; these labels are Arabic sentences with « » around a name */
[dir="rtl"] .plans__cta { direction: rtl; }
[dir="rtl"] .onboarding__note,
[dir="rtl"] .plans__audience,
[dir="rtl"] .plans__list li { font-size: 16px; }
[dir="rtl"] .plans__note { font-size: 15px; }
[dir="rtl"] .plans-section__audience { font-size: 18px; }