/* Plan cards and the plan comparison table, on the home and pricing pages. The price never
   counts up. */

/* Four cards in a row, two below the desktop width and one on a phone. Each card is a subgrid of
   the row, so the names, the prices and the first lists line up across the cards. */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
@media (max-width: 68rem) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .plans { grid-template-columns: minmax(0, 1fr); } }
.plan { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: var(--space-4); align-content: start; padding: 24px; background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); border-block-start: 6px solid var(--env-3); min-inline-size: 0; }
.plan > * { margin: 0; min-inline-size: 0; }
/* The recommended plan carries the brand blue on its edge and around it (phase 6c decision 20). */
.plan--recommended { border-block-start-color: var(--blue); box-shadow: 0 0 0 2px var(--blue), var(--shadow-card); }
.plan--top { border-block-start-color: var(--ink); }
.plan__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.plan h3 { font-size: 1.6rem; margin: 0; }
.plan__flag { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--blue); color: var(--on-blue); font: 600 0.8rem / 1.4 var(--font-sans); }
.plan__price { display: grid; gap: var(--space-2); align-content: start; }
.plan__price p { margin: 0; }
.price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; color: var(--ink-2); font-weight: 600; }
/* Four cards share a row on a computer, so the price stays small enough for "from 199 EUR a year"
   to keep to one line; two cards to a row have room for the larger size. */
.price b { font-size: clamp(1.9rem, 2.4vw, 2.4rem); line-height: 1; letter-spacing: -0.04em; color: var(--ink); }
@media (max-width: 68rem) { .price b { font-size: 2.4rem; } }
.price__alt { font-size: var(--text-sm); color: var(--ink-2); }
.plan__more { display: grid; gap: var(--space-3); align-content: start; }
.plan__lead { margin: 0; font-weight: 600; color: var(--ink); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; align-content: start; }
.ticks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; overflow-wrap: break-word; }
.ticks li::before { content: ""; inline-size: 12px; block-size: 12px; margin-block-start: 6px; border-radius: 50%; border: 2px solid var(--pass); }
/* The action sits at the foot of the card, so the cards' actions line up. */
.plan__action { justify-self: start; align-self: end; margin: 0; }
.plans__custom { margin-block: var(--space-5) 0; font-weight: 600; }
.plans__custom a { color: var(--blue); }

/* Comparison table: a fact table, so nothing in it moves. */
.compare-wrap { overflow-x: auto; border-radius: var(--radius-panel); border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.compare td:first-child { font-weight: 600; }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; }
.yes, .no { display: inline-block; vertical-align: middle; }
.yes { inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--pass); }
.no { inline-size: 14px; block-size: 2px; background: var(--ink-2); }