/* MentorsConnect by MemofaceAI — the public platform site.
 *
 * *** THIS IS THE PLATFORM'S OWN BRAND, NOT A CLIENT'S ***
 * Sure60 / S60 Mentors is a CLIENT running on this platform, and their app is
 * violet. MemofaceAI sells MentorsConnect to other businesses, so this site
 * must not wear any one client's colours.
 *
 * *** THE THIRD DIRECTION, AND WHY ***
 * v1 was a dark "tech" theme — dark is a shortcut to looking modern and reads
 * as a template. v2 was austere editorial minimalism — correct instincts about
 * type and space, but empty: no imagery, no motion, nothing to look at.
 *
 * This version keeps v2's typographic discipline (serif display face, real
 * hierarchy, consistent rhythm) and adds what it was missing: photography,
 * illustrated SVG scenes, colour, depth and movement. Premium is not the
 * absence of things — it is craft in how they are combined.
 */

:root {
  /* --- Ground: warm off-white. Paper, not screen. --- */
  --paper: #FCFCFA;
  --paper-sunk: #F5F4F0;
  --paper-deep: #EEEDE7;
  --white: #FFFFFF;

  /* --- Ink: near-black with warmth. Pure black on white is harsh. --- */
  --ink: #14140F;
  --ink-soft: #3A3830;
  --ink-muted: #67645C;
  --ink-faint: #94918A;

  /* --- The primary accent: a deep forest green. Confident, not the default
         corporate blue, and nothing like any client's palette. --- */
  --green: #1B4D3E;
  --green-deep: #123529;
  --green-mid: #2E7A61;
  --green-light: #5FB395;
  --green-tint: #E8F1ED;
  --green-wash: #F2F8F5;

  /* --- Supporting hues. Used in illustrations and accent tiles, so the page
         has more than one colour without becoming a rainbow. --- */
  --clay: #C4653A;
  --clay-tint: #FBEFE9;
  --gold: #C9A227;
  --gold-tint: #FAF4E2;
  /* *** THE COOL COUNTERWEIGHT ***
     The page was green and warm neutrals throughout, which read as uniform —
     elegant but flat. This blue is the contrast: deep enough to hold its own
     against the green rather than looking like a tint of it.

     Used in a FEW places on purpose — the hero aura, the proof strip, one
     feature panel, the closing gradient. Everywhere would make it a second
     brand colour and the page would lose its centre. */
  --blue: #23486B;
  --blue-mid: #36699C;
  --blue-light: #7BA7CE;
  /* *** THESE WERE TOO PALE TO SEE ***
     The first attempt used #E8EFF6 / #F3F7FB, which against a warm off-white
     page is a difference of a few points per channel — technically blue,
     visually nothing. Deepened until the band actually reads as cool. */
  --blue-tint: #D6E4F0;
  --blue-wash: #E4EEF7;

  /* Kept as aliases: existing rules reference these names. */
  --slate: var(--blue);
  --slate-tint: var(--blue-tint);

  --rule: #E4E2DB;
  --rule-strong: #D2CFC6;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 72px;
  --s9: 104px;
  --s10: 144px;

  --shell: 1220px;
  --prose: 700px;

  /* *** TWO FACES DOING DIFFERENT JOBS ***
     A serif for display sizes, a grotesque for everything else. The contrast
     between them is what makes a page read as designed rather than assembled;
     a single sans at several sizes never does. */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  /* Layered shadows read as real depth; a single big blur reads as cheap. */
  --shadow-sm: 0 1px 2px rgb(20 20 15 / 5%), 0 2px 8px -2px rgb(20 20 15 / 6%);
  --shadow: 0 2px 4px rgb(20 20 15 / 4%), 0 12px 28px -8px rgb(20 20 15 / 10%);
  --shadow-lg: 0 4px 8px rgb(20 20 15 / 4%), 0 32px 64px -16px rgb(20 20 15 / 16%);
  --shadow-green: 0 8px 24px -8px rgb(27 77 62 / 35%);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------- reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Someone who has asked their OS for less motion gets none of it. With
   "heavy" motion this matters more, not less. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--green);
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------- structure */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
}

/* --------------------------------------------------------------- typography */

h1,
h2,
h3,
h4 {
  color: var(--ink);
  margin: 0;
}

h1,
h2 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
}

h1 {
  font-size: clamp(2.6rem, 1.4rem + 4.2vw, 4.4rem);
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.9rem);
}

h3 {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

p {
  margin: 0;
}

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  line-height: 1.65;
  color: var(--ink-muted);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-tint);
  padding: 6px 14px;
  border-radius: 999px;
}

.accent {
  color: var(--green);
  font-style: italic;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 550;
  letter-spacing: -0.005em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--green-mid), var(--green));
  color: var(--white);
  box-shadow: var(--shadow-green);
}

.btn-primary:hover {
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -8px rgb(27 77 62 / 45%);
}

.btn-quiet {
  background: var(--white);
  color: var(--ink);
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-sm);
}

.btn-quiet:hover {
  color: var(--ink);
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.9375rem;
  font-weight: 550;
  color: var(--ink);
}

.link-arrow svg {
  transition: transform 0.25s var(--ease);
}

.link-arrow:hover {
  color: var(--green);
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgb(252 252 250 / 85%);
  backdrop-filter: blur(14px) saturate(170%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header.scrolled {
  border-bottom-color: var(--rule);
  box-shadow: 0 1px 24px -8px rgb(20 20 15 / 10%);
}

.site-header .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
  gap: var(--s4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  flex-shrink: 0;
}

/* *** THE MARK SITS ON THE PAGE, NOT IN A CHIP ***
   It was a gradient tile holding a white "M" placeholder. The real mark is
   two overlapping rings whose own colours carry the meaning, so a coloured
   tile behind them would fight the design and hide the blue/green pairing. */
.brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.brand-mark svg {
  width: 100%;
  height: 100%;
}

/* Named parts, so the same markup recolours per context rather than being
   duplicated for the dark band. */
.mark-lens {
  fill: #1E3A52;
}

.mark-left {
  stroke: var(--blue-mid);
}

.mark-right {
  stroke: var(--green);
}

/* On a dark ground the two dark rings would vanish. Reversed to white, the
   overlap becomes LIGHTER rather than darker — the same relationship,
   inverted. */
.band-dark .mark-lens,
.on-dark .mark-lens {
  fill: rgb(255 255 255 / 92%);
}

.band-dark .mark-left,
.on-dark .mark-left {
  stroke: rgb(255 255 255 / 78%);
}

.band-dark .mark-right,
.on-dark .mark-right {
  stroke: #FFFFFF;
}

.brand-text {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.brand-name {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.1875rem;
  letter-spacing: -0.02em;
}

/* Holds the product link and the parent-company link side by side. */
.brand-group {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

.brand-sub {
  font-family: var(--sans);
  color: var(--ink-faint);
  font-weight: 450;
  font-size: 0.78rem;
  /* Separated from the product name by a hairline, so it reads as
     attribution rather than part of the product's own name. */
  padding-left: 10px;
  border-left: 1px solid var(--rule);
  transition: color 0.18s ease;
}

.brand-sub:hover {
  color: var(--blue-mid);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s7);
}

.nav a {
  position: relative;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  font-weight: 450;
  transition: color 0.18s ease;
}

/* An underline that grows from the left on hover. */
.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 1.5px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.nav a:hover {
  color: var(--ink);
}

.nav a:hover::after {
  transform: scaleX(1);
}

.header-cta .btn {
  padding: 10px 22px;
  font-size: 0.875rem;
}

@media (max-width: 940px) {
  .nav {
    display: none;
  }
}

@media (max-width: 480px) {
  .brand-sub {
    display: none;
  }
}

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

.hero {
  position: relative;
  padding: clamp(var(--s7), 7vh, var(--s9)) 0 var(--s9);
  overflow: hidden;
}

/* A soft ambient wash behind the hero. Two slowly drifting blobs — the
   "heavy motion" brief, kept to something that does not demand attention. */
.hero-aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* *** THESE MUST STAY AT THE EDGES ***
   An earlier version pushed a blue blob to 0.85 opacity in the middle of the
   hero. Blurred colour over open white does not read as atmosphere — it reads
   as a dirty grey patch, which is exactly how it looked. The wash belongs in
   the corners, behind content, where it tints rather than announces itself. */
.hero-aura span {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
}

.hero-aura span:nth-child(1) {
  width: 520px;
  height: 520px;
  top: -180px;
  right: -120px;
  background: radial-gradient(circle, rgb(95 179 149 / 38%), transparent 70%);
  animation: drift-a 22s ease-in-out infinite;
}

/* *** THE BLUE ENTERS ON THE FIRST SCREEN ***
   Warm gold alone behind the hero left the whole page in one temperature.
   This cool blob sits opposite the green one, so the hero has a temperature
   contrast rather than a single wash. */
/* Pushed hard off the left edge: only the outer falloff reaches the page, so
   it tints the corner instead of sitting on it as a shape. */
.hero-aura span:nth-child(2) {
  width: 520px;
  height: 520px;
  bottom: -260px;
  left: -220px;
  background: radial-gradient(circle, rgb(54 105 156 / 34%), transparent 72%);
  animation: drift-b 28s ease-in-out infinite;
}

/* A small warm accent tucked into the top-left, so the page is not simply
   green-and-blue. */
.hero-aura span:nth-child(3) {
  width: 340px;
  height: 340px;
  top: -140px;
  left: 6%;
  background: radial-gradient(circle, rgb(201 162 39 / 22%), transparent 70%);
  animation: drift-a 34s ease-in-out infinite 2s;
}

@keyframes drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-60px, 50px) scale(1.12); }
}

@keyframes drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(70px, -40px) scale(1.08); }
}

.hero .shell {
  position: relative;
  z-index: 1;
}

/* Text left, imagery right — an uneven split, because an even one reads as
   a default. */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s8);
  align-items: center;
}

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--s8);
  }
}

.hero h1 {
  margin: var(--s5) 0 0;
}

.hero .lede {
  margin: var(--s5) 0 0;
  max-width: 520px;
}

.hero-actions {
  display: flex;
  gap: var(--s4);
  align-items: center;
  margin-top: var(--s7);
  flex-wrap: wrap;
}

/* --- the hero's stacked visual --- */

.hero-visual {
  position: relative;
  /* Room for the floating cards that overhang the photo. */
  padding: var(--s5) var(--s4) var(--s6);
}

.hero-photo {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: linear-gradient(140deg, var(--green-tint), var(--gold-tint));
  aspect-ratio: 4 / 3;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cards that overhang the photo's edges — the depth that a flat image alone
   never has. They float on a slow loop. */
.float-card {
  position: absolute;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--s4);
  display: flex;
  align-items: center;
  gap: var(--s3);
  z-index: 2;
}

.float-card.one {
  top: 8%;
  left: -6%;
  animation: bob 6s ease-in-out infinite;
}

.float-card.two {
  bottom: 12%;
  right: -4%;
  animation: bob 7.5s ease-in-out infinite 0.8s;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.float-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.float-icon.green {
  background: var(--green-tint);
  color: var(--green);
}

.float-icon.gold {
  background: var(--gold-tint);
  color: #8A6E12;
}

/* The payment card uses blue rather than gold, so the cool tone appears in
   the hero itself and not only in the wash behind it. */
.float-icon.blue {
  background: var(--blue-tint);
  color: var(--blue-mid);
}

.float-card b {
  display: block;
  font-size: 0.9375rem;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.3;
}

.float-card span {
  font-size: 0.75rem;
  color: var(--ink-faint);
}

@media (max-width: 560px) {
  .float-card.one {
    left: 0;
  }

  .float-card.two {
    right: 0;
  }

  .float-card {
    padding: var(--s3);
  }

  .float-card b {
    font-size: 0.85rem;
  }
}

/* ------------------------------------------------------------- proof strip */

/* *** THE COOL BAND THAT BREAKS UP THE WARM PAGE ***
   This was paper-coloured, which made the top third of the page one
   continuous warm surface. A cool tinted band here separates the hero from
   the features and gives the eye somewhere to rest. */
.proof {
  border-top: 1px solid #DCE5EE;
  border-bottom: 1px solid #DCE5EE;
  background: linear-gradient(180deg, var(--blue-wash), var(--blue-tint));
  padding: var(--s7) 0;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s5);
}

.proof-item {
  text-align: center;
}

.proof-item b {
  display: block;
  font-family: var(--display);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem);
  font-weight: 400;
  /* Blue on the blue band: the figures belong to it rather than sitting on
     top of it. */
  color: var(--blue);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.proof-item span {
  display: block;
  margin-top: var(--s2);
  font-size: 0.8125rem;
  color: #5D7490;
}

@media (max-width: 720px) {
  .proof-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s6) var(--s5);
  }
}

/* -------------------------------------------------------------- the sections */

.band {
  padding: var(--s9) 0;
  position: relative;
}

.band-sunk {
  background: var(--paper-sunk);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* *** THE PAGE'S ONE DARK SECTION ***
   Everything else is light. Putting "How it works" on deep blue gives the
   page a spine: hero (light) → proof (cool tint) → features (light) → how
   (dark blue) → who (light) → close (gradient). Without it the whole page is
   one continuous pale surface, which is what made an earlier version read as
   flat however good the type was. */
.band-dark {
  background:
    radial-gradient(ellipse 70% 60% at 20% 0%, rgb(54 105 156 / 40%), transparent 60%),
    linear-gradient(165deg, #1E3E5C, #16293D 60%, #122234);
  border-top: 1px solid #16293D;
  border-bottom: 1px solid #16293D;
}

.band-dark h2,
.band-dark .step-body h3 {
  color: #F4F8FB;
}

.band-dark .lede {
  color: rgb(244 248 251 / 72%);
}

.band-dark .eyebrow {
  background: rgb(123 167 206 / 18%);
  color: #A8C8E4;
}

/* The step cards lift off the dark ground rather than sitting on it. */
.band-dark .step {
  background: rgb(255 255 255 / 6%);
  border-color: rgb(255 255 255 / 12%);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 32px -12px rgb(0 0 0 / 50%);
}

.band-dark .step:hover {
  background: rgb(255 255 255 / 10%);
  border-color: rgb(255 255 255 / 20%);
  box-shadow: 0 20px 48px -16px rgb(0 0 0 / 60%);
}

.band-dark .step-body p {
  color: rgb(244 248 251 / 62%);
}

.band-dark .step-num {
  background: rgb(18 34 52 / 85%);
  color: #A8C8E4;
}

.band-dark .step-photo {
  background: linear-gradient(140deg, #24486B, #16293D);
}

.band-head {
  max-width: var(--prose);
  margin-bottom: var(--s8);
}

.band-head.centred {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.band-head h2 {
  margin: var(--s4) 0 0;
}

.band-head .lede {
  margin: var(--s5) 0 0;
}

.band-head.centred .lede {
  margin-left: auto;
  margin-right: auto;
}

/* --- alternating feature rows, each with its own illustration --- */

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s9);
  align-items: center;
  margin-bottom: var(--s10);
}

.feature-row:last-child {
  margin-bottom: 0;
}

/* Every second row puts the art on the left instead. Alternating is what
   keeps a long page from feeling like a list. */
.feature-row:nth-child(even) .feature-art {
  order: -1;
}

@media (max-width: 900px) {
  .feature-row {
    grid-template-columns: 1fr;
    gap: var(--s6);
    margin-bottom: var(--s8);
  }

  .feature-row:nth-child(even) .feature-art {
    order: 0;
  }
}

.feature-copy h3 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: var(--s4) 0 var(--s4);
}

.feature-copy p {
  color: var(--ink-muted);
  font-size: 1.0625rem;
}

.feature-points {
  list-style: none;
  margin: var(--s5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.feature-points li {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.feature-points svg {
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--green-mid);
}

/* The art panel: an SVG scene on a soft gradient ground. */
.feature-art {
  position: relative;
  border-radius: var(--radius-lg);
  padding: var(--s6);
  background: linear-gradient(145deg, var(--green-wash), var(--paper-deep));
  border: 1px solid var(--rule);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.feature-art:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.feature-art.tint-gold {
  background: linear-gradient(145deg, var(--gold-tint), var(--paper-deep));
}

/* The Sessions panel. Its illustration is already built in blues, so the
   panel behind it is the strongest cool moment in the middle of the page. */
.feature-art.tint-slate {
  background: linear-gradient(145deg, var(--blue-tint), var(--paper-deep));
}

.feature-art.tint-clay {
  background: linear-gradient(145deg, var(--clay-tint), var(--paper-deep));
}

.feature-art svg {
  width: 100%;
  height: auto;
}

/* A photo used as the art instead of an SVG. */
.art-photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 3 / 2;
  background: linear-gradient(140deg, var(--green-tint), var(--gold-tint));
}

.art-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- how it works: photo-topped step cards --- */

.steps {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 940px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s6);
  }
}

@media (max-width: 560px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

.step {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.step:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.step-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(140deg, var(--green-tint), var(--paper-deep));
}

.step-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.step:hover .step-photo img {
  transform: scale(1.06);
}

.step-num {
  position: absolute;
  top: var(--s4);
  left: var(--s4);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgb(255 255 255 / 92%);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--green);
  box-shadow: var(--shadow-sm);
  z-index: 1;
}

.step-body {
  padding: var(--s5);
}

.step-body h3 {
  margin-bottom: var(--s3);
}

.step-body p {
  font-size: 0.9rem;
  color: var(--ink-muted);
  line-height: 1.6;
}

/* --- who it's for --- */

.split {
  display: grid;
  gap: var(--s8);
  grid-template-columns: 5fr 6fr;
  align-items: center;
}

@media (max-width: 880px) {
  .split {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }
}

.audience {
  list-style: none;
  margin: var(--s6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s3);
}

.audience li {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  padding: var(--s5);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    border-color 0.3s ease;
}

.audience li:hover {
  transform: translateX(6px);
  border-color: var(--green-light);
  box-shadow: var(--shadow);
}

.audience-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--green-tint);
  color: var(--green);
}

.audience-icon.gold {
  background: var(--gold-tint);
  color: #8A6E12;
}

.audience-icon.slate {
  background: var(--slate-tint);
  color: var(--slate);
}

.audience-icon.clay {
  background: var(--clay-tint);
  color: var(--clay);
}

.audience b {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}

.audience span {
  font-size: 0.9rem;
  color: var(--ink-muted);
  line-height: 1.55;
}

.who-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 3 / 2;
  background: linear-gradient(140deg, var(--slate-tint), var(--green-tint));
}

.who-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- the closing statement --- */

.close {
  padding: var(--s9) 0;
}

.close-inner {
  position: relative;
  border-radius: var(--radius-xl);
  padding: clamp(var(--s8), 8vw, var(--s9)) var(--s6);
  text-align: center;
  overflow: hidden;
  /* *** A TEMPERATURE SHIFT ACROSS THE PANEL ***
     Flat green read as one solid slab. Running deep blue into green gives the
     panel depth and ties the closing statement back to the blue band near the
     top of the page. */
  background: linear-gradient(135deg, var(--blue) 0%, var(--green-deep) 45%, var(--green-mid) 100%);
  box-shadow: var(--shadow-lg);
}

/* A slow sheen crossing the panel. */
.close-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 50% 60% at 30% 0%,
    rgb(255 255 255 / 14%),
    transparent 70%
  );
  pointer-events: none;
}

.close-inner h2,
.close-inner .lede {
  position: relative;
  color: var(--white);
}

.close-inner h2 {
  max-width: 640px;
  margin: 0 auto;
}

.close-inner .lede {
  max-width: 480px;
  margin: var(--s5) auto 0;
  color: rgb(255 255 255 / 78%);
}

.close-actions {
  position: relative;
  margin-top: var(--s7);
  display: flex;
  justify-content: center;
}

/* On the green panel the primary button inverts to white. */
.close-actions .btn {
  background: var(--white);
  color: var(--green-deep);
  box-shadow: 0 8px 24px -6px rgb(0 0 0 / 30%);
}

.close-actions .btn:hover {
  background: var(--white);
  color: var(--green-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -6px rgb(0 0 0 / 38%);
}

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

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--paper-sunk);
  padding: var(--s8) 0 var(--s6);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: var(--s7);
  flex-wrap: wrap;
  padding-bottom: var(--s7);
}

.footer-blurb {
  max-width: 320px;
}

.footer-blurb p {
  margin-top: var(--s4);
  font-size: 0.875rem;
  color: var(--ink-muted);
  line-height: 1.6;
}

/* --- the parent-company block --- */

.parent {
  display: inline-flex;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s5);
  padding: var(--s4) var(--s5) var(--s4) var(--s4);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color 0.25s ease, box-shadow 0.25s ease,
    transform 0.25s var(--ease);
}

.parent:hover {
  border-color: var(--blue-light);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

/* The mark is wider than it is tall, so the height is what to fix. */
.parent img {
  height: 30px;
  width: auto;
  flex-shrink: 0;
}

.parent-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.parent-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  font-weight: 600;
}

.parent-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.parent-name svg {
  color: var(--ink-faint);
  transition: transform 0.25s var(--ease), color 0.25s ease;
}

.parent:hover .parent-name svg {
  color: var(--blue-mid);
  transform: translate(2px, -2px);
}

.footer-links {
  display: flex;
  gap: var(--s9);
  flex-wrap: wrap;
}

.footer-col h4 {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin-bottom: var(--s4);
  font-weight: 600;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.footer-col a {
  color: var(--ink-muted);
  font-size: 0.9rem;
  transition: color 0.18s ease;
}

.footer-col a:hover {
  color: var(--green);
}

.footer-bottom {
  border-top: 1px solid var(--rule);
  padding-top: var(--s5);
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.footer-bottom a {
  color: var(--ink-faint);
}

.footer-bottom a:hover {
  color: var(--green);
}

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

.legal {
  padding: var(--s8) 0 var(--s7);
  max-width: var(--prose);
}

.legal h1 {
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.1rem);
}

.legal-meta {
  margin-top: var(--s5);
  font-size: 0.875rem;
  color: var(--ink-faint);
}

/* *** A REVIEW BANNER, NOT DECORATION ***
   These drafts describe the system accurately but have not been through a
   lawyer, and several details only the operator can supply. */
.notice {
  margin-top: var(--s6);
  padding: var(--s4) var(--s5);
  border-radius: var(--radius);
  background: var(--gold-tint);
  border: 1px solid #E8D9B0;
  color: #6B5418;
  font-size: 0.9rem;
}

.legal-body {
  margin-top: var(--s7);
}

.legal-body h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  margin: var(--s8) 0 var(--s4);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  scroll-margin-top: 96px;
}

.legal-body h3 {
  font-size: 1rem;
  margin: var(--s6) 0 var(--s3);
  color: var(--ink);
}

.legal-body p {
  margin-bottom: var(--s4);
  color: var(--ink-soft);
}

.legal-body ul {
  margin: 0 0 var(--s4);
  padding-left: var(--s5);
  color: var(--ink-soft);
}

.legal-body li {
  margin-bottom: var(--s3);
}

.legal-body strong {
  color: var(--ink);
  font-weight: 600;
}

/* Marks a value the operator must supply. Deliberately conspicuous — an
   unfilled placeholder must never slip past into a published policy. */
.fill {
  background: var(--gold-tint);
  border-bottom: 1px dashed #C9A94E;
  color: #6B5418;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 500;
  font-size: 0.94em;
}

.legal-body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--s5);
  font-size: 0.9rem;
}

.legal-body th,
.legal-body td {
  text-align: left;
  padding: 12px var(--s3) 12px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.legal-body th {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom-color: var(--ink);
}

.legal-body td {
  color: var(--ink-muted);
}

.table-scroll {
  overflow-x: auto;
  margin-bottom: var(--s5);
  -webkit-overflow-scrolling: touch;
}

.table-scroll table {
  min-width: 440px;
  margin-bottom: 0;
}

/* ------------------------------------------------ SVG scene animations */

/* These run only when the scene has scrolled into view, which is what the
   .in class means. Animating off-screen work is wasted, and a scene that has
   already finished animating before you reach it may as well be static. */

.in .draw {
  stroke-dasharray: var(--len, 300);
  stroke-dashoffset: var(--len, 300);
  animation: draw 1.4s var(--ease) forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

.in .pop {
  animation: pop 0.5s var(--ease) backwards;
}

@keyframes pop {
  from { opacity: 0; transform: scale(0.82); }
  to { opacity: 1; transform: scale(1); }
}

.in .rise {
  animation: rise 0.6s var(--ease) backwards;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* A dot travelling a path, for the payment scene. */
.in .travel {
  animation: travel 2.6s var(--ease) infinite;
}

@keyframes travel {
  0% { opacity: 0; offset-distance: 0%; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; offset-distance: 100%; }
}

/* A gentle pulse for "live" indicators. */
.in .pulse {
  animation: pulse 2.4s ease-in-out infinite;
  transform-origin: center;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.18); }
}

/* ------------------------------------------------------- entrance motion */

/* *** CONTENT MUST NEVER DEPEND ON JAVASCRIPT TO BE VISIBLE ***
   Hiding is scoped to `.js-reveal`, a class the page script sets on <html>
   before first paint. No script, no class, no hiding — so with JavaScript
   off, or for a crawler that does not run script, the page is fully visible. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}

.js-reveal .reveal.in {
  opacity: 1;
  transform: none;
}

/* Staggered children, so a row of cards arrives in sequence rather than as
   one block. */
.js-reveal .stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js-reveal .stagger.in > * {
  opacity: 1;
  transform: none;
}

.js-reveal .stagger.in > *:nth-child(1) { transition-delay: 0.05s; }
.js-reveal .stagger.in > *:nth-child(2) { transition-delay: 0.15s; }
.js-reveal .stagger.in > *:nth-child(3) { transition-delay: 0.25s; }
.js-reveal .stagger.in > *:nth-child(4) { transition-delay: 0.35s; }
.js-reveal .stagger.in > *:nth-child(5) { transition-delay: 0.45s; }
.js-reveal .stagger.in > *:nth-child(6) { transition-delay: 0.55s; }

/* ======================================================================
   INSTITUTE FINDER
   ======================================================================
   A payment gateway requires a public page per merchant, and a reviewer
   must be able to reach it from this site rather than from a link we sent.
   This is the way in.

   A native <dialog>: focus trapping, Escape to close and the backdrop all
   come free, and a hand-rolled modal gets each of them subtly wrong.
   ---------------------------------------------------------------------- */

.finder {
  width: min(520px, calc(100vw - 32px));
  padding: 32px;
  border: 1px solid var(--paper-deep);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 24px 60px rgb(20 20 15 / 18%);
}

.finder::backdrop {
  background: rgb(20 20 15 / 45%);
  backdrop-filter: blur(2px);
}

.finder-close-form {
  float: right;
  margin: -12px -12px 0 0;
}

.finder-close {
  width: 34px;
  height: 34px;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-muted);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.finder-close:hover {
  color: var(--ink);
  background: var(--paper-sunk);
}

.finder-title {
  margin: 0 0 6px;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

.finder-sub {
  margin: 0 0 20px;
  color: var(--ink-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.finder-input {
  width: 100%;
  padding: 13px 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--paper-deep);
  border-radius: var(--radius);
}

.finder-input:focus {
  outline: none;
  border-color: var(--green-mid);
  box-shadow: 0 0 0 3px var(--green-tint);
}

.finder-hint {
  margin: 10px 2px 0;
  color: var(--ink-faint);
  font-size: 0.85rem;
  min-height: 1.2em;   /* no jump as the message changes */
}

.finder-results {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  /* Capped and scrollable: the endpoint returns at most ten, and a long
     list should not push the dialog past the fold on a phone. */
  max-height: 280px;
  overflow-y: auto;
}

.finder-results li + li {
  border-top: 1px solid var(--paper-sunk);
}

.finder-results a {
  display: block;
  padding: 13px 14px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.finder-results a:hover,
.finder-results a:focus-visible {
  background: var(--green-wash);
  color: var(--green-deep);
  outline: none;
}