/* ============ BASE + HERO ANIMATION ============ */
html { scroll-behavior: smooth; }
  body { font-family: 'Inter', system-ui, sans-serif; background: #F7FAF9; color: #0B1F1C; }
  .grid-bg {
    background-image:
      linear-gradient(to right, rgba(4,129,130,0.06) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(4,129,130,0.06) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: -1px -1px;
  }
  .dot-bg {
    background-image: radial-gradient(rgba(4,129,130,0.14) 1px, transparent 1px);
    background-size: 18px 18px;
  }
  .mask-fade-b { -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent); mask-image: linear-gradient(to bottom, black 70%, transparent); }
  .mask-fade-r { -webkit-mask-image: linear-gradient(to right, black 70%, transparent); mask-image: linear-gradient(to right, black 70%, transparent); }
  .eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #048182; }
  /* Brand gradient primary button */
  .btn-primary {
    background: linear-gradient(135deg, #2FA3A4 0%, #03696A 50%, #0F6466 100%);
    color: #FFFFFF;
    box-shadow: 0 8px 24px -8px rgba(3,105,106,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  }
  .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 14px 30px -8px rgba(3,105,106,0.55), inset 0 1px 0 rgba(255,255,255,0.25); }
  .btn-ghost { background: rgba(255,255,255,0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border:1px solid #E4ECEA; }
  .btn-ghost:hover { background: #FFFFFF; border-color: #048182; }
  .hairline { border-color: #E4ECEA; }
  .num { font-variant-numeric: tabular-nums; }
  .marquee { animation: scroll 40s linear infinite; }
  @keyframes scroll { to { transform: translateX(-50%); } }
  .tick { background: conic-gradient(from 0deg, #048182 0 25%, #E4ECEA 0 100%); }
  details > summary { list-style: none; cursor: pointer; }
  details > summary::-webkit-details-marker { display: none; }
  details[open] .chev { transform: rotate(45deg); }
  .chev { transition: transform .2s ease; }
  .pulse-dot::before { content:''; position:absolute; inset:0; border-radius:9999px; background:currentColor; opacity:.35; animation: pulse 1.8s ease-out infinite; }
  @keyframes pulse { 0%{transform:scale(1);opacity:.45} 100%{transform:scale(2.6);opacity:0} }

  /* Brand gradient helpers */
  .text-grad { background: linear-gradient(135deg, #2FA3A4 0%, #03696A 50%, #0F6466 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .bg-grad { background: linear-gradient(135deg, #2FA3A4 0%, #03696A 50%, #0F6466 100%); }
  .ring-grad { position: relative; }
  .ring-grad::before { content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background: linear-gradient(135deg, #2FA3A4, #03696A, #0F6466); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; }

  /* Glass card */
  .glass { background: rgba(255,255,255,0.65); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(228,236,234,0.9); }
  .glass-dark { background: rgba(11,31,28,0.55); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255,255,255,0.08); }

  /* Gradient orbs for backgrounds */
  .orb { position:absolute; border-radius:9999px; filter: blur(70px); opacity:.55; pointer-events:none; }
  .orb-a { background: radial-gradient(circle at 30% 30%, #2FA3A4, transparent 60%); }
  .orb-b { background: radial-gradient(circle at 70% 40%, #0F6466, transparent 60%); }
  .orb-c { background: radial-gradient(circle at 50% 50%, #03696A, transparent 60%); }

  /* Gray image placeholders */
  .ph {
    background: #E8EFED;
    color: #8FA09C;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
  }
  .ph::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(135deg, transparent 48%, rgba(255,255,255,0.55) 48%, rgba(255,255,255,0.55) 52%, transparent 52%);
    opacity: 0.5;
  }
  .ph svg { position: relative; width: 40%; max-width: 28px; height: auto; opacity: 0.7; }
  .ph-sm svg { max-width: 16px; }
  .ph-dark { background: #102723; color: #3A5852; }

  /* Large screen placeholder */
  .screen-ph {
    background: #E8EFED;
    color: #8FA09C;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
  }
  .screen-ph::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      linear-gradient(135deg, transparent 49.5%, rgba(255,255,255,0.6) 49.5%, rgba(255,255,255,0.6) 50.5%, transparent 50.5%);
    opacity: 0.6;
  }
  .screen-ph .screen-ph-inner {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
    color: #6E8580;
  }
  .screen-ph svg { width: 56px; height: 56px; opacity: 0.65; }
  .screen-ph .screen-ph-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
  .screen-ph-dark { background: #0E2622; color: #3A5852; }
  .screen-ph-dark .screen-ph-inner { color: #5A7A74; }
  .screen-chrome { height: 36px; border-bottom: 1px solid #D6E2DF; display:flex; align-items:center; gap:6px; padding: 0 12px; background: #EEF5F2; border-top-left-radius: 16px; border-top-right-radius: 16px; }
  .screen-chrome .dot { height: 10px; width: 10px; border-radius: 999px; background: #CADBD6; }
  .screen-chrome .url { margin-left: auto; margin-right: auto; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #8FA09C; }
  .screen-chrome-dark { background:#0B1F1C; border-bottom-color:#12302B; }
  .screen-chrome-dark .dot { background:#1F3A35; }
  .screen-chrome-dark .url { color:#3A5852; }

  /* ============ CONFIRMATION FLOW — ILLUSTRATED ANIMATION ============ */
  /* 10s loop, Notion-style: elements build in, relate to each other, resolve */
  .cfa { --d: 10s; }

  /* Connector wire draws in */
  .cfa-wire-path {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: cfaWire var(--d) ease-out infinite;
  }
  @keyframes cfaWire {
    0%, 6% { stroke-dashoffset: 900; opacity: 0; }
    10%    { stroke-dashoffset: 900; opacity: 1; }
    55%    { stroke-dashoffset: 0;   opacity: 1; }
    95%    { stroke-dashoffset: 0;   opacity: 1; }
    100%   { stroke-dashoffset: 0;   opacity: 0; }
  }

  /* Cards: lift in, then hold */
  .cfa-card { opacity: 0; transform: translateY(18px) scale(.96); transform-origin: center; }
  .cfa-card-a { animation: cfaCardA var(--d) cubic-bezier(.2,.8,.2,1) infinite; }
  .cfa-card-b { animation: cfaCardB var(--d) cubic-bezier(.2,.8,.2,1) infinite; }
  .cfa-card-c { animation: cfaCardC var(--d) cubic-bezier(.2,.8,.2,1) infinite; }
  @keyframes cfaCardA {
    0%   { opacity: 0; transform: translateY(20px) scale(.96); }
    8%   { opacity: 1; transform: translateY(0) scale(1); }
    92%  { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-8px) scale(.98); }
  }
  @keyframes cfaCardB {
    0%, 24% { opacity: 0; transform: translateY(22px) scale(.94); }
    32%     { opacity: 1; transform: translateY(0) scale(1); }
    92%     { opacity: 1; transform: translateY(0) scale(1); }
    100%    { opacity: 0; transform: translateY(-8px) scale(.98); }
  }
  @keyframes cfaCardC {
    0%, 58% { opacity: 0; transform: translateY(22px) scale(.94); }
    66%     { opacity: 1; transform: translateY(-4px) scale(1.02); }
    72%     { opacity: 1; transform: translateY(0) scale(1); }
    92%     { opacity: 1; transform: translateY(0) scale(1); }
    100%    { opacity: 0; transform: translateY(-8px) scale(.98); }
  }

  /* live dot */
  .cfa-dot { animation: cfaBlink 1.2s ease-in-out infinite; }
  @keyframes cfaBlink { 0%,100%{opacity:1} 50%{opacity:.3} }

  /* Card A pulse ring (announcing new order) */
  .cfa-pulseA { opacity: 0; animation: cfaPulseA var(--d) infinite; }
  @keyframes cfaPulseA {
    0%, 8%   { opacity: 0; transform: scale(1); }
    12%      { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(4,129,130,.55); }
    22%      { opacity: 0; transform: scale(1.06); box-shadow: 0 0 0 14px rgba(4,129,130,0); }
    100%     { opacity: 0; }
  }

  /* WhatsApp bubble (incoming) */
  .cfa-bubble { opacity: 0; transform: translateY(6px); animation: cfaBubble var(--d) infinite; }
  @keyframes cfaBubble {
    0%, 32% { opacity: 0; transform: translateY(8px); }
    38%     { opacity: 1; transform: translateY(0); }
    92%     { opacity: 1; transform: translateY(0); }
    100%    { opacity: 0; }
  }

  /* Finger hover + tap on confirm button (inside the incoming bubble) */
  .cfa-finger { opacity: 0; animation: cfaFinger var(--d) infinite; transform-origin: 40% 0%; }
  @keyframes cfaFinger {
    0%, 42%  { opacity: 0; transform: translate(10px,-4px) scale(.8); }
    46%      { opacity: 1; transform: translate(6px,-2px) scale(1); }
    50%      { opacity: 1; transform: translate(0,2px) scale(.9); }   /* press */
    54%      { opacity: 1; transform: translate(0,0) scale(1); }
    62%      { opacity: 0; transform: translate(-4px,-2px) scale(.95); }
    100%     { opacity: 0; }
  }
  .cfa-ripple { opacity: 0; transform: scale(.2); animation: cfaRipple var(--d) infinite; }
  @keyframes cfaRipple {
    0%, 48% { opacity: 0; transform: scale(.2); }
    52%     { opacity: .9; transform: scale(.2); }
    58%     { opacity: 0; transform: scale(2.2); }
    100%    { opacity: 0; }
  }
  /* Confirm button green-fill on tap */
  .cfa-btn-confirm { transition: none; animation: cfaBtn var(--d) infinite; }
  @keyframes cfaBtn {
    0%, 50%  { background: #fff; color: #075E54; transform: scale(1); box-shadow: none; }
    52%      { background: #048182; color: #fff; transform: scale(.94); box-shadow: 0 0 0 0 rgba(4,129,130,.5); }
    58%      { background: #048182; color: #fff; transform: scale(1); box-shadow: 0 0 0 8px rgba(4,129,130,0); }
    92%      { background: #048182; color: #fff; transform: scale(1); }
    100%     { background: #048182; color: #fff; transform: scale(1); }
  }

  /* Outgoing bubble (customer reply) */
  .cfa-bubble-out { opacity: 0; transform: translateY(8px) scale(.9); transform-origin: right top; animation: cfaBubbleOut var(--d) infinite; }
  @keyframes cfaBubbleOut {
    0%, 56% { opacity: 0; transform: translateY(10px) scale(.9); }
    62%     { opacity: 1; transform: translateY(0) scale(1); }
    92%     { opacity: 1; transform: translateY(0) scale(1); }
    100%    { opacity: 0; }
  }

  /* Status chips: Pending → Confirmed swap (card C) */
  .cfa-chip-pending   { animation: cfaChipPending   var(--d) infinite; }
  .cfa-chip-confirmed { animation: cfaChipConfirmed var(--d) infinite; transform-origin: center; }
  @keyframes cfaChipPending {
    0%, 68%  { opacity: 1; transform: scale(1); max-width: 80px; }
    72%      { opacity: 0; transform: scale(.6); max-width: 0; margin-right: -6px; }
    100%     { opacity: 0; transform: scale(.6); max-width: 0; margin-right: -6px; }
  }
  @keyframes cfaChipConfirmed {
    0%, 66%  { opacity: 0; transform: scale(.6); }
    72%      { opacity: 1; transform: scale(1.15); }
    76%      { opacity: 1; transform: scale(1); }
    100%     { opacity: 1; transform: scale(1); }
  }
  /* Timeline row highlight */
  .cfa-row-confirmed { opacity: .4; animation: cfaRowFade var(--d) infinite; }
  .cfa-row-dot { transform: scale(.6); animation: cfaRowDot var(--d) infinite; transform-origin: center; }
  @keyframes cfaRowFade {
    0%, 66%  { opacity: .35; }
    72%      { opacity: 1; }
    100%     { opacity: 1; }
  }
  @keyframes cfaRowDot {
    0%, 66% { transform: scale(.6); opacity: 0; }
    72%     { transform: scale(1.3); opacity: 1; }
    76%     { transform: scale(1); opacity: 1; }
    100%    { transform: scale(1); opacity: 1; }
  }
  /* Success burst */
  .cfa-burst { opacity: 0; transform: scale(.4) rotate(-20deg); animation: cfaBurst var(--d) infinite; transform-origin: center; }
  @keyframes cfaBurst {
    0%, 68%  { opacity: 0; transform: scale(.4) rotate(-20deg); }
    74%      { opacity: 1; transform: scale(1.1) rotate(0deg); }
    80%      { opacity: .8; transform: scale(1) rotate(0deg); }
    92%      { opacity: 0; transform: scale(1) rotate(10deg); }
    100%     { opacity: 0; }
  }

  /* Bottom floating label — crossfades between 3 captions */
  .cfa-label-1, .cfa-label-2, .cfa-label-3 { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); white-space: nowrap; }
  .cfa-label-1 { animation: cfaL1 var(--d) infinite; }
  .cfa-label-2 { animation: cfaL2 var(--d) infinite; }
  .cfa-label-3 { animation: cfaL3 var(--d) infinite; }
  @keyframes cfaL1 {
    0%, 4%  { opacity: 0; transform: translate(-50%, 30%); }
    10%     { opacity: 1; transform: translate(-50%, -50%); }
    28%     { opacity: 1; transform: translate(-50%, -50%); }
    32%     { opacity: 0; transform: translate(-50%, -130%); }
    100%    { opacity: 0; }
  }
  @keyframes cfaL2 {
    0%, 32% { opacity: 0; transform: translate(-50%, 30%); }
    38%     { opacity: 1; transform: translate(-50%, -50%); }
    62%     { opacity: 1; transform: translate(-50%, -50%); }
    66%     { opacity: 0; transform: translate(-50%, -130%); }
    100%    { opacity: 0; }
  }
  @keyframes cfaL3 {
    0%, 66% { opacity: 0; transform: translate(-50%, 30%); }
    72%     { opacity: 1; transform: translate(-50%, -50%); color: #048182; }
    95%     { opacity: 1; transform: translate(-50%, -50%); color: #048182; }
    100%    { opacity: 0; transform: translate(-50%, -130%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .cfa *[class*="cfa-"] { animation: none !important; opacity: 1 !important; transform: none !important; }
  }

  /* ============ HERO WORKFLOW ANIMATION ============ */
  /* 18s loop, 4 sequential steps inside a single dashboard frame.
     Step 1 (0-22%):  new order row arrives with toast
     Step 2 (22-50%): WhatsApp popover slides in, finger taps Confirm, status flips
     Step 3 (50-75%): Shipment bar slides up, truck animates
     Step 4 (75-100%): Delivered toast + KPI "Paid" increments, status flips to Delivered */
  .eg-app { --d: 18s; }

  /* --- table row: slide in + highlight pulse --- */
  .eg-row-new {
    transform-origin: top;
    animation: egRowIn var(--d) infinite;
  }
  @keyframes egRowIn {
    0%   { opacity: 0; transform: translateY(-10px); background: rgba(4,129,130,.18); }
    3%   { opacity: 1; transform: translateY(0);     background: rgba(4,129,130,.18); box-shadow: inset 3px 0 0 #048182; }
    10%  { background: rgba(4,129,130,.05); box-shadow: inset 3px 0 0 #048182; }
    100% { opacity: 1; transform: translateY(0); background: rgba(4,129,130,.05); box-shadow: inset 3px 0 0 #048182; }
  }

  /* --- sidebar icon sizing (critical: without this SVGs default to 300x150) --- */
  .eg-ni { width: 12px; height: 12px; flex-shrink: 0; }

  /* --- status chips swap in sequence: New -> Confirmed -> Shipped -> Delivered --- */
  .eg-status-stack { position: relative; height: 14px; min-width: 84px; }
  .eg-status-stack > span { position: absolute; inset: 0 auto 0 0; white-space: nowrap; }
  .eg-status-new, .eg-status-confirmed, .eg-status-shipped, .eg-status-delivered { transform-origin: center; }
  .eg-status-new       { animation: egSNew var(--d) infinite; }
  .eg-status-confirmed { animation: egSConfirmed var(--d) infinite; display: none; }
  .eg-status-shipped   { animation: egSShipped var(--d) infinite; display: none; }
  .eg-status-delivered { animation: egSDelivered var(--d) infinite; display: none; }

  @keyframes egSNew {
    0%   { opacity: 0; transform: scale(.6); }
    4%   { opacity: 1; transform: scale(1.15); }
    8%   { opacity: 1; transform: scale(1); }
    34%  { opacity: 1; transform: scale(1); }
    38%  { opacity: 0; transform: scale(.6); display:none; }
    100% { opacity: 0; display: none; }
  }
  @keyframes egSConfirmed {
    0%, 36%  { opacity: 0; transform: scale(.6); display: none; }
    38%      { display: inline-flex; opacity: 0; transform: scale(.6); }
    42%      { opacity: 1; transform: scale(1.2); display: inline-flex; }
    46%      { opacity: 1; transform: scale(1); display: inline-flex; }
    58%      { opacity: 1; transform: scale(1); display: inline-flex; }
    62%      { opacity: 0; transform: scale(.6); display: none; }
    100%     { opacity: 0; display: none; }
  }
  @keyframes egSShipped {
    0%, 60%  { opacity: 0; transform: scale(.6); display: none; }
    62%      { display: inline-flex; opacity: 0; transform: scale(.6); }
    66%      { opacity: 1; transform: scale(1.2); display: inline-flex; }
    70%      { opacity: 1; transform: scale(1); display: inline-flex; }
    80%      { opacity: 1; transform: scale(1); display: inline-flex; }
    84%      { opacity: 0; transform: scale(.6); display: none; }
    100%     { opacity: 0; display: none; }
  }
  @keyframes egSDelivered {
    0%, 82%  { opacity: 0; transform: scale(.6); display: none; }
    84%      { display: inline-flex; opacity: 0; transform: scale(.6); }
    88%      { opacity: 1; transform: scale(1.25); display: inline-flex; }
    92%      { opacity: 1; transform: scale(1); display: inline-flex; }
    100%     { opacity: 1; transform: scale(1); display: inline-flex; }
  }

  /* --- Overlays --- */
  .eg-ov { opacity: 0; will-change: transform, opacity; }

  /* Step 1: "New order" toast */
  .eg-ov-toast { animation: egToast var(--d) infinite; transform: translateY(-10px); }
  @keyframes egToast {
    0%   { opacity: 0; transform: translateY(-14px) scale(.92); }
    3%   { opacity: 1; transform: translateY(0) scale(1); }
    18%  { opacity: 1; transform: translateY(0) scale(1); }
    21%  { opacity: 0; transform: translateY(-10px) scale(.95); }
    100% { opacity: 0; }
  }

  /* Step 2: WhatsApp popover */
  .eg-ov-wa { animation: egWa var(--d) infinite; }
  @keyframes egWa {
    0%, 22%  { opacity: 0; transform: translate(20px,10px) scale(.9); }
    27%      { opacity: 1; transform: translate(0,0) scale(1); }
    48%      { opacity: 1; transform: translate(0,0) scale(1); }
    52%      { opacity: 0; transform: translate(10px,-6px) scale(.95); }
    100%     { opacity: 0; }
  }
  /* Finger tap */
  .eg-wa-finger { opacity: 0; animation: egFinger var(--d) infinite; transform-origin: 40% 0%; }
  @keyframes egFinger {
    0%, 32%  { opacity: 0; transform: translate(12px,-6px) scale(.8); }
    36%      { opacity: 1; transform: translate(4px,-2px) scale(1); }
    39%      { opacity: 1; transform: translate(0,2px) scale(.9); }
    42%      { opacity: 1; transform: translate(0,0) scale(1); }
    48%      { opacity: 0; transform: translate(-6px,-4px) scale(.95); }
    100%     { opacity: 0; }
  }
  /* Confirm button green fill on tap */
  .eg-wa-btn-confirm { animation: egWaBtn var(--d) infinite; }
  @keyframes egWaBtn {
    0%, 38%  { background: #fff; color: #075E54; transform: scale(1); box-shadow: none; }
    40%      { background: #048182; color: #fff; transform: scale(.94); box-shadow: 0 0 0 0 rgba(4,129,130,.5); }
    44%      { background: #048182; color: #fff; transform: scale(1);   box-shadow: 0 0 0 6px rgba(4,129,130,0); }
    100%     { background: #048182; color: #fff; transform: scale(1); }
  }
  /* Reply bubble */
  .eg-wa-reply { opacity: 0; transform: translateY(6px) scale(.9); transform-origin: right top; animation: egWaReply var(--d) infinite; }
  @keyframes egWaReply {
    0%, 42%  { opacity: 0; transform: translateY(6px) scale(.9); }
    46%      { opacity: 1; transform: translateY(0) scale(1); }
    100%     { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Step 3: Shipment bar */
  .eg-ov-ship { animation: egShip var(--d) infinite; }
  @keyframes egShip {
    0%, 50%  { opacity: 0; transform: translateY(22px) scale(.97); }
    55%      { opacity: 1; transform: translateY(0) scale(1); }
    76%      { opacity: 1; transform: translateY(0) scale(1); }
    80%      { opacity: 0; transform: translateY(12px) scale(.98); }
    100%     { opacity: 0; }
  }
  .eg-ship-fill  { width: 0%; animation: egShipFill var(--d) infinite; }
  .eg-ship-truck { left: 0%; animation: egShipTruck var(--d) infinite; }
  @keyframes egShipFill {
    0%, 55%  { width: 0%; }
    60%      { width: 18%; }
    66%      { width: 48%; }
    72%      { width: 78%; }
    78%      { width: 100%; }
    100%     { width: 100%; }
  }
  @keyframes egShipTruck {
    0%, 55%  { left: 0%; }
    60%      { left: calc(18% - 7px); }
    66%      { left: calc(48% - 7px); }
    72%      { left: calc(78% - 7px); }
    78%      { left: calc(100% - 14px); }
    100%     { left: calc(100% - 14px); }
  }
  .eg-ship-dot { animation: egBlink 1s ease-in-out infinite; }
  @keyframes egBlink { 0%,100%{opacity:1} 50%{opacity:.3} }

  /* Step 4: Delivered toast */
  .eg-ov-done { animation: egDone var(--d) infinite; }
  @keyframes egDone {
    0%, 80%  { opacity: 0; transform: translateY(-12px) scale(.9); }
    84%      { opacity: 1; transform: translateY(0) scale(1.05); }
    88%      { opacity: 1; transform: translateY(0) scale(1); }
    98%      { opacity: 1; transform: translateY(0) scale(1); }
    100%     { opacity: 0; transform: translateY(-8px) scale(.97); }
  }

  /* KPI tiles count up on step 4 */
  .eg-kpi-paid    { animation: egKpiPaid    var(--d) infinite; }
  .eg-kpi-pending { animation: egKpiPending var(--d) infinite; }
  @keyframes egKpiPaid {
    0%, 84%  { color: #0B1F1C; transform: scale(1); }
    86%      { color: #048182; transform: scale(1.2); }
    90%      { color: #048182; transform: scale(1); }
    100%     { color: #048182; transform: scale(1); }
  }
  /* "Pending" count also blinks at step 1 */
  @keyframes egKpiPending {
    0%       { color: #0B1F1C; transform: scale(1); }
    4%       { color: #D97706; transform: scale(1.2); }
    8%       { color: #0B1F1C; transform: scale(1); }
    84%      { color: #0B1F1C; transform: scale(1); }
    86%      { color: #6B7280; transform: scale(.9); }
    100%     { color: #6B7280; transform: scale(.9); }
  }

  /* Caption pill: swap text + step number */
  .eg-cap-1, .eg-cap-2, .eg-cap-3, .eg-cap-4 { white-space: nowrap; display: flex; align-items: center; justify-content: center; }
  .eg-cap-1 { animation: egCap1 var(--d) infinite; }
  .eg-cap-2 { animation: egCap2 var(--d) infinite; }
  .eg-cap-3 { animation: egCap3 var(--d) infinite; }
  .eg-cap-4 { animation: egCap4 var(--d) infinite; }
  @keyframes egCap1 { 0%{opacity:0; transform:translateY(40%)} 3%{opacity:1; transform:translateY(0)} 20%{opacity:1} 22%{opacity:0; transform:translateY(-40%)} 100%{opacity:0} }
  @keyframes egCap2 { 0%,22%{opacity:0; transform:translateY(40%)} 25%{opacity:1; transform:translateY(0)} 48%{opacity:1} 50%{opacity:0; transform:translateY(-40%)} 100%{opacity:0} }
  @keyframes egCap3 { 0%,50%{opacity:0; transform:translateY(40%)} 53%{opacity:1; transform:translateY(0)} 75%{opacity:1} 77%{opacity:0; transform:translateY(-40%)} 100%{opacity:0} }
  @keyframes egCap4 { 0%,77%{opacity:0; transform:translateY(40%)} 80%{opacity:1; transform:translateY(0); color:#048182} 100%{opacity:1; transform:translateY(0); color:#048182} }

  .eg-step-num { animation: egStepNum var(--d) infinite; }
  @keyframes egStepNum {
    0%,  77% { background: #0B1F1C; color: #fff; }
    80%,100% { background: linear-gradient(135deg,#2FA3A4,#03696A); color:#fff; }
  }
  .eg-num-1, .eg-num-2, .eg-num-3, .eg-num-4 { opacity: 0; }
  .eg-num-1 { animation: egNum1 var(--d) infinite; }
  .eg-num-2 { animation: egNum2 var(--d) infinite; }
  .eg-num-3 { animation: egNum3 var(--d) infinite; }
  .eg-num-4 { animation: egNum4 var(--d) infinite; }
  @keyframes egNum1 { 0%,20%{opacity:1} 22%,100%{opacity:0} }
  @keyframes egNum2 { 0%,22%{opacity:0} 25%,48%{opacity:1} 50%,100%{opacity:0} }
  @keyframes egNum3 { 0%,50%{opacity:0} 53%,75%{opacity:1} 77%,100%{opacity:0} }
  @keyframes egNum4 { 0%,77%{opacity:0} 80%,100%{opacity:1} }

  @media (prefers-reduced-motion: reduce) {
    .eg-app *[class*="eg-"] { animation: none !important; opacity: 1 !important; transform: none !important; }
    .eg-status-confirmed, .eg-status-shipped, .eg-status-delivered { display: none !important; }
  }

/* ============ SHIPPING ANIMATION ============ */
/* Shipping animation, 16s loop: 4 scenes */
  .shp { --sd: 16s; }
  .shp-scene { opacity: 0; transition: none; }
  .shp-scene-a { animation: shpSA var(--sd) infinite; }
  .shp-scene-b { animation: shpSB var(--sd) infinite; }
  .shp-scene-c { animation: shpSC var(--sd) infinite; }
  .shp-scene-d { animation: shpSD var(--sd) infinite; }
  @keyframes shpSA { 0%{opacity:0; transform:translateY(10px) scale(.98)} 3%{opacity:1; transform:none} 28%{opacity:1} 32%{opacity:0; transform:translateY(-8px) scale(.98)} 100%{opacity:0} }
  @keyframes shpSB { 0%,32%{opacity:0; transform:translateY(12px) scale(.96)} 36%{opacity:1; transform:none} 50%{opacity:1} 54%{opacity:0; transform:translateY(-8px) scale(.98)} 100%{opacity:0} }
  @keyframes shpSC { 0%,54%{opacity:0; transform:translateY(12px) scale(.96)} 58%{opacity:1; transform:none} 70%{opacity:1} 74%{opacity:0; transform:translateY(-8px) scale(.98)} 100%{opacity:0} }
  @keyframes shpSD { 0%,74%{opacity:0; transform:translateY(12px) scale(.96)} 78%{opacity:1; transform:none} 97%{opacity:1} 100%{opacity:0; transform:translateY(-8px) scale(.98)} }

  /* Checkboxes tick in sequence */
  .shp-check { background:#fff; transition: background .2s; }
  .shp-ck { opacity: 0; }
  .shp-row-1 .shp-check, .shp-row-2 .shp-check, .shp-row-3 .shp-check, .shp-row-4 .shp-check { animation-duration: var(--sd); animation-iteration-count: infinite; }
  .shp-row-1 .shp-check { animation-name: shpCk1; }
  .shp-row-2 .shp-check { animation-name: shpCk2; }
  .shp-row-3 .shp-check { animation-name: shpCk3; }
  .shp-row-4 .shp-check { animation-name: shpCk4; }
  .shp-row-1 .shp-ck { animation: shpCkOn1 var(--sd) infinite; }
  .shp-row-2 .shp-ck { animation: shpCkOn2 var(--sd) infinite; }
  .shp-row-3 .shp-ck { animation: shpCkOn3 var(--sd) infinite; }
  .shp-row-4 .shp-ck { animation: shpCkOn4 var(--sd) infinite; }
  @keyframes shpCk1 { 0%,6%{background:#fff; border-color:rgba(0,0,0,.2)} 10%,100%{background:#048182; border-color:#048182} }
  @keyframes shpCk2 { 0%,12%{background:#fff; border-color:rgba(0,0,0,.2)} 16%,100%{background:#048182; border-color:#048182} }
  @keyframes shpCk3 { 0%,18%{background:#fff; border-color:rgba(0,0,0,.2)} 22%,100%{background:#048182; border-color:#048182} }
  @keyframes shpCk4 { 0%,24%{background:#fff; border-color:rgba(0,0,0,.2)} 28%,100%{background:#048182; border-color:#048182} }
  @keyframes shpCkOn1 { 0%,8%{opacity:0} 12%,100%{opacity:1} }
  @keyframes shpCkOn2 { 0%,14%{opacity:0} 18%,100%{opacity:1} }
  @keyframes shpCkOn3 { 0%,20%{opacity:0} 24%,100%{opacity:1} }
  @keyframes shpCkOn4 { 0%,26%{opacity:0} 30%,100%{opacity:1} }

  /* Finger moves down the rows */
  .shp-finger { opacity:0; animation: shpFinger var(--sd) infinite; }
  @keyframes shpFinger {
    0%,4%{opacity:0; transform:translateY(0)}
    8%{opacity:1; transform:translateY(0)}
    14%{opacity:1; transform:translateY(28px)}
    20%{opacity:1; transform:translateY(56px)}
    26%{opacity:1; transform:translateY(84px)}
    32%{opacity:0; transform:translateY(84px)}
    100%{opacity:0}
  }

  /* Selected count ticks up */
  .shp-selected-pill { opacity: 0; animation: shpSel var(--sd) infinite; }
  @keyframes shpSel { 0%,6%{opacity:0} 10%{opacity:1} 36%{opacity:1} 40%{opacity:0} 100%{opacity:0} }
  .shp-count { animation: shpCount var(--sd) infinite; }
  @keyframes shpCount {
    0%,9%{content:"0"}
    10%,15%{}
    16%,21%{}
    22%,27%{}
    28%,36%{}
  }

  /* Send to shipping button pulse before scene change */
  .shp-btn-ship { animation: shpBtnShip var(--sd) infinite; }
  @keyframes shpBtnShip {
    0%,30%{transform:scale(1); box-shadow:none}
    33%{transform:scale(1.1); box-shadow:0 0 0 0 rgba(4,129,130,.6)}
    36%{transform:scale(1); box-shadow:0 0 0 10px rgba(4,129,130,0)}
    100%{transform:scale(1)}
  }

  /* Carrier: Ameex gets selected mid-scene B */
  .shp-car-selected { animation: shpCarSel var(--sd) infinite; }
  @keyframes shpCarSel {
    0%,42%{background:#fff; border-color:rgba(0,0,0,.08)}
    46%,60%{background:rgba(4,129,130,.06); border-color:#048182}
    100%{background:rgba(4,129,130,.06); border-color:#048182}
  }
  .shp-next { animation: shpNext var(--sd) infinite; }
  @keyframes shpNext {
    0%,52%{transform:scale(1)}
    55%{transform:scale(1.12); box-shadow:0 0 0 0 rgba(4,129,130,.55)}
    58%{transform:scale(1); box-shadow:0 0 0 8px rgba(4,129,130,0)}
    100%{transform:scale(1)}
  }

  /* Scene C: submit rows complete one by one */
  .shp-sub-tick { opacity:0; transform:scale(.4); }
  .shp-sub-done { opacity:0; }
  .shp-sub-1 .shp-sub-tick { animation: shpTk1 var(--sd) infinite; }
  .shp-sub-2 .shp-sub-tick { animation: shpTk2 var(--sd) infinite; }
  .shp-sub-3 .shp-sub-tick { animation: shpTk3 var(--sd) infinite; }
  .shp-sub-4 .shp-sub-tick { animation: shpTk4 var(--sd) infinite; }
  .shp-sub-1 .shp-sub-done { animation: shpTkD1 var(--sd) infinite; }
  .shp-sub-2 .shp-sub-done { animation: shpTkD2 var(--sd) infinite; }
  .shp-sub-3 .shp-sub-done { animation: shpTkD3 var(--sd) infinite; }
  .shp-sub-4 .shp-sub-done { animation: shpTkD4 var(--sd) infinite; }
  @keyframes shpTk1 { 0%,62%{opacity:0; transform:scale(.4)} 65%{opacity:1; transform:scale(1.3)} 68%,100%{opacity:1; transform:scale(1)} }
  @keyframes shpTk2 { 0%,65%{opacity:0; transform:scale(.4)} 68%{opacity:1; transform:scale(1.3)} 71%,100%{opacity:1; transform:scale(1)} }
  @keyframes shpTk3 { 0%,68%{opacity:0; transform:scale(.4)} 71%{opacity:1; transform:scale(1.3)} 74%,100%{opacity:1; transform:scale(1)} }
  @keyframes shpTk4 { 0%,71%{opacity:0; transform:scale(.4)} 74%{opacity:1; transform:scale(1.3)} 77%,100%{opacity:1; transform:scale(1)} }
  @keyframes shpTkD1 { 0%,63%{opacity:0} 66%,100%{opacity:1} }
  @keyframes shpTkD2 { 0%,66%{opacity:0} 69%,100%{opacity:1} }
  @keyframes shpTkD3 { 0%,69%{opacity:0} 72%,100%{opacity:1} }
  @keyframes shpTkD4 { 0%,72%{opacity:0} 75%,100%{opacity:1} }

  /* Auto badge only on final beat */
  /* Scene D animations */
  .shp-d-pulse { animation: shpDPulse 1.2s infinite; }
  @keyframes shpDPulse { 0%,100%{opacity:1} 50%{opacity:.3} }
  .shp-d-status-pending { animation: shpDPend var(--sd) infinite; }
  .shp-d-status-confirmed { opacity:0; animation: shpDConf var(--sd) infinite; }
  @keyframes shpDPend { 0%,80%{opacity:0} 82%,84%{opacity:1} 85%,100%{opacity:0} }
  @keyframes shpDConf { 0%,85%{opacity:0; transform:scale(.6)} 87%{opacity:1; transform:scale(1.15)} 89%,100%{opacity:1; transform:scale(1)} }
  .shp-d-bolt { opacity:0; animation: shpDBolt var(--sd) infinite; }
  @keyframes shpDBolt { 0%,87%{opacity:0; transform:scale(.4); box-shadow:0 0 0 0 rgba(47,163,164,.7)} 89%{opacity:1; transform:scale(1.2); box-shadow:0 0 0 0 rgba(47,163,164,.7)} 91%{opacity:1; transform:scale(1); box-shadow:0 0 0 10px rgba(47,163,164,0)} 100%{opacity:1; transform:scale(1); box-shadow:0 0 0 0 rgba(47,163,164,0)} }
  .shp-d-awb { opacity:0; animation: shpDAwb var(--sd) infinite; }
  @keyframes shpDAwb { 0%,91%{opacity:0; filter:blur(3px)} 93%,100%{opacity:1; filter:blur(0)} }
  .shp-d-shipped { opacity:0; animation: shpDShip var(--sd) infinite; }
  @keyframes shpDShip { 0%,93%{opacity:0; transform:scale(.5)} 95%{opacity:1; transform:scale(1.2)} 97%,100%{opacity:1; transform:scale(1)} }
  .shp-d-arrow-1 { stroke-dashoffset: 30; animation: shpDArr1 var(--sd) infinite; }
  .shp-d-arrow-2 { stroke-dashoffset: 30; animation: shpDArr2 var(--sd) infinite; }
  @keyframes shpDArr1 { 0%,85%{stroke:rgba(0,0,0,.15)} 87%,91%{stroke:#048182} 92%,100%{stroke:rgba(0,0,0,.15)} }
  @keyframes shpDArr2 { 0%,89%{stroke:rgba(0,0,0,.15)} 91%,95%{stroke:#048182} 96%,100%{stroke:rgba(0,0,0,.15)} }
  .shp-d-log-2 { opacity:0; animation: shpDL2 var(--sd) infinite; }
  .shp-d-log-3 { opacity:0; animation: shpDL3 var(--sd) infinite; }
  @keyframes shpDL2 { 0%,87%{opacity:0} 89%,100%{opacity:1} }
  @keyframes shpDL3 { 0%,93%{opacity:0} 95%,100%{opacity:1} }

  /* Captions */
  .shp-cap-1,.shp-cap-2,.shp-cap-3,.shp-cap-4 { white-space:nowrap; display:flex; align-items:center; justify-content:center; }
  .shp-cap-1 { animation: shpC1 var(--sd) infinite; }
  .shp-cap-2 { animation: shpC2 var(--sd) infinite; }
  .shp-cap-3 { animation: shpC3 var(--sd) infinite; }
  .shp-cap-4 { animation: shpC4 var(--sd) infinite; }
  @keyframes shpC1 { 0%{opacity:0; transform:translateY(40%)} 3%{opacity:1; transform:translateY(0)} 28%{opacity:1} 32%{opacity:0; transform:translateY(-40%)} 100%{opacity:0} }
  @keyframes shpC2 { 0%,32%{opacity:0; transform:translateY(40%)} 36%{opacity:1; transform:translateY(0)} 52%{opacity:1} 56%{opacity:0; transform:translateY(-40%)} 100%{opacity:0} }
  @keyframes shpC3 { 0%,56%{opacity:0; transform:translateY(40%)} 60%{opacity:1; transform:translateY(0)} 72%{opacity:1} 76%{opacity:0; transform:translateY(-40%)} 100%{opacity:0} }
  @keyframes shpC4 { 0%,76%{opacity:0; transform:translateY(40%)} 80%{opacity:1; transform:translateY(0)} 100%{opacity:1; transform:translateY(0)} }

  @media (prefers-reduced-motion: reduce) {
    .shp *[class*="shp-"] { animation: none !important; opacity: 1 !important; transform: none !important; }
    .shp-scene-b, .shp-scene-c, .shp-auto { display: none !important; }
  }

/* ============ DELIVERY ANIMATION ============ */
/* Delivery animation, 18s loop: 3 beats (each ~6s) */
  .dlv { --dd: 18s; }
  /* Event nodes pop in at their beat */
  .dlv-evt { opacity: .25; transform: translateY(2px); }
  .dlv-evt-1 { animation: dlvE1 var(--dd) infinite; }
  .dlv-evt-2 { animation: dlvE2 var(--dd) infinite; }
  .dlv-evt-3 { animation: dlvE3 var(--dd) infinite; }
  @keyframes dlvE1 {
    0%{opacity:.25; transform:translateY(2px)}
    4%{opacity:1; transform:translateY(0)}
    32%{opacity:1} 34%{opacity:.6} 100%{opacity:.6}
  }
  @keyframes dlvE2 {
    0%,36%{opacity:.25; transform:translateY(2px)}
    40%{opacity:1; transform:translateY(0)}
    65%{opacity:1} 67%{opacity:.6} 100%{opacity:.6}
  }
  @keyframes dlvE3 {
    0%,68%{opacity:.25; transform:translateY(2px)}
    72%{opacity:1; transform:translateY(0)}
    100%{opacity:1}
  }

  /* Chat bubbles slide in */
  .dlv-bub { opacity:0; transform:translateY(10px); }
  .dlv-bub-1 { animation: dlvB1 var(--dd) infinite; }
  .dlv-bub-2 { animation: dlvB2 var(--dd) infinite; }
  .dlv-bub-3 { animation: dlvB3 var(--dd) infinite; }
  @keyframes dlvB1 {
    0%,8%{opacity:0; transform:translateY(12px) scale(.96)}
    12%{opacity:1; transform:translateY(0) scale(1)}
    100%{opacity:1; transform:translateY(0) scale(1)}
  }
  @keyframes dlvB2 {
    0%,44%{opacity:0; transform:translateY(12px) scale(.96)}
    48%{opacity:1; transform:translateY(0) scale(1)}
    100%{opacity:1; transform:translateY(0) scale(1)}
  }
  @keyframes dlvB3 {
    0%,76%{opacity:0; transform:translateY(12px) scale(.96)}
    80%{opacity:1; transform:translateY(0) scale(1)}
    100%{opacity:1; transform:translateY(0) scale(1)}
  }

  /* Arrow pulses when each message fires */
  .dlv-arrow-path { stroke-dashoffset: 0; animation: dlvArrow var(--dd) infinite; opacity:.3; }
  @keyframes dlvArrow {
    0%,6%{opacity:.25}
    8%,14%{opacity:1; stroke-dashoffset:-24}
    18%,40%{opacity:.25}
    42%,50%{opacity:1; stroke-dashoffset:-48}
    54%,72%{opacity:.25}
    74%,82%{opacity:1; stroke-dashoffset:-72}
    86%,100%{opacity:.25}
  }
  .dlv-arrow-label { opacity:0; animation: dlvArrL var(--dd) infinite; }
  @keyframes dlvArrL {
    0%,6%{opacity:0} 10%,14%{opacity:1} 20%,42%{opacity:0} 46%,50%{opacity:1} 56%,74%{opacity:0} 78%,82%{opacity:1} 88%,100%{opacity:0}
  }

  /* Captions */
  .dlv-cap-1,.dlv-cap-2,.dlv-cap-3 { white-space:nowrap; display:flex; align-items:center; justify-content:center; gap:.25rem; }
  .dlv-cap-1 { animation: dlvC1 var(--dd) infinite; }
  .dlv-cap-2 { animation: dlvC2 var(--dd) infinite; }
  .dlv-cap-3 { animation: dlvC3 var(--dd) infinite; }
  @keyframes dlvC1 { 0%{opacity:0;transform:translateY(40%)} 3%{opacity:1;transform:none} 32%{opacity:1} 36%{opacity:0;transform:translateY(-40%)} 100%{opacity:0} }
  @keyframes dlvC2 { 0%,36%{opacity:0;transform:translateY(40%)} 40%{opacity:1;transform:none} 65%{opacity:1} 68%{opacity:0;transform:translateY(-40%)} 100%{opacity:0} }
  @keyframes dlvC3 { 0%,68%{opacity:0;transform:translateY(40%)} 72%{opacity:1;transform:none} 100%{opacity:1} }

  @media (prefers-reduced-motion: reduce) {
    .dlv *[class*="dlv-"] { animation: none !important; opacity: 1 !important; transform: none !important; }
  }

/* ============ RETURNS ANIMATION ============ */
/* Returns animation, 15s loop: 3 scenes */
  .ret { --rd: 15s; }
  .ret-scene { opacity: 0; }
  .ret-scene-a { animation: retSA var(--rd) infinite; }
  .ret-scene-b { animation: retSB var(--rd) infinite; }
  .ret-scene-c { animation: retSC var(--rd) infinite; }
  @keyframes retSA { 0%{opacity:0;transform:translateY(10px) scale(.98)} 3%{opacity:1;transform:none} 26%{opacity:1} 30%{opacity:0;transform:translateY(-8px) scale(.98)} 100%{opacity:0} }
  @keyframes retSB { 0%,30%{opacity:0;transform:translateY(12px) scale(.97)} 34%{opacity:1;transform:none} 72%{opacity:1} 76%{opacity:0;transform:translateY(-8px) scale(.98)} 100%{opacity:0} }
  @keyframes retSC { 0%,76%{opacity:0;transform:translateY(12px) scale(.96)} 80%{opacity:1;transform:none} 100%{opacity:1;transform:none} }

  /* Truck drives in Scene A */
  .ret-truck { animation: retTruck var(--rd) infinite; }
  @keyframes retTruck {
    0%{transform:translateX(-60px)} 4%{transform:translateX(-60px)}
    22%{transform:translateX(90px)} 30%{transform:translateX(90px)}
    100%{transform:translateX(90px)}
  }

  /* KPI counters tick on scene changes */
  .ret-k1,.ret-k2,.ret-k3,.ret-k4,.ret-k5 { animation-duration: var(--rd); animation-iteration-count: infinite; }
  /* In transit: 1 during scene A, then 0 */
  .ret-k2 { animation-name: retK2; }
  @keyframes retK2 {
    0%,28%{}
    30%{}
    100%{}
  }
  /* QC count: jumps to 1 at start of B, 0 at C */
  .ret-k3 { animation-name: retK3; }
  @keyframes retK3 { 0%,30%{color:#0B1F1C} 34%,76%{color:#048182} 80%,100%{color:#0B1F1C} }
  /* Checked: goes to 1 in scene C (with background flash) */
  .ret-k4 { animation-name: retK4; }

  /* Split-count numbers (Scene B) — use content swaps via ::before-less trick: just animate color/scale; change content using pseudo? Simpler: 3 stacked spans */
  .ret-box { transition: transform .2s; }
  .ret-b1-av { animation: retB1AV var(--rd) infinite; }
  .ret-b2-av { animation: retB2AV var(--rd) infinite; }
  .ret-b2-dm { animation: retB2DM var(--rd) infinite; }
  .ret-b3-av { animation: retB3AV var(--rd) infinite; }
  @keyframes retB1AV {
    0%,36%{transform:scale(1); box-shadow:none}
    40%{transform:scale(1.08); box-shadow:0 0 0 4px rgba(3,105,106,.18)}
    44%,100%{transform:scale(1); box-shadow:none}
  }
  @keyframes retB2AV {
    0%,46%{transform:scale(1); box-shadow:none}
    50%{transform:scale(1.08); box-shadow:0 0 0 4px rgba(3,105,106,.18)}
    54%,100%{transform:scale(1); box-shadow:none}
  }
  @keyframes retB2DM {
    0%,52%{transform:scale(1); box-shadow:none}
    56%{transform:scale(1.08); box-shadow:0 0 0 4px rgba(244,63,94,.2)}
    60%,100%{transform:scale(1); box-shadow:none}
  }
  @keyframes retB3AV {
    0%,58%{transform:scale(1); box-shadow:none}
    62%{transform:scale(1.08); box-shadow:0 0 0 4px rgba(3,105,106,.18)}
    66%,100%{transform:scale(1); box-shadow:none}
  }

  /* Number swaps via stacked visibility — we fake it by animating the text color AND using ::before counter-reset is too tricky. Use data-driven swap: we'll animate the inner spans with keyframes toggling content via CSS custom property is unreliable. 
     Instead, use JS-free approach: show 3 number elements stacked and fade them. Simpler: animate an attribute via @keyframes is not possible. 
     We'll use keyframes on 'content' via ::after on parent with counters. Actually easiest: animate via @property + content-visibility. Too complex. We'll use JS. */

  /* Refund checkbox flips on in Scene B footer */
  .ret-refund-check { background:#fff; animation: retRefCk var(--rd) infinite; }
  .ret-refund-ck { opacity:0; animation: retRefCkIn var(--rd) infinite; }
  @keyframes retRefCk { 0%,66%{background:#fff; border-color:rgba(0,0,0,.3)} 70%,100%{background:#048182; border-color:#048182} }
  @keyframes retRefCkIn { 0%,68%{opacity:0} 72%,100%{opacity:1} }

  /* Confirm button pulse end of Scene B */
  .ret-confirm { animation: retConf var(--rd) infinite; }
  @keyframes retConf {
    0%,70%{transform:scale(1); box-shadow:none}
    73%{transform:scale(1.12); box-shadow:0 0 0 0 rgba(4,129,130,.55)}
    76%{transform:scale(1); box-shadow:0 0 0 10px rgba(4,129,130,0)}
    100%{transform:scale(1)}
  }

  /* Captions */
  .ret-cap-1,.ret-cap-2,.ret-cap-3 { white-space:nowrap; display:flex; align-items:center; justify-content:center; }
  .ret-cap-1 { animation: retC1 var(--rd) infinite; }
  .ret-cap-2 { animation: retC2 var(--rd) infinite; }
  .ret-cap-3 { animation: retC3 var(--rd) infinite; }
  @keyframes retC1 { 0%{opacity:0;transform:translateY(40%)} 3%{opacity:1;transform:none} 26%{opacity:1} 30%{opacity:0;transform:translateY(-40%)} 100%{opacity:0} }
  @keyframes retC2 { 0%,30%{opacity:0;transform:translateY(40%)} 34%{opacity:1;transform:none} 72%{opacity:1} 76%{opacity:0;transform:translateY(-40%)} 100%{opacity:0} }
  @keyframes retC3 { 0%,76%{opacity:0;transform:translateY(40%)} 80%{opacity:1;transform:none} 100%{opacity:1;transform:none} }

  @media (prefers-reduced-motion: reduce) {
    .ret *[class*="ret-"] { animation: none !important; opacity: 1 !important; transform: none !important; }
    .ret-scene-a, .ret-scene-b { display: none !important; }
  }

/* ============ AI AGENT ANIMATION ============ */
/* AI Agent animations */
    .ai { --ad: 12s; }
    .ai-msg { opacity:0; transform:translateY(6px); }
    .ai-typing { opacity:0; }
    .ai-m1 { animation: aiM var(--ad) infinite; animation-delay: .3s; }
    .ai-m2 { animation: aiTypeShow var(--ad) infinite; animation-delay: 1.1s; }
    .ai-m3 { animation: aiM var(--ad) infinite; animation-delay: 2.3s; }
    .ai-m3a { animation: aiM var(--ad) infinite; animation-delay: 2.0s; }
    .ai-m4 { animation: aiM var(--ad) infinite; animation-delay: 4.0s; }
    .ai-m4b { animation: aiM var(--ad) infinite; animation-delay: 4.6s; }
    .ai-m5 { animation: aiM var(--ad) infinite; animation-delay: 5.3s; }
    .ai-m6 { animation: aiM var(--ad) infinite; animation-delay: 7.0s; }
    .ai-m7 { animation: aiOrder var(--ad) infinite; animation-delay: 8.2s; }
    @keyframes aiM { 0%{opacity:0; transform:translateY(8px)} 4%{opacity:1; transform:translateY(0)} 100%{opacity:1; transform:translateY(0)} }
    @keyframes aiTypeShow { 0%{opacity:0} 3%{opacity:1} 10%{opacity:1} 12%{opacity:0} 100%{opacity:0} }
    @keyframes aiOrder { 0%{opacity:0; transform:translateY(10px) scale(.96)} 3%{opacity:1; transform:translateY(0) scale(1.03)} 6%,100%{opacity:1; transform:translateY(0) scale(1)} }
    .ai-dot1, .ai-dot2, .ai-dot3 { animation: aiDot 1s infinite; }
    .ai-dot2 { animation-delay: .15s; }
    .ai-dot3 { animation-delay: .3s; }
    @keyframes aiDot { 0%,100%{transform:translateY(0); opacity:.4} 50%{transform:translateY(-2px); opacity:1} }
    .ai-blink { animation: aiBlink 1.2s infinite; }
    @keyframes aiBlink { 0%,100%{opacity:1} 50%{opacity:.3} }
    .ai-ground, .ai-tool { opacity:0; transform:translateX(-4px); }
    .ai-g1 { animation: aiG var(--ad) infinite; animation-delay: .8s; }
    .ai-g2 { animation: aiG var(--ad) infinite; animation-delay: 1.2s; }
    .ai-g3 { animation: aiG var(--ad) infinite; animation-delay: 1.6s; }
    .ai-g4 { animation: aiG var(--ad) infinite; animation-delay: 2.0s; }
    .ai-t1 { animation: aiG var(--ad) infinite; animation-delay: 2.4s; }
    .ai-t2 { animation: aiG var(--ad) infinite; animation-delay: 2.8s; }
    .ai-t3 { animation: aiG var(--ad) infinite; animation-delay: 5.6s; }
    .ai-t4 { animation: aiG var(--ad) infinite; animation-delay: 8.0s; }
    @keyframes aiG { 0%{opacity:0; transform:translateX(-6px)} 4%{opacity:1; transform:translateX(0)} 100%{opacity:1; transform:translateX(0)} }
    .ai-toast { opacity:0; transform:translateY(10px); animation: aiToast var(--ad) infinite; animation-delay: 8.5s; }
    @keyframes aiToast { 0%{opacity:0; transform:translateY(14px) scale(.95)} 5%{opacity:1; transform:translateY(0) scale(1.05)} 10%,90%{opacity:1; transform:translateY(0) scale(1)} 95%,100%{opacity:0; transform:translateY(-6px)} }
    @media (prefers-reduced-motion: reduce) {
      .ai *[class*="ai-"] { animation: none !important; opacity: 1 !important; transform: none !important; }
    }

/* ============ INBOX ANIMATION ============ */
.ibx-conv-1 { animation: ibxConv 6s infinite; }
@keyframes ibxConv { 0%,70%{background:rgba(4,129,130,.05)} 75%{background:rgba(4,129,130,.18); box-shadow: inset 3px 0 0 #048182} 85%{background:rgba(4,129,130,.12); box-shadow: inset 3px 0 0 #048182} 100%{background:rgba(4,129,130,.05)} }
.ibx-unread { animation: ibxUn 6s infinite; }
@keyframes ibxUn { 0%,70%{transform:scale(1)} 75%{transform:scale(1.25); background:#2FA3A4} 85%{transform:scale(1.1)} 100%{transform:scale(1)} }
.ibx-time { animation: ibxT 6s infinite; }
@keyframes ibxT { 0%,74%{color:rgba(0,0,0,.4)} 76%,100%{color:#048182} }
.ibx-ai-badge { animation: ibxAi 6s infinite; }
@keyframes ibxAi { 0%,20%{opacity:.4} 25%,70%{opacity:1} 75%,100%{opacity:.5} }
.ibx-ai-reply { opacity:0; transform:translateY(6px); animation: ibxRep 6s infinite; }
@keyframes ibxRep { 0%,30%{opacity:0; transform:translateY(8px)} 40%{opacity:1; transform:translateY(0)} 100%{opacity:1; transform:translateY(0)} }
.ibx-toast { opacity:0; animation: ibxToast 6s infinite; }
@keyframes ibxToast { 0%,45%{opacity:0; transform:translateY(10px)} 50%{opacity:1; transform:translateY(0)} 95%{opacity:1; transform:translateY(0)} 100%{opacity:0; transform:translateY(-6px)} }
.ibx-call { opacity:0; transform:translateY(-8px) scale(.96); animation: ibxCall 6s infinite; }
@keyframes ibxCall { 0%,10%{opacity:0; transform:translateY(-10px) scale(.94)} 15%{opacity:1; transform:translateY(0) scale(1)} 60%{opacity:1; transform:translateY(0) scale(1)} 70%,100%{opacity:0; transform:translateY(-8px) scale(.96)} }
.ibx-ring { animation: ibxRing 1.4s infinite; }
@keyframes ibxRing { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)} 70%{box-shadow:0 0 0 12px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)} }
.ibx-blink { animation: ibxBlink 1s infinite; }
@keyframes ibxBlink { 0%,100%{opacity:1} 50%{opacity:.3} }
.ibx-dur::after { content:""; }
@media (prefers-reduced-motion: reduce) {
  .ibx *[class*="ibx-"] { animation: none !important; opacity: 1 !important; transform: none !important; }
}


/* ================================================= */
/* MOBILE (<=767px) — responsive illustrations        */
/* Big-SaaS approach: keep desktop illustrations intact */
/* and scale them to fit viewport, like product screenshots. */
/* ================================================= */
@media (max-width: 767px) {

  /* Prevent any rogue horizontal scroll on the page itself */
  html, body { overflow-x: hidden; }

  /* Section-level horizontal padding tighter on phones */
  section .max-w-\[1280px\], section .max-w-\[1000px\] { padding-left: 16px !important; padding-right: 16px !important; }

  /* Hero typography — big but not blown out */
  section h1, section .hero-h1 { font-size: 34px !important; line-height: 1.08 !important; letter-spacing: -0.02em; }
  section h2 { font-size: 28px !important; line-height: 1.12 !important; }
  section h3 { font-size: 22px !important; line-height: 1.15 !important; }

  /* ===== RESPONSIVE ILLUSTRATIONS =====
     Each illustration is scaled as a whole (like a screenshot).
     The `.mob-scroll` wrapper from the previous pass is repurposed as a sizer:
     it gets an aspect-ratio matching the illustration inside, and the
     illustration is placed absolutely and scaled down to fit.
  */
  .mob-scroll {
    position: relative;
    width: 100%;
    /* default aspect for .cfa/.shp/.dlv/.ret/.ai — 16/10 */
    aspect-ratio: 16 / 10;
    overflow: visible; /* let floating overlays breathe */
  }
  /* Hero dashboard has a different aspect */
  .mob-scroll:has(.eg-app) { aspect-ratio: 1258 / 699; }
  /* Inbox illustration has its own aspect (roughly 16/9.5 on desktop) */
  .mob-scroll:has(.ibx) { aspect-ratio: 16 / 11; }

  .mob-scroll > .eg-app,
  .mob-scroll > .cfa,
  .mob-scroll > .shp,
  .mob-scroll > .dlv,
  .mob-scroll > .ret,
  .mob-scroll > .ai,
  .mob-scroll > .ibx {
    position: absolute;
    top: 0;
    left: 0;
    width: 1120px;          /* design width */
    transform-origin: top left;
    /* Scale = viewportWidth / 1120. Using 100vw ≈ parent width minus padding.
       The JS below sets the exact scale per-instance for reliability. */
  }

  /* Floating captions / toasts inside illustrations — keep compact */
  .eg-ov-toast, .eg-ov-done { font-size: 10px !important; height: 26px !important; padding: 0 10px !important; }

  /* The "Replaces spreadsheet" tabs: wrap to multiple rows on phone */
  .sheet-tabs-mobile { flex-wrap: wrap !important; row-gap: 4px !important; }

  /* Integrations connector grid: 4-col desktop → 2-col mobile */
  .integrations-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

  /* Marquee logos: smaller gap */
  .marquee { animation-duration: 28s !important; gap: 24px !important; }

  /* Footer grids collapse */
  footer .md\:grid-cols-5, footer .md\:grid-cols-4 { grid-template-columns: 1fr 1fr !important; }

  /* Nav: show mobile menu button */
  .mobile-nav-btn { display: inline-flex !important; }

  /* Buttons in hero: full-width stack */
  .hero-cta-group { flex-direction: column !important; align-items: stretch !important; }
  .hero-cta-group > a { width: 100% !important; justify-content: center !important; }
}

/* Small phones */
@media (max-width: 420px) {
  section h1, section .hero-h1 { font-size: 30px !important; }
  section h2 { font-size: 24px !important; }
}

/* Mobile nav button is hidden by default on desktop */
.mobile-nav-btn { display: none; }

/* Mobile menu panel */
.mobile-menu-panel {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  /* Use dynamic viewport so iOS Safari URL bar collapse/expand doesn't clip the last items */
  height: calc(100vh - 56px);
  height: calc(100dvh - 56px);
  max-height: calc(100vh - 56px);
  max-height: calc(100dvh - 56px);
  background: rgba(247,250,249,0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 39;
  padding: 24px 20px calc(40px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mobile-menu-panel.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu-panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  border-bottom: 1px solid #E4ECEA;
  font-size: 17px;
  font-weight: 500;
  color: #0B1F1C;
}
.mobile-menu-panel a:last-of-type { border-bottom: none; }
/* Section header rows — small uppercase labels above grouped links */
.mobile-menu-panel .mm-section {
  margin-top: 18px;
  padding: 6px 4px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6B7E7B;
}
.mobile-menu-panel .mm-section:first-child { margin-top: 0; }
/* Reset the bottom border on the link immediately preceding a section header */
.mobile-menu-panel a:has(+ .mm-section) { border-bottom: none; }
/* Sign-in row gets a top divider so it visually breaks from the Learn group */
.mobile-menu-panel .mm-signin {
  margin-top: 18px;
  border-top: 1px solid #E4ECEA;
}
.mobile-menu-panel .mm-cta {
  margin-top: 12px;
  border-bottom: none;
  background: linear-gradient(135deg, #2FA3A4 0%, #03696A 50%, #0F6466 100%);
  color: white;
  border-radius: 10px;
  padding: 14px 16px;
  justify-content: center;
  font-weight: 600;
}