.subscription-surface { background: var(--white); color: var(--black); }
.subscription-page { width: var(--page); margin-inline: auto; padding-block: clamp(54px, 8vw, 104px); }
.subscription-page h1,
.subscription-page h2 { margin: 0; font-family: var(--font-primary); font-stretch: 92%; letter-spacing: -.035em; }
.subscription-page h1 { max-width: 12ch; font-size: clamp(3rem, 7vw, 5.8rem); line-height: .94; }
.subscription-page h2 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; }
.subscription-page a { text-underline-offset: .2em; }
.subscription-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: clamp(40px, 8vw, 112px); align-items: end; padding-bottom: clamp(54px, 8vw, 96px); border-bottom: 1px solid var(--black); }
.subscription-lede { max-width: 62ch; margin: 26px 0 0; color: var(--charcoal); font-family: var(--font-editorial); font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.45; }
.subscription-facts { margin: 0; border-top: 1px solid var(--black); }
.subscription-facts div,
.account-ledger dl div { display: flex; justify-content: space-between; gap: 20px; padding-block: 15px; border-bottom: 1px solid var(--border); }
.subscription-facts dt,
.account-ledger dt { color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.subscription-facts dd,
.account-ledger dd { margin: 0; text-align: right; font-weight: 650; }
.subscription-form-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr); gap: clamp(42px, 8vw, 112px); padding-block: clamp(64px, 9vw, 112px); }
.subscription-form-section > div > p,
.subscription-close p,
.subscription-confirm-page p,
.account-actions > div > p { max-width: 65ch; color: var(--charcoal); line-height: 1.65; }
.plain-feature-list { margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.plain-feature-list li { padding: 15px 0; border-bottom: 1px solid var(--border); }
.customer-form { display: grid; align-content: start; gap: 12px; padding: clamp(24px, 4vw, 42px); background: var(--neutral-bg); border-top: 3px solid var(--black); }
.customer-form label { font-size: .82rem; font-weight: 750; }
.customer-form label span { color: var(--muted); font-weight: 500; }
.customer-form input,
.customer-form select { min-width: 0; width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--black); border-radius: 2px; background: var(--white); color: var(--black); font: inherit; font-size: max(1rem, 16px); }
.customer-form input:focus-visible,
.customer-form select:focus-visible { outline: 3px solid var(--jmr-green); outline-offset: 3px; }
.customer-form .button { width: 100%; margin-top: 4px; }
.form-note,
.form-feedback,
.account-actions form p { margin: 8px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.55; }
.form-feedback { padding-top: 12px; border-top: 1px solid var(--border); color: var(--black); font-weight: 650; }
.form-error { color: #7b1118; }
.subscription-close { padding-top: clamp(54px, 8vw, 88px); border-top: 1px solid var(--black); }
.subscription-close h2 { max-width: 16ch; }
.subscription-confirm-page { min-height: 62vh; display: grid; place-items: center; }
.subscription-confirm-page > section { width: min(100%, 680px); }
.subscription-confirm-page h1 { max-width: 10ch; }
.subscription-confirm-page form { margin-top: 28px; }
.account-page { max-width: 1020px; }
.account-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; padding-bottom: 34px; border-bottom: 1px solid var(--black); }
.account-heading h1 { font-size: clamp(2.8rem, 6vw, 5rem); }
.account-heading p { margin: 12px 0 0; color: var(--muted); }
.account-status { padding: 9px 12px; border: 1px solid var(--black); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; }
.account-message,
.development-notice { margin: 24px 0 0; padding: 17px 0; border-block: 1px solid var(--border); line-height: 1.55; }
.development-notice { color: var(--charcoal); }
.account-ledger { padding-block: 38px; }
.account-ledger dl { margin: 0; }
.account-actions { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(300px, 1fr); gap: clamp(34px, 7vw, 86px); padding-block: 42px; border-top: 1px solid var(--black); }
.account-actions h2 { font-size: clamp(1.8rem, 3vw, 2.65rem); }
.compact-form { padding: 0; border: 0; background: transparent; }
.disabled-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.disabled-actions form,
.disabled-actions .button { width: 100%; }
.disabled-actions button:disabled { opacity: .45; cursor: not-allowed; }
.text-button { min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--black); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: .22em; cursor: pointer; }
.text-button:focus-visible { outline: 3px solid var(--jmr-green); outline-offset: 3px; }
.account-access-forms { display: grid; gap: 28px; }

@media (max-width: 720px) {
  .subscription-intro,
  .subscription-form-section,
  .account-actions { grid-template-columns: 1fr; }
  .subscription-intro { align-items: start; }
  .account-heading { align-items: start; flex-direction: column; }
  .account-status { align-self: flex-start; }
}

@media (max-width: 390px) {
  .disabled-actions { grid-template-columns: 1fr; }
  .subscription-page h1 { font-size: 2.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}