/* ============================================================
   Start Here — Setup Guide
   Color palette mirrors Kudurru's existing teal theme:
     teal:        #1ab394   (primary accent)
     teal-dark:   #184f48   (nav background, dark teal)
     teal-light:  #e8f5f2   (light teal fill)
     teal-mid:    #b2dfd6   (border on teal surfaces)
   ============================================================ */

:root {
    --sh-teal:        #1ab394;
    --sh-teal-dark:   #184f48;
    --sh-teal-light:  #e8f5f2;
    --sh-teal-mid:    #b2dfd6;
    --sh-yellow:      #F4B942;
    --sh-yellow-dark: #8a6512;
    --sh-yellow-light:#fff5da;
    --sh-ink:         #1a2e2b;
    --sh-ink-2:       #3a4e4b;
    --sh-muted:       #6b7e7a;
    --sh-subtle:      #9ab0ab;
    --sh-surface:     #f8faf9;
    --sh-border:      #dde8e5;
    --sh-border-dark: #c4d8d3;
    --sh-nav-bg:      #184f48;
    --sh-nav-border:  rgba(255,255,255,0.08);
    --sh-nav-width:   220px;
    --sh-radius:      8px;
    --sh-font:        "Open Sans", "Segoe UI", system-ui, sans-serif;
}

/* Registration and confirmation pages */
.ks-onboarding-auth {
    max-width: 980px;
    margin: 34px auto;
    padding: 0 15px;
    font-family: var(--sh-font);
    color: var(--sh-ink);
}

.ks-auth-shell {
    display: grid;
    grid-template-columns: minmax(280px, .9fr) minmax(390px, 1.1fr);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--sh-border);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(24,79,72,.13);
}

.ks-auth-story {
    min-height: 620px;
    padding: 38px;
    background: var(--sh-teal-dark);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ks-auth-brand {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.ks-auth-story h1 {
    color: #fff;
    font-size: 37px;
    line-height: 1.14;
    margin: 0 0 14px;
}

.ks-auth-story p {
    color: rgba(255,255,255,.78);
    font-size: 15px;
    line-height: 1.55;
}

.ks-auth-fine-print {
    color: rgba(255,255,255,.8);
    font-size: 12px;
}

.ks-auth-form-panel {
    padding: 38px 42px;
}

.ks-auth-form-panel h2,
.ks-auth-centered h2 {
    color: var(--sh-ink);
    font-size: 29px;
    margin: 0 0 8px;
}

.ks-auth-lead {
    color: var(--sh-muted);
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 22px;
}

.ks-auth-field { margin-bottom: 14px; }

.ks-auth-field label {
    color: var(--sh-ink);
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}

.ks-auth-field .form-control {
    min-height: 44px;
    border-color: var(--sh-border-dark);
    border-radius: 7px;
}

.ks-auth-help {
    color: var(--sh-muted);
    display: block;
    font-size: 11px;
    line-height: 1.45;
    margin-top: 6px;
}

.ks-auth-consent {
    color: var(--sh-muted);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.45;
    margin: 17px 0;
}

.ks-auth-consent input { margin-top: 2px; }

.ks-auth-primary {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 7px;
    background: var(--sh-teal);
    color: #fff;
    font-weight: 700;
}

.ks-auth-primary:hover,
.ks-auth-primary:focus { background: #17a085; color: #fff; }

.ks-auth-footer {
    color: var(--sh-muted);
    font-size: 12px;
    margin-top: 16px;
    text-align: center;
}

.ks-auth-centered {
    max-width: 650px;
    min-height: 540px;
    margin: 34px auto;
    padding: 65px 42px;
    background: #fff;
    border: 1px solid var(--sh-border);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(24,79,72,.12);
    text-align: center;
}

.ks-auth-status-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--sh-teal-light);
    color: var(--sh-teal-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.ks-auth-email-box {
    max-width: 440px;
    margin: 24px auto 18px;
    padding: 15px;
    background: var(--sh-surface);
    border: 1px solid var(--sh-border);
    border-radius: 8px;
}

.ks-auth-email-box strong { display: block; margin-top: 3px; }
.ks-auth-inline-actions { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }
.ks-auth-support { border-top: 1px solid var(--sh-border); margin-top: 30px; padding-top: 20px; color: var(--sh-muted); }

@media (max-width: 760px) {
    .ks-auth-shell { grid-template-columns: 1fr; }
    .ks-auth-story { min-height: 235px; padding: 26px; }
    .ks-auth-story h1 { font-size: 29px; }
    .ks-auth-form-panel { padding: 30px 24px; }
    .ks-auth-centered { margin: 18px 15px; padding: 45px 24px; }
}

/* ============================================================
   WELCOME SCREEN
   ============================================================ */

.sh-welcome-body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: linear-gradient(160deg, #f0f5f3 0%, #e4f0ec 100%);
    font-family: var(--sh-font);
    color: var(--sh-ink);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sh-welcome-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 48px 24px;
    width: 100%;
    max-width: 600px;
    text-align: center;
}

.sh-welcome-wordmark {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--sh-teal-dark);
    opacity: 0.55;
}

.sh-welcome-icon {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: var(--sh-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(26,179,148,0.32);
    flex-shrink: 0;
}

.sh-welcome-headline h1 {
    font-size: 30px;
    font-weight: 700;
    color: var(--sh-ink);
    margin: 0 0 10px 0;
    line-height: 1.25;
    border: none;
}

.sh-welcome-headline p {
    font-size: 16px;
    color: var(--sh-ink-2);
    line-height: 1.65;
    margin: 0;
}

.sh-welcome-headline strong {
    color: var(--sh-teal-dark);
    border-bottom: 2px solid var(--sh-teal);
}

/* First-value activation flow */
.sh-activation-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    padding: 0 28px;
    background: #fff;
    border-bottom: 1px solid var(--sh-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
}

.sh-activation-brand {
    color: var(--sh-teal-dark);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.sh-activation-company {
    color: var(--sh-muted);
    font-size: 13px;
}

.sh-activation-wrap {
    width: 100%;
    max-width: 800px;
    margin: 64px auto 0;
    padding: 42px 28px 56px;
}

.sh-activation-progress-labels {
    display: flex;
    justify-content: space-between;
    color: var(--sh-muted);
    font-size: 12px;
    margin-bottom: 8px;
}

.sh-activation-progress {
    height: 7px;
    overflow: hidden;
    border-radius: 5px;
    background: var(--sh-border);
    margin-bottom: 38px;
}

.sh-activation-progress span {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: var(--sh-teal);
}

.sh-activation-heading h1 {
    color: var(--sh-ink);
    font-size: 34px;
    line-height: 1.2;
    margin: 0 0 12px;
}

.sh-activation-heading p {
    max-width: 680px;
    color: var(--sh-muted);
    font-size: 17px;
    line-height: 1.55;
    margin: 0;
}

.sh-activation-success {
    color: var(--sh-teal-dark);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 16px;
}

.sh-activation-success .fa {
    color: var(--sh-teal);
    margin-right: 6px;
}

.sh-activation-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 30px 0 12px;
}

.sh-activation-choice {
    min-height: 150px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--sh-border-dark);
    border-radius: 10px;
    color: var(--sh-ink);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.sh-activation-choice:hover,
.sh-activation-choice:focus {
    color: var(--sh-ink);
    text-decoration: none;
    border-color: var(--sh-teal);
    box-shadow: 0 8px 24px rgba(24,79,72,.12);
    transform: translateY(-1px);
}

.sh-activation-choice-primary {
    border-color: var(--sh-teal);
}

.sh-activation-choice-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    border-radius: 8px;
    color: var(--sh-teal-dark);
    background: var(--sh-teal-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.sh-activation-choice strong {
    color: var(--sh-ink);
    font-size: 16px;
    margin-bottom: 5px;
}

.sh-activation-choice > span:last-child {
    color: var(--sh-muted);
    font-size: 13px;
    line-height: 1.45;
}

.sh-activation-exit {
    text-align: left;
    margin: 0;
}

@media (max-width: 620px) {
    .sh-activation-topbar { padding: 0 18px; }
    .sh-activation-wrap { padding: 30px 18px 42px; }
    .sh-activation-heading h1 { font-size: 28px; }
    .sh-activation-heading p { font-size: 15px; }
    .sh-activation-choices { grid-template-columns: 1fr; }
    .sh-activation-choice { min-height: 132px; }
}

/* Preview cards */
.sh-preview-cards {
    display: flex;
    gap: 12px;
    width: 100%;
}

.sh-preview-card {
    flex: 1;
    background: #fff;
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius);
    padding: 18px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.sh-preview-icon {
    font-size: 26px;
    line-height: 1;
    margin-bottom: 2px;
}

.sh-preview-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--sh-ink);
}

.sh-preview-time {
    font-size: 12px;
    color: var(--sh-muted);
}

/* Actions */
.sh-welcome-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* ============================================================
   SHARED BUTTON STYLES
   ============================================================ */

.sh-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--sh-teal);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-family: var(--sh-font);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 24px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

.sh-btn-primary:hover,
.sh-btn-primary:focus {
    background: #17a085;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(26,179,148,0.28);
    outline: none;
}

.sh-btn-primary.sh-btn-large {
    font-size: 16px;
    padding: 13px 52px;
}

.sh-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    color: var(--sh-muted);
    border: none;
    border-radius: 6px;
    font-family: var(--sh-font);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 10px;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.12s, background 0.12s;
}

.sh-btn-ghost:hover,
.sh-btn-ghost:focus {
    color: var(--sh-ink);
    background: rgba(0,0,0,0.04);
    text-decoration: none;
    outline: none;
}

/* ============================================================
   SETUP SHELL LAYOUT  (Dashboard + Step pages)
   ============================================================ */

.sh-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    font-family: var(--sh-font);
    overflow: hidden;
}

/* Top bar */
.sh-topbar {
    height: 44px;
    background: var(--sh-nav-bg);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--sh-nav-border);
    z-index: 100;
}

.sh-topbar-logo {
    font-size: 25px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
}

.sh-topbar-spacer { flex: 1; }

.sh-topbar-search {
    height: 28px;
    width: 200px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 6px;
    color: rgba(255,255,255,0.35);
    font-size: 12px;
    font-family: var(--sh-font);
    cursor: default;
}

.sh-topbar-user {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sh-topbar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--sh-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.sh-topbar-username {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    font-weight: 500;
}

/* Body row */
.sh-body-row {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* Main content area */
.sh-main {
    flex: 1;
    overflow-y: auto;
    background: var(--sh-surface);
}

/* ============================================================
   SETUP NAV  (left sidebar)
   ============================================================ */

.sh-nav {
    width: var(--sh-nav-width);
    background: var(--sh-nav-bg);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-right: 1px solid var(--sh-nav-border);
    overflow: hidden;
}

/* When sh-nav is rendered inside the main INSPINIA layout (#wrapper),
   pin it like the normal sidebar so page-wrapper margin-left still works. */
#wrapper > .sh-nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 2001;
    overflow-y: auto;
}

/* Mode toggle */
.sh-mode-toggle {
    display: flex;
    margin: 10px 12px 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
}

.sh-mode-btn {
    flex: 1;
    padding: 6px 4px;
    font-family: var(--sh-font);
    font-size: 11px;
    font-weight: 600;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.45);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    text-align: center;
    line-height: 1.3;
}

.sh-mode-btn.active {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 5px;
}

.sh-mode-btn:hover:not(.active) {
    color: rgba(255,255,255,0.72);
}

/* Progress section */
.sh-nav-progress {
    padding: 6px 14px 10px;
    border-bottom: 1px solid var(--sh-nav-border);
}

.sh-nav-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.sh-nav-progress-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255,255,255,0.35);
}

.sh-nav-progress-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--sh-teal);
}

.sh-prog-track {
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
}

.sh-prog-fill {
    height: 100%;
    background: var(--sh-teal);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Nav items list */
.sh-nav-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.sh-nav-section-label {
    padding: 8px 6px 4px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.28);
}

.sh-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 6px;
    cursor: pointer;
    color: rgba(255,255,255,0.65);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    margin-bottom: 1px;
}

.sh-nav-item:hover {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.9);
    text-decoration: none;
}

.sh-nav-item.active {
    background: rgba(26,179,148,0.15);
    color: #fff;
}

.sh-nav-item-label { flex: 1; }

/* Step bubble (numbered circle or checkmark) */
.sh-nav-bubble {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 1.5px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    flex-shrink: 0;
}

.sh-nav-bubble.done {
    background: var(--sh-teal);
    border-color: var(--sh-teal);
    color: #fff;
}

.sh-nav-bubble.active-step {
    background: rgba(26,179,148,0.25);
    border-color: var(--sh-teal);
    color: var(--sh-teal);
}

/* Home icon */
.sh-nav-home-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.6;
}

/* Opt badge */
.sh-tag-opt {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.35);
    border-radius: 3px;
    padding: 2px 5px;
}

/* Nav footer */
.sh-nav-footer {
    padding: 10px 14px;
    border-top: 1px solid var(--sh-nav-border);
}

.sh-nav-exit {
    font-size: 12px;
    color: rgba(255,255,255,0.3);
    text-decoration: none;
    display: block;
    padding: 4px 0;
    transition: color 0.12s;
}

.sh-nav-exit:hover {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
}

/* ============================================================
   DASHBOARD
   ============================================================ */

.sh-page {
    padding: 28px 32px;
    max-width: 860px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.sh-page-header h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--sh-ink);
    border: none;
}

.sh-page-header p {
    font-size: 15px;
    color: var(--sh-muted);
    margin: 0;
}

/* Card base */
.sh-card {
    background: #fff;
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.sh-card-hover {
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.sh-card-hover:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.09);
    border-color: var(--sh-border-dark);
}

/* "Next up" card */
.sh-next-card {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-color: var(--sh-teal);
    border-width: 2px;
}

.sh-next-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--sh-teal);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.sh-next-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--sh-ink);
}

.sh-next-meta {
    font-size: 13px;
    color: var(--sh-muted);
    margin-top: 1px;
}

.sh-next-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.sh-next-info { flex: 1; }

/* Progress card */
.sh-progress-card {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.sh-progress-card > div { flex: 1; }

.sh-progress-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.sh-progress-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--sh-ink-2);
}

.sh-progress-count {
    font-size: 13px;
    font-weight: 700;
    color: var(--sh-teal-dark);
}

.sh-prog-track-lg {
    height: 10px;
    background: #edf2f0;
    border-radius: 5px;
    overflow: hidden;
}

/* Section header */
.sh-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--sh-subtle);
    margin-bottom: 10px;
}

/* Required step list row */
.sh-step-row {
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
}

.sh-step-row:hover { text-decoration: none; color: inherit; }

.sh-step-number {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sh-surface);
    border: 2px solid var(--sh-border-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--sh-muted);
    flex-shrink: 0;
}

.sh-step-number.done {
    background: var(--sh-teal);
    border-color: var(--sh-teal);
    color: #fff;
}

.sh-step-emoji {
    font-size: 22px;
    flex-shrink: 0;
}

.sh-step-info { flex: 1; }

.sh-step-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--sh-ink);
}

.sh-step-name.done {
    text-decoration: line-through;
    color: var(--sh-muted);
}

.sh-step-tagline {
    font-size: 12px;
    color: var(--sh-subtle);
    margin-top: 1px;
}

.sh-step-time {
    font-size: 12px;
    color: var(--sh-subtle);
    flex-shrink: 0;
}

.sh-step-action {
    font-size: 13px;
    font-weight: 600;
    color: var(--sh-teal-dark);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Tag */
.sh-tag-done {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--sh-teal-dark);
    background: var(--sh-teal-light);
    border: 1px solid var(--sh-teal-mid);
    border-radius: 12px;
    padding: 3px 10px;
}

/* Optional step cards */
.sh-opt-cards {
    display: flex;
    gap: 10px;
}

.sh-opt-card {
    flex: 1;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    display: block;
}

.sh-opt-card:hover { text-decoration: none; color: inherit; }

.sh-opt-card-icon { font-size: 22px; margin-bottom: 6px; }

.sh-opt-card-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--sh-ink-2);
    margin-bottom: 2px;
}

.sh-opt-card-time {
    font-size: 12px;
    color: var(--sh-subtle);
}

/* ============================================================
   STEP DETAIL
   ============================================================ */

.sh-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 28px 0;
}

.sh-breadcrumb-link {
    font-size: 13px;
    color: var(--sh-muted);
    text-decoration: none;
    font-weight: 500;
    background: none;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    font-family: var(--sh-font);
}

.sh-breadcrumb-link:hover {
    color: var(--sh-ink);
    text-decoration: none;
}

.sh-breadcrumb-sep {
    color: var(--sh-subtle);
    font-size: 13px;
}

.sh-breadcrumb-current {
    font-size: 13px;
    color: var(--sh-muted);
    font-weight: 500;
}

/* Step header */
.sh-step-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.sh-step-header-icon { font-size: 42px; line-height: 1; flex-shrink: 0; }

.sh-step-header-info { flex: 1; }

.sh-step-header-title {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--sh-ink);
    border: none;
}

.sh-step-header-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--sh-muted);
}

.sh-step-header-meta-sep { color: var(--sh-border-dark); }

/* Why this matters card */
.sh-why-card {
    overflow: hidden;
    padding: 0;
}

.sh-why-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--sh-teal-light);
    border: none;
    border-bottom: 1px solid var(--sh-teal-mid);
    cursor: pointer;
    font-family: var(--sh-font);
}

.sh-why-toggle.collapsed {
    border-bottom: none;
}

.sh-why-toggle-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--sh-teal-dark);
}

.sh-why-toggle-hint {
    font-size: 12px;
    color: var(--sh-teal-dark);
    opacity: 0.65;
}

.sh-why-body {
    padding: 12px 16px;
}

.sh-why-body p {
    font-size: 14px;
    color: var(--sh-ink-2);
    line-height: 1.65;
    margin: 0;
}

/* Tasks section */
.sh-tasks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.sh-tasks-progress {
    font-size: 12px;
    color: var(--sh-muted);
    font-weight: 600;
}

/* Task row */
.sh-task-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--sh-border);
}

.sh-task-row:last-child { border-bottom: none; }

.sh-task-row.done { opacity: 0.72; }

.sh-task-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--sh-border-dark);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

.sh-task-check.done {
    background: var(--sh-teal);
    border-color: var(--sh-teal);
}

.sh-task-info { flex: 1; }

.sh-task-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--sh-ink);
}

.sh-task-label.done {
    text-decoration: line-through;
    color: var(--sh-muted);
}

.sh-task-description {
    font-size: 12px;
    color: var(--sh-muted);
    margin: 2px 0 4px;
    line-height: 1.4;
}

.sh-task-kb-links {
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sh-task-kb-link {
    font-size: 11px;
    color: var(--sh-teal-dark);
    text-decoration: none;
    opacity: 0.8;
    border: 1px solid black;
    border-radius: 5px;
    background: #184f48;
    color: white;
    margin-left: 20px;
    padding:4px;
}

.sh-task-kb-link:hover {
    opacity: 1;
    text-decoration: underline;
}

.sh-task-count {
    font-size: 12px;
    color: var(--sh-subtle);
    margin-top: 2px;
}

.sh-task-count.has-data { color: var(--sh-teal-dark); font-weight: 600; }

/* Optional task divider */
.sh-task-optional-divider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 8px;
    background: #f9fafb;
    border-top: 1px solid #eef1f0;
    border-bottom: 1px solid #eef1f0;
}

.sh-task-optional-divider span:first-child {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sh-teal-dark);
}

.sh-task-optional-hint {
    font-size: 11px;
    color: var(--sh-subtle);
}

.sh-task-row-optional { opacity: 0.85; }
.sh-task-row-optional.done { opacity: 1; }

.sh-task-row.skipped { display: none; }

.sh-task-skip-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    color: var(--sh-subtle);
    padding: 2px 4px;
    margin-top: 2px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sh-task-skip-btn:hover { color: var(--sh-muted); }

.sh-task-mark-btn-opt {
    background: #f0f7f6;
    color: var(--sh-teal-dark);
    border-color: var(--sh-border);
}

.sh-task-mark-btn-opt.done {
    background: var(--sh-teal);
    color: #fff;
}

.sh-task-skipped-toggle {
    padding: 8px 16px;
    background: #f9fafb;
    border-top: 1px solid #eef1f0;
}

.sh-task-skipped-toggle button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    color: var(--sh-subtle);
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0;
}

.sh-task-skipped-toggle button:hover { color: var(--sh-muted); }

.sh-tag-optional {
    font-size: 10px;
    font-weight: 600;
    color: var(--sh-subtle);
    background: #f0f4f3;
    border: 1px solid var(--sh-border);
    border-radius: 3px;
    padding: 1px 6px;
    flex-shrink: 0;
}

.sh-task-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.sh-task-setup-link {
    font-size: 13px;
    color: var(--sh-teal-dark);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.sh-task-setup-link:hover {
    color: var(--sh-teal);
    text-decoration: underline;
}

.sh-task-mark-btn {
    font-size: 12px;
    font-weight: 600;
    color: var(--sh-teal-dark);
    background: var(--sh-teal-light);
    border: 1px solid var(--sh-teal-mid);
    border-radius: 5px;
    padding: 5px 12px;
    cursor: pointer;
    font-family: var(--sh-font);
    white-space: nowrap;
    transition: background 0.12s;
}

.sh-task-mark-btn:hover { background: #d4ede8; }

.sh-task-mark-btn.done {
    color: var(--sh-muted);
    background: #f0f4f3;
    border-color: var(--sh-border);
}

/* Resources grid */
.sh-resources-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.sh-resource-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--sh-subtle);
    margin-bottom: 8px;
}

.sh-resource-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--sh-border);
    border-radius: 6px;
    margin-bottom: 6px;
    text-decoration: none;
    transition: border-color 0.12s;
    cursor: default;
}

.sh-resource-card:last-child { margin-bottom: 0; }

.sh-resource-card:hover { border-color: var(--sh-border-dark); }

.sh-resource-icon-kb {
    width: 32px;
    height: 32px;
    background: #e8f0fe;
    border: 1.5px solid #b8ccf8;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
}

.sh-resource-icon-yt {
    width: 48px;
    height: 32px;
    background: #fee8e8;
    border: 1.5px solid #f8b8b8;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 800;
    color: #c0392b;
}

.sh-resource-text {
    font-size: 13px;
    font-weight: 500;
    color: #3050c8;
    line-height: 1.35;
}

.sh-resource-text-yt {
    font-size: 13px;
    font-weight: 500;
    color: var(--sh-ink-2);
    line-height: 1.35;
}

/* Next step button row */
.sh-next-step-row {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
}

/* ============================================================
   CELEBRATION MODAL
   ============================================================ */

.sh-celebration-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}

.sh-celebration-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.sh-celebration-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px 48px;
    max-width: 440px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    transform: scale(0.92);
    transition: transform 0.25s;
}

.sh-celebration-overlay.visible .sh-celebration-card {
    transform: scale(1);
}

.sh-celebration-emoji {
    font-size: 52px;
    margin-bottom: 16px;
}

.sh-celebration-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--sh-ink);
    margin-bottom: 10px;
}

.sh-celebration-body {
    font-size: 15px;
    color: var(--sh-ink-2);
    line-height: 1.6;
    margin-bottom: 28px;
}

/* ============================================================
   UTILITY
   ============================================================ */

.sh-fade-in {
    animation: shFadeIn 0.2s ease;
}

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

/* ============================================================
   FIELD TIPS — guided input help (setup mode only)
   ============================================================ */

.sh-field-tip {
    margin-top: 5px;
    padding: 6px 10px;
    background: var(--sh-teal-light);
    border-left: 3px solid var(--sh-teal);
    border-radius: 3px;
    font-size: 12px;
    color: var(--sh-ink-2);
    line-height: 1.5;
}

.sh-field-tip .fa {
    margin-right: 5px;
    color: var(--sh-teal);
}

/* ============================================================
   GUIDED FIELD WALKTHROUGH — setup mode only
   ============================================================ */

/* Active field highlight */
.sh-guided-active:not(.full-schedule-item) {
    border: 0 !important;
    background: var(--sh-teal-light) !important;
    border-radius: 4px;
    box-shadow: 0 0 0 2px var(--sh-teal);
    transition: background 0.2s, box-shadow 0.2s;
    margin-bottom: 20px !important;
    padding-top: 10px;
}
.sh-guided-active.sh-guided-fill-none:not(.full-schedule-item) {
    background: transparent !important;
}
.sh-guided-active.sh-guided-fill-yellow:not(.full-schedule-item) {
    background: var(--sh-yellow-light) !important;
    box-shadow: 0 0 0 2px var(--sh-yellow), 0 0 0 5px rgba(244,185,66,0.18);
}

/* Scheduled cards own their background/text color pairing and layout. Use an
   outside ring only, so the walkthrough preserves status colors and contrast. */
.full-schedule-item.sh-guided-active {
    outline: 3px solid var(--sh-teal);
    outline-offset: 2px;
}
.full-schedule-item.sh-guided-done {
    outline: 2px solid var(--sh-teal);
    outline-offset: 2px;
}

/* Completed field — dimmed + checkmark */
.sh-guided-done:not(.full-schedule-item) {
    opacity: 0.82;
}
.sh-guided-done:not(.full-schedule-item)::after {
    content: '\f00c';
    font-family: FontAwesome;
    color: var(--sh-teal);
    font-size: 11px;
    margin-left: 8px;
    vertical-align: middle;
}

/* Action targets need a lighter treatment so labels stay readable */
.sh-guided-active-action {
    position: relative;
    z-index: 2;
    box-shadow: 0 0 0 3px rgba(195 227 20 / 92), 0 4px 12px rgba(26,179,148,0.18);
    transition: box-shadow 0.2s ease;
}
.sh-guided-active-action.sh-guided-fill-light {
    background: var(--sh-teal-light) !important;
}
.sh-guided-active-action.sh-guided-fill-none {
    background: transparent !important;
}
.sh-guided-active-action.sh-guided-fill-yellow {
    background: var(--sh-yellow) !important;
    color: var(--sh-yellow-dark) !important;
    box-shadow: 0 0 0 3px rgba(244,185,66,0.38), 0 4px 12px rgba(244,185,66,0.22);
}

.sh-guided-done-action {
    box-shadow: 0 0 0 2px rgba(26,179,148,0.18);
}

/* Tabs need a stronger, broader cue than buttons so the active target reads immediately */
.sh-guided-active-tab {
    position: relative;
    z-index: 2;
}

.nav-tabs > li.sh-guided-active-tab,
.nav-pills > li.sh-guided-active-tab {
    z-index: 3;
}

.nav-tabs > li.sh-guided-active-tab > a,
.nav-tabs > li > a.sh-guided-active-tab,
.nav-pills > li.sh-guided-active-tab > a,
.nav-pills > li > a.sh-guided-active-tab {
    position: relative;
    z-index: 3;
    background-color: var(--sh-teal) !important;
    color: #fff !important;
    border: 1px solid var(--sh-teal-dark) !important;
    border-bottom-color: var(--sh-teal-dark) !important;
    border-radius: 4px 4px 0 0 !important;
    box-shadow: 0 0 0 3px rgba(26,179,148,0.34), 0 8px 18px rgba(26,179,148,0.28);
    font-weight: 700;
    transform: translateY(-2px);
}

.nav-tabs > li.sh-guided-active-tab > a.sh-guided-fill-light,
.nav-tabs > li > a.sh-guided-active-tab.sh-guided-fill-light,
.nav-pills > li.sh-guided-active-tab > a.sh-guided-fill-light,
.nav-pills > li > a.sh-guided-active-tab.sh-guided-fill-light {
    background-color: var(--sh-teal-light) !important;
    color: var(--sh-teal-dark) !important;
    border-color: var(--sh-teal) !important;
}

.nav-tabs > li.sh-guided-active-tab > a.sh-guided-fill-none,
.nav-tabs > li > a.sh-guided-active-tab.sh-guided-fill-none,
.nav-pills > li.sh-guided-active-tab > a.sh-guided-fill-none,
.nav-pills > li > a.sh-guided-active-tab.sh-guided-fill-none {
    background-color: #fff !important;
    color: var(--sh-teal-dark) !important;
    border: 2px solid var(--sh-teal) !important;
}

.nav-tabs > li.sh-guided-active-tab > a.sh-guided-fill-yellow,
.nav-tabs > li > a.sh-guided-active-tab.sh-guided-fill-yellow,
.nav-pills > li.sh-guided-active-tab > a.sh-guided-fill-yellow,
.nav-pills > li > a.sh-guided-active-tab.sh-guided-fill-yellow {
    background-color: var(--sh-yellow) !important;
    color: var(--sh-yellow-dark) !important;
    border-color: var(--sh-yellow-dark) !important;
    box-shadow: 0 0 0 3px rgba(244,185,66,0.36), 0 8px 18px rgba(244,185,66,0.24);
}

.nav-tabs > li.sh-guided-active-tab > a i,
.nav-tabs > li.sh-guided-active-tab > a .fa,
.nav-tabs > li.sh-guided-active-tab > a .glyphicon,
.nav-tabs > li > a.sh-guided-active-tab i,
.nav-tabs > li > a.sh-guided-active-tab .fa,
.nav-tabs > li > a.sh-guided-active-tab .glyphicon,
.nav-pills > li.sh-guided-active-tab > a i,
.nav-pills > li.sh-guided-active-tab > a .fa,
.nav-pills > li.sh-guided-active-tab > a .glyphicon,
.nav-pills > li > a.sh-guided-active-tab i,
.nav-pills > li > a.sh-guided-active-tab .fa,
.nav-pills > li > a.sh-guided-active-tab .glyphicon {
    color: inherit !important;
}

.sh-guided-done-tab {
    box-shadow: inset 0 -2px 0 rgba(26,179,148,0.28);
}

/* Tooltip card */
#sh-guide-tooltip {
    position: absolute;
    width: 290px;
    background: #fff;
    border: 1px solid var(--sh-teal-mid);
    border-top: 3px solid var(--sh-teal);
    border-radius: 6px;
    padding: 14px 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.13);
    z-index: 9000;
}

.sh-guide-counter {
    font-size: 11px;
    color: var(--sh-muted);
    display: block;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sh-guide-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--sh-ink);
    margin-bottom: 7px;
    line-height: 1.3;
}

.sh-optional-badge {
    font-size: 10px;
    font-weight: 400;
    background: var(--sh-teal-light);
    color: var(--sh-teal);
    border-radius: 3px;
    padding: 2px 6px;
    margin-left: 6px;
    vertical-align: middle;
    display: inline-block;
}

.sh-guide-body {
    font-size: 13px;
    color: var(--sh-ink-2);
    line-height: 1.55;
    margin-bottom: 12px;
}

/* Dot progress indicators */
.sh-guide-dots {
    display: flex;
    gap: 5px;
    margin-bottom: 12px;
}

.sh-guide-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sh-border);
    display: inline-block;
}

.sh-guide-dot.active,
.sh-guide-dot.done {
    background: var(--sh-teal);
}

/* Actions row */
.sh-guide-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sh-guide-btn-next {
    background: var(--sh-teal);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.sh-guide-btn-next:hover {
    background: var(--sh-teal-dark);
}

.sh-guide-skip-link {
    font-size: 12px;
    color: var(--sh-muted);
    text-decoration: none;
}

.sh-guide-skip-link:hover {
    color: var(--sh-ink-2);
    text-decoration: underline;
}

/* Skip note */
#sh-guide-skip-note {
    font-size: 13px;
    color: var(--sh-muted);
    margin-bottom: 12px;
    padding: 6px 0;
}

#sh-guide-skip-note a {
    color: var(--sh-teal);
}

/* Done banner */
#sh-guide-done-banner {
    background: #dff0d8;
    border: 1px solid #c3e6cb;
    color: #2d6a4f;
    border-radius: 4px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 12px;
}

#sh-guide-done-banner .fa {
    margin-right: 6px;
}

/* ============================================================
   SH-NAV RESPONSIVE — mirror Inspinia sidebar breakpoints
   ============================================================ */

/* Mini-navbar: Inspinia sets #page-wrapper margin-left to 70px.
   Collapse sh-nav to match so it doesn't overlap content. */
body.mini-navbar #wrapper > .sh-nav {
    width: 70px;
}
body.mini-navbar #wrapper > .sh-nav .sh-nav-item-label,
body.mini-navbar #wrapper > .sh-nav .sh-nav-section-label,
body.mini-navbar #wrapper > .sh-nav .sh-nav-progress,
body.mini-navbar #wrapper > .sh-nav .sh-mode-toggle span:last-child,
body.mini-navbar #wrapper > .sh-nav .sh-nav-footer {
    display: none;
}

/* Mobile (<768px): hide sh-nav by default (content sits at margin-left:0).
   When hamburger is clicked Inspinia toggles body.mini-navbar — on mobile
   that means "open", so show sh-nav as a full-width overlay. */
@media (max-width: 767px) {
    #wrapper > .sh-nav {
        display: none;
    }

    body.mini-navbar #wrapper > .sh-nav {
        display: flex;
        width: var(--sh-nav-width);
    }

    /* Restore labels/sections hidden by the desktop mini-navbar rule above */
    body.mini-navbar #wrapper > .sh-nav .sh-nav-item-label,
    body.mini-navbar #wrapper > .sh-nav .sh-nav-section-label,
    body.mini-navbar #wrapper > .sh-nav .sh-nav-progress,
    body.mini-navbar #wrapper > .sh-nav .sh-mode-toggle span:last-child,
    body.mini-navbar #wrapper > .sh-nav .sh-nav-footer {
        display: revert;
    }
}

/* ============================================================
   Landing2026B brand alignment - signup, confirm, login, activation.
   Added 2026-09-03.

   These screens are the first thing a prospect sees after the marketing
   site, and they did not look like it: the wordmark read "KUDURRU" in a
   heavy sans, the accent was INSPINIA's #1ab394, and the body font was
   Open Sans. The landing site is Cormorant Garamond over DM Sans on
   #1A2E2B with a #2DC5A2 accent, and says "Kudurru Stone".

   APPENDED AS OVERRIDES rather than edited into the rules above, on
   purpose. Content/start-here.css also dresses the Setup Guide
   (Dashboard, CoreFlow, Step), which Greg did not ask to restyle. Scoping
   to .ks-onboarding-auth and .sh-welcome-body keeps the change to the
   signup and activation screens; the guide is untouched.

   Palette values are copied from Content/Landing2026B/landing2026b.css.
   If that file's brand colors change, these need changing with them -
   there is no shared token file between the marketing site and the app.
   ============================================================ */

.ks-onboarding-auth,
.sh-welcome-body {
    --ksa-teal:    #2DC5A2;
    --ksa-anchor:  #1A2E2B;
    --ksa-ink:     #2E3F3A;
    --ksa-line:    #E6EFEC;
    --ksa-serif:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --ksa-sans:    'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    font-family: var(--ksa-sans);
}

/*  The wordmark. Serif, sentence case, full company name - the same
    lockup as .ksb-brand in the header of every marketing page.  */
.ks-onboarding-auth .ks-auth-brand,
.sh-welcome-body .sh-activation-brand {
    font-family: var(--ksa-serif);
    font-size: 27px;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
}

.ks-onboarding-auth .ks-auth-brand { color: var(--ksa-anchor); }
.ks-onboarding-auth .ks-auth-story .ks-auth-brand { color: #fff; }
.sh-welcome-body .sh-activation-brand { color: var(--ksa-anchor); }

/*  The status pages (RegSuccess / ConfirmEmail / EmailConfirmationSent /
    EmailConfirmationNeeded) show the real horizontal lockup instead of the
    text wordmark. Those pages are what a visitor looks at while switching to
    their inbox, so the mark here should be the mark on the email they are
    about to open. Login / Register deliberately keep the text wordmark - theirs
    sits on the dark anchor panel and the lockup's mark is dark slate, so it
    would need a reversed asset that does not exist.

    inline-block, not block: the <img> lives inside a <picture>, and centering
    is done by the text-align:center on .ks-auth-centered. A display:block img
    would be centered inside a shrink-wrapped inline <picture> instead, which
    is not the same thing.  */
.ks-onboarding-auth .ks-auth-logo {
    display: inline-block;
    width: 200px;
    max-width: 70%;
    height: auto;
    margin-bottom: 34px;
}

/*  Headings pick up the serif; body copy stays sans for legibility.  */
.ks-onboarding-auth .ks-auth-story h1,
.ks-onboarding-auth .ks-auth-form-panel h2,
.ks-onboarding-auth .ks-auth-centered h2,
.sh-welcome-body .sh-activation-heading h1 {
    font-family: var(--ksa-serif);
    font-weight: 600;
    letter-spacing: .005em;
}

.ks-onboarding-auth .ks-auth-story { background: var(--ksa-anchor); }

/*  Marketing CTA treatment: teal fill, near-black label. Deliberately not
    white-on-teal - #2DC5A2 is light enough that white text fails contrast.  */
.ks-onboarding-auth .ks-auth-primary,
.ks-onboarding-auth .btn-success,
.sh-welcome-body .sh-activation-choice-primary {
    background: var(--ksa-teal);
    border-color: var(--ksa-teal);
    color: #0E1A18;
    font-weight: 600;
}

.ks-onboarding-auth .ks-auth-primary:hover,
.ks-onboarding-auth .ks-auth-primary:focus,
.ks-onboarding-auth .btn-success:hover,
.ks-onboarding-auth .btn-success:focus {
    background: #24AE8E;
    border-color: #24AE8E;
    color: #0E1A18;
}

.sh-welcome-body .sh-activation-choice:hover,
.sh-welcome-body .sh-activation-choice:focus { border-color: var(--ksa-teal); }

.sh-welcome-body .sh-activation-choice-icon { color: var(--ksa-teal); }

.ks-onboarding-auth a { color: var(--ksa-anchor); }
.ks-onboarding-auth .ks-auth-footer a { border-bottom: 2px solid var(--ksa-teal); text-decoration: none; }