/* Role pages: for-coaches, for-therapists, for-trainers, for-consultants.
   Loads after tokens.css and site.css. Uses only their variables, plus the few local ones below.
   Mobile is the base. Wider layouts come in with min-width. */
:root {
  --role-card-fs: clamp(0.75rem, 0.55rem + 0.45vw, 0.9375rem);  /* hero booking page, all sizes in em off this */
  --role-render-fs: clamp(0.8125rem, 0.65rem + 0.35vw, 1rem);   /* job and reminder renders */
  --role-photo-w: 84%;          /* hero photo width inside its column */
  --role-card-w: 21em;          /* hero booking page width, in card em */
  --role-card-drop: 9em;        /* how far the booking page hangs below the photo. Phones: low, so it never covers a face */
  --role-thumb: 5.5rem;         /* other-role card thumbnail on phones */
  --role-h1: clamp(2.5rem, 1.2rem + 3.6vw, 4.5rem); /* 40 -> 72. A step under the homepage hero so "consultants" fits its column */
}

/* ---------- Hero ---------- */
.role-hero { text-align: left; padding-top: var(--space-2xl); padding-bottom: var(--space-3xl); }
.rh-grid { max-width: var(--container-wide); margin: 0 auto; display: grid; gap: var(--space-2xl); align-items: center; }
.rh-copy h1 {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--role-h1); line-height: var(--leading-hero); letter-spacing: var(--tracking-hero);
  text-wrap: balance;
}
.rh-copy .tagline { margin-left: 0; margin-right: 0; max-width: 27ch; text-wrap: pretty; }
.role-hero .signup { margin-left: 0; }
.role-hero .fineprint { margin-left: calc(var(--space-2xs) * -1); }
@media (min-width: 640px) { .role-hero .signup { justify-content: flex-start; } }

.rh-media { position: relative; font-size: var(--role-card-fs); padding-bottom: var(--role-card-drop); }
.rh-photo { width: var(--role-photo-w); margin-left: auto; aspect-ratio: 4 / 5; border-radius: var(--radius-xl); overflow: hidden; background: var(--color-canvas-parchment); }
.rh-photo img { width: 100%; height: 100%; object-fit: cover; }
.role--b .rh-photo { margin-left: 0; margin-right: auto; }

/* The pro's booking page, laid over the photo like a phone held up to it */
.bookpage {
  position: absolute; left: 0; bottom: 0; width: min(var(--role-card-w), 78%);
  background: var(--color-canvas); color: var(--color-ink); border-radius: 1.4em;
  padding: 0.9em 1.1em 1em; box-shadow: var(--shadow-product); text-align: left; font-variant-numeric: tabular-nums;
}
.role--b .bookpage { left: auto; right: 0; }
.bp-url { display: flex; align-items: center; justify-content: center; gap: 0.4em; height: 2.3em; margin-bottom: 1em; border-radius: var(--radius-pill); background: var(--color-canvas-parchment); font-size: 0.85em; color: var(--color-ink-muted-80); }
.bp-url .icon { width: 0.9em; height: 0.9em; }
.bookpage .who { margin-bottom: 1em; }
.bookpage .who .avatar { width: 2.8em; height: 2.8em; }
.bookpage .who b { font-size: 1.1em; }
.bp-types { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45em; }
.bp-types li { display: flex; align-items: center; gap: 0.75em; padding: 0.65em 0.75em; border-radius: 0.8em; box-shadow: inset 0 0 0 1px var(--color-hairline); }
.bp-types li > div { min-width: 0; flex: 1; }
.bp-types b { display: block; font-weight: var(--weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-types small { display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.85em; color: var(--color-ink-muted-56); }
.bp-types small .icon { width: 0.95em; height: 0.95em; }
.bp-types .type-ico { width: 2.2em; height: 2.2em; border-radius: 0.6em; }
.bp-types .chev { width: 1em; height: 1em; color: var(--color-ink-muted-56); }
.bp-types .is-sel { box-shadow: inset 0 0 0 0.13em var(--color-primary); }
.bp-types .is-sel .chev { color: var(--color-primary); }

@media (min-width: 834px) {
  .role-hero { padding-top: var(--space-3xl); }
  .rh-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl); }
  .rh-copy { grid-column: 1 / span 5; }
  .rh-media { grid-column: 6 / -1; }
  :root { --role-photo-w: 74%; --role-card-drop: 2.5em; }
}
@media (min-width: 1200px) { .rh-copy { grid-column: 1 / span 6; } .rh-media { grid-column: 7 / -1; } }

/* ---------- Reminder proof: render and copy side by side on a dark tile ---------- */
.role-proof { text-align: left; }
.rp-grid { display: grid; gap: var(--space-2xl); max-width: var(--container-wide); margin: 0 auto; align-items: center; }
.rp-copy .display { margin: 0; max-width: 13ch; }
.rp-copy .tagline { margin: var(--space-sm) 0 0; max-width: 30ch; text-wrap: pretty; }
.rp-render { font-size: var(--role-render-fs); }
.rm { max-width: 30em; }
.rm .mail { padding: 1.3em 1.4em 1.4em; }
.mail-from { display: flex; align-items: center; gap: 0.7em; padding-bottom: 0.9em; margin-bottom: 0.9em; border-bottom: 1px solid var(--color-hairline-alpha); }
.mail-from .avatar { width: 2.4em; height: 2.4em; }
.mail-from b { display: block; font-size: 0.95em; }
.mail-from small { display: block; font-size: 0.8em; color: var(--color-ink-muted-56); }
.rm .mail > b { font-size: 1.15em; letter-spacing: var(--tracking-caption); }
.mail-when { display: flex; align-items: center; gap: 0.6em; margin-top: 0.8em; padding: 0.7em 0.9em; border-radius: 0.7em; background: var(--color-canvas-parchment); font-size: 0.95em; }
.mail-when .icon { color: var(--color-primary); }
.mail-when b { font-weight: var(--weight-semibold); }
.rm .mail-actions { margin-top: 1em; }
.rm .mail-actions span { padding: 0.7em 0; }
.mail-help { margin-top: 0.7em; font-size: 0.8em; color: var(--color-ink-muted-56); text-align: center; }
@media (min-width: 834px) {
  .rp-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl); }
  .rp-render { grid-column: 1 / span 6; grid-row: 1; }
  .rp-copy { grid-column: 8 / -1; grid-row: 1; }
  .role--b .rp-render { grid-column: 7 / -1; }
  .role--b .rp-copy { grid-column: 1 / span 5; }
}

/* ---------- Three jobs: one leads, two support ---------- */
.role-jobs { text-align: left; }
.rj-head { max-width: var(--container-wide); margin: 0 auto; }
.rj-head .display { margin: 0; max-width: 15ch; }
.rj-head .tagline { margin-left: 0; margin-right: 0; }
.rj-grid { display: grid; gap: var(--space-sm); max-width: var(--container-wide); margin: var(--space-2xl) auto 0; }
.rj-card { background: var(--color-canvas); border-radius: var(--radius-xl); padding: var(--space-xl) var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); }
.rj-card > h3 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-tagline); line-height: var(--leading-lead); letter-spacing: var(--tracking-display); }
.rj-card > p { color: var(--color-ink-muted-80); max-width: 38ch; }
/* Support cards end in a small render made of homepage pieces */
.rj-mini { margin-top: auto; padding-top: var(--space-lg); font-size: var(--render-fs); }
.rj-mini .cal-row { background: var(--color-canvas); }
.rj-mini .cal-row:last-child, .rj-mini .field:last-child { margin-bottom: 0; }
.rj-mini .share-list { margin-top: 0; }
.rj-mini .share-list span { flex-wrap: wrap; gap: 0.2em 0.8em; }
.rj-mini .hours-row:first-child { border-top: 0; }
.rj-card--lead { padding-bottom: 0; overflow: clip; }
.rj-card--lead > h3 { font-size: var(--text-display-md); line-height: var(--leading-display); letter-spacing: var(--tracking-hero); max-width: 16ch; }
.rj-card--lead > p { font-family: var(--font-display); font-size: var(--text-tagline); line-height: var(--leading-lead); letter-spacing: var(--tracking-display); max-width: 30ch; }
/* The lead render sits at the bottom of its card and runs out of the bottom edge */
.rj-card--lead .render { margin-top: auto; padding-top: var(--space-xl); font-size: var(--role-render-fs); }
.rj-card--lead .render > * { margin: 0 0 -1.5em; }
@media (min-width: 834px) {
  .rj-grid { grid-template-columns: 7fr 5fr; grid-template-rows: auto auto; }
  .rj-card { padding: var(--space-2xl) var(--space-xl); }
  .rj-card--lead { grid-row: 1 / span 2; padding: var(--space-2xl) var(--space-2xl) 0; }
  .role--b .rj-grid { grid-template-columns: 5fr 7fr; }
  .role--b .rj-card--lead { grid-column: 2; }
}

/* Lead render: booking types (coach) reuses .win, .types and .type from site.css */
.rj-card--lead .win { max-width: none; }

/* Lead render: the booking form (therapist) */
.bform { max-width: 22em; background: var(--color-canvas); border-radius: 1.2em; padding: 1.2em 1.2em 1.6em; box-shadow: var(--shadow-product); }
.bform .btype { margin: 0.9em 0 0.6em; }
.bform .label { margin: 0 0 0.8em; }
.bform .field { padding: 0.75em 0.9em; }
.bform .r-btn { padding: 0.85em 0; }
.bform-note { display: flex; align-items: center; justify-content: center; gap: 0.4em; margin-top: 0.8em; font-size: 0.85em; color: var(--color-ink-muted-56); }
.bform-note .icon { width: 1em; height: 1em; color: var(--color-success); }

/* Lead render: the week (trainer) reuses .week and .ev from site.css */
.tweek { max-width: none; container-type: inline-size; }
/* Phones show Monday to Wednesday so names stay readable. A wide card shows the full week. */
.tweek .week { --hour: 3.4em; grid-template-columns: 3.4em repeat(3, 1fr); grid-template-rows: auto calc(4 * var(--hour)); }
.tweek .wide { display: none; }
@container (min-width: 34em) {
  .tweek .week { --hour: 4em; grid-template-columns: 3.6em repeat(5, 1fr); }
  .tweek .week-head .wide { display: flex; }
  .tweek .day.wide { display: block; }
}
.tweek .ev { padding-block: 0.3em; }

/* Lead render: an email with the booking link in the signature (consultant) */
.compose { max-width: none; }
.compose-row { display: flex; gap: 0.6em; padding: 0.7em 1.4em; border-bottom: 1px solid var(--color-hairline-alpha); font-size: 0.9em; }
.compose-row span { color: var(--color-ink-muted-56); width: 4em; flex: none; }
.compose-body { padding: 1.1em 1.4em 1.6em; line-height: var(--leading-body); }
.compose-body p + p { margin-top: 0.7em; }
.sig { margin-top: 1.2em; padding-top: 0.9em; border-top: 1px solid var(--color-hairline-alpha); display: flex; align-items: center; gap: 0.8em; }
.sig .avatar { width: 2.6em; height: 2.6em; }
.sig b { display: block; font-weight: var(--weight-semibold); }
.sig small { display: block; color: var(--color-ink-muted-56); font-size: 0.85em; }
.sig-link { display: inline-flex; align-items: center; gap: 0.35em; margin-top: 0.3em; padding: 0.3em 0.7em; border-radius: var(--radius-pill); background: var(--render-chip-bg); color: var(--color-primary); font-weight: var(--weight-semibold); font-size: 0.9em; }
.sig-link .icon { width: 0.95em; height: 0.95em; }

/* ---------- AI booking: one compact band ---------- */
.role-ai { text-align: left; padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
.ra-grid { display: grid; gap: var(--space-xl); max-width: var(--container-wide); margin: 0 auto; align-items: center; }
.ra-copy .display { margin: 0; font-size: var(--text-display-md); max-width: 17ch; }
.ra-copy .tagline { margin-left: 0; margin-right: 0; max-width: 28ch; }
.ra-note { margin-top: var(--space-md); font-size: var(--text-caption); letter-spacing: var(--tracking-caption); color: var(--color-ink-muted-56); max-width: 40ch; }
.ra-copy .more { margin-left: calc(var(--space-xs) * -1); }
.ra-render { font-size: var(--role-render-fs); }
.ra-chat { max-width: 34em; margin: 0; background: var(--color-canvas-parchment); }
.ra-chat .win-top { background: var(--color-divider-soft); }
.ra-chat .win-top span { font-weight: var(--weight-semibold); color: var(--color-ink-muted-80); } /* same as the homepage chat title, AA on the grey bar */
.ra-body { display: grid; gap: 0.9em; padding: 1.3em 1.3em 1.4em; }
.ra-body .msg-ai p { line-height: var(--leading-caption); }
@media (min-width: 834px) {
  .ra-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ra-copy { grid-column: 1 / span 5; }
  .ra-render { grid-column: 7 / -1; }
}

/* ---------- The other three roles ---------- */
.role-more { text-align: left; }
.rmore-grid { display: grid; gap: var(--space-2xl); max-width: var(--container-wide); margin: 0 auto; }
.rmore-head .display { margin: 0; max-width: 12ch; }
.rmore-head .tagline { margin-left: 0; margin-right: 0; max-width: 20ch; }
.role-more .mf-grid { margin: 0; grid-template-columns: 1fr; }
.role-more .mf-card { background: var(--color-canvas); display: grid; grid-template-columns: var(--role-thumb) minmax(0, 1fr); align-items: center; }
.role-more .mf-card img { height: 100%; aspect-ratio: 1 / 1; }
@media (min-width: 640px) {
  .role-more .mf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .role-more .mf-card { display: block; }
  .role-more .mf-card img { height: auto; aspect-ratio: 4 / 5; }
}
@media (min-width: 834px) {
  .rmore-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); align-items: end; }
  .rmore-head { padding-right: var(--space-lg); padding-bottom: var(--space-md); }
  .role-more .mf-grid { grid-column: 2 / -1; }
}

/* Current page in the footer */
.foot li a[aria-current="page"] { color: var(--color-ink); font-weight: var(--weight-semibold); }