.fin-page {
    --hu-green:#148154;
    --hu-green-dark:#0a3420;
    --hu-green-soft:#e8f3ee;

    --hu-blue:#2c85b7;
    --hu-blue-dark:#236e98;
    --hu-blue-soft:#eaf4f9;

    --ink:#222925;
    --soft:#626a65;
    --muted:#7d857f;

    --white:#ffffff;
    --paper:#fafbf9;
    --cream:#f5f7f4;

    --line:#d9e0dc;
    --line-dark:#c5cec8;

    --display:"Fraunces", Georgia, serif;
    --body:"Inter", Arial, sans-serif;
    --mono:"DM Mono", monospace;

    width:100%;

    background:var(--paper);
    color:var(--ink);

    font-family:var(--body);
    font-size:17px;
    line-height:1.75;

    overflow:visible;
}


.fin-page *,
.fin-page *::before,
.fin-page *::after {
    box-sizing:border-box;
}


.fin-shell {
    width:min(1280px, calc(100% - 56px));
    margin-inline:auto;
}


.fin-kicker {
    color:var(--hu-green);

    font-size:12px;
    font-weight:700;

    letter-spacing:.11em;
    text-transform:uppercase;
}


/* HERO */

.fin-hero {
    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #fff,
            #f8faf8
        );

    border-bottom:1px solid var(--line-dark);
}


.fin-hero::before {
    content:"FIN";

    position:absolute;

    right:-45px;
    top:100px;

    color:rgba(44,133,183,.025);

    font-family:var(--display);
    font-size:clamp(300px, 43vw, 650px);
    font-weight:700;

    line-height:.7;

    pointer-events:none;
}


.fin-topbar {
    min-height:80px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border-bottom:1px solid var(--line);
}


.fin-brand {
    display:flex;
    align-items:center;

    gap:12px;
}


.fin-brand-mark {
    width:41px;
    height:41px;

    display:grid;
    place-items:center;

    color:#fff;
    background:var(--hu-green);

    font-family:var(--display);
}


.fin-brand strong {
    display:block;
    color:var(--hu-green-dark);
    font-size:13px;
}


.fin-brand small {
    display:block;
    color:var(--muted);
    font-size:12px;
}


.fin-top-meta {
    display:flex;
    align-items:center;

    gap:12px;
}


.fin-top-meta span {
    color:var(--muted);

    font-family:var(--mono);
    font-size:11px;
}


.fin-top-meta i {
    width:48px;
    height:1px;

    background:var(--line-dark);
}


/* HERO TITLE */

.fin-hero-grid {
    display:grid;

    grid-template-columns:
        130px
        1fr;

    gap:75px;

    padding:
        82px
        0
        60px;
}


.fin-index > span {
    color:var(--hu-blue);

    font-family:var(--mono);
    font-size:13px;
}


.fin-index p {
    color:var(--muted);

    font-size:12px;
    font-weight:700;

    text-transform:uppercase;
}


.fin-hero-copy h1 {
    max-width:1040px;

    margin:
        17px
        0
        0;

    color:var(--hu-green-dark);

    font-family:var(--display);

    font-size:clamp(
        68px,
        9vw,
        116px
    );

    font-weight:500;

    line-height:.87;
    letter-spacing:-.065em;
}


.fin-hero-copy h1 span {
    display:block;

    color:var(--hu-blue);
}


.fin-hero-copy > p {
    margin-top:28px;

    color:var(--soft);

    font-size:18px;
}


/* CLARITY FRAME */

.fin-clarity {
    position:relative;

    padding:30px;

    background:#fff;

    border:
        1px solid
        var(--line-dark);
}


.fin-clarity-head {
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding-bottom:20px;

    border-bottom:1px solid var(--line);
}


.fin-clarity-head span,
.fin-clarity-head strong {
    font-family:var(--mono);
    font-size:11px;
}


.fin-clarity-head span {
    color:var(--muted);
}


.fin-clarity-head strong {
    color:var(--hu-blue);
}


.fin-clarity-grid {
    display:grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:1px;

    margin-top:25px;

    background:var(--line-dark);

    border:
        1px solid
        var(--line-dark);
}


.fin-principle {
    min-height:180px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    padding:22px;

    text-align:left;

    color:var(--ink);

    background:#fff;

    border:0;

    cursor:pointer;

    transition:
        background .18s ease,
        color .18s ease;
}


.fin-principle:hover,
.fin-principle.is-active {
    color:var(--hu-green-dark) !important;
    background:var(--hu-blue-soft) !important;
}


.fin-principle span {
    font-family:var(--mono);
    font-size:11px;

    color:var(--hu-blue);
}


.fin-principle.is-active span,
.fin-principle:hover span {
    color:#d8edf4;
}


.fin-principle strong {
    margin-top:auto;

    font-family:var(--display);

    font-size:30px;
    font-weight:500;
}


.fin-principle small {
    margin-top:8px;

    font-size:13px;
}


.fin-focus {
    display:grid;

    grid-template-columns:
        80px
        1fr;

    gap:30px;

    margin-top:30px;

    padding:
        28px;

    background:var(--hu-blue-soft);

    border-left:
        5px solid
        var(--hu-blue);

    transition:
        opacity .15s ease,
        transform .2s ease;
}


.fin-focus.is-changing {
    opacity:.25;
    transform:translateY(7px);
}


.fin-focus-number {
    color:var(--hu-blue);

    font-family:var(--mono);
    font-size:12px;
}


.fin-focus span {
    color:var(--hu-green);

    font-family:var(--mono);
    font-size:11px;
}


.fin-focus h2 {
    margin:
        7px
        0
        0;

    color:var(--hu-green-dark);

    font-family:var(--display);

    font-size:38px;
    font-weight:500;
}


.fin-focus p {
    max-width:720px;

    color:var(--soft);

    font-size:15px;
}


.fin-flow {
    display:flex;
    align-items:center;

    gap:12px;

    margin-top:25px;

    padding:
        20px
        0;

    border-top:1px solid var(--line);
}


.fin-flow span {
    color:var(--muted);

    font-family:var(--mono);
    font-size:10px;
}


.fin-flow i {
    height:1px;
    flex:1;

    background:var(--line-dark);
}


/* HERO BOTTOM */

.fin-hero-bottom {
    display:grid;

    grid-template-columns:
        1fr
        auto;

    gap:40px;

    align-items:center;

    padding:
        38px
        0
        48px;
}


.fin-hero-bottom p {
    max-width:760px;

    color:var(--hu-green-dark);

    font-family:var(--display);

    font-size:23px;
}


.fin-hero-bottom button {
    display:inline-flex;
    align-items:center;

    gap:12px;

    color:var(--hu-green-dark);

    background:transparent;

    border:0;

    cursor:pointer;

    font-weight:700;
}


.fin-hero-bottom button span {
    width:46px;
    height:46px;

    display:grid;
    place-items:center;

    color:#fff;
    background:var(--hu-green);

    border-radius:50%;
}


/* MESSAGE */

.fin-message {
    padding:
        135px
        0
        150px;
}


.fin-message-layout {
    display:grid;

    grid-template-columns:
        180px
        minmax(0, 875px);

    justify-content:center;

    gap:85px;
}


.fin-side-sticky {
    position:sticky;
    top:110px;
}


.fin-side-sticky > span {
    color:var(--hu-blue);

    font-family:var(--mono);
    font-size:11px;
}


.fin-side-sticky > strong {
    display:block;

    margin-top:15px;

    color:var(--hu-green-dark);

    font-family:var(--display);

    font-size:25px;
    font-weight:500;

    line-height:1.18;
}


.fin-side-line {
    width:2px;
    height:330px;

    margin-top:35px;

    background:var(--line);
}


.fin-side-line > div {
    width:2px;
    height:0;

    background:
        linear-gradient(
            var(--hu-green),
            var(--hu-blue)
        );
}


.fin-letter-head {
    padding-bottom:48px;

    border-bottom:1px solid var(--line-dark);
}


.fin-letter-head h2 {
    max-width:800px;

    margin:
        16px
        0
        0;

    color:var(--hu-green-dark);

    font-family:var(--display);

    font-size:clamp(
        50px,
        6vw,
        75px
    );

    font-weight:500;

    line-height:.98;
}


.fin-letter-head h2 span {
    display:block;
    color:var(--hu-blue);
}


.fin-section {
    display:grid;

    grid-template-columns:
        55px
        1fr;

    gap:30px;

    padding:
        58px
        0;

    border-bottom:1px solid var(--line);
}


.fin-section-number {
    color:var(--hu-blue);

    font-family:var(--mono);
    font-size:12px;
}


.fin-section-label {
    color:var(--hu-green);

    font-family:var(--mono);
    font-size:11px;
}


.fin-section h3 {
    margin:
        0
        0
        18px;

    color:var(--hu-green-dark);

    font-family:var(--display);

    font-size:28px;
    font-weight:500;
}


.fin-section p {
    margin:0;

    color:var(--ink);

    font-family:var(--display);

    font-size:clamp(
        22px,
        2.3vw,
        29px
    );

    line-height:1.62;
}


.fin-dropcap::first-letter {
    float:left;

    margin:
        6px
        10px
        0
        0;

    color:var(--hu-green);

    font-size:80px;
    line-height:.76;
}


/* FLEXIBILITY */

.fin-flexibility {
    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:25px;

    margin:
        60px
        0;

    padding:30px;

    background:var(--hu-green-soft);

    border-top:
        4px solid
        var(--hu-green);
}


.fin-flexibility-left span {
    color:var(--hu-blue);

    font-family:var(--mono);
    font-size:10px;
}


.fin-flexibility-left strong {
    display:block;

    margin-top:10px;

    color:var(--hu-green-dark);

    font-family:var(--display);

    font-size:30px;
    font-weight:500;
}


.fin-flexibility-modes {
    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:10px;
}


.fin-flexibility-modes div {
    min-height:120px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    padding:18px;

    background:#fff;

    border:1px solid #c7d9cc;
}


.fin-flexibility-modes span {
    color:var(--hu-blue);

    font-family:var(--mono);
    font-size:10px;
}


.fin-flexibility-modes strong {
    color:var(--hu-green-dark);
}


/* OPERATIONS */

.fin-operations {
    margin:
        65px
        0;

    padding:28px;

    background:var(--hu-blue-soft);

    border-top:
        4px solid
        var(--hu-blue);
}


.fin-operations header {
    display:flex;
    justify-content:space-between;

    gap:20px;

    font-family:var(--mono);
    font-size:10px;
}


.fin-operations header span {
    color:var(--hu-blue);
}


.fin-operations header strong {
    color:var(--hu-green);
}


.fin-operation-grid {
    display:grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap:1px;

    margin-top:27px;

    background:#c7dce6;
}


.fin-operation-grid article {
    min-height:135px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    padding:17px;

    background:#fff;
}


.fin-operation-grid span {
    color:var(--hu-blue);

    font-family:var(--mono);
    font-size:10px;
}


.fin-operation-grid strong {
    color:var(--hu-green-dark);

    font-family:var(--display);

    font-size:20px;
    font-weight:500;
}


/* SOURCE NOTE */

.fin-policy-note {
    margin:
        45px
        0;

    padding:
        20px
        22px;

    background:#fff;

    border:
        1px dashed
        var(--line-dark);
}


.fin-policy-note span {
    color:var(--hu-blue);

    font-family:var(--mono);
    font-size:10px;
}


.fin-policy-note p {
    margin:
        7px
        0
        0;

    color:var(--soft);

    font-size:14px;
}


/* SIGNATURE */

.fin-signature {
    display:grid;

    grid-template-columns:
        80px
        1fr
        auto;

    align-items:center;

    gap:25px;

    margin-top:70px;

    padding:30px;

    background:var(--hu-green-soft);

    border-top:
        4px solid
        var(--hu-green);
}


.fin-signature-mark {
    width:70px;
    height:70px;

    display:grid;
    place-items:center;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--hu-green) 60%,
            var(--hu-blue) 60%
        );

    font-family:var(--display);
}


.fin-signature span {
    color:var(--hu-blue);

    font-family:var(--mono);
    font-size:10px;
}


.fin-signature h3 {
    margin:
        6px
        0
        0;

    color:var(--hu-green-dark);

    font-family:var(--display);

    font-size:28px;
    font-weight:500;
}


.fin-signature strong {
    color:var(--hu-green);
    font-size:13px;
}


.fin-signature a {
    color:var(--hu-blue-dark);

    padding:
        10px
        13px;

    background:#fff;

    border:
        1px solid
        #bfd5e2;

    text-decoration:none;

    font-size:13px;
}


/* CLOSE */

.fin-closing {
    padding:
        105px
        0
        125px;

    background:#fff;
}


.fin-closing-panel {
    padding:
        80px
        70px;

    background:
        linear-gradient(
            90deg,
            var(--hu-green-soft),
            var(--hu-blue-soft)
        );

    border:
        1px solid
        var(--line-dark);
}


.fin-closing-panel > span {
    color:var(--hu-blue);

    font-family:var(--mono);
    font-size:11px;
}


.fin-closing-panel h2 {
    max-width:900px;

    margin:
        18px
        0
        0;

    color:var(--hu-green-dark);

    font-family:var(--display);

    font-size:clamp(
        48px,
        6vw,
        76px
    );

    font-weight:500;

    line-height:.96;
}


.fin-closing-panel h2 span {
    display:block;

    color:var(--hu-blue);
}


.fin-closing-panel button {
    margin-top:30px;

    padding:
        13px
        18px;

    color:#fff;
    background:var(--hu-green);

    border:0;

    cursor:pointer;

    font-weight:700;
}


/* REVEALS */

.fin-page.js-ready
.fin-reveal {
    opacity:0;

    transform:translateY(20px);

    transition:
        opacity .75s ease,
        transform .75s cubic-bezier(.16,1,.3,1);
}


.fin-page.js-ready
.fin-reveal.is-visible {
    opacity:1;
    transform:none;
}


/* RESPONSIVE */

@media (max-width: 960px) {

    .fin-clarity-grid {
        grid-template-columns:
            1fr
            1fr;
    }

    .fin-message-layout {
        grid-template-columns:
            140px
            1fr;

        gap:50px;
    }

    .fin-operation-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 720px) {

    .fin-shell {
        width:
            min(
                100% - 30px,
                1280px
            );
    }

    .fin-top-meta {
        display:none;
    }

    .fin-hero-grid {
        grid-template-columns:1fr;

        gap:25px;

        padding:
            60px
            0
            45px;
    }

    .fin-hero-copy h1 {
        font-size:
            clamp(
                55px,
                16vw,
                77px
            );
    }

    .fin-clarity-grid {
        grid-template-columns:1fr;
    }

    .fin-focus {
        grid-template-columns:1fr;
    }

    .fin-hero-bottom {
        grid-template-columns:1fr;
    }

    .fin-message,
    .fin-closing {
        padding:
            82px
            0;
    }

    .fin-message-layout {
        grid-template-columns:1fr;
    }

    .fin-message-side {
        display:none;
    }

    .fin-letter-head h2 {
        font-size:42px;
    }

    .fin-section {
        grid-template-columns:
            35px
            1fr;

        gap:15px;

        padding:
            45px
            0;
    }

    .fin-section p {
        font-size:21px;
    }

    .fin-flexibility {
        grid-template-columns:1fr;
    }

    .fin-operation-grid {
        grid-template-columns:1fr;
    }

    .fin-signature {
        grid-template-columns:1fr;
    }

    .fin-closing-panel {
        padding:
            55px
            28px;
    }

}


html,
body {
    height:auto !important;
    min-height:100% !important;

    overflow-y:auto !important;
    overflow-x:hidden;
}


.fin-page {
    height:auto !important;
    max-height:none !important;

    overflow:visible !important;
}


@media (prefers-reduced-motion: reduce) {

    .fin-page *,
    .fin-page *::before,
    .fin-page *::after {
        animation:none !important;
        transition:none !important;
    }

    .fin-page.js-ready
    .fin-reveal {
        opacity:1;
        transform:none;
    }

}

/* ==========================================================
   HORMUUD UNIVERSITY — FINANCE OFFICE IDENTITY + DARK MODE 2026

   This page already used HU green/blue, but this layer aligns the
   remaining neutrals, literal colors, gradients and dark-mode states
   with the university identity system.

   Keep this section at the END of finance_office.css.
   ========================================================== */


/* ==========================================================
   LIGHT MODE — CANONICAL HU IDENTITY
   ========================================================== */

.fin-page {
    --hu-green: #148154;
    --hu-green-dark: #0F6843;
    --hu-green-soft: #E8F3EE;

    --hu-blue: #2C85B7;
    --hu-blue-dark: #236E98;
    --hu-blue-soft: #EAF4F9;

    --ink: #202522;
    --soft: #606862;
    --muted: #7B857E;

    --white: #FFFFFF;
    --paper: #F8FAF9;
    --cream: #F1F5F2;

    --line: #D9E0DC;
    --line-dark: #C8D1CB;

    color: var(--ink);
    background: var(--paper);
}


/* Remove remaining non-system light-mode values */

.fin-page .fin-hero {
    background: var(--paper);
    border-bottom-color: var(--line);
}

.fin-page .fin-hero::before {
    color: rgba(44, 133, 183, .035);
}

.fin-page .fin-clarity,
.fin-page .fin-principle,
.fin-page .fin-flexibility-modes div,
.fin-page .fin-operation-grid article,
.fin-page .fin-policy-note,
.fin-page .fin-signature a,
.fin-page .fin-closing {
    background: var(--white);
}

.fin-page .fin-flexibility-modes div {
    border-color: #C8D9CE;
}

.fin-page .fin-operation-grid {
    background: #C9DFE9;
}


/* Keep HU dual-color language without relying on decorative gradients */

.fin-page .fin-side-line > div {
    background: var(--hu-green);
}

.fin-page .fin-signature-mark {
    background: var(--hu-green);
    border-bottom: 6px solid var(--hu-blue);
}


/* Replace the old green/blue gradient closing panel with a cleaner
   institutional surface. */

.fin-page .fin-closing-panel {
    background: var(--hu-green-soft);
    border-color: var(--line-dark);
    border-left: 5px solid var(--hu-blue);
}


/* ==========================================================
   DARK MODE — CANONICAL HU IDENTITY
   ========================================================== */

html[data-theme="dark"] .fin-page {
    --hu-green: #66C59B;
    --hu-green-dark: #86D5B2;
    --hu-green-soft: #183A2C;

    --hu-blue: #72BCE3;
    --hu-blue-dark: #97D1EC;
    --hu-blue-soft: #173442;

    --ink: #EDF3EF;
    --soft: #A9B5AE;
    --muted: #7F8B84;

    --white: #151E18;
    --paper: #0E1511;
    --cream: #18241D;

    --line: #2D3A32;
    --line-dark: #3A493F;

    color: var(--ink) !important;
    background: var(--paper) !important;
}


/* ==========================================================
   DARK — HERO
   ========================================================== */

html[data-theme="dark"] .fin-page .fin-hero {
    background: #0E1511 !important;
    border-bottom-color: var(--line) !important;
}

html[data-theme="dark"] .fin-page .fin-hero::before {
    color: rgba(114, 188, 227, .035) !important;
}

html[data-theme="dark"] .fin-page .fin-topbar {
    border-bottom-color: var(--line) !important;
}

html[data-theme="dark"] .fin-page .fin-brand-mark {
    color: #0E1511 !important;
    background: var(--hu-green) !important;
}

html[data-theme="dark"] .fin-page .fin-brand strong {
    color: var(--hu-green-dark) !important;
}

html[data-theme="dark"] .fin-page .fin-brand small,
html[data-theme="dark"] .fin-page .fin-top-meta span,
html[data-theme="dark"] .fin-page .fin-index p {
    color: var(--muted) !important;
}

html[data-theme="dark"] .fin-page .fin-top-meta i {
    background: var(--line-dark) !important;
}

html[data-theme="dark"] .fin-page .fin-index > span {
    color: var(--hu-blue) !important;
}

html[data-theme="dark"] .fin-page .fin-kicker {
    color: var(--hu-green) !important;
}

html[data-theme="dark"] .fin-page .fin-hero-copy h1 {
    color: var(--hu-green-dark) !important;
}

html[data-theme="dark"] .fin-page .fin-hero-copy h1 span {
    color: var(--hu-blue) !important;
}

html[data-theme="dark"] .fin-page .fin-hero-copy > p {
    color: var(--soft) !important;
}


/* ==========================================================
   DARK — FINANCIAL CLARITY
   ========================================================== */

html[data-theme="dark"] .fin-page .fin-clarity {
    background: #151E18 !important;
    border-color: var(--line-dark) !important;
}

html[data-theme="dark"] .fin-page .fin-clarity-head {
    border-bottom-color: var(--line) !important;
}

html[data-theme="dark"] .fin-page .fin-clarity-head span {
    color: var(--muted) !important;
}

html[data-theme="dark"] .fin-page .fin-clarity-head strong {
    color: var(--hu-blue) !important;
}

html[data-theme="dark"] .fin-page .fin-clarity-grid {
    background: var(--line-dark) !important;
    border-color: var(--line-dark) !important;
}

html[data-theme="dark"] .fin-page .fin-principle {
    color: var(--ink) !important;
    background: #151E18 !important;
}

html[data-theme="dark"] .fin-page .fin-principle span {
    color: var(--hu-blue) !important;
}

html[data-theme="dark"] .fin-page .fin-principle small {
    color: var(--soft) !important;
}

html[data-theme="dark"] .fin-page .fin-principle:hover,
html[data-theme="dark"] .fin-page .fin-principle.is-active {
    color: #0E1511 !important;
    background: var(--hu-green) !important;
}

html[data-theme="dark"] .fin-page .fin-principle:hover span,
html[data-theme="dark"] .fin-page .fin-principle.is-active span,
html[data-theme="dark"] .fin-page .fin-principle:hover small,
html[data-theme="dark"] .fin-page .fin-principle.is-active small {
    color: #123326 !important;
}


/* Focus panel */

html[data-theme="dark"] .fin-page .fin-focus {
    background: var(--hu-blue-soft) !important;
    border-left-color: var(--hu-blue) !important;
}

html[data-theme="dark"] .fin-page .fin-focus-number {
    color: var(--hu-blue) !important;
}

html[data-theme="dark"] .fin-page .fin-focus span {
    color: var(--hu-green) !important;
}

html[data-theme="dark"] .fin-page .fin-focus h2 {
    color: var(--hu-green-dark) !important;
}

html[data-theme="dark"] .fin-page .fin-focus p {
    color: var(--soft) !important;
}


/* Flow */

html[data-theme="dark"] .fin-page .fin-flow {
    border-top-color: var(--line) !important;
}

html[data-theme="dark"] .fin-page .fin-flow span {
    color: var(--muted) !important;
}

html[data-theme="dark"] .fin-page .fin-flow i {
    background: var(--line-dark) !important;
}


/* Hero bottom */

html[data-theme="dark"] .fin-page .fin-hero-bottom p,
html[data-theme="dark"] .fin-page .fin-hero-bottom button {
    color: var(--hu-green-dark) !important;
}

html[data-theme="dark"] .fin-page .fin-hero-bottom button span {
    color: #0E1511 !important;
    background: var(--hu-green) !important;
}


/* ==========================================================
   DARK — MESSAGE AREA
   ========================================================== */

html[data-theme="dark"] .fin-page .fin-message {
    background: #0E1511 !important;
}

html[data-theme="dark"] .fin-page .fin-side-sticky > span,
html[data-theme="dark"] .fin-page .fin-section-number {
    color: var(--hu-blue) !important;
}

html[data-theme="dark"] .fin-page .fin-side-sticky > strong,
html[data-theme="dark"] .fin-page .fin-letter-head h2,
html[data-theme="dark"] .fin-page .fin-section h3 {
    color: var(--hu-green-dark) !important;
}

html[data-theme="dark"] .fin-page .fin-side-line {
    background: var(--line) !important;
}

html[data-theme="dark"] .fin-page .fin-side-line > div {
    background: var(--hu-green) !important;
}

html[data-theme="dark"] .fin-page .fin-letter-head {
    border-bottom-color: var(--line-dark) !important;
}

html[data-theme="dark"] .fin-page .fin-letter-head h2 span {
    color: var(--hu-blue) !important;
}

html[data-theme="dark"] .fin-page .fin-section {
    border-bottom-color: var(--line) !important;
}

html[data-theme="dark"] .fin-page .fin-section-label {
    color: var(--hu-green) !important;
}

html[data-theme="dark"] .fin-page .fin-section p {
    color: var(--ink) !important;
}

html[data-theme="dark"] .fin-page .fin-dropcap::first-letter {
    color: var(--hu-green) !important;
}


/* ==========================================================
   DARK — FLEXIBILITY
   ========================================================== */

html[data-theme="dark"] .fin-page .fin-flexibility {
    background: var(--hu-green-soft) !important;
    border-top-color: var(--hu-green) !important;
}

html[data-theme="dark"] .fin-page .fin-flexibility-left span,
html[data-theme="dark"] .fin-page .fin-flexibility-modes span {
    color: var(--hu-blue) !important;
}

html[data-theme="dark"] .fin-page .fin-flexibility-left strong,
html[data-theme="dark"] .fin-page .fin-flexibility-modes strong {
    color: var(--hu-green-dark) !important;
}

html[data-theme="dark"] .fin-page .fin-flexibility-modes div {
    background: #151E18 !important;
    border-color: #315944 !important;
}


/* ==========================================================
   DARK — FINANCIAL OPERATIONS
   ========================================================== */

html[data-theme="dark"] .fin-page .fin-operations {
    background: var(--hu-blue-soft) !important;
    border-top-color: var(--hu-blue) !important;
}

html[data-theme="dark"] .fin-page .fin-operations header span,
html[data-theme="dark"] .fin-page .fin-operation-grid span {
    color: var(--hu-blue) !important;
}

html[data-theme="dark"] .fin-page .fin-operations header strong {
    color: var(--hu-green) !important;
}

html[data-theme="dark"] .fin-page .fin-operation-grid {
    background: #2E4B59 !important;
}

html[data-theme="dark"] .fin-page .fin-operation-grid article {
    background: #151E18 !important;
}

html[data-theme="dark"] .fin-page .fin-operation-grid strong {
    color: var(--hu-green-dark) !important;
}


/* ==========================================================
   DARK — POLICY NOTE
   ========================================================== */

html[data-theme="dark"] .fin-page .fin-policy-note {
    background: #151E18 !important;
    border-color: var(--line-dark) !important;
}

html[data-theme="dark"] .fin-page .fin-policy-note span {
    color: var(--hu-blue) !important;
}

html[data-theme="dark"] .fin-page .fin-policy-note p {
    color: var(--soft) !important;
}


/* ==========================================================
   DARK — SIGNATURE
   ========================================================== */

html[data-theme="dark"] .fin-page .fin-signature {
    background: var(--hu-green-soft) !important;
    border-top-color: var(--hu-green) !important;
}

html[data-theme="dark"] .fin-page .fin-signature-mark {
    color: #0E1511 !important;
    background: var(--hu-green) !important;
    border-bottom-color: var(--hu-blue) !important;
}

html[data-theme="dark"] .fin-page .fin-signature span {
    color: var(--hu-blue) !important;
}

html[data-theme="dark"] .fin-page .fin-signature h3 {
    color: var(--hu-green-dark) !important;
}

html[data-theme="dark"] .fin-page .fin-signature strong {
    color: var(--hu-green) !important;
}

html[data-theme="dark"] .fin-page .fin-signature a {
    color: var(--hu-blue-dark) !important;
    background: #151E18 !important;
    border-color: #315466 !important;
}


/* ==========================================================
   DARK — CLOSING
   ========================================================== */

html[data-theme="dark"] .fin-page .fin-closing {
    background: #0E1511 !important;
}

html[data-theme="dark"] .fin-page .fin-closing-panel {
    background: #183A2C !important;
    border-color: #315944 !important;
    border-left-color: var(--hu-blue) !important;
}

html[data-theme="dark"] .fin-page .fin-closing-panel > span {
    color: var(--hu-blue) !important;
}

html[data-theme="dark"] .fin-page .fin-closing-panel h2 {
    color: var(--hu-green-dark) !important;
}

html[data-theme="dark"] .fin-page .fin-closing-panel h2 span {
    color: var(--hu-blue) !important;
}

html[data-theme="dark"] .fin-page .fin-closing-panel button {
    color: #0E1511 !important;
    background: var(--hu-green) !important;
}

html[data-theme="dark"] .fin-page .fin-closing-panel button:hover,
html[data-theme="dark"] .fin-page .fin-closing-panel button:focus-visible {
    background: var(--hu-green-dark) !important;
}


/* ==========================================================
   THEME TRANSITIONS
   ========================================================== */

.fin-page,
.fin-page .fin-hero,
.fin-page .fin-clarity,
.fin-page .fin-principle,
.fin-page .fin-focus,
.fin-page .fin-message,
.fin-page .fin-flexibility,
.fin-page .fin-flexibility-modes div,
.fin-page .fin-operations,
.fin-page .fin-operation-grid article,
.fin-page .fin-policy-note,
.fin-page .fin-signature,
.fin-page .fin-signature a,
.fin-page .fin-closing,
.fin-page .fin-closing-panel {
    transition:
        background-color .24s ease,
        color .24s ease,
        border-color .24s ease;
}


/* ==========================================================
   MOBILE DARK MODE
   ========================================================== */

@media (max-width: 720px) {

    html[data-theme="dark"] .fin-page .fin-clarity-grid,
    html[data-theme="dark"] .fin-page .fin-operation-grid {
        background: var(--line-dark) !important;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .fin-page,
    .fin-page .fin-hero,
    .fin-page .fin-clarity,
    .fin-page .fin-principle,
    .fin-page .fin-focus,
    .fin-page .fin-message,
    .fin-page .fin-flexibility,
    .fin-page .fin-flexibility-modes div,
    .fin-page .fin-operations,
    .fin-page .fin-operation-grid article,
    .fin-page .fin-policy-note,
    .fin-page .fin-signature,
    .fin-page .fin-signature a,
    .fin-page .fin-closing,
    .fin-page .fin-closing-panel {
        transition: none !important;
    }

}