.task-shell {
  position: relative;
  display: block;
  min-height: 100svh;
  overflow-x: hidden;
  padding: 0;
  background: var(--public-cream);
  color: var(--public-ink);
}

.task-art {
  position: fixed;
  z-index: 0;
  inset: 0;
  margin: 0;
  pointer-events: none;
}

.task-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.82) contrast(.94);
}

.task-art-wash {
  position: fixed;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(245, 235, 221, .24), rgba(245, 235, 221, .04) 48%, rgba(245, 235, 221, .38)),
    linear-gradient(180deg, rgba(245, 235, 221, .56), rgba(245, 235, 221, .12) 42%, rgba(245, 235, 221, .54));
}

.task-brand-bar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 0 clamp(20px, 4vw, 56px);
}

.task-brand-bar a { color: var(--public-ink); text-decoration: none; }
.task-brand-bar .brand-word { font-size: 1.45rem; }
.task-brand-back { font-size: .86rem; font-weight: 700; }

.task-brand-bar a,
.task-panel .link-row a,
.task-panel .back-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.task-footer {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 48px), 920px);
  margin: 0 auto 24px;
  padding: 14px 18px;
  border: 1px solid var(--public-bone);
  border-radius: 6px;
  background: var(--public-paper);
  align-items: center;
}

.task-footer > p { margin: 0; }
.task-footer nav { padding: 0; border: 0; }

.task-stage {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: calc(100svh - 72px);
  align-items: center;
  padding: clamp(24px, 5vw, 72px);
}

.task-panel {
  width: min(100%, 460px);
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(26, 24, 16, .24);
  border-radius: 8px;
  background: var(--public-paper);
  box-shadow: 18px 22px 0 rgba(45, 90, 61, .08), 0 30px 90px rgba(45, 35, 23, .2);
}

.task-panel--login { justify-self: end; margin-right: clamp(0px, 5vw, 72px); }
.task-panel--login > .card {
  width: 100%;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.task-panel h1,
.task-panel h2 { font-family: var(--font-editorial); }

.task-shell .task-panel :is(input, select, textarea) {
  width: 100%;
  min-height: 48px;
  border: 1px solid #8a8068;
  border-radius: 6px;
  background: #fffdf6;
  color: var(--public-ink);
  font: 1rem var(--font-utility);
}

.task-panel :where(button, .btn) { min-height: 44px; }
.task-panel .btn { border-radius: 999px; background: var(--public-green); color: var(--public-paper); }
.task-panel .btn:hover { background: var(--public-green-dark); }
.task-panel .alert-error {
  background: rgba(180, 78, 49, .08);
  color: var(--public-terracotta-dark);
  border-color: rgba(141, 56, 36, .32);
}

.task-shell--onboard .task-stage {
  display: block;
  min-height: 0;
  padding-top: 20px;
}

.task-shell--onboard .task-panel--onboard {
  width: min(100%, 920px);
  margin: 0 auto clamp(48px, 8vw, 96px);
}

.task-shell--onboard:has(#planModal[style*="display: flex"]) .task-stage { z-index: 4; }

@media (max-width: 760px) {
  .task-art img { object-position: 58% center; }
  .task-art-wash { background: rgba(245, 235, 221, .68); }
  .task-brand-bar { min-height: 64px; padding-inline: 18px; }
  .task-stage { min-height: calc(100svh - 64px); padding: 18px; align-items: start; }
  .task-panel { width: 100%; padding: 24px 20px; box-shadow: 7px 9px 0 rgba(45, 90, 61, .08); }
  .task-panel--login { justify-self: stretch; margin: clamp(32px, 10vh, 84px) 0 24px; }
  .task-shell--onboard .task-stage { padding: 12px; }
  .task-shell--onboard .task-panel--onboard { margin-bottom: 32px; }
  .task-panel :where(input, select, textarea) { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .task-shell *, .task-shell *::before, .task-shell *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.task-shell--onboard {
  --font: var(--font-utility);
  --heading: var(--font-editorial);
  --error: var(--public-terracotta-dark);
}

.task-shell--onboard .container { width: 100%; max-width: none; margin: 0; padding: 0; }
.task-shell--onboard .page-header { margin-bottom: 2rem; text-align: left; }
.task-shell--onboard .page-header h1 {
  font-family: var(--font-editorial);
  font-size: clamp(2.2rem, 5vw, 4.25rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.035em;
}

.task-shell--onboard :where(.card, .progress-block) {
  border-color: var(--public-bone);
  background: rgba(250, 246, 236, .94);
  box-shadow: none;
}

.task-shell--onboard .progress-block {
  padding: 1rem;
  border: 1px solid var(--public-bone);
  border-radius: 6px;
}

.task-shell--onboard :where(.card-title, .section-title, .section-header) {
  font-family: var(--font-editorial);
}

.task-shell--onboard :where(.btn-primary, .opt-btn) {
  min-height: 44px;
  border-radius: 999px;
  background: var(--public-green);
  color: var(--public-paper);
}

.task-shell--onboard :where(
  .btn-next,
  .btn-cta,
  .biz-confirm-yes,
  .wiz-dial-btn,
  .wiz-next-btn,
  .closer-btn
) {
  min-height: 44px;
  border-radius: 999px;
  background: var(--public-green);
  color: var(--public-paper);
}

.task-shell--onboard :where(
  .manual-entry-link,
  .promo-toggle,
  .wiz-dial-btn,
  .wiz-skip,
  .wiz-back,
  .pp-defer a,
  .opt-skip
) {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.task-shell--onboard :where(
  .btn-back,
  .biz-confirm-edit,
  .biz-confirm-no,
  .service-type-btn,
  .agent-mode-card,
  .quick-q-btn,
  .plan-card,
  .wiz-cta,
  .wiz-provider-btn,
  .os-pick .opc
) {
  border-color: #8a8068 !important;
}

.task-shell--onboard .progress-fill { background: var(--public-green); }
.task-shell--onboard .progress-kicker { color: var(--public-terracotta-dark); }

.task-shell--onboard .biz-preview--handoff {
  margin-top: .25rem;
  border-color: rgba(39, 91, 63, .42);
  background: linear-gradient(145deg, rgba(250, 246, 236, .98), rgba(236, 238, 222, .94));
}

.task-shell--onboard .biz-preview--handoff .biz-preview-heading {
  color: var(--public-terracotta-dark);
  font-family: var(--font-utility);
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.task-shell--onboard #passwordSetup { background: var(--public-paper) !important; }
.task-shell--onboard .pp-confirm-card { background: var(--public-paper) !important; }
.task-shell--onboard .hero-task {
  background: linear-gradient(180deg, var(--public-paper) 0%, var(--public-cream) 100%);
}
.task-shell--onboard .os-pick .opc { background: var(--public-paper) !important; }
.task-shell--onboard .os-pick .opc.active {
  background: linear-gradient(180deg, var(--public-cream), var(--public-paper));
}
.task-shell--onboard .ios-preflight { background: var(--public-paper) !important; }
.task-shell--onboard .opt-card { background: var(--public-paper) !important; }
.task-shell--onboard .opt-card .opt-input { background: var(--public-cream) !important; }

.task-shell--onboard .input-error {
  border-color: var(--public-terracotta-dark) !important;
  box-shadow: 0 0 0 3px rgba(141, 56, 36, .18) !important;
}

.task-shell--onboard .search-overlay-close {
  min-width: 44px;
  min-height: 44px;
}

.task-shell--onboard a[onclick*="planModal"] {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.task-shell--onboard :where(#servicesError, #onboardingCalendarError, #promoError) {
  font-size: .875rem !important;
}

.task-shell--onboard :where(.service-delete-btn, .pp-copy-mini) { min-width: 44px; }
.task-shell--onboard :where(.ipf-attest, label:has(> #tcpaConsent)) { min-height: 44px; }

.task-shell--onboard .ipf-deep {
  min-height: 44px;
  justify-content: center;
}

.task-shell--onboard #wizHelpLink a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.task-shell--onboard #wizSendToPhone[style*="display: inline"] {
  display: inline-flex !important;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.task-shell--onboard #cfSub5 a[onclick*="showCfSubstep(4)"] {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.task-shell--onboard .task-panel input[type="checkbox"] {
  width: 18px !important;
  min-height: 18px !important;
  padding: 0;
  border: 1px solid #8a8068;
  border-radius: 3px;
  background: #fffdf6;
}

.task-shell--onboard .hours-toggle {
  width: 44px;
  min-height: 44px;
}

.task-shell--onboard .hours-toggle input[type="checkbox"] {
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}

.task-shell--onboard .hours-toggle .hours-slider { inset: 11px 1px; }

.task-shell--onboard .task-panel input[type="range"] {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
}

.task-shell--onboard #planModal {
  align-items: flex-start !important;
  overflow-y: auto;
}

.task-shell--onboard #planModal > div {
  max-height: none !important;
  overflow-y: visible !important;
}

.task-shell--onboard #planModal > div > button { min-width: 44px; }
.task-shell--onboard #planModal h3 { padding-right: 44px; }

.task-shell--onboard :where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--public-terracotta) !important;
  outline-offset: 3px;
  box-shadow: var(--public-focus) !important;
}

@media (max-width: 768px) {
  html:has(body.task-shell--onboard #stepEl2.active .hours-times input) { font-size: 20.513px; }
  .task-shell--onboard .task-panel :is(input, select, textarea) { font-size: 16px !important; }
  .task-shell--onboard .page-header { margin-bottom: 1.25rem; }
  .task-shell--onboard .page-header h1 { font-size: clamp(2rem, 10vw, 3rem); }
  .task-shell--onboard :where(.card, .progress-block) { border-radius: 6px; }
  .task-shell--onboard .card { padding: clamp(18px, 5vw, 28px); }
  .task-shell--onboard #planModal { padding: 12px !important; }
  .task-shell--onboard #planModal > div { padding: 24px 16px !important; }
}

@media (max-width: 520px) {
  .task-shell--onboard .form-nav { gap: 12px; }
  .task-shell--onboard .form-nav > :where(button, .btn) { flex: 1 1 0; }
  .task-shell--onboard :where(.quick-q-row, .services-header) {
    align-items: stretch;
    flex-direction: column;
  }
  .task-shell--onboard .quick-q-toggle-group { flex-wrap: wrap; }
  .task-shell--onboard .quick-q-btn { flex: 1 1 auto; }
  .task-shell--onboard .services-col-labels { display: none; }
  .task-shell--onboard .service-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px !important;
    gap: 8px !important;
  }
  .task-shell--onboard .service-name-input { grid-column: 1 / -1; }
  .task-shell--onboard :where(.service-price-input, .service-duration-input) { width: 100% !important; }
  .task-shell--onboard .hours-row {
    grid-template-columns: minmax(42px, 1fr) 44px;
    align-items: start;
  }
  .task-shell--onboard .hours-times {
    grid-column: 1 / -1;
    width: 100%;
    flex-wrap: wrap;
  }
  .task-shell--onboard .hours-times input {
    width: auto !important;
    min-width: 0;
    flex: 1 1 72px;
  }
  .task-shell--onboard .hours-closed-label { grid-column: 1 / -1; }
  .task-shell--onboard .plan-card { grid-template-columns: 20px minmax(0, 1fr); }
  .task-shell--onboard .plan-price {
    grid-column: 2;
    grid-row: 3;
  }
}