/* Device landing pages (pages/pnoe.htm, pages/visbody.htm). One layout, a colour theme per device:
   site fonts and the clinic's red buttons everywhere, the device's own look for the rest.
   A theme sets the accent colours, the page base and the hero background. */
.dv {
  --dv-ink: #1C1B1A;
  --dv-ink-2: #4A4744;
  --dv-dark: #161514;
  --dv-base: #FBFAF8;
  --dv-grey: #F2F1EF;
  --dv-accent: var(--navy);
  --dv-accent-lt: var(--blue-pale);
  --dv-accent-rgb: 81,166,212;
  --dv-hero-bg: var(--dv-grey);
  --dv-hero-bg-stacked: var(--dv-grey);
  --dv-line: rgba(28,27,26,.1);
  background: var(--dv-base); color: var(--dv-ink); font-family: var(--sans);
}
/* PNOĒ: charcoal, white and the warm sunset tones of its photography */
.dv--pnoe {
  --dv-base: #FBF5EF;
  --dv-accent: #B4561F;
  --dv-accent-lt: #F3A26A;
  --dv-accent-rgb: 243,162,106;
  --dv-hero-bg: linear-gradient(180deg, #E8CDCD 0%, #F1D1CA 28%, #F5CBB6 48%, #F8BF98 68%, #F6A674 88%, #F89B64 100%);
  --dv-hero-bg-stacked: #F8E6D8;
}
/* Visbody: clinical white and studio grey, with the brand's electric blue */
.dv--visbody {
  --dv-base: #F7F8FA;
  --dv-grey: #ECEEF1;
  --dv-accent: #0A5BD3;
  --dv-accent-lt: #7DB0FF;
  --dv-accent-rgb: 10,91,211;
  --dv-hero-bg: #E2E2E2;
  --dv-hero-bg-stacked: #E2E2E2;
}
.dv-wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; }
.dv-sec { padding: 104px 0; }
.dv-white { background: #fff; }
.dv-grey { background: var(--dv-grey); }
.dv-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--dv-accent); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.dv-eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.dv-h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -.01em; margin: 0 0 22px; text-wrap: balance; }
.dv-lead { font-size: 17.5px; line-height: 1.68; color: var(--dv-ink-2); margin: 0; text-wrap: pretty; }
.dv-note { font-size: 13.5px; color: var(--muted); margin: 26px 0 0; }
.dv-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 72px; align-items: end; margin-bottom: 56px; }
.dv-intro .dv-h2 { margin-bottom: 0; }
.dv-link { display: inline-block; margin-top: 26px; font-weight: 600; color: var(--navy); text-decoration: none; }
.dv-link:hover { color: var(--blue); }

/* buttons */
.dv-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.dv-btn, .dv-btn-ghost, .dv-btn-line { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; font-size: 16px; padding: 16px 26px; border-radius: 999px; text-decoration: none; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.dv-btn { background: var(--red); color: #fff !important; }
.dv-btn:hover { background: var(--red-dark); transform: translateY(-1px); }
.dv-btn-ghost { color: var(--dv-ink) !important; border: 1.5px solid rgba(28,27,26,.28); padding: 14.5px 24px; }
.dv-btn-ghost:hover { border-color: var(--dv-ink); }
.dv-btn-line { color: var(--dv-ink) !important; border: 1.5px solid var(--dv-line); padding: 14.5px 24px; }
.dv-btn-line:hover { border-color: var(--dv-ink); }

/* hero: the photo sits on the right and fades into a background painted in the photo's own sky
   colours, so the text on the left never runs over the face at any width */
.dv-hero { position: relative; overflow: hidden; background: var(--dv-hero-bg); min-height: clamp(560px, 76vh, 760px); display: flex; align-items: center; }
.dv-hero-img { position: absolute; top: 0; right: 0; width: 64%; height: 100%; object-fit: cover; object-position: 50% 30%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%); mask-image: linear-gradient(90deg, transparent 0%, #000 32%); }
.dv-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(251,241,233,.5) 0%, rgba(251,241,233,.25) 30%, rgba(251,241,233,0) 45%); pointer-events: none; }
.dv-hero-in { position: relative; z-index: 2; width: 100%; padding-top: 96px; padding-bottom: 96px; }
.dv-hero-copy { max-width: 520px; }
.dv-hero h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 4.8vw, 66px); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 24px; text-wrap: balance; }
.dv-hero h1 em { font-style: italic; color: var(--dv-accent); }
.dv-hero-lead { font-size: 18px; line-height: 1.62; color: #3B3835; margin: 0 0 34px; text-wrap: pretty; }
.dv-checks { list-style: none; padding: 0; margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 14.5px; font-weight: 500; color: #3B3835; }
.dv-checks li { display: flex; align-items: center; gap: 8px; }
.dv-checks svg, .dv-points svg, .dv-price li svg { color: var(--dv-accent); flex-shrink: 0; }

/* goals */
.dv-goals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.dv-goal { background: #fff; border: 1px solid var(--dv-line); border-radius: 22px; padding: 34px 32px 30px; display: flex; flex-direction: column; }
.dv-goal h3 { font-family: var(--serif); font-weight: 400; font-size: 27px; margin: 0 0 14px; }
.dv-goal p { font-size: 15.5px; line-height: 1.65; color: var(--dv-ink-2); margin: 0 0 30px; text-wrap: pretty; }
.dv-goal-stat { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--dv-line); display: flex; align-items: baseline; gap: 14px; }
.dv-goal-stat b { font-family: var(--serif); font-weight: 300; font-size: 52px; line-height: 1; letter-spacing: -.02em; color: var(--dv-accent); }
.dv-goal-stat span { font-size: 14.5px; color: var(--dv-ink-2); }

/* what we measure: the photo has a white background, so it sits on a white section */
.dv-metrics { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.dv-metrics-img img { width: 100%; height: auto; display: block; }
.dv-mlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 36px 0 0; }
.dv-mlist div { padding: 16px 0; border-top: 1px solid var(--dv-line); }
.dv-mlist dt { font-weight: 700; font-size: 15.5px; margin-bottom: 4px; }
.dv-mlist dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--dv-ink-2); }

/* device */
.dv-device { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.dv-device-img { position: relative; }
.dv-device-img::before { content: ""; position: absolute; inset: 8% 6%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--dv-accent-rgb),.35), rgba(var(--dv-accent-rgb),0) 68%); }
.dv-device-img img { position: relative; width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; }
.dv-points { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 14px; font-size: 16px; font-weight: 500; }
.dv-points li { display: flex; align-items: center; gap: 12px; }

/* manufacturer figures */
.dv-dark { background: var(--dv-dark); color: #F4F1EC; padding: 80px 0 64px; }
.dv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.dv-stats div { border-left: 2px solid var(--dv-accent-lt); padding-left: 24px; }
.dv-stats b { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 5vw, 64px); line-height: 1; letter-spacing: -.02em; margin-bottom: 12px; }
.dv-stats span { font-size: 15.5px; line-height: 1.5; color: rgba(244,241,236,.75); }
.dv-dark .dv-note { color: rgba(244,241,236,.5); margin-top: 40px; }

/* steps */
.dv-steps { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: none; }
.dv-steps li { border-top: 2px solid var(--dv-ink); padding-top: 24px; }
.dv-step-n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--dv-ink); color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 20px; }
.dv-steps h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 0 0 10px; }
.dv-steps p { font-size: 15.5px; line-height: 1.62; color: var(--dv-ink-2); margin: 0; text-wrap: pretty; }

/* prices */
.dv-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.dv-price { position: relative; background: var(--dv-base); border: 1px solid var(--dv-line); border-radius: 22px; padding: 36px 32px 32px; display: flex; flex-direction: column; }
.dv-price h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; margin: 0 0 22px; text-wrap: balance; }
.dv-amount { font-size: 18px; font-weight: 600; margin-bottom: 24px; }
.dv-amount b { font-family: var(--serif); font-weight: 300; font-size: 56px; line-height: 1; letter-spacing: -.02em; }
.dv-amount small { font-size: 14px; font-weight: 500; color: var(--muted); }
.dv-price ul { list-style: none; padding: 22px 0 0; margin: 0 0 30px; border-top: 1px solid var(--dv-line); display: grid; gap: 12px; font-size: 15.5px; }
.dv-price li { display: flex; align-items: center; gap: 10px; }
.dv-price .dv-btn, .dv-price .dv-btn-line { margin-top: auto; }
.dv-price.is-popular { background: var(--dv-dark); color: #F4F1EC; border-color: var(--dv-dark); }
.dv-price.is-popular .dv-amount small { color: rgba(244,241,236,.6); }
.dv-price.is-popular ul { border-color: rgba(255,255,255,.14); }
.dv-price.is-popular li svg { color: var(--dv-accent-lt); }
.dv-badge { position: absolute; top: -13px; left: 32px; background: var(--dv-accent-lt); color: var(--dv-dark); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.dv-prices-note { margin: 32px 0 0; font-size: 15.5px; color: var(--dv-ink-2); }
.dv-prices-note a { font-weight: 600; color: var(--navy); text-decoration: none; white-space: nowrap; }
.dv-prices-note a:hover { color: var(--blue); }

/* about */
.dv-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.dv-about-img img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; border-radius: 22px; display: block; }

/* faq */
.dv-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 72px; align-items: start; }
.dv-q { border-top: 1px solid var(--dv-line); }
.dv-q:last-child { border-bottom: 1px solid var(--dv-line); }
.dv-q summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-weight: 600; font-size: 17px; }
.dv-q summary::-webkit-details-marker { display: none; }
.dv-q summary span { font-size: 26px; font-weight: 300; color: var(--dv-accent); transition: transform .25s var(--ease); }
.dv-q[open] summary span { transform: rotate(45deg); }
.dv-q p { margin: 0 0 24px; font-size: 16px; line-height: 1.65; color: var(--dv-ink-2); max-width: 680px; }

/* closing call to action */
.dv-final { background: var(--dv-dark); color: #F4F1EC; padding: 112px 0; text-align: center; position: relative; overflow: hidden; }
.dv-final::before { content: ""; position: absolute; left: 50%; bottom: -320px; width: 900px; height: 520px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--dv-accent-rgb),.32), rgba(var(--dv-accent-rgb),0)); pointer-events: none; }
.dv-final .dv-wrap { position: relative; }
.dv-final h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(36px, 4.4vw, 58px); line-height: 1.08; letter-spacing: -.02em; margin: 0 auto 20px; max-width: 820px; text-wrap: balance; }
.dv-final h2 em { font-style: italic; color: var(--dv-accent-lt); }
.dv-final p { font-size: 18px; line-height: 1.6; color: rgba(244,241,236,.78); margin: 0 auto 36px; max-width: 600px; }
.dv-final .dv-ctas { justify-content: center; }
.dv-final .dv-btn-ghost { color: #F4F1EC !important; border-color: rgba(255,255,255,.3); }
.dv-final .dv-btn-ghost:hover { border-color: #fff; }

@media (max-width: 1020px) {
  .dv-intro, .dv-metrics, .dv-device, .dv-about, .dv-faq { grid-template-columns: minmax(0, 1fr); }
  .dv-intro { gap: 20px; margin-bottom: 40px; }
  .dv-metrics, .dv-device, .dv-about { gap: 40px; }
  .dv-goals, .dv-prices { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .dv-prices { gap: 32px; }
  .dv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
  .dv-device-img { order: -1; }
  .dv-device-img img { max-width: 420px; }
}
@media (max-width: 1020px) {
  /* stacked hero: the photo on top, the text below on the sky's colour */
  .dv-hero { display: block; min-height: 0; background: var(--dv-hero-bg-stacked); }
  .dv-hero::before { display: none; }
  .dv-hero-img { position: static; width: 100%; height: auto; aspect-ratio: 4/3; object-position: 58% 30%; -webkit-mask-image: none; mask-image: none; }
  .dv-hero-in { padding-top: 40px; padding-bottom: 64px; }
}
@media (max-width: 640px) {
  .dv-wrap { padding: 0 20px; }
  .dv-sec { padding: 72px 0; }
  .dv-mlist { grid-template-columns: minmax(0, 1fr); }
  .dv-stats { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .dv-steps { grid-template-columns: minmax(0, 1fr); }
  .dv-goal, .dv-price { padding: 30px 24px 26px; }
  .dv-final { padding: 80px 0; }
  .dv-ctas .dv-btn, .dv-ctas .dv-btn-ghost { flex: 1 1 100%; }
}

/* ---------- components used by the Visbody page ---------- */
/* studio hero: a product shot on the same grey as the section, shown whole on the right */
.dv-hero--studio::before { display: none; }
/* the box ends at the content edge (1280px wrap), not the window edge, so on wide screens the
   product stays next to the text instead of drifting to the far right */
.dv-hero--studio .dv-hero-img { right: max(0px, calc((100% - 1280px) / 2)); width: min(60%, 720px); object-fit: contain; object-position: 85% 50%; -webkit-mask-image: none; mask-image: none; padding: 32px 0; box-sizing: border-box; }
/* goal card with a "what we track" tag instead of a figure */
.dv-goal-tag { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--dv-line); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dv-accent); }
/* metrics next to a portrait photo */
.dv-metrics--photo { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.dv-metrics--photo .dv-metrics-img img { border-radius: 22px; aspect-ratio: 3/4; object-fit: cover; }
/* image cards (technology) */
.dv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.dv-card { background: #fff; border: 1px solid var(--dv-line); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; }
.dv-card-img { aspect-ratio: 536/479; background: var(--dv-grey); }
.dv-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv-card h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; margin: 26px 28px 10px; }
.dv-card p { font-size: 15.5px; line-height: 1.62; color: var(--dv-ink-2); margin: 0 28px 30px; text-wrap: pretty; }
/* reports */
.dv-reports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
.dv-report-img { background: #F2F2F2; border-radius: 22px; overflow: hidden; aspect-ratio: 1000/821; }
.dv-report-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv-report h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 24px 0 8px; }
.dv-report p { font-size: 15.5px; line-height: 1.62; color: var(--dv-ink-2); margin: 0; max-width: 520px; }
/* where to find it + link to the other device */
.dv-where { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 72px; align-items: end; }
.dv-where .dv-h2 { margin-bottom: 0; }
.dv-where .dv-lead { margin-bottom: 28px; }
.dv-cross { display: flex; align-items: center; gap: 24px; margin-top: 56px; padding: 18px 28px 18px 18px; background: var(--dv-base); border: 1px solid var(--dv-line); border-radius: 22px; color: var(--dv-ink); text-decoration: none; transition: border-color .25s var(--ease); }
.dv-cross:hover { border-color: var(--dv-ink); }
.dv-cross img { width: 84px; height: 84px; object-fit: contain; flex-shrink: 0; }
.dv-cross span { flex: 1; font-size: 16px; line-height: 1.55; color: var(--dv-ink-2); }
.dv-cross span b { color: var(--dv-ink); }
.dv-cross > b { font-size: 15px; color: var(--navy); white-space: nowrap; }

@media (max-width: 1020px) {
  .dv-hero--studio .dv-hero-img { width: 100%; object-position: 50% 50%; padding: 24px 0 0; }
  .dv-metrics--photo, .dv-where { grid-template-columns: minmax(0, 1fr); }
  .dv-metrics--photo .dv-metrics-img { max-width: 460px; }
  .dv-cards { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
}
@media (max-width: 640px) {
  .dv-reports { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .dv-cross { flex-wrap: wrap; padding: 20px; }
  .dv-cross img { width: 64px; height: 64px; }
}