/* ─────────────────────────────────────────────────────────────────────────
   MindCare by Plum — plumhq.com/mindcare
   ─────────────────────────────────────────────────────────────────────────
   Sizes come from the Figma design (1366px wide) and are written in rem with
   1rem = design px / 10 at full size. The page runs at 80% of the design: the
   root tops out at 8px (so the layout stays 1093px wide, centred, on wider
   screens) and only shrinks with the viewport below ~1093px, exactly as if
   the design were viewed at 80% zoom. Below 900px the page restacks (see the end of the
   file) with the root back at 10px.

   Type: GT Alpina (Regular, Light Italic) for headings and display lines,
   Passenger Sans for everything else, IBM Plex Mono for the few typewriter
   labels. Tracking values were measured off the design's outlined text.

   Backgrounds: .mc-top uses the designer's hero image whole. The red and
   plum bands paint their solid colour in CSS and only use the designer's
   grainy edges as images (top and bottom), so a band can grow on a phone
   without the grain stretching. Each band paints the colours of the sections
   above and below it under its transparent edges, so the grain fades into
   the right colour.
   ───────────────────────────────────────────────────────────────────────── */

@font-face { font-family: 'Passenger Sans'; src: url('fonts/PassengerSans-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Passenger Sans'; src: url('fonts/PassengerSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Passenger Sans'; src: url('fonts/PassengerSans-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Passenger Sans'; src: url('fonts/PassengerSans-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
/* Light is only for the plumhq.com nav and footer; the page itself sets Passenger
   Sans in Regular (and Medium for a few labels).
   GT Alpina (Regular, Light, Light Italic) is declared in plum-chrome/chrome.css
   as 'Gt Alpina Standard' from the same files; neither face has a ₹ glyph, so
   the rupee sign falls through to the next serif in the stack. */

:root {
  --ink: #3A0E2B;          /* body text, dark bands */
  --plum: #571541;         /* secondary text, rules */
  --plum-mid: #852B7A;     /* top of the heading gradients */
  --pink: #FC80D9;
  --pink-soft: #FFADD1;
  --pink-pale: #FDAAE6;
  --coral: #FF4052;
  --cream: #FFFAF2;
  --peach: #FFEBDB;
  --lavender: #CAAFF6;
  --violet: #A166FF;
  --violet-soft: #B087F1;
  --maroon: #690727;
  --maroon-deep: #491236;
  --serif: 'Gt Alpina Standard', 'Times New Roman', Georgia, serif;
  --sans: 'Passenger Sans', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

/* Webflow's base stylesheet sets this globally and the plumhq.com nav and
   footer depend on it (the nav overflows phones without it). */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 10px; -webkit-text-size-adjust: 100%; }
@media (min-width: 900px) { html { font-size: min(8px, 0.73206vw); } }

body.mc {
  margin: 0;
  background: #FFFEFC;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Resets carry no specificity (:where), so every component rule wins. */
.mc main { display: block; overflow-x: clip; }
:where(.mc main) :where(h1, h2, h3, p, ul, ol, dl, dd, blockquote, figure, table) { margin: 0; }
:where(.mc main) :where(ul, ol) { padding: 0; list-style: none; }
:where(.mc main) :where(img, video, svg) { display: block; max-width: 100%; }
:where(.mc main) :where(img, video) { height: auto; }
.mc em { font-style: italic; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 2147483647; padding: .8rem 1.4rem; background: var(--cream); color: var(--ink); font: 500 14px/1.2 var(--sans); border-radius: 4px; }
.skip-link:focus { top: 1rem; }
.mc main a:focus-visible, .mc main button:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

.mc-wrap { width: 117.8rem; max-width: calc(100% - 4rem); margin-inline: auto; }

/* Display serif. Each heading sets its own size, line height and tracking. */
.mc-h { font-family: var(--serif); font-weight: 400; }
.mc-h em, .mc-word em, .mc-closing__title em { font-weight: 300; }
.mc-word { font-family: var(--serif); font-weight: 400; white-space: nowrap; }
.mc-body { font-size: max(15px, 2rem); line-height: 1.3; }

/* ─── Button ─────────────────────────────────────────────────────────── */
.mc-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6rem;
  box-sizing: border-box; width: 20.8rem; height: 4.4rem; min-height: 40px; padding: 0 2.6rem 0 2.4rem;
  background: var(--coral); color: var(--cream); border-radius: 4px;
  font: 500 max(12px, 1.4rem)/1 var(--sans); letter-spacing: .03em; text-transform: uppercase; text-decoration: none;
  transition: background-color .2s ease;
}
.mc-btn--wide { width: 22.3rem; }
.mc-btn__arrow { width: max(8px, 1rem); height: max(8px, 1rem); flex: none; transition: transform .2s ease; }
.mc-btn:hover { background: #E8323F; }
.mc-btn:hover .mc-btn__arrow { transform: translate(2px, -2px); }

/* ─── Hero ───────────────────────────────────────────────────────────── */
.mc-top {
  position: relative;
  /* The hero image is stretched taller than the design's 212.3rem so its
     white glow reaches past the logos and the button; the red band then rises
     over the pink below it. */
  min-height: 172rem;
  background: #F14D50 url('img/bg/hero.webp') center top / 100% 230rem no-repeat;
}
.mc-hero { display: flex; flex-direction: column; align-items: center; padding-top: 11.9rem; text-align: center; }
.mc-hero__rule { width: max(1px, .15rem); background: var(--plum); }
.mc-hero__rule--top { width: .2rem; height: 11.6rem; border-radius: 1px; background: linear-gradient(rgb(87 21 65 / 0) 24%, var(--plum)); }
.mc-hero__logo { width: 29rem; margin-top: 2.75rem; }
.mc-hero__logo svg { width: 100%; height: auto; }
.mc-hero__rule--short { height: 3.08rem; margin-top: 2.9rem; }
.mc-hero__title {
  max-width: 66rem; margin-top: 1.36rem; text-wrap: balance;
  font: 400 5.7rem/5.45rem var(--serif); letter-spacing: -.05em;
  /* The gradient only paints inside the box, and the tight leading lets the
     last line's descenders (the g in "matching") hang below it: pad the box
     down and pull the next element back up by the same amount. */
  padding-bottom: .2em; margin-bottom: -.2em;
  background: linear-gradient(var(--plum-mid), var(--ink)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mc-hero__title em { font-weight: 300; padding-right: .06em; }
.mc-hero__star { width: 2.46rem; height: 8.63rem; margin-top: 2.8rem; color: var(--plum); }
.mc-hero__lede { max-width: 60rem; margin-top: 2.9rem; font-size: max(16px, 2.4rem); line-height: 1.29; }
.mc-hero__lede + .mc-hero__lede { margin-top: 1em; }
.mc-hero__lede .mc-word { font-size: 1.15em; letter-spacing: -.03em; line-height: 1; }
/* The numbers and the client logos under them share one width: the numbers
   row sets it and the logos spread across it. */
.mc-hero__proof { display: flex; flex-direction: column; align-items: stretch; margin-top: 10rem; }
.mc-hero__stats { display: flex; align-items: center; justify-content: center; gap: 7.8rem; }
.mc-hero__stats li { display: flex; flex-direction: column; align-items: center; position: relative; }
.mc-hero__stats li + li::before { content: ''; position: absolute; left: -3.9rem; top: .5rem; height: 8.4rem; border-left: max(1px, .154rem) solid var(--plum); }
.mc-hero__stats strong {
  font: 400 5.9rem/1 var(--sans); letter-spacing: -.025em;
  background: linear-gradient(var(--plum-mid), var(--ink)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mc-hero__stats span { margin-top: 1rem; font-size: max(14px, 2rem); line-height: 1.3; }
.mc-hero__logos { display: flex; align-items: center; justify-content: space-between; margin-top: 7rem; }
.mc-logo { display: block; color: var(--ink); }
.mc-logo svg { height: 100%; width: auto; }
/* Heights keep the logo files' own proportions to each other. */
.mc-logo--cred { height: 4.7rem; }
.mc-logo--wework { height: 3rem; }
.mc-logo--swiggy { height: 5.1rem; }
.mc-logo--zomato { height: 2.8rem; }
.mc-hero .mc-btn { margin-top: 9.8rem; }

/* ─── Bands ──────────────────────────────────────────────────────────── */
.mc-band {
  /* Edge heights follow the band's width up to the design canvas (136.6rem),
     then keep the design's proportion to the content. */
  --fade-top: calc(min(100vw, 136.6rem) * var(--top));
  --fade-bot: calc(min(100vw, 136.6rem) * var(--bot));
  position: relative; isolation: isolate; display: flow-root; color: var(--cream);
  background:
    var(--top-img) center top / 100% var(--fade-top) no-repeat,
    var(--bot-img) center bottom / 100% var(--fade-bot) no-repeat,
    linear-gradient(var(--band), var(--band)) 0 calc(var(--fade-top) - 1px) / 100% calc(100% - var(--fade-top) - var(--fade-bot) + 2px) no-repeat,
    linear-gradient(var(--above) 50%, var(--below) 50%);
}
/* --top / --bot: edge heights as a fraction of the width, from src/lib/bands.json
   (written by scripts/prepare-assets.mjs when it cuts the edges). */
.mc-band--red { --band: #FF4052; --top: .1674; --bot: .1279; --top-img: url('img/bg/red-top.webp'); --bot-img: url('img/bg/red-bottom.webp'); --above: transparent; --below: #FFFEFC; }
.mc-band--dark-a { --band: #3A0E2B; --top: .1406; --bot: .1718; --top-img: url('img/bg/dark-a-top.webp'); --bot-img: url('img/bg/dark-a-bottom.webp'); --above: #FFF4EB; --below: #FFFFFE; }
.mc-band--dark-c { --band: #3A0E2B; --top: .1518; --bot: .162; --top-img: url('img/bg/dark-c-top.webp'); --bot-img: url('img/bg/dark-c-bottom.webp'); --above: #FCF2E8; --below: #FCF4EC; }
/* The dot grid printed on two of the plum bands. */
.mc-dots::before {
  content: ''; position: absolute; z-index: -1; left: 0; right: 0;
  top: calc(var(--fade-top) * .6); bottom: calc(var(--fade-bot) * .55);
  background: radial-gradient(circle, #733C61 .1rem, transparent .115rem) center top / 2.3rem 2.3rem;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}

/* ─── Hidden cost (red) ──────────────────────────────────────────────── */
/* The red band rises over the bottom of the hero by exactly the height of its
   curved, grainy top edge, so the edge always reads against the hero's pink
   and coral (never against the page behind), as in the design. */
.mc-band--red { margin-top: calc(-1 * var(--fade-top)); padding-bottom: calc(var(--fade-bot) - 1rem); }
.mc-cost__grid { display: grid; grid-template-columns: 54.6rem 1fr; align-items: start; margin-top: calc(var(--fade-top) - 6.9rem); }
.mc-cost__art { width: 38.8rem; margin-left: 3rem; }
.mc-cost__copy { padding-top: 4.6rem; }
.mc-cost__title { font-size: 6.8rem; line-height: 6.7rem; letter-spacing: -.06em; max-width: 56rem; }
.mc-cost .mc-body { max-width: 59.2rem; margin-top: 5rem; }

.mc-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.mc-table th, .mc-table td { text-align: left; vertical-align: middle; font-weight: 400; }
.mc-table thead th { height: 7.53rem; box-sizing: border-box; padding: 0 2.2rem; font: 500 max(13px, 2.2rem)/1.2 var(--mono); letter-spacing: -.04em; }
.mc-table tbody th, .mc-table tbody td { height: 10.81rem; box-sizing: border-box; padding: 1.2rem 2rem; font-size: max(14px, 2.3rem); font-weight: 500; line-height: 2.6rem; }
/* The frame: open on the left, rounded at the three outer corners. */
.mc-table thead :is(th, td) { border-top: 1px solid currentColor; }
.mc-table thead td:first-child { border-top: 0; }
.mc-table thead th:first-of-type { border-left: 1px solid currentColor; border-top-left-radius: 1.2rem; }
.mc-table thead th:last-child { border-right: 1px solid currentColor; border-top-right-radius: 1.2rem; }
.mc-table tbody :is(th, td) { border-top: 1px solid currentColor; }
.mc-table tbody tr:last-child :is(th, td) { border-bottom: 1px solid currentColor; }
.mc-table tbody :is(td, th + td) { border-left: 1px solid currentColor; }
.mc-table tbody td:last-child { border-right: 1px solid currentColor; }
.mc-table tbody tr:last-child td:last-child { border-bottom-right-radius: 1.2rem; }

.mc-table--cost { margin-top: 8.5rem; color: var(--cream); }
.mc-table--cost col:first-child, .mc-table--cost :is(thead td, tbody th) { width: 28.08rem; }
.mc-table--cost tbody th { padding-left: 1.85rem; font-size: max(14px, 2.4rem); letter-spacing: -.02em; }
.mc-table--cost tbody td:nth-child(2) { width: 44.8rem; }
.mc-table__impact, .mc-table__unit { display: block; }
.mc-table__unit { color: var(--pink-soft); padding-left: .7rem; }
.mc-cost__footnote { max-width: 56rem; margin: 7.7rem 0 0 54.6rem; font-size: max(15px, 2.4rem); line-height: 3.1rem; }

.mc-loop { padding-top: 7.6rem; }
/* Dashed rule between the hidden-cost and body-mind topics. */
.mc-loop__rule { height: 1px; margin-bottom: 7.6rem; background: repeating-linear-gradient(90deg, rgb(255 250 242 / .6) 0 .8rem, transparent .8rem 1.6rem); }
.mc-loop__grid { display: grid; grid-template-columns: 66.8rem 46.6rem; align-items: start; }
.mc-loop__title { font-size: 6.9rem; line-height: 6.9rem; letter-spacing: -.065em; max-width: 52rem; }
.mc-loop .mc-body { max-width: 56.2rem; margin-top: 4.9rem; }
.mc-loop__art { width: 46.6rem; margin-top: .4rem; }
.mc-loop__quote { max-width: 58rem; margin-top: 10.6rem; }
.mc-loop__quote::before { content: '\201D'; display: block; height: 6.9rem; font: 400 6.6rem/1 var(--serif); }
.mc-loop__quote p { font: 300 italic 4rem/4rem var(--serif); letter-spacing: -.018em; }
.mc-sources { position: relative; margin-top: 8.9rem; text-align: center; font-size: max(13px, 1.8rem); line-height: 2.3rem; }
.mc-brace { width: calc(100% + 3.2rem); max-width: none; height: 3.9rem; margin-left: -1.6rem; color: var(--cream); overflow: visible; }
.mc-sources p { margin-top: 2.2rem; }
.mc-sources p span { display: block; }

/* ─── 40% never return ───────────────────────────────────────────────── */
.mc-dropoff { display: flex; flex-direction: column; align-items: center; padding: 1.6rem 0 15rem; text-align: center; background: linear-gradient(#FFFEFC, #FFF4EB); }
.mc-dropoff__art { width: 38.8rem; }
.mc-dropoff__title { margin-top: 3rem; font-size: 5.25rem; line-height: 5rem; letter-spacing: -.056em; }
.mc-dropoff__em { color: var(--coral); }

/* ─── Why traditional programs fail ──────────────────────────────────── */
.mc-band--dark-a { padding: calc(var(--fade-top) + 4.6rem) 0 calc(var(--fade-bot) + 3.8rem); }
.mc-why { display: grid; grid-template-columns: 54.36rem 1fr; }
.mc-why__title { font-size: 5.6rem; line-height: 5.5rem; letter-spacing: -.03em; max-width: 40rem; }
.mc-why__copy { padding-top: .7rem; }
.mc-why .mc-body { max-width: 57rem; }
.mc-why__lead { margin-top: 4.8rem; color: var(--peach); font-size: max(14px, 2rem); line-height: 2.6rem; }
.mc-why__list { margin-top: 3.8rem; }
.mc-why__list li { display: grid; grid-template-columns: 5.36rem 1fr; }
.mc-why__list li + li { margin-top: 2.54rem; }
.mc-why__list li > div { padding-bottom: 2.26rem; border-bottom: 1px solid rgb(255 235 219 / .3); max-width: 53.6rem; }
.mc-why__list li:last-child > div { border-bottom: 0; padding-bottom: 0; }
.mc-why__num, .mc-why__list h3 { font: 400 max(14px, 2rem)/2.6rem var(--sans); }
.mc-why__list p { margin-top: .9rem; font-size: max(14px, 2rem); line-height: 2.6rem; opacity: .6; }
.mc-why__close { max-width: 58rem; margin-top: 5rem; color: var(--pink); font: 400 4rem/3.9rem var(--serif); letter-spacing: -.031em; }

/* ─── How MindCare measures therapists ───────────────────────────────── */
.mc-app { display: flex; flex-direction: column; align-items: center; padding-top: 14rem; text-align: center; background: #FFFFFE; }
.mc-app__effective { max-width: 76rem; }
.mc-app__effective p { font: 400 5.4rem/5.3rem var(--serif); letter-spacing: -.033em; }
.mc-app__effective p + p { margin-top: 4.4rem; }
/* "MindCare" in the logo's pink. */
.mc-app__effective .mc-word { color: var(--pink); letter-spacing: -.033em; }

/* ─── Steps ──────────────────────────────────────────────────────────── */
.mc-steps { display: grid; grid-template-columns: 59.32rem 1fr; padding-top: 19.7rem; }
.mc-steps__media { position: relative; width: 51.8rem; margin-left: .4rem; }
.mc-steps__card { width: 100%; border-radius: 2.3rem; }
.mc-steps__phone {
  position: absolute; left: 13.05rem; top: 8.4rem; width: 25.5rem; aspect-ratio: 255 / 552;
  border-radius: 2.7rem; overflow: hidden; background: #F7F2EE;
  box-shadow: 0 0 0 1rem rgb(204 177 214 / .4);
}
.mc-steps__phone::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.mc-steps__screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .35s ease; }
.mc-steps__screen.is-active { opacity: 1; }
.mc-steps__copy { padding-top: 2.35rem; }
.mc-steps__title { max-width: 47.5rem; color: var(--plum); font: 400 max(18px, 3rem)/3.2rem var(--sans); letter-spacing: -.025em; }
.mc-steps__icon { display: inline-block; width: 3.04rem; height: 3.04rem; margin-left: .6rem; vertical-align: -.5rem; border-radius: .7rem; }
.mc-steps__list { position: relative; margin-top: 5rem; border-left: 1px solid #C4B5BC; }
.mc-step { position: relative; padding: 0 0 0 1.6rem; opacity: .5; transition: opacity .3s ease; cursor: pointer; }
.mc-step:hover { opacity: .75; }
.mc-step.is-active { opacity: 1; }
.mc-step + .mc-step { margin-top: 1.75rem; }
.mc-step__head { display: flex; align-items: baseline; gap: 0; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.mc-step__num { width: 5.25rem; flex: none; color: var(--plum); font: 300 italic max(14px, 2.2rem)/2.6rem var(--serif); }
.mc-step__title { color: var(--pink); font: 400 max(15px, 2.2rem)/2.6rem var(--sans); }
.mc-step__body { max-width: 51rem; margin: 1rem 0 0 5.25rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgb(58 14 43 / .3); color: var(--plum); font-size: max(14px, 2rem); line-height: 2.6rem; }
.mc-step:last-child .mc-step__body { border-bottom: 0; padding-bottom: 0; }
/* The pink bar on the track fills with the step's video. */
.mc-step__bar { position: absolute; left: -.25rem; top: .2rem; width: .4rem; height: calc(100% - 2.6rem); pointer-events: none; }
.mc-step:last-child .mc-step__bar { height: 100%; }
.mc-step__bar span { display: block; width: 100%; height: 100%; border-radius: .2rem; background: var(--pink); transform-origin: top; transform: scaleY(0); }
.mc-step.is-active .mc-step__bar span { transform: scaleY(var(--progress, 0)); }
.mc-steps .mc-btn { margin: 3.8rem 0 0 -.8rem; }
/* The phone version of the steps (stacking cards); desktop keeps the tabs. */
.mc-scards { display: none; }

/* ─── Triage ─────────────────────────────────────────────────────────── */
.mc-triage { display: flex; justify-content: center; padding-top: 18.4rem; text-align: center; background: none; }
.mc-triage__copy p { max-width: 60rem; margin-inline: auto; font: 400 4rem/4rem var(--serif); letter-spacing: -.031em; }
.mc-triage__copy p + p { margin-top: 3.7rem; }
.mc-triage__strong { color: var(--violet); -webkit-text-stroke: .04rem currentColor; }

/* ─── How the matching works ─────────────────────────────────────────── */
.mc-matching { display: flex; flex-direction: column; align-items: center; padding-top: 19.3rem; text-align: center; }
.mc-matching__title { font-size: 5.4rem; line-height: 5.1rem; letter-spacing: -.04em; }
.mc-matching__title em { display: inline; }
.mc-matching__intro { max-width: 57rem; margin-top: 3.8rem; font-size: max(15px, 2.4rem); line-height: 3.1rem; }
.mc-matching__diagram { position: relative; width: 127.5rem; margin-top: .9rem; text-align: left; }
.mc-matching__bg { width: 100%; }
.mc-factor { position: absolute; color: var(--plum); }
.mc-factor h3 { font: 600 max(12px, 2.2rem)/2.6rem var(--sans); }
.mc-factor p { margin-top: 1.9rem; font: 400 max(11px, 1.9rem)/2.2rem var(--mono); letter-spacing: -.01em; }
/* Positions match the text in the designer's diagram (src/assets/
   matching-diagram.webp); the copy carries the design's line breaks, so it
   never re-wraps on the cards. */
.mc-factor { white-space: nowrap; }
.mc-factor--1 { left: 22.77rem; top: 13.83rem; }
.mc-factor--2 { left: 71.6rem; top: 13.83rem; }
.mc-factor--3 { left: 22.77rem; top: 41.03rem; }
.mc-factor--4 { left: 71.27rem; top: 40.83rem; }
.mc-matching .mc-btn { margin-top: -2.6rem; position: relative; }

/* ─── Complete care: the 360° ecosystem ──────────────────────────────── */
/* Follows the matching section directly: its cream fades in from the page
   white rather than starting on a hard edge. */
.mc-care { display: flex; flex-direction: column; align-items: center; padding-top: 18rem; text-align: center; background: linear-gradient(#FFFEFC, #FFFAF2 16rem, #FFFAF2 70%, #FFF6EE); }
.mc-care__title { color: var(--pink); font-size: 5.7rem; line-height: 5.1rem; letter-spacing: -.036em; }
.mc-care__lead { margin-top: 5.6rem; color: var(--maroon); font-size: max(14px, 2rem); line-height: 2.6rem; }
.mc-care__body { max-width: 53rem; margin-top: 2.6rem; color: var(--maroon); font-size: max(14px, 2rem); line-height: 2.6rem; }
.mc-eco { position: relative; width: 108.8rem; margin-top: 3.9rem; }
.mc-eco__bg { width: 100%; }
.mc-eco__center { position: absolute; left: 0; right: 0; top: 41.1rem; display: flex; flex-direction: column; align-items: center; color: var(--plum); }
.mc-eco__center > span:not(.mc-word) { font: 400 4.7rem/4.7rem var(--sans); letter-spacing: -.03em; }
.mc-eco__center .mc-word { margin: .5rem 0 -.2rem; font-size: 6.4rem; line-height: 6.2rem; letter-spacing: -.045em; }
.mc-eco__item { position: absolute; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); }
.mc-eco__icon, .mc-eco__ring { display: none; }
.mc-eco__item h3 { color: var(--maroon-deep); font: 400 3rem/3.2rem var(--serif); letter-spacing: -.04em; white-space: nowrap; }
.mc-eco__item p { margin-top: 1.4rem; color: var(--maroon); font-size: max(11px, 1.8rem); line-height: 2.3rem; }
.mc-eco__item--therapist { left: 54.23rem; top: 16.92rem; width: 27rem; }
.mc-eco__item--checks { left: 17.9rem; top: 44.92rem; width: 34rem; }
.mc-eco__item--support { left: 90.84rem; top: 46.32rem; width: 34rem; }
.mc-eco__item--physician { left: 34.24rem; top: 83.92rem; width: 32.5rem; }
.mc-eco__item--psychiatrist { left: 74.32rem; top: 84.12rem; width: 35rem; }
.mc-care .mc-btn { margin-top: 9.5rem; }

/* ─── Enterprise-grade clinical rigor ────────────────────────────────── */
.mc-rigor { padding: 21.9rem 0 8rem; background: linear-gradient(#FFF6EE, #FCF2E8); }
.mc-rigor__grid { display: grid; grid-template-columns: 52.4rem 1fr; }
.mc-rigor__intro { padding-left: 1.7rem; }
.mc-rigor__title { font-size: 4.6rem; line-height: 4.4rem; letter-spacing: -.044em; max-width: 44rem; }
.mc-rigor__body { max-width: 44rem; margin-top: 2.1rem; font-size: max(14px, 2rem); line-height: 2.6rem; }
.mc-rigor__art { width: 32.9rem; margin: -2.3rem 0 0 -5.8rem; }
/* Under the DPDP note in the privacy section (centred column). */
.mc-trust { display: flex; align-items: center; justify-content: space-between; width: min(57.8rem, 100%); margin-top: 7.8rem; }
.mc-trust__badge { width: auto; }
.mc-trust__badge--soc2-type-2 { height: 8rem; }
/* Multiply so the badge's light backing takes on the cream behind it. */
.mc-trust__badge--gdpr-ready { height: 10.2rem; mix-blend-mode: multiply; }
.mc-trust__badge--iso-27001 { height: 11.2rem; }
.mc-rigor__list > div { max-width: 57.8rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgb(58 14 43 / .3); }
.mc-rigor__list > div + div { padding-top: 2.15rem; }
.mc-rigor__list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.mc-rigor__list dt { color: var(--pink); font-size: max(15px, 2.3rem); line-height: 2.6rem; letter-spacing: -.02em; }
.mc-rigor__list dd { max-width: 51rem; margin: .9rem 0 0; color: var(--plum); font-size: max(14px, 2rem); line-height: 2.6rem; }

/* ─── Benchmarks ─────────────────────────────────────────────────────── */
.mc-band--dark-c { padding: calc(var(--fade-top) + 3.5rem) 0 calc(var(--fade-bot) + 7.1rem); }
.mc-bench { display: grid; grid-template-columns: 55.5rem 1fr; }
.mc-bench__title { font-size: 4.2rem; line-height: 4.2rem; letter-spacing: -.031em; max-width: 41rem; }
.mc-bench .mc-btn { margin-top: 4.1rem; }
.mc-bench__points { margin-top: .7rem; }
.mc-bench__points li { position: relative; max-width: 66rem; padding-left: 2.3rem; font-size: max(18px, 2.6rem); line-height: 3.4rem; }
.mc-bench__points li::before { content: '•'; position: absolute; left: 0; top: 0; }
.mc-bench__points li + li { margin-top: 3.4rem; }
.mc-bench__points span { display: block; color: var(--pink-pale); }

/* ─── Insight for HR, privacy for employees ──────────────────────────── */
.mc-privacy { display: flex; flex-direction: column; align-items: center; padding-bottom: 11.6rem; text-align: center; background: linear-gradient(#FCF4EC, #FFF8F1 60%, #FFFCF8); }
.mc-privacy__art { width: 52.1rem; margin: -9.2rem 0 0 -9.4rem; position: relative; }
.mc-privacy__title { position: relative; margin-top: -.6rem; color: var(--plum-mid); font-size: 4.6rem; line-height: 4.4rem; letter-spacing: -.049em; }
.mc-privacy__title .mc-em-insight { color: var(--violet); }
.mc-privacy__title .mc-em-privacy { color: var(--pink); }
/* A set width with fixed, equal columns keeps the divider on the centre line
   (the scroll wrapper otherwise shrinks a 50/50 auto table). */
.mc-privacy__table { width: 86.5rem; margin-top: 7.7rem; border-collapse: collapse; table-layout: fixed; }
.mc-privacy__table th, .mc-privacy__table td { width: 50%; padding: 0 3.05rem; font-weight: 400; vertical-align: middle; }
.mc-privacy__table :is(th, td):first-child { text-align: right; border-right: 1px solid rgb(87 21 65 / .45); }
.mc-privacy__table :is(th, td):last-child { text-align: left; }
.mc-privacy__table thead th { position: relative; height: 6rem; font-size: max(16px, 2.7rem); line-height: 3.2rem; letter-spacing: -.013em; }
.mc-privacy__table thead th::before { content: ''; position: absolute; z-index: -1; top: 50%; width: 47.5rem; height: 20rem; transform: translateY(-50%); background: center / 100% 100% no-repeat; }
.mc-privacy__table thead th:first-child { color: var(--violet-soft); }
.mc-privacy__table thead th:first-child::before { right: -3rem; background-image: url('img/highlight-hr.webp'); }
.mc-privacy__table thead th:last-child { color: var(--pink); }
.mc-privacy__table thead th:last-child::before { left: -3rem; background-image: url('img/highlight-private.webp'); }
.mc-privacy__table thead { position: relative; z-index: 0; }
.mc-privacy__table tbody td { height: 6.1rem; font-size: max(14px, 2.4rem); line-height: 3rem; letter-spacing: -.028em; background: linear-gradient(90deg, transparent, rgb(87 21 65 / .12) 50%, transparent) bottom / 100% 1px no-repeat; }
.mc-privacy__table tbody tr:last-child td { background: none; }
.mc-privacy__table tbody td:first-child { background-position: right bottom; }
.mc-privacy__note { max-width: 56.5rem; margin-top: 7.8rem; color: var(--plum); font: 400 2.7rem/2.5rem var(--serif); letter-spacing: -.05em; }

/* ─── Closing ────────────────────────────────────────────────────────── */
.mc-closing { background: linear-gradient(#FFFCF8, #FFFEFC); }
.mc-closing__stage { position: relative; width: 136.6rem; max-width: 100%; height: 81rem; margin-inline: auto; }
.mc-tile { position: absolute; left: calc(var(--x) * .1rem); top: calc(var(--y) * .1rem); width: calc(var(--w) * .1rem); height: calc(var(--h) * .1rem); object-fit: cover; }
.mc-closing__copy { position: absolute; left: 0; right: 0; top: 29.6rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mc-closing__title { font: 400 5.65rem/6.4rem var(--serif); letter-spacing: -.04em; }
.mc-closing__title .mc-closing__logo { display: block; width: 32rem; }
.mc-closing__title .mc-closing__logo svg { width: 100%; height: auto; }
.mc-closing__body { margin-top: 2.4rem; color: var(--maroon); font-size: max(15px, 2rem); line-height: 2.6rem; }
.mc-closing .mc-btn { margin-top: 6.6rem; }

/* ─── FAQs (the plumhq.com/telehealth pattern) ───────────────────────── */
.mc-faq { padding-bottom: 11.2rem; background: #FFFEFC; interpolate-size: allow-keywords; }
.mc-faq__grid { display: grid; grid-template-columns: 54.36rem 1fr; align-items: start; padding-top: 11.2rem; border-top: 1px solid rgb(43 11 33 / .2); }
/* Closed questions are muted with light rules; the open one goes full
   strength with a dark rule under its answer. The first question lines up
   with the top of the heading. */
.mc-faq__title { font-size: 5.4rem; line-height: 5.6rem; letter-spacing: -.03em; }
.mc-faq__list { display: flex; flex-direction: column; }
.mc-faq__item { border-bottom: 1px solid #C4C2C0; transition: border-color .25s ease; }
.mc-faq__item[open] { border-bottom-color: #3E3138; }
.mc-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 3.6rem 0 2rem; cursor: pointer; list-style: none; }
.mc-faq__item:first-child summary { padding-top: .2rem; }
.mc-faq__item summary::-webkit-details-marker { display: none; }
.mc-faq__item summary:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }
.mc-faq__q { color: #514349; font: 400 max(14px, 2.25rem)/1.2 var(--sans); transition: color .25s ease; }
.mc-faq__item[open] .mc-faq__q, .mc-faq__item summary:hover .mc-faq__q { color: #2B0B21; }
.mc-faq__icon { position: relative; flex: none; width: 13px; height: 13px; }
.mc-faq__icon::before, .mc-faq__icon::after { content: ''; position: absolute; background: #2B0B21; transition: transform .25s ease; }
.mc-faq__icon::before { left: 0; top: 6px; width: 13px; height: 1px; }
.mc-faq__icon::after { left: 6px; top: 0; width: 1px; height: 13px; }
.mc-faq__item[open] .mc-faq__icon::after { transform: rotate(90deg); }
.mc-faq__a { max-width: 64rem; margin: 0; padding: 0 4rem 3.6rem 0; color: #706264; font-size: max(14px, 1.95rem); line-height: 1.45; }
/* Answers slide open where the browser can animate <details>; elsewhere they
   simply open. */
.mc-faq__item::details-content { height: 0; overflow: clip; transition: height .3s ease, content-visibility .3s allow-discrete; }
.mc-faq__item[open]::details-content { height: auto; }

/* ─── Motion preferences ─────────────────────────────────────────────── */
/* ─── Fade into view (marked by public/mindcare.js) ──────────────────── */
/* The page stays hidden until the script has marked the blocks, so nothing
   flashes before fading in (the head script lifts this after 3 s if needed). */
.mc-reveal:not(.mc-reveal--ready) main { opacity: 0; }
.mc-reveal [data-reveal] {
  opacity: 0; transform: translateY(2.4rem);
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.mc-reveal [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mc-btn, .mc-btn__arrow, .mc-step, .mc-steps__screen, .mc-faq__icon::after, .mc-faq__item::details-content, .mc-faq__item, .mc-faq__q { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   PHONES AND SMALL TABLETS (< 900px): one column, root back at 10px.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 899.98px) {
  .mc-wrap { width: auto; max-width: none; margin-inline: 2rem; }
  .mc-btn, .mc-btn--wide { width: auto; min-width: 20rem; height: 4.8rem; font-size: 1.4rem; }

  /* Hero */
  /* Room at the foot of the hero for the red band's top edge to rise into.
     The image runs past the bottom, as on desktop, so the white glow reaches
     the logos. */
  .mc-top { min-height: 0; padding-bottom: calc(100vw * .1674 * 1.6 + 1rem); background-size: 100% 145%; }
  .mc-hero { padding: 9.6rem 2rem 0; }
  .mc-hero__rule--top { height: 6rem; }
  .mc-hero__logo { width: 20rem; margin-top: 2rem; }
  .mc-hero__rule--short { height: 2.4rem; margin-top: 2rem; }
  .mc-hero__title { max-width: 32rem; margin-top: 1.4rem; font-size: 4rem; line-height: 4rem; }
  .mc-hero__title br { display: none; }
  .mc-hero__star { width: 1.8rem; height: 6rem; margin-top: 2rem; }
  .mc-hero__lede { margin-top: 2.4rem; font-size: 1.7rem; line-height: 1.4; }
  /* Four stats don't fit one row on a phone: two by two, with the divider
     between the columns only. */
  .mc-hero__proof { margin-top: 4.8rem; }
  .mc-hero__stats { display: grid; grid-template-columns: repeat(2, auto); gap: 3.2rem 4.8rem; }
  .mc-hero__stats li + li::before { left: -2.4rem; top: .2rem; height: 6.4rem; border-left-width: 1px; }
  .mc-hero__stats li:nth-child(odd)::before { content: none; }
  .mc-hero__stats strong { font-size: 3rem; white-space: nowrap; }
  .mc-hero__stats span { margin-top: .6rem; font-size: 1.3rem; }
  /* The logos follow the numbers' two columns. */
  .mc-hero__logos { display: grid; grid-template-columns: 1fr 1fr; place-items: center; gap: 2.4rem 4.8rem; margin-top: 4rem; }
  .mc-logo--cred { height: 3rem; } .mc-logo--wework { height: 1.9rem; } .mc-logo--swiggy { height: 3.2rem; } .mc-logo--zomato { height: 1.8rem; }
  .mc-hero .mc-btn { margin-top: 4.8rem; }

  /* Bands: same idea, edges sized to the phone. */
  .mc-band { --fade-top: calc(100vw * var(--top) * 1.6); --fade-bot: calc(100vw * var(--bot) * 1.6); }

  /* Hidden cost */
  .mc-band--red { padding-bottom: calc(var(--fade-bot) + 2rem); }
  /* On a phone the illustration starts below the grainy edge, on solid red. */
  .mc-cost__grid { grid-template-columns: 1fr; margin-top: calc(var(--fade-top) + 2.4rem); }
  .mc-cost__art { width: 22rem; margin: 0 auto; }
  .mc-cost__copy { padding-top: 3.2rem; }
  .mc-cost__title { font-size: 3.8rem; line-height: 3.9rem; letter-spacing: -.04em; }
  .mc-cost .mc-body, .mc-loop .mc-body { margin-top: 2rem; font-size: 1.6rem; line-height: 1.45; }

  /* Tables stay tables and scroll sideways, edge to edge, with a fade on
     the right in the section's colour while there's more to see
     (public/mindcare.js sets .is-end at the end, or when it all fits). */
  .mc-scroll { position: relative; margin-inline: -2rem; --scroll-fade: #FFFEFC; }
  .mc-band--red .mc-scroll { --scroll-fade: var(--band); }
  .mc-scroll__track { overflow-x: auto; padding-inline: 2rem; scrollbar-width: none; overscroll-behavior-x: contain; }
  .mc-scroll__track::-webkit-scrollbar { display: none; }
  .mc-scroll__track:focus-visible { outline: 2px solid var(--coral); outline-offset: -2px; }
  .mc-scroll::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 6.4rem; pointer-events: none; background: linear-gradient(90deg, transparent, var(--scroll-fade) 85%); transition: opacity .25s ease; }
  .mc-scroll.is-end::after { opacity: 0; }

  .mc-table--cost { width: 70rem; margin-top: 4rem; }
  .mc-table--cost :is(thead td, tbody th) { width: 15rem; }
  .mc-table--cost tbody td:nth-child(2) { width: 32rem; }
  .mc-table thead th { height: 4.8rem; padding: 0 1.4rem; font-size: 1.3rem; letter-spacing: -.02em; }
  .mc-table tbody :is(th, td) { height: auto; padding: 1.4rem; font-size: 1.5rem; line-height: 2.1rem; }
  .mc-table--cost tbody th { padding-left: 1.4rem; font-size: 1.6rem; }
  .mc-table__unit { padding-left: 0; }
  .mc-cost__footnote { margin: 3.2rem 0 0; font-size: 1.7rem; line-height: 2.4rem; }

  .mc-loop { padding-top: 4rem; }
  .mc-loop__rule { margin-bottom: 4rem; }
  .mc-loop__grid { grid-template-columns: 1fr; }
  .mc-loop__title { font-size: 3.8rem; line-height: 4rem; letter-spacing: -.04em; }
  /* On a phone the artwork leads, above the title (as the hidden-cost art does). */
  .mc-loop__art { width: 24rem; margin: 0 auto 3.2rem; order: -1; }
  .mc-loop__quote { margin-top: 4rem; }
  .mc-loop__quote::before { height: 2.6rem; font-size: 4.6rem; }
  .mc-loop__quote p { font-size: 2.6rem; line-height: 3rem; }
  .mc-sources { margin-top: 4.8rem; font-size: 1.3rem; line-height: 1.9rem; }
  .mc-brace { width: 100%; margin-left: 0; height: 2.4rem; }

  .mc-dropoff { padding: 2rem 2rem 10rem; }
  .mc-dropoff__art { width: 26rem; }
  /* The designed line breaks stay, so the coral line sits on its own as on desktop. */
  .mc-dropoff__title { font-size: 3.2rem; line-height: 3.4rem; letter-spacing: -.04em; }

  /* Why traditional programs fail */
  .mc-band--dark-a { padding: calc(var(--fade-top) + 2rem) 0 calc(var(--fade-bot) + 2rem); }
  .mc-why { grid-template-columns: 1fr; }
  .mc-why__title { font-size: 3.8rem; line-height: 4rem; }
  .mc-why__copy { padding-top: 2.4rem; }
  .mc-why .mc-body, .mc-why__lead, .mc-why__list p, .mc-why__num, .mc-why__list h3 { font-size: 1.6rem; line-height: 2.3rem; }
  .mc-why__list li { grid-template-columns: 4rem 1fr; }
  .mc-why__close { font-size: 2.8rem; line-height: 3.1rem; }

  /* App + steps */
  .mc-app { padding: 8rem 2rem 0; }
  .mc-app__effective p { font-size: 3.2rem; line-height: 3.5rem; }
  .mc-app__effective p + p { margin-top: 2.8rem; }

  .mc-steps { grid-template-columns: 1fr; padding-top: 8rem; }
  .mc-steps__media { width: min(100%, 34rem); margin: 0 auto; }
  .mc-steps__phone { left: 25.2%; top: 10.9%; width: 49.2%; box-shadow: 0 0 0 .6rem rgb(204 177 214 / .4); border-radius: 1.8rem; }
  .mc-steps__copy { padding-top: 4rem; }
  /* Set in the serif like the page's other section titles; the app icon
     only reads at desktop size. */
  .mc-steps__title { font: 400 3.2rem/3.4rem var(--serif); letter-spacing: -.035em; text-wrap: balance; }
  .mc-steps__icon { display: none; }
  .mc-steps__list { margin-top: 3.2rem; }
  .mc-step__num { width: 4rem; font-size: 1.8rem; }
  .mc-step__title { font-size: 1.8rem; line-height: 2.4rem; }
  .mc-step__body { margin-left: 4rem; font-size: 1.6rem; line-height: 2.3rem; }
  .mc-steps .mc-btn { display: flex; width: fit-content; margin: 3.2rem auto 0; }

  /* Steps as cards: each step with its own screen. Each card sticks just
     under the 70px navbar, a little lower than the one before, so the next
     slides up over it and the earlier cards' top edges stay in view. */
  .mc-steps__media, .mc-steps__list { display: none; }
  .mc-scards { display: block; margin-top: 3.2rem; }
  /* public/mindcare.js shrinks and blurs a card (--back, 0–1) as the next
     one slides over it. */
  .mc-scard {
    position: sticky; top: calc(8.2rem + var(--i) * 1.4rem);
    padding: 2.4rem 2rem 2rem; background: #FFFFFF; border: 1px solid rgb(196 183 191 / .4); border-radius: 1.6rem;
    transform-origin: 50% 0; transform: scale(calc(1 - var(--back, 0) * .08)); filter: blur(calc(var(--back, 0) * 3px));
  }
  .mc-scard + .mc-scard { margin-top: 3.2rem; }
  .mc-scard__head { display: flex; align-items: baseline; font-weight: 400; }
  .mc-scard__head .mc-step__num { width: 3.6rem; }
  .mc-scard__body { margin: .6rem 0 0 3.6rem; color: var(--plum); font-size: 1.4rem; line-height: 1.9rem; }
  /* A stuck card taller than the screen would never show its foot, so the
     phone panel (518×768) is capped by the screen height as well as width;
     34rem covers the navbar, the stack offsets and the step's text.
     The pink backdrop is cropped close round the phone (20% each side, 7%
     of the width above and below), so the phone is as large as it can be. */
  .mc-scard__media { position: relative; width: min(100%, 34rem, (100svh - 34rem) * .694); aspect-ratio: 1 / 1.44; margin: 2rem auto 0; overflow: hidden; border-radius: 1rem; }
  .mc-scard__media .mc-steps__card { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
  .mc-scard__media .mc-steps__phone { left: 20%; top: 4.86%; width: 60%; }
  .mc-scard__screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }

  .mc-triage { padding-top: 10rem; }
  .mc-triage__copy p { font-size: 2.6rem; line-height: 3rem; }
  .mc-triage__copy p + p { margin-top: 2.4rem; }

  /* Matching: the diagram becomes four cards. */
  .mc-matching { padding: 10rem 2rem 0; }
  .mc-matching__title { font-size: 3.8rem; line-height: 4rem; }
  .mc-matching__intro { margin-top: 2rem; font-size: 1.7rem; line-height: 2.4rem; }
  .mc-matching__diagram { width: 100%; margin-top: 3.2rem; }
  .mc-matching__bg { display: none; }
  .mc-matching__factors { display: grid; gap: 1.2rem; }
  .mc-factor { position: static; width: auto !important; padding: 2rem; border-radius: 2rem; white-space: normal; }
  .mc-factor br { display: none; }
  .mc-factor--1 { background: #DBE0FF; } .mc-factor--2 { background: #F3E0FF; } .mc-factor--3 { background: #FFD7F8; } .mc-factor--4 { background: #FFDFDF; }
  .mc-factor h3 { font-size: 1.8rem; line-height: 2.4rem; }
  .mc-factor p { margin-top: 1rem; font-size: 1.5rem; line-height: 2rem; }
  .mc-matching .mc-btn { margin-top: 3.2rem; }

  /* The ecosystem: ring and centre kept, the five parts listed below. */
  .mc-care { padding: 10rem 2rem 0; }
  .mc-care__title { font-size: 3.8rem; line-height: 4rem; }
  .mc-care__lead { margin-top: 3.2rem; font-size: 1.6rem; }
  .mc-care__body { font-size: 1.6rem; line-height: 2.3rem; }
  .mc-eco { width: 100%; margin-top: 3.2rem; }
  .mc-eco__bg { width: 100%; max-width: 44rem; margin: 0 auto; }
  /* The ring image is 1088×981: the centre box matches it, so the text sits
     on the ring's centre. */
  .mc-eco__center { top: 0; height: calc(min(100vw - 4rem, 44rem) * 981 / 1088); justify-content: center; }
  /* The ring's icons are baked into the image and too small at this size:
     larger copies, cut from the same image, sit over them. Each is a 64px
     square of the 1088px artwork (x, y = its top-left corner). */
  .mc-eco__ring { display: block; position: absolute; top: 0; left: 50%; width: min(100vw - 4rem, 44rem); aspect-ratio: 1088 / 981; transform: translateX(-50%); pointer-events: none; }
  .mc-eco__dot {
    --d: 4.8rem; position: absolute; width: var(--d); height: var(--d); border-radius: 50%;
    left: calc((var(--x) + 32) / 1088 * 100% - var(--d) / 2); top: calc((var(--y) + 32) / 981 * 100% - var(--d) / 2);
    background: url('img/ecosystem.webp') no-repeat; background-size: calc(var(--d) * 17) calc(var(--d) * 981 / 64);
    background-position: calc(var(--d) * var(--x) / -64) calc(var(--d) * var(--y) / -64);
  }
  .mc-eco__dot--therapist { --x: 510; --y: 72; }
  .mc-eco__dot--checks { --x: 147; --y: 349; }
  .mc-eco__dot--support { --x: 876; --y: 364; }
  .mc-eco__dot--physician { --x: 309; --y: 742; }
  .mc-eco__dot--psychiatrist { --x: 711; --y: 742; }
  .mc-eco__center > span:not(.mc-word) { font-size: 2.2rem; line-height: 2.4rem; }
  .mc-eco__center .mc-word { font-size: 3rem; line-height: 3.2rem; }
  .mc-eco__items { display: grid; gap: 2.4rem; margin-top: 3.2rem; }
  .mc-eco__item { position: static; transform: none; width: auto !important; }
  .mc-eco__icon { display: block; width: 6.4rem; height: 6.4rem; margin-bottom: 1rem; border-radius: 50%; background: url('img/ecosystem.webp') no-repeat; background-size: 108.8rem 98.1rem; transform: scale(.85); }
  .mc-eco__item--therapist .mc-eco__icon { background-position: -51rem -7.2rem; }
  .mc-eco__item--checks .mc-eco__icon { background-position: -14.7rem -34.9rem; }
  .mc-eco__item--support .mc-eco__icon { background-position: -87.6rem -36.4rem; }
  .mc-eco__item--physician .mc-eco__icon { background-position: -30.9rem -74.2rem; }
  .mc-eco__item--psychiatrist .mc-eco__icon { background-position: -71.1rem -74.2rem; }
  .mc-eco__item h3 { font-size: 2.4rem; line-height: 2.8rem; white-space: normal; }
  .mc-eco__item p { margin-top: .8rem; font-size: 1.5rem; line-height: 2.1rem; }
  .mc-care .mc-btn { margin-top: 4rem; }

  .mc-rigor { padding: 10rem 0 6rem; }
  .mc-rigor__grid { grid-template-columns: 1fr; }
  .mc-table br { display: none; }
  .mc-rigor__intro { padding-left: 0; }
  .mc-rigor__title { font-size: 3.4rem; line-height: 3.6rem; }
  .mc-rigor__body { font-size: 1.6rem; line-height: 2.3rem; }
  .mc-rigor__art { width: 22rem; margin: 1.6rem auto 2.4rem; }
  .mc-trust { margin-top: 4rem; }
  .mc-trust__badge--soc2-type-2 { height: 5.4rem; }
  .mc-trust__badge--gdpr-ready { height: 6.8rem; }
  .mc-trust__badge--iso-27001 { height: 7.4rem; }
  .mc-rigor__list dt { font-size: 1.8rem; }
  .mc-rigor__list dd { font-size: 1.6rem; line-height: 2.3rem; }

  .mc-band--dark-c { padding: calc(var(--fade-top) + 2rem) 0 calc(var(--fade-bot) + 2rem); }
  .mc-bench { grid-template-columns: 1fr; }
  .mc-bench__title { font-size: 3.4rem; line-height: 3.6rem; }
  .mc-bench .mc-btn { margin-top: 2.4rem; }
  .mc-bench__data { margin-top: 4rem; }
  .mc-bench__points li { font-size: 2.1rem; line-height: 3rem; }

  .mc-privacy { padding: 0 2rem 4rem; }
  .mc-privacy__art { width: 30rem; margin: -6rem 0 0 -4rem; }
  .mc-privacy__title { font-size: 3rem; line-height: 3.4rem; }
  .mc-privacy__title br { display: none; }
  /* The privacy table fits the screen width (no sideways scroll or fade). */
  .mc-scroll--privacy { align-self: stretch; margin-inline: 0; }
  .mc-scroll--privacy::after { content: none; }
  .mc-scroll--privacy .mc-scroll__track { overflow: visible; padding-inline: 0; }
  .mc-privacy__table { margin-top: 4.8rem; width: 100%; }
  .mc-privacy__table th, .mc-privacy__table td { padding: 0 1.2rem; }
  .mc-privacy__table thead th { height: 4.8rem; font-size: 1.7rem; line-height: 2.2rem; white-space: nowrap; }
  /* The outer edges need no padding, which gives "What remains private" the room for one line. */
  .mc-privacy__table :is(th, td):first-child { padding-left: 0; }
  .mc-privacy__table :is(th, td):last-child { padding-right: 0; }
  .mc-privacy__table thead th::before { width: 24rem; height: 10rem; }
  .mc-privacy__table tbody td { height: auto; padding-top: 1.2rem; padding-bottom: 1.2rem; font-size: 1.5rem; line-height: 2rem; letter-spacing: 0; }
  .mc-privacy__note { margin-top: 4rem; font-size: 2rem; line-height: 2.3rem; letter-spacing: -.03em; }

  .mc-faq { padding-bottom: 6rem; }
  .mc-faq__grid { grid-template-columns: 1fr; gap: 3.2rem; padding-top: 6rem; }
  .mc-faq__title { font-size: 3.4rem; line-height: 3.6rem; }
  .mc-faq__title br { display: none; }
  .mc-faq__item summary { padding: 2rem 0 1.4rem; }
  .mc-faq__item:first-child summary { padding-top: .4rem; }
  .mc-faq__q { font-size: 1.5rem; line-height: 1.3; }
  .mc-faq__a { margin-top: .4rem; padding: 0 0 2.4rem; font-size: 1.5rem; line-height: 1.5; }

  /* Closing collage, re-laid for a tall narrow stage. */
  .mc-closing__stage { width: 100%; height: 62rem; }
  .mc-tile { left: var(--mx) !important; top: var(--my) !important; width: var(--mw) !important; height: auto !important; aspect-ratio: var(--w) / var(--h); }
  .mc-tile--city { --mx: 46%; --my: 3rem; --mw: 4.6rem; }
  .mc-tile--colleagues { --mx: 3%; --my: 6rem; --mw: 13rem; }
  .mc-tile--smile { --mx: 64%; --my: 4rem; --mw: 13rem; }
  .mc-tile--hands { --mx: 6%; --my: 45rem; --mw: 12rem; }
  .mc-tile--doctor { --mx: 58%; --my: 43rem; --mw: 14rem; }
  .mc-tile--window { --mx: 42%; --my: 55rem; --mw: 4.6rem; }
  .mc-closing__copy { top: 23rem; padding: 0 2rem; }
  .mc-closing__title .mc-closing__logo { width: 22rem; }
  .mc-closing__body { margin-top: 1.2rem; font-size: 1.6rem; }
  .mc-closing .mc-btn { margin-top: 3.2rem; }
}

/* The 404 page reuses the hero. */
.mc-top--404 { min-height: 0; padding-bottom: 24rem; background-size: 100% 100%; }
.mc-top--404 .mc-hero { padding-top: 22rem; }