/* ==========================================================================
   Chiquiflix — global design system
   This stylesheet IS the style guide: tokens first, then components.
   Light is the default theme; dark ("cosmic") is toggled via
   [data-theme="dark"], set before first paint by the inline script in
   base.html. Old token names (--bg, --accent-2, --card-shadow, --radius,
   --nav-bg, --font-heading) are preserved — staff/pipeline templates
   depend on them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — self-hosted woff2, served from /static/fonts/ (see
   STATICFILES_DIRS; files are populated by scripts/download-fonts.sh).
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Rubik';
    src: url('../fonts/Rubik-VariableFont_wght.woff2') format('woff2-variations');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Rubik';
    src: url('../fonts/Rubik-Italic-VariableFont_wght.woff2') format('woff2-variations');
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans Devanagari';
    src: url('../fonts/NotoSansDevanagari-VariableFont.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens — light theme (default)
   -------------------------------------------------------------------------- */
:root, [data-theme="light"] {
    color-scheme: light;

    /* Surfaces */
    --bg: #FDF8EE;
    --bg-subtle: #F6EEDD;
    --bg-card: #FFFFFF;
    --bg-hover: #FBF3E4;

    /* Text */
    --text: #2D2A26;
    --text-muted: #6B6560;
    --text-subtle: #97908A;

    /* Brand accents — drawn from the logo confetti + theme palettes */
    --accent: #DE3163;          /* cherry (Rainbow Bright) */
    --accent-hover: #B82550;
    --accent-2: #0C9B82;        /* teal star */
    --accent-3: #4E8FD0;        /* sky */
    --accent-4: #F4A700;        /* gold star */
    --accent-5: #3FA548;        /* green (checkmarks) */

    --border: #EAE0CE;
    --nav-bg: #7E5475;          /* plum */
    --nav-text: #FFFFFF;
    --focus: #C25E00;

    /* Gradients */
    --gradient-brand: linear-gradient(135deg, #DE3163 0%, #F4511E 55%, #F4A700 100%);
    --gradient-btn: linear-gradient(135deg, #E9256E 0%, #F4511E 100%);
    --gradient-btn-hover: linear-gradient(135deg, #C81D5C 0%, #D64518 100%);

    /* Shadows — plum-tinted so they stay warm on cream */
    --shadow-sm: 0 1px 3px rgba(126, 84, 117, 0.10), 0 1px 2px rgba(126, 84, 117, 0.08);
    --shadow-md: 0 4px 10px rgba(126, 84, 117, 0.14), 0 2px 4px rgba(126, 84, 117, 0.10);
    --shadow-lg: 0 12px 28px rgba(126, 84, 117, 0.18), 0 4px 10px rgba(126, 84, 117, 0.12);
    --shadow-glow: 0 6px 24px rgba(222, 49, 99, 0.28);
    --card-shadow: var(--shadow-sm);

    /* Typography */
    --font-heading: 'Rubik', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Rubik', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Layout */
    --container: 1080px;
    --container-narrow: 720px;

    /* Borders & radii — generous rounding, thick friendly outlines */
    --outline-width: 2px;
    --radius-sm: 0.5rem;
    --radius: 14px;
    --radius-lg: 1.25rem;
    --radius-xl: 1.75rem;
    --radius-full: 999px;

    /* Motion */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
}

/* --------------------------------------------------------------------------
   Tokens — dark ("cosmic") theme
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
    color-scheme: dark;

    --bg: #150F31;
    --bg-subtle: #1A1340;
    --bg-card: #221A48;
    --bg-hover: #2A2156;

    --text: #F3E5F5;
    --text-muted: #B8A4C8;
    --text-subtle: #8A7BA3;

    --accent: #F48FB1;          /* aurora pink (Cosmic Unicorn) */
    --accent-hover: #F8ABC4;
    --accent-2: #4DD0E1;        /* crystal teal */
    --accent-3: #CE93D8;        /* mauve */
    --accent-4: #FFD54F;        /* gold */
    --accent-5: #81C784;        /* green */

    --border: #3D2D6B;
    --nav-bg: #1D1640;
    --nav-text: #F3E5F5;
    --focus: #FFB000;

    --gradient-brand: linear-gradient(135deg, #F48FB1 0%, #CE93D8 50%, #4DD0E1 100%);
    --gradient-btn: linear-gradient(135deg, #E9256E 0%, #F4511E 100%);
    --gradient-btn-hover: linear-gradient(135deg, #F23A7F 0%, #FF6636 100%);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 24px rgba(244, 143, 177, 0.30);
    --card-shadow: 0 0 20px rgba(244, 143, 177, 0.12);
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    position: relative;
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    color: var(--accent);
}

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

::selection { background: var(--accent); color: #fff; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

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

/* Layout containers */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--space-4);
}
.container-narrow {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 var(--space-4);
}
main.container { padding-top: var(--space-6); padding-bottom: var(--space-12); }

/* Accessibility helpers */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--bg-card);
    color: var(--text);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}
.skip-link:focus {
    left: var(--space-3);
    top: var(--space-3);
}
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Ambient page glow */
.page-glow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% -4%, color-mix(in srgb, var(--accent) 14%, transparent) 0, transparent 32%),
        radial-gradient(circle at 88% -6%, color-mix(in srgb, var(--accent-2) 12%, transparent) 0, transparent 30%),
        radial-gradient(circle at 50% 110%, color-mix(in srgb, var(--accent-3) 10%, transparent) 0, transparent 34%);
    z-index: -1;
}

/* --------------------------------------------------------------------------
   Header / navigation — sticky, translucent, blurred
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--nav-bg), transparent 10%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
}
.nav-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    color: var(--nav-text);
}
.brand {
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.brand img {
    height: 40px;
    width: auto;
    display: block;
    /* white bubble letters need a whisper of lift on the plum bar */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
.nav-inner a:not(.brand) {
    color: var(--nav-text);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-sm);
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-full);
    transition: background var(--transition-fast);
}
.nav-inner a:not(.brand):hover { background: rgba(255, 255, 255, 0.16); }
.nav-inner a:not(.brand)[aria-current="page"] { background: rgba(255, 255, 255, 0.22); }

/* Sign-up CTA — a filled gold pill so it reads as the primary action on the plum bar */
.nav-inner a.nav-cta {
    background: var(--accent-4);
    color: #2D2A26;
    font-weight: 800;
}
.nav-inner a.nav-cta:hover { background: var(--accent-4); filter: brightness(1.07); }
.nav-inner a.nav-cta[aria-current="page"] { background: var(--accent-4); filter: brightness(0.93); }

/* Logout is a POST form styled to sit among the nav links */
.nav-logout { display: inline; margin: 0; }
.nav-logout button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--nav-text);
    font: inherit;
    font-weight: 600;
    font-size: var(--text-sm);
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-full);
    transition: background var(--transition-fast);
}
.nav-logout button:hover { background: rgba(255, 255, 255, 0.16); }

/* Theme toggle */
.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--nav-text);
    opacity: 0.9;
    padding: 0.35rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    transition: background var(--transition-fast), opacity var(--transition-fast);
}
.theme-toggle:hover { opacity: 1; background: rgba(255, 255, 255, 0.16); }
.theme-toggle svg { display: block; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Staff-only sub-navigation strip, flush under the main header */
.staff-subnav {
    background: color-mix(in srgb, var(--nav-bg), black 30%);
    color: #fff;
    font-size: var(--text-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.staff-subnav-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--space-2) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.staff-subnav-label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    opacity: 0.7;
}
.staff-subnav a { color: #fff; text-decoration: none; opacity: 0.85; }
.staff-subnav a:hover { opacity: 1; text-decoration: underline; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.4rem;
    background: var(--gradient-btn);
    color: #fff;
    text-decoration: none;
    border-radius: var(--radius-full);
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), transform var(--transition-base), background var(--transition-base);
}
.btn:hover {
    background: var(--gradient-btn-hover);
    color: #fff;
    box-shadow: var(--shadow-md), var(--shadow-glow);
    transform: translateY(-1px);
}
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.btn-secondary {
    background: var(--bg-card);
    color: var(--accent);
    border: var(--outline-width) solid var(--accent);
    /* keep total height in step with .btn despite the border */
    padding: calc(0.6rem - var(--outline-width)) calc(1.4rem - var(--outline-width));
}
.btn-secondary:hover {
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
    color: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn-danger { background: #B53A4E; }
.btn-danger:hover { background: #9C2F41; box-shadow: var(--shadow-md); }

.btn-large { padding: 0.85rem 2.2rem; font-size: var(--text-lg); }
.btn-large.btn-secondary { padding: calc(0.85rem - var(--outline-width)) calc(2.2rem - var(--outline-width)); }

/* --------------------------------------------------------------------------
   Cards & grids
   -------------------------------------------------------------------------- */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4);
    box-shadow: var(--card-shadow);
}
.card h3 { color: var(--accent); }

.card-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.card-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

/* Icon chips — tinted squircles behind feature emoji/glyphs */
.icon-chip {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    line-height: 1;
    margin-bottom: var(--space-3);
    background: color-mix(in srgb, var(--accent) 14%, var(--bg-card));
}
.icon-chip.chip-2 { background: color-mix(in srgb, var(--accent-2) 16%, var(--bg-card)); }
.icon-chip.chip-3 { background: color-mix(in srgb, var(--accent-3) 16%, var(--bg-card)); }
.icon-chip.chip-4 { background: color-mix(in srgb, var(--accent-4) 18%, var(--bg-card)); }

/* --------------------------------------------------------------------------
   Pills — language flags, theme worlds, filters
   -------------------------------------------------------------------------- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    background: var(--bg-card);
    border: var(--outline-width) solid var(--border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
a.pill:hover, button.pill:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.pill.active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
    font-weight: 700;
}
.pill.locked { opacity: 0.45; }
.pill .palette-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    text-align: center;
    padding: var(--space-10) var(--space-4) var(--space-8);
}
.hero-logo {
    height: clamp(72px, 14vw, 128px);
    width: auto;
    margin-bottom: var(--space-4);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
}
.hero-title {
    font-size: clamp(2rem, 6vw, 3.25rem);
    line-height: 1.15;
    margin-bottom: var(--space-3);
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent); /* fallback if background-clip:text unsupported */
}
.hero-sub {
    font-size: var(--text-xl);
    color: var(--text-muted);
    max-width: 620px;
    margin: 0 auto var(--space-6);
    line-height: 1.5;
}
.hero-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-4);
}

/* Compact hero for interior pages */
.hero-compact { padding: var(--space-8) var(--space-4) var(--space-6); }
.hero-compact .hero-title { font-size: clamp(1.75rem, 5vw, 2.5rem); }
.hero-compact .hero-sub { font-size: var(--text-lg); margin-bottom: 0; }

/* Confetti — floating logo-style shapes scattered around heroes.
   Purely decorative (aria-hidden), disabled with reduced motion. */
.confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.confetti span {
    position: absolute;
    display: block;
    opacity: 0.85;
    animation: confetti-float 5s ease-in-out infinite;
}
.confetti svg { display: block; width: 100%; height: 100%; }
.confetti span:nth-child(1) { top: 12%; left: 6%;  width: 26px; height: 26px; animation-delay: 0s; }
.confetti span:nth-child(2) { top: 22%; right: 8%; width: 20px; height: 20px; animation-delay: 0.8s; }
.confetti span:nth-child(3) { top: 60%; left: 12%; width: 16px; height: 16px; animation-delay: 1.6s; }
.confetti span:nth-child(4) { top: 70%; right: 14%; width: 22px; height: 22px; animation-delay: 2.4s; }
.confetti span:nth-child(5) { top: 8%;  left: 40%; width: 14px; height: 14px; animation-delay: 3.2s; }
.confetti span:nth-child(6) { top: 82%; left: 46%; width: 18px; height: 18px; animation-delay: 4s; }
@keyframes confetti-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(8deg); }
}

/* --------------------------------------------------------------------------
   Section headers — short gradient underline swash
   -------------------------------------------------------------------------- */
.section-head {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    position: relative;
}
.section-head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--gradient-brand);
}
.section-head.centered { text-align: center; }
.section-head.centered::after { left: 50%; transform: translateX(-50%); }

.eyebrow {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Device frame — house bezel for 9:16 portrait video
   -------------------------------------------------------------------------- */
.device-frame {
    position: relative;
    max-width: 380px;
    margin: 0 auto var(--space-8);
    padding: 10px;
    border-radius: calc(var(--radius-xl) + 10px);
    background:
        linear-gradient(145deg, #3a3a44 0%, #17171c 55%, #26262e 100%);
    box-shadow: var(--shadow-lg);
}
.device-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
.device-frame video {
    width: 100%;
    display: block;
    border-radius: var(--radius-xl);
    background: #000;
    aspect-ratio: 9 / 16;
}

/* --------------------------------------------------------------------------
   FAQ / disclosure
   -------------------------------------------------------------------------- */
details.faq-item {
    background: var(--bg-card);
    border: var(--outline-width) solid var(--border);
    border-radius: var(--radius);
    margin-bottom: var(--space-2);
    transition: border-color var(--transition-fast);
}
details.faq-item:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
details.faq-item summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    font-weight: 700;
    color: var(--text);
    list-style: none;
    border-radius: var(--radius);
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::before {
    content: "";
    flex-shrink: 0;
    width: 0.6em;
    height: 0.6em;
    border-right: 3px solid var(--accent);
    border-bottom: 3px solid var(--accent);
    border-radius: 1px;
    transform: rotate(-45deg);
    transition: transform var(--transition-base);
}
details.faq-item[open] summary::before { transform: rotate(45deg); }
details.faq-item .answer {
    padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) + 0.6em + var(--space-2));
    color: var(--text-muted);
    line-height: 1.6;
}
details.faq-item .answer p { margin-bottom: var(--space-2); }

/* Checkmark lists (plans, safety) */
.check-list { list-style: none; padding: 0; }
.check-list li {
    padding: 0.45rem 0 0.45rem 1.7rem;
    position: relative;
    color: var(--text-muted);
    line-height: 1.5;
}
.check-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--accent-5);
    font-weight: 900;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
select, input, textarea {
    padding: 0.55rem 0.75rem;
    border: var(--outline-width) solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    transition: border-color var(--transition-fast);
}
select:focus, input:focus, textarea:focus { border-color: var(--accent); }

.form-card { padding: var(--space-6); }
.form-card .form-field { margin-bottom: var(--space-4); }
.form-card label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-1);
}
.form-card input, .form-card select, .form-card textarea { width: 100%; }
.form-card .btn { width: 100%; }
.form-error { color: #B53A4E; font-size: var(--text-sm); margin-top: var(--space-1); }
[data-theme="dark"] .form-error { color: #F49CAB; }
.form-help { color: var(--text-muted); font-size: var(--text-xs); margin-top: var(--space-1); }

.auth-panel { max-width: 440px; margin: var(--space-8) auto; }
.auth-panel > h1 { text-align: center; }
.auth-panel > p { text-align: center; color: var(--text-muted); margin-bottom: var(--space-6); }
.auth-panel .auth-alt {
    text-align: center;
    margin-top: var(--space-4);
    color: var(--text-muted);
}

.filters {
    margin-bottom: var(--space-4);
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}

/* Alerts / flash messages */
.alert {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent-2);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
}
.alert p { margin: 0; }
.alert-error { border-left-color: #B53A4E; }
.alert-error p { color: #B53A4E; }
[data-theme="dark"] .alert-error p { color: #F49CAB; }
.alert-success { border-left-color: var(--accent-5); }

/* --------------------------------------------------------------------------
   App store badges
   -------------------------------------------------------------------------- */
.app-links {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
    margin-top: var(--space-4);
}
.app-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 175px;
    padding: 0.7rem 1.1rem;
    background: var(--bg-card);
    color: var(--text);
    text-decoration: none;
    border: var(--outline-width) solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
    line-height: 1.15;
    transition: border-color var(--transition-fast), transform var(--transition-base), box-shadow var(--transition-base);
}
.app-badge:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.app-badge svg { flex-shrink: 0; width: 26px; height: 26px; }
.app-badge .badge-text { display: flex; flex-direction: column; align-items: flex-start; }
.app-badge .eyebrow { margin-bottom: 0.1rem; }
.app-badge .label {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: 800;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--bg-subtle);
    border-top: 1px solid var(--border);
    margin-top: var(--space-16);
}
.footer-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--space-10) var(--space-4) var(--space-6);
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.2fr;
    gap: var(--space-8);
    align-items: start;
}
.footer-brand img { height: 56px; width: auto; margin-bottom: var(--space-2); }
.footer-brand p { color: var(--text-muted); font-size: var(--text-sm); max-width: 30ch; }
.footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--text-sm);
    width: fit-content;
}
.footer-links a:hover { color: var(--accent); }
.footer-apps > p { margin-bottom: var(--space-2); }
.footer-apps .app-links { justify-content: flex-start; margin-top: 0; }
.footer-note {
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--space-4);
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-subtle);
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.pagination {
    margin-top: var(--space-6);
    display: flex;
    gap: var(--space-3);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.pagination .page-info { color: var(--text-muted); font-size: var(--text-sm); }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .footer-apps { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    h1 { font-size: var(--text-2xl); }
    h2 { font-size: var(--text-xl); }
    .brand img { height: 32px; }
    .nav-inner { gap: var(--space-1); }
    .nav-inner a:not(.brand) { padding: 0.3rem 0.55rem; }
    .footer-inner { grid-template-columns: 1fr; gap: var(--space-6); }
    .app-badge { width: 100%; min-width: 0; justify-content: center; }
    .confetti { display: none; }
}

/* --------------------------------------------------------------------------
   Reduced motion — clamp every animation/transition
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
    .site-header, .staff-subnav, .site-footer, .theme-toggle,
    .btn, .app-links, .confetti, .page-glow { display: none !important; }
    body { background: #fff; color: #000; }
    a { color: #000; text-decoration: underline; }
}