body.ar-public {
    --ar-font-display: "Space Grotesk", "Segoe UI Variable", "Segoe UI", sans-serif;
    --ar-font-ui: "Space Grotesk", "Segoe UI Variable", "Segoe UI", sans-serif;
    --ar-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace;
    position: relative;
}

body.ar-legal {
    --ar-font-display: "Merriweather", "Iowan Old Style", "Times New Roman", serif;
    --ar-font-ui: "Space Grotesk", "Segoe UI Variable", "Segoe UI", sans-serif;
    --ar-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace;
    position: relative;
}

:root[data-theme="dark"] body.ar-public,
:root[data-theme="dark"] body.ar-legal {
    --ar-bg: #050910;
    --ar-bg-elevated: #09111a;
    --ar-surface: rgba(9, 16, 25, 0.82);
    --ar-surface-2: rgba(12, 20, 31, 0.86);
    --ar-surface-3: rgba(15, 24, 36, 0.90);
    --ar-surface-soft: rgba(4, 8, 14, 0.78);
    --ar-text: #ecf5ff;
    --ar-text-soft: #b8ccde;
    --ar-text-muted: #6e8499;
    --ar-line: rgba(200, 220, 240, 0.10);
    --ar-line-strong: rgba(200, 220, 240, 0.18);
    --ar-accent: #66f6cf;
    --ar-accent-hover: #3fddb6;
    --ar-accent-2: #f1b55d;
    --ar-accent-soft: rgba(102, 246, 207, 0.11);
    --ar-overlay: rgba(2, 4, 8, 0.80);
    --ar-shadow: 0 28px 64px rgba(0, 0, 0, 0.44);
    --ar-shadow-soft: 0 8px 28px rgba(0, 0, 0, 0.28);
}

:root[data-theme="light"] body.ar-public,
:root[data-theme="light"] body.ar-legal {
    --ar-bg: #eef3f6;
    --ar-bg-elevated: #f8fbfd;
    --ar-surface: rgba(255, 255, 255, 0.92);
    --ar-surface-2: rgba(247, 251, 253, 0.96);
    --ar-surface-3: rgba(238, 245, 249, 0.98);
    --ar-surface-soft: rgba(250, 253, 255, 0.94);
    --ar-text: #102131;
    --ar-text-soft: #314454;
    --ar-text-muted: #4b5f70;
    --ar-line: rgba(16, 33, 49, 0.1);
    --ar-line-strong: rgba(16, 33, 49, 0.17);
    --ar-accent: #168f72;
    --ar-accent-hover: #0f775f;
    --ar-accent-2: #a46516;
    --ar-accent-soft: rgba(22, 143, 114, 0.11);
    --ar-overlay: rgba(16, 33, 49, 0.18);
    --ar-shadow: 0 18px 42px rgba(25, 47, 66, 0.1);
    --ar-shadow-soft: 0 8px 20px rgba(25, 47, 66, 0.08);
}

body.ar-section-home-loans {
    --ar-showcase-ink: #081722;
    --ar-showcase-glow: rgba(241, 181, 93, 0.18);
    --ar-showcase-spark: #f1b55d;
}

body.ar-section-savings {
    --ar-showcase-ink: #071918;
    --ar-showcase-glow: rgba(102, 246, 207, 0.16);
    --ar-showcase-spark: #66f6cf;
}

body.ar-section-term-deposits {
    --ar-showcase-ink: #091625;
    --ar-showcase-glow: rgba(126, 188, 255, 0.18);
    --ar-showcase-spark: #7ebcff;
}

body.ar-legal {
    --ar-showcase-ink: #081722;
    --ar-showcase-glow: rgba(241, 181, 93, 0.16);
    --ar-showcase-spark: #f1b55d;
}

body.ar-public::before,
body.ar-legal::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 62% 36% at 14% 0, color-mix(in srgb, var(--ar-accent) 12%, transparent), transparent 62%),
        radial-gradient(ellipse 52% 30% at 84% 8%, color-mix(in srgb, var(--ar-showcase-glow) 52%, transparent), transparent 62%),
        linear-gradient(180deg, color-mix(in srgb, var(--ar-text) 3%, transparent), transparent 18%);
    opacity: 0.58;
    z-index: 0;
}

body.ar-public .bg-layer,
body.ar-legal .bg-layer {
    background:
        radial-gradient(ellipse 72% 44% at 12% 0, color-mix(in srgb, var(--ar-accent) 14%, transparent), transparent 62%),
        radial-gradient(ellipse 58% 36% at 88% 6%, color-mix(in srgb, var(--ar-showcase-glow) 72%, transparent), transparent 60%),
        radial-gradient(ellipse 40% 28% at 50% 52%, color-mix(in srgb, var(--ar-showcase-spark) 6%, transparent), transparent 68%),
        linear-gradient(180deg, color-mix(in srgb, var(--ar-showcase-ink) 64%, #070d15) 0%, #070d15 48%, #04080f 100%);
}

:root[data-theme="light"] body.ar-public .bg-layer,
:root[data-theme="light"] body.ar-legal .bg-layer {
    background:
        radial-gradient(ellipse 68% 44% at 14% 0, color-mix(in srgb, var(--ar-accent) 15%, transparent), transparent 60%),
        radial-gradient(ellipse 54% 38% at 86% 6%, color-mix(in srgb, var(--ar-showcase-glow) 90%, transparent), transparent 58%),
        radial-gradient(ellipse 46% 26% at 50% 100%, color-mix(in srgb, var(--ar-showcase-spark) 12%, transparent), transparent 74%),
        linear-gradient(180deg, color-mix(in srgb, var(--ar-bg) 96%, var(--ar-surface-soft)) 0%, var(--ar-bg-elevated) 52%, var(--ar-bg) 100%);
}

body.ar-public .site-header,
body.ar-legal .site-header {
    top: 10px;
    z-index: 120;
    width: min(var(--ar-shell-max), calc(100vw - 24px));
    margin: 6px auto 0;
    border: 1px solid color-mix(in srgb, var(--ar-line-strong) 72%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--ar-surface) 78%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    backdrop-filter: blur(24px) saturate(1.5);
    will-change: transform;
    box-shadow:
        var(--ar-shadow-soft),
        inset 0 1px 0 color-mix(in srgb, var(--ar-text) 6%, transparent);
}

body.ar-public .site-header-inner,
body.ar-legal .site-header-inner {
    min-height: 64px;
    padding: 12px 16px;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) auto auto;
}

body.ar-public .site-brand-mark,
body.ar-legal .site-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--ar-surface-2) 96%, transparent), color-mix(in srgb, var(--ar-surface) 88%, transparent));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--ar-line) 72%, transparent),
        0 0 24px color-mix(in srgb, var(--ar-accent) 10%, transparent),
        0 0 44px color-mix(in srgb, var(--ar-showcase-spark) 12%, transparent);
}

body.ar-public .site-brand-tagline,
body.ar-legal .site-brand-tagline {
    color: var(--ar-text-muted);
    font-family: var(--ar-font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

body.ar-public button.primary,
body.ar-public button:not(.secondary):not(.ghost):not(.danger):not(.icon-btn):not(.chip-btn):not(.filter-pad-btn),
body.ar-public .buttonish.primary {
    color: #04110f;
}

body.ar-public button.primary:hover,
body.ar-public button:not(.secondary):not(.ghost):not(.danger):not(.icon-btn):not(.chip-btn):not(.filter-pad-btn):hover,
body.ar-public .buttonish.primary:hover {
    color: #04110f;
}

body.ar-public .site-header-context,
body.ar-legal .site-header-context,
body.ar-public .site-header-actions,
body.ar-legal .site-header-actions {
    border: 1px solid var(--ar-line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--ar-surface-2) 92%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ar-text) 4%, transparent);
}

body.ar-public .site-header-context,
body.ar-legal .site-header-context {
    padding: 8px 12px;
}

body.ar-public .site-header-actions,
body.ar-legal .site-header-actions {
    padding: 5px;
}

body.ar-public .site-header-actions > *,
body.ar-legal .site-header-actions > * {
    border-radius: 10px !important;
}

body.ar-public .shell-public,
body.ar-legal .shell {
    position: relative;
    z-index: 1;
    padding-top: 24px;
    padding-bottom: 48px;
}

body.ar-public .panel,
body.ar-legal .panel {
    border-radius: 22px;
    border-color: color-mix(in srgb, var(--ar-line-strong) 80%, transparent);
    background: linear-gradient(160deg, color-mix(in srgb, var(--ar-surface) 92%, transparent), color-mix(in srgb, var(--ar-surface-2) 88%, transparent));
    box-shadow: var(--ar-shadow-soft), inset 0 1px 0 color-mix(in srgb, var(--ar-text) 5%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
}

body.ar-public .site-footer,
body.ar-legal .site-footer {
    position: relative;
    z-index: 1;
    padding-bottom: 40px;
}

body.ar-legal .legal-hero,
body.ar-legal .legal-panel,
body.ar-legal .legal-support-card {
    padding: 22px;
}

body.ar-legal .legal-hero h1 {
    font-family: var(--ar-font-display);
    font-size: clamp(2.4rem, 4.8vw, 4.2rem);
    line-height: 0.94;
    letter-spacing: -0.05em;
}

@media (max-width: 760px) {
    body.ar-public .site-header,
    body.ar-legal .site-header {
        width: calc(100vw - 24px);
    }

    body.ar-public .site-header-context,
    body.ar-legal .site-header-context {
        display: none;
    }

    body.ar-public .shell-public,
    body.ar-legal .shell {
        width: calc(100vw - 24px);
        padding-top: 22px;
    }
}