/* Real app screenshots: preserve the entire image and keep captions in normal flow. */
.hf-gallery{max-width:960px;margin:36px auto 44px;scroll-margin-top:90px;padding:clamp(18px,3vw,30px);background:#eaf2f5;border:1px solid #bfd0d9;border-radius:12px;color:#102b46}
.hf-gallery-kicker{font:800 11px/1.8 var(--sans,system-ui);letter-spacing:.14em;text-transform:uppercase;color:#6b5121}
.hf-gallery-heading h2{font:700 clamp(30px,4vw,44px)/1.15 var(--serif,Georgia);margin:12px 0}
.hf-gallery-heading p{font:400 17px/1.75 var(--sans,system-ui);margin:0 0 14px}
.hf-capture-note{font:400 13px/1.8 var(--sans,system-ui);margin:0 0 28px;max-width:800px;color:#405969}
.hf-screen-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 26px;margin:24px 0 30px;align-items:start}
.hf-screen{margin:0;min-width:0;background:#fbf8f1;padding:18px;border:1px solid #c4d1d8;border-radius:12px}
.hf-screen-link{display:block;text-decoration:none;color:inherit}
.hf-phone-frame{display:block;width:min(100%,310px);margin:0 auto;padding:6px;border-radius:20px;border:1px solid #526b7b;background:#102b46;box-shadow:0 8px 20px #102b4617}
.hf-phone-frame img{display:block;position:static;width:100%;max-width:100%;height:auto;border-radius:13px}
.hf-enlarge{display:block;margin:13px 0 0;font:700 13px/1.7 var(--sans,system-ui);text-align:center;text-decoration:underline;text-underline-offset:3px}
.hf-screen figcaption{position:static;margin-top:20px}
.hf-screen figcaption h3{font:700 24px/1.25 var(--serif,Georgia);margin:0 0 10px;color:#102b46}
.hf-screen figcaption p{font:400 15px/1.75 var(--sans,system-ui);margin:0;color:#405160}
.heard-card-visual.hf-has-screen{padding:18px;text-align:center}
.heard-card-visual.hf-has-screen .hf-phone-frame{width:min(100%,185px);margin:17px auto}
.heard-card-visual.hf-has-screen .hf-phone-frame img{border-radius:13px}
.heard-card-visual.hf-has-screen .hf-card-caption{color:#f5e1b1;font:700 12px/1.6 var(--sans,system-ui);letter-spacing:0;text-transform:none}
.hf-screen-link:focus-visible{outline:3px solid #94621d;outline-offset:4px}
@media(max-width:660px){.hf-screen-grid{grid-template-columns:minmax(0,1fr);gap:24px}.hf-gallery{padding:16px}.hf-screen{padding:14px}.hf-gallery>.hf-button{display:flex;text-align:center}.hf-screen figcaption h3{font-size:23px}}
