/* Acres tokens — from design-contracts/tokens.stme-sf-fhq-web.css (landing-page). */
:root {
    --acres-white: #FFFFFF;
    --acres-gray-50: #F9FAFB;
    --acres-gray-200: #E5E7EB;
    --acres-gray-300: #D1D5DB;
    --acres-gray-500: #6B7280;
    --acres-gray-600: #4B5563;
    --acres-gray-800: #1F2A37;
    --acres-gray-900: #111928;
    --acres-blue-50: #EBF5FF;
    --acres-blue-500: #0C60A5;
    --acres-blue-700: #003879;
    --acres-table-header-bg: #E8F0F4;
    --acres-ui-background-low-primary: #FFFFFF;

    --acres-spacing-02: 4px;
    --acres-spacing-03: 8px;
    --acres-spacing-04: 12px;
    --acres-spacing-05: 16px;
    --acres-spacing-07: 24px;
    --acres-spacing-08: 32px;

    --acres-radius-card: 8px;
    --acres-elevation-01: 0 1px 4px 0 rgba(0, 0, 0, 0.10);

    --acres-font-meijer-sans: "Meijer Sans", Inter, Helvetica, Arial, sans-serif;
    --acres-font-xl-demi: 600 20px/1.25 var(--acres-font-meijer-sans);
    --acres-font-xl-bold: 700 20px/1.25 Inter, Helvetica, Arial, sans-serif;
    --acres-font-3xl-bold: 700 30px/1.5 Inter, Helvetica, Arial, sans-serif;
    --acres-font-base-medium: 500 16px/1.25 Inter, Helvetica, Arial, sans-serif;
    --acres-font-sm-regular: 400 14px/1.5 Inter, Helvetica, Arial, sans-serif;
    --acres-font-sm-medium: 500 14px/1.5 Inter, Helvetica, Arial, sans-serif;
    --acres-font-sm-semibold: 600 14px/1.5 Inter, Helvetica, Arial, sans-serif;
    --acres-font-xs-regular: 400 12px/1.5 Inter, Helvetica, Arial, sans-serif;
    --acres-font-xs-semibold: 600 12px/1.5 Inter, Helvetica, Arial, sans-serif;
}

html, body {
    margin: 0;
    height: 100%;
}

body {
    font: var(--acres-font-sm-medium);
    color: var(--acres-gray-900);
    background: var(--acres-gray-50);
}

/* App frame */
.fhq-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--acres-white);
}

.fhq-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--acres-spacing-05);
    background: var(--acres-gray-50);
}

/* Header */
.fhq-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    height: 64px;
    padding: 0 var(--acres-spacing-07);
    background: var(--acres-white);
    border-bottom: 1px solid var(--acres-gray-200);
    box-shadow: var(--acres-elevation-01);
}

.fhq-header__brand {
    display: flex;
    align-items: center;
    gap: var(--acres-spacing-04);
    text-decoration: none;
}

.fhq-header__logo {
    width: 32px;
    height: 26.5px;
}

.fhq-header__product {
    font: var(--acres-font-xl-demi);
    letter-spacing: 0.16px;
    color: var(--acres-gray-900);
}

.fhq-header__channels {
    display: flex;
    padding: 0 var(--acres-spacing-08);
}

.fhq-channel-link {
    display: flex;
    align-items: center;
    gap: var(--acres-spacing-03);
    padding: 0 var(--acres-spacing-05);
    font: var(--acres-font-sm-medium);
    color: var(--acres-gray-900);
    text-decoration: none;
}

.fhq-channel-link--active {
    background: var(--acres-blue-500);
    color: var(--acres-white);
}

.fhq-channel-link__icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.fhq-header__account {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Account menu */
.fhq-account {
    position: relative;
}

.fhq-account__toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--acres-gray-900);
    cursor: pointer;
}

.fhq-account__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--acres-blue-50);
    font: var(--acres-font-sm-semibold);
    color: var(--acres-gray-600);
}

.fhq-account__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.fhq-account__menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 1001;
    min-width: 140px;
    padding: var(--acres-spacing-03) 0;
    background: var(--acres-white);
    border: 1px solid var(--acres-gray-200);
    border-radius: var(--acres-radius-card);
    box-shadow: var(--acres-elevation-01);
}

.fhq-account__menu-item {
    display: block;
    width: 100%;
    padding: var(--acres-spacing-03) var(--acres-spacing-05);
    border: 0;
    background: none;
    font: var(--acres-font-sm-medium);
    color: var(--acres-gray-900);
    text-align: left;
    cursor: pointer;
}

    .fhq-account__menu-item:hover {
        background: var(--acres-gray-50);
    }

/* Section nav (RadzenTabs; tab strip and panel styling in radzen-overrides.css) */
.fhq-section-nav {
    box-sizing: border-box;
}