/* =====================================================================
   PLAYBOOK — pages-c.css (31 Oct 2026)
   Page-specific styles for case-study, article, privacy, cookies, terms,
   complaints, thanks and 404. Loaded after site.css. The page-head and
   split-grid rules mirror pages-a/b.css so the inner pages read as one
   system; everything else here is a component Home lacks (prose column,
   legal sections, tables, fact cards, big links).
   ===================================================================== */

/* ---------- Nav: current page ---------- */
.nav-links a[aria-current] { background-size: 100% 1px; }

/* ---------- Page head (light opener) ---------- */
.page-head { padding-top: calc(var(--nav-h) + 56px + env(safe-area-inset-top, 0px)); padding-bottom: 0; }
.page-head .wrap { gap: 40px; }
.page-head h1 { font-size: clamp(3rem, 1.2rem + 5.6vw, 7rem); line-height: .9; max-width: 1300px; overflow-wrap: anywhere; }
.page-head .page-intro { font: 500 var(--fs-quote)/1.1 var(--font-text); letter-spacing: var(--ls-tight); max-width: 900px; }
.page-head .btn-row { gap: 8px; }
.ph-wide { width: 100%; aspect-ratio: 2 / 1; }
.page-head .ph-wide { margin-top: 24px; }
.page-head + .sec { padding-top: var(--section-y); }
.dot { color: var(--accent); }
.label-row .idx .dot { margin-right: 0; }
@media (min-width: 810px) {
  .page-head { padding-top: calc(var(--nav-h) + 96px + env(safe-area-inset-top, 0px)); }
}

/* ---------- Split grid: intro left, body right ---------- */
.sg { display: grid; grid-template-columns: 450px minmax(0, 1fr); gap: 100px; align-items: start; }
.sg-intro { display: flex; flex-direction: column; gap: 24px; }
.sg-intro .lead { max-width: 450px; }
.sg-body { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.sg-body > .lead, .sg-body > .quote { max-width: 760px; }
.margin-lg { max-width: 420px; gap: 16px; }
.margin-lg .strike, .margin-lg .after { font: 500 var(--fs-quote)/1.1 var(--font-text); letter-spacing: var(--ls-tight); }

/* ---------- Article / legal: sticky meta column + reading column ---------- */
.sg-article { grid-template-columns: 360px minmax(0, 760px); justify-content: start; }
.meta { position: sticky; top: calc(var(--nav-h) + 24px); display: flex; flex-direction: column; gap: 24px; }
.meta-item { display: flex; flex-direction: column; gap: 6px; }
.meta .margin { gap: 10px; }
.toc ul { display: flex; flex-direction: column; gap: 8px; }
.toc a { display: inline; }

.prose { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.prose p { font: 400 var(--fs-lead)/1.4 var(--font-text); letter-spacing: var(--ls-tight); }
.prose h2 { margin-top: 16px; }
.prose .num-p strong { font-weight: 500; }
.prose .pull { max-width: 760px; }
.prose .rule { margin-top: 16px; }
.prose .takeaway { color: var(--fg); }
.prose h3 { font: 500 var(--fs-card-title)/1.3 var(--font-text); letter-spacing: var(--ls-tight); margin-top: 4px; }
.prose .tbl-wrap { margin: 8px 0; }
.prose .tbl td:first-child { white-space: nowrap; }
.prose s { text-decoration-color: var(--accent); }

.legal { display: flex; flex-direction: column; gap: 48px; min-width: 0; }
.legal-sec { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: calc(var(--nav-h) + 24px); }
.legal-sec .rule { margin-bottom: 8px; }
.legal-sec p, .legal-sec li { font-size: var(--fs-body); line-height: 1.45; max-width: 68ch; }
.legal-sec a.ul, .legal-sec button.ul { padding-bottom: 0; background-size: 100% 1px; }
.legal-sec a.ul:hover, .legal-sec button.ul:hover { color: var(--muted); }
.bullets, .numbers { display: flex; flex-direction: column; gap: 10px; padding-left: 1.4em; }
.bullets { list-style: disc; }
.numbers { list-style: decimal; }
.bullets li::marker { color: var(--accent); }
.numbers li::marker { color: var(--muted); font-size: var(--fs-small); }

/* Tables: ruled, no fills; stack to cards on phones */
.tbl-wrap { width: 100%; min-width: 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-body); line-height: 1.4; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 12px 20px 12px 0; border-top: 1px solid var(--fg); }
.tbl th { font: 500 var(--fs-chip)/1.2 var(--font-text); letter-spacing: var(--ls-chip); text-transform: uppercase; color: var(--muted); padding-top: 0; border-top: 0; padding-bottom: 10px; }
.tbl tbody tr:last-child td { border-bottom: 1px solid var(--fg); }
.tbl td:last-child, .tbl th:last-child { padding-right: 0; }
@media (max-width: 1023px) {
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; }
  .tbl tr { border-top: 1px solid var(--fg); padding: 14px 0; }
  .tbl tbody tr:last-child { border-bottom: 1px solid var(--fg); }
  .tbl td { border: 0; padding: 4px 0; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
  .tbl tbody tr:last-child td { border-bottom: 0; }
  .tbl td::before { content: attr(data-th); font: 500 var(--fs-chip)/1.4 var(--font-text); letter-spacing: var(--ls-chip); text-transform: uppercase; color: var(--muted); padding-top: 2px; }
}

/* ---------- Case study: framed dark hero ---------- */
.case-frame { background: var(--pb-ink); color: var(--pb-paper); min-height: min(900px, calc(100svh - var(--inset) * 2)); position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.case-media { position: absolute; inset: 0; background: radial-gradient(90% 70% at 70% 30%, #6A6966, var(--media) 72%); }
.case-in { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; max-width: 1100px; padding: calc(var(--nav-h) + 96px) var(--page-x) 112px; }
.case-in .display { font-size: clamp(3rem, 1.2rem + 5.6vw, 7rem); line-height: .9; }
.case-in .quote { max-width: 820px; color: var(--pb-mist); }
.case-meta { color: var(--pb-mist); display: flex; flex-wrap: wrap; gap: 8px 12px; }
.case-meta i { color: var(--accent); font-style: normal; }
.case-frame .slot-note { bottom: auto; top: calc(var(--nav-h) + 24px); }
.js .case-in.rv-img { opacity: 0; transform: translate3d(0, 24px, 0); }
.js .case-in.rv-img.is-in { opacity: 1; transform: none; transition: opacity 800ms var(--ease-in-out), transform 1000ms var(--ease-expo-out); }

/* ---------- Case study: fact cards + galleries ---------- */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-cards-y) var(--gap-cards-x); }
.fact { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--fg); }
.r-wide { width: 100%; aspect-ratio: 16 / 9; }
.two-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-cards-x); }
.two-up .ph { width: 100%; }

/* ---------- Article cards, two across ---------- */
.articles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.head-row .btn-row { gap: 8px; flex: none; }

/* ---------- 404: big links ---------- */
.biglinks { display: flex; flex-wrap: wrap; gap: 16px 48px; }
.biglinks a { padding-bottom: 4px; background-size: 100% 1px; }
.biglinks a:hover, .biglinks a:focus-visible { color: var(--muted); }

/* ---------- Confirm markers stay invisible ---------- */
[data-confirm] { display: inline; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1279px) {
  .sg { grid-template-columns: 1fr 1.6fr; gap: 56px; }
  .sg-article { grid-template-columns: 300px minmax(0, 1fr); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .sg, .sg-article { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .meta { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
  .meta .margin { grid-column: 1 / -1; }
  .meta .toc { grid-column: 1 / -1; }
  .case-in { padding: calc(var(--nav-h) + 120px) var(--page-x) 72px; }
}
@media (max-width: 809px) {
  .page-head h1 { font-size: clamp(2.75rem, 1.2rem + 7.5vw, 4.5rem); }
  .case-in .display { font-size: clamp(2.75rem, 1.2rem + 7.5vw, 4.5rem); }
  .case-frame { min-height: 88svh; }
  .case-frame .slot-note { display: none; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .two-up, .articles-2 { grid-template-columns: minmax(0, 1fr); }
  .meta { grid-template-columns: minmax(0, 1fr); }
  .head-row { flex-direction: column; align-items: flex-start; }
  .biglinks { flex-direction: column; gap: 12px; }
  .legal { gap: 40px; }
  .tbl td { grid-template-columns: 96px minmax(0, 1fr); }
}