:root {
    color-scheme: dark;

    /* ── Surfaces / fills ─────────────────────────────────────────── */
    --bg-base: #050507;
    --bg-raised: #0b0b10;
    --bg-card: rgba(255, 255, 255, 0.04);
    --bg-card-hover: rgba(255, 255, 255, 0.07);

    /* ── Text ─────────────────────────────────────────────────────── */
    --fg-primary: #FFFFFF;
    --fg-secondary: #C7C7D1;
    --fg-muted: #8A8A95;

    /* ── Strokes / focus ──────────────────────────────────────────── */
    --stroke-glass: rgba(255, 255, 255, 0.10);
    --focus-ring: #7CF0B5;

    /* ── Brand (v2 contrast-fix preserved) ────────────────────────── */
    --brand-primary: #9B5BFF;
    --brand-primary-deep: #5B22B8;
    --brand-cyan: #5BE9FF;
    --brand-pink: #FF7AC2;
    --brand-green: #7CF0B5;

    /* ── Glows / shadows ──────────────────────────────────────────── */
    --shadow-card: 0 30px 60px rgba(0, 0, 0, 0.5);
    --glow-primary: rgba(155, 91, 255, 0.45);
    --glow-cyan: rgba(91, 233, 255, 0.30);

    /* ── Motion tokens ────────────────────────────────────────────── */
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 180ms;
    --dur-base: 280ms;
    --dur-slow: 480ms;
    --transition: all var(--dur-base) var(--ease-out-quint);

    /* ── Type scale ───────────────────────────────────────────────── */
    --type-display-xl: clamp(2.25rem, 4.5vw + 1rem, 5.5rem);
    --type-display-l:  clamp(2rem, 3vw + 1rem, 3.5rem);
    --type-display-m:  clamp(1.5rem, 1.5vw + 1rem, 2.25rem);
    --type-eyebrow:    clamp(0.72rem, 0.4vw + 0.6rem, 0.85rem);
    --type-title:      clamp(1.25rem, 0.6vw + 1rem, 1.5rem);
    --type-lead:       clamp(1.05rem, 0.5vw + 0.95rem, 1.25rem);
    --type-body:       clamp(0.95rem, 0.2vw + 0.9rem, 1.05rem);
    --type-meta:       clamp(0.78rem, 0.1vw + 0.75rem, 0.85rem);

    /* ── Legacy aliases — kept so untouched rules (blog, post, etc.)
         continue to resolve to the new tokens. ─────────────────── */
    --primary: var(--brand-primary);
    --primary-glow: var(--glow-primary);
    --secondary: var(--brand-cyan);
    --bg-dark: var(--bg-base);
    --text-main: var(--fg-primary);
    --text-dim: var(--fg-secondary);
    --glass-border: var(--stroke-glass);
}

/* ── Minimal Grid System ─────────────────────────────────────────── */
.grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
}

.grid>.col {
    flex: 1 1 0;
    padding: 0 8px;
    min-width: 0;
}

.grid>.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

.grid>.col-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.grid>.col-4 {
    flex: 0 0 33.333%;
    max-width: 33.333%;
}

.grid>.col-3 {
    flex: 0 0 25%;
    max-width: 25%;
}

@media (max-width: 768px) {
    .grid>.col-mobile-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .grid>.col-mobile-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-base);
    color: var(--fg-primary);
    font-size: var(--type-body);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

p {
    font-size: var(--type-body);
    line-height: 1.6;
}

/* ── Skip link (visually hidden until focused) ───────────────────── */
.skip-link {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2000;
    padding: 0.75rem 1rem;
    background: var(--bg-raised);
    color: var(--fg-primary);
    text-decoration: none;
    font-weight: 700;
    border-radius: 8px;
    border: 1px solid var(--stroke-glass);
    clip-path: inset(50%);
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
}

.skip-link:focus,
.skip-link:focus-visible {
    clip-path: none;
    clip: auto;
    width: auto;
    height: auto;
    overflow: visible;
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

h1,
h2,
h3,
.logo {
    font-family: 'Outfit', sans-serif;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Navbar */
#navbar {
    height: 80px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(5, 5, 7, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--stroke-glass);
    transition: height var(--dur-base) var(--ease-out-quint), background var(--dur-base) var(--ease-out-quint);
}

#navbar.is-scrolled {
    height: 70px;
    background: rgba(5, 5, 7, 0.95);
}

#navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 2px;
}

.logo span {
    color: var(--primary);
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
}

.nav-links a {
    color: var(--fg-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--type-meta);
    letter-spacing: 0.02em;
    transition: color var(--dur-fast) var(--ease-out-quint);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.25rem;
}

.nav-links a:hover {
    color: var(--fg-primary);
}

.nav-links a:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
    color: var(--fg-primary);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    border-radius: 4px;
}

.nav-links a[aria-current="page"] {
    color: var(--fg-primary);
    border-bottom: 2px solid var(--brand-primary);
}

/* Buttons */
.btn-primary {
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-deep));
    color: #FFF;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 700;
    font-size: clamp(1rem, 0.4vw + 0.95rem, 1.15rem);
    transition: transform var(--dur-fast) var(--ease-out-quint), box-shadow var(--dur-fast) var(--ease-out-quint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    box-shadow: 0 10px 24px var(--glow-primary);
}

@media (hover: hover) {
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 32px var(--glow-primary);
    }
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 6px 12px var(--glow-primary);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-primary-sm:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

.btn-primary[aria-disabled="true"],
.btn-secondary[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

.btn-primary-sm {
    padding: 0.6rem 1.5rem;
    background: white;
    color: black;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 700;
    transition: transform var(--dur-fast) var(--ease-out-quint), box-shadow var(--dur-fast) var(--ease-out-quint);
    font-size: var(--type-meta);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

@media (hover: hover) {
    .btn-primary-sm:hover {
        transform: translateY(-2px);
    }
}

.btn-secondary {
    padding: 1rem 2.5rem;
    border: 1px solid var(--stroke-glass);
    color: var(--fg-primary);
    text-decoration: none;
    border-radius: 999px;
    font-weight: 700;
    font-size: clamp(1rem, 0.4vw + 0.95rem, 1.15rem);
    transition: transform var(--dur-fast) var(--ease-out-quint), background var(--dur-fast) var(--ease-out-quint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-left: 1rem;
}

@media (hover: hover) {
    .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.06);
        transform: translateY(-2px);
    }
}

.btn-secondary:active {
    transform: translateY(0) scale(0.98);
}

/* ── Hero ─────────────────────────────────────────────────────────── */
#hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 80px;
    position: relative;
    overflow: hidden;
}

.hero-glow {
    position: absolute;
    top: 20%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--glow-primary) 0%, transparent 70%);
    filter: blur(80px);
    z-index: -1;
    pointer-events: none;
}

#hero .container {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 64ch;
}

.hero-content:focus {
    outline: none;
}

h1 {
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    font-size: clamp(2.5rem, 5.5vw + 1rem, 4.75rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

h1 span {
    background: linear-gradient(to right, var(--brand-primary), var(--brand-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-subtitle {
    font-size: var(--type-lead);
    line-height: 1.55;
    color: var(--fg-secondary);
    margin-bottom: 2.5rem;
    max-width: 64ch;
}

.hero-image-container {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
}

.watch-mockup-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
}

.watch-mockup {
    position: relative;
    width: 100%;
    height: auto;
    max-width: clamp(280px, 56cqi, 520px);
    object-fit: contain;
    z-index: 2;
    border-radius: 28px;
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.5));
}

.glow-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(180px, 50cqi, 360px);
    aspect-ratio: 1 / 1;
    background: radial-gradient(circle, var(--glow-cyan) 0%, transparent 60%);
    opacity: 0.2;
    filter: blur(40px);
    z-index: 1;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: pulse 4s ease-in-out infinite alternate;
}

@keyframes pulse {
    from {
        opacity: 0.15;
        transform: translate(-50%, -50%) scale(0.95);
    }

    to {
        opacity: 0.30;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

/* Reveal animations (IntersectionObserver-driven) */
.reveal-text,
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-slow) var(--ease-out-quint),
                transform var(--dur-slow) var(--ease-out-quint);
    transition-delay: calc(var(--reveal-i, 0) * 80ms);
}

.reveal-text.visible,
.reveal-on-scroll.visible {
    opacity: 1;
    transform: none;
}

/* ── Features ─────────────────────────────────────────────────────── */
#features {
    container: features / inline-size;
    padding-block: clamp(5rem, 8vw + 2rem, 10rem);
    background: var(--bg-raised);
}

.section-header {
    text-align: center;
    margin-bottom: 5rem;
}

.section-header h2 {
    font-family: 'Outfit', sans-serif;
    font-size: var(--type-display-l);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.section-header p {
    font-size: var(--type-lead);
    line-height: 1.55;
    color: var(--fg-secondary);
    max-width: 60ch;
    margin: 0 auto;
}

.section-header span {
    color: var(--brand-primary);
}

.features-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@container features (min-width: 560px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem;
    }
}

@container features (min-width: 960px) {
    .features-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}

.feature-card {
    background: var(--bg-card);
    padding: 3rem 2rem;
    border-radius: 24px;
    border: 1px solid var(--stroke-glass);
    transition: background var(--dur-base) var(--ease-out-quint),
                transform var(--dur-base) var(--ease-out-quint),
                border-color var(--dur-base) var(--ease-out-quint);
}

@media (hover: hover) {
    .feature-card:hover {
        background: var(--bg-card-hover);
        transform: translateY(-6px);
        border-color: rgba(155, 91, 255, 0.30);
    }
}

.feature-card:active {
    transform: translateY(-2px);
}

.feature-card .icon {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.feature-card h3 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: var(--type-title);
    line-height: 1.2;
    letter-spacing: -0.005em;
    margin-bottom: 1rem;
}

.feature-card p {
    color: var(--fg-secondary);
    max-width: 64ch;
}

/* ── Showcase ─────────────────────────────────────────────────────── */
#showcase {
    container: showcase / inline-size;
    padding-block: clamp(5rem, 8vw + 2rem, 10rem);
}

.showcase-content {
    display: grid;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    grid-template-columns: 1fr;
}

@container showcase (min-width: 768px) {
    .showcase-content {
        grid-template-columns: 1fr 1fr;
    }
}

.showcase-text h2 {
    font-family: 'Outfit', sans-serif;
    font-size: var(--type-display-l);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

.showcase-text h2 span {
    background: linear-gradient(to right, var(--brand-primary), var(--brand-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.showcase-text p:first-of-type {
    font-size: var(--type-lead);
    line-height: 1.55;
    color: var(--fg-secondary);
    margin-bottom: 2rem;
    max-width: 64ch;
}

.check-list {
    list-style: none;
}

.check-list li {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: var(--type-body);
    font-weight: 500;
}

.check-list li::before {
    content: '✓';
    color: var(--brand-cyan);
    font-weight: 900;
}

.lifestyle-img {
    width: 100%;
    height: auto;
    border-radius: 32px;
    box-shadow: var(--shadow-card);
}

/* Safety net: never lock an aspect ratio on the product imagery so
   nothing forces 1:1 again. */
.watch-mockup,
.lifestyle-img,
#hero-img,
#showcase-img {
    aspect-ratio: auto;
    height: auto;
}

/* ── CTA ──────────────────────────────────────────────────────────── */
#cta {
    padding-block: clamp(5rem, 8vw + 2rem, 10rem);
}

.cta-box {
    background: linear-gradient(135deg, #111, #000);
    padding: clamp(3rem, 5vw, 6rem);
    border-radius: 40px;
    text-align: center;
    border: 1px solid var(--stroke-glass);
    position: relative;
    overflow: hidden;
}

.cta-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--glow-primary) 0%, transparent 50%);
    opacity: 0.1;
}

.cta-box h2 {
    font-family: 'Outfit', sans-serif;
    font-size: var(--type-display-l);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    position: relative;
}

.cta-box p {
    font-size: var(--type-lead);
    line-height: 1.55;
    color: var(--fg-secondary);
    margin-bottom: 3rem;
    position: relative;
}

.cta-box .btn-primary {
    position: relative;
}

/* ── Footer ───────────────────────────────────────────────────────── */
/* Multi-column footer (spec: docs/specs/web-footer-redesign.md).
   Layout uses container queries so the footer responds to its own width
   rather than the viewport — future-proof for sidebar/rail layouts. */
footer {
    container: footer / inline-size;
    padding-block: clamp(3rem, 6vw, 5rem);
    border-top: 1px solid var(--stroke-glass);
}

/* Top grid — brand left, nav cluster right. 12-col conceptually; below
   1024 we stack brand on top, nav below. */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 4rem);
}

@container footer (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: 4fr 8fr;
        align-items: start;
    }
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.footer-logo {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
}

.footer-logo span {
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.footer-tagline {
    color: var(--fg-secondary);
    font-size: var(--type-meta);
    font-weight: 400;
    line-height: 1.55;
    margin: 0;
    max-width: 32ch;
}

/* Nav cluster — three columns side-by-side on tablet+, stacked on mobile.
   Each column is a <details> for the mobile accordion; on desktop the
   summary loses its toggle affordance via pointer-events: none below. */
.footer-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

@container footer (min-width: 768px) {
    .footer-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(1.5rem, 3vw, 2.5rem);
    }
}

.footer-col {
    min-width: 0;
}

/* On mobile, each column gets a hairline divider so the accordion strips
   read as discrete tap targets. Reset on tablet+. */
@container footer (max-width: 767.98px) {
    .footer-col {
        border-top: 1px solid var(--stroke-glass);
    }

    .footer-col:last-child {
        border-bottom: 1px solid var(--stroke-glass);
    }
}

.footer-col__title {
    font-family: 'Outfit', sans-serif;
    font-size: var(--type-eyebrow);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-primary);
    margin: 0 0 1rem;
}

/* On mobile (<768), promote the <summary> into the tap strip. Strip its
   default disclosure marker and use a CSS chevron pseudo-element instead. */
@container footer (max-width: 767.98px) {
    .footer-col__title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 44px;
        margin: 0;
        padding: 0.5rem 0;
        cursor: pointer;
        list-style: none;
        position: relative;
    }

    .footer-col__title::-webkit-details-marker {
        display: none;
    }

    .footer-col__title::after {
        content: '';
        width: 0.55rem;
        height: 0.55rem;
        border-right: 2px solid var(--fg-secondary);
        border-bottom: 2px solid var(--fg-secondary);
        transform: rotate(-45deg);
        transition: transform var(--dur-fast) var(--ease-out-quint),
                    border-color var(--dur-fast) var(--ease-out-quint);
        margin-right: 0.25rem;
    }

    details[open] > .footer-col__title::after {
        transform: rotate(45deg);
    }

    .footer-col__title:hover::after {
        border-color: var(--fg-primary);
    }

    .footer-col__title:active::after {
        transform: translateY(1px) rotate(-45deg);
    }

    details[open] > .footer-col__title:active::after {
        transform: translateY(1px) rotate(45deg);
    }

    .footer-col__title:focus-visible {
        outline: 3px solid var(--focus-ring);
        outline-offset: 3px;
        border-radius: 8px;
    }

    /* Smooth reveal of the link list — same animatable grid trick used
       by the consent banner. <ul> wraps a single row; collapsed = 0fr. */
    .footer-col > ul {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows var(--dur-base) var(--ease-out-quint);
        overflow: hidden;
        padding: 0 0 0.5rem;
    }

    details[open] > ul {
        grid-template-rows: 1fr;
        padding-bottom: 0.75rem;
    }

    .footer-col > ul > li {
        min-height: 0;
    }

    .footer-col > ul > * {
        min-height: 0;
    }
}

/* On tablet+ the <details> is purely structural — already always open
   (markup ships `open`); we suppress the disclosure UI completely. */
@container footer (min-width: 768px) {
    .footer-col__title {
        cursor: default;
        pointer-events: none;
        list-style: none;
    }

    .footer-col__title::-webkit-details-marker {
        display: none;
    }

    .footer-col__title::marker {
        display: none;
        content: '';
    }
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.footer-col li {
    margin: 0;
}

.footer-col li a {
    color: var(--fg-secondary);
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: var(--type-meta);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    transition: color var(--dur-fast) var(--ease-out-quint);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0;
    border-radius: 4px;
}

@media (hover: hover) {
    .footer-col li a:hover {
        color: var(--fg-primary);
    }
}

.footer-col li a:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
    color: var(--fg-primary);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.footer-col li a:active {
    color: var(--fg-primary);
    transform: translateY(1px);
}

.footer-col li a[aria-current="page"] {
    color: var(--fg-primary);
}

/* Connect group reuses the same column style; the .social-links class
   is preserved for any legacy hook but visually identical. */
.social-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.social-links a {
    color: var(--fg-secondary);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out-quint);
}

@media (hover: hover) {
    .social-links a:hover {
        color: var(--fg-primary);
    }
}

/* Bottom bar — copyright + cookie prefs, separated from the grid by a
   hairline. Stacks on mobile, row on tablet+. */
.footer-bottom {
    margin-top: clamp(2rem, 3vw, 2.5rem);
    padding-top: clamp(1.25rem, 2vw, 1.75rem);
    border-top: 1px solid var(--stroke-glass);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

@container footer (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
}

.footer-bottom__copy {
    margin: 0;
    color: var(--fg-muted);
    font-size: var(--type-meta);
    font-weight: 400;
    line-height: 1.55;
}

.footer-bottom__meta {
    margin: 0;
    line-height: 1;
}

.footer-cookie-link {
    color: var(--fg-secondary);
    font-size: var(--type-meta);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.25rem;
    border-radius: 4px;
    transition: color var(--dur-fast) var(--ease-out-quint);
}

@media (hover: hover) {
    .footer-cookie-link:hover {
        color: var(--fg-primary);
    }
}

.footer-cookie-link:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
    color: var(--fg-primary);
}

.footer-cookie-link:active {
    color: var(--fg-primary);
    transform: translateY(1px);
}

/* ───────────────────────────────────────────────────────────────────
   Blog
   Listing page (blog/index.html) and post pages share these styles.
   ─────────────────────────────────────────────────────────────────── */

.blog-list-wrap,
.post-wrap {
    padding-top: 8rem;
    padding-bottom: 4rem;
}

.blog-hero {
    max-width: 760px;
    margin: 0 auto 2.5rem;
    padding: 0 1.25rem;
}

.blog-eyebrow {
    color: var(--text-dim);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 0.75rem;
}

.blog-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    font-size: 3rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
}

.blog-lede {
    color: var(--text-dim);
    font-size: 1.05rem;
    line-height: 1.55;
    max-width: 60ch;
    margin: 0;
}

.blog-list {
    max-width: 760px;
    display: grid;
    gap: 1rem;
}

.post-card {
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    transition: var(--transition);
    background: rgba(255,255,255,0.02);
}

.post-card:hover {
    background: rgba(255,255,255,0.05);
    transform: translateY(-2px);
}

.post-card a {
    display: block;
    padding: 1.5rem 1.75rem;
    text-decoration: none;
    color: inherit;
}

.post-card .post-meta {
    color: var(--text-dim);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
}

.post-card h2 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    line-height: 1.2;
    margin: 0 0 0.6rem;
    letter-spacing: -0.01em;
}

.post-card p {
    color: var(--text-dim);
    line-height: 1.55;
    margin: 0;
    font-size: 0.95rem;
}

.post-readmore {
    color: #9da6ff;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    margin-top: 0.75rem !important;
}

/* Single post */

.post {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1.25rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.92);
}

.post .post-eyebrow {
    color: var(--text-dim);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.post h1 {
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    font-size: 2.6rem;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 1.25rem;
}

.post .post-lede {
    font-size: 1.18rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.85);
    margin: 0 0 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--glass-border);
}

.post h2 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.55rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 2.5rem 0 1rem;
    color: #fff;
}

.post h3 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    margin: 1.75rem 0 0.5rem;
    color: #b6b6ff;
}

.post p {
    margin: 0 0 1.1rem;
}

.post ul,
.post ol {
    margin: 0 0 1.4rem;
    padding-left: 1.6rem;
}

.post li {
    margin: 0.4rem 0;
}

.post a {
    color: #9da6ff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.post a:hover {
    color: #c5cbff;
}

.post strong { color: #fff; }
.post em     { color: rgba(255,255,255,0.95); font-style: italic; }
.post code {
    font-family: 'SF Mono', ui-monospace, Menlo, monospace;
    font-size: 0.92em;
    background: rgba(255,255,255,0.08);
    padding: 0.12em 0.35em;
    border-radius: 4px;
}

.post-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.6rem;
    font-size: 0.95rem;
}

.post-table th,
.post-table td {
    text-align: left;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--glass-border);
}

.post-table th {
    color: var(--text-dim);
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.post-cta-block {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--glass-border);
    text-align: center;
}

.post-cta {
    display: inline-block;
    background: linear-gradient(135deg, #9da6ff, #c084fc);
    color: #0b0b10 !important;
    text-decoration: none !important;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    transition: var(--transition);
}

.post-cta:hover {
    transform: translateY(-2px);
    color: #0b0b10 !important;
}

@media (max-width: 720px) {
    .blog-hero h1 { font-size: 2.2rem; }
    .post h1     { font-size: 2rem; }
    .post .post-lede { font-size: 1.05rem; }
    .post-table { font-size: 0.88rem; }
}

/* ── Responsive (legacy media queries, kept lightweight) ──────────── */
@media (max-width: 992px) {
    #hero .container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }

    .hero-image-container {
        order: -1;
    }

    .hero-subtitle {
        margin: 0 auto 2.5rem;
    }
}

/* Hamburger menu */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background var(--dur-fast) var(--ease-out-quint);
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: background var(--dur-fast) var(--ease-out-quint), transform var(--dur-fast) var(--ease-out-quint);
}

.hamburger:hover span {
    background: var(--brand-cyan);
}

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

@media (max-width: 992px) {
    .hamburger {
        display: flex;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        flex-direction: column;
        background: rgba(5, 5, 7, 0.98);
        padding: 1rem 2rem;
        gap: 1rem;
        border-bottom: 1px solid var(--stroke-glass);
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links .btn-primary-sm {
        width: 100%;
        text-align: center;
    }
}

/* ── Mobile (≤ 768px) ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-actions {
        display: block;
    }

    .btn-secondary {
        margin-left: 0;
    }

    .watch-mockup {
        max-width: 280px;
    }

    .glow-effect {
        width: 200px;
        height: 200px;
    }

    .feature-card {
        padding: 2rem 1.5rem;
    }

    .lifestyle-img {
        max-width: 100%;
    }

    .hero-actions .col {
        margin-bottom: 12px;
    }

    .hero-actions .col:last-child {
        margin-bottom: 0;
    }
}

/* ── Reduced-motion fallback ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .reveal-text,
    .reveal-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .glow-effect {
        animation: none !important;
    }
}

/* ── Forced colors (high-contrast OS modes) ──────────────────────── */
@media (forced-colors: active) {
    .hero-glow,
    .glow-effect {
        display: none !important;
    }

    .btn-primary,
    .btn-secondary,
    .btn-primary-sm {
        border: 1px solid CanvasText;
    }

    a:focus-visible,
    button:focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 3px;
    }

    .wa-consent__sheet {
        background: Canvas;
        color: CanvasText;
        border: 1px solid CanvasText;
    }

    .wa-consent__scrim {
        background: Canvas;
        opacity: 0.7;
    }

    .wa-consent__btn,
    .wa-consent__btn--save,
    .wa-consent__btn--primary {
        border: 1px solid ButtonText;
        background: ButtonFace;
        color: ButtonText;
        background-image: none !important;
    }

    .wa-consent__switch {
        border: 1px solid CanvasText;
    }
}

/* ── Cookie consent modal (Consent Mode v2 gate) ───────────────────
   Spec: docs/specs/web-cookie-consent-redesign.md
   Native <dialog>.showModal() — blocking, focus-trapped, centered card
   on tablet+; bottom-sheet on mobile. ESC = Reject (we preventDefault
   the cancel event in consent.js so dismissal is never silent).
   Reject + Accept carry equal visual weight (CNIL symmetry); Customize
   is a tertiary text link. The previous CSS API (.wa-consent__inner,
   __title, __body, __actions, __btn, __link, __settings, __toggle,
   __switch, __cat, __cat-title, __cat-desc) is preserved verbatim. */

/* Pre-paint inert guard — hides the page until consent.js has decided
   whether to mount the modal, so there is no interactive flash. The
   inline <style id="wa-consent-preboot"> in <head> ships a tighter
   version that only depends on `data-wa-consent-preboot`; this rule is
   a defensive duplicate so external CSS still acts as a backstop if
   the inline style is stripped (CSP, extensions, etc.). */
html[data-wa-consent-preboot] body > *:not(script) {
    visibility: hidden;
}

/* Native <dialog> root. Browsers ship UA styles (centered, white bg,
   black border, padding) — strip them so our card-in-overlay layout
   wins. The dialog itself becomes a transparent full-viewport overlay;
   the visible card is .wa-consent__sheet. */
.wa-consent {
    /* Full-viewport overlay container. */
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--fg-primary);
    font-family: 'Inter', system-ui, sans-serif;
    /* Override UA centering math so we cover the whole viewport. The
       .wa-consent__sheet handles its own centering inside this. */
    inset: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    /* iOS Safari: keep the dialog from scrolling itself when the page
       behind it would normally rubber-band. */
    overscroll-behavior: contain;
}

/* Closed state — native <dialog> already collapses to display:none
   without [open], but we belt-and-brace it for older webkit. */
.wa-consent:not([open]) {
    display: none;
}

/* Backdrop fallback: only used if the browser fails to paint
   ::backdrop (forced-colors, very old engines). The native ::backdrop
   below is the primary scrim. */
.wa-consent__scrim {
    position: fixed;
    inset: 0;
    background: rgba(2, 2, 4, 0.58);
    pointer-events: none;
    z-index: 0;
}

/* Native scrim. */
.wa-consent::backdrop {
    background: rgba(2, 2, 4, 0.58);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    backdrop-filter: blur(6px) saturate(120%);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out-quint);
}

.wa-consent[open]::backdrop {
    opacity: 1;
}

.wa-consent[data-wa-closing]::backdrop {
    opacity: 0;
    transition-duration: var(--dur-fast);
}

/* The visible card. Centered on tablet+; pinned to bottom on mobile.
   Container queries scope the action-row layout to the *sheet* width,
   not the viewport. */
.wa-consent__sheet {
    /* Centered by margin: auto inside an inset:0 overlay. */
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    inset: auto 0 0 0;
    margin: 0 0.75rem max(0.75rem, env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    max-height: min(calc(100dvh - 1.5rem), 720px);
    overflow-y: auto;
    /* Reserve scrollbar space whether or not the scrollbar is visible
       so expanding the settings panel can't cause a scrollbar flicker
       loop with a content-anchored breakpoint below. */
    scrollbar-gutter: stable;
    background: #101019;
    color: var(--fg-primary);
    border: 1px solid var(--stroke-glass);
    border-radius: 18px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 24px 64px rgba(0, 0, 0, 0.6),
        0 8px 24px rgba(0, 0, 0, 0.4);
    /* Mobile bottom-sheet entry: slide up from the viewport bottom. */
    opacity: 0;
    transform: translateY(100%);
    transition:
        opacity var(--dur-slow) var(--ease-out-quint),
        transform var(--dur-slow) var(--ease-out-quint);
}

.wa-consent[open] .wa-consent__sheet {
    opacity: 1;
    transform: none;
}

.wa-consent[data-wa-closing] .wa-consent__sheet {
    opacity: 0;
    transform: translateY(100%);
    transition-duration: var(--dur-fast);
}

/* Tablet/Desktop — true centered card with capped width. */
@media (min-width: 768px) {
    .wa-consent {
        display: grid;
        place-items: center;
    }

    .wa-consent__sheet {
        inset: auto;
        margin: 0;
        width: min(560px, calc(100vw - 3rem));
        max-width: min(560px, calc(100vw - 3rem));
        max-height: min(calc(100dvh - 3rem), 720px);
        /* Replace the slide-up entry with the desktop fade+lift+scale. */
        transform: translateY(12px) scale(0.985);
        transition:
            opacity var(--dur-base) var(--ease-out-quint),
            transform var(--dur-base) var(--ease-out-quint);
    }

    .wa-consent[open] .wa-consent__sheet {
        transform: none;
    }

    .wa-consent[data-wa-closing] .wa-consent__sheet {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
        transition-duration: var(--dur-fast);
    }
}

/* Inner grid — single source of truth for vertical rhythm; eliminates
   the cumulative-margin-collapse problem the previous banner had. */
.wa-consent__inner {
    display: grid;
    grid-template-rows: auto auto auto;
    row-gap: clamp(0.75rem, 1.2vw + 0.5rem, 1.25rem);
    padding: clamp(1.25rem, 2vw + 0.5rem, 1.75rem);
    margin: 0;
    max-width: none;
}

.wa-consent__title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: clamp(1.125rem, 0.4vw + 1rem, 1.375rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--fg-primary);
    margin: 0;
    text-wrap: pretty;
    outline-offset: 4px;
}

.wa-consent__title:focus-visible {
    outline: 3px solid var(--focus-ring);
    border-radius: 4px;
}

.wa-consent__body {
    font-size: var(--type-body);
    line-height: 1.55;
    color: var(--fg-primary);
    margin: 0;
    text-wrap: pretty;
}

.wa-consent__inline-link {
    color: var(--brand-cyan);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wa-consent__inline-link:hover {
    color: #8ff1ff;
}

.wa-consent__inline-link:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Action row. Narrow viewports: wraps so Reject + Accept share a row
   50/50 and Customize drops to its own row. Wider viewports: single
   row of three.

   We anchor this to the viewport, not the sheet's container width, so
   scrollbar appearance on the sheet can't toggle the layout. The sheet
   width is itself a function of the viewport (mobile: 100vw - 1.5rem;
   desktop ≥768px: capped at 560px), so a viewport breakpoint maps
   cleanly to the visible width. */
.wa-consent__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.wa-consent__actions > .wa-consent__btn {
    flex: 1 1 0;
    min-width: 120px;
}

.wa-consent__actions > .wa-consent__link {
    flex: 1 1 100%;
    margin-left: 0;
    text-align: center;
}

@media (min-width: 540px) {
    .wa-consent__actions > .wa-consent__btn {
        flex: 0 0 auto;
    }

    .wa-consent__actions > .wa-consent__link {
        flex: 0 0 auto;
        margin-left: auto;
        text-align: left;
    }
}

.wa-consent__btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: var(--fg-primary);
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 999px;
    min-height: 44px;
    min-width: 120px;
    padding: 0.6rem 1.25rem;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition:
        background var(--dur-fast) var(--ease-out-quint),
        transform var(--dur-fast) var(--ease-out-quint),
        border-color var(--dur-fast) var(--ease-out-quint),
        box-shadow var(--dur-fast) var(--ease-out-quint);
}

@media (hover: hover) {
    .wa-consent__btn:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.40);
    }
}

.wa-consent__btn:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

.wa-consent__btn:active {
    transform: translateY(0) scale(0.98);
}

/* Primary "Accept all" — gradient, transparent border. */
.wa-consent__btn--primary {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-deep));
    border-color: transparent;
    color: #FFFFFF;
}

@media (hover: hover) {
    .wa-consent__btn--primary:hover {
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-deep));
        border-color: transparent;
        box-shadow: 0 6px 16px var(--glow-primary);
    }
}

.wa-consent__btn--primary:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 6px var(--glow-primary);
}

.wa-consent__link {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    color: var(--brand-cyan);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.6rem 0.5rem;
    min-height: 44px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--dur-fast) var(--ease-out-quint);
}

.wa-consent__link:hover {
    color: #8ff1ff;
}

.wa-consent__link:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Settings panel — collapses fully when hidden so the modal sizes to
   its content. We previously animated grid-template-rows from 0fr→1fr,
   but `0fr` doesn't collapse a grid row when its children use the
   default `min-height: auto` — the row still reserved min-content
   height under the action buttons, leaving a visible empty band. We
   trade the row-height transition for an honest collapse; the dialog's
   own fade/scale entry still feels smooth. */
.wa-consent__settings {
    display: block;
    border-top: 1px solid var(--stroke-glass);
    padding-top: clamp(0.75rem, 1.2vw + 0.5rem, 1.25rem);
    margin-top: 0;
}

.wa-consent__settings[hidden] {
    display: none;
}

.wa-consent__cat {
    border: 0;
    margin: 0 0 1rem;
    padding: 0;
    min-width: 0;
}

.wa-consent__cat-title {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25;
    color: var(--fg-primary);
    margin-bottom: 0.5rem;
    padding: 0;
}

.wa-consent__cat-desc {
    margin: 0.25rem 0 0;
    font-size: var(--type-meta);
    line-height: 1.5;
    color: var(--fg-secondary);
}

/* Toggle: native <input type="checkbox"> for SR semantics. The visual
   "switch" is a sibling <span> styled below. The hit area is the whole
   <label>, so target-size easily exceeds 44×44. */
.wa-consent__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    cursor: pointer;
    user-select: none;
    padding: 0.25rem 0;
    border-radius: 8px;
    position: relative;
}

.wa-consent__toggle:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.85;
}

.wa-consent__toggle input {
    /* Visually hidden but still focusable + announced by screen readers. */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
    white-space: nowrap;
}

.wa-consent__switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    transition: background var(--dur-fast) var(--ease-out-quint);
    flex: 0 0 auto;
}

.wa-consent__switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: var(--fg-secondary);
    border-radius: 50%;
    transition: transform var(--dur-fast) var(--ease-out-quint),
                background var(--dur-fast) var(--ease-out-quint);
}

.wa-consent__toggle input:checked ~ .wa-consent__switch {
    background: var(--brand-primary);
}

.wa-consent__toggle input:checked ~ .wa-consent__switch::after {
    transform: translateX(16px);
    background: #FFFFFF;
}

.wa-consent__toggle input:disabled ~ .wa-consent__switch {
    background: rgba(124, 240, 181, 0.30);
}

.wa-consent__toggle input:disabled ~ .wa-consent__switch::after {
    transform: translateX(16px);
    background: var(--focus-ring);
}

.wa-consent__toggle input:focus-visible ~ .wa-consent__switch {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

.wa-consent__toggle-label {
    font-size: var(--type-body);
    line-height: 1;
    color: var(--fg-primary);
    font-weight: 600;
}

/* Save preferences uses the primary gradient — the user is committing
   a deliberate, granular choice inside an opt-in flow they entered
   explicitly, so primary emphasis is appropriate. */
.wa-consent__btn--save {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-deep));
    border-color: transparent;
    color: #FFFFFF;
    margin-top: 0.5rem;
}

@media (hover: hover) {
    .wa-consent__btn--save:hover {
        background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-deep));
        box-shadow: 0 6px 16px var(--glow-primary);
        border-color: transparent;
    }
}

.wa-consent__btn--save:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 6px var(--glow-primary);
}

/* While the modal is open, lock background scroll. consent.js sets
   data-wa-consent-open on <html>. */
html[data-wa-consent-open],
html[data-wa-consent-open] body {
    overflow: hidden;
}

/* Reduced motion — modal appears/disappears instantly; no scrim fade,
   no sheet translate/scale, no settings transition. The global
   prefers-reduced-motion rule already clamps transition-duration,
   but we kill the compound transform too. */
@media (prefers-reduced-motion: reduce) {
    .wa-consent,
    .wa-consent__sheet,
    .wa-consent::backdrop {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    .wa-consent[open] .wa-consent__sheet {
        opacity: 1;
        transform: none !important;
    }

    .wa-consent[data-wa-closing] .wa-consent__sheet,
    .wa-consent[data-wa-closing]::backdrop {
        opacity: 0;
    }
}

/* ── Optional progressive enhancement: gentle scroll-tied translate
     on the hero image. Max 12px down across 0 → 100vh. Gated by both
     animation-timeline support and prefers-reduced-motion: no-pref. ── */
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        @keyframes hero-img-drift {
            from { translate: 0 0; }
            to   { translate: 0 12px; }
        }

        #hero-img {
            animation: hero-img-drift linear both;
            animation-timeline: scroll(root);
            animation-range: entry 0% exit 100%;
        }
    }
}

.appstore-badge {
    display: inline-block;
    position: relative;
    z-index: 10;
    transition: transform 0.1s ease;
}
.appstore-badge:active { transform: translateY(1px); }
.appstore-badge img {
    display: block;
    height: 48px;
    width: auto;
}