/* V3.1 — hero card: what we measure, instead of the animated tissue */
.hero-art.hero-card { aspect-ratio: auto; display: flex; flex-direction: column; padding: 3.4rem 1.6rem 1.4rem; background: linear-gradient(160deg, #FFFFFF 0%, #F3FAF9 60%, #FDF7EA 100%); }
.hero-card .hc-title { font-family: var(--serif); font-weight: 400; color: var(--petrol); font-size: clamp(1.5rem, 2.4vw, 1.95rem); line-height: 1.15; }
.hero-card .hc-title em { color: var(--turq-ink); }
.hero-card .hc-sub { color: var(--muted); font-size: .92rem; margin-top: .35rem; }
.hc-flow { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .55rem; position: relative; }
.hc-flow::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(var(--turq), var(--gold)); opacity: .5; }
.hc-flow li { display: grid; grid-template-columns: 44px 1fr; gap: .8rem; align-items: center; background: rgba(255,255,255,.9); border: 1px solid var(--line); border-radius: 16px; padding: .55rem .8rem .55rem .55rem; position: relative; }
.hc-ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #E6F4F2; margin-left: 4px; }
.hc-ico svg { width: 20px; height: 20px; }
.hc-flow li:last-child .hc-ico { background: #FCEFD3; }
.hc-flow strong { display: block; color: var(--petrol); font-size: .95rem; }
.hc-flow span { color: var(--muted); font-size: .82rem; line-height: 1.35; }
.hc-answers { display: flex; gap: .4rem; margin-top: .35rem; flex-wrap: wrap; }
.hc-answers b { font-size: .74rem; font-weight: 750; padding: .2rem .55rem; border-radius: 999px; }
.hc-answers .yes { background: var(--turq-ink); color: #fff; }
.hc-answers .no { background: #E4E9E8; color: var(--petrol); }
.hero-card .hc-foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: 1.1rem; }
.hero-card .hc-foot img { width: 54px; height: 54px; }
.hero-card .focus { position: static; box-shadow: 0 6px 20px rgba(6,58,75,.12); }
.hero-card .hc-note { font-size: .72rem; color: var(--muted); margin-top: .7rem; }
@media (prefers-reduced-motion: no-preference) {
  .hc-flow li { opacity: 0; transform: translateY(8px); animation: hcIn .6s ease forwards; }
  .hc-flow li:nth-child(2) { animation-delay: .25s; } .hc-flow li:nth-child(3) { animation-delay: .5s; } .hc-flow li:nth-child(4) { animation-delay: .75s; }
}
@keyframes hcIn { to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .hero-art.hero-card { padding-top: 3.2rem; } }