/* ============================================================
 * Gun Vault — Upgrade Modal / Plan Cards
 * One stylesheet drives both:
 *   - inline cards (homepage + /plans/ via [gv_plans] shortcode)
 *   - popup modal (#gvumModal in wp_footer)
 *
 * Design tokens are scoped under the wrapper classes so other
 * components can't leak in or out. Tone variants control the
 * border + accent colors:
 *   default     → muted silver-gray border (Free)
 *   tone-silver → silver gradient (Gun Safe)
 *   tone-gold   → gold gradient (Gun Legacy)
 *   tone-max    → really-gold gradient (Gun Trust, COMING SOON)
 *
 * State overlays:
 *   .is-current     → green border + green CTA + ribbon
 *   .is-coming-soon → muted + amber ribbon + disabled CTA
 *   .is-highlight   → recommended ribbon (no color override)
 * ============================================================ */

/* Design tokens — scoped to the cards wrapper so they don't
 * leak out and don't get clobbered by host page CSS. */
.gv-upgrade-cards-wrap,
.gvum-modal {
  --gvum-bg:        #0a0a0a;
  --gvum-bg-2:      #111;
  --gvum-bg-3:      #181818;
  --gvum-bg-4:      #1f1f1f;
  --gvum-border:    rgba(255, 255, 255, 0.08);
  --gvum-text:      #f0f0f0;
  --gvum-text-mute: rgba(255, 255, 255, 0.55);
  --gvum-text-dim:  rgba(255, 255, 255, 0.35);

  /* Silver gradient — for Gun Safe (bright, shiny, lots of white in the middle) */
  --gvum-silver-grad: linear-gradient(135deg,
    #6a6a6a 0%,
    #b8b8b8 12%,
    #ffffff 28%,
    #ffffff 42%,
    #f0f0f0 55%,
    #ffffff 68%,
    #d0d0d0 82%,
    #888 100%
  );

  /* Gold gradient — for Gun Legacy */
  --gvum-gold-grad: linear-gradient(135deg,
    #7a5200 0%,
    #D4A017 25%,
    #FFD060 50%,
    #f0c040 70%,
    #D4A017 90%,
    #8B6914 100%
  );

  /* Really-gold gradient — for Gun Trust */
  --gvum-max-grad: linear-gradient(135deg,
    #5a3800 0%,
    #C8962A 18%,
    #f0c040 38%,
    #FFD060 55%,
    #FFE08A 65%,
    #FFD060 75%,
    #C8962A 90%,
    #5a3800 100%
  );

  --gvum-green:     #2e8b3a;
  --gvum-green-lt:  #4cb863;
  --gvum-amber:     #d49717;
  --gvum-amber-lt:  #f0c040;
  --gvum-red:       #c0392b;
}

/* ============================================================
 * v3.1.5 — Billing toggle (Monthly / Annual)
 *
 * Pill-shaped segment control with two buttons. Inactive state
 * is a dim text on transparent background. Active state varies
 * by which side is chosen:
 *   - Monthly active → silver gradient (matches Safe tier)
 *   - Annual active  → gold gradient   (matches Legacy tier)
 *
 * The "Save N%" badge floats above the Annual button as a
 * gold/cream pill, drawing the eye toward the better deal.
 * Default is Annual selected (the recommended cadence).
 * ============================================================ */
.gv-billing-toggle-wrap {
  display: flex;
  justify-content: center;
  margin: 0 auto 28px;
  width: 100%;
}

.gv-billing-toggle {
  display: inline-flex;
  align-items: stretch;
  background: rgba(20, 20, 20, 0.85);
  border: 1px solid rgba(201, 160, 66, 0.22);
  border-radius: 999px;
  padding: 5px;
  position: relative;
  box-shadow:
    0 6px 28px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.gv-toggle-btn {
  position: relative;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 800;
  padding: 11px 28px;
  border-radius: 999px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--gvum-text-mute);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  transition: all 0.22s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.gv-toggle-btn:hover { color: var(--gvum-text); }

/* Monthly active → silver polished metal */
.gv-toggle-btn[data-cycle="monthly"].is-active {
  background: linear-gradient(135deg,
    #4a4a4a 0%,
    #777 12%,
    #c8c8c8 28%,
    #ffffff 50%,
    #c8c8c8 72%,
    #777 88%,
    #4a4a4a 100%
  );
  background-size: 200% 200%;
  color: #0a0a0a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  animation: gvumShineSilver 12s linear infinite;
}

/* Annual active → gold polished metal */
.gv-toggle-btn[data-cycle="annual"].is-active {
  background: linear-gradient(135deg,
    #5a3a08 0%,
    #8B6914 12%,
    #C8962A 28%,
    #FFD060 42%,
    #FFE8A0 50%,
    #FFD060 58%,
    #C8962A 72%,
    #8B6914 88%,
    #5a3a08 100%
  );
  background-size: 220% 220%;
  color: #1a1410;
  text-shadow: 0 1px 0 rgba(255, 232, 160, 0.55);
  box-shadow:
    0 4px 16px rgba(212, 160, 23, 0.3),
    inset 0 1px 0 rgba(255, 232, 160, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  animation: gvumShineGold 10s linear infinite;
}

/* "Save N%" badge inside the Annual button — only visible when
 * Annual is the active state; floats above the right edge slightly
 * tilted, drawing the eye. */
.gv-toggle-badge {
  display: inline-block;
  background: linear-gradient(135deg, #2a8d3a 0%, #4ec763 100%);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  position: absolute;
  top: -10px;
  right: -10px;
  transform: rotate(4deg);
  box-shadow: 0 3px 10px rgba(46, 139, 58, 0.45);
  text-shadow: none;
  pointer-events: none;
}

.gv-toggle-btn:not([data-cycle="annual"]) .gv-toggle-badge,
.gv-toggle-btn[data-cycle="annual"]:not(.is-active) .gv-toggle-badge {
  display: none;
}

/* Show the badge only when Annual is active */
.gv-toggle-btn[data-cycle="annual"].is-active .gv-toggle-badge {
  display: inline-block;
}

/* ============================================================
 * Price display swap — driven by data-billing-cycle on the
 * cards wrapper. Default annual visible; monthly hidden.
 * ============================================================ */
.gv-price-display { display: none; }
.gv-upgrade-cards[data-billing-cycle="monthly"] .gv-price-monthly { display: block; }
.gv-upgrade-cards[data-billing-cycle="annual"]  .gv-price-annual  { display: block; }
.gv-price-free { display: block; } /* always shown for free tier */

.gv-card-price-sub {
  margin-top: 10px;
  font-size: 13px;
  color: var(--gvum-text-mute);
  font-weight: 400;
  line-height: 1.4;
}

.gv-card-price-sub strong {
  color: var(--gvum-text);
  font-weight: 700;
}

.gv-card-price-save-pill {
  display: inline-block;
  background: rgba(46, 139, 58, 0.15);
  color: #4ec763;
  border: 1px solid rgba(46, 139, 58, 0.4);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-left: 4px;
  white-space: nowrap;
}

/* ============================================================
 * Bold "$XXX value" callouts inside feature lists
 * ============================================================ */
.gv-card-feature-value {
  font-weight: 800;
  color: var(--gvum-text);
  white-space: nowrap;
}

/* Per-tone color emphasis on the value pills */
.gv-card.tone-silver .gv-card-feature-value { color: #f0f0f0; }
.gv-card.tone-gold   .gv-card-feature-value { color: #FFD060; text-shadow: 0 0 6px rgba(255, 208, 96, 0.35); }
.gv-card.tone-max    .gv-card-feature-value { color: #FFE8A0; text-shadow: 0 0 8px rgba(255, 224, 138, 0.45); }

@media (max-width: 640px) {
  .gv-toggle-btn { padding: 10px 22px; font-size: 13px; letter-spacing: 1.4px; }
  .gv-toggle-badge { font-size: 9px; padding: 2px 7px; top: -8px; right: -8px; }
}

@media (prefers-reduced-motion: reduce) {
  .gv-toggle-btn[data-cycle="monthly"].is-active,
  .gv-toggle-btn[data-cycle="annual"].is-active {
    animation: none !important;
  }
}

/* Hide the legacy `.gv-card-price-annual` block (replaced by .gv-price-display variants) */
.gv-card-price-annual { display: none !important; }

/* ============================================================
 * Inline wrapper (shortcode) - existing styles below
 * ============================================================ */
.gv-upgrade-cards-wrap {
  font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  color: var(--gvum-text);
  background: transparent;
  padding: 48px 16px;
  width: 100%;
  box-sizing: border-box;
}

.gv-upgrade-cards-wrap.is-compact { padding: 24px 8px; }

.gv-upgrade-cards-header {
  text-align: center;
  margin: 0 auto 32px;
  max-width: 780px;
}

.gv-upgrade-cards-title {
  font-family: 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--gvum-text);
  line-height: 1.05;
}

.gv-upgrade-cards-subtitle {
  font-size: 16px;
  font-weight: 400;
  color: var(--gvum-text-mute);
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
 * Card grid — 4 columns desktop, 2 columns tablet, 1 column mobile
 * ============================================================ */
.gv-upgrade-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1280px;
  margin: 0 auto;
}

@media (max-width: 1100px) {
  .gv-upgrade-cards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 640px) {
  .gv-upgrade-cards { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
 * Single card — base (Free)
 * ============================================================ */
.gv-card {
  position: relative;
  background: linear-gradient(180deg, var(--gvum-bg-2) 0%, var(--gvum-bg) 100%);
  border: 1.5px solid var(--gvum-border);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  display: flex;
  flex-direction: column;
}

.gv-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.gv-card-inner {
  padding: 32px 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  z-index: 1;
}

/* Ribbons (corner badges) ---------------------------------- */
.gv-card-ribbon {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
  padding: 5px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

.gv-card-ribbon--promo {
  background: var(--gvum-bg-3);
  color: var(--gvum-amber-lt);
  border: 1px solid rgba(212, 160, 23, 0.4);
}

.gv-card-ribbon--current {
  background: linear-gradient(135deg, #8B6914 0%, #D4A017 50%, #FFD060 100%);
  color: #1a1410;
  border: none;
  text-shadow: 0 1px 0 rgba(255, 224, 138, 0.4);
}

.gv-card-ribbon--soon {
  background: rgba(212, 151, 23, 0.15);
  color: var(--gvum-amber-lt);
  border: 1px solid rgba(212, 151, 23, 0.5);
}

.gv-card-ribbon--highlight {
  background: rgba(255, 255, 255, 0.08);
  color: var(--gvum-text);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Card text ------------------------------------------------- */
.gv-card-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gvum-text-dim);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.gv-card-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: var(--gvum-text);
  margin: 0 0 6px;
  line-height: 1;
}

.gv-card-tagline {
  font-size: 14px;
  font-weight: 500;
  color: var(--gvum-text-mute);
  margin-bottom: 22px;
  line-height: 1.4;
}

/* Price ---------------------------------------------------- */
.gv-card-price {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--gvum-border);
}

.gv-card-price-currency {
  font-size: 24px;
  font-weight: 700;
  vertical-align: top;
  position: relative;
  top: 8px;
  margin-right: 1px;
  color: var(--gvum-text);
}

.gv-card-price-amount {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  color: var(--gvum-text);
  letter-spacing: -1.5px;
}

.gv-card-price-tail {
  font-size: 14px;
  font-weight: 500;
  color: var(--gvum-text-mute);
  margin-left: 4px;
}

.gv-card-price-annual {
  margin-top: 8px;
  font-size: 13px;
  color: var(--gvum-text-mute);
  font-weight: 400;
}

.gv-card-price-annual strong {
  color: var(--gvum-text);
  font-weight: 700;
}

/* Features list ------------------------------------------- */
.gv-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex: 1;
}

.gv-card-features li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
  font-size: 14px;
  color: var(--gvum-text);
  line-height: 1.45;
}

.gv-card-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #ffffff;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.4;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
}

/* Per-tone checkmark colors — Rand wants Free white, Safe silver,
 * Legacy gold, Trust gold. Higher specificity than the base ::before
 * rule above. */
.gv-card.tone-silver .gv-card-features li::before {
  color: #d8d8d8;
  text-shadow: 0 0 6px rgba(220, 220, 220, 0.4);
}
.gv-card.tone-gold .gv-card-features li::before {
  color: #D4A017;
  text-shadow: 0 0 6px rgba(212, 160, 23, 0.45);
}
.gv-card.tone-max .gv-card-features li::before {
  color: #FFD060;
  text-shadow: 0 0 8px rgba(255, 208, 96, 0.55);
}

/* "Everything in [tier], plus:" rows — no checkmark, italic, dim,
 * with a subtle hairline above to separate the inherited block.
 * Class is added in PHP when the feature string starts with "Everything in". */
.gv-card-features li.gv-card-features-divider {
  font-style: italic;
  color: var(--gvum-text-mute);
  padding-left: 0;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--gvum-border);
  font-size: 13px;
}
.gv-card-features li.gv-card-features-divider::before { content: ""; }

/* CTA button ---------------------------------------------- */
.gv-card-cta {
  display: block;
  text-align: center;
  text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 14px 18px;
  border-radius: 8px;
  background: var(--gvum-bg-4);
  color: var(--gvum-text);
  border: 1.5px solid var(--gvum-border);
  transition: all 0.18s ease;
  margin-top: auto;
}

.gv-card-cta:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.gv-card-cta.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
 * v3.1.4 — Diagonal sweep shimmer on metallic CTAs
 *
 * The base CTA gradient (set per-tone below) handles the static
 * "polished metal" look. This pseudo-element layer adds a thin
 * bright stripe that periodically sweeps left-to-right, mimicking
 * specular reflection moving over a curved surface. Two layers of
 * motion combined = noticeably shinier than the gradient alone.
 *
 * Sweep cycle: 7s — bright stripe travels across in ~4s, then
 * stays off-screen for ~3s before next sweep. Slow enough to be
 * ambient (per Rand's spec), bright enough to catch the eye.
 * ============================================================ */
.gv-card.tone-silver .gv-card-cta,
.gv-card.tone-gold .gv-card-cta,
.gv-card.tone-max .gv-card-cta,
.gv-card.is-current .gv-card-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.gv-card.tone-silver .gv-card-cta::after,
.gv-card.tone-gold .gv-card-cta::after,
.gv-card.tone-max .gv-card-cta::after,
.gv-card.is-current .gv-card-cta::after {
  content: '';
  position: absolute;
  top: -50%;
  bottom: -50%;
  width: 40%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 35%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0.18) 65%,
    transparent 100%
  );
  transform: translateX(-200%) skewX(-18deg);
  pointer-events: none;
  z-index: 1;
  animation: gvumSweep 7s ease-in-out infinite;
}

/* Trust gets a warmer, slightly brighter highlight */
.gv-card.tone-max .gv-card-cta::after {
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 248, 200, 0.22) 35%,
    rgba(255, 255, 220, 0.55) 50%,
    rgba(255, 248, 200, 0.22) 65%,
    transparent 100%
  );
  animation-duration: 6s;
}

/* Pause the sweep during hover so it doesn't fight the hover transform */
.gv-card-cta:hover::after {
  animation-play-state: paused;
}

/* One-way sweep: travel left-to-right over 60% of the cycle, then
 * dwell off-screen right for 40% before snapping back to the start.
 * The instant return is invisible because the stripe is already
 * off-screen, so the eye reads it as a clean periodic flash. */
@keyframes gvumSweep {
  0%       { transform: translateX(-200%) skewX(-18deg); }
  60%      { transform: translateX(450%)  skewX(-18deg); }
  100%     { transform: translateX(450%)  skewX(-18deg); }
}

/* Shared terms footer — one block below all four cards, replaces the
 * per-card terms text from earlier versions. Lets the CTA sit at the
 * exact same vertical position on every card regardless of feature
 * count, so the buttons line up perfectly across the grid. */
.gv-upgrade-cards-terms {
  max-width: 1280px;
  margin: 18px auto 0;
  padding: 0 8px;
  font-size: 12px;
  color: var(--gvum-text-dim);
  text-align: center;
  font-style: italic;
  line-height: 1.5;
}

/* ============================================================
 * Tone variants
 * ============================================================ */

/* SILVER — Gun Safe */
.gv-card.tone-silver {
  border-color: rgba(200, 200, 200, 0.25);
  background:
    linear-gradient(180deg, #1a1a1a 0%, var(--gvum-bg) 100%),
    radial-gradient(circle at 50% 0%, rgba(200, 200, 200, 0.08), transparent 60%);
}

.gv-card.tone-silver::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1.5px;
  background: var(--gvum-silver-grad);
  background-size: 200% 200%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
  animation: gvumShimmer 16s linear infinite;
}

.gv-card.tone-silver:hover { box-shadow: 0 14px 38px rgba(220, 220, 220, 0.18); }

.gv-card.tone-silver .gv-card-name,
.gv-card.tone-silver .gv-card-price-amount,
.gv-card.tone-silver .gv-card-price-currency {
  background: var(--gvum-silver-grad);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gvumShimmerText 14s linear infinite;
}

.gv-card.tone-silver .gv-card-cta {
  background: linear-gradient(135deg,
    #4a4a4a 0%,
    #777 12%,
    #c8c8c8 28%,
    #ffffff 45%,
    #ffffff 55%,
    #c8c8c8 72%,
    #777 88%,
    #4a4a4a 100%
  );
  background-size: 220% 220%;
  color: #0a0a0a;
  border: none;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 4px 14px rgba(0, 0, 0, 0.35);
  animation: gvumShineSilver 12s linear infinite;
}

.gv-card.tone-silver .gv-card-cta:hover {
  background: linear-gradient(135deg,
    #6a6a6a 0%,
    #999 12%,
    #e8e8e8 28%,
    #ffffff 45%,
    #ffffff 55%,
    #e8e8e8 72%,
    #999 88%,
    #6a6a6a 100%
  );
  background-size: 220% 220%;
  color: #000;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 6px 20px rgba(0, 0, 0, 0.4);
  animation-play-state: paused;
}

/* GOLD — Gun Legacy */
.gv-card.tone-gold {
  border-color: rgba(212, 160, 23, 0.4);
  background:
    linear-gradient(180deg, #1a1410 0%, var(--gvum-bg) 100%),
    radial-gradient(circle at 50% 0%, rgba(212, 160, 23, 0.12), transparent 60%);
}

.gv-card.tone-gold::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1.5px;
  background: var(--gvum-gold-grad);
  background-size: 200% 200%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.85;
  animation: gvumShimmer 14s linear infinite;
}

.gv-card.tone-gold:hover { box-shadow: 0 14px 38px rgba(212, 160, 23, 0.22); }

.gv-card.tone-gold .gv-card-name,
.gv-card.tone-gold .gv-card-price-amount,
.gv-card.tone-gold .gv-card-price-currency {
  background: var(--gvum-gold-grad);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gvumShimmerText 12s linear infinite;
}

.gv-card.tone-gold .gv-card-cta {
  background: linear-gradient(135deg,
    #5a3a08 0%,
    #8B6914 12%,
    #C8962A 28%,
    #FFD060 42%,
    #FFE8A0 50%,
    #FFD060 58%,
    #C8962A 72%,
    #8B6914 88%,
    #5a3a08 100%
  );
  background-size: 220% 220%;
  color: #1a1410;
  border: none;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 232, 160, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 160, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 4px 14px rgba(0, 0, 0, 0.35);
  animation: gvumShineGold 10s linear infinite;
}

.gv-card.tone-gold .gv-card-cta:hover {
  background: linear-gradient(135deg,
    #b07a00 0%,
    #FFD060 25%,
    #FFE08A 50%,
    #FFD060 75%,
    #b07a00 100%
  );
  background-size: 200% 200%;
  color: #000;
  transform: translateY(-1px);
  animation-play-state: paused;
}

/* MAX — Gun Trust (really-gold, brighter & more saturated) */
.gv-card.tone-max {
  border-color: rgba(255, 208, 96, 0.5);
  background:
    linear-gradient(180deg, #1a1308 0%, #110d05 100%),
    radial-gradient(circle at 50% 0%, rgba(255, 208, 96, 0.15), transparent 60%);
}

.gv-card.tone-max::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 2px;
  background: var(--gvum-max-grad);
  background-size: 200% 200%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 1;
  animation: gvumShimmer 12s linear infinite;
}

.gv-card.tone-max:hover { box-shadow: 0 18px 50px rgba(255, 208, 96, 0.32); }

.gv-card.tone-max .gv-card-name,
.gv-card.tone-max .gv-card-price-amount,
.gv-card.tone-max .gv-card-price-currency {
  background: var(--gvum-max-grad);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gvumShimmerText 10s linear infinite;
}

.gv-card.tone-max .gv-card-cta {
  background: linear-gradient(135deg,
    #3a2a05 0%,
    #8B6914 10%,
    #C8962A 22%,
    #FFD060 38%,
    #FFEFB0 48%,
    #FFFFD8 52%,
    #FFEFB0 56%,
    #FFD060 68%,
    #C8962A 80%,
    #8B6914 92%,
    #3a2a05 100%
  );
  background-size: 240% 240%;
  color: #1a1308;
  border: none;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 248, 200, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 200, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 4px 18px rgba(0, 0, 0, 0.45);
  animation: gvumShineGold 9s linear infinite;
}

.gv-card.tone-max .gv-card-cta:hover {
  background: linear-gradient(135deg,
    #D4A017 0%,
    #FFD060 22%,
    #FFE08A 45%,
    #FFF0B0 60%,
    #FFE08A 78%,
    #D4A017 100%
  );
  background-size: 200% 200%;
  transform: translateY(-1px);
  animation-play-state: paused;
}

/* ============================================================
 * State overlays
 * ============================================================ */

/* Current plan — gold border + gold CTA, matches Legacy tone */
.gv-card.is-current { border-color: rgba(212, 160, 23, 0.55) !important; }
.gv-card.is-current::before { display: none; }
.gv-card.is-current .gv-card-cta {
  background: linear-gradient(135deg,
    #5a3a08 0%,
    #8B6914 12%,
    #C8962A 28%,
    #FFD060 42%,
    #FFE8A0 50%,
    #FFD060 58%,
    #C8962A 72%,
    #8B6914 88%,
    #5a3a08 100%
  ) !important;
  background-size: 220% 220% !important;
  color: #1a1410 !important;
  border: none !important;
  text-shadow: 0 1px 0 rgba(255, 232, 160, 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 160, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
.gv-card.is-current .gv-card-cta:hover {
  background: linear-gradient(135deg,
    #b07a00 0%,
    #FFD060 25%,
    #FFE08A 50%,
    #FFD060 75%,
    #b07a00 100%
  ) !important;
  color: #000 !important;
}

/* Coming soon — slightly muted, but keep the tone styling so
 * users can still see "this is the gold-est tier coming". */
.gv-card.is-coming-soon { opacity: 0.92; }
.gv-card.is-coming-soon .gv-card-cta {
  background: rgba(212, 151, 23, 0.18);
  color: var(--gvum-amber-lt);
  border: 1.5px solid rgba(212, 151, 23, 0.4);
}

/* Highlight (recommended) ------------------------------------ */
.gv-card.is-highlight { transform: translateY(-4px); }
.gv-card.is-highlight:hover { transform: translateY(-6px); }

/* ============================================================
 * Modal mode — wraps the cards in an overlay + dialog
 * ============================================================ */
.gvum-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
}

.gvum-modal[hidden] { display: none !important; }

.gvum-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.gvum-dialog {
  position: relative;
  z-index: 1;
  background: var(--gvum-bg);
  border: 1px solid rgba(212, 160, 23, 0.18);
  border-radius: 16px;
  width: calc(100% - 32px);
  max-width: 1320px;
  max-height: calc(100vh - 80px);
  margin: 56px 16px 24px;
  overflow-y: auto;
  padding: 32px 32px 36px;
  box-shadow: 0 32px 96px rgba(0, 0, 0, 0.7);
  color: var(--gvum-text);
}

.gvum-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: rgba(20, 20, 20, 0.95);
  border: 1px solid rgba(201, 160, 66, 0.3);
  color: rgba(255, 255, 255, 0.85);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: all 0.18s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.gvum-close:hover {
  color: #fff;
  border-color: rgba(212, 160, 23, 0.7);
  background: rgba(20, 20, 20, 1);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.5),
    0 0 0 3px rgba(212, 160, 23, 0.18),
    0 0 22px rgba(212, 160, 23, 0.32);
  transform: rotate(90deg);
}

.gvum-close:focus-visible {
  outline: none;
  border-color: rgba(212, 160, 23, 0.85);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.5),
    0 0 0 3px rgba(212, 160, 23, 0.3);
}

.gvum-header {
  text-align: center;
  margin-bottom: 28px;
  padding: 0 32px;
}

.gvum-eyebrow {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--gvum-amber-lt);
  background: rgba(212, 160, 23, 0.1);
  border: 1px solid rgba(212, 160, 23, 0.25);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.gvum-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 900;
  letter-spacing: -0.5px;
  margin: 0 0 8px;
  text-transform: uppercase;
  color: var(--gvum-text);
  line-height: 1.05;
}

.gvum-subtitle {
  font-size: 15px;
  color: var(--gvum-text-mute);
  margin: 0;
  line-height: 1.4;
}

.gvum-modal .gv-upgrade-cards {
  max-width: 1240px;
}

@media (max-width: 768px) {
  .gvum-dialog { padding: 28px 18px 32px; margin: 24px 8px 16px; }
  .gvum-header { padding: 0 8px; }
  .gvum-close { top: 10px; right: 12px; }
}

/* ============================================================
 * Animations — slow shimmer for tone gradients, slow glow for CTAs
 * ============================================================ */
@keyframes gvumShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes gvumShimmerText {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* CTA "shine" — moves the gradient across the button surface slowly
 * so the highlight band sweeps left-to-right giving a metallic feel.
 * Both silver and gold use the same keyframe; only the gradient stops
 * differ in the per-tone CTA rules above. */
@keyframes gvumShineSilver {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes gvumShineGold {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .gv-card.tone-silver::before,
  .gv-card.tone-gold::before,
  .gv-card.tone-max::before,
  .gv-card.tone-silver .gv-card-name,
  .gv-card.tone-silver .gv-card-price-amount,
  .gv-card.tone-silver .gv-card-price-currency,
  .gv-card.tone-gold .gv-card-name,
  .gv-card.tone-gold .gv-card-price-amount,
  .gv-card.tone-gold .gv-card-price-currency,
  .gv-card.tone-max .gv-card-name,
  .gv-card.tone-max .gv-card-price-amount,
  .gv-card.tone-max .gv-card-price-currency,
  .gv-card.tone-silver .gv-card-cta,
  .gv-card.tone-gold .gv-card-cta,
  .gv-card.tone-max .gv-card-cta,
  .gv-card.is-current .gv-card-cta,
  .gv-card.tone-silver .gv-card-cta::after,
  .gv-card.tone-gold .gv-card-cta::after,
  .gv-card.tone-max .gv-card-cta::after,
  .gv-card.is-current .gv-card-cta::after {
    animation: none !important;
  }
}