/* eachcanteach — Book a demo modal (progressive, one question at a time) */

.dm-modal{
  --dm-danger:#c2410c;
  --dm-soft:color-mix(in srgb, var(--accent) 8%, var(--surface));
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .dm-modal{--dm-danger:#fb923c; --accent-deep:#3fc4c9;}
}
:root[data-theme="dark"] .dm-modal{--dm-danger:#fb923c; --accent-deep:#3fc4c9;}

.dm-dialog{max-width:600px;}
.dm-modal .modal-content{
  background:var(--surface); color:var(--ink); border:0; border-radius:0;
  border-top:3px solid var(--accent);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.35);
  overflow:hidden;
}
.modal-backdrop.show{opacity:.62;}

/* header */
.dm-head{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 26px 0;}
.dm-head-title{font-family:'Jost',sans-serif; font-weight:500; font-size:1rem; color:var(--ink-strong);}
.dm-head-title span{font-family:'Manrope',sans-serif; font-weight:400; font-size:.8rem; color:var(--ink-faint); margin-left:8px;}
.dm-close{
  width:34px; height:34px; display:grid; place-items:center; flex:none;
  background:transparent; border:1px solid var(--line); color:var(--ink-soft);
  transition:border-color .15s ease, color .15s ease, transform .2s ease;
}
.dm-close:hover{border-color:var(--ink-strong); color:var(--ink-strong); transform:rotate(90deg);}

/* step bar */
.dm-steps{
  margin:14px 26px 0; display:flex; gap:6px; border-bottom:1px solid var(--line);
}
.dm-tab{
  flex:1; display:flex; align-items:center; gap:8px; position:relative;
  background:none; border:0; padding:4px 0 13px; text-align:left;
  font-family:'Manrope',sans-serif; font-size:.78rem; font-weight:500; color:var(--ink-faint);
  transition:color .25s ease;
}
.dm-tab:hover{color:var(--ink-strong);}
.dm-tab:focus-visible{outline:none; color:var(--ink-strong);}
.dm-tab:focus-visible .dm-step-num{box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);}
.dm-tab::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.16,.9,.24,1);
}
.dm-tab.is-current, .dm-tab.is-done{color:var(--ink-strong);}
.dm-tab.is-current::after{transform:scaleX(1);}
.dm-tab.is-done::after{transform:scaleX(1); opacity:.35;}
.dm-step-num{
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex:none;
  border:1px solid var(--line); font-size:.72rem; font-weight:600;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.dm-tab.is-current .dm-step-num{border-color:var(--accent); color:var(--accent-deep);}
.dm-tab.is-done .dm-step-num{background:var(--accent); border-color:var(--accent); color:#fff; font-size:0;}
.dm-tab.is-done .dm-step-num::before{content:"✓"; font-size:.72rem;}

/* body & panes */
.dm-body{padding:20px 26px 22px; max-height:calc(100vh - 150px); overflow-y:auto; overscroll-behavior:contain;}
.dm-modal .dm-pane{display:none; padding:0;}
.dm-modal .dm-pane.is-active{display:block; animation:dmPaneIn .38s cubic-bezier(.16,.9,.24,1);}
.dm-pane.is-back{animation-name:dmPaneBack;}
@keyframes dmPaneIn{from{opacity:0; transform:translateX(18px);} to{opacity:1; transform:none;}}
@keyframes dmPaneBack{from{opacity:0; transform:translateX(-18px);} to{opacity:1; transform:none;}}

.dm-title{
  font-family:'Jost',sans-serif; font-weight:500; font-size:clamp(1.4rem,3.2vw,1.65rem);
  line-height:1.15; color:var(--ink-strong); margin:0 0 6px; text-transform:none;
}
.dm-sub{font-size:.92rem; color:var(--ink-soft); margin:0 0 16px;}
.dm-fit strong{color:var(--ink-strong); font-weight:600;}

/* questions */
.dm-q{padding:16px 0 18px; border-top:1px solid var(--line);}
.dm-q:first-of-type{border-top:0; padding-top:4px;}
.dm-q.is-entering{animation:dmQIn .42s cubic-bezier(.16,.9,.24,1);}
@keyframes dmQIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.dm-q-label{font-size:.92rem; font-weight:600; color:var(--ink-strong); margin:0 0 12px;}
.dm-q-label em, .dm-label em, .dm-note summary em{font-style:normal; font-weight:400; color:var(--ink-faint); font-size:.82rem; margin-left:4px;}
.dm-pane[data-pane="time"] .dm-q-label{margin-top:16px;}
.dm-pane[data-pane="time"] .dm-sub + .dm-q-label{margin-top:0;}

/* an answered question folds into one line */
.dm-q.is-answered{padding:12px 0;}
.dm-q.is-answered .dm-q-label{font-weight:400; font-size:.8rem; color:var(--ink-faint); margin-bottom:2px;}
.dm-q.is-answered .dm-chips{display:none;}
.dm-recap{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.dm-recap-val{font-weight:600; color:var(--ink-strong); font-size:.97rem;}
.dm-edit{
  background:none; border:0; padding:2px 0; font-size:.82rem; font-weight:500;
  color:var(--accent-deep); text-decoration:underline; text-underline-offset:3px;
}
.dm-edit:hover{color:var(--ink-strong);}

/* chips */
.dm-chips{display:flex; flex-wrap:wrap; gap:8px;}
.dm-chip{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
  padding:10px 16px; border-radius:999px;
  font-family:'Manrope',sans-serif; font-size:.87rem; font-weight:500; line-height:1.2;
  transition:border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}
.dm-chip:hover{border-color:var(--accent); transform:translateY(-1px);}
.dm-chip:focus-visible{outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);}
.dm-chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff;}
.dm-chip small{font-size:.76rem; font-weight:400; opacity:.75; margin-left:6px;}
.dm-chip-tall{text-align:left;}
.dm-tick{
  width:16px; height:16px; border:1.4px solid currentColor; border-radius:4px; flex:none; opacity:.55;
  position:relative; transition:opacity .15s ease;
}
.dm-chip[aria-pressed="true"] .dm-tick{opacity:1; background:#fff; border-color:#fff;}
.dm-chip[aria-pressed="true"] .dm-tick::after{
  content:""; position:absolute; left:4.5px; top:1.5px; width:4px; height:8px;
  border:solid var(--accent); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.dm-chips.has-error .dm-chip{border-color:var(--dm-danger);}

/* optional note */
.dm-note{margin-top:16px;}
.dm-note summary{font-size:.86rem; font-weight:500; color:var(--accent-deep); list-style:none; width:max-content;}
.dm-note summary::-webkit-details-marker{display:none;}
.dm-note summary::before{content:"+"; display:inline-block; width:14px; font-weight:600;}
.dm-note[open] summary::before{content:"–";}
.dm-note textarea{margin-top:10px; resize:vertical; min-height:64px;}

/* fields */
.dm-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px;}
.dm-field{display:flex; flex-direction:column; gap:6px; min-width:0;}
.dm-field[data-field="name"], .dm-field[data-field="email"]{grid-column:span 1;}
.dm-label{font-size:.85rem; font-weight:600; color:var(--ink-strong); margin:0;}
.dm-input{
  width:100%; height:42px; padding:0 13px;
  background:var(--surface); color:var(--ink-strong);
  border:1px solid var(--line); border-radius:0;
  font-family:'Manrope',sans-serif; font-size:.95rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
textarea.dm-input{height:auto; padding:10px 13px;}
.dm-input::placeholder{color:var(--ink-faint); opacity:.7;}
.dm-input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);}
.dm-phone{display:flex;}
.dm-prefix{
  display:grid; place-items:center; padding:0 11px; flex:none;
  border:1px solid var(--line); border-right:0; background:var(--paper-2);
  font-size:.9rem; font-weight:500; color:var(--ink-soft);
}
.dm-error{display:none; font-size:.78rem; font-weight:500; color:var(--dm-danger);}
.dm-field.has-error .dm-input, .dm-field.has-error .dm-prefix{border-color:var(--dm-danger);}
.dm-field.has-error .dm-error{display:block;}
.dm-check{
  display:flex; align-items:center; gap:10px; align-self:end; height:42px; margin:0;
  font-size:.88rem; font-weight:500; color:var(--ink-strong); cursor:pointer;
}
.dm-check input{width:18px; height:18px; margin:0; accent-color:var(--accent);}
.dm-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.dm-alert{
  display:none; margin:0 0 16px; padding:11px 14px; font-size:.88rem; color:var(--ink-strong);
  background:color-mix(in srgb, var(--dm-danger) 9%, var(--surface)); border-left:3px solid var(--dm-danger);
}
.dm-alert.is-visible{display:block; animation:dmQIn .25s ease;}
#dmAlert2{margin:18px 0 0;}

/* actions */
.dm-actions{display:flex; align-items:center; gap:16px; margin-top:18px; flex-wrap:wrap;}
.dm-pane[data-pane="details"] .dm-actions, .dm-pane[data-pane="time"] .dm-actions{justify-content:space-between;}
.dm-actions-center{justify-content:center;}
.dm-actions .btn{min-width:170px; padding:13px 26px;}
.dm-actions .btn:disabled{opacity:.45; pointer-events:none;}
.dm-actions-hint{font-size:.8rem; color:var(--ink-faint); transition:opacity .2s ease;}
.dm-next:not(:disabled) + .dm-actions-hint{opacity:0;}
.dm-back{background:none; border:0; padding:6px 0; font-size:.88rem; font-weight:500; color:var(--ink-soft);}
.dm-back:hover{color:var(--ink-strong);}
.dm-busy{display:none; align-items:center; justify-content:center; gap:10px;}
.is-busy .dm-idle{display:none;}
.is-busy .dm-busy{display:inline-flex;}
.dm-spin{
  width:15px; height:15px; border-radius:50%; display:inline-block;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:dmSpin .7s linear infinite;
}
@keyframes dmSpin{to{transform:rotate(360deg);}}
.dm-fine{margin:14px 0 0; font-size:.78rem; color:var(--ink-faint);}

/* step 3 */
.dm-range{display:flex; gap:12px; margin-top:12px;}
.dm-range[hidden]{display:none;}
.dm-range label{flex:1; display:flex; flex-direction:column; gap:5px; font-size:.8rem; font-weight:500; color:var(--ink-soft);}
.dm-range-text{min-height:1.2em; margin-top:6px; font-size:.84rem; font-weight:500; color:var(--accent-deep);}

/* done */
.dm-done{text-align:center; padding:6px 0 2px;}
.dm-done-mark{display:block; width:62px; height:62px; margin:0 auto 16px;}
.dm-done-mark svg{width:100%; height:100%; fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}
.dm-done-mark circle{stroke-dasharray:151; stroke-dashoffset:151; animation:dmDraw .6s ease forwards;}
.dm-done-mark path{stroke-dasharray:36; stroke-dashoffset:36; animation:dmDraw .35s .5s ease forwards;}
@keyframes dmDraw{to{stroke-dashoffset:0;}}
.dm-done .dm-sub{max-width:46ch; margin:0 auto 22px;}
.dm-summary{margin:0 auto; max-width:420px; text-align:left; border-top:1px solid var(--line);}
.dm-summary div{display:flex; justify-content:space-between; gap:20px; padding:10px 0; border-bottom:1px solid var(--line); font-size:.9rem;}
.dm-summary dt{font-weight:400; color:var(--ink-faint);}
.dm-summary dd{margin:0; font-weight:600; color:var(--ink-strong); text-align:right;}

/* small screens: full-height sheet */
@media (max-width:575.98px){
  .dm-modal .modal-dialog{margin:0; min-height:100%; max-width:none; align-items:flex-end;}
  .dm-modal .modal-content{height:100dvh; min-height:0; display:flex; flex-direction:column;}
  .dm-modal .dm-head, .dm-modal .dm-steps{flex:none;}
  .dm-modal .dm-body{flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;}
  .dm-head{padding:16px 18px 0;}
  .dm-head-title span{display:none;}
  .dm-steps{margin:14px 18px 0;}
  .dm-tab{font-size:.72rem; gap:6px;}
  .dm-body{padding:20px 18px 24px; max-height:none;}
  .dm-input{font-size:16px;}
  .dm-grid{grid-template-columns:1fr;}
  .dm-check{height:auto; margin-top:4px;}
  .dm-actions .btn{flex:1;}
  .dm-pane[data-pane="details"] .dm-actions, .dm-pane[data-pane="time"] .dm-actions{flex-direction:row-reverse;}
}

@media (prefers-reduced-motion:reduce){
  .dm-pane.is-active, .dm-q.is-entering, .dm-alert.is-visible{animation:none;}
  .dm-done-mark circle, .dm-done-mark path{animation:none; stroke-dashoffset:0;}
  .dm-tab::after{transition:none;}
}
.dm-range-text:empty{display:none;}
/* narrow phones: "Business · Details · Time" keeps each tab on one line */
@media (max-width:400px){
  .dm-your{display:none;}
  .dm-tab > span:last-child{text-transform:capitalize; white-space:nowrap;}
}