/*
 * Shared styles for trust pages (about, methodology).
 * Guide-vibe dark theme — deep navy surfaces, periwinkle/mint accents, Inter.
 * Self-contained palette so these pages render dark even without /style.css.
 */

:root {
  --bg:#0b0e14; --card:#141925; --card-alt:#1a2030;
  --text:#e6e9f0; --muted:#97a1b6; --border:#222a3a;
  --brand:#7c8cff; --brand-strong:#9aa6ff; --accent:#43d9ad;
  --grad:linear-gradient(120deg,#7c8cff 0%,#43d9ad 50%,#ff7ac6 100%);
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background-color: #0b0e14;
  background-image:
    radial-gradient(900px 520px at 82% -6%, rgba(124,140,255,0.12), transparent 60%),
    radial-gradient(760px 520px at -4% 2%, rgba(67,217,173,0.09), transparent 55%);
  background-attachment: fixed; background-repeat: no-repeat;
  color: #e6e9f0;
  margin: 0;
  line-height: 1.65;
}

a { color: #7c8cff; text-decoration: none; border-bottom: 1px solid rgba(124,140,255,0.4); }
a:hover { color: #43d9ad; border-color: #43d9ad; }

/* Masthead — translucent dark bar with a gradient hairline */
header {
  padding: 16px 26px;
  border-bottom: 1px solid #222a3a;
  box-shadow: 0 1px 0 0 rgba(124,140,255,0.12);
  display: flex; align-items: center; gap: 12px;
  background: rgba(11,14,20,0.82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
header a { color: inherit; text-decoration: none; border: 0; display: flex; align-items: center; gap: 8px; }
header strong {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(120deg,#7c8cff,#43d9ad 55%,#ff7ac6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
header .lamp { font-size: 24px; line-height: 1; filter: drop-shadow(0 0 10px rgba(124,140,255,0.6)); }
header .motto {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px; color: #97a1b6; border-left: 1px solid #222a3a; padding-left: 12px; font-style: normal;
}

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 36px 24px 70px;
}

.breadcrumb {
  font-family: 'Inter', sans-serif; font-size: 11px; color: #97a1b6;
  margin-bottom: 22px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
}
.breadcrumb a { color: inherit; border: 0; }
.breadcrumb a:hover { color: #43d9ad; }

/* Editorial headlines — Inter heavy, light ink */
h1 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 44px; line-height: 1.12; font-weight: 800;
  margin: 0 0 16px; letter-spacing: -0.022em; color: #e6e9f0;
}
h2 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em;
  margin: 36px 0 12px; color: #e6e9f0;
  padding-bottom: 6px; border-bottom: 1px solid #222a3a;
}

/* Lede — pulled-out intro paragraph */
.lede {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px; color: #b8c0d0; font-weight: 500;
  margin: 8px 0 32px; line-height: 1.7; max-width: 64ch;
}

/* Body */
p {
  font-family: 'Inter', system-ui, sans-serif;
  color: #d4d9e4; margin: 0 0 16px; font-size: 16px; line-height: 1.75; max-width: 66ch;
}
strong { color: #e6e9f0; font-weight: 700; }
em { color: #d4d9e4; }
ul {
  color: #d4d9e4; padding-left: 22px; margin: 0 0 20px; max-width: 66ch;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px; line-height: 1.75;
}
li { margin-bottom: 10px; }
li strong { color: #e6e9f0; }

code {
  background: #1a2030; border: 1px solid #222a3a; border-radius: 6px;
  padding: 1px 6px; font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px; color: #5fe6bf;
}

/* Signoff — editorial closer with a gradient top rule */
.signoff {
  margin-top: 44px; padding-top: 22px;
  border-top: 3px solid transparent; border-image: linear-gradient(120deg,#7c8cff,#43d9ad 55%,#ff7ac6) 1;
  color: #97a1b6; font-size: 14px;
  font-family: 'Inter', system-ui, sans-serif; font-style: italic;
}

footer {
  text-align: center; padding: 30px 20px;
  font-family: 'Inter', sans-serif; font-size: 11px; color: #97a1b6;
  border-top: 1px solid #222a3a;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
footer a { color: #97a1b6; margin: 0 10px; border: 0; }
footer a:hover { color: #43d9ad; }

@media (max-width: 700px) {
  header { padding: 12px 16px; }
  header strong { font-size: 22px; }
  main { padding: 24px 18px 50px; }
  h1 { font-size: 32px; }
  h2 { font-size: 20px; margin: 28px 0 10px; }
  .lede { font-size: 16.5px; }
  p, ul { font-size: 15.5px; }
}