/* Real app screens: keep the original capture proportions and allow inspection. */
.app-visual-hero { background:#113d36; min-height:680px; }
.app-visual-hero .hero-photo { opacity:.22; }
.app-visual-hero:after { background:linear-gradient(90deg,rgba(7,31,26,.7),rgba(7,31,26,.1))!important; }
.app-visual-hero .hero-content { position:relative; z-index:2; pointer-events:none; padding-top:100px; }
.app-visual-hero .hero-content a { pointer-events:auto; }
.app-visual-hero h1 { font-size:clamp(72px,7.6vw,112px); }
.app-visual-hero h2 { max-width:510px; font-size:clamp(32px,3.05vw,46px); }
.app-visual-hero .hero-description { max-width:410px; }
.hero-screens { position:absolute; top:58px; bottom:80px; right:max(56px,calc((100vw - 1240px)/2)); width:470px; display:flex; align-items:center; justify-content:center; gap:0; }
.app-screen { margin:0; min-width:0; }
.screenshot-link { display:block; position:relative; border:7px solid #152620; border-radius:28px; overflow:hidden; background:#152620; box-shadow:0 22px 42px -22px rgba(8,33,24,.5); transition:transform .25s,box-shadow .25s; }
.screenshot-link:hover { transform:translateY(-5px); box-shadow:0 26px 48px -18px rgba(8,33,24,.55); }
.app-screen .screenshot-link img { display:block; width:100%; height:auto; max-width:100%; border-radius:0; aspect-ratio:auto; }
.app-screen figcaption { font-size:12px; line-height:1.5; margin-top:18px; color:var(--muted); text-align:center; }
.screen-zoom { position:absolute; right:9px; bottom:27px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:#fff; color:#173e36; font-size:22px; box-shadow:0 2px 10px #0003; opacity:0; transition:opacity .2s; }
.screenshot-link:hover .screen-zoom,.screenshot-link:focus-visible .screen-zoom { opacity:1; }
.hero-screens .app-screen { width:235px; flex-shrink:0; position:relative; animation:screen-enter .85s .2s ease-out both; }
.hero-screens .hero-screen-back { transform:rotate(-9deg) translate(25px,5px); width:210px; }
.hero-screens .hero-screen-front { transform:rotate(5deg) translate(-8px,20px); z-index:1; }
.hero-screens figcaption { color:#e1eddf; font-size:11px; }
.hero-screens .screenshot-link { border-color:#091e19; box-shadow:0 24px 55px #0006; }
.app-tour { padding:90px 0 65px; background:#f5f5ed; }
.tour-heading { display:grid; grid-template-columns:1.2fr 1fr; gap:95px; align-items:end; margin-bottom:40px; }
.tour-heading>p { max-width:410px; }
.gallery-toolbar { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:30px; }
.gallery-filters { display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--line); }
.gallery-filters button { border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); padding:15px 17px; font:600 14px Arial,sans-serif; cursor:pointer; transition:color .2s,background .2s; }
.gallery-filters button[aria-pressed=true] { border-color:var(--ink); color:var(--ink); background:#e8eddd; }
.gallery-filters button:hover { color:var(--ink); background:#e8eddd; }
.gallery-hint { font-size:11px; white-space:nowrap; }
.gallery-hint span { margin-left:12px; }
.gallery-track { display:flex; gap:45px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:12px; padding:15px 12px 30px; scrollbar-width:thin; scrollbar-color:#9daa91 transparent; }
.gallery-track .app-screen { flex:0 0 calc((100% - 90px)/3); scroll-snap-align:start; padding:0 34px; }
.gallery-track .screenshot-link { border-width:6px; border-radius:23px; }
.gallery-track .app-screen figcaption { text-align:left; color:var(--ink); font-size:14px; font-weight:600; }
.screenshot-gallery [hidden] { display:none!important; }
.gallery-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:20px; }
.gallery-status { font-size:11px; color:var(--muted); }
.gallery-controls { display:flex; gap:9px; }
.gallery-controls button { width:42px; height:42px; border:1px solid #a9b4a2; border-radius:50%; background:transparent; color:var(--ink); font-size:20px; cursor:pointer; transition:background .2s; }
.gallery-controls button:hover:not(:disabled) { background:#dce8c2; }
.gallery-controls button:disabled { opacity:.3; cursor:default; }
.screenshot-gallery button:focus-visible,.gallery-track:focus-visible,.screenshot-close:focus-visible { outline:3px solid #1683a0; outline-offset:4px; }
.visual-feature { display:grid; grid-template-columns:1fr 1.1fr; align-items:center; gap:100px; }
.visual-feature>div>p:not(.eyebrow) { margin-top:26px; max-width:415px; }
.visual-feature .plain-list { max-width:415px; }
.screen-pair { display:flex; align-items:center; gap:22px; padding:10px 3px; }
.screen-pair .app-screen { flex:1; }
.screen-pair .app-screen:nth-child(2) { margin-top:70px; }
.screen-pair .screenshot-link { border-width:5px; border-radius:23px; }
.clinic-screens { background:#edf0e4; padding:32px 25px; border-radius:120px 120px 12px 12px; }
.community-screens { padding:0; }
.community .community-screens figure { max-width:none; margin:0; }
.community .community-screens figure:nth-child(2) { margin-top:75px; }
.community .community-screens img { aspect-ratio:auto; border-radius:0; }
.inline-screen { width:180px; margin-top:35px; }
.inline-screen .screenshot-link { border-width:5px; border-radius:20px; }
.inline-screen figcaption { font-size:11px; text-align:left; }
.screenshot-dialog { max-width:96vw; max-height:96svh; padding:50px 20px 18px; border:0; background:transparent; color:white; overflow:auto; }
.screenshot-dialog::backdrop { background:rgba(3,19,15,.93); backdrop-filter:blur(8px); }
.screenshot-dialog figure { margin:0; }
.screenshot-dialog .screenshot-full { width:auto; height:auto; max-height:calc(100svh - 150px); max-width:calc(100vw - 65px); margin:auto; border:6px solid #0a1712; border-radius:20px; }
.screenshot-dialog figcaption { text-align:center; margin-top:14px; font:14px/1.5 Arial,sans-serif; }
.screenshot-close { position:absolute; top:6px; right:20px; border:1px solid #73897e; padding:7px 13px; border-radius:20px; color:#fff; background:#183d30; font:13px Arial,sans-serif; cursor:pointer; }
.screenshot-close span { margin-left:15px; font-size:20px; vertical-align:middle; }
body.screenshot-open { overflow:hidden; }
@keyframes screen-enter { from { opacity:0; translate:0 25px; } to { opacity:1; translate:0 0; } }
@media(min-width:1000px) and (max-height:800px) {
    .app-visual-hero { min-height:620px; }
    .app-visual-hero .hero-content { padding-top:70px; }
    .hero-screens { top:40px; bottom:60px; }
    .hero-screens .hero-screen-front { width:215px; }
    .hero-screens .hero-screen-back { width:190px; }
}
@media(max-width:1100px) and (min-width:701px) {
    .app-visual-hero { min-height:650px; }
    .app-visual-hero .hero-content { padding-top:85px; }
    .app-visual-hero h1 { font-size:80px; }
    .app-visual-hero h2 { font-size:34px; max-width:420px; }
    .app-visual-hero .hero-description { max-width:350px; }
    .hero-screens { right:20px; width:340px; }
    .hero-screens .hero-screen-front { width:185px; }
    .hero-screens .hero-screen-back { width:155px; }
    .visual-feature { gap:45px; }
    .gallery-track { gap:16px; }
    .gallery-track .app-screen { flex-basis:calc((100% - 32px)/3); padding:0 12px; }
    .tour-heading { gap:50px; }
    .gallery-filters button { padding:14px 10px; font-size:12px; }
    .screen-pair { gap:14px; }
}
@media(max-width:850px) and (min-width:701px) {
    .hero-screens { width:260px; right:5px; }
    .hero-screens .hero-screen-front { width:165px; }
    .hero-screens .hero-screen-back { width:135px; }
    .app-visual-hero h1 { font-size:70px; }
    .app-visual-hero h2 { font-size:30px; max-width:360px; }
    .app-visual-hero .hero-description { max-width:315px; }
    .gallery-hint { display:none; }
}
@media(max-width:700px) {
    .app-visual-hero { height:auto; min-height:0; max-height:none; padding-bottom:50px; }
    .app-visual-hero .hero-content { padding:38px 0 0; }
    .app-visual-hero h1 { font-size:68px; margin-bottom:20px; }
    .app-visual-hero h2 { font-size:30px; max-width:none; }
    .app-visual-hero .hero-description { font-size:15px; max-width:350px; margin-top:20px; }
    .app-visual-hero .hero-content .button { margin-top:23px; }
    .hero-screens { position:relative; top:auto; right:auto; bottom:auto; width:100%; height:auto; margin:26px auto 25px; padding:15px 25px; }
    .hero-screens .hero-screen-front { width:44%; max-width:190px; }
    .hero-screens .hero-screen-back { width:38%; max-width:165px; transform:rotate(-8deg) translate(10px,0); }
    .hero-screens .hero-screen-front { transform:rotate(5deg) translate(-7px,10px); }
    .hero-screens figcaption { font-size:9px; margin-top:12px; }
    .hero-screens .screenshot-link { border-width:5px; border-radius:20px; }
    .app-visual-hero .hero-bottom { bottom:18px; }
    .app-tour { padding:55px 0 35px; }
    .tour-heading { grid-template-columns:1fr; gap:22px; margin-bottom:25px; }
    .tour-heading>p { font-size:15px; }
    .gallery-toolbar { display:block; margin-bottom:15px; }
    .gallery-filters { flex-wrap:nowrap; gap:0; }
    .gallery-filters button { padding:12px 8px; flex:1; font-size:11px; line-height:1.5; }
    .gallery-hint { margin-top:15px; font-size:10px; }
    .gallery-track { gap:23px; padding:12px 4px 20px; }
    .gallery-track .app-screen { flex-basis:72%; padding:0 12px; }
    .gallery-track .app-screen figcaption { font-size:13px; }
    .gallery-footer { padding-top:12px; }
    .gallery-status { font-size:10px; }
    .visual-feature { grid-template-columns:1fr; gap:25px; }
    .screen-pair { gap:14px; }
    .screen-pair .app-screen:nth-child(2) { margin-top:45px; }
    .screen-pair .screenshot-link { border-width:4px; border-radius:17px; }
    .app-screen figcaption { font-size:10px; margin-top:12px; }
    .clinic-screens { padding:25px 15px; border-radius:70px 70px 10px 10px; }
    .inline-screen { width:170px; }
    .screen-zoom { opacity:1; width:24px; height:24px; font-size:19px; bottom:20px; right:5px; }
    .screenshot-dialog { padding-inline:5px; }
    .screenshot-dialog .screenshot-full { max-width:calc(100vw - 35px); }
}
@media(prefers-reduced-motion:reduce) {
    .hero-screens .app-screen { animation:none; }
    .screenshot-link,.screen-zoom,.gallery-filters button,.gallery-controls button { transition:none; }
}
/* Match the home header while keeping audience navigation clear. */
.site-header {
    background:#081b2b;
    color:#edf5f5;
    border-bottom-color:#24404c;
}
.site-header nav a { color:#c7d7df; transition:color .2s; }
.site-header nav a:hover,
.site-header nav a[aria-current=page] { color:#a8e7d6; }
.site-header nav a[aria-current=page]:after { background:#79d8bd; }
.site-header .header-access { color:#edf5f5; }
.site-header .header-access:hover { color:#a8e7d6; }
.site-header a:focus-visible { outline-color:#a8e7d6; }