/* The public site's one navigation bar, in two rows (owner, 2026-10-01).
   Markup: includes/site_nav.php. A message strip, then a slim top row with the
   two sides as tabs and the links common to both, then the menu row. */

:root { --sn-gutter: max(80px, calc(50% - 640px)); }
@media (max-width: 1100px) { :root { --sn-gutter: 40px; } }
@media (max-width: 640px) { :root { --sn-gutter: 16px; } }

/* The message strip: the first row of the sticky bar, always on screen. */
.sn-strip { position: relative; display: flex; align-items: center; justify-content: center; padding: 8px 24px; font: 500 13px/1.4 "Inter", "Segoe UI", system-ui, sans-serif; color: #061013;
  background: linear-gradient(90deg, var(--rn-accent, #72dfcd), color-mix(in srgb, var(--rn-primary-tint, #7fe6d7) 86%, #fff) 50%, #9fb4ff); text-align: center; }
.sn-strip[hidden] { display: none; }
.sn-strip p { margin: 0; }
.sn-strip a { color: #061013; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.sn-strip-x { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: rgba(6, 16, 19, 0.12); color: #061013; cursor: pointer; }
.sn-strip-x:hover { background: rgba(6, 16, 19, 0.2); }
.sn-strip-x .sn-i { width: 11px; height: 11px; }

header.sn {
  position: sticky; top: 0; z-index: 40;
  --sn-h: 68px; --sn-top-h: 40px;
  background: rgba(5, 8, 13, 0.86);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(187, 201, 224, 0.10);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
header.sn * { box-sizing: border-box; }

/* Top row: the two sides, then the common links and Sign in. */
.sn-top { height: var(--sn-top-h); display: flex; align-items: stretch; gap: 16px; padding: 0 var(--sn-gutter); background: rgba(3, 6, 10, 0.92); border-bottom: 1px solid rgba(187, 201, 224, 0.10); }
.sn-sides { display: flex; align-items: stretch; margin-left: -14px; }
.sn-sides a { display: flex; align-items: center; padding: 0 14px; font-size: 13px; font-weight: 600; color: #93a2ba; text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: color .15s ease, background-color .15s ease; }
.sn-sides a:hover { color: #f5f7fb; }
.sn-sides a[aria-current] { color: #f5f7fb; border-bottom-color: var(--rn-accent, #72dfcd); background: color-mix(in srgb, var(--rn-accent, #72dfcd) 6%, transparent); }
.sn-top-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.sn-common { display: flex; align-items: center; gap: 2px; }
.sn-common a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 8px; font-size: 13px; color: #c5cedc; text-decoration: none; white-space: nowrap; transition: color .15s ease, background-color .15s ease; }
.sn-common a::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #c38bff; box-shadow: 0 0 8px #c38bff; }
.sn-common a:hover { color: #f5f7fb; background: rgba(255, 255, 255, 0.05); }
.sn-common a[aria-current] { color: #f5f7fb; background: rgba(195, 139, 255, 0.12); }
.sn-vr { width: 1px; height: 18px; background: rgba(187, 201, 224, 0.24); flex: none; }
.sn-top .sn-signin { font-size: 13px; font-weight: 600; }

/* Menu row: the logo, that side's links and its main button. */
.sn-row { height: var(--sn-h); display: flex; align-items: center; gap: 20px; padding: 0 var(--sn-gutter); }
.sn-logo { display: flex; align-items: center; flex: none; text-decoration: none; }
.sn-logo img { height: 30px !important; width: auto; display: block; }

.sn-menu { display: flex; align-items: center; gap: 4px; margin-left: 20px; }
.sn-menu a { position: relative; padding: 9px 13px; border-radius: 10px; font-size: 15px; font-weight: 500; line-height: 1; white-space: nowrap;
  color: #c5cedc; text-decoration: none; transition: color .15s ease, background-color .15s ease; }
.sn-menu a:hover { color: #f5f7fb; background: rgba(255, 255, 255, 0.05); }
.sn-menu a[aria-current] { color: #f5f7fb; font-weight: 600; background: color-mix(in srgb, var(--rn-accent, #72dfcd) 9%, transparent); }

.sn-right { display: flex; align-items: center; gap: 14px; flex: none; margin-left: auto; }
.sn-i { width: 13px; height: 13px; flex: none; }
.sn-signin { font-size: 14.5px; font-weight: 500; color: #c5cedc; text-decoration: none; white-space: nowrap; }
.sn-signin:hover { color: var(--rn-accent, #72dfcd); }

.sn-cta {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif; font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em;
  color: #061013; background: linear-gradient(120deg, var(--rn-accent, #72dfcd), color-mix(in srgb, var(--rn-primary-tint, #7fe6d7) 86%, #fff));
  padding: 12px 18px; border-radius: 12px; text-decoration: none;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--rn-accent, #72dfcd) 22%, transparent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.sn-cta:hover { color: #061013; transform: translateY(-1px); box-shadow: 0 14px 34px color-mix(in srgb, var(--rn-accent, #72dfcd) 30%, transparent); }
.sn-cta .sn-i { width: 14px; height: 14px; }
.sn-short { display: none; }

.sn-burger {
  display: none; width: 42px; height: 42px; flex: none;
  align-items: center; justify-content: center; padding: 0;
  border-radius: 12px; border: 1px solid rgba(187, 201, 224, 0.24);
  background: transparent; color: #f5f7fb; cursor: pointer;
}
.sn-burger .sn-i { width: 16px; height: 16px; }
.sn-burger .sn-i-xmark { display: none; }
.sn-burger[aria-expanded="true"] .sn-i-bars { display: none; }
.sn-burger[aria-expanded="true"] .sn-i-xmark { display: block; }

.sn-menu a:focus-visible, .sn-sides a:focus-visible, .sn-common a:focus-visible, .sn-signin:focus-visible, .sn-cta:focus-visible,
.sn-burger:focus-visible, .sn-logo:focus-visible, .sn-sheet a:focus-visible, .sn-strip a:focus-visible, .sn-strip-x:focus-visible {
  outline: 2px solid var(--rn-accent, #72dfcd); outline-offset: 3px;
}

/* after scrolling: a firmer ground with a soft shadow */
header.sn.is-scrolled { background: rgba(5, 8, 13, 0.95); border-color: rgba(187, 201, 224, 0.13); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28); }

/* a link to a section lands with its heading clear of both rows */
html { scroll-padding-top: 162px; }

/* The interview keeps the logo only bar. */
.sn--minimal .sn-row { height: 68px; }

/* narrower desktops: short button */
@media (max-width: 1360px) {
  .sn-menu { margin-left: 12px; }
  .sn-row .sn-cta .sn-long { display: none; }
  .sn-row .sn-cta .sn-short { display: inline; }
}

/* tablets and phones: the tabs stay, the links go into the menu */
@media (max-width: 1080px) {
  .sn-menu, .sn-top-right .sn-common, .sn-top-right .sn-vr, .sn-top-right .sn-signin { display: none; }
  .sn--minimal .sn-row .sn-signin { display: inline; }
  .sn-burger { display: inline-flex; }
  .sn-sheet {
    position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100vh - 100%); overflow-y: auto;
    padding: 8px var(--sn-gutter) 24px;
    background: #0a1423; border-bottom: 1px solid rgba(187, 201, 224, 0.13);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  }
  .sn-sheet[hidden] { display: none; }
  .sn-sheet-label { margin: 16px 4px 2px; font: 600 11px "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #93a2ba; }
  .sn-sheet-links { display: flex; flex-direction: column; }
  .sn-sheet-links a {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 14px 4px; border-bottom: 1px solid rgba(187, 201, 224, 0.13);
    font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif; font-size: 16.5px; font-weight: 700;
    color: #f5f7fb; text-decoration: none;
  }
  .sn-sheet-links a[aria-current] span { color: var(--rn-accent, #72dfcd); }
  .sn-sheet-common a span { display: inline-flex; align-items: center; gap: 8px; }
  .sn-sheet-common a span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #c38bff; }
  .sn-sheet-links small { font-family: "Inter", "Segoe UI", sans-serif; font-size: 12px; font-weight: 500; color: #93a2ba; text-align: right; }
  .sn-sheet-foot { display: grid; gap: 10px; margin-top: 20px; }
  .sn-sheet-foot .sn-cta { justify-content: center; padding: 14px 18px; }
  .sn-sheet-foot .sn-cta .sn-long { display: inline; }
  .sn-sheet-foot .sn-cta .sn-short { display: none; }
  .sn-ghost {
    display: flex !important; justify-content: center; padding: 13px 18px; border-radius: 12px;
    border: 1px solid rgba(187, 201, 224, 0.24); color: #f5f7fb; font-weight: 600;
  }
}
@media (min-width: 1081px) { .sn-sheet { display: none !important; } }

@media (max-width: 640px) {
  header.sn { --sn-h: 60px; --sn-top-h: 42px; }
  .sn-strip { padding: 7px 16px; font-size: 12.5px; }
  .sn-top { padding: 0 var(--sn-gutter); }
  .sn-sides { flex: 1; margin-left: calc(var(--sn-gutter) * -1); margin-right: calc(var(--sn-gutter) * -1); }
  .sn-sides a { flex: 1; justify-content: center; padding: 0 8px; }
  .sn-top-right { display: none; }
  .sn-top-right:has(.sn-theme) { display: flex; }
  .sn-row { gap: 10px; }
  .sn-logo img { height: 25px !important; }
  .sn-row .sn-cta { padding: 9px 12px; font-size: 13px; border-radius: 10px; }
  .sn-row .sn-cta .sn-i { display: none; }
  .sn-burger { width: 40px; height: 40px; }
  html { scroll-padding-top: 156px; }
}
@media (max-width: 360px) {
  .sn-row .sn-cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  header.sn, .sn-menu a, .sn-sides a, .sn-common a, .sn-cta { transition: none; }
  html { scroll-behavior: auto; }
}

/* Type rule for every call to action on the public site (docs/design/TYPOGRAPHY.md).
   Buttons had drifted across Inter 600, 700, 800 and Plus Jakarta Sans 700 and
   800. They now read in one face at one weight, whatever page they sit on.
   Every public page loads this sheet, so the rule lives here once; !important
   because several landings set the weight in their own inline styles. */
.btn, .cta, .hero-btn, .hero-search-btn, .sn-cta, .hn-button, .hn-auth-button,
.hn-toolbar-link, .hn-job-card__action, .hn-refine__actions button, .pricing-card .btn {
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

/* Primary action colour (docs/design/TYPOGRAPHY.md). Every teal button, on
   every public page, wears the same brand gradient, dark ink and soft glow, so
   "Check my CV, free" and "Find your next role" are visibly the same kind of
   button. Size stays with the component; colour does not vary. */
.cta--primary, .btn-cyan, .hero-btn--primary, .hero-search-btn, .sn-cta, .hn-button--primary,
.hn-refine__actions button, .pricing-card.is-featured .btn {
  color: #061013 !important;
  background: linear-gradient(120deg, var(--rn-accent, #72dfcd), color-mix(in srgb, var(--rn-primary-tint, #7fe6d7) 86%, #fff)) !important;
  border-color: transparent !important;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--rn-accent, #72dfcd) 28%, transparent) !important;
}
.cta--primary:hover, .btn-cyan:hover, .hero-btn--primary:hover, .hero-search-btn:hover, .sn-cta:hover,
.hn-button--primary:hover, .hn-refine__actions button:hover, .pricing-card.is-featured .btn:hover {
  color: #061013 !important;
  box-shadow: 0 20px 48px color-mix(in srgb, var(--rn-accent, #72dfcd) 38%, transparent) !important;
}

/* Phones only (owner, 2026-10-01): the desktop stays exactly as it is, so
   every rule below sits behind a phone width. Small labels get a floor a
   phone can read and the links a thumb has to hit get a real target. The
   font floors use !important because each page sets these sizes in its own
   inline styles, which load after this sheet. */
@media (max-width: 760px) {
  /* The orbit's active label grew past the screen edge. */
  .hero-art .chip.is-active { scale: 1 !important; }
}
@media (max-width: 640px) {
  /* Readable floor for the small labels. */
  .fg-cap span, .fg-cap b, .fg-legend span, .fg-track span, .fg-clock-mid span, .fg-hello span, .fg-ring span,
  .hn-job-card__age, .hn-job-card__type, .hn-job-card__meta span,
  .pricing-badge, .cmp-lab,
  .hn-search-field label, .hn-sort label,
  .hn-metadata-tile__label, .hn-application-facts dt, .hn-related-card__meta span,
  .hn-preflight-role-card span, .hn-preflight-metric small, .hn-preflight-field label small,
  .hn-candidate-progress-copy, .q-category, .hn-candidate-nav__status { font-size: 12px !important; }

  /* Bigger hit areas without moving anything: padding out, margin back in. */
  .sn-logo, .sn-row .sn-signin, .hn-job-card__company-link, .hn-filter-reset { padding-block: 8px; margin-block: -8px; }
  header.sn .sn-top .sn-theme { width: 36px; height: 36px; flex-basis: 36px; }
  .fast .links a { padding-block: 6px; }
  .trust .xa a { padding-block: 6px; }
}

/* Phones (owner, 2026-10-01): the hero reads down the middle, like the cube
   under it. Eyebrow, heading, lede, buttons and ticks are centred and the two
   buttons stack at one width and one height. Every landing page's hero uses
   the same markup (.hero > .hero-copy); the job board has its own. */
@media (max-width: 760px) {
  .hero .hero-copy { align-items: center; text-align: center; }
  .hero .hero-copy > .eyebrow { align-self: center; }
  .hero .hero-copy > .hero-lede { margin-inline: auto; }
  .hero .hero-copy > .hero-ctas { flex-direction: column; flex-wrap: nowrap; align-items: stretch; align-self: center; width: 100%; max-width: 340px; }
  .hero .hero-copy > .hero-ctas > .btn { justify-content: center; width: 100%; min-height: 52px; margin: 0; box-sizing: border-box; }
  .hero .hero-copy > .ticks, .hero .hero-copy > .topics, .hero .hero-copy > .jr-meta { justify-content: center; }

  .hn-search-hero__content > .jb-eyebrow { display: flex; width: fit-content; margin-inline: auto; }
  .hn-search-hero__content > h1, .hn-search-hero__content > .hn-search-hero__copy { text-align: center; margin-inline: auto; }
  .hn-search-hero__content > .jb-ticks { justify-content: center; }
}