/* ===== How it works page ===== */
.hw-hero-photo{background-image:url(../img/how-hero.jpg),linear-gradient(135deg,#d6b890,#8aa9b8)}
.hw-mini{background-image:url(../img/how-mini.jpg),linear-gradient(135deg,#a9cf9a,#e4c9a4)}
.hw-link{text-align:center;margin-top:36px}
.hw-steps-sec,.hw-roles,.hw-choice{background:#fff}
.hw-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;position:relative;counter-reset:s}
.hw-steps:before{content:"";position:absolute;left:10%;right:10%;top:27px;height:2px;background:repeating-linear-gradient(90deg,var(--blue) 0 6px,transparent 6px 12px)}
.hw-step{position:relative;text-align:center;padding:0 6px}
.hw-step i,.hw-list i,.hw-flow i{font-style:normal;font-weight:600;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--navy2),var(--teal))}
.hw-step i{width:54px;height:54px;margin:0 auto 16px;border-radius:50%;border:4px solid #fff;box-shadow:0 8px 18px rgba(14,122,134,.3);position:relative;transition:transform .3s}
.hw-step:hover i{transform:scale(1.12)}
.hw-step b{display:block;color:var(--navy);font-size:.95rem;margin-bottom:6px}.hw-step span{font-size:.8rem;color:var(--mut);display:block}
.hw-cm-in,.hw-fam-in{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.hw-cm h2,.hw-360 h2,.hw-fam h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:16px}
.hw-ticks{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-top:20px}.hw-ticks li{font-size:.84rem;font-weight:500;display:flex;gap:8px;align-items:center}.hw-ticks i{color:var(--teal)}
.hw-360{background:#fff}.hw-360-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.hw-ring{width:100%;max-width:420px;margin:0 auto;display:block}
.hw-orbit{fill:none;stroke:var(--blue);stroke-width:3;stroke-dasharray:3 9;stroke-linecap:round;transform-origin:180px 180px;animation:hwspin 40s linear infinite}
@keyframes hwspin{to{transform:rotate(360deg)}}
.hw-n circle{fill:var(--teal);stroke:#fff;stroke-width:4}.hw-n text{fill:#fff;font-weight:600;font-size:15px;font-family:Poppins,sans-serif}
.hw-c1{font-size:42px;font-weight:700;fill:var(--navy);font-family:Poppins,sans-serif}.hw-c2{font-size:11px;fill:var(--mut);font-family:Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.hw-lead{color:var(--mut);margin-bottom:18px}
.hw-list li{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid #e3eef3}.hw-list i{flex:none;width:32px;height:32px;border-radius:50%;font-size:.8rem}
.hw-list b{display:block;color:var(--navy);font-size:.92rem}.hw-list span{font-size:.8rem;color:var(--mut);display:block}
.hw-rgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.hw-role{padding:30px 28px;border-radius:var(--r);background:var(--mint);box-shadow:0 8px 26px rgba(10,47,71,.08);transition:transform .3s}.hw-role.r2{background:var(--sky)}.hw-role:hover{transform:translateY(-6px)}
.hw-role>i{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:#fff;color:var(--teal);font-size:1.25rem;margin-bottom:14px}.hw-role.r2>i{color:var(--blue)}
.hw-role h3{margin-bottom:10px}.hw-role li{padding:5px 0 5px 20px;position:relative;font-size:.88rem}.hw-role li:before{content:"";position:absolute;left:0;top:13px;width:7px;height:7px;border-radius:50%;background:var(--teal)}
.hw-onlight{color:#d6ecf7;margin-top:14px;font-size:.92rem}
.hw-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative;margin-top:8px}
.hw-flow li{text-align:center;position:relative}.hw-flow li:not(:last-child):after{content:"\f061";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;right:-14px;top:50%;translate:0 -50%;color:#8fd6ff;font-size:.8rem;z-index:2}
.hw-flow i{width:34px;height:34px;border-radius:50%;margin:0 auto 10px;font-size:.85rem;background:#1b9fe3}.hw-flow h3{color:#fff;font-size:.98rem}
.hw-fam{background:var(--bg)}.hw-report{max-width:380px;margin:0 auto}
.hw-pgrid,.hw-pfgrid{display:grid;gap:20px}.hw-pgrid{grid-template-columns:repeat(4,1fr)}.hw-pfgrid{grid-template-columns:repeat(3,1fr)}
.hw-pc,.hw-pf{padding:28px 22px;border-radius:var(--r);background:linear-gradient(135deg,#f3fbf9,#eaf6fd);transition:transform .3s,box-shadow .3s}.hw-pc:hover,.hw-pf:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(10,47,71,.12)}
.hw-pc>i,.hw-pf>i{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#fff;margin-bottom:14px}
.hw-pc h3,.hw-pf h3{font-size:1rem;margin-bottom:6px}.hw-pc p,.hw-pf p{font-size:.82rem;color:var(--mut)}
.hw-proof{background:#fff}
@media (max-width:991px){.hw-steps{grid-template-columns:1fr;max-width:460px;margin:0 auto}.hw-steps:before{left:27px;right:auto;top:0;bottom:0;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--blue) 0 6px,transparent 6px 12px)}.hw-step{text-align:left;padding-left:76px;min-height:54px}.hw-step i{position:absolute;left:0;top:0;margin:0}
.hw-cm-in,.hw-fam-in,.hw-360-in{grid-template-columns:1fr;gap:36px}.hw-pgrid{grid-template-columns:1fr 1fr}.hw-pfgrid{grid-template-columns:1fr}.hw-flow{grid-template-columns:1fr;max-width:320px;margin:0 auto}.hw-flow li:not(:last-child):after{content:"\f063";right:auto;left:50%;top:auto;bottom:-16px;translate:-50% 0}}
@media (max-width:620px){.hw-rgrid,.hw-pgrid,.hw-ticks{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.hw-orbit{animation:none}}

/* ================= Care Manager · 360° · Two roles: richer look & feel ================= */
/* --- Care Manager --- */
.hw-cm{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#f1f9fb 100%)}
.hw-cm:before{content:"";position:absolute;width:460px;height:460px;right:-150px;top:-140px;border-radius:50%;background:radial-gradient(circle,rgba(27,159,227,.15),transparent 70%);pointer-events:none}
.hw-cm .hw-cm-in{position:relative;align-items:center}
.hw-cm .ab-big{font-size:1.02rem;line-height:1.7}
.hw-cm .ab-big-2{padding-left:16px;border-left:3px solid var(--blue);color:var(--mut)}
.hw-ticks{gap:12px}
.hw-ticks li{padding:11px 14px;border-radius:14px;background:#fff;border:1px solid #dcecf1;box-shadow:0 6px 16px rgba(10,47,71,.06);transition:transform .3s,box-shadow .3s,border-color .3s}
.hw-ticks li:hover{transform:translateY(-3px);border-color:#b9dfe8;box-shadow:0 12px 24px rgba(10,47,71,.1)}
.hw-ticks li i{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--mint);font-size:.8rem}
@keyframes hwripple{0%{box-shadow:0 14px 32px rgba(14,122,134,.35),0 0 0 0 rgba(27,159,227,.38)}100%{box-shadow:0 14px 32px rgba(14,122,134,.35),0 0 0 34px rgba(27,159,227,0)}}

/* --- CareCove 360° --- */
.hw-360{background:linear-gradient(180deg,#f1f9fb 0%,#fff 100%)}
.hw-ringwrap{padding:26px;border-radius:28px;background:radial-gradient(circle at 50% 35%,#fff,#eaf6fd);border:1px solid #dbebf2;box-shadow:0 22px 50px rgba(10,47,71,.12)}
.hw-disc{fill:#fff;stroke:#e1eef4;stroke-width:2}
.hw-arc{fill:none;stroke:url(#hwg);stroke-width:5;stroke-linecap:round;stroke-dasharray:150 667;transform-origin:180px 180px;animation:hwspin 7s linear infinite}
.hw-n{cursor:pointer}.hw-n circle{fill:url(#hwg);transition:transform .35s cubic-bezier(.3,1.6,.5,1),filter .3s;transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 4px 6px rgba(14,122,134,.3))}
.hw-n.on circle{transform:scale(1.28);filter:drop-shadow(0 0 10px rgba(27,159,227,.7))}
.hw-c2{transition:fill .3s}.hw-ringwrap.live .hw-c2{fill:var(--teal);font-weight:600}
.hw-list{counter-reset:none}
.hw-list li{padding:13px 16px;margin-bottom:8px;border:1px solid transparent;border-radius:16px;cursor:default;transition:background .3s,box-shadow .3s,border-color .3s,transform .3s}
.hw-list li:hover,.hw-list li.on{background:#fff;border-color:#cfe8f1;box-shadow:0 10px 24px rgba(10,47,71,.09);transform:translateX(6px)}
.hw-list i{transition:transform .3s,background .3s,box-shadow .3s}
.hw-list li.on i{background:var(--blue);transform:scale(1.14);box-shadow:0 0 0 6px rgba(27,159,227,.18)}

/* --- Two roles --- */
.hw-roles{background:linear-gradient(180deg,#fff 0%,#f3fbf9 100%)}
.hw-rgrid{position:relative;gap:34px}
.hw-rgrid:after{content:"&";position:absolute;left:50%;top:50%;translate:-50% -50%;width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--navy2),var(--teal));color:#fff;font-size:1.35rem;font-weight:600;border:4px solid #fff;box-shadow:0 10px 24px rgba(10,47,71,.25);z-index:5;animation:abpulse 3s ease-in-out infinite}
.hw-role{position:relative;overflow:hidden;padding:34px 30px 30px;border:1px solid rgba(10,47,71,.06);background:linear-gradient(160deg,#fff 0%,var(--mint) 100%);box-shadow:0 12px 34px rgba(10,47,71,.09)}
.hw-role.r2{background:linear-gradient(160deg,#fff 0%,var(--sky) 100%)}
.hw-role:before{content:"\f4be";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;right:-14px;bottom:-26px;font-size:9rem;line-height:1;color:var(--teal);opacity:.07;pointer-events:none;transition:transform .6s,opacity .4s}
.hw-role.r2:before{content:"\f46c";color:var(--blue)}
.hw-role:hover:before{transform:rotate(-8deg) scale(1.1);opacity:.12}
.hw-role>i{width:58px;height:58px;border-radius:18px;background:linear-gradient(135deg,var(--teal),#2fa56b);color:#fff;font-size:1.4rem;box-shadow:0 10px 22px rgba(14,122,134,.3)}
.hw-role.r2>i{background:linear-gradient(135deg,var(--blue),#6b57d6);color:#fff;box-shadow:0 10px 22px rgba(27,130,200,.3)}
.hw-role h3{font-size:1.3rem;margin-bottom:14px}
.hw-role li{padding:8px 0 8px 30px;border-top:1px dashed rgba(10,47,71,.12);font-size:.9rem;font-weight:500;color:var(--navy)}
.hw-role li:first-child{border-top:0}
.hw-role li:before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;top:50%;translate:0 -50%;width:20px;height:20px;display:grid;place-items:center;font-size:.6rem;color:#fff;background:var(--teal)}
.hw-role.r2 li:before{background:var(--blue)}
@media (max-width:860px){.hw-rgrid:after{display:none}.hw-rgrid{gap:22px}.hw-ringwrap{padding:18px}}
@media (prefers-reduced-motion:reduce){.hw-arc,.hw-rgrid:after{animation:none}}


/* --- Care Manager map --- */
.cm-map{position:relative;height:490px;border-radius:var(--r);border:1px solid #d3e8f1;box-shadow:0 22px 50px rgba(10,47,71,.12);overflow:hidden;background:radial-gradient(circle at 50% 50%,#fff 0,#eaf6fd 50%,#dcf0f8 100%)}
.cm-map:before{content:"";position:absolute;left:50%;top:50%;width:330px;height:330px;translate:-50% -50%;border-radius:50%;border:2px dashed var(--blue);opacity:.35;animation:hwspin 70s linear infinite}
.cm-lines{position:absolute;inset:0;width:100%;height:100%}
.cm-lines line{stroke:var(--blue);stroke-width:2;stroke-dasharray:5 6;opacity:.55;vector-effect:non-scaling-stroke;animation:cmflow 1.4s linear infinite}
@keyframes cmflow{to{stroke-dashoffset:-11}}
.cm-core{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;width:158px;height:158px;border-radius:50%;background:linear-gradient(135deg,var(--navy2),var(--teal));color:#fff;display:grid;place-content:center;justify-items:center;text-align:center;gap:3px;border:6px solid rgba(255,255,255,.75);animation:hwripple 2.8s ease-out infinite}
.cm-core i{font-size:1.5rem;margin-bottom:2px}.cm-core b{font-size:.92rem;font-weight:600}.cm-core small{font-size:.62rem;opacity:.85;max-width:104px;line-height:1.3}
.cm-node{position:absolute;z-index:1;width:45%;display:grid;grid-template-columns:40px 1fr;gap:4px 12px;align-items:start;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid #e2eff5;box-shadow:0 10px 24px rgba(10,47,71,.1);transition:transform .3s,box-shadow .3s}
.cm-node:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(10,47,71,.16)}
.cm-node i{grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--sky);color:var(--blue);font-size:1rem}
.cm-node h3{font-size:.9rem;align-self:end}
.cm-node p{font-size:.74rem;line-height:1.45;color:var(--mut)}
.cm-node.n1{left:3.5%;top:4.5%}.cm-node.n2{right:3.5%;top:4.5%}.cm-node.n3{left:3.5%;bottom:4.5%}.cm-node.n4{right:3.5%;bottom:4.5%}
.cm-node.n2 i{background:var(--mint);color:#2fa56b}.cm-node.n4 i{background:var(--lav);color:#6b57d6}.cm-node.n3 i{background:#fde8e8;color:#e5484d}
@media (max-width:620px){
 .cm-map{height:auto;display:grid;gap:12px;padding:22px 16px}
 .cm-map:before,.cm-lines{display:none}
 .cm-core{position:relative;left:auto;top:auto;translate:none;margin:0 auto 6px}
 .cm-node{position:static;width:auto}
 .cm-node:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){.cm-map:before,.cm-lines line,.cm-core{animation:none}.cm-node{transition:none}}
