/* ═══════════════════════════════════════════════════════════════════════
   PostRequest — Marketing Site Styles
   Built on the product's own design system (CI): system font, near-black
   ink, off-white canvas, ChatGPT-green accent, generous whitespace.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Design Tokens (mirrors dashboard/assets/style.css) ────────────────── */
:root {
    --color-text: #111;
    --color-text-muted: #666;
    --color-border: #e5e5e5;
    --color-bg-page: #ffffff;
    --color-bg-soft: #f8f8f8;
    --color-bg-card: #fff;

    --color-accent: #10a37f;
    --color-accent-dark: #0d8467;
    --color-accent-soft: #e7f6f1;
    --color-error: #ef4444;
    --color-warning: #f59e0b;

    --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.05);
    --shadow-md: 0 4px 16px rgba(17, 17, 17, 0.06);
    --shadow-lg: 0 24px 60px rgba(17, 17, 17, 0.10);

    --maxw: 1120px;
    --nav-h: 64px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }

body {
    font-family: var(--font-base);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg-page);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 { line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.mono { font-family: var(--font-mono); }
.muted { color: var(--color-text-muted); }
.accent { color: var(--color-accent); }
.center { text-align: center; }

/* ── Brand mark ────────────────────────────────────────────────────────── */
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.brand-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    background: var(--color-text); color: #fff;
    font-weight: 700; font-size: 12px; letter-spacing: 0.02em;
    border-radius: 8px; flex-shrink: 0;
}
.brand-text { font-size: 16px; letter-spacing: -0.01em; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1;
    padding: 12px 20px; border-radius: var(--radius-sm);
    border: 1px solid transparent; cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-dark); }
.btn-outline { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn-outline:hover { background: var(--color-bg-soft); }
.btn-ghost { background: transparent; color: var(--color-text); }
.btn-ghost:hover { background: var(--color-bg-soft); }
.btn-lg { padding: 15px 28px; font-size: 16px; }
.btn-block { width: 100%; }

/* ── Top navigation ────────────────────────────────────────────────────── */
.nav {
    position: sticky; top: 0; z-index: 100;
    height: var(--nav-h);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--color-border);
}
.nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: 15px; color: var(--color-text-muted); transition: color .15s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--color-text); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--color-text); }

/* ── Sections ──────────────────────────────────────────────────────────── */
section { padding: 96px 0; }
.section-head { max-width: 680px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { font-size: 36px; margin-bottom: 14px; }
.section-head p { font-size: 18px; color: var(--color-text-muted); }
.eyebrow {
    display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--color-accent); margin-bottom: 16px;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero { padding: 88px 0 72px; text-align: center; position: relative; overflow: hidden; }
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(60% 50% at 50% 0%, rgba(16, 163, 127, 0.08), transparent 70%),
        linear-gradient(180deg, var(--color-bg-soft), #fff 55%);
}
.hero .badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 999px;
    background: #fff; border: 1px solid var(--color-border);
    font-size: 13px; color: var(--color-text-muted); box-shadow: var(--shadow-sm);
    margin-bottom: 28px;
}
.hero .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }
.hero h1 { font-size: 60px; letter-spacing: -0.03em; margin-bottom: 22px; }
.hero h1 .grad {
    background: linear-gradient(120deg, var(--color-accent), #14b8a6);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-sub { font-size: 20px; color: var(--color-text-muted); max-width: 640px; margin: 0 auto 34px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-meta { margin-top: 22px; font-size: 14px; color: var(--color-text-muted); display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta svg { color: var(--color-accent); }

/* ── Code showcase ─────────────────────────────────────────────────────── */
.code-window {
    max-width: 720px; margin: 56px auto 0;
    background: #0f1115; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); overflow: hidden; text-align: left;
}
.code-bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid #22252c; }
.code-bar .c { width: 11px; height: 11px; border-radius: 50%; }
.code-bar .c1 { background: #ff5f57; } .code-bar .c2 { background: #febc2e; } .code-bar .c3 { background: #28c840; }
.code-bar .file { margin-left: 10px; font-family: var(--font-mono); font-size: 12px; color: #7d8590; }
.code-window pre { margin: 0; padding: 22px 24px; overflow-x: auto; }
.code-window code { font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7; color: #e6edf3; }
.tok-key { color: #ff7b72; } .tok-str { color: #7ee787; } .tok-fn { color: #d2a8ff; }
.tok-com { color: #8b949e; } .tok-var { color: #79c0ff; }

/* ── Feature grid ──────────────────────────────────────────────────────── */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card {
    background: var(--color-bg-card); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: 28px;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #d8d8d8; }
.feature-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--radius-sm);
    background: var(--color-accent-soft); color: var(--color-accent-dark);
    margin-bottom: 18px;
}
.feature-card h3 { font-size: 18px; margin-bottom: 8px; }
.feature-card p { font-size: 15px; color: var(--color-text-muted); }
.card-link { display: inline-block; margin-top: 6px; color: var(--color-accent-dark); font-weight: 600; white-space: nowrap; }
.card-link:hover { color: var(--color-accent); }
.tool-cap {
    font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--color-accent-dark); margin-bottom: 8px;
}

/* ── How it works ──────────────────────────────────────────────────────── */
.section-soft { background: var(--color-bg-soft); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: step; }
.step { position: relative; }
.step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--color-text); color: #fff; font-weight: 600; font-size: 16px;
    margin-bottom: 18px;
}
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { color: var(--color-text-muted); font-size: 15px; }

/* ── Highlights / split ────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split h2 { font-size: 32px; margin-bottom: 18px; }
.split p { font-size: 17px; color: var(--color-text-muted); margin-bottom: 16px; }
.check-list { list-style: none; display: grid; gap: 14px; margin-top: 8px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.check-list .ck {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    background: var(--color-accent-soft); color: var(--color-accent-dark);
    display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}
.panel {
    background: var(--color-bg-card); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden;
}
.panel-head { padding: 16px 20px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.panel-body { padding: 20px; }
.stat-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.stat-row:last-child { border-bottom: none; }
.stat-row .label { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.pill { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.pill-ok { background: var(--color-accent-soft); color: var(--color-accent-dark); }
.pill-warn { background: #fef3e2; color: #b45309; }
.pill-err { background: #fde8e8; color: #b91c1c; }
.dot-ind { width: 9px; height: 9px; border-radius: 50%; }
.dot-ok { background: var(--color-accent); } .dot-warn { background: var(--color-warning); } .dot-err { background: var(--color-error); }

/* ── CTA / contact ─────────────────────────────────────────────────────── */
.cta {
    background: var(--color-text); color: #fff; border-radius: var(--radius-xl);
    padding: 64px; text-align: center; position: relative; overflow: hidden;
}
.cta::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: radial-gradient(70% 120% at 50% 0%, rgba(16, 163, 127, 0.35), transparent 60%);
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { font-size: 38px; margin-bottom: 14px; }
.cta p { font-size: 18px; color: rgba(255, 255, 255, 0.7); max-width: 520px; margin: 0 auto 32px; }
.contact-form { display: flex; gap: 10px; max-width: 480px; margin: 0 auto; }
.contact-form input[type="email"] {
    flex: 1; font-family: inherit; font-size: 16px; padding: 14px 18px;
    border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08); color: #fff;
}
.contact-form input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.5); }
.contact-form input[type="email"]:focus { outline: none; border-color: var(--color-accent); background: rgba(255, 255, 255, 0.12); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin-top: 16px; font-size: 14px; min-height: 20px; }
.form-note.ok { color: #6ee7b7; }
.form-note.err { color: #fca5a5; }
.cta-alt { margin-top: 18px; font-size: 14px; color: rgba(255, 255, 255, 0.6); }
.cta-alt a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.footer { padding: 48px 0; border-top: 1px solid var(--color-border); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer-links a { font-size: 14px; color: var(--color-text-muted); }
.footer-links a:hover { color: var(--color-text); }
.footer .copy { font-size: 14px; color: var(--color-text-muted); }
.footer-link-btn {
    font-family: inherit; font-size: 14px; line-height: inherit;
    color: var(--color-text-muted);
    background: none; border: none; padding: 0; margin: 0; cursor: pointer;
    -webkit-appearance: none; appearance: none;
}
.footer-link-btn:hover { color: var(--color-text); }

/* ── Modal / overlay (imprint) ─────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(17, 17, 17, 0.5); }
.modal-card {
    position: relative; width: 100%; max-width: 460px;
    background: var(--color-bg-card); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: 32px; animation: modal-in .18s ease;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.modal-close {
    position: absolute; top: 16px; right: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    background: none; border: none; color: var(--color-text-muted); cursor: pointer;
}
.modal-close:hover { background: var(--color-bg-soft); color: var(--color-text); }
.modal-card h2 { font-size: 22px; margin-bottom: 20px; }
.imprint-body { font-size: 15px; line-height: 1.6; color: var(--color-text-muted); }
.imprint-body p { margin: 0 0 14px; }
.imprint-body p:last-child { margin-bottom: 0; }
.imprint-name { color: var(--color-text); font-weight: 600; }
.imprint-body a { color: var(--color-accent-dark); }
.imprint-body a:hover { color: var(--color-accent); }

/* ═══════════════════════════════════════════════════════════════════════
   Documentation / user-guide page
   ═══════════════════════════════════════════════════════════════════════ */
/* Keep the .container's 24px side padding (vertical padding overrides it) so the
   guide aligns with the nav's logo/button on desktop and has the same side
   margin as every other page on mobile. */
.doc-shell { display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start; padding: 48px 24px 96px; }
.doc-nav { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; max-height: calc(100vh - var(--nav-h) - 48px); overflow-y: auto; }
.doc-nav h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin: 22px 0 10px; }
.doc-nav h4:first-child { margin-top: 0; }
.doc-nav a {
    display: block; font-size: 14px; color: var(--color-text-muted);
    padding: 6px 12px; border-radius: var(--radius-sm); border-left: 2px solid transparent;
    transition: color .12s ease, background .12s ease;
}
.doc-nav a:hover { color: var(--color-text); background: var(--color-bg-soft); }
.doc-nav a.active { color: var(--color-accent-dark); border-left-color: var(--color-accent); font-weight: 500; }

.doc-content { min-width: 0; max-width: 760px; }
.doc-content h1 { font-size: 40px; margin-bottom: 12px; }
.doc-lede { font-size: 19px; color: var(--color-text-muted); margin-bottom: 40px; }
.doc-content section { padding: 0; scroll-margin-top: calc(var(--nav-h) + 24px); }
.doc-content section + section { margin-top: 56px; }
.doc-content h2 { font-size: 26px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); }
.doc-content h3 { font-size: 18px; margin: 28px 0 10px; }
.doc-content p { margin-bottom: 16px; color: #2b2b2b; }
.doc-content ul, .doc-content ol { margin: 0 0 16px 22px; }
.doc-content li { margin-bottom: 8px; color: #2b2b2b; }
.doc-content code {
    font-family: var(--font-mono); font-size: 0.88em;
    background: var(--color-bg-soft); border: 1px solid var(--color-border);
    padding: 1px 6px; border-radius: 5px;
}
.doc-content pre {
    background: #0f1115; color: #e6edf3; border-radius: var(--radius-md);
    padding: 18px 20px; overflow-x: auto; margin: 0 0 20px;
}
.doc-content pre code { background: none; border: none; padding: 0; font-size: 13.5px; line-height: 1.7; color: inherit; }
.callout {
    display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--radius-md);
    background: var(--color-accent-soft); border: 1px solid #cfeee4; margin: 0 0 20px;
}
.callout .ic { color: var(--color-accent-dark); flex-shrink: 0; margin-top: 2px; }
.callout p { margin: 0; font-size: 15px; color: #17493d; }
.callout.warn { background: #fef8ec; border-color: #f6e3bf; }
.callout.warn .ic { color: #b45309; } .callout.warn p { color: #7a4d09; }
.doc-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-text-muted); margin-bottom: 28px; }
.doc-back:hover { color: var(--color-text); }

/* ── Guide: rendered-markdown elements ─────────────────────────────────── */
.doc-content h2, .doc-content h3, .doc-content h4, .doc-content h5 { scroll-margin-top: calc(var(--nav-h) + 24px); }
.doc-content h2 { margin-top: 48px; }
.doc-content h2:first-of-type { margin-top: 0; }
.doc-content h4 { font-size: 15px; font-weight: 600; margin: 22px 0 8px; }
.doc-content h5 { font-size: 13.5px; font-weight: 600; color: var(--color-text-muted); margin: 18px 0 6px; }
.doc-content blockquote {
    margin: 0 0 20px; padding: 2px 18px; border-left: 3px solid var(--color-accent);
    background: var(--color-accent-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.doc-content blockquote p { color: #17493d; }
.doc-content blockquote p:last-child { margin-bottom: 0; }
.table-wrap { overflow-x: auto; margin: 0 0 20px; }
.doc-content table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.doc-content th, .doc-content td { text-align: left; padding: 10px 14px; border: 1px solid var(--color-border); vertical-align: top; }
.doc-content thead th { background: var(--color-bg-soft); font-weight: 600; }
.doc-content tbody tr:nth-child(even) { background: #fafafa; }
.doc-nav a.nav-h2 { font-weight: 600; color: var(--color-text); margin-top: 20px; }
.doc-nav a.nav-h2:first-child { margin-top: 0; }

/* ── Guide search: top bar, docked field, results overlay, jump highlight ─ */
/* min-height keeps the row from collapsing when the search docks into the nav,
   which would otherwise shift the page and make the dock trigger oscillate. */
.doc-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; margin-bottom: 28px; }
.doc-topbar .doc-back { margin-bottom: 0; }

.guide-search { position: relative; display: flex; align-items: center; flex: 0 1 320px; margin: 0; }
.guide-search-icon { position: absolute; left: 12px; color: var(--color-text-muted); pointer-events: none; }
.guide-search-input {
    width: 100%; font-family: inherit; font-size: 14px; color: var(--color-text);
    padding: 9px 14px 9px 36px;
    background: var(--color-bg-soft); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.guide-search-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); background: #fff; }
.guide-search-input::placeholder { color: var(--color-text-muted); }
/* Remove the native clear/decoration so it matches the design in both slots. */
.guide-search-input::-webkit-search-decoration,
.guide-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Docked on scroll — takes the place of the CTA buttons. The search field is
   NOT moved in the DOM (that disturbs focus); it stays in the top bar and is
   repositioned with position:fixed to sit in the nav, aligned to the container
   right edge and vertically centred in the nav bar. */
/* Keep the .nav-links wrapper at its ORIGINAL size: hide its own links with
   visibility (not display:none) so their boxes still occupy space. The wrapper
   therefore keeps the exact slot it has in the normal nav. */
body.guide-docked .nav-links { position: relative; }
/* :not(.nav-mobile-link) so the mobile hamburger points stay visible when the
   menu is opened while docked (they share the .nav-links container). */
body.guide-docked .nav-links > a:not(.nav-mobile-link) { visibility: hidden; }
/* Same trick for the CTA button, so space-between geometry is unchanged. */
body.guide-docked .nav-cta .btn { visibility: hidden; }
body.guide-docked .doc-topbar .guide-search {
    position: fixed; top: 0; z-index: 101;
    height: var(--nav-h); width: 280px; margin: 0;
    right: max(24px, calc((100vw - var(--maxw)) / 2 + 24px));
}
/* "Home" + "User Guide" nav points shown only while the search is docked.
   Absolutely positioned at the left edge of the .nav-links wrapper (which keeps
   its original size), so the first point starts exactly where Features does. */
.nav-docklinks { display: flex; align-items: center; gap: 28px; }
body.guide-docked .nav-docklinks {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
}
.nav-docklinks a { font-size: 15px; color: var(--color-text-muted); transition: color .15s ease; }
.nav-docklinks a:hover { color: var(--color-text); }

/* Results overlay (command-palette style, anchored near the top). */
.search-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 88px 24px 24px; }
.search-modal[hidden] { display: none; }
.search-modal-backdrop { position: absolute; inset: 0; background: rgba(17, 17, 17, 0.4); }
.search-modal-panel {
    position: relative; width: 100%; max-width: 640px; max-height: calc(100vh - 140px);
    display: flex; flex-direction: column;
    background: var(--color-bg-card); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
    animation: modal-in .18s ease;
}
.search-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--color-border); }
.search-modal-count { font-size: 13px; color: var(--color-text-muted); }
.search-modal-head .modal-close { position: static; }
.search-results { overflow-y: auto; padding: 8px; }
.search-result { display: block; padding: 12px 14px; border-radius: var(--radius-md); }
.search-result:hover, .search-result:focus { background: var(--color-bg-soft); }
.search-result-crumb { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--color-accent-dark); margin-bottom: 3px; }
.search-result-title { display: block; font-size: 15px; font-weight: 600; color: var(--color-text); margin-bottom: 4px; }
.search-result-snippet { display: block; font-size: 13.5px; line-height: 1.55; color: var(--color-text-muted); }
.search-result-snippet mark { background: var(--color-accent-soft); color: var(--color-accent-dark); border-radius: 3px; padding: 0 2px; }
.search-empty { padding: 24px 16px; margin: 0; color: var(--color-text-muted); font-size: 14px; }

/* The exact matched keyword(s) after a jump (yellow, fades out after ~10s). */
.doc-content .search-term {
    background: #fde68a; color: inherit;
    border-radius: 2px; padding: 0 1px;
    transition: background-color 1.4s ease;
}
.doc-content .search-term.fading { background: transparent; }

@media (max-width: 560px) {
    .guide-search { flex: 1 1 auto; }
    .search-modal { padding: 72px 14px 14px; }
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .nav-links, .nav-cta .btn-outline { display: none; }
    .nav-toggle { display: inline-flex; }

    /* Guide page hamburger: only "Home" + "User Guide" — the page's standard
       nav links are hidden while the two mobile points are inserted. */
    body.guide-mobile-nav #navLinks > a:not(.nav-mobile-link) { display: none; }

    /* Docked (scrolled down): the search swaps into the nav in place of "Get in
       touch" (which stays visible at the top of the page). The brand text is
       dropped while docked to give the search room; the icon stays. */
    body.guide-docked .brand-text { display: none; }
    body.guide-docked .nav-cta .btn-primary { display: none; }
    body.guide-docked .doc-topbar .guide-search {
        left: calc(24px + 72px); right: calc(24px + 46px); width: auto;
    }
    .nav.open .nav-links {
        display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
        position: absolute; top: var(--nav-h); left: 0; right: 0;
        background: #fff; border-bottom: 1px solid var(--color-border);
        padding: 12px 24px 20px;
        max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
    }
    .nav.open .nav-links a { padding: 10px 0; width: 100%; }

    /* Guide ToC relocated into the open hamburger: un-hide it and drop the
       sticky/scroll sidebar behaviour so it flows as a plain list in the menu. */
    body.guide-mobile-nav .nav.open #navLinks .doc-nav {
        display: block; position: static; max-height: none; overflow: visible;
        width: 100%; margin: 0;
    }
    /* No extra gap between Home and the ToC — each row's padding does the spacing. */
    body.guide-mobile-nav .nav.open .nav-links { gap: 0; }
    /* Style the ToC entries like the hamburger's nav links (drop the sidebar's
       smaller text, indent and border-left indicator). Section headings (the H2
       entries) and Home are bold; sub-entries stay regular. */
    body.guide-mobile-nav .nav.open #navLinks .nav-mobile-link {
        font-weight: 600; color: var(--color-text);
    }
    body.guide-mobile-nav .nav.open #navLinks .doc-nav a {
        font-size: 15px; font-weight: 400; color: var(--color-text-muted);
        padding: 10px 0; margin: 0; border-left: 0; border-radius: 0; background: none;
    }
    body.guide-mobile-nav .nav.open #navLinks .doc-nav a.nav-h2 {
        font-weight: 600; color: var(--color-text);
    }
    body.guide-mobile-nav .nav.open #navLinks .doc-nav a:hover,
    body.guide-mobile-nav .nav.open #navLinks .doc-nav a.active {
        color: var(--color-text); background: none;
    }
    .hero h1 { font-size: 40px; }
    .hero-sub { font-size: 18px; }
    section { padding: 64px 0; }
    .section-head h2 { font-size: 28px; }
    .feature-grid, .steps { grid-template-columns: 1fr; }
    .split { grid-template-columns: 1fr; gap: 36px; }
    .cta { padding: 40px 24px; }
    .cta h2 { font-size: 28px; }
    .contact-form { flex-direction: column; }
    .doc-shell { grid-template-columns: 1fr; gap: 0; }
    .doc-nav { display: none; }
    .doc-content h1 { font-size: 30px; }
}