/* ===========================================================
   eDiscoveryPlaybook.com — Law & Forensics
   Design tokens + base styles
   =========================================================== */

:root {
  /* Surfaces */
  --paper: #F4F2EC;
  --paper-2: #EEEBE2;
  --surface: #FBFAF6;
  --white: #FFFFFF;

  /* Ink / text */
  --ink: #15191E;
  --ink-2: #3A434E;
  --ink-3: #69727C;
  --ink-4: #98A0A8;

  /* Navy (primary) */
  --navy: #15314F;
  --navy-700: #0F2438;
  --navy-900: #0A1A29;
  --navy-300: #3C5C7E;
  --navy-tint: #E6EAF0;

  /* Brass accent — used sparingly */
  --brass: #9C7C3C;
  --brass-soft: #C7A867;

  /* Signal colors — reserved for scorecard */
  --green: #2F6B4E;
  --green-soft: #DCEAE1;
  --amber: #B07D26;
  --amber-soft: #F3E7CE;
  --red: #9D362F;
  --red-soft: #F0DAD6;

  /* Lines */
  --line: rgba(21, 25, 30, 0.10);
  --line-2: rgba(21, 25, 30, 0.16);
  --line-on-navy: rgba(255, 255, 255, 0.14);

  /* Type */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Layout */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 4px;
  --radius-lg: 8px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 36, 56, 0.06), 0 1px 1px rgba(15, 36, 56, 0.04);
  --shadow-md: 0 8px 28px -12px rgba(15, 36, 56, 0.20);
  --shadow-lg: 0 24px 60px -24px rgba(15, 36, 56, 0.32);
}

* { box-sizing: border-box; }

/* Make the `hidden` attribute authoritative even on flex/grid containers
   (an author `display` rule otherwise overrides the UA [hidden] rule). */
[hidden] { display: none !important; }

/* Honeypot field — visually removed but present in the DOM for bots to trip on. */
.hp-field { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 680;
  letter-spacing: -0.018em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

/* ---- Shared utilities ---- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow.on-navy { color: var(--brass-soft); }
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.005em;
  padding: 14px 24px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-700); box-shadow: var(--shadow-md); }
.btn-brass { background: var(--brass); color: #fff; }
.btn-brass:hover { background: #876a30; box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--navy); background: rgba(21,49,79,0.04); }
.btn-on-navy { background: #fff; color: var(--navy); }
.btn-on-navy:hover { background: var(--paper); }
.btn-ghost-on-navy { background: transparent; color: #fff; border-color: var(--line-on-navy); }
.btn-ghost-on-navy:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); }
.btn-lg { padding: 17px 30px; font-size: 16px; }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---- Section rhythm ---- */
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section-tight { padding: clamp(48px, 6vw, 80px) 0; }

/* ---- Placeholder visual ---- */
.ph {
  background:
    repeating-linear-gradient(135deg, rgba(21,49,79,0.05) 0 8px, transparent 8px 16px),
    var(--paper-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ---- Focus ---- */
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ---- Reveal on scroll ----
   Opacity is NEVER animated (a throttled/frozen animation would hold the hidden
   from-frame and override any static floor). We animate transform only, so the
   resting opacity is always 1 and content can never be stuck invisible. */
@media (prefers-reduced-motion: no-preference) {
  html.js-anim .reveal.in { animation: revealIn .6s cubic-bezier(.22,1,.36,1); }
  @keyframes revealIn { from { transform: translateY(18px); } to { transform: none; } }
}