:root {
    --manual-orange: #b75b00;
    --manual-border: #e4e8e5;
}

body {
    margin: 0;
    background: #f7f9f7;
    color: #28342e;
}

.manual-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1.5rem;
    background: white;
    border-bottom: 1px solid var(--manual-border);
}

.manual-brand { display: flex; align-items: center; gap: 1rem; color: var(--manual-orange); text-decoration: none; font-weight: 600; }
.manual-brand img { width: auto; max-width: 210px; height: 34px; object-fit: contain; }
.manual-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); }
.manual-sidebar { padding: 1.5rem; background: white; border-right: 1px solid var(--manual-border); }
.manual-sidebar h2 { margin: 1.5rem 0 .5rem; font-size: .85rem; font-weight: 700; color: #64796b; }
.manual-sidebar a { display: block; padding: .4rem .6rem; color: #34483c; text-decoration: none; border-radius: .4rem; }
.manual-sidebar a:hover, .manual-sidebar a.active { background: #fff0df; color: var(--manual-orange); }
.manual-content { width: 100%; max-width: 1100px; padding: 2.5rem clamp(1rem, 4vw, 4rem); }
.manual-content h1 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 1rem; }
.manual-content h2 { font-size: 1.2rem; margin: 1.5rem 0 .8rem; }
.manual-content p, .manual-content li { line-height: 1.8; }
.manual-content li { margin-bottom: .6rem; }
.manual-eyebrow { color: var(--manual-orange); font-weight: 600; }
.manual-panel { margin: 1.5rem 0; background: white; border: 1px solid var(--manual-border); border-left: 4px solid #ff9418; padding: 1.2rem 1.5rem; border-radius: .7rem; }
.manual-panel h2 { margin-top: 0; }
.manual-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; }
.manual-cards a { padding: 1rem; border: 1px solid var(--manual-border); border-radius: .6rem; background: white; color: #34483c; text-decoration: none; }
.manual-cards a:hover { border-color: #ff9418; }
.manual-cards small { display: block; margin-top: .4rem; color: #64796b; }

@media (min-width: 900px) {
    .manual-sidebar { height: calc(100vh - 67px); overflow-y: auto; position: sticky; top: 0; }
}

@media (max-width: 700px) {
    .manual-layout { grid-template-columns: minmax(0, 1fr); }
    .manual-sidebar { max-height: 280px; overflow-y: auto; border-bottom: 1px solid var(--manual-border); }
    .manual-header { flex-wrap: wrap; padding: .8rem 1rem; }
    .manual-brand img { max-width: 150px; }
}