/* BloxMaps /pricing (Pricing v2): monthly / yearly switch, founders banner, four plans, packs,
   the "cancel anytime" row. Uses the tokens and components of app.css. */

/* monthly / yearly: both are in the page, the switch shows one (monthly without JS) */
.pricing[data-interval="month"] .yr, .pricing[data-interval="year"] .mo { display: none !important; }
/* founders parts show only while /api/founders says spots are left (pricing.js) */
.pricing:not([data-founders="on"]) .fd { display: none !important; }

.interval { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 24px; }
.interval-seg { display: inline-grid; grid-auto-columns: minmax(118px, 1fr); }
.interval-seg .seg-btn { min-height: 44px; font-size: 1.05rem; }
.interval-hint { font-weight: 800; color: var(--ink-2); font-size: 0.92rem; }
.interval-hint b { color: var(--green-d); }

/* founders banner */
.founders { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; margin: 0 0 34px;
  padding: 18px 22px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--purple-soft), var(--blue-soft));
  border: 2px solid color-mix(in srgb, var(--purple) 40%, transparent); box-shadow: 0 6px 0 color-mix(in srgb, var(--purple-d) 35%, transparent); }
.founders-badge { width: 56px; height: 56px; border-radius: 18px; background: var(--purple); color: #fff; display: grid; place-items: center;
  box-shadow: 0 4px 0 var(--purple-d); transform: rotate(-6deg); }
.founders-badge .i { width: 28px; height: 28px; }
.founders h2 { font-size: 1.35rem; margin: 0 0 4px; }
.founders p { margin: 0; color: var(--ink-2); font-weight: 700; }
.founders-count { text-align: center; min-width: 124px; }
.founders-count b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 2.3rem; line-height: 1; color: var(--ink); }
.founders-count > span { font-weight: 800; color: var(--ink-2); font-size: 0.86rem; }
.founders-bar { margin-top: 8px; height: 10px; border-radius: 999px; background: var(--surface); border: 2px solid var(--line); overflow: hidden; }
.founders-bar span { display: block; height: 100%; background: var(--purple); border-radius: 999px; transition: width 0.8s cubic-bezier(0.2, 1, 0.3, 1); }
@media (max-width: 720px) {
  .founders { grid-template-columns: auto 1fr; padding: 16px; gap: 12px 14px; }
  .founders-badge { width: 44px; height: 44px; border-radius: 14px; }
  .founders-badge .i { width: 22px; height: 22px; }
  .founders h2 { font-size: 1.15rem; }
  .founders-count { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; text-align: left; }
  .founders-count b { font-size: 1.6rem; }
  .founders-bar { margin-top: 0; }
}

/* four plans */
.plans-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
@media (min-width: 1100px) { .plans-4 { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.plans-4 .plan { padding: 24px 20px; }
.plans-4 .plan .price { font-size: 2.4rem; }
.plan .price-note { margin: -4px 0 0; font-weight: 700; color: var(--ink-2); font-size: 0.88rem; }
.plan .price-note.fd { display: flex; gap: 6px; align-items: center; color: var(--ink); background: var(--purple-soft); border-radius: 12px;
  padding: 5px 10px; font-size: 0.85rem; margin: 0; }
.plan .price-note.fd .i { color: var(--purple); flex: none; }
.plan .trial { display: grid; gap: 6px; }
.plan .trial .btn { margin-top: 0; }
.plan .trial p { text-align: center; }
.plan.current .btn[disabled] { opacity: 1; }

/* cancel anytime / receipts / maps stay yours */
.reassure { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
.reassure li { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r); background: var(--surface);
  border: 2px solid var(--line); font-weight: 700; color: var(--ink-2); font-size: 0.95rem; }
.reassure li b { color: var(--ink); }
.reassure .i { color: var(--green-d); width: 22px; height: 22px; margin-top: 1px; }
@media (max-width: 860px) { .reassure { grid-template-columns: 1fr; } }

/* export packs */
.packs { display: grid; gap: 20px; grid-template-columns: 1.15fr 1fr; align-items: center; margin-top: 34px; padding: 22px 24px;
  border-radius: var(--r-lg); background: linear-gradient(135deg, var(--yellow-soft), var(--surface)); border: 2px solid var(--yellow-d);
  box-shadow: 0 6px 0 var(--yellow-d); }
.packs-intro { display: flex; gap: 16px; align-items: center; }
.packs-intro .coin { width: 72px; height: 72px; flex: none; }
.packs-intro h2 { font-size: 1.5rem; margin: 0 0 4px; }
.packs-intro p { margin: 0; color: var(--ink-2); font-weight: 700; }
.pack-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pack-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 20px; background: var(--surface); border: 2px solid var(--line); }
.pack-card.best { border-color: var(--yellow-d); }
.pack-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 1.15rem; }
.pack-top b { font-weight: 600; }
.pack-card .price { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; line-height: 1; }
.pack-card .price small { font-size: 0.9rem; color: var(--ink-2); font-weight: 600; }
.pack-card .btn { margin-top: 4px; }
@media (max-width: 900px) { .packs { grid-template-columns: 1fr; } }
@media (max-width: 460px) {
  .packs { padding: 18px 16px; }
  .packs-intro { flex-direction: column; text-align: center; }
  .pack-cards { grid-template-columns: 1fr; }
}

/* compare table with five columns */
table.compare.compare-5 { min-width: 660px; }