/* ==========================================================================
   Dyson Harness site theme — layered on Bootstrap 5.
   Palette: charcoal + solar-gold on warm paper. Gold is a signal, not body text.
   ========================================================================== */

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/lib/fonts/ibm-plex-sans/ibm-plex-sans-latin-400.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: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/lib/fonts/ibm-plex-sans/ibm-plex-sans-latin-600.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: "IBM Plex Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/lib/fonts/ibm-plex-sans/ibm-plex-sans-latin-700.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: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/lib/fonts/ibm-plex-mono/ibm-plex-mono-latin-500.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: "IBM Plex Mono";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/lib/fonts/ibm-plex-mono/ibm-plex-mono-latin-700.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;
}

:root {
    --dh-charcoal: #101822;
    --dh-navy: #17263a;
    --dh-navy-deep: #0b121c;
    --dh-solar: #f4c84a;
    --dh-solar-bright: #ffe08a;
    --dh-solar-ink: #8a6810;
    --dh-ink: #1a2330;
    --dh-muted: #5c6b7a;
    --dh-bg: #f6f4ef;
    --dh-surface: #fffcf7;
    --dh-border: #e4ddd0;
    --dh-dark: var(--dh-charcoal);
    --dh-radius: 0.75rem;
    --dh-radius-pill: 999px;
    --dh-section-accent: var(--dh-solar);
    --dh-font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji";
    --dh-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono",
        Menlo, Consolas, "Liberation Mono", monospace;
    /* One sans family across the site: every heading (h1-h6, page heroes
       included) and both halves of the wordmark set in IBM Plex Sans. */
    --dh-font-heading: var(--dh-font-sans);
    --dh-font-hero: var(--dh-font-heading);
    --dh-font-stack: var(--dh-font-sans);
    --dh-mono-stack: var(--dh-font-mono);
    --dh-type-hero: clamp(2.25rem, 5vw, 3.5rem);
    --dh-type-h1: clamp(2rem, 4.5vw, 2.75rem);
    --dh-type-h2: clamp(1.5rem, 3vw, 2rem);
    --home-charcoal: var(--dh-charcoal);
    --home-navy: var(--dh-navy);
    --home-navy-deep: var(--dh-navy-deep);
    --home-solar: var(--dh-solar);
    --home-solar-bright: var(--dh-solar-bright);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--dh-font-sans);
    color: var(--dh-ink);
    background-color: var(--dh-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1 0 auto;
}

/* Headings share the body's IBM Plex Sans, so hierarchy comes from size and
   weight: every heading sets in Plex's heaviest vendored cut (700) against
   400 body text, with tracking tightened as the size grows. h2 stays at 700
   so it never reads lighter than the h3 card titles beneath it. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--dh-font-heading);
}

h1 {
    font-size: var(--dh-type-h1);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.12;
}

h2 {
    font-size: var(--dh-type-h2);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* Bootstrap's .h1-.h6 size classes reset weight to 500, which has no vendored
   Plex cut and would fall back to the 400 body weight. Card titles and other
   resized headings keep the heading weight instead. */
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
}

a {
    color: var(--dh-ink);
}

a:hover {
    color: var(--dh-solar-ink);
}

code, pre, kbd {
    font-family: var(--dh-font-mono);
}

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

/* ---- Skip link -----------------------------------------------------------
   First focusable element in _Layout. Off-screen until focused, then it
   parks over the header. */

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 1rem;
    z-index: 1080;
    padding: 0.5rem 1.5rem;
    color: var(--dh-charcoal);
    background: var(--dh-solar);
    border-radius: var(--dh-radius-pill);
    box-shadow: 0 0.75rem 1.75rem rgba(16, 24, 34, 0.2);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    transform: translateY(calc(-100% - 2rem));
    transition: transform 180ms ease;
}

.skip-link:focus,
.skip-link:focus-visible {
    color: var(--dh-charcoal);
    outline-color: var(--dh-charcoal);
    transform: translateY(0);
}

/* The main landmark is programmatically focusable so the skip link moves
   keyboard focus as well as scroll position; that focus must not paint a ring. */
main[tabindex="-1"]:focus,
main[tabindex="-1"]:focus-visible {
    outline: none;
}

/* ---- Buttons ------------------------------------------------------------ */

.btn-primary {
    --bs-btn-color: var(--dh-charcoal);
    --bs-btn-bg: var(--dh-solar);
    --bs-btn-border-color: var(--dh-solar);
    --bs-btn-hover-color: var(--dh-charcoal);
    --bs-btn-hover-bg: var(--dh-solar-bright);
    --bs-btn-hover-border-color: var(--dh-solar-bright);
    --bs-btn-active-color: var(--dh-charcoal);
    --bs-btn-active-bg: var(--dh-solar-bright);
    --bs-btn-active-border-color: var(--dh-solar-bright);
    --bs-btn-disabled-color: var(--dh-charcoal);
    --bs-btn-disabled-bg: var(--dh-solar);
    --bs-btn-disabled-border-color: var(--dh-solar);
    --bs-btn-focus-shadow-rgb: 244, 200, 74;
    box-shadow: 0 0.65rem 1.5rem rgba(244, 200, 74, 0.16);
}

/* ---- Hero --------------------------------------------------------------- */

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #f4f7fb;
    padding: clamp(3.5rem, 7vw, 5rem) 0;
    text-align: center;
    background:
        radial-gradient(36rem 22rem at 78% 10%, rgba(244, 200, 74, 0.14), transparent 68%),
        radial-gradient(44rem 30rem at 4% 20%, rgba(64, 93, 157, 0.24), transparent 67%),
        linear-gradient(145deg, var(--dh-charcoal), var(--dh-navy) 58%, #203552);
}

.hero::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
    opacity: 0.28;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 3.5rem 3.5rem;
    mask-image: linear-gradient(to bottom, #000, transparent 85%);
}

.hero h1 {
    font-family: var(--dh-font-hero);
    font-size: var(--dh-type-hero);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
}

.hero .lead {
    color: rgba(239, 244, 250, 0.76);
    max-width: 44rem;
    margin-left: auto;
    margin-right: auto;
}

.hero a {
    color: var(--dh-solar-bright);
}

.hero a:hover {
    color: var(--dh-solar);
}

.hero-badge {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    margin-bottom: 1.25rem;
    font-family: var(--dh-font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dh-solar-bright);
    background: rgba(244, 200, 74, 0.1);
    border: 1px solid rgba(244, 200, 74, 0.42);
    border-radius: var(--dh-radius-pill);
}

.hero-badge-light {
    color: var(--dh-solar-ink);
    background: rgba(244, 200, 74, 0.12);
    border-color: rgba(138, 104, 16, 0.28);
}

/* ---- GitHub stars badge (navbar) ---------------------------------------- */

.github-stars-badge {
    display: inline-block;
    padding: 0.08rem 0.45rem;
    font-family: var(--dh-font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--dh-solar);
    background: rgba(244, 200, 74, 0.12);
    border: 1px solid rgba(244, 200, 74, 0.35);
    border-radius: var(--dh-radius-pill);
    white-space: nowrap;
}

.github-stars-badge[hidden] {
    display: none;
}

/* ---- Feature cards ------------------------------------------------------ */

.feature-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--dh-surface), #f8f4ea);
    border: 1px solid var(--dh-border);
    border-radius: var(--dh-radius);
    padding: 1.6rem;
    height: 100%;
    box-shadow:
        0 0.75rem 1.75rem rgba(16, 24, 34, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.feature-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.3rem;
    background: linear-gradient(180deg, var(--dh-solar), rgba(244, 200, 74, 0.28));
    opacity: 0.9;
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(244, 200, 74, 0.45);
    box-shadow:
        0 1rem 2rem rgba(16, 24, 34, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.feature-card h2,
.feature-card h3 {
    font-size: 1.1rem;
    letter-spacing: -0.015em;
    margin-bottom: 0.9rem;
}

.feature-card p {
    color: var(--dh-muted);
    margin-bottom: 0;
    line-height: 1.6;
}

.agent-mode-graphic {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1.15rem 0 1rem;
    padding: 0.7rem;
    background: linear-gradient(135deg, rgba(244, 200, 74, 0.08), rgba(16, 24, 34, 0.03));
    border: 1px solid var(--dh-border);
    border-radius: var(--dh-radius);
}

.agent-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 0;
    padding: 0.62rem 0.85rem;
    color: var(--dh-ink);
    background: rgba(255, 252, 247, 0.92);
    border: 1px solid var(--dh-border);
    border-radius: var(--dh-radius-pill);
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: 0 0.35rem 0.9rem rgba(16, 24, 34, 0.05);
}

.agent-mode svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.agent-mode-work {
    color: #3555a6;
}

.agent-mode-plan {
    color: #7146b5;
}

.agent-mode-ask {
    color: #a05a28;
}

.agent-mode-drone {
    color: #2f7a68;
}

.agent-mode-explore {
    color: #5966a8;
}

.model-support-intro {
    margin-bottom: 1rem !important;
}

.model-support-list {
    display: grid;
    gap: 0.55rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.model-support-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 3.2rem;
    padding: 0.55rem 0.65rem;
    color: var(--dh-ink);
    background: rgba(255, 252, 247, 0.86);
    border: 1px solid var(--dh-border);
    border-radius: var(--dh-radius);
    box-shadow: 0 0.25rem 0.75rem rgba(16, 24, 34, 0.035);
}

.model-support-mark {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    color: #fff;
    border-radius: 0.6rem;
    font-family: var(--dh-font-mono);
    font-size: 0.8rem;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.model-support-item span:last-child {
    display: grid;
    gap: 0.08rem;
    line-height: 1.1;
}

.model-support-item strong {
    font-size: 0.86rem;
    font-weight: 750;
}

.model-support-item small {
    color: var(--dh-muted);
    font-size: 0.76rem;
    font-weight: 600;
}

.model-support-mark img,
.provider-support-mark img {
    display: block;
    width: 1.15rem;
    height: 1.15rem;
    object-fit: contain;
}

.model-support-mark--openai,
.model-support-mark--zai {
    background: transparent;
    box-shadow: none;
}

.model-support-mark--openai img,
.model-support-mark--zai img {
    width: 1.5rem;
    height: 1.5rem;
}

.model-support-mark--openai img {
    filter: brightness(0);
}

.model-support-mark--kimi,
.provider-support-mark--kimi {
    background: #050505;
}

.provider-support-card .card-body {
    display: flex;
    flex-direction: column;
}

.provider-support-intro {
    margin-bottom: 1rem !important;
}

.provider-support-card .provider-support-list {
    margin-top: auto;
}

.provider-support-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.provider-support-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 3.3rem;
    padding: 0.55rem 0.65rem;
    color: var(--dh-ink);
    background: rgba(255, 252, 247, 0.86);
    border: 1px solid var(--dh-border);
    border-radius: var(--dh-radius);
    box-shadow: 0 0.25rem 0.75rem rgba(16, 24, 34, 0.035);
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.2;
}

.provider-support-mark {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    flex: 0 0 auto;
    color: #fff;
    border-radius: 0.6rem;
    font-family: var(--dh-font-mono);
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.provider-support-item--completions .provider-support-mark,
.provider-support-item--responses .provider-support-mark,
.provider-support-item--codex .provider-support-mark {
    background: linear-gradient(135deg, #1d6e67, #103f3b);
}

.provider-support-item--codex .provider-support-mark--openai {
    background: transparent;
    box-shadow: none;
}

.provider-support-item--codex .provider-support-mark--openai img {
    width: 1.5rem;
    height: 1.5rem;
    filter: brightness(0);
}

.provider-support-item--kimi-plan .provider-support-mark {
    background: #050505;
}

@media (max-width: 400px) {
    .provider-support-list {
        grid-template-columns: 1fr;
    }
}

/* ---- Docs layout (Index.cshtml has no isolated CSS) --------------------- */

.docs-layout {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

.docs-content {
    min-width: 0; /* allow code blocks to scroll instead of blowing out the grid */
}

#docs-app {
    min-height: 60vh;
}

/* ---- Markdown typography ------------------------------------------------ */

.markdown-body {
    max-width: 68ch;
    line-height: 1.7;
    font-size: 1rem;
}

.markdown-body h1 {
    font-size: var(--dh-type-h1);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--dh-border);
}

.markdown-body h2 {
    font-size: var(--dh-type-h2);
    margin: 2.25rem 0 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--dh-border);
}

.markdown-body h3 {
    font-size: 1.2rem;
    margin: 1.75rem 0 0.5rem;
}

.markdown-body h4 {
    font-size: 1.05rem;
    margin: 1.5rem 0 0.5rem;
}

/* Heading anchors (docs.js gives each heading an id) land below the header. */
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
    scroll-margin-top: 5.5rem;
}

.markdown-body p,
.markdown-body ul,
.markdown-body ol {
    margin-bottom: 1rem;
}

.markdown-body code {
    font-size: 0.875em;
    color: var(--dh-solar-ink);
    background: rgba(244, 200, 74, 0.14);
    padding: 0.15em 0.35em;
    border-radius: 0.3rem;
}

.markdown-body pre {
    background: var(--dh-charcoal);
    color: #e8edf4;
    padding: 1rem 1.25rem;
    border-radius: var(--dh-radius);
    overflow-x: auto;
    margin-bottom: 1.25rem;
}

.markdown-body pre code {
    color: inherit;
    background: transparent;
    padding: 0;
    font-size: 0.875rem;
}

.markdown-body table {
    width: 100%;
    margin-bottom: 1.25rem;
    border-collapse: collapse;
}

.markdown-body th,
.markdown-body td {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--dh-border);
    text-align: left;
}

.markdown-body th {
    background: rgba(244, 200, 74, 0.14);
    color: var(--dh-ink);
    font-weight: 600;
}

.markdown-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--dh-radius);
}

.markdown-body blockquote {
    margin: 0 0 1rem;
    padding: 0.5rem 1rem;
    color: var(--dh-muted);
    border-left: 3px solid var(--dh-solar);
    background: rgba(244, 200, 74, 0.1);
}

/* ---- Docs reading UI (path routes, toc, copy, mobile disclosure) --------
   Lives here rather than in scoped CSS because docs.js builds the toc
   entries and code-block chrome at runtime, and those nodes never carry a
   Razor scope attribute. */

.docs-reading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.docs-sidebar-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--dh-ink);
    background: var(--dh-surface);
    border: 1px solid var(--dh-border);
    border-radius: var(--dh-radius);
    font-family: var(--dh-font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}

.docs-sidebar-summary::-webkit-details-marker {
    display: none;
}

.docs-filter-count {
    margin: -0.75rem 0 0.75rem;
    color: var(--dh-muted);
    font-family: var(--dh-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

.docs-filter-count:empty {
    display: none;
}

.docs-toc {
    display: none;
}

.docs-toc-label {
    margin: 0 0 0.75rem;
    color: var(--dh-muted);
    font-family: var(--dh-font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.docs-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.docs-toc a {
    display: block;
    padding: 0.3rem 0 0.3rem 0.75rem;
    color: var(--dh-muted);
    border-left: 2px solid var(--dh-border);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.15em;
    transition: color 180ms ease, border-color 180ms ease, text-decoration-color 180ms ease;
}

.docs-toc a.active,
.docs-toc a:hover,
.docs-toc a:focus-visible {
    color: var(--dh-solar-ink);
    border-left-color: var(--dh-solar);
}

.docs-toc a:hover,
.docs-toc a:focus-visible {
    text-decoration-color: currentColor;
}

.docs-toc-sub a {
    padding-left: 1.5rem;
    font-size: 0.75rem;
}

.docs-pre-wrap {
    position: relative;
    margin-bottom: 1.25rem;
}

.docs-pre-wrap pre {
    margin-bottom: 0;
    padding-top: 2rem;
}

.docs-code-lang,
.docs-copy {
    font-family: var(--dh-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.docs-code-lang {
    position: absolute;
    top: 0.55rem;
    left: 0.75rem;
    color: var(--dh-solar-bright);
}

.docs-copy {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    padding: 0.2rem 0.55rem;
    color: var(--dh-charcoal);
    background: var(--dh-solar);
    border: 0;
    border-radius: var(--dh-radius-pill);
    font-weight: 700;
    cursor: pointer;
    transition: background-color 180ms ease;
}

.docs-copy:hover {
    background: var(--dh-solar-bright);
}

@media (min-width: 992px) {
    .docs-sidebar-summary {
        display: none;
    }

    /* Desktop keeps the list visible even when the disclosure is closed.
       Current engines hide closed <details> content through ::details-content,
       so that slot is made visible too; it sits in its own rule so an engine
       that does not know the pseudo-element still applies the one above. */
    .docs-sidebar-disclosure:not([open]) > .docs-sidebar-body {
        display: block;
    }

    .docs-sidebar-disclosure::details-content {
        content-visibility: visible;
    }
}

@media (min-width: 1200px) {
    .docs-reading:has(.docs-toc:not([hidden])) {
        grid-template-columns: minmax(0, 1fr) 14rem;
    }

    .docs-toc:not([hidden]) {
        display: block;
        position: sticky;
        top: 1.5rem;
        max-height: calc(100vh - 3rem);
        overflow: auto;
    }
}

/* ---- Features page sections --------------------------------------------- */

.features-section {
    --dh-section-accent: var(--dh-solar);
    position: relative;
    overflow: hidden;
    padding: 4.5rem 0;
    background: var(--dh-bg);
}

.features-section:nth-child(even of .features-section) {
    background: var(--dh-surface);
}

.features-section .section-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    color: var(--dh-section-accent, var(--dh-solar));
    opacity: 0.08;
    transition: transform 0.15s ease-out;
}

.features-section-content {
    position: relative;
    z-index: 1;
}

.features-section-title {
    font-size: var(--dh-type-h2);
    margin-bottom: 0.25rem;
}

.features-section-subtitle {
    color: var(--dh-muted);
    margin-bottom: 2rem;
}

.features-section .feature-card {
    border-top: 1px solid var(--dh-border);
}

.feature-icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--dh-section-accent, var(--dh-solar));
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 991.98px) {
    .hero {
        padding: clamp(3rem, 6vw, 4rem) 0;
    }

    .docs-layout {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .feature-card:hover {
        transform: none;
    }

    .features-section .section-bg {
        transition: none;
    }

    .skip-link,
    .docs-toc a,
    .docs-copy {
        transition: none;
    }
}