/* vntr.vc membership — VERSION 2 only (membership-v2.html). Loaded after style.css, hero.css, home.css, home-v2.css and
   pages-community.css; body carries .pc .mv. Reuses the homepage components (hl-e hero, nums-mosaic, mf-grid, rm-grid,
   os-card, cm map, ev-card, join-card / join-photo, pc-summit, pc-split form) and adds only what this page needs.
   Rules: palette tokens only; no eyebrows; sentence case; Taviraj for headings and names, Poppins for the rest. */

/* ——— rhythm: the homepage's one section padding (half the gap on each side), not the roomier inner-page one ——— */
.mv section[class*="tone-"]:not(.hl) { padding: calc(var(--section-y) / 2) 0; }
.mv section[id] { scroll-margin-top: 96px; }

/* ——— hero: full first screen like the homepage (pages-community.css shrinks it on the other inner pages) ——— */
.mv .hl { min-height: var(--hl-vh); }
.mv .hl-e .hl-title { font-size: clamp(38px, 4vw, 62px); line-height: .96; letter-spacing: -.04em; max-width: 10.5em; }
@media (min-width: 900px) {
  .mv .hl-e-grid { height: calc(var(--hl-vh) - 2 * var(--hl-pad)); min-height: 600px; }
  .mv .hl-e-grid > .hl-e-photo { min-height: 0; }
}
.mv .hl-e-photo > img { object-position: 62% 50%; }

/* ——— 3 · who's in: twelve members, six across ——— */
.mv .rm-grid { gap: 28px 16px; }

/* ——— 4 · what you get: two cards — the room (photo) and VNTR OS between rooms (product screen) ——— */
.mv-get { display: grid; gap: 16px; }
.mv-get .os-card { min-height: 0; }
.mv-get .os-text h3 { font-size: clamp(28px, 2.6vw, 40px); }
.mv-get .os-text > p { font-size: 16px; line-height: 1.6; }
.mv-list { list-style: none; margin: 0 0 24px; padding: 0; }
.mv-list li { position: relative; padding: 12px 0 12px 22px; border-top: 1px solid var(--line); font-size: 16.5px; line-height: 1.5; color: var(--ice-2); text-wrap: pretty; }   /* founder, 26.10: a notch larger, no one-word last lines */
.mv-list li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
.mv-list b { font-weight: 500; color: var(--ice); }
.mv-get .pc-chips { margin: 0 0 24px; }
.mv-get .os-light .pc-chips li { background: #fff; border-color: transparent; }
/* photo column of the first card */
.mv-ph { position: relative; margin: 0; min-height: 320px; background: var(--photo); }
.mv-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
/* product screen: the attendee list sits top-left of the screenshot, so pull it in a little */
@media (min-width: 1000px) {
  .mv-ph { min-height: 0; margin: 20px 20px 20px 0; border-radius: var(--r-md); overflow: hidden; }
  .mv-get .os-card { min-height: 520px; }
}

/* ——— 5 · chapters: map, then the full list by region ——— */
.mv .pc-regions { border-top-color: rgba(29, 29, 27, .12); }

/* ——— 6 · events: Summit tile in the sentence-case voice of the v2 homepage ——— */
.mv .pc-summit { margin-top: 16px; }
.mv .pc-summit-txt h3 { text-transform: none; font-weight: 300; letter-spacing: -.02em; font-size: clamp(30px, 3vw, 44px); line-height: 1.02; }
.mv .pc-summit-txt .mv-date { margin: 0 0 14px; font: 500 15px/1.4 var(--sans); color: #fff; }
.mv .pc-summit-txt p { max-width: 30em; }
.mv .pc-summit .btns { margin-top: 24px; }
.mv .pc-summit .btn.dark { --btn-bg: var(--royal); --btn-fg: #fff; --btn-hover-bg: var(--blue-2); --btn-hover-fg: #fff; }

/* ——— 7 · join: Code of Conduct line under the button ——— */
.mv .join-card .pc-small { margin: 18px 0 0; color: rgba(29, 29, 27, .6); }
.mv .join-card .pc-small a { color: var(--royal); font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; }

/* ——— 8 · lead a chapter: lists read as the card's own hairlines ——— */
.mv .pc-two .pc-card h3 { font-size: clamp(22px, 1.8vw, 26px); }

/* ——— motion (assets/home-motion.js): hover lifts on this page's cards, same as the homepage ——— */
@media (prefers-reduced-motion: no-preference) {
  .mv .ev-card:hover { transform: translateY(-4px); }
}

/* start a chapter (founder, 26.10): heading on top; one card with both lists beside the form, both the same height */
.mv-lead { display: grid; gap: 16px; }
.mv-lead-card { display: grid; gap: 28px; background: #fff; color: var(--ink); border-radius: var(--r-xl); padding: clamp(24px, 3.2vw, 40px); box-shadow: var(--shadow-card); }
.mv-lead-card h3 { font: 300 clamp(26px, 2.2vw, 32px)/1.1 var(--serif); letter-spacing: -.02em; margin: 0 0 12px; }
.mv-lead-card .pc-small { margin: 0; padding-top: 20px; border-top: 1px solid rgba(29, 29, 27, .1); }
#start .pc-form { display: flex; flex-direction: column; }
@media (min-width: 720px) {
  .mv-lead-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 40px; align-content: start; }
  .mv-lead-card .pc-small { grid-column: 1 / -1; align-self: end; }
}
@media (min-width: 1000px) {
  .mv-lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
  .mv-lead-card { grid-template-rows: auto 1fr; }
  /* the background field takes the leftover height, so the form ends level with the lists card */
  #start .pc-form > .pc-field:last-of-type { flex: 1; display: flex; flex-direction: column; }
  #start .pc-form > .pc-field:last-of-type textarea { flex: 1; min-height: 120px; }
  #start .pc-form .btn { align-self: flex-start; }
}

/* "Who is here" screen (founder, 26.10): still bleeds off the card's edge, but the screen itself is scaled to the column
   width — the left edge kept whole, at most ~20px trimmed on the right — instead of being cut off on the right */
#get .mv-get .os-shot img { left: 0; top: 0; width: calc(100% + 20px); }

/* founder, 26.10: no rules between list items anywhere (.mv-list is shared by membership, product and role pages) */
.mv-list li, .mv-list li:first-child { border-top: 0; border-bottom: 0; padding-top: 7px; padding-bottom: 7px; }
.mv-list li::before { top: 16px; }
/* phones (founder, 28.10): the screen box takes the screenshot's own height, no empty white band under it */
@media (max-width: 899px) { #get .mv-get .os-shot { height: auto; } #get .mv-get .os-shot img { position: static; display: block; } }

/* hero, capped height like the homepage (founder, 28.10): the two blocks don't stretch with a tall window */
.mv .hl { min-height: 0; }
@media (min-width: 900px) { .mv .hl-e-grid { height: min(calc(var(--hl-vh) - 2 * var(--hl-pad)), 680px); min-height: 600px; } }