/*
 * Qivo website — design system and pages.
 * Tokens mirror the apps (Qivo/Design/Theme.swift): always dark, accent themes, glass,
 * condensed heavy display type and spring-like motion.
 */

/* ---------- Tokens ---------- */

@property --a1 { syntax: "<color>"; inherits: true; initial-value: #8c61ff; }
@property --a2 { syntax: "<color>"; inherits: true; initial-value: #33d6f5; }
@property --hue { syntax: "<number>"; inherits: true; initial-value: 259.2; }

:root {
    color-scheme: dark;

    --bg: #07070c;
    --surface: rgb(255 255 255 / .06);
    --surface-raised: rgb(255 255 255 / .1);
    --stroke: rgb(255 255 255 / .1);
    --stroke-strong: rgb(255 255 255 / .22);
    --text: #fff;
    --text-2: rgb(255 255 255 / .7);
    --text-3: rgb(255 255 255 / .5); /* the app's .45, nudged up to pass WCAG AA for small text */
    --live: #ff3b5c;
    --gold: #ffc752;
    --success: #40e08f;
    --warning: #ffa833;

    /* Accent theme: Aurora by default; [data-accent] on <html> switches it. */
    --a1: #8c61ff;
    --a2: #33d6f5;
    --hue: 259.2;
    --accent: linear-gradient(to bottom right, var(--a1), var(--a2));
    --glow: color-mix(in srgb, var(--a1) 70%, transparent);

    --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* The apps' own faces: SF Pro Condensed Heavy on Apple devices, the condensed system face the
       Android app uses (sans-serif-condensed) on Android, Bahnschrift on Windows. */
    --font-display: -apple-system, BlinkMacSystemFont, Bahnschrift, "Roboto Condensed", sans-serif-condensed, "Arial Narrow", system-ui, sans-serif;
    --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

    /* Springs from Theme.swift's Motion, as curves: hero 0.55s/.86, snappy 0.32s/.78, lift 0.28s/.68. */
    --ease-hero: cubic-bezier(.22, 1, .36, 1);
    --ease-snappy: cubic-bezier(.3, 1.2, .5, 1);
    --ease-lift: cubic-bezier(.3, 1.45, .5, 1);
    --dur-hero: .7s;
    --dur-snappy: .38s;
    --dur-lift: .32s;

    --gutter: clamp(1rem, 4.5vw, 5rem);
    --max: 76rem;
    --header-h: 4rem;
    --radius: clamp(22px, 2vw, 30px);
    --radius-lg: clamp(28px, 3vw, 44px);

    transition: --a1 .6s ease, --a2 .6s ease, --hue .6s ease;
}

:root[data-accent="sunset"] { --a1: #ff5c85; --a2: #ffad4d; --hue: 342; }
:root[data-accent="emerald"] { --a1: #29db9e; --a2: #5c9eff; --hue: 162; }
:root[data-accent="ember"] { --a1: #ff8533; --a2: #ff4d66; --hue: 18; }
:root[data-accent="glacier"] { --a1: #4d9eff; --a2: #adf2ff; --hue: 216; }

/*
 * Self-hosted OFL faces for everything that isn't an Apple device (which keeps SF). The layout
 * adds .webfonts to <html> only once both files are in public/assets/fonts, so nothing is
 * requested before then: archivo.woff2 (Archivo, variable wdth 62–125 / wght 100–900) and
 * nunito.woff2 (Nunito, variable wght 200–1000), each with its OFL licence beside it.
 */
@font-face {
    font-family: "Qivo Display";
    src: url("../fonts/archivo.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
}

@font-face {
    font-family: "Qivo Rounded";
    src: url("../fonts/nunito.woff2") format("woff2");
    font-weight: 200 1000;
    font-display: swap;
}

:root.webfonts {
    --font-display: -apple-system, BlinkMacSystemFont, "Qivo Display", sans-serif-condensed, sans-serif;
    --font-rounded: ui-rounded, "SF Pro Rounded", "Qivo Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

@media (min-width: 900px) {
    :root { --header-h: 4.5rem; }
}

@media (min-width: 2400px) {
    :root { --max: 84rem; }
}

/* ---------- Base ---------- */

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

html {
    font-size: clamp(100%, .4vw + .7rem, 137.5%);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 1rem);
    background: var(--bg);
}

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

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; }
[hidden] { display: none !important; }
.no-js .js-only { display: none; }

::selection { background: color-mix(in srgb, var(--a1) 55%, transparent); color: #fff; }

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

main:focus { outline: none; }

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 100;
    padding: .7rem 1.1rem;
    border-radius: 999px;
    background: #fff;
    color: #000;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
}

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.stop-a1 { stop-color: var(--a1); }
.stop-a2 { stop-color: var(--a2); }

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

.icon--accent { stroke: url(#g-accent); }

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

.container--narrow { --max: 50rem; }

/* ---------- Ambient background (AmbientBackground) ---------- */

.ambient {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: var(--bg);
}

.ambient::before {
    content: "";
    position: absolute;
    inset: -15%;
    background:
        radial-gradient(55% 50% at 8% 6%, hsl(var(--hue) 60% 18.75%), transparent),
        radial-gradient(45% 40% at 52% 4%, hsl(calc(var(--hue) + 29) 54% 11.7%), transparent),
        radial-gradient(40% 45% at 4% 52%, hsl(calc(var(--hue) - 22) 43% 8.4%), transparent),
        radial-gradient(45% 45% at 96% 50%, hsl(calc(var(--hue) + 43) 54% 10.4%), transparent),
        radial-gradient(45% 40% at 50% 96%, hsl(calc(var(--hue) + 14) 43% 7%), transparent),
        radial-gradient(50% 50% at 94% 94%, hsl(calc(var(--hue) - 36) 54% 11.7%), transparent);
    opacity: .95;
    animation: ambient-drift 52s ease-in-out infinite alternate;
}

.ambient::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 1400px at 50% 0, transparent 120px, rgb(7 7 12 / .75));
}

@keyframes ambient-drift {
    0% { transform: translate3d(0, 0, 0) rotate(0) scale(1); }
    50% { transform: translate3d(4%, -3%, 0) rotate(4deg) scale(1.06); }
    100% { transform: translate3d(-3%, 4%, 0) rotate(-3deg) scale(1.03); }
}

/* ---------- Poster wall (PosterWall) ---------- */

.poster-wall {
    --pw: clamp(96px, 7.6vw, 260px);
    --ps: calc(var(--pw) * .14);
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: .32;
    contain: strict;
}

.poster-wall__tilt {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--ps);
    transform: rotate(-9deg) scale(1.3);
}

.poster-row {
    display: flex;
    flex: none;
    gap: var(--ps);
    width: max-content;
    padding-right: var(--ps);
    margin-left: calc(var(--pw) * -1.2);
    animation: wall-drift var(--dur, 70s) linear infinite;
    will-change: transform;
}

.poster-row--rev { animation-direction: reverse; }
.poster-wall.is-paused .poster-row { animation-play-state: paused; }

@keyframes wall-drift {
    to { transform: translateX(-50%); }
}

/* Procedural key art (ArtworkView): a hue ramp, mesh-like tones, a glyph and a bloom. */
.poster {
    --night: hsl(calc(var(--h) + 7) 48% 4.7%);
    --deep: hsl(var(--h) 64% 11%);
    --shade: hsl(calc(var(--h) - 25) 54% 22%);
    --base: hsl(var(--h) 72% 32.5%);
    --bright: hsl(calc(var(--h) + 22) 85% 59%);
    --pop: hsl(calc(var(--h) + 162) 38% 48%);
    --bloom: hsl(calc(var(--h) + 14) 100% 65% / .45);
    --bx: 0%;
    position: relative;
    flex: none;
    width: var(--pw);
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: calc(var(--pw) * .1);
    background-color: var(--deep);
}

.poster.o { --bx: 100%; }

.poster.v0 {
    background-image:
        radial-gradient(75% 50% at 100% 0, var(--bright), transparent),
        radial-gradient(60% 40% at 50% 50%, var(--bright), transparent),
        radial-gradient(75% 50% at 0 0, var(--shade), transparent),
        radial-gradient(70% 45% at 100% 55%, var(--base), transparent),
        radial-gradient(75% 50% at 0 100%, var(--night), transparent),
        linear-gradient(var(--base), var(--deep) 60%, var(--shade));
}

.poster.v1 {
    background-image:
        radial-gradient(75% 50% at 0 0, var(--bright), transparent),
        radial-gradient(60% 40% at 50% 50%, var(--pop), transparent),
        radial-gradient(70% 45% at 0 50%, var(--base), transparent),
        radial-gradient(75% 50% at 100% 100%, var(--night), transparent),
        radial-gradient(70% 45% at 50% 100%, var(--shade), transparent),
        linear-gradient(var(--base), var(--shade) 55%, var(--deep));
}

.poster.v2 {
    background-image:
        radial-gradient(60% 40% at 50% 50%, var(--bright), transparent),
        radial-gradient(70% 45% at 100% 50%, var(--pop), transparent),
        radial-gradient(75% 50% at 0 0, var(--deep), transparent),
        radial-gradient(75% 50% at 100% 0, var(--base), transparent),
        radial-gradient(75% 50% at 0 100%, var(--night), transparent),
        linear-gradient(var(--shade), var(--base) 50%, var(--deep));
}

.poster.v3 {
    background-image:
        radial-gradient(60% 40% at 50% 0, var(--bright), transparent),
        radial-gradient(70% 45% at 100% 0, var(--pop), transparent),
        radial-gradient(70% 45% at 100% 50%, var(--bright), transparent),
        radial-gradient(75% 50% at 0 100%, var(--night), transparent),
        radial-gradient(70% 45% at 100% 100%, var(--shade), transparent),
        linear-gradient(var(--base), var(--shade) 55%, var(--deep));
}

.poster::before {
    content: "";
    position: absolute;
    inset: -17.5%;
    background: linear-gradient(rgb(255 255 255 / .34), rgb(255 255 255 / .02));
    -webkit-mask: var(--glyph) center / contain no-repeat;
    mask: var(--glyph) center / contain no-repeat;
    transform: translate(14%, -9%) rotate(var(--rot, 0deg));
}

.poster::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom right, rgb(255 255 255 / .1), transparent 50%, rgb(0 0 0 / .35)),
        radial-gradient(circle at var(--bx) 0, var(--bloom), transparent 80%);
}

.poster.r0 { --rot: -10deg; }
.poster.r2 { --rot: 10deg; }

.poster.g0 { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M7 3v18M3 7.5h4M3 12h18M3 16.5h4M17 3v18M17 7.5h4M17 16.5h4'/%3E%3C/svg%3E"); }
.poster.g1 { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='15' rx='2'/%3E%3Cpath d='m17 2-5 5-5-5M12 11.5l.9 1.8 2 .3-1.45 1.4.35 2-1.8-.95-1.8.95.35-2-1.45-1.4 2-.3z'/%3E%3C/svg%3E"); }
.poster.g2 { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01'/%3E%3C/svg%3E"); }
.poster.g3 { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9z'/%3E%3C/svg%3E"); }
.poster.g4 { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8zM17 3l.5 1.5L19 5l-1.5.5L17 7l-.5-1.5L15 5l1.5-.5z'/%3E%3C/svg%3E"); }
.poster.g5 { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); }
.poster.g6 { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E"); }
.poster.g7 { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2v20M5 5c3 3 3 11 0 14M19 5c-3 3-3 11 0 14'/%3E%3C/svg%3E"); }
.poster.g8 { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4' transform='rotate(60 12 12)'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4' transform='rotate(120 12 12)'/%3E%3C/svg%3E"); }
.poster.g9 { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.7 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.7 7.8L12 21.2l8.8-8.8a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E"); }
.poster.g10 { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2.5 3.1 6.3 6.9 1-5 4.9 1.2 6.8-6.2-3.2-6.2 3.2L7 14.7l-5-4.9 6.9-1z'/%3E%3C/svg%3E"); }
.poster.g11 { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 2 7l10 5 10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E"); }

/* ---------- Type ---------- */

.display {
    margin: .15em 0 .3em;
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 1.1rem + 5.4vw, 5.5rem);
    font-weight: 800;
    font-stretch: 62.5%;
    line-height: .95;
    letter-spacing: -.005em;
    color: transparent;
    background: linear-gradient(#fff, rgb(255 255 255 / .72));
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 10px 24px rgb(0 0 0 / .5));
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: .55em;
    margin: 0;
    font-family: var(--font-rounded);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .19em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--a1);
}

.eyebrow--gold { color: var(--gold); }
.eyebrow .icon { width: 1.35em; height: 1.35em; }

.lead {
    max-width: 36em;
    font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
    line-height: 1.55;
    color: var(--text-2);
}

.fine {
    font-size: .875rem;
    line-height: 1.55;
    color: var(--text-3);
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 3rem;
    padding: 0 1.4rem;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font: 600 1rem/1.1 var(--font-body);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--dur-lift) var(--ease-lift), box-shadow var(--dur-lift) var(--ease-lift), background-color .2s;
}

.btn--primary {
    background: var(--accent);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25), 0 6px 28px -6px color-mix(in srgb, var(--a1) 55%, transparent);
}

.btn--glass,
.btn-icon {
    background: rgb(255 255 255 / .08);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), inset 0 1px 0 rgb(255 255 255 / .1), 0 6px 24px -8px rgb(0 0 0 / .4);
}

.btn--sm {
    min-height: 2.5rem;
    padding: 0 1.05rem;
    font-size: .9375rem;
}

.btn .icon { width: 1.15em; height: 1.15em; }

.btn-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: transform var(--dur-lift) var(--ease-lift), background-color .2s;
}

@media (hover: hover) {
    .btn:hover { transform: scale(1.04); }
    .btn--primary:hover { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25), 0 12px 44px -6px color-mix(in srgb, var(--a1) 75%, transparent); }
    .btn--glass:hover, .btn-icon:hover { background-color: rgb(255 255 255 / .14); }
    .btn-icon:hover { transform: scale(1.06); }
}

.btn:active, .btn-icon:active { transform: scale(.95); }
.btn:focus-visible, .btn-icon:focus-visible { outline-offset: 4px; border-radius: 999px; }

/* ---------- Store buttons ---------- */

.store-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.store-buttons--center { justify-content: center; }

.store-btn {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    min-height: 3.5rem;
    padding: .5rem 1.5rem .5rem 1.1rem;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    background: var(--accent);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25), 0 6px 28px -6px color-mix(in srgb, var(--a1) 55%, transparent);
    transition: transform var(--dur-lift) var(--ease-lift), box-shadow var(--dur-lift) var(--ease-lift);
}

.store-btn .icon { width: 1.5rem; height: 1.5rem; }

.store-btn__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.store-btn__caption {
    font-size: .72rem;
    font-weight: 500;
    color: rgb(255 255 255 / .85);
}

.store-btn__label {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.store-btn.is-disabled {
    cursor: default;
    background: rgb(255 255 255 / .06);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12);
    color: var(--text-2);
}

.store-btn.is-disabled .store-btn__caption { color: var(--text-2); }

@media (hover: hover) {
    a.store-btn:hover {
        transform: scale(1.04);
        box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25), 0 12px 44px -6px color-mix(in srgb, var(--a1) 75%, transparent);
    }
}

a.store-btn:active { transform: scale(.95); }
a.store-btn:focus-visible { outline-offset: 4px; border-radius: 999px; }

/* ---------- Surfaces & small parts ---------- */

.glass {
    background: var(--surface);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    backdrop-filter: blur(24px) saturate(1.5);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 24px 60px -32px rgb(0 0 0 / .7);
}

.badge-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    color: #fff;
    background: var(--accent);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2), 0 8px 24px -8px var(--glow);
}

.badge-icon .icon { width: 1.3rem; height: 1.3rem; stroke-width: 2.2; }

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 0;
    list-style: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    background: rgb(255 255 255 / .07);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12);
}

.chip .icon { width: 1rem; height: 1rem; }

/* LiveBadge: a red dot with a pulsing ring. */
.live-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem .35rem .6rem;
    border-radius: 999px;
    background: rgb(0 0 0 / .55);
    box-shadow: inset 0 0 0 1px rgb(255 59 92 / .45);
    font: 700 .7rem/1 var(--font-rounded);
    letter-spacing: .1em;
    color: #fff;
}

.live-badge::before,
.live-badge::after {
    content: "";
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
}

.live-badge::before { background: var(--live); }

.live-badge::after {
    position: absolute;
    left: .6rem;
    top: calc(50% - .225rem);
    border: 2px solid var(--live);
    box-sizing: border-box;
    animation: live-pulse 1.5s ease-out infinite;
}

@keyframes live-pulse {
    from { transform: scale(1); opacity: .9; }
    to { transform: scale(2.6); opacity: 0; }
}

/* ---------- Logo ---------- */

.logo {
    display: inline-flex;
    align-items: center;
    gap: .16em;
    font-size: 1.5rem;
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
}

.logo-mark {
    display: block;
    flex: none;
    width: .95em;
    height: .95em;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 .9em color-mix(in srgb, var(--a1) 70%, transparent);
}

.logo-mark svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: #fff;
    stroke: #fff;
    stroke-width: 7;
    stroke-linejoin: round;
}

.logo-word {
    flex: none;
    width: 2.03em;
    height: 1.178em;
    fill: currentColor;
}

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
}

/* The glass sits on a pseudo-element: a backdrop-filter on the header itself would stop the
   menu and accent panels inside it from blurring the page behind them. */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgb(7 7 12 / .62);
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    backdrop-filter: blur(22px) saturate(1.6);
    box-shadow: 0 1px 0 var(--stroke);
    transition: opacity .35s ease;
}

.js .site-header:not(.is-scrolled):not(.is-open)::before { opacity: 0; }

.site-header__bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    min-height: var(--header-h);
}

.site-nav {
    order: 3;
    width: 100%;
    padding-bottom: .6rem;
}

.site-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: 0;
    list-style: none;
}

.site-nav a {
    display: block;
    padding: .5rem .95rem;
    border-radius: 999px;
    color: var(--text-2);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s, background-color .2s;
}

.site-nav a:hover { color: #fff; background: var(--surface); }
.site-nav a[aria-current="page"] { color: #fff; background: var(--surface-raised); }

.site-header__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

.site-header__menu .icon--close,
.site-header__menu[aria-expanded="true"] .icon--open { display: none; }
.site-header__menu[aria-expanded="true"] .icon--close { display: block; }

/* JavaScript on, narrow: the navigation is a drop-down panel. */
@media (max-width: 859.98px) {
    .js .site-header__bar { flex-wrap: nowrap; }

    .js .site-nav {
        position: absolute;
        top: calc(100% + .5rem);
        left: var(--gutter);
        right: var(--gutter);
        width: auto;
        padding: .6rem;
        border-radius: var(--radius);
        background: rgb(16 16 24 / .86);
        -webkit-backdrop-filter: blur(28px) saturate(1.6);
        backdrop-filter: blur(28px) saturate(1.6);
        border: 1px solid var(--stroke);
        box-shadow: 0 30px 60px -20px rgb(0 0 0 / .8);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px) scale(.98);
        transform-origin: top center;
        transition: opacity .25s ease, transform var(--dur-snappy) var(--ease-snappy), visibility 0s .25s;
    }

    .js .site-header.is-open .site-nav {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity .25s ease, transform var(--dur-snappy) var(--ease-snappy), visibility 0s;
    }

    .js .site-nav ul { flex-direction: column; }
    .js .site-nav a { padding: .85rem 1rem; font-size: 1.0625rem; color: #fff; }
}

@media (max-width: 399.98px) {
    .site-header .btn--sm { width: 2.5rem; padding: 0; }
    .site-header .btn--sm span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (min-width: 860px) {
    .site-header__bar { flex-wrap: nowrap; }
    .site-nav { order: 0; width: auto; padding: 0; margin-inline: auto; }
    .site-header__actions { margin-left: 0; }
    .site-header__menu { display: none !important; }
}

/* Accent picker: a drop-down under the header on narrow screens, under its button from 860px. */

.accent-picker__dot {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px var(--glow), inset 0 0 0 1px rgb(255 255 255 / .3);
}

.accent-picker__panel {
    position: absolute;
    top: calc(100% + .5rem);
    left: var(--gutter);
    right: var(--gutter);
    z-index: 2;
    padding: 1rem 1rem .85rem;
    background: rgb(16 16 24 / .88);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
    backdrop-filter: blur(28px) saturate(1.6);
    box-shadow: 0 30px 60px -20px rgb(0 0 0 / .8);
    transform-origin: top center;
    animation: pop-in var(--dur-snappy) var(--ease-snappy);
}

@media (max-width: 859.98px) {
    .accent-picker__panel .swatches {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .accent-picker__panel .swatches--labelled .swatch { min-width: 0; }
}

@media (min-width: 860px) {
    .accent-picker { position: relative; }

    .accent-picker__panel {
        top: calc(100% + .6rem);
        left: auto;
        right: 0;
        width: max-content;
        transform-origin: top right;
    }
}

.accent-picker__title {
    margin-bottom: .7rem;
    font: 700 .7rem/1 var(--font-rounded);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-2);
}

@keyframes pop-in {
    from { opacity: 0; transform: translateY(-6px) scale(.96); }
}

.swatches {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.swatch {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    min-width: 2.75rem;
    padding: .3rem;
    border: 0;
    border-radius: 14px;
    background: none;
    color: var(--text-2);
    font: 600 .75rem/1.2 var(--font-body);
    cursor: pointer;
}

.swatch__dot {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(to bottom right, var(--s1), var(--s2));
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25);
    transition: transform var(--dur-lift) var(--ease-lift), box-shadow .2s;
}

.swatches--labelled .swatch { min-width: 3.6rem; }

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

.swatch[aria-pressed="true"] { color: #fff; }

.swatch[aria-pressed="true"] .swatch__dot {
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25), 0 0 0 2px var(--bg), 0 0 0 4px #fff, 0 6px 20px -4px var(--s1);
}

/* ---------- Device frames ---------- */

.device { margin: 0; }

.device__frame {
    position: relative;
    background: #030305;
    box-shadow:
        0 0 0 1.5px #3c3c47,
        0 0 0 3px #101015,
        0 40px 70px -30px rgb(0 0 0 / .9),
        0 30px 120px -40px color-mix(in srgb, var(--a1) 45%, transparent);
}

.device__frame img { width: 100%; background: #0b0b12; }

.device--iphone .device__frame { padding: 3.5%; border-radius: 16.2% / 7.76%; }
.device--iphone img { border-radius: 13.7% / 6.3%; }

.device--ipad .device__frame { padding: 2.6%; border-radius: 4.1% / 5.81%; }
.device--ipad img { border-radius: 1.6% / 2.3%; }

.device--tv .device__frame { padding: .75%; border-radius: .9% / 1.6%; }
.device--tv img { border-radius: .3% / .53%; }

/* A slim stand under the TV. */
.device--tv::after {
    content: "";
    display: block;
    width: 30%;
    aspect-ratio: 30 / 3.2;
    margin: 0 auto;
    background:
        linear-gradient(#24242c, #121217) center top / 16% 72% no-repeat,
        linear-gradient(#34343e, #15151b) center bottom / 100% 28% no-repeat;
    border-radius: 0 0 12px 12px / 0 0 4px 4px;
}

/* ---------- Header for simple pages ---------- */

.page-header {
    position: relative;
    overflow: clip;
    margin-top: calc(-1 * var(--header-h));
    padding: calc(var(--header-h) + clamp(3rem, 9vw, 7rem)) 0 clamp(2.5rem, 6vw, 4.5rem);
}

.page-header .poster-wall { opacity: .18; }

.page-header::before,
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(rgb(7 7 12 / .35), rgb(7 7 12 / .8) 72%, var(--bg));
}

.page-header__content { position: relative; z-index: 2; }
.page-header__title { font-size: clamp(2.75rem, 1.4rem + 5vw, 5.5rem); }

.no-js .page-header,
.no-js .hero { margin-top: 0; }

/* ---------- Sections ---------- */

.section {
    position: relative;
    padding-block: clamp(4.5rem, 9vw, 9rem);
}

.page-header + .section { padding-top: clamp(1rem, 3vw, 2.5rem); }

.section-head {
    max-width: 48rem;
    margin-bottom: clamp(2.25rem, 5vw, 4rem);
}

.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lead { margin-inline: auto; }

.card {
    position: relative;
    padding: clamp(1.4rem, 2.4vw, 2rem);
}

.card h3 {
    margin: 1.1rem 0 .4rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.card p { color: var(--text-2); }
.card .card__fine { margin-top: .75rem; font-size: .875rem; color: var(--text-3); }

.cards {
    display: grid;
    gap: clamp(.9rem, 1.6vw, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

/* Setup steps */
.steps {
    display: grid;
    gap: .75rem;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    padding: 0;
    list-style: none;
}

.steps li {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem 1.25rem .9rem .9rem;
    border-radius: 999px;
    background: rgb(255 255 255 / .04);
    border: 1px solid var(--stroke);
    color: var(--text-2);
    font-size: .9375rem;
    line-height: 1.35;
}

.steps strong {
    display: block;
    color: #fff;
    font-weight: 650;
}

.steps__n {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    font-family: var(--font-display);
    font-stretch: 62.5%;
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    background: var(--surface-raised);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--a1) 70%, transparent), 0 0 18px -4px var(--glow);
}

@media (min-width: 760px) {
    .steps { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: clip;
    min-height: min(100svh, 75rem);
    margin-top: calc(-1 * var(--header-h));
    padding: calc(var(--header-h) + clamp(2rem, 6vw, 4.5rem)) 0 clamp(3rem, 7vw, 6rem);
}

.hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    gap: clamp(2.5rem, 6vw, 4.5rem);
    align-items: center;
}

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

.hero__title {
    margin: 0;
    font-size: clamp(3rem, .6rem + 11vw, 6.5rem);
}

.hero__copy .lead { max-width: 32em; }
.hero__copy .chips { justify-content: center; }
.hero__copy .store-buttons { justify-content: center; }

.hero__note {
    font-size: .875rem;
    color: var(--text-3);
}

.hero__devices {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
    aspect-ratio: 1.3;
}

.hero__devices::before {
    content: "";
    position: absolute;
    inset: 8% 4% 0;
    z-index: -1;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--a1) 38%, transparent), color-mix(in srgb, var(--a2) 12%, transparent) 60%, transparent);
    filter: blur(24px);
}

.hero__devices .device { position: absolute; }
.hero__tv { top: 0; right: 0; width: 86%; animation: float 9s ease-in-out infinite; }
.hero__ipad { left: 0; bottom: 4%; width: 52%; animation: float 7s ease-in-out -2.5s infinite; }
.hero__iphone { right: 3%; bottom: 0; width: 20%; animation: float 8s ease-in-out -5s infinite; }
.hero__live { position: absolute; z-index: 3; left: 40%; top: 46%; }

@keyframes float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}

@media (min-width: 1080px) {
    .hero__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .hero__copy { align-items: flex-start; text-align: left; }
    .hero__copy .chips, .hero__copy .store-buttons { justify-content: flex-start; }
    .hero__title { font-size: clamp(4rem, 6.2vw, 6.5rem); }
    .hero__devices { max-width: none; }
}

/* Sized to its column so "Every channel." always stays on one line. */
@supports (font-size: 1cqi) {
    .hero__copy { container-type: inline-size; }
    .hero__title { font-size: clamp(2.6rem, 16.5cqi, 6.5rem); }
}

/* ---------- Feature sections ---------- */

.feature__grid {
    display: grid;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
}

.feature-list {
    display: grid;
    gap: 1.25rem;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    padding: 0;
    list-style: none;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.feature-list h3 {
    margin: .15rem 0 .2rem;
    font-size: 1.0625rem;
    font-weight: 650;
}

.feature-list p {
    color: var(--text-2);
    font-size: .9375rem;
}

.feature__visual {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 46rem;
    margin-inline: auto;
}

.feature__visual::before {
    content: "";
    position: absolute;
    inset: 10%;
    z-index: -1;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--a1) 30%, transparent), transparent);
    filter: blur(30px);
}

.feature__visual .device { position: absolute; }

.feature__visual--live { aspect-ratio: 1.25; }
.live__ipad { top: 2%; left: 0; width: 82%; }
.live__iphone { right: 0; bottom: 0; width: 25%; }
.live__badge { position: absolute; z-index: 3; top: 0; left: 6%; }

.feature__visual--vod { aspect-ratio: 1.22; }
.vod__tv { top: 0; right: 0; width: 88%; }
.vod__movie { left: 0; bottom: 0; width: 23%; rotate: -4deg; }
.vod__series { left: 21%; bottom: 3%; width: 23%; rotate: 3deg; }

@media (min-width: 1000px) {
    .feature__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .feature--flip .feature__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .feature--flip .feature__copy { order: 2; }
    .feature__visual { max-width: none; }
}

/* ---------- Bento ---------- */

.bento {
    display: grid;
    gap: clamp(.9rem, 1.6vw, 1.5rem);
}

@media (min-width: 720px) {
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
    .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .bento__search, .bento__categories { grid-column: span 3; }
    .bento__offline, .bento__appearance, .bento__logins { grid-column: span 2; }
    .bento__privacy { grid-column: span 6; }
}

.bento .swatches { margin-top: 1.1rem; }

.mock-search {
    display: grid;
    gap: .8rem;
    margin-top: 1.4rem;
}

.mock-search__field {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1.1rem;
    border-radius: 999px;
    background: rgb(255 255 255 / .08);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12);
    font-size: 1rem;
}

.mock-search__field .icon { color: var(--text-2); }

.mock-search__caret {
    width: 2px;
    height: 1.2em;
    margin-left: -.4rem;
    border-radius: 1px;
    background: var(--a1);
    animation: caret 1.1s steps(1) infinite;
}

@keyframes caret {
    50% { opacity: 0; }
}

.mock-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.mock-chips--stack { margin-top: 1.4rem; }

.mock-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .85rem;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08);
    color: var(--text-2);
    font-size: .8125rem;
    font-weight: 600;
}

.mock-chip .icon { width: .95rem; height: .95rem; color: var(--gold); fill: var(--gold); stroke: var(--gold); }

.mock-chip.is-on {
    color: #fff;
    background: var(--accent);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25), 0 4px 14px -2px color-mix(in srgb, var(--a1) 50%, transparent);
}

.mock-chip.is-on .icon { color: #fff; fill: #fff; stroke: #fff; }

.pills {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.25rem;
    padding: 0;
    list-style: none;
}

.pills li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--stroke);
    font-size: .9375rem;
    font-weight: 600;
}

.pills .icon { color: var(--success); }

@media (min-width: 1100px) {
    .bento__privacy {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: .4rem 1.5rem;
    }

    .bento__privacy h3 { margin: 0; }
    .bento__privacy > .badge-icon { grid-row: span 2; }
    .bento__privacy p { grid-column: 2; }
    .bento__privacy .pills { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
}

/* ---------- Platforms ---------- */

.platforms {
    display: grid;
    gap: clamp(.75rem, 1.4vw, 1.25rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
    padding: 0;
    list-style: none;
}

.platform {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.35rem 1.25rem;
}

.platform .icon {
    width: 2.1rem;
    height: 2.1rem;
    margin-bottom: .6rem;
    stroke-width: 1.6;
}

.platform__name { font-weight: 650; line-height: 1.3; }
.platform__store { font-size: .8125rem; color: var(--text-3); }

/* ---------- Premium ---------- */

.premium {
    position: relative;
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    overflow: hidden;
    padding: clamp(1.6rem, 5vw, 4rem);
    border-radius: var(--radius-lg);
}

.premium::before {
    content: "";
    position: absolute;
    right: -15%;
    bottom: -35%;
    width: 70%;
    aspect-ratio: 1;
    pointer-events: none;
    background: radial-gradient(closest-side, rgb(255 199 82 / .16), transparent);
}

.premium__copy { position: relative; }
.premium__copy .btn { margin-top: 1.5rem; }

.prices {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 1.75rem 0 1rem;
}

.price {
    display: grid;
    flex: 1 1 9rem;
    gap: .2rem;
    padding: 1rem 1.25rem;
    border-radius: 20px;
    background: var(--surface-raised);
    border: 1px solid var(--stroke);
}

.price__period {
    font: 700 .72rem/1.2 var(--font-rounded);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
}

.price__amount {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 800;
    font-stretch: 62.5%;
    line-height: 1.05;
}

.price__amount small {
    font-family: var(--font-body);
    font-size: .875rem;
    font-weight: 600;
    font-stretch: normal;
    color: var(--text-2);
}

.price__per { font-size: .875rem; color: var(--text-2); }

.premium__features {
    position: relative;
    display: grid;
    gap: .9rem;
    padding: 0;
    list-style: none;
}

.premium__features li {
    display: flex;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border-radius: 22px;
    background: var(--surface);
    border: 1px solid var(--stroke);
}

.premium__features h3 { margin: .1rem 0 .2rem; font-size: 1.0625rem; font-weight: 650; }
.premium__features p { color: var(--text-2); font-size: .9375rem; }

@media (min-width: 1000px) {
    .premium { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; }
}

/* ---------- FAQ (details / summary) ---------- */

.faq {
    display: grid;
    gap: .75rem;
}

.faq__item {
    border-radius: 22px;
    background: var(--surface);
    border: 1px solid var(--stroke);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    transition: background-color .25s ease, border-color .25s ease;
}

.faq__item[open] { background: rgb(255 255 255 / .08); border-color: var(--stroke-strong); }

.faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.4rem;
    border-radius: 22px;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    list-style: none;
    cursor: pointer;
}

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

.faq__item summary::after {
    content: "";
    flex: none;
    width: .55rem;
    height: .55rem;
    margin-right: .2rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: .7;
    transform: translateY(-25%) rotate(45deg);
    transition: transform var(--dur-snappy) var(--ease-snappy);
}

.faq__item[open] summary::after { transform: translateY(25%) rotate(-135deg); }

.faq__answer {
    padding: 0 1.4rem 1.25rem;
    color: var(--text-2);
}

.faq__answer > * + * { margin-top: .75em; }
.faq__answer a { color: #fff; text-decoration-color: color-mix(in srgb, var(--a1) 80%, transparent); text-underline-offset: .2em; }

@supports (interpolate-size: allow-keywords) {
    .faq { interpolate-size: allow-keywords; }

    .faq__item::details-content {
        height: 0;
        overflow: clip;
        transition: height var(--dur-hero) var(--ease-hero), content-visibility var(--dur-hero) allow-discrete;
    }

    .faq__item[open]::details-content { height: auto; }
}

.faq__more {
    margin-top: 2rem;
    text-align: center;
}

/* ---------- Long-form text (legal pages) ---------- */

.prose {
    max-width: 46rem;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: rgb(255 255 255 / .78);
}

.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol, .prose table, .prose address { margin: 0 0 1.1em; }
.prose address { font-style: normal; }

.prose h2 {
    margin: 2.4em 0 .6em;
    color: #fff;
    font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem);
    font-weight: 700;
    line-height: 1.25;
}

.prose h3 {
    margin: 1.8em 0 .5em;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 650;
}

.prose h2, .prose h3 { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin: .4em 0; }
.prose li::marker { color: var(--a1); }
.prose strong { color: #fff; font-weight: 650; }

.prose a {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--a1) 80%, transparent);
    text-decoration-thickness: .08em;
    text-underline-offset: .2em;
    transition: text-decoration-color .2s;
}

.prose a:hover { text-decoration-color: var(--a2); }

.prose hr {
    height: 1px;
    margin: 2.5em 0;
    border: 0;
    background: var(--stroke);
}

.prose table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: .9375rem;
}

.prose th, .prose td {
    padding: .7em .9em;
    border-bottom: 1px solid var(--stroke);
    text-align: left;
    vertical-align: top;
}

.prose th { color: #fff; font-weight: 600; background: var(--surface); }

.prose code {
    padding: .1em .35em;
    border-radius: 6px;
    background: var(--surface-raised);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9em;
}

.prose .callout {
    margin: 1.5em 0;
    padding: 1.1rem 1.3rem;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--stroke);
    color: var(--text-2);
}

.prose .callout > :last-child { margin-bottom: 0; }

/* ---------- Legal pages: numbered contents beside the text ---------- */

.legal {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

.legal__updated {
    font-size: .9375rem;
    color: var(--text-3);
}

.legal__text { counter-reset: legal; overflow-wrap: break-word; }

.legal__text h2::before {
    counter-increment: legal;
    content: counter(legal) ".";
    margin-right: .45em;
    color: var(--a1);
}

.toc {
    padding: 1.1rem .7rem .8rem;
    border-radius: 22px;
}

.toc__title {
    padding: 0 .65rem .55rem;
    font: 700 .72rem/1.2 var(--font-rounded);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-2);
}

.toc ol {
    display: grid;
    gap: .1rem;
    padding: 0;
    list-style: none;
    counter-reset: toc;
}

.toc a {
    display: flex;
    gap: .55rem;
    padding: .45rem .65rem;
    border-radius: 12px;
    color: var(--text-2);
    font-size: .9375rem;
    line-height: 1.35;
    text-decoration: none;
    transition: color .2s, background-color .2s;
}

.toc a::before {
    counter-increment: toc;
    content: counter(toc);
    flex: none;
    min-width: 1.35em;
    color: var(--a1);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.toc a:hover { color: #fff; background: var(--surface); }

@media (max-width: 999.98px) {
    .toc ol { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
}

@media (min-width: 1000px) {
    .legal { grid-template-columns: 16rem minmax(0, 46rem); }

    .toc {
        position: sticky;
        top: calc(var(--header-h) + 1.5rem);
        max-height: calc(100svh - var(--header-h) - 3rem);
        overflow-y: auto;
    }
}

/* ---------- Acknowledgements: component tables and licence texts ---------- */

.license-table__note {
    display: block;
    margin-top: .3em;
    color: var(--text-3);
    font-size: .875rem;
    line-height: 1.45;
}

/* Licence identifiers (LGPL-2.1-or-later) don't break at their hyphens; copyright gets room. */
.license-table td:nth-child(3) a { white-space: nowrap; }
.license-table td:nth-child(4) { min-width: 12rem; }

.prose .faq { margin: 0 0 1.1em; }
.prose .faq__item summary { font-size: 1rem; }
.prose .faq__item:target { border-color: var(--stroke-strong); }
.prose .faq__answer p { margin: 0; }

.license-text {
    margin: 0;
    color: var(--text-2);
    font: .8125rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ---------- Deep-link pages ---------- */

.link-hero { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.link-hero .eyebrow .live-badge { margin-left: .3rem; }
.link-hero .chips { margin-top: 1.25rem; }

.link-hero__query {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: fit-content;
    max-width: 100%;
    margin-top: 1.25rem;
    padding: .85rem 1.35rem;
    border-radius: 22px;
    background: rgb(255 255 255 / .08);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
}

.link-hero__query .icon { color: var(--a1); }
.link-hero__query span { min-width: 0; overflow-wrap: anywhere; }

.link-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem;
}

.link-hero__actions .btn {
    min-height: 3.5rem;
    padding-inline: 1.7rem;
    font-size: 1.0625rem;
}

.link-hero__hint {
    margin-top: 1rem;
    font-size: .875rem;
    color: var(--text-3);
}

.link-get {
    display: grid;
    gap: 1.5rem;
    align-items: center;
    padding: clamp(1.4rem, 3.5vw, 2.5rem);
    border-radius: var(--radius-lg);
}

.link-get h2 {
    margin: .5rem 0 .35rem;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
    font-weight: 700;
}

.link-get__copy > p:last-child { color: var(--text-2); }

@media (min-width: 900px) {
    .link-get { grid-template-columns: minmax(0, 1fr) auto; }
}

.link-cards { margin-top: clamp(.9rem, 1.6vw, 1.5rem); }

/* The visitor's own store stays bright; site.js turns the other one to glass. */
.store-btn.is-other:not(.is-disabled) {
    background: rgb(255 255 255 / .08);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), 0 6px 24px -8px rgb(0 0 0 / .4);
}

@media (hover: hover) {
    a.store-btn.is-other:hover {
        background-color: rgb(255 255 255 / .14);
        box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), 0 6px 24px -8px rgb(0 0 0 / .4);
    }
}

/* ---------- Support ---------- */

.help-cards {
    padding: 0;
    list-style: none;
}

.help-cards li { display: flex; }

.help-card {
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none;
    transition: transform var(--dur-lift) var(--ease-lift), background-color .2s, border-color .2s;
}

@media (hover: hover) {
    .help-card:hover {
        transform: scale(1.03);
        background-color: rgb(255 255 255 / .09);
        border-color: var(--stroke-strong);
    }
}

.help-card:active { transform: scale(.97); }
.help-card:focus-visible { border-radius: var(--radius); }

.faq-groups { padding-top: 0; }

.faq-group__title {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: clamp(2.75rem, 6vw, 4rem) 0 1.25rem;
    font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem);
    font-weight: 700;
    scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.faq-group__title:first-child { margin-top: 0; }

.faq__answer ol,
.faq__answer ul { padding-left: 1.3em; }
.faq__answer li + li { margin-top: .4em; }
.faq__answer li::marker { color: var(--a1); }
.faq__answer strong { color: #fff; font-weight: 650; }
.faq__answer a { overflow-wrap: anywhere; }

.faq__answer code {
    padding: .1em .35em;
    border-radius: 6px;
    background: var(--surface-raised);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .875em;
    overflow-wrap: anywhere;
}

/* ---------- Not found (errors/html/error_404.php) ---------- */

.page-header.not-found {
    display: flex;
    align-items: center;
    min-height: calc(100svh - var(--header-h));
    margin-top: 0;
    padding: clamp(3rem, 8vw, 6rem) 0;
}

/* ---------- Final call to action ---------- */

.cta__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    overflow: hidden;
    padding: clamp(2.5rem, 7vw, 5.5rem) clamp(1.25rem, 5vw, 4rem);
    border-radius: var(--radius-lg);
    text-align: center;
}

.cta__panel::before {
    content: "";
    position: absolute;
    inset: -40% 10% auto;
    height: 80%;
    z-index: -1;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--a1) 35%, transparent), transparent);
    filter: blur(20px);
}

.cta__panel { isolation: isolate; }
.cta__panel .display { margin: 0; }
.cta__panel .lead { max-width: 30em; }
.cta__logo .logo { font-size: clamp(2.25rem, 2rem + 1vw, 3rem); }
.cta__fine { max-width: 36em; margin-top: .5rem; font-size: .875rem; color: var(--text-3); }

/* ---------- Footer ---------- */

.site-footer {
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 2.5rem;
    border-top: 1px solid var(--stroke);
    background: linear-gradient(rgb(255 255 255 / .025), transparent 70%);
}

.site-footer__top {
    display: grid;
    gap: 2rem;
    align-items: start;
}

.site-footer__brand p {
    max-width: 22rem;
    margin-top: .75rem;
    color: var(--text-2);
    font-size: .9375rem;
}

.site-footer__links ul {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.4rem;
    padding: 0;
    list-style: none;
}

.site-footer__links a {
    color: var(--text-2);
    font-weight: 600;
    font-size: .9375rem;
    text-decoration: none;
    transition: color .2s;
}

.site-footer__links a:hover { color: #fff; }

.site-footer__notice {
    display: flex;
    gap: .8rem;
    margin-top: clamp(2rem, 4vw, 3rem);
    padding: 1rem 1.25rem;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--stroke);
    color: var(--text-2);
    font-size: .875rem;
}

.site-footer__notice .icon { margin-top: .1rem; color: var(--a1); }

.site-footer__copy {
    margin-top: 1.5rem;
    font-size: .8125rem;
    color: var(--text-3);
}

@media (min-width: 900px) {
    /* Brand down the left; the links sit above the store buttons on the right. */
    .site-footer__top { grid-template-columns: minmax(0, 1fr) auto; gap: 1.75rem 3rem; }
    .site-footer__brand { grid-row: span 2; }
    .site-footer__links { padding-top: .35rem; }
}

/* One row only once the links and both store buttons (~54rem with gaps) leave the brand ~16rem. */
@media (min-width: 1240px) {
    .site-footer__top { grid-template-columns: minmax(0, 1.3fr) auto auto; gap: 3rem; }
    .site-footer__brand { grid-row: auto; }
    /* Wraps onto a second row rather than squeezing the brand column. */
    .site-footer__links { max-width: 17rem; }
}

/* ---------- Motion ---------- */

/* Staggered entrance (staggeredAppear): runs on load without JavaScript. */
.appear {
    animation: appear var(--dur-hero) var(--ease-hero) both;
    animation-delay: calc(var(--i, 0) * 80ms + 60ms);
}

@keyframes appear {
    from { opacity: 0; transform: translateY(24px); filter: blur(6px); }
}

/* Scroll reveal: site.js adds .is-visible. If the script never runs, everything shows after 4s. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(6px);
    transition: opacity var(--dur-hero) var(--ease-hero), transform var(--dur-hero) var(--ease-hero), filter var(--dur-hero) var(--ease-hero);
    transition-delay: calc(var(--i, 0) * 80ms);
    animation: reveal-failsafe 1ms 4s forwards;
}

.js.reveal-ready [data-reveal] { animation: none; }

.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

@keyframes reveal-failsafe {
    to { opacity: 1; transform: none; filter: none; }
}

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

    .ambient::before, .poster-row, .device { animation: none !important; }
    .js.reveal-ready [data-reveal] { opacity: 1; transform: none; filter: none; }
}

@media (forced-colors: active) {
    .display { color: CanvasText; background: none; }
}