body.editorial .pricing-view { max-width: 1100px; padding-top: var(--s-64); padding-bottom: var(--s-80); }
.pricing-heading { max-width: 760px; margin-bottom: var(--s-40); }
.pricing-heading h1 { font-family: var(--serif); font-size: clamp(42px, 5vw, 68px); line-height: 1.06; margin: var(--s-16) 0 var(--s-24); font-weight: 400; }
.pricing-heading em { color: var(--pitch); }
.pricing-heading p { max-width: 620px; font-size: 18px; line-height: 1.6; }
.pricing-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-24); }
.pricing-option { display: flex; flex-direction: column; gap: var(--s-18); padding: var(--s-32); border: 1px solid var(--rule); border-radius: var(--r-14); background: var(--paper); }
.pricing-option h2, .pricing-next h2, .pricing-faq h2, .setup-heading h2 { font-family: var(--serif); font-size: 32px; font-weight: 400; line-height: 1.15; }
.pricing-option p { margin: 0; line-height: 1.6; }
.pricing-option .pricing-value { font-size: 22px; font-weight: 500; }
.pricing-option ul { padding-left: var(--s-20); margin: 0; line-height: 1.8; list-style: disc; }
.pricing-option .pricing-note { font-size: var(--t-sm); opacity: .8; margin-top: auto; }
.pricing-option .pp-btn { align-self: flex-start; white-space: normal; }
/* The whole dark pricing card was raw hex — its ground, its text, its muted
   meta line and its inverted button, five literals for colours the palette
   already had. #193e32 is --pitch-deep (the same dark green the landing-page
   scenes use, which was also hex there); the two off-whites are --paper. The
   muted meta line is --on-dark-mute rather than a bespoke pale green: 8.22:1
   on the card, where the old #c0d9ca sat at 7.2:1 — both pass, but one of them
   is a token.

   It was --pitch-soft until dark mode landed, and that was wrong for a reason
   worth recording: --pitch-soft is the *chip tint*, which inverts with the
   theme, while this card's ground (--pitch-deep) deliberately does not. The
   pairing measured 8.4:1 in light and 1.11:1 in dark. --on-dark / --on-dark-mute
   are the constants for grounds that never invert. */
.pricing-platform { background: var(--pitch-deep); color: var(--on-dark); border-color: var(--pitch-deep); }
body.editorial .pricing-platform .pp-meta { color: var(--on-dark-mute); }
body.editorial .pricing-platform .pp-btn { background: var(--on-dark); color: var(--pitch-deep); border-color: var(--on-dark); }
.pricing-next { padding: var(--s-56) 0; }
.pricing-next h2 { margin: var(--s-12) 0 var(--s-24); }
.setup-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; gap: var(--s-24); }
.setup-grid li { min-width: 0; border-top: 1px solid var(--rule); padding-top: var(--s-18); }
.setup-grid h3 { font-size: 17px; margin: var(--s-12) 0 var(--s-8); font-weight: 600; }
.setup-grid p { font-size: var(--t-base); line-height: 1.6; margin: 0 0 var(--s-16); }
.pricing-faq { max-width: 780px; }
.pricing-faq h2 { margin-bottom: var(--s-24); }
.pricing-faq details { border-top: 1px solid var(--rule); padding: var(--s-20) 0; }
.pricing-faq summary { cursor: pointer; font-weight: 500; }
.pricing-faq p { line-height: 1.7; margin: var(--s-16) 0 0; }
.pricing-faq a, .setup-grid a { text-decoration: underline; text-underline-offset: 4px; }
.workspace-setup { padding: var(--s-28); border: 1px solid var(--rule); border-radius: var(--r-14); background: var(--bone); margin-bottom: var(--s-32); }
.setup-heading { margin-bottom: var(--s-24); }
.setup-heading h2 { margin: var(--s-8) 0; }
.setup-heading p { line-height: 1.6; max-width: 650px; }
.signup-next { padding: var(--s-18); border: 1px solid var(--rule); border-radius: var(--r-8); margin-bottom: var(--s-24); background: var(--bone); font-size: var(--t-base); line-height: 1.6; }
.signup-next ol { padding-left: var(--s-20); list-style: decimal; margin: var(--s-8) 0 0; }
.signup-terms { font-size: var(--t-xs); line-height: 1.6; margin-top: var(--s-16); }
.signup-terms a { text-decoration: underline; }
.free-allowance { padding-left: var(--s-20); list-style: disc; line-height: 1.7; margin: var(--s-16) 0; }
.free-allowance li { margin-bottom: var(--s-10); }
.free-usage { display: flex; flex-wrap: wrap; gap: var(--s-12) var(--s-24); margin-bottom: var(--s-20); padding: var(--s-18) var(--s-22); border: 1px solid var(--rule); border-radius: var(--r-14); font-size: var(--t-sm); }
.free-usage a { text-decoration: underline; }
body.editorial .signup-layout { max-width: 1050px; display: grid; grid-template-columns: 1.1fr 1fr; align-items: start; gap: var(--s-64); }
body.editorial .signup-layout .auth-shell { width: 100%; max-width: none; margin: 0; }
.signup-pricing { margin-top: var(--s-8); padding: var(--s-32); border-radius: var(--r-14); background: var(--bone); border: 1px solid var(--rule); }
.signup-pricing h2 { font-family: var(--serif); font-size: 42px; line-height: 1.1; margin: var(--s-16) 0; }
.signup-pricing h3 { font-size: 21px; margin: var(--s-12) 0; }
.signup-pricing p { line-height: 1.7; margin-bottom: var(--s-20); }
.signup-pricing hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-28) 0; }
.signup-pricing > a { display: block; width: fit-content; margin-top: var(--s-18); }
@media (max-width: 650px) {
  body.editorial .signup-layout { grid-template-columns: 1fr; gap: var(--s-28); }
  body.editorial .pricing-view { padding-top: var(--s-36); }
  .pricing-options, .setup-grid { grid-template-columns: 1fr; }
  .pricing-option, .workspace-setup { padding: var(--s-24); }
  body.editorial .masthead .mast-right { gap: var(--s-8); }
  body.editorial .masthead .mast-right .nav-item { padding-left: var(--s-4); padding-right: var(--s-4); }
}