/* ============================================================
   Opsyte shared site styles (extracted from inline header/footer
   blocks so they cache across pages instead of shipping in every
   HTML response).
   Load order matters: this file loads after custom.css and mirrors
   the old inline order — header modal-fix block first, then the
   footer modal/product-tour block.
   ============================================================ */

/* === MODAL FIX (MOBILE SAFE) === */

/* overlay */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 9998;
}

/* modal container */
.modal{
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}

/* scroll happens INSIDE modal */
.modal-body{
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 2 columns on desktop */
.modal-content{
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}

/* MOBILE: 1 column ONLY */
@media (max-width: 768px){
  .modal-content{
    grid-template-columns: 1fr;
  }

  /* hide the left column */
  .modal-left{
    display: none;
  }
}

/* iframe (pipedrive) */
.modal-body iframe{
  width: 100%;
  min-height: 70dvh;
  border: 0;
}
body.modal-open{
  position: fixed;
  width: 100%;
}

/* === Site-wide gentle life: scroll-reveal + card/image hover (scoped, motion-safe, fails open) === */
html.hj-js .section .grid_4-col > div,
html.hj-js .section .grid_3-col > .card,
html.hj-js .ats-home-teaser__mock{
  opacity:0; transform:translateY(22px);
  transition:opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
html.hj-js .hj-in{ opacity:1 !important; transform:none !important; }
html.hj-js .grid_4-col > :nth-child(2), html.hj-js .grid_3-col > .card:nth-child(2){ transition-delay:.07s; }
html.hj-js .grid_4-col > :nth-child(3), html.hj-js .grid_3-col > .card:nth-child(3){ transition-delay:.14s; }
html.hj-js .grid_4-col > :nth-child(4), html.hj-js .grid_3-col > .card:nth-child(4){ transition-delay:.21s; }
.section .card{ transition:transform .25s ease, box-shadow .25s ease; }
.section .card:hover{ transform:translateY(-5px); box-shadow:0 18px 40px rgba(11,18,32,.12); }
.section .ratio_3x2{ overflow:hidden; }
.section .ratio_3x2 .image_cover{ transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.section .ratio_3x2:hover .image_cover{ transform:scale(1.05); }
@media (prefers-reduced-motion: reduce){
  html.hj-js .section .grid_4-col > div,
  html.hj-js .section .grid_3-col > .card,
  html.hj-js .ats-home-teaser__mock{ opacity:1 !important; transform:none !important; transition:none; }
  .section .card, .section .ratio_3x2 .image_cover{ transition:none; }
}

/* ================= MODAL ================= */

/* Overlay */
#modalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9999;

  /* IMPORTANT: do NOT use display:none */
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  padding-left: 16px;
  padding-right: 16px;

  align-items: center;
  justify-content: center;

  overflow: auto;
  -webkit-overflow-scrolling: touch;

  transition: opacity .2s ease, visibility .2s ease;
}

/* Open state */
#modalOverlay.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Modal container */
.modal-container {
  background: #fff;
  width: 100%;
  max-width: 1024px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  position: relative;
  max-height: calc(100vh - 32px);
}

@media (min-width: 768px) {
  .modal-container { flex-direction: row; }
}

/* Close button */
#closeModalBtn {
  position: absolute;
  top: 16px;
  right: 16px;
  color: #a80000;
  font-size: 1.875rem;
  font-weight: 700;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 50;
}
#closeModalBtn:hover { color: #f87171; }

/* Left column */
.modal-left {
  width: 100%;
  padding: 32px;
    background: #2E4D8A;
  color: #ffffff;
}
@media (min-width: 768px) {
  .modal-left { width: 50%; }
}

/* Right column */
.modal-right {
  width: 100%;

  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .modal-right { width: 50%; }
}

/* Mobile behaviour */
@media (max-width: 767px){
  #modalOverlay{
    align-items: flex-start;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .modal-left{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal-right{ order: 2; }
  .modal-left{ order: 1; }
}

/* Typography */
.modal-headline {
  font-size: 1.5rem;
  font-weight: 700;
}
.modal-subtext {
  font-size: 0.875rem;
  opacity: 0.9;
}
.modal-list {
  font-size: 0.875rem;
  list-style: disc;
  padding-left: 1.25rem;
}
.modal-list li + li { margin-top: 8px; }

/* Image */
.modal-image {
  margin-top: 24px;
  border-radius: 8px;
  border: 1px solid #ffffff;
  width: 100%;
  height: auto;
  display: block;
}

/* Testimonial */
.modal-quote {
  margin-top: 16px;
  background: #ffffff;
  color: #2E4D8A;
  padding: 16px;
  border-radius: 8px;
  font-size: 0.875rem;
}

/* Ensure Pipedrive iframe always visible */
.pipedriveWebForms iframe{
  width: 100% !important;
  min-height: 650px;
  border: 0;
  display: block;
}

/* Inline (in-page) Pipedrive embeds, e.g. on /Pricing */
.pd-inline-form{
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(11,18,32,.08);
  padding: 8px;
}

/* Scroll lock */
body.modal-open{
  position: fixed;
  width: 100%;
  overflow: hidden;
}

.accent { color: #9ED0FF; }

/* ===== Modal product tour — 6 crossfading scenes: ATS, Scheduling, Invoices, AI review, Graphs, Nightly report. */
/* Self-contained, CSS-only, GATED to #modalOverlay.is-open: nothing runs until the modal opens. */
/* Scenes are sequenced by a per-scene animation-delay (--sd) on one shared 28s timeline. */
/* Slots: 4s each, EXCEPT scheduling (mrSceneLong) gets 8s for the cursor-drag choreography. */
.mr-stage{
  position:relative; margin-top:24px; width:100%;
  aspect-ratio:1.46 / 1; min-height:238px;
  border-radius:10px; overflow:hidden;
  background:#f4f8f5; border:1px solid rgba(255,255,255,.85);
  box-shadow:0 14px 30px rgba(8,20,14,.28);
  color:#24302a;
}
@supports not (aspect-ratio: 1){ .mr-stage{ height:300px; } }

/* progress pips */
.mr-prog{ position:absolute; top:8px; left:11px; right:11px; z-index:20; display:flex; gap:5px; }
.mr-prog span{ flex:1; height:3px; border-radius:2px; background:rgba(11,18,32,.12); overflow:hidden; }
.mr-prog span::after{ content:""; display:block; height:100%; width:100%; transform:translateX(-100%); background:#2bbf7d; }

/* scenes */
.mr-scene{ position:absolute; inset:0; opacity:0; padding:33px 12px 12px; }
.mr-scene__ttl{ position:absolute; top:16px; left:12px; font-size:9px; font-weight:800; color:#3f5a4d; display:flex; align-items:center; gap:5px; z-index:6; }
.mr-scene__ttl .mr-spk{ color:#2ED58C; font-size:11px; }
.mr-scene__ttl i{ font-style:normal; font-weight:600; color:#8a9b91; }

/* bold per-scene title card — pops in, holds, then wipes up to reveal the live demo */
.mr-title{
  position:absolute; inset:0; z-index:30; opacity:0; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; text-align:center; padding:10px;
  color:#eafff5; background:linear-gradient(135deg,#15241b,#1e3a2c);
}
.mr-title__ico{ width:30px; height:30px; margin-bottom:4px; opacity:.97; }
.mr-title__ico svg{ width:100%; height:100%; display:block; }
.mr-title__no{ font-size:8px; font-weight:800; letter-spacing:2.5px; opacity:.72; }
.mr-title__tx{ font-size:20px; font-weight:900; letter-spacing:.2px; line-height:1.05; margin-top:2px; }
.mr-title__rule{ width:26px; height:3px; border-radius:2px; margin:6px 0 5px; background:rgba(255,255,255,.5); }
.mr-title__sub{ font-size:8px; font-weight:600; letter-spacing:.2px; opacity:.82; max-width:88%; line-height:1.25; }
/* per-scene accent fills */
.mr-s0 .mr-title{ background:linear-gradient(135deg,#27407a,#3f6fc4); }
.mr-s1 .mr-title{ background:linear-gradient(135deg,#117a4d,#2bbf7d); }
.mr-s2 .mr-title{ background:linear-gradient(135deg,#0e6f63,#19b39a); }
.mr-s3 .mr-title{ background:linear-gradient(135deg,#473aa3,#6f5ae6); }
.mr-s4 .mr-title{ background:linear-gradient(135deg,#0f3d2a,#1f9d63); }
.mr-s5 .mr-title{ background:linear-gradient(135deg,#13243b,#27507e); }

/* — Scene 1: scheduling — */
.mr-s1{ background:
    repeating-linear-gradient(90deg, transparent 0 32.9%, rgba(11,18,32,.05) 33% 33.12%),
    repeating-linear-gradient(0deg,  transparent 0 15.9%, rgba(11,18,32,.04) 16% 16.12%); }
.mr-days{ position:absolute; top:32px; left:0; right:0; height:18px; display:flex; align-items:center; justify-content:space-around; font-size:8px; font-weight:800; color:#7c8c83; letter-spacing:.3px; }
.mr-shift{
  position:absolute; left:var(--x); top:var(--y);
  width:25%; height:13%; min-height:24px; border-radius:6px;
  background:#fdeaa2; border:1px solid #e7cd76; box-shadow:0 5px 12px rgba(11,18,32,.18);
  transform:translate(-50%,-50%) scale(.6); opacity:0;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 6px; overflow:hidden; text-align:left; color:#33301f; line-height:1.14; z-index:2;
}
.mr-shift b{ display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; font-weight:800; font-size:8px; white-space:nowrap; }
.mr-shift i{ display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; font-style:normal; font-weight:600; font-size:6.5px; opacity:.72; white-space:nowrap; }
.mr-shift.c-mint{ background:#c7efd6; border-color:#8ed8ab; }
.mr-shift.c-blue{ background:#cfe2f7; border-color:#9cc2e8; }
.mr-shift.c-pink{ background:#f6d2e4; border-color:#e3a8c8; }
.mr-shift.c-purple{ background:#ddd3f4; border-color:#b9a4e0; }
.mr-autobtn{
  position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:4px; z-index:3; opacity:0;
  background:#15241b; color:#eafff5; font-weight:800; font-size:9px;
  padding:5px 10px; border-radius:999px; border:1px solid rgba(46,213,140,.55);
  white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.28);
}
.mr-autobtn svg{ width:10px; height:10px; flex:none; }
.mr-cursor{ position:absolute; left:34%; top:62%; width:18px; height:18px; z-index:10; opacity:0; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.mr-dim{ position:absolute; inset:0; z-index:8; opacity:0; background:rgba(9,20,15,.5); }
.mr-airev{
  position:absolute; left:50%; top:58%; z-index:9; width:84%;
  transform:translate(-50%,-50%) scale(.92); opacity:0;
  background:#fff; border-radius:10px; padding:10px 11px;
  box-shadow:0 22px 46px rgba(8,20,14,.45); border:1px solid rgba(0,0,0,.06); color:#15241b;
}
.mr-ai-head{ font-size:11px; font-weight:800; color:#15241b; display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.mr-ai-spark{ color:#2ED58C; font-size:13px; }
.mr-ai-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:10px; padding:5px 8px; border-radius:6px; margin-bottom:5px; }
.mr-ai-row.over{ background:#fdefdf; } .mr-ai-row.under{ background:#fde3e3; } .mr-ai-row.ok{ background:#e6f7ee; margin-bottom:0; }
.mr-ai-day{ color:#46554d; font-weight:600; }
.mr-ai-tag{ font-weight:800; padding:3px 9px; border-radius:999px; font-size:9px; white-space:nowrap; color:#fff; }
.mr-ai-row.over .mr-ai-tag{ background:#f0a020; }
.mr-ai-row.under .mr-ai-tag{ background:#e35b5b; }
.mr-ai-row.ok .mr-ai-tag{ background:#3cb878; }

/* — Scene 2: automated invoices — */
.mr-inv{ position:absolute; left:5%; top:36px; bottom:36px; width:38%; background:#fff; border:1px solid #e4ebe6; border-radius:6px; box-shadow:0 6px 14px rgba(11,18,32,.12); overflow:hidden; opacity:0; }
.mr-inv__bar{ height:15px; background:#15241b; display:flex; align-items:center; padding:0 6px; }
.mr-inv__bar b{ color:#eafff5; font-size:6.5px; font-weight:800; letter-spacing:.7px; }
.mr-inv__row{ height:4px; margin:6px 8px 0; border-radius:2px; background:#e9eeea; }
.mr-inv__row.s{ width:55%; } .mr-inv__row.m{ width:78%; } .mr-inv__row.l{ width:92%; }
.mr-inv__tot{ position:absolute; left:8px; right:8px; bottom:7px; display:flex; justify-content:space-between; font-size:7px; font-weight:800; color:#15241b; background:#eafaf1; border:1px solid #bfe8d2; border-radius:4px; padding:3px 5px; }
.mr-scan{ position:absolute; left:0; right:0; top:8%; height:12px; opacity:0; background:linear-gradient(180deg, rgba(46,213,140,0), rgba(46,213,140,.5), rgba(46,213,140,0)); box-shadow:0 0 8px rgba(46,213,140,.55); }
.mr-fields{ position:absolute; right:4%; top:38px; width:48%; display:flex; flex-direction:column; gap:5px; }
.mr-field{ display:flex; align-items:center; gap:6px; background:#fff; border:1px solid #e4ebe6; border-radius:5px; padding:4px 6px; box-shadow:0 3px 8px rgba(11,18,32,.08); opacity:0; }
.mr-tick{ width:12px; height:12px; flex:none; border-radius:50%; background:#2bbf7d; color:#fff; font-size:7px; font-weight:900; display:flex; align-items:center; justify-content:center; }
.mr-field .mr-fk{ font-size:6.5px; color:#7c8c83; font-weight:700; white-space:nowrap; }
.mr-field .mr-fv{ font-size:7.5px; color:#15241b; font-weight:800; margin-left:auto; white-space:nowrap; }
.mr-badge{ position:absolute; left:50%; bottom:8px; transform:translateX(-50%); display:flex; align-items:center; gap:5px; background:#15241b; color:#eafff5; font-size:8px; font-weight:800; padding:4px 9px; border-radius:999px; white-space:nowrap; box-shadow:0 6px 14px rgba(0,0,0,.25); opacity:0; }
.mr-badge .mr-tick{ background:none; color:#2ED58C; width:auto; height:auto; }

/* — Scene 3: AI daily review — */
.mr-rev{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #e4ebe6; border-radius:6px; padding:6px 9px; margin:0 6px 6px; box-shadow:0 3px 8px rgba(11,18,32,.07); opacity:0; }
.mr-rev .mr-rk{ font-size:9px; color:#46554d; font-weight:700; }
.mr-rev .mr-rv{ margin-left:auto; font-size:9px; font-weight:800; color:#15241b; }
.mr-rev .mr-rt{ font-size:7.5px; font-weight:800; padding:2px 6px; border-radius:999px; white-space:nowrap; }
.mr-rev .mr-rt.up{ background:#e6f7ee; color:#1f9d63; }
.mr-rev .mr-rt.ok{ background:#e6f0fb; color:#3168c0; }
.mr-rev .mr-rt.warn{ background:#fdefdf; color:#c8791a; }
.mr-sum{ margin:7px 8px 0; font-size:8px; font-style:italic; color:#56655c; text-align:center; line-height:1.35; opacity:0; }

/* — Scene 4: live graphs — */
.mr-axis{ position:absolute; left:6%; right:50%; bottom:31px; height:1px; background:rgba(11,18,32,.12); }
.mr-bars{ position:absolute; left:6%; right:50%; bottom:32px; top:44px; display:flex; align-items:flex-end; gap:6%; }
.mr-bar{ flex:1; height:var(--h); transform-origin:bottom; transform:scaleY(0); background:linear-gradient(180deg,#6fe6b3,#22b877); border-radius:2px 2px 0 0; box-shadow:0 0 6px rgba(46,213,140,.4); }
.mr-line{ position:absolute; left:54%; right:5%; top:46px; height:42%; overflow:visible; }
.mr-line__base{ fill:none; stroke:#8ecbac; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:100; stroke-dashoffset:100; }
.mr-line__pulse{ fill:none; stroke:#2bbf7d; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:16 84; filter:drop-shadow(0 0 3px rgba(46,213,140,.7)); }
.mr-kpis{ position:absolute; left:54%; right:5%; bottom:10px; display:flex; gap:6px; }
.mr-kpi{ flex:1; min-width:0; background:#fff; border:1px solid #e4ebe6; border-radius:6px; padding:4px 5px; box-shadow:0 3px 8px rgba(11,18,32,.07); text-align:center; overflow:hidden; opacity:0; }
.mr-kpi b{ display:block; font-size:11px; color:#15241b; }
.mr-kpi i{ display:block; font-style:normal; font-size:6px; color:#7c8c83; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* per-scene start offset on the shared 28s timeline (scheduling spans 4s..12s = 8s) */
.mr-s0{ --sd:0s; } .mr-s1{ --sd:4s; } .mr-s2{ --sd:12s; }
.mr-s3{ --sd:16s; } .mr-s4{ --sd:20s; } .mr-s5{ --sd:24s; }

/* — Scene 0: applicant tracking — */
.mr-cand{ display:flex; align-items:center; gap:7px; background:#fff; border:1px solid #e4ebe6; border-radius:7px; padding:5px 8px; margin:0 6px 6px; box-shadow:0 3px 8px rgba(11,18,32,.07); opacity:0; }
.mr-cand.top{ border-color:#9ad9b8; background:#f1fbf5; box-shadow:0 4px 10px rgba(46,213,140,.18); }
.mr-av{ width:19px; height:19px; flex:none; border-radius:50%; background:#cfe2f7; color:#274e7d; font-size:7px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.mr-cand.top .mr-av{ background:#bdeacc; color:#1f7a4d; }
.mr-cinfo{ display:flex; flex-direction:column; line-height:1.16; min-width:0; }
.mr-cinfo b{ font-size:8.5px; font-weight:800; color:#15241b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mr-cinfo i{ font-style:normal; font-size:7px; color:#7c8c83; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mr-cm{ margin-left:auto; flex:none; font-size:7.5px; font-weight:800; color:#1f9d63; background:#e6f7ee; padding:2px 7px; border-radius:999px; white-space:nowrap; }
.mr-cand.top .mr-cm{ background:#2bbf7d; color:#fff; }

/* — Scene 5: nightly report email — */
.mr-mail{ position:absolute; left:8%; right:8%; top:34px; bottom:38px; background:#fff; border:1px solid #e4ebe6; border-radius:8px; box-shadow:0 8px 18px rgba(11,18,32,.13); overflow:hidden; opacity:0; }
.mr-mail__bar{ display:flex; align-items:center; gap:6px; padding:6px 9px; background:#f3f7f4; border-bottom:1px solid #e9efea; font-size:8px; font-weight:800; color:#33473c; }
.mr-mail__bar i{ font-style:normal; font-weight:600; color:#8a9b91; margin-left:auto; }
.mr-mail__dot{ width:8px; height:8px; flex:none; border-radius:50%; background:#2bbf7d; }
.mr-mail__subj{ padding:7px 9px 4px; font-size:9.5px; font-weight:800; color:#15241b; }
.mr-mline{ display:flex; align-items:center; justify-content:space-between; padding:3px 10px; font-size:8.5px; opacity:0; }
.mr-mline span{ color:#56655c; font-weight:600; }
.mr-mline b{ color:#15241b; font-weight:800; }
.mr-mline.att span{ color:#1f7a4d; font-weight:700; }
.mr-plane{ position:absolute; right:18%; bottom:34%; width:18px; height:18px; opacity:0; z-index:6; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); }

/* --- play ONLY while the modal is open (nothing runs when it is closed) --- */
#modalOverlay.is-open .mr-scene{ animation:mrScene 28s linear infinite; animation-delay:var(--sd); }
#modalOverlay.is-open .mr-s1{ animation-name:mrSceneLong; }
#modalOverlay.is-open .mr-title{ animation:mrTitle 28s linear infinite; animation-delay:var(--sd); }
#modalOverlay.is-open .mr-prog span::after{ animation:mrProg 28s linear infinite; }
#modalOverlay.is-open .mr-prog span:nth-child(1)::after{ animation-delay:0s; }
#modalOverlay.is-open .mr-prog span:nth-child(2)::after{ animation-name:mrProgLong; animation-delay:4s; }
#modalOverlay.is-open .mr-prog span:nth-child(3)::after{ animation-delay:12s; }
#modalOverlay.is-open .mr-prog span:nth-child(4)::after{ animation-delay:16s; }
#modalOverlay.is-open .mr-prog span:nth-child(5)::after{ animation-delay:20s; }
#modalOverlay.is-open .mr-prog span:nth-child(6)::after{ animation-delay:24s; }
#modalOverlay.is-open .mr-cand,
#modalOverlay.is-open .mr-rev,
#modalOverlay.is-open .mr-mline,
#modalOverlay.is-open .mr-kpi,
#modalOverlay.is-open .mr-sum{ animation:mrRowIn 28s ease-out infinite; animation-delay:calc(var(--sd) + var(--d, 0s)); }
#modalOverlay.is-open .mr-badge{ animation:mrBadge 28s ease-out infinite; animation-delay:var(--sd); }
#modalOverlay.is-open .mr-s1 .mr-shift{ animation:mrChip 28s ease-in-out infinite; animation-delay:calc(var(--sd) + var(--d, 0s)); }
#modalOverlay.is-open .mr-s1 .mr-shift.drag1{ animation:mrDrag1 28s ease-in-out infinite; animation-delay:var(--sd); }
#modalOverlay.is-open .mr-s1 .mr-shift.drag2{ animation:mrDrag2 28s ease-in-out infinite; animation-delay:var(--sd); }
#modalOverlay.is-open .mr-s1 .mr-autobtn{ animation:mrAuto 28s ease-in-out infinite; animation-delay:var(--sd); }
#modalOverlay.is-open .mr-s1 .mr-cursor{ animation:mrCursor 28s ease-in-out infinite; animation-delay:var(--sd); }
#modalOverlay.is-open .mr-s1 .mr-dim{ animation:mrDim 28s ease-in-out infinite; animation-delay:var(--sd); }
#modalOverlay.is-open .mr-s1 .mr-airev{ animation:mrRev 28s ease-in-out infinite; animation-delay:var(--sd); }
#modalOverlay.is-open .mr-s2 .mr-inv{ animation:mrDoc 28s ease-in-out infinite; animation-delay:var(--sd); }
#modalOverlay.is-open .mr-s2 .mr-scan{ animation:mrScan 28s ease-in-out infinite; animation-delay:var(--sd); }
#modalOverlay.is-open .mr-s2 .mr-field{ animation:mrField 28s ease-out infinite; animation-delay:calc(var(--sd) + var(--d, 0s)); }
#modalOverlay.is-open .mr-s4 .mr-bar{ animation:mrBar 28s ease-in-out infinite; animation-delay:calc(var(--sd) + var(--bd, 0s)); }
#modalOverlay.is-open .mr-s4 .mr-line__base{ animation:mrDraw 28s ease-in-out infinite; animation-delay:var(--sd); }
#modalOverlay.is-open .mr-s4 .mr-line__pulse{ animation:mrPulse 2.4s linear infinite; }
#modalOverlay.is-open .mr-s5 .mr-mail{ animation:mrMailIn 28s ease-out infinite; animation-delay:var(--sd); }
#modalOverlay.is-open .mr-s5 .mr-plane{ animation:mrPlane 28s ease-in-out infinite; animation-delay:var(--sd); }

/* scene crossfade — normal scenes visible ~4s; scheduling (mrSceneLong) ~8s of the 28s loop */
@keyframes mrScene{ 0%{opacity:0} 2%{opacity:1} 12.5%{opacity:1} 15%{opacity:0} 100%{opacity:0} }
@keyframes mrSceneLong{ 0%{opacity:0} 1.5%{opacity:1} 26%{opacity:1} 29%{opacity:0} 100%{opacity:0} }
@keyframes mrProg{ 0%{transform:translateX(-100%)} 2%{transform:translateX(0)} 12.5%{transform:translateX(0)} 15%{transform:translateX(-100%)} 100%{transform:translateX(-100%)} }
@keyframes mrProgLong{ 0%{transform:translateX(-100%)} 1.5%{transform:translateX(0)} 26%{transform:translateX(0)} 29%{transform:translateX(-100%)} 100%{transform:translateX(-100%)} }

/* bold title card: snappy pop-in, brief hold, quick wipe up to reveal the demo */
@keyframes mrTitle{
  0%   { opacity:0; transform:translateY(8px) scale(.965); }
  0.7% { opacity:1; transform:translateY(0) scale(1); }
  2.7% { opacity:1; transform:translateY(0) scale(1); }
  4.0% { opacity:1; transform:translateY(-101%) scale(1); }
  4.1% { opacity:0; transform:translateY(-101%) scale(1); }
  100% { opacity:0; transform:translateY(-101%) scale(1); }
}

/* shared entrances (cascading rows + bottom pill) */
@keyframes mrRowIn{ 0%,2%{ opacity:0; transform:translateY(6px); } 7%{ opacity:1; transform:translateY(0); } 100%{ opacity:1; transform:translateY(0); } }
@keyframes mrBadge{ 0%,9%{ opacity:0; transform:translateX(-50%) translateY(6px); } 11%{ opacity:1; transform:translateX(-50%) translateY(0); } 100%{ opacity:1; transform:translateX(-50%) translateY(0); } }

/* scene 1 — scheduling: auto-schedule, chips burst, cursor drags 2 shifts, AI review (8s slot) */
@keyframes mrChip{
  0%,3.8%{ opacity:0; transform:translate(-50%,-50%) scale(.5); }
  6%{ opacity:1; transform:translate(-50%,-50%) scale(1.06); }
  7%{ transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}
@keyframes mrAuto{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.9); }
  0.7%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  3.2%{ transform:translate(-50%,-50%) scale(1); }
  3.8%{ transform:translate(-50%,-50%) scale(.88); }
  4.6%{ transform:translate(-50%,-50%) scale(1); }
  6.5%{ opacity:1; }
  8.5%,100%{ opacity:0; }
}
@keyframes mrDrag1{
  0%,3.8%{ opacity:0; left:50%; top:54%; transform:translate(-50%,-50%) scale(.5); }
  5.8%{ opacity:1; left:50%; top:54%; transform:translate(-50%,-50%) scale(1.05); }
  6.8%{ left:50%; top:54%; transform:translate(-50%,-50%) scale(1); box-shadow:0 5px 12px rgba(11,18,32,.18); }
  8%{ left:50%; top:54%; transform:translate(-50%,-50%) scale(1.12); box-shadow:0 13px 24px rgba(11,18,32,.34); }
  11%{ left:50%; top:84%; transform:translate(-50%,-50%) scale(1.12); box-shadow:0 13px 24px rgba(11,18,32,.34); }
  12%{ left:50%; top:84%; transform:translate(-50%,-50%) scale(1); box-shadow:0 5px 12px rgba(11,18,32,.18); }
  100%{ opacity:1; left:50%; top:84%; transform:translate(-50%,-50%) scale(1); }
}
@keyframes mrDrag2{
  0%,3.8%{ opacity:0; left:78%; top:54%; transform:translate(-50%,-50%) scale(.5); }
  6%{ opacity:1; left:78%; top:54%; transform:translate(-50%,-50%) scale(1.05); }
  7%{ left:78%; top:54%; transform:translate(-50%,-50%) scale(1); box-shadow:0 5px 12px rgba(11,18,32,.18); }
  14%{ left:78%; top:54%; transform:translate(-50%,-50%) scale(1); box-shadow:0 5px 12px rgba(11,18,32,.18); }
  15%{ left:78%; top:54%; transform:translate(-50%,-50%) scale(1.12); box-shadow:0 13px 24px rgba(11,18,32,.34); }
  18%{ left:78%; top:84%; transform:translate(-50%,-50%) scale(1.12); box-shadow:0 13px 24px rgba(11,18,32,.34); }
  19%{ left:78%; top:84%; transform:translate(-50%,-50%) scale(1); box-shadow:0 5px 12px rgba(11,18,32,.18); }
  100%{ opacity:1; left:78%; top:84%; transform:translate(-50%,-50%) scale(1); }
}
@keyframes mrCursor{
  0%{ left:34%; top:62%; opacity:0; transform:scale(1); }
  1%{ opacity:1; }
  2.5%{ left:50%; top:44%; opacity:1; }
  3.1%{ transform:scale(.66); }
  3.7%{ transform:scale(1); }
  6%{ left:50%; top:54%; }
  7%{ transform:scale(.78); }
  8%{ left:50%; top:54%; transform:scale(.78); }
  11%{ left:50%; top:84%; transform:scale(.78); }
  12%{ transform:scale(1); }
  13.5%{ left:78%; top:54%; }
  14.5%{ transform:scale(.78); }
  15%{ left:78%; top:54%; transform:scale(.78); }
  18%{ left:78%; top:84%; transform:scale(.78); }
  19%{ transform:scale(1); }
  21.5%{ left:50%; top:62%; transform:scale(1); }
  22.5%{ transform:scale(.7); }
  23.5%{ transform:scale(1); }
  26%{ left:50%; top:62%; opacity:1; }
  28.571%{ left:50%; top:62%; opacity:0; }
  100%{ left:34%; top:62%; opacity:0; }
}
@keyframes mrDim{ 0%,21%{ opacity:0; } 23%{ opacity:.42; } 100%{ opacity:.42; } }
@keyframes mrRev{
  0%,21%{ opacity:0; transform:translate(-50%,-50%) scale(.92); }
  24%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}

/* scene 2 — invoices (4s) */
@keyframes mrDoc{
  0%,1%{ opacity:0; transform:translateX(35%) scale(.96); }
  5%{ opacity:1; transform:translateX(0) scale(1); }
  100%{ opacity:1; transform:translateX(0) scale(1); }
}
@keyframes mrScan{
  0%,4%{ opacity:0; top:8%; }
  5%{ opacity:1; }
  8.5%{ opacity:1; top:88%; }
  9.5%,100%{ opacity:0; top:88%; }
}
@keyframes mrField{
  0%,6.5%{ opacity:0; transform:translateX(8px); }
  9.5%{ opacity:1; transform:translateX(0); }
  100%{ opacity:1; transform:translateX(0); }
}

/* scene 4 — graphs (4s) */
@keyframes mrBar{
  0%,2%{ transform:scaleY(0); }
  8%{ transform:scaleY(1.05); }
  9.5%{ transform:scaleY(1); }
  100%{ transform:scaleY(1); }
}
@keyframes mrDraw{ 0%,3%{ stroke-dashoffset:100; } 10.5%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:0; } }
@keyframes mrPulse{ from{ stroke-dashoffset:100; } to{ stroke-dashoffset:0; } }

/* scene 5 — nightly report (4s) */
@keyframes mrMailIn{
  0%,1%{ opacity:0; transform:translateY(8px) scale(.97); }
  5%{ opacity:1; transform:translateY(0) scale(1); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes mrPlane{
  0%,7%{ opacity:0; transform:translate(0,0) scale(.8); }
  9%{ opacity:1; transform:translate(0,0) scale(1); }
  11.5%{ opacity:0; transform:translate(42px,-28px) scale(1); }
  100%{ opacity:0; transform:translate(42px,-28px) scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .mr-stage *{ animation:none !important; }
  .mr-title{ display:none !important; }
  .mr-s0{ opacity:1 !important; }
  .mr-s1, .mr-s2, .mr-s3, .mr-s4, .mr-s5{ display:none !important; }
  .mr-s0 .mr-cand{ opacity:1 !important; transform:none !important; }
  .mr-s0 .mr-badge{ opacity:1 !important; }
  .mr-prog span::after{ display:none !important; }
}

/* ================= Blog funnel (F5) ================= */
.blog-cta-band{
  max-width: 70%;
  margin: 32px auto 0;
  background: #2E4D8A;
  color: #fff;
  border-radius: 12px;
  padding: 28px 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
}
.blog-cta-band__text{ max-width: 60ch; }
.blog-cta-band__text h2{ color:#fff; font-size:1.35rem; margin:0 0 6px; }
.blog-cta-band__text p{ margin:0; opacity:.92; font-size:.95rem; }
.blog-cta-band .button{ white-space:nowrap; }
.blog-module-card{
  max-width: 70%;
  margin: 18px auto 0;
  border: 1px solid #dce3ee;
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: #fff;
}
.blog-module-card__label{
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #55627A;
  flex-basis: 100%;
}
.blog-module-card__body{ flex: 1 1 32ch; }
.blog-module-card__body strong{ display:block; margin-bottom:2px; }
.blog-module-card__body p{ margin:0; font-size:.92rem; color:#55627A; }
@media (max-width: 900px){
  .blog-cta-band, .blog-module-card{ max-width: 100%; }
}

/* ================= Cookie consent banner ================= */
.cookie-consent{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9997; /* below the demo modal (9999) */
  max-width: 720px;
  margin: 0 auto;
  background: #182238;
  color: #E8EDF7;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  box-shadow: 0 12px 30px rgba(8,14,28,.35);
}
.cookie-consent[hidden]{ display: none; }
.cookie-consent__text{ margin: 0; flex: 1 1 32ch; font-size: .9rem; line-height: 1.45; }
.cookie-consent__text a{ color: #9EC5F0; text-decoration: underline; }
.cookie-consent__actions{ display: flex; gap: 10px; flex: 0 0 auto; }
.cookie-consent__btn{
  border: 0;
  border-radius: 999px;
  padding: 9px 20px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.cookie-consent__btn--accept{ background: #2E4D8A; color: #fff; }
.cookie-consent__btn--accept:hover{ background: #243C6F; }
.cookie-consent__btn--decline{ background: transparent; color: #A3AFC7; border: 1px solid #3A4763; }
.cookie-consent__btn--decline:hover{ color: #E8EDF7; border-color: #A3AFC7; }
@media (max-width: 600px){
  .cookie-consent{ flex-direction: column; align-items: stretch; text-align: left; }
  .cookie-consent__actions{ justify-content: stretch; }
  .cookie-consent__btn{ flex: 1; }
}