/* tenant/ops_ marketing site — shared chrome + layout.
   Colors come from CSS vars set by JS from MK_PALETTES (single source of
   truth). Structural layout lives here; components carry token colors inline.
   Dark is the canonical default (no-flash baseline below). */

:root {
  /* dark baseline — overwritten by JS, but present so first paint is correct */
  --bg:#0F1419; --bgPanel:#161B22; --bgRaised:#1C232C; --bgSubtle:#1A2028;
  --border:#2A3340; --borderStrong:#3A4656;
  --fg:#E5E9EE; --fgDim:#B6BFCC; --fgMuted:#8A96A6; --fgFaint:#5B6878;
  --accent:#C2A882; --accentDeep:#A8906E; --accentInk:#1E1A16; --accentBg:#26201A;
  --ok:#7DC383; --okBg:#1A2820; --warn:#E0B060; --warnBg:#2A2218;
  --err:#D27B6E; --errBg:#2A1C18; --info:#7DA8D8; --infoBg:#1A2230;
  --boxLine:#3A4656;
  --maxw:1160px; --pad:32px;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body {
  background:var(--bg); color:var(--fg);
  font-family:'IBM Plex Sans', system-ui, sans-serif;
  font-size:14px; line-height:1.6;
}
a { color:inherit; text-decoration:none; }
::selection { background:var(--accent); color:var(--accentInk); }

/* Brand caret animations — verbatim from CLAUDE.md §1 */
@keyframes ops-caret-blink { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }
.ops-caret { animation: ops-caret-blink 1.1s steps(1) infinite; }
@keyframes ops-caret-pulse { 0%,49% { opacity:1; } 50%,100% { opacity:0.25; } }
.ops-caret-soft { animation: ops-caret-pulse 1.1s steps(1) infinite; }

@media (prefers-reduced-motion: reduce) {
  .ops-caret, .ops-caret-soft { animation:none; }
  html { scroll-behavior:auto; }
}

/* ── Layout primitives ───────────────────────────────────────── */
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }

.section { border-top:1px solid var(--border); }
.section--flush { border-top:0; }
.section--panel { background:var(--bgPanel); }
.section__inner { padding:104px 0; }
.section__inner--tight { padding:72px 0; }

/* eyebrow + title block */
.eyebrow {
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:11px; font-weight:500; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--fgFaint);
}
.sec-head { display:flex; flex-direction:column; gap:14px; max-width:680px; }
.sec-title {
  margin:0; font-weight:600; letter-spacing:-0.025em; color:var(--fg);
  font-size:40px; line-height:1.08; text-wrap:balance;
}
.sec-sub { margin:0; color:var(--fgMuted); font-size:16px; line-height:1.6; max-width:560px; }

/* ── Top nav ─────────────────────────────────────────────────── */
.nav {
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--border);
}
.nav__row {
  height:62px; display:flex; align-items:center; gap:28px;
}
.nav__links { display:flex; gap:4px; margin-left:14px; flex:1; }
.nav__link {
  position:relative; padding:6px 12px; border-radius:6px;
  font-size:13.5px; color:var(--fgDim); cursor:pointer;
  transition:color .14s ease, background .14s ease;
}
.nav__link:hover { color:var(--fg); background:var(--bgRaised); }
.nav__link--active { color:var(--fg); }
.nav__link--active::after {
  content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2px;
  background:var(--accent); border-radius:2px;
}
.nav__right { display:flex; align-items:center; gap:14px; }
.nav__signin { font-size:13.5px; color:var(--fgDim); cursor:pointer; white-space:nowrap; }
.nav__signin:hover { color:var(--fg); }

.theme-toggle {
  width:30px; height:30px; border-radius:999px;
  border:1px solid var(--border); background:var(--bgRaised);
  color:var(--fgMuted); cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; padding:0;
  transition:color .14s ease, border-color .14s ease;
}
.theme-toggle:hover { color:var(--fg); border-color:var(--borderStrong); }

/* button (anchor) */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:6px; cursor:pointer;
  font-family:'IBM Plex Sans', system-ui, sans-serif;
  font-size:13.5px; font-weight:500; white-space:nowrap;
  border:1px solid var(--border); background:transparent; color:var(--fgDim);
  transition:background .14s ease, border-color .14s ease, color .14s ease;
}
.btn:hover { border-color:var(--borderStrong); color:var(--fg); }
.btn--primary { background:var(--accent); border-color:var(--accent); color:var(--accentInk); box-shadow:inset 0 -1px 0 rgba(0,0,0,0.08); }
.btn--primary:hover { background:var(--accentDeep); border-color:var(--accentDeep); color:var(--accentInk); }
.btn--lg { padding:11px 18px; font-size:14px; }
.btn__kbd {
  font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:10.5px;
  padding:1px 5px; border-radius:3px; letter-spacing:0.02em;
  border:1px solid color-mix(in srgb, currentColor 28%, transparent);
  opacity:0.7;
}

/* ── Footer ──────────────────────────────────────────────────── */
.footer { border-top:1px solid var(--border); background:var(--bgPanel); }
.footer__top {
  padding:56px 0 40px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
}
.footer__tag { color:var(--fgMuted); font-size:13.5px; line-height:1.6; max-width:280px; margin:16px 0 0; }
.footer__col h4 {
  margin:0 0 14px; font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:11px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--fgFaint);
}
.footer__col a { display:block; color:var(--fgDim); font-size:13.5px; padding:5px 0; cursor:pointer; }
.footer__col a:hover { color:var(--fg); }
.footer__legal {
  border-top:1px solid var(--border); padding:18px 0;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:10.5px; letter-spacing:0.06em; color:var(--fgFaint); flex-wrap:wrap;
}
.footer__legal .compl { display:inline-flex; gap:18px; flex-wrap:wrap; text-transform:uppercase; }

/* ── Generic cards / grids ───────────────────────────────────── */
.card { background:var(--bgPanel); border:1px solid var(--border); border-radius:8px; }
.grid { display:grid; gap:20px; }
.grid--2 { grid-template-columns:1fr 1fr; }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--4 { grid-template-columns:repeat(4,1fr); }

.split { display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
.split--rev .split__media { order:-1; }

/* fade-up on load */
.rise { opacity:0; transform:translateY(14px); animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards; }
@media (prefers-reduced-motion: reduce){ .rise{ opacity:1; transform:none; animation:none; } }
@keyframes rise { to { opacity:1; transform:none; } }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 980px) {
  .split, .footer__top { grid-template-columns:1fr; gap:36px; }
  .split--rev .split__media { order:0; }
  .grid--4 { grid-template-columns:1fr 1fr; }
  .grid--3 { grid-template-columns:1fr; }
  .sec-title { font-size:34px; }
}
@media (max-width: 720px) {
  :root { --pad:20px; }
  .nav__links { display:none; }
  .section__inner { padding:72px 0; }
  .grid--2, .grid--4 { grid-template-columns:1fr; }
  .sec-title { font-size:30px; }
  .footer__legal { flex-direction:column; align-items:flex-start; gap:10px; }
}