.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.calendly-booking-app {
          background: #FFFFFF;
          border: 1.5px solid #E2E8F0;
          border-radius: 16px;
          padding: var(--space-6);
          margin: var(--space-6) auto;
          max-width: 760px;
          box-shadow: 0 12px 36px -4px rgba(14, 61, 81, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.03);
          scroll-margin-top: 90px;
          position: relative;
        }

        .embedded-style {
          border: 2px solid #0E3D51;
          box-shadow: 0 14px 40px rgba(14, 61, 81, 0.12);
        }

        .app-header-strip {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          border-bottom: 1px solid var(--hair);
          padding-bottom: var(--space-4);
          margin-bottom: var(--space-5);
          flex-wrap: wrap;
          gap: var(--space-4);
        }

        .app-badge {
          display: inline-block;
          background: #E0F2FE;
          color: #0369A1;
          font-size: var(--text-xs);
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          padding: 3px 8px;
          border-radius: 4px;
          margin-bottom: var(--space-1);
        }

        .app-header-title h2 {
          font-size: var(--text-2xl);
          color: var(--ink);
          margin: var(--space-1) 0;
          font-weight: 700;
        }

        .app-header-title p {
          font-size: var(--text-sm);
          color: var(--ink-2);
          margin: 0;
        }


        /* Wizard Progress Bar */
        .wizard-progress-section {
          margin-bottom: var(--space-5);
        }

        .progress-track-bar {
          height: 6px;
          background: var(--hair);
          border-radius: 999px;
          overflow: hidden;
          margin-bottom: var(--space-3);
        }

        .progress-fill {
          height: 100%;
          background: linear-gradient(90deg, #0E3D51 0%, var(--copper) 100%);
          border-radius: 999px;
          transition: width 0.3s ease;
        }

        .wizard-step-tabs {
          display: grid;
          gap: 6px;
        }

        .step-tab-btn {
          display: flex;
          align-items: center;
          gap: 8px;
          background: var(--surface-2);
          border: 1px solid var(--hair);
          border-radius: 8px;
          padding: 8px 10px;
          text-align: left;
          cursor: pointer;
          transition: all 0.15s ease;
        }

        .step-tab-btn.current {
          background: #FFFFFF;
          border-color: #0E3D51;
          box-shadow: 0 2px 8px rgba(14, 61, 81, 0.12);
        }

        .step-tab-btn.completed {
          background: #F0FDF4;
          border-color: #86EFAC;
        }

        .tab-number {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 22px;
          height: 22px;
          border-radius: 50%;
          background: var(--hair);
          color: var(--ink-2);
          font-size: 11px;
          font-weight: 700;
          flex-shrink: 0;
        }

        .step-tab-btn.current .tab-number {
          background: #0E3D51;
          color: #ffffff;
        }

        .step-tab-btn.completed .tab-number {
          background: #166534;
          color: #ffffff;
        }

        .tab-meta {
          display: flex;
          flex-direction: column;
          overflow: hidden;
        }

        .tab-title {
          font-size: 11px;
          font-weight: 700;
          color: var(--ink);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .tab-sub {
          font-size: 10px;
          color: var(--ink-3);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        /* Screen Wrapper */
        .wizard-screen-container {
          position: relative;
        }

        .wizard-screen {
          animation: fadeIn 0.2s ease-out;
        }

        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(6px); }
          to { opacity: 1; transform: translateY(0); }
        }

        .screen-header {
          margin-bottom: var(--space-5);
          text-align: left;
        }

        .step-badge {
          display: inline-block;
          font-size: 12px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.06em;
          color: #0E3D51;
          background: #E0F2FE;
          padding: 4px 12px;
          border-radius: 6px;
          margin-bottom: 10px;
        }

        .screen-header h3 {
          font-size: clamp(1.25rem, 2.5vw, 1.55rem);
          color: #0E3D51;
          margin: 0 0 8px 0;
          font-weight: 800;
          line-height: 1.25;
        }

        .screen-header p {
          font-size: 14px;
          color: #475569;
          margin: 0;
          line-height: 1.5;
        }

        /* CLIENT TYPE CARDS (Step 1) - Small Strategic Boxes with Descriptions */
        .client-type-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
          max-width: 680px;
          margin: 16px auto 20px auto;
        }

        .client-type-card {
          background: #FFFFFF;
          border: 1.5px solid var(--hair);
          border-radius: 12px;
          padding: 18px;
          cursor: pointer;
          transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
          display: flex;
          flex-direction: column;
          text-align: left;
          position: relative;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
        }

        .client-type-card:hover {
          border-color: #0E3D51;
          transform: translateY(-2px);
          box-shadow: 0 8px 20px rgba(14, 61, 81, 0.08);
        }

        .client-type-card.active {
          border-color: #0E3D51;
          border-width: 2px;
          background: #F8FAFC;
          box-shadow: 0 8px 24px rgba(14, 61, 81, 0.12);
        }

        .client-type-card.island-pending {
          cursor: wait;
          opacity: 1;
        }

        .client-type-card.island-pending:hover {
          transform: none;
          border-color: var(--hair);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
        }

        .loading-indicator-pill {
          font-size: 11px;
          font-weight: 600;
          color: var(--ink-2);
          display: inline-flex;
          align-items: center;
          gap: 4px;
        }

        /* The Small Box Header */
        .client-box-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          padding-bottom: 12px;
          border-bottom: 1px solid #F1F5F9;
          margin-bottom: 12px;
        }

        .client-box-title-wrap {
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .client-box-icon {
          width: 36px;
          height: 36px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          flex-shrink: 0;
        }

        .client-box-icon.returning {
          background: #E0F2FE;
        }

        .client-box-icon.new {
          background: #FEF3C7;
        }

        .client-card-title {
          font-size: 16px;
          font-weight: 700;
          color: #0E3D51;
          margin: 0;
          line-height: 1.25;
        }

        .client-box-status {
          font-size: 12px;
          font-weight: 700;
          padding: 5px 12px;
          border-radius: 999px;
          background: var(--surface-2);
          color: var(--ink-2);
          border: 1px solid var(--hair);
          transition: all 0.2s ease;
          white-space: nowrap;
        }

        .client-type-card.active .client-box-status {
          background: #0E3D51;
          color: #FFFFFF;
          border-color: #0E3D51;
        }

        .client-box-status.btn-client-new {
          background: var(--copper);
          color: #FFFFFF;
          border-color: var(--copper);
        }

        /* Description of that box */
        .client-box-desc-wrapper {
          display: flex;
          flex-direction: column;
          gap: 10px;
          flex: 1;
        }

        .client-card-desc {
          font-size: 13px;
          color: #475569;
          line-height: 1.5;
          margin: 0;
        }

        .client-box-features {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          margin-top: auto;
          padding-top: 6px;
        }

        .client-feature-pill {
          display: inline-flex;
          align-items: center;
          font-size: 11px;
          font-weight: 600;
          color: #0E3D51;
          background: #F1F5F9;
          padding: 3px 8px;
          border-radius: 4px;
        }

        .client-type-card.active .client-feature-pill {
          background: #E0F2FE;
          color: #0369A1;
        }

        .step1-footer-note {
          text-align: center;
          font-size: var(--text-xs);
          color: var(--ink-3);
          margin-top: 14px;
          padding-top: 12px;
          border-top: 1px solid var(--hair);
        }

        @media (max-width: 640px) {
          .client-type-grid {
            grid-template-columns: 1fr;
            gap: 12px;
          }
        }
        /* NEW CLIENT INTAKE PREFERENCE (Darwin Laid-Back Rule) */
        .new-client-intake-card {
          background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
          border: 1.5px solid #86EFAC;
          border-radius: 12px;
          padding: 16px 20px;
          margin: 16px 0 20px 0;
          box-shadow: 0 4px 14px rgba(34, 197, 94, 0.08);
        }

        .intake-card-header {
          margin-bottom: 12px;
        }

        .intake-badge {
          display: inline-block;
          background: #166534;
          color: #FFFFFF;
          font-size: 11px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          padding: 3px 8px;
          border-radius: 4px;
          margin-bottom: 6px;
        }

        .intake-title {
          font-size: 15px;
          font-weight: 700;
          color: #14532D;
          margin: 0 0 4px 0;
        }

        .intake-subtitle {
          font-size: 13px;
          color: #166534;
          margin: 0;
          line-height: 1.45;
        }

        .intake-options-grid {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 12px;
          margin-top: 12px;
        }

        .intake-option-card {
          background: #FFFFFF;
          border: 1.5px solid #CBD5E1;
          border-radius: 10px;
          padding: 14px 16px;
          cursor: pointer;
          display: flex;
          align-items: flex-start;
          gap: 12px;
          transition: all 0.18s ease;
          position: relative;
        }

        .intake-option-card:hover {
          border-color: #0E3D51;
          box-shadow: 0 4px 12px rgba(14, 61, 81, 0.08);
        }

        .intake-option-card.selected {
          border-color: #0E3D51;
          background: #F8FAFC;
          box-shadow: 0 0 0 2px #0E3D51;
        }

        .intake-radio {
          margin-top: 3px;
          accent-color: #0E3D51;
          cursor: pointer;
        }

        .intake-option-content {
          display: flex;
          flex-direction: column;
          gap: 4px;
        }

        .intake-option-title {
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: 14px;
          color: var(--ink);
        }

        .intake-option-desc {
          font-size: 12px;
          color: var(--ink-3);
          margin: 0;
          line-height: 1.4;
        }

        .intake-remote-card {
          background: #FFFFFF;
          border: 1.5px solid #86EFAC;
          border-radius: 10px;
          padding: 14px 16px;
          margin-top: 8px;
        }

        .intake-remote-header {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 14px;
          color: #14532D;
          margin-bottom: 4px;
        }

        .intake-remote-desc {
          font-size: 12px;
          color: #166534;
          margin: 0;
          line-height: 1.45;
        }

        /* APPOINTMENT METHOD CARDS (Step 3) */
        .client-status-indicator-bar {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          margin-top: 10px;
          padding: 6px 14px;
          background: #F8FAFC;
          border: 1px solid var(--hair);
          border-radius: 20px;
          font-size: 12px;
          flex-wrap: wrap;
        }

        .indicator-label {
          color: var(--ink-2);
          font-weight: 600;
        }

        .indicator-pill {
          padding: 3px 10px;
          border-radius: 12px;
          font-weight: 700;
          font-size: 11px;
          text-transform: uppercase;
          letter-spacing: 0.03em;
        }

        .indicator-pill.existing {
          background: #E0F2FE;
          color: #0369A1;
          border: 1px solid #BAE6FD;
        }

        .indicator-pill.new {
          background: #FEF3C7;
          color: #92400E;
          border: 1px solid #FDE68A;
        }

        .btn-switch-client-link {
          background: none;
          border: none;
          color: #0369A1;
          font-weight: 600;
          font-size: 13px;
          cursor: pointer;
          min-height: 44px;
          display: inline-flex;
          align-items: center;
          padding: 0 12px;
          text-decoration: underline;
          transition: color 0.15s ease;
        }

        .btn-switch-client-link:hover {
          color: #075985;
        }

        .appointment-methods-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: var(--space-4);
          margin: var(--space-5) 0;
        }

        .method-btn-card {
          background: #FFFFFF;
          border: 2px solid var(--hair);
          border-radius: 12px;
          padding: var(--space-5);
          text-align: left;
          cursor: pointer;
          transition: all 0.2s ease;
          display: flex;
          flex-direction: column;
          position: relative;
        }

        .method-btn-card:hover {
          border-color: #0E3D51;
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(14, 61, 81, 0.08);
        }

        .method-btn-card.active {
          border-color: #0E3D51;
          background: #F0F9FF;
          box-shadow: 0 8px 24px rgba(14, 61, 81, 0.12);
        }

        .method-icon-wrap {
          width: 48px;
          height: 48px;
          border-radius: 10px;
          background: var(--surface-2);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: var(--space-3);
        }

        .method-btn-card.active .method-icon-wrap {
          background: #E0F2FE;
        }

        .method-icon {
          font-size: 24px;
        }

        .method-info {
          flex-grow: 1;
          margin-bottom: var(--space-3);
        }

        .method-title {
          display: block;
          font-size: var(--text-base);
          color: var(--ink);
          margin-bottom: 4px;
        }

        .method-desc {
          font-size: var(--text-xs);
          color: var(--ink-2);
          margin: 0 0 6px 0;
          line-height: 1.4;
        }

        .method-sub {
          display: block;
          font-size: 11px;
          color: var(--ink-3);
          font-style: italic;
        }

        /* Services Grid */
        .services-options-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
          gap: var(--space-3);
          margin: var(--space-4) 0;
        }

        .service-btn-card {
          background: #FFFFFF;
          border: 1px solid var(--hair);
          border-radius: 10px;
          padding: 14px 16px;
          text-align: left;
          cursor: pointer;
          transition: all 0.15s ease;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }

        .service-btn-card:hover {
          border-color: #0E3D51;
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        }

        .service-btn-card.active {
          border-color: #0E3D51;
          background: #F0F9FF;
          box-shadow: 0 4px 14px rgba(14, 61, 81, 0.1);
        }

        .service-btn-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          gap: 10px;
          margin-bottom: 6px;
        }

        .service-title-text {
          font-size: var(--text-sm);
          font-weight: 700;
          color: var(--ink);
          line-height: 1.3;
        }

        .service-price-tag {
          font-size: var(--text-sm);
          font-weight: 800;
          color: var(--copper);
          background: #FFF7ED;
          padding: 2px 6px;
          border-radius: 4px;
          white-space: nowrap;
        }

        .service-short-desc {
          font-size: var(--text-xs);
          color: var(--ink-2);
          line-height: 1.4;
          margin: 0 0 12px 0;
        }

        .service-btn-footer {
          display: flex;
          align-items: center;
          gap: 6px;
          flex-wrap: wrap;
          border-top: 1px solid var(--hair);
          padding-top: 8px;
          margin-top: auto;
        }

        .duration-pill {
          font-size: 11px;
          color: var(--ink-3);
          background: var(--surface-2);
          padding: 2px 6px;
          border-radius: 4px;
        }

        .popular-pill {
          font-size: 11px;
          font-weight: 700;
          color: #B45309;
          background: #FEF3C7;
          padding: 2px 6px;
          border-radius: 4px;
        }

        .action-pill {
          margin-left: auto;
          font-size: 11px;
          font-weight: 700;
          color: #0E3D51;
        }

        .service-btn-card.active .action-pill {
          color: #0369A1;
        }

        /* Office Options Grid */
        .office-options-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: var(--space-4);
          margin: var(--space-4) 0;
        }

        .office-btn-card {
          background: #FFFFFF;
          border: 2px solid var(--hair);
          border-radius: 12px;
          padding: var(--space-4);
          text-align: left;
          cursor: pointer;
          transition: all 0.2s ease;
          display: flex;
          flex-direction: column;
        }

        .office-btn-card:hover {
          border-color: #0E3D51;
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
        }

        .office-btn-card.active {
          border-color: #0E3D51;
          background: #F0F9FF;
          box-shadow: 0 6px 20px rgba(14, 61, 81, 0.12);
        }

        .office-btn-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;
        }

        .office-tag {
          font-size: 11px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          color: #0E3D51;
          background: #E0F2FE;
          padding: 2px 8px;
          border-radius: 4px;
        }

        .office-title {
          font-size: var(--text-base);
          color: var(--ink);
          margin-bottom: 4px;
        }

        .office-subtitle {
          font-size: var(--text-xs);
          color: var(--copper);
          font-weight: 600;
          margin-bottom: 8px;
        }

        .office-loc-text {
          font-size: var(--text-xs);
          color: var(--ink-2);
          line-height: 1.4;
          margin-bottom: 8px;
        }

        .office-parking-note {
          font-size: 11px;
          color: var(--ink-3);
          background: var(--surface-2);
          padding: 6px 10px;
          border-radius: 6px;
          margin-top: auto;
        }

        /* Employees Grid */
        .employees-options-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
          gap: var(--space-3);
          margin: var(--space-4) 0;
        }

        .employee-btn-card {
          background: #FFFFFF;
          border: 1px solid var(--hair);
          border-radius: 10px;
          padding: 14px 16px;
          text-align: left;
          cursor: pointer;
          transition: all 0.15s ease;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .employee-btn-card:hover {
          border-color: #0E3D51;
          box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
        }

        .employee-btn-card.active {
          border-color: #0E3D51;
          background: #F0F9FF;
        }

        .employee-info {
          display: flex;
          align-items: center;
          gap: 12px;
        }

        .employee-avatar {
          font-size: 28px;
        }

        .employee-details {
          display: flex;
          flex-direction: column;
        }

        .employee-name {
          font-size: var(--text-sm);
          color: var(--ink);
        }

        .employee-role {
          font-size: var(--text-xs);
          color: var(--copper);
          font-weight: 600;
        }

        .employee-spec {
          font-size: 11px;
          color: var(--ink-3);
        }

        /* Official Calendly Inline Scheduler Card */
        .calendly-inline-embed-card {
          background: #FFFFFF;
          border: 1.5px solid #0E3D51;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 8px 24px -4px rgba(14, 61, 81, 0.12);
          margin: var(--space-4) 0;
          scroll-margin-top: 110px;
        }

        .calendly-embed-header-bar {
          background: #0E3D51;
          color: #FFFFFF;
          padding: 12px 16px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          gap: 8px;
        }

        .live-status-pill {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(255, 255, 255, 0.12);
          padding: 4px 10px;
          border-radius: 20px;
          font-size: 12px;
          font-weight: 600;
          color: #E0F2FE;
        }

        .live-pulse-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #34D399;
          box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
          animation: pulseGreen 1.8s infinite;
        }

        @keyframes pulseGreen {
          0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7); }
          70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
          100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
        }

        .live-host-tag {
          font-size: 12px;
          color: #E2E8F0;
        }

        .live-host-tag strong {
          color: #FFFFFF;
        }

        .calendly-sms-notice {
          background: #EFF6FF;
          border-bottom: 1px solid #DBEAFE;
          padding: 10px 16px;
          font-size: 13px;
          color: #1E40AF;
          line-height: 1.45;
        }

        .calendly-live-frame {
          width: 100%;
          min-height: 640px;
          height: 720px;
          border: none;
          display: block;
        }

        /* D51: Calendly embed card notice & footer styling */
        .calendly-booking-notice {
          padding: 12px 16px;
          font-size: 14px;
          line-height: 1.5;
          color: var(--color-ink-muted);
          background: var(--color-surface, #F8FAFC);
          border-bottom: 1px solid var(--color-border, #E2E8F0);
        }

        .calendly-booking-notice strong {
          color: var(--color-ink, #0B0D0F);
        }

        .calendly-frame-footer-strip {
          padding: 12px 16px;
          font-size: 14px;
          color: var(--color-ink-muted);
          background: var(--color-surface, #F8FAFC);
          border-top: 1px solid var(--color-border, #E2E8F0);
          display: flex;
          align-items: center;
          gap: 6px;
          flex-wrap: wrap;
        }

        .calendly-open-tab-link {
          color: var(--color-primary, #0E3D51);
          font-weight: 600;
          text-decoration: underline;
          text-underline-offset: 3px;
        }

        .calendly-open-tab-link:hover,
        .calendly-open-tab-link:focus-visible {
          color: var(--copper, #B45309);
        }

        .quick-selector-docked {
          border-top: 2px dashed #CBD5E1;
          margin-top: var(--space-5);
          padding-top: var(--space-4);
        }

        .quick-selector-header {
          margin-bottom: var(--space-3);
        }

        .quick-title {
          font-size: 14px;
          font-weight: 700;
          color: #0E3D51;
          display: block;
        }

        .quick-sub {
          font-size: 12px;
          color: #64748B;
        }

        @media (max-width: 640px) {
          .calendly-live-frame {
            min-height: 640px;
            height: 640px;
          }
          .calendly-booking-notice {
            padding: 10px 14px;
            font-size: 13px;
          }
          .calendly-frame-footer-strip {
            padding: 10px 14px;
            font-size: 13px;
          }
          .calendly-embed-header-bar {
            flex-direction: column;
            align-items: flex-start;
            gap: 6px;
            padding: 10px 12px;
          }
          .live-status-pill {
            font-size: 11px;
            padding: 3px 8px;
          }
          .live-host-tag {
            font-size: 11px;
          }
          .calendly-sms-notice {
            padding: 8px 12px;
            font-size: 12px;
          }
        }

        /* Palmerston Dedicated Live Scheduler Styles */
        .palmerston-scheduler-card {
          border: 1.5px solid #0E3D51;
        }

        .palmerston-header-bar {
          background: #0E3D51;
        }

        .palmerston-host-strip {
          background: #F8FAFC;
          border-bottom: 1px solid #E2E8F0;
          padding: 16px 20px;
          display: flex;
          align-items: center;
          gap: 16px;
        }

        .palmerston-host-avatar {
          width: 52px;
          height: 52px;
          border-radius: 50%;
          background: #0E3D51;
          color: #FFFFFF;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          font-weight: 700;
          flex-shrink: 0;
          box-shadow: 0 4px 10px rgba(14, 61, 81, 0.2);
        }

        .palmerston-host-info {
          flex: 1;
        }

        .palmerston-host-title-row {
          display: flex;
          align-items: center;
          gap: 10px;
          flex-wrap: wrap;
        }

        .palmerston-host-name {
          margin: 0;
          font-size: 18px;
          font-weight: 700;
          color: #0E3D51;
        }

        .palmerston-office-badge {
          background: #DEF7EC;
          color: #03543F;
          font-size: 12px;
          font-weight: 600;
          padding: 2px 8px;
          border-radius: 12px;
          display: inline-block;
        }

        .palmerston-host-role {
          margin: 3px 0 6px 0;
          font-size: 13px;
          color: #475569;
          font-weight: 500;
        }

        .palmerston-meta-row {
          display: flex;
          flex-wrap: wrap;
          gap: 10px 16px;
          font-size: 12px;
          color: #334155;
        }

        .palmerston-phone-link {
          color: #0369A1;
          font-weight: 700;
          text-decoration: underline;
        }

        .palmerston-picker-body {
          padding: 20px;
        }

        .picker-section-label {
          font-size: 13px;
          font-weight: 700;
          color: #0E3D51;
          margin-bottom: 8px;
          text-transform: uppercase;
          letter-spacing: 0.03em;
        }

        .selected-slot-banner {
          background: #F0FDF4;
          border: 1px solid #BBF7D0;
          border-radius: 8px;
          padding: 12px 16px;
          display: flex;
          align-items: center;
          gap: 12px;
          margin-top: 18px;
          color: #166534;
        }

        .selected-slot-icon {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          background: #16A34A;
          color: #FFFFFF;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 13px;
          font-weight: 700;
          flex-shrink: 0;
        }

        .selected-slot-details {
          display: flex;
          flex-direction: column;
          gap: 2px;
          font-size: 13px;
        }

        @media (max-width: 640px) {
          .palmerston-host-strip {
            flex-direction: row;
            align-items: center;
            padding: 8px 12px;
            gap: 8px;
          }
          .palmerston-host-avatar {
            display: none;
          }
          .palmerston-host-role {
            display: none;
          }
          .palmerston-meta-row {
            flex-direction: row;
            flex-wrap: wrap;
            gap: 8px;
            font-size: 11px;
            margin-top: 2px;
          }
          .palmerston-meta-row span:nth-child(n+3) {
            display: none;
          }
          .calendly-booking-notice {
            display: none;
          }
          .palmerston-picker-body {
            padding: 10px 8px;
          }
        }

        /* DateTime Picker */
        .datetime-picker-container {
          background: #FFFFFF;
          border: 1px solid var(--hair);
          border-radius: 10px;
          padding: var(--space-4);
          margin: var(--space-4) 0;
        }

        .date-tabs-row {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 8px;
          margin-bottom: var(--space-4);
        }

        .date-tab-btn {
          display: flex;
          flex-direction: column;
          align-items: center;
          background: var(--surface-2);
          border: 1px solid var(--hair);
          border-radius: 8px;
          padding: 10px 6px;
          cursor: pointer;
          transition: all 0.15s ease;
        }

        .date-tab-btn:hover {
          border-color: #0E3D51;
        }

        .date-tab-btn.active {
          background: #0E3D51;
          border-color: #0E3D51;
          color: #ffffff;
        }

        .date-day-name {
          font-size: 11px;
          font-weight: 600;
          text-transform: uppercase;
        }

        .date-tab-btn.active .date-day-name {
          color: #93C5FD;
        }

        .date-day-num {
          font-size: var(--text-sm);
          font-weight: 800;
          margin-top: 2px;
        }

        .time-slots-wrapper {
          border-top: 1px solid var(--hair);
          padding-top: var(--space-4);
        }

        .time-slots-title {
          display: block;
          font-size: var(--text-xs);
          color: var(--ink-2);
          margin-bottom: 10px;
        }

        .time-slots-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
          gap: 8px;
        }

        .time-slot-btn {
          background: var(--surface-2);
          border: 1px solid var(--hair);
          border-radius: 6px;
          padding: 8px 10px;
          font-size: var(--text-xs);
          font-weight: 700;
          color: var(--ink);
          cursor: pointer;
          text-align: center;
          transition: all 0.15s ease;
        }

        .time-slot-btn:hover {
          border-color: #0E3D51;
          background: #FFFFFF;
        }

        .time-slot-btn.active {
          background: #0E3D51;
          border-color: #0E3D51;
          color: #ffffff;
        }

        /* Scenario Appearance Card */
        .scenario-appearance-card {
          background: #F8FAFC;
          border: 2px solid #CBD5E1;
          border-radius: 12px;
          padding: var(--space-5);
          margin-bottom: var(--space-5);
        }

        .scenario-card-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #E2E8F0;
          padding-bottom: 12px;
          margin-bottom: 14px;
          flex-wrap: wrap;
          gap: 10px;
        }

        .scenario-header-left {
          display: flex;
          align-items: center;
          gap: 12px;
        }

        .scenario-icon {
          font-size: 28px;
        }

        .scenario-header-left h4 {
          margin: 0;
          font-size: var(--text-base);
          color: var(--ink);
        }

        .scenario-header-left span {
          font-size: var(--text-xs);
          color: var(--ink-2);
        }

        .scenario-quote-pill {
          background: #FEF3C7;
          color: #92400E;
          border: 1px solid #FCD34D;
          border-radius: 6px;
          padding: 6px 12px;
          font-size: var(--text-sm);
        }

        .scenario-details-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 14px;
          margin-bottom: 14px;
        }

        .scenario-cell {
          display: flex;
          flex-direction: column;
        }

        .cell-label {
          font-size: 11px;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          color: var(--ink-3);
          margin-bottom: 2px;
        }

        .scenario-cell strong {
          font-size: var(--text-sm);
          color: var(--ink);
          margin-bottom: 2px;
        }

        .cell-sub {
          font-size: 11px;
          color: var(--ink-2);
        }

        .scenario-edit-bar {
          border-top: 1px solid #E2E8F0;
          padding-top: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: var(--text-xs);
          color: var(--ink-2);
          flex-wrap: wrap;
          gap: 8px;
        }

        .scenario-edit-buttons {
          display: flex;
          gap: 6px;
          flex-wrap: wrap;
        }

        .btn-edit-step {
          background: #FFFFFF;
          border: 1px solid #CBD5E1;
          color: #0E3D51;
          padding: 4px 10px;
          border-radius: 4px;
          font-size: 11px;
          font-weight: 700;
          cursor: pointer;
        }

        .btn-edit-step:hover {
          border-color: #0E3D51;
          background: #F0F9FF;
        }

        /* Booking Form */
        .booking-form-card {
          background: #FFFFFF;
          border: 1px solid var(--hair);
          border-radius: 12px;
          padding: var(--space-5);
        }

        .form-legend {
          display: flex;
          flex-direction: column;
          margin-bottom: var(--space-4);
        }

        .form-legend strong {
          font-size: var(--text-base);
          color: var(--ink);
        }

        .form-legend span {
          font-size: var(--text-xs);
          color: var(--ink-2);
        }

        .method-instruction-banner {
          background: #EFF6FF;
          border: 1px solid #BFDBFE;
          border-radius: 8px;
          padding: 10px 14px;
          margin-bottom: var(--space-4);
          display: flex;
          align-items: center;
          gap: 10px;
          font-size: var(--text-xs);
          color: #1E40AF;
        }

        .banner-icon {
          font-size: 18px;
        }

        .form-fields-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: var(--space-4);
          margin-bottom: var(--space-5);
        }

        .field-group {
          display: flex;
          flex-direction: column;
          gap: 4px;
        }

        .field-group label {
          font-size: var(--text-xs);
          font-weight: 700;
          color: var(--ink);
        }

        .compulsory-tag {
          color: #DC2626;
          font-weight: 600;
        }

        .field-group input {
          padding: 10px 12px;
          border: 1px solid var(--hair);
          border-radius: 6px;
          font-size: var(--text-sm);
          color: var(--ink);
          background: #FAFAFA;
        }

        .field-group input:focus {
          outline: none;
          border-color: #0E3D51;
          background: #FFFFFF;
        }

        .field-group.has-error input {
          border-color: #DC2626;
          background: #FEF2F2;
        }

        .field-error-text {
          font-size: 11px;
          color: #DC2626;
          font-weight: 600;
          margin-top: 2px;
        }

        .field-helper-text {
          font-size: 11px;
          color: var(--ink-3);
          margin-top: 2px;
        }

        .form-submit-row {
          border-top: 1px solid var(--hair);
          padding-top: var(--space-4);
          display: flex;
          flex-direction: column;
          gap: 8px;
        }

        .btn-confirm-appointment {
          background: linear-gradient(135deg, #0E3D51 0%, #17526D 100%);
          color: #ffffff;
          border: none;
          padding: 14px 24px;
          border-radius: 8px;
          font-size: var(--text-sm);
          font-weight: 800;
          cursor: pointer;
          transition: all 0.15s ease;
          box-shadow: 0 4px 12px rgba(14, 61, 81, 0.25);
        }

        .btn-confirm-appointment:hover {
          background: #082532;
          transform: translateY(-1px);
        }

        .no-prepayment-note {
          font-size: 11px;
          color: var(--ink-3);
          text-align: center;
        }

        /* Confirmation State */
        .booking-confirmation-card {
          background: #FFFFFF;
          border: 2px solid #86EFAC;
          border-radius: 12px;
          padding: var(--space-6);
          text-align: center;
        }

        .confirmation-icon {
          font-size: 48px;
          margin-bottom: 8px;
        }

        .confirmation-badge {
          display: inline-block;
          background: #DCFCE7;
          color: #166534;
          font-size: var(--text-xs);
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          padding: 4px 10px;
          border-radius: 4px;
          margin-bottom: 12px;
        }

        .confirmation-title {
          font-size: var(--text-2xl);
          color: var(--ink);
          margin: 0 0 8px 0;
        }

        .confirmation-subtitle {
          font-size: var(--text-sm);
          color: var(--ink-2);
          max-width: 600px;
          margin: 0 auto var(--space-5) auto;
          line-height: 1.5;
        }

        .confirmation-summary-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
          gap: 12px;
          background: #F8FAFC;
          border: 1px solid var(--hair);
          border-radius: 8px;
          padding: var(--space-4);
          margin-bottom: var(--space-5);
          text-align: left;
        }

        .summary-item {
          display: flex;
          flex-direction: column;
        }

        .item-label {
          font-size: 11px;
          text-transform: uppercase;
          color: var(--ink-3);
        }

        .summary-item strong {
          font-size: var(--text-sm);
          color: var(--ink);
        }

        .item-sub {
          font-size: 11px;
          color: var(--ink-2);
        }

        .confirmation-checklist {
          background: #FFFBEB;
          border: 1px solid #FDE68A;
          border-radius: 8px;
          padding: 16px;
          text-align: left;
          margin-bottom: var(--space-5);
        }

        .confirmation-checklist h4 {
          margin: 0 0 8px 0;
          color: #92400E;
          font-size: var(--text-sm);
        }

        .confirmation-checklist ul {
          margin: 0;
          padding-left: 20px;
          font-size: var(--text-xs);
          color: #78350F;
          line-height: 1.6;
        }

        .confirmation-calendly-sync-box {
          background: #F0FDF4;
          border: 1.5px solid #86EFAC;
          border-radius: 10px;
          padding: 16px 20px;
          text-align: left;
          margin-bottom: var(--space-5);
        }

        .sync-callout-header {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          margin-bottom: 12px;
        }

        .sync-icon {
          font-size: 24px;
          line-height: 1;
        }

        .sync-callout-header strong {
          display: block;
          color: #166534;
          font-size: var(--text-sm);
          margin-bottom: 4px;
        }

        .sync-callout-header p {
          margin: 0;
          font-size: var(--text-xs);
          color: #14532D;
          line-height: 1.5;
        }

        .btn-sync-calendly-direct {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          background: #15803D;
          color: #FFFFFF !important;
          padding: 10px 18px;
          border-radius: 8px;
          font-size: var(--text-xs);
          font-weight: 700;
          text-decoration: none;
          transition: background 0.2s ease, transform 0.1s ease;
          width: 100%;
          text-align: center;
        }

        .btn-sync-calendly-direct:hover {
          background: #166534;
          transform: translateY(-1px);
        }

        .confirmation-calendar-actions-card {
          background: #F8FAFC;
          border: 1.5px solid #CBD5E1;
          border-radius: 12px;
          padding: 20px;
          text-align: left;
          margin-bottom: var(--space-5);
        }

        .cal-card-title {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          margin-bottom: 16px;
        }

        .cal-card-icon {
          font-size: 26px;
          line-height: 1;
        }

        .cal-card-title strong {
          display: block;
          font-size: var(--text-base);
          color: var(--ink);
          margin-bottom: 2px;
        }

        .cal-card-title p {
          margin: 0;
          font-size: var(--text-xs);
          color: var(--ink-2);
          line-height: 1.4;
        }

        .cal-buttons-row {
          display: flex;
          gap: 12px;
          flex-wrap: wrap;
          margin-bottom: 14px;
        }

        .btn-add-gcal {
          flex: 1;
          min-width: 220px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          background: #1A73E8;
          color: #FFFFFF !important;
          padding: 12px 18px;
          border-radius: 8px;
          font-size: var(--text-xs);
          font-weight: 700;
          text-decoration: none;
          box-shadow: 0 2px 6px rgba(26, 115, 232, 0.25);
          transition: background 0.2s ease, transform 0.1s ease;
        }

        .btn-add-gcal:hover {
          background: #1557B0;
          transform: translateY(-1px);
        }

        .btn-download-ics {
          flex: 1;
          min-width: 220px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          background: #0E3D51;
          color: #FFFFFF !important;
          padding: 12px 18px;
          border-radius: 8px;
          font-size: var(--text-xs);
          font-weight: 700;
          text-decoration: none;
          box-shadow: 0 2px 6px rgba(14, 61, 81, 0.25);
          transition: background 0.2s ease, transform 0.1s ease;
        }

        .btn-download-ics:hover {
          background: #0A2B3A;
          transform: translateY(-1px);
        }

        .dst-notice-pill {
          background: #EFF6FF;
          border: 1px solid #BFDBFE;
          border-radius: 6px;
          padding: 10px 14px;
          font-size: 11px;
          color: #1E40AF;
          line-height: 1.5;
        }

        .confirmation-actions {
          display: flex;
          justify-content: center;
          gap: 12px;
          flex-wrap: wrap;
        }

        .btn-book-another {
          background: #0E3D51;
          color: #ffffff;
          border: none;
          padding: 10px 20px;
          border-radius: 6px;
          font-size: var(--text-sm);
          font-weight: 700;
          cursor: pointer;
        }

        .btn-call-reception {
          background: var(--surface-2);
          border: 1px solid var(--hair);
          color: var(--ink);
          padding: 10px 20px;
          border-radius: 6px;
          font-size: var(--text-sm);
          font-weight: 700;
          text-decoration: none;
        }

        /* Wizard Nav Footer / Bottom Navigation Dock */
        .wizard-nav-footer,
        .booking-bottom-dock {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-top: 1.5px solid #E2E8F0;
          padding-top: 20px;
          margin-top: 28px;
          gap: 12px;
          flex-wrap: wrap;
        }

        .dock-hint-left {
          font-size: 12px;
          color: var(--color-ink-secondary);
          font-weight: 600;
        }

        .dock-prompt-hint {
          font-size: 13px;
          color: var(--color-ink-muted);
          font-style: italic;
        }

        .selected-summary-pill {
          font-size: 12px;
          color: #0E3D51;
          background: #F1F5F9;
          border: 1px solid #E2E8F0;
          padding: 6px 14px;
          border-radius: 6px;
          font-weight: 600;
        }

        .btn-wizard-back,
        .btn-dock-prev {
          background: #F8FAFC;
          border: 1.5px solid #CBD5E1;
          color: #334155;
          padding: 11px 20px;
          min-height: 44px;
          border-radius: 8px;
          font-weight: 700;
          font-size: 13px;
          cursor: pointer;
          transition: all 0.18s ease;
          display: inline-flex;
          align-items: center;
          gap: 6px;
        }

        .btn-wizard-back:hover,
        .btn-dock-prev:hover {
          background: #EEF2F6;
          border-color: #94A3B8;
          color: #0F172A;
          transform: translateY(-1px);
        }

        .btn-wizard-next,
        .btn-dock-next {
          background: #0E3D51;
          color: #ffffff;
          border: none;
          padding: 11px 22px;
          min-height: 44px;
          border-radius: 8px;
          font-weight: 700;
          font-size: 13px;
          cursor: pointer;
          transition: all 0.18s ease;
          display: inline-flex;
          align-items: center;
          gap: 6px;
          box-shadow: 0 4px 12px rgba(14, 61, 81, 0.2);
        }

        .btn-wizard-next:hover,
        .btn-dock-next:hover {
          background: #082532;
          transform: translateY(-1px);
          box-shadow: 0 6px 16px rgba(14, 61, 81, 0.3);
        }

        /* Guarantees */
        .booking-guarantees-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
          gap: var(--space-4);
          margin-top: var(--space-6);
          padding-top: var(--space-5);
          border-top: 1px solid var(--hair);
        }

        .guarantee-card {
          text-align: center;
          padding: var(--space-3);
        }

        .guarantee-icon {
          font-size: 24px;
          display: block;
          margin-bottom: 6px;
        }

        .guarantee-card h4 {
          font-size: var(--text-sm);
          color: var(--ink);
          margin: 0 0 4px 0;
        }

        .guarantee-card p {
          font-size: 11px;
          color: var(--ink-2);
          margin: 0;
          line-height: 1.4;
        }


        .live-calendly-embed-section {
          margin-top: 14px;
          border: 1px solid #0E3D51;
          border-radius: 8px;
          overflow: hidden;
        }

        .embed-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #0E3D51;
          color: #fff;
          padding: 8px 12px;
          font-size: 11px;
        }

        .embed-header-actions {
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .btn-open-calendly-tab {
          background: rgba(255, 255, 255, 0.2);
          color: #fff;
          text-decoration: none;
          padding: 2px 8px;
          border-radius: 4px;
          font-size: 11px;
          display: inline-block;
        }
        .btn-open-calendly-tab:hover {
          background: rgba(255, 255, 255, 0.35);
        }

        .btn-close-embed {
          background: rgba(255, 255, 255, 0.2);
          border: none;
          color: #fff;
          padding: 2px 8px;
          border-radius: 4px;
          cursor: pointer;
          font-size: 11px;
        }

        .embed-notice {
          background: #f8fafc;
          padding: 6px 12px;
          font-size: 10px;
          color: var(--ink-3);
          border-bottom: 1px solid var(--hair);
        }

        /* RESPONSIVENESS */
        @media (max-width: 840px) {
          .calendly-booking-app {
            padding: 14px 12px;
            margin: 6px auto;
            border-radius: 12px;
            max-width: 100%;
          }

          /* Fast mobile booking: Hide redundant headers & help banner so booking step appears immediately */
          .app-header-strip {
            display: none !important;
          }

          .unsure-help-bar {
            display: none !important;
          }

          .screen-header {
            margin-bottom: 12px;
            text-align: center;
          }

          .screen-header h3 {
            font-size: 1.25rem;
            margin-bottom: 4px;
          }

          .screen-header p {
            font-size: 13px;
            line-height: 1.35;
          }

          .step-badge {
            font-size: 11px;
            padding: 3px 8px;
            margin-bottom: 6px;
          }

          .wizard-nav-footer,
          .booking-bottom-dock {
            flex-direction: column-reverse;
            align-items: stretch;
            gap: 10px;
          }

          .btn-wizard-back,
          .btn-dock-prev,
          .btn-wizard-next,
          .btn-dock-next {
            width: 100%;
            justify-content: center;
          }

          /* Compact Step 1 Cards on Mobile (Grid layout prevents overflow) */
          .client-type-grid {
            grid-template-columns: 1fr;
            gap: 10px;
            margin: 10px auto;
          }

          .client-type-card {
            display: flex;
            flex-direction: column;
            padding: 14px 16px;
            text-align: left;
            border-radius: 10px;
          }

          .client-box-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding-bottom: 10px;
            margin-bottom: 10px;
            border-bottom: 1px solid #F1F5F9;
          }

          .client-box-title-wrap {
            display: flex;
            align-items: center;
            gap: 10px;
          }

          .client-box-icon {
            width: 32px;
            height: 32px;
            font-size: 16px;
          }

          .client-card-title {
            font-size: 15px;
            margin: 0;
          }

          .client-box-status {
            padding: 4px 10px;
            font-size: 11px;
          }

          .client-card-desc {
            font-size: 12px;
            line-height: 1.45;
            color: #475569;
            margin: 0;
          }

          .client-box-features {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 8px;
          }

          .client-feature-pill {
            font-size: 10px;
            padding: 2px 6px;
          }

          .step1-footer-note {
            margin-top: 10px;
            font-size: 11px;
          }

          .appointment-methods-grid {
            grid-template-columns: 1fr;
            gap: 8px;
          }

          .method-btn-card {
            padding: 10px 14px;
            flex-direction: row;
            align-items: center;
            gap: 12px;
          }

          .method-icon-wrap {
            margin-bottom: 0;
            width: 38px;
            height: 38px;
            flex-shrink: 0;
          }

          .method-info {
            margin-bottom: 0;
          }

          .method-desc {
            margin-bottom: 0;
          }

          .method-cta {
            display: none;
          }

          .office-options-grid {
            grid-template-columns: 1fr;
            gap: 8px;
          }

          .office-btn-card {
            padding: 10px 14px;
          }

          .booking-guarantees-grid {
            grid-template-columns: 1fr;
          }

          .enquiry-fields .field-row {
            grid-template-columns: 1fr;
          }

          .form-fields-grid {
            grid-template-columns: 1fr;
          }

          .tab-sub {
            display: none;
          }

          .scenario-card-header {
            flex-direction: column;
            align-items: flex-start;
          }

          .intake-options-grid {
            grid-template-columns: 1fr;
          }
        }

        /* Service Location Switcher Bar */
        .service-location-bar {
          background: #F8FAFC;
          border: 1px solid #CBD5E1;
          border-radius: 8px;
          padding: 10px 14px;
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          flex-wrap: wrap;
        }

        .service-loc-info {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: var(--text-sm);
          color: var(--ink);
        }

        .loc-pin {
          font-size: 16px;
        }

        .service-loc-actions {
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .quick-switch-label {
          font-size: var(--text-xs);
          font-weight: 600;
          color: var(--ink-2);
        }

        .quick-select-wrap {
          position: relative;
          display: inline-flex;
          align-items: center;
        }

        .quick-switch-select {
          padding: 6px 28px 6px 10px;
          border: 1px solid #94A3B8;
          border-radius: 6px;
          font-size: var(--text-xs);
          font-weight: 600;
          background: #FFFFFF;
          color: #0E3D51;
          appearance: none;
          cursor: pointer;
        }

        .quick-select-chevron {
          position: absolute;
          right: 8px;
          pointer-events: none;
          color: #64748B;
          font-size: 11px;
        }

        .location-change-alert {
          background: #ECFDF5;
          border: 1px solid #A7F3D0;
          color: #065F46;
          padding: 8px 14px;
          border-radius: 6px;
          font-size: var(--text-xs);
          font-weight: 600;
          margin-bottom: 16px;
        }

        /* Accountant Office Location Bar */
        .accountant-location-bar {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: var(--space-3);
          background: #F8FAFC;
          border: 1px solid var(--hair);
          border-radius: 8px;
          padding: 10px 16px;
          margin-bottom: var(--space-4);
        }

        .location-bar-content {
          display: flex;
          align-items: center;
          gap: 12px;
          flex-wrap: wrap;
        }

        .location-bar-label {
          font-size: var(--text-xs);
          font-weight: 700;
          color: var(--ink);
          text-transform: uppercase;
          letter-spacing: 0.04em;
        }

        .location-dropdown-wrap {
          position: relative;
          display: inline-flex;
          align-items: center;
        }

        .location-dropdown-select {
          appearance: none;
          -webkit-appearance: none;
          background: #FFFFFF;
          border: 1.5px solid #CBD5E1;
          border-radius: 6px;
          padding: 8px 34px 8px 12px;
          font-size: var(--text-sm);
          font-weight: 600;
          color: var(--ink);
          cursor: pointer;
          transition: all 0.15s ease;
          min-height: 38px;
        }

        .location-dropdown-select:hover {
          border-color: #0097A7;
        }

        .location-dropdown-select:focus {
          outline: none;
          border-color: #0097A7;
          box-shadow: 0 0 0 3px rgba(0, 151, 167, 0.15);
        }

        .location-chevron-down {
          position: absolute;
          right: 12px;
          pointer-events: none;
          font-size: 14px;
          color: var(--ink-3);
        }

        .location-notice-pill {
          font-size: 12px;
          color: #166534;
          background: #DCFCE7;
          border: 1px solid #BBF7D0;
          padding: 4px 10px;
          border-radius: 9999px;
          font-weight: 600;
        }

        @media (max-width: 480px) {
          .screenshot-employee-card {
            flex-wrap: wrap;
            padding: 10px 12px;
            gap: 8px;
          }

          .screenshot-badge-blue {
            font-size: 11px;
            padding: 2px 8px;
          }

          .screenshot-main-title {
            font-size: 18px;
          }

          .screenshot-panel-actions {
            flex-direction: column-reverse;
            gap: 10px;
          }

          .btn-screenshot-continue,
          .btn-screenshot-back {
            width: 100%;
            text-align: center;
            justify-content: center;
          }

          .step-tab-btn {
            padding: 6px 4px;
            justify-content: center;
            min-height: 44px;
            min-width: 44px;
          }

          .tab-meta {
            display: none;
          }

          .tab-number {
            width: 26px;
            height: 26px;
            font-size: 11px;
          }

          .date-tabs-row {
            grid-template-columns: repeat(3, 1fr);
          }
        }