/* Source guide: pages/living-well.css
 * Page-specific presentation.
 * Load order: base.css, components.css, page stylesheet, refresh.css.
 * Later rules intentionally refine earlier layouts; preserve cascade order.
 */

/* App page uses genuine screen images extracted from the supplied product deck. */
/* Group: App introduction. */
.app-hero {
  padding: 80px 0;
  background: var(--paper);
  overflow: hidden;
}
.app-hero .split {
  gap: 35px;
}
/* Group: Three-screen product composition. */
.app-hero-screens {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 450px;
  position: relative;
  padding: 32px 12px 40px;
}
.app-hero-screens::before {
  content: "";
  width: 430px;
  height: 430px;
  position: absolute;
  border: 1px solid #badbd5;
  border-radius: 50%;
}
/* Group: Device framing around genuine app captures. */
.app-phone-frame {
  width: 35%;
  flex-shrink: 0;
  position: relative;
  padding: 0 0 18px;
  border: 2px solid #dce1e8;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 15px 22px #262d601c;
  overflow: hidden;
}
.app-phone-frame::after {
  content: "";
  display: block;
  position: absolute;
  width: 32%;
  height: 3px;
  bottom: 7px;
  left: 34%;
  border-radius: 3px;
  background: #acb2bf;
}
.app-phone-frame img {
  width: 100%;
  height: auto;
  display: block;
}
.app-phone-frame:first-child {
  transform: rotate(-9deg);
  margin-right: -30px;
}
.app-phone-frame:nth-child(2) {
  z-index: 2;
  width: 43%;
}
.app-phone-frame:last-child {
  transform: rotate(9deg);
  margin-left: -30px;
}
/* Match the rear devices to the white, notched daily-plan phone in front. */
:is(.app-hero-screens .app-phone-frame:not(:nth-child(2)), #inside-app article:not(:first-child) .app-phone-frame) {
  aspect-ratio: 1040 / 1977;
  padding: 0;
}
:is(.app-hero-screens .app-phone-frame:not(:nth-child(2)), #inside-app article:not(:first-child) .app-phone-frame) img {
  position: absolute;
  inset: 2.5% 5% 3%;
  width: 90%;
  height: 94.5%;
  object-fit: cover;
  object-position: center bottom;
  border-radius: 23px 23px 18px 18px;
}
:is(.app-hero-screens .app-phone-frame:not(:nth-child(2)), #inside-app article:not(:first-child) .app-phone-frame)::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 1%;
  left: 23%;
  width: 54%;
  height: 6%;
  border-radius: 0 0 13px 13px;
  background: linear-gradient(#e9edf3, #e9edf3) center 45% / 25% 3px no-repeat, #fff;
}
/* Group: Coaching and digital-support introduction. */
.app-intro {
  max-width: var(--page-width);
  text-align: left;
}
.app-intro .eyebrow {
  justify-content: center;
}
.app-intro .lead {
  margin-inline: 0;
  max-width: 660px;
}
/* Group: Screen-by-screen app features. */
.app-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.app-feature-grid article > div {
  height: 360px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #c7ddd7;
  margin-bottom: 26px;
}
.app-feature-grid img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.app-feature-grid h3 {
  font-size: 23px;
}
.app-feature-grid p {
  font-size: 14px;
  color: var(--muted);
  margin-top: 15px;
}
/* Viewport (max-width: 1000px): component adjustments at this breakpoint. */
@media (max-width: 1000px) {
  .app-hero-screens {
    min-height: 370px;
  }
  .app-hero-screens::before {
    width: 340px;
    height: 340px;
  }
  .app-feature-grid {
    gap: 25px;
  }
}
/* Viewport (max-width: 700px): component adjustments at this breakpoint. */
@media (max-width: 700px) {
  .app-hero .split {
    grid-template-columns: 1fr;
  }
  .app-hero {
    padding: 45px 0;
  }
  .app-hero-screens {
    min-height: 330px;
    margin-top: 10px;
  }
  .app-hero-screens .app-phone-frame {
    width: 34%;
    border-radius: 20px;
  }
  .app-hero-screens .app-phone-frame:nth-child(2) {
    width: 42%;
  }
  .app-feature-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .app-feature-grid article > div {
    height: 300px;
  }
  .app-feature-grid img {
    height: 100%;
  }
  .app-feature-grid article {
    text-align: center;
  }
  .app-intro {
    text-align: left;
  }
  .app-intro .eyebrow {
    justify-content: flex-start;
  }
}

/* Device frame keeps genuine screenshots readable without cropping. */
.app-feature-grid img {
  width: auto;
  max-width: 100%;
  height: 100%;
  border: 7px solid #22272a;
  border-radius: 28px;
  box-shadow: 0 12px 24px #262d6020;
  background: #22272a;
}

/* Store links follow the app FAQs and wrap comfortably on smaller screens. */
.app-store-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.app-store-actions .button { text-align: center; }
@media (max-width: 600px) {
  .app-store-actions { flex-direction: column; }
  .app-store-actions .button { width: 100%; }
}

/* Official high-resolution badges use an equal 50px visual height.
   Google artwork includes transparent padding, kept outside the visible link. */
.app-store-actions { align-items: center; }
.app-store-actions .store-badge {
  position: relative;
  display: block;
  height: 50px;
  overflow: hidden;
  border-radius: 9px;
  flex: none;
}
.store-badge-apple { width: 149.6px; }
.store-badge-apple img { display: block; width: 100%; height: 100%; }
.store-badge-google { width: 169.2px; }
.store-badge-google img {
  position: absolute;
  width: 114.95%;
  max-width: none;
  height: auto;
  left: -7.47%;
  top: -25.3%;
}
.store-badge:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 5px; }
@media (max-width: 600px) {
  .app-store-actions { align-items: flex-start; }
}

/* Keep the product introduction and captions aligned with the screens. */
#inside-app { background: var(--tint); text-align: center; }
#inside-app :is(h2, h3, p) { text-align: center; margin-inline: auto; }
/* Override the shared heading alignment only within this centered section. */
#inside-app :is(h2, h3) { text-align: center !important; }
#inside-app .section-heading { display:block; text-align:center; margin-bottom:40px; }
#inside-app .section-heading .lead { max-width:760px; margin:20px auto 0; }
#inside-app .app-feature-grid article { text-align:center; }
#inside-app .app-feature-grid p { max-width:320px; margin:15px auto 0; }

#inside-app .app-feature-grid article > .app-phone-frame {
  display: block;
  width: 190px;
  max-width: 75%;
  height: auto;
  aspect-ratio: 1040 / 1977;
  padding: 0;
  margin: 0 auto 26px;
  border: 2px solid #dce1e8;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 15px 22px #262d601c;
  transform: none;
}
#inside-app .app-phone-frame img {
  border: 0;
  box-shadow: none;
  background: transparent;
}
#inside-app article:first-child .app-phone-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.livingwell-story .story-video {
  margin: 0;
  width: 100%;
  max-width: 560px;
  justify-self: end;
  background: rgba(255,255,255,.94);
  padding: 14px;
  border: 1px solid #e6e9f0;
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(38,45,96,.07);
  box-sizing: border-box;
}
.livingwell-story .story-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #171d28;
  border-radius: 16px;
}
.livingwell-story .story-video figcaption { padding: 0 8px 8px; margin-top: 16px; }
.livingwell-story .button {
  background: #191f4b;
  border-color: #191f4b;
  color: #fff;
  box-shadow: 0 2px 4px rgba(16,18,67,.16), 0 7px 18px rgba(16,18,67,.17);
}
.livingwell-story .button:hover { background: #10143b; border-color: #10143b; color: #fff; transform: none; }

/* Hide the captured iOS status indicators without cropping the app content. */
.app-hero-screens .app-phone-frame:nth-child(2)::before {
  content:"";
  position:absolute;
  z-index:1;
  top:5.3%;
  left:6%;
  width:88%;
  height:3.5%;
  background:linear-gradient(#ffe7e1,#ffe7e1) left center / 20% 100% no-repeat,
             linear-gradient(#ffe7e1,#ffe7e1) right center / 23% 100% no-repeat;
  pointer-events:none;
}

/* Show complete app screens and omit decorative iPhone home indicators. */
#inside-app .app-phone-frame::after { display:none; }
#inside-app .app-feature-grid article .app-phone-frame img { object-fit:contain; object-position:center; }
#inside-app article:first-child .app-phone-frame img {
  position:absolute;
  inset:2%;
  width:96%;
  height:96%;
  object-fit:contain;
  border-radius:24px;
}

/* Hide captured system status bars while preserving the complete app screens. */
#inside-app article:first-child .app-phone-frame::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  top: 7.3%;
  bottom: auto;
  left: 8%;
  width: 84%;
  height: 2.6%;
  border-radius: 0;
  background:
    linear-gradient(#ffe7e1, #ffe7e1) left / 20% 100% no-repeat,
    linear-gradient(#ffe7e1, #ffe7e1) right / 24% 100% no-repeat;
  pointer-events: none;
}
#inside-app article:last-child .app-phone-frame::before {
  z-index: 2;
}
#inside-app article:last-child .app-phone-frame::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  top: 3.5%;
  bottom: auto;
  left: 11%;
  width: 78%;
  height: 4.5%;
  border-radius: 0;
  background: #efefbd;
  pointer-events: none;
}

/* Keep the app introduction comfortably within short laptop viewports. */
@media (min-width: 1000px) and (max-height: 900px) {
  .app-hero { padding-block: 36px; }
  .app-hero h1 { font-size: clamp(40px, 4vw, 56px); }
  .app-hero-screens { width: 100%; max-width: 510px; min-height: 0; margin-inline: auto; padding-block: 24px; }
}

/* A clean daily screen uses the same single white frame as its neighbours. */
:is(.app-hero-screens, #inside-app) .app-phone-frame:has(img[src$="app-daily-enhanced.png"]) {
  aspect-ratio:1040 / 1977;
  padding:0;
}
:is(.app-hero-screens, #inside-app) .app-phone-frame img[src$="app-daily-enhanced.png"] {
  position:absolute;
  inset:2.5% 5% 3%;
  display:block;
  width:90%;
  height:94.5%;
  object-fit:cover;
  object-position:center top;
  border-radius:23px 23px 18px 18px;
  transform:none;
}
:is(.app-hero-screens, #inside-app) .app-phone-frame:has(img[src$="app-daily-enhanced.png"])::before {
  content:"";
  position:absolute;
  z-index:1;
  top:1%;
  left:23%;
  width:54%;
  height:6%;
  border-radius:0 0 13px 13px;
  background:linear-gradient(#e9edf3,#e9edf3) center 45% / 25% 3px no-repeat, #fff;
  pointer-events:none;
}
:is(.app-hero-screens, #inside-app) .app-phone-frame:has(img[src$="app-daily-enhanced.png"])::after { display:none; }

/* Use the landing-page device treatment for every app-page screen. */
body.page-living-well main :is(.app-hero-screens, #inside-app) .app-phone-frame {
  aspect-ratio:473 / 1024; padding:6px; border:2px solid #94877b;
  border-radius:36px; background:#171b1c; box-shadow:0 18px 35px #28204122;
}
body.page-living-well main :is(.app-hero-screens, #inside-app) .app-phone-frame::before,
body.page-living-well main :is(.app-hero-screens, #inside-app) .app-phone-frame::after { display:none; }
body.page-living-well main :is(.app-hero-screens, #inside-app) .app-phone-frame img {
  position:absolute; inset:6px; width:calc(100% - 12px); height:calc(100% - 12px);
  max-width:none; object-fit:cover; object-position:center top; border-radius:28px;
  transform:none; clip-path:none;
}
body.page-living-well main :is(.app-hero-screens, #inside-app) .app-phone-frame:has(img[src$="app-monitor-official.jpg"]) { overflow:hidden; }
body.page-living-well main :is(.app-hero-screens, #inside-app) .app-phone-frame img[src$="app-monitor-official.jpg"] {
  height:calc(107% - 12px); transform:translateY(-6.5%); object-fit:fill;
}
@media(min-width:768px) {
  .page-living-well #inside-app .section-heading h2 { max-width:none; width:100%; font-size:clamp(28px,3.6vw,48px); }
}

body.page-living-well main .app-phone-frame > .app-device-screen { position:absolute; inset:6px; padding:0; height:auto; overflow:hidden; border-radius:28px; background:#fff; }
body.page-living-well main :is(.app-hero-screens, #inside-app) .app-phone-frame .app-device-screen img { inset:0; width:100%; height:100%; border-radius:0; }
body.page-living-well main :is(.app-hero-screens, #inside-app) .app-phone-frame .app-device-screen img[src$="app-monitor-official.jpg"] { height:107%; transform:translateY(-6.5%); }

/* One precomposed image keeps frames and screens loading together. */
.app-hero-art { width:100%; min-width:0; }
.app-hero-art img { display:block; width:100%; height:auto; filter:drop-shadow(0 16px 18px #28204118); }