.nanogit-page {
    --nanogit-surface: #0f172a;
    --nanogit-border: rgba(255, 255, 255, .2);
    --nanogit-text-secondary: rgba(255, 255, 255, .8);
    --nanogit-content-width: var(--site-content-width);
}
.nanogit-updates, .nanogit-guide {
    max-width: var(--nanogit-content-width);
}
.nanogit-updates {
    scroll-margin-top: 1.5rem;
}
.nanogit-release, .nanogit-panel {
    background: var(--nanogit-surface);
    border: 1px solid var(--nanogit-border);
    border-radius: 1rem;
    overflow-wrap: anywhere;
}
.nanogit-release li {
    margin-bottom: .75rem;
    line-height: 1.8;
}
.nanogit-release li:last-child {
    margin-bottom: 0;
}
.nanogit-archive > summary {
    cursor: pointer;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: .75rem;
}

/* Product landing page; shared guides and legal pages retain their layout. */
.site-page.nanogit-landing {
    padding: 0 1.5rem !important;
    margin: 0 !important;
    color: #fff;
    text-align: left !important;
}
.nanogit-landing-content { max-width: 1160px; margin-inline: auto; }
.nanogit-landing :is(h1, h2, h3) {
    font-weight: 700; letter-spacing: -.035em; line-height: 1.2; text-wrap: balance;
}
.nanogit-hero {
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 3.25rem;
    align-items: center; padding-block: 5.5rem 4.5rem;
}
.nanogit-eyebrow { font-size: .8rem; font-weight: 650; letter-spacing: .06em; margin-bottom: 1.25rem; }
.nanogit-hero h1 { font-size: clamp(2.25rem, 3.8vw, 3.5rem); margin-bottom: 1.5rem; }
.nanogit-lead { font-size: 1.125rem; line-height: 1.85; margin-bottom: 1.75rem; }
.nanogit-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.nanogit-landing .btn { font-size: 1rem; font-weight: 600; padding: .8rem 1.25rem; border-radius: .5rem; }
.nanogit-landing .nanogit-primary { color: #0f172a; }
.nanogit-trust, .nanogit-channel-link, .nanogit-footnote, .nanogit-download-note { font-size: .875rem; line-height: 1.8; }
.nanogit-trust { margin: 1.25rem 0 .25rem; }
.nanogit-channel-link { margin: 0; }
.nanogit-landing a:not(.btn) { color: inherit; text-underline-offset: .25em; }
.nanogit-hero-demo {
    background: #141c2e; border: 1px solid rgba(255, 255, 255, .25); border-radius: .875rem;
    box-shadow: 0 18px 40px rgba(8, 28, 62, .2); margin: 0; min-width: 0; overflow: hidden; text-align: left;
}
.nanogit-window-bar {
    display: flex; gap: 1.5rem; align-items: center; background: #202a3f;
    padding: .9rem 1rem; font-size: .7rem; color: #d5dfed;
}
.nanogit-window-dots { display: flex; gap: .3rem; flex-shrink: 0; }
.nanogit-window-dots i { width: .55rem; height: .55rem; border-radius: 50%; background: #fb716c; }
.nanogit-window-dots i:nth-child(2) { background: #eebf55; }
.nanogit-window-dots i:nth-child(3) { background: #66be89; }
.nanogit-hero-workspace { display: grid; grid-template-columns: .8fr 1.5fr; min-height: 300px; }
.nanogit-file-list { padding: 1.25rem .75rem; border-right: 1px solid #354158; }
.nanogit-code-pane { min-width: 0; padding: 1.25rem .75rem; }
.nanogit-demo-label {
    display: flex; flex-wrap: wrap; gap: .4rem; justify-content: space-between;
    font-size: .75rem; color: #bfccdf; margin-bottom: .75rem;
}
.nanogit-file { font-size: .8rem; padding: .55rem .6rem; border-radius: .3rem; overflow-wrap: anywhere; }
.nanogit-file > span { margin-right: .4rem; color: #f5c864; font-family: ui-monospace, monospace; }
.nanogit-file.selected { background: #233d65; }
.nanogit-code {
    font: .75rem/1.9 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #eef2f7; overflow-x: auto; padding: .75rem 0; margin: .75rem 0; white-space: pre;
}
.nanogit-code code { color: inherit; }
.nanogit-code span { display: inline-block; min-width: 100%; padding-inline: .5rem; }
.nanogit-code-removed { color: #ffc1ba; background: #3e2630; }
.nanogit-code-added { color: #b1f2c7; background: #1e3931; }
.nanogit-code-context { color: #d2daea; }
.nanogit-commit-draft { border-top: 1px solid #354158; padding-top: .9rem; margin-top: 1rem; }
.nanogit-commit-draft p { font-size: .9rem; margin: .25rem 0; }
.nanogit-demo-status { font-size: .75rem; color: #b1f2c7; }
.nanogit-hero-demo figcaption, .nanogit-demo-caption {
    padding: .65rem 1rem; font-size: .7rem; color: #bfccdf; border-top: 1px solid #354158; margin: 0;
}
.nanogit-section-nav {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
    border-block: 1px solid rgba(255, 255, 255, .35); padding: 1.25rem 0;
}
.nanogit-section-nav a { text-decoration: none; font-size: .95rem; }
.nanogit-section-nav a:hover { text-decoration: underline; }
.nanogit-section-nav span { font: .75rem ui-monospace, monospace; margin-right: .75rem; }
.nanogit-landing :is(section[id], article[id], h3[id]) { scroll-margin-top: 2rem; }
.nanogit-section { padding-block: 4.5rem; }
.nanogit-section h2 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); max-width: 850px; }
.nanogit-section-intro { line-height: 1.8; margin: 1rem 0 2.5rem; max-width: 720px; }
.nanogit-workflow {
    display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 5rem; padding-block: 3rem;
}
.nanogit-workflow + .nanogit-workflow { border-top: 1px solid rgba(255, 255, 255, .3); }
.nanogit-workflow-number { display: block; font: .85rem ui-monospace, monospace; margin-bottom: 1rem; }
.nanogit-workflow h3 { font-size: 1.75rem; margin-bottom: 1.25rem; }
.nanogit-workflow-copy > p { line-height: 1.9; }
.nanogit-steps { padding-left: 1.25rem; font-size: .9rem; line-height: 1.8; margin-block: 1.5rem; }
.nanogit-steps li { padding-left: .4rem; margin-bottom: .5rem; }
.nanogit-interactive {
    border: 1px solid rgba(255, 255, 255, .3); border-radius: .875rem;
    background: #141c2e; padding: 1rem 1rem 0; margin: 0; min-width: 0;
}
.nanogit-interactive > label {
    display: inline-block; cursor: pointer; font-size: .8rem; padding: .7rem .75rem;
    margin: 0 .2rem .5rem 0; border: 1px solid #566581; border-radius: .4rem;
    overflow-wrap: anywhere; max-width: 100%;
}
.nanogit-interactive > input:checked + label { background: #315a99; border-color: #a2c8ff; }
.nanogit-interactive > input:focus-visible + label { outline: 3px solid #fff; outline-offset: 3px; }
.nanogit-demo-content { border-top: 1px solid #354158; margin-top: .4rem; }
.nanogit-demo-pane { display: none; padding: 1.25rem .25rem .5rem; min-height: 285px; }
.choice-a:checked ~ .nanogit-demo-content > .pane-a,
.choice-b:checked ~ .nanogit-demo-content > .pane-b,
.choice-c:checked ~ .nanogit-demo-content > .pane-c { display: block; }
.nanogit-demo-result { color: #b1f2c7; font-size: .85rem; line-height: 1.8; margin: 1.25rem 0 .5rem; }
.nanogit-demo-caption { margin-inline: -1rem; }
.nanogit-blame-row { display: flex; gap: 1rem; border-left: 2px solid #a2c8ff; padding: .75rem; font-size: .8rem; }
.nanogit-blame-row code, .nanogit-timeline code { color: #b1f2c7; font-size: .75rem; }
.nanogit-timeline { padding-left: 1.25rem; border-left: 1px solid #566581; margin-left: .25rem; }
.nanogit-timeline li { padding-left: .25rem; margin-bottom: 1rem; }
.nanogit-timeline li::marker { color: #a2c8ff; }
.nanogit-timeline span { font: .7rem ui-monospace, monospace; color: #bfccdf; }
.nanogit-timeline p { font-size: .875rem; margin: .25rem 0; }
.nanogit-download-options { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; }
.nanogit-download-options article {
    border: 1px solid rgba(255, 255, 255, .45); border-radius: .875rem;
    padding: 2rem; display: flex; flex-direction: column; align-items: flex-start;
}
.nanogit-download-options .nanogit-download-direct { background: #141c2e; border-color: #bfccdf; }
.nanogit-download-options h3 { font-size: 1.75rem; margin-bottom: 1rem; }
.nanogit-download-options p { line-height: 1.8; }
.nanogit-download-options .btn { margin-top: auto; }
.nanogit-download-note { margin: 1.25rem 0 0; }
.nanogit-help {
    display: grid; grid-template-columns: 1.5fr 1fr; gap: 4rem;
    border-block: 1px solid rgba(255, 255, 255, .35);
}
.nanogit-help p { max-width: 640px; line-height: 1.9; }
.nanogit-help-links { display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
.nanogit-help-links a {
    display: flex; justify-content: space-between; padding-bottom: .75rem;
    border-bottom: 1px solid rgba(255, 255, 255, .35); text-decoration: none;
}
.nanogit-help-links a:hover { text-decoration: underline; }
.nanogit-landing .nanogit-updates { max-width: none; }
.nanogit-landing .nanogit-release h3 { font-size: 1.25rem; letter-spacing: -.015em; }
.nanogit-landing .nanogit-release { border-color: rgba(255, 255, 255, .3); }
.nanogit-landing .nanogit-release li { font-size: .9rem; }
@media (max-width: 991px) {
    .nanogit-hero { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 3rem; }
    .nanogit-hero > div { max-width: 650px; }
    .nanogit-hero-demo { max-width: 700px; width: 100%; }
    .nanogit-hero h1 { max-width: 620px; }
    .nanogit-workflow { gap: 2rem; }
}
@media (max-width: 767px) {
    .site-page.nanogit-landing { padding-inline: 1.25rem !important; }
    .nanogit-hero h1 { font-size: 2.25rem; }
    .nanogit-lead { font-size: 1rem; }
    .nanogit-section { padding-block: 3rem; }
    .nanogit-workflow, .nanogit-download-options, .nanogit-help { grid-template-columns: 1fr; gap: 1.75rem; }
    .nanogit-workflow { padding-block: 2rem; }
    .nanogit-workflow h3 { font-size: 1.5rem; }
    .nanogit-section-nav { flex-direction: column; gap: .8rem; }
    .nanogit-download-options article { padding: 1.5rem; }
    .nanogit-window-bar { gap: .75rem; }
    .nanogit-hero-workspace { grid-template-columns: .8fr 1.2fr; }
    .nanogit-demo-pane { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
    .nanogit-landing .btn { transition: none; }
}