/* ==========================================================================
   Global Styles & Variables
   ========================================================================== */
:root {
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --secondary-color: #f8fafc;
    --text-main: #0f172a;
    --text-light: #475569;
    --bg-main: #ffffff;
    --gradient-start: #0f172a;
    --gradient-end: #3b82f6;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ==========================================================================
   Navbar Elements
   ========================================================================== */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

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

.nav-links a {
    text-decoration: none;
    color: var(--text-main);
    font-weight: 500;
    transition: color 0.3s;
}

.nav-links a:hover, .nav-links a.active {
    color: var(--primary-color);
    font-weight: 600;
}

.github-link {
    display: flex;
    align-items: center;
    gap: 8px;
}

.github-link svg {
    transition: fill 0.3s ease, transform 0.3s ease;
}

.github-link:hover svg {
    fill: var(--primary-color);
    transform: translateY(-2px);
}

/* ==========================================================================
   Modern Hero Section
   ========================================================================== */
.hero {
    position: relative;
    padding: 8rem 5% 4rem 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: radial-gradient(circle at 50% 0%, rgba(224, 231, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
}

.hero-bg-grid {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: -1;
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}

/* Badge Styling */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.05);
    border: 1px solid rgba(37, 99, 235, 0.2);
    color: var(--primary-color);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.05);
}

.badge-pulse {
    width: 8px;
    height: 8px;
    background-color: var(--primary-color);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

/* Hero Typography */
.hero-content {
    max-width: 800px;
    margin: 0 auto 4rem auto;
    z-index: 2;
}

.gradient-text {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-content p {
    font-size: 1.25rem;
    color: var(--text-light);
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Buttons */
.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.875rem 1.75rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
}

.primary-btn {
    background: linear-gradient(180deg, var(--primary-color) 0%, #1e40af 100%);
    color: white;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.secondary-btn {
    background-color: white;
    color: var(--text-main);
    border: 1px solid rgba(226, 232, 240, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.secondary-btn:hover {
    border-color: #cbd5e1;
    background-color: #f8fafc;
    transform: translateY(-2px);
}

/* Desktop App Mockup */
.app-mockup-container {
    width: 100%;
    max-width: 1000px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0,0,0,0.02);
    overflow: hidden;
    z-index: 2;
    transition: transform 0.5s ease;
}

.app-mockup-container:hover {
    transform: translateY(-8px); 
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0,0,0,0.02);
}

.app-mockup-header {
    background: #f1f5f9;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.mockup-dots {
    display: flex;
    gap: 6px;
}

.mockup-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.mockup-dots span:nth-child(1) { background: #ff5f56; }
.mockup-dots span:nth-child(2) { background: #ffbd2e; }
.mockup-dots span:nth-child(3) { background: #27c93f; }

.mockup-title {
    flex-grow: 1;
    text-align: center;
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
    margin-right: 48px;
}

.app-mockup-body {
    width: 100%;
    background: #fafafa;
    display: block; 
}

.mockup-screenshot {
    width: 100%;
    height: auto;
    display: block;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.mockup-placeholder {
    text-align: center;
    color: #94a3b8;
    font-weight: 500;
}

/* ==========================================================================
   Features Section (Analyzer Cards)
   ========================================================================== */
.features {
    padding: 6rem 5%;
    background-color: #f8fafc;
    text-align: center;
}

.features h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 4rem;
    letter-spacing: -0.025em;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.feature-card {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 24px;
    border: 1px solid rgba(226, 232, 240, 0.6);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-align: left;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
    border-color: rgba(37, 99, 235, 0.15);
}

.card-content {
    padding: 2.5rem 2.5rem 1.5rem 2.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-content h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 1rem;
}

.card-content p {
    color: #64748b;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 0;
}

.card-banner {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    margin-top: auto;
    padding: 0 1.5rem 1.5rem 1.5rem;
    background-color: transparent;
    transition: transform 0.5s ease;
}

.feature-card:hover .card-banner {
    transform: scale(1.02);
}

/* ==========================================================================
   Documentation Full-Screen Layout
   ========================================================================== */
.docs-body {
    overflow: hidden; 
}

.docs-navbar {
    height: 70px;
}

.docs-layout {
    display: flex;
    height: calc(100vh - 70px); 
    width: 100%;
    background-color: var(--bg-main);
}

.docs-sidebar {
    width: 280px;
    flex-shrink: 0;
    background-color: #f8fafc;
    border-right: 1px solid #e2e8f0;
    padding: 2rem 1.5rem;
    overflow-y: auto;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   Accordion Sidebar Styles
   ========================================================================== */
.sidebar-section {
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}

.sidebar-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    color: #0f172a;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    padding: 0.75rem 0.5rem;
    cursor: pointer;
    text-align: left;
    transition: color 0.2s;
}

.sidebar-toggle:hover {
    color: var(--primary-color);
}

.sidebar-toggle .chevron {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.sidebar-section .sidebar-links {
    display: none;
    padding-bottom: 1rem;
    margin-top: 0;
    list-style: none; /* Removes the black dot */
    padding-left: 0;  /* Removes default browser indentation */
}

.sidebar-section.open .sidebar-links {
    display: block;
}

.sidebar-section.open .sidebar-toggle .chevron {
    transform: rotate(180deg);
}

/* ==========================================
   *MISSING BLOCK RESTORED HERE*
   Sidebar Link Styling & Active States
   ========================================== */
.sidebar-links a {
    display: block;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border-left: 3px solid transparent; 
    border-radius: 0 6px 6px 0;
    text-decoration: none;
    color: var(--text-light);
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s;
}

.sidebar-links a:hover {
    background-color: #e2e8f0;
    color: var(--primary-color);
}

.sidebar-links a.active {
    background-color: #eff6ff; 
    color: var(--primary-color);
    font-weight: 600;
    border-left-color: var(--primary-color); 
}

/* ==========================================================================
   Sidebar Footer Links — small plain-text row (Privacy Policy, License,
   Disclaimer, Contact) pinned below every collapsible sidebar section.
   Deliberately not an accordion/section: just small, quiet inline text
   links, the way a page footer usually presents legal links.
   ========================================================================== */
.sidebar-footer-links {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.35rem;
}

.sidebar-footer-links a {
    font-size: 0.78rem;
    font-weight: 500;
    color: #94a3b8;
    text-decoration: none;
    padding: 0.15rem 0;
    transition: color 0.2s;
}

.sidebar-footer-links a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.sidebar-footer-links a.active {
    color: var(--primary-color);
    font-weight: 600;
}

.sidebar-footer-sep {
    color: #cbd5e1;
    font-size: 0.78rem;
    margin: 0 0.4rem;
}

/* ==========================================================================
   Standalone Sidebar Button (e.g. "Video Tutorials")
   Used for a top-level sidebar entry with no dropdown/sub-links — just a
   single, directly-clickable, button-styled link. Rendered by script.js's
   renderSidebar() when a SIDEBAR_SECTIONS entry has isButton: true.
   ========================================================================== */
.sidebar-section--button {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    border-bottom: none;
}

.sidebar-button-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 0.7rem 1rem;
    background: var(--primary-color);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-button-link:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.sidebar-button-link.active {
    background: var(--primary-hover);
}

.sidebar-button-link svg {
    flex-shrink: 0;
}

/* ==========================================================================
   Main Content Area
   ========================================================================== */
.docs-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 3rem 5%;
    scroll-behavior: smooth;
    transition: opacity 0.2s ease-in-out; 
}

.docs-content-inner {
    max-width: 850px;
    margin: 0 auto;
}

.docs-content h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #0f172a;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.docs-content h2 {
    font-size: 1.75rem;
    color: #0f172a;
    margin-top: 3rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
    font-weight: 700;
}

.docs-content p, .docs-content ul {
    color: var(--text-light);
    margin-bottom: 1.2rem;
    font-size: 1.05rem;
    line-height: 1.7;
}

.docs-content li {
    margin-bottom: 0.5rem;
    margin-left: 1.5rem;
}

.docs-content p code, .docs-content li code {
    background-color: #f1f5f9;
    color: #ef4444; 
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
}

/* ==========================================================================
   Modern Code Display Blocks
   ========================================================================== */
.code-window {
    background: #0f172a; 
    border-radius: 12px;
    margin: 2rem 0;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.code-header {
    background: #1e293b; 
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #334155;
}

.code-lang {
    color: #94a3b8;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.copy-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid #475569;
    color: #cbd5e1;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.copy-btn:hover {
    background: #334155;
    color: white;
    border-color: #64748b;
}

.copy-btn.copied {
    background: #10b981;
    border-color: #10b981;
    color: white;
}

.code-window pre {
    margin: 0;
    padding: 1.5rem;
    overflow-x: auto;
}

.code-window code {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    color: #e2e8f0;
    font-size: 0.95rem;
    line-height: 1.5;
    white-space: pre;
}

/* ==========================================================================
   Mobile Responsiveness for Documentation
   ========================================================================== */
.mobile-toggle-btn {
    display: none;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.5rem;
}

@media (max-width: 900px) {
    .docs-body {
        overflow: auto; 
    }
    
    .docs-layout {
        height: auto;
        display: block;
    }
    
    .mobile-toggle-btn {
        display: block; 
    }
    
    .docs-sidebar {
        position: fixed;
        top: 70px; 
        left: 0;
        bottom: 0;
        z-index: 50;
        box-shadow: 4px 0 15px rgba(0,0,0,0.05);
        transform: translateX(-100%); 
    }
    
    .docs-sidebar.show {
        transform: translateX(0); 
    }
    
    .docs-content {
        padding: 2rem 5%;
    }

    /* ---- Docs navbar responsiveness ----
       Previously this bar had no mobile rules at all: the logo, the
       hamburger button, and the Home/Docs/GitHub links were all fixed-size
       and laid out with a large gap, so on narrow viewports they'd
       overflow the bar or crush together. Shrink and tighten everything
       here instead. */
    .docs-navbar {
        height: auto;
        min-height: 60px;
        padding: 0.6rem 4%;
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .docs-navbar .logo-container {
        gap: 8px;
    }

    .docs-navbar .logo-img {
        height: 30px;
    }

    .docs-navbar .nav-links {
        gap: 1.1rem;
        flex-wrap: wrap;
    }

    .docs-navbar .nav-links a {
        font-size: 0.92rem;
    }

    /* Docs mobile view: show only the GitHub icon, no "GitHub" text
       label, at every mobile width (not just very small phones).
       Selector must be at least as specific as ".docs-navbar .nav-links a"
       above (2 classes + 1 element) or that rule's font-size wins instead
       and the text stays visible — hence "a.github-link" here, not just
       ".github-link". */
    .docs-navbar .nav-links a.github-link {
        gap: 0;
        font-size: 0;
    }

    .docs-navbar .github-link svg {
        width: 22px;
        height: 22px;
    }

    .docs-layout {
        /* Recompute against the now-variable navbar height instead of the
           hard-coded 70px used on desktop. */
        height: auto;
    }
}

@media (max-width: 480px) {
    .docs-navbar {
        padding: 0.55rem 3.5%;
    }

    .docs-navbar .logo-img {
        height: 26px;
    }

    .docs-navbar .nav-links {
        gap: 0.75rem;
    }

    .docs-navbar .nav-links a {
        font-size: 0.85rem;
    }

    .docs-navbar .github-link svg {
        width: 20px;
        height: 20px;
    }
}

/* ==========================================================================
   Institute Logo Banner
   ========================================================================== */
.institute-banner {
    background-color: #ffffff;
    padding: 4rem 5%;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    text-align: center;
}

.institute-banner h3 {
    font-size: 1rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 3.5rem;
    font-weight: 600;
}

.logo-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1.75rem;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
}

.logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    cursor: pointer;
    padding: 1.5rem 1.25rem;
    background-color: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 18px;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.02);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, border-color 0.3s ease;
}

.logo-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b; 
    transition: color 0.3s ease;
    text-align: center;
}

.logo-item:hover {
    transform: translateY(-6px);
    border-color: rgba(37, 99, 235, 0.25);
    box-shadow: 0 16px 30px -12px rgba(15, 23, 42, 0.12);
}

.logo-item:hover .lazy-wrap--logo img {
    transform: scale(1.08);
}

.logo-item:hover .logo-name {
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .logo-track {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 1.25rem;
    }
    .logo-item {
        padding: 1.1rem 1rem;
    }
    .lazy-wrap--logo {
        width: 120px;
        height: 56px;
    }
    .logo-name {
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   Modern Mega-Footer
   ========================================================================== */
.modern-footer {
    background-color: #0f172a; 
    color: #94a3b8;
    padding: 5rem 5% 2rem 5%;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 3rem;
    max-width: 1400px;
    margin: 0 auto;
    padding-bottom: 4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand .logo-container {
    margin-bottom: 1rem;
}

.footer-tagline {
    font-size: 1.05rem;
    color: #cbd5e1;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.footer-version {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(37, 99, 235, 0.2);
    color: #60a5fa;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
}

.footer-section h4 {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.footer-list {
    list-style: none;
    padding: 0;
}

.footer-list li {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Footer navigation columns. The mega-footer now links to the pages and
   sections of the site instead of repeating author names, emails and
   institution details — those are presented once each in the Contributors
   grid and the "In Collaboration With" banner on index.html. */
.footer-nav a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-nav a:hover {
    color: #60a5fa;
    text-decoration: underline;
}

.footer-bottom {
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 2rem;
    text-align: center;
    font-size: 0.9rem;
}

.footer-legal-links {
    margin-top: 0.75rem;
    font-size: 0.85rem;
}

.footer-legal-links a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-legal-links a:hover {
    color: #60a5fa;
    text-decoration: underline;
}

.footer-legal-links span {
    margin: 0 0.5rem;
    color: #475569;
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Pagination Navigation
   ========================================================================== */
.pagination-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 5rem;
    padding-top: 2rem;
    border-top: 2px solid #f1f5f9;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.75rem 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-light);
    font-weight: 600;
    transition: all 0.2s ease;
}

.nav-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: #eff6ff;
}

/* If you need to hide a button on the first or last page */
.nav-btn.hidden {
    visibility: hidden;
}

@media (max-width: 600px) {
    .pagination-nav {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ==========================================================================
   Documentation Page Components (figure placeholders, tables, formula
   blocks, note/tip boxes, in-page table of contents)
   Lives here — rather than in a per-page <style> tag — because the
   sidebar's AJAX router (see script.js loadPage()) only swaps out
   .docs-content-inner's HTML when navigating between docs pages; anything
   placed in an individual page's <head> would be lost on that kind of
   navigation. Putting it in style.css means it's loaded once and applies
   everywhere, on both hard loads and routed navigation.
   ========================================================================== */

.image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 220px;
    margin: 1.5rem 0;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    background-color: #f8fafc;
    color: #94a3b8;
    font-size: 0.9rem;
    text-align: center;
    padding: 1.5rem;
}

.image-placeholder .ph-icon {
    width: 36px;
    height: 36px;
    opacity: 0.6;
}

.image-placeholder .ph-caption {
    max-width: 560px;
    color: #64748b;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Filled figure — a real screenshot + caption, once an image is available.
   Kept separate from .image-placeholder (the dashed empty-state box) so a
   full-resolution screenshot is always constrained to the content column
   width instead of spilling past its container. */
.figure-block {
    margin: 1.5rem 0;
    text-align: center;
}

.figure-block img {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.06);
}

.figure-block .ph-caption {
    display: block;
    max-width: 640px;
    margin: 0.75rem auto 0 auto;
    color: #64748b;
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: center;
}

/* ---- Zoom-to-enlarge affordance on figure screenshots, plus a
   shimmering "skeleton" placeholder shown while each image loads
   (matches loading="lazy" — the shimmer covers the gap until the
   browser actually fetches the image, instead of a blank/white box) ---- */
.figure-img-wrap {
    position: relative;
    display: block;
    width: 100%;
    line-height: 0;
    min-height: 200px;
    border-radius: 12px;
    overflow: hidden;
    background-color: #e2e8f0;
}

.figure-img-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(90deg, #e2e8f0 25%, #eef2f6 37%, #e2e8f0 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
}

.figure-img-wrap img {
    position: relative;
    z-index: 1;
    cursor: zoom-in;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* script.js adds this class once the <img> fires its "load" event
   (or immediately, if it was already cached/complete) */
.figure-img-wrap.img-loaded {
    min-height: 0;
    background-color: transparent;
}

.figure-img-wrap.img-loaded::before {
    animation: none;
    content: none;
}

.figure-img-wrap.img-loaded img {
    opacity: 1;
}

@keyframes skeleton-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .figure-img-wrap::before {
        animation: none;
    }
}

/* ---- Generic shimmer-placeholder WRAPPER for images outside the docs
   .figure-img-wrap system (index.html hero screenshot, card banners,
   institute logos). This has to be a wrapper (not styling the <img>
   directly) because opacity on the <img> itself would hide its own
   background too — wrapping lets the real photo fade in over a
   background that keeps shimmering underneath, which is what makes the
   placeholder visible even when the image resolves almost instantly
   (e.g. already cached). Reuses the skeleton-shimmer keyframes above. ---- */
.lazy-wrap {
    position: relative;
    overflow: hidden;
    display: block;
    background-color: #e2e8f0;
}

.lazy-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(90deg, #e2e8f0 25%, #eef2f6 37%, #e2e8f0 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
}

.lazy-wrap img {
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.lazy-wrap.img-loaded {
    background-color: transparent;
}

.lazy-wrap.img-loaded::before {
    animation: none;
    content: none;
}

.lazy-wrap.img-loaded img {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .lazy-wrap::before {
        animation: none;
    }
}

/* Sizing per usage context — the wrapper needs a placeholder size
   before the image's real dimensions are known */
.lazy-wrap--hero {
    width: 100%;
    min-height: 320px;
    border-radius: 0 0 16px 16px;
}
.lazy-wrap--hero.img-loaded {
    min-height: 0;
}

.lazy-wrap--banner {
    width: 100%;
    min-height: 160px;
    margin-top: auto;
    background-color: #eef2f6;
}
.lazy-wrap--banner::before {
    background-image: linear-gradient(90deg, #eef2f6 25%, #f8fafc 37%, #eef2f6 63%);
}
.lazy-wrap--banner.img-loaded {
    min-height: 0;
    background-color: transparent;
}

.lazy-wrap--logo {
    display: inline-flex;
    width: 150px;
    height: 68px;
    border-radius: 8px;
}
.lazy-wrap--logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.4s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.figure-zoom-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background-color: rgba(15, 23, 42, 0.55);
    color: #ffffff;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.figure-img-wrap:hover .figure-zoom-btn,
.figure-zoom-btn:focus-visible {
    opacity: 1;
    transform: translateY(0);
}

.figure-zoom-btn:hover {
    background-color: rgba(37, 99, 235, 0.9);
}

/* Always show the button on touch/small screens, since :hover doesn't apply */
@media (max-width: 900px) {
    .figure-zoom-btn {
        opacity: 1;
        transform: none;
    }
}

/* ---- Full-screen lightbox (built dynamically by script.js on first use) ---- */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background-color: rgba(8, 11, 20, 0.92);
    z-index: 1000;
    cursor: zoom-out;
}

.lightbox-overlay.active {
    display: flex;
}

.lightbox-img {
    max-width: 92vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    cursor: default;
}

.lightbox-caption {
    max-width: 720px;
    margin-top: 1.25rem;
    color: #e2e8f0;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: center;
    cursor: default;
}

.lightbox-close {
    position: fixed;
    top: 24px;
    right: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.lightbox-close:hover {
    background-color: rgba(255, 255, 255, 0.24);
}

body.lightbox-open {
    overflow: hidden;
}

.docs-content h3 {
    font-size: 1.25rem;
    color: #0f172a;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.docs-content h4 {
    font-size: 1.02rem;
    color: #0f172a;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.docs-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0 1.75rem 0;
    font-size: 0.95rem;
}

/* Responsive tables — on narrow viewports, wide tables (in particular the
   multi-column Excel import format tables) would otherwise overflow the
   content column and get clipped. Instead of shrinking columns illegibly,
   let each table scroll horizontally within its own bounds. */
@media (max-width: 900px) {
    .docs-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .docs-content table th,
    .docs-content table td {
        white-space: nowrap;
    }

    .docs-content table.excel-meta-table {
        white-space: normal;
    }

    .docs-content table.excel-meta-table td {
        white-space: normal;
    }
}

.docs-content table th, .docs-content table td {
    border: 1px solid #e2e8f0;
    padding: 0.6rem 0.75rem;
    text-align: left;
    vertical-align: top;
    color: var(--text-light);
}

.docs-content table th {
    background-color: #f1f5f9;
    color: #0f172a;
    font-weight: 700;
}

/* ---- Excel/CSV import format tables (Load Excel section) ----
   Colours mirror the in-app "Accepted Excel Formats" dialog
   (workspace_header.py): required columns are red-tinted, optional
   columns are neutral slate-tinted, so a reader can tell at a glance
   which columns their spreadsheet absolutely needs. */
.excel-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0 0 1.25rem 0;
    font-size: 0.88rem;
    color: var(--text-light);
}

.excel-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.excel-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
}

.excel-swatch.req {
    background-color: #fee2e2;
    border: 1px solid #fca5a5;
}

.excel-swatch.opt {
    background-color: #f1f5f9;
    border: 1px solid #cbd5e1;
}

.docs-content table.excel-format-table {
    margin: 0.75rem 0 1rem 0;
}

.docs-content table.excel-format-table th {
    background-color: #f1f5f9;
    color: #475569;
    font-size: 0.85rem;
}

.docs-content table.excel-format-table th.req {
    background-color: #fee2e2;
    color: #991b1b;
}

.docs-content table.excel-format-table td.opt {
    background-color: #f8fafc;
    color: #64748b;
}

.docs-content table.excel-format-table td.req {
    background-color: #fef2f2;
    color: #7f1d1d;
    font-weight: 600;
}

.docs-content table.excel-meta-table {
    margin: 0 0 1.75rem 0;
    font-size: 0.9rem;
}

.docs-content table.excel-meta-table th {
    width: 110px;
    background-color: #ffffff;
    color: #94a3b8;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    border-right: none;
}

.docs-content table.excel-meta-table td {
    background-color: #ffffff;
}

.docs-content .formula-block {
    background-color: #0f172a;
    color: #e2e8f0;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.92rem;
    overflow-x: auto;
    white-space: pre;
}

.docs-content .note-box, .docs-content .tip-box {
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
    font-size: 0.98rem;
}

.docs-content .note-box {
    background-color: #fff7ed;
    border: 1px solid #fed7aa;
    color: #7c2d12;
}

.docs-content .tip-box {
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
}

.docs-content .step-list li { margin-bottom: 0.9rem; }

/* In-page Table of Contents box.
   Explicitly resets list-style/margins here because the generic
   `.docs-content li` rule earlier in this file adds a disc bullet and a
   1.5rem left margin to every <li> — without this override the TOC shows
   a bullet dot in front of each entry. */
.toc-box {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0 2rem 0;
}

.toc-box p {
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: #0f172a;
}

.toc-box ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.toc-box li {
    list-style: none;
    margin: 0 0 0.45rem 0;
    padding-left: 0;
}

.toc-box a {
    color: var(--primary-color);
    text-decoration: none;
}

.toc-box a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Academic citation system (author–date / Harvard, journal style)
   In-text citations are hyperlinks into the page's alphabetical reference
   list, e.g.
       <a class="cite" href="#ref-mardia2000">(Mardia and Jupp, 2000)</a>
   resolving to
       <li id="ref-mardia2000">Mardia, K. V., &amp; Jupp, P. E. (2000). ...</li>
   inside <ul class="ref-list">. Author–date was chosen over numbered
   citations so entries can be added to any page without renumbering every
   marker, and because it matches the reference style of the structural-geology
   journals this documentation is written for.
   ========================================================================== */
.docs-content a.cite {
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 1px dotted rgba(37, 99, 235, 0.55);
    white-space: nowrap;
}

.docs-content a.cite:hover {
    text-decoration: none;
    border-bottom-style: solid;
}

/* Superscript numeric markers, used only where an inline author–date
   citation would break a table cell or a formula caption. */
.docs-content sup.cite-sup {
    font-size: 0.72em;
    line-height: 0;
    vertical-align: super;
    white-space: nowrap;
    margin-left: 1px;
}

.docs-content sup.cite-sup a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

/* Alphabetical reference list with hanging indent, as in a journal
   reference section. Resets the generic `.docs-content li` disc bullet. */
.docs-content ul.ref-list {
    list-style: none;
    margin: 1rem 0 0 0;
    padding: 0;
    font-size: 0.94rem;
    line-height: 1.65;
}

.docs-content ul.ref-list li {
    list-style: none;
    margin: 0 0 0.75rem 0;
    padding: 0 0 0 2.2rem;
    text-indent: -2.2rem;   /* hanging indent: continuation lines indent */
}

/* Highlight the entry a reader has just jumped to from an in-text citation */
.docs-content ul.ref-list li:target {
    border-radius: 8px;
    background-color: rgba(37, 99, 235, 0.09);
    box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.09);
}

/* "How to cite this page / software" block placed under References */
.docs-content .cite-box {
    border: 1px solid #e2e8f0;
    border-left: 3px solid var(--primary-color);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0 0 0;
    background-color: #f8fafc;
    font-size: 0.92rem;
}

.docs-content .cite-box p { margin: 0 0 0.45rem 0; }
.docs-content .cite-box p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Top Loading Progress Bar
   Shown during AJAX-routed doc navigation (see script.js loadPage()).
   Sits above everything, including the sticky navbar.
   ========================================================================== */
.yt-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    z-index: 2000;
    background: linear-gradient(90deg, var(--gradient-end) 0%, var(--primary-color) 60%, #60a5fa 100%);
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.6), 0 0 3px rgba(37, 99, 235, 0.8);
    border-radius: 0 2px 2px 0;
    opacity: 0;
    pointer-events: none;
    transition: width 0.3s ease-out, opacity 0.25s ease;
}

/* ========================================================================== 
   FracSTAT Presentation Theme

   Shared visual language for the landing page and every documentation page.
   The palette, rounded panels, mono labels, and dark navigation deliberately
   mirror the companion presentation while the existing docs components keep
   their familiar reading-focused behaviour.
   ========================================================================== */
:root {
    --ink: #0d1310;
    --ink-2: #161f19;
    --ink-3: #212c24;
    --stone: #f5f1e4;
    --stone-2: #ebe3cd;
    --paper: #fbf9f2;
    --text: #1b241e;
    --muted: #5c6a5d;
    --muted-light: #8fa08f;
    --rust: #c1642f;
    --teal: #1f8577;
    --teal-light: #3aa896;
    --sage: #8a9a57;
    --border: rgba(17, 26, 18, 0.12);
    --border-dark: rgba(245, 241, 228, 0.14);

    /* ---- Download heatmap -------------------------------------------------
       The map panel stays light, like every other surface on the site: a pale
       sea-glass ocean with warm parchment land. The hue split between those two
       is what makes a country read as a shape, and the contrast on top of it
       comes from the heat ramp, whose six steps are all mid-tone so they work
       on this panel and on the cream rank card alike. --map-land is the colour
       of a country with no downloads yet; it is also the empty legend swatch,
       so both live here. The ocean is a shade deeper than the page cream on
       purpose — that is what gives the parchment land something to sit against
       (dE ~11) while both stay light, and the ink alphas below are set so all
       three still clear 4.5:1 against it. */
    --map-ocean: #c9e0d9;
    --map-land: #efece0;
    --map-border: rgba(13, 19, 16, 0.18);
    --map-border-strong: rgba(13, 19, 16, 0.34);
    --map-ink: #0d1310;
    --map-ink-soft: rgba(13, 19, 16, 0.72);
    --map-ink-faint: rgba(13, 19, 16, 0.64);

    /* ---- Download actions -------------------------------------------------
       One ember ramp for every "download FracSTAT" control (hero button,
       statistics CTA, modal submit). The light end is deliberately deep enough
       that the white label still clears WCAG AA at 4.7:1; the flat
       --rust -> #d4763f gradient this replaced reached only 3.1:1. */
    --ember-1: #ba5620;
    --ember-2: #a2451a;
    --ember-3: #88320f;
    --ember-glow: rgba(136, 50, 15, 0.28);
    --ember-glow-strong: rgba(136, 50, 15, 0.42);

    --primary-color: var(--teal);
    --primary-hover: #176b60;
    --secondary-color: var(--stone);
    --text-main: var(--text);
    --text-light: var(--muted);
    --bg-main: var(--paper);
    --gradient-start: var(--ink);
    --gradient-end: var(--teal);
    --display-font: "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
    --body-font: Inter, "Helvetica Neue", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --mono-font: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    font-family: var(--body-font);
    color: var(--text);
    background: var(--paper);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.028;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection {
    color: var(--stone);
    background: var(--rust);
}

:focus-visible {
    outline: 2px solid var(--teal-light);
    outline-offset: 3px;
}

/* Shared navigation ------------------------------------------------------- */
/* Native document transitions preserve the outgoing page until the next one
   is ready. Unsupported browsers simply keep normal link navigation. */
@view-transition {
    navigation: auto;
}

::view-transition-group(*) {
    animation-duration: 320ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(root) {
    animation: page-content-out 320ms ease both;
}

::view-transition-new(root) {
    animation: page-content-in 320ms ease both;
}

@keyframes page-content-out {
    to { opacity: 0; }
}

@keyframes page-content-in {
    from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

.navbar {
    view-transition-name: site-navbar;
    min-height: 76px;
    padding: 0 5%;
    background: rgba(13, 19, 16, 0.9);
    border-bottom: 1px solid var(--border-dark);
    box-shadow: 0 8px 28px rgba(13, 19, 16, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.logo-container {
    gap: 0;
}

.logo-img {
    width: auto;
    height: 38px;
    filter: brightness(0) invert(1);
}

.navbar .logo-img {
    view-transition-name: site-logo;
}

.navbar .nav-links {
    view-transition-name: site-links;
}

.nav-links {
    gap: 0.3rem;
}

.nav-links a {
    position: relative;
    padding: 0.55rem 0.82rem;
    border-radius: 999px;
    color: #aebbae;
    font-family: var(--mono-font);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.24s ease, background-color 0.24s ease;
}

.nav-links a::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 2px;
    left: 14px;
    height: 1px;
    background: var(--rust);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.28s ease;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--stone);
    background: rgba(255, 255, 255, 0.06);
    font-weight: 600;
}

.nav-links a.active::after {
    transform: scaleX(1);
}

.github-link {
    gap: 0.45rem;
}

.github-link svg,
.github-link:hover svg {
    fill: currentColor;
    transform: none;
}

/* Landing page ------------------------------------------------------------ */
.hero {
    min-height: 100vh;
    padding: 8.8rem 5% 6rem;
    background:
        radial-gradient(ellipse 58% 46% at 88% 14%, rgba(31, 133, 119, 0.12), transparent),
        radial-gradient(ellipse 50% 42% at 8% 80%, rgba(193, 100, 47, 0.08), transparent),
        var(--stone);
}

.hero-bg-grid {
    z-index: 0;
    opacity: 0.8;
    background-image: linear-gradient(rgba(17, 26, 18, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 26, 18, 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, black 35%, transparent 88%);
    -webkit-mask-image: linear-gradient(to bottom, black 35%, transparent 88%);
}

.hero-content {
    max-width: 760px;
    margin: 0 auto 3.5rem;
}

.badge {
    padding: 0.43rem 0.85rem;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.56);
    color: var(--ink-2);
    box-shadow: 0 6px 18px rgba(13, 19, 16, 0.05);
    font-family: var(--mono-font);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.badge-pulse {
    width: 6px;
    height: 6px;
    background: var(--rust);
    box-shadow: 0 0 0 0 rgba(193, 100, 47, 0.45);
}

.gradient-text {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
    color: var(--ink);
    background: linear-gradient(100deg, var(--ink) 20%, var(--teal) 92%);
    -webkit-text-fill-color: transparent;
    font-family: var(--display-font);
    font-size: clamp(2.7rem, 5.5vw, 4.75rem);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 1.02;
}

.hero-content p {
    max-width: 610px;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.75;
}

.hero-buttons {
    gap: 0.75rem;
}

.btn {
    min-height: 48px;
    padding: 0 1.35rem;
    border-radius: 999px;
    font-family: var(--mono-font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* The download action. Deep ember with a top sheen, so it reads as a lit
   button rather than a flat orange slab, plus a rim that keeps the edge crisp
   on the cream page. */
.primary-btn {
    background: linear-gradient(160deg, var(--ember-1) 0%, var(--ember-2) 55%, var(--ember-3) 100%);
    color: #fff;
    box-shadow:
        0 14px 30px var(--ember-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 0 0 1px rgba(106, 38, 10, 0.35);
}

.primary-btn:hover {
    background: linear-gradient(160deg, #c96229 0%, var(--ember-2) 55%, var(--ember-3) 100%);
    box-shadow:
        0 18px 38px var(--ember-glow-strong),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 0 0 1px rgba(106, 38, 10, 0.4);
}

.primary-btn:active {
    transform: translateY(0);
    box-shadow:
        0 8px 18px var(--ember-glow),
        inset 0 2px 6px rgba(60, 20, 5, 0.35);
}

/* Focus is a solid ink ring — 16.6:1 against the cream page and 3.4:1 against
   the button itself, so it is unmissable from either side. */
.primary-btn:focus-visible,
.secondary-btn:focus-visible,
.download-stats-cta:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

/* A solid white surface with a teal hover: the pair to the ember button
   without competing with it. */
.secondary-btn {
    border-color: rgba(17, 26, 18, 0.18);
    background: #fff;
    color: var(--ink);
    box-shadow: 0 2px 8px rgba(13, 19, 16, 0.06);
}

.secondary-btn:hover {
    border-color: var(--teal);
    background: #fff;
    color: var(--teal);
    box-shadow: 0 6px 16px rgba(31, 133, 119, 0.16);
}

.app-mockup-container {
    max-width: 1050px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--paper);
    box-shadow: 0 30px 70px rgba(13, 19, 16, 0.16);
}

.app-mockup-container:hover {
    box-shadow: 0 36px 78px rgba(13, 19, 16, 0.2);
}

.app-mockup-header {
    padding: 0.75rem 1rem;
    border-bottom-color: var(--border);
    background: var(--ink-2);
}

.mockup-title {
    margin-right: 48px;
    color: #aebbae;
    font-family: var(--mono-font);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-mockup-body {
    background: var(--paper);
}

.lazy-wrap,
.figure-img-wrap {
    background-color: var(--stone-2);
}

.lazy-wrap::before,
.figure-img-wrap::before {
    background-image: linear-gradient(90deg, var(--stone-2) 25%, #f7f3e7 37%, var(--stone-2) 63%);
}

.features {
    padding: 6.5rem 5%;
    background: var(--paper);
}

.features h2 {
    margin-bottom: 3.1rem;
    color: var(--ink);
    font-family: var(--display-font);
    font-size: clamp(2rem, 4vw, 2.8rem);
    letter-spacing: -0.04em;
}

.feature-grid {
    max-width: 1180px;
    gap: 1.25rem;
}

.feature-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--paper);
    box-shadow: 0 1px 2px rgba(13, 19, 16, 0.04);
}

.feature-card::before {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--rust), #d4763f);
}

.feature-card:nth-child(2)::before {
    background: linear-gradient(90deg, var(--teal), var(--teal-light));
}

.feature-card:nth-child(3)::before {
    background: linear-gradient(90deg, var(--sage), #a7b879);
}

.feature-card:hover {
    border-color: transparent;
    box-shadow: 0 28px 56px rgba(13, 19, 16, 0.11);
}

.feature-card .card-content {
    padding: 1.7rem 1.65rem 1.3rem;
}

.feature-card h3 {
    color: var(--ink);
    font-family: var(--display-font);
    font-size: 1.35rem;
    letter-spacing: -0.02em;
}

.feature-card p {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.7;
}

.card-banner {
    padding: 0 1.35rem 1.35rem;
}

.institute-banner {
    padding: 6rem 5%;
    border-color: var(--border);
    background:
        radial-gradient(ellipse 52% 42% at 88% 14%, rgba(31, 133, 119, 0.08), transparent),
        var(--stone);
}

.institute-banner h3 {
    color: var(--rust);
    font-family: var(--mono-font);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
}

.logo-track {
    max-width: 1180px;
    gap: 1.15rem;
}

.logo-item {
    border-color: var(--border);
    border-radius: 16px;
    background: rgba(251, 249, 242, 0.82);
    box-shadow: 0 1px 2px rgba(13, 19, 16, 0.04);
}

.logo-item:hover {
    border-color: rgba(31, 133, 119, 0.4);
    box-shadow: 0 20px 38px rgba(13, 19, 16, 0.1);
}

.logo-name {
    color: var(--muted);
    font-family: var(--mono-font);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.logo-item:hover .logo-name {
    color: var(--teal);
}

/* Contributors ------------------------------------------------------------
   Ported from the companion Presentation page so the landing page credits
   the team with the same card, ring-hover and staggered-reveal treatment.
   Avatar placeholders piggyback on the existing .lazy-wrap shimmer system
   (see the .lazy-wrap rules above and script.js section 3b) rather than
   introducing a second image-loading mechanism. */
.contributors {
    position: relative;
    overflow: hidden;
    padding: 6.5rem 5%;
    background:
        radial-gradient(ellipse 55% 45% at 85% 10%, rgba(31, 133, 119, 0.07), transparent),
        radial-gradient(ellipse 50% 40% at 8% 90%, rgba(193, 100, 47, 0.06), transparent),
        var(--stone);
}

.contributors-head {
    position: relative;
    z-index: 1;
    margin-bottom: 2.75rem;
    text-align: center;
}

.contributors-head small {
    color: var(--rust);
    font-family: var(--mono-font);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.contributors-head h2 {
    margin-top: 0.7rem;
    color: var(--ink);
    font-family: var(--display-font);
    font-weight: 800;
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    letter-spacing: -0.03em;
}

.contributors-head p {
    max-width: 560px;
    margin: 0.85rem auto 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.7;
}

.contributor-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75rem 1.25rem;
    max-width: 1180px;
    margin: 0 auto;
}

.contributor {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    padding: 1.9rem 1.25rem 1.75rem;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--paper);
    box-shadow: 0 1px 2px rgba(13, 19, 16, 0.04);
    text-align: center;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.2, 0.7, 0.3, 1),
                border-color 0.4s ease;
}

.contributor:hover {
    transform: translateY(-8px);
    border-color: transparent;
    box-shadow: 0 26px 52px rgba(13, 19, 16, 0.12);
}

.contributor-avatar-wrap {
    position: relative;
    width: 104px;
    height: 104px;
    margin: 0 auto 1.15rem;
}

/* Conic gradient ring: idle-paused so it only spins while hovered. */
.contributor-ring {
    position: absolute;
    inset: -5px;
    z-index: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--rust), var(--teal), var(--sage), var(--rust));
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: contributor-ring-spin 6s linear infinite;
    animation-play-state: paused;
}

.contributor:hover .contributor-ring {
    opacity: 1;
    animation-play-state: running;
}

@keyframes contributor-ring-spin {
    to { transform: rotate(360deg); }
}

.contributor-avatar {
    position: relative;
    z-index: 1;
    width: 104px;
    height: 104px;
    border: 3px solid var(--paper);
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(13, 19, 16, 0.1);
}

.contributor-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.contributor:hover .contributor-avatar img {
    transform: scale(1.08);
}

.contributor h4 {
    margin-bottom: 0.4rem;
    color: var(--ink);
    font-family: var(--display-font);
    font-weight: 700;
    font-size: 0.91rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.contributor-role {
    color: var(--teal);
    font-family: var(--mono-font);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.contributor-affil {
    margin-top: 0.58rem;
    padding-top: 0.58rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.55;
}

.contributor-email {
    display: inline-block;
    margin-top: 0.62rem;
    color: var(--rust);
    font-family: var(--mono-font);
    font-size: 0.63rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    word-break: break-all;
    transition: color 0.25s ease;
}

.contributor-email:hover {
    color: var(--teal);
}

/* Round shimmer placeholder for the avatars. */
.lazy-wrap--avatar {
    width: 104px;
    height: 104px;
    border-radius: 50%;
}

/* Scroll reveal (see script.js) — shared by the home-page sections. */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.show {
    opacity: 1;
    transform: translateY(0);
    transition-delay: var(--delay, 0s);
}

.contributor-grid .contributor:nth-child(1) { --delay: 0s; }
.contributor-grid .contributor:nth-child(2) { --delay: 0.06s; }
.contributor-grid .contributor:nth-child(3) { --delay: 0.12s; }
.contributor-grid .contributor:nth-child(4) { --delay: 0.18s; }
.contributor-grid .contributor:nth-child(5) { --delay: 0.24s; }
.contributor-grid .contributor:nth-child(6) { --delay: 0.3s; }
.contributor-grid .contributor:nth-child(7) { --delay: 0.36s; }
.contributor-grid .contributor:nth-child(8) { --delay: 0.42s; }

/* Stagger each repeated group while keeping section headings immediate. */
.feature-grid .feature-card:nth-child(1),
.logo-track .logo-item:nth-child(1),
.footer-grid > :nth-child(1) { --delay: 0s; }

.feature-grid .feature-card:nth-child(2),
.logo-track .logo-item:nth-child(2),
.footer-grid > :nth-child(2) { --delay: 0.07s; }

.feature-grid .feature-card:nth-child(3),
.logo-track .logo-item:nth-child(3),
.footer-grid > :nth-child(3) { --delay: 0.14s; }

.logo-track .logo-item:nth-child(4),
.footer-grid > :nth-child(4) { --delay: 0.21s; }

.logo-track .logo-item:nth-child(5) { --delay: 0.28s; }
.logo-track .logo-item:nth-child(6) { --delay: 0.35s; }

@media (max-width: 900px) {
    .contributor-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 520px;
    }
}

@media (max-width: 480px) {
    .contributor-avatar-wrap,
    .contributor-avatar,
    .lazy-wrap--avatar {
        width: 88px;
        height: 88px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contributor,
    .contributor-avatar img,
    .contributor-ring {
        transition: none;
        animation: none !important;
    }

    .contributor:hover {
        transform: none;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


.modern-footer {
    padding: 4.5rem 5% 1.8rem;
    border-top-color: var(--border-dark);
    background: var(--ink-2);
    color: #93a196;
}

.footer-grid {
    max-width: 1180px;
    border-bottom-color: var(--border-dark);
}

.footer-brand .logo-img {
    height: 34px;
}

.footer-tagline {
    color: #b1beb1;
    font-size: 0.94rem;
}

.footer-version {
    border-radius: 999px;
    background: rgba(31, 133, 119, 0.16);
    color: var(--teal-light);
    font-family: var(--mono-font);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.footer-section h4 {
    color: var(--stone);
    font-family: var(--mono-font);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.footer-list li,
.footer-nav a,
.footer-legal-links a {
    color: #93a196;
}

.footer-nav a:hover,
.footer-legal-links a:hover {
    color: var(--teal-light);
}

/* Documentation shell ----------------------------------------------------- */
.docs-body {
    background: var(--stone);
}

.docs-navbar {
    height: 76px;
}

.docs-layout {
    height: calc(100vh - 76px);
    background:
        radial-gradient(ellipse 60% 50% at 92% 6%, rgba(31, 133, 119, 0.06), transparent),
        var(--stone);
}

.docs-sidebar {
    width: 296px;
    padding: 1.45rem 1rem 1.25rem;
    border-right-color: var(--border);
    background: rgba(235, 227, 205, 0.78);
    box-shadow: 8px 0 26px rgba(13, 19, 16, 0.035);
}

.sidebar-section {
    margin-bottom: 0.4rem;
    border-bottom-color: rgba(17, 26, 18, 0.08);
}

.sidebar-toggle {
    padding: 0.75rem 0.65rem;
    color: var(--ink-2);
    font-family: var(--mono-font);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.sidebar-toggle:hover {
    color: var(--teal);
}

.sidebar-toggle .chevron {
    color: var(--muted);
}

.sidebar-section .sidebar-links {
    padding-bottom: 0.55rem;
}

.sidebar-links a {
    padding: 0.5rem 0.65rem 0.5rem 0.95rem;
    border-left: 2px solid transparent;
    border-radius: 7px;
    color: #526154;
    font-size: 0.83rem;
    font-weight: 500;
}

.sidebar-links a:hover {
    color: var(--teal);
    background: rgba(255, 255, 255, 0.52);
}

.sidebar-links a.active {
    border-left-color: var(--rust);
    background: rgba(255, 255, 255, 0.75);
    color: var(--ink);
    font-weight: 700;
}

.sidebar-section--button {
    margin-top: 0.8rem;
    padding-top: 0.9rem;
    border-top-color: var(--border);
}

.sidebar-button-link {
    border-radius: 999px;
    background: linear-gradient(135deg, var(--rust), #d4763f);
    box-shadow: 0 10px 22px rgba(193, 100, 47, 0.25);
    font-family: var(--mono-font);
    font-size: 0.67rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sidebar-button-link:hover,
.sidebar-button-link.active {
    background: linear-gradient(135deg, #ac5125, var(--rust));
    box-shadow: 0 13px 26px rgba(193, 100, 47, 0.33);
}

.sidebar-footer-links {
    padding: 1rem 0.45rem 0;
    border-top-color: var(--border);
}

.sidebar-footer-links a {
    color: var(--muted);
    font-family: var(--mono-font);
    font-size: 0.62rem;
}

.sidebar-footer-links a:hover,
.sidebar-footer-links a.active {
    color: var(--teal);
}

.sidebar-footer-sep {
    color: var(--muted-light);
}

.docs-content {
    padding: 3rem clamp(1.5rem, 5.5vw, 5rem);
}

.docs-content-inner {
    max-width: 910px;
    padding: clamp(1.5rem, 4vw, 3.25rem);
    border: 1px solid var(--border);
    border-radius: 20px;
    background: rgba(251, 249, 242, 0.88);
    box-shadow: 0 18px 50px rgba(13, 19, 16, 0.065);
}

.docs-content h1,
.docs-content h2,
.docs-content h3,
.docs-content h4 {
    color: var(--ink);
    font-family: var(--display-font);
}

.docs-content h1 {
    margin-bottom: 1.15rem;
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -0.045em;
    line-height: 1.08;
}

.docs-content h2 {
    margin-top: 3.25rem;
    margin-bottom: 1.15rem;
    padding-bottom: 0.8rem;
    border-bottom-color: var(--border);
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -0.03em;
}

.docs-content h3 {
    margin-top: 2.3rem;
    color: var(--teal);
    font-size: 1.28rem;
    letter-spacing: -0.02em;
}

.docs-content h4 {
    color: var(--ink-2);
}

.docs-content p,
.docs-content ul,
.docs-content ol {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.78;
}

.docs-content li::marker {
    color: var(--rust);
}

.docs-content a:not(.nav-btn):not(.figure-zoom-btn) {
    color: var(--teal);
    text-decoration-color: rgba(31, 133, 119, 0.35);
    text-underline-offset: 0.16em;
}

.docs-content a:not(.nav-btn):not(.figure-zoom-btn):hover {
    color: var(--rust);
}

.docs-content p code,
.docs-content li code {
    border: 1px solid rgba(193, 100, 47, 0.18);
    border-radius: 5px;
    background: rgba(193, 100, 47, 0.09);
    color: #94451f;
}

.author-info,
.toc-box {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(235, 227, 205, 0.58);
}

.author-info {
    padding: 1.35rem;
}

.toc-box p {
    color: var(--ink);
}

.toc-box a {
    color: var(--teal);
}

/* Citation system — theme-token overrides (see base rules above) */
.docs-content a.cite {
    color: var(--teal);
    border-bottom-color: rgba(31, 133, 119, 0.5);
}

.docs-content a.cite:hover {
    color: var(--rust);
    border-bottom-color: var(--rust);
}

.docs-content sup.cite-sup a {
    color: var(--teal);
}

.docs-content ul.ref-list li:target {
    background-color: rgba(31, 133, 119, 0.12);
    box-shadow: 0 0 0 5px rgba(31, 133, 119, 0.12);
}

.docs-content .cite-box {
    border: 1px solid var(--border);
    border-left: 3px solid var(--teal);
    border-radius: 14px;
    background: rgba(235, 227, 205, 0.58);
    color: var(--muted);
}

.code-window,
.docs-content .formula-block {
    border: 1px solid rgba(245, 241, 228, 0.1);
    border-radius: 14px;
    background: var(--ink);
    box-shadow: 0 16px 32px rgba(13, 19, 16, 0.15);
}

.code-header {
    border-bottom-color: rgba(245, 241, 228, 0.1);
    background: var(--ink-2);
}

.code-lang {
    color: #aebbae;
    font-family: var(--mono-font);
}

.copy-btn {
    border-color: rgba(245, 241, 228, 0.22);
    color: var(--stone);
}

.copy-btn:hover {
    border-color: var(--teal-light);
    background: rgba(31, 133, 119, 0.22);
}

.image-placeholder {
    border-color: rgba(31, 133, 119, 0.34);
    border-radius: 14px;
    background: rgba(235, 227, 205, 0.5);
    color: var(--muted);
}

.image-placeholder .ph-caption,
.figure-block .ph-caption {
    color: var(--muted);
}

.figure-block img,
.figure-img-wrap {
    border-color: var(--border);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(13, 19, 16, 0.1);
}

.figure-zoom-btn {
    border-radius: 9px;
    background: rgba(13, 19, 16, 0.78);
}

.figure-zoom-btn:hover {
    background: var(--teal);
}

.docs-content table th,
.docs-content table td {
    border-color: var(--border);
    color: var(--muted);
}

.docs-content table th {
    background: var(--stone-2);
    color: var(--ink);
}

.docs-content .note-box,
.docs-content .tip-box {
    border-radius: 12px;
}

.docs-content .note-box {
    border-color: rgba(193, 100, 47, 0.35);
    background: rgba(193, 100, 47, 0.09);
    color: #783b1c;
}

.docs-content .tip-box {
    border-color: rgba(31, 133, 119, 0.3);
    background: rgba(31, 133, 119, 0.09);
    color: #155e54;
}

.pagination-nav {
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top-color: var(--border);
}

.nav-btn {
    border-color: var(--border);
    border-radius: 999px;
    color: var(--ink-2);
    font-family: var(--mono-font);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
}

.nav-btn:hover {
    border-color: var(--teal);
    background: rgba(31, 133, 119, 0.08);
    color: var(--teal);
}

.yt-progress-bar {
    background: linear-gradient(90deg, var(--rust), var(--teal), var(--sage));
    box-shadow: 0 0 8px rgba(31, 133, 119, 0.6);
}

/* Tutorial page ----------------------------------------------------------- */
.tut-filter-btn {
    border-color: var(--border);
    background: var(--paper);
    color: var(--muted);
    font-family: var(--mono-font);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

.tut-filter-btn:hover {
    border-color: rgba(31, 133, 119, 0.45);
    background: rgba(31, 133, 119, 0.08);
    color: var(--teal);
}

.tut-filter-btn.active {
    border-color: var(--rust);
    background: var(--rust);
    box-shadow: 0 6px 16px rgba(193, 100, 47, 0.26);
}

.tut-section-heading {
    border-bottom-color: var(--border);
    color: var(--ink);
    font-family: var(--display-font);
}

.tut-section-heading svg {
    color: var(--rust);
}

.tut-card {
    border-color: var(--border);
    border-radius: 16px;
    background: var(--paper);
    box-shadow: 0 1px 2px rgba(13, 19, 16, 0.04);
}

@media (max-width: 900px) {
    .docs-navbar {
        min-height: 66px;
        height: auto;
        padding: 0.6rem 4%;
    }

    .docs-navbar .logo-img {
        height: 30px;
    }

    .docs-sidebar {
        top: 66px;
        background: var(--stone);
        box-shadow: 8px 0 32px rgba(13, 19, 16, 0.16);
    }

    .docs-layout {
        height: auto;
    }

    .docs-content {
        padding: 1.5rem 4%;
    }

    .docs-content-inner {
        border-radius: 16px;
    }
}

@media (max-width: 650px) {
    .navbar {
        min-height: 64px;
        padding: 0.55rem 4%;
    }

    .logo-img {
        height: 29px;
    }

    .nav-links {
        gap: 0;
    }

    .nav-links a {
        padding: 0.45rem 0.45rem;
        font-size: 0.59rem;
        letter-spacing: 0.06em;
    }

    .nav-links a::after {
        right: 8px;
        left: 8px;
    }

    .hero {
        min-height: auto;
        padding: 7.1rem 5% 4.25rem;
    }

    .hero-content {
        margin-bottom: 2.5rem;
    }

    .hero-content p {
        font-size: 0.98rem;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .app-mockup-container {
        border-radius: 13px;
    }

    .features,
    .institute-banner {
        padding-top: 4.4rem;
        padding-bottom: 4.4rem;
    }

    .docs-navbar .nav-links {
        gap: 0;
    }

    .docs-navbar .nav-links a {
        font-size: 0.59rem;
    }

    .docs-content-inner {
        padding: 1.35rem;
        border-radius: 14px;
    }

    .docs-content p,
    .docs-content ul,
    .docs-content ol {
        font-size: 0.96rem;
    }

    .footer-grid {
        gap: 2.25rem;
    }
}
/* ==========================================================================
   Video Tutorials Page (tutorial.html) — scoped styles
   Moved here from tutorial.html's own <style> block because the AJAX docs
   router (see script.js loadPage()) only swaps .docs-content-inner's HTML
   when navigating between pages; a page-specific <style> tag sitting in
   tutorial.html's own <head> is never re-applied after that kind of
   navigation, only on a hard page load. Putting these rules in the shared
   style.css means they are always active, regardless of how the page was
   reached (hard load, sidebar click, or Back/Forward).
   ========================================================================== */
        /* ============================================================
           Tutorial page — scoped styles
           All variable references resolve against :root tokens already
           defined in style.css so colours stay in sync site-wide.
        ============================================================ */

        /* ---- Filter / category bar ---- */
        .tut-filter-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 2.25rem;
        }

        .tut-filter-btn {
            padding: 0.45rem 1rem;
            border: 1px solid #e2e8f0;
            border-radius: 999px;
            background: #fff;
            color: #475569;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.18s ease;
            white-space: nowrap;
        }

        .tut-filter-btn:hover {
            border-color: #bfdbfe;
            background: #eff6ff;
            color: var(--primary-color);
        }

        .tut-filter-btn.active {
            background: var(--primary-color);
            border-color: var(--primary-color);
            color: #fff;
            box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28);
        }

        /* ---- Section headings inside the content area ---- */
        .tut-section-heading {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 1.1rem;
            font-weight: 700;
            color: #0f172a;
            margin: 2.5rem 0 1.25rem 0;
            padding-bottom: 0.55rem;
            border-bottom: 2px solid #f1f5f9;
        }

        .tut-section-heading svg {
            flex-shrink: 0;
            color: var(--primary-color);
        }

        /* ---- Video card grid ---- */
        .tut-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-bottom: 1rem;
        }

        /* ---- Individual video card ---- */
        .tut-card {
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.04);
            transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
            display: flex;
            flex-direction: column;
        }

        .tut-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 24px rgba(15,23,42,0.1);
            border-color: #bfdbfe;
        }

        /* ---- Embed wrapper (16 : 9 ratio) ---- */
        .tut-embed-wrap {
            position: relative;
            width: 100%;
            padding-top: 56.25%;   /* 9/16 = 56.25% */
            background: #0f172a;
            cursor: pointer;
        }

        /* The actual <iframe> is hidden by default; only shown after the
           user clicks "play" so we don't auto-load dozens of iframes. */
        .tut-embed-wrap iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: none;
            display: none;
        }

        .tut-embed-wrap.playing iframe {
            display: block;
        }

        /* Thumbnail image */
        .tut-thumb {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: opacity 0.25s ease;
        }

        .tut-embed-wrap.playing .tut-thumb {
            display: none;
        }

        /* Play button overlay */
        .tut-play-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: rgba(37, 99, 235, 0.9);
            border: 3px solid rgba(255,255,255,0.85);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            box-shadow: 0 4px 20px rgba(0,0,0,0.35);
            transition: transform 0.18s ease, background 0.18s ease;
            pointer-events: none;
        }

        .tut-embed-wrap:hover .tut-play-btn {
            transform: translate(-50%, -50%) scale(1.1);
            background: var(--primary-color);
        }

        .tut-embed-wrap.playing .tut-play-btn {
            display: none;
        }

        /* Duration badge */
        .tut-duration {
            position: absolute;
            bottom: 10px;
            right: 10px;
            padding: 3px 8px;
            background: rgba(0,0,0,0.72);
            color: #fff;
            border-radius: 6px;
            font-size: 0.78rem;
            font-weight: 600;
            font-family: 'Consolas', monospace;
            letter-spacing: 0.03em;
            pointer-events: none;
        }

        .tut-embed-wrap.playing .tut-duration {
            display: none;
        }

        /* Source badge (YouTube / Drive) */
        .tut-source-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 3px 9px;
            border-radius: 6px;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            pointer-events: none;
        }

        .tut-source-badge.youtube {
            background: #dc2626;
            color: #fff;
        }

        .tut-source-badge.drive {
            background: #1d4ed8;
            color: #fff;
        }

        .tut-source-badge.vimeo {
            background: #1ab7ea;
            color: #fff;
        }

        .tut-embed-wrap.playing .tut-source-badge {
            display: none;
        }

        /* Expand-to-fullscreen button — only shown once a video is playing */
        .tut-expand-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 32px;
            height: 32px;
            display: none;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 7px;
            background: rgba(15, 23, 42, 0.72);
            color: #fff;
            cursor: pointer;
            z-index: 3;
            transition: background 0.18s ease, transform 0.18s ease;
        }

        .tut-expand-btn:hover {
            background: var(--primary-color);
            transform: scale(1.06);
        }

        .tut-embed-wrap.playing .tut-expand-btn {
            display: flex;
        }

        /* ---- Fullscreen video lightbox (built dynamically by tutorial.html's script) ---- */
        .tut-video-lightbox-overlay {
            position: fixed;
            inset: 0;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2.5rem;
            background-color: rgba(8, 11, 20, 0.94);
            z-index: 1000;
        }

        .tut-video-lightbox-overlay.active {
            display: flex;
        }

        .tut-video-lightbox-frame {
            position: relative;
            width: min(92vw, 1280px);
            aspect-ratio: 16 / 9;
            background: #000;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        }

        .tut-video-lightbox-frame iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        .tut-video-lightbox-close {
            position: fixed;
            top: 24px;
            right: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            border: none;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.12);
            color: #ffffff;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .tut-video-lightbox-close:hover {
            background-color: rgba(255, 255, 255, 0.24);
        }

        body.tut-video-lightbox-open {
            overflow: hidden;
        }

        @media (max-width: 640px) {
            .tut-video-lightbox-overlay {
                padding: 1rem;
            }
        }

        /* ---- Card body ---- */
        .tut-card-body {
            padding: 1rem 1.1rem 1.1rem 1.1rem;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .tut-card-meta {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.45rem;
        }

        .tut-tag {
            padding: 2px 9px;
            border-radius: 999px;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            background: #eff6ff;
            color: #2563eb;
            border: 1px solid #bfdbfe;
        }

        .tut-tag.static    { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
        .tut-tag.dynamic   { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
        .tut-tag.uncertainty { background: #faf5ff; color: #7e22ce; border-color: #e9d5ff; }
        .tut-tag.general   { background: #f8fafc; color: #475569; border-color: #e2e8f0; }

        .tut-card-level {
            margin-left: auto;
            font-size: 0.72rem;
            font-weight: 600;
            color: #94a3b8;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .tut-card-title {
            font-size: 1rem;
            font-weight: 700;
            color: #0f172a;
            line-height: 1.35;
            margin-bottom: 0.45rem;
        }

        .tut-card-desc {
            font-size: 0.88rem;
            color: #64748b;
            line-height: 1.55;
            flex: 1;
            margin-bottom: 0.85rem;
        }

        .tut-card-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 0.75rem;
            border-top: 1px solid #f1f5f9;
        }

        .tut-card-author {
            font-size: 0.8rem;
            color: #94a3b8;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .tut-open-link {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--primary-color);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: gap 0.15s ease;
        }

        .tut-open-link:hover {
            gap: 7px;
            text-decoration: underline;
        }

        /* ---- Empty state ---- */
        .tut-empty {
            grid-column: 1 / -1;
            padding: 3rem 1rem;
            text-align: center;
            color: #94a3b8;
            font-size: 1rem;
            display: none;
        }

        .tut-empty svg {
            margin: 0 auto 1rem auto;
            display: block;
            opacity: 0.35;
        }

        /* ---- Intro banner ---- */
        .tut-hero {
            background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
            border: 1px solid #bfdbfe;
            border-radius: 14px;
            padding: 1.5rem 1.75rem;
            margin-bottom: 2rem;
            display: flex;
            gap: 1.25rem;
            align-items: flex-start;
        }

        .tut-hero-icon {
            flex-shrink: 0;
            width: 48px;
            height: 48px;
            background: var(--primary-color);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
        }

        .tut-hero h2 {
            font-size: 1.1rem;
            font-weight: 700;
            color: #0f172a;
            margin: 0 0 0.35rem 0;
            border: none;
            padding: 0;
        }

        .tut-hero p {
            font-size: 0.93rem;
            color: #475569;
            margin: 0;
            line-height: 1.55;
        }

        /* ---- Responsive ---- */
        @media (max-width: 640px) {
            .tut-grid {
                grid-template-columns: 1fr;
            }

            .tut-hero {
                flex-direction: column;
                gap: 0.85rem;
            }
        }

/* Tutorial accents are deliberately placed after the legacy tutorial rules
   above so this page receives the same presentation palette as every other
   documentation page. */
.tut-card {
    border-color: var(--border);
    border-radius: 16px;
    background: var(--paper);
    box-shadow: 0 1px 2px rgba(13, 19, 16, 0.04);
}

.tut-card:hover {
    border-color: rgba(31, 133, 119, 0.34);
    box-shadow: 0 18px 38px rgba(13, 19, 16, 0.1);
}

.tut-embed-wrap {
    background: var(--ink);
}

.tut-play-btn {
    background: rgba(193, 100, 47, 0.94);
    border-color: rgba(245, 241, 228, 0.86);
}

.tut-embed-wrap:hover .tut-play-btn,
.tut-expand-btn:hover {
    background: var(--teal);
}

.tut-card-title,
.tut-hero h2 {
    color: var(--ink);
    font-family: var(--display-font);
}

.tut-card-desc,
.tut-hero p,
.tut-card-level,
.tut-card-author {
    color: var(--muted);
}

.tut-card-footer {
    border-top-color: var(--border);
}

.tut-tag {
    border-color: rgba(31, 133, 119, 0.26);
    background: rgba(31, 133, 119, 0.08);
    color: var(--teal);
    font-family: var(--mono-font);
    font-size: 0.64rem;
}

.tut-tag.static {
    border-color: rgba(193, 100, 47, 0.25);
    background: rgba(193, 100, 47, 0.09);
    color: #9b4a21;
}

.tut-tag.dynamic {
    border-color: rgba(31, 133, 119, 0.25);
    background: rgba(31, 133, 119, 0.09);
    color: var(--teal);
}

.tut-tag.uncertainty {
    border-color: rgba(138, 154, 87, 0.34);
    background: rgba(138, 154, 87, 0.12);
    color: #62703b;
}

.tut-tag.general {
    border-color: var(--border);
    background: var(--stone);
    color: var(--muted);
}

.tut-hero {
    border-color: rgba(31, 133, 119, 0.28);
    background: linear-gradient(135deg, rgba(31, 133, 119, 0.1), rgba(138, 154, 87, 0.1));
}

.tut-hero-icon {
    background: var(--teal);
}

/* This selector intentionally has higher specificity than the small legacy
   inline introduction style, so its author panel shares the docs surface. */
.docs-content .author-info {
    margin-bottom: 1.9rem;
    padding: 1.35rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(235, 227, 205, 0.58);
}

/* --------------------------------------------------------------------------
   Landing-page fracture network
   -------------------------------------------------------------------------- */
.hero {
    isolation: isolate;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: min(92%, 780px);
    max-width: 780px;
    margin: 0 auto 4.5rem;
    padding-right: 0;
    text-align: center;
    animation: hero-content-in 0.72s 0.08s both cubic-bezier(0.2, 0.7, 0.3, 1);
}

.gradient-text {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    color: transparent;
    /* Match the presentation heading: the sentence stays stable, while the
       key fracture term carries the flowing colour treatment. */
    color: var(--ink);
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    animation: none;
}

.gradient-text em {
    color: transparent;
    background: linear-gradient(90deg, var(--teal), var(--sage), var(--rust));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: normal;
    animation: title-shimmer 5s linear infinite;
}

.hero-content p {
    margin-right: auto;
    margin-left: auto;
}

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

/* The hero's promise while FracSTAT v1.0.0 is pre-registration only: there is
   no file to fetch yet, so the note says so and states what the form does with
   the address (emails the link). The selector is heavier than the generic
   `.hero-content p` above on purpose — the note keeps its own compact size and
   quiet colour instead of picking up the hero lead's 1.25rem. */
.hero-content p.hero-soon-note {
    display: inline-block;
    max-width: 620px;
    margin: 1.15rem auto 0;
    padding: 0.55rem 1rem;
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.6;
}

.hero-content p.hero-soon-note strong {
    color: var(--ink);
}

.hero-fracture-art {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    opacity: 0.72;
    -webkit-mask-image: none;
    mask-image: none;
}

.hero-fracture-art canvas {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.app-mockup-container {
    position: relative;
    z-index: 2;
}

@keyframes hero-content-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes title-shimmer {
    to { background-position: 200% center; }
}

@media (max-width: 900px) {
    .hero-content {
        padding-right: 0;
        text-align: center;
    }

    .gradient-text {
        margin-right: auto;
        margin-left: auto;
    }

    .hero-content p {
        margin-right: auto;
        margin-left: auto;
    }

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

    .hero-fracture-art {
        inset: 0;
        opacity: 0.5;
    }
}

@media (max-width: 650px) {
    .hero-content {
        width: min(92%, 520px);
        margin-bottom: 2.5rem;
    }

    .hero-fracture-art {
        inset: 0;
        opacity: 0.34;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-content,
    .gradient-text,
    .hero-fracture-art {
        animation: none !important;
    }

    .hero-content { opacity: 1; }
}

/* Tutorial filters reveal a single section at a time. Keep its heading close
   to the controls instead of stacking the old filter and heading margins. */
.tut-filter-bar {
    margin-bottom: 1rem;
}

.tut-section-heading {
    margin: 0.7rem 0 1.1rem;
}

/* --------------------------------------------------------------------------
   Home-page preloader
   Uses animated_logo_loader.html's constructed mark with lightweight status.
   -------------------------------------------------------------------------- */
#preloader {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse 60% 50% at 50% 40%, rgba(31, 133, 119, 0.15), transparent),
        radial-gradient(ellipse 50% 40% at 70% 75%, rgba(193, 100, 47, 0.1), transparent),
        var(--ink);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.65s ease, visibility 0.65s ease;
}

#preloader::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.23;
    background-image: linear-gradient(rgba(245, 241, 228, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(245, 241, 228, 0.08) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(circle at center, black, transparent 72%);
    mask-image: radial-gradient(circle at center, black, transparent 72%);
}

#preloader.pl-hide {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}

.preloader-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    width: min(90vw, 360px);
}

.preloader-logo {
    width: min(72vw, 292px);
    height: min(72vw, 292px);
    border: 0;
    background: transparent;
    pointer-events: none;
}

.pl-word {
    margin: -0.65rem 0 0;
    color: var(--stone);
    font-family: var(--display-font);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.pl-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--muted-light);
    font-family: var(--mono-font);
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.pl-dots {
    display: inline-flex;
    gap: 3px;
}

.pl-dots i {
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--teal-light);
    animation: pl-dot 1.4s ease infinite;
}

.pl-dots i:nth-child(2) { animation-delay: 0.2s; }
.pl-dots i:nth-child(3) { animation-delay: 0.4s; }

.pl-bar {
    width: min(68vw, 232px);
    height: 2px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(245, 241, 228, 0.14);
}

.pl-bar-fill {
    width: 45%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--rust), var(--teal-light), #a7b879);
    animation: pl-load 1.65s ease-in-out infinite;
}

@keyframes pl-dot {
    0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-2px); }
}

@keyframes pl-load {
    0% { transform: translateX(-125%); }
    54%, 100% { transform: translateX(225%); }
}

@media (max-width: 650px) {
    .preloader-logo {
        width: min(78vw, 260px);
        height: min(78vw, 260px);
    }

}

@media (prefers-reduced-motion: reduce) {
    .pl-dots i,
    .pl-bar-fill {
        animation: none !important;
    }
}

/* ==========================================================================
   PDF User Manual page (manual.html) — download row, metadata chips and the
   embedded Google Drive PDF viewer.
   Lives here rather than in a per-page <style> tag for the same reason as
   every other docs component: the AJAX router (script.js loadPage()) only
   swaps .docs-content-inner's HTML, so a page-local <head> style block would
   be lost when navigating into manual.html from another docs page.
   ========================================================================== */
.pdf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.5rem 0 1rem;
}

.pdf-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.72rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--ink);
    font-family: var(--display-font);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.pdf-action-btn:hover {
    border-color: var(--muted-light);
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(13, 19, 16, 0.1);
}

.pdf-action-btn svg {
    flex-shrink: 0;
}

/* The manual page's own download action, so it matches the ember ramp used by
   the hero button, the statistics CTA and the registration modal's submit. */
.pdf-action-btn--primary {
    border-color: transparent;
    background: linear-gradient(160deg, var(--ember-1) 0%, var(--ember-2) 55%, var(--ember-3) 100%);
    color: #fff;
    box-shadow:
        0 14px 30px var(--ember-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.pdf-action-btn--primary:hover {
    border-color: transparent;
    background: linear-gradient(160deg, #c96229 0%, var(--ember-2) 55%, var(--ember-3) 100%);
    box-shadow:
        0 18px 36px var(--ember-glow-strong),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.pdf-action-btn--primary:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

/* The generic docs link rule (.docs-content a:not(.nav-btn):not(.figure-zoom-btn))
   scores (0,3,1) and (0,4,1) on hover, so it outranks the plain .pdf-action-btn*
   classes above and would repaint this filled button teal — then rust on hover,
   making the label vanish against its own background. These selectors match that
   score exactly and come later in the file, so they win the cascade and keep the
   label white in both states. */
.docs-content .pdf-actions a.pdf-action-btn--primary,
.docs-content .pdf-actions a.pdf-action-btn--primary:hover {
    color: #fff;
}

/* Small mono "spec" chips under the buttons — format, version, host. */
.pdf-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-bottom: 2rem;
}

.pdf-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-family: var(--mono-font);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pdf-meta-item svg {
    flex-shrink: 0;
    color: var(--teal);
}

/* Viewer shell. The aspect-ratio keeps a sensible A4-ish portrait frame on
   narrow screens while the min/max height stops it collapsing or growing
   taller than the viewport on very wide or very tall ones. */
.pdf-viewer-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: min(82vh, 900px);
    min-height: 420px;
    margin: 1.5rem 0 0.6rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--stone-2);
    box-shadow: 0 14px 34px rgba(13, 19, 16, 0.09);
}

.pdf-viewer-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 650px) {
    .pdf-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .pdf-action-btn {
        justify-content: center;
    }

    .pdf-viewer-wrap {
        height: min(70vh, 620px);
        border-radius: 12px;
    }
}


/* ==========================================================================
   Download statistics — public section (index.html)
   --------------------------------------------------------------------------
   The heatmap, the ranking list and the chip row are built at runtime by
   fracstat-worldmap.js, so every class below either belongs to this section's
   static markup (index.html, outside [data-admin-root]) or to a widget that
   module creates.

   The map keeps the site's light surface — a pale sea-glass panel (--map-ocean)
   rather than the cream page itself, so a country with no downloads (--map-land,
   warm parchment) still reads as a shape. The six heat steps mirror
   DEFAULT_COLORS in fracstat-worldmap.js and are all mid-tone on purpose: each
   one has to stay legible on that pale panel *and* as a thin bar on the cream
   rank-list card, which is exactly what the old pale-teal ramp failed at:
       #2f7d9e  #2f9c85  #57b96b  #a8c94a  #e0a63a  #c2411d
   teal-blue -> teal -> green -> yellow-green -> amber -> ember, i.e. cold for
   the fewest downloads and hot for the most.
   ========================================================================== */
.download-stats {
    position: relative;
    overflow: hidden;
    padding: 6.5rem 5%;
    background:
        radial-gradient(ellipse 55% 45% at 88% 8%, rgba(31, 133, 119, 0.08), transparent),
        radial-gradient(ellipse 50% 40% at 6% 92%, rgba(193, 100, 47, 0.06), transparent),
        var(--paper);
}

.download-stats-head {
    position: relative;
    z-index: 1;
    margin-bottom: 2.5rem;
    text-align: center;
}

.download-stats-head small {
    color: var(--rust);
    font-family: var(--mono-font);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.download-stats-head h2 {
    margin-top: 0.7rem;
    color: var(--ink);
    font-family: var(--display-font);
    font-weight: 800;
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    letter-spacing: -0.03em;
}

.download-stats-head p {
    max-width: 620px;
    margin: 0.85rem auto 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.7;
}

.download-stats-meta {
    max-width: 1180px;
    margin: 0 auto 1.75rem;
}

.download-stats-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(270px, 1fr);
    align-items: start;
    gap: 1.35rem;
    max-width: 1180px;
    margin: 0 auto;
}

.download-stats-map,
.download-stats-rank {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(251, 249, 242, 0.92);
    box-shadow: 0 1px 2px rgba(13, 19, 16, 0.04);
}

.download-stats-map {
    padding: 1rem 1rem 0.8rem;
}

.download-stats-map-host {
    position: relative;
}

.download-stats-rank {
    padding: 1.15rem 1.2rem 1.25rem;
}

.download-stats-rank h3 {
    color: var(--ink);
    font-family: var(--display-font);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.download-stats-rank-sub {
    margin-top: 0.2rem;
    color: var(--muted-light);
    font-family: var(--mono-font);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.download-stats-rank-hint {
    margin-top: 0.9rem;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.6;
}

.download-stats-foot {
    max-width: 1180px;
    margin: 1.6rem auto 0;
    color: var(--muted);
    font-size: 0.82rem;
    text-align: center;
}

/* The same download action as the hero button, at the size a sentence can
   carry — as an underlined teal link it was almost invisible. */
.download-stats-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.05rem;
    border: 0;
    border-radius: 999px;
    margin-left: 0.45rem;
    background: linear-gradient(160deg, var(--ember-1) 0%, var(--ember-2) 55%, var(--ember-3) 100%);
    color: #fff;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    vertical-align: middle;
    cursor: pointer;
    box-shadow:
        0 8px 20px var(--ember-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.download-stats-cta:hover {
    transform: translateY(-1px);
    box-shadow:
        0 12px 26px var(--ember-glow-strong),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* --------------------------------------------------------------------------
   Heatmap chrome (fracstat-worldmap.js -> .fs-map*)
   -------------------------------------------------------------------------- */
/* The panel: pale sea-glass ocean, warm parchment land. The hue split between
   those two is what makes a country with no downloads read as a shape, so
   nothing has to go dark to be seen. The two glows are the section's own
   teal/rust accents, kept faint so they never compete with the heat ramp. */
.fs-map {
    position: relative;
    border-radius: 14px;
    border: 1px solid var(--border);
    background:
        radial-gradient(ellipse 62% 58% at 16% 10%, rgba(31, 133, 119, 0.1), transparent 72%),
        radial-gradient(ellipse 58% 52% at 90% 92%, rgba(193, 100, 47, 0.07), transparent 72%),
        var(--map-ocean);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.fs-map-svg {
    display: block;
    width: 100%;
    height: auto;
}

/* No inline fill is written for a country with zero downloads, so this is both
   the "no data" colour and the colour of the empty legend swatch. The stroke is
   a dark hairline: on a light map it is the gaps between countries that read as
   borders, the way a printed map works, and it is also what separates the
   parchment land from the sea-glass ocean. */
.fs-map-country {
    fill: var(--map-land);
    stroke: var(--map-border);
    stroke-width: 0.6;
    stroke-linejoin: round;
    cursor: pointer;
    transition: fill 0.25s ease, opacity 0.2s ease;
}

/* A country with data gets a slightly stronger outline, so the data shapes sit
   crisply on top of the quiet no-data ones. */
.fs-map-country.has-data {
    stroke: var(--map-border-strong);
}

/* Dimming the rest of the world while one country is hovered has to stop short
   of washing the fills out, or the pale end of the ramp disappears. */
.fs-map-country.is-dim {
    opacity: 0.5;
}

/* Hover/selection is a near-black outline — the one colour on the panel that no
   heat step uses, so it can never be mistaken for data. */
.fs-map-country.is-active {
    stroke: var(--map-ink);
    stroke-width: 1.2;
    opacity: 1;
}

.fs-map-status {
    padding: 2.2rem 1rem;
    color: var(--map-ink-soft);
    font-family: var(--mono-font);
    font-size: 0.74rem;
    text-align: center;
}

.fs-map-status.is-error {
    color: var(--ember-3);
}

.fs-map-note {
    margin-top: 0.6rem;
    color: var(--map-ink-faint);
    font-size: 0.72rem;
    line-height: 1.6;
}

.is-hidden {
    display: none !important;
}

/* The legend is centred under the map: it is a short row of swatches, and on the
   public page (which drops the caption) left-aligning it made the panel look
   lopsided. The admin panel's caption still sits at the right edge, because its
   own margin-left: auto absorbs the free space before justify-content applies. */
.fs-map-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.35rem 0.85rem;
    margin-top: 0.55rem;
    color: var(--map-ink-soft);
    font-family: var(--mono-font);
    font-size: 0.66rem;
}

.fs-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.fs-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 10px;
    border: 1px solid var(--map-border-strong);
    border-radius: 3px;
}

.fs-swatch-empty {
    background: var(--map-land);
}

.fs-legend-caption {
    margin-left: auto;
    color: var(--map-ink-faint);
}

/* Dark bubble on the pale panel: it is the one dark surface in the widget, and
   that is what separates it from the map behind it. */
.fs-map-tooltip {
    position: absolute;
    z-index: 5;
    max-width: 230px;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border-dark);
    border-radius: 10px;
    background: var(--ink);
    color: var(--stone);
    font-size: 0.72rem;
    line-height: 1.5;
    pointer-events: none;
    box-shadow: 0 16px 34px rgba(4, 10, 8, 0.3);
    transform: translate(-50%, calc(-100% - 14px));
}

.fs-map-tooltip strong {
    display: block;
    font-size: 0.76rem;
}

.fs-map-tooltip span {
    display: block;
    color: var(--stone-2);
}

/* Edge clamping: the bubble is positioned by its centre, so close to either
   side it is nudged back inside the frame instead of overflowing it. */
.fs-map-tooltip.flip-left {
    transform: translate(-8px, calc(-100% - 14px));
}

.fs-map-tooltip.flip-right {
    transform: translate(calc(-100% + 8px), calc(-100% - 14px));
}

/* --------------------------------------------------------------------------
   Ranked country list (fracstat-worldmap.js -> .fs-rank*)
   -------------------------------------------------------------------------- */
.fs-rank-list {
    display: grid;
    gap: 0.25rem;
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
}

.fs-rank-item {
    display: grid;
    grid-template-columns: 1.35rem minmax(0, 1fr) 4.25rem 3.6rem;
    align-items: center;
    gap: 0.55rem;
    padding: 0.32rem 0.45rem;
    border-radius: 9px;
    cursor: default;
    transition: background 0.2s ease;
}

.fs-rank-item:hover,
.fs-rank-item.is-active {
    background: rgba(31, 133, 119, 0.1);
}

.fs-rank-pos {
    color: var(--muted-light);
    font-family: var(--mono-font);
    font-size: 0.66rem;
    text-align: right;
}

.fs-rank-name {
    overflow: hidden;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fs-rank-bar {
    display: block;
    overflow: hidden;
    height: 8px;
    border-radius: 999px;
    background: rgba(17, 26, 18, 0.08);
}

.fs-rank-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width 0.4s ease;
}

.fs-rank-count {
    color: var(--ink);
    font-family: var(--mono-font);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.fs-rank-count em {
    display: block;
    color: var(--muted-light);
    font-size: 0.6rem;
    font-style: normal;
}

.fs-rank-empty {
    padding: 0.6rem 0.45rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-style: italic;
    line-height: 1.6;
}

.fs-rank-toggle {
    padding: 0;
    border: 0;
    margin-top: 0.75rem;
    background: none;
    color: var(--teal);
    font-family: var(--mono-font);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fs-rank-toggle[hidden] {
    display: none;
}

.fs-rank-toggle:hover {
    color: var(--primary-hover);
}

/* --------------------------------------------------------------------------
   Aggregate chips (fracstat-worldmap.js -> .fs-stat-chips)
   -------------------------------------------------------------------------- */
.fs-stat-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.fs-stat-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(251, 249, 242, 0.92);
}

.fs-stat-chip strong {
    color: var(--ink);
    font-family: var(--display-font);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.fs-stat-chip em {
    color: var(--muted);
    font-family: var(--mono-font);
    font-size: 0.64rem;
    font-style: normal;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* Registrations recorded in this browser that the published file does not
   contain yet — shown, but visibly provisional. */
.fs-stat-chip.is-note {
    border-color: rgba(193, 100, 47, 0.35);
    background: rgba(193, 100, 47, 0.09);
}

.fs-stat-chip.is-note strong {
    color: var(--rust);
}

/* --------------------------------------------------------------------------
   Statistics section — narrow screens
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
    .download-stats-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .download-stats-map {
        padding: 0.75rem;
    }
}

@media (max-width: 620px) {
    .download-stats {
        padding: 4.5rem 5%;
    }

    .download-stats-rank {
        padding: 1rem;
    }

    .fs-rank-item {
        grid-template-columns: 1.2rem minmax(0, 1fr) 3.5rem;
    }

    /* The bar is the first thing to go when the rows get tight. */
    .fs-rank-bar {
        display: none;
    }

    .fs-legend-caption {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fs-map-country,
    .fs-rank-item,
    .fs-rank-bar i,
    .download-stats-cta {
        transition: none;
    }
}

/* ==========================================================================
   Download registration modal (fracstat-download-popup.js)
   --------------------------------------------------------------------------
   The modal markup is created by the module, so a page only needs the script
   tag. Class list: .fs-modal > .fs-modal-backdrop + .fs-modal-dialog, which
   contains .fs-modal-close and either .fs-form or .fs-success.
   ========================================================================== */
html.fs-modal-open {
    overflow: hidden;
}

.fs-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    place-items: center;
    padding: 1.25rem;
}

.fs-modal[hidden] {
    display: none;
}

.fs-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 19, 16, 0.62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.fs-modal-dialog {
    position: relative;
    z-index: 1;
    overflow-y: auto;
    width: 100%;
    max-width: 620px;
    max-height: min(90vh, 820px);
    padding: 1.6rem 1.6rem 1.4rem;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--paper);
    box-shadow: 0 30px 80px rgba(13, 19, 16, 0.42);
    animation: fsModalIn 0.22s ease-out;
}

@keyframes fsModalIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.99);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.fs-modal-close {
    position: absolute;
    top: 0.65rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.fs-modal-close:hover {
    background: rgba(17, 26, 18, 0.07);
    color: var(--ink);
}

.fs-form-head {
    padding-right: 2.2rem;
    margin-bottom: 1.25rem;
}

.fs-form-badge {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--stone);
    font-family: var(--mono-font);
    font-size: 0.62rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.fs-form-head h3 {
    margin-top: 0.6rem;
    color: var(--ink);
    font-family: var(--display-font);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.fs-form-head p {
    margin-top: 0.4rem;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.65;
}

.fs-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
}

/* Same order as FIELD_ORDER in the module (name, email, institution,
   position, country) plus the consent row: institution and the consent
   checkbox get the full width because they hold the longest text. */
.fs-fields > .fs-field:nth-child(3),
.fs-field-consent {
    grid-column: 1 / -1;
}

.fs-field,
.fs-field-label {
    display: block;
}

.fs-field-label {
    margin-bottom: 0.3rem;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 600;
}

.fs-req {
    color: var(--rust);
}

.fs-optional {
    color: var(--muted-light);
    font-family: var(--mono-font);
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fs-input {
    width: 100%;
    padding: 0.62rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #fff;
    color: var(--text);
    font-family: var(--body-font);
    font-size: 0.85rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fs-input:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(31, 133, 119, 0.16);
}

select.fs-input {
    cursor: pointer;
}

.fs-field.has-error .fs-input {
    border-color: #b4453a;
    box-shadow: 0 0 0 3px rgba(180, 69, 58, 0.14);
}

.fs-field-hint {
    margin-top: 0.28rem;
    color: var(--muted-light);
    font-size: 0.68rem;
    line-height: 1.5;
}

.fs-field-error {
    margin-top: 0.28rem;
    color: #b4453a;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.5;
}

.fs-field-error:empty {
    display: none;
}

.fs-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.6;
    cursor: pointer;
}

.fs-consent input {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin-top: 0.18rem;
    accent-color: var(--teal);
}

.fs-consent a {
    color: var(--teal);
}

.fs-form-status {
    margin-top: 0.9rem;
    font-size: 0.78rem;
    line-height: 1.6;
}

.fs-form-status[hidden] {
    display: none;
}

.fs-form-status.is-error {
    color: #b4453a;
}

.fs-form-status.is-ok {
    color: var(--teal);
}

.fs-form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    margin-top: 1.1rem;
}

.fs-form-note {
    flex: 1 1 240px;
    color: var(--muted-light);
    font-size: 0.68rem;
    line-height: 1.6;
}

.fs-form-note a {
    color: var(--teal);
}

/* Same ember ramp as the hero button: the last step of the download flow
   should not look like a different action. */
.fs-submit {
    padding: 0.68rem 1.35rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(160deg, var(--ember-1) 0%, var(--ember-2) 55%, var(--ember-3) 100%);
    color: #fff;
    font-family: var(--body-font);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow:
        0 10px 22px var(--ember-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
    transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.fs-submit:hover {
    background: linear-gradient(160deg, #c96229 0%, var(--ember-2) 55%, var(--ember-3) 100%);
    transform: translateY(-1px);
    box-shadow:
        0 14px 28px var(--ember-glow-strong),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.fs-submit:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

.fs-submit:disabled,
.fs-submit.is-busy {
    opacity: 0.65;
    cursor: progress;
    transform: none;
}

/* --------------------------------------------------------------------------
   Success panel (shown after the registration is stored)
   -------------------------------------------------------------------------- */
.fs-success {
    padding: 0.5rem 0.25rem 0;
    text-align: center;
}

.fs-success[hidden] {
    display: none;
}

.fs-success-mark {
    width: 46px;
    height: 46px;
    margin: 0.35rem auto 0.9rem;
    border-radius: 50%;
    background: var(--teal);
    color: var(--stone);
    font-size: 1.4rem;
    line-height: 46px;
    text-align: center;
}

.fs-success-title {
    color: var(--ink);
    font-family: var(--display-font);
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.fs-success-message {
    max-width: 430px;
    margin: 0.5rem auto 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.65;
}

.fs-success-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.3rem 0.85rem;
    max-width: 430px;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    margin: 1.15rem auto 0;
    text-align: left;
}

.fs-success-summary[hidden] {
    display: none;
}

.fs-success-summary dt {
    color: var(--muted-light);
    font-family: var(--mono-font);
    font-size: 0.64rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.fs-success-summary dd {
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
}

.fs-success-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem 1rem;
    margin-top: 1.35rem;
}

.fs-success-download {
    padding: 0.65rem 1.25rem;
    border-radius: 999px;
    background: var(--teal);
    color: var(--stone);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease;
}

.fs-success-download:hover {
    background: var(--primary-hover);
}

.fs-success-close {
    padding: 0.65rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: none;
    color: var(--muted);
    font-family: var(--body-font);
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.fs-success-close:hover {
    border-color: var(--teal);
    color: var(--teal);
}

@media (max-width: 560px) {
    .fs-modal {
        padding: 0.75rem;
    }

    .fs-modal-dialog {
        max-height: 92vh;
        padding: 1.3rem 1.1rem 1.1rem;
        border-radius: 16px;
    }

    .fs-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .fs-form-foot {
        flex-direction: column;
        align-items: stretch;
    }

    /* The note's `flex: 1 1 240px` is a WIDTH basis in the row layout above, but
       once the foot stacks, that 240px becomes the note's HEIGHT — which left a
       ~210px hole between the note and the button on phones. Size it to its own
       text again, and let the gap do the spacing. */
    .fs-form-note {
        flex: 0 0 auto;
    }

    .fs-submit {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fs-modal-dialog {
        animation: none;
    }

    .fs-modal-close,
    .fs-input,
    .fs-submit,
    .fs-success-download,
    .fs-success-close {
        transition: none;
    }

    .fs-submit:hover {
        transform: none;
    }
}