body { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
  .pricing-page { box-sizing: border-box; max-width: 960px; width: 100%; margin: 0 auto; padding: 48px 20px 64px; flex: 1; overflow-x: hidden; }
  .pricing-page-header { text-align: center; margin-bottom: 48px; }
  .pricing-page-header .logo-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 24px; }
  .pricing-page-header .logo-link img { width: 36px; height: 36px; }
  .pricing-page-header .logo-link span { font-size: 1.2rem; font-weight: 700; color: var(--gold-text, var(--gold)); }
  .pricing-page-header h1 { font-size: 2.2rem; color: var(--text); margin: 0 0 12px; }
  .pricing-page-header p { color: var(--text-dim); font-size: 1.05rem; max-width: 540px; margin: 0 auto; }
  .pricing-section { margin-bottom: 56px; }
  .pricing-section-title { text-align: center; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 24px; }
  .pricing-page .pricing-grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; display: grid; max-width: 820px; width: 100%; margin-left: auto; margin-right: auto; }
  .pricing-page .pricing-grid--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; display: grid; max-width: 960px; width: 100%; margin-left: auto; margin-right: auto; }
  .pricing-page .pricing-card--onetime { opacity: 0.95; }
  .pricing-page .pricing-card--onetime .tier-price { font-size: 2.4rem; }
  @media (max-width: 800px) {
    .pricing-page .pricing-grid--3col { grid-template-columns: 1fr; max-width: 420px; }
  }
  /* #321: mobile — single-column cards, text overflow prevention, consistent button sizing */
  @media (max-width: 600px) {
    .pricing-page .pricing-grid--2col { grid-template-columns: 1fr; max-width: 420px; }
    /* Prevent card text from overflowing the card boundary (#321) */
    .pricing-page .pricing-card {
      overflow: hidden;
      word-break: break-word;
      overflow-wrap: break-word;
    }
    .pricing-page .tier-features li {
      overflow-wrap: break-word;
      word-break: break-word;
    }
    /* Consistent CTA button sizing across all cards on mobile (#321) */
    .pricing-page .tier-cta {
      width: 100%;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.95rem;
      padding: 12px;
      box-sizing: border-box;
    }
    .pricing-page-header h1 { font-size: 1.8rem; }
    .pricing-page-header p { font-size: 1rem; }
  }
  .pricing-page .pricing-card { background: var(--bg3); border: 2px solid var(--border); border-radius: 12px; padding: 32px 28px; display: flex; flex-direction: column; position: relative; transition: border-color 0.2s, transform 0.2s; }
  .pricing-page .pricing-card:hover { border-color: var(--gold-dim); transform: translateY(-2px); }
  .pricing-page .pricing-card.featured { border-color: var(--gold); background: linear-gradient(135deg, rgba(201,168,76,0.08) 0%, var(--bg3) 100%); }
  .pricing-page .pricing-card.featured-pro { border-color: var(--accent); background: linear-gradient(135deg, rgba(74,130,240,0.08) 0%, var(--bg3) 100%); }
  .pricing-page .tier-badge-label { position: absolute; top: -1px; right: 16px; background: var(--gold); color: #0a0a0f; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 10px; border-radius: 0 0 6px 6px; }
  .pricing-page .tier-badge-label.pro { background: var(--accent); color: #fff; }
  .pricing-page .tier-name { font-size: 1.3rem; font-weight: 700; color: var(--gold-text, var(--gold)); margin-bottom: 8px; margin-top: 8px; }
  .pricing-page .tier-name.pro { color: var(--accent); }
  .pricing-page .tier-price { font-size: 2.4rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
  .pricing-page .tier-price .currency { font-size: 1.2rem; font-weight: 400; color: var(--text-dim); }
  .pricing-page .tier-billing { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 20px; }
  .pricing-page .tier-features { list-style: none; margin: 0 0 12px; padding: 0; }
  .pricing-page .tier-features li { padding: 7px 0; font-size: 0.9rem; color: var(--text); display: flex; align-items: flex-start; gap: 8px; }
  .pricing-page .tier-features li::before { content: '✓'; color: var(--accent2); font-weight: 700; flex-shrink: 0; }
  .pricing-page .tier-features li.disabled { color: var(--text-muted, #c2ccde); opacity: 1; }
  .pricing-page .tier-features li.disabled::before { content: '–'; color: var(--text-muted, #c2ccde); }
  /* margin-top:auto pins the CTA to the card bottom for equal-height cards
     (replaces the old flex:1 on .tier-features, which broke once feature
     lists were split across a "See all features" disclosure). */
  .pricing-page .tier-cta { display: block; width: 100%; padding: 12px; font-size: 0.95rem; border-radius: 8px; border: 2px solid transparent; cursor: pointer; font-weight: 700; text-align: center; text-decoration: none; transition: opacity 0.15s, background 0.15s; box-sizing: border-box; margin-top: auto; }

  /* "See all features" disclosure inside plan cards */
  .pricing-page .tier-more { margin: 0 0 16px; }
  .pricing-page .tier-more > summary { cursor: pointer; list-style: none; color: var(--gold-text, var(--gold, #c9a84c)); font-size: 0.85rem; font-weight: 600; padding: 4px 0; }
  .pricing-page .tier-more > summary::-webkit-details-marker { display: none; }
  .pricing-page .tier-more > summary::before { content: '+'; font-weight: 700; margin-right: 6px; }
  .pricing-page .tier-more[open] > summary::before { content: '−'; }
  .pricing-page .tier-more .tier-features { margin: 4px 0 0; }
  .pricing-page .tier-cta:hover { opacity: 0.88; }
  .pricing-page .tier-cta.free-cta { background: transparent; border-color: var(--gold, #c9a84c); color: var(--gold-text, var(--gold, #c9a84c)); }
  .pricing-page .tier-cta.free-cta:hover { background: rgba(201,168,76,0.08); }
  .pricing-page .tier-cta.primary { background: var(--gold); color: #0a0a0f; border-color: var(--gold); }
  .pricing-page .tier-cta.pro-primary { background: var(--color-blue-700, #2a5fc8); color: #fff; border-color: var(--color-blue-700, #2a5fc8); }
  /* accent-outline: was hardcoded #fff (invisible on the light/sunrise theme, ~1.3:1).
     Use the theme accent so it works on both light and dark surfaces. */
  .pricing-page .tier-cta.accent-outline { background: transparent; border-color: var(--gold, #c9a84c); color: var(--gold-text, var(--gold, #c9a84c)); }
  .pricing-page .tier-cta.accent-outline:hover { background: var(--gold-alpha-08, rgba(201,168,76,0.1)); }
  .pricing-page .tier-cta.accent { background: var(--color-blue-700, #2a5fc8); color: #fff; border-color: var(--color-blue-700, #2a5fc8); }
  .pricing-page .tier-fine-print { text-align: center; font-size: 0.78rem; color: var(--text-muted, #b3aec8); margin: 6px 0 0; font-style: italic; }

  .addon-section { text-align: center; margin: 48px 0; }
  .addon-section h3 { color: var(--text); font-size: 1.2rem; margin-bottom: 8px; }
  .addon-section p { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 24px; }
  .addon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  @media (max-width: 700px) { .addon-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 400px) { .addon-grid { grid-template-columns: 1fr; } }
  .addon-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 20px 16px; text-align: center; }
  .addon-card .addon-name { font-weight: 700; color: var(--text); font-size: 0.9rem; margin-bottom: 4px; }
  .addon-card .addon-desc { font-size: 0.78rem; color: var(--text-dim); margin-bottom: 12px; }
  .addon-card .addon-price { font-size: 1.3rem; font-weight: 700; color: var(--gold-text, var(--gold)); }
  .faq-section { max-width: 640px; margin: 0 auto 48px; }
  .faq-section h3, .faq-section .pricing-faq-title { text-align: center; font-size: 1.2rem; color: var(--text); margin-bottom: 24px; }
  .faq-item { border-bottom: 1px solid var(--border); padding: 16px 0; }
  .faq-item summary { cursor: pointer; font-weight: 600; font-size: 0.95rem; color: var(--text); list-style: none; display: flex; align-items: center; gap: 8px; }
  .faq-item summary::before { content: '+'; color: var(--gold-text, var(--gold)); font-weight: 700; font-size: 1.1rem; }
  .faq-item[open] summary::before { content: '−'; }
  .faq-item p { color: var(--text-dim); font-size: 0.9rem; line-height: 1.6; margin: 8px 0 0; padding-left: 20px; }
  .pricing-footer { text-align: center; padding: 32px 20px; border-top: 1px solid var(--border); }
  .pricing-footer a { color: var(--gold-text, var(--gold)); text-decoration: none; }
  .pricing-footer a:hover { text-decoration: underline; }
  .pricing-footer p { color: var(--text-dim); font-size: 0.8rem; margin: 8px 0 0; }

  .social-proof-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; padding: 14px 20px; background: rgba(201,168,76,0.06); border: 1px solid rgba(201,168,76,0.18); border-radius: 10px; margin-bottom: 40px; font-size: 0.875rem; color: var(--text-dim); }
  .social-proof-strip-item { display: flex; align-items: center; gap: 6px; }
  .proof-icon { font-size: 1rem; }
  .proof-divider { color: var(--border); display: none; }
  @media (min-width: 640px) { .proof-divider { display: inline; } }

  .tier-arc-sub { font-size: 0.78rem; font-style: italic; color: var(--text-muted, #b3aec8); margin: 2px 0 10px; letter-spacing: 0.02em; }

  /* ── Audience segmented control ("For you" / "For practitioners") ──
     Filters plan sections via body[data-audience] (js/pricing-page.js).
     No attribute (JS unavailable) = both sections visible. */
  .audience-toggle { display: flex; gap: 0; border: 1px solid var(--border, #3a3a3a); border-radius: 10px; overflow: hidden; width: fit-content; margin: 0 auto 1.5rem; }
  .audience-btn { padding: 0.7rem 1.6rem; background: transparent; border: none; color: var(--text-dim, #888); font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; }
  .audience-btn.active { background: var(--gold, #c9a84c); color: #0a0a0f; }
  body[data-audience="you"] #plans-practitioners { display: none; }
  body[data-audience="practitioners"] #plans-you { display: none; }

  /* ── Billing period toggle (moved from an inline <style> block so the
     page carries no inline CSS/JS — CSP hash hygiene) ── */
  .billing-toggle { display: flex; gap: 0; border: 1px solid var(--border, #3a3a3a); border-radius: 8px; overflow: hidden; width: fit-content; margin: 0 auto 1.5rem; }
  .billing-toggle[hidden] { display: none; }
  .billing-btn { padding: 0.55rem 1.4rem; background: transparent; border: none; color: var(--text-dim, #888); font-size: 0.9rem; cursor: pointer; transition: background 0.15s, color 0.15s; }
  .billing-btn.active { background: var(--gold, #c9a84c); color: #0a0a0f; font-weight: 600; }
  .billing-badge { background: #1a3a1a; color: #6bda6b; font-size: 0.7rem; border-radius: 4px; padding: 1px 5px; margin-left: 6px; }

  /* ── One-time add-ons disclosure ── */
  .addons-disclosure { border: 1px solid var(--border); border-radius: 12px; padding: 18px 22px; background: var(--gold-alpha-06, rgba(201, 168, 76, 0.06)); }
  .addons-disclosure > summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 4px; text-align: center; }
  .addons-disclosure > summary::-webkit-details-marker { display: none; }
  .addons-disclosure-title { font-weight: 700; color: var(--text); font-size: 1rem; }
  .addons-disclosure-title::before { content: '+'; color: var(--gold-text, var(--gold, #c9a84c)); font-weight: 700; margin-right: 8px; }
  .addons-disclosure[open] .addons-disclosure-title::before { content: '−'; }
  .addons-disclosure-sub { color: var(--text-dim); font-size: 0.85rem; }
  .addons-disclosure[open] { padding-bottom: 28px; }

  .deferral-cta { margin: 0 0 48px; padding: 28px 32px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 14px; text-align: center; }
  .deferral-cta p { color: var(--text-dim); font-size: 0.95rem; line-height: 1.7; margin: 0 0 14px; max-width: 540px; margin-left: auto; margin-right: auto; }
  .deferral-cta a { color: var(--gold-text, var(--gold)); text-decoration: none; font-weight: 600; }
  .deferral-cta a:hover { text-decoration: underline; }

  .trust-proof-section { padding: 48px 20px 16px; }
  .trust-proof__heading { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-text, var(--gold)); text-align: center; margin: 0 0 28px; }
  .trust-proof__grid { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 860px; margin: 0 auto; }
  @media (min-width: 600px) { .trust-proof__grid { grid-template-columns: repeat(3, 1fr); } }
  .trust-proof-card { background: rgba(255,255,255,0.03); border: 1px solid var(--border, rgba(255,255,255,0.1)); border-radius: 12px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
  .trust-proof-card__quote { font-size: 0.9rem; line-height: 1.65; color: var(--text-dim, #d8d5e8); font-style: italic; margin: 0; }
  .trust-proof-card__attribution { font-size: 0.75rem; color: var(--text-muted, #b3aec8); margin: 0; }

  @media (max-width: 375px) {
    .pricing-page { padding: 32px 1rem 48px; }
    .pricing-page-header { margin-bottom: 32px; }
    .pricing-page-header h1 { font-size: 1.6rem; margin-bottom: 8px; }
    .pricing-page-header p { font-size: 0.95rem; }
    .pricing-page .pricing-grid--2col { gap: 16px; }
    .pricing-page .pricing-card { padding: 24px 18px; }
    .pricing-page .tier-name { font-size: 1.1rem; margin-bottom: 6px; margin-top: 6px; }
    .pricing-page .tier-price { font-size: 2rem; margin-bottom: 2px; }
    .pricing-page .tier-price .currency { font-size: 1rem; }
    .pricing-page .tier-billing { font-size: 0.75rem; margin-bottom: 16px; }
    .pricing-page .tier-features { margin-bottom: 20px; }
    .pricing-page .tier-features li { padding: 6px 0; font-size: 0.85rem; gap: 6px; overflow-wrap: break-word; word-break: break-word; }
    .pricing-page .tier-cta { padding: 12px 8px; min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
    .pricing-page .tier-fine-print { font-size: 0.7rem; margin-top: 8px; }
    .pricing-page .tier-badge-label { font-size: 0.6rem; padding: 2px 8px; right: 12px; }
    .pricing-section { margin-bottom: 40px; }
    .pricing-section-title { font-size: 0.75rem; margin-bottom: 18px; }
    .tier-arc-sub { font-size: 0.72rem; margin: 2px 0 8px; }
    .deferral-cta { padding: 20px 1rem; margin: 0 0 32px; }
    .deferral-cta p { font-size: 0.9rem; margin-bottom: 10px; }
    .faq-section { margin-bottom: 32px; }
    .faq-section h3, .faq-section .pricing-faq-title { font-size: 1rem; margin-bottom: 16px; }
    .faq-item { padding: 12px 0; }
    .faq-item summary { font-size: 0.9rem; }
    .faq-item p { font-size: 0.85rem; padding-left: 16px; }
    .social-proof-strip { gap: 8px 12px; padding: 12px 1rem; font-size: 0.8rem; margin-bottom: 32px; }
    .proof-icon { font-size: 0.9rem; }
  }

/* A11y (2026-07-12): light theme renders gold-700 text at 4.48:1 on the card
   parchment — 0.02 under AA. Darken interactive gold text to gold-800 there. */
html[data-theme="light"] .pricing-page .tier-more > summary,
html[data-theme="light"] .pricing-page .tier-cta.free-cta {
  color: var(--color-gold-800, #5a4824);
}