/* ---------------------------------------------------------------------------
   1:1 Coaching — the request page.

   The most expensive thing on the site, so it is built to be read in order:
   a dark band that says what this is and what it costs, three tracks, the
   men who have done it, then the form. Field styling is inherited from
   form.css; nothing here can reach the invite page or the contact form.
   --------------------------------------------------------------------------- */

.coach-page {
  background: var(--paper);
  color: var(--ink);

  /* Three steps, roughly 1 : 2 : 4. Before this the page used fourteen
     near-identical clamps and every major boundary landed on the same 61px,
     which gave the offer and the commitment equal weight. */
  --coach-step-tight: clamp(18px, 4vw, 24px);
  --coach-step: clamp(34px, 6vw, 52px);
  --coach-step-loose: clamp(56px, 10vw, 96px);
}

.coach-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--paper);
  color: var(--ink);
  padding: 14px 18px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-size: 0.9rem;
  font-weight: 600;
}
.coach-skip:focus { left: 0; }

/* ---- the dark band ---- */

.coach-hero {
  background: var(--ink);
  color: var(--paper);
  /* A long, quiet gradient rather than a flat rectangle, so the band has
     some depth where the eye lands first. */
  background-image: radial-gradient(120% 90% at 50% -20%, rgba(255, 255, 255, 0.09), transparent 62%);
  padding: clamp(18px, 4vw, 26px) clamp(16px, 4vw, 40px) clamp(40px, 8vw, 72px);
}
.coach-hero-inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }

/* The photograph. A black-and-white frame sits behind the type, darkened and
   melted into the band so it reads as atmosphere, never as a box. On a wide
   screen he stands on the right with the words on the left; on a phone the
   frame runs across the top and fades to ink before the words begin. */
.coach-hero { position: relative; overflow: hidden; isolation: isolate; }
.coach-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: min(520px, 100%);
  z-index: -1;
  background: url("/coaching/hero.jpg") 50% 12% / cover no-repeat;
  filter: grayscale(1) contrast(1.08) brightness(0.7);
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 34%, transparent 82%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 34%, transparent 82%);
}
/* Phones: leave a window above the title for his face to be seen in. */
.coach-hero .coach-bar { padding-bottom: clamp(190px, 50vw, 300px); }
@media (min-width: 900px) {
  .coach-hero::before {
    inset: 0 0 0 auto;
    width: min(62%, 820px);
    height: auto;
    background-position: 38% 18%;
    opacity: 0.8;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 46%), linear-gradient(to bottom, #000 72%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 46%), linear-gradient(to bottom, #000 72%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  .coach-hero-inner { max-width: 1040px; }
  .coach-hero .coach-bar { padding-bottom: clamp(28px, 7vw, 54px); }
  .coach-hero h1, .coach-lede, .coach-bio, .coach-hero-cta, .coach-hero-note { max-width: 560px; }
}

.coach-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: clamp(28px, 7vw, 54px);
}
.coach-mark { display: inline-flex; align-items: center; }
.coach-mark .sf-mark { height: 22px; width: auto; max-width: 150px; object-fit: contain; display: block; }
.coach-mark .sf-mark-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--paper);
}
.coach-bar-tag {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 62%, transparent);
  text-align: right;
}

.coach-hero h1 {
  margin: 0 0 14px;
  font-family: var(--font-headline);
  font-weight: var(--headline-weight);
  font-size: clamp(2rem, 1.3rem + 3.4vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: #FFFFFF;
  text-wrap: balance;
}
.coach-lede {
  margin: 0;
  max-width: 34em;
  font-size: clamp(1rem, 0.94rem + 0.35vw, 1.16rem);
  line-height: 1.6;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
  text-wrap: pretty;
}

.coach-signer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: clamp(22px, 5vw, 30px) 0 0;
}
.coach-signer .sf-portrait {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--paper) 18%, transparent);
}
.coach-signer-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.coach-signer-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  color: #FFFFFF;
}
.coach-signer-role { font-size: 0.84rem; color: color-mix(in srgb, var(--paper) 64%, transparent); }

/* Breathing room between the credit line and the one button in the hero. */
.coach-bio + .coach-hero-cta { margin-top: clamp(26px, 5vw, 34px); }

/* On the dark band the page's own primary button would be ink on ink. */
.coach-hero-cta {
  width: auto;
  margin: clamp(26px, 5vw, 34px) 0 0;
  padding: 15px 30px;
  background: var(--paper);
  color: var(--ink);
}
.coach-hero-cta:hover { background: #FFFFFF; }
.coach-hero-cta:active { background: var(--paper-alt); }
.coach-hero-cta:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.coach-hero-note {
  margin: 12px 0 0;
  font-size: 0.84rem;
  color: color-mix(in srgb, var(--paper) 58%, transparent);
}

/* ---- the paper half ---- */

.coach-main { max-width: 760px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.coach-section { padding: var(--coach-step) 0 0; }
/* The one boundary that matters: above this line he is reading, below it he
   is deciding. It gets the page's largest interval. */
.coach-request { padding-top: var(--coach-step-loose); }
.coach-section > h2 {
  margin: 0 0 var(--coach-step-tight);
  font-family: var(--font-headline);
  font-weight: var(--headline-weight);
  font-size: clamp(1.35rem, 1.15rem + 1.1vw, 1.8rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   Types of calls.

   Bold on purpose. This is where a man decides "that one is me", so each kind
   of call is a dark card in the hero's own register: a large numeral, the
   name in the page's headline face, what it is, and its first three points.
   The rest, and the questions men bring, open beneath. Equal weight for each,
   because they are worth the same.
   --------------------------------------------------------------------------- */

.coach-types-eyebrow {
  margin: 0 0 10px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.coach-types-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }

.coach-type {
  position: relative;
  padding: clamp(24px, 6vw, 40px);
  border-radius: var(--radius-lg);
  background: var(--ink);
  background-image: radial-gradient(120% 90% at 50% -30%, rgba(255, 255, 255, 0.08), transparent 60%);
  color: var(--paper);
  overflow: hidden;
}
.coach-type-num {
  display: block;
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.1rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: color-mix(in srgb, var(--paper) 22%, transparent);
  font-variant-numeric: tabular-nums;
}
.coach-type-name {
  margin: 0 0 12px;
  font-family: var(--font-headline);
  font-weight: var(--headline-weight);
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.15rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  text-wrap: balance;
}
.coach-type-blurb {
  margin: 0 0 20px;
  max-width: 36em;
  font-size: clamp(0.96rem, 0.92rem + 0.25vw, 1.06rem);
  line-height: 1.6;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
  text-wrap: pretty;
}

/* The points: one quiet diamond each, a hanging indent, the key phrase bold. */
.coach-type-points { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 12px; }
.coach-type-points li {
  position: relative;
  padding-left: 22px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--paper) 82%, transparent);
  text-wrap: pretty;
}
.coach-type-points li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: color-mix(in srgb, var(--paper) 55%, transparent);
  transform: rotate(45deg);
}
.coach-type-points strong { font-weight: 700; color: #FFFFFF; }
.coach-type-points em { font-style: italic; }
.coach-type-points u { text-decoration-color: color-mix(in srgb, var(--paper) 50%, transparent); text-underline-offset: 3px; }

/* The rest of it, folded under the card. */
.coach-type-more { margin: 14px 0 0; }
.coach-type-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 72%, transparent);
  cursor: pointer;
  transition: color 0.18s var(--ease-out);
}
.coach-type-toggle:hover, .coach-type-more.is-open .coach-type-toggle { color: var(--paper); }
.coach-type-toggle:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; border-radius: 4px; }
.coach-type-chevron { transition: transform 0.45s var(--ease-out); }
.coach-type-more.is-open .coach-type-chevron { transform: rotate(180deg); }

.coach-type-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s var(--ease-out); }
.coach-type-more.is-open .coach-type-panel { grid-template-rows: 1fr; transition-duration: 0.48s; }
.coach-type-panel > div { overflow: hidden; }
.coach-type-inner {
  padding-top: 14px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s var(--ease-out), transform 0.32s var(--ease-out);
}
.coach-type-more.is-open .coach-type-inner {
  opacity: 1;
  transform: none;
  transition: opacity 0.3s var(--ease-out) 0.08s, transform 0.48s var(--ease-out) 0.08s;
}
.coach-type-asked-label {
  margin: 22px 0 10px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 58%, transparent);
}
.coach-type-asked { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.coach-type-asked li {
  padding-left: 16px;
  border-left: 2px solid color-mix(in srgb, var(--paper) 22%, transparent);
  font-size: 0.92rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
  text-wrap: pretty;
}

/* The way in: carries him to the form with this call already ticked. */
.coach-type-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: clamp(20px, 4vw, 26px);
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: none;
  transition: background 0.18s var(--ease-out), transform 0.14s var(--ease-out);
}
.coach-type-cta:hover { background: #FFFFFF; }
.coach-type-cta:active { transform: scale(0.98); }
.coach-type-cta:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.coach-type-arrow { transition: transform 0.22s var(--ease-out); }
.coach-type-cta:hover .coach-type-arrow { transform: translateX(3px); }

/* ---- what it costs, read at the bottom ---- */

.coach-pricing[hidden] { display: none; }
.coach-price-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.coach-price-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
}
.coach-price-length { font-size: 0.86rem; font-weight: 600; color: var(--ink-soft, #6B6557); }
.coach-price-amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.coach-price-note {
  margin: 14px 0 0;
  max-width: 40em;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft, #6B6557);
  text-wrap: pretty;
}

/* ---- the testimonial rail ---- */

.coach-praise { position: relative; }
.coach-praise-track { position: relative; }
.coach-quote {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: clamp(20px, 4.5vw, 30px);
  transition: opacity 0.42s var(--ease-out), transform 0.42s var(--ease-out);
}
/* Only the current one is in flow; the rest are stacked underneath it so the
   rail never changes height mid-cycle. */
.coach-quote:not(.is-current) {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.coach-quote.is-current { opacity: 1; transform: none; }
.coach-quote blockquote {
  margin: 0 0 18px;
  font-family: var(--font-headline);
  font-weight: var(--headline-weight);
  font-size: clamp(1.02rem, 0.96rem + 0.4vw, 1.2rem);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: pretty;
}
.coach-quote-who { display: flex; align-items: center; gap: 12px; }
.coach-quote-photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--paper-alt);
}
.coach-quote-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.coach-quote-name { font-weight: 700; font-size: 0.92rem; color: var(--ink); }
.coach-quote-role { font-size: 0.83rem; color: var(--ink-soft); }
.coach-quote-ig {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 8px 10px;
  margin-right: -6px;
  border-radius: var(--radius-sm);
}
.coach-quote-ig:hover { color: var(--ink); background: var(--paper-alt); }

.coach-praise-controls { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.coach-praise-arrow {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.18s var(--ease-out), color 0.18s var(--ease-out), background 0.18s var(--ease-out);
}
.coach-praise-arrow:hover { border-color: var(--border-strong); color: var(--ink); background: var(--card); }
.coach-praise-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.coach-praise-dots { display: flex; gap: 6px; margin: 0 auto; }
.coach-praise-dot {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.coach-praise-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.coach-praise-dot[aria-selected="true"]::before { background: var(--ink); transform: scale(1.32); }
.coach-praise-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-radius: 50%; }
/* One testimonial is not a carousel. */
.coach-praise.is-single .coach-praise-controls { display: none; }

/* ---- how it works ---- */

.coach-how-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: coachstep;
  display: grid;
  gap: 16px;
}
.coach-how-steps li {
  counter-increment: coachstep;
  position: relative;
  padding-left: 38px;
  font-size: 0.97rem;
  line-height: 1.62;
  color: var(--ink-soft);
  text-wrap: pretty;
}
/* The number is the sequence, which here is information: these happen in
   this order, and he is being told how far away the call is. */
.coach-how-steps li::before {
  content: counter(coachstep);
  position: absolute;
  left: 0;
  top: -1px;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.76rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.coach-assurances[hidden] { display: none; }
.coach-assurances {
  list-style: none;
  margin: var(--coach-step-tight) 0 0;
  padding: var(--coach-step-tight) 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 9px;
}
.coach-assurances li {
  position: relative;
  padding-left: 26px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}
.coach-assurances li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 15px;
  height: 8px;
  border-left: 1.6px solid var(--gold-ink);
  border-bottom: 1.6px solid var(--gold-ink);
  transform: rotate(-45deg);
}

/* ---- the form card ---- */

.coach-request { padding-bottom: clamp(44px, 9vw, 80px); }
.coach-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 5vw, 40px);
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.04), 0 36px 80px -40px rgba(20, 20, 20, 0.3);
}
.coach-card-title {
  margin: 0 0 10px;
  font-family: var(--font-headline);
  font-weight: var(--headline-weight);
  font-size: clamp(1.35rem, 1.15rem + 1.1vw, 1.8rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.coach-card-intro {
  margin: 0 0 clamp(22px, 5vw, 30px);
  font-size: 1rem;
  line-height: 1.62;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* A track is a choice and a question in one block: ticking it opens the
   question underneath, in place, without the page jumping. */
.coach-choice { display: block; }
.coach-choice .sf-choice { align-items: flex-start; }
.coach-choice .sf-choice input { margin-top: 3px; }
.coach-choice-name { font-weight: 600; }
.coach-context {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s var(--ease-out);
}
.coach-choice.is-on .coach-context { grid-template-rows: 1fr; }
.coach-context > div { overflow: hidden; }
/* Closing is quicker than opening: undoing a choice should not be a scene. */
.coach-choice:not(.is-on) .coach-context { transition-duration: 0.22s; }

.coach-context-inner {
  position: relative;
  padding: 12px 0 2px 15px;
  margin: 8px 0 0 14px;
}
/* A hairline drawn downward from the choice, connecting what he ticked to
   what is being asked. A static border would say the same thing; drawing it
   says the question came from his answer. */
.coach-context-inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-strong);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.36s var(--ease-out);
}
.coach-choice.is-on .coach-context-inner::before { transform: scaleY(1); }

.coach-context label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
/* The question arrives before the space to answer it — a beat apart, so it
   reads as being asked rather than rendered. */
.coach-context-inner label,
.coach-context-inner textarea {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.26s var(--ease-out), transform 0.26s var(--ease-out);
}
.coach-choice.is-on .coach-context-inner label {
  opacity: 1;
  transform: none;
  transition-delay: 0.08s;
}
.coach-choice.is-on .coach-context-inner textarea {
  opacity: 1;
  transform: none;
  transition-delay: 0.16s;
}

/* A price is a choice too, so it looks like one — the number on the right. */
.coach-plan { display: flex; align-items: center; gap: 12px; width: 100%; }
.coach-plan-price {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--ink);
}
.sf-choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.coach-terms-link {
  background: none;
  border: 0;
  /* Negative margin keeps the sentence's rhythm while the padding gives a
     thumb something to land on. */
  padding: 7px 4px;
  margin: -7px -4px;
  font: inherit;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.coach-terms-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; }

/* Once the request is saved, "Request your call" is no longer the thing on
   screen — the confirmation is. */
.coach-card.is-done .coach-card-title,
.coach-card.is-done .coach-card-intro { display: none; }

/* ---- the confirmation: this page's one authored moment ----
   Pressing the button is the instant his request is taken. Before this it
   was a jump cut: a tall form replaced by a short panel in one frame. */

/* The form leaves quickly. Exits are faster than arrivals. */
.coach-form-leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.14s linear, transform 0.14s var(--ease-out);
  pointer-events: none;
}

/* The card keeps its place and settles to the new height, so the page does
   not lurch when six hundred pixels of form stop existing. One element, one
   height transition, once per visit. */
.coach-card.is-settling {
  overflow: hidden;
  transition: height 0.36s var(--ease-out);
  will-change: height;
}

/* form.css gives .sf-done one canned entrance; here the parts arrive in the
   order they matter — the mark, the words, then the next action. */
.coach-done { animation: none; }
.coach-card.is-done .coach-done > * {
  animation: coachArrive 0.42s var(--ease-out) both;
}
.coach-card.is-done .coach-done > .sf-done-mark { animation-delay: 0.04s; }
.coach-card.is-done .coach-done > h2 { animation-delay: 0.16s; }
.coach-card.is-done .coach-done > p { animation-delay: 0.22s; }
.coach-card.is-done .coach-done > .coach-checkout { animation-delay: 0.3s; }
.coach-card.is-done .coach-done > .coach-checkout-note { animation-delay: 0.34s; }
.coach-card.is-done .coach-done > .coach-ref { animation-delay: 0.38s; }
@keyframes coachArrive {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

/* The check is drawn, not revealed. It is the only gesture on the page worth
   authoring, and it takes as long as a hand would. */
.coach-done .sf-done-mark path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.coach-card.is-done .sf-done-mark path {
  animation: coachCheck 0.44s var(--ease-out) 0.18s both;
}
@keyframes coachCheck { to { stroke-dashoffset: 0; } }

/* Announced to a screen reader, never drawn. */
.coach-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.coach-smallprint {
  margin: clamp(22px, 5vw, 28px) 0 0;
  padding-top: clamp(18px, 4vw, 22px);
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ---- after the request is saved ---- */

.coach-done { text-align: left; }
/* Block, not the shared button's inline-block: as an inline element it sat
   on a text baseline and the note below it had nowhere to go. */
.coach-checkout {
  display: block;
  width: 100%;
  margin-top: 26px;
}
/* These two are selected through .coach-done because form.css sets
   `.sf-done p { margin: 0 }`, which is more specific than a bare class and
   was flattening the space under the button to nothing. */
.coach-done .coach-checkout-note {
  margin: 14px 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-soft);
  text-align: center;
  text-wrap: pretty;
}
.coach-done .coach-ref {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.coach-done .coach-ref[hidden] { display: none; }

/* ---- the terms ---- */

.coach-modal[hidden] { display: none; }
.coach-modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 32px); }
.coach-modal-backdrop { position: absolute; inset: 0; background: rgba(18, 18, 20, 0.52); animation: coachFade 0.24s var(--ease-out) both; }
.coach-modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: min(80vh, 640px);
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 5vw, 32px);
  box-shadow: 0 40px 90px -30px rgba(20, 20, 20, 0.48);
  animation: coachRise 0.34s var(--ease-out) both;
}
.coach-modal-card h2 {
  margin: 0 0 16px;
  font-family: var(--font-headline);
  font-weight: var(--headline-weight);
  font-size: 1.3rem;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.coach-modal-body p { margin: 0 0 14px; font-size: 0.95rem; line-height: 1.65; color: var(--ink-soft); }
.coach-modal-close { width: 100%; margin-top: 8px; }

@keyframes coachFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes coachRise { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }


/* Reduced motion keeps every state change legible — the question still
   opens, the check still confirms, the panel still replaces the form. What
   goes is the travel: no rise, no drawn line, no height animation, and the
   staggers collapse so nothing arrives late. Opacity carries the change. */
@media (prefers-reduced-motion: reduce) {
  .coach-quote,
  .coach-context { transition: none; }
  .coach-modal-backdrop,
  .coach-modal-card { animation: none; }

  .coach-context-inner::before { transition: none; transform: scaleY(1); }
  .coach-context-inner label,
  .coach-context-inner textarea {
    transform: none;
    transition: opacity 0.15s linear;
  }
  .coach-choice.is-on .coach-context-inner label,
  .coach-choice.is-on .coach-context-inner textarea { transition-delay: 0s; }

  .coach-form-leaving { transform: none; transition: opacity 0.12s linear; }
  .coach-card.is-settling { transition: none; will-change: auto; }

  /* The confirmation still announces itself, all at once and without travel. */
  .coach-card.is-done .coach-done > * {
    animation: coachArriveFlat 0.2s linear both;
    animation-delay: 0s;
  }
  /* A check that is simply there, rather than drawn. */
  .coach-card.is-done .sf-done-mark path { animation: none; stroke-dashoffset: 0; }

  .coach-length,
  .coach-praise-arrow { transition: none; }

  /* A card still opens and closes; it just stops sliding and spinning. */
  .coach-type-panel { transition: none; }
  .coach-type-chevron, .coach-type-arrow, .coach-type-cta, .coach-type-toggle { transition: none; }
}
@keyframes coachArriveFlat {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   /coaching/confirming — the page Circle sends a man back to.
   --------------------------------------------------------------------------- */

.coach-confirm-page .coach-hero { padding-bottom: clamp(32px, 6vw, 56px); }

.coach-steps {
  margin: 0 0 clamp(26px, 5vw, 34px);
  padding: 0 0 0 1.25em;
  display: grid;
  gap: 14px;
}
.coach-steps li {
  font-size: 0.97rem;
  line-height: 1.62;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.coach-steps li::marker { color: var(--border-strong); font-variant-numeric: tabular-nums; }
.coach-steps b { color: var(--ink); font-weight: 600; }

.coach-resend {
  padding-top: clamp(22px, 4vw, 28px);
  border-top: 1px solid var(--border);
}
.coach-resend h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.coach-resend-note {
  margin: 0 0 18px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.coach-resend .sf-submit { margin-top: 16px; }
.coach-resend-said[hidden] { display: none; }
.coach-resend-said {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--paper-alt);
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
  animation: coachFade 0.3s var(--ease-out) both;
}
.coach-confirm-page .coach-smallprint a { color: var(--ink); text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .coach-resend-said { animation: none; }
}

/* ---------------------------------------------------------------------------
   The availability picker.
   --------------------------------------------------------------------------- */

.coach-preview-note {
  margin: 0 0 22px;
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  background: var(--paper-alt);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.coach-length-switch { display: flex; gap: 8px; margin: 0 0 24px; flex-wrap: wrap; }
.coach-length {
  min-height: 44px;
  padding: 10px 16px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.18s var(--ease-out), color 0.18s var(--ease-out);
}
.coach-length:hover { border-color: var(--border-strong); color: var(--ink); }
.coach-length.is-on { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.coach-length:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.coach-days { display: grid; gap: clamp(18px, 4vw, 24px); }
.coach-days[aria-busy="true"] { opacity: 0.45; }
.coach-day-name {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.coach-times {
  display: grid;
  /* Two across on a phone, more as there is room — never a single column of
     tall buttons the thumb has to travel. */
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 8px;
}
.coach-time {
  min-height: 52px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.16s var(--ease-out), background 0.16s var(--ease-out), transform 0.16s var(--ease-out);
}
.coach-time:hover { border-color: var(--border-strong); }
.coach-time:active { transform: scale(0.98); }
.coach-time:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.coach-time-local { font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.coach-time-pt { font-size: 0.72rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* Chosen: the border alone would be too quiet to scan at a glance. */
.coach-time.is-on {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.coach-time.is-on .coach-time-pt { color: color-mix(in srgb, var(--paper) 70%, transparent); }

.coach-pick-empty[hidden] { display: none; }
.coach-pick-empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.coach-pick-count {
  margin: clamp(20px, 4vw, 26px) 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.coach-pick-count.is-ok { color: var(--gold-ink); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .coach-time { transition: none; }
  .coach-time:active { transform: none; }
}

/* ---- the small print under a tick box ---- */

.coach-consent-help {
  margin: 8px 0 0 34px;
  font-size: 0.81rem;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}
/* The one request nobody has to agree to. Quieter than the rest of the
   form on purpose — it is an ask, not a condition. */
.sf-field.is-optional .sf-choice {
  border-style: dashed;
  border-color: var(--border);
  background: transparent;
}
.sf-field.is-optional .sf-choice:hover { border-color: var(--border-strong); }
.coach-optional-tag {
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--paper-alt);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   About Josh — folded into the hero.

   The line that names him is the way in. Closed, it is a quiet credit with a
   small "About" cue; open, his credentials, a few words, photographs and
   where to find him unfold beneath it on the same dark band. One place for
   who he is, instead of a hero that introduces him and a section further
   down that does it again.
   --------------------------------------------------------------------------- */

.coach-bio { margin: clamp(22px, 5vw, 30px) 0 0; max-width: 34rem; }

/* The row itself is the control: a button dressed as the credit it was. */
.coach-bio .coach-signer {
  margin: 0;
  width: 100%;
  padding: 6px 16px 6px 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: default;
  transition: border-color 0.18s var(--ease-out), background 0.18s var(--ease-out), transform 0.14s var(--ease-out);
}
.coach-bio.is-ready .coach-signer {
  cursor: pointer;
  /* A faint outline at rest, so the row reads as something that opens
     rather than as a caption. */
  border-color: color-mix(in srgb, var(--paper) 14%, transparent);
}
.coach-bio.is-ready .coach-signer:hover,
.coach-bio.is-open .coach-signer {
  border-color: color-mix(in srgb, var(--paper) 22%, transparent);
  background: color-mix(in srgb, var(--paper) 7%, transparent);
}
.coach-bio.is-ready .coach-signer:active { transform: scale(0.992); }
.coach-bio .coach-signer:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.coach-bio .coach-signer:disabled { opacity: 1; }

/* The invitation: a word and a chevron, shown only once there is something
   behind it. */
.coach-bio-cue {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding-left: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 70%, transparent);
}
.coach-bio.is-ready .coach-bio-cue { display: inline-flex; }
.coach-bio.is-ready .coach-signer:hover .coach-bio-cue,
.coach-bio.is-open .coach-bio-cue { color: var(--paper); }
.coach-bio-chevron { transition: transform 0.45s var(--ease-out); }
.coach-bio.is-open .coach-bio-chevron { transform: rotate(180deg); }

/* The panel: the grid-row trick, so it animates to its real height. */
.coach-bio-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease-out);
}
.coach-bio.is-open .coach-bio-panel { grid-template-rows: 1fr; transition-duration: 0.48s; }
.coach-bio-panel > div { overflow: hidden; }
.coach-bio-inner {
  margin-top: 12px;
  padding: clamp(18px, 4.5vw, 24px);
  border: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--paper) 5%, transparent);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s var(--ease-out), transform 0.32s var(--ease-out);
}
.coach-bio.is-open .coach-bio-inner {
  opacity: 1;
  transform: none;
  transition: opacity 0.3s var(--ease-out) 0.08s, transform 0.48s var(--ease-out) 0.08s;
}

/* Credentials, as a bulleted list. Each line gets a small, even marker and a
   hanging indent, so a wrapped line tucks under its own text instead of
   under the bullet. The weight is in the spacing, not in rules between
   rows — it reads as a considered list rather than a stack of dividers. */
.coach-creds[hidden] { display: none; }
.coach-creds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.coach-creds li {
  position: relative;
  padding-left: 22px;
  font-size: 0.93rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--paper) 86%, transparent);
  text-wrap: pretty;
}
/* A small, quiet diamond — a step up from a default dot, and on brand with
   the page's restrained geometry. Aligned to the first line's x-height. */
.coach-creds li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: color-mix(in srgb, var(--paper) 62%, transparent);
  transform: rotate(45deg);
}
/* The first line is the headline credential; give it the page's own weight. */
.coach-creds li:first-child { color: #FFFFFF; font-weight: 600; }
.coach-creds li:first-child::before { background: var(--paper); }

.coach-bio-story[hidden] { display: none; }
.coach-bio-story { margin-top: 16px; }
.coach-bio-story p {
  margin: 0 0 13px;
  font-size: 0.94rem;
  line-height: 1.66;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
  text-wrap: pretty;
}
.coach-bio-story p:last-child { margin-bottom: 0; }

/* The photographs, as a strip he can push through with a thumb. */
.coach-story-strip[hidden] { display: none; }
.coach-story-strip {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  padding-bottom: 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--paper) 30%, transparent) transparent;
}
.coach-story-shot { flex: 0 0 auto; width: min(62vw, 200px); margin: 0; scroll-snap-align: start; }
.coach-story-shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--paper) 12%, transparent);
  display: block;
}
.coach-story-shot figcaption {
  margin-top: 8px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--paper) 62%, transparent);
  text-wrap: pretty;
}

/* Where else to find him. Sized for a thumb, quiet until reached for. */
.coach-social[hidden] { display: none; }
.coach-social { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 -8px -10px; }
.coach-social-link {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: color-mix(in srgb, var(--paper) 62%, transparent);
  transition: color 0.18s var(--ease-out), background 0.18s var(--ease-out), transform 0.14s var(--ease-out);
}
.coach-social-link:hover { color: var(--paper); background: color-mix(in srgb, var(--paper) 10%, transparent); }
.coach-social-link:active { transform: scale(0.96); }
.coach-social-link:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .coach-bio .coach-signer,
  .coach-bio-panel,
  .coach-bio-inner,
  .coach-bio-chevron,
  .coach-social-link { transition: none; }
  .coach-story-strip { scroll-snap-type: none; }
}
/* ---------------------------------------------------------------------------
   Buttons and choices, in the apply form's hand.

   Scoped to .coach-page so the contact form keeps its own quieter manners.
   --------------------------------------------------------------------------- */

/* The choice rows: the apply form's `.option` — a warm tint on hover, the
   faintest press, and a lift once chosen. */
.coach-page .sf-choice {
  transition: border-color 0.16s var(--ease-out), box-shadow 0.16s var(--ease-out),
    background-color 0.16s var(--ease-out), transform 0.12s var(--ease-out);
}
.coach-page .sf-choice:hover { border-color: var(--accent); background: var(--accent-pale); }
.coach-page .sf-choice:active { transform: scale(0.995); }
.coach-page .sf-choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-pale);
  box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--accent) 35%, transparent);
}
/* The optional request keeps its dashed, unassuming frame even when ticked. */
.coach-page .sf-field.is-optional .sf-choice:hover,
.coach-page .sf-field.is-optional .sf-choice:has(input:checked) {
  background: transparent;
  box-shadow: none;
}

/* Pill buttons take the primary button's press: a small lift under the
   cursor, and a real push on the way down. */
.coach-length {
  transition: border-color 0.18s var(--ease-out), background 0.18s var(--ease-out),
    color 0.18s var(--ease-out), transform 0.14s var(--ease-out);
}
.coach-length:hover { transform: translateY(-1px); }
.coach-length:active { transform: translateY(0) scale(0.98); }

/* The round controls press rather than lift — there is nowhere for a circle
   to go. */
.coach-praise-arrow {
  transition: border-color 0.18s var(--ease-out), color 0.18s var(--ease-out),
    background 0.18s var(--ease-out), transform 0.14s var(--ease-out);
}
.coach-praise-arrow:active,
.coach-social-link:active { transform: scale(0.94); }

/* A slot is a choice, so it behaves like one. */
.coach-time:hover { border-color: var(--accent); background: var(--accent-pale); }
.coach-time.is-on:hover { background: var(--ink); border-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .coach-page .sf-choice,
  .coach-bio .coach-signer,
  .coach-length,
  .coach-praise-arrow,
  .coach-social-link { transition: none; }
  .coach-page .sf-choice:active,
  .coach-bio.is-ready .coach-signer:active,
  .coach-length:hover,
  .coach-length:active,
  .coach-praise-arrow:active,
  .coach-social-link:active { transform: none; }
  /* The panels still open and close; they just stop travelling. */
  .coach-type-inner,
  .coach-bio-inner {
    transform: none;
    transition: opacity 0.15s linear;
  }
  .coach-type-more.is-open .coach-type-inner,
  .coach-bio.is-open .coach-bio-inner {
    transform: none;
    transition: opacity 0.15s linear;
  }
}

/* ---- the intake page ---- */

.intake-slots {
  margin-top: clamp(26px, 5vw, 34px);
  padding-top: clamp(22px, 4vw, 28px);
  border-top: 1px solid var(--border);
}
.intake-slots-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.intake-slots-intro {
  margin: 0 0 clamp(18px, 4vw, 22px);
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}
/* The day headings are h4 here, since the card already owns the h2 and h3. */
.intake-slots .coach-day-name { font-size: 0.92rem; }

/* ---- gifts: the usual price, crossed out, beside what he pays ---- */
.coach-price-card.is-gift { border-color: var(--ink); }
.coach-price-was, .coach-plan-was { color: var(--ink-soft); font-weight: 500; text-decoration-thickness: 1.5px; }
.coach-price-was { font-size: 1rem; }
.coach-plan-was { margin-right: 4px; font-size: 0.92em; }
.coach-gift { margin: 0 0 22px; padding: 18px 20px; border: 1.5px solid var(--ink); border-radius: var(--radius-md); background: var(--paper-alt); }
.coach-gift[hidden] { display: none; }
.coach-gift-eyebrow { margin: 0 0 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.coach-gift-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
.coach-gift-note { margin: 10px 0 0; font-style: italic; line-height: 1.55; }
.coach-gift-fine { margin: 10px 0 0; font-size: 0.86rem; color: var(--ink-soft); }
.coach-gift-gone { margin: 0; line-height: 1.55; }
.coach-gift-email { margin-top: 6px; }
.sf-field input[readonly] { background: var(--paper-alt); color: var(--ink-soft); }

/* ---- applying for a scholarship: quiet, below the prices ---- */
.coach-scholarship { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--border); max-width: 44em; }
.coach-scholarship[hidden] { display: none; }
.coach-scholarship-line { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }
.coach-scholarship-open { margin: 10px 0 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.coach-scholarship-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.coach-scholarship-panel { margin: 18px 0 0; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card, #fff); }
.coach-scholarship-panel[hidden] { display: none; }
.coach-scholarship-panel h3 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }
.coach-scholarship-panel > p { margin: 0 0 12px; line-height: 1.6; }
.coach-scholarship-how { margin: 0 0 18px; padding-left: 1.1em; line-height: 1.6; }
.coach-scholarship-how li { margin: 4px 0; }
.coach-scholarship-panel form { display: flex; flex-direction: column; gap: 14px; }
.coach-scholarship-panel fieldset { border: 0; margin: 0; padding: 0; }
.coach-scholarship-understand span { font-size: 0.92rem; line-height: 1.5; }
.coach-scholarship-thanks[hidden], #coachScholarshipForm[hidden] { display: none; }
.coach-scholarship-thanks h3 { margin-bottom: 8px; }
.coach-scholarship-thanks p { margin: 0; line-height: 1.6; }

/* ---- the one-minute review ---- */
.coach-review-page #rvForm { display: flex; flex-direction: column; gap: 20px; }
.coach-review-page #rvForm[hidden], .coach-review-page #rvDone[hidden] { display: none; }
.rv-rate { border: 0; margin: 0; padding: 0; }
.rv-rate legend { padding: 0; margin: 0 0 10px; font-weight: 600; font-size: 1rem; }
.rv-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.rv-pill { position: relative; display: block; }
.rv-pill input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.rv-pill span { display: grid; place-items: center; height: 48px; border: 1.5px solid var(--border); border-radius: 12px; font-weight: 700; font-size: 1.05rem; background: var(--white, #fff); transition: background .15s, color .15s, border-color .15s; }
.rv-pill input:hover + span { border-color: var(--border-strong); }
.rv-pill input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.rv-pill input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.rv-rate.is-invalid .rv-pill span { border-color: var(--error); }
.rv-ends { display: flex; justify-content: space-between; margin: 6px 2px 0; font-size: 0.8rem; color: var(--ink-soft); }
.rv-photo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rv-photo-row img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; }
.rv-photo-clear { border: 0; background: none; padding: 0; font: inherit; color: var(--ink-soft); text-decoration: underline; cursor: pointer; }
.rv-share { border: 0; padding: 0; margin: 0; }
.rv-gift { margin-top: 22px; padding: 18px 20px; border: 1.5px solid var(--ink); border-radius: var(--radius-md); background: var(--paper-alt); }
.rv-gift p { margin: 0 0 12px; line-height: 1.55; }
.rv-gift[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .rv-pill span { transition: none; } }
.sf-optional { margin-left: 6px; font-weight: 500; font-size: 0.85em; color: var(--ink-soft); }
.coach-review-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rv-photo > .sf-label { display: block; font-weight: 600; margin-bottom: 4px; }
.coach-review-page #rvPrivate { min-height: 0; }

/* Privacy page: long-form reading inside the usual card */
.privacy-body { max-width: 68ch; }
.privacy-body h2 { font-size: 1.15rem; margin: 1.8em 0 0.5em; }
.privacy-body h2:first-of-type { margin-top: 0.6em; }
.privacy-body p, .privacy-body li { line-height: 1.6; }
.privacy-body ul { padding-left: 1.2em; margin: 0.4em 0 1em; }
.privacy-body li { margin: 0.35em 0; }
.privacy-updated { font-size: 0.86rem; color: var(--ink-soft); margin: 0; }

/* ---------------------------------------------------------------------------
   Made for the device it is on (set in Forms -> Desktop & phone).
   The band's pieces arrive in reading order on load; sections further down
   wait, still, and rise in as they are reached. Reduced motion: none of it.
   --------------------------------------------------------------------------- */
@keyframes coachIn { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes coachInCine { from { opacity: 0; transform: translateY(26px) scale(0.985); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes coachInCalm { from { opacity: 0; } to { opacity: 1; } }
@keyframes coachPhotoIn { from { opacity: 0; transform: scale(1.06); } }

.coach-hero-inner > * { animation: coachIn 0.7s var(--ease-out) both; }
.coach-hero-inner > :nth-child(1) { animation-delay: 0.04s; }
.coach-hero-inner > :nth-child(2) { animation-delay: 0.12s; }
.coach-hero-inner > :nth-child(3) { animation-delay: 0.22s; }
.coach-hero-inner > :nth-child(4) { animation-delay: 0.32s; }
.coach-hero-inner > :nth-child(5) { animation-delay: 0.42s; }
.coach-hero-inner > :nth-child(6) { animation-delay: 0.5s; }
.coach-hero::before { animation: coachPhotoIn 1.4s var(--ease-out) both; }

.coach-section.cr-wait { opacity: 0; transform: translateY(22px); }
.coach-section.cr-in { animation: coachIn 0.75s var(--ease-out) both; }
html[data-motion="cinematic"] .coach-section.cr-wait { transform: translateY(36px) scale(0.985); filter: blur(6px); }
html[data-motion="cinematic"] .coach-section.cr-in { animation: coachInCine 1.05s var(--ease-out) both; }
html[data-motion="calm"] .coach-section.cr-wait { transform: none; }
html[data-motion="calm"] .coach-section.cr-in { animation: coachInCalm 0.5s ease-out both; }
html[data-motion="cinematic"] .coach-hero-inner { will-change: transform; }

/* A praise report says what it is, above the words. */
.coach-quote-kind {
  display: inline-block;
  margin: 0 0 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Desktop: a little life under the pointer. */
@media (hover: hover) and (pointer: fine) {
  .coach-types-list > li { transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); }
  .coach-types-list > li:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -16px rgba(20, 20, 20, 0.28); }
}

/* Phone: the frosted bar, sitting where the thumb is. */
.coach-sticky {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 16px;
  border-radius: 18px;
  background: rgba(250, 249, 246, 0.82);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 0 0 1px rgba(20, 20, 20, 0.06), 0 14px 34px -14px rgba(20, 20, 20, 0.4);
  transform: translateY(calc(100% + 24px));
  opacity: 0;
  transition: transform 0.45s var(--ease-out), opacity 0.3s var(--ease-out);
  pointer-events: none;
}
.coach-sticky.is-shown { transform: none; opacity: 1; pointer-events: auto; }
.coach-sticky-copy { flex: 1 1 auto; min-width: 0; font-size: 0.82rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.coach-sticky .btn { width: auto; flex: none; padding: 12px 18px; min-height: 44px; }
.coach-sticky .btn:active { transform: scale(0.96); }

@media (prefers-reduced-motion: reduce) {
  .coach-hero-inner > *, .coach-hero::before, .coach-section.cr-in { animation: none; }
  .coach-section.cr-wait { opacity: 1; transform: none; filter: none; }
  .coach-sticky { transition: opacity 0.2s linear; transform: none; }
}

/* Testimonials hand over cleanly, never two quotes on top of each other. */
.coach-quote:not(.is-current) { transition: opacity 0.18s ease, transform 0.3s var(--ease-out); }
.coach-quote.is-current { transition: opacity 0.45s var(--ease-out) 0.16s, transform 0.45s var(--ease-out) 0.16s; }