/* A plan's card (partials/site/plan-card.html.twig), on /signup, /pricing and in Settings › Membership's Compare plans.
   The page lays the cards out; --tier is the plan's accent. A .is-static card is not selectable: it doesn't lift on hover. */
.pickcard { position: relative; display: flex; flex-direction: column; padding: 22px 18px 20px; gap: 14px; overflow: hidden; border-radius: var(--ld-radius-lg); border: 1px solid var(--ld-line); background: var(--ld-surface-2); color: var(--ld-text); text-align: left; cursor: pointer; transition: border-color var(--ld-ease-enter), transform var(--ld-ease-enter), box-shadow var(--ld-ease-enter), background-color var(--ld-ease-enter); }
.pickcard:where(:not(.is-static)):hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tier) 50%, transparent); }
.pickcard.is-static { cursor: default; }
.pickcard.is-on { border-color: var(--tier); background: color-mix(in srgb, var(--tier) 10%, var(--ld-surface-2)); box-shadow: 0 0 0 1px var(--tier), 0 14px 30px rgba(0,0,0,.35); }
.pick-head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pick-title { display: flex; flex-direction: column; gap: 4px; }
.pick-tag { min-height: 38px; }
.pick-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pick-price b { font: 800 30px/34px var(--font-display); color: var(--ld-text-strong); }
/* The struck old price always sits on its own line above the deal price. */
.pick-price s { flex: 0 0 100%; }
.pick-more { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--ld-ease-enter); }
.pick-more-in { overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
.pick-tag-phone { display: none; }
.pick-limits { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--ld-line); }
.pick-limits > span { display: flex; align-items: center; gap: 8px; color: var(--ld-text); font: 400 13px/18px var(--font-sans); }
.pick-limits svg { flex: none; color: var(--ld-text-muted); }
.pickcard.is-on .pick-limits svg { color: var(--tier); }
/* What a limit gains over the member's plan, small under it. */
.pick-fact { display: flex; flex-direction: column; min-width: 0; }
.pick-gain { font: 600 11px/14px var(--font-sans); color: color-mix(in srgb, var(--tier) 75%, var(--ld-text-strong)); }
.pick-badge { align-self: flex-start; }
/* The card's action: a Choose (or Upgrade) button in the plan's accent, or the member's own plan marked. */
.pick-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; text-align: center; }
.pick-foot[hidden] { display: none; }
.pick-buy { min-height: 44px; height: auto; padding: 8px 12px; gap: 0 4px; flex-wrap: wrap; justify-content: center; white-space: normal; border-radius: var(--ld-radius-md); border: 1px solid var(--tier); background: color-mix(in srgb, var(--tier) 22%, var(--ld-surface-2)); color: var(--ld-text-strong); font: 600 13px/17px var(--font-sans); font-variant-numeric: tabular-nums; transition: background-color 150ms ease-out, transform 120ms ease-out; }
.pick-buy:hover { background: color-mix(in srgb, var(--tier) 34%, var(--ld-surface-2)); }
.pick-buy:active { transform: scale(.98); }
.pick-buy b { font-weight: 700; }
.pick-mine { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; font: 600 13px/17px var(--font-sans); color: var(--ld-text-secondary); }
.pick-mine svg { color: var(--tier); }

/* A page's row of cards (/signup, /pricing): equal columns across the page. On phones compact rows: a selectable card
   opens to show its limits once chosen, a static one always shows them. */
.pickgrid { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 14px; margin-top: 32px; align-items: stretch; }
/* When any card has a deal, the others keep the struck price's line and the chip's space, so the row stays even. A long
   deal price pushes "/year" onto its own line: the head takes up the card's spare height so chips and limits still line
   up across the row. */
@media (min-width: 761px) {
  .pickgrid .pick-head { flex-grow: 1; }
  .pickgrid.has-deals .pick-price s[hidden] { display: block !important; visibility: hidden; }
  .pickgrid.has-deals .pickcard > [data-deal-chip][hidden] { display: inline-flex !important; visibility: hidden; }
}
@media (max-width: 760px) {
  .pickgrid { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 20px; }
  .pickgrid .pickcard { padding: 12px 14px; gap: 0; }
  .pickgrid .pickcard:hover { transform: none; }
  .pickgrid .pick-head { flex-direction: row; align-items: center; gap: 12px; }
  .pickgrid .pick-title { flex: 1; min-width: 0; }
  .pickgrid .pick-tag { display: none; }
  .pickgrid .pick-price { flex-direction: column; align-items: flex-end; gap: 0; }
  .pickgrid .pick-price b { font-size: 20px; line-height: 24px; }
  .pickgrid .pick-more { grid-template-rows: 0fr; }
  .pickgrid .pickcard:is(.is-on, .is-static) .pick-more { grid-template-rows: 1fr; }
  .pickgrid .pickcard:is(.is-on, .is-static) .pick-more-in { padding-top: 12px; }
  .pickgrid .pick-tag-phone { display: block; }
  .pickgrid .pick-limits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .pickgrid .pickcard > :is(.pick-badge, .pick-foot) { margin-top: 12px; }
}

/* Wide screens: the cards carry their tier's tint. */
@media (min-width: 1200px) {
  .pickcard { padding: 24px 20px 20px; border-radius: var(--ld-radius-xl); }
  .pickcard, .pickcard.is-on { background-image: linear-gradient(180deg, color-mix(in srgb, var(--tier) 14%, transparent), transparent 55%); }
  .pickgrid { gap: 16px; }
}
@media (min-width: 1440px) {
  .pick-price b { font-size: 36px; line-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .pick-buy { transition: none; }
}