/* =========================================================================
   Log My Business — marketing site
   Design tokens are lifted from the app's app.css so the public site and the
   product share one visual language. Reference tokens; never hardcode colors.
   ========================================================================= */

:root {
    color-scheme: light; /* marketing site commits to a single light theme for all visitors */

    /* Brand (indigo) — chrome only: header, footer */
    --brand:            #2D256F;
    --brand-hover:      #241D59;
    --brand-fg:         #FFFFFF;

    /* Action (blue) — the one accent for links/buttons */
    --primary:          #3C6CC3;
    --primary-hover:    #30569C;
    --primary-light:    #5C8CD9;
    --primary-fg:       #FFFFFF;
    --primary-rgb:      60, 108, 195;

    /* Surfaces */
    --bg:               #F3F6F9;
    --surface:          #FFFFFF;
    --surface-2:        #FBFCFE;
    --border:           #E4E6EF;
    --text:             #1A1A2E;
    --text-muted:       #6B7280;

    /* Status */
    --status-done:      #10B981;
    --status-blocked:   #EF4444;

    /* Marketing hero gradient (from app.css --gradient-primary) */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* Shape & type */
    --font-sans: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --radius:    10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.06);
    --shadow-md: 0 4px 6px rgba(16,24,40,.07), 0 2px 4px rgba(16,24,40,.06);
    --shadow-lg: 0 10px 20px rgba(16,24,40,.10), 0 4px 8px rgba(16,24,40,.05);

    --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

    --maxw: 1120px;
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--bg);
    line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 var(--space-4); }

.container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--space-6);
}
.container--narrow { max-width: 760px; }

/* ----------------------------------------------------------------- buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 10px 20px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--lg { padding: 13px 28px; font-size: 1.02rem; }

.btn--primary { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

.btn--outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn--outline:hover { background: rgba(var(--primary-rgb), .08); }

.btn--ghost { background: transparent; color: var(--brand-fg); }
.btn--ghost:hover { background: rgba(255,255,255,.14); }

/* On the gradient hero / CTA band */
.btn--on-accent { background: #fff; color: #4b3fb0; }
.btn--on-accent:hover { background: #f2f0ff; }
.btn--outline-on-accent { background: transparent; color: #fff; border-color: rgba(255,255,255,.8); }
.btn--outline-on-accent:hover { background: rgba(255,255,255,.14); }

/* ------------------------------------------------------------------ header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--brand);
    color: var(--brand-fg);
    box-shadow: var(--shadow-sm);
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    min-height: 64px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
.brand:hover { text-decoration: none; }
.brand__logo { height: 30px; width: auto; }
.brand__name { font-weight: 700; font-size: 1.05rem; }
.site-nav { display: flex; gap: var(--space-6); margin-inline: auto; }
.site-nav a { color: rgba(255,255,255,.9); font-weight: 500; }
.site-nav a:hover { color: #fff; text-decoration: none; }
.site-header__actions { display: flex; align-items: center; gap: var(--space-3); }

/* -------------------------------------------------------------------- hero */
.hero {
    background: var(--gradient-primary);
    color: #fff;
    padding-block: var(--space-16);
}
.hero__inner {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: var(--space-12);
    align-items: center;
}
.hero h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); font-weight: 700; }
.hero__sub { font-size: 1.18rem; opacity: .95; max-width: 34ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero__fineprint { margin-top: var(--space-4); opacity: .9; font-size: .9rem; }

.hero__art { display: flex; justify-content: center; }
.hero__card {
    width: 100%;
    max-width: 380px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    backdrop-filter: blur(4px);
    box-shadow: var(--shadow-lg);
}
.hero__card-row { height: 12px; border-radius: 6px; background: rgba(255,255,255,.55); margin-bottom: var(--space-3); }
.hero__card-row--short { width: 60%; background: rgba(255,255,255,.35); }
.hero__card-bars { display: flex; align-items: flex-end; gap: var(--space-3); height: 130px; margin-top: var(--space-6); }
.hero__card-bars span { flex: 1; background: rgba(255,255,255,.75); border-radius: 6px 6px 0 0; }

/* ---------------------------------------------------------------- sections */
.section { padding-block: var(--space-16); }
.section--muted { background: var(--surface-2); }
.section__title { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; text-align: center; }
.section__subtitle { font-size: 1.6rem; font-weight: 700; text-align: center; margin-top: var(--space-16); }
.section__lead { text-align: center; color: var(--text-muted); font-size: 1.1rem; margin: 0 auto var(--space-12); max-width: 52ch; }

/* feature grid */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
}
.feature-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .15s ease, transform .15s ease;
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.feature-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 12px;
    background: rgba(var(--primary-rgb), .12);
    font-size: 1.5rem; margin-bottom: var(--space-4);
}
.feature-card h3 { font-size: 1.2rem; }
.feature-card p { color: var(--text-muted); margin: 0; }

/* steps */
.steps__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-8);
}
.steps__grid li { text-align: center; }
.steps__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--primary); color: var(--primary-fg);
    font-size: 1.6rem; font-weight: 700; margin-bottom: var(--space-4);
}
.steps__grid h3 { font-size: 1.15rem; margin-bottom: var(--space-2); }
.steps__grid p { color: var(--text-muted); margin: 0; }

/* CTA band */
.cta { padding-block: var(--space-16); }
.cta__inner {
    background: var(--gradient-primary);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: var(--space-16) var(--space-8);
    text-align: center;
    box-shadow: var(--shadow-lg);
}
.cta__inner h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; }
.cta__inner p { opacity: .95; font-size: 1.1rem; }
.cta__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.cta__fineprint { margin-top: var(--space-4); opacity: .9; font-size: .9rem; }

/* ----------------------------------------------------------------- pricing */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-6);
    align-items: stretch;
    max-width: 960px;
    margin-inline: auto;
}
.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
    text-align: center;
}
.plan-card--featured {
    border: 2px solid var(--primary);
    box-shadow: var(--shadow-lg);
}
.plan-card__badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--primary); color: var(--primary-fg);
    font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
.plan-card__name { font-size: 1.3rem; margin-bottom: var(--space-3); }
.plan-card__price { margin-bottom: var(--space-3); }
.plan-card__amount { font-size: 2.4rem; font-weight: 700; color: var(--primary); }
.plan-card__period { color: var(--text-muted); font-size: .95rem; }
.plan-card__desc { color: var(--text-muted); min-height: 3em; margin: 0 0 var(--space-4); }
.plan-card__features {
    list-style: none; margin: 0 0 var(--space-6); padding: var(--space-4) 0 0;
    border-top: 1px solid var(--border);
    text-align: left; display: grid; gap: var(--space-2);
}
.plan-card__features li { position: relative; padding-left: 26px; }
.plan-card__features li::before {
    content: "✓"; position: absolute; left: 0; top: 0;
    color: var(--status-done); font-weight: 700;
}
.plan-card__cta { margin-top: auto; }

/* comparison table */
.compare__scroll { overflow-x: auto; margin-top: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius); }
.compare__table { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--surface); }
.compare__table th, .compare__table td { padding: 12px 16px; text-align: center; border-bottom: 1px solid var(--border); }
.compare__table thead th { background: var(--surface-2); font-size: .95rem; }
.compare__table tbody th[scope="row"] { text-align: left; font-weight: 500; }
.compare__table tbody tr:nth-child(even) { background: var(--surface-2); }
.compare__table tbody tr:last-child th, .compare__table tbody tr:last-child td { border-bottom: 0; }
.tick--yes { color: var(--status-done); font-weight: 700; }
.tick--no { color: var(--text-muted); }

/* faq */
.faq { max-width: 760px; margin-inline: auto; margin-top: var(--space-8); }
.faq__item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-6);
    margin-bottom: var(--space-3);
}
.faq__item summary {
    cursor: pointer; font-weight: 600; list-style: none;
    display: flex; justify-content: space-between; align-items: center;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; color: var(--primary); font-size: 1.4rem; line-height: 1; }
.faq__item[open] summary::after { content: "–"; }
.faq__item p { color: var(--text-muted); margin: var(--space-3) 0 0; }

/* notices */
.notice { padding: var(--space-4) var(--space-6); border-radius: var(--radius); max-width: 640px; margin: var(--space-8) auto 0; text-align: center; }
.notice--error { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.35); color: var(--text); }

/* prose (privacy/error/etc.) */
.prose .container { }
.prose h1 { font-size: 2rem; }
.prose__meta { color: var(--text-muted); font-size: .9rem; }
.prose p { color: var(--text); }

/* ------------------------------------------------------------------ footer */
.site-footer { background: var(--brand); color: rgba(255,255,255,.85); padding-block: var(--space-12) var(--space-6); margin-top: var(--space-8); }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-8); }
.brand--footer .brand__name { color: #fff; }
.site-footer__brand p { opacity: .7; max-width: 34ch; }
.site-footer__col h4 { color: #fff; font-size: .95rem; margin-bottom: var(--space-3); }
.site-footer__col a { display: block; color: rgba(255,255,255,.75); padding: 3px 0; }
.site-footer__col a:hover { color: #fff; text-decoration: none; }
.site-footer__legal { border-top: 1px solid rgba(255,255,255,.12); margin-top: var(--space-8); padding-top: var(--space-6); text-align: center; opacity: .7; font-size: .9rem; }

/* --------------------------------------------------------------- responsive */
@media (max-width: 860px) {
    .hero__inner { grid-template-columns: 1fr; }
    .hero__art { order: -1; }
    .site-nav { display: none; }
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .site-header__actions .btn--ghost { display: none; }
    .site-footer__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   /compare pages
   ========================================================================= */

/* compare hero (gradient, centered) */
.compare-hero { background: var(--gradient-primary); color: #fff; padding-block: var(--space-16); }
.compare-hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); }
.compare-hero__eyebrow {
    background: rgba(255,255,255,.16); color: #fff;
    font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    padding: 5px 14px; border-radius: 999px;
}
.compare-hero__title { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 700; line-height: 1.15; margin: 0; max-width: 18ch; }
.compare-hero__subtitle { font-size: 1.12rem; opacity: .95; max-width: 62ch; margin: 0; }
.compare-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-2); }
.compare-hero__reassurance { opacity: .9; font-size: .9rem; margin: 0; }

/* generic bullet grid (features / tradeoffs) */
.bullet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); }
.bullet { display: flex; gap: var(--space-3); align-items: flex-start; }
.bullet__glyph {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(var(--primary-rgb), .12); color: var(--primary);
    font-size: 1rem; font-weight: 700;
}
.bullet__title { font-weight: 600; margin: 0 0 2px; }
.bullet__detail { color: var(--text-muted); margin: 0; }

/* two-up info cards (hub differentiators) */
.card-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-6); }
.info-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: var(--space-8); box-shadow: var(--shadow-sm);
}
.info-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 12px;
    background: rgba(var(--primary-rgb), .12); font-size: 1.5rem; margin-bottom: var(--space-4);
}
.info-card h3 { font-size: 1.25rem; }
.info-card p { color: var(--text-muted); margin: 0; }
.info-card strong { color: var(--text); }

/* hub: stack-cost math */
.stack-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-6); align-items: stretch; }
.stack-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: var(--space-8); box-shadow: var(--shadow-sm);
}
.stack-card__title { font-weight: 700; font-size: 1.15rem; margin-bottom: var(--space-4); }
.stack-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.stack-row__tool { font-weight: 600; }
.stack-row__job { color: var(--text-muted); font-size: .85rem; }
.stack-row__price { font-weight: 600; white-space: nowrap; }
.stack-total { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-4); }
.stack-total__label { font-weight: 700; font-size: 1.05rem; }
.stack-total__price { font-weight: 700; font-size: 1.4rem; }
.stack-total__price small { font-size: .55em; opacity: .7; font-weight: 600; }

.stack-card--accent {
    background: var(--gradient-primary); color: #fff; border: 0;
    display: flex; flex-direction: column; text-align: center;
}
.stack-card--accent .stack-card__title { color: #fff; }
.stack-card--accent p { color: rgba(255,255,255,.92); margin: 0; }
.stack-card__amount { font-size: 3rem; font-weight: 700; line-height: 1; margin-top: auto; }
.stack-card__per { opacity: .9; }
.stack-badge {
    align-self: center; background: #fff; color: #4b3fb0; font-weight: 700;
    padding: 5px 14px; border-radius: 999px; margin: var(--space-4) 0 var(--space-2);
}
.stack-card__save { font-weight: 600; margin-bottom: var(--space-6); }
.stack-card--accent .btn { margin-top: auto; }

/* hub: segment grid */
.seg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); }
.seg-card {
    display: flex; flex-direction: column; gap: var(--space-2);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: var(--space-6); box-shadow: var(--shadow-sm); color: inherit;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.seg-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--primary); text-decoration: none; }
.seg-card__title { font-size: 1.15rem; font-weight: 700; margin: 0; }
.seg-card__blurb { color: var(--text-muted); margin: 0; }
.seg-card__versus { color: var(--primary); font-weight: 600; font-size: .82rem; }
.seg-card__more { color: var(--primary); font-weight: 600; font-size: .9rem; margin-top: auto; }

/* competitor cards (segment pages) */
.comp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-6); }
.comp-card {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: var(--space-6); box-shadow: var(--shadow-sm);
}
.comp-card--soft { background: rgba(var(--primary-rgb), .06); border-color: rgba(var(--primary-rgb), .25); justify-content: center; }
.comp-card__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.comp-card__name { font-size: 1.15rem; font-weight: 700; margin: 0; }
.comp-card__tagline { color: var(--text-muted); font-style: italic; margin: 4px 0 var(--space-3); }
.comp-card__pricing { margin: 0; }
.comp-card__free { color: var(--text-muted); font-size: .82rem; margin: 2px 0 0; }
.comp-card__rule { border: 0; border-top: 1px solid var(--border); margin: var(--space-4) 0; }
.comp-card__label { font-size: .9rem; font-weight: 700; margin: 0 0 var(--space-2); }
.comp-card__label--win { color: var(--primary); margin-top: var(--space-4); }
.comp-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.comp-card__list li { position: relative; padding-left: 24px; font-size: .92rem; }
.comp-card__list--neutral li { color: var(--text-muted); }
.comp-card__list--neutral li::before { content: "✓"; position: absolute; left: 0; color: var(--text-muted); }
.comp-card__list--win li::before { content: "→"; position: absolute; left: 0; color: var(--primary); font-weight: 700; }

/* badges */
.badge { font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.badge--done { background: var(--status-done-bg, rgba(16,185,129,.16)); color: var(--status-done); }
.badge--muted { background: rgba(107,114,128,.16); color: var(--text-muted); }

/* comparison table (compare pages) */
.compare-table__scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 680px; background: var(--surface); }
.compare-table th, .compare-table td { padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--border); }
.compare-table thead th { background: var(--surface-2); font-size: .9rem; font-weight: 700; }
.compare-table__feature { text-align: left !important; font-weight: 500; }
.compare-table tbody th.compare-table__feature { font-weight: 500; }
.compare-table__us { background: rgba(var(--primary-rgb), .09); border-left: 2px solid var(--primary); border-right: 2px solid var(--primary); font-weight: 600; }
.compare-table thead th.compare-table__us { color: var(--primary); border-top: 2px solid var(--primary); }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table__text { font-weight: 600; font-size: .85rem; }
.tick--part { color: #F59E0B; font-weight: 700; }

.compare-note { color: var(--text-muted); font-size: .82rem; margin: var(--space-3) 0 0; }

/* related links row */
.related__title { text-align: center; font-size: 1.2rem; font-weight: 700; margin-bottom: var(--space-4); }
.related__links { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.btn--ghost-primary { background: transparent; color: var(--primary); }
.btn--ghost-primary:hover { background: rgba(var(--primary-rgb), .08); }

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

/* =========================================================================
   Prose (legal / long-form) + docs layout
   ========================================================================= */
.prose h1 { font-size: 2rem; }
.prose h2 { font-size: 1.4rem; margin-top: var(--space-8); }
.prose h3 { font-size: 1.15rem; margin-top: var(--space-6); }
.prose p, .prose li { color: var(--text); }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 var(--space-4); }
.prose li { margin: 4px 0; }
.prose a { color: var(--primary); }
.prose__meta { color: var(--text-muted); font-size: .9rem; margin-bottom: var(--space-6); }
.prose code {
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
    padding: 1px 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em;
}
.prose pre {
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--space-4); overflow-x: auto;
}
.prose pre code { background: none; border: 0; padding: 0; }

/* docs: sticky sidebar + content */
.docs { display: grid; grid-template-columns: 232px 1fr; gap: var(--space-8); align-items: start; }
.docs__nav { position: sticky; top: 84px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: var(--space-4); }
.docs__nav h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 0 0 var(--space-3); }
.docs__nav a { display: block; padding: 5px 0; color: var(--text-muted); font-size: .92rem; }
.docs__nav a:hover { color: var(--primary); text-decoration: none; }
.doc-section { margin-bottom: var(--space-12); scroll-margin-top: 84px; }
.doc-section h2 { font-size: 1.5rem; padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.doc-section h3 { font-size: 1.15rem; margin-top: var(--space-6); }
.doc-section p, .doc-section li { color: var(--text); }
.doc-section ul, .doc-section ol { padding-left: 1.4em; }
.notice--info { background: rgba(var(--primary-rgb), .08); border: 1px solid rgba(var(--primary-rgb), .3); color: var(--text); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; }
.notice--tip { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3); color: var(--text); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; }

@media (max-width: 780px) {
    .docs { grid-template-columns: 1fr; }
    .docs__nav { position: static; }
}