/* JobsMeetTalent — Login v2
   Same responsive reconstruction used on register-pixel-perfect.css, scoped
   down to what the (single-step) login screen needs. All visible UI is live
   HTML; no stretched screenshot is used as the page background. */

:root{
  --rp-navy:#061a36;
  --rp-ink:#10233f;
  --rp-muted:#66748a;
  --rp-border:#dfe5ed;
  --rp-gold:#efad1d;
  --rp-gold-soft:#fff4dd;
  --rp-bg:#f5f9fe;
}

html,body{min-height:100%;}
body{margin:0;background:var(--rp-bg);}

.auth-split.auth-split-pixel{
  width:100%; min-height:100vh; display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(460px,.98fr);
  overflow-x:hidden; background:var(--rp-bg);
}

/* ------------------------- LEFT / HERO ------------------------- */
.auth-split-pixel .auth-split-brand{
  min-width:0; min-height:100vh; padding:28px clamp(28px,4.6vw,72px) 26px !important;
  color:var(--rp-ink) !important; background:
    radial-gradient(620px 340px at 72% 50%,rgba(223,239,255,.95),transparent 70%),
    linear-gradient(140deg,#fffdf8 0%,#fff 55%,#f5f9ff 100%) !important;
  display:grid !important; grid-template-rows:auto auto minmax(240px,1fr) auto;
  gap:0; position:relative; overflow:hidden;
}
.auth-split-pixel .auth-split-logo{display:flex;align-items:center;gap:12px;color:#0a1c36;text-decoration:none;}
.auth-split-pixel .auth-split-logo strong{font-size:21px;font-weight:800;letter-spacing:-.35px;}
.auth-split-pixel .sidebar-logo{width:40px;height:40px;border-radius:10px;background:var(--rp-gold);color:#0b1d34;display:grid;place-items:center;font-weight:800;font-size:14px;}

.auth-split-pixel .auth-split-brand > div:nth-child(2){position:relative;z-index:3;max-width:720px;}
.auth-split-pixel .auth-badge-pill{
  margin-top:44px !important; display:inline-flex;align-items:center;gap:6px;
  color:#94620a;background:var(--rp-gold-soft);border:1px solid #f5dfae;
  border-radius:999px;padding:8px 14px;font-size:12px;font-weight:700;
}
.auth-split-pixel .auth-badge-pill svg{flex:0 0 auto;}
.auth-split-pixel .auth-split-brand h2{
  margin:22px 0 16px !important; max-width:690px !important;
  color:var(--rp-navy) !important; font-size:clamp(38px,3.4vw,52px) !important;
  line-height:1.05 !important; font-weight:800 !important; letter-spacing:-1.6px !important;
}
.auth-split-pixel .auth-split-brand h2 .accent{color:var(--rp-gold) !important;}
.auth-split-pixel .auth-split-brand .lede{
  margin:0 !important; max-width:640px !important; color:#55657e !important;
  font-size:16px !important; line-height:1.55 !important;
}
.auth-split-pixel .auth-split-features{margin:24px 0 0 !important;gap:11px !important;}
.auth-split-pixel .auth-split-features li{
  color:#1d3557 !important; font-size:14px !important; line-height:1.42 !important;
  align-items:center !important; gap:10px !important;
}
.auth-split-pixel .auth-split-features li .tick{
  width:25px;height:25px;margin-top:0;background:var(--rp-gold) !important;color:#fff !important;
  box-shadow:0 2px 7px rgba(239,173,29,.16);
}
.auth-split-pixel .auth-split-features li .tick svg{width:13px;height:13px;stroke-width:3;}

.auth-split-pixel .auth-hero-wrap{
  position:relative !important; min-height:290px !important; margin:0 !important; overflow:visible;
  align-self:end; z-index:2;
}
.auth-split-pixel .auth-hero-wrap::before{
  content:""; position:absolute; width:min(470px,72%); height:250px; right:7%; bottom:10px;
  border-radius:48% 52% 46% 54%/56% 46% 54% 44%;
  background:radial-gradient(circle at 50% 45%,#fff0ba 0 27%,#e6efff 28% 66%,transparent 67%);
  opacity:.9; z-index:0;
}
.auth-split-pixel .auth-hero-photo{
  position:absolute !important; z-index:2; left:5%;right:8%;top:0;bottom:-4px;
  background-repeat:no-repeat !important; background-position:center bottom !important;
  background-size:contain !important;
}
.auth-split-pixel .auth-float-card{
  position:absolute; z-index:4; display:flex;align-items:center;gap:10px;
  padding:12px 14px !important; background:#fff !important; color:#132540 !important;
  border:1px solid rgba(223,229,237,.7); border-radius:15px !important;
  box-shadow:0 13px 30px rgba(18,45,78,.12) !important; max-width:230px !important;
}
.auth-split-pixel .auth-float-card .fc-icon{width:42px;height:42px;border-radius:12px;flex:0 0 auto;}
.auth-split-pixel .auth-float-card > div{min-width:0;}
.auth-split-pixel .auth-float-card b{font-size:13px !important;line-height:1.28 !important;}
.auth-split-pixel .auth-float-card span{font-size:11px !important;color:#687892 !important;line-height:1.35 !important;}
.auth-split-pixel .auth-float-card:nth-of-type(2){top:5% !important;right:3% !important;}
.auth-split-pixel .auth-float-card:nth-of-type(3){top:40% !important;right:-1% !important;}
.auth-split-pixel .auth-float-card:nth-of-type(4){top:70% !important;right:4% !important;}

.auth-split-pixel .auth-split-stats{
  position:relative; z-index:5; margin:8px 0 0 !important; padding:16px 0 0 !important;
  border-top:1px solid #dce4ee !important; display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px !important;
}
.auth-split-pixel .auth-split-stats .stat-v2{padding:0 !important;border:0 !important;display:flex;align-items:center;gap:10px;min-width:0;}
.auth-split-pixel .auth-split-stats .stat-v2-icon{width:42px;height:42px;border-radius:50%;}
.auth-split-pixel .auth-split-stats .stat-v2 strong{color:var(--rp-navy) !important;font-size:20px !important;line-height:1.1;}
.auth-split-pixel .auth-split-stats .stat-v2 span{color:#6b7890 !important;font-size:11px !important;line-height:1.35;}

/* ------------------------- RIGHT / FORM ------------------------- */
.auth-split-pixel .auth-split-form-side{
  min-width:0; min-height:100vh; padding:28px clamp(20px,4vw,72px) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  background:linear-gradient(135deg,#f8fbff 0%,#eef5fc 100%) !important; overflow:visible !important;
}
.auth-split-pixel .auth-split-form-side .auth-box{width:100%;max-width:440px;margin:0 !important;}
.auth-split-pixel .auth-card{
  width:100%;background:#fff !important;border:1px solid #e1e7ef !important;
  border-radius:18px !important;padding:30px 30px 24px !important;
  box-shadow:0 18px 55px rgba(27,55,88,.10) !important; position:relative; overflow:visible !important;
}
.auth-split-pixel .auth-card::before{ display:none !important; }

.auth-split-pixel .auth-tabs{
  display:grid !important;grid-template-columns:1fr 1fr;gap:3px;
  background:#f6f4ef !important;border:1px solid #e5e0d6 !important;
  border-radius:12px !important;padding:3px !important;margin:0 0 20px !important;
}
.auth-split-pixel .auth-tabs a{
  text-decoration:none;padding:11px 12px !important;text-align:center;border-radius:9px !important;
  color:#64728a !important;font-size:13px !important;font-weight:700 !important;
}
.auth-split-pixel .auth-tabs a.active{background:#fff;color:var(--rp-ink) !important;box-shadow:0 2px 8px rgba(25,44,69,.07);}

.auth-split-pixel .auth-card > h1{
  display:block !important;margin:0 !important;font-size:25px !important;line-height:1.18 !important;
  letter-spacing:-.55px;color:var(--rp-navy);font-weight:800 !important;
}
.auth-split-pixel .auth-card > h1 + p{
  display:block !important;color:#66758d !important;margin:7px 0 18px !important;
  font-size:14px !important;line-height:1.5 !important;
}
.auth-split-pixel .field{margin-bottom:15px !important;}
.auth-split-pixel .field label{display:block;font-size:12px;font-weight:600;color:#203753;margin-bottom:7px;}
.auth-split-pixel input,.auth-split-pixel select,.auth-split-pixel textarea{
  width:100%;height:49px;border:1px solid #d8e0e9 !important;border-radius:9px !important;
  background:#fff !important;color:#1a2d47 !important;font-family:inherit;font-size:14px !important;
  box-shadow:none !important;outline:none;transition:border-color .15s,box-shadow .15s;
}
.auth-split-pixel input:focus,.auth-split-pixel select:focus,.auth-split-pixel textarea:focus{
  border-color:#6aa2e8 !important;box-shadow:0 0 0 3px rgba(76,143,221,.10) !important;
}
.auth-split-pixel input::placeholder{color:#9aa7b7;opacity:1;}
.auth-split-pixel .field-icon-wrap>svg{left:14px !important;color:#9aa7b7 !important;}
.auth-split-pixel .field-icon-wrap input{padding-left:41px !important;}
.auth-split-pixel .auth-forgot{text-align:right;margin:0 0 16px;}
.auth-split-pixel .auth-forgot a{font-size:12.5px;color:#4c7fcc;font-weight:600;}
.auth-split-pixel .btn-block{height:50px !important;border-radius:10px !important;font-size:14px !important;font-weight:700 !important;background:var(--rp-navy) !important;}
.auth-split-pixel .auth-legal{margin-top:16px !important;color:#728096 !important;font-size:10.5px !important;line-height:1.7 !important;}
.auth-split-pixel .auth-legal a{color:#728096;}

/* ------------------------------- BREAKPOINTS ---------------------------- */
@media (max-width:1180px) and (min-width:901px){
  .auth-split.auth-split-pixel{grid-template-columns:minmax(0,1fr) minmax(430px,.96fr);}
  .auth-split-pixel .auth-split-brand{padding-left:34px !important;padding-right:30px !important;}
  .auth-split-pixel .auth-split-brand h2{font-size:42px !important;}
  .auth-split-pixel .auth-float-card{transform:scale(.92);transform-origin:right center;}
}

@media (max-width:900px){
  .auth-split.auth-split-pixel{display:block !important;min-height:0;}
  .auth-split-pixel .auth-split-brand{min-height:0 !important;padding:24px 24px 28px !important;display:block !important;}
  .auth-split-pixel .auth-badge-pill{margin-top:28px !important;}
  .auth-split-pixel .auth-split-brand h2{font-size:36px !important;max-width:760px !important;}
  .auth-split-pixel .auth-split-brand .lede{max-width:720px !important;}
  .auth-split-pixel .auth-hero-wrap{min-height:310px !important;margin-top:10px !important;}
  .auth-split-pixel .auth-split-stats{margin-top:14px !important;}
  .auth-split-pixel .auth-split-form-side{min-height:auto;padding:24px !important;}
  .auth-split-pixel .auth-split-form-side .auth-box{max-width:480px;}
}

@media (max-width:640px){
  .auth-split-pixel .auth-split-brand{padding:20px 18px 24px !important;}
  .auth-split-pixel .auth-split-logo strong{font-size:18px;}
  .auth-split-pixel .sidebar-logo{width:36px;height:36px;}
  .auth-split-pixel .auth-badge-pill{margin-top:24px !important;font-size:11px;padding:7px 12px;}
  .auth-split-pixel .auth-split-brand h2{font-size:30px !important;letter-spacing:-1px !important;margin-top:18px !important;}
  .auth-split-pixel .auth-split-brand .lede{font-size:14px !important;}
  .auth-split-pixel .auth-split-features{margin-top:20px !important;gap:9px !important;}
  .auth-split-pixel .auth-split-features li{font-size:12.5px !important;}
  .auth-split-pixel .auth-split-features li .tick{width:22px;height:22px;}
  .auth-split-pixel .auth-hero-wrap{min-height:260px !important;}
  .auth-split-pixel .auth-float-card{padding:9px 10px !important;max-width:185px !important;transform:scale(.88);}
  .auth-split-pixel .auth-float-card .fc-icon{width:34px;height:34px;border-radius:10px;}
  .auth-split-pixel .auth-float-card b{font-size:11px !important;}
  .auth-split-pixel .auth-float-card span{font-size:9.5px !important;}
  .auth-split-pixel .auth-float-card:nth-of-type(2){top:1% !important;right:0 !important;}
  .auth-split-pixel .auth-float-card:nth-of-type(3){top:38% !important;right:-3% !important;}
  .auth-split-pixel .auth-float-card:nth-of-type(4){top:70% !important;right:0 !important;}
  .auth-split-pixel .auth-split-stats{grid-template-columns:1fr;gap:10px !important;padding-top:14px !important;}
  .auth-split-pixel .auth-split-stats .stat-v2{justify-content:flex-start;}
  .auth-split-pixel .auth-split-form-side{padding:14px 14px 24px !important;}
  .auth-split-pixel .auth-card{padding:20px 18px !important;border-radius:15px !important;}
  .auth-split-pixel .auth-tabs{margin-bottom:16px !important;}
  .auth-split-pixel .auth-card > h1{font-size:21px !important;}
  .auth-split-pixel .btn-block{height:47px !important;font-size:13px !important;}
}

/* ---------------------------------------------------------------------
   Side-by-side hero (2026-10): on tablet/desktop, put the copy block and
   the hero photo next to each other instead of stacking the photo below
   the checklist — keeps the brand panel from running taller than the
   form panel. Mobile (<=900px) is untouched; it already stacks via the
   existing display:block override below.
   --------------------------------------------------------------------- */
@media (min-width:901px){
  .auth-split-pixel .auth-split-brand{
    display:grid !important;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) !important;
    grid-template-rows:auto auto auto !important;
    align-content:center;
    grid-template-areas:
      "logo logo"
      "content photo"
      "stats stats" !important;
    column-gap:28px;
    row-gap:0;
  }
  .auth-split-pixel .auth-split-logo{ grid-area:logo; }
  .auth-split-pixel .auth-split-brand > div:nth-child(2){
    grid-area:content; max-width:none !important; align-self:center;
  }
  .auth-split-pixel .auth-badge-pill{ margin-top:0 !important; }
  .auth-split-pixel .auth-split-brand h2{
    font-size:clamp(26px,2.4vw,36px) !important; line-height:1.1 !important;
    letter-spacing:-.9px !important; margin:16px 0 12px !important; max-width:none !important;
  }
  .auth-split-pixel .auth-split-brand .lede{
    font-size:13.5px !important; line-height:1.55 !important; max-width:none !important;
  }
  .auth-split-pixel .auth-split-features{ margin-top:16px !important; gap:8px !important; }
  .auth-split-pixel .auth-split-features li{ font-size:12.5px !important; }
  .auth-split-pixel .auth-split-features li .tick{ width:20px; height:20px; }

  .auth-split-pixel .auth-hero-wrap{
    grid-area:photo; align-self:center; min-height:260px !important; margin:0 !important;
  }
  .auth-split-pixel .auth-float-card{ transform:scale(.82); max-width:185px !important; padding:10px 12px !important; }
  .auth-split-pixel .auth-float-card:nth-of-type(2){ top:3% !important; right:14% !important; }
  .auth-split-pixel .auth-float-card:nth-of-type(3){ top:40% !important; right:9% !important; }
  .auth-split-pixel .auth-float-card:nth-of-type(4){ top:72% !important; right:15% !important; }

  .auth-split-pixel .auth-split-stats{ grid-area:stats; margin-top:18px !important; }
}

@media (min-width:1280px){
  .auth-split-pixel .auth-split-brand h2{ font-size:clamp(30px,2vw,40px) !important; }
  .auth-split-pixel .auth-hero-wrap{ min-height:300px !important; }
  .auth-split-pixel .auth-float-card{ transform:scale(.9); max-width:200px !important; }
  .auth-split-pixel .auth-float-card:nth-of-type(2){ right:12% !important; }
  .auth-split-pixel .auth-float-card:nth-of-type(3){ right:7% !important; }
  .auth-split-pixel .auth-float-card:nth-of-type(4){ right:13% !important; }
}