/* ============================================================
   RewardlyHR — Main Stylesheet
   Premium corporate design system
   ============================================================ */

/* ── Custom Properties ────────────────────────────────────── */
:root {
    /* Colors — brand */
    --color-navy:        #0D1B3E;
    --color-navy-light:  #162448;
    --color-navy-dark:   #080F24;
    --color-nav-selected: #122874; /* rgba(26,63,216,.35) blended over --color-navy */
    --color-blue:        #2563EB;
    --color-blue-dark:   #1D4ED8;
    --color-blue-light:  #EFF6FF;

    /* Colors — neutral */
    --color-surface:     #F8FAFC;
    --color-white:       #FFFFFF;
    --color-text:        #334155;
    --color-slate:       #334155;
    --color-muted:       #64748B;
    --color-border:      #E2E8F0;
    --color-border-dark: #CBD5E1;

    /* Colors — semantic (status and alerts only, never decorative) */
    --color-success:        #16A34A;
    --color-success-bg:     #F0FDF4;
    --color-success-border: #BBF7D0;
    --color-warning:        #D97706;
    --color-warning-bg:     #FFF7ED;
    --color-warning-border: #FDE68A;
    --color-error:          #DC2626;
    --color-error-bg:       #FEF2F2;
    --color-error-border:   #FECACA;
    --color-info:           #0284C7;
    --color-info-bg:        #F0F9FF;
    --color-info-border:    #BAE6FD;
    --color-purple:         #7C3AED;
    --color-purple-bg:      #F5F3FF;
    --color-purple-border:  #DDD6FE;
    --color-purple-dark:    #5B21B6;

    /* Colors — extended semantic tones (badge/alert tints) */
    --color-success-dark:   #15803D;
    --color-success-accent: #DCFCE7;
    --color-warning-accent: #FEF3C7;
    --color-warning-dark:   #92400E;
    --color-error-dark:     #991B1B;
    --color-neutral-bg:     #F1F5F9;
    --color-neutral:        #475569;
    --color-blue-100:       #DBEAFE;
    --color-blue-200:       #BFDBFE;
    --color-blue-darker:    #1E40AF;
    --color-table-hover:    #F5F7FF;
    --color-subtle:         #94A3B8;
    --color-error-hover:    #B91C1C;
    --color-error-accent:   #FEE2E2;
    /* Filled count badges (unread, needs action): kept the same in both themes so
       their white numbers stay readable -- dark mode lightens --color-error for text */
    --color-alert-fill:     #DC2626;

    /* Colors — module accent tones (icon tiles, event types) */
    --color-amber-bg:       #FFFBEB;
    --color-indigo:         #4F46E5;
    --color-indigo-dark:    #4338CA;
    --color-indigo-bg:      #EEF2FF;
    --color-indigo-100:     #E0E7FF;
    --color-cyan:           #0891B2;
    --color-cyan-bg:        #ECFEFF;
    --color-teal-text:      #0D9488;
    --color-teal-bg:        #F0FDFA;
    --color-emerald:        #047857;
    --color-emerald-text:   #059669;
    --color-emerald-bg:     #ECFDF5;

    /* Colors — legacy accent (retained for marketing pages only) */
    --color-teal:        #00C9B1;
    --color-teal-dark:   #00A896;
    --color-amber:       #F5A623;
    --color-amber-dark:  #E0941A;

    /* Colors — roles. What each colour is FOR. On tenant pages (dashboard
       layout) Theme::styleTag() overrides these with the tenant's brand
       colours and the viewer's light/dark choice; everywhere else they keep
       RewardlyHR's palette. --color-navy is the brand colour (sidebar,
       headings, brand fills) and --color-blue the action colour (buttons,
       links, focus). Text that sits ON a colour uses its *-fg / on-* token
       so a light tenant colour gets dark text automatically. */
    --color-navy-rgb:           13, 27, 62;
    --color-blue-rgb:           37, 99, 235;
    --color-heading:            var(--color-navy);
    --color-link:               var(--color-blue);
    --color-link-strong:        var(--color-blue-dark);   /* emphasised link / blue text on a blue tint */
    --color-on-navy:            #FFFFFF;
    --color-on-navy-rgb:        255, 255, 255;
    --color-on-blue:            #FFFFFF;
    --color-on-blue-rgb:        255, 255, 255;
    --color-card:               #FFFFFF;
    --color-sidebar-fg-rgb:     255, 255, 255;
    --color-sidebar-accent:     #639FFF;
    --color-sidebar-flyout:     #152740;
    --color-nav-accent-rgb:     26, 63, 216;
    --color-card-header:        #122874;
    --color-card-header-fg:     #FFFFFF;
    --color-card-header-fg-rgb: 255, 255, 255;
    --color-topbar:             var(--color-card);
    --color-topbar-fg:          var(--color-heading);
    --color-topbar-muted:       var(--color-muted);
    --color-topbar-hover:       var(--color-surface);

    /* Colors — chart series (public/js/reports.js), in this order and never
       cycled. Validated as a set for colour-blind separation and contrast on
       the card, light and dark (dark steps below); the status colours above
       are never used as a series. Not themed per organization: an arbitrary
       brand colour could not be checked against the rest. */
    --color-chart-1: #2563EB;
    --color-chart-2: #EB6834;
    --color-chart-3: #1BAF7A;
    --color-chart-4: #EDA100;
    --color-chart-5: #E87BA4;
    --color-chart-6: #008300;
    --color-chart-7: #6250D6;
    --color-chart-8: #E34948;

    /* Typography */
    --font-family:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-base: 14px;
    --line-height:    1.6;

    /* Spacing */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-7:   28px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;
    --space-20:  80px;
    --space-24:  96px;
    --space-32: 128px;

    /* Layout */
    --container-max:    1280px;
    --container-narrow:  800px;
    --section-pad-v:     96px;
    --section-pad-v-sm:  64px;

    /* Border Radius */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm:  0 1px 3px rgba(13, 27, 62, 0.08);
    --shadow-md:  0 4px 16px rgba(13, 27, 62, 0.10);
    --shadow-lg:  0 8px 32px rgba(13, 27, 62, 0.14);
    --shadow-xl:  0 16px 64px rgba(13, 27, 62, 0.18);
    --shadow-blue: 0 8px 32px rgba(37, 99, 235, 0.28);

    /* Transitions */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   400ms ease;

    /* Nav */
    --nav-height: 72px;
}

/* ── Dark mode (tenant/employee app only) ─────────────────────────────────
   The dashboard layout stamps <html data-theme="light|dark"> from the
   viewer's choice (users.theme); "match my device" is resolved before first
   paint by a tiny inline script. Nothing else sets data-theme, so the
   public site, login and staff console are never dark. Only tokens change
   here: brand colours from Theme::styleTag() still apply on top, and a
   tenant's own dark-mode shades (headings, links, top bar) are emitted
   there as a later :root[data-theme="dark"] block. */
:root[data-theme="dark"] {
    color-scheme: dark;

    /* Surfaces and text */
    --color-surface:     #0B1120;
    --color-card:        #121A2B;
    --color-text:        #CBD5E1;
    --color-slate:       #CBD5E1;
    --color-muted:       #94A3B8;
    --color-subtle:      #64748B;
    --color-border:      #243049;
    --color-border-dark: #33415A;
    --color-neutral-bg:  #1A2436;
    --color-neutral:     #CBD5E1;

    /* Roles */
    --color-heading:      #E2E8F0;
    --color-link:         #5182EF;
    --color-link-strong:  #8FB0F6;
    --color-topbar:       var(--color-card);
    --color-topbar-fg:    var(--color-heading);
    --color-topbar-muted: var(--color-muted);
    --color-topbar-hover: var(--color-neutral-bg);

    /* Action-colour tints: washed over the dark card instead of white */
    --color-blue-light:  color-mix(in srgb, var(--color-blue) 16%, var(--color-card));
    --color-blue-100:    color-mix(in srgb, var(--color-blue) 26%, var(--color-card));
    --color-blue-200:    color-mix(in srgb, var(--color-blue) 40%, var(--color-card));
    --color-table-hover: color-mix(in srgb, var(--color-blue) 9%, var(--color-card));
    --color-blue-darker: color-mix(in srgb, var(--color-blue) 45%, #FFFFFF);

    /* Status: text a step lighter; tints washed over the dark card */
    --color-error:          #EF4444;
    --color-info:           #0EA5E9;
    --color-purple:         #8B5CF6;
    --color-success-bg:     color-mix(in srgb, #16A34A 16%, var(--color-card));
    --color-success-border: color-mix(in srgb, #16A34A 40%, var(--color-card));
    --color-success-accent: color-mix(in srgb, #16A34A 26%, var(--color-card));
    --color-success-dark:   #86EFAC;
    --color-warning-bg:     color-mix(in srgb, #D97706 16%, var(--color-card));
    --color-warning-border: color-mix(in srgb, #D97706 40%, var(--color-card));
    --color-warning-accent: color-mix(in srgb, #D97706 26%, var(--color-card));
    --color-warning-dark:   #FCD34D;
    --color-error-bg:       color-mix(in srgb, #DC2626 16%, var(--color-card));
    --color-error-border:   color-mix(in srgb, #DC2626 40%, var(--color-card));
    --color-error-accent:   color-mix(in srgb, #DC2626 26%, var(--color-card));
    --color-error-dark:     #FCA5A5;
    --color-info-bg:        color-mix(in srgb, #0284C7 16%, var(--color-card));
    --color-info-border:    color-mix(in srgb, #0284C7 40%, var(--color-card));
    --color-purple-bg:      color-mix(in srgb, #7C3AED 18%, var(--color-card));
    --color-purple-border:  color-mix(in srgb, #7C3AED 40%, var(--color-card));
    --color-purple-dark:    #C4B5FD;
    --color-amber-bg:       color-mix(in srgb, #F59E0B 14%, var(--color-card));
    --color-indigo-bg:      color-mix(in srgb, #4F46E5 18%, var(--color-card));
    --color-indigo-100:     color-mix(in srgb, #4F46E5 28%, var(--color-card));
    --color-indigo-dark:    #A5B4FC;
    --color-cyan-bg:        color-mix(in srgb, #0891B2 16%, var(--color-card));
    --color-teal-bg:        color-mix(in srgb, #0D9488 16%, var(--color-card));
    --color-teal-text:      #5EEAD4;
    --color-emerald-bg:     color-mix(in srgb, #059669 16%, var(--color-card));
    --color-emerald:        #6EE7B7;
    --color-emerald-text:   #34D399;

    /* Chart series: the same hues, stepped for the dark card */
    --color-chart-1: #3987E5;
    --color-chart-2: #D95926;
    --color-chart-3: #199E70;
    --color-chart-4: #C98500;
    --color-chart-5: #D55181;
    --color-chart-6: #008300;
    --color-chart-7: #9085E9;
    --color-chart-8: #E66767;

    /* Shadows read as depth, not grey haze, on a dark ground */
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl:  0 16px 64px rgba(0, 0, 0, 0.55);
}
:root[data-theme="dark"] body { background-color: var(--color-surface); color: var(--color-text); }

/* Flatpickr date picker (loaded from its CDN in a light theme): the chosen
   day uses the action colour, and in dark mode the calendar goes dark. */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus { background: var(--color-blue); border-color: var(--color-blue); color: var(--color-on-blue); }
:root[data-theme="dark"] .flatpickr-calendar {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}
:root[data-theme="dark"] .flatpickr-calendar.arrowTop::after    { border-bottom-color: var(--color-card); }
:root[data-theme="dark"] .flatpickr-calendar.arrowBottom::after { border-top-color: var(--color-card); }
:root[data-theme="dark"] .flatpickr-months .flatpickr-month,
:root[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
:root[data-theme="dark"] .flatpickr-current-month input.cur-year,
:root[data-theme="dark"] .flatpickr-weekday,
:root[data-theme="dark"] .flatpickr-time input,
:root[data-theme="dark"] .flatpickr-time .flatpickr-am-pm,
:root[data-theme="dark"] .flatpickr-time .flatpickr-time-separator { color: var(--color-heading); fill: var(--color-heading); background: transparent; }
:root[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months option { background: var(--color-card); }
:root[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
:root[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg { fill: var(--color-muted); }
:root[data-theme="dark"] .flatpickr-day { color: var(--color-text); }
:root[data-theme="dark"] .flatpickr-day:hover,
:root[data-theme="dark"] .flatpickr-day:focus { background: var(--color-neutral-bg); border-color: var(--color-neutral-bg); }
:root[data-theme="dark"] .flatpickr-day.prevMonthDay,
:root[data-theme="dark"] .flatpickr-day.nextMonthDay,
:root[data-theme="dark"] .flatpickr-day.flatpickr-disabled { color: var(--color-subtle); }
:root[data-theme="dark"] .flatpickr-day.today { border-color: var(--color-link); }
:root[data-theme="dark"] .flatpickr-time { border-top-color: var(--color-border); }
:root[data-theme="dark"] .flatpickr-time input:hover,
:root[data-theme="dark"] .flatpickr-time input:focus { background: var(--color-neutral-bg); }

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-size-base);
    /* Native checkboxes, radios, range sliders and progress bars take the
       action colour (a tenant's Buttons & Links colour) instead of the
       browser's own blue. Inherited, so it reaches every control. */
    accent-color: var(--color-blue);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 400;
    line-height: var(--line-height);
    color: var(--color-slate);
    background-color: var(--color-card);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

img, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-link-strong);
}

a:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

ul, ol {
    list-style: none;
}

button {
    font-family: var(--font-family);
    cursor: pointer;
    border: none;
    background: none;
}

input, select, textarea {
    font-family: var(--font-family);
    font-size: 1rem;
}

/* ── Typography Scale ─────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-heading);
    letter-spacing: -0.02em;
    /* A heading that wraps splits into even lines instead of leaving its
       last word on a line of its own */
    text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; letter-spacing: 0.02em; text-transform: uppercase; }

p { margin-bottom: 0; }
p + p { margin-top: var(--space-4); }

.lead {
    font-size: 1.125rem;
    color: var(--color-muted);
    line-height: 1.7;
}

.lead-lg {
    font-size: 1.25rem;
    color: var(--color-muted);
    line-height: 1.7;
}

.text-white h1, .text-white h2, .text-white h3,
.text-white h4, .text-white h5, .text-white h6 {
    color: var(--color-white);
}

.text-white p, .text-white .lead, .text-white .lead-lg {
    color: rgba(255, 255, 255, 0.75);
}

/* ── Back link — global navigation pattern ───────────────── */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-muted);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    transition: color 0.12s;
}
.back-link:hover { color: var(--color-text); text-decoration: none; }
.back-link svg   { flex-shrink: 0; }

/* ── Utility Classes ──────────────────────────────────────── */
.text-center   { text-align: center; }
.text-left     { text-align: left; }
.text-right    { text-align: right; }
.text-muted    { color: var(--color-muted); }
.text-navy     { color: var(--color-heading); }
.text-blue     { color: var(--color-link); }
.text-teal     { color: var(--color-teal); }
.text-white    { color: var(--color-white); }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-extrabold { font-weight: 800; }

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

.eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-link);
    margin-bottom: var(--space-4);
}

.eyebrow--teal { color: var(--color-teal); }
.eyebrow--amber { color: var(--color-amber); }
.eyebrow--white { color: rgba(255,255,255,0.7); }

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
}

.badge--blue   { background: var(--color-blue-light); color: var(--color-link); }
.badge--teal   { background: rgba(0, 201, 177, 0.12); color: var(--color-teal-dark); }
.badge--amber  { background: rgba(245, 166, 35, 0.12); color: var(--color-amber-dark); }
.badge--navy   { background: rgba(var(--color-navy-rgb), 0.08); color: var(--color-heading); }
.badge--ai     { background: linear-gradient(135deg, rgba(0,201,177,0.15), rgba(var(--color-blue-rgb), 0.15)); color: var(--color-link); border: 1px solid rgba(var(--color-blue-rgb), 0.2); }
.badge--popular { background: var(--color-amber); color: var(--color-heading); font-weight: 700; }

/* ── Layout ───────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.container--wide {
    max-width: 1440px;
}

section {
    position: relative;
}

.section-pad {
    padding-top: var(--section-pad-v);
    padding-bottom: var(--section-pad-v);
}

/* Anchor-linked sections (footer/nav links, #hash navigation) land flush
   under the sticky site-header without this — the header covers the first
   line of whatever heading was jumped to. services.php stacks a second
   sticky anchor-nav bar under the header, so its sections need more
   clearance than a plain page. */
.section-pad[id],
.solutions-role__block[id],
.industry-card[id] {
    scroll-margin-top: calc(var(--nav-height) + 20px);
}

/* scroll-margin-top positions this element's own top BORDER under the
   sticky bars — it can't know the element then has --section-pad-v (96px)
   of its own empty top padding before any visible content. Without the
   correction, that padding stacks on top of the clearance and leaves a
   large dead gap between the sticky anchor-nav and the heading whenever a
   #hash link lands here. Subtracting --section-pad-v lets that padding
   tuck under the sticky bars (it's blank space, so nothing is hidden). */
.services-section[id] {
    scroll-margin-top: calc(var(--nav-height) + 61px + 20px - var(--section-pad-v));
}

.section-pad-sm {
    padding-top: var(--section-pad-v-sm);
    padding-bottom: var(--section-pad-v-sm);
}

/* Stacked .section-pad sections (module-detail.php, pricing.php, etc.) have
   no visual boundary between them otherwise -- same dead-gap problem
   .services-section + .services-section already solves below; mirrored
   here so every consecutive-section-pad page gets the same divider. */
.section-pad + .section-pad,
.section-pad + .section-pad-sm,
.section-pad-sm + .section-pad {
    border-top: 1px solid var(--color-border);
}

/* Background variants */
.bg-white      { background-color: var(--color-card); }
.bg-surface    { background-color: var(--color-surface); }
.bg-navy       { background-color: var(--color-navy); }
.bg-blue-light { background-color: var(--color-blue-light); }
.bg-blue       { background-color: var(--color-blue); }

/* Section header */
.section-header {
    margin-bottom: var(--space-16);
}

.section-header--center {
    text-align: center;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-16);
}

/* A section that is nothing but its header (security.php's disclosure
   note) ends at the header, not 64px of empty space below it */
.section-header:last-child,
.section-header--center:last-child {
    margin-bottom: 0;
}

.section-header h2 {
    margin-bottom: var(--space-4);
}

.section-header p {
    color: var(--color-muted);
    font-size: 1.0625rem;
}

/* Grid utilities */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

/* Flex utilities */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap    { flex-wrap: wrap; }
.gap-4        { gap: var(--space-4); }
.gap-6        { gap: var(--space-6); }
.gap-8        { gap: var(--space-8); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    font-family: var(--font-family);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    padding: 9px 18px;
    border-radius: var(--radius-md);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}
/* A disabled button must look disabled (same rule as the staff console's
   admin.css): it used to look exactly like a clickable one. */
.btn:disabled,
.btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.btn-primary {
    background-color: var(--color-blue);
    color: var(--color-on-blue);
    border-color: var(--color-blue);
}
.btn-primary:hover {
    background-color: var(--color-blue-dark);
    border-color: var(--color-blue-dark);
    color: var(--color-on-blue);
}

.btn-secondary {
    background-color: var(--color-navy);
    color: var(--color-on-navy);
    border-color: var(--color-navy);
}
.btn-secondary:hover {
    background-color: var(--color-navy-light);
    border-color: var(--color-navy-light);
    color: var(--color-on-navy);
}

.btn-ghost {
    background-color: transparent;
    color: var(--color-slate);
    border-color: transparent;
}
.btn-ghost:hover {
    background-color: var(--color-blue-light);
    color: var(--color-link);
}

.btn-ghost-white {
    background-color: transparent;
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.3);
}
.btn-ghost-white:hover {
    background-color: rgba(255,255,255,0.1);
    color: var(--color-white);
    border-color: rgba(255,255,255,0.5);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-link);
    border-color: var(--color-blue);
}
.btn-outline:hover {
    background-color: var(--color-blue);
    color: var(--color-on-blue);
}
.btn-outline--active {
    background-color: var(--color-blue);
    color: var(--color-on-blue);
    border-color: var(--color-blue);
}

.btn-outline-white {
    background-color: transparent;
    color: var(--color-white);
    border-color: rgba(255,255,255,0.5);
}
.btn-outline-white:hover {
    background-color: rgba(255,255,255,0.12);
    border-color: var(--color-card);
    color: var(--color-white);
}

.btn-danger {
    background-color: var(--color-error);
    border-color: var(--color-error);
    color: var(--color-white);
}
.btn-danger:hover {
    background-color: var(--color-error-hover);
    border-color: var(--color-error-hover);
    color: var(--color-white);
}

/* Positive action (Resolve, Approve, Completed) — used by several views but
   never defined until 2026-09-29, so those buttons rendered unstyled. */
.btn-success {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-white);
}
.btn-success:hover {
    background-color: color-mix(in srgb, var(--color-success) 85%, #000000);
    border-color: color-mix(in srgb, var(--color-success) 85%, #000000);
    color: var(--color-white);
}

/* Sizes */
.btn-sm {
    font-size: 0.8125rem;
    padding: 5px 12px;
}

.btn-xs {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 6px;
    border-width: 1px;
}

.btn-lg {
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 12px 26px;
}

.btn-xl {
    font-size: 1rem;
    font-weight: 600;
    padding: 14px 32px;
    border-radius: 10px;
}

.btn-block {
    width: 100%;
}

/* CTA group */
.cta-group {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.cta-group--center { justify-content: center; }




/* ── Form Elements ────────────────────────────────────────── */
.form-group {
    margin-bottom: var(--space-5);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-heading);
    margin-bottom: var(--space-2);
}

.form-label .required {
    color: var(--color-error);
    margin-left: 2px;
}
.form-label--sm { font-size: 0.75rem; }

.text-error { color: var(--color-error); }

.form-control {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-size: 0.9375rem;
    font-family: var(--font-family);
    color: var(--color-slate);
    background-color: var(--color-card);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    appearance: none;
    -webkit-appearance: none;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(26, 63, 216, 0.12);
}

.form-control::placeholder {
    color: var(--color-muted);
}

.form-control:disabled {
    background-color: var(--color-surface);
    color: var(--color-muted);
    border-color: var(--color-border);
    cursor: not-allowed;
    opacity: 1;
}

select.form-control:disabled {
    background-image: none;
    cursor: not-allowed;
}

/* Password show/hide toggle -- wraps a single password .form-control.
   Shared by every password field in the app (login, reset-password,
   change-password, accept-invitation, profile security); see
   initPasswordToggles() in main.js for the click behavior. */
.password-field {
    position: relative;
}

.password-field .form-control {
    padding-right: 44px;
}

.password-field__toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.password-field__toggle:hover {
    color: var(--color-slate);
    background-color: var(--color-surface);
}

.password-field__toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The browser's default `[hidden] { display: none }` UA-stylesheet rule
   doesn't reliably apply inside the SVG namespace (confirmed live: both
   icons rendered side by side on load, each keeping its own layout box,
   until JS explicitly touched .hidden on click) -- state it explicitly
   rather than relying on that. */
.password-field__toggle svg[hidden] {
    display: none;
}

.form-group:has(.form-control:disabled) .form-label {
    color: var(--color-muted);
}

/* Read-only informational value shown in a form slot: reads as text, not as
   an editable field. Sits in the same grid position with a normal .form-label
   above it. Not focusable and not submitted -- add a hidden input alongside if
   the value must post. */
.form-control--static,
.form-control--static:focus {
    border-color: transparent;
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
    color: var(--color-slate);
    cursor: default;
    box-shadow: none;
    min-height: 0;
}

.form-readonly-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    background: var(--color-surface);
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    margin-left: var(--space-2);
    vertical-align: middle;
    text-transform: uppercase;
}

.form-control.is-error,
.form-control.is-invalid {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.field-error {
    display: block;
    margin-top: 4px;
    font-size: 0.8125rem;
    color: var(--color-error);
}

.form-control.is-success {
    border-color: var(--color-success);
}

textarea.form-control {
    resize: none;
    min-height: 120px;
}

select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236B7C99' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

.form-control--sm {
    padding: 5px 10px;
    font-size: 0.8125rem;
    border-radius: var(--radius-sm);
}
select.form-control--sm {
    padding-right: 32px;
    background-position: right 8px center;
}

/* A multi-select is a listbox, not a dropdown -- no chevron. */
select.form-control[multiple] {
    background-image: none;
    padding-right: 12px;
}

.form-hint {
    font-size: 0.8125rem;
    color: var(--color-muted);
    margin-top: var(--space-1);
}

.form-error {
    font-size: 0.8125rem;
    color: var(--color-error);
    margin-top: var(--space-1);
    display: flex;
    align-items: center;
    gap: 4px;
}
.form-error[hidden] { display: none !important; }

.form-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.form-success {
    font-size: 0.8125rem;
    color: var(--color-success);
    margin-top: var(--space-1);
}

/* Checkbox & Radio */
.form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 1.5px solid var(--color-border-dark);
    border-radius: var(--radius-sm);
    background: var(--color-card);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
    margin-top: 1px;
}

.form-check input[type="checkbox"]:checked {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* A radio in .form-check: round, and filled when chosen (appearance:none
   above removes the browser's own dot, and nothing drew one back) */
.form-check input[type="radio"] { border-radius: 50%; }
.form-check input[type="radio"]:checked {
    border-color: var(--color-blue);
    background: radial-gradient(circle, var(--color-blue) 0 4px, var(--color-card) 4.5px);
}
.form-check input[type="checkbox"]:focus-visible,
.form-check input[type="radio"]:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}

.form-check label {
    font-size: 0.9rem;
    color: var(--color-slate);
    cursor: pointer;
    line-height: 1.5;
}

.form-check label a {
    color: var(--color-link);
}

.form-check-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    color: var(--color-slate);
    cursor: pointer;
    white-space: nowrap;
}
.form-check-inline input[type="checkbox"] {
    width: 15px;
    height: 15px;
    min-width: 15px;
    border: 1.5px solid var(--color-border-dark);
    border-radius: 3px;
    background: var(--color-card);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.form-check-inline input[type="checkbox"]:checked {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 5l2.5 2.5 4-4' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Checkbox group (for multiple checkboxes) */
.checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-2);
}

/* Form alerts */
.alert {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    margin-bottom: var(--space-6);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.alert--success {
    background-color: var(--color-success-accent);
    color: var(--color-success-dark);
    border: 1px solid var(--color-success-border);
}

.alert--error {
    background-color: var(--color-error-bg);
    color: var(--color-error-dark);
    border: 1px solid var(--color-error-border);
}

.alert--warning {
    background-color: var(--color-warning-accent);
    color: var(--color-warning-dark);
    border: 1px solid var(--color-warning-border);
}

.alert--info {
    background-color: var(--color-info-bg);
    color: var(--color-heading);
    border: 1px solid var(--color-info-border);
}

.alert__icon { font-size: 1.1rem; margin-top: 1px; }
.alert ul { margin: var(--space-1) 0 0; padding-left: 1.25rem; }
.alert[hidden] { display: none; }

.alert__close {
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0 0 0 var(--space-3);
    color: inherit;
    opacity: 0.55;
    transition: opacity var(--transition-fast);
}
.alert__close:hover { opacity: 1; }

/* Honeypot */
.hp-field {
    position: absolute;
    left: -9999px;
    visibility: hidden;
    opacity: 0;
    height: 0;
}

/* ── Image Placeholders ───────────────────────────────────── */
.img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-navy-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
}

.img-placeholder span {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    user-select: none;
}

/* Real product screenshots dropped into an .img-placeholder box — same
   rounded 4:3 frame, cropped from the top so the app header/nav stays in
   frame rather than empty space further down the page. */
.img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Hero placeholder — 16:9 */
.img-placeholder--hero {
    aspect-ratio: 16 / 9;
}

/* Browser-mockup style */
.img-placeholder--browser {
    aspect-ratio: 4 / 3;
    background-color: var(--color-navy);
}

.img-placeholder--browser::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 36px;
    background-color: rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Feature placeholder — 4:3 */
.img-placeholder--feature {
    aspect-ratio: 4 / 3;
}

/* Card placeholder — 3:2 */
.img-placeholder--card {
    aspect-ratio: 3 / 2;
}

/* Square */
.img-placeholder--square {
    aspect-ratio: 1 / 1;
}

/* Logo placeholder */
.img-placeholder--logo {
    aspect-ratio: 3 / 1;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.img-placeholder--logo span { color: var(--color-border-dark); }

/* ── Announcement Bar ─────────────────────────────────────── */
.announcement-bar {
    background: linear-gradient(90deg, var(--color-navy) 0%, var(--color-blue-dark) 100%);
    color: rgba(var(--color-on-blue-rgb), 0.9);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 10px var(--space-6);
    text-align: center;
    position: relative;
    z-index: 100;
}

.announcement-bar a {
    color: var(--color-teal);
    font-weight: 600;
    margin-left: var(--space-2);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.announcement-bar a:hover {
    color: var(--color-white);
}

.announcement-bar__close {
    position: absolute;
    right: var(--space-5);
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.6);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
}

.announcement-bar__close:hover { color: var(--color-white); }

/* ── Navigation ───────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--color-card);
    border-bottom: 1px solid var(--color-border);
    transition: box-shadow var(--transition-normal);
}

.site-header.scrolled {
    box-shadow: var(--shadow-md);
}

.nav-container {
    display: flex;
    align-items: center;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-6);
    height: var(--nav-height);
    gap: var(--space-8);
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    --brand-logo-h: 44px;
}

/* ── Brand logo ───────────────────────────────────────────────
   The logo is ONE image (public/images/brand/logo.png) drawn by
   partials/brand-logo.php -- see app/helpers/Brand.php. Replace that
   file and every header, footer and sign-in page changes with it.
   Height is set per surface with --brand-logo-h; the width follows the
   file's own proportions, so a differently shaped logo just works. */
.brand-logo {
    position: relative;
    display: inline-block;
    line-height: 0;
    flex-shrink: 0;
}

.brand-logo__img {
    display: block;
    height: var(--brand-logo-h, 32px);
    width: auto;
    max-width: none;
}

/* Hover/focus: a second copy with the lettering in brand blue fades in over the first. */
.brand-logo__img--hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity var(--transition-fast, 0.15s ease);
}

a:hover > .brand-logo > .brand-logo__img--hover,
a:focus-visible > .brand-logo > .brand-logo__img--hover {
    opacity: 1;
}

.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    flex: 1;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-slate);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: color var(--transition-fast), background-color var(--transition-fast);
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--font-family);
    white-space: nowrap;
}

.nav-link:hover,
.nav-link--active {
    color: var(--color-link);
    background-color: var(--color-blue-light);
}

.nav-dropdown-arrow {
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

/* Open state is owned by JS (.is-open, see initDesktopDropdowns in main.js:
   hover-intent on a mouse, click/keyboard toggle elsewhere) and is the ONLY
   thing that shows a menu. It used to be :hover OR .is-open, two independent
   states, so a menu opened by click stayed open while hovering a second one. */
.nav-item--dropdown.is-open .nav-dropdown-arrow {
    transform: rotate(180deg);
}
.nav-item--dropdown.is-open > .nav-dropdown-toggle {
    color: var(--color-link);
    background-color: var(--color-blue-light);
}

/* Dropdown */
.nav-dropdown {
    position: absolute;
    /* Flush against the toggle (no top gap) -- the visible 8px breathing
       room is this box's own padding-top, so the cursor never crosses a dead
       zone on its way from the toggle to the menu. */
    top: 100%;
    left: 0;
    min-width: 300px;
    padding-top: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    /* Closing is fast and un-delayed so two menus are never on screen at
       once while moving between items; visibility flips after the fade. */
    transition: opacity 100ms ease, transform 100ms ease, visibility 0s linear 100ms;
    z-index: 200;
    pointer-events: none;
}

.nav-item--dropdown.is-open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: opacity 150ms ease, transform 150ms ease, visibility 0s;
    z-index: 201;
}

/* Long lists (Product) flow into two columns instead of one tall strip. */
.nav-dropdown--cols {
    width: 580px;
}
.nav-dropdown--cols .nav-dropdown__group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.nav-dropdown--cols .nav-dropdown__label {
    grid-column: 1 / -1;
}

.nav-dropdown__inner {
    padding: var(--space-2);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.nav-dropdown__group {
    padding: var(--space-1);
}

.nav-dropdown__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted);
    padding: 6px 12px 8px;
}

.nav-dropdown__link {
    display: block;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-slate);
    transition: background-color var(--transition-fast);
}

.nav-dropdown__link:hover,
.nav-dropdown__link:focus-visible {
    background-color: var(--color-surface);
}

.nav-dropdown__link strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-heading);
    line-height: 1.3;
    transition: color var(--transition-fast);
}

.nav-dropdown__link:hover strong,
.nav-dropdown__link:focus-visible strong {
    color: var(--color-link);
}

.nav-dropdown__link strong + span {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-muted);
    line-height: 1.4;
    margin-top: 2px;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

/* Hamburger */
.nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    cursor: pointer;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
    margin-left: auto;
}

.nav-hamburger:hover { background-color: var(--color-blue-light); }

.nav-hamburger__bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--color-navy);
    border-radius: 2px;
    transition: transform var(--transition-normal), opacity var(--transition-fast);
}

.nav-hamburger.is-open .nav-hamburger__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.is-open .nav-hamburger__bar:nth-child(2) {
    opacity: 0;
}
.nav-hamburger.is-open .nav-hamburger__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-card);
    z-index: 999;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transition-slow);
}

.mobile-menu.is-open {
    transform: translateX(0);
}

.mobile-menu__inner {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    top: var(--nav-height);
    background: rgba(13, 27, 62, 0.5);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.mobile-menu-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-heading);
    text-decoration: none;
    border-radius: var(--radius-md);
    background: none;
    border: none;
    font-family: var(--font-family);
    width: 100%;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.mobile-nav-link:hover,
.mobile-nav-link--active {
    background-color: var(--color-blue-light);
    color: var(--color-link);
}

.mobile-nav-submenu {
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--transition-slow);
    padding-left: var(--space-4);
}

.mobile-nav-submenu.is-open {
    max-height: 400px;
}

.mobile-nav-sublink {
    display: block;
    padding: 10px 16px;
    font-size: 0.9375rem;
    color: var(--color-slate);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.mobile-nav-sublink:hover {
    background-color: var(--color-blue-light);
    color: var(--color-link);
}

.mobile-nav-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

/* ── Hero (Homepage) ──────────────────────────────────────── */
.hero {
    background-color: var(--color-navy);
    background-image:
        radial-gradient(ellipse 80% 60% at 70% 50%, rgba(var(--color-blue-rgb), 0.25) 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 20% 80%, rgba(0, 201, 177, 0.1) 0%, transparent 60%);
    padding: var(--space-24) 0;
    overflow: hidden;
}

.hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
}

.hero__content { position: relative; z-index: 2; }

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 14px;
    background: rgba(var(--color-blue-rgb), 0.2);
    border: 1px solid rgba(var(--color-blue-rgb), 0.35);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-teal);
    letter-spacing: 0.04em;
    margin-bottom: var(--space-6);
}

.hero h1 {
    color: var(--color-white);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-6);
}

.hero h1 .accent {
    background: linear-gradient(135deg, var(--color-teal), var(--color-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero__sub {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: var(--space-5);
}

.hero__body {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
    margin-bottom: var(--space-8);
}

.hero__ctas {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
}

.hero__trust {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.hero__trust-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}

.hero__visual {
    position: relative;
    z-index: 2;
}

.hero__photo-frame {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255,255,255,0.08);
    aspect-ratio: 4 / 3;
}

.hero__photo-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.08) 0%, transparent 60%);
    pointer-events: none;
}

.hero__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Page Hero (Inner Pages) ──────────────────────────────── */
.page-hero {
    background-color: var(--color-navy);
    background-image:
        radial-gradient(ellipse 60% 80% at 80% 50%, rgba(var(--color-blue-rgb), 0.2) 0%, transparent 70%),
        radial-gradient(ellipse 30% 50% at 10% 90%, rgba(0, 201, 177, 0.08) 0%, transparent 60%);
    padding: var(--space-20) 0;
    text-align: center;
}

.page-hero h1 {
    color: var(--color-white);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: var(--space-5);
}

.page-hero p {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 600px;
    margin: 0 auto;
    text-wrap: pretty;
}

.page-hero__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-teal);
    margin-bottom: var(--space-4);
    display: block;
}

.page-hero__ctas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-8);
    flex-wrap: wrap;
}

/* Anchor Nav Pill Bar */
.anchor-nav {
    background: var(--color-card);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: var(--nav-height);
    z-index: 90;
}

.anchor-nav__inner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    max-width: var(--container-max);
    margin: 0 auto;
    overflow-x: auto;
    scrollbar-width: none;
}

.anchor-nav__inner::-webkit-scrollbar { display: none; }

.anchor-nav__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 7px 16px;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-slate);
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    border: 1.5px solid transparent;
}

.anchor-nav__pill:hover {
    background-color: var(--color-blue-light);
    color: var(--color-link);
}

.anchor-nav__pill.is-active {
    background-color: var(--color-blue);
    color: var(--color-on-blue);
}

/* ── Logo Row ─────────────────────────────────────────────── */
.logo-row {
    padding: var(--space-12) 0;
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.logo-row__eyebrow {
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--space-8);
}

.logo-row__grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.logo-row__item {
    width: 140px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-border-dark);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.75;
    transition: opacity var(--transition-fast);
}

.logo-row__item:hover { opacity: 1; }

/* ── Stats Bar ────────────────────────────────────────────── */
.stats-bar {
    background-color: var(--color-navy);
    padding: var(--space-12) 0;
}

.stats-bar__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
}

.stat-item {
    text-align: center;
}

.stat-item__value {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--color-white);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-2);
}

.stat-item__value span {
    color: var(--color-teal);
}

.stat-item__label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    line-height: 1.4;
}

/* ── Feature Cards (Value Props) ──────────────────────────── */
.feature-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

/* For a grid with only 2 real cards (e.g. services.php's Social Feed +
   Referrals pair) -- caps width and centers instead of leaving an empty
   third column of whitespace. Reset to full-width below at the breakpoints
   where the base rule already collapses to 2/1 columns. */
.feature-cards-grid--2up {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* Two columns, for a grid of 2 or 4 cards: one or two full rows instead
   of a row of three with a gap, or with the fourth card left on its own.
   Tablet already lays these grids out two across and phone one, so this
   only changes desktop. */
.feature-cards-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

.feature-card {
    background: var(--color-card);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal), border-color var(--transition-normal);
}

.feature-card:hover {
    border-color: rgba(var(--color-blue-rgb), 0.2);
}

.feature-card__image {
    margin: calc(var(--space-8) * -1) calc(var(--space-8) * -1) var(--space-5);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.feature-card__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    background: var(--color-blue-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: var(--space-5);
}

.feature-card__icon--teal { background: rgba(0, 201, 177, 0.1); }
.feature-card__icon--amber { background: rgba(245, 166, 35, 0.1); }
.feature-card__icon--navy { background: rgba(var(--color-navy-rgb), 0.06); }

.feature-card h3 {
    font-size: 1.0625rem;
    margin-bottom: var(--space-3);
    color: var(--color-heading);
}

.feature-card p {
    font-size: 0.9375rem;
    color: var(--color-muted);
    line-height: 1.6;
}

/* ── Module Cards ─────────────────────────────────────────── */
.module-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.module-card {
    background: var(--color-card);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal), border-color var(--transition-normal);
    position: relative;
    text-decoration: none;
    display: block;
    color: inherit;
}

.module-card:hover {
    border-color: rgba(var(--color-blue-rgb), 0.25);
    color: inherit;
}

.module-card__icon {
    display: block;
    margin-bottom: var(--space-4);
    color: var(--color-link);
}
/* This class is shared with pricing.php, which still renders a real
   line-icon <svg> here -- keep that rule so pricing.php is unaffected
   by services.php's switch to photo thumbnails below. */
.module-card__icon svg { display: block; }
.module-card__icon img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.module-card__name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: var(--space-2);
    line-height: 1.3;
}

.module-card__desc {
    font-size: 0.8125rem;
    color: var(--color-muted);
    line-height: 1.5;
    margin-bottom: var(--space-3);
}

.module-card__badge {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
}

.module-card__link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-link);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--space-3);
}

/* Recognition Suite — grouped by real platform module rather than a flat
   card grid, so the module icon appears once per group (representing the
   module) instead of repeated on every card regardless of whether the
   cards share one module or are separate modules. */
.module-groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.module-groups-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.module-group {
    background: var(--color-card);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.module-group__header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.module-group__icon {
    flex-shrink: 0;
    color: var(--color-link);
}
/* Shared with home.php, which still renders a real line-icon <svg>
   here -- keep that rule so home.php is unaffected by services.php's
   switch to a photo thumbnail below. */
.module-group__icon svg { display: block; }
.module-group__icon img {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.module-group__name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: var(--space-1);
}

.module-group__desc {
    font-size: 0.875rem;
    color: var(--color-muted);
    line-height: 1.5;
}

.module-group__subgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

/* services.php's Recognition card has no .module-group__header above this
   (that heading was redundant with the section's own H2 right above the
   card -- removed rather than just visually hidden) -- the separator
   margin/padding/border above exists only to divide the subgrid from a
   header that's no longer there, so drop it here. home.php's own
   .module-group--wide still has its header and needs the base rule
   untouched. */
.module-group__subgrid--no-header {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.module-subcard {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.module-subcard__name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: var(--space-2);
}

.module-subcard__desc {
    font-size: 0.8125rem;
    color: var(--color-muted);
    line-height: 1.5;
    margin-bottom: var(--space-2);
}

.module-group--soon {
    background: var(--color-surface);
    border-style: dashed;
}

/* ── Feature Split ────────────────────────────────────────── */
.feature-split {
    padding: var(--section-pad-v) 0;
}

.feature-split__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
}

.feature-split__inner--reverse {
    direction: rtl;
}

.feature-split__inner--reverse > * {
    direction: ltr;
}

.feature-split__content {}

.feature-split__content h2,
.feature-split__content h3 {
    margin-bottom: var(--space-5);
}

.feature-split__content p {
    font-size: 1.0625rem;
    color: var(--color-muted);
    line-height: 1.7;
    margin-bottom: var(--space-8);
}

.feature-split__list {
    margin-bottom: var(--space-8);
}

.feature-split__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    font-size: 0.9375rem;
    color: var(--color-slate);
    border-bottom: 1px solid var(--color-border);
}

.feature-split__list li:last-child { border-bottom: none; }

.feature-split__check {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    background-color: rgba(0, 201, 177, 0.1);
    color: var(--color-teal-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 1px;
}

.feature-split__visual {}

/* ── Testimonials ─────────────────────────────────────────── */
.testimonials-section {
    background-color: var(--color-navy);
    padding: var(--section-pad-v) 0;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    transition: background-color var(--transition-normal);
}


.testimonial-card__stars {
    display: flex;
    gap: 3px;
    margin-bottom: var(--space-5);
}

.testimonial-card__stars span {
    color: var(--color-amber);
    font-size: 1rem;
}

.testimonial-card__quote {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    margin-bottom: var(--space-6);
    font-style: italic;
}

.testimonial-card__quote::before { content: '\201C'; }
.testimonial-card__quote::after  { content: '\201D'; }

.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.testimonial-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(var(--color-blue-rgb), 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    flex-shrink: 0;
}

.testimonial-card__name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-white);
}

.testimonial-card__role {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
}

/* ── Testimonial Card — Navy variant (solid dark bg, works on light sections) */
.testimonial-card--navy,
.demo-aside-testimonials .testimonial-card {
    background: var(--color-navy);
    border-color: rgba(var(--color-on-navy-rgb), 0.08);
}


/* Wrapper that forces navy context for sidebar testimonials */
.demo-aside-testimonials {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

/* ── Integration Grid ─────────────────────────────────────── */
.integrations-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-4);
}

.integration-tile {
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--color-card);
    border: 1.5px solid var(--color-border);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-muted);
    text-align: center;
    padding: var(--space-4);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.integration-tile:hover {
    border-color: rgba(var(--color-blue-rgb), 0.2);
}

/* ── Security Trust Bar ───────────────────────────────────── */
.trust-bar {
    padding: var(--space-8) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.trust-bar--dark {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.08);
}

.trust-bar__grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-12);
    flex-wrap: wrap;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-heading);
}

.trust-item__icon {
    display: flex;
    color: var(--color-link);
}

/* ── FAQ Accordion ────────────────────────────────────────── */
.faq-section {
    padding: var(--section-pad-v) 0;
}

.faq-list {
    max-width: 760px;
    margin: 0 auto;
}

.faq-item {
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.faq-item.is-open {
    border-color: rgba(var(--color-blue-rgb), 0.25);
    box-shadow: var(--shadow-sm);
}

/* faq.php -- one group per category inside a single section, so the page
   doesn't stack a full 96px .faq-section padding between every category. The
   scroll-margin clears the sticky nav + the sticky category pills. */
.faq-group[id] {
    scroll-margin-top: calc(var(--nav-height) + 61px + 20px);
}
.faq-group + .faq-group {
    margin-top: var(--space-12);
}
.faq-group__heading {
    max-width: 760px;
    margin: 0 auto var(--space-5);
    font-size: 1.25rem;
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-heading);
    cursor: pointer;
    background: var(--color-card);
    border: none;
    width: 100%;
    text-align: left;
    gap: var(--space-4);
    font-family: var(--font-family);
    transition: background-color var(--transition-fast);
}

.faq-question:hover { background-color: var(--color-surface); }

.faq-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-blue-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color var(--transition-fast), transform var(--transition-normal);
}

.faq-icon svg { transition: transform var(--transition-normal); }

.faq-item.is-open .faq-icon {
    background: var(--color-blue);
}

.faq-item.is-open .faq-icon svg {
    transform: rotate(45deg);
}

.faq-item.is-open .faq-icon svg path { stroke: white; }

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow);
}

.faq-answer.is-open {
    max-height: 500px;
}

.faq-answer__inner {
    padding: 0 var(--space-6) var(--space-5);
    font-size: 0.9375rem;
    color: var(--color-muted);
    line-height: 1.7;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-4);
}

/* ── CTA Bar ──────────────────────────────────────────────── */
.cta-bar {
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-blue-dark) 50%, var(--color-navy) 100%);
    padding: var(--space-20) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 50% 80% at 80% 50%, rgba(0, 201, 177, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 20% 50%, rgba(var(--color-blue-rgb), 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.cta-bar__inner {
    position: relative;
    z-index: 1;
}

.cta-bar h2 {
    color: var(--color-white);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    margin-bottom: var(--space-4);
}

.cta-bar p {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-8);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.cta-bar .cta-group {
    justify-content: center;
}

/* ── Pricing Cards ────────────────────────────────────────── */
.pricing-section {
    padding: var(--section-pad-v) 0;
    background: var(--color-surface);
}

/* Contract-term toggle (1/2/3-year) */
.term-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
}

.term-toggle__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--color-border);
    background: var(--color-card);
    color: var(--color-slate);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.term-toggle__pill:hover { border-color: var(--color-blue); }

.term-toggle__pill--active {
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: var(--color-on-blue);
}

.term-toggle__save {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-teal-dark);
    background: rgba(0, 201, 177, 0.12);
    padding: 2px 7px;
    border-radius: var(--radius-full);
}

.term-toggle__pill--active .term-toggle__save {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.22);
}

/* Per-module pricing grid */
.pricing-module-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.module-card--pricing {
    display: flex;
    flex-direction: column;
}

.module-card__features {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--color-slate);
}

.module-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.module-card__check {
    color: var(--color-teal-dark);
    font-weight: 700;
    flex-shrink: 0;
}

.module-card__price-row {
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.module-card__price-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 2px;
}

.module-card__price {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-heading);
}

.module-card__price-unit {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-muted);
}

.module-card__price-flat {
    font-size: 0.6875rem;
    color: var(--color-muted);
    margin-top: 2px;
}

.module-card__why {
    font-size: 0.8125rem;
    color: var(--color-slate);
    line-height: 1.5;
    margin: 0 0 var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--color-border);
}

/* ── Cost Calculator ──────────────────────────────────────── */
.cost-calc {
    max-width: 860px;
    margin: 0 auto;
    background: var(--color-card);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
}

.cost-calc__controls {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-6);
    align-items: end;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.cost-calc__headcount .form-control {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-heading);
}

.cost-calc__term-toggle {
    justify-content: flex-start;
    margin-bottom: 0;
}

.cost-calc__modules {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.cost-calc__module {
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
}

.cost-calc__module-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cost-calc__module-rate {
    flex-shrink: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-heading);
    white-space: nowrap;
    text-align: right;
}
.cost-calc__module-rate small {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-muted);
}

.cost-calc__included {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    margin-bottom: var(--space-6);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border-radius: var(--radius-md);
}

.cost-calc__included-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-muted);
}

.cost-calc__included-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
}

.cost-calc__included-chip {
    font-size: 0.8125rem;
    color: var(--color-slate);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cost-calc__summary {
    background: var(--color-blue-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.cost-calc__summary-facts {
    display: flex;
    gap: var(--space-8);
    margin-bottom: var(--space-5);
}

.cost-calc__summary-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cost-calc__summary-fact span {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
}

.cost-calc__summary-fact strong {
    font-size: 1rem;
    color: var(--color-heading);
}

.cost-calc__summary-total {
    display: flex;
    gap: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(var(--color-blue-rgb), 0.15);
    margin-bottom: var(--space-4);
}

.cost-calc__summary-total span {
    display: block;
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-bottom: 2px;
}

.cost-calc__summary-total strong {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-link);
}

.cost-calc__note,
.cost-calc__trial {
    font-size: 0.8125rem;
    color: var(--color-muted);
    margin: 0 0 var(--space-2);
}

.cost-calc__note a {
    color: var(--color-link);
    font-weight: 600;
}

.cost-calc__empty {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-amber-dark);
    margin: 0 0 var(--space-3);
}

.cost-calc__cta {
    width: 100%;
    justify-content: center;
}

.cost-calc__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.cost-calc__actions .cost-calc__cta {
    flex: 1 1 220px;
    margin-top: 0;
}

.cost-calc__actions .btn-outline {
    flex: 1 1 160px;
    justify-content: center;
}

.cost-calc__email-panel {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(var(--color-blue-rgb), 0.15);
}

.cost-calc__email-intro {
    font-size: 0.8125rem;
    color: var(--color-muted);
    margin: 0 0 var(--space-4);
}

.cost-calc__email-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

/* Print / Save PDF: hide everything on the page except the calculator
   modal's own contents. The modal is already visible (display:flex) when
   this fires -- print stylesheets can't reveal a display:none element, so
   the click handler that triggers window.print() also adds this class, not
   the other way around. */
@media print {
    body.cost-calc__printing > *:not(#calc-modal) { display: none !important; }
    body.cost-calc__printing #calc-modal {
        position: static !important;
        background: none !important;
        display: block !important;
    }
    body.cost-calc__printing #calc-modal .app-modal {
        max-width: 100% !important;
        box-shadow: none !important;
    }
    body.cost-calc__printing .app-modal__close,
    body.cost-calc__printing .cost-calc__actions,
    body.cost-calc__printing .cost-calc__email-panel {
        display: none !important;
    }
}

/* ── Worked pricing examples ──────────────────────────────── */
.pricing-examples-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.pricing-example {
    background: var(--color-card);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
}

.pricing-example__head {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.pricing-example__label {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: 4px;
}

.pricing-example__facts {
    font-size: 0.75rem;
    color: var(--color-muted);
}

.pricing-example__dot {
    color: var(--color-border-dark);
}

.pricing-example__lines {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    flex: 1;
}

.pricing-example__lines li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 7px 0;
    border-bottom: 1px dashed var(--color-border);
    font-size: 0.8125rem;
}

.pricing-example__lines li:last-child { border-bottom: none; }

.pricing-example__line-name {
    color: var(--color-slate);
    font-weight: 600;
    flex: 1;
}

.pricing-example__line-rate {
    color: var(--color-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.pricing-example__line-total {
    color: var(--color-heading);
    font-weight: 700;
    white-space: nowrap;
}

.pricing-example__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: var(--space-4);
    border-top: 1.5px solid var(--color-navy);
}

.pricing-example__total span {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-muted);
}

.pricing-example__total strong {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--color-heading);
}

.pricing-example__callout {
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    background: rgba(245, 166, 35, 0.1);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    color: var(--color-amber-dark);
    line-height: 1.5;
}

/* ── Services Page ────────────────────────────────────────── */
.services-section {
    padding: var(--section-pad-v) 0;
}

.services-section + .services-section {
    border-top: 1px solid var(--color-border);
}

/* .feature-split carries its own full section-level padding for standalone
   use — applied directly to a <section> on home.php, where it's the only
   padding in play. services.php and solutions.php instead nest a plain
   <div class="feature-split"> inside an already-padded section wrapper
   (.services-section / .section-pad), so that padding stacks with the
   wrapper's and leaves a large dead gap. The wrapper already provides the
   outer boundary, so zero out feature-split's own in that context —
   .services-split--top-pad's padding-top is the only extra gap actually
   wanted, as breathing room under the module grid above it. */
.services-section .feature-split,
.section-pad .feature-split {
    padding-top: 0;
    padding-bottom: 0;
}

.services-category-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.services-category-header__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--color-blue-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.services-category-header__text h2 { font-size: 1.75rem; }
.services-category-header__text p { color: var(--color-muted); font-size: 0.9375rem; }

/* ── Contact / Demo Form Layout ───────────────────────────── */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: var(--space-16);
    align-items: start;
}

.demo-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-16);
    align-items: start;
}

.form-card {
    background: var(--color-card);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    box-shadow: var(--shadow-sm);
}

.form-card h2 {
    margin-bottom: var(--space-2);
}

.form-card .lead {
    margin-bottom: var(--space-8);
}


.contact-info-card {
    background: var(--color-navy);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin-bottom: var(--space-6);
}

.contact-info-card h3 {
    color: var(--color-white);
    font-size: 1.125rem;
    margin-bottom: var(--space-6);
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.contact-info-item:last-child { border-bottom: none; }

.contact-info-item__icon {
    font-size: 1.25rem;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-info-item__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}

.contact-info-item__value {
    font-size: 0.9375rem;
    color: var(--color-white);
    font-weight: 500;
}

.contact-info-item__sub {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.45);
}

/* ── About Page ───────────────────────────────────────────── */
.mission-vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
}

.mission-card, .vision-card {
    padding: var(--space-10);
    border-radius: var(--radius-xl);
}

.mission-card {
    background: var(--color-navy);
    color: var(--color-on-navy);
}

.vision-card {
    background: var(--color-blue-light);
    border: 1.5px solid rgba(var(--color-blue-rgb), 0.15);
}

.mission-card h3, .vision-card h3 {
    font-size: 1.5rem;
    margin-bottom: var(--space-4);
}

.mission-card h3 { color: var(--color-white); }
.vision-card h3 { color: var(--color-heading); }

.mission-card p { color: rgba(255,255,255,0.75); line-height: 1.7; }
.vision-card p { color: var(--color-slate); line-height: 1.7; }

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
}

.pillar-card {
    background: var(--color-card);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.pillar-card:hover {
    border-color: rgba(var(--color-blue-rgb), 0.2);
}

.pillar-card__icon {
    font-size: 2rem;
    margin-bottom: var(--space-4);
}

.pillar-card__name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: var(--space-2);
}

.pillar-card__desc {
    font-size: 0.8125rem;
    color: var(--color-muted);
    line-height: 1.5;
}

/* ── Pain Point Cards ─────────────────────────────────────── */
.pain-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.pain-card {
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    border: 1.5px solid var(--color-border);
    background: var(--color-card);
}

.pain-card__problem {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-error);
    letter-spacing: 0.04em;
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pain-card h3 {
    font-size: 1rem;
    color: var(--color-heading);
    margin-bottom: var(--space-3);
    line-height: 1.4;
}

.pain-card__solution {
    font-size: 0.875rem;
    color: var(--color-muted);
    line-height: 1.6;
}

/* ── Solution/Role Cards ──────────────────────────────────── */
.role-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.role-card {
    background: var(--color-card);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.role-card:hover {
    border-color: rgba(var(--color-blue-rgb), 0.2);
}

.role-card__icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-5);
}

.role-card h3 {
    font-size: 1.125rem;
    margin-bottom: var(--space-4);
    color: var(--color-heading);
}

.role-card__bullets {
    margin-bottom: var(--space-6);
}

.role-card__bullet {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    font-size: 0.9rem;
    color: var(--color-slate);
}

.role-card__bullet-dot {
    width: 6px;
    height: 6px;
    min-width: 6px;
    border-radius: 50%;
    background: var(--color-teal);
    margin-top: 7px;
}

/* ── Industry Cards ───────────────────────────────────────── */
.industry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

.industry-card {
    background: var(--color-card);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.industry-card:hover {
    border-color: rgba(var(--color-blue-rgb), 0.2);
}

.industry-card__icon { font-size: 2rem; margin-bottom: var(--space-4); }
.industry-card__name { font-size: 1rem; font-weight: 700; color: var(--color-heading); margin-bottom: var(--space-2); }
.industry-card__stat { font-size: 0.8125rem; font-weight: 600; color: var(--color-teal-dark); margin-bottom: var(--space-3); background: rgba(0,201,177,0.08); display: inline-block; padding: 2px 10px; border-radius: var(--radius-full); }
.industry-card__modules { font-size: 0.8125rem; color: var(--color-muted); line-height: 1.6; }

/* ── Success Message ──────────────────────────────────────── */
.success-message {
    text-align: center;
    padding: var(--space-12);
}

.success-message__icon {
    font-size: 3.5rem;
    margin-bottom: var(--space-5);
}

.success-message h3 {
    font-size: 1.5rem;
    color: var(--color-heading);
    margin-bottom: var(--space-3);
}

.success-message p {
    color: var(--color-muted);
    font-size: 1rem;
}

/* ── Next Steps List ──────────────────────────────────────── */
.next-steps {
    margin: var(--space-6) 0;
}

.next-step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
}

.next-step:last-child { border-bottom: none; }

.next-step__num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-blue);
    color: var(--color-on-blue);
    font-size: 0.875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.next-step__content strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: 2px;
}

.next-step__content span {
    font-size: 0.875rem;
    color: var(--color-muted);
}

/* ── 404 Page ─────────────────────────────────────────────── */
.error-page {
    background-color: var(--color-navy);
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-20) var(--space-6);
}

.error-page__code {
    font-size: clamp(6rem, 15vw, 10rem);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--color-blue), var(--color-teal));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-4);
}

.error-page h1 {
    color: var(--color-white);
    font-size: 2rem;
    margin-bottom: var(--space-4);
}

.error-page p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 1.0625rem;
    margin-bottom: var(--space-8);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.error-page__secondary-links {
    margin-top: 48px;
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
}

.error-page__secondary-link {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s;
    padding: 4px 0;
}

.error-page__secondary-link:hover {
    color: rgba(255, 255, 255, 0.90);
}

/* ── Animations ───────────────────────────────────────────── */
[data-animate] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate].animate-in {
    opacity: 1;
    transform: translateY(0);
}

[data-animate-delay="1"] { transition-delay: 100ms; }
[data-animate-delay="2"] { transition-delay: 200ms; }
[data-animate-delay="3"] { transition-delay: 300ms; }
[data-animate-delay="4"] { transition-delay: 400ms; }
[data-animate-delay="5"] { transition-delay: 500ms; }
[data-animate-delay="6"] { transition-delay: 600ms; }

/* ── Divider ──────────────────────────────────────────────── */
.divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0;
}

/* ── Spacing helpers ──────────────────────────────────────── */
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-0 { margin-bottom: 0; }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
    background-color: var(--color-navy);
    color: rgba(var(--color-on-navy-rgb), 0.7);
    padding: var(--space-20) 0 0;
}

.footer-top {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-16);
    padding-bottom: var(--space-16);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-brand {}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: var(--space-5);
}


.footer-tagline {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin-bottom: var(--space-6);
}

.footer-social {
    display: flex;
    gap: var(--space-3);
}

.footer-social__link {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    transition: background-color var(--transition-fast), color var(--transition-fast);
    text-decoration: none;
}

.footer-social__link:hover {
    background: var(--color-blue);
    color: var(--color-on-blue);
}

.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-8);
}

.footer-col__title {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-white);
    margin-bottom: var(--space-5);
}

.footer-col__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.footer-col__links a {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color var(--transition-fast);
    line-height: 1.4;
}

.footer-col__links a:hover {
    color: var(--color-white);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-copyright {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.4);
}

.footer-bottom-links {
    display: flex;
    gap: var(--space-6);
}

.footer-bottom-links a {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-bottom-links a:hover { color: rgba(255, 255, 255, 0.8); }

/* ── Responsive — Tablet (max 991px) ─────────────────────── */
@media (max-width: 991px) {
    :root {
        --section-pad-v: 64px;
    }

    .nav-links, .nav-actions { display: none; }
    .nav-hamburger { display: flex; }
    .nav-container { gap: 0; }

    .hero__inner { grid-template-columns: 1fr; gap: var(--space-12); }
    .hero__visual { display: none; }
    .hero { padding: var(--space-16) 0; }

    .feature-cards-grid { grid-template-columns: repeat(2, 1fr); }
    .feature-cards-grid--2up { max-width: none; }
    .module-cards-grid { grid-template-columns: repeat(2, 1fr); }
    .module-group__subgrid { grid-template-columns: repeat(2, 1fr); }

    .feature-split__inner { grid-template-columns: 1fr; gap: var(--space-10); }
    .feature-split__inner--reverse { direction: ltr; }

    .testimonials-grid { grid-template-columns: 1fr; gap: var(--space-5); }

    .integrations-grid { grid-template-columns: repeat(4, 1fr); }

    .trust-bar__grid { gap: var(--space-8); }

    .stats-bar__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }

    .pricing-module-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-examples-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
    .cost-calc { padding: var(--space-6); }
    .cost-calc__controls { grid-template-columns: 1fr; }
    .cost-calc__summary-total { gap: var(--space-6); }

    .logo-row__grid { gap: var(--space-4); }

    .footer-top { grid-template-columns: 1fr; gap: var(--space-12); }
    .footer-links-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }

    .contact-layout { grid-template-columns: 1fr; }
    .demo-layout { grid-template-columns: 1fr; }
    .contact-info { position: static; }

    .mission-vision-grid { grid-template-columns: 1fr; }

    .pillars-grid { grid-template-columns: repeat(3, 1fr); }

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

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

    .pain-cards-grid { grid-template-columns: 1fr; }
}

/* ── Responsive — Mobile (max 767px) ─────────────────────── */
@media (max-width: 767px) {
    :root {
        --section-pad-v: 48px;
        --nav-height: 64px;
    }

    .container { padding-left: var(--space-5); padding-right: var(--space-5); }

    /* Two full-size .btn-lg CTAs (e.g. "Schedule a Demo" + "Explore the
       Platform") don't fit on one row at mobile widths and the container's
       flex-wrap: wrap was dropping the second button to its own line --
       reported live as the buttons appearing stacked instead of side by
       side. Force them to share the row and shrink to fit instead. */
    .hero__ctas, .page-hero__ctas {
        flex-wrap: nowrap;
        gap: var(--space-2);
    }
    .hero__ctas .btn, .page-hero__ctas .btn {
        flex: 1 1 0;
        min-width: 0;
        padding-left: var(--space-3);
        padding-right: var(--space-3);
        font-size: 0.8125rem;
    }

    .feature-cards-grid { grid-template-columns: 1fr; }
    .feature-cards-grid--2up { max-width: none; }
    .module-cards-grid { grid-template-columns: repeat(2, 1fr); }
    .module-groups-row { grid-template-columns: 1fr; }
    .module-group__subgrid { grid-template-columns: 1fr; }
    .module-group { padding: var(--space-5); }
    .pricing-module-grid { grid-template-columns: 1fr; }
    .pricing-examples-grid { grid-template-columns: 1fr; }
    .cost-calc { padding: var(--space-5); }
    .cost-calc__controls { grid-template-columns: 1fr; gap: var(--space-4); }
    .cost-calc__module { flex-wrap: wrap; }
    .cost-calc__summary-facts { gap: var(--space-5); flex-wrap: wrap; }
    .cost-calc__summary-total { flex-direction: column; gap: var(--space-3); }

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

    .logo-row__item { width: 100px; }

    .integrations-grid { grid-template-columns: repeat(3, 1fr); }

    .trust-bar__grid { flex-direction: column; align-items: flex-start; gap: var(--space-5); }

    .form-row { grid-template-columns: 1fr; }
    .checkbox-group { grid-template-columns: 1fr; }

    .cta-group { flex-direction: column; width: 100%; }
    .cta-group .btn { width: 100%; justify-content: center; }

    .footer-links-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-bottom { flex-direction: column; gap: var(--space-4); text-align: center; }
    .footer-bottom-links { gap: var(--space-4); }

    .pillars-grid { grid-template-columns: repeat(2, 1fr); }
    .role-cards-grid { grid-template-columns: 1fr; }
    .industry-grid { grid-template-columns: 1fr; }

    .page-hero { padding: var(--space-12) 0; }
    .error-page { min-height: 60vh; }

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

/* ── Responsive — Small Mobile (max 479px) ───────────────── */
@media (max-width: 479px) {
    .module-cards-grid { grid-template-columns: 1fr; }
    .integrations-grid { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: 1fr; }
    .pillars-grid { grid-template-columns: 1fr; }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
}

/* ── Legal Pages ─────────────────────────────────────────────── */
.legal-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-12);
    align-items: start;
    max-width: 960px;
    margin: 0 auto;
}

.legal-toc {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-6));
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: var(--space-5);
}

.legal-toc__title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-muted);
    margin: 0 0 var(--space-3);
}

.legal-toc__list {
    margin: 0;
    padding-left: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.legal-toc__list li { font-size: 0.875rem; }

.legal-toc__list a {
    color: var(--color-slate);
    text-decoration: none;
    line-height: 1.4;
    transition: color 150ms ease;
}

.legal-toc__list a:hover { color: var(--color-link); }

.legal-body { min-width: 0; }

.legal-section {
    margin-bottom: var(--space-10);
    padding-bottom: var(--space-10);
    border-bottom: 1px solid var(--color-border);
}

.legal-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.legal-section h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-heading);
    margin: 0 0 var(--space-4);
    scroll-margin-top: calc(var(--nav-height) + var(--space-6));
}

.legal-section h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-slate);
    margin: var(--space-5) 0 var(--space-3);
}

.legal-section p, .legal-section li {
    font-size: 0.9375rem;
    color: var(--color-slate);
    line-height: 1.75;
}

.legal-section ul {
    padding-left: var(--space-5);
    margin: var(--space-3) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin: var(--space-4) 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

.legal-table th {
    background: var(--color-surface);
    color: var(--color-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 16px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.legal-table td {
    padding: 12px 16px;
    color: var(--color-slate);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
    line-height: 1.6;
}

.legal-table tr:last-child td { border-bottom: none; }
.legal-table tr:nth-child(even) td { background: var(--color-surface); }

.legal-notice {
    background: var(--color-blue-light);
    border-left: 4px solid var(--color-blue);
    border-radius: 0 8px 8px 0;
    padding: var(--space-4) var(--space-5);
    margin: var(--space-5) 0;
    font-size: 0.9rem;
    color: var(--color-slate);
    line-height: 1.7;
}

@media (max-width: 767px) {
    .legal-layout { grid-template-columns: 1fr; }
    .legal-toc { position: static; }
}



/* ── Shared module components ─────────────────────────────── */

/* Toggle switch — peer-to-peer and ideas modules */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}
.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-switch__track {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: var(--color-border);
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}
.toggle-switch__track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-switch__track { background: var(--color-blue); }
.toggle-switch input:checked + .toggle-switch__track::after { transform: translateX(16px); }

/* Inline "Saved" confirmation message — profile settings pages (Notifications, Privacy, Feed Preferences) */
.notif-prefs__saved-msg {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-success);
}

/* Section header card — feed, peer-to-peer, ideas */
.p2p-section-header,
.ideas-section-header,
.sf-section-header {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.p2p-section-title,
.ideas-section-title,
.sf-section-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-heading);
    display: flex;
    align-items: center;
    gap: 8px;
}
.p2p-section-title svg,
.ideas-section-title svg,
.sf-section-title svg { color: var(--color-link); }

/* Module stat card — peer-to-peer and ideas */
.p2p-stat,
.ideas-stat {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: center;
}
.p2p-stat__value,
.ideas-stat__value {
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--color-heading);
    line-height: 1;
    margin-bottom: 4px;
}
.p2p-stat__label,
.ideas-stat__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Card ─────────────────────────────────────────────────── */
.card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.card-header {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.card-title {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
}
.card-header__action {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-link);
    text-decoration: none;
    white-space: nowrap;
}
.card-header__action:hover { text-decoration: underline; }
.card-body {
    padding: var(--space-4);
}
.card-desc {
    font-size: 0.875rem;
    color: var(--color-muted);
    margin: 0 0 var(--space-4);
}
.card-body--flush {
    padding: 0;
}
.card-footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-surface);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.card-footer--error   { background: var(--color-error-bg);   border-top-color: var(--color-error-border); color: var(--color-error); }
.card-footer--success { background: var(--color-success-bg); border-top-color: var(--color-success-dark); color: var(--color-success-dark); }
.card-footer--actions { justify-content: flex-end; }

/* Every card, right-side panels included, uses the light .card-header above
   (2026-10-15: the dark header variant is retired). */

/* ── Workflow stepper: order pages, partials/workflow-steps.php, both consoles ── */
.mp-od-timeline {
    display: flex;
    align-items: flex-start;
    padding: var(--space-5) var(--space-6);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    gap: 0;
    margin-bottom: var(--space-5);
}
.mp-od-timeline__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    min-width: 110px;
    padding: 0 var(--space-3);
}
.mp-od-timeline__line {
    position: absolute;
    top: 14px;
    left: calc(-50% + 16px);
    right: calc(50% + 16px);
    height: 2px;
    background: var(--color-border-dark);
    z-index: 0;
}
.mp-od-timeline__line--done { background: var(--color-success); }
.mp-od-step-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-card);
    border: 2px solid var(--color-border-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-subtle);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.mp-od-timeline__step--done .mp-od-step-icon {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}
.mp-od-timeline__step--active .mp-od-step-icon {
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: var(--color-on-blue);
}
/* Workflow steps (partials/workflow-steps.php): an <ol>, and a step that ended the flow */
ol.mp-od-timeline { list-style: none; margin-top: 0; }
.mp-od-timeline__step--failed .mp-od-step-icon {
    background: var(--color-error);
    border-color: var(--color-error);
    color: #fff;
}
.mp-od-timeline__step--failed .mp-od-step-label { color: var(--color-error-dark); }
.mp-od-step-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: var(--space-2);
    text-align: center;
}
.mp-od-step-label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-muted);
    white-space: nowrap;
}
.mp-od-timeline__step--done .mp-od-step-label,
.mp-od-timeline__step--active .mp-od-step-label { color: var(--color-text); }
.mp-od-step-ts {
    font-size: 0.68rem;
    color: var(--color-muted);
    margin-top: 2px;
}
.mp-od-timeline__step-aside {
    display: flex;
    align-items: center;
    padding-left: var(--space-4);
    flex-shrink: 0;
}

/* ── Tip list (checklist with green circle marks) ─────────── */
.tip-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tip-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.8125rem;
    color: var(--color-text);
    line-height: 1.45;
}
.tip-list li::before {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-navy, #1a2e5a);
    color: var(--color-on-navy);
    font-size: 0.6875rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Flash banner (inline, below breadcrumbs) ─────────────── */
.flash-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    border-left: 4px solid transparent;
    font-size: 0.875rem;
    line-height: 1.45;
    margin-bottom: var(--space-5);
    animation: flash-banner-in 0.22s ease;
    max-height: 120px;
    overflow: hidden;
    transition: opacity 0.25s, max-height 0.3s ease, padding 0.3s, margin 0.3s;
}
.flash-banner--success { background: rgba(34,197,94,0.09);   border-left-color: var(--color-success); }
.flash-banner--error   { background: rgba(239,68,68,0.08);   border-left-color: var(--color-error); }
.flash-banner--warning { background: rgba(245,158,11,0.09);  border-left-color: var(--color-warning); }
.flash-banner--info    { background: rgba(2,132,199,0.08);   border-left-color: var(--color-info,#0284C7); }
/* A banner raised while the page is scrolled down (showFlashToast): floats at
   the bottom of the window on a solid card, the type shown by its edge and icon. */
.flash-banner.flash-banner--floating {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--space-6);
    width: min(560px, calc(100vw - 2rem));
    margin: 0 auto;
    z-index: 750;
    background: var(--color-card);
    box-shadow: 0 8px 28px rgba(13, 27, 62, 0.18);
}
.flash-banner__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
}
.flash-banner--success .flash-banner__icon { background: var(--color-success); color: #fff; }
.flash-banner--error   .flash-banner__icon { background: var(--color-error);   color: #fff; }
.flash-banner--warning .flash-banner__icon { background: var(--color-warning); color: #fff; }
.flash-banner--info    .flash-banner__icon { background: var(--color-info,#0284C7); color: #fff; }
.flash-banner__msg { flex: 1; color: var(--color-heading); font-weight: 500; }
.flash-banner__close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-muted);
    padding: 2px 0 2px 8px;
    font-size: 1.2rem;
    line-height: 1;
    transition: color var(--transition-fast);
}
.flash-banner__close:hover { color: var(--color-heading); }
/* An action in a notice, e.g. Undo (dashboard.js showFlashToast's third argument) */
.flash-banner__action {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 2px 4px;
    font: inherit;
    font-weight: 700;
    color: var(--color-link);
    cursor: pointer;
}
.flash-banner__action:hover { text-decoration: underline; }
.flash-banner__list { margin: 0; padding-left: 1.25em; font-weight: 500; }
.flash-banner__list li { margin: 0; padding: 0; }
.flash-banner--out {
    opacity: 0 !important;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
@keyframes flash-banner-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
    .site-header, .site-footer, .cta-bar, .announcement-bar { display: none; }
    body { color: #000; background: #fff; }
}

/* ── Pages: inline-style replacements ── */

/* about.php — mission/vision icon + second paragraph */
.about-mv__icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-4);
}
.about-mv__p2 {
    margin-top: var(--space-4);
}
.about-mv__p2--muted {
    color: var(--color-muted);
}

/* about.php — story section split gap + body paragraphs */
.about-story__inner {
    gap: 80px;
}
.about-story__p {
    font-size: 1.0625rem;
    color: var(--color-muted);
    line-height: 1.75;
    margin-bottom: var(--space-5);
}
.about-story__p--slate {
    color: var(--color-slate);
}
.about-story__p--last {
    margin-bottom: 0;
}

/* contact.php — success CTA paragraph */
.contact-success__cta-wrap {
    margin-top: var(--space-4);
}

/* contact.php / demo.php — form hint top spacing */
.form-hint--spaced {
    margin-top: var(--space-3);
}

/* contact.php — demo card in sidebar */
.contact-demo-card {
    border-color: rgba(var(--color-blue-rgb), 0.2);
    background: var(--color-blue-light);
}
.contact-demo-card__heading {
    color: var(--color-heading);
}
.contact-demo-card__body {
    color: var(--color-muted);
}
.contact-demo-card__btn {
    margin-top: var(--space-5);
    width: 100%;
    justify-content: center;
}

/* contact.php — HQ card in sidebar */
.contact-hq-card {
    margin-top: var(--space-4);
    background: var(--color-card);
}
.contact-hq-card__address {
    color: var(--color-muted);
    font-size: 0.9rem;
}
.contact-hq-card__offices {
    color: var(--color-muted);
    font-size: 0.9rem;
    margin-top: var(--space-3);
}

/* demo.php — success state */
.demo-success__email-note {
    margin-top: var(--space-3);
    color: var(--color-muted);
}
.demo-success__next-steps {
    text-align: left;
    max-width: 440px;
    margin: var(--space-8) auto 0;
}
.demo-success__home-btn {
    margin-top: var(--space-8);
}

/* demo.php — optional label on form field */
.form-label__optional {
    font-weight: 400;
    color: var(--color-muted);
}

/* demo.php — "What You'll See" aside card */
.demo-see-card {
    margin-bottom: var(--space-5);
    border-color: rgba(var(--color-blue-rgb), 0.15);
}
.demo-see-list {
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    padding: 0;
}
.demo-see-list__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--color-slate);
}
.demo-see-list__check {
    color: var(--color-teal);
    font-weight: 700;
    flex-shrink: 0;
}

/* demo.php — logos card */
.demo-logos-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}
.demo-logos-card__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: var(--space-4);
}
.demo-logos-card__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}
.demo-logos-card__item {
    width: 100%;
    height: 36px;
    font-size: 0.625rem;
}

/* demo.php — "What Happens Next" aside card */
.demo-next-card {
    margin-top: var(--space-5);
}
.demo-next-card__privacy {
    font-size: 0.8125rem;
    color: var(--color-muted);
    margin-top: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* pricing.php — plans note, table column, trust label */
.pricing-plans__note {
    font-size: 0.875rem;
}
.pricing-cmp__feature-col {
    width: 38%;
}
.pricing-trust__label {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* privacy.php / terms.php — legal hero updated date line */
.legal-hero__updated {
    margin-top: var(--space-3);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.55);
}

/* privacy.php / terms.php — legal contact card */
.legal-contact-card {
    margin-top: var(--space-4);
}
.legal-contact-card__link {
    color: var(--color-link);
}
.legal-contact-card__item--spaced {
    margin-top: var(--space-3);
}
.legal-contact-card__address {
    font-size: 0.9rem;
    line-height: 1.6;
}

/* services.php — feature-split top padding. Compound selector needed:
   .services-section .feature-split / .section-pad .feature-split above
   (2-class specificity) otherwise wins over a single-class selector here
   regardless of source order and silently zeroes this back out — real
   bug found live 2026-09-01, confirmed via computed styles (padding-top
   was 0px, not 64px, despite this rule existing). */
.feature-split.services-split--top-pad,
.feature-cards-grid.services-split--top-pad {
    padding-top: var(--space-16);
}

/* services.php — recognition feed mockup ───────────────────────────────── */
.svc-feed-mockup {
    background: var(--color-card);
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.07), 0 16px 40px -8px rgba(30,58,95,.14);
    overflow: hidden;
    border: 1px solid var(--color-border);
    font-family: inherit;
}

.svc-feed-mockup__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--color-navy);
    color: var(--color-on-navy);
}

.svc-feed-mockup__bar-title {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.svc-feed-mockup__live {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #4ade80;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.svc-feed-post {
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-neutral-bg);
}

.svc-feed-post--last {
    border-bottom: none;
}

.svc-feed-post__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.svc-feed-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}

.svc-feed-avatar--navy  { background: var(--color-navy); }
.svc-feed-avatar--teal  { background: var(--color-teal-text); }
.svc-feed-avatar--amber { background: var(--color-warning); }

.svc-feed-post__meta {
    flex: 1;
    min-width: 0;
}

.svc-feed-post__who {
    font-size: 0.8125rem;
    color: #1e293b;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.svc-feed-post__time {
    font-size: 0.6875rem;
    color: var(--color-subtle);
    margin-top: 1px;
}

.svc-feed-post__pts {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-teal-text);
    background: #f0fdf9;
    border: 1px solid #99f6e4;
    border-radius: 999px;
    padding: 3px 9px;
    white-space: nowrap;
    flex-shrink: 0;
}

.svc-feed-post__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-heading);
    background: var(--color-blue-light);
    border: 1px solid var(--color-blue-200);
    border-radius: 6px;
    padding: 3px 10px;
    margin-bottom: 8px;
}

.svc-feed-post__msg {
    font-size: 0.8125rem;
    color: var(--color-neutral);
    line-height: 1.55;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.svc-feed-post__reactions {
    display: flex;
    gap: 10px;
}

.svc-feed-reaction {
    font-size: 0.75rem;
    color: var(--color-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 3px 10px;
    cursor: default;
}

@media (prefers-color-scheme: dark) {
    .svc-feed-mockup { background: #1e293b; border-color: var(--color-text); }
    .svc-feed-post { border-bottom-color: var(--color-text); }
    .svc-feed-post__who { color: var(--color-border); }
    .svc-feed-post__pts { background: #134e4a; border-color: var(--color-teal-text); color: #2dd4bf; }
    .svc-feed-post__badge { background: var(--color-navy); border-color: #3b5f8a; color: #93c5fd; }
    .svc-feed-post__msg { color: var(--color-subtle); }
    .svc-feed-reaction { background: #0f172a; border-color: var(--color-text); color: var(--color-subtle); }
}

/* services.php — support hub block */
.services-support__wrap {
    margin-top: 48px;
}
.services-support__card {
    border-color: var(--color-blue);
    max-width: 680px;
}
.services-support__badges {
    margin-top: var(--space-5);
    margin-bottom: var(--space-8);
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}
/* A module link sitting beside a button shares its row and centre line */
.cta-group .module-card__link { margin-top: 0; }

/* services.php — AI badge inline alignment */
.badge--ai-inline {
    vertical-align: middle;
}

/* solutions.php — role blocks */
.solutions-role__block {
    margin-bottom: var(--space-16);
}
.solutions-role__block--divided {
    padding-top: var(--space-8);
    border-top: 1px solid var(--color-border);
    margin-bottom: var(--space-16);
}
.solutions-role__block--last {
    margin-bottom: 0;
}

/* solutions.php — two-column testimonials grid */
.testimonials-grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

/* Bug found 2026-09-01 mobile audit: this unconditional rule shares the same
   0,1,0 specificity as the base .testimonials-grid mobile-collapse rules
   above and sits later in the file, so it was winning the cascade at every
   width and silently overriding the 767px collapse to 1 column — cards on
   solutions.php would render as two cramped, word-wrapping columns on any
   phone the moment a testimonial is published. Re-assert the 1-column
   collapse here, after the unconditional declaration, so it wins again. */
@media (max-width: 767px) {
    .testimonials-grid--2col { grid-template-columns: 1fr; }
}

/* unsubscribe.php — hero section */
.unsub-hero {
    padding: var(--space-16) 0;
}
.unsub-hero__container {
    max-width: 640px;
    text-align: center;
}
.unsub-hero__icon {
    font-size: 3rem;
    margin-bottom: var(--space-5);
}
/* An <svg> icon here is display:block under the global reset, so it hugs the
   left edge of the container instead of centering like the text glyphs above
   (checkmark/warning) do -- center it explicitly. */
.unsub-hero__icon svg {
    margin-inline: auto;
}
.unsub-hero__heading {
    font-size: 2rem;
}
.unsub-hero__sub-note {
    margin-top: var(--space-3);
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
}

/* unsubscribe.php — actions section */
.unsub-actions__heading {
    font-size: 1.25rem;
    margin-bottom: var(--space-3);
}
.unsub-actions__sub {
    color: var(--color-muted);
    margin-bottom: var(--space-6);
}
.unsub-actions__email-link {
    color: var(--color-link);
    font-weight: 500;
}

/* ── Compact settings table ───────────────────────────────── */
.settings-table {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.settings-section-hd {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-muted);
    padding: 9px 16px 7px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}
.settings-row {
    display: grid;
    grid-template-columns: minmax(180px, 300px) 1fr;
    align-items: center;
    gap: var(--space-4);
    padding: 10px 16px;
}
/* Compact inputs inside settings rows — never full form-control height */
.settings-row__control .form-control,
.settings-row__control select.form-control {
    padding: 5px 10px;
    font-size: 0.875rem;
}
.settings-row__control input[type="number"] { width: 120px; }
/* Full-width stacked variant — label above, control spans full width */
.settings-row--full {
    display: block;
    padding: 10px 16px;
}
.settings-row--full .settings-row__title { margin-bottom: 6px; }
.settings-row--full .settings-row__control { width: 100%; }
.settings-row__full-hint {
    padding: 6px 16px 10px;
    font-size: 0.75rem;
    color: var(--color-muted);
    line-height: 1.5;
}
.settings-row:hover { background: var(--color-surface); }
.settings-row__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-heading);
    line-height: 1.3;
}
.settings-row__hint {
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-top: 6px;
    line-height: 1.4;
}
.settings-row__control {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

/* Custom file upload control */
.file-upload-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    cursor: pointer;
}
.file-upload-label__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.file-upload-label__btn {
    flex-shrink: 0;
}
.file-upload-label__name {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--color-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.settings-row__control .form-control {
    flex: 1;
    margin: 0;
    font-size: 0.8125rem;
    padding-top: 5px;
    padding-bottom: 5px;
    height: auto;
}
.settings-row__control .toggle-switch {
    margin-left: auto;
}
.settings-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4);
}

/* ── Company Settings: modern 2-col layout & logo gallery ─ */
.settings-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    margin-top: var(--space-5);
}
@media (max-width: 900px) {
    .settings-2col { grid-template-columns: 1fr; }
}
/* Two columns while each can be at least 220px wide, otherwise one: it follows
   the card's own width, so a half-width card or the profile column never
   squeezes its fields the way a fixed 1fr 1fr did */
.settings-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(220px, calc((100% - var(--space-5)) / 2))), 1fr));
    gap: var(--space-4) var(--space-5);
}
/* Columns at least 320px wide: for lists whose choices read long (time zones) */
.settings-form-grid--wide {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(320px, calc((100% - var(--space-5)) / 2))), 1fr));
}
.settings-form-grid .fg-full { grid-column: 1 / -1; }
@media (max-width: 700px) {
    .settings-form-grid { grid-template-columns: 1fr; }
    .settings-form-grid .fg-full { grid-column: 1; }
}
.settings-form-grid .form-group { margin-bottom: 0; }
/* Rows of fields one under the other (two grids in a card, or a grid under the
   card's hint) keep the grid's own row gap between them */
.settings-form-grid + .settings-form-grid,
.form-hint + .settings-form-grid { margin-top: var(--space-4); }

/* Logo gallery */
.logo-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-start;
}
.logo-card {
    width: 160px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-card);
    overflow: hidden;
    transition: border-color var(--transition-fast);
}
.logo-card--active {
    border-color: var(--color-navy);
}
.logo-card__preview {
    height: 88px;
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}
.logo-card--active .logo-card__preview {
    border-bottom-color: var(--color-navy);
}
.logo-card__preview img {
    max-height: 64px;
    max-width: 136px;
    object-fit: contain;
}
.logo-card__foot {
    padding: var(--space-2) var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 36px;
}
.logo-card__badge {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.logo-card__actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
/* The logo chosen for dark backgrounds is previewed on one (the dark-mode
   card colour, fixed so it reads as "dark" in either theme). */
.logo-card--dark .logo-card__preview { background: #121A2B; }
.logo-dark-btn[aria-pressed="true"] { color: var(--color-link); background: var(--color-blue-light); }
.logo-upload-zone {
    width: 160px;
    min-height: 128px;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    cursor: pointer;
    color: var(--color-muted);
    font-size: 0.8125rem;
    text-align: center;
    padding: var(--space-3);
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
    user-select: none;
}
.logo-upload-zone:hover,
.logo-upload-zone.is-drag-over {
    border-color: var(--color-navy);
    color: var(--color-heading);
    background: var(--color-surface);
}
.logo-upload-zone--full,
.logo-upload-zone--full:hover {
    cursor: not-allowed;
    opacity: 0.55;
    border-color: var(--color-border);
    color: var(--color-muted);
    background: transparent;
}
.logo-upload-progress {
    margin-top: var(--space-3);
    font-size: 0.8125rem;
    color: var(--color-muted);
    display: none;
}
.logo-upload-progress.is-active { display: block; }
.logo-upload-error {
    margin-top: var(--space-3);
    font-size: 0.8125rem;
    color: var(--color-error);
    display: none;
}
.logo-upload-error.is-active { display: block; }

/* Company Settings > Sign-In Page: a miniature of the organization's sign-in
   page -- its photo under the same dark tint as auth.css, and the white
   sign-in box with its logo and button colour. The box and tint depict that
   page whatever theme is showing, so their colours are fixed. */
.signin-bg { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-start; }
.signin-bg__preview {
    position: relative;
    flex: 0 0 320px;
    max-width: 100%;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #07122E;
}
.signin-bg__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.signin-bg__preview::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(5, 12, 45, 0.62) 0%, rgba(5, 12, 45, 0.45) 100%);
}
.signin-bg__card {
    position: absolute;
    z-index: 1;
    top: 14%;
    left: 50%;
    transform: translateX(-50%);
    width: 36%;
    padding: 5% 4%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: #FFFFFF;
    border-radius: 6px;
}
.signin-bg__logo { max-width: 70%; max-height: 16px; }
.signin-bg__line { width: 80%; height: 4px; border-radius: 2px; background: #E2E8F0; }
.signin-bg__line--short { width: 55%; }
.signin-bg__button { width: 80%; height: 7px; margin-top: 3px; border-radius: 3px; background: var(--color-blue); }
.signin-bg__body { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.signin-bg__intro { margin: 0; }
.signin-bg__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.signin-bg__actions form { margin: 0; }

/* ── Preference rows (My Profile settings pages, Feed Preferences) ──
   A setting's name and an optional line under it, with its control (a
   switch, a list, a button) on the right. Rows sit flush in a card,
   divided by hairlines: .card > .pref-row. */
.pref-row {
    display: flex;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    padding: 11px var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.pref-row:last-child,
.pref-row:has(+ .card-footer) { border-bottom: none; }   /* the footer draws its own line */
.pref-row__label { flex: 1; min-width: 0; }
.pref-row__label > span,
.pref-row__title { display: block; margin: 0; font-size: 0.875rem; font-weight: 500; line-height: 1.35; color: var(--color-text); }
.pref-row__label small,
.pref-row__hint { display: block; margin: 2px 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--color-muted); }
.pref-row__control { flex-shrink: 0; }
/* A setting whose choices go under its name (a group of radios); as a
   <fieldset>, without the browser's own border and spacing */
.pref-row--stack { display: block; }
fieldset.pref-row { min-width: 0; margin: 0; border: 0; border-bottom: 1px solid var(--color-border); }
fieldset.pref-row:last-child { border-bottom: 0; }
.pref-row--stack .pref-row__choices { margin-top: var(--space-3); }
.pref-row__choices .form-check:last-child { margin-bottom: 0; }

/* ── Interest card picker (profile/interests) ──────────── */
.interests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.interest-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: 14px 16px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    background: var(--color-card);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.interest-card:hover {
    border-color: var(--color-navy);
}
.interest-card--selected {
    border-color: var(--color-navy);
    background: var(--color-info-bg);
}
.interest-card__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-heading);
}
.interest-card__desc {
    font-size: 0.8125rem;
    color: var(--color-muted);
    margin-top: 2px;
    line-height: 1.4;
}
.interest-card input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }

/* ── Onboarding page (interests step) ──────────────────── */
.onboarding-page {
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.onboarding-card {
    background: var(--color-card);
    border-radius: 16px;
    max-width: 720px;
    width: 100%;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.onboarding-card__heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: 8px;
}
.step-indicator {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
}
.step {
    height: 4px;
    border-radius: 2px;
    flex: 1;
    background: var(--color-border);
}
.step--done { background: var(--color-navy); }

/* ── Page heading — user console ────────────────────────── */
.page-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-heading);
    margin: 0 0 var(--space-5);
}

/* ── Notification preferences table ─────────────────────── */
.notif-pref-table { width: 100%; border-collapse: collapse; }
.notif-pref-table th,
.notif-pref-table td { padding: 10px 14px; border-bottom: 1px solid var(--color-border); font-size: 0.8125rem; }
.notif-pref-table tbody tr:last-child td { border-bottom: none; }
.notif-pref-table thead th { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-muted); }
.notif-pref-table .col-center { text-align: center; width: 90px; }
/* Flush in a card: the first and last columns line up with the card header */
.notif-pref-table th:first-child,
.notif-pref-table td:first-child { padding-left: var(--space-4); }
.notif-pref-table th:last-child,
.notif-pref-table td:last-child { padding-right: var(--space-4); }
/* A group's name across the table (Social Feed, Company ...); specific enough
   to beat crud.css's th:last-child { text-align: right } */
.notif-pref-table tr.notif-pref-table__group th {
    padding-top: var(--space-4);
    background: var(--color-surface);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: left;
    color: var(--color-muted);
}
.notif-pref-table tbody:last-child tr:last-child td { border-bottom: none; }

/* ── Character counter ───────────────────────────────────── */
/* A hint with the counter at its right: .form-hint-row > .form-hint + .char-count */
.form-hint-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}
.char-count {
    flex-shrink: 0;
    margin-top: var(--space-1);
    font-size: 0.75rem;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}
.char-count--ok { color: var(--color-success); }


/* ── CRUD toolbar shared utilities (manage/dashboard pages) ── */
.crud-toolbar__sep {
    width: 1px;
    height: 20px;
    background: var(--color-border);
    margin: 0 var(--space-1);
    flex-shrink: 0;
}

.crud-export-label,
.crud-toolbar__label {
    font-size: 0.8125rem;
    color: var(--color-muted);
    font-weight: 500;
    white-space: nowrap;
}

/* ── Export dropdown ──────────────────────────────────────── */
.export-dropdown { position: relative; display: inline-block; }
.export-dropdown summary { list-style: none; cursor: pointer; }
.export-dropdown summary::-webkit-details-marker { display: none; }
.export-dropdown__panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 130px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 200;
    padding: var(--space-2) 0;
}
.export-dropdown__item {
    display: block;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 0.8125rem;
    color: var(--color-slate);
    text-decoration: none;
    white-space: nowrap;
}
.export-dropdown__item:hover {
    background: var(--color-surface);
    color: var(--color-heading);
}
/* A menu at the start of a card (not a toolbar's end) opens to the right */
.export-dropdown--start .export-dropdown__panel { left: 0; right: auto; }

/* ── Column visibility dropdown ──────────────────────────────── */
.col-vis-wrapper {
    position: relative;
}

.col-vis-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 200;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-width: 180px;
    padding: var(--space-2) 0;
}

.col-vis-panel.is-open { display: block; }

.col-vis-panel label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 0.8125rem;
    cursor: pointer;
    white-space: nowrap;
}

.col-vis-panel label:hover { background: var(--color-surface); }

.col-vis-panel input[type="checkbox"] {
    accent-color: var(--color-blue);
    flex-shrink: 0;
}

/* ── Bulk-danger button ───────────────────────────────────────── */
.btn--bulk-danger {
    background-color: var(--color-error);
    border-color: var(--color-error);
    color: var(--color-white);
}

.btn--bulk-danger:hover:not(:disabled) {
    background-color: var(--color-error-hover);
    border-color: var(--color-error-hover);
    color: var(--color-white);
}

.btn--bulk-danger:disabled { opacity: .45; }

/* ── Table column-search row (manage/dashboard pages) ────────── */
thead tr.tbl-col-search th {
    padding: 6px 8px;
    background: var(--color-surface);
    border-top: none;
    border-bottom: 2px solid var(--color-border);
}

.col-search,
.col-search-select {
    width: 100%;
    padding: 4px 8px;
    font-size: 0.75rem;
    font-family: inherit;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-card);
    color: var(--color-text);
    line-height: 1.4;
}

.col-search-select { min-width: 110px; }

.col-search:focus,
.col-search-select:focus {
    outline: none;
    border-color: var(--color-navy);
    box-shadow: 0 0 0 2px rgba(13, 27, 62, 0.1);
}

.col-search::placeholder { color: var(--color-muted); }

/* ============================================================
   SHARED MODULE COMPONENTS
   Components used by two or more modules. Module-specific
   overrides (colours, sizes) stay in each module's own CSS
   as BEM modifier classes.
   ============================================================ */

/* ── Tile grid: a catalogue of cards, four across ─────────────────────
   Shared: Education's courses and the Support Hub's Knowledge Base
   (moved here from education.css so both modules render the same tile). */

.learn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.learn-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s, border-color 0.15s;
    overflow: hidden;
}
.learn-tile:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-dark);
}

.learn-tile__badge {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.learn-tile__badge--done { background: var(--color-success-bg);     color: var(--color-success-dark); }
.learn-tile__badge--in   { background: var(--color-warning-accent); color: var(--color-warning-dark); }

.learn-tile__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--color-blue-light);
    color: var(--color-link);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: var(--space-3);
}

.learn-tile__body {
    flex: 1;
    min-width: 0;
    margin-bottom: var(--space-3);
}

.learn-tile__title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-heading);
    margin: 0 0 var(--space-1);
    line-height: 1.4;
}

.learn-tile__desc {
    font-size: 0.8125rem;
    color: var(--color-muted);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.learn-tile__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.learn-tile__pts {
    margin-left: auto;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-link);
}

/* Secondary figure at the end of a tile's footer (a Knowledge Base view count) */
.learn-tile__aside {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--color-muted);
    white-space: nowrap;
}

/* ── Hub two-column layout (main + sidebar) ──────────────────── */

.hub-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--space-6);
    align-items: start;
}

.hub-layout > * { min-width: 0; }

@media (max-width: 900px) {
    .hub-layout { grid-template-columns: 1fr; }
}

.hub-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* A main column of cards, one under the other (overview, search results,
   and the sections of a settings form: .form-stack) */
.hub-stack,
.form-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}
.hub-stack > .card,
.form-stack > .card { margin: 0; }
.hub-stack > .alert,
.form-stack > .alert { margin: 0; }
/* Meta text that needs attention: an overdue task, a deadline about to pass */
.hub-meta--alert { color: var(--color-error); font-weight: 600; }

/* ── Progress bar (Support Hub tasks, Education paths) ─────────────────────────────────────────────────────────── */
.hub-progress-bar {
    height: 6px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin: 6px 0;
}
.hub-progress-bar--lg { height: 10px; margin: var(--space-3) 0; }
.hub-progress-bar__fill {
    height: 100%;
    background: var(--color-success);
    border-radius: var(--radius-full);
    transition: width 0.25s ease;
}

/* ── Hub hero banner ─────────────────────────────────────────── */

.hub-hero {
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-blue) 100%);
    border-radius: var(--radius-lg);
    padding: 28px 28px 28px 24px;
    color: var(--color-on-blue);
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: var(--space-4);
}

.hub-hero--purple {
    background: linear-gradient(135deg, var(--color-purple-dark) 0%, var(--color-purple) 100%);
}

.hub-hero__icon {
    flex-shrink: 0;
    opacity: 0.85;
    margin-top: 2px;
}

.hub-hero__text { flex: 1; }

.hub-hero__title {
    font-size: 1.375rem;
    font-weight: 800;
    margin: 0 0 8px;
    line-height: 1.2;
    color: var(--color-on-navy);
}

.hub-hero__body {
    font-size: 0.9375rem;
    line-height: 1.65;
    opacity: 0.9;
    margin: 0 0 20px;
}

.hub-hero__cta {
    display: inline-block;
    background: color-mix(in srgb, var(--color-card) 82%, transparent);
    border: 1px solid rgba(var(--color-on-navy-rgb), 0.6);
    color: var(--color-heading);
    font-weight: 700;
    font-size: 0.875rem;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: background 0.15s;
}

.hub-hero__cta:hover { background: color-mix(in srgb, var(--color-card) 95%, transparent); }

@media (max-width: 700px) {
    .hub-hero { flex-direction: column; gap: 12px; }
}

/* ── Hub "How it works" steps card ──────────────────────────── */

.hub-how-it-works {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.hub-how-it-works__body {
    padding: 20px 24px 24px;
}

.hub-how-it-works__title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-heading);
    margin: 0 0 18px;
}

.hub-steps {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.hub-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hub-step-connector {
    width: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hub-step-connector::before {
    content: '→';
    font-size: 1rem;
    color: var(--color-muted);
}

.hub-step__num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-navy);
    color: var(--color-on-navy);
    font-size: 0.8125rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.hub-hero--purple ~ * .hub-step__num,
.hub-steps--purple .hub-step__num {
    background: var(--color-purple);
}

.hub-step__title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-heading);
    margin-bottom: 5px;
    line-height: 1.3;
}

.hub-step__body {
    font-size: 0.8125rem;
    color: var(--color-muted);
    line-height: 1.6;
}

@media (max-width: 700px) {
    .hub-steps { flex-direction: column; gap: var(--space-4); }
    .hub-step-connector { display: none; }
}

/* Vertical variant — for a "How it works" card living in a narrow sidebar
   column rather than the wide main column. Same steps, stacked. */
.hub-steps--vertical {
    flex-direction: column;
    gap: var(--space-4);
}

.hub-steps--vertical .hub-step-connector {
    display: none;
}

/* ── Employee picker (recipient selector) ────────────────────── */

.emp-picker-wrap {
    position: relative;
}

.emp-selected-card {
    display: none;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-blue-light);
    border: 1.5px solid var(--color-blue);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
}

.emp-selected-card.show { display: flex; }

.emp-sel-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-blue);
    color: var(--color-on-blue);
    font-size: 0.875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.emp-sel-avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.emp-sel-info { flex: 1; min-width: 0; }

.emp-sel-info__name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emp-sel-info__sub {
    font-size: 0.78rem;
    color: var(--color-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emp-picker-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    max-height: 260px;
    overflow-y: auto;
    display: none;
}

.emp-picker-dropdown.open { display: block; }

.emp-picker-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    transition: background 0.1s;
}

.emp-picker-option:hover { background: var(--color-surface); }

.emp-picker-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-blue-light);
    color: var(--color-link);
    font-size: 0.8125rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.emp-picker-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
}

.emp-picker-sub {
    font-size: 0.75rem;
    color: var(--color-muted);
}

.emp-dropdown-empty {
    padding: var(--space-4) var(--space-3);
    font-size: 0.875rem;
    color: var(--color-muted);
    text-align: center;
}

/* ── Geo region combobox ─────────────────────────────────────── */

.geo-combo { position: relative; }
.geo-combo__list {
    position: absolute;
    top: calc(100% + 2px);
    left: 0; right: 0;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(13,27,62,.12);
    max-height: 220px;
    overflow-y: auto;
    z-index: 300;
    padding: var(--space-1) 0;
    margin: 0;
    list-style: none;
}
.geo-combo__opt {
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
    cursor: pointer;
    color: var(--color-text);
}
.geo-combo__opt:hover,
.geo-combo__opt--active { background: var(--color-surface); }
.geo-combo__opt--empty {
    color: var(--color-muted);
    font-style: italic;
    cursor: default;
}
.geo-combo__opt--empty:hover { background: transparent; }

/* ── Toggle setting cards ────────────────────────────────────── */

.toggle-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
/* A form field right after a block of switches keeps a field's distance from it
   ("Post to the feed" under the award switches) */
.toggle-cards + .form-group { margin-top: var(--space-5); }

.toggle-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-card);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.toggle-card:has(input:checked) {
    border-color: var(--color-blue);
    background: var(--color-blue-light);
}

.toggle-card__icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-heading);
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-card:has(input:checked) .toggle-card__icon {
    background: rgba(var(--color-blue-rgb), 0.12);
    color: var(--color-link);
}

.toggle-card__body { flex: 1; min-width: 0; }

.toggle-card__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-heading);
    margin-bottom: 2px;
}

.toggle-card__desc {
    font-size: 0.8125rem;
    color: var(--color-muted);
    line-height: 1.4;
}

/* A toggle card whose radio/checkbox is visually hidden still shows keyboard focus */
.toggle-card:has(input:focus-visible) {
    outline: 2px solid var(--color-blue);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .toggle-cards { gap: 6px; }
}

/* ── Colour field: swatch picker + hex value, kept in sync by JS ── */
.color-field {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}
.color-field__swatch {
    flex: 0 0 44px;
    width: 44px;
    height: 36px;
    padding: 2px;
    cursor: pointer;
}
.color-field__hex {
    flex: 1 1 0;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-transform: uppercase;
}

/* ── Brand Colours (Company Settings) ────────────────────────── */
.brand-colors {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--space-6);
    align-items: start;
    margin-top: var(--space-4);
}
.brand-colors__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.brand-colors__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}
.brand-colors__fields:disabled { opacity: 0.55; }
.brand-colors__fields .form-group { margin: 0; }
.brand-colors__note {
    font-size: 0.8125rem;
    color: var(--color-muted);
    margin: var(--space-2) 0 0;
}
@media (max-width: 1100px) {
    .brand-colors { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .brand-colors__fields { grid-template-columns: 1fr; }
}

/* Miniature of the tenant app, painted with the chosen colours. Its theme
   tokens are set inline (Theme::tokens(..., true)) and swapped by JS. */
.brand-preview {
    /* The miniature always depicts light mode (its brand tokens are the
       light-mode set), so its neutrals stay light even when the admin
       is using dark mode. */
    --color-surface: #F8FAFC;
    --color-card:    #FFFFFF;
    --color-text:    #334155;
    --color-muted:   #64748B;
    --color-border:  #E2E8F0;
    color-scheme: light;
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    min-height: 264px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    font-size: 0.75rem;
    user-select: none;
}
.brand-preview__sidebar {
    background: var(--color-navy);
    padding: var(--space-3) var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.brand-preview__nav {
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    color: rgba(var(--color-sidebar-fg-rgb), 0.65);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brand-preview__nav.is-active {
    background: rgba(var(--color-nav-accent-rgb), 0.35);
    color: rgb(var(--color-sidebar-fg-rgb));
    font-weight: 600;
}
.brand-preview__main { display: flex; flex-direction: column; min-width: 0; }
.brand-preview__topbar {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    background: var(--color-topbar);
    border-bottom: 1px solid var(--color-border);
}
.brand-preview__logo { max-height: 22px; max-width: 110px; object-fit: contain; }
.brand-preview__tenant {
    font-weight: 700;
    color: var(--color-topbar-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brand-preview__icons {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-topbar-muted);
    flex-shrink: 0;
}
.brand-preview__user { color: var(--color-topbar-fg); font-weight: 500; }
.brand-preview__body {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.brand-preview__heading { font-size: 0.9375rem; font-weight: 700; color: var(--color-heading); }
.brand-preview .card { margin: 0; }
.brand-preview .card-header { padding: 8px 12px; }
.brand-preview .card-title { font-size: 0.75rem; }
.brand-preview .card-body { padding: var(--space-3); color: var(--color-text); }
.brand-preview__link { color: var(--color-link); text-decoration: underline; font-weight: 500; }
.brand-preview__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.brand-preview__actions .btn { pointer-events: none; }

/* ── Picker card grid (reusable selection cards) ─────────────── */
.pick-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.pick-card {
    position: relative;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-card);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    user-select: none;
}
.pick-card:hover {
    border-color: var(--color-blue);
    background: var(--color-blue-light);
}
.pick-card.is-selected {
    border-color: var(--color-blue);
    background: var(--color-blue-light);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-blue) 20%, transparent);
}
@media (max-width: 560px) { .pick-card-grid { grid-template-columns: 1fr; } }

/* ── Phone input: dial-code select + national number ─────────── */
/* The number goes under the dial code when the two no longer fit side by
   side (the number needs 150px to show in full), and both are full width on
   a phone */
.phone-input-wrap   { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: stretch; }
.phone-input__code  { flex: 0 1 170px; min-width: 0; }
.phone-input__number{ flex: 1 1 150px; min-width: 0; }
@media (max-width: 480px) {
    .phone-input__code { flex-basis: 100%; }
}

/* ── Message toolbar (above textarea) ────────────────────────── */

.msg-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-1);
}

.msg-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-heading);
}

/* ── AI assist button ────────────────────────────────────────── */

.ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-purple, #7c3aed);
    background: var(--color-purple-bg, rgba(124,58,237,0.08));
    border: 1px solid rgba(124, 58, 237, 0.25);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.ai-btn:hover {
    background: rgba(124, 58, 237, 0.14);
    border-color: rgba(124, 58, 237, 0.4);
}

/* ── AI modal (--hidden toggle pattern) ──────────────────────── */

.ai-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.ai-modal--hidden { display: none; }

.ai-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}

.ai-modal__box {
    position: relative;
    z-index: 1;
    background: var(--color-card);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 540px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    overflow: hidden;
}

.ai-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.ai-modal__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-heading);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ai-modal__title-icon {
    color: var(--color-purple, #7c3aed);
}

.ai-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}

.ai-modal__close:hover {
    background: var(--color-surface);
    color: var(--color-text);
}

.ai-modal__hint {
    padding: var(--space-4) var(--space-5) 0;
    font-size: 0.8125rem;
    color: var(--color-muted);
    line-height: 1.5;
}

.ai-modal__notes-group {
    padding: var(--space-3) var(--space-5);
}

.ai-modal__footer {
    padding: var(--space-3) var(--space-5) var(--space-4);
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.ai-result {
    margin: 0 var(--space-5) var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-text);
}

.ai-result--hidden { display: none; }

.ai-result__text { margin: 0; }

.ai-error {
    margin: 0 var(--space-5) var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    color: var(--color-error-dark);
}

.ai-error--hidden { display: none; }

.ai-use-btn--hidden { display: none; }

/* ── Module section header (within user-facing module pages) ─── */

.module-section-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.module-section-hd__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-heading);
    margin: 0;
}

/* ── Full-width primary action button ────────────────────────── */

.submit-btn {
    width: 100%;
    justify-content: center;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 0.9375rem;
    margin-top: var(--space-5);
}

/* ── Empty / no-results inline message ──────────────────────── */

.no-results {
    font-size: 0.875rem;
    color: var(--color-muted);
    padding: var(--space-3) 0;
}

/* ── Page header (title + subtitle + actions row) ────────────── */

.page-hd {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}

.page-hd__title {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--color-heading);
    margin: 0 0 4px;
    line-height: 1.2;
}

.page-hd__sub {
    font-size: 0.875rem;
    color: var(--color-muted);
    margin: 0;
}

.page-hd__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* ── Navigation tile grid (help, dashboard quick nav) ─────────── */

.nav-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.nav-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    cursor: pointer;
}

.nav-tile:hover {
    border-color: var(--color-blue);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.10);
}

.nav-tile__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--color-blue-light);
    color: var(--color-link);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-tile__title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-heading);
    margin: 0;
}

.nav-tile__desc {
    font-size: 0.8125rem;
    color: var(--color-muted);
    line-height: 1.4;
    margin: 0;
}


/* ── Learning cards (shared: learning + education modules) ───── */

.learn-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.learn-card:last-child { border-bottom: none; }
.learn-card:hover { background: var(--color-surface); }

.learn-card__icon-wrap {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--color-blue-light);
    color: var(--color-link);
    display: flex;
    align-items: center;
    justify-content: center;
}

.learn-card__body { flex: 1; min-width: 0; }

.learn-card__title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-text);
    margin: 0 0 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.learn-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    font-size: 0.78rem;
    color: var(--color-muted);
    margin: 0 0 2px;
}
.learn-card__meta-sep { opacity: 0.4; }

.learn-card__desc {
    font-size: 0.78rem;
    color: var(--color-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* A person in a search result row (Support Hub and Social Feed search): round photo or initials */
.hub-sr-avatar { border-radius: 50%; overflow: hidden; font-size: 0.75rem; font-weight: 700; }
.hub-sr-avatar img { width: 100%; height: 100%; object-fit: cover; }

.learn-card__chevron {
    flex-shrink: 0;
    color: var(--color-muted);
    margin-top: 2px;
}

.learn-card__cta {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    align-self: center;
}
.learn-card__cta--continue {
    color: var(--color-link);
    background: var(--color-blue-light);
}
.learn-card__cta--done {
    color: var(--color-success);
    background: var(--color-success-bg);
}

/* ── Learning type badges ─────────────────────────────────────── */

.learn-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}
.learn-badge--internal      { background: var(--color-blue-light);       color: var(--color-link); }
.learn-badge--certification { background: var(--color-warning-accent);   color: var(--color-warning-dark); }
.learn-badge--external      { background: var(--color-success-bg);       color: var(--color-success-dark); }

/* ── Learning status indicators ──────────────────────────────── */

.learn-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 500;
}
.learn-status--enrolled  { color: var(--color-link); }
.learn-status--completed { color: var(--color-success); }

.learn-status__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* ── Category headings in course lists ───────────────────────── */

.learn-cat-heading {
    padding: var(--space-2) var(--space-4) var(--space-1);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-muted);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.learn-cat-heading:not(:first-child) { border-top: 1px solid var(--color-border); }

/* ── Learning empty state ────────────────────────────────────── */

.learn-empty {
    text-align: center;
    padding: var(--space-10) var(--space-5);
    color: var(--color-muted);
}
.learn-empty__icon {
    display: block;
    margin: 0 auto var(--space-4);
    color: var(--color-border);
}
.learn-empty__heading {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--space-2);
}
.learn-empty__sub {
    font-size: 0.875rem;
    margin: 0 0 var(--space-5);
}

/* ── Shared platform modal ──────────────────────────────────────────────────
   Use these classes for any modal/dialog across the platform.
   Available in ALL layouts (style.css is universal).
   The header is the light card header (.card-header / .card-title): light
   headers everywhere, dialogs included -- never a dark or navy band.
   ─────────────────────────────────────────────────────────────────────────── */
.app-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(13, 27, 62, 0.55);
    backdrop-filter: blur(3px);
    z-index: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.app-modal {
    background: var(--color-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 64px rgba(13, 27, 62, 0.22);
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 2rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: appModalIn 0.18s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
/* A wider dialog, for content such as a photo */
.app-modal--wide { max-width: min(960px, 100%); }
/* The "are you sure?" box (rConfirm, dashboard.js) opens above any other dialog */
.app-modal-backdrop--top { z-index: 9000; }
@keyframes appModalIn {
    from { transform: scale(0.93) translateY(6px); opacity: 0; }
    to   { transform: scale(1)    translateY(0);   opacity: 1; }
}
.app-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-card);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.app-modal__title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    margin: 0;
    line-height: 1.3;
}
.app-modal__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-muted);
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.app-modal__close:hover {
    color: var(--color-heading);
    border-color: var(--color-muted);
    background: var(--color-surface);
}
.app-modal__body {
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.app-modal__body .form-group { margin-bottom: 0; }
/* A form inside the body spaces its fields the way the body does */
.app-modal__body > form { display: flex; flex-direction: column; gap: var(--space-4); }
.app-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}
.app-modal__error {
    font-size: 0.8125rem;
    color: var(--color-error);
    margin: 0;
}

/* ── Quick-generate type/category pills ──────────────────────────────────── */
.recog-tpl-groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    max-height: 160px;
    overflow-y: auto;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    scrollbar-width: thin;
}
.recog-tpl-group__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: var(--space-1);
}
.quick-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

.quick-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
}

.quick-pill:hover {
    border-color: var(--color-blue);
    background: var(--color-blue-light);
    color: var(--color-link);
}

.quick-pill svg {
    flex-shrink: 0;
    color: var(--color-purple, #7C3AED);
    opacity: 0.8;
}

/* ── Direct Message detail modal ─────────────────────────────────────────── */
.dm-detail-meta { display:none; } /* superseded by dm-detail-table */

.dm-detail-sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.dm-detail-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    font-size: 0.8125rem;
}
.dm-detail-table th {
    width: 120px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-muted);
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
    vertical-align: middle;
}
.dm-detail-table td {
    padding: var(--space-2) var(--space-4);
    color: var(--color-text);
    font-weight: 500;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.dm-detail-table tbody tr:last-child th,
.dm-detail-table tbody tr:last-child td { border-bottom: none; }
.dm-detail-body {
    white-space: pre-wrap;
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--color-text);
    padding: var(--space-4);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    min-height: 56px;
}
.dm-detail-section__hd {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-muted);
    margin-bottom: var(--space-2);
}
.dm-detail-sections .dm-detail-section__hd { margin-bottom: var(--space-2); }
.dm-rcpt-table {
    width: 100%;
    border-collapse: collapse;
}
.dm-rcpt-table th {
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-muted);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.dm-rcpt-table td {
    padding: var(--space-2) var(--space-3);
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.8125rem;
}
.dm-rcpt-table tbody tr:last-child td { border-bottom: none; }
.dm-rcpt-table__name { font-weight: 600; color: var(--color-text); }
.dm-rcpt-table__job  { font-size: 0.75rem; color: var(--color-muted); margin-top: 1px; }

/* ── Direct Message multi-recipient picker ───────────────────────────────── */
.dm-rcpt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 6px;
}
.dm-add-rcpt-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-link);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 0;
    margin-top: 2px;
    margin-bottom: 4px;
    opacity: 0.85;
    transition: opacity var(--transition-fast);
}
.dm-add-rcpt-btn:hover { opacity: 1; }
.dm-rcpt-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 6px 2px 3px;
    border-radius: var(--radius-full);
    background: var(--color-blue-light, rgba(59,130,246,.08));
    border: 1px solid var(--color-blue);
    font-size: 0.8rem;
    max-width: 200px;
}
.dm-rcpt-chip__avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-blue);
    color: var(--color-on-blue);
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.dm-rcpt-chip__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.dm-rcpt-chip__name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text);
}
.dm-rcpt-chip__rm {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-link);
    padding: 0;
    line-height: 1;
    opacity: 0.7;
}
.dm-rcpt-chip__rm:hover { opacity: 1; color: var(--color-error); }
.emp-picker-option.dm-opt-selected {
    background: var(--color-blue-light, rgba(59,130,246,.08));
}
.emp-picker-option.dm-opt-selected .emp-picker-name { color: var(--color-link); }
.dm-opt-check {
    margin-left: auto;
    padding-right: 4px;
    color: var(--color-link);
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Direct Message priority indicator ────────────────────────────────────── */
.dm-priority {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 3px;
    flex-shrink: 0;
    align-self: center;
}
.dm-priority--urgent { background: var(--color-error); }
.dm-priority--high   { background: var(--color-warning); }
.dm-priority--normal { display: none; }
.dm-priority--low    { background: var(--color-border); }

/* ── Inbox folder action buttons ─────────────────────────────────────────── */
.tbl-icon-btn.dm-flag-active           { color: var(--color-warning); }
.tbl-icon-btn.dm-flag-active svg       { fill: currentColor; }
.inbox-row--unread .dm-btn-mark-unread { display: none; }

/* ── Bulk action bar ──────────────────────────────────────────────────────── */
.dm-bulk-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; background:var(--color-navy); color:var(--color-on-navy); border-radius:var(--radius); margin-bottom:8px; }
.dm-bulk-bar .btn { border-color:rgba(var(--color-on-navy-rgb),0.35); color:var(--color-on-navy); }
.dm-bulk-bar .btn:hover { background:rgba(var(--color-on-navy-rgb),0.12); }
.inbox-row--selected > td { background-color:var(--color-surface); }

/* ── Direct Message attachment UI ─────────────────────────────────────────── */
.dm-drop-zone {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-size: 0.82rem;
    color: var(--color-muted);
    flex-wrap: wrap;
}
.dm-drop-zone--over {
    border-color: var(--color-blue);
    background: var(--color-blue-light, rgba(59,130,246,.06));
    color: var(--color-link);
}
.dm-drop-zone svg { flex-shrink: 0; color: var(--color-muted); }
.dm-file-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.dm-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 10px;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-size: 0.78rem;
    color: var(--color-text);
    max-width: 220px;
}
.dm-file-chip__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.dm-file-chip__size { color: var(--color-muted); white-space: nowrap; }
.dm-file-chip__rm {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-muted);
    padding: 0;
    line-height: 1;
}
.dm-file-chip__rm:hover { color: var(--color-error); }
.dm-attach-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: var(--space-3);
}
.dm-attach-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    padding: 4px 0;
}
.dm-attach-item svg { flex-shrink: 0; color: var(--color-muted); }
.dm-attach-item a  { color: var(--color-link); text-decoration: none; }
.dm-attach-item a:hover { text-decoration: underline; }
.dm-attach-item__size { color: var(--color-muted); }
.dm-char-count {
    text-align: right;
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-top: 3px;
}
.dm-char-count--warn { color: var(--color-warning, #d97706); }
.dm-char-count--over { color: var(--color-error); }
/* ── Leaderboard rank ────────────────────────────────────────────────────── */
.lb-col-rank {
    width: 48px;
    text-align: center;
    padding-right: 0;
}
.lb-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--color-neutral-bg);
    color: var(--color-muted);
}
.lb-rank--gold   { background: var(--color-warning-accent); color: var(--color-warning-dark); }
.lb-rank--silver { background: var(--color-neutral-bg); color: var(--color-neutral); }
.lb-rank--bronze { background: #fdf0e7; color: #7c3b1e; }
.lb-row--podium td { background: transparent; }
.lb-row--podium:first-child td { font-weight: 500; }
.lb-row--me td { background: var(--color-blue-light); }
/* A badge beside a name on a leaderboard (Peer Recognition, Ideas, Education) */
.lb-badge-icon { display: inline-flex; width: 14px; height: 14px; margin-left: 4px; color: var(--color-warning-dark); vertical-align: -2px; cursor: default; }
.lb-badge-icon svg { width: 14px; height: 14px; }
/* "Your rank" above a module leaderboard */
.lb-my-rank { display: flex; align-items: center; gap: var(--space-4); }
.lb-my-rank__num { min-width: 2.5rem; text-align: center; font-size: 1.5rem; font-weight: 700; color: var(--color-link); }
.lb-pts {
    font-weight: 700;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

/* ── Colleague picker (public/js/colleague-picker.js) ─────────
   A search field whose list opens on focus and narrows as you type.
   Same look as the points-transfer recipient list it grew from. */
.cpick { position: relative; }
.cpick__menu {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 300;
    max-height: 280px;
    overflow-y: auto;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    scrollbar-width: thin;
}
.cpick__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-surface);
}
.cpick__option:last-child { border-bottom: none; }
.cpick__option:hover,
.cpick__option--active { background: var(--color-surface); }
.cpick__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-blue-light);
    color: var(--color-link);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}
.cpick__avatar img { width: 100%; height: 100%; object-fit: cover; }
.cpick__text { display: flex; flex-direction: column; min-width: 0; }
.cpick__name { font-size: 0.875rem; font-weight: 600; color: var(--color-heading); line-height: 1.25; }
.cpick__meta { font-size: 0.775rem; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpick__empty { padding: 10px 14px; font-size: 0.8125rem; color: var(--color-muted); }

/* -- Badge shelf (partials/dashboard/badge-shelf.php): every module's badges --
   Round line-icon badges, earned in the accent colour, the rest greyed out. */
.badge-shelf { display: flex; flex-wrap: wrap; gap: 10px; }
.badge-shelf__item { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; text-align: center; }
.badge-shelf__icon {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-warning-bg); color: var(--color-warning-dark);
}
.badge-shelf__icon svg { width: 22px; height: 22px; }
.badge-shelf__name { font-size: 0.6875rem; font-weight: 600; color: var(--color-text); line-height: 1.3; }
.badge-shelf__item--locked .badge-shelf__icon { background: var(--color-surface); color: var(--color-border-dark); }
.badge-shelf__item--locked .badge-shelf__name { color: var(--color-muted); }

/* -- Reports (manage/reports/*: partials/reports/*, public/js/reports.js) --
   Headline figures reuse .dash-stats/.dash-stat-card with a change line under
   the value; charts sit in ordinary cards; module reports are .report-card
   links (crud.css) with their headline figure. */
.report-filters { align-items: center; margin-bottom: var(--space-4); }
.report-filters__note { margin: 0; }
/* Up to six figures in a row on a wide screen, otherwise rows of three or
   four (report-kpis--N for N of them), two on a narrow one. .dash-stats
   (dashboard.css, loaded later) sets its own columns, hence the two classes. */
.dash-stats.report-kpis { margin-bottom: var(--space-5); grid-template-columns: repeat(var(--report-kpi-cols, 4), minmax(0, 1fr)); }
.report-kpis--1 { --report-kpi-cols: 1; }
.report-kpis--2 { --report-kpi-cols: 2; }
.report-kpis--3 { --report-kpi-cols: 3; }
.report-kpis--4 { --report-kpi-cols: 4; }
.report-kpis--5 { --report-kpi-cols: 5; }
.report-kpis--6 { --report-kpi-cols: 6; }
.report-kpis--7,
.report-kpis--8 { --report-kpi-cols: 4; }
.dash-stat-card__unit { font-size: 0.875rem; font-weight: 600; letter-spacing: 0; color: var(--color-muted); }
/* Each tile takes four rows of the grid (label, value, detail, change), so
   a label that wraps doesn't push its value below its neighbours' */
.report-kpis .dash-stat-card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: var(--space-2);
    align-content: start;
    padding: var(--space-4) var(--space-5);
}
.report-kpis .dash-stat-card__label  { grid-row: 1; align-self: end; }
.report-kpis .dash-stat-card__value  { grid-row: 2; }
.report-kpis .dash-stat-card__sub    { grid-row: 3; }
.report-kpis .dash-stat-card__change { grid-row: 4; align-self: start; }
.report-kpis .dash-stat-card__value { font-size: 1.5rem; }
.dash-stat-card__sub { font-size: 0.8125rem; color: var(--color-muted); }
/* The change from the previous period: an arrow and words, coloured only as a second cue */
.dash-stat-card__change { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 0.75rem; font-weight: 600; color: var(--color-muted); }
.dash-stat-card__change svg { flex-shrink: 0; }
.dash-stat-card__change--good { color: var(--color-success-dark); }
.dash-stat-card__change--bad  { color: var(--color-error); }
.report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
/* Charts: the canvas fills the box, axes included; a ranked (hbar) chart's
   height is set from its rows by reports.js */
.report-chart { position: relative; height: 260px; }
.report-chart-card--wide .report-chart { height: 300px; }
.report-chart-card .card-header { gap: var(--space-3); }
.report-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
.report-card__body { min-width: 0; }
.report-card__figure { margin: var(--space-2) 0 0; font-size: 0.875rem; color: var(--color-text); }
.report-card__value { font-size: 1.25rem; font-weight: 800; color: var(--color-heading); }
.report-rank__who { display: flex; flex-direction: column; min-width: 0; padding-right: var(--space-3); }
.report-rank__name { color: var(--color-text); font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .report-grid { grid-template-columns: 1fr; } }
@media (max-width: 1599px) { .report-kpis--5, .report-kpis--6 { --report-kpi-cols: 3; } }
@media (max-width: 1100px) { .report-kpis--4, .report-kpis--7, .report-kpis--8 { --report-kpi-cols: 2; } }
@media (max-width: 700px)  {
    .report-kpis--3, .report-kpis--5, .report-kpis--6 { --report-kpi-cols: 2; }
    .report-kpis .dash-stat-card__value { font-size: 1.375rem; }
}