/* A shared, local illustration of the Desktop-to-Live ARP workflow. */
.arp-enrichment { background:linear-gradient(180deg,var(--bg),var(--surface)); border-block:1px solid var(--border); }
.arp-enrichment .section-heading { align-items:end; }
.arp-enrichment .section-heading .eyebrow { margin-bottom:20px; }
.arp-workflow { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,.7fr) minmax(0,1.2fr); gap:24px; align-items:stretch; margin-top:48px; }
.arp-source,.arp-result { min-width:0; padding:28px; background:var(--surface); border:1px solid var(--border); border-radius:20px; }
.arp-result { background:var(--surface-raised); border-color:var(--accent-border); }
.arp-workflow h3 { font-size:25px; letter-spacing:-.04em; margin-block:8px 12px; }
.arp-workflow p:not(.eyebrow),.arp-bottom p { font-size:16px; color:var(--muted); line-height:1.65; }
.arp-file { display:flex; gap:8px; align-items:center; margin-top:28px; padding-bottom:15px; border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:11px; color:var(--accent); overflow-wrap:anywhere; }
.arp-file > span { font-size:22px; }
.arp-record { margin-top:7px; }
.arp-record > div { padding:12px 0; border-bottom:1px solid var(--border); }
.arp-record dt { color:var(--muted); font-size:13px; margin-bottom:4px; }
.arp-record dd { font-family:var(--font-mono); font-size:14px; line-height:1.6; color:var(--text); overflow-wrap:anywhere; }
.arp-mac dd { color:var(--accent-soft); }
.arp-match { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; position:relative; padding-block:22px; }
.arp-match .eyebrow { font-size:10px; }
.arp-match-symbol { display:grid; place-items:center; width:76px; height:76px; font-family:var(--font-mono); font-size:38px; margin-block:20px 8px; border-radius:50%; border:1px solid var(--accent-border); background:var(--accent-dim); color:var(--accent); box-shadow:0 0 35px var(--accent-dim); animation:arp-match-pulse 5s ease-in-out infinite; }
.arp-stream { position:absolute; top:30%; left:-25px; width:calc(50% - 14px); height:1px; background:var(--accent-border); overflow:hidden; }
.arp-stream-out { left:auto; right:-25px; }
.arp-stream span { position:absolute; width:22px; height:1px; background:var(--accent); transform:translateX(-24px); animation:arp-packet 5s linear infinite; }
.arp-stream span:nth-child(2) { animation-delay:.4s; }
.arp-stream span:nth-child(3) { animation-delay:.8s; }
.arp-stream-out span { animation-delay:1.2s; }
.arp-stream-out span:nth-child(2) { animation-delay:1.6s; }
.arp-stream-out span:nth-child(3) { animation-delay:2s; }
.arp-added dd { min-height:23px; }
.arp-enrichment[data-enriched="true"] .arp-added dd { color:var(--accent-soft); animation:arp-field-glow 5s ease-in-out infinite; }
.arp-enrichment[data-enriched="true"] .arp-added:last-child dd { animation-delay:.3s; }
.arp-enrichment[data-enriched="false"] .arp-added dd { color:var(--muted); }
.arp-toggle { margin-top:22px; width:100%; min-height:48px; }
.arp-result .arp-result-status { min-height:53px; margin-top:12px; font-size:14px; }
.arp-bottom { display:flex; justify-content:space-between; align-items:start; gap:32px; margin-top:26px; }
.arp-bottom p { max-width:760px; }
.arp-bottom .text-link { flex-shrink:0; font-size:15px; }
@keyframes arp-packet { 0%,12% { left:0; opacity:0; } 18% { opacity:1; } 65%,100% { left:calc(100% + 24px); opacity:0; } }
@keyframes arp-match-pulse { 0%,100% { box-shadow:0 0 0 0 var(--accent-dim); } 45% { box-shadow:0 0 0 14px transparent; border-color:var(--accent); } }
@keyframes arp-field-glow { 0%,100% { text-shadow:0 0 0 transparent; } 65% { text-shadow:0 0 16px var(--accent-border); } }
.motion-paused .arp-enrichment *, .page-hidden .arp-enrichment *, .arp-enrichment.animation-offscreen * { animation-play-state:paused!important; }
@media(max-width:1000px) {
  .arp-workflow { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .arp-match { grid-column:1/-1; grid-row:2; flex-direction:row; flex-wrap:wrap; gap:12px 18px; padding:20px; border:1px solid var(--accent-border); border-radius:16px; }
  .arp-match .eyebrow { width:100%; }
  .arp-match-symbol { width:48px; height:48px; margin:0; font-size:28px; }
  .arp-match h3 { margin:0; }
  .arp-match p { width:100%; max-width:620px; }
  .arp-stream { display:none; }
  .arp-result { grid-column:2; grid-row:1; }
  .arp-bottom { flex-direction:column; gap:18px; }
}
@media(max-width:640px) {
  .arp-workflow { grid-template-columns:minmax(0,1fr); gap:20px; margin-top:32px; }
  .arp-source,.arp-result { padding:24px; }
  .arp-result { grid-column:1; grid-row:3; }
  .arp-match { grid-row:2; }
  .arp-record dd { font-size:15px; }
}
@media(prefers-reduced-motion:reduce) { .arp-enrichment * { animation:none!important; } }