/* ==========================================================================
   VP Access Gate: redesign layer v2  (form-led split layout)
   Loaded via Settings > VP Access Gate > External CSS File Path.
   Every rule is scoped to .leadgate-modal.vpg (added by vp-access-gate.js),
   so if the JS does not run, the plugin's original gate is untouched.
   Per-project settings live in the plugin's Custom CSS box (see INSTALL.md).
   ========================================================================== */

:root {
  --vpg-accent: #C8323F;
  --vpg-accent-hover: #A92733;
  --vpg-accent-tint: #FBE9EA;
  --vpg-eyebrow-color: #B8323F;
}

body.vpg-locked { overflow: hidden !important; }

.leadgate-modal.vpg {
  --ink: #12161C; --body: #4A535E; --muted: #5B6470; --line: #E3E7EB; --field: #D3D9DF;
  --soft: #F4F5F7; --paper: #FFFFFF; --night: #0F1216;
  --display: "Manrope", "Inter", system-ui, sans-serif;
  --text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink); font-family: var(--text); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
.leadgate-modal.vpg *, .leadgate-modal.vpg *::before, .leadgate-modal.vpg *::after { box-sizing: border-box; }
.leadgate-modal.vpg .leadgate-modal-overlay { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ---------- the gate: form column + visual column ---------- */
.leadgate-modal.vpg .leadgate-modal-content {
  position: fixed; inset: 0; margin: 0; padding: 0; width: 100%; max-width: none; border-radius: 0; box-shadow: none;
  background: var(--paper); color: var(--ink);
  display: grid; grid-template-columns: minmax(500px, 46%) minmax(0, 1fr);
}
.leadgate-modal.vpg .vpg-main { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: center; overflow-y: auto; min-height: 0;
  padding: 32px clamp(40px, 5vw, 88px) 24px; border-right: 1px solid var(--line); background: var(--paper); }
.leadgate-modal.vpg .vpg-main > * { width: 100%; max-width: 500px; }
.leadgate-modal.vpg .vpg-aside { grid-column: 2; grid-row: 1; position: relative; min-width: 0; min-height: 0; overflow: hidden; }

/* ---------- brand row ---------- */
.leadgate-modal.vpg .vpg-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.leadgate-modal.vpg .vpg-logo { height: 34px; width: auto; max-width: 220px; object-fit: contain; object-position: left center; display: block; }
.leadgate-modal.vpg .vpg-by { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.leadgate-modal.vpg .vpg-by img { height: 20px; width: auto; max-width: 120px; object-fit: contain; display: block; }

/* ---------- headline block (plugin title + subtitle restyled) ---------- */
.leadgate-modal.vpg .vpg-head { margin-top: auto; margin-bottom: auto; padding: 24px 0 22px; }
.leadgate-modal.vpg .vpg-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--vpg-eyebrow-color); }
.leadgate-modal.vpg .leadgate-modal-header { display: block; margin: 10px 0 0; font-family: var(--display); font-weight: 800; font-size: clamp(34px, 3.1vw, 46px);
  line-height: 1.1; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.leadgate-modal.vpg .leadgate-modal-subtitle { margin: 10px 0 0; font-size: 16.5px; line-height: 1.5; color: var(--body); }

.leadgate-modal.vpg .vpg-perks { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.leadgate-modal.vpg .vpg-perk { display: flex; align-items: center; gap: 9px; padding: 12px; background: var(--soft); border-radius: 10px; font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.leadgate-modal.vpg .vpg-perk i { width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--vpg-accent-tint); color: var(--vpg-accent); display: flex; align-items: center; justify-content: center; }
.leadgate-modal.vpg .vpg-perk svg { width: 17px; height: 17px; }

/* ---------- the plugin's form, restyled (fields, names, nonce untouched) ---------- */
.leadgate-modal.vpg .leadgate-form { margin-top: 26px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.leadgate-modal.vpg .vpg-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.leadgate-modal.vpg .leadgate-form-group { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; }
.leadgate-modal.vpg .leadgate-form-group label { font-size: 13px; font-weight: 600; color: #2A3038; }
.leadgate-modal.vpg .leadgate-form-group .required { display: none; }
.leadgate-modal.vpg .leadgate-input { height: 52px; width: 100%; padding: 0 14px; border: 1px solid var(--field); border-radius: 10px;
  font: 16px/1.2 var(--text); color: var(--ink); background-color: var(--paper) !important; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.leadgate-modal.vpg .leadgate-input::placeholder { color: #8A939E; }
.leadgate-modal.vpg .leadgate-input:hover { border-color: #B9C1CA; }
.leadgate-modal.vpg .leadgate-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(18,22,28,.10); }
.leadgate-modal.vpg .leadgate-input:user-invalid { border-color: #C0392B; box-shadow: 0 0 0 4px rgba(192,57,43,.10); }
.leadgate-modal.vpg .leadgate-form-footer { margin-top: 6px; width: 100%; }
.leadgate-modal.vpg .leadgate-submit-btn { width: 100%; height: 58px; padding: 0 20px; border: 0; border-radius: 10px; background: var(--vpg-accent); color: #FFFFFF;
  font: 600 17px/1 var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-shadow: none; transition: background-color .15s; }
.leadgate-modal.vpg .leadgate-submit-btn::after { content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.leadgate-modal.vpg .leadgate-submit-btn:hover { background: var(--vpg-accent-hover); box-shadow: none; }
.leadgate-modal.vpg .leadgate-submit-btn:focus-visible { outline: 3px solid rgba(18,22,28,.35); outline-offset: 2px; }
.leadgate-modal.vpg .leadgate-submit-btn:disabled { background: var(--vpg-accent); cursor: progress; opacity: 1; }
.leadgate-modal.vpg .leadgate-submit-btn:disabled::after { -webkit-mask: none; mask: none; background: none; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #FFFFFF; border-radius: 50%; box-sizing: border-box; animation: vpg-spin .7s linear infinite; }
@keyframes vpg-spin { to { transform: rotate(360deg); } }
.leadgate-modal.vpg.vpg-closing { opacity: 0 !important; transition: opacity .2s ease; pointer-events: none; }

.leadgate-modal.vpg .vpg-privacy { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.leadgate-modal.vpg .vpg-privacy svg { flex: none; margin-top: 3px; }
.leadgate-modal.vpg .vpg-privacy a { color: #2A3038; text-decoration: underline; }
.leadgate-modal.vpg .vpg-fine { margin: 2px 0 0; font-size: 11px; line-height: 1.45; color: #78818C; }
.leadgate-modal.vpg .vpg-need-cookies { margin: 0; padding: 10px 12px; border-radius: 10px; background: #FDECEC; color: #9B1C1C; font-size: 13px; font-weight: 500; line-height: 1.4; }
.leadgate-modal.vpg .leadgate-message { margin: 12px 0 0; border-radius: 10px; font-size: 14px; }
.leadgate-modal.vpg .leadgate-message.success { background: #E3F3EA; color: #1F5F40; }
.leadgate-modal.vpg .leadgate-message.error { background: #FDECEC; color: #9B1C1C; }

/* ---------- sales team + powered by ---------- */
.leadgate-modal.vpg .vpg-team { padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.leadgate-modal.vpg .vpg-team-top { display: flex; align-items: center; gap: 14px; }
.leadgate-modal.vpg .vpg-faces { display: flex; flex: none; }
.leadgate-modal.vpg .vpg-faces img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--paper); box-shadow: 0 1px 3px rgba(16,24,40,.2); }
.leadgate-modal.vpg .vpg-faces img + img { margin-left: -12px; }
.leadgate-modal.vpg .vpg-team-names { font-size: 13px; font-weight: 600; line-height: 1.35; }
.leadgate-modal.vpg .vpg-team-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.leadgate-modal.vpg .vpg-team-logos { display: flex; align-items: center; gap: 16px; }
.leadgate-modal.vpg .vpg-team-logos img { height: 28px; width: auto; max-width: 150px; object-fit: contain; display: block; }
.leadgate-modal.vpg .vpg-team-logos span { width: 1px; height: 28px; background: var(--field); }
.leadgate-modal.vpg .vpg-powered, .leadgate-modal.vpg .vpg-mobile-powered { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #6B7480; }
.leadgate-modal.vpg .vpg-powered img, .leadgate-modal.vpg .vpg-mobile-powered img { height: 14px; width: auto; display: block; }
.leadgate-modal.vpg .vpg-powered b, .leadgate-modal.vpg .vpg-mobile-powered b { color: #2A3038; font-weight: 600; }
.leadgate-modal.vpg .vpg-mobile-powered { display: none; }
.leadgate-modal.vpg .vpg-main > .vpg-footer-solo { display: flex; justify-content: flex-end; padding-top: 14px; border-top: 1px solid var(--line); }

/* ---------- shared visual bits ---------- */
.leadgate-modal.vpg .vpg-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 10px 8px; background: linear-gradient(0deg, rgba(10,12,16,.86), rgba(10,12,16,0));
  color: #FFFFFF; font-size: 12px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.leadgate-modal.vpg .vpg-cap > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leadgate-modal.vpg .vpg-tag { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,.18); }
.leadgate-modal.vpg .vpg-live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 999px; background: rgba(255,255,255,.95);
  color: #14532D; font-size: 10.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; box-shadow: 0 1px 3px rgba(16,24,40,.18); }
.leadgate-modal.vpg .vpg-live i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #22A55B; animation: vpgLive 1.8s ease-out infinite; }
@keyframes vpgLive { 0% { box-shadow: 0 0 0 0 rgba(34,165,91,.6); } 70% { box-shadow: 0 0 0 6px rgba(34,165,91,0); } 100% { box-shadow: 0 0 0 0 rgba(34,165,91,0); } }
@media (prefers-reduced-motion: reduce) { .leadgate-modal.vpg .vpg-live i, .leadgate-modal.vpg .vpg-wall-arrow { animation: none; } }
@keyframes vpgNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

/* ---------- variant: slide wall ---------- */
.leadgate-modal.vpg .vpg-wall-aside { background: #F2F3F5; padding: 40px 40px 32px; display: flex; flex-direction: column; gap: 16px; }
.leadgate-modal.vpg .vpg-wall-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.leadgate-modal.vpg .vpg-wall-head strong { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--ink); }
.leadgate-modal.vpg .vpg-wall-head span { font-size: 13px; color: var(--body); }
.leadgate-modal.vpg .vpg-wall { flex: 1; min-height: 0; max-height: 640px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 14px; }
.leadgate-modal.vpg .vpg-tile { position: relative; margin: 0; border-radius: 10px; overflow: hidden; background: #1B1F26; min-height: 0; container-type: inline-size;
  box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 8px 20px -10px rgba(16,24,40,.35); }
.leadgate-modal.vpg .vpg-tile:first-child { grid-column: span 2; grid-row: span 2; }
.leadgate-modal.vpg .vpg-tile:first-child .vpg-cap { font-size: 14px; padding: 30px 14px 12px; }
.leadgate-modal.vpg .vpg-tile img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.leadgate-modal.vpg .vpg-tile:hover img { transform: scale(1.04); }
.leadgate-modal.vpg .vpg-tile > .vpg-live { position: absolute; left: 8px; top: 8px; z-index: 1; }
@container (max-width: 170px) { .leadgate-modal.vpg .vpg-tile > .vpg-live .vpg-live-more { display: none; } }
.leadgate-modal.vpg .vpg-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(15,18,22,.6); color: #FFFFFF;
  font-family: var(--display); font-weight: 800; font-size: 22px; }
.leadgate-modal.vpg .vpg-wall-foot { font-size: 13.5px; color: #2A3038; display: flex; gap: 8px; align-items: center; }

/* ---------- variant: filmstrip ---------- */
.leadgate-modal.vpg .vpg-film-aside { background: var(--night); padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.leadgate-modal.vpg .vpg-segs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.leadgate-modal.vpg .vpg-segs i { height: 3px; border-radius: 3px; background: rgba(255,255,255,.18); transition: background-color .3s; }
.leadgate-modal.vpg .vpg-segs i.on { background: #F19AA2; }
.leadgate-modal.vpg .vpg-player { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - 230px); border-radius: 14px; overflow: hidden; background: #1B1F26; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.leadgate-modal.vpg .vpg-player img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.leadgate-modal.vpg .vpg-player img.show { opacity: 1; }
.leadgate-modal.vpg .vpg-pcap { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 24px 20px; background: linear-gradient(0deg, rgba(8,10,14,.92), rgba(8,10,14,0)); color: #FFFFFF; }
.leadgate-modal.vpg .vpg-plive { margin-bottom: 8px; }
.leadgate-modal.vpg .vpg-plive:empty { display: none; }
.leadgate-modal.vpg .vpg-pnum { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #F19AA2; }
.leadgate-modal.vpg .vpg-ptitle { margin-top: 6px; font-family: var(--display); font-weight: 800; font-size: 24px; }
.leadgate-modal.vpg .vpg-pdesc { margin-top: 4px; font-size: 14px; color: #C9CFD6; }
.leadgate-modal.vpg .vpg-thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.leadgate-modal.vpg .vpg-thumbs button { padding: 0; height: 42px; border-radius: 6px; overflow: hidden; border: 2px solid transparent; background: #1B1F26; opacity: .55; cursor: pointer; transition: opacity .2s, border-color .2s; }
.leadgate-modal.vpg .vpg-thumbs button.on { border-color: #FFFFFF; opacity: 1; }
.leadgate-modal.vpg .vpg-thumbs button:focus-visible { outline: 2px solid #F19AA2; outline-offset: 2px; }
.leadgate-modal.vpg .vpg-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- variant: contents ---------- */
.leadgate-modal.vpg .vpg-toc-aside { background: #F5F6F8; padding: 40px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.leadgate-modal.vpg .vpg-toc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.leadgate-modal.vpg .vpg-toc-head strong { font-family: var(--display); font-weight: 800; font-size: 24px; color: var(--ink); }
.leadgate-modal.vpg .vpg-toc-head span { font-size: 13px; color: var(--body); }
.leadgate-modal.vpg .vpg-toc { display: flex; flex-direction: column; gap: 8px; }
.leadgate-modal.vpg .vpg-toc-row { display: flex; gap: 14px; align-items: center; padding: 8px 10px; background: var(--paper); border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.06); min-width: 0; }
.leadgate-modal.vpg .vpg-toc-row img { width: 92px; height: 52px; object-fit: cover; border-radius: 8px; flex: none; display: block; }
.leadgate-modal.vpg .vpg-toc-n { font-family: var(--display); font-weight: 800; font-size: 13px; color: var(--vpg-eyebrow-color); flex: none; }
.leadgate-modal.vpg .vpg-toc-text { flex: 1; min-width: 0; }
.leadgate-modal.vpg .vpg-toc-t { font-weight: 600; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.leadgate-modal.vpg .vpg-toc-d { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.leadgate-modal.vpg .vpg-toc-meta { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 6px; }
.leadgate-modal.vpg .vpg-toc-meta .vpg-live { background: #E8F6EE; box-shadow: none; }
.leadgate-modal.vpg .vpg-toc-meta .vpg-tag { background: var(--soft); color: #2A3038; }
.leadgate-modal.vpg .vpg-toc-more { display: none; }

/* ---------- variant: masterplan image (projects without slides) ---------- */
.leadgate-modal.vpg .vpg-plan-aside { background: #EEF1EC; padding: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.leadgate-modal.vpg .vpg-plan { position: relative; width: min(100%, 900px); border-radius: 14px; overflow: hidden; background: #DDE3D3; box-shadow: 0 24px 48px -12px rgba(16,24,40,.22), 0 0 0 1px rgba(16,24,40,.06); }
.leadgate-modal.vpg .vpg-plan img { display: block; width: 100%; height: auto; max-height: calc(100vh - 200px); object-fit: cover; }
.leadgate-modal.vpg .vpg-plan > .vpg-live { position: absolute; left: 12px; top: 12px; }

/* slide wall: 6 tiles on desktop, every page in the drifting strip on phones */
.leadgate-modal.vpg .vpg-wall-hint { display: none; }
@media (min-width: 821px) { .leadgate-modal.vpg .vpg-wall > .vpg-tile:nth-child(n+7) { display: none; } }

/* ---------- short laptop screens ---------- */
@media (min-width: 821px) and (max-height: 820px) {
  .leadgate-modal.vpg .vpg-head { padding: 16px 0; }
  .leadgate-modal.vpg .leadgate-modal-subtitle { display: none; }
  .leadgate-modal.vpg .leadgate-modal-header { font-size: 32px; }
  .leadgate-modal.vpg .vpg-perks { margin-top: 16px; }
  .leadgate-modal.vpg .leadgate-form { margin-top: 18px; gap: 10px; }
  .leadgate-modal.vpg .leadgate-input { height: 46px; }
  .leadgate-modal.vpg .leadgate-submit-btn { height: 52px; }
  .leadgate-modal.vpg .vpg-faces img { width: 38px; height: 38px; }
  .leadgate-modal.vpg .vpg-toc-row img { width: 76px; height: 43px; }
  .leadgate-modal.vpg .vpg-toc-d { display: none; }
}

/* ---------- phones and portrait tablets ---------- */
@media (max-width: 820px) {
  .leadgate-modal.vpg .leadgate-modal-content { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .leadgate-modal.vpg .vpg-aside { overflow: visible; }
  .leadgate-modal.vpg .vpg-main { border-right: 0; overflow: visible; position: relative; align-items: stretch; padding: 20px 20px calc(20px + var(--vpg-cookie-h, 0px)); }
  .leadgate-modal.vpg .vpg-main > * { max-width: none; }
  .leadgate-modal.vpg .vpg-wall-aside + .vpg-main, .leadgate-modal.vpg .vpg-film-aside + .vpg-main, .leadgate-modal.vpg .vpg-plan-aside + .vpg-main { margin-top: -18px; border-radius: 18px 18px 0 0; }
  .leadgate-modal.vpg .vpg-logo { height: 28px; }
  .leadgate-modal.vpg .vpg-by img { height: 17px; }
  .leadgate-modal.vpg .vpg-head { margin: 0; padding: 12px 0 0; }
  .leadgate-modal.vpg .vpg-eyebrow { font-size: 10.5px; }
  .leadgate-modal.vpg .leadgate-modal-header { font-size: 25px; }
  .leadgate-modal.vpg .leadgate-modal-subtitle { display: none; }
  .leadgate-modal.vpg .vpg-perks { margin-top: 10px; gap: 6px; }
  .leadgate-modal.vpg .vpg-perk { justify-content: center; padding: 8px 6px; gap: 6px; font-size: 11px; }
  .leadgate-modal.vpg .vpg-perk i { width: 24px; height: 24px; border-radius: 6px; }
  .leadgate-modal.vpg .vpg-perk svg { width: 14px; height: 14px; }
  .leadgate-modal.vpg .leadgate-form { margin-top: 12px; gap: 8px; }
  .leadgate-modal.vpg .vpg-row { gap: 10px; }
  .leadgate-modal.vpg .leadgate-form-group { gap: 4px; }
  .leadgate-modal.vpg .leadgate-form-group label { font-size: 12.5px; }
  .leadgate-modal.vpg .leadgate-input { height: 46px; padding: 0 12px; }
  .leadgate-modal.vpg .leadgate-submit-btn { height: 52px; font-size: 16px; }
  .leadgate-modal.vpg .vpg-fine { margin: 0; text-align: center; font-size: 10.5px; }
  .leadgate-modal.vpg .vpg-team { margin-top: 14px; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--soft); flex-direction: row; align-items: center; gap: 10px; }
  .leadgate-modal.vpg .vpg-team-top { flex: 1; gap: 10px; min-width: 0; }
  .leadgate-modal.vpg .vpg-faces img { width: 34px; height: 34px; }
  .leadgate-modal.vpg .vpg-faces img + img { margin-left: -10px; }
  .leadgate-modal.vpg .vpg-team-names { font-size: 12px; }
  .leadgate-modal.vpg .vpg-team-bottom { flex: none; }
  .leadgate-modal.vpg .vpg-team-logos { flex-direction: column; align-items: flex-end; gap: 4px; }
  .leadgate-modal.vpg .vpg-team-logos img { height: 14px; max-width: 90px; }
  .leadgate-modal.vpg .vpg-team-logos span, .leadgate-modal.vpg .vpg-powered { display: none; }
  .leadgate-modal.vpg .vpg-mobile-powered { display: flex; justify-content: center; margin-top: 12px; }
  .leadgate-modal.vpg .vpg-main > .vpg-footer-solo { display: none; }

  .leadgate-modal.vpg .vpg-wall-aside { background: var(--night); padding: 8px 0 24px; display: block; }
  .leadgate-modal.vpg .vpg-wall-head, .leadgate-modal.vpg .vpg-wall-foot, .leadgate-modal.vpg .vpg-toc-head { display: none; }
  .leadgate-modal.vpg .vpg-wall { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 10px; max-height: none; scrollbar-width: none; }
  .leadgate-modal.vpg .vpg-wall::-webkit-scrollbar { display: none; }
  .leadgate-modal.vpg .vpg-tile, .leadgate-modal.vpg .vpg-tile:first-child { flex: none; height: 96px; width: 36%; scroll-snap-align: start; }
  .leadgate-modal.vpg .vpg-tile:first-child { width: 62%; }
  .leadgate-modal.vpg .vpg-cap, .leadgate-modal.vpg .vpg-tile:first-child .vpg-cap { font-size: 11px; padding: 16px 8px 6px; }
  .leadgate-modal.vpg .vpg-tile > .vpg-live { left: 6px; top: 6px; font-size: 9.5px; padding: 2px 7px 2px 6px; gap: 5px; }
  .leadgate-modal.vpg .vpg-wall-aside { position: relative; padding-bottom: 34px; }
  .leadgate-modal.vpg .vpg-wall { scroll-snap-type: none; }
  .leadgate-modal.vpg .vpg-tile, .leadgate-modal.vpg .vpg-tile:first-child { width: 58%; height: 104px; }
  .leadgate-modal.vpg .vpg-tile .vpg-more { display: none; }
  .leadgate-modal.vpg .vpg-wall-aside::after { content: ""; position: absolute; top: 8px; right: 0; bottom: 34px; width: 44px; pointer-events: none;
    background: linear-gradient(90deg, rgba(15,18,22,0), rgba(15,18,22,.85)); }
  .leadgate-modal.vpg .vpg-wall-hint { display: flex; align-items: center; justify-content: center; gap: 6px; position: absolute; left: 0; right: 0; bottom: 26px;
    font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.78); letter-spacing: .01em; }
  .leadgate-modal.vpg .vpg-wall-arrow { display: inline-block; animation: vpgNudge 1.4s ease-in-out infinite; }

  .leadgate-modal.vpg .vpg-film-aside { padding: 8px 8px 24px; gap: 0; }
  .leadgate-modal.vpg .vpg-segs, .leadgate-modal.vpg .vpg-thumbs, .leadgate-modal.vpg .vpg-pdesc { display: none; }
  .leadgate-modal.vpg .vpg-player { aspect-ratio: auto; height: 132px; max-height: none; border-radius: 10px; }
  .leadgate-modal.vpg .vpg-pcap { padding: 20px 12px 8px; }
  .leadgate-modal.vpg .vpg-ptitle { font-size: 15px; margin-top: 2px; }
  .leadgate-modal.vpg .vpg-plive { margin-bottom: 4px; }

  .leadgate-modal.vpg .vpg-toc-aside { background: var(--paper); padding: 0 20px; overflow: visible; display: block; }
  .leadgate-modal.vpg .vpg-toc { gap: 0; }
  .leadgate-modal.vpg .vpg-toc-row { padding: 8px 0; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--line); gap: 12px; }
  .leadgate-modal.vpg .vpg-toc-row:nth-child(n+3) { display: none; }
  .leadgate-modal.vpg .vpg-toc-row img { width: 60px; height: 34px; border-radius: 6px; }
  .leadgate-modal.vpg .vpg-toc-d { display: none; }
  .leadgate-modal.vpg .vpg-toc-t { font-size: 14px; }
  .leadgate-modal.vpg .vpg-toc-meta { margin-top: 3px; }
  .leadgate-modal.vpg .vpg-toc-meta .vpg-live { font-size: 9.5px; padding: 2px 7px 2px 6px; }
  .leadgate-modal.vpg .vpg-toc-more { display: block; padding: 8px 0 4px; font-size: 12.5px; color: var(--body); }
  .leadgate-modal.vpg .vpg-toc-aside .vpg-brand-m { display: flex; padding: 18px 0 4px; }
  .leadgate-modal.vpg.vpg-v-toc .vpg-main .vpg-brand { display: none; }

  .leadgate-modal.vpg .vpg-plan-aside { padding: 0 0 24px; display: block; background: #DDE3D3; }
  .leadgate-modal.vpg .vpg-plan { width: 100%; height: 170px; border-radius: 0; box-shadow: none; }
  .leadgate-modal.vpg .vpg-plan img { height: 100%; max-height: none; }
}
.leadgate-modal.vpg .vpg-brand-m { display: none; align-items: center; justify-content: space-between; gap: 12px; }

/* ---------- cookie consent: the site's banner is left exactly as it is ----------
   It stays above the gate so it can be accepted; the form will not submit
   until it has been dealt with. */
body.vpg-on .vpg-cookie { z-index: 1000001 !important; }
body.vpg-on .vpg-cookie.vpg-cookie-flash { outline: 4px solid rgba(200,50,63,.65) !important; outline-offset: 2px; transition: outline-color .3s; }