/* Apple-inspired refinement for the Care process page. Content and SEO stay in the PHP page. */
body[data-care-page="how-it-works"]{background:#fff;color:#1d1d1f}
body[data-care-page="how-it-works"] .nav{width:min(1340px,calc(100% - 48px));height:74px;margin:12px auto -86px;top:12px;border:1px solid rgba(210,210,215,.76);border-radius:24px;background:rgba(255,255,255,.88);box-shadow:0 12px 40px rgba(20,35,55,.08);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px)}
body[data-care-page="how-it-works"] .nav .wrap{width:auto;height:100%;padding:0 25px}
body[data-care-page="how-it-works"] .brand{color:#1d1d1f;letter-spacing:.055em}
body[data-care-page="how-it-works"] .brand small{color:#6e6e73}
body[data-care-page="how-it-works"] .care-tag{color:#06c;border-color:#d2d2d7}
body[data-care-page="how-it-works"] .nav-links{gap:23px;color:#252529;font-size:13px}
body[data-care-page="how-it-works"] .nav-links>a:not(.btn):hover{color:#06c}
body[data-care-page="how-it-works"] .care-language-current{border-radius:13px}
body[data-care-page="how-it-works"] .how-hero{min-height:710px;padding:82px 0 48px;background:radial-gradient(ellipse at 74% 46%,#edf5ff 0,rgba(239,246,255,.68) 23%,rgba(255,255,255,0) 53%),linear-gradient(115deg,#fff 0%,#fbfcff 55%,#f6f9fe 100%);color:#1d1d1f;border-bottom:1px solid #e8e8ed}
body[data-care-page="how-it-works"] .how-hero:after{content:none}
body[data-care-page="how-it-works"] .how-hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(360px,.94fr);align-items:center;gap:10px;width:min(1320px,calc(100% - 96px))}
body[data-care-page="how-it-works"] .how-hero .hero-copy{max-width:760px;padding:110px 0 70px}
body[data-care-page="how-it-works"] .how-hero .eyebrow{margin-bottom:22px;color:#66748a}
body[data-care-page="how-it-works"] .how-hero h1{max-width:760px;font-size:clamp(52px,6.5vw,88px);line-height:.99;font-weight:690;letter-spacing:-.065em;color:#1d1d1f}
body[data-care-page="how-it-works"] .how-hero h1 em{color:#06c;font-style:normal}
body[data-care-page="how-it-works"] .how-hero p{max-width:610px;margin:25px 0 25px;color:#687589;font-size:18px;line-height:1.6}
body[data-care-page="how-it-works"] .how-hero .hero-actions{gap:12px}
body[data-care-page="how-it-works"] .how-hero .btn{min-height:52px;padding:13px 23px;background:#06c;border:1px solid #06c;border-radius:999px;box-shadow:0 8px 20px rgba(0,102,204,.16)}
body[data-care-page="how-it-works"] .how-hero .btn:hover{background:#005bb5;border-color:#005bb5}
body[data-care-page="how-it-works"] .how-hero .btn.outline{background:#fff;border-color:#d6deea;color:#06c;box-shadow:none}
body[data-care-page="how-it-works"] .how-hero .hero-note{margin-top:18px;color:#718096;font-size:13px}
body[data-care-page="how-it-works"] .how-hero-art{position:relative;isolation:isolate;display:grid;place-items:center;min-height:500px}
body[data-care-page="how-it-works"] .how-hero-art:before{content:"";position:absolute;z-index:-1;width:min(38vw,475px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#e4efff 0,#edf4ff 47%,rgba(237,244,255,0) 72%)}
body[data-care-page="how-it-works"] .how-hero-art img{position:relative;z-index:1;width:min(100%,590px);height:500px;object-fit:contain;filter:drop-shadow(0 30px 30px rgba(40,55,78,.16))}
body[data-care-page="how-it-works"] .how-orbit{position:absolute;border:1px solid rgba(0,102,204,.13);border-radius:50%;pointer-events:none}
body[data-care-page="how-it-works"] .how-orbit-one{width:88%;height:74%;transform:rotate(-14deg)}
body[data-care-page="how-it-works"] .how-orbit-two{width:76%;height:88%;transform:rotate(20deg)}
body[data-care-page="how-it-works"] .how-image-caption{position:absolute;right:2%;bottom:38px;color:#8290a3;font-size:10px;font-weight:700;letter-spacing:.22em}
body[data-care-page="how-it-works"] .facts{background:#f5f5f7;border:0}
body[data-care-page="how-it-works"] .facts .wrap{gap:20px;padding:23px 0}
body[data-care-page="how-it-works"] .fact{display:flex;align-items:center;gap:12px}
body[data-care-page="how-it-works"] .fact b{color:#1d1d1f;font-size:14px}
body[data-care-page="how-it-works"] .fact span{color:#6e6e73;font-size:12px}
body[data-care-page="how-it-works"] .section{padding:88px 0}
body[data-care-page="how-it-works"] .head{margin-bottom:36px;align-items:flex-end}
body[data-care-page="how-it-works"] .head h2{font-weight:680;letter-spacing:-.055em}
body[data-care-page="how-it-works"] .head p{color:#6e6e73}
body[data-care-page="how-it-works"] .process{gap:18px}
body[data-care-page="how-it-works"] .process-card{position:relative;min-height:260px;padding:25px 23px;background:rgba(255,255,255,.86)!important;border:1px solid #e8e8ed;border-radius:20px;box-shadow:0 12px 35px rgba(20,35,55,.045)}
body[data-care-page="how-it-works"] .process-card:not(:last-child):after{content:"→";position:absolute;right:-18px;top:48%;z-index:2;color:#06c;font-size:23px;font-weight:450}
body[data-care-page="how-it-works"] .step-no{width:46px;height:46px;margin-bottom:30px;background:#edf5ff;color:#06c;font-weight:700}
body[data-care-page="how-it-works"] .process-card h3{margin-bottom:10px;color:#1d1d1f;font-weight:650}
body[data-care-page="how-it-works"] .process-card p{color:#6e6e73;font-size:14px}
body[data-care-page="how-it-works"] .choice-section{background:#f5f5f7}
body[data-care-page="how-it-works"] .choices{gap:18px}
body[data-care-page="how-it-works"] .choice,body[data-care-page="how-it-works"] .choice.green{min-height:380px;padding:36px;background:#fff;border:1px solid #e8e8ed;border-radius:22px;color:#1d1d1f;box-shadow:0 14px 35px rgba(20,35,55,.045)}
body[data-care-page="how-it-works"] .choice .eyebrow,body[data-care-page="how-it-works"] .choice.green .eyebrow{color:#06c}
body[data-care-page="how-it-works"] .choice p,body[data-care-page="how-it-works"] .choice.green p{color:#6e6e73}
body[data-care-page="how-it-works"] .choice .polish-note{margin-top:18px;padding:14px 15px;border-left:3px solid #06c;border-radius:0 13px 13px 0;background:#f3f8ff;color:#4c5d73;font-size:13px;line-height:1.55}
body[data-care-page="how-it-works"] .pill,body[data-care-page="how-it-works"] .green .pill{background:#f5f9ff;border-color:#dce9fb;color:#40516a}
body[data-care-page="how-it-works"] .or{border-color:#f5f5f7;color:#6e6e73}
body[data-care-page="how-it-works"] .cycle-panel{background:linear-gradient(135deg,#1d1d1f,#303036);border-radius:28px}
body[data-care-page="how-it-works"] .cycle-panel .eyebrow,body[data-care-page="how-it-works"] .time span{color:#8fc8ff}
body[data-care-page="how-it-works"] .time{border-color:#4a4a50}
body[data-care-page="how-it-works"] .family{background:#f5f5f7}
body[data-care-page="how-it-works"] .family .eyebrow{color:#06c}
body[data-care-page="how-it-works"] .device{border-color:#e3e9f1;border-radius:999px}
body[data-care-page="how-it-works"] .final{background:#f5f8fc;color:#1d1d1f;padding:76px 0}
body[data-care-page="how-it-works"] .final .eyebrow{color:#06c}
body[data-care-page="how-it-works"] .final p{color:#6e6e73}
body[data-care-page="how-it-works"] .final .fine{color:#737f90}
body[data-care-page="how-it-works"] .footer{background:#fff}
body[data-care-page="how-it-works"] .footer .btn{background:#06c;color:#fff}
body[data-care-page="how-it-works"] .footer-bottom{border-color:#e8e8ed;color:#6e6e73}
@media(max-width:1000px){
 body[data-care-page="how-it-works"] .how-hero-grid{grid-template-columns:minmax(0,1fr) minmax(300px,.8fr);width:calc(100% - 64px)}
 body[data-care-page="how-it-works"] .how-hero h1{font-size:clamp(48px,6.5vw,68px)}
 body[data-care-page="how-it-works"] .how-hero-art{min-height:410px}
 body[data-care-page="how-it-works"] .how-hero-art img{height:420px}
 body[data-care-page="how-it-works"] .process-card{padding:22px 18px}
}
@media(max-width:760px){
 body[data-care-page="how-it-works"] .nav{width:calc(100% - 24px);height:72px;margin:8px auto -80px;top:8px;border-radius:20px}
 body[data-care-page="how-it-works"] .nav .wrap{width:auto;padding:0 15px}
 body[data-care-page="how-it-works"] .how-hero{padding:95px 0 34px}
 body[data-care-page="how-it-works"] .how-hero-grid{grid-template-columns:1fr;gap:0;width:calc(100% - 40px)}
 body[data-care-page="how-it-works"] .how-hero .hero-copy{padding:70px 0 8px}
 body[data-care-page="how-it-works"] .how-hero h1{font-size:clamp(42px,11vw,60px)}
 body[data-care-page="how-it-works"] .how-hero p{font-size:16px;margin:20px 0}
 body[data-care-page="how-it-works"] .how-hero .hero-actions{align-items:stretch}
 body[data-care-page="how-it-works"] .how-hero .btn{width:100%}
 body[data-care-page="how-it-works"] .how-hero-art{min-height:270px;margin-top:-5px}
 body[data-care-page="how-it-works"] .how-hero-art img{height:290px;max-width:420px}
 body[data-care-page="how-it-works"] .how-image-caption{right:4%;bottom:8px}
 body[data-care-page="how-it-works"] .facts .wrap{grid-template-columns:1fr;gap:14px;padding:20px 0}
 body[data-care-page="how-it-works"] .section{padding:62px 0}
 body[data-care-page="how-it-works"] .process{grid-template-columns:1fr;gap:12px}
 body[data-care-page="how-it-works"] .process-card{min-height:0;padding:21px 20px}
 body[data-care-page="how-it-works"] .process-card:not(:last-child):after{content:"↓";right:18px;top:auto;bottom:-17px;font-size:18px}
 body[data-care-page="how-it-works"] .step-no{margin-bottom:18px}
 body[data-care-page="how-it-works"] .choices{grid-template-columns:1fr}
 body[data-care-page="how-it-works"] .choice,body[data-care-page="how-it-works"] .choice.green{min-height:0;padding:26px}
 body[data-care-page="how-it-works"] .or{display:none}
 body[data-care-page="how-it-works"] .cycle-panel{padding:30px 22px}
 body[data-care-page="how-it-works"] .family{padding:64px 0}
 body[data-care-page="how-it-works"] .final{padding:60px 0}
}
@media(prefers-reduced-motion:reduce){
 body[data-care-page="how-it-works"] *,body[data-care-page="how-it-works"] *:before,body[data-care-page="how-it-works"] *:after{scroll-behavior:auto!important;transition:none!important}
}

/* Mobile navigation: deliberate two-row layout prevents crowded wrapping. */
@media(max-width:760px){
 body[data-care-page="how-it-works"] .nav{
  width:calc(100% - 24px);
  height:auto;
  min-height:0;
  margin:8px auto -119px;
  top:8px;
  border-radius:20px;
 }
 body[data-care-page="how-it-works"] .nav .wrap{
  width:auto;
  height:auto;
  min-height:0;
  padding:10px 14px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:40px 42px;
  gap:6px 10px;
  align-items:center;
 }
 body[data-care-page="how-it-works"] .nav .logo{
  grid-column:1;
  grid-row:1;
  justify-self:start;
  min-width:0;
  gap:8px;
  white-space:nowrap;
 }
 body[data-care-page="how-it-works"] .nav .brand{
  font-size:11px;
  letter-spacing:.055em;
  line-height:1.1;
 }
 body[data-care-page="how-it-works"] .nav .brand small{
  margin-top:3px;
  font-size:7.5px;
  letter-spacing:.18em;
 }
 body[data-care-page="how-it-works"] .nav .care-tag{
  padding-left:8px;
  font-size:11px;
 }
 body[data-care-page="how-it-works"] .nav-links{
  display:contents;
 }
 body[data-care-page="how-it-works"] .nav-links>a:not(.btn){
  display:none;
 }
 body[data-care-page="how-it-works"] .nav-links>a.care-blog-nav{
  display:inline-flex;
  grid-column:1;
  grid-row:2;
  align-items:center;
  justify-self:start;
  min-height:42px;
  font-size:13px;
  font-weight:550;
  white-space:nowrap;
 }
 body[data-care-page="how-it-works"] .nav .care-language{
  grid-column:2;
  grid-row:1;
  justify-self:end;
 }
 body[data-care-page="how-it-works"] .care-language-current{
  min-width:52px;
  height:36px;
  padding:0 9px;
  border-radius:12px;
  font-size:11px;
 }
 body[data-care-page="how-it-works"] .nav .btn{
  grid-column:2;
  grid-row:2;
  justify-self:end;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  max-width:none;
  min-height:42px;
  padding:10px 14px;
  gap:6px;
  font-size:11px;
  line-height:1.2;
  white-space:nowrap;
 }
 body[data-care-page="how-it-works"] .head h2{overflow-wrap:anywhere}
}

/* Correct the legacy overlay spacing now that the compact header is in normal flow. */
@media(max-width:760px){
 body[data-care-page="how-it-works"] .nav.how-header{width:calc(100% - 24px)!important;margin:8px auto 0!important;top:auto!important;position:relative!important;padding:0!important;height:auto!important;min-height:0!important}
 body[data-care-page="how-it-works"] .how-header .how-header-inner{width:100%!important;height:auto!important;min-height:0!important;padding:14px 15px!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto!important;grid-template-areas:"brand language" "links links" "partner partner"!important;gap:8px 10px!important}
 body[data-care-page="how-it-works"] .how-header .how-header-links{display:grid!important;grid-area:links!important;grid-template-columns:minmax(0,1fr) auto!important;width:100%!important;min-width:0!important}
 body[data-care-page="how-it-works"] .how-header .how-header-blog{grid-column:1!important;grid-row:auto!important;justify-self:start!important}
 body[data-care-page="how-it-works"] .how-header .how-header-plans{grid-column:2!important;grid-row:auto!important;justify-self:end!important;max-width:100%!important}
 body[data-care-page="how-it-works"] .how-header .how-header-partner{grid-column:1/-1!important;grid-row:auto!important;justify-self:stretch!important;width:100%!important;min-width:0!important}
 body[data-care-page="how-it-works"] .how-hero{padding:30px 0 34px!important}
 body[data-care-page="how-it-works"] .how-hero .hero-copy{padding:28px 0 8px!important}
}