/*
  THE PLAN CARDS (Wave 6, lane D, 27 October 2026; components/site/plan-cards).
  The cards the pricing page, the landing page, the upgrade page and the
  console's preview all draw, and the comparison table under them.

  A FILE OF ITS OWN, LINKED BY THE CARDS, NOT IMPORTED. Home's route serves
  the landing page, and anything imported by the landing page's code goes to
  every phone that opens Home (public/site/landing.css says how that once put
  Home over its budget). Linked with React's precedence, it is fetched only
  where a card is drawn. Every class is "pc-"; a test holds the cards and this
  file to each other.

  NO SCRIPT. The switch inside a card is a radio button before each of its
  variants: the checked one's variant shows (`+`), so it works before any
  bundle, by keyboard (Tab to the group, arrows to choose), and with no :has.
  Monthly or yearly, where it is a switch rather than two pages, is the same,
  read by :has; a browser without it shows both prices.

  A paid plan's nonprofit price is a line under its packs (Wave 7, 28
  October 2026), in the wording Price rules chose: it is said, never bought,
  so it has no switch and the card's one button starts the plan itself.

  The button opens sign-up or the demo request form, with what a demo or a
  quote is said under it, and "or request a demo first" as a quiet link under
  any other button the plan asks it of.

  Its colors are the house's tokens (app/globals.css), so it turns dark with
  the product and follows a theme; a badge's color is one of six of them,
  never a purple.
*/

.pc {
  display: grid;
  gap: 1.25rem;
  color: var(--foreground);
}

.pc-sr,
.pc-pick,
.pc-int {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Monthly or yearly ─────────────────────────────────────────────────── */

.pc-period {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.pc-seg {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--muted);
}

.pc-seg-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.375rem 1rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted-foreground);
  text-decoration: none;
  cursor: pointer;
}

.pc-seg-item[aria-current="page"],
.pc-int-m:checked ~ .pc-seg .pc-seg-m,
.pc-int-y:checked ~ .pc-seg .pc-seg-y {
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 0 0 1px var(--border);
}

.pc-seg-item:focus-visible,
.pc-int-m:focus-visible ~ .pc-seg .pc-seg-m,
.pc-int-y:focus-visible ~ .pc-seg .pc-seg-y {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.pc-save {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--success-text);
}

.pc:has(.pc-int-y:checked) .pc-m,
.pc:has(.pc-int-m:checked) .pc-y {
  display: none;
}

/* ── The cards ─────────────────────────────────────────────────────────── */

.pc-grid,
.pc-rows {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One column on a phone; as many as fit from there. */
.pc-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  align-items: start;
}

.pc-cell {
  position: relative;
  display: grid;
  min-width: 0;
}

.pc-group {
  display: grid;
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.pc-card {
  --pc-tone: var(--accent-strong);
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-width: 0;
  padding: 1.375rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
  color: var(--card-foreground);
}

/* A card group: only the chosen variant shows, whatever layout it has. */
.pc-pick:not(:checked) + .pc-card {
  display: none;
}

.pc-card[data-color="green"] { --pc-tone: var(--success); --pc-tone-text: var(--success-text); }
.pc-card[data-color="amber"] { --pc-tone: var(--warning); --pc-tone-text: var(--warning-text); }
.pc-card[data-color="blue"] { --pc-tone: var(--info); --pc-tone-text: var(--info-text); }
.pc-card[data-color="red"] { --pc-tone: var(--danger); --pc-tone-text: var(--danger-text); }
.pc-card[data-color="gray"] { --pc-tone: var(--muted-foreground); --pc-tone-text: var(--muted-foreground); }

/* The badged variant is the highlighted one, in its badge's color. */
.pc-card[data-highlight] {
  border-color: var(--pc-tone);
  box-shadow: 0 0 0 1px var(--pc-tone);
}

.pc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.pc-name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.pc-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--pc-tone) 45%, transparent);
  background: color-mix(in oklab, var(--pc-tone) 14%, var(--card));
  color: var(--pc-tone-text, var(--accent-foreground));
  font-size: 0.75rem;
  font-weight: 600;
}

/* The switch inside a card: its variants' labels, the shown one pressed. */
.pc-switch {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  background: var(--muted);
}

.pc-switch-item {
  flex: 1 1 0;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  color: var(--muted-foreground);
  cursor: pointer;
}

.pc-switch-item[data-on] {
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 0 0 1px var(--border);
}

.pc-pick:focus-visible + .pc-card .pc-switch-item[data-on] {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.pc-desc,
.pc-note,
.pc-fine {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.pc-fine {
  font-size: 0.8125rem;
}

.pc-price {
  display: grid;
  gap: 0.25rem;
}

.pc-amount {
  margin: 0;
}

.pc-figure {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* "Talk to us" in place of a price: words, so a size that reads as words. */
.pc-talk {
  font-size: 1.75rem;
}

.pc-per {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

.pc-list {
  display: grid;
  gap: 0.3125rem;
  margin: 0;
  padding-left: 1.125rem;
  list-style: disc;
  font-size: 0.875rem;
}

.pc-included {
  font-weight: 600;
}

.pc-packs {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0.625rem;
  background: var(--muted);
  font-size: 0.8125rem;
  list-style: none;
  display: grid;
  gap: 0.25rem;
}

/* What a verified nonprofit pays, said under the packs: never a switch, never a plan. */
.pc-np {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.pc-adds {
  display: grid;
  gap: 0.375rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.pc-action {
  display: grid;
  gap: 0.375rem;
  margin: auto 0 0;
  padding-top: 0.25rem;
  text-align: center;
}

.pc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  border-radius: 0.625rem;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.pc-cta:hover {
  background: color-mix(in oklab, var(--primary) 90%, transparent);
}

.pc-cta:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The highlighted card's button starts something: the accent, as the house's buttons that do. */
.pc-card[data-highlight] .pc-cta {
  background: var(--accent-strong);
  color: var(--accent-strong-foreground);
}

/* "or request a demo first": a quiet second way, a full touch target tall. */
.pc-also {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pc-also:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ── A plan sold by quote: a row across the page ──────────────────────── */

@media (min-width: 48rem) {
  .pc-card[data-wide] {
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) 1fr auto;
    align-items: center;
    gap: 1rem 1.5rem;
  }

  .pc-card[data-wide] > .pc-body {
    display: block;
    columns: 2;
    column-gap: 1.5rem;
  }

  .pc-card[data-wide] > .pc-body > * + * {
    margin-top: 0.75rem;
  }

  .pc-card[data-wide] .pc-action {
    margin: 0;
  }
}

.pc-intro,
.pc-body {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.pc-body > * {
  break-inside: avoid;
}

/* ── The comparison table ──────────────────────────────────────────────── */

.pc-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
}

.pc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.pc-table th,
.pc-table td {
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.pc-table thead th {
  border-top: 0;
  font-weight: 700;
}

.pc-table th[scope="row"] {
  font-weight: 500;
  color: var(--muted-foreground);
}

.pc-section {
  background: var(--muted);
  font-weight: 700;
}

.pc-col {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
  font-size: 0.875rem;
}

.pc-col h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.pc-col dl {
  display: grid;
  gap: 0.25rem;
  margin: 0;
}

.pc-col dl > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.pc-col dt {
  color: var(--muted-foreground);
}

.pc-col dd {
  margin: 0;
  text-align: right;
}

.pc-col p {
  margin: 0;
}