/*
 * Instaroll landing page — scoped design tokens + component styles.
 * All rules are namespaced under .instaroll-landing to avoid leaking into the rest of the theme.
 */
.instaroll-landing{
  --mc-dark-blue:#007AA4;
  --mc-shadow-blue:#002F3F;
  --mc-lightest-gray:#EEF3F5;
  --mc-light-gray:#A7B1B6;
  --mc-dark-gray:#616C72;
  --mc-orange-600:#FF5C00;
  --mc-orange-400:#FF9900;
  --mc-teal-bright:#28B7B7;
  --mc-teal-mid:#1497BA;
  --mc-orange-gradient:linear-gradient(79.07deg, #FF5C00 2.07%, #FF9900 97.77%);
  --mc-fg:#000000;
  --ff-display:'Raleway', sans-serif;
  --ff-body:'Open Sans', sans-serif;
}

  .instaroll-landing{background:#fff;color:var(--mc-fg);font-family:var(--ff-body);overflow:hidden;}
  .instaroll-landing *{box-sizing:border-box;}
  .instaroll-landing a{color:inherit;text-decoration:none;}
  .instaroll-landing ::selection{background:var(--mc-teal-bright);color:#00232f;}

  /* keyframes */
  @keyframes ir-pulse{0%{box-shadow:0 0 0 0 rgba(255,92,0,.55);}70%{box-shadow:0 0 0 12px rgba(255,92,0,0);}100%{box-shadow:0 0 0 0 rgba(255,92,0,0);}}
  @keyframes ir-spin{to{transform:rotate(360deg);}}
  @keyframes ir-flash{0%{color:var(--mc-orange-400);}100%{color:#fff;}}
  @keyframes ir-teal-pulse{0%,100%{opacity:.35;}50%{opacity:1;}}
  @keyframes ir-gate{0%,45%{transform:scaleY(1);opacity:1;}49%,53%{transform:scaleY(.1);opacity:.3;}57%,100%{transform:scaleY(1);opacity:1;}}
  @keyframes ir-batchTok{0%{left:6%;opacity:0;}6%{opacity:1;}36%,47%{left:38%;opacity:1;}55%{left:60%;opacity:1;}62%{left:62%;transform:translateY(-50%) scale(.5);opacity:0;}100%{opacity:0;}}
  @keyframes ir-contTok{0%{left:4%;opacity:0;}9%{opacity:1;}58%{left:60%;opacity:1;}63%{transform:translateY(-50%) scale(1.14);}90%{left:90%;opacity:1;}100%{left:94%;opacity:0;}}
  @keyframes ir-batchProc{0%,49%{border-color:var(--mc-lightest-gray);color:var(--mc-dark-gray);box-shadow:none;}53%,61%{border-color:var(--mc-orange-600);color:var(--mc-orange-600);box-shadow:0 0 22px rgba(255,92,0,.45);}65%,100%{border-color:var(--mc-lightest-gray);color:var(--mc-dark-gray);box-shadow:none;}}
  @keyframes ir-liveProc{0%,100%{box-shadow:0 0 2px rgba(40,183,183,.2);}50%{box-shadow:0 0 26px rgba(40,183,183,.6);}}
  @keyframes ir-waitFlag{0%,62%{opacity:0;}68%,96%{opacity:.92;}100%{opacity:0;}}
  @keyframes ir-fadeUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:none;}}
  @keyframes ir-drift{from{transform:translateY(0);}to{transform:translateY(-16px);}}
  @keyframes ir-halo{0%,100%{opacity:.35;transform:scale(1);}50%{opacity:.7;transform:scale(1.06);}}
  @keyframes ir-hero-ping{0%{transform:scale(1);opacity:.9;}80%,100%{transform:scale(1.55);opacity:0;}}

  /* ==== Shift toggle · modern segmented control ==== */
  .ir-shift-tab{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;outline:none;background:transparent;cursor:pointer;font-family:var(--ff-body);font-weight:700;font-size:14px;color:var(--mc-dark-gray);padding:12px 26px;border-radius:99px;transition:color .35s cubic-bezier(.22,.61,.36,1);letter-spacing:-.005em;white-space:nowrap;flex:1;}
  .ir-shift-tab:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.5);}
  .ir-shift-tab.is-active{color:#fff;}
  .ir-shift-tab:not(.is-active) > span:first-child{background:var(--mc-teal-bright);}
  .ir-shift-tab.is-active > span:first-child{background:#fff;box-shadow:0 0 8px #fff;}
  .ir-shift-ind{position:absolute;top:5px;bottom:5px;left:5px;right:50%;border-radius:99px;background:var(--mc-shadow-blue);box-shadow:0 10px 24px -12px rgba(0,47,63,.6);transition:left .4s cubic-bezier(.34,1.32,.64,1),right .4s cubic-bezier(.34,1.32,.64,1);z-index:1;}
  .ir-shift-ind.to-batch{left:50%;right:5px;}
  .ir-cursor-hint{position:absolute;top:50%;right:14px;pointer-events:none;z-index:3;animation:ir-cursor-hint 3.8s cubic-bezier(.4,0,.2,1) infinite;}
  .ir-cursor-hint svg{filter:drop-shadow(0 4px 8px rgba(0,0,0,.25));}
  .ir-cursor-ring{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;border:2px solid var(--mc-orange-600);opacity:0;animation:ir-cursor-ripple 3.8s cubic-bezier(0,0,.2,1) infinite;}
  @keyframes ir-cursor-hint{
    0%,12%{transform:translate(-140px,-50%);opacity:0;}
    25%{transform:translate(-40px,-50%);opacity:1;}
    50%,56%{transform:translate(0,-50%) scale(1);opacity:1;}
    60%{transform:translate(0,-50%) scale(.85);opacity:1;}
    66%{transform:translate(0,-50%) scale(1);opacity:1;}
    82%{transform:translate(0,-50%);opacity:1;}
    100%{transform:translate(30px,-50%);opacity:0;}
  }
  @keyframes ir-cursor-ripple{
    0%,55%{opacity:0;transform:scale(.6);}
    58%{opacity:.85;transform:scale(1);}
    75%,100%{opacity:0;transform:scale(2.4);}
  }

  /* ====== Shift panels - modern data-flow illustration ====== */
  /* Class-driven active state (inline opacity + re-renders kept restarting the transition) */
  .ir-svp{position:absolute;inset:0;padding:22px 22px 18px;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .5s cubic-bezier(.22,.61,.36,1);}
  .ir-svp.is-active{opacity:1;pointer-events:auto;}
  @keyframes ir-flow-dash{to{background-position:-14px 0;}}
  @keyframes ir-fly-live{
    0%{left:26%;opacity:0;transform:translate(-50%,-50%) scale(.7);}
    18%{opacity:1;transform:translate(-50%,-50%) scale(1);}
    82%{opacity:1;transform:translate(-50%,-50%) scale(1);}
    100%{left:44%;opacity:0;transform:translate(-50%,-50%) scale(.7);}
  }
  @keyframes ir-fly-out{
    0%{left:54%;opacity:0;transform:translate(-50%,-50%) scale(.7);}
    18%{opacity:1;transform:translate(-50%,-50%) scale(1);}
    82%{opacity:1;transform:translate(-50%,-50%) scale(1);}
    100%{left:74%;opacity:0;transform:translate(-50%,-50%) scale(.7);}
  }
  @keyframes ir-src-pulse{0%,100%{box-shadow:0 0 0 0 rgba(40,183,183,0);}50%{box-shadow:0 0 0 4px rgba(40,183,183,.14);}}
  @keyframes ir-num-tick{0%,90%,100%{color:var(--mc-shadow-blue);transform:translateY(0);}92%{color:var(--mc-orange-600);transform:translateY(-2px);}}
  /* Batch: queued tokens tremble, then rush during gate open */
  @keyframes ir-queue-tremble{0%,45%{transform:translate(0,0);opacity:.75;}47%{transform:translate(-1px,-1px);}50%{transform:translate(1px,1px);}52%{transform:translate(-1px,1px);}54%{transform:translate(1px,-1px);}57%,100%{transform:translate(0,0);opacity:.75;}}
  @keyframes ir-batch-rush{
    /* Phase 1 — data flows from Sources, stops AT the cutoff (piles up) */
    0%{left:26%;opacity:0;transform:translate(-50%,-50%) scale(.8);}
    6%{opacity:1;transform:translate(-50%,-50%) scale(1);}
    22%{left:50%;opacity:1;transform:translate(-50%,-50%) scale(1);}
    /* Phase 2 — pile-up at the cutoff, waiting for approval */
    22.01%,58%{left:50%;opacity:1;transform:translate(-50%,-50%) scale(.85);}
    /* Phase 3 — cutoff released / approved: pill zips to payroll */
    62%{left:52%;opacity:1;transform:translate(-50%,-50%) scale(1.1);}
    76%{left:74%;opacity:1;transform:translate(-50%,-50%) scale(.9);}
    82%,100%{left:74%;opacity:0;transform:translate(-50%,-50%) scale(.7);}
  }
  @keyframes ir-lock-flash{
    0%,55%{color:#c23b1e;transform:scale(1);}
    /* moment of approval — flash to teal and open */
    58%,62%{color:var(--mc-teal-bright);transform:scale(1.18);}
    66%,100%{color:#c23b1e;transform:scale(1);}
  }
  /* Cutoff card wide-state — animates a CSS var used by border, text, sub-label */
  @keyframes ir-cutoff-approve{
    0%,55%{
      --co:#c23b1e;
      border-color:#c23b1e;
      box-shadow:0 0 0 0 rgba(194,59,30,0);
    }
    /* approval hit */
    58%,80%{
      --co:var(--mc-teal-bright);
      border-color:var(--mc-teal-bright);
      box-shadow:0 10px 30px -12px rgba(40,183,183,.55);
    }
    88%,100%{
      --co:#c23b1e;
      border-color:#c23b1e;
      box-shadow:0 0 0 0 rgba(194,59,30,0);
    }
  }
  /* Lock icon crossfade */
  @keyframes ir-lock-locked{
    0%,55%{opacity:1;transform:scale(1);}
    58%,82%{opacity:0;transform:scale(.6);}
    88%,100%{opacity:1;transform:scale(1);}
  }
  @keyframes ir-lock-unlocked{
    0%,55%{opacity:0;transform:scale(.6) rotate(-6deg);}
    58%{opacity:1;transform:scale(1.25) rotate(-14deg);}
    68%,82%{opacity:1;transform:scale(1) rotate(-8deg);}
    88%,100%{opacity:0;transform:scale(.6) rotate(-6deg);}
  }
  /* Sub-label ("IN 5 DAYS" ↔ "RELEASED") crossfade */
  @keyframes ir-cutoff-sub-red{
    0%,55%{opacity:1;}58%,82%{opacity:0;}88%,100%{opacity:1;}
  }
  @keyframes ir-cutoff-sub-teal{
    0%,55%{opacity:0;}
    58%{opacity:1;}
    68%,82%{opacity:1;}
    88%,100%{opacity:0;}
  }
  @keyframes ir-approved-in{
    0%,55%{opacity:0;transform:translate(-50%,-8px) scale(.7);}
    58%{opacity:1;transform:translate(-50%,-30px) scale(1.15);}
    65%,78%{opacity:1;transform:translate(-50%,-26px) scale(1);}
    84%,100%{opacity:0;transform:translate(-50%,-8px) scale(.7);}
  }
  @keyframes ir-out-flash{0%,60%{opacity:1;}64%,74%{opacity:0;transform:translateY(-4px);}78%,100%{opacity:1;}}
  @keyframes ir-out-value-flash{0%,60%{opacity:0;}64%,74%{opacity:1;color:var(--mc-shadow-blue);}78%,100%{opacity:0;}}

  /* Labeled traveling pills */
  .ir-tok-pill{position:absolute;top:50%;font-family:var(--ff-body);font-weight:700;font-size:9.5px;letter-spacing:.03em;color:#fff;padding:4px 9px;border-radius:99px;white-space:nowrap;z-index:2;transform:translate(-50%,-50%);animation-fill-mode:backwards;}
  .ir-tok-orange{background:var(--mc-orange-600);box-shadow:0 4px 12px -4px rgba(255,92,0,.5);}
  .ir-tok-navy{background:var(--mc-shadow-blue);box-shadow:0 4px 12px -4px rgba(0,47,63,.5);}
  .ir-tok-teal{background:var(--mc-teal-bright);box-shadow:0 4px 12px -4px rgba(40,183,183,.5);}
  .ir-tok-blue{background:var(--mc-dark-blue);box-shadow:0 4px 12px -4px rgba(0,122,164,.5);}

  /* ====== HERO · Instaroll run tracker (matches reference exactly, Mercans tokens) ====== */
  @keyframes irBlink{50%{opacity:.25;}}
  @keyframes irTap{0%{transform:translate(6px,6px) scale(.6);}60%{transform:translate(-1px,-1px) scale(1.05);}100%{transform:none;}}
  @keyframes irRing{0%{transform:scale(.4);opacity:.85;}100%{transform:scale(2.6);opacity:0;}}
  @keyframes irLivePulse{0%,100%{box-shadow:0 0 0 0 rgba(255,92,0,.55);}70%{box-shadow:0 0 0 10px rgba(255,92,0,0);}}

  .ir-h5{position:relative;background:linear-gradient(180deg,rgba(11,50,66,.9),rgba(6,30,40,.94));border:1px solid rgba(255,255,255,.09);border-radius:22px;padding:26px 26px 22px;box-shadow:0 44px 90px -34px rgba(0,0,0,.7);backdrop-filter:blur(6px);color:#fff;}
  .ir-h5-head{display:flex;align-items:center;justify-content:space-between;gap:14px;}
  .ir-h5-live{display:inline-flex;align-items:center;gap:11px;font-family:var(--ff-body);font-weight:700;font-size:14px;color:#fff;letter-spacing:-.005em;}
  .ir-h5-live .dot{width:9px;height:9px;border-radius:50%;background:var(--mc-orange-600);animation:irLivePulse 1.8s infinite;flex:none;}
  .ir-h5-clicks{font-family:var(--ff-body);font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#8fb3bf;text-align:right;}
  .ir-h5-clicks b{font-family:var(--ff-body);font-weight:800;font-size:15px;color:var(--mc-orange-600);letter-spacing:0;margin-left:6px;vertical-align:-1px;}

  .ir-h5-track{position:relative;margin-top:26px;padding-top:2px;}
  .ir-h5-line{position:absolute;left:10%;right:10%;top:19px;height:3px;background:rgba(255,255,255,.11);border-radius:3px;overflow:hidden;z-index:0;}
  .ir-h5-line i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--mc-teal-bright),var(--mc-orange-600));transition:width .85s cubic-bezier(.22,1,.36,1);}
  .ir-h5-comet{position:absolute;top:20.5px;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--mc-orange-600);box-shadow:0 0 0 4px rgba(255,92,0,.18),0 0 16px 3px rgba(255,92,0,.55);transition:left .85s cubic-bezier(.22,1,.36,1);z-index:1;pointer-events:none;}
  .ir-h5-comet::after{content:"";position:absolute;right:6px;top:50%;transform:translateY(-50%);width:52px;height:3px;border-radius:3px;background:linear-gradient(270deg,rgba(255,92,0,.55),transparent);}
  .ir-h5-nodes{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,1fr);gap:0;}
  .ir-h5-node{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:0 4px;position:relative;}
  .ir-h5-dot{position:relative;width:40px;height:40px;border-radius:50%;background:transparent;border:2px solid rgba(255,255,255,.2);display:inline-flex;align-items:center;justify-content:center;color:#8fb3bf;transition:border-color .35s cubic-bezier(.22,1,.36,1) .6s,background .35s .6s,color .35s .6s,transform .35s cubic-bezier(.34,1.56,.64,1) .6s,box-shadow .35s .6s;}
  .ir-h5-dot .i{width:8px;height:8px;border-radius:50%;background:currentColor;transition:opacity .3s .6s;}
  .ir-h5-dot .check{position:absolute;width:18px;height:18px;opacity:0;transition:opacity .3s .6s;}
  .ir-h5-node.now .ir-h5-dot{border-color:var(--mc-orange-600);color:var(--mc-orange-600);transform:scale(1.14);box-shadow:0 0 0 5px rgba(255,92,0,.14);}
  .ir-h5-node.now .ir-h5-dot .i{background:var(--mc-orange-600);animation:irBlink .8s infinite;}
  .ir-h5-node.done .ir-h5-dot{border-color:var(--mc-teal-bright);background:var(--mc-teal-bright);color:#fff;}
  .ir-h5-node.done .ir-h5-dot .i{opacity:0;}
  .ir-h5-node.done .ir-h5-dot .check{opacity:1;}
  .ir-h5-node.human .ir-h5-dot{border-style:dashed;border-color:rgba(255,255,255,.35);}
  .ir-h5-node.human.now .ir-h5-dot{border-style:solid;border-color:var(--mc-orange-600);color:var(--mc-orange-600);transform:scale(1.14);box-shadow:0 0 0 5px rgba(255,92,0,.14);}
  .ir-h5-node.human.done .ir-h5-dot{background:var(--mc-shadow-blue);border-color:var(--mc-orange-600);color:#fff;}

  .ir-h5-t{font-family:var(--ff-body);font-weight:700;font-size:12.5px;line-height:1.3;color:#e6f2f6;letter-spacing:-.005em;padding:0 2px;}
  .ir-h5-node:not(.done):not(.now) .ir-h5-t{color:rgba(255,255,255,.5);}
  .ir-h5-chip{font-family:var(--ff-body);font-weight:700;font-size:9px;line-height:1;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border-radius:6px;border:1px solid transparent;transition:.3s;}
  .ir-h5-chip.auto{color:#7fe3e3;background:rgba(40,183,183,.14);border-color:rgba(40,183,183,.28);}
  .ir-h5-chip.you{color:#ffb488;background:rgba(255,92,0,.16);border-color:rgba(255,92,0,.38);}
  .ir-h5-node:not(.done):not(.now) .ir-h5-chip{opacity:.5;}

  /* cursor tap on the human step while now */
  .ir-h5-cursor{position:absolute;left:50%;top:18px;pointer-events:none;animation:irTap .55s cubic-bezier(.34,1.56,.64,1);}
  .ir-h5-cursor svg{filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));}
  .ir-h5-cursor .ring{position:absolute;left:-4px;top:-4px;width:20px;height:20px;border-radius:50%;border:2px solid var(--mc-orange-600);animation:irRing .75s ease-out;}

  .ir-h5-cap{margin-top:22px;font-family:var(--ff-body);font-size:12.5px;line-height:1.55;color:#8fb3bf;text-wrap:pretty;}

  @media (max-width:520px){
    .ir-h5{padding:22px 18px 18px;}
    .ir-h5-nodes{grid-template-columns:1fr;gap:14px;}
    .ir-h5-line{left:19px;right:auto;top:20px;bottom:20px;width:3px;height:auto;}
    .ir-h5-line i{display:block !important;width:100% !important;background:linear-gradient(180deg,var(--mc-teal-bright),var(--mc-orange-600)) !important;transition:height .85s cubic-bezier(.22,1,.36,1) !important;}
    .ir-h5-comet{display:none;}
    .ir-h5-node{flex-direction:row;align-items:center;text-align:left;gap:12px;}
    .ir-h5-t{flex:1;}
  }

  /* .ir-reveal kept as a no-op class hook - reveal-on-scroll removed because React re-renders wiped the observer-added class */
  .ir-reveal{opacity:1;}

  /* eyebrow */
  .ir-eyebrow{font-family:var(--ff-body);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mc-dark-blue);display:inline-flex;align-items:center;gap:12px;}
  .ir-eyebrow::before{content:"";width:26px;height:2px;background:linear-gradient(90deg,var(--mc-dark-blue) 55%,var(--mc-orange-600) 55%);}
  .ir-eyebrow.on-dark{color:var(--mc-teal-bright);}
  .ir-eyebrow.on-dark::before{background:linear-gradient(90deg,var(--mc-teal-bright) 55%,var(--mc-orange-600) 55%);}

  /* signature underline */
  .ir-sig{width:96px;height:5px;border-radius:3px;margin-top:22px;background:linear-gradient(90deg,var(--mc-dark-blue) 0,var(--mc-dark-blue) 62%,var(--mc-orange-600) 62%,var(--mc-orange-600) 100%);}
  .ir-sig.center{margin-left:auto;margin-right:auto;}

  /* nav link hover */
  .ir-nav-link{position:relative;padding:6px 0;transition:color .2s;}
  .ir-nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--mc-orange-600);transition:right .3s cubic-bezier(.22,.61,.36,1);}
  .ir-nav-link:hover::after{right:0;}

  /* mock hover lift */
  .ir-lift{transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s cubic-bezier(.22,.61,.36,1);}
  .ir-lift:hover{transform:translateY(-6px);box-shadow:0 30px 70px -30px rgba(0,47,63,.4);}

  /* feature card */
  .ir-feat{position:relative;background:#fff;border:1px solid var(--mc-lightest-gray);border-radius:20px;padding:28px 24px 26px;overflow:hidden;transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s cubic-bezier(.22,.61,.36,1),border-color .35s;}
  .ir-feat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--mc-teal-bright),var(--mc-dark-blue) 60%,var(--mc-orange-600));opacity:1;transition:opacity .35s;}
  .ir-feat:hover{transform:translateY(-6px);box-shadow:0 30px 60px -28px rgba(0,47,63,.28);border-color:transparent;}
  .ir-feat:hover::before{opacity:1;}
  .ir-feat h4{font-family:var(--ff-body);font-weight:600;font-size:16.5px;color:#000;margin:0 0 10px;letter-spacing:-.01em;}
  .ir-feat p{font-family:var(--ff-body);font-size:14px;color:var(--mc-dark-gray);margin:0;line-height:1.55;}
  .ir-feat-ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;background:linear-gradient(150deg,var(--mc-dark-blue),var(--mc-teal-bright));color:#fff;transition:transform .35s cubic-bezier(.22,.61,.36,1),background .35s;}
  .ir-feat:hover .ir-feat-ic{transform:scale(1.06) rotate(-3deg);}
  .ir-feat-ic-legacy{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;background:linear-gradient(150deg,rgba(0,122,164,.12),rgba(40,183,183,.16));color:var(--mc-dark-blue);transition:transform .4s cubic-bezier(.22,.61,.36,1),background .35s,color .35s;}
  .ir-feat:hover .ir-feat-ic-legacy{background:linear-gradient(150deg,var(--mc-dark-blue),var(--mc-teal-bright));color:#fff;transform:scale(1.06) rotate(-3deg);}

  /* ==== animated feature icons ==== */
  .ir-anic{transform-origin:center;overflow:visible;}
  /* 1. spin (continuous calc) */
  @keyframes ir-anic-spin{to{transform:rotate(360deg);}}
  .ir-anic-spin{animation:ir-anic-spin 6s linear infinite;}
  .ir-feat:hover .ir-anic-spin{animation-duration:1.6s;}
  /* 2. pen wiggle */
  @keyframes ir-anic-pen{0%,100%{transform:translate(0,0) rotate(0deg);}50%{transform:translate(-1px,1px) rotate(-4deg);}}
  .ir-anic-pen{animation:ir-anic-pen 3.2s ease-in-out infinite;transform-origin:80% 20%;}
  /* 3. doc lines shift */
  @keyframes ir-anic-line{0%,100%{transform:translateX(0);opacity:1;}50%{transform:translateX(3px);opacity:.55;}}
  .ir-anic-line{animation:ir-anic-line 2.6s ease-in-out infinite;transform-origin:left center;}
  .ir-anic-line-2{animation-delay:.4s;}
  /* 4. check draw */
  .ir-anic-check-path{stroke-dasharray:14;stroke-dashoffset:14;animation:ir-anic-check-draw 3.4s ease-in-out infinite;}
  @keyframes ir-anic-check-draw{0%,15%{stroke-dashoffset:14;}45%,80%{stroke-dashoffset:0;}95%,100%{stroke-dashoffset:14;}}
  /* 5. calendar dot slide */
  @keyframes ir-anic-cal-dot{0%{transform:translate(0,0);}30%{transform:translate(4px,0);}60%{transform:translate(8px,0);}100%{transform:translate(0,4px);}}
  .ir-anic-cal-dot{animation:ir-anic-cal-dot 3.6s cubic-bezier(.6,0,.4,1) infinite;transform-box:fill-box;transform-origin:center;}
  /* 6. stack layer float */
  @keyframes ir-anic-stack-1{0%,100%{transform:translate(0,0);}50%{transform:translate(-1px,1px);}}
  @keyframes ir-anic-stack-2{0%,100%{transform:translate(0,0);}50%{transform:translate(1px,-2px);}}
  .ir-anic-stack-1{animation:ir-anic-stack-1 2.8s ease-in-out infinite;}
  .ir-anic-stack-2{animation:ir-anic-stack-2 2.8s ease-in-out infinite;}
  /* 7. recycle rotate */
  @keyframes ir-anic-recycle{to{transform:rotate(-360deg);}}
  .ir-anic-recycle{animation:ir-anic-recycle 7s linear infinite;}
  .ir-feat:hover .ir-anic-recycle{animation-duration:2s;}
  /* 8. sparkle */
  @keyframes ir-anic-spark-core{0%,100%{transform:scale(1);}50%{transform:scale(1.25);}}
  @keyframes ir-anic-spark-big{0%,100%{opacity:.85;transform:rotate(0deg);}50%{opacity:.4;transform:rotate(45deg);}}
  .ir-anic-spark-core{animation:ir-anic-spark-core 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
  .ir-anic-spark-big{animation:ir-anic-spark-big 3.2s ease-in-out infinite;transform-origin:center;transform-box:fill-box;}

  /* Final CTA hovers */
  .ir-cta-primary:hover{transform:translateY(-2px);box-shadow:0 22px 50px -14px rgba(255,92,0,.8);}
  .ir-cta-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);}
  .ir-cta-textlink:hover{color:var(--mc-teal-bright);}
  .ir-final-link:hover{color:#fff;text-decoration-color:#fff;}

  /* faq */  .ir-faq-item{background:#fff;border:1px solid var(--mc-lightest-gray);border-radius:16px;overflow:hidden;transition:border-color .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s cubic-bezier(.22,.61,.36,1),background .3s;}
  .ir-faq-item:hover{border-color:rgba(0,122,164,.2);}
  .ir-faq-item.open{border-color:transparent;background:#fff;box-shadow:0 20px 44px -24px rgba(0,47,63,.22);}
  .ir-faq-btn{width:100%;display:flex;align-items:center;gap:20px;text-align:left;background:none;border:0;cursor:pointer;padding:22px 24px;font-family:var(--ff-body);font-weight:600;font-size:16.5px;color:#000;letter-spacing:-.005em;transition:color .25s;}
  .ir-faq-btn:hover .ir-faq-q{color:var(--mc-dark-blue);}
  .ir-faq-item.open .ir-faq-btn{padding-bottom:14px;}
  .ir-faq-q{flex:1;transition:color .25s;line-height:1.35;}
  .ir-faq-plus{flex:none;width:34px;height:34px;border-radius:50%;background:var(--mc-lightest-gray);color:var(--mc-dark-blue);display:inline-flex;align-items:center;justify-content:center;transition:transform .4s cubic-bezier(.22,.61,.36,1),background .3s,color .3s;}
  .ir-faq-item:hover .ir-faq-plus{background:rgba(0,122,164,.1);}
  .ir-faq-item.open .ir-faq-plus{background:var(--mc-orange-600);color:#fff;transform:rotate(135deg);box-shadow:0 8px 18px -8px rgba(255,92,0,.5);}
  .ir-faq-a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.22,.61,.36,1);}
  .ir-faq-item.open .ir-faq-a{max-height:400px;}
  .ir-faq-p{padding:0 68px 24px 24px;color:var(--mc-dark-gray);font-size:15px;line-height:1.65;margin:0;}

  /* Where each step went */

  /* Loop flow connector · chevron cascade */
  .ir-flow-chevrons{display:flex;align-items:center;justify-content:center;gap:2px;color:var(--mc-orange-600);}
  .ir-chev{display:inline-flex;opacity:.2;animation:ir-chev-wave 1.6s ease-in-out infinite;}
  .ir-chev-1{animation-delay:0s;}
  .ir-chev-2{animation-delay:.2s;}
  .ir-chev-3{animation-delay:.4s;}
  @keyframes ir-chev-wave{
    0%,60%,100%{opacity:.2;transform:translateX(0) scale(1);}
    30%{opacity:1;transform:translateX(2px) scale(1.15);filter:drop-shadow(0 0 8px var(--mc-orange-600));}
  }
  @media (max-width:720px){
    .ir-feat-headline{white-space:normal !important;font-size:clamp(1.6rem,6.8vw,2rem) !important;}
    .ir-feat-sub{white-space:normal !important;font-size:14.5px !important;max-width:520px !important;}
    .ir-fate-timeline{padding-left:48px !important;}
    .ir-fate-timeline > div[aria-hidden]{left:23px !important;}
    .ir-fate-row{grid-template-columns:auto 1fr !important;grid-template-rows:auto auto !important;gap:12px 14px !important;padding:16px 16px !important;}
    .ir-fate-row > span[aria-hidden]{left:-41px !important;width:32px !important;height:32px !important;font-size:12px !important;}
    .ir-fate-row > span:last-child{grid-column:2 / -1;justify-self:start;}
  }
  .ir-fate-chip{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;font-family:var(--ff-body);font-weight:800;font-size:15px;color:#fff;letter-spacing:-.01em;box-shadow:0 6px 14px -8px rgba(0,47,63,.4);}
  .ir-fate-chip-teal{background:var(--mc-teal-bright);}
  .ir-fate-chip-blue{background:var(--mc-shadow-blue);}
  .ir-fate-chip-orange{background:var(--mc-orange-600);}
  @media (max-width:960px){
    .ir-fate-h{white-space:normal !important;}
    .ir-fate-connector{display:none !important;}
    .ir-fate-grid{grid-template-columns:1fr !important;}
    .ir-fate-hero{order:-1;}
  }

  /* Steps · Before/After comparison responsive */
  .ir-cmp{gap:24px !important;}
  @media (max-width:900px){
    .ir-cmp{grid-template-columns:1fr !important;}
    .ir-cmp-badge{position:relative !important;top:auto !important;left:auto !important;transform:none !important;margin:-12px auto;}
    .ir-steps-h{white-space:normal !important;}
    .ir-fate-grid{grid-template-columns:1fr !important;}
  }

  /* continuous-loop responsive */
  @media (max-width:960px){
    .ir-loop-flow{margin-top:64px !important;}
    .ir-loop-arc,.ir-loop-pill{display:none !important;}
    .ir-loop-grid{grid-template-columns:1fr 1fr !important;gap:20px !important;}
    .ir-loop-arr{display:none !important;}
  }
  @media (max-width:600px){
    .ir-loop-grid{grid-template-columns:1fr !important;}
  }

  /* bento responsive */
  @media (max-width:1024px){
    .ir-bento{grid-template-columns:repeat(6,1fr) !important;}
    .ir-bento-t{grid-column:span 6 !important;min-height:auto !important;}

    .ir-bento-t:nth-child(4),
    .ir-bento-t:nth-child(5),
    .ir-bento-t:nth-child(6){grid-column:span 6 !important;}
  }
  @media (max-width:680px){
    .ir-bento{grid-template-columns:1fr !important;}
  }

  /* ============ RESPONSIVE ============ */
  /* tablet & down */
  @media (max-width:1024px){
    .ir-hero-grid{grid-template-columns:1fr !important;gap:44px !important;}
    .ir-two-col{grid-template-columns:1fr !important;gap:36px !important;}
    .ir-loop{grid-template-columns:1fr 1fr !important;}
    .ir-feat-grid{grid-template-columns:1fr 1fr !important;}
    .ir-widgets{grid-template-columns:repeat(3,1fr) !important;}
    .ir-mock-url{display:none !important;}
    .ir-report-groups{grid-template-columns:1fr !important;}
    .ir-wrap{padding-left:24px !important;padding-right:24px !important;}
  }

  /* small tablet / large phone */
  @media (max-width:760px){
    .ir-stats-grid{grid-template-columns:1fr 1fr !important;gap:32px 16px !important;}
    .ir-stats-grid > div:nth-child(3){border-left:0 !important;}
    .ir-loop{grid-template-columns:1fr !important;}
    .ir-feat-grid{grid-template-columns:1fr 1fr !important;}
    .ir-widgets{grid-template-columns:repeat(2,1fr) !important;}
    .ir-edit-demo{grid-template-columns:1fr !important;}
    .ir-edit-left{border-right:0 !important;border-bottom:1px solid var(--mc-lightest-gray);}
    .ir-map-row{grid-template-columns:1fr !important;gap:6px !important;}
    .ir-map-arrow{display:none !important;}
    .ir-shift-visual{height:auto !important;min-height:520px;}
    .ir-shift-toggle{width:100%;justify-content:center;}
    .ir-shift-toggle button{padding:10px 16px !important;font-size:13px !important;flex:1;}
    .ir-shift-h{white-space:normal !important;font-size:2rem !important;}
    .ir-mock-tabs button{padding:10px 16px !important;font-size:13px !important;}
    .ir-tabcards{flex-direction:column !important;align-items:stretch !important;}
    .ir-tabcards > div{max-width:none !important;}
  }

  /* phone */
  @media (max-width:520px){
    .ir-wrap{padding-left:18px !important;padding-right:18px !important;}
    .ir-stats-grid{grid-template-columns:1fr !important;}
    .ir-stats-grid > div{border-left:0 !important;border-top:1px solid rgba(255,255,255,.1);padding-top:24px !important;}
    .ir-stats-grid > div:first-child{border-top:0 !important;padding-top:0 !important;}
    .ir-feat-grid{grid-template-columns:1fr !important;}
    .ir-widgets{grid-template-columns:1fr 1fr !important;}
    .ir-unchanged-split{flex-direction:column !important;}
    .ir-approve-bar{flex-direction:column !important;align-items:stretch !important;}
    .ir-report-groups{grid-template-columns:1fr !important;}
    .ir-nav-links{display:none !important;}
    .ir-mock-body{padding:18px !important;}
    .ir-mock-side{display:none !important;}
    .ir-mock-main{padding:14px !important;}
    .ir-mock-user{display:none !important;}
    .ir-nosurp-row{gap:12px !important;}
    .ir-cta-chips{gap:12px 14px !important;font-size:12px !important;}
    .ir-final-links{gap:12px !important;}
    .ir-final-links > a{font-size:12.5px !important;}
    .ir-approve-bar button{width:100%;justify-content:center;}
    .ir-shift-visual{height:280px !important;padding:14px !important;}
    .ir-collapse-stage{padding:28px 18px !important;}
    .ir-hero-cta{width:100%;}
    .ir-hero-cta a{flex:1;justify-content:center; padding:6px!important;}
  }

  /* keep hero card usable on ultra-narrow (down to 360) */
  @media (max-width:400px){
    .ir-calc-tiles{grid-template-columns:1fr !important;}
  }

  @media (prefers-reduced-motion:reduce){
    .instaroll-landing *{animation:none !important;transition:none !important;}
    .instaroll-landing .ir-reveal{opacity:1 !important;transform:none !important;}
  }

  /* ==== connection-aware motion reduction ==== */
  .instaroll-landing[data-slow="true"] *,
  .instaroll-landing[data-slow="true"] *::before,
  .instaroll-landing[data-slow="true"] *::after{
    animation:none !important;
    transition:none !important;
  }

  /* ==== mobile responsive · 390px & down ==== */
  @media (max-width:640px){
    /* Bento cards stack fully at 640, not 680 — matches user feedback */
    .ir-bento{grid-template-columns:1fr !important;}
    .ir-bento-t,
    .ir-bento-t:nth-child(2),
    .ir-bento-t:nth-child(3),
    .ir-bento-t:nth-child(4),
    .ir-bento-t:nth-child(5),
    .ir-bento-t:nth-child(6){grid-column:span 1 !important;min-height:auto !important;}
    /* Hero CTAs stack full-width */
    .ir-hero-cta{flex-direction:column !important;align-items:stretch !important;width:100%;}
    .ir-hero-cta a{width:100% !important;justify-content:center !important;flex:none !important;}
    /* Shift animation: stack all 3 columns vertically, kill flying pills */
    .ir-svp{position:relative !important;inset:auto !important;padding:22px 20px 22px !important;border-radius:24px;overflow:hidden;}
    .ir-svp:not(.is-active){display:none !important;}
    .ir-shift-visual{height:auto !important;min-height:0 !important;overflow:visible !important;background:transparent !important;border:0 !important;box-shadow:none !important;}
    .ir-shift-stage{grid-template-columns:1fr !important;gap:16px !important;}
    /* Kill the horizontal flow decorations - they need horizontal space */
    .ir-tok-pill{display:none !important;}
    .ir-shift-stage > div[aria-hidden]{display:none !important;}
    /* Center engine becomes a compact horizontal row */
    .ir-shift-stage > div:nth-child(2){flex-direction:row !important;align-items:center !important;gap:12px !important;background:rgba(255,255,255,.6);border-radius:12px;padding:10px 14px;justify-content:center !important;}
    .ir-shift-stage > div:nth-child(2) > div:first-child{width:44px !important;height:44px !important;border-radius:12px !important;flex:none;}
    .ir-shift-stage > div:nth-child(2) > div:first-child svg{width:18px !important;height:18px !important;}
    .ir-shift-stage > div:nth-child(2) > div:first-child > div:not(:first-child){display:none !important;}
    /* Output column: align left, full width */
    .ir-shift-stage > div:nth-child(3){align-items:stretch !important;}
    .ir-shift-stage > div:nth-child(3) > div:last-child{width:100% !important;}
    /* ==== VERTICAL FLOW · sources → engine → payroll (mobile) ==== */
    .ir-shift-stage > div:nth-child(1),
    .ir-shift-stage > div:nth-child(2){position:relative !important;}
    /* Instaroll: teal dashed line + falling orange dot between sections */
    .ir-svp-live .ir-shift-stage > div:nth-child(1)::after,
    .ir-svp-live .ir-shift-stage > div:nth-child(2)::after{
      content:"";position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);
      width:2px;height:16px;
      background:repeating-linear-gradient(180deg,var(--mc-teal-bright) 0 4px,transparent 4px 8px);
      background-size:2px 8px;
      animation:ir-flow-v .8s linear infinite;
      opacity:.7;z-index:1;
    }
    .ir-svp-live .ir-shift-stage > div:nth-child(1)::before,
    .ir-svp-live .ir-shift-stage > div:nth-child(2)::before{
      content:"";position:absolute;left:50%;bottom:-6px;
      width:10px;height:10px;border-radius:50%;
      background:var(--mc-orange-600);box-shadow:0 0 12px rgba(255,92,0,.65);
      animation:ir-flow-drop 1.9s ease-in-out infinite;
      z-index:2;
    }
    .ir-svp-live .ir-shift-stage > div:nth-child(2)::before{
      background:var(--mc-teal-bright);box-shadow:0 0 12px rgba(40,183,183,.7);
      animation-delay:.9s;
    }
    /* Traditional: red dashed line + animated batch flow (mobile) */
    .ir-svp-batch .ir-shift-stage > div:nth-child(1)::after,
    .ir-svp-batch .ir-shift-stage > div:nth-child(2)::after{
      content:"";position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);
      width:2px;height:16px;
      background:repeating-linear-gradient(180deg,#c23b1e 0 4px,transparent 4px 8px);
      opacity:.5;z-index:1;
    }
    /* Animated dot #1: source → cutoff (piles up, stops) */
    .ir-svp-batch .ir-shift-stage > div:nth-child(1)::before{
      content:"";position:absolute;left:50%;bottom:-6px;
      width:10px;height:10px;border-radius:50%;
      background:var(--mc-orange-600);box-shadow:0 0 10px rgba(255,92,0,.65);
      transform:translate(-50%,-40px);opacity:0;
      animation:ir-batch-fall-src 8s ease-in-out infinite;
      z-index:2;
    }
    /* Animated dot #2: cutoff → payroll (only after approval) */
    .ir-svp-batch .ir-shift-stage > div:nth-child(2)::before{
      content:"";position:absolute;left:50%;bottom:-6px;
      width:10px;height:10px;border-radius:50%;
      background:var(--mc-teal-bright);box-shadow:0 0 12px rgba(40,183,183,.7);
      transform:translate(-50%,-40px);opacity:0;
      animation:ir-batch-fall-cut 8s ease-in-out infinite;
      z-index:2;
    }
  }
  /* Traditional-batch mobile keyframes */
  @keyframes ir-batch-fall-src{
    0%{transform:translate(-50%,-24px);opacity:0;}
    8%{opacity:1;}
    22%{transform:translate(-50%,10px);opacity:1;}
    /* pile up at the cutoff — hold, then fade so the next one can arrive */
    22.01%,32%{transform:translate(-50%,10px);opacity:.85;}
    38%,100%{transform:translate(-50%,10px);opacity:0;}
  }
  @keyframes ir-batch-fall-cut{
    0%,58%{transform:translate(-50%,-24px);opacity:0;}
    62%{opacity:1;}
    80%{transform:translate(-50%,10px);opacity:1;}
    88%,100%{transform:translate(-50%,10px);opacity:0;}
  }
  /* keyframes usable at any width */
  @keyframes ir-flow-v{to{background-position:0 -8px;}}
  @keyframes ir-flow-drop{
    0%{transform:translate(-50%,-14px);opacity:0;}
    20%{opacity:1;}
    80%{opacity:1;}
    100%{transform:translate(-50%,30px);opacity:0;}
  }
  @media (max-width:520px){
    /* hide heavy decorative animations */
    .ir-mock-side{display:none !important;}
    /* strip payroll dashboard to essentials */
    .ir-calc-title-actions,
    .ir-calc-tabs{display:none !important;}
  }
  @media (max-width:400px){
    /* smallest phones */
    .ir-wrap{padding-left:14px !important;padding-right:14px !important;}
    .ir-mock-nav{padding:10px 12px !important;}
    .ir-mock-url{display:none !important;}
    .ir-mock-body{padding:14px !important;}
    .ir-mock-main{padding:14px !important;}
  }

  /* modern range slider */
  .ir-slider{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;padding:0;margin:0;}
  .ir-slider:focus{outline:none;}
  .ir-slider::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,var(--sl-accent) 0,var(--sl-accent) var(--sl-pct),rgba(0,47,63,.08) var(--sl-pct),rgba(0,47,63,.08) 100%);}
  .ir-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--sl-accent);box-shadow:0 4px 12px -2px rgba(0,47,63,.22);margin-top:-7px;transition:transform .15s ease,box-shadow .15s ease;}
  .ir-slider:hover::-webkit-slider-thumb{transform:scale(1.08);}
  .ir-slider:active::-webkit-slider-thumb{transform:scale(1.18);box-shadow:0 0 0 6px color-mix(in srgb,var(--sl-accent) 22%,transparent);}
  .ir-slider::-moz-range-track{height:6px;border-radius:999px;background:linear-gradient(to right,var(--sl-accent) 0,var(--sl-accent) var(--sl-pct),rgba(0,47,63,.08) var(--sl-pct),rgba(0,47,63,.08) 100%);}
  .ir-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--sl-accent);box-shadow:0 4px 12px -2px rgba(0,47,63,.22);}


  /* mock browser tabs (payroll / actions) */
  .ir-mock-tab{border:0;background:transparent;cursor:pointer;font-family:var(--ff-body);font-weight:700;font-size:14.5px;color:var(--mc-dark-gray);padding:12px 26px;border-radius:10px;transition:.2s;}
  .ir-mock-tab.is-active{background:var(--mc-lightest-gray);color:var(--mc-dark-blue);box-shadow:0 4px 12px -6px rgba(0,47,63,.25);}