:root {
    --brand-navy: #081F41;
    --brand-night: #010A18;
    --brand-gold: #FFC017;
    --brand-gold-soft: #FFC84A;
    --brand-ice: #D1D9E6;
    --panel-white: #F9FAFC;
    --text-muted-light: #ADBBD1;
    --overlay-white-35: rgba(255, 255, 255, 0.35);
    --overlay-cream-20: rgba(245, 245, 241, 0.2);
    --bg-foundation: #F8F9F4;
    --bg-surface: #FDFDF8;
    --bg-section: #F1F3EE;
    --bg-elevated: #FEFEFA;
    --bg-control-active: #FFF7E2;
    --bg-button: #F1F3EE;
    --bg-button-hover: var(--brand-navy);
    --text-primary: #081F41;
    --text-secondary: #243854;
    --text-tertiary: #4C5E78;
    --text-on-dark: #F1F4F7;
    --text-muted-on-dark: #C6D0DA;
    --border-strong: #081F41;
    --border-accent: #FFC017;
    --focus-ring: rgba(255, 192, 23, 0.35);
    --shadow-button: 0px 8px 18px rgba(0, 0, 0, 0.18);
    --night-bg-foundation: #0F1318;
    --night-bg-surface: #161C22;
    --night-bg-section: #1D252D;
    --night-text-primary: #EEF2F5;
    --night-text-secondary: #BEC8D2;
    --night-border: #2B3641;
    --night-accent: #FFC84A;
    --color-site-white: var(--bg-surface);
    --color-site-white-deep: var(--bg-button);
    --color-brand-navy: var(--brand-navy);
    --color-brand-night: var(--brand-night);
    --color-brand-gold: var(--brand-gold);
    --color-brand-ice: var(--brand-ice);
    --body-text-size: 1rem;
    --body-text-size-large: 1.12rem;
    --body-text-size-xlarge: 1.25rem;
    --body-text-line-height: 1.65;
    --text-size-transition: 0.2s ease;
}

:root[data-time='morning'] {
    --bg-foundation: #FBFCF8;
    --bg-surface: #FFFFFB;
    --bg-section: #F3F5F1;
    --bg-elevated: #FFFFFF;
    --bg-control-active: #FFF9E8;
    --bg-button: #F3F5F1;
}

:root[data-time='midday'] {
    --bg-foundation: #F8F9F4;
    --bg-surface: #FDFDF8;
    --bg-section: #F1F3EE;
    --bg-elevated: #FEFEFA;
    --bg-control-active: #FFF7E2;
    --bg-button: #F1F3EE;
}

:root[data-time='evening'] {
    --bg-foundation: #F6F2EA;
    --bg-surface: #FCF8F1;
    --bg-section: #EEE9E1;
    --bg-elevated: #FDF9F2;
    --bg-control-active: #FDF1D8;
    --bg-button: #EEE9E1;
}

:root[data-time='night-light'] {
    --bg-foundation: #F1ECE3;
    --bg-surface: #F8F3EB;
    --bg-section: #E8E1D8;
    --bg-elevated: #FAF5ED;
    --bg-control-active: #F8E8C9;
    --bg-button: #E8E1D8;
}

:root[data-theme='night-environment'] {
    --bg-foundation: var(--night-bg-foundation);
    --bg-surface: var(--night-bg-surface);
    --bg-section: var(--night-bg-section);
    --bg-elevated: #222B34;
    --bg-control-active: #24303B;
    --bg-button: #1D252D;
    --bg-button-hover: var(--night-accent);
    --text-primary: var(--night-text-primary);
    --text-secondary: var(--night-text-secondary);
    --text-tertiary: #8FA0B0;
    --text-on-dark: var(--night-text-primary);
    --text-muted-on-dark: var(--night-text-secondary);
    --border-strong: var(--night-border);
    --border-accent: var(--night-accent);
    --color-site-white: var(--bg-surface);
    --color-site-white-deep: var(--bg-button);
}

/* =========================================
   Dark Mode Button Match to Corporate Site
   ========================================= */

:root[data-theme='night-environment'] .learn-more-button {
    background-color: var(--bg-button);
    color: #FFFFFF;
    border-color: var(--border-accent);
}

:root[data-theme='night-environment'] .learn-more-button .arrow {
    border-color: var(--brand-night);
}

:root[data-theme='night-environment'] .learn-more-button:hover {
    background-color: #FFC017 !important;
    color: #010A18 !important;
    border-color: #FFC017 !important;
    box-shadow: 0 5px 14px rgba(255, 192, 23, 0.35) !important;
}

:root[data-theme='night-environment'] .learn-more-button:hover .arrow {
    border-color: #010A18 !important;
}

:root[data-theme='night-environment'] .learn-more-button:active {
    box-shadow: 0 2px 4px rgba(7, 20, 38, 0.12);
}

/* ================================
   Poppins Font Family Full Set
   ================================ */

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins-v24-latin-100.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins-v24-latin-100italic.woff2') format('woff2');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins-v24-latin-200.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins-v24-latin-200italic.woff2') format('woff2');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins-v24-latin-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins-v24-latin-300italic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins-v24-latin-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins-v24-latin-500italic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins-v24-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins-v24-latin-600italic.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins-v24-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins-v24-latin-700italic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins-v24-latin-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins-v24-latin-800italic.woff2') format('woff2');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins-v24-latin-900.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins-v24-latin-900italic.woff2') format('woff2');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}



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

html {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    min-height: 100svh;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
    color: var(--text-primary);
    background: linear-gradient(to bottom, var(--overlay-white-35), var(--overlay-cream-20)), var(--bg-foundation);
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-style: normal;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: linear-gradient(to bottom, var(--overlay-white-35), var(--overlay-cream-20));
    pointer-events: none;
    z-index: -1;
}

.skip-link {
    position: absolute;
    top: -1000px;
    left: -1000px;
    background: #000000;
    color: var(--color-site-white);
    padding: 8px 16px;
    z-index: 9999;
    text-decoration: none;
    font-size: 14px;
}

.skip-link:focus {
    top: 10px;
    left: 10px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

p,
li,
blockquote,
figcaption,
td,
th,
label,
input,
textarea,
select,
.help-text,
.form-note,
.caption-text {
    font-size: var(--body-text-size);
    line-height: var(--body-text-line-height);
    transition: font-size var(--text-size-transition), line-height var(--text-size-transition);
}

body.text-scale-default {
    --body-text-size: 1rem;
    --body-text-line-height: 1.65;
}

body.text-scale-large {
    --body-text-size: var(--body-text-size-large);
    --body-text-line-height: 1.75;
}

body.text-scale-xlarge {
    --body-text-size: var(--body-text-size-xlarge);
    --body-text-line-height: 1.8;
}


/* =========================================
   Index page text scale wiring
   ========================================= */

body {
    --index-text-scale-factor: 1;
    --index-heading-scale-factor: 1;
}

body.text-scale-large {
    --index-text-scale-factor: 1.12;
    --index-heading-scale-factor: 1.08;
}

body.text-scale-xlarge {
    --index-text-scale-factor: 1.25;
    --index-heading-scale-factor: 1.15;
}

body.text-scale-large .message-block h1,
body.text-scale-xlarge .message-block h1 {
    font-size: calc(clamp(24px, 5vw, 33px) * var(--index-heading-scale-factor));
}

body.text-scale-large .message-block p,
body.text-scale-xlarge .message-block p {
    font-size: calc(clamp(20px, 2.2vw, 28px) * var(--index-text-scale-factor));
    line-height: calc(1.45 * var(--index-text-scale-factor));
}

body.text-scale-large .page-box-1 p,
body.text-scale-large .page-box-8 p,
body.text-scale-large .page-box-11 p,
body.text-scale-large .page-box-12 p,
body.text-scale-large .text-box-js p,
body.text-scale-large .quote-box h5,
body.text-scale-xlarge .page-box-1 p,
body.text-scale-xlarge .page-box-8 p,
body.text-scale-xlarge .page-box-11 p,
body.text-scale-xlarge .page-box-12 p,
body.text-scale-xlarge .text-box-js p,
body.text-scale-xlarge .quote-box h5 {
    font-size: calc(clamp(17px, 2.5vw, 20px) * var(--index-text-scale-factor)) !important;
    line-height: calc(1.3 * var(--index-text-scale-factor));
}

body.text-scale-large .page-box-3 p,
body.text-scale-large .page-box-10 p,
body.text-scale-large .faq-container .accordion_content p,
body.text-scale-xlarge .page-box-3 p,
body.text-scale-xlarge .page-box-10 p,
body.text-scale-xlarge .faq-container .accordion_content p {
    font-size: calc(clamp(18px, 2.5vw, 28px) * var(--index-text-scale-factor)) !important;
    line-height: calc(1.3 * var(--index-text-scale-factor));
}

body.text-scale-large .page-box-4 ul li,
body.text-scale-large .page-box-8 ul li,
body.text-scale-large .page-box-10 ul li,
body.text-scale-large .page-box-11 ul li,
body.text-scale-large .page-box-14 ul li,
body.text-scale-large .accordion_content li,
body.text-scale-xlarge .page-box-4 ul li,
body.text-scale-xlarge .page-box-8 ul li,
body.text-scale-xlarge .page-box-10 ul li,
body.text-scale-xlarge .page-box-11 ul li,
body.text-scale-xlarge .page-box-14 ul li,
body.text-scale-xlarge .accordion_content li {
    font-size: calc(clamp(18px, 2.5vw, 28px) * var(--index-text-scale-factor)) !important;
    line-height: calc(1.3 * var(--index-text-scale-factor));
}

body.text-scale-large .page-box-1 h1,
body.text-scale-large .page-box-8 h1,
body.text-scale-large .page-box-11 h1,
body.text-scale-large .page-box-12 h1,
body.text-scale-large .text-box-js h1,
body.text-scale-xlarge .page-box-1 h1,
body.text-scale-xlarge .page-box-8 h1,
body.text-scale-xlarge .page-box-11 h1,
body.text-scale-xlarge .page-box-12 h1,
body.text-scale-xlarge .text-box-js h1 {
    font-size: calc(clamp(28px, 3.8vw, 50px) * var(--index-heading-scale-factor));
}

body.text-scale-large .page-box-3 h1,
body.text-scale-large .page-box-4 h1,
body.text-scale-large .page-box-5 h1,
body.text-scale-large .page-box-10 h1,
body.text-scale-large .page-box-14 h1,
body.text-scale-xlarge .page-box-3 h1,
body.text-scale-xlarge .page-box-4 h1,
body.text-scale-xlarge .page-box-5 h1,
body.text-scale-xlarge .page-box-10 h1,
body.text-scale-xlarge .page-box-14 h1 {
    font-size: calc(clamp(20px, 2.8vw, 50px) * var(--index-heading-scale-factor));
}

body.text-scale-large .page-box-12 h2,
body.text-scale-large .text-box-js h2,
body.text-scale-large .faq-container span,
body.text-scale-large .icon,
body.text-scale-xlarge .page-box-12 h2,
body.text-scale-xlarge .text-box-js h2,
body.text-scale-xlarge .faq-container span,
body.text-scale-xlarge .icon {
    font-size: calc(clamp(20px, 3vw, 26px) * var(--index-heading-scale-factor)) !important;
    line-height: calc(1.1 * var(--index-heading-scale-factor));
}

body.text-scale-large .page-box-1 h3,
body.text-scale-large .page-box-8 h3,
body.text-scale-large .page-box-4 h2,
body.text-scale-large .page-box-14 h2,
body.text-scale-xlarge .page-box-1 h3,
body.text-scale-xlarge .page-box-8 h3,
body.text-scale-xlarge .page-box-4 h2,
body.text-scale-xlarge .page-box-14 h2 {
    font-size: calc(clamp(20px, 3vw, 26px) * var(--index-heading-scale-factor));
    line-height: calc(1.3 * var(--index-heading-scale-factor));
}

body.text-scale-large .page-box-3 h3,
body.text-scale-large .page-box-10 h3,
body.text-scale-xlarge .page-box-3 h3,
body.text-scale-xlarge .page-box-10 h3 {
    font-size: calc(clamp(32px, 2.5vw, 50px) * var(--index-heading-scale-factor));
    line-height: calc(1.3 * var(--index-heading-scale-factor));
}

body.text-scale-large .page-box-4 h3,
body.text-scale-large .page-box-5 h3,
body.text-scale-large .text-box-js h3,
body.text-scale-xlarge .page-box-4 h3,
body.text-scale-xlarge .page-box-5 h3,
body.text-scale-xlarge .text-box-js h3 {
    font-size: calc(clamp(18px, 2vw, 24px) * var(--index-heading-scale-factor));
    line-height: calc(1.3 * var(--index-heading-scale-factor));
}

body.text-scale-large .index-footer-corporate h3,
body.text-scale-large .index-footer-corporate h4,
body.text-scale-xlarge .index-footer-corporate h3,
body.text-scale-xlarge .index-footer-corporate h4 {
    font-size: calc(clamp(18px, 1.1vw, 22px) * var(--index-heading-scale-factor));
}

body.text-scale-large .index-footer-corporate a,
body.text-scale-xlarge .index-footer-corporate a {
    font-size: calc(clamp(15px, 0.98vw, 18px) * var(--index-text-scale-factor));
    line-height: calc(1.26 * var(--index-text-scale-factor));
}

.platform-main {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

.platform-panel {
    width: min(92vw, 900px);
    background: var(--color-site-white);
    border: 1.5px solid rgba(8, 31, 65, 0.08);
    border-radius: 2px;
    box-shadow: 0 18px 42px rgba(7, 20, 38, 0.18);
    padding: 42px 40px 36px;
    display: grid;
    gap: 24px;
    justify-items: center;
    text-align: center;
}

.logo-box img {
    width: min(260px, 42vw);
    height: auto;
    display: block;
}

.message-block {
    width: min(100%, 650px);
}

.message-block h1 {
    margin: 0 0 14px 0;
    color: var(--text-primary);
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.2;
    font-weight: 700;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.18);
}

.message-block p {
    margin: 0 0 10px 0;
    color: var(--text-secondary);
    font-size: clamp(18px, 2.1vw, 22px);
    font-weight: 300;
    line-height: 1.25;
    padding-bottom: 11px;
}

.page-buttons {
    display: flex;
    justify-content: center;
    width: 100%;
}

.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 25px;
}

.learn-more-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    min-height: 60px;
    padding: 0 24px;
    border: 1px solid var(--border-accent);
    background-color: var(--bg-elevated);
    color: var(--brand-night);
    font-size: clamp(18px, 2vw + 8px, 25px);
    line-height: 1;
    font-weight: 700;
    text-decoration: none;
    border-radius: 10px;
    box-shadow: 0 14px 22px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    margin-bottom: 0;
    white-space: nowrap;
    will-change: box-shadow, background-color, border-color, color;
    transition:
        box-shadow 0.63s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.42s ease,
        border-color 0.42s ease,
        color 0.42s ease;
}

.learn-more-button .arrow {
    border: solid var(--brand-night);
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 4px;
    margin-left: 12px;
    transform: rotate(-45deg);
    transition:
        border-color 0.42s ease,
        transform 0.42s ease;
}

.learn-more-button:hover {
    color: var(--color-site-white);
    background-color: var(--brand-navy);
    border-color: var(--border-accent);
    box-shadow: 0 5px 10px rgba(7, 20, 38, 0.16);
}

.learn-more-button:hover .arrow {
    border-color: var(--color-site-white);
    transform: translateX(2px) rotate(-45deg);
}

.learn-more-button:active {
    box-shadow: 0 2px 4px rgba(7, 20, 38, 0.12);
    transition:
        box-shadow 0.14s ease,
        background-color 0.14s ease,
        border-color 0.14s ease,
        color 0.14s ease;
}

.learn-more-button:active .arrow {
    border-color: var(--color-site-white);
    transform: translateX(3px) rotate(-45deg);
}
.learn-more-button:focus-visible,
.accessibility-trigger:focus-visible,
.accessibility-close:focus-visible,
.setting-toggle:focus-visible,
.accessibility-option-button:focus-visible {
    outline: 3px solid var(--border-accent);
    outline-offset: 4px;
}

.motion-paused {
    animation-play-state: paused !important;
    transition: none !important;
}

.accessibility-trigger {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 62px;
    height: 62px;
    border: 2px solid var(--border-accent) !important;
    border-radius: 50%;
    background: var(--bg-elevated) !important;
    color: var(--brand-night);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 14px 22px rgba(0, 0, 0, 0.28) !important;
    transition: background-color 0.42s ease, border-color 0.42s ease, color 0.42s ease, box-shadow 0.63s cubic-bezier(0.22, 1, 0.36, 1), transform 0.25s ease;
    z-index: 1202;
    padding: 8px !important;
    overflow: visible !important;
}

.accessibility-trigger:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 5px 10px rgba(7, 20, 38, 0.16) !important;
    background: var(--brand-navy) !important;
    border-color: var(--border-accent) !important;
    color: #FFFFFF !important;
}

.accessibility-trigger:hover,
.accessibility-trigger:focus-visible {
    background: var(--brand-navy) !important;
    color: #FFFFFF !important;
    border-color: var(--border-accent) !important;
}

.accessibility-trigger:hover img,
.accessibility-trigger:focus-visible img {
    filter: brightness(0) invert(1);
}

.accessibility-trigger-icon,
.accessibility-trigger img {
    width: 28px !important;
    height: 28px !important;
    display: block;
    overflow: visible !important;
    filter: brightness(0) saturate(100%);
    transition: filter 0.42s ease;
}

.accessibility-trigger:hover .accessibility-trigger-icon,
.accessibility-trigger:hover img,
.accessibility-trigger:focus-visible .accessibility-trigger-icon,
.accessibility-trigger:focus-visible img {
    filter: brightness(0) invert(1);
}

.accessibility-panel {
    position: fixed;
    right: 24px;
    bottom: 94px;
    width: min(92vw, 390px);
    background: var(--color-site-white);
    border: 1.5px solid var(--border-accent);
    border-radius: 18px;
    box-shadow: 0 18px 42px rgba(7, 20, 38, 0.18);
    z-index: 1201;
}

.accessibility-panel[hidden] {
    display: none;
}

.accessibility-panel-inner {
    padding: 22px 22px 20px;
}

.accessibility-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.accessibility-panel-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(20px, 2vw, 24px);
    line-height: 1.2;
}

.accessibility-close {
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-primary);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.38s ease, border-color 0.38s ease, box-shadow 0.38s ease;
}

.accessibility-close:hover {
    background: rgba(255, 192, 23, 0.10);
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px rgba(255, 192, 23, 0.22);
}

.accessibility-panel p {
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.45;
}

.accessibility-setting {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-top: 22px;
}

.accessibility-setting + .accessibility-setting {
    margin-top: 18px;
}

.accessibility-setting-text {
    flex: 1;
}

.accessibility-setting-text h3 {
    margin: 0 0 6px 0;
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1.2;
}

.accessibility-setting-text p {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-primary);
}

.setting-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 108px;
    padding: 9px 12px;
    border: 1px solid rgba(8, 31, 65, 0.15);
    border-radius: 999px;
    background: var(--color-site-white);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.38s ease, border-color 0.38s ease, box-shadow 0.38s ease;
}

.setting-toggle:hover {
    background: rgba(255, 192, 23, 0.08);
    box-shadow: 0 0 0 3px rgba(255, 192, 23, 0.22), 0 6px 14px rgba(7, 20, 38, 0.1);
}

.setting-toggle[aria-checked="true"] {
    border-color: var(--border-accent);
    background: rgb(255, 250, 232);
}

.setting-toggle-track {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: rgba(8, 31, 65, 0.22);
    flex-shrink: 0;
}

.setting-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-site-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.25s ease;
}

.setting-toggle[aria-checked="true"] .setting-toggle-track {
    background: var(--border-accent);
}

.setting-toggle[aria-checked="true"] .setting-toggle-thumb {
    transform: translateX(16px);
}

.setting-toggle-label {
    font-size: 14px;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
}

.accessibility-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.accessibility-control-group {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(8, 31, 65, 0.12);
}

.accessibility-control-group h3 {
    margin: 0 0 6px 0;
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1.2;
}

.accessibility-helper-text {
    margin: 0 0 10px 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-primary);
}

.accessibility-option-button {
    min-width: 120px;
    padding: 12px 18px;
    border: 1px solid var(--border-accent);
    background: var(--color-site-white);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.38s ease, color 0.38s ease, border-color 0.38s ease, box-shadow 0.38s ease;
}

.accessibility-option-button:hover,
.accessibility-option-button:focus-visible {
    background-color: var(--brand-navy);
    color: var(--color-site-white);
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px rgba(255, 192, 23, 0.22);
    outline: none;
}

.accessibility-option-button.is-active,
.accessibility-option-button[aria-pressed="true"] {
    background-color: var(--brand-navy);
    color: var(--color-site-white);
    border-color: var(--border-accent);
}

.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

:root[data-theme='night-environment'] body,
:root[data-theme='night-environment'] .platform-home {
    color: var(--night-text-primary);
}

:root[data-theme='night-environment'] .platform-panel {
    background: var(--night-bg-surface);
    border-color: var(--night-border);
}

:root[data-theme='night-environment'] .message-block h1,
:root[data-theme='night-environment'] .message-block p {
    color: #FFFFFF;
}

:root[data-theme='night-environment'] .message-block p {
    color: var(--night-text-secondary);
}
:root[data-theme='night-environment'] .accessibility-panel {
    background: #FFFFFF !important;
    border-color: #FFC017 !important;
}

:root[data-theme='night-environment'] .accessibility-panel-header h2,
:root[data-theme='night-environment'] .accessibility-panel p,
:root[data-theme='night-environment'] .accessibility-setting-text h3,
:root[data-theme='night-environment'] .accessibility-setting-text p,
:root[data-theme='night-environment'] .accessibility-control-group h3,
:root[data-theme='night-environment'] .accessibility-helper-text,
:root[data-theme='night-environment'] .accessibility-close {
    color: #081F41 !important;
}

:root[data-theme='night-environment'] .setting-toggle {
    background: #FFFFFF !important;
    color: #081F41 !important;
    border-color: #FFC017 !important;
}

:root[data-theme='night-environment'] .setting-toggle[aria-checked='true'] {
    background: rgb(255, 250, 232) !important;
}

:root[data-theme='night-environment'] .setting-toggle-track {
    background: rgba(8, 31, 65, 0.22) !important;
}

:root[data-theme='night-environment'] .setting-toggle[aria-checked='true'] .setting-toggle-track {
    background: #FFC017 !important;
}

:root[data-theme='night-environment'] .setting-toggle-thumb {
    background: #FFFFFF !important;
}

:root[data-theme='night-environment'] .accessibility-option-button {
    background: #FFFFFF !important;
    color: #081F41 !important;
    border-color: #FFC017 !important;
}

:root[data-theme='night-environment'] .accessibility-option-button:hover,
:root[data-theme='night-environment'] .accessibility-option-button:focus-visible,
:root[data-theme='night-environment'] .accessibility-option-button.is-active,
:root[data-theme='night-environment'] .accessibility-option-button[aria-pressed='true'] {
    background-color: #081F41 !important;
    color: #FFFFFF !important;
    border-color: #FFC017 !important;
}

@media (max-width: 640px) {
    body::before {
        display: none;
    }

        .platform-main {
        display: block;
        min-height: 100svh;
        min-height: 100dvh;
        padding: max(15px, env(safe-area-inset-top)) 0 0 0;
    }

    .platform-panel {
        width: 100%;
        max-width: 100%;
        min-height: 100svh;
        min-height: 100dvh;
        padding: 0;
        background: var(--color-site-white);
        border: none;
        box-shadow: none;
        align-content: start;
    }
    
    :root[data-theme='night-environment'] body {
        background: var(--bg-foundation);
    }

    .logo-box img {
        width: min(1170px, 28vw);
    }
    
        .message-block {
        width: 85%;
    }

    .message-block h1 {
        font-size: clamp(17px, 5vw, 20px);
        margin-top: -18px;
    }

    .message-block p {
        font-size: clamp(16px, 4vw, 18px);
        margin-bottom: 5px;
    }

    .button-container {
        margin-top: 0px;
    }
    
    .learn-more-button {
        min-height: 50px;
        padding: 0 18px;
    }

    .accessibility-panel {
        top: max(12px, env(safe-area-inset-top));
        right: 12px;
        bottom: calc(64px + max(16px, env(safe-area-inset-bottom)));
        left: 12px;
        width: auto;
        max-width: none;
        max-height: none;
        overflow: hidden;
    }

    .accessibility-panel-inner {
        height: 100%;
        max-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - calc(64px + max(16px, env(safe-area-inset-bottom))) - 12px);
        padding: 16px 16px 14px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .accessibility-trigger {
        width: 52px;
        height: 52px;
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
    }

    .accessibility-trigger-icon,
    .accessibility-trigger img {
        width: 24px !important;
        height: 24px !important;
    }

    .corporate-main {
        padding: 5px 16px;
    }

    .logo,
    .right-section a {
        font-size: 16px;
    }

    .right-section a {
        padding: 4px 0;
        white-space: nowrap;
    }
}

/* Mobile header CTA aligned to corporate site standard */
.corporate-main {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 24px;
    z-index: 1000;
    color: var(--color-site-white);
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.corporate-main.transparent {
    background-color: transparent !important;
    color: var(--color-site-white) !important;
    box-shadow: none;
}

.corporate-main.scrolled {
    background-color: rgba(255, 255, 245, 0.97);
    color: var(--brand-night);
    box-shadow: 0 10px 24px rgba(7, 20, 38, 0.12);
    border-bottom: 1px solid rgba(8, 31, 65, 0.08);
}

.logo,
.right-section a {
    color: inherit;
    font-family: 'Poppins', 'Montserrat', sans-serif;
    font-size: clamp(18px, 1.2vw, 28px);
    position: relative;
    display: block;
    list-style: none;
    transition: color 0.3s ease;
}

.logo {
    font-weight: 600;
    text-decoration: none;
}

.right-section {
    display: flex;
    gap: 20px;
    align-items: center;
    position: relative;
}

.right-section a {
    font-weight: 500;
    letter-spacing: 0.3px;
    text-decoration: none;
    padding: 6px 0;
    line-height: 1;
}

.right-section a::before {
    content: '';
    position: absolute;
    width: 0;
    height: 1.5px;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 192, 23, 0.95);
    transition: width 0.4s ease;
}

.right-section a:hover::before {
    width: 100%;
}

.corporate-main.fixed-dark-text .logo,
.corporate-main.fixed-dark-text .right-section a,
.corporate-main.scrolled .logo,
.corporate-main.scrolled .right-section a {
    color: var(--brand-night);
}

:root[data-theme='night-environment'] .corporate-main {
    color: #FFFFFF !important;
}

:root[data-theme='night-environment'] .corporate-main.scrolled {
    background-color: #161C22 !important;
    color: #FFFFFF !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4) !important;
    border-bottom: 1px solid rgba(255, 200, 74, 0.18) !important;
}

:root[data-theme='night-environment'] .corporate-main .logo,
:root[data-theme='night-environment'] .corporate-main .right-section a,
:root[data-theme='night-environment'] .corporate-main.scrolled .logo,
:root[data-theme='night-environment'] .corporate-main.scrolled .right-section a {
    color: #FFFFFF !important;
}



.cta-button {
    display: inline-block;
    padding: 12px 24px;
    margin-top: 15px;
    background: var(--color-site-white);
    color: var(--brand-night);
    border: 2px solid var(--border-accent);
    text-decoration: none;
    font-weight: 800;
    font-size: 30px;
    border-radius: 1px;
    transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease, box-shadow 0.75s linear;
    cursor: pointer;
    box-shadow: -0.1px -0.1px 30px rgba(36, 35, 35, 0.25), 10px 10px 15px rgba(35,35,35,0.55);
}

.cta-button:hover {
    background: var(--brand-navy);
    color: var(--color-site-white);
    border: 2px solid var(--border-accent);
    box-shadow: none;
}

/* =========================================
   Squares 9 Platform Temporary Landing
   ========================================= */

.platform-home {
    background: var(--brand-night);
}

.platform-home::before {
    content: none;
    display: none;
}

.platform-background-video {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    z-index: -2;
    pointer-events: none;
    filter: none;
    opacity: 0;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: opacity 900ms ease;
}

.platform-home.platform-video-ready .platform-background-video,
.platform-home.platform-motion-reduced .platform-background-video {
    opacity: 1;
}

.platform-home .platform-panel {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 900ms ease,
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.platform-home .logo-box img[data-light-src][data-dark-src] {
    width: 90px;
    max-width: 90px;
    height: auto;
}
.platform-home.platform-content-ready .platform-panel {
    opacity: 1;
    transform: translateY(0);
}

.platform-home .accessibility-trigger {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    transition:
        opacity 700ms ease,
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.42s ease,
        border-color 0.42s ease,
        color 0.42s ease,
        box-shadow 0.63s cubic-bezier(0.22, 1, 0.36, 1);
}

.platform-home.platform-content-ready .accessibility-trigger {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.platform-home.platform-content-ready .accessibility-trigger:hover {
    transform: scale(1.1) !important;
}

.platform-home .platform-panel[aria-busy='true'] {
    pointer-events: none;
}

/* =========================================
   Platform background video responsive delivery
   Scoped only to .platform-background-video
   ========================================= */

.platform-background-video {
    display: block;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    min-width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
}

@supports (height: 100dvh) {
    .platform-background-video {
        height: 100dvh;
        min-height: 100dvh;
    }
}

@media screen and (min-width: 1400px) {
    .platform-background-video {
        width: 100vw;
        height: 100vh;
        height: 100svh;
        min-height: 100svh;
        object-fit: cover;
        object-position: center center;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1399px) {
    .platform-background-video {
        width: 100vw;
        height: 100vh;
        height: 100svh;
        min-height: 100svh;
        object-fit: cover;
        object-position: center center;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .platform-background-video {
        width: 100vw;
        height: 100vh;
        height: 100svh;
        min-height: 100svh;
        object-fit: cover;
        object-position: center center;
    }
}

@media screen and (max-width: 767px) {
    .platform-background-video {
        width: 100vw;
        height: 100vh;
        height: 100svh;
        min-height: 100svh;
        object-fit: cover;
        object-position: center center;
    }
}