/*! inovis-marketing 2.1.2 - built from 08-design/v2 (do not edit; edit the sources and rebuild) */
/* ---- css/tokens-v2.css ---- */
/**
 * tokens-v2.css - design tokens for the v2 marketing pages (inovismedical.com).
 *
 * Every v2 rule lives under the `.iv2` root, so nothing here can reach the portal, the lab
 * screens or any page that has not opted in. Tokens are set on `.iv2` (not :root) for the same
 * reason. Colours reuse the brand values of inovis-design.css (--n-950, --brand-accent) by
 * value, so the v2 pages look like the same company while that file stays untouched.
 *
 * Palette decision (owner, 2026-10-31): a LIGHT page - grey/white bands - with only the hero
 * and the footer dark, like luxcreo.com.
 */
.iv2{
  color-scheme:light;
  --ink:#080c11;        /* hero + footer, = --n-950 */
  --ink-2:#101720;      /* = --n-900 */
  --paper:#f2f4f6;      /* light grey band */
  --paper-2:#ffffff;    /* white band / cards */
  --text:#101720; --text-2:#43505f; --text-3:#8a95a3;
  --on-ink:#f4f6f8; --on-ink-2:#b6c0cb; --on-ink-3:#8a95a3;
  --line:rgb(16 23 32 / .09); --line-ink:rgb(255 255 255 / .12);
  --accent:#0aa6d8;     /* = --brand-accent */
  --accent-ink:#06769a; /* accent dark enough for text on white (AA) */
  --accent-soft:#e3f5fb; --accent-glow:rgb(10 166 216 / .16);
  --font-ui:"Assistant","Noto Sans Hebrew","Segoe UI",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --col:1200px;         /* content column */
  --gutter:24px;        /* side gutter, 16px on phones */
  --band-y:112px;       /* section rhythm, 72px on phones */
  --r:16px; --pill:999px;
  --hdr:76px;           /* header height, 68px on phones */
  --admin:0px;          /* WP admin bar offset, set in base.css */
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (max-width:680px){
  .iv2{--hdr:68px;--gutter:16px;--band-y:72px}
}

/* ---- css/base.css ---- */
/**
 * base.css - scoped reset and shared primitives for v2 pages.
 *
 * The page renders inside the Hello Biz theme (template "Inovis - עמוד ריק"), whose theme.css
 * styles bare a, button, input and headings (pink #c36 links, bordered buttons). The reset
 * below neutralises those inside `.iv2` only. Specificity note: `.iv2 a` (0,1,1) ties with the
 * theme's `a:hover`; this file loads after the theme, so it wins, and every component class
 * (0,2,0 and up) still beats the reset.
 *
 * Primitives: .band (full-bleed section), .wrap (1200px column + gutter), .sec-head, .h2, .lead.
 *
 * Two kinds of .iv2 root (2.1.0):
 *   .iv2.iv2-page    a v2 page body - only this one sets the page background;
 *   .iv2.iv2-chrome  the site-wide header / footer printed by the child theme on EVERY page,
 *                    portal included. display:contents, so it adds no box: the sticky header
 *                    sticks against <body> and the portal's bars land outside the scope.
 */
body:has(.iv2-page){margin:0;background:#f2f4f6}
.iv2.iv2-chrome{display:contents}
.admin-bar .iv2{--admin:32px}
@media (max-width:782px){.admin-bar .iv2{--admin:46px}}

.iv2{background:var(--paper);color:var(--text);font:400 17px/1.6 var(--font-ui);-webkit-font-smoothing:antialiased;overflow-x:clip}
.iv2 *,.iv2 *::before,.iv2 *::after{box-sizing:border-box}
.iv2 [hidden]{display:none!important}
.iv2 a,.iv2 a:where(:hover,:focus,:visited){color:inherit;text-decoration:none}
.iv2 button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;border-radius:0;text-transform:none;letter-spacing:normal;box-shadow:none}
.iv2 img,.iv2 video{max-width:100%;display:block}
.iv2 h1,.iv2 h2,.iv2 h3,.iv2 h4{margin:0;text-wrap:balance;font-weight:400;font-family:var(--font-ui);color:inherit;letter-spacing:normal;line-height:1.2}
.iv2 p{margin:0}
.iv2 ul{margin:0}
.iv2 :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---- band + inner column (side gutter lives on .wrap) ---- */
.iv2 .band{padding-block:var(--band-y)}
.iv2 .band--white{background:var(--paper-2)}
.iv2 .wrap{max-width:calc(var(--col) + 2 * var(--gutter));margin:0 auto;
  padding-left:max(var(--gutter), env(safe-area-inset-left,0px));padding-right:max(var(--gutter), env(safe-area-inset-right,0px))}

/* ---- section heading block ---- */
.iv2 .h2{font-size:clamp(30px,3.6vw,44px);line-height:1.15;font-weight:400;letter-spacing:-.01em;margin-top:16px}
.iv2 .lead{color:var(--text-2);font-size:18px;max-width:60ch;margin-top:14px}
.iv2 .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:48px}

/* ---- css/components/eyebrow.css ---- */
/**
 * eyebrow.css - the small mono label with an accent dot that sits above every H2
 * (LuxCreo's "● LUXCREO DENTAL SYSTEMS" pattern, in Inovis turquoise).
 * Markup: <span class="eyebrow">text</span>
 */
.iv2 .eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.iv2 .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-glow)}
.iv2 .hero .eyebrow{color:var(--accent)}

/* ---- css/components/buttons.css ---- */
/**
 * buttons.css - pill buttons and the inline arrow link.
 *
 * .btn + one variant:  --accent (primary)  --dark (primary on light)  --ghost (on dark media)
 *                      --line (secondary on light)       size modifier: --sm
 * .link - text link with an arrow that slides on hover.  .arrow - the mono arrow glyph.
 */
.iv2 .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding-inline:28px;border-radius:var(--pill);font:600 16px/1 var(--font-ui);border:1px solid transparent;cursor:pointer;
  transition:background .2s var(--ease),transform .2s var(--ease),border-color .2s,color .2s}
.iv2 .btn:hover{transform:translateY(-1px)}
.iv2 .btn--accent,.iv2 .btn--accent:where(:hover,:focus,:visited){color:var(--ink)}
.iv2 .btn--accent{background:var(--accent)}
.iv2 .btn--accent:hover{background:#3cbbe4}
.iv2 .btn--dark,.iv2 .btn--dark:where(:hover,:focus,:visited){color:var(--on-ink)}
.iv2 .btn--dark{background:var(--ink)}
.iv2 .btn--dark:hover{background:#1b232d}
.iv2 .btn--ghost{background:rgb(255 255 255 / .08);color:var(--on-ink);border-color:rgb(255 255 255 / .24);backdrop-filter:blur(8px)}
.iv2 .btn--ghost:hover{background:rgb(255 255 255 / .16)}
.iv2 .btn--line{border-color:var(--line);background:var(--paper-2);color:var(--text)}
.iv2 .btn--line:hover{border-color:var(--text)}
.iv2 .btn--sm{height:40px;padding-inline:18px;font-size:14px}
.iv2 .arrow{font-family:var(--font-mono);font-size:14px}
.iv2 .link,.iv2 .link:where(:hover,:focus,:visited){color:var(--accent-ink)}
.iv2 .link{display:inline-flex;gap:8px;align-items:center;font-weight:600;transition:gap .2s}
.iv2 .link:hover{gap:12px}

/* ---- css/components/header-mega.css ---- */
/**
 * header-mega.css - fixed site header with LuxCreo-style mega menus and the phone drawer.
 *
 * States (set by js/header.js):
 *   .hdr            transparent over the dark hero, light text
 *   .hdr.solid      white with dark text - when scrolled past 40px, a menu is open, or the drawer is open
 *   .hdr--site      the site-wide header (child theme, every page but the home): always solid, in the
 *                   page flow and sticky; static when the portal's bars sit under it, so the two never
 *                   overlap (the ops bar is sticky itself)
 *   .mi-btn[aria-expanded=true]  its .mega panel is shown (full-width white panel under the header)
 * Desktop (>1024px): .nav + .mega.  Tablet/phone: .burger opens .drawer (accordion of <details>).
 * --admin shifts everything down under the WP admin bar for logged-in users.
 * --top (set by header.js) overrides it when the portal's bars sit above the page.
 */
.iv2 .hdr{position:fixed;top:var(--top,calc(var(--admin) + env(safe-area-inset-top,0px)));inset-inline:0;z-index:50;color:var(--on-ink);transition:background .25s var(--ease),color .25s,box-shadow .25s}
.iv2 .hdr.solid{background:var(--paper-2);color:var(--text);box-shadow:0 1px 0 var(--line)}
.iv2 .hdr.hdr--site{position:sticky;top:var(--admin)}
body:has(.inovis-bar) .iv2 .hdr.hdr--site{position:relative;top:auto}
@media print{.iv2.iv2-chrome .hdr,.iv2.iv2-chrome .ftr{display:none!important}}
.iv2 .hdr-row{display:flex;align-items:center;gap:28px;height:var(--hdr)}
.iv2 .logo{display:flex;align-items:center;flex-shrink:0}
.iv2 .logo img{height:40px;width:auto;transition:filter .25s}
.iv2 .hdr.solid .logo img{filter:brightness(.55) saturate(1.4)}

/* ---- top-level menu buttons ---- */
.iv2 .nav{display:flex;align-items:stretch;height:100%;margin-inline-start:8px}
.iv2 .mi-btn{position:relative;display:flex;align-items:center;gap:6px;height:100%;padding-inline:14px;font:600 15px/1 var(--font-ui);cursor:pointer;opacity:.82;transition:opacity .2s}
.iv2 .mi-btn:hover,.iv2 .mi-btn[aria-expanded="true"]{opacity:1}
.iv2 .mi-btn::after{content:"";position:absolute;inset-inline:14px;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transition:transform .25s var(--ease)}
.iv2 .mi-btn[aria-expanded="true"]::after{transform:scaleX(1)}
/* chevron: physical borders so it points down in RTL too; flips up when open */
.iv2 .chev{width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--ease)}
.iv2 .mi-btn[aria-expanded="true"] .chev{transform:translateY(2px) rotate(-135deg)}
.iv2 .hdr-cta{margin-inline-start:auto;display:flex;gap:10px}
.iv2 .hdr .btn--ghost{transition:all .25s}
.iv2 .hdr.solid .btn--ghost{background:var(--paper);color:var(--text);border-color:var(--line);backdrop-filter:none}

/* ---- burger (tablet/phone) ---- */
.iv2 .burger{display:none;margin-inline-start:auto;width:44px;height:44px;border-radius:50%;border:1px solid currentColor;cursor:pointer;position:relative}
.iv2 .burger span,.iv2 .burger span::before,.iv2 .burger span::after{position:absolute;left:50%;width:18px;height:1.6px;margin-left:-9px;background:currentColor;transition:transform .25s var(--ease),opacity .2s}
.iv2 .burger span{top:50%}
.iv2 .burger span::before,.iv2 .burger span::after{content:"";left:0;margin-left:0}
.iv2 .burger span::before{transform:translateY(-6px)}
.iv2 .burger span::after{transform:translateY(6px)}
.iv2 .burger[aria-expanded="true"] span{background:transparent}
.iv2 .burger[aria-expanded="true"] span::before{transform:rotate(45deg)}
.iv2 .burger[aria-expanded="true"] span::after{transform:rotate(-45deg)}

/* ---- mega panel ---- */
.iv2 .mega{position:absolute;top:var(--hdr);inset-inline:0;background:var(--paper-2);color:var(--text);border-top:1px solid var(--line);box-shadow:0 40px 80px -20px rgb(8 12 17 / .22);padding-block:36px 44px;animation:iv2MegaIn .28s var(--ease)}
@keyframes iv2MegaIn{from{transform:translateY(-8px)}to{transform:none}}
.iv2 .mega-grid{display:grid;grid-template-columns:1.15fr repeat(var(--n,4),1fr);gap:28px;align-items:start}
.iv2 .mega-intro{padding-inline-end:12px;border-inline-end:1px solid var(--line);align-self:stretch;display:flex;flex-direction:column;gap:12px}
.iv2 .mega-intro h2{font-size:26px;line-height:1.2}
.iv2 .mega-intro p{color:var(--text-2);font-size:15px}
.iv2 .mega-intro .link{margin-top:auto;font-size:15px}
.iv2 .mcol-card{display:block}
.iv2 .mcol-img{aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--paper)}
.iv2 .mcol-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.iv2 .mcol-img.contain img{object-fit:contain;padding:10px}
.iv2 .mcol-card:hover img{transform:scale(1.05)}
.iv2 .mcol h3{font-size:17px;font-weight:700;margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.iv2 .mcol h3.plain{margin-top:0}
.iv2 .mcol h3 .arrow{color:var(--accent-ink);opacity:0;transform:translateX(6px);transition:all .2s}
.iv2 .mcol-card:hover h3 .arrow{opacity:1;transform:none}
.iv2 .mcol ul{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:7px;font-size:15px;color:var(--text-2)}
.iv2 .mcol ul a:hover{color:var(--accent-ink)}
.iv2 .scrim{position:fixed;inset:0;z-index:40;background:rgb(8 12 17 / .32);backdrop-filter:blur(2px)}

/* ---- phone drawer ---- */
.iv2 .drawer{position:fixed;inset:var(--drawer-top,calc(var(--top,calc(var(--admin) + env(safe-area-inset-top,0px))) + var(--hdr))) 0 0;z-index:49;background:var(--paper-2);color:var(--text);overflow-y:auto;
  padding:8px max(16px,env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.iv2 .drawer details{border-bottom:1px solid var(--line)}
.iv2 .drawer summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding-block:18px;font-size:20px;font-weight:600;cursor:pointer}
.iv2 .drawer summary::-webkit-details-marker{display:none}
.iv2 .drawer details[open] .chev{transform:translateY(2px) rotate(-135deg)}
.iv2 .drawer .d-links{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-bottom:20px}
.iv2 .drawer .d-links a{display:grid;gap:8px;font-size:15px;font-weight:600}
.iv2 .drawer .d-ctas{display:grid;gap:10px;margin-top:24px}

@media (min-width:1025px){.iv2 .drawer{display:none}}
@media (max-width:1024px){
  .iv2 .nav,.iv2 .hdr-cta,.iv2 .mega{display:none}
  .iv2 .burger{display:block}
}

/* ---- css/components/hero-media.css ---- */
/**
 * hero-media.css - full-bleed dark hero with background video, light 300-weight H1,
 * pill CTAs, a row of key figures and a floating "webinar" card (LuxCreo pattern).
 * The video is decorative (muted loop); js/hero.js pauses it under prefers-reduced-motion.
 * The hero stays dark by design - it is one of the two dark surfaces on the page.
 */
.iv2 .hero{position:relative;background:var(--ink);color:var(--on-ink);overflow:hidden}
.iv2 .hero-media{position:absolute;inset:0}
.iv2 .hero-media video{width:100%;height:100%;object-fit:cover}
.iv2 .hero-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(270deg,rgb(8 12 17 / .9) 0%,rgb(8 12 17 / .5) 45%,rgb(8 12 17 / .1) 100%)}
.iv2 .hero > .wrap{position:relative;min-height:min(780px,94vh);display:flex;flex-direction:column;justify-content:center;padding-block:150px 110px}
.iv2 .hero h1{font-size:clamp(40px,6vw,76px);line-height:1.05;font-weight:300;letter-spacing:-.02em;max-width:760px;margin-top:22px}
.iv2 .hero h1 b{font-weight:600;color:#fff}
.iv2 .hero .sub{color:var(--on-ink-2);font-size:19px;max-width:620px;margin-top:22px}
.iv2 .hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.iv2 .hero-meta{display:flex;gap:28px;margin-top:64px;color:var(--on-ink-3);font:500 12px/1.4 var(--font-mono);letter-spacing:.06em;flex-wrap:wrap}
.iv2 .hero-meta span b{display:block;color:var(--on-ink);font:300 26px/1.1 var(--font-ui);letter-spacing:0;margin-bottom:4px}
.iv2 .hero-card{position:absolute;inset-inline-end:max(var(--gutter),env(safe-area-inset-left,0px));bottom:48px;width:320px;display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;
  padding:12px;border-radius:var(--r);background:rgb(255 255 255 / .1);border:1px solid var(--line-ink);backdrop-filter:blur(14px);color:var(--on-ink)}
.iv2 .hero-card img{width:96px;height:72px;object-fit:cover;border-radius:10px}
.iv2 .hero-card .k{font:500 11px/1 var(--font-mono);letter-spacing:.1em;color:var(--accent)}
.iv2 .hero-card .t{font-weight:600;line-height:1.3;margin-top:6px;font-size:15px}
.iv2 .hero-card .m{color:var(--on-ink-2);font-size:13px;margin-top:4px}

@media (max-width:1024px){
  .iv2 .hero-card{position:relative;inset:auto;margin-top:40px;bottom:auto}
}
@media (max-width:680px){
  .iv2 .hero > .wrap{padding-block:116px 64px;min-height:0}
  .iv2 .hero-card{width:100%}
}

/* ---- css/components/segment-tiles.css ---- */
/**
 * segment-tiles.css - three tall image tiles, one per audience (orthodontists / dentists /
 * clinics & labs), text on a dark gradient at the bottom. LuxCreo's Clinic/DSO/Lab row.
 */
.iv2 .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.iv2 .tile{position:relative;min-height:420px;border-radius:var(--r);overflow:hidden;color:var(--on-ink);display:flex;flex-direction:column;justify-content:flex-end;padding:28px;isolation:isolate}
.iv2 .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s var(--ease)}
.iv2 .tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgb(8 12 17 / .9) 8%,rgb(8 12 17 / .1) 65%)}
.iv2 .tile:hover img{transform:scale(1.05)}
.iv2 .tile .who{font:500 12px/1 var(--font-mono);letter-spacing:.12em;color:var(--accent)}
.iv2 .tile h3{font-size:32px;margin-top:12px}
.iv2 .tile p{color:var(--on-ink-2);margin-top:10px;font-size:16px}
.iv2 .tile .link{margin-top:18px;color:var(--accent)}

@media (max-width:1024px){
  .iv2 .tiles{grid-template-columns:1fr 1fr}
  .iv2 .tiles .tile:last-child{grid-column:1/-1;min-height:320px}
}
@media (max-width:680px){
  .iv2 .tiles{grid-template-columns:1fr}
  .iv2 .tile{min-height:340px}
}

/* ---- css/components/system-tabs.css ---- */
/**
 * system-tabs.css - pill tab bar + panels (LuxCreo's Printer / Post-processing / Software /
 * Materials). Also used by the learning centre filter (learning-tabs.css adds the grid).
 * ARIA wiring and keyboard behaviour: js/tabs.js.
 */
.iv2 .tabs{display:flex;gap:4px;padding:5px;border-radius:var(--pill);background:var(--paper-2);border:1px solid var(--line);width:max-content;max-width:100%;overflow-x:auto}
.iv2 .band--white .tabs{background:var(--paper)}
.iv2 .tab{font:600 15px/1 var(--font-ui);color:var(--text-2);height:42px;padding-inline:22px;border-radius:var(--pill);cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:8px}
.iv2 .tab .n{font:500 11px/1 var(--font-mono);color:var(--text-3)}
.iv2 .tab[aria-selected="true"]{background:var(--ink);color:var(--on-ink)}
.iv2 .tab[aria-selected="true"] .n{color:var(--accent)}

.iv2 .panel{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;margin-top:40px}
.iv2 .panel-media{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--paper-2);display:grid;place-items:center}
.iv2 .panel-media img{width:100%;height:100%;object-fit:cover}
.iv2 .panel-media.contain img{object-fit:contain;padding:32px}
.iv2 .panel h3{font-size:34px;line-height:1.15}
.iv2 .specs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:32px;border-top:1px solid var(--line)}
.iv2 .specs div{padding:18px 0 0;padding-inline-end:12px}
.iv2 .specs b{display:block;font:300 30px/1 var(--font-ui);letter-spacing:-.01em}
.iv2 .specs b small{font:500 13px var(--font-mono);color:var(--text-3);margin-inline-start:4px}
.iv2 .specs span{display:block;color:var(--text-2);font-size:14px;margin-top:8px}
.iv2 .panel .link{margin-top:28px}

@media (max-width:1024px){.iv2 .panel{grid-template-columns:1fr;gap:32px}}
@media (max-width:680px){.iv2 .specs b{font-size:24px}}

/* ---- css/components/rail.css ---- */
/**
 * rail.css - horizontal product carousel (CSS scroll-snap) with prev/next buttons.
 * 3.4 cards visible on desktop, 2.2 on tablet, 82% width on phones - the peek of the next
 * card tells the visitor there is more. Button behaviour: js/rail.js.
 */
.iv2 .rail-ctl{display:flex;gap:8px}
.iv2 .rail-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--paper-2);font:500 16px var(--font-mono);cursor:pointer;color:var(--text)}
.iv2 .rail-btn:hover{border-color:var(--text)}
.iv2 .rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*16px)/3.4);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.iv2 .rail::-webkit-scrollbar{display:none}
.iv2 .card{scroll-snap-align:start;background:var(--paper);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.iv2 .card:hover{box-shadow:0 18px 40px rgb(8 12 17 / .10);transform:translateY(-3px)}
.iv2 .card-img{aspect-ratio:4/3;background:var(--ink);overflow:hidden}
.iv2 .card-img img{width:100%;height:100%;object-fit:cover}
.iv2 .card-img.light{background:#fff}
.iv2 .card-img.light img{object-fit:contain;padding:18px}
.iv2 .card-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.iv2 .card .cat{font:500 11px/1 var(--font-mono);letter-spacing:.1em;color:var(--text-3)}
.iv2 .card h3{font-size:22px;font-weight:600;line-height:1.25}
.iv2 .card p{color:var(--text-2);font-size:15px;flex:1}
.iv2 .card .link{margin-top:8px;font-size:15px}

@media (max-width:1024px){.iv2 .rail{grid-auto-columns:calc((100% - 16px)/2.2)}}
@media (max-width:680px){.iv2 .rail{grid-auto-columns:82%}}

/* ---- css/components/stat-band.css ---- */
/**
 * stat-band.css - four white figure cards ("במספרים") with a source line underneath.
 * Every figure on the page must have a source on the live site - the .stats-src line names it.
 */
.iv2 .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.iv2 .stat{background:var(--paper-2);border-radius:var(--r);padding:32px 28px}
.iv2 .stat b{display:block;font:200 clamp(44px,5vw,68px)/1 var(--font-ui);letter-spacing:-.03em;color:var(--text)}
.iv2 .stat b small{font:500 16px var(--font-mono);color:var(--accent-ink);margin-inline-start:6px;letter-spacing:0}
.iv2 .stat span{display:block;color:var(--text-2);margin-top:14px;font-size:15px;max-width:24ch}
.iv2 .stats-src{margin-top:20px;color:var(--text-3);font:500 11px/1.5 var(--font-mono);letter-spacing:.04em}

@media (max-width:1024px){.iv2 .stats{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.iv2 .stat{padding:24px 20px}}

/* ---- css/components/commitment-band.css ---- */
/**
 * commitment-band.css - "לצדכם גם אחרי ההתקנה": heading + CTAs on one side, a 2x2 grid of
 * numbered promise cards on the other (LuxCreo's Customer Commitment, in the light palette).
 */
.iv2 .commit{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:start}
.iv2 .commit-list{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.iv2 .commit-item{background:var(--paper);border-radius:var(--r);padding:28px}
.iv2 .commit-item .ico{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font:500 13px var(--font-mono)}
.iv2 .commit-item h3{font-size:21px;font-weight:600;margin-top:18px}
.iv2 .commit-item p{color:var(--text-2);font-size:15px;margin-top:8px}
.iv2 .commit .ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}

@media (max-width:1024px){.iv2 .commit{grid-template-columns:1fr;gap:40px}}
@media (max-width:680px){.iv2 .commit-list{grid-template-columns:1fr}}

/* ---- css/components/learning-tabs.css ---- */
/**
 * learning-tabs.css - knowledge-centre teaser: a filter tab bar (system-tabs.css) over a grid
 * of article/webinar cards. Cards carry data-k="art|web"; js/tabs.js hides the others.
 */
.iv2 .lc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 24px;margin-top:36px}
.iv2 .lc{display:flex;flex-direction:column;gap:14px}
.iv2 .lc-img{aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--paper-2)}
.iv2 .lc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.iv2 .lc:hover .lc-img img{transform:scale(1.04)}
.iv2 .lc .meta{display:flex;gap:10px;align-items:center;font:500 11px/1 var(--font-mono);letter-spacing:.08em;color:var(--text-3)}
.iv2 .chip{padding:5px 9px;border-radius:var(--pill);border:1px solid var(--line);background:var(--paper-2);color:var(--text-2)}
.iv2 .chip.open::before{content:"◐ ";color:var(--accent)}
.iv2 .lc h3{font-size:20px;font-weight:600;line-height:1.3}

@media (max-width:1024px){.iv2 .lc-grid{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.iv2 .lc-grid{grid-template-columns:1fr}}

/* ---- css/components/about-split.css ---- */
/**
 * about-split.css - one rounded card split in two: building photo | "עלינו" text.
 * Stacks (photo on top) on phones.
 */
.iv2 .about{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r);overflow:hidden;background:var(--paper)}
.iv2 .about-img{min-height:420px;background:center/cover no-repeat}
.iv2 .about-body{padding:56px;display:flex;flex-direction:column;justify-content:center}
.iv2 .about-body .link{margin-top:24px}

@media (max-width:680px){
  .iv2 .about{grid-template-columns:1fr}
  .iv2 .about-img{min-height:240px}
  .iv2 .about-body{padding:32px 24px}
}

/* ---- css/components/cta-band.css ---- */
/**
 * cta-band.css - closing call to action on an accent wash, with the newsletter card.
 *
 * The newsletter form is NOT ours: it is the inovis-activetrail plugin's [inovis_nl_signup]
 * shortcode, which prints inline styles in the old teal palette (#0E6663). Its behaviour
 * (REST signup, honeypot, double opt-in) must stay exactly as it is, so this file only
 * re-skins it - which needs !important against inline style="". If the plugin's markup
 * changes, the form still works; it just falls back to its own look.
 */
.iv2 .cta{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--accent-soft),var(--paper) 60%)}
.iv2 .cta::before{content:"";position:absolute;inset:auto auto -55% -15%;width:900px;height:900px;border-radius:50%;background:radial-gradient(closest-side,var(--accent-glow),transparent);pointer-events:none}
.iv2 .cta-grid{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center}
.iv2 .cta h2{font-size:clamp(34px,4.4vw,56px);font-weight:300;line-height:1.1;letter-spacing:-.02em;margin-top:16px}
.iv2 .cta .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* ---- newsletter card: re-skin of the plugin form ---- */
.iv2 .news{background:var(--paper-2);border-radius:var(--r);padding:32px;box-shadow:0 20px 50px rgb(8 12 17 / .08)}
.iv2 .news .inovis-nlf{max-width:none!important;margin:0!important;padding:0!important;border:0!important;background:none!important}
.iv2 .news .inovis-nlf > p:first-child{font:600 22px/1.3 var(--font-ui)!important;color:var(--text)!important;margin:0 0 8px!important}
.iv2 .news .inovis-nlf > p:nth-child(2){font-size:15px!important;color:var(--text-2)!important;margin:0 0 20px!important}
.iv2 .news .inovis-nlf input[type=email]{height:48px!important;border-radius:var(--pill)!important;border:1px solid var(--line)!important;background:var(--paper)!important;color:var(--text)!important;padding:0 20px!important;font:16px var(--font-ui)!important}
.iv2 .news .inovis-nlf button[type=submit]{height:48px!important;padding:0 28px!important;border-radius:var(--pill)!important;background:var(--accent)!important;color:var(--ink)!important;font:600 16px/1 var(--font-ui)!important}
.iv2 .news .inovis-nlf button[type=submit]:hover{background:#3cbbe4!important}
.iv2 .news .inovis-nlf > p:nth-last-child(2){font-size:12px!important;color:var(--text-3)!important;line-height:1.5!important;margin-top:12px!important}

@media (max-width:1024px){.iv2 .cta-grid{grid-template-columns:1fr;gap:40px}}
@media (max-width:680px){.iv2 .news{padding:24px 20px}}

/* ---- css/components/page-hero.css ---- */
/**
 * page-hero.css - the opening band of an inner page (2.1.0).
 *
 *   <section class="phero">                      dark, text + media side by side
 *   <section class="phero phero--light">         light, text only (legal, contact, knowledge)
 *     <div class="wrap phero-grid">
 *       <div class="phero-text"> .eyebrow, h1, .phero-lead, .phero-note, .phero-actions </div>
 *       <div class="phero-media"> <video>/<img> </div>     (optional)
 * Sits under the site header (in the page flow), so it needs no header offset.
 */
.iv2 .phero{background:var(--ink);color:var(--on-ink);padding-block:88px 96px;position:relative;overflow:hidden}
.iv2 .phero::before{content:"";position:absolute;inset:-40% -10% auto auto;width:60%;aspect-ratio:1;background:radial-gradient(closest-side,var(--accent-glow),transparent);pointer-events:none}
.iv2 .phero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;position:relative}
.iv2 .phero h1{font-size:clamp(34px,4.4vw,58px);line-height:1.08;letter-spacing:-.015em;margin-top:18px}
.iv2 .phero h1 b,.iv2 .phero h1 strong{font-weight:700}
.iv2 .phero-lead{color:var(--on-ink-2);font-size:19px;max-width:56ch;margin-top:20px}
.iv2 .phero-note{color:var(--on-ink-3);font-size:13px;margin-top:14px}
.iv2 .phero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.iv2 .phero-media{border-radius:var(--r);overflow:hidden;background:var(--ink-2);box-shadow:0 40px 80px -30px rgb(0 0 0 / .6)}
.iv2 .phero-media video,.iv2 .phero-media img{width:100%;height:auto;display:block}

.iv2 .phero--light{background:var(--paper-2);color:var(--text);padding-block:72px 64px;border-bottom:1px solid var(--line)}
.iv2 .phero--light::before{display:none}
.iv2 .phero--light .phero-grid{grid-template-columns:1fr}
.iv2 .phero--light .phero-lead{color:var(--text-2)}
.iv2 .phero--light .phero-note{color:var(--text-3)}

@media (max-width:900px){
  .iv2 .phero{padding-block:56px 64px}
  .iv2 .phero-grid{grid-template-columns:1fr;gap:36px}
}

/* ---- css/components/feature-grid.css ---- */
/**
 * feature-grid.css - a grid of short benefit cards (2.1.0).
 *
 *   <div class="fgrid" style="--cols:3">
 *     <article class="fcard"><span class="fcard-n">01</span><h3>title</h3><p>text</p></article>
 * --cols = columns on desktop (default 3); 2 on tablets, 1 on phones. .fcard-n is optional.
 * On a white band (.band--white) the cards turn grey so they still stand out.
 */
.iv2 .fgrid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:16px}
.iv2 .fcard{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px 30px;display:flex;flex-direction:column;gap:10px;transition:transform .25s var(--ease),box-shadow .25s}
.iv2 .band--white .fcard{background:var(--paper)}
.iv2 .fcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgb(8 12 17 / .35)}
.iv2 .fcard h3{font-size:20px;font-weight:700;line-height:1.3}
.iv2 .fcard p{color:var(--text-2);font-size:16px}
.iv2 .fcard img{border-radius:10px;margin-bottom:6px}
.iv2 .fcard-n{font:500 12px/1 var(--font-mono);letter-spacing:.1em;color:var(--accent-ink)}

@media (max-width:1024px){.iv2 .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.iv2 .fgrid{grid-template-columns:1fr}}

/* ---- css/components/split.css ---- */
/**
 * split.css - text beside a picture, video or GIF (2.1.0).
 *
 *   <div class="split">                 text on the start side (right in RTL), media on the end side
 *   <div class="split split--flip">     media first
 *     <div class="split-text"> .eyebrow, h2.h2, p.lead, ul.ticks, .link / .btn </div>
 *     <figure class="media-frame"> <img>/<video> <figcaption>credit</figcaption> </figure>
 * .media-frame--contain = white padded frame for product shots and logos that must not be cropped.
 * Stacks on tablets, media first.
 * .ticks = a list of short benefit lines with a check mark (inside a split or anywhere in a band).
 */
.iv2 .split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.iv2 .split + .split{margin-top:96px}
.iv2 .split--flip .split-text{order:2}
.iv2 .split-text > p + p{margin-top:14px}
.iv2 .split-text .btn,.iv2 .split-text .link{margin-top:28px}
.iv2 .media-frame{margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink-2)}
.iv2 .media-frame img,.iv2 .media-frame video{width:100%;height:auto;display:block}
.iv2 .media-frame--contain{background:var(--paper-2);border:1px solid var(--line);padding:32px;display:grid;place-items:center}
.iv2 .media-frame--contain img{width:auto;max-height:420px;object-fit:contain}
.iv2 .media-frame figcaption{font-size:12px;color:var(--text-3);padding:10px 4px 0;background:var(--paper)}
.iv2 .band--white .media-frame figcaption{background:var(--paper-2)}

.iv2 .ticks{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.iv2 .ticks li{position:relative;padding-inline-start:30px;color:var(--text-2)}
.iv2 .ticks li::before{content:"";position:absolute;inset-inline-start:0;top:.45em;width:16px;height:9px;border-inline-start:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.iv2 .ticks b,.iv2 .ticks strong{color:var(--text)}

@media (max-width:900px){
  .iv2 .split{grid-template-columns:1fr;gap:32px}
  .iv2 .split .media-frame{order:-1}
  .iv2 .split--flip .split-text{order:0}
  .iv2 .split + .split{margin-top:64px}
}

/* ---- css/components/steps.css ---- */
/**
 * steps.css - a numbered process row (2.1.0).
 *
 *   <ol class="steps"><li><span class="step-n">01</span><h3>title</h3><p>text</p></li>...</ol>
 * Four across on desktop (--cols to change), two on tablets, one on phones. h3 is optional.
 */
.iv2 .steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));border-top:1px solid var(--line)}
.iv2 .steps li{padding-block:28px 8px;padding-inline:24px;border-inline-start:1px solid var(--line)}
.iv2 .steps li:first-child{border-inline-start:0;padding-inline-start:0}
.iv2 .step-n{display:block;font:500 13px/1 var(--font-mono);letter-spacing:.1em;color:var(--accent-ink);margin-bottom:16px}
.iv2 .steps h3{font-size:19px;font-weight:700;margin-bottom:8px}
.iv2 .steps p{color:var(--text-2);font-size:16px}

@media (max-width:1024px){
  .iv2 .steps{grid-template-columns:1fr 1fr}
  .iv2 .steps li:nth-child(odd){border-inline-start:0;padding-inline-start:0}
}
@media (max-width:640px){
  .iv2 .steps{grid-template-columns:1fr}
  .iv2 .steps li{border-inline-start:0;padding-inline:0}
}

/* ---- css/components/people.css ---- */
/**
 * people.css - person cards: round photo, name, role, short bio (2.1.0).
 *
 *   <div class="people"><article class="person"><img src alt><h3>name</h3><p class="person-role">role</p><p>bio</p></article></div>
 */
.iv2 .people{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.iv2 .person{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:32px;display:grid;grid-template-columns:96px 1fr;column-gap:22px;align-items:start}
.iv2 .band--white .person{background:var(--paper)}
.iv2 .person img{width:96px;height:96px;border-radius:50%;object-fit:cover;grid-row:span 3;background:var(--paper)}
.iv2 .person h3{font-size:20px;font-weight:700}
.iv2 .person-role{color:var(--accent-ink);font-size:14px;font-weight:600;margin-top:2px}
.iv2 .person p:not(.person-role){color:var(--text-2);font-size:15px;margin-top:10px}

@media (max-width:480px){
  .iv2 .person{grid-template-columns:1fr}
  .iv2 .person img{grid-row:auto;margin-bottom:16px}
}

/* ---- css/components/video-embed.css ---- */
/**
 * video-embed.css - frames for YouTube embeds and for the click-to-load video facade (2.1.0).
 *
 *   <div class="vgrid"> <figure class="vembed"><iframe ...></iframe><figcaption>..</figcaption></figure> ... </div>
 * The facade markup (inovis-video-facade.js) is copied exactly from the live page; it goes inside
 * <div class="vembed vembed--facade"> and only gets the frame from here.
 */
.iv2 .vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.iv2 .vembed{margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink)}
.iv2 .vembed iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0}
.iv2 .vembed figcaption{background:var(--paper-2);color:var(--text-2);font-size:14px;padding:12px 16px}
.iv2 .vembed--facade{max-width:880px;margin-inline:auto}
.iv2 .vembed--facade img{width:100%;height:auto;display:block}

/* ---- css/components/cta-strip.css ---- */
/**
 * cta-strip.css - closing call to action: a dark rounded card with a heading, a line and buttons (2.1.0).
 *
 *   <div class="cta-strip"><div><h2>title</h2><p>line</p></div><div class="cta-strip-actions">.btn...</div></div>
 */
.iv2 .cta-strip{background:var(--ink);color:var(--on-ink);border-radius:calc(var(--r) * 1.5);padding:56px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;position:relative;overflow:hidden}
.iv2 .cta-strip::after{content:"";position:absolute;inset:auto -10% -60% auto;width:50%;aspect-ratio:1;background:radial-gradient(closest-side,var(--accent-glow),transparent);pointer-events:none}
.iv2 .cta-strip h2{font-size:clamp(26px,3vw,38px);line-height:1.15}
.iv2 .cta-strip p{color:var(--on-ink-2);margin-top:10px;max-width:52ch}
.iv2 .cta-strip-actions{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:1}

@media (max-width:640px){.iv2 .cta-strip{padding:36px 24px}}

/* ---- css/components/prose.css ---- */
/**
 * prose.css - long-form text: legal pages, the accessibility statement (2.1.0).
 *
 *   <article class="prose"> ...the live page's own h2/h3/p/ul/ol/table/a... </article>
 * Keeps the live markup as it is and only styles it: a reading column on a white card.
 */
.iv2 .prose{max-width:820px;margin-inline:auto;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:56px clamp(24px,5vw,64px);color:var(--text-2);font-size:17px;line-height:1.75}
.iv2 .prose > *:first-child{margin-top:0}
.iv2 .prose h2{color:var(--text);font-size:26px;font-weight:700;line-height:1.3;margin:44px 0 12px}
.iv2 .prose h3{color:var(--text);font-size:20px;font-weight:700;margin:32px 0 10px}
.iv2 .prose h4{color:var(--text);font-size:17px;font-weight:700;margin:24px 0 8px}
.iv2 .prose p{margin:0 0 14px}
.iv2 .prose ul,.iv2 .prose ol{margin:0 0 16px;padding-inline-start:1.4em}
.iv2 .prose li{margin-bottom:6px}
.iv2 .prose a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.iv2 .prose strong,.iv2 .prose b{color:var(--text)}
.iv2 .prose table{width:100%;border-collapse:collapse;margin:16px 0 24px;font-size:15px}
.iv2 .prose th,.iv2 .prose td{border:1px solid var(--line);padding:10px 12px;text-align:start;vertical-align:top}
.iv2 .prose th{background:var(--paper);color:var(--text)}
.iv2 .prose hr{border:0;border-top:1px solid var(--line);margin:32px 0}
/* FAQ: <details><summary>question</summary>answer</details> */
.iv2 .prose details{border-bottom:1px solid var(--line);padding-block:14px}
.iv2 .prose summary{cursor:pointer;color:var(--text);font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:16px}
.iv2 .prose summary::-webkit-details-marker{display:none}
.iv2 .prose summary::after{content:"+";color:var(--accent-ink);font-weight:400;font-size:22px;line-height:1}
.iv2 .prose details[open] summary::after{content:"\2212"}
.iv2 .prose details > :not(summary){margin-top:10px}

@media (max-width:640px){
  .iv2 .prose{padding:32px 20px;font-size:16px}
  .iv2 .prose table{display:block;overflow-x:auto}
}

/* ---- css/components/footer.css ---- */
/**
 * footer.css - dark footer: logo + tagline, three link columns, legal row.
 * Keeps id="colophon" on the element so print CSS and the portal's privacy-link script
 * (data-inovis-privacy) treat it like the theme footer.
 */
.iv2 .ftr{background:var(--ink);color:var(--on-ink-3);padding-block:64px calc(32px + env(safe-area-inset-bottom,0px));font-size:14px}
.iv2 .ftr-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.iv2 .ftr-logo{height:40px;width:auto}
.iv2 .ftr h4{margin:0 0 14px;color:var(--on-ink);font:500 11px/1 var(--font-mono);letter-spacing:.12em}
.iv2 .ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.iv2 .ftr a:hover{color:var(--on-ink)}
.iv2 .ftr .tag{color:var(--on-ink-2);margin-top:16px;max-width:30ch}
.iv2 .ftr-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid var(--line-ink);font-size:13px}

@media (max-width:1024px){.iv2 .ftr-top{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.iv2 .ftr-top{grid-template-columns:1fr}}

/* ---- css/components/reveal.css ---- */
/**
 * reveal.css - gentle lift of .rv blocks as they scroll into view (js/reveal.js adds .in).
 * Content is visible at rest: only transform moves, never opacity, so a script failure or a
 * backgrounded tab can never leave a section invisible. Off under prefers-reduced-motion.
 */
@media (prefers-reduced-motion:no-preference){
  .iv2.is-js .rv{transform:translateY(14px);transition:transform .9s var(--ease)}
  .iv2.is-js .rv.in{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .iv2 *{transition:none!important;animation:none!important}
}