/* ETHOS Assay - "How Assay reads a document" animated explainer (home A2 segment).
   Pure CSS, ~9s loop. Static final frame under prefers-reduced-motion. */
.asd { position:relative; border-radius:1.5rem; background:#0A1F44; border:1px solid #1e3a6e; box-shadow:0 25px 50px -12px rgba(10,31,68,.45);
       padding:1.5rem 1.5rem 1.25rem; max-width:32rem; margin:0 auto; overflow:hidden; color:#e2e8f0; font-size:.9rem; }
.asd::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 15% 0%, rgba(212,175,55,.12), transparent 55%); pointer-events:none; }
.asd-head { position:relative; display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.asd-badge { display:inline-flex; align-items:center; gap:.5rem; font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#E5C158; }
.asd-badge b { width:.5rem; height:.5rem; border-radius:50%; background:#D4AF37; box-shadow:0 0 0 0 rgba(212,175,55,.6); animation:asd-ping 2s infinite; }
.asd-src { font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color:#cbd5e1; display:flex; align-items:center; gap:.4rem; }
.asd-doc { position:relative; background:#fff; color:#334155; border-radius:.9rem; padding:1rem 1.1rem; line-height:1.75; font-size:.88rem; overflow:hidden; }
.asd-doc .c { position:relative; border-radius:3px; padding:0 .1rem; background-image:linear-gradient(transparent 62%, var(--hl) 62%);
              background-size:0% 100%; background-repeat:no-repeat; animation:asd-hl 9s infinite; }
.asd-doc .c1 { --hl:rgba(16,185,129,.45); animation-delay:0s; }
.asd-doc .c2 { --hl:rgba(245,158,11,.5); animation-name:asd-hl2; }
.asd-doc .c3 { --hl:rgba(244,63,94,.38); animation-name:asd-hl3; }
.asd-doc .v  { font-style:italic; color:#475569; border-bottom:1px dashed transparent; animation:asd-voice 9s infinite; }
.asd-scan { position:absolute; left:0; right:0; top:0; height:2.2rem; background:linear-gradient(180deg,transparent,rgba(212,175,55,.22),transparent);
            animation:asd-scan 9s infinite; pointer-events:none; }
.asd-chips { position:relative; display:grid; gap:.45rem; margin-top:1rem; }
.asd-chip { display:flex; align-items:center; gap:.6rem; padding:.5rem .7rem; border-radius:.6rem; background:rgba(255,255,255,.06);
            border:1px solid rgba(255,255,255,.1); font-size:.8rem; opacity:.38; animation:asd-chip 9s infinite; }
.asd-chip i { width:1.4rem; text-align:center; }
.asd-chip .k { font-weight:700; color:#fff; min-width:7.6rem; }
.asd-chip .d { color:#cbd5e1; }
.asd-chip.s i { color:#34d399; } .asd-chip.n i { color:#fbbf24; } .asd-chip.r i { color:#fb7185; } .asd-chip.a i { color:#E5C158; }
.asd-chip:nth-child(1){animation-name:asd-chip1} .asd-chip:nth-child(2){animation-name:asd-chip2}
.asd-chip:nth-child(3){animation-name:asd-chip3} .asd-chip:nth-child(4){animation-name:asd-chip4}
.asd-seal { position:relative; margin:1rem 0 .35rem; display:flex; align-items:center; justify-content:center; gap:.5rem; font-size:.72rem; letter-spacing:.12em;
            text-transform:uppercase; color:#E5C158; opacity:.3; animation:asd-seal 9s infinite; }
@keyframes asd-ping { 0%{box-shadow:0 0 0 0 rgba(212,175,55,.6)} 80%,100%{box-shadow:0 0 0 8px rgba(212,175,55,0)} }
@keyframes asd-scan { 0%{transform:translateY(-2.5rem);opacity:0} 5%{opacity:1} 45%{transform:translateY(9rem);opacity:1} 52%,100%{transform:translateY(9rem);opacity:0} }
@keyframes asd-hl  { 0%,8%{background-size:0% 100%} 16%,90%{background-size:100% 100%} 100%{background-size:0% 100%} }
@keyframes asd-hl2 { 0%,20%{background-size:0% 100%} 28%,90%{background-size:100% 100%} 100%{background-size:0% 100%} }
@keyframes asd-hl3 { 0%,32%{background-size:0% 100%} 40%,90%{background-size:100% 100%} 100%{background-size:0% 100%} }
@keyframes asd-voice { 0%,44%{border-bottom-color:transparent} 50%,90%{border-bottom-color:#D4AF37} 100%{border-bottom-color:transparent} }
@keyframes asd-chip1 { 0%,14%{opacity:.38;filter:grayscale(1)} 19%,90%{opacity:1;filter:none} 100%{opacity:.38;filter:grayscale(1)} }
@keyframes asd-chip2 { 0%,26%{opacity:.38;filter:grayscale(1)} 31%,90%{opacity:1;filter:none} 100%{opacity:.38;filter:grayscale(1)} }
@keyframes asd-chip3 { 0%,38%{opacity:.38;filter:grayscale(1)} 43%,90%{opacity:1;filter:none} 100%{opacity:.38;filter:grayscale(1)} }
@keyframes asd-chip4 { 0%,50%{opacity:.38;filter:grayscale(1)} 55%,90%{opacity:1;filter:none} 100%{opacity:.38;filter:grayscale(1)} }
@keyframes asd-seal  { 0%,62%{opacity:.3} 68%,90%{opacity:1} 100%{opacity:.3} }
@media (prefers-reduced-motion: reduce){
  .asd *, .asd *::before { animation:none !important; }
  .asd-doc .c { background-size:100% 100%; } .asd-doc .v { border-bottom-color:#D4AF37; }
  .asd-chip, .asd-seal { opacity:1; transform:none; filter:none; } .asd-scan { display:none; }
}
/* product pair cards */
.a2-pair { display:grid; gap:1rem; grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:2rem; }
@media (max-width:640px){ .a2-pair{ grid-template-columns:1fr; } }
.a2-card { display:flex; flex-direction:column; border:1px solid #e5e7eb; border-radius:1rem; padding:1.1rem 1.15rem; background:#fff; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.a2-card:hover { transform:translateY(-3px); box-shadow:0 14px 28px -16px rgba(10,31,68,.35); border-color:#a7f3d0; }
.a2-card .ic { width:2.3rem; height:2.3rem; border-radius:.65rem; display:grid; place-items:center; margin-bottom:.7rem; }
.a2-card h3 { font-weight:800; color:#0A1F44; margin:0 0 .3rem; font-size:1.02rem; line-height:1.3; }
.a2-card .tag { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.45rem; }
.a2-card p { font-size:.86rem; color:#4b5563; line-height:1.5; margin:0 0 .6rem; }
.a2-card .go { font-size:.82rem; font-weight:700; margin-top:auto; }

/* animation only runs once scrolled into view */
.asd:not(.in-view) *, .asd:not(.in-view) { animation-play-state:paused !important; }
@media (min-width:641px){ .a2-pair .a2-card h3 { height:2.6em; overflow:visible; } }
@media (min-width:1024px){ .a2-sticky { position:sticky; top:7rem; } }