/* =================================================================
   OVERLAY · SHARED PAGE STYLES
   Complements tokens.css. Contains the typography overrides,
   button/card resets, decorative neutralisations, and motion
   primitives shared by every page on overlay.technology.

   IMPORTANT: tokens.css must be loaded BEFORE this file so the
   --ovl-* custom properties referenced below are available.

   Last revision : 2026-05-04
   ================================================================= */

html { scroll-behavior: smooth; }
body {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ovl-midnight);
  background: var(--ovl-parchment);
  -webkit-font-smoothing: antialiased;
}

/* ── Display headings ─────────────────────────────────────────────── */
/* Existing markup uses `font-serif italic` for almost every display
   heading (italic Instrument Serif). The brand reserves italic serif
   for editorial pull-quotes only; display is Albert Sans 800. We
   override here so we don't touch the body markup. */
.font-serif.italic,
h1.font-serif, h2.font-serif, h3.font-serif {
  font-family: 'Albert Sans', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-style: normal !important;
  letter-spacing: -0.022em;
  line-height: 1.04;
}
/* Generic heading defaults.
   Note: no `color` declaration here. Headings inherit from their
   container so they stay readable on both light surfaces (body
   colour is --ovl-midnight) and dark sections (e.g. `bg-ink
   text-white` containers, where the cascade carries white down). */
h1, h2, h3, h4 {
  font-family: 'Albert Sans', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}
/* The mobile-menu link list is set in serif but should be display */
.mobile-link.font-serif {
  font-family: 'Albert Sans', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-style: normal !important;
  letter-spacing: -0.02em;
}

/* The numeric stats use `font-serif italic` and should stay numeric
   display — Albert Sans 800 with tabular figures. */
.stat-number {
  font-variant-numeric: tabular-nums;
  font-family: 'Albert Sans', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-style: normal !important;
  letter-spacing: -0.025em;
  color: var(--ovl-copper) !important;
}

/* ── Eyebrow caps (small uppercase labels) ───────────────────────── */
.uppercase.tracking-wide,
.uppercase.tracking-widest {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  font-size: 11px !important;
  text-transform: uppercase;
}
/* Keep eyebrow text in copper where the original used text-accent,
   and in stone where it used text-silver/steel. */
.uppercase.text-accent { color: var(--ovl-copper) !important; }
.uppercase.text-silver { color: var(--ovl-stone) !important; }

/* ── Copper rule (used as eyebrow rule and stat underline) ───────── */
.rule-accent {
  width: 36px; height: 1px; background: var(--ovl-copper);
}

/* ── Decorative anti-patterns: turn off SaaS bling ───────────────── */
.grain::after { display: none !important; }
.grid-lines  { background-image: none !important; }
.mesh-bg     { background: transparent !important; }
/* Decorative blurry circles, floating rings */
section .absolute.rounded-full[class*="border"] { display: none !important; }
section .absolute.bg-gradient-to-b { display: none !important; }

/* ── Buttons ─────────────────────────────────────────────────────── */
/* Restrained corners, no hot teal-accent fills. The brand uses
   midnight on parchment / parchment on midnight. */
a.rounded-full, button.rounded-full,
.inline-flex.rounded-full {
  border-radius: 2px !important;
}
/* The `Most popular` ribbon stays a small badge */
.bg-accent.rounded-full[class*="text-xs"] {
  background-color: var(--ovl-copper) !important;
  color: var(--ovl-parchment) !important;
  border-radius: 2px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px !important;
}
/* The big "Book a free health check" CTA — copper would fail
   contrast for body. Use midnight on parchment per brand. */
a.bg-accent {
  background-color: var(--ovl-midnight) !important;
  color: var(--ovl-parchment) !important;
}
a.bg-accent:hover {
  background-color: var(--ovl-slate) !important;
}

/* ── Card surfaces: less SaaS-y, more editorial ───────────────────── */
.rounded-3xl, .rounded-2xl { border-radius: 4px !important; }
.rounded-xl  { border-radius: 3px !important; }
.rounded-lg  { border-radius: 3px !important; }
.rounded-sm  { border-radius: 2px !important; }

/* ── Neutralise pastel icon tiles ────────────────────────────────── */
[class*="bg-red-50"], [class*="bg-amber-50"], [class*="bg-blue-50"],
[class*="bg-purple-50"], [class*="bg-pink-50"], [class*="bg-green-50"],
[class*="bg-emerald-50"], [class*="bg-orange-50"], [class*="bg-yellow-50"],
[class*="bg-indigo-50"], [class*="bg-violet-50"], [class*="bg-cyan-50"],
[class*="bg-teal-50"] {
  background-color: var(--ovl-linen) !important;
}
/* Icons inside those tiles: line-only midnight per §10.1 */
[class*="text-red-400"], [class*="text-amber-400"], [class*="text-blue-400"],
[class*="text-purple-400"], [class*="text-pink-400"], [class*="text-green-400"],
[class*="text-emerald-400"], [class*="text-orange-400"], [class*="text-yellow-400"],
[class*="text-indigo-400"], [class*="text-violet-400"], [class*="text-cyan-400"],
[class*="text-teal-400"],
[class*="text-red-600"], [class*="text-amber-600"], [class*="text-blue-600"],
[class*="text-purple-600"], [class*="text-pink-600"], [class*="text-green-600"],
[class*="text-emerald-600"], [class*="text-orange-600"], [class*="text-yellow-600"],
[class*="text-indigo-600"], [class*="text-violet-600"], [class*="text-cyan-600"],
[class*="text-teal-600"] {
  color: var(--ovl-midnight) !important;
}

/* ── Body prose ───────────────────────────────────────────────────── */
p { font-family: 'Newsreader', Georgia, serif; }
/* Lede-weight / oversized intro paragraphs stay readable, not italic */
.text-lg, .text-xl { font-style: normal; }

/* In-prose links: dotted-copper underline per §10.1 */
article a, main a, p a {
  color: var(--ovl-midnight);
  border-bottom: 1px dotted var(--ovl-copper);
  text-decoration: none;
  padding-bottom: 1px;
}
article a:hover, main a:hover, p a:hover {
  color: var(--ovl-copper);
}
/* Don't underline buttons or nav links */
nav a, footer a, .inline-flex { border-bottom: none !important; }

/* ── Reveal animation (kept, restrained) ─────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
.hero-line { opacity: 0; transform: translateY(28px);
  animation: heroIn .9s cubic-bezier(.16,1,.3,1) forwards; }
.hero-line:nth-child(1){animation-delay:.1s}
.hero-line:nth-child(2){animation-delay:.22s}
.hero-line:nth-child(3){animation-delay:.34s}
.hero-line:nth-child(4){animation-delay:.46s}
@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }

/* Subtle nav-on-scroll bar */
.nav-scrolled {
  background: rgba(239,232,218,0.94) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ovl-sand);
}

/* Card lift -> a quieter shadow */
.card-lift { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.card-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -18px rgba(14,22,38,0.22);
}

/* Mobile menu */
.mobile-menu { transform: translateX(100%); transition: transform .35s cubic-bezier(.16,1,.3,1);
  background: var(--ovl-parchment) !important; }
.mobile-menu.open { transform: translateX(0); }

/* Marquee */
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.marquee-track { animation: marquee 36s linear infinite; }

/* Timeline rule (audit page) */
.timeline-line { position: absolute; left: 23px; top: 48px; bottom: 0; width: 1px;
  background: var(--ovl-sand) !important; }

/* Mono spec text */
.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace !important; }

/* Generic tightening: left-aligned body, never justified */
p, li { text-align: left; }

/* Override hero italic blocks specifically: brand wants display weight */
.hero-line.font-serif.italic { font-style: normal !important; }