/* App feature visuals (phone + floating card/animation) — copied from the landing page's app section
   (start.rogalife.com/calm/f/top, #biomarkers). Rules are the landing's own; only image paths changed. */
:root{--ease-out:cubic-bezier(0.23, 1, 0.32, 1);--dur-xs:120ms;--dur-sm:200ms;--dur-md:300ms;--dur-lg:450ms;--af-reveal:600ms}
.af-solo{--bg:#FAF8F4;--bg-2:#F1ECE6;--text:#1A3B3C;--muted:#6E7A7B;--accent:#1A3B3C;--border-soft:rgba(26,59,60,.06);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  width:min(620px,140%);flex:0 0 auto}
:where(.af-solo) *,:where(.af-solo) ::before,:where(.af-solo) ::after{box-sizing:border-box}
:where(.af-solo) :where(h3){font-size:inherit;font-weight:inherit;margin:0;font-family:inherit;line-height:inherit;letter-spacing:normal}
:where(.af-solo) p{margin:0}
:where(.af-solo) button{font:inherit;color:inherit;margin:0;padding:0;background:transparent;border:0;cursor:pointer}
:where(.af-solo) img,:where(.af-solo) svg{display:block;vertical-align:middle}
:where(.af-solo) img{max-width:100%;height:auto}
.bio-col[data-astro-cid-gn6zd4dm]{background: var(--bg-2); border-radius: 22px; border: 1px solid var(--border-soft); padding: 32px;}
.bs-label[data-astro-cid-gn6zd4dm]{font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px;}
.bio-col-light{border-radius: 24px; padding: 36px 32px; border: 1px solid rgba(0, 0, 0, 0.06); display: flex; flex-direction: column;}
.bio-col-dark{border-radius: 24px; padding: 36px 32px; border: 1px solid rgba(0, 0, 0, 0.06); display: flex; flex-direction: column;}
.bio-col-light{background: rgb(249, 249, 249); color: rgb(26, 59, 60);}
.bio-col-dark{background: rgb(50, 57, 66); color: rgb(211, 221, 226); border-color: rgba(255, 255, 255, 0.06);}
.bio-col-light .bio-col-title-center{text-align: center; font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.01em; margin: 0px 0px 18px; color: rgb(47, 123, 133) !important;}
.bio-stats-3col{display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.bio-stats-3col-dark{border-bottom-color: rgba(255, 255, 255, 0.1);}
.bio-stat-cell{text-align: center;}
.bio-stat-cell .bs-label{font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.65; margin-bottom: 8px;}
.bio-stat-cell .bs-value{font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; letter-spacing: -0.02em; line-height: 1;}
.bio-stat-cell .bs-unit{font-size: 11px; font-weight: 600; letter-spacing: 0.08em; margin-left: 3px; text-transform: uppercase; opacity: 0.7;}
.bs-muted{color: rgb(110, 122, 123);}
.bs-accent{color: rgb(47, 123, 133);}
.bs-light-accent{color: rgb(127, 191, 203);}
.bio-chart-image{margin: 4px 0px 16px; border-radius: 14px; overflow: hidden; background: transparent;}
.bio-chart-image img{display: block; width: 100%; height: auto;}
.bio-caption{font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: rgb(110, 122, 123); margin: auto 0px 0px;}
.bio-caption-dark{color: rgb(140, 159, 165);}
.bio-stat-cell .bs-label{font-size: 13px; opacity: 1;}
.bio-col-light .bs-label{color: rgb(91, 106, 112) !important; -webkit-text-fill-color: rgb(91, 106, 112) !important;}
.bio-col-dark .bs-label{color: rgb(198, 211, 217) !important; -webkit-text-fill-color: rgb(198, 211, 217) !important;}
.bio-stat-cell .bs-unit{font-size: 13px; opacity: 1;}
.bio-stat-cell .bs-value{white-space: nowrap;}
.bio-col-light .bs-unit{color: rgb(110, 122, 123) !important; -webkit-text-fill-color: rgb(110, 122, 123) !important;}
.bio-col-dark .bs-unit{color: rgb(169, 188, 196) !important; -webkit-text-fill-color: rgb(169, 188, 196) !important;}
@media (max-width: 900px){.bio-col-light{padding: 28px 22px;}}
@media (max-width: 900px){.bio-col-dark{padding: 28px 22px;}}
@media (max-width: 900px){.bio-stats-3col{gap: 8px;}}
.bio-col-dark .bio-col-title-center{text-align: center; font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.01em; margin: 0px 0px 18px; color: rgb(127, 191, 203) !important;}
.bio-col.bio-col-light{background: rgb(249, 249, 249) !important; border-color: rgba(0, 0, 0, 0.06) !important;}
.bio-col.bio-col-dark{background: rgb(50, 57, 66) !important; border-color: rgba(255, 255, 255, 0.06) !important;}
.bio-col-light .bio-chart-image{background: rgb(249, 249, 249) !important;}
.bio-col-dark .bio-chart-image{background: rgb(50, 57, 66) !important;}
.bio-stats-3col{align-items: stretch;}
.bio-stats-3col .bio-stat-cell{display: grid; grid-template-rows: minmax(2.6em, auto) auto; row-gap: 4px; align-items: stretch;}
.bio-stats-3col .bio-stat-cell .bs-label{align-self: end; margin-bottom: 4px;}
.bio-stats-3col{grid-template-rows: auto auto; row-gap: 4px;}
.bio-stats-3col .bio-stat-cell{display: contents;}
.bio-stats-3col .bs-label{grid-row: 1; align-self: end; margin-bottom: 0px;}
.bio-stats-3col .bs-value{grid-row: 2;}
.bio-stats-3col .bio-stat-cell .bs-value{align-self: start;}
@media (hover: hover) and (min-width: 769px){.bio-col-light{position: relative; overflow: hidden; transition: transform var(--dur-md) var(--ease-out),
        box-shadow var(--dur-md) ease;}}
@media (hover: hover) and (min-width: 769px){.bio-col-dark{position: relative; overflow: hidden; transition: transform var(--dur-md) var(--ease-out),
        box-shadow var(--dur-md) ease;}}
@media (hover: hover) and (min-width: 769px){.bio-col-light::after{content: ""; position: absolute; top: -10%; left: -75%; width: 55%; height: 120%; pointer-events: none; z-index: 10; transform: skewX(-22deg); transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s; opacity: 0;}}
@media (hover: hover) and (min-width: 769px){.bio-col-dark::after{content: ""; position: absolute; top: -10%; left: -75%; width: 55%; height: 120%; pointer-events: none; z-index: 10; transform: skewX(-22deg); transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s; opacity: 0;}}
@media (hover: hover) and (min-width: 769px){.bio-col-light::after{background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);}}
@media (hover: hover) and (min-width: 769px){.bio-col-dark::after{background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(170, 220, 230, 0.25) 50%, rgba(255, 255, 255, 0) 100%);}}
@media (hover: hover) and (min-width: 769px){.bio-col-light:hover{transform: translateY(-6px); box-shadow: rgba(0, 0, 0, 0.18) 0px 28px 60px;}}
@media (hover: hover) and (min-width: 769px){.bio-col-dark:hover{transform: translateY(-6px); box-shadow: rgba(0, 0, 0, 0.18) 0px 28px 60px;}}
@media (hover: hover) and (min-width: 769px){.bio-col-light:hover::after{transform: skewX(-22deg) translateX(370%); opacity: 1;}}
@media (hover: hover) and (min-width: 769px){.bio-col-dark:hover::after{transform: skewX(-22deg) translateX(370%); opacity: 1;}}
.bio-col-light{box-shadow: rgba(26, 59, 60, 0.1) 0px 18px 40px, rgba(26, 59, 60, 0.06) 0px 2px 6px !important;}
.bio-col-dark{box-shadow: rgba(0, 0, 0, 0.22) 0px 18px 40px, rgba(0, 0, 0, 0.14) 0px 2px 6px !important;}
@media (hover: none), (pointer: coarse){.bio-col-light:hover{transform: none !important;}}
@media (hover: none), (pointer: coarse){.bio-col-dark:hover{transform: none !important;}}
@media (hover: none), (pointer: coarse){.bio-col-light:hover::after{opacity: 0 !important;}}
@media (hover: none), (pointer: coarse){.bio-col-dark:hover::after{opacity: 0 !important;}}
.af-visual{position: relative; aspect-ratio: 1 / 1; touch-action: pan-y; user-select: none;}
.af-visual .af-screen{position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: contain; opacity: 0; --afs-scale: 1; transform: scale(calc(0.97 * var(--afs-scale))); transition: opacity var(--dur-md) var(--ease-out),
                transform var(--dur-md) var(--ease-out); pointer-events: none;}
.af-visual .af-screen-sm{--afs-scale: 0.82;}
.af-visual .af-float{position: absolute; right: 7%; top: 8%; width: 52%; height: auto; z-index: 2; opacity: 0; pointer-events: none; border-radius: 28px; box-shadow: rgba(255, 255, 255, 0.34) 0px 0px 0px 1px inset; filter: drop-shadow(rgba(6, 10, 18, 0.48) 0px 10px 14px) drop-shadow(rgba(6, 10, 18, 0.34) 0px 26px 44px); transition: opacity var(--dur-md) var(--ease-out),
                filter var(--dur-sm) var(--ease-out),
                transform var(--dur-md) var(--ease-out);}
.af-visual .af-float.af-float-card{--af-card-w: 470px; --af-card-scale: 0.7; width: var(--af-card-w); height: auto; border-radius: 0px; box-shadow: none; transform: scale(var(--af-card-scale)); transform-origin: right bottom;}
.af-float-card .bio-col{width: 100%; margin: 0px !important;}
.af-float-card .bio-col.bio-col-dark{background: rgba(50, 57, 66, 0.88) !important;}
.af-float-card .bio-col-dark .bio-chart-image{background: rgba(50, 57, 66, 0.88) !important;}
@media (max-width: 1024px){.af-visual .af-float.af-float-card{--af-card-w: 360px; --af-card-scale: 0.52;}}
@media (max-width: 1024px){.af-float-card .bio-col{padding: 18px 12px !important;}}
@media (max-width: 1024px){.af-float-card .bio-stats-3col{gap: 6px; padding-bottom: 14px; margin-bottom: 14px;}}
@media (max-width: 1024px){.af-float-card .bio-chart-image{margin: 2px 0px 10px;}}
@media (max-width: 420px){.af-visual .af-float.af-float-card{--af-card-scale: 0.44;}}
@media (max-width: 420px){.af-float-card .bio-col{padding: 14px 9px !important;}}
@media (max-width: 420px){.af-float-card .bio-stats-3col{gap: 4px;}}
.af-visual .af-float.af-audio{pointer-events: auto;}
.af-visual .af-float.af-float-tall{width: var(--aft-w, 30%);}
.af-visual .af-float.af-float-padded{--aft-w: 67.4%; --aft-bleed: 18.7%; right: calc(7% - var(--aft-bleed)); border-radius: 0px; box-shadow: none;}
.af-visual .af-float.af-float-left{right: auto; left: calc(7% - var(--aft-bleed, 0%));}
.af-visual .af-audio{width: 62%; border-radius: 0px; box-shadow: none; filter: none;}
.af-audio .afa-card{background: rgba(20, 26, 34, 0.72); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 18px; padding: 14px 16px; box-shadow: rgba(6, 10, 18, 0.38) 0px 18px 40px;}
.af-audio .afa-row{display: flex; align-items: center; gap: 12px;}
.af-audio .afa-meta{display: flex; flex-direction: column; gap: 3px; min-width: 0px; flex: 1 1 auto; text-align: left;}
.af-audio .afa-title{font-family: Calibri, Carlito, "Segoe UI", sans-serif; font-weight: 600; font-size: clamp(14px, 1.1vw, 17px); color: rgb(255, 255, 255);}
.af-audio .afa-kind{font-family: Calibri, Carlito, "Segoe UI", sans-serif; font-size: clamp(11px, 0.85vw, 13px); letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.62);}
.af-audio .afa-play{flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: rgb(255, 255, 255); cursor: pointer; transition: background-color var(--dur-sm) var(--ease-out),
                transform var(--dur-xs) var(--ease-out);}
@media (hover: hover) and (pointer: fine){.af-audio .afa-play:hover{background: rgba(255, 255, 255, 0.2);}}
.af-audio .afa-play:active{transform: scale(0.94);}
.af-audio .afa-play:focus-visible{outline: rgba(255, 255, 255, 0.9) solid 2px; outline-offset: 3px;}
.af-audio .afa-ico-pause{display: none;}
.af-audio .afa-bar{position: relative; height: 4px; margin: 14px 0px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); overflow: hidden;}
.af-audio .afa-fill{display: block; height: 100%; width: 100%; border-radius: inherit; background: rgb(255, 255, 255); transform: scaleX(0); transform-origin: left center;}
.af-audio .afa-times{display: flex; justify-content: space-between; font-family: Calibri, Carlito, "Segoe UI", sans-serif; font-size: 11px; color: rgba(255, 255, 255, 0.62);}
.af-visual .af-float.af-float-br{top: auto; bottom: 8%;}
.af-visual .af-float.af-audio{bottom: 45%;}
@media (prefers-reduced-motion: reduce){.af-visual .af-screen{transition: none;}}
@media (prefers-reduced-motion: reduce){.af-visual .af-screen{transform: none;}}
.af-visual .af-screen.is-active{opacity: 1; transform: scale(var(--afs-scale));}
.af-visual .af-float.is-active{opacity: 1; pointer-events: auto;}
@media (hover: hover) and (pointer: fine){.af-visual .af-float.is-active.af-float-lift:hover{transform: translateY(-6px); filter: drop-shadow(rgba(6, 10, 18, 0.42) 0px 18px 22px) drop-shadow(rgba(6, 10, 18, 0.34) 0px 40px 62px);}}
@media (hover: hover) and (pointer: fine){.af-visual .af-float.is-active.af-float-lift.af-float-card:hover{transform: scale(var(--af-card-scale)) translateY(-9px);}}
@media (hover: hover) and (pointer: fine){.af-visual .af-float.is-active:not(.af-float-lift):hover{filter: brightness(1.12) drop-shadow(rgba(6, 10, 18, 0.5) 0px 12px 18px) drop-shadow(rgba(6, 10, 18, 0.36) 0px 30px 50px);}}
.af-visual .af-float.af-float-tall.is-active{opacity: 0.82;}
.af-audio.is-playing .afa-ico-play { display: none; }
.af-audio.is-playing .afa-ico-pause { display: block; }
@media (max-width:860px){.af-solo{width:100%;max-width:520px}}
/* Smaller data cards on the app page, so the photo behind them shows */
.af-solo .af-float.af-float-card{--af-card-scale:.52}
@media (max-width:1024px){.af-solo .af-float.af-float-card{--af-card-scale:.42}}
@media (max-width:420px){.af-solo .af-float.af-float-card{--af-card-scale:.36}}