/* PlayVizee site styles. Tokens follow docs/BRAND.md in playvizee-app. */
:root {
  --pv-ink: #171B24; --pv-ink-900: #232833; --pv-ink-800: #2B3240; --pv-ink-700: #3E4757;
  --pv-steel: #5C6B82; --pv-mist: #C9D3DF; --pv-ice: #EEF3F8; --pv-snow: #F8FAFC;
  --pv-ink-400: #8B97A8; --pv-blue: #1F5EEA; --pv-blue-400: #5B9BFF; --pv-blue-100: #E1ECFF; --pv-blue-200: #C4D8FF;
  --pv-signal: #D11A2A; --pv-signal-700: #A8131F; --pv-signal-400: #FF6B66; --pv-signal-100: #FFE4E1;
  --pv-brand: Outfit, sans-serif; --pv-body: "DM Sans", sans-serif;
  --pv-mark-1: var(--pv-blue);
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--pv-snow); color: var(--pv-ink); font-family: var(--pv-body); font-size: 17px; line-height: 1.5; }
* { box-sizing: border-box; }
/* WordPress adds a block gap between top-level site blocks; sections carry their own spacing. */
.wp-site-blocks > * { margin-block: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--pv-brand); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; }
p { margin: 0; }
.pv-wrap { width: min(100% - 48px, 1280px); margin-inline: auto; }
.pv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pv-red { color: var(--pv-signal); }
.pv-muted { color: var(--pv-steel); font-size: 13px; }

/* logo */
.pv-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.pv-logo .pv-mark { width: 30px; height: 30px; --pv-mark-1: var(--pv-blue-400); }
.pv-logo--light { color: var(--pv-ink); }
.pv-logo--light .pv-mark { width: 22px; height: 22px; --pv-mark-1: var(--pv-blue); }
.pv-wordmark { font-family: var(--pv-brand); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; line-height: 1; }
.pv-logo--light .pv-wordmark { font-size: 18px; }

/* buttons + forms */
.pv-btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--pv-signal); color: #fff; font: 600 16px var(--pv-body); white-space: nowrap; cursor: pointer; transition: background .15s; }
.pv-btn:hover { background: var(--pv-signal-700); color: #fff; }
.pv-btn--sm { height: 44px; padding: 0 18px; font-size: 15px; border-radius: 10px; }
.pv-btn--ghost { background: transparent; color: var(--pv-ink); border: 1px solid var(--pv-mist); }
.pv-btn--ghost:hover { background: var(--pv-ice); color: var(--pv-ink); border-color: var(--pv-steel); }
/* on the dark hero and the ink CTA band the outline has to read light */
.pv-hero .pv-btn--ghost, .pv-btn--on-ink { color: #fff; border-color: var(--pv-ink-700); }
.pv-hero .pv-btn--ghost:hover, .pv-btn--on-ink:hover { background: var(--pv-ink-900); color: #fff; border-color: var(--pv-ink-400); }
.pv-actions { display: flex; flex-wrap: wrap; gap: 12px; max-width: 560px; }
.pv-actions--center { justify-content: center; max-width: none; }
.pv-form { display: flex; gap: 12px; max-width: 560px; }
.pv-form input { height: 52px; flex: 1 1 auto; min-width: 0; padding: 0 18px; border-radius: 12px; border: 1px solid var(--pv-ink-700); background: var(--pv-ink-900); color: #fff; font: 400 16px var(--pv-body); }
.pv-form input::placeholder { color: var(--pv-ink-400); }
.pv-form input:focus { outline: 2px solid var(--pv-blue-400); outline-offset: 1px; }
.pv-eyebrow { display: block; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pv-blue); }
.pv-eyebrow--light { color: var(--pv-blue-400); }
.pv-note { font-size: 14px; color: var(--pv-ink-400); max-width: 560px; }
.pv-note a { text-decoration: underline; }

/* nav */
.pv-nav { background: var(--pv-ink); color: #fff; }
.pv-nav__row { height: 80px; display: flex; align-items: center; gap: 36px; }
.pv-nav__links { margin-left: auto; display: flex; align-items: center; gap: 32px; font-size: 15px; font-weight: 500; }
.pv-nav__links a { color: var(--pv-mist); }
.pv-nav__links a:hover { color: #fff; }
.pv-nav__links .pv-btn { color: #fff; }

/* hero */
.pv-hero { background: var(--pv-ink); color: #fff; padding: 80px 0 72px; }
.pv-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.pv-hero__copy { display: flex; flex-direction: column; gap: 28px; }
.pv-hero h1 { font-size: clamp(40px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -0.03em; }
.pv-lead { font-size: 20px; color: var(--pv-mist); max-width: 540px; }
.pv-player { background: var(--pv-ink-900); border: 1px solid var(--pv-ink-700); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.pv-player__bar { display: flex; align-items: center; gap: 12px; }
.pv-player__bar strong { font-family: var(--pv-brand); font-weight: 600; font-size: 18px; }
.pv-player__bar .pv-muted { color: var(--pv-ink-400); }
.pv-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--pv-ink); border: 1px solid var(--pv-ink-700); font-size: 13px; color: var(--pv-mist); }
.pv-rink { width: 100%; height: auto; }
.pv-player__scrub { display: flex; align-items: center; gap: 14px; }
.pv-track { flex: 1; height: 6px; border-radius: 3px; background: var(--pv-ink-700); }
.pv-track__fill { width: 62%; height: 6px; border-radius: 3px; background: var(--pv-blue-400); }
.pv-time { color: var(--pv-mist); font-variant-numeric: tabular-nums; }

/* sections */
.pv-section { padding: 88px 0; }
.pv-section--tight { padding-top: 0; }
.pv-section--ice { background: var(--pv-ice); }
.pv-section h2 { font-size: clamp(32px, 3.2vw, 44px); letter-spacing: -0.03em; }
.pv-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 40px; }
.pv-section__head h2 { max-width: 620px; }
.pv-section__head p { max-width: 440px; color: var(--pv-steel); }
.pv-ico { width: 28px; height: 28px; color: var(--pv-blue); }

.pv-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.pv-pillar { display: flex; flex-direction: column; gap: 14px; }
.pv-pillar h2 { font-size: 28px; }
.pv-pillar p { color: var(--pv-steel); line-height: 1.55; }

.pv-pov { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.pv-pov__card { background: #fff; border: 1px solid var(--pv-mist); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.pv-pov__bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pv-role { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--pv-signal-100); color: var(--pv-signal-700); font-size: 13px; font-weight: 600; }
.pv-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--pv-signal); }
.pv-pov__copy { display: flex; flex-direction: column; gap: 22px; }
.pv-pov__copy p { font-size: 18px; color: var(--pv-steel); line-height: 1.55; }
.pv-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.pv-list li { display: flex; align-items: center; gap: 12px; }
.pv-list li::before { content: ""; width: 10px; height: 10px; border-radius: 5px; background: var(--pv-signal); flex: none; }

.pv-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pv-card { display: flex; flex-direction: column; gap: 14px; padding: 28px; background: #fff; border: 1px solid var(--pv-mist); border-radius: 20px; }
.pv-card h3 { font-size: 22px; }
.pv-card p { font-size: 15px; color: var(--pv-steel); }

.pv-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pv-team { border-radius: 24px; padding: 44px; min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; color: #fff; }
.pv-team h2 { font-size: 36px; }
.pv-team p { line-height: 1.5; }
.pv-team--blue { background: var(--pv-blue); }
.pv-team--blue .pv-eyebrow { color: var(--pv-blue-200); }
.pv-team--blue p { color: var(--pv-blue-100); }
.pv-team--ink { background: var(--pv-ink); }
.pv-team--ink .pv-eyebrow { color: var(--pv-signal-400); }
.pv-team--ink p { color: var(--pv-mist); }

.pv-cta { background: var(--pv-ink); color: #fff; padding: 88px 0; text-align: center; }
.pv-cta__inner { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.pv-cta h2 { font-size: clamp(36px, 4vw, 56px); letter-spacing: -0.03em; }
.pv-cta p { font-size: 19px; color: var(--pv-mist); max-width: 560px; }
.pv-cta .pv-thanks { color: #fff; font-weight: 600; }
.pv-cta .pv-form { width: 100%; }

.pv-footer { border-top: 1px solid var(--pv-mist); padding: 48px 0; color: var(--pv-steel); font-size: 14px; }
.pv-footer__row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.pv-footer__links { margin-left: auto; display: flex; gap: 24px; }
.pv-footer__links a:hover { color: var(--pv-blue); }

/* responsive */
@media (max-width: 1024px) {
  .pv-hero__grid, .pv-pov { grid-template-columns: 1fr; gap: 40px; }
  .pv-pillars, .pv-grid3 { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .pv-section__head { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 760px) {
  .pv-wrap { width: min(100% - 32px, 1280px); }
  .pv-nav__row { height: 64px; gap: 16px; }
  .pv-nav__links { gap: 16px; }
  .pv-nav__links a:not(.pv-btn) { display: none; }
  .pv-hero { padding: 48px 0; }
  .pv-section { padding: 56px 0; }
  .pv-section--tight { padding-top: 0; }
  .pv-pillars, .pv-grid3, .pv-teams { grid-template-columns: 1fr; }
  .pv-team { padding: 32px; min-height: 0; }
  .pv-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .pv-form { flex-direction: column; }
  .pv-form input { font-size: 16px; }
  .pv-footer__row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pv-footer__links { margin-left: 0; }
}

/* legal and plain pages */
.pv-prose { padding: 64px 24px 80px; }
.pv-prose h1 { font-size: clamp(36px, 4vw, 52px); letter-spacing: -0.03em; margin-bottom: 24px; }
.pv-prose h2 { font-size: 26px; margin: 40px 0 12px; }
.pv-prose p, .pv-prose ul { margin: 0 0 16px; line-height: 1.6; }
.pv-prose ul { padding-left: 22px; }
.pv-prose li { margin-bottom: 8px; }
.pv-prose a { color: var(--pv-blue); text-decoration: underline; }
.pv-prose em { color: var(--pv-steel); }