/* =====================================================================================================================
   Invento sign-in / landing page (Default.aspx).

   Layout and voice follow GrowwInn (growwinn.com, a sister TraveleXe product): a full-bleed brand-colour hero, a serif
   display face over a clean sans, pill labels, a hand-drawn underline, a marquee band, product screens drawn in HTML,
   a comparison table and a dark closing band. The colours are Invento's own, taken from its mark - navy #14254A /
   #0E1B33, brand blue #2F6DF6 and the mark's light blues #CFE0FF / #9BBCFF - instead of GrowwInn's lime.

   Self-contained: the page no longer loads the legacy csshome/login_style.css. jshome/login.js still drives the
   sign-in through the ids and the .inv-alert message box styled below.
   ===================================================================================================================== */
:root {
    --ivl-sky: #CFE0FF;        /* the hero field (GrowwInn's lime) */
    --ivl-sky-d: #B5CEFF;
    --ivl-sky-l: #EAF1FF;
    --ivl-mist: #F2F5FC;       /* quiet sections (GrowwInn's blush) */
    --ivl-navy: #14254A;
    --ivl-ink: #0E1B33;        /* text and primary buttons (GrowwInn's black) */
    --ivl-blue: #2F6DF6;
    --ivl-blue-d: #1D4FD8;
    --ivl-blue-2: #9BBCFF;
    --ivl-text: #1B2742;
    --ivl-muted: #4E5B78;
    --ivl-line: #DCE3F0;
    --ivl-deep: #0E1B33;       /* the dark band */
    --ivl-on-deep: #B8C5E2;
    --ivl-ok: #12855A;
    --ivl-warn: #B45309;
    --ivl-serif: "Platypi", Georgia, "Times New Roman", serif;
    --ivl-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    --ivl-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --ivl-ease: cubic-bezier(.2, .7, .1, 1);
}
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body.ivl { margin: 0; background: #fff; color: var(--ivl-text); font-family: var(--ivl-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.ivl *, .ivl *::before, .ivl *::after { box-sizing: border-box; }
.ivl img, .ivl svg { max-width: 100%; }
:where(.ivl) a { color: inherit; }
.ivl :focus-visible { outline: 2px solid var(--ivl-blue); outline-offset: 3px; }
.ivl-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.ivl-skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: #fff; padding: 8px 14px; border-radius: 8px; }
.ivl-skip:focus { left: 12px; }

/* ------------------------------------------------------------------ buttons, pills, links */
.ivl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 12px; border: 2px solid var(--ivl-ink); background: var(--ivl-ink); color: #fff; font: 700 16px/1 var(--ivl-sans); text-decoration: none; cursor: pointer; transition: transform .2s var(--ivl-ease), background .2s ease, box-shadow .2s ease, color .2s ease; white-space: nowrap; }
.ivl-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(14, 27, 51, .22); background: var(--ivl-navy); }
.ivl-btn span { transition: transform .25s var(--ivl-ease); }
.ivl-btn:hover span { transform: translateX(3px); }
.ivl-btn--ghost { background: transparent; color: var(--ivl-ink); }
.ivl-btn--ghost:hover { background: var(--ivl-ink); color: #fff; }
.ivl-btn--sm { height: 42px; padding: 0 18px; font-size: 14.5px; border-radius: 10px; }
.ivl-btn--sky { background: var(--ivl-sky); border-color: var(--ivl-sky); color: var(--ivl-ink); }
.ivl-btn--sky:hover { background: #fff; border-color: #fff; }
.ivl-btn--ghost-l { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
.ivl-btn--ghost-l:hover { background: #fff; color: var(--ivl-ink); border-color: #fff; }
.ivl-link { font-weight: 600; font-size: 15px; text-decoration: none; color: var(--ivl-ink); }
.ivl-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.ivl-badge, .ivl-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ivl-badge { background: var(--ivl-ink); color: #fff; }
.ivl-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--ivl-sky); box-shadow: 0 0 0 3px rgba(207, 224, 255, .25); }
.ivl-pill { background: var(--ivl-sky); color: var(--ivl-ink); margin-bottom: 18px; }
.ivl-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ivl-blue); }
.ivl-pill--dark { background: var(--ivl-ink); color: #fff; }
.ivl-pill--dark::before { background: var(--ivl-sky); }
.ivl-pill--sky { background: var(--ivl-sky); }

/* ------------------------------------------------------------------ header */
.ivl-top { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px); transition: box-shadow .25s ease; }
.ivl-top.is-scrolled { box-shadow: 0 1px 0 var(--ivl-line), 0 8px 24px rgba(14, 27, 51, .06); }
.ivl-top__in { display: flex; align-items: center; gap: 32px; height: 66px; }
.ivl-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.ivl-logo__word { font: 800 25px/1 var(--ivl-sans); letter-spacing: -.03em; color: var(--ivl-ink); }
.ivl-logo--light .ivl-logo__word { color: #fff; }
.ivl-nav { display: flex; gap: 26px; }
.ivl-nav a { font-weight: 600; font-size: 15px; color: var(--ivl-ink); text-decoration: none; position: relative; }
.ivl-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--ivl-blue); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ivl-ease); }
.ivl-nav a:hover::after { transform: scaleX(1); }
.ivl-top__cta { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.ivl-burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: var(--ivl-ink); cursor: pointer; align-items: center; justify-content: center; }

/* ------------------------------------------------------------------ hero: the Invento mark, opened up
   The stage is the logo tile at hero size - the same #1F3A8A -> #2F6DF6 gradient and rounded corners - with the mark's
   three layers floating behind as line art. The sign-in card is the top layer, with the mark's two light blues as the
   sheets beneath it. The Allotment Board rises out of the bottom of the stage. */
.ivl-hero { position: relative; padding: 12px 20px 64px; background: #fff; }
.ivl-stage { position: relative; isolation: isolate; overflow: hidden; max-width: 1400px; margin: 0 auto; padding: 34px 0 150px; border-radius: 36px; color: #fff; background: linear-gradient(135deg, #1F3A8A 0%, #2A5BDB 62%, #2F6DF6 100%); }
/* the background of the hero text: the Invento mark as a real isometric stack, in CSS 3D (no canvas, no WebGL).
   One translucent plate per product line, the white "live pool" plate on top like the logo's diamond. The script
   (ivlIso) drops the plates in along the beam, lets them breathe apart, then lifts them off from the top and re-stacks. */
.ivl-iso { position: absolute; z-index: -1; left: 42%; top: 56%; width: 620px; height: 620px; transform: translate(-50%, -50%); perspective: 1400px; pointer-events: none; }
.ivl-iso__scene { position: absolute; left: 50%; top: 60%; width: 320px; height: 236px; margin: -118px 0 0 -160px; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-42deg); }
.ivl-iso__plate { position: absolute; inset: 0; transform-style: preserve-3d; display: flex; flex-direction: column; justify-content: space-between; padding: 16px 18px 18px; border-radius: 18px; background: rgba(207, 224, 255, .07); border: 1px solid rgba(207, 224, 255, .3); color: rgba(255, 255, 255, .5); opacity: 0; transform: translateZ(calc(var(--i) * 20px + 300px)); transition: transform 1s cubic-bezier(.2, .8, .2, 1), opacity .6s ease, background .4s ease; }
.ivl-iso__plate:nth-child(even) { background: rgba(155, 188, 255, .09); }
.ivl-iso__plate::after { content: ""; position: absolute; inset: 0; border-radius: 18px; background: rgba(10, 26, 80, .2); transform: translateZ(-7px); }
.ivl-iso__plate b { font: 600 10.5px/1 var(--ivl-mono); letter-spacing: .16em; text-transform: uppercase; }
.ivl-iso__plate .u { height: 46%; border-radius: 10px; background-image: radial-gradient(circle, rgba(255, 255, 255, .45) 1.7px, transparent 2px); background-size: 15px 15px; opacity: .6; }
.ivl-iso__plate.on { opacity: 1; transform: translateZ(calc(var(--i) * 20px)); }
.ivl-iso__scene.breathe .ivl-iso__plate.on { transform: translateZ(calc(var(--i) * 28px)); }
/* the top plate is the logo's white diamond - kept see-through so the headline over it stays readable */
.ivl-iso__plate--top { background: rgba(255, 255, 255, .16) !important; border: 1.5px solid rgba(255, 255, 255, .95); color: #fff; box-shadow: 0 0 34px rgba(207, 224, 255, .5), inset 0 0 24px rgba(255, 255, 255, .18); }
.ivl-iso__plate--top .u { background-image: radial-gradient(circle, rgba(255, 255, 255, .85) 1.7px, transparent 2px); opacity: .9; }
/* the beam: a glowing line into the top of the stack, with a pulse travelling down it */
.ivl-iso__beam { position: absolute; left: 50%; top: -30%; width: 2px; height: 66%; margin-left: -1px; background: linear-gradient(180deg, rgba(207, 224, 255, 0), rgba(207, 224, 255, .75)); box-shadow: 0 0 12px rgba(207, 224, 255, .6); opacity: .85; }
.ivl-iso__beam i { position: absolute; left: 50%; top: 0; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 4px rgba(255, 255, 255, .7); animation: ivl-beam 2.4s cubic-bezier(.5, 0, .7, 1) infinite; }
@keyframes ivl-beam { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.ivl-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 0 72px; align-items: center; }
.ivl-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #CFE0FF; }
.ivl-h1 { margin: 0; font: 700 clamp(42px, 4.6vw, 68px)/1.04 var(--ivl-serif); letter-spacing: -.03em; color: #fff; }
.ivl-h1__l { display: block; animation: ivl-rise .8s var(--ivl-ease) both; }
.ivl-h1__l:nth-child(2) { animation-delay: .1s; }
.ivl-h1__l:nth-child(3) { animation-delay: .2s; }
@keyframes ivl-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.ivl-h1__soft { color: #CFE0FF; }
.ivl-layers { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; max-width: 560px; }
.ivl-layers li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.ivl-layers b { display: block; color: #fff; font-size: 15.5px; }
/* the mark's own three shapes: the white diamond, then the two chevrons */
.ivl-layers i { width: 34px; height: 22px; margin-top: 3px; background: center / contain no-repeat; }
.ivl-layers i.g1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='12 9 24 14'%3E%3Cpath d='M24 10l11 6-11 6-11-6z' fill='%23fff'/%3E%3C/svg%3E"); }
.ivl-layers i.g2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='12 14 24 14'%3E%3Cpath d='M13 16l11 6 11-6' fill='none' stroke='%23CFE0FF' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ivl-layers i.g3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='12 14 24 14'%3E%3Cpath d='M13 16l11 6 11-6' fill='none' stroke='%239BBCFF' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ivl-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 26px; }
.ivl-hero .ivl-hero__cta { align-items: center; gap: 18px 28px; margin: 34px 0 0; }
.ivl-btn--white { background: #fff; border-color: #fff; color: var(--ivl-ink); }
.ivl-btn--white:hover { background: #CFE0FF; border-color: #CFE0FF; color: var(--ivl-ink); box-shadow: 0 10px 24px rgba(9, 22, 60, .3); }
.ivl-textlink { font-weight: 700; font-size: 15.5px; color: var(--ivl-ink); text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid var(--ivl-blue); transition: color .2s ease, border-color .2s ease; }
.ivl-textlink:hover { color: var(--ivl-blue-d); }
.ivl-textlink--light { color: #fff; border-bottom-color: #9BBCFF; }
.ivl-textlink--light:hover { color: #fff; border-bottom-color: #fff; }

/* the sign-in card: the top layer of the stack, two sheets in the mark's light blues beneath it */
.ivl-hero__login { position: relative; align-self: start; padding-bottom: 26px; }
.ivl-hero__login::before, .ivl-hero__login::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 26px; border-radius: 24px; pointer-events: none; transform-origin: 50% 100%; }
.ivl-hero__login::before { z-index: 1; background: #CFE0FF; transform: translateY(13px) scale(.955); animation: ivl-sheet 7s ease-in-out -2.3s infinite; }
.ivl-hero__login::after { z-index: 0; background: #9BBCFF; transform: translateY(26px) scale(.91); animation: ivl-sheet2 7s ease-in-out -4.6s infinite; }
@keyframes ivl-sheet { 0%, 100% { transform: translateY(13px) scale(.955); } 50% { transform: translateY(16px) scale(.955); } }
@keyframes ivl-sheet2 { 0%, 100% { transform: translateY(26px) scale(.91); } 50% { transform: translateY(31px) scale(.91); } }
.ivl-pass { position: relative; z-index: 2; background: #fff; color: var(--ivl-text); border-radius: 24px; padding: 22px 30px 4px; box-shadow: 0 30px 60px rgba(9, 22, 60, .28); }
.ivl-pass__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ivl-blue-d); }
.ivl-pass__lock { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #E9F8F1; color: var(--ivl-ok); letter-spacing: .04em; text-transform: none; font-size: 12px; }
.ivl-pass h2 { font: 700 31px/1.05 var(--ivl-serif); color: var(--ivl-ink); margin: 0 0 6px; letter-spacing: -.01em; }
.ivl-pass__sub { margin: 0 0 13px; color: var(--ivl-muted); font-size: 14.5px; }
.ivl-pass .hrip { margin-bottom: 10px; }
.ivl-pass .hrip > label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--ivl-ink); }
.ivl-pass input[type=text], .ivl-pass input[type=password] { width: 100%; height: 48px; padding: 0 15px; border: 1.5px solid #D3DCEE; border-radius: 12px; background: #F8FAFF; font: 500 15.5px var(--ivl-sans); color: var(--ivl-ink); outline: none; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.ivl-pass input::placeholder { color: #98A3BC; }
.ivl-pass input[type=text]:hover, .ivl-pass input[type=password]:hover { border-color: #AFC0E0; }
.ivl-pass input[type=text]:focus, .ivl-pass input[type=password]:focus { border-color: var(--ivl-blue); background: #fff; box-shadow: 0 0 0 4px rgba(47, 109, 246, .15); }
.ivl-pw { position: relative; }
.ivl-pw input { padding-right: 48px !important; }
.ivl-pw__eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--ivl-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ivl-pw__eye:hover, .ivl-pw__eye.is-on { color: var(--ivl-blue); background: var(--ivl-sky-l); }
.ivl-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 13px; font-size: 14px; }
.ivl-check { display: inline-flex; align-items: center; gap: 8px; color: var(--ivl-muted); cursor: pointer; }
.ivl-check input { width: 17px; height: 17px; accent-color: var(--ivl-blue); margin: 0; }
.ivl-pass .mploginfp { font-weight: 700; color: var(--ivl-blue-d); text-decoration: none; }
.ivl-pass .mploginfp:hover { text-decoration: underline; text-underline-offset: 3px; }
.ivl-submit { width: 100%; height: 54px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #1F3A8A, #2F6DF6); color: #fff; font: 700 16px var(--ivl-sans); display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; box-shadow: 0 10px 22px rgba(47, 109, 246, .28); transition: box-shadow .2s ease, transform .2s var(--ivl-ease); }
.ivl-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(47, 109, 246, .38); }
.ivl-submit[disabled] { opacity: .75; cursor: progress; transform: none; }
.btn-spin { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: ivl-spin .7s linear infinite; }
@keyframes ivl-spin { to { transform: rotate(360deg); } }
.ivl .inv-alert { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 11px 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; border: 1px solid #F1C4C4; background: #FFF5F5; color: #8F1D1D; }
.ivl .inv-alert[hidden] { display: none; }
.ivl .inv-alert .ic { flex: 0 0 18px; height: 18px; border-radius: 50%; background: #C62828; color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.ivl .inv-alert b { display: block; font-weight: 700; margin-bottom: 1px; }
.ivl .inv-alert.svc { border-color: #F0D29A; background: #FFFAF0; color: #7A4300; }
.ivl .inv-alert.svc .ic { background: #B86E00; }
.ivl-pass__new { margin: 10px 0 0; padding: 12px 0 14px; font-size: 14px; color: var(--ivl-muted); text-align: center; }
.ivl-pass__new a { font-weight: 700; color: var(--ivl-ink); text-decoration: none; }
.ivl-pass__new a:hover { color: var(--ivl-blue-d); }

/* the Allotment Board, rising out of the stage: one row per product; each tile is one unit, lettered with the channel that sold it */
.ivl-board { position: relative; z-index: 3; margin-top: -96px; background: #fff; border-radius: 26px; box-shadow: 0 24px 60px rgba(14, 27, 51, .14), 0 0 0 1px rgba(14, 27, 51, .05); overflow: hidden; }
.ivl-board__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; padding: 16px 24px; background: #F3F7FF; font-size: 13px; color: var(--ivl-muted); }
.ivl-board__head b { margin-right: 10px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ivl-ink); }
.ivl-board__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12.5px; }
.ivl-board__legend i { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 18px; margin-right: 6px; border-radius: 5px; background: #1F3A8A; color: #fff; font: 700 9.5px/1 var(--ivl-mono); font-style: normal; }
.ivl-board__rows { list-style: none; margin: 0; padding: 6px 0; }
.ivl-brow { position: relative; display: grid; grid-template-columns: 88px 190px minmax(0, 1fr) 108px; gap: 0 16px; align-items: center; padding: 10px 24px; }
.ivl-brow + .ivl-brow { box-shadow: 0 -1px 0 #EEF2F9; }
.ivl-brow__k { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--ivl-ink); }
.ivl-brow__n { font-size: 14px; color: var(--ivl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ivl-brow__tiles { display: flex; flex-wrap: wrap; gap: 4px; }
.ivl-brow__tiles i { width: 22px; height: 22px; border: 1.5px solid #CFE0FF; border-radius: 6px; background: #fff; font: 700 8.5px/19px var(--ivl-mono); font-style: normal; text-align: center; color: transparent; transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s var(--ivl-ease), opacity .3s ease; }
.ivl-brow__tiles i.s { background: #1F3A8A; border-color: #1F3A8A; color: #CFE0FF; }
.ivl-brow__tiles i.new { background: #2F6DF6; border-color: #2F6DF6; color: #fff; transform: translateY(-3px); }
.ivl-brow__tiles i.r { background: #E7F7EF; border-color: #86D0AA; }
.ivl-brow__c { text-align: right; font-size: 12.5px; color: var(--ivl-muted); white-space: nowrap; }
.ivl-brow__c b { margin-right: 3px; font: 700 21px/1 var(--ivl-serif); color: var(--ivl-ink); }
.ivl-brow.is-stop .ivl-brow__tiles i { opacity: .45; }
.ivl-brow.is-stop .ivl-brow__c b { color: #C2402F; }
.ivl-stamp { position: absolute; left: 58%; top: 50%; z-index: 2; padding: 6px 14px; border-radius: 999px; background: #C2402F; color: #fff; font-size: 12.5px; font-weight: 800; font-style: normal; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.85); box-shadow: 0 8px 18px rgba(194, 64, 47, .3); transition: opacity .2s ease, transform .35s cubic-bezier(.2, 1.5, .4, 1); }
.ivl-stamp.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ivl-stamp.is-reload { background: var(--ivl-ok); box-shadow: 0 8px 18px rgba(18, 133, 90, .28); }
.ivl-board__foot { margin: 0; padding: 10px 24px 14px; font-size: 12px; color: var(--ivl-muted); }

/* ------------------------------------------------------------------ marquee */
.ivl-marquee { background: var(--ivl-ink); color: #fff; overflow: hidden; white-space: nowrap; border-block: 1px solid #000; }
.ivl-marquee__track { display: inline-flex; animation: ivl-marq 46s linear infinite; }
.ivl-marquee span { display: inline-flex; align-items: center; gap: 10px; padding: 17px 22px; font-weight: 700; font-size: 14.5px; }
.ivl-marquee span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ivl-sky); }
@keyframes ivl-marq { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------ sections */
.ivl-sec { padding: clamp(70px, 9vw, 112px) 0; overflow-x: clip; }
.ivl-sec--tight { padding-top: clamp(40px, 5vw, 70px); }
.ivl-sec--mist { background: var(--ivl-mist); }
.ivl-sec--sky { background: var(--ivl-sky); }
.ivl-sec--deep { background: var(--ivl-deep); color: var(--ivl-on-deep); }
.ivl-head { text-align: center; max-width: 760px; margin: 0 auto clamp(36px, 5vw, 56px); }
.ivl-h2 { font: 700 clamp(32px, 4vw, 54px)/1.08 var(--ivl-serif); letter-spacing: -.015em; color: var(--ivl-ink); margin: 0; }
.ivl-sec--deep .ivl-h2 { color: #fff; }
.ivl-p { font-size: clamp(16px, 1.2vw, 18px); color: var(--ivl-muted); margin: 16px 0 0; }
.ivl-head .ivl-p { margin-left: auto; margin-right: auto; max-width: 620px; }
.ivl-sec--deep .ivl-p { color: var(--ivl-on-deep); }
.ivl-sec--sky .ivl-p { color: #2B3A5C; }

/* before / with */
.ivl-story__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.ivl-toggle { display: inline-flex; gap: 4px; margin-top: 28px; padding: 4px; border: 2px solid var(--ivl-ink); border-radius: 12px; background: #fff; }
.ivl-toggle button { border: 0; border-radius: 8px; padding: 10px 16px; font: 700 14px var(--ivl-sans); background: transparent; color: var(--ivl-ink); cursor: pointer; transition: background .2s ease, color .2s ease; }
.ivl-toggle button.is-on { background: var(--ivl-ink); color: #fff; }
/* the 3-second countdown to the next automatic switch, drawn under the active button */
.ivl-toggle button { position: relative; }
.ivl-toggle.is-auto button.is-on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--ivl-sky); transform-origin: left; animation: ivl-fill 3s linear forwards; }
@keyframes ivl-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* by hand at 9:00 vs on Invento at 9:15: a big clock that runs between the two, a 15-minute track, and the words that change with it */
.ivl-clock { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 10px; }
.ivl-clock__t { font: 700 clamp(68px, 8.4vw, 112px)/.95 var(--ivl-serif); letter-spacing: -.03em; color: var(--ivl-ink); font-variant-numeric: tabular-nums; transition: color .5s ease; }
.ivl-clock__ap { font-weight: 800; font-size: 18px; letter-spacing: .06em; color: var(--ivl-muted); }
.is-after .ivl-clock__t { color: var(--ivl-blue); }
.ivl-track { display: flex; align-items: center; gap: 12px; max-width: 440px; margin: 0 0 26px; font-size: 12.5px; font-weight: 800; color: var(--ivl-muted); }
.ivl-track i { position: relative; flex: 1; height: 6px; border-radius: 999px; background: #E1E7F3; overflow: hidden; }
.ivl-track b { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--ivl-blue), var(--ivl-blue-2)); transition: width .8s cubic-bezier(.3, .7, .2, 1); }
.is-after .ivl-track b { width: 100%; }
.ivl-story__title { font-size: clamp(30px, 3.4vw, 46px); min-height: 3.3em; }
.ivl-story__copy .ivl-p { min-height: 4.8em; }
.ivl-swap { display: inline-block; transition: opacity .22s ease, transform .22s ease; }
p.ivl-swap { display: block; }
.ivl-swap.out { opacity: 0; transform: translateY(8px); }
.is-after .ivl-pill.ivl-swap { background: var(--ivl-ink); color: #fff; }
.is-after .ivl-pill.ivl-swap::before { background: #3DDC97; }
/* the five notes sit on a real grid, so they can never overlap at any width or with any text. "Before" is the
   messy desk: each note tilted and nudged inside its own cell. "With Invento" lets them settle into an aligned grid. */
.ivl-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 26px; align-items: stretch; padding: 12px 6px; }
.ivl-note { display: flex; gap: 12px; align-items: center; min-width: 0; background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: 0 16px 34px rgba(14, 27, 51, .12); transition: transform .55s var(--ivl-ease), opacity .2s ease, box-shadow .3s ease; }
.ivl-note > div { min-width: 0; }
.ivl-note i { flex: 0 0 34px; height: 34px; border-radius: 10px; background: #FDECEC; color: #B4232A; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; transition: background .3s ease, color .3s ease; }
.ivl-note b { display: block; font-size: 14.5px; line-height: 1.3; color: var(--ivl-ink); }
.ivl-note small { display: block; font-size: 12.5px; line-height: 1.4; margin-top: 2px; color: #B4232A; transition: color .3s ease; }
.ivl-note > div, .ivl-note > i { transition: opacity .18s ease, transform .18s ease; }
.ivl-note.flip > div, .ivl-note.flip > i { opacity: 0; transform: translateY(6px); }
.ivl-note.n5 { grid-column: 1 / -1; justify-self: center; width: calc(50% - 13px); }
/* small tilts and nudges only: the 30px row gap absorbs them */
.ivl-note.n1 { transform: translate(-4px, 4px) rotate(-3deg); }
.ivl-note.n2 { transform: translate(8px, 12px) rotate(4deg); }
.ivl-note.n3 { transform: translate(-10px, -2px) rotate(2.5deg); }
.ivl-note.n4 { transform: translate(6px, 8px) rotate(-4deg); }
.ivl-note.n5 { transform: translate(18px, 2px) rotate(-2deg); }
.is-after .ivl-note { transform: none !important; box-shadow: 0 10px 22px rgba(14, 27, 51, .09); }
.is-after .ivl-note i { background: var(--ivl-sky); color: var(--ivl-blue-d); }
.is-after .ivl-note small { color: var(--ivl-ok); }

/* three things */
.ivl-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ivl-tcard { border: 1px solid var(--ivl-line); border-radius: 20px; padding: 18px 18px 26px; background: #fff; transition: transform .3s var(--ivl-ease), box-shadow .3s ease; }
.ivl-tcard:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(14, 27, 51, .1); }
.ivl-tcard__art { background: var(--ivl-mist); border-radius: 14px; padding: 16px; min-height: 132px; display: flex; flex-direction: column; justify-content: center; gap: 8px; margin-bottom: 20px; }
.ivl-tcard__art--bars { flex-direction: row; align-items: flex-end; gap: 10px; padding: 18px 22px 16px; height: 132px; }
.ivl-tcard__art--bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--ivl-blue), var(--ivl-blue-2)); }
.m-row { display: flex; justify-content: space-between; gap: 10px; background: #fff; border-radius: 9px; padding: 8px 11px; font-size: 13px; }
.m-row span { color: var(--ivl-muted); }
.m-row b { color: var(--ivl-ink); font-weight: 700; }
.m-row b.ok { color: var(--ivl-ok); }
.ivl-tcard__ic { display: inline-flex; width: 34px; height: 34px; border-radius: 10px; background: var(--ivl-sky); color: var(--ivl-ink); font-weight: 800; font-size: 13px; align-items: center; justify-content: center; }
.ivl-tcard h3 { font: 700 21px/1.2 var(--ivl-sans); letter-spacing: -.01em; color: var(--ivl-ink); margin: 12px 0 8px; }
.ivl-tcard p { margin: 0; font-size: 15px; color: var(--ivl-muted); }

/* products: a deck of cards that stack as you scroll (GrowwInn pattern). Each card wrapper is sticky, 14px lower than
   the one before, so every earlier card keeps a 14px edge showing under the next; the upward shadow makes each new card
   read as sliding over the last. Desktop only - on phones they are a plain list. */
.ivl-deck { margin-top: 8px; }
.ivl-stack { margin-bottom: 22px; }
.ivl-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 52px; align-items: center; border: 1px solid var(--ivl-line); border-radius: 28px; padding: clamp(26px, 4vw, 48px); background: #fff; box-shadow: 0 -18px 50px -34px rgba(14, 27, 51, .45); }
.ivl-stack:nth-child(even) .ivl-panel { background: var(--ivl-mist); }
.ivl-stack:nth-child(even) .ivl-mock { background: #fff; }
.ivl-deck__cta { display: flex; justify-content: center; margin-top: 18px; }
@media (min-width: 961px) {
    .ivl-stack { position: sticky; top: calc(92px + var(--i, 0) * 14px); margin-bottom: 0; padding-bottom: 32px; }
    .ivl-panel { min-height: 520px; }
    .ivl-deck__cta { margin-top: 26px; }
}
.ivl-num { display: inline-flex; padding: 5px 12px; border-radius: 999px; background: var(--ivl-sky); font-size: 12.5px; font-weight: 800; color: var(--ivl-ink); }
.ivl-panel h3 { font: 700 clamp(26px, 2.6vw, 36px)/1.12 var(--ivl-serif); color: var(--ivl-ink); margin: 16px 0 12px; }
.ivl-panel p { margin: 0 0 18px; color: var(--ivl-muted); }
.ivl-bullets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
.ivl-bullets li { position: relative; padding-left: 20px; font-size: 14.5px; font-weight: 500; color: var(--ivl-text); }
.ivl-bullets li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--ivl-ink); }

/* drawn product screens */
.ivl-mock { background: #fff; border: 1px solid var(--ivl-line); border-radius: 18px; padding: 14px 16px 18px; box-shadow: 0 22px 44px rgba(14, 27, 51, .12); }
.ivl-mock__bar { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ivl-ink); margin-bottom: 14px; }
.ivl-mock__bar i { width: 9px; height: 9px; border-radius: 50%; background: #E6EAF3; }
.ivl-mock__bar i:nth-child(1) { background: #FF8A80; } .ivl-mock__bar i:nth-child(2) { background: #FFD166; } .ivl-mock__bar i:nth-child(3) { background: #7BDCB5; }
.ivl-mock__bar span { margin-left: 8px; }
.ivl-mock__bar em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--ivl-ink); background: var(--ivl-sky); padding: 3px 10px; border-radius: 999px; }
.ivl-mock__legend { display: flex; gap: 16px; margin-top: 12px; font-size: 12px; color: var(--ivl-muted); }
.ivl-mock__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.ivl-mock__legend .a, .ivl-cal .a { background: var(--ivl-ink); color: #fff; }
.ivl-mock__legend .w, .ivl-cal .w { background: var(--ivl-sky); color: var(--ivl-ink); }
.ivl-mock__legend .x, .ivl-cal .x { background: #F1F3F8; color: #9AA4BA; }
.ivl-cal { display: grid; grid-template-columns: 64px repeat(6, minmax(0, 1fr)); gap: 5px; font-size: 12.5px; font-weight: 700; }
.ivl-cal span { height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.ivl-cal .h { color: var(--ivl-muted); font-weight: 600; height: 22px; }
.ivl-cal .r { justify-content: flex-start; color: var(--ivl-ink); }
.ivl-seats { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px; }
.ivl-seats span { height: 30px; border-radius: 7px 7px 4px 4px; background: var(--ivl-ink); }
.ivl-seats span.t { background: #E6EAF3; }
.ivl-seats span.s { background: var(--ivl-sky); box-shadow: inset 0 0 0 2px var(--ivl-blue); }
.ivl-seats b { visibility: hidden; }
.ivl-rows { display: grid; gap: 12px; }
.ivl-rows div { display: grid; grid-template-columns: 92px minmax(0, 1fr) 70px; gap: 12px; align-items: center; font-size: 13px; }
.ivl-rows span { font-weight: 700; color: var(--ivl-ink); }
.ivl-rows i { height: 12px; border-radius: 999px; background: #EDF1F8; position: relative; overflow: hidden; }
.ivl-rows i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--ivl-blue); border-radius: 999px; }
.ivl-rows b { color: var(--ivl-muted); font-weight: 600; text-align: right; }
.ivl-matrix { display: grid; grid-template-columns: 70px repeat(3, minmax(0, 1fr)); gap: 5px; font-size: 13px; }
.ivl-matrix span { height: 36px; border-radius: 8px; background: var(--ivl-mist); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ivl-ink); }
.ivl-matrix .h { background: transparent; color: var(--ivl-muted); font-weight: 600; }
.ivl-list { display: grid; gap: 8px; }
.ivl-list div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 11px 13px; border-radius: 11px; background: var(--ivl-mist); font-size: 13px; }
.ivl-list b { color: var(--ivl-ink); }
.ivl-list span { grid-row: 2; color: var(--ivl-muted); }
.ivl-list em { grid-row: span 2; align-self: center; font-style: normal; font-weight: 800; font-size: 12px; color: var(--ivl-ok); }
.ivl-list em.x { color: #9AA4BA; } .ivl-list em.w { color: var(--ivl-warn); }
.ivl-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; font-size: 11.5px; font-weight: 700; text-align: center; }
.ivl-steps span { padding: 8px 4px; border-radius: 8px; background: #F1F3F8; color: #9AA4BA; }
.ivl-steps .d { background: var(--ivl-ink); color: #fff; }
.ivl-steps .n { background: var(--ivl-sky); color: var(--ivl-ink); }

/* platform */
.ivl-plat { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.ivl-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 30px; margin-top: 34px; }
.ivl-feat__ic { display: inline-flex; width: 36px; height: 36px; border-radius: 10px; background: var(--ivl-ink); color: var(--ivl-sky); align-items: center; justify-content: center; font-weight: 800; font-size: 16px; }
.ivl-feat h4 { font: 700 17px/1.25 var(--ivl-sans); color: var(--ivl-ink); margin: 12px 0 6px; }
.ivl-feat p { margin: 0; font-size: 14.5px; color: #34446A; }
.ivl-plat__mock { display: grid; gap: 16px; }
.ivl-plat__mock .ivl-mock--small { width: 70%; margin-left: auto; margin-top: -40px; position: relative; }
.ivl-orders { display: grid; gap: 8px; }
.ivl-orders div { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 11px; background: var(--ivl-mist); font-size: 13px; }
.ivl-orders b { color: var(--ivl-ink); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12.5px; }
.ivl-orders em { font-style: normal; font-weight: 800; font-size: 12px; color: var(--ivl-ok); }
.ivl-orders em.w { color: var(--ivl-warn); }
.tag { display: inline-flex; justify-content: center; padding: 4px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: var(--ivl-sky); color: var(--ivl-ink); }
.tag.t2, .tag.t4 { background: var(--ivl-ink); color: #fff; }
.ivl-roe span { display: block; font-size: 12px; font-weight: 700; color: var(--ivl-muted); text-transform: uppercase; letter-spacing: .06em; }
.ivl-roe b { display: block; font: 700 24px/1.2 var(--ivl-serif); color: var(--ivl-ink); margin: 4px 0; }
.ivl-roe small { color: var(--ivl-muted); font-size: 12.5px; }

/* compare */
.ivl-table-wrap { overflow-x: auto; border: 1px solid var(--ivl-line); border-radius: 20px; -webkit-overflow-scrolling: touch; }
.ivl-table { width: 100%; border-collapse: collapse; min-width: 660px; font-size: 14.5px; }
.ivl-table th, .ivl-table td { padding: 15px 18px; border-bottom: 1px solid var(--ivl-line); text-align: center; color: var(--ivl-muted); }
.ivl-table thead th { background: var(--ivl-mist); font-weight: 700; color: var(--ivl-ink); font-size: 14px; }
.ivl-table tbody th { text-align: left; font-weight: 600; color: var(--ivl-ink); }
.ivl-table tr:last-child th, .ivl-table tr:last-child td { border-bottom: 0; }
.ivl-table .me { background: var(--ivl-sky-l); }
.ivl-table thead .me { background: var(--ivl-sky); }
.ivl-table i { display: inline-block; width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; }
.ivl-table i.y { background: var(--ivl-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CFE0FF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.ivl-table i.n { background: #EEF1F7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA4BA' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 11px no-repeat; }

/* who it's for */
.ivl-who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ivl-whocard { background: #fff; border-radius: 18px; padding: 22px; border: 1px solid var(--ivl-line); transition: transform .3s var(--ivl-ease), border-color .3s ease; }
.ivl-whocard:hover { transform: translateY(-3px); border-color: var(--ivl-ink); }
.ivl-whocard b { display: block; font-size: 16.5px; color: var(--ivl-ink); margin-bottom: 6px; }
.ivl-whocard span { font-size: 14px; color: var(--ivl-muted); }

/* how it connects */
.ivl-con { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.ivl-flow { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; counter-reset: f; }
.ivl-flow li { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; padding: 14px 16px; counter-increment: f; }
.ivl-flow b { display: block; color: #fff; font-size: 15.5px; }
.ivl-flow b::before { content: "0" counter(f) "  "; color: var(--ivl-sky); font-weight: 800; white-space: pre; }
.ivl-flow span { font-size: 14px; }
.ivl-orbit { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; margin: 0 auto; }
.ivl-orbit__ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(207, 224, 255, .28); inset: 6%; animation: ivl-rot 60s linear infinite; }
.ivl-orbit__ring.r2 { inset: 22%; border-style: solid; border-color: rgba(207, 224, 255, .14); animation-direction: reverse; }
@keyframes ivl-rot { to { transform: rotate(360deg); } }
.ivl-orbit__core { position: absolute; inset: 33%; border-radius: 50%; background: var(--ivl-sky); color: var(--ivl-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 0 0 14px rgba(207, 224, 255, .12), 0 0 0 30px rgba(207, 224, 255, .06); }
.ivl-orbit__core small { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.ivl-orbit__core b { font: 700 clamp(22px, 2.6vw, 30px)/1.1 var(--ivl-serif); }
.ivl-orbit__core span { font-size: 12px; font-weight: 600; }
.ivl-orbit .o { position: absolute; transform: translate(-50%, -50%); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #fff; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.ivl-orbit .o::before { content: "\2713  "; color: var(--ivl-sky); white-space: pre; }
.o1 { left: 50%; top: 6%; } .o2 { left: 82%; top: 17%; } .o3 { left: 95%; top: 45%; } .o4 { left: 86%; top: 76%; } .o5 { left: 60%; top: 94%; }
.o6 { left: 30%; top: 91%; } .o7 { left: 8%; top: 70%; } .o8 { left: 6%; top: 40%; } .o9 { left: 20%; top: 14%; }
/* the marketplace in motion (ivlOrbit): the product ring turns slowly with its labels kept upright; the core plays the
   four steps (Load, Distribute, Sell, Settle) while the matching step card on the left lights up */
.ivl-orbit__spin { position: absolute; inset: 0; z-index: 2; animation: ivl-rot 90s linear infinite; }
.ivl-orbit .o { animation: ivl-upright 90s linear infinite; transition: background .35s ease, color .35s ease, border-color .35s ease; }
@keyframes ivl-upright { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
.ivl-orbit .o.is-lit { background: var(--ivl-sky); border-color: var(--ivl-sky); color: var(--ivl-ink); }
.ivl-orbit .o.is-lit::before { color: var(--ivl-blue-d); }
.ivl-orbit .o.is-ping { box-shadow: 0 0 0 0 rgba(207, 224, 255, .6); animation: ivl-upright 90s linear infinite, ivl-ping .9s ease-out; }
@keyframes ivl-ping { 0% { box-shadow: 0 0 0 0 rgba(207, 224, 255, .65); } 100% { box-shadow: 0 0 0 14px rgba(207, 224, 255, 0); } }
.ivl-orbit__core { z-index: 3; }
.ivl-core__face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 10%; opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
.ivl-core__face.is-on { opacity: 1; transform: none; transition: opacity .35s ease .2s, transform .35s var(--ivl-ease) .2s; }
.ivl-orbit__ripples { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ivl-orbit__ripples i { position: absolute; inset: 33%; border-radius: 50%; border: 2px solid rgba(207, 224, 255, .7); opacity: 0; }
.ivl-orbit__ripples.go i { animation: ivl-ripple 1.9s ease-out forwards; }
.ivl-orbit__ripples.go i:nth-child(2) { animation-delay: .35s; }
.ivl-orbit__ripples.go i:nth-child(3) { animation-delay: .7s; }
@keyframes ivl-ripple { from { opacity: .85; transform: scale(1); } to { opacity: 0; transform: scale(2.7); } }
.ivl-orbit__dot { position: absolute; left: 0; top: 0; z-index: 4; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 16px 4px rgba(207, 224, 255, .85); opacity: 0; pointer-events: none; }
.ivl-orbit__dot.is-on { opacity: 1; }
.ivl-orbit__dot.sale { background: #3DDC97; box-shadow: 0 0 16px 4px rgba(61, 220, 151, .7); }
.ivl-flow li { transition: background .35s ease, border-color .35s ease, transform .35s var(--ivl-ease); }
.ivl-flow li.is-on { background: rgba(207, 224, 255, .14); border-color: rgba(207, 224, 255, .65); transform: translateY(-3px); }
.ivl-flow li.is-on b { color: #fff; }

/* FAQ */
.ivl-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.ivl-qa details { border-bottom: 1px solid var(--ivl-line); padding: 6px 0; }
.ivl-qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 16px 0; font-weight: 700; font-size: 17px; color: var(--ivl-ink); }
.ivl-qa summary::-webkit-details-marker { display: none; }
.ivl-qa summary::after { content: "+"; flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--ivl-mist); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 500; transition: transform .25s var(--ivl-ease), background .2s ease; }
.ivl-qa details[open] summary::after { transform: rotate(45deg); background: var(--ivl-sky); }
.ivl-qa p { margin: 0 0 18px; color: var(--ivl-muted); max-width: 640px; }
.ivl-qa a { color: var(--ivl-blue-d); font-weight: 700; }

/* final band + footer */
.ivl-final { background: var(--ivl-sky); padding: clamp(56px, 7vw, 88px) 0; }
.ivl-final__in { text-align: center; }
.ivl-final .ivl-hero__cta { justify-content: center; margin-bottom: 0; }
.ivl-foot { background: var(--ivl-deep); color: var(--ivl-on-deep); padding: 46px 0 34px; font-size: 14px; }
.ivl-foot__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 40px; align-items: start; }
.ivl-foot__brand p { margin: 12px 0 0; }
.ivl-foot__nav { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: flex-end; }
.ivl-foot__nav a { color: #fff; text-decoration: none; font-weight: 600; }
.ivl-foot__nav a:hover { color: var(--ivl-sky); }
.ivl-foot__copy { grid-column: 1 / -1; margin: 20px 0 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; }
.tx-mark { font-weight: 800; letter-spacing: .3px; }
.tx-mark .a { color: #fff; } .tx-mark .b { color: #5B9BFF; }

/* forgot-password note (the legacy wrapper ids are kept) */
.ot_fp_modal_wrapper { position: fixed; inset: 0; z-index: 300; background: rgba(14, 27, 51, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ot_fp_modal { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ivl-modal { background: #fff; border-radius: 20px; padding: 30px; max-width: 440px; box-shadow: 0 30px 70px rgba(14, 27, 51, .3); }
.ivl-modal h3 { font: 700 28px/1.15 var(--ivl-serif); color: var(--ivl-ink); margin: 0 0 10px; }
.ivl-modal p { color: var(--ivl-muted); margin: 0 0 22px; }

/* reveal */
.ivl-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ivl-ease), transform .8s var(--ivl-ease); }
.ivl-reveal.is-in { opacity: 1; transform: none; }
.ivl-reveal.d1 { transition-delay: .08s; } .ivl-reveal.d2 { transition-delay: .16s; } .ivl-reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .ivl-reveal { opacity: 1; transform: none; transition: none; }
    .ivl-h1__l, .ivl-iso__beam i, .ivl-hero__login::before, .ivl-hero__login::after { animation: none !important; }
    .ivl-marquee__track, .ivl-orbit__ring, .ivl-orbit__spin, .ivl-orbit .o { animation: none !important; }
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
    .ivl-hero__grid { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 44px; }
    .ivl-iso { left: 34%; transform: translate(-50%, -50%) scale(.85); }
    .ivl-brow { grid-template-columns: 82px minmax(120px, 170px) minmax(0, 1fr) 104px; gap: 0 14px; }
    .ivl-brow__tiles i { width: 19px; height: 19px; font-size: 7.5px; line-height: 16px; }
    .ivl-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    .ivl-nav, .ivl-top__cta { display: none; }
    .ivl-burger { display: inline-flex; }
    .ivl-top.is-open .ivl-top__in { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 16px; }
    .ivl-top.is-open .ivl-nav { display: flex; flex-direction: column; width: 100%; gap: 0; order: 3; margin-top: 8px; }
    .ivl-top.is-open .ivl-nav a { padding: 13px 0; border-bottom: 1px solid rgba(14, 27, 51, .1); }
    .ivl-top.is-open .ivl-top__cta { display: flex; width: 100%; order: 4; margin: 14px 0 0; justify-content: space-between; }
    /* phones and tablets: the headline and notes, then the pass, then the board */
    .ivl-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .ivl-hero__login { margin-top: 44px; max-width: 540px; }
    .ivl-stage { padding: 48px 0 130px; border-radius: 30px; }
    .ivl-iso { left: 70%; top: 15%; transform: translate(-50%, -50%) scale(.62); opacity: .75; }
    .ivl-board { margin-top: -80px; }
    .ivl-brow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k c" "n n" "t t"; gap: 4px 12px; }
    .ivl-brow__k { grid-area: k; } .ivl-brow__n { grid-area: n; } .ivl-brow__tiles { grid-area: t; margin-top: 6px; } .ivl-brow__c { grid-area: c; }
    .ivl-stamp { left: 50%; top: 62%; }
    .ivl-story__grid, .ivl-plat, .ivl-con, .ivl-faq, .ivl-panel { grid-template-columns: minmax(0, 1fr); }
    .ivl-three { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
    .ivl-plat__mock { max-width: 560px; }
}
@media (max-width: 640px) {
    .ivl-wrap { padding: 0 18px; }
    .ivl-top__in { height: 66px; }
    .ivl-hero { padding: 10px 10px 44px; }
    .ivl-stage { padding: 34px 0 110px; border-radius: 24px; }
    .ivl-eyebrow { font-size: 11.5px; margin-bottom: 16px; }
    .ivl-h1 { font-size: 35px; }
    /* phones: headline, then straight to the pass, then the notes and the buttons */
    .ivl-hero__copy { display: contents; }
    .ivl-eyebrow { order: 0; } .ivl-h1 { order: 1; } .ivl-hero__login { order: 2; margin-top: 26px; } .ivl-layers { order: 3; margin-top: 40px; } .ivl-hero .ivl-hero__cta { order: 4; }
    .ivl-pass__head span:last-child { display: none; }
    .ivl-pass { padding: 22px 20px 4px; }
    .ivl-pass h2 { font-size: 29px; }
    .ivl-brow { padding: 12px 16px; }
    .ivl-brow__tiles i { width: 22px; height: 19px; font-size: 8.5px; line-height: 16px; }
    .ivl-board__head, .ivl-board__foot { padding-left: 16px; padding-right: 16px; }
    .ivl-board { border-radius: 20px; margin-top: -70px; }
    .ivl-stamp { font-size: 12px; padding: 6px 10px; }
    .ivl-hero__cta .ivl-btn { flex: 1 1 100%; }
    .ivl-hero .ivl-hero__cta { justify-content: center; }
    .ivl-bullets, .ivl-feats, .ivl-flow, .ivl-who { grid-template-columns: minmax(0, 1fr); }
    .ivl-notes { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 8px; padding: 0; }
    .ivl-note, .ivl-note.n5 { transform: none !important; width: auto; justify-self: stretch; }
    .ivl-panel { padding: 22px 18px; border-radius: 20px; gap: 26px; box-shadow: 0 10px 26px rgba(14, 27, 51, .08); }
    .ivl-rows div { grid-template-columns: 74px minmax(0, 1fr) 62px; }
    .ivl-plat__mock .ivl-mock--small { width: 100%; margin-top: 0; }
    .ivl-orbit .o { font-size: 11px; padding: 5px 9px; }
    .ivl-orbit { max-width: 270px; margin-top: 36px; }
    .ivl-core__face small { font-size: 9.5px; } .ivl-core__face span { font-size: 11px; }
    .ivl-foot__in { grid-template-columns: minmax(0, 1fr); }
    .ivl-foot__nav { justify-content: flex-start; }
}