/* The plans side by side: the Plan tab (plans-page.ts) and the home page (index.html). Colours come
   from each page's --accent, --text, --muted, --tile and --cmp-line. */
[data-style="club"] { --cmp-yes: #b8552c; }
.plan-cards { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px; animation: plan-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.plan-card:nth-child(2) { animation-delay: 0.07s; }
.plan-card:nth-child(3) { animation-delay: 0.14s; }
.plan-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgb(30 20 10 / 0.13); }
.plan-card h3 { margin: 0; font-size: 1.5em; font-weight: 600; }
.plan-card .pill, .plan-card .plan-go { margin-top: auto; width: 100%; }
.plan-card.is-current { outline: 2px solid var(--accent); outline-offset: -2px; }
.plan-badge { position: absolute; top: 20px; right: 20px; padding: 3px 10px; border-radius: 999px; background: var(--cmp-yes, var(--accent)); color: #fff; font-size: 0.78em; font-weight: 600; }
.plan-who { margin: 0; color: var(--muted); font-size: 0.95em; }
.plan-price { margin: 8px 0 0; color: var(--accent); font-size: 1.15em; font-weight: 600; }
.plan-what { margin: 0 0 14px; }
.plan-list { margin: 0 0 12px; padding-left: 18px; }
.plan-list li { margin: 4px 0; }
.plan-warn { font-weight: 600; }

.cmp-section { --cmp-line: var(--tile-edge, rgb(120 110 100 / 0.22)); padding: 0; overflow: clip; animation: plan-rise 0.5s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.cmp-table { width: 100%; border-collapse: collapse; }
.cmp-table thead th { position: sticky; top: var(--cmp-top, 0); z-index: 2; padding: 16px 12px; background: var(--tile); border-bottom: 2px solid var(--cmp-line); font-size: 1.05em; font-weight: 600; text-align: center; }
.cmp-table thead th.cmp-corner { text-align: left; padding-left: 24px; color: var(--muted); font-weight: 500; font-size: 0.95em; }
.cmp-table thead th.is-current { color: var(--accent); }
.cmp-head th { padding: 22px 24px 8px; text-align: left; color: var(--accent); font-size: 0.85em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.cmp-name { width: 46%; padding: 12px 12px 12px 24px; text-align: left; font-weight: 400; }
.cmp-table tbody tr:not(.cmp-head) { border-top: 1px solid var(--cmp-line); transition: background-color 0.15s ease; }
.cmp-table tbody tr:not(.cmp-head):hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.cmp-table td { width: 18%; padding: 12px; text-align: center; vertical-align: middle; }
.cmp-table td.is-current { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.cmp-text { font-size: 0.92em; font-weight: 500; }
.cmp-soon { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); font-size: 0.78em; font-weight: 600; white-space: nowrap; }
.cmp-yes, .cmp-no { display: inline-block; width: 24px; height: 24px; border-radius: 50%; vertical-align: middle; }
.cmp-yes { position: relative; background: var(--cmp-yes, var(--accent)); animation: plan-pop 0.35s 0.25s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.cmp-yes::after { content: ''; position: absolute; left: 9px; top: 5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); }
.cmp-no { position: relative; }
.cmp-no::after { content: ''; position: absolute; left: 7px; right: 7px; top: 11px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--muted) 60%, transparent); }

@keyframes plan-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes plan-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .plan-card, .cmp-section, .cmp-yes { animation: none; }
  .plan-card, .cmp-table tbody tr { transition: none; }
  .plan-card:hover { transform: none; }
}

/* A phone: the plans stack, and each row puts its name above the three plans. */
@media (max-width: 760px) {
  .plan-cards { grid-template-columns: minmax(0, 1fr); }
  .cmp-table thead { position: sticky; top: var(--cmp-top, 0); z-index: 2; }
  .cmp-table thead th { position: static; padding: 12px 4px; font-size: 0.95em; }
  .cmp-table thead th.cmp-corner { width: 0; padding: 0; font-size: 0; }
  .cmp-table, .cmp-table thead, .cmp-table tbody, .cmp-table tr { display: block; }
  .cmp-table thead tr, .cmp-table tbody tr:not(.cmp-head) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cmp-table thead .cmp-corner { display: none; }
  .cmp-head th { display: block; padding: 20px 16px 6px; }
  .cmp-name { display: block; grid-column: 1 / -1; width: auto; padding: 12px 16px 2px; font-weight: 500; }
  .cmp-table td { display: block; width: auto; padding: 6px 4px 12px; }
  .cmp-text { font-size: 0.85em; }
}