.hc-hiring {
  color: #536075;
  line-height: 1.65;
}
.hc-hiring [hidden] { display: none !important; }
.hc-hiring-intro { padding-bottom: 42px; }
.hc-hiring-intro h1 { max-width: none; color: #15233c; }
.hc-hiring-intro > p { max-width: 800px; }
.hc-hiring-related { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 24px; }
.hc-hiring-related a { color: #245ce3; font-size: 14px; font-weight: 600; }
.hc-hiring-layout { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(0, 1.4fr); gap: 32px; align-items: start; }
.hc-hiring h2 { color: #15233c; font-size: 27px; line-height: 1.25; letter-spacing: -.6px; margin: 0 0 14px; }
.hc-hiring h3 { color: #15233c; font-size: 19px; line-height: 1.35; margin: 0 0 16px; }
.hc-hiring-inputs { border: 1px solid #e0e7f2; border-radius: 20px; padding: 28px; background: #fff; min-width: 0; }
.hc-hiring-field { margin-top: 23px; min-width: 0; }
.hc-hiring-field label { display: block; color: #15233c; font-size: 14px; font-weight: 600; margin-bottom: 9px; line-height: 1.55; }
.hc-hiring-field :is(input, select) { width: 100%; min-width: 0; min-height: 49px; border: 1px solid #cad5e5; border-radius: 9px; padding: 12px; background: #fff; color: #15233c; font: inherit; font-size: 16px; box-sizing: border-box; }
.hc-hiring-field [aria-invalid="true"] { border-color: #b52f36; }
.hc-hiring .hc-hiring-help { font-size: 12px; line-height: 1.7; color: #64728a; margin: 9px 0 0; }
.hc-hiring .hc-hiring-error { font-size: 13px; line-height: 1.5; color: #a2212c; margin: 7px 0 0; }
.hc-hiring :is(input, select, button, summary, a):focus-visible { outline: 3px solid #245ce3; outline-offset: 4px; }
.hc-hiring-advanced { margin-top: 26px; border-block: 1px solid #e0e7f2; padding: 19px 0; }
.hc-hiring-advanced summary { cursor: pointer; color: #15233c; font-size: 15px; font-weight: 600; min-height: 24px; }
.hc-hiring-reset { color: #245ce3; border: 0; background: transparent; padding: 12px 0; margin: 12px 0 0; min-height: 44px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; }
.hc-hiring-output { min-width: 0; }
.hc-hiring-output-heading > p { font-size: 14px; margin: 0 0 24px; }
.hc-hiring-comparison { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.hc-hiring-comparison article { border-radius: 18px; padding: 25px 22px; border: 1px solid #dce5f2; min-width: 0; }
.hc-hiring-agency { background: #edf3ff; border-color: #ccdcfa !important; }
.hc-hiring-internal { background: #f8faff; }
.hc-hiring-card-label { font-size: 13px; margin: 0 0 9px; }
.hc-hiring-total { display: block; color: #15233c; font-size: clamp(25px, 2.4vw, 35px); font-weight: 700; letter-spacing: -1px; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; margin-bottom: 26px; }
.hc-hiring-agency .hc-hiring-total { color: #245ce3; }
.hc-hiring dl { margin: 0; }
.hc-hiring dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid #dfe6f0; }
.hc-hiring dt { font-size: 13px; }
.hc-hiring dd { margin: 0; color: #15233c; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.hc-hiring-difference { margin: 22px 0 32px; padding: 20px 22px; border: 1px solid #e0e7f2; border-radius: 13px; }
.hc-hiring-difference > div { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: #15233c; font-size: 14px; }
.hc-hiring-difference strong { font-size: 24px; letter-spacing: -.5px; overflow-wrap: anywhere; }
.hc-hiring-difference p { font-size: 13px; margin: 8px 0 0; }
.hc-hiring-breakdown { border-top: 1px solid #e0e7f2; padding-top: 24px; }
.hc-hiring-empty { padding: 30px; border: 1px dashed #cad5e5; border-radius: 18px; background: #f8faff; }
.hc-hiring-empty p { margin-bottom: 0; }
.hc-hiring-context { margin-top: 56px; padding-top: 38px; border-top: 1px solid #e0e7f2; }
.hc-hiring-context > p { max-width: 780px; font-size: 15px; margin: 0 0 26px; }
.hc-hiring-horizons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hc-hiring-horizons article { border: 1px solid #dce5f2; border-radius: 18px; padding: 26px; background: #fff; min-width: 0; }
.hc-hiring-horizons h3 { margin-bottom: 22px; font-size: 22px; }
.hc-hiring-gross { padding-bottom: 20px; border-bottom: 1px solid #e0e7f2; }
.hc-hiring-gross span { display: block; font-size: 12px; margin-bottom: 7px; }
.hc-hiring-gross strong { display: block; color: #15233c; font-size: 27px; line-height: 1.25; letter-spacing: -.6px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.hc-hiring-horizon-row { margin-top: 24px; }
.hc-hiring-horizon-row h4 { color: #245ce3; font-size: 14px; margin: 0 0 5px; }
.hc-hiring-horizon-row + .hc-hiring-horizon-row h4 { color: #15233c; }
.hc-hiring-context > .hc-hiring-help { margin-top: 22px; max-width: 960px; }
.hc-hiring-notes { max-width: 960px; margin: 30px 0 0; }
.hc-hiring-notes p { font-size: 12px; color: #64728a; line-height: 1.75; }
.hc-hiring-notes a { color: #245ce3; text-decoration: underline; }
.hc-hiring-cta { margin-top: 44px; border-radius: 20px; padding: 36px; background: #edf3ff; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.hc-hiring-cta > div { max-width: 620px; }
.hc-hiring-cta p { margin: 0; font-size: 15px; }
.hc-hiring-cta .button { flex-shrink: 0; }
@media (max-width: 1100px) {
  .hc-hiring-layout { grid-template-columns: minmax(280px, .9fr) minmax(0, 1.2fr); gap: 24px; }
  .hc-hiring-comparison { grid-template-columns: 1fr; }
  .hc-hiring-horizons article { padding: 22px; }
}
@media (max-width: 800px) {
  .hc-hiring-layout { grid-template-columns: 1fr; }
  .hc-hiring-horizons { grid-template-columns: 1fr; }
  .hc-hiring-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .hc-hiring-intro { padding-bottom: 30px; }
  .hc-hiring-inputs, .hc-hiring-horizons article { padding: 22px; }
  .hc-hiring h2 { font-size: 24px; }
  .hc-hiring-cta { padding: 26px 22px; }
  .hc-hiring-cta .button { white-space: normal; text-align: left; }
  .hc-hiring dl > div { flex-wrap: wrap; gap: 5px 14px; }
  .hc-hiring dd { margin-left: auto; }
  .hc-hiring-related { gap: 14px; }
}