@font-face{font-family:"BeoSupreme";src:url("/assets/beosupreme-light.woff2") format("woff2");font-style:normal;font-weight:300;font-display:swap}
@font-face{font-family:"BeoSupreme";src:url("/assets/beosupreme-regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"BeoSupreme";src:url("/assets/beosupreme-medium.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap}

:root{
  --nf-navy:#081A38;
  --nf-navy-2:#0B254D;
  --nf-blue:#0057B8;
  --nf-action:#0067D9;
  --nf-blue-bright:#63B5FF;
  --nf-blue-pale:#EAF3FF;
  --nf-signal:#E3232E;
  --nf-signal-soft:#FFF0F0;
  --nf-line:#D8DEE7;
  --nf-soft:#F3F5F8;
}

/* Stable NorthFlow defaults before tenant detection and on standalone pages. */
body:not([data-tenant]){
  --blue:#0057B8;--blue-2:#0067D9;--green:#0057B8;
  --grad:linear-gradient(112deg,#081A38 0%,#0067D9 82%,#E3232E 145%);
  --ink:#081A38;--ink-2:#3A4A5C;--muted:#6B7280;
  --line:#D8DEE7;--bg:#F3F5F8;--card:#FFF;--soft:#EAF3FF;--soft-blue:#F3F7FC;
}

html,body,button,input,select,textarea{font-family:"BeoSupreme",Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{font-weight:400}
h1,h2,.splash-name,.lp-logo-name,.home-greeting h1{font-weight:300;letter-spacing:-.025em}
h3,h4,strong,b{font-weight:500}

/* Override legacy shorthand declarations without fighting partner theming. */
.lp-lang,.lp-tab,.lp-helper-row a,.lp-link,.lp-submit,.tour-btns button,
.top-icon-btn::after,.theme-toggle,.app-language,.fault-help-btn,.map-popup-btn,.top-logout-btn{
  font-family:"BeoSupreme",Arial,sans-serif!important
}

/* NorthFlow is the host identity. Runtime tenant scoping keeps partner colours intact. */
body[data-tenant="northflow"]{
  --brand-primary:var(--nf-blue);
  --brand-accent:var(--nf-blue-bright);
  --brand-ink:#081A38;
  --blue:var(--nf-blue);
  --green:var(--nf-blue-bright);
  --pv:var(--nf-blue-bright);
  --soc:#47D7B0;
  --net:var(--nf-signal);
  --amber:#E0A23E;
  --grad:linear-gradient(112deg,var(--nf-navy-2) 0%,var(--nf-action) 100%);
}
body[data-tenant="northflow"]:not(.theme-light){--brand-ink:#F7FAFF}
body[data-tenant="northflow"].theme-light{
  --bg:#F3F5F8;--panel:#FFF;--panel-hi:#F8FAFD;--field:#FFF;
  --text:#081A38;--muted:#5B6472;--muted-2:#748094;
  background:radial-gradient(900px 520px at 84% -12%,rgba(99,181,255,.13),transparent 64%),#F3F5F8;
}
body[data-tenant="northflow"]:not(.theme-light){
  --bg:#06142C;--panel:#0A1B37;--panel-hi:#102746;--field:#091A34;
  --text:#F7FAFF;--muted:#AEBBD0;--muted-2:#8292AD;
  background:radial-gradient(920px 600px at 86% -16%,rgba(0,103,217,.15),transparent 64%),#06142C;
}

body[data-tenant="northflow"] .lp-top-title,
body[data-tenant="northflow"] .lp-logo-name,
body[data-tenant="northflow"] .splash-name,
body[data-tenant="northflow"] .brand{font-weight:300}
body[data-tenant="northflow"] [data-brand-name] b{font-weight:500;color:var(--brand-ink)}
body[data-tenant="northflow"] #loginPage [data-brand-name] b{color:#FFF!important}
body[data-tenant="northflow"] [data-brand-name] .flow{
  color:#55A9EC!important;background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;font-weight:300
}
body[data-tenant="northflow"] .logo-mark .star{filter:drop-shadow(0 4px 12px rgba(0,87,184,.22))}
body[data-tenant="northflow"] .lp-aurora{opacity:.26}
body[data-tenant="northflow"] .lp-orb-1{background:radial-gradient(circle,rgba(0,103,217,.46),transparent 68%)}
body[data-tenant="northflow"] .lp-orb-2{background:radial-gradient(circle,rgba(227,35,46,.16),transparent 70%)}
body[data-tenant="northflow"] .lp-orb-3{background:radial-gradient(circle,rgba(99,181,255,.22),transparent 70%)}
body[data-tenant="northflow"] .lp-scrim{background:linear-gradient(180deg,rgba(8,26,56,.28),rgba(6,20,44,.76))}
body[data-tenant="northflow"] .apply,
body[data-tenant="northflow"] button.export-dl,
body[data-tenant="northflow"] .cl-complete-btn,
body[data-tenant="northflow"] .nf-code-btn,
body[data-tenant="northflow"] .nfc-send{background:var(--nf-action)!important;color:#fff!important;border-color:var(--nf-action)!important}
body[data-tenant="northflow"] .passport-cta{background:linear-gradient(135deg,#EEF5FF,#FFFFFF)!important}
body[data-tenant="northflow"] .confirm-card{background:color-mix(in srgb,var(--panel) 96%,var(--nf-blue-pale))!important}
body[data-tenant="northflow"] .confirm-primary{background:var(--nf-action)!important;color:#fff!important}
body[data-tenant="northflow"] .toast.err,
body[data-tenant="northflow"] .danger{border-color:color-mix(in srgb,var(--nf-signal) 42%,transparent)!important}

/* Monetary figures: a single calm weight and tabular alignment, with no visual split after €. */
.h-val,.prices-info .slot-price,.prices-stats .sv,.metric-value,.stat-value,.dmc-val,
#homeMonthSav,#homeCurrentPrice,#savEur,#pricesSlotPrice{
  font-weight:300!important;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.025em
}
/* BeoSupreme's comma is intentionally airy; financial figures need compact tabular spacing. */
.h-val,.dmc-val,.metric-value,.stat-value,.prices-info .slot-price,.prices-stats .sv,.prices-table td:nth-child(2),
#homeMonthSav,#homeCurrentPrice,#savEur,#pricesSlotPrice,#nfMarketPrice{
  font-family:Arial,"Segoe UI",sans-serif!important;font-weight:400!important;letter-spacing:-.035em!important
}
body[data-tenant="northflow"] .kpi .big.good{
  color:var(--nf-blue)!important;background:none!important;-webkit-text-fill-color:currentColor!important;font-weight:300!important
}
body[data-tenant="northflow"] .nfc-launcher,
body[data-tenant="northflow"] .nfc-send,
body[data-tenant="northflow"] .splash-bar-fill{background:var(--nf-action)!important}
body[data-tenant="northflow"] #pricesDataWrap,
body[data-tenant="northflow"] .chart-card,
body[data-tenant="northflow"] .chart-scroll,
body[data-tenant="northflow"] #pricesChart{width:100%;max-width:none}
body[data-tenant="northflow"] .nf-switch-current{
  color:#fff!important;background:var(--nf-action)!important;font-weight:500!important
}
/* Live device values must stay readable on both card themes; the general brand
   gradient starts in navy and became too dark on the dark device cards. */
body[data-tenant="northflow"] .device-live-num{
  background:none!important;color:var(--nf-blue)!important;-webkit-text-fill-color:var(--nf-blue)!important
}
body[data-tenant="northflow"]:not(.theme-light) .device-live-num{
  color:var(--nf-blue-bright)!important;-webkit-text-fill-color:var(--nf-blue-bright)!important
}

/* Icon contrast: every line icon inherits an adaptive foreground instead of a
   fixed black/navy asset. This keeps the navigation and action affordances over
   3:1 contrast on both the navy surfaces and the light cards. */
body[data-tenant="northflow"] .ni-icon,
body[data-tenant="northflow"] .ni-icon svg,
body[data-tenant="northflow"] .hq-icon,
body[data-tenant="northflow"] .hq-icon svg,
body[data-tenant="northflow"] .top-icon-btn,
body[data-tenant="northflow"] .device-back-btn{
  color:inherit;stroke:currentColor
}
body[data-tenant="northflow"]:not(.theme-light) .nav-item{color:#C3CFE0!important}
body[data-tenant="northflow"]:not(.theme-light) .nav-item:hover{color:#FFFFFF!important}
body[data-tenant="northflow"]:not(.theme-light) .nav-item.active{color:#82C7FF!important}
body[data-tenant="northflow"]:not(.theme-light) .hq-icon{color:#82C7FF!important;background:rgba(99,181,255,.14)!important}
body[data-tenant="northflow"].theme-light .hq-icon{color:#0057B8!important;background:#EAF3FF!important}
body[data-tenant="northflow"]:not(.theme-light) .top-icon-btn img,
body[data-tenant="northflow"]:not(.theme-light) img[src$="account-settings-icon.svg"]{
  filter:brightness(0) invert(1);opacity:.94
}
body[data-tenant="northflow"].theme-light .top-icon-btn img,
body[data-tenant="northflow"].theme-light img[src$="account-settings-icon.svg"]{
  filter:none;opacity:1
}
body[data-tenant="northflow"]:not(.theme-light) .device-live-icon img{
  filter:none!important;opacity:1
}
body[data-tenant="northflow"] .ni-icon svg,
body[data-tenant="northflow"] .hq-icon svg{fill:none;stroke:currentColor!important}

/* Release polish: action glyphs must never inherit a fixed near-black stroke
   on saturated NorthFlow blue.  The icon itself is a second, non-colour-only
   cue and therefore keeps at least 3:1 contrast in both appearances. */
body[data-tenant="northflow"] .passport-cta-ic{color:#fff!important;background:var(--nf-blue)!important}
body[data-tenant="northflow"] .passport-cta-ic svg,
body[data-tenant="northflow"] .nfc-launcher svg{stroke:currentColor!important;color:#fff!important}
body[data-tenant="northflow"] .passport-cta-ic svg [fill]:not([fill="none"]),
body[data-tenant="northflow"] .nfc-launcher svg [fill]:not([fill="none"]){fill:currentColor!important}
body[data-tenant="northflow"] .nfc-launcher{color:#fff!important}
body[data-tenant="northflow"] .device-date-controls button.active{
  color:#fff!important;background:var(--nf-blue)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.16) inset
}

/* Status controls: warm daylight for appearance, green for actual live data. */
body[data-tenant="northflow"].theme-light .theme-toggle::before{
  color:#9A6B00!important;text-shadow:0 0 9px rgba(244,184,48,.46)
}
body[data-tenant="northflow"] .pill.live{color:#16865A!important;background:rgba(40,194,126,.10)!important;border-color:rgba(40,194,126,.30)!important}
@keyframes nf-live-blink{0%,84%,100%{opacity:1;transform:scale(1)}90%{opacity:.28;transform:scale(.72)}}
body[data-tenant="northflow"] .pill.live .dot{background:#28C27E!important;box-shadow:0 0 0 3px rgba(40,194,126,.12);animation:nf-live-blink 2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){body[data-tenant="northflow"] .pill.live .dot{animation:none}}

/* Price advice uses success green, not the generic blue selection colour. */
body[data-tenant="northflow"] .adv-charge{display:inline-flex;align-items:center;gap:6px;color:#17885B!important}
body[data-tenant="northflow"] .adv-charge i{width:9px;height:9px;border-radius:999px;background:#28C27E;box-shadow:0 0 0 3px rgba(40,194,126,.10)}
body[data-tenant="northflow"]:not(.theme-light) .adv-charge{color:#72E2B1!important}
body[data-tenant="northflow"] .adv-discharge{display:inline-flex;align-items:center;gap:6px}
body[data-tenant="northflow"] .adv-discharge i{width:9px;height:9px;border-radius:999px;background:currentColor}

/* Dark appearance has a base layer and visibly elevated cards.  A quiet edge
   and brighter adaptive glyphs stop the asset/config screens collapsing into
   one undifferentiated navy field. */
body[data-tenant="northflow"]:not(.theme-light) .home-qcard,
body[data-tenant="northflow"]:not(.theme-light) .device-live-card,
body[data-tenant="northflow"]:not(.theme-light) .device-chart-card,
body[data-tenant="northflow"]:not(.theme-light) .device-mini-card,
body[data-tenant="northflow"]:not(.theme-light) .device-fav-row,
body[data-tenant="northflow"]:not(.theme-light) .device-child-row,
body[data-tenant="northflow"]:not(.theme-light) .ctl,
body[data-tenant="northflow"]:not(.theme-light) .cl-config{
  background:#10213D!important;border-color:#2B4263!important;
  box-shadow:0 18px 42px -34px rgba(0,0,0,.92)!important
}
body[data-tenant="northflow"]:not(.theme-light) .home-qcard:hover,
body[data-tenant="northflow"]:not(.theme-light) .device-fav-row:hover{border-color:#5A91D2!important}
body[data-tenant="northflow"]:not(.theme-light) .hq-icon{color:#91CAFF!important;background:#132E55!important;border:1px solid #294B78}
body[data-tenant="northflow"]:not(.theme-light) .home-qcard::after{color:#C7D3E4!important}
body[data-tenant="northflow"]:not(.theme-light) .device-live-icon{background:#173156!important;border-color:#31547D!important}
body[data-tenant="northflow"]:not(.theme-light) .device-date-controls,
body[data-tenant="northflow"]:not(.theme-light) .nf-device-switcher{background:#10213D!important;border-color:#304868!important}
body[data-tenant="northflow"]:not(.theme-light) .nf-switch-label{background:#172A47!important;color:#E9F1FC!important}
body[data-tenant="northflow"]:not(.theme-light) .nf-device-menu{background:#10213D!important;border-color:#304868!important}
body[data-tenant="northflow"]:not(.theme-light) .device-product-select,
body[data-tenant="northflow"]:not(.theme-light) .ctl select,
body[data-tenant="northflow"]:not(.theme-light) .ctl input{background:#091A34!important;color:#F7FAFF!important;border-color:#395270!important}
body[data-tenant="northflow"]:not(.theme-light) .passport-cta{
  background:#10213D!important;border-color:#304868!important
}
body[data-tenant="northflow"]:not(.theme-light) .passport-cta-txt h3{color:#F7FAFF!important}
body[data-tenant="northflow"]:not(.theme-light) .passport-cta-txt p{color:#B6C4D8!important}

/* Faults: a compact editorial header instead of a second oversized hero card. */
body[data-tenant="northflow"] #pane-faults .fault-head,
body[data-tenant="northflow"] #pane-fault-feed .fault-head{
  align-items:flex-end;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--border)
}
body[data-tenant="northflow"] #pane-faults .fault-head .home-greeting,
body[data-tenant="northflow"] #pane-fault-feed .fault-head .home-greeting{
  padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;overflow:visible!important;max-width:720px
}
body[data-tenant="northflow"] #pane-faults .fault-head .home-greeting::after,
body[data-tenant="northflow"] #pane-fault-feed .fault-head .home-greeting::after{display:none}
body[data-tenant="northflow"] #pane-faults .fault-head h1,
body[data-tenant="northflow"] #pane-fault-feed .fault-head h1{font-size:clamp(30px,4.5vw,46px);margin-bottom:8px}
body[data-tenant="northflow"] .fault-help-btn{min-height:40px;padding:0 14px;color:var(--nf-blue)!important;background:transparent!important;border-color:color-mix(in srgb,var(--nf-blue) 34%,var(--border))!important;font-weight:500!important}
body[data-tenant="northflow"]:not(.theme-light) .fault-help-btn{color:#91CAFF!important;border-color:#31547D!important}
body[data-tenant="northflow"] .fault-item{box-shadow:none!important;border-radius:15px!important}
body[data-tenant="northflow"] .fault-count{font-variant-numeric:tabular-nums}
body[data-tenant="northflow"][data-lang="en"] .top-icon-btn::after{content:"Account settings"}

@media(max-width:760px){
  body[data-tenant="northflow"] #pane-faults .fault-head,
  body[data-tenant="northflow"] #pane-fault-feed .fault-head{align-items:flex-start}
}

/* Transparent financial example: dense enough to compare, calm enough to scan. */
body[data-tenant="northflow"] .hp-business-case{max-width:780px!important}
body[data-tenant="northflow"] .hp-business-case .hp-example{margin-top:12px;padding:15px 16px}
body[data-tenant="northflow"] .hp-business-case h4{margin:0 0 7px;font-size:13px;color:var(--text)}
body[data-tenant="northflow"] .hp-business-case table{width:100%;border-collapse:collapse;font-size:13px}
body[data-tenant="northflow"] .hp-business-case td{padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--border) 62%,transparent);vertical-align:top}
body[data-tenant="northflow"] .hp-business-case td:first-child{padding-right:20px;color:var(--muted)}
body[data-tenant="northflow"] .hp-business-case td:last-child{text-align:right;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
body[data-tenant="northflow"] .hp-business-case tr:last-child td{border-bottom:0}
body[data-tenant="northflow"] .hp-business-case .hp-total-row td{padding-top:10px;color:var(--text);font-weight:500}
body[data-tenant="northflow"] .hp-business-case .hp-total-row td:last-child{color:var(--nf-blue)}
body[data-tenant="northflow"]:not(.theme-light) .hp-business-case .hp-total-row td:last-child{color:#91caff}
body[data-tenant="northflow"] .hp-business-case .hp-subtotal-row td{border-top:1px solid var(--border);color:var(--text)}
body[data-tenant="northflow"] .hp-modal-source{margin:13px 2px 0!important;font-size:11px!important;line-height:1.5!important;color:var(--muted)!important}
@media(max-width:620px){
  body[data-tenant="northflow"] .hp-business-case{padding:19px 16px}
  body[data-tenant="northflow"] .hp-business-case td{display:block;border:0;padding:3px 0}
  body[data-tenant="northflow"] .hp-business-case td:first-child{padding:8px 0 0}
  body[data-tenant="northflow"] .hp-business-case td:last-child{text-align:left;padding:2px 0 8px;border-bottom:1px solid var(--border);white-space:normal}
}

/* Static NorthFlow documents (privacy, cookies, passport and manuals). */
.page{border:1px solid rgba(8,26,56,.08)}
.page::before{background:linear-gradient(90deg,var(--nf-navy),var(--nf-blue),var(--nf-signal))!important;height:4px!important}
.brand-name{font-weight:300!important;letter-spacing:-.025em!important}
.brand-name b{font-weight:500!important;color:var(--nf-navy)!important}
.brand-name .flow{color:#55A9EC!important;background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;font-weight:300!important}
.star path{fill:#4EA8FF!important}
.doc-tag{background:var(--nf-navy)!important;color:#fff!important;border-radius:7px!important}
.accent{color:var(--nf-blue)!important;background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important}
.toolbar .pdf,.pdf{background:var(--nf-action)!important;color:#fff!important}
.intro,.tip,.note-quote{background:var(--nf-blue-pale)!important;border-left-color:var(--nf-blue)!important}
h2.sec{color:var(--nf-blue)!important}
h2.sec::before,h2.sec .num,h2 .n{background:var(--nf-blue)!important;color:#fff!important}
.chip:nth-child(n),.spec .grouprow th,code{background:#F3F7FC!important}
.pillar .ic{background:var(--nf-navy)!important;color:#fff!important}
.chk li::before,ul.chk li::before{border-color:var(--nf-blue)!important}
.danger{border-left-color:var(--nf-signal)!important;background:var(--nf-signal-soft)!important}
.fill.cost{background:var(--nf-signal)!important}
.fill.save{background:var(--nf-blue)!important}

@media print{
  html,body{font-family:"BeoSupreme",Arial,sans-serif!important}
  .page{border:0}
}

@media (max-width:768px){
  #menuToggle,.nf-switch-label,.nf-switch-current,.device-date-controls button,
  .device-date-controls input,.device-back-btn{min-height:44px!important}
  #menuToggle,.device-date-controls button{min-width:44px!important}
}