/* ==========================================================================
   MusicLinkr - musiclinkr.app
   Dark-only, hand-authored. No build step.

   Shape system (documented rule, applied everywhere):
     media frames + bento cells -> outer squircle shell 2rem, inner core
                                   at calc(2rem - var(--bezel))
     buttons / pills            -> fully rounded (999px)
     inline elements            -> 12px
   Motion: one curve family, --ease. Durations 600-800ms.
   Blur: backdrop-filter only on fixed elements (nav pill, menu overlay).
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
    --bg: #050505;
    --heading: #f5f5f7;
    --body: #c7c7cc;
    --muted: #8e8e93;

    --rose: #f43f5e;   /* Apple Music contexts */
    --green: #22c55e;  /* Spotify contexts */
    --link-gradient: linear-gradient(90deg, var(--rose) 0%, #b06a4f 48%, var(--green) 100%);

    --glass: rgba(255, 255, 255, 0.04);
    --glass-strong: rgba(255, 255, 255, 0.055);
    --hairline: rgba(255, 255, 255, 0.10);
    --hairline-soft: rgba(255, 255, 255, 0.07);
    --inner-top: inset 0 1px 1px rgba(255, 255, 255, 0.12);
    --lift: 0 24px 60px -24px rgba(0, 0, 0, 0.9), 0 2px 8px -2px rgba(0, 0, 0, 0.6);

    --radius-shell: 2rem;
    --bezel: 0.375rem;
    --radius-core: calc(var(--radius-shell) - var(--bezel));
    --radius-inline: 12px;

    --ease: cubic-bezier(0.32, 0.72, 0, 1);
    --dur: 700ms;

    --wrap: 1120px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --section-y: clamp(6rem, 11vw, 9.5rem);
    --nav-h: 60px;

    --font-display: "Cabinet Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@font-face {
    /* Cabinet Grotesk, Indian Type Foundry - ITF Free Font License */
    font-family: "Cabinet Grotesk";
    src: url("fonts/cabinet-grotesk-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--nav-h) + 3rem);
}

body {
    background: var(--bg);
    color: var(--body);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

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

ul,
ol {
    list-style: none;
}

:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    border-radius: 4px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 50%;
    z-index: 300;
    transform: translate(-50%, -160%);
    padding: 0.7rem 1.25rem;
    border-radius: 999px;
    background: #fff;
    color: #050505;
    font-size: 0.85rem;
    font-weight: 500;
    transition: transform var(--dur) var(--ease);
}

.skip-link:focus-visible {
    transform: translate(-50%, 0);
}

/* ---------- Atmosphere: fixed rose / green mesh glows ---------- */
/* Fixed + pointer-events:none so scrolling never repaints them. */
.atmosphere {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(58vw 46vw at 8% -6%, rgba(244, 63, 94, 0.14), transparent 62%),
        radial-gradient(62vw 52vw at 104% 88%, rgba(34, 197, 94, 0.11), transparent 62%),
        radial-gradient(80vw 60vw at 50% 32%, rgba(255, 255, 255, 0.022), transparent 70%);
}

/* ---------- Layout primitives ---------- */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

main,
footer {
    position: relative;
    z-index: 1;
}

.section {
    padding-block: var(--section-y);
}

/* ---------- Typography ---------- */
.display {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--heading);
    letter-spacing: -0.032em;
    text-wrap: balance;
}

h1.display {
    font-size: clamp(2.65rem, 1.5rem + 4.6vw, 4.15rem);
    line-height: 1.03;
    letter-spacing: -0.04em;
}

h2.display {
    font-size: clamp(1.95rem, 1.2rem + 2.9vw, 2.85rem);
    line-height: 1.08;
}

.lede {
    color: var(--body);
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.2rem);
    line-height: 1.6;
    max-width: 34ch;
}

.body-copy {
    color: var(--body);
    max-width: 46ch;
}

.muted {
    color: var(--muted);
}

.tint-apple {
    color: var(--rose);
}

.tint-spotify {
    color: var(--green);
}

/* The one eyebrow on the page (hero). Mirrors the app's own art direction. */
.eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.eyebrow .swap {
    color: var(--muted);
    font-size: 0.95em;
}

/* Signature rose -> green hairline. Also the connective thread in #how. */
.rule {
    width: 88px;
    height: 2px;
    border-radius: 2px;
    background: var(--link-gradient);
}

/* ---------- Double-Bezel shell ---------- */
.shell {
    padding: var(--bezel);
    border-radius: var(--radius-shell);
    background: var(--glass);
    border: 1px solid var(--hairline);
    box-shadow: var(--lift);
}

.shell > .core {
    border-radius: var(--radius-core);
    background: rgba(255, 255, 255, 0.025);
    box-shadow: var(--inner-top);
    overflow: hidden;
}

/* ---------- Nav: floating glass pill ---------- */
.nav {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    z-index: 200;
    transform: translateX(-50%);
    width: min(calc(100% - 2 * var(--gutter)), calc(var(--wrap) - 2rem));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: var(--nav-h);
    padding: 0 0.75rem 0 1rem;
    border-radius: 999px;
    border: 1px solid var(--hairline);
    background: rgba(10, 10, 12, 0.55);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    box-shadow: var(--inner-top), 0 16px 40px -20px rgba(0, 0, 0, 0.9);
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--heading);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.98rem;
    letter-spacing: -0.015em;
}

.nav-brand img {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid var(--hairline);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
}

.nav-links a {
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    color: var(--body);
    white-space: nowrap;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.nav-links a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
}

/* Hamburger: two lines that morph into an X */
.nav-toggle {
    display: none;
    position: relative;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
}

.nav-toggle span {
    position: absolute;
    left: 50%;
    width: 17px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--heading);
    transition: transform var(--dur) var(--ease), opacity 250ms var(--ease);
}

.nav-toggle span:nth-child(1) {
    transform: translate(-50%, -4px);
}

.nav-toggle span:nth-child(2) {
    transform: translate(-50%, 4px);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translate(-50%, 0) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    transform: translate(-50%, 0) rotate(-45deg);
}

/* Full-screen menu overlay (fixed -> blur is safe here) */
.nav-menu {
    position: fixed;
    inset: 0;
    z-index: 190;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    padding: 0 var(--gutter);
    background: rgba(5, 5, 5, 0.92);
    -webkit-backdrop-filter: blur(32px) saturate(150%);
    backdrop-filter: blur(32px) saturate(150%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 450ms var(--ease), visibility 450ms var(--ease);
}

.nav-menu[data-open="true"] {
    opacity: 1;
    visibility: visible;
}

.nav-menu a {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 9vw, 2.6rem);
    letter-spacing: -0.03em;
    color: var(--heading);
    padding-block: 0.35rem;
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 520ms var(--ease), transform 520ms var(--ease);
    transition-delay: 0ms;
}

.nav-menu[data-open="true"] a {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(90ms + var(--i) * 55ms);
}

.nav-menu .menu-rule {
    margin-top: 2rem;
}

/* ---------- Buttons ---------- */
/* App Store badge. Artwork is Apple's official file, unmodified.
   Source: toolbox.marketingtools.apple.com/api/v2/badges/
           download-on-the-app-store/black/en-us  (fetched 2026-07-25)
   sha256 a26fc5b38380272c92e9019a2eb8b45542a66814b3e2b203772db8904b9fb99f
   Intrinsic 119.66407 x 40, so the ratio is 2.99160175 and not 3:1.

   Apple guideline compliance is enforced here:
     - never rendered below the 40px minimum height
     - at least height/4 clear space on all four sides (see .hero__cta, .band)
     - no filter, opacity, recolour or resize applied to the artwork. The
       hover lift is a rigid translation and the depth cue is a box-shadow
       painted outside the border box, never on the image itself.
   Ref: developer.apple.com/app-store/marketing/guidelines/ */
.badge-link {
    --badge-h: 54px;
    display: inline-flex;                         /* box === artwork, no baseline strut */
    border-radius: calc(var(--badge-h) * 0.2125); /* 8.5/40 of height -> 11.475px */
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.badge-link img {
    display: block;
    height: var(--badge-h);
    width: auto;
    aspect-ratio: auto 119.66407 / 40;            /* exact pre-load box, zero shift */
}

.badge-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.75);
}

.badge-link:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}

/* Secondary pill: nested trailing icon circle (button-in-button) */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.5rem 0.5rem 1.35rem;
    border-radius: 999px;
    border: 1px solid var(--hairline);
    background: var(--glass);
    box-shadow: var(--inner-top);
    color: var(--heading);
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
}

.pill__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.pill__icon svg {
    width: 15px;
    height: 15px;
}

.pill:hover {
    transform: translateY(-2px);
    background: var(--glass-strong);
    border-color: rgba(255, 255, 255, 0.18);
}

.pill:hover .pill__icon {
    transform: translateY(3px) scale(1.05);
    background: rgba(255, 255, 255, 0.14);
}

.pill:active {
    transform: scale(0.98);
}

/* ---------- Hero: editorial split ---------- */
.hero {
    padding-top: clamp(7.5rem, 6rem + 6vw, 10rem);
    padding-bottom: clamp(3.5rem, 6vw, 5rem);
}

.hero__grid {
    display: grid;
    gap: clamp(3rem, 6vw, 4.5rem);
    align-items: center;
}

.hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

.hero__copy .rule {
    margin-block: -0.35rem;
}

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 0.35rem;
}

.hero__media {
    justify-self: center;
}

/* The source video is a full-bleed screen capture; its top 128px carries a
   broken status-bar block, so the frame is clipped there and our shell
   supplies the device edge. 128 / 886 = 14.447% of the element width. */
.screen {
    aspect-ratio: 886 / 1792;
    height: clamp(23rem, 60vh, 38rem);
    background: #eceef2;
}

.screen video,
.screen img {
    width: 100%;
    height: auto;
    margin-top: -14.447%;
}

/* ---------- How it works: vertical sequence, no card boxes ---------- */
.steps {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    max-width: 46rem;
}

.step {
    position: relative;
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    gap: 1.5rem;
    padding-bottom: clamp(2.75rem, 5vw, 3.75rem);
}

.step:last-child {
    padding-bottom: 0;
}

/* the gradient hairline as connective thread */
.step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 2.75rem;
    bottom: 0.5rem;
    left: calc(1.375rem - 1px);
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
}

/* one continuous rose -> green run across the whole sequence */
.step:first-child::before {
    background: linear-gradient(180deg, var(--rose), #b06a4f);
}

.step:nth-child(2)::before {
    background: linear-gradient(180deg, #b06a4f, var(--green));
}

.step__num {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    border: 1px solid var(--hairline);
    background: var(--glass);
    box-shadow: var(--inner-top);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--heading);
}

.step h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--heading);
    margin-bottom: 0.5rem;
    padding-top: 0.3rem;
}

.steps__note {
    margin-top: clamp(2rem, 3.5vw, 2.75rem);
    padding-left: 4.25rem;
    max-width: 58ch;
    color: var(--muted);
    font-size: 0.97rem;
}

/* ---------- Feature narrative ---------- */
.feature {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.feature__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

/* Media panel: device crop inside a tinted Double-Bezel core */
.media-panel .core {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2rem) 0;
    min-height: 0;
}

.media-panel .core.tint-rose {
    background:
        radial-gradient(86% 58% at 50% 2%, rgba(244, 63, 94, 0.26), transparent 72%),
        rgba(255, 255, 255, 0.03);
}

.media-panel .core.tint-green {
    background:
        radial-gradient(86% 58% at 50% 2%, rgba(34, 197, 94, 0.22), transparent 72%),
        rgba(255, 255, 255, 0.03);
}

.media-panel .core.tint-both {
    background:
        radial-gradient(72% 56% at 18% 2%, rgba(244, 63, 94, 0.25), transparent 70%),
        radial-gradient(72% 56% at 84% 6%, rgba(34, 197, 94, 0.22), transparent 70%),
        rgba(255, 255, 255, 0.03);
}

.device {
    width: min(100%, 312px);
    height: auto;
}

/* Third feature breaks the alternation: centred stack */
.feature--centred {
    justify-items: center;
    text-align: center;
}

.feature--centred .feature__copy {
    align-items: center;
    max-width: 34rem;
}

.feature--centred .body-copy {
    max-width: 52ch;
}

.feature--centred .media-panel {
    width: min(100%, 27rem);
}

/* ---------- Bento ---------- */
.bento {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.cell .core {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(1.5rem, 3vw, 2rem);
    transition: background-color var(--dur) var(--ease);
}

.cell {
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}

.cell:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.95), 0 2px 10px -2px rgba(0, 0, 0, 0.6);
}

.cell h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--heading);
}

.cell p {
    color: var(--body);
    font-size: 0.98rem;
}

/* Largest bento cell: the rose/green wash carries the top, copy anchors low. */
.cell--privacy .core {
    background:
        radial-gradient(64% 52% at 8% 4%, rgba(244, 63, 94, 0.3), transparent 70%),
        radial-gradient(66% 54% at 92% 2%, rgba(34, 197, 94, 0.24), transparent 70%),
        rgba(255, 255, 255, 0.03);
    justify-content: flex-end;
    gap: 0.85rem;
    min-height: 15rem;
}

.cell--privacy h3 {
    font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem);
    margin-bottom: 0.15rem;
}

.cell--privacy p {
    max-width: 44ch;
}

.cell--privacy .cell__note {
    color: var(--muted);
    font-size: 0.92rem;
}

.cell--scope .core {
    justify-content: center;
}

.icon-set {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    margin-top: auto;
    padding-top: 0.5rem;
}

.icon-set li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.icon-set img {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    border: 1px solid var(--hairline);
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.9);
    transition: transform var(--dur) var(--ease);
}

.cell:hover .icon-set img {
    transform: translateY(-2px);
}

.icon-set span {
    font-size: 0.76rem;
    color: var(--muted);
}

/* Light / dark cell visual: the two real icon variants on their own halves */
.theme-swatch {
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
    height: 98px;
    border-radius: var(--radius-inline);
    border: 1px solid var(--hairline);
    background: linear-gradient(102deg, #eceef2 0 50%, #141416 50% 100%);
    box-shadow: var(--inner-top);
    overflow: hidden;
}

.theme-swatch img {
    width: 46px;
    height: 46px;
    border-radius: 11px;
    box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.85);
    transition: transform var(--dur) var(--ease);
}

.cell:hover .theme-swatch img {
    transform: translateY(-2px);
}

/* ---------- Download band ---------- */
.band {
    position: relative;
    text-align: center;
    padding-block: clamp(5rem, 10vw, 8rem);
}

.band::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(100% - 2 * var(--gutter), var(--wrap));
    height: 2px;
    border-radius: 2px;
    background: var(--link-gradient);
    opacity: 0.85;
}

.band .display {
    max-width: 18ch;
    margin-inline: auto;
}

.band .statement {
    max-width: 48ch;
    margin: 1.25rem auto 2.25rem;
    color: var(--body);
}

/* ---------- Footer ---------- */
footer {
    border-top: 1px solid var(--hairline-soft);
    padding-block: 2.75rem 3.5rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
}

footer a {
    transition: color var(--dur) var(--ease);
}

footer a:hover {
    color: #fff;
}

.disclaimer {
    margin-top: 2rem;
    max-width: 74ch;
    font-size: 0.8rem;
    line-height: 1.65;
    color: #7f7f85; /* WCAG AA on #050505 */
}

/* ---------- Prose pages: privacy, support ---------- */
.prose {
    padding-top: clamp(7rem, 6rem + 5vw, 9rem);
    padding-bottom: var(--section-y);
    max-width: 46rem;
}

.prose-head {
    margin-bottom: 3rem;
}

.prose-head h1 {
    font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3rem);
    line-height: 1.06;
    letter-spacing: -0.035em;
}

.prose-head .rule {
    margin-top: 1.25rem;
}

.prose .meta {
    color: var(--muted);
    font-size: 0.92rem;
    margin-top: 0.75rem;
}

.prose h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--heading);
    margin: 2.75rem 0 0.9rem;
}

.prose p,
.prose li {
    margin-bottom: 0.9rem;
}

.prose ul,
.prose ol {
    padding-left: 1.35rem;
    margin-bottom: 0.9rem;
    list-style: disc;
}

.prose ul li::marker {
    color: #4a4a4f;
}

.prose strong {
    color: var(--heading);
    font-weight: 600;
}

.prose a:not(.pill) {
    color: var(--heading);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    transition: border-color var(--dur) var(--ease);
}

.prose a:not(.pill):hover {
    border-color: #fff;
}

code {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 1px 6px;
    font-size: 0.88em;
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }

    /* Scoped to .js so the page is never blank if the script fails to run. */
    .js [data-reveal] {
        opacity: 0;
        transform: translateY(3rem);
        filter: blur(6px);
        will-change: transform, opacity;
    }

    .js [data-reveal].is-in {
        opacity: 1;
        transform: none;
        filter: blur(0);
        will-change: auto;
        transition: opacity 800ms var(--ease), transform 800ms var(--ease), filter 800ms var(--ease);
        transition-delay: calc(var(--i, 0) * 90ms);
    }

    /* Apple: "Don't modify, angle, or animate the App Store badge."
       Containers holding a badge still fade and rise with the page, but the
       badge is never blurred. A section-level fade+rise that carries all
       content uniformly is page choreography; a per-pixel blur rendered onto
       the artwork is a modification. */
    .js [data-reveal].reveal--sharp,
    .js [data-reveal].reveal--sharp.is-in {
        filter: none;
    }

    .js [data-reveal].reveal--sharp.is-in {
        transition: opacity 800ms var(--ease), transform 800ms var(--ease);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
    }

    /* The hero video is frozen on its first frame by site.js rather than
       hidden, so the split hero keeps both halves. */
}

/* ---------- Responsive ---------- */
@media (min-width: 900px) {
    :root {
        --nav-h: 64px;
    }

    .hero__grid {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    }

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

    /* zigzag 1: copy left, media right */
    .feature--a .feature__copy {
        grid-column: 1;
        grid-row: 1;
    }

    .feature--a .media-panel {
        grid-column: 2;
        grid-row: 1;
    }

    /* zigzag 2: media left, copy right */
    .feature--b .media-panel {
        grid-column: 1;
        grid-row: 1;
    }

    .feature--b .feature__copy {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    /* keep the panel hugging the device rather than filling the column */
    .feature--a .media-panel,
    .feature--b .media-panel {
        width: min(100%, 26rem);
        justify-self: center;
    }

    .feature--centred {
        grid-template-columns: minmax(0, 1fr);
    }

    .bento {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 1.125rem;
    }

    .cell--privacy {
        grid-column: 1 / 5;
        grid-row: 1 / 3;
    }

    .cell--icons {
        grid-column: 1 / 5;
        grid-row: 3;
    }

    .cell--theme {
        grid-column: 5 / 7;
        grid-row: 1;
    }

    .cell--instant {
        grid-column: 5 / 7;
        grid-row: 2;
    }

    .cell--scope {
        grid-column: 5 / 7;
        grid-row: 3;
    }
}

@media (max-width: 899px) {
    .nav-links {
        display: none;
    }

    .nav-toggle {
        display: block;
    }

    .hero {
        padding-top: clamp(6.5rem, 5rem + 10vw, 8rem);
    }

    .hero__media {
        width: 100%;
    }

    .screen {
        height: clamp(22rem, 58vh, 33rem);
        margin-inline: auto;
    }

    .feature__copy,
    .media-panel {
        width: 100%;
    }

    .media-panel {
        justify-self: center;
        max-width: 30rem;
        margin-inline: auto;
    }

    .cell,
    .cell--privacy {
        grid-column: 1;
    }

    .band .display {
        max-width: 22ch;
    }
}

@media (max-width: 560px) {
    :root {
        --radius-shell: 1.75rem;
    }

    .step {
        grid-template-columns: 2.25rem 1fr;
        gap: 1.1rem;
    }

    .step:not(:last-child)::before {
        top: 2.25rem;
        left: calc(1.125rem - 1px);
    }

    .step__num {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.9rem;
    }

    .steps__note {
        padding-left: 3.35rem;
    }

    /* one property drives height and corner radius together -> 10.625px */
    .badge-link {
        --badge-h: 50px;
    }

    /* keep all five icons on one row */
    .icon-set {
        gap: 0.6rem;
    }

    .icon-set img {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    .icon-set span {
        font-size: 0.7rem;
    }

    .footer-links {
        gap: 1.25rem;
    }
}