/* ==========================================================================
   vixxxen.ai homepage, "Your AI OFM team" (specs/homepage-ai-ofm-team.md, PR C)
   Markup: landing/index.html. The character grid's own rules come from
   css/landing-characters.css (inlined by the server); the overrides for this
   page sit at the end, under .hm.

   The same sheet styles app.vixxxen.ai's signed-out page
   (specs/app-signed-out-home.md: shared/templates/landing.html, generated from
   landing/index.html, inside <div class="hm hm-app">). So nothing here may
   reach outside .hm: every rule is under .hm, a .hm-* class, or html/body
   only when the body is the page (body.hm). js/__tests__/app-landing-template
   .test.js checks every selector.
   ========================================================================== */

.hm {
  --hm-bg: #0d0c11;
  --hm-bg-alt: #121017;
  --hm-line: #24212c;
  --hm-card: #17151d;
  --hm-card-line: #2a2633;
  --hm-tile: #221f2a;
  --hm-float: #1b1922;
  --hm-float-line: #332e3d;
  --hm-text: #f4f2f7;
  --hm-muted: #c9c3d4;
  --hm-dim: #a9a3b5;
  --hm-eyebrow: #ff7ab8;
  --hm-logo: #ff4fa3;
  --hm-outline: #4a4458;
  --hm-chip-line: #3a3546;
  --hm-hot: #1d1424;
  --hm-hot-line: #5a2a4a;
  --hm-team-line: #b0306f;
  --hm-ok: #5fd39b;
  --hm-ok-bg: #15281f;
  --hm-accent: linear-gradient(90deg, #d81b76, #3b6cf0);
  --hm-focus: #8db4ff;
  --hm-display: 'Bricolage Grotesque', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --hm-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

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

/* vixxxen.ai, where the page is the whole document. */
html:has(> body.hm) {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body.hm {
  margin: 0;
  overflow-x: hidden;
}

/* The page's own type and colours, also inside the app's mount. */
.hm {
  background: var(--hm-bg);
  color: var(--hm-text);
  font-family: var(--hm-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}

.hm a {
  color: var(--hm-eyebrow);
}

.hm a:hover {
  color: #ffffff;
}

.hm a:focus-visible,
.hm button:focus-visible,
.hm summary:focus-visible {
  outline: 2px solid var(--hm-focus);
  outline-offset: 3px;
}

.hm img {
  max-width: 100%;
}

.hm h1,
.hm h2,
.hm h3,
.hm p,
.hm figure,
.hm blockquote {
  margin: 0;
}

.hm-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.hm-band {
  background: var(--hm-bg-alt);
  border-top: 1px solid var(--hm-line);
  border-bottom: 1px solid var(--hm-line);
}

.hm-section {
  padding-top: 96px;
  padding-bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.hm-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
}

.hm-head--row {
  max-width: none;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 20px;
}

.hm-head--row > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 680px;
}

.hm-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hm-eyebrow);
}

.hm-h2 {
  font-family: var(--hm-display);
  font-weight: 800;
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.hm-lede {
  font-size: 19px;
  color: var(--hm-muted);
}

.hm-num {
  font-family: var(--hm-display);
  font-weight: 800;
}

/* Phone-only and wide-only copy (the phone first screen has its own, shorter lines). */
@media (min-width: 761px) {
  .hm-only-phone {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .hm-only-wide {
    display: none !important;
  }
}

/* ---- Buttons ----------------------------------------------------------- */

.hm .hm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.hm .hm-btn--primary {
  background: var(--hm-accent);
  color: #ffffff;
}

.hm .hm-btn--primary:hover {
  color: #ffffff;
  filter: brightness(1.08);
}

.hm .hm-btn--ghost {
  border-color: var(--hm-outline);
  background: transparent;
  color: var(--hm-text);
  font-weight: 600;
}

.hm .hm-btn--ghost:hover {
  color: #ffffff;
  border-color: #6b6380;
}

.hm .hm-btn--md {
  min-height: 52px;
  padding: 0 24px;
  font-size: 17px;
}

.hm .hm-btn--sm {
  min-height: 44px;
  padding: 0 20px;
  font-size: 15px;
}

.hm .hm-btn svg {
  flex: 0 0 auto;
}

.hm .hm-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.hm .hm-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Nav --------------------------------------------------------------- */

.hm-nav {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--hm-line);
  background: var(--hm-bg);
}

.hm-nav__row {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.hm .hm-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--hm-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.02em;
  color: var(--hm-text);
  text-decoration: none;
}

.hm .hm-logo span {
  color: var(--hm-logo);
}

.hm-nav__links {
  display: flex;
  flex: 1 1 auto;
  gap: 24px;
  font-size: 15px;
  font-weight: 500;
}

.hm .hm-nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--hm-muted);
  text-decoration: none;
}

.hm .hm-nav__links a:hover {
  color: #ffffff;
}

.hm-nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.hm .hm-nav__signin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  color: var(--hm-text);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.hm-nav__menu {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--hm-text);
  cursor: pointer;
}

/* ---- Hero -------------------------------------------------------------- */

.hm-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
  padding-top: 72px;
  padding-bottom: 64px;
}

.hm-hero__copy {
  flex: 1 1 540px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.hm-hero h1 {
  font-family: var(--hm-display);
  font-weight: 800;
  font-size: clamp(42px, 5.4vw, 72px);
  line-height: 1;
  letter-spacing: -0.025em;
}

.hm-hero__lede {
  max-width: 560px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--hm-muted);
}

.hm-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hm-hero__fine {
  font-size: 14px;
  color: var(--hm-dim);
}

.hm-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  padding-top: 18px;
  border-top: 1px solid var(--hm-line);
  font-size: 14px;
  color: var(--hm-muted);
}

.hm-proof b {
  color: var(--hm-text);
}

.hm-hero__art {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  justify-content: center;
}

/* From the width the art shows at, the hero is always two columns: the art
   never wraps under the text (2026-10-29: at 960-1099px it did). */
@media (min-width: 961px) {
  .hm-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(28px, 3.5vw, 48px);
  }
}

/* The hero's trend (Revision 2): a 3:4 loop in a rounded frame, and the
   "Made in one click" chip under it. */
.hm-hero__trend {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.hm-hero__video {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 28px;
  border: 6px solid #22202a;
  background: #000000;
}

.hm-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--hm-float);
  border: 1px solid var(--hm-float-line);
  font-size: 14px;
  font-weight: 600;
}

.hm-hero__chip svg {
  flex: 0 0 auto;
}

/* A trend's still and its loop, stacked. The loop has no src until
   shared/card-video-controller.js schedules it (on screen, motion allowed,
   its still painted) and fades in once it has painted a frame (has-frame). */
.hm-trend__still,
.hm-trend__loop {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hm-trend__loop {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hm [data-hm-trend].has-frame .hm-trend__loop {
  opacity: 1;
}

/* ---- One-click trends -------------------------------------------------- */

/* The path follows straight on (mockup: 88px above, 8px below). */
.hm .hm-trends {
  padding-top: 88px;
  padding-bottom: 8px;
  gap: 28px;
}

.hm-trends__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (min-width: 600px) {
  .hm-trends__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 961px) {
  .hm-trends__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.hm-trend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.hm-trend__media {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 16px;
  background: #1f1c27;
}

.hm-trend figcaption {
  font-size: 15px;
  font-weight: 700;
}

/* ---- The path (5 steps) and the Fanvue launch bonus -------------------- */

.hm-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hm-step {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border-radius: 18px;
  background: var(--hm-card);
  border: 1px solid var(--hm-card-line);
}

.hm-step--hot {
  background: var(--hm-hot);
  border-color: var(--hm-hot-line);
}

.hm-step__n {
  font-family: var(--hm-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--hm-eyebrow);
}

.hm-step h3 {
  font-size: 20px;
  font-weight: 700;
}

.hm-step p,
.hm-tool p {
  font-size: 15px;
  color: var(--hm-muted);
}

.hm-bonus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  padding: 26px 28px;
  border-radius: 18px;
  background: var(--hm-card);
  border: 1px solid var(--hm-card-line);
}

.hm-bonus__copy {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hm-bonus__title,
.hm-case__title {
  font-family: var(--hm-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
}

.hm .hm-bonus__claim {
  align-self: flex-start;
  margin-top: 8px;
  min-height: 48px;
  padding: 0 22px;
  font-size: 16px;
}

.hm-bonus__note {
  font-size: 13px;
  color: var(--hm-dim);
}

.hm-bonus__claim[hidden],
.hm-bonus__note[hidden] {
  display: none;
}

.hm-bonus__tiles {
  flex: 2 1 480px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hm-bonus__tile {
  flex: 1 1 140px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: 14px;
  background: var(--hm-tile);
}

.hm-bonus__tile .hm-num {
  font-size: 28px;
  line-height: 1.1;
}

.hm-bonus__tile span:last-child {
  font-size: 14px;
  color: var(--hm-muted);
}

/* ---- Results: the #wins wall (specs/homepage-results-wins.md) ----------- */
/* Two stories, six posts with their proof screenshot, then the Discord.
   Every rule is under .hm-results or an .hm-win* / .hm-av class, so nothing
   else on the page changes. */

.hm-results {
  background:
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(216, 27, 118, 0.12), transparent 70%),
    radial-gradient(ellipse 50% 40% at 100% 85%, rgba(59, 108, 240, 0.10), transparent 70%),
    var(--hm-bg-alt);
}

.hm-results .hm-section {
  gap: 48px;
}

.hm-results .hm-head {
  max-width: 940px;
}

.hm-results .hm-h2 {
  font-size: clamp(36px, 4.6vw, 64px);
  text-wrap: balance;
}

/* Initial circles: one colour per member, the same wherever they appear. */
.hm-av {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--hm-av-bg, #b4237a);
  color: #ffffff;
  font-family: var(--hm-display);
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
}

.hm-av--aiconic { --hm-av-bg: linear-gradient(140deg, #d81b76, #7b2fbf); }
.hm-av--lagoon  { --hm-av-bg: linear-gradient(140deg, #2f5fe0, #6a3fd0); }
.hm-av--zoey    { --hm-av-bg: linear-gradient(140deg, #c2185b, #8e1d5c); }
.hm-av--lola    { --hm-av-bg: linear-gradient(140deg, #e0457e, #a8326b); }
.hm-av--bambi   { --hm-av-bg: linear-gradient(140deg, #8b3fd8, #5a2aa3); }
.hm-av--sophie  { --hm-av-bg: linear-gradient(140deg, #3f7ae0, #2a4aa3); }
.hm-av--nova    { --hm-av-bg: linear-gradient(140deg, #b03fc4, #6d2a9a); }

.hm-wins {
  display: grid;
  gap: 16px;
}

.hm-win {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 22px 24px 24px;
  border-radius: 22px;
  background: var(--hm-card);
  border: 1px solid var(--hm-card-line);
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) {
  .hm-win:hover {
    transform: translateY(-3px);
    border-color: #4a3f5c;
  }
}

.hm-win__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* name · month year */
.hm-win__by {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-size: 15.5px;
  line-height: 1.3;
}

/* Name and date: one line when it fits, the date under the name when not.
   The dot is the first 18px of the date, which sits 18px left of where it
   starts (the name's right margin gives that back on a shared line). A date
   that wraps starts its line at -18px, so overflow: hidden drops its dot. */
.hm-win__by > span:last-child {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  min-width: 0;
  overflow: hidden;
}

.hm-win__by b {
  margin-right: 18px;
  font-weight: 700;
  color: var(--hm-text);
  white-space: nowrap;
}

.hm-win__by time {
  margin-left: -18px;
  color: var(--hm-dim);
  white-space: nowrap;
}

.hm-win__by time::before {
  content: "\00B7";
  display: inline-block;
  width: 18px;
  text-align: center;
  color: var(--hm-dim);
}

.hm-win__pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgba(255, 79, 163, 0.12);
  border: 1px solid rgba(255, 79, 163, 0.36);
  color: #ffb0d5;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.hm-win__pill svg {
  flex: none;
}

.hm-win__quote {
  font-family: var(--hm-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--hm-text);
  text-wrap: pretty;
}

.hm-win__quote mark {
  color: #ff86c1;
  background: linear-gradient(180deg, transparent 64%, rgba(255, 79, 163, 0.24) 64%, rgba(255, 79, 163, 0.24) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Proof: the screenshot sits on a recessed tray at a modest size. */
.hm-win__proof {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0;
  padding: 14px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.hm-win__proof img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.8);
}

/* The lead story */
.hm-win--feature {
  gap: 20px;
  padding: 34px 38px 38px;
  background:
    radial-gradient(ellipse 70% 55% at 100% 0%, rgba(255, 79, 163, 0.24), transparent 70%),
    radial-gradient(ellipse 60% 60% at 0% 100%, rgba(59, 108, 240, 0.14), transparent 70%),
    linear-gradient(160deg, #26112c, #17131f);
  border-color: #6a2d55;
  box-shadow: 0 30px 80px -40px rgba(216, 27, 118, 0.55);
}

.hm-win--feature::after {
  content: "\201D";
  position: absolute;
  top: -8px;
  right: 28px;
  font-family: var(--hm-display);
  font-weight: 800;
  font-size: 280px;
  line-height: 1;
  color: rgba(255, 122, 184, 0.09);
  pointer-events: none;
}

.hm-win--feature .hm-win__text {
  gap: 18px;
}

.hm-win--feature .hm-av {
  width: 48px;
  height: 48px;
  font-size: 20px;
}

.hm-win--feature .hm-win__by {
  font-size: 17px;
}

.hm-win--feature .hm-win__pill {
  font-size: 15px;
  padding: 8px 16px 8px 12px;
  background: rgba(255, 79, 163, 0.18);
  border-color: rgba(255, 122, 184, 0.55);
  color: #ffd0e6;
}

.hm-win--feature .hm-win__quote {
  font-size: clamp(22px, 2.1vw, 27px);
  line-height: 1.28;
}

/* The second story */
.hm-win--story {
  padding: 30px 32px 32px;
  background: linear-gradient(160deg, #221a3b, #17151d 75%);
  border-color: #3f3366;
}

.hm-win--story .hm-win__text {
  gap: 16px;
}

.hm-win--story .hm-av {
  width: 44px;
  height: 44px;
  font-size: 18px;
}

.hm-win--story .hm-win__by {
  font-size: 16.5px;
}

.hm-win--story .hm-win__pill {
  background: rgba(167, 139, 250, 0.14);
  border-color: rgba(167, 139, 250, 0.45);
  color: #d9ccff;
}

.hm-win--story .hm-win__quote {
  font-family: var(--hm-body);
  font-weight: 600;
  font-size: 20.5px;
  line-height: 1.5;
  letter-spacing: 0;
}

/* Tints, so the proof cards don't read as one repeated box */
.hm-win--warm {
  background: linear-gradient(180deg, #25141f, #17151d 60%);
  border-color: #45283a;
}

.hm-win--violet {
  background: linear-gradient(160deg, #1f1834, #17151d 70%);
  border-color: #362d55;
}

.hm-win--blue {
  background: linear-gradient(160deg, #161c33, #17151d 70%);
  border-color: #2c3558;
}

/* The Discord card */
.hm-wins-discord {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  padding: 26px;
  border-radius: 22px;
  background:
    radial-gradient(ellipse 80% 70% at 100% 0%, rgba(255, 255, 255, 0.16), transparent 70%),
    linear-gradient(150deg, #c42a7d, #6b3fd4 60%, #3b5fe0);
  color: #ffffff;
  overflow: hidden;
}

.hm-wins-discord__count {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Wraps: in the narrowest desktop column the faces drop under the number. */
.hm-wins-discord__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hm-wins-discord__top .hm-num {
  font-size: 60px;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.hm-wins-discord__faces {
  display: flex;
}

.hm-wins-discord__faces .hm-av {
  width: 32px;
  height: 32px;
  font-size: 14px;
  box-shadow: 0 0 0 3px #b0307f;
}

.hm-wins-discord__faces .hm-av + .hm-av {
  margin-left: -10px;
}

.hm-wins-discord__line {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.hm .hm-wins-discord .hm-btn {
  width: 100%;
  min-height: 50px;
  padding: 0 18px;
  font-size: 16px;
  background: #ffffff;
  color: #1b1424;
}

.hm .hm-wins-discord .hm-btn:hover {
  color: #1b1424;
  filter: brightness(0.94);
}

/* Proof card shapes */
.hm-win__head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.hm-win__head .hm-av {
  width: 34px;
  height: 34px;
  font-size: 15px;
}

.hm-win__head .hm-win__by {
  gap: 10px;
  font-size: 15px;
}

.hm-win > .hm-win__quote {
  grid-area: quote;
  font-size: 22px;
}

.hm-win > .hm-win__quote--lg {
  font-size: 27px;
  line-height: 1.12;
}

.hm-win > .hm-win__proof {
  grid-area: proof;
}

/* wide: quote left, landscape proof right */
.hm-win--wide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas: "head head" "quote proof";
  grid-template-rows: auto 1fr;
  gap: 16px 20px;
}

.hm-win--wide .hm-win__proof {
  align-self: stretch;
}

.hm-win--wide .hm-win__proof img {
  width: 100%;
}

/* tall: words on top, portrait proof filling the rest */
.hm-win--tall {
  padding: 22px 20px 20px;
}

.hm-win--tall .hm-win__proof {
  flex: 1;
}

.hm-win--tall .hm-win__proof img {
  max-height: 300px;
}

/* side: quote left, portrait or square proof right */
.hm-win--side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head head" "quote proof";
  grid-template-rows: auto 1fr;
  gap: 16px 20px;
}

.hm-win__proof--sq img,
.hm-win__proof--tall img {
  max-height: 190px;
}

/* Desktop: the bento. The two stories lead, the tall proofs frame the wide
   ones, and the Discord closes the last row. */
@media (min-width: 1025px) {
  .hm-wins {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  /* The wide proof keeps the mockup's 2:3 split as the column narrows. */
  .hm-win--wide {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  .hm-win--feature { grid-column: 1 / span 7;  grid-row: 1; }
  .hm-win--story   { grid-column: 8 / span 5;  grid-row: 1; }
  .hm-win--lola    { grid-column: 4 / span 6;  grid-row: 2; }
  .hm-win--zoey    { grid-column: 4 / span 6;  grid-row: 3; }
  .hm-win--bambi   { grid-column: 1 / span 3;  grid-row: 2 / span 2; }
  .hm-win--sophie  { grid-column: 10 / span 3; grid-row: 2 / span 2; }
  .hm-win--aiconic2 { grid-column: 1 / span 5; grid-row: 4; }
  .hm-win--nova    { grid-column: 6 / span 4;  grid-row: 4; }
  .hm-wins-discord { grid-column: 10 / span 3; grid-row: 4; }
}

/* Tablet: two columns; the stories, the wide proofs and the Discord span both. */
@media (min-width: 761px) and (max-width: 1024px) {
  .hm-wins {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hm-win--feature,
  .hm-win--story,
  .hm-win--lola,
  .hm-win--zoey,
  .hm-wins-discord {
    grid-column: 1 / -1;
  }

  .hm-wins-discord {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .hm .hm-wins-discord .hm-btn {
    width: auto;
    padding: 0 28px;
  }

  /* Half-width side cards: a smaller square proof leaves the quote room
     for more than one word a line. */
  .hm-win--side > .hm-win__quote--lg {
    font-size: 24px;
  }

  .hm-win--side .hm-win__proof {
    padding: 10px;
  }

  .hm-win__proof--sq img {
    max-height: 140px;
  }
}

/* Phone: one column, in reading order. */
@media (max-width: 760px) {
  .hm-results .hm-section {
    gap: 36px;
  }

  .hm-wins {
    gap: 12px;
  }

  .hm-win {
    padding: 20px 20px 22px;
    gap: 14px;
    border-radius: 20px;
  }

  .hm-win--feature {
    padding: 24px 22px 26px;
  }

  .hm-win--feature::after {
    font-size: 200px;
    top: -4px;
    right: 14px;
  }

  .hm-win--feature .hm-av {
    width: 44px;
    height: 44px;
    font-size: 19px;
  }

  .hm-win--feature .hm-win__quote {
    font-size: 22px;
    line-height: 1.3;
  }

  .hm-win--story {
    padding: 22px 20px 24px;
  }

  .hm-win--story .hm-win__quote {
    font-size: 17.5px;
  }

  .hm-win__quote {
    font-size: 22px;
  }

  .hm-win > .hm-win__quote {
    font-size: 21px;
  }

  .hm-win > .hm-win__quote--lg {
    font-size: 24px;
  }

  .hm-win__proof {
    padding: 10px;
    border-radius: 14px;
  }

  /* Landscape proof drops under the words. */
  .hm-win--wide {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "quote" "proof";
    grid-template-rows: auto;
  }

  /* Portrait and square proof sit to the right of the quote. */
  .hm-win--tall {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "head head" "quote proof";
    grid-template-rows: auto 1fr;
    gap: 14px 16px;
    padding: 20px 20px 22px;
  }

  .hm-win--side {
    gap: 14px 16px;
  }

  .hm-win--tall .hm-win__proof img,
  .hm-win__proof--tall img {
    max-height: 210px;
  }

  .hm-win__proof--sq img {
    max-height: 160px;
  }

  .hm-wins-discord {
    padding: 22px;
  }

  .hm-wins-discord__top .hm-num {
    font-size: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hm-win {
    transition: none;
  }

  .hm-win:hover {
    transform: none;
  }
}

.hm-case {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 28px;
  border-radius: 18px;
  background: var(--hm-hot);
  border: 1px solid var(--hm-hot-line);
  flex-direction: column;
  align-items: flex-start;
}

.hm-note {
  font-size: 13px;
  color: var(--hm-dim);
}

/* ---- Tools ------------------------------------------------------------- */

.hm-tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 16px;
}

.hm-tool {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px;
  border-radius: 18px;
  background: var(--hm-card);
  border: 1px solid var(--hm-card-line);
}

.hm-tool h3 {
  font-size: 21px;
  font-weight: 700;
}

.hm-tool svg {
  flex: 0 0 auto;
}

/* ---- Community and school ---------------------------------------------- */

.hm-community,
.hm-section.hm-community {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
}

.hm-community__copy {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hm-community__copy > p:not(.hm-eyebrow) {
  font-size: 18px;
  color: var(--hm-muted);
}

.hm-teachers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--hm-card);
  border: 1px solid var(--hm-card-line);
}

.hm-teachers b {
  font-size: 17px;
}

.hm-teachers span {
  font-size: 15px;
  color: var(--hm-muted);
}

.hm-community__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hm-channels {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 18px;
  border-radius: 20px;
  background: var(--hm-card);
  border: 1px solid var(--hm-card-line);
  list-style: none;
}

.hm .hm-channels .hm-channels__title {
  display: block;
  padding: 4px 10px;
  background: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hm-dim);
}

.hm-channels li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
}

.hm-channels li:nth-of-type(2) {
  background: var(--hm-tile);
}

.hm-channels li b {
  font-weight: 600;
}

.hm-channels li span {
  font-size: 13px;
  color: var(--hm-dim);
  text-align: right;
}

/* ---- Pricing ----------------------------------------------------------- */

.hm-ladder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 12px;
}

.hm-plan {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border-radius: 16px;
  background: var(--hm-card);
  border: 1px solid var(--hm-card-line);
}

.hm-plan > b {
  font-weight: 700;
}

.hm-plan .hm-num {
  font-size: 30px;
  line-height: 1.15;
}

.hm-plan .hm-num small {
  font-family: var(--hm-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--hm-dim);
}

.hm-plan > .hm-num + span {
  font-size: 14px;
  color: var(--hm-muted);
}

.hm-plan__pay {
  font-size: 13px;
  font-weight: 600;
  color: var(--hm-eyebrow);
}

/* Each plan's button sits at the foot of its card. A long name ("Choose
   Mentorship") wraps onto two lines in a narrow card; 52px fits two, so a
   row's buttons stay the same height either way. */
.hm .hm-plan__cta {
  margin-top: auto;
  min-height: 52px;
  padding: 8px 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
}

.hm-plan--team {
  background: var(--hm-hot);
  border-color: var(--hm-team-line);
}

/* "Limited spots" on the AI OFM Team card: the team takes a few clients. */
.hm-plan__spots {
  align-self: flex-start;
  padding: 4px 12px;
  border: 1px solid var(--hm-team-line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hm-eyebrow);
}

/* ---- FAQ --------------------------------------------------------------- */

.hm-faq {
  max-width: 820px;
  padding-top: 88px;
  padding-bottom: 88px;
  gap: 12px;
}

.hm-faq .hm-h2 {
  margin-bottom: 12px;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.05;
  text-align: center;
}

.hm-faq details {
  border-radius: 14px;
  background: var(--hm-card);
  border: 1px solid var(--hm-card-line);
}

.hm-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 22px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.hm-faq summary::-webkit-details-marker {
  display: none;
}

.hm-faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-right: 2px;
  border-right: 2px solid var(--hm-eyebrow);
  border-bottom: 2px solid var(--hm-eyebrow);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.hm-faq details[open] summary::after {
  transform: rotate(225deg);
}

.hm-faq details p {
  padding: 0 22px 18px;
  color: var(--hm-muted);
}

/* ---- Final call to action ---------------------------------------------- */

.hm-final {
  border-top: 1px solid var(--hm-line);
}

.hm-final .hm-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding-top: 96px;
  padding-bottom: 96px;
  text-align: center;
}

.hm-final h2 {
  max-width: 820px;
  font-family: var(--hm-display);
  font-weight: 800;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.hm-final__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* ---- Footer ------------------------------------------------------------ */

.hm-footer {
  border-top: 1px solid var(--hm-line);
  color: var(--hm-dim);
  font-size: 13px;
}

.hm-footer__inner {
  padding-top: 32px;
  padding-bottom: 40px;
}

.hm-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
  margin: 0 0 16px;
}

.hm .hm-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--hm-dim);
  text-decoration: none;
}

.hm .hm-footer a:hover {
  color: #ffffff;
}

.hm-footer__fine {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
}

/* ---- The character grid on this page (css/landing-characters.css) ------- */

.hm .vx-chars.hm-chars {
  padding: 64px 0 72px;
  background: var(--hm-bg-alt);
  border-top: 1px solid var(--hm-line);
  border-bottom: 1px solid var(--hm-line);
  --vxc-text: var(--hm-text);
  --vxc-muted: var(--hm-muted);
  --vxc-chip-border: var(--hm-chip-line);
  --vxc-chip-bg: transparent;
  --vxc-chip-text: var(--hm-text);
  --vxc-chip-active-bg: var(--hm-text);
  --vxc-chip-active-text: var(--hm-bg);
  --vxc-card-bg: #1f1c27;
}

.hm .hm-chars .vx-chars__inner {
  max-width: 1200px;
  padding: 0 24px;
}

.hm .hm-chars__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin: 0 0 28px;
}

.hm .hm-chars .vx-chars__head {
  margin: 0;
  text-align: left;
}

.hm .hm-chars h2.vx-chars__title {
  font-family: var(--hm-display);
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.hm .hm-chars .vx-chars__sub {
  margin: 8px 0 0;
  max-width: none;
  color: var(--hm-muted);
  font-size: 17px;
}

.hm .hm-chars .vx-chars__filters {
  justify-content: flex-end;
  margin: 0;
}

.hm .hm-chars button.vx-chars__chip {
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
}

.hm .hm-chars button.vx-chars__chip.is-active {
  font-weight: 700;
}

/* Name and "Start with her" only; the one-line bio stays in the markup for
   crawlers but is not shown here. */
.hm .hm-chars .vx-char__vibe {
  display: none;
}

.hm .hm-chars .vx-char__link {
  border-radius: 18px;
}

.hm .hm-chars .vx-char__body {
  gap: 10px;
}

.hm .hm-chars .vx-char__name {
  font-size: 17px;
  font-weight: 700;
}

.hm .hm-chars .vx-char__cta svg {
  display: none;
}

.hm .hm-chars .vx-char__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--hm-accent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  margin-top: 0;
  box-shadow: none;
}

/* "See every character": the grid's last cell. */
.hm .hm-chars .vx-chars__grid > .hm-more {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  aspect-ratio: 3 / 4;
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--hm-outline);
  border-radius: 18px;
  background: transparent;
  color: var(--hm-text);
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.hm .hm-chars .vx-chars__grid > .hm-more[hidden] {
  display: none;
}

.hm .hm-chars .vx-chars__grid > .hm-more:hover {
  border-color: #6b6380;
}

.hm .hm-chars .vx-chars__grid > .hm-more[aria-expanded="true"] {
  aspect-ratio: auto;
}

.hm-more__count {
  font-family: var(--hm-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
}

.hm-more__count:empty {
  display: none;
}

.hm-more__label {
  font-size: 16px;
  font-weight: 600;
}

.hm .hm-more[aria-expanded="true"] svg {
  transform: rotate(-90deg);
}

.hm .hm-chars__all {
  display: none;
}

/* First paint, before the grid script runs: the same rows the script keeps,
   minus the cell the "See every character" tile takes
   (css/landing-characters.css has the column breakpoints). */
@container vxchars not (min-width: 814px) {
  .hm .vx-chars[data-vx-collapse]:not([data-vx-collapse-ready]) .vx-chars__grid > .vx-char:nth-child(n+6) {
    display: none;
  }
}

@container vxchars (min-width: 814px) and (not (min-width: 1022px)) {
  .hm .vx-chars[data-vx-collapse]:not([data-vx-collapse-ready]) .vx-chars__grid > .vx-char:nth-child(n+8) {
    display: none;
  }
}

@container vxchars (min-width: 1022px) and (not (min-width: 1230px)) {
  .hm .vx-chars[data-vx-collapse]:not([data-vx-collapse-ready]) .vx-chars__grid > .vx-char:nth-child(n+10) {
    display: none;
  }
}

@container vxchars (min-width: 1230px) {
  .hm .vx-chars[data-vx-collapse]:not([data-vx-collapse-ready]) .vx-chars__grid > .vx-char:nth-child(n+12) {
    display: none;
  }
}

/* ---- Tablet ------------------------------------------------------------ */

@media (max-width: 960px) {
  .hm-hero__art {
    display: none;
  }

  .hm-nav__menu {
    display: inline-flex;
  }

  .hm-nav__links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 16px;
    background: var(--hm-bg);
    border-bottom: 1px solid var(--hm-line);
    font-size: 17px;
  }

  .hm-nav.is-open .hm-nav__links {
    display: flex;
  }

  .hm .hm-nav__links a {
    min-height: 48px;
    color: var(--hm-text);
  }
}

/* ---- Phone ------------------------------------------------------------- */

@media (max-width: 760px) {
  .hm-wrap,
  .hm .hm-chars .vx-chars__inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hm-section {
    padding-top: 64px;
    padding-bottom: 64px;
    gap: 28px;
  }

  .hm .hm-trends {
    padding-top: 64px;
    padding-bottom: 0;
  }

  .hm-lede {
    font-size: 17px;
  }

  .hm-nav__row {
    gap: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .hm .hm-logo {
    font-size: 22px;
  }

  .hm .hm-nav__signup {
    display: none;
  }

  .hm .hm-nav__signin {
    padding: 0 10px;
  }

  .hm-nav__actions {
    gap: 4px;
  }

  .hm-nav__links {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hm-hero {
    gap: 0;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .hm-hero__copy {
    flex-basis: 100%;
    gap: 14px;
  }

  .hm-eyebrow {
    font-size: 12px;
  }

  .hm-hero h1 {
    font-size: 38px;
    line-height: 1.02;
  }

  .hm-hero__lede {
    font-size: 16px;
    line-height: 1.5;
  }

  .hm-hero__ctas {
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
  }

  .hm .hm-hero__ctas .hm-btn {
    width: 100%;
    min-height: 52px;
    font-size: 17px;
  }

  .hm-hero__fine {
    font-size: 13px;
    text-align: center;
  }

  .hm-proof {
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid var(--hm-line);
    font-size: 13px;
  }

  .hm-proof__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hm-proof__item b {
    font-size: 15px;
  }

  .hm .vx-chars.hm-chars {
    padding: 18px 0 48px;
    border-top: 0;
  }

  .hm .hm-chars__top {
    align-items: baseline;
    gap: 8px 12px;
    margin-bottom: 12px;
  }

  .hm .hm-chars .vx-chars__head {
    flex: 1 1 0;
    min-width: 0;
  }

  .hm .hm-chars h2.vx-chars__title {
    font-size: 22px;
  }

  .hm .hm-chars .vx-chars__sub {
    display: none;
  }

  .hm .hm-chars .vx-chars__filters {
    order: 3;
    flex: 1 1 100%;
    justify-content: flex-start;
    gap: 6px;
    margin: 0;
    padding: 0 0 4px;
  }

  .hm .hm-chars button.vx-chars__chip {
    padding: 0 14px;
  }

  .hm .hm-chars__all {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 44px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--hm-eyebrow);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }

  .hm .hm-chars .vx-chars__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .hm .hm-chars .vx-char__link {
    border-radius: 16px;
  }

  .hm .hm-chars .vx-char__name {
    font-size: 16px;
  }

  .hm .hm-chars .vx-char__cta {
    min-height: 32px;
    padding: 0 12px;
    font-size: 13px;
  }

  .hm-bonus,
  .hm-case {
    padding: 22px 18px;
  }

  .hm-bonus__title,
  .hm-case__title {
    font-size: 22px;
  }

  .hm-community {
    gap: 28px;
  }

  .hm-ladder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hm-plan--team {
    grid-column: 1 / -1;
  }

  .hm-faq {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .hm-faq summary {
    padding: 12px 18px;
    font-size: 16px;
  }

  .hm-faq details p {
    padding: 0 18px 16px;
  }

  .hm-final .hm-wrap {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .hm-final__ctas {
    flex-direction: column;
    width: 100%;
  }

  .hm .hm-final__ctas .hm-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:has(> body.hm) {
    scroll-behavior: auto;
  }

  .hm .hm-btn {
    transition: none;
  }

  .hm-trend__loop {
    transition: none;
  }
}