/* A2 "Compact link strip": slim pill row instead of big cards */
.hy-strip-sec { padding: 8px 0 56px !important; }
.hy-strip { display: grid; gap: 10px; gap: 12px 18px; padding: 16px 20px; border-radius: 18px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035); }
.hy-strip-l { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); white-space: nowrap; }
.hy-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.hy-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 7px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); font-size: .8rem; font-weight: 600; line-height: 1.2; color: rgba(255,255,255,.82); white-space: nowrap; transition: background .25s, border-color .25s, color .25s; }
.hy-pill b { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: rgba(242,165,72,.12); border: 1px solid rgba(242,165,72,.4); color: var(--orange-bright); font: 800 .6rem var(--font-title); }
.hy-pill:hover { color: #fff; border-color: rgba(242,165,72,.6); background: rgba(242,165,72,.12); }
.hy-strip-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hy-pill-demo { padding: 7px 15px; background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 700; }
.hy-pill-demo:hover { background: var(--orange-bright); border-color: var(--orange-bright); color: var(--navy); }
@media (max-width: 640px) { .hy-strip { padding: 14px; } .hy-strip-l { width: 100%; } .hy-pill { font-size: .76rem; } .hy-pill-demo { margin-left: 0; } }