/* ============ YOKED — design system ============ */
:root {
  /* Pulled onto the logo ramp. The old navy sat at hue 232 deg while the logo indigo
     (#3d1f99) is 255 deg — a genuinely different color, which is why the dark sections
     read BLUE next to the brand gradient. Same hue as the mark now, just darker. */
  --navy: #241458;        /* was #131b4d */
  --navy-deep: #180c3c;   /* was #0c1236 */

  /* Retuned onto the logo family. The old --purple (#6b4eff) was an electric BLUE-violet
     and --pink (#f0478a) a hot rose — neither appears anywhere in the mark. Side by side
     with the logo gradient they read cooler and bluer, so the page was quietly out of tune
     with itself. These are drawn from the sampled ramp. */
  --purple: #6b2ac1;   /* was #6b4eff */
  --pink:   #db3589;   /* was #f0478a */
  --coral:  #fd5d77;
  --cream: #faf9fc;
  --ink: #1c2145;
  --ink-soft: #565d85;
  --white: #ffffff;

  /* The real logo ramp, sampled from the mark: indigo -> violet -> magenta -> coral.
     Big surfaces only (splash, closing CTA) — its coral end is too light for small text. */
  --grad-logo: linear-gradient(125deg,
    #3d1f99 0%, #6b2ac1 33%, #db3589 72%, #fd5d77 100%);

  --grad: linear-gradient(115deg, #3d1f99 0%, #6b2ac1 48%, #db3589 100%);

  /* Deep end of the same family, for anything carrying WHITE TEXT or gradient text on
     cream: buttons, the FOUNDING MEMBER pill, the accent headings, $0, the step numerals.
     The old ramp put white on #f0478a at 3.35:1 — a real accessibility failure for small
     text (needs 4.5:1). This ramp runs 9.9:1 -> 6.5:1, and reads as a brand color instead
     of washed-out pastel. */
  --grad-soft: linear-gradient(115deg, #4e1fa6, #b02a7a);

  --radius: 24px;
  --font: 'Poppins', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--font);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--purple); color: #fff; }

/* iOS Safari does not size date inputs like other inputs: it keeps its own
   -webkit-appearance box, collapses the field to roughly line height, and lets
   the value sit outside the padded, rounded border — so "mm/dd/yyyy" appears to
   hang over the edge of the field. Desktop Chrome renders it correctly, which
   is why this only shows up on a phone. Normalise date inputs everywhere they
   appear (status.html, the apply wizard). */
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-height: 52px;
  line-height: 1.2;
  text-align: left;
  background-clip: padding-box;
}
/* The value itself is a shadow-DOM child; on iOS it is centerd and overflows. */
input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
  min-height: 1.2em;
}
input[type="date"]::-webkit-datetime-edit { padding: 0; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; }

h1,h2,h3 { font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; }
.wrap { width: min(1180px, 92vw); margin: 0 auto; }

/* ============ preloader ============ */

/* ============ branded intro ============ */
#intro {
  position: fixed; inset: 0; z-index: 200;
  background: var(--grad-logo);
  display: flex; align-items: center; justify-content: center;
  /* Was 2.7s. "matchmaking" now lands at ~2.45s — lifting at 2.7s would have
     whipped the curtain up 250ms after the word appeared, which is the same as
     not showing it at all. Hold, let the lockup sit complete for a beat, THEN go. */
  animation: introLift 1s cubic-bezier(.76,0,.24,1) 3.15s forwards;
  pointer-events: none;
}
/* The lockup: "yoked" draws itself, then "matchmaking" arrives underneath.
   It is deliberately LAST — the drawing is the moment, and a second word
   competing with it would spoil both. It lands on the same beat as the fill,
   settles, and only then does the curtain lift. */
.intro-lock { display: flex; flex-direction: column; align-items: center; }

#intro svg { width: min(340px, 64vw); overflow: visible; }

#intro .intro-mm {
  display: block;
  /* Optically matched to the wordmark: "matchmaking" is ~63% of its width in the
     real logo. Sizing it off the same min() keeps the ratio locked at any width. */
  width: min(214px, 40vw);
  height: auto;
  margin-top: clamp(-6px, -0.6vw, -2px);   /* the mark's own tight leading */
  opacity: 0;
  transform: translateY(6px);
  animation: mmIn .6s cubic-bezier(.2,.7,.3,1) 1.85s forwards;
}
@keyframes mmIn { to { opacity: 1; transform: none; } }

/* ⚠️ @keyframes MUST live at the top level, never nested inside the @media
   block below.
   It was nested, and the result was brutal: anyone with "Reduce Motion" enabled
   (a common accessibility setting) hit a splash whose fade-out animation had no
   keyframes to run — so the curtain never lifted and the site never appeared.
   They couldn't get in at all. A splash that can trap a visitor is worse than no
   splash, so this also has a JS failsafe in index.html. */
@keyframes introFade { to { opacity: 0; visibility: hidden; } }

/* Someone with vestibular sensitivity should not get a sliding curtain and a
   drawing animation thrown at them the moment they arrive. Show the finished
   lockup, hold it, fade it out. */
@media (prefers-reduced-motion: reduce) {
  #intro { animation: introFade .5s ease 1.5s forwards; }
  #intro svg .st { animation: none; stroke-dashoffset: 0; }
  #intro svg .fl { animation: none; fill-opacity: 1; }
  #intro .intro-mm { animation: none; opacity: 1; transform: none; }
}
/* The stroke used to be the purple->pink gradient (url(#wg)), which read beautifully
   against the old navy background and would be near-invisible on this one. White keeps
   the draw-on animation legible; the fill was already white. */
#intro svg .st {
  fill: none; stroke: rgba(255,255,255,.92); stroke-width: 3;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: drawP .8s cubic-bezier(.45,0,.3,1) forwards;
}
#intro svg .st:nth-of-type(1) { animation-delay: .1s }
#intro svg .st:nth-of-type(2) { animation-delay: .28s }
#intro svg .st:nth-of-type(3) { animation-delay: .46s }
#intro svg .st:nth-of-type(4) { animation-delay: .64s }
#intro svg .st:nth-of-type(5) { animation-delay: .82s }
#intro svg .st:nth-of-type(6) { animation-delay: .96s }
#intro svg .st:nth-of-type(7) { animation-delay: 1.1s }
#intro svg .st:nth-of-type(8) { animation-delay: 1.24s }
#intro svg .fl { fill: #fff; fill-opacity: 0; animation: fillP .6s ease 1.85s forwards; }
@keyframes drawP { to { stroke-dashoffset: 0 } }
@keyframes fillP { to { fill-opacity: 1 } }
@keyframes introLift { to { transform: translateY(-100%); visibility: hidden; } }

/* ── Returning visitor (html.intro-quick, set in the head) ──────────────────
   No draw. The finished logo appears whole, settles for a beat, and lifts —
   about 0.95s against the full 4.1s. Specificity `html.intro-quick #intro`
   beats the plain `#intro` rules above, so these win without !important.
   Wrapped in no-preference so a reduced-motion visitor gets the quiet fade
   just below instead of a slide. */
@media (prefers-reduced-motion: no-preference) {
  html.intro-quick #intro svg .st { animation: none; stroke-dashoffset: 0; }
  html.intro-quick #intro svg .fl { animation: none; fill: #fff; fill-opacity: 1; }
  html.intro-quick #intro .intro-mm { animation: none; opacity: 1; transform: none; }
  html.intro-quick .intro-lock { animation: introPop .4s cubic-bezier(.2,.7,.3,1) forwards; }
  html.intro-quick #intro { animation: introLift .45s cubic-bezier(.76,0,.24,1) .5s forwards; }
}
@keyframes introPop { from { opacity: .35; transform: scale(.975); } to { opacity: 1; transform: none; } }

/* Reduced-motion returning visitor: skip the draw AND the slide, just a quick
   fade. Faster than the first-visit reduced-motion fade, which waits 1.5s. */
@media (prefers-reduced-motion: reduce) {
  html.intro-quick #intro { animation: introFade .4s ease .35s forwards; }
}

/* ============ nav ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background .4s, box-shadow .4s, backdrop-filter .4s;
}
.nav.scrolled {
  background: rgba(24, 12, 60, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(24,12,60,.28);
}
.nav-inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px 0; position: relative;
}
.nav-logo { justify-self: center; }
.nl-left { justify-self: start; }
.nl-right { justify-self: end; display: flex; gap: 28px; align-items: center; }
.nl-right a { color: rgba(255,255,255,.85); font-size: .92rem; font-weight: 500; transition: color .25s; }
.nl-right a:hover { color: #fff; }
.nl-right a.btn-primary { color: #fff; }
.nl-right a.btn-white { color: #241458; }
.nav-logo img { height: 30px; }
.nav-links { display: flex; align-items: center; gap: 34px; list-style: none; }
.nav-links a {
  color: rgba(255,255,255,.85); font-size: .92rem; font-weight: 500;
  transition: color .25s;
}
.nav-links a:hover { color: #fff; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 34px; border-radius: 999px; border: none;
  font-weight: 700; font-size: 1rem; letter-spacing: .01em;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
  will-change: transform;
}
.btn-primary {
  background: var(--grad-soft); color: #fff;
  box-shadow: 0 10px 30px rgba(78,31,166,.32);
}
.btn-primary:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 40px rgba(176,42,122,.38); }
.btn-white {
  background: #fff; color: #241458;
  box-shadow: 0 8px 30px rgba(0,0,0,.22);
}
.btn-white:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 38px rgba(0,0,0,.3); }
.btn-ghost {
  background: rgba(255,255,255,.08); color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255,255,255,.16); transform: translateY(-3px); }
.nav .btn { padding: 11px 26px; font-size: .9rem; }
.nav-burger { display: none; background: none; border: none; }

/* ============ hero ============ */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--navy-deep); overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  opacity: 0; transform: scale(1.1); will-change: transform, opacity;
  animation: heroPhoto 2.6s cubic-bezier(.2,.6,.2,1) 2.75s forwards;
}
@keyframes heroPhoto { to { opacity: 1; transform: scale(1); } }
/* newhero5 is a bright daylight photo — pale dress, sunlit foliage — where the old
   hero was dark and moody. Measured, the headline zone sits at ~152/255 luminance;
   the previous scrim only pulled it to ~145, so white text was effectively unreadable
   (~2:1 contrast). This lands it near 90/255, comfortably past WCAG AA, while leaving
   the faces and greens bright. The top gradient matters too: the nav is white text
   over sunlit trees. */
.hero-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(16,8,40,.86) 0%, rgba(16,8,40,.70) 18%,
      rgba(16,8,40,.44) 36%, rgba(16,8,40,.16) 55%, transparent 72%),
    linear-gradient(to bottom, rgba(16,8,40,.38) 0%, rgba(16,8,40,.12) 10%, transparent 20%);
}
.hero-bottom {
  position: relative; z-index: 2; margin-top: auto;
  padding: 140px 0 38px; text-align: left;
}
.eyebrow {
  display: block; color: rgba(255,255,255,.92); font-size: .76rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; margin-bottom: 22px;
  opacity: 0; animation: fadeUp .8s 3.3s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-lines {
  color: #fff; font-size: clamp(2.2rem, 4.2vw, 3.8rem);
  line-height: 1.06; letter-spacing: -.03em; font-weight: 800;
  text-shadow: 0 3px 26px rgba(16,8,40,.55);
}
.hero-lines .line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.07em; white-space: nowrap; }
.hero-lines .line > span {
  display: inline-block; transform: translateY(118%);
  animation: lineUp 1.15s cubic-bezier(.16,.8,.24,1) forwards;
  will-change: transform;
}
.hero-lines .line:nth-child(1) > span { animation-delay: 3.4s }
.hero-lines .line:nth-child(2) > span { animation-delay: 3.53s }
.hero-lines .line:nth-child(3) > span { animation-delay: 3.66s }
.hero-lines em {
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 440;
  letter-spacing: -.01em; color: #fff; padding-right: .05em;
}
@keyframes lineUp { to { transform: translateY(0) } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px) } to { opacity: 1; transform: none } }
.hero p.sub {
  color: rgba(255,255,255,.7); font-size: clamp(1rem, 1.5vw, 1.16rem);
  max-width: 40ch; margin: 28px 0 38px; font-weight: 400;
  opacity: 0; animation: fadeUp .9s 2.85s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-ctas {
  display: flex; gap: 22px; flex-wrap: wrap; align-items: center; margin-top: 30px;
  opacity: 0; animation: fadeUp .9s 3.85s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero .btn-primary { padding: 17px 44px; font-size: 1.05rem; }
.link-arrow { color: rgba(255,255,255,.7); font-weight: 600; font-size: .95rem; transition: color .25s; }
.link-arrow:hover { color: #fff; }
@keyframes fadeIn { to { opacity: 1 } }

.hero-meta {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.72); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  opacity: 0; animation: fadeIn 1s 4.1s forwards;
}
.hero-meta .wrap { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0 26px; flex-wrap: wrap; }

/* ============ manifesto ============ */
.manifesto { padding: clamp(110px, 16vw, 190px) 0; background: var(--cream); }
.manifesto .kicker { margin-bottom: 34px; }
.kicker {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--purple);
}
.manifesto h2 {
  font-size: clamp(1.7rem, 4.4vw, 3.4rem); max-width: 22ch; color: var(--ink);
}
.manifesto h2 .w { display: inline-block; opacity: .12; transition: none; }
.manifesto h2 .accent {
  background: var(--grad-soft);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.manifesto .foot { margin-top: 38px; color: var(--ink-soft); font-size: 1.05rem; max-width: 52ch; }

/* ============ how it works ============ */
.how { padding: clamp(90px, 12vw, 150px) 0; background: #fff; border-radius: 56px 56px 0 0; }
.sec-head { margin-bottom: clamp(48px, 7vw, 80px); }
.sec-head h2 { font-size: clamp(1.8rem, 3.8vw, 2.9rem); margin-top: 14px; }
.sec-head p { color: var(--ink-soft); margin-top: 14px; max-width: 56ch; font-size: 1.05rem; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; position: relative; }
/* These were cream (#faf9fc) cards on a #fff section — about a 1% difference, held
   together by a 1px border at 8% opacity. They were effectively invisible. Now they
   have a real tinted surface, a border you can see, and a resting shadow. */
.step {
  background: linear-gradient(180deg, #f7f5fd 0%, #f1edf9 100%);
  border-radius: var(--radius); padding: 42px 34px;
  position: relative; overflow: hidden;
  border: 1px solid rgba(107,42,193,.14);
  box-shadow: 0 2px 10px rgba(36,20,88,.06);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
.step:hover {
  transform: translateY(-8px); border-color: rgba(107,42,193,.28);
  box-shadow: 0 24px 48px rgba(78,31,166,.14);
}
.step .num {
  font-size: 4.4rem; font-weight: 800; line-height: 1;
  background: var(--grad-soft);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 20px;   /* dropped opacity:.9 — it faded an already-light element */
}
.step h3 { font-size: 1.35rem; margin-bottom: 12px; }
.step p { color: var(--ink-soft); font-size: .98rem; }

/* ============ different (dark) ============ */
.different {
  background: var(--navy-deep); color: #fff;
  padding: clamp(100px, 13vw, 160px) 0;
  position: relative; overflow: hidden;
}
.different .kicker { color: #ff7ab1; }
.different h2 { color: #fff; }
.diff-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 60px; }
.diff-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius); padding: 40px 36px;
  backdrop-filter: blur(6px);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background .35s, border-color .35s;
}
.diff-card:hover { transform: translateY(-6px); background: rgba(255,255,255,.09); border-color: rgba(255,122,177,.4); }
.diff-card .icon {
  width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: var(--grad-soft); margin-bottom: 24px; font-size: 1.4rem;
  box-shadow: 0 8px 24px rgba(176,42,122,.35);
}
.diff-card .icon svg { width: 26px; height: 26px; stroke: #fff; }
.diff-card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.diff-card p { color: rgba(255,255,255,.66); font-size: .96rem; }
.different .swirl-bg {
  position: absolute; left: -14%; bottom: -18%; width: 46vw; opacity: .05; pointer-events: none;
}

/* ============ founders ============ */
.founders { padding: clamp(100px, 13vw, 170px) 0; background: var(--cream); overflow: hidden; }
.founders-grid {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.founders-photo { position: relative; }
.founders-photo .frame {
  border-radius: 30px; overflow: hidden;
  box-shadow: 0 40px 90px rgba(36,20,88,.30);
}
.founders-photo .frame img.subject {
  display: block; width: 100%; will-change: transform; scale: 1.07;
}
.founders-copy .quote {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; line-height: 1.25;
  margin: 26px 0;
}
.founders-copy .quote em {
  font-style: normal;
  background: var(--grad-soft); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.founders-copy p { color: var(--ink-soft); margin-bottom: 18px; font-size: 1.02rem; }
.founders-copy .sig { font-weight: 700; color: var(--ink); margin-top: 26px; }

/* ============ events ============ */
.events {
  background: var(--navy); color: #fff;
  padding: clamp(100px, 13vw, 160px) 0;
  border-radius: 56px; margin: 0 clamp(8px, 1.4vw, 20px);
  position: relative; overflow: hidden;
}
.events .kicker { color: #ff7ab1; }
.events h2 { color: #fff; }
.events .sec-head p { color: rgba(255,255,255,.66); }
/* These were emoji pills on a ragged flex-wrap — the uneven widths were what made
   the block look messy. An even grid lines the rows up, so it reads as one tidy
   band instead of scattered tags. Seven items sit in a single row on wide screens. */
.event-chips {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 10px; margin-top: 8px;
}
.chip {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 62px; padding: 14px 10px;
  border-radius: 14px; font-weight: 600; font-size: .92rem; line-height: 1.25;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s, border-color .3s, color .3s;
  cursor: default;
}
.chip:hover {
  transform: translateY(-3px); color: #fff;
  background: rgba(255,255,255,.09); border-color: rgba(255,122,177,.45);
}
@media (max-width: 1100px) { .event-chips { grid-template-columns: repeat(4, 1fr); } }

.events .note {
  margin-top: 40px; padding: 24px 30px; border-radius: 18px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-left: 3px solid #ff7ab1;
  color: rgba(255,255,255,.78); font-size: .98rem; max-width: 640px;
}
.events .note strong { color: #fff; }

/* ============ membership ============ */
/* Membership and the safety strip below it were BOTH flat cream, and the safety strip
   has no top padding — so they read as one long pale slab. A few-percent wash of the
   brand purple/pink lifts this block off the one beneath it without shouting, and
   without fighting the member card's gradient border. */
.membership {
  padding: clamp(100px, 13vw, 170px) 0;
  background:
    radial-gradient(900px 520px at 12% 0%,   rgba(78,31,166,.10), transparent 62%),
    radial-gradient(820px 520px at 92% 100%, rgba(176,42,122,.06), transparent 60%),
    var(--cream);
}
.member-card {
  position: relative; max-width: 700px; margin: 0 auto;
  border-radius: 32px; padding: 3px;
  background: var(--grad);
  box-shadow: 0 30px 80px rgba(78,31,166,.22);
}
.member-inner {
  background: #fff; border-radius: 29px; padding: clamp(38px, 6vw, 64px);
  text-align: center;
}
.member-inner .tag {
  display: inline-block; background: var(--grad-soft); color: #fff;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: 9px 20px; border-radius: 999px; margin-bottom: 24px;
}
.member-inner h3 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 6px; }
.member-inner .price { font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 800;
  background: var(--grad-soft); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.member-inner .price small { font-size: 1.1rem; color: var(--ink-soft); -webkit-text-fill-color: var(--ink-soft); font-weight: 600; }
.member-list { list-style: none; margin: 30px 0 36px; text-align: left; display: grid; gap: 14px; }
.member-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-soft); font-size: .99rem; }
.member-list li::before {
  content: '✓'; flex: 0 0 22px; height: 22px; border-radius: 50%;
  background: var(--grad-soft); color: #fff; font-size: .72rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 3px;
}
.member-inner .fine { font-size: .84rem; color: var(--ink-soft); margin-top: 18px; }

/* ============ safety strip ============ */
.safety { padding: 0 0 clamp(90px, 12vw, 150px); background: var(--cream); }
.safety-inner {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;
}
.safe-item {
  border: 1px solid rgba(36,20,88,.10); border-radius: 20px; padding: 30px 28px;
  background: #fff; display: flex; gap: 18px; align-items: flex-start;
  transition: transform .3s, box-shadow .3s;
}
.safe-item:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(36,20,88,.10); }
.safe-item .ic {
  flex: 0 0 44px; height: 44px; border-radius: 13px; background: rgba(107,42,193,.10);
  display: flex; align-items: center; justify-content: center;
}
.safe-item .ic svg { width: 22px; height: 22px; stroke: var(--purple); }
.safe-item h4 { font-size: 1.02rem; margin-bottom: 5px; }
.safe-item p { font-size: .88rem; color: var(--ink-soft); }

/* ============ final CTA ============ */
/* The closer now carries the same gradient as the logo splash, so the page is
   bookended: gradient on the way in, gradient on the way out. */
.cta {
  margin: 0 clamp(8px, 1.4vw, 20px) clamp(20px, 3vw, 40px);
  border-radius: 56px; overflow: hidden; position: relative;
  background: var(--grad-logo);
  padding: clamp(110px, 15vw, 180px) 0;
  text-align: center; color: #fff;
}
.cta h2 { font-size: clamp(2.2rem, 5.6vw, 4.2rem); max-width: 17ch; margin: 0 auto 22px; position: relative; z-index: 2;}
/* "yoked?" used to be light-purple->pink gradient TEXT, which would all but vanish
   on a purple->pink panel. It borrows the hero's italic serif treatment instead —
   same brand tic as "Equally yoked." in the hero, and it actually reads. */
.cta h2 .grad-text {
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  color: #fff; -webkit-text-fill-color: #fff;
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 440;
  padding-right: .04em;
}
.cta p { color: rgba(255,255,255,.88); max-width: 52ch; margin: 0 auto 44px; position: relative; z-index: 2; }
.cta .btn { position: relative; z-index: 2; }
/* A gradient button on a gradient panel is mush — the primary CTA goes solid white. */
.cta .btn-primary {
  background: #fff; color: var(--navy);
  box-shadow: 0 12px 34px rgba(40,10,60,.28);
}
.cta .btn-primary:hover {
  background: #fff; transform: translateY(-3px) scale(1.02);
  box-shadow: 0 18px 44px rgba(40,10,60,.36);
}
.cta .btn-ghost { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.38); }
.cta .btn-ghost:hover { background: rgba(255,255,255,.24); }
.cta .interest-form input { border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.12); }
.cta .interest-form input::placeholder { color: rgba(255,255,255,.6); }
.cta .interest-msg { color: #eaffef; }
.cta .interest { margin-top: 54px; position: relative; z-index: 2; }
.cta .interest p { font-size: .92rem; margin-bottom: 16px; }
.interest-form {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.interest-form input {
  width: min(360px, 80vw); padding: 15px 24px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08);
  color: #fff; font-family: inherit; font-size: .95rem; outline: none;
  backdrop-filter: blur(8px);
}
.interest-form input::placeholder { color: rgba(255,255,255,.45); }
.interest-form input:focus { border-color: #ff7ab1; }
.interest-msg { font-size: .88rem; margin-top: 14px; color: #4ade80; min-height: 1.2em; }

/* "Not for you, but somebody came to mind?" — sits under the interest form on
   the dark closing CTA. Deliberately quiet: it is a third option, not a third
   competing call to action, and stacking three shouts at the end of a page
   means none of them lands. */
.nominate-line {
  margin-top: 26px; font-size: .92rem; color: rgba(255,255,255,.7);
}
.nominate-line a {
  color: #fff; font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.45);
}
.nominate-line a:hover { text-decoration-color: #fff; }

/* ============ top-nav — the sub-page header ============
   Was defined inline in apply.html and status.html and nowhere else, so any new
   page copying the markup got an unstyled bar: the logo at natural size and a
   dark link on a dark background. Canonical here now; the inline copies are
   gone.

   THE WORDMARK is ymlogo-white.png — the real, designed white "yoked
   matchmaking" lockup that was in storage the whole time. No CSS filter and no
   built-from-two-fonts lockup; the asset is already white on transparent, so
   it just drops onto the dark bar.

   (Earlier attempts here were wrong: logo-white.png says only "yoked",
   ymlogo-indigo.png is dark, and a built lockup baseline-aligned two different
   typefaces. ymlogo-white.png is the one that was meant for exactly this.) */
.top-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 10; padding: 18px 0; }
.top-nav .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.top-nav .brand-lockup { display: inline-flex; align-items: center; }
.top-nav img { height: 36px; width: auto; display: block; }
@media (max-width: 480px) { .top-nav img { height: 28px; } }
/* A pill, not a bare link — on a dark aurora background a plain text link has
   nothing to sit against and reads as barely-there. */
.top-nav a.back-home {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  color: #fff; font-size: .85rem; font-weight: 600; white-space: nowrap;
  backdrop-filter: blur(8px); transition: background .2s, border-color .2s;
}
.top-nav a.back-home:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.5); }

/* ============ nominate — the second audience ============
   Sits between "why Yoked" (navy-deep) and the founders story (cream).
   WHITE, not cream: cream here would run straight into the founders section
   below with no seam and the block would stop reading as its own thing. Dark,
   then white, then cream gives three distinct tones and two clean edges — and
   the tone change is doing real work, because a visitor who has decided this
   isn't for them needs to notice the page start addressing somebody else.
   The step cards invert to cream for the same reason. */
.nominate { background: #fff; padding: clamp(70px, 9vw, 110px) 0; }
.nominate-inner { text-align: center; max-width: 780px; margin: 0 auto; }
.nominate h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.25; margin: 14px 0 18px; }
.nominate > .wrap > p, .nominate-inner > p:not(.nom-foot) {
  color: var(--ink-soft); font-size: 1.02rem; line-height: 1.75;
  max-width: 56ch; margin: 0 auto 38px;
}
.nom-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  text-align: left; margin-bottom: 38px;
}
@media (max-width: 720px) { .nom-steps { grid-template-columns: 1fr; gap: 16px; } }
.nom-step {
  background: var(--cream); border: 1px solid rgba(28,33,69,.09); border-radius: 18px;
  padding: 22px 20px;
}
.nom-step .n {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--grad-soft); color: #fff; font-weight: 800; font-size: .85rem;
  margin-bottom: 12px;
}
.nom-step p { font-size: .93rem; line-height: 1.65; color: var(--ink-soft); margin: 0; }
.nom-step p b { color: var(--ink); font-weight: 600; }
.nom-foot {
  font-size: .88rem; color: var(--ink-soft); margin: 46px auto 0; max-width: 48ch;
  line-height: 1.7;
}

/* ============ footer ============ */
footer {
  background: var(--cream); padding: 60px 0 40px;
}
/* The logo used to sit hard-left and the links hard-right, while the verse, the
   SEO row and the legal text below were all centerd. Two different axes in one
   footer reads as a mistake. Everything is centerd on one column now. */
.foot-grid {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 24px;
}
.foot-grid img { height: 56px; }
.foot-links { display: flex; justify-content: center; gap: 26px; list-style: none; flex-wrap: wrap; }
.foot-links a { font-size: .88rem; color: var(--ink-soft); transition: color .25s; }
.foot-links a:hover { color: var(--purple); }
.foot-verse { text-align: center; margin-top: 44px; color: var(--ink-soft); font-size: .86rem; }
.foot-verse b { color: var(--ink); }
/* Was #9aa0c3, which is 2.44:1 on the cream footer — small text needs 4.5:1.
   Another leftover from when this footer was dark. --ink-soft measures 5.87:1
   and is the same color the rest of the footer's supporting text already uses.
   This paragraph is the guarantee disclaimer; it has to be readable. */
.foot-legal { text-align: center; margin-top: 18px; font-size: .76rem; color: var(--ink-soft); max-width: 70ch; margin-left: auto; margin-right: auto; }

/* ============ the promise ============
   One introduction at a time. This is the single strongest idea in the product
   and the one thing a swiping app can never copy — so it gets its own block,
   not a bullet. Deliberately quiet: no icon, no gradient, just a rule stated
   plainly on a card that stops the page. */
.promise {
  margin-top: 54px;
  background: linear-gradient(180deg, #f7f5fd 0%, #f1edf9 100%);
  border: 1px solid rgba(107,42,193,.16);
  border-radius: var(--radius);
  padding: clamp(30px, 4.4vw, 52px);
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.promise-kicker {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--purple);
  margin-bottom: 14px;
}
.promise h3 {
  font-size: clamp(1.5rem, 3.2vw, 2.05rem);
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}
.promise p {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 58ch;
  margin: 0 auto 14px;
}
.promise .promise-fine {
  font-size: .9rem;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(107,42,193,.14);
}
@media (max-width: 640px) {
  .promise { margin-top: 38px; text-align: left; }
  .promise p { text-align: left; }
}

/* ============ reveal defaults ============ */
.rv { opacity: 0; transform: translateY(44px); }

/* ============ mobile ============ */
@media (max-width: 900px) {
  .steps, .diff-grid, .safety-inner { grid-template-columns: 1fr; }
  .founders-grid { grid-template-columns: 1fr; }
  .founders-photo { max-width: 480px; margin: 0 auto; }
  .nav-links { display: none; }
  .nav-logo { grid-column: 2; }
  /* menu left, logo center, persistent Apply pill right */
  .nl-right { display: flex; justify-self: end; gap: 0; }
  .nl-right a:not(.btn) { display: none; }
  /* nowrap or "Apply to Join" breaks onto two lines and collides with the logo */
  .nav .btn { padding: 9px 16px; font-size: .76rem; white-space: nowrap; }
  .nav-logo img { height: 26px; }
  .nav-burger { position: absolute; left: 0; right: auto; top: 50%; transform: translateY(-50%); }
  .nav-burger {
    display: flex; flex-direction: column; gap: 5px; padding: 8px;
  }
  .nav-burger span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: .3s; }
  .nav-burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-burger.open span:nth-child(2){ opacity: 0; }
  .nav-burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  .mobile-menu {
    position: fixed; inset: 0; z-index: 49; background: rgba(24,12,60,.97);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px;
    opacity: 0; pointer-events: none; transition: opacity .35s;
  }
  .mobile-menu.open { opacity: 1; pointer-events: auto; }
  .mobile-menu a { color: #fff; font-size: 1.5rem; font-weight: 700; }
  .hero { padding-top: 90px; }
  .events, .cta { border-radius: 32px; }
  .how { border-radius: 32px 32px 0 0; }
}
@media (min-width: 901px) { .mobile-menu { display: none; } }

/* ============ phone ============ */
@media (max-width: 640px) {
  .wrap { width: min(1180px, 89vw); }

  /* --- hero ---
     Keep the photograph doing the work: only the eyebrow and headline sit on it.
     The CTA and meta strip drop onto a solid band below the image, so the couple
     isn't buried under a stack of UI. The headline still overlaps the photo's
     lower edge, and the image fades into the band so there's no hard seam.
     (The headline was also `white-space: nowrap` at 9vw, which ran clean off the
     right edge on a phone — it wraps now.) */
  .hero { padding-top: 76px; }
  .hero-bg { height: calc(100% - 208px); }
  /* Phone crop is even brighter than desktop (~172/255 raw) because it lands on the
     dress and the table. Heavier ramp brings the headline zone to ~78. */
  .hero-shade {
    height: calc(100% - 208px);
    background:
      linear-gradient(to top,
        var(--navy-deep) 0%, rgba(24,12,60,.94) 12%, rgba(24,12,60,.70) 34%,
        rgba(24,12,60,.32) 55%, transparent 75%),
      linear-gradient(to bottom, rgba(16,8,40,.55) 0%, rgba(16,8,40,.15) 18%, transparent 30%);
  }
  .hero-bottom { text-align: left; padding: 0 0 4px; }
  .eyebrow { font-size: .65rem; letter-spacing: .24em; margin-bottom: 14px; }

  .hero-lines { font-size: clamp(2.5rem, 12vw, 3.5rem); line-height: 1.03; letter-spacing: -.035em; }
  .hero-lines .line { white-space: normal; overflow: visible; padding-bottom: 0; margin-bottom: 1px; }
  /* wrapping breaks the mask-reveal, so fade the lines up instead */
  .hero-lines .line > span {
    transform: none; opacity: 0;
    animation: fadeUp .9s cubic-bezier(.2,.7,.2,1) forwards;
  }

  .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 26px; }
  .hero .btn-white, .hero .btn-primary { width: 100%; padding: 18px 28px; font-size: 1rem; }
  .link-arrow { text-align: center; padding: 2px 0 4px; }

  .hero-meta { font-size: .63rem; letter-spacing: .1em; }
  .hero-meta .wrap {
    flex-direction: column; align-items: flex-start; text-align: left;
    gap: 6px; padding: 14px 0 18px;
  }

  /* --- rhythm --- */
  .manifesto { padding: 88px 0; }
  .manifesto h2 { font-size: 2rem; max-width: 18ch; }
  .manifesto .foot { margin-top: 26px; font-size: .98rem; }
  .how, .different, .founders, .events, .membership { padding-top: 78px; padding-bottom: 78px; }
  .sec-head { margin-bottom: 38px; }
  .sec-head h2 { font-size: 1.95rem; }
  .sec-head p { font-size: .98rem; }

  .steps { gap: 16px; }
  .step { padding: 32px 26px; border-radius: 20px; }
  .step .num { font-size: 3.4rem; margin-bottom: 14px; }
  .step h3 { font-size: 1.2rem; }

  .diff-grid { gap: 16px; margin-top: 40px; }
  .diff-card { padding: 30px 26px; border-radius: 20px; }
  .diff-card .icon { width: 46px; height: 46px; border-radius: 14px; margin-bottom: 18px; }

  .founders-grid { gap: 34px; }
  .founders-photo .frame { border-radius: 24px; }
  .founders-copy .quote { font-size: 1.5rem; margin: 20px 0; }

  .event-chips { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .chip { min-height: 56px; padding: 12px 10px; font-size: .9rem; }
  /* 7 items over 2 columns leaves the last one stranded on its own row —
     span it so the block ends square. */
  .event-chips .chip:last-child { grid-column: 1 / -1; }
  .events .note { margin-top: 32px; padding: 20px 22px; font-size: .94rem; }

  .member-inner { padding: 34px 24px; }
  /* inline, this wrapped and orphaned "required" onto its own line */
  .member-inner .price small { display: block; font-size: .95rem; margin-top: 8px; }
  .member-list { gap: 12px; margin: 24px 0 28px; }
  .member-list li { font-size: .95rem; }
  .member-inner .btn { width: 100%; }

  .safety { padding-bottom: 84px; }
  .safety-inner { gap: 14px; }
  .safe-item { padding: 24px 22px; border-radius: 18px; }

  .cta { padding: 92px 0; }
  .cta h2 { font-size: 2.4rem; }
  .cta p { margin-bottom: 32px; }
  .cta .btn-primary { width: 100%; }
  .cta .interest { margin-top: 44px; }
  .interest-form { flex-direction: column; }
  .interest-form input { width: 100%; }
  .interest-form .btn { width: 100%; }

  footer { padding: 48px 0 36px; }
  .foot-grid { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
  .foot-grid img { height: 46px; }
  .foot-links { justify-content: center; gap: 14px 20px; }
  .foot-verse { margin-top: 30px; }
}

/* ══ REDUCE MOTION ══════════════════════════════════════════════════════════
   ⚠️ THE RULE: turning motion OFF must never turn CONTENT off.

   `* { animation: none !important }` is the right instinct — but almost
   everything on this page animates IN from opacity:0, and killing the animation
   left those elements invisible FOREVER. The entire hero was a blank navy block,
   and the splash never lifted, for anyone with Reduce Motion enabled. They
   couldn't see or use the site at all, and we'd never have known.

   So: every element that animates in MUST be given its finished state here.
   If you ever add another `opacity:0 + animation` element, add it below too. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }

  /* No curtain at all — a splash is pure motion, and they've asked for none. */
  #intro { display: none !important; }

  /* The hero, delivered finished. */
  .hero-bg { opacity: 1 !important; transform: none !important; }
  .hero-lines .line > span { opacity: 1 !important; transform: none !important; }
  .eyebrow,
  .hero p.sub,
  .hero-ctas,
  .hero-meta { opacity: 1 !important; transform: none !important; }

  /* Scroll reveals (these are GSAP-driven, but belt and braces). */
  .rv { opacity: 1 !important; transform: none !important; }
}