/* ──────────────────────────────────────────────────────────────
   Instaroll · Section 01 — Platform · "Payroll on autopilot"
   Three legible blocks: Before/After · autonomous run · impact.
   Built on HRB tokens. Loads after home.css (reuses .wrap .mono .flag).
   ────────────────────────────────────────────────────────────── */

.ir-sec { padding-top: clamp(72px, 9vh, 120px); }
.ir-kick { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ir-ship {
  color: var(--hrb-orange-70);
  background: var(--hrb-orange-00);
  border: 1px solid var(--hrb-orange-30);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 10px;
  letter-spacing: 0.1em;
}
.ir-h { margin: 14px 0 0; max-width: none; white-space: nowrap; font-size: min(72px, 6.5vw); }
.ir-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.ir-head-l { display: flex; flex-direction: column; align-items: center; }
.ir-head-r { display: block; }
.ir-lede {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 auto;
  /* track the nowrap headline width: ~11.06× its font-size = min(72px,6.5vw) */
  max-width: min(796px, 72vw);
  text-wrap: pretty;
}
@media (max-width: 860px) {
  .ir-head { gap: 14px; }
  .ir-h { white-space: normal; }
}

.ir-block { margin-top: clamp(40px, 6vh, 72px); }
.ir-block-cap { display: block; margin-bottom: 18px; }
.ir-block--flow {
  margin-top: clamp(48px, 7vh, 88px);
  padding-top: clamp(36px, 5vh, 56px);
  border-top: 1px solid var(--rule);
}

/* ── 1 · Before / After (row-paired) ────────────────────── */
/* ── 1 · "How Instaroll works" · bento ──────────────────── */
/* 12-col bento. Row 1: hero stats (6 / 3 / 3) on navy / orange / white.
   Row 2: three capability tiles (4 / 4 / 4), all white. Scale and color
   blocking carry the design — tiles are single compositions, not
   "visual area + caption area" splits. */
.ir-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}
.ir-bn {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(20px, 2.2vw, 26px);
  border-radius: 20px;
  overflow: hidden;
  opacity: 0; transform: translateY(16px);
  transition: transform 0.45s var(--ease-emphasized), box-shadow 0.45s var(--ease-standard), border-color 0.45s var(--ease-standard);
}
.ir-bento.on .ir-bn { animation: irBnIn 0.6s var(--ease-emphasized) forwards; animation-delay: calc(var(--i) * 90ms); }
@keyframes irBnIn { to { opacity: 1; transform: none; } }

/* placement */
.ir-bn--structure { grid-column: span 6; min-height: 240px; }
.ir-bn--speed     { grid-column: span 3; min-height: 240px; }
.ir-bn--approval  { grid-column: span 3; min-height: 240px; }
.ir-bn--inputs,
.ir-bn--corrections,
.ir-bn--reports   { grid-column: span 4; min-height: 210px; }

/* palettes */
.ir-bn--structure { background: #001738; color: rgba(255,255,255,0.86); }
.ir-bn--speed     { background: var(--accent); color: rgba(255,255,255,0.96); }
.ir-bn--approval,
.ir-bn--inputs,
.ir-bn--corrections,
.ir-bn--reports {
  background: #fff;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
}

/* hover */
.ir-bn--approval:hover,
.ir-bn--inputs:hover,
.ir-bn--corrections:hover,
.ir-bn--reports:hover {
  border-color: var(--hrb-orange-30);
  box-shadow: 0 16px 32px -22px rgba(255,95,31,0.55);
  transform: translateY(-2px);
}

/* ── shared elements ─────────────────────────────────────── */
.ir-bn-kicker {
  display: inline-flex; align-items: center;
  font: 700 11.5px/1 var(--font-mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.ir-bn--structure .ir-bn-kicker { color: rgba(255,255,255,0.55); }
.ir-bn--speed     .ir-bn-kicker { color: rgba(255,255,255,0.78); }

/* MEGA stat — the centrepiece */
.ir-bn-mega {
  display: inline-flex; align-items: flex-start; gap: 4px;
  margin-top: 2px;
  font-family: var(--font-display);
  line-height: 0.88;
  letter-spacing: -0.05em;
  font-weight: 650;
}
.ir-bn-mega em {
  font-style: normal;
  font-size: clamp(72px, 7.5vw, 108px);
  color: var(--accent);
}
.ir-bn-mega .ir-bn-unit {
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 600;
  margin-top: 10px;
  letter-spacing: -0.015em;
  color: var(--ink-2);
}
.ir-bn--speed .ir-bn-mega em { color: #fff; }
.ir-bn--speed .ir-bn-mega .ir-bn-unit { color: rgba(255,255,255,0.85); }
.ir-bn--structure .ir-bn-mega em { color: var(--accent); }
.ir-bn--structure .ir-bn-mega .ir-bn-unit { color: rgba(255,255,255,0.7); }

/* one-liner supporting copy under the stat */
.ir-bn-line {
  margin: 12px 0 0;
  font: 400 14.5px/1.45 var(--font-body);
  text-wrap: pretty;
  color: inherit;
}
.ir-bn-line b { font-weight: 650; color: inherit; }
.ir-bn--structure .ir-bn-line { color: rgba(255,255,255,0.78); }
.ir-bn--structure .ir-bn-line b { color: #fff; }
.ir-bn--speed     .ir-bn-line { color: rgba(255,255,255,0.92); }

/* row-2 capability tile copy */
.ir-bn-title {
  margin: 10px 0 5px;
  font: 650 clamp(18px, 1.4vw, 21px)/1.2 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ir-bn-sub {
  margin: 0;
  font: 400 13.5px/1.45 var(--font-body);
  color: var(--ink-2);
}

/* ── ART · Structure (navy) — two tab pills + subtle grid ── */
.ir-art-grid {
  position: absolute; right: -40px; top: -40px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(255,95,31,0.16), transparent 70%);
  pointer-events: none;
}
.ir-art-tabs {
  margin-top: auto; padding-top: 14px;
  display: flex; gap: 8px;
  position: relative; z-index: 1;
}
.ir-art-tab {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 13px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  font: 600 13px/1.2 var(--font-display);
  color: #fff;
  backdrop-filter: blur(2px);
}
.ir-art-tab .d {
  position: absolute; left: -1px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 3px; background: var(--accent);
}
.ir-art-tab em {
  font: 400 10.5px/1.3 var(--font-body); font-style: normal;
  color: rgba(255,255,255,0.6);
}

/* ── ART · Speed (orange) — ambient bar chart ──────────── */
.ir-art-bars {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 42%;
  display: flex; align-items: flex-end; gap: 4px;
  padding: 0 22px 20px;
  pointer-events: none;
}
.ir-art-bar {
  flex: 1;
  height: 0;
  border-radius: 4px 4px 0 0;
  background: rgba(255,255,255,0.32);
  transition: height 0.7s var(--ease-emphasized);
  transition-delay: var(--d);
}
.ir-bento.on .ir-art-bar { height: calc(var(--h) * 1%); }
.ir-art-bar.on {
  background: #fff;
  box-shadow: 0 0 24px rgba(255,255,255,0.4);
}

/* ── ART · Approval (white) — button mock ──────────────── */
.ir-art-button {
  margin-top: auto; padding-top: 14px;
}
.ir-art-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border-radius: 11px;
  background: var(--ink); color: #fff;
  font: 600 13.5px/1 var(--font-body);
  box-shadow: 0 10px 20px -10px rgba(0,23,56,0.55);
  position: relative;
}
.ir-art-btn::after {
  content: ""; position: absolute; inset: -3px;
  border-radius: 14px;
  border: 1.5px solid var(--accent);
  opacity: 0; transform: scale(1);
  animation: irBtnRing 2.4s var(--ease-emphasized) infinite;
}
@keyframes irBtnRing {
  0%   { opacity: 0.65; transform: scale(1); }
  60%  { opacity: 0; transform: scale(1.14); }
  100% { opacity: 0; transform: scale(1.14); }
}

/* ── ART · Inputs — three source rows ──────────────────── */
.ir-art-sources {
  margin-top: auto; padding-top: 14px;
  display: flex; flex-direction: column; gap: 5px;
}
.ir-art-source {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: var(--hrb-gray-10);
  font: 600 12.5px/1 var(--font-display); color: var(--ink);
}
.ir-art-source i.d { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ir-art-source i.c1 { background: var(--accent); }
.ir-art-source i.c2 { background: #1A3E6D; }
.ir-art-source i.c3 { background: var(--hrb-green-60); }
.ir-art-source em {
  font: 400 11.5px/1.3 var(--font-body); color: var(--ink-2); font-style: normal;
  margin-left: auto;
}

/* ── ART · Corrections — money card with strikethrough ──── */
.ir-art-money {
  position: relative;
  margin-top: auto; padding: 12px 14px;
  padding-top: 16px;
  border: 1px solid var(--rule);
  border-radius: 11px;
  background: linear-gradient(180deg, #fff 0%, var(--hrb-orange-00) 100%);
  display: flex; flex-direction: column; gap: 4px;
}
.ir-art-money-chip {
  position: absolute; top: -10px; right: 14px;
  display: inline-flex; align-items: center;
  padding: 5px 11px;
  background: var(--hrb-green-10);
  color: var(--hrb-green-70);
  border: 1px solid var(--hrb-green-30, #BFE6CB);
  border-radius: 999px;
  font: 700 11px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 10px -6px rgba(15,133,41,0.5);
}
.ir-art-money-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px;
}
.ir-art-money-row .mono.dim { font-size: 10px; }
.ir-art-money-row strong {
  font: 650 17px/1 var(--font-display);
  letter-spacing: -0.012em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ir-art-money-row.prev strong {
  font-size: 13px; font-weight: 500; color: var(--ink-3);
}
.ir-art-money-row.prev s { color: inherit; text-decoration: line-through; }

/* ── ART · Reports — file stack with checks ──────────────── */
.ir-art-files {
  margin-top: auto; padding-top: 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.ir-art-file {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 11px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
  font: 500 12.5px/1 var(--font-body); color: var(--ink);
  opacity: 0; transform: translateX(-6px);
}
.ir-art-file svg {
  flex: none;
  width: 14px; height: 14px;
  padding: 2px; border-radius: 50%;
  background: var(--hrb-green-60); color: #fff;
}
.ir-bento.on .ir-art-file { animation: irFileIn 0.45s var(--ease-emphasized) forwards; }
.ir-bento.on .ir-art-file.f1 { animation-delay: 0.6s; }
.ir-bento.on .ir-art-file.f2 { animation-delay: 0.72s; }
.ir-bento.on .ir-art-file.f3 { animation-delay: 0.84s; }
.ir-bento.on .ir-art-file.f4 { animation-delay: 0.96s; }
@keyframes irFileIn { to { opacity: 1; transform: none; } }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .ir-bn--structure { grid-column: span 12; }
  .ir-bn--speed,
  .ir-bn--approval { grid-column: span 6; }
  .ir-bn--inputs,
  .ir-bn--corrections,
  .ir-bn--reports { grid-column: span 6; }
}
@media (max-width: 620px) {
  .ir-bento { grid-template-columns: 1fr; }
  .ir-bn--structure,
  .ir-bn--speed,
  .ir-bn--approval,
  .ir-bn--inputs,
  .ir-bn--corrections,
  .ir-bn--reports { grid-column: span 1; min-height: 280px; }
  .ir-bn-mega em { font-size: clamp(72px, 22vw, 96px); }
}

/* ── 2 · Autonomous run ─────────────────────────────────── */
.ir-run {
  position: relative;
  border: 1px solid var(--rule-strong);
  border-radius: 20px;
  padding: clamp(22px, 3vw, 36px);
  background:
    radial-gradient(120% 120% at 0% 0%, var(--hrb-orange-00) 0%, transparent 42%),
    radial-gradient(120% 130% at 100% 100%, var(--hrb-green-10) 0%, transparent 46%),
    #fff;
  box-shadow: var(--shadow-default);
  overflow: hidden;
}
.ir-run::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(255,255,255,0.5) 100%);
}
.ir-run--bare {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.ir-run--bare::before { display: none; }
.ir-run > * { position: relative; }
.ir-run-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: clamp(26px, 4vh, 40px); }
.ir-run-state { display: inline-flex; align-items: center; gap: 9px; font: 600 15px/1.2 var(--font-display); color: var(--ink); }
.ir-run-state.done { color: var(--hrb-green-70); }
.ir-run-live {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(255,95,31,0.5); animation: irPulse 1.8s infinite;
}
@keyframes irPulse { 0% { box-shadow: 0 0 0 0 rgba(255,95,31,0.5); } 70% { box-shadow: 0 0 0 7px rgba(255,95,31,0); } 100% { box-shadow: 0 0 0 0 rgba(255,95,31,0); } }
.ir-run-tick {
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--hrb-green-60); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.ir-run-clicks { font-size: 11px; color: var(--ink-2); letter-spacing: 0.06em; }
.ir-run-clicks b { color: var(--accent); font-size: 13px; }

.ir-track { position: relative; }
.ir-track-line {
  position: absolute; left: 10%; right: 10%; top: 19px; height: 3px;
  background: var(--rule-strong); border-radius: 3px; overflow: hidden;
  z-index: 0;
}
.ir-track-line i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--hrb-green-60), var(--accent));
  transition: width 0.8s var(--ease-emphasized);
}
/* the autopilot "comet" gliding along the flight path — sits BEHIND the
   station dots (z below .ir-nodes) so it reads as travelling between them */
.ir-comet {
  position: absolute; top: 20.5px; left: 10%;
  width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255,95,31,0.16), 0 0 16px 3px rgba(255,95,31,0.5);
  transition: left 0.85s var(--ease-emphasized);
  z-index: 1; pointer-events: none;
}
.ir-comet::after {
  content: ""; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 54px; height: 3px; border-radius: 3px;
  background: linear-gradient(270deg, rgba(255,95,31,0.5), transparent);
}
.ir-nodes {
  position: relative;
  z-index: 2;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.ir-node {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 0 4px;
}
.ir-node-dot {
  position: relative;
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 2px solid var(--rule-strong);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  transition: border-color 0.4s var(--ease-standard), background 0.4s var(--ease-standard), color 0.4s, transform 0.4s var(--ease-spring);
}
.ir-node-i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.ir-node.now .ir-node-dot { border-color: var(--accent); color: var(--accent); transform: scale(1.12); box-shadow: 0 0 0 5px var(--hrb-orange-00); }
.ir-node.now .ir-node-i { background: var(--accent); animation: irBlink 0.8s infinite; }
@keyframes irBlink { 50% { opacity: 0.3; } }
.ir-node.done .ir-node-dot { border-color: var(--hrb-green-60); background: var(--hrb-green-60); color: #fff; }
.ir-node.human .ir-node-dot { border-style: dashed; }
.ir-node.human.now .ir-node-dot { border-style: solid; border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 5px var(--hrb-darkblue-00); }
.ir-node.human.done .ir-node-dot { background: var(--ink); border-color: var(--ink); }
.ir-node-t { font: 600 12.5px/1.3 var(--font-display); color: var(--ink); }
.ir-node-s {
  font: 600 9.5px/1 var(--font-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px;
}
.ir-node-s.auto { color: var(--hrb-green-70); background: var(--hrb-green-10); }
.ir-node-s.you { color: var(--ink); background: var(--hrb-darkblue-10); }

/* cursor tap at the human step */
.ir-cursor { position: absolute; left: 50%; top: 54%; pointer-events: none; animation: irTap 0.6s var(--ease-spring); }
.ir-cursor .ring {
  position: absolute; left: -4px; top: -4px; width: 18px; height: 18px;
  border-radius: 50%; border: 2px solid var(--accent);
  animation: irRing 0.7s ease-out;
}
@keyframes irTap { 0% { transform: translate(6px, 6px) scale(0.6); } 60% { transform: translate(-1px, -1px) scale(1.05); } 100% { transform: none; } }
@keyframes irRing { 0% { transform: scale(0.4); opacity: 0.8; } 100% { transform: scale(2.6); opacity: 0; } }

.ir-run-cap {
  margin: clamp(22px, 3vh, 32px) 0 0;
  font: 400 14.5px/1.5 var(--font-body); color: var(--ink-2);
  text-wrap: pretty;
}
.ir-run-cap--solo {
  margin: 0;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.5;
  color: var(--ink);
  max-width: 60ch;
}

/* ── 3 · Impact ─────────────────────────────────────────── */

/* ── 3 · Impact · flush stat ribbon (no cards, vertical dividers) ── */
.ir-impact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: clamp(12px, 2vh, 20px) 0 0; }
.ir-stat {
  display: flex; flex-direction: column; gap: 6px;
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.8vw, 32px);
  border-left: 1px solid var(--rule);
  background: transparent;
}
.ir-stat:first-child { border-left: 0; padding-left: 0; }
.ir-stat:last-child { padding-right: 0; }
.ir-stat-n {
  display: inline-flex; align-items: baseline; gap: 2px;
  font: 650 clamp(40px, 5.2vw, 64px)/1 var(--font-display);
  letter-spacing: -0.035em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.ir-stat-n em { font-size: 0.5em; font-style: normal; font-weight: 650; }
.ir-stat-t { font: 600 16px/1.2 var(--font-display); color: var(--ink); margin-top: 4px; }
.ir-stat-d { font: 400 13.5px/1.5 var(--font-body); color: var(--ink-2); text-wrap: pretty; }

.ir-tagline {
  margin: clamp(24px, 3.5vh, 36px) 0 0;
  font: 500 clamp(18px, 2vw, 24px)/1.35 var(--font-display);
  letter-spacing: -0.01em; color: var(--ink);
  text-wrap: balance;
}

.ir-sec .rule { margin-top: clamp(52px, 7vh, 88px); }

/* ── responsive ─────────────────────────────────────────── */
@media (max-width: 880px) {
  .ir-impact { grid-template-columns: 1fr; padding: 8px 0 0; }
  .ir-stat { border-left: 0; border-top: 1px solid var(--rule); padding: clamp(18px, 3vw, 22px) 0; }
  .ir-stat:first-child { border-top: 0; padding-top: 0; }
  .ir-h { max-width: none; }
}
@media (max-width: 720px) {
  .ir-nodes { grid-template-columns: 1fr; gap: 14px; }
  .ir-track-line { left: 19px; right: auto; top: 20px; bottom: 20px; width: 3px; height: auto; }
  .ir-track-line i { display: none; }
  .ir-comet { display: none; }
  .ir-node { flex-direction: row; align-items: center; text-align: left; gap: 12px; }
  .ir-node-t { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ir-bn { opacity: 1 !important; transform: none !important; animation: none !important; }
  .ir-art-bar { transition: none; height: calc(var(--h) * 1%) !important; }
  .ir-art-btn::after { animation: none; opacity: 0; }
  .ir-art-file { opacity: 1 !important; transform: none !important; animation: none !important; }
  .ir-comet { transition: none; }
  .ir-run-live, .ir-node.now .ir-node-i { animation: none; }
  .ir-cursor { display: none; }
}

/* ── Instaroll · big video + vertical flow line layout ───── */
.ir-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--hrb-orange-00) 0%, #fff 52%, var(--hrb-darkblue-05, #f0f3f8) 100%);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-default);
}
/* real HR Blizz screenshot as the default poster */
.ir-video-screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.ir-video-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
}
.ir-video-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.55) 100%);
}
.ir-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  background: transparent;
  z-index: 2;
}
.ir-video-el.is-live { display: block; }
.ir-video-ph {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.ir-video-play {
  position: relative;
  width: clamp(66px, 6vw, 92px);
  height: clamp(66px, 6vw, 92px);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 18px 40px -12px rgba(255,95,31,0.6);
  transition: transform var(--motion-base) var(--ease-spring);
}
.ir-video-play svg { margin-left: 4px; }
.ir-video-play::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0.35;
  z-index: -1;
  animation: irPlayPulse 2s ease-out infinite;
}
@keyframes irPlayPulse {
  0% { transform: scale(1); opacity: 0.35; }
  70% { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}
.ir-video-ph:hover .ir-video-play { transform: scale(1.05); }
.ir-video-cap { color: var(--ink-2); letter-spacing: 0.08em; }

/* below the video — copy + vertical flow line */
.ir-flow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 84px);
  align-items: center;
}
.ir-flow-h {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 10px 0 0;
  text-wrap: balance;
}
.ir-flow-p {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 16px 0 0;
  max-width: 42ch;
  text-wrap: pretty;
}

/* vertical orientation of the flow line */
.ir-run--vertical { padding-left: clamp(8px, 2vw, 28px); }
.ir-run--vertical .ir-track-line {
  left: 20px; right: auto; top: 20px; bottom: 20px;
  width: 3px; height: auto;
}
.ir-run--vertical .ir-track-line i {
  width: 100%;
  background: linear-gradient(180deg, var(--hrb-green-60), var(--accent));
}
.ir-run--vertical .ir-comet { display: none; }
.ir-run--vertical .ir-nodes {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3.4vh, 40px);
}
.ir-run--vertical .ir-node {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 4px;
  align-items: center;
  text-align: left;
  padding: 0;
}
.ir-run--vertical .ir-node-dot { grid-row: span 2; }
.ir-run--vertical .ir-node-t { align-self: end; }
.ir-run--vertical .ir-node-s { align-self: start; justify-self: start; }
.ir-run--vertical .ir-cursor { left: 20px; top: 60%; }

@media (max-width: 820px) {
  .ir-flow-grid { grid-template-columns: 1fr; gap: 32px; }
  .ir-video { aspect-ratio: 4 / 3; }
}