/* HeroHunt System Standardization Layer
 * This file is intended for maintainable cross-page standards that sit above exported CSS.
 */

/* ==========================================================================
   IMPORTANT: BUTTON CLASS USAGE GUIDE
   ==========================================================================

   The Webflow JavaScript (js_webflow.schunk.66dcd6b93c050334.js) automatically
   rewrites certain button links to app.herohunt.ai based on:

   1. CLASS PATTERNS: Links with classes matching:
      - w-button
      - hh-btn (any variant)
      - dropdown-link-2-copy-copy
      - google-sign-in-link
      - button-header
      - Various buy-button classes

   2. TEXT PATTERNS: Links with text matching (case-insensitive):
      - "start for free", "try for free", "find candidates"
      - "start now", "try me!", "try her!", "let's go!"
      - "get started", "get in touch", "reach candidates"
      - "sign in", "add credits", "get pricing quote"
      - "< all jobs", "< full glossary", "< full q&a"
      - And many more CTA-style texts

   3. ID PATTERNS: Links with specific IDs like:
      - button-nav-start-for-free
      - get-started-pro
      - Various pricing button IDs

   RULE: For INTERNAL NAVIGATION buttons (links within the site like /careers,
   /blog, /about), DO NOT use `hh-btn` classes. Use only the base button
   classes like `button-13 button--blue-copy` to prevent the JS from
   rewriting the href to app.herohunt.ai.

   ========================================================================== */

:root {
  --hh-surface-0: #ffffff;
  --hh-surface-1: #f6faff;
  --hh-border-1: #c8d9ec;
  --hh-text-1: #0f2e57;
  --hh-text-2: #3f5f82;
  --hh-focus: rgba(39, 153, 255, .35);

  --hh-field-font-size: 16px;
  --hh-field-line-height: 1.35;
  --hh-field-pad-y: 10px;
  --hh-field-pad-x: 12px;
  --hh-field-radius: 10px;
  --hh-field-min-h: 44px;

  --hh-tab-bg: #ffffff;
  --hh-tab-bg-hover: #f3f8ff;
  --hh-tab-bg-active: #2799ff;
  --hh-tab-text: #176ec4;
  --hh-tab-text-active: #ffffff;
  --hh-tab-border: #c7def6;
  --hh-tab-radius: 12px;
  --hh-tab-pad-y: 9px;
  --hh-tab-pad-x: 20px;
  --hh-tab-min-h: 40px;
  --hh-tab-shadow: 0 6px 14px rgba(39, 153, 255, .14);

  --hh-type-color-heading: #11145f;
  --hh-type-color-body: #2f356f;
  --hh-type-color-muted: #5b6b82;
  --hh-type-font-family: "Poppins", Arial, sans-serif;
  --hh-type-weight-regular: 400;
  --hh-type-weight-medium: 500;
  --hh-type-weight-semibold: 600;
  --hh-type-weight-bold: 700;
  --hh-type-size-display: clamp(40px, 4.8vw, 72px);
  --hh-type-size-h1: clamp(34px, 3.8vw, 56px);
  --hh-type-size-h2: clamp(28px, 3vw, 44px);
  --hh-type-size-h3: clamp(22px, 2.1vw, 32px);
  --hh-type-size-h4: clamp(18px, 1.8vw, 24px);
  --hh-type-size-body-lg: 22px;
  --hh-type-size-body-md: 18px;
  --hh-type-size-body-sm: 16px;
  --hh-type-size-body-xs: 14px;
  --hh-type-lh-tight: 1.12;
  --hh-type-lh-heading: 1.2;
  --hh-type-lh-body: 1.5;

  /* Button defaults (CRITICAL: these MUST be defined for .hh-btn to work) */
  --hh-btn-bg: #2799ff;
  --hh-btn-bg-hover: #0f82eb;
  --hh-btn-bg-active: #0a70ca;
  --hh-btn-text: #ffffff;
  --hh-btn-border: transparent;
  --hh-btn-font-size: 16px;
  --hh-btn-font-weight: 600;
  --hh-btn-line-height: 1.25;
  --hh-btn-pad-y: 12px;
  --hh-btn-pad-x: 24px;
  --hh-btn-min-h: 48px;
  --hh-btn-radius: 10px;
  --hh-btn-shadow: 0 4px 14px rgba(39, 153, 255, 0.25);
}

/* ==========================================================================
   FOOTER COLOR OVERRIDES
   ==========================================================================
   The footer has a dark blue background (#15195a), so all text must be white
   or light colored. These overrides ensure proper contrast.
   ========================================================================== */

/* Footer section titles - must be white */
.footer .footer-title,
.footer .footer-mobile-title {
  color: #ffffff !important;
}

/* Footer links - light color that turns white on hover */
.footer .footer-link,
.footer a.footer-link,
.footer .footer-link.w-inline-block {
  color: rgba(255, 255, 255, 0.8) !important;
}

.footer .footer-link:hover,
.footer a.footer-link:hover {
  color: #ffffff !important;
}

/* Footer tagline and description text */
.footer .white-text,
.footer .footer-tagline,
.footer .paragraph-4 {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Footer legal/small print */
.footer .small-print-link,
.footer .text-footer-small-print {
  color: rgba(255, 255, 255, 0.7) !important;
}

.footer .small-print-link:hover {
  color: #ffffff !important;
}

/* Footer copyright */
.footer .footer-copyright,
.footer .text-block-12 {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Form component base */
.hh-field,
input.hh-field,
textarea.hh-field,
select.hh-field,
input.hh-input,
textarea.hh-textarea,
select.hh-select {
  appearance: none;
  background: var(--hh-surface-0);
  border: 1px solid var(--hh-border-1);
  border-radius: var(--hh-field-radius);
  box-sizing: border-box;
  color: var(--hh-text-1);
  font-size: var(--hh-field-font-size);
  line-height: var(--hh-field-line-height);
  min-height: var(--hh-field-min-h);
  outline: none;
  padding: var(--hh-field-pad-y) var(--hh-field-pad-x);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  width: 100%;
}

input.hh-field::placeholder,
input.hh-input::placeholder,
textarea.hh-field::placeholder,
textarea.hh-textarea::placeholder {
  color: var(--hh-text-2);
  opacity: .78;
}

.hh-field:focus,
.hh-field:focus-visible,
input.hh-input:focus,
input.hh-input:focus-visible,
textarea.hh-textarea:focus,
textarea.hh-textarea:focus-visible,
select.hh-select:focus,
select.hh-select:focus-visible {
  border-color: #2799ff;
  box-shadow: 0 0 0 3px var(--hh-focus);
}

.hh-field[disabled],
input.hh-input[disabled],
textarea.hh-textarea[disabled],
select.hh-select[disabled] {
  background: #f0f4f9;
  color: #6b7e95;
  cursor: not-allowed;
  opacity: .9;
}

textarea.hh-field,
textarea.hh-textarea {
  min-height: 110px;
  resize: vertical;
}

select.hh-field,
select.hh-select {
  background-image:
    linear-gradient(45deg, transparent 50%, #466c95 50%),
    linear-gradient(135deg, #466c95 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

/* Tab component base */
.hh-tab {
  align-items: center;
  background: var(--hh-tab-bg);
  border: 1px solid var(--hh-tab-border);
  border-radius: var(--hh-tab-radius);
  box-sizing: border-box;
  color: var(--hh-tab-text);
  display: inline-flex;
  font-size: 16px;
  font-weight: 600;
  justify-content: center;
  line-height: 1.2;
  min-height: var(--hh-tab-min-h);
  padding: var(--hh-tab-pad-y) var(--hh-tab-pad-x);
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}

.hh-tab:hover {
  background: var(--hh-tab-bg-hover);
  color: var(--hh-tab-text);
}

.hh-tab--active,
.hh-tab.w--current {
  background: var(--hh-tab-bg-active);
  border-color: var(--hh-tab-bg-active);
  box-shadow: var(--hh-tab-shadow);
  color: var(--hh-tab-text-active);
}

.hh-tab.w-condition-invisible {
  display: none !important;
}

/* Typography scale system (opt-in only, no global overrides). */
.hh-type-display,
.hh-type-h1,
.hh-type-h2,
.hh-type-h3,
.hh-type-h4,
.hh-type-body-lg,
.hh-type-body-md,
.hh-type-body-sm,
.hh-type-body-xs {
  font-family: var(--hh-type-font-family);
  margin: 0;
}

.hh-type-display {
  color: var(--hh-type-color-heading);
  font-size: var(--hh-type-size-display);
  font-weight: var(--hh-type-weight-bold);
  line-height: var(--hh-type-lh-tight);
}

.hh-type-h1 {
  color: var(--hh-type-color-heading);
  font-size: var(--hh-type-size-h1);
  font-weight: var(--hh-type-weight-bold);
  line-height: var(--hh-type-lh-heading);
}

.hh-type-h2 {
  color: var(--hh-type-color-heading);
  font-size: var(--hh-type-size-h2);
  font-weight: var(--hh-type-weight-bold);
  line-height: var(--hh-type-lh-heading);
}

.hh-type-h3 {
  color: var(--hh-type-color-heading);
  font-size: var(--hh-type-size-h3);
  font-weight: var(--hh-type-weight-semibold);
  line-height: var(--hh-type-lh-heading);
}

.hh-type-h4 {
  color: var(--hh-type-color-heading);
  font-size: var(--hh-type-size-h4);
  font-weight: var(--hh-type-weight-semibold);
  line-height: var(--hh-type-lh-heading);
}

.hh-type-body-lg {
  color: var(--hh-type-color-body);
  font-size: var(--hh-type-size-body-lg);
  font-weight: var(--hh-type-weight-regular);
  line-height: var(--hh-type-lh-body);
}

.hh-type-body-md {
  color: var(--hh-type-color-body);
  font-size: var(--hh-type-size-body-md);
  font-weight: var(--hh-type-weight-regular);
  line-height: var(--hh-type-lh-body);
}

.hh-type-body-sm {
  color: var(--hh-type-color-body);
  font-size: var(--hh-type-size-body-sm);
  font-weight: var(--hh-type-weight-regular);
  line-height: var(--hh-type-lh-body);
}

.hh-type-body-xs {
  color: var(--hh-type-color-body);
  font-size: var(--hh-type-size-body-xs);
  font-weight: var(--hh-type-weight-regular);
  line-height: 1.45;
}

.hh-type-muted {
  color: var(--hh-type-color-muted);
}

/* Recruitment glossary card rhythm: keep CTA separated from body text. */
.div-block-214 .paragraph-55 {
  margin-bottom: 0;
}

.div-block-214 .div-block-226 {
  margin-top: 14px;
}

.div-block-214 .div-block-226 .hh-btn {
  margin-top: 0 !important;
}

/* Utility classes for future phased migrations */
.hh-stack-sm > * + * { margin-top: 8px; }
.hh-stack-md > * + * { margin-top: 16px; }
.hh-stack-lg > * + * { margin-top: 24px; }

/* ==========================================================================
   TYPOGRAPHY STANDARDIZATION SYSTEM
   ==========================================================================

   PURPOSE:
   --------
   This section creates a comprehensive, backwards-compatible typography system
   that normalizes ALL 400+ legacy Webflow typography classes without modifying
   any HTML. It applies the --hh-type-* design tokens globally.

   ARCHITECTURE:
   -------------
   1. GLOBAL RESETS: Base typography on html/body
   2. SEMANTIC TAGS: h1-h6 and p tags normalized
   3. ROLE-BASED CLASSES: Legacy classes mapped to semantic roles
   4. RICH TEXT: .w-richtext content normalized
   5. RESPONSIVE: Mobile-first breakpoints

   WHY THIS APPROACH:
   ------------------
   1. WHY not modify HTML? → 19,739 HTML files would need updating
   2. WHY use CSS selectors? → CSS cascade applies globally, one file change
   3. WHY map to roles? → Reduces 95 font-sizes to 10 semantic sizes
   4. WHY use !important? → Must override Webflow's specificity
   5. WHY this file? → Loaded LAST, after Webflow CSS

   DESIGN TOKENS USED:
   -------------------
   Sizes: --hh-type-size-display, -h1, -h2, -h3, -h4, -body-lg, -body-md, -body-sm, -body-xs
   Colors: --hh-type-color-heading, -body, -muted
   Weights: --hh-type-weight-regular (400), -medium (500), -semibold (600), -bold (700)
   Line heights: --hh-type-lh-tight (1.12), -heading (1.2), -body (1.5)
   Font family: --hh-type-font-family ("Poppins", Arial, sans-serif)

   ========================================================================== */

/* ---------------------------------------------------------------------------
   SECTION 1: GLOBAL BASE TYPOGRAPHY
   ---------------------------------------------------------------------------
   Apply consistent font-family and base styles to all text elements.
   This creates the foundation that all other rules build upon.
   --------------------------------------------------------------------------- */

html {
  font-family: var(--hh-type-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--hh-type-font-family);
  font-size: var(--hh-type-size-body-md);
  font-weight: var(--hh-type-weight-regular);
  line-height: var(--hh-type-lh-body);
  color: var(--hh-type-color-body);
}

/* ---------------------------------------------------------------------------
   SECTION 2: SEMANTIC HEADING TAGS (h1-h6)
   ---------------------------------------------------------------------------
   Normalize all heading tags to use the design system tokens.
   These rules have low specificity, allowing class overrides when needed.
   --------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--hh-type-font-family);
  color: var(--hh-type-color-heading);
  font-weight: var(--hh-type-weight-bold);
  line-height: var(--hh-type-lh-heading);
  margin-top: 0;
  margin-bottom: 0.5em;
}

h1 {
  font-size: var(--hh-type-size-h1);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--hh-type-size-h2);
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--hh-type-size-h3);
  font-weight: var(--hh-type-weight-semibold);
}

h4 {
  font-size: var(--hh-type-size-h4);
  font-weight: var(--hh-type-weight-semibold);
}

h5 {
  font-size: var(--hh-type-size-body-lg);
  font-weight: var(--hh-type-weight-semibold);
}

h6 {
  font-size: var(--hh-type-size-body-md);
  font-weight: var(--hh-type-weight-semibold);
}

/* ---------------------------------------------------------------------------
   SECTION 3: PARAGRAPH TAG
   ---------------------------------------------------------------------------
   Normalize the <p> tag for consistent body text.
   --------------------------------------------------------------------------- */

p {
  font-family: var(--hh-type-font-family);
  font-size: var(--hh-type-size-body-md);
  font-weight: var(--hh-type-weight-regular);
  line-height: var(--hh-type-lh-body);
  color: var(--hh-type-color-body);
  margin-top: 0;
  margin-bottom: 1em;
}

/* ---------------------------------------------------------------------------
   SECTION 4: LEGACY HEADING CLASSES → DISPLAY ROLE
   ---------------------------------------------------------------------------
   Map large display headings (hero titles, page titles) to --hh-type-size-display.
   These are typically 40-80px in the original Webflow CSS.
   --------------------------------------------------------------------------- */

/* Display-level headings: Hero banners, landing page titles */
.title.blog-post-copy,
.title.blog-post,
.heading-jumbo,
.title-paragraph,
.main-page-heading,
.text-4xl,
.heading-content,
.heading-content-copycopy,
.heading-content-copycopy-copy,
.heading-content-copy-c,
[class*="heading-"] h1,
.hero-title {
  font-family: var(--hh-type-font-family) !important;
  font-size: var(--hh-type-size-display) !important;
  font-weight: var(--hh-type-weight-bold) !important;
  line-height: var(--hh-type-lh-tight) !important;
  color: var(--hh-type-color-heading) !important;
  letter-spacing: -0.02em !important;
}

/* ---------------------------------------------------------------------------
   SECTION 5: LEGACY HEADING CLASSES → H1 ROLE
   ---------------------------------------------------------------------------
   Map page-level headings (article titles, section heroes) to --hh-type-size-h1.
   These are typically 30-50px in the original Webflow CSS.
   --------------------------------------------------------------------------- */

/* H1-level headings: Article titles, major page sections */
.title.hero-v1,
.title.latest-articles,
.title.latest-insights,
.title-latest-insights,
.heading-50,
.heading-50-copy,
.heading-55,
.heading-89,
.heading-89-copy,
.title-copy.hero,
.letters-tight-copy {
  font-family: var(--hh-type-font-family) !important;
  font-size: var(--hh-type-size-h1) !important;
  font-weight: var(--hh-type-weight-bold) !important;
  line-height: var(--hh-type-lh-heading) !important;
  color: var(--hh-type-color-heading) !important;
  letter-spacing: -0.01em !important;
}

/* ---------------------------------------------------------------------------
   SECTION 6: LEGACY HEADING CLASSES → H2 ROLE
   ---------------------------------------------------------------------------
   Map section headings to --hh-type-size-h2.
   These are typically 24-36px in the original Webflow CSS.
   --------------------------------------------------------------------------- */

/* H2-level headings: Section titles */
.heading-45,
.heading-45-copy,
.heading-46,
.heading-48,
.heading-62,
.heading-63,
.heading-64,
.heading-65,
.heading-69,
.heading-69-copy,
.heading-86,
.heading-87,
.title-wrap h2,
.title-wrap-copy h2,
.h2-center,
.h2-block {
  font-family: var(--hh-type-font-family) !important;
  font-size: var(--hh-type-size-h2) !important;
  font-weight: var(--hh-type-weight-bold) !important;
  line-height: var(--hh-type-lh-heading) !important;
  color: var(--hh-type-color-heading) !important;
}

/* ---------------------------------------------------------------------------
   SECTION 7: LEGACY HEADING CLASSES → H3 ROLE
   ---------------------------------------------------------------------------
   Map sub-section headings to --hh-type-size-h3.
   These are typically 20-28px in the original Webflow CSS.
   --------------------------------------------------------------------------- */

/* H3-level headings: Subsections, card groups */
.heading-20,
.heading-20-copy,
.heading-20-copy-copy,
.heading-20-copy-copy-copy,
.heading-20-copy-copy-copy-copy,
.heading-20-copy-copy-copy-copy-copy,
.heading-60,
.heading-60-copy,
.heading-60-copy-copy,
.heading-60-copy-copy-copy,
.heading-61,
.heading-68,
.heading-85,
.heading-glossary,
.heading-process,
.heading-detail-section,
.heading-detail-section-copy,
.heading-medium,
.heading-medium-2 {
  font-family: var(--hh-type-font-family) !important;
  font-size: var(--hh-type-size-h3) !important;
  font-weight: var(--hh-type-weight-semibold) !important;
  line-height: var(--hh-type-lh-heading) !important;
  color: var(--hh-type-color-heading) !important;
}

/* ---------------------------------------------------------------------------
   SECTION 8: LEGACY HEADING CLASSES → H4 ROLE
   ---------------------------------------------------------------------------
   Map card titles and small headings to --hh-type-size-h4.
   These are typically 18-24px in the original Webflow CSS.
   --------------------------------------------------------------------------- */

/* H4-level headings: Card titles, dropdown titles, small headings */
.title.article-v1,
.title.article-v1-copy,
.heading-13,
.heading-13-copy,
.heading-13-copy-copy,
.dropdown-title,
.dropdown-title-2,
.footer-title,
.footer-mobile-title,
.heading-small,
.heading-size-3,
.heading-4,
.heading-5,
.heading-6,
.card-title,
.nav-content-wrap .dropdown-title {
  font-family: var(--hh-type-font-family) !important;
  font-size: var(--hh-type-size-h4) !important;
  font-weight: var(--hh-type-weight-semibold) !important;
  line-height: var(--hh-type-lh-heading) !important;
  color: var(--hh-type-color-heading) !important;
}

/* ---------------------------------------------------------------------------
   SECTION 9: LEGACY PARAGRAPH CLASSES → BODY-LG ROLE
   ---------------------------------------------------------------------------
   Map lead paragraphs and introductions to --hh-type-size-body-lg (22px).
   --------------------------------------------------------------------------- */

/* Large body text: Lead paragraphs, introductions */
.paragraph-large,
.paragraph-large-2,
.paragraph-large-2-copy,
.paragraph-large-2-copy-copy,
.paragraph-large-2-copycopy,
.paragraph-large-2-copycopy-copy,
.paragraph-large-3,
.paragraph-intro,
.paragraph-top-page,
.paragraph-centred.blog-post-copy,
.paragraph-centred.blog-post,
.text-medium,
.text-medium-copy,
.text-medium-copy-2,
.paragraph-40,
.paragraph-40.hero-v1,
.text-block-82,
.text-block-82-copy {
  font-family: var(--hh-type-font-family) !important;
  font-size: var(--hh-type-size-body-lg) !important;
  font-weight: var(--hh-type-weight-regular) !important;
  line-height: var(--hh-type-lh-body) !important;
  color: var(--hh-type-color-body) !important;
}

/* ---------------------------------------------------------------------------
   SECTION 10: LEGACY PARAGRAPH CLASSES → BODY-MD ROLE (DEFAULT)
   ---------------------------------------------------------------------------
   Map standard body text to --hh-type-size-body-md (18px).
   --------------------------------------------------------------------------- */

/* Standard body text */
.paragraph-centred,
.paragraph-centred-2,
.paragraph-centred-copy,
.paragraph-centred-copy-copy,
.paragraph-copy,
.paragraph-help-article,
.paragraph-help-article-2,
.paragraph1,
[class^="paragraph-"]:not(.paragraph-large):not(.paragraph-small):not(.paragraph-intro):not(.paragraph-top-page) {
  font-family: var(--hh-type-font-family) !important;
  font-size: var(--hh-type-size-body-md) !important;
  font-weight: var(--hh-type-weight-regular) !important;
  line-height: var(--hh-type-lh-body) !important;
  color: var(--hh-type-color-body) !important;
}

/* ---------------------------------------------------------------------------
   SECTION 11: LEGACY PARAGRAPH CLASSES → BODY-SM ROLE
   ---------------------------------------------------------------------------
   Map small body text to --hh-type-size-body-sm (16px).
   --------------------------------------------------------------------------- */

/* Small body text */
.paragraph-small,
.paragraph-small-2,
.paragraph-small-3,
.paragraph-small-4,
.text-small,
.grey-text-2,
.grey-text-2.bluecopy,
.nav-link-details,
.nav-link-details-copy-long,
.text-bottom-page,
.text-bottom-page-2 {
  font-family: var(--hh-type-font-family) !important;
  font-size: var(--hh-type-size-body-sm) !important;
  font-weight: var(--hh-type-weight-regular) !important;
  line-height: var(--hh-type-lh-body) !important;
  color: var(--hh-type-color-body) !important;
}

/* ---------------------------------------------------------------------------
   SECTION 12: LEGACY TEXT-BLOCK CLASSES → METADATA ROLE
   ---------------------------------------------------------------------------
   Map metadata, captions, and UI labels to --hh-type-size-body-xs (14px).
   --------------------------------------------------------------------------- */

/* Metadata text: dates, reading times, captions */
.text-block-16,
.text-block-17,
.text-block-100,
.text-block-101,
.text-block-104,
.text-block-105,
.text-block-112,
.text-block-129,
.card-article-v1-category-link-text,
.reading-time-wrapper-copy,
.small-print-copy,
.small-print-link-copy,
.text-plain,
[class^="text-block-"] {
  font-family: var(--hh-type-font-family) !important;
  font-size: var(--hh-type-size-body-xs) !important;
  font-weight: var(--hh-type-weight-medium) !important;
  line-height: 1.4 !important;
  color: var(--hh-type-color-muted) !important;
}

/* ---------------------------------------------------------------------------
   SECTION 13: RICH TEXT CONTENT (.w-richtext)
   ---------------------------------------------------------------------------
   Normalize all content inside Webflow rich text blocks.
   This handles blog posts, help articles, and CMS-driven content.
   --------------------------------------------------------------------------- */

.w-richtext,
.rich-text-block,
[class*="rich-text-block"] {
  font-family: var(--hh-type-font-family) !important;
  color: var(--hh-type-color-body) !important;
}

/* Richtext headings */
.w-richtext h1,
.rich-text-block h1,
[class*="rich-text-block"] h1 {
  font-size: var(--hh-type-size-h1) !important;
  font-weight: var(--hh-type-weight-bold) !important;
  line-height: var(--hh-type-lh-heading) !important;
  color: var(--hh-type-color-heading) !important;
  margin-top: 1.5em !important;
  margin-bottom: 0.5em !important;
}

.w-richtext h2,
.rich-text-block h2,
[class*="rich-text-block"] h2 {
  font-size: var(--hh-type-size-h2) !important;
  font-weight: var(--hh-type-weight-bold) !important;
  line-height: var(--hh-type-lh-heading) !important;
  color: var(--hh-type-color-heading) !important;
  margin-top: 1.5em !important;
  margin-bottom: 0.5em !important;
}

.w-richtext h3,
.rich-text-block h3,
[class*="rich-text-block"] h3 {
  font-size: var(--hh-type-size-h3) !important;
  font-weight: var(--hh-type-weight-semibold) !important;
  line-height: var(--hh-type-lh-heading) !important;
  color: var(--hh-type-color-heading) !important;
  margin-top: 1.25em !important;
  margin-bottom: 0.5em !important;
}

.w-richtext h4,
.rich-text-block h4,
[class*="rich-text-block"] h4 {
  font-size: var(--hh-type-size-h4) !important;
  font-weight: var(--hh-type-weight-semibold) !important;
  line-height: var(--hh-type-lh-heading) !important;
  color: var(--hh-type-color-heading) !important;
  margin-top: 1em !important;
  margin-bottom: 0.5em !important;
}

.w-richtext h5,
.rich-text-block h5,
[class*="rich-text-block"] h5,
.w-richtext h6,
.rich-text-block h6,
[class*="rich-text-block"] h6 {
  font-size: var(--hh-type-size-body-lg) !important;
  font-weight: var(--hh-type-weight-semibold) !important;
  line-height: var(--hh-type-lh-heading) !important;
  color: var(--hh-type-color-heading) !important;
  margin-top: 1em !important;
  margin-bottom: 0.5em !important;
}

/* Richtext paragraphs */
.w-richtext p,
.rich-text-block p,
[class*="rich-text-block"] p {
  font-size: var(--hh-type-size-body-md) !important;
  font-weight: var(--hh-type-weight-regular) !important;
  line-height: var(--hh-type-lh-body) !important;
  color: var(--hh-type-color-body) !important;
  margin-bottom: 1em !important;
}

/* Richtext lists */
.w-richtext ul,
.w-richtext ol,
.rich-text-block ul,
.rich-text-block ol,
[class*="rich-text-block"] ul,
[class*="rich-text-block"] ol {
  font-size: var(--hh-type-size-body-md) !important;
  line-height: var(--hh-type-lh-body) !important;
  color: var(--hh-type-color-body) !important;
  margin-bottom: 1em !important;
  padding-left: 1.5em !important;
}

.w-richtext li,
.rich-text-block li,
[class*="rich-text-block"] li {
  margin-bottom: 0.5em !important;
}

/* Richtext links */
.w-richtext a,
.rich-text-block a,
[class*="rich-text-block"] a {
  color: #2799ff !important;
  text-decoration: underline !important;
}

.w-richtext a:hover,
.rich-text-block a:hover,
[class*="rich-text-block"] a:hover {
  color: #1a7bd4 !important;
}

/* Richtext blockquotes */
.w-richtext blockquote,
.rich-text-block blockquote,
[class*="rich-text-block"] blockquote {
  font-size: var(--hh-type-size-body-lg) !important;
  font-style: italic !important;
  font-weight: var(--hh-type-weight-medium) !important;
  color: var(--hh-type-color-heading) !important;
  border-left: 4px solid #2799ff !important;
  padding-left: 1.5em !important;
  margin: 1.5em 0 !important;
}

/* Richtext code */
.w-richtext code,
.rich-text-block code,
[class*="rich-text-block"] code {
  font-family: "SF Mono", "Monaco", "Consolas", monospace !important;
  font-size: 0.9em !important;
  background: #f3f7fe !important;
  padding: 0.2em 0.4em !important;
  border-radius: 4px !important;
}

.w-richtext pre,
.rich-text-block pre,
[class*="rich-text-block"] pre {
  font-family: "SF Mono", "Monaco", "Consolas", monospace !important;
  font-size: var(--hh-type-size-body-sm) !important;
  background: #1e2235 !important;
  color: #e8ecf5 !important;
  padding: 1em !important;
  border-radius: 8px !important;
  overflow-x: auto !important;
  margin: 1em 0 !important;
}

.w-richtext pre code,
.rich-text-block pre code,
[class*="rich-text-block"] pre code {
  background: transparent !important;
  padding: 0 !important;
}

/* ---------------------------------------------------------------------------
   SECTION 14: BULK HEADING CLASS NORMALIZATION
   ---------------------------------------------------------------------------
   Apply base typography to ALL numbered heading classes (heading-1 to heading-99).
   This uses attribute selectors to catch all variants.
   --------------------------------------------------------------------------- */

/* All numbered heading classes get base heading styles */
[class*="heading-1"],
[class*="heading-2"],
[class*="heading-3"],
[class*="heading-4"],
[class*="heading-5"],
[class*="heading-6"],
[class*="heading-7"],
[class*="heading-8"],
[class*="heading-9"] {
  font-family: var(--hh-type-font-family) !important;
  color: var(--hh-type-color-heading) !important;
  line-height: var(--hh-type-lh-heading) !important;
}

/* ---------------------------------------------------------------------------
   SECTION 15: BULK TITLE CLASS NORMALIZATION
   ---------------------------------------------------------------------------
   Apply base typography to ALL title classes.
   --------------------------------------------------------------------------- */

[class^="title"],
[class*=" title"] {
  font-family: var(--hh-type-font-family) !important;
  color: var(--hh-type-color-heading) !important;
  font-weight: var(--hh-type-weight-bold) !important;
  line-height: var(--hh-type-lh-heading) !important;
}

/* ---------------------------------------------------------------------------
   SECTION 16: RESPONSIVE TYPOGRAPHY
   ---------------------------------------------------------------------------
   Scale down typography on smaller screens for better readability.
   --------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
  /* Tablet adjustments */
  h1, .title.blog-post-copy, .heading-jumbo, .main-page-heading {
    font-size: clamp(30px, 4.5vw, 48px) !important;
  }

  h2, .heading-55, .heading-50 {
    font-size: clamp(26px, 3.5vw, 38px) !important;
  }

  h3, .heading-60, .heading-61 {
    font-size: clamp(22px, 2.8vw, 30px) !important;
  }
}

@media screen and (max-width: 767px) {
  /* Mobile landscape adjustments */
  h1, .title.blog-post-copy, .heading-jumbo, .main-page-heading {
    font-size: clamp(26px, 6vw, 36px) !important;
  }

  h2, .heading-55, .heading-50 {
    font-size: clamp(22px, 5vw, 30px) !important;
  }

  h3, .heading-60, .heading-61 {
    font-size: clamp(18px, 4vw, 24px) !important;
  }

  h4, .dropdown-title, .heading-13 {
    font-size: clamp(16px, 3.5vw, 20px) !important;
  }

  p, .paragraph-centred, [class^="paragraph-"] {
    font-size: 16px !important;
  }

  /* Richtext mobile */
  .w-richtext p,
  .rich-text-block p {
    font-size: 16px !important;
  }
}

@media screen and (max-width: 479px) {
  /* Mobile portrait adjustments */
  h1, .title.blog-post-copy, .heading-jumbo, .main-page-heading {
    font-size: 24px !important;
    letter-spacing: -0.01em !important;
  }

  h2, .heading-55, .heading-50 {
    font-size: 20px !important;
  }

  h3, .heading-60, .heading-61 {
    font-size: 18px !important;
  }

  h4, .dropdown-title, .heading-13 {
    font-size: 16px !important;
  }

  h5, h6 {
    font-size: 15px !important;
  }

  p, .paragraph-centred, [class^="paragraph-"] {
    font-size: 15px !important;
  }

  .w-richtext p,
  .rich-text-block p {
    font-size: 15px !important;
  }
}

/* ---------------------------------------------------------------------------
   SECTION 17: FONT-STYLE RESET
   ---------------------------------------------------------------------------
   Prevent browsers from synthesizing italics and ensure consistent rendering.
   --------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
p, span, div, a, li,
[class*="heading-"],
[class*="title"],
[class*="paragraph-"],
[class*="text-block-"],
.w-richtext,
.w-richtext * {
  font-style: normal !important;
}

/* Only apply italics when explicitly using <em> or <i> in content */
.w-richtext em,
.w-richtext i,
.rich-text-block em,
.rich-text-block i {
  font-style: italic !important;
}

/* ---------------------------------------------------------------------------
   END OF TYPOGRAPHY STANDARDIZATION SYSTEM
   ========================================================================== */

/* ==========================================================================
   WEBFLOW BACKGROUND VIDEO FIX
   ==========================================================================

   THE PROBLEM:
   ------------
   Webflow's exported CSS (css_herohunt.webflow.shared.6862fe37d.css) contains
   this rule at line ~1157:

       .w-background-video > video {
         position: absolute;
         inset: -100%;        <-- THIS IS THE CULPRIT
         z-index: -100;
         ...
       }

   The `inset: -100%` is a CSS shorthand that sets:
       top: -100%;
       right: -100%;
       bottom: -100%;
       left: -100%;

   This positions the video element 100% of the container's dimensions
   OUTSIDE the container in ALL directions. The video is literally placed
   completely off-screen and invisible.

   WHY WEBFLOW DOES THIS:
   ----------------------
   Webflow's JavaScript (js_webflow.schunk.12f66a7a1043bbab.js) contains an
   "object-fit polyfill" that runs at page load. This polyfill:
   1. Finds elements with `data-object-fit` attribute
   2. Calculates proper positioning based on aspect ratio
   3. Sets explicit `top`, `left`, `margin` values that override `inset`

   The `inset: -100%` is essentially a "hide by default, show via JS" pattern.

   WHY IT FAILS IN NEXT.JS:
   ------------------------
   1. Next.js Script loading with `strategy="afterInteractive"` may have
      different timing than Webflow's expected environment
   2. The Webflow JS bundle uses `$(document).ready()` and relies on a
      global `Webflow` object being properly initialized
   3. The object-fit polyfill may fail silently if conditions aren't met
   4. React's hydration can cause timing conflicts with DOM manipulation

   ADDITIONAL ISSUE - RESPONSIVE HIDING:
   -------------------------------------
   The Webflow CSS also contains this media query rule at line ~69221:

       @media screen and (max-width: 991px) {
         .div-block-350 {
           display: none;
         }
       }

   This hides the entire video section on tablets and mobile devices.

   THE SOLUTION:
   -------------
   Override ALL positioning properties with !important to ensure the video
   is visible regardless of whether the Webflow JS runs successfully.
   Also ensure container elements have proper dimensions and visibility.

   ========================================================================== */

.w-background-video > video {
  /*
   * Override `inset: -100%` which positions video off-screen.
   * We set each property individually because some browsers may not
   * fully override `inset` shorthand with just `inset: 0`.
   */
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  /*
   * Original CSS has `z-index: -100` which puts video behind content.
   * We need positive z-index so video appears above the container background.
   */
  z-index: 1 !important;

  /*
   * Ensure video fills the container and maintains aspect ratio.
   * object-fit: cover crops the video to fill the container.
   */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/*
 * Override the responsive `display: none` rule.
 * The original Webflow CSS hides .div-block-350 on screens <= 991px.
 * We want the video visible on all screen sizes.
 */
.div-block-350 {
  display: block !important;
  min-height: 300px; /* Prevent container collapse if video fails to load */
}

/*
 * Ensure the background video wrapper has proper positioning context
 * and minimum dimensions so the absolutely-positioned video has bounds.
 */
.w-background-video {
  position: relative !important;
  min-height: 300px;
}

/*
 * Ensure the parent container doesn't collapse.
 * Uses :has() selector (supported in modern browsers) to target
 * only containers that actually have the video section.
 */
.w-layout-blockcontainer.w-container:has(.div-block-350) {
  min-height: 300px;
}

/* ==========================================================================
   PRODUCT HERO SECTION - CENTERED VARIANT
   ==========================================================================

   When ProductHeroSection has no image/video, it uses these utility classes
   to create a centered, full-width layout instead of the default two-column
   split layout.

   Applied when: !hasMedia (no image or video)
   ========================================================================== */

/* Parent section - ensure content can expand */
.ui-product-hero--centered {
  text-align: center;
}

/* Make the split container full width and column-oriented when no image */
.ui-product-hero__left--full {
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-right: 0 !important;
}

/* Make the text block (div-block-356) full width when it's the only content */
.ui-product-hero__left--full .div-block-356,
.ui-product-hero__left--full .ui-product-hero__text {
  width: 100% !important;
  max-width: 850px !important;
  text-align: center !important;
}

/* Title styling for centered variant - remove any overflow hidden and ensure visibility */
.ui-product-hero--centered .title.hero-v1,
.ui-product-hero--centered .ui-product-hero__title {
  overflow: visible !important;
  width: 100% !important;
  max-width: none !important;
}

/* Ensure paragraph is also centered */
.ui-product-hero--centered .paragraph-40.hero-v1,
.ui-product-hero--centered .ui-product-hero__paragraph {
  text-align: center !important;
  max-width: 700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Center the CTA button */
.ui-product-hero--centered .ui-product-hero__cta {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================================================
   QUOTE SECTION CENTERING FIX
   ==========================================================================

   THE PROBLEM:
   ------------
   The Webflow CSS for .quote-div has:
     margin: 100px 118px;
     display: flex;
     justify-content: center;
     align-items: center;

   And .heading-61 has:
     text-align: center;
     max-width: 600px;

   HOWEVER, there are several issues:
   1. The .heading-61 max-width limits the container but doesn't center it
   2. The globals.css fix for margin:auto is overridden by Webflow CSS
   3. The text appears left-aligned because the h3 is not horizontally centered

   THE FIX:
   --------
   Force centering on the .quote-div and ensure .heading-61 is properly centered
   within it. This file loads LAST so these rules take precedence.

   ========================================================================== */

.quote-div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 900px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.quote-div .heading-61 {
  text-align: center !important;
  width: 100% !important;
  max-width: 800px !important;
}

.quote-div .italic-text {
  max-width: none !important;
  display: block !important;
  text-align: center !important;
}

/* ==========================================================================
   CLOSING CTA SECTION - GRADIENT/IMAGE COORDINATION FIX
   ==========================================================================

   THE PROBLEM:
   ------------
   The Webflow CSS for .closing-cta-section has:
     background-color: var(--herohunt-dark-blue);
     background-image: linear-gradient(to bottom, var(--herohunt-dark-blue) 90%, #2799ff96 96%);

   This gradient is ALWAYS applied to the section. However, the gradient was
   designed to visually transition INTO a logo/image row at the bottom
   (div-block-175 with image-113).

   In the React port, the logo image is conditionally rendered based on
   whether logoImage.src exists. This creates a visual mismatch: when the
   section renders WITHOUT the logo image, you see an awkward cyan gradient
   glow at the bottom with nothing to transition into.

   THE FIX:
   --------
   The ClosingCtaSection component now adds a conditional class:
   - `ui-closing-cta--with-logo` when logoImage.src exists

   We override the Webflow CSS to:
   1. Remove the gradient by default (no logo = no gradient)
   2. Only apply the gradient when the --with-logo class is present

   This ensures gradient and image always appear/disappear together as a
   cohesive visual unit, matching the original Webflow design intent.

   ========================================================================== */

/* Remove the gradient by default when no logo image is present */
.closing-cta-section {
  background-image: none !important;
}

/* Only apply the gradient when the logo image exists */
.closing-cta-section.ui-closing-cta--with-logo {
  background-image: linear-gradient(to bottom, var(--herohunt-dark-blue) 90%, #2799ff96 96%) !important;
}

/*
 * Bottom padding fix: The wrapper .div-block-176-copy has padding-bottom: 0
 * because the logo image row was supposed to provide visual spacing.
 * When there's no logo image, we need to add bottom padding to the wrapper.
 */
.closing-cta-section:not(.ui-closing-cta--with-logo) .div-block-176-copy,
.closing-cta-section:not(.ui-closing-cta--with-logo) .div-block-176,
.closing-cta-section:not(.ui-closing-cta--with-logo) .ui-closing-cta__wrapper {
  padding-bottom: 80px !important;
}

/* ==========================================================================
   RECRUITGPT SECTION - GRADIENT REMOVAL FIX
   ==========================================================================

   THE PROBLEM:
   ------------
   The Webflow CSS for .recruitgpt-section has:
     background-image: linear-gradient(to bottom, var(--secondary-2), white);

   Where --secondary-2 is #e6f2fc (light blue).

   This creates a vertical blue-to-white gradient across the FULL WIDTH of
   the section. Since the inner content (.why-wrapper--2-copy) is in a
   centered container with limited max-width, this gradient is visible on
   the LEFT and RIGHT margins outside the content area.

   Additionally, there were conflicting CSS definitions in the Webflow CSS
   where .why-wrapper--2-copy has multiple definitions with different
   background settings (some with gradients, some transparent).

   THE FIX:
   --------
   Remove the gradient from .recruitgpt-section entirely and set a clean
   white background. The section content already has its own styling.

   ========================================================================== */

.recruitgpt-section {
  background-image: none !important;
  background-color: white !important;
}

/* Also ensure the inner wrapper has no conflicting gradient */
.recruitgpt-section .why-wrapper--2-copy {
  background-image: none !important;
  background-color: transparent !important;
}

/* ==========================================================================
   HOMEPAGE SEARCH BAR INPUT WIDTH FIX
   ==========================================================================

   THE PROBLEM:
   ------------
   The homepage hero search bar input ("Find me a salesperson...") appears
   too narrow despite having `width: 100%` and `flex: 1`.

   ROOT CAUSE ANALYSIS (5 WHYS):
   -----------------------------
   1. WHY is the input narrow? → Its width is limited by its parent containers
   2. WHY are parents limited? → .main-section-landing-copy-copy has
      `align-items: center` with `flex-direction: column`
   3. WHY does that cause narrowness? → In a flex column with `align-items: center`,
      children shrink to intrinsic content width instead of stretching
   4. WHY doesn't .div-block-151 have explicit width? → Webflow CSS at line 27749
      defines it as a flex container but sets NO width property
   5. WHY wasn't this fixed? → The original Webflow site may use JavaScript to
      set width dynamically, which doesn't run properly in Next.js

   THE HIERARCHY:
   --------------
   .main-section-landing-copy-copy (align-items: center → SHRINKS children)
     └── .div-block-151 (NO WIDTH SET)
         └── .search-bar-div (width: 100% of shrunk parent)
             └── .form-block-main-desktop
                 └── .form-7 (width: 100%)
                     └── .text-field-11 (width: 100%, flex: 1)

   THE FIX:
   --------
   Give .div-block-151 an explicit width so its child containers can expand.
   Using max-width to prevent excessive width on ultra-wide screens.

   ========================================================================== */

.main-section-landing-copy-copy .div-block-151 {
  width: 100% !important;
  max-width: 750px !important;
}

/*
 * Target ONLY the search bar wrapper, not all children (which would affect the image)
 */

/* Ensure the search bar div inside expands to full width */
.main-section-landing-copy-copy .search-bar-div {
  width: 100% !important;
}

/* Ensure the form block takes full width */
.main-section-landing-copy-copy .form-block-main-desktop {
  width: 100% !important;
}

/* Ensure the form takes full width */
.main-section-landing-copy-copy .form-7 {
  width: 100% !important;
  justify-content: stretch !important;
}

/* The input field should grow to fill available space */
.main-section-landing-copy-copy .text-field-11 {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}

/* Explicit class for the React wrapper div around searchBarHtml */
.ui-landing-hero__search-wrap {
  width: 100% !important;
}

/*
 * Keep align-items: center for the wrapper (preserves image centering),
 * but the search-wrap class has explicit width: 100% to override shrinking.
 */

/* ==========================================================================
   BLOG DETAIL PAGE - COLLECTION ITEM HERO FIXES
   ==========================================================================

   THE PROBLEMS:
   -------------
   1. Description text (.paragraph-centred.blog-post-copy) is too large
   2. Hero image is too small and constrained
   3. Author section (div-block-181) looks poorly laid out

   THE FIX:
   --------
   Override Webflow CSS to improve typography, image sizing, and author layout.

   ========================================================================== */

/* 1. DESCRIPTION TEXT - Reduce font size for better readability */
.paragraph-centred.blog-post-copy,
.paragraph-centred.blog-post {
  font-size: 1.1rem !important;
  line-height: 1.6 !important;
  max-width: 680px !important;
}

/* 2. HERO IMAGE - Make it much larger and properly displayed */
.why-section.blog-post-hero .container-default-copy {
  max-width: 1100px !important;
  width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  margin-top: 40px !important;
}

.why-section.blog-post-hero .container-default-copy img {
  width: 100% !important;
  height: auto !important;
  max-height: 600px !important;
  object-fit: cover !important;
  border-radius: 16px !important;
  display: block !important;
}

/* ==========================================================================
   SIDEBAR PROMO CARD - PRIMARY CTA BUTTON FIX
   ==========================================================================

   THE PROBLEM:
   ------------
   The sidebar promo card's primary action (.google-sign-in-link) doesn't look
   like a proper button - it's styled as a Google sign-in link.

   THE FIX:
   --------
   Style it as a proper primary button matching the site's design system.

   ========================================================================== */

/* Primary action button in sidebar */
.card.author-copy .google-sign-in-link,
.card.author-copy .sign-in-google-div a:first-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #2799ff !important;
  color: white !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, transform 0.15s ease !important;
  width: 100% !important;
  text-align: center !important;
}

.card.author-copy .google-sign-in-link:hover,
.card.author-copy .sign-in-google-div a:first-child:hover {
  background-color: #1a7bd4 !important;
  transform: translateY(-1px) !important;
}

/* Hide any Google icon if present */
.card.author-copy .google-sign-in-link img,
.card.author-copy .sign-in-google-div a:first-child img {
  display: none !important;
}

/* CTA wrapper spacing */
.card.author-copy .sign-in-google-div {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 20px !important;
}

/* Secondary link styling */
.card.author-copy .link-36 {
  display: block !important;
  text-align: center !important;
  font-size: 14px !important;
  color: #2799ff !important;
  text-decoration: none !important;
}

.card.author-copy .link-36:hover {
  text-decoration: underline !important;
}

/* New Button component styling in sidebar */
.ui-sidebar-promo__cta-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 20px !important;
}

.ui-sidebar-promo__primary-btn {
  width: 100% !important;
  justify-content: center !important;
}

.ui-sidebar-promo__secondary {
  text-align: center !important;
  display: block !important;
}

/* ==========================================================================
   ENTERPRISE CTA SECTION - CHAT BUTTON
   ========================================================================== */

.ui-enterprise-cta__button-wrap {
  margin-top: 24px !important;
  text-align: center !important;
}

.ui-enterprise-cta__button {
  min-width: 180px !important;
}

/* ==========================================================================
   RESPONSIVE FIXES FOR BLOG DETAIL PAGE
   ========================================================================== */

@media screen and (max-width: 767px) {
  /* On mobile, stack top row vertically */
  .ui-article-meta__top-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* Keep avatar + info horizontal even on mobile */
  .div-block-186 {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .image-86 {
    width: 40px !important;
    height: 40px !important;
  }

  /* Wrap author info on small screens */
  .div-block-187 {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Share row stays horizontal on mobile */
  .div-block-188 {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .why-section.blog-post-hero .container-default-copy {
    margin-top: 24px !important;
  }

  .why-section.blog-post-hero .container-default-copy img {
    border-radius: 12px !important;
    max-height: 400px !important;
  }
}

/* ==========================================================================
   COMPREHENSIVE MOBILE RESPONSIVENESS - SYSTEM LEVEL OVERRIDES
   ==========================================================================

   These styles load LAST and provide highest specificity overrides for
   mobile responsiveness across all components. The !important flags ensure
   these rules take precedence over Webflow CSS.

   ========================================================================== */

/* --------------------------------------------------------------------------
   TABLET BREAKPOINT (max-width: 991px)
   -------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
  /* Collection Card Grid - 2 columns on tablet */
  .blog-v1-grid.w-dyn-items,
  .latest-articles-grid.w-dyn-items {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

  /* Hero grids - stack */
  .grid-2-columns-content-centered,
  .hero-v1-wrapper-2-copy {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    align-items: center !important;
  }

  /* How It Works grid - 2 columns */
  .w-layout-grid.why-v2-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
  }

  /* Values grid - 2 columns */
  .w-layout-grid.our-values-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

  /* Stats grid - 2 columns */
  .w-layout-grid.grid-12 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

  /* Features grid - 1 column */
  .w-layout-grid.features-v2-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Feature wrapper - stack on tablet */
  .feature-wrapper-2 {
    flex-direction: column !important;
    text-align: center !important;
  }

  .image.feature {
    max-width: 400px !important;
    margin: 0 auto 24px !important;
  }

  /* Comparison table - 2 columns */
  .w-layout-grid.our-values-grid-copy {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  /* Product hero - full width content */
  .split-content.hero-v1-left-copy {
    width: 100% !important;
    max-width: none !important;
    padding-right: 0 !important;
  }

  .div-block-356 {
    text-align: center !important;
  }

  .div-block-357 {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
  }

  /* Tabs - horizontal scroll */
  .blog-categories-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
  }

  .blog-categories-grid::-webkit-scrollbar {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   MOBILE LANDSCAPE BREAKPOINT (max-width: 767px)
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  /* Collection Card Grid - 1 column */
  .blog-v1-grid.w-dyn-items,
  .latest-articles-grid.w-dyn-items {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Collection Card - horizontal layout on mobile */
  .card.article-v1.w-inline-block {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
  }

  .image-wrapper.article-v1 {
    width: 120px !important;
    height: 90px !important;
    flex-shrink: 0 !important;
  }

  .moving-bg-1.article-v1-copy {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .card-article-v1-content {
    flex: 1 !important;
    padding: 8px 12px !important;
  }

  .title.article-v1-copy {
    font-size: 1rem !important;
    margin-bottom: 4px !important;
  }

  /* Hide category on mobile cards */
  .article-v1-category-container {
    display: none !important;
  }

  /* How It Works / Values - 1 column */
  .w-layout-grid.why-v2-grid,
  .w-layout-grid.our-values-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Stats - 1 column with horizontal layout */
  .w-layout-grid.grid-12 {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .div-block-205 {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 16px !important;
  }

  .benefit-image {
    width: 60px !important;
    height: 60px !important;
    flex-shrink: 0 !important;
  }

  /* Comparison table - 1 column */
  .w-layout-grid.our-values-grid-copy {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Footer - single column */
  .footer-menu-wrapper {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .learn-more-links {
    flex: 1 1 100% !important;
    text-align: center !important;
  }

  .footer-content-links {
    text-align: center !important;
  }

  .list-footer.w-list-unstyled {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Footer legal */
  .small-print-wrapper {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
  }

  .split-content.small-print-left {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  /* CTA buttons */
  .big-button-2 {
    display: none !important;
  }

  .big-button-2-mobile {
    display: inline-flex !important;
    width: 100% !important;
    max-width: 320px !important;
    justify-content: center !important;
  }

  .button-holder {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* Benefits row - stack */
  .no-creditcard-div-copy.main-page {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  /* Quote section */
  .quote-div {
    margin: 32px auto !important;
    padding: 20px 16px !important;
  }

  .heading-61 {
    font-size: 1.125rem !important;
  }

  /* USP section */
  .usps-section-home {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 32px 20px !important;
  }

  .heading-60 {
    font-size: 1rem !important;
    text-align: center !important;
  }

  /* Landing hero */
  .main-section-landing-copy-copy {
    padding: 32px 20px 48px !important;
  }

  .main-page-heading {
    font-size: clamp(1.5rem, 6vw, 2.25rem) !important;
  }

  /* Landing search bar */
  .form-7 {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .text-field-11,
  .search-bar-button {
    width: 100% !important;
  }

  /* Product hero */
  .section-50.hero-v1-copy {
    padding: 32px 0 40px !important;
  }

  .title.hero-v1 {
    font-size: clamp(1.5rem, 5vw, 2rem) !important;
    text-align: center !important;
  }

  .paragraph-40.hero-v1 {
    text-align: center !important;
  }

  /* FAQ */
  .faq-section-copy {
    padding: 32px 16px !important;
  }

  .question-title {
    font-size: 0.9375rem !important;
  }

  /* Blog post content - hide sidebar, show mobile promo */
  .blog-post-wrapper {
    flex-direction: column !important;
  }

  .split-content.blog-post-right-copy {
    width: 100% !important;
  }

  .blog-post-sidebar {
    display: none !important;
  }

  .card.author-mobile-copy {
    display: block !important;
  }

  /* Collection item hero */
  .title.blog-post-copy {
    font-size: clamp(1.5rem, 5vw, 2rem) !important;
  }
}

/* --------------------------------------------------------------------------
   MOBILE PORTRAIT BREAKPOINT (max-width: 479px)
   -------------------------------------------------------------------------- */

@media screen and (max-width: 479px) {
  /* Tighter container padding */
  .container-default,
  .container-default-2,
  .w-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Collection card - more compact */
  .image-wrapper.article-v1 {
    width: 100px !important;
    height: 75px !important;
  }

  .title.article-v1-copy {
    font-size: 0.9375rem !important;
  }

  /* Full width buttons */
  .button-3,
  .button-3-mobile,
  .hh-btn {
    width: 100% !important;
    padding: 12px 16px !important;
  }

  /* Smaller typography */
  .main-page-heading {
    font-size: 1.375rem !important;
  }

  .title.hero-v1 {
    font-size: 1.25rem !important;
  }

  /* CTA section */
  .closing-cta-section .div-block-176 {
    padding: 28px 16px !important;
  }

  .heading-50-copy {
    font-size: 1.25rem !important;
  }

  /* Comparison cards */
  .card.pricing-comparison {
    padding: 16px !important;
  }

  .title.gradient {
    font-size: 1rem !important;
  }
}

/* ==========================================================================
   DROPDOWN ANIMATION STANDARDIZATION
   ==========================================================================

   THE PROBLEM:
   ------------
   The three navigation dropdowns (Product, Use Cases, Knowledge) have
   inconsistent appearance animations. Some fade/slide in, others just pop.

   THE FIX:
   --------
   Standardize all dropdown panels to use the same fade + slide animation
   for a cohesive navigation experience.

   SELECTORS:
   ----------
   - .navigation-dropdown (Product dropdown)
   - .navigation-dropdown---use-cases (Use Cases AND Knowledge dropdowns)
   - .w-dropdown-list (Webflow base dropdown class - fallback)

   ========================================================================== */

/* Base state: hidden with slight offset (prepare for animation) */
.navigation-dropdown,
.navigation-dropdown---use-cases,
.nav-dropdown .w-dropdown-list {
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Open state: visible and in position */
.w-dropdown:hover .navigation-dropdown,
.w-dropdown:hover .navigation-dropdown---use-cases,
.w-dropdown:hover .w-dropdown-list,
.ui-dropdown--open .navigation-dropdown,
.ui-dropdown--open .navigation-dropdown---use-cases,
.ui-dropdown--open .w-dropdown-list,
.w-dropdown-list.w--open {
  opacity: 1 !important;
  transform: translateY(0) !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Ensure React-controlled dropdowns work with ui-dropdown classes */
.ui-dropdown__list {
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.ui-dropdown__list--open {
  opacity: 1 !important;
  transform: translateY(0) !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Dropdown toggle icon rotation animation */
.ui-dropdown__icon {
  transition: transform 0.2s ease !important;
}

.ui-dropdown__icon--open,
.ui-dropdown--open .ui-dropdown__icon {
  transform: rotate(180deg) !important;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS OVERRIDES (March 2026)
   ==========================================================================
   This section contains mobile-specific overrides that MUST load after
   Webflow CSS to take precedence. These fix critical mobile issues.
   ========================================================================== */

/* --------------------------------------------------------------------------
   MOBILE DROPDOWN BEHAVIOR
   On touch devices and small screens, use click-to-toggle instead of hover
   -------------------------------------------------------------------------- */

@media (hover: none), (max-width: 991px) {
  /* On mobile, dropdowns should be click-controlled, not hover */
  .w-dropdown:hover .w-dropdown-list {
    /* Disable hover behavior on mobile */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Only show when explicitly opened via React state */
  .ui-dropdown--open .w-dropdown-list,
  .ui-dropdown--open .ui-dropdown__list,
  .w-dropdown-list.ui-dropdown__list--open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  /* Mobile dropdown positioning - static instead of absolute */
  .ui-nav-mobile .w-dropdown-list,
  .ui-nav-mobile .ui-dropdown__list {
    position: static !important;
    width: 100% !important;
    background: #f8fafc !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
    margin: 0 !important;
  }

  /* Mobile dropdown links */
  .ui-nav-mobile .dropdown-link-2,
  .ui-nav-mobile .nav-link-blog {
    padding: 12px 24px !important;
    display: block !important;
    border-bottom: none !important;
  }
}

/* --------------------------------------------------------------------------
   CRITICAL NAVIGATION FIXES
   Ensure hamburger menu is visible and functional on mobile
   -------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
  /* Force hamburger button visibility */
  .w-nav-button,
  .nav__mobilebutton,
  .ui-mobile-menu-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Hide desktop nav menu */
  .nav-menu-9 {
    display: none !important;
  }

  /* But show it inside mobile nav container */
  .ui-nav-mobile .nav-menu-9 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  /* Nav container should use space-between for logo + hamburger */
  .nav__container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  /* Nav buttons (CTAs) hidden in header, shown in mobile menu */
  .nav__buttons {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   FORM INPUT MOBILE FIXES
   Prevent iOS zoom on input focus (requires font-size >= 16px)
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  input,
  textarea,
  select,
  .hh-field,
  .hh-input,
  .hh-textarea,
  .hh-select,
  .text-field-14,
  .text-field-11 {
    font-size: 16px !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
  }

  /* Ensure touch targets are large enough */
  .hh-btn,
  .button-3,
  .button-primary,
  .button-secondary,
  .w-button {
    min-height: 48px !important;
    padding: 14px 24px !important;
    font-size: 16px !important;
  }
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY MOBILE SCALING
   Ensure text is readable on all screen sizes
   -------------------------------------------------------------------------- */

@media screen and (max-width: 479px) {
  /* Display headings */
  h1,
  .main-page-heading,
  .text-4xl,
  .text-4xl.letters-tight-copy {
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.2 !important;
  }

  /* Section headings */
  h2,
  .heading-55,
  .title.faqs,
  .title.testimonials-v3 {
    font-size: clamp(20px, 5vw, 26px) !important;
    line-height: 1.25 !important;
  }

  /* Card titles */
  h3,
  .title.article-v1-copy,
  .title.our-values,
  .title.gradient {
    font-size: clamp(16px, 4vw, 20px) !important;
    line-height: 1.3 !important;
  }

  /* Body text */
  p,
  .paragraph-large,
  .text-medium-copy,
  .paragraph-centred {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* Small text */
  .paragraph-10,
  .text-block-101,
  .small-print-link-copy,
  .small-print-copy {
    font-size: 13px !important;
  }
}

/* --------------------------------------------------------------------------
   GRID LAYOUT MOBILE FIXES
   Ensure grids collapse to single column on mobile
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  /* Blog card grid */
  .blog-v1-grid,
  .latest-articles-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* How it works / Why grid */
  .why-v2-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Values grid */
  .our-values-grid,
  .our-values-grid-copy {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Stats grid */
  .grid-12 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Open positions grid */
  .open-positions-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Offices grid */
  .our-offices-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Related use cases */
  .related-use-cases-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Features grid */
  .features-v2-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* --------------------------------------------------------------------------
   HERO SECTION MOBILE FIXES
   Proper stacking and spacing for hero sections
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  /* All hero sections - consistent padding */
  .why-section.hero-v1,
  .why-section.about-hero,
  .why-section.contact-hero,
  .why-section.blog-hero-v1,
  .why-section.careers-hero {
    padding: 100px 16px 40px !important;
  }

  /* Hero grid - stack vertically */
  .grid-2-columns-content-centered,
  .hero-v1-wrapper,
  .hero-v1-wrapper-2-copy {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }

  /* Hero left column (text) */
  .split-content.hero-v1-left,
  .split-content.hero-v1-left-copy {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  /* Hero right column (image/form) */
  .div-block-357,
  .div-block-198 {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   FOOTER MOBILE FIXES
   Stack columns and center content
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  .footer {
    padding: 40px 16px 32px !important;
  }

  .footer-menu-wrapper {
    flex-direction: column !important;
    gap: 32px !important;
  }

  .learn-more-links {
    width: 100% !important;
    text-align: center !important;
  }

  .list-footer {
    align-items: center !important;
  }

  .small-print-wrapper {
    flex-direction: column !important;
    gap: 16px !important;
    text-align: center !important;
  }

  .split-content.small-print-left,
  .split-content.small-print-right {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
}

/* --------------------------------------------------------------------------
   CARD COMPONENT MOBILE FIXES
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  /* Blog cards - vertical layout */
  .card.article-v1 {
    flex-direction: column !important;
  }

  .image-wrapper.article-v1 {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/10 !important;
  }

  .card-article-v1-content {
    padding: 16px !important;
  }

  /* Pricing/comparison cards */
  .card.pricing-comparison {
    padding: 20px 16px !important;
  }

  /* Open position cards */
  .card.open-position-copy {
    padding: 20px 16px !important;
  }
}

/* --------------------------------------------------------------------------
   BLOG POST LAYOUT MOBILE FIXES
   -------------------------------------------------------------------------- */

/* CRITICAL: The blog-post-wrapper has negative margins that cause horizontal
   scrolling on mobile. This fix removes them on smaller screens. */
@media screen and (max-width: 991px) {
  .blog-post-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-direction: column !important;
    gap: 32px !important;
  }

  .split-content.blog-post-right,
  .split-content.blog-post-right-copy {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

/* Prevent any horizontal overflow from blog post sections.
   CRITICAL: Use 'clip' NOT 'hidden' - overflow:hidden breaks position:sticky! */
.why-section.blog-post,
.why-section.blog-post-hero {
  overflow-x: clip !important;
}

.container-1299 {
  overflow-x: clip !important;
}

/* --------------------------------------------------------------------------
   CTA SECTION MOBILE FIXES
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  .closing-cta-section .div-block-176,
  .closing-cta-section .div-block-176-copy {
    padding: 40px 20px !important;
  }

  /* Benefits row - stack */
  .no-creditcard-div-copy.main-page {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .div-block-155 {
    justify-content: center !important;
  }

  /* Buttons - stack and full width */
  .button-holder {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .big-button-2 {
    display: none !important;
  }

  .big-button-2-mobile {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
  }
}

/* --------------------------------------------------------------------------
   FAQ SECTION MOBILE FIXES
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  .faq-section-copy {
    padding: 40px 16px !important;
  }

  .faq-question-bar {
    padding: 14px !important;
    gap: 12px !important;
  }

  .question-title {
    font-size: 15px !important;
    text-align: left !important;
  }

  .faq-content-2 {
    padding: 0 14px 14px !important;
  }

  .faq-paragraph {
    font-size: 14px !important;
    text-align: left !important;
  }
}

/* --------------------------------------------------------------------------
   TABS MOBILE FIXES
   Horizontal scrolling tabs
   -------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
  .blog-categories-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 8px !important;
  }

  .blog-categories-grid::-webkit-scrollbar {
    display: none !important;
  }

  .blog-categories-grid .collection-item {
    flex: 0 0 auto !important;
  }

  .blog-category-button,
  .hh-tab {
    white-space: nowrap !important;
    padding: 10px 16px !important;
  }
}

/* --------------------------------------------------------------------------
   TESTIMONIALS MOBILE FIXES
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  .section-50.testimonials-v3-copy-copy-copy {
    padding: 40px 16px !important;
  }

  .paragraph-large.testimonial-v3 {
    font-size: 16px !important;
    padding: 0 !important;
  }

  .about-testimonial-v3-wrapper-2 {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .about-testimonial-v3-content-wrapper {
    text-align: center !important;
  }
}

/* --------------------------------------------------------------------------
   SIDEBAR/MOBILE PROMO CARD SWAP
   -------------------------------------------------------------------------- */

@media screen and (min-width: 768px) {
  .blog-post-sidebar {
    display: block !important;
  }

  .card.author-mobile-copy {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .blog-post-sidebar {
    display: none !important;
  }

  .card.author-mobile-copy {
    display: block !important;
    margin-top: 32px !important;
    padding: 24px 20px !important;
    background: #f6faff !important;
    border-radius: 16px !important;
    text-align: center !important;
  }
}

/* --------------------------------------------------------------------------
   TOUCH DEVICE HOVER FIX
   Prevent "stuck" hover states on touch devices
   -------------------------------------------------------------------------- */

@media (hover: none) {
  a:hover,
  button:hover,
  .card:hover,
  .ui-integration-card--clickable:hover,
  .hh-tab:hover {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   SAFE AREA INSETS (iPhone X+ notch)
   -------------------------------------------------------------------------- */

@supports (padding: env(safe-area-inset-bottom)) {
  .footer {
    padding-bottom: calc(32px + env(safe-area-inset-bottom)) !important;
  }

  .ui-nav-mobile {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
}

/* ==========================================================================
   MOBILE NAVIGATION - SIMPLE STATIC MENU
   ==========================================================================

   Simple approach:
   - Desktop: Normal nav with all links visible
   - Mobile: Header with logo + hamburger, menu drops down below header

   ========================================================================== */

/* ==========================================================================
   DESKTOP (992px+)
   ========================================================================== */
@media screen and (min-width: 992px) {
  /* Hide hamburger and mobile elements on desktop */
  .ui-mobile-menu-btn,
  .nav__mobilebutton,
  .w-nav-button {
    display: none !important;
  }

  .ui-nav-mobile {
    display: none !important;
  }

  .ui-mobile-nav-overlay {
    display: none !important;
  }
}

/* ==========================================================================
   MOBILE/TABLET (991px and below)
   ========================================================================== */
@media screen and (max-width: 991px) {
  /* Force desktop nav header to be visible and sticky */
  .nav.w-nav,
  .ui-nav-desktop {
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }

  /* Nav container layout */
  .nav__container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
  }

  /* Hide desktop menu links */
  .nav-menu-9,
  .ui-nav-desktop .nav-menu-9 {
    display: none !important;
  }

  /* Hide desktop CTA buttons */
  .nav__buttons,
  .ui-nav-desktop .nav__buttons {
    display: none !important;
  }

  /* Show hamburger button */
  .ui-mobile-menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    padding: 10px !important;
    color: #15195a !important;
    min-width: 44px !important;
    min-height: 44px !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Hamburger icon */
  .ui-hamburger-icon {
    font-size: 26px !important;
    line-height: 1 !important;
    color: #15195a !important;
    display: block !important;
  }

  /* Mobile menu - simple static dropdown below header */
  .ui-nav-mobile {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff !important;
    z-index: 999 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border-top: 1px solid #e8eef5 !important;
    max-height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
  }

  /* When menu is open */
  .ui-nav-mobile.ui-nav-mobile--open {
    display: block !important;
  }

  /* Menu container */
  .ui-nav-mobile .navigation-container-mob,
  .ui-nav-mobile > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    padding: 16px !important;
  }

  /* Mobile nav content container - reduce excessive top padding */
  .ui-nav-mobile .nav__container {
    padding: 0 16px 16px 16px !important; /* No top padding - header has border */
  }

  /* Override Webflow's mobile-nav padding-top */
  .ui-nav-mobile .mobile-nav,
  .ui-nav-mobile .w-nav-menu {
    padding-top: 0 !important;
  }

  /* Remove border from mobile header - cleaner look */
  .ui-mobile-nav-header {
    border-bottom: none !important;
  }

  /* Hide logo in dropdown (it's already in header) */
  .ui-nav-mobile .w-nav-brand {
    display: none !important;
  }

  /* Hide close button (just tap hamburger again or outside) */
  .ui-mobile-menu-close {
    display: none !important;
  }

  /* Menu nav wrapper */
  .ui-nav-mobile .mobile-nav,
  .ui-nav-mobile nav {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  /* Menu links */
  .ui-nav-mobile .mobile-nav-link,
  .ui-nav-mobile .navigation-link,
  .ui-nav-mobile .w-nav-link {
    display: block !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid #e8eef5 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #15195a !important;
    text-decoration: none !important;
  }

  .ui-nav-mobile .mobile-nav-link:last-child,
  .ui-nav-mobile .navigation-link:last-child {
    border-bottom: none !important;
  }

  .ui-nav-mobile .mobile-nav-link:hover,
  .ui-nav-mobile .navigation-link:hover {
    color: #2799ff !important;
  }

  /* Dropdowns - MUST reset desktop margins for mobile alignment */
  .ui-nav-mobile .w-dropdown,
  .ui-nav-mobile .ui-dropdown {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .ui-nav-mobile .w-dropdown-toggle,
  .ui-nav-mobile .ui-dropdown__toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid #e8eef5 !important;
    cursor: pointer !important;
    background: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #15195a !important;
  }

  .ui-nav-mobile .w-dropdown-list,
  .ui-nav-mobile .ui-dropdown__list {
    position: static !important;
    display: none !important;
    background: #f8fafc !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .ui-nav-mobile .ui-dropdown--open .w-dropdown-list,
  .ui-nav-mobile .ui-dropdown--open .ui-dropdown__list,
  .ui-nav-mobile .ui-dropdown__list--open {
    display: block !important;
  }

  .ui-nav-mobile .dropdown-link-2,
  .ui-nav-mobile .w-dropdown-link {
    padding: 12px 16px !important;
    display: block !important;
    color: #15195a !important;
    font-size: 15px !important;
  }

  .ui-nav-mobile .dropdown-link-2:hover {
    color: #2799ff !important;
    background: #f0f5fa !important;
  }

  /* CTA buttons at bottom */
  .ui-mobile-nav-ctas {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding-top: 16px !important;
    margin-top: 16px !important;
    border-top: 1px solid #e8eef5 !important;
  }

  .ui-mobile-nav-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 20px !important;
    background: #2799ff !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
  }

  .ui-mobile-nav-cta:hover {
    background: #1a7bd4 !important;
  }

  /* Overlay - click to close */
  .ui-mobile-nav-overlay {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.3) !important;
    z-index: 998 !important;
  }

  .ui-mobile-nav-overlay.ui-mobile-nav-overlay--open {
    display: block !important;
  }
}

/* ==========================================================================
   NAVIGATION DROPDOWN OVERRIDES
   ==========================================================================
   CRITICAL: These rules MUST come LAST to override:
   1. The H4-level heading rules above (lines 606-628) that set dropdown-title to 18-24px
   2. The Webflow CSS hover effects that create gradient text
   3. The centering issues with dropdown panels
   ========================================================================== */

/* Override dropdown title font sizes in navigation context */
.ui-dropdown__link .dropdown-title,
.ui-dropdown__link .dropdown-title-2,
.ui-dropdown__link .nav-content-wrap .dropdown-title,
.ui-dropdown__link .nav-content-wrap-copy .dropdown-title,
.ui-dropdown__link .nav-content-wrap-copy-copy .dropdown-title,
.ui-dropdown__link .nav-content-wrap-copy-copy-copy .dropdown-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #15195a !important;
  margin-bottom: 2px !important;
}

/* Override dropdown description font sizes */
.ui-dropdown__link .nav-link-details,
.ui-dropdown__link .nav-link-details-copy,
.ui-dropdown__link .nav-link-details-copy-long {
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #6b7a8c !important;
}

/* Plain text links in dropdown (like "See interactive demo") */
.ui-dropdown__link .nav-link-blog {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #2799ff !important;
}

/* CRITICAL: Disable the gradient text hover effect from Webflow */
.ui-dropdown__link .nav-content-wrap:hover,
.ui-dropdown__link .nav-content-wrap-copy:hover,
.ui-dropdown__link .nav-content-wrap-copy-copy:hover,
.ui-dropdown__link .nav-content-wrap-copy-copy-copy:hover {
  background-image: none !important;
  -webkit-text-fill-color: inherit !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

/* Keep text colors consistent on hover - NO color change, just background highlight */
.ui-dropdown__link:hover .dropdown-title,
.ui-dropdown__link:hover .dropdown-title-2 {
  color: #15195a !important;
}

.ui-dropdown__link:hover .nav-link-details,
.ui-dropdown__link:hover .nav-link-details-copy,
.ui-dropdown__link:hover .nav-link-details-copy-long {
  color: #6b7a8c !important;
}

.ui-dropdown__link:hover .nav-link-blog {
  color: #2799ff !important;
}

/* Fix dropdown panel centering */
.ui-dropdown__list {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* ==========================================================================
   MOBILE HORIZONTAL OVERFLOW FIXES
   ==========================================================================
   Problem: Webflow CSS uses width: 100vw which includes scrollbar width,
   causing horizontal overflow on mobile (white bar on right side).
   Solution: Override to 100% width which respects container boundaries.
   ========================================================================== */

/* Fix all elements using 100vw width */
.image-113,
.section-82,
.section-50,
.closing-cta-section,
.why-section,
.main-section-landing-copy-copy,
.footer-wrapper-4,
.section-in-base,
.recruitgpt-section {
  width: 100% !important;
  max-width: 100% !important;
}

/* Ensure body and html never overflow horizontally.
   CRITICAL: Use 'clip' NOT 'hidden' - overflow:hidden breaks position:sticky!
   'clip' clips content without creating a scroll container. */
html,
body {
  overflow-x: clip !important;
  width: 100% !important;
  max-width: 100vw !important;
}

/* Universal overflow protection for common containers.
   CRITICAL: Use 'clip' NOT 'hidden' - overflow:hidden breaks position:sticky! */
.page-wrapper,
.ui-blog-root,
.ui-landing-root,
.ui-product-root,
.ui-about-root,
.ui-careers-root,
.ui-plans-root,
.ui-contact-root,
.ui-legal-root {
  overflow-x: clip !important;
  max-width: 100% !important;
}

/* Fix container classes that might cause overflow.
   CRITICAL: Use 'clip' NOT 'hidden' - overflow:hidden breaks position:sticky! */
.container-default,
.container-default-2,
.container-1280,
.container-1283,
.container-1299,
.container-medium-837px,
.container-medium-580px,
.container-medium-713px,
.container-medium-932px,
.container-medium-932px-2,
.w-container {
  max-width: 100% !important;
  overflow-x: clip !important;
}

/* NOTE: Do NOT add global img rules here.
   Webflow images have explicit widths/heights that must be preserved.
   The mobile overflow fix is on containers only. */

/* Fix absolutely positioned elements that might extend outside viewport */
@media screen and (max-width: 991px) {
  [style*="position: absolute"],
  [style*="position:absolute"] {
    max-width: 100vw !important;
  }

  /* Ensure grid layouts don't overflow.
     Using clip to not break sticky positioning. */
  .blog-v1-grid,
  .latest-articles-grid,
  .why-v2-grid,
  .our-values-grid,
  .features-v2-grid,
  .grid-12 {
    max-width: 100% !important;
    overflow-x: clip !important;
  }
}

/* ==========================================================================
   FOOTER GRID FIX
   ==========================================================================
   webflow_essential.css sets .footer-menu-wrapper { display: flex }
   which overrides the grid layout from Footer.css.
   Must force grid display here since this loads last.
   ========================================================================== */

.ui-footer__grid,
.footer-menu-wrapper.ui-footer__grid {
  display: grid !important;
  /* 3 columns: brand (1.5fr) + 2 link columns (1fr each) */
  grid-template-columns: 1.5fr repeat(2, 1fr) !important;
  gap: 40px !important;
}

@media screen and (max-width: 991px) {
  .ui-footer__grid,
  .footer-menu-wrapper.ui-footer__grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media screen and (max-width: 767px) {
  .ui-footer__grid,
  .footer-menu-wrapper.ui-footer__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
  }

  .ui-footer__brand {
    grid-column: span 2 !important;
  }
}

@media screen and (max-width: 479px) {
  .ui-footer__grid,
  .footer-menu-wrapper.ui-footer__grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .ui-footer__brand {
    grid-column: 1 !important;
  }

  /* Ensure footer columns are visible */
  .ui-footer__column,
  .learn-more-links.ui-footer__column,
  .get-in-touch-links.ui-footer__column {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Ensure column content is visible */
  .footer-mobile-content,
  .ui-footer__column-content {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .footer-content-links {
    display: block !important;
  }

  .ui-footer__link-list,
  .list-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
}

/* ==========================================================================
   PLANS PAGE - SECTION BOTTOM PADDING
   ==========================================================================
   The pricing section (section-89-copy) needs bottom padding to separate
   it from the following enterprise CTA section.
   ========================================================================== */

.section-89-copy {
  padding-bottom: 80px;
}

@media screen and (max-width: 767px) {
  .section-89-copy {
    padding-bottom: 60px;
  }
}

@media screen and (max-width: 479px) {
  .section-89-copy {
    padding-bottom: 48px;
  }
}

/* ==========================================================================
   MOBILE CONTAINER SPACING - TIGHTER LEFT/RIGHT PADDING
   ==========================================================================
   Reduces padding on mobile for more content space.
   ========================================================================== */

/* Tablet: 16px padding (was 20px) */
@media screen and (max-width: 767px) {
  .container-default,
  .container-default-2,
  .container-1280,
  .container-1283,
  .container-1299,
  .container-medium-837px,
  .container-medium-580px,
  .container-medium-713px,
  .container-medium-932px,
  .container-medium-932px-2,
  .w-container,
  .ui-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Section padding */
  .section-50,
  .why-section,
  .closing-cta-section,
  .section-in-base,
  .faq-section-copy {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Rich text content area */
  .ui-rich-text,
  .rich-text-block,
  .w-richtext {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Mobile portrait: 12px padding (was 16px) */
@media screen and (max-width: 479px) {
  .container-default,
  .container-default-2,
  .container-1280,
  .container-1283,
  .container-1299,
  .container-medium-837px,
  .container-medium-580px,
  .container-medium-713px,
  .container-medium-932px,
  .container-medium-932px-2,
  .w-container,
  .ui-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Section padding */
  .section-50,
  .why-section,
  .closing-cta-section,
  .section-in-base,
  .faq-section-copy {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* CTA wrapper tighter */
  .div-block-176,
  .div-block-176-copy,
  .ui-closing-cta__wrapper {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}