.progress {
  grid-template-columns: repeat(6, 1fr);
}

.access-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.plan-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 30px 0 12px;
}
.installer-plan-link { width:max-content; color:#9ee7ee; font-weight:800; }

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 650px;
  padding: 30px 26px 26px;
  border: 1px solid #17414a;
  border-radius: 22px;
  background: linear-gradient(155deg, #0c242b 0%, #061419 72%);
  overflow: hidden;
}

.plan-card::before { content:""; position:absolute; inset:0 0 auto; height:5px; background:#28717d; }
.plan-card.pup::before { background:#6fa8b2; }
.plan-card.featured { border-color: #20c8d4; box-shadow: 0 18px 50px #0007, inset 0 0 45px #20c8d50b; transform:translateY(-8px); }
.plan-card.featured::before { background:var(--teal); }
.plan-card.plus { border-color:#8c762b; background:linear-gradient(155deg,#292710 0%,#10170f 42%,#061419 100%); }
.plan-card.plus::before { background:var(--gold); }
.popular-badge { position:absolute; top:18px; right:18px; display:inline-block; padding:6px 10px; border-radius:999px; background:#ffd34e; color:#031014; font-size:.68rem; font-weight:900; letter-spacing:.08em; }
.plan-symbol { margin:0 0 12px; font-size:2.2rem; }
.plan-card h3 { font-size: 2.2rem; margin: 2px 0 8px; }
.plan-summary { min-height:76px; margin:.2rem 0 1rem; }
.plan-card ul { min-height: 244px; margin:18px 0; padding:18px 0 0; border-top:1px solid #ffffff17; list-style:none; color:#d5ebef; line-height:1.5; }
.plan-card li { position:relative; margin:0 0 12px; padding-left:25px; }
.plan-card li::before { content:"✓"; position:absolute; left:0; top:0; width:18px; height:18px; border-radius:50%; background:#dffcff; color:#062027; font-size:.72rem; font-weight:900; line-height:18px; text-align:center; }
.free-plan-boundary { min-height:52px; color:#d8edf0; }
.free-plan-boundary strong { color:#ffd34e; }
.plan-price { display:flex; align-items:baseline; gap:7px; min-height:61px; margin:15px 0 0; color:var(--text); font-weight:900; }
.plan-price span { font:700 clamp(2.2rem,4vw,3.4rem)/1 Georgia,serif; }
.plan-price small { color:var(--muted); font-size:.92rem; }
.plan-billing { min-height:25px; margin:7px 0 0; font-size:.88rem; }
.plan-action { width:100%; margin-top:auto; text-align:center; }
.plan-action.unavailable { cursor:not-allowed; }
.plan-more { margin:0 0 18px; color:var(--muted); }
.plan-more summary { cursor:pointer; color:var(--text); font-weight:800; }
.plan-more p { font-size:.9rem; }
.plan-heading { display:flex; align-items:end; justify-content:space-between; gap:28px; }
.plan-heading > div:first-child { max-width:700px; }
.billing-switch { display:flex; flex:0 0 auto; gap:5px; padding:5px; border:1px solid #23545d; border-radius:999px; background:#061419; }
.billing-switch button { border:0; border-radius:999px; background:transparent; color:var(--muted); padding:10px 16px; font:inherit; font-weight:850; cursor:pointer; }
.billing-switch button.active { background:#174c55; color:var(--text); }
.billing-switch span { display:block; color:var(--gold); font-size:.62rem; letter-spacing:.04em; }
.billing-switch button:focus-visible,.plan-more summary:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
.capability-showcase { margin:54px 0 20px; padding-top:40px; border-top:1px solid #17414a; }
.capability-showcase > h3 { font-size:clamp(1.8rem,4vw,2.8rem); }
.capability-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:24px; }
.capability-grid article { min-height:260px; padding:26px; border:1px solid #17414a; border-radius:16px; background:#061419; }
.capability-grid h4 { margin:18px 0 8px; font:700 1.4rem Georgia,serif; }
.capability-icon { position:relative; display:block; width:76px; height:64px; border:3px solid var(--teal); border-radius:14px; filter:drop-shadow(0 0 12px #20cbd555); }
.dashboard-icon::before { content:""; position:absolute; inset:12px; border:2px solid #baf9fc; border-radius:7px; box-shadow:18px -18px 0 -11px #061419,18px -18px 0 -9px var(--teal); }
.moderation-icon { border-radius:50% 50% 45% 45%; }
.moderation-icon::before { content:"✓"; position:absolute; inset:4px; color:#dfffff; font:bold 2.5rem/52px system-ui; text-align:center; }
.engagement-icon { border-radius:50%; }
.engagement-icon::before,.engagement-icon::after { content:""; position:absolute; background:#dfffff; left:17px; right:17px; top:28px; height:3px; }
.engagement-icon::after { transform:rotate(90deg); }
.billing-readiness { display:flex; align-items:flex-start; gap:12px; margin:22px 0 0; padding:16px 18px; border:1px solid #23545d; border-radius:12px; background:#061419; }
.billing-readiness p { margin:3px 0 0; }
.billing-readiness-dot { flex:0 0 auto; width:12px; height:12px; margin-top:6px; border-radius:50%; background:#7c9297; box-shadow:0 0 10px #7c929777; }
.billing-readiness[data-state="ready"] { border-color:#1d7560; }
.billing-readiness[data-state="ready"] .billing-readiness-dot { background:#45df93; box-shadow:0 0 12px #45df9399; }
.billing-readiness[data-state="unavailable"] .billing-readiness-dot { background:var(--gold); box-shadow:0 0 12px #ffd23f77; }
.plan-comparison { margin:34px 0 0; border:1px solid #23545d; border-radius:16px; background:#061419; overflow:hidden; }
.plan-comparison > summary { cursor:pointer; padding:18px 22px; color:var(--text); font-weight:900; }
.plan-comparison[open] > summary { border-bottom:1px solid #23545d; }
.plan-comparison > summary:focus-visible { outline:2px solid var(--teal); outline-offset:-4px; }
.comparison-scroll { overflow-x:auto; }
.plan-comparison table { width:100%; min-width:720px; border-collapse:collapse; }
.plan-comparison caption { padding:18px 22px 8px; color:var(--muted); text-align:left; }
.plan-comparison th,.plan-comparison td { padding:14px 20px; border-bottom:1px solid #ffffff12; text-align:center; }
.plan-comparison th:first-child { width:40%; text-align:left; }
.plan-comparison thead th { color:var(--teal); letter-spacing:.06em; }
.plan-comparison tbody tr:hover { background:#0a2027; }
.included { color:#74efae; font-weight:800; }
.included::before { content:"✓ "; }
.not-included { color:#6d8d94; }
.comparison-note { margin:0; padding:16px 22px; font-size:.88rem; }
.legacy-access { margin-top: 26px; border-top: 1px solid #17414a; padding-top: 18px; }
.legacy-access summary { cursor: pointer; color: #9ddde4; font-weight: 700; }

.access-options form {
  align-content: start;
  padding: 20px;
  border: 1px solid #17414a;
  border-radius: 12px;
  background: #061419;
}

.access-options textarea {
  width: 100%;
  min-height: 132px;
  resize: vertical;
  padding: 14px;
  border: 1px solid #28717d;
  border-radius: 10px;
  background: #02090d;
  color: white;
  font: inherit;
}

@media (max-width: 900px) {
  .access-options, .plan-options, .capability-grid { grid-template-columns: 1fr; }
  .plan-heading { align-items:flex-start; flex-direction:column; }
  .plan-card { min-height:0; }
  .plan-card.featured { transform:none; }
  .plan-card ul,.plan-summary { min-height:0; }
}