/* ==========================================================================
   CubeHire — Inner-page bridge
   --------------------------------------------------------------------------
   Load order:
     main.css -> fixes.css -> cubehire-ui.css -> cubehire-components.css
       -> cubehire-pages.css   (this file, last)

   WHY THIS FILE EXISTS
   The marketing pages (roles, pricing, network, resources, explore, blog,
   knowledge base, clients, contact, salary tools, join us) were ported from a
   different site. Each arrived with its own <style> block, its own tokens and
   its own names for the same thing — nine different heroes, six card styles,
   eleven button treatments. Rewriting the markup of ~6,000 lines of Blade to
   use .ch-* components would be a week of churn and a lot of risk for a purely
   visual result.

   So the shape is bridged instead: the legacy class names are pointed at the
   design-system tokens, and every page ends up with the same ground, the same
   hero, the same card, the same button, the same input and the same motion.
   Markup is untouched; only presentation moves.

   Grouped by COMPONENT rather than by page on purpose — the pages turned out
   to share a structural vocabulary (.hero, .card, .search-box, .pagination,
   .cta-banner, .btn-primary…), just scoped under different wrappers. One rule
   per component therefore fixes it everywhere at once.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. PAGE SCOPES
   Every ported page wrapper, in one list. Referenced throughout.

   The `body` prefix is load-bearing. Each page carries its own inline <style>
   in the document body, which the browser parses AFTER this linked sheet — so
   a bare `.network-page { background: … }` here ties on specificity and loses
   on source order. The extra element selector wins the tie without turning the
   whole block into !important.
   -------------------------------------------------------------------------- */
body .explore-page,
body .network-page,
body .resource-page,
body .dynamic-role-page,
body .kb-page,
body .blog-page,
body .clients-page,
body .contact-page,
body .salary-page,
body .salary-guide-page,
body .join-page,
body .faq-page,
body .profile-page {
  font-family: var(--font-nunito);
  background: var(--ch-mist);
  color: var(--ch-t1);
  --ink: var(--ch-t1);
  --black: var(--ch-t1);
  --text-dark: var(--ch-t1);
  --brand-green: var(--ch-green);
  --green: var(--ch-green);
}

/* Ported pages set their own body copy sizes from 12px upward. One scale. */
body .explore-page,
body .network-page,
body .resource-page,
body .dynamic-role-page,
body .kb-page,
body .blog-page,
body .clients-page,
body .contact-page,
body .salary-page,
body .salary-guide-page,
body .join-page {
  font-size: 15px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   1. HEROES
   Nine bespoke heroes become one: a rounded panel on the mist ground with a
   soft green wash, a hairline border and the design system's type scale.
   -------------------------------------------------------------------------- */
/* `body` prefix: several pages set a narrower max-width on their own hero in
   their inline <style>, which ties with this rule and wins on source order —
   join-us came in 100px narrower a side, the salary tool 80px. */
body .dynamic-role-page > .hero,
body .blog-page .hero,
body .clients-page .hero,
body .salary-page .hero,
body .salary-guide-page .hero,
body .resource-page .res-hero,
body .contact-page .cp-hero,
body .explore-page .exp-header,
body .kb-page .hero,
body .kb-page .search-hero,
body .join-page .top-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: clamp(16px, 2.5vw, 32px) auto 0;
  /* 1480px is the container's OUTER width; the content inside it starts one
     gutter in. A panel sized to the full 1480 therefore overhangs the columns
     beneath it by 40px a side. Subtracting the gutters lines the band's edge
     up with the content — and with the logo and the header's CTA. */
  max-width: calc(1480px - (2 * var(--ch-gutter)));
  width: calc(100% - (2 * var(--ch-gutter)));
  border-radius: var(--ch-r-2xl);
  border: 1px solid rgba(1, 182, 72, 0.14);
  background:
    radial-gradient(ellipse 60% 90% at 88% 6%, rgba(1, 182, 72, .12), transparent 62%),
    linear-gradient(150deg, #f4fdf7 0%, #ffffff 55%, #f2f7f4 100%) !important;
  box-shadow: var(--ch-lift-2);
  padding: clamp(32px, 6vw, 76px) clamp(20px, 5vw, 64px) !important;
  color: var(--ch-t1);
}

/* Decorative blobs the ported heroes shipped with — they were sized for a
   different layout and now poke out of the rounded panel. */
.faq-page .blob,
.salary-guide-page .deco-circles,
.join-page .deco-circles { display: none; }

/* Hero headings, wherever they live. */
.dynamic-role-page .hero h1,
.blog-page .hero h1,
.clients-page .hero h1,
.salary-page .hero h1,
.salary-guide-page .hero h1,
.resource-page .res-hero h1,
.contact-page .cp-hero h1,
.explore-page .exp-header h1,
.kb-page .hero h1,
.kb-page .search-hero h1,
.join-page .top-section h1,
.network-page .top-bar h1 {
  font-size: clamp(30px, 5vw, 54px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.03em;
  font-weight: 800;
  color: var(--ch-t1) !important;
  margin: 0 0 14px;
}

.dynamic-role-page .hero p,
.blog-page .hero p,
.clients-page .hero p,
.salary-page .hero p,
.salary-guide-page .hero p,
.resource-page .res-hero p,
.contact-page .cp-hero p,
.explore-page .exp-header p,
.kb-page .hero p,
.join-page .top-section > p {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.65;
  font-weight: 500;
  color: var(--ch-t2);
  max-width: 62ch;
}

/* Network's top bar is its hero. */
.network-page .top-bar {
  border-radius: var(--ch-r-2xl);
  background: linear-gradient(150deg, #f4fdf7 0%, #ffffff 60%);
  border: 1px solid rgba(1, 182, 72, .14);
  box-shadow: var(--ch-lift-1);
  padding: clamp(24px, 4vw, 40px) clamp(18px, 3vw, 32px) !important;
  margin-bottom: clamp(18px, 2.5vw, 28px);
}

/* --------------------------------------------------------------------------
   2. SECTION HEADINGS
   -------------------------------------------------------------------------- */
.explore-page .exp-section-title,
.kb-page .cat-section h2,
.clients-page .logo-section h2,
.salary-guide-page .inside-content h2,
.salary-guide-page .form-heading h2,
.resource-page .res-content h2,
.dynamic-role-page .below-banner h3,
.join-page .journey h2,
.salary-page .market h2 {
  font-size: clamp(24px, 3.4vw, 38px) !important;
  line-height: 1.12;
  letter-spacing: -.025em;
  font-weight: 800;
  color: var(--ch-t1) !important;
}

/* --------------------------------------------------------------------------
   3. CARDS
   Every card surface on every page: white, hairline, one radius, one shadow,
   and the same lift on hover. This is the single biggest consistency win.
   -------------------------------------------------------------------------- */
.network-page .card,
.blog-page .blog-card,
.blog-page .quote-card,
.kb-page .art-card,
.kb-page .featured,
.resource-page .res-card,
.resource-page .res-mini-card,
.resource-page .res-podcast,
.explore-page .exp-comp-card,
.explore-page .exp-test-card,
.clients-page .logo-card,
.dynamic-role-page .case-card,
.contact-page .cp-accordion-item,
.join-page .hero-bottom-card,
.join-page .hero-top-badge,
.salary-page .card-usa,
.salary-page .card-india,
.salary-guide-page .form-section {
  background: #fff !important;
  border: 1px solid var(--ch-line) !important;
  border-radius: var(--ch-r-lg) !important;
  box-shadow: var(--ch-lift-1) !important;
  transition: transform var(--ch-base) var(--ch-ease-out),
              box-shadow var(--ch-base) var(--ch-ease-out),
              border-color var(--ch-base) var(--ch-ease-out);
}

.network-page .card:hover,
.blog-page .blog-card:hover,
.kb-page .art-card:hover,
.resource-page .res-card:hover,
.resource-page .res-mini-card:hover,
.explore-page .exp-comp-card:hover,
.explore-page .exp-test-card:hover,
.clients-page .logo-card:hover,
.dynamic-role-page .case-card:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: var(--ch-lift-3) !important;
  border-color: rgba(1, 182, 72, .35) !important;
}

/* Card media corners follow the card radius. */
.blog-page .blog-thumb,
.kb-page .art-thumb,
.kb-page .featured-thumb,
.resource-page .res-card-image,
.resource-page .res-mini-image {
  border-radius: var(--ch-r-md) var(--ch-r-md) 0 0;
  overflow: hidden;
}

/* Titles inside cards. */
.blog-page .blog-title,
.kb-page .art-title,
.kb-page .featured-title,
.resource-page .res-card h3,
.explore-page .exp-comp-name,
.network-page .card-name,
.dynamic-role-page .case-card h3 {
  font-size: clamp(15px, 1.3vw, 17px) !important;
  font-weight: 800 !important;
  letter-spacing: -.015em;
  color: var(--ch-t1) !important;
  line-height: 1.35;
}

/* Supporting copy inside cards. */
.blog-page .blog-meta,
.kb-page .art-meta,
.resource-page .res-card p,
.explore-page .exp-comp-desc,
.network-page .card-desc,
.network-page .card-role,
.dynamic-role-page .case-body p {
  font-size: 13.5px !important;
  line-height: 1.65;
  color: var(--ch-t2) !important;
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   Every call to action on every page onto the same pill, weight and hover.
   -------------------------------------------------------------------------- */
.dynamic-role-page .btn-primary,
.dynamic-role-page .btn-dark,
.dynamic-role-page .btn-mini,
.salary-page .cta-btn,
.salary-page .btn-yellow,
.salary-guide-page .btn-brand-lg,
.salary-guide-page .btn-submit,
.join-page .join-btn,
.join-page .register-btn,
.join-page .verify-btn,
.contact-page .cp-submit,
.network-page .apply-btn,
.network-page .profile-btn,
.network-page .interview-btn,
.resource-page .res-load-more,
.blog-page .search-box button,
.kb-page .search-box button,
.salary-page .hero-search button,
.dynamic-role-page .faq-search button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px !important;
  border: 1px solid transparent !important;
  border-radius: var(--ch-r-pill) !important;
  font-family: inherit !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: linear-gradient(135deg, var(--ch-green) 0%, var(--ch-green-2) 100%) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(1, 182, 72, .3), 0 12px 28px -10px rgba(1, 182, 72, .65) !important;
  transition: transform var(--ch-fast) var(--ch-ease-out),
              box-shadow var(--ch-base) var(--ch-ease-out),
              background-color var(--ch-base) var(--ch-ease-out) !important;
}
.dynamic-role-page .btn-primary:hover,
.dynamic-role-page .btn-dark:hover,
.dynamic-role-page .btn-mini:hover,
.salary-page .cta-btn:hover,
.salary-page .btn-yellow:hover,
.salary-guide-page .btn-brand-lg:hover,
.salary-guide-page .btn-submit:hover,
.join-page .join-btn:hover,
.join-page .register-btn:hover,
.join-page .verify-btn:hover,
.contact-page .cp-submit:hover,
.network-page .apply-btn:hover,
.network-page .profile-btn:hover,
.network-page .interview-btn:hover,
.resource-page .res-load-more:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 2px 4px rgba(1, 182, 72, .3), 0 20px 44px -12px rgba(1, 182, 72, .8) !important;
}

/* Secondary / outline actions. */
.dynamic-role-page .btn-outline,
.network-page .expand-btn,
.network-page .clear-all,
.resource-page .res-filter-btn,
.explore-page .exp-btn-outline,
.blog-page .tab-nav a,
.clients-page .tab,
.kb-page .cat-nav a {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 10px 20px !important;
  border-radius: var(--ch-r-pill) !important;
  border: 1px solid var(--ch-line) !important;
  background: #fff !important;
  color: var(--ch-t1) !important;
  font-family: inherit;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--ch-lift-1);
  transition: transform var(--ch-fast) var(--ch-ease-out),
              border-color var(--ch-base) var(--ch-ease),
              color var(--ch-base) var(--ch-ease),
              box-shadow var(--ch-base) var(--ch-ease);
}
.dynamic-role-page .btn-outline:hover,
.network-page .expand-btn:hover,
.network-page .clear-all:hover,
.resource-page .res-filter-btn:hover,
.explore-page .exp-btn-outline:hover,
.blog-page .tab-nav a:hover,
.clients-page .tab:hover,
.kb-page .cat-nav a:hover {
  border-color: var(--ch-green) !important;
  color: var(--ch-green-ink) !important;
  transform: translate3d(0, -2px, 0);
  box-shadow: var(--ch-lift-2);
}

/* Active state for filter pills — charcoal, matching the rest of the site. */
.clients-page .tab.active,
.explore-page .exp-btn-active,
.resource-page .res-filter-btn.active,
.resource-page .res-tab.active,
.blog-page .tab-nav a.active,
.kb-page .cat-nav a.active {
  background: var(--ch-ink) !important;
  border-color: var(--ch-ink) !important;
  color: #fff !important;
  box-shadow: var(--ch-lift-2);
}

/* --------------------------------------------------------------------------
   5. FORM CONTROLS
   -------------------------------------------------------------------------- */
.join-page .field-input,
.contact-page .cp-input,
.salary-guide-page .form-field input,
.salary-guide-page .form-field select,
.blog-page .search-box input,
.kb-page .search-box input,
.salary-page .hero-search input,
.network-page .search-input,
.explore-page .exp-search input,
.dynamic-role-page .faq-search input,
.contact-page .cp-faq-search-input,
.faq-page .search-box input {
  width: 100%;
  padding: 13px 16px !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 500;
  color: var(--ch-t1) !important;
  background: #fff !important;
  border: 1px solid var(--ch-line) !important;
  border-radius: var(--ch-r-sm) !important;
  box-shadow: var(--ch-lift-1);
  outline: none;
  transition: border-color var(--ch-base) var(--ch-ease),
              box-shadow var(--ch-base) var(--ch-ease);
}
.join-page .field-input:focus,
.contact-page .cp-input:focus,
.salary-guide-page .form-field input:focus,
.salary-guide-page .form-field select:focus,
.blog-page .search-box input:focus,
.kb-page .search-box input:focus,
.salary-page .hero-search input:focus,
.network-page .search-input:focus,
.explore-page .exp-search input:focus,
.dynamic-role-page .faq-search input:focus,
.contact-page .cp-faq-search-input:focus,
.faq-page .search-box input:focus {
  border-color: var(--ch-green) !important;
  box-shadow: 0 0 0 4px rgba(1, 182, 72, .14), var(--ch-lift-1) !important;
}

.join-page .field-label,
.salary-guide-page .form-field label,
.contact-page .cp-input-group label {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--ch-t1) !important;
  letter-spacing: .02em;
}

/* Search boxes are a rounded shell holding an input and a button. */
.blog-page .search-box,
.kb-page .search-box,
.salary-page .hero-search,
.dynamic-role-page .faq-search,
.explore-page .exp-search,
.faq-page .search-box {
  background: #fff !important;
  border: 1px solid var(--ch-line) !important;
  border-radius: var(--ch-r-pill) !important;
  box-shadow: var(--ch-lift-2) !important;
  padding: 6px 6px 6px 8px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.blog-page .search-box input,
.kb-page .search-box input,
.salary-page .hero-search input,
.dynamic-role-page .faq-search input,
.explore-page .exp-search input,
.faq-page .search-box input {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* --------------------------------------------------------------------------
   6. CHIPS, TAGS AND BADGES
   -------------------------------------------------------------------------- */
.network-page .role-tag,
.blog-page .blog-tag,
.dynamic-role-page .case-tag,
.dynamic-role-page .badge-tag,
.kb-page .art-badge,
.kb-page .featured-tag,
.kb-page .featured-badge,
.resource-page .res-badge,
.join-page .chip-row span,
.salary-page .cta-badge,
.salary-guide-page .li-badge,
.contact-page .cp-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 7px 14px !important;
  border-radius: var(--ch-r-pill) !important;
  background: #f1f4f2 !important;
  border: 1px solid transparent !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--ch-t2) !important;
  line-height: 1;
  transition: background-color var(--ch-base) var(--ch-ease),
              color var(--ch-base) var(--ch-ease),
              border-color var(--ch-base) var(--ch-ease);
}
.network-page .role-tag:hover,
.blog-page .blog-tag:hover,
.dynamic-role-page .case-tag:hover,
.kb-page .art-badge:hover,
.resource-page .res-badge:hover {
  background: rgba(1, 182, 72, .10) !important;
  color: var(--ch-green-ink) !important;
  border-color: rgba(1, 182, 72, .25) !important;
}

/* --------------------------------------------------------------------------
   7. AVATARS
   -------------------------------------------------------------------------- */
.network-page .card-avatar img,
.blog-page .blog-avatar img,
.explore-page .exp-avatar,
.dynamic-role-page .avatars-row img {
  border-radius: 50% !important;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(1, 182, 72, .2);
}

/* --------------------------------------------------------------------------
   8. CTA BANDS
   The ported pages each closed on a differently-coloured banner. They all use
   the dark green-washed band from the design system now.
   -------------------------------------------------------------------------- */
.dynamic-role-page .cta-banner,
.salary-page .cta-banner,
.join-page .final-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--ch-r-2xl) !important;
  background:
    radial-gradient(ellipse 80% 100% at 15% 0%, rgba(1, 182, 72, .28), transparent 60%),
    linear-gradient(140deg, #121b23 0%, var(--ch-void) 100%) !important;
  color: var(--ch-t-inv-1) !important;
  box-shadow: var(--ch-lift-4);
  padding: clamp(28px, 5vw, 60px) !important;
}
.dynamic-role-page .cta-banner h2,
.dynamic-role-page .cta-inner h2,
.salary-page .cta-banner h2,
.salary-page .cta-inner h2,
.join-page .final-cta h2,
.join-page .final-cta-text h2 {
  font-size: clamp(24px, 3.4vw, 40px) !important;
  font-weight: 800 !important;
  letter-spacing: -.03em;
  line-height: 1.12;
  color: var(--ch-t-inv-1) !important;
}
.dynamic-role-page .cta-banner p,
.salary-page .cta-banner p,
.join-page .final-cta p,
.join-page .final-cta-text p {
  color: var(--ch-t-inv-2) !important;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.65;
}

/* Light "below banner" strips share the mist ground instead of beige. */
.dynamic-role-page .below-banner,
.salary-guide-page .inside-section {
  background: var(--ch-mist) !important;
}

/* --------------------------------------------------------------------------
   9. PAGINATION
   -------------------------------------------------------------------------- */
.blog-page .pagination a,
.blog-page .pagination span,
.network-page .page-btn,
.network-page .page-num {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px !important;
  border-radius: var(--ch-r-pill) !important;
  border: 1px solid var(--ch-line) !important;
  background: #fff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--ch-t2) !important;
  text-decoration: none;
  transition: border-color var(--ch-base) var(--ch-ease),
              color var(--ch-base) var(--ch-ease),
              transform var(--ch-fast) var(--ch-ease-out);
}
.blog-page .pagination a:hover,
.network-page .page-btn:hover,
.network-page .page-num:hover {
  border-color: var(--ch-green) !important;
  color: var(--ch-green-ink) !important;
  transform: translate3d(0, -2px, 0);
}
.blog-page .pagination .active,
.network-page .page-num.active {
  background: var(--ch-ink) !important;
  border-color: var(--ch-ink) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   10. STATS
   -------------------------------------------------------------------------- */
.clients-page .stats-bar,
.salary-page .trust-stats,
.salary-guide-page .stats {
  background: #fff !important;
  border: 1px solid var(--ch-line) !important;
  border-radius: var(--ch-r-lg) !important;
  box-shadow: var(--ch-lift-1) !important;
}
.clients-page .stat .num,
.salary-guide-page .stat .num,
.salary-page .trust-stats .num {
  font-size: clamp(24px, 3vw, 34px) !important;
  font-weight: 800 !important;
  letter-spacing: -.03em;
  color: var(--ch-green) !important;
}
.clients-page .stat .label,
.salary-guide-page .stat .label {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--ch-t3) !important;
}

/* --------------------------------------------------------------------------
   11. OFF-BRAND ACCENTS
   Decorative colour the ported pages brought with them. Client logo marks are
   deliberately left alone — those are other companies' brands, and recolouring
   them green would misrepresent them.
   -------------------------------------------------------------------------- */
.join-page .journey-grid [style*="7b2ff7"],
.join-page .journey-grid [style*="3b5bdb"] { filter: hue-rotate(85deg) saturate(.8); }

.salary-page .card-india .label,
.salary-page .card-india .lowhigh div,
.salary-page .card-usa .label,
.salary-page .card-usa .lowhigh div { color: var(--ch-t2) !important; }

.salary-page .card-usa .amount,
.salary-page .card-india .amount {
  color: var(--ch-t1) !important;
  font-weight: 800;
  letter-spacing: -.03em;
}

/* --------------------------------------------------------------------------
   12. LEGACY ACCORDIONS
   The contact page and the role pages each shipped their own accordion. They
   are given the FAQ component's surface so the interaction reads the same as
   the real FAQ everywhere else, even though the markup differs.
   -------------------------------------------------------------------------- */
.contact-page .cp-accordion-item,
.dynamic-role-page .faq-item {
  background: #fff !important;
  border: 1px solid var(--ch-line) !important;
  border-radius: var(--ch-r-md) !important;
  box-shadow: var(--ch-lift-1) !important;
  overflow: hidden;
  transition: box-shadow var(--ch-base) var(--ch-ease-out),
              border-color var(--ch-base) var(--ch-ease-out);
}
.contact-page .cp-accordion-item:hover,
.dynamic-role-page .faq-item:hover {
  box-shadow: var(--ch-lift-2) !important;
  border-color: rgba(1, 182, 72, .28) !important;
}
.dynamic-role-page .faq-item .chev,
.contact-page .cp-accordion-item svg {
  transition: transform var(--ch-base) var(--ch-ease-out);
}

/* --------------------------------------------------------------------------
   13. CONTAINERS & RHYTHM
   -------------------------------------------------------------------------- */
/*
 * Content columns.
 *
 * `body` prefix for the same reason as the page scopes: each page's inline
 * <style> declares its own max-width on these wrappers and, at equal
 * specificity, wins on source order. Without the prefix the network filters
 * ran edge to edge while the header sat in its container, and the blog's
 * column came in ~230px narrower than its own hero. One container width for
 * the header, the hero and the content on every page.
 */
body .explore-page .exp-main,
body .resource-page .res-main,
body .kb-page .wrap,
body .kb-page .cat-section,
body .blog-page .blog-wrap,
body .clients-page .wrap,
body .dynamic-role-page .wrap,
body .join-page .wrap,
body .salary-page .market,
body .salary-page .guide,
body .salary-guide-page .inside-inner,
body .contact-page .cp-faq-container {
  width: 100%;
  max-width: 1480px;
  margin-inline: auto;
  padding-inline: var(--ch-gutter);
}

.explore-page .exp-sections > section,
.resource-page .res-main > section,
.kb-page .cat-section,
.clients-page .logo-section {
  padding-block: clamp(40px, 5vw, 72px);
}

/* --------------------------------------------------------------------------
   14. RESPONSIVE
   The ported pages used rigid pixel grids. Every card grid becomes auto-fit so
   it reflows at any width, including a desktop at 125% or 150% zoom.
   -------------------------------------------------------------------------- */
.blog-page .blog-grid,
.kb-page .card-grid,
.resource-page .res-bottom-grid,
.explore-page .exp-comp-grid,
.explore-page .exp-test-grid,
.clients-page .logo-grid,
.dynamic-role-page .case-grid,
.network-page .cards-grid,
.join-page .journey-grid {
  display: grid !important;
  gap: clamp(14px, 1.8vw, 24px) !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)) !important;
}

@media (max-width: 900px) {
  .network-page .page-wrap { display: block !important; }
  .network-page .sidebar {
    width: 100% !important;
    position: static !important;
    margin-bottom: 20px;
  }
  .contact-page .cp-form,
  .contact-page .cp-row { grid-template-columns: minmax(0, 1fr) !important; }
  .dynamic-role-page .hero-inner,
  .salary-page .hero,
  .join-page .top-section { display: block !important; }
}

@media (max-width: 640px) {
  .dynamic-role-page > .hero,
  .blog-page .hero,
  .clients-page .hero,
  .salary-page .hero,
  .salary-guide-page .hero,
  .resource-page .res-hero,
  .contact-page .cp-hero,
  .explore-page .exp-header,
  .kb-page .hero,
  .join-page .top-section { border-radius: var(--ch-r-xl); }

  .blog-page .search-box,
  .kb-page .search-box,
  .salary-page .hero-search,
  .dynamic-role-page .faq-search,
  .explore-page .exp-search { flex-wrap: wrap; border-radius: var(--ch-r-lg) !important; }
}

/* --------------------------------------------------------------------------
   15. PAGE-SPECIFIC RESPONSIVE REPAIRS
   Layouts the ported pages built out of absolute positioning, which cannot
   reflow and so ran off the side of a phone.
   -------------------------------------------------------------------------- */

/*
 * Salary tool — the market comparison.
 *
 * Two cards were absolutely positioned inside a fixed 420px box (`.mv-india`
 * at left:220px, 230px wide). On a 390px screen the second card started past
 * the right edge and was clipped away entirely — the India column simply was
 * not there. They stack in normal flow below the breakpoint.
 */
@media (max-width: 860px) {
  .salary-page .market-right {
    height: auto !important;
    display: grid;
    gap: 14px;
  }
  .salary-page .mv-card {
    position: static !important;
    width: auto !important;
    top: auto !important;
    left: auto !important;
  }
}

/*
 * Salary tool — the trust stats column.
 *
 * A staircase of fixed widths (300 / 340 / 380px) inside a `flex: 0 0 420px`
 * column, right-aligned so each card is wider than the last. Below 860px the
 * two wider cards ran past the edge, so the staircase flattens to full width.
 */
@media (max-width: 860px) {
  .salary-page .stats-col {
    flex: 1 1 auto !important;
    width: 100%;
    align-items: stretch !important;
  }
  .salary-page .stat-1,
  .salary-page .stat-2,
  .salary-page .stat-3 { width: 100% !important; }
}

/*
 * Clients — the filter tab row.
 *
 * A non-wrapping flex row of pills; the last one ran off the edge on a phone.
 * It wraps now rather than becoming a hidden horizontal scroller, so every
 * filter is reachable without a gesture that is not signposted.
 */
.clients-page .filter-tabs,
.blog-page .tab-nav,
.kb-page .cat-nav,
.resource-page .res-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

/*
 * Search-shell contents.
 *
 * The ported search boxes positioned their icon absolutely, measured against
 * the old fixed-width layout. Once the shell became a flex row the icon kept
 * its absolute placement and landed on top of the placeholder text. Icons sit
 * in the flow now and the input takes the rest of the row.
 */
.blog-page .search-box > i,
.blog-page .search-box > svg,
.blog-page .search-box .search-icon,
.kb-page .search-box > i,
.kb-page .search-box > svg,
.kb-page .search-box .search-icon,
.explore-page .exp-search > i,
.explore-page .exp-search > svg,
.salary-page .hero-search > i,
.salary-page .hero-search > svg,
.dynamic-role-page .faq-search > i,
.dynamic-role-page .faq-search > svg,
.dynamic-role-page .faq-search .lbl,
.faq-page .search-box > i,
.faq-page .search-box > svg,
.faq-page .search-box .search-icon {
  position: static !important;
  transform: none !important;
  flex: 0 0 auto;
  margin: 0 2px 0 8px;
  color: var(--ch-t3);
  font-size: 15px;
  line-height: 1;
}

.blog-page .search-box input,
.kb-page .search-box input,
.explore-page .exp-search input,
.salary-page .hero-search input,
.dynamic-role-page .faq-search input,
.faq-page .search-box input {
  flex: 1 1 auto;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   16. DESIGN-SYSTEM COMPONENTS INSIDE LEGACY PAGE SCOPES
   --------------------------------------------------------------------------
   Eight ported pages open their <style> block with `a { color: inherit }`.
   That is specificity 0,1,1 and beats `.ch-btn--dark { color: #fff }` at
   0,1,0 — so a dark design-system button rendered inside one of those pages
   drew its label in the page ink on a near-identical dark fill. On the talent
   profile the "Talk to us about hiring" button was literally invisible:
   contrast ratio 1.0, text rgb(24,34,43) on background rgb(24,34,43).
   Re-asserting each variant's own colour at matching specificity fixes every
   scope at once, and does it without !important.
   -------------------------------------------------------------------------- */
.blog-page a.ch-btn--dark,
.clients-page a.ch-btn--dark,
.join-page a.ch-btn--dark,
.kb-page a.ch-btn--dark,
.network-page a.ch-btn--dark,
.profile-page a.ch-btn--dark,
.salary-page a.ch-btn--dark,
.salary-guide-page a.ch-btn--dark,
.explore-page a.ch-btn--dark,
.resource-page a.ch-btn--dark,
.contact-page a.ch-btn--dark,
.dynamic-role-page a.ch-btn--dark,
.faq-page a.ch-btn--dark,
.blog-page a.ch-btn--primary,
.clients-page a.ch-btn--primary,
.join-page a.ch-btn--primary,
.kb-page a.ch-btn--primary,
.network-page a.ch-btn--primary,
.profile-page a.ch-btn--primary,
.salary-page a.ch-btn--primary,
.salary-guide-page a.ch-btn--primary,
.explore-page a.ch-btn--primary,
.resource-page a.ch-btn--primary,
.contact-page a.ch-btn--primary,
.dynamic-role-page a.ch-btn--primary,
.faq-page a.ch-btn--primary,
.blog-page a.ch-btn--ghost,
.clients-page a.ch-btn--ghost,
.join-page a.ch-btn--ghost,
.kb-page a.ch-btn--ghost,
.network-page a.ch-btn--ghost,
.profile-page a.ch-btn--ghost,
.salary-page a.ch-btn--ghost,
.salary-guide-page a.ch-btn--ghost,
.explore-page a.ch-btn--ghost,
.resource-page a.ch-btn--ghost,
.contact-page a.ch-btn--ghost,
.dynamic-role-page a.ch-btn--ghost,
.faq-page a.ch-btn--ghost { color: #fff; }

.blog-page a.ch-btn--outline,
.clients-page a.ch-btn--outline,
.join-page a.ch-btn--outline,
.kb-page a.ch-btn--outline,
.network-page a.ch-btn--outline,
.profile-page a.ch-btn--outline,
.salary-page a.ch-btn--outline,
.salary-guide-page a.ch-btn--outline,
.explore-page a.ch-btn--outline,
.resource-page a.ch-btn--outline,
.contact-page a.ch-btn--outline,
.dynamic-role-page a.ch-btn--outline,
.faq-page a.ch-btn--outline { color: var(--ch-ink); }

.blog-page a.ch-link,
.clients-page a.ch-link,
.join-page a.ch-link,
.kb-page a.ch-link,
.network-page a.ch-link,
.profile-page a.ch-link,
.salary-page a.ch-link,
.salary-guide-page a.ch-link,
.explore-page a.ch-link,
.resource-page a.ch-link,
.contact-page a.ch-link,
.dynamic-role-page a.ch-link,
.faq-page a.ch-link { color: var(--ch-green-ink); }

/* --------------------------------------------------------------------------
   17. HARD-CORNER SWEEP
   --------------------------------------------------------------------------
   The last square-cornered surfaces left after the component bridge. Full-bleed
   page, header and footer bands are deliberately left square — a rounded edge
   against the viewport edge reads as a mistake, not a radius.
   -------------------------------------------------------------------------- */
.salary-page .trusted,
.salary-page .cookie,
.resource-page .res-highlight,
.resource-page .res-podcast-footer,
.join-page .journey,
.join-page .made-for,
.kb-page .float-icons,
.blog-page .blog-uplers,
.clients-page .stats-bar,
.contact-page .cp-social-proof,
.contact-page .cp-logos,
.dynamic-role-page .below-banner,
.network-page .pagination > *,
.explore-page .exp-companies,
.explore-page .exp-testimonials {
  border-radius: var(--ch-r-lg) !important;
}

/* Anything still square that carries its own surface inside a page body.
   Deliberately narrow: only elements with a background or a border, never
   layout wrappers, and never the full-bleed bands above. */
.explore-page [class*="card"],
.network-page [class*="card"],
.resource-page [class*="card"],
.kb-page [class*="card"],
.blog-page [class*="card"],
.clients-page [class*="card"],
.dynamic-role-page [class*="card"],
.salary-page [class*="card"],
.salary-guide-page [class*="card"],
.join-page [class*="card"],
.contact-page [class*="card"] {
  border-radius: var(--ch-r-lg);
}

/* Inputs, selects, textareas and buttons never square. */
.explore-page input, .explore-page select, .explore-page textarea,
.network-page input, .network-page select, .network-page textarea,
.resource-page input, .resource-page select, .resource-page textarea,
.kb-page input, .kb-page select, .kb-page textarea,
.blog-page input, .blog-page select, .blog-page textarea,
.clients-page input, .clients-page select, .clients-page textarea,
.dynamic-role-page input, .dynamic-role-page select, .dynamic-role-page textarea,
.salary-page input, .salary-page select, .salary-page textarea,
.salary-guide-page input, .salary-guide-page select, .salary-guide-page textarea,
.join-page input, .join-page select, .join-page textarea,
.contact-page input, .contact-page select, .contact-page textarea,
.profile-page input, .profile-page select, .profile-page textarea {
  border-radius: var(--ch-r-sm);
}
.explore-page button, .network-page button, .resource-page button,
.kb-page button, .blog-page button, .clients-page button,
.dynamic-role-page button, .salary-page button, .salary-guide-page button,
.join-page button, .contact-page button {
  border-radius: var(--ch-r-pill);
}

/* --------------------------------------------------------------------------
   18. NETWORK — the candidate grid
   --------------------------------------------------------------------------
   The page is already full width; what made it look empty was a rigid
   two-column grid holding one card in a 1,600px area. Auto-fit lets the grid
   settle at three columns on a wide screen and one on a phone, so a short
   result set fills the space it is given instead of stranding a card.
   -------------------------------------------------------------------------- */
.network-page .cards-area > .grid,
.network-page .cards-grid {
  display: grid !important;
  gap: clamp(14px, 1.6vw, 22px) !important;
  /* 21rem is tied to the 330px container-query threshold in .ch-pcard: below
     it the card stacks its header, so a smaller minimum here would buy a third
     column at the cost of every card in it switching to its narrow layout. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)) !important;
  align-items: start;
}

/* Sidebar gets the same panel treatment as every other surface. */
.network-page .sidebar {
  /* Wider again than the ported 230px. At 310px the role pills still fell one
     per line, which read as a narrow strip of leftovers rather than a filter
     panel; ~344px of inner width fits two pills per row and gives the search
     inputs and experience checkboxes room to breathe. The results grid is
     auto-fit, so it simply settles at one column fewer on a mid-size screen
     rather than overflowing. */
  flex: 0 0 auto;
  width: clamp(300px, 26vw, 392px);
  background: #fff;
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-r-lg);
  box-shadow: var(--ch-lift-1);
  padding: clamp(18px, 2vw, 24px) !important;
}
.network-page .filter-label {
  font-size: 12.5px; font-weight: 800; color: var(--ch-t1);
  letter-spacing: .02em;
}
/*
 * Network page width.
 *
 * The page shipped `.network-page .page-wrap { max-width: 100% }` in its own
 * inline <style>, which ties with the shared container rule on specificity and
 * wins on source order — so the filters and the card grid ran edge to edge
 * while the header stayed in its 1480px container. The `body` prefix breaks
 * the tie, and both the hero band and the wrap now share the header's exact
 * container so the page lines up with the logo on the left and the Hire Talent
 * button on the right.
 */
body .network-page .page-wrap {
  width: 100%;
  max-width: 1480px;
  margin-inline: auto;
  padding-inline: var(--ch-gutter);
}

/* The hero band is a panel with its own padding, so it is inset by width
   rather than by padding — same finished edge, 93px in at 1585px wide. */
body .network-page .top-bar {
  width: calc(100% - (2 * var(--ch-gutter)));
  max-width: calc(1480px - (2 * var(--ch-gutter)));
  margin-inline: auto;
}

body .network-page .page-wrap {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  align-items: flex-start;
}

/* Laravel's default pagination view ships Tailwind classes with square edges.
   The network page is the only place it renders. */
.network-page nav[role="navigation"] span[class*="inline-flex"],
.network-page nav[role="navigation"] a[class*="inline-flex"],
.network-page nav[role="navigation"] span[aria-current],
.network-page .pagination span,
.network-page .pagination a {
  border-radius: var(--ch-r-pill) !important;
}

/* Decorative shapes drawn inside the resource mini-card artwork. */
.resource-page .res-mini-image > *,
.resource-page .res-card-image > * {
  border-radius: var(--ch-r-sm);
}

/* Explore's hero sits INSIDE .exp-main, which already carries the container's
   gutter. Subtracting the gutter again on the panel inset it twice and left it
   40px narrower on each side than the content below. Every other bridged hero
   is a direct child of the page wrapper, so only this one needs the exception. */
body .explore-page .exp-header {
  width: 100%;
  max-width: none;
}

/* The knowledge base's featured panel is a card, so it is inset to the content
   column like every other panel rather than spanning the container box. */
body .kb-page .featured {
  width: calc(100% - (2 * var(--ch-gutter)));
  max-width: calc(1480px - (2 * var(--ch-gutter)));
  margin-inline: auto;
}

/* ==========================================================================
   City landing pages, /hire-remote-developers/{city}
   The problem and the answer sit side by side on one row, joined by a
   connector, so each local problem visibly has its own answer.
   ========================================================================== */
.ch-city-pairs { display: grid; gap: clamp(14px, 2vw, 22px); counter-reset: city-pair; }
.ch-city-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  counter-increment: city-pair;
}
@media (min-width: 900px) {
  .ch-city-pair { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 0; }
}
.ch-city-pair__side {
  position: relative;
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: var(--ch-r-lg);
  border: 1px solid var(--ch-line);
  background: var(--ch-paper);
  box-shadow: var(--ch-lift-1);
  transition: transform var(--ch-base) var(--ch-ease-out), box-shadow var(--ch-base) var(--ch-ease-out);
}
.ch-city-pair__side--problem { background: var(--ch-mist); }
.ch-city-pair__side--answer {
  border-color: rgba(1, 182, 72, .28);
  box-shadow: var(--ch-lift-2), 0 0 0 1px rgba(1, 182, 72, .06);
}
.ch-city-pair:hover .ch-city-pair__side--answer { transform: translateY(-3px); box-shadow: var(--ch-lift-3), var(--ch-glow); }
.ch-city-pair__tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ch-t3); margin-bottom: 10px;
}
.ch-city-pair__side--problem .ch-city-pair__tag::before { content: counter(city-pair, decimal-leading-zero); color: var(--ch-t2); }
.ch-city-pair__side--answer .ch-city-pair__tag { color: var(--ch-green-ink); }
.ch-city-pair__title { font-size: clamp(16px, 1.4vw, 18px); font-weight: 800; color: var(--ch-t1); margin: 0 0 8px; line-height: 1.3; }
.ch-city-pair__text { font-size: 14.5px; line-height: 1.65; color: var(--ch-t2); margin: 0; }
.ch-city-pair__link { display: none; }
@media (min-width: 900px) {
  .ch-city-pair__link { display: flex; align-items: center; justify-content: center; color: var(--ch-green); }
  .ch-city-pair__link::before {
    content: ""; position: absolute; width: 44px; height: 2px;
    background: linear-gradient(90deg, var(--ch-line), var(--ch-green));
  }
  .ch-city-pair__link { position: relative; }
  .ch-city-pair__link svg { position: relative; background: var(--ch-paper); border-radius: 50%; padding: 4px; width: 26px; height: 26px; box-shadow: var(--ch-lift-1); }
}

/* Hero side card: the city at a glance. */
.ch-city-card__place { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ch-city-card__name { font-size: clamp(20px, 2vw, 24px); font-weight: 900; letter-spacing: -.02em; color: var(--ch-t1); }
.ch-city-card__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ch-city-card__facts li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--ch-t2); }
.ch-city-card__facts strong { display: block; color: var(--ch-t1); font-size: 14.5px; }
.ch-city-card__facts svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--ch-green); }

/* Working-day overlap: two bars, drawn without hour labels because the
   exact hours are agreed per hire. */
.ch-overlap { display: grid; gap: 14px; margin-top: clamp(20px, 3vw, 30px); }
.ch-overlap__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 720px) { .ch-overlap__row { grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 18px; } }
.ch-overlap__label { font-size: 13px; font-weight: 700; color: var(--ch-t-inv-2); }
.ch-overlap__track { position: relative; height: 14px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.ch-overlap__bar { position: absolute; top: 0; bottom: 0; border-radius: 999px; }
.ch-overlap__bar--you { left: 38%; width: 36%; background: rgba(255, 255, 255, .38); }
.ch-overlap__bar--dev { left: 12%; width: 36%; background: linear-gradient(90deg, var(--ch-green), var(--ch-green-3)); }
.ch-overlap__bar--both { left: 38%; width: 10%; background: var(--ch-green-3); box-shadow: 0 0 18px rgba(74, 222, 128, .6); }
html.ch-motion .ch-overlap__bar { transform-origin: left center; transform: scaleX(0); transition: transform .9s var(--ch-ease-out); will-change: transform; }
html.ch-motion .ch-overlap.is-in .ch-overlap__bar { transform: scaleX(1); }
html.ch-motion .ch-overlap.is-in .ch-overlap__bar--dev { transition-delay: .15s; }
html.ch-motion .ch-overlap.is-in .ch-overlap__bar--both { transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
  html.ch-motion .ch-overlap__bar { transform: none; transition: none; }
  .ch-city-pair__side { transition: none; }
}

/* City index. */
.ch-city-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.ch-city-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-radius: var(--ch-r-md); border: 1px solid var(--ch-line);
  background: var(--ch-paper); color: var(--ch-t1); font-weight: 700; font-size: 14.5px; text-decoration: none;
  transition: transform var(--ch-base) var(--ch-ease-out), border-color var(--ch-base) var(--ch-ease), box-shadow var(--ch-base) var(--ch-ease-out);
}
.ch-city-list a:hover, .ch-city-list a:focus-visible { transform: translateY(-2px); border-color: rgba(1, 182, 72, .35); box-shadow: var(--ch-lift-2); }
.ch-city-list small { color: var(--ch-t3); font-weight: 700; font-size: 12px; }
.ch-city-h1 { font-size: clamp(34px, 4.4vw, 60px); }
.ch-city-roles { display: grid; gap: clamp(12px, 1.6vw, 20px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .ch-city-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ch-city-roles { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } }
.ch-city-list--near { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.ch-city-list--near a { padding: 16px 18px; font-size: 16px; }
.ch-city-list--near small { display: block; margin-bottom: 2px; }
.ch-city-list--near svg { flex: none; width: 18px; height: 18px; color: var(--ch-green); transition: transform var(--ch-base) var(--ch-ease-out); }
.ch-city-list--near a:hover svg { transform: translateX(3px); }

/* Engagement, engineers and budget side by side on the dark lead form. */
.ch-trio { display: grid; gap: clamp(14px, 1.8vw, 20px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .ch-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }