/* Occasion page: sections below hero. Hero & nav use v3 homepage.css */
/* Hero layout: two columns, copy and start form on the left, a video card on the right. */
/* Dark sections use the same blue / violet / gold radial gradients as v3 homepage. */

/* Occasion LPs: no nav gradient; same gradient applied at top of main so it comes down below nav. */
body:has(.occasion-page) .nav:not(.scrolled) {
  background: none;
}
/* Override homepage's hide-on-load nav behavior — always show nav items on occasion pages */
body:has(.occasion-page) .nav-items {
  opacity: 1 !important;
  visibility: visible !important;
}
.occasion-page {
  position: relative;
}
.occasion-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 1;
}

/* The hero is as tall as its content. Phones stack it: copy, form, then the card. */
.occasion-page .hero.occasion-hero {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2rem;
  padding: 6.5rem 1.5rem 2.5rem;
  height: auto;
  min-height: 0;
  contain: none;
  overflow: visible;
  text-align: left;
  /* No background here: the hero inherits the homepage .hero grain + soft blue / rose /
     violet ellipses from homepage.css, so both heroes stay in step. */
}
/* Desktop: the same measures as the homepage's ad-visit hero (.hero--focused in
   homepage.css): 54% for the copy, a 2.5rem gap, the card in the rest, and the same
   space above and below. */
@media (min-width: 768px) {
  .occasion-page .hero.occasion-hero {
    flex-direction: row;
    align-items: center;
    gap: 2.5rem;
    padding: 9rem 3rem 3.5rem;
  }
}

.occasion-page .hero.occasion-hero .hero-content {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
  position: relative;
  z-index: 2;
}
.occasion-page .hero.occasion-hero .hero-content .initial-content {
  width: 100%;
  padding: 0;
}
@media (min-width: 768px) {
  /* Half the hero each. The video side holds the tablet and the art beside it. */
  .occasion-page .hero.occasion-hero .hero-content {
    flex: 0 0 50%;
    max-width: 50%;
  }
  /* The headline is sized from this column, as on the homepage. */
  .occasion-page .hero.occasion-hero .hero-content .initial-content {
    container-type: inline-size;
  }
}

/* H1: solid white (override homepage h1 gradient) */
.occasion-page #occasion-hero-title {
  font-size: 2rem;
  line-height: 1.2;
  width: auto;
  max-width: none;
  margin: 0;
  color: #fff;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: currentColor;
  /* Even lines: these headlines run to two or three lines in the copy column. */
  text-wrap: balance;
}
@media (min-width: 768px) {
  .occasion-page #occasion-hero-title {
    font-size: clamp(1.625rem, 6cqi, 3.5rem);
  }
}

.occasion-page .hero.occasion-hero .subhead {
  max-width: none;
  margin: 0.875rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .occasion-page .hero.occasion-hero .subhead {
    font-size: 1.125rem;
    margin-top: 1rem;
  }
}

/* The start form (or, on a page with no occasion, the Start button) under the copy. */
.occasion-page .hero.occasion-hero .hero-buttons {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  margin-top: 1.75rem;
  width: 100%;
}

.occasion-page .hero.occasion-hero .start-btn-wrapper {
  width: 100%;
  max-width: 34rem;
  align-items: flex-start;
  gap: 1rem;
}

.occasion-page .hero.occasion-hero .start-btn-wrapper > .primary-btn {
  width: auto;
  min-width: 11rem;
}

/* The right column: the video card, and behind it the page's art when it has one. */
.occasion-page .occasion-hero-media {
  position: relative;
  z-index: 2;
  flex: 1 1 0;
  min-width: 0;
}

/* The stage holds the card and the speech bubbles on its upper corners. */
.occasion-page .occasion-hero-stage {
  position: relative;
  z-index: 1;
}
/* Speech bubbles: the proof figures, as two messages that lean on the card's upper
   corners. White with dark text, so they read over any video frame. Each has one square
   corner, the tail of a chat bubble. They leave while the video plays. */
.occasion-page .occasion-hero-bubble {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0.5rem 0.875rem;
  /* Warm off-white, lit from above: a light top edge, a soft shade at the foot, and a
     close shadow under a wide one, so the bubble has a little thickness. */
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, #fffdf8 0%, #f6efe4 100%);
  color: #1f2937;
  font-family: 'Roboto Flex', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -0.1875rem 0.375rem rgba(148, 116, 72, 0.16),
    0 0.125rem 0.125rem rgba(0, 0, 0, 0.25),
    0 0.625rem 1.5rem rgba(0, 0, 0, 0.38);
  transition: opacity 0.25s ease;
}
.occasion-page .occasion-hero-bubble strong {
  color: #030712;
  font-weight: 700;
}
.occasion-page .occasion-hero-bubble--reach {
  top: -0.875rem;
  left: -0.5rem;
  border-radius: 1.125rem 1.125rem 1.125rem 0.25rem;
  transform: rotate(-4deg);
}
.occasion-page .occasion-hero-bubble--rating {
  top: 1.75rem;
  right: -0.5rem;
  border-radius: 1.125rem 1.125rem 0.25rem 1.125rem;
  transform: rotate(3deg);
}
.occasion-page .occasion-hero-bubble__stars {
  color: #e0a800;
  letter-spacing: 0.06em;
}
.occasion-page .occasion-hero-media.is-playing .occasion-hero-bubble {
  opacity: 0;
  pointer-events: none;
}
@media (min-width: 768px) {
  .occasion-page .occasion-hero-bubble {
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
  }
  .occasion-page .occasion-hero-bubble--reach {
    top: -1.25rem;
    left: -1.25rem;
  }
  .occasion-page .occasion-hero-bubble--rating {
    top: 2rem;
    right: -1.25rem;
  }
}
/* A slow bob, out of step with each other. */
@media (prefers-reduced-motion: no-preference) {
  .occasion-page .occasion-hero-bubble--reach {
    animation: occasion-bubble-bob-left 5s ease-in-out infinite;
  }
  .occasion-page .occasion-hero-bubble--rating {
    animation: occasion-bubble-bob-right 6s ease-in-out -2s infinite;
  }
}
@keyframes occasion-bubble-bob-left {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(-4deg) translateY(-0.3125rem); }
}
@keyframes occasion-bubble-bob-right {
  0%, 100% { transform: rotate(3deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(-0.3125rem); }
}

/* The video card: the same rounded card as the homepage's ad-visit hero. */
/* The card is a clay tablet, an object in the same soft 3D style as the page's art.
   A matte bezel in neutral graphite, lit from above: a light upper rim, a shade under
   the lower rim, and a deep soft shadow. No buttons and no camera: the bezel stays plain,
   because bubbles and art already sit on its corners. The video is the screen. */
.occasion-page .occasion-hero-card {
  --tablet-bezel: 0.4375rem;
  position: relative;
  overflow: hidden;
  padding: var(--tablet-bezel);
  border-radius: 1.375rem;
  /* A neutral graphite, so the frame suits any occasion's art. */
  background: linear-gradient(165deg, #767c8a 0%, #555b69 42%, #3b404c 100%);
  box-shadow:
    inset 0 0.0625rem 0.0625rem rgba(255, 255, 255, 0.4),
    inset 0 -0.25rem 0.5rem rgba(10, 14, 24, 0.5),
    inset 0.125rem 0 0.375rem rgba(255, 255, 255, 0.12),
    inset -0.125rem 0 0.375rem rgba(10, 14, 24, 0.25),
    0 0.25rem 0.375rem rgba(0, 0, 0, 0.3),
    0 2rem 3.5rem rgba(0, 0, 0, 0.5);
}
/* The screen: set a little into the bezel, with a dark rim and its own rounded corners. */
.occasion-page .occasion-hero-card > .occasion-hero-video-wrap,
.occasion-page .occasion-hero-card > .occasion-hero-card__photo {
  border-radius: 1rem;
  box-shadow:
    0 0 0 0.125rem #12151d,
    0 0.0625rem 0 0.1875rem rgba(255, 255, 255, 0.16);
}
@media (min-width: 768px) {
  .occasion-page .occasion-hero-card {
    --tablet-bezel: 0.5625rem;
    border-radius: 1.625rem;
  }
  .occasion-page .occasion-hero-card > .occasion-hero-video-wrap,
  .occasion-page .occasion-hero-card > .occasion-hero-card__photo {
    border-radius: 1.125rem;
  }
}

.occasion-page .occasion-hero-card__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Mobile sticky CTA bar (shared styles in homepage.css) */
@media (max-width: 767px) {
  body:has(.occasion-page) {
    padding-bottom: 4.75rem;
  }

  body:has(.occasion-page):has(.mobile-sticky-cta:not(.is-hidden)) #support-widget {
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Optional Wagtail "Background image": wide 3D art with objects in its lower left and
   right corners and an empty middle. Its lower edge is a crop, so the art stands on the
   foot of the hero, where the crop does not show, and it is a little wider than the
   column. The video card stands behind it, low in the column: the objects overlap the
   card's lower corners, so the card and the art read as one group. While the video plays,
   the art steps behind the card (.is-playing, set by the player script). The art stays
   inside the hero's side padding, so the page never scrolls sideways. */
.occasion-page .hero.occasion-hero {
  --occasion-hero-foot: 2.5rem; /* the hero's bottom padding */
}
@media (min-width: 768px) {
  .occasion-page .hero.occasion-hero {
    --occasion-hero-foot: 3.5rem;
  }
}
.occasion-page .occasion-hero-media--art {
  /* Phones: the card comes last, with room under it for the objects. */
  padding-bottom: 20%;
}
.occasion-page .occasion-hero-media--art .occasion-hero-stage {
  width: 95%;
  margin: 0 auto;
}
.occasion-page .occasion-hero-art {
  position: absolute;
  left: -6%;
  bottom: calc(-1 * var(--occasion-hero-foot));
  z-index: 2;
  width: 112%;
  max-width: none;
  height: auto;
  pointer-events: none;
}
.occasion-page .occasion-hero-media.is-playing .occasion-hero-art {
  z-index: 0;
}
@media (min-width: 768px) {
  /* The column is as tall as the hero's content. */
  .occasion-page .occasion-hero-media--art {
    display: flex;
    align-items: center;
    align-self: stretch;
    padding-bottom: 0;
  }
  /* Below the middle, so its foot tucks in behind the objects and no gap opens there. */
  .occasion-page .occasion-hero-media--art .occasion-hero-stage {
    margin-top: 3.5rem;
  }
  .occasion-page .occasion-hero-art {
    left: -11%;
    width: 119%;
  }
}
/* "Hero art image": art with whole objects (nothing cut off at the foot). It does not have
   to stand on the foot of the hero: the tablet and the art are one group, centered in the
   column. The image holds two clusters, one at each end. It is drawn twice, and each copy
   is clipped to one end (30% of its width), so each cluster can be sized and placed at
   its own lower corner of the tablet. The clusters stand a little lower than the tablet
   and overlap its corners. The right one stays inside the column, so nothing runs past
   the page's content edge. */
.occasion-page .occasion-hero-media--whole-art {
  padding-bottom: 0;
  /* The clusters stand lower than the tablet: this is their room. */
  margin-bottom: 2.5rem;
}
.occasion-page .occasion-hero-media--whole-art .occasion-hero-stage {
  width: 84%;
  margin: 0 auto;
  /* No layer of its own, so the three parts stack in one order: the tablet, the clusters
     over its corners, and the bubbles over the clusters. */
  z-index: auto;
}
.occasion-page .occasion-hero-media--whole-art .occasion-hero-card {
  z-index: 1;
}
.occasion-page .occasion-hero-media--whole-art .occasion-hero-bubble {
  z-index: 3;
}
/* Each cluster is the whole image, clipped to one end. The clipped part is invisible but
   still takes room, and a wide image would push the page wider than the window. The hero
   clips it sideways. `clip` does not make a scroll box, so nothing else changes. */
.occasion-page .hero.occasion-hero {
  overflow-x: clip;
}
.occasion-page .occasion-hero-prop {
  position: absolute;
  bottom: -14%;
  z-index: 2;
  /* 84% of the tablet's height; the width follows from the image. */
  width: auto;
  max-width: none;
  height: 84%;
  pointer-events: none;
  /* Two shadows per object, a close one and a wide one, for depth. */
  filter:
    drop-shadow(0 0.1875rem 0.25rem rgba(0, 0, 0, 0.35))
    drop-shadow(0 1rem 1.125rem rgba(0, 0, 0, 0.5));
}
/* Each copy shows one end of the image: its left 30%, or its right 30%. */
.occasion-page .occasion-hero-prop--left {
  left: -3%;
  clip-path: inset(-2rem 70% -2rem -2rem);
}
.occasion-page .occasion-hero-prop--right {
  right: -3%;
  clip-path: inset(-2rem -2rem -2rem 70%);
}
.occasion-page .occasion-hero-media.is-playing .occasion-hero-prop {
  z-index: 0;
}
@media (min-width: 768px) {
  .occasion-page .occasion-hero-media--whole-art {
    display: block;
    align-self: center;
    margin-bottom: 1.25rem;
  }
  /* The tablet sits a little left of the column's middle: the left cluster may reach into
     the gap beside the copy, and the right one must stop at the column's edge. */
  .occasion-page .occasion-hero-media--whole-art .occasion-hero-stage {
    width: 86%;
    margin: 0 8.5% 0 5.5%;
  }
  .occasion-page .occasion-hero-prop--left {
    left: -4%;
  }
  .occasion-page .occasion-hero-prop--right {
    right: 0;
  }
}
/* The page's first video fills the card. */
.occasion-hero-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 1;
}
@supports not (aspect-ratio: 16 / 9) {
  .occasion-hero-video-wrap {
    aspect-ratio: unset;
    padding-bottom: var(--hero-video-padding-bottom, 56.25%);
  }
}
/* Plyr root (HTML5) or embed container (YouTube) fills the wrap */
.occasion-hero-video-wrap > .plyr,
.occasion-hero-video-wrap > .occasion-hero-plyr {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.occasion-hero-video-wrap .plyr__video-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.occasion-hero-video-wrap .plyr__video-wrapper video,
.occasion-hero-video-wrap video.plyr__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Poster/thumbnail fills frame (no black bars) */
.occasion-hero-video-wrap .plyr__poster {
  background-size: cover;
  background-position: center;
}
.occasion-hero-video-wrap .plyr {
  border-radius: inherit;
  --plyr-color-main: #000;
}
/* The play button of the homepage's video tiles (.homepage-root .hero .play-overlay): a
   frosted glass disc with a white triangle, a size larger here. Plyr sets display: block
   on this button with three classes, so the selector carries Plyr's own classes to win. */
.occasion-hero-video-wrap .plyr--full-ui.plyr--video .plyr__control--overlaid {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  padding: 0;
  border: 1px solid #ffffff50;
  background: #ffffff18;
  box-shadow: inset 0 1px 0 #ffffff24, 0 4px 16px #00000020;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color 0.3s ease;
}
.occasion-hero-video-wrap .plyr--full-ui.plyr--video .plyr__control--overlaid:hover,
.occasion-hero-video-wrap .plyr--full-ui.plyr--video .plyr__control--overlaid:focus-visible {
  background: #ffffff2b;
}
.occasion-hero-video-wrap .plyr--full-ui.plyr--video .plyr__control--overlaid svg {
  position: static;
  width: 2rem;
  height: 2rem;
  /* The triangle's weight is to its left: this evens it in the disc. */
  margin-left: 0.25rem;
  fill: #fff;
}
/* When playing, show pause (overlay control) on hover */
.occasion-hero-video-wrap .plyr--playing:hover .plyr__control--overlaid {
  opacity: 1;
  visibility: visible;
}
/* Mobile: scale down and center the hero play button */
@media (max-width: 767px) {
  .occasion-hero-video-wrap .plyr__control--overlaid {
    position: absolute;
    width: 48px !important;
    height: 48px !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
  }
  .occasion-hero-video-wrap .plyr--full-ui.plyr--video .plyr__control--overlaid svg {
    width: 24px;
    height: 24px;
    margin: 0 0 0 3px;
  }
}
.occasion-page .occasion-hero-book-img {
  width: 100%;
  height: auto;
  max-height: none;
  display: block;
  object-fit: contain;
  position: relative;
  z-index: 2;
}

/* Occasion steps list (hero left column) */
.occasion-steps {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.occasion-step {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  color: #d1d5db;
  font-size: 1rem;
}
.occasion-step-num {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin-right: 1rem;
  background: #fff;
  color: #030712;
  font-weight: 700;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}

/* Section scaffolding: top/bottom padding matches how-it-works (generous spacing) */
.occasion-section {
  padding: 5rem 1.5rem;
}
@media (min-width: 768px) {
  .occasion-section {
    padding: 0 3rem 6rem;
  }
}
/* Desktop sections have no top padding: each one leans on the space under the section
   before it. The press strip has none to give, so the section after it brings its own. */
@media (min-width: 768px) {
  .occasion-page .press-strip + .occasion-section {
    padding-top: 5rem;
  }
}
.occasion-container {
  max-width: 64rem;
  margin: 0 auto;
}
.occasion-section-heading,
.occasion-section-title {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #030712;
  text-align: center;
  margin-bottom: 0.5rem;
}
.occasion-section-subtitle {
  text-align: center;
  color: #6b7280;
  margin-bottom: 2rem;
}

/* Reviews, how-it-works, sample videos, blog, soundtrack: same section padding + Fraunces titles */
.occasion-page .reviews-section,
.occasion-page .how-it-works,
.occasion-section.occasion-videos,
.occasion-section.occasion-blog,
.occasion-section.occasion-soundtrack-spotlight {
  padding: 3rem 1.5rem;
}
.occasion-page .reviews-header h3,
.occasion-page .how-it-works-header h3,
.occasion-section.occasion-videos .occasion-section-title,
.occasion-section.occasion-blog .occasion-section-title,
.occasion-soundtrack-spotlight .occasion-section-title {
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: #030712;
}
.occasion-page .how-it-works-header h3 {
  color: #ffffff;
}
.occasion-page .reviews-header p,
.occasion-section.occasion-videos .occasion-section-subtitle {
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
  .occasion-page .reviews-section,
  .occasion-page .how-it-works,
  .occasion-section.occasion-videos,
  .occasion-section.occasion-blog,
  .occasion-section.occasion-soundtrack-spotlight {
    padding: 6rem 3rem;
  }
  .occasion-page .reviews-header h3,
  .occasion-page .how-it-works-header h3,
  .occasion-section.occasion-videos .occasion-section-title,
  .occasion-section.occasion-blog .occasion-section-title,
  .occasion-soundtrack-spotlight .occasion-section-title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
  }
  .occasion-page .reviews-header p,
  .occasion-section.occasion-videos .occasion-section-subtitle {
    margin-bottom: 2.5rem;
  }
}

.occasion-soundtrack-spotlight {
  /* Tweak soundtrack wave art without touching content */
  --soundtrack-bg-opacity: 0.25;
  --soundtrack-bg-hue-rotate: 135deg;
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
}
.occasion-soundtrack-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("/static/images/occasion/soundtrack-section-bg.1711200492e8.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: var(--soundtrack-bg-opacity);
  filter: hue-rotate(var(--soundtrack-bg-hue-rotate));
}
.occasion-soundtrack-spotlight .occasion-container {
  position: relative;
  z-index: 1;
}
.occasion-soundtrack-spotlight__body {
  text-align: center;
  color: #6b7280;
  max-width: 44rem;
  margin: 0 auto 2.5rem;
  line-height: 1.65;
  font-size: 1.0625rem;
}
.occasion-soundtrack-demo {
  max-width: 30rem;
  margin: 0 auto;
  text-align: center;
}
.occasion-mini-player {
  position: relative;
  overflow: hidden;
  padding: 1.35rem 1.5rem 1.5rem;
  border-radius: 1.25rem;
  background-color: #030712;
  background-image:
    radial-gradient(ellipse 110% 90% at 20% 30%, rgba(59, 130, 246, 0.2) 0%, transparent 72%),
    radial-gradient(ellipse 100% 85% at 80% 28%, rgba(244, 114, 182, 0.14) 0%, transparent 70%),
    radial-gradient(ellipse 105% 95% at 70% 82%, rgba(251, 191, 36, 0.16) 0%, transparent 68%),
    radial-gradient(ellipse 95% 80% at 30% 75%, rgba(139, 92, 246, 0.16) 0%, transparent 70%),
    radial-gradient(ellipse 85% 70% at 50% 50%, rgba(252, 211, 77, 0.09) 0%, transparent 65%);
  box-shadow:
    0 16px 40px rgba(3, 7, 18, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  color: #fff;
  text-align: left;
}
.occasion-mini-player::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, transparent 50%, rgba(3, 7, 18, 0.12) 100%);
}
.occasion-mini-player > * {
  position: relative;
  z-index: 1;
}
.occasion-mini-player.is-transitioning .occasion-mini-player__art,
.occasion-mini-player.is-transitioning .occasion-mini-player__title,
.occasion-mini-player.is-transitioning .occasion-mini-player__artist {
  opacity: 0.4;
  transition: opacity 0.2s ease;
}
.occasion-mini-player__top {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.125rem;
}
.occasion-mini-player__actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  margin-left: auto;
}
.occasion-mini-player__icon {
  display: block;
  flex-shrink: 0;
}
.occasion-mini-player__icon--earbuds {
  width: 1.375rem;
  height: auto;
  opacity: 0.9;
  filter: brightness(0) invert(1);
}
.occasion-mini-player__icon--shuffle,
.occasion-mini-player__icon--cast {
  width: 1.25rem;
  height: auto;
  opacity: 0.85;
  filter: brightness(0) invert(1);
}
.occasion-mini-player__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.occasion-mini-player__more span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #4b5563;
}
.occasion-mini-player__art {
  flex-shrink: 0;
  width: 4.75rem;
  height: 4.75rem;
  border-radius: 0.625rem;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.occasion-mini-player__meta {
  min-width: 0;
  flex: 1;
}
.occasion-mini-player__title {
  margin: 0;
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.occasion-mini-player__artist {
  margin: 0.2rem 0 0;
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.occasion-mini-player__progress {
  margin-bottom: 0.125rem;
}
.occasion-mini-player__progress-track {
  height: 3px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.32);
  overflow: hidden;
}
.occasion-mini-player__progress-fill {
  height: 100%;
  width: 68%;
  border-radius: inherit;
  background: #fff;
  transform-origin: left center;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}
.occasion-mini-player.is-playing .occasion-mini-player__progress-fill {
  animation: occasion-mini-player-progress 4.5s linear forwards;
}
@keyframes occasion-mini-player-progress {
  from {
    transform: scaleX(var(--progress, 0.35));
  }
  to {
    transform: scaleX(1);
  }
}
.occasion-mini-player__btn--play .occasion-mini-player__icon-pause {
  display: none;
}
.occasion-mini-player.is-playing .occasion-mini-player__btn--play .occasion-mini-player__icon-play {
  display: none;
}
.occasion-mini-player.is-playing .occasion-mini-player__btn--play .occasion-mini-player__icon-pause {
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .occasion-mini-player.is-playing .occasion-mini-player__progress-fill {
    animation: none;
  }
}
.occasion-mini-player__times {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}
.occasion-mini-player__transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: fit-content;
  max-width: 100%;
  margin: 1.25rem auto 0;
  color: #fff;
}
.occasion-mini-player__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.occasion-mini-player__btn--side {
  width: 1.75rem;
  height: 1.75rem;
  opacity: 0.88;
}
.occasion-mini-player__btn--skip {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(4px);
}
.occasion-mini-player__btn--skip .occasion-mini-player__icon {
  width: 1.125rem;
  height: 1.125rem;
}
.occasion-mini-player__btn--play {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}
.occasion-mini-player__btn--play .occasion-mini-player__icon-play,
.occasion-mini-player__btn--play .occasion-mini-player__icon-pause {
  width: 1.35rem;
  height: 1.35rem;
}
.occasion-soundtrack-pills-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.625rem 1rem;
  margin-top: 1.5rem;
  max-width: 100%;
}
.occasion-soundtrack-pills {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
}
.occasion-soundtrack-pill {
  display: inline-block;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0.5rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #030712;
  line-height: 1.35;
  text-align: center;
}
.occasion-soundtrack-pill__artist {
  font-weight: 400;
  color: #6b7280;
}
.occasion-soundtrack-upload {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
}
.occasion-soundtrack-pill:hover {
  border-color: #d1d5db;
}
.occasion-soundtrack-pill.is-active {
  border-color: #1e3a5f;
  background: #fff;
  box-shadow: 0 4px 14px rgba(30, 58, 95, 0.1);
}
.occasion-soundtrack-pill:focus-visible {
  outline: 2px solid #1e3a5f;
  outline-offset: 2px;
}
@media (min-width: 768px) {
  .occasion-soundtrack-spotlight__body {
    font-size: 1.125rem;
    margin-bottom: 3rem;
  }
  .occasion-soundtrack-demo {
    max-width: 36rem;
  }
  .occasion-mini-player {
    padding: 1.5rem 1.75rem 1.75rem;
  }
  .occasion-mini-player__art {
    width: 5.25rem;
    height: 5.25rem;
  }
  .occasion-mini-player__title {
    font-size: 1.5rem;
  }
  .occasion-mini-player__btn--play {
    width: 3.5rem;
    height: 3.5rem;
  }
  .occasion-soundtrack-pill {
    font-size: 0.9375rem;
    padding: 0.55rem 1.1rem;
  }
  .occasion-soundtrack-upload {
    font-size: 0.9375rem;
  }
}
@media (max-width: 380px) {
  .occasion-soundtrack-pills-row {
    flex-direction: column;
    gap: 0.75rem;
  }
  .occasion-soundtrack-pills {
    justify-content: flex-start;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: 0.25rem;
    mask-image: linear-gradient(90deg, transparent, #000 8px, #000 calc(100% - 8px), transparent);
  }
  .occasion-soundtrack-pills::-webkit-scrollbar {
    display: none;
  }
}
.occasion-cta-wrap {
  text-align: center;
  margin-top: 2rem;
}

@media (max-width: 767px) {
  .occasion-container {
    padding-left: 0;
    padding-right: 0;
  }
  /* Consistent section padding (matches homepage) */
  .occasion-section,
  .occasion-group-gift,
  .occasion-page .occasion-pricing-section.pricing-plans {
    padding: 3rem 1.5rem;
  }
  /* Consistent heading styles (matches homepage) */
  .occasion-section-title,
  .occasion-section-heading,
  .occasion-group-gift__title,
  .occasion-alt-title {
    font-size: 2rem;
    font-weight: 400;
    font-family: 'Fraunces', serif;
  }
}

/* How it works: uses v3 homepage section (.how-it-works) — background from homepage.css */
@media (max-width: 767px) {
  .occasion-page .how-it-works .how-it-works-cta .cta-button.primary-btn,
  .occasion-page .how-it-works .how-it-works-cta .primary-btn {
    width: auto;
  }
}

/* Group gift feature: white section between How it works and Pricing */
.occasion-group-gift {
  background: #fff;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media (min-width: 768px) {
  .occasion-group-gift {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}
@media (min-width: 768px) {
  .occasion-group-gift {
    padding-top: 6rem;
  }
}
.occasion-group-gift .occasion-container {
  max-width: 1125px;
}
.occasion-group-gift__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
.occasion-group-gift__visual {
  min-height: 0;
}
.occasion-group-gift__img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}
.occasion-group-gift__title {
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  font-weight: 400;
  color: #030712;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
.occasion-group-gift__sub {
  font-size: 1.125rem;
  color: #6b7280;
  margin-bottom: 1rem;
  font-weight: 500;
}
.occasion-group-gift__text {
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.occasion-group-gift__cta {
  display: inline-block;
}
@media (max-width: 767px) {
  .occasion-group-gift__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
/* "Powered by Snappy": the eyebrow over the heading, flush left with the text. */
.occasion-group-gift__powered {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  /* The content column centers its children on phones: this one stays at the left. */
  align-self: flex-start;
  margin: 0 auto 0.875rem 0;
  font-size: 0.8125rem;
  color: #6b7280;
  text-decoration: none;
  transition: color 0.2s;
}
.occasion-group-gift__powered:hover {
  color: #030712;
}
.occasion-group-gift__powered img {
  height: 22px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}
@media (min-width: 768px) {
  .occasion-group-gift__row {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
  .occasion-group-gift__title {
    font-size: 2.5rem;
  }
}

/* Pricing section: same dark gradient as homepage .how-it-works */
.occasion-page .occasion-pricing-section.pricing-plans {
  position: relative;
  margin-top: 0;
  padding: 5rem 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%);
}
.occasion-page .occasion-pricing-header {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto 2.75rem;
  padding: 0 1.5rem;
  text-align: center;
}
.occasion-page .occasion-pricing-title {
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
  color: #ffffff;
  margin: 0;
}
.occasion-page .occasion-pricing-section .pricing-container {
  position: relative;
  z-index: 1;
  margin-top: 0;
}
@media (min-width: 768px) {
  .occasion-page .occasion-pricing-section.pricing-plans {
    padding: 6rem 3rem 7rem;
  }
  .occasion-page .occasion-pricing-title {
    font-size: 2.5rem;
  }
  .occasion-page .occasion-pricing-header {
    margin-bottom: 4rem;
    padding: 0 3rem;
  }
}

/* Alternating rows */
.occasion-alt {
  background: #fff;
}
.occasion-alt .occasion-container {
  max-width: 1125px;
}
.occasion-alt-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 2.5rem;
}
.occasion-alt-row:last-child {
  margin-bottom: 0;
}
.occasion-alt-row-reverse .occasion-alt-content {
  order: 1;
}
.occasion-alt-row-reverse .occasion-alt-media {
  order: 0;
}
.occasion-alt-media img {
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 0 auto;
  display: block;
  border-radius: 0.5rem;
}
.occasion-alt-title {
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  font-weight: 400;
  color: #030712;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .occasion-alt-title {
    font-size: 2.5rem;
  }
}
.occasion-alt-text {
  color: #6b7280;
  margin-bottom: 1rem;
  line-height: 1.6;
}
@media (min-width: 768px) {
  .occasion-alt-row {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .occasion-alt-row-reverse .occasion-alt-content {
    order: 0;
  }
  .occasion-alt-row-reverse .occasion-alt-media {
    order: 1;
  }
}

/* Products grid (legacy; pricing section uses .pricing-plans) */
.occasion-products {
  padding: 5rem 1.5rem;
}
@media (max-width: 767px) {
  .occasion-products {
    padding: 3rem 1.5rem;
  }
}
@media (min-width: 768px) {
  .occasion-products {
    padding: 6rem 3rem;
  }
}
.occasion-products-title {
  margin-bottom: 2rem;
}
.occasion-products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .occasion-products-grid {
    grid-template-columns: repeat(3, 1fr);
    flex-wrap: nowrap;
  }
}
.occasion-product-card {
  background: #fff;
  border-radius: 0.5rem;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  position: relative;
}
.occasion-product-card-featured {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.occasion-badge {
  position: absolute;
  top: -0.75rem;
  right: -0.75rem;
  background: #fef08a;
  color: #030712;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  transform: rotate(12deg);
}
.occasion-product-card h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #030712;
  margin-bottom: 0.5rem;
}
.occasion-product-desc {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 0.5rem;
  flex: 1;
}
.occasion-product-price {
  font-size: 1.125rem;
  font-weight: 600;
  color: #030712;
  margin-bottom: 0.75rem;
}
.occasion-product-price span {
  font-weight: 400;
  opacity: 0.8;
  font-size: 0.875rem;
}
.occasion-product-table {
  width: 100%;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  border-collapse: collapse;
}
.occasion-product-table td {
  padding: 0.5rem 0;
  border-bottom: 1px solid #e5e7eb;
}
.occasion-product-price-cell {
  font-weight: 600;
  text-align: right;
}
.occasion-product-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: #6b7280;
}
.occasion-product-features li {
  margin-bottom: 0.5rem;
}
.occasion-product-features a {
  color: #030712;
  text-decoration: underline;
}
.occasion-product-card .occasion-btn-primary {
  margin-top: auto;
  text-align: center;
  display: block;
}

/* Primary button (match v3) */
.occasion-btn-primary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  background: linear-gradient(135deg, #b51d1d 0%, #c42723 100%);
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(181, 29, 29, 0.3);
}
.occasion-btn-primary:hover {
  background: linear-gradient(135deg, #9c1717 0%, #b51d1d 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(181, 29, 29, 0.4);
}

/* Sample Tributes / video examples */
.occasion-videos {
  background: #fff;
}
.occasion-videos-cta {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
}
.occasion-videos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .occasion-videos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.occasion-video-card {
  text-align: center;
}
.occasion-video-link {
  position: relative;
  display: block;
  border-radius: 0.5rem;
  overflow: hidden;
  aspect-ratio: 16/9;
  margin-bottom: 0.5rem;
}
.occasion-video-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.occasion-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.occasion-video-play::before {
  content: '';
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
}
.occasion-video-play::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.6rem 0 0.6rem 1rem;
  border-color: transparent transparent transparent #fff;
  margin-left: 0.25rem;
  position: relative;
  z-index: 1;
}
.occasion-video-card p {
  font-size: 0.875rem;
  color: #374151;
}

/* Blog section: grid filled by JS from blog.tribute.co */
.occasion-blog {
  background: #f3f4f6;
}
/* Video modal (Plyr) */
.occasion-video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  box-sizing: border-box;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.2s, opacity 0.2s;
}
.occasion-video-modal.occasion-video-modal-open {
  visibility: visible;
  opacity: 1;
}
.occasion-video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  cursor: pointer;
}
.occasion-video-modal-content {
  position: relative;
  width: 100%;
  max-width: 900px;
  background: #000;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.occasion-video-modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 0.25rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.occasion-video-modal-close:hover {
  background: rgba(0, 0, 0, 0.7);
}
.occasion-video-modal-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.occasion-video-modal-player .plyr {
  --plyr-color-main: #000;
}

.occasion-blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  min-height: 120px;
}
@media (min-width: 768px) {
  .occasion-blog-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}
.occasion-blog-more {
  text-align: center;
  margin: 2rem 0 0;
}
.occasion-blog-more a {
  color: var(--color-primary, #b51d1d);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.occasion-blog-card {
  display: flex;
  min-height: 100%;
}
.occasion-blog-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease;
}
.occasion-blog-card__link:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.occasion-blog-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  background: #e5e7eb;
}
.occasion-blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.occasion-blog-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 120px;
  background: #e5e7eb;
}
.occasion-blog-card__title {
  font-family: 'Fraunces', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #030712;
  margin: 0;
  padding: 1.25rem 1.5rem 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.occasion-blog-card__excerpt {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.5;
  padding: 0.75rem 1.5rem 0;
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.occasion-blog-card__cta {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-primary, #b51d1d);
  padding: 1rem 1.5rem 1.25rem;
  margin-top: auto;
}

/* Reviews section: center header, grid, and Facebook rating on occasion LPs */
.occasion-page .reviews-header {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.occasion-page .reviews-header h3,
.occasion-page .reviews-header p {
  text-align: center;
}
.occasion-page .reviews-grid {
  margin-left: auto;
  margin-right: auto;
}
.occasion-page .reviews-footer {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.occasion-page .reviews-footer .facebook-info {
  align-items: center;
  flex: 0 0 auto;
  width: auto;
  justify-content: center;
  text-align: center;
}
@media (min-width: 768px) {
  .occasion-page .reviews-header {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .occasion-page .reviews-header h3,
  .occasion-page .reviews-header p {
    text-align: center;
  }
  .occasion-page .reviews-footer {
    justify-content: center;
    align-items: center;
  }
  .occasion-page .reviews-footer .facebook-info {
    justify-content: center;
  }
}

/* The payment rule under the pricing heading (CRO audit, Oct 2026). */
.occasion-page .occasion-pricing-lead {
  margin: 0.75rem auto 0;
  max-width: 36rem;
  color: #d1d5db;
  font-size: 1rem;
  line-height: 1.5;
}

/* ==========================================================================
   Phones: one rhythm for every section of the page.
   The sections come from three places (this file, the homepage's How It Works and
   Video Book, the shared reviews), and each had its own padding (48, 64 or 80px), heading
   (32 or 34px, weight 400 or 500) and intro text (15, 16 or 17px). On a phone they now
   share one set. `main.occasion-page` outranks the sections' own rules.
   ========================================================================== */
@media (max-width: 767px) {
  main.occasion-page .occasion-section,
  main.occasion-page .occasion-pricing-section.pricing-plans,
  main.occasion-page .how-it-works,
  main.occasion-page .video-book-section,
  main.occasion-page .reviews-section {
    padding: 3rem 1.5rem;
  }

  main.occasion-page .occasion-section h2,
  main.occasion-page .occasion-section.occasion-blog .occasion-section-title,
  main.occasion-page .homepage-root .how-it-works .how-it-works-header h3,
  main.occasion-page .homepage-root .video-book-section .video-book-heading,
  main.occasion-page .reviews-header h2,
  main.occasion-page .reviews-header h3 {
    font-family: 'Fraunces', serif;
    font-size: 2rem;
    /* 500, the weight the homepage gives its section titles on small screens. */
    font-weight: 500;
    line-height: 1.2;
  }

  main.occasion-page .occasion-alt-text,
  main.occasion-page .occasion-group-gift__text,
  main.occasion-page .how-it-works-header p:not(.section-eyebrow),
  main.occasion-page .video-book-intro,
  main.occasion-page .occasion-soundtrack-spotlight__body,
  main.occasion-page .reviews-header p:not(.section-eyebrow) {
    font-size: 1rem;
    line-height: 1.6;
  }

  /* The hero: two reassurances are enough on a phone. "Edit details any time" matters
     least to someone who has not started. More room between the list and the video. */
  .occasion-page .hero.occasion-hero .cta-reassurance li:nth-child(3) {
    display: none;
  }
  .occasion-page .hero.occasion-hero .occasion-hero-media {
    margin-top: 1.5rem;
  }
}