body{font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;background:#f5f5f5;color:#111}
  .wrap{max-width:860px;margin:40px auto;padding:0 16px}
  .card{background:#fff;border-radius:8px;box-shadow:0 2px 18px rgba(0,0,0,.07);overflow:hidden}
  .head{background: linear-gradient(180deg, #44a8ee, #2f90d6);color:#fff;padding:18px 18px}
  .head small{display:block;opacity:.85;letter-spacing:.08em}
  .head h1{margin:4px 0 0;font-size:22px}

  .steps{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:0;
    border-bottom:1px solid #eee;
    background:#fff;
    padding:14px 12px 16px;
  }

  .step{
    flex:1;
    position:relative;
    text-align:center;
    font-size:13px;
    color:#666;
  }

  .step strong{
    display:block;
    color:#111;
    font-size:12px;
    margin-top:6px;
    font-weight:600;
  }
  
  .step-link{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    text-decoration:none;
    color:inherit;
    cursor:pointer;
    position:relative;
    z-index:3;
  }
  .step-link:hover strong{ text-decoration:underline; }
  .step-link.disabled{}
  .step::after{ pointer-events:none; }
.dot{
    width:28px;
    height:28px;
    border-radius:8px;
    margin:0 auto;
    background:#e9e9e9;
    color:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    position:relative;
    z-index:2;
  }

  .step:not(:last-child)::after{
    content:"";
    position:absolute;
    top:14px;
    left:50%;
    width:100%;
    height:3px;
    transform:translateX(14px);
    border-radius:8px;
    background:#d7d7d7;
    z-index:1;
  }

  .active .dot{
    background: linear-gradient(180deg, #44a8ee, #2f90d6);
    color:#fff;
  }

  .done .dot{
    background: linear-gradient(180deg, #44a8ee, #2f90d6);
    color:#fff;
  }

  .done:not(:last-child)::after{
    background: linear-gradient(180deg, #44a8ee, #2f90d6);
  }

  .active:not(.done):not(:last-child)::after{
    background:#d7d7d7;
  }

  .body{padding:18px}
  .row{display:flex;gap:12px;flex-wrap:wrap}
  .col{flex:1;min-width:240px}
  label{display:block;font-size:13px;color:#444;margin:0 0 6px}
  input[type=text],input[type=email],input[type=date],select,textarea{
    width:100%;box-sizing:border-box;padding:12px 12px;border:1px solid #ddd;border-radius:8px;font-size:16px;outline:none
  }
  textarea{min-height:110px;resize:vertical}
  .btnrow{display:flex;gap:10px;justify-content:space-between;margin-top:14px}
  .btn{appearance:none;border:0;border-radius:8px;padding:12px 14px;font-size:15px;font-weight:700;cursor:pointer}
  .btn-primary{background: linear-gradient(180deg, #44a8ee, #2f90d6);color:#fff}
  .btn-ghost{background:#eee;color:#111}
  .msg{margin: 12px 0px 12px;padding:12px;border-radius:8px}
  .err{background:#fff1f1;border:1px solid #ffd1d1}
  .pill{display:inline-block;padding:6px 10px;border-radius:8px;background:#f3f3f3;border:1px solid #e7e7e7;font-size:13px;min-width:97%;}
  .muted{color:#666;font-size:13px;margin-top:8px}

  .sched-toggle{
    display:flex;
    width:100%;
    max-width:560px;
    border:1px solid #1a5f91;
    border-radius:8px;
    overflow:hidden;
    background:#fff;
    margin:10px 0 12px;
  }
  .sched-toggle button{
    flex:1;
    border:0;
    background:#fff;
    padding:12px 12px;
    font-weight:800;
    cursor:pointer;
    color:#222;
  }
  .sched-toggle button + button{ border-left:1px solid #1a5f91; }
  .sched-toggle button[aria-selected="true"]{ background:#e9e6f4; }

  .sched-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:10px 0 8px}
  .sched-meta .month{font-weight:800;color:#111}
  .sched-meta .tz{font-size:13px;color:#666;display:flex;gap:8px;align-items:center}
  .sched-days{display:flex;gap:10px;overflow:auto;padding:8px 2px 10px}
  .daybtn{
    min-width:56px;
    border:1px solid #ddd;
    border-radius:8px;
    background:#fff;
    cursor:pointer;
    padding:10px 10px;
    text-align:center;
    user-select:none;
  }
  .daybtn .dow{font-size:12px;color:#777}
  .daybtn .dom{font-size:16px;font-weight:900;color:#111;margin-top:2px}
  .daybtn[aria-selected="true"] {
    background: linear-gradient(180deg, #44a8ee, #2f90d6);
    color: #fff;
    border-color: #1a5f91;
   }
  .daybtn[aria-selected="true"] .dow,.daybtn[aria-selected="true"] .dom{color:#fff}

  .daybtn:disabled{
    opacity:.45;
    cursor:not-allowed;
    background:#f3f3f3;
  }
  .daybtn:disabled .dow,.daybtn:disabled .dom{color:#777}

  .slots{margin-top:6px}
  .slot{
    border:1px solid #ddd;
    border-radius:8px;
    padding:14px 12px;
    display:flex;
    gap:10px;
    align-items:flex-start;
    cursor:pointer;
    margin-top:10px;
    background:#fff;
  }
  .slot[aria-selected="true"] {
    border-color: #1a5f91;
  }
  .slot input{margin-top:3px}
  .slot .title{font-weight:800}
  .slot .sub{color:#666;font-size:13px;margin-top:2px}

  .slot.taken{opacity:.55;cursor:not-allowed}
  .slot.taken input{pointer-events:none}
  .tag{display:inline-block;margin-left:8px;padding:2px 6px;border-radius:6px;background:#eee;border:1px solid #ddd;font-size:11px;font-weight:800;color:#555;vertical-align:middle}

  .footnotes{max-width:860px;margin:12px auto 40px;padding:0 16px;color:#666;font-size:13px;line-height:1.45}
  .footnotes strong {
      color: #111;
      font-weight: 500;
  }

  @media (max-width:560px){
    .steps{padding:12px 10px 14px}
    .step strong{font-size:11px}
    .step:not(:last-child)::after{height:3px;top:14px}
  }
  
  .notes-form {
      margin-top: 15px;
  }
/* Review table */
.review-table{
  width:100%;
  border-collapse:collapse;
  margin-top:8px;
}
.review-table th{
  text-align:left;
  font-weight:600;
  width: 100px;
  padding:4px 12px 4px 0;
  white-space:nowrap;
  vertical-align:top;
}
.review-table td{
  padding:4px 0;
  vertical-align:top;
  text-align: left;
}

.char-counter{
  margin-top:6px;
  font-size:13px;
  color:#666;
  text-align:right;
}