.plans-page {
  /* Was a fixed 1100px, so the container stayed the same width no matter how
     wide the browser was. Now it grows with the viewport (still capped so it
     doesn't stretch absurdly wide on an ultra-wide monitor). */
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.plans-page h1 {
  text-align: center;
  margin-bottom: 6px;
}

.plans-tagline {
  text-align: center;
  color: #666;
  font-style: italic;
  margin-top: 0;
  margin-bottom: 24px;
}

.plans-admin-banner {
  background: #fff3cd;
  border: 1px solid #ffc107;
  color: #856404;
  border-radius: 8px;
  padding: 14px 20px;
  text-align: center;
  margin-bottom: 28px;
  font-size: 1.05em;
}

.plans-beta-banner {
  background: #d4edda;
  border: 1px solid #a3d9a5;
  color: #1a5c2a;
  border-radius: 8px;
  padding: 14px 20px;
  text-align: center;
  margin-bottom: 28px;
  font-size: 1.05em;
}

.plans-grid-wrap {
  position: relative;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

/* Shown via JS (see the inline script below the grid) only when the cards
   actually wrap to a second row — e.g. a half-width browser — so it's
   obvious there's more to see instead of it silently scrolling off. */
/* Kept fully inside .plans-grid-wrap's own box (never translated past its
   right edge) — the shared .clsBlueContainer this page sits in clips
   horizontal overflow (overflow-x: hidden), so anything positioned outside
   its bounds was getting silently cut off. */
.plans-more-hint {
  display: none;
  position: absolute;
  top: -34px;
  right: 4px;
  z-index: 2;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  font-size: 0.85em;
  font-weight: bold;
  color: #007bff;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  animation: plans-more-hint-bounce 1.4s ease-in-out infinite;
}

.plans-more-arrow {
  font-size: 1.3em;
  line-height: 1;
}

@keyframes plans-more-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

.plans-card {
  background: #fff;
  border: 2px solid #dde3ee;
  border-top: 6px solid var(--tier-accent, #dde3ee);
  border-radius: 12px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s;
}

.plans-card:not(.plans-card--coming-soon):hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 123, 255, 0.15);
}

/* Pay-what-you-want amount picker on the Founding Supporter card. */
.plans-amount-form { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.plans-amount-row { display: flex; align-items: center; gap: 6px; font-weight: bold; }
.plans-amount-row input { width: 6em; padding: 6px 8px; font-size: 1.1em; text-align: right; }

.plans-card--current {
  background: #e6f9f0;
  border-color: #28a745;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15);
}

.plans-card--beta.plans-card--current {
  background: #e6f9f0;
  border-color: #28a745;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.15);
}

.plans-card--coming-soon {
  opacity: 0.9;
  position: relative;
  overflow: hidden;
}

.plans-card--coming-soon::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 90px;
  height: 90px;
  background: repeating-linear-gradient(
    45deg,
    #ffe066 0 10px,
    #333 10px 20px
  );
  opacity: 0.15;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  pointer-events: none;
}

.plans-card-header {
  margin-bottom: 18px;
  text-align: center;
}

.plans-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--tier-accent, #007bff);
  font-size: 1.6em;
  margin-bottom: 10px;
  transition: transform 0.2s;
}

.plans-card:hover .plans-icon-badge {
  transform: scale(1.12) rotate(-6deg);
}

.plans-card-header h2 {
  margin: 0 0 6px;
  font-size: 1.3em;
}

.plans-card-subtitle {
  margin: 0 0 10px;
  font-size: 0.85em;
  color: #777;
  font-style: italic;
}

.plans-price {
  font-size: 1.6em;
  font-weight: bold;
  color: var(--tier-accent, #1a1a2e);
}

.plans-price span {
  font-size: 1em;
  font-weight: normal;
  color: #666;
}

.plans-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  flex: 1;
}

.plans-features li {
  padding: 5px 0;
  padding-left: 20px;
  position: relative;
  color: #333;
  font-size: 1em;
}

.plans-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #28a745;
  font-weight: bold;
}

.plans-card--coming-soon .plans-features li::before {
  color: #aaa;
}

/* Marks what THIS tier adds beyond the previous (cheaper) card in the grid —
   the "more you get" a shopper is scanning for when comparing tiers. */
.plans-features li.plans-feature--new {
  font-weight: bold;
  background: rgba(0, 0, 0, 0.05);
  border-left: 3px solid var(--tier-accent, #007bff);
  border-radius: 4px;
  margin: 0 -8px;
  padding-left: 25px;
  padding-right: 8px;
}

.plans-features li.plans-feature--new::before {
  content: '✨';
  color: var(--tier-accent, #007bff);
}

.plans-card--coming-soon .plans-features li.plans-feature--new::before {
  color: var(--tier-accent, #aaa);
}

.plans-cta {
  margin-top: auto;
  text-align: center;
}

/* .clsButton has a fixed height (see application.css) sized for one line of
   text — fine for short labels, but "Cancel Subscription" wraps to two lines
   on a narrow card and the second line was getting clipped. Let these
   buttons grow instead of clipping. */
.plans-cta .clsButton {
  height: auto;
  min-height: 40px;
  white-space: normal;
  line-height: 1.2;
}

.plans-current-label {
  display: inline-block;
  background: #007bff;
  color: #fff;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 1em;
  font-weight: bold;
}

.plans-card--beta .plans-current-label {
  background: #6f42c1;
}

.plans-cta-note {
  margin: 8px 0 0;
  font-size: 0.85em;
  color: #666;
}

.plans-coming-soon-label {
  display: inline-block;
  background: linear-gradient(135deg, #ffd166, #f5a623);
  color: #7a4a00;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 1em;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(245, 166, 35, 0.35);
}

.plans-coming-soon-emoji {
  display: inline-block;
  animation: plans-wobble 1.6s ease-in-out infinite;
}

@keyframes plans-wobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-12deg); }
  75% { transform: rotate(12deg); }
}

.plans-coming-soon-caption {
  margin: 8px 0 0;
  font-size: 0.85em;
  color: #888;
  font-style: italic;
}

.plans-invite-note {
  display: block;
  font-size: 1em;
  color: #666;
  font-style: italic;
}

.plans-note {
  text-align: center;
  color: #888;
  font-size: 1em;
}

/* Phones: tighter, slightly smaller feature lists so each plan card isn't so tall (maintainer's request, 2026-10-07).
   Below the 15pt floor on purpose. TO REVERT: delete this block. */
@media (max-width: 699px) {
  /* Title on one line, less blank space above it. */
  .plans-page.clsBlueContainer { padding-top: 6px; }
  .plans-page h1 { margin-top: 0; margin-bottom: 4px; font-size: 1.25em; white-space: nowrap; }
  /* Room for the "More below ↴" hint, which is positioned just above the first card (it was overlapping the tagline). */
  .plans-tagline { margin-bottom: 32px; }
  .plans-more-hint { top: -28px; }
  /* Emoji badge and plan name on ONE line (🔍 Seeker, 🔥 Campfire, …), smaller badge. */
  .plans-card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 10px; }
  .plans-icon-badge { width: 38px; height: 38px; font-size: 1.2em; margin-bottom: 0; }
  .plans-card-header h2 { margin: 0; }
  .plans-card-header .plans-card-subtitle, .plans-card-header .plans-price { flex-basis: 100%; margin-top: 6px; margin-bottom: 4px; }
  .plans-features { margin-bottom: 12px; }
  .plans-features li { padding-top: 1px; padding-bottom: 1px; line-height: 1.25; font-size: 0.93em; }
}

/* Founding Supporter blurb: nudges people to pay a bit more than the minimum. */
.plans-support-note {
  margin: 0 0 14px;
  padding: 8px 12px;
  font-size: 0.95em;
  font-style: italic;
  color: #5a4300;
  background: rgba(245, 166, 35, 0.12);
  border-left: 3px solid var(--tier-accent, #f5a623);
  border-radius: 4px;
  text-align: left;
}

/* Phones: the page title and every button on the plans page are centered left to right (the buttons sit inside forms, which left-aligned
   them). TO REVERT: delete this block. */
@media (max-width: 800px) {
  .plans-page h1, .plans-page .plans-tagline { text-align: center !important; width: 100%; box-sizing: border-box; }
  .plans-page form, .plans-page .plans-cta, .plans-page .button_to { text-align: center; }
  .plans-page .clsButton, .plans-page input[type="submit"] { margin-left: auto; margin-right: auto; }
  .plans-page form .clsButton, .plans-page form input[type="submit"] { display: inline-flex; }
  .plans-page .plans-amount-row { justify-content: center; }
}