/* FlowCraft Pricing Matrix — catalogue demo styles (extends site.css)
   Mirrors the buyer-delivered Tailwind widget with the site's own tokens. */

.pm { padding: 26px 16px 28px; background: var(--surface); }
@media (min-width: 600px) { .pm { padding: 34px 28px 36px; } }
.pm-head { text-align: center; max-width: 36em; margin: 0 auto; }
.pm-kicker { margin: 0; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pm-heading { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; margin: .35rem 0 .4rem; }
.pm-intro { margin: 0; color: var(--ink-muted); font-size: .95rem; }

/* Toggle */
.pm-toggle-wrap { display: flex; justify-content: center; margin-top: 22px; }
.pm-toggle {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr;
  padding: 5px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(15, 27, 61, .05); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.pm-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--accent); }
.pm-thumb { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--accent); box-shadow: 0 4px 12px -4px rgba(90, 63, 209, .6); transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.pm-toggle[aria-checked="true"] .pm-thumb { transform: translateX(100%); }
.pm-option { position: relative; z-index: 1; padding: .6rem 1.2rem; text-align: center; font-size: .9rem; font-weight: 700; color: var(--ink-muted); transition: color .25s ease; white-space: nowrap; }
@media (min-width: 480px) { .pm-option { padding: .6rem 1.6rem; } }
.pm-toggle[aria-checked="false"] [data-option="monthly"], .pm-toggle[aria-checked="true"] [data-option="annual"] { color: #fff; }
.pm-save { margin-left: 4px; padding: .1rem .45rem; border-radius: 999px; font-size: .72rem; background: #d9f3e6; color: var(--ok); transition: background-color .25s ease, color .25s ease; }
.pm-toggle[aria-checked="true"] .pm-save { background: rgba(255, 255, 255, .22); color: #fff; }

/* Cards */
.pm-grid { display: grid; gap: 22px; margin-top: 34px; }
@media (min-width: 960px) { .pm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.pm-card { position: relative; display: flex; flex-direction: column; padding: 24px 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15, 27, 61, .05); transition: transform .2s ease, box-shadow .2s ease; }
.pm-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pm-featured { border: 2px solid var(--accent); box-shadow: 0 18px 40px -18px rgba(90, 63, 209, .45); }
@media (min-width: 960px) { .pm-featured { margin: -12px 0; padding-top: 34px; padding-bottom: 34px; } }
.pm-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: .2rem .8rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pm-card svg.pm-art { width: 56px; height: 56px; }
.pm-name { margin: 16px 0 2px; font-size: 1.2rem; font-weight: 750; }
.pm-desc { margin: 0; color: var(--ink-muted); font-size: .9rem; }
.pm-price { display: flex; align-items: baseline; gap: 3px; margin: 18px 0 0; color: var(--ink); }
.pm-price [data-currency] { font-size: 1.35rem; font-weight: 700; }
.pm-amount { display: inline-block; font-size: 2.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.pm-price [data-period] { color: var(--ink-muted); font-weight: 600; }
.pm-note { min-height: 1.4em; margin: 4px 0 0; font-size: .86rem; font-weight: 650; color: var(--ok); }
.pm-features { list-style: none; margin: 16px 0 22px; padding: 0; flex: 1; display: grid; gap: 9px; font-size: .9rem; color: #2a3558; }
.pm-features li { display: flex; gap: 9px; }
.pm-features svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--ok); }
.pm-featured .pm-features svg { color: var(--accent); }
.pm-cta { display: block; padding: .8rem 1rem; border-radius: 12px; text-align: center; font-weight: 700; font-size: .92rem; text-decoration: none; background: var(--ink); color: #fff; transition: background-color .15s ease; }
.pm-cta:hover { background: #1d2b57; color: #fff; }
.pm-featured .pm-cta { background: var(--accent); }
.pm-featured .pm-cta:hover { background: var(--accent-strong); }
.pm-foot { margin: 26px 0 0; text-align: center; font-size: .85rem; color: var(--ink-muted); }

@keyframes pm-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pm-amount.is-changing { animation: pm-pop .25s ease-out; }

/* Compact version in the FlowCraft product card: plans as rows */
.pm-compact { padding: 26px 16px 18px; }
.pm-compact .pm-toggle-wrap { margin-top: 0; }
.pm-compact .pm-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
.pm-compact .pm-card { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 4px 12px; padding: 12px 14px; border-radius: 14px; }
.pm-compact .pm-featured { margin: 0; padding: 12px 14px; }
.pm-compact .pm-card svg.pm-art { width: 44px; height: 44px; grid-row: span 2; }
.pm-compact .pm-name { margin: 0; font-size: 1rem; }
.pm-compact .pm-price { margin: 0; grid-column: 3; grid-row: 1; justify-self: end; }
.pm-compact .pm-amount { font-size: 1.5rem; }
.pm-compact .pm-price [data-currency] { font-size: 1rem; }
.pm-compact .pm-note { grid-column: 2 / 4; grid-row: 2; margin: 0; min-height: 0; font-size: .78rem; text-align: right; }
.pm-compact .pm-badge { top: -10px; left: auto; right: 14px; transform: none; font-size: .6rem; }
.pm-compact .pm-desc, .pm-compact .pm-features, .pm-compact .pm-cta, .pm-compact .pm-foot { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pm-thumb, .pm-option, .pm-save, .pm-card { transition: none; }
  .pm-amount.is-changing { animation: none; }
  .pm-card:hover { transform: none; }
}
@media (max-width: 479px) { #pricing-matrix .product-head { padding: 24px 14px; } }
.pm-lead { max-width: 640px; margin: 26px auto 0; }