/* pricing.css — Subscriptions / plan grid (Bento 2026)
   Shared between pricing.html and settings.html's Subscriptions section —
   both render the identical .tab-bar / .plan-grid / .plan-card markup. */

.pricing-page { max-width: 1020px; }

.pricing-eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--bento-ink-soft);
  margin-bottom: var(--sp-2);
}
.pricing-title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 700;
  color: var(--bento-ink);
  letter-spacing: -0.032em;
  line-height: 1.1;
  margin-bottom: var(--sp-3);
}
.pricing-lede {
  font-size: 1.08rem;
  color: var(--bento-ink-soft);
  max-width: 540px;
  margin: 0 auto var(--sp-5);
  line-height: 1.65;
}
.pricing-notice {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--bento-white);
  border: 1.5px solid var(--bento-line);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-5);
  font-size: 0.9rem;
  color: var(--bento-ink-soft);
  box-shadow: var(--shadow-card);
}

/* ── Tab bar ─────────────────────────────────────────────────────────────── */
.tab-bar {
  display: flex; gap: 0;
  background: var(--bento-sand);
  border: 1px solid var(--bento-line);
  border-radius: var(--r-lg);
  padding: 4px;
  width: fit-content;
  margin: var(--sp-5) auto var(--sp-6);
}
.tab-btn {
  font-size: 14px; font-weight: 500;
  padding: 8px 28px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--bento-btn-text);
  border-radius: calc(var(--r-lg) - 4px);
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform var(--dur-slow) var(--ease-spring), background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
  line-height: 1.4;
}
.tab-btn:hover { transform: scale(1.04); }
.tab-btn.active {
  background: var(--bento-white);
  border-color: var(--bento-line);
  box-shadow: var(--shadow-card);
}
.save-tag {
  font-size: 11px; font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  background: rgba(61,107,76,0.14);
  color: var(--bento-success);
  margin-left: 6px;
  vertical-align: middle;
}

/* ── Tab sections ───────────────────────────────────────────────────────── */
.tab-section { display: none; }
.tab-section.active { display: block; }

/* ── Plan grid ──────────────────────────────────────────────────────────── */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  align-items: stretch;
  margin-bottom: var(--sp-7);
  padding-top: 28px; /* room for absolutely-positioned badges */
}
@media (max-width: 820px) {
  .plan-grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; }
  .plan-grid [data-span="1x2"] { grid-row: span 1; }
}

/* ── Plan card ──────────────────────────────────────────────────────────── */
.plan-card {
  background: var(--bento-white);
  border: 1px solid var(--bento-line);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.1rem 1.1rem;
  display: flex; flex-direction: column; gap: var(--sp-3);
  position: relative;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-slow) var(--ease-spring), box-shadow var(--dur-base) ease;
}
.plan-card:hover { transform: translateY(-8px) scale(1.015); box-shadow: var(--shadow-card-hover); }

/* Entry animation — staggered per column */
@keyframes card-rise {
  from { opacity: 0; transform: translateY(36px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.plan-grid .plan-card:nth-child(1) { animation: card-rise 0.55s var(--ease-spring) 0.08s both; }
.plan-grid .plan-card:nth-child(2) { animation: card-rise 0.55s var(--ease-spring) 0.19s both; }
.plan-grid .plan-card:nth-child(3) { animation: card-rise 0.55s var(--ease-spring) 0.30s both; }

/* Featured cards — glow pulse (box-shadow only, no transform conflict with hover) */
@keyframes glow-blue {
  0%,100% { box-shadow: 0 0 0 2px rgba(199,164,124,0.30), 0 8px 28px rgba(199,164,124,0.18); }
  50%     { box-shadow: 0 0 0 4px rgba(199,164,124,0.46), 0 12px 40px rgba(199,164,124,0.32); }
}
@keyframes glow-highlight {
  0%,100% { box-shadow: 0 0 0 2px rgba(74,63,51,0.16), 0 8px 28px rgba(74,63,51,0.10); }
  50%     { box-shadow: 0 0 0 5px rgba(74,63,51,0.32), 0 12px 40px rgba(74,63,51,0.24); }
}
@media (prefers-reduced-motion: reduce) {
  .plan-grid .plan-card,
  .plan-card.featured-blue,
  .plan-card.featured-highlight,
  .badge-popular,
  .badge-offer { animation: none; }
}

.plan-card.featured-blue {
  border: 2px solid rgba(199,164,124,0.65);
  animation: card-rise 0.55s var(--ease-spring) 0.19s both,
             glow-blue 3.6s ease-in-out 0.74s infinite;
}
.plan-card.featured-highlight {
  border: 2px solid rgba(74,63,51,0.50);
  animation: card-rise 0.55s var(--ease-spring) 0.30s both,
             glow-highlight 3.2s ease-in-out 0.85s infinite;
}

/* ── Badge ──────────────────────────────────────────────────────────────── */
.top-badge {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  font-size: 12px; font-weight: 700;
  padding: 5px 16px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  font-family: var(--font-body);
  letter-spacing: 0.025em;
  display: inline-flex; align-items: center; gap: 4px;
}
.badge-popular {
  background: linear-gradient(135deg, var(--bento-tan-300) 0%, var(--bento-tan-200) 100%);
  color: var(--bento-btn-text);
  border: none;
  box-shadow: 0 3px 14px rgba(199,164,124,0.55), 0 0 0 2px rgba(199,164,124,0.24);
  animation: badge-pop-pulse 2.8s ease-in-out infinite;
}
@keyframes badge-pop-pulse {
  0%,100% { box-shadow: 0 3px 14px rgba(199,164,124,0.55), 0 0 0 2px rgba(199,164,124,0.24); transform: translateX(-50%) scale(1); }
  50%     { box-shadow: 0 4px 22px rgba(199,164,124,0.78), 0 0 0 4px rgba(199,164,124,0.36); transform: translateX(-50%) scale(1.05); }
}

.badge-offer {
  background: linear-gradient(135deg, var(--bento-ink-soft) 0%, var(--bento-tan-300) 100%);
  color: var(--bento-white);
  border: none;
  font-size: 11.5px;
  box-shadow: 0 3px 14px rgba(74,63,51,0.55), 0 0 0 2px rgba(74,63,51,0.24);
  animation: badge-offer-pulse 2.3s ease-in-out infinite;
}
@keyframes badge-offer-pulse {
  0%,100% { box-shadow: 0 3px 14px rgba(74,63,51,0.55), 0 0 0 2px rgba(74,63,51,0.24); transform: translateX(-50%) scale(1); }
  50%     { box-shadow: 0 4px 24px rgba(74,63,51,0.78), 0 0 0 5px rgba(74,63,51,0.34); transform: translateX(-50%) scale(1.06); }
}

/* ── Plan tier + pricing block ──────────────────────────────────────────── */
.plan-tier {
  font-family: var(--font-body);
  font-size: 0.68rem; color: var(--bento-ink-soft);
  text-transform: uppercase; letter-spacing: 0.12em;
  margin: 0 0 7px;
  font-weight: 700;
}
.save-pill {
  display: inline-block;
  font-size: 11px; padding: 2px 8px;
  border-radius: var(--r-sm);
  background: rgba(61,107,76,0.14); color: var(--bento-success);
  font-weight: 600; margin-left: 6px; vertical-align: middle;
  font-family: var(--font-body);
}
.plan-price-row { display: flex; align-items: baseline; gap: var(--sp-2); }
.plan-price {
  font-size: 2.1rem; font-weight: 700; margin: 0;
  color: var(--bento-ink);
  font-family: var(--font-body);
  letter-spacing: -0.025em;
  line-height: 1;
}
.plan-old {
  font-size: 0.85rem; color: var(--bento-ink-soft);
  text-decoration: line-through;
  font-family: var(--font-body);
}
.plan-per {
  font-size: 0.78rem; color: var(--bento-ink-soft); margin: 4px 0 0;
  font-family: var(--font-body);
  letter-spacing: 0.01em;
}
.plan-annual-total {
  font-size: 0.72rem; color: var(--bento-ink-soft); margin: 2px 0 0;
  font-family: var(--font-body);
}

/* ── Divider + name + features ──────────────────────────────────────────── */
.card-divider {
  border: none;
  border-top: 1px solid var(--bento-line);
  margin: 0;
}
.plan-name {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--bento-ink);
  margin: 10px 0 12px;
}
.feature-list { display: flex; flex-direction: column; gap: 9px; flex: 1; }
.feature-item { display: flex; gap: 9px; align-items: flex-start; }
.fcheck {
  flex-shrink: 0; width: 15px; height: 15px; margin-top: 2px; display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l3.5 3.5L13 4' stroke='%23C7A47C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
}
.feature-item span {
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: var(--bento-ink-soft);
  line-height: 1.5;
}

/* ── Card footer ─────────────────────────────────────────────────────────── */
.plan-footer {
  border-radius: var(--r-sm);
  padding: 7px 11px; margin-top: auto;
}
.footer-default {
  background: rgba(74,63,51,0.05);
  border: 1px solid rgba(74,63,51,0.10);
}
.footer-info {
  background: rgba(199,164,124,0.18);
  border: 1px solid rgba(199,164,124,0.30);
}
.plan-footer p { font-size: 13px; margin: 0; font-family: var(--font-body); }
.footer-default p { color: var(--bento-ink-soft); }
.footer-info p { color: var(--bento-ink); }

/* ── Free guest note ──────────────────────────────────────────────────────── */
.pricing-guest-note {
  text-align: center;
  padding: var(--sp-5);
  background: var(--bento-white);
  border: 1.5px solid var(--bento-line);
  border-radius: var(--r-lg);
  max-width: 600px;
  margin: 0 auto var(--sp-6);
  box-shadow: var(--shadow-card);
}
.pricing-guest-note p {
  color: var(--bento-ink-soft);
  font-size: 0.92rem;
  margin: 0;
}
.pricing-guest-note a {
  color: var(--bento-tan-300);
  font-weight: 700;
}