/* Hero phone and tablet (partial wp-devices), drawn over hero.webp so the app screens are sharp at any size.
   Every length is in mockup pixels of the photo (1031 × 403): --p is one of them at the photo's current width. */

.wp-art{container-type:inline-size} /* positioned in wellness-page.css (beside the text from 1280px) */
.wp-dev{position:absolute;inset:0;--p:calc(100cqw / 1031);font-family:var(--body);color:#1d2422;pointer-events:none;-webkit-user-select:none;user-select:none}
.wp-dev svg{display:block}
.dv-tab,.dv-phone{position:absolute;background:#15171a;box-shadow:inset 0 0 0 calc(1.4 * var(--p)) #2e3237}
.dv-tab{left:calc(522 * var(--p));top:calc(34 * var(--p));width:calc(456 * var(--p));height:calc(352 * var(--p));padding:calc(12 * var(--p));border-radius:calc(22 * var(--p))}
/* Phone: an iPhone (titanium band, black bezel, Dynamic Island, side buttons, home indicator) */
.dv-phone{left:calc(414 * var(--p));top:calc(134 * var(--p));z-index:1;width:calc(134 * var(--p));height:calc(266 * var(--p));padding:calc(3.8 * var(--p));border:calc(1.3 * var(--p)) solid transparent;border-radius:calc(21 * var(--p));background:linear-gradient(#0b0b0d,#0b0b0d) padding-box,linear-gradient(140deg,#b3b3b8 0%,#6b6b71 16%,#34343a 42%,#5b5b61 68%,#a9a9ae 100%) border-box;box-shadow:0 calc(10 * var(--p)) calc(18 * var(--p)) calc(-8 * var(--p)) rgba(0,0,0,.45)}
.dv-phone::before,.dv-phone::after,.dv-act{content:"";position:absolute;width:calc(1.6 * var(--p));border-radius:calc(.8 * var(--p)) 0 0 calc(.8 * var(--p));background:#7a7a80}
.dv-phone::before{left:calc(-2.9 * var(--p));top:calc(66 * var(--p));height:calc(21 * var(--p));box-shadow:0 calc(26 * var(--p)) 0 #7a7a80} /* volume up and down */
.dv-act{left:calc(-2.9 * var(--p));top:calc(44 * var(--p));height:calc(11 * var(--p))}
.dv-phone::after{right:calc(-2.9 * var(--p));top:calc(78 * var(--p));height:calc(34 * var(--p));border-radius:0 calc(.8 * var(--p)) calc(.8 * var(--p)) 0}
.dv-island{position:absolute;top:calc(7.8 * var(--p));left:50%;z-index:2;width:calc(37 * var(--p));height:calc(11 * var(--p));border-radius:999px;background:#000;transform:translateX(-50%)}
.dv-home{position:absolute;bottom:calc(6.6 * var(--p));left:50%;z-index:2;width:calc(42 * var(--p));height:calc(1.9 * var(--p));border-radius:999px;background:#111;transform:translateX(-50%)}
.dv-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:calc(10 * var(--p));background:#fbfaf6}
.dv-phone .dv-screen{border-radius:calc(16.5 * var(--p))}

/* Tablet: sidebar */
.dv-side{position:absolute;top:0;bottom:0;left:0;width:calc(96 * var(--p));padding:calc(12 * var(--p)) calc(7 * var(--p));border-right:calc(.8 * var(--p)) solid #eceee8}
.dv-brand{display:flex;align-items:center;gap:calc(5 * var(--p));margin:calc(1 * var(--p)) 0 calc(13 * var(--p)) calc(5 * var(--p));font:800 calc(8.6 * var(--p))/1 var(--body);letter-spacing:.14em}
.dv-brand span{font-weight:900;letter-spacing:0;color:#2e6b4f}
.dv-side li{display:flex;align-items:center;gap:calc(6 * var(--p));height:calc(24.5 * var(--p));padding:0 calc(6 * var(--p));border-radius:calc(6 * var(--p));font:500 calc(7.3 * var(--p))/1 var(--body);color:#3e4844}
.dv-side li.on{background:#e6eee6;font-weight:600;color:#1d2b25}
.dv-side svg{width:calc(10 * var(--p));height:calc(10 * var(--p));flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Tablet: main area and cards */
.dv-main{position:absolute;top:0;right:0;bottom:0;left:calc(96 * var(--p))}
.dv-search{position:absolute;top:calc(10 * var(--p));left:calc(13 * var(--p));width:calc(10 * var(--p));height:calc(10 * var(--p));fill:none;stroke:#3e4844;stroke-width:2;stroke-linecap:round}
.dv-greet{position:absolute;top:calc(29 * var(--p));left:calc(13 * var(--p));font:700 calc(13 * var(--p))/1.1 var(--body);letter-spacing:-.01em}
.dv-sub{position:absolute;top:calc(49 * var(--p));left:calc(13 * var(--p));font:400 calc(7.3 * var(--p))/1.2 var(--body);color:#5b6460}
.dv-card{position:absolute;padding:calc(9 * var(--p)) calc(10 * var(--p));border-radius:calc(8 * var(--p));background:#fff;box-shadow:0 calc(1 * var(--p)) calc(5 * var(--p)) rgba(24,46,36,.08)}
.dv-cal{top:calc(75 * var(--p));left:calc(13 * var(--p));width:calc(176 * var(--p));height:calc(152 * var(--p))}
.dv-prog{top:calc(75 * var(--p));left:calc(199 * var(--p));width:calc(125 * var(--p));height:calc(152 * var(--p))}
.dv-today{top:calc(238 * var(--p));left:calc(13 * var(--p));width:calc(176 * var(--p));height:calc(78 * var(--p))}
.dv-week{top:calc(238 * var(--p));left:calc(199 * var(--p));width:calc(125 * var(--p));height:calc(78 * var(--p))}
.dv-h{display:flex;align-items:center;justify-content:space-between;font:600 calc(7.6 * var(--p))/1 var(--body)}
.dv-h svg{width:calc(7 * var(--p));height:calc(7 * var(--p));fill:none;stroke:#8a928e;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.dv-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:calc(3.2 * var(--p));margin-top:calc(8 * var(--p))}
.dv-dn{text-align:center;font:500 calc(5.4 * var(--p))/1 var(--body);color:#8a928e}
.dv-d{display:grid;place-items:center;height:calc(15 * var(--p));font:500 calc(6.1 * var(--p))/1 var(--body);color:#2b3330}
.dv-d.dv-y,.dv-d.dv-g,.dv-d.dv-p,.dv-d.dv-now{background:radial-gradient(circle,var(--c) 0 calc(6.4 * var(--p)),transparent calc(6.7 * var(--p)))}
.dv-y{--c:#f8df96}.dv-g{--c:#cfe6d6}.dv-p{--c:#ddd1ef}
.dv-d.dv-now{--c:#2e6b4f;font-weight:700;color:#fff}
.dv-mute i{width:calc(4 * var(--p));height:calc(4 * var(--p));border-radius:50%;background:#cfd5d2}

.dv-ring{position:absolute;top:calc(9 * var(--p));left:50%;width:calc(60 * var(--p));height:calc(60 * var(--p));transform:translateX(-50%) rotate(-90deg)}
.dv-ring circle{fill:none;stroke:#e5eee8;stroke-width:3.4}
.dv-ring circle+circle{stroke:#2e6b4f;stroke-linecap:round}
.dv-pct{position:absolute;top:calc(27 * var(--p));left:0;right:0;display:grid;justify-items:center;gap:calc(1.5 * var(--p))}
.dv-pct b{font:700 calc(12.5 * var(--p))/1 var(--body)}
.dv-pct small{font:500 calc(4.4 * var(--p))/1 var(--body);color:#6d7571}
.dv-h2{justify-content:center;margin-top:calc(66 * var(--p));font-size:calc(7.1 * var(--p))}
.dv-prog ul{display:grid;gap:calc(6.5 * var(--p));margin-top:calc(9 * var(--p))}
.dv-prog li{display:flex;align-items:center;gap:calc(5 * var(--p));font:500 calc(6.1 * var(--p))/1 var(--body);color:#3e4844}
.dv-prog li svg{width:calc(8.5 * var(--p));height:calc(8.5 * var(--p));flex:none}
.dv-prog li circle{fill:#2e6b4f}
.dv-prog li path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

.dv-mood{display:flex;align-items:center;gap:calc(8 * var(--p));margin-top:calc(9 * var(--p))}
.dv-mood svg{width:calc(23 * var(--p));height:calc(23 * var(--p))}
.dv-mood span{font:600 calc(7.6 * var(--p))/1 var(--body)}
.dv-link{margin:calc(5 * var(--p)) 0 0 calc(31 * var(--p));font:500 calc(6 * var(--p))/1 var(--body);color:#2e6b4f}
.dv-bars{display:flex;align-items:flex-end;justify-content:space-between;height:calc(44 * var(--p));margin:calc(10 * var(--p)) calc(4 * var(--p)) 0}
.dv-bars i{width:calc(6 * var(--p));border-radius:calc(3 * var(--p))}
.dv-bars .dv-p{background:#a99dd8}.dv-bars .dv-g{background:#7fbf9a}.dv-bars .dv-l{background:#c4c0e7}.dv-bars .dv-y{background:#f1cd6c}
.dv-bars .h38{height:38%}.dv-bars .h46{height:46%}.dv-bars .h52{height:52%}.dv-bars .h62{height:62%}.dv-bars .h70{height:70%}.dv-bars .h78{height:78%}.dv-bars .h86{height:86%}

/* Phone */
.dv-status{display:flex;align-items:center;justify-content:space-between;height:calc(19 * var(--p));padding:calc(.6 * var(--p)) calc(8 * var(--p)) 0 calc(12 * var(--p));font:600 calc(5.6 * var(--p))/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",var(--body);color:#000}
.dv-icons{display:flex;align-items:center;gap:calc(1.6 * var(--p))}
.dv-icons svg{fill:currentColor}
.dv-icons svg:nth-child(1){width:calc(6.2 * var(--p));height:calc(4.2 * var(--p))}
.dv-icons svg:nth-child(2){width:calc(5.6 * var(--p));height:calc(4.2 * var(--p))}
.dv-icons svg:nth-child(3){width:calc(9.2 * var(--p));height:calc(4.4 * var(--p))}
.dv-pbrand{margin-top:calc(4 * var(--p));text-align:center;font:800 calc(8.6 * var(--p))/1 var(--body);letter-spacing:.16em}
.dv-q{width:calc(84 * var(--p));margin:calc(11 * var(--p)) auto 0;text-align:center;font:600 calc(8.4 * var(--p))/1.35 var(--body)}
.dv-faces{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(10 * var(--p)) calc(3 * var(--p));margin-top:calc(16 * var(--p));padding:0 calc(8 * var(--p))}
.dv-faces li{display:grid;justify-items:center;gap:calc(3.5 * var(--p))}
.dv-faces svg{width:calc(25 * var(--p));height:calc(25 * var(--p))}
.dv-faces span{font:500 calc(5.2 * var(--p))/1 var(--body);color:#3e4844;white-space:nowrap}
.dv-tabs{position:absolute;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:space-around;height:calc(31 * var(--p));padding-bottom:calc(7 * var(--p));border-top:calc(.8 * var(--p)) solid #eceee8;background:#fff}
.dv-tabs svg{width:calc(9.5 * var(--p));height:calc(9.5 * var(--p));fill:none;stroke:#8a928e;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dv-tabs svg.on{stroke:#2e6b4f}