/*
 * `/pricing` (WEB-008) — R2 frame `#2b`. Components (tier card, segmented
 * toggle, region select, comparison table, FAQ cards) come from
 * components.css; this file is the page layout only. Colours are tokens;
 * layout uses logical properties for WEB-015's RTL frame.
 */

.pr { max-width: 1312px; margin: 0 auto; }

.pr-hero {
  padding: 36px var(--gutter) 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.pr-hero h1 { font-size: 34px; line-height: 1.08; letter-spacing: -0.024em; text-wrap: balance; }
.pr-hero > p { font-size: 15px; line-height: 1.6; color: var(--text-2); max-width: 620px; }
.pr-perk {
  font-size: 12.5px;
  color: var(--text);
  border: 1px solid var(--border-strong);
  background: var(--raised);
  border-radius: var(--r-pill);
  padding: 5px 12px;
}
.pr-controls { display: flex; flex-direction: column; gap: 10px; width: 100%; align-items: stretch; padding-block-start: 6px; }
.pr-controls .segmented { width: 100%; }
.save-badge { white-space: nowrap; }
.pr-wide { display: none; }
/* "−35%" is a signed number, not text: isolated LTR so right-to-left pages keep the sign in front. */
.pr-narrow { display: inline; unicode-bidi: isolate; direction: ltr; }
.pr-note { font-size: 12.5px; color: var(--text-2); }

.pr-tiers {
  padding: 18px var(--gutter) 8px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* Mobile order is Plus / Pro / Free (README); desktop is Free / Plus / Pro. */
.pr-tier--plus { order: 1; }
.pr-tier--pro { order: 2; }
.pr-tier--free { order: 3; }
.pr-tiers .btn { height: 52px; }

.pr-lifetime {
  margin: 28px var(--gutter) 0;
  padding: 24px;
  border-radius: var(--r-panel);
  background: var(--raised);
  border: 1px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pr-lifetime__copy { display: flex; flex-direction: column; gap: 10px; }
.pr-lifetime h2 { font-size: 24px; }
.pr-lifetime p { font-size: 14px; line-height: 1.6; color: var(--text-2); }
.pr-price { color: var(--price); }

.pr-section {
  margin-block-start: 40px;
  padding: 36px var(--gutter) 0;
  border-block-start: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pr-section h2 { font-size: 24px; }
.pr-compare small { font-size: 11.5px; color: var(--text-2); }
.pr-compare th[scope="row"] { font-weight: 400; color: var(--text); }
.pr-long { display: none; }
.pr-short { display: inline; }
.pr-expand { display: none; align-self: flex-start; }
.pr-fine { font-size: 12.5px; line-height: 1.6; color: var(--text-2); }
.pr-faq__head { display: flex; flex-direction: column; gap: 10px; }
.pr-faq__head p { font-size: 14.5px; color: var(--text-2); }
.pr-faq__head h2 { padding-block-start: 0; }
.pr ~ .site-footer { margin-block-start: 48px; }

@media (min-width: 768px) {
  .pr-hero { padding: 72px var(--gutter) 28px; gap: 18px; }
  .pr-hero h1 { font-size: 48px; letter-spacing: -0.022em; }
  .pr-hero > p { font-size: 17px; }
  .pr-controls { flex-direction: row; justify-content: center; width: auto; }
  .pr-controls .segmented { width: auto; }

  .pr-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; padding-block-start: 28px; }
  .pr-tier--free { order: 0; }
  .pr-tier--plus { order: 1; }
  .pr-tier--pro { order: 2; }

  .pr-lifetime { flex-direction: row; align-items: center; justify-content: space-between; padding: 30px 34px; gap: 40px; }
  .pr-lifetime h2 { font-size: 28px; }
  .pr-lifetime p { font-size: 14.5px; max-width: 760px; }
  .pr-lifetime .btn { flex: none; }

  .pr-section { margin-block-start: 64px; padding-block-start: 64px; gap: 24px; }
  .pr-section h2 { font-size: 34px; letter-spacing: -0.018em; }
  .pr-wide { display: inline; }
  .pr-narrow { display: none; }
  .pr-long { display: inline; }
  .pr-short { display: none; }

  .pr-section.support-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; align-items: start; }
}

/* Tablet: six rows, the rest one tap away (README "tablet shows 6 rows"). */
@media (min-width: 768px) and (max-width: 1099px) {
  .pr-compare:not(.is-expanded) .is-extra { display: none; }
  .pr-expand { display: inline-flex; }
  .pr-tiers { grid-template-columns: minmax(0, 1fr); }
  .pr-tier--free { order: 3; }
}