/* ══ THE HOMEPAGE HERO, rebuilt 15 Oct 2026 ══════════════════════════════
   Daniel: "for a website hero after /card... this is not great. i need
   something better." Review: yoked/REVIEW-2026-10-15-hero-after-card.md.
   The 15 second logo film retired from the first screen: it held the
   headline back, and most visitors (phones, from Instagram and Facebook)
   leave in about 15 seconds. The page now opens on the promise and the
   product: the headline, one loud Apply button, and the Yoked app showing
   an introduction. The logo lives in the nav at nav size.
   ⚠️ The app screen is an ILLUSTRATION. No made up member: no name, no
   photo, no age. It shows what an introduction looks like, not who.
   ⚠️ No marquee, no ticker, no streak lines. The proof row is static.
   16 Oct: light. Daniel, "I feel like the hero is a little too purple and dark..
   what about a white background?" Warm cream white with soft lavender and
   blush glows; the phone stays the dark match card so it is the one dark
   object on the screen. Review: yoked/REVIEW-2026-10-16-hero-white.md. */

.hx {
  --hx-ink: #1b1530;
  --hx-soft: rgba(27,21,48,.74);
  --hx-quiet: rgba(27,21,48,.6);
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100svh; display: flex; flex-direction: column;
  background:
    radial-gradient(42% 55% at 76% 46%, rgba(255,150,190,.30) 0%, rgba(255,150,190,0) 70%),
    radial-gradient(40% 50% at 92% 18%, rgba(181,163,255,.28) 0%, rgba(181,163,255,0) 70%),
    radial-gradient(45% 55% at 6% 8%, rgba(181,163,255,.26) 0%, rgba(181,163,255,0) 70%),
    linear-gradient(180deg, #fdfbf7 0%, #fbf8f3 100%);
  color: var(--hx-ink);
}
/* a fine grain so the gradient reads as a surface, not a screen */
.hx::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(27,21,48,.025) 1px, transparent 1px);
  background-size: 3px 3px;
}
.hx-main {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center; gap: 48px;
  padding-top: 104px; padding-bottom: 24px;
}

/* ── the words ── */
.hx-copy { max-width: 620px; }
.hx-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 12px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(107,42,193,.16); box-shadow: 0 6px 18px -10px rgba(107,42,193,.35);
  font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: #4b3a7a;
}
.hx-eyebrow i {
  width: 8px; height: 8px; border-radius: 50%; background: #e0407a;
  box-shadow: 0 0 0 4px rgba(224,64,122,.16);
}
.hx h1 {
  margin: 26px 0 0; font-weight: 800; letter-spacing: -.035em; line-height: .98;
  font-size: clamp(3.3rem, 6.2vw, 5.9rem); color: var(--hx-ink); text-wrap: balance;
}
.hx h1 .l { display: block; }
.hx h1 em {
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 500; letter-spacing: -.02em;
  background: linear-gradient(100deg, #6b2ac1 0%, #a52fa8 45%, #e0407a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .08em;
}
.hx-sub {
  margin: 26px 0 0; max-width: 33ch;
  font-size: clamp(1.12rem, 1.35vw, 1.3rem); line-height: 1.55; color: var(--hx-soft);
}
.hx-ctas { display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap; margin-top: 36px; }
.hx .btn-primary { padding: 19px 42px; font-size: 1.08rem; font-weight: 800;
  box-shadow: 0 14px 30px -10px rgba(165,47,168,.55); }
.hx-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--hx-ink); font-weight: 600; font-size: 1.02rem;
  border-bottom: 1.5px solid rgba(27,21,48,.25); padding-bottom: 3px;
  transition: border-color .2s;
}
.hx-link:hover { border-color: var(--hx-ink); }
.hx-assure {
  margin: 18px 0 0; font-size: .95rem; color: var(--hx-quiet);
}
.hx-assure b { color: var(--hx-ink); font-weight: 600; }

/* ── the phone ── */
.hx-stage { position: relative; display: flex; justify-content: center; padding: 64px 0 24px; text-align: left; }
.hx-phone {
  position: relative; width: 292px; aspect-ratio: 9 / 19.2;
  border-radius: 52px; padding: 11px;
  background: linear-gradient(160deg, #3a2a63, #120a2c 60%);
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,.22) inset,
    0 0 0 1px rgba(201,167,240,.18),
    0 50px 90px -30px rgba(40,18,100,.45),
    0 30px 60px -30px rgba(224,64,122,.35);
}
/* The screen IS the member app's match card (app/index.html .rec-*): dark,
   photo up top, entrance song, the note from Daniel & Jennifer, Say hello.
   16 Oct, Daniel: "people have to be able to trust us and this is the first
   thing they see." The note's reasons are real things the application asks
   and weighs (conflict, fasting, readiness); the closer is one small true
   detail from the this or that section, and it hands them their first line.
   See yoked/RESEARCH-2026-10-15-hero-card-why-we-chose-you.md. */
.hx-screen {
  position: relative; height: 100%; border-radius: 42px; overflow: hidden;
  background: #170c3d; color: #fff;
  display: flex; flex-direction: column;
}
.hx-notch { position: absolute; top: 10px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 20px; background: #05020f; z-index: 4; }
.hx-top { position: relative; flex: none; height: 168px; overflow: hidden;
  background: linear-gradient(140deg, #5b21b6, #8b2fc9 55%, #db3589); }
/* a soft, unreadable portrait: an illustration, never a person */
.hx-top::before { content: ""; position: absolute; left: 50%; bottom: -30px; width: 150px; height: 170px; margin-left: -75px;
  background: radial-gradient(circle at 50% 30%, rgba(255,214,230,.75) 0 19%, transparent 20%),
              radial-gradient(ellipse at 50% 100%, rgba(255,214,230,.6) 0 50%, transparent 51%);
  filter: blur(9px); }
.hx-top::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,12,61,.35) 0%, rgba(23,12,61,0) 30%, rgba(23,12,61,.5) 70%, #170c3d 100%); }
.hx-status { position: relative; z-index: 3; display: flex; justify-content: space-between; padding: 14px 24px 0; font-size: 11.5px; font-weight: 700; }
.hx-eyebrow2 { position: absolute; z-index: 3; top: 44px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700;
  background: rgba(23,12,61,.42); padding: 5px 12px; border-radius: 999px; }
.hx-dots { position: absolute; z-index: 3; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; }
.hx-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.42); }
.hx-dots i:first-child { width: 14px; border-radius: 999px; background: #fff; }
.hx-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 4px 13px 15px; }
.hx-song { display: flex; align-items: center; gap: 10px; padding: 9px; border-radius: 14px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.17); }
.hx-art { width: 38px; height: 38px; border-radius: 7px; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, #7a3ff0, #ff5c8a); font-size: 17px; }
.hx-song-x { flex: 1; min-width: 0; }
.hx-song-x i { display: block; font-style: normal; font-size: 8px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: #c9a7f0; }
.hx-wave { display: flex; align-items: center; gap: 2px; height: 16px; margin-top: 4px; }
.hx-wave b { width: 3px; border-radius: 2px; background: rgba(255,255,255,.75); }
.hx-play { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #fff; color: #6b2ac1; font-size: 10px; padding-left: 2px; }
.hx-why { padding: 13px 14px 12px; border-radius: 14px; background: linear-gradient(160deg, rgba(219,53,137,.16), rgba(107,42,193,.12) 60%, rgba(255,255,255,.04)); border: 1px solid rgba(255,122,177,.24); }
.hx-why small { display: block; font-size: 8px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.55); margin-bottom: 7px; }
.hx-why p { margin: 0; font-size: 12.5px; line-height: 1.6; font-style: italic; color: rgba(255,255,255,.93); }
.hx-why .by { margin-top: 7px; font-size: 10px; font-style: normal; font-weight: 600; color: rgba(255,255,255,.55); }
.hx-say {
  margin-top: auto; padding: 12px; border-radius: 999px; text-align: center;
  font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(100deg, #6b2ac1, #d4357f);
}
/* floating moments around the phone */
.hx-note, .hx-bubble {
  position: absolute; z-index: 2;
  box-shadow: 0 22px 50px -16px rgba(40,18,100,.35);
}
.hx-note {
  top: 0; left: calc(50% - 250px); width: 292px;
  display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 20px;
  background: #fff; color: #1b1530; border: 1px solid rgba(27,21,48,.06);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.hx-note img { width: 38px; height: 38px; border-radius: 10px; background: #241458; padding: 5px; flex: none; }
.hx-note small { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: #8a83a8; }
.hx-note b { display: block; font-size: 14px; font-weight: 700; margin-top: 1px; white-space: nowrap; }
.hx-bubble {
  bottom: 92px; right: calc(50% - 292px); max-width: 236px;
  padding: 13px 16px; border-radius: 20px 20px 6px 20px;
  background: linear-gradient(100deg, #7a3ff0, #e0408a); color: #fff;
  font-size: 14px; font-weight: 600; line-height: 1.4;
}
.hx-bubble small { display: block; font-size: 11px; font-weight: 600; opacity: .8; margin-bottom: 3px; }

/* ── the proof row (static) ── */
.hx-proof { position: relative; border-top: 1px solid rgba(107,42,193,.10); background: #f3eefb; }
.hx-proof ul {
  list-style: none; margin: 0 auto; padding: 20px 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px;
}
.hx-proof li { white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: .95rem; font-weight: 600; color: var(--hx-soft); text-align: left; }
.hx-proof svg { flex: none; width: 22px; height: 22px; color: #a52fa8; }

/* ── the entrance: quick, once, and never on the way back ── */
@keyframes hxUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hxPhone { from { opacity: 0; transform: translateY(40px) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes hxPop { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes hxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.hx-eyebrow, .hx h1 .l, .hx-sub, .hx-ctas, .hx-assure { animation: hxUp .7s cubic-bezier(.2,.7,.2,1) both; }
.hx h1 .l:nth-child(1) { animation-delay: .06s; }
.hx h1 .l:nth-child(2) { animation-delay: .14s; }
.hx-sub { animation-delay: .24s; }
.hx-ctas { animation-delay: .32s; }
.hx-assure { animation-delay: .4s; }
.hx-phone { animation: hxPhone .9s .15s cubic-bezier(.2,.7,.2,1) both; }
.hx-note { animation: hxPop .55s .85s cubic-bezier(.2,.9,.3,1.2) both, hxFloat 6s 1.6s ease-in-out infinite; }
.hx-bubble { animation: hxPop .55s 1.45s cubic-bezier(.2,.9,.3,1.2) both, hxFloat 7s 2.2s ease-in-out infinite; }
html.no-arrival .hx *, html.no-arrival .hx-phone { animation-delay: 0s !important; animation-duration: .01s !important; }
html.no-arrival .hx-note, html.no-arrival .hx-bubble { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hx *, .hx-phone, .hx-note, .hx-bubble { animation: none !important; }
}

/* The nav over this hero (16 Oct: the hero went light). At the top of the
   page the links, the burger and the logo are dark ink and the color logo;
   once the page scrolls the nav turns its usual dark glass and everything
   goes back to white. The nav's Apply stays a quiet outline until scroll,
   so the hero's gradient Apply is the one loud action on the first screen. */
.nav-logo .nl-color { display: none; }
.nav:not(.scrolled) .nav-logo .nl-color { display: inline; }
.nav:not(.scrolled) .nav-logo .nl-white { display: none; }
.nav:not(.scrolled) .nav-links a,
.nav:not(.scrolled) .nl-right a:not(.btn) { color: rgba(27,21,48,.78); }
.nav:not(.scrolled) .nav-links a:hover,
.nav:not(.scrolled) .nl-right a:not(.btn):hover { color: #1b1530; }
.nav:not(.scrolled) .nl-right a.btn-white {
  background: transparent; color: #1b1530; box-shadow: inset 0 0 0 1.5px rgba(27,21,48,.35);
}
.nav:not(.scrolled) .nl-right a.btn-white:hover { background: rgba(27,21,48,.05); }
.nav:not(.scrolled) .nav-burger:not(.open) span { background: #1b1530; }
/* phone menu open over the light hero: the overlay is dark, so the nav's Apply goes white again */
.nav:not(.scrolled):has(.nav-burger.open) .nl-right a.btn-white { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }

/* ── laptops ── */
@media (max-width: 1180px) {
  .hx-main { gap: 24px; }
  .hx-note { left: calc(50% - 230px); }
  .hx-bubble { right: calc(50% - 236px); }
}
/* ── tablets and phones: words first, the phone peeks up underneath ── */
@media (max-width: 900px) {
  .hx-main { grid-template-columns: 1fr; text-align: center; padding-top: 108px; padding-bottom: 0; gap: 8px; }
  .hx-copy { margin: 0 auto; }
  .hx-sub { margin-left: auto; margin-right: auto; }
  .hx-ctas { justify-content: center; }
  .hx-stage { padding: 72px 0 0; height: 690px; overflow: hidden; align-items: flex-start;
    -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, #000 88%, transparent 100%); }
  .hx-note { top: 12px; left: calc(50% - 205px); }
  .hx-bubble { display: none; }
  .hx-proof ul { grid-template-columns: 1fr 1fr; padding: 18px 0 22px; }
  .hx-proof li { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .hx-proof li { white-space: normal; }
  .hx-main { padding-top: 96px; }
  .hx-eyebrow { font-size: .74rem; padding: 7px 13px 7px 10px; }
  .hx h1 { font-size: clamp(2.7rem, 13.2vw, 3.6rem); margin-top: 20px; }
  .hx-sub { font-size: 1.06rem; margin-top: 18px; }
  .hx-ctas { flex-direction: column; gap: 14px; margin-top: 26px; }
  .hx .btn-primary { width: 100%; padding: 19px 28px; }
  .hx-assure { font-size: .88rem; margin-top: 12px; }
  .hx-stage { height: 640px; padding-top: 68px; }
  .hx-phone { width: 270px; border-radius: 46px; padding: 9px; }
  .hx-screen { border-radius: 38px; }
  .hx-note { width: 252px; left: 50%; margin-left: -150px; top: 12px; padding: 10px 12px; }
  .hx-note b { font-size: 13px; }
  .hx-note img { width: 34px; height: 34px; }
  .hx-bubble { right: 50%; margin-right: -172px; top: 300px; max-width: 196px; font-size: 13px; }
  .hx-proof ul { grid-template-columns: 1fr; gap: 12px; padding: 20px 0 24px; }
  .hx-proof li { font-size: .9rem; gap: 10px; white-space: nowrap; }
  .hx-proof svg { width: 18px; height: 18px; }
}