.elementor-16870 .elementor-element.elementor-element-1b9eb5f{text-align:center;}.elementor-16870 .elementor-element.elementor-element-1b9eb5f .elementor-heading-title{font-family:"Inter Tight", Sans-serif;font-size:40px;font-weight:700;line-height:-0.02em;color:#250C77;}.elementor-16870 .elementor-element.elementor-element-1b9eb5f > .elementor-widget-container{margin:0px 0px 12px 0px;}.elementor-16870 .elementor-element.elementor-element-d8296fc .eael-business-reviews-wrapper .eael-google-review-text{height:192px;overflow-y:auto;color:#666666;padding:25px 25px 25px 25px;}.elementor-16870 .elementor-element.elementor-element-d8296fc .eael-business-reviews-wrapper .eael-business-reviews-items{border-radius:10px;}.elementor-16870 .elementor-element.elementor-element-d8296fc .eael-business-reviews-wrapper .eael-google-reviews-slider-header{border-radius:10px;text-align:center;}.elementor-16870 .elementor-element.elementor-element-d8296fc .eael-business-reviews-wrapper .eael-google-reviews-grid-header{border-radius:10px;text-align:center;}.elementor-16870 .elementor-element.elementor-element-d8296fc .eael-business-reviews-wrapper .eael-google-reviews-business-rating{justify-content:center;color:#666666;}.elementor-16870 .elementor-element.elementor-element-d8296fc .eael-business-reviews-wrapper .eael-google-reviews-business-rating, .elementor-16870 .elementor-element.elementor-element-d8296fc .eael-business-reviews-wrapper .eael-google-reviews-business-rating a{font-size:1em;}.elementor-16870 .elementor-element.elementor-element-d8296fc .eael-business-reviews-wrapper .eael-google-reviews-business-rating a{color:#666666;}.elementor-16870 .elementor-element.elementor-element-d8296fc .eael-business-reviews-wrapper .eael-google-reviews-business-rating svg{fill:#EE642B;}.elementor-16870 .elementor-element.elementor-element-d8296fc .eael-business-reviews-wrapper .eael-google-reviews-business-rating svg path{fill:#EE642B;}.elementor-16870 .elementor-element.elementor-element-d8296fc .eael-business-reviews-wrapper .eael-google-reviews-content{border-radius:10px;}.elementor-16870 .elementor-element.elementor-element-d8296fc .eael-business-reviews-wrapper .eael-google-reviews-slider-item{border-radius:10px;background:#FFFFFF;}.elementor-16870 .elementor-element.elementor-element-d8296fc .eael-business-reviews-wrapper .eael-google-reviews-slider-item .preset-extra-shadow svg{fill:#FFFFFF;}.elementor-16870 .elementor-element.elementor-element-d8296fc .eael-business-reviews-wrapper .eael-google-reviews-slider-item .preset-extra-shadow svg path{fill:#FFFFFF;display:none;}.elementor-16870 .elementor-element.elementor-element-d8296fc .eael-business-reviews-wrapper .eael-google-review-reviewer-photo{padding:20px 25px 10px 25px;}.elementor-16870 .elementor-element.elementor-element-d8296fc .eael-business-reviews-wrapper .eael-google-review-reviewer-photo img{width:50px;}.elementor-16870 .elementor-element.elementor-element-d8296fc .eael-business-reviews-wrapper .eael-google-review-reviewer-name a{font-family:"Inter", Sans-serif;color:var( --e-global-color-primary );}.elementor-16870 .elementor-element.elementor-element-d8296fc .eael-business-reviews-wrapper .eael-google-review-reviewer-name{color:var( --e-global-color-primary );}.elementor-16870 .elementor-element.elementor-element-d8296fc .eael-business-reviews-wrapper .eael-google-review-text, .elementor-16870 .elementor-element.elementor-element-d8296fc .eael-business-reviews-wrapper .eael-google-review-text a{font-family:"Inter", Sans-serif;font-weight:400;}.elementor-16870 .elementor-element.elementor-element-d8296fc .eael-business-reviews-wrapper .eael-google-review-text a{color:#666666;}.elementor-16870 .elementor-element.elementor-element-d8296fc .eael-business-reviews-wrapper .eael-google-review-rating svg{fill:#EE642B;}.elementor-16870 .elementor-element.elementor-element-d8296fc .eael-business-reviews-wrapper .eael-google-review-rating svg path{fill:#EE642B;}.elementor-16870 .elementor-element.elementor-element-d8296fc .eael-business-reviews-wrapper .eael-google-review-rating{margin:0px 0px 35px 0px;text-align:center;}@media(max-width:767px){.elementor-16870 .elementor-element.elementor-element-1b9eb5f .elementor-heading-title{font-size:32px;}}/* Start JX Custom Fonts CSS *//* End JX Custom Fonts CSS */
/* Start JX Custom Fonts CSS *//* End JX Custom Fonts CSS */
/* Credibled homepage styles
   Load once per page, before the two HTML blocks. */

/* ---- tokens/fonts.css ---- */
/* Credibled webfonts.
   Brand typefaces: Inter (UI + body), Inter Tight (display headlines),
   JetBrains Mono (code / API / data).
   NOTE: served from Google Fonts CDN. If you need a fully offline/portable
   system, self-host the .woff2 files and replace this @import with @font-face
   rules pointing at assets/fonts/. Confirm the exact brand typeface with the
   BUMSA brand kit — Inter is inferred from the live site (Elementor + Google
   Fonts). */
@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&family=Inter+Tight:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* ---- tokens/colors.css ---- */
/* ============================================================
   Credibled — Color tokens  (v3 · brand-exact from codebase)

   Brand palette (tailwind.config.ts + theme.ts):
     credibledPurple #250C77 · credibledOrange #ED642B · info #1396ED
     credibledGreen #96CB88 · reportGreen #A0E085 · reportLightGreen #D1F1C4
     credibledGray #EEEEEE · cream #EEEEE0
   ============================================================ */
:root {
  /* ── Brand Indigo (primary) ── */
  --indigo-950:  #0D0530;
  --indigo-900:  #190A5A;  /* --indigo-deep: #1A0858 */
  --indigo-800:  #200B6A;
  --indigo-700:  #250C77;  /* PRIMARY — headlines, CTAs, surfaces */
  --indigo-600:  #3D1FA0;
  --indigo-500:  #5A4994;  /* --indigo-soft */
  --indigo-400:  #7B6CB5;
  --indigo-300:  #A593D4;
  --indigo-200:  #C9BEE8;
  --indigo-100:  #ECEAF3;  /* --lavender-50 */
  --indigo-50:   #F5F4FA;

  /* ── Lavender (surface tint, avatars) ── */
  --lavender:    #D8D4E4;
  --lavender-50: #ECEAF3;

  /* ── Brand Orange (accent) ── */
  --orange-900:  #7A2606;
  --orange-800:  #A33008;
  --orange-700:  #C23C0A;
  --orange-600:  #D85220;
  --orange-500:  #EE642B;  /* PRIMARY ACCENT — CTAs, highlights, buttons */
  --orange-400:  #F08A5A;  /* --orange-soft */
  --orange-300:  #F5A882;
  --orange-200:  #FAC9AE;
  --orange-100:  #FDF0EB;  /* --peach-50 */
  --orange-50:   #FEF7F4;

  /* ── Peach (surface tint) ── */
  --peach:       #FCE0D8;
  --peach-50:    #FDF0EB;

  /* ── Cream (section background) ── */
  --cream:       #EEEEE0;  /* warm off-white section bg */
  --cream-dark:  #E2E2CF;
  --app-gray:    #EEEEEE;  /* credibledGray — app neutral surface */

  /* ── Neutrals ── */
  --white:       #FFFFFF;
  --bg:          #FAFAFA;
  --ink-50:      #F7F7F5;
  --ink-100:     #EFEFED;
  --ink-150:     #E5E5E5;  /* --line */
  --ink-200:     #D5D5D5;
  --ink-300:     #BBBBBB;
  --ink-400:     #888888;  /* --muted / --grey */
  --ink-500:     #666666;
  --ink-600:     #404040;  /* --body */
  --ink-700:     #2A2A2A;
  --ink-800:     #1A1A1A;  /* --ink */
  --ink-900:     #0F0F0F;

  /* ── Status ── */
  --green-50:    #E8F6EF;
  --green-200:   #9DDABF;
  --green-500:   #2BA36C;  /* --success */
  --green-600:   #238A5B;
  --green-700:   #1A6E48;

  --amber-50:    #FEF5E7;
  --amber-200:   #F5CE81;
  --amber-500:   #E8A33D;  /* --warning */
  --amber-700:   #B87B1A;

  --red-50:      #FDECEA;
  --red-200:     #F0AAAA;
  --red-500:     #D64545;  /* --danger */
  --red-700:     #A83333;

  --blue-50:     #E7F3FD;
  --blue-100:    #C6E3FB;
  --blue-200:    #93CBF8;
  --blue-300:    #5FB2F3;
  --blue-400:    #2E9CEF;
  --blue-500:    #1396ED;  /* --info · BRAND BLUE (links, cPanel) */
  --blue-600:    #0F7AC4;
  --blue-700:    #0C5E97;
  --blue-800:    #094672;
  --blue-900:    #07304F;

  /* ── Brand / Report Green (from codebase: credibledGreen, reportGreen) ── */
  --brand-green-50:   #F1F9ED;
  --brand-green-100:  #D1F1C4;  /* reportLightGreen */
  --brand-green-200:  #B9E6A6;
  --brand-green-300:  #A0E085;  /* reportGreen */
  --brand-green-400:  #96CB88;  /* credibledGreen */
  --brand-green-500:  #7BB86A;
  --brand-green-600:  #5E9C4D;
  --brand-green-700:  #467A39;

  /* ── Canadian maple (badge use only) ── */
  --maple-500:   #D8232A;

  /* ── Status red mid-step ── */
  --red-600:     #BE3B3B;

  /* ============================================================
     Legacy aliases — keep older kits/components/templates working.
     The brand primary was renamed navy → indigo/purple (#250C77);
     these map the old names onto the corrected scale.
     ============================================================ */
  --navy-50:    var(--indigo-50);
  --navy-100:   var(--indigo-100);
  --navy-200:   var(--indigo-200);
  --navy-300:   var(--indigo-300);
  --navy-400:   var(--indigo-400);
  --navy-500:   var(--indigo-500);
  --navy-600:   var(--indigo-600);
  --navy-700:   var(--indigo-700);
  --navy-800:   var(--indigo-800);
  --navy-900:   var(--indigo-900);
  --navy-950:   var(--indigo-950);
  --cobalt-500: var(--blue-500);
  --ink-950:    var(--ink-900);

  /* ============================================================
     Semantic aliases
     ============================================================ */

  /* Brand */
  --brand:            var(--indigo-700);
  --brand-hover:      var(--indigo-900);
  --brand-strong:     var(--indigo-950);
  --brand-subtle:     var(--lavender-50);
  --brand-subtle-2:   var(--lavender);
  --on-brand:         var(--white);

  --accent:           var(--orange-500);
  --accent-hover:     var(--orange-600);
  --accent-strong:    var(--orange-700);
  --accent-subtle:    var(--orange-100);
  --on-accent:        var(--white);

  /* Text */
  --text-strong:      var(--indigo-700);
  --text-body:        var(--ink-600);
  --text-muted:       var(--ink-400);
  --text-subtle:      var(--ink-300);
  --text-on-dark:     var(--white);
  --text-on-dark-muted: rgba(255,255,255,0.65);
  --text-link:        var(--indigo-700);
  --text-accent:      var(--orange-500);

  /* Surfaces */
  --surface-page:         var(--white);
  --surface-subtle:       var(--bg);
  --surface-card:         var(--white);
  --surface-sunken:       var(--ink-100);
  --surface-cream:        var(--cream);
  --surface-lavender:     var(--lavender-50);
  --surface-peach:        var(--peach-50);
  --surface-brand:        var(--indigo-700);
  --surface-brand-dark:   var(--indigo-900);
  --surface-accent:       var(--orange-500);
  --surface-brand-subtle: var(--lavender-50);

  /* Borders */
  --border-subtle:    var(--ink-150);
  --border-default:   var(--ink-200);
  --border-strong:    var(--ink-300);
  --border-brand:     var(--indigo-700);
  --border-accent:    var(--orange-500);
  --border-inverse:   rgba(255,255,255,0.14);

  /* Focus rings */
  --ring:         0 0 0 3px rgba(37, 12, 119, 0.22);
  --ring-accent:  0 0 0 3px rgba(238, 100, 43, 0.30);
  --ring-error:   0 0 0 3px rgba(214, 69, 69, 0.28);

  /* Status semantic pairs */
  --status-complete-fg: var(--green-700);
  --status-complete-bg: var(--green-50);
  --status-complete-bd: var(--green-200);
  --status-progress-fg: var(--blue-700);
  --status-progress-bg: var(--blue-50);
  --status-progress-bd: #B4CDFB;
  --status-waiting-fg:  var(--amber-700);
  --status-waiting-bg:  var(--amber-50);
  --status-waiting-bd:  var(--amber-200);
  --status-flag-fg:     var(--red-700);
  --status-flag-bg:     var(--red-50);
  --status-flag-bd:     var(--red-200);

  /* Info / link (brand blue) */
  --info:        var(--blue-500);
  --text-info:   var(--blue-600);
  --surface-info: var(--blue-50);

  /* Report scoring (criminal/reference report results) */
  --report-clear:       var(--brand-green-300);
  --report-clear-soft:  var(--brand-green-100);
  --report-brand-green: var(--brand-green-400);
}

/* ---- tokens/typography.css ---- */
/* ============================================================
   Credibled — Typography tokens
   Display = Inter Tight (tight tracking, confident headlines)
   UI/Body = Inter
   Mono    = JetBrains Mono (code, API, tabular data)
   ============================================================ */
:root {
  /* Families */
  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Weights */
  --fw-regular:  400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold:     700; /* @kind other */
  --fw-extrabold:800; /* @kind other */

  /* Font sizes (px) */
  --fs-display-1: 64px;
  --fs-display-2: 50px;
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-overline:12px;

  /* Line heights */
  --lh-tight:   1.04; /* @kind other */
  --lh-snug:    1.18; /* @kind other */
  --lh-heading: 1.25; /* @kind other */
  --lh-body:    1.6; /* @kind other */
  --lh-relaxed: 1.7; /* @kind other */

  /* Letter spacing */
  --ls-display: -0.03em; /* @kind other */
  --ls-heading: -0.02em; /* @kind other */
  --ls-tight:   -0.01em; /* @kind other */
  --ls-normal:  0; /* @kind other */
  --ls-overline: 0.08em; /* @kind other */

  /* ---- Semantic text roles (font shorthands) ---- */
  --text-display-1: var(--fw-bold) var(--fs-display-1)/var(--lh-tight) var(--font-display);
  --text-display-2: var(--fw-bold) var(--fs-display-2)/var(--lh-tight) var(--font-display);
  --text-h1: var(--fw-bold) var(--fs-h1)/var(--lh-snug) var(--font-display);
  --text-h2: var(--fw-bold) var(--fs-h2)/var(--lh-snug) var(--font-display);
  --text-h3: var(--fw-semibold) var(--fs-h3)/var(--lh-heading) var(--font-display);
  --text-h4: var(--fw-semibold) var(--fs-h4)/var(--lh-heading) var(--font-sans);
  --text-body-lg: var(--fw-regular) var(--fs-body-lg)/var(--lh-relaxed) var(--font-sans);
  --text-body:    var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
  --text-body-sm: var(--fw-regular) var(--fs-body-sm)/var(--lh-body) var(--font-sans);
  --text-caption: var(--fw-medium) var(--fs-caption)/1.4 var(--font-sans);
}

/* ---- tokens/spacing.css ---- */
/* ============================================================
   Credibled — Spacing, radii, sizing tokens
   4px base grid.
   ============================================================ */
:root {
  /* Spacing scale (4px base) */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radii */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;   /* buttons, inputs */
  --radius-lg:   14px;   /* cards */
  --radius-xl:   20px;   /* large panels, modals */
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* Control heights */
  --control-sm: 36px;
  --control-md: 44px;   /* default — min touch target */
  --control-lg: 52px;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: var(--space-6);

  /* Border widths */
  --bw-1: 1px;
  --bw-2: 2px;
}

/* ---- tokens/elevation.css ---- */
/* ============================================================
   Credibled — Elevation (shadows) tokens
   Soft, cool-tinted shadows. Cards sit on subtle elevation,
   never heavy. Brand uses a colored shadow on key CTAs.
   ============================================================ */
:root {
  --shadow-xs: 0 1px 2px rgba(15, 35, 80, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 35, 80, 0.08), 0 1px 2px rgba(15, 35, 80, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 35, 80, 0.08), 0 2px 4px rgba(15, 35, 80, 0.05);
  --shadow-lg: 0 12px 28px rgba(15, 35, 80, 0.12), 0 4px 10px rgba(15, 35, 80, 0.06);
  --shadow-xl: 0 24px 56px rgba(15, 35, 80, 0.16), 0 8px 18px rgba(15, 35, 80, 0.08);

  /* Colored brand shadow for primary CTAs */
  --shadow-brand: 0 8px 20px rgba(38, 109, 240, 0.28);

  /* Inner line (used on inputs / inset surfaces) */
  --shadow-inset: inset 0 1px 2px rgba(15, 35, 80, 0.05);
}

/* ---- tokens/base.css ---- */
/* ============================================================
   Credibled — Base element defaults
   Light-touch resets so specimens, cards, and kits inherit the
   brand's type + color without per-file boilerplate.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font: var(--text-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-strong);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}
h1 { font: var(--text-h1); }
h2 { font: var(--text-h2); }
h3 { font: var(--text-h3); }
h4 { font: var(--text-h4); }

p { margin: 0; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

code, kbd, samp, pre { font-family: var(--font-mono); }

::selection { background: var(--blue-200); color: var(--ink-900); }

/* Utility text roles */
.t-display-1 { font: var(--text-display-1); letter-spacing: var(--ls-display); color: var(--text-strong); }
.t-display-2 { font: var(--text-display-2); letter-spacing: var(--ls-display); color: var(--text-strong); }
.t-h1 { font: var(--text-h1); }
.t-h2 { font: var(--text-h2); }
.t-h3 { font: var(--text-h3); }
.t-h4 { font: var(--text-h4); }
.t-body-lg { font: var(--text-body-lg); color: var(--text-body); }
.t-body { font: var(--text-body); color: var(--text-body); }
.t-body-sm { font: var(--text-body-sm); color: var(--text-body); }
.t-caption { font: var(--text-caption); color: var(--text-muted); }
.t-overline {
  font-family: var(--font-sans);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-muted);
}
.t-mono { font-family: var(--font-mono); }

/* ---- styles.css ---- */
/* Credibled — root style entry point.
   Consumers link THIS file. Keep it as @import lines only. */
@import "tokens/fonts.css";
@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";
@import "tokens/elevation.css";
@import "tokens/base.css";


    * { box-sizing: border-box; }
    body { margin: 0; font-family: var(--font-sans); color: var(--ink-700); background: #fff; }
    a { text-decoration: none; color: var(--blue-600); }
    a:hover { color: var(--orange-500); }
    @keyframes float-a { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
    @keyframes float-b { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
    @keyframes scan-y { 0% { top: 6%; } 50% { top: 86%; } 100% { top: 6%; } }
    @keyframes dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
    section[data-screen-label^="Hero"] { position: relative; z-index: 20; }
    .ribbon-host > * { position: relative; z-index: 1; }
    .ribbon-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
    .ribbon-layer svg { position: absolute; inset: 0; width: 100%; height: 100%; }
    section[data-screen-label="Hero — photo"] .cta-note, section[data-screen-label="Hero — photo + product"] .cta-note { color: rgba(255,255,255,0.65) !important; }
    .hero-full { display: flex !important; flex-direction: column; min-height: calc(100vh - 130px); }
    .hero-full > .util-wrap { flex: 0 0 auto; }
    section[data-screen-label="Hero — photo"] .util-a, section[data-screen-label="Hero — photo + product"] .util-a { color: rgba(255,255,255,0.6) !important; }
    section[data-screen-label="Hero — photo"] a.util-a:hover, section[data-screen-label="Hero — photo + product"] a.util-a:hover { color: #fff !important; }
    section[data-screen-label="Hero — photo"] .cand-note, section[data-screen-label="Hero — photo + product"] .cand-note { color: rgba(255,255,255,0.65) !important; }
    section[data-screen-label="Hero — photo"] .cand-note a, section[data-screen-label="Hero — photo + product"] .cand-note a { color: #fff !important; }
    .hero-full > div { width: 100%; flex: 1; }
    @media (min-width: 861px) {
      .hero-full .hero-h1 { font-size: clamp(46px, 5.2vw, 74px) !important; margin-bottom: 24px !important; }
      .hero-full .hero-sub { font-size: clamp(19px, 1.6vw, 22px) !important; line-height: 1.6 !important; max-width: 580px !important; margin-bottom: 36px !important; }
      .hero-full .hero-cta-row { margin-bottom: 56px !important; }
      .hero-full .hero-cta-row > div { max-width: 500px !important; }
      .hero-full .hero-stats { gap: clamp(32px, 4vw, 64px) !important; }
      .hero-full .hero-stats > div > div:first-child { font-size: clamp(28px, 2.6vw, 36px) !important; }
      .hero-full .hero-stats > div > div:last-child { font-size: 14px !important; margin-top: 8px !important; }
    }
    @media (min-width: 1160px) {
      .hero-full .hero-cta-row { margin-bottom: 72px !important; }
      .hero-full .hero-grid { grid-template-columns: 1fr 500px !important; gap: 88px !important; }
      section[data-screen-label="Hero — recruiter"].hero-full .hero-grid { grid-template-columns: 1fr 600px !important; gap: 56px !important; }
      section[data-screen-label="Hero — recruiter tech"] .hero-grid { grid-template-columns: 1fr 440px !important; gap: 72px !important; }
    }
    .biz-cta .sc-host-x, .biz-cta button { width: 100% !important; }
    .biz-cta button { height: 56px !important; font-size: 16px !important; justify-content: center !important; }
    .hero-full .tech-h1, .tech-h1 { font-size: clamp(42px, 4.3vw, 68px) !important; }
    @media (min-width: 861px) { .tech-nowrap { white-space: nowrap; } }
    @media (max-width: 1159px) { .tech-ref-tag { display: none !important; } }
    .tech-stats { display: flex !important; }
    .tech-stats > div { border-left: 1px solid var(--ink-200); padding: 4px 12px; flex: 1 1 0; max-width: 200px; }
    .tech-stats > div:first-child { border-left: none; }
    @media (max-width: 860px) {
      .tech-stats { flex-wrap: wrap !important; row-gap: 18px; }
      .tech-stats > div { border-left: none; padding: 0 28px 0 0; }
    }
    @media (max-width: 860px) {
      .nav-links { display: none !important; }
      header[data-screen-label="Nav"] > div { padding: 0 20px !important; gap: 12px !important; }
      header[data-screen-label="Nav"] img { height: 24px !important; }
      .hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
      .hero-h1 { font-size: 42px !important; }
      h2 { font-size: 32px !important; }
      .grid-3 { grid-template-columns: 1fr !important; }
      .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
      .who-grid { grid-template-columns: 1fr !important; }
      .trust-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
      .prog-grid { grid-template-columns: 1fr !important; }
      .show-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 28px !important; margin-bottom: 72px !important; }
      .show-text { order: 0; }
      .show-vis {
        order: 1;
        padding: 22px 20px !important;
        margin: 0 -20px;
        min-width: 0 !important;
        width: calc(100% + 40px);
        max-width: calc(100vw);
      }
      .show-vis > div:first-child { display: none; }
      .show-vis { background: linear-gradient(170deg, var(--navy-50) 0%, #fff 100%); }
      .show-vis > div:not(:first-child) { width: auto; zoom: 1; max-width: 560px; margin-left: auto; margin-right: auto; }
      .show-vis div[style*="grid-template-columns: 1fr 1.1fr"] { grid-template-columns: 1fr !important; }
      .show-vis > div:last-child { min-width: 0; }
      .hero-full { min-height: 0 !important; }
      .hero-visual { margin-top: 110px !important; }
      .hero-visual > div[style*="position: absolute"][style*="top: -14%"],
      .hero-visual > div[style*="position: absolute"][style*="top: 4%"],
      .hero-visual > div[style*="position: absolute"][style*="top: 18%"] { left: 0 !important; right: 0 !important; width: auto !important; max-width: 100% !important; }
      .hero-visual > div[style*="position: absolute"] > div { max-width: 100%; }

      section[data-screen-label] { padding-left: 20px !important; padding-right: 20px !important; }
      section[data-screen-label^="Hero"] { padding-top: 48px !important; }
      section[data-screen-label="Why Credibled"], section[data-screen-label="All checks"], section[data-screen-label="Who we serve"], section[data-screen-label="How it works"], section[data-screen-label="Reviews"], section[data-screen-label="Data safety"] { padding-top: 64px !important; padding-bottom: 64px !important; }
      section[data-screen-label="CTA"] { padding-top: 110px !important; padding-bottom: 72px !important; }
      .hero-cta-row { margin-bottom: 36px !important; }
      .hero-cta-row > a, .hero-cta-row a .sc-host-x, .hero-cta-row a button { width: 100% !important; }
      .hero-cta-row a button { justify-content: center !important; }
      .hero-stats { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; border-top: 1px solid var(--border-subtle); padding-top: 20px; }
      .hero-stats > div > div:first-child { font-size: 22px !important; }
      .hero-stats > div > div:last-child { font-size: 12px !important; }
      .ratings-row { gap: 12px 28px !important; }
      .ratings-label { flex-basis: 100%; text-align: center; }
      .who-grid > div:first-child { padding: 30px !important; }
    }
    @media (max-width: 700px) {
      .show-vis > div:not(:first-child) { width: auto !important; zoom: 1 !important; }
      .show-vis div[style*="grid-template-columns: 1fr 1.1fr"] { grid-template-columns: 1fr !important; }
      .show-vis div[style*="justify-content: space-between"][style*="align-items: flex-start"] { flex-wrap: wrap; row-gap: 8px; }
    }
    @media (max-width: 560px) {
      .grid-4 { grid-template-columns: 1fr !important; }
      .hero-h1 { font-size: 36px !important; }
      header[data-screen-label="Nav"] a[href*="signin"], header[data-screen-label="Nav"] > div > div > a:first-child { display: none !important; }
      .show-vis { padding: 18px 12px !important; }
      .show-vis div[style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
      .show-vis div[style*="border-radius: 14px"][style*="padding: 24px 26px"] { padding: 18px 16px !important; }
    }

    /* ---------- V2 polish ---------- */
    html { scroll-behavior: smooth; }
    html, body { overflow-x: clip; max-width: 100%; }
    body {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      font-optical-sizing: auto;
      --shadow-xs: 0 1px 2px rgba(26,8,88,0.05);
      --shadow-sm: 0 1px 2px rgba(26,8,88,0.05), 0 2px 6px -2px rgba(26,8,88,0.06);
      --shadow-md: 0 1px 2px rgba(26,8,88,0.04), 0 4px 10px -3px rgba(26,8,88,0.07), 0 12px 26px -14px rgba(26,8,88,0.10);
      --shadow-lg: 0 1px 2px rgba(26,8,88,0.035), 0 8px 20px -8px rgba(26,8,88,0.09), 0 26px 50px -26px rgba(26,8,88,0.16);
      --shadow-xl: 0 2px 4px rgba(26,8,88,0.04), 0 14px 32px -14px rgba(26,8,88,0.11), 0 44px 76px -34px rgba(26,8,88,0.20);
    }
    p { text-wrap: pretty; }
    h2, h3 { text-wrap: balance; }
    section[id] { scroll-margin-top: 84px; }
    ::selection { background: var(--navy-700); color: #fff; }
    a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
    :focus-visible { outline: 2px solid var(--orange-500); outline-offset: 3px; border-radius: 8px; }
    button { -webkit-tap-highlight-color: transparent; }
    .hero-stats, .tech-stats, [data-screen-label="Product showcase"] { font-variant-numeric: tabular-nums; }

    /* eyebrow: hairline rules flanking the overline */
    .eyebrow { display: inline-flex; align-items: center; gap: 12px; }
    .eyebrow::before, .eyebrow::after { content: ""; width: 26px; height: 1px; flex: none; }
    .eyebrow::before { background: linear-gradient(90deg, rgba(238,100,43,0) 0%, rgba(238,100,43,0.55) 100%); }
    .eyebrow::after { background: linear-gradient(90deg, rgba(238,100,43,0.55) 0%, rgba(238,100,43,0) 100%); }
    .trust-grid .eyebrow::before { display: none; }

    /* nav: crisper glass + soft lift */
    header[data-screen-label="Nav"] {
      background: rgba(255,255,255,0.78) !important;
      backdrop-filter: blur(18px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(18px) saturate(180%);
      box-shadow: 0 1px 0 rgba(37,12,119,0.06), 0 10px 30px -26px rgba(26,8,88,0.5);
    }
    header[data-screen-label="Nav"] nav a { transition: background .16s cubic-bezier(.4,0,.2,1), color .16s cubic-bezier(.4,0,.2,1); }

    /* primary CTAs: warm glow, subtle press */
    .hero-cta-row a button, .biz-cta button {
      box-shadow: 0 10px 26px -14px rgba(238,100,43,0.85), 0 1px 2px rgba(26,8,88,0.08) !important;
      transition: box-shadow .18s cubic-bezier(.4,0,.2,1), transform .18s cubic-bezier(.4,0,.2,1), background-color .16s !important;
    }
    .hero-cta-row a:hover button, .biz-cta:hover button { transform: translateY(-1px); box-shadow: 0 16px 32px -14px rgba(238,100,43,0.9), 0 1px 2px rgba(26,8,88,0.08) !important; }
    .hero-cta-row a:active button, .biz-cta:active button { transform: translateY(0.5px); }
    section[data-screen-label="CTA"] a[href*="signup"] {
      box-shadow: 0 16px 34px -14px rgba(238,100,43,0.7), inset 0 1px 0 rgba(255,255,255,0.22) !important;
      transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s cubic-bezier(.4,0,.2,1), background .16s;
    }
    section[data-screen-label="CTA"] a[href*="signup"]:hover { transform: translateY(-1px); }

    /* utility strip: quiet underline reveal */
    a.util-a { position: relative; transition: color .16s cubic-bezier(.4,0,.2,1); }
    a.util-a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; opacity: 0; transform: scaleX(0.4); transform-origin: left; transition: opacity .18s, transform .18s cubic-bezier(.4,0,.2,1); }
    a.util-a:hover::after { opacity: 0.55; transform: scaleX(1); }

    /* product visuals: hairline ring for definition */
    .show-vis > div:last-child, .show-vis > div:last-child > div { outline: 1px solid rgba(37,12,119,0.04); outline-offset: 0; }

    /* FAQ answer reveal */
    section[data-screen-label="FAQ"] div[style*="padding: 0 22px 20px"] { animation: faq-in .22s cubic-bezier(.4,0,.2,1) both; }
    @keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

    /* section reveal on scroll (progressive enhancement only) */
    @keyframes rise-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
    @supports (animation-timeline: view()) {
      @media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
        section[data-screen-label]:not([data-screen-label^="Hero"]) > div:not(.ribbon-layer) {
          animation: rise-in linear both;
          animation-timeline: view();
          animation-range: entry 4% entry 46%;
        }
      }
    }
    @media (prefers-reduced-motion: reduce) {
      * { animation: none !important; }
    }
  

/* ================= Credibled homepage: component classes ================= */
.cb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; font-family: var(--font-sans); font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color .16s cubic-bezier(.4,0,.2,1), box-shadow .18s cubic-bezier(.4,0,.2,1), transform .18s cubic-bezier(.4,0,.2,1); }
.cb-btn--sm { height: 36px; padding: 0 14px; font-size: 14px; }
.cb-btn--md { height: 42px; padding: 0 18px; font-size: 15px; }
.cb-btn--lg { height: 48px; padding: 0 24px; font-size: 15px; }
.cb-btn--primary { background: var(--navy-700); color: #fff; }
.cb-btn--primary:hover { background: var(--navy-800, #1d0a5e); }
.cb-btn--secondary { background: var(--navy-700); color: #fff; }
.cb-btn--secondary:hover { background: var(--navy-800, #1d0a5e); }
.cb-btn--ghost { background: transparent; color: var(--navy-700); }
.cb-btn--ghost:hover { background: var(--ink-50); }
a:hover .cb-btn--primary { background: var(--navy-800, #1d0a5e); }

.cb-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill, 999px); padding: 4px 10px; font: 600 11.5px/1 var(--font-sans); }
.cb-badge--success { background: var(--green-50); color: var(--green-700); border: 1px solid var(--green-200); }
.cb-badge--progress { background: var(--blue-50, #e8f4fd); color: var(--blue-700, #0b6ca8); border: 1px solid var(--blue-200, #b7dcf7); }
.cb-badge--neutral { background: var(--ink-50); color: var(--ink-600); border: 1px solid var(--border-subtle); }

.cb-tab { border: none; cursor: pointer; padding: 9px 20px; border-radius: var(--radius-pill, 999px); font: 600 14px/1 var(--font-sans); background: transparent; color: var(--ink-500); transition: background .15s, color .15s; }
.cb-tab:hover { color: var(--navy-700); }
.cb-tab.is-active { background: var(--navy-700); color: #fff; }

/* restored hover states (were inline in the source design) */
[data-om-page-part] a[href]:hover { color: var(--orange-500); }
[data-om-page-part] .cb-btn:hover { color: inherit; }

/* card hover states (were inline style-hover in the source design) */
.cb-card { transition: box-shadow .2s cubic-bezier(.4,0,.2,1), transform .2s cubic-bezier(.4,0,.2,1), border-color .2s cubic-bezier(.4,0,.2,1); }
.cb-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--navy-100); }
[data-om-page-part] a.cb-card:hover, [data-om-page-part] a.cb-card:hover * { color: inherit; }
[data-om-page-part] a[href]:hover .cb-btn--primary { background: var(--navy-800, #1d0a5e); }

/* hero / business CTA glow + press (the export renders DS buttons as .cb-btn spans) */
.hero-cta-row a .cb-btn, .biz-cta .cb-btn {
  box-shadow: 0 10px 26px -14px rgba(238,100,43,0.85), 0 1px 2px rgba(26,8,88,0.08);
  transition: box-shadow .18s cubic-bezier(.4,0,.2,1), transform .18s cubic-bezier(.4,0,.2,1), background-color .16s;
}
.hero-cta-row a:hover .cb-btn, .biz-cta:hover .cb-btn { transform: translateY(-1px); box-shadow: 0 16px 32px -14px rgba(238,100,43,0.9), 0 1px 2px rgba(26,8,88,0.08); }
.hero-cta-row a:active .cb-btn, .biz-cta:active .cb-btn { transform: translateY(0.5px); }
.biz-cta .cb-btn { width: 100%; height: 56px; font-size: 16px; justify-content: center; }
@media (max-width: 860px) { .hero-cta-row a .cb-btn { width: 100%; } }

/* WordPress theme guard: themes (JupiterX) set heading colours with !important,
   which beats the inline white on dark bands. */
section[data-screen-label="CTA"] h2,
section[data-screen-label="CTA"] h2 *,
section[data-screen-label="Who we serve"] h3 { color: #fff !important; }
section[data-screen-label="CTA"] h2 { text-shadow: 0 1px 24px rgba(26,8,88,0.6); }

/* WordPress theme guard: themes force img { width:100%; height:auto }, which
   blows up the inline logos. Keep them at their intrinsic design size. */
[data-om-page-part] img[height="26"] { height: 26px !important; width: auto !important; max-width: 160px !important; }
[data-om-page-part] img[height="22"] { height: 22px !important; width: auto !important; max-width: 120px !important; }
[data-om-page-part] img { max-width: 100%; }


/* ── Editorial band ("Hiring that holds up") ──────────────────────────────
   Sits between "All your checks in one platform" and the Programmes banner.
   Requires two images uploaded to the media library:
     verified-plate.png  (photo, orange VERIFIED removed)
     verified-type.png   (orange VERIFIED only, transparent background)
   The type layer overlays the plate; because the letters only exist outside
   the figure's silhouette it still reads as sitting behind him. */
.ed-cta:hover { border-color: var(--orange-500) !important; color: var(--navy-700) !important; }
.ed-cta:hover .ed-arrow { transform: translateX(7px); }
.ed-sq { transition: width .24s cubic-bezier(.4,0,.2,1); }
.ed-cta:hover .ed-sq { width: 24px; }
[data-om-page-part] .ed-fig-wrap img { max-width: 100%; }

@keyframes ed-curtain { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ed-drift { from { transform: translateY(30px); } to { transform: translateY(-20px); } }
@keyframes ed-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ed-rail-in { from { opacity: 0; transform: rotate(180deg) translateX(-20px); } to { opacity: 1; transform: rotate(180deg) translateX(0); } }
@keyframes ed-underline { from { background-size: 0% 2px; } to { background-size: 100% 2px; } }
@keyframes ed-print { 0% { clip-path: inset(0 0 100% 0); opacity: 0; } 18% { opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 1; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 981px) {
    .ed-figure { animation: ed-curtain linear both; animation-timeline: view(); animation-range: entry 10% entry 62%; }
    .ed-type { animation: ed-print linear both; animation-timeline: view(); animation-range: entry 62% cover 34%; }
    .ed-fig-wrap { animation: ed-drift linear both; animation-timeline: view(); animation-range: cover; }
    .ed-rail span { animation: ed-rail-in linear both; animation-timeline: view(); animation-range: entry 6% entry 48%; }
    .ed-l1 { animation: ed-up linear both; animation-timeline: view(); animation-range: entry 8% entry 42%; }
    .ed-l2 { animation: ed-up linear both; animation-timeline: view(); animation-range: entry 14% entry 50%; }
    .ed-l3 { animation: ed-up linear both; animation-timeline: view(); animation-range: entry 18% entry 56%; }
    .ed-cta { animation: ed-up linear both; animation-timeline: view(); animation-range: entry 24% entry 62%; }
    .ed-true { animation: ed-underline linear both; animation-timeline: view(); animation-range: entry 30% entry 58%; }
  }
}

@media (max-width: 980px) {
  section[data-screen-label="Editorial"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  section[data-screen-label="Editorial"] .ed-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  section[data-screen-label="Editorial"] .ed-rail { display: none !important; }
  section[data-screen-label="Editorial"] .ed-copy { padding-top: 0 !important; }
  section[data-screen-label="Editorial"] .ed-copy p,
  section[data-screen-label="Editorial"] .ed-tail p { max-width: none !important; }
  section[data-screen-label="Editorial"] .ed-fig-wrap { max-width: 320px; margin: 0 auto; overflow: hidden; }
  section[data-screen-label="Editorial"] .ed-tail { padding-bottom: 0 !important; gap: 26px !important; }
  section[data-screen-label="Editorial"] .ed-cta { max-width: 320px !important; }
}
@media (max-width: 560px) {
  section[data-screen-label="Editorial"] .ed-l1 { font-size: 26px !important; }
}