: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: 'Fraunces', 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;
  /* Sized so the longest experiment line fits on one line in Fraunces (about 10.9em wide). */
  --hero-line-fit: 9cqi;
}

.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: 'Fraunces', 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: 'Fraunces', 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;
  /* More space under the logos than over the label: the label takes the top of the strip,
     so equal padding left the logos low in it. */
  padding: .875rem 1.5rem 1.75rem;
  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;
}

/* A link inside running marketing copy: the text's own color, with a quiet underline. */
.copy-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.copy-link:hover { text-decoration-thickness: 2px; }

/* One line under the occasion cards that hands off to Tribute for Work below. */
.homepage-root .occasions-bridge {
  margin: 2.5rem auto 0;
  padding: 0 1.5rem;
  max-width: 36rem;
  text-align: center;
  font-family: 'Fraunces', serif;
  font-size: 1.375rem;
  font-weight: 300;
  line-height: 1.35;
  color: #e2e8f0;
  text-wrap: balance;
}
@media (min-width: 768px) {
  .homepage-root .occasions-bridge { margin-top: 3.5rem; font-size: 1.625rem; }
}

/* Occasions runs straight into the Tribute for Work arch. Each painted its own copy of the
   colored glow field, so the two met at different tints. Occasions now fades to the plain
   dark at its foot, and the arch is that same plain dark, so they read as one surface.
   The bridge line sits close to the arch, with no empty band under it. */
.homepage-root .occasions-section { padding-bottom: 1.25rem !important; }
.homepage-root .occasions-section::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 16rem;
  background: linear-gradient(to bottom, transparent, var(--occasions-work-bg-color));
  pointer-events: none;
}
.homepage-root .work-promo-arch::before { background-image: none; }
/* The section is white under the arch. A dark first few pixels stop a pale hairline from
   showing at the seam when the arch lands between device pixels. */
.homepage-root .work-promo {
  background: linear-gradient(to bottom, var(--occasions-work-bg-color) 0 4px, #fff 4px);
}
@media (min-width: 768px) {
  .homepage-root .occasions-section { padding-bottom: 2rem !important; }
}
/* Where no Tribute for Work arch follows, the section ends like any other. */
.homepage-root .occasions-section.occasions-section--standalone { padding-bottom: 3rem !important; }
@media (min-width: 768px) {
  .homepage-root .occasions-section.occasions-section--standalone { padding-bottom: 6rem !important; }
}

.intro-section {
  /* The same cool light wash as How It Works, so the page has one family of light sections.
     The photos bring the warmth. */
  background-color: #f2f3ff;
  background-image:
    radial-gradient(ellipse at 12% 15%, #ffffffd9 0%, transparent 60%),
    radial-gradient(ellipse at 85% 30%, rgba(210, 179, 239, 0.3), transparent 60%),
    radial-gradient(ellipse at 70% 95%, rgba(167, 190, 246, 0.34), transparent 60%);
  padding: clamp(3.5rem, 7vw, 7rem) clamp(1.5rem, 5vw, 5rem);
  color: #0f172a;
}

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

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

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

.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='%231c2233' 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(#1c2233, #1c2233) center / 100% calc(100% - 2 * var(--film-rail)) no-repeat;
  transform: rotate(-2deg);
  box-shadow: 0 2px 4px #0f172a29, 0 10px 18px -5px #0f172a42;
}

.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: 'Fraunces', 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: 'Fraunces', 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: 'Fraunces', 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: 'Fraunces', 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: 'Fraunces', 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: 'Fraunces';
  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: 'Fraunces', 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: 6rem 3rem !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: 0.9375rem;
  }
}

/* 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: 'Fraunces', serif;
  font-size: 1.75rem;
  /* Match .reviews-header h3 / other Fraunces 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: 'Fraunces', 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: 'Fraunces', 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: 'Fraunces', 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: 'Fraunces', 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: 'Fraunces', 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: 'Fraunces', 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__tissue { animation: tissue-breathe 6s ease-in-out infinite; }
}
/* The tissue box is two layers of one size: the box, which stands still, and the tissue. */
.homepage-root .tissue-box__box,
.homepage-root .tissue-box__tissue {
  display: block;
  width: 100%;
  height: auto;
}
.homepage-root .tissue-box__tissue {
  position: absolute;
  inset: 0;
  /* The slot in the box: the tissue grows from this line, so its foot stays in the slot. */
  transform-origin: 50% 37.8%;
}
@keyframes tears-grain {
  0%, 100% { background-position: 0 0; }
  25% { background-position: 37px 19px; }
  50% { background-position: -23px 53px; }
  75% { background-position: 61px -31px; }
}
/* The tissue rises a little out of the slot, leans, and settles again. */
@keyframes tissue-breathe {
  0%, 100% { transform: scaleY(1) rotate(0deg); }
  50% { transform: scaleY(1.1) rotate(2deg); }
}
@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; }
}

/* The number on the left; its meaning and its source stacked beside it, as one centered block. */
.homepage-root .tears-metric .stat-number { line-height: .9; }
.homepage-root .tears-metric .stat-text { display: grid; gap: .3rem; }
.homepage-root .tears-metric .stat-description { font-weight: 500; line-height: 1.35; color: #f1f5f9; }
.homepage-root .tears-metric .stat-source {
  margin: 0;
  font-size: .6875rem;
  line-height: 1.3;
  letter-spacing: .02em;
  color: #ffffff8c;
}
.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.9;
  /* Frame (.011) plus black bezel (.027). */
  padding: calc(var(--how-w) * .038);
  border-radius: calc(var(--how-w) * .15);
  /* A dark titanium band: one quiet sweep of light, a crisp bright rim outside and a hard
     dark line where it meets the glass. Thin and sharp, like the real frame. */
  background: linear-gradient(145deg, #85868c 0%, #3d3e44 16%, #25262a 50%, #404147 84%, #6f7076 100%);
  box-shadow:
    inset 0 0 0 1px #8a8b9180,
    inset 0 0 0 calc(var(--how-w) * .011) #33343980,
    inset 0 0 0 calc(var(--how-w) * .013) #000,
    0 1px 2px rgba(15, 23, 42, 0.3),
    0 calc(var(--how-w) * .06) calc(var(--how-w) * .1) calc(var(--how-w) * -.02) rgba(15, 23, 42, 0.28),
    0 calc(var(--how-w) * .16) calc(var(--how-w) * .22) calc(var(--how-w) * -.06) rgba(15, 23, 42, 0.3);
}
/* Side buttons: action, volume up and volume down on the left, power on the right. */
.homepage-root #how-it-works .how-btn {
  position: absolute;
  z-index: -1;
  width: calc(var(--how-w) * .012);
  border-radius: 1.5px;
  background: linear-gradient(to right, #17181b, #4a4b51 55%, #2a2b2f);
}
.homepage-root #how-it-works .how-btn--action { left: calc(var(--how-w) * -.007); top: 17.2%; height: 3.6%; }
.homepage-root #how-it-works .how-btn--up { left: calc(var(--how-w) * -.007); top: 24%; height: 6.6%; }
.homepage-root #how-it-works .how-btn--down { left: calc(var(--how-w) * -.007); top: 32.4%; height: 6.6%; }
.homepage-root #how-it-works .how-btn--power { right: calc(var(--how-w) * -.007); top: 27%; height: 10.5%; background: linear-gradient(to left, #17181b, #4a4b51 55%, #2a2b2f); }
.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) * .112);
  /* The black glass bezel around the display. */
  box-shadow: 0 0 0 calc(var(--how-w) * .027) #000;
  /* 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;
}
/* Dynamic Island, with the faint glint of the camera lens. */
.homepage-root #how-it-works .how-phone-screen::before {
  content: '';
  position: absolute;
  z-index: 5;
  top: 3cqw;
  left: 50%;
  width: 30cqw;
  height: 8.8cqw;
  margin-left: -15cqw;
  border-radius: 99px;
  background: radial-gradient(circle at 79% 50%, #1b2440 0, #0a0d18 1.1cqw, #000 1.5cqw);
}
/* The glass: a soft sheen from the top left and a hairline of light at the edge. */
.homepage-root #how-it-works .how-phone-screen::after {
  content: '';
  position: absolute;
  z-index: 6;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(125deg, #ffffff14 0%, #ffffff05 26%, transparent 42%);
  box-shadow: inset 0 0 0 1px #ffffff12;
  pointer-events: none;
}
/* iOS status bar and home indicator: small, but they are what makes a screen read as a phone. */
.homepage-root #how-it-works .how-statusbar {
  position: absolute;
  z-index: 5;
  top: 3cqw;
  left: 0;
  right: 0;
  height: 8.8cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7.4cqw 0 9.6cqw;
  color: #fff;
  font-size: 4.1cqw;
  font-weight: 600;
  letter-spacing: -.01em;
  pointer-events: none;
}
.homepage-root #how-it-works .how-statusbar-icons { display: flex; align-items: center; gap: 1.5cqw; }
.homepage-root #how-it-works .how-statusbar-icons svg { display: block; height: 3.2cqw; width: auto; }
.homepage-root #how-it-works .how-home {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 2.2cqw;
  width: 35cqw;
  height: 1.35cqw;
  margin-left: -17.5cqw;
  border-radius: 99px;
  background: #ffffffd9;
  pointer-events: none;
}
.homepage-root #how-it-works .how-screen {
  position: absolute;
  inset: 0;
  padding: 15.5cqw 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-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: #fff;
  box-shadow: 0 2cqw 6cqw #05081280;
  color: #1b1838;
  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-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 {
    /* A gentle rise and fall with the scroll. No tilt: a rotated phone loses its crisp edges. */
    transform: translateY(var(--phone-drift, 0px));
  }
}
@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: 4.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: .5rem 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; }

/* Dark glass for the occasion collection: one neutral color on every card. */
.homepage-root .occasion-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  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::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(255, 255, 255, .32); }
.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: 1rem 1.4rem 1rem 1.25rem;
  background: linear-gradient(135deg, #384666d9, #39334dc4);
  border-color: #d5dfff40;
  gap: 1rem;
  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; }
}

/* The 83.4% figure is a speech bubble, the same shape as on the occasion pages' video
   (.occasion-hero-bubble in occasion.css): lit from above, dark text, one square corner
   for the tail, and a slight lean. Its colors come from the tissue box beside it: the
   white of the tissue, shading to the pale blue of the box. */
.homepage-root .tears-image-wrapper .tears-metric {
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 1.5rem 1.5rem 1.5rem 0.375rem;
  background: linear-gradient(180deg, #ffffff 0%, #f1f8fd 55%, #dcedf8 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -0.1875rem 0.375rem rgba(86, 140, 184, 0.2),
    0 0.125rem 0.125rem rgba(0, 0, 0, 0.25),
    0 0.75rem 1.75rem rgba(0, 0, 0, 0.38);
  transform: rotate(-3deg);
}
.homepage-root .tears-image-wrapper .tears-metric .stat-number {
  color: #0b1f33;
  text-shadow: none;
}
.homepage-root .tears-image-wrapper .tears-metric .stat-description { color: #1c3247; }
.homepage-root .tears-image-wrapper .tears-metric .stat-source { color: #5b7389; }

/* 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 {
  /* Directly under the button, now that no list stands between them. */
  margin: 0.875rem 0 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;
}

.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 {
    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 {
    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; }
  /* The copy wrapper has no box here, so it cannot be the container the experiment headlines
     size against. Give them the same fit from the viewport: the text column is 100vw - 3rem. */
  .homepage-root[data-emotional-copy]:not([data-emotional-copy="control"]) .hero .initial-content {
    --hero-line-fit: calc((100vw - 3rem) * .09);
  }
  .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;
}

/* ==========================================================================
   Hero start form (v3/includes/hero_start_form.html): the three questions of
   /start/ on the page, on the homepage and the occasion pages. Both heroes are
   dark. The form shows one question at a time.
   ========================================================================== */

/* The form sits straight on the dark hero, with no card around it. */
.hero-start-form {
  width: 100%;
  max-width: 34rem;
  text-align: left;
}

.hero-start-form__free {
  margin: 0.75rem 0 0;
  color: #d1d5db;
  font-size: 0.9375rem;
}

/* Proof closes the form, under the button. */
.hero-start-form__proof {
  margin-top: 1.25rem;
}

/* Ad visits: the menu keeps the logo, Login or the account, and the Start button. */
.nav--focused .nav-items > .nav-dropdown:not(.nav-dropdown-user),
.nav--focused .nav-items > .nav-link:not(#login-link) {
  display: none;
}

.hero-start-form__step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Stepper: only the active step is in the flow, so the first paint already shows
   one question. The others lie on top, hidden. hero-start-form.js sets the height
   and adds .is-animated on the first move, so nothing animates on load. A step
   waits on the right, and leaves to the left. Without JavaScript the <noscript>
   style in the include stacks the steps. */
.hero-start-form__steps {
  position: relative;
}

.hero-start-form__step:not(.is-active) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateX(1.5rem);
}

.hero-start-form__step.is-before {
  transform: translateX(-1.5rem);
}

.hero-start-form.is-animated .hero-start-form__steps {
  transition: height 0.25s ease;
}

.hero-start-form.is-animated .hero-start-form__step {
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.hero-start-form.is-animated .hero-start-form__step.is-active {
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}

.hero-start-form__question {
  padding: 0;
  color: #fff;
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.25;
}

.hero-start-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  width: 100%;
}

/* 1rem text at least: iOS zooms the page on focus when a field's text is under 16px. */
.hero-start-form__input {
  flex: 1 1 12rem;
  min-width: 0;
  height: 3.5rem;
  padding: 0 1rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
  color-scheme: dark;
  font: inherit;
  font-size: 1.0625rem;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.hero-start-form__input::placeholder {
  color: #9ca3af;
}

.hero-start-form__input:hover {
  border-color: rgba(255, 255, 255, 0.4);
}

/* Focus is the same quiet state as the v3 account fields: a brighter border and a soft
   ring, with no offset outline. */
.hero-start-form__input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14);
  background-color: rgba(255, 255, 255, 0.12);
}

/* Validation, as on the start page: a short message under the field. Red is for this
   state only. */
.hero-start-form__error {
  margin: -0.375rem 0 0;
  color: #fca5a5;
  font-size: 0.875rem;
}

.hero-start-form__input[aria-invalid="true"] {
  border-color: #f17175;
}

.hero-start-form__input[aria-invalid="true"]:focus {
  border-color: #f17175;
  box-shadow: 0 0 0 3px rgba(241, 113, 117, 0.2);
}

/* The occasion and the date each have a button that looks like a field and opens a
   list or a calendar under it (hero-start-form.js). The native select and date field
   it stands in for stay in the form, out of sight, and hold the value. */
.hero-start-form .is-replaced {
  display: none;
}

.hero-start-form__picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: #9ca3af;
  text-align: left;
  cursor: pointer;
}

.hero-start-form__picker[hidden] {
  display: none;
}

.hero-start-form__picker.has-value {
  color: #fff;
}

.hero-start-form__picker svg {
  flex: 0 0 auto;
  color: #d1d5db;
}

.hero-start-form__picker [data-picker-label] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-start-form__picker[data-picker-trigger="occasion"] { anchor-name: --hero-start-occasion; }
.hero-start-form__picker[data-picker-trigger="date"] { anchor-name: --hero-start-date; }

/* The popover: a dark card in the top layer. By default the browser centers it on the
   screen, which is right for phones and for browsers without anchor positioning. Where
   anchor positioning works, on wider screens, it drops from its button. */
.hero-start-popover {
  max-width: calc(100vw - 2rem);
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1rem;
  background-color: #141925;
  color: #fff;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(-0.375rem);
  transition: opacity 0.16s ease, transform 0.16s ease, overlay 0.16s allow-discrete, display 0.16s allow-discrete;
}

.hero-start-popover:popover-open {
  opacity: 1;
  transform: none;
}

@starting-style {
  .hero-start-popover:popover-open {
    opacity: 0;
    transform: translateY(-0.375rem);
  }
}

.hero-start-popover::backdrop {
  background-color: rgba(3, 7, 18, 0.45);
}

@supports (anchor-name: --a) {
  @media (min-width: 480px) {
    .hero-start-popover {
      inset: auto;
      top: anchor(bottom);
      left: anchor(left);
      margin: 0.5rem 0 0;
      position-try-fallbacks: flip-block;
    }

    .hero-start-popover--occasion {
      position-anchor: --hero-start-occasion;
      min-width: anchor-size(width);
    }

    /* As wide as its field, like the occasion list. The days spread to fill it. */
    .hero-start-popover--date {
      position-anchor: --hero-start-date;
      min-width: anchor-size(width);
    }

    .hero-start-popover::backdrop {
      background-color: transparent;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-start-popover {
    transform: none;
    transition: none;
  }
}

/* The occasion list. */
.hero-start-popover--occasion {
  width: 18rem;
  max-height: min(22rem, 60vh);
  overflow-y: auto;
  padding: 0.5rem;
}

.hero-start-popover__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
}

.hero-start-popover__option:hover,
.hero-start-popover__option:focus-visible {
  outline: none;
  background-color: rgba(255, 255, 255, 0.1);
}

.hero-start-popover__option[aria-selected="true"] {
  background-color: rgba(255, 255, 255, 0.14);
  font-weight: 600;
}

.hero-start-popover__option[aria-selected="true"]::after {
  content: '';
  width: 0.75rem;
  height: 0.375rem;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg) translateY(-2px);
}

.hero-start-popover__heading {
  margin: 0.5rem 0 0.25rem;
  padding: 0.5rem 0.75rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #9ca3af;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The calendar (Cally). White marks the chosen day, as white marks the chosen
   occasion. Days that cannot be chosen are faint. */
.hero-start-popover calendar-date {
  --color-accent: #fff;
  --color-text-on-accent: #030712;
  display: block;
  /* Fill the popover, so the days sit centered in it at any field width. */
  width: 100%;
  color: #fff;
}

.hero-start-popover calendar-date::part(header) {
  margin-bottom: 0.5rem;
}

.hero-start-popover calendar-date::part(heading) {
  font-size: 0.9375rem;
  font-weight: 600;
}

.hero-start-popover calendar-date::part(button) {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  color: #fff;
  cursor: pointer;
}

.hero-start-popover calendar-date::part(button):hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.hero-start-popover calendar-date::part(disabled) {
  opacity: 0.3;
  cursor: default;
}

/* The month's own heading repeats the one between the arrows. */
.hero-start-popover calendar-month::part(heading) {
  display: none;
}

.hero-start-popover calendar-month {
  display: block;
  width: 100%;
}

.hero-start-popover calendar-month::part(table) {
  width: 100%;
}

.hero-start-popover calendar-month::part(td) {
  text-align: center;
}

.hero-start-popover calendar-month::part(th) {
  padding-bottom: 0.25rem;
  color: #9ca3af;
  font-size: 0.75rem;
  font-weight: 500;
}

.hero-start-popover calendar-month::part(button) {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  color: #fff;
  font-size: 0.9375rem;
  cursor: pointer;
}

.hero-start-popover calendar-month::part(button):hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.hero-start-popover calendar-month::part(today) {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.hero-start-popover calendar-month::part(selected) {
  background-color: #fff;
  color: #030712;
  font-weight: 600;
}

.hero-start-popover calendar-month::part(disallowed),
.hero-start-popover calendar-month::part(disabled),
.hero-start-popover calendar-month::part(outside) {
  opacity: 0.3;
  cursor: default;
}

.hero-start-form .primary-btn {
  flex: 0 0 auto;
  width: auto;
  min-height: 3.5rem;
  padding: 0 1.75rem;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

/* The occasion select looks like the other fields, with its own arrow. */
.hero-start-form__select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 1.25rem;
  cursor: pointer;
}

/* The open list is drawn by the browser: give it readable colors on every system. */
.hero-start-form__select option,
.hero-start-form__select optgroup {
  background-color: #111827;
  color: #fff;
}

.hero-start-form__skip,
.hero-start-form__back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: #d1d5db;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
}

/* Centered under the date row, and close to it. */
.hero-start-form__skip {
  display: flex;
  width: fit-content;
  min-height: 2.5rem;
  margin: -0.5rem auto 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-start-form__skip:hover,
.hero-start-form__back:hover {
  color: #fff;
}

.hero-start-form__skip:focus-visible,
.hero-start-form__back:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* Where the visitor is, over the question: "Step 1 of 3". From the second step, Back
   comes in front of it. */
.hero-start-form__nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 1.5rem;
  margin-bottom: 0.5rem;
}

.hero-start-form__nav .hero-start-form__back {
  min-height: 1.5rem;
  font-size: 0.8125rem;
}

.hero-start-form__back:disabled {
  display: none;
}

.hero-start-form__count {
  color: #9ca3af;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* "No occasion yet? Buy it now, give it later": a plain line under the form, with the
   link in the hero's warm accent, so it reads as a second way in and not as a field. */
.hero-start-form__later {
  margin: 1rem 0 0;
  color: #d1d5db;
  font-size: 1rem;
}

.hero-start-form__later a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  /* The blue the headline's gradient starts on. */
  color: #93c5fd;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.hero-start-form__later a svg {
  transition: transform var(--transition-fast);
}

.hero-start-form__later a:hover svg {
  transform: translateX(3px);
}

.hero-start-form__later a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 0.25rem;
}

@media (max-width: 479px) {
  .hero-start-form__row .primary-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-start-form__step:not(.is-active),
  .hero-start-form__step.is-before {
    transform: none;
  }

  .hero-start-form.is-animated .hero-start-form__steps,
  .hero-start-form.is-animated .hero-start-form__step,
  .hero-start-form.is-animated .hero-start-form__step.is-active {
    transition: none;
  }
}

/* Phones, ad visits: the form comes before the video, so the first question is on the
   first screen. (The base order is set with the hero's phone layout above.) */
@media (max-width: 767px) {
  .homepage-root .hero--focused .initial-content > .hero-buttons { order: 4; }
  /* A term-matched hero has no eyebrow, so the headline takes its top space. */
  .homepage-root .hero .initial-content > #hero-title:first-child { margin-top: 1.25rem; }
}


/* ==========================================================================
   Hero feature video: ad visits see one video for the occasion the ad named,
   in place of the scrolling tiles. It opens in the video modal.
   ========================================================================== */

.hero-feature {
  position: relative;
  z-index: 5;
  width: 100%;
  padding-inline: 1.5rem;
}

/* The video is a rounded card, the same card as the Video Book photo: a thin light
   border and a deep shadow. The edges of two more cards show under it, each a little
   narrower and fainter, so it reads as the top one of many videos. */
.hero-feature__stack {
  position: relative;
  isolation: isolate;
  padding-bottom: 1.375rem;
}

.hero-feature__stack::before,
.hero-feature__stack::after {
  content: '';
  position: absolute;
  z-index: 0;
  height: 4rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.25rem;
}

.hero-feature__stack::before {
  right: 4.5%;
  bottom: 0.6875rem;
  left: 4.5%;
  background-color: #2a3142;
}

.hero-feature__stack::after {
  right: 9%;
  bottom: 0;
  left: 9%;
  z-index: -1;
  background-color: #1e2433;
}

.hero-feature__frame {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1.25rem;
  background-color: #141925;
  box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.5);
}

.hero-feature__video {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hero-feature__video img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.hero-feature__video:hover img {
  transform: scale(1.025);
}

/* The play button is frosted glass, not a black disc. */
.hero-feature__video .play-overlay {
  width: 76px;
  height: 76px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
}

.hero-feature__video:hover .play-overlay {
  background: rgba(255, 255, 255, 0.3);
}

.hero-feature__video:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -6px;
  border-radius: 1.25rem;
}

/* The title lies over the foot of the picture, on a dark wash that fades upward. */
.hero-feature__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 3.5rem 1.5rem 1.25rem;
  background: linear-gradient(
    to top,
    rgba(3, 7, 18, 0.82) 0%,
    rgba(3, 7, 18, 0.5) 50%,
    rgba(3, 7, 18, 0) 100%
  );
  color: #e5e7eb;
  font-size: 0.9375rem;
  pointer-events: none;
}

.hero-feature__caption strong {
  display: block;
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 600;
}

@media (max-width: 479px) {
  .hero-feature__caption {
    padding: 2.5rem 1rem 0.875rem;
    font-size: 0.875rem;
  }

  .hero-feature__caption strong {
    font-size: 0.9375rem;
  }
}

/* An ad-visit headline has two parts, matched to a term or not. Where the copy column is wide enough, each
   part is one line: "A Birthday Group Video Card" / "From Everyone Who Loves Them".
   The type scales with the column so the longest part still fits (6cqi fits 31
   characters of Fraunces). In a narrower column the type stops shrinking at 1.625rem,
   each part wraps, and the browser evens out its lines. */
.homepage-root .hero--focused #hero-title {
  text-wrap: balance;
}

.homepage-root .hero--focused #hero-title .hero-title-gradient {
  display: block;
}

@media (min-width: 768px) {
  /* One video needs less room than the scrolling tiles, so the copy takes more. */
  .homepage-root .hero--focused .hero-content {
    flex: 0 0 54%;
    max-width: 54%;
  }

  /* The standard hero keeps a wide gap before the scrolling tiles. One framed video
     sits closer to the copy, so it can be larger. */
  .homepage-root .hero.hero--focused {
    gap: 2.5rem;
  }

  .homepage-root .hero--focused .hero-content .initial-content {
    container-type: inline-size;
  }

  /* Every ad-visit headline takes this size, matched or not: the standard homepage
     size is too heavy beside one video. */
  .homepage-root .hero--focused #hero-title {
    width: 100%;
    font-size: clamp(1.625rem, 6cqi, 3.5rem);
  }

  @container (min-width: 27rem) {
    .homepage-root .hero--focused #hero-title {
      white-space: nowrap;
    }
  }
}

/* Ad visits: the hero is only as tall as its content, not a full screen. The space
   under the navigation (5.5rem tall) equals the space at the foot, so the copy and
   the video sit in the middle of what is left. */
@media (min-width: 768px) {
  .homepage-root .hero.hero--focused {
    height: auto;
    min-height: 0;
    padding-top: 7.5rem;
    padding-bottom: 2rem;
  }
}

/* Ad visits: the copy is not lifted toward the navigation. The standard hero lifts
   it to center against the tall video tiles, which are not here. */
@media (min-width: 1280px) {
  .homepage-root .hero--focused .hero-content {
    margin-top: 0;
  }
}

/* Phones: the video comes after the form, like the tiles it replaces. */
@media (max-width: 767px) {
  .homepage-root .hero .hero-feature { order: 5; margin-bottom: 1.5rem; }
}

/* The video fills its side of the hero. The hero already has side padding there. */
@media (min-width: 768px) {
  .hero-feature {
    flex: 1;
    align-self: center;
    padding-inline: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-feature__video img {
    transition: none;
  }
}

/* The Video Book version of the feature video, for ads that name the Video Book or a
   video card: the photo of the book open on a living room shelf, with the video
   playing in the book's own screen.

   The photo sits in a rounded card, with the video's title on the shelf in its lower
   left. It is shown a little larger than its box and cut to the book (.hero-photo is the
   window, .hero-photo__scene is the whole photo). */
@media (min-width: 768px) {
  .homepage-root .hero--focused.hero--book .hero-content {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

.hero-photo-card {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 1.25rem;
  background-color: #141925;
  box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.45);
}

.hero-photo {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

/* What the video is, and who it is from: dark text across the foot of the photo. A
   soft warm-white wash rises behind it and fades out, so the text reads on the wood
   grain and its shadows. */
.hero-photo-card__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 3rem 1.5rem 1.125rem;
  background: linear-gradient(
    to top,
    rgba(255, 250, 242, 0.82) 0%,
    rgba(255, 250, 242, 0.6) 40%,
    rgba(255, 250, 242, 0.22) 72%,
    rgba(255, 250, 242, 0) 100%
  );
  color: #1f2937;
  font-size: 0.9375rem;
  pointer-events: none;
}

.hero-photo-card__caption strong {
  display: block;
  color: #111827;
  font-size: 1.0625rem;
  font-weight: 600;
}

@media (max-width: 479px) {
  .hero-photo-card__caption {
    padding: 2.25rem 1rem 0.75rem;
    font-size: 0.875rem;
  }

  .hero-photo-card__caption strong {
    font-size: 0.9375rem;
  }
}

/* The whole photo, 130% of the window. The window shows it from 14% across and 20% down,
   which trims the wall above the books and the underside of the shelf. */
.hero-photo__scene {
  position: absolute;
  top: -29.1%;
  left: -18.2%;
  width: 130%;
  aspect-ratio: 1200 / 896;
}

.hero-photo__img {
  display: block;
  width: 100%;
  height: 100%;
}

/* The book's screen in the photo. Its corners are at (54.17%, 35.85%), (75.92%, 35.25%),
   (75.83%, 58.56%), and (54.08%, 56.62%) of the photo: the box around them, cut to
   that four-sided shape. The screen is seen almost straight on, so the picture needs
   no bending. */
.hero-photo__screen {
  position: absolute;
  top: 35.25%;
  left: 54.08%;
  width: 21.84%;
  height: 23.31%;
  background: #0b0d12;
  clip-path: polygon(0.4% 2.6%, 100% 0%, 99.6% 100%, 0% 91.7%);
}

.hero-photo__video,
.hero-photo__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The video is a little larger than the screen and cut by it. Some Tribute videos
   carry a thin black column at one edge, which would show as a dark line here. */
.hero-photo__video {
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
}

/* The band of sunlight that crosses the screen in the photo. */
.hero-photo__screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgba(255, 244, 222, 0) 58%, rgba(255, 244, 222, 0.16) 72%, rgba(255, 244, 222, 0) 88%);
  pointer-events: none;
}

.hero-photo__play {
  z-index: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hero-photo__play .play-overlay {
  width: 52px;
  height: 52px;
  transition: opacity var(--transition-base), background-color var(--transition-fast);
}

.hero-photo__play:hover .play-overlay {
  background: rgba(0, 0, 0, 0.8);
}

/* While the video plays, the button is still there to pause it, without its icon. */
.hero-photo.is-playing .play-overlay {
  opacity: 0;
}

.hero-photo__play:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* Phones: the card keeps the hero's side margins. */
@media (max-width: 767px) {
  .homepage-root .hero .hero-feature--book {
    margin-top: 0.5rem;
  }
}

/* ==========================================================================
   Blog landing page (/start/gift-idea/, templates/v3/blog_landing.html). It is
   the homepage's ad-visit hero and sections, plus the two pieces here: the
   offer line and the "buy it now, give it later" section. (The short form of
   that offer is a line under the start form: .hero-start-form__later.)
   ========================================================================== */

/* The blog reader's offer, over the form. */
.hero-offer {
  margin: -0.5rem 0 1.25rem;
  color: #d1d5db;
  font-size: 0.9375rem;
}

.hero-offer strong {
  color: #fde68a;
  font-weight: 600;
}

@media (max-width: 767px) {
  .homepage-root .hero .initial-content > .hero-offer { order: 3; margin: 0 0 1rem; }
}

/* The same offer in full, lower on the page. */
.later-band {
  padding: 4rem 1.5rem;
  border-top: 1px solid #e5e7eb;
  background-color: #fff;
  background-image:
    radial-gradient(at 12% 10%, rgba(139, 92, 246, 0.09) 0px, transparent 55%),
    radial-gradient(at 90% 90%, rgba(99, 102, 241, 0.08) 0px, transparent 55%);
  color: #0f172a;
}

.later-band__inner {
  display: grid;
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.later-band__title {
  margin: 0;
  color: #0f172a;
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
}

.later-band__text {
  max-width: 34rem;
  margin: 1rem 0 0;
  color: #475569;
  font-size: 1.0625rem;
  line-height: 1.55;
}

.later-band .later-band__btn {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 3.25rem;
  margin-top: 1.75rem;
  padding: 0 1.75rem;
}

.later-band__list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.later-band__list li {
  padding: 1rem 1.25rem;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  background-color: #fff;
}

.later-band__list strong {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
}

.later-band__list span {
  display: block;
  margin-top: 0.25rem;
  color: #475569;
  font-size: 0.9375rem;
}

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

  .later-band__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: 3.5rem;
  }

  .later-band__title {
    font-size: 2.75rem;
  }
}