/* Surfstats Studio palette, exposed through Bootstrap's color-mode variables. */
[data-bs-theme="dark"], [data-bs-theme="light"] {
    --bs-emphasis-color: var(--bs-body-color);
    --bs-focus-ring-color: #8eacfa;
    --fin-ink: #162000;
    --fin-focus: #8eacfa;
}

[data-bs-theme="dark"] {
    --bs-body-bg: #101114;
    --bs-body-bg-rgb: 16, 17, 20;
    --bs-body-color: #f5f4f1;
    --bs-body-color-rgb: 245, 244, 241;
    --bs-secondary-color: #a5a5af;
    --bs-secondary-bg: #1b1c21;
    --bs-secondary-bg-rgb: 27, 28, 33;
    --bs-tertiary-bg: #24252b;
    --bs-border-color: #303138;
    --bs-primary: #d8fc72;
    --bs-primary-rgb: 216, 252, 114;
    --bs-link-color: #d8fc72;
    --bs-link-color-rgb: 216, 252, 114;
    --bs-link-hover-color-rgb: 234, 255, 166;
    --fin-accent-text: var(--bs-primary);
}

[data-bs-theme="light"] {
    --bs-body-bg: #f7f7f2;
    --bs-body-bg-rgb: 247, 247, 242;
    --bs-body-color: #1b1c21;
    --bs-body-color-rgb: 27, 28, 33;
    --bs-secondary-color: #62636d;
    --bs-secondary-bg: #fff;
    --bs-secondary-bg-rgb: 255, 255, 255;
    --bs-tertiary-bg: #eeeee8;
    --bs-border-color: #deded8;
    --bs-primary: #c3ec56;
    --bs-primary-rgb: 195, 236, 86;
    --bs-link-color: #4a6814;
    --bs-link-color-rgb: 74, 104, 20;
    --bs-link-hover-color-rgb: 49, 75, 6;
    --fin-accent-text: var(--bs-link-color);
    --fin-focus: #4265b0;
}

body { line-height: 1.6; }
a { text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--fin-focus); outline-offset: 4px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 10; top: 1rem; left: 1rem; padding: .5rem 1rem; background: var(--bs-body-bg); }
.site-header { border-bottom: 1px solid var(--bs-border-color); }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--bs-body-color); font-weight: 750; text-decoration: none; }
.brand-product { color: var(--bs-secondary-color); font-weight: 500; }
.brand-mark, .preview-mark { display: inline-grid; place-items: center; background: var(--bs-primary); color: var(--fin-ink); border-radius: .55rem; font-weight: 800; font-style: italic; }
.brand-mark { width: 2rem; height: 2.1rem; }
.navbar { --bs-navbar-color: var(--bs-secondary-color); --bs-navbar-hover-color: var(--bs-body-color); }
.btn { --bs-btn-font-weight: 650; }
.btn-primary {
    --bs-btn-color: var(--fin-ink);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--fin-ink);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 90%, #000);
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
    --bs-btn-active-color: var(--fin-ink);
    --bs-btn-active-bg: var(--bs-btn-hover-bg);
    --bs-btn-active-border-color: var(--bs-btn-hover-bg);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-outline-secondary, .theme-button {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: var(--bs-secondary-color);
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--bs-tertiary-bg);
    --bs-btn-active-border-color: var(--bs-secondary-color);
}
.theme-button { width: 2.4rem; height: 2.4rem; border-radius: 50%; padding: 0; font-size: 1.25rem; }
.hero { padding-top: clamp(3.5rem, 7vw, 7rem); padding-bottom: clamp(3.5rem, 7vw, 6.25rem); }
.eyebrow { color: var(--bs-secondary-color); font-size: .73rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.035em; font-weight: 750; }
h1 { font-size: clamp(2.65rem, 5.6vw, 5.2rem); margin-bottom: 1.4rem; }
h1 em { font-family: Georgia, serif; font-weight: 400; color: var(--fin-accent-text); }
h2 { font-size: clamp(1.85rem, 3vw, 3rem); }
.intro { color: var(--bs-secondary-color); font-size: clamp(1rem, 1.6vw, 1.2rem); max-width: 52ch; margin-bottom: 1.6rem; }
.hero-note { color: var(--bs-secondary-color); font-size: .86rem; margin: 1.3rem 0 0; }
.hero-note span { margin-inline: .2rem; }
.finance-preview {
    padding: clamp(.75rem, 2.4vw, 1.5rem);
    border: 1px solid var(--bs-border-color);
    border-radius: 1.4rem;
    background: radial-gradient(ellipse at 75% 5%, rgba(var(--bs-primary-rgb), .14), transparent 75%), var(--bs-secondary-bg);
}
.preview-window { border: 1px solid var(--bs-border-color); border-radius: .85rem; overflow: hidden; background: var(--bs-body-bg); box-shadow: 0 15px 32px #0002; }
.preview-title { display: flex; align-items: center; gap: .55rem; padding: .75rem; font-size: .8rem; border-bottom: 1px solid var(--bs-border-color); }
.preview-mark { width: 1.35rem; height: 1.35rem; border-radius: .35rem; }
.preview-body { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); }
.preview-sidebar { display: flex; flex-direction: column; gap: .25rem; background: var(--bs-secondary-bg); padding: .7rem .45rem; border-right: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); font-size: .67rem; }
.preview-sidebar span { padding: .35rem .45rem; border-radius: .35rem; }
.preview-sidebar .active { background: rgba(var(--bs-primary-rgb), .16); color: var(--fin-accent-text); font-weight: 700; }
.preview-content { padding: clamp(.65rem, 1.8vw, 1.35rem); }
.preview-content h2 { font-size: clamp(1.2rem, 2.2vw, 1.65rem); margin-bottom: .85rem; }
.preview-content .eyebrow { font-size: .62rem; margin-bottom: .3rem; }
.preview-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
.preview-metrics div { background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .45rem; }
.preview-metrics span, .preview-metrics strong { display: block; }
.preview-metrics span { font-size: .65rem; color: var(--bs-secondary-color); }
.preview-metrics strong { font-size: clamp(.76rem, 1.35vw, 1.05rem); }
.accent-text { color: var(--fin-accent-text); }
.preview-chart { font-size: .75rem; margin-top: 1.05rem; }
.chart-row { display: grid; grid-template-columns: 4.3rem minmax(0, 1fr) 3.25rem; align-items: center; gap: .4rem; margin-top: .55rem; }
.chart-row span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.chart-track { height: .38rem; border-radius: 1rem; background: var(--bs-tertiary-bg); }
.chart-track i { display: block; height: 100%; width: var(--bar); border-radius: inherit; background: var(--fin-accent-text); }
figcaption { color: var(--bs-secondary-color); font-size: .74rem; margin-top: .7rem; text-align: center; }
.section { margin-bottom: clamp(3.5rem, 7vw, 6rem); }
.feature-band, .info-card { border: 1px solid var(--bs-border-color); background: var(--bs-secondary-bg); border-radius: 1.2rem; }
.band-copy, .workflow-list { padding: clamp(1.25rem, 4vw, 3rem); }
.band-copy .intro { margin: 1rem 0; }
.workflow-list li { display: flex; gap: .85rem; padding: .85rem 0; }
.workflow-list li + li { border-top: 1px solid var(--bs-border-color); }
.workflow-list li div span { display: block; color: var(--bs-secondary-color); font-size: .93rem; }
.step-number { display: grid; flex: 0 0 1.8rem; place-items: center; height: 1.8rem; border-radius: 50%; background: var(--bs-tertiary-bg); color: var(--fin-accent-text); font-size: .8rem; font-weight: 700; }
.info-card { height: 100%; padding: clamp(1.1rem, 2.4vw, 1.75rem); }
.info-card h2, .info-card h3, .guide-list h2 { font-size: 1.35rem; }
.info-card p, .guide-list p, .faq p { color: var(--bs-secondary-color); }
.info-card p:last-child { margin-bottom: 0; }
.feature-link { font-weight: 650; }
.faq details { border-bottom: 1px solid var(--bs-border-color); padding: 1rem 0; }
.faq details:first-child { border-top: 1px solid var(--bs-border-color); }
.faq summary { cursor: pointer; font-weight: 700; }
.faq p { margin: .65rem 0 0; }
.closing-call { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: clamp(1.4rem, 4vw, 3rem); background: var(--bs-primary); color: var(--fin-ink); border-radius: 1.2rem; }
.closing-call h2 { margin: 0; }
.closing-call .btn { --bs-btn-bg: #162000; --bs-btn-color: #f5f4f1; --bs-btn-hover-bg: #303a1a; --bs-btn-hover-color: #fff; }
.site-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; border-top: 1px solid var(--bs-border-color); padding-top: 1.8rem; padding-bottom: 2.4rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: flex-start; }
.footer-links a { color: var(--bs-secondary-color); }
.inner-page { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
.guide-list { max-width: 48rem; padding-left: 1.55rem; margin: 2rem 0; }
.guide-list li { padding: .55rem 0 .55rem .6rem; }
.guide-list li::marker { color: var(--fin-accent-text); font-weight: 750; }
.download-card { max-width: 34rem; }

@media (max-width: 575.98px) {
    .preview-body { grid-template-columns: minmax(0, 1fr); }
    .preview-sidebar { display: none; }
    .btn-lg { --bs-btn-font-size: 1rem; }
}

.reading-content { max-width: 50rem; }
.reading-content h2 { font-size: clamp(1.25rem, 2vw, 1.65rem); margin: 1.65rem 0 .7rem; }
.reading-content h2:first-child { margin-top: 0; }
.reading-content li + li { margin-top: .5rem; }
.manual-contents { height: auto; }
.manual-contents li + li { margin-top: .5rem; }
.manual-topics section { margin-bottom: 1.75rem; padding-bottom: .65rem; border-bottom: 1px solid var(--bs-border-color); }