/* ============================================================
   PRIVACY AND COOKIES PAGE
   The body uses the blog article layout (css/article.css): contents
   list beside the text. This file adds the plain navy hero and the
   cookie table.
   ============================================================ */

.pv-hero {
  padding: calc(var(--nav-height) + 80px) 0 72px;
  background:
    radial-gradient(ellipse 60% 80% at 85% 10%, rgba(46, 101, 184, 0.35) 0%, rgba(46, 101, 184, 0) 70%),
    linear-gradient(180deg, var(--dark) 0%, var(--navy) 100%);
  color: var(--white);
}
.pv-hero-label {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--light-blue);
}
.pv-hero h1 { margin: 0 0 1rem; font-size: clamp(2.4rem, 5.6vw, 4.2rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--white); }
.pv-hero p { max-width: 38rem; margin: 0; font-size: 1.1rem; color: rgba(255, 255, 255, 0.82); }

/* the first paragraph is ordinary size here, unlike an article */
.pv-hero + .ar-layout .ar-body > p:first-child { font-size: 1.08rem; line-height: 1.8; }
.pv-hero + .ar-layout .ar-body > h2:first-child { margin-top: 0; }

/* cookie table */
.pv-table-wrap { margin: 0 0 1.5rem; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.pv-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.92rem; }
.pv-table th,
.pv-table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; line-height: 1.5; color: var(--text); }
.pv-table thead th { background: var(--off-white); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.pv-table tbody tr:last-child td { border-bottom: 0; }
.pv-table td:first-child { font-weight: 700; white-space: nowrap; color: var(--navy); }

@media (max-width: 900px) {
  .pv-hero { padding: calc(var(--nav-height) + 48px) 0 52px; }
}