/* Mentorship page (/mentorship), added 2026-10-26.
   Loaded only by mentorship.html, after fieldnotes.css and review-fixes-2026-10-v4.css.
   Reuses the Field Notes tokens; adds the booking button, session cards, steps,
   plans and questions. If this file changes after it is live, publish it under a
   new name (the CDN ignores ?v=). */

/* Nav: mark the current page */
body.fn #desktop-nav-links a[aria-current="page"],
body.fn #mobile-nav-links a[aria-current="page"] { color:var(--ink); }

/* Booking button: the one solid control on the page */
body.fn .mt-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:12px 22px; border:2px solid var(--ink); border-radius:2px;
  background:var(--ink); color:var(--paper); text-decoration:none;
  font:600 16px/1.25 var(--font-body); text-align:center;
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
body.fn .mt-btn:hover { background:#2E2E2E; border-color:#2E2E2E; }
body.fn .mt-btn--ghost { background:transparent; color:var(--ink); }
body.fn .mt-btn--ghost:hover { background:var(--ink); border-color:var(--ink); color:var(--paper); }

/* Hero */
body.fn .mt-hero h1 { font-size:54px; max-width:17ch; margin-bottom:20px; }
body.fn .mt-hero .fn-hero-deck { font-size:19px; max-width:50ch; }
.mt-hero-ctas { display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin-top:30px; }
/* Tap target: the hero's See all sessions link is at least 44px tall (hero only) */
body.fn .mt-hero .fn-rl { padding-top:16px; padding-bottom:12px; }
/* Hero pull quote (verbatim excerpt from a review further down) */
body.fn .mt-hero-proof { margin:28px 0 0; padding:16px 0 0 0; border-top:1px solid var(--hairline); max-width:46ch; }
body.fn .mt-hero-proof blockquote { margin:0; padding:0; border:0; }
body.fn .mt-hero-proof p { margin:0; font:500 17px/1.5 var(--font-body); color:var(--ink); }
body.fn .mt-hero-proof figcaption { margin:8px 0 0; font:400 14px/1.4 var(--font-body); color:var(--muted); }

/* Section rhythm */
body.fn .mt-section { padding:64px 0 24px; }
body.fn .mt-section .fn-shead { margin-bottom:36px; }
.mt-section-deck { margin:-18px 0 32px; font:400 16px/1.6 var(--font-body); color:var(--muted); max-width:62ch; }
/* Review sessions: choosing line, then the deck, then the founding-rate note */
body.fn .mt-founding, body.fn .mt-choose { margin:-18px 0 10px; font:500 16px/1.6 var(--font-body); color:var(--ink); max-width:62ch; }
body.fn .mt-founding + .mt-choose { margin-top:0; }
body.fn .mt-choose + .mt-process { margin-top:10px; }

/* About */
body.fn .mt-about { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
.mt-quote { margin:0; border-top:2px solid var(--rule); padding-top:22px; }
.mt-quote p { margin:0; font:500 24px/1.4 var(--font-display); letter-spacing:-.01em; color:var(--ink); max-width:24ch; }

/* Lead session: featured, full width */
.mt-lead { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); background:var(--paper-tint-2); margin:0 0 28px; }
.mt-lead-main { padding:44px 48px 48px; display:flex; flex-direction:column; align-items:flex-start; }
.mt-lead-side { padding:44px 48px 40px; border-left:1px solid var(--hairline); }
body.fn .mt-lead h3 { margin:0 0 14px; font:800 38px/1.05 var(--font-display); letter-spacing:-.02em; color:var(--ink); }
.mt-len { display:block; margin-top:6px; font:500 16px/1.3 var(--font-body); letter-spacing:0; color:var(--muted); }
.mt-priceline { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:0 0 22px; }
.mt-price { font:800 32px/1 var(--font-display); letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.mt-tag { font:600 13px/1 var(--font-body); color:var(--ink); border:1.5px solid var(--ink); border-radius:2px; padding:5px 8px; }
.mt-desc { margin:0 0 28px; font:400 17px/1.65 var(--font-body); color:var(--body); max-width:54ch; }
.mt-list-h { margin:0 0 8px; font:700 16px/1.3 var(--font-body); color:var(--ink); }
.mt-list { margin:0 0 28px; padding:0; list-style:none; }
.mt-list:last-child { margin-bottom:0; }
.mt-list li { position:relative; padding:10px 0 10px 22px; border-top:1px solid var(--hairline);
  font:400 15.5px/1.5 var(--font-body); color:var(--body); }
.mt-list li:last-child { border-bottom:1px solid var(--hairline); }
.mt-list li::before { content:""; position:absolute; left:1px; top:17px; width:8px; height:8px; background:var(--ink); }

/* The other three sessions */
.mt-3up { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.mt-card { display:flex; flex-direction:column; align-items:flex-start; padding:28px 28px 30px;
  background:var(--paper); border:1px solid var(--hairline); border-top:2px solid var(--rule); }
body.fn .mt-card h3 { margin:0 0 12px; font:700 23px/1.2 var(--font-display); letter-spacing:-.015em; color:var(--ink); }
.mt-card .mt-priceline { margin-bottom:16px; }
.mt-card .mt-price { font-size:26px; }
.mt-card .mt-desc { font-size:15.5px; margin-bottom:16px; }
.mt-share { margin:0 0 24px; font:400 14.5px/1.55 var(--font-body); color:var(--muted); }
.mt-share strong { font-weight:600; color:var(--ink); }
.mt-card .mt-btn { margin-top:auto; }

/* What mentees say (added 2026-10-26): verbatim reviews in two balanced columns */
.mt-quotes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; }
.mt-quotes-col { display:flex; flex-direction:column; gap:24px; }
.mt-quote-card { margin:0; padding:28px 30px 26px; background:var(--paper-tint-2); border-top:2px solid var(--rule); }
.mt-quote-card blockquote { margin:0; padding:0; border:0; }
.mt-quote-card blockquote p { margin:0; font:400 16.5px/1.65 var(--font-body); color:var(--body); }
.mt-quote-card blockquote p::before { content:"\201C"; }
.mt-quote-card blockquote p::after { content:"\201D"; }
.mt-quote-card figcaption { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin:0 0 12px; }
.mt-quote-name { font:700 16px/1.3 var(--font-display); color:var(--ink); }
/* Long reviews: clamped to 6 lines once JS confirms it can expand them */
body.fn.mt-js .mt-quote-card blockquote p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; line-clamp:6; overflow:hidden; }
body.fn.mt-js .mt-quote-card.is-open blockquote p { display:block; -webkit-line-clamp:unset; line-clamp:none; overflow:visible; }
body.fn .mt-more { display:inline-flex; align-items:center; min-height:44px; margin:4px 0 0; padding:10px 0; border:0; background:none;
  font:600 15px/1.3 var(--font-body); color:var(--ink); cursor:pointer;
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px; }
body.fn .mt-more:hover { color:var(--muted); }
body.fn .mt-more:focus-visible, body.fn .mt-bio-more:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.mt-quote-meta { font:400 14px/1.4 var(--font-body); color:var(--muted); }

/* How a session works */
.mt-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; padding:0; list-style:none; border-top:2px solid var(--rule); }
.mt-steps li { padding:24px 24px 8px; border-right:1px solid var(--hairline); }
.mt-steps li:first-child { padding-left:0; }
.mt-steps li:last-child { padding-right:0; border-right:none; }
.mt-step-num { display:block; margin-bottom:14px; font:800 30px/1 var(--font-display); color:var(--ink); }
body.fn .mt-steps h3 { margin:0 0 8px; font:700 18px/1.25 var(--font-display); letter-spacing:-.01em; color:var(--ink); }
.mt-steps p { margin:0; font:400 15px/1.55 var(--font-body); color:var(--body); }

/* Ongoing career development: quieter than the sessions */
.mt-plans { margin:0; padding:0; list-style:none; border-top:1px solid var(--rule); }
.mt-plans li { display:grid; grid-template-columns:150px minmax(0,1.1fr) minmax(0,1.5fr) 200px; gap:24px; align-items:baseline;
  padding:20px 0; border-bottom:1px solid var(--hairline); }
body.fn .mt-plans h3 { margin:0; font:700 19px/1.2 var(--font-display); letter-spacing:-.01em; color:var(--ink); }
.mt-plan-terms { margin:0; font:500 15.5px/1.4 var(--font-body); color:var(--ink); font-variant-numeric:tabular-nums; }
.mt-plan-desc { margin:0; font:400 15.5px/1.5 var(--font-body); color:var(--muted); }
.mt-plans .mt-btn { width:100%; }

/* Questions */
.mt-faq { margin:0; border-top:1px solid var(--rule); }
.mt-faq-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:32px; padding:20px 0; border-bottom:1px solid var(--hairline); }
body.fn .mt-faq h3 { margin:0; font:600 17px/1.4 var(--font-body); color:var(--ink); }
.mt-faq p { margin:0; font:400 16px/1.6 var(--font-body); color:var(--body); max-width:62ch; }

/* Close */
.mt-close { margin-top:56px; padding:56px 0 64px; background:var(--paper-tint); border-top:1px solid var(--hairline); }
body.fn .mt-close h2 { margin:0 0 14px; font:800 36px/1.08 var(--font-display); letter-spacing:-.02em; color:var(--ink); max-width:none; }
.mt-close p { margin:0 0 26px; font:400 17px/1.6 var(--font-body); color:var(--muted); max-width:56ch; }

/* Phone booking bar: only exists once JS confirms it can manage it, phones only */
.mt-sticky { display:none; }
body.fn .mt-bio-more { display:none; }

/* Between phone and desktop */
@media (max-width:1080px) {
  .mt-plans li { grid-template-columns:150px minmax(0,1fr) 200px; gap:6px 24px; }
  .mt-plan-desc { grid-column:2 / 3; grid-row:2; }
  .mt-plans .mt-btn { grid-column:3; grid-row:1 / span 2; align-self:center; }
}
@media (max-width:920px) {
  body.fn .mt-hero h1 { font-size:clamp(34px, 5.6vw, 44px); }
  body.fn .mt-section { padding:44px 0 16px; }
  body.fn .mt-section .fn-shead { margin-bottom:28px; }
  .mt-lead { grid-template-columns:1fr; }
  .mt-lead-main { padding:32px 28px 32px; }
  .mt-lead-side { padding:28px 28px 32px; border-left:none; border-top:1px solid var(--hairline); }
  body.fn .mt-lead h3 { font-size:32px; }
  .mt-3up { grid-template-columns:1fr; gap:20px; }
  .mt-quotes { grid-template-columns:1fr; gap:20px; }
  .mt-quotes-col { gap:20px; }
  .mt-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mt-steps li { padding:22px 20px 22px 0; border-right:none; border-bottom:1px solid var(--hairline); }
  .mt-steps li:nth-child(odd) { border-right:1px solid var(--hairline); }
  .mt-steps li:nth-child(even) { padding-left:20px; padding-right:0; }
  .mt-faq-row { grid-template-columns:1fr; gap:6px; }
  body.fn .mt-about { grid-template-columns:1fr; }
  .mt-quote p { font-size:21px; max-width:none; }
  body.fn .mt-close h2 { font-size:30px; }
  .mt-close { margin-top:40px; padding:44px 0 52px; }
}
@media (max-width:640px) {
  body.fn .mt-hero .fn-hero-deck { font-size:17px; }
  .mt-hero-ctas { gap:12px 24px; }
  .mt-hero-ctas .mt-btn { width:100%; }
  /* Long button labels: smaller and balanced if they wrap */
  body.fn .mt-hero .mt-btn, body.fn .mt-lead .mt-btn { font-size:15px; padding:12px 16px; text-wrap:balance; }
  /* Keep focused elements clear of the sticky bar */
  html { scroll-padding-bottom:96px; }
  .mt-plans li { grid-template-columns:1fr; gap:6px; }
  .mt-plan-desc, .mt-plans .mt-btn { grid-column:auto; grid-row:auto; }
  .mt-plans .mt-btn { justify-self:start; width:auto; margin-top:10px; }

  /* About on phones: no second portrait; first paragraph, then a More about me toggle */
  body.fn .mt-about .fn-portrait--about { display:none; }
  body.fn .mt-bio.mt-bio-ready:not(.is-open) > p:not(.lead) { display:none; }
  body.fn .mt-bio.mt-bio-ready .lead { margin-bottom:0; }
  body.fn .mt-bio.mt-bio-ready.is-open .lead { margin-bottom:22px; }
  body.fn .mt-bio-more { display:inline-flex; margin-top:8px; }
  /* The Why I mentor aside waits behind More about me, so the reviews come sooner */
  body.fn .mt-about.mt-bio-ready:not(.is-bio-open) .mt-quote { display:none; }

  /* Sticky booking bar */
  body.fn.mt-sticky-ready .mt-sticky {
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:50;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background:var(--paper); border-top:2px solid var(--rule);
    transform:translateY(110%); visibility:hidden;
    transition:transform .25s var(--ease), visibility 0s linear .25s;
  }
  body.fn.mt-sticky-ready .mt-sticky.is-shown { transform:none; visibility:visible; transition:transform .25s var(--ease); }
  body.fn .mt-sticky-btn { width:100%; }
  /* Keep the chat launcher clear of the booking bar while the bar is up. */
  body.fn.mt-sticky-shown .ai-launcher { bottom:calc(86px + env(safe-area-inset-bottom, 0px)); }
  body.fn .mt-sticky-btn:focus-visible { outline:3px solid var(--ink); outline-offset:3px; box-shadow:inset 0 0 0 2px var(--paper); }
  /* The bar hides at the closing section, so the footer keeps its normal padding
     (fieldnotes.css adds 96px at 920px for the chat launcher, which this page no longer loads). */
  body.fn .site-footer { padding-bottom:48px; }
}
@media (max-width:640px) and (prefers-reduced-motion:reduce) {
  body.fn.mt-sticky-ready .mt-sticky, body.fn.mt-sticky-ready .mt-sticky.is-shown { transition:none; }
}
@media (max-width:560px) {
  .mt-steps { grid-template-columns:1fr; }
  .mt-steps li, .mt-steps li:nth-child(even) { padding:20px 0; border-right:none; }
  .mt-steps li:nth-child(odd) { border-right:none; }
  .mt-card { padding:24px 22px 26px; }
  .mt-quote-card { padding:24px 22px 22px; }
  .mt-lead-main, .mt-lead-side { padding-left:22px; padding-right:22px; }
}

/* This page does not load the chat launcher, so drop the 96px footer padding fieldnotes.css reserves for it (added 2026-10-26) */
body.fn .site-footer { padding-bottom:48px; }

/* No second rule directly under a section heading: the heading already draws one. */
body.fn .fn-shead + .mt-steps, body.fn .fn-shead + .mt-faq { border-top:0; }