/* =========================================================
   Page — Pricing (م4)

   Four columns of money, a table long enough to answer the
   question the cards leave open, and nothing decorative in
   between. The brass is spent twice on this page: the hero's
   marked word and the top tier's hairline.

   Layer 3 only — every value below reads a token.
   ========================================================= */

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.pr-hero {
  position: relative;
  padding-block: var(--space-20) var(--space-12);
  overflow: hidden;
}

/* One cold light behind the headline, the same ambient the
   other marketing heroes use. */
.pr-hero__glow {
  position: absolute;
  inset-block-start: -22rem;
  inset-inline-start: 50%;
  translate: 50% 0;
  width: min(70rem, 130%);
  height: 40rem;
  background: radial-gradient(
    50% 50% at 50% 50%,
    var(--color-primary-soft) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.pr-hero__inner {
  position: relative;
  max-width: 48rem;
  text-align: center;
}
.pr-hero__inner .eyebrow { justify-content: center; }

.pr-hero__title {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
.pr-hero__title span { display: block; }

.pr-hero__lead {
  margin: 0 auto var(--space-10);
  max-width: 44rem;
  color: var(--color-text-secondary);
}

/* ---------------------------------------------------------
   Plan cards — the section that holds them
   --------------------------------------------------------- */
.pr-plans { padding-block: var(--space-8) var(--space-16); }

/* ---------------------------------------------------------
   How the money moves
   --------------------------------------------------------- */
.pr-money {
  border-block: 1px solid var(--color-line);
  background: var(--color-canvas-deep);
}

.pr-money__grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(3, 1fr);
}

.pr-money__item {
  padding-inline-start: var(--space-5);
  border-inline-start: 1px solid var(--color-line-gold);
}

.pr-money__head {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-base);
  color: var(--color-text);
}
.pr-money__body {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

/* ---------------------------------------------------------
   Comparison table
   --------------------------------------------------------- */
.pr-cmp__hint {
  margin: calc(var(--space-8) * -1) 0 var(--space-6);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
@media (min-width: 900px) {
  .pr-cmp__hint { display: none; }
}

.pr-cmp__wrap { scrollbar-width: thin; }
.pr-cmp__wrap:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.pr-cmp__table { min-width: 46rem; }

/* The head follows the reader down a table this long. */
.pr-cmp__table .table__head th {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.pr-cmp__table th[scope="row"] {
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-align: start;
  color: var(--color-text);
}
.pr-cmp__table .table__row + .table__row th[scope="row"] {
  border-top: 1px solid var(--color-line);
}

/* Group headers break fifteen rows into five readable runs. */
.pr-cmp__group th {
  padding: var(--space-6) var(--space-5) var(--space-2);
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  text-align: start;
  color: var(--color-gold-text);
}
:root[data-lang="en"] .pr-cmp__group th {
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

.pr-cmp__cell {
  color: var(--color-text);
  white-space: nowrap;
}

/* The tick is drawn, not an icon file — same two borders the
   check list uses, so the two agree by construction. */
.pr-cmp__tick {
  display: inline-block;
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--color-growth-soft);
  vertical-align: middle;
}
.pr-cmp__tick::after {
  content: "";
  position: absolute;
  inset-inline-start: 6px;
  inset-block-start: 6px;
  width: 6px;
  height: 3px;
  border-left: 1.7px solid var(--color-growth);
  border-bottom: 1.7px solid var(--color-growth);
  rotate: -45deg;
}

.pr-cmp__dash { color: var(--color-text-muted); }

/* ---------------------------------------------------------
   AI unit price list
   --------------------------------------------------------- */
.pr-units__inner { max-width: 52rem; }

.pr-units__list {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}

.pr-units__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-block-start: 1px solid var(--color-line);
}
.pr-units__item:nth-child(-n + 2) { border-block-start: 0; }
.pr-units__item:nth-child(odd) { border-inline-end: 1px solid var(--color-line); }

.pr-units__what {
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.pr-units__cost {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  white-space: nowrap;
}
.pr-units__figure {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-growth-text);
}
.pr-units__unit {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.pr-units__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 900px) {
  .pr-money__grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

@media (max-width: 720px) {
  .pr-hero { padding-block: var(--space-12) var(--space-8); }
  .pr-units__list { grid-template-columns: 1fr; }
  .pr-units__item:nth-child(-n + 2) { border-block-start: 1px solid var(--color-line); }
  .pr-units__item:first-child { border-block-start: 0; }
  .pr-units__item:nth-child(odd) { border-inline-end: 0; }
}