/* ==========================================================================
   Fobeventia Website 2.0 — global stylesheet (PHP build).
   Loaded on every page via includes/head.php. Responsive: mobile → desktop.
   ========================================================================== */

@font-face{
  font-family:'Aveline Chapter';
  src:url('../fonts/AvelineChapter-Regular.otf') format('opentype');
  font-weight:400 800;font-style:normal;font-display:swap;
}

/* Self-hosted Google Fonts (Prompt Q — removes the sitewide Google Fonts
   IP transfer). latin + latin-ext subsets only. Files in /assets/fonts. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/manrope-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/manrope-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/manrope-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/manrope-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/manrope-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/manrope-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/manrope-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/manrope-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/manrope-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/manrope-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/sora-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/sora-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/sora-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/sora-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/sora-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/sora-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/sora-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/sora-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/space-grotesk-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/space-grotesk-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/space-grotesk-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/space-grotesk-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/space-grotesk-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/space-grotesk-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}


:root{
  --ink:#0B2545;
  --body:#46617A;
  --muted:#6E8CA6;
  --faint:#8CA3B8;
  --green:#1FA153;
  --green-dark:#178A46;
  --teal:#0BA8BC;
  --mint:#3ED98B;
  --panel:#F3F7FA;
  --panel-2:#F7FAFC;
  --line:#E3EDF4;
  --line-2:#E2ECF3;
  --card:#FFFFFF;
  --shadow:0 24px 48px rgba(8,28,56,.12);
  --maxw:1600px;
  --pad:clamp(20px,4.5vw,84px);
  --head:'Aveline Chapter','Sora',sans-serif;
  --sans:'Manrope',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);background:#fff;color:var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:15px;line-height:1.6;
}
img{max-width:100%}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--green-dark)}
h1,h2,h3,h4{font-family:var(--head);color:var(--ink);letter-spacing:-.025em;margin:0}
::selection{background:var(--green);color:#fff}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--teal);text-transform:uppercase}
.btn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:none;
  font-family:var(--sans);font-weight:800;font-size:14px;padding:13px 22px;border-radius:10px;
  transition:all .25s;text-decoration:none;
}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 8px 20px rgba(31,161,83,.28)}
.btn-primary:hover{background:var(--green-dark);color:#fff;transform:translateY(-2px);box-shadow:0 14px 28px rgba(31,161,83,.38)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:#A9DCC2;color:var(--green-dark);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--green);color:#fff;transform:translateY(-2px)}

/* Submit-button loader. site.js adds .is-loading + aria-busy to a form's submit
   button while it is on its way. The label is hidden and a themed spinner takes
   its place; the button keeps its exact size so nothing on the page jumps. The
   generic button.is-loading selector also covers the footer newsletter button,
   which is inline-styled rather than a .btn. */
button.is-loading,.btn.is-loading{position:relative;pointer-events:none;cursor:progress;color:transparent!important;transform:none!important}
button.is-loading>*,.btn.is-loading>*{visibility:hidden}
button.is-loading::before,.btn.is-loading::before{
  content:"";position:absolute;top:50%;left:50%;width:17px;height:17px;margin:-8.5px 0 0 -8.5px;box-sizing:border-box;
  border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:fv-btn-spin .6s linear infinite;visibility:visible;
}
/* Light-background buttons spin in brand green so the ring stays visible. */
.btn-ghost.is-loading::before{border-color:rgba(31,161,83,.28);border-top-color:var(--green)}
@keyframes fv-btn-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){button.is-loading::before,.btn.is-loading::before{animation-duration:1.5s}}

/* ==========================================================================
   Site chrome — utility bar + main nav + mega menu + mobile drawers.
   Injected by fobeventia-pages.js so it is identical on every page and
   mirrors the home page (index.php).
   ========================================================================== */
.sn-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#1FA153,#0BA8BC);z-index:300;transition:width .1s linear}
.sn-util{background:linear-gradient(90deg,#08243A 0%,#0B2E4A 100%);color:#9FBACB;font-size:13px;box-shadow:inset 0 -1px 0 rgba(95,214,223,.18)}
.sn-util-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);height:38px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.sn-soc{display:flex;align-items:center;gap:8px}
.sn-soc a{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sn-utillinks{display:flex;align-items:center;gap:20px}
.sn-utillinks a{color:#9FBACB;text-decoration:none}
.sn-utillinks a:hover{color:var(--mint)}

.sn-nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #E3EDF4;padding:13px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:20px}
.sn-brand{display:flex;align-items:center;gap:16px;min-width:0}
.sn-logo{display:flex;align-items:center;gap:12px;background:none;border:none;cursor:pointer;padding:0;text-decoration:none}
.sn-logo img{height:30px;width:auto;display:block}
.sn-logo2{height:30px;width:auto;display:block;flex-shrink:0}
.sn-logo .fallback{display:flex;align-items:center;gap:10px}
.sn-logo .fallback .m{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#1FA153,#0BA8BC);display:flex;align-items:center;justify-content:center}
.sn-logo .fallback .n{font-family:var(--head);font-weight:800;font-size:21px;color:#0B2545;letter-spacing:-.02em;line-height:1;display:block}
.sn-logo .fallback .s{font-size:9.5px;font-weight:700;letter-spacing:.22em;color:#0BA8BC;margin-top:3px;display:block}
.sn-links{display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:flex-end}
.sn-links a,.sn-links button{font-family:'Manrope',sans-serif;font-weight:700;font-size:14.5px;color:#33475B;background:none;border:none;cursor:pointer;padding:4px 0;text-decoration:none;transition:color .2s}
.sn-links > a:hover,.sn-mega-btn:hover,.sn-links > a.sn-active{color:#1FA153}
.sn-mega-btn{display:flex;align-items:center;gap:5px}
.sn-search-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;color:#33475B;transition:all .25s}
.sn-search-btn:hover{background:#EAF6EF;color:#1FA153}
.sn-links a.sn-cta{background:#1FA153;color:#fff;font-weight:800;font-size:14px;padding:12px 22px;border-radius:10px;box-shadow:0 8px 20px rgba(31,161,83,.28);transition:all .25s;white-space:nowrap}
.sn-links a.sn-cta:hover{background:#178A46;color:#fff;transform:translateY(-2px);box-shadow:0 14px 28px rgba(31,161,83,.38)}
.sn-ham{display:none;background:none;border:none;cursor:pointer;padding:8px;width:40px;height:40px;align-items:center;justify-content:center;flex-shrink:0}

/* Mega panel — anchored to the sticky nav so it tracks on scroll */
.sn-mega{position:static}
.sn-mega-panel{position:absolute;left:0;right:0;top:calc(100% + 12px);margin:0 auto;width:min(940px,calc(100vw - 32px));opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:130}
.sn-mega.open .sn-mega-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.sn-mega-inner{background:#fff;border:1px solid #E3EDF4;border-radius:18px;box-shadow:0 30px 64px rgba(8,28,56,.18);padding:26px 28px;max-height:calc(100vh - 140px);overflow:auto}
.sn-mega-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 26px}
.sn-mega-col.slim{grid-column:span 1}
.sn-mega-col .head{display:flex;align-items:center;gap:9px;padding:0 0 12px;margin-bottom:12px;border-bottom:2px solid #1FA153;text-decoration:none}
.sn-mega-col.teal .head{border-bottom-color:#0BA8BC}
.sn-mega-col .head .ic{width:30px;height:30px;border-radius:9px;background:#E7F6EE;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sn-mega-col.teal .head .ic{background:#E5F6F8}
.sn-mega-col .head span{font-family:var(--head);font-weight:700;font-size:14px;color:#0B2545;letter-spacing:-.01em}
.sn-mega-col .items{display:flex;flex-direction:column;gap:9px}
.sn-mega-col .items a{font-family:'Manrope',sans-serif;font-weight:600;font-size:13px;color:#5C7690;text-decoration:none;transition:color .15s}
.sn-mega-col .items a:hover{color:#1FA153}
.sn-mega-foot{margin-top:20px;padding-top:16px;border-top:1px solid #EEF3F7;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.sn-mega-foot span{font-size:12.5px;font-weight:600;color:#8CA3B8}
.sn-mega-foot a{color:#0BA8BC;font-weight:800;font-size:13.5px;text-decoration:none}

/* Mobile drawers */
.sn-scrim{position:fixed;inset:0;z-index:198;background:rgba(8,28,56,.45);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.sn-scrim.open{opacity:1;visibility:visible}
.sn-drawer{position:fixed;top:0;right:0;bottom:0;z-index:199;width:min(84vw,340px);background:#fff;box-shadow:-18px 0 44px rgba(8,28,56,.22);transform:translateX(100%);transition:transform .3s cubic-bezier(.22,.61,.36,1);overflow-y:auto}
.sn-drawer.open{transform:translateX(0)}
.sn-drawer-hd{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid #E3EDF4}
.sn-drawer-hd span{font-family:var(--head);font-weight:800;font-size:18px;color:#0B2545}
.sn-drawer-hd button{background:none;border:none;cursor:pointer;padding:8px;display:flex;width:36px;height:36px;align-items:center;justify-content:center}
.sn-drawer-body{display:flex;flex-direction:column;padding:10px 12px 24px}
.sn-drawer-body a,.sn-drawer-body button{font-family:'Manrope',sans-serif;font-weight:700;font-size:16px;color:#33475B;padding:15px 12px;border-bottom:1px solid #EEF3F7;text-align:left;text-decoration:none;background:none;border-left:none;border-right:none;border-top:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px}
.sn-drawer-body a.cta,.sn-drawer-body button.cta{background:#1FA153;color:#fff;font-weight:800;font-size:15px;padding:15px 18px;border-radius:10px;margin:18px 12px 0;border:none;justify-content:center}
.sn-d2 .grp{padding:14px 12px 4px;font-family:var(--head);font-weight:700;font-size:14px;color:#0B2545}
.sn-d2 .sn-drawer-body a{font-weight:600;font-size:14.5px;color:#5C7690;padding:10px 12px;border-bottom:none;justify-content:flex-start}
.sn-d2 .sn-drawer-body a.last{border-bottom:1px solid #EEF3F7}

@media (max-width:900px){
  .sn-links{display:none}
  .sn-ham{display:flex}
  .sn-mega-panel{display:none}
}
@media (max-width:640px){
  /* Secondary links move into the drawer on phones, as on the home page —
     otherwise they overflow the utility bar. */
  .sn-utillinks{display:none}
  .sn-util-in{justify-content:center}
}
@media (max-width:560px){
  .sn-logo img{height:26px}
  .sn-logo2{height:26px}
  .sn-brand{gap:12px}
}
@media (max-width:400px){
  .sn-logo2{display:none}
}


/* ---------- Breadcrumb ---------- */
.crumb{background:var(--panel);border-bottom:1px solid var(--line)}
.crumb-in{max-width:var(--maxw);margin:0 auto;padding:12px var(--pad);font-size:12.5px;font-weight:600;color:var(--faint)}
.crumb-in a{color:var(--muted)}
.crumb-in a:hover{color:var(--green)}
.crumb-in span{color:var(--ink)}

/* ---------- Section scaffolding ---------- */
/* Every section is full-bleed; its inner content is centred to --maxw with
   a symmetric --pad gutter (same system as the home page), so left/right
   spacing is identical across the hero and every section. */
section{padding:clamp(52px,7vw,88px) 0;scroll-margin-top:96px}
section.tight{padding:clamp(40px,5vw,64px) 0}
section.panel{background:var(--panel)}
section.ink{background:linear-gradient(160deg,#0B2545 0%,#081C38 60%,#0A2342 100%);color:#A9C2DA}

/* In-content sections have no .wrap. Plain sections are the centred --maxw
   gutter box themselves; panel/ink sections are full-bleed but centre and
   pad their inner content the same way — so content edges line up with the
   hero on every section. */
.page .content > section:not(.panel):not(.ink){
  padding-left:var(--pad);
  padding-right:var(--pad);
}
.page .content > section:not(.panel):not(.ink) > *{
  max-width:var(--maxw);
  margin-left:auto;
  margin-right:auto;
}
.page .content > section.panel > *,
.page .content > section.ink > *{
  max-width:var(--maxw);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
  box-sizing:border-box;
}
.sec-head{margin:0 0 34px}
.sec-head.center{text-align:center}
.sec-head.center p{margin-left:auto;margin-right:auto}
.sec-head h2{font-size:clamp(26px,3vw,40px);line-height:1.14;margin:12px 0 10px;max-width:720px}
.sec-head.center h2{margin-left:auto;margin-right:auto}
.sec-head p{font-size:16px;line-height:1.65;margin:0;color:var(--body);max-width:640px}
.accent{color:var(--green)}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(180deg,#F3F7FA 0%,#FFFFFF 100%);padding:clamp(44px,6vw,76px) 0}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,64px);align-items:center}
.hero h1{font-size:clamp(30px,4vw,50px);line-height:1.08;margin:14px 0 16px}
.hero-lead{font-size:17px;line-height:1.6;color:var(--body);margin:0 0 22px;max-width:560px}
.hero-tech{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.chip{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--ink);background:#EAF2F7;border:1px solid var(--line-2);border-radius:999px;padding:6px 13px}
.chip-check{display:inline-flex;align-items:center;gap:7px}
.chip-check::before{content:"✓";color:var(--green);font-weight:900}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-visual{border-radius:20px;overflow:hidden;border:1px solid var(--line-2);background:var(--panel);min-height:280px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.hero-visual img{width:100%;height:100%;object-fit:cover;display:block}
.hero-visual .ph{color:var(--faint);font-weight:700;font-size:13px;letter-spacing:.08em}

/* ---------- At-a-glance ---------- */
.glance{background:#fff;border:1px solid var(--line-2);border-radius:20px;padding:clamp(22px,3vw,34px);box-shadow:var(--shadow)}
.glance-title{font-size:11.5px;font-weight:800;letter-spacing:.2em;color:var(--faint);text-transform:uppercase;margin-bottom:22px}
.glance-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px;margin-bottom:24px}
.glance-stats .n{font-family:var(--head);font-weight:800;font-size:clamp(30px,3.4vw,44px);color:var(--ink);letter-spacing:-.03em;line-height:1}
.glance-stats .l{font-size:12.5px;font-weight:800;letter-spacing:.08em;color:var(--muted);margin-top:6px;text-transform:uppercase}
.glance-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;border-top:1px solid var(--line);padding-top:22px}
.glance-cols h4{font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--teal);text-transform:uppercase;margin:0 0 10px}
.glance-cols ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:600;color:var(--body)}

/* ---------- Card grids ---------- */
.grid{display:grid;gap:18px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){
  .grid.c4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .grid.c3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .grid.c2{grid-template-columns:1fr}
}
.card{
  display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--line-2);
  border-radius:16px;padding:24px;transition:all .28s;color:inherit;height:100%;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#A9DCC2}
.card .k{font-size:10.5px;font-weight:800;letter-spacing:.12em;color:var(--teal);text-transform:uppercase}
.card h3{font-size:18px;line-height:1.3;letter-spacing:-.01em}
.card p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.card .go{margin-top:auto;padding-top:10px;font-size:13.5px;font-weight:800;color:var(--green)}
.card.link:hover .go{color:var(--green-dark)}

/* tile (analyte / matrix) */
.tile{
  display:flex;flex-direction:column;justify-content:space-between;gap:12px;min-height:118px;
  background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:18px 20px;transition:all .25s;color:inherit;
}
.tile:hover{border-color:#A9DCC2;box-shadow:0 14px 30px rgba(8,28,56,.1);transform:translateY(-3px)}
.tile b{font-family:var(--head);font-weight:700;font-size:15.5px;color:var(--ink);letter-spacing:-.01em}
.tile small{font-size:12.5px;color:var(--muted);font-weight:600}
.tile .go{font-size:12.5px;font-weight:800;color:var(--green)}

/* logo tile */
.logo-tile{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:20px;min-height:92px;transition:all .25s}
.logo-tile:hover{border-color:#A9DCC2;box-shadow:0 14px 30px rgba(8,28,56,.1);transform:translateY(-3px)}
.logo-tile img{max-height:44px;width:auto;object-fit:contain}

/* product card */
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-2);border-radius:16px;overflow:hidden;transition:all .28s;color:inherit;height:100%}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#A9DCC2}
.pcard .img{aspect-ratio:4/3;background:var(--panel-2);display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:12px;font-weight:700;letter-spacing:.06em;border-bottom:1px solid var(--line)}
.pcard .img img{width:100%;height:100%;object-fit:contain;padding:14px}
.pcard .body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.pcard .brand{font-size:10.5px;font-weight:800;letter-spacing:.12em;color:var(--faint);text-transform:uppercase}
.pcard h3{font-size:16.5px;line-height:1.3}
.pcard .meta{font-size:12.5px;font-weight:700;color:var(--muted)}
.pcard .go{margin-top:auto;font-size:13.5px;font-weight:800;color:var(--green)}

/* ---------- Filters bar ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:14px 16px}
/* Long-form article body (product details / knowledge articles). Panel-authored
   or imported HTML is rendered verbatim, then dressed as an editorial spec sheet:
   a title with an accent rule, section headings with a left bar, bold-only lines
   promoted to small-caps labels, short label/value pairs grouped into a feature
   grid, short lists flowing into columns, check-style bullets, and tables framed
   as a scrollable spec table. The .ab-* / .cols / .tbl-* hooks are added by the
   enhancer in site.js; without it the content still reads cleanly. Responsive:
   media never exceed the column, wide tables scroll inside their own frame. */
.article-body{font-size:16.5px;line-height:1.75;color:var(--body);max-width:100%}
.article-body > *:first-child{margin-top:0}
.article-body > *:last-child{margin-bottom:0}
/* No reading measure on the article body: the Overview on a solution or
   product page sits in a full-width section, and a 78ch cap left the right
   half of it empty. The blog article is in an 820px column of its own, so it
   reads the same as before. */
.article-body p{margin:0 0 1.1em}

/* Sheet title (first heading or bold-only line) */
.article-body .ab-title,.article-body > :is(h1,h2):first-child{font-family:var(--head);font-size:clamp(24px,3vw,32px);font-weight:700;line-height:1.18;letter-spacing:-.022em;color:var(--ink);text-transform:none;margin:0 0 1em;padding:0 0 .55em;border-left:0;position:relative;max-width:none}
.article-body .ab-title::after,.article-body > :is(h1,h2):first-child::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--green),var(--teal))}
.article-body .ab-title strong{font-weight:inherit}
.article-body .ab-title + p{font-size:18px;line-height:1.7;color:var(--ink-2)}

/* Section headings */
.article-body h2{font-family:var(--head);color:var(--ink);font-size:clamp(21px,2.6vw,27px);line-height:1.22;letter-spacing:-.02em;margin:2.1em 0 .65em;padding-left:16px;border-left:4px solid var(--green)}
.article-body h3{font-family:var(--head);color:var(--ink);font-size:clamp(18px,2.2vw,21px);line-height:1.25;letter-spacing:-.015em;margin:1.7em 0 .5em}
.article-body :is(h2,h3,h4) strong{font-weight:inherit}

/* Labels: an <h4>, or a bold-only line; the block after it is its value */
.article-body h4,.article-body p.ab-label{font-family:var(--grot);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:1.7em 0 .4em;max-width:none;line-height:1.4}
.article-body p.ab-label strong{font-weight:inherit}
.article-body :is(h4,p.ab-label) + :is(p,ul,ol){margin-top:0}

/* Feature / benefit pairs (consecutive label + short value) — an editorial,
   hairline-divided two-column list with a small mono index, rather than a
   grid of identical boxed cards. Titles read in proper case; a single-line
   value is plain text (the enhancer unwraps one-item lists). */
.article-body .ab-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 56px;margin:1.4em 0 2.3em;border-top:1px solid var(--line-2);counter-reset:abkv}
.article-body .ab-kv-item{position:relative;padding:24px 0 24px 58px;border-bottom:1px solid var(--line-2)}
.article-body .ab-kv-item::before{content:counter(abkv,decimal-leading-zero);counter-increment:abkv;position:absolute;left:0;top:26px;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--green-dark);background:var(--tint-green);box-shadow:inset 0 0 0 1px rgba(16,156,86,.14)}
.article-body .ab-kv-item p.ab-label{font-family:var(--grot);font-size:16.5px;font-weight:700;letter-spacing:-.012em;text-transform:none;color:var(--ink);margin:0 0 7px;line-height:1.3}
.article-body .ab-kv-item p{margin:0;font-size:15.25px;line-height:1.68;color:var(--body);font-weight:400;max-width:none}
.article-body .ab-kv-item ul{margin:4px 0 0;max-width:none}
.article-body .ab-kv-item li{font-size:15.25px;line-height:1.6}
@media (max-width:640px){.article-body .ab-kv-item{padding-left:50px}.article-body .ab-kv-item::before{width:32px;height:32px;top:24px;font-size:11.5px;border-radius:9px}}

/* Links */
.article-body a{color:var(--green-dark);font-weight:700;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px;text-decoration-color:#A9DCC2}
.article-body a:hover{color:var(--green);text-decoration-color:var(--green)}

/* Lists: check bullets / numbered discs; short lists flow into columns */
.article-body ul,.article-body ol{margin:0 0 1.35em;padding:0;list-style:none}
.article-body ol{counter-reset:abol}
.article-body li{position:relative;padding-left:30px;margin:.45em 0}
.article-body ul > li::before{content:"\2713";position:absolute;left:0;top:.22em;width:19px;height:19px;border-radius:50%;background:var(--tint-green);color:var(--green);font-size:11px;font-weight:900;line-height:19px;text-align:center}
.article-body ol > li{counter-increment:abol}
.article-body ol > li::before{content:counter(abol);position:absolute;left:0;top:.18em;width:21px;height:21px;border-radius:50%;background:var(--tint-teal);color:var(--teal);font:700 11px/21px var(--grot);text-align:center}
.article-body li > ul,.article-body li > ol{margin:.4em 0 .2em}
.article-body ul.cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px 24px;max-width:none}
.article-body ul.cols > li{margin:.28em 0}

/* Callouts, figures, rules, code */
.article-body blockquote{margin:1.6em 0;padding:16px 22px;border-left:4px solid var(--green);background:#F3FAF5;border-radius:0 14px 14px 0;color:var(--ink)}
.article-body blockquote p:last-child{margin:0}
.article-body img,.article-body video{max-width:100%;height:auto;border-radius:16px;margin:1.5em auto;display:block;border:1px solid var(--line-2);box-shadow:0 24px 54px -30px rgba(8,28,56,.32)}
.article-body figure{margin:1.6em 0}
.article-body figure img{margin:0 auto}
.article-body figcaption{font-size:13.5px;color:var(--muted);text-align:center;margin-top:10px}
.article-body hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.article-body code{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.9em;background:#F1F6F9;border:1px solid var(--line-2);border-radius:6px;padding:.12em .4em}
.article-body pre{background:#0B2545;color:#E6EEF6;border-radius:12px;padding:16px 18px;overflow-x:auto;margin:1.4em 0;font-size:14px;line-height:1.6}
.article-body pre code{background:none;border:0;padding:0;color:inherit}

/* Tables as spec sheets: framed, scrollable, dark header, label column for 2-col */
.article-body table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-collapse:collapse;margin:1.4em 0;font-size:15px}
.article-body .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.3em 0 1.9em;border:1px solid var(--line-2);border-radius:16px;background:#fff;box-shadow:0 20px 44px -32px rgba(8,28,56,.3)}
.article-body figure.table{margin:1.3em 0 1.9em}
.article-body figure.table .tbl-scroll{margin:0}
.article-body .tbl-scroll table{display:table;width:100%;min-width:440px;overflow:visible;margin:0;border-collapse:separate;border-spacing:0}
.article-body th,.article-body td{border:0;border-bottom:1px solid var(--line);padding:13px 16px;text-align:left;vertical-align:top}
.article-body thead th{background:var(--ink);color:#fff;font-family:var(--grot);font-weight:600;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.article-body thead th strong{font-weight:inherit}
.article-body tbody tr:last-child :is(td,th){border-bottom:0}
.article-body tbody tr:nth-child(even) :is(td,th){background:#FAFCFD}
.article-body tbody tr:hover :is(td,th){background:#F3FAF5}
.article-body .tbl-kv tbody :is(th,td):first-child{font-weight:700;color:var(--ink);background:#F7FAFC;width:36%}
.article-body .tbl-kv tbody td:first-child strong{font-weight:inherit}
.article-body td strong{color:var(--ink)}

/* Product-page details panel */
.pg-v2 #details .article-body,.pg-v2 #overview .article-body{background:#fff;border:1px solid var(--line-2);border-radius:22px;padding:clamp(22px,4vw,48px);box-shadow:0 34px 76px -44px rgba(8,28,56,.32)}

@media (max-width:600px){
  .article-body{font-size:16px;line-height:1.7}
  .article-body h2{padding-left:12px}
  .article-body .ab-kv,.article-body ul.cols{grid-template-columns:1fr}
  .article-body .tbl-kv tbody :is(th,td):first-child{width:42%}
  .article-body th,.article-body td{padding:11px 12px}
  .pg-v2 #details .article-body,.pg-v2 #overview .article-body{border-radius:16px}
}

/* Clickable topic chips inside a filter bar (knowledge listing). */
.filters .chip{cursor:pointer;user-select:none;transition:background .2s,color .2s,border-color .2s,transform .2s}
.filters .chip:hover{border-color:#A9DCC2;color:var(--green-dark);transform:translateY(-1px)}
.filters .chip.on{background:var(--green);border-color:var(--green);color:#fff}
.filters input[type=search]{flex:1;min-width:200px;padding:11px 13px;border:1px solid var(--line-2);border-radius:9px;font:inherit;font-weight:600;color:var(--ink);outline:none}
.filters input[type=search]:focus{border-color:var(--green)}
.filters select{padding:10px 12px;border:1px solid var(--line-2);border-radius:9px;font:inherit;font-weight:700;font-size:13px;color:var(--ink);background:#fff;cursor:pointer}

/* ---------- Comparison table ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line-2);border-radius:14px;background:#fff}
table.cmp{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
table.cmp th,table.cmp td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}
table.cmp thead th{font-family:var(--head);font-weight:700;color:var(--ink);background:var(--panel)}
table.cmp tbody th{font-weight:700;color:var(--ink)}
table.cmp tr:last-child td,table.cmp tr:last-child th{border-bottom:none}
.stars{color:var(--green);letter-spacing:2px}

/* ---------- Steps / workflow ---------- */
.steps{display:flex;flex-wrap:wrap;gap:12px;counter-reset:step}
.step{flex:1;min-width:150px;background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:20px}
.step .no{font-family:var(--head);font-weight:800;font-size:13px;color:var(--teal);letter-spacing:.1em}
.step b{display:block;font-family:var(--head);font-weight:700;color:var(--ink);font-size:15px;margin:8px 0 4px}
.step small{font-size:13px;color:var(--muted);line-height:1.5}

/* ---------- Spec table ---------- */
.spec{width:100%;border-collapse:collapse;font-size:14px}
.spec tr{border-bottom:1px solid var(--line)}
.spec th{text-align:left;padding:12px 14px;font-weight:700;color:var(--muted);width:42%;vertical-align:top}
.spec td{padding:12px 14px;color:var(--ink);font-weight:600}

/* ---------- Perf cards ---------- */
.perf{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.perf div{background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:20px;text-align:center}
.perf .lbl{font-size:10.5px;font-weight:800;letter-spacing:.12em;color:var(--faint);text-transform:uppercase}
.perf .val{font-family:var(--head);font-weight:800;font-size:22px;color:var(--ink);margin-top:8px}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 40px 18px 4px;position:relative;font-weight:700;font-size:16px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:400;color:var(--teal)}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 4px 20px;font-size:14.5px;line-height:1.7;color:var(--body)}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;background:linear-gradient(160deg,#0B2545 0%,#081C38 60%,#0A2342 100%);border-radius:22px;padding:clamp(36px,5vw,60px);text-align:center}
.cta-band h2{color:#fff;font-size:clamp(24px,3vw,38px);line-height:1.16;margin:0 0 14px}
.cta-band p{color:#A9C2DA;font-size:16px;line-height:1.6;max-width:620px;margin:0 auto 26px}
.cta-band .hero-cta{justify-content:center}
.cta-band .btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}

/* ---------- Prose / lede / split / definition ---------- */
.lede{font-size:clamp(17px,1.9vw,20px);line-height:1.6;color:var(--ink);font-weight:500;max-width:760px}
.prose{max-width:760px;display:flex;flex-direction:column;gap:16px;font-size:15px;line-height:1.75}
.prose h3{font-size:19px;margin-top:8px}
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);align-items:start}
.split.even{grid-template-columns:1fr 1fr}
.aside-card{background:#fff;border:1px solid var(--line-2);border-radius:16px;padding:24px;box-shadow:var(--shadow)}
.aside-card h4{font-size:13px;letter-spacing:.1em;color:var(--teal);text-transform:uppercase;margin-bottom:12px}
.aside-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;font-size:14px;font-weight:600;color:var(--body)}
.qa{background:#fff;border:1px solid var(--line-2);border-left:4px solid var(--green);border-radius:12px;padding:22px 24px;max-width:820px}
.qa .q{font-family:var(--head);font-weight:700;color:var(--ink);font-size:17px;margin-bottom:8px}
.qa .a{font-size:15px;line-height:1.7;color:var(--body)}

/* ---------- Contact info + form ---------- */
.contact-list{display:flex;flex-direction:column;gap:18px}
.contact-list .row{display:flex;gap:14px;align-items:flex-start}
.contact-list .ic{width:38px;height:38px;border-radius:10px;background:#EAF6EF;color:var(--green);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-list .row > span:last-child{display:flex;flex-direction:column}
.contact-list .lbl{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--faint);text-transform:uppercase}
.contact-list .val{display:block;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.55;margin-top:3px}
.contact-list .val a{color:var(--ink)}
.contact-list .val a:hover{color:var(--green)}
.formcard{background:#fff;border:1px solid var(--line-2);border-radius:18px;padding:clamp(22px,3vw,34px);box-shadow:var(--shadow)}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--muted)}
.field input,.field select,.field textarea{
  font:inherit;font-size:14px;font-weight:600;color:var(--ink);
  padding:11px 13px;border:1px solid var(--line-2);border-radius:9px;background:#fff;outline:none;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(31,161,83,.12)}
.field textarea{resize:vertical;min-height:96px}
.form-note{font-size:12px;color:var(--muted);margin-top:12px}

/* ---------- Page body / in-page jump nav ---------- */
.page{display:block}
.page .content{display:block}
.page .content > section:first-child{padding-top:clamp(30px,4vw,48px)}
.page .content > section[style*="border-radius"]{border-radius:0 !important}


/* ---------- Sticky product CTA ---------- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:120;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(8,28,56,.08);transform:translateY(110%);transition:transform .3s}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta .in{max-width:var(--maxw);margin:0 auto;padding:12px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:14px}
.sticky-cta .nm{font-family:var(--head);font-weight:700;color:var(--ink);font-size:15px}
.sticky-cta .acts{display:flex;gap:10px}

/* ---------- Footer (matches the home page) ---------- */
.foot{background:#0B2545;color:#A9C0D6;padding:clamp(56px,7vw,84px) var(--pad) 0}
.foot-in{max-width:var(--maxw);margin:0 auto}
.foot-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px 60px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.09)}
.foot-brand span.b{background:#fff;border-radius:10px;padding:6px 10px;display:inline-flex;align-items:center}
.foot-brand span.b img{height:30px;width:auto;display:block}
.foot p{font-size:14.5px;line-height:1.7;color:#A9C0D6;margin:14px 0 18px;max-width:480px}
.foot-soc{display:flex;gap:14px;font-size:13px;font-weight:700}
.foot-soc a{color:#7FA6C9}
.foot-soc a:hover{color:var(--mint)}
.foot-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px 36px;padding:42px 0}
.foot-links .h{font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:.16em;color:#fff;margin-bottom:16px}
.foot-links .col{display:flex;flex-direction:column;gap:10px;font-size:14px;font-weight:600}
.foot-links a{color:#A9C0D6}
.foot-links a:hover{color:var(--mint)}

/* Footer newsletter */
.foot-news{display:flex;gap:10px;max-width:490px;flex-wrap:wrap}
.foot-news input{flex:1;min-width:180px;padding:14px 15px;border-radius:11px;border:1.5px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);font:inherit;font-weight:600;font-size:14px;color:#fff;outline:none}
.foot-news input::placeholder{color:#7FA6C9}
.foot-news input:focus{border-color:#3ED98B;background:rgba(255,255,255,.09)}
.foot-news button{flex:0 0 auto;background:#1FA153;border:none;cursor:pointer;color:#fff;font:inherit;font-weight:800;font-size:14px;padding:14px 22px;border-radius:11px;transition:all .25s}
.foot-news button:hover{background:#178A46;transform:translateY(-2px);box-shadow:0 12px 24px rgba(31,161,83,.35)}
.foot-news-done{width:100%;background:rgba(62,217,139,.12);border:1px solid rgba(62,217,139,.4);border-radius:11px;padding:13px 16px;font-size:14px;font-weight:700;color:#3ED98B}

/* Floating WhatsApp */
.wa-float{position:fixed;bottom:24px;right:24px;z-index:150;width:56px;height:56px;border-radius:50%;background:#1FA153;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(31,161,83,.4);transition:transform .25s}
.wa-float:hover{transform:scale(1.1)}
@media (max-width:560px){.wa-float{width:50px;height:50px;bottom:16px;right:16px}}

/* index.php footer — animated wave chrome + link hovers */
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(31,161,83,.5)}70%{box-shadow:0 0 0 20px rgba(31,161,83,0)}100%{box-shadow:0 0 0 0 rgba(31,161,83,0)}}
@keyframes waveSway{from{transform:translateY(-10px) rotate(-.5deg)}to{transform:translateY(10px) rotate(.5deg)}}
@keyframes lineComet{from{stroke-dashoffset:0}to{stroke-dashoffset:-1840}}
.fw-link{transition:color .2s}
.fw-link:hover{color:#3ED98B}
[data-demo-done][hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){
  footer svg g[style*="animation"],footer path[style*="animation"],.wa-float{animation:none!important}
}
.foot-bot{border-top:1px solid rgba(255,255,255,.09);padding:22px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;font-weight:600;color:#6F8BA6}
.foot-bot .mid{flex:1 1 auto;text-align:center;font-weight:500}
.foot-bot .mid a{font-weight:800;color:#A9C0D6}
.foot-bot .mid a:hover{color:var(--mint)}
.foot-bot .legal{display:flex;gap:18px}
.foot-bot .legal a{color:#6F8BA6}
.foot-bot .legal a:hover{color:var(--mint)}

/* ---------- Mobile drawer ---------- */
.scrim{position:fixed;inset:0;z-index:198;background:rgba(8,28,56,.45);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.scrim.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:199;width:min(84vw,340px);background:#fff;box-shadow:-18px 0 44px rgba(8,28,56,.22);transform:translateX(100%);transition:transform .3s cubic-bezier(.22,.61,.36,1);overflow-y:auto;padding:18px}
.drawer.open{transform:translateX(0)}
.drawer a{display:block;padding:14px 10px;border-bottom:1px solid #EEF3F7;font-weight:700;font-size:16px;color:#33475B}
.drawer .close{background:none;border:none;cursor:pointer;font-size:22px;padding:8px;float:right;color:var(--ink)}

/* ---------- Responsive ---------- */

/* Tablet / small laptop */
@media (max-width:1040px){
  .page .content > section:first-child{padding-top:clamp(28px,5vw,44px)}
}

/* Landscape tablet / large phone */
@media (max-width:860px){
  :root{--pad:22px}
  .nav-links{display:none}
  .nav-burger{display:flex}
  .util-links{display:none}
  .util-in{justify-content:center}
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{min-height:200px}
  .split,.split.even{grid-template-columns:1fr}
  .sticky-cta .in{flex-direction:column;align-items:stretch;gap:10px}
  .sticky-cta .acts{display:grid;grid-template-columns:1fr 1fr}
  .sticky-cta .nm{text-align:center}
}

/* Phone */
@media (max-width:600px){
  body{font-size:14.5px}
  section{padding:clamp(40px,10vw,60px) 0}
  .sec-head h2{font-size:clamp(23px,7vw,32px)}
  .hero h1{font-size:clamp(26px,8vw,38px)}
  .hero-cta{width:100%}
  .hero-cta .btn{flex:1;justify-content:center}
  .glance{padding:20px}
  .glance-stats{grid-template-columns:repeat(2,1fr);gap:16px}
  .grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}
  .steps,.flow{flex-direction:column}
  .step,.flow .stage{min-width:0;width:100%}
  .perf{grid-template-columns:repeat(2,1fr)}
  .filters{flex-direction:column;align-items:stretch}
  .filters select,.filters input[type=search]{width:100%}
  .formgrid{grid-template-columns:1fr}
  .cta-band{padding:32px 20px}
  .cta-band .hero-cta{flex-direction:column}
  .cta-band .hero-cta .btn{width:100%;justify-content:center}
  .foot-bot{flex-direction:column;text-align:center}
  .foot-bot .mid{order:3}
  .foot-bot .legal{justify-content:center}
}

/* Very small phone */
@media (max-width:380px){
  .glance-stats{grid-template-columns:1fr}
  .perf{grid-template-columns:1fr}
  .hero-tech .chip{font-size:11px;padding:5px 10px}
}

/* ==========================================================================
   Home page
   ========================================================================== */
.home-hero{position:relative;background:linear-gradient(160deg,#0B2545 0%,#0A2140 55%,#0C2B52 100%);color:#fff;overflow:hidden}
.home-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(180deg,transparent,#F7FBFD);pointer-events:none}
.home-hero .wrap{position:relative;z-index:2;padding-top:clamp(48px,7vw,84px);padding-bottom:clamp(70px,9vw,120px)}
.home-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,60px);align-items:center}
.home-hero .kicker{font-size:12px;font-weight:800;letter-spacing:.24em;color:#7FD8C4;text-transform:uppercase}
.home-hero h1{color:#fff;font-size:clamp(30px,4.6vw,54px);line-height:1.06;margin:16px 0 18px}
.home-hero p{font-size:17px;line-height:1.6;color:#B7CBE0;max-width:520px;margin:0 0 26px}
.home-hero .btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24);color:#fff}
.home-hero .btn-ghost:hover{background:rgba(255,255,255,.16);color:#fff}
.home-hero .tagrow{margin-top:26px;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:#8FA6C0}
.home-hero-visual{border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.5);aspect-ratio:4/3}
.home-hero-visual img{width:100%;height:100%;object-fit:cover;display:block}

/* Solution finder */
.finder{position:relative;z-index:5;margin-top:-64px}
.finder-card{background:rgba(255,255,255,.72);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(255,255,255,.6);border-radius:20px;box-shadow:0 30px 70px rgba(8,28,56,.22);padding:clamp(22px,3vw,32px)}
.finder-card h2{font-size:clamp(20px,2.4vw,27px);margin:0 0 4px}
.finder-card p{font-size:14.5px;color:var(--body);margin:0 0 18px}
.finder-row{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:12px;align-items:end}
.finder-row .field label{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.finder-row .btn{white-space:nowrap;height:44px}

/* Logo marquee */
@keyframes fobe-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-wrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee{display:flex;align-items:center;gap:clamp(28px,4.4vw,56px);width:max-content;animation:fobe-marquee 46s linear infinite}
.marquee span{flex-shrink:0;height:52px;display:flex;align-items:center}
.marquee img{max-height:100%;max-width:150px;width:auto;object-fit:contain;transition:transform .25s}
.marquee img:hover{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){.marquee{animation:none}}

@media (max-width:900px){
  .home-hero-grid{grid-template-columns:1fr}
  .home-hero-visual{order:-1}
  .finder{margin-top:-40px}
  .finder-row{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .finder-row{grid-template-columns:1fr}
  .finder-row .btn{width:100%}
}

/* ==========================================================================
   Page redesign v2 — every page except index.php (body.pg-v2)
   Design language is lifted from index.php: line-eyebrow section headers,
   the Knowledge-Centre card (mono tag pill, watermark numeral, gradient top
   bar, Space Grotesk title that turns green on hover, sliding arrow), tinted
   industry tiles, accent-bordered product cards, the dark blob hero and the
   full-bleed dark consultation CTA. Scoped to body.pg-v2 so index.php is
   untouched. Uses the :root tokens above plus the handful of index colours.
   Motion is opt-in via [data-reveal] / [data-stagger] and honours
   prefers-reduced-motion.
   ========================================================================== */
.pg-v2{
  --ease:cubic-bezier(.22,.61,.36,1);
  --grot:'Space Grotesk',var(--head);
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --text-2:#5C7688;
  --ink-2:#08243A;
  --edge:#EDF3F6;
  --edge-hover:#A9DCC2;
  --num:#E4EDF2;
  --bar:linear-gradient(90deg,#109C56,#17B0BC);
  --tint-green:#E7F6EE;--tint-teal:#E5F6F8;
  --tile-g:linear-gradient(150deg,#F2FAF5,#EAF5EF);--tile-g-b:#DCEEE3;
  --tile-t:linear-gradient(150deg,#F0F8FA,#E9F4F7);--tile-t-b:#D9ECF1;
  --sky:#4FD9E8;--mint-2:#3ED98B;
  --lift:0 30px 56px -28px rgba(8,36,58,.28);
  --lift-2:0 26px 50px rgba(8,28,56,.12);
}
@keyframes fv-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fv-scale{from{opacity:0;transform:scale(.94) translateY(18px)}to{opacity:1;transform:none}}
@keyframes fv-float{0%,100%{transform:translateY(-6px)}50%{transform:translateY(8px)}}
@keyframes fv-blob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(34px,-26px) scale(1.1)}}
@keyframes fv-fade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes fv-shine{from{left:-60%}to{left:130%}}

/* ---- Scroll reveal (only while JS is present) ---- */
.pg-v2.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s);will-change:opacity,transform}
.pg-v2.js [data-reveal].is-in{opacity:1;transform:none}
.pg-v2.js [data-stagger] > *{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease),box-shadow .3s var(--ease),border-color .3s;transition-delay:var(--d,0s)}
.pg-v2.js [data-stagger].is-in > *{opacity:1;transform:none;transition-duration:.6s,.4s,.3s,.3s;transition-delay:var(--d,0s),var(--d,0s),0s,0s}

/* ---- Rhythm & type ---- */
.pg-v2 section{padding:clamp(60px,7.5vw,104px) 0;scroll-margin-top:calc(var(--navh,58px) + 64px)}
.pg-v2 section.tight{padding:clamp(44px,5.5vw,72px) 0}
.pg-v2 .page .content > section:first-child{padding-top:clamp(40px,5vw,64px)}
.pg-v2 section.panel{background:#F3F7FA}
.pg-v2 .grid{gap:22px}
.pg-v2 .sec-head{margin:0 0 44px}
.pg-v2 .sec-head h2{font-size:clamp(28px,3.4vw,44px);line-height:1.14;letter-spacing:-.025em;margin:16px 0 12px;max-width:720px}
.pg-v2 .sec-head p{font-size:16px;line-height:1.6;color:var(--body);max-width:640px}
.pg-v2 .sec-head.mt{margin-top:52px}
.pg-v2 .sec-head h2.sm{font-size:clamp(22px,2.4vw,30px)}
.pg-v2 .sec-head.split{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap}
.pg-v2 .sec-head.split .sec-txt{max-width:620px}
.pg-v2 .sec-head.split .sec-txt h2{margin-bottom:0}
.pg-v2 .sec-head.split .sec-txt p{margin-top:12px}
.pg-v2 .sec-link{font-weight:800;font-size:15px;color:var(--teal);white-space:nowrap;padding-bottom:8px;display:inline-flex;align-items:center;gap:8px;transition:color .2s}
.pg-v2 .sec-link:hover{color:var(--green-dark)}
.pg-v2 .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.22em;color:var(--teal);text-transform:uppercase}
.pg-v2 .eyebrow::before{content:"";width:28px;height:2px;background:var(--teal);flex-shrink:0}
.pg-v2 .sec-head.center .eyebrow::after{content:"";width:28px;height:2px;background:var(--teal);flex-shrink:0}
/* Knowledge Centre listing: "Filter by topic" without the leading rule */
.pg-knowledge #articles .sec-head .eyebrow::before{display:none}
.pg-v2 .note{font-size:13px;color:var(--muted);margin:14px 0 0;line-height:1.6}
.pg-v2 .sec-act{margin-top:26px}
.pg-v2 .sec-act.sm{margin-top:16px}
.pg-v2 .sec-act.center{text-align:center;margin-top:34px}
.pg-v2 .chips{display:flex;flex-wrap:wrap;gap:8px}
.pg-v2 .chips.mt{margin-top:22px}
.pg-v2 .subhead{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--teal);text-transform:uppercase;margin:0 0 14px;display:flex;align-items:center;gap:12px}
.pg-v2 .subhead::after{content:"";flex:1;height:1px;background:var(--line)}
.pg-v2 .go::after{content:"\2192";display:inline-block;transform:translateX(var(--arrowX,0));transition:transform .25s var(--ease)}
.pg-v2 .sec-link::after{content:"\2192";display:inline-block;transition:transform .25s var(--ease)}
.pg-v2 .sec-link:hover::after{transform:translateX(4px)}

/* ---- Breadcrumb (sits on the dark hero) ---- */
.pg-v2 .crumb{background:linear-gradient(90deg,#08243A 0%,#0B2E4A 100%);border-bottom:1px solid rgba(255,255,255,.07)}
.pg-v2 .crumb-in{color:#6F8BA6}
.pg-v2 .crumb-in a{color:#9FBACB;position:relative;transition:color .2s}
.pg-v2 .crumb-in a:hover{color:var(--mint-2)}
.pg-v2 .crumb-in span{color:#fff}

/* ---- Buttons ---- */
.pg-v2 .btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .3s,border-color .3s,color .3s}
.pg-v2 .btn-primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);pointer-events:none}
.pg-v2 .btn-primary:hover::after{animation:fv-shine .7s var(--ease) forwards}
.pg-v2 .btn-ghost:hover{background:#F7FBF9}
.pg-v2 .btn-dark:hover{background:var(--green)}

/* ---- Hero (index-style dark hero with photo, blobs and fade) ---- */
.pg-v2 .hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#0B2545 0%,#0A2140 55%,#0C2B52 100%);color:#fff;padding:clamp(56px,7vw,96px) 0 clamp(88px,9vw,132px)}
.pg-v2 .hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pg-v2 .hero-bg .photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.06);transition:opacity 1.4s var(--ease),transform 8s var(--ease)}
.pg-v2 .hero-bg .photo.on{opacity:.34;transform:scale(1)}
.pg-v2 .hero-bg .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,22,43,.72) 0%,rgba(8,28,56,.5) 55%,rgba(11,37,69,.78) 100%)}
.pg-v2 .hero-bg .grid{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)}
.pg-v2 .hero-bg .orb{position:absolute;border-radius:50%;filter:blur(12px);animation:fv-blob 14s ease-in-out infinite}
.pg-v2 .hero-bg .orb.a{top:-120px;right:-80px;width:480px;height:480px;background:radial-gradient(circle,rgba(79,217,232,.24),transparent 65%);animation-duration:16s}
.pg-v2 .hero-bg .orb.b{bottom:-160px;left:-100px;width:520px;height:520px;background:radial-gradient(circle,rgba(62,217,139,.22),transparent 65%);animation-delay:-5s}
.pg-v2 .hero-bg .fade{position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff)}
.pg-v2 .hero-grid,.pg-v2 .hero > .wrap{position:relative;z-index:1}
.pg-v2 .hero-copy > *{animation:fv-up .75s var(--ease) both}
.pg-v2 .hero-copy > :nth-child(1){animation-delay:.05s}
.pg-v2 .hero-copy > :nth-child(2){animation-delay:.15s}
.pg-v2 .hero-copy > :nth-child(3){animation-delay:.25s}
.pg-v2 .hero-copy > :nth-child(4){animation-delay:.35s}
.pg-v2 .hero-copy > :nth-child(5){animation-delay:.45s}
.pg-v2 .hero .eyebrow{color:var(--sky)}
.pg-v2 .hero .eyebrow::before{background:var(--sky)}
.pg-v2 .hero h1{color:#fff;font-weight:800;font-size:clamp(34px,4.4vw,56px);line-height:1.08;letter-spacing:-.03em;margin:18px 0 18px}
.pg-v2 .hero h1 .accent{color:var(--mint-2)}
.pg-v2 .hero-lead{color:#C4D7EA;font-size:17.5px;line-height:1.65;max-width:580px;margin-bottom:26px}
.pg-v2 .hero .chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#DCEBFA;box-shadow:none}
.pg-v2 .hero .chip:hover{border-color:var(--sky);color:#fff;transform:translateY(-2px)}
.pg-v2 .hero .chip-check::before{background:rgba(62,217,139,.16);border:1px solid rgba(62,217,139,.4);color:var(--mint-2)}
.pg-v2 .hero-tech .chip{animation:fv-up .6s var(--ease) both}
.pg-v2 .hero-tech .chip:nth-child(1){animation-delay:.40s}
.pg-v2 .hero-tech .chip:nth-child(2){animation-delay:.46s}
.pg-v2 .hero-tech .chip:nth-child(3){animation-delay:.52s}
.pg-v2 .hero-tech .chip:nth-child(4){animation-delay:.58s}
.pg-v2 .hero-tech .chip:nth-child(5){animation-delay:.64s}
.pg-v2 .hero-tech .chip:nth-child(6){animation-delay:.70s}
.pg-v2 .hero-cta{gap:14px}
.pg-v2 .hero-cta .btn{padding:15px 26px;font-size:15px;border-radius:12px}
.pg-v2 .hero-cta .btn-primary{box-shadow:0 12px 26px rgba(31,161,83,.35)}
.pg-v2 .hero-cta .btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(31,161,83,.45)}
.pg-v2 .hero-cta .btn-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.35);color:#fff}
.pg-v2 .hero-cta .btn-ghost:hover{background:transparent;border-color:var(--sky);color:var(--sky);transform:translateY(-3px)}
.pg-v2 .hero-visual{position:relative;border-radius:20px;border:none;background:#fff;min-height:300px;box-shadow:0 40px 80px -30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);animation:fv-scale 1s .25s var(--ease) both,fv-float 7s 1.4s ease-in-out infinite}
.pg-v2 .hero-visual img{transition:transform .8s var(--ease)}
.pg-v2 .hero-visual:hover img{transform:scale(1.03)}
.pg-v2 .hero-visual.contain{background:radial-gradient(circle at 50% 40%,#fff 0%,#F3F7FA 100%)}
.pg-v2 .hero-visual.contain img{object-fit:contain;padding:28px}
.pg-v2 .hero-visual.contain::after{content:"";position:absolute;left:12%;right:12%;bottom:18px;height:22px;border-radius:50%;background:radial-gradient(ellipse,rgba(8,28,56,.18),transparent 70%);filter:blur(4px);pointer-events:none}
.pg-v2 .hero-badge{position:absolute;z-index:2;background:#fff;border-radius:14px;box-shadow:0 16px 34px rgba(4,14,28,.35);padding:12px 16px;display:flex;align-items:center;gap:10px;animation:fv-float 7s .8s ease-in-out infinite;pointer-events:none}
.pg-v2 .hero-badge .ic{width:34px;height:34px;border-radius:9px;background:var(--tint-green);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pg-v2 .hero-badge span:last-child{font-family:var(--head);font-weight:700;font-size:13px;color:var(--ink);white-space:nowrap}
.pg-v2 .hero-badge.tl{top:-18px;left:-18px}
.pg-v2 .hero-badge.br{bottom:-18px;right:-18px;animation-delay:2s}

/* ---- Chips (light context) ---- */
.pg-v2 .chip{background:#fff;border:1px solid var(--line-2);box-shadow:0 1px 2px rgba(8,28,56,.04);transition:transform .25s var(--ease),border-color .25s,box-shadow .25s,color .25s}
.pg-v2 .chip:hover{transform:translateY(-2px);border-color:var(--edge-hover);box-shadow:0 8px 18px -10px rgba(8,28,56,.25)}
.pg-v2 .chip-check::before{content:"\2713";width:17px;height:17px;border-radius:50%;background:var(--tint-green);color:var(--green);font-size:10px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}

/* ---- At-a-glance (index "trust" stats inside a card) ---- */
.pg-v2 .glance{position:relative;overflow:hidden;border:1px solid var(--line-2);border-radius:18px;background:#fff;box-shadow:0 24px 54px -26px rgba(8,28,56,.22);padding:clamp(24px,3vw,36px)}
.pg-v2 .glance::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--bar)}
.pg-v2 .glance.mt{margin-top:28px}
.pg-v2 .glance-title{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.2em;color:var(--faint);display:flex;align-items:center;gap:12px;margin-bottom:26px}
.pg-v2 .glance-title::after{content:"";flex:1;height:1px;background:var(--line)}
.pg-v2 .glance-stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;margin-bottom:28px}
.pg-v2 .glance-stats > div{text-align:center;padding:12px 18px;border-left:1px solid var(--line)}
.pg-v2 .glance-stats > div:first-child{border-left:none}
.pg-v2 .glance-stats .n{font-size:clamp(34px,3.6vw,50px);letter-spacing:-.03em}
.pg-v2 .glance-stats .n.sm{font-size:clamp(20px,1.8vw,26px);line-height:1.15}
.pg-v2 .glance-stats .n.green{color:var(--green)}
.pg-v2 .glance-stats .l{font-size:12.5px;letter-spacing:.1em;margin-top:6px}
.pg-v2 .glance-cols{border-top:1px solid var(--line);padding-top:26px}
.pg-v2 .glance-cols h4{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.16em;color:var(--teal)}
.pg-v2 .glance-cols li{position:relative;padding-left:16px;color:var(--text-2)}
.pg-v2 .glance-cols li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--mint)}

/* ---- Cards (the Knowledge-Centre card from index.php) ---- */
.pg-v2 .card{position:relative;overflow:hidden;gap:0;background:#fff;border:1px solid var(--edge);border-radius:12px;padding:30px 26px 26px;color:inherit;
  --barX:0;--titleC:var(--ink-2);--arrowX:0px;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s}
.pg-v2 .card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--bar);transform:scaleX(var(--barX));transform-origin:left;transition:transform .35s var(--ease)}
.pg-v2 .card:hover{box-shadow:var(--lift);transform:translateY(-4px);--barX:1;--titleC:var(--green-dark);--arrowX:4px}
.pg-v2 .card > *{position:relative}
.pg-v2 .card .k{display:inline-flex;align-self:flex-start;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#0C8148;background:rgba(16,156,86,.08);border:1px solid rgba(16,156,86,.18);border-radius:100px;padding:5px 11px;max-width:100%}
.pg-v2 .card h3{font-family:var(--grot);font-weight:600;font-size:clamp(18px,1.5vw,21.5px);line-height:1.32;letter-spacing:-.015em;color:var(--titleC);margin:0;transition:color .25s}
.pg-v2 .card .k + h3{margin-top:20px}
.pg-v2 .card p{font-size:14.5px;line-height:1.6;color:var(--text-2);margin:12px 0 0}
.pg-v2 .card .k + p{margin-top:16px}
.pg-v2 .card .go{margin-top:auto;padding-top:24px;font-family:var(--grot);font-weight:600;font-size:14.5px;color:#109C56;display:inline-flex;align-items:center;gap:8px;transform:none}
.pg-v2 .card .col{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.pg-v2 .card .col a{font-weight:700;font-size:14.5px;color:var(--ink);transition:color .2s,transform .2s var(--ease)}
.pg-v2 .card .col a:hover{color:var(--green-dark);transform:translateX(4px)}
.pg-v2 .card .spec{margin-top:16px}
.pg-v2 .card:not(.link){cursor:default}
.pg-v2 .grid.c4 .card{padding:26px 22px 22px}
.pg-v2 .grid.c4 .card h3{font-size:18px}
.pg-v2 .numbered{counter-reset:fvcard}
.pg-v2 .numbered > .card{counter-increment:fvcard}
.pg-v2 .numbered > .card::after{content:counter(fvcard,decimal-leading-zero);position:absolute;top:14px;right:20px;font-family:var(--grot);font-size:clamp(31px,4.4vw,56px);font-weight:700;color:var(--num);letter-spacing:-.02em;line-height:1;pointer-events:none;z-index:0}
.pg-v2 .numbered.c4 > .card::after{font-size:clamp(28px,3vw,44px);top:12px;right:16px}
.pg-v2 .card.feature{background:linear-gradient(150deg,#EAF6EF,#E5F6F8);border-color:#D9ECF1}

/* ---- Tiles (index industry tiles) ---- */
.pg-v2 .tile{position:relative;overflow:hidden;gap:6px;min-height:0;background:var(--tile-g);border:1px solid var(--tile-g-b);border-radius:16px;padding:26px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.pg-v2 .grid > .tile:nth-child(even){background:var(--tile-t);border-color:var(--tile-t-b)}
.pg-v2 .tile::after{content:"\2197";position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--green);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px -8px rgba(8,28,56,.25);opacity:0;transform:translate(-6px,6px);transition:opacity .3s,transform .3s var(--ease)}
.pg-v2 .grid > .tile:nth-child(even)::after{color:var(--teal)}
.pg-v2 .tile:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(8,28,56,.1)}
.pg-v2 .tile:hover::after{opacity:1;transform:none}
.pg-v2 .tile b{font-size:17px;padding-right:36px}
.pg-v2 .tile small{font-size:13px;line-height:1.5;color:var(--muted);font-weight:600}
.pg-v2 .tile .go{margin-top:8px;font-size:13.5px;font-weight:800;color:var(--teal);display:inline-flex;align-items:center;gap:7px;transition:color .2s}
.pg-v2 .grid > .tile:nth-child(even) .go{color:var(--green)}
.pg-v2 .tile:hover .go{color:var(--green-dark);--arrowX:4px}

/* ---- Product cards (index featured products) ---- */
.pg-v2 .pcard{border:1px solid var(--line-2);border-left:4px solid var(--green);border-radius:14px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.pg-v2 .grid > .pcard:nth-child(even){border-left-color:var(--teal)}
.pg-v2 .pcard:hover{transform:translateY(-7px);box-shadow:0 24px 48px rgba(8,28,56,.15);border-color:var(--line-2);border-left-color:var(--green)}
.pg-v2 .grid > .pcard:nth-child(even):hover{border-left-color:var(--teal)}
.pg-v2 .pcard .img{background:#FBFDFE;border-bottom:1px solid #EEF3F7;overflow:hidden}
.pg-v2 .pcard .img img{padding:18px;transition:transform .4s var(--ease)}
.pg-v2 .pcard:hover .img img{transform:scale(1.07)}
.pg-v2 .pcard .body{padding:20px 22px 0;gap:7px}
.pg-v2 .pcard .brand{font-size:10.5px;font-weight:800;letter-spacing:.14em;color:var(--green);text-transform:uppercase}
.pg-v2 .grid > .pcard:nth-child(even) .brand{color:var(--teal)}
.pg-v2 .pcard h3{font-size:17.5px;letter-spacing:-.01em;line-height:1.3}
.pg-v2 .pcard .meta{font-size:13px;font-weight:600;color:var(--muted)}
.pg-v2 .pcard .go{margin-top:auto;padding:14px 0;border-top:1px solid #EEF3F7;display:flex;align-items:center;justify-content:space-between;font-size:13.5px;font-weight:800;color:var(--ink);transform:none}
.pg-v2 .pcard .go::after{font-size:18px;line-height:1;color:var(--green);font-weight:700}
.pg-v2 .grid > .pcard:nth-child(even) .go::after{color:var(--teal)}
.pg-v2 .pcard:hover .go{--arrowX:4px}

/* ---- Logo tiles (index partners) ---- */
.pg-v2 .logo-tile{border-radius:14px;padding:22px 18px;min-height:96px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.pg-v2 .logo-tile img{max-height:52px;transition:transform .3s var(--ease)}
.pg-v2 .logo-tile:hover{border-color:var(--edge-hover);box-shadow:0 16px 34px rgba(8,28,56,.1);transform:translateY(-4px)}
.pg-v2 .logo-tile:hover img{transform:scale(1.05)}

/* ---- Filters & form fields (index solution-finder inputs) ---- */
.pg-v2 .filters{border-radius:16px;padding:14px;gap:10px;box-shadow:0 14px 34px -24px rgba(8,28,56,.25)}
.pg-v2 .filters input[type=search]{padding:13px 14px 13px 42px;border:1.5px solid #D5E3EE;border-radius:11px;font-weight:700;font-size:14px;background:#F8FBFD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236E8CA6' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 14px center/17px no-repeat;transition:border-color .25s,box-shadow .25s,background-color .25s}
.pg-v2 .filters input[type=search]:focus{background-color:#fff;border-color:var(--green);box-shadow:0 0 0 3px rgba(31,161,83,.14)}
.pg-v2 .filters select{appearance:none;-webkit-appearance:none;padding:12px 36px 12px 14px;border:1.5px solid #D5E3EE;border-radius:11px;font-size:14px;background:#F8FBFD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230B2545' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center/13px no-repeat;transition:border-color .25s,box-shadow .25s,transform .25s var(--ease)}
.pg-v2 .filters select:hover{border-color:var(--edge-hover);transform:translateY(-1px)}
.pg-v2 .filters select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(31,161,83,.14)}
.pg-v2 .filters .chip{font-size:13.5px;font-weight:800;padding:10px 20px;border:1.5px solid var(--line-2);box-shadow:none;cursor:pointer;letter-spacing:0}
.pg-v2 .filters .chip:hover{border-color:var(--green);transform:none;color:var(--green-dark)}
.pg-v2 .filters .chip.on,.pg-v2 .filters .chip:first-child{background:var(--green);border-color:var(--green);color:#fff}
.pg-v2 .field label{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--faint);text-transform:uppercase}
.pg-v2 .field input,.pg-v2 .field select,.pg-v2 .field textarea{padding:13px 14px;border:1.5px solid #D5E3EE;border-radius:11px;background:#F8FBFD;font-weight:700;transition:border-color .25s,box-shadow .25s,background-color .25s}
.pg-v2 .field input:focus,.pg-v2 .field select:focus,.pg-v2 .field textarea:focus{background:#fff;border-color:var(--green);box-shadow:0 0 0 3px rgba(31,161,83,.12)}
.pg-v2 .formcard{border-radius:18px;position:relative;overflow:hidden}
.pg-v2 .formcard::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--bar)}
.pg-v2 .formcard .sec-head{margin-bottom:22px}
.pg-v2 .formcard .sec-head h2{font-size:clamp(22px,2.6vw,30px);margin-top:0}
.pg-v2 .formcard .sec-head p{font-size:14.5px;margin-top:6px}
.pg-v2 .form-acts{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}
.pg-v2 .form-note{font-size:12.5px;color:var(--muted);margin-top:14px}

/* ---- Comparison table ---- */
.pg-v2 .tablewrap{border-radius:14px;box-shadow:0 18px 44px -28px rgba(8,28,56,.25)}
.pg-v2 table.cmp thead th{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:#F3F7FA;border-bottom:2px solid var(--line-2)}
.pg-v2 table.cmp thead th:not(:first-child),.pg-v2 table.cmp tbody td{text-align:center}
.pg-v2 table.cmp tbody th{position:sticky;left:0;background:#fff;z-index:1}
.pg-v2 table.cmp tbody tr{transition:background .25s}
.pg-v2 table.cmp tbody tr:hover,.pg-v2 table.cmp tbody tr:hover th{background:#F7FBF9}
.pg-v2 table.cmp tbody td{font-weight:600;color:var(--ink)}
.pg-v2 .stars{font-size:15px}

/* ---- Spec table ---- */
.pg-v2 .spec tr{transition:background .2s}
.pg-v2 .spec tr:nth-child(odd){background:#F8FBFD}
.pg-v2 .spec tr:hover{background:#F2FAF5}
.pg-v2 .spec th{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);width:38%;padding:13px 16px}
.pg-v2 .spec td{padding:13px 16px}
.pg-v2 .card .spec th,.pg-v2 .card .spec td{padding:10px 8px;font-size:13.5px}
.pg-v2 .card .spec tr:nth-child(odd){background:none}

/* ---- Interactive testing matrix (industry) ---- */
.pg-v2 .matrix{overflow-x:auto;border:1px solid var(--line-2);border-radius:14px;background:#fff;box-shadow:0 18px 44px -28px rgba(8,28,56,.25)}
.pg-v2 table.mx{width:100%;border-collapse:collapse;min-width:560px;font-size:14px}
.pg-v2 table.mx th,.pg-v2 table.mx td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:center}
.pg-v2 table.mx tr:last-child th,.pg-v2 table.mx tr:last-child td{border-bottom:none}
.pg-v2 table.mx thead th{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:#F3F7FA;border-bottom:2px solid var(--line-2)}
.pg-v2 table.mx thead th:first-child,.pg-v2 table.mx tbody th{text-align:left}
.pg-v2 table.mx tbody th{font-weight:700;color:var(--ink);position:sticky;left:0;background:#fff;z-index:1}
.pg-v2 table.mx td{color:var(--faint);font-size:15px}
.pg-v2 table.mx td[data-cell]{color:var(--green);cursor:pointer;transition:background .2s,transform .2s var(--ease)}
.pg-v2 table.mx td[data-cell]:hover{background:var(--tint-green);color:var(--green-dark)}
.pg-v2 table.mx tbody tr:hover th{background:#F7FBF9}

/* ---- Steps / workflow ---- */
.pg-v2 .steps{position:relative;gap:16px}
.pg-v2 .steps.mb{margin-bottom:22px}
.pg-v2 .steps::before{content:"";position:absolute;left:26px;right:26px;top:36px;height:2px;border-radius:2px;background:var(--bar);opacity:.5;transform:scaleX(0);transform-origin:left;transition:transform 1.6s .2s var(--ease)}
.pg-v2 .steps.is-in::before{transform:scaleX(1)}
.pg-v2 .step{position:relative;overflow:hidden;background:#fff;border:1px solid var(--edge);border-radius:12px;padding:26px 22px 24px;--barX:0;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.pg-v2 .step::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--bar);transform:scaleX(var(--barX));transform-origin:left;transition:transform .35s var(--ease)}
.pg-v2 .step:hover{transform:translateY(-4px);box-shadow:var(--lift);--barX:1}
.pg-v2 .step .no{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.16em;color:var(--teal);background:#fff;position:relative;padding-right:6px}
.pg-v2 .step .no::before{content:"";width:18px;height:2px;background:var(--teal)}
.pg-v2 .step b{font-family:var(--grot);font-weight:600;font-size:17px;letter-spacing:-.01em;margin:12px 0 6px}
.pg-v2 .step small{font-size:13.5px;line-height:1.55;color:var(--text-2)}

/* ---- Production-workflow flow (industry) ---- */
.pg-v2 .flow{position:relative;display:flex;flex-wrap:wrap;gap:16px;counter-reset:fvstage}
.pg-v2 .flow::before{content:"";position:absolute;left:26px;right:26px;top:36px;height:2px;border-radius:2px;background:var(--bar);opacity:.5;transform:scaleX(0);transform-origin:left;transition:transform 1.6s .2s var(--ease)}
.pg-v2 .flow.is-in::before{transform:scaleX(1)}
.pg-v2 .flow .stage{position:relative;overflow:hidden;flex:1;min-width:190px;background:#fff;border:1px solid var(--edge);border-radius:12px;padding:26px 22px 22px;counter-increment:fvstage;--barX:0;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.pg-v2 .flow .stage::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--bar);transform:scaleX(var(--barX));transform-origin:left;transition:transform .35s var(--ease)}
.pg-v2 .flow .stage:hover{transform:translateY(-4px);box-shadow:var(--lift);--barX:1}
.pg-v2 .flow .stage::after{content:"STAGE " counter(fvstage,decimal-leading-zero);display:block;order:-1;font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.16em;color:var(--teal);position:relative;background:#fff;padding-right:6px;width:max-content}
.pg-v2 .flow .stage{display:flex;flex-direction:column}
.pg-v2 .flow .stage b{font-family:var(--grot);font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--ink);margin:12px 0 10px}
.pg-v2 .flow .stage ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px;font-size:13.5px;font-weight:600;color:var(--text-2)}
.pg-v2 .flow .stage li{position:relative;padding-left:16px}
.pg-v2 .flow .stage li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--mint)}

/* ---- Performance cards ---- */
.pg-v2 .perf{gap:16px}
.pg-v2 .perf > div{position:relative;overflow:hidden;border:1px solid var(--edge);border-radius:12px;padding:26px 18px;background:#fff;--barX:0;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.pg-v2 .perf > div::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--bar);transform:scaleX(var(--barX));transform-origin:left;transition:transform .35s var(--ease)}
.pg-v2 .perf > div:hover{transform:translateY(-4px);box-shadow:var(--lift);--barX:1}
.pg-v2 .perf > div > div{background:none;border:none;padding:0;border-radius:0;box-shadow:none}
.pg-v2 .perf .lbl{font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.14em;color:var(--teal)}
.pg-v2 .perf .val{font-family:var(--grot);font-weight:700;font-size:24px;color:var(--ink);margin-top:10px}

/* ---- Prose / checklist / Q&A ---- */
.pg-v2 .prose{color:var(--body)}
.pg-v2 .prose p{margin:0}
.pg-v2 .prose h3{font-family:var(--grot);font-weight:600;font-size:20px;letter-spacing:-.01em;color:var(--ink);margin:10px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.pg-v2 .prose h3:first-child{margin-top:0;padding-top:0;border-top:none}
.pg-v2 .prose h3 + p{margin-top:-4px}
.pg-v2 .lede{position:relative;padding-left:22px;color:var(--ink-2)}
.pg-v2 .lede::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--bar)}
.pg-v2 .checklist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.pg-v2 .checklist li{display:flex;align-items:center;gap:11px;font-size:14.5px;font-weight:600;color:var(--body);padding:11px 14px;border-radius:12px;background:#fff;border:1px solid var(--edge);transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.pg-v2 .checklist li::before{content:"\2713";width:20px;height:20px;border-radius:50%;background:var(--tint-green);color:var(--green);font-size:11px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.pg-v2 .checklist li:hover{transform:translateX(4px);border-color:var(--edge-hover);box-shadow:0 10px 24px -16px rgba(8,28,56,.25)}
.pg-v2 .checklist.dots li::before{content:"";width:8px;height:8px;background:var(--teal);margin:0 6px}
.pg-v2 .checklist li a{color:var(--ink)}
.pg-v2 .checklist li:hover a{color:var(--green-dark)}
.pg-v2 .qa{position:relative;overflow:hidden;border-left:none;border-radius:12px;padding:26px 28px;max-width:860px}
.pg-v2 .qa::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--bar)}
.pg-v2 .qa .q{font-family:var(--grot);font-weight:600;font-size:18px;letter-spacing:-.01em}
.pg-v2 .qa .a{color:var(--text-2)}

/* ---- FAQ ---- */
.pg-v2 .faq{border-top:none;display:flex;flex-direction:column;gap:10px}
.pg-v2 .faq details{border:1px solid var(--edge);border-radius:12px;background:#fff;transition:border-color .3s,box-shadow .3s}
.pg-v2 .faq details:hover{border-color:var(--edge-hover)}
.pg-v2 .faq details[open]{border-color:var(--edge-hover);box-shadow:var(--lift)}
.pg-v2 .faq summary{padding:18px 60px 18px 22px;font-family:var(--grot);font-weight:600;font-size:16.5px;letter-spacing:-.01em;transition:color .2s}
.pg-v2 .faq summary:hover{color:var(--green-dark)}
.pg-v2 .faq summary::after{content:"";right:16px;width:30px;height:30px;border-radius:50%;background:var(--tint-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231FA153' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/13px no-repeat;transition:transform .35s var(--ease),background-color .3s}
.pg-v2 .faq details[open] summary::after{content:"";transform:translateY(-50%) rotate(45deg);background-color:var(--green);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.pg-v2 .faq .a{padding:0 22px 22px;color:var(--text-2);animation:fv-fade .45s var(--ease) both}

/* ---- Consultation CTA (index full-bleed dark CTA) ---- */
.pg-v2 section.cta-sec{position:relative;overflow:hidden;background:linear-gradient(160deg,#0B2545 0%,#081C38 60%,#0A2342 100%);padding:clamp(72px,9vw,118px) 0}
.pg-v2 section.cta-sec::before{content:"";position:absolute;top:-140px;left:-100px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(31,161,83,.28),transparent 65%);filter:blur(20px);animation:fv-blob 12s ease-in-out infinite;pointer-events:none}
.pg-v2 section.cta-sec::after{content:"";position:absolute;bottom:-160px;right:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(11,168,188,.24),transparent 65%);filter:blur(20px);animation:fv-blob 15s 2s ease-in-out infinite;pointer-events:none}
.pg-v2 section.cta-sec .wrap{position:relative;z-index:1}
.pg-v2 .cta-band{background:none;border-radius:0;padding:0;box-shadow:none;max-width:860px;margin:0 auto;overflow:visible}
.pg-v2 .cta-band .eyebrow{color:var(--sky);justify-content:center}
.pg-v2 .cta-band .eyebrow::before,.pg-v2 .cta-band .eyebrow::after{content:"";width:28px;height:2px;background:var(--sky);flex-shrink:0}
.pg-v2 .cta-band h2{font-size:clamp(30px,3.6vw,46px);line-height:1.14;letter-spacing:-.025em;margin:18px 0 16px}
.pg-v2 .cta-band h2 .accent{color:var(--mint-2)}
.pg-v2 .cta-band p{font-size:16.5px;line-height:1.65;color:#A9C2DA;margin:0 auto 34px}
.pg-v2 .cta-band .hero-cta{gap:14px}
.pg-v2 .cta-band .btn{padding:16px 30px;font-size:15.5px;border-radius:12px}
.pg-v2 .cta-band .btn-primary{box-shadow:0 14px 30px rgba(31,161,83,.35)}
.pg-v2 .cta-band .btn-primary:hover{transform:translateY(-3px)}
.pg-v2 .cta-band .btn-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.35);color:#fff;backdrop-filter:none}
.pg-v2 .cta-band .btn-ghost:hover{background:transparent;border-color:var(--sky);color:var(--sky);transform:translateY(-3px)}
.pg-v2 .cta-note{margin-top:30px;font-size:14px;font-weight:700;color:#7FA6C9}
.pg-v2 .cta-note a{color:var(--sky)}
.pg-v2 .cta-note a:hover{color:var(--mint-2)}

/* ---- Split / aside / contact ---- */
.pg-v2 .aside-card{position:relative;overflow:hidden;border:1px solid var(--edge);border-radius:14px;box-shadow:0 24px 54px -28px rgba(8,28,56,.25);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.pg-v2 .aside-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--bar)}
.pg-v2 .aside-card:hover{transform:translateY(-4px)}
.pg-v2 .aside-card.mt{margin-top:16px}
.pg-v2 .aside-card h4{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.16em;color:var(--teal);margin-bottom:14px}
.pg-v2 .aside-card p{font-size:14px;line-height:1.7;color:var(--body);margin:0 0 14px}
.pg-v2 .aside-card ul{gap:10px}
.pg-v2 .aside-card li{position:relative;padding-left:18px;color:var(--text-2)}
.pg-v2 .aside-card li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--mint)}
.pg-v2 .aside-card li a{color:var(--ink);transition:color .2s}
.pg-v2 .aside-card li a:hover{color:var(--green-dark)}
.pg-v2 .aside-card li.chip-check{background:none;border:none;padding:0 0 0 18px}
.pg-v2 .aside-card li.chip-check::before{content:"\2713";width:auto;height:auto;background:none;border:none;color:var(--green);font-size:12px;font-weight:900;top:.2em}
.pg-v2 .aside-card .contact-list{gap:10px}
.pg-v2 .contact-list .row{padding:12px;border-radius:12px;border:1px solid transparent;transition:background .25s,border-color .25s,transform .25s var(--ease)}
.pg-v2 .contact-list .row:hover{background:#F8FBFD;border-color:var(--edge);transform:translateX(4px)}
.pg-v2 .contact-list .ic{background:var(--tint-green);color:var(--green)}
.pg-v2 .contact-list .lbl{font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.14em}
.pg-v2 section.panel .contact-list .row:hover{background:#fff}

/* ---- Sticky in-page jump navigation ---- */
.pg-v2 .jumpnav{position:sticky;top:var(--navh,58px);z-index:90;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);box-shadow:0 10px 30px -24px rgba(8,28,56,.25)}
.pg-v2 .jumpnav-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.pg-v2 .jumpnav-in::-webkit-scrollbar{display:none}
.pg-v2 .jumpnav .lbl{font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.16em;color:var(--faint);text-transform:uppercase;margin-right:10px;white-space:nowrap;flex-shrink:0}
.pg-v2 .jumpnav a{flex-shrink:0;position:relative;font-size:13px;font-weight:700;color:var(--body);padding:15px 12px;white-space:nowrap;transition:color .2s}
.pg-v2 .jumpnav a::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;background:var(--bar);transform:scaleX(0);transition:transform .3s var(--ease)}
.pg-v2 .jumpnav a:hover{color:var(--green-dark)}
.pg-v2 .jumpnav a.active{color:var(--ink)}
.pg-v2 .jumpnav a.active::after{transform:scaleX(1)}

/* ---- Sticky product CTA ---- */
.pg-v2 .sticky-cta{background:rgba(255,255,255,.96);box-shadow:0 -14px 40px -20px rgba(8,28,56,.25)}
.pg-v2 .sticky-cta .nm{display:flex;flex-direction:column;gap:2px;min-width:0}
.pg-v2 .sticky-cta .nm small{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.08em}
.pg-v2 .sticky-cta .acts .btn{padding:11px 18px;font-size:13.5px}
.pg-v2 > a[href*="whatsapp"]{transition:bottom .3s var(--ease),transform .25s!important}
.pg-v2.has-sticky > a[href*="whatsapp"]{bottom:100px!important}

/* ---- Responsive ---- */
@media (max-width:1100px){
  .pg-v2 .numbered.c4 > .card::after{font-size:36px}
}
@media (max-width:860px){
  .pg-v2 .hero{padding-bottom:clamp(72px,9vw,110px)}
  .pg-v2 .hero-visual{animation:fv-scale 1s .2s var(--ease) both}
  .pg-v2 .hero-bg .orb.b{display:none}
  .pg-v2 .hero-badge{display:none}
  .pg-v2.has-sticky > a[href*="whatsapp"]{bottom:140px!important}
}
@media (max-width:600px){
  .pg-v2 .steps::before,.pg-v2 .flow::before{display:none}
  .pg-v2 .flow{flex-direction:column}
  .pg-v2 .flow .stage{min-width:0;width:100%}
  .pg-v2 .glance-stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .pg-v2 .glance-stats > div{border-left:none;background:#F8FBFD;border:1px solid var(--line);border-radius:12px;padding:14px 12px}
  .pg-v2 .card{padding:26px 20px 22px}
  .pg-v2 .numbered > .card::after{font-size:34px;top:12px;right:14px}
  .pg-v2 .jumpnav a{padding:13px 10px}
  .pg-v2 .faq summary{padding:16px 54px 16px 16px;font-size:15.5px}
  .pg-v2 .faq .a{padding:0 16px 18px}
  .pg-v2 .sticky-cta .nm{display:none}
  .pg-v2 .sticky-cta .in{padding:10px var(--pad)}
  .pg-v2 .sticky-cta .acts{gap:8px}
  .pg-v2 .sticky-cta .acts .btn{padding:12px 10px;font-size:13px;white-space:nowrap;justify-content:center;letter-spacing:-.01em}
  .pg-v2.has-sticky > a[href*="whatsapp"]{bottom:92px!important}
  .pg-v2 .hero-cta .btn,.pg-v2 .cta-band .btn{padding:14px 18px;font-size:14.5px}
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .pg-v2 *,.pg-v2 *::before,.pg-v2 *::after{animation:none!important;transition-duration:.01ms!important}
  .pg-v2.js [data-reveal],.pg-v2.js [data-stagger] > *{opacity:1;transform:none}
  .pg-v2 .steps::before,.pg-v2 .flow::before{transform:none}
  .pg-v2 .hero-bg .photo.on{transform:none}
}

/* ---- Hero media column (visual + floating badge) ---- */
.pg-v2 .hero-media{position:relative}
.pg-v2 .hero-media .hero-visual{height:100%}
.pg-v2 .hero-badge.bl{bottom:-18px;left:-18px;animation-delay:2s}

/* ==========================================================================
   Section pattern library (reference: option-1) — one pattern per section
   so no two sections on a page share a design. The numbered Knowledge
   card (.card in .numbered) is used at most once per page. Scoped to
   body.pg-v2; overrides a few v2 defaults (glance strip, flat FAQ).
   ========================================================================== */
.pg-v2 .mono{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}

/* ---- Section split: header column left, content right ---- */
.pg-v2 .sec-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:start}
.pg-v2 .sec-split > .sec-head{margin-bottom:0;position:sticky;top:calc(var(--navh,58px) + 28px)}
.pg-v2 .sec-split > .sec-head h2{max-width:none}
.pg-v2 .two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,64px);align-items:start}

/* ---- Two-column editorial prose ---- */
.pg-v2 .prose.cols{max-width:none;display:block;columns:2;column-gap:clamp(32px,4vw,56px)}
.pg-v2 .prose.cols p{break-inside:avoid;margin:0 0 16px}

/* ---- Key-facts strip (replaces the glance card) ---- */
.pg-v2 .glance{border:none;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);border-radius:0;background:transparent;box-shadow:none;padding:clamp(22px,3vw,32px) 0}
.pg-v2 .glance::before{display:none}
.pg-v2 .glance-title{margin-bottom:24px}
.pg-v2 .glance-stats{gap:0;margin-bottom:28px}
.pg-v2 .glance-stats > div{text-align:left;padding:2px 26px 2px 22px;border-left:2px solid var(--line-2)}
.pg-v2 .glance-stats > div:first-child{padding-left:0;border-left:none}
.pg-v2 .glance-stats .n{font-size:clamp(32px,3.2vw,44px)}
.pg-v2 .glance-cols{border-top:1px dashed var(--line-2);padding-top:24px}

/* ---- Cell grid (1px-gap cells in one bordered frame) ---- */
.pg-v2 .cells{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:8px;overflow:hidden;counter-reset:fvcell}
.pg-v2 .cells.c2{grid-template-columns:repeat(2,1fr)}
.pg-v2 .cells.c3{grid-template-columns:repeat(3,1fr)}
.pg-v2 .cells.c4{grid-template-columns:repeat(4,1fr)}
.pg-v2 .cells.c5{grid-template-columns:repeat(5,1fr)}
.pg-v2 .cells.c6{grid-template-columns:repeat(6,1fr)}
.pg-v2 .cells.auto{grid-template-columns:repeat(auto-fit,minmax(176px,1fr))}
.pg-v2 .cell{position:relative;display:flex;flex-direction:column;background:#fff;padding:26px 22px 28px;color:inherit;counter-increment:fvcell;transition:background .25s}
.pg-v2 .cell::before{content:counter(fvcell,decimal-leading-zero);font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;color:var(--teal)}
.pg-v2 .cells.phase .cell::before{content:"Phase " counter(fvcell,decimal-leading-zero);text-transform:uppercase}
.pg-v2 .cells.step .cell::before{content:"Step " counter(fvcell,decimal-leading-zero);text-transform:uppercase}
.pg-v2 .cells.plain .cell::before{display:none}
.pg-v2 .cell h4{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:0}
.pg-v2 .cell h3,.pg-v2 .cell b{display:block;font-family:var(--grot);font-weight:600;font-size:17px;line-height:1.3;letter-spacing:-.01em;color:var(--ink-2);margin:12px 0 0;transition:color .2s}
.pg-v2 .cell p,.pg-v2 .cell small{display:block;font-size:13.5px;line-height:1.55;color:var(--muted);margin:8px 0 0}
.pg-v2 .cell ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:600;color:var(--text-2)}
.pg-v2 .cell li{position:relative;padding-left:14px}
.pg-v2 .cell li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--mint)}
.pg-v2 .cell .go{margin-top:auto;padding-top:16px;font-size:14px;font-weight:600;color:#109C56;display:inline-flex;gap:8px;align-items:center}
.pg-v2 a.cell:hover{background:#F7FBF9}
.pg-v2 a.cell:hover h3{color:var(--green-dark)}
.pg-v2 a.cell:hover .go{--arrowX:4px}
.pg-v2 .cell.feature{background:linear-gradient(150deg,#EAF6EF,#E5F6F8)}

/* ---- Bordered list box with header row ---- */
.pg-v2 .box{border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:#fff}
.pg-v2 .box-hd{padding:15px 22px;border-bottom:1px solid var(--line-2);background:#F8FBFD;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:12px;align-items:center}
.pg-v2 .box-hd span{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-2)}
.pg-v2 .box-row{display:block;padding:18px 22px;border-bottom:1px solid var(--edge);color:inherit;transition:background .2s}
.pg-v2 .box-row:last-child{border-bottom:none}
.pg-v2 a.box-row:hover{background:#F7FBF9}
.pg-v2 .box-row b{display:block;font-family:var(--grot);font-weight:600;font-size:16.5px;color:var(--ink-2);line-height:1.3;transition:color .2s}
.pg-v2 a.box-row:hover b{color:var(--green-dark)}
.pg-v2 .box-row small{display:block;font-size:14.5px;line-height:1.55;color:var(--text-2);margin-top:6px}
.pg-v2 .box-row .go{display:inline-flex;gap:8px;align-items:center;margin-top:10px;font-size:14px;font-weight:600;color:#109C56}
.pg-v2 a.box-row:hover .go{--arrowX:4px}
.pg-v2 .box-row.chk,.pg-v2 .box-row.dot{display:flex;align-items:flex-start;gap:12px;padding:14px 22px;font-size:15px;font-weight:600;color:var(--ink);line-height:1.5}
.pg-v2 .box-row.chk::before{content:"\2713";width:20px;height:20px;border-radius:50%;background:var(--tint-green);color:var(--green);font-size:11px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.pg-v2 .box-row.dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal);flex-shrink:0;margin:8px 6px 0}
.pg-v2 .box-row.chk a,.pg-v2 .box-row.dot a{color:var(--ink);transition:color .2s}
.pg-v2 .box-row.chk:hover a,.pg-v2 .box-row.dot:hover a{color:var(--green-dark)}
.pg-v2 .box-row.dot a{color:var(--teal)}
.pg-v2 .box .spec{margin:0}
.pg-v2 .box .spec tr:nth-child(odd){background:#FAFCFD}
.pg-v2 .box .spec th,.pg-v2 .box .spec td{padding:13px 22px}
.pg-v2 .box .sec-act{padding:18px 22px 22px}

/* ---- Numbered row stack ---- */
.pg-v2 .numrows{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:8px;overflow:hidden;counter-reset:fvrow}
.pg-v2 .numrows.two{grid-template-columns:1fr 1fr}
.pg-v2 .numrows > *{position:relative;display:flex;gap:16px;align-items:flex-start;background:#fff;padding:20px 22px 22px;counter-increment:fvrow;color:inherit;transition:background .2s}
.pg-v2 .numrows > *::before{content:counter(fvrow,decimal-leading-zero);font-family:var(--mono);font-size:12px;font-weight:600;color:var(--teal);padding-top:3px;min-width:24px}
.pg-v2 .numrows .txt{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.pg-v2 .numrows .k{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pg-v2 .numrows b,.pg-v2 .numrows h3{font-family:var(--grot);font-weight:600;font-size:16.5px;color:var(--ink-2);line-height:1.3;margin:0;transition:color .2s}
.pg-v2 .numrows p,.pg-v2 .numrows small{font-size:14.5px;line-height:1.55;color:var(--text-2);margin:0}
.pg-v2 .numrows .go{margin-top:6px;font-size:14px;font-weight:600;color:#109C56;display:inline-flex;gap:8px;align-items:center}
.pg-v2 .numrows > a:hover{background:#F7FBF9}
.pg-v2 .numrows > a:hover h3,.pg-v2 .numrows > a:hover b{color:var(--green-dark)}
.pg-v2 .numrows > a:hover .go{--arrowX:4px}

/* ---- Mini tiles (one can be highlighted) ---- */
.pg-v2 .minitiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pg-v2 .minitiles.c3{grid-template-columns:repeat(3,1fr)}
.pg-v2 .minitiles.c5{grid-template-columns:repeat(5,1fr)}
.pg-v2 .minitile{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line-2);border-radius:8px;padding:20px;background:#fff;color:inherit;transition:border-color .2s,transform .25s var(--ease),box-shadow .25s var(--ease),background .2s}
.pg-v2 .minitile b{font-family:var(--grot);font-weight:600;font-size:17px;color:var(--ink-2);line-height:1.3}
.pg-v2 .minitile small{font-size:13.5px;line-height:1.45;color:var(--muted)}
.pg-v2 .minitile .go{margin-top:auto;padding-top:10px;font-size:13.5px;font-weight:600;color:#109C56;display:inline-flex;gap:8px;align-items:center}
.pg-v2 .minitile.hl{border-color:var(--green);background:#F5FBF7}
.pg-v2 a.minitile:hover{border-color:var(--green);transform:translateY(-3px);box-shadow:0 18px 36px -22px rgba(8,36,58,.28)}
.pg-v2 a.minitile:hover .go{--arrowX:4px}
.pg-v2 .minitile.stat{text-align:center;padding:24px 18px;gap:8px}
.pg-v2 .minitile .lbl{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.pg-v2 .minitile .val{font-family:var(--grot);font-weight:700;font-size:24px;color:var(--ink);letter-spacing:-.01em}

/* ---- Plain cards (mono context label, no numeral) ---- */
.pg-v2 .plain{display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:8px;padding:26px 24px 28px;background:#fff;color:inherit;transition:border-color .2s,box-shadow .25s var(--ease),transform .25s var(--ease)}
.pg-v2 .plain .k{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.pg-v2 .plain h3{font-family:var(--grot);font-weight:600;font-size:20px;letter-spacing:-.01em;line-height:1.25;color:var(--ink-2);margin:12px 0 0;transition:color .2s}
.pg-v2 .plain p{font-size:14.5px;line-height:1.55;color:var(--text-2);margin:10px 0 0}
.pg-v2 .plain .go{margin-top:auto;padding-top:14px;font-size:14px;font-weight:600;color:#109C56;display:inline-flex;gap:8px;align-items:center}
.pg-v2 a.plain:hover{border-color:var(--green);box-shadow:0 18px 36px -22px rgba(8,36,58,.28);transform:translateY(-3px)}
.pg-v2 a.plain:hover h3{color:var(--green-dark)}
.pg-v2 a.plain:hover .go{--arrowX:4px}

/* ---- Index list rows (hairline reading list) ---- */
.pg-v2 .rows{border-top:1px solid var(--line-2)}
.pg-v2 .row-item{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 6px;border-bottom:1px solid var(--line-2);color:inherit;transition:background .2s,padding .2s var(--ease)}
.pg-v2 a.row-item:hover{background:#F4F8FA;padding-left:14px}
.pg-v2 .row-item .t{display:flex;flex-direction:column;gap:5px;min-width:0}
.pg-v2 .row-item b{font-family:var(--grot);font-weight:600;font-size:16.5px;color:var(--ink-2);line-height:1.35;transition:color .2s}
.pg-v2 a.row-item:hover b{color:var(--green-dark)}
.pg-v2 .row-item small{font-size:14px;color:var(--text-2);line-height:1.5}
.pg-v2 .row-item .k{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.pg-v2 .row-item .tag{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;flex-shrink:0}
.pg-v2 .row-item .go{font-size:14px;font-weight:600;color:#109C56;white-space:nowrap;flex-shrink:0;display:inline-flex;gap:8px;align-items:center}
.pg-v2 a.row-item:hover .go{--arrowX:4px}

/* ---- Timeline (dots on a line, no boxes) ---- */
.pg-v2 .timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);padding-top:4px;counter-reset:fvtl}
.pg-v2 .timeline.c5{grid-template-columns:repeat(5,1fr)}
.pg-v2 .timeline.c6{grid-template-columns:repeat(6,1fr)}
.pg-v2 .timeline::before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--green),var(--teal));opacity:.35;transform:scaleX(0);transform-origin:left;transition:transform 1.6s .2s var(--ease)}
.pg-v2 .timeline.is-in::before{transform:scaleX(1)}
.pg-v2 .timeline .step{position:relative;overflow:visible;background:none;border:none;border-radius:0;padding:32px 0 0;box-shadow:none;counter-increment:fvtl}
.pg-v2 .timeline .step::before{content:"";position:absolute;left:0;right:auto;top:4px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--green);transform:none;transition:transform .3s var(--ease),background .3s}
.pg-v2 .timeline .step:nth-child(even)::before{border-color:var(--teal)}
.pg-v2 .timeline .step:hover{transform:none;box-shadow:none}
.pg-v2 .timeline .step:hover::before{transform:scale(1.25);background:var(--tint-green)}
.pg-v2 .timeline .step .no{background:none;padding:0}
.pg-v2 .timeline .step b{font-size:18px;margin:10px 0 6px}
.pg-v2 .timeline .step small{font-size:14px;color:var(--text-2)}
.pg-v2 .timeline .step ul{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:var(--text-2)}
.pg-v2 .timeline .step li{position:relative;padding-left:14px}
.pg-v2 .timeline .step li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--mint)}

/* ── Workflow timeline — polished "flow" variant (Industry) ─────────── */
.pg-v2 .timeline.flow{padding-top:10px;gap:clamp(12px,1.5vw,20px);align-items:stretch}
.pg-v2 .timeline.flow::before{top:30px;height:3px;left:6%;right:6%;opacity:1;background:linear-gradient(90deg,var(--green),var(--teal));border-radius:3px}
.pg-v2 .timeline.flow .step{display:flex;flex-direction:column;padding:66px 16px 20px;background:#fff;border:1px solid var(--line-2);border-top:3px solid var(--green);border-radius:16px;box-shadow:0 10px 26px rgba(11,37,69,.06);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.pg-v2 .timeline.flow .step:nth-child(even){border-top-color:var(--teal)}
.pg-v2 .timeline.flow .step::before{display:none}
.pg-v2 .timeline.flow .step .no{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:0;line-height:1;z-index:2;background:linear-gradient(150deg,var(--green),var(--teal));color:#fff;font-size:15px;font-weight:800;letter-spacing:.02em;box-shadow:0 8px 18px rgba(31,161,83,.30);border:4px solid #fff}
.pg-v2 .timeline.flow .step .no::before{display:none}
.pg-v2 .timeline.flow .step:nth-child(even) .no{background:linear-gradient(150deg,var(--teal),var(--green));box-shadow:0 8px 18px rgba(11,168,188,.30)}
.pg-v2 .timeline.flow .step b{text-align:center;font-size:16px;margin:0 0 10px;color:var(--ink);font-weight:800;letter-spacing:-.01em}
.pg-v2 .timeline.flow .step small{display:block;text-align:center;font-size:13.5px;line-height:1.55;color:var(--body);margin:0}
.pg-v2 .timeline.flow .step ul{gap:10px;margin:0}
.pg-v2 .timeline.flow .step li{padding-left:23px;font-size:13px;line-height:1.35;font-weight:600;color:var(--body)}
.pg-v2 .timeline.flow .step li::before{content:"";left:0;top:0;width:16px;height:16px;border-radius:50%;background:#E7F6EE;border:1px solid #BFE6CE}
.pg-v2 .timeline.flow .step:nth-child(even) li::before{background:#E5F6F8;border-color:#B6E6EC}
.pg-v2 .timeline.flow .step li::after{content:"";position:absolute;left:5px;top:5px;width:6px;height:3px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.pg-v2 .timeline.flow .step:nth-child(even) li::after{border-color:var(--teal)}
.pg-v2 .timeline.flow .step:hover{transform:translateY(-7px);box-shadow:0 22px 44px rgba(11,37,69,.14);border-color:var(--line-2)}
.pg-v2 .timeline.flow .step:hover .no{transform:translateX(-50%) scale(1.08)}
@media (max-width:720px){
  .pg-v2 .timeline.flow{gap:14px}
  .pg-v2 .timeline.flow::before{display:none}
  .pg-v2 .timeline.flow .step{padding:58px 16px 18px}
}

/* ---- Navy feature band (in-page consultation) ---- */
.pg-v2 .band{position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,3.75vw,48px);align-items:center;background:linear-gradient(135deg,#0E3A5C 0%,#08243A 100%);border-radius:12px;padding:clamp(26px,4vw,48px) clamp(24px,4vw,52px);color:#fff;margin-top:28px}
.pg-v2 .band::before{content:"";position:absolute;right:-140px;top:-160px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(23,176,188,.32),transparent 70%);pointer-events:none}
.pg-v2 .band::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000);pointer-events:none}
.pg-v2 .band > *{position:relative;z-index:1}
.pg-v2 .band h3{font-family:var(--grot);font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.15;letter-spacing:-.02em;color:#fff;margin:0}
.pg-v2 .band p{font-size:15.5px;line-height:1.6;color:#B4CDDB;margin:12px 0 0}
.pg-v2 .band .acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.pg-v2 .band .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.34);color:#fff}
.pg-v2 .band .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}

/* ---- Light consultation panel ---- */
.pg-v2 .panel-card{background:#F4F8FA;border:1px solid var(--line-2);border-radius:8px;padding:clamp(26px,3.4vw,36px) clamp(20px,2.8vw,34px)}
.pg-v2 .panel-card .mono{color:var(--muted)}
.pg-v2 .panel-card h3{font-family:var(--grot);font-weight:600;font-size:clamp(19px,2.2vw,26px);line-height:1.15;letter-spacing:-.02em;color:var(--ink-2);margin:14px 0 0}
.pg-v2 .panel-card p{font-size:15.5px;line-height:1.6;color:var(--text-2);margin:14px 0 0}
.pg-v2 .panel-card ul{margin:20px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;font-size:15px;font-weight:600;color:var(--body)}
.pg-v2 .panel-card li{position:relative;padding-left:16px}
.pg-v2 .panel-card li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--green)}
.pg-v2 .panel-card .btn{margin-top:24px}

/* ---- Case-study cards ---- */
.pg-v2 .cases{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pg-v2 .case{display:grid;grid-template-columns:170px 1fr;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:#fff;transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.pg-v2 .case:hover{box-shadow:var(--lift);transform:translateY(-3px)}
.pg-v2 .case .k{display:flex;flex-direction:column;justify-content:space-between;gap:18px;background:linear-gradient(160deg,#0B2545,#0E3A5C);color:#5FD6DF;padding:22px 18px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.6}
.pg-v2 .case .k::after{content:"Case study";font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.55)}
.pg-v2 .case .body{padding:24px 26px 26px;display:flex;flex-direction:column}
.pg-v2 .case h3{font-family:var(--grot);font-weight:600;font-size:19px;line-height:1.3;letter-spacing:-.01em;color:var(--ink-2);margin:0}
.pg-v2 .case p{font-size:14.5px;line-height:1.55;color:var(--text-2);margin:10px 0 0}
.pg-v2 .case .go{margin-top:auto;padding-top:16px;font-size:14px;font-weight:600;color:#109C56;display:inline-flex;gap:8px;align-items:center}
.pg-v2 .case:hover .go{--arrowX:4px}

/* ---- Register record cards ---- */
.pg-v2 .records{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.pg-v2 .record{border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:#fff;transition:border-color .2s}
.pg-v2 .record:hover{border-color:var(--edge-hover)}
.pg-v2 .record .rec-hd{padding:20px 24px;border-bottom:1px solid var(--line-2);background:#F8FBFD;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.pg-v2 .record .k{display:inline-flex;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#0C8148;background:#DDF3E7;border-radius:3px;padding:4px 8px}
.pg-v2 .record h3{font-family:var(--grot);font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--ink-2);margin:0}
.pg-v2 .record .spec{margin:0}
.pg-v2 .record .spec tr{border-bottom:1px solid var(--edge)}
.pg-v2 .record .spec tr:last-child{border-bottom:none}
.pg-v2 .record .spec tr:nth-child(odd){background:none}
.pg-v2 .record .spec th{width:40%;padding:12px 24px}
.pg-v2 .record .spec td{padding:12px 24px}

/* FAQ uses the refined card accordion defined above (.pg-v2 .faq, ~L1001):
   bordered rounded cards, hover, circular +/× toggle. The earlier flat-line
   override was removed so every FAQ reads as a clean single-column accordion —
   one answer open at a time — rather than a grid of expanded boxes. */
.pg-v2 .faq .a{max-width:760px}

/* ---- Responsive ---- */
@media (max-width:1100px){
  .pg-v2 .cells.c5,.pg-v2 .cells.c6,.pg-v2 .minitiles.c5,.pg-v2 .timeline.c5,.pg-v2 .timeline.c6{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:980px){
  .pg-v2 .cells.c3,.pg-v2 .cells.c4,.pg-v2 .cells.c5,.pg-v2 .cells.c6,.pg-v2 .cells.auto,.pg-v2 .minitiles,.pg-v2 .minitiles.c3,.pg-v2 .minitiles.c5,.pg-v2 .timeline,.pg-v2 .timeline.c5,.pg-v2 .timeline.c6,.pg-v2 .numrows.two,.pg-v2 .cases,.pg-v2 .records{grid-template-columns:repeat(2,1fr)}
  .pg-v2 .sec-split,.pg-v2 .two-col,.pg-v2 .band{grid-template-columns:1fr}
  .pg-v2 .sec-split > .sec-head{position:static;margin-bottom:8px}
  .pg-v2 .band .acts{justify-content:flex-start}
  .pg-v2 .prose.cols{columns:1}
  .pg-v2 .timeline::before{display:none}
}
@media (max-width:600px){
  .pg-v2 .cells,.pg-v2 .cells.c2,.pg-v2 .cells.c3,.pg-v2 .cells.c4,.pg-v2 .cells.c5,.pg-v2 .cells.c6,.pg-v2 .cells.auto,.pg-v2 .minitiles,.pg-v2 .minitiles.c3,.pg-v2 .minitiles.c5,.pg-v2 .timeline,.pg-v2 .timeline.c5,.pg-v2 .timeline.c6,.pg-v2 .numrows.two,.pg-v2 .cases,.pg-v2 .records{grid-template-columns:1fr}
  .pg-v2 .case{grid-template-columns:1fr}
  .pg-v2 .case .k{flex-direction:row;align-items:center;justify-content:space-between;padding:14px 18px}
  .pg-v2 .glance-stats > div{border-left:none;padding:12px 14px;text-align:center}
  .pg-v2 .row-item{flex-wrap:wrap}
}

/* ==========================================================================
   Product card v2 — reference: option-1 product listing card (fixed image
   with overlaid mono badge, mono brand, spec rows, "View product →") and
   option-2 shelf card (compact bordered card with a featured variant).
   Overrides the earlier .pcard rules above.
   ========================================================================== */
.pg-v2 .pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-2);border-left:1px solid var(--line-2);border-radius:10px;overflow:hidden;color:inherit;transition:border-color .25s,box-shadow .3s var(--ease),transform .3s var(--ease)}
.pg-v2 .grid > .pcard:nth-child(even){border-left-color:var(--line-2)}
.pg-v2 .pcard:hover,.pg-v2 .grid > .pcard:nth-child(even):hover{border-color:var(--green);border-left-color:var(--green);box-shadow:0 18px 36px -22px rgba(8,36,58,.28);transform:translateY(-3px)}
.pg-v2 .pcard .img{position:relative;aspect-ratio:auto;height:180px;flex:0 0 auto;display:block;background:linear-gradient(180deg,#F8FBFD,#EEF4F8);border-bottom:1px solid var(--edge);overflow:hidden}
.pg-v2 .pcard .img img{width:100%;height:100%;object-fit:cover;padding:0;display:block;transition:transform .6s var(--ease)}
.pg-v2 .pcard:hover .img img{transform:scale(1.05)}
.pg-v2 .pcard .img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,36,58,0) 60%,rgba(8,36,58,.16));pointer-events:none}
.pg-v2 .pcard .tag{position:absolute;top:12px;left:12px;z-index:1;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);background:rgba(255,255,255,.94);border-radius:3px;padding:4px 8px;box-shadow:0 6px 14px -8px rgba(8,36,58,.35)}
.pg-v2 .pcard .body{display:flex;flex-direction:column;flex:1;gap:0;padding:20px 22px 22px}
.pg-v2 .pcard .brand,.pg-v2 .grid > .pcard:nth-child(even) .brand{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);background:none;padding:0;align-self:auto;display:block}
.pg-v2 .pcard h3{font-family:var(--grot);font-weight:600;font-size:18.5px;line-height:1.25;letter-spacing:-.01em;color:var(--ink-2);margin:8px 0 0;transition:color .2s}
.pg-v2 .pcard:hover h3{color:var(--green-dark)}
.pg-v2 .pcard .specs{display:flex;flex-direction:column;gap:7px;margin-top:16px;padding-top:14px;border-top:1px solid var(--edge)}
.pg-v2 .pcard .specs > span{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px}
.pg-v2 .pcard .specs i{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);flex-shrink:0}
.pg-v2 .pcard .specs b{font-weight:600;color:var(--text-2);text-align:right}
.pg-v2 .pcard .meta{display:none}
.pg-v2 .pcard .go{margin-top:auto;padding:18px 0 0;border-top:none;display:inline-flex;justify-content:flex-start;align-items:center;gap:8px;font-family:var(--grot);font-size:14.5px;font-weight:600;color:#109C56}
.pg-v2 .pcard .go::after,.pg-v2 .grid > .pcard:nth-child(even) .go::after{font-size:inherit;font-weight:600;color:inherit;line-height:inherit}
.pg-v2 .pcard:hover .go{--arrowX:4px}
.pg-v2 .pcard.featured,.pg-v2 .grid > .pcard.featured:nth-child(even){border-color:var(--green);border-left-color:var(--green);background:#F5FBF7}
.pg-v2 .pcard.featured .img{border-bottom-color:#D6EEDF}
.pg-v2 .pcard.featured .tag{background:var(--green);color:#fff}
.pg-v2 .pcard.featured .specs{border-top-color:#D6EEDF}
@media (max-width:600px){
  .pg-v2 .pcard .img{height:200px}
}

/* ==========================================================================
   Pattern upgrades v3 — feature tiles with icon medallions + cursor
   spotlight, "versus" comparison panel, editorial article rows.
   Overrides the earlier .tile / .box / .rows rules above.
   ========================================================================== */

/* ---- Feature tiles ---- */
.pg-v2 .tile{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;min-height:0;background:radial-gradient(240px circle at 100% 0%,rgba(62,217,139,.14),transparent 70%) #fff;border:1px solid var(--line-2);border-radius:18px;padding:26px 24px 24px;color:inherit;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s}
.pg-v2 .grid > .tile:nth-child(even){background:radial-gradient(240px circle at 100% 0%,rgba(11,168,188,.13),transparent 70%) #fff;border-color:var(--line-2)}
.pg-v2 .tile::before{content:"";position:absolute;inset:0;background:radial-gradient(280px circle at var(--mx,25%) var(--my,10%),rgba(62,217,139,.18),transparent 62%);opacity:0;transition:opacity .4s;pointer-events:none}
.pg-v2 .grid > .tile:nth-child(even)::before{background:radial-gradient(280px circle at var(--mx,25%) var(--my,10%),rgba(11,168,188,.16),transparent 62%)}
.pg-v2 .tile:hover::before{opacity:1}
.pg-v2 .tile::after{content:"\2197";position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line-2);color:var(--green);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;box-shadow:none;opacity:1;transform:none;transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.pg-v2 .grid > .tile:nth-child(even)::after{color:var(--teal)}
.pg-v2 .tile:hover{transform:translateY(-6px);border-color:var(--edge-hover);box-shadow:0 26px 50px -24px rgba(8,28,56,.3)}
.pg-v2 .tile:hover::after{background:var(--green);border-color:var(--green);color:#fff;transform:translate(2px,-2px)}
.pg-v2 .grid > .tile:nth-child(even):hover::after{background:var(--teal);border-color:var(--teal);color:#fff}
.pg-v2 div.tile::after{display:none}
.pg-v2 .tile > *{position:relative;z-index:1}
.pg-v2 .tile .ic{width:50px;height:50px;border-radius:15px;background:linear-gradient(145deg,var(--tint-green),#fff);border:1px solid #D2ECDD;color:var(--green);display:flex;align-items:center;justify-content:center;margin-bottom:6px;box-shadow:0 10px 22px -14px rgba(31,161,83,.45);transition:transform .4s var(--ease),box-shadow .4s}
.pg-v2 .grid > .tile:nth-child(even) .ic{background:linear-gradient(145deg,var(--tint-teal),#fff);border-color:#CDE8EE;color:var(--teal);box-shadow:0 10px 22px -14px rgba(11,168,188,.45)}
.pg-v2 .tile .ic svg{width:24px;height:24px}
.pg-v2 .tile:hover .ic{transform:translateY(-3px) rotate(-6deg) scale(1.05);box-shadow:0 16px 28px -14px rgba(31,161,83,.55)}
.pg-v2 .tile b{font-family:var(--grot);font-weight:600;font-size:19px;letter-spacing:-.012em;line-height:1.25;color:var(--ink-2);padding-right:0}
.pg-v2 .tile small{font-size:14px;line-height:1.55;color:var(--text-2);font-weight:500}
.pg-v2 .tile .pills{display:flex;flex-wrap:wrap;gap:6px}
.pg-v2 .tile .pills span{font-size:12px;font-weight:700;letter-spacing:.01em;line-height:1.35;color:var(--ink);background:#F3F7FA;border:1px solid var(--line);border-radius:13px;padding:4px 11px;transition:background .25s,border-color .25s,color .25s}
.pg-v2 .tile:hover .pills span{background:#fff;border-color:var(--edge-hover)}
.pg-v2 .tile .go{margin-top:auto;padding-top:10px;font-family:var(--grot);font-size:14px;font-weight:600;color:#109C56;display:inline-flex;align-items:center;gap:8px}
.pg-v2 .grid > .tile:nth-child(even) .go{color:var(--teal)}
.pg-v2 .tile:hover .go{color:var(--green-dark);--arrowX:4px}

/* ---- Versus comparison panel (two list boxes side by side) ---- */
.pg-v2 .versus{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.pg-v2 .versus::after{content:attr(data-vs);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:#fff;border:1px solid var(--line-2);box-shadow:0 14px 30px -14px rgba(8,28,56,.45);display:flex;align-items:center;justify-content:center;font-family:var(--grot);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);z-index:2;transition:opacity .5s var(--ease) .5s,transform .5s var(--ease) .5s}
.pg-v2.js .versus:not(.is-in)::after{opacity:0;transform:translate(-50%,-50%) scale(.4)}
.pg-v2 .versus .box{position:relative;overflow:hidden;border-radius:18px;display:flex;flex-direction:column}
.pg-v2 .versus .box::before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;pointer-events:none;filter:blur(30px)}
.pg-v2 .versus .fit{background:linear-gradient(160deg,#F7FCF9 0%,#EAF6EF 100%);border-color:#CDEBDA}
.pg-v2 .versus .fit::before{right:-140px;top:-160px;background:radial-gradient(circle,rgba(62,217,139,.35),transparent 70%)}
.pg-v2 .versus .fit .box-hd{background:transparent;border-bottom-color:#D6EEDF;color:var(--green-dark)}
.pg-v2 .versus .fit .box-row{border-bottom-color:#D6EEDF;background:transparent}
.pg-v2 .versus .fit .box-row.chk::before{background:var(--green);color:#fff;box-shadow:0 6px 14px -6px rgba(31,161,83,.6)}
.pg-v2 .versus .fit .box-row.dot::before{background:var(--green);box-shadow:0 0 0 4px rgba(31,161,83,.16)}
.pg-v2 .versus .alt{background:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.5px) 0 0/18px 18px,linear-gradient(160deg,#0B2545 0%,#0E3A5C 100%);border-color:#0E3A5C;color:#DCEBFA}
.pg-v2 .versus .alt::before{left:-140px;bottom:-180px;background:radial-gradient(circle,rgba(11,168,188,.4),transparent 70%)}
.pg-v2 .versus .alt .box-hd{background:rgba(255,255,255,.04);border-bottom-color:rgba(255,255,255,.1);color:var(--sky)}
.pg-v2 .versus .alt .box-hd span{color:#B4CDDB}
.pg-v2 .versus .alt .box-row{border-bottom-color:rgba(255,255,255,.1);color:#DCEBFA;background:transparent}
.pg-v2 .versus .alt .box-row.dot::before{background:var(--sky);box-shadow:0 0 0 4px rgba(79,217,232,.18)}
.pg-v2 .versus .alt .box-row.chk::before{background:rgba(62,217,139,.16);border:1px solid rgba(62,217,139,.45);color:var(--mint-2)}
.pg-v2 .versus .alt .box-row a{color:var(--mint-2);border-bottom:1px solid rgba(62,217,139,.35);transition:color .2s,border-color .2s}
.pg-v2 .versus .alt .box-row:hover a{color:#fff;border-bottom-color:#fff}
.pg-v2 .versus .alt .box-row b{color:#fff}
.pg-v2 .versus .alt .box-row small{color:#B4CDDB}
.pg-v2 .versus .box-hd{padding:18px 26px;font-size:11.5px}
.pg-v2 .versus .box-row{padding:15px 26px;position:relative}
.pg-v2 .versus .box-row.chk,.pg-v2 .versus .box-row.dot{font-size:15px}
.pg-v2 .versus .box-row:last-child{border-bottom:none;padding-bottom:22px}
.pg-v2 .versus .box-row.chk:hover,.pg-v2 .versus .box-row.dot:hover{background:rgba(255,255,255,.35)}
.pg-v2 .versus .alt .box-row.chk:hover,.pg-v2 .versus .alt .box-row.dot:hover{background:rgba(255,255,255,.05)}

/* ---- Editorial article rows ---- */
.pg-v2 .rows{border-top:1px solid var(--line-2);counter-reset:fvart}
.pg-v2 .row-item{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:22px;padding:22px 16px 22px 10px;border-bottom:1px solid var(--line-2);counter-increment:fvart;color:inherit;transition:background .3s,padding .3s var(--ease),box-shadow .3s}
.pg-v2 .row-item::before{content:counter(fvart,decimal-leading-zero);font-family:var(--grot);font-weight:700;font-size:40px;line-height:1;letter-spacing:-.03em;color:#E4EDF2;transition:color .3s}
.pg-v2 a.row-item:hover{background:linear-gradient(90deg,#F4FAF7,rgba(244,250,247,0) 70%);padding-left:20px;box-shadow:inset 3px 0 0 var(--green)}
.pg-v2 a.row-item:hover::before{color:var(--green)}
.pg-v2 .row-item .t{gap:6px}
.pg-v2 .row-item .k{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.pg-v2 .row-item b{font-family:var(--grot);font-weight:600;font-size:19px;line-height:1.3;letter-spacing:-.012em;color:var(--ink-2);transition:color .2s}
.pg-v2 a.row-item:hover b{color:var(--green-dark)}
.pg-v2 .row-item small{font-size:14.5px;line-height:1.55;color:var(--text-2)}
.pg-v2 .row-item .go{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font-family:var(--grot);font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;transition:background .25s,color .25s,border-color .25s,transform .3s var(--ease)}
.pg-v2 a.row-item:hover .go{background:var(--green);border-color:var(--green);color:#fff;transform:translateX(2px);--arrowX:4px}
.pg-v2 .row-item .tag{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}

/* ---- Cursor spotlight on other card-like patterns (position set by site.js) ---- */
.pg-v2 .minitile{position:relative;overflow:hidden}
.pg-v2 .minitile::after{content:"";position:absolute;inset:0;background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),rgba(62,217,139,.14),transparent 62%);opacity:0;transition:opacity .35s;pointer-events:none}
.pg-v2 a.minitile:hover::after{opacity:1}
.pg-v2 .minitile > *{position:relative;z-index:1}
.pg-v2 .plain{position:relative;overflow:hidden}
.pg-v2 .plain::after{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(11,168,188,.14),transparent 62%);opacity:0;transition:opacity .35s;pointer-events:none}
.pg-v2 a.plain:hover::after{opacity:1}
.pg-v2 .plain > *{position:relative;z-index:1}

/* ---- Responsive ---- */
@media (max-width:980px){
  .pg-v2 .versus{grid-template-columns:1fr}
  .pg-v2 .versus::after{display:none}
}
@media (max-width:600px){
  .pg-v2 .row-item{grid-template-columns:44px minmax(0,1fr);gap:14px;padding:18px 10px 18px 6px}
  .pg-v2 .row-item::before{font-size:30px}
  .pg-v2 .row-item .go{grid-column:2;justify-self:start}
  .pg-v2 .tile{padding:22px 20px 20px}
  .pg-v2 .versus .box-hd,.pg-v2 .versus .box-row{padding-left:20px;padding-right:20px}
}

/* v6 fix: inline link flow inside versus rows + trade-off callout */
.pg-v2 .versus .box-row.chk,.pg-v2 .versus .box-row.dot{display:block;position:relative;padding-left:58px}
.pg-v2 .versus .box-row.chk::before{position:absolute;left:26px;top:16px}
.pg-v2 .versus .box-row.dot::before{position:absolute;left:32px;top:22px;margin:0}
.pg-v2 .tradeoff{position:relative;background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:18px 24px 18px 62px;font-size:15px;line-height:1.65;color:var(--text-2)}
.pg-v2 .tradeoff::before{content:"i";position:absolute;left:22px;top:18px;width:24px;height:24px;border-radius:50%;background:var(--tint-teal);color:var(--teal);font-family:var(--grot);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.pg-v2 .tradeoff strong,.pg-v2 .tradeoff b{color:var(--ink)}
@media (max-width:600px){
  .pg-v2 .versus .box-row.chk,.pg-v2 .versus .box-row.dot{padding-left:50px}
  .pg-v2 .versus .box-row.chk::before{left:20px}
  .pg-v2 .versus .box-row.dot::before{left:26px}
  .pg-v2 .tradeoff{padding:16px 18px 16px 52px}
  .pg-v2 .tradeoff::before{left:16px;top:16px}
}

/* v6 fix: stronger row numerals on panel backgrounds */
.pg-v2 .row-item::before{color:#CBD9E3}

/* v6 fix: pack tile content to the top; larger single-glyph versus badges */
.pg-v2 .tile{justify-content:flex-start}
.pg-v2 .versus[data-vs="+"]::after,.pg-v2 .versus[data-vs="&"]::after{font-size:22px;letter-spacing:0;text-transform:none;padding-bottom:2px}

/* v6 fix: trade-off callout is a boxed element sized to the content column (the panel layout rule pads direct children with the page gutter) */
.pg-v2 .content > section.panel > .tradeoff{max-width:none;width:calc(min(100%,var(--maxw)) - 2*var(--pad));margin-left:auto;margin-right:auto;padding:18px 24px 18px 62px}
@media (max-width:600px){
  .pg-v2 .content > section.panel > .tradeoff{padding:16px 18px 16px 52px}
}


/* ==========================================================================
   Value-chain glance strip (.cells.chain) — elevated card, stage badges,
   chip lists and flow connectors between the stages.
   ========================================================================== */
.pg-v2 .cells.chain{border-radius:20px;padding-top:3px;background:linear-gradient(90deg,var(--green),var(--teal)) top/100% 3px no-repeat,var(--line-2);box-shadow:var(--shadow);overflow:hidden}
.pg-v2 .cells.chain .cell{padding:30px 32px 32px;background:#fff;transition:background .3s}
.pg-v2 .cells.chain .cell:hover{background:#FAFCFD}
.pg-v2 .cells.chain .cell::before{content:counter(fvcell,decimal-leading-zero);display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--tint-teal);color:var(--teal);font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.04em;margin-bottom:16px;transition:background .3s,color .3s,transform .35s var(--ease)}
.pg-v2 .cells.chain .cell:hover::before{background:var(--teal);color:#fff;transform:translateY(-2px)}
.pg-v2 .cells.chain .cell h4{font-family:var(--grot);font-size:19px;font-weight:600;letter-spacing:-.012em;text-transform:none;color:var(--ink-2);margin:0}
.pg-v2 .cells.chain .cell ul{margin:18px 0 0;display:flex;flex-direction:row;flex-wrap:wrap;gap:8px}
.pg-v2 .cells.chain .cell li{padding:7px 12px 7px 24px;border:1px solid var(--line-2);border-radius:999px;background:#F8FBFD;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3;transition:border-color .25s,background .25s,transform .25s var(--ease)}
.pg-v2 .cells.chain .cell li::before{left:11px;top:50%;transform:translateY(-50%);width:6px;height:6px;background:var(--green)}
.pg-v2 .cells.chain .cell li:hover{background:#fff;border-color:var(--edge-hover);transform:translateY(-1px)}
/* flow connectors on the dividers */
.pg-v2 .cells.chain .cell:not(:last-child)::after{content:"\2192";position:absolute;right:-17px;top:33px;width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid var(--line-2);color:var(--teal);font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px -10px rgba(8,28,56,.35);z-index:2;transition:background .3s,color .3s,border-color .3s}
.pg-v2 .cells.chain .cell:hover:not(:last-child)::after{background:var(--teal);border-color:var(--teal);color:#fff}
@media (max-width:980px){
  .pg-v2 .cells.chain,.pg-v2 .cells.chain.c3{grid-template-columns:1fr}
  .pg-v2 .cells.chain .cell:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-17px;transform:translateX(-50%) rotate(90deg)}
}
@media (max-width:600px){
  .pg-v2 .cells.chain .cell{padding:24px 20px 26px}
  .pg-v2 .cells.chain .cell h4{font-size:18px}
}


/* ==========================================================================
   Coverage matrix (industry testing requirements) — check chips, stage-
   numbered headers, row + column highlight, staggered pop-in.
   Overrides the earlier .matrix / table.mx rules above.
   ========================================================================== */
.pg-v2 .matrix{border-radius:18px;border:1px solid var(--line-2);background:#fff;box-shadow:0 26px 60px -32px rgba(8,28,56,.3);overflow:hidden;overflow-x:auto}
.pg-v2 .content > section.panel > .matrix{max-width:1040px;width:auto;padding:0;margin-left:max(var(--pad),calc((100% - var(--maxw)) / 2 + var(--pad)));margin-right:auto}
.pg-v2 table.mx{width:100%;min-width:560px;font-size:14px}
/* header row */
.pg-v2 table.mx thead{counter-reset:fvstage}
.pg-v2 table.mx thead th{padding:18px 20px 16px;background:linear-gradient(180deg,#F9FBFD,#F1F6F9);border-bottom:1px solid var(--line-2);font-size:10.5px;letter-spacing:.14em;color:var(--muted);white-space:nowrap}
.pg-v2 table.mx thead th:nth-child(n+2){counter-increment:fvstage;color:var(--ink);transition:color .2s}
.pg-v2 table.mx thead th:nth-child(n+2)::before{content:counter(fvstage,decimal-leading-zero);display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:var(--tint-teal);color:var(--teal);font-size:10px;letter-spacing:.04em;margin-right:9px;vertical-align:middle;transition:background .2s,color .2s}
/* hazard column */
.pg-v2 table.mx tbody th{font-family:var(--grot);font-weight:600;font-size:15.5px;letter-spacing:-.01em;color:var(--ink-2);padding:12px 24px;border-bottom:1px solid var(--edge);transition:color .2s,background .2s,box-shadow .2s}
.pg-v2 table.mx tbody tr:last-child th,.pg-v2 table.mx tbody tr:last-child td{border-bottom:none}
/* cells → chips (glyph text kept for assistive tech, hidden visually) */
.pg-v2 table.mx tbody td{position:relative;padding:9px 16px;border-bottom:1px solid var(--edge);font-size:0;line-height:normal;color:transparent;transition:background .2s}
.pg-v2 table.mx tbody td::before{content:"";display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:11px;font-size:14px;line-height:1;vertical-align:middle;box-sizing:border-box;transition:transform .3s var(--ease),background .25s,color .25s,box-shadow .3s,border-color .25s}
.pg-v2 table.mx td[data-cell]{cursor:pointer}
.pg-v2 table.mx td[data-cell]::before{content:"\2713";background:var(--tint-green);border:1px solid #CFEBDB;color:var(--green);font-weight:900}
.pg-v2 table.mx td:not([data-cell])::before{border:1px dashed #D5E1EA;background:transparent}
.pg-v2 table.mx td:not([data-cell])::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;background:#CBD8E2;transform:translate(-50%,-50%)}
.pg-v2 table.mx td[data-cell]:hover{background:transparent;color:transparent}
.pg-v2 table.mx td[data-cell]:hover::before{background:var(--green);border-color:var(--green);color:#fff;transform:translateY(-2px) scale(1.1);box-shadow:0 12px 22px -10px rgba(31,161,83,.7)}
.pg-v2 table.mx td[data-cell]:focus-visible{outline:none}
.pg-v2 table.mx td[data-cell]:focus-visible::before{box-shadow:0 0 0 3px rgba(31,161,83,.35)}
/* row highlight */
.pg-v2 table.mx tbody tr:hover th,.pg-v2 table.mx tbody tr:hover td{background:#F6FAF8}
.pg-v2 table.mx tbody tr:hover th{color:var(--green-dark);box-shadow:inset 3px 0 0 var(--green)}
/* column highlight */
.pg-v2 table.mx:has(tbody td:nth-child(2):hover) :is(thead th,tbody td):nth-child(2),
.pg-v2 table.mx:has(tbody td:nth-child(3):hover) :is(thead th,tbody td):nth-child(3),
.pg-v2 table.mx:has(tbody td:nth-child(4):hover) :is(thead th,tbody td):nth-child(4){background:#F3FAF6}
.pg-v2 table.mx:has(tbody td:nth-child(2):hover) thead th:nth-child(2),
.pg-v2 table.mx:has(tbody td:nth-child(3):hover) thead th:nth-child(3),
.pg-v2 table.mx:has(tbody td:nth-child(4):hover) thead th:nth-child(4){color:var(--green-dark)}
.pg-v2 table.mx:has(tbody td:nth-child(2):hover) thead th:nth-child(2)::before,
.pg-v2 table.mx:has(tbody td:nth-child(3):hover) thead th:nth-child(3)::before,
.pg-v2 table.mx:has(tbody td:nth-child(4):hover) thead th:nth-child(4)::before{background:var(--green);color:#fff}
/* staggered pop-in when the matrix reveals */
@keyframes fv-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.pg-v2 table.mx tbody tr:nth-child(1){--r:0s}.pg-v2 table.mx tbody tr:nth-child(2){--r:.05s}.pg-v2 table.mx tbody tr:nth-child(3){--r:.1s}.pg-v2 table.mx tbody tr:nth-child(4){--r:.15s}.pg-v2 table.mx tbody tr:nth-child(5){--r:.2s}.pg-v2 table.mx tbody tr:nth-child(6){--r:.25s}.pg-v2 table.mx tbody tr:nth-child(7){--r:.3s}.pg-v2 table.mx tbody tr:nth-child(n+8){--r:.35s}
.pg-v2 table.mx tbody td:nth-child(2){--c:.1s}.pg-v2 table.mx tbody td:nth-child(3){--c:.18s}.pg-v2 table.mx tbody td:nth-child(4){--c:.26s}.pg-v2 table.mx tbody td:nth-child(n+5){--c:.34s}
.pg-v2.js .matrix:not(.is-in) td::before{opacity:0}
.pg-v2.js .matrix.is-in td::before{animation:fv-pop .55s var(--ease) backwards;animation-delay:calc(.25s + var(--r,0s) + var(--c,0s))}
@media (prefers-reduced-motion:reduce){
  .pg-v2.js .matrix td::before{animation:none!important;opacity:1}
}

/* v7 fix: denser matrix with faint column separators */
.pg-v2 .content > section.panel > .matrix{max-width:960px}
.pg-v2 table.mx thead th:nth-child(n+2),.pg-v2 table.mx tbody td{border-left:1px solid var(--edge)}
.pg-v2 table.mx tbody td::before{width:38px;height:38px;border-radius:12px}

/* Phone: one hazard column and three stages is a known shape, so lay it out
   instead of letting it crush. Fixed table layout, hazard 40%, the stages
   share the rest; 28px chips; headings wrap to two short lines; no stage
   badges. Fits a 360px phone without scrolling — the wrapper still scrolls
   for anything narrower. Placed after the v7 rules so it wins the cascade. */
@media (max-width:600px){
  .pg-v2 .matrix{-webkit-overflow-scrolling:touch;border-radius:14px}
  .pg-v2 table.mx{min-width:0;table-layout:fixed;font-size:13px}
  .pg-v2 table.mx thead th:first-child,.pg-v2 table.mx tbody th{width:40%}
  .pg-v2 table.mx thead th{padding:11px 6px 10px;font-size:9.5px;letter-spacing:.04em;line-height:1.3;white-space:normal;vertical-align:bottom}
  .pg-v2 table.mx thead th:first-child{padding-left:12px}
  .pg-v2 table.mx thead th:nth-child(n+2)::before{display:none}
  .pg-v2 table.mx tbody th{padding:10px 12px;font-size:13.5px;line-height:1.25;overflow-wrap:anywhere;hyphens:auto}
  .pg-v2 table.mx tbody td{padding:8px 4px}
  .pg-v2 table.mx tbody td::before{width:28px;height:28px;border-radius:8px;font-size:11px}
  .pg-v2 table.mx td:not([data-cell])::after{width:10px}
  .pg-v2 table.mx tbody tr:hover th{box-shadow:none}
}


/* ==========================================================================
   Evidence dossier (.split.evidence) — navy slab carrying the statement,
   with a white "record" card holding the checklist and CTA.
   ========================================================================== */
.pg-v2 .split.evidence{position:relative;overflow:hidden;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.5vw,72px);align-items:center;padding:clamp(30px,4vw,56px) clamp(26px,4vw,60px);border-radius:26px;background:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.5px) 0 0/18px 18px,linear-gradient(135deg,#0B2545 0%,#0E3A5C 100%);color:#DCEBFA;box-shadow:0 34px 70px -40px rgba(8,28,56,.55)}
.pg-v2 .split.evidence::before{content:"";position:absolute;width:520px;height:520px;left:-200px;bottom:-300px;border-radius:50%;background:radial-gradient(circle,rgba(11,168,188,.45),transparent 68%);filter:blur(24px);pointer-events:none}
.pg-v2 .split.evidence::after{content:"";position:absolute;width:420px;height:420px;right:-160px;top:-260px;border-radius:50%;background:radial-gradient(circle,rgba(62,217,139,.28),transparent 68%);filter:blur(24px);pointer-events:none}
.pg-v2 .split.evidence > *{position:relative;z-index:1}
/* statement */
.pg-v2 .split.evidence > .prose{max-width:none;position:relative;padding-left:clamp(22px,2.4vw,30px);font-size:clamp(17px,1.35vw,19.5px);line-height:1.72;font-weight:500;color:#E6F1FA}
.pg-v2 .split.evidence > .prose::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--mint-2),var(--sky))}
/* record card */
.pg-v2 .split.evidence .panel-card{position:relative;background:#fff;border:1px solid rgba(255,255,255,.6);border-radius:20px;padding:clamp(26px,2.8vw,36px) clamp(22px,2.6vw,34px) clamp(24px,2.6vw,32px);box-shadow:0 40px 80px -36px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.pg-v2 .split.evidence .panel-card:hover{transform:translateY(-4px);box-shadow:0 50px 90px -40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1)}
.pg-v2 .split.evidence .panel-card::before{content:"\2713";position:absolute;top:-16px;right:26px;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--teal));color:#fff;font-size:18px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 26px -12px rgba(31,161,83,.75),0 0 0 5px #fff}
.pg-v2 .split.evidence .panel-card .mono{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:7px;background:var(--tint-teal);color:var(--teal);font-size:10.5px;letter-spacing:.14em}
.pg-v2 .split.evidence .panel-card .mono::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(11,168,188,.2)}
.pg-v2 .split.evidence .panel-card ul{margin:18px 0 0;gap:0;counter-reset:fvrec}
.pg-v2 .split.evidence .panel-card li{counter-increment:fvrec;display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--edge);font-family:var(--grot);font-weight:600;font-size:15.5px;letter-spacing:-.005em;color:var(--ink-2);transition:color .2s,padding-left .3s var(--ease)}
.pg-v2 .split.evidence .panel-card li:last-child{border-bottom:none}
.pg-v2 .split.evidence .panel-card li::before{content:counter(fvrec,decimal-leading-zero);position:static;width:30px;height:30px;border-radius:9px;background:var(--tint-green);color:var(--green-dark);font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .25s,color .25s,transform .3s var(--ease)}
.pg-v2 .split.evidence .panel-card li::after{content:"\2713";margin-left:auto;width:20px;height:20px;border-radius:50%;border:1px solid var(--line-2);color:var(--green);font-size:10px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .25s,color .25s,border-color .25s}
.pg-v2 .split.evidence .panel-card li:hover{color:var(--green-dark);padding-left:4px}
.pg-v2 .split.evidence .panel-card li:hover::before{background:var(--green);color:#fff;transform:translateY(-1px)}
.pg-v2 .split.evidence .panel-card li:hover::after{background:var(--green);border-color:var(--green);color:#fff}
.pg-v2 .split.evidence .panel-card .btn{margin-top:22px;width:100%;justify-content:center;background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 14px 28px -14px rgba(31,161,83,.7)}
.pg-v2 .split.evidence .panel-card .btn:hover{background:var(--green-dark);border-color:var(--green-dark);color:#fff;transform:translateY(-2px)}
@media (max-width:980px){
  .pg-v2 .split.evidence{grid-template-columns:1fr;gap:28px;padding:30px 24px 26px;border-radius:22px}
  .pg-v2 .split.evidence .panel-card{margin-top:8px}
}
@media (max-width:600px){
  .pg-v2 .split.evidence{padding:26px 18px 20px;border-radius:20px}
  .pg-v2 .split.evidence > .prose{font-size:16px;padding-left:18px}
  .pg-v2 .split.evidence .panel-card{padding:26px 20px 22px}
  .pg-v2 .split.evidence .panel-card::before{width:40px;height:40px;right:20px;top:-14px;font-size:16px}
  .pg-v2 .split.evidence .panel-card li{font-size:14.5px;gap:12px}
}


/* ==========================================================================
   Story timeline (.timeline.story) — numbered gradient markers on a drawn
   line, dashed stems into milestone cards, pulsing "today" node.
   ========================================================================== */
.pg-v2 .timeline.story{--tl-gap:clamp(18px,2.4vw,32px);gap:var(--tl-gap);padding-top:0;align-items:stretch}
.pg-v2 .timeline.story::before{left:24px;right:calc((100% - 3 * var(--tl-gap)) / 4 - 24px);top:22px;height:4px;border-radius:4px;opacity:1;background:linear-gradient(90deg,var(--green),var(--teal) 55%,var(--mint-2))}
.pg-v2 .timeline.story .step{margin-top:78px;padding:26px 22px 26px;background:#fff;border:1px solid var(--line-2);border-radius:16px;display:flex;flex-direction:column;transition:border-color .3s,box-shadow .35s var(--ease),background .3s}
.pg-v2 .timeline.story .step:hover{transform:none;border-color:var(--edge-hover);box-shadow:0 26px 50px -28px rgba(8,28,56,.32)}
/* marker on the line */
.pg-v2 .timeline.story .step::before{content:counter(fvtl,decimal-leading-zero);left:0;top:-78px;width:48px;height:48px;border:none;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--teal));color:#fff;font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.04em;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px #fff,0 16px 28px -12px rgba(31,161,83,.7);z-index:1;transition:transform .35s var(--ease),box-shadow .35s}
.pg-v2 .timeline.story .step:nth-child(even)::before{background:linear-gradient(135deg,var(--teal),#1FA153)}
.pg-v2 .timeline.story .step:hover::before{transform:translateY(-3px) scale(1.06);background:linear-gradient(135deg,var(--green),var(--teal))}
/* dashed stem from marker into the card */
.pg-v2 .timeline.story .step::after{content:"";position:absolute;left:23px;top:-24px;height:24px;border-left:2px dashed #CBD9E3}
/* numeral lives in the marker now */
.pg-v2 .timeline.story .step .no{display:none}
.pg-v2 .timeline.story .step b{font-size:18.5px;line-height:1.25;margin:0 0 10px;color:var(--ink-2);transition:color .2s}
.pg-v2 .timeline.story .step:hover b{color:var(--green-dark)}
.pg-v2 .timeline.story .step small{font-size:14.5px;line-height:1.62}
/* the present day */
.pg-v2 .timeline.story .step:last-child{background:linear-gradient(160deg,#F6FCF8,#EDF8F2);border-color:#CDEBDA}
.pg-v2 .timeline.story .step:last-child::before{background:linear-gradient(135deg,var(--mint-2),var(--green));animation:fv-pulse 2.6s ease-out infinite}
.pg-v2 .timeline.story .step:last-child b{color:var(--green-dark)}
@keyframes fv-pulse{0%{box-shadow:0 0 0 6px #fff,0 0 0 8px rgba(31,161,83,.35),0 16px 28px -12px rgba(31,161,83,.7)}100%{box-shadow:0 0 0 6px #fff,0 0 0 26px rgba(31,161,83,0),0 16px 28px -12px rgba(31,161,83,.7)}}
@media (prefers-reduced-motion:reduce){
  .pg-v2 .timeline.story .step:last-child::before{animation:none}
}
@media (max-width:980px){
  .pg-v2 .timeline.story,.pg-v2 .timeline.story.c5,.pg-v2 .timeline.story.c6{grid-template-columns:1fr;gap:18px;padding-left:70px}
  .pg-v2 .timeline.story::before{display:block;left:22px;right:auto;top:6px;bottom:6px;width:4px;height:auto;background:linear-gradient(180deg,var(--green),var(--teal) 55%,var(--mint-2));transform:scaleY(0);transform-origin:top}
  .pg-v2 .timeline.story.is-in::before{transform:scaleY(1)}
  .pg-v2 .timeline.story .step{margin-top:0}
  .pg-v2 .timeline.story .step::before{left:-70px;top:14px}
  .pg-v2 .timeline.story .step::after{display:none}
}
@media (max-width:600px){
  .pg-v2 .timeline.story{padding-left:60px}
  .pg-v2 .timeline.story::before{left:19px}
  .pg-v2 .timeline.story .step{padding:20px 18px 22px}
  .pg-v2 .timeline.story .step::before{left:-60px;width:42px;height:42px;font-size:12px}
}


/* ==========================================================================
   Process ladder (.numrows.ladder) — elevated card, large gradient numerals,
   stepped progress fills that grow row by row.
   ========================================================================== */
.pg-v2 .numrows.ladder{gap:0;background:#fff;border:1px solid var(--line-2);border-radius:18px;box-shadow:0 28px 60px -34px rgba(8,28,56,.32)}
.pg-v2 .numrows.ladder > *{display:grid;grid-template-columns:88px minmax(0,1fr);gap:0 14px;align-items:start;padding:26px 28px 28px 26px;border-bottom:1px solid var(--edge);background:#fff;transition:background .3s}
.pg-v2 .numrows.ladder > *:last-child{border-bottom:none}
.pg-v2 .numrows.ladder > *:hover{background:#F7FBF9}
/* large gradient numeral */
.pg-v2 .numrows.ladder > *::before{content:counter(fvrow,decimal-leading-zero);font-family:var(--grot);font-size:38px;font-weight:700;line-height:1;letter-spacing:-.03em;color:transparent;background:linear-gradient(135deg,var(--green),var(--teal));-webkit-background-clip:text;background-clip:text;padding-top:0;min-width:0;transform-origin:left top;transition:transform .35s var(--ease),opacity .3s;opacity:.9}
.pg-v2 .numrows.ladder > *:hover::before{transform:scale(1.08);opacity:1}
/* stepped progress fill along the row's bottom edge */
.pg-v2 .numrows.ladder > *::after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:var(--fill,25%);border-radius:0 3px 3px 0;background:linear-gradient(90deg,var(--green),var(--teal));opacity:.7;transition:opacity .3s,width .6s var(--ease)}
.pg-v2 .numrows.ladder > *:nth-child(1){--fill:25%}.pg-v2 .numrows.ladder > *:nth-child(2){--fill:50%}.pg-v2 .numrows.ladder > *:nth-child(3){--fill:75%}.pg-v2 .numrows.ladder > *:nth-child(4){--fill:100%}
.pg-v2 .numrows.ladder > *:last-child::after{border-radius:0 0 17px 17px;height:4px}
.pg-v2 .numrows.ladder > *:hover::after{opacity:1}
.pg-v2.js .numrows.ladder:not(.is-in) > *::after{width:0}
/* type */
.pg-v2 .numrows.ladder .txt{gap:8px;padding-top:6px}
.pg-v2 .numrows.ladder b{font-size:19px;letter-spacing:-.012em}
.pg-v2 .numrows.ladder > *:hover b{color:var(--green-dark)}
.pg-v2 .numrows.ladder small{font-size:15px;line-height:1.6;max-width:60ch}
@media (max-width:600px){
  .pg-v2 .numrows.ladder > *{grid-template-columns:62px minmax(0,1fr);padding:20px 18px 22px 18px;gap:0 10px}
  .pg-v2 .numrows.ladder > *::before{font-size:30px}
  .pg-v2 .numrows.ladder .txt{padding-top:4px}
  .pg-v2 .numrows.ladder b{font-size:17.5px}
  .pg-v2 .numrows.ladder small{font-size:14.5px}
}


/* ==========================================================================
   Expanding showcase (.showcase) — three glass cards on a navy stage with
   green/teal glows behind them. The open card widens into a two-track grid
   (copy | framed photo); the others fold but keep label, title and link.
   The first card stays open until another card is hovered or focused.
   ========================================================================== */
.pg-v2 .showcase{position:relative;isolation:isolate;display:flex;gap:16px;box-sizing:border-box;height:clamp(420px,33vw,500px);padding:22px;border-radius:28px;background:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.5px) 0 0/18px 18px,linear-gradient(135deg,#0B2545 0%,#0E3A5C 58%,#0B2545 100%);box-shadow:0 44px 90px -44px rgba(8,28,56,.65);overflow:hidden;counter-reset:none}
.pg-v2 .showcase::before{content:"";position:absolute;z-index:0;width:560px;height:560px;left:-200px;top:-260px;border-radius:50%;background:radial-gradient(circle,rgba(62,217,139,.6),transparent 66%);filter:blur(34px);pointer-events:none}
.pg-v2 .showcase::after{content:"";position:absolute;z-index:0;width:620px;height:620px;right:-220px;bottom:-340px;border-radius:50%;background:radial-gradient(circle,rgba(11,168,188,.65),transparent 66%);filter:blur(38px);pointer-events:none}
/* glass cards */
.pg-v2 .showcase > .cell{position:relative;z-index:1;flex:1 1 0;min-width:0;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) 0;grid-template-rows:auto auto 1fr;column-gap:0;align-content:start;overflow:hidden;padding:28px 26px 86px;border-radius:22px;border:1px solid rgba(255,255,255,.2);background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 22px 44px -26px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);color:#DCEBFA;cursor:pointer;counter-increment:none;transition:flex .65s var(--ease),grid-template-columns .65s var(--ease),column-gap .65s var(--ease),background .45s,border-color .45s,box-shadow .45s var(--ease)}
/* label */
.pg-v2 .showcase > .cell .k,.pg-v2 .showcase > .cell h4{grid-column:1;justify-self:start;display:inline-flex;align-items:center;margin:0;padding:5px 10px;border-radius:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sky);white-space:nowrap;transition:background .35s,color .35s,border-color .35s}
/* copy */
.pg-v2 .showcase > .cell h3{grid-column:1;font-family:var(--grot);font-weight:600;font-size:clamp(19px,1.5vw,23px);line-height:1.25;letter-spacing:-.015em;color:#fff;margin:16px 0 0;max-width:20ch;transition:color .3s}
.pg-v2 .showcase > .cell p{grid-column:1;font-size:15px;line-height:1.62;color:#B9CFE0;margin:14px 0 0;max-width:38ch;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .45s var(--ease)}
/* link: plain text when folded, solid pill when open */
.pg-v2 .showcase > .cell .go{position:absolute;left:26px;bottom:26px;margin:0;padding:0;border:1px solid transparent;border-radius:999px;background:transparent;font-family:var(--grot);font-size:14px;font-weight:600;color:#fff;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transform:none;transition:padding .45s var(--ease),background .35s,border-color .35s,color .35s}
.pg-v2 .showcase > .cell .go::after{content:"\2192";color:var(--mint-2);transition:transform .3s var(--ease),color .3s}
/* corner arrow */
.pg-v2 .showcase > .cell::before{content:"\2197";display:flex;position:absolute;right:22px;bottom:22px;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;font-family:var(--sans);font-size:16px;font-weight:800;align-items:center;justify-content:center;letter-spacing:0;z-index:1;transition:background .3s,color .3s,border-color .3s,transform .35s var(--ease)}
/* framed photo track (second grid column) — contained, never cropped */
.pg-v2 .showcase > .cell::after{content:"";grid-column:2;grid-row:1 / span 3;align-self:stretch;min-width:0;box-sizing:border-box;padding:14px;border-radius:16px;background:var(--img) center/contain no-repeat content-box,linear-gradient(160deg,rgba(255,255,255,.96),rgba(233,242,247,.94)) padding-box;border:1px solid rgba(255,255,255,.6);box-shadow:0 18px 36px -22px rgba(0,0,0,.6);opacity:0;transition:opacity .4s}
/* ---- open state ---- */
.pg-v2 .showcase:not(:has(> .cell:hover)):not(:has(> .cell:focus-visible)) > .cell:first-child,
.pg-v2 .showcase > .cell:hover,
.pg-v2 .showcase > .cell:focus-visible{flex:2.15 1 0;grid-template-columns:minmax(0,1fr) 44%;column-gap:26px;background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.08));border-color:rgba(255,255,255,.36);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 34px 70px -34px rgba(0,0,0,.7);outline:none}
.pg-v2 .showcase:not(:has(> .cell:hover)):not(:has(> .cell:focus-visible)) > .cell:first-child .k,
.pg-v2 .showcase > .cell:hover .k,
.pg-v2 .showcase > .cell:focus-visible .k,
.pg-v2 .showcase:not(:has(> .cell:hover)):not(:has(> .cell:focus-visible)) > .cell:first-child h4,
.pg-v2 .showcase > .cell:hover h4,
.pg-v2 .showcase > .cell:focus-visible h4{background:rgba(62,217,139,.16);border-color:rgba(62,217,139,.4);color:var(--mint-2)}
.pg-v2 .showcase:not(:has(> .cell:hover)):not(:has(> .cell:focus-visible)) > .cell:first-child p,
.pg-v2 .showcase > .cell:hover p,
.pg-v2 .showcase > .cell:focus-visible p{opacity:1;transform:none;transition-delay:.2s}
.pg-v2 .showcase:not(:has(> .cell:hover)):not(:has(> .cell:focus-visible)) > .cell:first-child .go,
.pg-v2 .showcase > .cell:hover .go,
.pg-v2 .showcase > .cell:focus-visible .go{padding:11px 18px;background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 14px 28px -14px rgba(31,161,83,.8)}
.pg-v2 .showcase:not(:has(> .cell:hover)):not(:has(> .cell:focus-visible)) > .cell:first-child .go::after,
.pg-v2 .showcase > .cell:hover .go::after,
.pg-v2 .showcase > .cell:focus-visible .go::after{color:#fff}
.pg-v2 .showcase:not(:has(> .cell:hover)):not(:has(> .cell:focus-visible)) > .cell:first-child::after,
.pg-v2 .showcase > .cell:hover::after,
.pg-v2 .showcase > .cell:focus-visible::after{opacity:1;transition-delay:.18s}
.pg-v2 .showcase:not(:has(> .cell:hover)):not(:has(> .cell:focus-visible)) > .cell:first-child::before,
.pg-v2 .showcase > .cell:hover::before,
.pg-v2 .showcase > .cell:focus-visible::before{background:var(--mint-2);border-color:var(--mint-2);color:var(--ink);transform:translate(2px,-2px)}
.pg-v2 .showcase > .cell:hover h3{color:var(--mint-2)}
.pg-v2 .showcase > .cell:hover .go{background:var(--green-dark);border-color:var(--green-dark)}
.pg-v2 .showcase > .cell:hover .go::after{transform:translateX(3px)}
/* ---- stacked on smaller screens: every card open, framed photo on top ---- */
@media (max-width:900px){
  .pg-v2 .showcase{flex-direction:column;height:auto;gap:14px;padding:14px;border-radius:24px}
  .pg-v2 .showcase > .cell,
  .pg-v2 .showcase:not(:has(> .cell:hover)):not(:has(> .cell:focus-visible)) > .cell:first-child,
  .pg-v2 .showcase > .cell:hover,
  .pg-v2 .showcase > .cell:focus-visible{flex:none;grid-template-columns:1fr;grid-template-rows:auto auto auto auto;column-gap:0;padding:14px 20px 24px;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.06));border-color:rgba(255,255,255,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
  .pg-v2 .showcase > .cell::after,
  .pg-v2 .showcase:not(:has(> .cell:hover)):not(:has(> .cell:focus-visible)) > .cell:first-child::after{grid-column:1;grid-row:1;height:200px;margin-bottom:18px;opacity:1}
  .pg-v2 .showcase > .cell .k,.pg-v2 .showcase > .cell h4,
  .pg-v2 .showcase:not(:has(> .cell:hover)):not(:has(> .cell:focus-visible)) > .cell:first-child .k{background:rgba(62,217,139,.16);border-color:rgba(62,217,139,.4);color:var(--mint-2)}
  .pg-v2 .showcase > .cell h3{margin-top:12px;max-width:none}
  .pg-v2 .showcase > .cell p,
  .pg-v2 .showcase:not(:has(> .cell:hover)):not(:has(> .cell:focus-visible)) > .cell:first-child p{opacity:1;transform:none;max-width:none;margin-top:10px}
  .pg-v2 .showcase > .cell .go,
  .pg-v2 .showcase:not(:has(> .cell:hover)):not(:has(> .cell:focus-visible)) > .cell:first-child .go{position:static;justify-self:start;margin-top:18px;padding:11px 18px;background:var(--green);border-color:var(--green);color:#fff}
  .pg-v2 .showcase > .cell .go::after{color:#fff}
  .pg-v2 .showcase > .cell::before{right:16px;bottom:20px}
}

/* ==========================================================================
   Method comparison table v2 (table.cmp) — card container, method headers
   with colour keys, an optional highlighted column (table[data-hl="N"]),
   rating dots instead of text stars, and value chips graded by strength.
   ========================================================================== */
.pg-v2 .tablewrap{position:relative;background:#fff;border:1px solid var(--line-2);border-radius:20px;overflow:hidden;overflow-x:auto;box-shadow:0 30px 60px -36px rgba(8,28,56,.32)}
.pg-v2 table.cmp{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;font-size:14.5px}
/* header */
.pg-v2 table.cmp thead th{padding:20px 18px 18px;background:#F7FAFC;border-bottom:1px solid var(--line-2);font-family:var(--grot);font-size:15px;font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--ink-2);white-space:nowrap;vertical-align:middle}
.pg-v2 table.cmp thead th:first-child{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;padding-left:24px}
.pg-v2 table.cmp thead th:not(:first-child)::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--teal);margin-right:9px;vertical-align:1px;box-shadow:0 0 0 3px rgba(11,168,188,.16)}
.pg-v2 table.cmp thead th:nth-child(odd):not(:first-child)::before{background:var(--green);box-shadow:0 0 0 3px rgba(31,161,83,.16)}
/* rows */
.pg-v2 table.cmp tbody th{font-family:var(--grot);font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--ink-2);text-align:left;padding:15px 24px;border-bottom:1px solid var(--edge);background:#fff;transition:background .25s,color .2s}
.pg-v2 table.cmp tbody td{padding:13px 18px;border-bottom:1px solid var(--edge);font-weight:600;color:var(--ink);text-align:center;vertical-align:middle;transition:background .25s}
.pg-v2 table.cmp tbody tr:last-child th,.pg-v2 table.cmp tbody tr:last-child td{border-bottom:none}
.pg-v2 table.cmp tbody tr:hover th,.pg-v2 table.cmp tbody tr:hover td{background:#F7FBF9}
.pg-v2 table.cmp tbody tr:hover th{color:var(--green-dark);box-shadow:inset 3px 0 0 var(--green)}
/* highlighted column */
.pg-v2 table.cmp[data-hl="2"] thead th:nth-child(2),.pg-v2 table.cmp[data-hl="3"] thead th:nth-child(3),.pg-v2 table.cmp[data-hl="4"] thead th:nth-child(4),.pg-v2 table.cmp[data-hl="5"] thead th:nth-child(5){background:linear-gradient(180deg,#0B2545,#0E3A5C);color:#fff;border-radius:14px 14px 0 0;border-bottom-color:#0E3A5C}
.pg-v2 table.cmp[data-hl="2"] thead th:nth-child(2)::before,.pg-v2 table.cmp[data-hl="3"] thead th:nth-child(3)::before,.pg-v2 table.cmp[data-hl="4"] thead th:nth-child(4)::before,.pg-v2 table.cmp[data-hl="5"] thead th:nth-child(5)::before{background:var(--mint-2);box-shadow:0 0 0 3px rgba(62,217,139,.25)}
.pg-v2 table.cmp[data-hl="2"] tbody td:nth-child(2),.pg-v2 table.cmp[data-hl="3"] tbody td:nth-child(3),.pg-v2 table.cmp[data-hl="4"] tbody td:nth-child(4),.pg-v2 table.cmp[data-hl="5"] tbody td:nth-child(5){background:#F3FAF6;box-shadow:inset 1px 0 0 #D6EEDF,inset -1px 0 0 #D6EEDF}
.pg-v2 table.cmp[data-hl="2"] tbody tr:hover td:nth-child(2),.pg-v2 table.cmp[data-hl="3"] tbody tr:hover td:nth-child(3),.pg-v2 table.cmp[data-hl="4"] tbody tr:hover td:nth-child(4),.pg-v2 table.cmp[data-hl="5"] tbody tr:hover td:nth-child(5){background:#EAF6EF}
/* rating dots (the star text stays in the DOM for assistive tech) */
.pg-v2 table.cmp .stars{display:inline-block;position:relative;width:82px;height:10px;font-size:0;line-height:0;color:transparent;vertical-align:middle;background:radial-gradient(circle at 5px 5px,#DCE6ED 4.6px,transparent 5.4px) 0 0/18px 10px repeat-x}
.pg-v2 table.cmp .stars::after{content:"";position:absolute;left:0;top:0;height:10px;width:calc(var(--n,0) * 18px - 8px);background:radial-gradient(circle at 5px 5px,var(--green) 4.6px,transparent 5.4px) 0 0/18px 10px repeat-x}
/* value chips */
.pg-v2 table.cmp .v{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:78px;padding:6px 13px;border-radius:999px;border:1px solid transparent;font-size:13px;font-weight:700;letter-spacing:.01em;line-height:1.2;white-space:nowrap}
.pg-v2 table.cmp .v-vhigh{background:linear-gradient(135deg,#0B2545,#0E3A5C);color:#fff}
.pg-v2 table.cmp .v-high{background:var(--green);color:#fff}
.pg-v2 table.cmp .v-good{background:var(--tint-green);border-color:#CFEBDB;color:var(--green-dark)}
.pg-v2 table.cmp .v-med{background:var(--tint-teal);border-color:#CDE8EE;color:#0A8C9C}
.pg-v2 table.cmp .v-low{background:#F1F5F8;border-color:var(--line-2);color:var(--body)}
.pg-v2 table.cmp .v-yes{background:#fff;border-color:#CFEBDB;color:var(--green-dark)}
.pg-v2 table.cmp .v-yes::before{content:"\2713";display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--green);color:#fff;font-size:9px;font-weight:900}
.pg-v2 table.cmp .v-none{min-width:0;padding:0;border:none;background:none;color:#B7C6D2;font-size:15px}
.pg-v2 table.cmp .v-text{min-width:0;padding:0;border:none;background:none;border-radius:0;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--text-2);white-space:normal}
.pg-v2 table.cmp tbody tr:last-child td{padding-top:16px;padding-bottom:18px}
@media (max-width:600px){
  .pg-v2 .tablewrap{border-radius:16px}
  .pg-v2 table.cmp thead th{padding:16px 14px 14px;font-size:14px}
  .pg-v2 table.cmp tbody th{padding:13px 16px;font-size:14px}
  .pg-v2 table.cmp tbody td{padding:11px 14px}
  .pg-v2 table.cmp .v{min-width:0;padding:5px 11px;font-size:12.5px}
}

/* showcase fix: the stage is sized to the content column (the panel layout rule would otherwise pad it with the page gutter and bleed the navy background edge to edge) */
.pg-v2 .content > section.panel > .showcase{max-width:none;width:calc(min(100%,var(--maxw)) - 2 * var(--pad));margin-left:auto;margin-right:auto;padding:22px}
@media (max-width:900px){
  .pg-v2 .content > section.panel > .showcase{padding:14px}
}


/* ==========================================================================
   Performance & Validation dossier (product.php #performance) — the stat
   tiles, document chips and download button are joined into one card:
   navy stats header on top, white document footer with the button on the
   right. No markup changes: the section itself becomes the grid.
   ========================================================================== */
.pg-v2 #performance{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:0;row-gap:0;align-items:stretch}
.pg-v2 #performance > *{max-width:none;margin-left:0;margin-right:0;justify-self:stretch}
.pg-v2 #performance > .sec-head{grid-column:1 / -1}
/* stats header */
.pg-v2 #performance > .minitiles{grid-column:1 / -1;position:relative;isolation:isolate;overflow:hidden;grid-template-columns:repeat(4,1fr);gap:0;border-radius:22px 22px 0 0;background:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.5px) 0 0/18px 18px,linear-gradient(135deg,#0B2545 0%,#0E3A5C 60%,#0B2545 100%);box-shadow:0 30px 60px -36px rgba(8,28,56,.45)}
.pg-v2 #performance > .minitiles::before{content:"";position:absolute;z-index:0;width:420px;height:420px;left:-160px;top:-240px;border-radius:50%;background:radial-gradient(circle,rgba(62,217,139,.5),transparent 66%);filter:blur(30px);pointer-events:none}
.pg-v2 #performance > .minitiles::after{content:"";position:absolute;z-index:0;width:460px;height:460px;right:-180px;bottom:-300px;border-radius:50%;background:radial-gradient(circle,rgba(11,168,188,.55),transparent 66%);filter:blur(32px);pointer-events:none}
.pg-v2 #performance .minitile.stat{position:relative;z-index:1;overflow:visible;text-align:left;align-items:flex-start;gap:14px;padding:32px 30px 34px;background:transparent;border:none;border-radius:0;box-shadow:none;transition:background .3s}
.pg-v2 #performance .minitile.stat + .minitile.stat{border-left:1px solid rgba(255,255,255,.12)}
.pg-v2 #performance .minitile.stat:hover{background:rgba(255,255,255,.05)}
.pg-v2 #performance .minitile.stat::after{display:none}
.pg-v2 #performance .minitile .lbl{display:inline-flex;align-items:center;gap:8px;color:var(--sky);font-size:10.5px;letter-spacing:.16em}
.pg-v2 #performance .minitile .lbl::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint-2);box-shadow:0 0 0 3px rgba(62,217,139,.22)}
.pg-v2 #performance .minitile .val{position:relative;font-size:clamp(24px,2.2vw,32px);line-height:1.1;letter-spacing:-.02em;color:#fff;padding-bottom:16px}
.pg-v2 #performance .minitile .val::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--mint-2),var(--teal));transition:width .4s var(--ease)}
.pg-v2 #performance .minitile.stat:hover .val::after{width:64px}
/* document footer: chips left, button right */
.pg-v2 #performance > .chips{grid-column:1;margin-top:0;padding:24px 26px 26px;gap:10px;background:#fff;border:1px solid var(--line-2);border-top:none;border-right:none;border-radius:0 0 0 22px;align-items:center}
.pg-v2 #performance > .sec-act{grid-column:2;margin-top:0;padding:24px 26px 26px 12px;background:#fff;border:1px solid var(--line-2);border-top:none;border-left:none;border-radius:0 0 22px 0;display:flex;align-items:center}
.pg-v2 #performance .chip{display:inline-flex;align-items:center;gap:9px;padding:9px 14px 9px 12px;border-radius:10px;background:#F7FAFC;border:1px solid var(--line-2);box-shadow:none;font-family:var(--grot);font-size:13.5px;font-weight:600;color:var(--ink);transition:background .25s,border-color .25s,color .25s,transform .25s var(--ease)}
.pg-v2 #performance .chip::before{content:"";flex:none;width:14px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16' fill='none' stroke='%230BA8BC' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M2 1.5h6l4 4v9H2z'/%3E%3Cpath d='M8 1.5v4h4'/%3E%3Cpath d='M4.5 9h5M4.5 11.8h5'/%3E%3C/svg%3E") center/contain no-repeat}
.pg-v2 #performance .chip:hover{background:#fff;border-color:var(--edge-hover);color:var(--green-dark);transform:translateY(-2px)}
.pg-v2 #performance .sec-act .btn{display:inline-flex;align-items:center;gap:10px;padding:12px 20px 12px 12px;border-radius:999px;background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700;box-shadow:0 16px 30px -16px rgba(11,37,69,.6);white-space:nowrap}
.pg-v2 #performance .sec-act .btn::before{content:"\2193";display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--mint-2);color:var(--ink);font-weight:900;font-size:13px;transition:transform .3s var(--ease)}
.pg-v2 #performance .sec-act .btn:hover{background:var(--green);border-color:var(--green);color:#fff;transform:translateY(-2px)}
.pg-v2 #performance .sec-act .btn:hover::before{transform:translateY(2px)}
@media (max-width:980px){
  .pg-v2 #performance > .minitiles{grid-template-columns:repeat(2,1fr)}
  .pg-v2 #performance .minitile.stat + .minitile.stat{border-left:none}
  .pg-v2 #performance .minitile.stat:nth-child(even){border-left:1px solid rgba(255,255,255,.12)}
  .pg-v2 #performance .minitile.stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}
}
@media (max-width:700px){
  .pg-v2 #performance{grid-template-columns:1fr}
  .pg-v2 #performance > .chips{grid-column:1;border-right:1px solid var(--line-2);border-radius:0;padding:20px 18px 6px}
  .pg-v2 #performance > .sec-act{grid-column:1;border-left:1px solid var(--line-2);border-radius:0 0 22px 22px;padding:14px 18px 22px}
  .pg-v2 #performance .sec-act .btn{width:100%;justify-content:center}
  .pg-v2 #performance .minitile.stat{padding:24px 20px 26px}
}
@media (max-width:600px){
  .pg-v2 #performance > .minitiles{grid-template-columns:1fr 1fr}
}

/* dossier fix: footer blocks paint above the header shadow (no seam); card shadow moves to the footer */
.pg-v2 #performance > .minitiles{box-shadow:none}
.pg-v2 #performance > .chips,.pg-v2 #performance > .sec-act{position:relative;z-index:1;box-shadow:0 30px 60px -36px rgba(8,28,56,.35)}


/* ==========================================================================
   Use-case board (.usecase) — one card with two panes: application tiles
   on the left, sample-matrix tags on a tinted pane on the right.
   ========================================================================== */
.pg-v2 .usecase{display:grid;grid-template-columns:1.12fr .88fr;gap:0;align-items:stretch;background:#fff;border:1px solid var(--line-2);border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -36px rgba(8,28,56,.3)}
.pg-v2 .content > section.panel > .usecase{max-width:none;width:calc(min(100%,var(--maxw)) - 2 * var(--pad));margin-left:auto;margin-right:auto;padding:0}
.pg-v2 .usecase > div{padding:clamp(24px,2.6vw,36px) clamp(22px,2.6vw,36px) clamp(26px,2.8vw,38px);min-width:0}
.pg-v2 .usecase > div:last-child{position:relative;overflow:hidden;border-left:1px solid var(--line-2);background:radial-gradient(rgba(11,168,188,.12) 1px,transparent 1.5px) 0 0/18px 18px,linear-gradient(160deg,#F3F9FB,#E8F3F7)}
.pg-v2 .usecase > div:last-child::after{content:"";position:absolute;right:-120px;bottom:-150px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(11,168,188,.24),transparent 68%);filter:blur(22px);pointer-events:none}
.pg-v2 .usecase .subhead{margin-bottom:18px}
.pg-v2 .usecase .subhead::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(31,161,83,.18)}
.pg-v2 .usecase > div:last-child .subhead::before{background:var(--teal);box-shadow:0 0 0 3px rgba(11,168,188,.18)}
/* application tiles */
.pg-v2 .usecase .checklist{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pg-v2 .usecase .checklist li{position:relative;overflow:hidden;gap:12px;padding:15px 16px;border-radius:14px;background:#F7FAFC;border:1px solid var(--line-2);font-family:var(--grot);font-size:15px;font-weight:600;color:var(--ink-2);transition:transform .3s var(--ease),background .3s,border-color .3s,box-shadow .35s var(--ease),color .2s}
.pg-v2 .usecase .checklist li::before{width:24px;height:24px;font-size:12px;flex:none;position:relative;z-index:1;transition:background .3s,color .3s,transform .35s var(--ease)}
.pg-v2 .usecase .checklist li::after{content:"";position:absolute;inset:0;background:radial-gradient(220px circle at var(--mx,20%) var(--my,50%),rgba(62,217,139,.18),transparent 62%);opacity:0;transition:opacity .35s;pointer-events:none}
.pg-v2 .usecase .checklist li:hover{transform:translateY(-3px);background:#fff;border-color:var(--edge-hover);box-shadow:0 20px 34px -22px rgba(8,28,56,.3);color:var(--green-dark)}
.pg-v2 .usecase .checklist li:hover::before{background:var(--green);color:#fff;transform:scale(1.1)}
.pg-v2 .usecase .checklist li:hover::after{opacity:1}
/* matrix tags */
.pg-v2 .usecase .chips{position:relative;z-index:1;gap:10px}
.pg-v2 .usecase .chip{position:relative;display:inline-flex;align-items:center;gap:10px;padding:11px 16px 11px 14px;border-radius:12px;background:#fff;border:1px solid #CDE8EE;box-shadow:0 1px 2px rgba(8,28,56,.04);font-family:var(--grot);font-size:14.5px;font-weight:600;letter-spacing:0;color:var(--ink-2);transition:transform .3s var(--ease),border-color .3s,box-shadow .35s var(--ease),color .2s,background .3s}
.pg-v2 .usecase .chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(11,168,188,.16);transition:transform .3s var(--ease),background .3s,box-shadow .3s}
.pg-v2 .usecase .chip:hover{transform:translateY(-3px);border-color:var(--teal);box-shadow:0 16px 28px -18px rgba(11,168,188,.55);color:#0A8C9C}
.pg-v2 .usecase .chip:hover::before{transform:scale(1.3);background:var(--green);box-shadow:0 0 0 3px rgba(31,161,83,.18)}
@media (max-width:900px){
  .pg-v2 .usecase{grid-template-columns:1fr}
  .pg-v2 .usecase > div:last-child{border-left:none;border-top:1px solid var(--line-2)}
}
@media (max-width:600px){
  .pg-v2 .usecase .checklist{grid-template-columns:1fr}
  .pg-v2 .usecase > div{padding:22px 18px 24px}
}

/* ==========================================================================
   Spec sheet (table.spec) — key/value rows laid out as a two-column sheet
   inside the card, with an animated accent bar on hover.
   ========================================================================== */
.pg-v2 .content > section.panel > .tablewrap{max-width:none;width:calc(min(100%,var(--maxw)) - 2 * var(--pad));margin-left:auto;margin-right:auto;padding:0}
.pg-v2 table.spec{display:block;min-width:0;font-size:14.5px}
.pg-v2 table.spec tbody{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(8,auto)}
.pg-v2 table.spec tr{position:relative;display:grid;grid-template-columns:minmax(150px,40%) minmax(0,1fr);column-gap:16px;align-items:start;padding:17px 26px 17px 30px;border-bottom:1px solid var(--edge);background:transparent;transition:background .3s}
.pg-v2 table.spec tr:nth-child(odd){background:transparent}
.pg-v2 table.spec tr:nth-child(-n+8){border-right:1px solid var(--edge)}
.pg-v2 table.spec tr:nth-child(8),.pg-v2 table.spec tr:last-child{border-bottom:none}
.pg-v2 table.spec tr::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--green),var(--teal));transform:scaleY(0);transform-origin:center;transition:transform .35s var(--ease)}
.pg-v2 table.spec tr:hover{background:#F6FAF8}
.pg-v2 table.spec tr:hover::before{transform:scaleY(1)}
.pg-v2 table.spec th{display:block;width:auto;padding:3px 0 0;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.5;transition:color .2s}
.pg-v2 table.spec td{display:block;padding:0;font-family:var(--grot);font-size:15.5px;font-weight:600;letter-spacing:-.005em;color:var(--ink-2);line-height:1.45;transition:transform .3s var(--ease),color .2s}
.pg-v2 table.spec tr:hover th{color:var(--green-dark)}
.pg-v2 table.spec tr:hover td{transform:translateX(3px)}
@media (max-width:900px){
  .pg-v2 table.spec tbody{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none}
  .pg-v2 table.spec tr:nth-child(-n+8){border-right:none}
  .pg-v2 table.spec tr:nth-child(8){border-bottom:1px solid var(--edge)}
}
@media (max-width:600px){
  .pg-v2 table.spec tr{grid-template-columns:1fr;row-gap:4px;padding:14px 18px 14px 22px}
}


/* ==========================================================================
   Scroll-driven stepper (.timeline.stepper) — numbered nodes on a track.
   site.js writes --p (0..1) on the container as the section travels up the
   viewport and toggles .is-done / .is-active on the steps. Connectors fill
   from --p in CSS, so the whole thing stays reversible on scroll-up.
   ========================================================================== */
.pg-v2 .timeline.stepper{--n:4;--p:0;position:relative;gap:0;padding:38px 24px 34px;background:#fff;border:1px solid var(--line-2);border-radius:22px;box-shadow:0 30px 60px -36px rgba(8,28,56,.3);align-items:start}
.pg-v2 .timeline.stepper.c5{--n:5}.pg-v2 .timeline.stepper.c6{--n:6}
.pg-v2 .content > section.panel > .timeline.stepper{max-width:none;width:calc(min(100%,var(--maxw)) - 2 * var(--pad));margin-left:auto;margin-right:auto;padding:38px 24px 34px}
.pg-v2 .timeline.stepper::before{display:none}
/* steps */
.pg-v2 .timeline.stepper .step{padding:66px 16px 0;text-align:center;transition:opacity .4s}
.pg-v2 .timeline.stepper .step .no{display:block;margin:0 0 8px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--faint);transition:color .35s}
.pg-v2 .timeline.stepper .step .no::before{content:"Step ";}
.pg-v2 .timeline.stepper .step b{display:block;font-family:var(--grot);font-weight:600;font-size:18px;letter-spacing:-.01em;margin:0 0 8px;color:var(--faint);transition:color .35s}
.pg-v2 .timeline.stepper .step small{display:block;font-size:14px;line-height:1.55;color:var(--faint);max-width:26ch;margin:0 auto;transition:color .35s}
/* nodes */
.pg-v2 .timeline.stepper .step::before{content:counter(fvtl);left:50%;top:0;width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid #D5E1EA;color:var(--faint);font-family:var(--grot);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;transform:translateX(-50%);z-index:2;transition:background .4s,border-color .4s,color .4s,box-shadow .4s,transform .4s var(--ease)}
.pg-v2 .timeline.stepper .step:nth-child(even)::before{border-color:#D5E1EA}
.pg-v2 .timeline.stepper .step:hover::before{transform:translateX(-50%);background:#fff}
/* connectors: each step (except the first) owns the segment leading into it */
.pg-v2 .timeline.stepper .step + .step::after{content:"";position:absolute;top:21px;left:-50%;width:100%;height:4px;border-radius:4px;z-index:1;--f:clamp(0,calc(var(--p) * var(--n) - (var(--j) - 1)),1);background:linear-gradient(90deg,var(--green),var(--teal)) 0 0 / calc(var(--f) * 100%) 100% no-repeat,#E3EDF4;transition:background-size .12s linear}
.pg-v2 .timeline.stepper .step:nth-child(2)::after{--j:1}.pg-v2 .timeline.stepper .step:nth-child(3)::after{--j:2}.pg-v2 .timeline.stepper .step:nth-child(4)::after{--j:3}.pg-v2 .timeline.stepper .step:nth-child(5)::after{--j:4}.pg-v2 .timeline.stepper .step:nth-child(6)::after{--j:5}
/* states */
.pg-v2 .timeline.stepper .step.is-active::before,.pg-v2 .timeline.stepper .step.is-active:hover::before{background:var(--green);border-color:var(--green);color:#fff;transform:translateX(-50%) scale(1.12);box-shadow:0 0 0 8px rgba(31,161,83,.16),0 14px 30px -10px rgba(31,161,83,.75);animation:fv-halo 1.9s ease-out infinite}
.pg-v2 .timeline.stepper .step.is-done::before,.pg-v2 .timeline.stepper .step.is-done:hover::before{content:"\2713";background:linear-gradient(135deg,var(--green),var(--teal));border-color:transparent;color:#fff;font-size:17px;box-shadow:0 10px 22px -12px rgba(31,161,83,.6)}
.pg-v2 .timeline.stepper .step.is-active .no{color:var(--green)}
.pg-v2 .timeline.stepper .step.is-active b{color:var(--green-dark)}
.pg-v2 .timeline.stepper .step.is-active small{color:var(--text-2)}
.pg-v2 .timeline.stepper .step.is-done .no{color:var(--teal)}
.pg-v2 .timeline.stepper .step.is-done b{color:var(--ink-2)}
.pg-v2 .timeline.stepper .step.is-done small{color:var(--text-2)}
@keyframes fv-halo{0%{box-shadow:0 0 0 6px rgba(31,161,83,.22),0 14px 30px -10px rgba(31,161,83,.75)}100%{box-shadow:0 0 0 20px rgba(31,161,83,0),0 14px 30px -10px rgba(31,161,83,.75)}}
@media (prefers-reduced-motion:reduce){
  .pg-v2 .timeline.stepper .step.is-active::before{animation:none}
}
/* vertical rail on smaller screens */
@media (max-width:980px){
  .pg-v2 .timeline.stepper,.pg-v2 .timeline.stepper.c5,.pg-v2 .timeline.stepper.c6{grid-template-columns:1fr;padding:26px 22px 22px}
  .pg-v2 .content > section.panel > .timeline.stepper{padding:26px 22px 22px}
  .pg-v2 .timeline.stepper .step{padding:0 0 30px 66px;text-align:left}
  .pg-v2 .timeline.stepper .step:last-child{padding-bottom:4px}
  .pg-v2 .timeline.stepper .step small{margin:0;max-width:none}
  .pg-v2 .timeline.stepper .step::before{left:0;transform:none}
  .pg-v2 .timeline.stepper .step:hover::before{transform:none}
  .pg-v2 .timeline.stepper .step.is-active::before,.pg-v2 .timeline.stepper .step.is-active:hover::before{transform:scale(1.08)}
  .pg-v2 .timeline.stepper .step + .step::after{top:-30px;left:21px;width:4px;height:30px;background:linear-gradient(180deg,var(--green),var(--teal)) 0 0 / 100% calc(var(--f) * 100%) no-repeat,#E3EDF4}
}

/* stepper fix: the "Step" prefix must not inherit the old timeline dash box */
.pg-v2 .timeline.stepper .step .no::before{content:"Step ";display:inline;width:auto;height:auto;background:none;margin:0}

/* stepper fix: on the vertical rail each step's connector runs from its node to the step's bottom edge, so it always meets the next node */
@media (max-width:980px){
  .pg-v2 .timeline.stepper .step:nth-child(n)::after{content:"";position:absolute;left:21px;top:23px;bottom:0;width:4px;height:auto;border-radius:4px;z-index:1;--f:clamp(0,calc(var(--p) * var(--n) - (var(--j) - 1)),1);background:linear-gradient(180deg,var(--green),var(--teal)) 0 0 / 100% calc(var(--f) * 100%) no-repeat,#E3EDF4}
  .pg-v2 .timeline.stepper .step:nth-child(1)::after{--j:1}.pg-v2 .timeline.stepper .step:nth-child(2)::after{--j:2}.pg-v2 .timeline.stepper .step:nth-child(3)::after{--j:3}.pg-v2 .timeline.stepper .step:nth-child(4)::after{--j:4}.pg-v2 .timeline.stepper .step:nth-child(5)::after{--j:5}.pg-v2 .timeline.stepper .step:nth-child(6)::after{--j:6}
  .pg-v2 .timeline.stepper .step:nth-child(n):last-child::after{display:none}
}


/* ==========================================================================
   Stepper on a banner backdrop (.timeline.stepper.dark) — navy panel with
   a faded photo (set per element via --bg), glows, and node/text colours
   tuned for the dark surface.
   ========================================================================== */
.pg-v2 .timeline.stepper.dark{isolation:isolate;overflow:hidden;background:#0B2545;border-color:rgba(255,255,255,.1);box-shadow:0 44px 90px -44px rgba(8,28,56,.7);color:#DCEBFA}
.pg-v2 .timeline.stepper.dark::before{content:"";display:block;position:absolute;inset:0;left:0;right:0;top:0;height:auto;border-radius:0;opacity:1;transform:none;z-index:0;background:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.5px) 0 0/18px 18px,linear-gradient(90deg,rgba(11,37,69,.94) 0%,rgba(11,37,69,.8) 40%,rgba(14,58,92,.6) 100%),var(--bg,none) center/cover no-repeat;filter:none;transition:none}
.pg-v2 .timeline.stepper.dark.is-in::before{transform:none}
.pg-v2 .timeline.stepper.dark::after{content:"";position:absolute;z-index:0;width:520px;height:520px;left:-200px;top:-300px;border-radius:50%;background:radial-gradient(circle,rgba(62,217,139,.42),transparent 66%);filter:blur(34px);pointer-events:none}
.pg-v2 .timeline.stepper.dark .step{z-index:1}
/* text */
.pg-v2 .timeline.stepper.dark .step .no{color:rgba(220,235,250,.5)}
.pg-v2 .timeline.stepper.dark .step b{color:rgba(255,255,255,.6)}
.pg-v2 .timeline.stepper.dark .step small{color:rgba(220,235,250,.5)}
.pg-v2 .timeline.stepper.dark .step.is-active .no{color:var(--mint-2)}
.pg-v2 .timeline.stepper.dark .step.is-active b{color:#fff}
.pg-v2 .timeline.stepper.dark .step.is-active small{color:#C9DCEA}
.pg-v2 .timeline.stepper.dark .step.is-done .no{color:var(--sky)}
.pg-v2 .timeline.stepper.dark .step.is-done b{color:#fff}
.pg-v2 .timeline.stepper.dark .step.is-done small{color:#B9CFE0}
/* nodes */
.pg-v2 .timeline.stepper.dark .step::before{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pg-v2 .timeline.stepper.dark .step:hover::before{background:rgba(255,255,255,.12)}
.pg-v2 .timeline.stepper.dark .step.is-active::before,.pg-v2 .timeline.stepper.dark .step.is-active:hover::before{background:var(--green);border-color:var(--mint-2);color:#fff;box-shadow:0 0 0 8px rgba(62,217,139,.2),0 14px 34px -8px rgba(31,161,83,.9);animation-name:fv-halo-dark}
.pg-v2 .timeline.stepper.dark .step.is-done::before,.pg-v2 .timeline.stepper.dark .step.is-done:hover::before{background:linear-gradient(135deg,var(--green),var(--teal));border-color:transparent;color:#fff;box-shadow:0 0 0 4px rgba(11,37,69,.55),0 10px 24px -10px rgba(31,161,83,.8)}
@keyframes fv-halo-dark{0%{box-shadow:0 0 0 6px rgba(62,217,139,.3),0 14px 34px -8px rgba(31,161,83,.9)}100%{box-shadow:0 0 0 22px rgba(62,217,139,0),0 14px 34px -8px rgba(31,161,83,.9)}}
/* connectors */
.pg-v2 .timeline.stepper.dark .step + .step::after{background:linear-gradient(90deg,var(--mint-2),var(--sky)) 0 0 / calc(var(--f) * 100%) 100% no-repeat,rgba(255,255,255,.14)}
@media (max-width:980px){
  .pg-v2 .timeline.stepper.dark .step:nth-child(n)::after{background:linear-gradient(180deg,var(--mint-2),var(--sky)) 0 0 / 100% calc(var(--f) * 100%) no-repeat,rgba(255,255,255,.14)}
  .pg-v2 .timeline.stepper.dark::before{background:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.5px) 0 0/18px 18px,linear-gradient(180deg,rgba(11,37,69,.9) 0%,rgba(11,37,69,.78) 50%,rgba(14,58,92,.7) 100%),var(--bg,none) center/cover no-repeat}
}

/* stepper fix: keep nodes above connectors on the dark variant — the photo and glow layers drop below the steps instead of the steps being lifted */
.pg-v2 .timeline.stepper.dark::before,.pg-v2 .timeline.stepper.dark::after{z-index:-1}
.pg-v2 .timeline.stepper.dark .step{z-index:auto}


/* ==========================================================================
   Product passport (.glance.passport) — the key-facts strip becomes a
   floating card that rises into the hero fade: four fact tiles on top and
   a meta strip (format / application / readout / regulatory) at the foot.
   ========================================================================== */
.pg-v2 .glance.passport{position:relative;z-index:3;margin-top:clamp(-72px,-5vw,-44px);padding:0;border:1px solid var(--line-2);border-radius:24px;background:#fff;box-shadow:0 40px 80px -40px rgba(8,28,56,.4),0 2px 0 rgba(255,255,255,.6) inset;overflow:hidden}
.pg-v2 .glance.passport::before{display:none}
.pg-v2 .glance.passport .glance-title{margin:0;padding:22px 30px 0;color:var(--muted)}
.pg-v2 .glance.passport .glance-title::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(31,161,83,.18)}
.pg-v2 .glance.passport .glance-title::after{background:var(--edge)}
/* fact tiles */
.pg-v2 .glance.passport .glance-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0;padding:18px 30px 24px}
.pg-v2 .glance.passport .glance-stats > div{position:relative;overflow:hidden;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:10px;text-align:left;padding:20px 22px 22px;border:1px solid var(--line-2);border-left:1px solid var(--line-2);border-radius:16px;background:linear-gradient(160deg,#F8FBFD,#F1F6F9);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s,background .3s}
.pg-v2 .glance.passport .glance-stats > div::before{content:"";position:absolute;inset:0;background:radial-gradient(220px circle at var(--mx,85%) var(--my,15%),rgba(62,217,139,.18),transparent 62%);opacity:0;transition:opacity .35s;pointer-events:none}
.pg-v2 .glance.passport .glance-stats > div:nth-child(even)::before{background:radial-gradient(220px circle at var(--mx,85%) var(--my,15%),rgba(11,168,188,.16),transparent 62%)}
.pg-v2 .glance.passport .glance-stats > div:hover{transform:translateY(-4px);background:#fff;border-color:var(--edge-hover);box-shadow:0 22px 40px -26px rgba(8,28,56,.35)}
.pg-v2 .glance.passport .glance-stats > div:hover::before{opacity:1}
.pg-v2 .glance.passport .glance-stats > div > *{position:relative;z-index:1}
.pg-v2 .glance.passport .glance-stats .l{display:inline-flex;align-items:center;gap:8px;margin:0;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.pg-v2 .glance.passport .glance-stats .l::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.pg-v2 .glance.passport .glance-stats .n.sm{font-family:var(--head);font-size:clamp(22px,1.9vw,29px);line-height:1.1;letter-spacing:-.02em;color:var(--ink-2)}
.pg-v2 .glance.passport .glance-stats .n.green{color:var(--green)}
/* meta strip */
.pg-v2 .glance.passport .glance-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;padding:0;border-top:1px solid var(--edge);background:#FAFCFD}
.pg-v2 .glance.passport .glance-cols > div{padding:18px 30px 20px;border-left:1px solid var(--edge);transition:background .3s}
.pg-v2 .glance.passport .glance-cols > div:first-child{border-left:none}
.pg-v2 .glance.passport .glance-cols > div:hover{background:#fff}
.pg-v2 .glance.passport .glance-cols h4{margin:0 0 8px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pg-v2 .glance.passport .glance-cols ul{margin:0;padding:0;list-style:none}
.pg-v2 .glance.passport .glance-cols li{position:relative;padding-left:24px;font-family:var(--grot);font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--ink-2);line-height:1.4;transition:color .2s}
.pg-v2 .glance.passport .glance-cols li::before{content:"\2713";left:0;top:2px;width:16px;height:16px;border-radius:50%;background:var(--tint-green);color:var(--green);font-size:9px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;transition:background .25s,color .25s}
.pg-v2 .glance.passport .glance-cols > div:hover li{color:var(--green-dark)}
.pg-v2 .glance.passport .glance-cols > div:hover li::before{background:var(--green);color:#fff}
@media (max-width:900px){
  .pg-v2 .glance.passport{margin-top:-36px;border-radius:20px}
  .pg-v2 .glance.passport .glance-title{padding:20px 22px 0}
  .pg-v2 .glance.passport .glance-stats{grid-template-columns:repeat(2,1fr);gap:10px;padding:16px 22px 20px}
  .pg-v2 .glance.passport .glance-stats > div{padding:16px 16px 18px;border-radius:14px}
  .pg-v2 .glance.passport .glance-cols{grid-template-columns:repeat(2,1fr)}
  .pg-v2 .glance.passport .glance-cols > div{padding:16px 22px 18px}
  .pg-v2 .glance.passport .glance-cols > div:nth-child(3){border-left:none}
  .pg-v2 .glance.passport .glance-cols > div:nth-child(n+3){border-top:1px solid var(--edge)}
}
@media (max-width:600px){
  .pg-v2 .glance.passport .glance-stats{grid-template-columns:1fr 1fr}
  .pg-v2 .glance.passport .glance-stats .n.sm{font-size:20px}
  .pg-v2 .glance.passport .glance-cols{grid-template-columns:1fr}
  .pg-v2 .glance.passport .glance-cols > div{border-left:none;border-top:1px solid var(--edge)}
  .pg-v2 .glance.passport .glance-cols > div:first-child{border-top:none}
}

/* Contact form: honeypot field (never shown) and server-side error list. */
.pg-v2 .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pg-v2 .form-errors{background:#FDECEA;border:1px solid #F1C4BE;color:#C0392B;border-radius:10px;
  padding:12px 16px;margin-bottom:16px;font-weight:600;font-size:14.5px}
.pg-v2 .form-errors div + div{margin-top:4px}

/* ==========================================================================
   Submit-button loader
   --------------------------------------------------------------------------
   Every submit button gets a spinner the moment its form is sent, so a slow
   network never looks like a dead button — that is what makes people press it
   again and send the form twice.

   The label keeps its place rather than being replaced: swapping the text
   would change the button's width and make the whole row jump. Instead the
   label fades to transparent and the spinner sits on top, so the button holds
   exactly the size it had.
   ========================================================================== */
.btn.is-loading,
.foot-news button.is-loading{
  position:relative;pointer-events:none;cursor:progress;
  transform:none !important;
}
.btn.is-loading > *,
.foot-news button.is-loading > *{visibility:hidden}
.btn.is-loading{color:transparent !important}
.foot-news button.is-loading{color:transparent !important}

.btn.is-loading::before,
.foot-news button.is-loading::before{
  content:"";position:absolute;top:50%;left:50%;width:17px;height:17px;margin:-8.5px 0 0 -8.5px;
  border-radius:50%;border:2px solid currentColor;border-top-color:transparent;border-right-color:transparent;
  animation:fobe-spin .62s linear infinite;
  /* currentColor is transparent on the button itself, so the ring needs its
     own colour. Light rings on solid buttons, green on the pale ones. */
  border-color:rgba(255,255,255,.35);border-top-color:#fff;
}
.btn-ghost.is-loading::before,
.btn-light.is-loading::before{border-color:rgba(31,161,83,.28);border-top-color:var(--green)}

/* The shine sweep on a primary button would keep running under the spinner. */
.btn.is-loading::after{animation:none !important;opacity:0}

@keyframes fobe-spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .btn.is-loading::before,
  .foot-news button.is-loading::before{animation-duration:1.6s}
}


/* ==========================================================================
   Thank you page — the "enquiry ticket"
   --------------------------------------------------------------------------
   A completed form is shown the way a sample is logged at a testing desk: a
   reference, a timestamp, and a status timeline whose first step ticks itself
   off on arrival. The tick draws once and stops — a looping animation on a
   confirmation reads as "still working".
   ========================================================================== */
.pg-thanks .ty-hero{min-height:auto;padding-bottom:clamp(56px,7vw,92px)}
.pg-thanks .ty-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,440px);gap:clamp(28px,5vw,72px);align-items:center}
.pg-thanks .ty-copy{max-width:600px}
.pg-thanks .ty-copy h1{font-size:clamp(34px,4.6vw,58px)}
.pg-thanks .hero-lead b{color:#fff;font-weight:700}

/* self-drawing tick */
.pg-thanks .ty-mark{color:var(--mint);margin-bottom:18px;display:inline-flex}
.pg-thanks .ty-mark svg{overflow:visible;filter:drop-shadow(0 6px 18px rgba(62,217,139,.35))}
.pg-thanks .ty-ring{stroke-dasharray:158;stroke-dashoffset:158;animation:ty-ring .8s var(--ease) .1s forwards}
.pg-thanks .ty-tick{stroke-dasharray:40;stroke-dashoffset:40;animation:ty-tick .45s var(--ease) .7s forwards}
@keyframes ty-ring{to{stroke-dashoffset:0}}
@keyframes ty-tick{to{stroke-dashoffset:0}}

.pg-thanks .ty-now{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.pg-thanks .ty-nowlead{display:block;color:#9FC0DA;font-size:12.5px;margin:0 0 12px;text-transform:uppercase;letter-spacing:.1em;font-weight:700}

/* ---- the ticket ---- */
.pg-thanks .ty-ticket{position:relative;background:#fff;color:var(--ink);border-radius:20px;
  box-shadow:0 30px 70px -30px rgba(3,14,30,.7),0 2px 0 rgba(255,255,255,.6) inset;
  opacity:0;transform:translateY(22px) rotate(.4deg);animation:ty-in .7s var(--ease) .55s forwards}
.pg-thanks .ty-ticket::before{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
  background:linear-gradient(135deg,rgba(11,168,188,.10),transparent 45%)}
.pg-thanks .ty-tk-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px 14px;
  border-bottom:1px dashed var(--line-2)}
.pg-thanks .ty-tk-brand{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--muted)}
.pg-thanks .ty-tk-status{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green-dark);background:#E7F6EE;border-radius:999px;padding:6px 11px}
.pg-thanks .ty-tk-status i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(31,161,83,.5);animation:ty-pulse 1.8s ease-out .9s 3}
@keyframes ty-pulse{0%{box-shadow:0 0 0 0 rgba(31,161,83,.55)}100%{box-shadow:0 0 0 9px rgba(31,161,83,0)}}

.pg-thanks .ty-tk-body{padding:20px 22px 8px}
.pg-thanks .ty-tk-lbl{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.pg-thanks .ty-tk-refrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pg-thanks .ty-tk-ref strong{font-family:var(--mono);font-weight:600;font-size:clamp(24px,2.4vw,30px);letter-spacing:.04em;color:var(--ink);line-height:1}
.pg-thanks .ty-copybtn{display:inline-flex;align-items:center;gap:6px;font:800 12.5px var(--sans);color:var(--teal);background:#E1F4F7;
  border:1px solid transparent;border-radius:999px;padding:7px 12px;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.pg-thanks .ty-copybtn:hover{background:var(--teal);color:#fff;transform:translateY(-1px)}
.pg-thanks .ty-copybtn.is-done{background:var(--green);color:#fff}
.pg-thanks .ty-tk-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 4px;padding:14px 0 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pg-thanks .ty-tk-meta dt{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 3px}
.pg-thanks .ty-tk-meta dd{margin:0;font-size:14.5px;font-weight:700;color:var(--ink)}

/* timeline */
.pg-thanks .ty-tl{list-style:none;margin:16px 0 8px;padding:0;position:relative}
.pg-thanks .ty-tl::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:2px;background:var(--line-2)}
.pg-thanks .ty-tl li{position:relative;display:flex;gap:14px;padding:0 0 18px}
.pg-thanks .ty-tl li:last-child{padding-bottom:10px}
.pg-thanks .ty-tl-dot{position:relative;z-index:1;flex:none;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:2px solid var(--line-2);color:#fff;margin-top:-1px}
.pg-thanks .ty-tl li.done .ty-tl-dot{background:var(--green);border-color:var(--green);animation:ty-pop .4s var(--ease) 1.1s both}
.pg-thanks .ty-tl li.active .ty-tl-dot{border-color:var(--teal);box-shadow:0 0 0 4px #E1F4F7}
.pg-thanks .ty-tl li.active .ty-tl-dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal);animation:ty-blink 1.6s ease-in-out infinite}
@keyframes ty-pop{0%{transform:scale(.4)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes ty-blink{0%,100%{opacity:.35}50%{opacity:1}}
.pg-thanks .ty-tl-txt{display:flex;flex-direction:column;gap:2px}
.pg-thanks .ty-tl-txt b{font-size:14.5px;color:var(--ink)}
.pg-thanks .ty-tl-txt small{font-size:13px;color:var(--body);line-height:1.5}
.pg-thanks .ty-tl li:not(.done):not(.active) .ty-tl-txt b{color:var(--muted)}

/* perforated stub + barcode */
.pg-thanks .ty-tk-stub{position:relative;padding:16px 22px 18px;border-top:1px dashed var(--line-2);background:var(--panel-2);border-radius:0 0 20px 20px}
.pg-thanks .ty-tk-stub::before,.pg-thanks .ty-tk-stub::after{content:"";position:absolute;top:-9px;width:18px;height:18px;border-radius:50%;background:#0B2545}
.pg-thanks .ty-tk-stub::before{left:-9px}
.pg-thanks .ty-tk-stub::after{right:-9px}
.pg-thanks .ty-bars{display:flex;align-items:flex-end;gap:2px;height:34px}
.pg-thanks .ty-bars i{display:block;height:100%;background:var(--ink);opacity:.85;border-radius:1px}
.pg-thanks .ty-bars-txt{display:block;margin-top:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--muted)}

@keyframes ty-in{to{opacity:1;transform:none}}

/* ---- light section: make the reply faster ---- */
.pg-thanks .ty-faster{margin-bottom:64px}
.pg-thanks .ty-faster .sec-head.split p{max-width:420px;color:var(--body);font-size:15px;margin:0}
.pg-thanks .ty-ready{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pg-thanks .ty-ready-item{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 20px 22px;display:flex;flex-direction:column;gap:8px;
  box-shadow:0 6px 18px rgba(8,28,56,.05);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.pg-thanks .ty-ready-item:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(8,28,56,.12)}
.pg-thanks .ty-ready-ic{width:40px;height:40px;border-radius:11px;background:#E1F4F7;color:var(--teal);display:inline-flex;align-items:center;justify-content:center;margin-bottom:4px}
.pg-thanks .ty-ready-item b{font-family:var(--head);font-size:16px;color:var(--ink)}
.pg-thanks .ty-ready-item small{font-size:13.5px;line-height:1.55;color:var(--body)}
.pg-thanks .ty-onward{margin-bottom:24px}

@media (max-width:980px){
  .pg-thanks .ty-grid{grid-template-columns:1fr}
  .pg-thanks .ty-ticket{max-width:520px}
  .pg-thanks .ty-ready{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .pg-thanks .ty-ready{grid-template-columns:1fr}
  .pg-thanks .ty-tk-meta{grid-template-columns:1fr}
  .pg-thanks .ty-tk-head{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .pg-thanks .ty-ring,.pg-thanks .ty-tick{animation:none;stroke-dashoffset:0}
  .pg-thanks .ty-ticket{animation:none;opacity:1;transform:none}
  .pg-thanks .ty-tk-status i,.pg-thanks .ty-tl li.done .ty-tl-dot,.pg-thanks .ty-tl li.active .ty-tl-dot::after{animation:none}
  .pg-thanks .ty-ready-item{transition:none}
}

/* ==========================================================================
   reCAPTCHA v3
   --------------------------------------------------------------------------
   Google's badge is hidden by default and revealed only while a form is on
   screen (site.js adds .rc-show to <html>). Hiding it is allowed provided the
   attribution below is shown instead — which is what .rc-note is for, so that
   line must never be removed.
   ========================================================================== */
.grecaptcha-badge{
  visibility:hidden;opacity:0;
  transition:opacity .35s ease,visibility .35s ease;
}
html.rc-show .grecaptcha-badge{visibility:visible;opacity:1}

.rc-note{margin:14px 0 0;font-size:12px;line-height:1.5;color:var(--faint)}
.rc-note a{color:var(--muted);text-decoration:underline}
.rc-note a:hover{color:var(--green)}

@media (prefers-reduced-motion:reduce){
  .grecaptcha-badge{transition:none}
}

/* Error-page reference id (Prompt C) — ties a page a visitor sees to the log. */
.pg-error .err-ref{margin-top:24px;font-size:14px;color:#B7D0E4}
.pg-error .err-ref code{font-family:var(--mono);font-size:13.5px;color:#fff;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);border-radius:7px;padding:3px 9px}
.pg-error .err-ref span{color:#8FB3CE;font-size:13px}

/* ==========================================================================
   Analyte / solution link cards — a more considered, catalogue-style card.
   Applies to the link minitiles (a.minitile) on the category, industry and
   product pages; the stat tiles (.minitile.stat) and the performance band are
   deliberately left untouched.

   The craft is in the restraint: a faint catalogue index, a clear title, a
   matrix line marked with a small node, a hairline rule, and a circular
   "explore" control that fills on hover. No gradients-for-the-sake-of-it.
   ========================================================================== */
.pg-v2 .minitiles{counter-reset:analyte;gap:16px}

.pg-v2 a.minitile:not(.stat){
  position:relative;isolation:isolate;overflow:hidden;
  min-height:168px;padding:22px 22px 18px;gap:9px;
  border:1px solid var(--edge);border-radius:14px;background:#fff;
  box-shadow:0 1px 2px rgba(8,36,58,.04);
  transition:border-color .25s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease),background .25s;
}

/* the catalogue index, quietly, top-right */
.pg-v2 a.minitile:not(.stat)::before{
  counter-increment:analyte;
  content:counter(analyte,decimal-leading-zero);
  position:absolute;top:16px;right:18px;z-index:2;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.04em;
  color:#C3D4E0;transition:color .25s;
}

/* title + matrix */
.pg-v2 a.minitile:not(.stat) b{font-family:var(--grot);font-weight:600;font-size:17.5px;
  color:var(--ink-2);line-height:1.28;letter-spacing:-.01em;max-width:88%}
.pg-v2 a.minitile:not(.stat) small{position:relative;padding-left:15px;font-size:13px;line-height:1.5;color:var(--muted)}
.pg-v2 a.minitile:not(.stat) small::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;
  border-radius:50%;background:var(--edge-hover);box-shadow:0 0 0 3px var(--tint-green);transition:background .25s}

/* the explore control: hairline rule + a circular arrow button */
.pg-v2 a.minitile:not(.stat) .go{
  margin-top:auto;width:100%;padding-top:15px;border-top:1px solid var(--edge);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:var(--grot);font-weight:600;font-size:13.5px;color:var(--ink-2);transition:color .25s}
.pg-v2 a.minitile:not(.stat) .go::after{
  content:"\2192";display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;border:1px solid var(--edge);
  color:#109C56;font-weight:600;transform:none;
  transition:background .25s,border-color .25s,color .25s,transform .3s var(--ease)}

/* hover — the whole card lifts, the index warms, the control fills */
.pg-v2 a.minitile:not(.stat):hover{border-color:var(--edge-hover);transform:translateY(-4px);
  box-shadow:0 26px 46px -28px rgba(8,36,58,.34)}
.pg-v2 a.minitile:not(.stat):hover::before{color:#109C56}
.pg-v2 a.minitile:not(.stat):hover .go{color:var(--green-dark)}
.pg-v2 a.minitile:not(.stat):hover .go::after{background:var(--green);border-color:var(--green);color:#fff;transform:translateX(2px)}
.pg-v2 a.minitile:not(.stat):hover small::before{background:var(--green)}
.pg-v2 a.minitile:not(.stat):focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* featured card — a quiet left accent and tint, not a flat green fill */
.pg-v2 a.minitile.hl:not(.stat){background:linear-gradient(180deg,#F6FBF8,#fff);border-color:#BFE6CF;padding-left:24px}
.pg-v2 a.minitile.hl:not(.stat)::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;z-index:2;
  background:linear-gradient(180deg,var(--green),var(--teal));opacity:1}
.pg-v2 a.minitile.hl:not(.stat) b{color:var(--green-dark)}
.pg-v2 a.minitile.hl:not(.stat)::before{color:#7FC6A0}
.pg-v2 a.minitile.hl:not(.stat) .go::after{background:var(--green);border-color:var(--green);color:#fff}

/* ── Accessibility: skip-to-content link (WCAG 2.4.1 Bypass Blocks) ─────── */
.skip-link{position:absolute;left:8px;top:-48px;z-index:2000;background:#1FA153;color:#fff;
  padding:10px 18px;border-radius:0 0 10px 10px;font:700 14px/1 'Sora',system-ui,sans-serif;
  text-decoration:none;transition:top .2s ease}
.skip-link:focus{top:0;outline:3px solid #0B2545;outline-offset:2px}

/* ==========================================================================
   Contact page motion (body.pg-contact only)
   Rides the [data-reveal] / [data-stagger] IntersectionObserver already in
   assets/js/site.js — no new library and no extra request. The global
   prefers-reduced-motion block above neutralises every animation here.
   ========================================================================== */
@keyframes fx-pop{0%{opacity:0;transform:translateX(-50%) scale(.35)}62%{opacity:1;transform:translateX(-50%) scale(1.14)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes fx-halo{0%{opacity:.55;transform:translate(-50%,-50%) scale(.85)}70%{opacity:0;transform:translate(-50%,-50%) scale(2)}100%{opacity:0;transform:translate(-50%,-50%) scale(2)}}
@keyframes fx-trace{0%{background-position:140% 0}52%{background-position:-40% 0}100%{background-position:-40% 0}}
@keyframes fx-drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(32px,-24px) scale(1.12)}}
@keyframes fx-river{0%{background-position:0 0}100%{background-position:200% 0}}
@keyframes fx-underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fx-beacon{0%,100%{box-shadow:0 8px 20px rgba(31,161,83,.28),0 0 0 0 rgba(31,161,83,.38)}50%{box-shadow:0 8px 20px rgba(31,161,83,.28),0 0 0 13px rgba(31,161,83,0)}}

/* ---- Enquiry band: ambient light drifting behind the panel ---- */
.pg-contact .fx-next{position:relative;overflow:hidden}
.pg-contact .fx-next::before,.pg-contact .fx-next::after{content:"";position:absolute;border-radius:50%;filter:blur(64px);pointer-events:none;z-index:0}
.pg-contact .fx-next::before{width:420px;height:420px;top:-170px;left:-130px;background:radial-gradient(circle,rgba(31,161,83,.20),transparent 68%);animation:fx-drift 19s ease-in-out infinite}
.pg-contact .fx-next::after{width:470px;height:470px;bottom:-210px;right:-150px;background:radial-gradient(circle,rgba(11,168,188,.18),transparent 68%);animation:fx-drift 25s ease-in-out -8s infinite}
.pg-contact .fx-next > *{position:relative;z-index:1}

/* ---- The accent word draws its own underline as the heading arrives ---- */
.pg-contact .fx-next .sec-head h2 .accent{position:relative}
.pg-contact .fx-next .sec-head h2 .accent::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.09em;border-radius:99px;background:var(--bar);transform:scaleX(0);transform-origin:left}
.pg-contact .fx-next .sec-head.is-in h2 .accent::after{animation:fx-underline .7s .45s var(--ease) forwards}

/* ---- Connector rail: a light pulse runs it left to right, on a loop ---- */
.pg-contact .timeline.flow::after{content:"";position:absolute;left:6%;right:6%;top:30px;height:3px;border-radius:3px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%);background-size:250% 100%;background-position:140% 0;
  transition:opacity .4s var(--ease)}
.pg-contact .timeline.flow.is-in::after{opacity:1;animation:fx-trace 3.6s 1.5s linear infinite}

/* ---- Number badges pop in on reveal, then take turns pulsing a halo ----
   fill-mode is `backwards`, not `both`, so the existing :hover scale on
   .no (line ~1133) still wins once the pop has finished. */
.pg-contact .timeline.flow.is-in .step .no{animation:fx-pop .62s var(--ease) backwards;animation-delay:calc(var(--d,0s) + .35s)}
.pg-contact .timeline.flow .step .no::after{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;border-radius:50%;border:2px solid var(--green);opacity:0;transform:translate(-50%,-50%) scale(.85);pointer-events:none}
.pg-contact .timeline.flow .step:nth-child(even) .no::after{border-color:var(--teal)}
.pg-contact .timeline.flow.is-in .step .no::after{animation:fx-halo 4.4s ease-out infinite}
.pg-contact .timeline.flow.is-in .step:nth-child(1) .no::after{animation-delay:1.7s}
.pg-contact .timeline.flow.is-in .step:nth-child(2) .no::after{animation-delay:2.3s}
.pg-contact .timeline.flow.is-in .step:nth-child(3) .no::after{animation-delay:2.9s}
.pg-contact .timeline.flow.is-in .step:nth-child(4) .no::after{animation-delay:3.5s}

/* ---- Cards lift further and glow in their own accent ---- */
.pg-contact .timeline.flow .step{transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s}
.pg-contact .timeline.flow .step:hover{transform:translateY(-9px);box-shadow:0 26px 48px -18px rgba(31,161,83,.36);border-color:#BFE6CE}
.pg-contact .timeline.flow .step:nth-child(even):hover{box-shadow:0 26px 48px -18px rgba(11,168,188,.36);border-color:#B6E6EC}

/* ---- Consultation form: living rail, lifted focus, a CTA that announces
   itself three times when the form first scrolls into view ---- */
.pg-contact .formcard::before{background:linear-gradient(90deg,#109C56,#17B0BC,#3ED98B,#109C56);background-size:200% 100%;animation:fx-river 7s linear infinite}
.pg-contact .formcard .field input,.pg-contact .formcard .field select,.pg-contact .formcard .field textarea{transition:border-color .25s,box-shadow .25s,background-color .25s,transform .25s var(--ease)}
.pg-contact .formcard .field input:focus,.pg-contact .formcard .field select:focus,.pg-contact .formcard .field textarea:focus{transform:translateY(-2px);box-shadow:0 0 0 3px rgba(31,161,83,.14),0 10px 22px -12px rgba(31,161,83,.55)}
.pg-contact .formcard .field label{transition:color .25s}
.pg-contact .formcard .field:focus-within label{color:var(--green)}
.pg-contact .split.is-in .formcard .btn-primary{animation:fx-beacon 2.6s 1.1s var(--ease) 3}
.pg-contact .formcard .btn-primary:hover{animation:none}

/* ---- Head-office rows and route links answer the cursor ---- */
.pg-contact .aside-card .contact-list .ic{transition:transform .35s var(--ease),background .3s,color .3s}
.pg-contact .contact-list .row:hover .ic{transform:translateY(-2px) rotate(-6deg) scale(1.08);background:var(--bar);color:#fff}
.pg-contact .box-row.dot{position:relative;transition:background .25s,padding-left .25s var(--ease)}
.pg-contact .box-row.dot:hover{background:#F6FBF8;padding-left:28px}
.pg-contact .box-row.dot::before{transition:transform .25s var(--ease),background .25s}
.pg-contact .box-row.dot:hover::before{transform:scale(1.45);background:var(--green)}
.pg-contact .box-row.dot::after{content:"\2192";margin-left:auto;color:var(--green);opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s var(--ease)}
.pg-contact .box-row.dot:hover::after{opacity:1;transform:none}

/* ---- Stacked layouts have no rail to trace ---- */
@media (max-width:980px){
  .pg-contact .timeline.flow::after{display:none}
}

/* ==========================================================================
   Blog (blog.php) — cards, scroll-snap carousel, filter, article layout.
   Built on the theme tokens; motion respects prefers-reduced-motion.
   ========================================================================== */
.pg-blog .bsection{margin:0 0 72px}
.pg-blog .bsection.tight{margin-bottom:56px}

/* card */
.bcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:0 6px 18px rgba(8,28,56,.06);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.bcard:hover,.bcard:focus-visible{transform:translateY(-6px);box-shadow:0 22px 44px rgba(8,28,56,.14);border-color:#d5e3ee}
.bcard:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.bimg{position:relative;display:block;aspect-ratio:16/10;background:var(--panel);overflow:hidden}
.bimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.bcard:hover .bimg img{transform:scale(1.06)}
.bimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,37,69,0) 55%,rgba(11,37,69,.28))}
.btag{position:absolute;left:14px;top:14px;z-index:1;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:rgba(11,37,69,.72);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 11px}
.bbody{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;flex:1}
.bbody h3{font-family:var(--head);font-size:18px;line-height:1.3;color:var(--ink);margin:0;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bbody p{font-size:14px;line-height:1.6;color:var(--body);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bmeta{margin-top:auto;padding-top:10px;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--muted)}
.bmeta i{width:4px;height:4px;border-radius:50%;background:var(--teal);display:inline-block}
.bcard .bbody::after{content:"Read article \2192";font-size:13px;font-weight:800;color:var(--green);margin-top:4px;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.bcard:hover .bbody::after,.bcard:focus-visible .bbody::after{opacity:1;transform:none}

/* grid */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:1024px){.bgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.bgrid{grid-template-columns:1fr}}

/* carousel — native scroll-snap, no scroll-jacking */
.bcarousel{position:relative}
.btrack{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:6px 6px 18px;margin:-6px -6px 0;
  scrollbar-width:none;cursor:grab;scroll-padding-inline:6px}
.btrack::-webkit-scrollbar{display:none}
.btrack.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.btrack.dragging .bcard{pointer-events:none}
.btrack:focus-visible{outline:3px solid var(--teal);outline-offset:4px;border-radius:14px}
.bcard.slide{flex:0 0 clamp(270px,31vw,390px);scroll-snap-align:start}
.bcontrols{display:flex;gap:8px;align-self:flex-end}
.bnav{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--card);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .25s,color .25s,transform .25s,border-color .25s}
.bnav:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px)}
.bnav:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.bnav[disabled]{opacity:.35;cursor:default;transform:none;background:var(--card);color:var(--ink)}
.bprogress{height:3px;background:var(--line);border-radius:3px;margin:6px 6px 0;overflow:hidden}
.bprogress span{display:block;height:100%;width:20%;background:linear-gradient(90deg,var(--teal),var(--green));border-radius:3px;transition:width .2s,transform .2s}

/* filter chips */
.bfilter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.bchip{font:inherit;font-size:12.5px;font-weight:800;letter-spacing:.04em;color:var(--ink);background:#EAF2F7;border:1px solid var(--line-2);border-radius:999px;padding:8px 14px;cursor:pointer;min-height:36px;transition:background .2s,color .2s,transform .2s}
.bchip:hover{transform:translateY(-1px)}
.bchip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.bchip:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.bempty{color:var(--muted);text-align:center;padding:30px 0}

/* article */
.barticle .bhero{position:relative;min-height:clamp(320px,46vh,520px);display:flex;align-items:flex-end;color:#fff;background:#0B2545 var(--img) center/cover no-repeat;isolation:isolate}
.barticle .bhero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,37,69,.25) 0%,rgba(11,37,69,.78) 70%,#0B2545 100%);z-index:-1}
.bhero-in{width:min(1100px,100% - 2*var(--pad));margin:0 auto;padding:clamp(48px,7vw,84px) 0 clamp(36px,5vw,56px)}
.bhero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:13px;font-weight:700;color:#BFD3E6;margin-bottom:14px}
.bhero-meta .btag{position:static}
.barticle h1{font-size:clamp(28px,4.4vw,52px);line-height:1.12;letter-spacing:-.02em;margin:0;max-width:860px;color:#fff}
.bhero-lead{font-size:clamp(15px,1.6vw,18px);line-height:1.65;color:#DCE7F1;max-width:760px;margin:16px 0 0}
.bwrap{width:min(1100px,100% - 2*var(--pad));margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;padding:clamp(36px,5vw,64px) 0}
@media (max-width:960px){.bwrap{grid-template-columns:1fr}}
.bbody-prose{font-size:17px;line-height:1.8;color:var(--body);max-width:760px}
.bbody-prose h3{font-family:var(--head);color:var(--ink);font-size:clamp(20px,2.2vw,26px);line-height:1.25;margin:38px 0 12px;letter-spacing:-.01em}
.bbody-prose h3:first-child{margin-top:0}
.bbody-prose p{margin:0 0 18px}
.bbody-prose ul,.bbody-prose ol{margin:0 0 20px;padding-left:22px}
.bbody-prose li{margin:0 0 8px}
.bbody-prose strong{color:var(--ink)}
.bside{display:flex;flex-direction:column;gap:18px;position:sticky;top:96px;align-self:start}
.bside-card{background:#0B2545;color:#DCE7F1;border-radius:18px;padding:24px}
.bside-card h3{color:#fff;font-size:19px;margin:8px 0 8px;line-height:1.3}
.bside-card p{font-size:14px;line-height:1.6;margin:0 0 16px}
.bside-card .eyebrow{color:#4FD9E8}
.bside-card.soft{background:var(--panel);color:var(--body)}
.bside-card.soft .eyebrow{color:var(--teal)}
.bside-link{display:block;padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink);font-weight:700;text-decoration:none}
.bside-link:last-child{border-bottom:0}
.bside-link:hover{color:var(--green)}
.barticle .bsection{width:min(1100px,100% - 2*var(--pad));margin:0 auto 72px;padding:clamp(28px,4vw,44px);border-radius:22px}

@media (prefers-reduced-motion:reduce){
  .bcard,.bimg img,.bnav,.bchip,.bprogress span{transition:none}
  .bcard:hover{transform:none} .bcard:hover .bimg img{transform:none}
}

/* ==========================================================================
   Testimonials (includes/public/testimonials.php)
   ========================================================================== */
.tcard{position:relative;display:flex;flex-direction:column;gap:16px;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:28px 26px 24px;margin:0;box-shadow:0 6px 18px rgba(8,28,56,.06);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.tcard:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(8,28,56,.13);border-color:#d5e3ee}
.tcard .tquote{color:var(--mint);opacity:.55}
.tcard blockquote{margin:0;font-size:15.5px;line-height:1.7;color:var(--body);flex:1}
.tcard figcaption{display:flex;align-items:center;gap:13px;margin-top:2px;padding-top:16px;border-top:1px solid var(--line)}
.tavatar{width:46px;height:46px;border-radius:50%;overflow:hidden;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--green),var(--teal));color:#fff;font-family:var(--head);font-weight:800;font-size:16px}
.tavatar img{width:100%;height:100%;object-fit:cover;display:block}
.tmeta{display:flex;flex-direction:column;line-height:1.3}
.tmeta b{font-family:var(--head);font-weight:700;color:var(--ink);font-size:15px}
.tmeta small{color:var(--muted);font-size:13px;font-weight:600}

/* Section layout: a centred head (the pg-v2 h2 margin otherwise pins the
   heading box left), a pill eyebrow instead of the dash rules, and cards that
   centre whatever their count — two cards sit in the middle, not in two of
   three columns. */
#testimonials .sec-head{max-width:760px;margin-left:auto;margin-right:auto}
#testimonials .sec-head h2{margin-left:auto;margin-right:auto}
#testimonials .eyebrow{padding:7px 16px;border-radius:999px;background:var(--tint-teal);box-shadow:inset 0 0 0 1px rgba(11,168,188,.18);letter-spacing:.2em}
#testimonials .eyebrow::before,#testimonials .eyebrow::after{display:none}
.tgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.tgrid > .tcard{flex:1 1 340px;max-width:460px}
#testimonials .tcard{padding:34px 30px 26px;border-radius:22px;border-color:var(--line-2,#E6EFF5);overflow:hidden;
  box-shadow:0 24px 50px -38px rgba(8,28,56,.35)}
#testimonials .tcard::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--green),var(--teal))}
#testimonials .tcard .tquote{width:44px;height:44px;padding:10px;border-radius:14px;opacity:1;color:var(--green);
  background:linear-gradient(145deg,var(--tint-green),#fff);box-shadow:inset 0 0 0 1px #D2ECDD}
#testimonials .tcard blockquote{font-size:16px;line-height:1.75;color:var(--ink-2,#2B4257)}
#testimonials .tcard figcaption{gap:14px;padding-top:18px}
#testimonials .tavatar{width:50px;height:50px;font-size:17px;letter-spacing:.02em;box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(11,168,188,.22)}
@media (max-width:600px){
  .tgrid > .tcard{flex-basis:100%;max-width:none}
  #testimonials .tcard{padding:28px 22px 22px}
}

/* Knowledge article: on phones the two CTAs stack full-width rather than
   sharing a row and wrapping their labels. */
@media (max-width:600px){.pg-knowledge .kb-article .hero-cta .btn{flex:1 1 100%;justify-content:center}}

/* ==========================================================================
   Industry cards (.numrows.cards) — replaces the flat numbered list on the
   flagship pages. A 3-up grid of white cards on the panel band: oversized
   gradient numeral, icon chip, title, one line of context and an arrow link.
   Motion: staggered reveal (data-stagger), cursor spotlight (--mx/--my from
   site.js), lift + numeral/icon micro-motion on hover, and a green→teal bar
   that draws along the bottom edge. Honours prefers-reduced-motion via the
   global reveal rules.
   ========================================================================== */
.pg-v2 .numrows.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;background:transparent;border:0;border-radius:0;overflow:visible;counter-reset:fvrow}
.pg-v2 .numrows.cards > a{position:relative;display:flex;flex-direction:column;gap:10px;min-height:100%;padding:26px 24px 26px;background:#fff;border:1px solid var(--line-2);border-radius:18px;overflow:hidden;color:inherit;text-decoration:none;counter-increment:fvrow;box-shadow:0 18px 40px -34px rgba(8,28,56,.3);transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .3s}
.pg-v2 .numrows.cards > a:hover{transform:translateY(-6px);border-color:var(--edge-hover);box-shadow:0 30px 60px -30px rgba(8,28,56,.34)}
/* numeral (top-right, gradient-clipped) */
.pg-v2 .numrows.cards > a::before{content:counter(fvrow,decimal-leading-zero);position:absolute;top:14px;right:18px;padding:0;min-width:0;font-family:var(--grot);font-size:44px;font-weight:700;line-height:1;letter-spacing:-.04em;color:transparent;background:linear-gradient(135deg,var(--num),#D5E3EC);-webkit-background-clip:text;background-clip:text;transition:transform .45s var(--ease),background .4s}
.pg-v2 .numrows.cards > a:hover::before{transform:translateY(-3px) scale(1.06);background:linear-gradient(135deg,var(--green),var(--teal));-webkit-background-clip:text;background-clip:text}
/* cursor spotlight layer */
.pg-v2 .numrows.cards .glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(260px circle at var(--mx,30%) var(--my,20%),rgba(62,217,139,.16),transparent 62%);opacity:0;transition:opacity .4s}
.pg-v2 .numrows.cards > a:hover .glow{opacity:1}
/* icon chip */
.pg-v2 .numrows.cards .ic{position:relative;width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;color:var(--green);background:linear-gradient(145deg,var(--tint-green),#fff);border:1px solid #D2ECDD;box-shadow:0 10px 22px -14px rgba(31,161,83,.45);transition:transform .45s var(--ease),box-shadow .4s}
.pg-v2 .numrows.cards > a:nth-child(even) .ic{color:var(--teal);background:linear-gradient(145deg,var(--tint-teal),#fff);border-color:#CDE8EE;box-shadow:0 10px 22px -14px rgba(11,168,188,.45)}
.pg-v2 .numrows.cards .ic svg{width:24px;height:24px}
.pg-v2 .numrows.cards > a:hover .ic{transform:translateY(-3px) rotate(-6deg) scale(1.06);box-shadow:0 16px 28px -14px rgba(31,161,83,.55)}
/* text */
.pg-v2 .numrows.cards .txt{position:relative;gap:8px;padding-top:6px}
.pg-v2 .numrows.cards h3{font-size:19px;letter-spacing:-.012em;line-height:1.25}
.pg-v2 .numrows.cards p{font-size:14.5px;line-height:1.6;max-width:34ch}
.pg-v2 .numrows.cards .go{margin-top:auto;padding-top:10px;font-family:var(--grot);font-size:14px;font-weight:600;color:#109C56;gap:8px}
.pg-v2 .numrows.cards .go::after{content:"\2192";display:inline-block;transform:translateX(var(--arrowX,0));transition:transform .3s var(--ease)}
.pg-v2 .numrows.cards > a:hover .go{--arrowX:5px;color:var(--green-dark)}
/* bottom bar draws left→right on hover */
.pg-v2 .numrows.cards > a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--green),var(--teal));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.pg-v2 .numrows.cards > a:hover::after{transform:scaleX(1)}
@media (max-width:1000px){.pg-v2 .numrows.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pg-v2 .numrows.cards{grid-template-columns:1fr;gap:14px}.pg-v2 .numrows.cards > a{padding:22px 20px}.pg-v2 .numrows.cards > a::before{font-size:36px;top:12px;right:16px}.pg-v2 .numrows.cards p{max-width:none}}

/* Product filters on the generic solution pages: hidden cards drop out of the
   grid; the count chip sits inline with the selects. */
.pg-v2 .grid > .pcard[hidden]{display:none !important}
/* Knowledge Centre topic filter hides cards with [hidden]; .card's display:flex would otherwise keep them on screen */
.pg-v2 .grid > .card[hidden]{display:none !important}
.pg-v2 .filters .pf-count{margin-left:auto;background:transparent;border:1px dashed var(--line-2);color:var(--muted);cursor:default}
.pg-v2 .filters .pf-count a{color:var(--green);font-weight:600}
@media (max-width:640px){.pg-v2 .filters .pf-count{margin-left:0}}

/* (category Overview and product Details share one full-width, left-aligned layout —
   the .article-body rules above; no centred reading column, per user preference) */

/* Method / product-type cards ("Choose your technology") — replaces the flat
   1px-gap .cells for this section: icon chip + mono index, title, sub-label,
   one-line definition, count pill and arrow; gradient bar draws on hover. */
.pg-v2 .methods{display:grid;gap:18px}
.pg-v2 .methods.c1{grid-template-columns:minmax(0,560px)}
.pg-v2 .methods.c2{grid-template-columns:repeat(2,1fr)}
.pg-v2 .methods.c3{grid-template-columns:repeat(3,1fr)}
.pg-v2 .method{position:relative;display:flex;flex-direction:column;padding:26px 26px 22px;background:#fff;border:1px solid var(--line-2);border-radius:18px;color:inherit;text-decoration:none;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s}
.pg-v2 .method::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--green),var(--teal));transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.pg-v2 .method:hover{transform:translateY(-4px);border-color:var(--edge-hover);box-shadow:var(--lift)}
.pg-v2 .method:hover::before{transform:scaleX(1)}
.pg-v2 .method .mhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.pg-v2 .method .mi{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(150deg,#EAF6EF,#E5F6F8);color:var(--green-dark);box-shadow:inset 0 0 0 1px rgba(16,156,86,.12);transition:transform .35s var(--ease)}
.pg-v2 .method:hover .mi{transform:rotate(-6deg) scale(1.06)}
.pg-v2 .method .mn{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;color:var(--teal)}
.pg-v2 .method h3{font-family:var(--grot);font-size:20px;font-weight:700;letter-spacing:-.015em;line-height:1.2;color:var(--ink);margin:0}
.pg-v2 .method small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin:7px 0 0}
.pg-v2 .method p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:12px 0 0}
.pg-v2 .method .mf{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between;border-top:1px dashed var(--line-2);margin-top:20px}
.pg-v2 .method .mf b{font-size:13px;font-weight:700;color:var(--green-dark);background:var(--tint-green);padding:6px 12px;border-radius:999px}
.pg-v2 .method .mf i{font-style:normal;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:15px;transition:transform .3s var(--ease),background .3s}
.pg-v2 .method:hover .mf i{transform:translateX(4px);background:var(--green)}
@media (max-width:1100px){.pg-v2 .methods.c3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.pg-v2 .methods.c2,.pg-v2 .methods.c3{grid-template-columns:1fr}.pg-v2 .method{padding:22px 20px 18px}}

/* Adaptive column counts for short ranges (no empty slots) */
.pg-v2 .minitiles.c2{grid-template-columns:repeat(2,1fr)}
.pg-v2 .grid.c1{grid-template-columns:minmax(0,440px)}
.pg-v2 .grid.c2{grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){.pg-v2 .minitiles.c2,.pg-v2 .grid.c2{grid-template-columns:1fr}}

/* ---- Website 2.0 hub pages: partners, ingredients, search ------------------ */
/* Partner cards (/partners) */
.pg-v2 .partners{gap:18px}
.pg-v2 .partner{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-2);border-radius:18px;padding:22px 24px 20px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s}
.pg-v2 .partner:hover{transform:translateY(-4px);border-color:var(--edge-hover);box-shadow:var(--lift)}
.pg-v2 .partner .plogo{height:74px;display:flex;align-items:center;justify-content:flex-start;margin-bottom:16px;padding-bottom:16px;border-bottom:1px dashed var(--line-2)}
.pg-v2 .partner .plogo img{max-height:56px;max-width:190px;width:auto;height:auto;object-fit:contain}
.pg-v2 .partner .pname{font-family:var(--grot);font-weight:800;font-size:20px;color:var(--ink);letter-spacing:-.01em}
.pg-v2 .partner h3{font-family:var(--grot);font-size:19px;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin:0}
.pg-v2 .partner p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:10px 0 0}
.pg-v2 .partner .pfoot{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pg-v2 .partner .pcount{font-size:13.5px;font-weight:700;color:var(--green-dark);background:var(--tint-green);padding:7px 13px;border-radius:999px;text-decoration:none}
.pg-v2 .partner .pcount:hover{background:#D9F1E4}
.pg-v2 .partner .psite{font-size:13.5px;font-weight:700;color:var(--teal);text-decoration:none}

/* ---- Certifications page: claim-handling flow + commitments, document register ---- */
.pg-v2 .cflow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
.pg-v2 .cstep{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-2);border-radius:18px;padding:24px 22px 22px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s}
.pg-v2 .cstep:hover{transform:translateY(-4px);border-color:var(--edge-hover);box-shadow:var(--lift)}
.pg-v2 .cstep:not(:last-child)::after{content:"";position:absolute;right:-13px;top:42px;width:10px;height:10px;border-top:2px solid #B9CBDA;border-right:2px solid #B9CBDA;transform:rotate(45deg)}
.pg-v2 .cstep .cnum{width:46px;height:46px;border-radius:13px;background:linear-gradient(150deg,#0B2545,#134A7A);color:#fff;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.1em;display:grid;place-items:center;margin-bottom:18px;box-shadow:0 10px 22px -12px rgba(11,37,69,.7)}
.pg-v2 .cstep b{font-family:var(--grot);font-size:19px;font-weight:700;letter-spacing:-.015em;color:var(--ink);line-height:1.2}
.pg-v2 .cstep p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:9px 0 0}
.pg-v2 .cstep .ctag{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.pg-v2 .cvow{margin-top:20px;display:grid;grid-template-columns:minmax(240px,1fr) 2fr;background:linear-gradient(135deg,#0B2545 0%,#0E3055 100%);border-radius:20px;overflow:hidden;color:#fff}
.pg-v2 .cvow-hd{padding:30px 32px;border-right:1px solid rgba(255,255,255,.1)}
.pg-v2 .cvow-hd .eyebrow{color:#3ED98B}
.pg-v2 .cvow-hd h3{font-family:var(--grot);font-size:22px;font-weight:700;letter-spacing:-.015em;margin:8px 0 0;color:#fff}
.pg-v2 .cvow-hd p{font-size:14px;line-height:1.6;color:#A9C0D6;margin:10px 0 0}
.pg-v2 .cvow-list{list-style:none;margin:0;padding:10px 32px}
.pg-v2 .cvow-list li{display:flex;gap:16px;align-items:flex-start;padding:16px 0;font-size:15px;line-height:1.6;color:#E6EEF5;border-bottom:1px solid rgba(255,255,255,.1)}
.pg-v2 .cvow-list li:last-child{border-bottom:0}
.pg-v2 .cvow-list li span{flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(255,99,99,.16);color:#FF8A8A;font-weight:700;font-size:16px;line-height:1;margin-top:2px}
.pg-v2 .docs-wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:22px;align-items:start}
.pg-v2 .docreg{background:#fff;border:1px solid var(--line-2);border-radius:18px;overflow:hidden}
.pg-v2 .docreg-hd{display:flex;justify-content:space-between;padding:12px 22px;background:#F3F7FA;border-bottom:1px solid var(--line-2);font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pg-v2 .docrow{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:16px;padding:16px 22px;border-bottom:1px solid var(--line-2);transition:background .2s}
.pg-v2 .docrow:last-child{border-bottom:0}
.pg-v2 .docrow:hover{background:#FAFCFD}
.pg-v2 .dico{width:44px;height:44px;border-radius:12px;background:var(--tint-green);color:var(--green-dark);display:grid;place-items:center}
.pg-v2 .dico svg{width:22px;height:22px}
.pg-v2 .dname{font-family:var(--grot);font-size:15.5px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
.pg-v2 .dtag{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:#F3F7FA;border:1px solid var(--line-2);padding:5px 10px;border-radius:999px;white-space:nowrap}
.pg-v2 .dtag.lot{color:var(--green-dark);background:var(--tint-green);border-color:#CDEBDA}
.pg-v2 .docask{background:#fff;border:1px solid var(--line-2);border-radius:18px;padding:26px 26px 24px;position:relative;overflow:hidden}
.pg-v2 .docask::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--green),var(--teal))}
.pg-v2 .docask h3{font-family:var(--grot);font-size:20px;font-weight:700;letter-spacing:-.015em;line-height:1.25;color:var(--ink);margin:8px 0 0}
.pg-v2 .docask p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:12px 0 0}
.pg-v2 .docask ul{list-style:none;margin:12px 0 20px;padding:0;display:flex;flex-direction:column;gap:8px}
.pg-v2 .docask li{position:relative;padding-left:24px;font-size:14.5px;font-weight:600;color:var(--text-2)}
.pg-v2 .docask li::before{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;border-radius:50%;background:var(--tint-green);border:1px solid #CDEBDA}
.pg-v2 .docask li::after{content:"";position:absolute;left:4px;top:8px;width:5px;height:3px;border-left:1.6px solid var(--green-dark);border-bottom:1.6px solid var(--green-dark);transform:rotate(-45deg)}
@media (max-width:1000px){.pg-v2 .cflow{grid-template-columns:repeat(2,1fr)}.pg-v2 .cstep:nth-child(2)::after{display:none}.pg-v2 .docs-wrap{grid-template-columns:1fr}}
@media (max-width:760px){.pg-v2 .cvow{grid-template-columns:1fr}.pg-v2 .cvow-hd{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}}
@media (max-width:560px){.pg-v2 .cflow{grid-template-columns:1fr}.pg-v2 .cstep::after{display:none!important}.pg-v2 .docrow{grid-template-columns:40px 1fr;gap:12px}.pg-v2 .dtag{grid-column:2}}

/* ---- Certifications register: certificate cards (replaces table.spec in .record) ---- */
.pg-v2 .certs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.pg-v2 .crt{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-2);border-radius:18px;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s}
.pg-v2 .crt[hidden]{display:none}
.pg-v2 .crt:hover{transform:translateY(-4px);border-color:var(--edge-hover);box-shadow:var(--lift)}
.pg-v2 .crt-hd{display:grid;grid-template-columns:54px 1fr auto;gap:16px;align-items:center;padding:22px 24px 20px;border-bottom:1px solid var(--line-2);background:linear-gradient(180deg,#F8FBFD 0%,#fff 100%)}
.pg-v2 .crt-seal{width:54px;height:54px;border-radius:50%;border:1.5px dashed #8FD3B0;display:grid;place-items:center;background:#fff}
.pg-v2 .crt-seal span{width:36px;height:36px;border-radius:50%;background:linear-gradient(150deg,#1FA153,#0BA8BC);color:#fff;display:grid;place-items:center;box-shadow:0 8px 18px -8px rgba(16,156,86,.7)}
.pg-v2 .crt-seal svg{width:18px;height:18px}
.pg-v2 .crt-body{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green-dark)}
.pg-v2 .crt h3{font-family:var(--grot);font-size:19px;font-weight:700;letter-spacing:-.015em;line-height:1.25;color:var(--ink);margin:5px 0 0}
.pg-v2 .crt-no{align-self:start;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;color:#B9CBDA}
.pg-v2 .crt-grid{display:grid;grid-template-columns:1fr 1fr}
.pg-v2 .crt-cell{padding:16px 24px;border-bottom:1px solid var(--line-2);transition:background .2s}
.pg-v2 .crt-cell:nth-child(odd){border-right:1px solid var(--line-2)}
.pg-v2 .crt-cell:nth-last-child(-n+2){border-bottom:0}
.pg-v2 .crt-cell:hover{background:#F6FAF8}
.pg-v2 .crt-cell .k{display:block;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.pg-v2 .crt-cell .v{display:block;font-family:var(--grot);font-size:15.25px;font-weight:600;letter-spacing:-.005em;line-height:1.4;color:var(--ink-2)}
.pg-v2 .crt-ft{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;padding:14px 24px;border-top:1px solid var(--line-2);background:#F8FBFD;font-size:13.5px;color:var(--muted)}
.pg-v2 .crt-ft .doc{display:inline-flex;align-items:center;gap:9px;min-width:0}
.pg-v2 .crt-ft svg{flex:0 0 auto;width:17px;height:17px;color:var(--teal)}
.pg-v2 .crt-ft b{color:var(--ink-2);font-weight:600}
.pg-v2 .crt-ft a{font-weight:700;color:var(--green-dark);text-decoration:none;white-space:nowrap}
.pg-v2 .crt-ft a:hover{text-decoration:underline}
@media (max-width:960px){.pg-v2 .certs{grid-template-columns:1fr}}
@media (max-width:520px){.pg-v2 .crt-hd{grid-template-columns:46px 1fr;padding:18px 18px 16px}.pg-v2 .crt-no{display:none}.pg-v2 .crt-seal{width:46px;height:46px}.pg-v2 .crt-grid{grid-template-columns:1fr}.pg-v2 .crt-cell{padding:14px 18px}.pg-v2 .crt-cell:nth-child(odd){border-right:0}.pg-v2 .crt-cell:nth-last-child(-n+2){border-bottom:1px solid var(--line-2)}.pg-v2 .crt-cell:last-child{border-bottom:0}.pg-v2 .crt-ft{padding:12px 18px}}

/* ---- Global search popup (shared pages) — same look as the homepage overlay ---- */
#fobe-search[hidden]{display:none}
body.fsr-open{overflow:hidden}
@keyframes searchFade{from{opacity:0}to{opacity:1}}
@keyframes searchPop{from{opacity:0;transform:translateY(-16px) scale(.985)}to{opacity:1;transform:none}}
#fobe-search .no-scrollbar::-webkit-scrollbar{display:none}
#fobe-search .no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}
#fobe-search input::-webkit-search-cancel-button,#fobe-search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
#fobe-search .srch-row:hover{background:#F4F8FA}
#fobe-search .srch-row:hover .srch-title{color:#178A46}
#fobe-search .srch-row:hover .srch-arrow{opacity:1;transform:translateX(0)}
#fobe-search .srch-row:hover .srch-dot{transform:scale(1.5)}
#fobe-search .srch-chip:hover{background:#F2FAF5;border-color:#A9DCC2;color:#1FA153}
#fobe-search .srch-esc:hover{background:#EAF6EF;border-color:#A9DCC2;color:#1FA153}
#fobe-search [data-search-chips][hidden]{display:none}
@media (prefers-reduced-motion:reduce){#fobe-search [data-search-bg],#fobe-search [role="dialog"]{animation:none}}

/* Mega menu: a range with many items takes a full-width row of its own and lays
   its links out in columns, instead of wrapping alone and leaving the row empty. */
.sn-mega-col.wide{grid-column:span 3}
.sn-mega-col.wide .items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column;gap:12px 26px}
@media (max-width:1040px){.sn-mega-col.wide .items{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Article byline and sources (Website Redesign Blueprint 54 — content
   governance). Both are optional: an article with no reviewer renders neither. */
.kb-by{margin:12px 0 0;font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.kb-by b{color:#0B2545;font-weight:700}
.kb-by i{font-style:normal;opacity:.45}
/* Content governance block — the same on solutions, products, industries,
   technologies and articles (Website Redesign Blueprint 54). */
.gov{max-width:1100px;margin:34px auto 0;padding:22px 24px;background:#F4F8FB;border:1px solid #E3EDF4;border-radius:16px}
.gov h2{margin:0 0 12px;font-size:16px;letter-spacing:.02em;color:#0B2545}
.gov ol{margin:0;padding-left:20px;display:grid;gap:8px}
.gov li{font-size:14.5px;line-height:1.6;color:#33475B}
.gov a{color:#1FA153;text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.gov-meta{margin:14px 0 0;padding-top:13px;border-top:1px solid #E3EDF4;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;color:var(--muted,#5A6B7B)}
.gov-meta b{color:#0B2545;font-weight:700}
.gov-meta i{font-style:normal;opacity:.45}
.kb-article .gov{margin-left:0;margin-right:0}
@media (max-width:640px){.gov{padding:18px 16px}}
.cases a.go{text-decoration:none}

/* ==========================================================================
   Client pointers — "fobeventia.pdf" (25 Sep 2026). Overrides only; each
   block names the pointer it answers.
   ========================================================================== */

/* Section rhythm: two stacked sections were 2 x 104px apart — the gap the
   client flagged between product cards and "Choose your testing technology". */
.pg-v2 section{padding:clamp(52px,6vw,80px) 0}
.pg-v2 section.tight{padding:clamp(40px,4.5vw,60px) 0}

/* "Required" / "Strong fit" rows: only a row holding a link changed colour on
   hover, so the first row reacted and the rest did not. Every row now does. */
.pg-v2 .versus .box-row.chk,.pg-v2 .versus .box-row.dot{transition:background .2s,color .2s}
.pg-v2 .versus .fit .box-row:hover{color:var(--green-dark)}
.pg-v2 .versus .alt .box-row:hover{color:#fff}

/* Heading intros ran to three short lines at 640px; the section is far wider. */
.pg-v2 .sec-head p{max-width:860px}
.pg-v2 .qa{max-width:none}

/* Overview / Product Details card: less dead air above the first line. */
.pg-v2 #details .article-body,.pg-v2 #overview .article-body{padding:clamp(22px,3vw,36px) clamp(22px,4vw,48px) clamp(22px,4vw,44px)}

/* Footer links carry an inline colour, which beat the hover rule everywhere
   except the homepage (whose template has its own hover). */
.fw-link:hover{color:#3ED98B!important}

/* The fixed "Details / Request a Quote" bar sat on top of the copyright line.
   The footer keeps that much room free while the bar is showing. */
.pg-v2.has-sticky footer{padding-bottom:84px!important}
@media (max-width:860px){.pg-v2.has-sticky footer{padding-bottom:128px!important}}
@media (max-width:600px){.pg-v2.has-sticky footer{padding-bottom:76px!important}}

/* Validation documents: were plain labels that looked like buttons. */
.pg-v2 a.chip{color:var(--ink);text-decoration:none;cursor:pointer}
.pg-v2 a.chip:hover{border-color:#A9DCC2;color:var(--green-dark);transform:translateY(-2px);box-shadow:0 10px 20px -12px rgba(31,161,83,.5)}

/* Solution finder hand-off: what the visitor chose on the homepage, shown
   above the product grid it narrowed. */
.finder-note{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 18px;padding:12px 16px;border:1px solid #CDEBDA;border-radius:12px;background:linear-gradient(160deg,#F7FCF9,#EAF6EF);font-size:14px;color:var(--ink)}
.finder-note b{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-dark)}
.finder-note .fn-chip{background:#fff;border:1px solid #CDEBDA;border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:700}
.finder-note .fn-chip.off{opacity:.55;text-decoration:line-through}
.finder-note a{margin-left:auto;font-weight:700;color:var(--green-dark)}

/* ---------------------------------------------------------------------------
   Catalogue filter bar (All Products) — one compact row.
   Each select used to be as wide as its longest option, so five of them plus
   the search box ran to three rows. They now share the row equally and a long
   label is cut with an ellipsis; the full text is still in the open list.
   --------------------------------------------------------------------------- */
.pg-catalogue .filters{flex-wrap:nowrap;gap:8px;padding:10px 12px}
.pg-catalogue .filters input[type=search]{flex:1.5 1 0;min-width:150px;padding:10px 12px 10px 38px;font-size:13.5px;background-size:16px;background-position:13px 50%}
.pg-catalogue .filters select{flex:1 1 0;min-width:0;width:0;padding:10px 28px 10px 12px;font-size:13px;background-position:right 9px center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.pg-catalogue .filters .pf-count{flex:0 0 auto;margin-left:0;padding:9px 14px;font-size:12.5px;white-space:nowrap}
@media (max-width:1100px){
  /* search on its own row, the selects share the next one */
  .pg-catalogue .filters{flex-wrap:wrap}
  .pg-catalogue .filters input[type=search]{flex:1 1 100%}
  .pg-catalogue .filters select{flex:1 1 120px;width:auto}
}
@media (max-width:640px){
  /* phones: two selects to a row (the base rule stacks .filters in a column) */
  .pg-catalogue .filters{flex-direction:row;align-items:center}
  .pg-catalogue .filters select{flex:1 1 calc(50% - 4px);width:auto}
  .pg-catalogue .filters .pf-count{flex:1 1 100%;text-align:center}
}

/* ---------------------------------------------------------------------------
   Mobile fixes (2 Oct 2026)
   --------------------------------------------------------------------------- */
/* Products drawer: the green "View All Products" button. The drawer's link rule
   (.sn-d2 .sn-drawer-body a) comes later than the .cta rule and has the same
   weight, so it repainted the label slate-on-green and left-aligned it. */
.sn-d2 .sn-drawer-body a.cta{color:#fff;font-weight:800;font-size:15px;padding:15px 18px;justify-content:center;border-bottom:none}

/* "At a glance" figures on a phone: the two rows touched (a later gap:0 beat the
   phone rule) and the tiles had lost their left edge. Four even tiles, 10px
   apart; an odd last tile takes the full row. The product passport has its own. */
@media (max-width:600px){
  .pg-v2 .glance:not(.passport) .glance-stats{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:22px}
  .pg-v2 .glance:not(.passport) .glance-stats > div,
  .pg-v2 .glance:not(.passport) .glance-stats > div:first-child{border:1px solid var(--line);border-radius:12px;background:#F8FBFD;padding:14px 12px;text-align:center}
  .pg-v2 .glance:not(.passport) .glance-stats > div:last-child:nth-child(odd){grid-column:1 / -1}
}

/* ---------------------------------------------------------------------------
   Phone layout pass (2 Oct 2026) — from the client's phone screenshots.
   --------------------------------------------------------------------------- */

/* Hero photo fills its card. The <img> was height:100% inside a flex box that
   only had a min-height, so the percentage never resolved: the photo sat at
   its own height in the middle with a white band above and below it. */
.pg-v2 .hero-visual:not(.contain){position:relative}
.pg-v2 .hero-visual:not(.contain) img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* "Need help choosing?" band: every other block in a panel section is inset by
   the page gutter; this one ran edge to edge. */
.pg-v2 .content > section.panel > .band{max-width:none;width:calc(min(100%,var(--maxw)) - 2 * var(--pad));margin-left:auto;margin-right:auto}

@media (max-width:600px){
  /* hero photo: a tidy 16:10 card instead of a 300px-tall box */
  .pg-v2 .hero-visual:not(.contain){min-height:0;aspect-ratio:16 / 10}

  /* hero buttons: one under the other, full width, one line of text each —
     side by side the longer label wrapped to three lines and made a tall block */
  .pg-v2 .hero-cta{flex-direction:column;gap:10px}
  .pg-v2 .hero-cta .btn{flex:none;width:100%;justify-content:center;text-align:center;padding:13px 18px;font-size:14.5px}

  /* less air between sections, and a reading size that suits a phone */
  .pg-v2 section{padding:40px 0}
  .pg-v2 section.tight{padding:30px 0}
  .pg-v2 .article-body{font-size:15.5px;line-height:1.7}
  .pg-v2 .article-body .ab-title + p{font-size:16px;line-height:1.65}
  .pg-v2 #details .article-body,.pg-v2 #overview .article-body{padding:20px 18px 22px}

  /* the band on a phone: tighter, and its button spans the card */
  .pg-v2 .band{padding:22px 20px;gap:16px;border-radius:14px}
  .pg-v2 .band .acts .btn{width:100%;justify-content:center}

  /* product filters on solution pages: search on top, selects two to a row
     (they were stacked one per row, as tall as the first product card) */
  .pg-v2 .filters[data-product-filters]{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px}
  .pg-v2 .filters[data-product-filters] input[type=search]{flex:1 1 100%;width:auto;padding:10px 12px 10px 38px;font-size:13.5px;background-size:16px;background-position:13px 50%}
  .pg-v2 .filters[data-product-filters] select{flex:1 1 calc(50% - 4px);width:auto;min-width:0;padding:10px 28px 10px 12px;font-size:13px;background-position:right 9px center;text-overflow:ellipsis}
  .pg-v2 .filters[data-product-filters] .pf-count{flex:1 1 100%;margin-left:0;text-align:center;padding:8px 12px;font-size:12.5px}
}

/* ---------------------------------------------------------------------------
   Method comparison table on a phone (2 Oct 2026).
   The row labels stay put while the methods scroll sideways, but the header's
   first cell did not — so the method names slid out of line with their columns
   and values showed half-hidden under the label column. The corner cell now
   sticks too, the label column carries an edge so the overlap reads as
   scrolling, and the table is sized so two methods fit beside the labels.
   --------------------------------------------------------------------------- */
.pg-v2 table.cmp thead th:first-child{position:sticky;left:0;z-index:3;background:#F7FAFC}
.pg-v2 table.cmp tbody th{z-index:2}
@media (max-width:700px){
  .pg-v2 table.cmp{min-width:520px;font-size:13px}
  .pg-v2 table.cmp thead th{padding:13px 8px 12px;font-size:13px;white-space:nowrap}
  .pg-v2 table.cmp thead th:first-child{padding-left:14px;font-size:9.5px;width:104px}
  .pg-v2 table.cmp tbody th{padding:12px 10px 12px 14px;font-size:13.5px;width:104px;box-shadow:6px 0 10px -8px rgba(8,28,56,.28)}
  .pg-v2 table.cmp thead th:first-child{box-shadow:6px 0 10px -8px rgba(8,28,56,.28)}
  .pg-v2 table.cmp tbody td{padding:11px 6px}
  .pg-v2 table.cmp .v{min-width:60px;padding:5px 9px;font-size:12px}
  .pg-v2 table.cmp .v-text{font-size:12.5px}
  .pg-v2 table.cmp .stars{transform:scale(.86);transform-origin:center}
  /* say that it scrolls */
  .pg-v2 .tablewrap:has(table.cmp)::before{content:"Swipe sideways to compare all methods \2192";display:block;position:sticky;left:0;padding:9px 14px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);background:#F0F8F4;border-bottom:1px solid var(--line-2)}
}

/* ---------------------------------------------------------------------------
   Content written with the CKEditor toolbar (5 Oct 2026): images with a
   caption or set to the side, video players, tables.
   --------------------------------------------------------------------------- */
.article-body figure.image{margin:1.6em auto;text-align:center}
.article-body figure.image img{margin:0 auto}
.article-body .image-style-side{float:right;max-width:46%;margin:.3em 0 1em 1.6em}
.article-body .image-style-side img{margin:0}
.article-body::after{content:"";display:table;clear:both}
.article-body figure.media{margin:1.6em 0}
.article-body iframe{display:block;width:100%;aspect-ratio:16 / 9;height:auto;border:0;border-radius:14px;background:#0B2545}
@media (max-width:600px){.article-body .image-style-side{float:none;max-width:100%;margin:1.4em auto}}

/* Thank-you hero: the tick and the "Enquiry logged" label sit on one line,
   centred on each other; the tick replaces the eyebrow's leading rule. */
.pg-thanks .ty-badge{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.pg-thanks .ty-badge .ty-mark{margin-bottom:0}
.pg-thanks .ty-badge .eyebrow{margin:0;line-height:1}
.pg-thanks .ty-badge .eyebrow::before{display:none}

/* Footer social icons: quiet round buttons on the dark footer; each takes its
   brand colour (--soc, set inline from $SOCIAL) on hover and keyboard focus. */
.fw-socials{display:flex;gap:10px;flex-wrap:wrap}
.fw-soc{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);transition:background .2s,border-color .2s,transform .2s}
.fw-soc svg{display:block}
.fw-soc:hover,.fw-soc:focus-visible{background:var(--soc);border-color:transparent;transform:translateY(-2px);outline:none}
.fw-soc:focus-visible{box-shadow:0 0 0 3px rgba(79,217,232,.5)}
@media (prefers-reduced-motion: reduce){.fw-soc{transition:none}.fw-soc:hover{transform:none}}

/* Article cover image (knowledge.php): the post's own picture between the
   title block and the text, as on the old site's blog pages. */
.kb-cover{margin:26px 0 8px}
.kb-cover img{display:block;width:100%;height:auto;max-height:560px;object-fit:contain;border-radius:18px;border:1px solid var(--line-2);background:#EEF4F8}
@media (max-width:640px){.kb-cover{margin:18px 0 4px}.kb-cover img{border-radius:14px}}

/* ---- News & Events (events.php) ---- */
.pg-events .ev-up{display:grid;gap:18px}
.pg-events .evfeat{display:grid;grid-template-columns:230px minmax(0,1fr);background:#fff;border:1px solid var(--line-2);border-radius:22px;overflow:hidden;box-shadow:0 26px 56px -36px rgba(8,28,56,.4)}
.pg-events .ev-media{position:relative;overflow:hidden;color:#fff;background:#0B2545 radial-gradient(circle at 20% 15%,rgba(79,217,232,.28),transparent 42%);background-color:#0B2545;min-height:200px}
.pg-events .ev-media::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.2px);background-size:18px 18px;opacity:.5}
.pg-events .ev-media .ev-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-events .ev-media.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,37,69,.05) 0%,rgba(11,37,69,.25) 45%,rgba(11,37,69,.82) 100%)}
.pg-events .ev-date{position:absolute;left:18px;bottom:16px;z-index:1}
.pg-events .ev-date b{display:block;font:700 46px/.95 var(--head);letter-spacing:-.03em;text-shadow:0 10px 30px rgba(6,22,43,.4)}
.pg-events .ev-date span{display:block;margin-top:6px;font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#4FD9E8}
.pg-events .ev-body{padding:26px 28px;display:flex;flex-direction:column;gap:10px;min-width:0}
.pg-events .ev-body h3{font-size:22px;line-height:1.2}
.pg-events .ev-status{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:#EEF6F9;color:var(--ink);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:800;letter-spacing:.04em}
.pg-events .ev-status.on::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(31,161,83,.18)}
.pg-events .ev-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13.5px;font-weight:700;color:var(--ink)}
.pg-events .ev-meta span{display:inline-flex;align-items:center;gap:7px}
.pg-events .ev-meta svg{width:16px;height:16px;color:var(--teal);flex:0 0 auto}
.pg-events .ev-sub{margin:0;color:var(--body);font-size:15px;line-height:1.5}
.pg-events .ev-desc p{margin:0 0 10px;color:var(--body);font-size:14.5px;line-height:1.65}
.pg-events .ev-desc p:last-child{margin:0}
.pg-events .ev-actions{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;margin-top:auto;padding-top:8px}
.pg-events .ev-link{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:14px;color:var(--teal);text-decoration:none}
.pg-events .ev-link:hover{text-decoration:underline}
.pg-events .ev-year{display:flex;align-items:center;gap:14px;margin:30px 0 16px;font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.pg-events .ev-year::after{content:"";flex:1;height:1px;background:var(--line)}
/* Past events: LinkedIn-style cards, two to a row — picture (or the date tile)
   on the left, a short read on the right, the post link in the foot. */
.pg-events .ev-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media (max-width:980px){.pg-events .ev-grid{grid-template-columns:1fr}}
.pg-events .evcard{display:grid;grid-template-columns:200px minmax(0,1fr);background:#fff;border:1px solid var(--line-2);border-radius:20px;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.pg-events .evcard:hover{transform:translateY(-4px);box-shadow:0 26px 48px -30px rgba(8,28,56,.42);border-color:#CFE0EA}
.pg-events .evcard .ev-media{min-height:100%;display:block;text-decoration:none}
.pg-events a.ev-media .ev-cover{transition:transform .5s}
.pg-events a.ev-media:hover .ev-cover{transform:scale(1.04)}
.pg-events .evcard .ev-date{left:16px;bottom:14px}
.pg-events .evcard .ev-date b{font-size:36px}
.pg-events .evcard .ev-body{padding:20px 22px 18px;gap:8px}
.pg-events .evcard .ev-body h3{font-size:18px;line-height:1.25}
.pg-events .evcard .ev-meta{font-size:13px;gap:6px 14px}
.pg-events .evcard .ev-sub{font-size:14px;font-weight:600;color:var(--ink)}
.pg-events .evcard .ev-desc{margin:0;color:var(--body);font-size:14px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pg-events .ev-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.pg-events .ev-when{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--muted)}
.pg-events .ev-when svg{width:14px;height:14px;color:var(--teal)}
.pg-events .ev-link.li{color:#0A66C2}
.pg-events .ev-link.li svg{width:15px;height:15px}
.pg-events .ev-link span{transition:transform .2s;display:inline-block}
.pg-events .ev-link:hover span{transform:translate(2px,-2px)}
.pg-events .ev-empty{background:var(--panel);border:1px dashed var(--line-2);border-radius:18px;padding:26px 28px;display:flex;gap:18px 28px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.pg-events .ev-empty h3{font-size:19px;margin-bottom:6px}
.pg-events .ev-empty p{margin:0;color:var(--body);font-size:14.5px;max-width:52ch}
@media (max-width:760px){
  .pg-events .evfeat{grid-template-columns:1fr}
  .pg-events .evfeat .ev-media{min-height:170px}
  .pg-events .ev-body{padding:20px}
  .pg-events .ev-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .pg-events .evcard{grid-template-columns:1fr}
  .pg-events .evcard .ev-media{min-height:150px;aspect-ratio:16/8}
}
@media (prefers-reduced-motion:reduce){.pg-events .evcard{transition:none}}

/* Contact form: the "optional" tag the either/or fields show, and their hint. */
.pg-v2 .field label .opt{font-style:normal;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:none;color:#fff;background:var(--teal);border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:1px}
.pg-v2 .field .either-hint{display:block;margin-top:6px;font-size:12px;color:var(--muted)}
/* required-field asterisk on the contact form */
.pg-v2 .field label .req{color:#E5484D;font-weight:800;font-size:12px;margin-left:2px}

/* Featured upcoming event (events.php): picture left, the facts as tiles right,
   a live countdown and the actions, sized so the card fills its row. */
.pg-events .ev-up .evfeat{grid-template-columns:minmax(300px,44%) minmax(0,1fr);border-radius:24px;box-shadow:0 30px 70px -40px rgba(8,28,56,.5)}
.pg-events .ev-up .ev-media{min-height:360px}
.pg-events .ev-up .ev-media.has-img::after{background:linear-gradient(180deg,rgba(11,37,69,.06) 0%,rgba(11,37,69,.18) 40%,rgba(11,37,69,.88) 100%)}
.pg-events .ev-tag{position:absolute;top:18px;left:18px;z-index:1;background:rgba(255,255,255,.94);color:var(--ink);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;border-radius:999px;padding:7px 12px;display:inline-flex;align-items:center;gap:7px;box-shadow:0 6px 18px rgba(6,22,43,.2)}
.pg-events .ev-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.pg-events .ev-up .ev-date{left:22px;bottom:22px}
.pg-events .ev-up .ev-date b{font-size:64px}
.pg-events .ev-up .ev-date span{font-size:12.5px}
.pg-events .ev-date em{display:block;margin-top:4px;font-style:normal;font-size:13px;font-weight:600;color:#DCE7F1}
.pg-events .ev-up .ev-body{padding:30px 34px 30px;gap:12px}
.pg-events .ev-up .ev-body h3{font-size:clamp(24px,2.4vw,30px);line-height:1.15}
.pg-events .ev-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 0}
.pg-events .ev-tiles > div{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;min-width:0}
.pg-events .ev-tiles dt{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.pg-events .ev-tiles dt svg{width:14px;height:14px;color:var(--teal);flex:0 0 auto}
.pg-events .ev-tiles dd{margin:6px 0 0;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.35}
.pg-events .ev-tiles dd small{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-top:2px}
.pg-events .ev-tiles dd .tbc{color:var(--muted);font-weight:600}
.pg-events .ev-count{background:#0B2545;background-image:radial-gradient(circle at 100% 0,rgba(79,217,232,.25),transparent 55%);border-radius:16px;padding:14px 18px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pg-events .ev-count[hidden]{display:none}
.pg-events .ev-count > small{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#4FD9E8}
.pg-events .ev-digits{display:flex;align-items:flex-start;gap:6px;font:700 24px/1 var(--mono);font-variant-numeric:tabular-nums}
.pg-events .ev-digits b{display:flex;flex-direction:column;align-items:center;min-width:50px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:9px 4px 7px}
.pg-events .ev-digits b span{display:block;line-height:1}
.pg-events .ev-digits b small{display:block;font:800 9px/1 Manrope,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#A9C0D6;margin-top:6px}
.pg-events .ev-digits i{font-style:normal;color:#4FD9E8;padding-top:8px}
.pg-events .ev-up .ev-actions{padding-top:2px;gap:10px 16px}
.pg-events .ev-up .ev-desc{margin-top:2px}
@media (max-width:900px){.pg-events .ev-up .evfeat{grid-template-columns:1fr}.pg-events .ev-up .ev-media{min-height:240px}.pg-events .ev-up .ev-date b{font-size:50px}}
@media (max-width:560px){.pg-events .ev-tiles{grid-template-columns:1fr}.pg-events .ev-up .ev-body{padding:22px 20px}.pg-events .ev-digits{font-size:20px}.pg-events .ev-digits b{min-width:42px}.pg-events .ev-up .ev-actions .btn{flex:1 1 100%;justify-content:center}}

/* ==========================================================================
   Support capabilities (.svc-split) — technical-support "How we support you".
   A deliberate editorial layout, not a card grid: a sticky intro with the
   consultation CTA on the left, and the seven services as a hairline-divided
   register on the right. Each row carries an index, an inline icon and an
   accent rail that draws in on hover.
   ========================================================================== */
.pg-v2 .svc-split .sec-head{display:flex;flex-direction:column}
.pg-v2 .svc-cta{margin-top:30px;position:relative;overflow:hidden;display:block;border-radius:18px;padding:26px 26px 24px;color:#fff;
  background:radial-gradient(260px circle at 100% 0%,rgba(62,217,139,.22),transparent 70%),linear-gradient(155deg,#0B2545,#0F3F63);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.pg-v2 .svc-cta:hover{transform:translateY(-4px);box-shadow:var(--lift)}
.pg-v2 .svc-cta .svc-cta-k{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8FEBB8}
.pg-v2 .svc-cta b{display:block;font-family:var(--grot);font-weight:600;font-size:19px;letter-spacing:-.01em;margin:10px 0 0}
.pg-v2 .svc-cta small{display:block;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.78);margin:8px 0 16px;max-width:36ch}
.pg-v2 .svc-cta .go{display:inline-flex;gap:8px;align-items:center;padding:10px 18px;border-radius:999px;background:var(--green);color:#fff;font-size:13.5px;font-weight:600;box-shadow:0 10px 22px rgba(16,156,86,.35);transition:background .25s}
.pg-v2 .svc-cta:hover .go{background:#0E8A4B;--arrowX:4px}

.pg-v2 .svc-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.pg-v2 .svc-row{position:relative;display:grid;grid-template-columns:54px 1fr;column-gap:22px;padding:24px 10px 24px 16px;border-bottom:1px solid var(--line-2);transition:padding-left .25s var(--ease)}
.pg-v2 .svc-row::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--bar);transform:scaleY(0);transform-origin:center;transition:transform .3s var(--ease)}
.pg-v2 .svc-row:hover{padding-left:22px}
.pg-v2 .svc-row:hover::before{transform:scaleY(1)}
.pg-v2 .svc-lead{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-top:3px}
.pg-v2 .svc-n{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--text-2);transition:color .25s}
.pg-v2 .svc-row:hover .svc-n{color:var(--teal)}
.pg-v2 .svc-ic{display:inline-flex;color:var(--teal);transition:transform .3s var(--ease),color .3s}
.pg-v2 .svc-ic svg{width:26px;height:26px}
.pg-v2 .svc-row:hover .svc-ic{transform:translateY(-2px);color:var(--green-dark)}
.pg-v2 .svc-t{min-width:0;align-self:center}
.pg-v2 .svc-t .k{display:block;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
.pg-v2 .svc-t b{display:block;font-family:var(--grot);font-weight:600;font-size:18.5px;letter-spacing:-.012em;color:var(--ink-2);line-height:1.3}
.pg-v2 .svc-t small{display:block;font-size:14px;line-height:1.58;color:var(--text-2);margin-top:7px;max-width:56ch}
@media (max-width:980px){
  .pg-v2 .svc-cta{margin-top:22px}
  .pg-v2 .svc-rows{margin-top:6px}
}
@media (max-width:560px){
  .pg-v2 .svc-row{grid-template-columns:40px 1fr;column-gap:14px;padding:20px 6px 20px 14px}
  .pg-v2 .svc-ic{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pg-v2 .svc-cta,.pg-v2 .svc-row,.pg-v2 .svc-row::before,.pg-v2 .svc-n,.pg-v2 .svc-ic{transition:none}
}
/* News & Events: past-card photo carousel (events with a gallery). */
.pg-events .ev-carousel{display:block}
.pg-events .ev-carousel .ev-track{display:flex;height:100%;transition:transform .45s var(--ease)}
.pg-events .ev-carousel .ev-cover{position:relative;inset:auto;flex:0 0 100%;width:100%;height:100%;object-fit:cover}
.pg-events .ev-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:30px;height:30px;border:none;border-radius:50%;background:rgba(11,37,69,.5);color:#fff;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.9;transition:background .2s,opacity .2s}
.pg-events .ev-arrow:hover,.pg-events .ev-arrow:focus-visible{background:rgba(11,37,69,.85);opacity:1;outline:none}
.pg-events .ev-arrow.prev{left:8px}.pg-events .ev-arrow.next{right:8px}
.pg-events .ev-dots{position:absolute;left:0;right:0;bottom:9px;z-index:3;display:flex;gap:5px;justify-content:center;pointer-events:none}
.pg-events .ev-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);transition:width .25s,background .25s}
.pg-events .ev-dots i.on{background:#fff;width:16px;border-radius:3px}
\@media (max-width:980px){.pg-events .ev-carousel{min-height:230px}}