/* Plan comparison matrix — billing + landing */

.plan-compare {
  --compare-border: var(--ak-border);
  --compare-surface: var(--ak-surface);
  --compare-muted: var(--ak-surface-secondary);
  --compare-ink: var(--ak-text);
  --compare-soft: var(--ak-text-muted);
  --compare-accent: var(--ak-primary);
  --compare-recommend: var(--ak-warning);
  --compare-recommend-soft: var(--ak-warning-soft);
  --compare-recommend-text: var(--ak-warning-text);
  --compare-recommend-border: var(--ak-warning-border);
  --compare-success: var(--ak-success);
  --compare-danger: var(--ak-danger);
  --compare-radius: var(--ak-radius-xl);
  --compare-frame: 2px solid var(--compare-recommend);
  --compare-cta-surface: color-mix(in srgb, var(--compare-muted) 42%, var(--compare-surface));
  margin-bottom: var(--ak-space-8);
}

.plan-compare__scroller {
  overflow: auto;
  border: 1px solid var(--compare-border);
  border-radius: var(--compare-radius);
  background: var(--compare-surface);
  box-shadow: var(--ak-shadow-sm);
  -webkit-overflow-scrolling: touch;
}

.plan-compare__table {
  width: 100%;
  min-width: 42rem;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--compare-ink);
}

.plan-compare__table th,
.plan-compare__table td {
  padding: .85rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--compare-border) 75%, transparent);
  vertical-align: middle;
  text-align: center;
}

.plan-compare__feature-col,
.plan-compare__feature-label {
  position: sticky;
  right: 0;
  z-index: 2;
  min-width: 11rem;
  max-width: 16rem;
  text-align: right !important;
  background: var(--compare-surface);
  box-shadow: -.5rem 0 .75rem rgb(17 45 78 / 4%);
}

.plan-compare__plan-col {
  position: relative;
  min-width: 11rem;
  background: color-mix(in srgb, var(--compare-muted) 55%, #fff);
}

.plan-compare__plan-head {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: center;
}

.plan-compare__plan-name {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.35;
}

.plan-compare__plan-col.is-recommended .plan-compare__plan-name {
  color: var(--compare-recommend-text);
}

.plan-compare__section-row .plan-compare__section-label {
  background: color-mix(in srgb, var(--compare-muted) 80%, #fff);
}

.plan-compare__section-row.is-highlight .plan-compare__section-label {
  background: color-mix(in srgb, var(--compare-recommend) 10%, #fff);
}

.plan-compare__section-spacer {
  background: color-mix(in srgb, var(--compare-muted) 80%, #fff);
}

.plan-compare__section-row.is-highlight .plan-compare__section-spacer {
  background: color-mix(in srgb, var(--compare-recommend) 10%, #fff);
}

.plan-compare__section-title {
  display: inline-flex;
  gap: .55rem;
  align-items: center;
  color: var(--compare-ink);
  font-size: .92rem;
  font-weight: 800;
}

.plan-compare__section-title i {
  color: var(--compare-accent);
}

.plan-compare__section-row.is-highlight .plan-compare__section-title i {
  color: var(--compare-recommend-text);
}

.plan-compare__feature-label {
  color: var(--compare-ink);
  font-size: .9rem;
  font-weight: 600;
}

.plan-compare__row:hover td,
.plan-compare__row:hover th {
  background: color-mix(in srgb, var(--ak-selected) 55%, #fff);
}

.plan-compare__cell.is-included .plan-compare__check {
  color: var(--compare-success);
}

.plan-compare__cell.is-excluded .plan-compare__check {
  color: var(--compare-danger);
  opacity: .85;
}

.plan-compare__check {
  display: inline-flex;
  font-size: 1.15rem;
}

.plan-compare__value {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .25rem;
  justify-content: center;
  align-items: baseline;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.plan-compare__cell.is-emphasis .plan-compare__value {
  color: var(--compare-accent);
  font-size: 1rem;
}

.plan-compare__unit {
  color: var(--compare-soft);
  font-size: .78rem;
  font-weight: 600;
}

/* Outer gold frame for the recommended column only (no gold row dividers). */
.plan-compare__plan-col.is-recommended,
.plan-compare__cell.is-recommended,
.plan-compare__section-spacer.is-recommended,
.plan-compare__cta-cell.is-recommended {
  border-inline-start: var(--compare-frame);
  border-inline-end: var(--compare-frame);
}

.plan-compare__plan-col.is-recommended {
  border-top: var(--compare-frame);
  border-start-start-radius: .9rem;
  border-start-end-radius: .9rem;
  background: color-mix(in srgb, var(--compare-recommend-soft) 70%, #fff);
}

.plan-compare__cta-cell.is-recommended {
  border-bottom: var(--compare-frame);
  border-end-start-radius: .9rem;
  border-end-end-radius: .9rem;
}

.plan-compare__cta-row th,
.plan-compare__cta-row td {
  border-bottom: 0;
  background: var(--compare-cta-surface);
  vertical-align: top;
}

.plan-compare__cta-row .plan-compare__feature-label {
  background: var(--compare-cta-surface);
}

.plan-compare__cta-cell {
  min-width: 12rem;
}

.plan-compare__cta-cell.is-recommended {
  background: var(--compare-cta-surface);
}

.plan-compare__periods {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin: 0 0 .75rem;
  padding: 0;
  border: 0;
  min-width: 0;
}

.plan-compare__period {
  display: block;
  margin: 0;
  cursor: pointer;
}

.plan-compare__period.is-unavailable {
  cursor: not-allowed;
  opacity: .55;
}

.plan-compare__period-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.plan-compare__period-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .25rem .75rem;
  align-items: center;
  padding: .65rem .75rem;
  border: 1px solid color-mix(in srgb, var(--compare-border) 85%, transparent);
  border-radius: var(--ak-radius-lg, .85rem);
  background: color-mix(in srgb, var(--compare-surface) 88%, #fff);
  color: var(--compare-ink);
  transition: border-color var(--ak-duration-normal, .2s) var(--ak-ease-standard, ease),
    background-color var(--ak-duration-normal, .2s) var(--ak-ease-standard, ease),
    box-shadow var(--ak-duration-normal, .2s) var(--ak-ease-standard, ease);
}

.plan-compare__period-title {
  text-align: right;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.35;
}

.plan-compare__period-price {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .2rem;
  justify-content: flex-end;
  align-items: baseline;
  color: var(--compare-accent);
  font-size: .9rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.plan-compare__period-price.is-muted {
  color: var(--compare-soft);
  font-size: .78rem;
  font-weight: 600;
}

.plan-compare__period-currency {
  color: var(--compare-soft);
  font-size: .72rem;
  font-weight: 600;
}

.plan-compare__period.is-selected .plan-compare__period-body {
  border-color: var(--compare-accent);
  background: color-mix(in srgb, var(--compare-accent) 10%, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--compare-accent) 35%, transparent);
}

.plan-compare__cta-cell.is-recommended .plan-compare__period.is-selected .plan-compare__period-body {
  border-color: var(--compare-recommend);
  background: color-mix(in srgb, var(--compare-recommend) 14%, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--compare-recommend) 40%, transparent);
}

.plan-compare__cta-cell.is-recommended .plan-compare__period-price {
  color: var(--compare-recommend-text);
}

.plan-compare__cta {
  width: 100%;
  min-height: var(--ak-control-height-md);
  border: 1px solid var(--compare-accent);
  color: var(--compare-accent);
  font-weight: 700;
}

.plan-compare__cta:hover,
.plan-compare__cta:focus {
  border-color: var(--compare-accent);
  background: var(--compare-accent);
  color: var(--ak-on-primary);
}

.plan-compare__cta-cell.is-recommended .plan-compare__cta {
  border-color: var(--compare-recommend);
  color: var(--compare-recommend-text);
  background: color-mix(in srgb, var(--compare-recommend) 12%, transparent);
}

.plan-compare__cta-cell.is-recommended .plan-compare__cta:hover,
.plan-compare__cta-cell.is-recommended .plan-compare__cta:focus {
  border-color: var(--compare-recommend);
  background: var(--compare-recommend);
  color: #1f1400;
}

.plan-compare__note {
  color: var(--compare-soft);
  font-size: .82rem;
}

.plan-compare__permission-note {
  margin-bottom: 1rem;
}

@media (max-width: 991.98px) {
  .plan-compare__table {
    min-width: 36rem;
  }

  .plan-compare__table th,
  .plan-compare__table td {
    padding: .7rem .75rem;
  }

  .plan-compare__feature-col,
  .plan-compare__feature-label {
    min-width: 8.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plan-compare__period-body {
    transition: none;
  }
}

[data-bs-theme="dark"] .plan-compare__scroller,
[data-bs-theme="dark"] .plan-compare__feature-col,
[data-bs-theme="dark"] .plan-compare__feature-label {
  background: var(--ak-surface);
}

[data-bs-theme="dark"] .plan-compare {
  --compare-cta-surface: color-mix(in srgb, var(--ak-surface-secondary) 72%, var(--ak-surface));
}

[data-bs-theme="dark"] .plan-compare__plan-col {
  background: color-mix(in srgb, var(--ak-surface-secondary) 80%, transparent);
}

[data-bs-theme="dark"] .plan-compare__plan-col.is-recommended {
  background: color-mix(in srgb, var(--compare-recommend) 14%, var(--ak-surface));
}

[data-bs-theme="dark"] .plan-compare__section-row .plan-compare__section-label,
[data-bs-theme="dark"] .plan-compare__section-spacer {
  background: color-mix(in srgb, var(--ak-surface-secondary) 70%, var(--ak-surface));
}

[data-bs-theme="dark"] .plan-compare__section-row.is-highlight .plan-compare__section-label,
[data-bs-theme="dark"] .plan-compare__section-row.is-highlight .plan-compare__section-spacer {
  background: color-mix(in srgb, var(--compare-recommend) 12%, var(--ak-surface));
}

[data-bs-theme="dark"] .plan-compare__cta-row th,
[data-bs-theme="dark"] .plan-compare__cta-row td,
[data-bs-theme="dark"] .plan-compare__cta-row .plan-compare__feature-label,
[data-bs-theme="dark"] .plan-compare__cta-cell.is-recommended {
  background: var(--compare-cta-surface);
}

[data-bs-theme="dark"] .plan-compare__period-body {
  background: color-mix(in srgb, var(--ak-surface) 88%, transparent);
}

[data-bs-theme="dark"] .plan-compare__period.is-selected .plan-compare__period-body {
  background: color-mix(in srgb, var(--compare-accent) 16%, var(--ak-surface));
}

[data-bs-theme="dark"] .plan-compare__cta-cell.is-recommended .plan-compare__period.is-selected .plan-compare__period-body {
  background: color-mix(in srgb, var(--compare-recommend) 18%, var(--ak-surface));
}

[data-bs-theme="dark"] .plan-compare__row:hover td,
[data-bs-theme="dark"] .plan-compare__row:hover th {
  background: var(--ak-selected);
}