/* ============================================================
   LattIQ Light Design System - shared theme
   3 colour themes (data-theme) + 3 fonts (data-font) for live preview
   ============================================================ */
@import url('fonts.css');/* self-hosted Geist + Geist Mono + Kulim Park (was render-blocking cross-origin Google Fonts). Preview-bar alt fonts load async per-page. */

:root{
  /* green spectrum */
  --green-950:#04241B; --green-900:#063A2B; --green-800:#0A5440; --green-700:#0E7256;
  --green-600:#169C76; --green-500:#18B083; --green-400:#2FD6A0; --green-300:#67E8B9;
  --green-200:#A7F3D0; --green-100:#D7F5E8; --green-50:#EEFBF5;
  /* role tokens (themeable) */
  --primary:#169C76; --primary-d:#0E7256; --primary-dd:#0A5440; --accent:#2FD6A0; --accent-2:var(--green-300);
  /* recommended-DS promotion: consolidated dark surfaces + on-dark accent tiers */
  --surface-dark:var(--green-900); --surface-dark-2:var(--green-950); --surface-dark-3:#04160E;
  --accent-soft:var(--green-300); --accent-muted:var(--green-200);
  --ink:#0A1F18; --ink-2:#37514A; --ink-3:#5C7268;/* darkened for AA on white (was #6A827A=4.13:1) */
  --line:#DDEAE4; --line-2:#C9DED5;
  --bg:#FFFFFF; --bg-2:#F5FAF7; --bg-3:#EAF4EF;
  --r1:0; --r2:0; --r3:0; --r4:0; --r5:0; --r-full:0;
  /* fluid content width: pinned to 1160px on laptops/tablets/phones (≤~1590px viewport),
     grows to ~73vw on large/4K screens, capped at 1860px. Gutters scale on the sides. */
  --container:clamp(1160px, 73vw, 1860px);
  --shadow-sm:0 1px 2px rgba(4,36,27,.06);
  --shadow:0 14px 34px -16px rgba(4,36,27,.20);
  --glow:0 10px 28px -10px rgba(22,156,118,.32);
  --glow-strong:0 0 0 1px var(--green-300), 0 16px 40px -12px rgba(22,156,118,.40);
  --font-display:'Manrope'; --font-body:'Manrope'; --font-mono:'Geist Mono';
  /* design system tokens (P1 polish) */
  --pad-card:24px; --track-eyebrow:.14em;
}
/* colour theme variants */
html[data-theme="forest"]{ --primary:#0E7256; --primary-d:#0A5440; --primary-dd:#063A2B; --accent:#18B083; --accent-2:#2FD6A0; --bg-2:#F1F8F4; --bg-3:#E3F0E9; }
html[data-theme="mint"]{ --primary:#18B083; --primary-d:#169C76; --primary-dd:#0E7256; --accent:#34D399; --accent-2:#67E8B9; --bg-2:#F2FCF8; --bg-3:#E6FAF1; }
/* Jade - a distinct, warmer & more saturated green variant (clearly different from emerald/forest/mint) */
html[data-theme="jade"]{
  --green-950:#04241A; --green-900:#06402C; --green-800:#085C40; --green-700:#0C7D57;
  --green-600:#0FA06E; --green-500:#16B97F; --green-400:#3CD898; --green-300:#6BE7B3;
  --green-200:#A6F2CF; --green-100:#D2F8E6; --green-50:#ECFCF4;
  --primary:#0C7D57; --primary-d:#085C40; --primary-dd:#06432F; --accent:#3CD898; --accent-2:#6BE7B3;
  --line:#D6EFE2; --line-2:#C1E6D2; --bg-2:#F0FBF6; --bg-3:#DEF6EA;
  --glow:0 10px 28px -10px rgba(12,125,87,.32);
  --glow-strong:0 0 0 1px var(--green-300), 0 16px 40px -12px rgba(12,125,87,.40);
}
/* Teal - cool, tech-forward cyan-green */
html[data-theme="teal"]{
  --green-950:#051F22; --green-900:#062D37; --green-800:#0F5668; --green-700:#0A7CA7;
  --green-600:#0D9ECF; --green-500:#14B8D1; --green-400:#48D9E8; --green-300:#85E5F1;
  --green-200:#B8EEF5; --green-100:#D7F6FA; --green-50:#EBF9FC;
  --primary:#0D9ECF; --primary-d:#0F5668; --primary-dd:#062D37; --accent:#14B8D1; --accent-2:#48D9E8;
  --line:#CAE8F1; --line-2:#B8DFE9; --bg-2:#F1F8FB; --bg-3:#E6F2F7;
  --glow:0 10px 28px -10px rgba(13,158,207,.32);
  --glow-strong:0 0 0 1px var(--green-300), 0 16px 40px -12px rgba(13,158,207,.40);
}
/* Slate Green - sophisticated, muted dark green */
html[data-theme="slate"]{
  --green-950:#081F1A; --green-900:#0D2A24; --green-800:#124739; --green-700:#1A6652;
  --green-600:#2D8B71; --green-500:#3BA385; --green-400:#5EB999; --green-300:#86CEA8;
  --green-200:#ADE4C8; --green-100:#CFF1DD; --green-50:#E8F9F1;
  --primary:#2D8B71; --primary-d:#124739; --primary-dd:#0D2A24; --accent:#5EB999; --accent-2:#86CEA8;
  --line:#D0E8DC; --line-2:#BBDDD3; --bg-2:#F3FAF7; --bg-3:#E7F3ED;
  --glow:0 10px 28px -10px rgba(45,139,113,.32);
  --glow-strong:0 0 0 1px var(--green-300), 0 16px 40px -12px rgba(45,139,113,.40);
}
/* Indigo - rich, modern accent */
html[data-theme="indigo"]{
  --green-950:#1B1747; --green-900:#27205A; --green-800:#3626A3; --green-700:#4337C7;
  --green-600:#5B4FE3; --green-500:#6B5FF6; --green-400:#8B7BFF; --green-300:#A79FFF;
  --green-200:#C5BFFF; --green-100:#DED8FF; --green-50:#F0ECFF;
  --primary:#5B4FE3; --primary-d:#3626A3; --primary-dd:#27205A; --accent:#8B7BFF; --accent-2:#A79FFF;
  --line:#D5CCFF; --line-2:#C5BCFF; --bg-2:#F8F7FF; --bg-3:#F0EDFF;
  --glow:0 10px 28px -10px rgba(91,79,227,.32);
  --glow-strong:0 0 0 1px var(--green-300), 0 16px 40px -12px rgba(91,79,227,.40);
}
/* Violet - bold, creative accent */
html[data-theme="violet"]{
  --green-950:#2A1A47; --green-900:#3D2555; --green-800:#593A8B; --green-700:#7349B8;
  --green-600:#8D5FD9; --green-500:#A472F7; --green-400:#BE94FF; --green-300:#D9ACFF;
  --green-200:#E8C5FF; --green-100:#F0DCFF; --green-50:#FAEAFF;
  --primary:#8D5FD9; --primary-d:#593A8B; --primary-dd:#3D2555; --accent:#BE94FF; --accent-2:#D9ACFF;
  --line:#E0C9FF; --line-2:#D0B8FF; --bg-2:#FAF8FF; --bg-3:#F4F1FF;
  --glow:0 10px 28px -10px rgba(141,95,217,.32);
  --glow-strong:0 0 0 1px var(--green-300), 0 16px 40px -12px rgba(141,95,217,.40);
}
/* ===== V3 visual layer - solid-coloured, interactive tech-platform feel (vs clean V2). base language (V1) is common ===== */
/* alternating solid-tint section bands for rhythm */
html[data-viz="v3"] section.band:nth-of-type(even){background:linear-gradient(180deg,var(--green-50),var(--bg))}
/* SOLID, authoritative metric/stat blocks (Trust & Authority) */
html[data-viz="v3"] .metric{background:linear-gradient(150deg,var(--primary),var(--primary-d))!important;border:none!important;box-shadow:var(--glow)}
html[data-viz="v3"] .metric .num{color:#fff!important}
html[data-viz="v3"] .metric .lbl{color:#cfeee2!important}
html[data-viz="v3"] .pstat{background:linear-gradient(150deg,var(--green-100),var(--green-50))!important;border-left-width:4px}
/* tinted, lifted content cards */
html[data-viz="v3"] .card,html[data-viz="v3"] .off-card,html[data-viz="v3"] .eco-card,html[data-viz="v3"] .sig-cat,html[data-viz="v3"] .blog-card,html[data-viz="v3"] .scenario,html[data-viz="v3"] .step{background:linear-gradient(158deg,var(--green-50),#fff)!important;border-color:var(--green-200)!important}
html[data-viz="v3"] .card:hover,html[data-viz="v3"] .off-card:hover,html[data-viz="v3"] .sig-cat:hover,html[data-viz="v3"] .blog-card:hover,html[data-viz="v3"] .scenario:hover{box-shadow:var(--glow-strong)!important;transform:translateY(-4px)}
/* gradient icon chips everywhere */
html[data-viz="v3"] .ico,html[data-viz="v3"] .sig-cat .ico,html[data-viz="v3"] .off-card-ico,html[data-viz="v3"] .fic,html[data-viz="v3"] .scenario .ico{background:linear-gradient(145deg,var(--accent),var(--primary))!important;color:#fff!important}
html[data-viz="v3"] .sigcard{border-color:var(--line-2)}
html[data-viz="v3"] .sigcard:hover{box-shadow:var(--glow-strong)}
/* solid tags + stronger CTAs */
html[data-viz="v3"] .badge-soft,html[data-viz="v3"] .tag,html[data-viz="v3"] .vchip{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important}
html[data-viz="v3"] .btn-primary{box-shadow:var(--glow)}
html[data-viz="v3"] .btn-primary:hover{box-shadow:var(--glow-strong);transform:translateY(-2px)}
/* gradient accents on headings + eyebrows */
html[data-viz="v3"] .sec-title .gt{background:linear-gradient(120deg,var(--accent),var(--primary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html[data-viz="v3"] .eyebrow{color:var(--primary)}
/* elevated active tabs (raised) */
html[data-viz="v3"] .ptab.on{box-shadow:0 10px 22px -6px rgba(22,156,118,.6)}
html[data-viz="v3"] .fitem.on{box-shadow:0 8px 20px -8px rgba(22,156,118,.5)}
/* solid feature/eco icon-cores */
html[data-viz="v3"] .fpanel{background:linear-gradient(150deg,var(--green-50),#fff)}
html[data-viz="v3"] .logocard{background:linear-gradient(150deg,var(--primary),var(--primary-dd))}
/* font variants */

/* ============================================================
   Metrics + What You Get - Claude Design port (dark-green surface)
   Scoped to .mwyg-* classes to avoid leakage
   ============================================================ */
.mwyg-section{
  position:relative;
  overflow:hidden;
  padding:64px 0 104px;
  color:#fff;
  background:linear-gradient(180deg,var(--surface-dark) 0%,var(--surface-dark-3) 100%);
}

.mwyg-section::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:min(580px,78%);
  z-index:0;
  pointer-events:none;
  background:radial-gradient(ellipse 560px 380px at 50% 100%, rgba(199,247,227,.46), transparent 70%), radial-gradient(ellipse 1000px 440px at 50% 100%, rgba(47,214,160,.32), transparent 74%);
}

.mwyg-grid-overlay{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  mask-image:linear-gradient(to top, rgba(0,0,0,.85), transparent 78%);
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.85), transparent 78%);
  background-size:46px 46px;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
}

.mwyg-inner{
  position:relative;
  z-index:1;
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}

.mwyg-header{
  text-align:center;
  font-family:var(--font-mono),monospace;
  font-size:0.75rem;
  letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;
  color:rgba(214,245,232,.92);
  margin-bottom:10px;
}

.mwyg-title{
  text-align:center;
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.375rem,2.6vw,1.875rem);
  font-weight:600;
  letter-spacing:-.02em;
  color:#fff;
}

.mwyg-metrics-wrap{
  position:relative;
  padding:48px 0 58px;
  margin:22px 0 44px;
}

.mwyg-hairline{
  position:absolute;
  left:50%;
  width:min(1100px,calc(100% - 56px));
  height:1.5px;
  pointer-events:none;
  opacity:.7;
  transform:translateX(-50%);
  transition:opacity .3s ease,height .3s ease;
  background:radial-gradient(var(--mwyg-hlw,150px) 9px at var(--mwyg-mx,50%) 50%, rgba(255,255,255,.95), transparent 70%), linear-gradient(90deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
}

.mwyg-hairline:first-of-type{top:0}
.mwyg-hairline:last-of-type{bottom:0}

.mwyg-metrics-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  max-width:var(--container);
  margin:0 auto;
}

@media(max-width:880px){
  .mwyg-metrics-grid{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media(max-width:560px){
  .mwyg-metrics-grid{grid-template-columns:repeat(2,1fr);gap:16px} /* E2: 2x2 instead of a single column */
}

.mwyg-metric{
  position:relative;
  text-align:center;
  padding:16px 12px;
  cursor:default;
}

.mwyg-metric-num{
  font-family:var(--font-mono),monospace;
  font-size:clamp(1.875rem,3.4vw,2.5rem);
  font-weight:500;
  letter-spacing:-.02em;
  color:#fff;
  line-height:1;
  transition:transform .25s ease;
}

.mwyg-metric:hover .mwyg-metric-num{
  transform:translateY(-2px);
}

.mwyg-metric:hover ~ .mwyg-metrics-wrap .mwyg-hairline{
  --mwyg-hlw:260px;
  height:2.5px;
  opacity:1;
}

.mwyg-metric-label{
  margin-top:8px;
  font-size:0.8125rem;
  font-weight:500;
  color:rgba(255,255,255,.85);
  line-height:1.4;
}

.mwyg-wyg-header{
  text-align:center;
  font-family:var(--font-mono),monospace;
  font-size:0.75rem;
  letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;
  color:rgba(214,245,232,.92);
  margin-bottom:10px;
  margin-top:30px;
}

.mwyg-wyg-title{
  text-align:center;
  margin:10px 0 0;
  font-family:var(--font-display);
  font-size:clamp(1.4375rem,2.7vw,2rem);
  font-weight:600;
  letter-spacing:-.02em;
  color:#fff;
}

.mwyg-wyg-sub{
  text-align:center;
  margin:12px auto 0;
  max-width:none;
  font-size:0.9375rem;
  line-height:1.6;
  color:rgba(235,250,244,.85);
}

.mwyg-cards-section{
  margin-top:40px;
}

.mwyg-primary-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}

@media(max-width:880px){
  .mwyg-primary-grid{grid-template-columns:1fr}
}

.mwyg-card{
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:0;
  padding:var(--pad-card);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease;
}

.mwyg-card:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.1);
  border-color:rgba(47,214,160,.55);
  box-shadow:0 30px 70px -38px rgba(0,0,0,.7);
}

.mwyg-card-header{
  display:flex;
  align-items:center;
  gap:12px;
}

.mwyg-card-icon{
  flex:none;
  width:40px;
  height:40px;
  border-radius:0;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
}

.mwyg-card-icon svg{
  width:20px;
  height:20px;
  stroke-width:1.7;
  fill:none;
  stroke:currentColor;
}

.mwyg-badge{
  font-family:var(--font-mono),monospace;
  font-size:0.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#06281D;
  background:#2FD6A0;
  border-radius:0;
  padding:4px 10px;
}

.mwyg-card-title{
  margin:0;
  font-family:var(--font-display);
  font-size:1.0625rem;
  font-weight:600;
  color:#fff;
  letter-spacing:-.01em;
  line-height:1.25;
}

.mwyg-card-body{
  margin:16px 0 0;
  font-size:0.8438rem;
  line-height:1.55;
  color:rgba(225,245,238,.82);
}

.mwyg-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}

.mwyg-chip{
  font-size:0.7188rem;
  color:rgba(223,247,237,.92);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:0;
  padding:4px 10px;
}

.mwyg-secondary-label{
  margin:35px 0 12px;
  font-family:var(--font-mono),monospace;
  font-size:0.7188rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(214,245,232,.92);
}

.mwyg-secondary-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
/* when the secondary grid follows the primary grid directly (no "Also handles"
   label, e.g. risk-teams), it needs its own separation */
.mwyg-primary-grid + .mwyg-secondary-grid{margin-top:28px;}

@media(max-width:880px){
  .mwyg-secondary-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .mwyg-secondary-grid{grid-template-columns:1fr}
}

.mwyg-secondary-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:0;
  padding:14px 16px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease;
}

.mwyg-secondary-card:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.09);
  border-color:rgba(47,214,160,.5);
  box-shadow:0 18px 40px -26px rgba(0,0,0,.6);
}

.mwyg-secondary-icon{
  flex:none;
  width:30px;
  height:30px;
  border-radius:0;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
}

.mwyg-secondary-icon svg{
  width:16px;
  height:16px;
  stroke-width:1.7;
  fill:none;
  stroke:currentColor;
}

.mwyg-secondary-title{
  font-size:0.8438rem;
  font-weight:600;
  color:#fff;
  line-height:1.3;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;
  /* fluid root: text scales with the viewport. Pinned at 16px ≤1600px (laptops/tablets/phones
     render exactly as before, since all font-sizes are rem), growing to 20px by ~2560px so
     text keeps pace with the fluid --container/visuals on large & 4K screens. */
  font-size:clamp(16px, calc(0.5vw + 8px), 20px);}
body{overflow-x:hidden;max-width:100%}
body{font-family:var(--font-body),system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display),system-ui,sans-serif;letter-spacing:-0.02em;line-height:1.1}
.mono{font-family:var(--font-mono),ui-monospace,monospace}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* layout */
.wrap{max-width:var(--container);margin:0 auto;padding:0 28px}
section.band{padding:84px 0;border-top:1px solid var(--line)}
.eyebrow{font-family:var(--font-mono),monospace;font-size:0.75rem;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--primary-d);margin-bottom:14px}
.sec-title{font-size:clamp(1.625rem,3.4vw,2.5rem);font-weight:600;margin-bottom:10px;letter-spacing:-0.02em}
.sec-sub{color:var(--ink-2);font-size:1.0625rem;max-width:64ch;margin-bottom:36px}
.center{text-align:center}.center .sec-sub{margin-left:auto;margin-right:auto}
.gt{background:linear-gradient(120deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}

/* preview bar */

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:top .28s ease,width .28s ease,max-width .28s ease,background .28s ease,box-shadow .28s ease,border-color .28s ease,color .28s ease}
.nav .in{max-width:var(--container);margin:0 auto;padding:0 28px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.nav .links{margin-left:auto;margin-right:auto}
.nav .nav-right{display:flex;align-items:center;gap:22px;font-size:0.875rem;color:var(--ink-2);flex:none}
.nav .nav-right a:hover{color:var(--primary-d)}
.nav.nav-dark .nav-right, body.hero-green .nav:not(.floating) .nav-right{color:rgba(255,255,255,.9)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.0625rem;letter-spacing:-0.02em}
.brand .mk{width:24px;height:24px;border-radius:var(--r1);background:linear-gradient(135deg,var(--accent),var(--primary-dd));box-shadow:var(--glow)}
.nav .links{display:flex;align-items:center;gap:30px;font-size:0.875rem;color:var(--ink-2);transition:color .28s ease}
.nav .links a{padding:6px 8px;border-radius:var(--r1);transition:color .28s ease}
.nav .links a:hover{color:var(--primary-d);transition:color .15s ease}
@media(max-width:820px){.nav .links{display:none}}
/* ===== mobile hamburger nav (burger injected by js/nav-mobile.js) ===== */
.nav-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-left:auto;background:transparent;border:1px solid var(--line);border-radius:var(--r1);cursor:pointer;color:var(--ink);-webkit-tap-highlight-color:transparent;transition:background .2s ease,border-color .2s ease}
.nav-burger svg{width:22px;height:22px}
.nav.nav-dark .nav-burger{border-color:rgba(255,255,255,.32);color:#fff}
/* mobile-only "Get Started" CTA (hidden on desktop; shown <=820px, left of the burger) → login */
.nav-getstarted{display:none;align-items:center;justify-content:center;height:44px;padding:0 16px;font-size:0.8125rem;font-weight:600;letter-spacing:.01em;border-radius:var(--r3);text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:background .2s ease,border-color .2s ease,color .2s ease}
.nav.nav-light .nav-getstarted{background:var(--primary-d);color:#fff;border:1px solid var(--primary-d)}
.nav.nav-light .nav-getstarted:hover{background:var(--primary-dd);border-color:var(--primary-dd)}
.nav.nav-dark .nav-getstarted{background:#fff;color:var(--primary-dd);border:1px solid #fff}
body.hero-green .nav:not(.floating) .nav-getstarted{background:#fff;color:var(--primary-dd);border:1px solid #fff}
@media(max-width:820px){
  .nav-getstarted{display:inline-flex;transform:translateX(16px)} /* D1: nudge the button right, closer to the burger */
  /* with .links hidden, push the right group (Get Started + burger) to the right edge;
     keep the burger a touch further right of the CTA */
  .nav .nav-right{margin-left:auto}
  .nav-burger{display:inline-flex;margin-left:14px}
  .nav .in{position:relative}
  .nav.nav-open .links{display:flex;flex-direction:column;align-items:stretch;gap:2px;position:absolute;top:calc(100% + 8px);left:12px;right:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r2);box-shadow:0 18px 44px -16px rgba(4,36,27,.30);padding:12px;z-index:130;color:var(--ink)}
  .nav.nav-open .links > a{padding:12px;border-radius:var(--r1);color:var(--ink)!important;font-size:0.9375rem}
  .nav.nav-open .links > a:hover{background:var(--green-50)}
  .nav.nav-open .ddwrap{display:flex;flex-direction:column}
  .nav.nav-open .ddwrap .ddt{padding:12px;color:var(--ink)!important;justify-content:space-between}
  .nav.nav-open .ddwrap .dd{position:static;box-shadow:none;padding:0;margin:0;overflow:hidden;max-height:0;opacity:0;pointer-events:none;transition:max-height .28s ease,opacity .2s ease}
  .nav.nav-open .ddwrap.dd-open .dd{max-height:480px;opacity:1;visibility:visible;transform:none;pointer-events:auto;padding:0 0 4px}
  .nav.nav-open .ddwrap.dd-open > .ddt svg{transform:rotate(180deg)}
  .nav.nav-open .ddwrap .dd .panel{width:auto;grid-template-columns:1fr;border:none;box-shadow:none;background:transparent;padding:0}
  .nav.nav-open .ddwrap .dd .dd-intro{display:none}
  .nav.nav-open .ddwrap .dd .dd-cards{padding:0}
  .nav.nav-open .ddwrap .dd .sol{padding:9px 12px}
  .nav.nav-open .nav-cta{margin-top:8px;justify-content:center;text-align:center;width:100%}
}
@media(prefers-reduced-motion:reduce){.nav-burger{transition:none}}
.nav .ddwrap{position:relative}
.nav .ddwrap > .ddt{display:inline-flex;align-items:center;gap:5px;cursor:pointer;transition:color .28s ease}
.nav .ddwrap > .ddt svg{width:12px;height:12px;transition:transform .2s ease}
.nav .ddwrap.dd-open > .ddt svg{transform:rotate(180deg)}
.nav .dd{position:absolute;left:50%;top:100%;transform:translateX(-50%) translateY(8px);padding-top:16px;opacity:0;visibility:hidden;transition:all .2s ease}
.nav .ddwrap.dd-open .dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* ===== scroll → floating nav (rectangular, sharp edges; clarasight behaviour) ===== */
.nav.floating{top:10px;left:50%;right:auto;transform:translateX(-50%);width:calc(100% - 36px);max-width:var(--container);background:#fff;border:1px solid var(--line);border-radius:0;box-shadow:0 12px 34px -14px rgba(4,36,27,.24)}
.nav.floating .in{height:58px}
/* nav color themes - light (default white bg) and dark (green/dark bg) */
.nav.nav-light{background:rgba(255,255,255,.82);border-bottom-color:var(--line)}
.nav.nav-light .links{color:var(--ink-2)}
.nav.nav-light .links a:not(.nav-cta):hover{color:var(--primary-d)}
.nav.nav-light .ddt{color:var(--ink-2)}
.nav.nav-light .brand .logo-dark{display:block}
.nav.nav-light .brand .logo-light{display:none}
/* dark nav theme: over green/dark sections */
.nav.nav-dark{background:rgba(6,58,43,.9);backdrop-filter:blur(12px);border-bottom-color:rgba(255,255,255,.14)}
.nav.nav-dark .links{color:rgba(255,255,255,.88)}
.nav.nav-dark .links a:not(.nav-cta):hover{color:#fff}
.nav.nav-dark .ddt{color:rgba(255,255,255,.88)}
.nav.nav-dark .brand .logo-dark{display:none}
.nav.nav-dark .brand .logo-light{display:block}
/* dual-logo swap (home nav has both; other pages keep their single img) */
.brand .logo-dark,.brand .logo-light{height:26px;width:auto;display:block}
.brand .logo-light{display:none}
/* nav CTA button styling per theme */
.nav-cta{padding:8px 14px;line-height:1.2;font-size:0.7812rem;font-weight:600;display:inline-flex;align-items:center;gap:5px;border-radius:var(--r3);transition:all .25s ease;letter-spacing:.01em;position:relative;min-height:44px}
/* arrow on the CTA in BOTH themes (was previously dark-nav only - green/light CTA lost it) */
.nav .nav-cta{padding:6px 16px;min-height:34px}
.nav-cta::after{content:"→";margin-left:3px;font-size:.95em;line-height:1;display:inline-block}
.nav-cta:hover::after{animation:btnArrLoop .5s cubic-bezier(.76,0,.24,1)}
@media(prefers-reduced-motion:reduce){.nav-cta:hover::after{animation:none}}
.nav.nav-light .nav-cta{background:var(--primary-d);color:#fff;border:1px solid var(--primary-d)}
.nav.nav-light .nav-cta:hover{background:var(--primary-dd);border-color:var(--primary-dd);box-shadow:0 6px 14px -4px rgba(22,156,118,.35);transform:translateY(-1px)}
.nav.nav-light .nav-cta:active{transform:translateY(0);box-shadow:0 2px 6px -2px rgba(22,156,118,.2)}
.nav.nav-dark .nav-cta{background:#fff;color:var(--primary-dd);border:1px solid #fff}
.nav.nav-dark .nav-cta:hover{background:#fff;border-color:#fff;color:var(--primary-d);box-shadow:0 8px 20px -6px rgba(0,0,0,.4);transform:translateY(-2px)}
.nav.nav-dark .nav-cta:active{transform:translateY(0);box-shadow:0 3px 8px -3px rgba(0,0,0,.3)}
/* green hero + nav at top: transparent bar, white text, light logo - legacy fallback */
body.hero-green .nav:not(.floating){background:transparent;backdrop-filter:none;border-bottom-color:transparent}
body.hero-green .nav:not(.floating) .links{color:rgba(255,255,255,.9)}
body.hero-green .nav:not(.floating) .links a:hover{color:#fff}
body.hero-green .nav:not(.floating) .links > a:not(.nav-cta){color:rgba(255,255,255,.9)}
body.hero-green .nav:not(.floating) .ddt{color:rgba(255,255,255,.9)}
body.hero-green .nav:not(.floating) .brand .logo-dark{display:none}
body.hero-green .nav:not(.floating) .brand .logo-light{display:block}
body.hero-green .nav:not(.floating) .nav-cta{background:#fff;color:var(--primary-dd);border-color:#fff}
/* floating pill must follow the theme: dark pill (light text) over dark sections, white pill (dark text) over light - so it never becomes light-text-on-white */
.nav.floating.nav-dark{background:rgba(6,58,43,.94);border-color:rgba(255,255,255,.16);box-shadow:0 12px 34px -14px rgba(0,0,0,.45)}
.nav.floating.nav-dark .links{color:rgba(255,255,255,.9)}
.nav.floating.nav-dark .ddt{color:rgba(255,255,255,.9)}
/* ===== CTA bulletproof contrast - wins over legacy .btn/.btn-primary/.links-hover/hero-green rules; guarantees text!=bg in every state, both themes ===== */
.nav.nav-light .nav-cta,.nav.nav-light .nav-cta:active{background:var(--primary-d)!important;color:#fff!important;border-color:var(--primary-d)!important}
.nav.nav-light .nav-cta:hover{background:var(--primary-dd)!important;color:#fff!important;border-color:var(--primary-dd)!important}
.nav.nav-dark .nav-cta,.nav.nav-dark .nav-cta:active{background:#fff!important;color:var(--primary-dd)!important;border-color:#fff!important}
.nav.nav-dark .nav-cta:hover{background:#fff!important;color:var(--primary-d)!important;border-color:#fff!important}
body.hero-green .nav:not(.floating) .nav-cta,body.hero-green .nav:not(.floating) .nav-cta:hover{background:#fff!important;color:var(--primary-dd)!important;border-color:#fff!important}
.nav .dd .panel{width:700px;background:#fff;border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--shadow);padding:0;display:grid;grid-template-columns:.82fr 1.18fr;overflow:hidden}
.nav .dd .dd-intro{background:linear-gradient(165deg,var(--green-50),#fff);padding:24px 22px;display:flex;flex-direction:column;border-right:1px solid var(--line)}
.nav .dd .dd-intro .dd-eyebrow{font-family:var(--font-mono),monospace;font-size:0.6875rem;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--primary-d);margin-bottom:12px}
.nav .dd .dd-intro h4{font-size:1.125rem;font-weight:600;line-height:1.28;color:var(--ink);letter-spacing:-.01em;margin:0}
.nav .dd .dd-intro .dd-demo{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:7px;font-size:0.8125rem;font-weight:600;color:var(--primary-d)}
.nav .dd .dd-intro .dd-demo:hover{color:var(--primary)}
.nav .dd .dd-intro .dd-demo .arr{transition:transform .15s ease}
.nav .dd .dd-intro .dd-demo:hover .arr{transform:translateX(3px)}
.nav .dd .dd-cards{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:12px}
/* graph-paper texture as a DOT grid (radial), not 1px lines. A 1px line grid
   sub-pixel-doubles into a visible 2nd set on Retina under the floating nav's
   translateX(-50%); dots cannot - a shifted dot just softens, never splits. */
.nav .dd .dd-cards::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(var(--green-200) 1px,transparent 1.6px);
  background-size:16px 16px;background-position:0 0;opacity:.35}
.nav .dd a.sol{position:relative;z-index:1}
.nav .dd a.sol{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:15px 14px;border-radius:var(--r1);border:1px solid transparent;transition:all .15s ease}
.nav .dd a.sol:hover{background:var(--green-50);border-color:var(--green-200)}
.nav .dd a.sol .si{width:40px;height:40px;flex:none;border-radius:var(--r1);background:linear-gradient(145deg,var(--accent),var(--primary));color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px -6px rgba(22,156,118,.5)}
.nav .dd a.sol .si svg{width:20px;height:20px}
.nav .dd a.sol b{display:block;font-size:0.875rem;color:var(--ink);font-weight:600}
.nav .dd a.sol em{font-size:0.75rem;color:var(--ink-3);font-style:normal;line-height:1.35}
@media(max-width:760px){.nav .dd .panel{width:92vw;grid-template-columns:1fr}.nav .dd .dd-intro{border-right:none;border-bottom:1px solid var(--line)}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:600;font-size:0.875rem;padding:10px 16px;border-radius:var(--r3);border:1px solid transparent;cursor:pointer;transition:transform .12s ease,background .15s ease,box-shadow .15s ease,border-color .15s ease;min-height:44px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary-d);color:#fff}/* #0E7256: white text 5.9:1 (WCAG AA) - #169C76 was 3.47 (fail) */
.btn-primary:hover{background:var(--primary-dd);box-shadow:var(--glow);transform:translateY(-1px)}
.btn-primary:active{background:var(--green-950);transform:translateY(0)}
.btn-dark{background:var(--green-950);color:#fff}
.btn-dark:hover{background:#08362a;box-shadow:var(--glow)}
.btn-ghost{background:var(--bg);color:var(--primary-d);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--primary);background:var(--green-50)}
/* unified house arrow (sharp "→" glyph + LiveRamp loop): arrow exits right, a fresh one enters from the left */
.btn .arr{display:inline-block;transition:transform .2s cubic-bezier(.34,1.4,.5,1)}
.btn:hover .arr{animation:btnArrLoop .5s cubic-bezier(.76,0,.24,1)}
@keyframes btnArrLoop{0%{transform:translateX(0);opacity:1}45%{transform:translateX(140%);opacity:0}46%{transform:translateX(-140%);opacity:0}100%{transform:translateX(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.btn .arr,.btn:hover .arr{animation:none;transition:none;transform:none}}
/* sleek, accessible focus rings for keyboard nav (mouse clicks unaffected via :focus-visible) */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:focus-visible,.nav-cta:focus-visible,.nav .links a:focus-visible,.sf-talk:focus-visible,.faq-q:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav.nav-dark :focus-visible,.nav.nav-dark .links a:focus-visible{outline-color:#fff}
section.greenband :focus-visible{outline-color:#fff}
/* LiveRamp-style arrow-loop button: on hover the arrow slides out right while a second
   arrow slides in from the left. Opt-in via .btn-arr (markup: trailing .btn-arrow with 2 svgs). */
.btn-arr{overflow:hidden}
.btn-arr .btn-arrow{position:relative;display:inline-block;width:17px;height:13px;margin-left:2px;overflow:hidden;vertical-align:middle;flex:none}
.btn-arr .btn-arrow svg{position:absolute;top:0;left:0;width:17px;height:13px;transition:transform .42s cubic-bezier(.76,0,.24,1)}
.btn-arr .btn-arrow svg:nth-child(2){transform:translateX(-150%)}
.btn-arr:hover .btn-arrow svg:nth-child(1){transform:translateX(150%)}
.btn-arr:hover .btn-arrow svg:nth-child(2){transform:translateX(0)}
@media(prefers-reduced-motion:reduce){.btn-arr .btn-arrow svg{transition:none}.btn-arr:hover .btn-arrow svg:nth-child(1){transform:none}.btn-arr:hover .btn-arrow svg:nth-child(2){transform:translateX(-150%)}}
/* section-footer CTA wrapper */
.section-cta{display:flex;justify-content:center;padding:8px 0 4px}

/* badges */
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono),monospace;font-size:0.75rem;padding:5px 10px;border-radius:var(--r-full)}
.badge-solid{background:var(--primary);color:#fff}
.badge-soft{background:var(--green-100);color:var(--green-800);border:1px solid var(--green-200)}
.badge-outline{background:var(--bg);color:var(--primary-d);border:1px solid var(--line-2)}
.dot{width:6px;height:6px;border-radius:0;background:currentColor}

/* cards */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:880px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r4);padding:var(--pad-card);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.card:hover{border-color:var(--accent);box-shadow:var(--glow);transform:translateY(-3px)}
.card .ico{width:44px;height:44px;border-radius:var(--r1);display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;margin-bottom:16px}
.card .ico svg{width:22px;height:22px}
.card h4{font-size:1.0625rem;font-weight:600;margin-bottom:7px}
.card p{font-size:0.875rem;color:var(--ink-2)}
.metric{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--primary);border-radius:var(--r4);padding:22px}
.metric .num{font-family:var(--font-mono),monospace;font-size:2.25rem;font-weight:500;color:var(--primary-d);letter-spacing:-0.02em}
.metric .lbl{font-size:0.8125rem;color:var(--ink-2);margin-top:5px}

/* canonical full-width end CTA (uniform across all pages) */
.ctaband{background:radial-gradient(700px 300px at 80% 10%,var(--green-100),transparent 60%),var(--bg-2);text-align:center}
.ctaband .wrap{max-width:1000px}
.ctaband .sec-title{margin:0 auto}
.ctaband .sec-sub{max-width:72ch;margin:14px auto 0}
.ctaband .btn{margin-top:26px}

/* canonical smooth FAQ accordion - shared across ALL pages (some pages lacked the container styles) */

/* signals page compliance + CTA section with green background */
.sig-compliance-cta{
  background:linear-gradient(135deg,#0E7256 0%,#158a6a 50%,#169C76 100%);
}
.sig-compliance-cta .compliance-grid{
  background:transparent;
  padding-bottom:28px;
}
.sig-compliance-cta .comp-card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
}
.sig-compliance-cta .comp-card h4{
  color:#fff;
}
.sig-compliance-cta .comp-card p{
  color:rgba(255,255,255,.82);
}
.sig-compliance-cta .comp-card-ico{
  color:#A7F3D0;
}
.cta-band-inner{
  background:rgba(255,255,255,.03);
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
  padding:32px 0;
}
.cta-band-inner .nudge{
  text-align:center;
}
.cta-band-inner .ntxt h3{
  color:#fff;
  font-size:clamp(1.5rem,3vw,2rem);
}
.cta-band-inner .btn-white{
  background:#fff;
  color:#0E7256;
  font-weight:600;
}
.cta-band-inner .btn-white:hover{
  background:#f0f0f0;
}

/* footer */
footer.ft{background:var(--green-950);color:#bfe6d6;padding:60px 0 36px;border-top:1px solid var(--green-800);position:relative;overflow:hidden}
footer.ft::before{content:'';position:absolute;inset:0;background-image:radial-gradient(var(--green-800) 0.5px,transparent 0.5px);background-size:24px 24px;opacity:0.25;pointer-events:none}
footer.ft .wrap{position:relative;z-index:1}
footer.ft .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
@media(max-width:760px){footer.ft .cols{grid-template-columns:1fr 1fr}}
footer.ft h5{font-size:0.8125rem;color:#fff;font-weight:600;margin-bottom:14px}
footer.ft a{display:block;color:#8fc4b2;font-size:0.8125rem;padding:4px 0}
footer.ft a:hover{color:var(--accent-2)}
footer.ft .fbot{margin-top:40px;padding-top:20px;border-top:1px solid var(--green-800);font-size:0.75rem;color:#6aa593}

/* hero */
.hero{position:relative;padding:150px 0 90px;overflow:hidden}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero .hglow{position:absolute;inset:0;z-index:0;background:radial-gradient(760px 360px at 72% 12%,var(--green-100),transparent 62%)}
.hero .in{position:relative;z-index:2;max-width:var(--container);margin:0 auto;padding:0 28px}
.hero h1{font-size:clamp(1.9375rem,6.4vw,4.25rem);font-weight:600;max-width:17ch;letter-spacing:-0.03em;overflow-wrap:break-word}
.hero p.sub{margin-top:20px;font-size:1.1875rem;color:var(--ink-2);max-width:60ch}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.brand img{height:26px;display:block}

/* hero: copy left, full-bleed morphing point cloud behind (scatter spans whole banner) */
.hero{min-height:78vh;display:flex;align-items:center}
@media(max-width:900px){.hero{min-height:auto}}
.hero-cloud{position:absolute;inset:96px 0 0 0;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 34%,#000 56%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,transparent 34%,#000 56%,#000 100%)}
@media(max-width:900px){.hero-cloud{-webkit-mask-image:none;mask-image:none;opacity:.5}}
.hero-cloud canvas{position:absolute;inset:0;width:100%;height:100%}
.hero .in{position:relative;z-index:2;width:100%}
.hero-copy{min-width:0;max-width:700px}
.hero .hero-copy h1{font-size:clamp(2.125rem,4.6vw,3.625rem);line-height:1.06;max-width:none;letter-spacing:-0.03em;font-weight:600}
.hero .hero-copy .hero-for{color:var(--ink)}
.hero .hero-copy .sub{font-size:1.125rem;margin-top:22px;max-width:52ch}
@media(max-width:900px){.hero{min-height:auto}}
.hero-line3{font-family:var(--font-display),sans-serif;font-weight:600;font-size:clamp(1.6875rem,3.6vw,3rem);line-height:1.12;letter-spacing:-.02em;margin-top:10px;display:flex;align-items:baseline;gap:.2em;color:var(--ink)}
.hero-swap{display:block;position:relative;height:1.34em;line-height:1.1;overflow:hidden;width:100%;min-width:0}
.hero-swap b{position:absolute;left:0;top:0;white-space:nowrap;font-weight:600;color:var(--ink);
  transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .45s ease}
/* hero headline: green persistent title (.hl) + black "for"/swap */
.hero .hero-copy h1.hero-h1{font-size:clamp(2rem,4.2vw,3.3125rem);line-height:1.1;letter-spacing:-0.03em;font-weight:600}
.hero-h1 .hl{
  background:linear-gradient(105deg,#E9F2EE 0%,#E9F2EE 44%,#8FE9C6 48%,#2FD6A0 50%,#169C76 52%,#8FE9C6 56%,#E9F2EE 60%,#E9F2EE 100%);
  background-size:300% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:shinyTextSweep 8s ease-in-out infinite;
}
/* sleek sheen sweeps left→right over ~5s (0→62.5%), then rests on the base for ~3s (62.5→100%) */
@keyframes shinyTextSweep{
  0%{background-position:100% 0;}
  62.5%{background-position:0 0;}
  100%{background-position:0 0;}
}
@media(prefers-reduced-motion:reduce){
  .hero-h1 .hl{animation:none;background:#E9F2EE;background-clip:text;-webkit-background-clip:text;}
}
.hero-h1 .hero-for{color:var(--ink);-webkit-text-fill-color:var(--ink)}
.hero-h1 .hero-swap{vertical-align:bottom;height:1.34em}
.hero-swap b.out{transform:translateY(-135%);opacity:0}
.hero-swap b.in{transform:translateY(0);opacity:1}
.hero-swap b.below{transform:translateY(135%);opacity:0}
@media(prefers-reduced-motion:reduce){.hero-swap b{transition:none}}
/* the swap <b> uses class "in"/"out"/"below" for the slide; ".in" collides with the .hero .in container rule (padding:0 28px) → phantom 28px indent. Neutralise it. */
.hero-swap b.in,.hero-swap b.out,.hero-swap b.below{padding:0!important;margin:0!important;max-width:none!important}
/* mobile: shrink hero headline so the longest nowrap swap term ("data-driven enterprises.") fits the line down to 360px (avoids right-edge clip under .hero-swap overflow:hidden) */
@media(max-width:520px){.hero .hero-copy h1.hero-h1{font-size:clamp(1.625rem,6.4vw,1.9375rem)}}

/* client logo marquee */
.logos{padding:0;background:var(--bg)}
.logos > .wrap{max-width:none;padding:0}
.logocard{max-width:none;margin:0;background:linear-gradient(100deg,var(--primary-dd,#0A5440),var(--primary) 45%,var(--accent-d,#16a06f));border-radius:0;padding:30px 0;box-shadow:none}
.logocard .lbl{text-align:center;font-family:var(--font-mono),monospace;font-size:0.75rem;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:22px}
.logocard .marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.logocard .track{display:flex;align-items:center;width:max-content;animation:logoscroll 44s linear infinite;will-change:transform}
.logocard:hover .track{animation-play-state:paused}
.logocard .lcell{flex:none;width:150px;display:flex;align-items:center;justify-content:center}
.logocard img{height:26px;max-width:118px;width:auto;object-fit:contain;opacity:.72;transition:opacity .2s ease}
.logocard img:hover{opacity:1}
@keyframes logoscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.logocard .track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}.logocard .lcell{width:auto;margin:0 18px 12px}}

/* section background canvas (reactive dots behind a band) */
.bandbg{position:relative}
.bandbg canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.bandbg .wrap{position:relative;z-index:2}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* ===== spotlight / fluorescent cursor-glow cards (shared; design-system .glowcard) =====
   Applied to: homepage mission pillars, all solution-page "What you get" cards, signal-spectrum cards.
   --mx/--my are set per-card by a delegated mousemove listener on each page. */
.glowfx,.pillars .card,.usecase-card,.wyg-card,.off-card,.scenario,.sig-cat{position:relative;overflow:hidden;isolation:isolate}
.glowfx::before,.pillars .card::before,.usecase-card::before,.wyg-card::before,.off-card::before,.scenario::before,.sig-cat::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;transition:opacity .3s ease;
  background-image:radial-gradient(80% 55% at 50% 122%,var(--green-100),transparent 70%),linear-gradient(var(--green-50) 1px,transparent 1px),linear-gradient(90deg,var(--green-50) 1px,transparent 1px);
  background-size:100% 100%,28px 28px,28px 28px;background-position:center bottom,center,center}
.glowfx::after,.pillars .card::after,.usecase-card::after,.wyg-card::after,.off-card::after,.scenario::after,.sig-cat::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(47,214,160,.42),rgba(24,176,131,.13) 42%,transparent 68%)}
.glowfx>*,.pillars .card>*,.usecase-card>*,.wyg-card>*,.off-card>*,.scenario>*,.sig-cat>*{position:relative;z-index:1}
.glowfx:hover,.pillars .card:hover,.usecase-card:hover,.wyg-card:hover,.off-card:hover,.scenario:hover,.sig-cat:hover{border-color:var(--accent)!important;box-shadow:var(--glow-strong)!important;transform:translateY(-4px)}
.glowfx:hover::before,.pillars .card:hover::before,.usecase-card:hover::before,.wyg-card:hover::before,.off-card:hover::before,.scenario:hover::before,.sig-cat:hover::before{opacity:1}
.glowfx:hover::after,.pillars .card:hover::after,.usecase-card:hover::after,.wyg-card:hover::after,.off-card:hover::after,.scenario:hover::after,.sig-cat:hover::after{opacity:1}
@media(prefers-reduced-motion:reduce){.glowfx,.glowfx::after,.pillars .card,.usecase-card,.wyg-card,.off-card,.scenario,.sig-cat{transition:none}.glowfx:hover,.pillars .card:hover,.usecase-card:hover,.wyg-card:hover,.off-card:hover,.scenario:hover,.sig-cat:hover{transform:none}}

/* ============================================================
   SOLUTION-PAGE STANDARDIZATION (shared across risk/data/marketers/enterprises)
   One hero template + one How-it-works flowchart, so all 4 pages match.
   ============================================================ */
/* canonical solution hero - consistent banner height + centred content across all 4 pages */
header.hero.sol-hero{min-height:74vh;display:flex;align-items:center;padding:104px 0 64px}
@media(max-width:900px){header.hero.sol-hero{min-height:auto;padding:108px 0 56px}}
header.hero.sol-hero > .in{width:100%}
.sol-hero-grid{display:grid;grid-template-columns:0.94fr 1.06fr;gap:44px;align-items:center}
@media(max-width:900px){.sol-hero-grid{grid-template-columns:1fr;gap:34px}}
.sol-hero .hero-text{min-width:0}
/* two-class selectors so they reliably beat base `.hero h1` (clamp→68px) */
.sol-hero .sol-h1{font-family:var(--font-display),sans-serif;font-weight:600;font-size:clamp(2.0625rem,3.5vw,2.875rem);line-height:1.08;letter-spacing:-.025em;max-width:15ch;margin:14px 0 0;color:var(--ink)}
.sol-hero .sol-sub{font-size:1.0625rem;color:var(--ink-2);line-height:1.62;max-width:50ch;margin-top:18px}
.sol-hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* integrated illustration container - NO white box, transparent, consistent size */
.sol-hero-art{display:flex;align-items:center;justify-content:center;height:clamp(360px,30vw,470px);position:relative;background:none;border:none;padding:0} /* E1: reduced height to trim whitespace around the illustration */
.sol-hero-art svg{width:100%;height:100%;max-width:clamp(600px,47vw,740px);display:block}
.sol-hero-art img{width:100%;height:100%;max-width:clamp(600px,47vw,740px);object-fit:contain;display:block}
.sol-hero-art::before{content:"";position:absolute;inset:6% 8%;z-index:-1;background:radial-gradient(60% 55% at 55% 45%,var(--green-100),transparent 70%);opacity:.7;border-radius:50%}
@media(max-width:900px){.sol-hero-art{height:300px}}
@media(max-width:560px){.sol-hero-art{height:250px}}

/* ===== DecisionX-style stepped card-timeline (shared .hiw-steps) ===== */
.hiw-steps{margin-top:6px}
.hiw-head{display:grid;grid-template-columns:1.08fr .92fr;gap:18px 48px;align-items:end;margin-bottom:42px}
.hiw-head .hiw-eyebrow{font-family:var(--font-mono),monospace;font-size:0.75rem;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--primary-d);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.hiw-head .hiw-eyebrow::before{content:"";width:26px;height:1.5px;background:var(--primary)}
.hiw-head h2{font-size:clamp(1.625rem,3.2vw,2.5rem);font-weight:600;letter-spacing:-.02em;line-height:1.07;color:var(--ink);margin:0}
.hiw-head .hiw-sub{font-size:1rem;color:var(--ink-2);line-height:1.6;max-width:44ch;padding-bottom:5px}
@media(max-width:820px){.hiw-head{grid-template-columns:1fr;align-items:start}.hiw-head .hiw-sub{max-width:62ch}}
.hiw-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.hiw-row::before{content:"";position:absolute;top:58px;left:13%;right:13%;height:2px;background:linear-gradient(90deg,var(--line-2),var(--green-300));z-index:0}
@media(max-width:880px){.hiw-row{grid-template-columns:1fr 1fr;gap:16px}.hiw-row::before{display:none}}
@media(max-width:560px){.hiw-row{grid-template-columns:1fr}}
.hiw-step{position:relative;z-index:1;background:var(--bg);border:1px solid var(--line);border-radius:var(--r4);padding:var(--pad-card);display:flex;flex-direction:column;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;overflow:hidden}
.hiw-step:hover{border-color:var(--accent);box-shadow:var(--glow);transform:translateY(-4px)}
.hiw-badge{width:60px;height:60px;flex:none;border-radius:50%;border:2px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono),monospace;font-size:1.1875rem;font-weight:600;color:var(--ink-2);background:var(--bg);margin-bottom:18px}
.hiw-step h4{font-size:1rem;font-weight:600;color:var(--ink);margin:0 0 8px;line-height:1.24}
.hiw-step p{font-size:0.8438rem;color:var(--ink-2);line-height:1.58;margin:0 0 16px}
.hiw-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}
.hiw-pill{font-size:0.7188rem;padding:5px 10px;border-radius:0;border:1px solid var(--line-2);color:var(--ink-2);background:var(--bg);white-space:nowrap}
.hiw-step.is-active{border-color:var(--green-200)}
.hiw-step.is-active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--accent))}
.hiw-step.is-active .hiw-badge{border-color:var(--primary);color:var(--primary-d);box-shadow:0 0 0 5px var(--green-50)}
.hiw-step.is-active .hiw-pill{border-color:var(--green-300);color:var(--primary-d);background:var(--green-50)}
@media(prefers-reduced-motion:reduce){.hiw-step{transition:none}.hiw-step:hover{transform:none}}

/* ===== shared flowchart language (How-it-works infographics; mirrors enterprises) ===== */
.infographic{width:100%;height:auto;max-width:100%}
.hiw-flow{margin:40px 0 8px}
.hiw-flow .flow-step{opacity:0}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes arrowFlow{0%{stroke-dashoffset:60;opacity:0}10%{opacity:1}90%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.hiw-flow .flow-step{opacity:1!important;animation:none!important}.hiw-flow [style*="arrowFlow"]{opacity:.6!important;animation:none!important}}

/* ===== get-in-touch nudge band (section break to kill white-slide monotony) ===== */
.nudgewrap{padding:34px 0}
/* full-bleed nudge variant (homepage) - edge-to-edge band */
.nudgewrap-full{padding:0}
.nudgewrap-full > .wrap{max-width:none;padding:0}
.nudgewrap-full .nudge{border-radius:0;padding:48px max(28px, calc((100% - var(--container)) / 2))}
.nudgewrap-full .nudge::after{opacity:.26;width:340px;height:340px;background-size:18px 18px}
.nudgewrap-full .ntxt{max-width:none}
.nudge{position:relative;overflow:hidden;background:linear-gradient(118deg,var(--primary-dd),var(--green-800) 42%,var(--primary) 100%);color:#fff;border-radius:var(--r2);padding:42px 46px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;box-shadow:var(--glow-strong)}
.nudge::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(440px 220px at 90% -15%,rgba(255,255,255,.18),transparent 60%),radial-gradient(320px 220px at 6% 125%,rgba(47,214,160,.40),transparent 60%)}
.nudge::after{content:"";position:absolute;right:6%;top:50%;transform:translateY(-50%);width:280px;height:280px;pointer-events:none;opacity:.16;background-image:radial-gradient(circle,#fff 1.6px,transparent 1.7px);background-size:20px 20px;-webkit-mask-image:radial-gradient(circle,#000,transparent 68%);mask-image:radial-gradient(circle,#000,transparent 68%)}
.nudge .ntxt{position:relative;z-index:1;min-width:0;flex:1 1 480px}
.nudge h3{font-size:clamp(1.25rem,2.4vw,1.8125rem);font-weight:600;letter-spacing:-.02em;margin:0 0 7px;color:#fff}
.nudge p{font-size:0.9375rem;color:rgba(255,255,255,.82);margin:0;max-width:72ch}
.nudge .nbtn{position:relative;z-index:1;flex:none}
.nudge .btn-white{background:#fff;color:var(--primary-d);border:none}
.nudge .btn-white:hover{background:#EEFBF5;box-shadow:0 14px 32px -10px rgba(0,0,0,.35);transform:translateY(-2px)}
@media(max-width:680px){.nudge{padding:30px 24px}.nudge .nbtn{width:100%}.nudge .btn-white{width:100%;justify-content:center}}

/* ===== full solid-green section (glossy) - e.g. Why we exist ===== */
section.greenband{position:relative;overflow:clip;background:linear-gradient(162deg,var(--green-900),var(--green-800) 44%,var(--primary-d));border-top:none;color:#fff}
section.greenband::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(820px 400px at 80% -8%,rgba(47,214,160,.28),transparent 60%),radial-gradient(620px 320px at 4% 112%,rgba(134,227,194,.16),transparent 60%)}
section.greenband > .wrap{position:relative;z-index:1}
section.greenband .sec-title,section.greenband h2,section.greenband h3,section.greenband h4{color:#fff}
section.greenband .sec-sub,section.greenband p,section.greenband .lead{color:rgba(255,255,255,.85)}
section.greenband .kicker{color:var(--accent)}
section.greenband .why-head .btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.32)}
section.greenband .why-head .btn-ghost:hover{background:rgba(255,255,255,.16);border-color:#fff}
section.greenband .gt{background:linear-gradient(90deg,#fff,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
section.greenband .acts::before{background:linear-gradient(180deg,var(--accent),rgba(255,255,255,.4))}
section.greenband .act .num{color:rgba(255,255,255,.22)}
/* glossy cards/manifesto on green */
section.greenband .card,section.greenband .manifesto,section.greenband .diagram>div,section.greenband .pillars .card{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.16)!important;backdrop-filter:blur(6px)}
section.greenband .card p{color:rgba(255,255,255,.82)}
section.greenband .card .ico{background:linear-gradient(145deg,var(--accent),var(--primary))!important;color:#063A2B}
section.greenband .manifesto blockquote{color:#fff}
section.greenband .manifesto .qm{color:var(--accent)}
section.greenband .pts .pic{background:rgba(255,255,255,.12);color:var(--accent)}
section.greenband .pts b{color:#fff}
section.greenband .badge-soft{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.25)}
section.greenband .ceil span{color:rgba(255,255,255,.7)}
section.greenband .ceil .ln{background:rgba(255,255,255,.3)}
section.greenband .dlbl{color:rgba(255,255,255,.7)}
/* glossy spotlight glow already from .pillars .card - soften border on green */
section.greenband .pillars .card::before{opacity:.25}
/* extend greenband to cover solution-page card types + metrics + hiw on a solid-green section */
section.greenband .wyg-card,section.greenband .usecase-card,section.greenband .off-card,section.greenband .scenario,section.greenband .sig-cat{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.18)!important;backdrop-filter:blur(6px)}
section.greenband .wyg-card h4,section.greenband .usecase-card h4,section.greenband .off-card h3,section.greenband .scenario h4,section.greenband .wyg-card h3{color:#fff!important}
section.greenband .wyg-card p,section.greenband .usecase-card p,section.greenband .off-card p,section.greenband .scenario p,section.greenband .off-card .tag,section.greenband .scenario .tag{color:rgba(255,255,255,.84)!important}
section.greenband .wyg-card .icon,section.greenband .usecase-card .ico,section.greenband .off-card-ico,section.greenband .scenario .ico{background:linear-gradient(145deg,var(--accent),var(--primary))!important;color:#063A2B!important}
section.greenband .metric{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.2)!important;border-left-color:var(--accent)!important}
section.greenband .metric .num{color:#fff!important}
section.greenband .metric .lbl{color:rgba(255,255,255,.78)!important}
section.greenband .off-card .tag,section.greenband .scenario .tag{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.22)!important}
section.greenband .sec-sub,section.greenband .eyebrow{color:rgba(255,255,255,.82)}
section.greenband .eyebrow{color:var(--accent)}

/* === greenband contrast overhaul (legibility fix) - kill the white-bg graph-paper grid inside green cards, give cards a real readable surface === */
section.greenband .wyg-card::before,section.greenband .usecase-card::before,section.greenband .off-card::before,section.greenband .scenario::before,section.greenband .sig-cat::before,section.greenband .card::before,section.greenband .pillars .card::before{
  background-image:linear-gradient(168deg,rgba(255,255,255,.07),transparent 58%)!important;background-size:100% 100%!important;background-position:0 0!important;opacity:1!important}
section.greenband .wyg-card,section.greenband .usecase-card,section.greenband .off-card,section.greenband .scenario,section.greenband .sig-cat,section.greenband .card,section.greenband .manifesto,section.greenband .pillars .card{
  background:linear-gradient(165deg,rgba(255,255,255,.13),rgba(255,255,255,.055))!important;
  border:1px solid rgba(255,255,255,.22)!important;border-radius:0!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 42px -26px rgba(0,0,0,.6)!important;
  backdrop-filter:blur(3px)!important}
section.greenband .wyg-card h4,section.greenband .wyg-card h3,section.greenband .usecase-card h4,section.greenband .off-card h3,section.greenband .scenario h4{color:#fff!important;letter-spacing:-.01em}
section.greenband .wyg-card p,section.greenband .usecase-card p,section.greenband .off-card p,section.greenband .scenario p,section.greenband .card p{color:rgba(255,255,255,.93)!important}
section.greenband .wyg-card .icon,section.greenband .wyg-card .ico,section.greenband .usecase-card .ico{width:46px!important;height:46px!important;border-radius:0!important;background:linear-gradient(145deg,var(--accent),var(--primary))!important;color:#063A2B!important;box-shadow:0 8px 18px -8px rgba(47,214,160,.55)!important}
section.greenband .wyg-card .icon svg,section.greenband .wyg-card .ico svg{stroke:#063A2B!important}
section.greenband .wyg-card:hover,section.greenband .usecase-card:hover,section.greenband .off-card:hover,section.greenband .scenario:hover,section.greenband .card:hover{border-color:var(--accent)!important;transform:translateY(-4px)}

/* solution-hero dots are CANVAS-ONLY now (cursor-proximity field, per-page inline JS).
   The old static CSS radial dot-field (opacity .4, always visible) was removed per feedback. */
.sol-hero{position:relative}
.sol-hero .in{position:relative;z-index:2}

/* vision constellation - white distinct lines; node fills handled in JS (avoid filling the ring) */
section.greenband #constellation-lines line{stroke:rgba(255,255,255,.78)!important}
section.greenband #vision-constellation text{fill:rgba(255,255,255,.9)!important}

/* ===== Why-we-exist: full legible green treatment (WS3) ===== */
/* kill the white sticky header bar; make it green-native */
section.greenband .why-head{position:sticky;top:64px;z-index:12;background:linear-gradient(180deg,var(--green-900) 78%,rgba(7,58,43,0));backdrop-filter:blur(4px);border-bottom:1px solid rgba(255,255,255,.16);padding:16px 0 16px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
section.greenband .why-head .sec-title{color:#fff}
/* act numbers, kicker, timeline rail */
/* SOLID step circles so the vertical timeline line is hidden behind them */
section.greenband .act .num{background:var(--green-800)!important;border-color:var(--accent)!important;color:#fff!important;box-shadow:0 0 0 6px var(--green-900)!important}
section.greenband .act .kicker{color:var(--accent)}
section.greenband .acts::before{background:linear-gradient(180deg,var(--accent),rgba(255,255,255,.5) 50%,rgba(255,255,255,.14))}
/* body copy + bullet list legibility (these out-specific the generic greenband p) */
section.greenband .act h3{color:#fff}
section.greenband .act .lead{color:rgba(255,255,255,.86)}
section.greenband .act ul.pts p{color:rgba(255,255,255,.82)}
section.greenband .act ul.pts b{color:#fff}
section.greenband .act ul.pts .pic{background:rgba(255,255,255,.14);color:var(--accent)}
/* cards / manifesto / diagram - slightly stronger glass for contrast */
section.greenband .card,section.greenband .manifesto,section.greenband .diagram,section.greenband .diagram>div,section.greenband .pillars .card{background:rgba(255,255,255,.085)!important;border:1px solid rgba(255,255,255,.20)!important;backdrop-filter:blur(7px)}
section.greenband .pillars .card h4{color:#fff}
section.greenband .pillars .card p{color:rgba(255,255,255,.82)}
section.greenband .manifesto .lead{color:rgba(255,255,255,.86)}
/* diagram internals */
section.greenband .diagram{padding:22px}
section.greenband .diagram .dlbl{color:rgba(255,255,255,.72)}
section.greenband .diagram .ceil span{color:var(--accent)}
section.greenband .diagram .ceil .ln{background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 12px)}
section.greenband .diagram .dgr-plat{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.22)!important}
section.greenband .diagram .dgr-plat .dgr-lbl{color:rgba(255,255,255,.7)}
section.greenband .diagram .vnote{color:rgba(255,255,255,.78)!important}
/* collabflow (5-step collaboration flow) */
section.greenband .collabflow .cf::after{background:linear-gradient(90deg,rgba(255,255,255,.3),rgba(255,255,255,.5))}
section.greenband .collabflow .cf b{color:#fff}
section.greenband .collabflow .cf em{color:rgba(255,255,255,.8)}
section.greenband .collabflow .cf .ic{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.4);color:#fff;box-shadow:0 0 0 5px var(--primary)}
section.greenband .collabflow .cf .ic svg{color:#fff}
section.greenband .collabflow .cf.is-last .ic{background:rgba(255,255,255,.25);color:#fff;border-color:rgba(255,255,255,.4)}

/* ============================================================
   SEAMLESS GRADIENT TRANSITION: marquee (green) → white section
   Pure gradient color diffusion (no blur, no halftone) from green marquee to white section.
   Green-tinted color gradient that dissolves smoothly with no visible hard line.
   ============================================================ */
.halftone-transition{
  --ht-par:0px;
  position:relative;width:100%;height:220px;overflow:hidden;
  /* Seamless green→white gradient diffusion; no hard line, no blur effect needed */
  /* top color MUST equal the logocard/marquee bottom (#2AB888) and the bottom MUST equal
     the #platform top (#eef8f5) so there is no hard line at either seam */
  background:linear-gradient(180deg,
    #2AB888 0%,
    #57CCA2 18%,
    #8FDDC0 38%,
    #BEEAD9 56%,
    #DCF2EA 72%,
    #F4FBF8 88%,
    #FFFFFF 100%);
  pointer-events:none;
}
/* mobile: the 220px diffusion band reads as a dead empty zone above the platform
   scene - keep the seam blend but compress it */
@media(max-width:999px){
  .halftone-transition{height:72px}
}
/* Optional subtle green radial glow overlay for visual interest (very light, parallax on scroll) */
.halftone-transition::before{
  content:'';position:absolute;left:50%;top:0;width:800px;height:300px;margin-left:-400px;
  background:radial-gradient(ellipse 400px 150px at 50% 0%, rgba(22,156,118,0.12), transparent 70%);
  transform:translate3d(0,var(--ht-par),0);
  will-change:transform;pointer-events:none;
  opacity:0.6;
}
/* No bottom feather needed - gradient naturally dissolves to white */
.halftone-transition::after{display:none}
@media(prefers-reduced-motion:reduce){
  .halftone-transition::before{transform:none}
}
/* the soft transition already separates the marquee from the platform section - drop the band border so the white dissolve is seamless */
#platform{border-top:none;padding-top:50px}

/* ============================================================
   GREEN-ON-GREEN DESIGN SYSTEM (foundational tokens + utilities)

   Color tokens for legible, contrast-checked foreground/background pairs
   on green backgrounds. All pairs meet WCAG AA (4.5:1 normal, 3:1 large).

   Brand green: #169C76 (RGB 22, 156, 118, luminance 0.18)
   ============================================================ */

/* === green-on-green tokens (root) === */
:root {
  /* surfaces + cards on green */
  --green-card-bg: rgba(255, 255, 255, 0.13);      /* subtle frosted glass on green; used for cards/surfaces */
  --green-card-bg-light: rgba(255, 255, 255, 0.18); /* slightly more opaque for better readability */
  --green-card-border: rgba(255, 255, 255, 0.22);   /* border on green cards; meets contrast on light surfaces */

  /* text on green backgrounds */
  --green-text-primary: #FFFFFF;                    /* white; 4.57:1 on --primary green */
  --green-text-secondary: rgba(255, 255, 255, 0.86); /* slightly muted white for secondary/body copy */
  --green-text-muted: rgba(255, 255, 255, 0.68);    /* muted white for captions, fine-print */
  --green-text-accent: var(--accent);               /* #2FD6A0; bright green accent on dark green */

  /* buttons on green */
  --green-btn-dark-bg: #063A2B;                     /* very dark green; 5.82:1 on white text */
  --green-btn-dark-hover: #052F24;                  /* darker on hover */
  --green-btn-black-bg: #0A1F18;                    /* near-black option; 7.25:1 on white text */
  --green-btn-black-hover: #070B12;                 /* darker on hover */

  /* borders + dividers on green */
  --green-divider: rgba(255, 255, 255, 0.18);      /* thin divider lines on green */
  --green-divider-glow: rgba(47, 214, 160, 0.5);   /* glowing divider (metrics section) */
}

/* === green-card base: frosted glass surface on green === */
.green-card,
.green-on-green .card,
section.greenband .green-card {
  background: var(--green-card-bg);
  border: 1px solid var(--green-card-border);
  backdrop-filter: blur(6px);
  border-radius: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 18px 42px -26px rgba(0, 0, 0, 0.6);
}

.green-card h4,
.green-card h3,
.green-on-green .card h4,
section.greenband .green-card h4 {
  color: var(--green-text-primary);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.green-card p,
.green-card em,
.green-on-green .card p,
section.greenband .green-card p {
  color: var(--green-text-secondary);
}

.green-card .muted,
section.greenband .green-card .muted {
  color: var(--green-text-muted);
}

/* === green-btn: button on green backgrounds === */
.green-btn,
.green-on-green .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 0;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
  border: none;
}

/* dark green button (preferred on green) */
.green-btn-dark,
.green-on-green .btn-dark {
  background: var(--green-btn-dark-bg);
  color: var(--green-text-primary);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.35);
}

.green-btn-dark:hover,
.green-on-green .btn-dark:hover {
  background: var(--green-btn-dark-hover);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}

.green-btn-dark:active {
  transform: translateY(0);
}

/* near-black button (maximum contrast) */
.green-btn-black,
.green-on-green .btn-black {
  background: var(--green-btn-black-bg);
  color: var(--green-text-primary);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.35);
}

.green-btn-black:hover,
.green-on-green .btn-black:hover {
  background: var(--green-btn-black-hover);
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}

.green-btn-black:active {
  transform: translateY(0);
}

/* button arrow icon (always included for distinction) */
.green-btn .arrow,
.green-on-green .btn .arrow {
  transition: transform 0.15s ease;
  width: 14px;
  height: 14px;
}

.green-btn:hover .arrow,
.green-on-green .btn:hover .arrow {
  transform: translateX(3px);
}

/* ============================================================
   METRICS-SECTION PATTERN (Stripe-style green gradient)

   Seamless metrics + "what you get" cards on shared green gradient.
   Center-aligned numbers with animated shimmer/glow, thin glowing
   divider lines above/below.
   ============================================================ */

/* === metrics-band: full-width green gradient container === */
.metrics-band {
  background: linear-gradient(135deg, #0E7256 0%, #158a6a 50%, #169C76 100%);
  position: relative;
  overflow: hidden;
}

.metrics-band::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(800px 400px at 80% -8%, rgba(47, 214, 160, 0.28), transparent 60%),
              radial-gradient(600px 300px at 4% 112%, rgba(134, 227, 194, 0.16), transparent 60%);
  z-index: 0;
}

.metrics-band > * {
  position: relative;
  z-index: 1;
}

/* === metrics-row: centered metrics + dividers === */
.metrics-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  padding: 42px 0;
  flex-wrap: wrap;
  position: relative;
}

/* top divider: glowing line above metrics */
.metrics-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--green-divider-glow) 25%,
    var(--green-divider-glow) 75%,
    transparent 100%);
  box-shadow: 0 0 12px var(--green-divider-glow), 0 0 24px rgba(47, 214, 160, 0.3);
}

/* bottom divider: glowing line below metrics */
.metrics-row::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--green-divider-glow) 25%,
    var(--green-divider-glow) 75%,
    transparent 100%);
  box-shadow: 0 0 12px var(--green-divider-glow), 0 0 24px rgba(47, 214, 160, 0.3);
}

/* === metric: single number + label === */
.metric-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 2;
}

.metric-value {
  font-family: var(--font-mono), monospace;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  color: var(--green-text-primary);
  letter-spacing: -0.02em;
  position: relative;
  line-height: 1.1;

  /* animated shimmer/glow outline on scroll */
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 45%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.3) 55%,
    transparent 100%);
  background-size: 200% 100%;
  background-position: 200% 0;
  animation: metrics-shimmer 3s ease-in-out infinite;
}

.metric-label {
  font-size: 0.8125rem;
  color: var(--green-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  max-width: 12ch;
}

/* shimmer animation: subtle glow sweep across metrics */
@keyframes metrics-shimmer {
  0% { background-position: 200% 0; }
  50% { background-position: -200% 0; }
  100% { background-position: -200% 0; }
}

/* scroll-triggered glow pulse: more aggressive on scroll enter */
.metrics-row.in-view .metric-value {
  animation: metrics-shimmer 2s ease-in-out infinite;
}

/* optional: per-metric stagger for entrance animation */
.metric-item:nth-child(1) { animation-delay: 0s; }
.metric-item:nth-child(2) { animation-delay: 0.1s; }
.metric-item:nth-child(3) { animation-delay: 0.2s; }

/* prefers-reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {
  .metric-value {
    animation: none;
    background: none;
    color: var(--green-text-primary);
  }

  .metrics-row::before,
  .metrics-row::after {
    box-shadow: none;
    background: var(--green-divider);
  }
}

/* === metrics-band typography overrides === */
.metrics-band h2,
.metrics-band h3 {
  color: var(--green-text-primary);
}

.metrics-band p,
.metrics-band .sec-sub {
  color: var(--green-text-secondary);
}

/* === ensure cards inside metrics-band follow green-on-green tokens === */
.metrics-band .card,
.metrics-band .wyg-card,
.metrics-band .green-card {
  background: var(--green-card-bg);
  border: 1px solid var(--green-card-border);
  backdrop-filter: blur(6px);
}

.metrics-band .card h4,
.metrics-band .wyg-card h4,
.metrics-band .green-card h4 {
  color: var(--green-text-primary);
}

.metrics-band .card p,
.metrics-band .wyg-card p,
.metrics-band .green-card p {
  color: var(--green-text-secondary);
}

/* ============================================================
   ACCESSIBILITY & RESPONSIVE
   ============================================================ */

@media (max-width: 680px) {
  .metrics-row {
    gap: 28px;
    padding: 28px 0;
  }

  .metric-value {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  }

  .metrics-row::before,
  .metrics-row::after {
    left: 5%;
    right: 5%;
  }
}


/* ============================================================
   LattIQ - Signals Bento (#signals)  ·  drop-in styles
   Move these rules into styles/theme.css (or keep as a partial).
   All colours resolve from LattIQ tokens with hard fallbacks, so
   it works whether or not theme.css is present.
   ============================================================ */

.signals-final{
  /* local design tokens for this section (LattIQ green family only) */
  --sg-g1:var(--primary,#169C76);
  --sg-g2:var(--accent,#2FD6A0);
  --sg-head:var(--ink,#0A1F18);
  --sg-title:var(--ink,#0A1F18);
  --sg-desc:var(--ink-2,#37514A);
  --sg-stat-lbl:var(--ink-3,#6A827A);
  --sg-ecdot:var(--line-2,#C9DED5);
  --sg-card-bg:var(--bg,#FFFFFF);
  --sg-card-bd:var(--line,#E3F0EA);
  --sg-grid-l:#EAFBF3;
  --sg-halo:#D7F5E8;
  --sg-chip-bg:var(--bg-2,#F5FAF7);
  --sg-chip-bd:var(--line,#DDEAE4);
  --sg-chip-fg:var(--ink-2,#37514A);
  --sg-more:var(--primary,#169C76);
  --sg-exp-fill:linear-gradient(150deg, rgba(7,53,39,.95), rgba(14,114,86,.93));

  position:relative;
  padding:78px 0;
  font-family:var(--font-body,'Geist',system-ui,sans-serif);
  /* Aurora background: a clean light-green base with deeper green pools so the
     eye reads "greener area vs lighter area" - not a flat green wash. Two layers
     drift very slowly + independently (::before deep-green blobs, ::after brand
     pools) for a living-but-calm motion. See @keyframes sg-auroraA / sg-auroraB. */
  background-color:#F1FAF5;
  overflow:hidden;
  isolation:isolate;
}
/* Layer A - soft green blobs (the gentle "greener areas"). Light enough not to
   compete with the headline; oversized so the drift never exposes an edge. */
.signals-final::before{
  content:"";position:absolute;z-index:-2;inset:-18%;pointer-events:none;
  background-image:
    radial-gradient(46% 56% at 10% 14%, #BDEBD8 0%, rgba(189,235,216,0) 60%),
    radial-gradient(50% 54% at 90% 6%,  #C6EEDE 0%, rgba(198,238,222,0) 58%),
    radial-gradient(58% 64% at 74% 104%,#B7E9D4 0%, rgba(183,233,212,0) 60%);
  will-change:transform;
  animation:sg-auroraA 24s cubic-bezier(.4,0,.2,1) infinite alternate;
}
/* Layer B - very soft brand-green pools, drifting on a different clock for depth. */
.signals-final::after{
  content:"";position:absolute;z-index:-1;inset:-18%;pointer-events:none;
  background-image:
    radial-gradient(40% 46% at 44% 42%, rgba(47,214,160,.11) 0%, rgba(47,214,160,0) 62%),
    radial-gradient(38% 44% at 66% 70%, rgba(22,156,118,.08) 0%, rgba(22,156,118,0) 60%);
  will-change:transform;
  animation:sg-auroraB 18s cubic-bezier(.4,0,.2,1) infinite alternate;
}
@keyframes sg-auroraA{0%{transform:translate3d(0,0,0) scale(1);}100%{transform:translate3d(3.5%,2.5%,0) scale(1.12);}}
@keyframes sg-auroraB{0%{transform:translate3d(0,0,0) scale(1.05);}100%{transform:translate3d(-3%,-2%,0) scale(1);}}

.signals-final .wrap{max-width:var(--container);margin:0 auto;padding:0 28px;text-align:center;}

/* headline */
.signals-final .sec-title{
  margin:0 auto;max-width:940px;
  font-family:var(--font-display,'Geist',system-ui,sans-serif);
  font-size:clamp(1.625rem,3.4vw,2.375rem);font-weight:600;letter-spacing:-.02em;line-height:1.12;
  color:var(--sg-head);
}
.signals-final .sec-title .gt{
  background:linear-gradient(120deg,var(--sg-g1),var(--sg-g2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* stat strip */
.signals-final .eco-counters{
  display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px;flex-wrap:wrap;
}
.signals-final .ecm{display:flex;flex-direction:column;align-items:center;gap:3px;}
.signals-final .counter{
  font-family:var(--font-display,'Geist',system-ui,sans-serif);
  font-size:2rem;font-weight:700;letter-spacing:-.02em;line-height:1;
  /* brighter, more vivid green so the metrics pop against the light aurora bg */
  background:linear-gradient(120deg,#0B7A5A,#16C48C);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.signals-final .stats-lbl{
  font-family:var(--font-mono,'Geist Mono',monospace);
  font-size:0.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sg-stat-lbl);
}
.signals-final .ecdot{width:5px;height:5px;border-radius:50%;background:var(--sg-ecdot);display:inline-block;}

/* bento grid: 5 cols × 2 rows */
.signals-final .signal-grid{
  display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,clamp(198px,13vw,252px));
  gap:18px;grid-auto-flow:dense;margin:34px auto 0;text-align:left;max-width:1320px;
}
/* below desktop the 5-col interactive bento is cramped; JS interactivity bails <1000px
   (js/signals-bento.js) and the cards fall back to a static, readable tile grid */
/* (mobile signal-grid rules live AFTER the base card rules below - the base
   .sig-inner/.sig-body/.sig-title declarations share specificity with the
   media-query overrides, so source order decides; keeping the mobile block
   last is what makes it actually win.) */

/* card (rest) */
.signals-final .sigcard{
  position:relative;overflow:hidden;border-radius:var(--r2,4px);
  background:var(--sg-card-bg);
  background-image:
    linear-gradient(var(--sg-grid-l) 1px,transparent 1px),
    linear-gradient(90deg,var(--sg-grid-l) 1px,transparent 1px);
  background-size:30px 30px;
  border:1px solid var(--sg-card-bd);
  box-shadow:0 1px 2px rgba(10,31,24,.05);
  cursor:pointer;outline:none;transform-origin:0 0;
  transition:border-color .35s ease, box-shadow .35s ease;
}
.signals-final .sig-inner{position:absolute;inset:0;transform-origin:0 0;}

/* coloured top edge */
.signals-final .sig-bar{
  position:absolute;top:0;left:0;right:0;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--sg-g1),var(--sg-g2));
}
/* bottom radial halo (rest) */
.signals-final .sig-halo{
  position:absolute;left:0;right:0;bottom:-26%;height:66%;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%,var(--sg-halo),transparent 72%);
  opacity:.5;transition:opacity .4s ease;
}
/* green fill revealed on expand */
.signals-final .sig-fill{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:var(--sg-exp-fill);transition:opacity .4s ease;
}
.signals-final .sig-body{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:20px;
}

/* icon tile */
.signals-final .ico{
  width:42px;height:42px;border-radius:var(--r2,4px);display:grid;place-items:center;
  background:linear-gradient(135deg,#169C76,#2FD6A0);color:#fff;border:1px solid transparent;
  transition:background .35s ease,color .35s ease;
}
.signals-final .ico svg{width:22px;height:22px;}

.signals-final .sig-title{
  margin:13px 0 0;font-family:var(--font-display,'Geist',system-ui,sans-serif);
  font-size:0.9688rem;font-weight:600;letter-spacing:-.012em;line-height:1.22;color:var(--sg-title);
  transition:color .35s ease;
}

/* detail (hidden until expand) */
.signals-final .sig-detail{
  display:none;flex-direction:column;align-items:center;opacity:0;margin-top:11px;
  transition:opacity .35s ease .06s;
}
.signals-final .sig-desc{
  margin:0;font-family:var(--font-body,'Geist',system-ui,sans-serif);
  font-size:0.75rem;line-height:1.5;color:var(--sg-desc);max-width:184px;
}
.signals-final .sigchips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:12px;}
.signals-final .chip{
  font-family:var(--font-mono,'Geist Mono',monospace);font-size:0.625rem;letter-spacing:.02em;
  padding:4px 9px;border-radius:0;white-space:nowrap;
  background:var(--sg-chip-bg);border:1px solid var(--sg-chip-bd);color:var(--sg-chip-fg);
}
.signals-final .more{
  font-family:var(--font-mono,'Geist Mono',monospace);font-size:0.625rem;letter-spacing:.02em;
  padding:4px 9px;border-radius:0;white-space:nowrap;color:var(--sg-more);
}

/* ---- expanded state (one card at a time; class toggled by JS) ---- */
.signals-final .sigcard.is-expanded{
  z-index:4;border-color:var(--sg-g2);
  box-shadow:0 26px 64px -28px rgba(4,36,27,.55);
}
.signals-final .sigcard.is-expanded .sig-fill{opacity:1;}
.signals-final .sigcard.is-expanded .sig-halo{opacity:0;}
.signals-final .sigcard.is-expanded .sig-detail{display:flex;opacity:1;}
.signals-final .sigcard.is-expanded .sig-title{color:#fff;}
.signals-final .sigcard.is-expanded .sig-desc{color:#D7F5E8;}
.signals-final .sigcard.is-expanded .ico{background:rgba(255,255,255,.16);color:#fff;border-color:transparent;}
.signals-final .sigcard.is-expanded .chip{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.24);color:#EAF7F1;}
.signals-final .sigcard.is-expanded .more{color:#A7F3D0;}

/* ---- below-desktop static tile grid (JS interactivity bails <1000px) ----
   These blocks MUST stay after the base card rules above: same specificity,
   so source order is what lets the mobile values win. */
@media(max-width:999px){
  .signals-final .signal-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:none;grid-auto-rows:minmax(152px,auto);grid-auto-flow:row;}
  .signals-final .sigcard{grid-column:auto!important;grid-row:auto!important;}
  /* .sig-inner is absolute for the desktop FLIP animation, which stops the
     tile from growing with its text and clips 2-line titles. Static here so
     every tile sizes to its content. */
  .signals-final .sig-inner{position:static;}
}
@media(max-width:600px){
  /* compact tile grid on phones; rows auto-size to content (no clipping),
     comfortable padding on either side. "Explore all signals" links onward. */
  .signals-final .signal-grid{grid-template-columns:repeat(3,1fr);gap:10px;grid-auto-rows:auto;margin-top:26px}
  .signals-final .sig-body{padding:14px 8px;min-height:98px;height:auto}
  .signals-final .ico{width:34px;height:34px;border-radius:0}
  .signals-final .ico svg{width:18px;height:18px}
  .signals-final .sig-title{font-size:0.6875rem;margin-top:7px;line-height:1.2;letter-spacing:-.01em;overflow-wrap:break-word}
}

/* accessibility: no auto-motion / transforms when the user opts out */
@media (prefers-reduced-motion:reduce){
  .signals-final .sigcard,
  .signals-final .sig-fill,
  .signals-final .sig-halo,
  .signals-final .sig-detail,
  .signals-final .ico,
  .signals-final .sig-title{transition:none;}
  .signals-final::before,
  .signals-final::after{animation:none;}
}

/* ===== NEW FAQ DESIGN (Claude Design) ===== */
.faq{padding:84px 0;border-top:1px solid var(--line);background:var(--bg-2)}
.faq .wrap{max-width:var(--container);margin:0 auto;padding:0 28px}
.faq-head{text-align:center;max-width:720px;margin:0 auto 44px}
.faq-head .eyebrow{font-family:var(--font-mono),monospace;font-size:0.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--primary);margin-bottom:16px}
.faq-head h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.75rem,3.4vw,2.5rem);letter-spacing:-.02em;line-height:1.08;color:var(--ink);margin:0}
.faq-list{max-width:780px;margin:0 auto;border-bottom:1px solid var(--line)}
.faq-item{border-top:1px solid var(--line)}
.faq-q{display:flex;width:100%;align-items:center;justify-content:space-between;gap:28px;background:none;border:none;cursor:pointer;text-align:left;font:inherit;color:inherit;padding:24px 4px;border-radius:var(--r2)}
.faq-q:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.faq-q .q-text{font-family:var(--font-display);font-weight:500;font-size:1.125rem;line-height:1.4;color:var(--ink);transition:color .25s}
.faq-item.open .q-text{color:var(--primary)}
.faq-chev{flex:none;display:flex;color:var(--ink-3);transition:transform .32s cubic-bezier(.4,0,.2,1),color .25s}
.faq-item.open .faq-chev{transform:rotate(180deg);color:var(--primary)}
.faq-panel{overflow:hidden;max-height:0;opacity:0;transition:max-height .36s cubic-bezier(.4,0,.2,1),opacity .3s ease}
.faq-item.open .faq-panel{max-height:var(--faq-maxh,360px);opacity:1}
.faq-a{font-family:var(--font-body);font-size:1rem;line-height:1.7;color:var(--ink-2);max-width:64ch;margin:0;padding:0 4px 26px}
@media (prefers-reduced-motion:reduce){.faq-panel,.faq-chev,.faq-item{transition:none}}


/* ============================================================================
   WHY WE EXIST - scroll-stack section · "Tonal Ascent"  (framework-free port)
   ============================================================================ */
.wwe-section{
  /* Knobs (scoped). Fonts inherit the site theme so the font-toggle applies. */
  --wwe-primary:#169C76;
  --wwe-accent:#2FD6A0;
  --wwe-font-display:var(--font-display);
  --wwe-font-body:var(--font-body, var(--font-display));
  --wwe-font-mono:var(--font-mono);
  --wwe-nav-h:72px;   /* clears our floating nav pill (10px top + 58px) */
  --wwe-bar-h:60px;
  --wwe-stack-step:52px;
  --wwe-card0-top:calc(var(--wwe-nav-h) + var(--wwe-bar-h));
  --wwe-card1-top:calc(var(--wwe-nav-h) + var(--wwe-bar-h) + var(--wwe-stack-step));
  --wwe-card2-top:calc(var(--wwe-nav-h) + var(--wwe-bar-h) + (var(--wwe-stack-step) * 2));
  position:relative;
  background:#EFF5F2;
  border-top:none;  /* morph exit sits directly above - no seam line */
  padding-top:30px;                  /* breathing room above the sticky bar */
  padding-bottom:64px;               /* space between the last card and the blog section break */
  font-family:var(--wwe-font-body);
  color:#0A1F18;
}
.wwe-bar{
  position:sticky;top:calc(var(--wwe-nav-h) + 8px);z-index:60;height:var(--wwe-bar-h);
  max-width:clamp(1060px, calc(73vw - 60px), 1800px);margin:0 auto;/* match wwe-track width minus its 2x30 padding; scales on large screens */
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px;
  background:#FFFFFF;color:#0A1F18;border:1px solid #E6EEEA;border-radius:0;
  box-shadow:0 8px 22px -14px rgba(10,60,45,.22);
}
.wwe-bar__id{display:flex;align-items:center;gap:12px;min-width:0}
.wwe-bar__dot{width:7px;height:7px;border-radius:50%;background:var(--wwe-primary);flex:none}
.wwe-bar__title{font-family:var(--wwe-font-display);font-size:1.0625rem;font-weight:600;letter-spacing:-.018em;white-space:nowrap}
.wwe-bar__cta{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-size:0.8125rem;font-weight:600;letter-spacing:0;
  padding:9px 15px;border-radius:var(--r3,8px);text-decoration:none;
  background:#169C76;color:#fff;border:1px solid #169C76;/* lively middle brand green (per request) */
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,transform .2s ease;
}
.wwe-bar__cta:hover{background:#0E7256;border-color:#0E7256;box-shadow:0 6px 14px -4px rgba(22,156,118,.45);transform:translateY(-1px)}
.wwe-bar__cta:active{transform:translateY(0)}
.wwe-bar__cta-arrow{font-family:var(--font-body);font-size:0.8125rem;transition:transform .25s ease}
.wwe-bar__cta:hover .wwe-bar__cta-arrow{transform:translateX(3px)}

.wwe-track{position:relative;z-index:10;max-width:clamp(1120px, 73vw, 1860px);margin:0 auto;padding:0 30px}
.wwe-tail{height:28vh}/* shorter - was 46vh, left a large dead band of empty bg after the last card before blog */

.wwe-card{
  position:sticky;z-index:11;border-radius:0;overflow:hidden;min-height:360px;
  transform-origin:50% 0;will-change:transform;background:#FFFFFF;border:1px solid #E6F0EB;
  box-shadow:0 1px 2px rgba(10,31,24,.05), 0 24px 50px -32px rgba(10,60,45,.3);
}
.wwe-card[data-i="0"]{top:var(--wwe-card0-top);z-index:11}
.wwe-card[data-i="1"]{top:var(--wwe-card1-top);z-index:12}
.wwe-card[data-i="2"]{top:var(--wwe-card2-top);z-index:13}
/* mobile: reduce the gap above the section (card stacking handled in the mobile block below) */
@media(max-width:820px){ .wwe-section{padding-top:8px} }
.wwe-card__dim{position:absolute;inset:0;z-index:6;pointer-events:none;background:var(--dim-ov,rgba(10,31,24,.05));opacity:0;transition:opacity .12s linear}
.wwe-card__peek{position:relative;z-index:4;height:62px;display:flex;align-items:center;gap:13px;padding:0 32px;background:var(--peek-bg,#fff);border-bottom:1px solid var(--peek-line,#EEF5F1)}
.wwe-card__tick{width:2px;height:20px;background:var(--lit,var(--wwe-primary));flex:none}
.wwe-card__num{font-family:var(--wwe-font-mono);font-size:0.8125rem;font-weight:600;background:var(--num,linear-gradient(120deg,#0E7256,#2FD6A0));-webkit-background-clip:text;background-clip:text;color:transparent}
.wwe-card__kicker{font-family:var(--wwe-font-mono);font-size:0.6562rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--kicker,#0E7256)}
.wwe-card__body{position:relative;z-index:2;padding:45px 46px 57px}
.wwe-card__body--split{display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:start}
/* all three card headers share ONE size for consistency */
.wwe-h{margin:0;font-family:var(--wwe-font-display);font-weight:600;font-size:clamp(1.25rem,2.2vw,1.625rem);line-height:1.2;letter-spacing:-.02em;color:var(--title,#0A1F18)}
.wwe-grad{background:linear-gradient(120deg,var(--gt1,#0E7256),var(--gt2,#2FD6A0));-webkit-background-clip:text;background-clip:text;color:transparent}
.wwe-lead{margin:14px 0 0;font-size:0.8438rem;line-height:1.62;color:var(--lead,#37514A);max-width:48ch}
.wwe-quote{margin:0;font-family:var(--wwe-font-display);font-size:clamp(1.25rem,2.3vw,1.625rem);font-weight:500;line-height:1.26;letter-spacing:-.02em;color:var(--title,#0A1F18)}
.wwe-note{margin:4px 0 0;font-size:0.8438rem;line-height:1.62;color:var(--lead,#37514A)}
.wwe-list{list-style:none;margin:24px 0 0;padding:0}
.wwe-list li{padding:13px 0 13px 32px;border-top:1px solid var(--hair,#ECF3EF);position:relative}
.wwe-list li:last-child{border-bottom:1px solid var(--hair,#ECF3EF)}
.wwe-list__icon{position:absolute;left:0;top:13px;flex:none;width:20px;height:20px}
.wwe-list p{margin:0;font-size:0.8125rem;line-height:1.5;color:var(--lead,#37514A)}
.wwe-list b{color:var(--title,#0A1F18);font-weight:600}
.wwe-trips{display:grid;grid-template-columns:repeat(3,1fr);margin-top:34px;border-top:1px solid var(--hair,#ECF3EF)}
.wwe-trip{padding:22px 26px 2px 0}
.wwe-trip + .wwe-trip{border-left:1px solid var(--hair,#ECF3EF);padding-left:26px;padding-right:26px}
.wwe-trip:last-child{padding-right:0}
.wwe-trip svg{display:block;margin-bottom:12px}
.wwe-trip h4{margin:12px 0 0;font-family:var(--wwe-font-display);font-size:0.875rem;font-weight:600;letter-spacing:-.01em;color:var(--title,#0A1F18)}
.wwe-trip p{margin:0;font-size:0.8125rem;line-height:1.55;color:var(--lead,#37514A);font-weight:500}
.wwe-illu{will-change:transform;max-width:344px;width:100%;margin:0 auto}
.wwe-illu svg{width:100%;height:auto;display:block}
.wwe-illu__cap{margin:12px 0 0;font-family:var(--wwe-font-mono);font-size:0.6562rem;line-height:1.5;letter-spacing:.01em;color:var(--ink3,#6A827A);text-align:center}
/* Tonal Ascent per-card palette */
.wwe-card--light{--gt1:#0E7256;--gt2:#2FD6A0;--title:#0A1F18;--lead:#46615A;--ink3:#7A938B;--kicker:#0E7256;--lit:#169C76;--hair:#ECF3EF;--num:linear-gradient(120deg,#0E7256,#2FD6A0);--illu-lit:#169C76;--illu-line:#AEC9BE;--illu-dim:#CFE2DA;--illu-pane:rgba(22,156,118,.08);--chip-fg:#46615A;--peek-bg:#FFFFFF;--peek-line:#EEF5F1;--dim-ov:rgba(10,31,24,.05)}
.wwe-card--medium{background:linear-gradient(160deg,#1AA37D,#0F7E60);border:1px solid rgba(255,255,255,.22);box-shadow:0 28px 60px -28px rgba(8,70,52,.5);--gt1:#C8FBE6;--gt2:#8FEFCB;--title:#FFFFFF;--lead:rgba(238,255,249,.9);--ink3:rgba(214,244,233,.8);--kicker:#DCFCEE;--lit:#EAFFF7;--hair:rgba(255,255,255,.2);--num:linear-gradient(120deg,#C8FBE6,#8FEFCB);--illu-lit:#EAFFF7;--illu-line:rgba(255,255,255,.5);--illu-dim:rgba(255,255,255,.26);--illu-pane:rgba(255,255,255,.14);--chip-fg:#EAFFF7;--peek-bg:#0F8060;--peek-line:rgba(255,255,255,.16);--dim-ov:rgba(0,0,0,.18)}
.wwe-card--dark{background:linear-gradient(160deg,#0C3A2B,#082018);border:1px solid rgba(120,232,190,.16);box-shadow:0 30px 64px -30px rgba(0,0,0,.6);--gt1:#7DEFCB;--gt2:#A7F3D0;--title:#F2FFFA;--lead:#A9CEBF;--ink3:#7FA597;--kicker:#6FE7C6;--lit:#5FE3C7;--hair:rgba(255,255,255,.10);--num:linear-gradient(120deg,#7DEFCB,#A7F3D0);--illu-lit:#5FE3C7;--illu-line:rgba(180,240,215,.40);--illu-dim:rgba(180,240,215,.16);--illu-pane:rgba(95,227,199,.10);--chip-fg:#BDE6D7;--peek-bg:#0A2B20;--peek-line:rgba(255,255,255,.08);--dim-ov:rgba(0,0,0,.22)}
.wwe-flow{stroke-dasharray:4 7;animation:wwe-dash 1.2s linear infinite}
.wwe-twk{animation:wwe-twk 2.4s ease-in-out infinite}
@keyframes wwe-dash{to{stroke-dashoffset:-22}}
@keyframes wwe-twk{0%,100%{opacity:.4}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .wwe-flow,.wwe-twk{animation:none !important}
  .wwe-card{transform:none !important}
  .wwe-card__dim{opacity:0 !important}
}
@media (max-width:820px){
  .wwe-card__body--split{grid-template-columns:1fr;gap:24px}
  .wwe-trips{grid-template-columns:1fr}
  .wwe-trip,.wwe-trip + .wwe-trip{padding:16px 0 2px;border-left:0;border-top:1px solid var(--hair,#ECF3EF)}
  .wwe-trip:first-child{border-top:0}
  /* Mobile: sticky STACKING with staggered header peeks (01/02/03), then the
     whole deck scrolls away together (all cards share .wwe-track, so they
     un-stick simultaneously when the track ends). The short tail below keeps
     the frozen/white-space phase minimal (Akash #4/#5). */
  .wwe-section{--wwe-stack-step:62px}
  .wwe-card{position:sticky!important;transform:none!important;min-height:auto;display:block;margin-bottom:0}
  .wwe-card[data-i="0"]{top:var(--wwe-card0-top);z-index:11}
  .wwe-card[data-i="1"]{top:var(--wwe-card1-top);z-index:12}
  .wwe-card[data-i="2"]{top:var(--wwe-card2-top);z-index:13}
  .wwe-tail{height:3vh}
  .wwe-section{padding-bottom:20px}
  .wwe-card__dim{display:none}
  .wwe-illu{display:none}
  .wwe-card__body{padding:26px 22px 30px}
  .wwe-h{font-size:1.25rem;line-height:1.2}
  .wwe-lead{font-size:0.8125rem;line-height:1.55;margin-top:10px;max-width:none}
  .wwe-quote{font-size:1.1875rem}
  .wwe-list{margin-top:14px}
  .wwe-list li{padding:9px 0 9px 28px}
  .wwe-list__icon{top:9px;width:18px;height:18px}
  .wwe-trips{margin-top:18px}
}

/* ============================================================================
   SOLUTION PAGES - Deployment-steps hover upgrade + Testimonial carousel
   (from "demo, footer, others" package). Steps = pure CSS on shared .hiw-step.
   Testimonials = progressive enhancement of existing .testimonial cards.
   ============================================================================ */
/* ---- Deployment steps: accent-bar wipe + number-fill + chip tint on hover ---- */
.hiw-step{position:relative}
.hiw-step::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.4,0,.2,1)}
/* scroll-spy active state on solution pages = the SAME subtle highlight as :hover
   (top bar fills, badge fills green, pills tint) - no size/shape change on the number badge */
.hiw-step:hover::before,.hiw-step.hiw-active::before{transform:scaleX(1)}
.hiw-step:hover .hiw-badge,.hiw-step.hiw-active .hiw-badge{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 8px 20px -8px rgba(22,156,118,.6)}
.hiw-step:hover .hiw-pill,.hiw-step.hiw-active .hiw-pill{background:var(--green-50);border-color:var(--green-200);color:var(--primary-d)}
.hiw-badge{transition:background .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease}
.hiw-pill{transition:background .28s ease,border-color .28s ease,color .28s ease}
@media(prefers-reduced-motion:reduce){.hiw-step::before{transition:none}}

/* ---- Testimonial spotlight carousel (built by js/testimonials.js) ---- */
.tcar{position:relative;max-width:900px;margin:24px auto 0;text-align:center}
/* Fixed-size bordered card: absolute slides fill the stack, so every testimonial
   box is identical regardless of quote/person length (no resize between slides). */
.tcar-stack{position:relative;min-height:300px}
.tcar-slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:32px 44px;border:1px solid var(--line);border-radius:var(--r2);background:var(--bg);box-shadow:0 1px 2px rgba(10,31,24,.04);opacity:0;transition:opacity .6s ease;pointer-events:none}
.tcar-slide.is-on{opacity:1;pointer-events:auto}
.tcar-qmark{color:var(--green-200);flex:none;width:30px;height:30px}
.tcar-quote{margin:12px 0 0;font-family:var(--font-display);font-weight:500;font-size:clamp(1.0625rem,1.9vw,1.4375rem);line-height:1.4;letter-spacing:-.012em;color:var(--ink);text-wrap:balance;max-width:42ch;font-style:normal}
.tcar-meta{margin-top:22px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;font-size:0.875rem}
.tcar-meta .tcar-dot8{width:8px;height:8px;border-radius:50%;background:var(--primary)}
.tcar-meta b{font-weight:600;color:var(--ink)}
.tcar-meta .sep{color:var(--line-2)}
.tcar-meta .role{color:var(--ink-3)}
.tcar-ctrl{margin-top:24px;display:flex;align-items:center;justify-content:center;gap:18px}
.tcar-arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;transition:border-color .2s ease,color .2s ease}
.tcar-arrow:hover{border-color:var(--primary);color:var(--primary)}
.tcar-dots{display:flex;align-items:center;gap:8px}
.tcar-dotbtn{height:8px;width:8px;border-radius:50%;border:none;background:var(--line-2);cursor:pointer;padding:6px 8px;transition:width .3s ease,background .3s ease}
.tcar-dotbtn.on{width:24px;background:var(--primary)}
.tcar-prog{margin:16px auto 0;max-width:220px;height:3px;background:var(--line);border-radius:0;overflow:hidden}
.tcar-prog-fill{width:0;height:100%;background:var(--primary)}
@media(prefers-reduced-motion:reduce){.tcar-slide{transition:none}}
@media(max-width:560px){.tcar-quote{font-size:1.0625rem}.tcar-stack{min-height:380px}.tcar-slide{padding:26px 22px}}

/* ============================================================================
   L7 DEMO SECTION - "Stand-up + grow" scroll reveal
   ============================================================================ */
.demo-l7 {
  padding: 64px 0 88px;
  background: #fff;
}

.demo-l7 > div {
  max-width: clamp(1100px, 73vw, 1800px);
  margin: 0 auto;
  padding: 0 28px;
}

.demo-l7-header {
  text-align: center;
}

.demo-l7-eyebrow {
  font-family: var(--font-mono, 'Geist Mono', monospace);
  font-size: 0.75rem;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--primary);
  margin: 0;
}

.demo-l7-title {
  margin: 14px 0 0;
  font-family: var(--font-display, 'Lato', system-ui, sans-serif);
  font-size: clamp(1.625rem, 3vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--ink);
}

.demo-l7-desc {
  margin: 14px auto 0;
  max-width: 60ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.demo-l7-frame {
  position: relative;
  margin-top: 34px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--dark);
  border: 1px solid var(--border);
  box-shadow: 0 50px 110px -50px rgba(15, 23, 42, 0.5);
  transform-origin: center bottom;
  backface-visibility: hidden;
  will-change: transform;
}

/* Default fully visible & upright so the demo is NEVER hidden if the reveal JS
   doesn't run (reduced-motion, load order, etc.). JS arms the dim/tilt start
   only once it's active by adding .is-armed. */
.demo-l7-frame[data-tilt] {
  opacity: 1;
}
.demo-l7-frame[data-tilt].is-armed {
  opacity: 0.55;
}

.demo-l7-frame-inner {
  position: relative;
  aspect-ratio: 1600 / 1064; /* matches the optimized 1600x1064 demo recordings exactly so cover() never crops the video */
}

.demo-l7-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.demo-l7-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.04),
    rgba(15, 23, 42, 0.36)
  );
  transition: opacity 0.3s ease;
  pointer-events: all;
}

.demo-l7-overlay.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.demo-l7-playbtn {
  border: none;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 24px 54px -18px rgba(15, 23, 42, 0.6);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
}

.demo-l7-playbtn:hover {
  transform: scale(1.06);
}

.demo-l7-playbtn svg {
  width: 30px;
  height: 30px;
  fill: var(--primary);
  margin-left: 5px;
}
/* Replay state: stroked circular-arrow icon (no optical offset, stroke not fill) */
.demo-l7-playbtn.is-replay svg {
  margin-left: 0;
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--primary);
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .demo-l7-frame[data-tilt] {
    transform: none !important;
    opacity: 1 !important;
  }
  .demo-l7-overlay {
    transition: none;
  }
}

@media (max-width: 820px) {
  .demo-l7-title {
    font-size: clamp(1.25rem, 2.5vw, 2rem);
  }
  .demo-l7-desc {
    font-size: 0.875rem;
  }
}

/* Blog ("We send insights") header - centered eyebrow/title/subtitle (cards stay left) */
#blog .eyebrow,#blog .sec-title,#blog .sec-sub{text-align:center}
#blog .sec-sub{margin-left:auto;margin-right:auto}

/* ============================================================
   Large-screen scale tier (≥1600px) - proportional upscale for
   wide / 4K monitors ONLY. Below 1600px the site renders exactly
   as before (laptops, tablets, phones untouched). Pairs with the
   fluid --container (clamp 1160→1860px) defined in :root.
   ============================================================ */
/* Large screens: text scaling is now handled globally by the fluid root font-size
   (rem) above - no per-element font bumps needed here. This tier keeps only the
   spacing/layout that should breathe on big screens. */
@media (min-width:1600px){
  section.band{padding:clamp(84px, 5.4vw, 132px) 0}
  .hero{padding:clamp(150px, 9.5vw, 196px) 0 clamp(90px, 5.8vw, 120px)}
  .hero .hero-copy{max-width:clamp(700px, 47vw, 900px)}
  .faq-head{max-width:clamp(720px, 50vw, 940px)}
}


/* ==== Knowledge Centre (Discover/blog) - appended 2026-07-03, prefixes .kc-/.art-/.feat-, tokens --kc-* ==== */
/* ============================================================
   LattIQ Knowledge Centre / Discover - additions for styles/theme.css
   Class prefixes: .kc- (hub + shared) · .art- (article pages) · .feat- (homepage #blog widget)
   Tokens are namespaced --kc-* so they can't collide; if the site
   already defines equivalents, point these at them and delete dupes.
   Fonts: Geist / Geist Mono (already loaded by the site per design contract).
   ============================================================ */
:root{
  --kc-primary:#169C76; --kc-primary-d:#0E7256; --kc-accent:#2FD6A0;
  --kc-ink:#0A1F18; --kc-ink-2:#37514A; --kc-ink-3:#6A827A;
  --kc-line:#DDEAE4; --kc-line-2:#C9DED5;
  --kc-bg-2:#F5FAF7; --kc-bg-3:#EAF4EF;
  --kc-green-950:#04241B; --kc-green-800:#0A5440; --kc-green-200:#A7F3D0; --kc-green-100:#D7F5E8; --kc-green-50:#EEFBF5;
  --kc-r2:0; --kc-r-card:0;
  --kc-glow:0 10px 28px -10px rgba(22,156,118,.32);
  --kc-font:var(--font-body,'Geist'),ui-sans-serif,system-ui,sans-serif;
  --kc-mono:'Geist Mono',ui-monospace,SFMono-Regular,monospace;
}

/* ---------- shared ---------- */
.kc-wrap{max-width:var(--container,1160px);margin:0 auto;padding-left:1.75rem;padding-right:1.75rem}
.kc-eyebrow{font:500 .72rem var(--kc-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--kc-primary-d)}
.kc-pill{display:inline-block;font:600 .62rem var(--kc-mono);letter-spacing:.06em;text-transform:uppercase;background:var(--kc-green-100);color:var(--kc-green-800);padding:.25rem .56rem;border-radius:0;white-space:nowrap}
.kc-avatar{width:24px;height:24px;border-radius:50%;background:var(--kc-green-100);color:var(--kc-green-800);display:grid;place-items:center;font:600 .58rem var(--kc-mono);flex:none}
.kc-btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--kc-primary-d);color:#fff;font:600 .88rem var(--kc-font);padding:0.625rem 1rem;border-radius:var(--r3,8px);text-decoration:none;border:0;cursor:pointer}
.kc-btn:hover{background:var(--kc-green-800)}
.kc-btn--ghost{background:#fff;color:var(--kc-primary-d);border:1px solid var(--kc-line)}
.kc-btn--ghost:hover{background:var(--kc-green-50)}
.kc-link{color:var(--kc-primary-d);font-weight:600;text-decoration:none}
.kc-link:hover{text-decoration:underline}
:where(.kc-band,.art-layout,.feat-band) a:focus-visible,
.kc-chip:focus-visible,.kc-btn:focus-visible,.kc-search:focus-visible{outline:2px solid var(--kc-primary);outline-offset:2px;border-radius:var(--kc-r2)}

/* ---------- hub: hero ---------- */
.kc-hero{background:linear-gradient(180deg,var(--kc-bg-2),#fff);padding:4rem 0 3rem}
.kc-hero h1{margin:.875rem 0 .75rem;font:600 3.2rem/1.1 var(--kc-font);letter-spacing:-.03em;color:var(--kc-ink);max-width:70rem;text-wrap:balance}
.kc-hero > .kc-wrap > p,.kc-hero p{text-wrap:balance}
.kc-hero p{margin:0;font:400 1.05rem/1.6 var(--kc-font);color:var(--kc-ink-2);max-width:62rem}

/* ---------- hub: featured spread ---------- */
.kc-feat{padding:3rem 0;border-top:1px solid var(--kc-line)}
.kc-feat-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:2.5rem;align-items:stretch}
.kc-feat-cover{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--kc-line);border-radius:var(--kc-r-card);display:block}
.kc-feat-info{display:flex;flex-direction:column;justify-content:center;gap:1rem}
.kc-feat-kicker{display:flex;align-items:center;gap:.625rem}
.kc-feat-kicker .kc-meta{font:500 .7rem var(--kc-mono);letter-spacing:.1em;color:var(--kc-ink-3)}
.kc-feat-title{margin:0;font:600 2.1rem/1.15 var(--kc-font);letter-spacing:-.025em;color:var(--kc-ink)}
.kc-feat-title a{color:inherit;text-decoration:none}
.kc-feat-dek{margin:0;font:400 1rem/1.65 var(--kc-font);color:var(--kc-ink-2)}
.kc-byline{display:flex;align-items:center;gap:.625rem;font:600 .88rem var(--kc-font);color:var(--kc-ink)}
.kc-byline .kc-meta{font:500 .72rem var(--kc-mono);color:var(--kc-ink-3);font-weight:500}
.kc-feat-more{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.75rem}
.kc-feat-mini{display:flex;gap:.875rem;align-items:center;border:1px solid var(--kc-line);border-radius:var(--kc-r-card);padding:.875rem 1rem;background:#fff;text-decoration:none;color:inherit;transition:box-shadow .2s ease,border-color .2s ease}
.kc-feat-mini:hover{box-shadow:var(--kc-glow);border-color:var(--kc-accent)}
.kc-feat-mini img{width:56px;height:56px;flex:none;border-radius:0;border:1px solid var(--kc-line);object-fit:cover}
.kc-feat-mini .t{display:flex;flex-direction:column;gap:.25rem}
.kc-feat-mini .k{font:600 .66rem var(--kc-mono);letter-spacing:.08em;color:var(--kc-primary-d);text-transform:uppercase}
.kc-feat-mini .h{font:600 .95rem/1.3 var(--kc-font);color:var(--kc-ink)}
.kc-feat-mini .d{font:500 .7rem var(--kc-mono);color:var(--kc-ink-3)}

/* ---------- hub: filter bar ---------- */
.kc-filters{border-top:1px solid var(--kc-line);background:#fff;padding:1.25rem 0}
.kc-chiprow{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.kc-chip{font:500 .78rem var(--kc-font);color:var(--kc-ink-2);border:1px solid var(--kc-line);border-radius:0;padding:.5rem 1rem;background:#fff;cursor:pointer;min-height:44px;display:flex;align-items:center}
.kc-chip:hover{border-color:var(--kc-primary);color:var(--kc-primary-d)}
.kc-chip[aria-pressed="true"]{background:var(--kc-primary);border-color:var(--kc-primary);color:#fff;font-weight:600}
.kc-toolrow{display:flex;align-items:center;gap:.75rem;margin-top:.875rem}
.kc-toggle{display:flex;align-items:center;gap:.375rem;background:var(--kc-bg-2);border:1px solid var(--kc-line);border-radius:0;padding:2px}
.kc-toggle button{font:500 .72rem var(--kc-font);border:0;border-radius:0;padding:.44rem .875rem;background:transparent;color:var(--kc-ink-3);cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:center}
.kc-toggle button[aria-pressed="true"]{background:var(--kc-bg-3);color:var(--kc-ink);font-weight:600}
.kc-search{flex:1;max-width:21rem;border:1px solid var(--kc-line);border-radius:0;padding:.56rem 1rem;font:400 .85rem var(--kc-font);color:var(--kc-ink);background:#fff}
.kc-search::placeholder{color:var(--kc-ink-3)}
.kc-count{margin-left:auto;font:500 .72rem var(--kc-mono);letter-spacing:.06em;color:var(--kc-ink-3)}

/* ---------- hub: grid + card ---------- */
.kc-band{background:var(--kc-bg-2);border-top:1px solid var(--kc-line);padding:2.25rem 0 3.5rem}
.kc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(18.75rem,1fr));gap:1.5rem}
.kc-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--kc-line);border-radius:var(--kc-r-card);overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.kc-card:hover{transform:translateY(-3px);box-shadow:var(--kc-glow);border-color:var(--kc-accent)}
.kc-card-cover{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--kc-line);display:block}
.kc-card-body{padding:1rem 1.125rem 1.125rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.kc-card-title{margin:0;font:600 1.08rem/1.3 var(--kc-font);letter-spacing:-.01em;color:var(--kc-ink)}
.kc-card-byline{display:flex;align-items:center;gap:.5rem;margin-top:auto;font:600 .8rem var(--kc-font);color:var(--kc-ink-2)}
.kc-empty{text-align:center;padding:4rem 0;color:var(--kc-ink-3);font:400 .95rem var(--kc-font)}

/* ---------- hub: series band ---------- */
.kc-series{background:var(--kc-green-50);border-top:1px solid var(--kc-line);padding:3.5rem 0}
.kc-series-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin:.625rem 0 1.5rem}
.kc-series-head h2{margin:0;font:600 1.9rem/1.2 var(--kc-font);letter-spacing:-.02em;color:var(--kc-ink)}
.kc-series-head p{margin:0;font:400 .9rem var(--kc-font);color:var(--kc-ink-2)}
.kc-series-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.kc-series-card{display:flex;flex-direction:column;gap:.5rem;background:#fff;border:1px solid var(--kc-line);border-radius:var(--kc-r-card);padding:1.125rem;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.kc-series-card:hover{transform:translateY(-3px);box-shadow:var(--kc-glow);border-color:var(--kc-accent)}
.kc-series-card .n{font:600 1.4rem var(--kc-mono);color:var(--kc-primary)}
.kc-series-card .h{font:600 .95rem/1.35 var(--kc-font);color:var(--kc-ink)}
.kc-series-card .d{font:500 .66rem var(--kc-mono);color:var(--kc-ink-3)}

/* ---------- hub: newsletter ---------- */
.kc-news{border-top:1px solid var(--kc-line);background:#fff;padding:3rem 0}
.kc-news-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.kc-news h2{margin:.5rem 0 .25rem;font:600 1.35rem var(--kc-font);letter-spacing:-.015em;color:var(--kc-ink)}
.kc-news p{margin:0;font:400 .88rem var(--kc-font);color:var(--kc-ink-2)}
.kc-news-form{display:flex;gap:.625rem}
.kc-news-form input{flex:1;border:1px solid var(--kc-line);border-radius:var(--kc-r2);padding:.75rem 1rem;font:400 .9rem var(--kc-font)}

/* ---------- article pages ---------- */
.art-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none}
.art-progress span{display:block;height:3px;width:0;background:var(--kc-primary);transition:width .1s linear}
.art-head{background:linear-gradient(180deg,var(--kc-bg-2),#fff);padding-top:2.75rem}
.art-col{max-width:47.5rem;margin:0 auto}
.art-crumb{display:flex;align-items:center;gap:.5rem;font:500 .72rem var(--kc-mono);letter-spacing:.06em;color:var(--kc-ink-3);text-transform:uppercase}
.art-crumb a{color:var(--kc-primary-d);text-decoration:none}
.art-head h1{margin:1rem 0 .875rem;font:600 2.9rem/1.15 var(--kc-font);letter-spacing:-.025em;color:var(--kc-ink)}
.art-dek{margin:0;font:400 1.15rem/1.6 var(--kc-font);color:var(--kc-ink-2)}
.art-metabar{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem;padding:1rem 0;border-top:1px solid var(--kc-line);border-bottom:1px solid var(--kc-line)}
.art-metabar .kc-avatar{width:36px;height:36px;font-size:.75rem}
.art-meta-name{font:600 .9rem var(--kc-font);color:var(--kc-ink)}
.art-meta-date{font:500 .7rem var(--kc-mono);letter-spacing:.04em;color:var(--kc-ink-3)}
.art-actions{margin-left:auto;display:flex;gap:.5rem}
.art-actions button{display:inline-flex;align-items:center;gap:.375rem;border:1px solid var(--kc-line);background:#fff;border-radius:0;padding:.5rem .875rem;font:500 .75rem var(--kc-font);color:var(--kc-ink-2);cursor:pointer}
.art-actions button:hover{border-color:var(--kc-primary);color:var(--kc-primary-d)}
.art-herowrap{max-width:61.25rem;margin:2.25rem auto 0;padding:0 1.75rem}
.art-hero{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border:1px solid var(--kc-line);border-bottom:none;border-radius:var(--kc-r-card) var(--kc-r-card) 0 0;display:block}
.art-layout{display:grid;grid-template-columns:1fr 15rem;gap:4rem;align-items:start;border-top:1px solid var(--kc-line);padding-top:3rem;padding-bottom:4rem}
.art-body{max-width:47.5rem;width:100%;justify-self:end}
.art-body h2{margin:2.5rem 0 1rem;font:600 1.7rem/1.25 var(--kc-font);letter-spacing:-.02em;color:var(--kc-ink);scroll-margin-top:6rem}
.art-body h2:first-child{margin-top:0}
.art-body h3{margin:1.625rem 0 .625rem;font:600 1.15rem/1.3 var(--kc-font);color:var(--kc-ink)}
.art-body p{margin:0 0 1.125rem;font:400 1.0625rem/1.7 var(--kc-font);color:var(--kc-ink-2)}
.art-body strong{font-weight:600;color:var(--kc-ink)}
.art-body ul,.art-body ol{margin:0 0 1.25rem;padding:0;list-style:none;display:flex;flex-direction:column;gap:.625rem}
.art-body ul li{display:flex;gap:.75rem;font:400 1.0625rem/1.7 var(--kc-font);color:var(--kc-ink-2)}
.art-body ul li::before{content:"";width:8px;height:8px;background:var(--kc-primary);flex:none;margin-top:.69rem}
.art-body ol{counter-reset:art}
.art-body ol li{display:flex;gap:.875rem;font:400 1.0625rem/1.7 var(--kc-font);color:var(--kc-ink-2);counter-increment:art}
.art-body ol li::before{content:counter(art,decimal-leading-zero);font:600 .8rem var(--kc-mono);color:var(--kc-primary);margin-top:.31rem;min-width:1.125rem}
.art-body blockquote{margin:1.75rem 0;padding:.375rem 0 .375rem 1.5rem;border-left:3px solid var(--kc-primary)}
.art-body blockquote p{margin:0;font:600 1.3rem/1.45 var(--kc-font);letter-spacing:-.015em;color:var(--kc-ink)}
.art-body figure{margin:1.75rem 0}
.art-body figure img{width:100%;height:auto;border:1px solid var(--kc-line);border-radius:var(--kc-r-card);display:block}
.art-body figcaption{margin-top:.625rem;font:400 .82rem var(--kc-font);color:var(--kc-ink-3);text-align:center}
.art-callout{background:var(--kc-green-50);border-left:3px solid var(--kc-primary);border-radius:0 var(--kc-r2) var(--kc-r2) 0;padding:1rem 1.25rem;font:400 1rem/1.65 var(--kc-font);color:var(--kc-ink);margin:0 0 1.125rem}
.art-body table{width:100%;border-collapse:collapse;border:1px solid var(--kc-line);border-radius:var(--kc-r-card);overflow:hidden;margin:0 0 1.25rem;font:400 .92rem/1.6 var(--kc-font);color:var(--kc-ink-2)}
.art-body th{background:var(--kc-bg-2);font:600 .66rem var(--kc-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--kc-ink-3);text-align:left;padding:.75rem 1.125rem;border-bottom:1px solid var(--kc-line)}
.art-body td{padding:.8rem 1.125rem;border-bottom:1px solid #F3F4F6}
.art-video{width:100%;aspect-ratio:16/9;border-radius:12px;background:var(--kc-green-950);display:block}
.art-pdf{border:1px solid var(--kc-line);border-radius:var(--kc-r-card);padding:1rem 1.125rem;display:flex;align-items:center;gap:1rem;background:var(--kc-bg-2);margin:1.75rem 0}
.art-pdf .icon{width:44px;height:56px;flex:none;border:1px solid var(--kc-line);border-radius:var(--kc-r2);background:#fff;display:grid;place-items:center;font:600 .6rem var(--kc-mono);color:var(--kc-primary-d)}
.art-pdf .t{display:flex;flex-direction:column;gap:.19rem;flex:1}
.art-pdf .h{font:600 .92rem var(--kc-font);color:var(--kc-ink)}
.art-pdf .d{font:500 .68rem var(--kc-mono);color:var(--kc-ink-3)}
.art-code{margin:1.75rem 0;background:var(--kc-green-950);color:var(--kc-green-100);border-radius:var(--kc-r-card);padding:1.125rem 1.25rem;font:400 .82rem/1.6 var(--kc-mono);overflow:auto}
.art-tags{margin-top:3.25rem;padding-top:1.5rem;border-top:1px solid var(--kc-line);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.art-tags .label{font:600 .64rem var(--kc-mono);letter-spacing:.12em;color:var(--kc-ink-3)}
.art-tag{font:500 .74rem var(--kc-font);border:1px solid var(--kc-line);border-radius:0;padding:.31rem .75rem;color:var(--kc-ink-2);text-decoration:none}
.art-tag:hover{border-color:var(--kc-primary);color:var(--kc-primary-d)}
.art-src{margin-left:auto;font:500 .72rem var(--kc-mono);color:var(--kc-ink-3);text-decoration:none}
.art-bio{margin-top:1.5rem;border:1px solid var(--kc-line);border-radius:var(--kc-r-card);padding:1.25rem 1.375rem;display:flex;gap:1rem;align-items:center;background:var(--kc-bg-2)}
.art-bio .kc-avatar{width:44px;height:44px;font-size:.85rem}
.art-bio .n{font:600 .95rem var(--kc-font);color:var(--kc-ink)}
.art-bio .d{font:400 .82rem var(--kc-font);color:var(--kc-ink-2)}
.art-toc{position:sticky;top:6rem;display:flex;flex-direction:column;gap:2px}
.art-toc .label{font:600 .64rem var(--kc-mono);letter-spacing:.14em;color:var(--kc-ink-3);padding:0 0 .625rem .875rem;text-transform:uppercase}
.art-toc a{display:block;padding:.44rem .875rem;font:400 .82rem/1.35 var(--kc-font);text-decoration:none;color:var(--kc-ink-3);border-left:2px solid var(--kc-line);transition:color .2s ease,background .2s ease}
.art-toc a:hover{color:var(--kc-primary-d)}
.art-toc a.is-active{color:var(--kc-primary-d);font-weight:600;border-left-color:var(--kc-primary);background:var(--kc-green-50)}
.art-next{margin-top:1.125rem;padding:.875rem;border:1px solid var(--kc-line);border-radius:var(--kc-r-card);background:var(--kc-green-50);display:flex;flex-direction:column;gap:.375rem;text-decoration:none}
.art-next .k{font:600 .62rem var(--kc-mono);letter-spacing:.1em;color:var(--kc-primary-d)}
.art-next .h{font:600 .82rem/1.4 var(--kc-font);color:var(--kc-ink)}
.art-related{background:var(--kc-bg-2);border-top:1px solid var(--kc-line);padding:3rem 0}
.art-related-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.375rem}
.art-related-head h2{margin:0;font:600 1.5rem var(--kc-font);letter-spacing:-.02em;color:var(--kc-ink)}
.art-related .kc-grid{grid-template-columns:repeat(3,1fr)}

/* ---------- homepage #blog widget ---------- */
.feat-band{background:var(--kc-bg-2);padding:4.5rem 0;border-top:1px solid var(--kc-line)}
.feat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:1.75rem}
.feat-head h2{margin:.625rem 0 0;font:600 2rem/1.15 var(--kc-font);letter-spacing:-.02em;color:var(--kc-ink)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}

/* ---------- responsive ---------- */
@media (max-width:64rem){
  .art-layout{grid-template-columns:1fr}
  .art-toc{position:static;order:-1;border:1px solid var(--kc-line);border-radius:var(--kc-r-card);padding:1rem;background:#fff}
  .art-toc a{border-left:none;padding:.31rem 0}
  .kc-feat-grid,.kc-news-grid{grid-template-columns:1fr}
  .kc-series-grid{grid-template-columns:repeat(2,1fr)}
  .art-related .kc-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:48rem){
  .kc-hero h1{font-size:2.2rem}
  .art-head h1{font-size:2.1rem}
  .kc-feat-more,.feat-grid,.art-related .kc-grid{grid-template-columns:1fr}
  .kc-toolrow{flex-wrap:wrap}
  .kc-count{width:100%;margin-left:0}
  .feat-head{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .kc-card,.kc-series-card,.kc-feat-mini,.art-progress span{transition:none}
  .kc-card:hover,.kc-series-card:hover{transform:none}
}

/* ---- KC: embedded PDF viewer (scrollable inline deck; sized to the content column) ---- */
.art-pdfblock{margin:1.75rem 0}
.art-pdfblock .art-pdf{margin:0 0 .625rem}
.art-pdfview{position:relative;width:100%;aspect-ratio:4/3;border:1px solid var(--kc-line);border-radius:var(--kc-r-card);overflow:hidden;background:var(--kc-bg-2)}
.art-pdfview iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media(max-width:700px){.art-pdfview{aspect-ratio:3/4}}


/* ---- nudge product-sheet: report first-page on the right of nudges (TransUnion-style) ---- */
.nudge .nleft{position:relative;z-index:1;flex:1 1 460px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.nudge .nleft .ntxt{flex:none}
.nudge-sheet{position:relative;z-index:1;flex:none;width:212px;border-radius:10px;background:#fff;
  box-shadow:0 26px 54px -22px rgba(2,22,16,.5),0 8px 22px -10px rgba(2,22,16,.35);
  transition:transform .35s ease}
/* layered pages behind (report-stack effect) */
.nudge-sheet::before,.nudge-sheet::after{content:"";position:absolute;inset:0;border-radius:10px;z-index:-1;transition:transform .35s ease}
.nudge-sheet::before{background:#E9F2ED;transform:translate(-10px,10px)}
.nudge-sheet::after{background:#E4E9E7;box-shadow:inset 0 0 0 1px #D3DBD8;transform:translate(-20px,20px);z-index:-2}
.nudge:hover .nudge-sheet,.ctaband-sheet:hover .nudge-sheet{transform:translateY(-5px)}
.nudge-sheet svg{display:block;width:100%;height:auto;border-radius:10px;position:relative}
@media(max-width:900px){.nudge-sheet{display:none}}
@media(prefers-reduced-motion:reduce){.nudge-sheet,.nudge:hover .nudge-sheet,.ctaband-sheet:hover .nudge-sheet{transition:none;transform:none}}

/* ---- KC author avatars: photos + logomark ---- */
.kc-avatar{overflow:hidden;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--kc-green-100);flex-shrink:0}
.kc-avatar img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:50%;display:block}
.kc-avatar img.lqmark{object-fit:contain;padding:3px;background:#fff}

/* ---- UP NEXT pill spacing fix ---- */
.art-next .k{display:block}

/* ---- YouTube embeds ---- */
.art-youtube{width:100%;aspect-ratio:16/9;border-radius:var(--kc-r-card);border:1px solid var(--kc-line);display:block;margin:1.75rem 0}

/* nav-right refinements */
@media(max-width:620px){.nav .nav-right a[href*="login"]:not(.nav-getstarted){display:none}}
.nav.nav-dark .nav-right a:not(.nav-cta):hover,body.hero-green .nav:not(.floating) .nav-right a:not(.nav-cta):hover{color:#fff}

/* ====== Knowledge Centre default look (Akash-approved hybrid, 2026-07-09):
   T1 forest masthead + dark curved featured card + T4 pointed offset-shadow cards ====== */
.kc-hero{background:linear-gradient(168deg,#04241B 0%,#063A2B 55%,#0A5440 120%);padding-top:4.5rem;padding-bottom:4.5rem}
.kc-hero h1{color:#fff}
.kc-hero p{color:#BFE6D6}
.kc-hero .kc-eyebrow{color:#2FD6A0}
#kc-featured{background:linear-gradient(150deg,#04241B,#0A5440 130%);border-radius:0;padding:2.2rem;color:#BFE6D6;overflow:hidden}
#kc-featured .kc-feat-cover{border-radius:0}
#kc-featured .kc-feat-title a,#kc-featured h2 a{color:#fff}
#kc-featured p{color:#BFE6D6}
#kc-featured .kc-card-byline,#kc-featured .kc-card-byline *{color:#F2FFFA}
#kc-featured .kc-link{color:#2FD6A0}
#kc-featured .kc-pill{background:rgba(47,214,160,.2);color:#7FE3BD}
#kc-featured .kc-eyebrow{color:#7FE3BD}
.kc-feat-mini{border-radius:0}
.kc-filters{background:#F0F7F3;border-top:1px solid var(--kc-primary-d)}
.kc-grid .kc-card{border:1.5px solid #0A1F18;border-radius:0;box-shadow:6px 6px 0 #D7F5E8;transition:box-shadow .2s ease,transform .2s ease}
.kc-grid .kc-card:hover{box-shadow:10px 10px 0 #2FD6A0;transform:translate(-2px,-2px)}
.kc-grid .kc-card-title{font-weight:700}
.kc-grid .kc-pill{border-radius:0;background:#0A1F18;color:#7FE3BD}
@media(prefers-reduced-motion:reduce){.kc-grid .kc-card,.kc-grid .kc-card:hover{transition:none;transform:none}}


/* ===== Go-live Discover refinements (items 10-14, 2026-07-10) ===== */
.kc-card-pills{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.15rem}
#kc-featured .kc-feat-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
/* item 14: lighter outline + grey rest shadow -> green offset on hover */
.kc-grid .kc-card{border:1.5px solid #CBDED6;box-shadow:6px 6px 0 #E7ECEA}
.kc-grid .kc-card:hover{box-shadow:10px 10px 0 #2FD6A0;border-color:#9FC7B7}
/* homepage Knowledge-Centre widget (#feat-cards): same card language as Discover */
.feat-grid .kc-card{border:1.5px solid #CBDED6;border-radius:0;box-shadow:6px 6px 0 #E7ECEA;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.feat-grid .kc-card:hover{box-shadow:10px 10px 0 #2FD6A0;border-color:#9FC7B7;transform:translate(-2px,-2px)}
@media(prefers-reduced-motion:reduce){.feat-grid .kc-card,.feat-grid .kc-card:hover{transition:none;transform:none}}
/* item 13: featured minis match the list-card language */
.kc-feat-mini{border:1.5px solid #CBDED6;border-radius:0;box-shadow:6px 6px 0 #E7ECEA;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.kc-feat-mini:hover{box-shadow:10px 10px 0 #2FD6A0;border-color:#9FC7B7;transform:translate(-2px,-2px)}
/* item 12: featured byline readable on the dark featured card */
#kc-featured .kc-byline,#kc-featured .kc-byline *{color:#F2FFFA}
#kc-featured .kc-byline .kc-meta{color:#BFE6D6}
/* item 13: whole featured card clickable via stretched title link */
#kc-featured{position:relative}
#kc-featured .kc-feat-title a::after{content:"";position:absolute;inset:0;z-index:1}
#kc-featured .kc-link{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){.kc-feat-mini,.kc-feat-mini:hover{transition:none;transform:none}}

/* ===== Go-live: downloadable sheet CTA (item 2) ===== */
.dl-wrap{margin-top:16px}
.dl-sheet{display:inline-flex;align-items:center;gap:9px;font-size:0.9375rem;font-weight:600;color:var(--primary-d);text-decoration:none;padding:12px 20px;border:1.5px solid var(--line-2,#C9DED5);border-radius:10px;transition:border-color .2s ease,color .2s ease,background .2s ease;min-height:44px;box-sizing:border-box}
.dl-sheet:hover{border-color:var(--primary);background:var(--green-50,#EEFBF5)}
.dl-sheet:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dl-sheet svg{width:15px;height:15px;flex:none}

/* ===== Go-live mobile nav (items 26,27) ===== */
@media(max-width:820px){
  /* 26: nav stays flush to the top edge, full-width, even when scrolled (no floating pill / no gap) */
  .nav.floating{top:0;left:0;right:0;transform:none;width:100%;max-width:100%;border-radius:0;border-left:none;border-right:none;box-shadow:0 6px 20px -12px rgba(4,36,27,.22)}
  .nav.floating .in{height:64px}
  /* 27: on mobile the "Book a demo" text CTA is replaced by the .nav-getstarted
     button (sits immediately left of the burger, → login); hide the text CTA */
  .nav-cta{display:none!important}
}

/* ---- article image carousel (event photo posts) ---- */
.art-carousel{position:relative;width:100%;}
.acar-viewport{position:relative;overflow:hidden;border-radius:var(--r2,4px);background:var(--bg-3,#f2f4f3);border:1px solid var(--line,#e6e9e8);}
.acar-track{display:flex;transition:transform .35s ease;will-change:transform;}
.acar-slide{flex:0 0 100%;display:flex;align-items:center;justify-content:center;}
.acar-slide img{width:100%;max-height:min(72vh,560px);object-fit:contain;display:block;}
.acar-btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--line,#e6e9e8);background:rgba(255,255,255,.9);color:var(--ink,#0b1f19);font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,box-shadow .15s;z-index:2;}
.acar-btn:hover{background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.12);}
.acar-btn:focus-visible{outline:2px solid var(--primary,#169C76);outline-offset:2px;}
.acar-prev{left:14px;}
.acar-next{right:14px;}
.acar-count{position:absolute;right:14px;bottom:12px;background:rgba(11,31,25,.72);color:#fff;font-size:.75rem;padding:3px 9px;border-radius:999px;z-index:2;letter-spacing:.02em;}
.acar-cap{margin:14px 0 0;text-align:center;font-size:.9rem;color:var(--ink-2,#4a5a54);line-height:1.5;padding:0 12px;min-height:1.4em;}
.acar-dots{display:flex;gap:8px;justify-content:center;margin:14px 0 28px;}
.acar-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--line-2,#c8d0cd);cursor:pointer;transition:background .15s,transform .15s;}
.acar-dot.on{background:var(--primary,#169C76);transform:scale(1.25);}
.art-carousel[data-single] .acar-btn,.art-carousel[data-single] .acar-dots,.art-carousel[data-single] .acar-count{display:none;}
@media(max-width:640px){.acar-btn{width:36px;height:36px;font-size:20px;}.acar-slide img{max-height:60vh;}}