/* Spoty promo site — tokens derived from the app frontend (_variables.scss),
   warmed with the map's own tile tone. Self-hosted fonts (GDPR). */

@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/source-code-pro-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
}

:root {
    --blitz:      #0084ff;
    --blitz-2:    #3aa0ff;
    --blitz-deep: #0068c9;
    --void:       #020b16;
    --night:      #041322;
    --night-2:    #08203a;
    --night-3:    #0c2b49;
    --sand:       #e7dcc9;   /* map-tile warm tone */
    --sand-ink:   #14212e;
    --paper:      #ffffff;
    --mist:       #dbe6f0;
    --slate:      #8aa0b5;
    --line:       rgba(0, 132, 255, 0.16);
    --line-2:     rgba(138, 160, 181, 0.16);
    --radius:     16px;
    --mono:       'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;
    --display:    'Bricolage Grotesque', 'Source Code Pro', ui-monospace, sans-serif;
    --wrap:       1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--night);
    color: var(--mist);
    font-family: var(--mono);
    font-size: 16.5px;
    line-height: 1.7;
    overflow-x: hidden;             /* overflow backstop */
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--blitz); color: var(--paper); }

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

h1, h2, h3 { color: var(--paper); line-height: 1.08; margin: 0 0 0.5em; }
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.4rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-family: var(--mono); font-size: 1.02rem; font-weight: 600; letter-spacing: -0.005em; }
p  { margin: 0 0 1em; }
a  { color: var(--paper); }
strong { color: var(--paper); font-weight: 600; }

a:focus-visible, .btn:focus-visible, [role="button"]:focus-visible, .deck-back-top:focus-visible {
    outline: 2px solid var(--blitz);
    outline-offset: 3px;
    border-radius: 4px;
}

.eyebrow {
    color: var(--blitz-2);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0 0 1.1em;
}
.eyebrow::before {
    content: '◉ ';
    color: var(--blitz);
    letter-spacing: 0;
}

.lede { color: var(--mist); font-size: clamp(1.02rem, 1.6vw, 1.22rem); max-width: 56ch; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 999px;
    font-family: var(--mono);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
    background: var(--blitz);
    color: var(--paper);
    box-shadow: 0 10px 30px rgba(0, 132, 255, 0.4);
}
.btn--primary:hover { background: var(--blitz-deep); }

.btn--ghost {
    background: rgba(255, 255, 255, 0.06);
    color: var(--paper);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--blitz); background: rgba(0, 132, 255, 0.12); }

.btn--inverse { background: var(--paper); color: var(--blitz); }
.btn--inverse:hover { background: var(--mist); }

/* ── Header ─────────────────────────────────────────────────────────── */

.site-head {
    position: absolute;
    inset: 0 0 auto;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px clamp(20px, 4vw, 48px);
}
.site-head__brand { display: inline-flex; align-items: center; gap: 8px; color: var(--paper); text-decoration: none; }
.site-head__logo { width: 30px; height: 30px; color: var(--blitz); filter: drop-shadow(0 2px 8px rgba(0, 132, 255, 0.5)); }
.site-head__word { font-weight: 700; font-size: 1.15rem; letter-spacing: 0.04em; }
.site-head__nav { display: flex; gap: clamp(16px, 3vw, 32px); }
.site-head__nav a {
    color: var(--mist);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}
.site-head__nav a:hover { color: var(--paper); }

/* ── Hero: full-bleed living map ────────────────────────────────────── */

.hero {
    position: relative;
    min-height: 100dvh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: 120px clamp(20px, 4vw, 48px) clamp(56px, 8vh, 96px);
    isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; background: var(--night); }
.hero__bg video, .hero__bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(2, 11, 22, 0.88) 0%, rgba(2, 11, 22, 0.5) 40%, rgba(2, 11, 22, 0.12) 72%, transparent 100%),
        linear-gradient(180deg, rgba(2, 11, 22, 0.5) 0%, transparent 22%, rgba(2, 11, 22, 0.35) 60%, rgba(2, 11, 22, 0.97) 100%);
}

/* coordinate HUD in the corners — a map interface framing the hero */
.hud {
    position: absolute;
    z-index: 2;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: rgba(219, 230, 240, 0.72);
    text-transform: uppercase;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.hud--tl { top: 96px; left: clamp(20px, 4vw, 48px); }
.hud--tr { top: 96px; right: clamp(20px, 4vw, 48px); }
.hud--tl span { border-right: 2px solid var(--blitz); padding-right: 3px; }

.hero__content { position: relative; max-width: var(--wrap); width: 100%; margin: 0 auto; }
.hero__kicker {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--blitz-2);
    background: rgba(0, 132, 255, 0.12);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 14px;
    margin: 0 0 22px;
}
.hero__title { font-size: clamp(2.6rem, 7vw, 5rem); text-wrap: balance; margin-bottom: 0.3em; }
.hero__sub { max-width: 44ch; color: var(--mist); font-size: clamp(1.02rem, 1.7vw, 1.28rem); margin-bottom: 2em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 2;
    color: var(--slate);
    font-size: 1.1rem;
    text-decoration: none;
    animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }

/* ── Sections ───────────────────────────────────────────────────────── */

.section {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: clamp(72px, 11vw, 132px) clamp(20px, 4vw, 48px);
}
.section__head { max-width: 62ch; margin-bottom: clamp(36px, 5vw, 60px); }

/* scroll reveal — transform-only, crawler-safe */
@supports (animation-timeline: view()) {
    .reveal {
        animation: reveal-up 0.9s ease both;
        animation-timeline: view();
        animation-range: entry 0% entry 42%;
    }
    @keyframes reveal-up { from { transform: translateY(34px); } to { transform: none; } }
}

.intro h2 { max-width: 16ch; }

/* ── Showcase: devices docked over a darkened map ───────────────────── */

.showcase {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(72px, 11vw, 132px) clamp(20px, 4vw, 48px);
}
.showcase__bg { position: absolute; inset: 0; z-index: -2; }
.showcase__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.18; }
.showcase__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--night) 0%, rgba(4, 19, 34, 0.72) 40%, var(--night) 100%);
}
.showcase__intro { max-width: 60ch; margin: 0 auto clamp(44px, 6vw, 72px); text-align: center; }
.showcase__intro .eyebrow::before { content: ''; }
.showcase__intro .lede { margin-inline: auto; }

.dev-cap { margin: 20px auto 0; max-width: 24ch; }
.dev-cap .show__coords { justify-content: center; }
.dev-cap h3 { font-size: 0.95rem; margin: 0 0 0.3em; }
.dev-cap p { color: var(--slate); font-size: 0.88rem; margin: 0; }

.show__coords {
    display: flex;
    align-items: center;
    gap: 0.4em;
    color: var(--slate);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 0.8em;
}
.show__coords::before { content: '◉'; color: var(--blitz); }

/* CSS phone frame */
.phone {
    position: relative;
    max-width: 230px;
    margin: 0 auto;
    padding: 8px;
    border-radius: 32px;
    background: #05101d;
    border: 1px solid rgba(138, 160, 181, 0.3);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.phone::after {
    content: '';
    position: absolute;
    right: -3px; top: 94px;
    width: 3px; height: 46px;
    border-radius: 0 3px 3px 0;
    background: rgba(138, 160, 181, 0.28);
}
.phone__screen {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 25px;
    background: var(--night-2);
}

/* ── Full-bleed density band ────────────────────────────────────────── */

.band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(96px, 16vw, 200px) clamp(20px, 4vw, 48px);
}
.band__bg { position: absolute; inset: 0; z-index: -2; }
.band__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }
.band__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, var(--night) 0%, rgba(4, 19, 34, 0.55) 55%, rgba(4, 19, 34, 0.2) 100%),
        linear-gradient(0deg, var(--night), transparent 40%, transparent 60%, var(--night));
}
.band__content { position: relative; max-width: var(--wrap); margin: 0 auto; }
.band__content h2 { font-size: clamp(2.2rem, 6vw, 4rem); text-wrap: balance; }
.band__content p { max-width: 42ch; color: var(--mist); }
.band__stat {
    font-family: var(--display);
    font-weight: 700;
    color: var(--blitz-2);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    letter-spacing: 0.02em;
    margin-top: 1.4em;
}

/* ── Features: bento grid ───────────────────────────────────────────── */

.tile {
    background: var(--night-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 26px 24px;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.tile:hover { transform: translateY(-4px); border-color: rgba(0, 132, 255, 0.45); background: var(--night-3); }
.tile__coords {
    color: var(--slate);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.2em;
}
.tile__coords::before { content: '◉ '; color: var(--blitz); }
.tile h3 { margin-bottom: 0.5em; }
.tile p { color: var(--slate); font-size: 0.94rem; margin: 0; }
.tile--feature { justify-content: space-between; gap: 20px; background: linear-gradient(150deg, var(--night-3), var(--night-2)); }
.tile--feature h3 { font-size: 1.3rem; font-family: var(--display); letter-spacing: -0.01em; }

/* ── How it works: trail ────────────────────────────────────────────── */

.trail {
    list-style: none;
    margin: clamp(36px, 5vw, 56px) 0 0;
    padding: 0;
    counter-reset: step;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 4vw, 44px);
}
.trail__step { position: relative; counter-increment: step; padding-top: 56px; }
.trail__step::after {
    content: counter(step);
    position: absolute;
    left: 0; top: 0;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    background: var(--night);
    border: 2px solid var(--blitz);
    border-radius: 50%;
    color: var(--paper);
    font-weight: 700;
    box-shadow: 0 0 0 6px rgba(0, 132, 255, 0.08);
}
/* dashed trail connecting the steps */
.trail__step::before {
    content: '';
    position: absolute;
    left: 48px; top: 19px;
    right: -22px;
    border-top: 2px dashed rgba(0, 132, 255, 0.4);
}
.trail__step:last-child::before { content: none; }
.trail__step h3 { font-size: 1.08rem; }
.trail__step p { color: var(--slate); font-size: 0.95rem; margin: 0; }

/* ── Splash CTA ─────────────────────────────────────────────────────── */

.splash-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--blitz);
    text-align: center;
    padding: clamp(84px, 13vw, 156px) 24px;
}
.splash-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        repeating-linear-gradient(0deg,  rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 56px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 56px);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 72%);
}
.splash-cta__logo { width: 84px; height: 84px; margin-bottom: 14px; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.3)); }
.splash-cta h2 { color: var(--paper); font-size: clamp(2rem, 5vw, 3.2rem); }
.splash-cta p { color: rgba(255, 255, 255, 0.9); margin-bottom: 2.2em; }

/* ── Footer ─────────────────────────────────────────────────────────── */

.site-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    align-items: center;
    justify-content: space-between;
    padding: 32px clamp(20px, 4vw, 48px);
    border-top: 1px solid var(--line);
    background: var(--void);
}
.site-foot__legal { margin: 0; color: var(--slate); font-size: 0.85rem; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 24px; }
.site-foot nav a { color: var(--mist); font-size: 0.85rem; text-decoration: none; }
.site-foot nav a:hover { color: var(--paper); text-decoration: underline; }

/* ── Legal document pages ───────────────────────────────────────────── */

.doc { max-width: 72ch; margin: 0 auto; padding: 140px clamp(20px, 4vw, 48px) 96px; }
.doc h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: -0.01em; }
.doc h2 { font-size: 1.4rem; margin-top: 2.2em; }
.doc h3 { font-size: 1.05rem; margin-top: 1.8em; }
.doc p { max-width: none; }
.doc .placeholder { background: rgba(236, 35, 59, 0.15); color: #ff8a97; padding: 0 6px; border-radius: 4px; }

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .trail { grid-template-columns: 1fr; gap: 40px; }
    .trail__step { padding: 0 0 8px 60px; min-height: 40px; }
    .trail__step::before { left: 19px; top: 48px; right: auto; bottom: -34px; border-top: none; border-left: 2px dashed rgba(0, 132, 255, 0.4); }
}

@media (max-width: 680px) {
    .hud { display: none; }
}

/* ── Slide deck ─────────────────────────────────────────────────────────
   One fact per viewport on phones; facts grouped side-by-side ≥900px.
   Scoped to html.deck so the legal pages keep normal scrolling. */

html.deck { scroll-snap-type: y mandatory; }

html.deck main > section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: 100dvh;
}
html.deck main > section:not(.hero):not(.group) {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
html.deck .section { padding-block: 88px; }
html.deck .band { padding-block: 88px; }

/* narrow: a group is a plain container; its facts are the slides */
html.deck .group {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
    min-height: 0;
    display: block;
    position: relative;
    overflow: clip;
    isolation: isolate;
}
html.deck .group > .fact,
html.deck .group > .fact-head {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    margin: 0;
    padding: 88px clamp(20px, 4vw, 48px);
}

/* final slide: CTA content centered, footer pinned to the bottom edge */
html.deck .splash-cta {
    align-items: center;
    padding: 72px 24px 0;
}
html.deck .splash-cta__logo { margin-top: auto; }
html.deck .splash-cta .site-foot {
    margin-top: auto;
    align-self: stretch;
    background: transparent;
    border-top-color: rgba(255, 255, 255, 0.28);
}
html.deck .splash-cta .site-foot__legal { color: rgba(255, 255, 255, 0.85); }
html.deck .splash-cta .site-foot nav a { color: rgba(255, 255, 255, 0.92); }

/* progress dots (JS-generated) */
.deck-dots {
    position: fixed;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.deck-dots a {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(219, 230, 240, 0.35);
    transition: background 0.2s ease, transform 0.2s ease;
}
.deck-dots a:hover { background: rgba(219, 230, 240, 0.7); }
.deck-dots a.is-active { background: var(--blitz); transform: scale(1.3); }

/* back-to-top button (JS-generated, mobile only — desktop has the dots) */
.deck-back-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 30;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(4, 19, 34, 0.72);
    border: 1px solid var(--line-2);
    color: var(--mist);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.deck-back-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }

/* phones-narrow slide tuning */
@media (max-width: 899px) {
    html.deck .fact-head { align-items: center; text-align: center; }
    html.deck .fact-head .lede { margin-inline: auto; }
    html.deck .showcase .fact .phone { max-width: min(240px, 34dvh); }
    html.deck .fact .dev-cap { margin-top: 16px; }
    /* feature facts read as typographic slides, not floating cards */
    html.deck .fact.tile { background: none; border: none; border-radius: 0; align-items: center; text-align: center; }
    html.deck .fact.tile h3 { font-family: var(--display); font-size: 1.5rem; letter-spacing: -0.01em; }
    html.deck .fact.tile p { max-width: 34ch; margin-inline: auto; }
    .deck-dots { display: none; }
}

/* wide: the group becomes the slide; facts sit side by side */
@media (min-width: 900px) {
    /* the base flex rule excludes .group sections via :not(.group), so this
       grid rule is free to apply here without fighting the flex rule for specificity */
    html.deck main > section.group {
        scroll-snap-align: start;
        scroll-snap-stop: always;
        min-height: 100dvh;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-content: center;
        justify-content: center;
        column-gap: clamp(14px, 2.4vw, 30px);
        row-gap: clamp(20px, 3vh, 36px);
        padding: 88px clamp(20px, 4vw, 48px);
    }
    html.deck .group > .fact,
    html.deck .group > .fact-head {
        scroll-snap-align: none;
        scroll-snap-stop: normal;
        min-height: 0;
        display: block;
        padding: 0;
    }
    html.deck .group > .fact-head { grid-column: 1 / -1; justify-self: center; }
    html.deck .fact-head { text-align: center; }
    html.deck .fact-head .lede { margin-inline: auto; }
    /* the 300px column override for the showcase, scoped the same way as .group above */
    html.deck main > section.showcase { grid-template-columns: repeat(3, minmax(0, 300px)); }
    html.deck .showcase .fact { text-align: center; }
    html.deck .showcase .fact.phone--hero { transform: translateY(-16px); }
    html.deck .showcase .fact.show--side { transform: translateY(16px); }
    /* the phones are the content of this slide: slim the vertical chrome
       (padding, header spacing, captions) so the device frames get the height */
    html.deck main > section.showcase { padding-block: 48px; row-gap: 16px; }
    html.deck .showcase > .fact-head { margin: 0; max-width: none; }
    html.deck .showcase .fact-head .eyebrow { margin-bottom: 0.6em; }
    html.deck .showcase .fact-head h2 { margin-bottom: 0.25em; }
    html.deck .showcase .fact-head .lede { font-size: 1.02rem; max-width: 76ch; }
    html.deck .showcase .dev-cap { margin-top: 12px; max-width: none; }
    html.deck .showcase .dev-cap p:not(.show__coords) { font-size: 0.82rem; }
    /* size the phones with the remaining height budget: chrome measured at
       ~355px (2x48 padding + 163px header + 16px row-gap + 102px caption incl.
       margin), plus a few px slack; 0.462 = width/height ratio of the framed
       phone; cap at the hero's previous 264px */
    html.deck .showcase .fact .phone { max-width: min(264px, calc((100dvh - 360px) * 0.462)); }
    html.deck .features { max-width: none; }
    html.deck .features .fact.tile { display: flex; }
    .deck-back-top { display: none; }
}

/* short viewports (phone landscape): snap off, heights released */
@media (max-height: 500px) {
    html.deck { scroll-snap-type: none; }
    html.deck main > section,
    html.deck .group > .fact,
    html.deck .group > .fact-head {
        min-height: 0;
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }
    .deck-dots { display: none; }
    .deck-back-top { display: none; }
    /* the ≥900px clamp starves toward 0 at short landscape heights
       (e.g. ~31px at 926x428); fall back to a normal fixed size */
    html.deck .showcase .fact .phone { max-width: 264px; }
}

/* ── Reduced motion ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero__scroll { animation: none; }
    .hud--tl span { border-right: none; }
    .btn, .tile { transition: none; }
    @supports (animation-timeline: view()) { .reveal { animation: none; } }
}