/* Plans, as on the platform pricing section: all plans side by side in one card, divided by hairlines,
   the recommended one tinted with a brand bar on top. Also the current plan summary on Settings. */

/* Monthly or yearly: both grids render, the switch shows one. */
.plan-interval { display: flex; justify-content: center; margin-bottom: 16px; }
.plan-interval .seg button { padding: 6px 14px; }
.plan-interval .pill { margin-left: 2px; }
.plangrid[hidden] { display: none; }

.plangrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 1px;
  overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--line); box-shadow: var(--sh-pop);
}
.plancard {
  position: relative; display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 12px;
  padding: 26px 24px 24px; background: var(--panel);
}
.plancard.recommended { background: color-mix(in srgb, var(--brand-text) 5%, var(--panel)); }
.plancard.recommended::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--brand-grad);
}
.plancard.current { background: color-mix(in srgb, var(--brand-text) 6%, var(--panel)); }
.plancard.current::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--brand-grad); }
.plancard.current .pc-name { color: var(--brand-text); }
.plancard .pc-yours { pointer-events: none; background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-text); box-shadow: none; }
.plancard input { position: absolute; opacity: 0; pointer-events: none; }

.pc-ribbon {
  position: absolute; top: 18px; right: 18px;
  padding: 2px 9px; border-radius: var(--r-full); background: var(--brand-soft); color: var(--brand-text);
  font-size: var(--fs-2xs); font-weight: 600; white-space: nowrap;
}
.plancard .pc-top { display: flex; align-items: center; gap: 8px; padding-right: 96px; }
.plancard .pc-name { font-size: var(--fs-l); font-weight: 600; text-transform: capitalize; color: var(--ink); }
.plancard .pc-price { font-size: var(--fs-3xl); font-weight: 700; line-height: 1.1; letter-spacing: var(--tr-tight); color: var(--ink); font-variant-numeric: tabular-nums; }
.plancard .pc-price span { margin-left: 3px; font-size: var(--fs-s); font-weight: 500; letter-spacing: 0; color: var(--ink-4); }
.plancard .pc-pricing { display: flex; flex-direction: column; gap: 4px; }
.plancard .pc-permonth { font-size: var(--fs-xs); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.plancard .pc-tagline { min-height: 38px; font-size: var(--fs-s); line-height: 1.6; color: var(--ink-3); }
.plancard .pc-features { display: flex; flex-direction: column; gap: 9px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.plancard .pc-features span { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-s); line-height: 1.45; color: var(--ink-3); }
.plancard .pc-features svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--brand-text); }
.plancard .pc-action { margin-top: 8px; }
.plancard .pc-action form { margin: 0; }
.plancard .pc-action .btn { width: 100%; }

/* ---------- Current plan on Settings ---------- */
.planhero {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-l);
  background: color-mix(in srgb, var(--brand-text) 4%, var(--panel));
}
.planhero .ph-main { display: flex; flex-direction: column; gap: 3px; flex: 1 1 260px; min-width: 0; }
.planhero .ph-kicker { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-text); }
.planhero .ph-name { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: var(--tr-tight); text-transform: capitalize; }
.planhero .ph-note { font-size: var(--fs-s); line-height: 1.55; color: var(--ink-3); }
.planhero .ph-price { flex: none; font-size: 26px; font-weight: 700; letter-spacing: var(--tr-tight); color: var(--ink); }
.planhero .ph-price span { margin-left: 3px; font-size: var(--fs-s); font-weight: 500; letter-spacing: 0; color: var(--ink-4); }

.planstrip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-l); background: var(--panel);
}
.planstrip .pst { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 18px; }
.planstrip .pst + .pst { border-left: 1px solid var(--line); }
.planstrip .pst-l { font-size: var(--fs-xs); color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planstrip .pst-v { font-size: var(--fs-l); font-weight: 600; overflow-wrap: anywhere; }

@media (max-width: 700px) {
  .plangrid { grid-template-columns: 1fr; }
  .plancard .pc-tagline { min-height: 0; }
  .planstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planstrip .pst:nth-child(3) { border-left: 0; }
  .planstrip .pst:nth-child(n+3) { border-top: 1px solid var(--line); }
}