:root {
      --cream: #fff8ef;
      --paper: #fffdf8;
      --rose: #f8e3e2;
      --blush: #faeeee;
      --ink: #241a17;
      --muted: #6d5a51;
      --berry: #863449;
      --berry-dark: #642536;
      --tomato: #ce4f48;
      --terracotta: #bd7055;
      --gold: #dba946;
      --butter: #f2cf7a;
      --sage: #dce8d3;
      --forest: #263f37;
      --sky: #dbeff3;
      --lavender: #ebe3f6;
      --line: rgba(36, 26, 23, 0.14);
      --shadow: 0 8px 22px rgba(83, 47, 38, 0.06);
      --container: 1140px;
      --radius: 8px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
    }

    body {
      margin: 0;
      background: var(--cream);
      color: var(--ink);
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.58;
      overflow-x: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    .container {
      width: min(var(--container), calc(100% - 40px));
      margin: 0 auto;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(255, 248, 239, 0.86);
      border-bottom: 1px solid rgba(36, 26, 23, 0.08);
      backdrop-filter: blur(18px);
    }

    .topbar,
    .site-header,
    .hero,
    .section,
    .site-footer {
      position: relative;
      left: 50%;
      width: 100vw !important;
      max-width: 100vw !important;
      margin-left: -50vw !important;
      margin-right: 0 !important;
    }

    .topbar {
      background: var(--forest);
      color: #fff;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      overflow: hidden;
    }

    .topbar-inner {
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 22px;
      color: rgba(255, 255, 255, 0.86);
      font-size: 0.84rem;
      font-weight: 800;
      white-space: nowrap;
    }

    .topbar-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .topbar-item:not(:last-child)::after {
      content: "";
      width: 5px;
      height: 5px;
      margin-left: 14px;
      border-radius: 50%;
      background: var(--butter);
      opacity: 0.9;
    }

    .topbar-inner strong {
      color: #fff;
    }

    .rating-stars {
      color: var(--butter);
      letter-spacing: 0;
    }

    .header-inner {
      min-height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      position: relative;
    }

    .admin-bar .site-header {
      top: 32px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      font-weight: 900;
      letter-spacing: 0.01em;
      flex: 0 0 auto;
      padding: 7px 0;
    }

    .brand-logo {
      display: block;
      width: clamp(142px, 10.8vw, 176px);
      height: auto;
      max-height: 60px;
      object-fit: contain;
    }

    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background:
        radial-gradient(circle at 34% 28%, var(--butter), transparent 32%),
        linear-gradient(135deg, var(--tomato), var(--berry));
      box-shadow: 0 8px 18px rgba(134, 52, 73, 0.18);
      flex: 0 0 auto;
    }

    .brand-mark svg {
      width: 27px;
      height: 27px;
      display: block;
      color: var(--paper);
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 24px;
      color: var(--muted);
      font-size: 0.94rem;
      font-weight: 800;
    }

    .nav a {
      position: relative;
      padding: 8px 0;
      color: inherit;
    }

    .nav a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 2px;
      height: 2px;
      border-radius: 999px;
      background: var(--berry);
      opacity: 0;
      transform: scaleX(0.55);
      transition: opacity 160ms ease, transform 160ms ease;
    }

    .nav a:hover,
    .nav a:focus-visible {
      color: var(--ink);
    }

    .nav a:hover::after,
    .nav a:focus-visible::after {
      opacity: 1;
      transform: scaleX(1);
    }

    .menu-toggle {
      display: none;
      width: 44px;
      height: 44px;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 5px;
      border: 1px solid rgba(36, 26, 23, 0.12);
      border-radius: 999px;
      background: var(--paper);
      color: var(--ink);
      cursor: pointer;
    }

    .mobile-form-shortcut {
      display: none;
      width: 44px;
      height: 44px;
      align-items: center;
      justify-content: center;
      flex: 0 0 44px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--forest);
    }

    .mobile-form-shortcut svg {
      width: 26px;
      height: 26px;
      display: block;
    }

    .menu-toggle span:not(.screen-reader-text) {
      display: block;
      width: 18px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      transition: transform 160ms ease, opacity 160ms ease;
    }

    .screen-reader-text {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .site-header.menu-open .menu-toggle span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    .site-header.menu-open .menu-toggle span:nth-child(2) {
      opacity: 0;
    }

    .site-header.menu-open .menu-toggle span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    .mobile-menu {
      display: none;
    }

    .header-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 42px;
      padding: 0 19px 0 14px;
      border-radius: 999px;
      background: var(--berry);
      color: #fff;
      font-weight: 900;
      box-shadow: 0 14px 28px rgba(134, 52, 73, 0.18);
    }

    .cta-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.16);
      color: #fff;
      font-size: 1rem;
      line-height: 1;
      transform-origin: 50% 70%;
    }

    .cta-animated {
      animation: cta-breathe 2.8s ease-in-out infinite;
    }

    .cta-animated .cta-icon {
      animation: note-bounce 2.8s ease-in-out infinite;
    }

    @keyframes cta-breathe {
      0%,
      100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 14px 28px rgba(134, 52, 73, 0.18);
      }

      50% {
        transform: translateY(-1px) scale(1.018);
        box-shadow: 0 18px 34px rgba(134, 52, 73, 0.24);
      }
    }

    @keyframes note-bounce {
      0%,
      100% {
        transform: translateY(0) rotate(0deg);
      }

      46% {
        transform: translateY(-2px) rotate(-7deg);
      }
    }

    .hero {
      position: relative;
      overflow: hidden;
      padding: clamp(58px, 8vw, 96px) 0 clamp(54px, 7vw, 86px);
      background:
        radial-gradient(circle at 7% 18%, rgba(242, 207, 122, 0.45), transparent 18%),
        radial-gradient(circle at 92% 14%, rgba(220, 232, 211, 0.7), transparent 22%),
        linear-gradient(135deg, var(--cream) 0%, var(--blush) 100%);
    }

    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      pointer-events: none;
    }

    .hero::before {
      width: 190px;
      height: 190px;
      right: -64px;
      bottom: 48px;
      background: rgba(219, 169, 70, 0.22);
    }

    .hero::after {
      width: 76px;
      height: 76px;
      left: 5%;
      bottom: 32px;
      border: 2px dashed rgba(134, 52, 73, 0.22);
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.78fr);
      align-items: center;
      gap: clamp(36px, 7vw, 84px);
    }

    .eyebrow,
    .section-kicker {
      margin: 0 0 13px;
      color: var(--berry);
      font-size: 0.78rem;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    h1,
    h2,
    h3 {
      margin: 0;
      font-family: Fraunces, Georgia, serif;
      line-height: 1.08;
      letter-spacing: 0;
    }

    h1 {
      max-width: 720px;
      font-size: clamp(2.35rem, 4.8vw, 4.25rem);
      font-weight: 700;
    }

    h2 {
      font-size: clamp(1.85rem, 3.2vw, 3rem);
      font-weight: 650;
    }

    h3 {
      font-size: clamp(1.18rem, 1.6vw, 1.46rem);
      font-weight: 650;
    }

    .hero-copy p:not(.eyebrow) {
      max-width: 610px;
      margin: 20px 0 0;
      color: var(--muted);
      font-size: 1.06rem;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }

    .button {
      min-height: 52px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border: 1px solid transparent;
      border-radius: 999px;
      padding: 0 22px;
      font-weight: 900;
      cursor: pointer;
      transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
    }

    .button:hover,
    .button:focus-visible {
      transform: translateY(-2px) rotate(-0.4deg);
    }

    .button-primary {
      background: var(--berry);
      color: #fff;
      box-shadow: 0 16px 34px rgba(134, 52, 73, 0.22);
    }

    .button-secondary {
      background: var(--paper);
      border-color: var(--line);
      color: var(--berry);
    }

    .play-dot {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--rose);
      position: relative;
      flex: 0 0 auto;
    }

    .play-dot::after {
      content: "";
      position: absolute;
      left: 8px;
      top: 6px;
      border-left: 7px solid var(--berry);
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }

    .trust-list {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 16px;
    }

    .trust-list span {
      display: inline-flex;
      align-items: center;
      min-height: 20px;
      padding: 0 7px;
      border-radius: 999px;
      background: #eeeae6;
      border: 1px solid rgba(36, 26, 23, 0.08);
      color: #5f5048;
      font-size: 0.52rem;
      font-weight: 900;
      box-shadow: none;
    }

    .trust-list span:nth-child(2) {
      background: #eeeae6;
      border-color: rgba(36, 26, 23, 0.08);
    }

    .trust-list span:nth-child(3) {
      background: #eeeae6;
      border-color: rgba(36, 26, 23, 0.08);
    }

    .hero-visual {
      position: relative;
      min-height: 520px;
    }

    .song-board {
      position: relative;
      min-height: 520px;
      border-radius: 26px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.36)),
        repeating-linear-gradient(0deg, transparent 0 32px, rgba(36, 26, 23, 0.04) 32px 33px);
      border: 1px solid rgba(36, 26, 23, 0.1);
      box-shadow: var(--shadow);
      overflow: hidden;
      padding: 28px;
    }

    .confetti {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 2px;
      background: var(--gold);
      transform: rotate(12deg);
    }

    .confetti.one {
      right: 17%;
      top: 10%;
      background: var(--tomato);
    }

    .confetti.two {
      right: 8%;
      bottom: 26%;
      background: var(--forest);
    }

    .confetti.three {
      left: 10%;
      top: 22%;
      background: var(--gold);
    }

    .record {
      position: absolute;
      right: 26px;
      top: 38px;
      width: 230px;
      height: 230px;
      border-radius: 50%;
      background:
        radial-gradient(circle, var(--butter) 0 18%, transparent 19%),
        repeating-radial-gradient(circle, #251817 0 3px, #392624 3px 6px);
      box-shadow: 0 22px 42px rgba(36, 26, 23, 0.18);
    }

    .record::after {
      content: "";
      position: absolute;
      inset: 51px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.18);
    }

    .lyric-card,
    .calendar-card,
    .message-card,
    .mini-player {
      position: absolute;
      border-radius: var(--radius);
      border: 1px solid rgba(36, 26, 23, 0.12);
      background: var(--paper);
      box-shadow: 0 18px 38px rgba(83, 47, 38, 0.12);
    }

    .lyric-card {
      left: 26px;
      top: 42px;
      width: 236px;
      padding: 22px;
      transform: rotate(-3deg);
    }

    .lyric-card small,
    .message-card small,
    .calendar-card small {
      display: block;
      margin-bottom: 9px;
      color: var(--berry);
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 0.72rem;
    }

    .lyric-card p,
    .message-card p,
    .calendar-card p {
      margin: 0;
      color: var(--ink);
      font-weight: 800;
      line-height: 1.42;
    }

    .calendar-card {
      right: 38px;
      bottom: 52px;
      width: 190px;
      padding: 18px;
      background: var(--sage);
      transform: rotate(3deg);
    }

    .calendar-card strong {
      display: block;
      margin-top: 7px;
      font-family: Fraunces, Georgia, serif;
      font-size: 2.1rem;
      line-height: 0.95;
    }

    .message-card {
      left: 42px;
      bottom: 38px;
      width: 238px;
      padding: 20px;
      background: var(--rose);
      transform: rotate(2deg);
    }

    .mini-player {
      left: 118px;
      top: 238px;
      width: 280px;
      padding: 18px;
      background: #fff;
    }

    .mini-player-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 14px;
    }

    .mini-player strong {
      display: block;
      line-height: 1.2;
    }

    .mini-player span {
      color: var(--muted);
      font-size: 0.86rem;
      font-weight: 700;
    }

    .mini-play {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: var(--tomato);
      flex: 0 0 auto;
      position: relative;
    }

    .mini-play::after {
      content: "";
      position: absolute;
      left: 17px;
      top: 12px;
      border-left: 11px solid #fff;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
    }

    .wave {
      display: flex;
      align-items: center;
      gap: 4px;
      height: 54px;
    }

    .wave i {
      display: block;
      width: 100%;
      min-width: 4px;
      height: var(--h);
      border-radius: 999px;
      background: linear-gradient(180deg, var(--berry), var(--tomato));
      opacity: 0.78;
    }

    .sticker {
      position: absolute;
      display: inline-flex;
      align-items: center;
      min-height: 36px;
      padding: 0 13px;
      border-radius: 999px;
      background: var(--sky);
      color: var(--forest);
      border: 1px solid rgba(36, 26, 23, 0.1);
      font-size: 0.82rem;
      font-weight: 900;
      box-shadow: 0 14px 24px rgba(83, 47, 38, 0.1);
    }

    .sticker.one {
      top: 20px;
      left: 270px;
      transform: rotate(4deg);
    }

    .sticker.two {
      right: 210px;
      bottom: 22px;
      background: var(--lavender);
      transform: rotate(-5deg);
    }

    .sticker.three {
      left: 36px;
      top: 202px;
      background: var(--butter);
      transform: rotate(5deg);
    }

    .photo-orbit {
      position: relative;
      min-height: 560px;
    }

    .hero-photo-frame {
      position: absolute;
      right: 34px;
      top: 28px;
      width: min(420px, 72%);
      aspect-ratio: 0.74;
      overflow: hidden;
      border-radius: 48% 52% 46% 54% / 42% 48% 52% 58%;
      border: 10px solid rgba(255, 253, 248, 0.86);
      background: var(--paper);
      box-shadow: 0 28px 70px rgba(83, 47, 38, 0.18);
      transform: rotate(2deg);
      z-index: 2;
    }

    .hero-photo-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 62%;
    }

    .hero-record {
      position: absolute;
      right: -8px;
      top: -6px;
      width: 152px;
      height: 152px;
      border-radius: 50%;
      background:
        radial-gradient(circle, var(--butter) 0 16%, transparent 17%),
        repeating-radial-gradient(circle, #2a1d1b 0 3px, #4a312e 3px 6px);
      box-shadow: 0 18px 36px rgba(36, 26, 23, 0.16);
      z-index: 1;
    }

    .fun-card {
      position: absolute;
      z-index: 4;
      border: 1px solid rgba(36, 26, 23, 0.13);
      border-radius: var(--radius);
      background: var(--paper);
      box-shadow: 0 18px 38px rgba(83, 47, 38, 0.14);
    }

    .fun-card small {
      display: block;
      margin-bottom: 8px;
      color: var(--berry);
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 0.7rem;
    }

    .fun-card p {
      margin: 0;
      color: var(--ink);
      font-weight: 900;
      line-height: 1.38;
    }

    .hero-song-card {
      left: 16px;
      top: 74px;
      width: 270px;
      padding: 18px;
      transform: rotate(-2deg);
    }

    .hero-song-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 14px;
    }

    .hero-play {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--tomato);
      position: relative;
      flex: 0 0 auto;
    }

    .hero-play::after {
      content: "";
      position: absolute;
      left: 18px;
      top: 13px;
      border-left: 10px solid #fff;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
    }

    .hero-wave {
      display: flex;
      align-items: end;
      gap: 5px;
      height: 54px;
    }

    .hero-wave i {
      display: block;
      width: 100%;
      min-width: 8px;
      height: var(--h);
      border-radius: 999px;
      background: linear-gradient(180deg, #c36b7b, var(--berry));
      opacity: 0.72;
    }

    .hero-note-card {
      left: 0;
      bottom: 102px;
      width: 252px;
      padding: 18px;
      background: var(--rose);
      transform: rotate(2deg);
    }

    .hero-gift-card {
      right: 0;
      bottom: 76px;
      width: 208px;
      padding: 18px;
      background: var(--sage);
      transform: rotate(3deg);
    }

    .hero-gift-card strong {
      display: block;
      margin-top: 7px;
      font-family: Fraunces, Georgia, serif;
      font-size: 2.1rem;
      line-height: 0.95;
    }

    .float-badge {
      position: absolute;
      z-index: 5;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 35px;
      padding: 0 14px;
      border-radius: 999px;
      border: 1px solid rgba(36, 26, 23, 0.12);
      background: var(--butter);
      color: var(--ink);
      font-size: 0.83rem;
      font-weight: 900;
      box-shadow: 0 14px 28px rgba(83, 47, 38, 0.12);
    }

    .float-badge.one {
      left: 8px;
      top: 22px;
      transform: rotate(-7deg);
    }

    .float-badge.two {
      right: 58px;
      top: 354px;
      background: var(--lavender);
      transform: rotate(6deg);
    }

    .float-badge.three {
      left: 172px;
      bottom: 34px;
      background: var(--sky);
      transform: rotate(-4deg);
    }

    .section {
      padding: clamp(64px, 8vw, 104px) 0;
    }

    .section.alt {
      background: var(--paper);
    }

    .section-heading {
      display: grid;
      grid-template-columns: minmax(0, 0.76fr) minmax(280px, 0.54fr);
      gap: clamp(24px, 5vw, 72px);
      align-items: end;
      margin-bottom: 34px;
    }

    .section-heading p:not(.section-kicker),
    .lead {
      margin: 0;
      color: var(--muted);
      font-size: 1.02rem;
    }

    .event-grid {
      display: flex;
      gap: 14px;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 8px 6px 8px;
      margin: 0 -2px;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

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

    .event-card {
      position: relative;
      display: flex;
      flex-direction: column;
      flex: 0 0 222px;
      min-height: 268px;
      padding: 20px;
      border-radius: var(--radius);
      background: var(--paper);
      border: 1px solid var(--line);
      overflow: hidden;
      scroll-snap-align: start;
      transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    }

    .event-card:hover {
      transform: translateY(-4px) rotate(-0.4deg);
      box-shadow: var(--shadow);
      border-color: rgba(134, 52, 73, 0.24);
    }

    .event-card::before {
      content: "";
      position: absolute;
      right: 14px;
      top: 14px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--tone);
      opacity: 0.8;
    }

    .event-card small {
      color: var(--berry);
      font-weight: 900;
      font-size: 0.72rem;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    .event-card h3 {
      margin-top: 34px;
    }

    .event-card p {
      margin: 11px 0 0;
      color: var(--muted);
      font-size: 0.94rem;
    }

    .event-card a {
      display: inline-block;
      margin-top: auto;
      padding-top: 18px;
      color: var(--berry);
      font-size: 0.9rem;
      font-weight: 900;
    }

    .slider-shell {
      position: relative;
    }

    .slider-arrow {
      position: absolute;
      top: 50%;
      z-index: 8;
      width: 46px;
      height: 46px;
      border: 1px solid rgba(36, 26, 23, 0.14);
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: rgba(255, 253, 248, 0.92);
      color: var(--berry);
      box-shadow: 0 16px 34px rgba(83, 47, 38, 0.16);
      cursor: pointer;
      transform: translateY(-50%);
      transition: transform 160ms ease, background 160ms ease, color 160ms ease;
    }

    .slider-arrow:hover,
    .slider-arrow:focus-visible {
      background: var(--berry);
      color: #fff;
      transform: translateY(-50%) scale(1.06);
    }

    .slider-arrow svg {
      width: 21px;
      height: 21px;
      stroke-width: 2.6;
    }

    .slider-arrow.prev {
      left: -18px;
    }

    .slider-arrow.next {
      right: -18px;
    }

    .mood-slider {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      padding: 8px 2px 8px;
      margin: 0 -2px;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .mood-slider::-webkit-scrollbar {
      display: none;
    }

    .mood-card {
      flex: 0 0 min(360px, 82vw);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--paper);
      border: 1px solid var(--line);
      box-shadow: 0 16px 38px rgba(83, 47, 38, 0.08);
      scroll-snap-align: start;
    }

    .mood-card img {
      width: 100%;
      height: 230px;
      display: block;
      object-fit: cover;
    }

    .mood-card div {
      padding: 18px;
    }

    .mood-card p {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 0.95rem;
    }

    .insight-band {
      background: var(--forest);
      color: #fff;
      padding: 34px 0;
    }

    .insight-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      background: rgba(255, 255, 255, 0.13);
    }

    .insight-item {
      padding: 22px;
      background: var(--forest);
    }

    .insight-item strong {
      display: block;
      margin-bottom: 6px;
      color: var(--butter);
      font-family: Fraunces, Georgia, serif;
      font-size: 1.34rem;
      line-height: 1.06;
    }

    .insight-item span {
      color: rgba(255, 255, 255, 0.76);
      font-size: 0.94rem;
      font-weight: 700;
    }

    .personal-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.68fr) minmax(320px, 0.62fr);
      gap: clamp(34px, 6vw, 74px);
      align-items: center;
    }

    .note-stack {
      position: relative;
      min-height: 390px;
    }

    .note {
      position: absolute;
      width: min(290px, 82%);
      padding: 22px;
      border-radius: var(--radius);
      border: 1px solid rgba(36, 26, 23, 0.12);
      box-shadow: var(--shadow);
    }

    .note small {
      display: block;
      margin-bottom: 8px;
      color: var(--berry);
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 0.72rem;
    }

    .note p {
      margin: 0;
      color: var(--ink);
      font-weight: 800;
    }

    .note.one {
      left: 0;
      top: 18px;
      background: var(--rose);
      transform: rotate(-3deg);
    }

    .note.two {
      right: 18px;
      top: 126px;
      background: var(--sage);
      transform: rotate(3deg);
    }

    .note.three {
      left: 56px;
      bottom: 16px;
      background: var(--paper);
      transform: rotate(-1deg);
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    .step {
      position: relative;
      padding: 24px;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: var(--paper);
      overflow: hidden;
      min-height: 245px;
    }

    .step::after {
      content: "";
      position: absolute;
      right: -18px;
      bottom: -18px;
      width: 82px;
      height: 82px;
      border-radius: 50%;
      background: var(--tone, var(--rose));
      opacity: 0.55;
    }

    .step-number {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      margin-bottom: 18px;
      border-radius: 50%;
      background: var(--berry);
      color: #fff;
      font-weight: 900;
      position: relative;
      z-index: 1;
    }

    .step p {
      margin: 12px 0 0;
      color: var(--muted);
      position: relative;
      z-index: 1;
    }

    .step h3 {
      position: relative;
      z-index: 1;
    }

    .reaction-slider {
      display: flex;
      gap: 18px;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 8px 6px 8px;
      margin: 0 -2px;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .reaction-slider::-webkit-scrollbar {
      display: none;
    }

    .reaction-card {
      flex: 0 0 min(292px, 78vw);
      scroll-snap-align: start;
    }

    .video-reactions-section {
      background: var(--cream);
    }

    .video-reactions-section .slider-shell {
      background: transparent;
    }

    .phone-frame {
      position: relative;
      aspect-ratio: 9 / 16;
      border-radius: 32px;
      padding: 14px;
      background: #1f1716;
      box-shadow: 0 24px 60px rgba(36, 26, 23, 0.2);
      overflow: hidden;
    }

    .phone-screen {
      position: relative;
      height: 100%;
      overflow: hidden;
      border-radius: 22px;
      display: grid;
      align-content: end;
      padding: 18px;
      background: #261c19;
    }

    .phone-screen::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(36, 26, 23, 0.02) 0%, rgba(36, 26, 23, 0.16) 42%, rgba(36, 26, 23, 0.84) 100%);
      z-index: 1;
      pointer-events: none;
    }

    .reaction-poster,
    .reaction-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(0.95) contrast(0.96);
    }

    .reaction-poster {
      z-index: 0;
    }

    .reaction-video {
      z-index: 1;
      opacity: 0;
      transition: opacity 180ms ease;
    }

    .phone-screen.has-video .reaction-video {
      opacity: 1;
    }

    .platform-tag {
      position: absolute;
      left: 18px;
      top: 18px;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 0 10px;
      border-radius: 999px;
      background: rgba(255, 253, 248, 0.9);
      color: var(--ink);
      font-size: 0.78rem;
      font-weight: 900;
    }

    .video-play {
      position: absolute;
      left: 50%;
      top: 47%;
      z-index: 2;
      width: 58px;
      height: 58px;
      border: 0;
      border-radius: 50%;
      background: rgba(255, 253, 248, 0.9);
      color: var(--berry);
      transform: translate(-50%, -50%);
      box-shadow: 0 14px 28px rgba(36, 26, 23, 0.22);
      cursor: pointer;
    }

    .video-play::after {
      content: "";
      position: absolute;
      left: 24px;
      top: 18px;
      border-left: 15px solid currentColor;
      border-top: 11px solid transparent;
      border-bottom: 11px solid transparent;
    }

    .phone-screen.is-playing .video-play::after {
      left: 22px;
      top: 18px;
      width: 15px;
      height: 22px;
      border: 0;
      background: linear-gradient(90deg, currentColor 0 38%, transparent 38% 62%, currentColor 62% 100%);
    }

    .reaction-copy {
      position: relative;
      z-index: 2;
      color: #fff;
    }

    .reaction-copy strong {
      display: block;
      font-family: Fraunces, Georgia, serif;
      font-size: 1.4rem;
      line-height: 1.08;
    }

    .reaction-copy span {
      display: block;
      margin-top: 7px;
      color: rgba(255, 255, 255, 0.82);
      font-weight: 700;
      font-size: 0.93rem;
    }

    .sample-section {
      background:
        linear-gradient(135deg, rgba(38, 63, 55, 0.97), rgba(100, 37, 54, 0.96)),
        var(--forest);
      color: #fff;
    }

    .sample-section.is-hidden,
    .example-player-section.is-hidden,
    .mood-section.is-hidden {
      display: none;
    }

    .anchor-target {
      position: absolute;
      top: -120px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    .example-player-section {
      background:
        linear-gradient(180deg, rgba(255, 253, 248, 0.9), rgba(255, 248, 239, 0.98)),
        var(--cream);
    }

    .example-player-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.96fr) minmax(320px, 0.58fr);
      gap: clamp(34px, 6vw, 74px);
      align-items: stretch;
    }

    .example-player-panel {
      display: flex;
      flex-direction: column;
      padding: clamp(20px, 3vw, 34px);
      border: 1px solid rgba(38, 63, 55, 0.16);
      border-radius: 18px;
      background: var(--paper);
      box-shadow: 0 14px 34px rgba(38, 63, 55, 0.07);
    }

    .example-player-heading {
      max-width: 620px;
      margin-bottom: 22px;
    }

    .example-player-heading h2 {
      margin-top: 8px;
      font-size: clamp(2rem, 4vw, 3.15rem);
    }

    .example-filters {
      display: grid;
      gap: 10px;
      margin-bottom: 20px;
    }

    .filter-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }

    .filter-row span {
      width: 58px;
      color: var(--muted);
      font-size: 0.76rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .filter-row button {
      min-height: 32px;
      padding: 0 13px;
      border: 1px solid rgba(38, 63, 55, 0.16);
      border-radius: 999px;
      background: #f4f1ec;
      color: #4c6258;
      cursor: pointer;
      font-size: 0.82rem;
      font-weight: 900;
      box-shadow: inset 0 -1px 0 rgba(36, 26, 23, 0.04);
      transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
    }

    .filter-row button:hover,
    .filter-row button:focus-visible {
      border-color: rgba(38, 63, 55, 0.32);
      background: #e7ece3;
      color: var(--forest);
      transform: translateY(-1px);
    }

    .filter-row button.is-active {
      border-color: var(--forest);
      background: var(--forest);
      color: #fff;
    }

    .rich-player {
      display: grid;
      grid-template-columns: 76px minmax(0, 1fr);
      gap: 20px;
      align-items: center;
      margin-bottom: 16px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 18px;
      background:
        radial-gradient(circle at 18% 22%, rgba(242, 207, 122, 0.24), transparent 26%),
        linear-gradient(135deg, rgba(38, 63, 55, 0.98), rgba(42, 82, 67, 0.97)),
        var(--forest);
      color: #fff;
      box-shadow: 0 18px 34px rgba(38, 63, 55, 0.14);
    }

    .player-art {
      position: relative;
      width: 88px;
      height: 88px;
      border-radius: 22px;
      background:
        radial-gradient(circle at 34% 28%, var(--butter), transparent 28%),
        linear-gradient(135deg, var(--rose), var(--terracotta));
      overflow: hidden;
    }

    .player-art span {
      position: absolute;
      inset: 20px;
      border: 7px solid rgba(36, 26, 23, 0.72);
      border-radius: 50%;
    }

    .player-art i {
      position: absolute;
      right: 15px;
      bottom: 13px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--berry);
    }

    .player-copy small {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--butter);
      font-size: 0.76rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .now-playing::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--butter);
      box-shadow: 0 0 0 6px rgba(242, 207, 122, 0.14);
    }

    .player-copy h3 {
      margin: 4px 0 0;
      color: #fff;
      font-size: 1.45rem;
    }

    .player-copy p {
      margin: 4px 0 12px;
      color: rgba(255, 255, 255, 0.78);
      font-size: 0.92rem;
      font-weight: 700;
    }

    .player-wave {
      height: 38px;
      margin-bottom: 11px;
    }

    .player-wave i {
      background: linear-gradient(180deg, #f4d985, #e5968e);
      opacity: 0.9;
    }

    .player-progress {
      height: 7px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.2);
    }

    .player-progress span {
      display: block;
      width: 38%;
      height: 100%;
      border-radius: inherit;
      background: var(--butter);
    }

    .sample-player.is-playing .player-progress span {
      animation: progress-preview 2.8s linear infinite;
    }

    .player-time {
      display: flex;
      justify-content: space-between;
      margin-top: 7px;
      color: rgba(255, 255, 255, 0.66);
      font-size: 0.73rem;
      font-weight: 800;
    }

    @keyframes progress-preview {
      0% {
        width: 20%;
      }

      50% {
        width: 64%;
      }

      100% {
        width: 38%;
      }
    }

    .track-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
    }

    .demo-track {
      position: relative;
      min-height: 72px;
      padding: 13px 14px 13px 40px;
      border: 1px solid rgba(38, 63, 55, 0.14);
      border-radius: 14px;
      background: #f8f5ee;
      color: var(--ink);
      cursor: pointer;
      text-align: left;
      transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
    }

    .demo-track::before {
      content: "";
      position: absolute;
      left: 15px;
      top: 19px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--sage);
      box-shadow: 0 0 0 4px rgba(38, 63, 55, 0.06);
    }

    .demo-track:hover,
    .demo-track:focus-visible {
      transform: translateY(-1px);
      border-color: rgba(38, 63, 55, 0.32);
      background: #eef4ea;
    }

    .demo-track.is-active {
      border-color: var(--forest);
      background: var(--forest);
      color: #fff;
    }

    .demo-track.is-active::before {
      background: var(--butter);
      box-shadow: 0 0 0 4px rgba(242, 207, 122, 0.18);
    }

    .demo-track[hidden] {
      display: none;
    }

    .demo-track span,
    .demo-track small {
      display: block;
    }

    .demo-track span {
      font-weight: 900;
      line-height: 1.2;
    }

    .demo-track small {
      margin-top: 4px;
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 800;
    }

    .demo-track.is-active small {
      color: rgba(255, 255, 255, 0.74);
    }

    .track-empty {
      margin: 12px 0 0;
      padding: 13px 14px;
      border-radius: 12px;
      background: #f2eee9;
      color: var(--muted);
      font-size: 0.9rem;
      font-weight: 800;
    }

    .example-story {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 24px;
      min-height: 100%;
    }

    .example-story h2 {
      font-size: clamp(2rem, 4vw, 3.15rem);
    }

    .example-story-copy p:not(.section-kicker) {
      margin: 0;
      color: var(--muted);
      font-weight: 700;
    }

    .example-story .button {
      margin-top: 22px;
    }

    .example-mood-visual {
      position: relative;
      width: min(100%, 390px);
      margin: auto 0 0;
      aspect-ratio: 1.05;
    }

    .example-mood-visual img {
      position: absolute;
      inset: 24px 0 0 28px;
      width: calc(100% - 28px);
      height: calc(100% - 24px);
      display: block;
      object-fit: cover;
      border: 10px solid var(--paper);
      border-radius: 42% 58% 48% 52% / 50% 42% 58% 50%;
      box-shadow: 0 24px 58px rgba(83, 47, 38, 0.14);
    }

    .example-record {
      position: absolute;
      left: 0;
      top: 0;
      width: 138px;
      height: 138px;
      border-radius: 50%;
      background:
        repeating-radial-gradient(circle, #211714 0 8px, #30211c 9px 11px),
        #211714;
      box-shadow: 0 18px 40px rgba(36, 26, 23, 0.16);
    }

    .example-record::after {
      content: "";
      position: absolute;
      inset: 51px;
      border-radius: 50%;
      background: var(--butter);
    }

    .example-mood-visual figcaption {
      position: absolute;
      right: 0;
      bottom: 12px;
      max-width: 210px;
      padding: 12px 14px;
      border-radius: 14px;
      background: var(--forest);
      color: #fff;
      font-size: 0.86rem;
      font-weight: 900;
      line-height: 1.25;
    }

    .example-player-feature {
      padding: clamp(74px, 7vw, 110px) 0;
      background:
        linear-gradient(90deg, rgba(255, 248, 239, 0.98) 0 50%, rgba(255, 240, 235, 0.98) 50% 100%),
        var(--cream);
      overflow: hidden;
    }

    .example-player-feature .container {
      width: min(1360px, calc(100% - 64px));
    }

    .example-player-feature .listen-showcase-grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(52px, 6vw, 92px);
      align-items: start;
    }

    .example-player-feature .example-player-panel,
    .example-player-feature .example-story {
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .example-player-feature .example-story {
      gap: 28px;
      justify-content: flex-start;
    }

    .example-player-feature .section-kicker {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-bottom: 10px;
      color: var(--berry);
    }

    .example-player-feature .section-kicker::after {
      content: "";
      flex: 1 1 auto;
      height: 1px;
      min-width: 80px;
      background: rgba(134, 52, 73, 0.38);
    }

    .example-player-feature .example-player-heading,
    .example-player-feature .example-story-copy {
      max-width: 640px;
    }

    .example-player-feature .example-player-heading h2,
    .example-player-feature .example-story h2 {
      max-width: 650px;
      margin-top: 0;
      color: #251216;
      font-size: clamp(3rem, 5.05vw, 4.75rem);
      line-height: 0.94;
      font-weight: 720;
    }

    .example-player-feature .example-player-heading p:not(.section-kicker),
    .example-player-feature .example-story-copy p:not(.section-kicker) {
      max-width: 560px;
      margin: 14px 0 0;
      color: #6d5a51;
      font-size: 1.08rem;
      line-height: 1.45;
      font-weight: 650;
    }

    .example-player-feature .example-filters {
      gap: 13px;
      margin: 28px 0 24px;
    }

    .example-player-feature .filter-row {
      gap: 10px;
    }

    .example-player-feature .filter-row span {
      width: 64px;
      color: #5f5048;
      letter-spacing: 0;
      text-transform: none;
      font-size: 0.92rem;
    }

    .example-player-feature .filter-row button {
      min-height: 38px;
      padding: 0 18px;
      border-color: rgba(134, 52, 73, 0.28);
      background: rgba(255, 253, 248, 0.72);
      color: #5e4a46;
      font-size: 0.92rem;
      box-shadow: none;
    }

    .example-player-feature .filter-row button:hover,
    .example-player-feature .filter-row button:focus-visible,
    .example-player-feature .filter-row button.is-active {
      border-color: var(--berry);
      background: var(--berry);
      color: #fff;
      transform: translateY(-1px);
    }

    .example-player-feature .rich-player {
      position: relative;
      display: grid;
      grid-template-columns: 142px minmax(0, 1fr) 88px;
      min-height: 148px;
      gap: 28px;
      align-items: center;
      margin: 24px 0 16px;
      padding: 22px 24px;
      border: 1px solid rgba(134, 52, 73, 0.18);
      border-radius: 18px;
      background:
        linear-gradient(135deg, rgba(248, 227, 226, 0.78), rgba(255, 253, 248, 0.78)),
        var(--paper);
      color: var(--ink);
      box-shadow: none;
    }

    .example-player-feature .rich-player::before {
      content: "";
      grid-column: 1;
      width: 118px;
      height: 118px;
      border-radius: 50%;
      background-image: url("../images/hero-moeder-dochter.png");
      background-size: cover;
      background-position: center 38%;
      box-shadow: 0 10px 24px rgba(83, 47, 38, 0.14);
    }

    .example-player-feature .rich-player .play-button {
      position: absolute;
      left: 111px;
      bottom: 28px;
      width: 54px;
      height: 54px;
      background: var(--butter);
      color: #321820;
      box-shadow: 0 10px 24px rgba(134, 52, 73, 0.16);
      z-index: 2;
    }

    .example-player-feature .rich-player .play-button::after {
      left: 22px;
      top: 17px;
      border-left-width: 14px;
      border-top-width: 10px;
      border-bottom-width: 10px;
    }

    .example-player-feature .rich-player.is-playing .play-button::after {
      left: 20px;
      top: 17px;
      width: 15px;
      height: 20px;
    }

    .example-player-feature .player-copy {
      grid-column: 2 / 4;
      min-width: 0;
    }

    .example-player-feature .player-copy small {
      color: var(--berry);
      letter-spacing: 0;
      text-transform: none;
      font-size: 0.96rem;
    }

    .example-player-feature .now-playing::before {
      display: none;
    }

    .example-player-feature .player-copy h3 {
      color: #251216;
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 1.35rem;
      font-weight: 900;
      line-height: 1.18;
    }

    .example-player-feature .player-copy p {
      margin: 4px 0 12px;
      color: var(--berry);
      font-size: 0.96rem;
      font-weight: 650;
    }

    .example-player-feature .player-wave {
      height: 34px;
      max-width: 360px;
      margin: 2px 72px 0 0;
    }

    .example-player-feature .player-wave i {
      min-width: 3px;
      background: linear-gradient(180deg, var(--berry), rgba(134, 52, 73, 0.16));
    }

    .example-player-feature .player-progress {
      display: none;
    }

    .example-player-feature .player-time {
      position: absolute;
      right: 24px;
      bottom: 41px;
      width: 72px;
      margin: 0;
      color: var(--berry);
      font-size: 0.86rem;
    }

    .example-player-feature .player-time span:last-child {
      display: none;
    }

    .example-player-feature .player-time span:first-child::after {
      content: "";
    }

    .example-player-feature .player-time span:last-child {
      display: inline;
    }

    .example-player-feature .player-time span:last-child::before {
      content: " / ";
    }

    .example-player-feature .track-list {
      grid-template-columns: 1fr;
      gap: 8px;
    }

    .example-player-feature .demo-track {
      display: grid;
      grid-template-columns: 70px minmax(0, 1fr) 48px;
      align-items: center;
      min-height: 78px;
      padding: 10px 14px;
      border-color: rgba(134, 52, 73, 0.14);
      border-radius: 17px;
      background: rgba(255, 253, 248, 0.78);
      box-shadow: none;
    }

    .example-player-feature .demo-track.is-active {
      display: none;
    }

    .example-player-feature .demo-track::before {
      position: static;
      grid-column: 1;
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background-color: var(--rose);
      background-image: url("../images/sfeer-bruiloft.png");
      background-size: cover;
      background-position: center;
      box-shadow: none;
    }

    .example-player-feature .demo-track:nth-child(3)::before {
      background-image: url("../images/team-3.png");
      background-position: center top;
    }

    .example-player-feature .demo-track:nth-child(4)::before {
      background-image: url("../images/team-1.png");
      background-position: center top;
    }

    .example-player-feature .demo-track:nth-child(5)::before {
      background-image: url("../images/team-4.png");
      background-position: center top;
    }

    .example-player-feature .demo-track:nth-child(6)::before {
      background-image: url("../images/sfeer-verjaardag.png");
    }

    .example-player-feature .demo-track::after {
      content: "▶";
      grid-column: 3;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      justify-self: end;
      width: 38px;
      height: 38px;
      border: 1px solid rgba(134, 52, 73, 0.24);
      border-radius: 50%;
      background: rgba(255, 253, 248, 0.8);
      color: var(--berry);
      font-size: 0.78rem;
      line-height: 1;
    }

    .example-player-feature .demo-track span,
    .example-player-feature .demo-track small {
      grid-column: 2;
    }

    .example-player-feature .demo-track span {
      color: #251216;
      font-family: Fraunces, Georgia, serif;
      font-size: 1.08rem;
      font-weight: 720;
    }

    .example-player-feature .demo-track small {
      color: var(--muted);
      font-size: 0.92rem;
      font-weight: 650;
    }

    .example-player-feature .demo-track:hover,
    .example-player-feature .demo-track:focus-visible {
      border-color: rgba(134, 52, 73, 0.28);
      background: rgba(248, 227, 226, 0.45);
    }

    .example-player-feature .demo-track:hover::after,
    .example-player-feature .demo-track:focus-visible::after {
      background: var(--rose);
    }

    .example-player-feature .examples-link {
      display: inline-flex;
      align-items: center;
      gap: 13px;
      width: fit-content;
      min-height: 52px;
      margin-top: 14px;
      padding: 0 24px;
      border: 1px solid rgba(134, 52, 73, 0.28);
      border-radius: 999px;
      background: rgba(255, 253, 248, 0.72);
      color: var(--berry);
      font-weight: 900;
    }

    .example-player-feature .examples-link span {
      font-size: 1.3rem;
      line-height: 1;
    }

    .example-player-feature .examples-link i {
      font-style: normal;
      font-size: 1.7rem;
      line-height: 1;
    }

    .example-player-feature .example-mood-visual {
      width: min(100%, 620px);
      margin: 42px auto 26px;
      aspect-ratio: 1.18;
    }

    .example-player-feature .example-mood-visual img {
      inset: auto 22px 0 auto;
      width: 82%;
      height: 74%;
      border-width: 9px;
      border-radius: 46% 54% 50% 50% / 46% 42% 58% 54%;
      object-position: center 55%;
      box-shadow: 0 24px 58px rgba(83, 47, 38, 0.13);
      z-index: 2;
    }

    .example-player-feature .example-record {
      left: auto;
      right: -6px;
      top: 38%;
      width: 184px;
      height: 184px;
      z-index: 1;
    }

    .example-player-feature .example-record::after {
      inset: 69px;
    }

    .example-player-feature .example-mood-visual blockquote {
      position: absolute;
      left: 0;
      top: 8%;
      z-index: 3;
      width: min(260px, 47%);
      margin: 0;
      padding: 25px 26px 24px;
      border-radius: 24px 24px 24px 8px;
      background: rgba(255, 250, 228, 0.96);
      color: #3d2a26;
      font-family: Fraunces, Georgia, serif;
      font-size: 1.28rem;
      font-style: italic;
      line-height: 1.25;
      transform: rotate(-6deg);
      box-shadow: 0 18px 38px rgba(83, 47, 38, 0.11);
    }

    .example-player-feature .example-mood-visual blockquote::before {
      content: "“";
      display: block;
      margin-bottom: -10px;
      color: var(--gold);
      font-size: 2.3rem;
      font-style: normal;
      line-height: 0.8;
    }

    .example-player-feature .example-mood-visual cite {
      display: block;
      margin-top: 13px;
      color: var(--muted);
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 0.92rem;
      font-style: normal;
      font-weight: 750;
    }

    .example-player-feature .example-mood-visual cite::before {
      content: "- ";
    }

    .example-player-feature .handwritten-note {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 4;
      max-width: 170px;
      color: var(--berry);
      font-family: "Segoe Print", "Bradley Hand ITC", "Comic Sans MS", cursive;
      font-size: 1.35rem;
      line-height: 1.12;
      transform: rotate(-9deg);
    }

    .example-player-feature .handwritten-note::before {
      content: "";
      position: absolute;
      left: -58px;
      bottom: -42px;
      width: 52px;
      height: 62px;
      border-left: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      border-radius: 0 0 0 54px;
      transform: rotate(32deg);
      opacity: 0.85;
    }

    .example-player-feature .listen-benefits {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .example-player-feature .listen-benefits div {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 13px;
      align-items: center;
      min-height: 74px;
      padding: 13px 16px;
      border: 1px solid rgba(134, 52, 73, 0.16);
      border-radius: 14px;
      background: rgba(255, 253, 248, 0.48);
    }

    .example-player-feature .listen-benefits span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(248, 227, 226, 0.82);
      color: var(--berry);
      font-size: 1.1rem;
    }

    .example-player-feature .listen-benefits strong {
      color: #251216;
      font-weight: 900;
      line-height: 1.15;
    }

    .sample-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.68fr) minmax(330px, 0.6fr);
      gap: clamp(32px, 6vw, 72px);
      align-items: center;
    }

    .sample-section .section-kicker {
      color: var(--butter);
    }

    .sample-section .lead {
      color: rgba(255, 255, 255, 0.76);
    }

    .example-list {
      display: grid;
      gap: 12px;
      margin-top: 28px;
    }

    .example-pill {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 16px;
      border-radius: var(--radius);
      border: 1px solid rgba(255, 255, 255, 0.16);
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.86);
      font-weight: 800;
    }

    .sample-player {
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.1);
      padding: 26px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    }

    .player-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 22px;
    }

    .player-top p {
      margin: 0;
      color: rgba(255, 255, 255, 0.72);
      font-size: 0.94rem;
      font-weight: 700;
    }

    .play-button {
      width: 52px;
      height: 52px;
      border: 0;
      border-radius: 50%;
      background: var(--butter);
      color: var(--ink);
      cursor: pointer;
      position: relative;
      flex: 0 0 auto;
    }

    .rich-player .play-button {
      width: 68px;
      height: 68px;
      align-self: center;
      background: var(--butter);
      box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
    }

    .play-button::after {
      content: "";
      position: absolute;
      left: 21px;
      top: 16px;
      border-left: 13px solid currentColor;
      border-top: 9px solid transparent;
      border-bottom: 9px solid transparent;
    }

    .rich-player .play-button::after {
      left: 28px;
      top: 21px;
      border-left-width: 16px;
      border-top-width: 11px;
      border-bottom-width: 11px;
    }

    .sample-player.is-playing .play-button::after {
      left: 19px;
      top: 16px;
      width: 14px;
      height: 19px;
      border: 0;
      background: linear-gradient(90deg, currentColor 0 36%, transparent 36% 64%, currentColor 64% 100%);
    }

    .rich-player.is-playing .play-button::after {
      left: 25px;
      top: 22px;
      width: 18px;
      height: 24px;
    }

    .sample-player.is-playing .wave i {
      animation: bounce 900ms ease-in-out infinite alternate;
      animation-delay: calc(var(--i) * -65ms);
    }

    @keyframes bounce {
      from {
        transform: scaleY(0.64);
        opacity: 0.48;
      }

      to {
        transform: scaleY(1.08);
        opacity: 1;
      }
    }

    .order-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.7fr) minmax(340px, 0.6fr);
      gap: clamp(34px, 6vw, 76px);
      align-items: start;
    }

    .check-list {
      display: grid;
      gap: 12px;
      margin: 28px 0 0;
      padding: 0;
      list-style: none;
    }

    .check-list li {
      display: flex;
      gap: 11px;
      color: var(--muted);
      font-weight: 700;
    }

    .check-list li::before {
      content: "";
      width: 10px;
      height: 10px;
      margin-top: 8px;
      border-radius: 50%;
      background: var(--tomato);
      box-shadow: 0 0 0 5px rgba(206, 79, 72, 0.13);
      flex: 0 0 auto;
    }

    .order-panel {
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: #fff;
      padding: clamp(22px, 4vw, 34px);
      box-shadow: var(--shadow);
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 18px;
    }

    .chips span {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 0 10px;
      border-radius: 999px;
      background: var(--rose);
      color: var(--berry);
      font-size: 0.8rem;
      font-weight: 900;
    }

    .form-grid {
      display: grid;
      gap: 15px;
    }

    label {
      display: grid;
      gap: 7px;
      color: var(--ink);
      font-size: 0.9rem;
      font-weight: 900;
    }

    input,
    select,
    textarea {
      width: 100%;
      min-height: 50px;
      border: 1px solid rgba(36, 26, 23, 0.16);
      border-radius: var(--radius);
      background: var(--paper);
      color: var(--ink);
      padding: 12px 14px;
      outline: none;
    }

    textarea {
      min-height: 118px;
      resize: vertical;
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: var(--berry);
      box-shadow: 0 0 0 4px rgba(134, 52, 73, 0.12);
    }

    .submit {
      width: 100%;
      margin-top: 2px;
      background: var(--berry);
      color: #fff;
    }

    .reviews {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .review {
      position: relative;
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--paper);
    }

    .review::before {
      content: "";
      position: absolute;
      width: 34px;
      height: 5px;
      top: -3px;
      left: 22px;
      border-radius: 999px;
      background: var(--butter);
      transform: rotate(-2deg);
    }

    .review p {
      margin: 0;
      color: var(--ink);
      font-weight: 650;
    }

    .review strong {
      display: block;
      margin-top: 18px;
      color: var(--berry);
      font-size: 0.9rem;
    }

    .review-showcase {
      overflow: hidden;
      background:
        linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
    }

    .center-heading {
      max-width: 780px;
      margin: 0 auto 38px;
      text-align: center;
    }

    .center-heading .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }

    .center-heading .section-kicker::before,
    .center-heading .section-kicker::after {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 2px;
      background: var(--berry);
      box-shadow: 0 8px 18px rgba(134, 52, 73, 0.24);
    }

    .center-heading p {
      margin: 18px auto 0;
      max-width: 620px;
      color: var(--muted);
    }

    .review-track {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
      padding: 8px 0 0;
    }

    .review-card {
      min-height: 255px;
      border-radius: 28px;
      background: rgba(255, 253, 248, 0.92);
      border: 1px solid rgba(36, 26, 23, 0.08);
      padding: 28px;
      box-shadow: none;
    }

    .review-quote {
      min-height: 86px;
      margin: 0;
      color: var(--muted);
      font-size: 1.03rem;
      font-weight: 700;
    }

    .review-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      border-top: 1px solid rgba(36, 26, 23, 0.1);
      margin-top: 26px;
      padding-top: 22px;
    }

    .review-person {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .review-avatar {
      width: 62px;
      height: 62px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, var(--forest), var(--berry));
      color: #fff;
      font-weight: 900;
      box-shadow: 0 12px 24px rgba(36, 26, 23, 0.14);
    }

    .review-person strong {
      display: block;
      color: var(--ink);
      font-size: 1.18rem;
      line-height: 1.1;
    }

    .review-person span {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-weight: 700;
    }

    .review-stars {
      display: inline-flex;
      align-items: center;
      min-height: 36px;
      padding: 0 14px;
      border-radius: 999px;
      background: var(--paper);
      color: #f2a51a;
      font-weight: 900;
      letter-spacing: 1px;
      white-space: nowrap;
    }

    .about-section {
      background:
        radial-gradient(circle at 12% 20%, rgba(242, 207, 122, 0.28), transparent 20%),
        linear-gradient(180deg, var(--cream), var(--paper));
    }

    .about-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(32px, 5vw, 56px);
      align-items: start;
    }

    .about-copy p {
      color: var(--muted);
      font-size: 1.04rem;
    }

    .about-copy {
      max-width: 880px;
    }

    .about-copy p:last-of-type {
      margin-bottom: 0;
    }

    .about-points {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 28px;
    }

    .about-point {
      min-height: 92px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 253, 248, 0.7);
      padding: 16px;
    }

    .about-point strong {
      display: block;
      color: var(--berry);
      font-family: Fraunces, Georgia, serif;
      font-size: 1.2rem;
      line-height: 1.05;
    }

    .about-point span {
      display: block;
      margin-top: 7px;
      color: var(--muted);
      font-size: 0.9rem;
      font-weight: 700;
    }

    .about-photos {
      position: relative;
      min-height: 560px;
    }

    .team-collage {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(14px, 2vw, 22px);
      align-items: start;
      padding: 18px 0 12px;
    }

    .team-photo {
      margin: 0;
      overflow: hidden;
      border-radius: 16px;
      border: 1px solid rgba(36, 26, 23, 0.1);
      background: var(--paper);
      aspect-ratio: 1;
      position: relative;
    }

    .team-photo:nth-child(1) {
      transform: translateY(18px) rotate(-1.5deg);
    }

    .team-photo:nth-child(2) {
      transform: translateY(-6px) rotate(1deg);
    }

    .team-photo:nth-child(3) {
      transform: translateY(10px) rotate(-0.8deg);
    }

    .team-photo:nth-child(4) {
      transform: translateY(-12px) rotate(1.4deg);
    }

    .team-photo img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .about-photo {
      position: absolute;
      overflow: hidden;
      border-radius: 28px;
      box-shadow: 0 24px 58px rgba(83, 47, 38, 0.14);
      border: 8px solid rgba(255, 253, 248, 0.84);
      background: var(--paper);
      margin: 0;
    }

    .about-photo img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .about-photo.music {
      left: 0;
      top: 0;
      width: 68%;
      height: 335px;
      transform: rotate(-2deg);
      z-index: 2;
    }

    .about-photo.marketing {
      right: 0;
      bottom: 0;
      width: 72%;
      height: 350px;
      transform: rotate(2deg);
      z-index: 1;
    }

    .synergy-card {
      position: absolute;
      left: 50%;
      top: 47%;
      z-index: 3;
      width: min(270px, 78%);
      transform: translate(-50%, -50%) rotate(-1deg);
      border-radius: var(--radius);
      background: var(--forest);
      color: #fff;
      padding: 20px;
      box-shadow: 0 20px 44px rgba(36, 26, 23, 0.22);
    }

    .synergy-card small {
      color: var(--butter);
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-size: 0.72rem;
    }

    .synergy-card p {
      margin: 8px 0 0;
      font-family: Fraunces, Georgia, serif;
      font-size: 1.35rem;
      line-height: 1.06;
    }

    .event-card,
    .mood-card,
    .step,
    .order-panel,
    .review-card,
    .review,
    .note,
    .sample-player,
    .phone-frame,
    .team-photo,
    .about-point {
      box-shadow: none;
    }

    .event-card:hover {
      box-shadow: 0 10px 24px rgba(83, 47, 38, 0.07);
    }

    .hero-photo-frame,
    .fun-card,
    .slider-arrow {
      box-shadow: 0 10px 28px rgba(83, 47, 38, 0.1);
    }

    .faq-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.58fr) minmax(340px, 0.82fr);
      gap: clamp(34px, 6vw, 78px);
      align-items: start;
    }

    details {
      border-top: 1px solid var(--line);
      padding: 20px 0;
    }

    details:last-child {
      border-bottom: 1px solid var(--line);
    }

    summary {
      cursor: pointer;
      list-style: none;
      display: flex;
      justify-content: space-between;
      gap: 18px;
      color: var(--ink);
      font-weight: 900;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    summary::after {
      content: "+";
      color: var(--berry);
      font-weight: 900;
    }

    details[open] summary::after {
      content: "-";
    }

    details p {
      margin: 10px 0 0;
      color: var(--muted);
    }

    .site-footer {
      background: var(--forest);
      color: rgba(255, 255, 255, 0.78);
      padding: clamp(76px, 8vw, 108px) 0 30px;
      overflow: hidden;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: minmax(220px, 1.25fr) minmax(150px, 0.8fr) minmax(150px, 0.9fr) minmax(250px, 1.1fr);
      gap: clamp(34px, 5vw, 74px);
      align-items: start;
    }

    .footer-logo {
      display: inline-flex;
      align-items: center;
      padding: 9px 12px;
      border-radius: 12px;
      background: var(--paper);
      border: 1px solid rgba(255, 255, 255, 0.18);
      margin-bottom: 18px;
    }

    .footer-logo-image {
      display: block;
      width: 206px;
      max-width: 100%;
      height: auto;
    }

    .footer-col h3 {
      margin: 0 0 18px;
      color: #fff;
      font-family: Inter, system-ui, sans-serif;
      font-size: 0.86rem;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .footer-col p,
    .footer-col address {
      margin: 0;
      color: rgba(255, 255, 255, 0.76);
      font-style: normal;
      font-weight: 750;
      max-width: 30ch;
    }

    .footer-col address a {
      color: #fff;
      font-weight: 850;
    }

    .footer-links {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .footer-links a {
      color: rgba(255, 255, 255, 0.78);
      font-weight: 850;
      transition: color 160ms ease, transform 160ms ease;
    }

    .footer-links a:hover,
    .footer-links a:focus-visible {
      color: #fff;
      transform: translateX(3px);
    }

    .newsletter-form {
      display: grid;
      gap: 10px;
      margin-top: 18px;
      max-width: 340px;
    }

    .newsletter-form input {
      min-height: 48px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      background: rgba(255, 255, 255, 0.08);
      color: #fff;
      padding: 0 16px;
      font-weight: 750;
    }

    .newsletter-form input::placeholder {
      color: rgba(255, 255, 255, 0.56);
    }

    .newsletter-form button {
      min-height: 48px;
      border: 0;
      border-radius: 999px;
      background: var(--butter);
      color: var(--ink);
      font-weight: 900;
      cursor: pointer;
      transition: transform 160ms ease, filter 160ms ease;
    }

    .newsletter-form button:hover,
    .newsletter-form button:focus-visible {
      transform: translateY(-1px);
      filter: brightness(1.03);
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
      margin-top: clamp(56px, 7vw, 76px);
      padding-top: 24px;
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      color: rgba(255, 255, 255, 0.58);
      font-size: 0.9rem;
      font-weight: 700;
    }

    @media (max-width: 980px) {
      .header-inner {
        justify-content: flex-start;
        gap: 8px;
      }

      .brand {
        margin-right: auto;
      }

      .mobile-form-shortcut {
        display: inline-flex;
        order: 2;
      }

      .menu-toggle {
        display: inline-flex;
        order: 3;
      }

      .primary-nav {
        display: none;
      }

      body.menu-is-open {
        overflow: hidden;
      }

      .site-header.menu-open {
        background: var(--forest);
        border-bottom-color: rgba(255, 255, 255, 0.12);
        backdrop-filter: none;
      }

      .site-header.menu-open .topbar,
      .site-header.menu-open .header-cta {
        display: none;
      }

      .site-header.menu-open .header-inner {
        position: fixed;
        top: 0;
        left: 50%;
        z-index: 70;
        width: min(var(--container), calc(100% - 28px));
        min-height: 78px;
        transform: translateX(-50%);
      }

      .admin-bar .site-header.menu-open .header-inner {
        top: 32px;
      }

      .site-header.menu-open .brand {
        padding: 7px 10px;
        border-radius: 10px;
        background: var(--paper);
      }

      .site-header.menu-open .mobile-form-shortcut {
        display: none;
      }

      .mobile-menu {
        position: fixed;
        inset: 0;
        z-index: 60;
        display: block;
        padding: 106px 24px 26px;
        background: var(--forest);
        opacity: 0;
        overflow-y: auto;
        pointer-events: none;
        transform: translateY(-6px);
        transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
        visibility: hidden;
      }

      .admin-bar .site-header.menu-open .mobile-menu {
        padding-top: 138px;
      }

      .site-header.menu-open .mobile-menu {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        visibility: visible;
      }

      .mobile-menu-inner {
        display: flex;
        flex-direction: column;
        width: min(100%, 520px);
        margin: 0 auto;
      }

      .mobile-menu-link {
        display: flex;
        align-items: center;
        min-height: 62px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
        color: #fff;
        font-family: Fraunces, Georgia, serif;
        font-size: 1.52rem;
        font-weight: 650;
        line-height: 1.1;
      }

      .mobile-menu-link:hover,
      .mobile-menu-link:focus-visible {
        color: var(--butter);
      }

      .mobile-menu-actions {
        display: grid;
        gap: 10px;
        padding-top: 28px;
      }

      .mobile-menu-actions .button {
        width: 100%;
        min-height: 50px;
        box-shadow: none;
      }

      .mobile-menu-actions .button-primary {
        background: var(--butter);
        color: var(--ink);
      }

      .mobile-menu-actions .cta-icon {
        background: rgba(36, 26, 23, 0.12);
        color: var(--ink);
      }

      .hero-inner,
      .section-heading,
      .personal-grid,
      .example-player-grid,
      .sample-grid,
      .order-grid,
      .faq-grid,
      .about-grid {
        grid-template-columns: 1fr;
      }

      .hero-visual {
        min-height: 520px;
      }

      .photo-orbit {
        min-height: 520px;
      }

      .event-grid {
        grid-template-columns: none;
      }

      .example-story {
        order: initial;
      }

      .example-mood-visual {
        max-width: 360px;
      }

      .insight-grid,
      .steps,
      .reviews,
      .about-points,
      .review-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .about-photos {
        min-height: 520px;
      }

      .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 640px) {
      .admin-bar .site-header {
        top: 46px;
      }

      .admin-bar .site-header.menu-open .header-inner {
        top: 46px;
      }

      .admin-bar .site-header.menu-open .mobile-menu {
        padding-top: 140px;
      }

      .container {
        width: min(100% - 28px, var(--container));
        max-width: calc(100vw - 28px);
      }

      .header-inner {
        min-height: 68px;
      }

      .brand-logo {
        width: 148px;
        max-height: 54px;
      }

      .topbar-inner {
        width: 300vw;
        max-width: none;
        min-height: 36px;
        justify-content: flex-start;
        overflow: visible;
        margin: 0;
        padding: 0;
        gap: 0;
        animation: topbar-cycle 12s ease-in-out infinite;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      .topbar-inner::-webkit-scrollbar {
        display: none;
      }

      .topbar-item:not(:last-child)::after {
        display: none;
      }

      .topbar-item {
        flex: 0 0 100vw;
        justify-content: center;
        padding: 0 18px;
        text-align: center;
        white-space: normal;
      }

      @keyframes topbar-cycle {
        0%,
        24% {
          transform: translateX(0);
        }

        33%,
        57% {
          transform: translateX(-100vw);
        }

        66%,
        90% {
          transform: translateX(-200vw);
        }

        100% {
          transform: translateX(0);
        }
      }

      .header-cta {
        display: none;
      }

      .hero {
        padding-top: 42px;
      }

      h1 {
        max-width: min(100%, 340px);
        font-size: clamp(2rem, 8.4vw, 2.3rem);
        white-space: normal;
        overflow-wrap: normal;
      }

      h2 {
        font-size: clamp(1.72rem, 8vw, 2.35rem);
      }

      .button {
        width: 100%;
        max-width: 100%;
        padding: 0 16px;
        text-align: center;
      }

      .hero-copy {
        width: min(100%, 420px, calc(100vw - 90px));
        min-width: 0;
        max-width: min(420px, calc(100vw - 90px));
        overflow: visible;
      }

      .hero-copy p:not(.eyebrow) {
        max-width: min(420px, calc(100vw - 90px));
        font-size: 0.98rem;
        overflow-wrap: break-word;
      }

      .hero-actions {
        flex-direction: column;
        align-items: stretch;
        width: min(100%, 420px, calc(100vw - 90px));
        max-width: min(420px, calc(100vw - 90px));
      }

      .hero-copy,
      .hero-copy p:not(.eyebrow),
      .hero-actions,
      .hero-actions .button {
        width: min(300px, calc(100vw - 48px));
        max-width: min(300px, calc(100vw - 48px));
      }

      .hero-inner {
        width: 100%;
        max-width: calc(100vw - 48px);
      }

      .trust-list {
        width: 100%;
        max-width: calc(100vw - 48px);
        flex-wrap: wrap;
        overflow-x: visible;
        padding-bottom: 0;
      }

      .trust-list::-webkit-scrollbar {
        display: none;
      }

      .trust-list span {
        flex: 0 1 auto;
      }

      .hero-visual,
      .song-board {
        min-height: 560px;
      }

      .photo-orbit {
        min-height: 560px;
      }

      .hero-photo-frame {
        width: min(310px, 76%);
        right: 0;
        top: 22px;
        border-width: 8px;
      }

      .hero-record {
        width: 120px;
        height: 120px;
        right: -14px;
        top: 4px;
      }

      .hero-song-card {
        left: 0;
        top: 78px;
        width: min(244px, 72vw);
      }

      .hero-note-card {
        left: 0;
        bottom: 106px;
        width: min(236px, 72vw);
      }

      .hero-gift-card {
        right: 0;
        bottom: 64px;
        width: min(176px, 52vw);
      }

      .hero-gift-card strong {
        font-size: 1.7rem;
      }

      .float-badge.one {
        left: 2px;
        top: 24px;
      }

      .float-badge.two {
        right: 4px;
        top: 332px;
      }

      .float-badge.three {
        left: 132px;
        bottom: 24px;
      }

      .slider-arrow.prev {
        left: 2px;
      }

      .slider-arrow.next {
        right: 2px;
      }

      .event-card {
        flex-basis: min(252px, 82vw);
      }

      .example-player-panel {
        padding: 18px;
      }

      .filter-row span {
        width: 100%;
      }

      .rich-player {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 14px;
        padding: 16px;
      }

      .rich-player .play-button {
        width: 58px;
        height: 58px;
      }

      .rich-player .play-button::after {
        left: 24px;
        top: 18px;
        border-left-width: 14px;
        border-top-width: 10px;
        border-bottom-width: 10px;
      }

      .rich-player.is-playing .play-button::after {
        left: 21px;
        top: 19px;
        width: 16px;
        height: 21px;
      }

      .player-art {
        width: 62px;
        height: 62px;
        border-radius: 16px;
      }

      .player-art span {
        inset: 14px;
        border-width: 5px;
      }

      .player-art i {
        right: 10px;
        bottom: 10px;
        width: 14px;
        height: 14px;
      }

      .player-copy h3 {
        font-size: 1.12rem;
      }

      .track-list {
        grid-template-columns: 1fr;
      }

      .example-mood-visual {
        width: min(100%, 320px);
      }

      .record {
        width: 180px;
        height: 180px;
        right: 18px;
      }

      .lyric-card {
        width: 210px;
        left: 18px;
      }

      .mini-player {
        width: calc(100% - 44px);
        left: 22px;
        top: 246px;
      }

      .message-card {
        left: 18px;
        bottom: 32px;
        width: 224px;
      }

      .calendar-card {
        right: 20px;
        bottom: 126px;
        width: 156px;
      }

      .sticker.one {
        left: 170px;
      }

      .sticker.two {
        right: 28px;
        bottom: 16px;
      }

      .event-grid,
      .insight-grid,
      .steps,
      .reviews,
      .about-points,
      .review-track {
        grid-template-columns: 1fr;
      }

      .review-card {
        min-height: auto;
        padding: 22px;
      }

      .review-meta {
        align-items: flex-start;
        flex-direction: column;
      }

      .about-photos {
        min-height: 520px;
      }

      .team-collage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 8px 0 94px;
      }

      .team-photo:nth-child(1) {
        transform: translateY(10px) rotate(-1.4deg);
      }

      .team-photo:nth-child(2) {
        transform: translateY(-4px) rotate(1.2deg);
      }

      .team-photo:nth-child(3) {
        transform: translateY(4px) rotate(1.1deg);
      }

      .team-photo:nth-child(4) {
        transform: translateY(-8px) rotate(-1deg);
      }

      .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
      }

      .about-photo.music,
      .about-photo.marketing {
        width: 86%;
        height: 260px;
      }

      .about-photo.music {
        left: 0;
      }

      .about-photo.marketing {
        right: 0;
      }

      .synergy-card {
        top: 50%;
        width: min(250px, 86%);
      }

      .note-stack {
        min-height: 460px;
      }

      .note {
        width: min(270px, 92%);
      }

      .note.two {
        right: 0;
      }

      .note.three {
        left: 16px;
      }
    }

    @media (max-width: 1020px) {
      .example-player-feature {
        background: var(--cream);
      }

      .example-player-feature .container {
        width: min(100% - 40px, 760px);
      }

      .example-player-feature .listen-showcase-grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }

      .example-player-feature .example-player-heading h2,
      .example-player-feature .example-story h2 {
        font-size: clamp(2.35rem, 9vw, 3.5rem);
      }

      .example-player-feature .example-story {
        padding-top: 10px;
      }

      .example-player-feature .example-mood-visual {
        width: min(100%, 560px);
        margin-inline: auto;
      }
    }

    @media (max-width: 640px) {
      .example-player-feature {
        padding: 58px 0 66px;
      }

      .example-player-feature .container {
        width: calc(100% - 28px);
      }

      .example-player-feature .section-kicker {
        gap: 12px;
        font-size: 0.72rem;
      }

      .example-player-feature .section-kicker::after {
        min-width: 44px;
      }

      .example-player-feature .example-player-heading p:not(.section-kicker),
      .example-player-feature .example-story-copy p:not(.section-kicker) {
        font-size: 1rem;
      }

      .example-player-feature .filter-row {
        display: grid;
        grid-template-columns: 58px repeat(3, auto);
        justify-content: start;
      }

      .example-player-feature .genre-row {
        grid-template-columns: 58px repeat(2, auto);
      }

      .example-player-feature .filter-row span {
        width: auto;
        align-self: center;
      }

      .example-player-feature .filter-row button {
        min-height: 34px;
        padding: 0 13px;
        font-size: 0.82rem;
      }

      .example-player-feature .rich-player {
        grid-template-columns: 86px minmax(0, 1fr);
        gap: 14px;
        min-height: 126px;
        padding: 16px;
      }

      .example-player-feature .rich-player::before {
        width: 82px;
        height: 82px;
      }

      .example-player-feature .rich-player .play-button {
        left: 70px;
        bottom: 17px;
        width: 42px;
        height: 42px;
      }

      .example-player-feature .rich-player .play-button::after {
        left: 17px;
        top: 13px;
        border-left-width: 11px;
        border-top-width: 8px;
        border-bottom-width: 8px;
      }

      .example-player-feature .rich-player.is-playing .play-button::after {
        left: 16px;
        top: 13px;
        width: 12px;
        height: 17px;
      }

      .example-player-feature .player-copy {
        grid-column: 2;
      }

      .example-player-feature .player-copy h3 {
        font-size: 1.08rem;
      }

      .example-player-feature .player-copy p {
        font-size: 0.82rem;
      }

      .example-player-feature .player-wave {
        height: 24px;
        margin-right: 0;
      }

      .example-player-feature .player-time {
        position: static;
        width: auto;
        margin-top: 4px;
        font-size: 0.76rem;
      }

      .example-player-feature .demo-track {
        grid-template-columns: 54px minmax(0, 1fr) 36px;
        min-height: 68px;
        padding: 8px 10px;
      }

      .example-player-feature .demo-track::before {
        width: 44px;
        height: 44px;
      }

      .example-player-feature .demo-track::after {
        width: 32px;
        height: 32px;
      }

      .example-player-feature .demo-track span {
        font-size: 0.98rem;
      }

      .example-player-feature .demo-track small {
        font-size: 0.78rem;
      }

      .example-player-feature .examples-link {
        width: 100%;
        justify-content: center;
        padding: 0 16px;
      }

      .example-player-feature .example-mood-visual {
        aspect-ratio: 0.92;
        margin-top: 28px;
      }

      .example-player-feature .example-mood-visual img {
        right: 0;
        width: 88%;
        height: 64%;
      }

      .example-player-feature .example-record {
        right: -32px;
        top: 43%;
        width: 132px;
        height: 132px;
      }

      .example-player-feature .example-record::after {
        inset: 49px;
      }

      .example-player-feature .example-mood-visual blockquote {
        width: min(240px, 62%);
        padding: 18px 18px 17px;
        font-size: 1.02rem;
      }

      .example-player-feature .handwritten-note {
        right: 8px;
        top: 3px;
        max-width: 120px;
        font-size: 1rem;
      }

      .example-player-feature .handwritten-note::before {
        display: none;
      }

      .example-player-feature .listen-benefits {
        grid-template-columns: 1fr;
      }
    }

    .example-player-feature {
      padding: clamp(56px, 6vw, 82px) 0;
      background:
        radial-gradient(circle at 18% 12%, rgba(248, 227, 226, 0.62), transparent 28%),
        linear-gradient(180deg, rgba(255, 248, 239, 0.98), rgba(255, 253, 248, 0.96)),
        var(--cream);
    }

    .example-player-feature .container {
      width: min(820px, calc(100% - 48px));
    }

    .example-player-feature .listen-showcase-grid {
      display: block;
    }

    .example-player-feature .example-story {
      display: none;
    }

    .example-player-feature .example-player-heading {
      max-width: 760px;
    }

    .example-player-feature .example-player-heading h2 {
      max-width: 720px;
      font-size: clamp(2.15rem, 4.3vw, 3.45rem);
      line-height: 1.02;
    }

    .example-player-feature .example-player-heading p:not(.section-kicker) {
      max-width: 620px;
      font-size: 1rem;
      font-weight: 620;
    }

    .example-player-feature .example-filters {
      margin: 23px 0 18px;
    }

    .example-player-feature .rich-player {
      grid-template-columns: 118px minmax(0, 1fr) 70px;
      min-height: 124px;
      gap: 20px;
      margin: 18px 0 12px;
      padding: 18px 20px;
      border-radius: 16px;
    }

    .example-player-feature .rich-player::before {
      width: 92px;
      height: 92px;
    }

    .example-player-feature .rich-player .play-button {
      left: 88px;
      bottom: 22px;
      width: 46px;
      height: 46px;
    }

    .example-player-feature .rich-player .play-button::after {
      left: 19px;
      top: 14px;
      border-left-width: 12px;
      border-top-width: 9px;
      border-bottom-width: 9px;
    }

    .example-player-feature .rich-player.is-playing .play-button::after {
      left: 17px;
      top: 14px;
      width: 13px;
      height: 18px;
    }

    .example-player-feature .player-copy h3 {
      font-size: 1.2rem;
    }

    .example-player-feature .player-copy p,
    .example-player-feature .player-copy small {
      font-size: 0.88rem;
    }

    .example-player-feature .player-wave {
      height: 28px;
      margin-right: 64px;
    }

    .example-player-feature .player-time {
      bottom: 32px;
      right: 20px;
      font-size: 0.8rem;
    }

    .example-player-feature .demo-track {
      min-height: 66px;
      grid-template-columns: 58px minmax(0, 1fr) 40px;
      border-radius: 14px;
      padding: 8px 12px;
    }

    .example-player-feature .demo-track::before {
      width: 46px;
      height: 46px;
    }

    .example-player-feature .demo-track::after {
      width: 34px;
      height: 34px;
    }

    .example-player-feature .demo-track span {
      font-size: 1rem;
    }

    .example-player-feature .demo-track small {
      font-size: 0.82rem;
    }

    .personal-story-visual {
      position: relative;
      width: min(100%, 560px);
      min-height: 430px;
      margin: 0 auto;
    }

    .personal-story-visual img {
      position: absolute;
      right: 18px;
      bottom: 16px;
      z-index: 2;
      width: 82%;
      height: 64%;
      display: block;
      object-fit: cover;
      object-position: center 54%;
      border: 9px solid var(--paper);
      border-radius: 48% 52% 50% 50% / 46% 42% 58% 54%;
      box-shadow: 0 20px 48px rgba(83, 47, 38, 0.12);
    }

    .personal-story-record {
      position: absolute;
      right: -6px;
      bottom: 112px;
      z-index: 1;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background:
        repeating-radial-gradient(circle, #211714 0 7px, #30211c 8px 10px),
        #211714;
      box-shadow: 0 16px 34px rgba(36, 26, 23, 0.14);
    }

    .personal-story-record::after {
      content: "";
      position: absolute;
      inset: 56px;
      border-radius: 50%;
      background: var(--butter);
    }

    .personal-story-visual blockquote {
      position: absolute;
      left: 0;
      top: 34px;
      z-index: 3;
      width: min(250px, 48%);
      margin: 0;
      padding: 22px 24px 21px;
      border-radius: 23px 23px 23px 8px;
      background: rgba(255, 250, 228, 0.96);
      color: #3d2a26;
      font-family: Fraunces, Georgia, serif;
      font-size: 1.16rem;
      font-style: italic;
      font-weight: 650;
      line-height: 1.24;
      transform: rotate(-5deg);
      box-shadow: 0 16px 34px rgba(83, 47, 38, 0.1);
    }

    .personal-story-visual blockquote::before {
      content: "“";
      display: block;
      margin-bottom: -8px;
      color: var(--gold);
      font-size: 2rem;
      line-height: 0.8;
    }

    .personal-story-visual cite {
      display: block;
      margin-top: 12px;
      color: var(--muted);
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 0.85rem;
      font-style: normal;
      font-weight: 850;
    }

    .personal-story-visual cite::before {
      content: "- ";
    }

    .personal-handwritten {
      position: absolute;
      right: 48px;
      top: 6px;
      z-index: 4;
      color: var(--berry);
      font-family: "Segoe Print", "Bradley Hand ITC", "Comic Sans MS", cursive;
      font-size: 1.23rem;
      line-height: 1.1;
      transform: rotate(-8deg);
    }

    .personal-handwritten span {
      display: block;
    }

    .personal-handwritten::before {
      content: "";
      position: absolute;
      left: -48px;
      bottom: -38px;
      width: 43px;
      height: 55px;
      border-left: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      border-radius: 0 0 0 50px;
      transform: rotate(34deg);
      opacity: 0.8;
    }

    @media (max-width: 1020px) {
      .personal-story-visual {
        width: min(100%, 520px);
      }
    }

    @media (max-width: 640px) {
      .example-player-feature {
        padding: 46px 0 54px;
      }

      .example-player-feature .container {
        width: calc(100% - 28px);
      }

      .example-player-feature .example-player-heading h2 {
        font-size: clamp(2rem, 10vw, 2.6rem);
      }

      .example-player-feature .filter-row,
      .example-player-feature .genre-row {
        grid-template-columns: 54px repeat(2, auto);
      }

      .example-player-feature .rich-player {
        grid-template-columns: 80px minmax(0, 1fr);
        min-height: 114px;
        gap: 12px;
        padding: 14px;
      }

      .example-player-feature .rich-player::before {
        width: 72px;
        height: 72px;
      }

      .example-player-feature .rich-player .play-button {
        left: 60px;
        bottom: 16px;
        width: 38px;
        height: 38px;
      }

      .example-player-feature .rich-player .play-button::after {
        left: 15px;
        top: 12px;
        border-left-width: 10px;
        border-top-width: 7px;
        border-bottom-width: 7px;
      }

      .example-player-feature .rich-player.is-playing .play-button::after {
        left: 14px;
        top: 12px;
        width: 11px;
        height: 15px;
      }

      .example-player-feature .player-copy h3 {
        font-size: 1rem;
      }

      .example-player-feature .player-wave {
        display: none;
      }

      .example-player-feature .player-time {
        position: static;
        margin-top: 3px;
      }

      .personal-story-visual {
        min-height: 360px;
      }

      .personal-story-visual img {
        right: 0;
        width: 88%;
        height: 60%;
      }

      .personal-story-record {
        right: -42px;
        bottom: 90px;
        width: 118px;
        height: 118px;
      }

      .personal-story-record::after {
        inset: 44px;
      }

      .personal-story-visual blockquote {
        top: 24px;
        width: min(230px, 62%);
        padding: 17px 18px 16px;
        font-size: 0.98rem;
      }

      .personal-handwritten {
        right: 10px;
        top: 4px;
        font-size: 0.98rem;
      }

      .personal-handwritten::before {
        display: none;
      }
    }

    .example-player-feature .container {
      width: min(1040px, calc(100% - 44px));
    }

    .example-player-feature .example-player-heading h2 {
      max-width: 650px;
      font-size: clamp(2.35rem, 4.2vw, 3.35rem);
      line-height: 0.98;
    }

    .example-player-feature .example-player-heading p:not(.section-kicker) {
      max-width: 560px;
    }

    .example-player-feature .rich-player {
      grid-template-columns: 154px 54px minmax(0, 1fr) 72px;
      gap: 18px;
      min-height: 142px;
      padding: 18px;
      background:
        linear-gradient(135deg, rgba(255, 253, 248, 0.92), rgba(248, 227, 226, 0.4)),
        var(--paper);
    }

    .example-player-feature .rich-player::before {
      grid-column: 1;
      width: 128px;
      height: 108px;
      border-radius: 14px;
      background-image: url("../images/sfeer-bruiloft.png");
      background-position: center;
    }

    .example-player-feature .rich-player .play-button {
      position: relative;
      left: auto;
      bottom: auto;
      grid-column: 2;
      grid-row: 1;
      width: 50px;
      height: 50px;
      align-self: end;
      margin-bottom: 8px;
    }

    .example-player-feature .rich-player .play-button::after {
      left: 20px;
      top: 15px;
      border-left-width: 13px;
      border-top-width: 9px;
      border-bottom-width: 9px;
    }

    .example-player-feature .rich-player.is-playing .play-button::after {
      left: 18px;
      top: 15px;
      width: 14px;
      height: 19px;
    }

    .example-player-feature .player-copy {
      grid-column: 2 / 5;
      grid-row: 1;
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr) 72px;
      column-gap: 18px;
      align-items: end;
    }

    .example-player-feature .player-copy small,
    .example-player-feature .player-copy h3,
    .example-player-feature .player-copy p {
      grid-column: 1 / -1;
      margin-left: 72px;
    }

    .example-player-feature .player-copy small {
      margin-bottom: 2px;
    }

    .example-player-feature .player-copy h3 {
      font-size: 1.24rem;
    }

    .example-player-feature .player-copy p {
      display: flex;
      flex-wrap: wrap;
      gap: 0 12px;
      margin-top: 4px;
      margin-bottom: 12px;
    }

    .example-player-feature .player-wave {
      grid-column: 2;
      width: 100%;
      max-width: none;
      height: 36px;
      margin: 0;
    }

    .example-player-feature .player-time {
      position: static;
      grid-column: 3;
      align-self: center;
      justify-content: flex-end;
      width: auto;
      margin: 0;
    }

    .example-player-feature .player-time span:first-child::after {
      content: " / 1:00";
    }

    .example-player-feature #sampleAudio {
      display: none;
    }

    .example-player-feature .track-list {
      gap: 7px;
    }

    .example-player-feature .demo-track {
      min-height: 64px;
      background: rgba(255, 253, 248, 0.72);
    }

    @media (max-width: 760px) {
      .example-player-feature .container {
        width: calc(100% - 28px);
      }

      .example-player-feature .rich-player {
        grid-template-columns: 78px 44px minmax(0, 1fr);
        gap: 12px;
        min-height: 118px;
        padding: 14px;
      }

      .example-player-feature .rich-player::before {
        width: 72px;
        height: 72px;
      }

      .example-player-feature .rich-player .play-button {
        grid-column: 2;
        width: 40px;
        height: 40px;
        margin-bottom: 0;
      }

      .example-player-feature .rich-player .play-button::after {
        left: 16px;
        top: 12px;
        border-left-width: 11px;
        border-top-width: 8px;
        border-bottom-width: 8px;
      }

      .example-player-feature .rich-player.is-playing .play-button::after {
        left: 15px;
        top: 12px;
        width: 11px;
        height: 16px;
      }

      .example-player-feature .player-copy {
        grid-column: 2 / 4;
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 12px;
      }

      .example-player-feature .player-copy small,
      .example-player-feature .player-copy h3,
      .example-player-feature .player-copy p {
        margin-left: 56px;
      }

      .example-player-feature .player-wave {
        display: none;
      }

      .example-player-feature .player-time {
        grid-column: 1 / -1;
        margin-left: 56px;
        justify-content: flex-start;
      }
    }

    .example-player-feature .player-time span:first-child::after,
    .example-player-feature .player-time span:last-child::before {
      content: none !important;
    }

    .example-player-feature .player-time span:last-child {
      display: none !important;
    }

    .example-player-feature .rich-player {
      display: grid !important;
      grid-template-columns: 150px minmax(0, 1fr) !important;
      gap: 20px !important;
      align-items: center !important;
      min-height: 140px !important;
      width: 100% !important;
      padding: 18px !important;
      overflow: hidden !important;
    }

    .example-player-feature .rich-player::before {
      grid-column: 1 !important;
      grid-row: 1 !important;
      width: 126px !important;
      height: 106px !important;
      border-radius: 14px !important;
      align-self: center !important;
    }

    .example-player-feature .rich-player .play-button {
      position: absolute !important;
      left: 128px !important;
      bottom: 28px !important;
      width: 46px !important;
      height: 46px !important;
      margin: 0 !important;
      z-index: 3 !important;
    }

    .example-player-feature .rich-player .play-button::after {
      left: 18px !important;
      top: 14px !important;
      border-left-width: 12px !important;
      border-top-width: 9px !important;
      border-bottom-width: 9px !important;
    }

    .example-player-feature .rich-player.is-playing .play-button::after {
      left: 16px !important;
      top: 14px !important;
      width: 13px !important;
      height: 18px !important;
    }

    .example-player-feature .player-copy {
      grid-column: 2 !important;
      grid-row: 1 !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) max-content !important;
      grid-template-areas:
        "meta meta"
        "title title"
        "text text"
        "wave time" !important;
      column-gap: 16px !important;
      align-items: center !important;
      min-width: 0 !important;
    }

    .example-player-feature .player-copy small,
    .example-player-feature .player-copy h3,
    .example-player-feature .player-copy p {
      margin-left: 0 !important;
      min-width: 0 !important;
    }

    .example-player-feature .player-copy small {
      grid-area: meta !important;
      margin-bottom: 2px !important;
    }

    .example-player-feature .player-copy h3 {
      grid-area: title !important;
      margin: 0 !important;
      overflow-wrap: anywhere !important;
    }

    .example-player-feature .player-copy p {
      grid-area: text !important;
      margin: 4px 0 12px !important;
    }

    .example-player-feature .player-wave {
      grid-area: wave !important;
      display: flex !important;
      width: 100% !important;
      max-width: none !important;
      height: 34px !important;
      margin: 0 !important;
      min-width: 0 !important;
    }

    .example-player-feature .player-time {
      grid-area: time !important;
      position: static !important;
      display: flex !important;
      justify-content: flex-end !important;
      width: auto !important;
      min-width: 76px !important;
      margin: 0 !important;
      white-space: nowrap !important;
      font-size: 0.82rem !important;
    }

    @media (max-width: 700px) {
      .example-player-feature .rich-player {
        grid-template-columns: 74px minmax(0, 1fr) !important;
        gap: 12px !important;
        min-height: 112px !important;
        padding: 13px !important;
        border-radius: 15px !important;
      }

      .example-player-feature .rich-player::before {
        width: 66px !important;
        height: 66px !important;
        border-radius: 12px !important;
      }

      .example-player-feature .rich-player .play-button {
        left: 58px !important;
        bottom: 16px !important;
        width: 36px !important;
        height: 36px !important;
      }

      .example-player-feature .rich-player .play-button::after {
        left: 14px !important;
        top: 11px !important;
        border-left-width: 10px !important;
        border-top-width: 7px !important;
        border-bottom-width: 7px !important;
      }

      .example-player-feature .rich-player.is-playing .play-button::after {
        left: 13px !important;
        top: 11px !important;
        width: 10px !important;
        height: 14px !important;
      }

      .example-player-feature .player-copy {
        grid-column: 2 !important;
        display: block !important;
      }

      .example-player-feature .player-copy small {
        display: block !important;
        font-size: 0.74rem !important;
        line-height: 1.2 !important;
      }

      .example-player-feature .player-copy h3 {
        margin-top: 2px !important;
        font-size: 0.98rem !important;
        line-height: 1.18 !important;
      }

      .example-player-feature .player-copy p {
        margin: 3px 0 6px !important;
        font-size: 0.76rem !important;
        line-height: 1.25 !important;
      }

      .example-player-feature .player-wave {
        display: none !important;
      }

      .example-player-feature .player-time {
        justify-content: flex-start !important;
        min-width: 0 !important;
        font-size: 0.76rem !important;
      }
    }

    /* Final audio-player layout: keeps the demo card stable across all previous iterations. */
    .example-player-feature {
      padding: clamp(48px, 5.5vw, 76px) 0 !important;
    }

    .example-player-feature .container {
      width: min(960px, calc(100% - 44px)) !important;
    }

    .example-player-feature .example-player-heading {
      margin-bottom: 20px !important;
    }

    .example-player-feature .example-player-heading h2 {
      max-width: 680px !important;
      font-size: clamp(2.2rem, 4vw, 3.15rem) !important;
      line-height: 1.02 !important;
    }

    .example-player-feature .example-player-heading p:not(.section-kicker) {
      max-width: 600px !important;
      margin-top: 13px !important;
      font-size: 1rem !important;
      line-height: 1.5 !important;
    }

    .example-player-feature .example-filters {
      gap: 11px !important;
      margin: 22px 0 22px !important;
    }

    .example-player-feature .filter-row {
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: center !important;
      gap: 8px !important;
    }

    .example-player-feature .filter-row span {
      flex: 0 0 64px !important;
      width: 64px !important;
      color: #6d5a51 !important;
      font-size: 0.88rem !important;
      font-weight: 900 !important;
    }

    .example-player-feature .filter-row button {
      min-height: 36px !important;
      padding: 0 17px !important;
      border-radius: 999px !important;
      background: rgba(255, 253, 248, 0.72) !important;
      border-color: rgba(134, 52, 73, 0.22) !important;
      color: #66534d !important;
      font-size: 0.88rem !important;
    }

    .example-player-feature .filter-row button.is-active {
      background: var(--berry) !important;
      border-color: var(--berry) !important;
      color: #fff !important;
    }

    .example-player-feature .rich-player {
      position: relative !important;
      display: grid !important;
      grid-template-columns: 132px minmax(0, 1fr) !important;
      gap: 20px !important;
      align-items: center !important;
      min-height: 136px !important;
      margin: 18px 0 12px !important;
      padding: 18px 20px !important;
      overflow: hidden !important;
      border: 1px solid rgba(134, 52, 73, 0.16) !important;
      border-radius: 18px !important;
      background:
        linear-gradient(135deg, rgba(255, 253, 248, 0.92), rgba(248, 227, 226, 0.46)),
        var(--paper) !important;
      box-shadow: none !important;
    }

    .example-player-feature .rich-player::before {
      content: "" !important;
      position: static !important;
      grid-column: 1 !important;
      grid-row: 1 !important;
      width: 118px !important;
      height: 100px !important;
      align-self: center !important;
      border-radius: 14px !important;
      background-image: url("../images/sfeer-bruiloft.png") !important;
      background-size: cover !important;
      background-position: center !important;
      box-shadow: 0 10px 24px rgba(83, 47, 38, 0.12) !important;
    }

    .example-player-feature .rich-player .play-button {
      position: absolute !important;
      left: 112px !important;
      bottom: 26px !important;
      width: 48px !important;
      height: 48px !important;
      margin: 0 !important;
      background: var(--butter) !important;
      color: #351922 !important;
      box-shadow: 0 12px 24px rgba(134, 52, 73, 0.16) !important;
      z-index: 4 !important;
    }

    .example-player-feature .rich-player .play-button::after {
      left: 19px !important;
      top: 15px !important;
      border-left-width: 12px !important;
      border-top-width: 9px !important;
      border-bottom-width: 9px !important;
    }

    .example-player-feature .rich-player.is-playing .play-button::after {
      left: 17px !important;
      top: 15px !important;
      width: 13px !important;
      height: 18px !important;
    }

    .example-player-feature .player-copy {
      grid-column: 2 !important;
      grid-row: 1 !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      grid-template-areas:
        "meta meta"
        "title title"
        "desc desc"
        "wave time" !important;
      column-gap: 18px !important;
      row-gap: 2px !important;
      min-width: 0 !important;
      padding-left: 10px !important;
    }

    .example-player-feature .player-copy small,
    .example-player-feature .player-copy h3,
    .example-player-feature .player-copy p {
      margin-left: 0 !important;
      min-width: 0 !important;
    }

    .example-player-feature .player-copy small {
      grid-area: meta !important;
      display: block !important;
      color: var(--berry) !important;
      font-size: 0.82rem !important;
      font-weight: 900 !important;
      line-height: 1.2 !important;
    }

    .example-player-feature .player-copy h3 {
      grid-area: title !important;
      margin: 0 !important;
      color: #251216 !important;
      font-family: Fraunces, Georgia, serif !important;
      font-size: 1.35rem !important;
      font-weight: 720 !important;
      line-height: 1.12 !important;
      overflow-wrap: anywhere !important;
    }

    .example-player-feature .player-copy p {
      grid-area: desc !important;
      margin: 2px 0 10px !important;
      color: var(--berry) !important;
      font-size: 0.9rem !important;
      font-weight: 700 !important;
      line-height: 1.35 !important;
    }

    .example-player-feature .player-wave {
      grid-area: wave !important;
      display: flex !important;
      width: 100% !important;
      max-width: none !important;
      height: 32px !important;
      margin: 0 !important;
      min-width: 0 !important;
    }

    .example-player-feature .player-time {
      grid-area: time !important;
      position: static !important;
      display: flex !important;
      justify-content: flex-end !important;
      align-self: center !important;
      width: auto !important;
      min-width: 86px !important;
      margin: 0 !important;
      color: var(--berry) !important;
      font-size: 0.82rem !important;
      font-weight: 900 !important;
      white-space: nowrap !important;
    }

    .example-player-feature .player-time span:first-child::after,
    .example-player-feature .player-time span:last-child::before {
      content: none !important;
    }

    .example-player-feature .player-time span:last-child {
      display: none !important;
    }

    .example-player-feature .demo-track {
      min-height: 68px !important;
      grid-template-columns: 56px minmax(0, 1fr) 38px !important;
      gap: 10px !important;
      padding: 9px 12px !important;
      border-radius: 15px !important;
    }

    .example-player-feature .demo-track::before {
      width: 46px !important;
      height: 46px !important;
      border-radius: 50% !important;
    }

    .example-player-feature .demo-track::after {
      width: 34px !important;
      height: 34px !important;
    }

    .example-player-feature .demo-track span {
      font-size: 1.02rem !important;
      line-height: 1.16 !important;
    }

    .example-player-feature .demo-track small {
      font-size: 0.82rem !important;
      line-height: 1.25 !important;
    }

    @media (max-width: 700px) {
      .example-player-feature {
        padding: 38px 0 50px !important;
      }

      .example-player-feature .container {
        width: calc(100% - 28px) !important;
      }

      .example-player-feature .example-player-heading {
        margin-bottom: 18px !important;
      }

      .example-player-feature .section-kicker {
        margin-bottom: 8px !important;
        font-size: 0.7rem !important;
      }

      .example-player-feature .example-player-heading h2 {
        max-width: 360px !important;
        font-size: clamp(2rem, 10.2vw, 2.62rem) !important;
        line-height: 1 !important;
      }

      .example-player-feature .example-player-heading p:not(.section-kicker) {
        max-width: 340px !important;
        margin-top: 12px !important;
        font-size: 0.95rem !important;
        line-height: 1.45 !important;
      }

      .example-player-feature .filter-row {
        gap: 8px !important;
        margin: 0 !important;
      }

      .example-player-feature .filter-row span {
        flex: 0 0 100% !important;
        width: 100% !important;
        margin-bottom: 0 !important;
        font-size: 0.82rem !important;
      }

      .example-player-feature .filter-row button {
        min-height: 34px !important;
        padding: 0 14px !important;
        font-size: 0.82rem !important;
      }

      .example-player-feature .rich-player {
        grid-template-columns: 78px minmax(0, 1fr) !important;
        gap: 12px !important;
        min-height: 136px !important;
        padding: 13px !important;
        border-radius: 16px !important;
      }

      .example-player-feature .rich-player::before {
        width: 66px !important;
        height: 66px !important;
        border-radius: 12px !important;
        align-self: start !important;
      }

      .example-player-feature .rich-player .play-button {
        left: 50px !important;
        top: 70px !important;
        bottom: auto !important;
        width: 38px !important;
        height: 38px !important;
      }

      .example-player-feature .rich-player .play-button::after {
        left: 15px !important;
        top: 12px !important;
        border-left-width: 10px !important;
        border-top-width: 7px !important;
        border-bottom-width: 7px !important;
      }

      .example-player-feature .rich-player.is-playing .play-button::after {
        left: 14px !important;
        top: 12px !important;
        width: 10px !important;
        height: 15px !important;
      }

      .example-player-feature .player-copy {
        display: block !important;
        grid-column: 2 !important;
        padding-left: 0 !important;
      }

      .example-player-feature .player-copy small {
        font-size: 0.72rem !important;
      }

      .example-player-feature .player-copy h3 {
        margin-top: 2px !important;
        font-size: 1.08rem !important;
        line-height: 1.1 !important;
      }

      .example-player-feature .player-copy p {
        margin: 4px 0 9px !important;
        font-size: 0.76rem !important;
        line-height: 1.25 !important;
      }

      .example-player-feature .player-wave {
        display: none !important;
      }

      .example-player-feature .player-time {
        justify-content: flex-start !important;
        min-width: 0 !important;
        font-size: 0.78rem !important;
      }

      .example-player-feature .demo-track {
        min-height: 72px !important;
        grid-template-columns: 48px minmax(0, 1fr) 34px !important;
        gap: 10px !important;
      }

      .example-player-feature .demo-track::before {
        width: 42px !important;
        height: 42px !important;
      }

      .example-player-feature .demo-track::after {
        width: 32px !important;
        height: 32px !important;
      }

      .example-player-feature .demo-track span {
        font-size: 1.02rem !important;
      }

      .example-player-feature .demo-track small {
        font-size: 0.78rem !important;
      }
    }

    /* Compact final player with the button inside the cover image. */
    .example-player-feature {
      padding: clamp(36px, 5vw, 64px) 0 !important;
    }

    .example-player-feature .container {
      width: min(860px, calc(100% - 44px)) !important;
    }

    .example-player-feature .example-player-heading {
      margin-bottom: 16px !important;
    }

    .example-player-feature .example-player-heading h2 {
      max-width: 620px !important;
      font-size: clamp(2.05rem, 3.6vw, 2.8rem) !important;
      line-height: 1.03 !important;
    }

    .example-player-feature .example-player-heading p:not(.section-kicker) {
      max-width: 560px !important;
      margin-top: 10px !important;
      font-size: 0.98rem !important;
    }

    .example-player-feature .example-filters {
      margin: 18px 0 18px !important;
    }

    .example-player-feature .rich-player {
      grid-template-columns: 118px minmax(0, 1fr) !important;
      gap: 16px !important;
      min-height: 112px !important;
      padding: 13px 15px !important;
      border-radius: 16px !important;
      overflow: hidden !important;
    }

    .example-player-feature .rich-player::before {
      content: none !important;
    }

    .example-player-feature .player-cover {
      position: relative !important;
      grid-column: 1 !important;
      grid-row: 1 !important;
      width: 108px !important;
      height: 86px !important;
      overflow: hidden !important;
      border-radius: 14px !important;
      background: var(--rose) !important;
      box-shadow: 0 10px 22px rgba(83, 47, 38, 0.1) !important;
    }

    .example-player-feature .player-cover img {
      display: block !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
    }

    .example-player-feature .player-cover .play-button {
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      right: auto !important;
      bottom: auto !important;
      width: 42px !important;
      height: 42px !important;
      margin: 0 !important;
      transform: translate(-50%, -50%) !important;
      background: var(--butter) !important;
      color: #351922 !important;
      box-shadow: 0 10px 22px rgba(36, 26, 23, 0.16) !important;
    }

    .example-player-feature .player-cover .play-button::after {
      left: 17px !important;
      top: 13px !important;
      border-left-width: 11px !important;
      border-top-width: 8px !important;
      border-bottom-width: 8px !important;
    }

    .example-player-feature .rich-player.is-playing .player-cover .play-button::after {
      left: 15px !important;
      top: 13px !important;
      width: 12px !important;
      height: 17px !important;
    }

    .example-player-feature .player-copy {
      grid-column: 2 !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      grid-template-areas:
        "meta time"
        "title title"
        "desc desc"
        "wave wave" !important;
      gap: 2px 14px !important;
      align-items: center !important;
      padding-left: 0 !important;
    }

    .example-player-feature .player-copy small {
      grid-area: meta !important;
      font-size: 0.76rem !important;
    }

    .example-player-feature .player-copy h3 {
      grid-area: title !important;
      font-size: 1.18rem !important;
      line-height: 1.1 !important;
    }

    .example-player-feature .player-copy p {
      grid-area: desc !important;
      margin: 2px 0 6px !important;
      font-size: 0.86rem !important;
    }

    .example-player-feature .player-wave {
      grid-area: wave !important;
      display: flex !important;
      height: 22px !important;
    }

    .example-player-feature .player-time {
      grid-area: time !important;
      justify-content: flex-end !important;
      min-width: 78px !important;
      font-size: 0.76rem !important;
    }

    @media (max-width: 700px) {
      .example-player-feature {
        padding: 32px 0 42px !important;
      }

      .example-player-feature .container {
        width: calc(100% - 28px) !important;
      }

      .example-player-feature .example-player-heading h2 {
        max-width: 330px !important;
        font-size: clamp(1.85rem, 9.2vw, 2.32rem) !important;
      }

      .example-player-feature .rich-player {
        grid-template-columns: 76px minmax(0, 1fr) !important;
        gap: 11px !important;
        min-height: 106px !important;
        padding: 12px !important;
      }

      .example-player-feature .player-cover {
        width: 68px !important;
        height: 68px !important;
        border-radius: 12px !important;
      }

      .example-player-feature .player-cover .play-button {
        width: 34px !important;
        height: 34px !important;
      }

      .example-player-feature .player-cover .play-button::after {
        left: 14px !important;
        top: 10px !important;
        border-left-width: 10px !important;
        border-top-width: 7px !important;
        border-bottom-width: 7px !important;
      }

      .example-player-feature .rich-player.is-playing .player-cover .play-button::after {
        left: 12px !important;
        top: 10px !important;
        width: 10px !important;
        height: 15px !important;
      }

      .example-player-feature .player-copy {
        display: block !important;
      }

      .example-player-feature .player-copy small {
        font-size: 0.7rem !important;
      }

      .example-player-feature .player-copy h3 {
        margin-top: 2px !important;
        font-size: 0.98rem !important;
      }

      .example-player-feature .player-copy p {
        margin: 3px 0 4px !important;
        font-size: 0.74rem !important;
        line-height: 1.25 !important;
      }

      .example-player-feature .player-wave {
        display: none !important;
      }

      .example-player-feature .player-time {
        justify-content: flex-start !important;
        min-width: 0 !important;
        font-size: 0.74rem !important;
      }
    }

    /* Contact block: visitor-facing steps instead of internal notes. */
    .contact-copy .lead {
      max-width: 620px;
    }

    .contact-flow {
      display: grid;
      gap: 12px;
      margin-top: 26px;
    }

    .contact-flow div {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 4px 14px;
      align-items: start;
      padding: 15px 16px;
      border: 1px solid rgba(36, 26, 23, 0.1);
      border-radius: 14px;
      background: rgba(255, 253, 248, 0.62);
    }

    .contact-flow span {
      grid-row: 1 / 3;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--berry);
      color: #fff;
      font-weight: 900;
    }

    .contact-flow strong {
      color: var(--ink);
      font-weight: 900;
      line-height: 1.2;
    }

    .contact-flow p {
      margin: 0;
      color: var(--muted);
      font-size: 0.92rem;
      font-weight: 650;
      line-height: 1.38;
    }

    .order-panel-intro {
      margin-bottom: 18px;
    }

    .order-panel-intro small {
      display: block;
      margin-bottom: 7px;
      color: var(--berry);
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .order-panel-intro h3 {
      color: var(--ink);
      font-size: 1.35rem;
    }

    .order-panel-intro p {
      margin: 7px 0 0;
      color: var(--muted);
      font-size: 0.93rem;
      font-weight: 650;
      line-height: 1.4;
    }

    /* Listen block polish: same column width, clearer main player, compact examples. */
    .example-player-feature .container {
      width: min(760px, calc(100% - 44px)) !important;
    }

    .example-player-feature .example-player-heading,
    .example-player-feature .example-player-heading h2,
    .example-player-feature .example-player-heading p:not(.section-kicker),
    .example-player-feature .example-filters,
    .example-player-feature .rich-player,
    .example-player-feature .track-list,
    .example-player-feature .examples-link {
      max-width: 760px !important;
    }

    .example-player-feature .example-filters {
      padding-bottom: 12px !important;
      border-bottom: 1px solid rgba(134, 52, 73, 0.12) !important;
    }

    .example-player-feature .rich-player {
      margin-top: 18px !important;
      margin-bottom: 10px !important;
      padding: 16px !important;
      border: 1px solid rgba(134, 52, 73, 0.22) !important;
      background:
        linear-gradient(135deg, rgba(248, 227, 226, 0.66), rgba(255, 253, 248, 0.96)),
        var(--paper) !important;
      box-shadow: 0 12px 28px rgba(83, 47, 38, 0.06) !important;
    }

    .example-player-feature .rich-player::after {
      content: none;
      display: none;
      position: absolute;
      right: 16px;
      top: 14px;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(134, 52, 73, 0.1);
      color: var(--berry);
      font-size: 0.68rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .example-player-feature .player-cover {
      width: 118px !important;
      height: 92px !important;
    }

    .example-player-feature .player-copy small {
      padding-right: 94px !important;
    }

    .example-player-feature .player-copy h3 {
      font-size: 1.26rem !important;
    }

    .example-player-feature .track-list {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 8px !important;
      margin-top: 10px !important;
    }

    .example-player-feature .demo-track {
      min-height: 46px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 10px !important;
      padding: 10px 12px !important;
      border-radius: 12px !important;
      background: rgba(255, 253, 248, 0.6) !important;
    }

    .example-player-feature .demo-track::before {
      content: none !important;
    }

    .example-player-feature .demo-track::after {
      content: "›" !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex: 0 0 22px !important;
      width: 22px !important;
      height: 22px !important;
      border: 0 !important;
      background: transparent !important;
      color: var(--berry) !important;
      font-size: 1.25rem !important;
      line-height: 1 !important;
    }

    .example-player-feature .demo-track span {
      min-width: 0 !important;
      overflow: hidden !important;
      color: #251216 !important;
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
      font-size: 0.9rem !important;
      font-weight: 900 !important;
      line-height: 1.2 !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    .example-player-feature .demo-track small {
      display: none !important;
    }

    .example-player-feature .demo-track.is-active {
      display: none !important;
    }

    .example-player-feature .examples-link {
      min-height: 42px !important;
      margin-top: 10px !important;
      font-size: 0.9rem !important;
    }

    @media (max-width: 700px) {
      .example-player-feature .container {
        width: calc(100% - 28px) !important;
      }

      .example-player-feature .rich-player::after {
        display: none !important;
      }

      .example-player-feature .player-copy small {
        padding-right: 0 !important;
      }

      .example-player-feature .track-list {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
      }

      .example-player-feature .demo-track {
        min-height: 42px !important;
        padding: 9px 11px !important;
      }

      .example-player-feature .demo-track span {
        font-size: 0.86rem !important;
      }
    }

    /* Final listen alignment and cleaner compact choices. */
    .example-player-feature .container {
      width: min(var(--container), calc(100% - 40px)) !important;
      max-width: var(--container) !important;
      margin-right: auto !important;
      margin-left: auto !important;
    }

    .example-player-feature .example-player-panel,
    .example-player-feature .example-player-heading,
    .example-player-feature .example-player-heading h2,
    .example-player-feature .example-player-heading p:not(.section-kicker),
    .example-player-feature .example-filters,
    .example-player-feature .rich-player,
    .example-player-feature .track-list,
    .example-player-feature .track-empty,
    .example-player-feature .examples-link {
      width: min(760px, 100%) !important;
      max-width: 760px !important;
      margin-right: auto !important;
      margin-left: 0 !important;
    }

    .example-player-feature .rich-player {
      position: relative !important;
      grid-template-columns: 112px minmax(0, 1fr) !important;
      min-height: 108px !important;
      padding: 14px !important;
    }

    .example-player-feature .rich-player::after {
      content: none !important;
      display: none !important;
    }

    .example-player-feature .player-cover {
      width: 108px !important;
      height: 82px !important;
      align-self: center !important;
    }

    .example-player-feature .player-copy {
      grid-template-columns: minmax(0, 1fr) max-content !important;
      grid-template-areas:
        "meta time"
        "title title"
        "desc desc"
        "wave wave" !important;
      gap: 3px 14px !important;
      min-width: 0 !important;
    }

    .example-player-feature .player-copy small.now-playing,
    .example-player-feature .player-copy small {
      grid-area: meta !important;
      min-width: 0 !important;
      padding-right: 0 !important;
      overflow: hidden !important;
      color: var(--berry) !important;
      font-size: 0.76rem !important;
      font-weight: 900 !important;
      letter-spacing: 0 !important;
      text-overflow: ellipsis !important;
      text-transform: none !important;
      white-space: nowrap !important;
    }

    .example-player-feature .player-copy small.now-playing::before {
      content: none;
      display: none !important;
      align-items: center;
      margin-right: 8px;
      padding: 3px 7px;
      border-radius: 999px;
      background: rgba(134, 52, 73, 0.1);
      color: var(--berry);
      font-size: 0.62rem;
      font-weight: 950;
      letter-spacing: 0.06em;
      line-height: 1;
      text-transform: uppercase;
      vertical-align: 1px;
    }

    .example-player-feature .player-time {
      position: static !important;
      grid-area: time !important;
      display: flex !important;
      justify-content: flex-end !important;
      width: auto !important;
      min-width: 92px !important;
      margin: 0 !important;
      color: var(--berry) !important;
      font-size: 0.78rem !important;
      font-weight: 900 !important;
      line-height: 1.15 !important;
      text-align: right !important;
      white-space: nowrap !important;
    }

    .example-player-feature .player-copy h3 {
      font-size: 1.17rem !important;
      line-height: 1.12 !important;
    }

    .example-player-feature .player-copy p {
      margin-bottom: 5px !important;
      font-size: 0.86rem !important;
    }

    .example-player-feature .player-wave {
      width: 100% !important;
      max-width: none !important;
      margin: 3px 0 0 !important;
    }

    .example-player-feature .track-list {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 8px !important;
    }

    .example-player-feature .demo-track {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto 18px !important;
      min-height: 44px !important;
      padding: 9px 11px !important;
      gap: 8px !important;
    }

    .example-player-feature .demo-track span {
      min-width: 0 !important;
      font-size: 0.88rem !important;
      white-space: nowrap !important;
    }

    .example-player-feature .demo-track small {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      min-width: 0 !important;
      max-width: 94px !important;
      padding: 4px 8px !important;
      border: 1px solid rgba(134, 52, 73, 0.12) !important;
      border-radius: 999px !important;
      background: rgba(248, 227, 226, 0.58) !important;
      color: var(--berry) !important;
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
      font-size: 0.68rem !important;
      font-weight: 900 !important;
      line-height: 1 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    .example-player-feature .demo-track::after {
      width: 18px !important;
      height: 18px !important;
      font-size: 1.08rem !important;
    }

    @media (max-width: 700px) {
      .example-player-feature .container {
        width: min(100% - 28px, var(--container)) !important;
      }

      .example-player-feature .rich-player {
        grid-template-columns: 72px minmax(0, 1fr) !important;
        min-height: 96px !important;
        padding: 11px !important;
      }

      .example-player-feature .player-cover {
        width: 64px !important;
        height: 64px !important;
      }

      .example-player-feature .player-copy {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
          "meta"
          "title"
          "desc"
          "wave"
          "time" !important;
        gap: 2px !important;
      }

      .example-player-feature .player-copy small.now-playing::before {
        margin-right: 6px;
        padding: 3px 6px;
        font-size: 0.56rem;
      }

      .example-player-feature .player-time {
        justify-content: flex-start !important;
        min-width: 0 !important;
        margin-top: 2px !important;
        font-size: 0.74rem !important;
        text-align: left !important;
      }

      .example-player-feature .track-list {
        grid-template-columns: 1fr !important;
      }
    }

    /* Container-wide listen block with real image chips. */
    .example-player-feature .container {
      width: min(var(--container), calc(100% - 40px)) !important;
      max-width: var(--container) !important;
    }

    .example-player-feature .listen-showcase-grid {
      display: block !important;
    }

    .example-player-feature .example-player-panel,
    .example-player-feature .example-filters,
    .example-player-feature .rich-player,
    .example-player-feature .track-list,
    .example-player-feature .track-empty,
    .example-player-feature .examples-link {
      width: 100% !important;
      max-width: none !important;
      margin-right: 0 !important;
      margin-left: 0 !important;
    }

    .example-player-feature .example-player-heading {
      width: 100% !important;
      max-width: none !important;
      margin-right: 0 !important;
      margin-left: 0 !important;
    }

    .example-player-feature .example-player-heading h2 {
      width: min(920px, 100%) !important;
      max-width: 920px !important;
      margin-right: 0 !important;
      margin-left: 0 !important;
    }

    .example-player-feature .example-player-heading p:not(.section-kicker) {
      width: min(820px, 100%) !important;
      max-width: 820px !important;
      margin-right: 0 !important;
      margin-left: 0 !important;
    }

    .example-player-feature .example-story {
      display: none !important;
    }

    .example-player-feature .example-filters {
      margin-top: 28px !important;
      padding-bottom: 16px !important;
    }

    .example-player-feature .rich-player {
      grid-template-columns: 136px minmax(0, 1fr) !important;
      gap: 20px !important;
      min-height: 132px !important;
      margin-top: 28px !important;
      padding: 18px !important;
      border-radius: 18px !important;
      background:
        linear-gradient(135deg, rgba(248, 227, 226, 0.72), rgba(255, 253, 248, 0.98)),
        var(--paper) !important;
    }

    .example-player-feature .player-cover {
      width: 126px !important;
      height: 96px !important;
      border-radius: 15px !important;
    }

    .example-player-feature .player-copy {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) max-content !important;
      grid-template-areas:
        "meta time"
        "title time"
        "desc desc"
        "wave wave" !important;
      column-gap: 22px !important;
      row-gap: 4px !important;
      min-width: 0 !important;
    }

    .example-player-feature .player-copy small.now-playing {
      display: flex !important;
      grid-area: meta !important;
      align-items: center !important;
      gap: 8px !important;
      min-width: 0 !important;
      max-width: 100% !important;
      overflow: hidden !important;
      white-space: nowrap !important;
    }

    .example-player-feature .player-copy small.now-playing::before {
      flex: 0 0 auto !important;
      margin-right: 0 !important;
    }

    .example-player-feature .player-time {
      grid-area: time !important;
      align-self: start !important;
      justify-content: flex-end !important;
      min-width: 112px !important;
      padding-top: 3px !important;
      font-size: 0.82rem !important;
      text-align: right !important;
      white-space: nowrap !important;
    }

    .example-player-feature .player-copy h3 {
      grid-area: title !important;
      max-width: 100% !important;
      font-size: 1.28rem !important;
    }

    .example-player-feature .player-copy p {
      grid-area: desc !important;
    }

    .example-player-feature .player-wave {
      grid-area: wave !important;
      max-width: none !important;
      margin-right: 0 !important;
    }

    .example-player-feature .track-list {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 10px !important;
      margin-top: 14px !important;
    }

    .example-player-feature .demo-track {
      display: grid !important;
      grid-template-columns: 42px minmax(0, 1fr) auto 18px !important;
      align-items: center !important;
      min-height: 58px !important;
      padding: 8px 10px !important;
      border: 1px solid rgba(134, 52, 73, 0.14) !important;
      border-radius: 15px !important;
      background: rgba(255, 253, 248, 0.72) !important;
    }

    .example-player-feature .demo-track .track-thumb {
      display: block !important;
      width: 42px !important;
      height: 42px !important;
      border-radius: 11px !important;
      object-fit: cover !important;
    }

    .example-player-feature .demo-track span {
      min-width: 0 !important;
      overflow: hidden !important;
      font-size: 0.86rem !important;
      text-align: left !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    .example-player-feature .demo-track small {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      min-width: 54px !important;
      max-width: 88px !important;
      padding: 5px 8px !important;
      border: 1px solid rgba(134, 52, 73, 0.14) !important;
      border-radius: 999px !important;
      background: rgba(248, 227, 226, 0.62) !important;
      color: var(--berry) !important;
      font-size: 0.66rem !important;
      font-weight: 900 !important;
      line-height: 1 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    .example-player-feature .demo-track::after {
      grid-column: 4 !important;
      color: var(--berry) !important;
      opacity: 0.9 !important;
    }

    @media (max-width: 980px) {
      .example-player-feature .track-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }

    @media (max-width: 700px) {
      .example-player-feature .container {
        width: min(100% - 28px, var(--container)) !important;
      }

      .example-player-feature .rich-player {
        grid-template-columns: 74px minmax(0, 1fr) !important;
        gap: 12px !important;
        min-height: 102px !important;
        margin-top: 22px !important;
        padding: 11px !important;
      }

      .example-player-feature .player-cover {
        width: 68px !important;
        height: 68px !important;
      }

      .example-player-feature .player-copy {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
          "meta"
          "title"
          "desc"
          "wave"
          "time" !important;
        row-gap: 2px !important;
      }

      .example-player-feature .player-time {
        justify-content: flex-start !important;
        min-width: 0 !important;
        padding-top: 0 !important;
        font-size: 0.74rem !important;
      }

      .example-player-feature .track-list {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
      }

      .example-player-feature .demo-track {
        grid-template-columns: 40px minmax(0, 1fr) auto 16px !important;
        min-height: 54px !important;
      }

      .example-player-feature .demo-track .track-thumb {
        width: 40px !important;
        height: 40px !important;
      }

      .example-player-feature .demo-track small {
        min-width: 48px !important;
        max-width: 76px !important;
      }
    }

    /* Small cleanup requested after visual review. */
    .example-player-feature .player-copy small.now-playing::before {
      content: none !important;
      display: none !important;
    }

    .example-player-feature .player-copy small.now-playing {
      gap: 0 !important;
      padding-right: 0 !important;
    }

    .example-player-feature .filter-row {
      gap: 9px !important;
    }

    .example-player-feature .filter-row span {
      min-width: 52px !important;
      font-size: 0.82rem !important;
    }

    .example-player-feature .filter-row button {
      min-height: 32px !important;
      padding: 7px 16px !important;
      font-size: 0.82rem !important;
      line-height: 1 !important;
    }

    @media (max-width: 700px) {
      .example-player-feature .filter-row {
        gap: 7px !important;
      }

      .example-player-feature .filter-row span {
        min-width: 48px !important;
        font-size: 0.78rem !important;
      }

      .example-player-feature .filter-row button {
        min-height: 30px !important;
        padding: 6px 13px !important;
        font-size: 0.78rem !important;
      }
    }

    /* Topbar text reduced by 20 percent. */
    .topbar-inner {
      font-size: 0.672rem !important;
    }

    @media (max-width: 700px) {
      .topbar-inner {
        font-size: 0.672rem !important;
      }
    }

    /* Keep the new hero title intentionally on three calm lines. */
    .hero-title-lines {
      max-width: 760px !important;
      font-size: clamp(2.39rem, 4vw, 3.65rem) !important;
      line-height: 0.98 !important;
    }

    .hero-title-lines span {
      display: block !important;
      white-space: nowrap !important;
    }

    @media (max-width: 700px) {
      .hero-title-lines {
        max-width: 100% !important;
        font-size: clamp(1.76rem, 7.3vw, 2.05rem) !important;
        line-height: 1.02 !important;
      }
    }

    /* SEO story section below FAQ. */
    .story-depth-section {
      position: relative;
      overflow: hidden;
      padding: clamp(72px, 8vw, 112px) 0;
      background:
        linear-gradient(90deg, rgba(255, 253, 248, 0.96) 0%, rgba(255, 246, 242, 0.82) 48%, rgba(248, 227, 226, 0.78) 100%),
        var(--paper);
      border-top: 1px solid rgba(36, 26, 23, 0.06);
    }

    .story-depth-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.72fr);
      gap: clamp(36px, 7vw, 96px);
      align-items: center;
    }

    .story-depth-copy {
      max-width: 720px;
    }

    .story-depth-copy h2 {
      max-width: 680px;
      color: #251216;
      font-size: clamp(2.1rem, 3.6vw, 3.35rem);
      line-height: 1.02;
    }

    .story-depth-copy p {
      max-width: 690px;
      margin: 18px 0 0;
      color: var(--muted);
      font-size: 1.02rem;
      font-weight: 560;
      line-height: 1.72;
    }

    .story-more-copy[hidden] {
      display: none;
    }

    .story-more-copy {
      animation: story-fade 180ms ease both;
    }

    .read-more-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      margin-top: 22px;
      padding: 0 20px;
      border: 1px solid rgba(134, 52, 73, 0.22);
      border-radius: 999px;
      background: rgba(255, 253, 248, 0.82);
      color: var(--berry);
      font-weight: 900;
      cursor: pointer;
      transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
    }

    .read-more-toggle:hover,
    .read-more-toggle:focus-visible {
      border-color: var(--berry);
      background: var(--berry);
      color: #fff;
    }

    .story-phone-wrap {
      position: relative;
      display: flex;
      justify-content: center;
      margin: 0;
    }

    .story-phone-wrap::before {
      content: "";
      position: absolute;
      inset: 8% 4% 4%;
      border-radius: 999px;
      background: rgba(32, 70, 57, 0.12);
      filter: blur(36px);
      transform: rotate(-8deg);
    }

    .story-phone-frame {
      position: relative;
      width: min(340px, 100%);
      aspect-ratio: 9 / 16;
      padding: 13px;
      border: 10px solid #1f1716;
      border-radius: 44px;
      background: #1f1716;
      box-shadow: 0 28px 70px rgba(36, 26, 23, 0.18);
      transform: rotate(1.6deg);
    }

    .phone-speaker {
      position: absolute;
      left: 50%;
      top: 10px;
      z-index: 3;
      width: 82px;
      height: 18px;
      border-radius: 0 0 16px 16px;
      background: #1f1716;
      transform: translateX(-50%);
    }

    .story-phone-screen {
      position: relative;
      height: 100%;
      overflow: hidden;
      border-radius: 31px;
      background: #221918;
    }

    .story-phone-screen img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .story-phone-screen::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 30%, rgba(0, 0, 0, 0.1) 100%),
        radial-gradient(circle at 48% 76%, rgba(246, 207, 112, 0.16), transparent 36%);
      pointer-events: none;
    }

    .story-video-ui {
      position: absolute;
      left: 28px;
      right: 28px;
      bottom: 34px;
      z-index: 2;
      display: flex;
      align-items: end;
      gap: 6px;
      height: 34px;
      pointer-events: none;
    }

    .story-video-ui span {
      width: 8px;
      min-height: 10px;
      border-radius: 999px;
      background: var(--butter);
      opacity: 0.9;
      animation: preview-bars 1.1s ease-in-out infinite;
    }

    .story-video-ui span:nth-child(2) {
      animation-delay: 120ms;
    }

    .story-video-ui span:nth-child(3) {
      animation-delay: 240ms;
    }

    .story-video-ui span:nth-child(4) {
      animation-delay: 360ms;
    }

    @keyframes preview-bars {
      0%,
      100% {
        height: 12px;
      }

      50% {
        height: 32px;
      }
    }

    @keyframes story-fade {
      from {
        opacity: 0;
        transform: translateY(-4px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (max-width: 900px) {
      .story-depth-grid {
        grid-template-columns: 1fr;
      }

      .story-depth-copy,
      .story-depth-copy h2,
      .story-depth-copy p {
        max-width: none;
      }

      .story-phone-frame {
        width: min(320px, 88vw);
      }
    }

    @media (max-width: 640px) {
      .story-depth-section {
        padding: 54px 0 66px;
      }

      .story-depth-copy h2 {
        font-size: clamp(1.8rem, 8.2vw, 2.3rem);
      }

      .story-depth-copy p {
        font-size: 0.96rem;
        line-height: 1.64;
      }
    }