/* =============================================================
   CONIFY — DESIGN SYSTEM
   -------------------------------------------------------------
   One stylesheet for the whole site. Structure and rhythm follow
   apple.com: a thin translucent global nav, full-bleed product
   tiles on the homepage, and product pages built from big quiet
   type, product "renders", highlight galleries, feature cards
   that open into detail sheets, and a sticky local nav.

   Colour, type and voice are Conify's own: navy and white grounds,
   yellow as the one accent, Montserrat for headings, IBM Plex Sans
   for body. Each product gets a single identity colour, used only
   inside its render, its name and its icons.

   Change a token here and it updates everywhere.

   CONTENTS
   01 Tokens
   02 Reset & base
   03 Themes (light / grey / dark / navy)
   04 Typography
   05 Layout
   06 Buttons & links
   07 Global nav + flyouts + mobile menu
   08 Local nav (product pages)
   09 Homepage tiles
   10 Product hero
   11 Device / renders
   12 Chapter nav
   13 Highlights gallery
   14 Scrub text, statement, quote
   15 Feature cards (bento) & icon row
   16 Stats
   17 Card rail + modal sheets
   18 Segmented control & tab panels
   19 Checklist, steps, split
   20 Lineup (compare)
   21 Flow diagram
   22 Final CTA
   23 Forms
   24 Footer
   25 Motion
   26 Utilities
   ============================================================= */

/* 01 TOKENS ------------------------------------------------- */
:root{
  /* Brand */
  --navy:#212c56;
  --navy-2:#2e3b73;
  --yellow:#fcc00a;
  --yellow-2:#ffd43d;
  --orange:#f37837;

  /* Ink & grounds */
  --ink:#141a33;
  --ink-2:#565c7a;
  --ink-3:#858aa3;
  --grey:#f4f5f8;
  --grey-2:#e9ebf1;
  --line:#d9dce5;
  --night:#0b0f22;
  --night-2:#161b33;
  --night-3:#232a48;

  /* Product identity colours (renders, names, icons only) */
  --p-knime:#f2b100;
  --p-diligent:#e5473d;
  --p-acl:#f37837;
  --p-process:#3b7ddd;
  --p-evidant:#14a39a;
  --p-3rdrisk:#7a5af5;
  --p-policy:#3f9142;
  --p:var(--yellow);

  /* Type */
  --font-head:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --fs-hero:clamp(2.75rem,6.6vw,5.25rem);
  --fs-headline:clamp(2.1rem,4.6vw,3.6rem);
  --fs-sub:clamp(1.65rem,3vw,2.4rem);
  --fs-card:clamp(1.35rem,2vw,1.75rem);
  --fs-intro:clamp(1.15rem,1.7vw,1.4rem);
  --fs-body:1.0625rem;
  --fs-small:.875rem;
  --fs-micro:.75rem;

  /* Layout */
  --gn-h:48px;
  --ln-h:52px;
  --gutter:clamp(20px,4.5vw,44px);
  --wrap:1024px;
  --wrap-wide:1320px;
  --radius:28px;
  --radius-sm:18px;

  /* Motion — the curve apple.com uses for most transitions */
  --ease:cubic-bezier(.28,.11,.32,1);
  --ease-out:cubic-bezier(.16,.84,.28,1);
}

/* 02 RESET & BASE ------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--ln-h) + 12px)}
body{
  font-family:var(--font-body);font-size:var(--fs-body);line-height:1.47;
  color:var(--ink);background:#fff;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
h1,h2,h3,h4{font-weight:600;font-family:var(--font-head);letter-spacing:-.015em;line-height:1.1}
strong,b{font-weight:600}
:focus-visible{outline:2px solid var(--p,var(--yellow));outline-offset:3px;border-radius:6px}
.skip-link{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--navy);color:#fff;padding:10px 16px;border-radius:10px}
.skip-link:focus{top:12px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 03 THEMES -------------------------------------------------- */
.theme-light,.theme-grey,.theme-dark,.theme-navy{background:var(--bg);color:var(--fg)}
.theme-light{
  --bg:#fff;--fg:var(--ink);--fg-2:var(--ink-2);--fg-3:var(--ink-3);
  --card:var(--grey);--card-2:#fff;--line-c:var(--line);
  --link:var(--navy);--btn-bg:var(--navy);--btn-fg:#fff;--btn-bg-h:var(--navy-2);--ghost:var(--navy);
  --seg:var(--grey-2);--seg-thumb:#fff;--dot:#b9bdcc;--dot-track:#d6d9e2;
}
.theme-grey{
  --bg:var(--grey);--fg:var(--ink);--fg-2:var(--ink-2);--fg-3:var(--ink-3);
  --card:#fff;--card-2:var(--grey);--line-c:var(--line);
  --link:var(--navy);--btn-bg:var(--navy);--btn-fg:#fff;--btn-bg-h:var(--navy-2);--ghost:var(--navy);
  --seg:var(--grey-2);--seg-thumb:#fff;--dot:#b9bdcc;--dot-track:#d6d9e2;
}
.theme-dark,.theme-navy{
  --bg:var(--night);--fg:#f5f6fa;--fg-2:#a9aec6;--fg-3:#7c83a2;
  --card:var(--night-2);--card-2:var(--night-3);--line-c:rgba(255,255,255,.13);
  --link:var(--yellow);--btn-bg:var(--yellow);--btn-fg:var(--night);--btn-bg-h:var(--yellow-2);--ghost:var(--yellow);
  --seg:rgba(255,255,255,.1);--seg-thumb:rgba(255,255,255,.2);--dot:#5c6385;--dot-track:#3a4163;
}
.theme-navy{--bg:var(--navy);--card:rgba(255,255,255,.07);--card-2:rgba(255,255,255,.11);--fg-2:#b7bdd6}

/* Product pages set the identity colour once on <body>. */
.p-knime{--p:var(--p-knime)}
.p-diligent{--p:var(--p-diligent)}
.p-acl{--p:var(--p-acl)}
.p-process{--p:var(--p-process)}
.p-evidant{--p:var(--p-evidant)}
.p-3rdrisk{--p:var(--p-3rdrisk)}
.p-policy{--p:var(--p-policy)}

/* 04 TYPOGRAPHY --------------------------------------------- */
.t-hero{font-size:var(--fs-hero);line-height:1.04;letter-spacing:-.025em}
.t-headline{font-size:var(--fs-headline);line-height:1.07;letter-spacing:-.022em;text-wrap:balance}
.t-sub{font-size:var(--fs-sub);line-height:1.12;letter-spacing:-.018em}
.t-card{font-size:var(--fs-card);line-height:1.16;letter-spacing:-.012em}
.t-intro{font-size:var(--fs-intro);line-height:1.42;color:var(--fg-2,var(--ink-2));font-weight:400}
.t-intro strong{color:var(--fg,var(--ink));font-weight:600}
.t-eyebrow{display:block;font-family:var(--font-head);font-weight:600;font-size:clamp(1rem,1.5vw,1.3rem);letter-spacing:-.005em;color:var(--p);margin-bottom:.6rem}
.t-label{font-size:var(--fs-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3,var(--ink-3))}
.t-muted{color:var(--fg-2,var(--ink-2))}
.t-small{font-size:var(--fs-small)}
.grad-text{background:linear-gradient(100deg,var(--p) 10%,color-mix(in srgb,var(--p) 55%,#fff) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.theme-light .grad-text,.theme-grey .grad-text{background:linear-gradient(100deg,color-mix(in srgb,var(--p) 80%,#000) 0%,var(--p) 100%);-webkit-background-clip:text;background-clip:text}
.yellow-dot{color:var(--yellow)}
.prose p+p{margin-top:1em}
.prose a{color:var(--link);text-decoration:underline;text-underline-offset:3px}

/* 05 LAYOUT -------------------------------------------------- */
.wrap{max-width:calc(var(--wrap) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{max-width:calc(var(--wrap-wide) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.wrap-text{max-width:calc(760px + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(84px,11vw,160px);position:relative}
.section--tight{padding-block:clamp(56px,7vw,96px)}
.section.theme-light + .section.theme-light,.section.theme-grey + .section.theme-grey{padding-top:0}
.sechead{margin-bottom:clamp(40px,5vw,72px)}
.sechead--center{text-align:center;margin-inline:auto;max-width:880px}
.sechead .t-intro{margin-top:1.1rem;max-width:40em}
.sechead--center .t-intro{margin-inline:auto}
.center{text-align:center}
.mt-1{margin-top:.75rem}.mt-2{margin-top:1.25rem}.mt-3{margin-top:2rem}.mt-4{margin-top:3rem}.mt-5{margin-top:clamp(56px,7vw,96px)}

/* 06 BUTTONS & LINKS ---------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  min-height:44px;padding:0 22px;border-radius:980px;
  font-family:var(--font-body);font-size:1.0625rem;font-weight:500;line-height:1;letter-spacing:-.005em;white-space:nowrap;
  background:var(--btn-bg,var(--navy));color:var(--btn-fg,#fff);
  transition:background-color .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease);
}
.btn:hover{background:var(--btn-bg-h,var(--navy-2))}
.btn--ghost{background:transparent;color:var(--ghost,var(--navy));box-shadow:inset 0 0 0 1px var(--ghost,var(--navy))}
.btn--ghost:hover{background:var(--ghost,var(--navy));color:var(--bg,#fff)}
.btn--sm{min-height:30px;padding:0 13px;font-size:.8125rem}
.btn svg{width:.9em;height:.9em;stroke:currentColor;fill:none;stroke-width:2.4}
.btn-row{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.btn-row.center{justify-content:center}

.more{
  display:inline-flex;align-items:center;gap:.15em;color:var(--link,var(--navy));
  font-size:1.0625rem;font-weight:500;
}
.more::after{content:"";width:.5em;height:.5em;border-top:1.75px solid currentColor;border-right:1.75px solid currentColor;transform:rotate(45deg);margin-left:.3em;transition:transform .25s var(--ease)}
.more:hover{text-decoration:underline;text-underline-offset:3px}
.more:hover::after{transform:translateX(2px) rotate(45deg)}
.more--ext::after{transform:rotate(0);width:.55em;height:.55em;border:0;background:currentColor;clip-path:polygon(20% 0,100% 0,100% 80%,82% 80%,82% 31%,13% 100%,0 87%,69% 18%,20% 18%)}
.more--ext:hover::after{transform:translate(1px,-1px)}

.glyph{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* 07 GLOBAL NAV --------------------------------------------- */
.gn{position:sticky;top:0;z-index:100;height:var(--gn-h)}
.has-ln .gn{position:relative}
.gn__bar{
  position:relative;z-index:2;height:100%;
  display:flex;align-items:center;gap:8px;
  max-width:calc(1060px + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter);
}
.gn::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:rgba(250,250,252,.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  transition:background-color .3s var(--ease);
}
.gn.is-open::before,.gn.is-menu::before{background:#fafafc}
.gn__logo{display:flex;align-items:center;height:100%;padding-right:12px;margin-right:auto}
.gn__logo img{height:22px;width:auto}
.gn__list{display:flex;align-items:center;height:100%;gap:2px}
.gn__item{height:100%;display:flex;align-items:center;position:static}
.gn__link{
  display:flex;align-items:center;height:100%;padding:0 12px;
  font-size:.8125rem;font-weight:500;letter-spacing:.005em;color:rgba(20,26,51,.8);
  transition:color .2s var(--ease);
}
.gn__link:hover,.gn__item.is-active .gn__link{color:var(--ink)}
.gn__item[data-current] .gn__link{color:var(--ink);box-shadow:inset 0 -2px 0 var(--yellow)}
.gn__cta{margin-left:14px}
.gn__cta .btn{background:var(--navy);color:#fff}
.gn__cta .btn:hover{background:var(--navy-2)}

/* Flyouts: open on hover or keyboard focus, like the apple.com menus. */
.gn__flyout{
  position:absolute;left:0;right:0;top:0;z-index:1;
  padding-top:var(--gn-h);
  background:#fafafc;
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .45s var(--ease),visibility 0s linear .45s;
}
.gn__flyout.is-open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .45s var(--ease),visibility 0s}
.gn__flyout-inner{
  display:flex;gap:clamp(40px,6vw,88px);
  max-width:calc(1060px + 2 * var(--gutter));margin-inline:auto;
  padding:38px var(--gutter) 72px calc(var(--gutter) + 150px);
}
.gn__col{opacity:0;transform:translateY(-6px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.gn__flyout.is-open .gn__col{opacity:1;transform:none;transition-delay:.12s}
.gn__flyout.is-open .gn__col:nth-child(2){transition-delay:.17s}
.gn__flyout.is-open .gn__col:nth-child(3){transition-delay:.22s}
.gn__col-title{font-family:var(--font-body);font-size:.75rem;font-weight:500;color:var(--ink-3);letter-spacing:0;margin-bottom:14px}
.gn__col li+li{margin-top:9px}
.gn__col a{font-size:.8125rem;font-weight:500;color:rgba(20,26,51,.85)}
.gn__col a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.gn__col--big li+li{margin-top:6px}
.gn__col--big a{font-family:var(--font-head);font-size:1.5rem;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.gn__col--big a:hover{text-decoration:none;color:var(--navy-2)}
.gn__col--big a small{display:block;font-family:var(--font-body);font-size:.75rem;font-weight:400;color:var(--ink-3);letter-spacing:0;margin-top:1px}

.gn-scrim{
  position:fixed;inset:0;z-index:95;
  background:rgba(232,233,238,.4);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s linear .4s;
}
.gn-scrim.is-on{opacity:1;visibility:visible;transition:opacity .4s var(--ease),visibility 0s}

/* Burger + mobile menu */
.gn__burger{display:none;position:relative;width:44px;height:var(--gn-h);margin-right:-12px}
.gn__burger span{position:absolute;left:14px;width:17px;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .35s var(--ease)}
.gn__burger span:first-child{top:20px}
.gn__burger span:last-child{top:27px}
.gn.is-menu .gn__burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
.gn.is-menu .gn__burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.gn-mobile{
  position:fixed;left:0;right:0;top:var(--gn-h);bottom:0;z-index:99;
  background:#fafafc;overflow:hidden;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s;
}
.gn-mobile.is-open{opacity:1;visibility:visible;transition:opacity .3s var(--ease),visibility 0s}
.gn-mobile__panel{
  position:absolute;inset:0;overflow-y:auto;padding:18px 48px 48px;
  transition:transform .45s var(--ease),opacity .3s var(--ease);
}
.gn-mobile__panel--sub{transform:translateX(100%);opacity:0}
.gn-mobile.is-sub .gn-mobile__panel--main{transform:translateX(-30%);opacity:0}
.gn-mobile.is-sub .gn-mobile__panel--sub.is-current{transform:none;opacity:1}
.gn-mobile__big a,.gn-mobile__big button{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  font-family:var(--font-head);font-size:1.75rem;font-weight:600;letter-spacing:-.015em;
  padding:6px 0;text-align:left;color:var(--ink);
}
.gn-mobile__big .glyph{width:20px;height:20px;color:var(--ink-3)}
.gn-mobile__small{margin-top:28px}
.gn-mobile__small a{display:block;padding:6px 0;font-size:1.0625rem;font-weight:500;color:var(--ink-2)}
.gn-mobile__back{display:flex;align-items:center;gap:4px;margin:0 0 18px -6px;color:var(--ink-3);font-size:.9rem}
.gn-mobile__back .glyph{width:18px;height:18px}
.gn-mobile__label{font-size:.8rem;color:var(--ink-3);margin:22px 0 6px}
.gn-mobile .btn{margin-top:32px}
.menu-open{overflow:hidden}

@media (max-width:900px){
  .gn__list,.gn__cta{display:none}
  .gn__burger{display:block}
  .gn__flyout{display:none}
}

/* 08 LOCAL NAV ----------------------------------------------- */
.ln{position:sticky;top:0;z-index:90;height:var(--ln-h);margin-bottom:calc(-1 * var(--ln-h))}
.ln__bg{
  position:absolute;inset:0;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  box-shadow:inset 0 -1px 0 rgba(20,26,51,.12);
  transition:background-color .4s var(--ease);
}
.ln.is-dark .ln__bg{background:rgba(22,27,51,.72);box-shadow:inset 0 -1px 0 rgba(255,255,255,.12)}
.ln__inner{
  position:relative;height:100%;display:flex;align-items:center;gap:22px;
  max-width:calc(1060px + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter);
}
.ln__title{margin-right:auto;display:flex;align-items:baseline;gap:10px;min-width:0}
.ln__title a{font-family:var(--font-head);font-size:1.3rem;font-weight:600;letter-spacing:-.015em;color:var(--ink);white-space:nowrap}
.ln__title .ln__parent{font-family:var(--font-body);font-size:.75rem;font-weight:500;color:var(--ink-3);letter-spacing:0}
.ln.is-dark .ln__title a{color:#fff}
.ln__menu{display:flex;align-items:center;gap:22px}
.ln__menu a{font-size:.75rem;color:rgba(20,26,51,.82);white-space:nowrap;transition:color .2s}
.ln__menu a:hover{color:var(--ink)}
.ln__menu a.is-current{color:var(--ink-3);pointer-events:none}
.ln.is-dark .ln__menu a{color:rgba(255,255,255,.82)}
.ln.is-dark .ln__menu a.is-current{color:rgba(255,255,255,.45)}
.ln__cta .btn{min-height:28px;padding:0 12px;font-size:.75rem;background:var(--navy);color:#fff}
.ln.is-dark .ln__cta .btn{background:var(--yellow);color:var(--night)}
.ln__toggle{display:none;width:32px;height:32px;margin-left:-8px;color:var(--ink-2)}
.ln__toggle .glyph{width:16px;height:16px;margin:auto;transition:transform .35s var(--ease)}
.ln.is-dark .ln__toggle{color:#fff}
.ln-spacer{height:var(--ln-h)}

@media (max-width:833px){
  .ln__toggle{display:block;order:2}
  .ln__title{order:1}
  .ln__cta{order:3}
  .ln__menu{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    padding:6px var(--gutter) 18px;
    background:rgba(250,250,252,.96);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    box-shadow:0 20px 30px -24px rgba(12,16,36,.4);
    clip-path:inset(0 0 100% 0);visibility:hidden;
    transition:clip-path .4s var(--ease),visibility 0s linear .4s;
  }
  .ln.is-dark .ln__menu{background:rgba(22,27,51,.97)}
  .ln__menu a{font-size:1.0625rem;padding:12px 0;border-bottom:1px solid rgba(20,26,51,.08)}
  .ln.is-dark .ln__menu a{border-color:rgba(255,255,255,.08)}
  .ln.is-expanded .ln__menu{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .4s var(--ease),visibility 0s}
  .ln.is-expanded .ln__toggle .glyph{transform:rotate(180deg)}
}

.ln__cta .btn .glyph{display:none}

/* Wide screens: the local nav becomes a slim rail on the left. Collapsed it
   shows the product colour, a dot per section (the current one stretched) and
   a contact button; on hover or keyboard focus it opens to show the labels. */
@media (min-width:1100px){
  .has-ln .gn{position:sticky}
  .phero{padding-top:clamp(56px,7vw,104px)}
  .ln{position:fixed;left:12px;top:50%;z-index:95;width:32px;height:auto;margin:0;transform:translateY(-50%);border-radius:18px;transition:width .42s var(--ease),opacity .35s var(--ease),visibility 0s}
  .ln.is-open{width:244px}
  .ln.is-away{opacity:0;visibility:hidden;transition:width .42s var(--ease),opacity .35s var(--ease),visibility 0s linear .35s}
  .ln__bg{border-radius:inherit;box-shadow:0 0 0 1px rgba(20,26,51,.10),0 14px 34px -16px rgba(12,16,36,.4)}
  .ln.is-dark .ln__bg{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 14px 34px -16px rgba(0,0,0,.7)}
  .ln__inner{flex-direction:column;align-items:stretch;gap:0;max-width:none;margin:0;padding:12px 0;height:auto;overflow:hidden;border-radius:inherit}
  .ln__toggle{display:none}
  .ln__title{position:relative;margin:0 0 8px;padding:2px 14px 8px 36px;flex-direction:column;align-items:flex-start;gap:1px;white-space:nowrap}
  .ln__title::before{content:"";position:absolute;left:10px;top:6px;width:12px;height:12px;border-radius:4px;background:var(--p)}
  .ln__title a{font-size:1rem;line-height:1.25}
  .ln__title .ln__parent{font-size:.72rem}
  .ln__menu{flex-direction:column;align-items:stretch;gap:0}
  .ln__menu a{position:relative;display:block;padding:7px 16px 7px 36px;font-size:.8125rem;line-height:1.3;white-space:nowrap}
  .ln__menu a::before{content:"";position:absolute;left:12px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:4px;background:rgba(20,26,51,.22);transition:height .3s var(--ease),margin .3s var(--ease),background-color .3s}
  .ln.is-dark .ln__menu a::before{background:rgba(255,255,255,.3)}
  .ln__menu a:hover::before{background:rgba(20,26,51,.5)}
  .ln.is-dark .ln__menu a:hover::before{background:rgba(255,255,255,.6)}
  .ln__menu a.is-current{color:var(--ink);font-weight:600}
  .ln.is-dark .ln__menu a.is-current{color:#fff}
  .ln__menu a.is-current::before,.ln.is-dark .ln__menu a.is-current::before{height:20px;margin-top:-10px;background:var(--p)}
  .ln__cta{padding:10px 4px 0}
  .ln__cta .btn{display:flex;align-items:center;justify-content:center;gap:7px;width:24px;height:24px;min-height:0;padding:0;border-radius:12px;white-space:nowrap;overflow:hidden}
  .ln__cta .btn .glyph{display:block;width:13px;height:13px;flex:none;stroke-width:2.2}
  .ln__cta .btn span{display:none}
  /* collapsed: labels invisible but kept in place, so opening doesn't reflow */
  .ln:not(.is-open) .ln__title a,.ln:not(.is-open) .ln__menu a{color:transparent;transition:color .12s}
  .ln.is-open .ln__title a,.ln.is-open .ln__menu a{transition:color .25s .14s}
  .ln.is-open .ln__cta{padding:12px 14px 2px}
  .ln.is-open .ln__cta .btn{width:100%;height:32px;border-radius:16px;font-size:.8125rem}
  .ln.is-open .ln__cta .btn span{display:inline}
}

/* 09 HOMEPAGE TILES ------------------------------------------ */
.tiles{display:grid;gap:12px;padding:12px 0;max-width:2000px;margin-inline:auto}
.tile{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(40px,4.5vw,56px) var(--gutter) 0;
  min-height:clamp(480px,44vw,620px);
}
.tile__name{font-size:clamp(2.2rem,4vw,3rem);line-height:1.07;letter-spacing:-.022em}
.tile__name .tile__logo{height:.9em;width:auto;margin:0 auto}
/* 1.18 was display leading on a paragraph: fine for a one-liner, cramped as
   soon as a subtitle runs to two or three lines, which most now do. */
.tile__sub{font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.3;margin-top:.45rem;color:var(--fg);font-weight:400;max-width:26em;text-wrap:balance}
.tile__eyebrow{font-family:var(--font-head);font-size:clamp(.95rem,1.3vw,1.1rem);font-weight:600;color:var(--p);margin-bottom:.35rem}
.tile__body{font-size:clamp(1rem,1.35vw,1.1875rem);line-height:1.5;margin-top:clamp(14px,1.8vw,22px);color:var(--fg-2);max-width:62ch;text-wrap:pretty}
.tile__body strong{color:var(--fg);font-weight:600}
.tile .btn-row{justify-content:center;margin-top:1.1rem}
.tile__art{margin-top:auto;width:min(78%,760px);padding:clamp(24px,3vw,40px) 0 clamp(30px,3.6vw,48px)}
/* Diligent One carries more copy, so its render is a size down. */
.tile--dil .tile__art{width:min(64%,640px)}
.tile--hero{min-height:clamp(600px,50vw,720px)}
/* V1 hero: no film, so the copy sits in the middle of the tile. */
.tile--hero:not(.hs){justify-content:center;min-height:clamp(460px,44vw,600px);padding-bottom:clamp(44px,5vw,64px)}

/* Hero aura: four soft lights drifting behind the hero, plus a wide sheen that
   sweeps across it. Very low contrast, 45-70s loops, transform-only so it stays cheap. */
.tile--hero{isolation:isolate}
.tile--hero > :not(.aura){position:relative;z-index:1}
.aura{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.aura::before{content:"";position:absolute;inset:-20%;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:30px 30px;mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent 75%);-webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent 75%);animation:gridpan 90s linear infinite}
.aura::after{content:"";position:absolute;inset:-30% -10%;background:radial-gradient(60% 45% at 50% 40%,rgba(255,255,255,.07),transparent 70%);animation:sheen 34s var(--ease) infinite}
.aura i{position:absolute;display:block;border-radius:50%;filter:blur(2px);will-change:transform}
.aura i:nth-child(1){width:46vw;height:46vw;left:-8vw;top:-14vw;background:radial-gradient(circle,rgba(252,192,10,.20),transparent 68%);animation:drift-a 38s ease-in-out infinite alternate}
.aura i:nth-child(2){width:52vw;height:52vw;right:-12vw;top:-6vw;background:radial-gradient(circle,rgba(86,116,214,.32),transparent 68%);animation:drift-b 46s ease-in-out infinite alternate}
.aura i:nth-child(3){width:40vw;height:40vw;left:22vw;bottom:-18vw;background:radial-gradient(circle,rgba(243,120,55,.16),transparent 70%);animation:drift-c 42s ease-in-out infinite alternate}
.aura i:nth-child(4){width:30vw;height:30vw;right:14vw;bottom:-10vw;background:radial-gradient(circle,rgba(252,192,10,.11),transparent 70%);animation:drift-d 36s ease-in-out infinite alternate}
@keyframes drift-a{from{transform:none}to{transform:translate3d(7vw,4vw,0) scale(1.15)}}
@keyframes drift-b{from{transform:none}to{transform:translate3d(-6vw,5vw,0) scale(1.1)}}
@keyframes drift-c{from{transform:none}to{transform:translate3d(5vw,-4vw,0) scale(1.18)}}
@keyframes drift-d{from{transform:none}to{transform:translate3d(-4vw,-3vw,0) scale(1.22)}}
@keyframes sheen{0%,100%{transform:translate3d(-16%,0,0)}50%{transform:translate3d(16%,4%,0)}}
@keyframes gridpan{from{transform:translate3d(0,0,0)}to{transform:translate3d(30px,30px,0)}}
.qa .aura i,.qa .aura::after,.qa .aura::before{animation:none}
@media (prefers-reduced-motion:reduce){.aura i,.aura::after,.aura::before{animation:none}}
.tile--hero .tile__name{font-size:clamp(2.35rem,5.4vw,4.25rem);text-wrap:balance;max-width:22ch}
.tile--hero .tile__sub{font-size:clamp(1.2rem,2vw,1.6rem);max-width:30em;color:var(--fg-2)}
/* Hero proof strip: stats plus partner badge slots. Placeholder until the
   real figures and badges are cleared with the vendors. */
.proof{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 28px;margin-top:clamp(26px,3vw,38px);padding-top:clamp(18px,2.2vw,26px);border-top:1px solid color-mix(in srgb,var(--fg) 14%,transparent);width:min(100%,1040px)}
.proof__stat{display:flex;align-items:baseline;gap:7px;font-size:.9rem;color:var(--fg-3)}
.proof__stat b{font-family:var(--font-head);font-size:1.25rem;font-weight:600;letter-spacing:-.02em;color:var(--fg)}
.proof__logos{display:flex;flex-wrap:wrap;gap:10px}
.proof__slot{display:grid;place-items:center;height:34px;padding:0 14px;border-radius:8px;border:1px dashed color-mix(in srgb,var(--fg) 26%,transparent);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3)}
@media (max-width:734px){
  .proof{gap:10px 18px;margin-top:26px;padding-top:18px}
  .proof__stat{font-size:.82rem}
  .proof__stat b{font-size:1.05rem}
  .proof__slot{height:30px;padding:0 10px;font-size:.66rem}
}
.tile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tile-grid .tile{min-height:clamp(460px,38vw,540px)}
.tile-grid .tile__name{font-size:clamp(1.85rem,2.9vw,2.25rem)}
.tile-grid .tile__sub{font-size:clamp(1.05rem,1.4vw,1.2rem)}
.tile-grid .tile__art{width:min(86%,500px)}
.tile--links .tile__links{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(100%,560px);margin-block:auto;padding-block:clamp(28px,4vw,48px)}
.tile-link{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;
  padding:24px 22px 26px;border-radius:var(--radius-sm);background:var(--card);
  transition:background-color .3s var(--ease),transform .4s var(--ease);
}
.tile-link:hover{background:var(--card-2);transform:translateY(-2px)}
.tile-link .glyph{width:32px;height:32px;color:var(--yellow);margin-bottom:14px;stroke-width:1.6}
.tile-link b{font-family:var(--font-head);font-size:1.15rem;letter-spacing:-.01em}
.tile-link span{font-size:.9375rem;color:var(--fg-2);line-height:1.35}
@media (max-width:480px){.tile--links .tile__links{grid-template-columns:1fr}}

/* Implementation tile: four steps on a yellow track */
.tile--impl{min-height:0;padding-bottom:clamp(40px,4.5vw,56px)}
.journey{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);width:min(100%,1100px);margin-top:clamp(40px,5vw,64px);counter-reset:step}
.journey::before{content:"";position:absolute;left:12.5%;right:12.5%;top:27px;height:2px;background:linear-gradient(90deg,var(--yellow),var(--orange));transform-origin:left;transition:transform 1.4s var(--ease-out) .2s}
.js .journey:not(.is-in)::before{transform:scaleX(0)}
.journey li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 6px;text-align:center}
.journey .glyph{box-sizing:content-box;width:24px;height:24px;padding:15px;border-radius:50%;background:#fff;color:var(--navy);box-shadow:0 0 0 2px var(--yellow),0 10px 24px -12px rgba(20,26,51,.35);margin-bottom:10px;stroke-width:1.7}
.journey li:nth-child(4) .glyph{background:var(--yellow)}
.journey b{font-family:var(--font-head);font-size:clamp(1rem,1.3vw,1.15rem);letter-spacing:-.01em}
.journey span{font-size:.9rem;color:var(--fg-2);line-height:1.35}
.js .journey:not(.is-in) li{opacity:0;transform:translateY(12px)}
.journey li{transition:opacity .6s var(--ease),transform .6s var(--ease-out)}
.journey li:nth-child(2){transition-delay:.15s}.journey li:nth-child(3){transition-delay:.3s}.journey li:nth-child(4){transition-delay:.45s}
.journey__note{margin-top:clamp(28px,3vw,40px);font-size:.9rem;color:var(--fg-3)}
@media (max-width:734px){
  .journey{grid-template-columns:1fr;gap:18px;width:min(100%,360px);text-align:left}
  .journey::before{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto;background:linear-gradient(180deg,var(--yellow),var(--orange));transform-origin:top}
  .js .journey:not(.is-in)::before{transform:scaleY(0)}
  .journey li{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center;text-align:left;padding:0}
  .journey .glyph{grid-row:span 2;margin:0}
  .journey b,.journey span{grid-column:2}
}

/* Training tile: a short course list */
.courses{display:grid;gap:10px;width:min(100%,460px);margin-block:auto;padding-block:clamp(28px,4vw,48px);text-align:left}
.courses li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;background:var(--card);transition:background-color .25s,transform .25s var(--ease)}
.courses li:hover{background:var(--card-2);transform:translateX(3px)}
.courses i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.courses b{font-family:var(--font-head);font-size:1rem;letter-spacing:-.01em}
.courses span{font-size:.85rem;color:var(--fg-2)}
.js .courses:not(.is-in) li{opacity:0;transform:translateY(10px)}
.courses li{transition:opacity .5s var(--ease),transform .5s var(--ease-out),background-color .25s}
.courses li:nth-child(2){transition-delay:.08s}.courses li:nth-child(3){transition-delay:.16s}.courses li:nth-child(4){transition-delay:.24s}
@media (max-width:480px){.courses li{grid-template-columns:auto 1fr}.courses span{grid-column:2}}
.uc-visual{display:flex;flex-direction:column;align-items:center;gap:26px;padding-bottom:clamp(40px,6vw,72px)}
.uc-visual .glyph{width:clamp(120px,16vw,200px);height:clamp(120px,16vw,200px);stroke-width:.9;color:var(--p)}
@media (max-width:734px){
  .tile,.tile--hero,.tile-grid .tile{min-height:0}
  .tile .fan{margin-top:48px}
  .tiles{padding:0;gap:10px}
  .tile-grid{grid-template-columns:1fr;gap:10px}
  .tile__art{width:112%;padding-bottom:clamp(26px,6vw,40px)}
  .tile-grid .tile__art{width:108%}
  .tile--dil .tile__art{width:100%}
}

/* Featured product tile: one product in the spotlight, directly under the hero.
   Split layout (copy left, render bleeding off the right edge) so it reads
   differently from the centred product tiles below it. */
.tile--featured{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;
  gap:clamp(24px,4vw,64px);text-align:center;
  min-height:clamp(460px,38vw,560px);padding:clamp(44px,5vw,80px) 0 0 clamp(28px,5.5vw,96px);
}
.tile--featured::before{
  content:"";position:absolute;right:-10%;top:50%;width:70%;aspect-ratio:1;transform:translateY(-50%);pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--p) 26%,transparent),transparent 70%);
}
.feat__copy{position:relative;padding-bottom:clamp(44px,5vw,80px);align-self:center}
/* "Uitgelicht" reads as a kicker, not as a chip: the site's own label idiom
   (see .t-label) preceded by a short accent rule. Quiet enough to sit above
   the brand line without competing with it, and it stretches to a campaign
   line ("Webinar · 8 oktober") without turning into a box. */
.feat__badge{
  display:flex;align-items:center;justify-content:center;gap:clamp(10px,1vw,14px);
  font-family:var(--font-head);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);
  margin-bottom:clamp(18px,2vw,26px);
}
.feat__badge i{width:clamp(20px,2.4vw,34px);height:2px;flex:none;border-radius:2px;background:var(--p)}
.tile--featured .tile__eyebrow{margin-bottom:.15rem}
.tile--featured .tile__name{font-size:clamp(2.6rem,5.2vw,4.4rem);margin-top:0}
.tile--featured .tile__sub{margin-top:.7rem;margin-inline:auto;color:var(--fg-2);font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.4;max-width:30em}
.feat__points{display:grid;gap:10px;margin-top:1.5rem}
.feat__points li{display:flex;align-items:center;justify-content:center;gap:10px;font-size:1rem;color:var(--fg)}
.feat__points .glyph{width:20px;height:20px;color:var(--p);stroke-width:2}
.tile--featured .btn-row{justify-content:center;margin-top:1.8rem}
.feat__art{position:relative;align-self:end;width:112%;margin-bottom:clamp(34px,4.2vw,56px)}
.tile-grid > .tile:last-child:nth-child(odd){grid-column:1 / -1}
/* When a featured product leaves the grid, the links tile goes full width: copy left, links right. */
@media (min-width:901px){
  .tile-grid > .tile--links:last-child:nth-child(odd){
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:clamp(32px,5vw,80px);
    align-items:start;text-align:left;min-height:0;padding:clamp(48px,5vw,80px) clamp(28px,5.5vw,96px);
  }
  .tile-grid > .tile--links:last-child:nth-child(odd) > :not(.tile__links){grid-column:1}
  .tile-grid > .tile--links:last-child:nth-child(odd) .tile__links{grid-column:2;grid-row:1 / span 3;align-self:center;margin:0;padding:0;width:100%}
}
@media (max-width:900px){
  .tile--featured{grid-template-columns:1fr;padding:clamp(40px,8vw,64px) var(--gutter) 0}
  .feat__copy{padding-bottom:0}
  .feat__art{width:108%;margin-left:4%;margin-bottom:clamp(26px,5vw,40px)}
  .tile--featured::before{right:-30%;top:auto;bottom:-10%;width:120%;transform:none}
}

/* Lineup of renders used in the homepage hero tile. */
.fan{position:relative;width:min(100%,1180px);margin-top:auto;height:clamp(250px,34vw,470px)}
.fan .device{position:absolute;bottom:-6%;transition:transform 1.4s var(--ease-out),opacity 1.2s var(--ease)}
.fan .device:nth-child(1){width:38%;left:0;bottom:-2%;z-index:1}
.fan .device:nth-child(2){width:42%;left:13%;bottom:4%;z-index:2}
.fan .device:nth-child(3){width:50%;left:25%;bottom:-8%;z-index:4}
.fan .device:nth-child(4){width:42%;right:13%;bottom:4%;z-index:3}
.fan .device:nth-child(5){width:38%;right:0;bottom:-2%;z-index:2}
.js .fan:not(.is-in) .device{opacity:0;transform:translateY(18%)}
.js .fan .device:nth-child(1),.js .fan .device:nth-child(5){transition-delay:.25s}
.js .fan .device:nth-child(2),.js .fan .device:nth-child(4){transition-delay:.12s}
@media (max-width:734px){
  .fan{height:56vw}
  .fan .device:nth-child(1),.fan .device:nth-child(5){display:none}
  .fan .device:nth-child(2){width:62%;left:-8%}
  .fan .device:nth-child(4){width:62%;right:-8%}
  .fan .device:nth-child(3){width:76%;left:12%}
}

/* 10 PRODUCT HERO -------------------------------------------- */
.phero{padding-top:calc(var(--ln-h) + clamp(44px,6vw,88px));text-align:center;overflow:hidden}
/* Every product hero reads the same way: the brand above, then the product
   and the claim in one headline. The accent lands once, on the product name,
   so the brand line above it stays quiet. */
.phero__name{font-family:var(--font-head);font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:600;letter-spacing:-.01em;margin-bottom:.5rem;color:var(--fg-2)}
.phero__title{font-size:var(--fs-hero);line-height:1.04;letter-spacing:-.028em;max-width:28ch;margin-inline:auto;text-wrap:balance}
.phero__product{color:var(--p)}
/* A light hero can hand the headline a darker ink where the brand colour is
   too pale against white; KNIME keeps its own amber here by choice. */
.phero.theme-light .phero__product{color:var(--p-ink,var(--p))}
.phero__lead{margin:1.3rem auto 0;max-width:36em}
.phero .btn-row{justify-content:center;margin-top:1.8rem}
.phero__art{width:min(1120px,calc(100% - 2 * var(--gutter)));margin:clamp(48px,6vw,80px) auto 0;transform-origin:50% 0}
.js .phero__art{transform:scale(var(--hero-scale,1.06)) translateY(var(--hero-y,0))}
.phero__foot{margin-top:clamp(36px,5vw,64px);padding-bottom:clamp(64px,8vw,120px)}

/* Module family (solution pages): Apple-style "choose your model" row */
.modules{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:clamp(48px,6vw,80px);text-align:left}
.modules--2{max-width:720px;margin-inline:auto}
.module{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  min-height:190px;padding:26px 24px 28px;border-radius:22px;background:var(--card);text-align:left;
  transition:transform .5s var(--ease),background-color .3s;
}
.module:hover{transform:translateY(-3px)}
.modules--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.modules--3{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.modules--3{grid-template-columns:1fr}}
.module > .glyph{width:34px;height:34px;color:var(--p);stroke-width:1.6;margin-bottom:26px}
.module b{font-family:var(--font-head);font-size:1.15rem;line-height:1.2;letter-spacing:-.01em;padding-right:34px}
.module span{font-size:.9375rem;color:var(--fg-2);line-height:1.35;padding-right:34px}
.module .fcard__plus{width:30px;height:30px;right:16px;bottom:16px}
.module .fcard__plus .glyph{width:14px;height:14px}

/* 11 DEVICE / RENDERS ---------------------------------------- */
.device{container-type:inline-size;position:relative}
.device__screen{
  position:relative;overflow:hidden;border-radius:max(6px,1.25cqi);
  box-shadow:0 2.6cqi 7cqi -2.4cqi rgba(11,15,34,.42),0 0 0 1px rgba(11,15,34,.08);
  background:#fff;
}
.theme-dark .device__screen,.theme-navy .device__screen{box-shadow:0 3cqi 9cqi -2cqi rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1)}
.device__screen svg{width:100%;height:auto}
/* The product windows (_partials/renders/) draw their own corners, and one of
   them its own shadow. Inside the device frame that would be a frame around a
   frame, and a shadow tuned for a light page disappears on a dark section, so
   the frame above does both for all of them. */
.device__screen > [data-cf-root]{display:block}
.device__screen > [data-cf-root] .win{border-radius:0;box-shadow:none}

/* "Illustration, not a screenshot" note under a render, an animation or a gallery. */
.device__note,.repnote{margin-top:10px;font-size:.75rem;line-height:1.35;color:var(--fg-3);text-align:center}
.repnote{margin-inline:auto;max-width:46em}
.repnote--section{margin-top:clamp(28px,3vw,40px)}
.zoomcrop .device__note,.family-card__art .device__note,.fan .device__note,.lineup__art .device__note,.hs .device__note{display:none}

/* Text inside renders */
.r{font-family:var(--font-body);fill:#141a33}
.r-title{font-size:13px;font-weight:500;fill:#5a6080}
.r-h{font-family:var(--font-head);font-size:15px;font-weight:600;fill:#141a33;letter-spacing:-.01em}
.r-h2{font-family:var(--font-head);font-size:22px;font-weight:600;fill:#141a33;letter-spacing:-.015em}
.r-t{font-size:12.5px;fill:#3b4160}
.r-s{font-size:11px;fill:#7a809c}
.r-n{font-family:var(--font-head);font-size:30px;font-weight:600;fill:#141a33;letter-spacing:-.02em}
.r-m{font-family:var(--font-mono);font-size:13px;fill:#cdd3ea}
.r-ms{font-family:var(--font-mono);font-size:11.5px;fill:#8d94b3}
.r-w{fill:#fff}
.r-dim{fill:#8d94b3}
.r-b{font-weight:600}

/* 12 CHAPTER NAV --------------------------------------------- */
.chapternav{padding:calc(var(--gn-h) * 0 + 22px) 0 16px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line-c,var(--line))}
.chapternav::-webkit-scrollbar{display:none}
.chapternav ul{display:flex;justify-content:center;gap:clamp(22px,3.4vw,44px);width:max-content;min-width:100%;padding-inline:var(--gutter)}
.chapternav a{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.75rem;font-weight:500;color:var(--fg);white-space:nowrap;transition:color .2s}
.chapternav a:hover{color:var(--navy-2)}
.chapternav .glyph{width:38px;height:38px;stroke-width:1.5;color:var(--c,var(--navy))}
.chapternav .new{font-size:.625rem;color:var(--orange);margin-top:-6px}

/* 13 HIGHLIGHTS GALLERY -------------------------------------- */
.gallery{position:relative}
.gallery__track{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;padding:4px max(var(--gutter),calc((100vw - 860px) / 2)) 8px;
  scroll-padding-inline:max(var(--gutter),calc((100vw - 860px) / 2));
}
.gallery__track::-webkit-scrollbar{display:none}
.gallery__item{
  flex:0 0 min(860px,calc(100vw - 2 * var(--gutter)));
  scroll-snap-align:center;scroll-snap-stop:always;
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:var(--card);min-height:clamp(400px,42vw,500px);
  display:grid;grid-template-rows:auto 1fr;
  transition:opacity .6s var(--ease);
}
.gallery__caption{
  padding:clamp(30px,4vw,48px) clamp(28px,4.4vw,56px) 0;
  font-family:var(--font-head);font-size:clamp(1.3rem,2.3vw,1.85rem);line-height:1.2;font-weight:600;letter-spacing:-.015em;
  color:var(--fg-2);max-width:26em;
}
.gallery__caption strong{color:var(--fg)}
.gallery__visual{position:relative;display:grid;place-items:end center;padding:24px clamp(20px,4vw,48px) 0;overflow:hidden}
.gallery__controls{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:28px}

/* Visuals that live inside gallery items and cards */
.zoomcrop{position:absolute;inset:0;overflow:hidden}
.zoomcrop .device{position:absolute;width:var(--zw,120%);left:var(--zx,8%);top:var(--zy,10%)}
.zoomcrop--flat{-webkit-mask-image:none;mask-image:none}

.miniui{width:min(600px,100%);background:var(--card-2);border-radius:20px 20px 0 0;padding:20px 24px 6px;box-shadow:0 -1px 0 var(--line-c) inset}
.miniui__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.miniui__head b{font-family:var(--font-head);font-size:1rem;letter-spacing:-.01em}
.miniui__head span{font-size:.8rem;color:var(--fg-3)}
.miniui__row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:13px 0;border-top:1px solid var(--line-c);font-size:.95rem;text-align:left}
.miniui__row i{width:9px;height:9px;border-radius:50%;background:#3cb46e}
.miniui__row i.warn{background:var(--orange)}
.miniui__row i.idle{background:var(--fg-3)}
.miniui__row small{font-size:.8rem;color:var(--fg-3);font-family:var(--font-mono)}

.orbit{position:relative;width:min(620px,100%);aspect-ratio:1.75;align-self:end}
.orbit::before{content:"";position:absolute;left:50%;top:56%;width:74%;aspect-ratio:2;border:1px dashed var(--line-c);border-radius:50%;transform:translate(-50%,-50%)}
.orbit__core{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);width:clamp(72px,9vw,100px);aspect-ratio:1;border-radius:28%;background:var(--p);display:grid;place-items:center;color:var(--night);box-shadow:0 20px 50px -18px color-mix(in srgb,var(--p) 70%,transparent)}
.orbit__core .glyph{width:48%;height:48%;stroke-width:1.9}
.orbit__chip{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:14px;background:var(--card-2);font-size:.875rem;font-weight:500;white-space:nowrap;color:var(--fg)}
.orbit__chip .glyph{width:17px;height:17px;color:var(--p)}

.morph{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,36px);flex-wrap:wrap;padding:10px 0 clamp(36px,5vw,64px)}
.morph__col{display:grid;gap:10px}
.morph__item{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:var(--card-2);font-size:.9375rem;font-weight:500;white-space:nowrap}
.morph__item .glyph{width:20px;height:20px;color:var(--fg-3)}
.morph__item--on{background:color-mix(in srgb,var(--p) 18%,var(--card-2))}
.morph__item--on .glyph{color:var(--p)}
.morph__arrow{width:clamp(28px,5vw,64px);height:2px;background:var(--fg-3);position:relative}
.morph__arrow::after{content:"";position:absolute;right:-1px;top:50%;width:9px;height:9px;border-top:2px solid var(--fg-3);border-right:2px solid var(--fg-3);transform:translateY(-50%) rotate(45deg)}
@media (max-width:560px){.morph{flex-direction:column}.morph__arrow{transform:rotate(90deg)}}
.dotnav{display:flex;align-items:center;gap:12px;height:56px;padding:0 22px;border-radius:56px;background:var(--seg)}
.dotnav button{position:relative;width:8px;height:8px;border-radius:8px;background:var(--dot);overflow:hidden;transition:width .5s var(--ease),background-color .3s}
.dotnav button::after{content:"";position:absolute;inset:0;background:var(--fg);transform-origin:0 50%;transform:scaleX(var(--progress,0))}
.dotnav button.is-active{width:48px;background:var(--dot-track)}
.dotnav button:not(.is-active)::after{transform:scaleX(0)}
.playpause{width:56px;height:56px;border-radius:50%;background:var(--seg);display:grid;place-items:center;color:var(--fg);transition:background-color .2s}
.playpause:hover{background:var(--seg-thumb)}
.playpause .glyph{width:18px;height:18px;fill:currentColor;stroke:none}
.playpause .i-play{display:none}
.playpause.is-paused .i-play{display:block}
.playpause.is-paused .i-pause{display:none}

/* 14 SCRUB TEXT, STATEMENT, QUOTE ------------------------------ */
.scrub{
  font-family:var(--font-head);font-size:clamp(1.75rem,3.6vw,3rem);line-height:1.2;font-weight:600;letter-spacing:-.02em;
  max-width:22em;
}
.scrub .w{transition:color .35s var(--ease)}
.js .scrub .w{color:var(--scrub-off,#c7cad6)}
.js .theme-dark .scrub .w,.js .theme-navy .scrub .w{--scrub-off:#3b4263}
.js .scrub .w.on{color:var(--fg)}
.scrub .w.hl.on{color:var(--p)}
.theme-light .scrub .w.hl.on,.theme-grey .scrub .w.hl.on{color:color-mix(in srgb,var(--p) 78%,#000)}
/* The darkening above turns brand yellow into an olive that no longer reads as
   Conify yellow. A scrub that has to show the real brand colour opts out of it
   and keeps #fcc00a, at the cost of contrast (1.7:1 on white). */
.theme-light .scrub--brand .w.hl.on,.theme-grey .scrub--brand .w.hl.on{color:var(--p)}

.statement{font-family:var(--font-head);font-weight:600;font-size:clamp(2.4rem,6vw,5rem);line-height:1.05;letter-spacing:-.03em;text-align:center;text-wrap:balance}
.statement span{display:block}

/* Use-cases hero marquee: two rows of case names drifting past, so the page
   says what it holds before you scroll. Each track carries its items twice and
   travels exactly half its width, which is why the chips use margin-right
   instead of gap — a flex gap would leave the loop half a gap off. */
.ucmq{
  --mq-dur:70s;margin-top:clamp(34px,4.5vw,60px);display:grid;gap:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.ucmq__row{display:flex;overflow:hidden}
.ucmq__track{display:flex;flex:none;animation:ucmq var(--mq-dur) linear infinite}
.ucmq__row--b .ucmq__track{--mq-dur:86s;animation-direction:reverse}
.ucmq span{
  flex:none;margin-right:14px;padding:11px 20px;border-radius:40px;white-space:nowrap;
  background:var(--card);box-shadow:inset 0 0 0 1px var(--line-c);
  font-family:var(--font-head);font-size:clamp(.875rem,1.1vw,1rem);font-weight:500;color:var(--fg-2);
}
@keyframes ucmq{to{transform:translateX(-50%)}}
@media (max-width:734px){
  .ucmq{--mq-dur:52s;gap:10px}
  .ucmq__row--b .ucmq__track{--mq-dur:62s}
  .ucmq span{margin-right:10px;padding:9px 15px;font-size:.8125rem}
}
@media (prefers-reduced-motion:reduce){.ucmq__track{animation:none}}

.bigquote{max-width:880px;margin-inline:auto;text-align:center}
.bigquote blockquote{font-family:var(--font-head);font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.2;font-weight:600;letter-spacing:-.018em}
.bigquote figcaption{margin-top:1.4rem;color:var(--fg-2)}

/* 15 FEATURE CARDS (BENTO) & ICON ROW -------------------------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.bento__card{
  grid-column:span 2;position:relative;overflow:hidden;
  background:var(--card);border-radius:var(--radius);
  padding:clamp(28px,3.2vw,40px);min-height:300px;
  display:flex;flex-direction:column;
}
.bento__card--wide{grid-column:span 3}
.bento__card--full{grid-column:1 / -1}
.bento__card--tall{grid-row:span 2}
.bento__icon{width:44px;height:44px;color:var(--p);stroke-width:1.6}
.bento__title{font-size:var(--fs-card);line-height:1.16;margin-top:32px}
.bento__text{margin-top:.6rem;color:var(--fg-2)}
.bento__title,.fcard__title,.card h3,.lineup__name,.audience h3,.modal__title{overflow-wrap:break-word}
.bento__big{font-family:var(--font-head);font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.2;font-weight:600;letter-spacing:-.015em;color:var(--fg-2)}
.bento__big strong{color:var(--fg)}
.bento__visual{margin-top:auto;padding-top:28px}
@media (max-width:1068px){.bento__card{grid-column:span 3}.bento__card--full{grid-column:1 / -1}}
@media (max-width:734px){.bento{gap:14px}.bento__card,.bento__card--wide{grid-column:1 / -1;min-height:0}.bento__title{margin-top:24px}}

.iconrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:36px 24px;text-align:center}
.iconrow li{display:flex;flex-direction:column;align-items:center;gap:14px}
.iconrow .glyph{width:44px;height:44px;color:var(--p);stroke-width:1.5}
.iconrow span{font-family:var(--font-head);font-weight:600;font-size:1.1rem;line-height:1.25;letter-spacing:-.01em;max-width:12em}
/* Three promises across, the fourth centred on its own row underneath. */

/* 16 STATS --------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:48px 40px}
.stat__num{font-family:var(--font-head);font-size:clamp(3.4rem,7vw,5.5rem);line-height:1;font-weight:600;letter-spacing:-.035em}
.stat__label{margin-top:.8rem;font-size:var(--fs-intro);line-height:1.35;color:var(--fg-2);max-width:18em}
.stat__label strong{color:var(--fg)}
.stat__note{margin-top:.5rem;font-size:var(--fs-micro);color:var(--fg-3)}

/* 17 CARD RAIL + MODAL SHEETS --------------------------------- */
.rail-wrap{position:relative}
.rail{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;padding:4px max(var(--gutter),calc((100vw - var(--wrap)) / 2)) 24px;
  scroll-padding-inline:max(var(--gutter),calc((100vw - var(--wrap)) / 2));
}
.rail::-webkit-scrollbar{display:none}
.fcard{
  flex:0 0 clamp(290px,30vw,372px);scroll-snap-align:start;
  position:relative;overflow:hidden;text-align:left;
  min-height:clamp(440px,42vw,560px);
  background:var(--card);border-radius:var(--radius);
  padding:clamp(26px,2.6vw,34px);
  display:flex;flex-direction:column;
  transition:transform .5s var(--ease);
}
.fcard:hover{transform:scale(1.012)}
.fcard__eyebrow{font-size:.8125rem;font-weight:600;color:var(--fg-2);letter-spacing:0}
.fcard__title{font-family:var(--font-head);font-size:clamp(1.4rem,2.1vw,1.75rem);font-weight:600;line-height:1.16;letter-spacing:-.015em;margin-top:.45rem;color:var(--fg)}
.fcard__text{margin-top:.7rem;color:var(--fg-2);font-size:1rem}
.fcard__visual{margin-top:auto;display:grid;place-items:center;padding:26px 0 30px}
.fcard__visual .glyph{width:clamp(72px,8vw,104px);height:clamp(72px,8vw,104px);stroke-width:1.15;color:var(--p)}
.fcard__plus{
  position:absolute;right:18px;bottom:18px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:var(--fg);color:var(--bg);
  transition:transform .3s var(--ease),background-color .2s;
}
.fcard__plus .glyph{width:16px;height:16px;stroke-width:2.6}
.fcard:hover .fcard__plus{transform:scale(1.08)}
.uc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.uc-grid .fcard{min-height:clamp(300px,28vw,380px)}
@media (max-width:1068px){.uc-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.uc-grid{grid-template-columns:1fr}}
.rail-nav{display:flex;justify-content:flex-end;gap:16px;padding:6px max(var(--gutter),calc((100vw - var(--wrap)) / 2)) 0}
.rail-nav button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--seg);color:var(--fg);transition:opacity .2s,background-color .2s}
.rail-nav button:hover{background:var(--seg-thumb)}
.rail-nav button:disabled{opacity:.35;cursor:default}
.rail-nav .glyph{width:18px;height:18px;stroke-width:2.2}

.modal{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  padding:0;border:0;background:transparent;overflow-y:auto;overscroll-behavior:contain;
}
.modal::backdrop{background:rgba(11,15,34,.55);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.modal[open]::backdrop{animation:fade .45s var(--ease)}
.modal__panel{
  position:relative;width:min(1000px,calc(100% - 2 * var(--gutter)));
  margin:clamp(40px,7vh,88px) auto;
  background:#fff;color:var(--ink);border-radius:30px;
  padding:clamp(40px,6.5vw,80px) clamp(26px,6.5vw,80px);
  --fg:var(--ink);--fg-2:var(--ink-2);--fg-3:var(--ink-3);--card:var(--grey);--link:var(--navy);
}
.modal[open] .modal__panel{animation:sheet .6s var(--ease-out)}
.modal__close{
  position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:var(--ink);color:#fff;transition:transform .2s
}
.modal__close:hover{transform:scale(1.06)}
.modal__close .glyph{width:16px;height:16px;stroke-width:2.6}
.modal__eyebrow{font-family:var(--font-head);font-weight:600;color:color-mix(in srgb,var(--p) 80%,#000);margin-bottom:.5rem}
.modal__title{font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.07;letter-spacing:-.025em;max-width:16ch}
.modal__body{margin-top:clamp(28px,4vw,48px);display:grid;gap:14px}
.modal__block{background:var(--grey);border-radius:var(--radius-sm);padding:clamp(22px,3vw,34px)}
.modal__block h3{font-size:1.1rem;margin-bottom:.45rem;letter-spacing:-.01em}
.modal__block p{color:var(--ink-2);font-size:1.0625rem}
.modal__block ul{display:grid;gap:.4rem;margin-top:.4rem;color:var(--ink-2)}
.modal__block li{padding-left:1.1em;position:relative}
.modal__block li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--p)}
.modal__foot{margin-top:clamp(28px,4vw,44px)}
@keyframes sheet{from{opacity:0;transform:translateY(60px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-open{overflow:hidden}

/* Use case list (homepage "Toepassingen"): an iOS-style grouped list.
   White rounded card, app-style colour icons, inset hairlines, chevrons. */
.uclist{background:var(--card);border-radius:var(--radius);overflow:hidden}
.uclist__row{
  --inset:clamp(18px,2.6vw,30px);
  width:100%;background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;
  position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto 18px;align-items:center;gap:18px;
  padding:18px var(--inset);transition:background-color .25s var(--ease);
}
.uclist li + li .uclist__row::before{content:"";position:absolute;top:0;right:0;left:calc(var(--inset) + 62px);height:1px;background:var(--line-c)}
.uclist__row:hover{background:var(--card-2)}
.uclist__row:focus-visible{outline-offset:-3px;border-radius:0}
.uclist__icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--c);color:#fff;box-shadow:inset 0 -8px 16px -10px rgba(0,0,0,.25)}
.uclist__icon .glyph{width:22px;height:22px;stroke-width:2}
.uclist__text{display:flex;flex-direction:column;min-width:0}
.uclist__name{font-family:var(--font-head);font-weight:600;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.25;letter-spacing:-.012em;color:var(--fg)}
.uclist__desc{margin-top:2px;font-size:.9375rem;color:var(--fg-2)}
.uclist__tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.uclist__tags .chip{background:var(--card-2);font-size:.75rem;padding:5px 10px 5px 8px}
.uclist__row:hover .uclist__tags .chip{background:var(--card)}
.uclist__chev{width:18px;height:18px;color:var(--fg-3);stroke-width:2.2;transition:transform .25s var(--ease),color .25s}
.uclist__row:hover .uclist__chev{transform:scale(1.15);color:var(--fg)}
.uclist__foot{display:flex;justify-content:flex-end;margin-top:22px}
@media (max-width:734px){
  .uclist__row{grid-template-columns:40px minmax(0,1fr) 16px;column-gap:14px;row-gap:10px;padding-block:16px}
  .uclist li + li .uclist__row::before{left:calc(var(--inset) + 54px)}
  .uclist__icon{width:40px;height:40px;border-radius:11px;grid-row:1 / span 2;align-self:start}
  .uclist__tags{grid-column:2;grid-row:2;justify-content:flex-start}
  .uclist__chev{grid-column:3;grid-row:1 / span 2}
  .uclist__foot{justify-content:flex-start}
}

/* 18 SEGMENTED CONTROL & TAB PANELS ------------------------- */
/* Centred while it fits, scrollable from the first tab when it does not:
   justify-content:center would park the overflow out of reach on the left. */
.seg-wrap{display:flex;margin-bottom:clamp(32px,4vw,52px);overflow-x:auto;scrollbar-width:none;padding-inline:var(--gutter)}
.seg-wrap::-webkit-scrollbar{display:none}
.seg{position:relative;display:inline-flex;margin-inline:auto;gap:2px;padding:4px;border-radius:980px;background:var(--seg)}
.seg button{
  position:relative;z-index:1;padding:9px 18px;border-radius:980px;
  font-size:.9375rem;font-weight:500;color:var(--fg-2);white-space:nowrap;transition:color .3s var(--ease)
}
.seg button[aria-selected="true"]{color:var(--fg)}
.seg__thumb{
  position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:0;border-radius:980px;
  background:var(--seg-thumb);box-shadow:0 2px 8px -2px rgba(11,15,34,.22);
  transition:transform .5s var(--ease),width .5s var(--ease);
}
.tabpanel[hidden]{display:none}
.tabpanel.is-in{animation:panel .6s var(--ease-out)}
@keyframes panel{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.audience{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;background:var(--card);border-radius:var(--radius);padding:clamp(30px,5vw,64px)}
.audience h3{font-size:var(--fs-sub);line-height:1.1}
.audience p{color:var(--fg-2);font-size:var(--fs-intro);line-height:1.45}
.audience .glyph{width:clamp(96px,14vw,168px);height:clamp(96px,14vw,168px);stroke-width:1;color:var(--p);margin-inline:auto}
@media (max-width:734px){.audience{grid-template-columns:1fr}.audience .glyph{display:none}}

/* 19 CHECKLIST, STEPS, SPLIT ----------------------------------- */
/* Evidant: the four levels of a refinery, and the transformer toolbox. */
.levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;list-style:none;padding:0}
.levels li{position:relative;background:var(--card);border:1px solid var(--line-c);border-radius:18px;padding:22px 22px 24px;text-align:left}
.levels li:not(:last-child)::after{content:"";position:absolute;right:-12px;top:50%;width:8px;height:8px;border-top:2px solid var(--p);border-right:2px solid var(--p);transform:translateY(-50%) rotate(45deg)}
.levels .num{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;color:var(--fg-3)}
.levels h3{font-family:var(--font-head);font-weight:600;font-size:1.3125rem;letter-spacing:-.01em;margin:8px 0}
.levels p{margin:0;font-size:.9375rem;line-height:1.4;color:var(--fg-2)}
.tools{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;list-style:none;padding:0;text-align:left}
.tools li{background:var(--card);border:1px solid var(--line-c);border-radius:16px;padding:20px 22px}
.tools .tag{display:inline-block;font-family:var(--font-mono);font-size:.6875rem;color:var(--fg-3);border:1px solid var(--line-c);border-radius:20px;padding:2px 9px;margin-bottom:12px}
.tools h4{font-family:var(--font-head);font-weight:600;font-size:1.125rem;letter-spacing:-.01em;margin:0}
.tools p{margin:8px 0 0;font-size:.9375rem;line-height:1.4;color:var(--fg-2)}
.toolbox{margin-top:clamp(64px,7vw,110px)}
.audience__ask{margin-top:24px;text-align:center}
.audience__ask span{display:block;font-size:.875rem;color:var(--fg-3)}
.audience__ask q{display:block;font-family:var(--font-head);font-weight:600;font-size:1.25rem;line-height:1.3;letter-spacing:-.01em;margin-top:6px;color:var(--fg)}
@media (max-width:1100px){.tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.levels{grid-template-columns:1fr 1fr}.levels li:nth-child(2)::after{display:none}}
@media (max-width:560px){.levels,.tools{grid-template-columns:1fr}.levels li::after{display:none}}

.checks{display:grid;gap:18px}
/* The tick is positioned, not a grid cell: a grid item would turn every inline
   <a>, <strong> or <sup> in the text into a cell of its own and break the row. */
.checks li{position:relative;padding-left:42px;font-size:1.1875rem;line-height:1.4;color:var(--fg)}
.checks .glyph{position:absolute;left:0;top:1px;width:26px;height:26px;color:var(--link);stroke-width:2}
/* The site has no default inline-link style, so a link inside a check would
   read as plain text. An accent underline marks it without shouting. */
.checks a{color:inherit;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--link) 55%,transparent);transition:text-decoration-color .2s var(--ease)}
.checks a:hover{text-decoration-color:var(--link)}
.checks--2{grid-template-columns:1fr 1fr;gap:22px 48px}
@media (max-width:734px){.checks--2{grid-template-columns:1fr}}

.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:step}
.step{position:relative;background:var(--card);border-radius:var(--radius-sm);padding:26px 24px 30px}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--font-mono);font-size:.8125rem;font-weight:500;color:var(--fg-3)}
.step h3{font-size:1.15rem;line-height:1.25;margin-top:1.2rem;letter-spacing:-.01em}
.step p{margin-top:.5rem;font-size:.97rem;color:var(--fg-2)}
@media (max-width:1068px){.steps{grid-template-columns:repeat(3,1fr)}}
@media (max-width:734px){.steps{grid-template-columns:1fr}}

.stack-cards{display:grid;gap:14px}
.stack-cards .card{padding:clamp(24px,2.6vw,32px)}
.stack-cards .card .more{padding-top:1rem}

/* Vertical timeline (e.g. implementation days) */
.timeline{position:relative;display:grid;gap:26px;padding-left:34px}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--line-c)}
.timeline li{position:relative}
.timeline li::before{content:"";position:absolute;left:-34px;top:5px;width:16px;height:16px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--p)}
.timeline li:last-child::before{background:var(--p)}
.timeline span{font-family:var(--font-mono);font-size:.8125rem;color:var(--p)}
.timeline h3{font-size:1.3rem;margin-top:.25rem;letter-spacing:-.01em}
.timeline p{color:var(--fg-2);margin-top:.25rem}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,96px);align-items:center}
.split--top{align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}

.cards-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--card);border-radius:var(--radius);padding:clamp(28px,3.4vw,44px);display:flex;flex-direction:column}
.card h3{font-size:var(--fs-card);line-height:1.16}
.card p{margin-top:.7rem;color:var(--fg-2)}
.card .more{margin-top:auto;padding-top:1.4rem}
.card .card__label{font-size:.8125rem;font-weight:600;color:var(--p);margin-bottom:.6rem;font-family:var(--font-head)}
/* Wide card that links to a sibling product, with a cropped render on the right */
.family-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding:0 0 0 clamp(28px,4vw,48px);overflow:hidden;min-height:300px;transition:transform .5s var(--ease)}
.family-card:hover{transform:translateY(-3px)}
.family-card > div:first-child{padding-block:clamp(28px,4vw,44px)}
.family-card .more{padding-top:1.2rem}
.family-card__art{align-self:end;position:relative;height:100%;min-height:260px}
.family-card__art .device{position:absolute;width:150%;left:0;top:14%}
@media (max-width:734px){.family-card{grid-template-columns:1fr;padding:0}.family-card > div:first-child{padding:28px 26px 0}.family-card__art{min-height:220px}}
.tile-card{min-height:340px;transition:background-color .3s var(--ease),transform .5s var(--ease)}
.tile-card:hover{background:var(--card-2);transform:translateY(-3px)}
.card ul.dots{margin-top:1rem;display:grid;gap:.45rem;color:var(--fg-2)}
.card ul.dots li{position:relative;padding-left:1.1em}
.card ul.dots li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--p)}
@media (max-width:1068px){.cards-3{grid-template-columns:1fr 1fr}}
@media (max-width:734px){.cards-2,.cards-3{grid-template-columns:1fr}}


/* 20 LINEUP ---------------------------------------------------- */
.lineup{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:48px 28px}
.lineup--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.lineup--3{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(16px,1.8vw,24px);row-gap:clamp(16px,1.8vw,24px)}
.lineup__item{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--card);border-radius:var(--radius);
  padding:clamp(22px,2.4vw,34px) clamp(18px,2vw,30px) clamp(26px,2.8vw,38px);
}
.lineup__art{width:100%;aspect-ratio:10/7;display:flex;align-items:flex-end;justify-content:center;margin-bottom:26px}
.lineup__art .device{width:100%}
.lineup__name{font-size:1.5rem;letter-spacing:-.015em}
.lineup__desc{margin-top:.5rem;color:var(--fg-2);font-size:1rem}
.lineup__cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:1.2rem}
.lineup__specs{width:100%;margin-top:1.6rem;padding-top:1.6rem;border-top:1px solid var(--line-c);display:grid;gap:14px}
.lineup__specs li{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:start;gap:12px;font-size:.9375rem;color:var(--fg-2);line-height:1.35;text-align:left}
.lineup__specs .glyph{width:20px;height:20px;margin-top:1px;color:var(--c,var(--navy));stroke-width:1.8}
.lineup--compact .lineup__specs{display:none}
.lineup__swatch{width:10px;height:10px;border-radius:50%;background:var(--c);margin:0 auto 12px}
/* Keep rows level across columns: descriptions and spec lines get room for their longest variant. */
@media (min-width:901px){
  .lineup__desc{min-height:5em}
  .lineup__specs li{min-height:3.8em}
}
@media (max-width:1180px){.lineup,.lineup--4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.lineup,.lineup--4{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:20px;padding:0 var(--gutter) 12px;margin-inline:calc(-1 * var(--gutter));scrollbar-width:none}
  .lineup__item{flex:0 0 min(300px,74vw);scroll-snap-align:center}}

/* Event log → process map (process mining explainer) */
.eventlog__table{display:grid;grid-template-columns:auto 1fr auto;column-gap:18px;margin-top:12px;font-family:var(--font-mono);font-size:.8125rem;color:var(--fg)}
.eventlog__table span{padding:9px 0;border-top:1px solid var(--line-c)}
.eventlog__table span:nth-child(-n+3){border-top:0;color:var(--fg-3);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase}
.eventlog__arrow{display:grid;place-items:center;margin:16px 0 14px;color:var(--p)}
.eventlog__arrow .glyph{width:26px;height:26px;stroke-width:2.2}
.eventlog__map{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.eventlog__map span{padding:8px 13px;border-radius:40px;background:color-mix(in srgb,var(--p) 14%,#fff);color:color-mix(in srgb,var(--p) 65%,#000);font-size:.8125rem;font-weight:600;white-space:nowrap}
.eventlog__map i{width:16px;height:2px;background:var(--p)}
.eventlog__map i.slow{background:var(--p-diligent);height:3px}

/* 21 FLOW DIAGRAM ----------------------------------------------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
.flow__stage{position:relative;background:var(--card);border-radius:var(--radius-sm);padding:26px 24px}
.flow__stage:not(:last-child)::after{
  content:"";position:absolute;right:-13px;top:50%;width:10px;height:10px;z-index:2;
  border-top:2px solid var(--fg-3);border-right:2px solid var(--fg-3);transform:translateY(-50%) rotate(45deg)
}
.flow__label{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3)}
.flow__stage h3{font-size:1.3rem;margin-top:.7rem}
.flow__stage p{font-size:.95rem;color:var(--fg-2);margin-top:.4rem}
.flow__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:1rem}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 8px;border-radius:40px;background:var(--card-2);font-size:.8125rem;font-weight:500;color:var(--fg)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--c,var(--yellow))}
a.chip:hover{box-shadow:inset 0 0 0 1px var(--line-c)}
@media (max-width:900px){.flow{grid-template-columns:1fr 1fr}.flow__stage:nth-child(2)::after{display:none}}
@media (max-width:560px){.flow{grid-template-columns:1fr}.flow__stage::after{display:none}}

/* 22 FINAL CTA -------------------------------------------------- */
.final{position:relative;overflow:hidden;text-align:center;padding-block:clamp(110px,14vw,200px)}
.final__title{font-size:var(--fs-hero);line-height:1;letter-spacing:-.035em}
.final__text{margin:1.4rem auto 0;max-width:34em}
.final .btn-row{justify-content:center;margin-top:2rem}
.final__rings{position:absolute;left:50%;top:50%;width:min(1300px,160vw);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;opacity:.5}
.final__rings circle{fill:none;stroke:rgba(255,255,255,.06);stroke-width:1}
.final__rings .dot{fill:var(--yellow);opacity:.12;stroke:none}
.final > .wrap{position:relative}

/* 23 FORMS ----------------------------------------------------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .full{grid-column:1 / -1}
.field{position:relative}
.field input,.field textarea,.field select{
  width:100%;font:inherit;font-size:1.0625rem;color:var(--ink);
  background:#fff;border:1px solid #c9cdd9;border-radius:12px;
  padding:26px 16px 10px;min-height:58px;transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;appearance:none;
}
.field textarea{min-height:150px;resize:vertical}
.field label{position:absolute;left:17px;top:18px;font-size:1.0625rem;color:var(--ink-3);pointer-events:none;transform-origin:0 0;transition:transform .2s var(--ease),color .2s}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(33,44,86,.14)}
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{transform:translateY(-10px) scale(.72)}
.radio-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.radio-row legend{width:100%;margin-bottom:8px;color:var(--ink-2)}
.radio-row label{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:40px;border:1px solid #c9cdd9;cursor:pointer}
.radio-row input{accent-color:var(--navy)}
.form .btn{justify-self:start}
.form-note{font-size:var(--fs-small);color:var(--ink-3)}
@media (max-width:640px){.form{grid-template-columns:1fr}}
.radio-row{border:0}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.contact-side{display:grid;gap:30px;padding-top:12px}
.contact-item{display:grid;grid-template-columns:28px 1fr;gap:16px}
.contact-item .glyph{width:26px;height:26px;color:var(--navy);margin-top:2px}
.contact-item h3{font-size:1.15rem;letter-spacing:-.01em}
.contact-item p{color:var(--ink-2);margin-top:.25rem}
.contact-item .more{margin-top:.5rem}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.newsletter{display:flex;flex-wrap:wrap;gap:12px}
.newsletter input[type=email]{flex:1 1 240px;min-height:52px;padding:0 20px;border-radius:980px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:1.0625rem}
.newsletter input::placeholder{color:#a9aec6}
.newsletter input:focus{outline:0;border-color:var(--yellow)}
.newsletter .btn{min-height:52px}
.newsletter .form-status{flex-basis:100%}

/* A booked slot is worth more than a form submission, so the contact page
   leads with the agenda. The band carries brand yellow at full strength: navy
   on #fcc00a is 8.1:1, which white never manages. */
.planband{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(16px,2.4vw,32px);
  background:var(--yellow);color:var(--navy);
  border-radius:var(--radius);padding:clamp(24px,3vw,36px) clamp(24px,3.4vw,44px);
  --btn-bg:var(--navy);--btn-fg:#fff;--btn-bg-h:var(--navy-2);
}
.planband > .glyph{width:clamp(30px,3vw,40px);height:clamp(30px,3vw,40px);stroke-width:1.6}
.planband h2{font-size:var(--fs-card);line-height:1.15;letter-spacing:-.015em}
.planband p{margin-top:.35rem;color:color-mix(in srgb,var(--navy) 80%,transparent);font-size:1.0625rem;line-height:1.45}
@media (max-width:734px){
  .planband{grid-template-columns:1fr;row-gap:16px}
  .planband .btn{justify-self:start;margin-top:4px}
}

/* Microsoft Bookings, embedded on the appointment page. The booking flow
   scrolls inside the frame and never reports its height to us, so the frame
   gets a fixed one instead of growing with its content. */
.booking{position:relative;border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:0 20px 60px -24px rgba(0,0,0,.45);color:var(--ink);--fg-2:var(--ink-2);--btn-bg:var(--navy);--btn-fg:#fff;--btn-bg-h:var(--navy-2)}
.booking__standby{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:18px;padding:var(--gutter);text-align:center;color:var(--fg-2)}
/* No background on the frame itself: the Bookings page brings its own white and
   covers the standby layer, while a blocked frame leaves it showing. */
.booking iframe{position:relative;z-index:1;display:block;width:100%;height:clamp(720px,88vh,1040px);border:0}
.booking__note{margin-top:1.2rem;color:var(--fg-2);font-size:.9375rem;line-height:1.5}
.booking__note a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb,var(--link) 55%,transparent)}
.booking__note a:hover{text-decoration-color:var(--link)}

/* Partner logos on a dark section: each sits on its own white plate, so both
   brands keep their own colours instead of being recoloured to fit. */
.logoplate{display:inline-flex;align-items:center;justify-content:center;height:clamp(56px,5.5vw,70px);padding:0 clamp(16px,2vw,22px);border-radius:14px;background:#fff}
.logoplate img{display:block;width:auto;height:clamp(24px,2.4vw,32px)}

/* 24 FOOTER ---------------------------------------------------- */
.gf{background:var(--grey);color:var(--ink-2);font-size:.75rem;line-height:1.4}
.gf__inner{max-width:calc(1024px + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.gf__notes{padding:18px 0 10px;border-bottom:1px solid var(--line);color:var(--ink-3)}
.gf__notes p{margin-bottom:.8em}
.gf__notes ol{list-style:decimal;padding-left:1.2em}
.gf__notes li{margin-bottom:.6em}
.gf__crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:14px 0;border-bottom:1px solid var(--line)}
.gf__crumbs img{width:16px;height:16px}
.gf__crumbs a{color:var(--ink-2)}
.gf__crumbs a:hover{color:var(--ink);text-decoration:underline}
.gf__crumbs span{color:var(--ink)}
.gf__crumbs .sep{width:6px;height:6px;border-top:1px solid var(--ink-3);border-right:1px solid var(--ink-3);transform:rotate(45deg)}
.gf__dir{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;padding:22px 0 30px}
.gf__col summary{list-style:none;font-weight:600;color:var(--ink);margin-bottom:10px;cursor:default}
.gf__col summary::-webkit-details-marker{display:none}
.gf__col li{margin-bottom:8px}
.gf__col a{color:var(--ink-2)}
.gf__col a:hover{color:var(--ink);text-decoration:underline}
.gf__more{padding-bottom:14px;border-bottom:1px solid var(--line)}
.gf__more a{color:var(--navy);text-decoration:underline}
.gf__legal{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:14px 0 26px}
.gf__legal ul{display:flex;flex-wrap:wrap}
.gf__legal li+li{border-left:1px solid var(--line);margin-left:9px;padding-left:9px}
.gf__legal a:hover{color:var(--ink);text-decoration:underline}
.gf__locale{margin-left:auto;color:var(--ink-2)}
@media (max-width:833px){
  .gf__dir{grid-template-columns:1fr;gap:0;padding:12px 0 18px}
  .gf__col{border-bottom:1px solid var(--line)}
  .gf__col summary{cursor:pointer;padding:12px 0;margin:0;display:flex;justify-content:space-between}
  .gf__col summary::after{content:"";width:7px;height:7px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:rotate(45deg);margin:3px 4px 0 0;transition:transform .3s var(--ease)}
  .gf__col[open] summary::after{transform:rotate(-135deg);margin-top:7px}
  .gf__col ul{padding:0 0 12px 12px}
  .gf__locale{margin-left:0}
}

/* 25 MOTION ------------------------------------------------------ */
.js [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js [data-reveal="fade"]{transform:none}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal][data-delay="1"]{transition-delay:.1s}
.js [data-reveal][data-delay="2"]{transition-delay:.2s}
.js [data-reveal][data-delay="3"]{transition-delay:.3s}

/* Moving parts inside renders */
.flowline{stroke-dasharray:6 10;animation:dash 1.6s linear infinite}
@keyframes dash{to{stroke-dashoffset:-32}}
.pulse{animation:pulse 2.4s var(--ease) infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ?qa freezes the site's own motion so screenshots are deterministic. The
   delivered product visuals (section 33) drive themselves and reach their own
   end state; freezing them leaves the 3rdRisk canvas empty, so .viz-embed and
   everything in it is left alone. */
.qa *:not(.viz-embed,.viz-embed *),
.qa *:not(.viz-embed,.viz-embed *)::before,
.qa *:not(.viz-embed,.viz-embed *)::after{transition:none!important;animation:none!important}
.qa .phero__art{transform:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1;transform:none}
  .js .phero__art{transform:none}
  .js .fan:not(.is-in) .device{opacity:1;transform:none}
  .js .scrub .w{color:var(--fg)}
}

/* 26 UTILITIES --------------------------------------------------- */
.hide-sm{display:initial}
@media (max-width:734px){.hide-sm{display:none}}
.divider{height:1px;background:var(--line-c);border:0}
.footnote-ref{font-size:.6em;vertical-align:super;line-height:0;color:var(--fg-3);margin-left:1px}
@media print{.gn,.ln,.gn-mobile,.gn-scrim{display:none}}

/* 27 INTERACTIVE VISUALS ------------------------------------------ */
/* Shared shell for the product showcases driven by js/viz.js.
   Every visual renders its finished state under reduced motion or ?qa. */
.viz{position:relative;border-radius:var(--radius);background:var(--card);overflow:hidden;box-shadow:0 0 0 1px var(--line-c);color:var(--fg)}
.viz__bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-c)}
.viz__title{display:flex;align-items:center;gap:10px;margin-right:auto;font-family:var(--font-mono);font-size:.8125rem;color:var(--fg-2)}
.viz__title i{width:9px;height:9px;border-radius:50%;background:var(--p)}
.vbtn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:34px;background:var(--seg);color:var(--fg);font-size:.875rem;font-weight:500;white-space:nowrap;transition:background-color .2s,color .2s,opacity .2s,box-shadow .2s}
.vbtn:hover{background:var(--seg-thumb)}
.vbtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vbtn--primary{background:var(--fg);color:var(--bg)}
.vbtn--primary:hover{background:var(--fg);box-shadow:0 0 0 4px color-mix(in srgb,var(--fg) 18%,transparent)}
.vbtn[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.vbtn:disabled{opacity:.4;pointer-events:none}
.viz__body{display:grid;grid-template-columns:minmax(0,1fr) 340px}
.viz__stage{position:relative;min-width:0}
.viz__side{display:flex;flex-direction:column;gap:10px;padding:22px;border-left:1px solid var(--line-c);min-width:0}
.viz__side h3{font-size:1.2rem;letter-spacing:-.01em}
.viz__hint{font-size:.8125rem;color:var(--fg-3);line-height:1.45}
.viz__note{margin-top:14px;font-size:.75rem;color:var(--fg-3);text-align:center}
.js-only{display:none}
.js .js-only{display:revert}
@media (max-width:900px){.viz__body{grid-template-columns:1fr}.viz__side{border-left:0;border-top:1px solid var(--line-c)}}
.viz__swipe{display:none}
@media (max-width:734px){
  .viz__scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .viz__scroll::-webkit-scrollbar{display:none}
  .viz__scroll > svg{min-width:var(--min,700px)}
  .viz__swipe{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 12px;font-size:.75rem;color:var(--fg-3)}
  .viz__swipe::before,.viz__swipe::after{content:"";width:18px;height:1px;background:currentColor;opacity:.5}
  .kviz__stage{min-height:0}
  .er__src,.er__out{overflow-x:auto}
  .er .vtable{min-width:440px}
}

.vtable{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:.75rem}
.vtable th{padding:6px 8px 7px 0;border-bottom:1px solid var(--line-c);text-align:left;font-weight:500;color:var(--fg-3);white-space:nowrap}
.vtable td{padding:8px 8px 8px 0;border-bottom:1px solid var(--line-c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.vtable td.num{text-align:right}
.vtable tr.in{animation:vrow .45s var(--ease-out) both}
.vtable tr.hit td{color:var(--orange)}
@keyframes vrow{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.vstat{display:flex;align-items:baseline;gap:8px}
.vstat b{font-family:var(--font-head);font-size:2rem;font-weight:600;letter-spacing:-.03em;line-height:1}
.vstat span{font-size:.8125rem;color:var(--fg-2)}

/* Diligent risk matrix ----------------------------------------------- */
.rm{position:relative;padding:26px 26px 44px 58px}
.rm__grid{position:relative;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:6px;aspect-ratio:1.28}
.rm__cell{border-radius:10px;transition:background-color .6s}
.rm__dots{position:absolute;inset:26px 26px 44px 58px}
.rm__dot{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink);font:600 .75rem var(--font-body);box-shadow:0 2px 8px -2px rgba(11,15,34,.35),inset 0 0 0 2px var(--c,#b9bdcc);transition:left .9s var(--ease-out),top .9s var(--ease-out),transform .2s var(--ease),box-shadow .2s}
.rm__dot:hover,.rm__dot.is-selected{transform:scale(1.18);z-index:2}
.rm__dot.is-selected{box-shadow:0 0 0 4px color-mix(in srgb,var(--p) 35%,transparent),inset 0 0 0 2px var(--c)}
.rm__axis{position:absolute;font-size:.75rem;color:var(--fg-3)}
.rm__axis--x{left:58px;right:26px;bottom:14px;text-align:center}
.rm__axis--y{left:14px;top:26px;bottom:44px;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center}
.rm__list{display:grid;gap:8px;margin-top:4px}
.rm__list button{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:var(--card-2);text-align:left;font-size:.85rem}
.rm__list button:hover{box-shadow:inset 0 0 0 1px var(--line-c)}
.rm__list em{font-style:normal;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--c);font-size:.7rem;font-weight:600;color:var(--ink)}
.rm__list small{font-family:var(--font-mono);color:var(--fg-3)}
.rm__score{display:flex;gap:10px;align-items:center;font-size:.85rem;color:var(--fg-2)}
.rm__score i{font-style:normal;padding:3px 9px;border-radius:20px;background:var(--card-2);font-family:var(--font-mono);color:var(--fg)}
.rm__controls{display:grid;gap:6px;font-size:.85rem}
.rm__controls li{display:flex;gap:8px;align-items:center}
.rm__controls li::before{content:"";width:6px;height:6px;border-radius:50%;background:#2f9e5f}

/* Document scan (AI) ---------------------------------------------------- */
.docscan{position:relative;width:min(240px,100%);aspect-ratio:.78;margin-inline:auto;padding:22px 20px;border-radius:14px;background:#fff;box-shadow:0 18px 40px -18px rgba(11,15,34,.35);overflow:hidden}
.docscan i{display:block;height:7px;margin-bottom:11px;border-radius:4px;background:#e6e8ef;position:relative}
.docscan i:nth-child(3n){width:78%}
.docscan i:nth-child(4n){width:62%}
.docscan i.hl{background:#e6e8ef}
.docscan i.hl::after{content:"";position:absolute;inset:-3px -4px;border-radius:5px;background:color-mix(in srgb,var(--c,var(--p)) 38%,transparent);transform-origin:0 50%;transform:scaleX(0);animation:dshl 6s var(--ease) infinite;animation-delay:var(--d,0s)}
.docscan::after{content:"";position:absolute;left:0;right:0;top:-20%;height:18%;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--p) 26%,transparent),transparent);animation:dscan 6s linear infinite}
.docscan b{position:absolute;right:-6px;padding:3px 8px;border-radius:12px;background:var(--c,var(--p));color:#fff;font:600 .62rem var(--font-body);opacity:0;animation:dsbadge 6s var(--ease) infinite;animation-delay:var(--d,0s)}
@keyframes dscan{0%{top:-20%}60%,100%{top:105%}}
@keyframes dshl{0%,12%{transform:scaleX(0)}22%,88%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes dsbadge{0%,18%{opacity:0;transform:translateX(8px)}26%,88%{opacity:1;transform:none}100%{opacity:0}}
.qa .docscan::after{display:none}
.qa .docscan i.hl::after,.qa .docscan b{animation:none;transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){.docscan::after{display:none}.docscan i.hl::after,.docscan b{animation:none;transform:none;opacity:1}}

/* =============================================================
   28 IMPLEMENTATION INCLUDED + TRAINING (product pages)
   ============================================================= */
/* Hero label under the buttons */
.incl-pill{display:inline-flex;align-items:center;gap:8px;margin-top:1.1rem;padding:7px 14px 7px 10px;border-radius:40px;background:color-mix(in srgb,var(--yellow) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--yellow) 55%,transparent);color:var(--fg);font-size:.875rem;font-weight:500;transition:background-color .2s}
.incl-pill:hover{background:color-mix(in srgb,var(--yellow) 26%,transparent)}
.incl-pill .glyph{width:18px;height:18px;color:#d9a300;stroke-width:2.2}
.theme-dark .incl-pill .glyph,.theme-navy .incl-pill .glyph{color:var(--yellow)}

/* Band before the lineup */
.included__panel{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:stretch;padding:clamp(32px,5vw,72px);border-radius:var(--radius);background:var(--navy);color:var(--fg);position:relative;overflow:hidden}
.included__panel::before{content:"";position:absolute;right:-12%;top:-40%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(252,192,10,.16),transparent 65%);pointer-events:none}
.included__main,.included__training{position:relative}
.included__steps{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin:28px 0 30px}
.included__steps li{display:flex;align-items:center;gap:12px;font-size:1rem;color:var(--fg)}
.included__steps .glyph{width:22px;height:22px;color:var(--yellow);flex:none}
.included__training{display:flex;flex-direction:column;gap:10px;padding:clamp(24px,3vw,36px);border-radius:calc(var(--radius) - 8px);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.included__training > .glyph{width:34px;height:34px;color:var(--yellow);stroke-width:1.6;margin-bottom:6px}
.included__kicker{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--yellow)}
.included__training h3{font-family:var(--font-head);font-size:clamp(1.35rem,2vw,1.7rem);letter-spacing:-.015em;line-height:1.15}
.included__training p:not(.included__kicker){color:var(--fg-2);line-height:1.5}
.included__formats{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.included__formats li{padding:5px 12px;border-radius:20px;background:rgba(255,255,255,.08);font-size:.8125rem;color:var(--fg)}
.included__training .more{margin-top:auto;padding-top:10px}
@media (max-width:900px){
  .included__panel{grid-template-columns:1fr}
}
@media (max-width:560px){
  .included__steps{grid-template-columns:1fr}
}

/* =============================================================
   29 TEXT PAGES (privacy, legal, thank-you pages)
   The text comes from WordPress; this is its typography.
   ============================================================= */
.text-hero{padding-bottom:clamp(20px,3vw,36px)}
.text-body{padding-top:0}
.prose{font-size:1.0625rem;line-height:1.7;color:var(--fg-2);overflow-wrap:anywhere}
.prose > :first-child{margin-top:0}
.prose p,.prose ul,.prose ol,.prose table,.prose blockquote,.prose figure{margin-top:1em}
.prose h2,.prose h3,.prose h4,.prose h5,.prose h6{font-family:var(--font-head);font-weight:600;color:var(--fg);letter-spacing:-.012em;line-height:1.3;margin-top:2.1em}
.prose h2{font-size:clamp(1.4rem,2.2vw,1.7rem)}
.prose h3{font-size:clamp(1.2rem,1.8vw,1.4rem)}
.prose h4,.prose h5,.prose h6{font-size:1.0625rem;margin-top:1.6em}
.prose h2 + *,.prose h3 + *,.prose h4 + *,.prose h5 + *,.prose h6 + *{margin-top:.5em}
.prose a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.prose strong,.prose b{color:var(--fg);font-weight:600}
.prose ul,.prose ol{padding-left:1.3em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li + li{margin-top:.35em}
.prose li::marker{color:var(--fg-3)}
.prose img{height:auto;border-radius:16px}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem}
.prose th,.prose td{padding:10px 8px;border-bottom:1px solid var(--line-c);text-align:left;vertical-align:top}
.prose blockquote{padding-left:1em;border-left:3px solid var(--yellow)}
.prose hr{margin:2em 0;border:0;border-top:1px solid var(--line-c)}
/* Buttons that come along with the text (e.g. document downloads) */
.prose a[role="button"],.prose a.fl-button,.prose .wp-block-button__link{display:inline-flex;align-items:center;min-height:40px;margin:.35em .5em 0 0;padding:0 18px;border-radius:40px;background:var(--navy);color:#fff;font-size:.9375rem;font-weight:500;text-decoration:none;transition:box-shadow .2s}
.prose a[role="button"]:hover,.prose a.fl-button:hover,.prose .wp-block-button__link:hover{box-shadow:0 0 0 4px color-mix(in srgb,var(--navy) 18%,transparent)}

/* =============================================================
   30 VIND EEN MATCH (keuzehulp) + homepage teaser
   ============================================================= */
.match-page{min-height:calc(100vh - var(--gn-h));padding-block:clamp(56px,8vw,112px)}
.match{max-width:880px;margin-inline:auto}
.match__start{text-align:center}
.match__start .t-intro{max-width:32em;margin-inline:auto}
.match__meta{margin-top:14px;font-size:.875rem;color:var(--fg-3)}
.match__lineup{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:clamp(40px,5vw,64px);font-size:.875rem;color:var(--fg-2)}
.match__lineup li{display:flex;align-items:center;gap:8px}
.match__lineup .glyph{width:22px;height:22px;color:var(--c)}
.match .is-entering{animation:matchIn .5s var(--ease-out) both}
@keyframes matchIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Question screen */
.match__top{display:flex;align-items:center;justify-content:space-between;min-height:32px}
.match__back{display:inline-flex;align-items:center;gap:4px;font-size:.9375rem;color:var(--link)}
.match__back .glyph{width:16px;height:16px}
.match__back[hidden]{display:none}
.match__count{margin-left:auto;font-size:.875rem;color:var(--fg-3)}
.match__progress{height:4px;margin-top:10px;border-radius:4px;background:var(--line-c);overflow:hidden}
.match__progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--navy),var(--yellow));transition:width .5s var(--ease-out)}
.match__q{margin-top:clamp(36px,5vw,56px);font-family:var(--font-head);font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:600;letter-spacing:-.022em;line-height:1.12;text-align:center;text-wrap:balance;outline:none}
.match__hint{margin-top:10px;text-align:center;color:var(--fg-3)}
.match__options{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:clamp(28px,4vw,44px)}
.match__opt{position:relative;display:flex;align-items:center;gap:14px;min-height:64px;padding:16px 48px 16px 18px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-c);color:var(--fg);font-size:1.0625rem;line-height:1.3;text-align:left;transition:box-shadow .2s,background-color .2s,transform .2s var(--ease)}
.match__opt:hover{box-shadow:inset 0 0 0 1.5px var(--navy);transform:translateY(-1px)}
.match__opt .glyph{width:26px;height:26px;color:var(--navy);flex:none}
.match__opt::after{content:"";position:absolute;right:16px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-c);transition:background-color .2s,box-shadow .2s}
.match__opt[aria-pressed="true"]{background:color-mix(in srgb,var(--yellow) 12%,#fff);box-shadow:inset 0 0 0 2px var(--navy)}
.match__opt[aria-pressed="true"]::after{background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:none}
.match__opt:disabled{opacity:.4;cursor:default;transform:none;box-shadow:inset 0 0 0 1.5px var(--line-c)}
.match__options--chips{display:flex;flex-wrap:wrap;justify-content:center}
.match__options--chips .match__opt{min-height:52px;padding:12px 44px 12px 20px;border-radius:40px}
.match__next{display:flex;justify-content:center;margin-top:28px}
.match__next .btn:disabled{opacity:.35;pointer-events:none}

/* Result */
.match__result .t-eyebrow{color:var(--fg-3)}
.match__winner{display:flex;align-items:center;gap:20px;margin-top:6px}
.match__badge{display:grid;place-items:center;width:clamp(64px,8vw,84px);aspect-ratio:1;border-radius:22px;background:color-mix(in srgb,var(--c) 14%,#fff);flex:none}
.match__badge .glyph{width:44%;height:44%;color:var(--c);stroke-width:1.6}
.match__name{font-family:var(--font-head);font-size:clamp(2.2rem,4.6vw,3.4rem);font-weight:600;letter-spacing:-.025em;line-height:1.05;outline:none}
.match__line{margin-top:4px;font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--fg-2)}
.match__module{margin-top:18px;color:var(--fg-2)}
.match__module a{color:var(--link);font-weight:500}
.match__sub{margin-top:clamp(32px,4vw,44px);font-family:var(--font-head);font-size:1.15rem;font-weight:600;letter-spacing:-.01em}
.match__why{display:grid;gap:10px;margin-top:14px}
.match__why li{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;font-size:1.0625rem;color:var(--fg)}
.match__why .glyph{width:22px;height:22px;color:#1a7f37;stroke-width:2}
.match__pair{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start;margin-top:22px;padding:18px 20px;border-radius:18px;background:var(--grey)}
.match__pair .glyph{width:26px;height:26px;color:var(--c)}
.match__pair p{color:var(--fg-2);line-height:1.5}
.match__pair strong{color:var(--fg)}
.match__rank{display:grid;gap:8px;margin-top:14px}
.match__rank li{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center;font-size:.9375rem;color:var(--fg-2)}
.match__rank i{display:block;height:10px;border-radius:10px;background:var(--line-c);overflow:hidden}
.match__rank b{display:block;height:100%;border-radius:inherit;background:color-mix(in srgb,var(--c) 45%,#fff);animation:matchBar .9s var(--ease-out) both}
.match__rank li.is-win{color:var(--fg);font-weight:600}
.match__rank li.is-win b{background:var(--c)}
.match__rank li:nth-child(2) b{animation-delay:.08s}.match__rank li:nth-child(3) b{animation-delay:.16s}.match__rank li:nth-child(4) b{animation-delay:.24s}.match__rank li:nth-child(5) b{animation-delay:.32s}.match__rank li:nth-child(6) b{animation-delay:.4s}
@keyframes matchBar{from{transform:scaleX(0);transform-origin:left}to{transform:none;transform-origin:left}}
.match__included{display:grid;gap:10px;margin-top:clamp(28px,4vw,40px);padding:20px 22px;border-radius:18px;background:color-mix(in srgb,var(--yellow) 12%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--yellow) 45%,transparent)}
.match__included p{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;color:var(--fg-2);line-height:1.5}
.match__included strong{color:var(--fg)}
.match__included .glyph{width:22px;height:22px;color:#b98a00;stroke-width:2}
.match__again{display:inline-flex;align-items:center;gap:8px;font-size:.9375rem;color:var(--link)}
.match__again .glyph{width:16px;height:16px}
.match__note{margin-top:18px;font-size:.875rem;color:var(--fg-3)}
.qa .match .is-entering,.qa .match__rank b{animation:none}
@media (prefers-reduced-motion:reduce){.match .is-entering,.match__rank b{animation:none}}
@media (max-width:600px){
  .match__options{grid-template-columns:1fr}
  .match__rank li{grid-template-columns:110px 1fr;font-size:.875rem}
  .match__winner{gap:14px}
}

/* Homepage teaser: a question card as it appears in the test */
.tile--match{min-height:0;padding-bottom:clamp(40px,4.5vw,56px)}
.match-teaser{width:min(100%,600px);margin-top:clamp(32px,4vw,48px);padding:24px 24px 26px;border-radius:24px;background:#fff;box-shadow:0 30px 60px -30px rgba(20,26,51,.28),0 0 0 1px var(--line-c);text-align:left}
.match-teaser__top{display:flex;justify-content:space-between;font-size:.8125rem;color:var(--fg-3)}
.match-teaser__bar{height:4px;margin-top:8px;border-radius:4px;background:var(--line-c);overflow:hidden}
.match-teaser__bar span{display:block;width:33%;height:100%;background:linear-gradient(90deg,var(--navy),var(--yellow))}
.match-teaser__q{margin-top:20px;font-family:var(--font-head);font-size:1.3rem;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.match-teaser__opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.match-teaser__opts span{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;box-shadow:inset 0 0 0 1.5px var(--line-c);font-size:.875rem;color:var(--ink)}
.match-teaser__opts .glyph{width:20px;height:20px;color:var(--navy);flex:none}
.match-teaser__opts .is-on{background:color-mix(in srgb,var(--yellow) 12%,#fff);box-shadow:inset 0 0 0 2px var(--navy)}
@media (max-width:480px){.match-teaser__opts{grid-template-columns:1fr}}


/* 31 HOMEPAGE HERO SCENE ------------------------------------------- */
/* Someone at a desk; scrolling moves the camera into the monitor and plays
   three acts on the screen: raw data, workflow, dashboard. Geometry (--mx…,
   --uw/--uh, --kk) and progress (--z, --a1…--a3, --g2, --g3) come from
   modules.desk in js/viz.js. Defaults below are the finished, still state, so
   no-JS, ?qa and prefers-reduced-motion all get a normal hero. */
.hs{overflow:visible;--z:0;--copy:1;--a1:0;--a2:0;--a3:1;--g2:1;--g3:1;--kk:1;--t:none;padding:0}
.hs__stage{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;min-height:clamp(600px,52vw,760px);padding:clamp(34px,4vw,50px) var(--gutter) clamp(58px,8vh,84px);overflow:hidden}
.hs__copy{display:flex;flex-direction:column;align-items:center;width:100%;z-index:2;opacity:var(--copy);transform:translate3d(0,calc((var(--copy) - 1) * 46px),0)}
.hs.is-inside .hs__copy{pointer-events:none}
.hs__scene{position:relative;z-index:1;flex:1 1 auto;width:100%;min-height:200px;margin-top:clamp(10px,1.8vw,26px)}
.hs .tile__name{font-size:clamp(2.1rem,4.4vw,3.6rem)}
.hs .tile__sub{font-size:clamp(1.05rem,1.7vw,1.35rem);max-width:44ch}
.hs .proof{margin-top:clamp(18px,2.2vw,26px);padding-top:clamp(14px,1.8vw,20px)}
/* Phase 1: the section is taller than the screen and the stage inside it
   sticks, so scrolling scrubs the camera into the monitor. Only with JS and
   with motion on; otherwise this is a plain hero. */
@media (prefers-reduced-motion:no-preference){
  .js .hs{height:200vh}
  .js .hs--short{height:150vh}   /* a film in the middle of a page: less scroll before it lands */
  .js .hs__stage{position:sticky;top:var(--gn-h);height:calc(100svh - var(--gn-h));min-height:0}
}
.qa .hs{height:auto}
.qa .hs__stage{position:relative;height:auto;min-height:clamp(600px,52vw,760px)}
.no-js .hs__screen{display:none}

/* .hs--loop: the same scene without the cinema. No desk, no camera, no extra
   scroll height — the screen is simply the picture and the acts play on
   repeat while the section is on screen. modules.desk measures against the
   scene box instead of the stage for this variant. */
.hs--loop{height:auto!important}
.js .hs--loop .hs__stage{position:relative;top:auto;height:auto;min-height:0}
.hs--loop .hs__room{display:none}
/* The acts are absolutely positioned, so the screen cannot grow with them:
   the box has to be tall enough for the tallest act (the dashboard). */
.hs--loop .hs__scene{min-height:clamp(430px,42vw,560px)}
@media (max-width:734px){.hs--loop .hs__scene{min-height:470px}}
.hs--loop .hs__screen{left:0;top:0;width:100%;height:100%;transform:none;border-radius:clamp(16px,2vw,24px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 30px 70px rgba(0,0,0,.35)}
.hs--loop .hs__ui{transform:none}
.hs--loop .hs__caps{position:static;margin-top:clamp(14px,2vh,24px)}
.hs--loop .hs__caps::before{display:none}
.no-js .hs--loop .hs__screen{display:block}

/* Room: desk, person, monitor frame. Fades out once the camera is inside. */
.hs__room{position:absolute;inset:0;transform:var(--t);transform-origin:var(--ox,50%) var(--oy,30%);opacity:calc(1 - clamp(0,(var(--z) - .45) * 2.4,1))}
.hs.is-inside .hs__room{display:none}
.hs__svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.hs__bezel{position:absolute;left:calc(var(--mx,30%) - var(--bz,10px));top:calc(var(--my,8%) - var(--bz,10px));width:calc(var(--mw,40%) + var(--bz,10px) * 2);height:calc(var(--mh,25%) + var(--bz,10px) * 2);border-radius:calc(var(--bz,10px) + 6px);background:#10162f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 30px 70px rgba(0,0,0,.5)}
.hs__stand{position:absolute;left:calc(var(--mx,30%) + var(--mw,40%) / 2 - var(--sw,26px) / 2);top:calc(var(--my,8%) + var(--mh,25%) + var(--bz,10px));width:var(--sw,26px);height:var(--sh,60px);background:linear-gradient(#1b2346,#151c3c)}
.hs__foot{position:absolute;left:calc(var(--mx,30%) + var(--mw,40%) / 2 - var(--fw,120px) / 2);top:calc(var(--my,8%) + var(--mh,25%) + var(--bz,10px) + var(--sh,60px) - 6px);width:var(--fw,120px);height:12px;border-radius:6px;background:#1b2346}

/* The screen. At rest it is the monitor's glass; at the end of the camera move
   it is exactly the size of the stage, and .is-inside drops the transform. */
.hs__screen{position:absolute;left:var(--mx,30%);top:var(--my,8%);width:var(--mw,40%);height:var(--mh,25%);overflow:hidden;border-radius:4px;background:#0b1024;transform:var(--t);transform-origin:50% 50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.hs.is-inside .hs__screen{left:calc(var(--fx,0px) + var(--pad,0px));top:calc(var(--fy,0px) + var(--padt,0px));width:calc(var(--uw,100%) - var(--pad,0px) * 2);height:calc(var(--uh,100%) - var(--padt,0px) - var(--padb,0px));transform:none;border-radius:calc(var(--card,0) * 22px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 calc(var(--card,0) * 40px) calc(var(--card,0) * 90px) rgba(0,0,0,.4)}
.hs.is-inside .hs__ui{transform:scale(var(--kk2,1))}
.hs__ui{position:absolute;left:50%;top:50%;width:var(--uw,100%);height:var(--uh,100%);margin-left:calc(var(--uw,100%) / -2);margin-top:calc(var(--uh,100%) / -2);transform:scale(var(--kk));color:#e8ebf7;font-size:16px;text-align:left}
.hs__act{position:absolute;inset:0;pointer-events:none}
.dk1{opacity:var(--a1)}
.dk2{opacity:var(--a2)}
.dk3{opacity:var(--a3)}

/* Act 1: exports and spreadsheets, spread over the desktop. */
.dks{position:absolute;width:var(--w);border-radius:10px;background:#141a33;box-shadow:0 20px 44px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.09);overflow:hidden;transform:rotate(var(--r,0deg));transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.dks__bar{display:flex;align-items:center;gap:8px;padding:9px 11px;font-family:var(--font-mono);font-size:12px;color:#aab3d8;background:rgba(255,255,255,.05);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dks__bar i{width:7px;height:7px;border-radius:50%;background:var(--yellow);flex:none}
.dks__flag{position:absolute;right:9px;bottom:9px;padding:3px 9px;border-radius:999px;background:rgba(229,71,61,.26);color:#ffd2ce;font-family:var(--font-head);font-size:11px;font-weight:600}
.dks__flag--warn{background:rgba(243,120,55,.24);color:#ffdcc6}
.dks__grid{position:relative;display:block;padding-bottom:18px;font-family:var(--font-mono);font-size:10px;line-height:1.35;color:#b9c1e2}
.dks__row{display:grid;grid-template-columns:1fr 1.7fr 1.2fr .8fr;border-top:1px solid rgba(255,255,255,.07)}
.dks__row i{padding:4px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:normal}
.dks__row i:nth-child(3){text-align:right}
.dks__row--head{border-top:0;color:#7d87b4;background:rgba(255,255,255,.03)}
.dks__row .is-bad{background:rgba(229,71,61,.4);color:#ffd9d6;border-radius:2px;animation:dk-blink 2.4s ease-in-out infinite}
.dks__row .is-empty{box-shadow:inset 0 0 0 1.5px rgba(243,120,55,.85);border-radius:2px;animation:dk-blink-empty 3s ease-in-out infinite}
.dks__row .is-empty::before{content:"\00a0"}
@keyframes dk-blink{0%,52%{opacity:.3}60%,86%{opacity:1}100%{opacity:.3}}
@keyframes dk-blink-empty{0%,46%{opacity:.3}56%,84%{opacity:1}100%{opacity:.3}}
/* Two rows that turn out to be the same one. */
.dks__row.is-dup{background:rgba(243,120,55,.12);animation:dk-dup 3.2s ease-in-out infinite}
.dks__row.is-copy{animation-delay:.28s}
@keyframes dk-dup{0%,36%{background-color:rgba(243,120,55,.12)}52%,72%{background-color:rgba(243,120,55,.42)}100%{background-color:rgba(243,120,55,.12)}}
/* A row being read, top to bottom. */
.dks__scan{position:absolute;left:0;right:0;top:22px;height:21px;background:linear-gradient(90deg,rgba(252,192,10,.22),rgba(252,192,10,.04));animation:dk-scan 3.4s steps(4,end) infinite}
@keyframes dk-scan{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(84px);opacity:0}}
/* The cursor, walking from file to file. */
.dks__cursor{position:absolute;left:calc(var(--cx,34) * 1%);top:calc(var(--cy,40) * 1%);z-index:6;width:21px;height:21px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.55))}
.dks__cursor svg{width:100%;height:100%;fill:#fff;stroke:#0b1024;stroke-width:1.1;stroke-linejoin:round}
.dks__cursor::after{content:"";position:absolute;left:-12px;top:-10px;width:34px;height:34px;border-radius:50%;border:2px solid var(--yellow);opacity:var(--click,0);transform:scale(calc(.35 + (1 - var(--click,0)) * .85))}
.dks.is-focus{z-index:5;transform:rotate(var(--r,0deg)) scale(1.035);box-shadow:0 28px 64px rgba(0,0,0,.5),inset 0 0 0 1.5px color-mix(in srgb,var(--yellow) 50%,transparent)}
.dks--1{--w:25%;--r:-2.5deg;left:5%;top:15%}
.dks--2{--w:29%;--r:1.5deg;left:29%;top:7%}
.dks--3{--w:27%;--r:-1.5deg;left:61%;top:15%}
.dks--4{--w:27%;--r:2deg;left:10%;top:53%}
.dks--5{--w:29%;--r:-2deg;left:41%;top:55%}
.dks--6{--w:23%;--r:3deg;left:72%;top:50%}

/* Act 2: the workflow that checks and transforms it. */
.dk2{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(20px,4vh,46px);padding:4% 5% clamp(76px,11vh,120px)}
.dk2__title{font-family:var(--font-mono);font-size:13px;color:#9aa4cc}
.dk2__wires{display:none}
.dk2__nodes{display:flex;align-items:stretch;justify-content:center;gap:clamp(14px,2.6vw,38px)}
.dk2__node{--on:clamp(0,calc((var(--g2) - var(--i) * .15) * 7),1);--done:clamp(0,calc((var(--g2) - (var(--i) * .15 + .1)) * 7),1);position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;width:clamp(104px,12vw,180px);padding:clamp(12px,1.6vw,20px) 10px;border-radius:14px;background:#141a33;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);text-align:center;opacity:calc(.3 + .7 * var(--on));transform:translateY(calc((1 - var(--on)) * 12px))}
.dk2__node .glyph{width:clamp(20px,2vw,26px);height:clamp(20px,2vw,26px);color:color-mix(in srgb,#3ddc97 calc(var(--done) * 100%),var(--yellow))}
.dk2__node b{font-family:var(--font-head);font-size:clamp(.8rem,1.1vw,1rem);font-weight:600}
.dk2__node span{font-size:clamp(.66rem,.85vw,.8rem);color:#98a1c8}
.dk2__node::after{content:"";position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,#3ddc97 calc(var(--done) * 100%),var(--yellow));opacity:var(--on)}
.dk2__node + .dk2__node::before{content:"";position:absolute;right:100%;top:50%;width:clamp(14px,2.6vw,38px);height:2px;background:linear-gradient(to right,color-mix(in srgb,var(--yellow) calc(var(--on) * 100%),rgba(255,255,255,.14)),color-mix(in srgb,var(--yellow) calc(var(--on) * 100%),rgba(255,255,255,.14)))}
.dk2__meters{display:flex;gap:clamp(18px,3.4vw,52px)}
.dk2__meters li{text-align:center}
.dk2__meters b{display:block;font-family:var(--font-head);font-size:clamp(1.1rem,2vw,1.7rem);font-weight:600;letter-spacing:-.02em}
.dk2__meters span{font-size:clamp(.68rem,.9vw,.85rem);color:#98a1c8}

/* Act 3: the dashboard it all ends up in. */
.dk3{display:flex;flex-direction:column;gap:clamp(8px,1.4vh,16px);padding:clamp(16px,3vw,40px) clamp(16px,4vw,60px) clamp(76px,11vh,120px);justify-content:center}
.dk3__title{display:flex;align-items:baseline;gap:12px;font-family:var(--font-head);font-size:clamp(1rem,1.7vw,1.5rem);font-weight:600;letter-spacing:-.02em}
.dk3__title span{font-family:var(--font-body);font-size:clamp(.66rem,.85vw,.8rem);font-weight:400;color:#98a1c8}
.dk3__kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,.8vw,12px)}
.dk3__kpis li{--in:clamp(0,calc((var(--g3) - var(--i,0) * .06) * 6),1);padding:clamp(8px,1.1vw,16px) clamp(10px,1.2vw,18px);border-radius:12px;background:#141a33;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);opacity:var(--in);transform:translateY(calc((1 - var(--in)) * 10px))}
.dk3__kpis li:nth-child(2){--i:1}
.dk3__kpis li:nth-child(3){--i:2}
.dk3__kpis li:nth-child(4){--i:3}
.dk3__kpis b{display:block;font-family:var(--font-head);font-size:clamp(1.1rem,2.2vw,1.9rem);font-weight:600;letter-spacing:-.025em}
.dk3__kpis span{font-size:clamp(.62rem,.8vw,.78rem);color:#98a1c8}
.dk3__grid{flex:1;min-height:0;display:grid;grid-template-columns:1.4fr .85fr 1.15fr;grid-template-rows:1.25fr .75fr;gap:clamp(6px,.8vw,12px)}
.dk3__card{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0;padding:clamp(10px,1.2vw,18px);border-radius:12px;background:#141a33;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.dk3__card figcaption{font-size:clamp(.62rem,.8vw,.78rem);color:#98a1c8}
.dk3__card--bars{grid-row:span 2}
.dk3__card--list{grid-column:2 / span 2}
.dk3__bars{flex:1;display:flex;align-items:flex-end;gap:clamp(5px,.7vw,11px);padding-bottom:18px}
.dk3__bars i{position:relative;flex:1;height:100%}
.dk3__bars i::before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--v) * 100%);border-radius:6px 6px 2px 2px;background:linear-gradient(var(--yellow),#f3a712);transform:scaleY(var(--g3));transform-origin:50% 100%}
.dk3__bars span{position:absolute;left:0;right:0;bottom:-16px;text-align:center;font-size:clamp(.55rem,.7vw,.7rem);color:#98a1c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk3__ring{position:relative;flex:1;aspect-ratio:1;max-height:100%;margin-inline:auto;border-radius:50%;background:conic-gradient(var(--yellow) calc(var(--g3) * .94turn),rgba(255,255,255,.1) 0);display:grid;place-items:center}
.dk3__ring::before{content:"";position:absolute;inset:22%;border-radius:50%;background:#141a33}
.dk3__ring span{position:relative;font-family:var(--font-head);font-size:clamp(.8rem,1.3vw,1.15rem);font-weight:600}
.dk3__legend{display:flex;justify-content:center;gap:12px;font-size:clamp(.55rem,.72vw,.7rem);color:#98a1c8}
.dk3__legend li{display:flex;align-items:center;gap:5px}
.dk3__legend i{width:7px;height:7px;border-radius:2px;background:var(--yellow)}
.dk3__legend i.is-open{background:rgba(255,255,255,.22)}
.dk3__card--trend svg{flex:1;width:100%;height:100%;color:#3ddc97;overflow:visible}
.dk3__line{stroke-dasharray:420;stroke-dashoffset:calc(420 * (1 - var(--g3)))}
.dk3__list{display:flex;flex-direction:column;justify-content:space-between;gap:4px;font-size:clamp(.62rem,.82vw,.82rem)}
.dk3__list li{--in:clamp(0,calc((var(--g3) - .25 - var(--i) * .1) * 7),1);display:flex;align-items:center;gap:8px;padding:clamp(3px,.5vw,7px) 0;border-bottom:1px solid rgba(255,255,255,.07);opacity:var(--in)}
.dk3__list li:last-child{border-bottom:0}
.dk3__list i{width:7px;height:7px;border-radius:50%;flex:none;background:#3ddc97}
.dk3__list i.is-high{background:#e5473d}
.dk3__list i.is-mid{background:var(--orange)}
.dk3__list b{margin-left:auto;font-family:var(--font-head);font-size:clamp(.55rem,.72vw,.7rem);font-weight:600;color:#98a1c8;text-transform:uppercase;letter-spacing:.04em}

.qa .dks__row .is-bad,.qa .dks__row .is-empty,.qa .dks__row.is-copy,.qa .dks__scan{animation:none}
.qa .dks__cursor{display:none}
@media (prefers-reduced-motion:reduce){
  .dks__row .is-bad,.dks__row .is-empty,.dks__row.is-copy,.dks__scan{animation:none}
  .dks__cursor{display:none}
  .dks{transition:none}
}

/* The three lines under the scene: the story in words. */
.hs__caps{position:absolute;left:0;right:0;bottom:clamp(12px,2vh,22px);z-index:3;display:grid;justify-items:center;padding:0 var(--gutter);pointer-events:none}
.hs__caps::before{content:"";position:absolute;left:0;right:0;bottom:calc(-1 * clamp(12px,2vh,22px));height:calc(100% + clamp(40px,7vh,72px));background:linear-gradient(to top,color-mix(in srgb,var(--bg) 88%,transparent) 30%,transparent);z-index:-1}
.hs__cap{grid-area:1/1;max-width:46ch;text-align:center;font-size:clamp(.95rem,1.4vw,1.15rem);color:var(--fg-2)}
.hs__cap b{color:var(--fg);font-family:var(--font-head);font-weight:600}
/* By act, not by position: a scene that drops an act keeps the rest aligned. */
.hs__cap[data-act="1"]{opacity:var(--a1)}
.hs__cap[data-act="2"]{opacity:var(--a2)}
.hs__cap[data-act="3"]{opacity:var(--a3)}
/* Still state (no scrub): the caption sits under the scene instead of over it. */
.qa .hs__caps,.no-js .hs__caps{position:static;margin-top:clamp(12px,2vh,22px)}
.qa .hs__caps::before,.no-js .hs__caps::before{display:none}
@media (prefers-reduced-motion:reduce){
  .hs__caps{position:static;margin-top:clamp(12px,2vh,22px)}
  .hs__caps::before{display:none}
}

@media (max-width:900px){
  .dk3__grid{grid-template-columns:1fr 1fr;grid-template-rows:1.1fr .9fr}
  .dk3__card--trend{display:none}
  .dk3__card--list{grid-column:1 / span 2}
}
@media (max-width:734px){
  /* A little less scrolling on a phone before the film has landed. */
  .js .hs{height:180vh}
  .js .hs--short{height:145vh}
  /* On a phone the hero copy takes most of the screen, so the placeholder
     partner badges make way for the scene. */
  .hs .proof__logos{display:none}
  .hs .proof{gap:10px 18px}
  .hs__cap{font-size:.95rem}
  .dks--4,.dks--5,.dks--6{display:none}
  .dks--1{--w:54%;left:5%;top:11%}
  .dks--2{--w:60%;left:30%;top:36%}
  .dks--3{--w:56%;left:6%;top:62%}
  .dk2__nodes{flex-wrap:wrap;gap:10px}
  .dk2__node{width:44%}
  .dk2__node + .dk2__node::before{display:none}
  .dk2__meters{flex-wrap:wrap;justify-content:center;gap:14px 24px}
  .dk3__kpis{grid-template-columns:1fr 1fr}
  .dk3__grid{grid-template-columns:1fr;grid-template-rows:1.2fr .8fr}
  .dk3__card--bars{grid-row:auto}
  .dk3__card--ring{display:none}
  .dk3__card--list{grid-column:auto}
}


/* 32 HERO SCENE — FEATURED PRODUCT (3rdRisk) ----------------------------- */
/* What plays on the screen in the homepage hero: the product at work, then
   two slides with the points from the featured block. Same three acts as
   section 31, so modules.desk drives it with the same variables. --pp is the
   product colour, set on .hs__scene. */
.tr1{opacity:var(--a1)}
.tr2{opacity:var(--a2)}
.tr3{opacity:var(--a3)}

/* Act 1: 3rdRisk at work. */
.tr__app{position:absolute;inset:clamp(14px,2.4vw,34px);display:flex;flex-direction:column;border-radius:14px;background:#0f1430;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden;font-size:clamp(.62rem,.85vw,.84rem)}
.tr__bar{display:flex;align-items:center;gap:10px;padding:clamp(8px,1vw,14px) clamp(12px,1.4vw,20px);border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.tr__logo{font-family:var(--font-head);font-weight:700;letter-spacing:-.02em;color:#fff;font-size:clamp(.8rem,1.1vw,1.05rem)}
.tr__logo::before{content:"";display:inline-block;width:.6em;height:.6em;margin-right:.45em;border-radius:3px;background:var(--pp)}
.tr__crumb{margin-right:auto;color:#8f99c4}
.tr__chip{padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--pp) 26%,transparent);color:#d9d2ff;font-size:.9em}
.tr__body{flex:1;display:grid;grid-template-columns:clamp(96px,11%,150px) minmax(0,1fr) clamp(170px,24%,300px);min-height:0}
.tr__side{display:flex;flex-direction:column;gap:2px;padding:clamp(8px,1vw,14px);border-right:1px solid rgba(255,255,255,.07);color:#8f99c4}
.tr__side b{padding:6px 8px;border-radius:8px;font-weight:500}
.tr__side .is-on{background:color-mix(in srgb,var(--pp) 22%,transparent);color:#fff}
.tr__list{display:flex;flex-direction:column;min-width:0;padding:clamp(8px,1vw,14px);align-content:start}
.tr__listhead,.tr__list li{display:grid;grid-template-columns:minmax(0,1.6fr) .5fr .5fr .9fr;align-items:center;gap:8px;padding:clamp(5px,.7vw,9px) 8px}
.tr__listhead{color:#7d87b4;font-size:.9em}
.tr__list li{border-top:1px solid rgba(255,255,255,.06);animation:tr-row 6s ease-in-out infinite;animation-delay:calc(var(--i) * .5s)}
.tr__list li span:first-child{color:#e8ebf7}
.tr__list i{justify-self:start;padding:2px 8px;border-radius:999px;font-style:normal;font-weight:600;background:rgba(61,220,151,.18);color:#8ef0c4}
.tr__list i.is-mid{background:rgba(243,120,55,.2);color:#ffc79f}
.tr__list i.is-high{background:rgba(229,71,61,.24);color:#ffb3ad;animation:dk-blink 2.2s ease-in-out infinite}
.tr__st{color:#8f99c4}
.tr__st.is-alert{color:#ffb3ad}
@keyframes tr-row{0%,84%{background:transparent}90%,96%{background:rgba(255,255,255,.06)}100%{background:transparent}}
.tr__ai{display:flex;flex-direction:column;gap:clamp(5px,.7vw,9px);padding:clamp(8px,1vw,14px);border-left:1px solid rgba(255,255,255,.07)}
.tr__aihead{display:flex;align-items:center;gap:7px;font-family:var(--font-head);font-weight:600;color:#fff}
.tr__aihead .glyph{width:1.1em;height:1.1em;color:var(--pp)}
.tr__file{color:#8f99c4;font-size:.92em}
.tr__progress{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.tr__progress i{display:block;height:100%;border-radius:3px;background:var(--pp);animation:tr-scan 3.6s ease-in-out infinite}
@keyframes tr-scan{0%{width:4%}70%,100%{width:100%}}
.tr__findings{display:flex;flex-direction:column;gap:4px;color:#c3cae6}
.tr__findings li{display:flex;align-items:center;gap:6px;opacity:0;animation:tr-find 3.6s ease-in-out infinite;animation-delay:calc(.7s + var(--i) * .7s)}
.tr__findings li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pp);flex:none}
@keyframes tr-find{0%,10%{opacity:0;transform:translateY(4px)}22%,92%{opacity:1;transform:none}100%{opacity:0}}
.tr__kpi{margin-top:auto;color:#8f99c4}
.tr__kpi b{display:block;font-family:var(--font-head);font-size:clamp(1.1rem,2vw,1.7rem);font-weight:600;letter-spacing:-.02em;color:#fff}
.tr__foot{display:flex;align-items:center;gap:clamp(12px,2vw,30px);padding:clamp(7px,.9vw,13px) clamp(12px,1.4vw,20px);border-top:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);color:#8f99c4}
.tr__foot b{margin-right:.45em;font-family:var(--font-head);font-weight:600;color:#fff}
.tr__foot__note{margin-left:auto}
.tr__toast{position:absolute;right:clamp(10px,1.4vw,20px);bottom:clamp(10px,1.4vw,20px);display:flex;align-items:center;gap:8px;padding:8px 13px;border-radius:12px;background:rgba(229,71,61,.92);color:#fff;font-weight:600;box-shadow:0 14px 30px rgba(0,0,0,.4);animation:tr-toast 7s ease-in-out infinite}
.tr__toast .glyph{width:1.1em;height:1.1em}
@keyframes tr-toast{0%,32%{opacity:0;transform:translateY(14px)}40%,76%{opacity:1;transform:none}86%,100%{opacity:0;transform:translateY(14px)}}

/* Acts 2 and 3: slides, built up by --g2 / --g3. */
.slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(6px,1vh,14px);padding:clamp(20px,4vw,72px) clamp(20px,5vw,80px) clamp(44px,6vh,76px);text-align:left}
.slide > *{width:min(100%,1060px);margin-inline:auto}
.slide__eyebrow{display:flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:600;color:var(--pp);font-size:clamp(.72rem,1vw,.95rem)}
.slide__eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--pp)}
.slide__title{font-family:var(--font-head);font-size:clamp(1.7rem,4.4vw,3.4rem);font-weight:600;letter-spacing:-.03em;line-height:1.05}
.slide__sub{max-width:34em;color:#c3cae6;font-size:clamp(.85rem,1.4vw,1.25rem)}
.slide__points{display:flex;flex-direction:column;gap:clamp(6px,1vh,14px);margin-top:clamp(6px,1.4vh,18px)}
.slide__points li{--in:clamp(0,calc((var(--g2) - var(--i) * .22) * 5),1);display:grid;grid-template-columns:auto 1fr;gap:4px clamp(10px,1.2vw,18px);align-items:center;padding:clamp(8px,1.1vw,16px) clamp(10px,1.3vw,20px);border-radius:14px;background:#141a33;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);opacity:var(--in);transform:translateY(calc((1 - var(--in)) * 14px))}
.slide__points .glyph{grid-row:span 2;width:clamp(18px,2vw,26px);height:clamp(18px,2vw,26px);color:var(--pp)}
.slide__points b{font-family:var(--font-head);font-size:clamp(.85rem,1.3vw,1.15rem);font-weight:600}
.slide__points span{color:#98a1c8;font-size:clamp(.7rem,.95vw,.9rem)}
.slide__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,.9vw,14px);margin-top:clamp(8px,1.6vh,20px)}
.slide__steps li{--in:clamp(0,calc((var(--g3) - var(--i) * .18) * 5),1);position:relative;padding:clamp(10px,1.2vw,18px);border-radius:14px;background:#141a33;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);opacity:var(--in);transform:translateY(calc((1 - var(--in)) * 14px))}
.slide__steps li::before{content:"";position:absolute;left:0;top:0;width:calc(var(--in) * 100%);height:3px;border-radius:3px 3px 0 0;background:var(--pp)}
.slide__steps b{display:block;font-family:var(--font-head);font-size:clamp(.9rem,1.5vw,1.3rem);font-weight:600;letter-spacing:-.02em}
.slide__steps span{color:#98a1c8;font-size:clamp(.68rem,.9vw,.85rem)}
.slide__foot{margin-top:clamp(8px,1.4vh,18px);color:#98a1c8;font-size:clamp(.72rem,1vw,.95rem);opacity:clamp(0,calc((var(--g3) - .7) * 4),1)}

@media (max-width:900px){
  .tr__body{grid-template-columns:minmax(0,1fr) clamp(150px,32%,240px)}
  .tr__side{display:none}
  .slide__steps{grid-template-columns:1fr 1fr}
}
@media (max-width:734px){
  .tr__app{inset:10px}
  /* On a phone the AI panel moves under the list instead of beside it. */
  .tr__body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .tr__ai{border-left:0;border-top:1px solid rgba(255,255,255,.07)}
  .tr__kpi{margin-top:6px}
  .tr__listhead,.tr__list li{grid-template-columns:minmax(0,1.4fr) .6fr .8fr}
  .tr__listhead span:nth-child(2),.tr__list li span:nth-child(2){display:none}
  .slide{padding:20px 20px 64px}
  .slide__sub{font-size:.9rem}
}
.qa .tr__list li,.qa .tr__progress i,.qa .tr__findings li,.qa .tr__toast,.qa .tr__list i.is-high{animation:none}
.qa .tr__findings li{opacity:1}
@media (prefers-reduced-motion:reduce){
  .tr__list li,.tr__progress i,.tr__findings li,.tr__toast,.tr__list i.is-high{animation:none}
  .tr__findings li{opacity:1}
  .tr__progress i{width:100%}
}

/* 33 DELIVERED PRODUCT VISUALS ------------------------------------
   The five product demos were built by the developers and are kept whole in
   _partials/viz/ (knime-kai, acl-run, evidant-dtr, process-map,
   3rdrisk-ecosystem), each scoped to its own class: .kai-demo, .acl-run,
   .dtrfp, .psf, .cfe. Nothing here styles them. This is only where they meet
   the site, so a new delivery can be pasted over the partial without losing
   it. Each sits in a .viz-embed wrapper. */

/* KNIME: the step bar, the replay button and the caption sit outside the white
   canvas, on the dark section's own ground, so they take its ink. The two
   places where that colour lands on a light fill keep a dark one. */
.theme-dark .kai-demo,.theme-navy .kai-demo{--kai-ink:var(--fg);--kai-muted:var(--fg-2);--kai-line:rgba(255,255,255,.22)}
.theme-dark .kai-demo .kai-ctrl button,.theme-navy .kai-demo .kai-ctrl button,
.theme-dark .kai-demo .kai-step.is-active .kai-n,.theme-navy .kai-demo .kai-step.is-active .kai-n{color:#22201f}

/* ACL: its caption is a fixed grey built for a light page. On the dark section
   it measures 3.7:1, so it takes the site's own muted ink (7.8:1). */
.theme-dark .acl-run__caption,.theme-navy .acl-run__caption{color:var(--fg-2)}