/* =====================================================
   Kumlehn-Frank – sign-up wizards in the 2026 look.
   Loaded AFTER styles.css and home.css on hosting-signup.html
   and design-signup.html. The wizards' markup and JS are
   unchanged; this only re-skins them.
   ===================================================== */

body.k-wizard {
  --cream:       #FBFAFF;
  --cream-dark:  #F3F0FD;
  --black:       #17142B;
  --ink:         #17142B;
  --gray:        #4A4663;
  --gray-light:  #5E5A75;
  --border:      #E6E1F5;
  --purple:      #5B33E0;
  --purple-dark: #4426B8;
  --purple-soft: #EFEAFF;
  --lime:        #D6F24E;
  --radius:      26px;
  --radius-sm:   14px;
  background: var(--k-paper);
}

.k-wizard .k-page-hero { padding: 56px 0 8px; text-align: center; }
.k-wizard .k-page-hero p { margin-left: auto; margin-right: auto; }

.k-wizard .wizard-section { background: transparent; padding: 32px 0 96px; }
.k-wizard .wizard-section .container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.k-wizard .wizard-shell { max-width: 720px; border-radius: 26px; box-shadow: var(--k-shadow); padding: 44px; }

.k-wizard .wizard-progress-label { color: var(--k-brand); }
.k-wizard .wizard-progress-track { height: 8px; background: var(--k-lav); }
.k-wizard .wizard-progress-fill { background: linear-gradient(90deg, var(--k-brand), #8A6BFF); }

.k-wizard .wizard-step h2 { font-family: var(--k-head); font-size: 28px; letter-spacing: -.025em; line-height: 1.15; }
.k-wizard .wizard-step .wizard-sub { font-size: 16px; }

/* buttons */
.k-wizard .btn { border-radius: 14px; padding: 14px 26px; font-weight: 600; min-height: 48px; }
.k-wizard .btn-primary { box-shadow: 0 10px 24px rgba(91, 51, 224, .25); }
.k-wizard .btn-outline { border: 1.5px solid #DCD5F2; background: #fff; }
.k-wizard .btn-outline:hover { background: #fff; color: var(--k-text); border-color: var(--k-brand); }
.k-wizard .wizard-nav .btn-back { min-height: 48px; color: var(--k-text-3); }
.k-wizard .wizard-nav .btn-back:hover { color: var(--k-brand); }

/* choice + domain cards */
.k-wizard .choice-card-inner,
.k-wizard .tld-card-inner { border-width: 1.5px; border-radius: 18px; background: #fff; }
.k-wizard .choice-card-inner .choice-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--k-lav); }
.k-wizard .choice-card-inner strong { font-family: var(--k-head); font-size: 18px; }
.k-wizard .choice-card:hover .choice-card-inner,
.k-wizard .tld-card:hover .tld-card-inner { border-color: #B9A6FF; }
.k-wizard .choice-card input:checked + .choice-card-inner,
.k-wizard .tld-card input:checked + .tld-card-inner,
.k-wizard .ext-custom-card input:checked + .ext-custom-inner { border-color: var(--k-brand); background: var(--k-lav-2); box-shadow: 0 0 0 3px rgba(91, 51, 224, .12); }
.k-wizard .choice-card input:checked + .choice-card-inner .choice-icon { background: var(--k-zest); }
.k-wizard .choice-card input:focus-visible + .choice-card-inner,
.k-wizard .tld-card input:focus-visible + .tld-card-inner { outline: 3px solid var(--k-zest); outline-offset: 2px; }
.k-wizard .tld-card-inner .tld-ext { font-family: var(--k-mono); color: var(--k-brand-ink); }

/* fields */
.k-wizard .form-group label { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.k-wizard .form-group input,
.k-wizard .form-group textarea,
.k-wizard .form-group select { border-width: 1.5px; border-color: #DCD5F2; font-size: 16px; }
.k-wizard .form-group input:focus,
.k-wizard .form-group textarea:focus,
.k-wizard .form-group select:focus { box-shadow: 0 0 0 4px rgba(91, 51, 224, .14); }
.k-wizard .form-note { font-size: 13px; }

/* summary, contract, signature, add-on */
.k-wizard .summary-table tr.summary-total td { font-family: var(--k-head); font-size: 20px; }
.k-wizard .contract-box { border-radius: 18px; }
.k-wizard .sig-canvas { border-radius: 16px; }
.k-wizard .addon-box { border-radius: 18px; }
.k-wizard .success-icon { background: var(--k-zest); color: var(--k-night); border-radius: 22px; }
.k-wizard .wizard-success h2, .k-wizard .wizard-success h3 { font-family: var(--k-head); letter-spacing: -.02em; }

/* --- Legal pages (terms, privacy, refunds) --- */
.k-wizard .legal-section { background: transparent; padding: 24px 0 96px; }
.k-wizard .legal-section .container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.k-wizard .legal-updated { margin-bottom: 24px; }
.k-wizard .legal-toc { margin-bottom: 28px; }
.k-wizard .legal-toc a { border-radius: 999px; padding: 8px 16px; font-size: 14px; background: var(--k-lav); color: #3A2399; }
.k-wizard .legal-toc a:hover { background: var(--k-zest); color: var(--k-night); }
.k-wizard .legal-body { border-radius: 26px; box-shadow: var(--k-shadow); }
.k-wizard .legal-body h2 { font-family: var(--k-head); font-size: 22px; letter-spacing: -.02em; }
.k-wizard .legal-body ul { list-style: disc; }
.k-wizard .legal-body ol { list-style: decimal; padding-left: 22px; }

/* --- Client portal --- */
.k-wizard .portal-head h1 { font-family: var(--k-head); font-size: 32px; letter-spacing: -.025em; }
.k-wizard .portal-tab { font-size: 15px; font-weight: 600; border-radius: 10px 10px 0 0; }
.k-wizard .portal-tab:hover { color: var(--k-brand); }
.k-wizard .portal-card { border-radius: 22px; box-shadow: 0 10px 30px rgba(40, 22, 110, .06); }
.k-wizard .portal-gate .form-title { font-family: var(--k-head); }
.k-wizard .admin-btn-sm { border-radius: 12px; min-height: 40px; }

/* --- Contract signing / owner signature setup --- */
.k-wizard .setup-wrap { margin: 48px auto 96px; }
.k-wizard .setup-card { border-radius: 26px; box-shadow: var(--k-shadow); }
.k-wizard .form-title { font-family: var(--k-head); letter-spacing: -.02em; }
.k-nav-slim .k-nav-inner { justify-content: flex-start; }

@media (max-width: 720px) {
  .k-wizard .legal-section .container { padding: 0 16px; }
  .k-wizard .setup-card { padding: 26px 20px; }
  .k-wizard .k-page-hero { padding: 36px 0 0; }
  .k-wizard .wizard-section { padding: 20px 0 64px; }
  .k-wizard .wizard-section .container { padding: 0 16px; }
  .k-wizard .wizard-shell { padding: 26px 20px; }
  .k-wizard .wizard-step h2 { font-size: 23px; }
}