/**
 * Gold CTA buttons — LLV marketing site: readable, compact tap targets (hero, pricing, bundles, secondary outlines).
 * Primary: min-height + padding + 1.125rem type; height auto so labels never clip.
 * Load after menu.css. menu.css must not strip gradients from these selectors (nav/mobile stay flat only).
 */

:root {
  /* Marketing CTA size — compact but meets ~44px minimum touch target */
  --llv-button-min-height: 44px;
  --llv-button-padding: 12px 28px;
  --llv-button-border-radius: 10px;
  --llv-button-font-size: 1.125rem;
  --llv-button-font-weight: 600;
  --llv-button-line-height: 1.25;
  /* Secondary outline CTAs — same tap target scale as other marketing buttons */
  --llv-outline-secondary-min-height: 44px;
  --llv-outline-secondary-padding: 12px 28px;
  --llv-outline-secondary-border-radius: 10px;
  --llv-outline-secondary-font-size: 1.125rem;
  --llv-outline-secondary-gap: 10px;
  /* Gold CTA appearance — #C6B08A / #B79F74 (same as app) */
  --llv-cta-gold-bg: #C6B08A;
  --llv-cta-gold-bg-gradient: linear-gradient(180deg, #C6B08A 0%, #B79F74 100%);
  --llv-cta-gold-text: #1A1A1A;
  --llv-cta-gold-border: 1px solid rgba(0, 0, 0, 0.18);
  --llv-cta-gold-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  --llv-cta-gold-inner: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --llv-cta-gold-inner-active: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --llv-cta-gold-focus: 0 0 0 2px rgba(198, 176, 138, 0.5);
}

/* Gold primary CTAs — app-style gradient, shadow, hover lift. Nav CTAs styled only by menu.css (flat, solid). */
.hero-buttons .btn-primary,
.hero-buttons a.btn-primary,
a.btn-primary,
.btn-primary,
.btn.btn-primary,
.pricing-card a.pricing-cta.primary,
a.pricing-cta.primary,
.final-cta .final-cta-btn,
a.final-cta-btn,
.cta-section .btn-primary,
.cta-section a.btn-primary,
.content-section .cta-block a,
.password-awareness-cta,
.password-product-cta,
.bundle-cta:not(.secondary),
.bundle-info-cta,
.modal-form .btn-primary,
.option-card .btn-primary,
.form-submit .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--llv-button-min-height) !important;
  height: auto !important;
  padding: var(--llv-button-padding) !important;
  border-radius: var(--llv-button-border-radius) !important;
  font-size: var(--llv-button-font-size) !important;
  font-weight: var(--llv-button-font-weight) !important;
  line-height: var(--llv-button-line-height) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  background: var(--llv-cta-gold-bg-gradient) !important;
  background-color: transparent !important;
  color: var(--llv-cta-gold-text) !important;
  border: var(--llv-cta-gold-border) !important;
  box-shadow: var(--llv-cta-gold-inner), var(--llv-cta-gold-shadow) !important;
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.hero-buttons .btn-primary:hover,
.hero-buttons a.btn-primary:hover,
a.btn-primary:hover,
.btn-primary:hover,
.btn.btn-primary:hover,
.pricing-card a.pricing-cta.primary:hover,
a.pricing-cta.primary:hover,
.final-cta .final-cta-btn:hover,
a.final-cta-btn:hover,
.cta-section .btn-primary:hover,
.cta-section a.btn-primary:hover,
.content-section .cta-block a:hover,
.password-awareness-cta:hover,
.password-product-cta:hover,
.bundle-cta:not(.secondary):hover,
.bundle-info-cta:hover,
.modal-form .btn-primary:hover,
.option-card .btn-primary:hover,
.form-submit .btn-primary:hover {
  color: var(--llv-cta-gold-text) !important;
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--llv-cta-gold-inner), var(--llv-cta-gold-shadow) !important;
}

.hero-buttons .btn-primary:active,
.hero-buttons a.btn-primary:active,
a.btn-primary:active,
.btn-primary:active,
.btn.btn-primary:active,
.pricing-card a.pricing-cta.primary:active,
a.pricing-cta.primary:active,
.final-cta .final-cta-btn:active,
a.final-cta-btn:active,
.cta-section .btn-primary:active,
.cta-section a.btn-primary:active,
.content-section .cta-block a:active,
.password-awareness-cta:active,
.password-product-cta:active,
.bundle-cta:not(.secondary):active,
.bundle-info-cta:active,
.modal-form .btn-primary:active,
.option-card .btn-primary:active,
.form-submit .btn-primary:active {
  transform: translateY(0) !important;
  filter: brightness(0.96) !important;
  box-shadow: var(--llv-cta-gold-inner-active), var(--llv-cta-gold-shadow) !important;
}

.hero-buttons .btn-primary:focus-visible,
.hero-buttons a.btn-primary:focus-visible,
a.btn-primary:focus-visible,
.btn-primary:focus-visible,
.btn.btn-primary:focus-visible,
.pricing-card a.pricing-cta.primary:focus-visible,
a.pricing-cta.primary:focus-visible,
.final-cta .final-cta-btn:focus-visible,
a.final-cta-btn:focus-visible,
.cta-section .btn-primary:focus-visible,
.cta-section a.btn-primary:focus-visible,
.content-section .cta-block a:focus-visible,
.password-awareness-cta:focus-visible,
.password-product-cta:focus-visible,
.bundle-cta:not(.secondary):focus-visible,
.bundle-info-cta:focus-visible,
.modal-form .btn-primary:focus-visible,
.option-card .btn-primary:focus-visible,
.form-submit .btn-primary:focus-visible {
  outline: none !important;
  box-shadow: var(--llv-cta-gold-inner), var(--llv-cta-gold-shadow), var(--llv-cta-gold-focus) !important;
}

/* bundle.html: primary link is full-width inside card; footer CTA stays content-sized */
.bundle-card .bundle-cta:not(.secondary) {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.footer-cta .bundle-cta:not(.secondary) {
  width: auto !important;
  max-width: min(100%, 32rem) !important;
}

/* Pricing tier cards: gold CTAs content-sized, centered in .pricing-cta-wrap (not full-width bars) */
.pricing-card .pricing-cta-wrap {
  align-items: center !important;
}
.pricing-card .pricing-cta-wrap a.pricing-cta.primary,
.pricing-card .pricing-cta-wrap .pricing-cta.primary {
  width: auto !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}

/* Final / lead CTA — content-sized button, not a full-width strip */
.final-cta .final-cta-btn,
.final-cta a.final-cta-btn,
.final-cta a.btn-primary.final-cta-btn {
  width: auto !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}

/* Hero primary — never stretch to row width (wins over page inline mobile rules) */
section.hero .hero-buttons a.btn-primary,
section.hero .hero-buttons .btn-primary {
  width: auto !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}

/* Outlined / secondary CTAs — same min size and type scale as primary for parity */
.hero-buttons .btn-secondary,
.hero-buttons a.btn-secondary,
a.btn-secondary,
.btn-secondary,
.btn.btn-secondary,
.bundle-cta.secondary,
.option-card .btn-secondary,
.questions-cta .btn-secondary,
.cta-section .btn-secondary,
.pricing-card .btn-secondary,
.pricing-section-cta .btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--llv-button-min-height) !important;
  height: auto !important;
  padding: var(--llv-button-padding) !important;
  border-radius: var(--llv-button-border-radius) !important;
  font-size: var(--llv-button-font-size) !important;
  font-weight: var(--llv-button-font-weight) !important;
  line-height: var(--llv-button-line-height) !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* Outlined post-purchase row — larger tap target (1.6×); not bundled with .btn-secondary */
.btn-outline-secondary-cta,
.pricing-post-purchase-actions .btn-outline-secondary-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--llv-outline-secondary-gap) !important;
  min-height: var(--llv-outline-secondary-min-height) !important;
  height: auto !important;
  padding: var(--llv-outline-secondary-padding) !important;
  border-radius: var(--llv-outline-secondary-border-radius) !important;
  font-size: var(--llv-outline-secondary-font-size) !important;
  font-weight: var(--llv-button-font-weight) !important;
  line-height: var(--llv-button-line-height) !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* Post-purchase row: centered, content-sized — never stretch to full container width */
.pricing-post-purchase-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 24px !important;
}
.pricing-post-purchase-row .btn-outline-secondary-cta {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
 * Prose / inline text links — approved brand gold only (#C6B08A / #B79F74 hover).
 * Matches app --color-link. Browsers default to blue + purple visited without this.
 * Nav (.nav-links), footer (.footer-links), and CTA rules above win where they apply
 * (higher specificity and/or !important on button-style anchors).
 * -------------------------------------------------------------------------- */
.content-section a[href],
.article-container a[href],
.legal-content a[href] {
  color: var(--gold, #C6B08A);
  text-decoration: none;
}

.content-section a[href]:visited,
.article-container a[href]:visited,
.legal-content a[href]:visited {
  color: var(--gold, #C6B08A);
}

.content-section a[href]:hover,
.content-section a[href]:focus-visible,
.article-container a[href]:hover,
.article-container a[href]:focus-visible,
.legal-content a[href]:hover,
.legal-content a[href]:focus-visible {
  color: var(--gold-light, #B79F74);
}

.pricing-terms a[href],
.receives-guide-actions a[href],
.faq-answer-content a[href] {
  color: var(--gold, #C6B08A);
  text-decoration: none;
}

.pricing-terms a[href]:visited,
.receives-guide-actions a[href]:visited,
.faq-answer-content a[href]:visited {
  color: var(--gold, #C6B08A);
}

.pricing-terms a[href]:hover,
.pricing-terms a[href]:focus-visible,
.receives-guide-actions a[href]:hover,
.receives-guide-actions a[href]:focus-visible,
.faq-answer-content a[href]:hover,
.faq-answer-content a[href]:focus-visible {
  color: var(--gold-light, #B79F74);
}
