.hr-hero-body { display: grid; gap: 1em; align-items: start; }
@media (min-width: 52em) { .hr-hero-body { grid-template-columns: 1.55fr 1fr; } }
.hr-hero-org { padding: 0.4em 0 0.2em; }
.page-hr-hero .k-org-card small { font-size: 0.72em; color: var(--app-text-3); }
.hr-hero-req h4 { margin-bottom: 0.7em; }
.hr-req { display: grid; gap: 0.75em; }
.hr-req-who { display: flex; align-items: center; gap: 0.6em; }
.hr-req-who > span:last-child { display: grid; font-size: 0.84em; color: var(--app-text-3); }
.hr-req-who b { font-size: 1.19em; font-weight: 600; color: var(--app-text); }
.hr-req dl { display: grid; gap: 0.45em; padding: 0.75em; border-radius: 0.7em; background: var(--app-bg); border: 1px solid var(--app-border); }
.hr-req dl div { display: flex; justify-content: space-between; gap: 0.8em; }
.hr-req dt { font-size: 0.84em; color: var(--app-text-3); }
.hr-req dd { font-weight: 600; text-align: right; color: var(--app-text); }
.hr-req-btns { display: flex; gap: 0.5em; }
.hr-req-act .a-swap { display: grid; width: 100%; }
.hr-off-title { margin: 1.1em 0 0.6em; padding-top: 1em; border-top: 1px solid var(--app-border); }
.hr-bal { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1em; padding-top: 0.9em; border-top: 1px solid var(--app-border); font-size: 0.88em; color: var(--app-text-3); }
.hr-bal b { font-family: var(--font-display); font-weight: 600; font-size: 1.5em; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; color: var(--app-text); }
.hr-cost { display: grid; gap: 0.8em; margin-top: 1em; padding: 0.9em; border-radius: 0.9em; background: var(--app-bg); border: 1px solid var(--app-border); }
.hr-cost-days { display: grid; grid-template-columns: repeat(9, 1fr); gap: 0.3em; }
.hr-cost-days i { display: grid; place-content: center; height: 2.2em; border-radius: 0.5em; font-style: normal; font-size: 0.8em; font-weight: 700; color: var(--orange-text); background: var(--orange-wash); box-shadow: inset 0 0 0 1px var(--orange-line); }
.hr-cost-days i.is-off { color: var(--app-text-3); background: var(--app-bg-alt); box-shadow: none; }
.hr-cost-days i.is-bank { color: var(--purple-text); background: var(--purple-bg); box-shadow: none; }
.hr-cost dl { display: grid; gap: 0.6em 1em; }
@media (min-width: 30em) { .hr-cost dl { grid-template-columns: repeat(3, 1fr); } }
.hr-cost dt { font-size: 0.8em; color: var(--app-text-3); }
.hr-cost dd { font-weight: 600; color: var(--app-text); }
.hr-week td.hr-bank { font-weight: 600; background: repeating-linear-gradient(135deg, var(--app-bg-alt) 0 6px, transparent 6px 12px); }
.hr-week tbody th { text-align: left; white-space: nowrap; padding-right: 0.6em; }
.page-hr-hero .hr-week td { min-width: 3.2em; }
.hr-calc { width: min(100%, 24rem); display: grid; gap: 0.9em; }
.hr-calc-who { display: flex; align-items: center; gap: 0.6em; }
.hr-calc-who > span:last-child { display: grid; font-size: 0.84em; color: var(--app-text-3); }
.hr-calc-who b { font-size: 1.19em; font-weight: 600; color: var(--app-text); }
.hr-calc-pattern { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.35em; }
.hr-calc-pattern i { display: grid; place-content: center; height: 2.3em; border-radius: 0.55em; font-style: normal; font-weight: 700; font-size: 0.84em; color: var(--app-text-3); background: var(--app-bg-alt); }
.hr-calc-pattern i.on { color: var(--orange-text); background: var(--orange-wash); box-shadow: inset 0 0 0 1px var(--orange-line); }
.hr-calc-sum { display: grid; }
.hr-calc-sum li { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding: 0.5em 0; border-bottom: 1px solid var(--app-border); color: var(--app-text-2); }
.hr-calc-sum b { font-weight: 600; color: var(--app-text); font-variant-numeric: tabular-nums; }
.hr-calc-sum .hr-calc-total { border-bottom: 0; padding-top: 0.7em; color: var(--app-text); font-weight: 600; }
.hr-calc-sum .hr-calc-total b { font-family: var(--font-display); font-weight: 700; font-size: 1.7em; letter-spacing: var(--track-display); color: var(--orange-text); }
.hr-abs-save { display: flex; justify-content: flex-end; margin-top: 0.9em; }
.hr-abs-kv { margin-top: 1em; padding: 0.8em 0.9em; border-radius: 0.8em; background: var(--app-bg); border: 1px solid var(--app-border); }
.hr-brad { display: grid; gap: 0.7em; margin-top: 0.9em; padding: 0.9em; border-radius: 0.9em; background: var(--card); border: 1px solid var(--app-border); }
.hr-brad p { display: flex; align-items: baseline; gap: 0.7em; flex-wrap: wrap; }
.hr-brad p span { font-size: 0.84em; color: var(--app-text-3); }
.hr-brad p b { font-family: var(--font-display); font-weight: 700; font-size: 1.9em; line-height: 1; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; color: var(--green-text); }
.hr-brad p em { margin-left: auto; font-style: normal; font-size: 0.84em; color: var(--app-text-3); }
.hr-brad-bar { position: relative; height: 0.55em; margin-bottom: 1.5em; border-radius: 1em; background: linear-gradient(90deg, var(--green-bg) 0 25%, var(--amber-bg) 25% 80%, var(--red-bg) 80%); }
.hr-brad-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 18%; border-radius: 1em; background: var(--green); transform-origin: 0 50%; }
.js [data-step="3"] .hr-brad-bar i { animation: hrGrow 0.9s var(--ease-out) both; }
@keyframes hrGrow { from { transform: scaleX(0); } }
.hr-brad-bar u { position: absolute; top: 1em; font-size: 0.72em; font-weight: 600; text-decoration: none; white-space: nowrap; transform: translateX(-50%); }
.hr-brad-amber { left: 25%; color: var(--amber-text); }
.hr-brad-red { left: 80%; color: var(--red-text); }
.hr-rules { display: grid; gap: 0.45em; }
.hr-rules li { display: flex; align-items: center; gap: 0.8em; padding: 0.6em 0.8em; border-radius: 0.75em; background: var(--card); border: 1px solid var(--app-border); }
.hr-rules li.is-on { box-shadow: inset 3px 0 0 var(--orange); }
.hr-rules li > div { flex: 1; min-width: 0; display: grid; }
.hr-rules li > div b { font-weight: 600; color: var(--app-text); }
.hr-rules li > div span { font-size: 0.8em; color: var(--app-text-3); }
.hr-rules li > em { font-style: normal; font-weight: 600; white-space: nowrap; color: var(--app-text); }
@media (max-width: 30em) { .hr-rules li { flex-wrap: wrap; } .hr-rules li > div { flex-basis: 100%; } }
.hr-drag .k-org-card { transition: transform 0.9s var(--ease-out), box-shadow 0.4s, border-color 0.4s; }
.js .hr-drag[data-step="2"] .hr-drag-card { transform: translate(-18%, -42%); box-shadow: var(--shadow-lg); z-index: var(--z-raised); }
.js .hr-drag[data-step="2"] .hr-drag-to, .js .hr-drag[data-step="3"] .hr-drag-to { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.hr-praise { display: grid; gap: var(--space-4); }
.hr-stars { display: flex; align-items: center; gap: 0.3em; margin: 0.9em 0; }
.hr-stars span { margin-right: 0.5em; font-size: 0.84em; color: var(--app-text-3); }
.hr-stars i { width: 1.15em; height: 1.15em; background: var(--amber); clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 35%); }
.hr-stars i.is-off { background: var(--app-border); }
.hr-shout { margin-left: 12%; }
.hr-shout-title { margin-bottom: 0.7em; font-weight: 600; color: var(--purple-text); }
.hr-shout-msg { display: flex; gap: 0.7em; padding: 0.65em 0; border-top: 1px solid var(--app-border); }
.hr-shout-msg > span:last-child { display: grid; gap: 0.1em; color: var(--app-text-2); }
.hr-shout-msg b { font-weight: 600; color: var(--app-text); }
.hr-more { display: grid; gap: var(--space-8) var(--space-6); }
@media (min-width: 40em) { .hr-more { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .hr-more { grid-template-columns: repeat(3, 1fr); } }
.hr-more > li { display: grid; grid-template-rows: auto auto 1fr; gap: var(--space-3); align-content: start; }
.hr-more h3 { margin-top: var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: var(--track-display); color: var(--ink); }
.hr-more > li > p { font-size: var(--text-sm); color: var(--ink-soft); }
.hr-mini { display: grid; align-content: center; min-height: 11.5rem; padding: 1.1em; border-radius: var(--radius-card); background: var(--paper-2); border: 1px solid var(--line); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.hr-more > li:hover .hr-mini { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.hr-mini > * { padding: 0.9em; border-radius: 0.9em; background: var(--card); border: 1px solid var(--app-border); box-shadow: var(--shadow-xs); }
.hr-invite { display: grid; gap: 0.7em; border-left: 3px solid var(--purple) !important; }
.hr-invite p:first-child { display: grid; }
.hr-invite b { font-weight: 600; color: var(--app-text); }
.hr-invite span { font-size: 0.88em; color: var(--app-text-3); }
.hr-invite-to { display: flex; align-items: center; gap: 0.35em; }
.hr-invite-to em { margin-left: 0.4em; font-style: normal; font-size: 0.84em; font-weight: 600; color: var(--green-text); }
.page-hr-hero .hr-bars { grid-template-columns: repeat(6, 1fr); height: 8.5em; }
.page-hr-hero .hr-bars span:nth-child(n+6) i { background: linear-gradient(180deg, var(--orange-light), var(--orange-deep)); }
.page-hr-hero .hr-bars span.is-hot i { background: linear-gradient(180deg, var(--red), var(--red-text)); }
.page-hr-hero .hr-bars b { font-size: 0.68em; white-space: nowrap; }
.hr-ack { display: grid; gap: 0.5em; }
.hr-ack li { display: flex; justify-content: space-between; align-items: center; gap: 0.8em; }
.hr-ack b { font-weight: 600; color: var(--app-text); }
.hr-ack li > span:not(.badge):not(.a-swap) { font-size: 0.88em; color: var(--app-text-3); }
.hr-survey { display: grid; gap: 0.7em; justify-items: start; }
.hr-survey > p:first-child { font-weight: 600; color: var(--app-text); }
.hr-survey-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4em; width: 100%; }
.hr-survey-scale i { display: grid; place-content: center; height: 2.2em; border-radius: 0.55em; font-style: normal; font-weight: 700; color: var(--app-text-3); background: var(--app-bg-alt); }
.hr-survey-scale i.on { color: var(--on-orange); background: var(--orange); }
.hr-well { display: flex; align-items: center; gap: 1em; }
.hr-well p { display: grid; gap: 0.15em; }
.hr-well b { font-weight: 600; color: var(--green-text); }
.hr-well p span { font-size: 0.88em; color: var(--app-text-3); }
.hr-breath { flex: none; display: grid; place-content: center; width: 4.4em; height: 4.4em; border-radius: 50%; background: var(--green-bg); }
.hr-breath i { width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--green); opacity: 0.85; }
.js .is-live .hr-breath i { animation: hrBreathe 6s ease-in-out infinite; }
@keyframes hrBreathe { 0%, 100% { transform: scale(0.55); } 50% { transform: scale(1.25); } }
.hr-lic { display: grid; gap: 0.6em; }
.hr-lic p:first-child { display: grid; gap: 0.15em; }
.hr-lic p:first-child > span { font-size: 0.8em; color: var(--app-text-3); }
.hr-lic b { font-weight: 600; letter-spacing: 0.04em; color: var(--app-text); font-variant-numeric: tabular-nums; }
.hr-lic-log { font-size: 0.84em; font-weight: 600; color: var(--amber-text); }
.hr-rtw { gap: 0.7em 1em; }
.hr-emps { width: 100%; }
.hr-perks { display: flex; flex-wrap: wrap; gap: 0.45em; }
.hr-perks span { padding: 0.4em 0.8em; border-radius: 0.5em; font-weight: 600; font-size: 0.9em; color: var(--blue-text); background: var(--blue-bg); }
@media (prefers-reduced-motion: reduce) { .hr-breath i, .hr-brad-bar i { animation: none !important; } .hr-drag .k-org-card { transition: none; transform: none !important; } }
@media (max-width: 40em) { .hr-mini { min-height: 0; } }
.page-hr-hero .k-org-card .k-avatar { font-size: 0.9em; color: var(--on-orange); }
.page-hr-hero .k-org-card .k-avatar--blue { color: var(--blue-text); }
.page-hr-hero .k-org-card .k-avatar--green { color: var(--green-text); }
@media (max-width: 39.99em) { .page-hr-hero .hr-week tbody th { width: 24%; font-size: 0.86em; } .page-hr-hero .hr-week td { min-width: 0; } }
.hr-stage .hr-hero-body { padding-bottom: 0.4em; }
.hr-shout { margin-left: 0; }
.hr-facts li { flex-basis: 11em; max-width: none; }
.hr-facts b { text-wrap: balance; }
.jp-screen .hr-calc { width: min(100%, 24rem); }
@media (min-width: 60em) {
  .jp-screen .hr-calc { width: min(100%, 36rem); grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "who sum" "pattern sum" "note sum"; gap: 0.9em 1.6em; align-items: start; }
  .hr-calc .hr-calc-who { grid-area: who; }
  .hr-calc .hr-calc-pattern { grid-area: pattern; }
  .hr-calc .hr-calc-sum { grid-area: sum; }
  .hr-calc .hr-calc-note { grid-area: note; }
}
.jp-screen .hr-form { max-width: 36rem; }
.jp-screen .hr-week { width: 100%; }
.hr-diary { display: grid; gap: var(--space-3); max-width: 30rem; font-size: 12px; }
.hr-diary .k-email { box-shadow: var(--shadow); }
.hr-diary .hr-invite { padding: 0.8em 0.9em; border-radius: 0.7em; background: var(--app-bg); border: 1px solid var(--app-border); }
@media (min-width: 44em) { .jp-screen .hr-praise { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; } }
.jp-screen .hr-drag { max-width: 34rem; }
.jp-screen--plain .k-ba { width: 100%; }
.jd-body .hr-more { gap: var(--space-6) var(--space-6); }
.jd-note b { color: var(--ink); }
.hr-hero-left { display: grid; gap: 0.9em; align-content: space-between; min-width: 0; }
.hr-hero-left .hr-bal { margin-top: 0; padding: 0.7em 0.95em; border: 1px solid var(--app-border); border-radius: 0.9em; background: var(--card); align-items: center; }
@media (min-width: 52em) { .hr-hero-body { align-items: stretch; } }
@media (min-width: 60em) {
  .page-hr-hero .jx--steps .jp--row { --jp-h: 25.5rem; }
  .page-hr-hero .jx--side .jp--row { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
  .page-hr-hero .jx--side .jp--row, .page-hr-hero .jx--side .jp--solo { --jp-h: 26rem; }
}
@media (max-width: 35.99em) { .page-hr-hero .jx--side .jx-tabs > li:last-child { grid-column: 1 / -1; } }
.hr-rules .a-swap > * { justify-self: end; }
@media (min-width: 52em) { .hr-hero-req { display: flex; flex-direction: column; } .hr-hero-req .hr-off-title { margin-top: auto; } .hr-hero-req .hr-req { margin-bottom: 1.1em; } }
@media (min-width: 52em) { .hr-hero-req .hr-req { gap: 1em; } .hr-hero-req .hr-req dl { gap: 0.75em; padding: 0.95em 0.8em; } .hr-hero-req .hr-off { gap: 0.7em; } }
.jd-body .hr-mini { min-height: 9.5rem; }
@media (max-width: 39.99em) { .page-hr-hero .hr-week tbody th { width: 27%; overflow: visible; text-overflow: clip; } }
.hr-facts li { flex: 1 1 8.5em; }
@media (min-width: 64em) {
  .hr-stage .k-org { gap: 1.3em; }
  .hr-stage .k-org-row + .k-org-row::before { top: -1.3em; height: 0.5em; }
  .hr-stage .k-org-card { padding-block: 0.7em 0.6em; }
}
@media (min-width: 72em) { .page-hr-hero .cta--row .cta-title { max-width: none; } }
@media (min-width: 60em) {
  .jp-screen .hr-calc { width: min(100%, 40rem); font-size: 14px; padding: 1.5em 1.6em; gap: 1.1em 2em; }
  .hr-calc .hr-calc-pattern i { height: 2.7em; }
  .hr-calc .hr-calc-sum li { padding: 0.75em 0; }
  .hr-calc .hr-calc-note { align-self: end; }
}
@media (min-width: 60em) { .hr-diary { width: min(100%, 31rem); max-width: none; font-size: 13.5px; } }
@media (min-width: 30.01em) {
  .hr-rules li { display: grid; grid-template-columns: minmax(0, 1fr) auto 8.6em; padding-block: 0.45em; }
  .hr-rules li > em { justify-self: end; }
  .hr-rules li > :last-child { justify-self: start; }
  .hr-rules .a-swap > * { justify-self: start; }
}
.hr-rules { gap: 0.4em; }
@media (max-width: 30em) { .hr-rules li > .a-swap { flex: none; } .hr-rules .a-swap > * { justify-self: start; } }
@media (min-width: 60em) { .page-hr-hero .jx--side .jp--row, .page-hr-hero .jx--side .jp--solo { --jp-h: 24rem; } .page-hr-hero .jx--steps .jp--row { --jp-h: 24rem; } }
@media (max-width: 39.99em) {
  .page-hr-hero .k-org-card .k-avatar { display: inline-grid; width: 2em; height: 2em; font-size: 0.78em; margin-bottom: 0.2em; }
  .page-hr-hero .hr-drag-card .k-swap { display: inline-grid; }
  .page-hr-hero .hr-drag-card .k-swap > .badge { font-size: 0.64em; white-space: nowrap; }
  .page-hr-hero .hr-drag-card .k-swap > .badge:not([data-until]),
  .js .page-hr-hero .hr-drag:is([data-step="1"], [data-step="2"]) .hr-drag-card .k-swap > [data-until] { display: inline-flex; }
}
@media (min-width: 56em) {
  .page-hr-hero .jd-body .why-card { grid-template-rows: auto auto 1fr auto; padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); }
  .page-hr-hero .jd-body .why-card li { text-wrap: pretty; }
}
@media (min-width: 60em) {
  html:not(.js) .page-hr-hero .hr-jx { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  html:not(.js) .page-hr-hero .hr-jx > .jx-side, html:not(.js) .page-hr-hero .hr-jx > .jx-stage { grid-column: 1; grid-row: auto; align-self: auto; }
  html:not(.js) .page-hr-hero .hr-jx .jx-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
  html:not(.js) .page-hr-hero .hr-jx .jx-tab { height: 100%; align-items: flex-start; padding-right: 1rem; border-color: var(--line); background: var(--card); }
}
.hr-invite .k-avatar { font-size: 0.9em; color: var(--on-orange); }
.hr-invite .k-avatar--green { color: var(--green-text); }
@media (max-width: 51.99em) { .hr-stage { --step: 0.02s; } }
@media (min-width: 60em) { .page-hr-hero .fhero--j { padding-bottom: 2.25rem; } }
.hr-also .jd-note { margin-bottom: var(--space-4); }
.hr-also .jp-screen .hr-mini { width: min(100%, 24rem); min-height: 0; font-size: 14px; }
@media (min-width: 60em) { .hr-also .jp-screen .hr-mini { font-size: 15px; } }
.hr-also .jp-screen .hr-mini:hover { transform: none; box-shadow: none; }
@media (min-width: 60em) {
  .page-hr-hero .hr-also.jx--side { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .page-hr-hero .hr-also > .jx-side, .page-hr-hero .hr-also > .jx-stage { grid-column: 1; grid-row: auto; }
  .hr-also > .jx-side { display: grid; grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr); gap: var(--space-10); align-items: start; }
  .hr-also .jd-note { margin-bottom: 0; }
  .js .hr-also .jx-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .hr-also .jx-tab { min-height: 2.6rem; border-color: var(--line); background: var(--card); }
  .page-hr-hero .hr-also .jp--row { --jp-h: 17.5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.hr-mini > .hr-well-list { margin-top: 0.6em; }
.hr-abs-save .k-swap { min-height: calc(2.12em + 2px); }