/* Shared header for the career tool pages (templates/partials/tool_hero.html).
   Selectors start with body so they win over the page and global stylesheets,
   which load after this file. */

body .tool-hero-wrap{
  width:min(1150px, 92%);
  margin:20px auto 24px;
}

body .tool-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(0, .85fr);
  gap:36px;
  align-items:center;
  padding:40px 44px;
  border:1px solid #DCE6F5;
  border-radius:28px;
  background:
    radial-gradient(circle at 92% 8%, rgba(254,201,87,.20), transparent 32%),
    linear-gradient(135deg, #FFFFFF 0%, #F4F8FF 100%);
  box-shadow:0 14px 36px rgba(16,54,95,.07);
  overflow:hidden;
}

body .tool-hero__kicker{
  display:inline-block;
  margin:0 0 14px;
  padding:6px 12px;
  border-radius:999px;
  background:#EEF4FF;
  color:#122A66;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body .tool-hero__title{
  margin:0 0 14px;
  max-width:18ch;
  color:#0F1F4D;
  font-size:clamp(2rem, 1.2rem + 2.6vw, 3.1rem);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.025em;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:manual;
  text-wrap:balance;
}

body .tool-hero__accent{
  color:#1746D1;
  overflow-wrap:normal;
  white-space:normal;
}

body .tool-hero__subtitle{
  margin:0;
  max-width:60ch;
  color:#475467;
  font-size:1.05rem;
  line-height:1.6;
  overflow-wrap:normal;
}

body .tool-hero__points{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:20px 0 0;
  padding:0;
  list-style:none;
}

body .tool-hero__points li{
  display:flex;
  align-items:center;
  gap:7px;
  color:#344054;
  font-size:.9rem;
  font-weight:700;
}

body .tool-hero__points li::before{
  content:"✓";
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#DCFAE6;
  color:#067647;
  font-size:.72rem;
  font-weight:900;
}

body .tool-hero__steps{
  display:grid;
  gap:10px;
  margin:0;
  padding:18px;
  list-style:none;
  border:1px solid #DCE6F5;
  border-radius:20px;
  background:rgba(255,255,255,.85);
}

body .tool-hero__steps li{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  background:#F8FBFF;
}

body .tool-hero__steps li > span{
  flex:0 0 30px;
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#122A66;
  color:#fff;
  font-weight:800;
  font-size:.85rem;
}

body .tool-hero__steps li div{ display:grid; gap:2px; min-width:0; }
body .tool-hero__steps strong{ color:#0F1F4D; font-size:.95rem; overflow-wrap:normal; }
body .tool-hero__steps small{ color:#5C6882; font-size:.82rem; line-height:1.4; overflow-wrap:normal; }

@media (max-width: 900px){
  body .tool-hero{
    grid-template-columns:1fr;
    gap:22px;
    padding:30px 26px;
  }
  body .tool-hero__title{ max-width:22ch; }
  body .tool-hero__steps{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    padding:12px;
  }
  body .tool-hero__steps li{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 640px){
  body .tool-hero-wrap{ width:calc(100% - 32px); margin:12px auto 18px; }
  body .tool-hero{ padding:24px 18px; border-radius:22px; }
  body .tool-hero__title{ font-size:clamp(1.7rem, 1.2rem + 3vw, 2.1rem); max-width:none; }
  body .tool-hero__subtitle{ font-size:.97rem; }
  body .tool-hero__points{ display:grid; gap:8px; margin-top:16px; }
  /* The steps repeat what the form below shows; keep phones short. */
  body .tool-hero__steps{ display:none; }
}

/* Keep the highlighted phrase together ("ATS-ready resume") except on very narrow screens. */
body .tool-hero__accent{ white-space:nowrap; }
@media (max-width: 380px){
  body .tool-hero__accent{ white-space:normal; }
}

/* Guard against page-wide watermark resets (*::before{content:''}), which
   would add empty grid cells and blank the tick icons. */
body .tool-hero::before,
body .tool-hero::after,
body .tool-hero__copy::before,
body .tool-hero__copy::after{ display:none !important; }
body .tool-hero__points li::before{ content:"✓" !important; }