/* ───────────────────────────────────────────────────────────
   Cyboflow landing — shared base + section primitives
   Sits on top of tokens.css. Trimmed to only what the shipped
   single page uses (the prototype's variant-only blocks —
   .principle grid, .cp-* comparison, .practice-*, .optbar —
   were dropped for production).
   ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--cf-page);
  color: var(--cf-ink);
  font-family: var(--cf-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(201,100,66,.22); }

a { color: inherit; }
img, svg { display: block; }

/* Shared layout shell ------------------------------------------------ */
.wrap { width: min(1180px, 100% - 64px); margin-inline: auto; }
.section { padding: clamp(72px, 9vw, 132px) 0; position: relative; }

.eyebrow {
  font-size: var(--cf-size-eyebrow);
  letter-spacing: var(--cf-track-eyebrow-wide);
  text-transform: uppercase;
  color: var(--cf-ink-3);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  background: var(--cf-rust);
}

/* Buttons ------------------------------------------------------------ */
.btn {
  font-family: var(--cf-font);
  font-size: var(--cf-size-meta);
  letter-spacing: var(--cf-track-btn);
  text-transform: uppercase;
  font-weight: 700;
  border: 1.4px solid var(--cf-ink);
  background: var(--cf-ink);
  color: var(--cf-page);
  padding: 13px 22px;
  cursor: pointer;
  border-radius: 0;
  transition: background var(--cf-dur-fast) var(--cf-ease),
              border-color var(--cf-dur-fast) var(--cf-ease),
              color var(--cf-dur-fast) var(--cf-ease);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.btn:hover { background: var(--cf-rust); border-color: var(--cf-rust); color: #fff; }
.btn:focus-visible { outline: 2px solid var(--cf-rust); outline-offset: 3px; }
.btn.ghost { background: transparent; color: var(--cf-ink); }
.btn.ghost:hover { background: transparent; color: var(--cf-rust); border-color: var(--cf-rust); }
.btn .k { font-size: 9px; opacity: .55; letter-spacing: .04em; }

/* Skip-to-content link — off-screen until focused (keyboard users) */
.skip-link {
  position: absolute; left: 8px; top: -56px; z-index: 100;
  background: var(--cf-ink); color: var(--cf-page);
  padding: 10px 16px; font-size: var(--cf-size-meta);
  letter-spacing: var(--cf-track-btn); text-transform: uppercase; font-weight: 700;
  text-decoration: none; border: 1.4px solid var(--cf-ink);
  transition: top var(--cf-dur-fast) var(--cf-ease);
}
.skip-link:focus { top: 8px; }

/* ────────────────────────────────────────────────────────────
   CTA / CLOSE
   ──────────────────────────────────────────────────────────── */
.close-section { text-align: center; }
.close-inner { max-width: 820px; margin-inline: auto; }
.close-statement {
  font-size: clamp(24px, 3.6vw, 40px);
  font-weight: 700;
  letter-spacing: var(--cf-track-tight);
  line-height: 1.18;
  text-wrap: balance;
}
.close-statement .accent { color: var(--cf-rust); }
.close-sub {
  font-size: clamp(13px, 1.3vw, 15px);
  line-height: 1.65;
  color: var(--cf-ink-2);
  margin: 22px auto 0;
  max-width: 56ch;
  text-wrap: pretty;
}
.close-cta { margin-top: 34px; display: inline-flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
.close-meta {
  margin-top: 18px;
  font-size: var(--cf-size-meta);
  color: var(--cf-ink-3);
  letter-spacing: .04em;
}
.close-meta .mid { color: var(--cf-line); margin: 0 8px; }

/* Footer ------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--cf-line);
  padding: 28px 0;
  background: var(--cf-surface);
}
.footer-inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-inner .grow { flex: 1; }
.footer-link {
  font-size: var(--cf-size-meta);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cf-ink-3);
  text-decoration: none;
}
.footer-link:hover { color: var(--cf-rust); }
.footer-link:focus-visible { outline: 2px solid var(--cf-rust); outline-offset: 3px; color: var(--cf-ink); }
.footer-copy { font-size: var(--cf-size-meta); color: var(--cf-ink-3); letter-spacing: .02em; }

/* Reveal base ---------------------------------------------------------
   Content is VISIBLE by default. The hidden-start only applies while
   <html> carries .js-anim AND the section hasn't been revealed yet.
   A JS fallback drops the gate after a beat so nothing can get stuck
   invisible (throttled IO, print, failed script, etc.). */
.reveal-fade {
  transition: opacity .6s var(--cf-ease), transform .6s var(--cf-ease);
}
html.js-anim .reveal:not(.in) .reveal-fade,
html.js-anim .reveal-fade.reveal:not(.in) {
  opacity: 0;
  transform: translateY(16px);
}
/* hard force-visible escape hatch */
html.reveal-done .reveal-fade {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal-fade { opacity: 1 !important; transform: none !important; }
}

/* Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  .footer-inner { gap: 12px 16px; }
}