/* Ivers Studio's own look, laid over mono.css on the home and agentic pages (17, 18). Three things that used
 * to be Apple's and are now ours: the accent, the greys and the small header. Add ?look=before to a page's
 * address to see it without this file. */
:root {
  /* the accent: the violet from the studio's first mark, used for links and labels only */
  --accent: #5b3df5;
  --accent-hi: #a99bff;
  --accent-soft: #eeebff;
  /* the greys, a touch warm: ink that is nearly black, paper that is nearly white */
  --ink: #1c1b1a;
  --ink-2: #403e3b;
  --muted: #6f6c67;
  --dim: #8a8782;
  --faint: #a5a29c;
  --line: #e6e3dd;
  --paper-2: #f6f5f2;
}
.hero { background: radial-gradient(60% 55% at 50% 70%, #ffffff 0%, #f5f4f1 60%, #eeece7 100%); }
.agents { background: var(--paper-2); }
.btn:hover, .nav .pill:hover { background: #000; }

/* the story's highlights follow the accent (18) */
.hi:not(.w) { background: rgba(91, 61, 245, 0.09); box-shadow: inset 0 0 0 1px rgba(91, 61, 245, 0.32); }
.scan::after { background: rgba(91, 61, 245, 0.06); }

/* The small header. Not a white bar across the page: a dark capsule in the middle, only as wide as what is in it,
 * with the links kept. It drops in when the page leaves the top. */
.nav.float, .nav.float.light, .bar.float {
  top: 12px; left: 50%; right: auto; width: max-content; max-width: calc(100vw - 24px); height: 48px; transform: translateX(-50%);
  gap: 26px; padding: 0 7px 0 22px; border-radius: 999px; border-color: transparent;
  background: var(--ink); color: #fff; box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.55);
  transition: none; animation: capsule 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes capsule { from { opacity: 0; transform: translateX(-50%) translateY(-14px); } }
.nav.float .links, .bar.float nav { display: flex; gap: 22px; margin: 0; }
.nav.float .links a, .bar.float nav a { color: rgba(255, 255, 255, 0.66); opacity: 1; }
.nav.float .links a.on, .nav.float .links a:hover, .bar.float nav a.on, .bar.float nav a:hover { color: #fff; }
.nav.float .ghost, .bar.float .ghost { display: none; }
.nav.float .brand, .bar.float .brand { color: #fff; }
.nav.float .ivers-logo, .bar.float .ivers-logo { --logo-stop: var(--accent-hi); }
.nav.float .pill, .bar.float .cta { background: #fff; color: var(--ink); padding: 8px 16px; }
.nav.float .pill:hover, .bar.float .cta:hover { background: #fff; color: var(--ink); opacity: 0.9; }
@media (max-width: 760px) { .nav.float .links, .bar.float nav { display: none; } .nav.float, .bar.float { gap: 16px; } }
@media (prefers-reduced-motion: reduce) { .nav.float, .bar.float { animation: none; } }