/* vntr.vc speak at VNTR — VERSION 2 only (speak-v2.html). Loaded after style.css, hero.css, home.css, home-v2.css and
   pages-community.css; body carries .pc .sv. Reuses the homepage / membership-v2 / partners-v2 components (hl-e hero,
   pc-card, pc-summit, pc-faces-grid, join-card / join-steps, pc-form) and adds only what this page needs.
   Rules: palette tokens only; no eyebrows; sentence case; no trailing periods in headings; Taviraj for headings and
   names, Poppins for the rest; the Summit tile is the only dark block. */

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

/* ——— hero: one centred block — copy on beige, then the wide stage photo filling the rest of the first screen.
   hero.js adds .hl-in to every .hl, and hero.css reveals [data-r] under .hl-js, so the load-in is the site's own. ——— */
.sv .hl.sv-hero { min-height: var(--hl-vh); padding: clamp(40px, 6vw, 80px) 0 var(--hl-pad); display: flex; flex-direction: column; align-items: stretch; }
.sv-hero-copy { width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: clamp(32px, 4vw, 56px); }
.sv-hero .hl-title { font-size: clamp(40px, 5.2vw, 84px); line-height: .96; letter-spacing: -.04em; max-width: 12em; margin: 0 0 20px; color: var(--ink); }
.sv-hero .hl-title em { color: var(--royal); }
.sv-hero .sub { max-width: 34em; margin: 0 0 28px; text-align: center; }
.sv-hero .btns { justify-content: center; gap: 12px 28px; }
.sv section[class*="tone-"].sv-hero .btns .link { color: var(--ink); font-size: 15px; border-bottom-color: rgba(29, 29, 27, .35); }
.sv section[class*="tone-"].sv-hero .btns .link:hover { color: var(--royal); border-bottom-color: currentColor; }
.sv-hero-ph { position: relative; flex: 1; width: min(var(--page-max), calc(100% - 2 * var(--page-gutter))); min-height: 300px; margin: 0 auto; overflow: hidden; border-radius: var(--hl-r-xl); background: var(--photo); }
.sv-hero-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.sv-hero-ph .hl-e-cap { display: inline-block; }
@media (min-width: 900px) { .sv-hero-ph { min-height: 380px; } }
@media (max-width: 719px) {
  .sv .hl.sv-hero { padding-top: 40px; }
  .sv-hero .btns { flex-direction: column; }
  .sv-hero .btns .btn { width: 100%; }
  .sv-hero-ph .hl-e-cap { display: none; }
}

/* ——— 2 · why: three beige cards on white, no icons ——— */
.sv-why .pc-card { box-shadow: none; }
.sv-why .pc-card.beige { background: var(--beige); }
.sv-why .pc-card h3 { font-size: clamp(22px, 1.9vw, 28px); }

/* ——— 3 · formats: a list with hairlines, then the Summit tile ——— */
.sv-formats { list-style: none; margin: 0 0 16px; padding: 0; }
.sv-formats li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 32px; padding: 16px 0; border-top: 1px solid var(--line); }
.sv-formats li:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .sv-formats li { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: baseline; } }
.sv-formats b { font: 400 clamp(20px, 1.7vw, 24px)/1.2 var(--serif); letter-spacing: -.012em; color: var(--ice); }
.sv-formats span { font-size: 15px; line-height: 1.6; color: var(--mute); }
.sv .pc-summit { margin-top: 0; }
.sv .pc-summit-txt h3 { text-transform: none; font-weight: 300; letter-spacing: -.02em; font-size: clamp(30px, 3vw, 44px); line-height: 1.02; }
.sv .pc-summit-txt .sv-date { margin: 0 0 14px; font: 500 15px/1.4 var(--sans); color: #fff; }
.sv .pc-summit-txt p { max-width: 30em; }
.sv .pc-summit .btns { margin-top: 24px; }
.sv .pc-summit .btn.dark { --btn-bg: var(--royal); --btn-fg: #fff; --btn-hover-bg: var(--blue-2); --btn-hover-fg: #fff; }
.sv .pc-summit .btn:not(.dark) { --btn2-line: rgba(255, 255, 255, .5); --btn2-hover-bg: #fff; --btn2-hover-fg: var(--ink); color: #fff; }

/* ——— 4 · speakers: twelve circles, six across ——— */
.sv #speakers .h-row { margin-bottom: clamp(20px, 2.2vw, 28px); }
.sv-faces { gap: 28px 20px; }
.sv-faces .pc-face img { border: 3px solid var(--beige); }

/* ——— 5 · apply: steps card + form ——— */
.sv .join-card .join-steps { margin-bottom: 24px; }
.sv .join-card .join-steps li { align-items: center; }
.sv .join-card .join-steps b { margin-top: 0; }
.sv .join-card .pc-small { margin: auto 0 0; color: rgba(29, 29, 27, .6); }
.sv .join-card .pc-small a { color: var(--royal); font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; }
.sv .join-grid .pc-form { align-self: start; }