/* ============================================================
   Schillers Connect — Design System v3 ("A′ · Lora")
   Calm and official without being square: ink and a deep green on
   a pale grey-green ground, Lora for headings, Nunito Sans for text,
   rounded surfaces that float on the ground instead of sitting in
   boxes. Mobile first; every shape below has to read on a 360px phone.
   ============================================================ */

:root {
    /* Ground and surfaces */
    --sc-ground: #F4F6F5;
    --sc-surface: #FFFFFF;
    --sc-line: #DDE4E1;
    --sc-line-strong: #C7D1CD;

    /* Ink */
    --sc-ink: #111A1F;
    --sc-ink-2: #3B4A52;
    --sc-muted: #5E6E76;
    --sc-on-dark: #C9D3D0;

    /* Brand green */
    --sc-brand: #0B5D4B;
    --sc-brand-hover: #08463A;
    --sc-brand-soft: #E3EFEB;
    --sc-brand-tint: #F0F6F3;
    --sc-brand-text: #0B3A30;

    /* Signals */
    --sc-amber: #B7791F;
    --sc-amber-soft: #FFF4DD;
    --sc-amber-tint: #FFF8EA;
    --sc-amber-text: #7A4F00;
    --sc-danger: #B42318;
    --sc-danger-soft: #FDECEA;
    --sc-danger-text: #8A1F11;
    --sc-info: #2C5F7F;
    --sc-info-soft: #E6EFF5;
    --sc-info-text: #173F57;

    /* Type */
    --sc-serif: "Lora", Georgia, "Times New Roman", serif;
    --sc-sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --sc-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Shape */
    --sc-r-sm: 10px;
    --sc-r-btn: 12px;
    --sc-r-tile: 16px;
    --sc-r-card: 22px;
    --sc-r-panel: 28px;
    --sc-shadow-sm: 0 1px 2px rgba(17, 26, 31, .05);
    --sc-shadow-md: 0 1px 2px rgba(17, 26, 31, .06), 0 10px 28px -14px rgba(17, 26, 31, .18);
    --sc-shadow-lg: 0 20px 40px -18px rgba(17, 26, 31, .45);
    --sc-wrap: 1240px;
    --sc-gutter: 16px;

    /* Older names still used by a few templates and scripts. They now point
       at the palette above instead of the retired navy/blue/yellow one. */
    --sc-navy: var(--sc-ink);
    --sc-navy-2: #1B2A31;
    --sc-primary: var(--sc-brand);
    --sc-primary-dark: var(--sc-brand-hover);
    --sc-primary-darker: var(--sc-brand-text);
    --sc-primary-light: var(--sc-brand-soft);
    --sc-accent: var(--sc-amber);
    --sc-accent-dark: var(--sc-amber-text);
    --sc-teal: var(--sc-brand);
    --sc-bg: var(--sc-ground);
    --sc-border: var(--sc-line);

    /* Bootstrap, so its utilities and components speak the same palette */
    --bs-font-sans-serif: var(--sc-sans);
    --bs-body-font-family: var(--sc-sans);
    --bs-font-monospace: var(--sc-mono);
    --bs-body-color: var(--sc-ink);
    --bs-body-color-rgb: 17, 26, 31;
    --bs-body-bg: var(--sc-ground);
    --bs-emphasis-color: var(--sc-ink);
    --bs-secondary-color: var(--sc-muted);
    --bs-tertiary-bg: var(--sc-ground);
    --bs-heading-color: var(--sc-ink);
    --bs-border-color: var(--sc-line);
    --bs-border-color-translucent: rgba(17, 26, 31, .1);
    --bs-border-radius: var(--sc-r-btn);
    --bs-border-radius-sm: var(--sc-r-sm);
    --bs-border-radius-lg: var(--sc-r-tile);
    --bs-border-radius-xl: var(--sc-r-card);
    --bs-border-radius-xxl: var(--sc-r-panel);
    --bs-link-color: var(--sc-brand);
    --bs-link-color-rgb: 11, 93, 75;
    --bs-link-hover-color: var(--sc-brand-hover);
    --bs-link-hover-color-rgb: 8, 70, 58;
    --bs-focus-ring-color: rgba(11, 93, 75, .25);

    --bs-primary: #0B5D4B;
    --bs-primary-rgb: 11, 93, 75;
    --bs-primary-text-emphasis: #0B3A30;
    --bs-primary-bg-subtle: #E3EFEB;
    --bs-primary-border-subtle: #C3DCD3;
    --bs-success: #0B5D4B;
    --bs-success-rgb: 11, 93, 75;
    --bs-success-text-emphasis: #0B3A30;
    --bs-success-bg-subtle: #E3EFEB;
    --bs-success-border-subtle: #C3DCD3;
    --bs-warning: #B7791F;
    --bs-warning-rgb: 183, 121, 31;
    --bs-warning-text-emphasis: #7A4F00;
    --bs-warning-bg-subtle: #FFF4DD;
    --bs-warning-border-subtle: #F3DDB0;
    --bs-danger: #B42318;
    --bs-danger-rgb: 180, 35, 24;
    --bs-danger-text-emphasis: #8A1F11;
    --bs-danger-bg-subtle: #FDECEA;
    --bs-danger-border-subtle: #F6C9C3;
    --bs-info: #2C5F7F;
    --bs-info-rgb: 44, 95, 127;
    --bs-info-text-emphasis: #173F57;
    --bs-info-bg-subtle: #E6EFF5;
    --bs-info-border-subtle: #C5D8E5;
    --bs-secondary-rgb: 94, 110, 118;
    --bs-secondary-text-emphasis: #3B4A52;
    --bs-secondary-bg-subtle: #EAEFED;
    --bs-secondary-border-subtle: #DDE4E1;
    --bs-light-rgb: 244, 246, 245;
    --bs-dark-rgb: 17, 26, 31;
}

@media (min-width: 576px) { :root { --sc-gutter: 24px; } }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    font-family: var(--sc-sans);
    color: var(--sc-ink);
    background: var(--sc-ground);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .fw-display {
    font-family: var(--sc-serif);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--sc-ink);
    text-wrap: balance;
}
h6, .h6 { font-family: var(--sc-sans); font-weight: 700; letter-spacing: 0; }

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--sc-serif);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.08;
}
.display-3 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); }
.display-4 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.25rem); }
.display-5 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
.display-6 { font-size: clamp(1.85rem, 1.4rem + 1.8vw, 2.6rem); line-height: 1.12; }
.lead { font-size: clamp(1.06rem, 1rem + .3vw, 1.19rem); line-height: 1.6; color: var(--sc-ink-2); }

.font-mono, code, kbd, samp { font-family: var(--sc-mono); }
code { color: var(--sc-ink-2); }

a { text-decoration: none; color: var(--sc-brand); }
a:hover { text-decoration: none; color: var(--sc-brand-hover); }

:focus-visible { outline: 3px solid rgba(11, 93, 75, .45); outline-offset: 2px; }

/* A wrapper the size of the design's frame: narrower than .container-xxl
   so lines stay readable, with a gutter that grows from phone to tablet. */
.sc-wrap { width: 100%; max-width: var(--sc-wrap); margin: 0 auto; padding-left: var(--sc-gutter); padding-right: var(--sc-gutter); }

/* Skip link for keyboard users */
.sc-skip {
    position: absolute; left: 12px; top: -60px; z-index: 2000;
    background: var(--sc-ink); color: #fff; padding: 10px 16px; border-radius: var(--sc-r-btn); font-weight: 700;
}
.sc-skip:focus { top: 12px; color: #fff; }

/* ---- Buttons ---- */
.btn {
    --bs-btn-padding-y: .66rem;
    --bs-btn-padding-x: 1.2rem;
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: var(--sc-r-btn);
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(11, 93, 75, .25);
    border-radius: var(--sc-r-btn);
    font-weight: 700;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-lg { --bs-btn-padding-y: .9rem; --bs-btn-padding-x: 1.6rem; --bs-btn-font-size: 1rem; border-radius: 14px; }
.btn-sm { --bs-btn-padding-y: .38rem; --bs-btn-padding-x: .8rem; --bs-btn-font-size: .86rem; border-radius: var(--sc-r-sm); }

.btn-primary, .btn-accent, .btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sc-brand);
    --bs-btn-border-color: var(--sc-brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sc-brand-hover);
    --bs-btn-hover-border-color: var(--sc-brand-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sc-brand-hover);
    --bs-btn-active-border-color: var(--sc-brand-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #7FA79D;
    --bs-btn-disabled-border-color: #7FA79D;
    box-shadow: 0 8px 20px -12px rgba(11, 93, 75, .7);
}

.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-light {
    --bs-btn-color: var(--sc-ink);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--sc-line-strong);
    --bs-btn-hover-color: var(--sc-brand-text);
    --bs-btn-hover-bg: var(--sc-brand-tint);
    --bs-btn-hover-border-color: var(--sc-brand);
    --bs-btn-active-color: var(--sc-brand-text);
    --bs-btn-active-bg: var(--sc-brand-soft);
    --bs-btn-active-border-color: var(--sc-brand);
    --bs-btn-disabled-color: var(--sc-muted);
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: var(--sc-line);
    border-width: 1.5px;
}
.btn-outline-primary { --bs-btn-color: var(--sc-brand-text); }

.btn-soft {
    --bs-btn-color: var(--sc-brand-text);
    --bs-btn-bg: var(--sc-brand-soft);
    --bs-btn-border-color: var(--sc-brand-soft);
    --bs-btn-hover-color: var(--sc-brand-text);
    --bs-btn-hover-bg: #D3E6DF;
    --bs-btn-hover-border-color: #D3E6DF;
    --bs-btn-active-bg: #C3DCD3;
    --bs-btn-active-border-color: #C3DCD3;
}

.btn-outline-success {
    --bs-btn-color: var(--sc-brand);
    --bs-btn-border-color: var(--sc-brand);
    --bs-btn-hover-bg: var(--sc-brand);
    --bs-btn-hover-border-color: var(--sc-brand);
    --bs-btn-active-bg: var(--sc-brand-hover);
    --bs-btn-active-border-color: var(--sc-brand-hover);
    border-width: 1.5px;
}
.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sc-amber);
    --bs-btn-border-color: var(--sc-amber);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #9A6416;
    --bs-btn-hover-border-color: #9A6416;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #8A5A12;
    --bs-btn-active-border-color: #8A5A12;
}
.btn-outline-warning {
    --bs-btn-color: var(--sc-amber-text);
    --bs-btn-border-color: var(--sc-amber);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sc-amber);
    --bs-btn-hover-border-color: var(--sc-amber);
    border-width: 1.5px;
}
.btn-danger {
    --bs-btn-bg: var(--sc-danger);
    --bs-btn-border-color: var(--sc-danger);
    --bs-btn-hover-bg: #921C13;
    --bs-btn-hover-border-color: #921C13;
    --bs-btn-active-bg: #7E1810;
    --bs-btn-active-border-color: #7E1810;
}
.btn-outline-danger {
    --bs-btn-color: var(--sc-danger-text);
    --bs-btn-border-color: #E7A59C;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sc-danger);
    --bs-btn-hover-border-color: var(--sc-danger);
    border-width: 1.5px;
}
.btn-outline-info {
    --bs-btn-color: var(--sc-info-text);
    --bs-btn-border-color: #9DBDD2;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sc-info);
    --bs-btn-hover-border-color: var(--sc-info);
    border-width: 1.5px;
}
.btn-outline-light {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, .45);
    --bs-btn-hover-color: var(--sc-ink);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    border-width: 1.5px;
}
.btn-white {
    --bs-btn-color: var(--sc-ink);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--sc-ink);
    --bs-btn-hover-bg: var(--sc-brand-soft);
    --bs-btn-hover-border-color: var(--sc-brand-soft);
}
.btn-link {
    --bs-btn-color: var(--sc-brand);
    --bs-btn-hover-color: var(--sc-brand-hover);
    --bs-btn-active-color: var(--sc-brand-hover);
    font-weight: 700;
}

/* ---- Utility colours ---- */
.text-primary { color: var(--sc-brand) !important; }
.text-success { color: var(--sc-brand) !important; }
.text-warning { color: var(--sc-amber-text) !important; }
.text-danger { color: var(--sc-danger-text) !important; }
.text-info { color: var(--sc-info) !important; }
.text-accent { color: var(--sc-amber-text) !important; }
.text-muted, .text-muted-2, .text-secondary { color: var(--sc-muted) !important; }
.text-ink-2 { color: var(--sc-ink-2) !important; }
.bg-accent { background-color: var(--sc-amber-soft) !important; }
.bg-primary { background-color: var(--sc-brand) !important; }
.bg-primary-soft { background-color: var(--sc-brand-soft) !important; }
.bg-brand-tint { background-color: var(--sc-brand-tint) !important; }
.bg-ink { background-color: var(--sc-ink) !important; }
.bg-light, .bg-light-2, .bg-body-tertiary { background-color: var(--sc-ground) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--sc-line) !important; }
.rounded-2xl { border-radius: var(--sc-r-card) !important; }
.rounded-3xl { border-radius: var(--sc-r-panel) !important; }
.shadow-sm { box-shadow: var(--sc-shadow-sm) !important; }
.shadow { box-shadow: var(--sc-shadow-md) !important; }
.shadow-lg { box-shadow: var(--sc-shadow-lg) !important; }

/* A flex item's default min-width is auto, so it refuses to shrink below its
   content: text-truncate never truncates, and a wide table stretches the page
   instead of scrolling inside .table-responsive. */
.min-width-0 { min-width: 0 !important; }

/* ---- Badges: status pills ----
   Status reads from a soft background and dark text — the solid fills were
   loud on a page full of them. Counters (rounded-pill) stay solid. */
.badge {
    --bs-badge-padding-x: .72em;
    --bs-badge-padding-y: .42em;
    --bs-badge-font-size: .78rem;
    --bs-badge-font-weight: 700;
    --bs-badge-border-radius: 999px;
    border-radius: 999px;
    letter-spacing: .01em;
}
.badge.bg-success, .badge.bg-success-subtle,
.badge.bg-primary-soft { background: var(--sc-brand-soft) !important; color: var(--sc-brand-text) !important; }
.badge.bg-warning, .badge.bg-warning-subtle,
.badge.bg-accent { background: var(--sc-amber-soft) !important; color: var(--sc-amber-text) !important; }
.badge.bg-danger, .badge.bg-danger-subtle { background: var(--sc-danger-soft) !important; color: var(--sc-danger-text) !important; }
.badge.bg-info, .badge.bg-info-subtle { background: var(--sc-info-soft) !important; color: var(--sc-info-text) !important; }
.badge.bg-secondary, .badge.bg-secondary-subtle { background: #E7ECEA !important; color: var(--sc-ink-2) !important; }
.badge.bg-light { background: var(--sc-ground) !important; color: var(--sc-muted) !important; border: 1px solid var(--sc-line); }
.badge.bg-primary { background: var(--sc-brand) !important; color: #fff !important; }
.badge.bg-dark { background: var(--sc-ink) !important; color: #fff !important; }
.badge.bg-white { background: #fff !important; }
/* Counters next to menu items and the bell */
.badge.rounded-pill.bg-danger { background: var(--sc-amber) !important; color: #fff !important; }
.badge.rounded-pill.bg-primary { background: var(--sc-brand) !important; color: #fff !important; }

/* ---- Alerts ---- */
.alert {
    --bs-alert-border-radius: var(--sc-r-tile);
    --bs-alert-padding-x: 1.1rem;
    --bs-alert-padding-y: .9rem;
    border: 0;
    border-radius: var(--sc-r-tile);
}
.alert-success { --bs-alert-bg: var(--sc-brand-tint); --bs-alert-color: var(--sc-brand-text); }
.alert-warning { --bs-alert-bg: var(--sc-amber-tint); --bs-alert-color: var(--sc-amber-text); }
.alert-danger { --bs-alert-bg: var(--sc-danger-soft); --bs-alert-color: var(--sc-danger-text); }
.alert-info, .alert-primary { --bs-alert-bg: var(--sc-info-soft); --bs-alert-color: var(--sc-info-text); }
.alert-secondary, .alert-light { --bs-alert-bg: var(--sc-ground); --bs-alert-color: var(--sc-ink-2); }
.alert .alert-link { color: inherit; text-decoration: underline; }

/* ---- Cards and panels ---- */
.card {
    --bs-card-border-width: 0;
    --bs-card-border-radius: var(--sc-r-card);
    --bs-card-inner-border-radius: var(--sc-r-card);
    --bs-card-cap-bg: transparent;
    --bs-card-bg: #fff;
    box-shadow: var(--sc-shadow-sm);
}
.card-header { border-bottom-color: var(--sc-line); font-weight: 700; }

.sc-card {
    background: #fff;
    border: 0;
    border-radius: var(--sc-r-card);
    box-shadow: var(--sc-shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease;
}
/* Only a card that is itself a link reacts to the pointer; a panel that merely
   holds a form used to jump under the cursor too. */
a.sc-card:hover, .sc-card.sc-card-link:hover { box-shadow: var(--sc-shadow-md); transform: translateY(-2px); }
.sc-card.border-0 { box-shadow: var(--sc-shadow-sm); }
.sc-card .card-header, .sc-card > .border-bottom { border-color: var(--sc-line) !important; }

.sc-tile {
    background: var(--sc-ground);
    border-radius: var(--sc-r-tile);
    padding: 14px 16px;
}
.sc-tile-amber { background: var(--sc-amber-tint); }
.sc-tile-danger { background: var(--sc-danger-soft); }
.sc-tile-brand { background: var(--sc-brand-tint); }

.sc-icon-badge {
    width: 44px; height: 44px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--sc-brand-soft); color: var(--sc-brand); font-size: 1.2rem;
}

/* ---- Forms ---- */
.form-label { font-weight: 700; font-size: .92rem; color: var(--sc-ink); margin-bottom: .35rem; }
.form-text { color: var(--sc-muted); }
.form-control, .form-select {
    border-radius: var(--sc-r-btn);
    border: 1px solid var(--sc-line-strong);
    padding: .68rem .95rem;
    color: var(--sc-ink);
    background-color: #fff;
}
.form-control-sm, .form-select-sm { padding: .4rem .7rem; border-radius: var(--sc-r-sm); }
.form-control-lg, .form-select-lg { padding: .85rem 1.05rem; border-radius: 14px; }
.form-control::placeholder { color: #8A989E; }
.form-control:focus, .form-select:focus {
    border-color: var(--sc-brand);
    box-shadow: 0 0 0 .22rem rgba(11, 93, 75, .14);
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--sc-ground); }
.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%233B4A52' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-check-input { border-color: var(--sc-line-strong); }
.form-check-input:checked { background-color: var(--sc-brand); border-color: var(--sc-brand); }
.form-check-input:focus { border-color: var(--sc-brand); box-shadow: 0 0 0 .22rem rgba(11, 93, 75, .18); }
.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230B5D4B'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-range::-webkit-slider-thumb { background-color: var(--sc-brand); }
.form-range::-moz-range-thumb { background-color: var(--sc-brand); }
.input-group-text { background: var(--sc-ground); border-color: var(--sc-line-strong); border-radius: var(--sc-r-btn); }
.invalid-feedback { color: var(--sc-danger-text); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--sc-danger); }
.was-validated .form-control:valid, .form-control.is-valid { border-color: var(--sc-brand); }

/* Residence-status radio cards: the `p-3` utility overrides `.form-check`'s
   own `padding-left`, which breaks Bootstrap's radio negative-margin math
   and makes the circle poke out past the card's left edge. Restore it. */
.residence-option { padding-left: 2.75rem !important; border-radius: var(--sc-r-tile) !important; }
.residence-option .form-check-input { margin-left: -1.75rem; margin-top: .3rem; }

/* ---- Tables ---- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--sc-ink);
    --bs-table-border-color: var(--sc-line);
    --bs-table-striped-bg: rgba(17, 26, 31, .025);
    --bs-table-hover-bg: var(--sc-brand-tint);
    margin-bottom: 0;
}
.table > thead > tr > th, .table > thead > tr > td {
    color: var(--sc-muted); font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    border-bottom-color: var(--sc-line); white-space: nowrap;
}
.table-light, .table > thead.table-light > tr > th {
    --bs-table-bg: var(--sc-ground);
    --bs-table-color: var(--sc-muted);
    --bs-table-border-color: var(--sc-line);
}
.table td, .table th { vertical-align: middle; }
.table-responsive { border-radius: inherit; }

/* Legacy table style (kept for compatibility) */
.sc-table th { background: var(--sc-ground); color: var(--sc-muted); }

/* Admin tables wide enough to scroll would otherwise park their buttons in the
   one column nobody sees. Pinning the last column to the right edge keeps every
   row actionable without scrolling first. */
.sc-sticky-actions td:last-child,
.sc-sticky-actions th:last-child {
    position: sticky;
    right: 0;
    background: #fff;
    box-shadow: -10px 0 12px -10px rgba(17, 26, 31, .18);
}
.sc-sticky-actions thead th:last-child { background: var(--bs-table-bg, #fff); }
.sc-sticky-actions .btn {
    --bs-btn-padding-x: .5rem;
    --bs-btn-padding-y: .3rem;
    border-radius: var(--sc-r-sm);
    box-shadow: none;
    line-height: 1.2;
}

/* ---- Navs, lists, menus ---- */
.nav-pills {
    --bs-nav-pills-border-radius: var(--sc-r-btn);
    --bs-nav-pills-link-active-bg: var(--sc-brand);
    --bs-nav-pills-link-active-color: #fff;
}
.nav-pills .nav-link { color: var(--sc-ink-2); font-weight: 700; }
.nav-tabs {
    --bs-nav-tabs-border-color: var(--sc-line);
    --bs-nav-tabs-link-active-color: var(--sc-ink);
    --bs-nav-tabs-link-active-border-color: var(--sc-line) var(--sc-line) #fff;
    --bs-nav-tabs-border-radius: var(--sc-r-btn);
}
.nav-tabs .nav-link { color: var(--sc-muted); font-weight: 700; }
.nav-link { color: var(--sc-brand); }

.list-group {
    --bs-list-group-border-color: var(--sc-line);
    --bs-list-group-border-radius: var(--sc-r-tile);
    --bs-list-group-active-bg: var(--sc-brand);
    --bs-list-group-active-border-color: var(--sc-brand);
    --bs-list-group-action-hover-bg: var(--sc-brand-tint);
}

.dropdown-menu {
    --bs-dropdown-border-width: 0;
    --bs-dropdown-border-radius: var(--sc-r-tile);
    --bs-dropdown-inner-border-radius: var(--sc-r-tile);
    --bs-dropdown-box-shadow: var(--sc-shadow-md);
    --bs-dropdown-link-color: var(--sc-ink);
    --bs-dropdown-link-hover-bg: var(--sc-brand-tint);
    --bs-dropdown-link-hover-color: var(--sc-brand-text);
    --bs-dropdown-link-active-bg: var(--sc-brand-soft);
    --bs-dropdown-link-active-color: var(--sc-brand-text);
    --bs-dropdown-divider-bg: var(--sc-line);
    box-shadow: 0 1px 2px rgba(17, 26, 31, .06), 0 18px 40px -16px rgba(17, 26, 31, .28);
    padding: .4rem;
}
.dropdown-item { border-radius: var(--sc-r-sm); }

.pagination {
    --bs-pagination-color: var(--sc-ink-2);
    --bs-pagination-border-color: var(--sc-line);
    --bs-pagination-hover-color: var(--sc-brand-text);
    --bs-pagination-hover-bg: var(--sc-brand-tint);
    --bs-pagination-hover-border-color: var(--sc-line);
    --bs-pagination-focus-color: var(--sc-brand-text);
    --bs-pagination-focus-box-shadow: 0 0 0 .22rem rgba(11, 93, 75, .18);
    --bs-pagination-active-bg: var(--sc-brand);
    --bs-pagination-active-border-color: var(--sc-brand);
    --bs-pagination-border-radius: var(--sc-r-sm);
    gap: 4px;
}
.page-link { border-radius: var(--sc-r-sm) !important; font-weight: 700; }
.page-item .page-link { margin-left: 0 !important; }

.progress, .progress-stacked {
    --bs-progress-bg: var(--sc-line);
    --bs-progress-bar-bg: var(--sc-brand);
    --bs-progress-border-radius: 999px;
}

.modal {
    --bs-modal-border-width: 0;
    --bs-modal-border-radius: var(--sc-r-card);
    --bs-modal-inner-border-radius: var(--sc-r-card);
    --bs-modal-header-border-color: var(--sc-line);
    --bs-modal-footer-border-color: var(--sc-line);
    --bs-modal-box-shadow: var(--sc-shadow-lg);
}
.offcanvas { --bs-offcanvas-border-width: 0; }

.accordion {
    --bs-accordion-border-color: var(--sc-line);
    --bs-accordion-border-radius: var(--sc-r-tile);
    --bs-accordion-inner-border-radius: var(--sc-r-tile);
    --bs-accordion-active-bg: var(--sc-brand-tint);
    --bs-accordion-active-color: var(--sc-brand-text);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .22rem rgba(11, 93, 75, .18);
}
.accordion-item.sc-card { border: 0; border-radius: var(--sc-r-tile) !important; overflow: hidden; }
.accordion-button { font-family: var(--sc-sans); font-weight: 700; color: var(--sc-ink); background: #fff; box-shadow: none !important; }
.accordion-button:not(.collapsed) { background: var(--sc-brand-tint); color: var(--sc-brand-text); }

.tooltip { --bs-tooltip-bg: var(--sc-ink); --bs-tooltip-border-radius: var(--sc-r-sm); font-family: var(--sc-sans); }

hr { border-color: var(--sc-line); opacity: 1; }

/* ============================================================
   Public site
   ============================================================ */

/* Top strip: who runs the platform, and the language switch */
.sc-topstrip { background: var(--sc-ink); color: var(--sc-on-dark); font-size: .82rem; }
.sc-topstrip .sc-wrap {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    gap: 6px 20px; padding-top: 7px; padding-bottom: 7px;
}
.sc-lang { display: inline-flex; gap: 4px; font-size: .75rem; font-weight: 700; }
.sc-lang a {
    color: var(--sc-on-dark); padding: 3px 10px; border-radius: 999px; line-height: 1.4;
}
.sc-lang a:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.sc-lang a[aria-current="true"] { background: #fff; color: var(--sc-ink); }
.sc-lang-light a { color: var(--sc-ink-2); }
.sc-lang-light a:hover { color: var(--sc-ink); background: var(--sc-ground); }
.sc-lang-light a[aria-current="true"] { background: var(--sc-ink); color: #fff; }

/* Floating header */
.sc-header-zone { position: sticky; top: 0; z-index: 1030; padding-top: 12px; pointer-events: none; }
.sc-header-zone > * { pointer-events: auto; }
.sc-navbar {
    background: rgba(255, 255, 255, .97);
    border-radius: 18px;
    box-shadow: var(--sc-shadow-md);
    padding: 8px 8px 8px 12px;
    transition: box-shadow .25s ease;
}
.sc-navbar.scrolled { box-shadow: 0 1px 2px rgba(17, 26, 31, .08), 0 16px 34px -16px rgba(17, 26, 31, .3); }
.sc-navbar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.sc-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--sc-ink); flex: none; }
.sc-brand:hover { color: var(--sc-ink); }
.sc-brand-mark {
    width: 38px; height: 38px; border-radius: 12px; background: var(--sc-brand); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--sc-serif); font-weight: 700; font-size: .95rem; flex: none;
}
a.sc-brand-mark:hover { color: #fff; background: var(--sc-brand-hover); }
.sc-brand-name { font-family: var(--sc-serif); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; white-space: nowrap; }
@media (min-width: 576px) { .sc-brand-name { font-size: 1.3rem; } }
/* Kept for the few places that still print the old wordmark */
.navbar-brand { font-family: var(--sc-serif); font-weight: 700; letter-spacing: -0.01em; }
.navbar-brand .brand-dot { color: var(--sc-brand); }

.sc-nav { display: none; align-items: center; gap: 2px; font-size: .95rem; font-weight: 700; }
.sc-nav a, .sc-nav-login {
    color: var(--sc-ink); padding: 10px 12px; border-radius: var(--sc-r-sm); font-weight: 700;
}
.sc-nav a:hover, .sc-nav-login:hover { background: var(--sc-ground); color: var(--sc-ink); }
.sc-nav a[aria-current="page"] { background: var(--sc-brand-soft); color: var(--sc-brand-text); }
.sc-header-actions { display: flex; align-items: center; gap: 6px; }
.sc-header-cta { display: none; }
.sc-header-login { display: none; }
.sc-menu-btn {
    width: 46px; height: 46px; border: 0; border-radius: var(--sc-r-btn);
    background: var(--sc-brand-soft); color: var(--sc-brand-text);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem;
}
.sc-menu-btn:hover { background: #D3E6DF; }
.sc-menu-btn[aria-expanded="true"] .bi-list::before { content: "\F62A"; } /* bi-x-lg */

@media (min-width: 576px) { .sc-header-cta { display: inline-flex; } }
@media (min-width: 1200px) {
    .sc-nav { display: flex; }
    .sc-header-login { display: inline-flex; }
    .sc-menu-btn { display: none; }
    .sc-navbar { padding: 10px 10px 10px 14px; }
}

/* Compact menu that opens inside the floating header */
.sc-menu { padding: 10px 4px 6px; }
.sc-menu-links { display: grid; gap: 2px; margin: 0 0 12px; padding: 0; list-style: none; }
.sc-menu-links a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 12px; border-radius: var(--sc-r-btn); color: var(--sc-ink); font-weight: 700; font-size: 1.02rem;
}
.sc-menu-links a:hover { background: var(--sc-ground); }
.sc-menu-links a[aria-current="page"] { background: var(--sc-brand-soft); color: var(--sc-brand-text); }
.sc-menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-menu-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; padding: 0 8px; font-size: .85rem; color: var(--sc-muted); }
@media (min-width: 1200px) { .sc-menu { display: none !important; } }

/* Hero */
.sc-hero {
    position: relative;
    padding: 28px 0 40px;
}
@media (min-width: 768px) { .sc-hero { padding: 44px 0 56px; } }
@media (min-width: 1200px) { .sc-hero { padding: 64px 0 72px; } }
.sc-hero-grid { display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: center; }
.sc-hero-copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.sc-hero-figure { flex: 1 1 440px; min-width: 0; margin: 0; }
.sc-hero h1 {
    margin: 0; font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem); line-height: 1.08; letter-spacing: -0.015em;
}
.sc-hero .lead { margin: 0; max-width: 33em; }
.sc-hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 575.98px) { .sc-hero-ctas .btn { flex: 1 1 100%; } }

.sc-pill {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    background: var(--sc-brand-soft); color: var(--sc-brand-text);
    font-size: .86rem; font-weight: 700; padding: 6px 14px; border-radius: 999px;
}
.sc-pill-amber { background: var(--sc-amber-soft); color: var(--sc-amber-text); }
.sc-pill-white { background: #fff; color: var(--sc-ink); }

.sc-facts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 576px) { .sc-facts { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
.sc-facts li {
    background: #fff; border-radius: var(--sc-r-tile); padding: 12px 14px;
    display: flex; gap: 12px; align-items: center; box-shadow: var(--sc-shadow-sm);
}
.sc-facts small { display: block; font-size: .75rem; color: var(--sc-muted); }
.sc-facts strong { font-size: .95rem; }

.sc-round-icon {
    width: 36px; height: 36px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sc-brand-soft); color: var(--sc-brand); font-size: 1.05rem; font-weight: 700;
}
.sc-round-icon.lg { width: 44px; height: 44px; font-size: 1.2rem; }
.sc-round-icon.ink { background: var(--sc-ink); color: #fff; }
.sc-round-icon.brand { background: var(--sc-brand); color: #fff; }

/* Hero photo, seal and the sample dossier card */
.hero-photo-wrap { position: relative; }
.hero-photo {
    display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: 24px; background: var(--sc-line);
}
@media (min-width: 768px) { .hero-photo { border-radius: 32px; } }
.sc-seal {
    position: absolute; top: -14px; right: -6px; width: 92px; height: 92px; border-radius: 50%;
    background: var(--sc-brand); color: #fff; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center;
    font-family: var(--sc-serif); font-size: .8rem; font-weight: 600; line-height: 1.15;
    border: 4px solid var(--sc-ground);
}
.sc-seal i { font-size: 1.2rem; line-height: 1; }
@media (min-width: 768px) { .sc-seal { width: 108px; height: 108px; font-size: .85rem; right: -14px; } }

.sc-dossier-card {
    position: relative; margin: -44px 12px 0; max-width: 400px;
    background: #fff; border-radius: var(--sc-r-card); padding: 18px;
    box-shadow: 0 20px 40px -18px rgba(17, 26, 31, .45);
}
@media (min-width: 768px) { .sc-dossier-card { margin: -56px 20px 0; } }
.sc-dossier-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sc-dossier-head .name { font-family: var(--sc-serif); font-weight: 600; font-size: 1.05rem; line-height: 1.25; }
.sc-dossier-head .meta { font-size: .8rem; color: var(--sc-muted); }
.sc-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; }
.sc-checklist li { display: flex; align-items: center; gap: 10px; }
.sc-checklist .dot {
    width: 20px; height: 20px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center; font-size: .7rem;
}
.sc-checklist .done .dot { background: var(--sc-brand); color: #fff; }
.sc-checklist .now { background: var(--sc-amber-soft); color: var(--sc-amber-text); font-weight: 700; margin: 0 -8px; padding: 6px 8px; border-radius: var(--sc-r-sm); }
.sc-checklist .now .dot { border: 2px solid var(--sc-amber); }
.sc-checklist .now .dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sc-amber); }
.sc-checklist .todo { color: var(--sc-muted); }
.sc-checklist .todo .dot { border: 2px solid var(--sc-line-strong); }

/* Old hero chips — still used on the audience pages */
.hero-chip {
    position: absolute; background: #fff; color: var(--sc-ink);
    border-radius: var(--sc-r-tile); padding: .6rem .9rem;
    box-shadow: 0 18px 40px -18px rgba(17, 26, 31, .45);
    display: flex; align-items: center; gap: .6rem;
    font-size: .85rem; font-weight: 700;
}
.hero-chip .ic {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
}
.hero-chip.chip-1 { top: -4%; left: -4%; }
.hero-chip.chip-2 { bottom: 6%; right: -4%; }
.hero-chip.chip-3 { bottom: -6%; left: 4%; }
@media (max-width: 991.98px) {
    .hero-chip.chip-1 { left: 8px; } .hero-chip.chip-2 { right: 8px; } .hero-chip.chip-3 { left: 8px; bottom: -6%; }
}

/* Stats panel */
.sc-stats { background: #fff; border-radius: 24px; box-shadow: var(--sc-shadow-sm); padding: 8px; display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .sc-stats { grid-template-columns: repeat(4, 1fr); } }
.sc-stats > div { padding: 18px 16px; border-radius: 18px; }
@media (min-width: 768px) { .sc-stats > div { padding: 24px 22px; } }
.sc-stats .is-key { background: var(--sc-brand-tint); }
.sc-stats .stat-num, .stat-num {
    font-family: var(--sc-serif); font-weight: 600; line-height: 1;
    font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); color: var(--sc-brand); letter-spacing: -0.01em;
}
.sc-stats .stat-label, .stat-label { margin-top: 8px; color: var(--sc-ink-2); font-size: .92rem; line-height: 1.35; }

/* Sections */
.section { padding: 56px 0; }
.section-sm { padding: 40px 0; }
@media (min-width: 768px) { .section { padding: 72px 0; } .section-sm { padding: 48px 0; } }
@media (min-width: 1200px) { .section { padding: 88px 0; } }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 40px; margin-bottom: 28px; }
.section-head h2 { margin: 0; font-size: clamp(1.85rem, 1.4rem + 1.8vw, 2.6rem); line-height: 1.12; }
.section-head p { margin: 0; max-width: 30em; color: var(--sc-ink-2); }
.eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .86rem; font-weight: 700; color: var(--sc-brand-text);
    background: var(--sc-brand-soft); border-radius: 999px; padding: 6px 14px;
}

/* "Wer was übernimmt" — one card per step, the client's part and ours */
.sc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .sc-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .sc-steps { grid-template-columns: repeat(4, 1fr); } }
.sc-steps > li {
    background: #fff; border-radius: var(--sc-r-card); padding: 18px;
    display: flex; flex-direction: column; gap: 12px; box-shadow: var(--sc-shadow-sm);
}
@media (min-width: 768px) { .sc-steps > li { padding: 22px; } }
.sc-step-head { display: flex; align-items: center; gap: 12px; }
.sc-step-head h3 { margin: 0; font-size: 1.15rem; line-height: 1.25; }
.sc-step-you { font-size: .94rem; }
.sc-step-us { font-size: .94rem; background: var(--sc-brand-tint); border-radius: 14px; padding: 12px 14px; }
.sc-step-you b, .sc-step-us b { display: block; font-size: .75rem; font-weight: 700; margin-bottom: 2px; }
.sc-step-you b { color: var(--sc-muted); }
.sc-step-us b { color: var(--sc-brand); }

.sc-step-num {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sc-ink); color: #fff; font-family: var(--sc-serif); font-weight: 700; font-size: 1rem;
}
.sc-step-num.is-last { background: var(--sc-brand); }
.steps-line { position: relative; }
.steps-line .step-item { position: relative; padding-left: 3.4rem; padding-bottom: 1.6rem; }
.steps-line .step-item::before {
    content: ""; position: absolute; left: 17px; top: 42px; bottom: 4px; width: 2px;
    background: var(--sc-line); border-radius: 2px;
}
.steps-line .step-item:last-child::before { display: none; }
.steps-line .sc-step-num { position: absolute; left: 0; top: 0; }

/* Audience switch (pills) */
.audience-switch {
    background: #fff; border-radius: 999px; padding: 5px; box-shadow: var(--sc-shadow-sm);
    display: inline-flex; gap: 4px; flex-wrap: nowrap; max-width: 100%;
}
.audience-switch .nav-link {
    border-radius: 999px; font-weight: 700; color: var(--sc-ink-2); padding: .55rem 1.3rem; border: 0;
    white-space: nowrap; background: transparent;
}
.audience-switch .nav-link:hover { background: var(--sc-ground); color: var(--sc-ink); }
.audience-switch .nav-link.active { background: var(--sc-brand); color: #fff; }
@media (max-width: 575.98px) {
    .audience-switch { display: flex; width: 100%; }
    .audience-switch .nav-item { flex: 1 1 0; min-width: 0; }
    .audience-switch .nav-link { width: 100%; padding: .6rem .4rem; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; }
}

/* Sector photo cards */
.sector-card {
    position: relative; border-radius: var(--sc-r-card); overflow: hidden; display: block;
    aspect-ratio: 4 / 3; background: var(--sc-line);
    transition: box-shadow .25s ease;
}
.sector-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.sector-card::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(185deg, rgba(17, 26, 31, 0) 35%, rgba(17, 26, 31, .82) 92%);
}
.sector-card:hover { box-shadow: var(--sc-shadow-md); }
.sector-card:hover img { transform: scale(1.04); }
.sector-card .sector-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.1rem 1.25rem; color: #fff; }
.sector-card .sector-body h5, .sector-card .sector-body h3 { color: #fff; margin-bottom: .1rem; font-size: 1.2rem; }
.sector-card .sector-body small { color: rgba(255, 255, 255, .82); }
.sector-card .badge { background: rgba(255, 255, 255, .92) !important; color: var(--sc-ink) !important; }

/* Trust list (what we check before a profile goes online) */
.sc-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 576px) { .sc-checks { grid-template-columns: repeat(2, 1fr); } }
.sc-checks li {
    background: #fff; border-radius: 18px; padding: 16px; box-shadow: var(--sc-shadow-sm);
    display: flex; gap: 14px; align-items: flex-start;
}
.sc-checks strong { display: block; }
.sc-checks span.sub { display: block; color: var(--sc-ink-2); font-size: .9rem; }

/* Dark panel with the two decorative circles */
.sc-dark-panel {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--sc-ink); color: #fff; border-radius: var(--sc-r-panel);
    padding: 28px; display: flex; flex-direction: column; gap: 16px; justify-content: center;
}
@media (min-width: 768px) { .sc-dark-panel { padding: 40px; } }
.sc-dark-panel::before, .sc-dark-panel::after {
    content: ""; position: absolute; border-radius: 50%; background: var(--sc-brand); z-index: -1;
}
.sc-dark-panel::before { right: -60px; top: -60px; width: 220px; height: 220px; opacity: .55; }
.sc-dark-panel::after { right: 70px; bottom: -90px; width: 160px; height: 160px; opacity: .3; }
.sc-dark-panel h2, .sc-dark-panel h3 { color: #fff; margin: 0; }
.sc-dark-panel p { color: var(--sc-on-dark); margin: 0; }

/* Comparison — one rail, five steps */
.compare-rail { max-width: 1120px; margin: 0 auto; }
.cr-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: 2.5rem; }
.cr-key { display: inline-flex; align-items: center; gap: .45rem; border-radius: 999px; padding: .4rem 1rem; font-size: .85rem; font-weight: 700; }
.cr-key-old { background: #fff; color: var(--sc-muted); box-shadow: var(--sc-shadow-sm); }
.cr-key-new { background: var(--sc-brand-soft); color: var(--sc-brand-text); }
.cr-track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
.cr-line { position: absolute; top: 19px; left: 10%; right: 10%; height: 3px; border-radius: 3px; background: var(--sc-brand); }
.cr-step { position: relative; padding-top: 3.4rem; text-align: center; }
.cr-node {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--sc-ink); color: #fff; font-family: var(--sc-serif); font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 6px var(--sc-ground);
}
.cr-node-end { background: var(--sc-brand); }
.cr-before, .cr-after { margin: 0; font-size: .92rem; line-height: 1.45; }
.cr-before { color: var(--sc-muted); padding-bottom: .8rem; margin-bottom: .8rem; border-bottom: 1px dashed var(--sc-line-strong); }
.cr-before i { color: #A6B3B8; margin-right: .2rem; }
.cr-after { color: var(--sc-ink); font-weight: 700; }
.cr-after i { color: var(--sc-brand); margin-right: .2rem; }
.cr-after-end i { color: var(--sc-brand); }
@media (max-width: 991.98px) {
    .cr-track { grid-template-columns: 1fr; gap: 0; }
    .cr-line { top: 0; bottom: 0; left: 18px; right: auto; width: 3px; height: auto; }
    .cr-step { padding: 0 0 1.8rem 3.6rem; text-align: left; }
    .cr-step:last-child { padding-bottom: 0; }
    .cr-node { top: 0; left: 19px; width: 36px; height: 36px; font-size: .9rem; }
}

/* Pricing */
.price-card { border-radius: var(--sc-r-card); background: #fff; box-shadow: var(--sc-shadow-sm); border: 0; }
.price-value { font-family: var(--sc-serif); font-size: clamp(2.4rem, 2rem + 1.6vw, 3rem); font-weight: 600; color: var(--sc-brand); letter-spacing: -0.01em; line-height: 1.05; }
.price-value small { font-size: 1rem; color: var(--sc-muted); font-weight: 500; font-family: var(--sc-sans); }

/* Pricing showcase (companies page) */
.price-showcase {
    position: relative; overflow: hidden; isolation: isolate; border-radius: var(--sc-r-panel);
    background: var(--sc-ink); color: #fff; padding: 2.5rem 2rem;
}
.ps-glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; background: var(--sc-brand); }
.ps-glow-teal { width: 260px; height: 260px; top: -90px; right: -70px; opacity: .55; }
.ps-glow-amber { width: 180px; height: 180px; bottom: -90px; left: 30%; opacity: .3; }
.ps-value { font-family: var(--sc-serif); font-size: clamp(3rem, 2.4rem + 2vw, 4rem); font-weight: 600; line-height: 1; }
.ps-label { font-size: 1.1rem; font-weight: 700; margin-top: .5rem; }
.ps-sub { color: var(--sc-on-dark); font-size: .92rem; margin-top: .5rem; margin-bottom: 0; }
.ps-features { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.ps-feature { display: flex; align-items: center; gap: .75rem; font-weight: 700; font-size: .95rem; }
.ps-feature-icon {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
    background: rgba(255, 255, 255, .12); color: #fff;
}
.ps-feature-icon.c1, .ps-feature-icon.c2, .ps-feature-icon.c3 { background: rgba(255, 255, 255, .12); color: #fff; }
.ps-trust {
    display: flex; align-items: center; gap: .6rem; background: #fff;
    border-radius: var(--sc-r-tile); padding: .9rem 1.1rem; font-size: .9rem; font-weight: 700; color: var(--sc-ink);
    height: 100%; box-shadow: var(--sc-shadow-sm);
}
.ps-trust i { color: var(--sc-brand); font-size: 1.1rem; }
@media (max-width: 767.98px) {
    .ps-features { grid-template-columns: 1fr; }
    .price-showcase { padding: 2rem 1.4rem; }
}

/* Testimonials */
.testimonial-card { border-radius: var(--sc-r-card); }
.testimonial-card .avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--sc-brand-soft); color: var(--sc-brand);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}

/* CTA band (older pages) */
.cta-band {
    position: relative; border-radius: var(--sc-r-panel); overflow: hidden; isolation: isolate; color: #fff;
    background: var(--sc-ink);
}
.cta-band::before, .cta-band::after { content: ""; position: absolute; border-radius: 50%; background: var(--sc-brand); z-index: -1; }
.cta-band::before { right: -70px; top: -70px; width: 240px; height: 240px; opacity: .55; }
.cta-band::after { left: -50px; bottom: -100px; width: 200px; height: 200px; opacity: .3; }
.cta-band h2 { color: #fff; }
.cta-band .text-white-50, .cta-band .lead { color: var(--sc-on-dark) !important; }

/* Article body (blog, legal texts) */
.sc-article { font-size: 1.05rem; line-height: 1.7; color: var(--sc-ink-2); }
.sc-article h2, .sc-article h3 { color: var(--sc-ink); margin-top: 2rem; }
.sc-article a { text-decoration: underline; text-underline-offset: 3px; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* Footer */
.sc-footer { background: #fff; color: var(--sc-ink-2); border-top: 1px solid var(--sc-line); }
.sc-footer a { color: var(--sc-ink-2); }
.sc-footer a:hover { color: var(--sc-brand); }
.sc-footer h2 { font-family: var(--sc-sans); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sc-muted); margin-bottom: .8rem; }
.sc-footer-bottom { border-top: 1px solid var(--sc-line); font-size: .85rem; color: var(--sc-muted); }

/* ============================================================
   Portal shell — floating sidebar (desktop), icon rail (tablet),
   top bar and bottom tabs (phone)
   ============================================================ */
.sc-portal { min-height: 100vh; }
.sc-shell { display: flex; gap: 16px; padding: 0; }
@media (min-width: 768px) { .sc-shell { padding: 16px; } }

.sc-side {
    display: none; flex: none; position: sticky; top: 16px; align-self: flex-start;
    height: calc(100vh - 32px); background: #fff; border-radius: var(--sc-r-card);
    box-shadow: var(--sc-shadow-sm); overflow: hidden;
}
@media (min-width: 768px) { .sc-side { display: flex; flex-direction: column; width: 76px; padding: 16px 0; align-items: center; } }
@media (min-width: 1200px) { .sc-side { width: 248px; padding: 20px 14px; align-items: stretch; } }

.sc-side-brand { display: flex; align-items: center; gap: 10px; color: var(--sc-ink); padding: 0 8px; margin-bottom: 20px; }
.sc-side-brand:hover { color: var(--sc-ink); }
.sc-side-brand .sc-brand-name { font-size: 1.1rem; }
.sc-side-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; width: 100%; }
@media (max-width: 1199.98px) {
    .sc-side-brand { padding: 0; justify-content: center; }
    .sc-side-brand .sc-brand-name { display: none; }
    .sc-side-scroll { display: flex; flex-direction: column; align-items: center; }
}

.sc-portal-nav { display: flex; flex-direction: column; gap: 3px; }
.sc-portal-nav a, .sc-portal-nav button {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    color: var(--sc-ink-2); border-radius: var(--sc-r-btn); font-weight: 700; font-size: .94rem;
    border: 0; background: transparent; width: 100%; text-align: left; position: relative;
}
.sc-portal-nav i { font-size: 1.1rem; width: 20px; text-align: center; flex: none; }
.sc-portal-nav a:hover, .sc-portal-nav button:hover { background: var(--sc-ground); color: var(--sc-ink); }
.sc-portal-nav a[aria-current="page"] { background: var(--sc-brand); color: #fff; }
.sc-portal-nav .count {
    margin-left: auto; background: var(--sc-amber); color: #fff; border-radius: 999px;
    font-size: .72rem; font-weight: 700; padding: 1px 8px; line-height: 1.5;
}
.sc-portal-nav a[aria-current="page"] .count { background: rgba(255, 255, 255, .22); }
.sc-nav-group { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sc-muted); padding: 14px 12px 4px; }

/* Rail: icons only, label kept for screen readers and as a tooltip */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .sc-side .sc-portal-nav { align-items: center; gap: 6px; }
    .sc-side .sc-portal-nav a, .sc-side .sc-portal-nav button { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 14px; }
    .sc-side .sc-portal-nav .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .sc-side .sc-portal-nav .count { position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; padding: 0; font-size: 0; }
    .sc-side .sc-nav-group { width: 32px; height: 1px; background: var(--sc-line); padding: 0; margin: 8px 0; font-size: 0; }
    .sc-side .sc-side-user .who { display: none; }
    .sc-side .sc-side-user { background: transparent; padding: 0; justify-content: center; }
    .sc-side .sc-lang { flex-direction: column; }
}

.sc-side-foot { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; width: 100%; }
@media (max-width: 1199.98px) { .sc-side-foot { align-items: center; } }
.sc-side-user {
    background: var(--sc-ground); border-radius: var(--sc-r-tile); padding: 12px;
    display: flex; gap: 10px; align-items: center; font-size: .88rem; min-width: 0;
}
.sc-side-user .who { min-width: 0; }
.sc-side-user .who strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-side-user .who span { color: var(--sc-muted); font-size: .8rem; }
.sc-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex: none;
    background: var(--sc-brand-soft); color: var(--sc-brand);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .82rem;
    border: 0;
}
.sc-avatar.lg { width: 60px; height: 60px; font-family: var(--sc-serif); font-size: 1.2rem; background: var(--sc-brand); color: #fff; }

.sc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
@media (min-width: 768px) { .sc-main { min-height: calc(100vh - 32px); } }

/* Desktop/tablet header inside the main column */
.sc-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 6px 14px; }
.sc-topbar h1 { margin: 0; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); line-height: 1.15; min-width: 0; }
.sc-topbar-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.sc-icon-btn {
    width: 44px; height: 44px; border-radius: var(--sc-r-btn); border: 0; position: relative;
    background: #fff; color: var(--sc-ink); box-shadow: var(--sc-shadow-sm);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.sc-icon-btn:hover { background: var(--sc-brand-tint); color: var(--sc-brand-text); }
.sc-icon-btn .dot {
    position: absolute; top: 6px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--sc-amber); color: #fff; border-radius: 999px; font-size: .68rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.sc-role-pill { background: #fff; box-shadow: var(--sc-shadow-sm); border-radius: 999px; padding: 6px 14px 6px 6px; display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 700; }
.sc-role-pill .sc-avatar { width: 32px; height: 32px; font-size: .74rem; }

/* Phone top bar */
.sc-phonebar {
    position: sticky; top: 0; z-index: 1020; background: #fff; border-bottom: 1px solid var(--sc-line);
    padding: 10px 12px; display: flex; align-items: center; gap: 10px;
}
.sc-phonebar .title { flex: 1 1 auto; min-width: 0; font-family: var(--sc-serif); font-weight: 600; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-phonebar .sc-icon-btn { box-shadow: none; background: var(--sc-ground); }
@media (min-width: 768px) { .sc-phonebar { display: none; } }

.sc-content { flex: 1 1 auto; padding: 18px 14px 28px; }
@media (min-width: 768px) { .sc-content { padding: 0 6px 32px; } }

/* Phone bottom tabs */
.sc-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    background: #fff; border-top: 1px solid var(--sc-line);
    padding: 6px 6px calc(10px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    font-size: .7rem; font-weight: 700;
}
.sc-tabbar a, .sc-tabbar button {
    display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0;
    color: var(--sc-muted); border: 0; background: transparent; position: relative; font-weight: 700; min-width: 0;
}
.sc-tabbar .ic { width: 48px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.sc-tabbar .lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.sc-tabbar [aria-current="page"] { color: var(--sc-brand); }
.sc-tabbar [aria-current="page"] .ic { background: var(--sc-brand-soft); }
.sc-tabbar .count {
    position: absolute; top: 0; left: 50%; margin-left: 6px; background: var(--sc-amber); color: #fff;
    border-radius: 999px; font-size: .62rem; padding: 0 5px; line-height: 1.5;
}
@media (min-width: 768px) { .sc-tabbar { display: none; } }
@media (max-width: 767.98px) {
    .has-tabbar .sc-content { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
    .has-tabbar .sc-chat-fab { bottom: calc(84px + env(safe-area-inset-bottom)); }
    .has-tabbar .sc-chat-panel { bottom: calc(150px + env(safe-area-inset-bottom)); height: min(520px, calc(100vh - 190px)); }
    .has-tabbar .sc-compare-bar { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* "Mehr" sheet on phones */
.sc-sheet { border-radius: var(--sc-r-card) var(--sc-r-card) 0 0; max-height: 86vh; height: auto !important; }
.sc-sheet .offcanvas-body { padding-top: 0; }
.sc-sheet .sc-portal-nav a, .sc-sheet .sc-portal-nav button { padding: 12px; font-size: 1rem; }

/* Legacy dark sidebar class: some screens still reference it */
.sc-sidebar { background: #fff; color: var(--sc-ink); }

/* Dashboard stat tiles */
.sc-stat { border: 0; border-radius: 20px; background: #fff; box-shadow: var(--sc-shadow-sm); }
.sc-stat .stat-value { font-family: var(--sc-serif); font-size: 1.9rem; font-weight: 600; color: var(--sc-brand); line-height: 1.1; }

/* Dossier stepper: nine circles on a line (tablet and up) */
.sc-stepper {
    list-style: none; margin: 0; padding: 22px 24px;
    display: grid; grid-template-columns: repeat(9, minmax(92px, 1fr)); min-width: 860px;
}
.sc-stepper li { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sc-stepper .track { display: flex; align-items: center; }
.sc-stepper .node {
    width: 28px; height: 28px; border-radius: 50%; flex: none; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; font-size: .85rem;
    border: 2px solid var(--sc-line-strong); background: #fff;
}
.sc-stepper .bar { flex: 1 1 auto; height: 3px; border-radius: 3px; background: var(--sc-line); margin: 0 5px; }
.sc-stepper .bar.is-done { background: var(--sc-brand); }
.sc-stepper .lbl { font-size: .8rem; font-weight: 700; line-height: 1.25; padding-right: 8px; overflow-wrap: anywhere; hyphens: auto; }
.sc-stepper .when { font-size: .75rem; color: var(--sc-muted); }
.sc-stepper .is-done .node { background: var(--sc-brand); border-color: var(--sc-brand); color: #fff; }
.sc-stepper .is-now .node { background: var(--sc-amber-soft); border-color: var(--sc-amber); }
.sc-stepper .is-now .node::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sc-amber); }
.sc-stepper .is-now .lbl, .sc-stepper .is-now .when { color: var(--sc-amber-text); }
.sc-stepper .is-todo .lbl { color: var(--sc-muted); }

/* ... and as a segmented bar on phones */
.sc-segments { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.sc-segments span { height: 8px; border-radius: 8px; background: var(--sc-line); }
.sc-segments .is-done { background: var(--sc-brand); }
.sc-segments .is-now { background: var(--sc-amber); }

/* Page header inside the portal: avatar, name, meta, status */
.sc-page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.sc-page-head .who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sc-page-head h2 { margin: 0; font-size: clamp(1.5rem, 1.25rem + 1vw, 2.1rem); line-height: 1.1; }
.sc-page-head .meta { margin-top: 4px; color: var(--sc-ink-2); font-size: .9rem; }
.sc-page-head .actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 575.98px) { .sc-page-head .actions { flex: 1 1 100%; } .sc-page-head .actions > * { flex: 1 1 0; } }

/* Timeline */
.sc-timeline { list-style: none; padding-left: 0; margin: 0; }
.sc-timeline li { position: relative; padding-left: 2.2rem; padding-bottom: 1.1rem; border-left: 2px solid var(--sc-line); margin-left: .6rem; }
.sc-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.sc-timeline .dot { position: absolute; left: -.68rem; top: 0; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #fff; border: 2px solid var(--sc-line-strong); }
.sc-timeline li.done .dot { background: var(--sc-brand); border-color: var(--sc-brand); }
.sc-timeline li.done { border-left-color: var(--sc-brand); }
.sc-timeline li.current .dot { background: var(--sc-amber-soft); border-color: var(--sc-amber); box-shadow: inset 0 0 0 3px var(--sc-amber-soft), inset 0 0 0 10px var(--sc-amber); }
.sc-timeline li.current { font-weight: 700; color: var(--sc-amber-text); }

/* ============================================================
   Auth pages — form on the ground, photo panel floating beside it
   ============================================================ */
.auth-shell { display: flex; min-height: 100vh; background: var(--sc-ground); }
@media (min-width: 992px) { .auth-shell { padding: 16px; gap: 16px; } }
.auth-form-col {
    flex: 1 1 52%; display: flex; align-items: flex-start; justify-content: center;
    padding: 20px 16px 40px; overflow-y: auto;
}
@media (min-width: 992px) { .auth-form-col { background: #fff; border-radius: var(--sc-r-panel); box-shadow: var(--sc-shadow-sm); padding: 28px 24px 40px; } }
.auth-form-inner { width: 100%; max-width: 440px; padding-top: .25rem; }
.auth-form-inner.auth-wide { max-width: 560px; }
@media (max-width: 991.98px) {
    .auth-form-inner { background: #fff; border-radius: var(--sc-r-card); box-shadow: var(--sc-shadow-sm); padding: 18px; }
}

.auth-panel {
    flex: 1 1 48%; position: sticky; top: 16px; height: calc(100vh - 32px);
    background-size: cover; background-position: center; align-items: flex-end;
    border-radius: var(--sc-r-panel); overflow: hidden;
}
.auth-panel-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(195deg, rgba(17, 26, 31, .2) 0%, rgba(17, 26, 31, .82) 62%, rgba(11, 58, 48, .96) 100%);
}
.auth-panel-content { position: relative; padding: 3rem; width: 100%; }
.auth-panel-content h2 { font-size: clamp(1.6rem, 2.2vw, 2.15rem); color: #fff; }
.auth-panel-content .text-white-50 { color: var(--sc-on-dark) !important; }
.auth-panel-item { display: flex; align-items: center; gap: .8rem; color: rgba(255, 255, 255, .92); font-weight: 600; }
.auth-panel-item i {
    width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; flex-shrink: 0;
}
.auth-stat { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--sc-r-tile); padding: .8rem 1.1rem; color: #fff; }
.auth-stat .num { font-family: var(--sc-serif); font-weight: 600; font-size: 1.3rem; }
.auth-stat .lbl { font-size: .75rem; color: var(--sc-on-dark); }

.auth-form-inner .form-control { padding: .78rem 1rem; }
.auth-form-inner .input-group .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.auth-form-inner .btn-eye {
    border: 1px solid var(--sc-line-strong); border-left: 0; background: #fff; color: var(--sc-muted);
    border-top-right-radius: var(--sc-r-btn); border-bottom-right-radius: var(--sc-r-btn); padding: 0 .95rem;
}
.auth-form-inner .btn-eye:hover { color: var(--sc-brand); }

/* Role selection cards on register */
.role-pick .btn-check + label,
.role-pick a.btn {
    border-radius: var(--sc-r-tile); border: 1.5px solid var(--sc-line-strong); color: var(--sc-ink);
    background: #fff; transition: border-color .15s ease, background .15s ease; position: relative; box-shadow: none;
}
.role-pick .btn-check + label:hover,
.role-pick a.btn:hover { border-color: var(--sc-brand); background: var(--sc-brand-tint); color: var(--sc-brand-text); }
.role-pick .btn-check:checked + label { border-color: var(--sc-brand); background: var(--sc-brand-tint); color: var(--sc-brand-text); }
.role-pick .btn-check:checked + label::after {
    content: "\F26A"; font-family: "bootstrap-icons"; position: absolute; top: .5rem; right: .7rem;
    color: var(--sc-brand); font-size: 1.05rem;
}

/* Social login */
.btn-social {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    width: 100%; padding: .7rem 1rem; border-radius: var(--sc-r-btn); font-weight: 700;
    border: 1.5px solid var(--sc-line-strong); background: #fff; color: var(--sc-ink);
    transition: border-color .15s ease, background .15s ease;
}
.btn-social:hover { border-color: var(--sc-brand); background: var(--sc-brand-tint); color: var(--sc-ink); }
.btn-social .social-ic { display: inline-flex; align-items: center; font-size: 1.15rem; line-height: 1; }
.btn-google { background: #fff; color: #1f2937; }
.btn-social-lg { padding: .9rem 1rem; font-size: 1.02rem; }
.social-divider { display: flex; align-items: center; text-align: center; color: var(--sc-muted); font-size: .85rem; }
.social-divider::before, .social-divider::after { content: ""; flex: 1; height: 1px; background: var(--sc-line); }
.social-divider span { padding: 0 .9rem; }

/* Images never overflow */
img { max-width: 100%; }

/* ---- Chatbot widget ---- */
.sc-chat-fab {
    position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 1050;
    width: 56px; height: 56px; border-radius: 50%; border: none;
    background: var(--sc-brand); color: #fff; font-size: 1.35rem;
    box-shadow: 0 12px 26px -10px rgba(11, 93, 75, .7);
    transition: background .15s ease;
}
.sc-chat-fab:hover { background: var(--sc-brand-hover); }
.sc-chat-panel {
    position: fixed; bottom: 5.75rem; right: 1.25rem; z-index: 1050;
    width: 360px; max-width: calc(100vw - 2rem); height: min(560px, calc(100vh - 8rem));
    background: #fff; border-radius: var(--sc-r-card); overflow: hidden;
    box-shadow: 0 1px 2px rgba(17, 26, 31, .08), 0 28px 60px -20px rgba(17, 26, 31, .45);
    display: flex; flex-direction: column;
}
.sc-chat-header { background: var(--sc-ink); color: #fff; padding: 1rem 1.1rem; display: flex; align-items: center; justify-content: space-between; }
.sc-chat-header h2, .sc-chat-header h3, .sc-chat-header h5, .sc-chat-header h6, .sc-chat-header strong { color: #fff; }
.sc-chat-log {
    flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem;
    background: var(--sc-ground);
    /* The chips below must never squeeze the conversation out of existence. */
    min-height: 40%;
}
.sc-chat-bubble { max-width: 84%; padding: .55rem .85rem; border-radius: 16px; font-size: .88rem; line-height: 1.45; }
.sc-chat-bubble.bot { align-self: flex-start; background: #fff; color: var(--sc-ink); box-shadow: var(--sc-shadow-sm); border-bottom-left-radius: 6px; }
.sc-chat-bubble.user { align-self: flex-end; background: var(--sc-brand); color: #fff; border-bottom-right-radius: 6px; }
.sc-chat-replies {
    display: flex; flex-wrap: wrap; gap: .5rem; padding: .85rem 1rem;
    border-top: 1px solid var(--sc-line); background: #fff;
    max-height: 42%; overflow-y: auto; flex-shrink: 0;
}
.sc-chat-chip {
    border: 1.5px solid var(--sc-line-strong); background: #fff; color: var(--sc-ink);
    border-radius: 999px; padding: .38rem .85rem; font-size: .82rem; font-weight: 700;
    transition: background .15s ease, border-color .15s ease;
}
.sc-chat-chip:hover { background: var(--sc-brand-tint); border-color: var(--sc-brand); color: var(--sc-brand-text); }
.sc-chat-form { display: flex; gap: .5rem; padding: 0 1rem 1rem; background: #fff; }
.sc-chat-form .form-control { border-radius: 999px; font-size: .88rem; }
.sc-chat-send {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; border: none;
    background: var(--sc-brand); color: #fff; display: flex; align-items: center; justify-content: center;
}
.sc-chat-send:hover { background: var(--sc-brand-hover); }
@media (max-width: 480px) {
    .sc-chat-panel { right: .75rem; left: .75rem; width: auto; bottom: 5.25rem; }
    .sc-chat-fab { right: 1rem; bottom: 1rem; }
}

/* ---- Candidate comparison bar ---- */
.sc-compare-bar {
    position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 1040;
    display: flex; align-items: center; gap: 1rem; max-width: calc(100vw - 1.5rem);
    background: #fff; border-radius: 18px; padding: .55rem .55rem .55rem 1.1rem;
    box-shadow: 0 1px 2px rgba(17, 26, 31, .08), 0 20px 40px -18px rgba(17, 26, 31, .45);
}

/* ---- Cookie notice (informational, not a consent gate) ---- */
.sc-cookie-notice {
    position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 1060;
    max-width: 720px; margin: 0 auto;
    background: var(--sc-ink); color: #fff; border-radius: var(--sc-r-card);
    padding: 1rem 1.25rem; box-shadow: var(--sc-shadow-lg);
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.sc-cookie-notice-text { flex: 1; min-width: 220px; font-size: .86rem; color: var(--sc-on-dark); }
.sc-cookie-notice-text a { color: #fff; text-decoration: underline; }