/*
 * Satobeat marketing site.
 *
 * The design tokens are the web player's (satobeat-web/src/styles/tokens.css, itself the iOS
 * app's): colours, text / surface / border opacities, radii, type scale, motion and the six
 * themes. Rule: a component only uses these variables, no hard-coded colour anywhere else.
 * The page is dark only, like the apps.
 */

/* ── Font ───────────────────────────────────────────────────────────────────────────── */
/* Satoshi (Indian Type Foundry, ITF Free Font License): official Fontshare variable WOFF2,
   self-hosted, one file for weights 300 to 900. No redistribution: this repo stays private. */
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Variable.woff2') format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────────────────────────────── */
/* Registered as colours so a theme change is a fade, not a cut. */
@property --sb-tint {
    syntax: '<color>';
    inherits: true;
    initial-value: #f7931a;
}

@property --sb-card {
    syntax: '<color>';
    inherits: true;
    initial-value: #7d381e;
}

@property --sb-gradient-end {
    syntax: '<color>';
    inherits: true;
    initial-value: #70311a;
}

:root {
    color-scheme: dark;

    /* Base colours */
    --sb-color-bg: #110d0c;
    --sb-color-primary: #3662e3;
    --sb-color-primary-light: #70a2f2;
    --sb-color-primary-extra-light: #9dc4f8;
    --sb-color-text-primary: #ffffff;
    --sb-color-error: #dd524c;
    --sb-color-success: #4dbd33;
    --sb-color-scrim: rgb(17 13 12 / 0.6);
    --sb-color-bitcoin: #f7931a;
    --sb-color-on-bitcoin: #ffffff;

    /* Translucent white text */
    --sb-text-emphasis: rgb(255 255 255 / 0.9);
    --sb-text-body: rgb(255 255 255 / 0.8);
    --sb-text-secondary: rgb(255 255 255 / 0.7);
    --sb-text-tertiary: rgb(255 255 255 / 0.6);
    --sb-text-muted: rgb(255 255 255 / 0.5);

    /* Surfaces and borders */
    --sb-surface-card: rgb(255 255 255 / 0.05);
    --sb-surface-raised: rgb(255 255 255 / 0.1);
    --sb-surface-active: rgb(255 255 255 / 0.15);
    --sb-surface-strong: rgb(255 255 255 / 0.2);
    --sb-border-subtle: rgb(255 255 255 / 0.1);
    --sb-border-standard: rgb(255 255 255 / 0.15);
    --sb-border-strong: rgb(255 255 255 / 0.2);

    /* Radii */
    --sb-radius-chip: 4px;
    --sb-radius-element: 8px;
    --sb-radius-card: 12px;
    --sb-radius-panel: 16px;
    --sb-radius-sheet: 20px;
    --sb-radius-pill: 25px;

    /* Type: only the weights Satoshi ships (no 600) */
    --sb-font-sans:
        'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
    --sb-font-weight-regular: 400;
    --sb-font-weight-medium: 500;
    --sb-font-weight-bold: 700;
    --sb-font-weight-black: 900;
    --sb-line-height-display: 0.95;
    --sb-line-height-heading: 1.2;
    --sb-line-height-snug: 1.3;
    --sb-line-height-body: 1.5;
    --sb-tracking-display: -0.02em;
    --sb-tracking-title: -0.01em;
    --sb-tracking-caps: 0.08em;

    --sb-focus-ring: var(--sb-color-primary-extra-light);

    /* Elevation */
    --sb-shadow-card: 0 10px 20px rgb(0 0 0 / 0.2);
    --sb-shadow-cover: 0 24px 48px rgb(0 0 0 / 0.4);
    --sb-shadow-overlay: 0 24px 64px rgb(0 0 0 / 0.55);

    /* Motion */
    --sb-ease-out: cubic-bezier(0.2, 0, 0, 1);
    --sb-duration-fast: 120ms;
    --sb-duration-base: 200ms;
    --sb-duration-slow: 320ms;
    --sb-duration-ambiance: 600ms;

    /* The six theme tints (also used as accents of the screenshot cards) */
    --sb-theme-orange: #f7931a;
    --sb-theme-blue: #1a93f7;
    --sb-theme-green: #32c864;
    --sb-theme-yellow: #f7c832;
    --sb-theme-teal: #1ac8b4;
    --sb-theme-black: #646464;

    /* Default theme: orange */
    --sb-tint: #f7931a;
    --sb-card: #7d381e;
    --sb-gradient-end: #70311a;

    /* Derived from the tint: recomputed when data-theme changes */
    --sb-on-tint: var(--sb-color-bg);
    --sb-tint-10: color-mix(in srgb, var(--sb-tint) 10%, transparent);
    --sb-tint-12: color-mix(in srgb, var(--sb-tint) 12%, transparent);
    --sb-tint-16: color-mix(in srgb, var(--sb-tint) 16%, transparent);
    --sb-tint-20: color-mix(in srgb, var(--sb-tint) 20%, transparent);
    --sb-tint-35: color-mix(in srgb, var(--sb-tint) 35%, transparent);
    --sb-tint-40: color-mix(in srgb, var(--sb-tint) 40%, transparent);
    --sb-shadow-tint: 0 4px 8px var(--sb-tint-20);

    /* Site only: layout, and the tint as readable text on the dark background */
    --site-max: 80rem;
    --site-gutter: clamp(1rem, 4vw, 2rem);
    --site-section: clamp(4.5rem, 9vw, 7.5rem);
    --site-nav-height: 4.5rem;
    --site-tint-text: color-mix(in srgb, var(--sb-tint) 78%, white);
    --site-accent-from: color-mix(in srgb, var(--sb-tint) 88%, white);
    --site-accent-to: color-mix(in srgb, var(--sb-tint) 64%, var(--sb-card));
    --site-bezel: color-mix(in srgb, var(--sb-color-bg) 86%, white);

    transition:
        --sb-tint var(--sb-duration-ambiance) var(--sb-ease-out),
        --sb-card var(--sb-duration-ambiance) var(--sb-ease-out),
        --sb-gradient-end var(--sb-duration-ambiance) var(--sb-ease-out);
}

/* Six themes, on <html data-theme>. [data-theme-sample]: a sample showing ITS colours. */
:root[data-theme='orange'],
[data-theme-sample='orange'] {
    --sb-tint: #f7931a;
    --sb-card: #7d381e;
    --sb-gradient-end: #70311a;
}

:root[data-theme='blue'],
[data-theme-sample='blue'] {
    --sb-tint: #1a93f7;
    --sb-card: #1e387d;
    --sb-gradient-end: #1a3170;
}

:root[data-theme='green'],
[data-theme-sample='green'] {
    --sb-tint: #32c864;
    --sb-card: #196432;
    --sb-gradient-end: #165a2d;
}

:root[data-theme='yellow'],
[data-theme-sample='yellow'] {
    --sb-tint: #f7c832;
    --sb-card: #7d6419;
    --sb-gradient-end: #705a16;
}

:root[data-theme='teal'],
[data-theme-sample='teal'] {
    --sb-tint: #1ac8b4;
    --sb-card: #0d645a;
    --sb-gradient-end: #0c5a50;
}

:root[data-theme='black'],
[data-theme-sample='black'] {
    --sb-tint: #646464;
    --sb-card: #323232;
    --sb-gradient-end: #2d2d2d;
}

/* On #646464 the background only reaches 3.3:1: white text, and light greys as accents. */
:root[data-theme='black'] {
    --sb-on-tint: var(--sb-color-text-primary);
    --site-tint-text: #c8c8c8;
    --site-accent-from: #f2f2f2;
    --site-accent-to: #8e8e8e;
}

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

html {
    background-color: var(--sb-color-bg);
    scroll-padding-top: calc(var(--site-nav-height) + 1rem);
    scrollbar-gutter: stable;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* The page does not scroll behind the menu or the image viewer */
html:has(dialog[open]) {
    overflow: hidden;
}

body {
    margin: 0;
    min-height: 100svh;
    font-family: var(--sb-font-sans);
    font-size: 1rem;
    font-weight: var(--sb-font-weight-regular);
    line-height: var(--sb-line-height-body);
    color: var(--sb-color-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The player's background: bg at the top left, the theme at the bottom right. A fixed layer
   (not background-attachment: fixed, which repaints on scroll) with two soft halos. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    height: 100lvh;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60rem 38rem at 8% -6%, color-mix(in srgb, var(--sb-color-primary) 11%, transparent), transparent 70%),
        radial-gradient(56rem 44rem at 104% 104%, var(--sb-tint-16), transparent 68%),
        linear-gradient(to bottom right, var(--sb-color-bg) 30%, var(--sb-gradient-end));
}

/* Halos, petals and the screenshot loop reach past the page: cut at its edge. On <main>, not
   <body>, whose overflow goes to the viewport as `hidden`, which phones do not honour. */
main {
    overflow-x: clip;
}

h1,
h2,
h3,
p,
ul,
table {
    margin: 0;
}

ul {
    padding: 0;
    list-style: none;
}

img,
svg {
    display: block;
}

img {
    max-width: 100%;
    height: auto;
}

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

button {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--sb-focus-ring);
    outline-offset: 2px;
}

::selection {
    background: var(--sb-tint-40);
}

/* The translations of a language other than English arrive with lang/<lang>.json. Should the
   script never run, the English text shows after three seconds. */
.i18n-pending [data-i18n] {
    visibility: hidden;
    animation: show-anyway 0s 3s forwards;
}

.container {
    width: min(100% - 2 * var(--site-gutter), var(--site-max));
    margin-inline: auto;
}

.icon {
    flex: none;
    width: 1.25em;
    height: 1.25em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon--bitcoin {
    width: 1.5rem;
    height: 1.5rem;
}

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    border-radius: var(--sb-radius-element);
    background: var(--sb-color-text-primary);
    color: var(--sb-color-bg);
    font-weight: var(--sb-font-weight-bold);
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

/* ── Kit: buttons, chips ────────────────────────────────────────────────────────────── */
.sb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 3rem;
    padding: 0 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--sb-radius-pill);
    font-size: 1rem;
    font-weight: var(--sb-font-weight-medium);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        filter var(--sb-duration-fast) var(--sb-ease-out),
        background-color var(--sb-duration-fast) var(--sb-ease-out),
        border-color var(--sb-duration-fast) var(--sb-ease-out),
        color var(--sb-duration-fast) var(--sb-ease-out),
        transform var(--sb-duration-fast) var(--sb-ease-out);
}

.sb-btn:active {
    transform: scale(0.98);
}

.sb-btn .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.sb-btn--lg {
    height: 3.5rem;
    padding: 0 2rem;
    font-size: 1.0625rem;
}

.sb-btn--sm {
    height: 2.5rem;
    padding: 0 1.125rem;
    font-size: 0.875rem;
}

.sb-btn--filled {
    background: var(--sb-color-primary);
    color: var(--sb-color-text-primary);
}

.sb-btn--secondary {
    border-color: var(--sb-border-strong);
    background: var(--sb-surface-card);
    color: var(--sb-text-emphasis);
}

.sb-btn--light {
    background: var(--sb-color-text-primary);
    color: var(--sb-color-bg);
    font-weight: var(--sb-font-weight-bold);
}

@media (hover: hover) {
    .sb-btn--filled:hover {
        filter: brightness(1.1);
    }

    .sb-btn--secondary:hover {
        background: var(--sb-surface-raised);
        color: var(--sb-color-text-primary);
    }

    .sb-btn--light:hover {
        filter: brightness(0.92);
    }
}

.sb-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--sb-border-standard);
    border-radius: 50%;
    background: var(--sb-color-scrim);
    color: var(--sb-text-emphasis);
    cursor: pointer;
    transition:
        background-color var(--sb-duration-fast) var(--sb-ease-out),
        color var(--sb-duration-fast) var(--sb-ease-out);
}

@media (hover: hover) {
    .sb-icon-btn:hover {
        background: var(--sb-surface-active);
        color: var(--sb-color-text-primary);
    }
}

/* Section label: the player's price chip (tint at 16 %, outline at 40 %) */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 1.75rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--sb-tint-40);
    border-radius: var(--sb-radius-pill);
    background: var(--sb-tint-16);
    color: var(--site-tint-text);
    font-size: 0.75rem;
    font-weight: var(--sb-font-weight-bold);
    line-height: var(--sb-line-height-heading);
    letter-spacing: var(--sb-tracking-caps);
    text-transform: uppercase;
}

.eyebrow .icon {
    width: 0.875rem;
    height: 0.875rem;
}

.lang-toggle {
    height: 2rem;
    padding: 0 0.75rem;
    border: 1px solid var(--sb-border-strong);
    border-radius: var(--sb-radius-pill);
    background: transparent;
    color: var(--sb-text-tertiary);
    font-size: 0.75rem;
    font-weight: var(--sb-font-weight-bold);
    letter-spacing: var(--sb-tracking-caps);
    cursor: pointer;
    transition:
        color var(--sb-duration-fast) var(--sb-ease-out),
        background-color var(--sb-duration-fast) var(--sb-ease-out);
}

@media (hover: hover) {
    .lang-toggle:hover {
        background: var(--sb-surface-card);
        color: var(--sb-color-text-primary);
    }
}

/* ── Titles ─────────────────────────────────────────────────────────────────────────── */
.title {
    font-size: clamp(2.25rem, 1.35rem + 3.8vw, 3.75rem);
    font-weight: var(--sb-font-weight-black);
    line-height: 1;
    letter-spacing: var(--sb-tracking-display);
    text-wrap: balance;
}

.title--sub {
    font-size: clamp(1.875rem, 1.3rem + 2.5vw, 3rem);
}

.accent {
    background: linear-gradient(100deg, var(--site-accent-from), var(--site-accent-to));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.lead {
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    color: var(--sb-text-body);
    text-wrap: pretty;
}

/* French sets a thin space before a question mark */
.qmark:lang(fr)::before {
    content: '\202f';
}

/* ── Navbar ─────────────────────────────────────────────────────────────────────────── */
.nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    height: var(--site-nav-height);
    border-bottom: 1px solid transparent;
    transition:
        background-color var(--sb-duration-slow) var(--sb-ease-out),
        border-color var(--sb-duration-slow) var(--sb-ease-out);
}

.nav.is-scrolled {
    border-bottom-color: var(--sb-border-subtle);
    background: color-mix(in srgb, var(--sb-color-bg) 82%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
}

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: 100%;
}

.nav__logo img {
    width: auto;
    height: 2.25rem;
}

.nav__links {
    display: none;
    align-items: center;
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

.nav__link {
    position: relative;
    padding: 0.5rem 0;
    font-size: 0.8125rem;
    font-weight: var(--sb-font-weight-medium);
    letter-spacing: var(--sb-tracking-caps);
    text-transform: uppercase;
    color: var(--sb-text-body);
    transition: color var(--sb-duration-fast) var(--sb-ease-out);
}

/* The player's active tab: a tint line under the label */
.nav__link::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    border-radius: 1px;
    background: var(--sb-tint);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--sb-duration-base) var(--sb-ease-out);
}

.nav__link[aria-current='true'] {
    color: var(--sb-color-text-primary);
}

.nav__link[aria-current='true']::after {
    transform: scaleX(1);
}

@media (hover: hover) {
    .nav__link:hover {
        color: var(--sb-color-text-primary);
    }

    .nav__link:hover::after {
        transform: scaleX(1);
    }
}

.nav__burger {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -0.625rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.nav__burger .icon {
    width: 1.5rem;
    height: 1.5rem;
}

@media (min-width: 48rem) {
    .nav__links {
        display: flex;
    }

    .nav__burger {
        display: none;
    }
}

/* ── Mobile menu ────────────────────────────────────────────────────────────────────── */
.menu {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0 var(--site-gutter) 2rem;
    border: 0;
    background: linear-gradient(to bottom right, var(--sb-color-bg) 35%, var(--sb-gradient-end));
    color: inherit;
}

.menu[open] {
    display: flex;
    flex-direction: column;
    animation: fade-in var(--sb-duration-slow) var(--sb-ease-out);
}

.menu::backdrop {
    background: var(--sb-color-bg);
}

.menu__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--site-nav-height);
}

.menu__links {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
}

.menu__links a {
    font-size: 2rem;
    font-weight: var(--sb-font-weight-black);
    line-height: 1.1;
    letter-spacing: var(--sb-tracking-display);
    color: var(--sb-text-emphasis);
}

.menu__actions {
    display: grid;
    gap: 0.75rem;
    width: min(100%, 22rem);
    margin-inline: auto;
}

/* ── Hero ───────────────────────────────────────────────────────────────────────────── */
.hero {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100svh;
    padding: calc(var(--site-nav-height) + 2.5rem) var(--site-gutter) 6rem;
    text-align: center;
    isolation: isolate;
}

/* Halo behind the logo, in the theme's colour */
.hero::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 6%;
    left: 50%;
    width: min(64rem, 130vw);
    aspect-ratio: 1.5;
    background: radial-gradient(closest-side, var(--sb-tint-20), transparent);
    transform: translateX(-50%);
    pointer-events: none;
}

/* A width of its own: the two doors sit side by side instead of sizing the column to its text */
.hero__inner {
    width: min(100%, 64rem);
}

.hero__logo {
    width: auto;
    height: clamp(7.5rem, 4rem + 14vw, 14rem);
    margin: 0 auto clamp(2rem, 4vw, 3rem);
}

/* From 320 px up, each half of the title holds on one line, in French too */
.hero__title {
    font-size: clamp(2.25rem, 0.6rem + 9vw, 6rem);
    font-weight: var(--sb-font-weight-black);
    line-height: var(--sb-line-height-display);
    letter-spacing: var(--sb-tracking-display);
    text-wrap: balance;
}

/* A block's gradient stops at its line box: room for the descenders of the second line */
.hero__title span {
    display: block;
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
}

.hero__sub {
    max-width: 40rem;
    margin: clamp(1.5rem, 3vw, 2rem) auto clamp(2rem, 4vw, 3rem);
    font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-text-tertiary);
    text-wrap: balance;
}

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* The two doors of the hero: who you are, what you get, one click away. The listener's is the
   player's « play » (white disc on the primary blue); the artist's wears the theme. */
.door {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    /* One width for both, in either language */
    width: 19.5rem;
    max-width: 100%;
    padding: 0.625rem 1.375rem 0.625rem 0.625rem;
    border-radius: 2.25rem;
    text-align: left;
    transition:
        transform var(--sb-duration-base) var(--sb-ease-out),
        box-shadow var(--sb-duration-base) var(--sb-ease-out),
        filter var(--sb-duration-base) var(--sb-ease-out);
}

.door--listen {
    background: var(--sb-color-primary);
    color: var(--sb-color-text-primary);
    box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--sb-color-primary) 42%, transparent);
}

.door--artist {
    background: var(--sb-tint);
    color: var(--sb-on-tint);
    box-shadow: 0 0.75rem 2rem var(--sb-tint-35);
}

.door__icon {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
}

.door__icon .icon {
    width: 1.375rem;
    height: 1.375rem;
}

.door--listen .door__icon {
    background: var(--sb-color-text-primary);
    color: var(--sb-color-primary);
}

/* The play triangle is a solid shape, nudged to look centred in its disc */
.door--listen .door__icon .icon {
    fill: currentColor;
    translate: 0.0625rem 0;
}

.door--artist .door__icon {
    background: var(--sb-color-bg);
    color: var(--site-tint-text);
}

.door__text {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
}

.door__who {
    font-size: 0.6875rem;
    font-weight: var(--sb-font-weight-bold);
    line-height: var(--sb-line-height-heading);
    letter-spacing: var(--sb-tracking-caps);
    text-transform: uppercase;
    opacity: 0.78;
}

.door__do {
    font-size: 1.1875rem;
    font-weight: var(--sb-font-weight-bold);
    line-height: var(--sb-line-height-heading);
    letter-spacing: var(--sb-tracking-title);
    white-space: nowrap;
}

.door__go {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    transition: translate var(--sb-duration-base) var(--sb-ease-out);
}

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

@media (hover: hover) {
    .door:hover {
        filter: brightness(1.08);
        transform: translateY(-0.1875rem);
    }

    .door--listen:hover {
        box-shadow: 0 1.125rem 2.75rem color-mix(in srgb, var(--sb-color-primary) 58%, transparent);
    }

    .door--artist:hover {
        box-shadow: 0 1.125rem 2.75rem var(--sb-tint-40);
    }

    .door:hover .door__go {
        translate: 0.1875rem -0.1875rem;
    }
}

.hero__more {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-left: -1.375rem;
    border-radius: 50%;
    color: var(--sb-text-muted);
    transition: color var(--sb-duration-fast) var(--sb-ease-out);
}

.hero__more .icon {
    width: 1.5rem;
    height: 1.5rem;
}

@media (hover: hover) {
    .hero__more:hover {
        color: var(--sb-color-text-primary);
    }
}

@media (max-width: 30rem) {
    .hero__cta {
        flex-direction: column;
        width: min(100%, 22rem);
        margin-inline: auto;
    }

    .door {
        width: auto;
    }
}

/* The narrowest phones (320 px): the doors tighten up to stay inside the page */
@media (max-width: 22.5rem) {
    .door {
        gap: 0.625rem;
        padding-right: 1rem;
    }

    .door__icon {
        width: 2.75rem;
        height: 2.75rem;
    }

    .door__do {
        font-size: 1.0625rem;
    }
}

/* ── Sections ───────────────────────────────────────────────────────────────────────── */
.section {
    position: relative;
    padding-block: var(--site-section);
}

/* A darker band, for rhythm on the single page gradient */
.section--band {
    border-block: 1px solid var(--sb-border-subtle);
    background: rgb(0 0 0 / 0.3);
}

.section-head,
.block-head {
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    max-width: 50rem;
    margin: 0 auto clamp(2.5rem, 5vw, 4rem);
    text-align: center;
}

.block-head {
    max-width: 44rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* ── iOS screenshots ────────────────────────────────────────────────────────────────── */
.phones {
    position: relative;
    margin-bottom: var(--site-section);
}

.phones__viewport {
    padding-block: 2.25rem 1rem;
    overflow-x: auto;
}

/* Once the script runs it: a loop moved by transforms, never by scrolling */
.is-loop .phones__viewport {
    overflow: hidden;
    overflow: clip;
    cursor: grab;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.is-loop .phones__viewport.is-dragging {
    cursor: grabbing;
}

.phones__mover {
    width: max-content;
}

.phones__mover,
.phones__track {
    display: flex;
}

.is-loop .phones__mover,
.is-loop .phones__track {
    will-change: transform;
}

.phones__track {
    --phones-gap: clamp(1.25rem, 2.4vw, 2rem);

    align-items: flex-start;
    gap: var(--phones-gap);
    padding-inline: calc(var(--phones-gap) / 2);
}

.phone {
    flex: none;
    width: clamp(10.5rem, 8.5rem + 6vw, 13.5rem);
    margin: 0;
    padding: 0.625rem 0.625rem 0.875rem;
    border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent);
    border-radius: 1.75rem;
    background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 20%, transparent), color-mix(in srgb, var(--tone) 6%, transparent));
    text-align: left;
    cursor: inherit;
    transform: perspective(60rem) rotateY(-12deg) rotateZ(-4deg);
    transition:
        transform 500ms var(--sb-ease-out),
        border-color var(--sb-duration-slow) var(--sb-ease-out),
        box-shadow var(--sb-duration-slow) var(--sb-ease-out);
}

.phone:nth-child(even) {
    transform: perspective(60rem) rotateY(12deg) rotateZ(4deg) translateY(0.75rem);
}

.phone img {
    width: 100%;
    aspect-ratio: 420 / 913;
    border-radius: 1.25rem;
    pointer-events: none;
}

.phone__cap {
    display: block;
    padding: 0.75rem 0.25rem 0;
}

.phone__cap strong {
    display: block;
    font-size: 0.875rem;
    font-weight: var(--sb-font-weight-bold);
    line-height: var(--sb-line-height-snug);
}

.phone__cap span {
    display: block;
    min-height: 2.8em;
    margin-top: 0.125rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--sb-text-secondary);
}

.phone:focus-visible {
    transform: perspective(60rem) translateY(-0.5rem) scale(1.04);
    border-color: color-mix(in srgb, var(--tone) 65%, transparent);
    box-shadow: var(--sb-shadow-cover);
}

@media (hover: hover) {
    .phones__viewport:not(.is-dragging) .phone:hover {
        transform: perspective(60rem) translateY(-0.5rem) scale(1.04);
        border-color: color-mix(in srgb, var(--tone) 65%, transparent);
        box-shadow: var(--sb-shadow-cover);
    }
}

.phones__nav {
    position: absolute;
    top: 50%;
    display: none;
    margin-top: -1.375rem;
}

.phones__nav--prev {
    left: var(--site-gutter);
}

.phones__nav--next {
    right: var(--site-gutter);
}

@media (min-width: 48rem) {
    .is-loop .phones__nav {
        display: inline-grid;
    }
}

/* ── Web player ─────────────────────────────────────────────────────────────────────── */
.web {
    margin-bottom: var(--site-section);
}

.web__stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-right: 7%;
}

.browser {
    border: 1px solid var(--sb-border-standard);
    border-radius: var(--sb-radius-panel);
    overflow: hidden;
    background: var(--sb-color-bg);
    box-shadow: var(--sb-shadow-overlay);
}

.browser__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    height: 2.5rem;
    padding: 0 0.375rem 0 0.875rem;
    border-bottom: 1px solid var(--sb-border-subtle);
    background: var(--sb-surface-card);
}

.browser__dots {
    display: flex;
    gap: 0.375rem;
}

.browser__dots i {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--sb-surface-strong);
}

.browser__url {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 1.5rem;
    padding: 0 0.875rem;
    border-radius: var(--sb-radius-pill);
    background: var(--sb-surface-card);
    font-size: 0.75rem;
    color: var(--sb-text-secondary);
}

.browser__url .icon {
    width: 0.75rem;
    height: 0.75rem;
}

/* Pause / resume: the control of the player's featured « stage » */
.browser__toggle {
    display: inline-grid;
    place-items: center;
    justify-self: end;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--sb-text-secondary);
    cursor: pointer;
    transition:
        background-color var(--sb-duration-fast) var(--sb-ease-out),
        color var(--sb-duration-fast) var(--sb-ease-out);
}

.browser__toggle .icon {
    width: 0.875rem;
    height: 0.875rem;
    fill: currentColor;
}

.browser__toggle .icon--play,
.browser__toggle[aria-pressed='true'] .icon--pause {
    display: none;
}

.browser__toggle[aria-pressed='true'] .icon--play {
    display: block;
}

@media (hover: hover) {
    .browser__toggle:hover {
        background: var(--sb-surface-raised);
        color: var(--sb-color-text-primary);
    }
}

/* Slides share one grid cell and cross-fade */
.browser__screen,
.device {
    display: grid;
}

.browser__screen {
    aspect-ratio: 16 / 10;
    background: var(--sb-color-bg);
}

.browser__screen img,
.device img {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--sb-duration-ambiance) var(--sb-ease-out);
}

.browser__screen img.is-active,
.device img.is-active {
    opacity: 1;
}

/* The same player on a phone, in front of the window */
.device {
    aspect-ratio: 480 / 1039;
    border: 0.3125rem solid var(--site-bezel);
    border-radius: 1.5rem;
    overflow: hidden;
    background: var(--sb-color-bg);
    box-shadow:
        0 0 0 1px var(--sb-border-standard),
        var(--sb-shadow-overlay);
}

.web__phone {
    position: absolute;
    right: 0;
    bottom: -1.25rem;
    width: 24%;
}

.web__rail {
    display: grid;
    grid-auto-columns: minmax(max-content, 1fr);
    grid-auto-flow: column;
    margin-top: 2.75rem;
    border: 1px solid var(--sb-border-subtle);
    border-radius: var(--sb-radius-panel);
    overflow-x: auto;
    background: rgb(0 0 0 / 0.35);
    scrollbar-width: none;
}

.web__rail::-webkit-scrollbar {
    display: none;
}

.web__tab {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.125rem;
    border: 0;
    border-left: 1px solid var(--sb-border-subtle);
    background: transparent;
    color: var(--sb-text-secondary);
    text-align: left;
    cursor: pointer;
    transition:
        background-color var(--sb-duration-base) var(--sb-ease-out),
        color var(--sb-duration-base) var(--sb-ease-out);
}

.web__tab:first-child {
    border-left: 0;
}

.web__tab:focus-visible {
    outline-offset: -2px;
}

.web__tab .icon {
    margin-top: 0.125rem;
}

.web__tab strong {
    display: block;
    white-space: nowrap;
    font-size: 0.9375rem;
    font-weight: var(--sb-font-weight-bold);
    line-height: var(--sb-line-height-snug);
}

.web__tab-text span {
    display: none;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--sb-text-tertiary);
}

.web__tab[aria-selected='true'] {
    background: var(--sb-surface-raised);
    color: var(--sb-color-text-primary);
}

.web__tab[aria-selected='true'] .icon {
    color: var(--site-tint-text);
}

/* Time spent on the current slide: the line of the player's featured rail. The script writes
   its length frame by frame; without it, the selected tab simply shows the full line. */
.web__tab-time {
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: var(--sb-tint);
    transform: scaleX(0);
    transform-origin: left;
    will-change: transform;
}

.web__tab[aria-selected='true'] .web__tab-time {
    transform: scaleX(1);
}

@media (hover: hover) {
    .web__tab:hover {
        color: var(--sb-color-text-primary);
    }
}

/* Under 62rem the rail only names the slides: the sentence of the current one sits below */
.web__caption {
    margin-top: 1rem;
    min-height: 3em;
    text-align: center;
    color: var(--sb-text-secondary);
}

.web__cta {
    display: flex;
    justify-content: center;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 62rem) {
    .web__stage {
        grid-template-columns: minmax(0, 1fr) clamp(11.5rem, 17.5%, 13.5rem);
        align-items: end;
        padding-right: 0;
    }

    .web__phone {
        position: relative;
        right: auto;
        bottom: auto;
        z-index: 1;
        width: auto;
        margin: 0 0 -1.25rem -3rem;
    }

    .web__rail {
        grid-auto-columns: minmax(0, 1fr);
    }

    .web__tab {
        padding: 1.125rem 1.25rem;
    }

    .web__tab-text span {
        display: block;
    }

    .web__caption {
        display: none;
    }
}

/* ── Themes ─────────────────────────────────────────────────────────────────────────── */
.vibe {
    margin-bottom: var(--site-section);
    text-align: center;
}

.flower-wrap {
    --flower-radius: clamp(6rem, 22vw, 10.5rem);
    --petal-size: clamp(5.6rem, 20vw, 9.4rem);

    position: relative;
    width: min(80vw, 26rem);
    aspect-ratio: 1;
    margin: clamp(6.5rem, 16vw, 8.5rem) auto clamp(6rem, 15vw, 8rem);
    cursor: grab;
    /* Vertical swipes still scroll the page; horizontal ones turn the flower */
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.flower-wrap.is-dragging {
    cursor: grabbing;
}

/* The petals reach past the square: so does the area that holds the rotation and takes drags */
.flower-wrap::before {
    content: '';
    position: absolute;
    inset: -30%;
    border-radius: 50%;
}

.flower,
.flower__spin {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    will-change: transform;
}

.flower::before {
    content: '';
    position: absolute;
    inset: 12%;
    border-radius: inherit;
    background: radial-gradient(circle, var(--sb-tint-35), var(--sb-tint-10) 60%, transparent 72%);
    pointer-events: none;
}

.petal {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--petal-size);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--flower-radius)));
    transition:
        transform 450ms var(--sb-ease-out),
        filter var(--sb-duration-slow) var(--sb-ease-out);
}

.petal:focus-visible {
    outline: none;
}

.petal__card {
    display: block;
    padding: 0.5rem;
    border: 1px solid var(--sb-border-subtle);
    border-radius: 1.5rem;
    background: linear-gradient(135deg, var(--sb-surface-active), var(--sb-surface-card));
    box-shadow: var(--sb-shadow-card);
    transition:
        border-color var(--sb-duration-slow) var(--sb-ease-out),
        box-shadow var(--sb-duration-slow) var(--sb-ease-out);
}

.petal img {
    width: 100%;
    border-radius: 1.125rem;
    pointer-events: none;
}

.petal.is-active,
.petal:focus-visible {
    z-index: 2;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--flower-radius))) scale(1.08);
    filter: brightness(1.06);
}

.petal.is-active .petal__card {
    border-color: var(--sb-tint);
    box-shadow: var(--sb-shadow-cover);
}

.petal:focus-visible .petal__card {
    border-color: var(--sb-focus-ring);
    box-shadow:
        0 0 0 2px var(--sb-focus-ring),
        var(--sb-shadow-cover);
}

.vibe__info {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
}

.vibe__hint {
    font-size: 0.75rem;
    font-weight: var(--sb-font-weight-bold);
    letter-spacing: var(--sb-tracking-caps);
    text-transform: uppercase;
    color: var(--sb-text-muted);
}

.vibe__name {
    font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
    font-weight: var(--sb-font-weight-bold);
    line-height: var(--sb-line-height-heading);
    letter-spacing: var(--sb-tracking-title);
}

.swatches {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* A sample of each theme: its own gradient and tint, whatever the current theme */
.swatch {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background:
        linear-gradient(135deg, var(--sb-color-bg) 12%, var(--sb-gradient-end) 50%, var(--sb-tint) 100%) padding-box,
        linear-gradient(var(--sb-border-strong), var(--sb-border-strong)) border-box;
    cursor: pointer;
    transition: transform var(--sb-duration-base) var(--sb-ease-out);
}

.swatch[aria-pressed='true'] {
    background:
        linear-gradient(135deg, var(--sb-color-bg) 12%, var(--sb-gradient-end) 50%, var(--sb-tint) 100%) padding-box,
        linear-gradient(var(--sb-color-text-primary), var(--sb-color-text-primary)) border-box;
    transform: scale(1.12);
}

@media (hover: hover) {
    .swatch:hover {
        transform: scale(1.12);
    }
}

/* ── Feature cards ──────────────────────────────────────────────────────────────────── */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.feature {
    padding: clamp(1.5rem, 3vw, 2rem);
    border: 1px solid var(--sb-border-subtle);
    border-radius: var(--sb-radius-panel);
    background: var(--sb-surface-card);
    transition:
        border-color var(--sb-duration-base) var(--sb-ease-out),
        background-color var(--sb-duration-base) var(--sb-ease-out),
        transform var(--sb-duration-base) var(--sb-ease-out);
}

@media (hover: hover) {
    .feature:hover {
        border-color: color-mix(in srgb, var(--tone) 45%, transparent);
        background: var(--sb-surface-raised);
        transform: translateY(-3px);
    }
}

.feature__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent);
    border-radius: var(--sb-radius-card);
    background: color-mix(in srgb, var(--tone) 14%, transparent);
    color: var(--tone);
}

.feature__icon .icon {
    width: 1.5rem;
    height: 1.5rem;
}

.feature h3 {
    margin-bottom: 0.625rem;
    font-size: 1.375rem;
    font-weight: var(--sb-font-weight-bold);
    line-height: var(--sb-line-height-heading);
    letter-spacing: var(--sb-tracking-title);
}

.feature p {
    color: var(--sb-text-secondary);
    text-wrap: pretty;
}

/* ── Artist portal showcase ─────────────────────────────────────────────────────────── */
.showcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.75rem, 5vw, 4.5rem);
}

.showcase + .showcase {
    margin-top: clamp(4rem, 9vw, 7rem);
}

.showcase__text h3 {
    margin-bottom: 1rem;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    font-weight: var(--sb-font-weight-bold);
    line-height: var(--sb-line-height-heading);
    letter-spacing: var(--sb-tracking-title);
    text-wrap: balance;
}

.showcase__text p {
    font-size: 1.125rem;
    color: var(--sb-text-body);
    text-wrap: pretty;
}

.showcase__media {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--sb-border-standard);
    border-radius: var(--sb-radius-panel);
    overflow: hidden;
    background: var(--sb-color-bg);
    box-shadow: var(--sb-shadow-cover);
    cursor: zoom-in;
    transition:
        transform var(--sb-duration-slow) var(--sb-ease-out),
        border-color var(--sb-duration-slow) var(--sb-ease-out);
}

.showcase__media img {
    width: 100%;
}

.showcase__zoom {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2rem;
    padding: 0 0.75rem;
    border: 1px solid var(--sb-border-standard);
    border-radius: var(--sb-radius-pill);
    background: color-mix(in srgb, var(--sb-color-bg) 85%, transparent);
    font-size: 0.75rem;
    font-weight: var(--sb-font-weight-medium);
    color: var(--sb-text-emphasis);
}

.showcase__zoom .icon {
    width: 0.875rem;
    height: 0.875rem;
}

@media (hover: hover) {
    .showcase__zoom {
        opacity: 0;
        transform: translateY(0.25rem);
        transition:
            opacity var(--sb-duration-base) var(--sb-ease-out),
            transform var(--sb-duration-base) var(--sb-ease-out);
    }

    .showcase__media:hover,
    .showcase__media:focus-visible {
        border-color: var(--sb-border-strong);
        transform: translateY(-4px);
    }

    .showcase__media:hover .showcase__zoom,
    .showcase__media:focus-visible .showcase__zoom {
        opacity: 1;
        transform: none;
    }
}

@media (min-width: 60rem) {
    .showcase {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .showcase--flip {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    .showcase--flip .showcase__text {
        order: 2;
    }
}

.pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 1.125rem;
    border: 1px solid var(--sb-border-subtle);
    border-radius: var(--sb-radius-pill);
    background: var(--sb-surface-raised);
    font-size: 0.9375rem;
    font-weight: var(--sb-font-weight-bold);
    line-height: var(--sb-line-height-heading);
}

.pill > .icon:not(.icon--bitcoin) {
    color: var(--tone);
}

.tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.tiles--center {
    text-align: center;
}

.tile {
    padding: 1rem 1.125rem;
    border: 1px solid color-mix(in srgb, var(--tone) 32%, transparent);
    border-radius: var(--sb-radius-card);
    background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 20%, transparent), color-mix(in srgb, var(--tone) 6%, transparent));
}

.tile strong {
    display: block;
    font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
    font-weight: var(--sb-font-weight-black);
    line-height: 1.15;
    letter-spacing: var(--sb-tracking-title);
    color: color-mix(in srgb, var(--tone) 72%, white);
}

.tile span {
    font-size: 0.875rem;
    color: var(--sb-text-tertiary);
}

.checks {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.checks li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--sb-text-body);
}

.checks .icon {
    width: 1.5rem;
    height: 1.5rem;
    color: color-mix(in srgb, var(--tone) 78%, white);
}

/* ── Why Satobeat ───────────────────────────────────────────────────────────────────── */
.stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
    text-align: center;
}

.stat strong {
    display: grid;
    place-items: center;
    min-height: 1em;
    font-size: clamp(2.5rem, 1.4rem + 4.6vw, 4.5rem);
    font-weight: var(--sb-font-weight-black);
    line-height: 1;
    letter-spacing: var(--sb-tracking-display);
    color: color-mix(in srgb, var(--tone) 88%, white);
}

.stat strong .icon {
    width: 1em;
    height: 1em;
    stroke-width: 1.75;
}

.stat span {
    display: block;
    margin-top: 0.625rem;
    color: var(--sb-text-body);
}

.compare {
    padding: clamp(0.5rem, 2vw, 1.5rem);
    border: 1px solid var(--sb-border-subtle);
    border-radius: var(--sb-radius-sheet);
    background: var(--sb-surface-card);
}

.compare table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.compare th,
.compare td {
    padding: clamp(0.75rem, 1.6vw, 1.125rem) clamp(0.5rem, 1.6vw, 1.25rem);
    font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
    font-weight: var(--sb-font-weight-regular);
    vertical-align: middle;
}

.compare tbody tr {
    border-top: 1px solid var(--sb-border-subtle);
}

.compare tbody th {
    font-weight: var(--sb-font-weight-bold);
}

/* The Satobeat column, lit by the theme */
.compare tr > :nth-child(2) {
    background: var(--sb-tint-10);
    font-weight: var(--sb-font-weight-bold);
    color: var(--sb-color-success);
}

.compare thead th:nth-child(2) {
    border-radius: var(--sb-radius-card) var(--sb-radius-card) 0 0;
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    color: var(--sb-color-text-primary);
}

.compare tbody tr:last-child > :nth-child(2) {
    border-radius: 0 0 var(--sb-radius-card) var(--sb-radius-card);
}

.compare tr > :nth-child(3) {
    color: var(--sb-text-tertiary);
}

.compare thead th:nth-child(3) {
    font-weight: var(--sb-font-weight-bold);
}

/* ── Calls to action, contact ───────────────────────────────────────────────────────── */
.cta__inner {
    display: grid;
    justify-items: center;
    gap: 1.5rem;
    max-width: 46rem;
    text-align: center;
}

.cta .title span {
    display: block;
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
}

.cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.75rem;
}

.contact {
    border-top: 1px solid var(--sb-border-subtle);
    background: linear-gradient(135deg, var(--sb-card), var(--sb-gradient-end));
}

.contact__accent {
    color: var(--sb-text-tertiary);
}

.contact__mail {
    font-size: 0.875rem;
    color: var(--sb-text-secondary);
}

@media (max-width: 30rem) {
    .cta__actions {
        flex-direction: column;
        width: min(100%, 22rem);
    }
}

/* ── Footer ─────────────────────────────────────────────────────────────────────────── */
.footer {
    padding-block: 3.5rem;
    border-top: 1px solid var(--sb-border-subtle);
    background: color-mix(in srgb, var(--sb-color-bg) 88%, black);
    color: var(--sb-text-tertiary);
}

.footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
}

.footer__logo {
    width: auto;
    height: 2rem;
    opacity: 0.85;
}

.footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.5rem;
}

.footer a {
    transition: color var(--sb-duration-fast) var(--sb-ease-out);
}

@media (hover: hover) {
    .footer a:hover {
        color: var(--sb-color-text-primary);
    }
}

.footer__meta {
    display: grid;
    gap: 0.375rem;
    font-size: 0.9375rem;
}

@media (min-width: 60rem) {
    .footer__inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    .footer__meta {
        text-align: right;
    }
}

/* ── Image viewer ───────────────────────────────────────────────────────────────────── */
.lightbox {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
}

.lightbox::backdrop {
    background: rgb(0 0 0 / 0.9);
}

.lightbox[open] {
    animation: fade-in var(--sb-duration-base) var(--sb-ease-out);
}

.lightbox__inner {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 1rem;
    height: 100%;
    padding: clamp(1rem, 3vw, 2rem);
}

.lightbox__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.lightbox__title {
    font-size: 1.25rem;
    font-weight: var(--sb-font-weight-bold);
    line-height: var(--sb-line-height-heading);
}

/* The picture is placed out of flow, centred by its auto margins: its max-width and max-height
   then measure against the area as laid out, in every browser. (As a grid or flex child, Safari
   sizes the row from the picture and a tall screenshot ends up low and cut off.) */
.lightbox__body {
    position: relative;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

.lightbox__img {
    position: absolute;
    inset: 0;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    margin: auto;
    border-radius: var(--sb-radius-panel);
    box-shadow: var(--sb-shadow-overlay);
    cursor: zoom-in;
}

/* Clicked: back in the flow, at the larger width the script gives it, the rest reached by
   scrolling. Auto margins centre it while it is narrower than the screen and give way once it
   is wider. */
.lightbox__img.is-zoomed {
    position: static;
    max-width: none;
    max-height: none;
    margin: 0 auto;
    cursor: zoom-out;
}

/* ── Motion ─────────────────────────────────────────────────────────────────────────── */
@keyframes fade-in {
    from {
        opacity: 0;
    }
}

@keyframes show-anyway {
    to {
        visibility: visible;
    }
}

@keyframes rise {
    from {
        opacity: 0;
        translate: 0 1.5rem;
    }
}

@keyframes nudge {
    50% {
        translate: 0 0.375rem;
    }
}

@keyframes ring {
    0% {
        opacity: 0.55;
        scale: 1;
    }

    60%,
    100% {
        opacity: 0;
        scale: 1.55;
    }
}

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

    /* Entrance of the hero */
    .hero__logo,
    .hero__title,
    .hero__sub,
    .hero__cta {
        animation: rise 900ms var(--sb-ease-out) both;
    }

    .hero__title {
        animation-delay: 90ms;
    }

    .hero__sub {
        animation-delay: 180ms;
    }

    .hero__cta {
        animation-delay: 270ms;
    }

    .hero__more .icon {
        animation: nudge 2.4s ease-in-out infinite;
    }

    /* A ring leaves the play disc now and then: the one gesture the page is asking for */
    .door--listen .door__icon::after {
        content: '';
        position: absolute;
        inset: 0;
        border: 2px solid var(--sb-color-text-primary);
        border-radius: 50%;
        opacity: 0;
        animation: ring 2.8s var(--sb-ease-out) 1.4s infinite;
    }

    /* Revealed on scroll, once the script says so (.reveal-on): without it, everything is
       simply there. `translate`, not `transform`: hover and tilt effects keep theirs. */
    .reveal-on .reveal {
        opacity: 0;
        translate: 0 1.75rem;
        transition:
            opacity 700ms var(--sb-ease-out),
            translate 700ms var(--sb-ease-out);
        transition-delay: calc(var(--i, 0) * 90ms);
    }

    .reveal-on .reveal.is-in {
        opacity: 1;
        translate: none;
    }
}

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