/* McVaulty — shared tokens for all three directions */
:root {
  --navy-900: #0b1a2b;
  --navy-800: #11253c;
  --navy-700: #1a3352;
  --navy-600: #244a72;
  --navy-500: #3a6a9b;
  --cream-50: #faf6ec;
  --cream-100: #f4ecd8;
  --cream-200: #e8dcc0;
  --cream-300: #d4c29a;
  --ink:       #0a1420;
  --muted:     #5a6778;
  --rule:      #1e3147;
  --accent:    #c8a24b; /* brass */
  --eu-blue:   #003399;
  --eu-gold:   #ffcc00;
}

/* Typography system — shared by all three directions.
   Instrument Serif for display, Inter for body, JetBrains Mono for labels. */
@font-face {
  font-family: 'InstrumentSerifFallback';
  src: local('Georgia');
  size-adjust: 100%;
}

.lp, .lp * { box-sizing: border-box; }
.lp {
  width: 100%;
  max-width: 1440px;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream-50);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.lp-serif { font-family: 'Instrument Serif', 'InstrumentSerifFallback', Georgia, serif; font-weight: 400; font-style: normal; letter-spacing: -0.01em; }
.lp-mono  { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-feature-settings: "ss01", "zero"; }

.lp h1, .lp h2, .lp h3, .lp h4, .lp p { margin: 0; }

/* Utility: eyebrow label */
.lp-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* EU flag accent — toggled per-variant; visuals rendered inline by EuBar */
.eu-bar { display: inline-block; line-height: 0; }

/* Grainy paper texture — used by direction C */
.paper-grain {
  background-image:
    radial-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.03) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
}

/* Dashed rule — used by diagrams */
.hr-dashed { border: 0; border-top: 1px dashed rgba(10,20,32,.18); margin: 0; }

/* Button primitives */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 2px;
  border: 1px solid transparent;
  font-weight: 500; font-size: 14px; letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  font-family: inherit;
}
.btn:active { transform: translateY(1px); }
.btn-primary  { background: var(--navy-900); color: var(--cream-50); }
.btn-primary:hover { background: var(--navy-700); }
.btn-ghost    { background: transparent; color: var(--navy-900); border-color: rgba(10,20,32,.2); }
.btn-ghost:hover { border-color: var(--navy-900); }
.btn-accent   { background: var(--accent); color: var(--navy-900); }

/* Sync diagram shared */
.dot-pulse { animation: dotPulse 1.6s ease-in-out infinite; }
@keyframes dotPulse {
  0%, 100% { opacity: .25; }
  50% { opacity: 1; }
}

/* Packet traveling along a path */
@keyframes packetA { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* Subtle float for device glyphs */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.floaty { animation: float 4s ease-in-out infinite; }

/* Counter-up numeric */
.tnum { font-variant-numeric: tabular-nums; }

/* FAQ chevron */
.faq-row { transition: background .15s; }
.faq-row:hover { background: rgba(10,20,32,.03); }