/* pricing */
.hero--center { padding-bottom: clamp(24px, 3vw, 40px); }
.hero--center .h1 { max-width: 18ch; margin-inline: auto; }
.plans { padding-top: clamp(24px, 3vw, 48px); }
.plans.section { padding-top: clamp(24px, 3vw, 48px) !important; }
.pricing-grid.cards:not(.active) { display: none; }
.pricing-grid.cards { margin-inline: auto; align-items: stretch; }
.pricing-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.pricing-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1180px; }
.pricing-grid.active { animation: rise .5s var(--ease); }
.plan { padding-top: 44px; gap: 12px; }
.plan .card-text { flex: none; min-height: 3em; }
.plan .card-price { margin-top: 6px; }
.plan-period { margin: 0; font: 400 12.5px/1.4 var(--mono); letter-spacing: .03em; color: var(--ink-2); }
.plan-allow { flex: none; padding: 12px 0; border-block: 1px solid var(--hair); font: 400 13.5px/1.4 var(--mono); color: var(--ink); }
.plan .card-list { flex: 1; align-content: start; margin-bottom: 14px; }
.plan .btn { white-space: normal; text-align: center; height: auto; min-height: 52px; padding-block: 14px; }
.plan-note { margin: 4px 0 0; font-size: 13.5px; }
.plan-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.flat-band .stats { border-top-color: var(--hair); margin: 0; }
.comparison-section table.data th:not(:first-child), .comparison-section table.data td:not(:first-child) { text-align: center; padding-inline: 12px; }
.comparison-section table.data td:first-child { min-width: 14rem; }
.comparison-section table.data .cell-limit { display: block; margin-top: 4px; color: var(--ink-2); font-size: 12px; white-space: nowrap; }
.faq-section .faq-question { text-transform: none; letter-spacing: .02em; font: 500 17px/1.45 var(--body); }
@media (max-width: 1100px) { .pricing-grid.cols-3 { grid-template-columns: 1fr; max-width: 520px; } }
@media (max-width: 720px) { .pricing-grid.cols-2 { grid-template-columns: 1fr; } .comparison-section table.data { min-width: 640px; } }
/* R2-D price-card effects (driven by js/pricing-fx.js; classes are added by the script, so without it the plain cards above apply) */
@property --fx-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.card.fx-card {
  --fx-mix: #fff; --fx-hi: rgba(255, 255, 255, .85); --fx-tint: 20%; --fx-sh: 22, 30, 48; --fx-sheen: .5; --fx-edge: 100%;
  --mx: 50%; --my: 0%; --glow: 0;
  --fx-a: var(--accent-2, #2f6bff); --fx-b: var(--accent, #1f55e0);
  --fx-tf: perspective(1100px) rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg)) translate3d(0, calc(var(--lift, 0) * 1px), 0);
  transform: var(--fx-tf);
  transform-origin: 50% 50%;
  background-image:
    radial-gradient(460px circle at var(--mx) var(--my), color-mix(in srgb, var(--fx-hi) calc(var(--glow) * 100%), transparent), transparent 66%),
    radial-gradient(640px circle at var(--mx) var(--my), color-mix(in srgb, var(--fx-a) calc(var(--glow) * var(--fx-tint)), transparent), transparent 70%);
  transition: box-shadow .55s var(--ease), border-color .4s, scale .22s var(--ease);
}
.card.fx-card.is-rec {
  background-image:
    radial-gradient(460px circle at var(--mx) var(--my), color-mix(in srgb, var(--fx-hi) calc(var(--glow) * 100%), transparent), transparent 66%),
    radial-gradient(640px circle at var(--mx) var(--my), color-mix(in srgb, var(--fx-a) calc(var(--glow) * var(--fx-tint)), transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--fx-a) 9%, transparent), transparent 46%);
  box-shadow: 0 26px 60px -30px color-mix(in srgb, var(--fx-b) 55%, transparent), 0 24px 50px -30px rgba(var(--fx-sh), .4), inset 0 1px 0 var(--card-hi);
}
.card.fx-card::before, .card.fx-card::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: -1; }
.card.fx-card::before {
  padding: 1.5px;
  background: radial-gradient(320px circle at var(--mx) var(--my), color-mix(in srgb, var(--fx-a) calc(var(--glow) * 100%), transparent), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.card.fx-card.is-rec::before {
  background:
    radial-gradient(320px circle at var(--mx) var(--my), color-mix(in srgb, #fff calc(var(--glow) * 70%), transparent), transparent 70%),
    conic-gradient(from var(--fx-ang), color-mix(in srgb, var(--fx-b) 30%, transparent) 0%, color-mix(in srgb, var(--fx-a) 22%, transparent) 45%, var(--fx-a) 74%, color-mix(in srgb, var(--fx-a) 55%, #fff) 88%, color-mix(in srgb, var(--fx-b) 30%, transparent) 100%);
  animation: fx-spin 9s linear infinite paused;
}
.card.fx-card.is-rec::after {
  inset: 0;
  background: linear-gradient(106deg, transparent 38%, rgba(255, 255, 255, var(--fx-sheen)) 50%, transparent 62%) 130% 0 / 260% 100% no-repeat;
  animation: fx-sheen 7.5s ease-in-out infinite paused;
}
.card.fx-card.fx-vis::before, .card.fx-card.fx-vis::after { animation-play-state: running; }
@keyframes fx-spin { to { --fx-ang: 360deg; } }
@keyframes fx-sheen { 0%, 52% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
.band-dark .card.fx-card, [data-theme="dark"] .card.fx-card, .chapter[data-tone="dark"] .card.fx-card, body[data-tone="dark"] .card.fx-card {
  --fx-mix: rgba(255, 255, 255, .25); --fx-hi: rgba(255, 255, 255, .1); --fx-tint: 26%; --fx-sh: 0, 0, 0; --fx-sheen: .13; --fx-a: #6f9bff; --fx-b: #8fb0ff;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card.fx-card { --fx-mix: rgba(255, 255, 255, .25); --fx-hi: rgba(255, 255, 255, .1); --fx-tint: 26%; --fx-sh: 0, 0, 0; --fx-sheen: .13; --fx-a: #6f9bff; --fx-b: #8fb0ff; } }
.card.fx-card .card-price b { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.card.fx-card .fx-num { grid-area: 1 / 1; }
.card.fx-card .fx-real { grid-area: 1 / 1; opacity: 0; }
.card.fx-card .fx-counting { display: inline-grid; }
@media (hover: hover) {
  .card.fx-card:hover, .card.fx-card.fx-focus {
    border-color: color-mix(in srgb, var(--fx-a) 45%, var(--fx-mix));
    box-shadow: calc(var(--ry, 0) * -1.6px) calc(42px + var(--rx, 0) * 1.6px) 70px -30px rgba(var(--fx-sh), .55), 0 14px 26px -18px rgba(var(--fx-sh), .3), inset 0 1px 0 var(--card-hover-hi);
  }
  .card.fx-card.is-rec:hover, .card.fx-card.is-rec.fx-focus {
    box-shadow: calc(var(--ry, 0) * -1.6px) calc(42px + var(--rx, 0) * 1.6px) 80px -30px color-mix(in srgb, var(--fx-b) 62%, transparent), 0 14px 26px -18px rgba(var(--fx-sh), .3), inset 0 1px 0 var(--card-hover-hi);
  }
}
.card.fx-card.fx-focus { border-color: color-mix(in srgb, var(--fx-a) 45%, var(--fx-mix)); }
.card.fx-card.fx-press { scale: .985; }
.card.fx-card .card-go i { display: inline-block; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.card.fx-card:hover .card-go i, .card.fx-card.fx-focus .card-go i { transform: translateX(7px); }
.card.fx-card.fx-press .card-go i { transform: translateX(2px); transition-duration: .12s; }
@media (prefers-reduced-motion: reduce) {
  .card.fx-card.is-rec::before, .card.fx-card.is-rec::after { animation: none; }
  .card.fx-card.is-rec::after { display: none; }
  .card.fx-card, .card.fx-card .card-go i { transition: none; }
}

/* R2-D pricing page extras: reveal + feature-row stagger + button arrow */
@media (prefers-reduced-motion: no-preference) {
  html.js .plan.fx-card[data-reveal] { transform: var(--fx-tf); transition: opacity .8s var(--ease), translate 1s var(--ease), box-shadow .55s var(--ease), border-color .4s, scale .22s var(--ease); transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s, 0s; }
  html.js .plan.fx-card[data-reveal]:not(.is-in) { translate: 0 30px; }
  html.js .plan.fx-card[data-reveal].is-in { translate: 0 0; }
  .fx-ready .plan.fx-card .card-list li { opacity: 0; translate: 0 10px; transition: opacity .55s var(--ease), translate .7s var(--ease); transition-delay: calc(var(--li, 0) * 55ms + 320ms); }
  .fx-ready .plan.fx-card.fx-in .card-list li { opacity: 1; translate: 0 0; }
  .plan .btn { transition: box-shadow .5s var(--ease), background .4s, color .4s, border-color .4s, transform .4s var(--ease); }
  .plan .btn:active { transform: scale(.97); transition-duration: .1s; }
}
.plan .btn { position: relative; }
.plan .btn > span::after { content: "\2192" / ""; position: absolute; right: 24px; top: 50%; margin-top: -.5em; line-height: 1; letter-spacing: 0; transition: translate .5s cubic-bezier(.34, 1.56, .64, 1); }
.plan .btn:hover > span::after, .plan .btn:focus-visible > span::after { translate: 6px 0; }
@media (max-width: 480px) { .plan .btn > span::after { display: none; } }
.plan.is-rec .btn-primary { box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--accent) 70%, transparent); }