@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap');

/* =============================================================================
   ShiftGuard — Fresh Marketing reskin
   -----------------------------------------------------------------------------
   Brings the PUBLIC / marketing site (app/) onto the same "Fresh" warm-light
   maroon brand as the logged-in admin portal (see public/css/fresh-ui.css).

   Loaded LAST in the marketing <head> (common/head.twig + common/head-mobile.twig),
   so it overrides dark.css + browser-common.css and the per-template inline <style>
   blocks without touching their source. (The bespoke auth/signup screens —
   access/register, invite-*, products/basic — are a separate dark-card surface and
   are intentionally NOT covered here; they need their own pass + a light-bg logo.)

   Philosophy (mirrors fresh-ui.css): warm neutrals, flat AA-contrast maroon,
   hairline borders, soft shadows — NO navy gradient, NO cyan, NO glow/hover-lift,
   NO emoji. The few solid maroon CTA bands (middle-CTA, AI feature) are kept as
   deliberate brand anchors.

   Cascade notes:
   - A stylesheet `!important` beats a NON-important inline style, so most inline
     darks in the templates are neutralised here.
   - It canNOT beat an inline `!important` — the hero headings' inline
     `color:#fff !important` are therefore swept to charcoal in the templates.

   To revert: remove the fresh-marketing.css <link> lines from the public heads.
   ============================================================================= */

:root {
    /* --- Warm neutrals -------------------------------------------------- */
    --fm-canvas:        #F7F5F1;   /* linen page */
    --fm-surface:       #FFFFFF;   /* white cards */
    --fm-panel:         #EFEBE3;   /* warm alt section */
    --fm-border:        #ECE9E2;   /* hairline */
    --fm-border-strong: #DBD6CB;
    --fm-heading:       #2D2B26;   /* warm charcoal */
    --fm-body:          #44413B;
    --fm-muted:         #76716A;

    /* --- Action: MAROON ------------------------------------------------- */
    --fm-primary:       #8E2F44;
    --fm-primary-hover: #722539;
    --fm-primary-deep:  #5C1626;
    --fm-primary-tint:  #F8ECEF;
    --fm-gold:          #F4D58D;   /* warm accent on maroon */
    --fm-cream:         #F4ECE0;   /* readable body text on maroon */

    /* --- Remap the inherited dark-theme tokens (used across dark.css +
           browser-common.css via var(...)) onto the warm/maroon palette ---- */
    --primary-text:        #2D2B26;
    --tertiary-text:       #8E2F44;
    --tertiary-text-hover: #722539;

    --primary:        #8E2F44;
    --primary-dull:   #722539;
    --primary-alpha:  #8E2F4412;
    --primary-hover:  #722539;
    --primary-dark:   #2D2B26;

    --secondary:        #722539;
    --secondary-dull:   #5C1626;
    --secondary-alpha:  #8E2F4426;
    --secondary-dark:   #44413B;   /* body { color: var(--secondary-dark) } */

    --tertiary:        #44413B;     /* .lead, .text-tertiary */

    --anchor-color:        #44413B;
    --anchor-color-hover:  #8E2F44;
    --action-color-alpha:  #8E2F4426;

    --dark-bg-color:    #FFFFFF;    /* .dark-card surface */
    --text-body-color:  #44413B;
    --container-dark-bg: #FFFFFF;
    --bg-dark-lighter:  #DBD6CB;
    --neutral-alpha:    #FFFFFF;

    --success-color:        #AC6275;
    --success-color-alpha:  #AC627533;
    --danger-color:         #9E2B3E;
    --danger-hover:         #722539;
    --danger-color-alpha:   #9E2B3E33;

    --primary-btn-bg:   #8E2F44;

    --brand-primary:    #8E2F44;
    --brand-secondary:  #722539;

    --bg-tertiary:           #EFEBE3;   /* .light-section */
    --bg-secondary-lighter:  #8E2F44;   /* .bg-section-secondary -> maroon band */
}

/* =============================================================================
   1. Base — linen canvas, warm text, kill the animated navy gradient
   ============================================================================= */
html { background: var(--fm-canvas) !important; }
body {
    background: var(--fm-canvas) !important;
    background-color: var(--fm-canvas) !important;
    background-image: none !important;
    animation: none !important;
    color: var(--fm-body);
    height: auto !important;
    min-height: 100vh;
}

a { color: var(--fm-primary); }
a:hover { color: var(--fm-primary-hover); }

.lead { color: var(--fm-body); }
.text-muted { color: var(--fm-muted) !important; }

/* Headings inherit warm body charcoal unless explicitly coloured */
.display-3, .display-4, .display-5, .display-6 { color: var(--fm-heading) !important; }
.display-2 { color: var(--fm-primary) !important; }       /* maroon kicker/sub-head */

/* Glow text helpers from dark.css → flat */
.text-glow-dark { color: var(--fm-heading) !important; text-shadow: none !important; }
.feature-heading-enhanced {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

/* Decorative hero sparkles + radial glows have no place in the calm theme */
.sparkle-canvas { display: none !important; }

/* -----------------------------------------------------------------------------
   White-text utility: on light surfaces it must read as charcoal. Re-whitened
   below only on the maroon CTA bands and solid buttons.
   -------------------------------------------------------------------------- */
.text-white { color: var(--fm-heading) !important; }

/* =============================================================================
   2. Navbar (desktop + mobile) + dropdowns
   ============================================================================= */
.navbar-container {
    background-color: transparent;          /* desktop: transparent over hero, JS paints white on scroll */
    box-shadow: none;
    transition: background-color .35s ease, box-shadow .35s ease;
}
@media (max-width: 991px) {
    /* mobile bar is always a solid white strip (beats #1b293d + any JS inline) */
    .navbar-container {
        background-color: rgba(255,255,255,.97) !important;
        box-shadow: 0 1px 0 var(--fm-border), 0 6px 18px rgba(45,43,38,.07) !important;
    }
    .navbar-collapse { background-color: var(--fm-surface) !important; }
}

.navbar-dark .navbar-nav .nav-link,
.navbar-nav .nav-link { color: var(--fm-heading) !important; }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-nav .nav-link:hover { color: var(--fm-primary) !important; }
.navbar-nav .nav-link.active {
    color: var(--fm-primary) !important;
    border-bottom-color: var(--fm-primary) !important;
}

/* Brand wordmark: "Shift" charcoal · "Guard" maroon · dot maroon.
   Scoped to the navbar so the footer keeps its own gold-on-maroon wordmark. */
.navbar-brand .text-white { color: var(--fm-heading) !important; }
.navbar-brand .brand-text-accent {
    color: var(--fm-primary) !important;
    background: none !important;
    -webkit-text-fill-color: var(--fm-primary) !important;
    background-clip: border-box !important;
}
.navbar-brand .brand-dot { color: var(--fm-primary) !important; }
.navbar-toggler { border: none; }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%232D2B26' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.border-left { border-left-color: var(--fm-border-strong) !important; }

/* Feature / Industries flyout menus */
.nav-sub-menu {
    background-color: var(--fm-surface) !important;
    border: 1px solid var(--fm-border-strong) !important;
    box-shadow: 0 16px 40px rgba(45,43,38,.14) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.nav-sub-menu::before { border-color: transparent transparent var(--fm-border-strong) transparent !important; }
.nav-sub-menu::after { border-bottom-color: var(--fm-surface) !important; }
.nav-sub-menu .dropdown-header { color: var(--fm-heading) !important; }
.nav-sub-menu .dropdown-item,
.dropdown-item { color: var(--fm-body) !important; }
.nav-sub-menu .dropdown-item:hover,
.dropdown-item:hover {
    background-color: var(--fm-primary-tint) !important;
    border-color: var(--fm-primary) !important;
    color: var(--fm-primary) !important;
}
.dropdown-menu .dropdown-item.active,
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--fm-primary) !important;
    color: #fff !important;
}

/* =============================================================================
   3. Buttons — solid maroon CTAs, maroon-outline secondaries
   ============================================================================= */
.btn-primary,
.btn-primary-2, .btn-primary-3,
.btn-secondary {
    background: var(--fm-primary) !important;
    background-image: none !important;
    border: 1px solid var(--fm-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
    /* Unify the primary button with admin/auth: 12px radius, weight 600 (was 8px/400). */
    border-radius: 12px !important;
    font-weight: 600 !important;
    transition: background-color .18s ease, border-color .18s ease, transform .12s ease;
}
.btn-primary:hover, .btn-primary:focus,
.btn-primary-2:hover, .btn-primary-3:hover,
.btn-secondary:hover {
    background: var(--fm-primary-hover) !important;
    border-color: var(--fm-primary-hover) !important;
    color: #fff !important;
}
.btn-primary:active, .btn-secondary:active { transform: scale(.985); }

/* Form inputs: warm hairline border + 12px radius + maroon focus (were Bootstrap
   cool-grey #DEE2E6, inconsistent with the warm theme used on register/admin). */
.form-control {
    border: 1px solid var(--fm-border) !important;
    border-radius: 12px !important;
}
.form-control:focus {
    border-color: var(--fm-primary) !important;
    box-shadow: 0 0 0 .15rem var(--fm-primary-tint) !important;
}

/* Pricing plan toggle: quiet white pill when inactive, solid maroon when active */
.btn-plan {
    background: #fff !important;
    background-image: none !important;
    border: 1.5px solid var(--fm-border-strong) !important;
    color: var(--fm-heading) !important;
    box-shadow: none !important;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.btn-plan:hover { border-color: var(--fm-primary) !important; color: var(--fm-primary) !important; }
.btn-plan.active {
    background: var(--fm-primary) !important;
    border-color: var(--fm-primary) !important;
    color: #fff !important;
}
.btn-plan:active { transform: scale(.985); }

.btn-outline-primary {
    background: transparent !important;
    border: 1.5px solid var(--fm-primary) !important;
    color: var(--fm-primary) !important;
    border-radius: 12px;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background: var(--fm-primary) !important;
    border-color: var(--fm-primary) !important;
    color: #fff !important;
}

.btn-primary-dark {
    background: var(--fm-surface) !important;
    border: 1.5px solid var(--fm-border-strong) !important;
    color: var(--fm-heading) !important;
}
.btn-primary-dark:hover {
    background: var(--fm-primary) !important;
    border-color: var(--fm-primary) !important;
    color: #fff !important;
}

/* "Discover" feature pills (.btn.bg-dark-tone.text-white) → solid maroon */
.btn.bg-dark-tone { background: var(--fm-primary) !important; color: #fff !important; border: none !important; }
.btn.bg-dark-tone:hover { background: var(--fm-primary-hover) !important; color: #fff !important; }

.btn-info { background-color: var(--fm-primary) !important; border: none !important; color: #fff !important; }
.badge-primary { background-color: var(--fm-primary) !important; color: #fff !important; }

/* Kill the rainbow/cyan glow-on-hover entirely */
.glow-on-hover { color: #fff !important; }
.glow-on-hover:before, .glow-on-hover:after { display: none !important; }

/* hero button hover used a cyan gradient in browser-common/head-mobile */
.banner a:hover,
.discover_feature .hover-glow a:hover {
    background: var(--fm-primary-hover) !important;
    color: #fff !important;
}

/* Re-whiten text on the solid maroon surfaces (after the global flip above).
   .btn-plan is NOT here — it has its own quiet-white-when-inactive style. */
.btn-primary, .btn-secondary, .btn-primary-2, .btn-primary-3,
.btn.bg-dark-tone, .btn-info, .glow-on-hover,
.btn-primary .text-white {
    color: #fff !important;
}

/* =============================================================================
   4. Hero / banner — on linen, everything reads charcoal
   ============================================================================= */
.banner { background: transparent !important; }
.banner .text-white, .banner.text-white { color: var(--fm-heading) !important; }
.banner .lead { color: var(--fm-body) !important; }

/* -- 4b. Hero "premium" pass (landing only, via .hero-premium): a staggered
   fade-up entrance + a lift+shadow on the feature buttons. All gated behind
   prefers-reduced-motion. (Background dot field removed per request.) */

.hero-premium .jumbotron > div:first-child > *,
.hero-premium .jumbotron > div:nth-child(2) .btn {
    opacity: 0;
    transform: translateY(14px);
    animation: heroRise .7s cubic-bezier(.2, .75, .25, 1) forwards;
}
.hero-premium .jumbotron > div:first-child > *:nth-child(1) { animation-delay: .06s; }
.hero-premium .jumbotron > div:first-child > *:nth-child(2) { animation-delay: .17s; }
.hero-premium .jumbotron > div:first-child > *:nth-child(3) { animation-delay: .29s; }
.hero-premium .jumbotron > div:first-child > *:nth-child(4) { animation-delay: .41s; }
.hero-premium .jumbotron > div:nth-child(2) .btn:nth-child(1) { animation-delay: .52s; }
.hero-premium .jumbotron > div:nth-child(2) .btn:nth-child(2) { animation-delay: .59s; }
.hero-premium .jumbotron > div:nth-child(2) .btn:nth-child(3) { animation-delay: .66s; }
.hero-premium .jumbotron > div:nth-child(2) .btn:nth-child(4) { animation-delay: .73s; }
.hero-premium .jumbotron > div:nth-child(2) .btn:nth-child(5) { animation-delay: .80s; }
@keyframes heroRise { to { opacity: 1; transform: none; } }

.hero-premium .btn-outline-primary {
    transition: transform .18s ease, box-shadow .25s ease,
                background-color .18s ease, color .18s ease, border-color .18s ease;
}
.hero-premium .btn-outline-primary:hover,
.hero-premium .btn-outline-primary:focus {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(142, 47, 68, .18);
}

@media (prefers-reduced-motion: reduce) {
    .hero-premium .jumbotron > div:first-child > *,
    .hero-premium .jumbotron > div:nth-child(2) .btn {
        opacity: 1 !important; transform: none !important; animation: none !important;
    }
    .hero-premium .btn-outline-primary:hover,
    .hero-premium .btn-outline-primary:focus { transform: none !important; }
}

/* =============================================================================
   5. Content sections
   ============================================================================= */
/* alt info band: cool grey → warm linen panel */
.bg-team { background-color: var(--fm-panel) !important; }
.bg-white { background-color: var(--fm-surface) !important; color: var(--fm-body); }
.bg-white a { color: var(--fm-primary); }
.bg-white a:hover { color: var(--fm-primary-hover); }
.light-section { background-color: var(--fm-panel) !important; }
.light-section h2 { color: var(--fm-heading) !important; }

/* maroon accent text used across info copy */
.text-primary { color: var(--fm-primary) !important; }
.text-primary-2 { color: var(--fm-primary) !important; }
.text-warning { color: var(--fm-primary) !important; }
.text-success { color: var(--fm-success, #AC6275) !important; }

hr { background-color: var(--fm-border-strong) !important; }

/* -- 5a. Middle-CTA band (.bg-section-secondary) → solid maroon anchor ------ */
.bg-section-secondary {
    background: var(--fm-primary) !important;
    background-color: var(--fm-primary) !important;
    border-radius: 16px !important;
}
.bg-section-secondary, .bg-section-secondary .text-white, .bg-section-secondary.text-white { color: #fff !important; }
.bg-section-secondary .text-primary, .bg-section-secondary a { color: var(--fm-gold) !important; }
.bg-section-secondary a:hover { color: #fff !important; }

/* -- 5b. (removed) the old "AI-Powered" feature band (feature-grid + stat-card on
   a colour band — too big / too "AI-generated") was reworked into a compact maroon
   info-section block (.info-maroon, defined near the end) on the landing page:
   HR-friendly copy + a real rota graphic. See browser/mobile landing.twig. */

/* -- 5c. FAQ section: dark band → light, charcoal copy --------------------- */
.faq.bg-dark-tone, .faq.bg-primary-dark { background: var(--fm-surface) !important; }
.faq, .faq .text-white, .faq.text-white { color: var(--fm-body) !important; }
.faq .text-primary { color: var(--fm-primary) !important; }
.faq h2 { color: var(--fm-heading) !important; }

.faq-accordion .accordion-item {
    background: transparent !important;
    border: 0 !important;
    margin-bottom: 12px !important;
}
.faq-accordion .accordion-item:last-child { margin-bottom: 0 !important; }

.faq-accordion .accordion-button,
.faq-accordion .accordion-button.collapsed {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    background: var(--fm-surface) !important;
    color: var(--fm-heading) !important;
    border: 1px solid var(--fm-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(45, 43, 38, .04) !important;
    padding: 19px 58px 19px 22px !important;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease,
                box-shadow .2s ease, transform .2s ease, border-radius .2s ease;
}
.faq-accordion .accordion-button.collapsed:hover {
    border-color: var(--fm-border-strong) !important;
    box-shadow: 0 6px 16px rgba(45, 43, 38, .08) !important;
    transform: translateY(-1px);
}
.faq-accordion .accordion-button:not(.collapsed) {
    background: var(--fm-primary-tint) !important;
    color: var(--fm-primary) !important;
    border-color: rgba(142, 47, 68, .18) !important;
    border-bottom-color: transparent !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: none !important;
}

/* rotating chevron — base theme hid the arrow; draw our own via mask so we can tint it */
.faq-accordion .accordion-button::after {
    display: block !important;
    content: "" !important;
    position: absolute;
    right: 20px;
    top: 50%;
    width: 22px;
    height: 22px;
    margin: 0 !important;
    background-color: var(--fm-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
    transform: translateY(-50%) rotate(0deg);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), background-color .2s ease;
}
.faq-accordion .accordion-button:not(.collapsed)::after {
    background-color: var(--fm-primary);
    transform: translateY(-50%) rotate(-180deg);
}

.faq-accordion .accordion-body {
    background: var(--fm-surface) !important;
    color: var(--fm-body) !important;
    border: 1px solid rgba(142, 47, 68, .18) !important;
    border-top: 0 !important;
    border-bottom-left-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
    padding: 6px 22px 20px !important;
    line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
    .faq-accordion .accordion-button,
    .faq-accordion .accordion-button::after { transition: none !important; }
    .faq-accordion .accordion-button.collapsed:hover { transform: none !important; }
}

/* -- 5d. Discover-everything band ------------------------------------------ */
.discover_feature { background-color: var(--fm-canvas) !important; }
.discover_feature h2 { color: var(--fm-heading) !important; }

/* =============================================================================
   6. Cards & dark surfaces (.bg-primary-dark / .dark-card)
   ============================================================================= */
.card { background-color: transparent !important; }

.bg-primary-dark { background: var(--fm-surface) !important; }
.dark-card {
    background: var(--fm-surface) !important;
    border: 1px solid var(--fm-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(45,43,38,.04), 0 10px 28px rgba(45,43,38,.07) !important;
}
/* text inside the (now white) cards/sections */
.bg-primary-dark, .bg-primary-dark .text-white, .bg-primary-dark.text-white { color: var(--fm-body) !important; }
/* …but the maroon CTA button inside the card keeps its white text */
.bg-primary-dark .btn-primary, .bg-primary-dark .btn-primary.text-white { color: #fff !important; }
.bg-primary-dark .text-primary { color: var(--fm-primary) !important; }
.bg-primary-dark .text-primary-2 { color: var(--fm-primary) !important; }
.bg-primary-dark h2, .bg-primary-dark h5 { color: var(--fm-heading) !important; }
.bg-primary-dark .list-group-item i,
.bg-primary-dark [data-lucide] { color: var(--fm-primary) !important; }

.list-group-item { background: transparent !important; color: var(--fm-body) !important; border: none !important; }

/* the dark-tone "feature scroll" cards on mobile */
.feature-scroll .bg-dark-tone { background-color: var(--fm-surface) !important; border: 1px solid var(--fm-border) !important; }

/* =============================================================================
   7. Pricing section (#pricing) — linen, with white plan cards
   ============================================================================= */
#pricing {
    background: var(--fm-canvas) !important;
    background-image: none !important;
    padding-bottom: 4.5rem !important;
}
#pricing .text-white:not(.btn) { color: var(--fm-heading) !important; }
#pricing .text-primary { color: var(--fm-primary) !important; }
#pricing .lead { color: var(--fm-body) !important; }
.pricing-section-enhanced { box-shadow: none !important; border: none !important; background: transparent !important; }

/* range slider → maroon track + thumb. NB: the track background is painted by the
   template JS (range.style.background) as you drag, so it must NOT be !important here
   or the fill would freeze. Thumb wins via #id specificity (beats Bootstrap .form-range). */
#teamRange {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100%; height: 8px;
    border-radius: 999px;
    background: linear-gradient(to right, var(--fm-primary) 10%, var(--fm-border-strong) 10%);
    outline: none;
    cursor: pointer;
}
#teamRange::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: transparent; }
#teamRange::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 22px !important; height: 22px !important;
    margin-top: -7px;
    border-radius: 50% !important;
    background: var(--fm-primary) !important;
    border: 3px solid #fff !important;
    box-shadow: 0 2px 8px rgba(142, 47, 68, .35) !important;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
#teamRange::-webkit-slider-thumb:hover { transform: scale(1.18); }
#teamRange:active::-webkit-slider-thumb {
    transform: scale(1.22);
    box-shadow: 0 0 0 7px rgba(142, 47, 68, .14), 0 2px 8px rgba(142, 47, 68, .35) !important;
}
#teamRange::-moz-range-thumb {
    -moz-appearance: none; appearance: none;
    width: 22px !important; height: 22px !important;
    border-radius: 50% !important;
    background: var(--fm-primary) !important;
    border: 3px solid #fff !important;
    box-shadow: 0 2px 8px rgba(142, 47, 68, .35);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
#teamRange::-moz-range-thumb:hover { transform: scale(1.18); }
#teamRange::-moz-range-track { height: 8px; border-radius: 999px; background: transparent; }
@media (prefers-reduced-motion: reduce) {
    #teamRange::-webkit-slider-thumb, #teamRange::-moz-range-thumb { transition: none; }
    #teamRange::-webkit-slider-thumb:hover, #teamRange:active::-webkit-slider-thumb, #teamRange::-moz-range-thumb:hover { transform: none; }
}

/* =============================================================================
   8. Forms (contact, register, invite)
   ============================================================================= */
.form-control {
    background-color: var(--fm-surface) !important;
    border: 1px solid var(--fm-border-strong) !important;
    color: var(--fm-heading) !important;
    border-radius: 12px;
}
.form-control:focus {
    background-color: var(--fm-surface) !important;
    border-color: var(--fm-primary) !important;
    box-shadow: 0 0 0 3px var(--fm-primary-tint) !important;
}
#contactForm .form-control { background-color: var(--fm-surface) !important; }
.form-label, .form-check-label { color: var(--fm-body) !important; }
.bg-white input[type="text"], .bg-white input[type="password"], .bg-white input[type="button"],
.bg-white input[type="email"], .bg-white input[type="date"], .bg-white button,
.bg-white select, .bg-white textarea {
    border: 1px solid var(--fm-border-strong) !important;
    background-color: var(--fm-surface) !important;
    border-radius: 12px;
}
::placeholder { color: var(--fm-muted) !important; opacity: 1; }

/* =============================================================================
   9. Alerts / tables / misc inherited dark bits
   ============================================================================= */
.table td, .table th { border-color: var(--fm-border) !important; }
.table-dark, .table-dark thead { color: var(--fm-body) !important; background-color: transparent !important; }

.alert-success { border: 1px solid #AC627559 !important; background-color: #AC62751f !important; color: #7d3d4d !important; }
.alert-danger  { border: 1px solid #9E2B3E59 !important; background-color: #9E2B3E1f !important; color: #8a2435 !important; }

/* =============================================================================
   10. Feature-page illustrations — native HTML/CSS mock-ups (replace the PNGs)
   ============================================================================= */
.fi {
    position: relative;
    max-width: 470px;
    margin: 1.5rem auto;
    font-family: "Poppins", sans-serif;
    text-align: left;
}
.fi-card {
    background: #fff;
    border: 1px solid var(--fm-border);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(45, 43, 38, .04), 0 18px 44px rgba(45, 43, 38, .12);
}

/* -- Rota grid scene -- */
.fi-rota { padding: 30px 6px 58px; }
.fi-rota-card { position: relative; z-index: 1; padding: 16px 16px 18px; }
.fi-rota-grid {
    display: grid;
    grid-template-columns: 84px repeat(3, 1fr);
    gap: 8px;
    align-items: stretch;
}
.fi-dow {
    align-self: end;
    text-align: center;
    font-weight: 700;
    font-size: .8rem;
    color: var(--fm-heading);
    padding-bottom: 4px;
}
.fi-emp { display: flex; align-items: center; gap: 7px; }
.fi-av {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .68rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.fi-av-1 { background: #8C2B43; }
.fi-av-2 { background: #4F6D8F; }
.fi-av-3 { background: #AC6275; }
.fi-emp-name { font-weight: 600; font-size: .82rem; color: var(--fm-heading); }
.fi-chip {
    border-radius: 10px;
    padding: 7px 4px;
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: .72rem;
    line-height: 1.1;
    display: flex; flex-direction: column; justify-content: center;
    box-shadow: 0 2px 6px rgba(45, 43, 38, .12);
}
.fi-chip small { display: block; font-weight: 500; font-size: .58rem; opacity: .9; margin-top: 2px; }
.fi-chip-work { background: #8C2B43; }
.fi-chip-holiday { background: #AC6275; }
.fi-chip-absent { background: #756258; }
.fi-slot {
    border: 1.5px dashed var(--fm-border-strong);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--fm-border-strong);
    font-size: 1.25rem; font-weight: 700;
    min-height: 44px;
}

/* tooltip pill */
.fi-tip {
    position: absolute; top: 0; left: 22px;
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--fm-heading); color: #fff;
    font-size: .76rem; font-weight: 600;
    padding: 8px 13px; border-radius: 10px;
    box-shadow: 0 10px 22px rgba(45, 43, 38, .20);
    z-index: 3;
}
.fi-tip svg { width: 15px; height: 15px; }
.fi-tip::after {
    content: ''; position: absolute; bottom: -5px; left: 22px;
    width: 11px; height: 11px; background: var(--fm-heading);
    transform: rotate(45deg);
}

/* context menu */
.fi-menu {
    position: absolute; right: -6px; bottom: 22px;
    width: 156px; padding: 8px; z-index: 4;
}
.fi-menu-item {
    padding: 7px 10px; border-radius: 8px;
    font-size: .77rem; font-weight: 500; color: var(--fm-body);
}
.fi-menu-item:first-child { color: var(--fm-primary); background: var(--fm-primary-tint); }
.fi-menu-divider { height: 1px; background: var(--fm-border); margin: 5px 6px; }

/* handwritten annotation */
.fi-annotation {
    position: absolute; left: 8px; bottom: -2px;
    display: flex; align-items: flex-end; gap: 2px;
    color: var(--fm-muted);
}
.fi-annotation span {
    font-family: "Caveat", cursive;
    font-size: 1.55rem; line-height: 1; font-weight: 700;
    transform: rotate(-4deg);
}
.fi-arrow { width: 52px; height: 33px; color: var(--fm-primary); flex-shrink: 0; }

@media (max-width: 575px) {
    .fi-menu { display: none; }
    .fi-rota-grid { grid-template-columns: 66px repeat(3, 1fr); }
}

/* -- shared illustration building blocks -- */
.fi-mini-title { font-weight: 800; font-size: 1.02rem; color: var(--fm-heading); margin: 0 0 12px 6px; }
.fi-av-4 { background: #756258; }
.fi-av-5 { background: #5C7C9E; }
.fi-av-6 { background: #9E6B57; }
.fi-emp-name small { display: block; font-weight: 500; font-size: .64rem; color: var(--fm-muted); }
.fi-btn {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; font-weight: 700; font-size: .72rem;
    padding: 7px 12px; border: 1px solid var(--fm-border-strong);
    background: #fff; color: var(--fm-body);
}
.fi-btn-primary { background: var(--fm-primary); border-color: var(--fm-primary); color: #fff; }
.fi-pill {
    display: inline-flex; align-items: center; white-space: nowrap;
    border-radius: 999px; font-weight: 700; font-size: .66rem;
    padding: 4px 11px; border: 1px solid var(--fm-border-strong);
    color: var(--fm-muted); background: #fff;
}
.fi-pill-danger { border-color: #9E2B3E; color: #9E2B3E; }
.fi-pill-warning { border-color: #C9A961; color: #8a6d33; }

/* -- B. single-day shift card + menu -- */
.fi-day { padding: 22px 8px 56px; max-width: 430px; }
.fi-day-head { text-align: center; font-weight: 800; font-size: .95rem; color: var(--fm-heading); margin-bottom: 12px; }
.fi-day-body { display: flex; align-items: center; gap: 14px; }
.fi-day .fi-emp { flex-direction: column; gap: 5px; width: 76px; flex-shrink: 0; text-align: center; }
.fi-day .fi-av { width: 44px; height: 44px; font-size: .82rem; }
.fi-day .fi-emp-name { text-align: center; }
.fi-chip-lg { flex: 1; padding: 16px 10px; font-size: .98rem; border-radius: 12px; }
.fi-chip-lg small { font-size: .72rem; margin-top: 3px; }
.fi-day .fi-menu { position: absolute; left: 78px; bottom: 4px; width: 184px; }
.fi-day .fi-menu::before {
    content: ''; position: absolute; top: -6px; left: 26px;
    width: 12px; height: 12px; background: #fff;
    border-left: 1px solid var(--fm-border); border-top: 1px solid var(--fm-border);
    transform: rotate(45deg);
}
.fi-day .fi-annotation { right: 0; left: auto; bottom: 6px; }

/* -- C. "my schedule" day list -- */
.fi-sched { padding: 14px 6px 50px; }
.fi-sched-card { padding: 16px 16px 8px; }
.fi-sched-head {
    display: flex; align-items: center; justify-content: space-between;
    font-weight: 800; font-size: 1rem; color: var(--fm-heading);
    padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--fm-border);
}
.fi-sched-head i { color: var(--fm-muted); }
.fi-sched-row {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--fm-panel); border-radius: 10px;
    padding: 11px 14px; margin-bottom: 8px;
}
.fi-sched-day { font-weight: 700; font-size: .82rem; color: var(--fm-heading); }
.fi-sched-time { text-align: right; font-weight: 800; font-size: .82rem; color: var(--fm-primary); }
.fi-sched-time small { display: block; font-weight: 500; font-size: .62rem; color: var(--fm-muted); }
.fi-sched .fi-annotation { right: 4px; left: auto; bottom: 2px; max-width: 190px; text-align: right; }
.fi-sched .fi-annotation span { text-align: right; }

/* -- D. manage leave requests / F. open exceptions (shared list card) -- */
.fi-list { padding: 6px 6px 50px; }
.fi-row-card { padding: 11px 14px; margin-bottom: 10px; }
.fi-row-head { display: flex; align-items: center; gap: 10px; }
.fi-row-head .fi-av { width: 36px; height: 36px; }
.fi-row-id { flex: 1; min-width: 0; }
.fi-row-name { display: block; font-weight: 700; font-size: .85rem; color: var(--fm-heading); line-height: 1.25; }
.fi-row-sub { display: block; font-size: .7rem; color: var(--fm-muted); }
.fi-row-open { border-color: var(--fm-border-strong); box-shadow: 0 1px 2px rgba(45,43,38,.04), 0 16px 36px rgba(45,43,38,.12); }
.fi-detail {
    display: flex; flex-wrap: wrap; gap: 8px 22px;
    margin: 12px 0 4px; padding-top: 12px; border-top: 1px solid var(--fm-border);
}
.fi-detail div { font-size: .72rem; }
.fi-detail .k { display: block; color: var(--fm-muted); font-weight: 600; margin-bottom: 1px; }
.fi-detail .v { font-weight: 700; color: var(--fm-heading); }
.fi-reason { font-size: .73rem; color: var(--fm-body); margin: 8px 0 12px; line-height: 1.45; }
.fi-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fi-actions .fi-btn { flex: 1; min-width: 0; }
.fi-list .fi-annotation { left: 50%; transform: translateX(-50%); bottom: 2px; max-width: 220px; text-align: center; }
.fi-list .fi-annotation span { transform: rotate(-3deg); }

/* -- E. log-absence modal -- */
.fi-modal { padding: 18px; max-width: 380px; }
.fi-modal-title { font-weight: 800; font-size: 1.05rem; color: var(--fm-heading); padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--fm-border); }
.fi-label { font-size: .72rem; font-weight: 600; color: var(--fm-muted); margin-bottom: 5px; }
.fi-field { background: var(--fm-canvas); border: 1px solid var(--fm-border); border-radius: 10px; height: 38px; margin-bottom: 14px; display: flex; align-items: center; padding: 0 12px; font-size: .8rem; color: var(--fm-heading); font-weight: 600; }
.fi-field-active { background: var(--fm-primary-tint); border-color: var(--fm-primary); color: var(--fm-primary); font-weight: 700; }
.fi-field-area { height: 64px; align-items: flex-start; padding-top: 10px; }
.fi-field-row { display: flex; gap: 12px; }
.fi-field-row > div { flex: 1; }
.fi-modal-actions { display: flex; gap: 10px; padding-top: 6px; }
.fi-modal-actions .fi-btn { flex: 1; padding: 10px; }
.fi-absform { padding: 8px 6px 48px; }
.fi-absform .fi-annotation { right: 0; left: auto; bottom: 8px; max-width: 180px; text-align: right; }

/* -- G. who's-off card -- */
.fi-away { padding: 14px 6px 50px; }
.fi-away-card { padding: 14px 16px; }
.fi-away-head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .92rem; color: var(--fm-heading); padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--fm-border); }
.fi-away-head i { color: var(--fm-primary); }
.fi-away-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; }
.fi-away-row .fi-av { width: 34px; height: 34px; }
.fi-away-name { flex: 1; font-weight: 700; font-size: .82rem; color: var(--fm-heading); }
.fi-away-when { font-size: .72rem; color: var(--fm-muted); font-weight: 600; margin-right: 4px; }
.fi-away .fi-annotation { right: 2px; left: auto; bottom: 4px; }

.fi-pill-ok { border-color: #AC6275; color: #AC6275; }

/* -- H. live clock-in board -- */
.fi-clock { padding: 8px 6px 48px; }
.fi-clock-card { padding: 14px 16px; }
.fi-clock-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: .95rem; color: var(--fm-heading); padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--fm-border); }
.fi-clock-date { font-weight: 600; font-size: .72rem; color: var(--fm-muted); }
.fi-clock-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; }
.fi-clock-row .fi-av { width: 32px; height: 32px; }
.fi-clock-name { flex: 1; font-weight: 700; font-size: .8rem; color: var(--fm-heading); }
.fi-clock-time { font-weight: 700; font-size: .8rem; color: var(--fm-body); }
.fi-clock .fi-annotation { right: 2px; left: auto; bottom: 4px; }

/* -- I. clock-in kiosk -- */
.fi-kiosk { padding: 14px 6px 48px; }
.fi-kiosk-card { padding: 26px 22px; text-align: center; max-width: 320px; margin: 0 auto; }
.fi-kiosk-time { font-weight: 800; font-size: 2.7rem; color: var(--fm-heading); line-height: 1; letter-spacing: -1.5px; }
.fi-kiosk-date { font-size: .8rem; color: var(--fm-muted); margin-top: 5px; }
.fi-kiosk-user { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 0; font-weight: 700; font-size: .9rem; color: var(--fm-heading); }
.fi-kiosk-user .fi-av { width: 38px; height: 38px; }
.fi-kiosk-btn { background: var(--fm-primary); color: #fff; font-weight: 700; font-size: 1rem; padding: 13px; border-radius: 12px; box-shadow: 0 10px 24px rgba(142, 47, 68, .22); }
.fi-kiosk .fi-annotation { right: 2px; left: auto; bottom: 4px; }

/* -- J. reports / insights -- */
.fi-report { padding: 8px 6px 48px; }
.fi-report-card { padding: 16px; }
.fi-report-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: .95rem; color: var(--fm-heading); margin-bottom: 14px; }
.fi-report-export { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; color: var(--fm-primary); border: 1px solid var(--fm-primary); border-radius: 8px; padding: 4px 10px; }
.fi-report-export svg { width: 13px; height: 13px; }
.fi-report-stats { display: flex; gap: 10px; margin-bottom: 16px; }
.fi-stat { flex: 1; background: var(--fm-panel); border-radius: 10px; padding: 10px 6px; text-align: center; }
.fi-stat-num { display: block; font-weight: 800; font-size: 1.15rem; color: var(--fm-primary); }
.fi-stat-lbl { font-size: .6rem; font-weight: 600; color: var(--fm-muted); }
.fi-bars { display: flex; align-items: flex-end; gap: 8px; height: 78px; padding: 0 2px; }
.fi-bar { flex: 1; background: var(--fm-primary); border-radius: 5px 5px 0 0; opacity: .82; }
.fi-bar:last-child { opacity: 1; }
.fi-bars-x { display: flex; gap: 8px; padding: 6px 2px 0; }
.fi-bars-x span { flex: 1; text-align: center; font-size: .56rem; color: var(--fm-muted); font-weight: 600; }
.fi-report .fi-annotation { right: 2px; left: auto; bottom: 4px; }

@media (max-width: 575px) {
    .fi-day .fi-menu, .fi-day .fi-annotation,
    .fi-sched .fi-annotation, .fi-absform .fi-annotation,
    .fi-away .fi-annotation, .fi-list .fi-annotation,
    .fi-clock .fi-annotation, .fi-kiosk .fi-annotation, .fi-report .fi-annotation { position: static; transform: none; margin: 12px auto 0; text-align: center; max-width: 100%; }
    .fi-day .fi-menu::before { display: none; }
}

/* -- Feature-page section rhythm --------------------------------------------
   The native .fi graphics are shorter than the old full-bleed PNGs, which
   exposed the templates' top-heavy spacing (pt-5/pb-2 + a global
   .container{margin-top:50px}). Normalise every info-section band to a
   symmetric, generous vertical rhythm so sections feel even regardless of
   graphic height. (Desktop info-container layout only; mobile uses .block-list.) */
.info-section .info-container {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
}
.info-section .info-container > .container { margin-top: 0 !important; }
.info-section .info-container .row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* graphics sit centred in their column; this trims their own doubled margin */
.info-section .fi { margin-top: 0; margin-bottom: 0; }

/* The maroon "Ready to get started?" CTA band (landing + industry pages) used a
   negative-margin + relative-top overlap hack — fine over the old continuous dark
   bg, but on the linen theme it crowds the hero above and the section below. Drop
   it so the band sits in normal flow with even spacing. (Feature pages have no
   band, so their .banner keeps its existing layout.) */
.banner:has(+ .middle-cta) { margin-bottom: 0 !important; }
/* the maroon CTA band straddles two backgrounds: linen above, cream (matching the
   bg-team section below) climbing halfway up the band. Desktop's band has symmetric
   py-4 padding and no bottom margin, so the section's 50% line == the band's midpoint.
   Scoped to >=768px: the mobile band is stacked with asymmetric padding + a bottom
   margin, where a flat 50% split wouldn't line up. */
.middle-cta { top: 0 !important; }
@media (min-width: 768px) {
    .middle-cta { background: linear-gradient(to bottom, transparent 50%, var(--fm-panel) 50%) !important; }
}

/* -- "Discover everything" band (feature + industry pages): solid maroon CTA ----
   Eyebrow → gold, headline → white (set inline on the templates), feature pills →
   white-outline that invert to white-fill on hover. */
.discover-cta {
    background: var(--fm-primary) !important;
    padding: 3.75rem 0 !important;
    margin: 0 !important;
}
.discover-cta > .container { margin-top: 0 !important; }
.discover-cta .jumbotron { margin-bottom: 0 !important; }
.discover-cta .display-2 { color: var(--fm-gold) !important; }   /* "Discover everything…" eyebrow */
.discover-cta .btn-outline-primary {
    background: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, .55) !important;
    color: #fff !important;
}
.discover-cta .btn-outline-primary:hover,
.discover-cta .btn-outline-primary:focus {
    background: #fff !important;
    border-color: #fff !important;
    color: var(--fm-primary) !important;
}

/* Landing "smart scheduling" block: maroon brand anchor (the all-light version
   blended in too much). Compact text + real product graphic — NOT the old
   feature-grid / stat-card band. White headings, gold accent, cream body; the
   white .fi card pops against the maroon. */
.info-section .info-container.info-maroon,
.info-section.info-maroon { background: var(--fm-primary) !important; }
.info-maroon, .info-maroon .text-dark { color: var(--fm-cream) !important; }
.info-maroon h2, .info-maroon h3, .info-maroon strong { color: #fff !important; }
.info-maroon .text-primary { color: var(--fm-gold) !important; }
.info-maroon .fi-annotation span { color: var(--fm-cream) !important; }
.info-maroon-eyebrow { color: var(--fm-gold) !important; font-weight: 700; font-size: .92rem; letter-spacing: .3px; margin-bottom: .5rem; }
.info-maroon-bullets { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem 2.25rem; margin: 1.75rem 0 0; }
.info-maroon-bullets li { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: #fff !important; }
.info-maroon-bullets svg { width: 18px; height: 18px; color: var(--fm-gold); stroke-width: 3; }

/* Landing "Discover everything" — tall feature cards with quiet hover micro-moves */
.discover-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    max-width: 1080px;
    margin: 0 auto 2.5rem;
}
.discover-card {
    flex: 1 1 160px;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid var(--fm-border);
    border-radius: 16px;
    padding: 30px 16px 20px;
    min-height: 220px;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(45, 43, 38, .04);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.discover-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(45, 43, 38, .13);
    border-color: var(--fm-border-strong);
}
.discover-card-icon {
    width: 56px; height: 56px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--fm-primary-tint); color: var(--fm-primary);
    margin-bottom: 16px;
    transition: background .22s ease, color .22s ease, transform .22s ease;
}
.discover-card-icon svg { width: 26px; height: 26px; }
.discover-card:hover .discover-card-icon {
    background: var(--fm-primary); color: #fff;
    transform: scale(1.06) rotate(-3deg);
}
.discover-card-name { font-weight: 700; color: var(--fm-heading); font-size: 1.02rem; margin-bottom: .35rem; }
.discover-card-desc { font-size: .82rem; color: var(--fm-muted); line-height: 1.45; }
.discover-card-go {
    margin-top: auto; padding-top: 14px;
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--fm-primary); font-weight: 700; font-size: .8rem;
    opacity: 0; transform: translateY(4px);
    transition: opacity .22s ease, transform .22s ease;
}
.discover-card-go svg { width: 14px; height: 14px; transition: transform .22s ease; }
.discover-card:hover .discover-card-go { opacity: 1; transform: translateY(0); }
.discover-card:hover .discover-card-go svg { transform: translateX(3px); }
@media (hover: none) { .discover-card-go { opacity: 1; transform: none; } }

/* honour reduced-motion intent of the calm theme */
@media (prefers-reduced-motion: reduce) {
    .scroll-image, .scroll-text { transition: none !important; }
    .discover-card, .discover-card-icon, .discover-card-go, .discover-card-go svg { transition: none !important; }
    .discover-card:hover, .discover-card:hover .discover-card-icon { transform: none; }
    .discover-card-go { opacity: 1; transform: none; }
}
