@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&display=swap');
:root { --moss:        #0C1A3D;
    --moss-d:      #07112A;
    --moss-l:      #16294F;
    --moss-ln:     rgba(215, 221, 250, 0.18);

    
    --cream:       #FFFFFF;
    --cream-2:     #EBF0FF;
    --cream-3:     #E7EDFF;
    --paper:       #F5F8FF;
    --periwinkle:  #D7DDFA;

    
    --ink:         #182238;
    --ink-2:       #232E4C;
    --ink-3:       #37436A;
    --muted:       #5B6690;
    --muted-2:     #C5CCE2;

    
    --rust:        #62BB46;
    --rust-d:      #357A1E;   /* v23: oli #3E8F2A (AA-hylky 4.06:1 valkoisella) */
    --rust-l:      #9FDF8B;

    --line-c:      #D9E0F2;
    --line-d:      #E4E9F6;
    --line-m:      rgba(215, 221, 250, 0.18);

    
    --on-navy:     #FFFFFF;
    --on-navy-2:   rgba(195, 204, 230, 0.9);
    --on-navy-3:   rgba(215, 221, 250, 0.55);

    
    --display:     "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
    --sans:        "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;

    --gutter:      clamp(20px, 3.5vw, 44px);
    --col:         1320px;; }
/* Reset + tag-level rules Webflow styles can't hold */
  *, *::before, *::after{ box-sizing: border-box; }
  html, body{ margin: 0; padding: 0; }
  html{ background: var(--cream); }
  /* Designer-canvas safe: smooth scrolling + overflow clamp only when the
     runtime (js-motion) is active. The canvas never gets the class, so it
     scrolls/pans natively. */
  html.js-motion{ scroll-behavior: smooth; }
  html.js-motion body{ overflow-x: hidden; }
  body{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img{ display: block; max-width: 100%; }
  button{ font: inherit; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }
  ::selection{ background: var(--rust); color: var(--cream); }

  /* Masked artwork (mask/-webkit-mask are not Webflow style properties) */
  .iarr{
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none'><path d='M0 6h16M11 1l5 5-5 5' stroke='black' stroke-width='1.4' stroke-linecap='square'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none'><path d='M0 6h16M11 1l5 5-5 5' stroke='black' stroke-width='1.4' stroke-linecap='square'/></svg>") no-repeat center / contain;
  }
  .btn:hover .iarr{ transform: translateX(3px); }
  .wordmark-mark{
    -webkit-mask: url("https://cdn.prod.website-files.com/6a7adfce13012585cf080624/6a7ae8d3d9866e1262534115_navisec-logo.svg") no-repeat center / contain;
            mask: url("https://cdn.prod.website-files.com/6a7adfce13012585cf080624/6a7ae8d3d9866e1262534115_navisec-logo.svg") no-repeat center / contain;
  }

  /* Keyframes + animation assignments */
  @keyframes pulse{
    0%   { box-shadow: 0 0 0 0 rgba(98, 187, 70, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(98, 187, 70, 0); }
    100% { box-shadow: 0 0 0 0 rgba(98, 187, 70, 0); }
  }
  .pulse{ animation: pulse 2.4s ease-out infinite; }
  @keyframes vtRing{
    0%   { transform: scale(1);   opacity: 0.45; }
    100% { transform: scale(1.9); opacity: 0; }
  }
  .vt-ring{ animation: vtRing 2.6s ease-out infinite; }
  .vt-card:hover .vt-ring{ animation-duration: 1.6s; }
  @keyframes rot{
    from{ transform: rotate(0); }
    to{ transform: rotate(360deg); }
  }
  .rot{ animation: rot 80s linear infinite; }
  .rot-r{ animation: rot 80s linear infinite reverse; }

  /* JS-toggled states */
  .site-hd.hd-scrolled{ border-bottom-color: var(--line-c); }
  .nav-a.nav-current{ color: var(--ink); font-variation-settings: "wght" 540, "wdth" 82, "opsz" 72; }
  .nav-a.nav-current::after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 1.5px;
    background: var(--rust);
  }
  .calc-swapping{ opacity: 0; transform: translateY(4px); }
  .calc-clamp[hidden]{ display: none; }
  .is-muted{ opacity: 0.42; filter: grayscale(0.35); }
  .is-recommended .badge-rec{ opacity: 1; transform: translateY(0); }

  /* Structural pseudo-selectors (nth-child / first-child / last-child) */
  .ms-cell:last-child{ border-right: 0; }
  .ms-cell:nth-child(2){ padding-left: 22px; }
  .ms-cell:nth-child(3){ padding-left: 22px; }
  .ms-cell:nth-child(4){ padding-left: 22px; }
  @media (max-width: 991px){
    .ms-cell{ padding-left: 22px; padding-right: 22px; }
    .ms-cell:nth-child(2n){ border-right: 0; }
    .ms-cell:nth-child(1), .ms-cell:nth-child(2){ border-bottom: 1px solid var(--line-c); }
  }
  .step:last-child{ border-right: 0; }
  .step:nth-child(even) .step-n{ color: var(--moss); }
  @media (max-width: 991px){
    .step:nth-child(2n){ border-right: 0; }
    .step:nth-child(1), .step:nth-child(2){ border-bottom: 1px solid var(--line-c); }
  }
  @media (max-width: 479px){
    .step{ border-right: 0; border-bottom: 1px solid var(--line-c); }
    .step:last-child{ border-bottom: 0; }
  }
  .tier-li:first-child{ border-top: 0; }

  /* SVG child styling (svg imports as a DOM element) */
  .ci-arrow{
    position: absolute;
    top: 28px; right: 28px;
    color: var(--ink);
    width: 24px; height: 14px;
    transition: transform .3s ease;
  }
  .cat-item:hover .ci-arrow{ transform: translateX(4px); }
  .c-foundation .ci-arrow{ color: var(--cream); }
  .vt-btn svg{
    width: 26px; height: 26px;
    color: var(--moss);
    transform: translateX(2px);
  }
  .seal svg{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

  /* Hover-driven descendants */
  .vt-card:hover .vt-img{
    transform: scale(1.04);
    filter: grayscale(0) contrast(1.04) brightness(0.96);
  }
  .vt-card:hover .vt-btn{
    transform: scale(1.08);
    background: var(--rust-l);
  }
  .vt-duration{ -webkit-backdrop-filter: blur(6px); }


  /* Slider controls — DOM elements; styled here because class CSS for elements
     added outside whtml imports has no Webflow style to attach to. Also
     neutralises the w-button base the steppers acquired on import. */
  .ts-step{
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--line-c);
    background: transparent;
    color: var(--ink);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: grid; place-items: center;
    flex: none;
    padding: 0;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
    font-variation-settings: "wght" 500, "wdth" 90, "opsz" 24;
  }
  .ts-step:hover{ background: var(--ink); color: var(--cream); border-color: var(--ink); }
  .ts-range{
    flex: 1;
    appearance: none;
    background: transparent;
    cursor: grab;
    height: 22px;
    margin: 0;
    padding: 0;
  }

  /* Range input internals (vendor pseudo-elements) */
  .ts-step:active{ transform: scale(0.94); }
  .ts-range{ -webkit-appearance: none; }
  .ts-range:active{ cursor: grabbing; }
  .ts-range:focus{ outline: none; }
  .ts-range::-webkit-slider-runnable-track{
    height: 6px;
    border-radius: 999px;
    background:
      linear-gradient(to right, var(--rust) 0, var(--rust) var(--ts-pct, 0%), var(--line-c) var(--ts-pct, 0%), var(--line-c) 100%);
  }
  .ts-range::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--moss);
    border: 3px solid var(--rust);
    box-shadow: 0 2px 6px rgba(12, 26, 61, 0.25);
    margin-top: -8px;
    cursor: grab;
    transition: transform .18s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .ts-range:active::-webkit-slider-thumb{ transform: scale(1.18); cursor: grabbing; }
  .ts-range::-moz-range-track{
    height: 6px;
    border-radius: 999px;
    background:
      linear-gradient(to right, var(--rust) 0, var(--rust) var(--ts-pct, 0%), var(--line-c) var(--ts-pct, 0%), var(--line-c) 100%);
  }
  .ts-range::-moz-range-thumb{
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--moss);
    border: 3px solid var(--rust);
    box-shadow: 0 2px 6px rgba(12, 26, 61, 0.25);
    cursor: grab;
    transition: transform .18s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .ts-range:active::-moz-range-thumb{ transform: scale(1.18); cursor: grabbing; }
  .ts-range::-moz-range-progress{
    background: var(--rust);
    height: 6px;
    border-radius: 999px;
  }

  /* FAQ open states (details/summary) */
  .qa-sum::-webkit-details-marker{ display: none; }
  .qa[open] .qa-plus::after{ transform: translate(-50%, -50%) rotate(90deg); }
  .qa[open] .qa-answ{ grid-template-rows: 1fr; }

  /* Motion defaults — gated behind html.js-motion so content is only
     pre-hidden when the animation script will actually run. The Webflow
     Designer canvas (and any no-JS context) never gets the class, so
     everything stays visible and editable there. The published page adds
     the class from head custom code before first paint. */
  .hero-title .ph{ display: inline-block; }
  html.js-motion [data-reveal], html.js-motion [data-stagger] > *{ opacity: 0; }
  html.js-motion .hero-title .ph{ opacity: 0; transform: translateY(28px); will-change: opacity, transform; }
  html.js-motion .hp-tag, html.js-motion .hp-stat, html.js-motion .hero-ctas .btn{ opacity: 0; }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
    [data-reveal], [data-stagger] > *{ opacity: 1 !important; transform: none !important; }
    .hero-title .ph,
    .hp-tag,
    .hp-stat,
    .hero-ctas .btn{ opacity: 1 !important; transform: none !important; }
  }
/* ===== Interior pages: shared + page embed rules ===== */
/* Reset + tag-level rules Webflow styles can't hold */
*, *::before, *::after{ box-sizing: border-box; }
html.js-motion{ scroll-behavior: smooth; }
/* Masked artwork */
.iarr{
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none'><path d='M0 6h16M11 1l5 5-5 5' stroke='black' stroke-width='1.4' stroke-linecap='square'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none'><path d='M0 6h16M11 1l5 5-5 5' stroke='black' stroke-width='1.4' stroke-linecap='square'/></svg>") no-repeat center / contain;
}
/* Keyframes + animation assignments */
@keyframes pulse{
  0%   { box-shadow: 0 0 0 0 rgba(98, 187, 70, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(98, 187, 70, 0); }
  100% { box-shadow: 0 0 0 0 rgba(98, 187, 70, 0); }
}
/* JS-toggled states */
.site-hd.hd-scrolled{ border-bottom-color: var(--line-c); }
.price-swap{ opacity: 0; }
/* Range input internals */
.ts-step:active{ transform: scale(0.94); }
/* FAQ open states */
.qa-sum::-webkit-details-marker{ display: none; }
/* Motion defaults — gated behind html.js-motion so the Webflow Designer
   canvas (no JS) shows everything; the published page adds the class from
   head custom code before first paint. Local pages: site.js adds it. */
html.js-motion [data-reveal],
html.js-motion [data-hero],
html.js-motion [data-stagger] > *{ opacity: 0; }
/* --- pro page --- */
.ic-head b{ font-family: var(--display);
    font-variation-settings: "wght" 540, "wdth" 80, "opsz" 96;
    font-size: 17px;
    letter-spacing: -0.012em;
    color: var(--cream); }
.ic-head span{ font-size: 11.5px;
    color: var(--on-navy-3);
    font-variation-settings: "wght" 500, "wdth" 90, "opsz" 24; }
.std-label b{ display: block;
    color: var(--cream);
    font-variation-settings: "wght" 560, "wdth" 80, "opsz" 96;
    font-size: 14px;
    margin-bottom: 2px; }
.crow-themes span{ font-size: 11.5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--paper);
    border: 1px solid var(--line-c);
    color: var(--ink-2);
    font-variation-settings: "wght" 500, "wdth" 92, "opsz" 16; }
.why-proof b{ font-family: var(--display);
    font-variation-settings: "wght" 560, "wdth" 80, "opsz" 96;
    color: var(--ink);
    font-size: 1.1em; }
.tool-li b{ color: var(--cream);
    font-variation-settings: "wght" 560, "wdth" 80, "opsz" 96; }
.rp-head b{ font-family: var(--display);
    font-variation-settings: "wght" 560, "wdth" 80, "opsz" 96;
    font-size: 16px;
    letter-spacing: -0.012em; }
.rp-head span{ font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    font-variation-settings: "wght" 500, "wdth" 92, "opsz" 16; }
.rp-bar i{ display: block; height: 100%;
    background: var(--rust);
    border-radius: 999px; }
.rp-exp span{ border: 1px solid var(--line-c);
    border-radius: 3px;
    padding: 3px 8px;
    font-variation-settings: "wght" 560, "wdth" 84, "opsz" 60;
    color: var(--ink-2); }
.ic-row:last-of-type{ border-bottom: 0; }
.crow-sum::-webkit-details-marker{ display: none; }
.crow[open] .crow-plus::after{ transform: translate(-50%, -50%) rotate(90deg); }
.crow[open] .crow-wrap{ grid-template-rows: 1fr; }
.why-cell:nth-child(odd) .why-n{ color: var(--ink); }
.lgroup:last-child{ margin-bottom: 0; }
/* --- yrityksille page --- */
.yr-portrait img{ width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    filter: grayscale(0.88) contrast(1.06) brightness(0.92) sepia(0.06); }
.aside-note a{ color: var(--ink);
    border-bottom: 1.5px solid var(--rust);
    padding-bottom: 1px; }
.bx svg{ width: 14px; height: 14px; color: var(--moss); }
.check b{ display: block;
    font-family: var(--display);
    font-variation-settings: "wght" 560, "wdth" 80, "opsz" 96;
    font-size: 17.5px;
    letter-spacing: -0.012em;
    line-height: 1.2;
    margin-bottom: 4px; }
.check div span{ font-size: 14px;
    color: var(--ink-2);
    line-height: 1.5;
    max-width: 56ch;
    display: block; }
.q-who b{ color: var(--cream); font-variation-settings: "wght" 560, "wdth" 80, "opsz" 96; }
.risk-cell:last-child{ border-right: 0; }
.risk-cell + .risk-cell{ padding-left: 22px; }
.reason:nth-child(odd) .reason-n{ color: var(--ink); }
.day + .day{ padding-left: 24px; }
.day:last-child{ border-right: 0; }
@media (max-width: 767px){
  .day + .day{ padding-left: 0; }
  .day:last-child{ border-bottom: 0; }
}
.day:nth-child(even) .day-d{ color: var(--moss); }
/* --- hinnat page --- */
.meta-strip span{ display: inline-flex; align-items: center; gap: 8px; }
.bt-terms b{ font-variation-settings: "wght" 560, "wdth" 84, "opsz" 24; color: var(--ink); }
.tick svg{ width: 11px; height: 11px; color: var(--moss); opacity: 0; transition: opacity .15s ease; }
.srow b{ color: var(--cream);
    font-variation-settings: "wght" 540, "wdth" 84, "opsz" 24;
    text-align: right; }
.omark svg{ width: 24px; height: 24px; color: var(--moss); }
.osuccess p{ margin: 0 0 8px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); max-width: 58ch; }
.bt{
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid var(--ink);
  }
.bt th{
    text-align: left;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    font-variation-settings: "wght" 520, "wdth" 88, "opsz" 24;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--line-c);
  }
.bt td{
    padding: 13px 14px;
    border-bottom: 1px solid var(--line-c);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
  }
.bt td:first-child{
    font-variation-settings: "wght" 540, "wdth" 84, "opsz" 24;
  }
.bt th:nth-child(n+2), .bt td:nth-child(n+2){ text-align: right; }
.bt tr.is-active td{
    background: var(--paper);
    font-variation-settings: "wght" 560, "wdth" 84, "opsz" 24;
  }
.bt tr.is-active td:first-child{
    position: relative;
  }
.bt tr.is-active td:first-child::before{
    content: "";
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--rust);
    margin-right: 10px;
  }
.bt td small{
    display: block;
    font-size: 12px;
    color: var(--muted);
  }
.oform fieldset{
    border: 0; padding: 0; margin: 0 0 30px;
  }
.oform fieldset:last-of-type{ margin-bottom: 0; }
.oform legend{
    font-family: var(--display);
    font-variation-settings: "wght" 540, "wdth" 80, "opsz" 96;
    font-size: 18px;
    letter-spacing: -0.012em;
    padding: 0 0 4px;
    display: flex; align-items: baseline; gap: 10px;
    width: 100%;
  }
.field label{
    font-size: 12.5px;
    color: var(--ink-3);
    font-variation-settings: "wght" 520, "wdth" 90, "opsz" 24;
  }
.field input[type="text"],
  .field input[type="email"],
  .field input[type="tel"],
  .field textarea{
    font: inherit;
    font-size: 15px;
    padding: 12px 14px;
    border: 1px solid var(--line-c);
    border-radius: 4px;
    background: #FFFFFF;
    color: var(--ink);
    transition: border-color .2s ease, box-shadow .2s ease;
    width: 100%;
  }
.field textarea{ resize: vertical; min-height: 88px; }
.field input:focus, .field textarea:focus{
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(98, 187, 70, 0.28);
  }
.field input:user-invalid{
    border-color: #B4443C;
  }
.pkg-pick label{
    cursor: pointer;
    border: 1.5px solid var(--line-c);
    border-radius: 5px;
    padding: 18px 18px 16px;
    display: flex; flex-direction: column; gap: 4px;
    transition: border-color .2s ease, background .2s ease;
    position: relative;
  }
.pkg-pick input{ position: absolute; opacity: 0; pointer-events: none; }
.pkg-pick label:has(input:checked){
    border-color: var(--ink);
    background: #FFFFFF;
  }
.pkg-pick label:has(input:checked) .tick{
    background: var(--rust);
    border-color: var(--rust);
  }
.pkg-pick label:has(input:checked) .tick svg{ opacity: 1; }
.segs label{
    cursor: pointer;
    border: 1px solid var(--line-c);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-variation-settings: "wght" 500, "wdth" 92, "opsz" 16;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
    position: relative;
  }
.segs input{ position: absolute; opacity: 0; pointer-events: none; }
.segs label:has(input:checked){
    background: var(--ink);
    color: var(--cream);
    border-color: var(--ink);
  }
.terms input{
    appearance: none;
    -webkit-appearance: none;
    width: 20px; height: 20px;
    border: 1.5px solid var(--line-c);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    display: grid; place-items: center;
    margin-top: 1px;
    transition: background .15s ease, border-color .15s ease;
  }
.terms input::after{
    content: "";
    width: 10px; height: 10px;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M2.5 8.5l4 4 7-9' stroke='black' stroke-width='2.6' stroke-linecap='square'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M2.5 8.5l4 4 7-9' stroke='black' stroke-width='2.6' stroke-linecap='square'/></svg>") no-repeat center / contain;
    background: var(--moss);
    opacity: 0;
    transition: opacity .15s ease;
  }
.terms input:checked{ background: var(--rust); border-color: var(--rust); }
.terms input:checked::after{ opacity: 1; }
.terms a{ border-bottom: 1px solid var(--rust); padding-bottom: 1px; }
.osuccess[hidden]{ display: none; }
/* --- artikkeli page --- */
.afig img{ width: 100%; height: 100%;
    object-fit: cover;
    object-position: 50% 55%;
    filter: grayscale(0.82) contrast(1.05) brightness(0.92) sepia(0.08); }
.afig figcaption{ margin-top: 12px;
    font-size: 12.5px;
    color: var(--muted);
    font-variation-settings: "wght" 480, "wdth" 95, "opsz" 14;
    display: inline-flex; align-items: center; gap: 8px; }
.afig figcaption::before{ content:""; width: 18px; height: 1px; background: var(--rust); }
.arail-who b{ display: block;
    color: var(--ink);
    font-family: var(--display);
    font-variation-settings: "wght" 560, "wdth" 80, "opsz" 96;
    font-size: 14px; }
.arail nav{ display: flex; flex-direction: column; gap: 9px; }
.arail nav a{ color: var(--muted);
    line-height: 1.4;
    transition: color .2s ease;
    display: inline-flex; gap: 8px; }
.arail nav a:hover{ color: var(--ink); }
.arail nav a::before{ content: "→"; color: var(--rust); }
.dl-box b{ display: block;
    color: var(--ink);
    font-variation-settings: "wght" 560, "wdth" 84, "opsz" 24;
    margin-bottom: 4px; }
.dl-box a{ color: var(--rust-d);
    font-variation-settings: "wght" 560, "wdth" 84, "opsz" 24;
    border-bottom: 1px solid var(--rust);
    padding-bottom: 1px; }
.prose > p{ font-size: 17.5px;
    line-height: 1.65;
    margin: 0 0 24px; }
.prose > p.opener::first-letter{ font-family: var(--display);
    font-variation-settings: "wght" 560, "wdth" 80, "opsz" 96;
    font-size: 3.1em;
    float: left;
    line-height: 0.82;
    padding: 4px 10px 0 0;
    color: var(--ink); }
.prose h2{ font-family: var(--display);
    font-variation-settings: "wght" 540, "wdth" 82, "opsz" 72;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: clamp(44px, 5vw, 64px) 0 18px;
    scroll-margin-top: 90px; }
.prose strong{ color: var(--ink); font-variation-settings: "wght" 560, "wdth" 90, "opsz" 16; }
.co-big span{ font-size: 0.42em; letter-spacing: -0.01em; }
.tags span{ border: 1px solid var(--line-c);
    border-radius: 999px;
    padding: 5px 12px;
    color: var(--ink-2); }
.share a{ color: var(--ink-2);
    margin-left: 14px;
    border-bottom: 1px solid var(--rust);
    padding-bottom: 1px; }
.share a:hover{ color: var(--ink); }
.arr{ color: var(--ink); justify-self: end; }
.is-guide .nr-ti::after{ content: "PDF-opas";
    background: var(--rust);
    color: var(--moss);
    font-size: 10px;
    font-variation-settings: "wght" 580, "wdth" 78, "opsz" 96;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 2px;
    padding: 3px 7px 2px;
    margin-left: 10px;
    vertical-align: 0.2em;
    white-space: nowrap; }
.advice-item:nth-child(odd) .adv-n{ color: var(--ink); }
/* ===== Interior pages: pseudo states ===== */
.crow-sum:hover{ background: rgba(248, 249, 254, 0.75); }
.crow-plus::before{ content:""; position: absolute;
    background: currentColor;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    transition: transform .3s ease;
    width: 12px; height: 1.5px; }
.crow-plus::after{ content:""; position: absolute;
    background: currentColor;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    transition: transform .3s ease;
    width: 1.5px; height: 12px; }
.band::after{ content:"";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(12, 26, 61, 0.16), rgba(7, 17, 42, 0.55));
    pointer-events: none; }
.band-tag::before{ content:""; width:8px; height:8px; border-radius:50%; background: var(--rust); }
.tool-li::before{ content: "+";
    color: var(--rust-l);
    font-variation-settings: "wght" 560, "wdth" 80, "opsz" 96; }
.kicker::before{ content: ""; width: 18px; height: 1px; background: var(--rust); }
.btn-primary:hover{ background: var(--rust-d); }
.btn-rust:hover{ background: var(--rust-d); color: var(--cream); }
.btn-cream:hover{ background: var(--rust); color: var(--moss); }
.btn-outline-cream:hover{ background: var(--cream); color: var(--moss-d); }
.btn-outline-ink:hover{ background: var(--ink); color: var(--cream); }
.nav-a:hover{ color: var(--ink); }
.lang:hover{ background: var(--cream-2); color: var(--ink-2); }
.lang-alt:hover{ opacity: 0.85; color: var(--ink); }
.crumb-a:hover{ color: var(--cream); }
.qa-plus::before{ content:""; position: absolute;
  background: currentColor;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: transform .3s ease;
  width: 16px; height: 1.5px; }
.qa-plus::after{ content:""; position: absolute;
  background: currentColor;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: transform .3s ease;
  width: 1.5px; height: 16px; }
.close::before{ content: "";
  position: absolute;
  width: 700px; height: 700px;
  right: -200px; bottom: -300px;
  background: radial-gradient(circle at center, rgba(98, 187, 70, 0.32), transparent 60%);
  filter: blur(40px);
  pointer-events: none; }
.fc-a:hover{ color: var(--cream); }
.fb-a:hover{ color: var(--cream); }
.ytj-link:hover{ color: var(--cream); border-bottom-color: var(--rust-l); }
.badge-rec::before{ content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--moss); }
.tier-li::before{ content: "+";
  flex: none;
  color: var(--rust);
  font-variation-settings: "wght" 560, "wdth" 80, "opsz" 96;
  margin-top: -1px; }
.tier-li-nv::before{ color: var(--rust-l); }
/* Pricing Tier component, "Navy" variant. Per-variant PSEUDO-state overrides are accepted by
   the Webflow API and read back, but never emitted into the published stylesheet -- only
   non-pseudo variant rules are. Webflow does emit a stable data-wf--<component>--variant
   attribute on the instance root, so the navy bullet colour is hung off that instead. */
[data-wf--pricing-tier--variant="navy"] .tier-li::before{ color: var(--rust-l); }
.hp-tag::before{ content:""; width:8px; height:8px; border-radius:50%; background: var(--rust); }
.yr-portrait::after{ content:"";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(12, 26, 61, 0) 50%, rgba(7, 17, 42, 0.7));
    pointer-events: none; }
.qt::before{ content: "”"; color: var(--rust-l); }
.qt::after{ content: "”"; color: var(--rust-l); }
.acrumb-a:hover{ color: var(--ink); }
.frame::after{ content:"";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(12, 26, 61, 0.05), rgba(7, 17, 42, 0.35));
    pointer-events: none; }
.pull::before{ content: "”";
    display: block;
    color: var(--rust);
    font-size: 1.6em;
    line-height: 0.6;
    margin-bottom: 10px; }
.next-row:hover{ background: rgba(248, 249, 254, 0.75); }


/* v8: Webflow-native form + heading normalization (Navisec build).
   - w-form/w-input/w-radio defaults add margins the design doesn't have.
   - .oform label reset needs an exception for label.terms (design margin 26/22).
   - Checkbox input keeps the design metrics instead of w-checkbox-input floats.
   - Webflow strips the hidden attribute at publish, so .osuccess hides here and
     the page script reveals it via style.display.
   - h3 tag default line-height overrides body inheritance; .osum-title/.bt-title
     rely on the design's inherited 1.55. */
.oform{ margin: 0; }
.oform label{ margin-bottom: 0; font-weight: inherit; }
.oform label.terms{ margin: 26px 0 22px; padding-left: 0; }
.terms .w-checkbox-input{ margin: 1px 3px 3px 4px; }
.oform .w-input{ margin-bottom: 0; height: auto; }
.oform .w-radio{ margin-bottom: 0; }
.osuccess{ display: none; }
.osum-title{ line-height: 1.55; }
.bt-title{ line-height: 1.55; }
.co-h{ line-height: 1.5; }
.osuccess-title{ line-height: 1.55; }


/* v10: CMS rich-text bodies.
   Webflow wraps bound rich text in .w-richtext, so the design's `.prose > p` / `.prose h2`
   rules (written for hand-authored article markup) never reach the CMS content.
   These mirror them one level deeper. */
.prose .w-richtext p{ font-size: 17.5px;
    line-height: 1.65;
    margin: 0 0 24px;
    color: var(--ink-2); }
.prose .w-richtext h2{ font-family: var(--display);
    font-variation-settings: "wght" 540, "wdth" 82, "opsz" 72;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: clamp(44px, 5vw, 64px) 0 18px;
    scroll-margin-top: 90px; }
.prose .w-richtext h3{ font-family: var(--display);
    font-variation-settings: "wght" 560, "wdth" 80, "opsz" 96;
    font-size: clamp(20px, 2.2vw, 25px);
    line-height: 1.15;
    letter-spacing: -0.014em;
    color: var(--ink);
    margin: clamp(30px, 3.4vw, 42px) 0 12px; }
.prose .w-richtext h4,
.prose .w-richtext h5{ font-family: var(--display);
    font-variation-settings: "wght" 560, "wdth" 84, "opsz" 60;
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: -0.012em;
    color: var(--ink);
    margin: 28px 0 10px; }
.prose .w-richtext strong{ color: var(--ink);
    font-variation-settings: "wght" 560, "wdth" 90, "opsz" 16; }
.prose .w-richtext a{ color: var(--ink);
    border-bottom: 1.5px solid var(--rust);
    padding-bottom: 1px; }
.prose .w-richtext ul,
.prose .w-richtext ol{ margin: 0 0 24px;
    padding-left: 22px;
    font-size: 17.5px;
    line-height: 1.65; }
.prose .w-richtext li{ margin-bottom: 8px; }
.prose .w-richtext blockquote{ margin: clamp(30px, 3.6vw, 44px) 0;
    padding: 18px 0 20px;
    border-top: 1px solid var(--line-c);
    border-bottom: 1px solid var(--line-c);
    font-family: var(--display);
    font-variation-settings: "wght" 520, "wdth" 84, "opsz" 60;
    font-size: clamp(20px, 2.2vw, 26px);
    line-height: 1.25;
    letter-spacing: -0.014em;
    color: var(--ink); }
.prose .w-richtext figure{ margin: clamp(28px, 3.4vw, 40px) 0; }
.prose .w-richtext img{ width: 100%;
    height: auto;
    border-radius: 6px;
    display: block; }
.prose .w-richtext figcaption{ margin-top: 10px;
    font-size: 12.5px;
    color: var(--muted);
    font-variation-settings: "wght" 500, "wdth" 90, "opsz" 24; }

/* Legal / long-form static pages reuse the article measure. */
.legal{ background: var(--paper);
    padding: clamp(56px, 7vw, 96px) 0 clamp(80px, 10vw, 130px); }
.legal-grid{ display: grid;
    grid-template-columns: minmax(0, 720px);
    justify-content: start; }
.legal-meta{ margin-bottom: clamp(24px, 3vw, 36px);
    font-size: 12.5px;
    color: var(--muted);
    font-variation-settings: "wght" 500, "wdth" 90, "opsz" 24; }


/* v11: heading and list scale for long-form prose (legal pages, CMS bodies).
   Descendant selectors so they apply to hand-authored markup and .w-richtext alike.
   The design's article prose only used h2, so h3/h4 need an explicit step down from it. */
.prose h3{ font-family: var(--display);
    font-variation-settings: "wght" 560, "wdth" 80, "opsz" 96;
    font-size: clamp(19px, 2.1vw, 25px);
    line-height: 1.15;
    letter-spacing: -0.014em;
    color: var(--ink);
    margin: clamp(30px, 3.4vw, 42px) 0 12px; }
.prose h4,
.prose h5{ font-family: var(--display);
    font-variation-settings: "wght" 560, "wdth" 84, "opsz" 60;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 26px 0 10px; }
.prose ul,
.prose ol{ margin: 0 0 24px;
    padding-left: 22px;
    font-size: 17.5px;
    line-height: 1.65;
    color: var(--ink-2); }
.prose li{ margin-bottom: 8px; }
.prose a:not(.btn){ color: var(--ink);
    border-bottom: 1.5px solid var(--rust);
    padding-bottom: 1px; }

/* ── Accent by bolding ──────────────────────────────────────────────────────
   The two-tone heading accent is expressed as the BOLD state, not a nested
   <span class="ac-l">. In the Designer you select part of a heading and press
   ⌘B, which keeps the heading a single editable element — required for
   component props and for CMS-bound titles.
   font-weight/font-variation-settings are forced back to `inherit` because
   these are variable fonts: without it, <strong> would render heavier than the
   surrounding heading and the accent would change the type, not just the colour.
   The legacy .ac-l / .ac-r spans keep working; this is additive.            */
.phero-title strong,
.hero-title strong,
.ahead-title strong,
.pclose-title strong,
.quotes-title strong{
    color: var(--rust-l);
    font-weight: inherit;
    font-variation-settings: inherit;
}
.why-title strong,
.risks-title strong,
.reasons-title strong,
.fit-title strong,
.timeline-title strong,
.faq-title strong,
.twodoor-head strong,
.archive-head strong,
.legal .prose h2 strong{
    color: var(--rust);
    font-weight: inherit;
    font-variation-settings: inherit;
}

/* ── Nav dropdowns ──────────────────────────────────────────────────────────
   Webflow's native Dropdown widget, restyled to the design system. The widget
   ships its own w-dropdown* classes; we style them here rather than inventing
   project classes, because these elements are generated by Webflow and cannot
   carry design-system classes on their inner parts.                          */
.navlinks .w-dropdown{ display: flex; align-items: center; margin: 0; }
.navlinks .w-dropdown-toggle{
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: inherit;
}
.navlinks .w-dropdown-toggle:focus-visible{ outline: 2px solid var(--rust); outline-offset: 3px; }
/* the stock caret is absolutely positioned and oversized — bring it inline */
.navlinks .w-icon-dropdown-toggle{
    position: static;
    margin: 0;
    width: auto;
    height: auto;
    order: 2;            /* Webflow puts the caret BEFORE the label in the DOM */
    font-size: 9px;
    opacity: 0.55;
    transition: opacity 140ms ease, transform 140ms ease;
}
.navlinks .w-dropdown-toggle:hover .w-icon-dropdown-toggle{ opacity: 1; }
.navlinks .w--open .w-icon-dropdown-toggle{ transform: rotate(180deg); opacity: 1; }

.navlinks .w-dropdown-list{
    /* Webflow's own .w-dropdown-list is position:absolute with no offsets. Because
       .navlinks .w-dropdown is a flex box with align-items:center, "top:auto" resolves
       to the panel's STATIC position inside that flex line -- i.e. vertically centred on
       the 30px toggle, which put the panel at y=-7 (above the header) instead of below it.
       top/left must be stated explicitly. */
    top: 100%;
    left: 0;
    z-index: 60;
    background: var(--cream);
    border: 1px solid var(--line-d);
    border-radius: 8px;
    padding: 7px;
    min-width: 232px;
    margin-top: 10px;
    box-shadow: 0 14px 34px rgba(12, 26, 61, 0.16);
}
.navlinks .w-dropdown-link{
    display: block;
    padding: 9px 11px;
    border-radius: 5px;
    color: var(--ink);
    font-size: 15.5px;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color 140ms ease;
}
.navlinks .w-dropdown-link:hover{ background: rgba(98, 187, 70, 0.14); color: var(--ink); }
.navlinks .w-dropdown-link.w--current{ background: rgba(98, 187, 70, 0.20); color: var(--ink); }

@media (max-width: 991px){
    .navlinks .w-dropdown-list{ min-width: 200px; }
}

/* ============================================================
   GF component pass (2026-08-21) — Home sections to G's component
   language with F colors. Descendant-scoped so shared classes
   (ms-cell, sec-*, btn-cream) restyle per section without bleed.
   ============================================================ */

/* -- Section kickers: slash kicker replaces uppercase micro-label -- */
.sec-kicker{ text-transform: none; letter-spacing: .02em; font-size: 14px;
  color: var(--rust-d); font-variation-settings: "wght" 600; }
.sec-kicker::before{ content: "/"; width: auto; height: auto; background: transparent; font-variation-settings: "wght" 700; margin-right: 2px; }
.sec-kicker-nv{ color: var(--rust-l); }
.hm-left{ font-size: 14.5px; }

/* -- Section titles to GF h2 scale -- */
.sec-title, .faq-title, .process-title, .mf-title, .cert-title, .ledger-title{
  font-size: clamp(24px, 2.9vw, 35px); line-height: 1.18; letter-spacing: -.01em;
  font-variation-settings: "wght" 600; max-width: 24ch; }
.mf-title{ max-width: 18ch; }
.sec-lede{ font-size: 16px; line-height: 1.6; color: var(--muted); }

/* -- Checker: sky-soft section, pill options, rounded navy result -- */
.checker{ background: var(--paper); border-bottom: 0; padding: clamp(48px, 6.5vw, 80px) 0; }
.ck-opt{ border-width: 1px; background: var(--cream); color: var(--moss);
  font-variation-settings: "wght" 600; font-size: 14px; padding: 9px 16px; }
.ck-opt:hover{ border-color: var(--rust-d); }
.ck-result{ border-radius: 18px; padding: clamp(22px, 3vw, 32px); }
.ckr-k{ text-transform: none; letter-spacing: .01em; font-size: 13px;
  color: var(--rust-l); font-variation-settings: "wght" 600; }

/* -- Miksi: sky-soft stat cards -- */
.home-why{ padding: clamp(48px, 6.5vw, 80px) 0; }
.why-stats{ border-top: 0; border-bottom: 0; grid-column-gap: clamp(14px, 2vw, 24px);
  grid-row-gap: clamp(14px, 2vw, 24px); }
.why-stats .ms-cell{ background: var(--paper); border: 1px solid var(--line-c) !important;
  border-radius: 18px; padding: 26px !important; }
.why-stats .ms-v{ font-size: clamp(34px, 3.8vw, 48px); letter-spacing: -.015em;
  font-variation-settings: "wght" 700; }
.why-stats .ms-lbl{ color: var(--muted); font-size: clamp(14px, 1.15vw, 16px); line-height: 1.55; margin-top: 12px; }

/* -- Ledger: rounded card rows, no strikethrough -- */
.ledger{ margin-top: clamp(48px, 6vw, 80px); }
.ledger-head{ border-bottom: 0; padding-bottom: 6px; }
.ledger-row{ background: var(--cream); border: 1px solid var(--line-c);
  border-radius: 18px; padding: 20px clamp(18px, 2.4vw, 28px); margin-bottom: 12px; }
.lg-before{ text-decoration: none; font-size: 13.5px; }
.lg-before::before{ content: "Ennen: "; color: var(--muted-2); }

/* -- Palvelu: GF band rhythm + pillar pills -- */
.service{ padding: clamp(48px, 6.5vw, 80px) 0; }
.pillars{ display: flex; gap: 8px; flex-wrap: wrap; border-top: 0; margin-bottom: 26px; }
.pillar{ border: 1px solid var(--line-m); border-radius: 999px; background: var(--moss-l);
  margin-right: 0; padding: 10px 16px; }
.pillar .pl-n{ display: none; }
.pillar .pl-h{ font-size: 13px; font-variation-settings: "wght" 600; color: #fff;
  margin: 0; letter-spacing: 0; }
.pillar .pl-p{ display: none; }

/* -- Prosessi: sky-soft step cards -- */
.process{ padding: clamp(48px, 6.5vw, 80px) 0; }
.steps{ border-top: 0; grid-column-gap: clamp(14px, 2vw, 24px); grid-row-gap: clamp(14px, 2vw, 24px); }
.step{ background: var(--paper); border: 1px solid var(--line-c) !important;
  border-radius: 18px; padding: 22px !important; }
.step-n{ font-size: 14px !important; letter-spacing: 0; line-height: 1;
  color: var(--rust-d) !important; font-variation-settings: "wght" 700; margin: 0 0 10px; }
.step-ti{ font-size: 16.5px; color: var(--moss); font-variation-settings: "wght" 700; }
.step-tx{ color: var(--muted); font-size: 14px; }

/* -- Todisteet: navy band, big-quote treatment -- */
.home-proof{ background: var(--moss); color: var(--cream); }
.home-proof .sec-title{ color: var(--cream); }
.home-proof .sec-kicker{ color: var(--rust-l); }
.home-proof .sec-lede{ color: var(--on-navy-2); }
.home-proof .proof-nums{ border-top-color: var(--line-m); border-bottom-color: var(--line-m); }
.home-proof .ms-cell{ border-right-color: var(--line-m); }
.home-proof .ms-cell:nth-child(1), .home-proof .ms-cell:nth-child(2){ border-bottom-color: var(--line-m); }
.home-proof .ms-v{ color: var(--cream); }
.home-proof .ms-u{ color: var(--rust-l); }
.home-proof .ms-lbl{ color: var(--on-navy-2); }
.home-proof .pq{ background: transparent; border: 0; border-top: 1px solid var(--line-m);
  border-radius: 0; min-height: 0; padding: 22px 4px 8px; }
.home-proof .pq-lead{ background: transparent; color: inherit; }
.home-proof .pq-t{ color: #fff; font-size: clamp(18px, 1.9vw, 23px); line-height: 1.45;
  font-variation-settings: "wght" 500; }
.home-proof .pq-t::before{ content: "\201D"; color: var(--rust-l); font-size: 1.6em;
  line-height: 0; vertical-align: -.35em; margin-right: 4px; font-variation-settings: "wght" 700; }
.home-proof .pq-who{ color: var(--on-navy-2); }
.home-proof .pq-who b{ color: #fff; }
.home-proof .proof-foot{ color: var(--on-navy-2); }
.home-proof .proof-link{ color: var(--rust-l); }
.home-proof .proof-link:hover{ text-decoration: underline; }

/* -- Sertifikaatti: leaf-wash band, static seal -- */
.cert{ background: #EAF6E4; color: var(--ink); padding: clamp(48px, 6.5vw, 80px) 0; }
.cert-title{ color: var(--moss); }
.cert-p{ color: #43507A; font-size: 16px; line-height: 1.62; }
.seal{ width: min(280px, 70vw); border: 1.5px solid var(--rust-d); border-radius: 50%; }
.seal::before{ content: ""; position: absolute; inset: 14px;
  border: 1px dashed rgba(62, 143, 42, .5); border-radius: 50%; }
.seal svg{ display: none; }
.seal-gl{ color: var(--moss); }
.seal-small{ color: var(--rust-d); letter-spacing: .02em; }
.cert .btn-cream{ background: var(--moss); color: #fff; }
.cert .btn-cream:hover{ background: #1B2D58; color: #fff; }

/* -- Ratkaisut: rounded tiers -- */
.products{ padding: clamp(48px, 6.5vw, 80px) 0; }
.ptier{ border-radius: 20px; padding: clamp(24px, 3.2vw, 38px); }
.pgrid{ grid-column-gap: clamp(16px, 2.4vw, 28px); grid-row-gap: clamp(16px, 2.4vw, 28px); }
.tier-nm{ font-size: clamp(22px, 2.4vw, 28px); font-variation-settings: "wght" 700;
  letter-spacing: -.01em; line-height: 1.1; }
.tier-tg{ font-size: 15px; line-height: 1.55; max-width: none; }
.tier-lbl{ text-transform: none; letter-spacing: .02em; font-size: 13px;
  font-variation-settings: "wght" 600; }
.tier-li{ border-top: 0; padding: 4px 0 4px 0; }
.tier-li::before{ content: "\2713"; color: var(--rust); }
.tier-li.tier-li-nv::before, .ptier.tier-featured .tier-li::before{ color: var(--rust-l); }
.products .btn-outline-ink{ border-color: var(--moss); color: var(--moss); }

/* -- FAQ: white cards on sky-soft -- */
.faq{ background: var(--paper); padding: clamp(48px, 6.5vw, 80px) 0; }
.qa{ background: var(--cream); border: 1px solid var(--line-c); border-radius: 16px;
  margin-bottom: 10px; padding: 4px clamp(16px, 2.2vw, 24px); }
.qa-q{ font-size: 16px; font-variation-settings: "wght" 600; color: var(--moss);
  letter-spacing: 0; }
.qa-plus{ color: var(--rust-d); }

/* -- Hero mobile: GF photo radius swap -- */
@media (max-width: 767px){
  .hero-portrait{ border-radius: 0 0 90px 0; }
}

/* -- GF fix round 2 -- */
.home-proof .pq-lead{ grid-column-start: span 4; }
.door .go-link{ margin-top: auto; align-self: flex-start; }

/* ============================================================
   Polish round 1 (2026-08-21) — WCAG contrast fixes from the
   site-wide audit. Text greens on light grounds darken to
   #357A1E (>=4.5:1 small text); on-dark accents use --rust-l.
   Interior close sections (leaf-wash card) get dark text/CTAs.
   ============================================================ */

/* Navy-band ledes regained their on-navy tone (v19 .sec-lede override) */
.sec-lede-nv{ color: var(--on-navy-2); }

/* Small green labels on light grounds: darker text-green */
.sec-kicker{ color: #357A1E; }
.sec-kicker::before{ color: #357A1E; }
.sec-kicker-nv{ color: var(--rust-l); }
.sec-kicker-nv::before{ color: var(--rust-l); }
.home-proof .sec-kicker{ color: var(--rust-l); }
.home-proof .sec-kicker::before{ color: var(--rust-l); }
.step-n{ color: #357A1E !important; }
.ledger-h-on{ color: #357A1E; }
.gno, .fno{ color: #357A1E; }
.feat-more{ color: #357A1E; }
.dl-box a{ color: #357A1E; }

/* Accent words: leaf-deep on light (flat styles), leaf on dark bands */
.hero .ac-l, .hero .ac-r,
.phero .ac-l, .phero .ac-r,
.service .ac-l, .service .ac-r,
.home-proof .ac-l, .home-proof .ac-r{ color: var(--rust-l); }

/* Interior close sections: leaf-wash card needs dark CTAs */
.close .btn-cream{ background: var(--moss); color: #fff; }
.close .btn-cream:hover{ background: #1B2D58; color: #fff; }
.close .btn-outline-cream{ border-color: var(--moss); color: var(--moss); }
.close .btn-outline-cream:hover{ background: #FFFFFF; color: var(--moss); border-color: var(--moss); }


/* ============================================================
   v22 (2026-09-01) — asiakaspalaute:
   1. Etusivun typografia-asteikko kaikille sivuille: sisasivujen
      jattikokoiset osio-otsikot (66-97px) etusivun .sec-title-
      asteikkoon; artikkelin paaotsikko etusivun h1-asteikkoon.
   2. .tier-tg max-width poistettu (AI Act -kortin leipateksti leveammaksi).
   3. .why-stats .ms-lbl skaalautuva fontti (laatikkotekstit).
   ============================================================ */
.library-title, .order-title, .quotes-title, .risks-title, .why-title,
.timeline-title, .reasons-title, .fit-title, .proof-title, .twodoor-title,
.next-title, .pclose-title{
  font-size: clamp(24px, 2.9vw, 35px);
  line-height: 1.18;
  letter-spacing: -.01em;
}
.ahead-title{
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.12;
  letter-spacing: -.015em;
}


/* ============================================================
   v23 (2026-09-04) — asiakaspalaute "Tekstien muokkausta (3)":
   1. VIHREAN SAVY: sivustolla oli viisi eri vihreaa
      (#9FDF8B, #62BB46, #3E8F2A, #357A1E, #2E7D32). Nyt kolmen
      tokenin ramppi: --rust-l (tummalla pohjalla), --rust (taytot
      ja pisteet, ei koskaan tekstia), --rust-d (teksti vaalealla).
      --rust-d yhtenaistetty #357A1E:ksi, joten WCAG-kierroksen
      kovakoodatut #357A1E-poikkeukset ovat nyt sama savy kuin token.
   2. Rengas tietosuojakouluttaja-tunnuksen ymparilta pois.
   3. Ledger: punainen piste (x) tilalle + sama fontti molemmissa
      palstoissa. (Ledgerin oma embed-CSS korvataan erikseen —
      nama saannot varmistavat tuloksen myos ilman embedia.)
   ============================================================ */

/* -- 1. Vihrean yhtenaistys: retired #3E8F2A -> --rust-d (#357A1E) -- */
.ac-l, .ac-r{ color: var(--rust-d); }
.hero .ac-l, .hero .ac-r,
.phero .ac-l, .phero .ac-r,
.service .ac-l, .service .ac-r,
.home-proof .ac-l, .home-proof .ac-r{ color: var(--rust-l); }

/* -- 2. Tietosuojakouluttaja-tunnus: rengas pois -- */
.seal{ border: none !important; }

/* -- 3. Ledger: punainen piste x:n tilalle, fontit samaksi -- */
.ledger .lg-before::before{
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  top: .42em !important;
  border-radius: 50% !important;
  background: #C0392B !important;
  color: transparent !important;
  font-size: 0 !important;
}
.ledger .lg-before{ padding-left: 22px; }
.ledger .lg-before strong,
.ledger .lg-after strong{
  font-size: clamp(14px, 1.15vw, 15.5px);
  line-height: 1.5;
}
.ledger .lg-before strong{ color: var(--muted); }
.ledger .lg-after strong{ color: var(--ink); }

/* -- 4. Navisec-tuotenakyma (.nvd): valilehtikromi brandin varein --
   Paneelien SISALTO (pillit, kaaviot, chipit) jatetaan tarkoituksella
   geneeriseen sovellusvarikarttaan: se esittaa Navisec-sovelluksen
   nakymaa, ei sivuston omaa pintaa. Vain valilehdet ovat sivuston
   kromia, joten ne brandataan. */
.nvd-tab-on{ background: var(--ink) !important; color: #fff !important; }
.nvd-tab-on:hover{ background: var(--ink-2) !important; color: #fff !important; }
.nvd-dot-on{ background: var(--rust) !important; }

/* ============================================================
   v24/v25 (2026-09-04) — asiakaspalaute, kierros 2:
   (v25 = v24 + .why-title/.risks-title lisatty listaan; ne jaivat
    ensimmaisesta korjauksesta pois ja jattivat #62BB46:n /ai-actille.)
   1. OTSAKKEIDEN VIHREA: .reasons-title/.fit-title/.timeline-title/
      .faq-title/.twodoor-head/.archive-head sisalla oleva <strong>
      maalattiin --rustilla (#62BB46). Se on TAYTTOvari, ei tekstivari:
      valkoisella kontrasti ~2.6:1 (AA-hylky) ja eri savy kuin
      .ac-l/.ac-r -korostukset (#357A1E). Tama oli asiakkaan
      "otsakkeissa vihrean savy vaihtelee" -havainnon paasyy.
      -> --rust-d (#357A1E, 5.3:1). Kaikki esiintymat todennettu
      vaalealla pohjalla (/pro, /ai-act), joten vaihto on turvallinen.
   2. .reasons-title max-width 238px puristi 35px otsikon ~6 riville
      522px palstassa (asiakas: "Alueen levitys jotta rivittyy
      paremmin"). -> max-width 100%.
   ============================================================ */

.why-title strong,
.risks-title strong,
.reasons-title strong,
.fit-title strong,
.timeline-title strong,
.faq-title strong,
.twodoor-head strong,
.archive-head strong,
.legal .prose h2 strong{ color: var(--rust-d); }

.reasons-title{ max-width: 100%; }

/* ============================================================
   v25 lisaykset (2026-09-04) — Webflow-kommentit:
   /pro: standards-kaistan ylareunan vaalea viiva pois; GDPR/NIS2-
   rivin "linkkimaiset" tekstit vihreiksi pisteluetteloksi kuten
   Miksi Navisec -sivun ledgerissa. Kenelle-sivujen herokuva
   isommaksi (kuvateksti poistettu, tilaa vapautui).
   ============================================================ */

/* /pro — vaalea viiva tummansinisten lohkojen valilta pois */
.standards{ border-top: none; }

/* /pro — vaatimusluettelo: vihrea piste + pienempi fontti,
   ei enaa linkin nakoinen erillinen sanarivi */
.standards-strip{ gap: clamp(18px, 2vw, 28px); flex-wrap: wrap; }
.std{
  position: relative;
  padding-left: 18px;
  font-size: clamp(13px, 1.05vw, 14.5px);
  color: var(--on-navy-2);
}
.std::before{
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rust);
}

/* Kenelle-sivut — herokuva isommaksi kuvatekstin poiston jalkeen */
.yr-portrait{ aspect-ratio: 1 / 1; }

/* ============================================================
   v26 (2026-09-09) — asiakaspalaute, kierros 3 (61 kommenttia 8.9.)
   1. Etusivun pilarit: pillit -> vihreä piste + pieni teksti,
      sama muoto kuin Miksi Navisec -sivun hero-metastripissä.
   2. /pro standards-strip: yksi vaakarivi, sama piste ja fonttikoko
      kuin Miksi Navisec -metastripissä (12.5px, 5px piste).
   3. /pro library-head: blurbi otsikon kanssa samaan ylälinjaan.
   4. /ai-act .home-why[data-tint]: sävytetty osio, laatikot valkoisiksi.
   5. Tuotenäkymä v2 (.nvd2): välilehdet kuvan yläpuolella,
      asiakkaan ruutukaappaukset, kuvateksti kuvan alla.
   6. Kenelle-sivujen quote-kortit: nimetty asiakas (b) + rooli.
   ============================================================ */

/* -- 0. /ota-yhteytta: lomakkeen nappi + yhteystiedot palstoihin -- */
#yhteydenotto .btn{ margin-top: 22px; }
.legal[data-contact]{ padding-top: clamp(24px, 4vw, 48px) !important; }
.legal[data-contact] .prose{ column-count: 3; column-gap: 48px; }
.legal[data-contact] .prose h2{ column-span: all; }
.legal[data-contact] .prose h3{ break-after: avoid; break-inside: avoid; margin-top: 0; }
.legal[data-contact] .prose p{ break-inside: avoid; }
@media (max-width: 991px){ .legal[data-contact] .prose{ column-count: 2; } }
@media (max-width: 767px){ .legal[data-contact] .prose{ column-count: 1; } }

/* -- 1. pilarit -- */
.pillars{ display: flex; flex-wrap: wrap; gap: 14px 26px; border-top: 0; margin-bottom: 0; }
.pillar{
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
}
.pillar::before{
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--rust-l); flex: 0 0 auto;
}
.pillar .pl-h{
  margin: 0; font-size: 12.5px; line-height: 1.4; letter-spacing: .02em;
  font-variation-settings: "wght" 500, "wdth" 90, "opsz" 24;
  color: var(--on-navy-2);
}

/* -- 2. /pro standards-strip -- */
.standards-row{ display: block; }
.standards-strip{ gap: 18px; align-items: center; }
.std{
  padding-left: 13px; font-size: 12.5px; letter-spacing: .02em;
  font-variation-settings: "wght" 500, "wdth" 90, "opsz" 24;
}
.std::before{ width: 5px; height: 5px; top: .5em; background: var(--rust-l); }

/* -- 3. /pro library-head -- */
.library-head{ align-items: start; }
.library-blurb{ max-width: none; font-size: 16.5px; line-height: 1.6; margin-top: 6px; }
.library-blurb .kicker-note{ display: inline-flex; margin-top: 18px; }

/* -- 4. /ai-act sävytetty osio -- */
.home-why[data-tint]{ background: var(--cream-2); }
.home-why[data-tint] .ms-cell{ background: var(--cream); }
.home-why[data-tint] .risk-cells{ border-top: 0; border-bottom: 0; gap: 14px; }
.home-why[data-tint] .risk-cell{
  background: var(--cream); border: 1px solid var(--line-c); border-radius: 6px;
  padding: 24px 22px 26px;
}
.home-why[data-tint] .risk-cell + .risk-cell{ padding-left: 22px; }

/* -- 5. tuotenäkymä v2 (perusarvot Webflow-tyyleissä; nämä brändäävät navy-taustan) -- */
.nvd2-tabs{
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.nvd2-tab{
  appearance: none; border: 1px solid var(--line-c); border-radius: 999px;
  background: var(--cream); color: var(--ink-2); cursor: pointer;
  padding: 9px 16px; font: inherit; font-size: 13.5px; line-height: 1.2;
  font-variation-settings: "wght" 540, "wdth" 88, "opsz" 24;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  text-decoration: none;
}
.nvd2-tab:hover{ border-color: var(--ink-3); color: var(--ink); }
.nvd2-tab.nvd2-tab-on{ background: var(--ink); border-color: var(--ink); color: #fff; }
.service .nvd2-tab{ background: var(--moss-l); border-color: var(--line-m); color: var(--on-navy-2); }
.service .nvd2-tab:hover{ color: #fff; border-color: rgba(215,221,250,.45); }
.service .nvd2-tab.nvd2-tab-on{ background: var(--rust); border-color: var(--rust); color: var(--moss-d); }
.nvd2-frame{
  position: relative; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line-c); background: #fff;
}
.service .nvd2-frame{ border-color: var(--line-m); }
.nvd2-img{ display: none; width: 100%; height: auto; }
.nvd2-img.nvd2-img-on{ display: block; }
.nvd2-caps{ margin-top: 14px; }
.nvd2-cap{ display: none; }
.nvd2-cap.nvd2-cap-on{ display: block; }
.nvd2-cap{
  margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
  max-width: 64ch;
}
.service .nvd2-cap{ color: var(--on-navy-2); }
.nvd2-cap b{ color: inherit; font-variation-settings: "wght" 600, "wdth" 88, "opsz" 24; }
.service .nvd2-cap b{ color: #fff; }
.nvd2-note{ margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.service .nvd2-note{ color: var(--on-navy-3); }


/* ============================================================
   v27 (2026-09-10) — asiakaspalaute, kierros 5
   ============================================================ */

/* -- 1. Ledger: punainen piste samalle riville tekstin kanssa --
   Juurisyy: v25/v26:n saannossa oli `font-size: 0 !important` ja
   `top: .42em !important` samassa lohkossa. `em` ratkeaa elementin
   OMAA font-sizea vasten, joka on 0 -> .42em = 0px, ja piste asettui
   lohkon ylareunaan tekstirivin ylapuolelle.
   Vihrea .lg-after::before (site head code) kayttaa kiinteaa top:7px ja
   osuu riville oikein, joten punainen saa saman arvon -- palstat ovat
   silloin varmasti samalla korkeudella. */
.ledger .lg-before::before{ top: 7px !important; }

/* -- 2. Kenelle-sivut: risks-otsikon laatikko leveammaksi --
   `.risks-grid` on 2-palstainen (200px / 1fr), mutta osiossa on vain
   yksi lapsi: otsikko. Se puristui 200px-palstaan ja oikea palsta jai
   tyhjaksi. Yksinaisen lapsen annetaan levittya koko riville; jos
   gridiin joskus tulee toinen palsta, saanto ei osu (:only-child). */
.risks-grid > *:only-child{ grid-column: 1 / -1; }