/* Shared public marketing chrome — Job Resiliens.
   Keeps /, /pricing/, /professionals/, /students/ aligned with the product
   brand (Space Grotesk + signal amber + logo-mark bars). Page-specific
   layout stays inline; this file owns header, brand mark, buttons, and
   mobile nav. Bump ?v= on every <link> when this file changes. */

.logo-mark{
  display:inline-flex; align-items:flex-end; gap:2.5px;
  width:20px; height:20px; flex-shrink:0; vertical-align:middle;
}
.logo-mark i{ display:block; width:5px; border-radius:2px; }
.logo-mark i:nth-child(1){ height:40%; background:#5AB8FF; }
.logo-mark i:nth-child(2){ height:70%; background:var(--signal, #FFB627); }
.logo-mark i:nth-child(3){ height:100%; background:#34D399; }

header.site-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-bottom:1px solid var(--line); padding:14px 24px;
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
header.site-header a.brand{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px;
  color:var(--text); text-decoration:none; letter-spacing:.01em;
}
header.site-header a.brand:hover{ text-decoration:none; opacity:.92; }

.site-nav{
  display:flex; align-items:center; gap:4px 16px; flex-wrap:nowrap;
}
.site-nav-links{
  display:flex; align-items:center; gap:16px; flex-wrap:nowrap;
}
.site-nav-links a{
  font-size:13.5px; color:var(--muted); font-weight:600; text-decoration:none;
  white-space:nowrap;
}
.site-nav-links a:hover{ color:var(--text); text-decoration:none; }

.site-nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; border:1px solid var(--line);
  border-radius:8px; background:transparent; color:var(--text); cursor:pointer;
}
.site-nav-toggle svg{ width:18px; height:18px; }

.site-nav-panel[hidden]{ display:none !important; }

.btn{
  display:inline-block; background:var(--signal); color:#1A1206;
  font-weight:700; padding:10px 20px; border-radius:8px; text-decoration:none;
  font-size:14.5px; white-space:nowrap; border:none; cursor:pointer;
  transition:transform .18s ease, opacity .18s ease;
}
.btn:hover{ text-decoration:none; opacity:.94; transform:translateY(-1px); }
.btn-ghost{
  display:inline-block; background:transparent; color:var(--text);
  font-weight:600; padding:9px 16px; border:1px solid var(--line);
  border-radius:8px; text-decoration:none; font-size:13.5px;
  transition:border-color .15s ease;
}
.btn-ghost:hover{ text-decoration:none; border-color:var(--signal); }

/* Mobile-only Sign in — must beat .btn-ghost display. */
.site-nav-cta{ display:none !important; }

@media (max-width:820px){
  .site-nav-links{ display:none; }
  .site-nav-toggle{ display:inline-flex; }
  .site-nav-cta{ display:inline-flex !important; }
  .site-nav.is-open .site-nav-panel{
    display:flex !important; flex-direction:column; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:8px 16px 16px; box-shadow:0 12px 28px rgba(0,0,0,.18);
  }
  .site-nav.is-open .site-nav-panel a{
    display:block; padding:14px 8px; font-size:15px; font-weight:600;
    color:var(--text); text-decoration:none; border-bottom:1px solid var(--line);
  }
  .site-nav.is-open .site-nav-panel a:last-child{ border-bottom:none; }
  header.site-header{ flex-wrap:nowrap; position:sticky; }
  header.site-header .site-nav{ position:static; }
}

/* Hero motion — presence, not noise */
@keyframes jr-rise{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
.hero-animate > *{
  animation:jr-rise .55s ease both;
}
.hero-animate > *:nth-child(1){ animation-delay:.04s; }
.hero-animate > *:nth-child(2){ animation-delay:.12s; }
.hero-animate > *:nth-child(3){ animation-delay:.2s; }
.hero-animate > *:nth-child(4){ animation-delay:.28s; }
@media (prefers-reduced-motion:reduce){
  .hero-animate > *{ animation:none; }
  .btn{ transition:none; }
}