/* Silandor AG - custom layer on top of Tailwind (CDN).
   Nothing here decorates. The brand mark carries the identity; the rest is
   restrained type, hairline borders and near-square corners. Sections are
   separated by background and rule, not by ornament. */

html { scroll-behavior: smooth; }
body { font-feature-settings: 'cv05' 1, 'ss01' 1; }

h1, h2, h3, h4 {
  font-family: Archivo, 'IBM Plex Sans', sans-serif;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: #141d2e;
}

/* ---- accessibility floor -------------------------------------------- */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #141d2e; color: #fff; padding: 0.75rem 1.25rem;
  border-radius: 0 0 0.5rem 0;
  font-size: 0.875rem; font-weight: 600;
}
.skip-link:focus { left: 0; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid #197ffb;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- eyebrow: small mono label above a section heading --------------- */

.eyebrow {
  /* Block-level (flex, not inline-flex) so an eyebrow always owns its line,
     whatever follows it. As an inline box it collapsed onto the same line as
     any inline-level sibling - e.g. the mailto link under the contact
     heading, which is itself an inline-flex .link-ext. fit-content keeps the
     box tight around the label so the ::before rule still reads as a lead-in
     rather than spanning the column. */
  display: flex; width: fit-content;
  align-items: center; gap: 0.6rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #0e68dd;
}
.eyebrow::before {
  content: ''; width: 1.75rem; height: 1px;
  background: currentColor; opacity: 0.5;
}
.eyebrow-invert { color: #90c1fe; }

/* ---- buttons --------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.8rem 1.35rem;
  border-radius: 2px;
  font-size: 0.9375rem; font-weight: 600;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-primary { background: #141d2e; color: #fff; }
.btn-primary:hover { background: #0e68dd; }
.btn-outline { border: 1px solid rgba(20, 29, 46, 0.22); color: #141d2e; background: transparent; }
.btn-outline:hover { border-color: #141d2e; background: rgba(20, 29, 46, 0.03); }
.btn-invert { background: #fff; color: #141d2e; }
.btn-invert:hover { background: #e0eeff; }
.btn-invert-outline { border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; }
.btn-invert-outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.btn:active { transform: translateY(1px); }

/* ---- link with trailing arrow (external) ----------------------------- */

.link-ext {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: #0e68dd; font-weight: 600;
  border-bottom: 1px solid rgba(14, 104, 221, 0.3);
  transition: border-color .18s ease, color .18s ease;
}
.link-ext:hover { color: #141d2e; border-color: #141d2e; }
.link-ext svg { transition: transform .18s ease; }
.link-ext:hover svg { transform: translate(2px, -2px); }

/* ---- nav ------------------------------------------------------------- */

.nav-link { position: relative; padding-block: 0.35rem; color: #37455d; transition: color .18s ease; }
.nav-link:hover { color: #141d2e; }
.nav-link.active { color: #141d2e; }
.nav-link.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: #197ffb;
}

/* ---- prose (legal pages) --------------------------------------------- */

.prose-legal { color: #37455d; line-height: 1.75; }
.prose-legal h2 {
  font-size: 1.25rem; margin-top: 2.75rem; margin-bottom: 0.85rem;
  padding-top: 1.5rem; border-top: 1px solid rgba(20, 29, 46, 0.1);
}
.prose-legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.prose-legal h3 { font-size: 1rem; margin-top: 1.75rem; margin-bottom: 0.5rem; }
.prose-legal p  { margin-bottom: 1rem; }
.prose-legal ul { margin: 0 0 1rem 0; padding-left: 1.15rem; list-style: disc; }
.prose-legal li { margin-bottom: 0.4rem; }
.prose-legal a  { color: #0e68dd; border-bottom: 1px solid rgba(14, 104, 221, 0.35); }
.prose-legal a:hover { color: #141d2e; border-color: #141d2e; }
.prose-legal strong { color: #141d2e; font-weight: 600; }
.prose-legal .lead { font-size: 1.0625rem; color: #52617a; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .link-ext svg { transition: none; }
}