/*
 * health-migrate.css
 * HELM Coders Website
 *
 * Created by HELM Coders LLC on 2026-10-24 (America/Chicago).
 * Purpose: Page stylesheet for the redesigned Health Migrate product page (/apps/health-migrate/):
 *          navy/teal 1.2 identity, hero with real app devices, migration flow, demo video, metrics
 *          matrix, five-step workflow, export guide, protection, privacy, pricing, FAQ.
 *          Loaded after /assets/site.css. Assets are built by the HealthMigrate repo
 *          (Marketing/1.2/Website/Source/build-web-assets.sh).
 */
.hm{--hm-bg:#050f26;--hm-bg2:#0a2342;--hm-deep:#0b3b4e;--hm-panel:#0c1a33;--hm-panel2:#10223f;--hm-line:rgba(148,197,230,.16);
  --hm-teal:#5eead4;--hm-teal2:#14b8a6;--hm-cyan:#22d3ee;--hm-blue:#3b82f6;--hm-rose:#f43f5e;--hm-text:#f4f8ff;--hm-muted:#b4c3da;
  background:var(--hm-bg);color:var(--hm-text);overflow-x:hidden}
.hm img{max-width:100%}
.hm .wrap{max-width:1200px}
.hm p{color:var(--hm-muted)}
.hm h1,.hm h2,.hm h3{color:var(--hm-text)}
.hm h2{font-size:clamp(1.85rem,3.4vw,3rem);line-height:1.1;letter-spacing:-.025em;margin:.3em 0 .45em}
.hm h3{line-height:1.25}
.hm main a:not(.badge-button):not(.hm-btn){color:var(--hm-teal)}
.hm .badge-button{color:#fff}
.hm a:focus-visible,.hm .badge-button:focus-visible,.hm summary:focus-visible,.hm .hm-btn:focus-visible{outline:2px solid var(--hm-teal);outline-offset:3px;border-radius:6px}
.hm-skip{position:absolute;left:-999px;top:8px;z-index:50;background:#000;color:#fff;padding:8px 12px;border-radius:6px}
.hm-skip:focus{left:8px}
.hm-kicker{color:var(--hm-teal);text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;font-weight:800}
.hm-intro{max-width:760px}
.hm-intro p{font-size:1.08rem}
.hm-center{text-align:center;margin-left:auto;margin-right:auto}

/* Hero */
.hm-hero{position:relative;isolation:isolate;padding:70px 0 40px;
  background:radial-gradient(ellipse 60% 70% at 8% 0%,rgba(20,184,166,.30),transparent 62%),
             radial-gradient(ellipse 50% 60% at 95% 100%,rgba(244,63,94,.16),transparent 60%),
             radial-gradient(ellipse 55% 60% at 60% 45%,rgba(59,130,246,.16),transparent 60%),
             linear-gradient(160deg,var(--hm-bg) 0%,var(--hm-bg2) 55%,var(--hm-deep) 100%)}
.hm-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:40px;align-items:center}
.hm-brand{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.hm-brand img{width:64px;height:64px;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.hm-brand span{display:block;color:var(--hm-teal);font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:.82rem}
.hm-brand small{display:block;color:var(--hm-muted);font-size:.86rem;letter-spacing:0;text-transform:none;font-weight:500}
.hm h1{font-size:clamp(2.5rem,5.6vw,4.6rem);line-height:1;letter-spacing:-.04em;margin:0 0 18px}
.hm h1 em{font-style:normal;background:linear-gradient(90deg,#5eead4,#22d3ee 55%,#93c5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.hm-lead{font-size:clamp(1.05rem,1.5vw,1.22rem);max-width:600px}
.hm .hm-lead{color:#d6e2f3}
.hm-status{display:inline-flex;align-items:center;gap:10px;margin:6px 0 0;padding:7px 14px;border-radius:999px;font-size:.84rem;font-weight:700;border:1px solid rgba(94,234,212,.4);background:rgba(94,234,212,.08);color:#b9f5ea}
.hm-status:before{content:"";width:8px;height:8px;border-radius:50%;background:#fbbf24;box-shadow:0 0 10px #fbbf24;flex:none}
.hm-status[data-release="live"]:before{background:#41d78c;box-shadow:0 0 10px #41d78c}
.hm-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:26px 0 22px}
.hm .badge-button{background:#000;border-color:#8a8a8a}
.hm-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(94,234,212,.55);border-radius:10px;padding:12px 20px;text-decoration:none;font-weight:700;background:rgba(20,184,166,.14);color:#fff}
.hm a.hm-btn{color:#fff}
.hm-btn:hover{background:rgba(20,184,166,.28)}
.hm-btn svg{width:16px;height:16px}
.hm-pills{display:flex;gap:10px;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.hm-pills li{border:1px solid rgba(94,234,212,.38);background:rgba(255,255,255,.06);padding:7px 14px;border-radius:999px;font-size:.88rem;font-weight:600;color:#e6f6f3}
.hm-hero-art{margin:0;position:relative}
.hm-hero-art img{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}
.hm-hero-art:before{content:"";position:absolute;inset:12% 8%;background:radial-gradient(circle,rgba(34,211,238,.25),transparent 65%);z-index:-1;filter:blur(30px)}

/* Migration path */
.hm-path{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:46px 0 0;padding:0;list-style:none;position:relative}
.hm-path li{position:relative;text-align:center;padding:0 10px}
.hm-path li:not(:last-child):after{content:"";position:absolute;top:30px;left:calc(50% + 36px);right:calc(-50% + 36px);height:2px;
  background:linear-gradient(90deg,rgba(94,234,212,.15),rgba(94,234,212,.9),rgba(94,234,212,.15));background-size:200% 100%;animation:hm-flow 2.6s linear infinite}
.hm-path .dot{width:60px;height:60px;margin:0 auto 10px;border-radius:18px;display:grid;place-items:center;background:var(--hm-panel2);border:1px solid var(--hm-line);font-size:1.5rem}
.hm-path .dot.app{padding:0;overflow:hidden;border:0}
.hm-path .dot.app img{width:60px;height:60px}
.hm-path b{display:block;font-size:.98rem}
.hm-path span{display:block;font-size:.84rem;color:var(--hm-muted)}
@keyframes hm-flow{from{background-position:200% 0}to{background-position:0 0}}

/* Sections */
.hm-section{padding:88px 0;border-top:1px solid var(--hm-line)}
.hm-alt{background:linear-gradient(180deg,rgba(16,34,63,.55),rgba(5,15,38,0))}
.hm-glow{background:radial-gradient(ellipse 60% 50% at 85% 0%,rgba(20,184,166,.14),transparent 60%),radial-gradient(ellipse 50% 50% at 0% 100%,rgba(59,130,246,.10),transparent 60%)}
.hm-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.hm-split.flip{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.hm-split.flip>.hm-phone-wrap{order:-1}
.hm-note{font-size:.88rem;color:#8ea2c0}

/* Phone frame for real app frames */
.hm-phone-wrap{display:flex;justify-content:center}
.hm-phone{margin:0;width:min(330px,80vw);border-radius:44px;padding:10px;background:linear-gradient(160deg,#1c2b47,#0a1428);border:1px solid rgba(148,197,230,.28);
  box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 60px rgba(34,211,238,.18)}
.hm-phone img{display:block;width:100%;height:auto;border-radius:34px;background:#f2f2f7}
.hm-phone figcaption{font-size:.8rem;color:#8ea2c0;text-align:center;margin-top:10px}

/* Video */
.hm-video-frame{margin-top:30px;border-radius:18px;padding:1px;background:linear-gradient(135deg,rgba(94,234,212,.6),rgba(59,130,246,.35),rgba(244,63,94,.35));box-shadow:0 30px 90px rgba(0,0,0,.5)}
.hm-video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:17px;background:#000}

/* Metrics matrix */
.hm-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:26px 0 0}
.hm-metric{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border:1px solid var(--hm-line);border-radius:12px;background:var(--hm-panel)}
.hm-metric b{font-size:.98rem}
.hm-metric small{display:block;color:var(--hm-muted);font-size:.78rem;font-weight:500}
.hm-tags{display:flex;gap:6px;flex:none}
.hm-tag{font-size:.7rem;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:6px;border:1px solid}
.hm-tag.json{color:#7dd3fc;border-color:rgba(125,211,252,.45);background:rgba(125,211,252,.08)}
.hm-tag.csv{color:#86efac;border-color:rgba(134,239,172,.45);background:rgba(134,239,172,.08)}
.hm-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:.86rem;color:var(--hm-muted)}

/* Workflow */
.hm-steps{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;counter-reset:step}
.hm-step{position:relative;border:1px solid var(--hm-line);border-radius:18px;background:linear-gradient(180deg,var(--hm-panel2),var(--hm-panel));padding:16px 14px 18px;display:flex;flex-direction:column}
.hm-step .num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--hm-teal2),var(--hm-blue));color:#fff;font-weight:800;margin-bottom:8px}
.hm-step h3{margin:0 0 4px;font-size:1.12rem}
.hm-step p{margin:0 0 14px;font-size:.9rem;line-height:1.5}
.hm-step .free{display:inline-block;margin-left:6px;font-size:.66rem;font-weight:800;letter-spacing:.08em;padding:2px 7px;border-radius:999px;background:rgba(94,234,212,.14);color:var(--hm-teal);vertical-align:middle}
.hm-step .shot{margin-top:auto;border-radius:20px;overflow:hidden;border:1px solid rgba(148,197,230,.22);background:#f2f2f7;aspect-ratio:1206/1700}
.hm-step .shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% var(--focus,0%)}

/* Lists and cards */
.hm-list{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:12px}
.hm-list li{padding:14px 16px 14px 46px;border:1px solid var(--hm-line);border-radius:12px;background:rgba(12,26,51,.8);position:relative}
.hm-list li:before{content:"";position:absolute;left:16px;top:17px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--hm-teal) 35%,rgba(94,234,212,.2) 36%)}
.hm-list strong{display:block;color:var(--hm-text);margin-bottom:2px}
.hm-list span{color:var(--hm-muted)}
.hm-export{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;counter-reset:ex}
.hm-export li{counter-increment:ex;display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--hm-line);border-radius:12px;background:var(--hm-panel)}
.hm-export li:before{content:counter(ex);flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgba(94,234,212,.14);color:var(--hm-teal);font-weight:800;font-size:.85rem}
.hm-callouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px}
.hm-callout{border:1px solid var(--hm-line);border-radius:14px;padding:18px;background:var(--hm-panel)}
.hm-callout h3{margin:0 0 6px;font-size:1.05rem}
.hm-callout p{margin:0;font-size:.94rem}

/* Pricing */
.hm-free{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;padding:0;list-style:none}
.hm-free li{padding:8px 14px;border-radius:999px;border:1px solid rgba(94,234,212,.4);background:rgba(94,234,212,.08);color:#d7fbf4;font-weight:700;font-size:.9rem}
.hm-packs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:28px}
.hm-pack{border:1px solid var(--hm-line);border-radius:16px;padding:18px 14px;text-align:center;background:var(--hm-panel)}
.hm-pack b{display:block;font-size:2.1rem;line-height:1.1;color:var(--hm-text)}
.hm-pack span{display:block;color:var(--hm-muted);font-size:.9rem}
.hm-pack strong{display:block;margin-top:8px;color:var(--hm-teal);font-size:1.05rem}
.hm-pack.unlimited{border-color:rgba(94,234,212,.55);background:linear-gradient(180deg,rgba(20,184,166,.18),var(--hm-panel))}

/* Gallery */
.hm-gallery{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 2px 18px;margin-top:26px;scrollbar-width:thin}
.hm-gallery figure{margin:0;flex:0 0 min(260px,62vw);scroll-snap-align:start}
.hm-gallery img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--hm-line);box-shadow:0 18px 50px rgba(0,0,0,.4)}
.hm-devices{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:22px;margin-top:22px;align-items:end}
.hm-devices figure{margin:0}
.hm-devices img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--hm-line);box-shadow:0 18px 50px rgba(0,0,0,.4)}
.hm-devices figcaption{font-size:.84rem;color:#8ea2c0;margin-top:8px}

/* FAQ */
.hm-faq{margin-top:26px;display:grid;gap:10px}
.hm-faq details{border:1px solid var(--hm-line);border-radius:12px;background:var(--hm-panel);padding:0 18px}
.hm-faq summary{cursor:pointer;list-style:none;padding:16px 28px 16px 0;font-weight:700;position:relative}
.hm-faq summary::-webkit-details-marker{display:none}
.hm-faq summary:after{content:"+";position:absolute;right:0;top:12px;font-size:1.4rem;color:var(--hm-teal);transition:transform .2s}
.hm-faq details[open] summary:after{transform:rotate(45deg)}
.hm-faq details p{margin:0 0 16px}
.hm-faq h3{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--hm-teal);margin:22px 0 4px}

/* Info + final */
.hm-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hm-info article{border:1px solid var(--hm-line);border-radius:14px;padding:20px;background:var(--hm-panel)}
.hm-info h3{margin:0 0 6px}
.hm-info a{text-decoration:none;font-weight:600}
.hm-final{text-align:center;padding:96px 0;border-top:1px solid var(--hm-line);
  background:radial-gradient(ellipse 60% 70% at 50% 100%,rgba(20,184,166,.22),transparent 65%),radial-gradient(ellipse 40% 50% at 85% 0%,rgba(244,63,94,.10),transparent 60%)}
.hm-final img{width:88px;height:88px;border-radius:20px;box-shadow:0 14px 40px rgba(0,0,0,.5)}
.hm-final .hm-actions{justify-content:center}
.hm-final p{max-width:620px;margin-left:auto;margin-right:auto}
.hm-inline-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:34px;padding:20px 24px;border-radius:16px;border:1px solid rgba(94,234,212,.3);background:linear-gradient(90deg,rgba(20,184,166,.14),rgba(59,130,246,.08))}
.hm-inline-cta p{margin:0;color:#e3eefb;font-weight:600}

/* Reveal on scroll (enabled by the page script; content is visible without it). */
.hm-js .hm-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.hm-js .hm-reveal.is-in{opacity:1;transform:none}
.hm-js .hm-steps .hm-step{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.hm-js .hm-steps.is-in .hm-step{opacity:1;transform:none}
.hm-js .hm-steps.is-in .hm-step:nth-child(2){transition-delay:.08s}
.hm-js .hm-steps.is-in .hm-step:nth-child(3){transition-delay:.16s}
.hm-js .hm-steps.is-in .hm-step:nth-child(4){transition-delay:.24s}
.hm-js .hm-steps.is-in .hm-step:nth-child(5){transition-delay:.32s}
@keyframes hm-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hm-hero-art img{animation:hm-float 7s ease-in-out infinite}

@media(max-width:1020px){
 .hm-steps{grid-template-columns:repeat(5,minmax(220px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
 .hm-step{scroll-snap-align:start}
 .hm-packs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
 .hm-hero-grid,.hm-split,.hm-split.flip{grid-template-columns:1fr;gap:34px}
 .hm-split.flip>.hm-phone-wrap{order:0}
 .hm-callouts,.hm-info{grid-template-columns:1fr}
 .hm-devices{grid-template-columns:1fr}
}
@media(max-width:700px){
 .hm-hero{padding:40px 0 30px}
 .hm-brand img{width:52px;height:52px;border-radius:12px}
 .hm-section{padding:58px 0}
 .hm-path{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
 .hm-path li:nth-child(2):after{display:none}
 .hm-metrics,.hm-export{grid-template-columns:1fr}
 .hm-packs{grid-template-columns:repeat(2,minmax(0,1fr))}
 .hm-pack.unlimited{grid-column:1/-1}
 .hm-steps{grid-template-columns:repeat(5,78vw)}
 .hm-actions .badge-button,.hm-actions .hm-btn{flex:1 1 100%;justify-content:center}
 .hm-inline-cta{flex-direction:column;align-items:stretch;text-align:center}
 .hm-inline-cta .badge-button{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
 .hm *{scroll-behavior:auto;animation:none!important;transition:none!important}
 .hm-js .hm-reveal,.hm-js .hm-steps .hm-step{opacity:1;transform:none}
}