/* vntr.vc VNTR OS (product) — VERSION 2 only (product-v2.html). Loaded after style.css, hero.css, home.css, home-v2.css and
   pages-community.css; body carries .pc .pv2. Reuses the homepage / membership-v2 components (h-row, os-card + os-shot,
   mv-list, pc-card + pc-ico, join-card, btn) and adds only what this page needs: a centered light hero (statement, one button, the
   investor home in a framed window cut by the hero edge), white/beige cards with a product screen bleeding off the
   bottom, the closing block.
   Rules: palette tokens only; no eyebrows; sentence case; Taviraj for headings, Poppins for the rest; no dark surfaces;
   product screens bleed off the card edge behind a 1px line and are scaled to the column — at most ~20px trimmed per side. */

/* ——— rhythm: the homepage's one section padding (half the gap on each side) ——— */
.pv2 section[class*="tone-"]:not(.hl) { padding: calc(var(--section-y) / 2) 0; }
.pv2 section[id], .pv2 article[id] { scroll-margin-top: 96px; }
.pv2 .h-row .sub { max-width: 40em; }

/* ——— 1 · hero: light, centered — statement, one button, a text link, then the real interface in a framed window that the
   hero's bottom edge cuts (founder, 26.10: Magic Beans / Monad / Jira / Dock style; no royal block) ——— */
.pv2 .hl { min-height: var(--hl-vh); }
.hl-p { padding: clamp(40px, 6vw, 84px) var(--page-gutter) 0; align-items: center; }
.hl-p-copy { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: var(--page-max); margin: 0 auto; }
.hl-p .hl-title { font-size: clamp(40px, 5.4vw, 84px); line-height: .96; letter-spacing: -.045em; max-width: 11em; margin: 0 0 22px; color: var(--ink); }
.hl-p .hl-title em { color: var(--royal); }
.hl-p .sub { max-width: 36em; margin: 0 0 28px; text-align: center; }
.hl-p .btns { justify-content: center; gap: 12px 24px; }
.hl-p .btns .link { color: var(--ink); font-weight: 500; }
.hl-p .btns .link:hover { color: var(--royal); }
/* the window: 1px line, rounded top corners, a light chrome bar; the screen is scaled to the window (~20px trimmed per side)
   and the hero's bottom edge cuts it, so it bleeds into the next section */
.hl-p-win { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; width: min(100%, 1160px); min-height: 360px; margin: clamp(36px, 4.6vw, 64px) auto 0; overflow: hidden; border-radius: 18px 18px 0 0; background: #fff; border: 1px solid rgba(29, 29, 27, .14); border-bottom: 0; box-shadow: var(--shadow-lift); }
.hl-p-bar { flex: none; display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-bottom: 1px solid rgba(29, 29, 27, .1); background: #fff; }
.hl-p-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(29, 29, 27, .14); }
.hl-p-bar span { margin: 0 auto; padding: 5px 14px; border-radius: var(--r-pill); background: var(--beige); font: 400 12px/1 var(--sans); color: rgba(29, 29, 27, .6); letter-spacing: .01em; }
.hl-p-shot { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.hl-p-shot img { position: absolute; left: 0; top: 0; width: calc(100% + 20px); max-width: none; height: auto; display: block; }
@media (min-width: 900px) { .hl-p-win { min-height: 360px; } }
@media (max-width: 899px) {
  .hl-p-win { flex: none; min-height: 0; height: 400px; }
  .hl-p-shot img { left: 0; width: calc(100% + 12px); }
}
@media (max-width: 479px) { .hl-p .btns .btn { flex: 1 1 100%; } .hl-p-win { height: 340px; } .hl-p-bar span { display: none; } }
/* first-view reveal (hero.js adds .hl-in; without JS or under reduced motion the hero is simply visible) */
@media (prefers-reduced-motion: no-preference) {
  /* founder, 26.10: on load the window rolls up from below the fold; the scroll drift (translate, set from JS) is separate */
  .hl-js .hl-p .hl-p-win { opacity: 0; transform: translateY(220px); transition: opacity .6s ease .35s, transform 1.2s cubic-bezier(.22, 1, .36, 1) .35s; }
  .hl-js .hl-p.hl-in .hl-p-win { opacity: 1; transform: none; }
}

/* ——— product screens inside os-cards: scaled to the column, ~20px trimmed per side (founder, 26.10) ——— */
.pv2 .os-shot img { left: 0; top: 0; width: calc(100% + 20px); }
.pv2 .os-card { min-height: 0; }
.pv2 .os-text h3 { font-size: clamp(28px, 2.6vw, 40px); }
.pv2 .os-text > p { font-size: 16px; line-height: 1.6; }
.pv2 .os-text .btns { margin-top: 4px; }
@media (min-width: 1000px) { .pv2 .os-card { min-height: 560px; } }
@media (max-width: 999px) {
  /* on one column the screen sits under the text as a strip: whole width, a little of the bottom bleeds off */
  .pv2 .os-shot { height: auto; max-height: 300px; margin: 0 0 0 clamp(20px, 4vw, 28px); }
  .pv2 .os-shot img { position: static; margin-left: 0; width: calc(100% + 12px); }
}
.pv2 .os-card.os-blue .os-text h3 em { color: var(--ice-blue); }
/* stacks (#investors, #startups): one card per message; the screen fills the card down to its bottom edge — never a band
   under it (founder, 26.10). The screen is anchored top-left, so only the bottom (and ≤20px on the right) is cut. */
.pv2-stack { display: grid; gap: 16px; }
@media (min-width: 1000px) {
  .pv2 .pv2-stack .os-card { min-height: 480px; }
  .pv2 .pv2-stack .os-shot img { height: 100%; object-fit: cover; object-position: left top; }
}
.pv2 .pv2-stack .os-text > p:last-child { margin-bottom: 0; }
.pv2 .pv2-stack .pv2-ask { margin-top: 2px; margin-bottom: 0; }
/* the light card on a beige section is white, so it reads as a card */
.pv2 .tone-beige .os-card.os-light { background: #fff; }

/* ——— the pull quote in the investor card: the question you ask the agent ——— */
.pv2-ask { position: relative; margin: 0 0 22px; padding: 14px 18px 14px 48px; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: var(--shadow-card); max-width: 30em; }
.pv2-ask::before { content: ""; position: absolute; left: 16px; top: 19px; width: 10px; height: 10px; border-radius: 50%; background: var(--royal); box-shadow: 0 0 0 4px rgba(55, 100, 221, .18); }
.pv2-ask q { display: block; font: italic 300 19px/1.35 var(--serif); letter-spacing: -.005em; quotes: "\201C" "\201D"; }
.pv2-ask span { display: block; margin-top: 4px; font: 400 14px/1.5 var(--sans); color: rgba(29, 29, 27, .66); }
.pv2 .mv-list { margin-bottom: 26px; }
.pv2 .mv-list li { font-size: 16px; }

/* ——— two cards side by side, each with a screen bleeding off the bottom ——— */
.pv2-duo { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
.pv2-duo > * { min-width: 0; }
@media (min-width: 900px) { .pv2-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pv2-card { position: relative; overflow: hidden; display: flex; flex-direction: column; margin: 0; border-radius: var(--r-xl); background: var(--beige); color: var(--ink); min-height: 480px; }
.tone-beige .pv2-card { background: #fff; box-shadow: var(--shadow-card); }
.pv2-card::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(29, 29, 27, .1); pointer-events: none; }
.pv2-card-txt { padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) 0; }
.pv2-card-txt h3 { font: 300 clamp(26px, 2.2vw, 34px)/1.1 var(--serif); letter-spacing: -.02em; margin: 0 0 10px; color: var(--ink); text-wrap: balance; }
.pv2-card-txt h3 em { font-style: italic; color: var(--royal); }
.pv2-card-txt > p { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(29, 29, 27, .68); max-width: 32em; }
.pv2-card-txt .mv-list { margin: 16px 0 0; }
.pv2-card-txt .mv-list li { font-size: 15.5px; padding: 10px 0 10px 22px; }
.pv2-card-txt .mv-list li::before { top: 19px; }
.pv2-card-txt .btns { margin-top: 22px; }
.pv2-card-shot { position: relative; flex: 1 1 auto; min-height: 240px; margin: 28px clamp(24px, 3vw, 40px) 0; overflow: hidden; border-radius: 16px 16px 0 0; background: #fff; border: 1px solid rgba(29, 29, 27, .12); border-bottom: 0; box-shadow: var(--shadow-lift); }
.pv2-card-shot img { position: absolute; left: 0; top: 0; width: calc(100% + 20px); max-width: none; height: auto; display: block; }
@media (min-width: 900px) { .pv2-card { min-height: 560px; } .pv2-card.tall { min-height: 620px; } }
/* one column: the screen is a strip under the text — whole width, static, the bottom bleeds off the card */
@media (max-width: 899px) { .pv2-card { min-height: 0; } .pv2-card-shot { flex: none; height: auto; max-height: 260px; min-height: 0; } .pv2-card-shot img { position: static; margin-left: 0; width: calc(100% + 12px); } }
@media (max-width: 479px) { .pv2-card-txt .btns .btn { flex: 1 1 100%; } }

.pv2 .pc-small { margin-top: 20px; }
.pv2 .pc-small a { color: var(--royal); font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; }
.pv2 .disclaimer { max-width: none; margin-top: 16px; }

/* ——— trust: three white cards with an icon and one sentence each ——— */
.pv2-trust { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .pv2-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pv2-trust .pc-card { display: flex; flex-direction: column; min-height: 240px; }
.pv2-trust .pc-ico { margin-bottom: auto; }
.pv2-trust h3 { margin: 28px 0 0; font: 300 clamp(22px, 1.8vw, 26px)/1.25 var(--serif); letter-spacing: -.015em; color: var(--ink); text-wrap: pretty; }

/* ——— closing: short and big, centered on white — one heading, one line, one large button ——— */
.pv2-close { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pv2 #start.tone-white { padding: var(--section-y) 0; }
.pv2-close h2 { margin: 0 0 14px; max-width: none; font-size: clamp(44px, 6vw, 96px); line-height: .98; letter-spacing: -.04em; }
.pv2-close .sub { margin: 0 0 32px; max-width: 30em; }
.pv2-close .btns { justify-content: center; }
.pv2-btn-xl { min-height: 68px; padding: 0 48px; font-size: 19px; }
@media (max-width: 479px) { .pv2-btn-xl { width: 100%; min-height: 60px; font-size: 17px; } }

/* ecosystems: the list card has no screen yet — text only, same card, stretched to its neighbour's height */
.pv2-card-list { min-height: 0; }
.pv2-card-list .pv2-card-txt { padding-bottom: clamp(24px, 3vw, 40px); }
.pv2-card-list .mv-list li { font-size: 15.5px; }

/* audience badges above the section headings (founder, 26.10): large, so the page reads as investors → startups → ecosystems */
.pv2-badge { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; margin: 0 0 20px; border-radius: var(--r-pill); background: var(--royal); color: #fff; font: 500 17px/1 var(--sans); letter-spacing: -.005em; }
@media (min-width: 1000px) { .pv2-badge { height: 50px; padding: 0 26px; font-size: 19px; margin-bottom: 24px; } }

/* hero links (founder, 26.10): quiet text links, not buttons — the three audiences jump to their sections, one external
   link to the OS; Join lives in the header */
.hl-p-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; margin: 4px 0 0; font-size: 16px; }
.hl-p-links .link { font-weight: 500; }
.hl-p-sep { width: 1px; height: 18px; background: rgba(29, 29, 27, .2); }
@media (max-width: 719px) { .hl-p-sep { display: none; } .hl-p-links { gap: 10px 22px; } }

/* scroll: the window rises a little faster than the page (founder, 26.10); --p is set by the script on product-v2.html */
@media (prefers-reduced-motion: no-preference) { .hl-p-win { translate: 0 calc(var(--p, 0) * -1px); will-change: translate; margin-bottom: -120px; } }   /* the extra 120px sits under the hero edge, so rising never opens a gap */

/* #ecosystems: one full-width list card (service providers moved to For partners, founder 26.10) */
.pv2-solo > .pv2-card { min-height: 0; }
@media (min-width: 1000px) {
  .pv2-solo .mv-list { columns: 2; column-gap: 56px; }
  .pv2-solo .mv-list li { break-inside: avoid; }
  .pv2-solo .mv-list li:nth-child(4) { border-top: 0; }
}
/* trust cards (founder, 28.10): no tall empty gap between the icon and the text */
.pv2-trust .pc-card { min-height: 0; }
.pv2-trust .pc-ico { margin-bottom: 0; }
.pv2-trust h3 { margin-top: 20px; }