@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;
}

/* Icon flyouts (Features, Industries) are wider than the base 480px so the icon
   tiles don't push long labels onto two lines; `left` shifts by the same
   proportion the ::before/::after arrow sits at (45%) so the pointer stays
   under its nav link. */
@media (min-width: 992px) {
    .nav-sub-menu-wide {
        min-width: 560px !important;
        left: -225px !important;
    }
}

/* Flyout menu rows: icon tile + label, echoing the landing "Discover everything"
   cards so the nav and the page speak the same language. */
.dropdown-item.nav-icon-item {
    display: flex !important;
    align-items: center;
    gap: .7rem;
    padding: .55rem .7rem !important;
    border-radius: 10px !important;
    font-weight: 600;
    white-space: normal;
    line-height: 1.3;
}
.nav-menu-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--fm-primary-tint);
    color: var(--fm-primary);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-menu-icon svg {
    width: 17px;
    height: 17px;
    stroke-width: 2;
}
/* Quiet hover: a warm linen wash, no maroon outline. The icon tile and the label
   already carry the state, so the row itself doesn't need a boxy tinted slab. */
.dropdown-item.nav-icon-item:hover,
.dropdown-item.nav-icon-item:focus {
    background-color: var(--fm-canvas) !important;
    border-color: transparent !important;
}

/* same scale + tilt the "Discover everything" card icons do */
.dropdown-item.nav-icon-item:hover .nav-menu-icon,
.dropdown-item.nav-icon-item:focus .nav-menu-icon {
    background: var(--fm-primary) !important;
    color: #fff !important;
    transform: scale(1.06) rotate(-3deg);
}
@media (prefers-reduced-motion: reduce) {
    .nav-menu-icon { transition: none !important; }
    .dropdown-item.nav-icon-item:hover .nav-menu-icon,
    .dropdown-item.nav-icon-item:focus .nav-menu-icon { transform: none; }
}

/* =============================================================================
   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);
}

/* Feature link buttons (landing hero + the "Discover everything" band on every
   feature/industry page, both browser and mobile) wear the same icons as the
   flyout menu and the landing cards — a bare glyph, no tinted tile, so the
   pill stays quiet. currentColor means it tracks the button's own colour,
   white on the maroon band and flipping with any hover fill. */
.feature-link-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .55rem;
}
.feature-link-btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

@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; }

/* Vertical rhythm inside the "Discover everything" band. The template's bootstrap
   utilities left the title only 24px above the card grid while the grid sat 40px
   above the closing copy — so the title read as part of the grid, and the closing
   line + CTA read as one cramped lump. Grouped properly: title, then grid, then
   the trial note tight to its own button. */
.discover_feature {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}
.discover_feature > .container { margin-top: 0 !important; }
/* browser templates use <h2>, the mobile ones <h4 class="pb-3"> — cover both */
.discover_feature h2,
.discover_feature h3,
.discover_feature h4 {
    line-height: 1.3;
    padding-bottom: 0 !important;
    margin-bottom: 2.5rem !important;
}
.discover_feature .discover-cards { margin-bottom: 2.75rem; }
.discover_feature p.text-muted { margin-bottom: 1.5rem; }
@media (max-width: 767.98px) {
    .discover_feature { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    .discover_feature h2,
    .discover_feature h3,
    .discover_feature h4 { margin-bottom: 2rem !important; }
    .discover_feature .discover-cards { margin-bottom: 2rem; }
}

/* =============================================================================
   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;
    /* 4rem matches the 3rem section padding-top + the container's 1rem mt, so the
       band has equal breathing room above and below the cards */
    padding-bottom: 4rem !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, at a chunky 12px so it reads as a real
   control. 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. Everything else is !important because browser-common.css
   (desktop) and head-mobile.twig's inline <style> (mobile) both still carry the
   legacy dark-theme cyan #50C4DE slider rules at the same #id specificity. */
#teamRange {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100%;
    height: 12px !important;
    border-radius: 999px !important;
    background: linear-gradient(to right, var(--fm-primary) 10%, var(--fm-border-strong) 10%);
    outline: none;
    cursor: pointer;
}
#teamRange::-webkit-slider-runnable-track { height: 12px; border-radius: 999px; background: transparent; }
#teamRange::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 26px !important; height: 26px !important;
    margin-top: -7px;
    border-radius: 50% !important;
    background: var(--fm-primary) !important;
    border: 4px 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:hover::-webkit-slider-thumb,
#teamRange::-webkit-slider-thumb:hover { background: var(--fm-primary) !important; transform: scale(1.12); }
#teamRange:active::-webkit-slider-thumb {
    transform: scale(1.16);
    box-shadow: 0 0 0 8px rgba(142, 47, 68, .14), 0 2px 8px rgba(142, 47, 68, .35) !important;
}
#teamRange::-moz-range-thumb {
    -moz-appearance: none; appearance: none;
    width: 26px !important; height: 26px !important;
    border-radius: 50% !important;
    background: var(--fm-primary) !important;
    border: 4px solid #fff !important;
    box-shadow: 0 2px 8px rgba(142, 47, 68, .35);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
#teamRange:hover::-moz-range-thumb,
#teamRange::-moz-range-thumb:hover { background: var(--fm-primary) !important; transform: scale(1.12); }
#teamRange::-moz-range-track { height: 12px; border-radius: 999px; background: transparent; }
#teamRange:focus-visible { outline: 2px solid var(--fm-primary); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
    #teamRange::-webkit-slider-thumb, #teamRange::-moz-range-thumb { transition: none; }
    #teamRange:hover::-webkit-slider-thumb, #teamRange:active::-webkit-slider-thumb,
    #teamRange:hover::-moz-range-thumb { transform: none; }
}

/* -- 7b. Estimator + "what's included", as two equal-height cards on one grid.
   The intro spans the full width above them so both cards share a top edge.
   Content is deliberately balanced so the two cards come out near the same
   natural height — features run in two columns, and the price sits in a tinted
   panel that absorbs whatever slack is left instead of leaving a dead gap. */
.pricing-card-intro { margin-bottom: 1.5rem; }
.pricing-card-heading {
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--fm-heading) !important;
    margin-bottom: .6rem;
}
.pricing-card-lead {
    margin-bottom: 0;
    font-size: .95rem;
    color: var(--fm-body) !important;
}

#pricing .row { align-items: stretch; }

.pricing-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--fm-surface);
    border: 1px solid var(--fm-border);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(45, 43, 38, .04);
    padding: 1.6rem 1.6rem 1.5rem;
}
.pricing-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fm-heading);
    margin: 0 0 1.1rem;
}

/* Segmented monthly/annual switch — one control, not two loose buttons */
.plan-toggle {
    display: flex;
    gap: .4rem;
    padding: .3rem;
    background: var(--fm-surface);
    border: 1px solid var(--fm-border);
    border-radius: 14px;
    margin-bottom: 1.5rem;
}
.plan-toggle .btn-plan {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem .8rem !important;
    border-radius: 10px !important;
    border-color: transparent !important;
    background: transparent !important;
    font-size: .95rem;
    font-weight: 600;
}
.plan-toggle .btn-plan:hover { background: var(--fm-primary-tint) !important; color: var(--fm-primary) !important; }
.plan-toggle .btn-plan.active:hover { background: var(--fm-primary) !important; color: #fff !important; }
.plan-toggle .btn-plan.active {
    background: var(--fm-primary) !important;
    border-color: var(--fm-primary) !important;
    box-shadow: 0 1px 3px rgba(142, 47, 68, .28) !important;
}
.plan-save {
    display: inline-block;
    padding: .1rem .4rem;
    border-radius: 999px;
    background: var(--fm-primary-tint);
    color: var(--fm-primary);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}
.btn-plan.active .plan-save {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.pricing-slider { margin-bottom: 1.5rem; }
.pricing-slider-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: .8rem;
}
.pricing-slider-label { color: var(--fm-muted); font-size: .9rem; }
.pricing-slider-count { color: var(--fm-heading); font-weight: 700; }
.pricing-slider-scale {
    display: flex;
    justify-content: space-between;
    margin-top: .45rem;
}
.pricing-slider-scale small { color: var(--fm-muted); font-size: .78rem; }

/* The price is the point of the card: a tinted panel, not a footnote under a
   hairline. margin-top:auto lets it take up the leftover height deliberately. */
.pricing-total {
    margin-top: auto;
    background: var(--fm-primary-tint);
    border-radius: 14px;
    padding: 1.15rem 1.3rem;
}
.pricing-total-label {
    display: block;
    margin-bottom: .35rem;
    color: var(--fm-primary);
    font-size: .82rem;
    font-weight: 700;
    opacity: .8;
}
.pricing-total-main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .4rem;
    color: var(--fm-primary);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.1;
}
.pricing-total-period {
    font-size: .95rem;
    font-weight: 600;
    color: var(--fm-primary);
    opacity: .75;
}
.pricing-total-sub {
    margin-top: .25rem;
    color: var(--fm-body);
    font-size: .92rem;
}
.pricing-total-note {
    margin: .6rem 0 0;
    padding-top: .6rem;
    border-top: 1px solid rgba(142, 47, 68, .14);
    color: var(--fm-primary);
    font-size: .84rem;
    font-weight: 600;
}

/* A grid of feature chips rather than a bare list — each cell is the same icon
   tile + label used in the Features flyout, set on a linen panel so the eight
   features read as a block of capability instead of eight loose lines.
   auto-fit means it is two-up wherever the column is wide enough and drops to
   one-up on narrow columns (tablet md, and phones) without a breakpoint. */
.pricing-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: minmax(50px, 1fr);
    align-content: stretch;
    gap: .6rem;
    flex: 1 1 auto;          /* absorb the card's spare height into the rows
                                instead of leaving a gap above the CTA */
    list-style: none;
    margin: 0 0 1.4rem;
    padding: 0;
}
.pricing-feature {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .7rem;
    background: var(--fm-surface);
    border: 1px solid var(--fm-border);
    border-radius: 12px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.pricing-feature-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.pricing-feature-name {
    color: var(--fm-heading);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.25;
}
.pricing-feature-desc {
    margin-top: .1rem;
    color: var(--fm-muted);
    font-size: .76rem;
    font-weight: 500;
    line-height: 1.3;
}
.pricing-feature:hover {
    border-color: var(--fm-border-strong);
    box-shadow: 0 2px 8px rgba(45, 43, 38, .06);
}
.pricing-feature .nav-menu-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
}
.pricing-feature .nav-menu-icon svg { width: 15px; height: 15px; }
/* same fill + tilt the menu rows and the landing cards do */
.pricing-feature:hover .nav-menu-icon,
.pricing-feature:focus-within .nav-menu-icon {
    background: var(--fm-primary) !important;
    color: #fff !important;
    transform: scale(1.06) rotate(-3deg);
}
@media (prefers-reduced-motion: reduce) {
    .pricing-feature { transition: none; }
    .pricing-feature:hover .nav-menu-icon,
    .pricing-feature:focus-within .nav-menu-icon { transform: none; }
}
.pricing-cta {
    margin-top: auto;
    width: 100%;
    padding: .85rem 1rem !important;
    border-radius: 12px !important;
}

@media (max-width: 767.98px) {
    .pricing-card { padding: 1.4rem 1.15rem 1.3rem; }
    .pricing-total-main { font-size: 2rem; }
    /* the template drops to pt-1 on mobile, leaving the band only 20px above the
       first card; 2rem + the container's 1rem mt matches the 3rem below */
    #pricing { padding-top: 2rem !important; padding-bottom: 3rem !important; }
}

/* Reassurance line under the estimator (pricing page). Its own section so it can
   sit below #pricing while still reading as part of the same cream band — plain
   tick + text, deliberately not pills. */
.pricing-assurance {
    background: var(--fm-canvas);
    padding: 0 0 4rem;
}
.assurance-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 2.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.assurance-list li {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--fm-body);
    font-size: .95rem;
    font-weight: 600;
}
.assurance-list svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: var(--fm-primary);
    stroke-width: 2.5;
}
/* the strip carries the band's bottom padding, so the section above only needs
   the gap between the cards and this line */
#pricing:has(+ .pricing-assurance) { padding-bottom: 2.5rem !important; }

/* --- Pages that close the estimator with the assurance strip (/pricing and the
   landing page) get the white treatment; `:has(+ .pricing-assurance)` is the
   hook, so the 36 pages without a strip keep the cream band. On /pricing this
   also pulls the estimator up close under the hero heading. --- */
#pricing:has(+ .pricing-assurance),
.pricing-assurance { background: var(--fm-surface) !important; }
#pricing:has(+ .pricing-assurance) { padding-top: 0 !important; }
#pricing:has(+ .pricing-assurance) > .container { margin-top: 0 !important; }
/* the gap lives in the banner's PADDING, not the jumbotron's margin: with the
   banner's bottom padding at 0 that margin collapses out of the section and the
   linen <body> shows through as a stripe between the two white sections. */
.banner:has(+ #pricing) { padding-bottom: 2rem !important; }
.banner:has(+ #pricing) .jumbotron { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* --- /resources header ---------------------------------------------------
   Three problems here: the hero had no background of its own (it showed the
   linen <body>, so the edge into the white list below was arbitrary), .banner's
   legacy `margin-bottom: -90px` pulled that list up over the hero's last 90px,
   and the lead sat 8px under the title while 90px of nothing sat below it. */
.banner.resources-hero {
    background: var(--fm-canvas) !important;
    margin-bottom: 0 !important;
    /* the navbar is position:fixed and 91px tall, so the top padding has to clear
       it before the title starts — at 3.5rem the heading sat under the nav */
    padding: 9rem 0 3.5rem !important;
}
.banner.resources-hero > .container { margin-top: 0 !important; }
.banner.resources-hero .jumbotron {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.banner.resources-hero h1 { margin-bottom: 1rem !important; }
.banner.resources-hero .lead {
    max-width: 620px;
    margin: 0 auto !important;
    padding: 0 !important;
}
@media (max-width: 767.98px) {
    .banner.resources-hero { padding: 3.5rem 0 2.5rem !important; }
}
/* the pricing hero's standfirst carries the trial promise now that the eyebrow
   is gone — brand maroon, a step up in size from a regular .lead */
.lead.pricing-lead {
    color: var(--fm-primary) !important;
    font-size: 1.2rem;
    font-weight: 600;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 767.98px) {
    .lead.pricing-lead { font-size: 1.05rem; }
}
@media (max-width: 767.98px) {
    .pricing-assurance { padding-bottom: 3rem; }
    .assurance-list { gap: .6rem 1.5rem; }
    .assurance-list li { font-size: .88rem; }
}

/* Pricing-page FAQ: centred stack on cream, closing the page after the white
   estimator band. `.faq.pricing-faq` to out-rank the generic
   `.faq.bg-primary-dark { background: var(--fm-surface) }` above. */
.faq.pricing-faq { background: var(--fm-canvas) !important; }
.pricing-faq-intro {
    max-width: 680px;
    margin: 0 auto 2.5rem;
    text-align: center;
}
.pricing-faq-intro p { margin-bottom: 0; }
.pricing-faq .faq-accordion { max-width: 780px; margin: 0 auto; }
/* Landing page: the estimator gets its own headed band. Without this it shared
   the cream of the "Discover everything" section directly above it with a 0px
   seam, so it read as a continuation rather than a section of its own. White
   here separates it, and `.pricing-heading + #pricing` keeps the two together. */
.pricing-heading {
    background: var(--fm-surface);
    padding: 4rem 0 0;
}
.pricing-heading-title {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--fm-heading);
    margin-bottom: .75rem;
}
.pricing-heading .pricing-lead { margin-bottom: 0; }
.pricing-heading + #pricing {
    background: var(--fm-surface) !important;
    padding-top: 2rem !important;
}
@media (max-width: 767.98px) {
    .pricing-heading { padding-top: 3rem; }
    .pricing-heading-title { font-size: 1.8rem; }
    .pricing-heading + #pricing { padding-top: 1.5rem !important; }
}

/* quiet text CTA closing the FAQ — a link, not another button; the maroon
   "Start your free trial" one sits in the card above */
.pricing-faq-cta {
    margin: 2.25rem 0 0;
    text-align: center;
    color: var(--fm-muted);
    font-size: .98rem;
}
.pricing-faq-cta a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--fm-primary) !important;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1.5px solid transparent;
    transition: border-color .18s ease;
}
.pricing-faq-cta a:hover,
.pricing-faq-cta a:focus-visible { border-bottom-color: var(--fm-primary); }
.pricing-faq-cta svg {
    width: 15px;
    height: 15px;
    transition: transform .18s ease;
}
.pricing-faq-cta a:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
    .pricing-faq-cta a, .pricing-faq-cta svg { transition: none; }
    .pricing-faq-cta a:hover svg { transform: none; }
}
@media (max-width: 575.98px) {
    .pricing-card-heading { font-size: 1.3rem; }
}

/* =============================================================================
   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; }

/* -- 9a. Cookie banner (common/footer.twig): a slim strip on phones. The copy keeps
   11rem beside the button; a wider button group wraps beneath it as one row.
   !important beats the banner's inline styles. ------------------------------ */
@media (max-width: 575.98px) {
    #cookie-consent-banner { padding: .75rem 1rem !important; }
    #cookie-consent-banner > div { gap: .5rem .75rem !important; }
    #cookie-consent-banner p {
        flex: 1 1 11rem;
        font-size: .8rem !important;
        line-height: 1.4;
    }
    #cookie-consent-banner .btn {
        font-size: .875rem;
        padding: .625rem 1rem !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; }
/* Same hack, same problem on the pricing page: .banner is position:relative, so
   in the 90px it steals from the section below it paints its own white OVER that
   section's background. The pricing band's cream therefore only became visible
   90px down — below the top of the cards sitting inside it. Drop the overlap so
   the band's background starts where the band starts. */
.banner:has(+ #pricing) { 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;
}
/* Mobile pages render the same five links as a horizontal scroll strip of
   .bg-dark-tone pills. Section 6 paints those white for light backgrounds, but
   .feature-scroll only ever appears inside this maroon band — white pill + the
   .btn.bg-dark-tone white text left the labels invisible. Match the pills above. */
.discover-cta .feature-scroll .btn.bg-dark-tone {
    background: transparent !important;
    background-color: transparent !important;
    border: 1.5px solid rgba(255, 255, 255, .55) !important;
    color: #fff !important;
}
.discover-cta .feature-scroll .btn.bg-dark-tone:hover,
.discover-cta .feature-scroll .btn.bg-dark-tone:focus {
    background: #fff !important;
    background-color: #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; } }
/* From lg up the five sit in one row and share its tracks (subgrid), so a name that
   wraps moves every caption down with it. Narrower screens keep the wrapping flex. */
@media (min-width: 992px) {
    .discover-cards {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto 1fr;
        row-gap: 0;
        min-height: 220px; /* a subgrid card's own min-height no longer sizes the row */
    }
    /* browser-common's `.discover_feature a { width: 17% }` was only ever beaten by flex-basis */
    .discover-cards .discover-card {
        width: auto;
        display: grid;
        grid-row: span 4;
        grid-template-rows: subgrid;
        justify-items: center;
        align-items: start;
    }
}

/* 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; }
}

/* ===== Mobile spacing tune-up (<=991px) — rhythm only; slide-in animations untouched ===== */
@media (max-width: 991.98px) {
  /* hero: breathing room under the nav + tidy bottom */
  .banner .jumbotron { padding-top: 1.9rem !important; padding-bottom: .85rem !important; }
  /* remove the position:top:46px hack that left a large dead gap before the CTA band */
  .middle-cta { position: static !important; top: auto !important; margin: 1rem 0 1.25rem !important; }
  /* consistent vertical rhythm across the big sections */
  .text-center.discover-cta { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .faq { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  /* keep (currently broken) info images from forcing horizontal overflow */
  .section--vertical img { max-width: 100% !important; height: auto !important; }
}

/* Mobile hero spacing — tighten the hero->CTA-band gap + breathing under the nav */
@media (max-width: 991.98px) {
  .banner .jumbotron { padding-top: 2rem !important; padding-bottom: 0 !important; }
  .banner { padding-bottom: 8px !important; }
  .middle-cta { margin-top: 12px !important; margin-bottom: 24px !important; }
}