/* Landing tiers (phase 3, batch 3): the partner levels, built like the pricing page's plan cards (pr-plans). Each card
   spans six rows of the list grid, so names, figures, buttons and lists line up (The Level Row Rule). A marked tier
   takes the Sky Field and a sticker stating a fact about it. The terms follow as small print in two columns.
   Logical properties, so Arabic mirrors. */
.lp-tiers-head { display: grid; gap: 18px; max-width: 860px; }
.lp-tier-list { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 40px clamp(14px, 1.8vw, 26px); margin-top: clamp(56px, 6vw, 80px); }
.lp-tier {
  position: relative; min-width: 0;
  display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 14px;
  padding: 34px clamp(20px, 2.2vw, 30px) clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-sm);
  corner-shape: var(--sq-shape, round);
}
@supports not (grid-template-rows: subgrid) {
  .lp-tier { display: flex; flex-direction: column; gap: 14px; }
}
.lp-tier.is-marked { border-color: transparent; background: var(--field-sky); }
.lp-tier-name { font: 800 1.4rem/1.2 var(--text); letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: break-word; }
.lp-tier-for { font-size: 16px; line-height: 1.45; color: var(--ink-soft); text-wrap: pretty; }
.lp-tier-price { align-self: end; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding-top: 4px; }
.lp-tier-amount { font: 800 clamp(2.4rem, 1.7rem + 1.4vw, 3.1rem)/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
:lang(ar) .lp-tier-amount { letter-spacing: 0; }
.lp-tier-per { font-weight: 700; font-size: 16px; line-height: 1.35; color: var(--ink-soft); }
.lp-tier-act .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.2; }
.lp-tier-inc { padding-top: 14px; border-top: 1px solid var(--line); font: 700 13px/1.2 var(--text); color: var(--ink-soft); }
.lp-tier.is-marked .lp-tier-inc { border-top-color: color-mix(in srgb, var(--ink) 14%, transparent); }
.lp-tier-feats { display: grid; gap: 10px; align-content: start; }
.lp-tier-feats li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 16px; line-height: 1.4; overflow-wrap: break-word; }
.lp-tier-feats .i { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--green); color: var(--on-bright); }
/* The chapter's one sticker: a fact about the marked tier, over its top edge */
.lp-tier-sticker {
  --rot: -3deg;
  position: absolute; z-index: 3; top: 0; left: 50%; translate: -50% -58%;
  width: max-content; max-width: calc(100% + 12px);
  justify-content: center; text-align: center; text-wrap: balance;
  font-size: 15px; line-height: 1.2;
}
[dir="rtl"] .lp-tier-sticker { --rot: 3deg; }
/* The terms: a version line, then short paragraphs with bold leads, in two columns on wide screens */
.lp-tiers-terms {
  margin-top: clamp(32px, 3.6vw, 48px); padding-top: 22px; border-top: 1px solid var(--line);
  columns: 2 22rem; column-gap: clamp(24px, 3vw, 48px);
  font-size: 14px; line-height: 1.55; color: var(--ink-soft);
}
.lp-tiers-terms p { margin: 0 0 10px; break-inside: avoid; text-wrap: pretty; }
.lp-tiers-terms p:first-child { column-span: all; margin-bottom: 14px; font-size: 15px; color: var(--ink); }
.lp-tiers-terms strong, .lp-tiers-terms b { color: var(--ink); font-weight: 700; }
.lp-tiers-terms a { color: var(--accent-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 1023px) {
  .lp-tier-list { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; gap: 48px; }
  .lp-tier { grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; }
}