/* The Plans page (plans.js). The same file on all four sites; each site sets
   the --pl-* colors in its own look before this file:
     --pl-panel --pl-line --pl-line-strong --pl-text --pl-dim
     --pl-accent --pl-on-accent --pl-ok --pl-radius */
.pl { display: grid; gap: 2rem; }
.pl h1 { margin: 0 0 0.5rem; font-size: 2rem; line-height: 1.15; }
.pl h2 { margin: 0 0 0.35rem; font-size: 1.3rem; line-height: 1.25; }
.pl h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.pl p { margin: 0; }
.pl-lede { color: var(--pl-dim); max-width: 44rem; }
.pl-small { font-size: 0.88rem; color: var(--pl-dim); }
.pl .pl-note { color: var(--pl-dim); margin: 0 0 0.9rem; }
.pl-group > h2 + .pl-list { margin-top: 0.9rem; }

.pl-mine {
  background: var(--pl-panel); border: 1px solid var(--pl-line); border-radius: var(--pl-radius);
  padding: 1rem 1.15rem; display: grid; gap: 0.6rem;
}
.pl-have { list-style: none; margin: 0; padding: 0; }
.pl-have li {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap;
  gap: 0.25rem 1rem; padding: 0.55rem 0; border-top: 1px solid var(--pl-line);
}
.pl-have li:first-child { border-top: 0; }
.pl-have span { color: var(--pl-dim); }
.pl-have strong { font-weight: 600; }
.pl-have--on strong { color: var(--pl-ok); }

.pl-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.pl-plan {
  background: var(--pl-panel); border: 1px solid var(--pl-line); border-radius: var(--pl-radius);
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.45rem; min-width: 0;
  scroll-margin-top: 1.5rem;
}
.pl-plan:target { border-color: var(--pl-accent); box-shadow: 0 0 0 1px var(--pl-accent); }
.pl-price strong { font-size: 1.7rem; line-height: 1.1; }
.pl-price span { color: var(--pl-dim); }
.pl-save { font-size: 0.86rem; color: var(--pl-ok); }
.pl-what { font-size: 0.93rem; color: var(--pl-dim); }
.pl-buy { margin-top: auto; padding-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }

.pl-btn {
  display: inline-block; padding: 0.5rem 0.9rem; border-radius: 6px;
  border: 1px solid var(--pl-accent); background: var(--pl-accent); color: var(--pl-on-accent);
  font: inherit; font-size: 0.92rem; font-weight: 600; line-height: 1.25; text-decoration: none; text-align: center;
}
.pl-btn:hover { filter: brightness(1.1); color: var(--pl-on-accent); }
.pl-btn--ghost { background: transparent; color: var(--pl-text); border-color: var(--pl-line-strong); }
.pl-btn--ghost:hover { border-color: var(--pl-accent); color: var(--pl-text); filter: none; }
.pl-btn:focus-visible { outline: 2px solid var(--pl-accent); outline-offset: 2px; }

.pl-fine { border-top: 1px solid var(--pl-line); padding-top: 1rem; }
.pl-fine ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; font-size: 0.88rem; color: var(--pl-dim); }
.pl-msg { border: 1px solid var(--pl-line-strong); border-radius: var(--pl-radius); padding: 0.7rem 0.9rem; }

@media (max-width: 30rem) {
  .pl h1 { font-size: 1.6rem; }
  .pl-buy .pl-btn { flex: 1 1 auto; }
}