:root {
  /* Colors */
  --color-primary: #b51d1d;
  --color-primary-hover: #9c1717;
  --color-primary-light: #c42723;
  --color-dark: #030712;
  --color-dark-secondary: #1f2937;
  --color-white: #ffffff;
  --color-gray-light: #f3f4f6;
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  --gradient-primary-hover: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%);
  /* Occasions + work-promo arch: shared gradient field (section-scoped backgrounds) */
  --occasions-work-bg-color: var(--color-dark);
  --occasions-work-bg-image:
    radial-gradient(at 30% 20%, rgba(139, 92, 246, 0.12) 0px, transparent 50%),
    radial-gradient(at 70% 60%, rgba(59, 130, 246, 0.15) 0px, transparent 50%),
    radial-gradient(at 50% 80%, rgba(251, 191, 36, 0.1) 0px, transparent 50%),
    radial-gradient(at 85% 30%, rgba(16, 185, 129, 0.08) 0px, transparent 50%),
    radial-gradient(at 15% 70%, rgba(252, 211, 77, 0.08) 0px, transparent 45%);
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(181, 29, 29, 0.3);
  --shadow-md: 0 4px 15px rgba(181, 29, 29, 0.3);
  --shadow-lg: 0 6px 20px rgba(181, 29, 29, 0.4);
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Spacing */
  --nav-height: 80px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
}

body {
  font-family: 'Roboto Flex', sans-serif;
  line-height: 1.5;
  color: var(--color-dark);
}

/* Hide the default header from base template */
body>header {
  display: none !important;
}

/* Mobile-first base styles */
.nav {
  position: fixed;
  width: 100%;
  display: flex;
  padding: 1rem 1.5rem;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  background: transparent;
  isolation: isolate;
  transform: translateY(0);
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease,
    backdrop-filter 0.3s ease;
}

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

.nav.scrolled {
  opacity: 1;
}

.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.hidden {
  transform: translateY(-100%);
  opacity: 0;
}

.nav-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.nav-logo {
  height: 1.5rem;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.nav-logo.fade-out {
  opacity: 0;
}

.nav.scrolled .nav-logo {
  height: 1.5rem;
  opacity: 1;
}

.nav-items {
  display: none;
  align-items: center;
  gap: 3rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.nav.scrolled .nav-items {
  opacity: 1;
  visibility: visible;
}

.nav-items.mobile-open {
  display: flex;
}

.nav-link {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
  display: inline-block;
}

.nav-link:hover {
  color: #ffffff;
  opacity: 0.8;
  transform: translateY(-2px);
}

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

.nav.scrolled.light-bg .nav-link:hover {
  color: #030712;
  opacity: 0.7;
  transform: translateY(-2px);
}

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

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

.nav-button {
  background: var(--gradient-primary);
  color: var(--color-white);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-base);
  display: inline-block;
  box-shadow: var(--shadow-sm);
  will-change: transform, box-shadow;
}

.nav-button:hover {
  background: var(--gradient-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(181, 29, 29, 0.4);
}

/* Navbar dropdown */
.nav-dropdown {
  position: relative;
}

.nav-link-dropdown {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dropdown-arrow {
  transition: transform 0.3s ease;
}

.nav-dropdown.active .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0;
  background: rgba(3, 7, 18, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 0.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  transform: translateX(-50%) translateY(-10px);
  z-index: 1000;
  width: auto;
  min-width: 300px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* User menu specific styling - matches v3 app */
.user-menu {
  background: rgba(25, 25, 25, 0.95); /* Darker background like v3 */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem; /* rounded-box - smaller radius */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.nav-dropdown.active .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown-content {
  display: flex;
}

.dropdown-left {
  flex: 1;
  padding: 1rem;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.user-icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}

/* User dropdown: label and arrow hidden on desktop (icon only) */
.nav-user-label,
.nav-dropdown-user .nav-user-arrow {
  display: none;
}

/* User menu dropdown - matches v3 app styling */
.user-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 208px; /* w-52 */
  min-width: 208px;
}

.user-menu .menu-title {
  padding: 1.25rem;
  margin: 0;
}

.user-menu-header {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* gap-3 */
}

.user-menu-avatar {
  width: 32px; /* w-8 */
  height: 32px; /* h-8 */
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-menu-avatar .dropdown-user-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.user-menu-details {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.user-menu-name {
  font-size: 0.875rem; /* text-sm */
  font-weight: 600; /* font-semibold */
  color: #ffffff;
  line-height: 1.25rem;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-email {
  font-size: 0.75rem; /* text-xs */
  color: #ffffff;
  opacity: 0.7; /* opacity-70 */
  line-height: 1rem;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu .menu-divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1875);
  margin: 0 0.5rem 0.5rem;
  border: none;
  padding: 0;
  list-style: none;
}

.user-menu > li {
  list-style: none;
  margin: 0;
  padding: 0 0.75rem;
}

.user-menu-item {
  display: block;
  padding: 0.5rem;
  font-size: 0.875rem; /* text-sm */
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.2s ease;
  border-radius: 0.25rem;
  width: 100%;
  box-sizing: border-box;
}

.user-menu-item:hover,
.user-menu-item:focus {
  background-color: rgba(255, 255, 255, 0.1);
  outline: none;
}

.user-menu-item-last {
  margin-bottom: 0.75rem;
}

/* Signed-in: first name sits to the right of the user icon (desktop only) */
.nav-user-name {
  font-weight: 500;
  white-space: nowrap;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Continue your tribute" card at the top of the account menu */
.user-menu.user-menu-has-continue {
  width: 264px;
  min-width: 264px;
}

.user-menu > li.user-menu-continue {
  padding: 0 0.75rem 0.5rem;
}

.user-menu-continue-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.user-menu-continue-card:hover,
.user-menu-continue-card:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  outline: none;
}

.user-menu-continue-cover {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 0.375rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-menu-continue-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-menu-continue-cover--placeholder .user-menu-continue-cover-fallback {
  width: 24px;
  height: 24px;
  background-color: #050505;
  opacity: 0.25;
  mask: url("/static/v3/images/icons/placeholder.f25935112574.svg") no-repeat center / contain;
  -webkit-mask: url("/static/v3/images/icons/placeholder.f25935112574.svg") no-repeat center / contain;
}

.user-menu-continue-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 0;
}

.user-menu-continue-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fca5a5;
  line-height: 0.875rem;
}

.user-menu-continue-title {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-continue-arrow {
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.user-menu-continue-card:hover .user-menu-continue-arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* Legacy dropdown-user styles for backwards compatibility */
.dropdown-user-info {
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dropdown-user-avatar-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.1);
}

.dropdown-user-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.dropdown-user-details {
  flex: 1;
  min-width: 0;
}

.dropdown-user-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.25rem;
}

.dropdown-user-email {
  font-size: 0.8125rem;
  color: #d1d5db;
}

.dropdown-content:has(.dropdown-left):not(:has(.dropdown-right)) .dropdown-left {
  border-right: none;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  transition: background-color 0.3s ease, transform 0.3s ease;
  text-decoration: none;
  color: #ffffff;
}

.dropdown-item:has(.dropdown-description) {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
}

.dropdown-item-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.dropdown-item:has(.dropdown-description) .dropdown-text {
  display: block;
}

.dropdown-item:has(.dropdown-description) .dropdown-description {
  display: block;
}

.dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.dropdown-item-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.3s ease;
}

/* Larger icons for Enterprise dropdown items with descriptions */
.dropdown-item:has(.dropdown-description) .dropdown-item-icon {
  width: 40px;
  height: 40px;
}

.dropdown-item-icon img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.dropdown-item-icon .icon-default {
  opacity: 1;
}

.dropdown-item-icon .icon-hover {
  opacity: 0;
}

/* Scale icon container on hover */
.dropdown-item:hover .dropdown-item-icon {
  transform: scale(1.15);
}

/* If animated version exists, swap it on hover */
.dropdown-item:hover .dropdown-item-icon .icon-default {
  opacity: 0;
}

.dropdown-item:hover .dropdown-item-icon .icon-hover {
  opacity: 1;
}

/* If no animated version exists, keep default visible */
.dropdown-item-icon.no-animated .icon-hover {
  display: none !important;
}

.dropdown-item:hover .dropdown-item-icon.no-animated .icon-default {
  opacity: 1;
}

.dropdown-icon {
  display: none;
}

.dropdown-text {
  font-size: 0.9375rem;
  color: #ffffff;
}

.dropdown-description {
  font-size: 0.8125rem;
  font-weight: 400;
  color: #d1d5db;
  line-height: 1.4;
}

.dropdown-right {
  flex: 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
}

.dropdown-right h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
}

.dropdown-right p {
  font-size: 0.875rem;
  color: #d1d5db;
  margin-bottom: 1rem;
}

.dropdown-image {
  width: 100%;
  max-width: 180px;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  overflow: hidden;
}

.dropdown-image img {
  width: 100%;
  height: auto;
  display: block;
}

#save-the-date-lottie {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

#save-the-date-lottie svg {
  width: 100%;
  height: auto;
}

.dropdown-button {
  background: #ffffff;
  color: #030712;
  padding: 0.625rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: background 0.3s ease, transform 0.3s ease;
  display: inline-block;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
  display: inline-block;
}

.dropdown-button:hover {
  background: #f3f4f6;
  transform: translateY(-2px);
}

/* Desktop dropdown styles */
@media (min-width: 768px) {
  .dropdown-text {
    font-weight: 500;
  }

  .nav-dropdown.active .dropdown-menu {
    display: block;
  }

  /* Ensure dropdown is above navbar's isolation layer */
  .nav-dropdown .dropdown-menu {
    z-index: 1001;
  }

  /* Light dropdown styles for white navbar */
  .dropdown-menu.dropdown-light {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
  }

  .dropdown-menu.dropdown-light .dropdown-text {
    color: #030712 !important;
  }

  .dropdown-menu.dropdown-light .dropdown-description {
    color: #6b7280 !important;
  }

  .dropdown-menu.dropdown-light .dropdown-item {
    color: #030712 !important;
  }

  .dropdown-menu.dropdown-light .dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
  }

  .dropdown-menu.dropdown-light .dropdown-left {
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
  }

  .dropdown-menu.dropdown-light .dropdown-right h3 {
    color: #030712 !important;
  }

  .dropdown-menu.dropdown-light .dropdown-right p {
    color: #6b7280 !important;
  }

  .dropdown-menu.dropdown-light .dropdown-button {
    background: #030712 !important;
    color: #ffffff !important;
  }

  .dropdown-menu.dropdown-light .dropdown-button:hover {
    background: #1f2937 !important;
  }

  .dropdown-menu.dropdown-light .dropdown-user-name {
    color: #030712 !important;
  }

  .dropdown-menu.dropdown-light .dropdown-user-email {
    color: #6b7280 !important;
  }

  .dropdown-menu.dropdown-light .dropdown-user-info {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  }

  .dropdown-menu.dropdown-light .dropdown-user-avatar-wrapper {
    background: rgba(0, 0, 0, 0.05) !important;
  }

  /* User/account dropdown: ensure dark text when dropdown-light (white bg) is applied */
  .dropdown-menu.dropdown-light.user-menu,
  .dropdown-menu.dropdown-light .user-menu-name,
  .dropdown-menu.dropdown-light .user-menu-email,
  .dropdown-menu.dropdown-light .user-menu-item {
    color: #030712 !important;
  }

  .dropdown-menu.dropdown-light .user-menu-email {
    opacity: 0.8 !important;
  }

  .dropdown-menu.dropdown-light .user-menu .menu-divider {
    background-color: rgba(0, 0, 0, 0.1) !important;
  }

  .dropdown-menu.dropdown-light .user-menu-item:hover,
  .dropdown-menu.dropdown-light .user-menu-item:focus {
    background-color: rgba(0, 0, 0, 0.05) !important;
  }

  .dropdown-menu.dropdown-light .user-menu-continue-card {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #030712 !important;
  }

  .dropdown-menu.dropdown-light .user-menu-continue-card:hover,
  .dropdown-menu.dropdown-light .user-menu-continue-card:focus-visible {
    background: rgba(0, 0, 0, 0.08) !important;
  }

  .dropdown-menu.dropdown-light .user-menu-continue-label {
    color: #b51d1d !important;
  }

  .dropdown-menu.dropdown-light.user-menu-has-continue,
  #user-dropdown.user-menu-has-continue {
    width: 264px;
    min-width: 264px;
  }

  /* User dropdown - matches v3 app width */
  .user-menu {
    width: 208px;
    min-width: 208px;
  }
  
  #user-dropdown {
    min-width: 208px;
  }

  /* Occasions dropdown - wider for more content */
  #occasions-dropdown {
    min-width: 600px;
  }

  /* Enterprise dropdown - narrower for less content */
  #enterprise-dropdown {
    min-width: 400px;
  }
}

/* Mobile menu overlay - only on mobile */
.mobile-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent !important;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 101;
}

.mobile-menu-toggle[aria-expanded="true"] {
  background: transparent !important;
}

.mobile-menu-toggle:focus,
.mobile-menu-toggle:focus-visible {
  outline: none;
}

.mobile-menu-toggle .menu-icon {
  width: 2rem;
  height: 2rem;
  color: #ffffff;
  fill: none;
  stroke: currentColor;
  transition: transform 0.3s ease;
}

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

.mobile-menu-toggle[aria-expanded="true"] .menu-icon {
  transform: rotate(180deg);
}

/* Mobile dropdown styles */
@media (max-width: 767px) {
  .nav-dropdown {
    position: relative;
  }

  .nav-dropdown .dropdown-menu {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    margin-top: 0;
    min-width: auto;
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
  }

  .nav-dropdown.active .dropdown-menu {
    max-height: 1000px;
    opacity: 1;
    visibility: visible;
    padding: 1rem;
    transform: none !important;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
  }

  /* User dropdown on mobile: always expanded, inlined (no "My Account" row, no expand/collapse) */
  .nav-dropdown-user .nav-link-dropdown {
    display: none;
  }

  .nav-dropdown-user .dropdown-menu,
  .nav-items.mobile-open .nav-dropdown-user .dropdown-menu {
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    padding: 0;
    background: transparent;
    border-radius: 0;
  }

  .nav-dropdown-user .user-menu {
    width: 100%;
    min-width: 0;
  }

  .nav-dropdown-user .user-menu .menu-title {
    padding: 1rem 0;
  }

  .nav-dropdown-user .user-menu-header {
    font-size: 1.125rem;
  }

  .nav-dropdown-user .user-menu-name {
    font-size: 1.125rem;
    font-weight: 500;
  }

  .nav-dropdown-user .user-menu-email {
    font-size: 1rem;
    opacity: 0.8;
  }

  .nav-dropdown-user .user-menu .menu-divider {
    margin: 0.5rem 0;
  }

  .nav-dropdown-user .user-menu > li {
    display: list-item;
    padding: 0;
  }

  .nav-dropdown-user .user-menu-item {
    display: block !important;
    padding: 1rem 0;
    font-size: 1.125rem;
    color: #ffffff;
    text-decoration: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
  }

  .nav-dropdown-user .user-menu-item:hover {
    opacity: 0.8;
  }

  .nav-dropdown-user .user-menu > li.user-menu-continue {
    padding: 0.25rem 0 0.75rem;
  }

  .nav-dropdown-user .user-menu-continue-card {
    padding: 0.75rem;
  }

  .nav.scrolled.light-bg .nav-items.mobile-open .nav-dropdown-user .user-menu-continue-card {
    color: #030712 !important;
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
  }

  .nav.scrolled.light-bg .nav-items.mobile-open .nav-dropdown-user .user-menu-continue-label {
    color: #b51d1d !important;
  }

  .nav-dropdown-user .nav-user-arrow {
    display: none;
  }

  .dropdown-content {
    flex-direction: column;
    min-height: auto;
  }

  .dropdown-left {
    border: none;
    padding: 0;
    gap: 0.125rem;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1rem;
  }

  #enterprise-dropdown .dropdown-left {
    grid-template-columns: 1fr;
  }

  .dropdown-item {
    padding: 0.5rem 0;
    border: none;
  }

  .dropdown-right {
    padding: 1rem 0 0;
    background: transparent;
    width: 100%;
  }

  .dropdown-right h3 {
    font-size: 1.125rem;
    margin-bottom: 0.375rem;
  }

  .dropdown-right p {
    font-size: 0.8125rem;
    margin-bottom: 0;
  }

  .dropdown-image {
    max-width: 150px;
    margin-bottom: 0;
  }

  .dropdown-button {
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
  }
}

/* Mobile menu overlay - only on mobile */
@media (max-width: 767px) {
  .nav-items {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: rgba(3, 7, 18, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 0 1.5rem;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 100;
    overflow: hidden;
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.3s ease 0.1s,
      visibility 0s linear 0.4s,
      padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .nav-items.mobile-open {
    height: 100vh;
    padding: 1.375rem 1.5rem 2rem;
    opacity: 1 !important;
    visibility: visible !important;
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.3s ease,
      visibility 0s linear,
      padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
  }

  .mobile-menu-header {
    display: flex;
    align-items: center;
    padding-bottom: 2rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .mobile-menu-header {
    display: flex;
    align-items: center;
    padding-bottom: 2rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .mobile-menu-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
  }

  .mobile-menu-logo {
    height: 1.5rem;
    width: auto;
    margin-top: 0.125rem;
  }

  .nav-items.mobile-open .nav-link {
    font-size: 1.125rem;
    padding: 1rem 0;
    width: 100%;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
    display: block;
  }

  .nav-items.mobile-open .nav-link-dropdown {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
  }

  /* Hide "My Account" row on mobile; name, email, and links are shown inline below */
  .nav-items.mobile-open .nav-dropdown-user .nav-link-dropdown {
    display: none !important;
  }

  /* Expand user icon to full row with "My Account" label + arrow in mobile slideout (other dropdowns only) */
  .nav-items.mobile-open .nav-user-label,
  .nav-items.mobile-open .nav-dropdown-user .nav-user-arrow {
    display: inline;
  }

  .nav-items.mobile-open .nav-dropdown-user .nav-user-arrow {
    margin-left: auto;
  }

  .nav-items.mobile-open .nav-dropdown.active .nav-link-dropdown {
    border-bottom: none;
  }

  .nav-items.mobile-open .nav-dropdown .dropdown-menu {
    padding-top: 0.5rem;
    margin-top: 0;
  }

  .nav-items.mobile-open .nav-link:hover {
    color: #ffffff;
    opacity: 0.8;
  }

  .nav-items.mobile-open .nav-button {
    width: 100%;
    text-align: center;
    margin-top: 1.5rem;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
  }

  /* Light mode styling for mobile menu when nav has light-bg */
  .nav.scrolled.light-bg .nav-items.mobile-open {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .nav.scrolled.light-bg .nav-items.mobile-open .nav-link {
    color: #030712 !important;
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
  }

  .nav.scrolled.light-bg .nav-items.mobile-open .nav-link-dropdown {
    color: #030712 !important;
  }

  .nav.scrolled.light-bg .nav-items.mobile-open .dropdown-arrow {
    stroke: #030712 !important;
  }

  .nav.scrolled.light-bg .nav-items.mobile-open .dropdown-item {
    color: #030712 !important;
  }

  .nav.scrolled.light-bg .nav-items.mobile-open .dropdown-text {
    color: #6b7280 !important;
  }

  .nav.scrolled.light-bg .nav-items.mobile-open .nav-dropdown-user .user-menu-name,
  .nav.scrolled.light-bg .nav-items.mobile-open .nav-dropdown-user .user-menu-email,
  .nav.scrolled.light-bg .nav-items.mobile-open .nav-dropdown-user .user-menu-item {
    color: #030712 !important;
  }

  .nav.scrolled.light-bg .mobile-menu-header {
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
  }

  .nav.scrolled.light-bg .nav-items.mobile-open .nav-link:hover {
    color: #030712 !important;
  }
}

/* Mobile-first hero styles */
.hero {
  position: relative;
  height: auto;
  min-height: auto;
  display: flex;
  padding: 5rem 0 1rem;
  gap: 1.5rem;
  margin: 0 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  contain: layout style;
  border-bottom: none;
  background: #030712;
  /* A faint tiled grain softens visible bands between dark gradient tones. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath opacity='.045' filter='url(%23n)' d='M0 0h128v128H0z'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 78% 90% at 22% 32%, #4474b626, transparent 85%),
    radial-gradient(ellipse 68% 82% at 64% 72%, #997b7321, transparent 90%),
    radial-gradient(ellipse 76% 88% at 90% 54%, #7363a81f, transparent 90%);
}

.hero-content {
  flex: 1;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 10;
  margin-top: 1.25rem;
}

h1 {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  font-family: 'Newsreader', serif;
  font-weight: 400;
  max-width: 100%;
  background: linear-gradient(120deg, #93c5fd 0%, #fca5a5 45%, #fde68a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.homepage-root #hero-title {
  background: none;
  color: #ffffff;
  font-weight: 300;
  -webkit-text-fill-color: currentColor;
}

.homepage-root .hero-title-gradient {
  font-weight: 500;
  background: linear-gradient(120deg, #93c5fd 0%, #fca5a5 45%, #fde68a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.homepage-root[data-emotional-copy]:not([data-emotional-copy="control"]) .hero-title-gradient {
  display: block;
  width: fit-content;
}

.homepage-root[data-emotional-copy]:not([data-emotional-copy="control"]) .gradient-text {
  background: none;
  color: var(--color-white);
  -webkit-text-fill-color: currentColor;
}

.homepage-root[data-emotional-copy]:not([data-emotional-copy="control"]) .tears-metric .stat-number {
  text-shadow: none;
}

/* Fit the two written lines to the text column, including the split tablet layout. */
.homepage-root[data-emotional-copy]:not([data-emotional-copy="control"]) .hero-content .initial-content {
  container-type: inline-size;
  --hero-line-fit: 9.4cqi;
}

.subhead {
  margin-bottom: 1.5rem;
  color: #d1d5db;
  font-size: 1rem;
  line-height: 1.5;
}

.hero-buttons {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 2rem;
  margin-bottom: 0;
  align-items: center;
}

.start-btn-wrapper {
  position: relative;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.primary-btn {
  width: 100%;
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  justify-content: center;
  text-align: center;
  line-height: 1.5;
  box-sizing: border-box;
  white-space: nowrap;
}

/* Mobile video thumbnails - simplified horizontal scroll */
.grid-container {
  display: block;
  height: auto;
  width: 100%;
  position: relative;
  z-index: 5;
}

.grid-scroll {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: visible;
  padding: 0.5rem 0;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: none; /* Disabled for smooth auto-scroll */
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: auto; /* Disable smooth scroll behavior for programmatic scrolling */
}

.grid-scroll::-webkit-scrollbar {
  display: none;
}

.grid-scroll.grabbing {
  cursor: grabbing;
}

.grid-scroll> :nth-child(2n) {
  transform: none;
}

.grid-item {
  position: relative;
  min-width: 86%;
  width: 86%;
  aspect-ratio: 16/9;
  flex-shrink: 0;
  scroll-snap-align: start;
  border-radius: 0.25rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.5);
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.grid-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1;
  pointer-events: none;
}

.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grid-item-content {
  position: absolute;
  inset: 0;
  padding: 0.5rem 0.75rem;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.grid-item-title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.grid-item-subtitle {
  font-size: 0.875rem;
  opacity: 0.75;
}

.grid-item.highlighted {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.grid-scroll>.grid-item:nth-child(2n).highlighted {
  transform: translateY(50%);
}

/* Dim sibling thumbnails only on desktop devices with real hover.
   Touch swipes can leave :hover active and must keep every video visible. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .grid-scroll:hover .grid-item:not(:hover) {
    filter: grayscale(50%);
    opacity: 0.5;
  }
}

/* Desktop styles - Tablet and up (768px+) */
@media (min-width: 768px) {
  .hero {
    flex-direction: row;
    align-items: stretch;
    padding: 7rem 3rem 4rem;
  }

  .hero-content {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .grid-container {
    flex: 1;
  }

  .nav {
    padding: 1.5rem 3rem;
    max-width: 2400px;
  }

  /* Keep the links readable over the videos, fading the frost toward the logo. */
  body.homepage-root .nav:not(.scrolled) {
    background: transparent;
  }

  body.homepage-root .nav:not(.scrolled)::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    /* A 5-degree slope drops about 8.75% of the nav width from left to right. */
    --wedge-depth: min(8.75vw, 210px);
    height: calc(var(--wedge-depth) + 4.75rem);
    pointer-events: none;
    z-index: -1;
    background: rgba(3, 7, 18, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    --nav-fade: linear-gradient(185deg,
      #000 calc(var(--wedge-depth) - 3.5rem),
      rgb(0 0 0 / 90%) calc(var(--wedge-depth) - 2rem),
      rgb(0 0 0 / 55%) var(--wedge-depth),
      rgb(0 0 0 / 14%) calc(var(--wedge-depth) + 2.5rem),
      transparent calc(var(--wedge-depth) + 4.5rem)
    );
    -webkit-mask-image: var(--nav-fade);
    mask-image: var(--nav-fade);
  }

  .nav-logo {
    height: 2.5rem;
  }

  .nav.scrolled .nav-logo {
    height: 2.25rem;
  }

  .mobile-menu-toggle {
    display: none;
  }

  .nav-items {
    display: flex !important;
    position: static !important;
    height: auto !important;
    opacity: 0;
    visibility: hidden;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    flex-direction: row !important;
    padding: 0 !important;
    gap: 3rem !important;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .nav.scrolled .nav-items {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Show desktop nav links at hero scroll 0 */
  .nav:not(.scrolled) .nav-items {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .mobile-menu-header {
    display: none !important;
  }

  /* Fit the desktop hero below the promo banner. */
  .hero {
    height: calc(100vh - var(--promo-banner-height, 0px));
    min-height: calc(100vh - var(--promo-banner-height, 0px));
    padding: calc(5.5rem + 3rem) 3rem 0 3rem; /* Top padding: nav height (5.5rem) + content padding (3rem), no bottom padding */
    gap: 6rem;
    max-width: 2400px;
    margin: 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .hero-content {
    flex: 1;
    padding: 3rem 0;
    width: auto;
    max-width: 50%;
    margin-top: -96px;
  }

  .grid-container {
    margin-right: calc(-3rem - ((100vw - 2400px) / 2));
  }

  @media (max-width: 2400px) {
    .grid-container {
      margin-right: -3rem;
    }
  }

  h1 {
    font-size: 4.25rem;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    max-width: 600px;
  }

  .subhead {
    font-size: 1.3875rem;
    margin-bottom: 3rem;
    line-height: 1.5;
  }

  .hero-buttons {
    flex-direction: row;
    width: auto;
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .primary-btn {
    width: auto;
    padding: 1rem 2rem;
    font-size: 1.25rem;
  }

  .start-btn-wrapper {
    position: relative;
    width: auto;
  }

  /* Desktop video grid */
  .grid-container {
    flex: 1;
    height: 100vh;
    overflow: hidden;
    position: relative;
    margin-right: -3rem;
    margin-top: calc(-1 * (5.5rem + 3rem));
    padding-top: 0;
    padding-right: 0;
  }

  .grid-scroll {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    transform: translateY(0);
    padding: 0 1rem 0 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .grid-scroll> :nth-child(2n) {
    transform: translateY(50%);
  }

  .grid-item {
    min-width: 500px;
    width: auto;
    aspect-ratio: 4/3;
    flex-shrink: 1;
    scroll-snap-align: none;
    border-radius: 0.5rem;
  }

  .grid-item-content {
    padding: 1.5rem 2rem;
  }

  .grid-item-title {
    font-size: 1.5rem;
    margin-bottom: 0;
  }

  .grid-item-subtitle {
    font-size: 1rem;
  }

  .play-overlay {
    width: 4rem;
    height: 4rem;
  }

  .play-overlay svg {
    width: 2rem;
    height: 2rem;
  }

  /* Desktop page margins */
  .reviews-section,
  .how-it-works,
  .tears-section,
  .logo-section-wrapper,
  .keepsakes-section,
  .faq-section,
  .occasions-section {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .reviews-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .how-it-works {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .tears-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .logo-section-wrapper {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .keepsakes-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .faq-section {
    padding-block: 6rem;
  }
}

/* Tablet overrides (768px–1079px) — fix nav overflow and carousel dot overlap */
@media (min-width: 768px) and (max-width: 1079px) {
  .nav-items {
    gap: 1.5rem !important;
  }

  .nav {
    padding: 1.5rem 1.5rem;
  }

  .nav-button {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }

  .hero {
    padding-bottom: 5rem;
  }
}

.primary-btn {
  outline-color: var(--color-primary, #b51d1d);
  background: var(--gradient-primary);
  color: var(--color-white);
  border: none;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  will-change: transform, box-shadow;
}

/* Keyboard focus ring in the button's own red. Mouse users see nothing change. */
.primary-btn:focus-visible {
  outline: 2px solid var(--color-primary, #b51d1d);
  outline-offset: 2px;
  box-shadow: var(--shadow-md), 0 0 0 6px rgba(181, 29, 29, 0.18);
}

.primary-btn:hover {
  background: var(--gradient-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.play-icon {
  font-size: 0.8rem;
}

.thumbnail-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, transform 0.3s ease;
  z-index: 10;
}

.play-overlay:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translate(-50%, -50%) scale(1.05);
}

.vimeo-player {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

.vimeo-player iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Video Modal Overlay */
.video-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Desktop: Overlay with blur only on right side (for hero grid videos) */
@media (min-width: 768px) {
  .video-modal-overlay:not(.tears-video-modal) {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .video-modal-overlay:not(.tears-video-modal)::before {
    content: '';
    position: absolute;
    top: var(--hero-top, 0);
    right: 0;
    width: 60%;
    height: var(--hero-height, 100vh);
    /* Darker overlay without backdrop-filter to avoid banding */
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
    /* Add gradient mask for smooth transition */
    mask-image: linear-gradient(to right, transparent 0%, black 20%, black 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 100%);
  }
}

/* Blur the grid container directly when video is playing */
.grid-container.video-playing-blur {
  filter: blur(12px);
  -webkit-filter: blur(12px);
  transition: filter 0.3s ease;
}

/* Tears of joy modal: Full-page blur with darker overlay */
.video-modal-overlay.tears-video-modal {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.video-modal-overlay.tears-video-modal::before {
  display: none;
}

.video-modal-overlay.active {
  visibility: visible;
  pointer-events: all;
}

body.video-modal-open {
  overflow: hidden !important;
}

/* Support widget: hidden until scroll past 400px (when nav appears) */
#support-widget {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

body.support-widget-visible #support-widget {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.video-modal-content {
  position: relative;
  width: 90vw;
  max-width: 600px;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform-origin: center;
  overflow: visible;
}

/* Tears of joy modal: Larger on mobile too */
.video-modal-overlay.tears-video-modal .video-modal-content {
  width: 95vw;
  max-width: 768px;
}

/* Desktop: Position modal on right side, centered in right 50% (for hero grid videos) */
@media (min-width: 768px) {
  .video-modal-overlay:not(.tears-video-modal) .video-modal-content {
    width: 40vw;
    max-width: 700px;
  }
  
  /* Tears of joy modal: Larger and centered */
  .video-modal-overlay.tears-video-modal .video-modal-content {
    width: 75vw;
    max-width: 768px;
  }
}

.video-modal-close {
  position: absolute;
  top: -3.5rem;
  right: 0;
  z-index: 10001;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.9);
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.video-modal-close:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

.video-modal-close svg {
  width: 20px;
  height: 20px;
}

/* Desktop: move closer to modal corner */
@media (min-width: 768px) {
  .video-modal-close {
    top: -24px;
    right: -24px;
  }
}

/* Match hamburger button size on mobile */
@media (max-width: 767px) {
  .video-modal-close {
    width: 2.5rem;
    height: 2.5rem;
  }
}

.video-modal-thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: none;
}

.video-modal-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-modal-loading {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.video-modal-player {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 3;
  transition: opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
  border-radius: 12px;
  overflow: hidden;
}

.video-modal-player > video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.video-player-text-overlay {
  position: absolute;
  inset: 0;
  padding: 0.75rem 1rem;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 10;
}

.video-player-title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.video-player-subtitle {
  font-size: 0.875rem;
  opacity: 0.75;
}

@media (min-width: 768px) {
  .video-player-title {
    font-size: 1.5rem;
    margin-bottom: 0;
  }
  
  .video-player-subtitle {
    font-size: 1rem;
  }
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.video-modal-player iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Disclaimer bar below the hero wall videos (hidden for the tears-of-joy promo) */
.video-modal-disclaimer {
  position: absolute;
  top: calc(100% + 1.25rem);
  left: 0;
  right: 0;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0 1rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8125rem;
  line-height: 1.3;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.video-modal-disclaimer strong {
  font-weight: 600;
}

.video-modal-disclaimer-link {
  color: #fff;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity var(--transition-fast);
}

.video-modal-disclaimer-link:hover {
  opacity: 0.8;
}

.video-modal-overlay.tears-video-modal .video-modal-disclaimer {
  display: none;
}

/* Form styles */
.hero-form {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-form.active {
  opacity: 1;
  visibility: visible;
}

.form-step {
  opacity: 0;
  transition: opacity 0.3s ease;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
}

.form-step.active {
  opacity: 1;
  pointer-events: all;
  z-index: 10;
}

.form-step h2 {
  font-size: 3rem;
  font-family: 'Newsreader', serif;
  font-weight: 400;
  margin-bottom: 2rem;
  color: #ffffff;
}

.form-input {
  font-size: 2rem;
  border: none;
  border-bottom: 2px solid #4b5563;
  padding: 0.5rem 0;
  margin-bottom: 2rem;
  background: transparent;
  width: 100%;
  max-width: 600px;
  color: #ffffff;
}

.form-input:focus {
  outline: none;
  border-bottom-color: #9ca3af;
}

.form-input::placeholder {
  color: #6b7280;
}

.form-close {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  font-size: 2.25rem;
  color: #6b7280;
  cursor: pointer;
  padding: 1rem;
  transition: color 0.3s ease;
  z-index: 100;
}

.form-close:hover {
  color: #ffffff;
}

.initial-content {
  padding: 0 1.5rem;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.initial-content.hidden {
  opacity: 0;
  visibility: hidden;
}

.plane-background-reviews {
  display: none;
}

.plane-background-2 {
  display: none;
}

.how-it-works .plane-background-3 {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  width: 18%;
  z-index: 1;
  pointer-events: none;
  transform: scaleX(-1) !important;
}

@media (min-width: 768px) {
  .initial-content {
    padding: 0;
  }
  .plane-background-reviews {
    display: block;
    position: absolute;
    top: 5%;
    left: 5%;
    width: 40%;
    z-index: 1;
  }

  .plane-background-2 {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 20%;
    z-index: 1;
    pointer-events: none;
  }

  .how-it-works {
    position: relative;
  }

  .how-it-works .plane-background-3 {
    position: absolute;
    bottom: 4rem;
    left: 0;
  }
}

@media (max-width: 767px) {
  .how-it-works img.plane-background-3 {
    position: absolute;
    top: auto;
    bottom: 0;
    right: 0;
    left: auto;
    width: 20%;
  }
}

/* Video Book section */
/* Video Book Section — mobile-first */
/* Same soft-wash treatment as the pricing band, pitched violet/indigo instead
   of blue/rose/amber so the two light sections do not read as the same slab. */
.video-book-section {
  background-color: #ffffff;
  background-image:
    radial-gradient(at 78% 0%, rgba(139, 92, 246, 0.11) 0px, transparent 55%),
    radial-gradient(at 8% 30%, rgba(168, 85, 247, 0.07) 0px, transparent 52%),
    radial-gradient(at 42% 100%, rgba(99, 102, 241, 0.09) 0px, transparent 60%);
  padding: 4rem 1.5rem;
  overflow: hidden;
}

.video-book-section .video-book-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column-reverse;
  gap: 2.5rem;
}

.video-book-text {
  color: #1e293b;
}

.video-book-text h3 {
  font-family: 'Newsreader', serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: #0f172a;
}

.video-book-intro,
.intro-lead {
  font-size: 1rem;
  line-height: 1.7;
}

.video-book-intro {
  color: #475569;
  margin-bottom: 2rem;
}

.video-book-specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

.spec-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.875rem;
  padding: 1.125rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: center;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.spec-item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
}

.spec-item strong {
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
}

.spec-item span {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.5;
}

.video-book-pitch {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #64748b;
  margin-bottom: 2rem;
}

.video-book-ctas {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

/* Match how-it-works-pricing-more size/weight; dark text on light Video Book section */
.video-book-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #030712;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.0625rem;
  border-bottom: none;
  transition: color 0.2s ease;
}

.video-book-link:hover {
  color: #030712;
  text-decoration: none;
}

.video-book-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-book-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
}

.video-book-hero-image {
  width: 90%;
  height: auto;
  display: block;
}

.video-book-gif {
  position: absolute;
  z-index: -1;
  top: 9%;
  left: 49%;
  width: 34%;
  height: auto;
  transform: rotate(4deg);
  border-radius: 0.5rem;
  object-fit: cover;
}

.video-book-confetti {
  position: absolute;
  width: 110%;
  height: auto;
  left: -10%;
  top: -20%;
  object-fit: contain;
  pointer-events: none;
  z-index: 3;
}

/* Tears standalone section (extracted from how-it-works) */
.tears-standalone {
  padding-top: 3rem;
  padding-bottom: 3rem;
  border-top: none;
}

@media (min-width: 768px) {
  .video-book-section {
    padding: 6rem 3rem;
  }

  .video-book-section .video-book-content {
    flex-direction: row;
    align-items: center;
    gap: 4rem;
  }

  .video-book-text {
    flex: 1;
  }

  .video-book-text h3 {
    font-size: 2.75rem;
    margin-bottom: 1.25rem;
  }

  .video-book-intro,
  .intro-lead {
    font-size: 1.125rem;
  }

  .video-book-specs {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .video-book-media {
    flex: 1;
    max-width: 50%;
  }

  .video-book-frame {
    max-width: 100%;
  }

  .video-book-ctas {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }

  .video-book-link {
    font-size: 1.125rem;
  }

}

@media (min-width: 1080px) {
  .video-book-section .video-book-content {
    gap: 6rem;
  }

  .video-book-text h3 {
    font-size: 3rem;
  }

  .video-book-specs {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Press credits between the hero and the Video Book section. */
.press-strip {
  position: relative;
  z-index: 1;
  padding: .875rem 1.5rem;
  background: #fff;
  border-block: 1px solid #e4e7ec;
  color: #252b35;
  font-size: .8125rem;
  font-weight: 550;
  text-align: center;
}

.press-strip-logos {
  --logo-gap: clamp(1.125rem, 4vw, 4rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .65rem var(--logo-gap);
  max-width: 27rem;
  margin: .5rem auto 0;
}

.press-strip img {
  width: calc((100% - 2 * var(--logo-gap)) / 3);
  max-width: 8rem;
  height: 1.55rem;
  object-fit: contain;
  filter: brightness(0);
  opacity: .84;
}

/* The USA Today SVG includes extra space around its wordmark. */
.press-strip img:last-child { height: 1.9rem; }

@media (min-width: 768px) {
  .press-strip-logos { max-width: none; flex-wrap: nowrap; }
}

/* Scroll the layers at different speeds while keeping the card controls in place. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .homepage-root .hero { view-timeline-name: --hero-scroll; }
    .homepage-root .hero .initial-content {
      animation: hero-copy-lift linear both;
      animation-timeline: --hero-scroll;
      animation-range: exit-crossing 0% exit-crossing 75%;
    }
    .homepage-root .hero .thumbnail-container img {
      animation: hero-photo-drift linear both;
      animation-timeline: --hero-scroll;
      animation-range: exit-crossing 0% exit-crossing 75%;
    }
    .press-strip { view-timeline-name: --press-scroll; }
    .press-strip img {
      animation: press-logo-settle ease-out both;
      animation-timeline: --press-scroll;
      animation-range: entry 0% cover 30%;
    }
    .press-strip img:nth-of-type(even) { animation-range-end: cover 40%; }

    @keyframes hero-copy-lift {
      from { translate: 0 0; }
      to { translate: 0 clamp(-3rem, -5vh, -1rem); }
    }
    @keyframes hero-photo-drift {
      from { transform: translateY(0) scale(1); }
      to { transform: translateY(4%) scale(1.09); }
    }
    @keyframes press-logo-settle {
      from { translate: 0 .6rem; opacity: .7; }
      to { translate: 0 0; }
    }
  }
}

/* A strip of contributor frames overlaps the reaction photo. */
.homepage-root {
  --reaction-card-radius: 1rem;
}

.intro-section {
  background: radial-gradient(ellipse at 12% 15%, #fff 0%, transparent 75%) #faf6ee;
  padding: clamp(3.5rem, 7vw, 7rem) clamp(1.5rem, 5vw, 5rem);
  color: #271f19;
}

.intro-inner {
  display: grid;
  align-items: center;
  gap: 2rem;
  max-width: 76rem;
  margin-inline: auto;
}

.intro-copy h2 {
  font-family: 'Newsreader', serif;
  font-weight: 400;
  text-wrap: balance;
}

.intro-lead {
  max-width: 42ch;
  margin: 1.25rem 0;
  color: #443c36;
}

.intro-example {
  display: inline-block;
  padding-block: .4rem;
  color: var(--color-primary-light);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .25em;
}

.intro-photos {
  padding-left: 4%;
}

.intro-reaction {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--reaction-card-radius);
  filter: saturate(1.22) brightness(1.07);
}

.intro-messages {
  --film-rail: clamp(10px, 1.25vw, 16px);
  --film-edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16' viewBox='0 0 24 16'%3E%3Cpath fill='%23292420' fill-rule='evenodd' d='M0 0h24v16H0z M9 4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z'/%3E%3C/svg%3E");
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(3px, .4vw, 6px);
  width: min(100%, 35rem);
  margin: -13% 0 0 -3%;
  padding: var(--film-rail) clamp(4px, .5vw, 8px);
  box-sizing: border-box;
  border-radius: .5rem;
  background:
    var(--film-edge) top / auto var(--film-rail) round no-repeat,
    var(--film-edge) bottom / auto var(--film-rail) round no-repeat,
    linear-gradient(#292420, #292420) center / 100% calc(100% - 2 * var(--film-rail)) no-repeat;
  transform: rotate(-2deg);
  box-shadow: 0 2px 4px #31221629, 0 10px 18px -5px #31221642;
}

.intro-message {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

@media (min-width: 768px) {
  .intro-inner {
    grid-template-columns: 2fr 3fr;
    gap: clamp(2rem, 4vw, 4rem);
  }
}

/* Homepage pricing band. Card vocabulary is lifted from /pricing/ (pricing.css
   is not loaded here, so the values are mirrored rather than shared): white
   card, 1rem radius, 0 8px 20px shadow, yellow "Best Value!" pill, gradient
   button. */
.homepage-pricing {
  background-color: #ffffff;
  background-image:
    radial-gradient(at 15% 0%, rgba(59, 130, 246, 0.07) 0px, transparent 55%),
    radial-gradient(at 85% 10%, rgba(236, 72, 153, 0.06) 0px, transparent 55%),
    radial-gradient(at 50% 100%, rgba(251, 191, 36, 0.09) 0px, transparent 60%);
  padding: 3.5rem 1.5rem 4rem;
  text-align: center;
}

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

.homepage-pricing-eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

.homepage-pricing h3 {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.2;
  color: #0f172a;
  margin-bottom: 0.75rem;
}

.homepage-pricing-lead {
  max-width: 36rem;
  margin: 0 auto;
  color: #475569;
  font-size: 1rem;
  line-height: 1.7;
}

.homepage-pricing-grid {
  display: grid;
  gap: 1.75rem;
  margin-top: 2.75rem;
  text-align: left;
}

.homepage-pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 1rem;
  padding: 1.75rem 1.25rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.homepage-pricing-card--featured {
  z-index: 5;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

.homepage-pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffd867;
  color: #000000;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.homepage-pricing-name {
  font-family: 'Roboto Flex', sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.homepage-pricing-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}

.homepage-pricing-amount {
  font-size: 2.5rem;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.2;
}

.homepage-pricing-was {
  font-size: 1rem;
  color: #888888;
  text-decoration: line-through;
}

.homepage-pricing-period {
  font-size: 1rem;
  color: #888888;
}

.homepage-pricing-save {
  display: inline-flex;
  align-items: center;
  background: #000000;
  color: #ffffff;
  padding: 0.3125rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.homepage-pricing-copy {
  color: #64748b;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  text-wrap: pretty;
}

.homepage-pricing-button {
  display: block;
  margin-top: auto;
  padding: 0.875rem 1.5rem;
  border-radius: 0.5rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  text-align: center;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.homepage-pricing-button:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.homepage-pricing-button--primary {
  background: var(--gradient-primary);
  border-color: transparent;
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.homepage-pricing-button--primary:hover {
  background: var(--gradient-primary-hover);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}

.homepage-pricing-more {
  display: inline-block;
  margin-top: 2rem;
  color: #475569;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.homepage-pricing-more:hover {
  color: #0f172a;
  text-decoration: none;
}

@media (min-width: 768px) {
  .homepage-pricing {
    padding: 5rem 3rem 5.5rem;
  }

  .homepage-pricing h3 {
    font-size: 2.5rem;
  }

  .homepage-pricing-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: 1.5rem;
    margin-top: 3.5rem;
  }

  .homepage-pricing-card {
    padding: 2rem 1.5rem;
  }
}

/* Legacy logo section (removed from homepage; keep rules for occasion pages if needed) */
.logo-section-wrapper {
  background: #C4D1E3;
  background-image:
    radial-gradient(at 20% 30%, rgba(148, 163, 184, 0.2) 0px, transparent 50%),
    radial-gradient(at 80% 70%, rgba(100, 116, 139, 0.16) 0px, transparent 50%),
    radial-gradient(at 50% 50%, rgba(148, 163, 184, 0.14) 0px, transparent 50%),
    radial-gradient(at 90% 10%, rgba(255, 255, 255, 0.3) 0px, transparent 50%);
  position: relative;
  overflow: hidden;
  border-top: 1px solid #e5e7eb;
  padding: 3rem 1.5rem 3rem;
}

.logo-section {
  padding: 0;
  max-width: 1125px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3rem;
  position: relative;
  z-index: 1;
}

.logo-grid {
  flex: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  padding-left: 0;
  order: 2;
}

.logo-grid img {
  width: 120px;
  height: 24px;
  object-fit: contain;
  filter: saturate(0) brightness(0.75) sepia(0.75) hue-rotate(180deg) saturate(0.5);
  transition: filter 0.2s ease;
  cursor: pointer;
}

.logo-grid img.active,
.logo-grid img:hover {
  filter: saturate(1) brightness(1);
}

.quote-section {
  flex: 3;
  display: flex;
  align-items: center;
  position: relative;
  min-height: 150px;
  order: 1;
}

.quote-icon {
  position: absolute;
  width: 300px;
  height: 300px;
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: color-burn;
}

.quote-icon-top {
  top: -100px;
  left: -100px;
  transform: rotate(180deg) scaleX(-1);
}

.quote {
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}

.quote.active {
  opacity: 1;
  visibility: visible;
  position: relative;
}

.quote-text {
  font-family: 'Newsreader', serif;
  font-size: 1.5rem;
  line-height: 1.3;
  margin-bottom: 1.5rem;
  color: #030712;
  position: relative;
  z-index: 1;
}

.quote-author {
  font-size: 1rem;
  color: #1a1a1a;
  font-weight: 500;
}

.quote-company {
  font-size: 0.875rem;
  color: #9CA3AF;
}

@media (min-width: 768px) {
  .logo-section-wrapper {
    padding: 0;
  }

  .logo-section {
    padding: 6rem 0;
    flex-direction: row;
    align-items: center;
    gap: 6rem;
  }

  .logo-grid {
    flex-direction: column;
    gap: 3rem;
    padding-left: 3rem;
    order: 2;
  }

  .logo-grid img {
    width: 200px;
    height: 40px;
  }

  .quote-section {
    order: 1;
    min-height: 200px;
  }

  .quote-icon {
    width: 600px;
    height: 600px;
  }

  .quote-icon-top {
    top: -150px;
    left: -150px;
  }

  .quote-text {
    font-size: 2.5rem;
    margin-bottom: 2.75rem;
  }

  .quote-author {
    font-size: 1.125rem;
  }

  .quote-company {
    font-size: 1rem;
  }
}

/* Facebook reviews styles */
/* Mobile-first reviews section */
.reviews-section {
  position: relative;
  padding: 3rem 1.5rem;
  max-width: 2400px;
  background: linear-gradient(135deg, #e0f2fe 0%, #fce7f3 25%, #fef9c3 50%, #fef08a 75%, #e0f2fe 100%);
  background-size: 200% 200%;
}
/* Give homepage section titles a little more weight on small screens. */
@media (max-width: 767px) {
  .homepage-root :is(
    .reviews-header h2,
    .intro-copy h2,
    .how-it-works-header h3,
    .video-book-heading,
    .tears-info h2,
    .advanced-editor-heading h2,
    #homepage-pricing-title,
    .keepsakes-text h3,
    .faq-left h3,
    .occasions-content h3,
    .work-promo-title,
    .ideas-title
  ) {
    font-weight: 500;
  }
}

/* Mobile: consistent section padding and heading styles across v3 homepage + occasion pages */
@media (max-width: 767px) {
  .reviews-section,
  .how-it-works,
  .logo-section-wrapper,
  .tears-section,
  .occasions-section,
  .ideas-section,
  .keepsakes-section,
  .faq-section {
    padding-block: 3rem;
    padding-inline: 1.5rem;
  }
  .reviews-header h2,
  .reviews-header h3,
  .how-it-works-header h3,
  .faq-left h2,
  .faq-left h3,
  .keepsakes-text h3,
  .occasions-content h3,
  .ideas-title,
  .occasion-group-gift__title,
  .occasion-section-title,
  .occasion-alt-title {
    font-size: 2rem;
    font-weight: 400;
    font-family: 'Newsreader', serif;
  }
}

.reviews-header {
  width: 100%;
  max-width: 768px;
  margin-right: 0;
  margin-left: 0;
  text-align: left;
}

@media (min-width: 768px) {
  .reviews-header {
    margin-left: auto;
    text-align: right;
  }
}

.reviews-header h2,
.reviews-header h3 {
  font-family: 'Newsreader', serif;
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: #030712;
  font-weight: 400;
}

.reviews-header p {
  margin-bottom: 2rem;
  color: #374151;
  font-size: 0.9375rem;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .reviews-section {
    padding: 6rem 3rem;
  }

  .reviews-header h2,
  .reviews-header h3 {
    font-size: 3.25rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
  }

  .reviews-header p {
    margin-bottom: 3rem;
    font-size: 1.125rem;
  }
}

.reviews-grid {
  position: relative;
  margin-bottom: 1rem;
  overflow: hidden;
  max-height: 700px;
  /* Mask gradient to fade bottom into background - starts fading at blue line */
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
}

@media (min-width: 1280px) {
  .reviews-grid {
    position: relative;
    z-index: 9;
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
    max-height: 750px;
  }
}

/* Macy will handle the layout, but ensure cards don't stretch */
.reviews-grid .review-card {
  width: 100%;
}

.review-card {
  border-radius: 0.5rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.75);
  transition: transform var(--transition-fast);
  height: auto;
  contain: layout style;
  will-change: transform;
}

.review-card:hover {
  transform: translateY(-2px);
}

@media (min-width: 768px) {
  .review-card {
    padding: 1.5rem;
    gap: 1rem;
  }
}

.review-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.review-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .review-avatar {
    width: 60px;
    height: 60px;
  }
}

.review-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.review-avatar .facebook-avatar-icon {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
}

.review-meta {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.1;
}

@media (min-width: 768px) {
  .review-meta {
    font-size: 1rem;
  }
}

.review-author {
  font-weight: 600;
  color: #030712;
  margin-bottom: 0.25rem;
}

.review-date {
  color: #65676b;
}

.review-stars {
  color: #f8c307;
  font-size: 1rem;
  letter-spacing: 1px;
  display: flex;
  gap: 0.125rem;
}

.review-text {
  font-size: 0.875rem;
  line-height: 1.4;
  color: #1f2937;
  margin: 0;
}

.reviews-cta {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  position: relative;
  z-index: 10;
}

@media (min-width: 768px) {
  .review-text {
    font-size: 1rem;
  }
}

/* Mobile-first reviews footer */
.reviews-footer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.facebook-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  align-items: flex-start;
}

.facebook-logo {
  height: 20px;
}

.facebook-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.rating-stars {
  color: #f8c307;
  font-size: 1rem;
  letter-spacing: 1px;
}

.rating-text {
  font-weight: 600;
  color: #030712;
  font-size: 0.875rem;
}

.rating-count {
  color: #6b7280;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.review-nav {
  display: flex;
  gap: 0.75rem;
  align-self: flex-end;
}

.review-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: none;
  color: #030712;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .reviews-footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
  }

  .facebook-info {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    width: auto;
    flex: 1;
  }

  .facebook-logo {
    height: 24px;
  }

  .facebook-rating {
    gap: 0.5rem;
  }

  .rating-stars {
    font-size: 1.25rem;
  }

  .rating-text {
    font-size: 1rem;
  }

  .rating-count {
    font-size: 0.875rem;
    margin-left: 0.5rem;
  }

  .review-nav {
    gap: 0.75rem;
    align-self: auto;
    flex-shrink: 0;
  }

  .review-nav-btn {
    width: 48px;
    height: 48px;
  }
}

.review-nav-btn {
  transition: all 0.2s ease;
}

.review-nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* How it works styles */
/* Mobile-first how it works section */
.how-it-works {
  position: relative;
  padding: 3rem 1.5rem 3rem;
  background: #030712;
  background-image:
    radial-gradient(at 30% 20%, rgba(139, 92, 246, 0.12) 0px, transparent 50%),
    radial-gradient(at 70% 60%, rgba(59, 130, 246, 0.15) 0px, transparent 50%),
    radial-gradient(at 50% 80%, rgba(251, 191, 36, 0.1) 0px, transparent 50%),
    radial-gradient(at 85% 30%, rgba(16, 185, 129, 0.08) 0px, transparent 50%),
    radial-gradient(at 15% 70%, rgba(252, 211, 77, 0.08) 0px, transparent 45%);
  border-top: 1px solid #1f2937;
}

.how-it-works-content {
  max-width: 1125px;
  margin: 0 auto;
}

.how-it-works-header {
  width: 100%;
  max-width: 768px;
  margin: 0 auto 2rem;
  text-align: center;
}

.how-it-works-header h3 {
  font-family: 'Newsreader', serif;
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: #ffffff;
  font-weight: 400;
}

.how-it-works-header p {
  color: #d1d5db;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.steps-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: stretch;
  margin-bottom: 0;
}

.steps {
  flex: 1;
  max-width: 100%;
  position: relative;
  order: 1;
}

.step {
  padding: 1.5rem 0;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.step.active {
  opacity: 1;
}

.step[data-step='3']::before {
  display: none;
}

.step-number {
  width: 40px;
  height: 40px;
  background: #A3C1F0;
  color: #030712;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  margin-top: 4px;
  z-index: 2;
  flex-shrink: 0;
}

/* Keep previous steps visible */
.step>div {
  opacity: 0.25;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Make current and previous steps fully visible */
.step.active>div,
.step:has(~ .step.active)>div {
  opacity: 1;
}

.step-content {
  flex: 1;
}

.step h4 {
  font-size: 1.25rem;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.step p {
  color: #9ca3af;
  font-size: 0.875rem;
  line-height: 1.5;
}

.step-image {
  flex: 1;
  position: relative;
  height: 450px;
  min-height: 450px;
  max-width: 100%;
  width: 100%;
  order: 2;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-image img,
.step-image .step-image-wrapper {
  width: 100% !important;
  max-width: 100%;
}

.step-image img,
.step-image .step-image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: translateY(1rem);
  transition: all 0.3s ease;
  filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.25));
}

.step-image img.active,
.step-image .step-image-wrapper.active {
  opacity: 1;
  transform: translateY(0);
}

/* Step 3 video and frame positioning */
.step-image-wrapper {
  position: relative;
}

.step-video-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(50% + 1.75rem);
  height: auto;
  object-fit: cover;
  z-index: 1;
}

.step-phone-frame {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 4;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

.step-video-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(50% + 1.75rem);
  height: auto;
  aspect-ratio: 9 / 16;
  background: rgba(0, 0, 0, 0.25);
  z-index: 2;
}

.step-video-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.step-video-play-overlay svg {
  margin-left: 4px;
}

.steps .start-btn-wrapper {
  display: inline-flex;
  padding: 1rem 2rem 0;
  z-index: 10;
}

.how-it-works-cta {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .how-it-works {
    padding: 6rem 3rem 6rem;
  }

  .how-it-works-header {
    margin: 0 auto 1.5rem;
  }

  .how-it-works-header h3 {
    font-size: 3.25rem;
    line-height: 1.1;
    margin-bottom: 1.25rem;
  }

  .how-it-works-header p {
    font-size: 1.125rem;
  }

  .steps-container {
    flex-direction: row;
    gap: 6rem;
    align-items: center;
    margin-bottom: 0;
  }

  .steps {
    max-width: 50%;
    order: 1;
  }

  .step {
    padding: 2rem 0;
    gap: 20px;
  }

  .step-number {
    width: 48px;
    height: 48px;
    font-size: 18px;
    margin-top: 9px;
  }

  .step h4 {
    font-size: 1.5rem;
    margin-bottom: 0;
  }

  .step p {
    font-size: 1rem;
  }

  .step-image {
    height: 600px;
    min-height: 600px;
    max-width: 50%;
    width: auto;
    order: 2;
    margin-top: 0;
  }

  .step-video-bg {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
  }

  .step-video-overlay {
    width: 50%;
  }

  /* On desktop, only show active image/wrapper */
  .step-image img[data-step="1"] {
    opacity: 0;
  }

  .step-image img.active,
  .step-image .step-image-wrapper.active {
    opacity: 1;
  }

  .how-it-works-cta {
    margin-top: 4rem;
  }
}

/* 8M videos stat badge in hero - replaces second CTA on video book slide */
.hero-videos-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: auto;
  flex-shrink: 0;
}

.hero-videos-stat .videos-stat-flower {
  width: 28px;
  height: 34px;
  background: linear-gradient(180deg, #FFDAB9 0%, #FFFACD 100%);
}

.hero-videos-stat .videos-stat-number {
  font-size: 0.875rem;
  font-family: 'Roboto Flex', sans-serif;
  background: linear-gradient(90deg, #FFDAB9 0%, #FFFACD 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-videos-stat .videos-stat-over {
  font-size: 0.625rem;
  font-weight: 500;
}

.hero-videos-stat .videos-stat-sent {
  font-size: 0.625rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  .hero-videos-stat {
    gap: 0.4rem;
  }

  .hero-videos-stat .videos-stat-flower {
    width: 40px;
    height: 48px;
  }

  .hero-videos-stat .videos-stat-over {
    font-size: 0.625rem;
  }

  .hero-videos-stat .videos-stat-number {
    font-size: 1.25rem;
  }

  .hero-videos-stat .videos-stat-sent {
    font-size: 0.625rem;
  }
}

/* 8M videos stat badge - larger version of CreateTributeModal graphic (how-it-works - now removed) */
.videos-stat-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.videos-stat-flower {
  width: 48px;
  height: 58px;
  flex-shrink: 0;
  opacity: 0.9;
  background: linear-gradient(180deg, #E8C547 0%, #F5D76E 100%);
}

.videos-stat-flower-left {
  mask: url("/static/v3/images/tribute/flowers-left.d64a82524bc8.svg") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("/static/v3/images/tribute/flowers-left.d64a82524bc8.svg") no-repeat center;
  -webkit-mask-size: contain;
}

.videos-stat-flower-right {
  mask: url("/static/v3/images/tribute/flowers-right.7be8146d5875.svg") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("/static/v3/images/tribute/flowers-right.7be8146d5875.svg") no-repeat center;
  -webkit-mask-size: contain;
}

.videos-stat-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: 'Roboto Flex', sans-serif;
}

.videos-stat-over {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #ffffff;
}

.videos-stat-number {
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #F5D76E;
  font-family: 'Roboto Flex', sans-serif;
  margin: -2px 0;
}

.videos-stat-sent {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #ffffff;
}

@media (min-width: 768px) {
  .videos-stat-badge {
    gap: 1rem;
    margin-bottom: 2.5rem;
  }

  .videos-stat-flower {
    width: 80px;
    height: 96px;
  }

  .videos-stat-over {
    font-size: 0.875rem;
  }

  .videos-stat-number {
    font-size: 2.5rem;
  }

  .videos-stat-sent {
    font-size: 0.75rem;
  }
}

/* Mobile-first Tears of joy section */
.tears-simple-content {
  max-width: 1125px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: stretch;
}

.tears-image-wrapper {
  flex: 1;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0.5rem;
  aspect-ratio: 4/3;
  min-height: 250px;
  position: relative;
  width: 100%;
  order: 1;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.tears-image-wrapper:hover {
  transform: scale(1.02);
}

.tears-image-wrapper:hover .play-overlay {
  background: rgba(0, 0, 0, 0.8);
  transform: translate(-50%, -50%) scale(1.1);
}

.tears-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
  z-index: 0;
}

.tissue-box {
  position: absolute;
  bottom: -1rem;
  right: -1rem;
  width: 80px;
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
  z-index: 2;
}

/* Larger play button specifically for tears section */
.tears-image-wrapper .play-overlay {
  width: 72px;
  height: 72px;
  z-index: 3;
}

.tears-image-wrapper .play-overlay svg {
  width: 40px;
  height: 40px;
}

.tears-image-wrapper .play-overlay svg path {
  stroke: white;
  stroke-width: 1;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.tears-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  order: 2;
}

.stat-number {
  font-family: 'Newsreader';
  font-size: 3.5rem;
  line-height: 1;
  font-weight: 500;
  background: linear-gradient(120deg, #93c5fd 0%, #fca5a5 45%, #fde68a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-description {
  font-size: 1.25rem;
  line-height: 1.3;
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.tears-description {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tears-description p {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #d1d5db;
  margin: 0;
}

.tears-cta {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
  width: 100%;
}

.tears-cta .cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
}

@media (min-width: 768px) {
  .tears-simple-content {
    position: relative;
    flex-direction: row;
    gap: 4rem;
    align-items: center;
    z-index: 9;
  }

  .tears-image-wrapper {
    border-radius: 0.5rem;
    min-height: 400px;
    order: 1;
  }

  /* Even larger play button on desktop */
  .tears-image-wrapper .play-overlay {
    width: 96px;
    height: 96px;
  }

  .tears-image-wrapper .play-overlay svg {
    width: 48px;
    height: 48px;
  }

  .tears-image-wrapper .play-overlay svg path {
    stroke-width: 1.5;
  }

  .tears-bg-video {
    border-radius: 0.5rem;
  }

  .tissue-box {
    bottom: -1.5rem;
    right: -1.5rem;
    width: 128px;
  }

  .tears-info {
    order: 2;
  }

  .stat-number {
    font-size: 6rem;
  }

  .stat-description {
    font-size: 1.5rem;
    line-height: 1.25;
    margin-bottom: 2rem;
  }

  .tears-description {
    gap: 1.5rem;
  }

  .tears-description p {
    font-size: 1.125rem;
  }

  .tears-cta {
    margin-top: 5rem;
  }
}

/* Mobile-first Occasions section */
.occasions-section {
  overflow: hidden;
  background-color: var(--occasions-work-bg-color);
  background-image: var(--occasions-work-bg-image);
  padding: 3rem 0;
  border-top: 1px solid #1f2937;
  position: relative;
}

.plane-background-3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 182px;
  height: 274px;
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
  transform: none !important;
}

.occasions-content {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.occasions-content h3 {
  font-family: 'Newsreader', serif;
  font-size: 2rem;
  line-height: 1.2;
  padding: 0 1.5rem;
  margin-bottom: 2rem;
  font-weight: 400;
  text-align: center;
}

.occasions-content h3 .white-text {
  color: #ffffff;
}

.occasions-content h3 .gradient-text {
  background: linear-gradient(120deg, #93c5fd 0%, #fca5a5 45%, #fde68a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.occasions-grid {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0;
}

.occasions-grid::-webkit-scrollbar {
  display: none;
}

.occasion-card {
  position: relative;
  padding: 1.5rem;
  border-radius: 0.5rem;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  contain: layout style;
  will-change: transform;
  width: 75vw;
  flex-shrink: 0;
  scroll-snap-align: center;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.occasion-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.65) 0%,
    rgba(255, 255, 255, 0) 42%,
    rgba(0, 0, 0, 0.04) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.occasion-card > * {
  position: relative;
  z-index: 1;
}

.occasion-card:first-child {
  margin-left: 1.5rem;
}

.occasion-card:last-child {
  margin-right: 1.5rem;
}

/* Gradient backgrounds based on icon colors - lighter, with lighter color top-right */
.occasion-card[data-occasion="birthdays"] {
  background: linear-gradient(315deg, #fff5f5 0%, #fffbf0 100%);
}

.occasion-card[data-occasion="weddings"] {
  background: linear-gradient(315deg, #fff0f5 0%, #fef7ff 100%);
}

.occasion-card[data-occasion="anniversaries"] {
  background: linear-gradient(315deg, #f0fdf4 0%, #dcfce7 100%);
}

.occasion-card[data-occasion="retirements"] {
  background: linear-gradient(315deg, #eff6ff 0%, #dbeafe 100%);
}

.occasion-card[data-occasion="memory"] {
  background: linear-gradient(315deg, #faf5ff 0%, #f3e8ff 100%);
}

.occasion-card[data-occasion="graduations"] {
  background: linear-gradient(315deg, #faf5ff 0%, #e9d5ff 100%);
}

.occasion-card[data-occasion="teacher"] {
  background: linear-gradient(315deg, #fff7ed 0%, #ffedd5 100%);
}

.occasion-card[data-occasion="promotions"] {
  background: linear-gradient(315deg, #fffbeb 0%, #fef3c7 100%);
}

.occasion-card[data-occasion="getwell"] {
  background: linear-gradient(315deg, #fef2f2 0%, #fee2e2 100%);
}

.occasion-card[data-occasion="baby"] {
  background: linear-gradient(315deg, #f0f9ff 0%, #fffbf0 100%);
}

.occasion-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.occasion-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  position: relative;
  transition: transform 0.3s ease;
}

.occasion-icon img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.occasion-icon .icon-default {
  opacity: 1;
}

.occasion-icon .icon-hover {
  opacity: 0;
}

/* Scale icon container on hover */
.occasion-card:hover .occasion-icon {
  transform: scale(1.15);
}

/* If animated version exists, swap it on hover */
.occasion-card:hover .occasion-icon .icon-default {
  opacity: 0;
}

.occasion-card:hover .occasion-icon .icon-hover {
  opacity: 1;
}

/* If no animated version exists, keep default visible and it will scale with the container */
.occasion-icon.no-animated .icon-hover {
  display: none !important;
}

.occasion-card:hover .occasion-icon.no-animated .icon-default {
  opacity: 1;
}

.occasion-card h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #030712;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.occasion-description {
  font-size: 0.9375rem;
  color: #6b7280;
  line-height: 1.45;
  margin-bottom: 0;
  flex-grow: 1;
}

/* Desktop and tablet - restore grid layout */
@media (min-width: 768px) {
  .occasions-section {
    padding: 8rem 3rem 6rem !important;
  }

  .occasions-content h3 {
    font-size: 3.125rem !important;
    line-height: 1.15 !important;
    margin-bottom: 3rem !important;
    padding: 0;
  }

  .occasions-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    overflow-x: visible;
    scroll-snap-type: none;
    padding: 0;
    align-items: stretch;
  }

  .occasion-card {
    width: auto;
    flex-shrink: 1;
    scroll-snap-align: none;
  }

  .occasion-card:first-child {
    margin-left: 0;
  }

  .occasion-card:last-child {
    margin-right: 0;
  }

  .occasion-card h4 {
    font-size: 1.25rem;
  }

  .occasion-description {
    font-size: 1.0625rem;
  }
}

/* Mobile sticky CTA bar */
@media (max-width: 767px) {
  body.homepage-root {
    padding-bottom: 4.75rem;
  }

  /* Sit support FAB above the fixed Start CTA when the bar is visible */
  body.homepage-root:has(.mobile-sticky-cta:not(.is-hidden)) #support-widget {
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }
}

.mobile-sticky-cta {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: rgba(3, 7, 18, 0.96);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* visibility flips instantly on the way in, and only after the slide out */
  transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s;
}

/* visibility (not just opacity) so the off-screen link leaves the tab order
   and the accessibility tree -- otherwise keyboard focus lands on a bar the
   user cannot see. */
.mobile-sticky-cta.is-hidden {
  transform: translateY(110%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s linear 0.25s;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-sticky-cta,
  .mobile-sticky-cta.is-hidden {
    transition: none;
  }
}

.mobile-sticky-cta .primary-btn {
  width: 100%;
  text-align: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .mobile-sticky-cta {
    display: none !important;
  }

  body.homepage-root {
    padding-bottom: 0;
  }
}

/* Tablet - 3 columns */
@media (min-width: 768px) and (max-width: 1023px) {
  .occasions-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Large desktop - 4 columns */
@media (min-width: 1024px) and (max-width: 1399px) {
  .occasions-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Desktop - 5 columns */
@media (min-width: 1400px) {
  .occasions-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Ideas Section */
.ideas-section {
  background: linear-gradient(135deg, #e0f2fe 0%, #fce7f3 25%, #fef9c3 50%, #fef08a 75%, #e0f2fe 100%);
  background-size: 200% 200%;
  padding: 3rem 0;
}

.ideas-content {
  max-width: 1125px;
  margin: 0 auto;
}

.ideas-title {
  font-family: 'Newsreader', serif;
  font-size: 1.75rem;
  /* Match .reviews-header h3 / other Newsreader section titles on light backgrounds */
  font-weight: 400;
  color: #030712;
  line-height: 1.2;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
  transition: opacity 0.3s ease;
}

.ideas-subtitle {
  padding: 0 1.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  color: #4b5563;
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: 42rem;
  text-align: center;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.ideas-title-light {
  color: #9ca3af;
  font-weight: 400;
}

@media (max-width: 767px) {
  .ideas-title {
    font-size: 2rem;
  }
  .ideas-subtitle {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
  }
}

.ideas-grid {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin-top: 2rem;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0;
}

.ideas-grid::-webkit-scrollbar {
  display: none;
}

.idea-card:first-child {
  margin-left: 1.5rem;
}

.idea-card:last-child {
  margin-right: 1.5rem;
}

.idea-card {
  display: block;
  text-decoration: none;
  padding: 1.5rem;
  border-radius: 0.5rem;
  transition: transform var(--transition-base);
  position: relative;
  background: var(--color-white);
  width: 75vw;
  flex-shrink: 0;
  scroll-snap-align: center;
  contain: layout style;
  will-change: transform;
}

.idea-card:hover {
  transform: translateY(-4px);
}

.idea-card-blue {
  background: #ffffff;
}

.idea-card-red {
  background: #ffffff;
}

.idea-card-yellow {
  background: #ffffff;
}

/* Custom stack colors for yellow card (Video Book) */
.idea-card-red .idea-card-image-bg2 {
  background: #f0e6d8; /* Light warm beige */
}

.idea-card-red .idea-card-image-bg1 {
  background: #e3d5c3; /* Medium warm tan */
}

.idea-card-yellow .idea-card-image-bg2 {
  background: #f5f0e8; /* Light beige */
}

.idea-card-yellow .idea-card-image-bg1 {
  background: #e8dcc8; /* Medium tan */
}

.idea-card-gray {
  background: #ffffff;
}

.idea-card-gray .idea-card-title {
  color: #030712;
}

.idea-card-gray .idea-card-description {
  color: #6b7280;
}

.idea-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.idea-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: #000000;
  color: #ffffff;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.idea-card-badge svg {
  width: 14px;
  height: 14px;
}

.idea-card-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #000000;
  border-radius: 50%;
  color: #ffffff;
  flex-shrink: 0;
}

.idea-card-image-container {
  margin-bottom: 1.5rem;
  position: relative;
}

.idea-card-image-stack {
  position: relative;
  width: 100%;
  padding-top: 60%;
}

.idea-card-image {
  position: absolute;
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.15);
}

.idea-card-image-bg2 {
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 100%;
  background: #e5e7eb;
}

.idea-card-image-bg1 {
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 100%;
  background: #d1d5db;
}

.idea-card-image-main {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #1f2937;
  overflow: hidden;
}

.idea-card-image-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.idea-card-title {
  font-weight: 500;
  color: #030712;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.idea-card-description {
  font-size: 0.9375rem;
  color: #4b5563;
  line-height: 1.5;
}

.idea-card-simple .idea-card-header {
  margin-bottom: 1.5rem;
}

.idea-card-simple .idea-card-title {
  margin-bottom: 0.25rem;
}

.idea-card-featured {
  background: #030712 !important;
  /* The homepage sets --idea-featured-image to a WebP Wagtail rendition when one exists. */
  background-image: var(--idea-featured-image, url("../../images/homepage/idea-birthday-wishes.428f80861eeb.webp")) !important;
  background-size: cover !important;
  background-position: center;
  background-repeat: no-repeat;
  grid-column: span 2;
  position: relative;
}

.idea-card-featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(3, 7, 18, 0.9) 0%, transparent 100%);
  border-radius: inherit;
  z-index: 0;
}

.idea-card-featured .idea-card-header,
.idea-card-featured .idea-card-featured-content {
  position: relative;
  z-index: 1;
}

.idea-card-featured .idea-card-title {
  color: #ffffff;
}

.idea-card-featured .idea-card-description {
  color: #ffffff;
  opacity: 0.8;
}

.idea-card-badge-light {
  background: #ffffff;
  color: #000000;
}

.idea-card-arrow-light {
  background: #ffffff;
  color: #000000;
}

.idea-card-featured-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

@media (min-width: 768px) {
  .ideas-section {
    padding: 6rem 3rem;
  }

  .ideas-title {
    font-size: 3rem;
    padding: 0;
  }

  .ideas-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    margin-top: 4rem;
    overflow-x: visible;
    scroll-snap-type: none;
    padding: 0;
  }

  .idea-card {
    padding: 2rem;
    width: auto;
    flex-shrink: 1;
    scroll-snap-align: none;
  }

  .idea-card:first-child {
    margin-left: 0;
  }

  .idea-card:last-child {
    margin-right: 0;
  }

  .idea-card-image-container {
    margin-bottom: 2rem;
  }

  .idea-card-description {
    font-size: 1rem;
  }

  .idea-card:nth-child(1),
  .idea-card:nth-child(2),
  .idea-card:nth-child(3) {
    grid-column: span 4;
  }

  .idea-card:nth-child(4) {
    grid-column: 1 / 4;
    grid-row: 2;
  }

  .idea-card:nth-child(5) {
    grid-column: 4 / 7;
    grid-row: 2;
  }

  .idea-card-featured {
    grid-column: 7 / 13;
    grid-row: 2;
  }
}

/* Keepsakes section */
/* Mobile-first keepsakes section */
.keepsakes-section {
  position: relative;
  padding: 4rem 1.5rem;
  background: #030712;
  background-image:
    radial-gradient(at 30% 20%, rgba(139, 92, 246, 0.12) 0px, transparent 50%),
    radial-gradient(at 70% 60%, rgba(59, 130, 246, 0.15) 0px, transparent 50%),
    radial-gradient(at 50% 80%, rgba(251, 191, 36, 0.1) 0px, transparent 50%),
    radial-gradient(at 85% 30%, rgba(16, 185, 129, 0.08) 0px, transparent 50%),
    radial-gradient(at 15% 70%, rgba(252, 211, 77, 0.08) 0px, transparent 45%);
  border-top: 1px solid #1f2937;
  overflow: hidden;
}

.keepsakes-content {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  height: 100%;
}

.keepsakes-text {
  max-width: 280px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 10;
  padding: 2rem 0;
}

.keepsakes-text h3 {
  font-family: 'Newsreader', serif;
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  font-weight: 400;
}

.keepsakes-text h3 .white-text {
  color: #ffffff;
}

.keepsakes-text h3 .gradient-text {
  background: linear-gradient(120deg, #93c5fd 0%, #fca5a5 45%, #fde68a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.keepsakes-text p {
  font-size: 0.9375rem;
  color: #d1d5db;
  margin-bottom: 1.5rem;
  max-width: 100%;
  line-height: 1.5;
}

.keepsakes-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.keepsakes-images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
  pointer-events: none;
}

.keepsakes-image {
  position: absolute;
  border-radius: 0.5rem;
  overflow: hidden;
  background: transparent;
  will-change: transform;
}

.keepsakes-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Position the images for mobile */
.keepsakes-image-dvd {
  left: -30px;
  top: 15%;
  width: 140px;
  height: 140px;
}

.keepsakes-image-usb {
  left: -20px;
  bottom: 15%;
  width: 160px;
  height: 160px;
}

.keepsakes-image-book {
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  height: 180px;
}

@media (min-width: 768px) {
  .keepsakes-section {
    padding: 14rem 3rem;
  }

  .keepsakes-text {
    max-width: 600px;
    margin: 0 auto 0;
  }

  .keepsakes-images {
    position: relative;
    height: auto;
    margin-top: 0;
    pointer-events: auto;
  }

  .keepsakes-text h3 {
    font-size: 3.25rem;
    line-height: 1.1;
    margin-bottom: 1.25rem;
  }

  .keepsakes-text p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
  }

  .keepsakes-images {
    height: auto;
    margin-top: 0;
  }

  .keepsakes-image-dvd {
    left: 0;
    top: 100px;
    width: 300px;
    height: 300px;
  }

  .keepsakes-image-usb {
    left: 0;
    bottom: 100px;
    width: 350px;
    height: 350px;
  }

  .keepsakes-image-book {
    right: 0;
    top: 150px;
    width: 500px;
    height: 500px;
    transform: none;
  }
}

/* FAQ section */
/* Mobile-first FAQ section */
.faq-section {
  padding-block: 3rem;
  padding-inline: 1.5rem;
  background: #fff;
  border-top: 1px solid #e5e7eb;
}

.faq-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.faq-left {
  flex: 1;
  height: fit-content;
  order: 1;
}

.faq-left h2,
.faq-left h3 {
  font-family: 'Newsreader', serif;
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.support-card {
  background: #030712;
  background-image:
    radial-gradient(at 30% 20%, rgba(139, 92, 246, 0.12) 0px, transparent 50%),
    radial-gradient(at 70% 60%, rgba(59, 130, 246, 0.15) 0px, transparent 50%),
    radial-gradient(at 50% 80%, rgba(251, 191, 36, 0.1) 0px, transparent 50%),
    radial-gradient(at 85% 30%, rgba(16, 185, 129, 0.08) 0px, transparent 50%),
    radial-gradient(at 15% 70%, rgba(252, 211, 77, 0.08) 0px, transparent 45%);
  color: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
}

.homepage-root .support-card {
  background-image:
    linear-gradient(135deg, #ffffff12, #ffffff03 55%, transparent),
    radial-gradient(at 25% 15%, #8b5cf626, transparent 60%),
    radial-gradient(at 80% 75%, #3b82f626, transparent 60%);
  border: 1px solid #ffffff30;
  border-radius: 1rem;
  box-shadow: inset 0 1px 0 #ffffff26, inset 0 -1px 0 #ffffff08, 0 12px 28px #18233b1a;
}

.support-card p {
  font-size: 0.9375rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.contact-btn {
  background: white;
  color: #030712;
  border: none;
  padding: 0.75rem 1.25rem;
  border-radius: 0.375rem;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.3s ease, transform 0.3s ease;
  width: fit-content;
  text-decoration: none;
}

.contact-btn:hover {
  background: #f3f4f6;
  transform: translateY(-2px);
}

.faq-right {
  flex: 1;
  order: 2;
}

.accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.accordion-item {
  border-bottom: 1px solid #e5e7eb;
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 1rem;
  color: #374151;
  transition: color 0.3s ease, transform 0.3s ease;
}

.accordion-header:hover {
  color: #030712;
  transform: translateY(-2px);
}

.accordion-icon {
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 1rem;
}

.accordion-item.active .accordion-icon {
  transform: rotate(180deg);
}

/* The question is a heading for screen-reader navigation; it must not change
   how the button looks. */
.accordion-heading {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  /* visibility, not just max-height, so a collapsed answer leaves the
     accessibility tree -- otherwise aria-expanded="false" contradicts what a
     screen reader still reads out. Flips in instantly, out after the slide. */
  visibility: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease, visibility 0s linear 0.3s;
}

.accordion-item.active .accordion-content {
  max-height: 1600px;
  padding-bottom: 1rem;
  visibility: visible;
  transition: max-height 0.3s ease, padding 0.3s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .accordion-content,
  .accordion-item.active .accordion-content,
  .accordion-icon {
    transition: none;
  }
}

.accordion-content p {
  color: #6b7280;
  line-height: 1.6;
  font-size: 0.875rem;
}

.accordion-content ul {
  margin: 0.75rem 0 0.75rem 1.25rem;
  padding-left: 0.25rem;
  color: #6b7280;
  line-height: 1.6;
  font-size: 0.875rem;
}

.accordion-content li {
  margin-bottom: 0.35rem;
}

@media (min-width: 768px) {
  .faq-section {
    padding-block: 6rem;
    padding-inline: 3rem;
  }

  .faq-content {
    flex-direction: row;
    gap: 6rem;
  }

  .faq-left {
    order: 1;
  }

  .faq-left h2,
  .faq-left h3 {
    font-size: 4rem;
    line-height: 1.2;
    margin-bottom: 2rem;
  }

  .support-card {
    padding: 2rem;
    border-radius: 0.5rem;
  }

  .support-card p {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
  }

  .contact-btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
  }

  .faq-right {
    order: 2;
  }

  .accordion {
    gap: 0.5rem;
  }

  .accordion-header {
    padding: 1.5rem 0;
    font-size: 1.25rem;
  }

  .accordion-icon {
    margin-left: 0;
  }

  .accordion-item.active .accordion-content {
    max-height: 1600px;
    padding-bottom: 1.5rem;
  }

  .accordion-content p {
    font-size: 1rem;
  }

  .accordion-content ul {
    font-size: 1rem;
  }
}

/* Footer padding to match other sections */
.footer-section {
  padding: 3rem 1.5rem;
}

.footer-section .container.medium {
  padding: 0;
}

.footer-grid {
  padding: 0;
  align-items: start;
}

.footer-section .footer {
  padding: 0;
  margin: 0;
}

.footer-section .image-18 {
  margin-left: 0;
  margin-bottom: 1.5rem;
  width: 140px !important;
  height: auto !important;
  padding-top: 15px;
}

.footer-nav-wrapper,
.event-nav-wrapper {
  padding-top: 15px;
}

.social-link-container {
  padding-top: 15px;
}

@media (min-width: 768px) {
  .footer-section {
    padding: 4rem 3rem;
  }

  .footer-section .image-18 {
    width: 160px !important;
  }
}

/* Social icons - remove backgrounds, just show icons */
.social-link {
  background: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 0.5rem !important;
}

.social-link:first-child {
  margin-left: 0 !important;
}

.footer-social-icon {
  width: 32px;
  height: 32px;
  display: block;
}
/* Footer links hover effect */
.footer-nav-link,
.event-nav-link,
.link-4,
.link-5 {
  display: inline-block;
  transition: color 0.3s ease, transform 0.3s ease;
}

.footer-nav-link:hover,
.event-nav-link:hover,
.link-4:hover,
.link-5:hover {
  color: rgba(3, 7, 18, 1) !important;
  transform: translateY(-2px);
}

/* Plyr player custom styling */
.plyr {
  --plyr-color-main: #FB4332;
}

.plyr__progress__played,
.plyr__volume__progress {
  background: #FB4332;
}

.plyr__control--overlaid {
  background: #FB4332;
}

.plyr__control:hover {
  background: #FB4332;
}

.plyr__control[aria-expanded="true"] {
  background: #FB4332;
}

#hw-chat {
  background: #A3C1F0 !important;
  opacity: 0.8 !important;
}

#hw-chat:hover {
  opacity: 1.0 !important;
}



/* Trust chips — below intro, above steps (glass pills) */
.how-it-works-trust-row {
  width: 100%;
  max-width: 768px;
  margin: 0 auto 1.75rem;
  text-align: center;
}

.how-it-works-trust-row .how-it-works-pricing-rows {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .how-it-works-trust-row {
    margin-bottom: 2rem;
  }
}

.how-it-works-pricing-rows {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.how-it-works-pricing-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0.5rem 0.625rem;
}

.how-it-works-pricing-chips--checks {
  justify-content: center;
}

.how-it-works-pricing-chips li {
  margin: 0;
  padding: 0;
}

.how-it-works-pricing-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #f3f4f6;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0.06) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 8px 24px rgba(0, 0, 0, 0.25);
}

.how-it-works-pricing-chips--checks .how-it-works-pricing-chip {
  font-weight: 500;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.how-it-works-pricing-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  font-size: 0.7rem;
  line-height: 1;
  border-radius: 9999px;
  background: rgba(34, 197, 94, 0.25);
  color: #86efac;
  flex-shrink: 0;
}

.how-it-works-pricing-chips--checks .how-it-works-pricing-chip-icon {
  border-radius: 0;
  background: transparent;
  width: 1.25rem;
  height: 1.25rem;
}

.how-it-works-pricing-chips--checks .how-it-works-pricing-chip-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.how-it-works-pricing-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 1.0625rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  border-bottom: none;
  transition: color 0.2s ease;
}

.how-it-works-pricing-more:hover {
  color: #ffffff;
}

.how-it-works-pricing-more-arrow {
  display: inline-block;
  margin-left: 0.1rem;
}

@media (min-width: 900px) {
  .how-it-works-pricing-chips--checks {
    flex-wrap: nowrap;
  }
}

@media (min-width: 768px) {

  .how-it-works-pricing-chips--checks .how-it-works-pricing-chip {
    font-size: 1rem;
    padding: 0.45rem 0.65rem;
  }

  .how-it-works-pricing-more {
    font-size: 1.125rem;
  }

  .how-it-works-pricing-rows {
    gap: 0.875rem;
  }

  .how-it-works-pricing-chips {
    gap: 0.625rem 0.75rem;
  }

  .how-it-works-pricing-chip {
    padding: 0.55rem 1rem;
    font-size: 1rem;
  }
}

/* ============================================================
   Tribute for Work promo (homepage, below "Creative Ways…")
   Dark arched top (even viewport-wide curve via a giant circle);
   image straddles the curve; logos + text below on white.
   ============================================================ */
.work-promo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
  padding: 50px 1.5rem 6rem;
  text-align: center;
}
/* Sleek diagonal edge-lit line spanning the whole section (white + dark arch).
   mix-blend-mode lets the seam read on both halves. Sits above the backgrounds
   (z-index 1) but below the image (3) and text (2). */
.work-promo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: overlay;
  background: linear-gradient(
    127deg,
    rgba(0, 0, 0, 0.16) 0%,
    rgba(0, 0, 0, 0.16) 49.9%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0.08) 50.1%,
    rgba(255, 255, 255, 0.08) 100%
  );
  /* fade the overlay in below the top so it doesn't create an edge at the
     occasions/promo boundary */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 200px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 200px);
}
/* A huge circle anchored at the top — only its gentle bottom arc shows,
   giving one even, un-warped curve stretched across the viewport. */
.work-promo-arch {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  height: 300px;
  overflow: hidden;
  background-color: var(--occasions-work-bg-color);
  /* clip the bottom to an even, viewport-wide convex curve (giant-circle mask) */
  -webkit-mask: radial-gradient(150vw 150vw at 50% calc(210px - 150vw), #000 99.6%, transparent 100%);
  mask: radial-gradient(150vw 150vw at 50% calc(210px - 150vw), #000 99.6%, transparent 100%);
}
/* Viewport-sized layer, absolutely positioned — not fixed (fixed escapes overflow
   clipping and bleeds behind the footer). Anchored to the arch top so gradient
   blobs use viewport-scale coordinates inside the masked curve. */
.work-promo-arch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translateX(-50%);
  background-color: var(--occasions-work-bg-color);
  background-image: var(--occasions-work-bg-image);
  pointer-events: none;
}

/* Image placeholder straddling the curve */
.work-promo-media {
  position: relative;
  z-index: 3;
  width: min(640px, 100%);
  margin: 0 auto 2.75rem;
}
.work-promo-hero {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  padding: 0;
  border-radius: 18px;
  background: #0b1220;
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.40);
  overflow: hidden;
  cursor: pointer;
}
.work-promo-hero iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.work-promo-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.work-promo-yt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
  transition: transform 0.18s ease;
}
.work-promo-yt-bg {
  fill: #212121;
  fill-opacity: 0.85;
  transition: fill 0.18s ease, fill-opacity 0.18s ease;
}
.work-promo-hero:hover .work-promo-yt { transform: translate(-50%, -50%) scale(1.06); }
.work-promo-hero:hover .work-promo-yt-bg { fill: #ff0000; fill-opacity: 1; }
.work-promo-play {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  position: relative;
}
.work-promo-play::after {
  content: "";
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-left: 18px solid var(--color-primary);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
.work-promo-media-label {
  position: absolute;
  bottom: 10px; right: 12px;
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.28);
  padding: 3px 8px; border-radius: 6px;
}
.work-promo-pip {
  position: absolute;
  left: -18px; top: 14%;
  z-index: 1;
  width: 118px;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  border: 3px solid #fff;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
  overflow: hidden;
}
.work-promo-pip-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-promo-pip-cam {
  position: absolute;
  top: 7px; left: 7px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.work-promo-pip-time {
  position: absolute;
  right: 7px; bottom: 6px;
  font-size: 0.62rem; font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  padding: 1px 5px; border-radius: 5px;
}

/* Content below the curve — dark on white */
.work-promo-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
}
.work-promo-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 2.25rem;
  margin-bottom: 2.25rem;
}
.work-promo-logos .wp-logo {
  height: 34px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  opacity: 0.92;
}
.wp-logo-lego { height: 50px; }
.wp-logo-kaiser { height: 42px; }
.wp-logo-godaddy { height: 24px; }
.work-promo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: #fff;
  border: 1px solid #f6c9c4;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  margin-bottom: 1.1rem;
}
.work-promo-eyebrow svg { color: var(--color-primary); }
.work-promo-title {
  font-family: 'Newsreader', serif;
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--color-dark);
  -webkit-text-fill-color: var(--color-dark);
  background: none;
  margin: 0 auto 0.85rem;
  max-width: 20ch;
}
.work-promo-accent { color: var(--color-primary); }
.work-promo-copy {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #374151;
  max-width: 40rem;
  margin: 0 auto 1.75rem;
}
.work-promo-btn {
  display: inline-block;
  background: var(--gradient-primary);
  color: #fff;
  font-weight: 500;
  padding: 0.9rem 1.9rem;
  border-radius: 0.5rem;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(181, 29, 29, 0.30);
  transition: all var(--transition-base);
}
.work-promo-btn:hover {
  background: var(--gradient-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(181, 29, 29, 0.40);
}

@media (max-width: 768px) {
  .work-promo { padding: 34px 1.25rem 4.5rem; }
  .work-promo-media { margin-bottom: 2.25rem; }
  .work-promo-pip { width: 92px; left: -10px; }
  .work-promo-logos { gap: 0.5rem 1.5rem; margin-bottom: 1.75rem; }
  .work-promo-logos .wp-logo { height: 28px; }
  .wp-logo-lego { height: 42px; }
  .wp-logo-kaiser { height: 36px; }
  .wp-logo-godaddy { height: 20px; }
  .work-promo-title { font-size: 1.9rem; }
  .work-promo-copy { font-size: 1rem; }
}

/* Carry the Advanced Video Editor's white glass surfaces through the homepage.
   Scope these shared selectors so occasion and pricing pages keep their layouts. */
.homepage-root :is(.spec-item, .review-card, .homepage-pricing-card) {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.4));
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 24px rgba(77, 61, 100, 0.04);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.homepage-root :is(.spec-item, .review-card):hover {
  border-color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 28px rgba(77, 61, 100, 0.08);
}

.homepage-root .homepage-pricing-card--featured {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.65));
  border-color: #ffffff;
  box-shadow: inset 0 1px 0 #ffffff, 0 12px 28px rgba(77, 61, 100, 0.12);
}

/* Give the glass a visible color wash and let the keepsake lead the composition. */
/* Dark, and directly under How It Works: the two read as one block. A hairline and a
   warmer glow behind the shelf photo mark where the keepsake begins. */
.homepage-root .video-book-section {
  background-color: #080d18;
  background-image:
    radial-gradient(ellipse at 78% 50%, rgba(214, 170, 110, 0.16), transparent 55%),
    radial-gradient(ellipse at 10% 30%, rgba(89, 69, 124, 0.3), transparent 58%),
    radial-gradient(ellipse at 40% 100%, rgba(35, 55, 90, 0.45), transparent 60%);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.homepage-root .video-book-section { position: relative; overflow: hidden; }
.homepage-root .video-book-section .video-book-intro { color: #bbc6d8; }
.homepage-root .video-book-section .video-book-link,
.homepage-root .video-book-section .video-book-link:hover { color: #fff; }
/* Short copy: one paragraph, one line that lands, and the specs kept small. */
.homepage-root .video-book-intro { font-size: 1.0625rem; line-height: 1.65; margin-bottom: 1.25rem; }
.homepage-root .video-book-kicker {
  margin: 0 0 1.25rem;
  color: #fff;
  font-family: 'Newsreader', serif;
  font-size: 1.375rem;
  line-height: 1.3;
}
.homepage-root .video-book-specline { margin: 0 0 2rem; color: #8794ab; font-size: .8125rem; line-height: 1.6; }
@media (min-width: 768px) {
  .homepage-root .video-book-intro { font-size: 1.125rem; }
  .homepage-root .video-book-kicker { font-size: 1.5rem; }
}

/* The Video Book on its shelf: a rendered frame sequence, drawn to the canvas as you scroll.
   The frames are transparent, so the book stands on the section itself. */
.homepage-root .vb-stage { width: 100%; }
.homepage-root .vb-seq {
  position: relative;
  width: 116%;
  margin-left: -8%;
  aspect-ratio: 1080 / 440;
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.45));
}
.homepage-root .vb-frame,
.homepage-root .vb-canvas { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; }
/* The canvas takes over from the still once the script has frames to draw. */
.homepage-root .vb-canvas { opacity: 0; }
.homepage-root .vb-stage.is-live .vb-canvas { opacity: 1; }
.homepage-root .vb-stage.is-live .vb-frame { opacity: 0; }
/* The video lies under the frames at full frame size. The script bends it onto the screen
   window of the frame on show, so it plays while the cover swings past in front of it. */
.homepage-root .vb-screen {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  transform-origin: 0 0;
  opacity: 0;
}
.homepage-root .vb-stage.is-live .vb-screen { opacity: 1; }
@media (min-width: 1080px) {
  .homepage-root .vb-seq { width: 124%; margin-left: -6%; }
}

.homepage-root .video-book-heading {
  margin: 0;
  color: #fff;
  font-family: 'Newsreader', serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
  grid-column: 1 / -1;
}
.homepage-root .video-book-section .video-book-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 1200px;
  gap: 2.5rem;
}
.homepage-root .video-book-media { max-width: none; min-width: 0; position: relative; z-index: 2; pointer-events: none; }
.homepage-root .video-book-text { align-self: start; }
@media (max-width: 767px) {
  .homepage-root .video-book-content > .section-eyebrow { order: -3; }
  .homepage-root .video-book-heading { order: -2; }
  .homepage-root .video-book-media { order: -1; }
}
@media (min-width: 768px) {
  .homepage-root .video-book-heading { font-size: 2.75rem; }
  .homepage-root .video-book-section .video-book-content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem 3.5rem;
    align-items: start;
  }
  /* The copy stacks in the left column; the scene sits beside all of it, centered. */
  .homepage-root .video-book-heading { grid-column: 1; text-wrap: balance; }
  .homepage-root .video-book-media { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}
@media (min-width: 1080px) {
  .homepage-root .video-book-heading { font-size: 3rem; }
  .homepage-root .video-book-media { justify-content: flex-start; }
  .homepage-root .video-book-frame { width: 120%; max-width: none; flex-shrink: 0; }
}

/* An intimate reaction story, with the tissue box and flight trail as accents. */
.homepage-root .tears-standalone {
  background: radial-gradient(ellipse at 20% 45%, rgba(94, 116, 175, 0.2), transparent 55%),
    radial-gradient(ellipse at 86% 75%, rgba(113, 83, 124, 0.16), transparent 55%), #080d18;
}
.homepage-root .tears-simple-content {
  max-width: 1200px;
  gap: 3rem;
}
.homepage-root .tears-image-wrapper {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--reaction-card-radius);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  min-height: 0;
}
.homepage-root .tears-bg-video { border-radius: inherit; }
.homepage-root .tears-image-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
}
.homepage-root .tears-image-wrapper .play-overlay {
  width: 76px;
  height: 76px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.homepage-root .tears-image-wrapper .play-overlay svg { width: 30px; height: 30px; }
.homepage-root .tears-image-wrapper:hover { transform: none; }
.homepage-root .tears-image-wrapper:hover .play-overlay { background: rgba(255, 255, 255, 0.26); }
.homepage-root .tears-image-wrapper .play-overlay:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.homepage-root .tears-eyebrow {
  margin: 0 0 0.75rem;
  color: #b9c7e9;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8125rem;
  font-weight: 700;
}
.homepage-root .tears-info h2 {
  margin: 0 0 1.75rem;
  color: #fff;
  font-family: 'Newsreader', serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.1;
  font-weight: 400;
}
.homepage-root .tears-metric {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 0;
  margin-bottom: 1.5rem;
  border: 0;
}
.homepage-root .tears-metric .stat-number {
  font-size: clamp(3.5rem, 5vw, 4.5rem);
  flex-shrink: 0;
  background: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: #eef5ff;
  text-shadow: 0 1px 1px #ffffff66, 0 0 18px #b9d5ff35, 0 0 44px #94baff28;
}
.homepage-root .tears-metric .stat-description { margin: 0; font-size: 1rem; line-height: 1.5; color: #e2e8f0; }
.homepage-root .tears-description p { font-size: 1rem; line-height: 1.7; color: #b8c2d3; }
.homepage-root .tears-cta { margin-top: 1.75rem; justify-content: flex-start; }
.homepage-root .tears-standalone .tissue-box {
  width: clamp(84px, 9vw, 130px);
  right: -1rem;
  bottom: -1.75rem;
  pointer-events: none;
  filter: drop-shadow(0 18px 22px #00000080) drop-shadow(0 4px 6px #00000040);
  transform-origin: center bottom;
}
@media (prefers-reduced-motion: no-preference) {
  .homepage-root .tears-image-wrapper::after { animation: tears-grain 1.2s steps(4) infinite; }
  .homepage-root .tears-standalone .tissue-box { animation: tissue-breathe 6s ease-in-out infinite; }
}
@keyframes tears-grain {
  0%, 100% { background-position: 0 0; }
  25% { background-position: 37px 19px; }
  50% { background-position: -23px 53px; }
  75% { background-position: 61px -31px; }
}
@keyframes tissue-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.025); }
}
@media (min-width: 768px) {
  .homepage-root .tears-simple-content { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 5rem; }
}
@media (max-width: 767px) {
  .homepage-root .tears-info { padding-top: 0.5rem; }
}

/* Newsreader's numeral ink sits above its line-box center. */
.homepage-root .tears-metric .stat-number { position: relative; top: 0.08em; }
.homepage-root .tears-image-wrapper { isolation: isolate; }
.homepage-root .tears-video-glow {
  position: absolute;
  inset: -7%;
  width: 114%;
  height: 114%;
  filter: blur(42px) saturate(1.45);
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
}
.homepage-root .tears-image-wrapper .plane-background-3 {
  width: max(300px, calc((100vw - 1125px) / 2 + 140px));
  max-width: none;
  left: auto;
  right: calc(100% - 90px);
  bottom: -85px;
  top: auto;
  z-index: -1;
  opacity: 0.7;
}
@media (max-width: 767px) {
  .homepage-root .tears-image-wrapper .plane-background-3 { width: 200px; left: auto; right: calc(100% - 80px); bottom: -55px; }
  .homepage-root .tears-video-glow { filter: blur(28px) saturate(1.45); }
}
@media (prefers-reduced-motion: reduce) {
  .homepage-root .tears-video-glow { display: none; }
}

/* The three-step introduction, on the page's soft light wash. The dark phone is the focus. */
.homepage-root #how-it-works {
  background-color: #f2f3ff;
  background-image:
    radial-gradient(ellipse at 12% 48%, rgba(167, 190, 246, 0.38), transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(254, 231, 151, 0.38), transparent 55%),
    radial-gradient(ellipse at 65% 25%, rgba(210, 179, 239, 0.32), transparent 60%),
    radial-gradient(ellipse at 95% 90%, rgba(187, 230, 223, 0.34), transparent 55%);
  border-top: 0;
  overflow: hidden;
}
.homepage-root #how-it-works .how-it-works-header h3,
.homepage-root #how-it-works .step h4 { color: #0f172a; }
.homepage-root #how-it-works .how-it-works-header p { color: #475569; }
.homepage-root #how-it-works .how-it-works-content { max-width: 1040px; }
.homepage-root #how-it-works .how-it-works-header { margin-bottom: 2.5rem; }
.homepage-root #how-it-works .steps-container {
  display: grid;
  gap: 2.5rem;
  justify-items: center;
  align-items: center;
}
.homepage-root #how-it-works .how-copy { width: 100%; max-width: 27rem; }
.homepage-root #how-it-works .steps { display: grid; gap: .25rem; max-width: none; }

/* One step is open at a time. The others keep their title and step back. */
.homepage-root #how-it-works .step {
  padding: .75rem 0;
  gap: 1rem;
  border: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
  opacity: .5;
  transition: opacity .4s ease;
}
.homepage-root #how-it-works .step.active,
.homepage-root #how-it-works .step:hover,
.homepage-root #how-it-works .step:focus-within { opacity: 1; }
.homepage-root #how-it-works .step > div { opacity: 1; }
.homepage-root #how-it-works .step-content { padding-top: .6875rem; }
.homepage-root #how-it-works .step h4 { font-size: 1.25rem; line-height: 1.3; margin-bottom: 0; }
.homepage-root #how-it-works .step-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s ease;
}
.homepage-root #how-it-works .step.active .step-body { grid-template-rows: 1fr; }
.homepage-root #how-it-works .step-body > div { overflow: hidden; min-height: 0; }
.homepage-root #how-it-works .step p {
  color: #475569;
  margin: 0;
  padding-top: .4rem;
  font-size: 1rem;
  line-height: 1.55;
}
.homepage-root #how-it-works .step-number {
  width: 48px;
  height: 48px;
  font-size: 1.25rem;
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 #fff, 0 8px 24px rgba(77, 61, 100, 0.08);
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffffcc, #ffffff73); border: 1px solid #ffffffe6; color: #3f5fb8; margin-top: 0;
}
.homepage-root #how-it-works .step:nth-child(2) .step-number { color: #6b4fc0; }
.homepage-root #how-it-works .step:nth-child(3) .step-number { color: #1f8576; }
.homepage-root #how-it-works .step.active .step-number {
  color: #fff;
  background: linear-gradient(135deg, #1f2a44, #121a2e);
  border-color: #121a2e;
  box-shadow: inset 0 1px 0 #ffffff26, 0 10px 24px rgba(15, 23, 42, 0.22);
}
.homepage-root #how-it-works .step-select {
  border: 0; padding: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.homepage-root #how-it-works .step-select::after { content: ''; position: absolute; inset: 0; border-radius: 1.25rem; }
.homepage-root #how-it-works .step-select:focus-visible { outline: 2px solid #121a2e; outline-offset: 5px; border-radius: 4px; }

.homepage-root #how-it-works .how-cta { margin-top: 1rem; text-align: center; }
/* Small screens already have the sticky Start a Tribute bar. */
.homepage-root #how-it-works .how-cta .primary-btn { display: none; }
.homepage-root #how-it-works .how-cta-note { margin: .875rem 0 0; color: #64748b; font-size: .875rem; text-wrap: balance; }

/* The phone. Everything inside the screen is sized in cqw, so it scales as one piece. */
.homepage-root #how-it-works .how-stage {
  position: relative;
  order: -1;
  display: flex;
  justify-content: center;
  width: 100%;
  isolation: isolate;
}
.homepage-root #how-it-works .how-stage::before {
  content: '';
  position: absolute;
  inset: 8% -10%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #9ebcff33, #b8a4e91f 45%, transparent 70%);
  pointer-events: none;
}
.homepage-root #how-it-works .how-phone {
  --how-w: 212px;
  --how-play: paused;
  position: relative;
  width: var(--how-w);
  aspect-ratio: 9 / 18.6;
  padding: calc(var(--how-w) * .036);
  border-radius: calc(var(--how-w) * .135);
  /* A brushed metal band, lit from the top left. */
  background: linear-gradient(135deg, #f4f5f8 0%, #b9bdc7 22%, #e9ebf0 45%, #9a9fab 72%, #d6d9e0 100%);
  box-shadow:
    inset 0 0 0 1px #ffffffb3,
    inset 0 0 calc(var(--how-w) * .012) #00000059,
    0 calc(var(--how-w) * .02) calc(var(--how-w) * .04) rgba(15, 23, 42, 0.2),
    0 calc(var(--how-w) * .09) calc(var(--how-w) * .16) rgba(15, 23, 42, 0.24),
    0 calc(var(--how-w) * .2) calc(var(--how-w) * .3) rgba(15, 23, 42, 0.16);
}
/* Side buttons: two volume keys on the left, power on the right. */
.homepage-root #how-it-works .how-phone::before,
.homepage-root #how-it-works .how-phone::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: calc(var(--how-w) * .014);
  border-radius: 2px;
  background: linear-gradient(to bottom, #e6e8ee, #9499a5 50%, #c9ccd4);
}
.homepage-root #how-it-works .how-phone::before {
  left: calc(var(--how-w) * -.009);
  top: 21%;
  height: 7.5%;
  box-shadow: 0 calc(var(--how-w) * .2) 0 #b4b8c2;
}
.homepage-root #how-it-works .how-phone::after { right: calc(var(--how-w) * -.009); top: 27%; height: 12%; }
.homepage-root #how-it-works.is-playing .how-phone { --how-play: running; }
.homepage-root #how-it-works .how-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--how-w) * .1);
  /* The black glass border between the metal band and the display. */
  box-shadow: 0 0 0 calc(var(--how-w) * .022) #06070b, 0 0 0 calc(var(--how-w) * .025) #2a2d36;
  /* The page's own dark: the navy of the dark sections, with their quiet blue and
     violet glows. */
  background: radial-gradient(ellipse at 88% 6%, #59457c8c 0%, transparent 55%),
    radial-gradient(ellipse at 6% 96%, #23375ab3 0%, transparent 58%),
    linear-gradient(170deg, #121a2e 0%, #0c1222 55%, #141a33 100%);
  color: #ffffffd9;
  container-type: inline-size;
  isolation: isolate;
}
.homepage-root #how-it-works .how-phone-screen::before {
  content: '';
  position: absolute;
  z-index: 5;
  top: 3.2cqw;
  left: 50%;
  width: 29cqw;
  height: 8cqw;
  margin-left: -14.5cqw;
  border-radius: 99px;
  background: #06070b;
}
/* A faint reflection across the glass. */
.homepage-root #how-it-works .how-phone-screen::after {
  content: '';
  position: absolute;
  z-index: 6;
  inset: 0;
  background: linear-gradient(118deg, #ffffff24 0%, #ffffff0a 22%, transparent 38%);
  pointer-events: none;
}
.homepage-root #how-it-works .how-screen {
  position: absolute;
  inset: 0;
  padding: 14cqw 6cqw 8cqw;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility 0s .5s;
}
.homepage-root #how-it-works .how-screen.active {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease;
}
.homepage-root #how-it-works .how-screen ul { list-style: none; margin: 0; padding: 0; }
.homepage-root #how-it-works .how-screen p { margin: 0; }
.homepage-root #how-it-works .how-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The screens follow the v3 Tribute page: themed background, dashed edit fields, media grid.
   The story matches the step 3 video: a Christmas Tribute for Dad. */
.homepage-root #how-it-works .how-nav {
  display: flex;
  align-items: center;
  gap: 2.6cqw;
  height: 9cqw;
}
.homepage-root #how-it-works .how-nav img { width: auto; height: 6.4cqw; margin-right: auto; object-fit: contain; }
.homepage-root #how-it-works .how-status {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 1.6cqw;
  font-size: 3.3cqw;
  font-weight: 500;
  color: #fff;
}
.homepage-root #how-it-works .how-status i { width: 1.9cqw; height: 1.9cqw; border-radius: 50%; background: #22c55e; }
.homepage-root #how-it-works .how-status span { grid-area: 1 / 2; }
.homepage-root #how-it-works .how-status span:first-of-type:not(:only-of-type) { opacity: 0; }
.homepage-root #how-it-works .how-publish {
  position: relative;
  padding: 1.9cqw 3.2cqw;
  border-radius: 2.2cqw;
  background: #fff;
  color: #1b1838;
  font-size: 3.3cqw;
  font-weight: 500;
}
.homepage-root #how-it-works .how-field {
  padding: .5cqw 2.6cqw;
  border: 1px dashed #ffffff4d;
  border-radius: 2.4cqw;
  background: #ffffff17;
}
.homepage-root #how-it-works .how-field > span { display: inline-block; }

/* Step 1: add the photo, fill in the page, publish. */
.homepage-root #how-it-works .how-cover {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / .8;
  margin-top: 4.4cqw;
  overflow: hidden;
  border: 1px dashed #ffffff4d;
  border-radius: 4cqw;
  background: #ffffff12;
  color: #ffffff8c;
}
.homepage-root #how-it-works .how-cover > svg { width: 9cqw; height: 9cqw; }
.homepage-root #how-it-works .how-cover img { position: absolute; inset: 0; object-position: 50% 30%; }
.homepage-root #how-it-works .how-title {
  margin-top: 5cqw !important;
  font-size: 8.8cqw;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.015em;
  color: #fff;
}
.homepage-root #how-it-works .how-due { margin-top: 3.6cqw !important; font-size: 3.5cqw; font-weight: 500; line-height: 1.9; }
.homepage-root #how-it-works .how-due .how-field { display: inline-block; margin-left: 1cqw; padding: .7cqw 2.8cqw; }
.homepage-root #how-it-works .how-message {
  margin-top: 3.4cqw !important;
  padding: 4cqw 4.4cqw;
  border: 1px dashed #ffffff4d;
  border-radius: 2.8cqw;
  background: #ffffff17;
  font-size: 3.5cqw;
  font-weight: 400;
  line-height: 1.5;
}

/* Step 2: the link goes out, and their people arrive in the media grid. */
.homepage-root #how-it-works .how-invite-head { display: flex; align-items: center; gap: 3.4cqw; margin-top: 4.4cqw; }
.homepage-root #how-it-works .how-invite-head img { width: 15cqw; height: 15cqw; border-radius: 3cqw; flex: none; }
.homepage-root #how-it-works .how-invite-head p { font-size: 5.3cqw; font-weight: 600; line-height: 1.2; color: #fff; }
.homepage-root #how-it-works .how-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4.4cqw;
  padding: 1.5cqw 1.5cqw 1.5cqw 3.4cqw;
  border: 1px solid #ffffff2e;
  border-radius: 3cqw;
  background: #ffffff17;
  font-size: 3.2cqw;
}
.homepage-root #how-it-works .how-link-action {
  position: relative;
  display: grid;
  padding: 1.8cqw 3.4cqw;
  border-radius: 2.2cqw;
  background: #fff;
  color: #1b1838;
  font-weight: 500;
}
.homepage-root #how-it-works .how-link-action span { grid-area: 1 / 1; text-align: center; }
.homepage-root #how-it-works .how-link-action span:first-child { opacity: 0; }
.homepage-root #how-it-works .how-media-label {
  margin-top: 5cqw !important;
  font-size: 3.3cqw;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}
.homepage-root #how-it-works .how-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2cqw;
  margin-top: 2.8cqw !important;
}
.homepage-root #how-it-works .how-tile {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 2.6cqw;
  background: #ffffff17 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' fill-opacity='.22'%3E%3Ccircle cx='12' cy='9' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z'/%3E%3C/svg%3E") center / 56% no-repeat;
}
.homepage-root #how-it-works .how-tile--add {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1cqw;
  border: 1px dashed #ffffff59;
  background: #ffffff0f;
  font-size: 2.7cqw;
  font-weight: 500;
  color: #fff;
}
.homepage-root #how-it-works .how-tile--add svg { width: 6cqw; height: 6cqw; }

.homepage-root #how-it-works .how-record {
  position: absolute;
  left: 6cqw;
  right: 6cqw;
  bottom: 9cqw;
  padding: 3.6cqw 0;
  border-radius: 2.6cqw;
  background: linear-gradient(135deg, #c5dcff, #dbcaff);
  box-shadow: inset 0 1px 0 #ffffff80, 0 2cqw 6cqw #05081280;
  color: #172033;
  font-size: 4cqw;
  font-weight: 500;
  text-align: center;
}

/* Step 3: the finished video plays. */
.homepage-root #how-it-works .how-screen--watch { padding: 0; background: #0b0f1a; color: #fff; }
.homepage-root #how-it-works .how-screen--watch video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* One grade for the video and the stills cut from it, so the faces stay warm and match. */
.homepage-root #how-it-works .how-screen--watch video,
.homepage-root #how-it-works .how-tile img { filter: saturate(1.32) contrast(1.1) brightness(1.05); }
.homepage-root #how-it-works .how-watch-caption {
  position: absolute;
  inset: auto 0 0;
  padding: 26cqw 6cqw 9cqw;
  background: linear-gradient(to top, #05080fd9, #05080f80 55%, transparent);
}
.homepage-root #how-it-works .how-watch-title { font-size: 6.2cqw; font-weight: 600; line-height: 1.2; }
.homepage-root #how-it-works .how-watch-from { margin-top: 1.4cqw !important; font-size: 3.7cqw; color: #ffffffcc; }
.homepage-root #how-it-works .how-watch-progress {
  display: block;
  height: 1cqw;
  margin-top: 4.4cqw;
  overflow: hidden;
  border-radius: 99px;
  background: #ffffff40;
}
.homepage-root #how-it-works .how-watch-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #fff;
  transform-origin: left;
}
.homepage-root #how-it-works .how-hearts { position: absolute; inset: 0; pointer-events: none; }
.homepage-root #how-it-works .how-heart {
  position: absolute;
  right: calc(7cqw + var(--i) * 4.5cqw);
  bottom: 44cqw;
  width: calc(6cqw + var(--i) * .6cqw);
  opacity: 0;
  color: #fda4af;
}
.homepage-root #how-it-works .how-heart:nth-child(even) { right: calc(5cqw + var(--i) * 2.5cqw); color: #fff; }
.homepage-root #how-it-works .how-heart svg { display: block; width: 100%; fill: currentColor; }

/* The tap: a soft dot that lands where a finger would. */
.homepage-root #how-it-works .how-cover::after,
.homepage-root #how-it-works .how-publish::after,
.homepage-root #how-it-works .how-link-action::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 13cqw;
  height: 13cqw;
  margin: -6.5cqw 0 0 -6.5cqw;
  border-radius: 50%;
  background: #ffffff73;
  box-shadow: 0 0 0 1px #ffffff59, 0 1cqw 3cqw #00000040;
  opacity: 0;
  pointer-events: none;
}

/* A small hello when the phone first comes into view: a buzz that settles. Runs once,
   because .is-playing is added once. */
@keyframes how-buzz {
  0%, 100% { transform: rotate(0); }
  12% { transform: rotate(-3.2deg) translateX(-2px); }
  28% { transform: rotate(3deg) translateX(2px); }
  44% { transform: rotate(-2.2deg) translateX(-1px); }
  60% { transform: rotate(1.6deg) translateX(1px); }
  76% { transform: rotate(-.8deg); }
  90% { transform: rotate(.3deg); }
}
@keyframes how-tap {
  0% { opacity: 0; transform: scale(.4); }
  30% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.7); }
}
@keyframes how-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes how-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes how-dot-live { from { background: #9ca3af; } to { background: #22c55e; } }
@keyframes how-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes how-rise { from { opacity: 0; transform: translateY(3cqw); } to { opacity: 1; transform: none; } }
@keyframes how-arrive { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes how-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes how-heart {
  0% { opacity: 0; transform: translateY(0) scale(.7); }
  20% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-62cqw) translateX(calc((var(--i) - 2) * 2.5cqw)) scale(1.1); }
}

/* Final states sit in the base rules. Motion runs only in the active screen, and waits
   (paused on its first frame) until the phone is in view. */
@media (prefers-reduced-motion: no-preference) {
  .homepage-root #how-it-works.is-playing .how-phone { animation: how-buzz .85s ease-in-out both; }
  .homepage-root #how-it-works .how-screen.active :is(.how-cover, .how-publish, .how-link-action)::after {
    animation: how-tap .75s ease-out .5s both;
    animation-play-state: var(--how-play);
  }
  .homepage-root #how-it-works .how-screen.active .how-publish::after { animation-delay: 4.9s; }
  .homepage-root #how-it-works .how-screen.active .how-cover img {
    animation: how-fade .6s ease .75s both;
    animation-play-state: var(--how-play);
  }
  .homepage-root #how-it-works .how-screen.active .how-title .how-field > span {
    animation: how-type .6s steps(9, jump-none) 1.7s both;
    animation-play-state: var(--how-play);
  }
  .homepage-root #how-it-works .how-screen.active .how-title .how-field ~ .how-field > span { animation-delay: 2.5s; animation-duration: .3s; animation-timing-function: steps(4, jump-none); }
  .homepage-root #how-it-works .how-screen.active .how-due {
    animation: how-rise .5s ease 3.1s both;
    animation-play-state: var(--how-play);
  }
  .homepage-root #how-it-works .how-screen.active .how-message {
    animation: how-rise .5s ease 3.7s both;
    animation-play-state: var(--how-play);
  }
  .homepage-root #how-it-works .how-screen--start.active .how-status i {
    animation: how-dot-live .3s ease 5.2s both;
    animation-play-state: var(--how-play);
  }
  .homepage-root #how-it-works .how-screen--start.active .how-status span:first-of-type {
    animation: how-fade-out .25s ease 5.15s both;
    animation-play-state: var(--how-play);
  }
  .homepage-root #how-it-works .how-screen--start.active .how-status span:last-of-type {
    animation: how-fade .25s ease 5.25s both;
    animation-play-state: var(--how-play);
  }
  .homepage-root #how-it-works .how-screen.active .how-link-action span:first-child {
    animation: how-fade-out .25s ease .75s both;
    animation-play-state: var(--how-play);
  }
  .homepage-root #how-it-works .how-screen.active .how-link-action span:last-child {
    animation: how-fade .25s ease .85s both;
    animation-play-state: var(--how-play);
  }
  .homepage-root #how-it-works .how-screen.active .how-tile img {
    animation: how-arrive .5s ease calc(1.3s + var(--i) * .5s) both;
    animation-play-state: var(--how-play);
  }
  .homepage-root #how-it-works .how-screen.active .how-watch-caption p {
    animation: how-rise .6s ease .3s both;
    animation-play-state: var(--how-play);
  }
  .homepage-root #how-it-works .how-screen.active .how-watch-progress span {
    animation: how-progress 6.5s linear both;
    animation-play-state: var(--how-play);
  }
  .homepage-root #how-it-works .how-screen.active .how-heart {
    animation: how-heart 3.8s ease-out calc(.8s + var(--i) * .75s) infinite;
    animation-play-state: var(--how-play);
  }
}
@media (min-width: 1080px) and (prefers-reduced-motion: no-preference) {
  .homepage-root #how-it-works .how-stage {
    transform: translateY(var(--phone-drift, 0px)) rotate(var(--phone-turn, 0deg));
  }
}
@media (prefers-reduced-motion: reduce) {
  .homepage-root #how-it-works .step,
  .homepage-root #how-it-works .step-body,
  .homepage-root #how-it-works .how-screen { transition: none; }
}

@media (min-width: 768px) {
  .homepage-root #how-it-works .how-it-works-header { margin-bottom: 3.5rem; }
  .homepage-root #how-it-works .steps-container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
  }
  .homepage-root #how-it-works .how-copy { justify-self: end; }
  .homepage-root #how-it-works .how-stage { order: 0; }
  .homepage-root #how-it-works .how-phone { --how-w: 272px; }
  .homepage-root #how-it-works .step h4 { font-size: 1.375rem; }
  /* The button lines up with the step tiles, one step-gap below the last step. */
  .homepage-root #how-it-works .how-cta { margin-top: 1.5rem; padding-left: 0; text-align: left; }
  .homepage-root #how-it-works .how-cta .primary-btn { display: inline-block; width: auto; min-width: 13rem; text-align: center; }
}
@media (min-width: 1080px) {
  .homepage-root #how-it-works .steps-container { gap: 5rem; }
  .homepage-root #how-it-works .how-cta-note { text-wrap: nowrap; }
  .homepage-root #how-it-works .how-stage { justify-content: flex-start; }
  .homepage-root #how-it-works .how-phone { --how-w: 296px; }
}

@media (prefers-reduced-motion: no-preference) {
  .homepage-root .review-card.review-awaiting { opacity: 0; }
  .homepage-root .review-card.review-awaiting:focus-within { opacity: 1; }
}

/* Quiet glass surfaces and a single image plane for gift inspiration. */
.homepage-root .ideas-title {
  color: #030712;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 400;
  line-height: 1.12;
}
.homepage-root .ideas-grid { gap: 1.25rem; }
.homepage-root .idea-card {
  padding: 1.25rem;
  border-radius: 1.25rem;
  border: 1px solid #ffffffcc;
  background: linear-gradient(135deg, #ffffffb3, #ffffff66);
  box-shadow: inset 0 1px 0 #ffffff, 0 12px 32px #69658c0c;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  will-change: auto;
}
.homepage-root .idea-card-header { margin-bottom: 1rem; }
.homepage-root .idea-card-badge { background: none; color: #647084; padding: 0; font-size: .6875rem; }
.homepage-root .idea-card-arrow { background: #ffffff66; border: 1px solid #ffffffaa; color: #344359; }
.homepage-root .idea-card-image-container { margin-bottom: 1.25rem; }
.homepage-root .idea-card-image { border-radius: .75rem; }
.homepage-root .idea-card-title { font-size: 1.125rem; line-height: 1.35; }
.homepage-root .idea-card-description { font-size: .9375rem; line-height: 1.6; }
.homepage-root .idea-card-featured { background-color: #182132; }
.homepage-root .idea-card-featured .idea-card-badge { color: #f1f5fa; }
.homepage-root .idea-card:focus-visible { outline: 2px solid #45678f; outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .homepage-root .idea-card.review-awaiting { opacity: 0; }
  .homepage-root .idea-card.review-awaiting:focus { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .homepage-root .idea-card { transition: none; }
  .homepage-root .idea-card:hover { transform: none; }
}

.homepage-root .tears-metric {
  padding: 1.25rem 1.5rem;
  border: 1px solid #e1edff24;
  border-radius: var(--reaction-card-radius);
  background: linear-gradient(135deg, #242c40, #181d2d 65%, #151b28);
  box-shadow: inset 0 1px 0 #ffffff16, 0 0 36px #b1d1ff0a;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@media (max-width: 767px) {
  .homepage-root .tears-metric { padding: 1rem; gap: 1rem; }
  .homepage-root .tears-metric .stat-number { font-size: 3rem; }
}

/* A fine glass rim on hero videos; keep the footage crisp. */
.homepage-root .hero .grid-item {
  box-shadow: 0 8px 24px #00000018;
}
.homepage-root .hero .grid-item::after {
  border: 1px solid #ffffff26;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 #ffffff24;
  background: linear-gradient(135deg, #ffffff08, transparent 42%), #00000040;
}
.homepage-root .hero .play-overlay {
  background: #ffffff18;
  border: 1px solid #ffffff50;
  box-shadow: inset 0 1px 0 #ffffff24, 0 4px 16px #00000020;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.homepage-root .hero .play-overlay:hover { background: #ffffff2b; }

/* Image-tinted glass shells, inspired by the thicker OpenArt cards. */
.homepage-root .hero .grid-item {
  --tile-caption-height: 5.5rem;
  padding: 5px;
  border: 1px solid #ffffff30;
  border-radius: 1.1rem;
  background: #ffffff12;
  isolation: isolate;
  box-shadow: inset 0 1px 0 #ffffff40, 0 8px 24px #00000020;
}
.homepage-root .hero .grid-item::before {
  content: '';
  position: absolute;
  inset: -24px;
  z-index: -1;
  background-image: var(--tile-image);
  background-position: center;
  background-size: cover;
  filter: blur(24px) saturate(.7);
  opacity: .48;
  pointer-events: none;
}
.homepage-root .hero .grid-item::after {
  background: linear-gradient(135deg, #ffffff16, transparent 45%, #ffffff08);
  border: 0;
  box-shadow: inset 0 1px 0 #ffffff35;
}
.homepage-root .hero .thumbnail-container {
  height: calc(100% - var(--tile-caption-height));
  border-radius: .8rem;
  overflow: hidden;
}
.homepage-root .hero .grid-item-content {
  top: auto;
  height: var(--tile-caption-height);
  padding: .7rem 1rem;
  justify-content: center;
  gap: .25rem;
}
.homepage-root .hero .grid-item-title { font-size: 1rem; line-height: 1.2; }
.homepage-root .hero .grid-item-subtitle { font-size: .75rem; line-height: 1.3; opacity: .8; }
@media (min-width: 1080px) {
  .homepage-root .hero .grid-item-title { font-size: 1.125rem; }
  .homepage-root .hero .grid-item-subtitle { font-size: .875rem; }
}

/* Pricing uses the same airy glass and type as the light feature sections. */
.homepage-root .homepage-pricing {
  background: radial-gradient(ellipse at 15% 65%, #dceaff99, transparent 55%),
    radial-gradient(ellipse at 52% 70%, #e7def888, transparent 48%),
    radial-gradient(ellipse at 90% 75%, #def3eb88, transparent 50%), #f8fafc;
}
.homepage-root .homepage-pricing h3 {
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 400;
  line-height: 1.12;
  color: #030712;
}
.homepage-root .homepage-pricing-lead,
.homepage-root .homepage-pricing-copy { color: #374151; }
.homepage-root .homepage-pricing-card {
  border-radius: 1.25rem;
  border: 1px solid #ffffffdd;
  background: linear-gradient(135deg, #ffffffb3, #ffffff55);
  box-shadow: inset 0 1px 0 #ffffff, 0 12px 32px #566a9310;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.homepage-root .homepage-pricing-card--featured {
  /* Plain white and a deeper shadow: it stands out by its book art and size, not a tint. */
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 20px 44px rgba(15, 23, 42, 0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.homepage-root .homepage-pricing-badge {
  /* Brand yellow, the same "Best Value!" badge as /pricing/ and the package modal. */
  background: #ffd867;
  border: 0;
  color: #000000;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  text-transform: none;
  letter-spacing: 0;
}
.homepage-root .homepage-pricing-save {
  /* Soft mint glass, in the pricing cards' pastel family (was a dark forest green). */
  background: linear-gradient(135deg, #e6f7ef, #ccecdf);
  border: 1px solid #ffffffcc;
  color: #1d6b55;
  box-shadow: inset 0 1px 0 #ffffff, 0 3px 10px #1d6b5514;
  text-transform: none;
  letter-spacing: 0;
}
.homepage-root .homepage-pricing-name { color: #111827; font-size: 1.125rem; font-weight: 600; }
.homepage-root .homepage-pricing-amount { color: #111827; letter-spacing: -.01em; }
.homepage-root .homepage-pricing-was,
.homepage-root .homepage-pricing-period { color: #657083; }
.homepage-root .homepage-pricing-button { border-radius: .75rem; }
.homepage-root .homepage-pricing-button:not(.homepage-pricing-button--primary) {
  background: #ffffff66;
  border-color: #cbd5e180;
  box-shadow: inset 0 1px 0 #ffffff;
}
.homepage-root .homepage-pricing-button:not(.homepage-pricing-button--primary):hover { background: #ffffffbb; }
.homepage-root .homepage-pricing-button:focus-visible { outline: 2px solid #45678f; outline-offset: 4px; }

/* Tinted dark glass for the occasion collection. */
.homepage-root .occasion-card {
  --occasion-tint: 170, 195, 238;
  background: linear-gradient(145deg, rgba(var(--occasion-tint), .16), rgba(255,255,255,.035));
  border: 1px solid rgba(var(--occasion-tint), .25);
  border-radius: 1.25rem;
  box-shadow: inset 0 1px 0 #ffffff20, 0 12px 30px #00000012;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  will-change: auto;
}
.homepage-root .occasion-card:nth-child(3n + 2) { --occasion-tint: 213, 184, 239; }
.homepage-root .occasion-card:nth-child(3n) { --occasion-tint: 161, 222, 201; }
.homepage-root .occasion-card::before { background: linear-gradient(145deg, #ffffff08, transparent 45%); }
.homepage-root .occasion-card h4 { color: #f4f6fb; }
.homepage-root .occasion-description { color: #bec9dc; line-height: 1.55; }
.homepage-root .occasion-card:hover { border-color: rgba(var(--occasion-tint), .5); }
.homepage-root .occasion-card:focus-visible { outline: 2px solid #c5dcff; outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .homepage-root .occasion-card.review-awaiting { opacity: 0; }
  .homepage-root .occasion-card.review-awaiting:focus { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .homepage-root .occasion-card, .homepage-root .occasion-icon { transition: none; }
  .homepage-root .occasion-card:hover, .homepage-root .occasion-card:hover .occasion-icon { transform: none; }
}

.homepage-root #how-it-works .step {
  opacity: .4;
  transition: opacity .25s ease;
}
.homepage-root #how-it-works .step:is(.active, :hover, :focus-within) { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .homepage-root #how-it-works .step { transition: none; }
}

.homepage-root .work-promo-title { font-weight: 400; }
.homepage-root .work-promo-eyebrow {
  color: #645384;
  font-size: 0.8125rem;
  font-weight: 600;
  background: linear-gradient(115deg, #e4f0ffb3, #eee5fab3 55%, #e5f5ef99);
  border: 1px solid #ffffffdd;
  box-shadow: inset 0 1px 0 #ffffff, 0 3px 16px #7565a514, 0 0 0 1px #dcd8ed66;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: .5rem 1rem;
}

.homepage-root .tears-standalone { padding-top: 3.75rem; padding-bottom: 3.75rem; }
@media (min-width: 768px) {
  .homepage-root .tears-standalone { padding-top: 7rem; padding-bottom: 7rem; }
}

/* Float the proof point above the video, balanced by the tissue box below. */
.homepage-root .tears-image-wrapper .tears-metric {
  position: absolute;
  top: -2rem;
  left: -1.25rem;
  right: auto;
  z-index: 5;
  margin: 0;
  padding: 1.15rem 1.4rem;
  background: linear-gradient(135deg, #384666d9, #39334dc4);
  border-color: #d5dfff40;
  gap: .85rem;
  box-shadow: inset 0 1px 0 #ffffff26, 0 12px 32px #00000026;
}
.homepage-root .tears-image-wrapper .stat-number { font-size: 3.4rem; }
.homepage-root .tears-image-wrapper .stat-description { font-size: .875rem; }
.homepage-root .tears-info { align-self: center; }
@media (max-width: 767px) {
  .homepage-root .tears-image-wrapper .tears-metric { left: .5rem; right: auto; top: -1.5rem; padding: .75rem 1rem; }
  .homepage-root .tears-image-wrapper .stat-number { font-size: 2.5rem; }
  .homepage-root .tears-image-wrapper .stat-description { font-size: .75rem; }
}

/* One reading alignment for mobile homepage sections. */
@media (max-width: 767px) {
  .homepage-root :is(
    .hero-content, .hero-text, .reviews-header, .intro-section,
    .how-it-works-header, .video-book-heading, .video-book-text,
    .tears-info, .advanced-editor-heading, .homepage-pricing-inner,
    .keepsakes-text, .faq-left, .occasions-content h3,
    .work-promo-inner, .ideas-title, .ideas-subtitle, .footer-cta-content
  ) {
    text-align: left;
  }

  .homepage-root :is(.intro-lead, .work-promo-title, .work-promo-copy) {
    margin-left: 0;
  }

  .homepage-root :is(.video-book-ctas, .keepsakes-buttons, .tears-cta) {
    justify-content: flex-start;
  }
}

/* Shared marketing and account primary buttons: a soft glass highlight over Tribute red.
   Use explicit button classes to keep social, secondary, and editor controls separate.
   Inset edges keep the existing button dimensions unchanged. */
html body :is(
  .primary-btn,
  .nav-button,
  .homepage-pricing-button--primary,
  .pricing-card-button,
  .occasion-btn-primary,
  .compare-btn-primary,
  .packages-compared-closing-cta,
  .footer-cta-button,
  .account-page .account-btn--primary,
  .help-page .help-btn--primary,
  .qvc-cta-button,
  .tfw-btn,
  .work-promo-btn,
  .manage-tabbar-cta
) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, var(--color-primary-light), var(--color-primary));
  color: #fff;
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(70, 10, 4, 0.2),
    0 2px 4px rgba(30, 10, 8, 0.18);
}

html body :is(
  .primary-btn,
  .nav-button,
  .homepage-pricing-button--primary,
  .pricing-card-button,
  .occasion-btn-primary,
  .compare-btn-primary,
  .packages-compared-closing-cta,
  .footer-cta-button,
  .account-page .account-btn--primary,
  .help-page .help-btn--primary,
  .qvc-cta-button,
  .tfw-btn,
  .work-promo-btn,
  .manage-tabbar-cta
):hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, var(--color-primary), var(--color-primary-hover));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.24),
    0 3px 8px rgba(30, 10, 8, 0.22);
}

html body :is(
  .primary-btn,
  .nav-button,
  .homepage-pricing-button--primary,
  .pricing-card-button,
  .occasion-btn-primary,
  .compare-btn-primary,
  .packages-compared-closing-cta,
  .footer-cta-button,
  .account-page .account-btn--primary,
  .help-page .help-btn--primary,
  .qvc-cta-button,
  .tfw-btn,
  .work-promo-btn,
  .manage-tabbar-cta
) {
  /* The outline's resting color is the button red, not its white text color. With `transition: all`,
     focus would otherwise animate the ring from white to red. */
  outline-color: var(--color-primary, #b51d1d);
}

html body :is(
  .primary-btn,
  .nav-button,
  .homepage-pricing-button--primary,
  .pricing-card-button,
  .occasion-btn-primary,
  .compare-btn-primary,
  .packages-compared-closing-cta,
  .footer-cta-button,
  .account-page .account-btn--primary,
  .help-page .help-btn--primary,
  .qvc-cta-button,
  .tfw-btn,
  .work-promo-btn,
  .manage-tabbar-cta
):is(:focus-visible, :active) {
  /* The ring matches the button: its own red, with a soft red halo (white read as a glitch on light pages). */
  outline: 2px solid var(--color-primary, #b51d1d);
  outline-offset: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    0 0 0 6px rgba(181, 29, 29, 0.18);
}

html body :is(
  .primary-btn,
  .nav-button,
  .homepage-pricing-button--primary,
  .pricing-card-button,
  .occasion-btn-primary,
  .compare-btn-primary,
  .packages-compared-closing-cta,
  .footer-cta-button,
  .account-page .account-btn--primary,
  .help-page .help-btn--primary,
  .qvc-cta-button,
  .tfw-btn,
  .work-promo-btn,
  .manage-tabbar-cta
):active {
  transform: translateY(0);
}

/* ---------- CRO audit (Oct 2026): cost and payment beside the actions ---------- */
.hero-pricing-note {
  margin: 1rem 0 0;
  color: #9ca3af;
  font-size: 0.875rem;
  line-height: 1.5;
}
.hero-pricing-link {
  color: #ffffff;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.hero-pricing-link:hover {
  color: #e5e7eb;
}
.reviews-cta {
  flex-direction: column;
  align-items: center;
}
.reviews-cta-proof {
  margin: 0;
  color: #475569;
  font-size: 0.875rem;
  font-weight: 500;
}
.stat-source {
  margin-top: -1rem;
  margin-bottom: 1.25rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
}
.homepage-pricing-tiers {
  list-style: none;
  margin: -0.5rem 0 0.75rem;
  padding: 0;
  border-top: 1px solid #e2e8f0;
}
.homepage-pricing-tiers li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
  font-size: 0.9375rem;
}
.homepage-pricing-tiers li span:last-child {
  font-weight: 500;
  color: #0f172a;
}
/* The recommended plan sits in the middle and stands out, as on the pricing page. */
@media (min-width: 768px) {
  .homepage-root .homepage-pricing-card--featured {
    transform: scale(1.06);
    z-index: 5;
  }
}

/* Plan art: the Video Book on the bundle, the gold service bell on Concierge. */
.homepage-pricing-book {
  position: relative;
  isolation: isolate;
  width: 82%;
  max-width: 300px;
  margin: 0 auto 1rem;
}
.homepage-pricing-book-cover {
  display: block;
  width: 90%;
  height: auto;
}
.homepage-pricing-book-screen {
  position: absolute;
  z-index: -1;
  top: 9%;
  left: 49%;
  width: 34%;
  height: auto;
  transform: rotate(4deg);
  border-radius: 0.5rem;
  object-fit: cover;
}
.homepage-pricing-bell {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  pointer-events: none;
}
.homepage-pricing-bell img {
  display: block;
  width: auto;
  height: 88px;
  /* the bell's shadow and sparkle sit on its right; nudge it to look centered */
  transform: translateX(4.5%);
}
/* Concierge's editor tasks: checked rows, ruled like DIY's price rows beside it. */
.homepage-pricing-checks {
  list-style: none;
  margin: -0.5rem 0 1.5rem;
  padding: 0;
  border-top: 1px solid #e2e8f0;
}
.homepage-pricing-checks li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.625rem;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.homepage-pricing-checks li::before {
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 0.8rem;
  width: 0.875rem;
  height: 0.5rem;
  border-left: 2px solid #1d6b55;
  border-bottom: 2px solid #1d6b55;
  transform: rotate(-45deg);
}
/* Says what the DIY rows are: the price follows the finished video's length. */
.homepage-pricing-tiers-title {
  margin: -0.5rem 0 0.5rem;
  color: #0f172a;
  font-size: 0.875rem;
  font-weight: 500;
}
.homepage-pricing-tiers-title + .homepage-pricing-tiers {
  margin-top: 0;
}


/* ==========================================================================
   Homepage hero, left column: the Remento-style stack (Oct 2026).
   Headline, lede, two buttons side by side, four check lines, a trust row.
   ========================================================================== */

.homepage-root .hero-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin-bottom: 1.5rem;
}

.homepage-root .start-btn-wrapper {
  width: auto;
  flex: 0 0 auto;
}

.homepage-root .hero-buttons .primary-btn {
  width: auto;
  min-height: 3.25rem;
  padding: 0 1.75rem;
  display: inline-flex;
  align-items: center;
  font-size: 1.0625rem;
}

/* The second button: a quiet glass pill that scrolls to How it works */
.hero-secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0 1.5rem;
  border-radius: 0.5rem;
  /* A plain text button: no outline and no fill. */
  border: 0;
  background: none;
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  opacity: .9;
  transition: opacity var(--transition-fast);
}
.hero-secondary-btn svg { transition: transform var(--transition-fast); }

.hero-secondary-btn:hover { opacity: 1; }
.hero-secondary-btn:hover svg { transform: translateY(3px); }

.hero-secondary-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.hero-checks {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.hero-checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: #d1d5db;
}

.hero-checks svg {
  flex: 0 0 auto;
  margin-top: 0.1rem;
  color: #86efac;
}

.hero-checks .hero-pricing-link {
  margin-left: 0.25rem;
}

@media (max-width: 479px) {
  .homepage-root .start-btn-wrapper,
  .homepage-root .hero-buttons .primary-btn,
  .hero-secondary-btn {
    width: 100%;
    justify-content: center;
  }

  .hero-trust__divider {
    display: none;
  }
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: #9ca3af;
}

.hero-trust__stars {
  color: #F5D76E;
  font-size: 1rem;
  letter-spacing: 0.08em;
}

.hero-trust__text strong {
  color: #fff;
  font-weight: 600;
}

.hero-trust__divider {
  width: 1px;
  height: 1rem;
  background: rgba(255, 255, 255, 0.25);
}

@media (min-width: 768px) {
  .homepage-root .subhead {
    margin-bottom: 2rem;
  }

  .homepage-root .hero-buttons {
    gap: 1rem;
    margin-bottom: 1.75rem;
  }

  .homepage-root .hero-buttons .primary-btn,
  .hero-secondary-btn {
    min-height: 3.5rem;
    padding: 0 2rem;
    font-size: 1.125rem;
  }

  .hero-checks li {
    font-size: 1rem;
  }
}

/* Keep the headline compact on phones and tablets. */
.homepage-root #hero-title {
  font-size: min(2.125rem, var(--hero-line-fit, 2.125rem));
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .homepage-root #hero-title {
    font-size: min(3.125rem, var(--hero-line-fit, 3.125rem));
    line-height: 1.15;
    margin-bottom: 1.5rem;
  }
}

@media (min-width: 768px) {
  .homepage-root .hero {
    /* Let the copy set the minimum space it needs below the navigation. */
    height: auto;
    padding-bottom: 0;
  }

  .homepage-root .hero-content {
    margin-top: 0;
    padding-block: 1.5rem;
  }

  .homepage-root .hero .grid-container {
    /* The scrolling tiles fill the hero without making it taller. */
    contain: size;
    align-self: stretch;
    height: auto;
  }
}

/* Phones: the scrolling video tiles sit between the intro and the Start button, so faces come
   before the ask. The tiles live outside the copy block in the markup, so on phones the two
   copy wrappers step aside (display: contents) and every piece is ordered in the hero itself. */
@media (max-width: 767px) {
  .homepage-root .hero { gap: 0; }
  .homepage-root .hero .hero-content,
  .homepage-root .hero .initial-content { display: contents; }
  .homepage-root .hero .initial-content > * { order: 5; width: 100%; padding-inline: 1.5rem; }
  .homepage-root .hero .initial-content > .section-eyebrow { order: 1; margin-top: 1.25rem; }
  .homepage-root .hero .initial-content > #hero-title { order: 2; }
  .homepage-root .hero .initial-content > .subhead { order: 3; margin-bottom: 1rem; }
  .homepage-root .hero .grid-container { order: 4; margin-bottom: 1.5rem; }
  /* The first tile lines up with the copy's left margin. The space is inside the scroller,
     so once the row moves the tiles run to the screen edge. */
  .homepage-root .hero .grid-scroll { padding-inline: 1.5rem; scroll-padding-inline: 1.5rem; }
  .homepage-root .hero .initial-content > .hero-checks { order: 6; }
  .homepage-root .hero .initial-content > .hero-trust { order: 7; }
}

/* The hero's top padding (8.5rem) clears the navigation, so the copy was centered in the
   space below it and sat low. The navigation is see-through over the hero, so on wide
   windows center the copy in the whole hero instead. A negative top margin moves a centered
   flex item by half its size, so a 7.75rem margin lifts the copy by half that, which is the measured offset.
   Shorter windows get less lift, so the copy keeps clear of the navigation. */
@media (min-width: 1280px) {
  .homepage-root .hero-content {
    margin-top: calc(-1 * clamp(0px, 100vh - 46.25rem, 7.75rem));
  }
}

@media (min-width: 1024px) {
  .homepage-root .hero-content .initial-content {
    container-type: inline-size;
  }

  .homepage-root #hero-title {
    /* The control has the longest accent line; variants have their own fit limit. */
    font-size: min(4rem, calc(var(--hero-line-fit, max(3rem, 8.15cqi)) + 0.25rem));
    /* Borrow part of the 6rem gap before the video grid. */
    width: calc(100% + 4rem);
    max-width: none;
  }

  .homepage-root .hero-title-gradient {
    display: block;
    width: fit-content;
  }
}

/* Use one display size for section headings across the homepage. */
.homepage-root .intro-copy h2,
.homepage-root .how-it-works-header h3,
.homepage-root .reviews-header h2,
.homepage-root #tears-heading,
.homepage-root .video-book-heading,
.homepage-root .faq-left h3,
.homepage-root .occasions-section .occasions-content > h3,
.homepage-root .work-promo-title,
.homepage-root .keepsakes-text > h3,
.homepage-root .ideas-title {
  font-size: 2.125rem;
  line-height: 1.15;
}

@media (min-width: 768px) {
  .homepage-root .intro-copy h2,
  .homepage-root .how-it-works-header h3,
  .homepage-root .reviews-header h2,
  .homepage-root #tears-heading,
  .homepage-root .video-book-heading,
  .homepage-root .faq-left h3,
  .homepage-root .occasions-section .occasions-content > h3,
  .homepage-root .work-promo-title,
  .homepage-root .keepsakes-text > h3,
  .homepage-root .ideas-title {
    font-size: 3.125rem;
    line-height: 1.15;
    white-space: normal;
  }
}


/* One eyebrow for every section title on the homepage. Red on light sections, periwinkle
   on dark ones; it inherits the heading's alignment from the container. */
.homepage-root .section-eyebrow {
  margin: 0 0 0.75rem;
  font-family: 'Roboto Flex', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--color-primary);
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  display: block;
}

.homepage-root .section-eyebrow--on-dark {
  color: #b9c7e9;
}

/* Match each heading's alignment */
.homepage-root .reviews-header .section-eyebrow { text-align: right; }
.homepage-root .how-it-works-header .section-eyebrow,
.homepage-root .homepage-pricing .section-eyebrow,
.homepage-root .occasions-content > .section-eyebrow,
.homepage-root .work-promo .section-eyebrow,
.homepage-root .keepsakes-text > .section-eyebrow,
.homepage-root .ideas-content > .section-eyebrow { text-align: center; }


/* ==========================================================================
   Reassurance under a Start button (includes/cta_reassurance.html): three short
   true claims, each with its icon in a small tinted disc, so nobody has to wonder
   what clicking commits them to. Always its own full-width row under the button.
   ========================================================================== */
.cta-reassurance {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100%;
  width: 100%;
  gap: 0.5rem 1.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-family: 'Roboto Flex', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  color: #6b7280;
  text-align: left;
}

.cta-reassurance li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.cta-reassurance svg {
  flex: 0 0 auto;
  box-sizing: content-box;
  width: 14px;
  height: 14px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}

.cta-reassurance--center {
  justify-content: center;
}

.cta-reassurance--on-dark {
  color: #b3bccb;
}

.cta-reassurance--on-dark svg {
  background: rgba(134, 239, 172, 0.16);
  color: #86efac;
}

/* Button rows that lay out as a flex row must let the reassurance wrap under them */
.tears-cta,
.keepsakes-buttons,
.video-book-ctas,
.reviews-cta,
.how-it-works-cta,
.occasion-videos-cta,
.footer-cta-content {
  flex-wrap: wrap;
}

/* Inside the pricing cards the row sits tight under the button and stacks */
.homepage-pricing-card .cta-reassurance,
.pricing-card .cta-reassurance {
  flex-direction: column;
  align-items: flex-start;
  width: auto;
  margin: 0.875rem auto 0;
  gap: 0.4rem;
  font-size: 0.8125rem;
}

.footer-cta-content .cta-reassurance {
  margin: 1rem auto 1.5rem;
  justify-content: center;
}

/* Narrow text columns stack the row so it never breaks two-and-one */
.tears-cta .cta-reassurance,
.occasion-alt-content .cta-reassurance,
.occasion-group-gift .cta-reassurance,
.packages-compared-closing-copy .cta-reassurance {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}