/* AUT-698: editable, responsive equivalents of the two approved infographics. */
.employer-visual { background: #100f0c; overflow: hidden; }
.employer-visual .shell { width: min(1320px, calc(100% - 48px)); }
.employer-visual .section-head { max-width: none; margin-bottom: 56px; }
.employer-visual .section-head.center h2 { max-width: 1250px; margin-inline: auto; font-size: clamp(2rem, 4.2vw, 3.65rem); line-height: 1.08; letter-spacing: -.035em; }
.employer-visual { scroll-margin-top: 80px; }
.employer-visual .section-head p { margin: 18px auto 0; color: #d8d4cc; font-size: clamp(1.05rem, 1.8vw, 1.45rem); line-height: 1.5; }
.visual-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 44px; list-style: none; padding: 0; margin: 0; }
.visual-stage { position: relative; min-width: 0; }
.stage-object { position: relative; height: 355px; display: flex; align-items: center; justify-content: center; }
.visual-stage:not(:last-child) .stage-object::after { content: ''; position: absolute; left: 88%; width: calc(24% + 44px); height: 2px; background: #f25729; top: 50%; z-index: 0; }
.stage-arrow { position: absolute; right: -34px; top: 166px; width: 24px; height: 24px; filter: invert(45%) sepia(81%) saturate(2540%) hue-rotate(341deg); z-index: 3; }
.visual-caption { font-size: clamp(1.1rem, 1.9vw, 1.6rem); font-weight: 800; line-height: 1.3; text-align: center; margin: 28px 0 0; }
.visual-paper { position: relative; z-index: 1; width: 90%; max-width: 340px; min-height: 318px; padding: 30px; color: #191917; background: #f4f1eb; border: 1px solid #fff; border-radius: 7px; box-shadow: 0 3px 0 #bbb6ac, 0 20px 32px #0007; transform: rotate(-3deg); }
.visual-paper::before { content: ''; position: absolute; z-index: -1; inset: 16px -10px -10px 6px; border: 1px solid #f2572988; border-radius: 7px; background: #f2572914; transform: rotate(-4deg); }
.visual-paper > * { position: relative; }
.visual-paper h3, .visual-paper .paper-title { display: block; color: #171715; font-size: clamp(1.35rem, 2.1vw, 1.8rem); font-weight: 850; line-height: 1.15; margin-bottom: 24px; }
.paper-rule { width: 64%; height: 6px; margin-bottom: 18px; border-radius: 3px; background: #d2cfc8; }
.visual-icon { width: 28px; height: 28px; flex: 0 0 28px; }
.paper-row { display: flex; align-items: center; gap: 14px; margin: 18px 0; font-size: 1.12rem; font-weight: 700; }
.paper-row .visual-icon { filter: invert(25%) sepia(97%) saturate(2024%) hue-rotate(355deg); }
.paper-placeholder { display: inline-block; margin-left: auto; height: 8px; width: 30%; border-radius: 3px; background: #d2cfc8; }
.paper-ai { display: flex; align-items: center; gap: 10px; margin-top: 24px; padding: 12px; border-radius: 5px; color: #943117; background: #f9dfd2; font-size: 1rem; font-weight: 750; line-height: 1.4; }
.visual-report { transform: rotate(3deg); }
.visual-report .paper-row { margin-top: 25px; }
.report-line { height: 7px; border-radius: 3px; width: 70%; background: #d2cfc8; margin: -4px 0 30px 42px; }
.visual-example { display: block; color: #65615a; font-size: .875rem; line-height: 1.4; margin-top: 22px; }
.region-map { position: relative; width: 215px; height: 367px; z-index: 1; }
.region-map > img { width: 100%; height: 100%; filter: drop-shadow(4px 6px 0 #080806) drop-shadow(0 10px 10px #0008); }
.region-pin { position: absolute; left: 19.32%; top: 50.62%; width: 13px; height: 13px; transform: translate(-50%, -50%); background: #fff0e1; border: 3px solid #ed4c23; border-radius: 50%; box-shadow: 0 0 0 8px #ed4c2344, 0 0 26px 12px #ed4c2355; }
.region-label { position: absolute; left: 27%; top: 47%; width: 170px; padding: 5px 0 5px 16px; border-left: 2px solid #f25729; color: #faf8f3; font-size: 1rem; font-weight: 750; line-height: 1.4; background: #100f0cdd; }
.region-label small { display: block; color: #c7c1b7; font-size: .875rem; font-weight: 500; }
.visual-footer { margin-top: 46px; padding-top: 24px; border-top: 1px solid #e8451f; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.visual-footer p { font-size: 1.05rem; line-height: 1.55; color: #d8d4cc; max-width: 780px; }
.visual-footer a { flex-shrink: 0; color: #fff; text-decoration: underline; text-underline-offset: 5px; font-weight: 750; }
.visual-footer a:focus-visible { outline: 3px solid #f2b705; outline-offset: 5px; }
.development-label { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; color: #f6d49b; border: 1px solid #a98443; border-radius: 3px; padding: 8px 14px; font-size: .95rem; font-weight: 700; }
.contact-stages { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.contact-stages .stage-object { height: 310px; }
.contact-stages .visual-paper { width: 95%; min-height: 262px; padding: 22px; }
.contact-stages .visual-stage:not(:last-child) .stage-object::after { width: calc(24% + 30px); }
.contact-stages .stage-arrow { right: -27px; top: 143px; }
.contact-stages .visual-caption { font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.contact-role { font-size: 1.15rem; line-height: 1.35; font-weight: 750; margin: 20px 0 18px; }
.sample-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sample-chips span { font-size: .9rem; font-weight: 650; background: #e2ded6; border-radius: 4px; padding: 7px; }
.profile-heading { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; }
.profile-heading > .visual-icon { width: 40px; height: 40px; border-radius: 50%; background: #e0dcd4; padding: 6px; flex-basis: 40px; }
.profile-heading .paper-title { font-size: 1.25rem; margin: 0 0 7px; }
.affinity-label { display: inline-block; font-size: .875rem; font-weight: 750; padding: 5px 7px; border-radius: 4px; background: #d8ebd5; color: #24542c; }
.match-reason { display: flex; align-items: center; gap: 8px; margin: 17px 0; font-size: .98rem; font-weight: 650; line-height: 1.35; }
.match-reason .visual-icon { width: 20px; height: 20px; flex-basis: 20px; }
.invitation-object { position: relative; width: 100%; max-width: 320px; aspect-ratio: 1; z-index: 1; }
.invitation-envelope { position: absolute; width: 100%; height: 100%; inset: 0; }
.contact-stages .invitation-paper { position: absolute; left: 15%; top: 19%; width: 70%; min-height: 150px; padding: 18px; transform: rotate(-2deg); }
.invitation-paper::before { display: none; }
.invitation-paper h3 { font-size: clamp(1.12rem, 1.7vw, 1.5rem); margin: 0; }
.envelope-front { z-index: 2; clip-path: inset(56% 0 0 0); }
.invitation-message { position: absolute; z-index: 3; left: 12%; right: 12%; top: 64%; color: #fff; text-shadow: 0 1px 3px #5f200c; font-size: 1.05rem; line-height: 1.4; text-align: center; font-weight: 750; }
.decision-paper { transform: rotate(3deg); }
.sample-choice { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; padding: 12px 6px; border: 1px solid #8b3825; border-radius: 4px; color: #8b3825; font-weight: 750; font-size: 1.05rem; }
.sample-choice:first-of-type { background: #386b38; color: #fff; border-color: #386b38; }
.sample-choice:first-of-type img { filter: invert(1); }
.contact-disclaimer { text-align: center; }
.contact-disclaimer p { margin: 0 auto; }
.employer-guide-link { display: inline-block; margin-top: 20px; color: #fff; text-decoration: underline; text-underline-offset: 4px; font-weight: 650; }
.candidate-route { margin: 18px 0; color: #d8d4cc; font-size: 1rem; }
.candidate-route a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .employer-visual.visual-enter .visual-paper { animation: paper-enter 650ms ease-out both; }
  .employer-visual.visual-enter .visual-stage:nth-child(2) .visual-paper { animation-delay: 120ms; }
  .employer-visual.visual-enter .visual-stage:nth-child(3) .visual-paper { animation-delay: 240ms; }
  .employer-visual.visual-enter .visual-stage:nth-child(4) .visual-paper { animation-delay: 360ms; }
  .employer-visual.visual-enter .region-pin { animation: region-emphasis 1200ms ease-out 2; }
  @keyframes paper-enter { from { opacity: .3; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
  @keyframes region-emphasis { 50% { box-shadow: 0 0 0 15px #ed4c2311, 0 0 26px 12px #ed4c2377; } }
}
@media (max-width: 1050px) {
  .contact-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .contact-stages .visual-stage:nth-child(2) .stage-object::after, .contact-stages .visual-stage:nth-child(2) .stage-arrow { display: none; }
  .visual-paper { padding: 24px; }
  .visual-stages:not(.contact-stages) { gap: 20px; }
}
@media (max-width: 700px) {
  .employer-visual .shell { width: calc(100% - 40px); }
  .employer-visual .section-head { margin-bottom: 32px; }
  .visual-stages, .contact-stages { grid-template-columns: 1fr; gap: 48px; }
  .visual-stage { max-width: 380px; width: 100%; margin: 0 auto; }
  .stage-object { height: 335px; }
  .visual-paper, .contact-stages .visual-paper { width: 85%; }
  .visual-stage:not(:last-child) .stage-object::after, .stage-arrow { display: none; }
  .visual-caption { margin-top: 20px; font-size: 1.35rem; }
  .visual-footer { flex-direction: column; align-items: flex-start; margin-top: 32px; }
  .visual-footer p { font-size: 1rem; }
  .region-map { width: 195px; height: 333px; }
  .region-label { width: 162px; }
  .contact-stages .visual-paper { min-height: 254px; }
  .contact-stages .invitation-paper { width: 70%; min-height: 150px; }
  .contact-stages .stage-object { height: 285px; }
  .contact-disclaimer { text-align: left; }
}