/* Pricing Page Styles - v3 Design System */

/* Nav styling for pricing page - dark gradient at top, dark when scrolled */
.nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nav:not(.scrolled) {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.nav.scrolled.dark-bg {
  background: rgba(5, 9, 19, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.nav.scrolled.light-bg {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Nav links are white by default (for dark background) */
.nav-link {
  color: #ffffff;
}

/* Nav links are dark on light background */
.nav.scrolled.light-bg .nav-link {
  color: #030712;
}

.nav.scrolled.light-bg .nav-link:hover {
  color: #030712;
  opacity: 0.7;
}

.nav.scrolled.light-bg .nav-link-dropdown {
  color: #030712;
}

.nav.scrolled.light-bg .dropdown-arrow {
  stroke: #030712;
}

.nav.scrolled.light-bg .user-icon {
  stroke: #030712;
}

.nav.scrolled.light-bg .mobile-menu-toggle .menu-icon {
  color: #030712;
}

/* homepage.css hides desktop .nav-items until .nav.scrolled; pricing.js only adds .scrolled after 50px — show bar at load */
@media (min-width: 768px) {
  body.pricing-page .nav:not(.scrolled) .nav-items {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Light hero: transparent nav at top (no white scrim / glow above content) */
body.tribute-packages-compared-page .nav:not(.scrolled) {
  background: transparent;
}

body.tribute-packages-compared-page .nav:not(.scrolled) .nav-link,
body.tribute-packages-compared-page .nav:not(.scrolled) .nav-link-dropdown {
  color: #030712;
}

body.tribute-packages-compared-page .nav:not(.scrolled) .nav-link:hover {
  color: #030712;
  opacity: 0.7;
}

body.tribute-packages-compared-page .nav:not(.scrolled) .dropdown-arrow {
  stroke: #030712;
}

body.tribute-packages-compared-page .nav:not(.scrolled) .user-icon {
  stroke: #030712;
}

body.tribute-packages-compared-page .nav:not(.scrolled) .mobile-menu-toggle .menu-icon {
  color: #030712;
}

.nav-button {
  background: linear-gradient(135deg, #b51d1d 0%, #c42723 100%);
  color: #ffffff;
  text-decoration: none;
}

/* Pricing Hero Section */
.pricing-hero {
  min-height: 100vh;
  padding: calc(5.5rem + 2rem) 1.5rem 2rem;
  text-align: center;
  background: #030712;
  background-image:
    radial-gradient(at 20% 30%, rgba(59, 130, 246, 0.15) 0px, transparent 50%),
    radial-gradient(at 80% 70%, rgba(139, 92, 246, 0.15) 0px, transparent 50%),
    radial-gradient(at 50% 50%, rgba(16, 185, 129, 0.08) 0px, transparent 50%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}

.pricing-hero-content {
  box-sizing: border-box;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  align-self: center;
}

.pricing-hero-title {
  font-family: 'Fraunces', serif;
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 auto 0.75rem;
  /* homepage.css sets global h1 { max-width: 600px } at 768px+; undo for pricing heroes */
  max-width: none;
  width: 100%;
  color: #ffffff;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

.pricing-hero-subtitle {
  font-size: 1rem;
  line-height: 1.5;
  color: #d1d5db;
}

/* Pricing Plans Section */
.pricing-plans {
  position: relative;
  padding: 2rem 0 3rem;
  background: transparent;
  margin-top: -5%;
  z-index: 10;
}

.pricing-container {
  max-width: 1200px;
  margin: 0 auto;
}

.pricing-plans-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* Pricing cards container - use flexbox for better control */
.pricing-plans .pricing-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.pricing-column {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Pricing Cards */
.pricing-card {
  background: #ffffff;
  border: none;
  border-radius: 1rem;
  padding: 1.75rem 1.25rem;
  position: relative;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
  text-align: left;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pricing-card-featured {
  transform: none;
  z-index: 5;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
}

.pricing-card-best-value {
  border: none;
  background: #ffffff;
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 2rem;
  transform: none;
  background: #F2737B;
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.pricing-badge-best {
  background: #FFD867;
  color: #000000;
  left: 50%;
  transform: translateX(-50%);
}

.pricing-card-header {
  margin-bottom: 0.5rem;
}

.pricing-card-title {
  font-family: 'Roboto Flex', sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: #1A1A1A;
  margin-bottom: 0;
  line-height: 1.3;
  text-align: left;
}

.pricing-card-subtitle {
  font-size: 1rem;
  color: #888888;
  margin: 0;
}

.pricing-card-price {
  margin-bottom: 0.75rem;
  padding-bottom: 0;
  border-bottom: none;
  position: relative;
}

.pricing-price-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.pricing-price-left {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.pricing-amount {
  font-size: 2.5rem;
  font-weight: 500;
  color: #1A1A1A;
  display: inline-block;
  line-height: 1.2;
}

.pricing-strikethrough {
  font-size: 1rem;
  color: #888888;
  text-decoration: line-through;
  margin-left: 0.5rem;
  display: inline-block;
  padding-bottom: 0.125rem;
}

.pricing-period {
  font-size: 1rem;
  color: #888888;
  padding-bottom: 0.125rem;
}

.pricing-original {
  display: block;
  font-size: 0.875rem;
  color: #888888;
  text-decoration: line-through;
  margin-top: 0.25rem;
}

.pricing-save-badge {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: #000000;
  color: #ffffff;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.pricing-save-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.pricing-card-image {
  margin-bottom: 1rem;
  width: 100%;
}

.pricing-card-image img,
.pricing-card-image video {
  width: 35%;
  height: auto;
  border-radius: 0.25rem;
  object-fit: contain;
}

/* Video book composite for pricing page */
/* The frame is narrower than the card and centered, so the picture does not make the
   featured card much taller than its neighbors. The video inside is placed in shares of
   the frame, so it follows. */
.pricing-card-image .video-book-frame {
  position: relative;
  width: 78%;
  height: auto;
  margin: 0 auto;
}

.pricing-card-image .video-book-frame .hero-image {
  width: 90%;
  height: auto;
}

/* Pricing-specific GIF positioning - adjust these values as needed */
.pricing-video-book-gif {
  top: 9%;
  left: 49%;
  width: 34%;
}

.pricing-card-description {
  margin-bottom: 0.75rem;
  color: #1A1A1A;
  line-height: 1.6;
  font-size: 0.9375rem;
}

.pricing-card-features {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pricing-features-title {
  font-weight: 600;
  color: #1A1A1A;
  font-size: 1rem;
}

.pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: #1A1A1A;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.pricing-feature svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: #1A1A1A;
  width: 20px;
  height: 20px;
}

.pricing-feature-text {
  flex: 1;
}

.pricing-feature-highlight {
  color: #7B3BEE;
  font-weight: 600;
}

.concierge-highlight {
  border-radius: 8px;
  padding: 1rem;
  margin: 0.5rem 0;
  background: linear-gradient(135deg, rgba(157, 193, 245, 0.15), rgba(207, 178, 201, 0.15));
  position: relative;
}

.concierge-highlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  padding: 2px;
  background: linear-gradient(135deg, #9DC1F5, #CFB2C9);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.concierge-highlight .pricing-feature {
  margin-bottom: 0.75rem;
}

.concierge-highlight .pricing-feature:last-child {
  margin-bottom: 0;
}

/* Pay-as-you-go section */
.pricing-card-pay-as-you-go {
  border-radius: 0.5rem;
  padding: 0.25rem 0;
  margin-top: -0.75rem;
  margin-bottom: 1.5rem;
}

.pricing-card-pay-as-you-go .pricing-features-title {
  line-height: 1.3875;
}

.pay-as-you-go-header {
  margin-bottom: 1rem;
}

.pay-as-you-go-header h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 0.5rem;
}

.pay-as-you-go-header p {
  font-size: 0.875rem;
  color: #888888;
  margin: 0;
}

.pay-as-you-go-table {
  display: flex;
  flex-direction: column;
}

.pay-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3125rem 0;
}

.pay-duration {
  color: #1A1A1A;
  font-size: 0.9375rem;
}

.pay-price {
  color: #1A1A1A;
  font-weight: 500;
}

/* Pricing Card Buttons */
.pricing-card-button {
  display: block;
  width: 100%;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--color-primary, #b51d1d) 0%, var(--color-primary-light, #c42723) 100%);
  color: var(--color-white, #ffffff);
  text-align: center;
  text-decoration: none;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  border: none;
  box-shadow: 0 4px 15px rgba(181, 29, 29, 0.3);
  will-change: transform, box-shadow;
  cursor: pointer;
  margin-top: auto;
}

.pricing-card-button:hover {
  background: #c42723;
  transform: translateY(-2px);
}

.pricing-card-button-primary {
  background: linear-gradient(135deg, var(--color-primary, #b51d1d) 0%, var(--color-primary-light, #c42723) 100%);
  box-shadow: 0 4px 15px rgba(181, 29, 29, 0.3);
  will-change: transform, box-shadow;
}

.pricing-card-button-primary:hover {
  background: linear-gradient(135deg, var(--color-primary-hover, #9c1717) 0%, var(--color-primary, #b51d1d) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(181, 29, 29, 0.4);
}

/* ── Highlight Reel add-on band ──────────────────────────────────────────── */
/* Secondary product below the 3 tiers — deliberately lighter weight: a single
   translucent glass band on the dark hero, not a fourth pricing card. */
.pricing-addon {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.pricing-addon-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-align: left;
}

.pricing-addon-main {
  min-width: 0;
}

.pricing-addon-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background: #FFD867;
  color: #000000;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pricing-addon-title {
  font-family: 'Roboto Flex', sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.3;
  margin: 0.75rem 0 0.5rem;
}

.pricing-addon-desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #cbd5e1;
  margin: 0 0 0.75rem;
  max-width: 48rem;
}

.pricing-addon-note {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #a5aec0;
  margin: 0 0 1rem;
  max-width: 48rem;
}

.pricing-addon-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pricing-addon-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8125rem;
  color: #e2e8f0;
  white-space: nowrap;
}

/* Inset pricing panel — the duration → price table lives here */
.pricing-addon-aside {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  padding: 1.25rem;
  border-radius: 0.75rem;
  background: rgba(3, 7, 18, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.pricing-addon-price {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  color: #ffffff;
}

.pricing-addon-price-amount {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
}

.pricing-addon-price-note {
  font-size: 0.8125rem;
  color: #94a3b8;
  margin: 0 0 0.5rem;
}

.pricing-addon-table {
  display: flex;
  flex-direction: column;
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pricing-addon-table-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pricing-addon-table-row:last-child {
  border-bottom: none;
}

.pricing-addon-table-dur {
  color: #cbd5e1;
}

.pricing-addon-table-price {
  color: #ffffff;
  font-weight: 600;
}

@media (min-width: 768px) {
  .pricing-addon {
    /* Match the three-column pricing container, including its outer gutters. */
    width: calc(100% - 6rem);
  }

  .pricing-addon-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    padding: 2rem 2.25rem;
  }

  .pricing-addon-main {
    flex: 1 1 auto;
  }

  .pricing-addon-aside {
    flex: 0 0 auto;
    width: 20rem;
  }
}

/* Trust Section */
.pricing-trust {
  padding: 3rem 0;
  background: #ffffff;
  overflow: hidden;
}

.pricing-trust-logos {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 3rem;
  flex-wrap: nowrap;
  animation: scroll-logos 20s linear infinite;
}

@keyframes scroll-logos {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.pricing-trust-logos img {
  height: 28px;
  width: auto;
  opacity: 0.6;
  filter: grayscale(100%);
  flex-shrink: 0;
}

/* Make Mashable, Forbes, and TechCrunch smaller */
.pricing-trust-logos img:nth-child(2),
.pricing-trust-logos img:nth-child(3),
.pricing-trust-logos img:nth-child(4) {
  height: 22px;
}

/* FAQ Section */

/* Why Choose Cards - part of the 3 column layout */
.pricing-why-choose-card {
  background: transparent;
  border-radius: 0 0 0.5rem 0.5rem;
  padding: 2rem;
  box-shadow: none;
  margin-top: 0;
}

.pricing-why-choose-title {
  font-family: 'Roboto Flex', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1rem;
}

.pricing-why-choose-text {
  font-family: 'Roboto Flex', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #ffffff;
  margin: 0;
}

/* Desktop Styles */
@media (min-width: 768px) {
  .pricing-hero {
    padding-top: calc(5.5rem + 100px);
    padding-left: 3rem;
    padding-right: 3rem;
    padding-bottom: 4rem;
  }

  .pricing-hero {
    padding-bottom: 4rem;
  }

  /* Wider than default 600px so hero subtitle can wrap to ~2 lines at 1.5rem */
  .pricing-hero-content {
    max-width: 56rem;
  }

  .pricing-plans {
    margin-top: -4%;
    padding: 4rem 3rem;
  }

  .pricing-hero-title {
    font-size: 4rem;
    line-height: 1.2;
    margin: 0 auto 1.5rem;
    max-width: none;
  }

  .pricing-hero-subtitle {
    font-size: 1.5rem;
    line-height: 1.6;
  }

  .pricing-card {
    padding: 2.5rem 2rem;
  }

  .pricing-card-featured {
    transform: scale(1.05);
    box-shadow: 0px 40px 80px rgba(0, 0, 0, 0.75);
  }

  .pricing-plans-grid {
    gap: 2rem;
    margin-top: 3rem;
  }

  .pricing-plans .pricing-container {
    gap: 2rem;
    margin-top: 3rem;
  }

  .pricing-plans {
    margin-right: auto;
    margin-left: auto;
    padding: 6rem 3rem;
  }

  .pricing-plans .pricing-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .pricing-column {
    display: flex;
    flex-direction: column;
  }
  
  .pricing-card {
    display: flex;
    flex-direction: column;
    padding: 2rem;
  }
  
  .pricing-card-featured {
    transform: scale(1.08);
  }

  .pricing-trust {
    padding: 4rem 3rem;
    overflow: visible;
  }

  .pricing-trust-logos {
    gap: 4rem;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    animation: none;
  }

  .pricing-trust-logos img {
    height: 32px;
  }

  /* Make Mashable, Forbes, and TechCrunch smaller on desktop too */
  .pricing-trust-logos img:nth-child(2),
  .pricing-trust-logos img:nth-child(3),
  .pricing-trust-logos img:nth-child(4) {
    height: 25px;
  }
}

/* ── Tribute packages compared (/tribute-packages-compared/) ─────────────── */

/* Full-page radial (fixed) so it continues behind transparent sections — no gray band */
body.tribute-packages-compared-page {
  background-color: #ffffff;
  background-image: radial-gradient(125% 125% at 50% 90%, #ffffff 40%, #86b4fc 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media (prefers-reduced-motion: reduce) {
  body.tribute-packages-compared-page {
    background-attachment: scroll;
  }
}

/* Hero: height follows copy (no min 100dvh — that left a tall empty band above the table). */
.tribute-packages-compared-page .packages-compared-hero.pricing-hero {
  min-height: auto;
  padding-top: calc(5.5rem + 1.75rem + 2.25rem);
  padding-bottom: clamp(1.25rem, 4vw, 2rem);
  align-items: center;
  justify-content: flex-start;
  background: transparent;
}

@media (max-width: 767px) {
  .tribute-packages-compared-page .packages-compared-hero.pricing-hero {
    padding-top: calc(4.5rem + 0.875rem);
    padding-bottom: clamp(0.875rem, 3vw, 1.25rem);
  }

  .tribute-packages-compared-page .packages-compared-hero-pill {
    font-size: 0.8125rem;
    padding: calc(0.375rem + 2px) 1rem 0.375rem;
    margin-bottom: 0.75rem;
  }
}

/* Eyebrow pill — top of hero stack */
.tribute-packages-compared-page .packages-compared-hero-pill {
  margin: 0 auto 0.875rem;
  padding: calc(0.5rem + 2px) 1.25rem 0.5rem;
  width: fit-content;
  max-width: min(100%, 32rem);
  font-family: 'Roboto Flex', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: #030712;
  text-align: center;
  background: #fefdfb;
  border-radius: 624.9375rem;
  box-shadow:
    0 1px 2px rgba(3, 7, 18, 0.05),
    0 6px 16px -4px rgba(3, 7, 18, 0.12);
}

@media (min-width: 768px) {
  .tribute-packages-compared-page .packages-compared-hero-pill {
    font-size: 1.0625rem;
    padding: calc(0.5625rem + 2px) 1.375rem 0.5625rem;
    margin-bottom: 1.5rem;
  }
}

/* Solid headline — no gradient clip (pricing hero defaults use gradient text) */
.tribute-packages-compared-page .packages-compared-hero .pricing-hero-title {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-top: 0.375rem;
  margin-bottom: 1rem;
  color: #030712;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #030712;
}

.tribute-packages-compared-page .packages-compared-hero .pricing-hero-title .packages-compared-hero-title-line {
  display: block;
}

.tribute-packages-compared-page .packages-compared-hero .pricing-hero-title strong.packages-compared-hero-title-line {
  font-weight: 600;
}

/* Long H1: base pricing hero uses max-width 600px until 768px — too narrow for this headline */
.tribute-packages-compared-page .packages-compared-hero .pricing-hero-content {
  max-width: min(56rem, 100%);
}

@media (min-width: 768px) {
  .tribute-packages-compared-page .packages-compared-hero.pricing-hero {
    padding-top: calc(5.5rem + 2.5rem + 2.25rem);
    padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
  }
}

.tribute-packages-compared-page .packages-compared-intro {
  margin: 1.25rem auto 0;
  padding-bottom: clamp(0.5rem, 2vw, 1rem);
  max-width: 44rem;
  font-family: 'Roboto Flex', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #4b5563;
  text-align: left;
}

@media (min-width: 768px) {
  .tribute-packages-compared-page .packages-compared-intro {
    font-size: 1.125rem;
    text-align: center;
  }
}

/* Table band — small overlap; extra hero padding carries intro→chart breathing room */
.tribute-packages-compared-page .packages-compared-table-section {
  position: relative;
  z-index: 5;
  margin-top: -0.5rem;
  padding: clamp(0.5rem, 1.5vw, 0.75rem) 1rem clamp(1rem, 2.5vw, 1.75rem);
  background: transparent;
}

@media (min-width: 768px) {
  .tribute-packages-compared-page .packages-compared-table-section {
    margin-top: -0.75rem;
    padding-left: clamp(1rem, 3vw, 2rem);
    padding-right: clamp(1rem, 3vw, 2rem);
  }
}

.tribute-packages-compared-page .packages-compared-table-shell {
  max-width: 72rem;
  margin: clamp(0.25rem, 1vw, 0.625rem) auto 0;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: 1.25rem;
  background-color: #030712;
  background-image:
    radial-gradient(at 18% 12%, rgba(59, 130, 246, 0.28) 0px, transparent 52%),
    radial-gradient(at 88% 78%, rgba(139, 92, 246, 0.22) 0px, transparent 48%),
    radial-gradient(at 52% 48%, rgba(16, 185, 129, 0.1) 0px, transparent 50%),
    radial-gradient(at 72% 22%, rgba(59, 130, 246, 0.12) 0px, transparent 45%);
  box-shadow:
    0 4px 28px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(148, 163, 184, 0.12) inset;
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.tribute-packages-compared-page .packages-compared-table-intro {
  text-align: center;
  max-width: 36rem;
  margin: 0 auto 1rem;
  padding: 0 0.25rem;
}

@media (min-width: 768px) {
  .tribute-packages-compared-page .packages-compared-table-intro {
    margin-bottom: 1.25rem;
  }
}

.tribute-packages-compared-page .packages-compared-table-intro-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 0.625rem;
  color: #f8fafc;
  letter-spacing: -0.02em;
}

.tribute-packages-compared-page .packages-compared-table-intro-sub {
  font-family: 'Roboto Flex', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #cbd5e1;
  margin: 0;
}

.tribute-packages-compared-page .packages-compared-table-container.pricing-container {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
}

.tribute-packages-compared-page .packages-compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0.125rem 0.125rem 0.5rem;
}

.tribute-packages-compared-page .packages-compare-table-wrapper {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
  min-width: min(100%, 38rem);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.tribute-packages-compared-page .packages-compare-table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  font-family: 'Roboto Flex', sans-serif;
  font-size: 0.875rem;
  line-height: 1.45;
}

@media (max-width: 767px) {
  .tribute-packages-compared-page .packages-compared-table-section {
    padding-left: 0;
    padding-right: 0;
  }

  .tribute-packages-compared-page .packages-compared-table-shell {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: clamp(0.25rem, 1vw, 0.625rem);
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding: clamp(1.25rem, 4vw, 1.5rem) 0 clamp(1rem, 3vw, 1.25rem);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  }

  .tribute-packages-compared-page .packages-compared-table-intro,
  .tribute-packages-compared-page .packages-compare-legend {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .tribute-packages-compared-page .packages-compare-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* Inset white table from full-bleed dark shell (~10px) */
    padding: 0 0.625rem 0.5rem;
    margin: 0;
    box-sizing: border-box;
  }

  .tribute-packages-compared-page .packages-compare-table-wrapper {
    border-radius: 0.5rem;
    overflow-x: visible;
    overflow-y: visible;
    min-width: max-content;
    border: 1px solid rgba(255, 255, 255, 0.14);
  }
}

.tribute-packages-compared-page .packages-compare-table caption {
  padding: 0;
}

.tribute-packages-compared-page .packages-compare-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tribute-packages-compared-page .packages-compare-table thead th {
  padding: 1.125rem 0.875rem 1rem;
  font-weight: 600;
  color: #0f172a;
  text-align: center;
  vertical-align: bottom;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.tribute-packages-compared-page .packages-compare-table thead th:first-child {
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #030712;
}

.tribute-packages-compared-page .packages-compare-head-spacer {
  display: block;
  height: 1.375rem;
  margin: 0 auto 0.125rem;
}

.tribute-packages-compared-page .packages-compare-head-plan {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #475569;
}

.tribute-packages-compared-page .packages-compare-col-name {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: #0f172a;
}

.tribute-packages-compared-page .packages-compare-col-badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 624.9375rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000000;
  background: #ffd867;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.tribute-packages-compared-page .packages-compare-table thead th.packages-compare-col-spotlight {
  vertical-align: middle;
  background: linear-gradient(180deg, #faf5ff 0%, #fef3c7 120%);
  border-bottom-color: #e9d5ff;
  box-shadow: inset 1px 0 0 rgba(139, 92, 246, 0.12);
}

.tribute-packages-compared-page .packages-compare-table tbody th {
  padding: 1rem 0.875rem;
  text-align: left;
  font-weight: 600;
  color: #030712;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
  max-width: 12rem;
}

.tribute-packages-compared-page .packages-compare-table tbody td {
  padding: 1rem 0.875rem;
  text-align: center;
  vertical-align: middle;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 500;
}

.tribute-packages-compared-page .packages-compare-table .packages-compare-cell-long {
  text-align: left;
  font-size: 0.8125rem;
  line-height: 1.55;
  font-weight: 500;
  color: #1f2937;
}

.tribute-packages-compared-page .packages-compare-table tbody tr:last-child th,
.tribute-packages-compared-page .packages-compare-table tbody tr:last-child td {
  border-bottom: none;
}

.tribute-packages-compared-page .packages-compare-col-spotlight {
  background: linear-gradient(
    90deg,
    rgba(139, 92, 246, 0.04) 0%,
    rgba(253, 224, 71, 0.06) 100%
  );
  box-shadow: inset 1px 0 0 rgba(139, 92, 246, 0.1);
}

.tribute-packages-compared-page .packages-compare-yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0 auto;
  padding: 0.3125rem;
  box-sizing: border-box;
  border-radius: 624.9375rem;
  line-height: 0;
  color: #047857;
  background: rgba(16, 185, 129, 0.14);
  flex-shrink: 0;
}

.tribute-packages-compared-page .packages-compare-check-icon {
  display: block;
  width: 100%;
  height: 100%;
}

.tribute-packages-compared-page .packages-compare-self {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0 auto;
  padding: 0.3125rem;
  box-sizing: border-box;
  border-radius: 624.9375rem;
  line-height: 0;
  color: #4a7ab8;
  background: rgba(134, 180, 252, 0.18);
  flex-shrink: 0;
}

.tribute-packages-compared-page .packages-compare-wrench-icon {
  display: block;
  width: 100%;
  height: 100%;
}

.tribute-packages-compared-page .packages-compare-legend {
  margin: 0 auto 1.25rem;
  padding: 0 0.25rem;
  max-width: 100%;
}

.tribute-packages-compared-page .packages-compare-legend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.625rem 1.25rem;
  font-family: 'Roboto Flex', sans-serif;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: #e2e8f0;
}

.tribute-packages-compared-page .packages-compare-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.tribute-packages-compared-page .packages-compare-legend .packages-compare-yes.packages-compare-legend-icon {
  color: #ffffff;
  background: #34d399;
}

.tribute-packages-compared-page .packages-compare-legend .packages-compare-self.packages-compare-legend-icon {
  color: #ffffff;
  background: #6a9fe8;
}

.tribute-packages-compared-page .packages-compare-legend-icon {
  margin: 0;
  width: 1.375rem;
  height: 1.375rem;
  padding: 0.25rem;
  flex-shrink: 0;
}

.tribute-packages-compared-page .packages-compare-legend-dash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  flex-shrink: 0;
  border-radius: 624.9375rem;
  background: #475569;
  color: #f8fafc;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
}

.tribute-packages-compared-page .packages-compare-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1;
}

/* Nested in `.packages-compared-table-section` so width matches `.packages-compared-table-shell` */
.tribute-packages-compared-page .packages-compared-table-section .packages-compared-closing {
  width: 100%;
  max-width: 72rem;
  margin: clamp(1rem, 2.5vw, 1.75rem) auto 0;
  padding: clamp(0.5rem, 2vw, 1rem) 0 0;
  background: transparent;
  box-sizing: border-box;
}

.tribute-packages-compared-page .packages-compared-closing-card {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  background: transparent;
  color: #030712;
  padding: clamp(0.25rem, 1.5vw, 0.75rem) 0 clamp(1rem, 2.5vw, 1.5rem);
  box-sizing: border-box;
}

.tribute-packages-compared-page .packages-compared-closing-copy {
  flex: 1 1 18rem;
  min-width: 0;
  text-align: left;
}

.tribute-packages-compared-page .packages-compared-closing h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.75rem, 4.25vw, 2.375rem);
  font-weight: 500;
  color: #030712;
  margin: 0 0 0.875rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.tribute-packages-compared-page .packages-compared-closing-body {
  font-family: 'Roboto Flex', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #374151;
  margin: 0 0 0.75rem;
}

.tribute-packages-compared-page .packages-compared-closing-body:last-of-type {
  margin-bottom: 1.25rem;
}

.tribute-packages-compared-page .packages-compared-closing-body strong {
  color: #030712;
  font-weight: 600;
}

.tribute-packages-compared-page .packages-compared-closing-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  background: var(--gradient-primary);
  color: var(--color-white);
  font-family: 'Roboto Flex', sans-serif;
  font-weight: 500;
  font-size: 1.0625rem;
  text-decoration: none;
  border: none;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
  will-change: transform, box-shadow;
}

.tribute-packages-compared-page .packages-compared-closing-cta:hover {
  background: var(--gradient-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: var(--color-white);
}

.tribute-packages-compared-page .packages-compared-closing-visual {
  flex: 1 1 16rem;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tribute-packages-compared-page .packages-compared-closing-visual img {
  width: min(100%, 28rem);
  height: auto;
  display: block;
}

@media (max-width: 767px) {
  .tribute-packages-compared-page .packages-compared-table-section .packages-compared-closing {
    padding-left: clamp(1.25rem, 5vw, 1.875rem);
    padding-right: clamp(1.25rem, 5vw, 1.875rem);
  }

  .tribute-packages-compared-page .packages-compared-closing-card {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
  }

  .tribute-packages-compared-page .packages-compared-closing-visual {
    order: -1;
    flex: 0 0 auto;
    width: 100%;
    justify-content: center;
  }

  .tribute-packages-compared-page .packages-compared-closing-visual img {
    width: min(68%, 14.5rem);
    max-width: 232px;
  }

  .tribute-packages-compared-page .packages-compared-closing-copy {
    text-align: center;
  }

  .tribute-packages-compared-page .packages-compared-closing-cta {
    align-self: center;
  }
}

@media (min-width: 768px) {
  .tribute-packages-compared-page .packages-compared-closing-visual {
    justify-content: flex-end;
  }

  .tribute-packages-compared-page .packages-compare-table {
    font-size: 0.9375rem;
  }

  .tribute-packages-compared-page .packages-compare-table thead th,
  .tribute-packages-compared-page .packages-compare-table tbody th,
  .tribute-packages-compared-page .packages-compare-table tbody td {
    padding-left: 1.125rem;
    padding-right: 1.125rem;
  }

  .tribute-packages-compared-page .packages-compare-table .packages-compare-cell-long {
    font-size: 0.875rem;
  }

  .tribute-packages-compared-page .packages-compared-table-shell {
    border-radius: 1.5rem;
    padding: clamp(2.25rem, 4vw, 3rem);
  }

  .tribute-packages-compared-page .packages-compare-table-wrapper {
    border-radius: 1.125rem;
  }
}

/* ---------- Plan comparison at the top (CRO audit, Oct 2026) ---------- */
/* A plain table in its own light section, between the dark hero and the white press logos. */
.pricing-compare-section {
  padding: clamp(3rem, 5vw, 4.5rem) 1.5rem 0; /* bottom space comes from .plan-compare-more */
  background: #eef2f7;
}
.plan-compare {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  color: #334155;
  text-align: left;
}
.plan-compare .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.plan-compare-title {
  margin: 0 0 1.25rem;
  text-align: center;
  color: #030712;
  font-family: 'Fraunces', serif;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 400;
  line-height: 1.2;
}
/* A table card: row labels in a real first column, values centered under their plan, and
   the recommended plan's column tinted like its featured card. */
.plan-compare-table {
  max-width: 960px;
  margin: 0 auto;
  border: 1px solid #dbe2ea;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 16px 40px rgba(15, 23, 42, 0.1);
  overflow: hidden;
}
.plan-compare-row {
  display: grid;
  grid-template-columns: minmax(9rem, 1.15fr) repeat(3, minmax(0, 1fr));
  border-top: 1px solid #eef2f6;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: #0f172a;
}
.plan-compare-row > * {
  padding: 1rem 1.25rem;
}
.plan-compare-head {
  border-top: 0;
  background: #f8fafc;
  font-weight: 600;
}
.plan-compare-head > * {
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  font-size: 1rem;
}
.plan-compare-label {
  color: #0f172a;
  font-weight: 500;
}
.plan-compare-cell {
  text-align: center;
  color: #334155;
}
.plan-compare-head .plan-compare-cell {
  color: #0f172a;
}
/* The recommended plan's column: dark, the page's own dark, with white text. On the white
   card it is the one column the eye goes to. */
.plan-compare-pick {
  background: #0f172a;
  color: #fff;
  font-weight: 500;
}
.plan-compare-head .plan-compare-cell.plan-compare-pick {
  color: #fff;
}
/* The rules between rows run through the dark column as faint light lines. */
.plan-compare-row .plan-compare-pick {
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1);
}
.plan-compare-head .plan-compare-pick {
  box-shadow: none;
}
.plan-compare-tag {
  display: block;
  width: fit-content;
  margin: 0 auto 0.375rem;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: #ffd867;
  color: #000000;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.plan-compare-pay {
  margin: 1.25rem 0 0;
  text-align: center;
  color: #475569;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.plan-compare-more {
  display: flex;
  justify-content: center;
  padding: 2rem 0 clamp(3rem, 5vw, 4.5rem);
}
.plan-compare-button {
  display: inline-block;
  padding: 0.875rem 1.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  background: #ffffff;
  color: #0f172a;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.plan-compare-button:hover {
  border-color: #94a3b8;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.plan-compare-button:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 3px;
}

/* Tighter plan lists (CRO audit follow-up): shorter cards, same content. */
.pricing-page .pricing-card-features,
.occasion-page .pricing-card-features {
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.pricing-page .pay-row,
.occasion-page .pay-row {
  padding: 0.375rem 0;
}

/* Concierge card: the gold service bell (as in the v3 package modals) and the editor's tasks. */
/* Top right, centered on the title-and-price block beside it. The art carries a floor shadow
   under the bell, so the box sits a little high to put the bell itself at that center. */
.pricing-card-bell {
  position: absolute;
  top: 1.25rem;
  right: 1.75rem;
  pointer-events: none;
}
.pricing-card-bell img {
  display: block;
  width: auto;
  height: 108px;
  /* the bell's shadow and sparkle sit on its right; nudge it to look centered */
  transform: translateX(4.5%);
}
.pricing-feature--group {
  align-items: flex-start;
}
.pricing-feature--group > svg {
  margin-top: 0.125rem;
}
.pricing-feature-sublist {
  margin: 0.25rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.125rem;
  color: #475569;
  font-size: 0.875rem;
  line-height: 1.4;
}
.pricing-feature-sublist li::marker {
  color: #94a3b8;
}

/* Phones: the row label sits on its own line above the three values, so all three plan
   columns keep their width at 390px. Kept last so it overrides the table rules above. */
@media (max-width: 600px) {
  .plan-compare-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    font-size: 0.875rem;
  }
  .plan-compare-row > * {
    padding: 0.625rem 0.5rem;
  }
  /* The label's line stops short of the dark column, and the row paints that column's
     share dark, so the column runs unbroken from the head to the foot of the table. */
  .plan-compare-row {
    background: linear-gradient(to right, transparent calc(200% / 3), #0f172a calc(200% / 3));
    border-top-color: transparent;
    box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.22);
  }
  .plan-compare-head {
    background:
      linear-gradient(to right, #f8fafc calc(200% / 3), #0f172a calc(200% / 3));
    box-shadow: none;
  }
  .plan-compare-row .plan-compare-pick {
    box-shadow: none;
  }
  .plan-compare-row:not(.plan-compare-head) .plan-compare-cell {
    grid-row: 2;
  }
  .plan-compare-label {
    grid-column: 1 / 3;
    grid-row: 1;
    padding-bottom: 0;
    color: #64748b;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .plan-compare-head .plan-compare-label {
    display: none;
  }
  .plan-compare-head > * {
    padding-top: 1rem;
    font-size: 0.875rem;
  }
}

/* The three reassurances, once, under the three plan cards (they stood in each card). */
.pricing-plans-reassurance {
  display: flex;
  justify-content: center;
  margin-top: 1.75rem;
  padding: 0 1.5rem;
}
.pricing-plans-reassurance .cta-reassurance {
  margin-top: 0;
}