/* iMentorLink public site.

   Hand written and small on purpose: the point of this page is that someone
   searching for us can read it on a prepaid data bundle. No framework, no
   build step, no animation library.

   The motion here has one job, which is to show the product rather than
   decorate the page. A visitor should watch a goal turn into a matched mentor
   before they have read a word about how matching works.

   Everything that moves is turned off wholesale under prefers-reduced-motion
   at the bottom of this file, and nothing is hidden unless script is running
   to bring it back (the .js guard). */

:root {
  --primary: #5B4FE8;
  --primary-deep: #453BC7;
  --primary-light: #6E63EF;
  --ember: #FF6A39;
  --ember-light: #FF8A5F;
  --success: #1F8A5F;
  --success-soft: #E6F4ED;
  --sand: #F6F4EF;
  --soft-violet: #ECEAFC;
  --ink: #211F3D;
  --slate: #6B6E85;
  --border: #E4E2DC;
  --radius: 16px;
  --radius-lg: 22px;
  --wrap: 1140px;

  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: Fraunces, Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* One place to change the feel of every transition. */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .18s;
  --t-ui: .28s;
  --t-slow: .5s;

  --shadow-sm: 0 2px 8px rgba(33, 31, 61, .06);
  --shadow: 0 10px 30px rgba(33, 31, 61, .08);
  --shadow-lg: 0 24px 60px rgba(33, 31, 61, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: #FDFCFA;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ------------------------------------------------------- the background

   One continuous field behind the entire document rather than a different
   colour per section. Four brand-coloured pools drift very slowly against
   each other, which reads as depth rather than as movement: at 34 seconds a
   cycle nobody watches it happen, they only notice the page is not flat. */
.field {
  position: fixed; inset: -20vmax; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 12% 8%,  rgba(91, 79, 232, .17), transparent 62%),
    radial-gradient(34vmax 34vmax at 88% 22%, rgba(255, 106, 57, .12), transparent 60%),
    radial-gradient(40vmax 40vmax at 74% 82%, rgba(31, 138, 95, .10), transparent 62%),
    radial-gradient(30vmax 30vmax at 22% 74%, rgba(140, 131, 245, .14), transparent 60%),
    linear-gradient(180deg, #FDFCFA 0%, #F8F6F1 50%, #F3F0E8 100%);
  animation: drift 34s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-1.5%, 1.2%, 0) scale(1.04); }
  100% { transform: translate3d(1.4%, -1%, 0) scale(1.02); }
}

/* A faint mentor-to-mentee lattice over the field. It is the product's own
   metaphor used as texture, and at this opacity it registers as paper grain
   rather than as a graphic. */
.field::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    radial-gradient(circle at center, rgba(91, 79, 232, .16) 1.4px, transparent 1.5px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 78%);
}

/* How far down the page you are. Three pixels, brand gradient, and it makes
   a long scrolling page feel finite. */
.progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 60; width: 0;
  background: linear-gradient(90deg, var(--primary), var(--ember));
  transition: width .1s linear;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: -.01em; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: var(--primary); }
img, svg { max-width: 100%; }

/* Numbers, metrics and identifiers are monospaced throughout, so a figure
   always looks like a figure and never drifts as it counts up. */
.mono, .stat b, .ms-pct, .pv-num, .mr-pct { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.lead { font-size: 1.12rem; color: var(--slate); max-width: 62ch; }
.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--primary); margin-bottom: 12px;
}
section { padding: 88px 0; position: relative; }
.tinted { background: linear-gradient(180deg, rgba(236, 234, 252, .42), rgba(236, 234, 252, 0)); }

/* Focus that is always visible, on everything, in the brand colour. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 6px;
}

/* A skip link, because the nav is the first thing in the tab order. */
.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--primary); color: #fff; padding: 10px 18px; border-radius: 10px;
  text-decoration: none; font-weight: 600;
}
.skip:focus { left: 12px; }

/* ---------------------------------------------------------------- header */

header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 252, 250, .82);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-ui), box-shadow var(--t-ui), backdrop-filter var(--t-ui);
}
header.scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 2px 24px rgba(33, 31, 61, .07);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
header .wrap { display: flex; align-items: center; gap: 24px; height: 72px; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; }
.brand svg { width: 34px; height: 34px; flex: none; }
.brand span { font-family: var(--serif); font-size: 1.12rem; letter-spacing: -.01em; }

header nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
header nav a {
  position: relative;
  color: var(--slate); text-decoration: none; font-weight: 500; font-size: .94rem;
  padding: 8px 14px; border-radius: 10px;
  transition: color var(--t-fast), background var(--t-fast);
}
header nav a:hover { color: var(--ink); background: rgba(91, 79, 232, .06); }

/* The active section indicator. A short underline rather than a filled pill,
   so it reads as "you are here" and not as a second call to action. */
header nav a[data-nav]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px;
  border-radius: 2px; background: var(--primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-ui) var(--ease-out);
}
header nav a[data-nav].active { color: var(--primary); }
header nav a[data-nav].active::after { transform: scaleX(1); }

.nav-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 12px;
  background: #fff; color: var(--ink); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }
.nav-toggle .bar { transition: transform var(--t-ui) var(--ease-out), opacity var(--t-fast); transform-origin: center; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: 999px;
  font-weight: 600; font-size: .96rem; text-decoration: none; border: 1.5px solid transparent;
  cursor: pointer; font-family: var(--sans);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-ui), background var(--t-fast), border-color var(--t-fast);
}
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 8px 22px rgba(91, 79, 232, .28); }
.btn-primary:hover { background: var(--primary-deep); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(91, 79, 232, .34); }
.btn-ghost { border-color: var(--border); color: var(--ink); background: #fff; }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.btn-light { background: #fff; color: var(--primary-deep); }
/* A ghost button on a dark ground. The plain .btn-ghost is white on white
   there, which renders as a blank pill with an invisible label — which is
   exactly what the closing section was showing. */
.btn-ghost-invert { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
.btn-ghost-invert:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; transform: translateY(-2px); }
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }

/* ------------------------------------------------------------------- hero */

.hero { padding: 72px 0 64px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }
.hero-grid > * { min-width: 0; }

.hero h1 em { font-style: normal; color: var(--primary); position: relative; }
/* One line, and therefore one unbroken sweep, only where there is room. */
@media (min-width: 560px) { .hero h1 em { white-space: nowrap; } }
/* The emphasis is underlined with a soft brand sweep rather than a flat rule,
   so it reads as handwriting on the headline instead of a link. */
.hero h1 em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .22em;
  background: linear-gradient(90deg, rgba(255, 106, 57, .30), rgba(91, 79, 232, .22));
  border-radius: 999px; z-index: -1;
}
.hero .lead { margin: 18px 0 28px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-note {
  display: flex; align-items: center; gap: 10px;
  margin-top: 26px; font-size: .92rem; color: var(--slate);
}
.hero-note svg { width: 20px; height: 20px; flex: none; }

/* Blurred brand orbs. Three, large and slow, for depth rather than sparkle. */
.blob { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: -1; }
.blob-a { width: 460px; height: 460px; background: rgba(91, 79, 232, .18); top: -160px; right: -120px; }
.blob-b { width: 380px; height: 380px; background: rgba(255, 106, 57, .13); bottom: -140px; left: -110px; }
.blob-c { width: 300px; height: 300px; background: rgba(31, 138, 95, .10); top: 40%; left: 45%; }

/* ------------------------------------------------- hero matching sequence */

/* Built from the same components the product uses, at a slightly larger
   scale, so what a visitor watches is what they will actually meet. */
.match-scene {
  position: relative;
  display: grid; gap: 0; justify-items: stretch;
  max-width: 420px; margin-left: auto;
}

.ms-card {
  position: relative;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px 20px; box-shadow: var(--shadow);
}

/* Every mock interface on this page carries this tag. Nobody should have to
   wonder whether the person on the card is a real mentor. */
.ms-tag, .demo-tag {
  position: absolute; top: 12px; right: 14px;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--slate); background: var(--sand); border: 1px solid var(--border);
  padding: 3px 8px; border-radius: 999px;
}

.ms-label {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 8px;
}
.ms-typed { margin: 0; font-size: 1.02rem; font-weight: 500; min-height: 3.2em; line-height: 1.5; }
.ms-caret {
  display: inline-block; width: 2px; height: 1.05em; vertical-align: -.16em;
  background: var(--primary); margin-left: 2px;
  animation: caret 1s step-end infinite;
}
@keyframes caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.match-scene.is-done .ms-caret { display: none; }

/* The connector. The line draws downward, and the matching state sits on it. */
.ms-link { position: relative; height: 84px; display: grid; place-items: center; }
.ms-line { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 2px; height: 100%; overflow: visible; }
.ms-line path {
  stroke: var(--primary); stroke-width: 2; stroke-linecap: round; fill: none;
  stroke-dasharray: 4 7; opacity: .5;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset .9s var(--ease-out);
}
.match-scene.is-linking .ms-line path,
.match-scene.is-done .ms-line path { stroke-dashoffset: 0; }

.ms-state {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 15px; font-size: .84rem; font-weight: 600; color: var(--primary-deep);
  box-shadow: var(--shadow-sm);
  opacity: 0; transform: scale(.9);
  transition: opacity var(--t-ui), transform var(--t-ui) var(--ease-out);
}
.match-scene.is-linking .ms-state { opacity: 1; transform: scale(1); }
.match-scene.is-done .ms-state { opacity: 0; transform: scale(.9); }

/* The four point sparkle from the brand, used only for Mentor. */
.spark { width: 15px; height: 15px; flex: none; fill: var(--ember); }
.match-scene.is-linking .spark { animation: spin 1.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* The mentor card assembles rather than appears. */
.ms-mentor { opacity: 0; transform: translateY(14px) scale(.98); transition: opacity var(--t-slow), transform var(--t-slow) var(--ease-out); }
.match-scene.is-done .ms-mentor { opacity: 1; transform: none; }

.ms-head { display: flex; align-items: center; gap: 13px; margin-bottom: 15px; }
.ms-avatar {
  width: 50px; height: 50px; border-radius: 15px; flex: none;
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: 1.06rem; color: #fff;
  background: linear-gradient(135deg, var(--primary-light), var(--primary-deep));
}
.ms-name { display: block; font-weight: 700; font-size: 1rem; }
.ms-role { display: block; font-size: .84rem; color: var(--slate); }

/* Verified pops in last and on its own, because it is the promise the whole
   platform rests on and it should read as the final confirmation. */
.ms-verified {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--success-soft); color: var(--success);
  border: 1px solid rgba(31, 138, 95, .25);
  padding: 5px 11px; border-radius: 999px; font-size: .76rem; font-weight: 700;
  opacity: 0; transform: scale(.7);
  transition: opacity .3s, transform .45s cubic-bezier(.34, 1.7, .5, 1);
}
.ms-verified svg { width: 13px; height: 13px; }
.match-scene.is-done .ms-verified { opacity: 1; transform: scale(1); transition-delay: .55s; }

.ms-match { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.ms-pct { font-size: 1.5rem; font-weight: 700; color: var(--primary-deep); flex: none; }
.ms-bar { flex: 1; height: 7px; border-radius: 999px; background: var(--soft-violet); overflow: hidden; }
.ms-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--primary-light), var(--primary-deep)); transition: width 1.1s var(--ease-out); }

.ms-reason {
  margin: 0; font-size: .86rem; color: var(--slate);
  background: var(--sand); border-radius: 12px; padding: 10px 13px;
  border-left: 3px solid var(--ember);
}

/* Idle float once the sequence has settled. Four pixels, six seconds: enough
   to feel alive, not enough to pull the eye off the copy beside it. */
.match-scene.is-done .ms-goal { animation: float 6s ease-in-out infinite; }
.match-scene.is-done .ms-mentor { animation: float 6s ease-in-out infinite 1.2s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* Without script the scene is simply the composed end state. */
html:not(.js) .ms-state,
html:not(.js) .ms-caret { display: none; }
html:not(.js) .ms-mentor { opacity: 1; transform: none; }
html:not(.js) .ms-verified { opacity: 1; transform: none; }
html:not(.js) .ms-line path { stroke-dashoffset: 0; }

/* ------------------------------------------------------------ trust strip */

.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: 72px;
}
.stat {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 20px; box-shadow: var(--shadow-sm);
  transition: transform var(--t-ui) var(--ease-out), box-shadow var(--t-ui);
}
.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.stat .ic-sm { display: block; width: 26px; height: 26px; margin-bottom: 12px; color: var(--primary); }
.stat .ic-sm svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stat b { display: block; font-size: 2.5rem; font-weight: 700; color: var(--primary-deep); line-height: 1.1; letter-spacing: -.02em; }
.stat > span:last-child { display: block; margin-top: 7px; font-size: .87rem; color: var(--slate); line-height: 1.5; }
.stat b span { font-size: inherit; color: inherit; }

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

/* A vertical narrative rather than four columns: each step plays a small
   piece of the interface beside it as you arrive at it. */
.steps { margin-top: 52px; position: relative; }

.step-row {
  display: grid; grid-template-columns: 56px 1fr 1fr; gap: 28px;
  align-items: start; padding-bottom: 56px; position: relative;
}
.step-row > * { min-width: 0; }
.step-row:last-child { padding-bottom: 0; }

.step-mark { position: relative; display: grid; justify-items: center; }
.step-num {
  width: 44px; height: 44px; border-radius: 50%; flex: none; z-index: 2;
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: .95rem;
  background: #fff; color: var(--slate); border: 2px solid var(--border);
  transition: background var(--t-ui), color var(--t-ui), border-color var(--t-ui), transform var(--t-ui) var(--ease-out);
}
.step-row.in .step-num { background: var(--primary); border-color: var(--primary); color: #fff; transform: scale(1.06); }

/* The line that joins the steps draws itself as you scroll through them. */
.step-line {
  position: absolute; top: 44px; bottom: -12px; left: 50%; width: 2px;
  transform: translateX(-50%); background: var(--border); overflow: hidden;
}
.step-line i { display: block; width: 100%; height: 0; background: var(--primary); transition: height .7s var(--ease-out); }
.step-row.in .step-line i { height: 100%; }
.step-row:last-child .step-line { display: none; }

.step-body h3 { margin-bottom: 8px; }
.step-body p { color: var(--slate); margin: 0; font-size: .96rem; }

/* The little interface that plays beside each step. */
.step-demo {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow-sm); position: relative;
  min-height: 128px;
}

.sd-line { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.sd-key { font-size: .74rem; color: var(--slate); width: 74px; flex: none; }
.sd-val {
  flex: 1; height: 9px; border-radius: 5px; background: var(--soft-violet);
  transform-origin: left; transform: scaleX(0);
  transition: transform .5s var(--ease-out);
}
.step-row.in .sd-val { transform: scaleX(1); }
.sd-val.filled { background: linear-gradient(90deg, var(--primary-light), var(--soft-violet)); }
.sd-val.short { max-width: 52%; }
.sd-val.mid { max-width: 74%; }

.sd-input {
  border: 1.5px solid var(--soft-violet); border-radius: 11px; padding: 11px 13px;
  font-size: .88rem; min-height: 62px; color: var(--ink); background: var(--sand);
}
.sd-input .ms-caret { height: .95em; }

/* Three ranked results cascading in. */
.sd-result {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 11px; background: var(--sand); margin-bottom: 7px;
  opacity: 0; transform: translateX(-10px);
  transition: opacity .4s, transform .4s var(--ease-out);
}
.step-row.in .sd-result { opacity: 1; transform: none; }
.step-row.in .sd-result:nth-child(2) { transition-delay: .12s; }
.step-row.in .sd-result:nth-child(3) { transition-delay: .24s; }
.sd-dot {
  width: 28px; height: 28px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, var(--primary-light), var(--primary-deep));
  color: #fff; display: grid; place-items: center; font-size: .7rem; font-weight: 700;
}
.sd-who { flex: 1; min-width: 0; }
.sd-who b { display: block; font-size: .82rem; }
.sd-who span { display: block; font-size: .72rem; color: var(--slate); }
.sd-score { font-family: var(--mono); font-size: .78rem; font-weight: 700; color: var(--primary-deep); }

/* The honest note. It belongs in the demo, not only in the copy. */
.sd-note {
  margin: 10px 0 0; font-size: .74rem; color: var(--slate);
  display: flex; align-items: center; gap: 7px;
}
.sd-note svg { width: 14px; height: 14px; flex: none; stroke: var(--slate); fill: none; stroke-width: 2; }

/* A message sending, and a reply starting to arrive. */
.sd-bubble {
  max-width: 82%; padding: 9px 13px; border-radius: 15px; font-size: .84rem; margin-bottom: 8px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s, transform .4s var(--ease-out);
}
.step-row.in .sd-bubble { opacity: 1; transform: none; }
.sd-bubble.out { margin-left: auto; background: var(--primary); color: #fff; border-bottom-right-radius: 5px; }
.sd-bubble.in-b { background: var(--sand); border-bottom-left-radius: 5px; }
.step-row.in .sd-bubble.in-b { transition-delay: .5s; }

.typing { display: inline-flex; gap: 4px; align-items: center; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--slate); opacity: .5; }
.step-row.in .typing i { animation: blink 1.2s ease-in-out infinite; }
.step-row.in .typing i:nth-child(2) { animation-delay: .16s; }
.step-row.in .typing i:nth-child(3) { animation-delay: .32s; }
@keyframes blink { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

.steps-end {
  text-align: center; margin: 44px 0 0;
  font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: var(--primary-deep);
}

/* ------------------------------------------------------------ who it is for */

.who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 46px; }
.who-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg); padding: 30px 26px; color: #fff;
  background: linear-gradient(150deg, var(--primary-light), var(--primary-deep));
  box-shadow: var(--shadow);
  transition: transform var(--t-ui) var(--ease-out), box-shadow var(--t-ui);
}
.who-card:nth-child(2) { background: linear-gradient(150deg, #FF8A5F, #E8541F); }
.who-card:nth-child(3) { background: linear-gradient(150deg, #2FA877, #17724D); }
.who-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.who-card h3 { font-size: 1.3rem; margin-bottom: 6px; }
.who-card ul { list-style: none; padding: 0; margin: 18px 0 0; }
.who-card li {
  position: relative; padding: 7px 0 7px 26px; font-size: .92rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  opacity: 0; transform: translateX(-8px);
  transition: opacity .4s, transform .4s var(--ease-out);
}
.who-card.in li { opacity: 1; transform: none; }
.who-card.in li:nth-child(1) { transition-delay: .06s; }
.who-card.in li:nth-child(2) { transition-delay: .12s; }
.who-card.in li:nth-child(3) { transition-delay: .18s; }
.who-card.in li:nth-child(4) { transition-delay: .24s; }
.who-card.in li:nth-child(5) { transition-delay: .30s; }
.who-card li::before {
  content: ""; position: absolute; left: 2px; top: 15px;
  width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .85);
}
.ring {
  position: absolute; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .22);
  pointer-events: none;
}
/* The illustration fragment in the corner of each card. */
.who-ill { position: absolute; right: -10px; bottom: -10px; width: 118px; opacity: .17; pointer-events: none; }
.who-ill svg { width: 100%; height: auto; }

/* ------------------------------------------------- mentor discovery rail */

.rail-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 26px 0 16px; }

.search {
  position: relative; flex: 1; min-width: 240px; max-width: 380px;
}
.search svg {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; stroke: var(--slate); fill: none; stroke-width: 2; pointer-events: none;
}
.search input {
  width: 100%; padding: 13px 16px 13px 42px;
  border: 1.5px solid var(--border); border-radius: 999px; background: #fff;
  font-family: var(--sans); font-size: .92rem; color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.search input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(91, 79, 232, .12); }
.search input::placeholder { color: var(--slate); }

.filters { display: flex; gap: 9px; flex-wrap: wrap; margin: 0 0 24px; }
.chip {
  border: 1.5px solid var(--border); background: #fff; color: var(--slate);
  border-radius: 999px; padding: 8px 16px; font-size: .86rem; font-weight: 600;
  cursor: pointer; font-family: var(--sans);
  transition: all var(--t-fast) var(--ease-out);
}
.chip:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }

.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 290px; gap: 20px;
  overflow-x: auto; padding: 6px 4px 22px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.rail::-webkit-scrollbar-track { background: transparent; }

/* Photo first. A face at this size does more to make the platform feel
   populated than any number could, and unlike a number it is honest: the
   card says Demo and the person is AI generated, so nobody real is standing
   behind a badge they never earned. */
.mentor-card {
  scroll-snap-align: start;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column; position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-ui) var(--ease-out), box-shadow var(--t-ui);
}
.mentor-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.mentor-card[hidden] { display: none; }

.mc-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--soft-violet); }
.mc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.mentor-card:hover .mc-photo img { transform: scale(1.03); }

/* The scrim only exists so the name stays legible on any photograph. */
.mc-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(33, 31, 61, .88) 0%, rgba(33, 31, 61, .35) 34%, rgba(33, 31, 61, 0) 62%);
}
.mc-overlay { position: absolute; left: 16px; right: 16px; bottom: 13px; z-index: 2; color: #fff; }
.mc-name { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.08rem; line-height: 1.2; }
.mc-title { display: block; font-size: .8rem; opacity: .88; margin-top: 2px; }

.mc-cat {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(255, 255, 255, .92); color: var(--primary-deep);
  border-radius: 999px; padding: 5px 11px; font-size: .72rem; font-weight: 700;
  backdrop-filter: blur(6px);
}
.mentor-card .demo-tag { z-index: 2; background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); }

.mc-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }

.mc-verified {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--success-soft); color: var(--success);
  border: 1px solid rgba(31, 138, 95, .25);
  padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700;
  align-self: flex-start; margin-bottom: 11px;
}
.mc-verified svg { width: 12px; height: 12px; }

.mc-meta { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--slate); margin: 0 0 11px; }
.mc-meta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }

.mc-match { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.mr-pct { font-size: 1.08rem; font-weight: 700; color: var(--primary-deep); }
.mc-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--soft-violet); overflow: hidden; }
.mc-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary-light), var(--primary-deep)); width: 0; transition: width .9s var(--ease-out); }
.mentor-card.in .mc-bar i { width: var(--w, 0%); }

.mc-why { font-size: .8rem; color: var(--slate); margin: 0 0 15px; line-height: 1.5; }
.mc-link {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: .88rem; font-weight: 600; text-decoration: none; color: var(--primary);
  transition: gap var(--t-fast);
}
.mc-link:hover { gap: 10px; }
.mc-link svg { width: 15px; height: 15px; }

.rail-hint { font-size: .82rem; color: var(--slate); margin: 0; display: flex; align-items: center; gap: 8px; }

/* ------------------------------------------------------------- mentor ai */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px 24px; box-shadow: var(--shadow-sm);
  transition: transform var(--t-ui) var(--ease-out), box-shadow var(--t-ui);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--slate); font-size: .93rem; margin: 0; }
.card .ic {
  width: 46px; height: 46px; border-radius: 14px; margin-bottom: 16px;
  display: grid; place-items: center; background: var(--soft-violet); color: var(--primary);
}
.card.ember .ic { background: rgba(255, 106, 57, .13); color: var(--ember); }
.card .ic svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The demo exchange above the honesty cards. */
.ai-chat {
  max-width: 620px; margin: 40px auto 0;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 22px; box-shadow: var(--shadow); position: relative;
}
.ai-q {
  background: var(--soft-violet); border-radius: 15px; border-bottom-right-radius: 5px;
  padding: 11px 15px; font-size: .92rem; margin: 0 0 16px; margin-left: auto; max-width: 80%;
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s, transform .45s var(--ease-out);
}
.ai-chat.in .ai-q { opacity: 1; transform: none; }

.ai-a { display: flex; gap: 12px; align-items: flex-start; }
.ai-face {
  width: 36px; height: 36px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary-light), var(--primary-deep));
}
.ai-face svg { width: 19px; height: 19px; fill: var(--ember); }
.ai-chat.in .ai-face svg { animation: pulse-spark 3.5s ease-in-out infinite; }
@keyframes pulse-spark { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.14); opacity: .82; } }

.ai-sugg {
  background: var(--sand); border-radius: 13px; padding: 12px 14px; margin-bottom: 9px;
  font-size: .89rem;
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s, transform .45s var(--ease-out);
}
.ai-chat.in .ai-sugg { opacity: 1; transform: none; }
.ai-chat.in .ai-sugg:nth-of-type(1) { transition-delay: .45s; }
.ai-chat.in .ai-sugg:nth-of-type(2) { transition-delay: .65s; }
/* Every AI line is labelled. This is the section about not pretending, so the
   demo had better not pretend either. */
.ai-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary-deep); background: var(--soft-violet);
  padding: 3px 8px; border-radius: 999px; margin-bottom: 7px;
}
.ai-src { display: block; margin-top: 6px; font-size: .76rem; color: var(--slate); }
.ai-src b { color: var(--primary-deep); font-weight: 600; }

/* ------------------------------------------------------- progress preview */

.pv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.pv-grid > * { min-width: 0; }
.pv-card {
  position: relative;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: var(--shadow);
}
.pv-head { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; }

.pv-ring { width: 108px; height: 108px; flex: none; position: relative; }
.pv-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pv-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.pv-ring .track { stroke: var(--soft-violet); }
.pv-ring .fill {
  stroke: url(#pvgrad);
  stroke-dasharray: 289;      /* 2 * pi * r, r = 46 */
  stroke-dashoffset: 289;
  transition: stroke-dashoffset 1.4s var(--ease-out);
}
.pv-ring .pv-num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 1.5rem; font-weight: 700; color: var(--primary-deep);
}
.pv-head h3 { margin: 0 0 4px; font-size: 1.1rem; }
.pv-head p { margin: 0; font-size: .86rem; color: var(--slate); }

.pv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.pv-stat { background: var(--sand); border-radius: 13px; padding: 13px; text-align: center; }
.pv-stat b { display: block; font-family: var(--mono); font-size: 1.32rem; font-weight: 700; color: var(--primary-deep); }
.pv-stat span { display: block; font-size: .72rem; color: var(--slate); margin-top: 3px; line-height: 1.35; }

.pv-next {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px dashed var(--border); border-radius: 14px; padding: 13px 15px;
}
.pv-next .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ember); flex: none; }
.pv-next span { font-size: .74rem; color: var(--slate); display: block; }
.pv-next b { font-size: .9rem; display: block; }

/* ----------------------------------------------------------- trust & safety */

.callout {
  background: var(--success-soft);
  border: 1px solid rgba(31, 138, 95, .3);
  border-left: 5px solid var(--success);
  border-radius: var(--radius); padding: 22px 26px;
  display: flex; gap: 16px; align-items: flex-start;
}
.callout .ic-warn { width: 26px; height: 26px; flex: none; color: var(--success); margin-top: 2px; }
.callout .ic-warn svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.callout p { margin: 0; font-size: .95rem; }
.callout strong { color: var(--ink); }

/* Verification gets its own visual language: green, and a person, never a
   machine. Used on the safety cards only. */
.card.verify .ic { background: var(--success-soft); color: var(--success); }

/* ------------------------------------------------------------ closing cta */

.closing { position: relative; overflow: hidden; padding: 96px 0; text-align: center; }
.closing-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .5; }
.closing-lines line { stroke: var(--primary); stroke-width: 1; opacity: .22; }
.closing-lines circle { fill: var(--primary); opacity: .3; }
.closing-lines .draw {
  stroke-dasharray: 300; stroke-dashoffset: 300;
  transition: stroke-dashoffset 1.6s var(--ease-out);
}
.closing.in .closing-lines .draw { stroke-dashoffset: 0; }
.closing h2 { max-width: 18ch; margin: 0 auto .4em; }
.closing p { max-width: 46ch; margin: 0 auto 30px; color: var(--slate); font-size: 1.08rem; }
.closing .hero-cta { justify-content: center; }

/* ---------------------------------------------------------------- contact */

.contact-box {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--primary-light), var(--primary-deep));
  border-radius: 28px; padding: 52px 40px; color: #fff; text-align: center;
  box-shadow: var(--shadow-lg);
}
.contact-box h2 { color: #fff; }
.contact-box > p { color: rgba(255, 255, 255, .9); max-width: 52ch; margin: 0 auto 24px; }
.contact-mail {
  display: inline-flex; align-items: center; gap: 10px;
  color: #fff; text-decoration: none; font-weight: 600; font-size: 1.05rem;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28);
  padding: 12px 22px; border-radius: 999px;
  transition: background var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.contact-mail:hover { background: rgba(255, 255, 255, .22); transform: translateY(-2px); }

.enquiry-form { max-width: 560px; margin: 30px auto 0; text-align: left; }
.enquiry-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea {
  width: 100%; padding: 12px 15px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .14);
  color: #fff; font-family: var(--sans); font-size: .94rem;
}
.enquiry-form input::placeholder, .enquiry-form textarea::placeholder { color: rgba(255, 255, 255, .7); }
.enquiry-form select { color: #fff; }
.enquiry-form select option { color: var(--ink); }
.enquiry-form textarea { margin-bottom: 14px; resize: vertical; }
.enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus {
  outline: 2px solid #fff; outline-offset: 1px; background: rgba(255, 255, 255, .2);
}
.enquiry-result { margin: 12px 0 0; font-size: .9rem; color: #fff; min-height: 1.4em; }
.enquiry-result.bad { color: #FFD9CC; }

/* ----------------------------------------------------------------- footer */

/* Light, like the rest of the page. A dark slab at the bottom cut the
   document in two and stopped the background field halfway. */
footer {
  background: linear-gradient(180deg, rgba(236, 234, 252, .55), rgba(246, 244, 239, .92));
  border-top: 1px solid var(--border);
  color: var(--slate); padding: 60px 0 30px;
}
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
footer h4 { color: var(--ink); font-size: .95rem; margin: 0 0 14px; }
footer a { display: block; color: var(--slate); text-decoration: none; padding: 5px 0; font-size: .9rem; transition: color var(--t-fast); }
footer a:hover { color: var(--primary); }
footer p { font-size: .9rem; line-height: 1.65; }
footer .brand { color: var(--ink) !important; }
.foot-bottom {
  margin-top: 42px; padding-top: 22px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .84rem; color: var(--slate);
}

/* ------------------------------------------------------------ legal pages */

/* Kept intact: the policy pages share this stylesheet. */
.legal-wrap { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.legal { padding: 56px 0 80px; }
.legal h2 { margin-top: 40px; }
.legal h3 { margin-top: 26px; }
.legal p, .legal li { color: var(--slate); }
.legal li { margin-bottom: 8px; }
.updated { font-size: .88rem; color: var(--slate); font-style: italic; }
.toc { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 26px; margin: 28px 0; }
.toc h3 { margin-top: 0; }
.toc a { display: block; padding: 4px 0; font-size: .93rem; }
.table-scroll { overflow-x: auto; margin: 20px 0; }
.table-scroll table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: .9rem; }
.table-scroll th, .table-scroll td { border: 1px solid var(--border); padding: 10px 13px; text-align: left; }
.table-scroll th { background: var(--soft-violet); font-weight: 600; }

/* ---------------------------------------------------------------- reveals */

/* Hidden only when script is present to reveal them, so the page still reads
   completely with JavaScript off. */
html.js .reveal { opacity: 0; transform: translateY(18px); }
html.js .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1023px) {
  section { padding: 68px 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  /* On a phone the matching demo belongs directly under the headline: it is
     the fastest explanation of the product on the page. */
  .match-scene { max-width: 440px; margin: 0 auto; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .who, .cards { grid-template-columns: 1fr; }
  .pv-grid { grid-template-columns: 1fr; gap: 32px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .step-row { grid-template-columns: 44px 1fr; }
  .step-demo { grid-column: 2; margin-top: 16px; }
}

@media (max-width: 719px) {
  header .wrap { height: 64px; }
  .nav-toggle { display: flex; }

  /* Full screen sheet rather than a squashed dropdown.

     The background is solid rather than translucent-plus-blur, and that is
     deliberate. An element with its own backdrop-filter becomes the containing
     block for any fixed positioned thing inside it, which is exactly the bug
     that broke this menu once already. At 98% opacity the blur was invisible
     anyway, so it was costing correctness and buying nothing. */
  header nav {
    position: fixed; inset: 0; z-index: 60;
    flex-direction: column; justify-content: center; align-items: stretch;
    gap: 4px; padding: 80px 28px 40px;
    background: #fdfcfa;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity var(--t-ui), transform var(--t-ui) var(--ease-out), visibility var(--t-ui);
    overflow-y: auto; overscroll-behavior: contain;
  }

  /* The header's own blur has to go while the sheet is open.
     `backdrop-filter` on an ancestor makes that ancestor the containing block
     for `position: fixed` children, so a scrolled header (which is when
     .scrolled adds the blur) trapped this full screen sheet inside a 64px
     high box. The links spilled out over the page with no background behind
     them and the page content painted straight through the menu.
     The blur is decoration. The menu opening is not. */
  html.nav-open header {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  header nav.open { opacity: 1; visibility: visible; transform: none; }
  header nav a {
    font-size: 1.3rem; font-family: var(--serif); font-weight: 700; color: var(--ink);
    padding: 14px 4px; border-bottom: 1px solid var(--border); border-radius: 0;
    opacity: 0; transform: translateY(12px);
    transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
  }
  header nav.open a { opacity: 1; transform: none; }
  header nav.open a:nth-child(1) { transition-delay: .06s; }
  header nav.open a:nth-child(2) { transition-delay: .12s; }
  header nav.open a:nth-child(3) { transition-delay: .18s; }
  header nav.open a:nth-child(4) { transition-delay: .24s; }
  header nav.open a:nth-child(5) { transition-delay: .30s; }
  header nav a[data-nav]::after { display: none; }
  header nav a.btn {
    justify-content: center; margin-top: 22px; border-bottom: none;
    font-family: var(--sans); font-size: 1rem; color: #fff; border-radius: 999px;
  }
  /* The toggle sits above the sheet so it can close it. */
  .nav-toggle { position: relative; z-index: 70; }

  .stats { grid-template-columns: 1fr; }
  .step-row { grid-template-columns: 36px 1fr; gap: 16px; padding-bottom: 40px; }
  .step-num { width: 36px; height: 36px; font-size: .84rem; }
  .contact-box { padding: 38px 22px; border-radius: 22px; }
  .enquiry-row { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .rail { grid-auto-columns: 82%; }
  .closing { padding: 72px 0; }
}

/* ------------------------------------------------------- reduced motion */

/* Everything above is decoration. Somebody who has asked their operating
   system for less movement gets the finished state immediately: no reveals,
   no counters, no drawing, no float, no parallax. The numbers still show
   their real values, because a stat reading "0 of listed mentors checked by
   a person" would be both wrong and alarming. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  html.js .reveal { opacity: 1; transform: none; }
  .ms-mentor, .ms-verified, .ai-q, .ai-sugg, .sd-result, .sd-bubble, .who-card li { opacity: 1; transform: none; }
  .ms-line path, .closing-lines .draw { stroke-dashoffset: 0; }
  .sd-val { transform: scaleX(1); }
  .ms-caret, .typing i { display: none; }
  .match-scene.is-done .ms-goal,
  .match-scene.is-done .ms-mentor { animation: none; }
  .ms-state { display: none; }
}

/* The hamburger becomes a close icon in place: the middle bar fades, the
   outer two rotate into a cross. Cheaper than swapping two icons, and it
   reads as one control rather than two. */
@media (max-width: 719px) {
  header nav.open ~ .nav-toggle .b1,
  .nav-toggle[aria-expanded="true"] .b1 { transform: translateY(5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .b2 { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .b3 { transform: translateY(-5px) rotate(-45deg); }
}

/* Until a photograph exists for a mentor, the card shows the brand gradient
   with their initials, sized and positioned exactly where the photo will go.
   A missing file should never be a broken image on the landing page. */
.mc-photo.is-placeholder {
  background: linear-gradient(140deg, var(--primary-light), var(--primary-deep));
  display: grid; place-items: center;
}
.mc-photo.is-placeholder::before {
  content: attr(data-initials);
  font-family: var(--serif); font-weight: 700; font-size: 2.6rem;
  color: rgba(255, 255, 255, .9);
}
.mentor-card:nth-child(3n) .mc-photo.is-placeholder { background: linear-gradient(140deg, #FF8A5F, #E8541F); }
.mentor-card:nth-child(3n+2) .mc-photo.is-placeholder { background: linear-gradient(140deg, #2FA877, #17724D); }

/* display on a class must never beat the hidden attribute. */
[hidden] { display: none !important; }


/* ===================================================== added interactions

   Everything below is decoration and every part of it is switched off under
   prefers-reduced-motion by the block at the end of this file. */

/* The typed-in values in the first step demo, which used to be grey bars. */
.sd-txt {
  flex: 1; min-width: 0; font-size: .82rem; font-weight: 500; color: var(--ink);
  background: var(--soft-violet); border-radius: 7px; padding: 5px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.step-row.in .sd-txt { opacity: 1; transform: none; }
.step-row.in .sd-line:nth-child(2) .sd-txt { transition-delay: .10s; }
.step-row.in .sd-line:nth-child(3) .sd-txt { transition-delay: .20s; }
.step-row.in .sd-line:nth-child(4) .sd-txt { transition-delay: .30s; }

/* Cards lean very slightly toward the pointer. Two degrees is the whole
   effect: enough that the page feels responsive to the hand, not so much
   that anyone catches it doing a trick. */
.tilt { transition: transform var(--t-ui) var(--ease-out), box-shadow var(--t-ui); will-change: transform; }
.tilt:hover { box-shadow: var(--shadow-lg); }

/* A sheen that crosses the primary button once on hover. */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.btn-primary:hover::after { animation: sheen .75s var(--ease-out); }
@keyframes sheen { to { left: 130%; } }

/* The step marker keeps a soft halo while its step is the one on screen. */
.step-row.in .step-num { box-shadow: 0 0 0 6px rgba(91, 79, 232, .12); }

/* Chips and search settle rather than snap. */
.chip { position: relative; }
.chip[aria-pressed="true"] { box-shadow: 0 6px 16px rgba(91, 79, 232, .3); }

/* The eyebrow gets a small leading rule, which ties the section headings to
   the connection motif in the background. */
.eyebrow { position: relative; padding-left: 34px; }
.eyebrow::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 24px; height: 2px;
  background: linear-gradient(90deg, var(--ember), var(--primary));
  border-radius: 2px; transform: translateY(-50%) scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.reveal.in .eyebrow::before, .reveal .eyebrow::before { transform: translateY(-50%) scaleX(1); }

/* The hero orbs lag the scroll very slightly. Set from script. */
.blob { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .field { animation: none; }
  .progress-bar { display: none; }
  .sd-txt { opacity: 1; transform: none; }
  .btn-primary:hover::after { animation: none; }
  .tilt:hover { transform: none; }
  .eyebrow::before { transform: translateY(-50%) scaleX(1); }
}


/* ================================================== the connection weave

   A slow network of points and the lines between them, drawn across the
   whole document rather than inside one section. It is the product's own
   idea used as texture: people, and the links between them, forming and
   dissolving. The pointer pulls nearby points toward it, so the page
   answers the hand without anything appearing to be a toy.

   Sits above the gradient field and below every piece of content. */
.weave {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none;
}

/* The dot lattice was doing the same job less well; the weave replaces it. */
.field::after { display: none; }

/* --------------------------------------------------------- Mentor's card */

.ai-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ai-name { display: block; font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.ai-sub { display: block; font-size: .8rem; color: var(--slate); }
.ai-flag {
  margin-left: auto; font-family: var(--mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; color: var(--primary-deep); background: var(--soft-violet);
  border: 1px solid rgba(91, 79, 232, .22); padding: 4px 10px; border-radius: 999px;
}
.ai-body { flex: 1; min-width: 0; }
.ai-a { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.ai-q { margin-left: auto; }

/* The answer where Mentor declines. It is the most important line in the
   section, so it is the one that looks different. */
.ai-refuse { border-left: 3px solid var(--success); background: var(--success-soft); }

/* --------------------------------------------------- the longer exchange */

.sd-chat { display: flex; flex-direction: column; gap: 2px; }
.sd-chat .sd-bubble { margin-bottom: 6px; }
.step-row.in .sd-chat .sd-bubble:nth-child(1) { transition-delay: .05s; }
.step-row.in .sd-chat .sd-bubble:nth-child(2) { transition-delay: .35s; }
.step-row.in .sd-chat .sd-bubble:nth-child(3) { transition-delay: .65s; }
.step-row.in .sd-chat .sd-bubble:nth-child(4) { transition-delay: .95s; }
.step-row.in .sd-chat .sd-bubble:nth-child(5) { transition-delay: 1.25s; }
.step-row.in .sd-chat .sd-bubble:nth-child(6) { transition-delay: 1.55s; }
.typing-bubble { width: fit-content; padding: 11px 15px; }

@media (prefers-reduced-motion: reduce) {
  .weave { display: none; }
}