/* ==========================================================================
   /peerview/ -- RealTimes PeerView sales page, page-specific rules only.
   Additive stylesheet (T4, 2026-09-27), loaded via base.html's `extra_css`
   slot AFTER styles.css -> rtns.css, same pattern as rtns-event.css. No
   donor declaration is overridden; every selector below is either net-new
   (.pv-*) or scoped under the .pv-page wrapper this page's <main> content
   renders inside. Never edited: styles.css (donor, byte-frozen) / rtns.css.

   Ported from the QA'd standalone build at
   products/peerview/page/assets/css/peerview.css (2026-09-25/27), with the
   donor-duplicate mast/section-nav/footer rules removed -- this page reuses
   the REAL RTNS chrome (nav-chrome.html + base.html's footer), it does not
   carry its own mast or footer markup. Everything else is the same content
   (hero, sections, films carousel, price tiers, contact card, steps), plus
   new rules for three sections the standalone page never had: #peers,
   #faq and the partner strip.
   ========================================================================== */

/* Tokens: light (Seashell) on bare :root, dark in both selectors below --
   same three-block contract as every other RTNS dark-mode-aware page. */
:root {
  color-scheme: light;
  --pv-bg: #fff5ee;
  --pv-bg-alt: #fffdf8;
  --pv-surface: #ffffff;
  --pv-ink: #11120f;
  --pv-muted: #5f5a52;
  --pv-line: #e2d5c7;
  --pv-rule: #11120f;
  --pv-gold-text: #8c6a32;
  --pv-gold: #b98132;
  --pv-gold2: #d8ad63;
  --pv-btn-fg: #111111;
  --pv-focus: #11120f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --pv-bg: #0c0e0d;
    --pv-bg-alt: #121513;
    --pv-surface: #151816;
    --pv-ink: #ffffff;
    --pv-muted: #ffffff;
    --pv-line: rgba(255, 255, 255, 0.16);
    --pv-rule: #ffffff;
    --pv-gold-text: #d8ad63;
    --pv-focus: #d8ad63;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --pv-bg: #0c0e0d;
  --pv-bg-alt: #121513;
  --pv-surface: #151816;
  --pv-ink: #ffffff;
  --pv-muted: #ffffff;
  --pv-line: rgba(255, 255, 255, 0.16);
  --pv-rule: #ffffff;
  --pv-gold-text: #d8ad63;
  --pv-focus: #d8ad63;
}

.pv-page { background: var(--pv-bg); color: var(--pv-ink); font-size: 17px; line-height: 1.7; }
.pv-page img { max-width: 100%; }
.pv-page :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.pv-page :where(p) { margin: 0; }
.pv-page :focus-visible { outline: 2px solid var(--pv-focus); outline-offset: 2px; }
.pv-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Buttons: donor .btn / .btn.gold, buyer-critical 16px / 50px targets. */
.pv-page .btn { min-height: 50px; font-size: 16px; letter-spacing: 0; text-transform: none; padding: 0 24px; text-align: center; cursor: pointer; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; }
.pv-page .btn.gold { color: var(--pv-btn-fg); }
.pv-page .btn.gold:hover { background: var(--pv-gold2); border-color: var(--pv-gold2); }

/* Type */
.pv-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 0.13em; font-weight: 700; line-height: 1.6; color: var(--pv-gold-text); margin: 0 0 12px; }
.pv-dots-list { display: flex; flex-wrap: wrap; gap: 0 10px; }
.pv-dots-list li:not(:last-child)::after { content: "\00B7"; margin-left: 10px; }
.pv-tagline { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 18px; line-height: 1.45; color: var(--pv-gold-text); margin: 0 0 14px; max-width: 46ch; }
.pv-h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 60px; line-height: 1; margin: 0 0 20px; }
.pv-h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(32px, 4vw, 44px); line-height: 1.05; margin: 0 0 20px; max-width: 20ch; }
.pv-h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 27px; line-height: 1.1; margin: 0 0 10px; }
.pv-lead { font-size: 19px; line-height: 1.6; max-width: 60ch; }
.pv-body { max-width: 65ch; }
.pv-intro { font-weight: 700; margin: 18px 0 4px; }
@media (max-width: 1100px) { .pv-h1 { font-size: 50px; } }
@media (max-width: 700px) { .pv-h1 { font-size: 40px; } .pv-lead { font-size: 18px; } }

/* ---- Hero: donor .page-hero idiom on Seashell, text only (no drawn canvas) ---- */
.pv-hero { padding: 56px 0 64px; border-bottom: 1px solid var(--pv-line); }
.pv-hero-grid { display: grid; gap: 40px; max-width: 760px; }
.pv-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.pv-proof { margin-top: 18px; font-size: 15px; color: var(--pv-ink); }
@media (min-width: 980px) { .pv-hero { padding: 72px 0 88px; } }
@media (max-width: 720px) { .pv-ctas .btn { width: 100%; } }

/* ---- Sections: donor .section rhythm, light only ---- */
.pv-page .section { padding: 72px 0; border-top: 1px solid var(--pv-line); }
.pv-page .section.alt { background: var(--pv-bg-alt); }
.pv-two { display: grid; gap: 40px; }
@media (min-width: 980px) {
  .pv-page .section { padding: 96px 0; }
  .pv-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
}
.pv-pull { margin-top: 32px; padding-top: 12px; border-top: 2px solid var(--pv-gold); font-family: Georgia, "Times New Roman", serif; font-size: clamp(24px, 3vw, 32px); line-height: 1.2; max-width: 30ch; }

.pv-soft-list li { position: relative; padding: 6px 0 6px 22px; font-size: 17px; line-height: 1.6; }
.pv-soft-list li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 7px; height: 7px; border-radius: 50%; background: var(--pv-gold); }
.pv-deliv { display: grid; gap: 6px 48px; margin-top: 8px; max-width: 980px; }
@media (min-width: 820px) { .pv-deliv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---- Films carousel (scroll-snap, no autoplay) ---- */
.pv-carousel { margin-top: 36px; }
.pv-car-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.pv-car-head .pv-kicker { margin: 0; }
.pv-car-btns { display: flex; gap: 8px; }
.pv-car-btns[hidden] { display: none; }
.pv-car-btn { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--pv-rule); background: var(--pv-surface); color: var(--pv-ink); font-size: 18px; line-height: 1; cursor: pointer; transition: background-color 180ms ease, color 180ms ease, opacity 180ms ease; }
.pv-car-btn:hover:not(:disabled) { background: var(--pv-ink); color: var(--pv-bg); }
.pv-car-btn:disabled { opacity: 0.35; cursor: default; }
.pv-page .pv-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-bottom: 12px; scrollbar-width: thin;
}
.pv-track:focus-visible { outline: 2px solid var(--pv-focus); outline-offset: 4px; }
@media (min-width: 720px) { .pv-page .pv-track { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (min-width: 980px) { .pv-page .pv-track { grid-auto-columns: calc((100% - 32px) / 3); } }
.pv-film { scroll-snap-align: start; min-width: 0; }
.pv-film a { display: flex; flex-direction: column; height: 100%; background: var(--pv-surface); border: 1px solid var(--pv-line); transition: border-color 180ms ease; }
.pv-film a:hover { border-color: var(--pv-gold); }
.pv-film-frame { display: block; background: #111111; }
.pv-film img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; display: block; }
.pv-film-title { display: block; padding: 14px 16px 0; font-family: Georgia, "Times New Roman", serif; font-size: 20px; line-height: 1.25; }
.pv-film-who { display: block; padding: 6px 16px 0; font-size: 15px; color: var(--pv-muted); }
.pv-film-watch { display: block; margin-top: auto; padding: 14px 16px 14px; font-size: 13px; letter-spacing: 0.04em; color: var(--pv-gold-text); }
.pv-car-foot { margin-top: 14px; font-size: 15px; }
.pv-car-note { margin-top: 4px; font-size: 14px; color: var(--pv-muted); }
.pv-car-all a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Peers block (#peers) ---- */
.pv-peers { max-width: 760px; }
.pv-peers .pv-ctas { margin-top: 22px; }

/* ---- Price ---- */
.pv-tiers { display: grid; gap: 20px; margin-top: 12px; max-width: 980px; }
@media (min-width: 820px) { .pv-tiers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pv-tier { background: var(--pv-surface); border: 1px solid var(--pv-line); padding: 26px 28px 28px; min-width: 0; }
.pv-tag { display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: 999px; background: var(--pv-bg); color: var(--pv-gold-text); font-size: 13px; }
.pv-tier .pv-h3 { font-size: 26px; margin-bottom: 6px; }
.pv-tier-what { font-size: 17px; margin-top: 0; }
.pv-price { margin-top: 12px; font-size: 18px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.pv-price strong { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 24px; }
.pv-list-price { color: var(--pv-muted); font-size: 16px; }
.pv-terms-wrap { margin-top: 28px; max-width: 760px; }
.pv-friendly { font-size: 18px; }
.pv-terms-wrap .pv-soft-list { margin-top: 6px; }
.pv-note { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--pv-muted); }
.pv-vat-line { margin-top: 8px; font-size: 15px; color: var(--pv-muted); }
.pv-after { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 24px; }
@media (max-width: 720px) { .pv-after .btn { width: 100%; } }
/* Rate-closed state: PEERVIEW_RATE_OPEN=False renders this instead of the
   EXPO-rate/list-price pair -- one build-time constant, no client clock. */
.pv-price-closed { margin-top: 12px; font-size: 18px; line-height: 1.5; }
.pv-price-closed strong { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 24px; }
.pv-next-peerview { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--pv-line); font-size: 16px; }

/* ---- Partner strip (hidden while PEERVIEW_PARTNERS is empty -- no empty shell) ---- */
.pv-partners { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--pv-line); }
.pv-partners-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pv-partners-list li { font-size: 15px; padding: 8px 14px; border: 1px solid var(--pv-line); background: var(--pv-surface); }

/* ---- How do I get a place / Book ---- */
.pv-steps { margin-top: 24px; counter-reset: s; }
.pv-steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; align-items: baseline; padding: 8px 0; }
.pv-steps li::before { content: counter(s); font-family: Georgia, "Times New Roman", serif; font-size: 24px; line-height: 1; color: var(--pv-gold-text); }
.pv-contact { scroll-margin-top: 96px; background: var(--pv-surface); border: 1px solid var(--pv-line); border-top: 3px solid var(--pv-gold); padding: 28px 24px; }
.pv-contact-lead { font-family: Georgia, "Times New Roman", serif; font-size: 24px; line-height: 1.2; }
.pv-email { display: block; margin-top: 12px; padding: 8px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(18px, 5.4vw, 30px); line-height: 1.2; white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }
.pv-email a { color: inherit; }
/* QA-fix 2026-09-28 (#4): the address link was 20-24px tall at 320/390;
   inline-flex + min-height gives a 44px tap target, and the parent's own
   8px top padding moves into the target so the card keeps its rhythm. */
.pv-email { padding-top: 0; margin-top: 2px; }
.pv-email a { display: inline-flex; align-items: center; min-height: 44px; }
.pv-contact .pv-vat-line { margin-top: 18px; }
@media (min-width: 720px) { .pv-contact { padding: 36px 36px 34px; } }
@media (min-width: 980px) {
  #join .pv-two { grid-template-columns: minmax(0, 560px) minmax(0, 500px); justify-content: start; gap: 64px; }
}
@media (max-width: 360px) { .pv-contact { padding: 22px 16px; } }

/* ---- FAQ ---- */
.pv-faq { margin-top: 8px; max-width: 780px; }
.pv-faq-item { padding: 20px 0; border-top: 1px solid var(--pv-line); }
.pv-faq-item:last-child { border-bottom: 1px solid var(--pv-line); }
.pv-faq-item h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 20px; line-height: 1.3; margin: 0 0 8px; }
.pv-faq-item p { font-size: 16px; line-height: 1.6; color: var(--pv-muted); }

.pv-affil { margin: 0; padding: 20px 0; border-top: 1px solid var(--pv-line); font-size: 13px; color: var(--pv-muted); }

/* ---- GEO/JSON-LD insertion point (marked, left to the GEO agent) ---- */
/* The JSON-LD insertion point itself carries no visual rule; this comment
   exists so the CSS file documents it sits right after the page's own
   <script type="application/ld+json"> block in the rendered <head>. */

/* ---- QA-fix 2026-09-28 (pre-ship QA report, peerview-qa/report.md) ---- */
/* #2: the disclaimer's .shell span was inline, so its gutter padding only
   indented line 1 and line 2 started at x=0 on phones. Block restores the
   donor .shell gutter on every line. */
.pv-affil .shell { display: block; }
/* #3 / #9: no lone last word on buttons, headings, film titles, pull
   quote or rate line (Chromium honours `pretty`; others fall back to
   normal wrapping, same as before). */
.pv-page .btn { text-wrap: balance; }
.pv-page :where(p, h1, h2, h3, li, .pv-film-title, .pv-film-who) { text-wrap: pretty; }
/* #10: .shell + a 760px max-width on the same element centred the hero
   and #peers at desktop (x=374) while every other section starts at the
   shell edge. Keep the shell full width, cap the content column instead. */
.shell.pv-hero-grid { max-width: var(--max); grid-template-columns: minmax(0, 760px); }
.shell.pv-peers { max-width: var(--max); }
.shell.pv-peers > * { max-width: 760px; }
/* #12: two paragraphs in #who ran together with 0 margin. */
.pv-lead + .pv-body { margin-top: 14px; }
/* #9 (cont.): short multi-line blocks where `pretty` still stranded a word
   at 320/390 -- balance the lines instead. */
.pv-film-title, .pv-tier-what { text-wrap: balance; }
/* #4 (cont.): the 44px address target already carries its own air, so the
   button below it sits closer than the generic 26px CTA gap. */
.pv-contact .pv-ctas { margin-top: 12px; }