/* Heidi's plan-first structure, within Breva's existing visual system. */
.pricing-page { padding-bottom: 84px; }
.pricing-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.pricing-intro { padding-block: 56px 32px; text-align: center; }
.pricing-intro h1 { font-size: clamp(38px, 4.3vw, 56px); }
.pricing-intro > p { margin: 18px auto 0; font-size: 18px; }
.billing-bar { grid-row: 5; display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 18px; }
.billing-options { position: relative; display: flex; min-width: 0; width: 100%; padding: 4px; margin: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--wash); }
.billing-options::before { content: ''; position: absolute; inset: 4px auto 4px 4px; width: calc((100% - 8px) / 2); background: white; border-radius: 5px; box-shadow: 0 2px 4px #25354a14; transition: transform .25s var(--ease); }
.billing-options:has(input[value="monthly"]:checked)::before { transform: translateX(100%); }
.billing-options label { position: relative; flex: 1; cursor: pointer; }
.billing-options input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.billing-options span { display: block; padding: 10px 12px; min-height: 44px; font-size: 14px; text-align: center; font-weight: 650; border-radius: 5px; }
.billing-options input:checked + span { color: var(--ink); }
.billing-options input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 3px; }
.annual-saving { color: var(--blue); font-size: 12px; font-weight: 600; }
.billing-bar noscript { font-size: 12px; }
.pricing-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
/* Shared rows keep prices and actions aligned while billing belongs to Clinician. */
.pricing-plan { min-width: 0; padding: 30px; display: grid; grid-template-rows: subgrid; grid-row: span 8; border: 1px solid var(--line); border-radius: 12px; background: white; }
.pricing-plan h2 { font-size: 26px; letter-spacing: -.025em; }
.plan-description { min-height: 48px; font-size: 14px; line-height: 1.65; margin-top: 12px; }
.plan-price { display: flex; align-items: baseline; gap: 10px; margin-top: 26px; min-height: 62px; }
.plan-price strong { color: var(--ink); font-size: 52px; font-weight: 600; letter-spacing: -.04em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.plan-price .custom-price { font-size: 44px; }
.plan-price > span { font-size: 14px; }
.plan-billing { font-size: 13px; min-height: 22px; }
.plan-action { grid-row: 6; width: 100%; margin-top: 24px; min-height: 48px; }
.pricing-plan .secondary { border: 1px solid #bcc9da; color: var(--ink); background: white; }
.pricing-plan .secondary:hover { background: var(--wash); border-color: #8193ac; }
.clinician-plan { background: #f4f7ff; border-color: #9bb8f4; }
.teams-plan { background: #f8fafc; }
.plan-features { grid-row: 7; list-style: none; padding: 0; margin: 28px 0 24px; display: grid; align-content: start; gap: 13px; font-size: 14px; line-height: 1.65; }
.plan-features li { display: flex; gap: 10px; align-items: flex-start; }
.plan-features svg { width: 18px; height: 18px; margin-top: 3px; color: #41634f; }
.plan-details-link { grid-row: 8; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; margin-top: auto; font-size: 13px; color: var(--blue); }
.plan-details-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.plan-details-link svg { width: 16px; height: 16px; }
.pricing-footnote { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; padding-block: 16px 0; }
.pricing-comparison { margin-top: 46px; }
.pricing-comparison > details { border-block: 1px solid var(--line); scroll-margin-top: 110px; }
.pricing-comparison summary, .pricing-answers summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; list-style: none; cursor: pointer; color: var(--ink); }
.pricing-comparison summary::-webkit-details-marker, .pricing-answers summary::-webkit-details-marker { display: none; }
.pricing-comparison summary { font-size: 24px; font-weight: 550; padding-block: 26px; }
.pricing-comparison summary svg, .pricing-answers summary svg { transition: transform .2s var(--ease); }
.pricing-page details[open] > summary > svg { transform: rotate(180deg); }
.comparison-content { padding-bottom: 24px; }
.comparison-content table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 15px; }
.comparison-content th, .comparison-content td { padding: 20px 16px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.comparison-content th:first-child { width: 44%; text-align: left; padding-left: 0; }
.comparison-content th { color: var(--ink); font-weight: 550; }
.comparison-content thead th { font-size: 18px; }
.comparison-content td svg { color: #41634f; }
.comparison-content td small { display: block; margin-top: 4px; font-size: 12px; }
.comparison-contact { font-size: 14px; margin-top: 24px; }
.comparison-contact a, .pricing-answers a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.pricing-faq { display: grid; grid-template-columns: 1fr 2fr; gap: 72px; padding-top: 88px; }
.pricing-faq-intro h2 { font-size: 36px; }
.pricing-faq-intro p { margin-top: 16px; font-size: 15px; }
.pricing-faq-intro .text-link { margin-top: 14px; }
.pricing-answers details { border-bottom: 1px solid var(--line); }
.pricing-answers details:first-child { border-top: 1px solid var(--line); }
.pricing-answers summary { padding-block: 22px; font-size: 17px; line-height: 1.5; }
.pricing-answers details p { padding: 0 40px 24px 0; font-size: 15px; line-height: 1.8; }
@media (min-width: 851px) and (max-width: 1100px) {
  .pricing-plan { padding: 24px; }
  .plan-price strong { font-size: 44px; }
  .plan-price { gap: 7px; }
}
@media (max-width: 850px) {
  .pricing-plans { grid-template-columns: 1fr; max-width: 560px; gap: 20px; }
  .pricing-plan { display: flex; flex-direction: column; grid-row: auto; padding: 28px; }
  .plan-description { min-height: 0; }
  .pricing-faq { grid-template-columns: 1fr; gap: 28px; padding-top: 64px; }
  .pricing-intro { padding-top: 40px; }
  .pricing-footnote { max-width: 560px; }
}
@media (max-width: 600px) {
  .pricing-page { padding-bottom: 56px; }
  .pricing-intro { padding-block: 36px 28px; }
  .pricing-intro h1 { font-size: 38px; }
  .pricing-intro > p { font-size: 16px; margin-top: 14px; }
  .pricing-plan { padding: 26px; }
  .pricing-comparison { margin-top: 36px; }
  .pricing-comparison summary { font-size: 21px; }
  .comparison-content table { font-size: 12px; }
  .comparison-content th, .comparison-content td { padding: 16px 8px; }
  .comparison-content th:first-child { width: 38%; }
  .comparison-content thead th { font-size: 13px; }
  .comparison-content td small { font-size: 11px; }
  .pricing-answers summary { font-size: 16px; gap: 16px; }
  .pricing-answers details p { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .billing-options::before, .pricing-comparison summary svg, .pricing-answers summary svg { transition: none; }
}