/* ==========================================================================
   CubeHire — Global UI Consistency & Responsiveness Layer
   --------------------------------------------------------------------------
   Loaded LAST (end of <body>) so it wins the cascade against the per-page
   <style> blocks that were ported from the original marketing site with
   inconsistent tokens, fonts, containers and spacing.

   Shared design language enforced here:
     Ink        #18222b  (brand charcoal — replaces #111/#1A1A1A/#231F20)
     Green      #01b648  (primary)   #16c357 (hover)
     Cream      #e8f5e9  (light-green surface)
     Font       Nunito   (brand font — also fixes the unbound --font-nunito
                          variable in the compiled Tailwind bundle)
     Container  1400px max, fluid padding on small screens
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BRAND TOKENS & TYPOGRAPHY
   -------------------------------------------------------------------------- */
:root {
  --font-nunito: 'Nunito', 'Nunito Fallback', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ch-ink: #18222b;
  --ch-green: #01b648;
  --ch-green-2: #16c357;
  --ch-cream: #e8f5e9;
}

/* The compiled Tailwind theme references var(--font-nunito) but never binds
   it to an element — define it so the whole public site resolves to the
   brand font instead of the browser default. */
html,
body {
  font-family: var(--font-nunito);
}

/* Unify page-level fonts & ink tokens on every custom-styled page */
.blog-page,
.kb-page,
.clients-page,
.network-page,
.explore-page,
.resource-page,
.contact-page,
.salary-page,
.salary-guide-page,
.dynamic-role-page,
.profile-page,
.join-page,
.faq-page {
  font-family: var(--font-nunito);
  --ink: #18222b;
  --black: #18222b;
  --text-dark: #18222b;
}

/* --------------------------------------------------------------------------
   2. GLOBAL GUARDS
   -------------------------------------------------------------------------- */
/* Fallback for browsers without `overflow: clip` — on html it keeps the
   network sidebar's position:sticky working. `clip` never creates a scroll
   container, so modern browsers keep sticky intact too. */
html,
body {
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

img,
video,
svg,
iframe {
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: 2px solid var(--ch-green);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. CONTAINER UNIFICATION — every page column now feels the same
   -------------------------------------------------------------------------- */
.kb-page .wrap,
.kb-page .featured,
.kb-page .cat-section,
.blog-page .blog-wrap,
.explore-page .exp-main,
.resource-page .res-main,
.profile-page .wrap,
.profile-page .hero-inner,
.salary-page .hero,
.salary-page .market,
.salary-page .cta-inner,
.salary-page .trust-stats,
.salary-page .guide,
.salary-page .faq,
.salary-guide-page .inside-inner,
.join-page .wrap,
.join-page .top-section,
.network-page .page-wrap {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* Fluid side padding on small screens where pages used rigid 40-60px gutters */
@media (max-width: 767px) {
  .explore-page .exp-main,
  .resource-page .res-main,
  .kb-page .wrap,
  .kb-page .featured,
  .kb-page .cat-section,
  .blog-page .blog-wrap,
  .profile-page .wrap,
  .profile-page .hero-inner,
  .salary-page .hero,
  .salary-page .market,
  .salary-page .cta-inner,
  .salary-page .trust-stats,
  .salary-page .guide,
  .salary-page .faq,
  .dynamic-role-page .wrap,
  .clients-page .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* --------------------------------------------------------------------------
   4. PRIMARY ACTIONS — one consistent CTA look (green pill, white text)
   -------------------------------------------------------------------------- */
.join-page .verify-btn,
.join-page .join-btn,
.join-page .register-btn,
.salary-page .btn-yellow,
.salary-page .cta-btn,
.salary-guide-page .btn-brand-lg,
.salary-guide-page .btn-submit,
.dynamic-role-page .btn-primary,
.dynamic-role-page .btn-dark,
.contact-page .cp-submit {
  background-color: var(--ch-green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 24px rgba(1, 182, 72, 0.25);
  transition: background-color 0.3s ease-out, transform 0.3s ease-out,
    box-shadow 0.3s ease-out;
}
.join-page .verify-btn:hover,
.join-page .join-btn:hover,
.join-page .register-btn:hover,
.salary-page .btn-yellow:hover,
.salary-page .cta-btn:hover,
.salary-guide-page .btn-brand-lg:hover,
.salary-guide-page .btn-submit:hover,
.dynamic-role-page .btn-primary:hover,
.dynamic-role-page .btn-dark:hover,
.contact-page .cp-submit:hover {
  background-color: var(--ch-green-2) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(1, 182, 72, 0.35);
}

/* Search buttons */
.blog-page .search-box button,
.kb-page .search-box button,
.salary-page .hero-search button,
.dynamic-role-page .search-box .search-btn {
  background-color: var(--ch-green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
}

/* Active tabs & filter pills — charcoal like the rest of the site */
.clients-page .tab.active {
  background-color: #18222b !important;
  border-color: #18222b !important;
  color: #fff !important;
}
.explore-page .exp-btn-active {
  background-color: #18222b !important;
  color: #fff !important;
  border-color: transparent !important;
}
.explore-page .exp-btn-outline:hover {
  border-color: var(--ch-green);
  color: var(--ch-green);
}
.resource-page .res-tab.active {
  background-color: #18222b !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   5. PER-PAGE BRAND ALIGNMENT
   -------------------------------------------------------------------------- */
/* --- Explore --- */
.explore-page {
  background-color: #fefefe;
}
.explore-page .exp-grid a:hover {
  color: var(--ch-green);
}
.explore-page .exp-search input:focus {
  border-color: var(--ch-green);
}

/* --- Network --- */
.network-page {
  background-color: #fefefe;
}
.network-page .page-wrap {
  padding: 24px;
}
.network-page .top-bar {
  padding: 34px 24px 18px;
}
.network-page .top-bar h1 {
  font-size: 26px;
}
.network-page .sidebar {
  width: 260px;
}
.network-page .card {
  border-radius: 20px;
}

/* --- Contact --- */
.contact-page .cp-right {
  background-color: var(--ch-cream);
  border-left-color: transparent;
}
.contact-page .cp-input {
  border-color: #ddd;
  border-radius: 12px;
}
.contact-page .cp-input:focus {
  border-color: var(--ch-green);
  box-shadow: 0 0 0 3px rgba(1, 182, 72, 0.12);
}

/* --- Salary tool --- */
.salary-page .hero {
  padding: 50px 60px 60px;
}
.salary-page .hero h1 {
  font-weight: 700;
}
.salary-page .card-india .label,
.salary-page .card-india .lowhigh div {
  color: #584f13;
}

/* --- Salary guide --- */
.salary-guide-page .form-field input:focus,
.salary-guide-page .form-field select:focus {
  border-color: var(--ch-green);
  box-shadow: 0 0 0 3px rgba(1, 182, 72, 0.12);
}

/* --- FAQ --- */
.faq-page .faq-wrap {
  max-width: 1000px;
}

/* --- Profile --- */
.profile-page .hero-stats {
  gap: 48px;
}

/* --- Dynamic role --- */
.dynamic-role-page {
  color: #18222b;
}
.dynamic-role-page .network-bar,
.dynamic-role-page .cta-banner {
  background-color: #18222b;
}
.dynamic-role-page .btn-dark {
  background-color: #18222b;
}

/* --- Join us (rewritten page, scoped under .join-page) --- */
.join-page {
  background-color: #fff;
}
.join-page .field-input:focus {
  border-color: var(--ch-green);
  box-shadow: 0 0 0 3px rgba(1, 182, 72, 0.12);
}

/* --------------------------------------------------------------------------
   6. FORM RHYTHM — consistent field spacing & focus states
   -------------------------------------------------------------------------- */
.contact-page .cp-form {
  gap: 18px;
}
.contact-page .cp-row {
  gap: 18px;
}
.join-page .field-input {
  border-radius: 10px;
  border-color: #ddd;
}
.join-page .field-input:focus,
.salary-page .hero-search input:focus,
.network-page .search-input:focus {
  border-color: var(--ch-green);
  box-shadow: 0 0 0 3px rgba(1, 182, 72, 0.12);
}

/* --------------------------------------------------------------------------
   7. CARD MICRO-INTERACTIONS (weightless hover, per design skill)
   -------------------------------------------------------------------------- */
.clients-page .logo-card,
.kb-page .art-card,
.network-page .card,
.dynamic-role-page .profile-tile,
.dynamic-role-page .trust-item,
.blog-page .blog-card {
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
.clients-page .logo-card:hover,
.kb-page .art-card:hover,
.network-page .card:hover,
.dynamic-role-page .profile-tile:hover,
.dynamic-role-page .trust-item:hover,
.blog-page .blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* --------------------------------------------------------------------------
   8. TESTIMONIAL MARQUEE — the animate-marquee utility was referenced in the
      templates but never defined in the compiled bundle. Provide it.
   -------------------------------------------------------------------------- */
@keyframes ch-marquee {
  to {
    transform: translateX(-50%);
  }
}
.animate-marquee {
  animation: ch-marquee 60s linear infinite;
  will-change: transform;
}
.animate-marquee:hover {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE BREAKPOINTS
   --------------------------------------------------------------------------
   NOTE: several rules below intentionally re-declare page-native breakpoints
   (e.g. faq 1100px, salary 960px, dynamic-role 1100px). Because this file
   loads last, these win the cascade and keep the fixes consistent even when
   the per-page styles change. The `!important` declarations in section 4
   exist only to beat inline/per-page styles — once the embedded <style>
   blocks are consolidated, they should be removed. */
/* Tablet */
@media (max-width: 1023px) {
  /* Knowledge-base cards: 3 → 2 columns before going to 1 */
  .kb-page .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Join-us journey & made-for grids: 4/3 → 2 */
  .join-page .journey-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .join-page .made-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Explore: 3 → 2 */
  .explore-page .exp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* FAQ hero decorations slide in below content instead of overlapping */
  .faq-page .brand-side,
  .faq-page .rating-stack {
    position: static;
    align-items: flex-start;
    margin: 26px 40px 0 0;
  }
  .faq-page .rating-stack {
    margin-top: 14px;
  }
  .faq-page .hero-content {
    padding-bottom: 40px;
  }
  /* Salary hero cards stack vertically instead of overlapping */
  .salary-page .hero-right {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .salary-page .card-usa,
  .salary-page .card-india {
    position: static;
    width: 100%;
    max-width: 420px;
  }
  .salary-page .market-right {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .salary-page .mv-card,
  .salary-page .mv-usa,
  .salary-page .mv-india,
  .salary-page .mv-loc,
  .salary-page .mv-beyond {
    position: static;
    width: 100%;
  }
  /* Dynamic-role hero decorations become a flow layout */
  .dynamic-role-page .hero-right {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
  }
  .dynamic-role-page .hero-right .tag {
    position: static;
    justify-self: start;
  }
  .dynamic-role-page .profile-card,
  .dynamic-role-page .interview-card,
  .dynamic-role-page .skills-card {
    position: static;
    width: 100%;
  }
  .dynamic-role-page .score-ring {
    position: static;
  }
}

/* Mobile */
@media (max-width: 639px) {
  .kb-page .card-grid,
  .join-page .journey-grid,
  .join-page .made-grid,
  .explore-page .exp-grid {
    grid-template-columns: 1fr;
  }
  .clients-page .logo-grid {
    grid-template-columns: 1fr;
  }
  .clients-page .hero h1 {
    font-size: 30px;
  }
  .salary-page .hero h1 {
    font-size: 30px;
  }
  .salary-guide-page .hero h1 {
    font-size: 32px;
  }
  .dynamic-role-page .hero-left h1 {
    font-size: 30px;
  }
  .resource-page .res-hero h1 {
    font-size: 1.75rem;
  }
  .explore-page .exp-header h1 {
    font-size: 1.75rem;
  }
  .contact-page .cp-left h1 {
    font-size: 2.5rem;
  }
  .contact-page .cp-row {
    flex-direction: column;
    gap: 0;
  }
  .contact-page .cp-input-group {
    min-width: 0;
  }
  .profile-page .hero-stats {
    flex-wrap: wrap;
    gap: 24px 32px;
  }
  .profile-page .hire-btn {
    position: static;
    margin-bottom: 14px;
  }
  .profile-page .vetted-cols,
  .profile-page .vetted-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .dynamic-role-page .hero-right {
    grid-template-columns: 1fr;
  }
  .network-page .page-wrap {
    padding: 16px;
  }
}

/* --------------------------------------------------------------------------
   10. SITE CHROME — full-width header & footer bars, compact brand logo
   (enforced here because this layer loads last, so every page stays consistent)
   -------------------------------------------------------------------------- */
/* Direct-child scoping so these only ever apply to the site chrome
   (nav & footer are direct children of the layout wrapper) and never
   to <nav>/<footer>/<img> elements inside page content (<main>). */
.min-h-screen.bg-brand-background > nav {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.min-h-screen.bg-brand-background > footer {
  width: 100%;
}
.min-h-screen.bg-brand-background > footer > div {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/*
 * Header, page content and footer share one measure.
 *
 * The bars themselves stay full-bleed so the footer's background still runs
 * edge to edge, but their CONTENT is capped at the same 1400px container every
 * section inside <main> uses. Previously the chrome ran the full viewport while
 * content was centred at 1400px, so on a wide screen the nav and footer sat
 * ~210px outside the page's own column on each side.
 *
 * Padding matches the page containers' `lg:px-8` (2rem) so the text edges line
 * up exactly, not just the container edges.
 */
.min-h-screen.bg-brand-background > nav > div,
.min-h-screen.bg-brand-background > footer > div > div,
.min-h-screen.bg-brand-background > footer > div > .flex {
  max-width: 1400px;
  margin-inline: auto;
  padding-left: clamp(1rem, 3vw, 2rem);
  padding-right: clamp(1rem, 3vw, 2rem);
}

/* The mobile dropdown is positioned against the full-width <nav>, so keep it
   inside the same measure rather than letting it span the whole viewport. */
.min-h-screen.bg-brand-background > nav #mobile-menu {
  max-width: 1400px;
  margin-inline: auto;
}
/* Compact logo — never lets the brand mark dominate the bar */
.min-h-screen.bg-brand-background > nav img,
.min-h-screen.bg-brand-background > footer img {
  height: 2rem;
  width: auto;
  max-width: 150px;
}
.min-h-screen.bg-brand-background > footer img {
  height: 2.5rem;
  max-width: 190px;
}

/* --------------------------------------------------------------------------
   11. ACCESSIBILITY — respect reduced motion
   -------------------------------------------------------------------------- */@media (prefers-reduced-motion: reduce) {
  .animate-marquee {
    animation: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   12. VERTICAL RHYTHM — consistent breathing room between sections
   --------------------------------------------------------------------------
   Pages ported from the original marketing site set their own ad-hoc padding,
   which is why bands sat flush against each other in places and left large
   dead gaps in others. These are floors, not overrides: a page that already
   sets a larger value keeps it.
   -------------------------------------------------------------------------- */
.ch-section,
main > section {
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

/* Never let a heading collide with the element above it. */
h1, h2, h3, h4 {
  text-wrap: balance;
}
h1 { line-height: 1.15; }
h2 { line-height: 1.2; }
h3, h4 { line-height: 1.3; }

p, li { text-wrap: pretty; }

/* Stop long unbroken strings (URLs, emails) blowing out their container. */
p, li, td, th, dd, dt, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   13. TOUCH TARGETS — WCAG 2.5.8 / platform minimum of 44x44
   --------------------------------------------------------------------------
   Applied only to coarse pointers so the desktop design keeps its compact
   density. Uses min-height plus centred content rather than padding, so it
   cannot reflow layouts that already size their controls.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  a[class*="btn"],
  button,
  input[type="submit"],
  input[type="button"],
  [role="button"],
  .nav-link,
  .mobile-dropdown-btn,
  nav a {
    min-height: 44px;
  }

  button,
  input[type="submit"],
  input[type="button"],
  [role="button"],
  a[class*="btn"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Icon-only controls need width as well as height. */
  button:not(:has(> :not(svg):not(i))) {
    min-width: 44px;
  }

  /* Keep adjacent targets from merging into one fat finger area. */
  nav li + li,
  .mobile-dropdown-content > * + * {
    margin-top: 4px;
  }

  input,
  select,
  textarea {
    min-height: 44px;
    /* Under 16px iOS Safari zooms the whole page on focus. */
    font-size: max(16px, 1rem);
  }
}

/* --------------------------------------------------------------------------
   14. MOTION — smooth scrolling and scroll-reveal
   --------------------------------------------------------------------------
   Reveals animate opacity and transform only; animating layout properties
   (width/height/top) forces reflow on every frame and is what makes scroll
   animation feel cheap. scroll-padding-top keeps anchor targets clear of the
   sticky header instead of hiding them underneath it.
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

/* Direction variants */
[data-reveal="left"]  { transform: translate3d(-24px, 0, 0); }
[data-reveal="right"] { transform: translate3d(24px, 0, 0); }
[data-reveal="fade"]  { transform: none; }
[data-reveal="zoom"]  { transform: scale(0.96); }
[data-reveal="left"].is-revealed,
[data-reveal="right"].is-revealed,
[data-reveal="zoom"].is-revealed { transform: none; }

/* Stagger children of a revealed group. */
[data-reveal-group] > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-reveal-group].is-revealed > * {
  opacity: 1;
  transform: none;
}
[data-reveal-group].is-revealed > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-group].is-revealed > *:nth-child(2) { transition-delay: 70ms; }
[data-reveal-group].is-revealed > *:nth-child(3) { transition-delay: 140ms; }
[data-reveal-group].is-revealed > *:nth-child(4) { transition-delay: 210ms; }
[data-reveal-group].is-revealed > *:nth-child(5) { transition-delay: 280ms; }
[data-reveal-group].is-revealed > *:nth-child(6) { transition-delay: 350ms; }
[data-reveal-group].is-revealed > *:nth-child(n+7) { transition-delay: 420ms; }

/* Page-load fade.
   Deliberately NOT applied to <body> with fill-mode: both — if that animation
   never runs (prerender, background tab, a browser that skips it) the entire
   page is left at opacity 0 and the site looks blank. The class is added by
   the reveal script only once it is safe, so the default state is visible. */
.ch-page-in { animation: ch-page-in 0.4s ease-out; }
@keyframes ch-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   15. REDUCED MOTION — must stay last so it wins over everything above
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Content must never be left invisible when motion is disabled. */
  [data-reveal],
  [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   16. AUTH PANEL — signup/signin tabs on /join-us
   -------------------------------------------------------------------------- */
.join-page .auth-tabs {
  display: flex;
  gap: 6px;
  padding: 5px;
  margin: 0 0 22px;
  background: #f1f4f2;
  border-radius: 999px;
}
.join-page .auth-tab {
  flex: 1;
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #5b6b62;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.join-page .auth-tab:hover { color: var(--ch-ink); }
.join-page .auth-tab.is-active {
  background: #fff;
  color: var(--ch-ink);
  box-shadow: 0 1px 3px rgba(24, 34, 43, 0.12);
}

.join-page .auth-panel.is-hidden { display: none; }

.join-page .auth-note {
  margin-bottom: 18px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.join-page .auth-note--ok    { background: #e9f7ef; border: 1px solid #bfe6cf; color: #12683a; }
.join-page .auth-note--info  { background: #eaf2fd; border: 1px solid #c3dbf7; color: #1d4e89; }
.join-page .auth-note--error { background: #fdecec; border: 1px solid #f6c9c6; color: #a02620; }

.join-page .field-label {
  display: block;
  margin-bottom: 6px;
}

.join-page .field-hint {
  font-size: 11px;
  color: var(--gray-500, #6b7b73);
  margin-bottom: 18px;
  line-height: 1.5;
}

.join-page .auth-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 18px;
  font-size: 13px;
  font-weight: 600;
  color: #5b6b62;
  cursor: pointer;
}
.join-page .auth-remember input { width: 16px; height: 16px; min-height: 0; accent-color: var(--ch-green); }

.join-page .auth-switch {
  margin-top: 16px;
  font-size: 13px;
  color: #5b6b62;
  text-align: center;
}
.join-page .auth-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 800;
  color: var(--ch-green);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.join-page .auth-link:hover { color: var(--ch-green-2); }

/* The auth column must never be cramped on a phone. */
@media (max-width: 639px) {
  .join-page .auth-tab { font-size: 12px; padding: 10px 12px; }
  .join-page .signup-col { padding-inline: 4px; }
}

/* ==========================================================================
   17. BUTTON SYSTEM — one geometry for every call to action
   --------------------------------------------------------------------------
   The site accumulated a dozen bespoke button classes (.exp-btn, .ve-btn,
   .verify-btn, .hire-btn, .btn-primary, .ps-tb-btn, .search-btn …), each with
   its own height, padding and corner radius. That is why no two buttons on a
   page matched.

   This normalises SHAPE, SIZE, WEIGHT and INTERACTION only — each button keeps
   whatever brand colour its own stylesheet gives it, so nothing changes meaning.
   ========================================================================== */
.btn-primary,
.verify-btn,
.hire-btn,
.exp-btn,
.exp-btn-outline,
.ve-btn,
.ve-btn-save,
.ve-btn-ghost,
.ve-btn-exit,
.ps-tb-btn,
.ps-button,
.search-btn,
.res-filter-btn,
.add-item-btn,
.video-screening-btn,
.cta-btn,
.apply-filters-btn,
button.verify-btn,
a.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 46px;
  padding: 12px 26px;
  border-radius: 999px;

  font-family: var(--font-nunito);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
              box-shadow 0.18s ease, transform 0.18s ease;
}

/* Lift on hover, settle on press — same feedback everywhere. */
.btn-primary:hover,
.verify-btn:hover,
.hire-btn:hover,
.exp-btn:hover,
.ve-btn:hover,
.ps-tb-btn:hover,
.cta-btn:hover,
.apply-filters-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(1, 182, 72, 0.18);
}
.btn-primary:active,
.verify-btn:active,
.hire-btn:active,
.exp-btn:active,
.ve-btn:active,
.ps-tb-btn:active,
.cta-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-primary:disabled,
.verify-btn:disabled,
.exp-btn:disabled,
.ve-btn:disabled,
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Header calls to action: same pill as the rest of the site. */
nav a[class*="bg-brand-green"],
nav a[class*="bg-brand-charcoal"],
nav a[class*="bg-gray-900"] {
  border-radius: 999px !important;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 24px;
  font-weight: 800;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
nav a[class*="bg-brand-green"]:hover,
nav a[class*="bg-brand-charcoal"]:hover { transform: translateY(-1px); }

/* Tailwind-built CTAs elsewhere in the page body. */
main a[class*="rounded-lg"][class*="bg-brand-green"],
main a[class*="rounded-full"][class*="bg-brand-green"],
main button[class*="bg-brand-green"] {
  border-radius: 999px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Small/secondary buttons keep the pill but sit tighter. */
.remove-item-btn,
.tab-btn,
.ve-file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  transition: background-color 0.18s ease, color 0.18s ease;
}

/* ==========================================================================
   18. HEADER — breathing room above and below the bar
   ========================================================================== */
body nav.w-full {
  padding-top: 26px;
  padding-bottom: 26px;
}
@media (max-width: 767px) {
  body nav.w-full {
    padding-top: 16px;
    padding-bottom: 16px;
  }
}

/* The first band must not butt straight up against the header. */
body main > *:first-child {
  margin-top: 8px;
}

/* ==========================================================================
   19. SECTION RHYTHM — stop bands colliding or floating apart
   --------------------------------------------------------------------------
   Scoped under body so it outranks the per-page selectors these templates
   carry, which is why the earlier `main > section` rule was being ignored.
   ========================================================================== */
body main > section,
body main > div > section,
body .ch-section {
  padding-block: clamp(48px, 5vw, 80px);
}

/* A section that already paints a background needs its padding respected,
   never collapsed by a child's negative margin. */
body main > section > *:first-child { margin-top: 0; }
body main > section > *:last-child { margin-bottom: 0; }

/* Cards were being clipped at the bottom of their band. */
body main section .grid > *,
body main section [class*="grid-cols"] > * {
  min-width: 0;      /* let grid children shrink instead of overflowing */
}

/* Consistent gap for card grids that had none. */
body main section .grid:not([class*="gap-"]) {
  gap: 24px;
}

/* ==========================================================================
   20. SHARED FAQ COMPONENT (template-parts/faq.blade.php)
   ========================================================================== */
.ch-faq {
  width: 100%;
  padding-block: clamp(48px, 5vw, 80px);
}
.ch-faq__inner {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}
.ch-faq__title {
  margin: 0 0 clamp(28px, 3vw, 44px);
  text-align: center;
  font-family: var(--font-nunito);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 800;
  color: var(--ch-ink);
  letter-spacing: -0.01em;
}
.ch-faq__panel {
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(20px, 3vw, 44px);
  background: #fff;
  border-radius: 32px;
}

/* Ask anything */
.ch-faq__ask {
  margin-bottom: 16px;
  border: 1px solid #e6eae8;
  border-radius: 14px;
  overflow: hidden;
}
.ch-faq__ask-head {
  padding: 16px 22px;
  border-bottom: 1px solid #f0f2f1;
}
.ch-faq__ask-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ch-ink);
}
.ch-faq__ask-body { position: relative; padding: 18px 22px 22px; }
.ch-faq__ask-input {
  width: 100%;
  padding: 10px 36px 10px 0;
  border: 0;
  border-bottom: 1px solid #e6eae8;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--ch-ink);
}
.ch-faq__ask-input::placeholder { color: #9aa8a1; }
.ch-faq__ask-input:focus { outline: none; border-bottom-color: var(--ch-green); }
.ch-faq__ask-send {
  position: absolute;
  right: 22px;
  bottom: 30px;
  color: #c7d0cb;
  cursor: pointer;
  transition: color 0.18s ease;
}
.ch-faq__ask-send:hover { color: var(--ch-green); }

/* Accordion */
.ch-faq__list { display: flex; flex-direction: column; gap: 14px; }
.ch-faq__item {
  border: 1px solid #e6eae8;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ch-faq__item:hover { border-color: #cfe6d8; }
.ch-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 56px;
  padding: 16px 22px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ch-ink);
  text-align: left;
  cursor: pointer;
}
.ch-faq__chevron {
  flex-shrink: 0;
  color: #6b7b73;
  transition: transform 0.22s ease;
}
.ch-faq__q[aria-expanded="true"] .ch-faq__chevron { transform: rotate(180deg); }
.ch-faq__q[aria-expanded="true"] { color: var(--ch-green); }
.ch-faq__a-inner {
  padding: 0 22px 20px;
  font-size: 14px;
  line-height: 1.7;
  color: #55635c;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 639px) {
  .ch-faq__panel { border-radius: 22px; }
  .ch-faq__q { font-size: 13.5px; padding: 14px 16px; }
  .ch-faq__a-inner { padding: 0 16px 18px; }
}

/* --------------------------------------------------------------------------
   17b. TAILWIND-BUILT CTAs — the rest of the buttons on the site
   --------------------------------------------------------------------------
   Most page CTAs are composed from utility classes rather than a button class,
   so they escaped the normalisation above and shipped at 40px, 41px, 46px and
   52px tall with three different font sizes. Solid utility pills are pulled
   onto the same 46px scale. Restricted to <a>/<button> so tags and chips
   (which are spans) keep their own size.
   -------------------------------------------------------------------------- */
body main a[class*="rounded-full"][class*="px-"],
body main button[class*="rounded-full"][class*="px-"],
body main a[class*="rounded-xl"][class*="bg-brand"],
body main button[class*="rounded-xl"][class*="bg-brand"],
body nav a[class*="rounded"][class*="px-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding-block: 12px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
body main a[class*="rounded-full"][class*="px-"]:hover,
body main button[class*="rounded-full"][class*="px-"]:hover {
  transform: translateY(-1px);
}

/* Full-width buttons keep their width but share the height. */
body main a[class*="w-full"][class*="rounded-full"],
body main button[class*="w-full"][class*="rounded-full"] {
  width: 100%;
}

/* ==========================================================================
   21. GROWTH CHART (template-parts/about/numbers.blade.php)
   --------------------------------------------------------------------------
   The bar sits in a flex-1 track so its percentage height has something
   definite to resolve against and grows up from the baseline.
   ========================================================================== */
.ch-chart {
  display: flex;
  gap: 12px;
  min-height: 280px;
  padding-top: 12px;
}
.ch-chart__axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  /* Matches the label row height at the bottom of each column so ticks
     align with the gridlines rather than floating over the bars. */
  padding-bottom: 30px;
  font-size: 11px;
  font-weight: 700;
  color: #9aa8a1;
  text-align: right;
  min-width: 38px;
}
.ch-chart__axis span { line-height: 1; transform: translateY(-50%); }
.ch-chart__axis span:first-child { transform: none; }
.ch-chart__axis span:last-child { transform: translateY(-100%); }

.ch-chart__plot { position: relative; flex: 1; min-width: 0; }

.ch-chart__grid {
  position: absolute;
  inset: 0 0 30px 0;      /* stop above the year labels */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.ch-chart__grid span {
  display: block;
  height: 1px;
  border-bottom: 1px dashed rgba(24, 34, 43, 0.10);
}

.ch-chart__bars {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  gap: clamp(6px, 1.4vw, 18px);
  height: 100%;
}
.ch-chart__col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
/* The track is the definite-height box the bar measures itself against. */
.ch-chart__track {
  flex: 1;
  display: flex;
  align-items: flex-end;
}
.ch-chart__bar {
  width: 100%;
  height: var(--bar-h, 0%);
  border-radius: 8px 8px 2px 2px;
  box-shadow: 0 8px 18px rgba(15, 92, 38, 0.14);
  transform-origin: bottom center;
  transition: transform 0.35s ease-out, filter 0.3s ease-out;
}
.ch-chart__bar:hover { filter: brightness(1.06); }
.ch-chart__label {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #55635c;
}

/* Bars grow up from the baseline as the chart scrolls into view. */
[data-reveal] .ch-chart__bar,
[data-reveal-group] .ch-chart__bar { transform: scaleY(0); }
.is-revealed .ch-chart__bar { transform: scaleY(1); }
.ch-chart__col:nth-child(1) .ch-chart__bar { transition-delay: 0ms; }
.ch-chart__col:nth-child(2) .ch-chart__bar { transition-delay: 60ms; }
.ch-chart__col:nth-child(3) .ch-chart__bar { transition-delay: 120ms; }
.ch-chart__col:nth-child(4) .ch-chart__bar { transition-delay: 180ms; }
.ch-chart__col:nth-child(5) .ch-chart__bar { transition-delay: 240ms; }
.ch-chart__col:nth-child(6) .ch-chart__bar { transition-delay: 300ms; }

@media (max-width: 480px) {
  .ch-chart { min-height: 230px; }
  .ch-chart__axis { font-size: 10px; min-width: 32px; }
  .ch-chart__label { font-size: 11px; }
}

/* ==========================================================================
   22. SEARCH BARS — one pill input + circular green action, site-wide
   --------------------------------------------------------------------------
   Every search on the site was built differently: some had the icon button
   overflowing the input's rounded corner, some had no button at all. This
   normalises the shell, the field and the action into one component.
   ========================================================================== */
.ch-search,
.search-box,
.exp-search,
form.ch-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  padding: 6px 6px 6px 22px;
  background: #fff;
  border: 1px solid rgba(24, 34, 43, 0.08);
  border-radius: 999px;
  /* Weightless: soft, diffused lift rather than a hard border. */
  box-shadow: 0 12px 28px rgba(15, 43, 29, 0.10);
  transition: box-shadow 0.3s ease-out, border-color 0.3s ease-out;
}
.ch-search:focus-within,
.search-box:focus-within,
.exp-search:focus-within {
  border-color: rgba(1, 182, 72, 0.45);
  box-shadow: 0 16px 34px rgba(15, 43, 29, 0.14);
}

.ch-search input[type="text"],
.ch-search input[type="search"],
.search-box input,
.exp-search input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-nunito);
  font-size: 15px;
  color: var(--ch-ink);
}
.ch-search input::placeholder,
.search-box input::placeholder,
.exp-search input::placeholder { color: #9aa8a1; }
.ch-search input:focus,
.search-box input:focus,
.exp-search input:focus { outline: none; }

/* Circular green action — never clipped by the pill. */
.ch-search button,
.ch-search .search-btn,
.search-box button,
.search-box .search-btn,
.exp-search button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ch-green);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease-out, transform 0.3s ease-out;
}
.ch-search button:hover,
.search-box button:hover,
.exp-search button:hover {
  background: var(--ch-green-2);
  transform: scale(1.05);
}
.ch-search button svg,
.search-box button svg,
.exp-search button svg { width: 18px; height: 18px; }

/* Search sitting on a dark band keeps the same shape. */
.ch-search--on-dark { background: #f3f4ee; border-color: transparent; }

@media (max-width: 480px) {
  .ch-search { padding-left: 16px; max-width: none; }
  .ch-search input { font-size: 14px; }
}

/* --------------------------------------------------------------------------
   22b. SEARCH SHELL — beat the per-page selectors
   --------------------------------------------------------------------------
   Pages scope their own rules (.search-hero .search-box, .hero .search-box …)
   which outrank a bare .search-box, so the pill shape was being lost. These
   raise specificity rather than reaching for !important everywhere.
   -------------------------------------------------------------------------- */
body .search-box,
body .exp-search,
body .search-hero .search-box,
body .hero .search-box,
body .exp-main .exp-search {
  border-radius: 999px;
  padding: 6px 6px 6px 22px;
  gap: 8px;
  overflow: visible;
}
body .search-box input,
body .exp-search input,
body .search-hero .search-box input,
body .hero .search-box input {
  min-height: 44px;
  font-size: 15px;
  border: 0;
  background: transparent;
}
body .search-box button,
body .search-box .search-btn,
body .exp-search button,
body .search-hero .search-box button,
body .hero .search-box button {
  width: 46px;
  height: 46px;
  min-width: 46px;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ==========================================================================
   23. HEADER ACCOUNT MENU (template-parts/user-menu.blade.php)
   --------------------------------------------------------------------------
   One shell for admin/recruiter/candidate. Replaces three hand-built menus
   that each had different padding, colours and (for admin) an emoji shield
   that rendered blue on Windows against a green circle.
   ========================================================================== */
.ch-um { position: relative; }

.ch-um__trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 5px 14px 5px 6px;
  border: 1px solid rgba(24, 34, 43, 0.10);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-nunito);
  cursor: pointer;
  transition: border-color 0.3s ease-out, box-shadow 0.3s ease-out, transform 0.3s ease-out;
}
.ch-um__trigger:hover {
  border-color: rgba(1, 182, 72, 0.35);
  box-shadow: 0 8px 20px rgba(15, 43, 29, 0.10);
  transform: translateY(-1px);
}
.ch-um__trigger:focus-visible { outline: 2px solid var(--ch-green); outline-offset: 2px; }

.ch-um__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.ch-um__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.ch-um__name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
  color: var(--ch-ink);
  line-height: 1.1;
}
.ch-um__chip {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
}
.ch-um__chip--admin     { background: #18222b; color: #7ee2a8; }
.ch-um__chip--recruiter { background: #e7edfd; color: #1d4ed8; }
.ch-um__chip--candidate { background: #e3f5e8; color: #0f5c26; }

.ch-um__caret { color: #8a978f; flex-shrink: 0; transition: transform 0.3s ease-out; }
.ch-um__trigger[aria-expanded="true"] .ch-um__caret { transform: rotate(180deg); }

/* Panel */
.ch-um__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 9999;
  display: none;
  width: 244px;
  padding: 6px;
  background: #fff;
  border: 1px solid rgba(24, 34, 43, 0.08);
  border-radius: 16px;
  box-shadow: 0 20px 44px rgba(15, 43, 29, 0.16);
}
.ch-um__panel.is-open,
.ch-um:hover .ch-um__panel { display: block; }

.ch-um__head { padding: 10px 12px 12px; border-bottom: 1px solid #f0f2f1; margin-bottom: 6px; }
.ch-um__head-name  { margin: 0; font-size: 13px; font-weight: 800; color: var(--ch-ink); }
.ch-um__head-email { margin: 2px 0 0; font-size: 11.5px; color: #7d8b83; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ch-um__link,
.ch-um__logout {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #3d4a43;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease-out, color 0.3s ease-out;
}
.ch-um__link:hover { background: #f2faf5; color: var(--ch-ink); }
.ch-um__link.is-accent { color: var(--ch-green); }
.ch-um__link.is-accent:hover { background: #e9f7ef; }
.ch-um__link svg, .ch-um__logout svg { flex-shrink: 0; opacity: 0.75; }

.ch-um__sep { height: 1px; background: #f0f2f1; margin: 6px 0; }

.ch-um__logout { color: #c0392b; }
.ch-um__logout:hover { background: #fdecec; }

@media (max-width: 1023px) {
  .ch-um__name { max-width: 96px; }
}
