/* home.css: the home page on Brand's system (system.css, draft 2.1; Function Health's grammar, founder 15 Oct: "Please use
   this as our design inspiration"). Loaded after zaha.css and system.css, for the home page only, until the whole site
   is rebuilt. Built beside Function's home, section by section: a light serif display that grows fluidly from 390 to
   1440, one italic phrase per heading in ink with the terra full stop, the terra pill as the one action, hairline grids,
   rounded media panels, motion of opacity and transform only, 150 to 260ms. Colours, faces, radii and the pill come
   from the --z-* tokens; sizes between the phone and desktop values are clamp()s of them. */

.z-light body { background: var(--z-bg); }

/* the menu's button: the terra pill, as on Function (the system retires the charcoal one; other pages follow at the rebuild) */
.z-light .nav-links .nav-cta { background: var(--z-action) !important; color: var(--z-on-action) !important; border-color: var(--z-action); }
.z-light .nav-links .nav-cta:hover { background: var(--z-action-hover) !important; color: var(--z-on-action) !important; }

/* sections part by space and tone, never a full-width rule */
.programs, .verse-band { border-top: 0; border-bottom: 0; }

/* type: the system's display, heading and body, fluid between Function's phone and desktop measures */
.hx2-title { font: 300 clamp(2.75rem, 1.775rem + 4vw, 5.375rem)/1.02 var(--z-serif); letter-spacing: -0.025em; color: var(--z-ink); margin: 0; text-wrap: balance; }
.hx2-title em, .sx-title em { font-style: italic; color: var(--z-ink); }
.hx2-title .nw { white-space: nowrap; }
.sx-title { font: 300 clamp(34px, 1.3rem + 3vw, 60px)/1.04 var(--z-serif); letter-spacing: -0.02em; color: var(--z-ink); margin: 0; text-wrap: balance; }
.sx-eyebrow { font: var(--z-t-label); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--z-ink-3); margin: 0 0 var(--z-gap-2); }
.sx-wrap { width: min(1180px, 100% - 2 * var(--z-margin)); margin-inline: auto; }
.sx-head { text-align: center; max-width: 760px; margin: 0 auto var(--z-gap-5); }

/* ---- the hero: How it works' panel (the founder, 16 Oct night: the pattern over the warm radial gradient inside the
   28px panel, with its settle motion; zaha.css §7b), holding the headline, one action and the providers' link on the
   left and the care stage (you, your two providers, the one plan; zaha.css §7c) on the right; Function's three stats
   under the panel. One column under 1024px, the stage beneath the words. ---- */
.hx2 { padding: calc(env(safe-area-inset-top, 0px) + 124px) 0 var(--z-gap-4); }
.hx2-wrap { width: min(1180px, 100% - 2 * var(--z-margin)); margin-inline: auto; }
.hx2-panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 2vw + 16px, 56px) clamp(22px, 3vw + 8px, 56px); }
.hx2-panel > * { position: relative; }
.hx2-title { font-size: clamp(2.75rem, 1.6rem + 3.3vw, 4.5rem); line-height: 1; }
.hx2-sub { font: 300 clamp(19px, 1rem + .6vw, 24px)/1.4 var(--z-serif); color: var(--z-ink-2); max-width: 26em; margin: var(--z-gap-3) 0 0; } /* the sub line of every panel hero: light serif, 19 to 24 (Brand, 17 Oct) */
.hx2-actions { margin-top: var(--z-gap-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--z-gap-2) var(--z-gap-3); }
.hx2-people { display: inline-flex; align-items: center; gap: 12px; min-height: var(--z-action-h); text-decoration: none; color: var(--z-ink); }
.hx2-people:focus-visible { outline: 2px solid var(--z-terra); outline-offset: 3px; border-radius: 999px; }
.hx2-faces { display: flex; }
.hx2-faces .hf { display: block; flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; margin-left: -12px; border: 2px solid #FBF3EA; background: var(--z-bg-deep); }
.hx2-faces .hf:first-child { margin-left: 0; }
.hx2-faces img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--pz, 1)); transform-origin: var(--po, 50% 30%); }
.hx2-cap { font: var(--z-t-strong); font-size: 15px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--z-dur-1) var(--z-ease); }
.hx2-people:hover .hx2-cap { text-decoration-color: currentColor; }
.hx2-stage { width: 100%; max-width: 520px; justify-self: center; }
/* The home's care stage (17 Oct refinement, the founder's brief): you at the top, your therapist and your spiritual advisor
   side by side beneath you, each with their own kind of care, and the two threads meeting in one care plan. The old
   stacked column (you, then therapist, then advisor, then plan) read as a hand-off from one to the next. Laid out in the
   normal flow (no absolute positions), so nothing can overlap at any width. The two cards are one size and one
   treatment, told apart by their icon, their title and the care each gives; the only colour difference is the key dot
   beside each card's care, repeated on the plan's two rows (17 Oct review: no dark pill against a pale one, nothing
   button-like). The two cards share their rows (subgrid), so a title or line that wraps in one keeps the other level. */
.ct-stage { display: grid; justify-items: center; }
.ct-you { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 18px 40px -18px rgba(90,50,30,.35); }
.ct-you__av { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; border: 2px solid var(--z-terra); background: var(--z-surface); color: var(--z-terra-ink); font: 400 17px/1 var(--z-serif); }
.ct-link { display: block; width: 100%; height: 32px; overflow: visible; }
.ct-link path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.ct-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); width: 100%; }
.ct-role { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 2px; margin-inline: 6px; justify-items: center; text-align: center; padding: 16px 12px 14px; border-radius: 20px; background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -18px rgba(90,50,30,.35); }
.ct-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--z-bg-warm); color: var(--z-ink); margin-bottom: 6px; }
.ct-av svg { width: 20px; height: 20px; }
.ct-role b { align-self: center; font: 600 15px/1.25 var(--z-sans); color: var(--z-ink); }
.ct-role i { align-self: center; font: 400 13px/1.35 var(--z-sans); font-style: normal; color: var(--z-ink); }
.ct-does { align-self: start; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); max-width: 100%; font: 500 13px/1.35 var(--z-sans); color: var(--z-ink); }
.ct-does .ct-key { display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: .02em; }
.ct-plan { width: calc(100% - 12px); box-sizing: border-box; border-radius: 20px; padding: 16px 20px 6px; background: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -18px rgba(90,50,30,.35); }
.ct-plan__k { margin: 0 0 8px; font: 400 21px/1.2 var(--z-serif); color: var(--z-ink); text-align: center; }
.ct-plan__row { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 9px 0; border-top: 1px solid var(--line-soft); font: 400 14px/1.4 var(--z-sans); color: var(--z-ink); }
.ct-plan__l { flex: none; width: 70px; font: 600 11.5px/1.4 var(--z-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--z-ink); }
.ct-key { flex: none; align-self: center; width: 10px; height: 10px; border-radius: 50%; background: var(--z-bg-warm); border: 1.5px solid var(--line-strong); }
.ct-key--b { background: var(--z-ink); border-color: var(--z-ink); }
@media (min-width: 1024px) { /* beside the headline the stage's words read at 14 and up (17 Oct review) */
  .ct-role { padding: 20px 14px 18px; }
  .ct-role b { font-size: 18px; }
  .ct-role i, .ct-does { font-size: 15px; }
  .ct-plan__k { font-size: 24px; }
  .ct-plan__row { font-size: 16px; }
  .ct-plan__l { width: 92px; font-size: 14px; letter-spacing: .06em; }
}
@media (max-width: 400px) {
  .ct-role { margin-inline: 4px; padding: 14px 8px 12px; }
  .ct-does .ct-short { display: none; } /* the care shortened to "Clinical" and "Spiritual" on a narrow phone, one line each, so the two cards end level */
  .ct-plan { width: calc(100% - 8px); padding-inline: 14px; }
  .ct-plan__row { flex-wrap: wrap; row-gap: 0; }
}
/* motion, once, under .js and only with motion allowed: the two providers settle together (the same moment, so neither
   reads as first), then the two threads draw into the plan. Translate and stroke only, never opacity: every word is
   readable from the first paint, and without the script or with reduced motion the stage is simply there. */
@media (prefers-reduced-motion: no-preference) {
  html.js .ct-role { animation: ct-settle 600ms var(--ease-out) 150ms both; }
  html.js .ct-plan { animation: ct-settle 600ms var(--ease-out) 650ms both; }
  html.js .ct-link--join path { stroke-dashoffset: 60; animation: ct-draw 500ms var(--ease-out) 450ms both; }
  @keyframes ct-settle { from { translate: 0 8px; } to { translate: 0 0; } }
  @keyframes ct-draw { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
}
/* the old stacked stage's height and stops stay in zaha.css §7c for How it works */
.hx2-stats { margin-top: var(--z-gap-3); padding-top: var(--z-gap-3); border-top: 1px solid var(--z-line); }
.hx2-stats dt { font-size: 15px; }
@media (max-width: 1023px) {
  .hx2-panel { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hx2-stage { max-width: 560px; justify-self: stretch; margin-inline: auto; }
}
@media (max-width: 900px) {
  .hx2-stats { grid-auto-flow: row; gap: var(--z-gap-2); }
  .hx2-stats div { border-left: 0; padding-left: 0; }
}
@media (max-width: 400px) { .hx2-people { flex-wrap: wrap; row-gap: 4px; } } /* at 320 the caption ran past the panel edge beside the six faces; it now drops under them */
@media (max-width: 560px) { .hx2 { padding-top: calc(env(safe-area-inset-top, 0px) + 112px); } .hx2-title .nw { white-space: normal; } .hx2-faces .hf { width: 40px; height: 40px; } }

/* ---- why: Function's comparison as two open columns parted by a hairline (Brand, 16 Oct: no cards, no shadows) ---- */
.struggle { background: var(--z-bg); border: 0; padding: calc(var(--z-gap-5) * 1.6) 0; }
.struggle .tc { max-width: 760px; margin: 0 auto; }
.struggle .sub { font: var(--z-t-body); font-size: 18px; color: var(--z-ink-2); margin-top: var(--z-gap-2); }
.cmp { max-width: 980px; margin: var(--z-gap-5) auto 0; border: 0; border-radius: 0; background: none; overflow: visible; gap: 0; align-items: start; }
.cmp-col, .cmp-col--zaha { padding: 0 clamp(24px, 4vw, 56px); background: none; border: 0; border-radius: 0; box-shadow: none; }
.cmp-col--zaha { border-left: 1px solid var(--z-line); }
.cmp-h { font: 300 30px/1.1 var(--z-serif); color: var(--z-ink-3); margin: 0 0 var(--z-gap-2); }
.cmp-col--zaha .cmp-h { color: var(--z-ink); }
.cmp-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font: var(--z-t-body); color: var(--z-ink-2); padding: var(--z-gap-2) 0; border-top: 1px solid var(--z-hair); }
.cmp-list li::before { content: ""; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; border: 1.5px solid var(--z-line); }
.cmp-col--zaha .cmp-list li { color: var(--z-ink); }
.cmp-col--zaha .cmp-list li::before { border: 0; background: var(--z-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF7F2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
@media (max-width: 640px) {
  .cmp { grid-template-columns: minmax(0, 1fr); }
  .cmp-col, .cmp-col--zaha { padding: 0; }
  .cmp-col--zaha { border-left: 0; border-top: 1px solid var(--z-line); margin-top: var(--z-gap-4); padding-top: var(--z-gap-4); }
}

/* ---- the care team: the three roles as open rows parted by hairlines, each with its small chip (Brand, 16 Oct: no
   filled panels holding cards) ---- */
.tm2 { padding: calc(var(--z-gap-5) * 1.6) 0; background: var(--z-bg); }
.tm2-cards { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--z-line); }
.tm2-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 300px); grid-template-areas: "h line vis" "role line vis"; /* no 01/02/03 column (the founder, 17 Oct) */
  column-gap: var(--z-gap-4); row-gap: 4px; align-items: center; padding: var(--z-gap-4) 0; border-top: 1px solid var(--z-line); }
.tm2-n { grid-area: n; align-self: start; font: var(--z-t-small); color: var(--z-ink-3); margin: 0; padding-top: 10px; }
.tm2-card h3 { grid-area: h; align-self: end; font: 300 clamp(28px, 1.2rem + 1vw, 36px)/1.1 var(--z-serif); color: var(--z-ink); margin: 0; }
.tm2-role { grid-area: role; align-self: start; font: var(--z-t-label); font-size: 14px; color: var(--z-ink-2); margin: 0; }
.tm2-card p:last-child { grid-area: line; font: var(--z-t-body); color: var(--z-ink-2); margin: 0; max-width: 32em; }
.tm2-vis { grid-area: vis; justify-self: end; }
.tm2-chip { box-sizing: border-box; width: 236px; display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: var(--z-r-action); background: var(--z-surface); border: 1px solid var(--z-line); }
.tm2-chip .av { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--z-bg-warm); color: var(--z-ink); font: 400 14px/1 var(--z-serif); border: 2px solid var(--z-surface); }
.tm2-chip .av.b { background: var(--z-ink); color: var(--z-on-action); }
.tm2-chip .av + .av { margin-left: -22px; }
.tm2-chip b { display: block; font: var(--z-t-strong); font-size: 14px; white-space: nowrap; }
.tm2-chip i { display: block; font: var(--z-t-small); font-style: normal; color: var(--z-ink-3); white-space: nowrap; }
@media (max-width: 900px) {
  .tm2-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "role" "line" "vis"; row-gap: 8px; }
  .tm2-card p:last-child { margin-top: 4px; }
  .tm2-vis { justify-self: start; margin-top: 8px; }
}

/* the providers: Function's portrait cards, real photographs */
.pv2-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--z-gap-2); margin: calc(var(--z-gap-5) * 1.4) 0 var(--z-gap-3); }
.pv2-h { font: 300 clamp(26px, 1.2rem + 1.2vw, 36px)/1.1 var(--z-serif); color: var(--z-ink); margin: 0; text-wrap: balance; }
.pv2-more { margin: 0; font: var(--z-t-body); }
.pv2-more a { color: var(--z-ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 560px) { .pv2-sep { display: none; } .pv2-more a { display: table; padding-block: 10px; } } /* one link a line on a phone, each a 44px tap target (17 Oct: they measured 24px) */
.pv2-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--z-gap-3); }
.pv2 { position: relative; display: grid; gap: 6px; align-content: start; }
.pv2-name::after { content: ""; position: absolute; inset: 0; } /* the whole card opens the profile, as on the providers page (Product, 17 Oct) */
/* The photographs are the 400px cream pass (people on cream): shown whole, centred, never enlarged past their size, on
   the warm panel ground (a touch shorter than square: the founder, 16 Oct); "darken" lets the panel replace the cream
   around each person, so no pale box or soft edge shows. The avatar zoom (--pz) is for the small circles only. */
.pv2-photo { display: grid; place-items: end center; aspect-ratio: 1 / .86; border-radius: var(--z-r-panel); overflow: hidden; background: var(--z-bg-warm); isolation: isolate; margin-bottom: var(--z-gap-1); }
.pv2-photo img { display: block; width: auto; height: 100%; max-height: 400px; max-width: 100%; object-fit: contain; object-position: 50% 100%; mix-blend-mode: darken; transition: transform var(--z-dur-2) var(--z-ease); transform-origin: 50% 100%; scale: var(--ph, 1); } /* --ph lifts a photo with more headroom so every crown meets the same line (Mariam, the founder, 17 Oct) */
@media (hover: hover) { .pv2:hover .pv2-photo img { transform: scale(1.02); } }
.pv2-role { font: var(--z-t-small); color: var(--z-ink-3); margin: 0; }
.pv2-name { font: 400 22px/1.2 var(--z-serif); color: var(--z-ink); text-decoration: none; }
.pv2-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.pv2-line { font: var(--z-t-body); font-size: 16px; line-height: 1.5; color: var(--z-ink-2); margin: 0; }
@media (max-width: 900px) { .pv2-grid { grid-template-columns: minmax(0, 1fr); } .pv2-photo { aspect-ratio: auto; height: 280px; } .pv2-line { font-size: 15px; } } /* three lines on a phone too (the founder, 16 Oct; Red Team measured four) */

/* ---- programs: Function's hairline category grid ---- */
.programs { padding: calc(var(--z-gap-5) * 1.6) 0; background: var(--z-bg); }
.programs .container { width: min(1180px, 100% - 2 * var(--z-margin)); max-width: none; padding-inline: 0; } /* the grid meets the page's edges, as the hero and the team do */
.programs .tc { max-width: 760px; margin: 0 auto; }
.program-grid { gap: 0; margin-top: var(--z-gap-5); border-top: 1px solid var(--z-hair); }
.p-card { background: transparent; border: 0; border-radius: 0; border-bottom: 1px solid var(--z-hair); padding: var(--z-gap-4) clamp(16px, 2.4vw, 36px) var(--z-gap-4); box-shadow: none; }
.program-grid .p-card:not(:nth-child(3n)) { border-right: 1px solid var(--z-hair); }
.p-card:hover { box-shadow: none; transform: none; background: var(--z-surface); }
.p-card h3 { font: 300 clamp(30px, 1.4rem + 1vw, 38px)/1.05 var(--z-serif); color: var(--z-ink); margin: 0 0 var(--z-gap-1); }
.p-card .p-tag { font: var(--z-t-label); font-size: 14px; color: var(--z-ink-2); }
.p-card .p-desc { font: var(--z-t-body); color: var(--z-ink-2); margin-top: var(--z-gap-2); }
.p-card .p-price { font: var(--z-t-small); color: var(--z-ink-3); margin-top: var(--z-gap-2); }
.p-card .btn { font: var(--z-t-strong); font-size: 15px; color: var(--z-ink); margin-top: var(--z-gap-2); }
.programs .p-help { font: var(--z-t-body); color: var(--z-ink-2); margin-top: var(--z-gap-4); }
@media (max-width: 900px) {
  .program-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .program-grid .p-card:not(:nth-child(3n)) { border-right: 0; }
  .program-grid .p-card:nth-child(odd) { border-right: 1px solid var(--z-hair); }
}
@media (max-width: 560px) { .program-grid { grid-template-columns: minmax(0, 1fr); } .program-grid .p-card:nth-child(odd) { border-right: 0; } }

/* ---- the waitlist: Function's membership card, the words beside the form ---- */
.form-section { padding: calc(var(--z-gap-5) * 1.6) 0; }
@media (min-width: 900px) {
  .form-section { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr; column-gap: var(--z-gap-5);
    width: min(1180px, 100% - 2 * var(--z-margin)); margin-inline: auto; align-items: start; }
  .form-section > .container { grid-column: 1; grid-row: 1; width: auto; text-align: left; padding: var(--z-gap-4) 0 0; }
  .form-section > .container .sub { margin-left: 0; }
  .form-section > .intake { grid-column: 2; grid-row: 1 / span 2; width: auto; margin: 0; }
  .form-section > .form-help { grid-column: 1; grid-row: 2; text-align: left; max-width: none; margin: var(--z-gap-3) 0 0; }
}
.form-section .sub { font: var(--z-t-body); font-size: 18px; color: var(--z-ink-2); }
.intake { background: var(--z-surface); border: 0; border-radius: var(--z-r-panel); box-shadow: var(--z-card-shadow); padding: clamp(24px, 3vw, 40px); }
.f-group > label { font: var(--z-t-label); font-size: 14px; color: var(--z-ink); }
.f-group input, .f-group select { min-height: var(--z-action-h); border: 1px solid var(--z-line); border-radius: var(--z-r-card); background: var(--z-bg); font: var(--z-t-body); color: var(--z-ink); }
.f-group input:focus, .f-group select:focus { border-color: var(--z-ink); }
.f-submit { display: flex; width: 100%; align-items: center; justify-content: center; min-height: var(--z-action-h); border: 1px solid var(--z-action); border-radius: var(--z-r-action);
  background: var(--z-action); color: var(--z-on-action); font: var(--z-t-strong); cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
@media (hover: hover) { .f-submit:hover { background: var(--z-action-hover); border-color: var(--z-action-hover); } }
.form-help { font: var(--z-t-small); color: var(--z-ink-3); }

/* ---- the verse: quiet, centred, its own band ---- */
.verse-band { background: var(--z-bg-warm); padding: calc(var(--z-gap-5) * 1.4) var(--z-margin); }
.verse-translation { font: var(--z-t-italic); font-size: clamp(22px, 1.1rem + .8vw, 30px); color: var(--z-ink); }

/* ---- questions: Function's hairline rows ---- */
#faq { padding: calc(var(--z-gap-5) * 1.6) 0; }
#faq .faq-list { max-width: 860px; margin: var(--z-gap-4) auto 0; }
.faq-item { border: 0; border-bottom: 1px solid var(--z-hair); border-radius: 0; background: transparent; }
.faq-q { font: 400 clamp(18px, 1rem + .35vw, 21px)/1.35 var(--z-sans); color: var(--z-ink); padding: var(--z-gap-3) 0; }
.faq-a { font: var(--z-t-body); color: var(--z-ink-2); }

/* the program cards and the care-team rows lift a touch on hover, so the page answers the pointer */
@media (hover: hover) {
  .p-card { transition: background-color var(--z-dur-2) var(--z-ease), transform var(--z-dur-2) var(--z-ease); }
  .p-card:hover { transform: translateY(-2px); }
  .tm2-chip { transition: transform var(--z-dur-2) var(--z-ease), box-shadow var(--z-dur-2) var(--z-ease); }
  .tm2-card:hover .tm2-chip { transform: translateY(-2px); box-shadow: 0 12px 28px -16px rgba(60,40,20,.3); }
}
@media (prefers-reduced-motion: reduce) { .hx2-people, .pv2-photo img, .p-card, .tm2-chip { transition: none; transform: none; } }
/* on a phone the programs' last line runs straight into the waitlist: 192px of air there read as a break (the founder, 17 Oct);
   the same 150 to 200px gaps sat above "You shouldn't have to choose", above "Your care team" and before "Programs" (visitor review, 17 Oct) */
@media (max-width: 720px) { .struggle, .tm2, .programs { padding-block: var(--z-gap-4); } .form-section { padding-top: var(--z-gap-4); } }