/* Plan cards and the Monthly / Yearly switch (owner decision, October 12, 2026,
   borrowing ideas from Higgsfield's pricing page in Klaboo's own style;
   restyled October 14, 2026 after the owner found the switch did not look
   pressable and the cards muddy; in design A, klaboo.com's look, on October 27,
   2026, when the website began to render this component instead of its own
   copy of the cards).

   One self-contained file for everything PlanCardsView.tsx renders, so the app
   (Plans dialog, join screen) and the website's Pricing page are drawn by the
   same rules: it styles only `plan-*` classes, reads only its own `--plan-*`
   custom properties (defaults below for the light and the dark theme), and
   needs nothing else from the app's stylesheet. Include it as it is. It names
   no font file: `--plan-display` is DM Serif Display (for the plan's name and
   the price) with Georgia behind it, and each page that includes this file
   brings the font with its own @font-face (the website's styles.css, the app's
   styles.css), so the file can sit anywhere.

   Design A: a card is a flex column on the page's panel colour, a 26px radius
   and a hairline edge: the plan's name (DM Serif Display, 30px; Advanced with a
   Beta tag), a one-line promise, the price (the amount 64px in DM Serif Display,
   a struck-through regular price before it while the launch offer is on, then
   "/ month"), under Advanced's price the Monthly / Yearly switch, the note
   about the price in small dim text, the list of what the plan includes (it
   grows, so the buttons line up at the bottom) with round green checks, and
   one pill button at the bottom: an outline on Free and Basic, filled orange on
   Advanced. Advanced is the featured card: an orange edge, an orange wash from
   its top right corner and a soft orange shadow.

   The switch is a segmented control: a track with even padding all round, the
   chosen segment a filled pill (cream on the dark theme, ink on the light one)
   that never touches the track's edge, a hover state, a focus ring, and a
   green chip on Yearly with what a year saves. The plan a person is on is a
   small badge by its name, never a button. Text colours are chosen for 4.5:1
   or more on the surface they sit on in each theme and the fills carry dark
   text (tests/plan-colours.test.ts checks the ratios).

   Themes: the app sets data-theme="dark" or "light" on <html>; a page that
   sets none follows the browser's prefers-color-scheme; and a chooser can be
   forced with data-theme on its own element (the join screen and the website
   are always dark). The dark values are klaboo.com's own colours. */
:root {
  /* Not themed: the orange of Advanced and the ink on it, the logo's yellow
     (the launch offer's strip) and the Beta tag. */
  --plan-display: 'DM Serif Display', Georgia, serif;
  --plan-advanced: #f28c28;
  --plan-advanced-hi: #ffa347;
  --plan-advanced-on: #1b1310;
  --plan-save-bg: #f6c343;
  --plan-save-on: #3a2800;
  --plan-beta-bg: #f28c28;
  --plan-beta-text: #1b1310;
  /* Light theme. */
  --plan-bg: #ffffff;
  --plan-text: #232824;
  --plan-muted: #596158;
  --plan-dim: #6a7268;
  --plan-line: #dde1d6;
  --plan-basic: #4e9f5e;
  --plan-basic-text: #27703a;
  --plan-advanced-text: #b03c00;
  /* Free is neutral: the chosen segment's colours (ink on the light theme, cream on the dark). */
  --plan-free: #232824;
  --plan-free-on: #ffffff;
  --plan-free-text: #232824;
  --plan-check: #27703a;
  --plan-link: #8a5a00;
  --plan-ghost-line: #868e82;
  --plan-ghost-hover: #23282414;
  --plan-track: #eceee5;
  --plan-track-line: #d3d8cb;
  --plan-track-text: #444c44;
  --plan-track-hover: #dfe3d6;
  --plan-thumb: #232824;
  --plan-thumb-text: #ffffff;
  --plan-chip-tint: #4e9f5e;
  --plan-chip-text: #1d5a2d;
  --plan-chip-chosen-bg: #f5f5ea;
  --plan-chip-chosen-text: #1d5a2d;
  --plan-focus: #b03c00;
  --plan-wash: #f28c2824;
  --plan-glow: #f28c2859;
  --plan-star: #a86a0a;
}
:root[data-theme='dark'],
.plan-chooser[data-theme='dark'] {
  --plan-bg: #182019;
  --plan-text: #f5f5ea;
  --plan-muted: #b9c0b3;
  --plan-dim: #8b9487;
  --plan-line: #f5f5ea1f;
  --plan-basic: #7fd08f;
  --plan-basic-text: #7fd08f;
  --plan-advanced-text: #ffa347;
  --plan-free: #f5f5ea;
  --plan-free-on: #182019;
  --plan-free-text: #f5f5ea;
  --plan-check: #7fd08f;
  --plan-link: #f6c343;
  --plan-ghost-line: #f5f5ea47;
  --plan-ghost-hover: #f5f5ea1a;
  --plan-track: #121813;
  --plan-track-line: #f5f5ea1f;
  --plan-track-text: #b9c0b3;
  --plan-track-hover: #ffffff14;
  --plan-thumb: #f5f5ea;
  --plan-thumb-text: #1b1310;
  --plan-chip-tint: #7fd08f;
  --plan-chip-text: #7fd08f;
  --plan-chip-chosen-bg: #1b1310;
  --plan-chip-chosen-text: #7fd08f;
  --plan-focus: #f6c343;
  --plan-wash: #f28c2838;
  --plan-glow: #f28c288c;
  --plan-star: #f6c343;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --plan-bg: #182019;
    --plan-text: #f5f5ea;
    --plan-muted: #b9c0b3;
    --plan-dim: #8b9487;
    --plan-line: #f5f5ea1f;
    --plan-basic: #7fd08f;
    --plan-basic-text: #7fd08f;
    --plan-advanced-text: #ffa347;
    --plan-free: #f5f5ea;
    --plan-free-on: #182019;
    --plan-free-text: #f5f5ea;
    --plan-check: #7fd08f;
    --plan-link: #f6c343;
    --plan-ghost-line: #f5f5ea47;
    --plan-ghost-hover: #f5f5ea1a;
    --plan-track: #121813;
    --plan-track-line: #f5f5ea1f;
    --plan-track-text: #b9c0b3;
    --plan-track-hover: #ffffff14;
    --plan-thumb: #f5f5ea;
    --plan-thumb-text: #1b1310;
    --plan-chip-tint: #7fd08f;
    --plan-chip-text: #7fd08f;
    --plan-chip-chosen-bg: #1b1310;
    --plan-chip-chosen-text: #7fd08f;
    --plan-focus: #f6c343;
    --plan-wash: #f28c2838;
    --plan-glow: #f28c288c;
    --plan-star: #f6c343;
  }
}
.plan-chooser[data-theme='light'] {
  --plan-bg: #ffffff;
  --plan-text: #232824;
  --plan-muted: #596158;
  --plan-dim: #6a7268;
  --plan-line: #dde1d6;
  --plan-basic: #4e9f5e;
  --plan-basic-text: #27703a;
  --plan-advanced-text: #b03c00;
  --plan-free: #232824;
  --plan-free-on: #ffffff;
  --plan-free-text: #232824;
  --plan-check: #27703a;
  --plan-link: #8a5a00;
  --plan-ghost-line: #868e82;
  --plan-ghost-hover: #23282414;
  --plan-track: #eceee5;
  --plan-track-line: #d3d8cb;
  --plan-track-text: #444c44;
  --plan-track-hover: #dfe3d6;
  --plan-thumb: #232824;
  --plan-thumb-text: #ffffff;
  --plan-chip-tint: #4e9f5e;
  --plan-chip-text: #1d5a2d;
  --plan-chip-chosen-bg: #f5f5ea;
  --plan-chip-chosen-text: #1d5a2d;
  --plan-focus: #b03c00;
  --plan-wash: #f28c2824;
  --plan-glow: #f28c2859;
  --plan-star: #a86a0a;
}

.plan-chooser,
.plan-chooser * {
  box-sizing: border-box;
}
.plan-chooser {
  display: grid;
  gap: 24px;
  color: var(--plan-text);
}
/* Headings, paragraphs and lists start with no margin, whatever the page
   says: each rule below gives back the space it wants. (:where adds no
   specificity, so the page's own `h2 { margin-bottom }` and these rules can
   both be told apart from a class.) */
.plan-chooser :where(h2, h3, p, ul) {
  margin: 0;
}
.plan-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Monthly / Yearly: a segmented control. Two real radio buttons in a group, so
   the keyboard (arrow keys) and a screen reader have it as they have any choice
   of one. 44 px tall: a 1 px edge, 4 px of track on every side of the 34 px
   segments, so the chosen one never touches the edge. In a card it is above the
   stretched button's overlay (z-index), so pressing it chooses a period and
   does not press the button. */
.plan-toggle {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: stretch;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--plan-track-line);
  border-radius: 999px;
  background: var(--plan-track);
}
/* In Advanced's card, under the price, at the left edge. */
.plan-card .plan-toggle {
  align-self: flex-start;
  margin-bottom: 14px;
}
.plan-chooser .plan-toggle label {
  position: relative;
  display: inline-flex;
  margin: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--plan-track-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}
.plan-chooser .plan-toggle label:hover {
  background: var(--plan-track-hover);
  color: var(--plan-text);
}
.plan-chooser .plan-toggle label:has(input:checked),
.plan-chooser .plan-toggle label:has(input:checked):hover {
  background: var(--plan-thumb);
  color: var(--plan-thumb-text);
  box-shadow: 0 1px 3px #0000004d;
}
.plan-chooser .plan-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}
/* The ring goes round the whole control: the radio that has focus is the chosen
   one, so the keyboard user sees the track light up and the pill move. */
.plan-toggle:has(input:focus-visible) {
  outline: 3px solid var(--plan-focus);
  outline-offset: 3px;
}
.plan-chooser .plan-toggle:disabled label {
  cursor: default;
  opacity: 0.6;
}
.plan-chooser .plan-toggle:disabled label:hover {
  background: transparent;
  color: var(--plan-track-text);
}
.plan-chooser .plan-toggle:disabled label:has(input:checked):hover {
  background: var(--plan-thumb);
  color: var(--plan-thumb-text);
}
/* The chip on Yearly, green: what a year saves. On the chosen (filled) segment
   it turns to the ink, so it stays readable on the cream. */
.plan-toggle-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--plan-chip-tint) 22%, transparent);
  color: var(--plan-chip-text);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
.plan-chooser .plan-toggle label:has(input:checked) .plan-toggle-chip {
  background: var(--plan-chip-chosen-bg);
  color: var(--plan-chip-chosen-text);
}
/* The website writes the saving from the live prices; with none to show (a
   year costs no less than twelve months) the chip goes. */
.plan-toggle-chip:empty,
.plan-toggle-chip:has(> :only-child:empty) {
  display: none;
}
/* Three cards side by side (Free offered: the Plans dialog, or a window just
   wide enough for three) leave Advanced's card narrow, and the switch wrapped
   (Monthly above Yearly; owner's rehearsal, October 27, 2026). It stays on one
   line: from 961 px (where three sit side by side) to 1250 px its segments and
   chip are a little tighter. The app's Plans dialog, narrower than the page,
   does a little more in its own stylesheet (.plans-modal in styles.css).
   Plain width rules, not container queries: the cards' grid takes its width
   from its content. */
.plan-card .plan-toggle {
  flex-wrap: nowrap;
}
@media (min-width: 961px) and (max-width: 1250px) {
  .plan-cards:has(> .plan-card:nth-child(3)) .plan-toggle label {
    gap: 5px;
    padding: 0 9px;
    font-size: 12px;
  }
  .plan-cards:has(> .plan-card:nth-child(3)) .plan-toggle-chip {
    padding: 2px 6px;
    font-size: 10.5px;
  }
}
/* Rendered without a script (the website), both periods are in the markup and
   the toggle shows one. In the app only the period shown is rendered. */
.plan-chooser:has(.plan-toggle input[value='monthly']:checked)
  .plan-period[data-period='annual'],
.plan-chooser:has(.plan-toggle input[value='annual']:checked)
  .plan-period[data-period='monthly'] {
  display: none;
}
/* A browser without :has() cannot switch the periods: with no script the switch
   would do nothing, so it is left out and every period shows at once. */
@supports not selector(:has(*)) {
  .plan-toggle[data-static] {
    display: none;
  }
}

/* Two cards side by side (at most 920px wide, centred), or three where Free is
   offered; below 960px three stack, below 720px every set does. One card on its
   own is a comfortable width. On the website Free's card is in the markup but
   hidden while the app does not offer it: then the two that show are two. */
.plan-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 920px;
  margin: 0 auto;
}
.plan-cards:has(> .plan-card:only-child) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 460px;
}
/* Free makes three cards: three columns where there is room (below, they stack). */
.plan-cards:has(> .plan-card:nth-child(3)) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: none;
}
.plan-cards:has(> .plan-card[hidden]) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 920px;
}
.plan-card {
  --plan: var(--plan-basic);
  --plan-on: var(--plan-free-on);
  --plan-name: var(--plan-basic-text);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 30px;
  border: 1px solid var(--plan-line);
  border-radius: 26px;
  /* Clips Advanced's wash to the card's rounded corners. */
  overflow: hidden;
  background: var(--plan-bg);
  color: var(--plan-text);
  font-size: 15px;
  line-height: 1.45;
}
/* A display rule above would beat the browser's own for `hidden`, so say it. */
.plan-card[hidden] {
  display: none;
}
.plan-card[data-tier='advanced'] {
  --plan: var(--plan-advanced);
  --plan-on: var(--plan-advanced-on);
  --plan-name: var(--plan-advanced-text);
  /* The featured card: an orange edge, a wash from the top right corner and a
     soft shadow. */
  border-color: color-mix(in srgb, var(--plan-advanced) 60%, transparent);
  background:
    radial-gradient(120% 80% at 100% 0%, var(--plan-wash), transparent 60%),
    var(--plan-bg);
  box-shadow: 0 40px 100px -40px var(--plan-glow);
}
.plan-card[data-tier='free'] {
  --plan: var(--plan-free);
  --plan-on: var(--plan-free-on);
  --plan-name: var(--plan-free-text);
}
.plan-card[data-current],
.plan-card[data-chosen] {
  border-color: color-mix(in srgb, var(--plan) 70%, transparent);
}
.plan-card > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 10px;
}
.plan-card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
/* The name: DM Serif Display, as klaboo.com's headlines. (An h2 on the
   website, an h3 in the app's dialogs; the page's own heading rules lose to
   this one, which is a class and an element.) */
.plan-card-title :is(h2, h3) {
  color: var(--plan-text);
  font: 400 30px/1.1 var(--plan-display);
  letter-spacing: -0.01em;
}
.plan-beta {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--plan-beta-bg);
  color: var(--plan-beta-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: middle;
}
.plan-card-title .plan-beta {
  align-self: flex-start;
  margin-top: 5px;
}
/* "Your plan" and "Your choice": a small tinted label, not a button (no border
   weight, no shadow, no pointer). */
.plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 9px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--plan) 20%, var(--plan-bg));
  color: var(--plan-name);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  cursor: default;
}
.plan-tagline {
  margin: 6px 0 20px;
  color: var(--plan-muted);
  font-size: 15px;
}
.plan-price {
  margin: 0 0 14px;
}
.plan-price-amount {
  color: var(--plan-dim);
  font-size: 17px;
  line-height: 1.1;
}
.plan-price-amount strong {
  color: var(--plan-text);
  font: 400 64px/1 var(--plan-display);
  letter-spacing: -0.02em;
}
.plan-price-was {
  color: var(--plan-dim);
  font-size: 26px;
  font-weight: 700;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
/* The note about the price: small and dim, with a bold lead. Under a paid
   price, for the period the switch shows. */
.plan-price-note {
  color: var(--plan-dim);
  font-size: 13px;
}
.plan-price-note strong {
  color: var(--plan-muted);
}
.plan-price-notes p {
  margin: 0 0 22px;
}
/* The launch offer, under the price it lowers: what a new member pays at first
   and for how long (bold), then the price after it, plainly. The same small
   dim note as the other lines under a price. */
.plan-offer {
  color: var(--plan-dim);
  font-size: 13px;
  line-height: 1.45;
}
.plan-offer-first {
  display: block;
  color: var(--plan-muted);
  font-weight: 700;
}
.plan-offer-then {
  display: block;
}
/* No note between the price (or the switch) and the list: a little room. */
.plan-price + .plan-includes,
.plan-toggle + .plan-includes {
  margin-top: 8px;
}
/* On the person's own card, where the price and the button would be: what they
   pay, then how they are billed and when it renews. Plain text, left-aligned,
   no box, so it is never mistaken for a button. */
.plan-own {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.plan-own svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--plan-name);
}
.plan-own-period {
  color: var(--plan-text);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.plan-chooser .plan-own-note {
  margin-top: 2px;
  color: var(--plan-muted);
  font-size: 14px;
}
/* A member's own price above how they are billed: the price block (the big
   amount, the per-month note, why it is lower) and the one status line. */
.plan-own-price {
  display: grid;
  gap: 2px;
  margin-bottom: 12px;
}
.plan-chooser .plan-own-line {
  margin-top: 0;
}
/* What the plan includes. It grows, so the buttons line up at the bottom of
   the cards whatever each list's length. */
.plan-includes {
  flex: 1;
  display: grid;
  align-content: start;
  gap: 11px;
  margin: 0 0 24px;
  padding: 0;
  color: var(--plan-muted);
  font-size: 15px;
  list-style: none;
}
.plan-includes li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
}
/* A small round green check: a faint green disc with the tick inside. */
.plan-includes svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  padding: 2px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--plan-check) 22%, transparent);
  color: var(--plan-check);
  stroke-width: 3;
}
.plan-feature-name {
  color: var(--plan-text);
  font-weight: 700;
}
.plan-includes .plan-beta {
  margin-left: 4px;
}
/* Advanced's "What counts as fair use?", just above its button: a link on the
   website, the app's disclosure in the app. Above the stretched button's
   overlay, so pressing it opens it and does not press the button. */
.plan-fair-link,
.plan-chooser .plan-fair-use {
  position: relative;
  z-index: 1;
  margin: -8px 0 18px;
  font-size: 14px;
}
.plan-fair-link a,
.plan-chooser .plan-fair-use > summary {
  width: fit-content;
  color: var(--plan-link);
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.plan-chooser .plan-fair-use > p {
  margin-top: 8px;
  color: var(--plan-muted);
  font-size: 13px;
}

/* The one big button at the bottom: a pill. An outline on Free and Basic (and
   for a quieter step: Switch to Basic), filled orange on Advanced. The same
   class serves a link (the website) and a button (the app). */
.plan-action {
  display: grid;
  align-content: start;
  gap: 10px;
}
.plan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}
.plan-btn-filled,
.plan-btn-outline {
  border-color: var(--plan-ghost-line);
  background: transparent;
  color: var(--plan-text);
}
.plan-card[data-tier='advanced'] .plan-btn-filled {
  border-color: transparent;
  background: linear-gradient(
    180deg,
    var(--plan-advanced-hi),
    var(--plan-advanced)
  );
  color: var(--plan-advanced-on);
  box-shadow:
    0 10px 30px -10px #f28c28b3,
    inset 0 1px 0 #ffffff59;
}
/* Lighter on hover by its colour, not a filter and not a lift: a filter (or a
   transform) on a stretched button makes the button, not the card, the box its
   overlay fills, so the overlay shrinks, the pointer is off it, the hover ends
   and the card blinks; a press on the card then misses the button (owner,
   October 26). */
.plan-btn-filled:hover:not(:disabled),
.plan-btn-outline:hover:not(:disabled) {
  background: var(--plan-ghost-hover);
}
.plan-card[data-tier='advanced'] .plan-btn-filled:hover:not(:disabled) {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--plan-advanced-hi) 88%, #fff),
    color-mix(in srgb, var(--plan-advanced) 88%, #fff)
  );
  box-shadow:
    0 16px 40px -12px #f28c28e6,
    inset 0 1px 0 #ffffff59;
}
.plan-btn-filled:active:not(:disabled):not(.plan-btn-stretch) {
  transform: translateY(1px);
}
.plan-btn:disabled {
  cursor: default;
  opacity: 0.7;
}
.plan-btn:focus-visible {
  outline: 3px solid var(--plan-focus);
  outline-offset: 2px;
}
/* Pressing anywhere on a card presses its button: the button's own box is
   stretched over the card. */
.plan-btn-stretch::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 26px;
}
.plan-btn-stretch:disabled::after {
  pointer-events: none;
}
.plan-card:has(.plan-btn-stretch:hover:not(:disabled)) {
  border-color: var(--plan);
  box-shadow:
    0 0 0 1px var(--plan),
    0 16px 40px -14px color-mix(in srgb, var(--plan) 60%, transparent);
}
.plan-card:has(.plan-btn-stretch:focus-visible) {
  outline: 3px solid var(--plan-focus);
  outline-offset: 3px;
}
.plan-card:has(.plan-btn-stretch:focus-visible) .plan-btn:focus-visible {
  outline: none;
}

.plan-notes {
  display: grid;
  gap: 12px;
}
/* No plan includes the videos themselves: said plainly, in the cards' own
   muted text. */
.plan-key-note {
  margin: 0;
  color: var(--plan-muted);
  font-size: 13px;
  line-height: 1.5;
}
/* What the launch offer is for, once, under the cards: a quiet strip in the
   logo's yellow. */
.plan-offer-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--plan-save-bg) 45%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--plan-save-bg) 12%, var(--plan-bg));
  color: var(--plan-text);
  font-size: 13px;
  line-height: 1.5;
}
.plan-offer-note svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--plan-star);
}

@media (prefers-reduced-motion: reduce) {
  .plan-chooser .plan-toggle label,
  .plan-btn {
    transition: none;
  }
}
/* Windows high contrast: the chosen pill is drawn in the system's own colours,
   and the cards and buttons keep an edge. */
@media (forced-colors: active) {
  .plan-chooser .plan-toggle label:has(input:checked) {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
  .plan-card {
    border-color: CanvasText;
  }
  .plan-btn {
    border-color: ButtonText;
  }
}

/* Three cards (Free offered) are too narrow side by side below 960px: stacked,
   as on a phone, centred and no wider than a phone's width, with the plan the
   person is on last. */
@media (max-width: 960px) {
  .plan-cards:has(> .plan-card:nth-child(3)) {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 520px;
  }
  .plan-cards:has(> .plan-card:nth-child(3)) > .plan-card[data-current] {
    order: 1;
  }
}

/* Stacked (a phone): a column of cards; the plan the person is already on goes
   last, so the plan they could move to is the first they see. */
@media (max-width: 720px) {
  .plan-chooser {
    gap: 20px;
  }
  .plan-cards {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 520px;
  }
  .plan-card[data-current] {
    order: 1;
  }
  .plan-chooser .plan-toggle label {
    flex: 1 1 auto;
  }
  .plan-card .plan-toggle {
    align-self: stretch;
  }
}
@media (max-width: 560px) {
  .plan-card {
    padding: 22px;
  }
  .plan-price-amount strong {
    font-size: 52px;
  }
}