@import url("./palette-2027.css");
/* Component mappings only. Palette values live in palette-2027.css. */
/* .f27-home previously declared its own text tokens, shadowing the root. */
html body.f27-home { --f27-ink: inherit; --f27-muted: inherit; }
html, html body { background-color: var(--f27-paper, #F9F9F6); color: var(--f27-ink, #292c2b); }
html .f27-drawer, html .f27-drawer__links > a, html .f27-drawer__group > button,
html .f27-drawer__links a[aria-current="page"], html .f27-drawer__secondary a:hover { color: var(--f27-ink, #292c2b); }
html .f27-drawer__sub a, html .f27-drawer__secondary a { color: var(--f27-muted, #636966); }
html .f27-control.f27-menu, html .f27-login, html .f27-login:is(:hover, :focus-visible),
html .f27-drawer .f27-menu, html .f27-drawer__toggle-layer .hamburger-nav__toggle { color: var(--f27-ink, #292c2b); }
html .f27-brand { color: var(--f27-accent-text, #084834); }
html .nav_wrap { background-color: var(--f27-paper, #F9F9F6); }
html .nav_wrap .hamburger-nav__toggle { background: var(--f27-paper, #F9F9F6); color: var(--f27-ink, #292c2b); border-color: var(--f27-line, #DEDED7); }
html .hamburger-nav__toggle-bar { background: currentColor; }
html .nav_wrap > .padding-global .btn-secondary[href^="https://app.fisar.co.uk/auth/sign-in"] :is(.btn-icon-content, .card-content_mask) { color: var(--f27-ink, #292c2b); }
html .nav_wrap > .padding-global .btn-secondary[href^="https://app.fisar.co.uk/auth/sign-in"] .btn-icon-content { border-color: var(--f27-line, #DEDED7); }
/* Pricing context affects the persistent bar, never the portalled menu toggle. */
html[data-f27-header-context="pricing"] .nav_wrap,
html[data-f27-header-context="pricing"] .f27-bar { background: var(--f27-brand, #084834); color: var(--f27-on-brand, #F8F8F2); border-color: #356956; }
html[data-f27-header-context="pricing"] .nav_wrap :is(.f27-brand, .f27-login, .f27-control.f27-menu, .nav_logo, .hamburger-nav__toggle) { color: var(--f27-on-brand, #F8F8F2); }
html[data-f27-header-context="pricing"] .nav_wrap :is(.f27-login, .f27-control.f27-menu, .hamburger-nav__toggle) { background: transparent; border-color: #749384; }
html[data-f27-header-context="pricing"] .nav_wrap :is(.f27-login, .f27-control.f27-menu):hover { background: #245C48; }
html[data-f27-header-context="pricing"] .nav_wrap .f27-book { border-color: #749384; }

/* Symbol-only native theme buttons, shared by drawer and every footer. */
.f27-theme-controls { display: grid; justify-items: start; gap: .55rem; color: var(--f27-ink, #292c2b); font: 400 .75rem/1.5 "DM Sans", sans-serif; }
.f27-theme-controls__choices { display: inline-flex; gap: .25rem; padding: .2rem; border: 1px solid var(--f27-line, #DEDED7); border-radius: .35rem; background: var(--f27-paper, #F9F9F6); }
.f27-theme-controls .f27-theme-controls__button { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; min-height: 2.75rem; padding: .6rem; border: 1px solid transparent; border-radius: .2rem; background: transparent; color: var(--f27-muted, #636966); font: inherit; cursor: pointer; transition: color .2s, background-color .2s, border-color .2s; }
.f27-theme-controls .f27-theme-controls__button[aria-pressed="true"] { background: var(--f27-surface-deep, #EFEFE9); border-color: var(--f27-line, #DEDED7); color: var(--f27-ink, #292c2b); }
.f27-theme-controls .f27-theme-controls__button:hover { color: var(--f27-ink, #292c2b); background: var(--f27-surface, #F1F1EC); }
.f27-theme-controls__button svg { display: block; flex: none; }
.f27-theme-controls .f27-theme-controls__button:focus-visible { outline: 2px solid var(--f27-focus, #438260); outline-offset: 2px; }
.f27-drawer__footer > .f27-theme-controls { margin-block: 1.25rem; }
html:root :is(.f27-homepage, .f27-drawer, .f27-hero-modal, .f27-contact-page) :focus-visible { outline-color: var(--f27-focus, #438260); }

/* Fixed-colour typography in migrated sections. Surface variables remain local. */
html:root :is(.f27-hero-showcase, .f27-hero-showcase h1, .f27-hero-modal, .f27-hero-copy__title,
.f27-integrations, .f27-integrations__copy strong, .f27-integrations__name,
.f27-comparison, .f27-comparison__table, .f27-comparison__sources summary,
.f27-faq, .f27-cta-section, .f27-cta-section__heading) { color: var(--f27-ink, #292c2b); }
html:root :is(.f27-hero-showcase h1 > span, .f27-hero__description, .f27-hero-showcase .f27-hero__reassurance,
.f27-showcase__card, .f27-showcase__controls, .f27-hero-modal .f27-hero-modal__heading h2,
.f27-hero-modal__caption, .f27-hero-copy__label, .f27-hero-copy__description,
.f27-integrations__eyebrow, .f27-integrations__copy, .f27-integrations__reassurance,
.f27-audiences__eyebrow, .f27-audiences__description,
.f27-faq .f27-faq__eyebrow, .f27-faq .f27-faq__answer p,
.f27-comparison .f27-comparison__intro, .f27-comparison .f27-comparison__scope,
.f27-comparison__table .f27-comparison__corner, .f27-comparison__provider-meta,
.f27-comparison__table small, .f27-comparison .f27-comparison__notes,
.f27-comparison__sources summary span, .f27-comparison .f27-comparison__scroll-hint,
.f27-cta-section__reassurance, .f27-cta-section__trust-item) { color: var(--f27-muted, #636966); }
html .fw27 { --fw27-ink: var(--f27-ink, #292c2b); --fw27-muted: var(--f27-muted, #636966); }
html:root :is(.fw27__description, .fw27__status) { color: var(--f27-muted, #636966); }
html:root :is(.fw27__icon, .f27-showcase__arrow, .f27-hero-modal__close, .f27-showcase__entry, .f27-comparison__source-copy a) { color: var(--f27-accent-text, #084834); }
html:root :is(.f27-hero-showcase .f27-hero__book, .f27-cta-section__button--secondary) { color: var(--f27-ink, #292c2b); }
html .f27-cta-section__button--primary { color: var(--f27-on-brand, #F8F8F2); }
html .f27-cta-section__heading::before, html .f27-cta-section__actions::before { background: radial-gradient(ellipse at center, var(--f27-paper, #F9F9F6) 0%, var(--f27-paper, #F9F9F6) 38%, transparent 78%); }
html .f27-cta-section__reassurance::before { background: radial-gradient(ellipse at center, var(--f27-paper, #F9F9F6) 0%, var(--f27-paper, #F9F9F6) 58%, transparent 100%); }
html .f27-comparison__table :is(th, td), html .f27-comparison__sources { border-color: var(--f27-line, #DEDED7); }
html .f27-comparison__table .f27-comparison__fisar { background: var(--f27-surface, #F1F1EC); border-color: var(--f27-accent-text, #084834); }
html .f27-comparison__scroll { scrollbar-color: var(--f27-muted, #636966) var(--f27-surface, #F1F1EC); }
@media (max-width: 767px) { html .f27-comparison__table tbody th { background: var(--f27-surface-deep, #EFEFE9); } }

/* Pricing remains a green section with readable cards in either appearance. */
html .f27-pricing { --f27-pricing-ink: var(--f27-ink, #292c2b); --f27-pricing-muted: var(--f27-muted, #636966); }
html .f27-pricing .f27-pricing__card { color: var(--f27-ink, #292c2b); }
html .f27-pricing .f27-pricing__options label > span { background: var(--f27-paper, #F9F9F6); color: var(--f27-ink, #292c2b); border-color: var(--f27-line, #DEDED7); }
html .f27-pricing .f27-pricing__options input:checked + span { background: var(--f27-ink, #292c2b); color: var(--f27-paper, #F9F9F6); border-color: var(--f27-ink, #292c2b); }
html .f27-pricing .f27-pricing__options input:not(:checked):hover + span { background: var(--f27-surface-deep, #EFEFE9); }
html .f27-pricing .f27-pricing__button--secondary { color: var(--f27-ink, #292c2b); border-color: var(--f27-line, #DEDED7); }
html .f27-pricing .f27-pricing__balance { border-color: var(--f27-line, #DEDED7); }
html .f27-pricing .f27-pricing__options input:focus-visible + span { outline-color: var(--f27-focus, #438260); }

/* Legacy components: preserve stable brand swatches for coloured panels and
   photographic overlays; remap neutral surfaces and text at component level. */
html .fisar-pricing, html #fisar-pricing, html .fisar-doc {
  --fp-ink: var(--f27-ink, #292c2b); --fp-bg: var(--f27-paper, #F9F9F6);
  --fp-surface: var(--f27-paper, #F9F9F6); --fp-surface-2: var(--f27-surface, #F1F1EC);
  --fp-muted: var(--f27-muted, #636966); --fp-darker: var(--f27-surface-deep, #EFEFE9);
  --fp-line: var(--f27-line, #DEDED7); --fp-line-strong: var(--f27-line, #DEDED7);
  --fd-ink: var(--f27-ink, #292c2b); --fd-bg: var(--f27-paper, #F9F9F6);
  --fd-surface: var(--f27-surface, #F1F1EC); --fd-line: var(--f27-line, #DEDED7);
  --fd-muted: var(--f27-muted, #636966);
}
html[data-f27-theme="dark"] :is(.text-colour-green, .text-colour-green-nc, .text-colour-black:not(svg), .nav_logo) { color: var(--f27-ink, #F0F2E9); }
html[data-f27-theme="dark"] :is(.btn-secondary .card-content_mask, .btn-inner-secondary) { color: var(--f27-ink, #F0F2E9); }
html[data-f27-theme="dark"] .btn-secondary:hover .card-content_mask { color: #292c2b; }

/* Keep small immutable dark brand marks legible on their own light plates.
   Never invert photographs, illustrations, Lottie renderers or video. */
html[data-f27-theme="dark"] :is(.f27-comparison__provider img, .f27-comparison__answer img) { background: #F8F8F2; border-radius: .2rem; }
html[data-f27-theme="dark"] .f27-integrations__cell { background: #EFEFE9; }
@media (prefers-reduced-motion: reduce) { .f27-theme-controls__button { transition: none; } }

/* Specificity matches the component heading rules. */
html .f27-cta-section h2.f27-cta-section__heading { color: var(--f27-ink, #292c2b); }
html .f27-homepage .f27-integrations__heading, html .f27-integrations__compliance-label { color: var(--f27-muted, #636966); }
html:root[data-f27-theme="dark"] .f27-integrations__name { color: #292c2b; }
html[data-f27-header-context="pricing"] .f27-brand-icon { filter: brightness(0) invert(.95); }

html .f27-homepage .f27-hero-showcase h1 { color: var(--f27-ink, #292c2b); }
/* Exported neutral components with fixed cream/grey backgrounds. */
html :is(.section_about, .section_our-solution, .fisar-pricing, .tag-pricing.outlined) { background-color: var(--f27-paper, #F9F9F6); }
html :is(.accordion-css.slider-accordian, .slide-inner, .stack-cards__card, .footer-info-container, .card-inner, .card-link_content, .page-bottom-radius) { background-color: var(--f27-surface, #F1F1EC); }
html .section_problem { background: var(--f27-surface-deep, #EFEFE9); }
html :is(.divider-line, .horizontal-line.background-colour-grey) { background-color: var(--f27-line, #DEDED7); }
html .btn-icon-content.btn-inner-secondary { background-color: var(--f27-paper, #F9F9F6); color: var(--f27-ink, #292c2b); }
html .btn-icon-link:not(.btn-secondary) .btn-icon-content { color: var(--f27-on-brand, #F8F8F2); }
html .btn-icon-link .btn-icon-icon { color: #084834; }
html .btn-icon-link:not(.btn-secondary):hover .card-content_mask { color: #084834; }
html .fp-pilot { --fpp-ink: var(--f27-ink, #292c2b); }
html .fp-pilot .fpp-card:not(.fpp-card--green), html .fp-pilot .fpp-table-wrap { background: var(--f27-paper, #F9F9F6); border-color: var(--f27-line, #DEDED7); }
html .fp-pilot :is(.fpp-total, .fpp-cost-context, .fpp-table thead) { background: var(--f27-surface-deep, #EFEFE9); border-color: var(--f27-line, #DEDED7); }
html .fp-pilot :is(.fpp-tax, .fpp-selector .fpp-slider-help, .fpp-table caption) { color: var(--f27-muted, #636966); }
html .fp-pilot :is(.fpp-quote a, .fpp-faq a, .fpp-number, .fpp-unit, .fpp-bundle-stops button) { color: var(--f27-accent-text, #084834); }
html .fp-pilot .fpp-bundle-stops button:is(:hover, [aria-pressed="true"]) { background: var(--f27-surface, #F1F1EC); border-color: var(--f27-accent-text, #084834); }
html .fp-pilot .fpp-link > span[aria-hidden], html .fp-pilot .fpp-quote a > span[aria-hidden] { display: none; }
html .accordion-css .tag-text-heading { color: var(--f27-ink, #292c2b); }
html .footer11_component .btn-icon-content, html .footer-info-container .btn-icon-content { color: var(--f27-on-brand, #F8F8F2); }
html .btn-icon-content.button-large-cta .heading-style-h2 { color: inherit; }
html .f27-homepage .f27-hero-showcase { color: var(--f27-ink, #292c2b); }
.f27-legacy-theme-controls { padding: 1.5rem max(24px, calc((100vw - 100rem) / 2)); border-top: 1px solid var(--f27-line, #DEDED7); background: var(--f27-paper, #F9F9F6); }
@media (max-width: 479px) { .f27-legacy-theme-controls { padding-inline: 20px; } }
html .f27-contact-page :is(.f27-contact__map, .f27-contact__calendar) { color: var(--f27-accent-text, #084834); }
/* Monochrome GDPR/ISO artwork only: preserve the three glyphs without a white
   tile, and leave the sage BESA mark, photographs and illustrations untouched. */
html[data-f27-theme="dark"] .f27-cta-section__trust-icon { filter: brightness(0) invert(.85); }

/* Header symbol only: use the original silhouette as an alpha mask so every
   piece is exact brand lime, including the normally charcoal piece. */
html[data-f27-theme="dark"] .f27-brand-icon {
  filter: none;
  object-position: -9999px -9999px;
  background-color: #CEE07D;
  -webkit-mask: url("/images/brand/fisar-symbol-2027.svg") center / contain no-repeat;
  mask: url("/images/brand/fisar-symbol-2027.svg") center / contain no-repeat;
}
html[data-f27-theme="dark"] .nav_wrap .fisar-nav-logo .logo-square { color: #CEE07D; }
/* Small UI symbols only; the approved illustration and Lottie palettes stay intact. */
html[data-f27-theme="dark"] .f27-hero__reassurance svg {
  stroke: #CEE07D;
  background: none;
  filter: none;
}
html[data-f27-theme="dark"] .f27-integrations__trust-icon { filter: brightness(0) invert(.85); }
html:root[data-f27-theme="dark"] .fw27__icon { color: #fff; }
html[data-f27-theme="dark"] [data-barba-namespace="how-fisar-works"] .fisar-doc .tag-square,
html[data-f27-theme="dark"] [data-barba-namespace="how-fisar-works"] .fisar-doc .fdt__marker,
html[data-f27-theme="dark"] [data-barba-namespace="how-fisar-works"] .fisar-doc .fd-tag--auto { color: #fff; }
/* The legacy video glyph sits on a cream tile: make the tile green to retain
   a white glyph with clear contrast, including during the existing hover. */
html[data-f27-theme="dark"] [data-barba-namespace="how-fisar-works"] .fisar-vw-icon { color: #fff; }
html[data-f27-theme="dark"] [data-barba-namespace="how-fisar-works"] .fisar-vw-btn .btn-icon-icon__bg { background-color: #084834; }

/* Footer controls belong to the green footer, independently of page theme. */
.f27-footer-2027 .f27-theme-controls__choices { background:var(--f27-brand,#084834); border-color:#749384; }
.f27-footer-2027 .f27-theme-controls__button { color:#F8F8F2; }
.f27-footer-2027 .f27-theme-controls__button[aria-pressed="true"],
.f27-footer-2027 .f27-theme-controls__button:hover { background:#245C48; border-color:#749384; color:#CEE07D; }
.f27-footer-2027 .f27-theme-controls__button:focus-visible { outline-color:#CEE07D; }

/* Audience artwork plates match the page paper in the active theme. */
html .f27-audiences__media::before { background: var(--f27-paper, #F9F9F6); }

/* Context colours change on the same paint; the child label roll remains animated. */
html .nav_wrap :is(.f27-login.f27-text-button, .f27-menu.f27-text-button) { transition: none; }
/* Green surfaces retain the light brand link and symbol; dark wordmarks
   receive their separate lime override below. */
html[data-f27-header-context="pricing"] .nav_wrap :is(.f27-brand.f27-brand, .nav_logo.nav_logo) { color: #F1F1EC; }
html[data-f27-header-context="pricing"] .nav_wrap .f27-brand-icon {
  filter: none; object-position: -9999px -9999px;
  background-color: #F1F1EC;
  -webkit-mask: url("/images/brand/fisar-symbol-2027.svg") center / contain no-repeat;
  mask: url("/images/brand/fisar-symbol-2027.svg") center / contain no-repeat;
}


/* Navigation lettering is exact brand lime in dark mode, including green
   heroes. Target the text SVGs only: tile symbols and footer keep their colours. */
html[data-f27-theme="dark"] .nav_wrap :is(.f27-wordmark, .nav_logo.nav_logo) { color: #CEE07D; }

/* Use independent translation so the existing entrance transform stays intact.
   Fixed-header movement never changes document layout or the footer boundary. */
html .nav_wrap { translate: 0 0 !important; transition: translate .28s cubic-bezier(.16,1,.3,1); }
html[data-f27-footer-nav="hidden"] .nav_wrap { translate: 0 -100% !important; }
html[data-f27-footer-nav="hidden"] .nav_wrap:focus-within { translate: 0 0 !important; }
@media (prefers-reduced-motion: reduce) { html .nav_wrap { transition: none; } }

/* Route colour changes share the body's .75s fade. Scroll-driven pricing
   changes remain immediate, keeping Login and Menu in sync. */
html[data-f27-header-transition] :is(.nav_wrap, .f27-bar),
html[data-f27-header-transition] .nav_wrap :is(.f27-brand, .nav_logo, .f27-login.f27-text-button, .f27-menu.f27-text-button, .f27-book, .hamburger-nav__toggle) {
  transition: background-color .75s ease-in-out, color .75s ease-in-out, border-color .75s ease-in-out, translate .28s cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  html[data-f27-header-transition] :is(.nav_wrap, .f27-bar),
  html[data-f27-header-transition] .nav_wrap :is(.f27-brand, .nav_logo, .f27-login.f27-text-button, .f27-menu.f27-text-button, .f27-book, .hamburger-nav__toggle) { transition:none; }
}