/* ========== FULL-SCREEN SECTIONS ========== */
.recruiter-page main{scroll-snap-type:y mandatory}
.section{min-height:100svh;display:grid;place-items:center;scroll-snap-align:center;padding:clamp(24px,5vw,60px) 0}

/* Two-column stage: left = heading, right = glass card */
.stage{
  display:grid;
  grid-template-columns:minmax(260px, 40%) minmax(520px, 820px);
  gap:clamp(18px,4vw,48px);
  align-items:center;
  width:min(1180px,92vw);
  margin:0 auto;
}
@media(max-width:900px){
  .stage{grid-template-columns:1fr;gap:18px}
  .glass-card{margin:0 auto}
  .section-title{text-align:center;margin-inline:auto}
}

.section-title{
  grid-column:1/2;
  margin:0;
  font-size:clamp(28px,4.2vw,56px);
  font-weight:800;
  color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.25);
  align-self:center;
  justify-self:start;
}

/* ========== GLASS LAYOUT (unified) ========== */
.glass-card{
  grid-column:2/3;
  width:100%;
  position:relative;
  border-radius:var(--radius);
  padding:clamp(16px,2vw,18px);
  overflow:hidden;
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  background: var(--glass-bg);
  display:flex;
  flex-direction:column;
  min-height:260px;
}


.glass-body{display:grid;gap:clamp(10px,1.8vw,14px)}
.glass-body p{margin:0;font:500 clamp(15px,1.2vw,16px) / 1.6 ui-sans-serif,system-ui;color:var(--muted)}
.glass-footer{margin-top:auto;display:flex;justify-content:flex-end;padding-top:8px}

/* Cards sticky to center while section snaps */
.persona-card,.book-card,.fit-card,.fit-summary-card{position:sticky;top:12svh}

/* Fit summary table */
.summary-title{margin:0 0 6px 0;font-weight:var(--font-extrabold)}
.fit-summary-body .row{display:grid;grid-template-columns:1fr 24px 1fr;gap:10px;padding:10px 0;border-top:1px dashed #eee}
.fit-summary-body .row:first-child{border-top:0}
.hidden{display:none !important}

/* Tweak form fields for consistency */
.glass-form{display:flex;flex-direction:column;gap:14px;min-height:360px}
.glass-form textarea{
  width:100%;height:220px;resize:vertical;border-radius:16px;
  border:1px solid rgba(0,0,0,.06);padding:16px 14px;background:rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);font:500 14px/1.5 ui-sans-serif,system-ui;color:var(--ink);
  transition:height .2s ease
}
.helper{margin:0;font-size:15px;color:#404}
.progress{display:none;opacity:0;height:0;overflow:hidden;gap:8px;margin-top:6px}
.glass-form.is-busy .progress{display:grid;opacity:1;height:auto}
.progress .step{display:flex;align-items:center;gap:8px;font-size:13px;color:#2c2c2c;opacity:.5;transition:opacity .25s,transform .25s;transform:translateY(2px)}
.progress .step::before{content:"";width:8px;height:8px;border-radius:50%;background:#bbb;box-shadow:0 0 0 2px rgba(0,0,0,.04) inset}
.progress .step.is-on{opacity:1;transform:none}
.progress .step.is-on::before{background:#0a0a0a}

/* ========== RECRUITER PAGE ========== */
.page-fixed-bg{position:fixed;inset:0;z-index:-1;background:url('/img/recruiter.jpg') center/cover no-repeat;pointer-events:none}
.page-fixed-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(24,24,32,0.10); /* even lighter overlay */
  pointer-events: none;
}

/* HERO remains unchanged, ensure no overlay and centered */
.recruiter-hero{background:transparent;color:#fff;min-height:100svh;display:grid;place-items:center;text-align:center}
.recruiter-hero::before{content:none !important}
.recruiter-hero .hero-content{z-index:2;display:grid;gap:16px}
.hero-title{font-size:clamp(2.6rem,6vw,5rem);font-weight:var(--font-extrabold);margin:0 0 12px;text-shadow:0 2px 16px rgba(0,0,0,.25)}
.hero-sub{font-size:clamp(1.05rem,1rem + .4vw,1.3rem);opacity:.95;margin:0 0 28px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.cta-row .btn { min-width: 180px; }



/* Score coloring & domain badge */
#fitScoreLarge{font-weight:var(--font-extrabold);transition:transform 0.1s ease-out}
#fitScoreLarge.score-good{color:#0b7a28}
#fitScoreLarge.score-ok{color:#8a6d00}
#fitScoreLarge.score-low{color:#9b1c1c}
.badge{display:inline-block;margin-left:10px;padding:2px 8px;border-radius:999px;border:1px solid rgba(0,0,0,.2);font:600 12px/1 ui-sans-serif,system-ui;color:#222;background:rgba(255,255,255,.6);backdrop-filter:saturate(120%)}

/* Score celebration animation */
@keyframes celebration {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.15) rotate(-2deg); }
  50% { transform: scale(1.1) rotate(2deg); }
  75% { transform: scale(1.15) rotate(-1deg); }
}

/* Character counter styling */
.char-counter {
  font-size: 13px;
  margin-top: 8px;
  transition: color 0.2s ease;
}

/* Error message styling */
.error-message {
  text-align: center;
  padding: 20px;
}

.error-message h4 {
  color: #ef4444;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 700;
}

/* --- Fit v2 layout polish --- */

/* Make summary body read like a premium report */
.fit-summary-body {
  display: grid;
  gap: 10px;
  font-size: 14px;
}

/* Table refinement inside summary */
.fit-summary-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.fit-summary-body th,
.fit-summary-body td {
  padding: 6px 8px;
  vertical-align: top;
}

/* Slight opacity for table text so headings & bullets pop */
.fit-summary-body th {
  font-weight: 600;
  opacity: 0.9;
}

.fit-summary-body td {
  opacity: 0.92;
}

/* Match-strength pills used in responsibilities / matrix */
.fit-pill {
  display: inline-block;
  margin-right: 6px;
  margin-bottom: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font: 600 11px/1 ui-sans-serif, system-ui;
  border: 1px solid rgba(0, 0, 0, .16);
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(130%);
  -webkit-backdrop-filter: saturate(130%);
  white-space: nowrap;
}

.fit-pill--high {
  border-color: rgba(11, 122, 40, .5);
}

.fit-pill--medium {
  border-color: rgba(138, 109, 0, .5);
}

.fit-pill--low {
  border-color: rgba(155, 28, 28, .5);
}

/* Tweak the section headings inside the report */
.report-subsection {
  margin: 14px 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: #2c2c2c;
}

.report-list {
  margin: 6px 0;
  padding-left: 18px;
  list-style: disc;
}

.report-list li {
  margin: 4px 0;
  line-height: 1.5;
}

.report-list-warning li {
  color: #9b1c1c;
}