/* ==========================================================================
   KATI plans: the plan cards (components/plan-card), usage meters and the comparison table.
   Used by the public pricing page and the shop's Plan page. Palette tokens only.
   ========================================================================== */
.k-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.k-plan {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 26px 22px 24px; border-radius: var(--k-radius-lg, 24px);
  background: var(--kati-surface); border: 1px solid var(--kati-card-line); box-shadow: var(--kati-shadow);
}
.k-plan.is-popular { border: 2px solid var(--kati-primary); box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--kati-primary) 55%, transparent); }
.k-plan.is-current { border: 2px solid var(--kati-success); }
.k-plan__flag {
  position: absolute; top: -13px; left: 22px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  background: var(--kati-primary); color: var(--kati-on-primary);
}
.k-plan.is-current .k-plan__flag { background: var(--kati-success); color: var(--kati-surface); }
.k-plan__name { margin: 0 0 6px; font-size: 20px !important; font-weight: 600 !important; font-family: var(--kati-font, inherit) !important; color: var(--kati-ink); letter-spacing: 0 !important; line-height: 1.3 !important; }
.k-plan__tagline { min-height: 42px; margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--kati-ink-2); }
.k-plan__price { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.k-plan__price strong { font-family: var(--kati-display); font-size: 46px; font-weight: 500; line-height: 1; letter-spacing: -.01em; color: var(--kati-ink); }
.k-plan__price span { font-size: 14px; color: var(--kati-ink-2); }
.k-plan__yearly { min-height: 21px; margin: 8px 0 18px; font-size: 13.5px; color: var(--kati-ink-2); }
.k-plan__yearly em { margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-style: normal; font-weight: 600; font-size: 12px; background: color-mix(in srgb, var(--kati-success) 14%, var(--kati-surface)); color: color-mix(in srgb, var(--kati-success) 75%, var(--kati-ink)); }
.k-plan__cta { margin-bottom: 20px; }
.k-plan__cta > .k-btn, .k-plan__cta > form > .k-btn, .k-plan__cta > details > summary { width: 100%; }
.k-plan__cta .k-tag { width: 100%; justify-content: center; height: 40px; font-size: 14px; }
.k-plan__list { display: grid; gap: 10px; margin: 0; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--kati-line); }
.k-plan__list li { display: flex; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--kati-ink); }
.k-plan__list i { flex: none; font-size: 16px; line-height: 1.3; color: var(--kati-success); }
.k-plan__list li.is-off { color: var(--kati-ink-3); }
.k-plan__list li.is-off i { color: var(--kati-ink-3); }

/* choosing a plan on the shop's Plan page */
.k-plan details > summary { list-style: none; cursor: pointer; }
.k-plan details > summary::-webkit-details-marker { display: none; }
.k-plan details[open] > summary { margin-bottom: 14px; }
.k-plan .k-plan__form { display: grid; gap: 12px; padding: 14px; border-radius: 16px; background: var(--kati-surface-alt); }
.k-plan .k-cycle-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--kati-surface); border: 1px solid var(--kati-line-strong); cursor: pointer; font-size: 14px; }
.k-plan .k-cycle-opt input { accent-color: var(--kati-primary); }
.k-plan .k-cycle-opt strong { margin-left: auto; font-weight: 600; }

/* usage meters */
.k-meters { display: grid; gap: 16px; }
.k-meter__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; font-size: 14px; color: var(--kati-ink); }
.k-meter__top span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.k-meter__top i { color: var(--kati-icon); }
.k-meter__top strong { font-variant-numeric: tabular-nums; font-weight: 600; }
.k-meter__bar { height: 8px; border-radius: 999px; background: var(--kati-sand); overflow: hidden; }
.k-meter__bar span { display: block; height: 100%; border-radius: 999px; background: var(--kati-primary); }
.k-meter.is-full .k-meter__bar span { background: var(--kati-danger); }
.k-meter.is-full .k-meter__top strong { color: var(--kati-danger); }
.k-meter__hint { margin: 6px 0 0; font-size: 12.5px; color: var(--kati-ink-2); }

/* comparison table (pricing page) */
.k-compare-wrap { position: relative; overflow-x: auto; border-radius: var(--k-radius-lg, 24px); border: 1px solid var(--kati-card-line); background: var(--kati-surface); box-shadow: var(--kati-shadow); }
.k-compare { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 14.5px; color: var(--kati-ink); }
.k-compare th, .k-compare td { padding: 14px 18px; border-bottom: 1px solid var(--kati-line); text-align: center; }
.k-compare th:first-child, .k-compare td:first-child { text-align: left; }
.k-compare thead th { font-size: 15px; font-weight: 600; background: var(--kati-surface-alt); }
.k-compare thead th.is-popular { color: var(--kati-accent-text); }
.k-compare tbody th { font-weight: 500; }
.k-compare tbody tr:last-child > * { border-bottom: 0; }
.k-compare .bi-check2 { font-size: 18px; color: var(--kati-success); }
.k-compare .bi-dash { color: var(--kati-ink-3); }
.k-compare .k-compare__group th { padding-top: 22px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--kati-ink-2); text-align: left; background: transparent; }

@media (max-width: 1199.98px) {
  .k-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}
@media (max-width: 575.98px) {
  .k-plans { grid-template-columns: minmax(0, 1fr); }
  .k-plan__tagline { min-height: 0; }
}

/* the shop's Plan page */
.k-bd .k-plan-section { margin-top: 30px; }
.k-bd .k-plan-section .k-day-head { margin-bottom: 22px; }
.k-bd .k-plan-history { margin-top: 24px; }

/* tags inside plan cards (the dashboards get .k-tag from kati-barber.css; the pricing page doesn't load it) */
.k-plan .k-tag {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; padding: 0 12px;
  background: var(--kati-sand); color: var(--kati-ink-2); font-size: 13px; font-weight: 500; line-height: 1.2; text-align: center;
}
.k-plan .k-tag--ok { background: color-mix(in srgb, var(--kati-success) 14%, var(--kati-surface)); color: color-mix(in srgb, var(--kati-success) 75%, var(--kati-ink)); }
.k-plan .k-tag--warn { background: color-mix(in srgb, var(--kati-warning) 18%, var(--kati-surface)); color: color-mix(in srgb, var(--kati-warning) 55%, var(--kati-ink)); }

/* ---------- Public pricing page ---------- */
.k-pricing-hero { position: relative; z-index: 2; max-width: 760px; }
.k-pricing-hero .k-display { max-width: 16ch; }
.k-pricing-hero .k-chip { margin-top: 26px; height: auto; min-height: 38px; flex-wrap: wrap; }
.k-pricing { padding-top: 0; }
.k-pricing .k-plans { margin-top: clamp(8px, 2vw, 20px); }
.k-pricing__note { margin: 22px 0 0; text-align: center; font-size: 13.5px; color: var(--kati-ink-2); }
.k-pricing-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.k-faq { display: grid; gap: 10px; }
.k-faq__item { border-radius: 18px; background: var(--kati-surface); border: 1px solid var(--kati-card-line); }
.k-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; list-style: none; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--kati-ink); }
.k-faq__item summary::-webkit-details-marker { display: none; }
.k-faq__item summary i { flex: none; color: var(--kati-icon); transition: transform .25s; }
.k-faq__item[open] summary i { transform: rotate(45deg); }
.k-faq__item summary:focus-visible { outline: none; box-shadow: var(--kati-ring); border-radius: 18px; }
.k-faq__item p { margin: 0; padding: 0 20px 18px; font-size: 15px; line-height: 1.6; color: var(--kati-ink-2); }
.k-band--center { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
.k-band--center .k-lead { margin-left: auto; margin-right: auto; }
.k-band--center .k-band__ctas { justify-content: center; }
.k-band--center .k-eyebrow { justify-content: center; }
@media (max-width: 991.98px) {
  .k-pricing-faq { grid-template-columns: minmax(0, 1fr); }
}
.k-plan .k-cycle-opt span small { display: block; font-size: 12px; font-weight: 600; color: color-mix(in srgb, var(--kati-success) 75%, var(--kati-ink)); }