/* Atlas — Website UI kit styles. Built on the design system tokens. */
@import url("./colors_and_type.css");

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--fg-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--bone); color: var(--ink); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: 1240px; width: 100%; margin: 0 auto; padding: 0 40px; }

/* ---- shared atoms ---- */
.eyebrow {
  font-family: var(--font-sans); font-weight: 500; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3);
}
.rule { display: block; width: 36px; height: 1px; background: var(--bone); opacity: 0.85; border: 0; }
.eyebrow-grp { display: flex; flex-direction: column; gap: 16px; }

.btn {
  font-family: var(--font-sans); font-weight: 500; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--border-2); background: transparent; color: var(--bone);
  padding: 15px 26px; border-radius: 0;
  transition: background var(--dur-base) var(--ease-out-quiet),
              color var(--dur-base) var(--ease-out-quiet),
              border-color var(--dur-base) var(--ease-out-quiet),
              transform var(--dur-fast) var(--ease-out-quiet);
  display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.btn.primary:hover { background: #fff; }
.btn.ghost:hover { color: var(--bone); border-color: var(--border-3); }
.btn .arr { transition: transform var(--dur-base) var(--ease-out-quiet); }
.btn:hover .arr { transform: translateX(4px); }

.section { padding: 128px 0; }
.section-sm { padding: 88px 0; }

h1, h2, h3, p { margin: 0; }

.display-1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(56px, 8vw, 120px); line-height: 0.96; letter-spacing: -0.03em;
  color: var(--bone);
}
.display-2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(36px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.02em;
  color: var(--bone);
}
.h3 { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -0.01em; color: var(--bone); }
.lede { font-size: 20px; line-height: 1.55; color: var(--fg-2); }
.body { font-size: 16px; line-height: 1.6; color: var(--fg-2); }

.divider { height: 1px; background: var(--border-1); border: 0; margin: 0; }

/* ---- entrance ----
   Content is ALWAYS fully opaque. The entrance animates transform only, so
   if the animation is ever throttled/frozen (offscreen tabs, capture tools,
   reduced-motion, print) the worst case is an un-shifted but fully VISIBLE
   element — never invisible content. */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .reveal.in { animation: revealUp 0.6s var(--ease-out-quiet) both; }
}
@keyframes revealUp {
  from { transform: translateY(16px); }
  to   { transform: translateY(0); }
}
/* FAQ answer entrance — transform only (never opacity) so a frozen animation
   still shows the answer; the answer is also conditionally rendered, so when
   closed it is simply absent from the DOM. */
@keyframes faqOpen {
  from { transform: translateY(-6px); }
  to   { transform: translateY(0); }
}
@media print { .reveal { transform: none !important; animation: none !important; } }