:root{--navy:#0c3024;--cream:#f3efe7;--accent:#169255;--header-bg:var(--navy)}@supports (-webkit-touch-callout: none) and (padding: env(safe-area-inset-top)){html{background-color:var(--header-bg)}#fnx-satop{position:fixed;top:-240px;left:0;right:0;height:calc(240px + env(safe-area-inset-top,0px));background:var(--header-bg);z-index:960;pointer-events:none}body::before{content:"";position:fixed;top:-240px;left:0;right:0;height:calc(240px + env(safe-area-inset-top,0px));background:var(--header-bg);z-index:905;pointer-events:none}}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--cream);color:#1c2b24;font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:1.7}header{background:var(--navy);padding:18px 24px;padding-top:calc(18px + env(safe-area-inset-top,0px))}header .hwrap{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1200px;margin:0 auto}header a{color:#fff;text-decoration:none;font-weight:600;font-size:17px;letter-spacing:-.01em}header a span{color:#9fdd63}main{max-width:760px;margin:0 auto;padding:56px 24px 80px}h1{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(32px,5vw,44px);color:var(--navy);margin-bottom:8px}.upd{font-size:13.5px;color:#5d6b60;margin-bottom:36px}h2{font-size:19px;color:var(--navy);margin:32px 0 10px}p,li{color:#33463c;margin-bottom:12px}ul{padding-left:22px;margin-bottom:12px}a{color:#136f43}footer{border-top:1px solid rgba(12,48,36,.12);padding:22px 24px;font-size:13.5px;color:#5d6b60;text-align:center}footer a{color:#136f43;text-decoration:none;margin:0 6px}.lang-dd{position:relative;display:inline-flex;font-family:inherit}.lang-dd-btn{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:transparent;color:rgba(255,255,255,.9);font:600 12.5px/1 inherit;letter-spacing:.6px;cursor:pointer;transition:border-color .2s,color .2s,background .2s}.lang-dd-btn:hover{border-color:rgba(255,255,255,.5);color:#fff}.lang-dd-btn:focus-visible{outline:2px solid #5fe6c0;outline-offset:2px}.lang-dd-flag{width:18px;height:18px;border-radius:50%;overflow:hidden;flex:0 0 18px;display:block;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}.lang-dd-flag svg{width:100%;height:100%;display:block}.lang-dd-code{font-weight:600}.lang-dd-caret{width:7px;height:7px;margin-left:1px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.65;transition:transform .2s}.lang-dd[data-open="true"] .lang-dd-caret{transform:translateY(1px) rotate(-135deg)}.lang-dd-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:100%;margin:0;padding:6px;list-style:none;background:#0c2b21;border:1px solid rgba(255,255,255,.14);border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.4);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:200}.lang-dd[data-open="true"] .lang-dd-menu{opacity:1;visibility:visible;transform:translateY(0)}.lang-dd-opt{display:flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:8px;color:rgba(255,255,255,.9);text-decoration:none;font-weight:600;font-size:12.5px;letter-spacing:.6px;white-space:nowrap}.lang-dd-opt:hover{background:rgba(255,255,255,.08);color:#fff}.lang-dd-opt:focus-visible{outline:none;background:rgba(95,230,192,.16);box-shadow:inset 0 0 0 1.5px #5fe6c0;color:#fff}.lang-langs{display:inline-flex;gap:8px;margin-top:12px}.lang-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:rgba(255,255,255,.75);text-decoration:none;font-weight:600;font-size:14px;letter-spacing:.6px}.lang-chip .lang-dd-flag{width:20px;height:20px;flex-basis:20px}.lang-chip.is-on{background:rgba(255,255,255,.12);color:#fff;border-color:transparent}.lang-chip:focus-visible{outline:2px solid #5fe6c0;outline-offset:2px}#mob .lang-langs{display:flex;gap:10px;padding:16px 36px 20px;margin-top:0}#mob a.lang-chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;padding:9px 16px;font-size:13.5px;font-weight:600;letter-spacing:.6px;line-height:1;color:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.22);border-radius:999px}#mob a.lang-chip.is-on{background:rgba(255,255,255,.12);color:#fff;border-color:transparent}#mob a.lang-chip .lang-dd-flag{width:20px;height:20px;flex:0 0 20px}#nav{height:calc(var(--nav-h) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px)}header:not(#nav){padding-top:calc(18px + env(safe-area-inset-top,0px))}
@supports (-webkit-touch-callout: none) and (padding: env(safe-area-inset-top)){body::before{height:calc(240px + max(1px,env(safe-area-inset-top,0px)))}}
h1,h2,h3,h4,h5,.eyebrow,.kicker,.hh-title{text-wrap:balance}p,li,figcaption,blockquote,dd{text-wrap:pretty}h1,h2,h3,h4,p,li,a,blockquote{overflow-wrap:break-word}*,::before,::after{-webkit-hyphens:none;hyphens:none}#solution p,#compare p,#map p,#maskhero p,#solution .lead,#map .map-sub{max-width:62ch;margin-inline:auto}@media (min-width:1024px){#problem p{text-align:justify;text-justify:inter-word}#problem p:lang(fi),#problem p:lang(sv){text-align:left}}
/* fnx-premium-layer */
/* ==========================================================================
   Fuelnox premium layer
   Appended to every page bundle by build_premium.py. Everything in here is a
   progressive enhancement: a browser that does not understand a rule simply
   keeps the behaviour the site already had.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Cross-document view transitions
   Turns every same-origin navigation into a single continuous piece of motion
   instead of a white flash. Chrome/Edge 126+, Safari 18.2+. Everyone else
   navigates exactly as before.
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

/* The header, its progress rule and the footer are identical on every page, so
   they are lifted out of the page snapshot and stay put while the body of the
   page changes underneath them. This is what makes the site read as one
   surface rather than a sequence of documents. */
#nav      { view-transition-name: fnx-nav; }
#progress { view-transition-name: fnx-progress; }
footer    { view-transition-name: fnx-footer; }

/* Hold the persistent chrome perfectly still: no cross-fade, no morph. */
::view-transition-group(fnx-nav),
::view-transition-group(fnx-progress),
::view-transition-group(fnx-footer) { animation-duration: 1ms; }
::view-transition-old(fnx-nav),
::view-transition-new(fnx-nav),
::view-transition-old(fnx-progress),
::view-transition-new(fnx-progress),
::view-transition-old(fnx-footer),
::view-transition-new(fnx-footer) { animation: none; mix-blend-mode: normal; }

/* The page body itself: the outgoing page settles down and away, the incoming
   page rises into place. Short enough that it never delays a click. */
::view-transition-old(root) {
  animation: fnx-vt-out 180ms cubic-bezier(.2,.7,.2,1) both;
}
::view-transition-new(root) {
  animation: fnx-vt-in 300ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes fnx-vt-out { to   { opacity: 0; transform: translateY(-10px) scale(.994); } }
@keyframes fnx-vt-in  { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* --------------------------------------------------------------------------
   2. Accessibility completeness
   The site already handles prefers-reduced-motion. These are the three user
   settings it did not answer yet.
   -------------------------------------------------------------------------- */

/* Windows High Contrast / forced colours: keep every surface legible and make
   sure the decorative borders that carry meaning survive the colour override. */
@media (forced-colors: active) {
  .btn, .btn-light, .btn-ghost, .btn-accent,
  .card, .chip, .pill, .faq-q, .dd-panel, .lang-dd-menu {
    border: 1px solid currentColor;
  }
  .arr, .cv { forced-color-adjust: none; }
  :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
  .skip-link:focus { background: Canvas; color: CanvasText; }
}

/* Some users ask the OS for firmer contrast. Drop the translucent fills and
   soften nothing. */
@media (prefers-contrast: more) {
  :root { --rule: rgba(12,48,36,.34); --rule-w: rgba(255,255,255,.42); --muted: #3d4a56; }
  .btn, .card, .chip, .pill { border-width: 2px; }
  :focus-visible { outline-width: 3px; }
}

/* Reduced transparency: replace the frosted-glass surfaces with solid ones. */
@media (prefers-reduced-transparency: reduce) {
  #nav, #nav.stuck, .dd-panel, .lang-dd-menu, .mob-panel, .fnx-cc {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #nav, #nav.stuck { background: var(--header-bg) !important; }
}

/* --------------------------------------------------------------------------
   3. Print
   A product page that prints as a clean, readable spec sheet: no navigation,
   no decoration, no dark flood fills, and every link's destination spelled out.
   -------------------------------------------------------------------------- */
@media print {
  @page { margin: 16mm 14mm; }

  :root { --navy: #000; --navy-2: #000; --accent: #000; --ink: #000; --muted: #333; }

  html, body { background: #fff !important; color: #000 !important; }

  /* Chrome that carries no meaning on paper. */
  #nav, #mob, #progress, #vscroll, #vthumb, footer .ft-newsletter,
  .skip-link, .fnx-cc, .fnx-cc-backdrop, .to-top, .marquee, #marquee,
  .divider, .hh-glow, .hh-show, video, .mh-video, .cf-turnstile,
  form, .calc-wrap, #calc-wrap, .lang-dd, .dd-panel { display: none !important; }

  main, section, .wrap { padding: 0 !important; margin: 0 !important; width: auto !important; }

  section {
    background: none !important;
    color: #000 !important;
    border-bottom: 1pt solid #ccc;
    padding: 8mm 0 !important;
    break-inside: avoid;
  }
  section * { color: #000 !important; background-image: none !important; }

  h1, h2, h3, h4 { break-after: avoid; color: #000 !important; }
  h1 { font-size: 22pt; }
  h2 { font-size: 17pt; }
  h3 { font-size: 12pt; }
  p, li { font-size: 10pt; line-height: 1.45; orphans: 3; widows: 3; }

  img { max-width: 100% !important; break-inside: avoid; filter: none !important; }
  .prob-bg, .ihero-bg, [class*="-bg"] { display: none !important; }

  .card, .chip, .pill, table { border: 1pt solid #999 !important; box-shadow: none !important; }

  /* Spell out where links actually go, but not for in-page jumps. */
  a[href^="http"]::after,
  a[href^="/"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
  a[href^="#"]::after { content: ""; }

  /* Answers are useless collapsed on paper. */
  .faq-a, [id^="faq-a-"] { display: block !important; height: auto !important; opacity: 1 !important; }
}