/* Mobile App Development hero (assets/js/app-flow.js): a phone pairs with a device and shows its live data. */
.af { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 700ms ease; }
.af.af-in { opacity: 1; }
.af.af-off { display: none; }
.af-phone { position: absolute; width: 290px; height: 600px; transform-origin: 0 0; }
.af .ac-screen { font-size: 12px; }

/* The device beside the phone */
.af-dev { position: absolute; display: flex; align-items: center; gap: 10px; width: 186px; padding: 11px 12px; border-radius: 16px; background: rgba(8, 16, 30, 0.62); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 20px 40px -18px rgba(0, 0, 0, 0.7); color: #fff; transition: box-shadow 400ms ease; }
.af-nodev .af-dev, .af-nodev .af-link { display: none; }
.af-dev-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, #ff8a43, #ff5e62); }
.af-dev-ic .ai { width: 20px; height: 20px; color: #fff; }
.af-dev b { display: block; font-size: 13px; }
.af-dev small { display: block; color: #9fb3c8; font-size: 11px; white-space: nowrap; }
.af-dev-led { position: absolute; top: 10px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: #ffc46b; box-shadow: 0 0 8px #ffc46b; animation: af-blink 1.2s steps(1) infinite; }
.st-3 .af-dev-led { background: #20c997; box-shadow: 0 0 8px #20c997; animation: none; }
.st-3 .af-dev { box-shadow: inset 0 0 0 1px rgba(32, 201, 151, 0.5), 0 20px 40px -18px rgba(0, 0, 0, 0.7); }
@keyframes af-blink { 50% { opacity: 0.2; } }

/* Bluetooth link */
.af-link { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.af-path { fill: none; stroke: rgba(90, 200, 255, 0.5); stroke-width: 1.5; stroke-dasharray: 3 6; animation: af-dash 1.2s linear infinite; opacity: 0; transition: opacity 500ms ease; }
.st-1 .af-path, .st-2 .af-path, .st-3 .af-path { opacity: 1; }
.st-3 .af-path { stroke: rgba(32, 201, 151, 0.65); }
@keyframes af-dash { to { stroke-dashoffset: -18; } }
.af-pkt { fill: #e6f8ff; filter: drop-shadow(0 0 6px rgba(0, 194, 255, 0.95)); opacity: 0; transition: opacity 400ms ease; }
.af-pkt.b { fill: #7dffcf; filter: drop-shadow(0 0 6px rgba(0, 224, 164, 0.9)); }
.st-2 .af-pkt, .st-3 .af-pkt { opacity: 1; }

/* Panels inside the phone */
.af-panels { position: relative; flex: 1; }
.af-p { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(10px); transition: opacity 450ms ease, transform 600ms cubic-bezier(0.23, 1, 0.32, 1); }
.st-0 .af-p0, .st-1 .af-p1, .st-2 .af-p2, .st-3 .af-p3 { opacity: 1; transform: none; }
.af .s-radar { margin-top: 18px; }
.af-k { margin: 6px 0 0; color: #8ea3bb; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; }
.af-pair { animation: af-tap 2.2s ease-in-out infinite; }
@keyframes af-tap { 0%, 55%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); } 70% { transform: scale(0.92); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } }
.af-spin { position: relative; display: grid; place-items: center; width: 150px; height: 150px; margin: 18px auto 0; }
.af-spin span { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #0a84ff, #00c2ff 40%, transparent 60%); -webkit-mask: radial-gradient(circle, transparent 62px, #000 63px); mask: radial-gradient(circle, transparent 62px, #000 63px); animation: as-spin 1.1s linear infinite; }
.af-spin .ai { width: 42px; height: 42px; color: #5ac8ff; }
.af-big { margin: 0; text-align: center; color: #fff; font-size: 15px; font-weight: 700; }
.af-steps { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.canvas .af-steps li { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: #c9d6e4; font-size: 12px; font-weight: 600; line-height: 1.3; opacity: 0; transform: translateX(-8px); transition: opacity 400ms ease, transform 500ms cubic-bezier(0.23, 1, 0.32, 1); }
.canvas .af-steps li::before { content: none; }
.af-steps .ai { width: 15px; height: 15px; color: #20c997; }
.st-2 .af-steps li { opacity: 1; transform: none; transition-delay: 300ms; }
.st-2 .af-steps li.d2 { transition-delay: 900ms; }
.st-2 .af-steps li.d3 { transition-delay: 1500ms; }
.af-live { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px; border-radius: 20px; background: linear-gradient(145deg, rgba(255, 138, 67, 0.28), rgba(255, 94, 98, 0.12)); box-shadow: inset 0 0 0 1px rgba(255, 138, 67, 0.35); }
.af-live small { color: #d9c3b8; font-size: 11px; }
.af-temp { font-size: 46px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.af-temp em { font-size: 18px; font-style: normal; color: #ffc9a8; }
.af-ok { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 4px 9px; border-radius: 999px; background: rgba(32, 201, 151, 0.18); color: #6ff0c0; font-size: 11px; font-weight: 600; }
.af-ok .ai { width: 12px; height: 12px; stroke-width: 3; }
.af-spark { width: 100%; height: 66px; }
.af-line { fill: none; stroke: #ff8a43; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(255, 138, 67, 0.6)); }
.af-area { fill: rgba(255, 138, 67, 0.14); }
.af .as-tiles .ai { width: 14px; height: 14px; color: #5ac8ff; }
@media (prefers-reduced-motion: reduce) { .af-p, .af-steps li { transition: none; } .af-pair, .af-spin span, .af-path { animation: none; } }

/* Medical Devices hero (assets/js/med-flow.js): the same phone and link, running a clinician programmer. */
.mf .ac-screen { --a1: #14b8a6; --a2: #22d3ee; }
.mf-dev-ic, .mf-av { background: linear-gradient(135deg, #14b8a6, #22d3ee) !important; }
.mf .af-path, .mf .af-pkt { opacity: 1; }
.mf .af-path { stroke: rgba(45, 212, 191, 0.55); }
.mf .af-pkt { fill: #e6fffb; filter: drop-shadow(0 0 6px rgba(45, 212, 191, 0.95)); }
.mf .st-0 .af-dev-led, .mf.st-0 .af-dev-led { background: #ffc46b; }
.mf.st-1 .af-dev-led, .mf.st-3 .af-dev-led { background: #20c997; box-shadow: 0 0 8px #20c997; animation: none; }
.mf.st-1 .af-dev, .mf.st-3 .af-dev { box-shadow: inset 0 0 0 1px rgba(32, 201, 151, 0.5), 0 20px 40px -18px rgba(0, 0, 0, 0.7); }
.mf.st-2 .af-dev-led { background: #5ac8ff; box-shadow: 0 0 8px #5ac8ff; }
.mf-shield { position: relative; display: grid; place-items: center; width: 150px; height: 150px; margin: 18px auto 0; }
.mf-shield span { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #14b8a6, #22d3ee 40%, transparent 60%); -webkit-mask: radial-gradient(circle, transparent 62px, #000 63px); mask: radial-gradient(circle, transparent 62px, #000 63px); animation: as-spin 1.4s linear infinite; }
.mf-shield .ai { width: 46px; height: 46px; color: #5eead4; }
.mf .af-steps .ai { color: #2dd4bf; }
.mf.st-0 .mf-s0 li, .mf.st-2 .mf-s2 li { opacity: 1; transform: none; transition-delay: 300ms; }
.mf.st-0 .mf-s0 li.d2 { transition-delay: 900ms; }
.mf.st-0 .mf-s0 li.d3 { transition-delay: 1500ms; }
.mf.st-2 .mf-s2 li.d2 { transition-delay: 800ms; }
.mf.st-2 .mf-s2 li.d3 { transition-delay: 3400ms; }
.mf-card { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; padding: 16px; border-radius: 20px; background: linear-gradient(145deg, rgba(20, 184, 166, 0.2), rgba(34, 211, 238, 0.06)); box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.3); }
.mf-row { display: flex; align-items: center; justify-content: space-between; }
.mf-row b { display: block; color: #fff; font-size: 15px; }
.mf-row small, .mf-amp small { color: #9fb3c8; font-size: 11px; }
.mf-on .mf-state { color: #5eead4; font-weight: 600; }
.mf-switch { position: relative; width: 46px; height: 28px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); transition: background 300ms ease; }
.mf-switch i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); transition: transform 350ms cubic-bezier(0.23, 1, 0.32, 1); }
.mf-on .mf-switch { background: #14b8a6; }
.mf-on .mf-switch i { transform: translateX(18px); }
.mf-amp { display: flex; flex-direction: column; gap: 4px; }
.mf-ma { color: #fff; font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.mf-ma em { font-size: 14px; font-style: normal; color: #99f6e4; }
.mf-bar { position: relative; display: block; height: 6px; margin-top: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.mf-bar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #14b8a6, #22d3ee); transform-origin: 0 50%; transform: scaleX(0); }
.mf-send { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 6px 10px; border-radius: 999px; background: rgba(32, 201, 151, 0.16); color: #6ff0c0; font-size: 11px; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity 400ms ease, transform 500ms cubic-bezier(0.23, 1, 0.32, 1); }
.mf-send .ai { width: 12px; height: 12px; stroke-width: 3; }
.mf-sent .mf-send { opacity: 1; transform: none; }
.mf-ring { position: relative; display: grid; place-items: center; width: 150px; height: 150px; margin: 18px auto 0; }
.mf-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.mf-track { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 8; }
.mf-prog { fill: none; stroke: #2dd4bf; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; filter: drop-shadow(0 0 6px rgba(45, 212, 191, 0.6)); }
.mf-pct { color: #fff; font-size: 34px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mf-pct em { font-size: 15px; font-style: normal; color: #99f6e4; }
.mf-live { background: linear-gradient(145deg, rgba(20, 184, 166, 0.28), rgba(34, 211, 238, 0.1)) !important; box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.4) !important; }
.mf-live small { color: #b5e8e0 !important; }
.mf-live .af-temp em { color: #99f6e4; font-size: 18px; }
.mf .af-line { stroke: #2dd4bf; filter: drop-shadow(0 0 4px rgba(45, 212, 191, 0.6)); }
.mf .as-tiles .ai { color: #5eead4; }