
.wp-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; padding: 0.55em 1em; background: var(--card); border-bottom: 1px solid var(--app-border); }
.wp-top b { font-weight: 700; letter-spacing: -0.01em; color: var(--orange-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-top > span { flex: none; padding: 0.2em 0.7em; border-radius: 2em; font-size: 0.74em; font-weight: 600; color: var(--app-text-2); background: var(--app-bg-alt); }
.wp-top .k-swap > span { justify-self: end; }
.wp-top .wp-top-on { color: var(--orange-text); }
.page-worker-portal .phone--page .k-web { padding-top: 0.8em; gap: 0.6em; }
.page-worker-portal .phone--page .k-app-tabs { margin-top: auto; }
.wp-hello { font-size: 1.25em; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--app-text); }
.wp-kicker, .wp-sec { font-size: 0.72em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--app-text-3); }
.wp-sec { margin-top: 0.3em; }
.wp-sec--alert { color: var(--red-text); }
.wp-label { font-size: 0.8em; font-weight: 600; color: var(--app-text-2); }
.wp-small { font-size: 0.76em; line-height: 1.3; color: var(--app-text-3); }
.wp-input { display: block; padding: 0.55em 0.75em; border-radius: 0.6em; font-weight: 600; background: var(--card); border: 1.5px solid var(--app-border); }
.wp-home { display: grid; gap: 0.6em; align-content: start; }
.wp-quick { grid-template-columns: 1fr 1fr; gap: 0.5em; padding: 0.6em; }
.wp-quick span { display: grid; place-content: center; min-height: 3.2em; padding: 0.3em; border-radius: 0.6em; text-align: center; font-size: 0.8em; font-weight: 600; line-height: 1.2; color: var(--orange-text); background: var(--orange-wash); }
.wp-answer { display: grid; gap: 0.5em; }
.wp-list { display: grid; border-radius: 0.9em; background: var(--card); box-shadow: var(--shadow-xs); }
.wp-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; padding: 0.6em 0.9em; border-bottom: 1px solid var(--app-bg-alt); }
.wp-list li:last-child { border-bottom: 0; }
.wp-list b { font-weight: 600; }
.wp-list li > span:not(.k-swap) { font-size: 0.86em; color: var(--app-text-3); }
.wp-list .badge, .wp-docs .badge { font-size: 0.7em; }
.wp-deadline { padding: 0.6em 0.8em; font-size: 0.88em; }
.wp-deadline b { font-weight: 600; }
.js [data-step="1"] .wp-press { animation: kPress 0.5s var(--ease-out) 1.3s both; }
.wp-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-3); align-items: start; }
.wp-stage > .mock-note { grid-column: 1 / -1; margin-top: 0; }
.wp-stage .phone { width: 100%; max-width: 16rem; margin-inline: auto; }
.wp-stage .phone-screen { box-shadow: var(--shadow-lg); }
@media (min-width: 56em) { .wp-stage { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5) clamp(0.75rem, 2.2vw, 2rem); padding: clamp(1.25rem, 2.6vw, 2.25rem) clamp(1.25rem, 3vw, 2.75rem) var(--space-4); } }
.wp-step { display: flex; align-items: baseline; justify-content: center; gap: 0.6em; margin-top: var(--space-4); font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); line-height: 1.3; color: var(--ink); }
.wp-step b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-mute); }
.wp-ph { transition: opacity 0.5s var(--ease-out); }
.js [data-step="1"] .wp-ph:nth-child(n+2), .js [data-step="2"] .wp-ph:nth-child(n+3), .js [data-step="3"] .wp-ph:nth-child(n+4) { opacity: 0.38; }
@media (prefers-reduced-motion: reduce) { .wp-ph { transition: none; } }
.wp-link { width: min(100%, 27rem); }
.wp-link-title, .wp-side-title { margin-bottom: 0.8em; font-size: 0.76em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--app-text-3); }
.wp-life { position: relative; display: grid; gap: 0.55em; }
.wp-life li { display: flex; align-items: flex-start; gap: 0.75em; padding: 0.65em 0.8em; border-radius: 0.75em; background: var(--card); border: 1px solid var(--app-border); }
.wp-life li > div { flex: 1; min-width: 0; display: grid; gap: 0.1em; }
.wp-life b { font-weight: 600; color: var(--app-text); }
.wp-life li > div span { font-size: 0.84em; line-height: 1.35; color: var(--app-text-3); }
.wp-life time { font-size: 0.84em; font-weight: 600; color: var(--app-text-3); font-variant-numeric: tabular-nums; }
.wp-life li.is-no { background: var(--red-bg); border-color: transparent; }
.wp-life li.is-no b { color: var(--red-text); }
.wp-pair { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.wp-pair .phone { width: 100%; }
.wp-side { align-self: center; }
@media (max-width: 40em) {
  .wp-pair { grid-template-columns: 1fr; justify-items: center; }
  .wp-pair .phone { width: min(100%, 16rem); }
  .wp-side { width: 100%; }
}
.wp-pip { flex: none; display: grid; place-content: center; width: 1.9em; height: 1.9em; border-radius: 50%; font-weight: 700; font-size: 0.84em; color: var(--blue-text); background: var(--blue-bg); }
.wp-days { display: grid; gap: 0.4em; }
.wp-days li { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; padding: 0.4em 0.5em 0.4em 0.8em; border-radius: 0.7em; background: var(--card); box-shadow: var(--shadow-xs); }
.wp-days b { font-weight: 600; }
.wp-day { display: block; min-width: 7.2em; padding: 0.4em 0.6em; border-radius: 0.5em; text-align: center; font-size: 0.8em; font-weight: 600; color: var(--app-text-3); background: var(--app-bg-alt); }
.wp-day.is-yes { color: var(--green-text); background: var(--green-bg); }
.wp-day.is-no { color: var(--red-text); background: var(--red-bg); }
.wp-solo { width: min(100%, 17rem); }
.wp-docs { display: grid; border-radius: 0.9em; background: var(--card); box-shadow: var(--shadow-xs); }
.wp-docs li { display: flex; align-items: center; gap: 0.6em; padding: 0.6em 0.8em; border-bottom: 1px solid var(--app-bg-alt); }
.wp-docs li:last-child { border-bottom: 0; }
.wp-docs li > div { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.wp-docs b { font-weight: 600; }
.wp-docs li > div span { font-size: 0.78em; color: var(--app-text-3); }
.wp-skills { display: flex; flex-wrap: wrap; gap: 0.35em; }
.wp-skills span { padding: 0.3em 0.7em; border-radius: 2em; font-size: 0.78em; font-weight: 600; color: var(--blue-text); background: var(--blue-bg); }
.wp-opt { display: grid; gap: 0.15em; padding: 0.55em 0.75em 0.55em 2.2em; position: relative; border-radius: 0.6em; font-size: 0.88em; font-weight: 600; border: 1.5px solid var(--app-border); }
.wp-opt::before { content: ""; position: absolute; left: 0.7em; top: 0.7em; width: 0.95em; height: 0.95em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--app-text-3); }
.wp-opt.is-on { border-color: var(--orange); background: var(--orange-tint); }
.wp-opt.is-on::before { box-shadow: inset 0 0 0 0.3em var(--orange-deep); }
.wp-opt small { font-weight: 500; font-size: 0.86em; line-height: 1.3; color: var(--app-text-2); }
.wp-langs { width: 100%; }
.wp-lang { display: grid; gap: 0.7em; max-width: 24rem; margin-inline: auto; }
.wp-lang-shift { font-weight: 600; font-size: 1.1em; color: var(--app-text); }
.wp-lang-btns { display: grid; gap: 0.5em; }
.wp-lang-nav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.3em; margin-top: 0.4em; padding-top: 0.8em; border-top: 1px solid var(--app-border); text-align: center; font-size: 0.78em; font-weight: 600; color: var(--app-text-3); }
.wp-lang-nav span:first-child { color: var(--orange-text); }
.js .wp-lang.is-live > * { animation: kUp 0.5s var(--ease-out) both; }
.wp-help { width: 100%; }
.wp-short { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4em; }
.wp-short span { display: grid; place-content: center; min-height: 2.6em; padding: 0.2em 0.4em; border-radius: 0.6em; text-align: center; font-size: 0.76em; font-weight: 600; line-height: 1.2; color: var(--orange-text); background: var(--orange-wash); }
.wp-sms-old { opacity: 0.72; }
.wp-sms-old s { text-decoration-thickness: 1.5px; }
.wp-sms-used { display: block; margin-top: 0.35em; font-size: 0.8em; font-weight: 600; color: var(--app-text-3); }
@media (min-width: 64em) { .page-worker-portal .fhero--j .fhero-grid { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: var(--space-10); align-items: center; } }
.fhero--j .wp-stage { gap: var(--space-4) var(--space-3); }
@media (min-width: 56em) { .fhero--j .wp-stage { gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-3); } }
.wp-stage .phone-screen { font-size: 4.7cqw; aspect-ratio: 9 / 19; }
.page-worker-portal .wp-facts { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 0; gap: var(--space-3) var(--space-6); }
.page-worker-portal .wp-facts li { max-width: none; }
.fhero--j .wp-step { margin-top: var(--space-3); font-size: var(--text-xs); }
.wp-foot { padding-inline: 0.4em; }
.page-worker-portal .jp-screen .phone-screen { aspect-ratio: 9 / 17; }
.jp-screen .wp-pair { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: var(--space-4); max-width: 32rem; }
.page-worker-portal .jp-screen .wp-pair .phone { width: 100%; }
@media (min-width: 60em) {
  .page-worker-portal .jx--side .jp--row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .page-worker-portal #how .jx--side { align-items: stretch; }
}
@media (max-width: 40em) {
  .jp-screen .wp-pair { grid-template-columns: 1fr; justify-items: center; }
  .page-worker-portal .jp-screen .wp-pair .phone { width: min(100%, 14rem); }
}
.jp-screen .wp-link, .jp-screen .wp-help { max-width: 27rem; }
.jp-screen .wp-langs { max-width: 27rem; }
.wp-gate { display: grid; gap: 0.7em; align-content: start; }
.wp-gate .wp-side-title { margin-bottom: 0; }
.wp-gate-t { font-weight: 700; font-size: 1.1em; line-height: 1.25; color: var(--app-text); }
.wp-check { position: relative; padding-left: 1.7em; font-size: 0.8em; font-weight: 600; line-height: 1.25; color: var(--app-text-2); }
.wp-check::before { content: ""; position: absolute; left: 0; top: 0.05em; width: 1.15em; height: 1.15em; border-radius: 0.3em; background: var(--yes); }
.wp-check::after { content: ""; position: absolute; left: 0.4em; top: 0.2em; width: 0.3em; height: 0.6em; border: solid var(--card); border-width: 0 0.14em 0.14em 0; transform: rotate(45deg); }
.wp-side .k-week thead th:first-child { width: 31%; }
.jp-screen .wp-langs .k-switch-tabs { gap: 0.35rem; margin-bottom: var(--space-4); }
.jp-screen .wp-langs .k-switch-tabs button { padding: 0.5em 0.7em; font-size: var(--text-xs); }
@media (min-width: 60em) { .page-worker-portal #how .jx-tab { min-height: 0; padding-block: 0.35rem; } }
.wp-lang-quick { display: grid; padding: 0; }
.wp-lang .wp-kicker + .wp-lang-quick { margin-top: -0.3em; }
.wp-small b { font-weight: 700; color: var(--app-text-2); }
@media (max-width: 40em) {
  .js .jp-screen .wp-langs .k-switch-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .js .jp-screen .wp-langs .k-switch-tabs button { grid-column: span 2; padding-inline: 0.3em; }
  .js .jp-screen .wp-langs .k-switch-tabs button:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 35.99em) { .js .page-worker-portal #more .jx-tabs > li:last-child { grid-column: 1 / -1; } }
@media (min-width: 60em) {
  html:not(.js) .page-worker-portal .jx-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-4); }
  html:not(.js) .page-worker-portal #how .jx-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  html:not(.js) .page-worker-portal #do-language { grid-template-columns: minmax(0, 1fr); }
  html:not(.js) .page-worker-portal #do-language > .jp-screen { border-left: 0; border-top: 1px solid var(--line); }
  html:not(.js) .page-worker-portal #do-language .wp-langs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); max-width: none; }
  html:not(.js) .page-worker-portal #do-language .wp-langs [data-panel] { margin-top: 0; display: grid; }
  html:not(.js) .page-worker-portal #do-language .wp-lang { max-width: none; align-content: start; }
  html:not(.js) .page-worker-portal #do-language .wp-quick { grid-template-columns: minmax(0, 1fr); }
  html:not(.js) .page-worker-portal #do-language .wp-lang-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2em 0.6em; }
}
