/**
 * Commerce and licensing pages.
 *
 * Pricing, Buy, Free Trial, Purchase Confirmation, Manage Licence, Renew,
 * Licensing FAQ, Practice and Support.
 *
 * Every value references a token. A raw hex or an ad hoc pixel value here is
 * a bug, in the same way it is in home.css.
 *
 * These pages share a shape the homepage does not have: a dark band directly
 * under the header carrying an eyebrow, a headline and one paragraph, then
 * alternating light sections. That band is .pa-phero and is defined once.
 *
 * The homepage hero is approved and frozen. Nothing in this file may select
 * into .pa-hero.
 */

/* =====================================================================
   Page hero
   ===================================================================== */

.pa-phero {
  background: var(--pa-ink);
  color: var(--pa-text-on-dark);
}

.pa-phero__inner { padding-block: clamp(52px, 7vw, 86px); }
.pa-phero--tall .pa-phero__inner { padding: clamp(52px, 7vw, 94px) 0 clamp(52px, 7vw, 88px); }

.pa-phero__copy { max-width: 760px; }
.pa-phero--wide .pa-phero__copy { max-width: none; }

.pa-phero__eyebrow {
  margin: 0;
  color: var(--pa-purple-on-dark);
  font-family: var(--pa-font);
  font-size: var(--pa-micro);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.pa-phero__title {
  margin: 20px 0 0;
  font-family: var(--pa-font);
  font-size: clamp(34px, 4.8vw, 60px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.028em;
  text-wrap: pretty;
}

.pa-phero--tall .pa-phero__title {
  max-width: 22ch;
  font-size: clamp(36px, 5.4vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

/* The second headline line, used where a page leads with a name and then
   says what it is. Practice is the only page that needs it so far. */
.pa-phero__lead {
  max-width: 34ch;
  margin: 22px 0 0;
  color: var(--pa-text-on-dark);
  font-family: var(--pa-font);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.018em;
  text-wrap: pretty;
}

.pa-phero__blurb {
  max-width: 56ch;
  margin: 24px 0 0;
  color: var(--pa-text-on-dark-cool);
  font-size: var(--pa-body-lg);
  line-height: 1.75;
  text-wrap: pretty;
}

.pa-phero--tall .pa-phero__blurb { max-width: 58ch; margin-top: 26px; }

.pa-phero__note {
  margin: 26px 0 0;
  color: var(--pa-text-on-dark);
  font-family: var(--pa-font);
  font-size: var(--pa-body-sm);
  font-weight: 700;
  letter-spacing: var(--pa-tracking-body);
}

.pa-phero__actions {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pa-phero__foot {
  margin: 22px 0 0;
  max-width: 62ch;
  color: var(--pa-text-on-dark-dim);
  font-size: var(--pa-meta);
  line-height: 1.65;
}

/* =====================================================================
   Section furniture shared by these pages
   ===================================================================== */

.pa-c-section { padding-block: clamp(52px, 6.5vw, 88px); background: var(--pa-surface); }
.pa-c-section--warm { background: var(--pa-surface-alt); border-top: 1px solid var(--pa-border-rule); }
.pa-c-section--dark { background: var(--pa-ink); color: var(--pa-text-on-dark); }
.pa-c-section--tight { padding-block: clamp(44px, 5vw, 68px) clamp(52px, 6vw, 84px); }

.pa-c-h2 {
  margin: 0;
  font-family: var(--pa-font);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.024em;
  text-wrap: pretty;
}

.pa-c-h3 {
  margin: 0;
  font-family: var(--pa-font);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.022em;
  text-wrap: pretty;
}

.pa-c-note {
  max-width: 74ch;
  margin: 24px 0 0;
  color: var(--pa-text-note);
  font-size: var(--pa-body-sm);
  line-height: 1.7;
  text-wrap: pretty;
}

.pa-c-lede {
  max-width: 56ch;
  margin: 0;
  color: var(--pa-text-muted);
  font-size: var(--pa-body);
  line-height: 1.8;
  text-wrap: pretty;
}

/* A heading beside its supporting paragraph. */
.pa-c-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

/* =====================================================================
   Fact grid
   Pricing seat facts, Buy purchasing facts, Free Trial end-of-trial facts,
   Practice capabilities. Hairline above, hairline under each row.
   ===================================================================== */

.pa-facts-grid {
  margin-top: clamp(28px, 3.4vw, 42px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 0 44px;
  border-top: 1px solid var(--pa-border-rule);
}

.pa-facts-grid--quad {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 40px;
}

.pa-fact-row {
  padding: 24px 0 26px;
  border-bottom: 1px solid var(--pa-border-rule);
}

.pa-fact-row__heading {
  margin: 0;
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.014em;
  text-wrap: pretty;
}

.pa-fact-row__body {
  max-width: 48ch;
  margin: 12px 0 0;
  color: var(--pa-text-muted);
  font-size: 16px;
  line-height: 1.75;
  text-wrap: pretty;
}

.pa-facts-grid--quad .pa-fact-row { padding: 26px 0 28px; }
.pa-facts-grid--quad .pa-fact-row__body { max-width: 38ch; font-size: 15.5px; }

/* =====================================================================
   Plan cards
   ===================================================================== */

.pa-plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.pa-plan {
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pa-border-rule);
  border-radius: var(--pa-radius);
  background: #fff;
}

.pa-plan__name {
  margin: 0;
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-size: var(--pa-meta);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-wrap: pretty;
}

.pa-plan__price {
  margin: 22px 0 0;
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--pa-tracking-tight);
}

.pa-plan__term {
  margin: 10px 0 0;
  color: var(--pa-text-note);
  font-size: var(--pa-body-sm);
  line-height: 1.5;
}

.pa-plan__seats {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--pa-border-hair);
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

.pa-plan__features {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.pa-plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--pa-text-muted);
  font-size: 15.5px;
  line-height: 1.6;
  text-wrap: pretty;
}

.pa-tick {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pa-purple-wash);
  color: var(--pa-purple);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

.pa-plan__note {
  margin: 18px 0 0;
  color: var(--pa-text-muted);
  font-size: 15.5px;
  line-height: 1.7;
  text-wrap: pretty;
}

.pa-plan__action {
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1 1 auto;
}

.pa-plan__action .pa-btn { justify-content: center; padding: 14px 20px; }

/* The Free Trial page shows the same catalogue as a quiet reference strip,
   not as something to buy, so the cards carry no action. */
.pa-plan--quiet { padding: 26px 22px; }
.pa-plan--quiet .pa-plan__price { font-size: clamp(26px, 2.4vw, 32px); margin-top: 16px; }

/* =====================================================================
   Trial band
   ===================================================================== */

.pa-trial-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.pa-trial-band__blurb {
  max-width: 58ch;
  margin: 14px 0 0;
  color: var(--pa-text-on-dark-cool);
  font-size: 16px;
  line-height: 1.7;
  text-wrap: pretty;
}

.pa-trial-band .pa-btn { flex: 0 0 auto; padding: 16px 26px; font-size: 16px; }

/* =====================================================================
   Numbered steps
   Buy "after checkout", Free Trial "how it works", Confirmation "activate".
   ===================================================================== */

.pa-steps {
  margin: clamp(28px, 3.4vw, 40px) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pa-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.pa-step__n {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pa-purple-wash);
  color: var(--pa-purple);
  font-family: var(--pa-font);
  font-size: var(--pa-micro);
  font-weight: 700;
  line-height: 1;
}

.pa-step__body { padding-top: 3px; }

.pa-step__label {
  margin: 0;
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.014em;
  text-wrap: pretty;
}

.pa-step__detail {
  max-width: 56ch;
  margin: 8px 0 0;
  color: var(--pa-text-muted);
  font-size: 15.5px;
  line-height: 1.7;
  text-wrap: pretty;
}

.pa-step__text {
  margin: 0;
  color: var(--pa-text-muted);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* On dark, the numbers invert. */
.pa-on-dark .pa-step__n { background: rgba(255, 255, 255, 0.1); color: var(--pa-purple-bright); }
.pa-on-dark .pa-step__label { color: var(--pa-text-on-dark); }
.pa-on-dark .pa-step__detail,
.pa-on-dark .pa-step__text { color: var(--pa-text-on-dark-cool); }

/* =====================================================================
   Ticked list
   ===================================================================== */

.pa-ticks {
  margin: clamp(24px, 3vw, 34px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px 32px;
}

.pa-ticks li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--pa-text-muted);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

.pa-on-dark .pa-ticks li { color: var(--pa-text-on-dark-cool); }
.pa-on-dark .pa-tick { background: rgba(255, 255, 255, 0.1); color: var(--pa-purple-bright); }

/* =====================================================================
   Buy page: plan chooser and order summary
   ===================================================================== */

.pa-buy {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: start;
}

.pa-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pa-option {
  width: 100%;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--pa-border-rule);
  border-radius: var(--pa-radius);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--pa-dur-fast) ease, background-color var(--pa-dur-fast) ease;
}

.pa-option:hover { border-color: var(--pa-border-hover); }

.pa-option[aria-pressed="true"] {
  border-color: var(--pa-purple);
  background: var(--pa-purple-mist);
}

.pa-option__name {
  margin: 0;
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.014em;
}

.pa-option__seats {
  margin: 6px 0 0;
  color: var(--pa-text-note);
  font-size: var(--pa-body-sm);
  line-height: 1.5;
}

.pa-option__price {
  flex: 0 0 auto;
  text-align: right;
}

.pa-option__amount {
  margin: 0;
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.024em;
}

.pa-option__term {
  margin: 6px 0 0;
  color: var(--pa-text-note);
  font-size: var(--pa-micro);
}

.pa-quote-line {
  margin: 22px 0 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--pa-text-note);
  font-size: var(--pa-body-sm);
  line-height: 1.7;
}

.pa-order {
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--pa-border-panel);
  border-radius: var(--pa-radius);
  background: #fff;
  position: sticky;
  top: calc(var(--pa-header-h) + 20px);
}

.pa-order__title {
  margin: 0;
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-size: var(--pa-meta);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pa-order__plan {
  margin: 20px 0 0;
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pa-order__seats {
  margin: 6px 0 0;
  color: var(--pa-text-note);
  font-size: var(--pa-body-sm);
}

.pa-order__rows {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--pa-border-hair);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pa-order__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--pa-body-sm);
}

.pa-order__row dt { color: var(--pa-text-note); margin: 0; }
.pa-order__row dd { margin: 0; color: var(--pa-text); font-weight: 600; }

.pa-order__row--total {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--pa-border-hair);
}

.pa-order__row--total dt { color: var(--pa-text); font-family: var(--pa-font); font-weight: 700; }
.pa-order__row--total dd {
  font-family: var(--pa-font);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pa-order__billing {
  margin: 16px 0 0;
  color: var(--pa-text-faint);
  font-size: var(--pa-micro);
  line-height: 1.6;
}

.pa-order__action { margin-top: 22px; }
.pa-order__action .pa-btn { width: 100%; justify-content: center; }

.pa-order__note {
  margin: 14px 0 0;
  color: var(--pa-text-note);
  font-size: var(--pa-micro);
  line-height: 1.65;
}

/* When checkout cannot be started, the button is not rendered. This says why
   in the space it would have occupied, rather than leaving a gap. */
.pa-order__unavailable {
  margin: 22px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--pa-border-hair);
  border-radius: var(--pa-radius-sm);
  background: var(--pa-surface-alt);
  color: var(--pa-text-muted);
  font-size: var(--pa-body-sm);
  line-height: 1.65;
}

.pa-not-asked {
  margin: clamp(22px, 2.6vw, 30px) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pa-not-asked li {
  padding: 9px 14px;
  border: 1px solid var(--pa-border-rule);
  border-radius: var(--pa-radius-pill);
  color: var(--pa-text-note);
  font-size: var(--pa-meta);
  text-decoration: line-through;
  text-decoration-color: var(--pa-border-strong);
}

/* =====================================================================
   Requirements list
   ===================================================================== */

.pa-reqs {
  margin: clamp(28px, 3.4vw, 40px) 0 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--pa-border-rule);
}

.pa-req {
  padding: 20px 0;
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr);
  gap: 20px 32px;
  border-bottom: 1px solid var(--pa-border-rule);
}

.pa-req__label {
  margin: 0;
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-size: var(--pa-body-sm);
  font-weight: 700;
  letter-spacing: var(--pa-tracking-body);
}

.pa-req__value {
  margin: 0;
  max-width: 64ch;
  color: var(--pa-text-muted);
  font-size: 16px;
  line-height: 1.75;
  text-wrap: pretty;
}

/* =====================================================================
   Purchase confirmation
   ===================================================================== */

.pa-confirm-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 10px;
  border-radius: var(--pa-radius-pill);
  background: rgba(255, 255, 255, 0.1);
  color: var(--pa-text-on-dark);
  font-family: var(--pa-font);
  font-size: var(--pa-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pa-confirm-pill__mark {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pa-seat-active);
  color: #fff;
  font-size: 10px;
}

.pa-confirm-ref {
  margin: 0;
  color: var(--pa-text-on-dark-dim);
  font-family: var(--pa-font-alt);
  font-size: var(--pa-micro);
  letter-spacing: 0.04em;
}

.pa-entitlement {
  margin: clamp(28px, 3vw, 38px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 20px 32px;
}

.pa-entitlement__label {
  margin: 0;
  color: var(--pa-text-on-dark-dim);
  font-family: var(--pa-font);
  font-size: var(--pa-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pa-entitlement__value {
  margin: 8px 0 0;
  color: var(--pa-text-on-dark);
  font-family: var(--pa-font);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.014em;
}

.pa-code {
  margin: clamp(26px, 3vw, 34px) 0 0;
  padding: clamp(22px, 2.4vw, 28px);
  border: 1px solid var(--pa-border-panel);
  border-radius: var(--pa-radius);
  background: #fff;
}

.pa-code__label {
  margin: 0;
  color: var(--pa-text-faint);
  font-family: var(--pa-font);
  font-size: var(--pa-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pa-code__row {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.pa-code__value {
  margin: 0;
  color: var(--pa-text);
  font-family: var(--pa-font-alt);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: 0.06em;
  word-break: break-all;
}

.pa-code__copy { flex: 0 0 auto; }

.pa-code__note {
  max-width: 72ch;
  margin: 18px 0 0;
  color: var(--pa-text-note);
  font-size: var(--pa-body-sm);
  line-height: 1.7;
  text-wrap: pretty;
}

.pa-next {
  margin-top: clamp(28px, 3.4vw, 42px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 18px;
}

.pa-next__card {
  padding: clamp(22px, 2.4vw, 28px);
  display: block;
  border: 1px solid var(--pa-border-rule);
  border-radius: var(--pa-radius);
  background: #fff;
  color: inherit;
  transition: border-color var(--pa-dur-fast) ease, transform var(--pa-dur-fast) var(--pa-ease);
}

.pa-next__card:hover { border-color: var(--pa-border-hover); color: inherit; transform: translateY(-2px); }

.pa-next__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--pa-purple);
  font-family: var(--pa-font);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.014em;
}

.pa-next__body {
  margin: 10px 0 0;
  color: var(--pa-text-muted);
  font-size: var(--pa-body-sm);
  line-height: 1.7;
  text-wrap: pretty;
}

/* =====================================================================
   Manage Licence
   ===================================================================== */

.pa-licence-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.pa-licence-code {
  margin: 12px 0 0;
  color: var(--pa-text-on-dark-dim);
  font-family: var(--pa-font-alt);
  font-size: var(--pa-body-sm);
  letter-spacing: 0.08em;
}

.pa-licence-summary {
  margin: clamp(26px, 3vw, 36px) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 20px 32px;
}

.pa-licence-summary__label {
  margin: 0;
  color: var(--pa-text-on-dark-dim);
  font-family: var(--pa-font);
  font-size: var(--pa-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pa-licence-summary__value {
  margin: 8px 0 0;
  color: var(--pa-text-on-dark);
  font-family: var(--pa-font);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.014em;
}

.pa-licence-summary__extra {
  margin: 4px 0 0;
  color: var(--pa-purple-bright);
  font-size: var(--pa-meta);
}

/* The seat table is a real table, because it is tabular data and a screen
   reader user needs the column association. Below 760px each row becomes a
   labelled block instead, using the data-label attributes on the cells. */
.pa-seats {
  width: 100%;
  margin-top: clamp(24px, 3vw, 34px);
  border-collapse: collapse;
  text-align: left;
}

.pa-seats th {
  padding: 0 16px 12px 0;
  border-bottom: 1px solid var(--pa-border-rule);
  color: var(--pa-text-faint);
  font-family: var(--pa-font);
  font-size: var(--pa-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pa-seats td {
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--pa-border-rule);
  color: var(--pa-text-muted);
  font-size: var(--pa-body-sm);
  vertical-align: middle;
}

.pa-seats__name {
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-weight: 700;
  letter-spacing: -0.008em;
}

.pa-seats__status { display: inline-flex; align-items: center; gap: 9px; }

.pa-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--pa-seat-idle);
}

.pa-dot--active   { background: var(--pa-seat-active); }
.pa-dot--released { background: var(--pa-seat-released); }

.pa-seats__action { text-align: right; padding-right: 0; }

.pa-seats__confirm {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pa-seats__question {
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-size: var(--pa-meta);
  font-weight: 700;
}

.pa-seats__done {
  color: var(--pa-text-faint);
  font-size: var(--pa-meta);
}

.pa-seats__empty {
  padding: 26px 0;
  color: var(--pa-text-muted);
  font-size: var(--pa-body-sm);
  line-height: 1.7;
}

.pa-licence-actions {
  margin-top: clamp(26px, 3vw, 36px);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---- Signing in with a licence code ---- */

.pa-signin {
  max-width: 520px;
  margin: clamp(28px, 3.4vw, 44px) 0 0;
  padding: clamp(24px, 2.8vw, 34px);
  border: 1px solid var(--pa-border-panel);
  border-radius: var(--pa-radius);
  background: #fff;
}

.pa-signin__title {
  margin: 0;
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.016em;
}

.pa-signin__blurb {
  margin: 14px 0 0;
  color: var(--pa-text-muted);
  font-size: var(--pa-body-sm);
  line-height: 1.7;
}

.pa-signin__error {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--pa-error);
  background: var(--pa-surface-alt);
  color: var(--pa-error);
  font-size: var(--pa-body-sm);
  line-height: 1.6;
}

.pa-signin .pa-input {
  font-family: var(--pa-font-alt);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pa-signin__action { margin-top: 20px; }

/* =====================================================================
   Renew
   ===================================================================== */

.pa-renew {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: start;
}

.pa-renew__panel {
  padding: clamp(24px, 2.8vw, 34px);
  border: 1px solid var(--pa-border-panel);
  border-radius: var(--pa-radius);
  background: #fff;
}

.pa-renew__rows {
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pa-renew__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--pa-body-sm);
}

.pa-renew__row dt { margin: 0; color: var(--pa-text-note); }
.pa-renew__row dd { margin: 0; color: var(--pa-text); font-weight: 600; }

.pa-renew__price {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--pa-border-hair);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.pa-renew__price dt {
  margin: 0;
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-weight: 700;
}

.pa-renew__price dd {
  margin: 0;
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.024em;
}

.pa-renew__detail {
  max-width: 68ch;
  margin: clamp(24px, 3vw, 32px) 0 0;
  color: var(--pa-text-muted);
  font-size: 16px;
  line-height: 1.8;
  text-wrap: pretty;
}

.pa-renew__links {
  margin-top: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* =====================================================================
   Licensing FAQ
   ===================================================================== */

.pa-faq {
  margin-top: clamp(28px, 3.4vw, 42px);
  border-top: 1px solid var(--pa-border-rule);
}

.pa-faq__item { border-bottom: 1px solid var(--pa-border-rule); }

.pa-faq__q {
  width: 100%;
  padding: 22px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border: 0;
  background: none;
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.014em;
  text-align: left;
  cursor: pointer;
}

.pa-faq__q:hover { color: var(--pa-purple); }

.pa-faq__sign {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  position: relative;
  border-radius: 50%;
  border: 1px solid var(--pa-border-strong);
  transition: border-color var(--pa-dur-fast) ease, transform var(--pa-dur-fast) var(--pa-ease);
}

.pa-faq__sign::before,
.pa-faq__sign::after {
  content: "";
  position: absolute;
  inset: 50% 5px auto;
  height: 1px;
  background: var(--pa-text);
  transition: transform var(--pa-dur-fast) var(--pa-ease), opacity var(--pa-dur-fast) ease;
}

.pa-faq__sign::after { transform: rotate(90deg); }

.pa-faq__q[aria-expanded="true"] .pa-faq__sign { border-color: var(--pa-purple); }
.pa-faq__q[aria-expanded="true"] .pa-faq__sign::before,
.pa-faq__q[aria-expanded="true"] .pa-faq__sign::after { background: var(--pa-purple); }
.pa-faq__q[aria-expanded="true"] .pa-faq__sign::after { transform: rotate(0deg); opacity: 0; }

.pa-faq__a {
  max-width: 72ch;
  margin: 0;
  padding: 0 0 24px;
  color: var(--pa-text-muted);
  font-size: 16px;
  line-height: 1.8;
  text-wrap: pretty;
}

.pa-faq__a[hidden] { display: none; }

.pa-faq__updated {
  margin: 22px 0 0;
  color: var(--pa-text-on-dark-dim);
  font-size: var(--pa-meta);
}

/* =====================================================================
   Support
   ===================================================================== */

.pa-areas {
  margin-top: clamp(28px, 3.4vw, 42px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 0 44px;
  border-top: 1px solid var(--pa-border-rule);
}

.pa-area { padding: 26px 0 28px; border-bottom: 1px solid var(--pa-border-rule); }

.pa-area__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--pa-text);
  font-family: var(--pa-font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.014em;
}

.pa-area__body {
  max-width: 46ch;
  margin: 11px 0 0;
  color: var(--pa-text-muted);
  font-size: 15.5px;
  line-height: 1.75;
  text-wrap: pretty;
}

.pa-area__link { margin: 14px 0 0; }

.pa-routes {
  margin-top: clamp(26px, 3vw, 36px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 18px;
}

.pa-route {
  padding: clamp(22px, 2.4vw, 28px);
  border: 1px solid var(--pa-border-on-dark);
  border-radius: var(--pa-radius);
  background: var(--pa-ink-panel);
  color: inherit;
  display: block;
  transition: border-color var(--pa-dur-fast) ease, transform var(--pa-dur-fast) var(--pa-ease);
}

.pa-route:hover { border-color: rgba(255, 255, 255, 0.32); color: inherit; transform: translateY(-2px); }

.pa-route__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--pa-purple-bright);
  font-family: var(--pa-font);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.014em;
}

.pa-route__body {
  margin: 10px 0 0;
  color: var(--pa-text-on-dark-cool);
  font-size: var(--pa-body-sm);
  line-height: 1.7;
  text-wrap: pretty;
}

.pa-response {
  margin-top: clamp(24px, 3vw, 32px);
  padding-top: 20px;
  border-top: 1px solid var(--pa-border-on-dark);
}

.pa-response__label {
  margin: 0;
  color: var(--pa-text-on-dark-dim);
  font-family: var(--pa-font);
  font-size: var(--pa-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pa-response__note {
  max-width: 68ch;
  margin: 10px 0 0;
  color: var(--pa-text-on-dark-cool);
  font-size: var(--pa-body-sm);
  line-height: 1.7;
}

/* =====================================================================
   Practice enquiry
   ===================================================================== */

.pa-enquiry {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 4.5vw, 80px);
  align-items: start;
}

.pa-enquiry__panel {
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--pa-border-panel);
  border-radius: var(--pa-radius);
  background: #fff;
}

.pa-enquiry__footnote {
  margin: 16px 0 0;
  color: var(--pa-text-faint);
  font-size: var(--pa-meta);
}

.pa-enquiry__privacy {
  max-width: 52ch;
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  color: var(--pa-text-note);
  font-size: var(--pa-body-sm);
  line-height: 1.7;
}

/* =====================================================================
   Responsive
   Breakpoints match the approved design: 1180 / 1080 / 980 / 900 / 760 /
   700 / 640 / 440.
   ===================================================================== */

@media (max-width: 1080px) {
  .pa-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-facts-grid--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .pa-buy,
  .pa-renew,
  .pa-enquiry { grid-template-columns: 1fr; gap: 36px; }

  .pa-order { position: static; }
}

@media (max-width: 900px) {
  .pa-c-split { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 760px) {
  /* The seat table becomes labelled blocks. The header row is removed from
     the accessibility tree along with the visual one, and each cell carries
     its own label, so the association survives the reflow. */
  .pa-seats,
  .pa-seats tbody,
  .pa-seats tr,
  .pa-seats td { display: block; width: 100%; }

  .pa-seats thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  .pa-seats tr {
    padding: 18px 0;
    border-bottom: 1px solid var(--pa-border-rule);
  }

  .pa-seats td {
    padding: 0 0 8px;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .pa-seats td::before {
    content: attr(data-label);
    color: var(--pa-text-faint);
    font-family: var(--pa-font);
    font-size: var(--pa-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .pa-seats__action { padding-bottom: 0; }
  .pa-seats__action::before { content: ""; }

  .pa-req { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 700px) {
  .pa-plans,
  .pa-facts-grid--quad { grid-template-columns: 1fr; }

  .pa-trial-band { flex-direction: column; align-items: flex-start; gap: 22px; }
}

@media (max-width: 640px) {
  .pa-option { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pa-option__price { text-align: left; }
  .pa-code__row { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (max-width: 440px) {
  .pa-phero__actions { flex-direction: column; align-items: stretch; }
  .pa-phero__actions .pa-btn { justify-content: center; }
  .pa-licence-actions { flex-direction: column; align-items: stretch; }
  .pa-licence-actions .pa-btn { justify-content: center; }
}

/* =====================================================================
   Spacing hooks
   A handful of named classes so a template never needs an inline style.
   Each one exists because a specific block sits at a specific rhythm in
   the approved design, not as a general purpose utility set.
   ===================================================================== */

.pa-plans--spaced { margin-top: clamp(28px, 3.4vw, 42px); }
.pa-c-after { margin: 22px 0 0; }
.pa-c-lede--spaced { margin-top: 18px; }
.pa-c-h2--spaced { margin-top: clamp(40px, 5vw, 64px); }
.pa-c-note--tight { margin-top: 12px; }
.pa-confirm-download { margin-top: clamp(34px, 4vw, 52px); }

/* A form control that has to read as a quiet link. Used for sign out, which
   must be a POST rather than a link because it changes state. */
.pa-link-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* The confirmation page runs its entitlement summary directly on from the
   hero, so the two dark blocks have to meet without a seam. */
.pa-phero--continued {
  padding-bottom: clamp(40px, 5vw, 64px);
  margin-top: -1px;
}