/* ===================================
   NotePin - Main Stylesheet
   =================================== */

/* ===================================
   Self-hosted fonts

   Previously served from fonts.googleapis.com, which put two extra origins on
   the critical path: a stylesheet request to googleapis, then woff2 files from
   gstatic, each needing its own DNS + TLS before a glyph arrived. Same-origin
   here and declared in the stylesheet the page already blocks on, so there is
   no extra round trip.

   Both families are variable, so one file covers every weight the site uses.
   The unicode-range split is Google's own, keeping accented glyphs off the
   common path. See MAINTENANCE.md to refresh them.
   =================================== */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* CSS Variables — Dark (default) */
:root {
    --primary: #f59e0b;
    --primary-light: #fbbf24;
    --primary-dark: #d97706;
    --accent: #fb923c;
    --bg: #0a0b0f;
    --bg-gradient: linear-gradient(135deg, #0a0b0f 0%, #12141c 50%, #0a0b0f 100%);
    --text: #e4e4e7;
    --text-muted: #a1a1aa;
    --surface: #18181b;
    --surface-light: #27272a;
    --border: #3f3f46;
    --success: #22c55e;
    --warning: #f59e0b;
    --error: #ef4444;
    --heading: #fff;
    --overlay: rgba(0, 0, 0, 0.85);
    --shadow-strength: 0.4;
    /* Primary button. White on bright amber is only ~2.2:1, so the dark theme puts dark
       ink on the amber instead. Kept as tokens so each theme can pick what actually
       reads on its own gradient. */
    --btn-primary-from: var(--primary);
    --btn-primary-to: var(--primary-dark);
    --btn-primary-ink: #1a1205;
    --btn-primary-glow: rgba(245, 158, 11, 0.35);
    /* Amber as *text* needs 4.5:1, which the fill colours do not reach in the light
       theme. These two are the text-safe versions; --primary and --accent stay as they
       are for fills, borders and gradients. Dark theme already clears it, so these
       match there. */
    --primary-text: #f59e0b;
    /* 9.2:1 on --bg, 8.3:1 on --surface */
    --accent-text: #fb923c;
    /* 6.6:1 on --surface-light */
    --success-text: #22c55e;
    /* 6.0:1 on the tinted badge background */
}

/* CSS Variables — Light */
@media (prefers-color-scheme: light) {
    :root {
        --primary: #d97706;
        --primary-light: #b45309;
        --primary-dark: #92400e;
        --accent: #ea580c;
        --bg: #f8f9fa;
        --bg-gradient: linear-gradient(135deg, #f8f9fa 0%, #e5e7eb 50%, #f8f9fa 100%);
        --text: #1f2937;
        /* was #6b7280, which came to 4.39:1 on --surface-light and failed AA */
        --text-muted: #5f6673;
        --surface: #ffffff;
        --surface-light: #f3f4f6;
        --border: #d1d5db;
        --success: #16a34a;
        --warning: #d97706;
        --error: #dc2626;
        --heading: #111827;
        --overlay: rgba(0, 0, 0, 0.6);
        --shadow-strength: 0.12;
        /* The light theme's amber is already dark, so white ink wins here. Starting the
           gradient at the deeper amber takes white from 3.2:1 to 5.0:1. */
        --btn-primary-from: #b45309;
        --btn-primary-to: #92400e;
        --btn-primary-ink: #ffffff;
        --btn-primary-glow: rgba(180, 83, 9, 0.3);
        /* --primary (#d97706) is only 3.0:1 on the page and 3.2:1 on a card, so it
           cannot carry text here. These are the darkened equivalents. */
        --primary-text: #a3480a;
        /* 5.7:1 on --bg, 6.0:1 on --surface */
        --accent-text: #c2410c;
        /* 4.7:1 on --surface-light */
        --success-text: #166534;
        /* 6.3:1 on the tinted badge background; #16a34a was 2.9:1 */
    }
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    overflow-x: hidden;
}

/* Gradient background effects (index page) */
.bg-glow {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    background: 
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(34, 211, 238, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

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

/* ===================================
   Header
   =================================== */
header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 11, 15, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(63, 63, 70, 0.5);
}

@media (prefers-color-scheme: light) {
    header {
        background: rgba(248, 249, 250, 0.85);
        border-bottom-color: rgba(209, 213, 219, 0.7);
    }
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.logo {
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--heading);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-text {
    color: var(--heading);
}

.logo-text span {
    color: var(--primary-light);
}

.logo-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-toggle {
    display: none;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(24, 24, 27, 0.82);
    color: var(--heading);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.nav-toggle:hover {
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(39, 39, 42, 0.96);
}

.nav-toggle:focus-visible {
    outline: 2px solid rgba(251, 191, 36, 0.65);
    outline-offset: 3px;
}

.nav-toggle-bar {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.header-inner[data-nav-open="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.header-inner[data-nav-open="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.header-inner[data-nav-open="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

nav a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s;
}

nav a:hover {
    color: var(--heading);
}

nav a.active {
    color: var(--primary-light);
}

@media (prefers-color-scheme: light) {
    .nav-toggle {
        background: rgba(255, 255, 255, 0.88);
    }

    .nav-toggle:hover {
        background: rgba(243, 244, 246, 0.98);
    }
}

/* ===================================
   Content (Privacy & Changelog pages)
   =================================== */
.content {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 24px;
}

.content.narrow {
    max-width: 800px;
}

/* ===================================
   Typography
   =================================== */
h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #fff 0%, #a1a1aa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (prefers-color-scheme: light) {
    h1 {
        background: linear-gradient(135deg, #111827 0%, #4b5563 100%);
        -webkit-background-clip: text;
        background-clip: text;
    }
}

h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 16px;
}

h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--heading);
}

p {
    color: var(--text-muted);
    margin-bottom: 16px;
}

a {
    color: var(--primary-light);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

ul {
    color: var(--text-muted);
    margin-left: 24px;
    margin-bottom: 16px;
}

li {
    margin-bottom: 8px;
}

code {
    background: var(--surface-light);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--accent-text);
}

.intro {
    color: var(--text-muted);
    margin-bottom: 48px;
    font-size: 1.1rem;
}

.subtitle {
    font-size: 1.2rem;
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto 40px;
    line-height: 1.8;
}

/* ===================================
   Privacy Page Specific
   =================================== */
.last-updated {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 32px;
}

.content h2 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: 48px;
    margin-bottom: 16px;
    color: var(--heading);
}

.highlight {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(251, 146, 60, 0.08) 100%);
    border: 1px solid rgba(245, 158, 11, 0.25);
    padding: 20px 24px;
    border-radius: 12px;
    margin-bottom: 32px;
}

.highlight strong {
    color: var(--primary-light);
}

/* ===================================
   Hero Section (Index page)
   =================================== */
.hero {
    padding: 100px 0 80px;
    text-align: center;
    position: relative;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    color: var(--primary-light);
    margin-bottom: 24px;
}

.badge span {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}


.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-primary {
    background: linear-gradient(135deg, var(--btn-primary-from) 0%, var(--btn-primary-to) 100%);
    color: var(--btn-primary-ink);
    /* The glow was indigo, left over from another palette; it never matched the button. */
    box-shadow: 0 4px 20px var(--btn-primary-glow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--btn-primary-glow);
    text-decoration: none;
    color: var(--btn-primary-ink);
}

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--surface-light);
    border-color: var(--text-muted);
    text-decoration: none;
}

.btn svg,
.btn .btn-icon {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}

/* CTA Buttons */
.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.cta-buttons .btn {
    padding: 16px 32px;
    font-size: 1.1rem;
}

.cta-buttons .btn svg,
.cta-buttons .btn .btn-icon {
    margin-right: 8px;
}

/* Supported Formats & Languages Section */
.supported-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    max-width: 1080px;
    gap: 24px;
    margin: 40px auto 28px;
}

.supported-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 24px 28px;
    text-align: left;
    box-shadow: 0 18px 40px rgba(0, 0, 0, calc(var(--shadow-strength) * 0.45));
}

.supported-box h2 {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
}

.supported-copy {
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.format-tags,
.language-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.format-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(217, 119, 6, 0.12);
    border: 1px solid rgba(217, 119, 6, 0.3);
    color: var(--primary-text);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 9px 14px;
    border-radius: 10px;
}

.format-tag code {
    background: rgba(0, 0, 0, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: 'JetBrains Mono', monospace;
}

.lang-tag {
    background: rgba(34, 211, 238, 0.1);
    border: 1px solid rgba(34, 211, 238, 0.2);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 4px;
}

.languages-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 16px;
}

/* Coming Soon Box */
.coming-soon-box {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.08) 0%, rgba(234, 88, 12, 0.08) 100%);
    border: 1px solid rgba(217, 119, 6, 0.25);
    border-radius: 16px;
    padding: 32px 40px;
    margin-bottom: 24px;
}

.coming-soon-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 8px 20px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.coming-soon-text {
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 24px;
}

.browser-icons {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.browser-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.browser-item svg {
    width: 48px;
    height: 48px;
    fill: var(--text);
    opacity: 0.8;
    transition: all 0.3s;
}

.browser-item:hover svg {
    opacity: 1;
    fill: var(--primary-light);
    transform: scale(1.1);
}

.browser-item span {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Video Section */
.video-section {
    margin: 50px auto 0;
    max-width: 800px;
}

.video-title {
    font-size: 1.2rem;
    color: var(--text);
    margin-bottom: 20px;
    font-weight: 600;
}

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Screenshot Gallery */
.screenshot-gallery {
    margin: 60px auto 0;
    max-width: 1000px;
    position: relative;
}

.screenshot-main {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    background: var(--surface);
}

.screenshot-main img {
    width: 100%;
    display: block;
}

/* Screenshot Tabs (View Switcher) */
.screenshot-tabs {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 32px;
}

.screenshot-tab {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 10px 28px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.screenshot-tab:hover {
    color: var(--text);
    border-color: var(--primary);
}

.screenshot-tab.active {
    background: rgba(245, 158, 11, 0.12);
    border-color: var(--primary);
    color: var(--primary-text);
}

.screenshot-note {
    margin: -8px auto 28px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Screenshot Showcase (Light / Dark pairs) */
.screenshot-showcase {
    max-width: 1100px;
    margin: 0 auto;
}

.screenshot-panel {
    display: none;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.screenshot-panel.active {
    display: grid;
}

.screenshot-panel-single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 860px;
    margin: 0 auto;
}

.screenshot-card {
    position: relative;
    width: 100%;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    appearance: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.screenshot-feature {
    min-width: 0;
}

.screenshot-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 80px rgba(0, 0, 0, calc(var(--shadow-strength) + 0.1));
}

.screenshot-card img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: auto;
    object-fit: contain;
    background: var(--surface-light);
}

.screenshot-label {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(10, 11, 15, 0.75);
    backdrop-filter: blur(8px);
    color: #e4e4e7;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    pointer-events: none;
}

.screenshot-hint {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(10, 11, 15, 0.72);
    color: #f4f4f5;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    pointer-events: none;
}

.screenshot-variants {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.screenshot-variant {
    position: relative;
    width: auto;
    min-width: 124px;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(0, 0, 0, calc(var(--shadow-strength) * 0.55));
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    appearance: none;
    color: inherit;
    text-align: center;
    cursor: pointer;
}

.screenshot-variant:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
}

.screenshot-variant.active {
    border-color: rgba(245, 158, 11, 0.55);
    background: rgba(245, 158, 11, 0.1);
    box-shadow: 0 16px 34px rgba(0, 0, 0, calc(var(--shadow-strength) * 0.72));
}

.screenshot-variant img {
    display: none;
}

.screenshot-variant-name {
    position: static;
    background: none;
    backdrop-filter: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0;
    border-radius: 0;
    pointer-events: none;
}

.screenshot-variant.active .screenshot-variant-name {
    color: var(--heading);
}

/* ===================================
   Sections (Index page)
   =================================== */
section {
    padding: 100px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-badge {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-text);
    margin-bottom: 16px;
}

.section-desc {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* ===================================
   Feature Grid (Index page)
   =================================== */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
}

.feature-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px;
    transition: all 0.3s ease;
}

.feature-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.feature-icon.auto { background: rgba(34, 197, 94, 0.15); }
.feature-icon.validate { background: rgba(239, 68, 68, 0.15); }
.feature-icon.json { background: rgba(34, 211, 238, 0.15); }
.feature-icon.tools { background: rgba(245, 158, 11, 0.15); }
.feature-icon.customize { background: rgba(168, 85, 247, 0.15); }
.feature-icon.keyboard { background: rgba(99, 102, 241, 0.15); }

.feature-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--heading);
}

.feature-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 16px;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    padding: 8px 0;
    padding-left: 24px;
    position: relative;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.feature-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--primary-light);
}

/* The keyboard shortcuts section moved to manual.html#shortcuts, which styles its own
   <kbd> elements under .manual-topic kbd. The .shortcuts-* and .kbd rules that served the
   landing page went with it. */

/* Validation Section */
.validation-section {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(245, 158, 11, 0.05) 100%);
    border-radius: 20px;
    padding: 60px;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.validation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 40px;
}

.validation-item {
    text-align: center;
    padding: 24px;
}

.validation-item h4 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    color: var(--accent-text);
    margin-bottom: 12px;
}

.validation-item p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Note Box */
.note-box {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 12px;
    padding: 24px 32px;
    margin-top: 60px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.note-box .icon {
    font-size: 24px;
    flex-shrink: 0;
}

.note-box h4,
.note-box h3 {
    font-size: 1rem;
    color: var(--primary-text);
    margin-bottom: 8px;
}

.note-box p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.note-box code {
    background: rgba(0, 0, 0, 0.08);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--text);
}

/* ===================================
   Changelog Page Specific
   =================================== */
.version-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 32px;
    transition: all 0.3s ease;
}

.version-card:hover {
    border-color: var(--primary);
}

.version-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.version-number {
    font-size: 1.35rem;
    margin: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--heading);
}

.version-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-latest {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: white;
}

.badge-dev {
    background: rgba(245, 158, 11, 0.15);
    color: var(--primary-text);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-initial {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success-text);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.version-date {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.version-section {
    margin-bottom: 24px;
}

.version-section:last-child {
    margin-bottom: 0;
}

.version-section h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent-text);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Changelog feature list overrides */
.version-card .feature-list li {
    padding: 10px 0;
    padding-left: 28px;
    border-bottom: 1px solid rgba(63, 63, 70, 0.3);
    font-size: 0.95rem;
}

.version-card .feature-list li:last-child {
    border-bottom: none;
}

.version-card .feature-list li strong {
    color: var(--text);
}

/* Feature Category (Changelog) */
.feature-category {
    background: rgba(245, 158, 11, 0.05);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 16px;
}

.feature-category h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--heading);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.feature-category p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.feature-category ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-category ul li {
    padding: 6px 0 6px 20px;
    position: relative;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.feature-category ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary-light);
}

/* ===================================
   More FixQuotes products
   =================================== */
#more-extensions {
    padding: 80px 0 40px;
}

.extensions-grid {
    display: grid;
    /* One column per card, so the row always fills. Was hard-coded to 5 and
       left an empty column when a product card was removed. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 40px;
}

.extension-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.2s, transform 0.2s;
}

.extension-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    text-decoration: none;
}

.extension-icon {
    font-size: 2.5rem;
    margin-bottom: 16px;
}

.extension-icon--image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
}

.extension-logo {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.extension-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--heading, #fff);
    margin-bottom: 8px;
}

.extension-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

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

    .screenshot-panel-single {
        max-width: 100%;
    }
}

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

    .screenshot-note {
        margin-bottom: 22px;
    }

    .screenshot-tab {
        padding: 10px 18px;
    }

    .screenshot-variants {
        gap: 12px;
    }

    .screenshot-card,
    .screenshot-variant {
        border-radius: 12px;
    }

    .screenshot-variant {
        min-width: 108px;
        padding: 10px 16px;
        border-radius: 999px;
    }
}

/* ===================================
   Footer
   =================================== */
footer {
    border-top: 1px solid var(--border);
    padding: 60px 0 40px;
    margin-top: 40px;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

.footer-links {
    display: flex;
    gap: 32px;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--heading);
    text-decoration: none;
}

.copyright {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ===================================
   Screenshot Lightbox Modal
   =================================== */
body.lightbox-open {
    overflow: hidden;
}

.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--overlay);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    padding: 32px;
    cursor: zoom-out;
}

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

.lightbox-overlay img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 12px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
    cursor: zoom-out;
    animation: lightbox-in 0.2s ease;
}

@keyframes lightbox-in {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0;
    color: #fff;
    font-size: 1.4rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    line-height: 1;
}

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

/* ===================================
   Light-mode glow & accent overrides
   =================================== */
@media (prefers-color-scheme: light) {
    .bg-glow {
        background:
            radial-gradient(ellipse 80% 50% at 50% -20%, rgba(217, 119, 6, 0.08) 0%, transparent 50%),
            radial-gradient(ellipse 60% 40% at 80% 60%, rgba(234, 88, 12, 0.05) 0%, transparent 50%);
    }

    .supported-box {
        background: var(--surface-light);
    }

    .badge {
        background: rgba(217, 119, 6, 0.08);
        border-color: rgba(217, 119, 6, 0.25);
    }

    .highlight {
        background: linear-gradient(135deg, rgba(217, 119, 6, 0.06) 0%, rgba(234, 88, 12, 0.06) 100%);
        border-color: rgba(217, 119, 6, 0.25);
    }

    .format-tag {
        background: rgba(217, 119, 6, 0.06);
        border-color: rgba(217, 119, 6, 0.2);
    }

    .feature-category {
        background: rgba(217, 119, 6, 0.04);
    }

    .screenshot-card {
        box-shadow: 0 20px 60px rgba(0, 0, 0, var(--shadow-strength));
    }

    .note-box {
        background: rgba(217, 119, 6, 0.06);
        border-color: rgba(217, 119, 6, 0.25);
    }

    .coming-soon-box {
        background: linear-gradient(135deg, rgba(217, 119, 6, 0.06) 0%, rgba(234, 88, 12, 0.06) 100%);
        border-color: rgba(217, 119, 6, 0.25);
    }

    .screenshot-tab.active {
        background: rgba(217, 119, 6, 0.1);
    }

    .feature-icon.auto { background: rgba(22, 163, 74, 0.1); }
    .feature-icon.validate { background: rgba(220, 38, 38, 0.1); }
    .feature-icon.json { background: rgba(14, 165, 233, 0.1); }
    .feature-icon.tools { background: rgba(217, 119, 6, 0.1); }
    .feature-icon.customize { background: rgba(147, 51, 234, 0.1); }
    .feature-icon.keyboard { background: rgba(79, 70, 229, 0.1); }
}

/* ===================================
   Responsive
   =================================== */
@media (max-width: 768px) {
    body.nav-open {
        overflow: hidden;
    }

    .header-inner {
        padding: 14px 20px;
    }

    .nav-toggle {
        display: inline-flex;
        flex-shrink: 0;
    }

    nav {
        display: none;
        position: absolute;
        top: calc(100% + 12px);
        left: 20px;
        right: 20px;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px;
        border: 1px solid rgba(63, 63, 70, 0.72);
        border-radius: 18px;
        background: rgba(24, 24, 27, 0.97);
        box-shadow: 0 24px 54px rgba(0, 0, 0, calc(var(--shadow-strength) + 0.2));
    }

    .header-inner[data-nav-open="true"] nav {
        display: flex;
    }

    nav a {
        display: block;
        padding: 11px 14px;
        border-radius: 12px;
        color: var(--text);
    }
    nav a:hover,
    nav a.active {
        background: rgba(245, 158, 11, 0.1);
        color: var(--heading);
        text-decoration: none;
    }
    
    .hero {
        padding: 60px 0 40px;
    }
    
    h1 {
        font-size: 2.2rem;
    }
    
    section {
        padding: 60px 0;
    }
    
    .content {
        padding: 40px 20px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }

    .validation-section {
        padding: 32px 24px;
    }
    
    .validation-grid {
        grid-template-columns: 1fr;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .supported-box {
        padding: 22px 20px;
    }

    .supported-box h4 {
        font-size: 1rem;
    }

    .supported-copy {
        font-size: 0.94rem;
        margin-bottom: 14px;
    }

    .format-tag {
        font-size: 0.9rem;
        padding: 8px 12px;
    }
    
    .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    .version-card {
        padding: 24px 20px;
    }
    
    .footer-inner {
        flex-direction: column;
        text-align: center;
    }
}

@media (prefers-color-scheme: light) and (max-width: 768px) {
    nav {
        background: rgba(255, 255, 255, 0.98);
        border-color: rgba(209, 213, 219, 0.92);
    }
}

/* ===================================
   User Manual (manual.html)
   Built on the tokens above, so it
   follows the site's dark/light modes.
   =================================== */

/* The site header is sticky, so an anchored heading would otherwise land underneath it.
   scroll-margin-top sits on the jump target, so it works whichever element scrolls —
   unlike scroll-padding-top, which only applies to the scroll container itself. */
.manual-page .manual-topic {
    scroll-margin-top: 88px;
}

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--primary);
    color: #1a1205;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: 0 0 10px 0;
}

.skip-link:focus {
    left: 0;
}

/* `.manual-topic p` is (0,1,1) and would otherwise win over a bare `.eyebrow`,
   which quietly turned every kicker inside a topic muted grey instead of amber. */
.eyebrow,
.manual-topic .eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary-text);
    margin-bottom: 6px;
}

/* ---- Hero ----
   One centred hero shared by the manual, the guides hub, every guide, the
   changelog and the privacy page, closed by a thin rule. Everything inside it
   centres, so a left-aligned headline can never end up beside centred buttons. */
.manual-hero {
    padding: 64px 0 36px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.manual-hero-lede,
.manual-hero .section-desc {
    margin-left: auto;
    margin-right: auto;
}

.manual-hero .manual-facts {
    /* the shared ul rule carries margin-left: 24px, which throws a centred
       flex row off-axis */
    justify-content: center;
    margin-left: 0;
    margin-right: 0;
}

.manual-hero h1 {
    font-size: clamp(2.1rem, 4.5vw, 3.1rem);
    /* 1.1 clipped the descenders on y and g */
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--heading);
    margin: 14px 0 16px;
    padding-bottom: 0.06em;
}

.manual-hero-lede {
    font-size: 1.08rem;
    color: var(--text-muted);
    max-width: 60ch;
}

.manual-hero-actions {
    margin-top: 26px;
}

.manual-facts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 26px;
}

.manual-facts li {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 14px;
}













/* ---- Layout ---- */
.manual-layout {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
    padding-bottom: 96px;
}

.manual-sidebar {
    position: sticky;
    top: 92px;
}

.manual-toc-toggle {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--heading);
    font: inherit;
    font-weight: 700;
    padding: 13px 16px;
    cursor: pointer;
    margin-bottom: 12px;
}

.manual-toc-toggle-state {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
}

/* This is a <nav>, and the site stylesheet gives bare nav elements a horizontal flex
   row. Reset that here or the heading and the list sit side by side and the list
   overflows its own scroll box. */
.manual-toc {
    display: block;
    align-items: initial;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    max-height: calc(100vh - 132px);
    overflow-y: auto;
}

.manual-toc > p {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.manual-toc ol {
    list-style: none;
    counter-reset: toc;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.manual-toc li {
    counter-increment: toc;
}

/* The number is a flex item rather than an absolutely positioned ::before: absolute
   positioning aligned the two boxes by their top edges, and because the counter is set
   smaller than the label its baseline landed ~3px high. Baseline alignment is what the
   eye reads as "on the same line". */
.manual-toc a {
    display: flex;
    align-items: baseline;
    gap: 9px;
    font-size: 0.875rem;
    color: var(--text-muted);
    text-decoration: none;
    padding: 7px 10px;
    border-radius: 8px;
}

.manual-toc a::before {
    content: counter(toc);
    flex: none;
    min-width: 15px;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-weight: 700;
}

.manual-toc a:hover {
    background: var(--surface-light);
    color: var(--text);
}

.manual-toc a.is-current {
    background: var(--surface-light);
    color: var(--primary);
    font-weight: 600;
}

.manual-toc a.is-current::before {
    color: var(--primary);
}

/* ---- Article ---- */
.manual-article {
    min-width: 0;
}

.manual-topic {
    padding: 40px 0;
    border-bottom: 1px solid var(--border);
}

.manual-topic:first-of-type {
    padding-top: 8px;
}

.manual-topic:last-of-type {
    border-bottom: 0;
}

.manual-topic h2 {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--heading);
    margin-bottom: 16px;
}

.manual-topic h3 {
    font-size: 1.08rem;
    color: var(--heading);
    margin: 30px 0 10px;
}

.manual-topic p {
    color: var(--text-muted);
    margin-bottom: 14px;
    max-width: 72ch;
}

.manual-lede {
    font-size: 1.06rem;
    color: var(--text) !important;
}

/* Inline links only. Without :not(.btn) this beats .btn-primary on specificity, which
   painted the button label amber on an amber gradient and replaced the secondary
   button's bottom border with a transparent one. */
/* A link has to be identifiable without relying on colour, so prose links carry a
   permanent underline rather than revealing one on hover. Nav items, buttons, cards
   and the contents list are deliberately excluded — they read as controls, not as
   links in a sentence. */
.manual-topic a:not(.btn),
.manual-hero-lede a,
.copyright a,
.note-box a,
.content p a,
.content li a {
    color: var(--primary-text);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.manual-topic a:not(.btn):hover,
.manual-hero-lede a:hover,
.copyright a:hover,
.note-box a:hover,
.content p a:hover,
.content li a:hover {
    color: var(--heading);
}

.manual-topic code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.85em;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 1px 6px;
    color: var(--text);
    word-break: break-word;
}

.manual-topic kbd {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.8em;
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: 2px 7px;
    color: var(--text);
    white-space: nowrap;
}

/* ---- Lists ---- */
.manual-steps {
    counter-reset: step;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 18px;
    max-width: 72ch;
}

.manual-steps > li {
    counter-increment: step;
    position: relative;
    padding-left: 42px;
    color: var(--text-muted);
}

.manual-steps > li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--primary);
    color: #1a1205;
    font-size: 0.8rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.manual-check-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0 0 18px;
    max-width: 72ch;
}

.manual-check-list li {
    position: relative;
    padding-left: 28px;
    color: var(--text-muted);
}

.manual-check-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.62em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
}

/* ---- Callouts ---- */
.manual-callout {
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 0 12px 12px 0;
    background: var(--surface);
    padding: 16px 20px;
    margin: 20px 0;
    color: var(--text-muted);
    font-size: 0.95rem;
    max-width: 76ch;
}

.manual-callout strong {
    color: var(--heading);
}

.manual-callout.info {
    border-left-color: var(--primary);
}

.manual-callout.warning {
    border-left-color: var(--warning);
}

.manual-callout.danger {
    border-left-color: var(--error);
}

/* ---- Tables ---- */
.manual-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 14px;
    margin: 20px 0 24px;
    background: var(--surface);
}

.manual-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    min-width: 480px;
}

.manual-table-wrap caption {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 14px 18px 0;
}

.manual-table-wrap th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.manual-table-wrap td {
    padding: 13px 18px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    vertical-align: top;
}

.manual-table-wrap tbody tr:last-child td {
    border-bottom: 0;
}

.manual-table-wrap th[scope="row"] {
    padding: 13px 18px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    text-align: left;
    background: none;
    text-transform: none;
    letter-spacing: normal;
    font-size: inherit;
    color: var(--text);
    font-weight: 600;
}

.manual-table-wrap tbody tr:last-child th[scope="row"] {
    border-bottom: 0;
}

/* ---- Card grid ---- */
.manual-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin: 22px 0;
}

.manual-mini-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px;
}

.manual-card-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary);
    color: #1a1205;
    font-weight: 800;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.manual-mini-card h3 {
    margin: 0 0 10px;
    font-size: 1rem;
    color: var(--heading);
}

.manual-mini-card ol {
    padding-left: 18px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.manual-mini-card li {
    margin-bottom: 5px;
}

/* ---- Disclosure ---- */
.manual-disclosure {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    margin-bottom: 10px;
    overflow: hidden;
}

.manual-disclosure > summary {
    cursor: pointer;
    padding: 15px 20px;
    font-weight: 600;
    color: var(--heading);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
}

.manual-disclosure > summary::-webkit-details-marker {
    display: none;
}

.manual-disclosure > summary::before {
    content: "+";
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--border);
    color: var(--primary);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.manual-disclosure[open] > summary::before {
    content: "\2212";
}

.manual-disclosure > summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.manual-disclosure > *:not(summary) {
    padding: 0 20px;
    color: var(--text-muted);
    font-size: 0.94rem;
}

.manual-disclosure > ol,
.manual-disclosure > ul {
    padding-left: 42px;
    padding-bottom: 16px;
}

.manual-disclosure > p {
    padding-bottom: 16px;
    max-width: none;
}

/* ---- Inline detail figures ----
   Tight crops of one control, shown at their captured size so the UI stays crisp
   rather than being upscaled. They only shrink when the column is narrower. */
.manual-figure {
    margin: 20px 0 24px;
    max-width: 100%;
}

.manual-figure img {
    max-width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.manual-figure-narrow img {
    max-width: min(100%, 520px);
}

.manual-figure figcaption {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 9px;
}

/* ---- Screenshot ---- */
.manual-screenshot {
    margin: 22px 0 26px;
}

.manual-screenshot img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.manual-screenshot figcaption {
    font-size: 0.84rem;
    color: var(--text-muted);
    margin-top: 10px;
}




.manual-footnote {
    font-size: 0.86rem;
    margin-top: 18px;
}

/* ---- Responsive ---- */
@media (max-width: 1000px) {

    .manual-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .manual-sidebar {
        position: static;
    }

    .manual-toc-toggle {
        display: flex;
    }

    .manual-toc {
        max-height: none;
    }
}

@media (max-width: 640px) {
    .manual-hero {
        padding: 48px 0 32px;
    }

    .manual-topic {
        padding: 30px 0;
    }

}




.guides-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 8px 0 56px;
}

.guide-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 26px;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.2s, transform 0.2s;
}

.guide-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
}

.guide-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 18px;
}

.guide-card h2 {
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--heading);
    margin-bottom: 10px;
}

.guide-card p {
    font-size: 0.94rem;
    line-height: 1.62;
    color: var(--text-muted);
    margin: 0;
}

@media (max-width: 1100px) {
    .guides-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .guides-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* ============================================================
   "Deep dive" pointers from the manual to the guides.
   Prefixed with .manual-topic so it outranks `.manual-topic p`
   on specificity; a bare .manual-related would lose.
   ============================================================ */
.manual-topic .manual-related {
    margin: 26px 0 0;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.manual-topic .manual-related strong {
    color: var(--heading);
    font-weight: 700;
    margin-right: 2px;
}

/* The changelog and privacy body sits directly under the shared hero, which
   already supplies the gap; .content's own 60px top would double it. */
.manual-hero + .content {
    padding-top: 0;
}

/* ============================================================
   Manual search bar — a horizontal strip between the hero and
   the article, not a boxed card. The input carries no border of
   its own so the strip itself reads as the line.
   ============================================================ */
.manual-hero:has(+ .manual-searchbar) {
    margin-bottom: 0;
}

.manual-searchbar {
    border-bottom: 1px solid var(--border);
    margin-bottom: 40px;
}

.manual-searchbar-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
}

.manual-searchbar-inner > svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--text-muted);
}

.manual-searchbar input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    padding: 8px 0;
    font: inherit;
    font-size: 0.98rem;
    color: var(--text);
}

.manual-searchbar input::placeholder {
    color: var(--text-muted);
}

.manual-searchbar input:focus {
    outline: none;
}

.manual-searchbar:focus-within {
    border-bottom-color: var(--primary);
}

.manual-searchbar .manual-search-status {
    flex: none;
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.manual-searchbar button {
    flex: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: none;
    padding: 5px 14px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}

.manual-searchbar button:hover {
    border-color: var(--primary);
    color: var(--heading);
}

@media (max-width: 620px) {
    .manual-searchbar .manual-search-status {
        display: none;
    }
}