/* ==========================================================================
   Diaz Strategic Consulting. Page stylesheet for privacypolicy.html,
   terms-of-service.html and 404.html. Loaded after styles.css.
   Tokens only. Square corners. Nothing on these pages moves.
   ========================================================================== */

/* ---------- 1. Legal pages: hold still ---------- */
/* the shell parts change state at once here, with no slide and no fade */
html:has(.page-legal) { scroll-behavior: auto; }
.page-legal .nav,
.page-legal .nav-cta,
.page-legal .booktab,
.page-legal main * { transition: none; }
.page-legal main a:hover > .arr,
.page-legal main a:focus-visible > .arr,
.page-legal .booktab:hover > .arr { transform: none; }

/* ---------- 2. Legal pages: title ---------- */
/* the title sits on the same left edge as the text column under it */
.page-legal .ihero-copy { width: 100%; max-width: 760px; margin: 0 auto; }
.page-legal .ihero--plain .ihero-inner { min-height: 330px; padding-bottom: 64px; }

/* ---------- 3. Legal pages: fixes for the pasted text ---------- */
/* the fixes for list items, headings in strong, and the em note are in styles.css */
.legal h3, .legal h4 { color: var(--ink); }
.legal li { color: var(--ink); }

/* ---------- 4. Legal pages: next step ---------- */
.legal-next { border-top: 1px solid var(--line); }
.legal-next-inner { max-width: 760px; margin: 0 auto; }
.legal-next .h2 { font-size: clamp(32px, 3.6vw, 44px); }
.legal-next .actions { margin-top: 30px; }
@media (max-width: 640px) {
  .legal-next .btn { width: 100%; }
}

/* ---------- 5. Not found ---------- */
.page-404 .ihero--plain .ihero-inner { min-height: min(78vh, 700px); min-height: min(78svh, 700px); padding-bottom: 96px; }
.page-404 .ihero-copy .lead { margin-top: 22px; }
/* the code, set large and quiet beside the copy. Outline only, so it never reads as a second headline */
.nf-code { position: absolute; right: var(--gutter); top: calc(var(--nav-h) + 64px); bottom: 96px; z-index: 1; display: flex; align-items: center; font: 800 clamp(200px, 26vw, 400px)/.74 var(--display); letter-spacing: .01em; color: transparent; -webkit-text-stroke: 2px var(--navy-hi); pointer-events: none; -webkit-user-select: none; user-select: none; }
/* under 900 the code drops below the buttons, so it never runs behind them */
@media (max-width: 900px) {
  .page-404 .ihero--plain .ihero-inner { gap: 0; min-height: 0; padding-bottom: 64px; }
  .nf-code { position: static; display: block; margin-top: 56px; font-size: clamp(120px, 40vw, 260px); text-align: right; }
}
@media (max-width: 640px) {
  .page-404 .actions { gap: 14px; }
  .page-404 .actions .btn { width: 100%; }
  .nf-code { margin-top: 48px; }
}