/* SnapSong product homepage
   Memory Pressing: an editorial iPhone product page with one immersive listening room. */

:root {
    --product-paper: #f7f4f1;
    --product-paper-deep: #eee9e4;
    --product-white: #ffffff;
    --product-ink: #151214;
    --product-ink-soft: #5f585d;
    --product-line: rgba(21, 18, 20, 0.14);
    --product-pink: #ff174d;
    --product-pink-text: #b30949;
    --product-magenta: #d60a59;
    --product-orange: #f26432;
    --product-blush: #ffd8df;
    --product-dark: #0b090b;
    --product-dark-raised: #171317;
    --product-dark-line: rgba(255, 255, 255, 0.14);
    --product-dark-text: #f8f4f1;
    --product-dark-muted: #b9afb4;
    --product-container: 1180px;
    --product-gutter: clamp(1.25rem, 4vw, 2.5rem);
    --product-display: "Avenir Next", "SF Pro Display", "Helvetica Neue", sans-serif;
    --product-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
    --product-serif: "New York", "Iowan Old Style", "Baskerville", Georgia, serif;
    --product-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --product-shadow: 0 32px 90px rgba(44, 18, 30, 0.18);
    color-scheme: light;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body.product-home {
    margin: 0;
    overflow-x: hidden;
    background: var(--product-paper);
    color: var(--product-ink);
    font-family: var(--product-body);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.product-home img,
.product-home svg,
.product-home video {
    display: block;
    max-width: 100%;
}

.product-home button,
.product-home a {
    font: inherit;
}

.product-home a {
    text-decoration: none;
}

.product-home h1,
.product-home h2,
.product-home h3,
.product-home p {
    margin-top: 0;
}

.product-container {
    position: relative;
    width: min(100%, calc(var(--product-container) + (var(--product-gutter) * 2)));
    margin-inline: auto;
    padding-inline: var(--product-gutter);
}

.product-skip-link {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 1rem;
    translate: 0 -130%;
    padding: 0.75rem 1rem;
    border-radius: 0 0 0.75rem 0.75rem;
    background: var(--product-ink);
    color: var(--product-white);
    font-weight: 700;
    transition: translate 160ms ease;
}

.product-skip-link:focus {
    translate: 0;
}

.product-home :focus-visible {
    outline: 3px solid var(--product-pink);
    outline-offset: 4px;
}

.product-home ::selection {
    background: var(--product-pink);
    color: var(--product-white);
}

#main,
#listen,
#real-songs,
#how-it-works,
#inside,
#faq {
    scroll-margin-top: 96px;
}

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

/* Header */

.product-header {
    position: sticky;
    z-index: 100;
    top: 0;
    border-bottom: 1px solid transparent;
    background: color-mix(in srgb, var(--product-paper) 88%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    transition: border-color 180ms ease, background-color 180ms ease;
}

.product-header.is-scrolled {
    border-bottom-color: var(--product-line);
}

.product-nav-shell {
    display: flex;
    min-height: 72px;
    align-items: center;
    gap: 1.25rem;
}

.product-brand {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--product-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: inherit;
}

.product-brand img {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    box-shadow: 0 7px 20px rgba(255, 23, 77, 0.2);
}

.product-menu-button {
    display: none;
    width: 48px;
    height: 48px;
    margin-left: auto;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.product-menu-button svg {
    width: 22px;
    height: 22px;
}

.product-menu-button .menu-close,
.product-menu-button[aria-expanded="true"] .menu-open {
    display: none;
}

.product-menu-button[aria-expanded="true"] .menu-close {
    display: block;
}

.product-nav {
    display: flex;
    margin-left: auto;
    align-items: center;
    gap: 0.25rem;
}

.product-nav > a:not(.product-download),
.product-language a {
    padding: 0.55rem 0.75rem;
    border-radius: 999px;
    color: #403a3e;
    font-size: 0.9rem;
    font-weight: 600;
}

.product-nav > a:not(.product-download):hover,
.product-language a:hover {
    background: rgba(21, 18, 20, 0.06);
}

.product-language {
    display: inline-flex;
    margin-left: 0.5rem;
    padding: 0.2rem;
    border: 1px solid var(--product-line);
    border-radius: 999px;
}

.product-language a {
    display: grid;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.35rem 0.6rem;
    place-items: center;
    text-align: center;
}

.product-language a[aria-current="true"] {
    background: var(--product-ink);
    color: var(--product-white);
}

.product-download {
    display: inline-flex;
    min-height: 42px;
    margin-left: 0.5rem;
    padding: 0.65rem 1.1rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--product-ink);
    color: var(--product-white);
    font-size: 0.9rem;
    font-weight: 700;
    transition: translate 160ms ease, background-color 160ms ease;
}

.product-download:hover {
    translate: 0 -2px;
    background: var(--product-pink);
}

/* Hero */

.product-hero {
    position: relative;
    min-height: min(900px, calc(100svh - 72px));
    padding-block: clamp(4.5rem, 8vw, 8rem) clamp(5rem, 9vw, 8rem);
    overflow: hidden;
    isolation: isolate;
}

.product-hero::before {
    position: absolute;
    z-index: -2;
    width: min(70vw, 930px);
    aspect-ratio: 1;
    top: -48%;
    right: -14%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 23, 77, 0.16), rgba(242, 100, 50, 0.06) 47%, transparent 70%);
    content: "";
}

.product-hero::after {
    position: absolute;
    z-index: -3;
    inset: 0;
    opacity: 0.32;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
    pointer-events: none;
    content: "";
}

.product-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(480px, 1.06fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 7.5rem);
}

.product-hero-copy {
    position: relative;
    z-index: 3;
    min-width: 0;
}

.product-kicker {
    display: inline-flex;
    margin-bottom: 1.5rem;
    align-items: center;
    gap: 0.55rem;
    color: #6b6065;
    font-family: var(--product-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.product-kicker::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--product-pink);
    box-shadow: 0 0 0 6px rgba(255, 23, 77, 0.1);
    content: "";
}

.product-hero h1 {
    max-width: 8.6ch;
    margin-bottom: 1.5rem;
    font-family: var(--product-display);
    font-size: clamp(3.9rem, 7.2vw, 7.1rem);
    font-weight: 800;
    line-height: 0.93;
    letter-spacing: -0.067em;
    text-wrap: balance;
}

.product-hero h1 span {
    display: block;
    color: var(--product-pink);
}

.product-hero-lead {
    max-width: 34rem;
    margin-bottom: 2rem;
    color: var(--product-ink-soft);
    font-size: clamp(1.08rem, 1.55vw, 1.28rem);
    line-height: 1.55;
}

.product-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
}

.product-store-badge {
    display: inline-block;
    flex: none;
    border-radius: 9px;
}

.product-store-badge img {
    width: auto;
    height: 52px;
}

.product-secondary-action {
    display: inline-flex;
    min-height: 52px;
    padding: 0.8rem 1.15rem;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid var(--product-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.54);
    color: var(--product-ink);
    font-weight: 700;
    transition: background-color 160ms ease, translate 160ms ease;
}

.product-secondary-action:hover {
    translate: 0 -2px;
    background: var(--product-white);
}

.product-secondary-action svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.product-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.25rem;
    margin: 1.5rem 0 0;
    padding: 0;
    color: #71686d;
    font-size: 0.82rem;
    list-style: none;
}

.product-hero-facts li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.product-hero-facts li::before {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--product-orange);
    content: "";
}

.product-hero-art {
    position: relative;
    min-width: 0;
    min-height: 680px;
    isolation: isolate;
}

.hero-grooves {
    position: absolute;
    z-index: -1;
    width: 580px;
    height: 580px;
    top: 50%;
    left: 50%;
    translate: -47% -50%;
    border: 1px solid rgba(214, 10, 89, 0.13);
    border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 16px, rgba(21, 18, 20, 0.07) 17px 18px);
    opacity: 0.76;
}

.hero-grooves::before,
.hero-grooves::after {
    position: absolute;
    border: 1px solid rgba(255, 23, 77, 0.16);
    border-radius: 50%;
    content: "";
}

.hero-grooves::before {
    inset: 16%;
}

.hero-grooves::after {
    inset: 34%;
    background: rgba(255, 255, 255, 0.42);
}

.hero-poster {
    position: absolute;
    aspect-ratio: 660 / 1434;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 30px;
    background: #c81753;
    box-shadow: var(--product-shadow);
}

.hero-poster img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hero-poster-back {
    z-index: 1;
    width: 278px;
    height: auto;
    top: 48px;
    left: 26px;
    rotate: -7deg;
}

.hero-poster-front {
    z-index: 2;
    width: 298px;
    height: auto;
    top: 5px;
    right: 18px;
    rotate: 4deg;
}

.hero-photo-ticket {
    --ticket-size: 174px;
    position: absolute;
    z-index: 4;
    width: var(--ticket-size);
    margin: 0;
    padding: 0.55rem 0.55rem 0.7rem;
    bottom: 2px;
    left: -6px;
    rotate: 4deg;
    border: 1px solid rgba(21, 18, 20, 0.12);
    background: var(--product-white);
    box-shadow: 0 20px 55px rgba(44, 18, 30, 0.2);
}

.hero-photo-ticket img {
    width: 100%;
    height: calc(var(--ticket-size) - 1.1rem);
    object-fit: cover;
    object-position: center 32%;
}

.hero-photo-ticket figcaption {
    display: flex;
    margin-top: 0.55rem;
    justify-content: space-between;
    gap: 0.5rem;
    font-family: var(--product-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.hero-photo-ticket figcaption span:last-child {
    color: var(--product-pink);
}

.hero-player {
    position: absolute;
    z-index: 5;
    right: -8px;
    bottom: 30px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    width: min(360px, 76%);
    min-height: 76px;
    padding: 0.7rem 0.9rem;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    background: rgba(16, 13, 16, 0.94);
    color: var(--product-white);
    box-shadow: 0 24px 70px rgba(30, 5, 18, 0.34);
    cursor: pointer;
    text-align: left;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.hero-player-play {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 50%;
    background: var(--product-pink);
    color: var(--product-white);
    box-shadow: 0 10px 24px rgba(255, 23, 77, 0.3);
    transition: box-shadow 160ms ease, transform 160ms ease;
}

.hero-player:hover .hero-player-play,
.hero-player[aria-pressed="true"] .hero-player-play {
    box-shadow: 0 12px 30px rgba(255, 23, 77, 0.44);
    transform: translateY(-1px);
}

.hero-player-play svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.product-home .icon-pause {
    display: none;
}

.product-home [data-track-button].is-playing .icon-play,
.product-home [data-hero-track-button].is-playing .icon-play {
    display: none;
}

.product-home [data-track-button].is-playing .icon-pause,
.product-home [data-hero-track-button].is-playing .icon-pause {
    display: block;
}

.hero-player-copy {
    min-width: 0;
}

.hero-player-copy strong,
.hero-player-copy span {
    display: block;
}

.hero-player-copy strong {
    overflow: hidden;
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-player-copy span {
    color: #b9afb4;
    font-size: 0.7rem;
}

.hero-waveform {
    display: flex;
    height: 28px;
    align-items: center;
    gap: 3px;
}

.hero-waveform i {
    display: block;
    width: 2px;
    height: var(--bar, 35%);
    border-radius: 999px;
    background: #746b71;
}

.hero-player.is-playing .hero-waveform i {
    background: var(--product-pink);
    animation: product-wave 680ms ease-in-out infinite alternate;
    animation-delay: calc(var(--index, 0) * -80ms);
}

/* Signal strip */

.product-signal {
    overflow: hidden;
    border-block: 1px solid var(--product-ink);
    background: var(--product-pink);
    color: var(--product-ink);
}

.product-signal-track {
    display: flex;
    width: max-content;
    padding-block: 0.9rem;
    animation: product-marquee var(--product-signal-duration, 26s) linear infinite;
}

.product-signal-group {
    display: flex;
    width: max-content;
    flex: 0 0 auto;
    align-items: center;
}

.product-signal-sequence {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
}

.product-signal-track span {
    display: inline-flex;
    align-items: center;
    font-family: var(--product-mono);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    white-space: nowrap;
}

.product-signal-track span::after {
    margin-inline: 1.1rem;
    content: "✦";
}

/* Listening room */

.listen-section {
    position: relative;
    padding-block: clamp(6rem, 11vw, 10rem);
    overflow: hidden;
    background: var(--product-dark);
    color: var(--product-dark-text);
}

.listen-section::before {
    position: absolute;
    width: 760px;
    height: 760px;
    top: -360px;
    right: -230px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--track-glow, rgba(255, 127, 55, 0.22)), transparent 68%);
    content: "";
    transition: background 400ms ease;
}

.product-section-heading {
    display: grid;
    margin-bottom: clamp(3rem, 7vw, 5.5rem);
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.52fr);
    align-items: end;
    gap: 2rem;
}

.product-section-heading .product-kicker {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.listen-section .product-kicker {
    color: var(--product-dark-muted);
}

.product-section-heading h2 {
    max-width: 10ch;
    margin-bottom: 0;
    font-family: var(--product-display);
    font-size: clamp(3rem, 6vw, 6.2rem);
    line-height: 0.96;
    letter-spacing: -0.06em;
}

.product-section-heading > p {
    margin-bottom: 0.45rem;
    color: var(--product-dark-muted);
    font-size: clamp(1rem, 1.4vw, 1.18rem);
}

.listen-grid {
    display: grid;
    grid-template-columns: minmax(360px, 0.96fr) minmax(360px, 1.04fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);
}

.record-stage {
    position: relative;
    min-height: 580px;
}

.record-disc {
    position: absolute;
    width: min(500px, 96%);
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background:
        radial-gradient(circle at center, var(--track-accent, #f5a14a) 0 6%, #171317 6.4% 10%, transparent 10.5%),
        repeating-radial-gradient(circle, #171317 0 7px, #272027 8px 9px);
    box-shadow: 0 50px 110px rgba(0, 0, 0, 0.45);
}

.record-disc::after {
    position: absolute;
    inset: 23%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.28), transparent 23%), var(--track-accent, #f5a14a);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12);
    content: "";
}

.listen-section.is-playing .record-disc {
    animation: product-spin 14s linear infinite;
}

.listen-photo-frame,
.listen-cover {
    position: absolute;
    overflow: hidden;
    margin: 0;
    border-radius: 8px;
    box-shadow: 0 38px 95px rgba(0, 0, 0, 0.5);
}

.listen-photo-frame {
    z-index: 2;
    width: 46%;
    aspect-ratio: 1 / 1.16;
    left: 1%;
    bottom: 4%;
    rotate: -5deg;
    border: 10px solid var(--product-dark-text);
    background: var(--product-dark-text);
    color: var(--product-ink);
}

.listen-photo-frame img {
    width: 100%;
    height: calc(100% - 36px);
    object-fit: cover;
}

.listen-photo-frame figcaption {
    padding-top: 0.65rem;
    font-family: var(--product-mono);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.listen-cover {
    z-index: 3;
    width: 54%;
    aspect-ratio: 1;
    top: 4%;
    right: 1%;
    rotate: 4deg;
    background: #261318;
}

.listen-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.88) contrast(1.04);
    transition: opacity 110ms ease, transform 110ms ease;
}

.listen-photo-frame img,
.listen-photo-frame figcaption,
.listen-cover-copy,
.track-panel-label,
.track-panel > h3,
.track-panel > p:not(.track-panel-label):not(.listen-note) {
    transition: opacity 110ms ease, transform 110ms ease;
}

.listen-section.is-switching .listen-photo-frame img,
.listen-section.is-switching .listen-photo-frame figcaption,
.listen-section.is-switching .listen-cover img,
.listen-section.is-switching .listen-cover-copy,
.listen-section.is-switching .track-panel-label,
.listen-section.is-switching .track-panel > h3,
.listen-section.is-switching .track-panel > p:not(.track-panel-label):not(.listen-note) {
    opacity: 0;
    transform: translateY(4px);
}

.listen-cover::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 38%, rgba(5, 4, 5, 0.88));
    content: "";
}

.listen-cover-copy {
    position: absolute;
    z-index: 2;
    right: 1.15rem;
    bottom: 1.1rem;
    left: 1.15rem;
}

.listen-cover-copy span,
.listen-cover-copy strong {
    display: block;
}

.listen-cover-copy span {
    margin-bottom: 0.35rem;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--product-mono);
    font-size: 0.63rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.listen-cover-copy strong {
    font-family: var(--product-serif);
    font-size: clamp(1.35rem, 2.5vw, 2.2rem);
    font-weight: 600;
    line-height: 1;
}

.track-panel-label {
    margin-bottom: 0.65rem;
    color: var(--track-accent, #f5a14a);
    font-family: var(--product-mono);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.track-panel > h3 {
    margin-bottom: 0.55rem;
    font-family: var(--product-serif);
    font-size: clamp(2.2rem, 4vw, 4.2rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.035em;
}

.track-panel > p:not(.track-panel-label):not(.listen-note) {
    max-width: 34rem;
    margin-bottom: 2rem;
    color: var(--product-dark-muted);
}

.listen-track-list {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--product-dark-line);
    list-style: none;
}

.listen-track-button {
    position: relative;
    display: grid;
    width: 100%;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    min-height: 84px;
    padding: 0.9rem 0.25rem;
    align-items: center;
    gap: 0.9rem;
    border: 0;
    border-bottom: 1px solid var(--product-dark-line);
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.listen-track-button::after {
    position: absolute;
    height: 2px;
    right: 0;
    bottom: -1px;
    left: 0;
    scale: 0 1;
    transform-origin: left;
    background: var(--track-accent, #f5a14a);
    content: "";
    transition: scale 180ms ease;
}

.listen-track-button:hover::after,
.listen-track-button[aria-pressed="true"]::after,
.listen-track-button.is-selected::after {
    scale: 1 1;
}

.listen-track-play {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--product-pink);
    color: var(--product-white);
    box-shadow: 0 9px 22px rgba(255, 23, 77, 0.25);
    transition: box-shadow 160ms ease, transform 160ms ease;
}

.listen-track-button:hover .listen-track-play,
.listen-track-button[aria-pressed="true"] .listen-track-play {
    background: var(--product-pink);
    color: var(--product-white);
    box-shadow: 0 11px 28px rgba(255, 23, 77, 0.42);
    transform: translateY(-1px);
}

.listen-track-play svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.listen-track-copy strong,
.listen-track-copy span {
    display: block;
}

.listen-track-copy strong {
    font-size: 0.98rem;
}

.listen-track-copy span,
.listen-track-time {
    color: var(--product-dark-muted);
    font-size: 0.76rem;
}

.listen-track-progress {
    position: absolute;
    z-index: 2;
    height: 2px;
    right: 0;
    bottom: -1px;
    left: 0;
    overflow: hidden;
}

.listen-track-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--track-accent, #f5a14a);
}

.listen-note {
    margin-top: 1.25rem;
    color: #8e8389;
    font-size: 0.78rem;
}

.listen-note a {
    color: var(--product-dark-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Editorial proof line */

.press-proof {
    border-bottom: 1px solid var(--product-line);
    background: var(--product-white);
}

.press-proof-inner {
    display: flex;
    min-height: 98px;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.press-proof p {
    margin: 0;
    font-family: var(--product-serif);
    font-size: clamp(1.1rem, 2vw, 1.45rem);
}

.press-proof-actions {
    display: flex;
    flex: none;
    align-items: flex-end;
    flex-direction: column;
    gap: 0.35rem;
}

.press-proof-cta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
    color: var(--product-magenta);
    font-size: 0.86rem;
    font-weight: 750;
}

.press-proof-logo {
    width: clamp(132px, 13vw, 158px);
    height: auto;
    flex: none;
}

.press-proof-link-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.press-proof-link-label::after {
    content: "↗";
}

.press-proof-cta:hover .press-proof-link-label {
    color: var(--product-pink-text);
}

/* Process */

.process-section,
.gallery-section,
.benefits-section,
.moments-section,
.trust-section,
.product-faq {
    padding-block: clamp(6rem, 11vw, 10rem);
}

.light-heading {
    display: grid;
    margin-bottom: clamp(3.5rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.48fr);
    align-items: end;
    gap: 2rem;
}

.light-heading .product-kicker {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.light-heading h2 {
    max-width: 11ch;
    margin-bottom: 0;
    font-family: var(--product-display);
    font-size: clamp(3rem, 6vw, 6rem);
    line-height: 0.96;
    letter-spacing: -0.06em;
}

.light-heading > p {
    margin-bottom: 0.45rem;
    color: var(--product-ink-soft);
    font-size: clamp(1rem, 1.4vw, 1.18rem);
}

.process-list {
    --process-gap: clamp(2.5rem, 4.5vw, 4.5rem);
    --process-half-gap: clamp(1.25rem, 2.25vw, 2.25rem);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--process-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.process-step {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
    padding-top: 1.25rem;
    align-items: stretch;
    flex-direction: column;
    gap: 1.15rem;
    border-top: 1px solid var(--product-line);
}

.process-number {
    padding-top: 0;
    color: var(--product-pink-text);
    font-family: var(--product-mono);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.process-copy {
    min-height: 170px;
}

.process-copy h3 {
    margin-bottom: 0.65rem;
    font-family: var(--product-display);
    font-size: clamp(1.85rem, 2.4vw, 2.6rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.process-copy p {
    max-width: none;
    margin-bottom: 0;
    color: var(--product-ink-soft);
}

.process-device {
    --device-frame: 9px;
    --device-radius: clamp(38px, 3.8vw, 50px);
    position: relative;
    width: 100%;
    margin-top: auto;
    padding: var(--device-frame);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--device-radius);
    background: linear-gradient(145deg, #3c393d 0%, #0a090a 18%, #050405 76%, #2b292c 100%);
    box-shadow:
        0 28px 70px rgba(44, 18, 30, 0.2),
        inset 0 0 0 1px rgba(0, 0, 0, 0.82),
        inset 0 0 0 2px rgba(255, 255, 255, 0.06);
    isolation: isolate;
}

.process-device::before,
.process-device::after {
    position: absolute;
    z-index: 0;
    width: 4px;
    border-radius: 3px;
    background: #181619;
    content: "";
}

.process-device::before {
    height: 12%;
    top: 20%;
    left: -4px;
    box-shadow: 0 52px 0 #181619;
}

.process-device::after {
    height: 18%;
    top: 27%;
    right: -4px;
}

.process-media {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 0;
    aspect-ratio: 660 / 1434;
    overflow: hidden;
    border: 0;
    border-radius: calc(var(--device-radius) - var(--device-frame));
    background: #111;
}

.process-media img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
}

.process-media.is-photo img {
    object-position: center;
}

.process-media.is-screen {
    display: block;
    background: #111;
}

.process-media.is-screen img {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
}

.process-flow-arrow {
    position: absolute;
    z-index: 5;
    width: 42px;
    height: 42px;
    top: 50%;
    left: calc(100% + var(--process-half-gap));
    display: grid;
    translate: -50% -50%;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--product-pink);
    color: #fff;
    box-shadow: 0 12px 30px rgba(255, 23, 77, 0.35);
    pointer-events: none;
}

.process-flow-arrow svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.process-song-player {
    position: absolute;
    right: 0;
    bottom: calc(-76px - 1.15rem);
    left: 0;
    display: grid;
    width: 100%;
    min-height: 76px;
    margin: 0;
    padding: 0.75rem 0.8rem;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    background: #0b090b;
    color: var(--product-dark-text);
    box-shadow: 0 18px 45px rgba(44, 18, 30, 0.18);
    cursor: pointer;
    text-align: left;
    transition: border-color 160ms ease, translate 160ms ease;
}

.process-song-player:hover,
.process-song-player[aria-pressed="true"] {
    border-color: var(--product-pink);
    translate: 0 -2px;
}

.process-song-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    background: var(--product-pink);
    color: var(--product-white);
    box-shadow: 0 9px 22px rgba(255, 23, 77, 0.28);
}

.process-song-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.process-song-copy,
.process-song-copy span,
.process-song-copy strong {
    display: block;
    min-width: 0;
}

.process-song-copy span {
    margin-bottom: 0.1rem;
    color: var(--product-dark-muted);
    font-family: var(--product-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.process-song-copy strong {
    overflow: hidden;
    font-size: 0.88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.process-song-time {
    color: var(--product-dark-muted);
    font-size: 0.72rem;
}

.process-song-progress {
    position: absolute;
    height: 3px;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}

.process-song-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--product-pink);
}

/* App preview */

.preview-section {
    padding-bottom: clamp(6rem, 11vw, 10rem);
}

.preview-shell {
    --preview-shell-padding-x: clamp(2rem, 6vw, 5rem);

    position: relative;
    display: grid;
    min-height: 720px;
    padding: var(--preview-shell-padding-x);
    grid-template-columns: minmax(0, 1fr) clamp(360px, 36vw, 430px);
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
    overflow: hidden;
    border-radius: clamp(28px, 5vw, 56px);
    background: linear-gradient(135deg, #ffb49b 0%, #ff5276 48%, #d70a59 100%);
    color: var(--product-ink);
}

.preview-shell::before {
    position: absolute;
    width: 540px;
    height: 540px;
    right: -200px;
    bottom: -280px;
    border: 1px solid rgba(21, 18, 20, 0.18);
    border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 13px, rgba(21, 18, 20, 0.1) 14px 15px);
    content: "";
}

.preview-copy {
    position: relative;
    z-index: 2;
}

.preview-copy .product-kicker {
    color: rgba(21, 18, 20, 0.68);
}

.preview-copy .product-kicker::before {
    background: var(--product-ink);
    box-shadow: 0 0 0 6px rgba(21, 18, 20, 0.1);
}

.preview-copy h2 {
    max-width: 8ch;
    margin-bottom: 1.2rem;
    font-family: var(--product-display);
    font-size: clamp(3rem, 5.5vw, 5.6rem);
    line-height: 0.94;
    letter-spacing: -0.06em;
}

.preview-copy > p {
    max-width: 31rem;
    margin-bottom: 1.6rem;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
}

.preview-points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.preview-points li {
    padding: 0.55rem 0.85rem;
    border: 1px solid rgba(21, 18, 20, 0.25);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    font-size: 0.78rem;
    font-weight: 750;
}

.preview-video-frame {
    position: relative;
    z-index: 2;
    width: min(100%, 430px);
    margin: 0;
    justify-self: end;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.preview-video-frame.is-enhanced {
    padding-bottom: 54px;
}

.preview-video-frame video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 750 / 1334;
    border-radius: 0;
    background: transparent;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.preview-video-frame video::-webkit-media-controls {
    display: none !important;
}

.preview-video-toggle {
    position: absolute;
    z-index: 3;
    right: 50%;
    bottom: calc(50% + 27px);
    display: none;
    width: 56px;
    height: 56px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--product-pink);
    color: var(--product-white);
    box-shadow: 0 10px 24px rgba(255, 23, 77, 0.3);
    cursor: pointer;
    translate: 50% 50%;
    transition: right 220ms ease, bottom 220ms ease, width 220ms ease, height 220ms ease, translate 220ms ease, box-shadow 160ms ease, scale 160ms ease;
}

.preview-video-frame.is-enhanced .preview-video-toggle {
    display: grid;
}

.preview-video-frame.has-started .preview-video-toggle {
    right: calc(50% - 48px);
    bottom: 0;
    width: 44px;
    height: 44px;
    translate: 0 0;
}

.preview-video-restart {
    position: absolute;
    z-index: 3;
    right: calc(50% + 4px);
    bottom: 0;
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--product-white);
    cursor: pointer;
    transition: scale 160ms ease;
}

.preview-video-restart::before {
    position: absolute;
    inset: 5px;
    border: 0;
    border-radius: inherit;
    background: var(--product-ink);
    box-shadow: 0 8px 20px rgba(47, 5, 23, 0.22);
    content: "";
    transition: box-shadow 160ms ease;
}

.preview-video-frame.is-enhanced .preview-video-restart:not([hidden]) {
    display: grid;
}

.preview-video-toggle:hover {
    box-shadow: 0 15px 36px rgba(47, 5, 23, 0.38);
    scale: 1.04;
}

.preview-video-restart:hover {
    scale: 1.04;
}

.preview-video-restart:hover::before {
    box-shadow: 0 11px 26px rgba(47, 5, 23, 0.34);
}

.preview-video-toggle:focus-visible,
.preview-video-restart:focus-visible {
    outline: 3px solid var(--product-white);
    outline-offset: 4px;
}

.preview-video-toggle svg,
.preview-video-restart svg {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.preview-video-restart svg {
    width: 16px;
    height: 16px;
}

.preview-video-frame.is-playing .preview-video-toggle .icon-play {
    display: none;
}

.preview-video-frame.is-playing .preview-video-toggle .icon-pause {
    display: block;
}

.preview-video-fallback {
    display: inline-flex;
    margin-top: 0.75rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid rgba(21, 18, 20, 0.25);
    border-radius: 999px;
    color: var(--product-ink);
    font-size: 0.8rem;
    font-weight: 750;
}

/* Screenshot gallery */

.gallery-section {
    border-block: 1px solid var(--product-line);
    background: var(--product-white);
}

.gallery-heading {
    display: flex;
    margin-bottom: 3rem;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
}

.gallery-heading h2 {
    max-width: 11ch;
    margin: 0;
    font-family: var(--product-display);
    font-size: clamp(2.8rem, 5.2vw, 5.2rem);
    line-height: 0.98;
    letter-spacing: -0.058em;
}

.gallery-heading p {
    max-width: 31rem;
    margin-bottom: 0.35rem;
    color: var(--product-ink-soft);
}

.screenshot-rail {
    display: grid;
    grid-auto-columns: minmax(220px, 1fr);
    grid-auto-flow: column;
    gap: 1rem;
    margin-inline: calc(var(--product-gutter) * -1);
    padding: 1rem var(--product-gutter) 2rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
}

.screenshot-rail img {
    width: 100%;
    height: auto;
    max-width: 300px;
    justify-self: center;
    border-radius: 24px;
    box-shadow: 0 22px 55px rgba(37, 15, 26, 0.12);
    scroll-snap-align: center;
}

/* Benefits */

.benefits-section {
    background: var(--product-paper-deep);
}

.benefit-ledger {
    border-top: 1px solid var(--product-line);
}

.benefit-row {
    display: grid;
    grid-template-columns: 80px minmax(250px, 0.72fr) minmax(300px, 1fr);
    padding-block: 2.15rem;
    align-items: baseline;
    gap: clamp(1.25rem, 4vw, 4rem);
    border-bottom: 1px solid var(--product-line);
}

.benefit-row > span {
    color: var(--product-pink-text);
    font-family: var(--product-mono);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.benefit-row h3 {
    margin-bottom: 0;
    font-family: var(--product-display);
    font-size: clamp(1.5rem, 2.7vw, 2.65rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.benefit-row p {
    max-width: 36rem;
    margin-bottom: 0;
    color: var(--product-ink-soft);
}

.language-line {
    display: flex;
    margin-top: 2rem;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    color: var(--product-ink-soft);
    font-size: 0.85rem;
}

.language-line strong {
    color: var(--product-ink);
}

.language-line span:not(:first-child) {
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--product-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
}

/* Moments */

.moments-section {
    background: var(--product-pink);
}

.moments-section .light-heading {
    margin-bottom: 2rem;
}

.moments-section .product-kicker,
.moments-section .light-heading > p {
    color: var(--product-ink);
}

.moments-section .product-kicker::before {
    background: var(--product-ink);
    box-shadow: 0 0 0 6px rgba(21, 18, 20, 0.1);
}

.moment-links {
    border-top: 1px solid rgba(21, 18, 20, 0.28);
}

.moment-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding-block: 1.35rem;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid rgba(21, 18, 20, 0.28);
    font-family: var(--product-display);
    font-size: clamp(1.7rem, 4vw, 4.4rem);
    font-weight: 750;
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--product-ink);
    transition: padding-inline 180ms ease, background-color 180ms ease;
}

.moment-link:hover {
    padding-inline: 1rem;
    background: rgba(255, 255, 255, 0.16);
}

.moment-link span:last-child {
    font-family: var(--product-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Trust and studio */

.trust-section {
    background: var(--product-white);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--product-line);
    border-radius: 32px;
    background: var(--product-line);
}

.trust-panel {
    min-height: 390px;
    padding: clamp(2rem, 5vw, 4rem);
    background: var(--product-paper);
}

.trust-panel.is-studio {
    background: var(--product-ink);
    color: var(--product-white);
}

.trust-panel-label {
    display: block;
    margin-bottom: 4rem;
    font-family: var(--product-mono);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.trust-panel h2 {
    max-width: 11ch;
    margin-bottom: 1rem;
    font-family: var(--product-display);
    font-size: clamp(2.35rem, 4vw, 4.2rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.trust-panel p {
    max-width: 32rem;
    margin-bottom: 1.2rem;
    color: var(--product-ink-soft);
}

.trust-panel.is-studio p {
    color: var(--product-dark-muted);
}

.trust-panel a {
    color: var(--product-magenta);
    font-weight: 750;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.trust-panel.is-studio a {
    color: #ff6d91;
}

.trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.trust-badges span {
    padding: 0.42rem 0.65rem;
    border: 1px solid var(--product-line);
    border-radius: 999px;
    color: var(--product-ink-soft);
    font-size: 0.72rem;
    font-weight: 700;
}

/* FAQ */

.product-faq {
    border-top: 1px solid var(--product-line);
}

.faq-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.7fr) minmax(390px, 1fr);
    gap: clamp(3rem, 8vw, 8rem);
}

.faq-intro {
    position: sticky;
    top: 115px;
    align-self: start;
}

.faq-intro h2 {
    max-width: 9ch;
    margin-bottom: 1rem;
    font-family: var(--product-display);
    font-size: clamp(3rem, 5vw, 5.3rem);
    line-height: 0.96;
    letter-spacing: -0.06em;
}

.faq-intro p {
    color: var(--product-ink-soft);
}

.faq-intro a {
    color: var(--product-magenta);
    font-weight: 750;
}

.product-faq-list {
    border-top: 1px solid var(--product-line);
}

.product-faq-item {
    border-bottom: 1px solid var(--product-line);
}

.product-faq-item summary {
    display: grid;
    min-height: 88px;
    grid-template-columns: minmax(0, 1fr) 28px;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
}

.product-faq-item summary::-webkit-details-marker {
    display: none;
}

.product-faq-item summary h3 {
    margin: 0;
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
    font-weight: 700;
}

.product-faq-item summary::after {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid var(--product-line);
    border-radius: 50%;
    content: "+";
    transition: rotate 180ms ease, background-color 180ms ease;
}

.product-faq-item[open] summary::after {
    rotate: 45deg;
    background: var(--product-pink);
}

.product-faq-answer {
    max-width: 43rem;
    padding: 0 3rem 1.75rem 0;
    color: var(--product-ink-soft);
}

.product-faq-answer p:last-child {
    margin-bottom: 0;
}

.product-faq-answer a {
    color: var(--product-magenta);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Closing */

.product-closing {
    position: relative;
    padding-block: clamp(7rem, 13vw, 12rem);
    overflow: hidden;
    background: var(--product-dark);
    color: var(--product-dark-text);
    text-align: center;
}

.closing-grooves {
    position: absolute;
    width: min(960px, 100vw);
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 22px, rgba(255, 255, 255, 0.055) 23px 24px);
    pointer-events: none;
}

.closing-content {
    position: relative;
    z-index: 2;
}

.closing-content img.product-icon-large {
    width: 82px;
    height: 82px;
    margin: 0 auto 1.5rem;
    border-radius: 21px;
    box-shadow: 0 20px 55px rgba(255, 23, 77, 0.27);
}

.closing-content h2 {
    max-width: 12ch;
    margin: 0 auto 1.25rem;
    font-family: var(--product-display);
    font-size: clamp(3.2rem, 7vw, 7rem);
    line-height: 0.94;
    letter-spacing: -0.065em;
}

.closing-content h2 span {
    color: var(--product-pink);
}

.closing-content p {
    max-width: 36rem;
    margin: 0 auto 2rem;
    color: var(--product-dark-muted);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
}

.closing-content .product-store-badge {
    display: inline-block;
}

/* Footer */

.product-footer {
    padding-block: 4rem 1.5rem;
    border-top: 1px solid var(--product-line);
    background: var(--product-paper);
}

.product-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(130px, 0.6fr));
    gap: 2rem;
    padding-bottom: 3rem;
}

.product-footer-brand p {
    max-width: 28rem;
    margin: 1rem 0;
    color: var(--product-ink-soft);
    font-size: 0.88rem;
}

.product-footer-brand .truetapp-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--product-ink);
}

.product-footer-brand .truetapp-mark img {
    width: 23px;
    height: 23px;
}

.product-footer-column h3 {
    margin-bottom: 0.85rem;
    color: #665d62;
    font-family: var(--product-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.product-footer-column ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-footer-column li + li {
    margin-top: 0.55rem;
}

.product-footer-column a {
    color: var(--product-ink-soft);
    font-size: 0.85rem;
}

.product-footer-column a:hover {
    color: var(--product-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.product-footer-legal {
    display: flex;
    padding-top: 1.25rem;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--product-line);
    color: #665d62;
    font-size: 0.72rem;
}

/* Motion */

@keyframes product-wave {
    from { scale: 1 0.55; }
    to { scale: 1 1.25; }
}

@keyframes product-marquee {
    to { translate: -50% 0; }
}

@keyframes product-spin {
    to { rotate: 360deg; }
}

@media (prefers-reduced-motion: no-preference) {
    .hero-poster-back {
        animation: hero-back-in 700ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
    }

    .hero-poster-front {
        animation: hero-front-in 760ms 80ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
    }

    .hero-photo-ticket,
    .hero-player {
        animation: hero-float-in 620ms 220ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
    }

    @keyframes hero-back-in {
        from { opacity: 0; translate: 35px 45px; rotate: -2deg; }
    }

    @keyframes hero-front-in {
        from { opacity: 0; translate: -25px 55px; rotate: -1deg; }
    }

    @keyframes hero-float-in {
        from { opacity: 0; translate: 0 28px; }
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .product-signal-track,
    .listen-section.is-playing .record-disc,
    .hero-player.is-playing .hero-waveform i {
        animation: none;
    }

    .listen-photo-frame img,
    .listen-photo-frame figcaption,
    .listen-cover img,
    .listen-cover-copy,
    .track-panel-label,
    .track-panel > h3,
    .track-panel > p:not(.track-panel-label):not(.listen-note),
    .preview-video-toggle,
    .preview-video-restart {
        transition: none;
    }
}

/* Responsive */

@media (max-width: 980px) {
    .product-menu-button {
        display: grid;
    }

    .product-nav {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: none;
        margin: 0;
        padding: 0.8rem var(--product-gutter) 1.25rem;
        align-items: stretch;
        border-bottom: 1px solid var(--product-line);
        background: color-mix(in srgb, var(--product-paper) 96%, transparent);
        -webkit-backdrop-filter: blur(22px);
        backdrop-filter: blur(22px);
    }

    .product-nav.is-open {
        display: flex;
        flex-direction: column;
    }

    .product-nav > a:not(.product-download) {
        min-height: 48px;
        padding: 0.8rem 0.9rem;
    }

    .product-language {
        width: fit-content;
        margin: 0.5rem 0;
    }

    .product-download {
        margin: 0;
    }

    .product-hero {
        min-height: 0;
        padding-top: 4.5rem;
    }

    .product-hero-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .product-hero-copy {
        max-width: 750px;
    }

    .product-hero h1 {
        max-width: 9ch;
    }

    .product-hero-art {
        width: min(650px, 100%);
        margin-inline: auto;
    }

    .listen-grid {
        grid-template-columns: 1fr;
    }

    .record-stage {
        width: min(620px, 100%);
        margin-inline: auto;
    }

    .preview-shell {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .preview-video-frame {
        width: min(400px, 100%);
        margin: 0;
        justify-self: center;
    }

    .process-list {
        grid-template-columns: 1fr;
        gap: 6.5rem;
    }

    .process-step {
        width: min(100%, 420px);
        margin-inline: auto;
        gap: 1rem;
    }

    .process-copy {
        min-height: 0;
    }

    .process-copy h3 {
        font-size: clamp(2rem, 8vw, 2.8rem);
    }

    .process-flow-arrow {
        top: calc(100% + 3.25rem);
        left: 50%;
        rotate: 90deg;
    }
}

@media (max-width: 760px) {
    .product-nav-shell {
        min-height: 64px;
    }

    .product-hero {
        padding-block: 2.5rem 4.5rem;
    }

    .product-hero-layout {
        gap: 0;
    }

    .product-hero-copy {
        display: contents;
    }

    .product-hero-copy .product-kicker { order: 1; }
    .product-hero-copy h1 { order: 2; }
    .product-hero-copy .product-hero-lead { order: 3; }
    .product-hero-copy .product-hero-actions { order: 4; }
    .product-hero-art { order: 5; margin-top: 2.25rem; }
    .product-hero-copy .product-hero-facts { order: 6; margin-top: 1.5rem; }

    .product-hero-copy .product-kicker,
    .product-hero-copy h1,
    .product-hero-copy .product-hero-lead,
    .product-hero-copy .product-hero-actions,
    .product-hero-copy .product-hero-facts {
        grid-column: 1;
    }

    .product-hero h1 {
        font-size: clamp(3.6rem, 17.5vw, 5.15rem);
    }

    .product-hero-lead {
        font-size: 1.05rem;
    }

    .product-hero-art {
        min-height: 530px;
    }

    .hero-grooves {
        width: 470px;
        height: 470px;
    }

    .hero-poster-back {
        width: 205px;
        height: auto;
        top: 46px;
        left: 6%;
    }

    .hero-poster-front {
        width: 218px;
        height: auto;
        top: 10px;
        right: 4%;
    }

    .hero-photo-ticket {
        --ticket-size: 135px;
        left: 0;
        bottom: 0;
    }

    .hero-player {
        width: min(320px, 79%);
        right: 0;
        bottom: 22px;
    }

    .product-section-heading,
    .light-heading,
    .gallery-heading {
        display: block;
    }

    .product-section-heading h2,
    .light-heading h2,
    .gallery-heading h2 {
        margin-bottom: 1.2rem;
    }

    .record-stage {
        min-height: 500px;
    }

    .preview-shell {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .preview-copy h2 {
        max-width: 10ch;
    }

    .preview-video-frame {
        width: min(380px, 100%);
        margin: 0;
        justify-self: center;
    }

    .benefit-row {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .benefit-row p {
        grid-column: 2;
    }

    .trust-grid,
    .faq-layout {
        grid-template-columns: 1fr;
    }

    .faq-intro {
        position: static;
    }

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

    .product-footer-brand {
        grid-column: 1 / -1;
    }

    .product-footer-legal {
        flex-direction: column;
    }
}

@media (max-width: 540px) {
    .press-proof-inner {
        padding-block: 1.5rem;
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }

    .press-proof-actions {
        width: 100%;
        align-items: flex-start;
    }

    .press-proof-cta {
        max-width: 100%;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        gap: 0.45rem;
    }

    .press-proof-link-label {
        white-space: normal;
    }
}

@media (max-width: 480px) {
    .product-hero-actions {
        align-items: center;
        flex-direction: row;
        gap: 0.55rem;
    }

    .product-secondary-action {
        min-height: 48px;
        padding: 0.65rem 0.85rem;
        justify-content: center;
        font-size: 0.84rem;
    }

    .product-store-badge img {
        height: 48px;
    }

    .product-hero-facts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-hero-art {
        width: calc(100% + 1rem);
        min-height: 480px;
        margin-left: -0.5rem;
    }

    .hero-grooves {
        width: 420px;
        height: 420px;
    }

    .hero-poster-back {
        width: 178px;
        height: auto;
        top: 48px;
        left: 4%;
    }

    .hero-poster-front {
        width: 190px;
        height: auto;
        right: 1%;
    }

    .hero-photo-ticket {
        --ticket-size: 116px;
        bottom: 7px;
    }

    .hero-player {
        grid-template-columns: 42px minmax(0, 1fr);
        width: 76%;
        min-height: 68px;
        bottom: 12px;
    }

    .hero-player-play {
        width: 42px;
        height: 42px;
    }

    .hero-waveform {
        display: none;
    }

    .record-stage {
        min-height: 410px;
    }

    .listen-photo-frame {
        width: 43%;
        border-width: 7px;
    }

    .listen-cover {
        width: 56%;
    }

    .process-list {
        gap: 5.25rem;
    }

    .process-flow-arrow {
        top: calc(100% + 2.625rem);
    }

    .process-device {
        --device-frame: 7px;
        --device-radius: 38px;
    }

    .process-song-player {
        min-height: 72px;
        padding-inline: 0.7rem;
        gap: 0.65rem;
    }

    .preview-shell {
        --preview-shell-padding-x: 1.25rem;

        padding: 2rem var(--preview-shell-padding-x);
        border-radius: 28px;
    }

    .preview-video-frame {
        width: min(380px, calc(100% + var(--preview-shell-padding-x)));
        margin: 0;
        justify-self: center;
    }

    .screenshot-rail {
        grid-auto-columns: minmax(215px, 76vw);
    }

    .benefit-row {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .benefit-row p {
        grid-column: 1;
    }

    .trust-panel {
        min-height: 0;
    }

    .trust-panel-label {
        margin-bottom: 2.5rem;
    }

    .product-footer-grid {
        grid-template-columns: 1fr;
    }

    .product-footer-brand {
        grid-column: auto;
    }
}