@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* ==========================================================================
   Unfair Careers: global type + site header.
   Loaded last (after site.css and any page-specific sheet).
   ========================================================================== */

/* ---------- Type: Inter everywhere (headings, body, header, buttons) ---------- */
body,p,li,input,textarea,select,button,.btn,.hnav a,.hmore-btn,nav a{font-family:'Inter',ui-sans-serif,system-ui,sans-serif!important}
h1,h2,h3,h4,h5,h6,.h1,.h2,.hero h1,.title,.display{font-family:'Inter',ui-sans-serif,system-ui,sans-serif!important}

/* ---------- Header: floating rounded pill, sticky, aligned to the content column ---------- */
.header{position:sticky!important;top:18px!important;left:auto;right:auto;z-index:999!important;height:62px!important;margin:18px 48px 28px;border-radius:999px;background:rgba(18,18,20,.88)!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 18px 40px rgba(0,0,0,.45);backdrop-filter:blur(14px)}
.header .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:none;width:auto;margin:0;padding:0 10px 0 26px!important}
body.admin-bar .header{margin-top:18px;top:50px!important}

.logo{display:inline-flex;align-items:center;flex:0 0 auto;overflow:visible}
/* The logo PNG has ~50% transparent padding; negative margins keep the layout box tight. */
.logo img{height:34px!important;width:auto!important;max-width:none!important;margin:-13px 0 -13px -4px;filter:var(--logo-filter)!important}

.header .hdr-right{display:flex;align-items:center;gap:18px!important;margin-left:auto}
.header .btn{white-space:nowrap}
.header .hdr-right>.btn{border-radius:999px!important;height:36px;min-height:36px!important;padding:0 16px!important;font-size:12px!important;font-weight:600!important;letter-spacing:.01em!important}

/* Nav (class="nav hnav"): Blog, Resources, More dropdown */
.nav{color:color-mix(in srgb,var(--text) 72%,transparent)!important}
.nav a:hover{color:var(--text)!important}
.hnav{display:flex!important;align-items:center;gap:22px;font-size:13px;font-weight:650;order:0;width:auto}
.hnav>a,.hmore-btn{min-height:44px;display:inline-flex;align-items:center;padding:0}
.hnav .hnav-apply{display:none!important}
.hmore{position:relative}
.hmore-btn{background:none;border:0;color:inherit;font:inherit;font-weight:650;cursor:pointer;gap:6px}
.hmore-btn .chev{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.hmore-btn[aria-expanded="true"] .chev{transform:rotate(-135deg) translateY(-1px)}
.hmore-list{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.5);display:flex;flex-direction:column}
.hmore-list[hidden]{display:none}
.hmore-list a{padding:10px 12px;min-height:44px;display:flex;align-items:center;border-radius:6px}
.hmore-list a:hover{background:var(--panel2)}

/* Hamburger (mobile only) */
.hburger{display:none;width:44px;height:44px;margin-right:-10px;background:none;border:0;cursor:pointer;position:relative;color:var(--text)}
.hburger span,.hburger span:before,.hburger span:after{position:absolute;left:11px;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .18s,opacity .18s}
.hburger span{top:21px}.hburger span:before,.hburger span:after{content:"";left:0}
.hburger span:before{top:-7px}.hburger span:after{top:7px}
.menu-open .hburger span{background:transparent}
.menu-open .hburger span:before{transform:translateY(7px) rotate(45deg);background:var(--text)}
.menu-open .hburger span:after{transform:translateY(-7px) rotate(-45deg);background:var(--text)}

@media(min-width:901px){
  .header{min-height:0!important;width:min(var(--max),calc(100% - 40px))!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important}
  .header .hnav{gap:10px!important}
  /* hover: faint red background + red bottom border */
  .header .hnav>a,.header .hmore-btn{font-size:14px!important;font-weight:600;letter-spacing:0;padding:8px 12px!important;border-radius:6px 6px 0 0!important;border-bottom:2px solid transparent!important}
  .header .hnav>a:hover,.header .hmore-btn:hover{background:rgba(240,46,56,.12)!important;border-bottom-color:#F02E38!important;color:#fff!important}
}

/* Mobile: centred logo, hamburger right, Apply moves into the menu panel */
@media(max-width:900px){
  .header{top:10px!important;margin:10px 10px 20px;height:60px!important}
  .header .wrap{display:grid!important;grid-template-columns:40px 1fr 40px;align-items:center!important;justify-items:center;gap:12px;padding:0 28px!important}
  .header .wrap>.logo{grid-column:2;justify-self:center}
  .logo img{height:40px!important}
  .header .logo img{margin:-10px 0!important}
  .header .hdr-right{grid-column:3;justify-self:end;align-self:center!important;display:flex!important;align-items:center!important;height:100%;gap:10px!important}
  .header .hdr-right>.btn{display:none!important}
  .header .btn{min-height:38px!important;padding:0 12px!important;font-size:12px!important;gap:6px}
  .header .hburger{display:flex;align-items:center;justify-content:center;align-self:center!important;width:44px!important;height:44px!important;margin:0!important;padding:0!important;line-height:0!important;position:relative;top:0}
  .header .hburger span{top:1px;position:relative}
  .hnav{display:none!important;position:absolute;left:0;right:0;top:calc(100% + 8px);flex-direction:column;align-items:stretch;justify-content:space-between;gap:0;padding:8px 14px 22px;background:#0d0d0f!important;border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.45);max-height:calc(100vh - 66px);overflow:auto;font-size:17px}
  .menu-open .hnav{display:flex!important}
  .hnav>a,.hmore-btn{min-height:52px;width:100%;border-bottom:1px solid var(--line);justify-content:space-between}
  .hnav .hnav-apply{display:flex!important;align-items:center;justify-content:center;width:100%;min-height:48px!important;margin:0 0 10px;border-radius:999px!important;border:1px solid #ff5961!important;background:linear-gradient(180deg,#f23b44,#d31b25)!important;color:#fff!important;font-weight:900}
  .hmore-list{position:static;box-shadow:none;border:0;background:none;padding:0 0 6px 14px;min-width:0}
  .hmore-list a{font-size:15px;color:var(--muted)}
}
@media(max-width:782px){body.admin-bar .header{top:56px!important}}
@media(max-width:600px){body.admin-bar .header{top:10px!important}}
@media(max-width:420px){
  .logo img{height:34px!important}
  .header .logo img{margin:-8px 0!important}
  .header .btn{padding:0 10px!important}
}
@media(max-width:370px){.header .btn{font-size:11px!important;padding:0 9px!important}}
@media(max-width:360px){.logo img{height:30px!important}}

/* ---------- Content accents (posts, pages, 404) ---------- */
.ufc-content a:not(.btn){color:var(--acc-blue-text);text-decoration-color:color-mix(in srgb,var(--blue,#4C6FFF) 60%,transparent);text-underline-offset:3px}
.ufc-content a:not(.btn):hover{color:var(--yellow,#FFD45A);text-decoration-color:var(--yellow,#FFD45A)}
.ufc-content blockquote{border-left:4px solid var(--yellow,#FFD45A);padding-left:18px;margin-left:0}
.ufc-content ul li::marker{color:var(--yellow,#FFD45A)}
.ufc-content ol li::marker{color:var(--acc-blue-text);font-weight:800}

/* ---------- 1.0.4 Inter tuning: Oswald was condensed, so loosen the tight tracking/leading the old headings used ---------- */
.home h2,.home h3,.res-page h1,.ufc-page h1{letter-spacing:-.03em!important;line-height:1.08!important}
.home .proof-head h2,.home .track-head h2,.home .founder-copy h2,.home .final h2{font-size:clamp(34px,3.9vw,52px)!important}
.home .system-head h2{font-size:clamp(36px,4.2vw,56px)!important}
.home .outcome b{letter-spacing:-.03em!important;line-height:1!important}
.home .stat b{letter-spacing:-.02em!important}

/* ---------- 1.0.6 bigger header: pill, logo, nav, Apply button ---------- */
.header{height:72px!important}
.logo img{height:44px!important;margin:-17px 0 -17px -4px}
.header .hdr-right>.btn{height:44px;min-height:44px!important;padding:0 22px!important;font-size:15px!important}
@media(min-width:901px){
  .header .hnav{gap:12px!important}
  .header .hnav>a,.header .hmore-btn{font-size:16px!important;padding:10px 14px!important}
  .header .wrap{padding:0 14px 0 30px!important}
}
@media(max-width:900px){
  .logo img{height:40px!important;margin:-15px 0 -15px -4px}
}

/* ==========================================================================
   1.0.23: tighter headline leading, sitewide (Kyle: "too much space between the lines on the headlines").
   Scale: h1 1.06, h2 1.08, h3 1.14, h4 1.2. Inter descenders (~.24em) + ascenders (~.75em) fit inside 1.06,
   so no clipping/overlap. !important so it also beats the inline <style> blocks inside page content
   (/cv-linkedin/, /get-started/, /10000-interviews/, /confirmation/...).
   ========================================================================== */
h1,.h1{line-height:1.06!important}
h2,.h2{line-height:1.08!important}
h3{line-height:1.14!important}
h4{line-height:1.2!important}
/* named hero / title classes that set their own leading */
.hero h1,.hero-full h1,.ufc-mag-title,.ufc-hs-title,.ufc-cine-title,.ufc-hero2 .ufc-mag-title,.ufc-hub-head h1,.ns-head h1,.ufc-page h1,.oi h1,.ufc-r h1{line-height:1.06!important}
.ufc-hcta-h,.ufc-card--daily h3,.ufc-card h3,.video-copy h3,.phase h3{line-height:1.14!important}
/* sales pages (10000-interviews): paragraphs used as headlines + hero blocks */
.uc-page .uc-h2{line-height:1.12!important}
.uc-page .uc-hero .uc-kicker{line-height:1.18!important}
.uc-page .uc-hero .uc-roaches{line-height:1.05!important}
/* gradient-text hero (background-clip:text): keep the last line's descenders inside the painted box */
.hero-full h1{padding-bottom:.1em;margin-bottom:6px}
/* multi-line red highlight spans: keep them inline so lines can't stack on each other */
.hero-full h1 span,.hero-full h1 .h1-red,.cvl h1 span,.cvl h2 span{line-height:inherit!important}
@media(max-width:700px){
  h1,.hero-full h1{line-height:1.08!important}
  .uc-page .uc-hero .uc-roaches{line-height:1.08!important}
}

/* ==========================================================================
   1.0.24: Jacobo screenshots reserve their space before the lazy images load (no layout shift).
   front-page.php gives each <img> its intrinsic width/height; with the existing width:100%;height:auto
   the browser derives the aspect ratio and reserves the height up front. Look unchanged.
   ========================================================================== */
.jacobo-b .jb-shots .jacobo-shot img{height:auto}

/* ==========================================================================
   1.0.25: site-wide header menu + logo (Kyle: menu "fuzzy/bold, more like HireUA, smaller"; logo "a bit fuzzy").
   Hire-UA.com header nav computed: Inter 13px / 600 / letter-spacing -0.01em / pure white / antialiased.
   Ours was Inter 16px / 600-650 / 72%-alpha grey with default (subpixel) smoothing on a blurred translucent pill,
   which is what read as fuzzy and heavy. Now 14px / 500, -0.01em, solid-ish white, grayscale smoothing.
   Logo: sharpened via pre-scaled PNG srcset (see ufc_logo()); image-rendering stays auto.
   ========================================================================== */
.header,.header .hnav,.header .hnav a,.header .hmore-btn,.header .btn{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.header .hnav{color:rgba(255,255,255,.88)!important}
.header .hnav>a,.header .hmore-btn{font-weight:500!important;letter-spacing:-.01em!important;color:rgba(255,255,255,.88)!important}
.header .hnav>a:hover,.header .hmore-btn:hover,.header .hmore-btn[aria-expanded="true"]{color:#fff!important}
.header .hmore-list a{font-weight:500;font-size:14px;letter-spacing:-.01em;color:rgba(255,255,255,.88)}
.header .hmore-list a:hover{color:#fff}
@media(min-width:901px){
  .header .hnav>a,.header .hmore-btn{font-size:14px!important}
}
@media(max-width:900px){
  .header .hnav>a,.header .hmore-btn{font-size:16px!important}
  .hnav{font-size:16px}
}
.header .hdr-right>.btn{font-size:14px!important;font-weight:600!important;letter-spacing:-.005em!important}
.header .hnav .hnav-apply{font-size:14px!important;font-weight:700!important;letter-spacing:0!important;color:#fff!important}
.logo img{image-rendering:auto}