/* Plans: every plan side by side in one strip divided by lines, the plan you are on tinted with a brand edge on top,
   the most popular one marked. The same grid shows in the plan modal, on Plan and billing and on /subscribe. */

.plangrid-wrap { container: plans / inline-size; }

/* What every plan includes, and Monthly or Yearly: both grids render, the switch shows one. */
.plan-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 16px; }
.plan-included { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: var(--fs-s); color: var(--ink-2); }
.plan-included-label { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-4); }
.plan-included span { display: inline-flex; align-items: center; gap: 6px; }
.plan-included svg { width: 15px; height: 15px; color: var(--ok); }
.plan-interval { flex: none; }
.plan-interval button { padding: 6px 14px; }
.plan-interval .pill { margin-left: 4px; }
.plangrid[hidden], .plan-ai-grid[hidden] { display: none; }

.plangrid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--line);
}
.plancard {
  position: relative; display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 10px;
  min-width: 0; padding: 20px 20px 22px; background: var(--panel); transition: background .15s ease;
}
.plancard::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: transparent; }
.plancard.recommended::before { background: var(--line-strong); }
.plancard.current { background: color-mix(in srgb, var(--brand-text) 6%, var(--panel)); }
.plancard.current::before { background: var(--brand); }

.pc-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pc-name { font-size: var(--fs-l); font-weight: 700; letter-spacing: var(--tr-snug); text-transform: capitalize; color: var(--ink); }
.pc-top .pill { margin-left: auto; }
.plancard.current .pc-name { color: var(--brand-text); }
.pc-pricing { display: flex; flex-direction: column; gap: 3px; }
.pc-price { font-family: var(--mono); font-size: 28px; line-height: 1.05; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.pc-price span { margin-left: 3px; font-family: var(--sans); font-size: var(--fs-s); font-weight: 500; letter-spacing: 0; color: var(--ink-4); }
.pc-permonth { font-size: var(--fs-xs); font-weight: 600; color: var(--ok); font-variant-numeric: tabular-nums; }
.pc-tagline { font-size: var(--fs-s); line-height: 1.5; color: var(--ink-3); }
.pc-features { display: grid; align-content: start; gap: 7px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line-soft); list-style: none; }
.pc-features li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-s); line-height: 1.45; color: var(--ink-2); }
.pc-features svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--ok); }
.pc-action { align-self: end; margin-top: 6px; }
.pc-action form { margin: 0; }
.pc-action .btn { width: 100%; }
.pc-yours { pointer-events: none; border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-text); box-shadow: none; }

/* AI Agents next to the plans: a separate product, priced per system or per GoHighLevel location. */
.plan-ai { margin-top: 24px; }
.plan-ai-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 14px; }
.plan-ai-head h3 { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: var(--fs-l); font-weight: 600; color: var(--ink); }
.plan-ai-head p { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--ink-4); }
.plan-ai-do { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.plan-ai-request { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-s); font-weight: 600; }
.plan-ai-request svg { width: 14px; height: 14px; }
.plan-ai-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--line);
}
.plan-ai-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px 20px; background: var(--panel); }
.plan-ai-name { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.plan-ai-name b { font-size: var(--fs-l); font-weight: 700; color: var(--ink); }
.plan-ai-price { font-family: var(--mono); font-weight: 600; white-space: nowrap; color: var(--ink); }
.plan-ai-price span { font-family: var(--sans); font-size: var(--fs-xs); font-weight: 500; color: var(--ink-4); }
.plan-ai-card p { flex: 1; margin: 0; font-size: var(--fs-s); line-height: 1.5; color: var(--ink-3); }
.plan-ai-loc { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }
.plan-ai-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0; }

@container plans (max-width: 900px) {
  .plangrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container plans (max-width: 520px) {
  .plangrid, .plan-ai-grid { grid-template-columns: minmax(0, 1fr); }
  .plan-bar, .plan-ai-head { align-items: flex-start; }
}