/* ArdaForm — /pricing only.
   Its own file, loaded by pricing.html alone, so adding the plan cards did not
   mean moving global.css's ?v= on every page (the docs/api pages are written by
   api/tools/reference/build.js, which pins that number itself). Reads the tokens
   global.css defines. Bump ?v= in pricing.html when this file changes.
   The cards themselves are generated: _includes/pricing-plans.html, written by
   portal/tools/gen-pricing.js. */

/* ── Monthly | Yearly — shown only when the script runs ─────────────── */
.period { display: inline-flex; margin: 0 0 28px; border: 1px solid var(--line-2); background: var(--ink-2); }
.period[hidden] { display: none; }
.period button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 0; background: none; color: var(--muted); font: 650 13px/1 var(--mono); letter-spacing: .02em; cursor: pointer; }
.period button + button { border-left: 1px solid var(--line-2); }
.period button[aria-checked="true"] { background: rgba(var(--orange-rgb), .1); color: var(--text); box-shadow: inset 0 -2px 0 var(--orange); }
.period button u { color: var(--green); text-decoration: none; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.period button u:empty { display: none; }

/* ── the cards ──────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.plan { display: flex; flex-direction: column; min-width: 0; padding: 30px 26px; background: var(--ink-2); }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.plan-head h3 { margin: 0; font: 650 20px/1.2 var(--mono); letter-spacing: -.02em; }
.plan-price { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.plan-amt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; }
.plan-amt b { color: var(--text); font: 650 38px/1.1 var(--mono); letter-spacing: -.04em; }
.plan-paid .plan-amt b { color: var(--orange); }
.plan-amt span { color: var(--muted); font: 600 13px/1 var(--mono); }
.plan-amt + .plan-amt { margin-top: 6px; }
.plan-amt.plan-year b { font-size: 24px; }
.plan-save { margin: 8px 0 0; color: var(--green); font: 600 12px/1.45 var(--mono); }
.plan-custom .plan-amt b { font-size: 30px; }
.plan-desc { margin: 0 0 18px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.plan-lines { margin: 0 0 26px; padding: 0; list-style: none; }
.plan-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); color: var(--text-2); font-size: 15px; line-height: 1.4; }
.plan-lines b { color: var(--text); font: 600 14px/1.4 var(--mono); text-align: right; }
.plan-lines .plan-no, .plan-lines .plan-no b { color: var(--dim); font-weight: 500; }
.plan .btn { margin-top: auto; width: 100%; }
.plans:not([data-period]) .plan-js { display: none; }

/* every card on one set of rows — name, price, words, limits, button — so the
   limits start level however long a plan's description is */
@supports (grid-template-rows: subgrid) {
  .plan { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  .plan .btn { align-self: end; }
  .plan-custom .plan-desc { grid-row: span 2; }
}

/* with the toggle: one period at a time, and that one at full size */
.plans[data-period="month"] .plan-year,
.plans[data-period="year"] .plan-month { display: none; }
.plans[data-period="year"] .plan-amt.plan-year b { font-size: 38px; }

/* ── what every plan includes, and the questions ────────────────────── */
.pricing-incl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.faq { border-top: 1px solid var(--line); }
.faq-item { padding: 24px 0; border-bottom: 1px solid var(--line); }
.faq-item h3 { margin: 0 0 10px; font: 650 18px/1.35 var(--mono); letter-spacing: -.02em; }
.faq-item p { max-width: 820px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.faq-item p + p { margin-top: 10px; }
.faq-item a { color: var(--orange); }

@media (max-width: 1180px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .plans, .pricing-incl { grid-template-columns: 1fr; }
  .plan { padding: 26px 20px; }
  .period { display: flex; }
  .period[hidden] { display: none; }
  .period button { flex: 1; justify-content: center; padding: 0 10px; }
}