/* Launch additions to the main site: the Efficiency Index callout and the We're hiring button in the hero, and the
   404 page links. Loaded after glass.css and uses its --g-* tokens, so it keeps the liquid-glass look. */
.hero-actions { flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 1.6rem; }

.index-callout {
  width: 100%; max-width: 36rem; padding: 1.2rem 1.35rem 1.35rem; border-radius: 18px;
  background: var(--g-face); border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--g-line));
  box-shadow: var(--g-shadow), 0 14px 32px -18px color-mix(in srgb, var(--accent) 70%, transparent); }
.index-callout-kicker {
  display: flex; align-items: center; gap: .5rem; margin: 0; font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.index-callout-kicker::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.index-callout-title {
  margin: .6rem 0 0; font-size: clamp(1.2rem, 1.9vw, 1.45rem); font-weight: 700; letter-spacing: -.025em;
  line-height: 1.25; color: var(--ink); }
.index-callout-text { margin: .45rem 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
/* the callout's button row: the index first (primary), hiring beside it (secondary glass); they wrap only when they do not fit */
.index-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1rem; }
.button-primary.index-cta { min-height: 54px; padding: .8rem 1.45rem; font-size: 16px; gap: .8rem; }
.index-actions .hiring-cta { min-height: 54px; padding: .55rem 1.2rem; }
/* the index button wears the same clear glass as hiring; it leads by order and a faint accent rim, not by black ink */
.index-callout .button-primary.index-cta { background: var(--g-face); color: var(--ink); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--g-line));
  border-radius: 999px; box-shadow: var(--g-shadow); font-size: 15px; font-weight: 600; min-height: 54px; padding: .55rem 1.3rem; }
.index-callout .button-primary.index-cta:hover { background: var(--g-face); color: var(--ink); border-color: var(--g-ring); box-shadow: var(--g-shadow), var(--g-glow); }

.hiring-cta {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: .55rem 1.05rem; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none;
  background: var(--g-face); border: 1px solid var(--g-line); box-shadow: var(--g-shadow);
  transition: transform .25s cubic-bezier(.34,1.45,.64,1), border-color .2s, box-shadow .25s; }
.hiring-cta:hover { border-color: var(--g-ring); box-shadow: var(--g-shadow), var(--g-glow); transform: translateY(-1px); }
.hiring-cta:active { transform: scale(.97); transition-duration: 80ms; }
.hiring-cta:focus-visible, .index-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hiring-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); animation: hiring-pulse 2.4s ease-out infinite; }
@keyframes hiring-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 8px transparent; } }

.nav-link:focus-visible, .text-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.notfound-links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem; }

@media (max-width: 767px) {
  .index-callout { padding: 1rem 1.05rem 1.1rem; }
  .button-primary.index-cta { font-size: 15px; padding: .75rem 1.1rem; min-height: 50px; }
  .index-actions .hiring-cta { min-height: 50px; padding: .5rem 1rem; }
  .index-actions > a { flex: 1 1 auto; justify-content: center; } }

@media (prefers-reduced-motion: reduce) {
  .hiring-dot { animation: none; }
  .hiring-cta:hover, .hiring-cta:active { transform: none; } }

/* nav labels stay on one line; between tablet and laptop widths the gaps tighten so they still fit beside the mark */
.nav-link { white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1320px) { .nav-pages { gap: 1.1rem; } }

/* blog cards: the title, then one compact line with the post's byline and reading time */
.post-card .post-card-meta { font-family: var(--body); font-size: 12.5px; letter-spacing: .02em; gap: .2rem .9rem; color: var(--ink-3); }
.post-card .post-card-meta .post-byline { color: var(--accent); font-weight: 600; }