.pricing-main { padding-block: 50px 72px; }
.pricing-intro { text-align: center; }
.pricing-intro h1 { margin: 0; font-size: clamp(36px, 4.1vw, 50px); line-height: 1.2; font-weight: 600; letter-spacing: -1.8px; }
.pricing-intro h1 span { color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 0 7px 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.pricing-intro > p { max-width: 640px; margin: 20px auto 0; color: var(--secondary); font-size: 17px; line-height: 1.6; }
.billing-control { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; border: 0; padding: 0; margin: 29px 0 0; min-height: 44px; min-inline-size: 0; }
.billing-choice { color: var(--secondary); font-size: 15px; font-weight: 600; cursor: pointer; border: 0; background: none; padding: 10px 0; }
.billing-choice[aria-pressed="true"] { color: var(--accent-dark); }
.billing-toggle { position: relative; flex: 0 0 48px; width: 48px; height: 28px; padding: 0; border: 1px solid #ccd9c8; border-radius: 20px; background: #dce6d7; cursor: pointer; transition: background 180ms, border-color 180ms; }
.billing-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #183b2733; transition: transform 180ms; }
.billing-toggle[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.billing-toggle[aria-checked="true"]::after { transform: translateX(20px); }
.pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 24px; max-width: 860px; margin: 36px auto 0; }
.plan-card { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; margin-block: 12px; padding: 30px 27px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 10px 28px -14px #283f2521, 0 2px 5px #26332804; }
.plan-card--featured { margin-block: 0; padding-block: 42px; border-color: var(--accent); background: linear-gradient(180deg, #f4faf2 0%, #fff 52%); box-shadow: 0 12px 32px -12px #2c79512b, 0 0 0 1px #2c79510d; }
.popular-badge { position: absolute; top: 16px; right: 20px; display: inline-flex; align-items: center; gap: 7px; border-radius: 20px; background: var(--accent); color: #fff; padding: 8px 15px; font-size: 10px; line-height: 1.4; font-weight: 550; letter-spacing: .1px; }
.popular-badge .icon { width: 11px; height: 11px; }
.plan-card h2 { font-size: 22px; line-height: 1.35; letter-spacing: -.5px; font-weight: 550; margin: 0; }
/* Reserve NumberFlow's full height, including its digit mask, in both billing states. */
.plan-price { display: flex; align-items: baseline; flex-wrap: nowrap; column-gap: 7px; margin-top: 16px; height: 72px; min-height: 72px; flex-shrink: 0; }
.plan-amount { color: var(--accent-dark); font-size: 48px; line-height: 1.15; letter-spacing: -1.9px; font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-amount.is-numeric { inline-size: 190px; flex: 0 0 190px; }
.plan-amount.is-numeric > drop-copy { font-size: .7em; letter-spacing: -1px; }
.plan-card--basic .plan-amount { color: var(--ink); }
.plan-amount.is-contact { font-size: 31px; letter-spacing: -1px; }
.plan-period { color: var(--secondary); font-size: 13px; white-space: nowrap; }
.plan-billing-note { min-height: 18px; margin: 4px 0 0; font-size: 11px; line-height: 1.6; color: #7d8875; }
.plan-description { min-height: 46px; color: var(--secondary); font-size: 14px; line-height: 1.6; margin: 4px 0 19px; }
.plan-cta { position: relative; width: 100%; min-height: 47px; font-size: 13px; justify-content: space-between; }
.plan-cta--secondary { border-color: #cddbc6; color: var(--accent-dark); background: #fff; box-shadow: 0 1px 2px #26332805; }
.plan-cta--secondary:hover { background: #f3f7ef; border-color: #a9c29e; }
.plan-features { display: flex; flex-direction: column; gap: 16px; list-style: none; margin: 25px 0 0; padding: 22px 0 0; border-top: 1px solid #e8eee4; }
.plan-features li { display: flex; align-items: flex-start; gap: 10px; color: #626d5c; font-size: 14px; line-height: 1.6; }
.plan-features .icon { width: 17px; height: 17px; color: var(--accent); margin-top: 2px; stroke-width: 1.85; }
.plan-features li:first-child { color: var(--accent-dark); font-weight: 600; }
/* Decorative light sits behind the content and never intercepts an edit or click. */
.plan-card--featured::before,
.plan-card--featured::after { content: ''; position: absolute; pointer-events: none; border-radius: inherit; z-index: -1; }
.plan-card--featured::before { inset: 0; opacity: 0; background: radial-gradient(340px circle at var(--spot-x, 75%) var(--spot-y, 12%), #8bbc942e, transparent 75%); transition: opacity 450ms ease; }
.plan-card--featured::after { inset: -1px; opacity: 0; box-shadow: 0 0 0 1px #519b6573, 0 10px 32px -12px #2c79512b; transition: opacity 350ms ease; }
.pricing-motion-active .plan-card--featured::before { opacity: .6; }
.pricing-motion-active .plan-card--featured:is(.is-pointer-lit, :focus-within)::before,
.plan-card--featured:focus-within::after { opacity: 1; }
.pricing-motion-active .plan-card--featured.is-pointer-lit::after { opacity: 1; }
.plan-card--featured .plan-cta { isolation: isolate; overflow: hidden; background: linear-gradient(115deg, #328057, #2c7951 52%, #256645); box-shadow: inset 0 1px 0 #ffffff38, 0 2px 5px #235b3420; }
.plan-card--featured .plan-cta > * { position: relative; z-index: 1; }
.plan-card--featured .plan-cta::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, #e3f9da26 49%, #ffffff38 50%, #e3f9da26 51%, transparent 70%); transform: translateX(-110%); opacity: 0; }
.plan-card--featured .plan-cta:focus-visible { border-color: #8fc69a; box-shadow: inset 0 1px 0 #ffffff52, 0 0 0 3px #2c795119; }
@media (hover: hover) and (pointer: fine) {
  .plan-card--featured .plan-cta:hover { border-color: #8fc69a; box-shadow: inset 0 1px 0 #ffffff52, 0 4px 12px #2c79512b; }
}
@media (prefers-reduced-motion: no-preference) {
  .pricing-motion-active .plan-card--featured:not(.is-pointer-lit):not(:focus-within)::before { animation: pricing-light-breathe 7s ease-in-out infinite alternate; }
  .pricing-motion-active .plan-card--featured .plan-cta:is(.is-pro-nudge, :focus-visible)::after { animation: pricing-button-glint 1.8s ease-in-out both; }
  @media (hover: hover) and (pointer: fine) {
    .pricing-motion-active .plan-card--featured .plan-cta:hover::after { animation: pricing-button-glint 1.8s ease-in-out both; }
  }
}
@keyframes pricing-light-breathe { from { opacity: .25; } to { opacity: .8; } }
@keyframes pricing-button-glint {
  0% { transform: translateX(-110%); opacity: 0; }
  15% { opacity: .8; }
  80% { opacity: .8; }
  100% { transform: translateX(110%); opacity: 0; }
}
.editor-mode .plan-card--featured::before,
.editor-mode .plan-card--featured::after,
.editor-mode .plan-card--featured .plan-cta::after { display: none; }
.pricing-notes { max-width: 680px; margin: 28px auto 0; text-align: center; color: var(--secondary); font-size: 12px; line-height: 1.7; }
.pricing-notes p { margin: 0; }
.pricing-notes p + p { margin-top: 5px; font-size: 11px; }
.price-digits { display: inline-flex; align-items: baseline; gap: 5px; }
.price-currency { font-size: 18px; letter-spacing: -.5px; font-weight: 550; }
.price-digits[hidden] { display: none; }
.price-digits number-flow { line-height: 1; }
.pricing-footer .footer-bottom { padding-top: 21px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (min-width: 761px) and (max-width: 960px) {
  .pricing-grid { gap: 20px; }
}
@media (max-width: 760px) {
  .pricing-main { padding-block: 38px 56px; }
  .pricing-intro h1 { font-size: clamp(33px, 7vw, 44px); letter-spacing: -1.25px; max-width: 440px; margin-inline: auto; }
  .pricing-intro > p { font-size: 15px; margin-top: 18px; }
  .pricing-grid { grid-template-columns: 1fr; gap: 20px; margin: 28px auto 0; max-width: 480px; }
  .plan-card, .plan-card--featured { margin: 0; padding: 29px; }
  .popular-badge { top: 29px; right: 25px; }
  .plan-card--featured h2 { padding-right: 140px; }
  .plan-description { min-height: 0; margin-top: 4px; }
  .plan-features { gap: 16px; margin-top: 25px; padding-top: 23px; }
}
@media (max-width: 400px) {
  .pricing-main { padding-top: 36px; }
  .plan-amount.is-numeric { font-size: 42px; inline-size: 162px; flex-basis: 162px; }
  .price-currency { font-size: 16px; }
  .billing-control { gap: 9px; }
  .billing-choice { font-size: 13px; }
  .plan-card, .plan-card--featured { padding: 25px 22px; }
  .plan-card h2 { font-size: 21px; }
  .popular-badge { top: 12px; right: 18px; }
  .plan-card--featured { padding-top: 43px; }
  .plan-card--featured h2 { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .billing-toggle, .billing-toggle::after { transition: none; }
  .plan-card--featured::before, .plan-card--featured::after { transition: none; animation: none; }
  .plan-card--featured .plan-cta::after { display: none; }
}