/* Contact: 3-step appliance check that ends in the callback form.
   Everything is scoped to .dx; id+class beats the old #contact !important rules in style.css */
#contact.dx{position:relative;padding:96px 0!important;color:#1E1838!important;background:
  radial-gradient(55% 45% at 85% 10%,rgba(124,59,255,.12),transparent 70%),
  radial-gradient(40% 35% at 5% 90%,rgba(251,191,36,.10),transparent 70%),
  linear-gradient(170deg,#F6F4FC,#E9E4FA)!important}
.dx button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-transform:none;letter-spacing:normal}
.dx img{display:block;max-width:100%}
.dx__wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.dx__head{text-align:center;margin-bottom:36px}
.dx .dx__tag{display:inline-block;font-size:13px;font-weight:600;padding:6px 16px;border-radius:999px;background:rgba(124,59,255,.1);color:#6D28D9;border:1px solid rgba(124,59,255,.2)}
.dx .dx__title{margin:14px 0 0;color:#1E1838;font:700 clamp(28px,3.4vw,44px)/1.1 'Unbounded',sans-serif;letter-spacing:-.035em}
.dx__title em{font-style:normal;color:#6D28D9}
.dx .dx__sub{margin:10px auto 0;max-width:60ch;color:#5E5878;font-size:17px}
.dx .dx__call{margin:22px 0 0;text-align:center;font-size:17px;color:#5E5878}
.dx .dx__call a{color:#6D28D9!important;font-weight:700;text-decoration:none;white-space:nowrap}
.dx .dx__call a:hover{text-decoration:underline;text-underline-offset:3px}

.dx__panel{background:rgba(255,255,255,.8);border:1px solid rgba(124,59,255,.1);border-radius:28px;box-shadow:0 20px 60px rgba(30,24,56,.10);overflow:hidden}

/* progress: finished steps are clickable to go back */
.dx__steps{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid rgba(30,24,56,.07)}
.dx .dx__step{display:flex;align-items:center;gap:10px;padding:18px 22px;font-size:14px;font-weight:600;color:#9A94B2;text-align:left;cursor:default;transition:color .3s,background .2s}
.dx__step i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;background:#EFEBFA;color:#9A94B2;transition:all .3s;flex-shrink:0}
.dx .dx__step.is-on{color:#1E1838}.dx__step.is-on i{background:#7C3BFF;color:#fff}
.dx__step.is-done i{background:#34D399;color:#fff}
.dx .dx__step.is-done{cursor:pointer}.dx .dx__step.is-done:hover{background:rgba(124,59,255,.05)}
.dx__step.is-done:hover i{box-shadow:0 0 0 4px rgba(52,211,153,.2)}
.dx__step div{min-width:0}
.dx__step small{display:block;font-weight:500;color:#7C3BFF;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx__bar{height:3px;background:#EFEBFA}.dx__bar b{display:block;height:100%;width:33%;background:linear-gradient(90deg,#7C3BFF,#A78BFA);transition:width .45s cubic-bezier(.2,.8,.2,1)}

.dx__body{padding:30px;min-height:420px;position:relative}
.dx__screen{display:none;animation:dx-in .35s cubic-bezier(.2,.8,.2,1)}
.dx__screen.is-on{display:block}
@keyframes dx-in{from{opacity:0;transform:translateY(10px)}}
.dx__q{font:700 20px/1.25 'Unbounded',sans-serif;letter-spacing:-.02em;margin-bottom:20px}
.dx__nav{display:flex;justify-content:space-between;gap:10px}
.dx .dx__back,.dx .dx__reset{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#6D28D9;padding:9px 14px 9px 10px;border-radius:12px;background:rgba(241,236,255,.8);border:1px solid rgba(124,59,255,.16);margin-bottom:16px;transition:all .25s;box-shadow:0 1px 3px rgba(30,24,56,.06),inset 0 1px 0 rgba(255,255,255,.9)}
.dx .dx__back:hover{background:#E6DEFF}
.dx__back svg,.dx__reset svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.dx .dx__reset{background:transparent;border-color:transparent;color:#5E5878}.dx .dx__reset:hover{background:#F1F0F5}

/* step 1: appliances */
.dx__apps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.dx .dx-app{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 10px 14px;border-radius:18px;background:rgba(255,255,255,.75);border:1px solid rgba(124,59,255,.10);box-shadow:0 4px 16px rgba(30,24,56,.05),inset 0 1px 0 #fff;transition:all .3s cubic-bezier(.25,.46,.45,.94)}
.dx-app img{height:88px;width:auto;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(30,24,56,.14));transition:transform .3s}
.dx-app span{font-weight:600;font-size:15px}
.dx .dx-app:hover{background:#fff;border-color:#7C3BFF;box-shadow:0 10px 26px rgba(124,59,255,.14);transform:translateY(-2px)}
.dx-app:hover img{transform:scale(1.06)}
.dx__skip{margin-top:18px;text-align:center;font-size:15px;color:#5E5878}
.dx .dx__skip button{color:#6D28D9;font-weight:700;padding:4px 6px;border-radius:8px}
.dx .dx__skip button:hover{background:#F1ECFF}

/* step 2: symptoms */
.dx__sym{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.dx .dx-opt{display:flex;align-items:center;gap:14px;text-align:left;padding:18px 20px;border-radius:16px;background:rgba(255,255,255,.75);border:1px solid rgba(124,59,255,.10);box-shadow:0 4px 16px rgba(30,24,56,.05),inset 0 1px 0 #fff;font-weight:600;transition:all .3s cubic-bezier(.25,.46,.45,.94)}
.dx .dx-opt:hover{background:#fff;border-color:#7C3BFF;box-shadow:0 10px 26px rgba(124,59,255,.12)}
.dx-opt b{width:34px;height:34px;flex-shrink:0;border-radius:10px;background:#F1ECFF;color:#6D28D9;display:grid;place-items:center;font-size:16px}
.dx-opt:after{content:'›';margin-left:auto;font-size:22px;color:#B7B0CF}

/* step 3: result + callback form */
.dx__res{display:grid;grid-template-columns:1.25fr 1fr;gap:26px}
.dx-pick{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.dx-pick img{height:64px;width:auto}
.dx-pick b{display:block;font:700 18px/1.25 'Unbounded',sans-serif;letter-spacing:-.02em}
.dx-pick span{font-size:14px;color:#5E5878}
.dx-causes{display:flex;flex-direction:column;gap:10px}
.dx-cause{padding:14px 16px;border-radius:14px;background:#fff;border:1px solid rgba(30,24,56,.07)}
.dx-cause__top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:700}
.dx-lvl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:6px;flex-shrink:0}
.dx-lvl-1{background:#FEF3C7;color:#92400E}.dx-lvl-2{background:#EDE9FE;color:#5B21B6}.dx-lvl-3{background:#F1F0F5;color:#5E5878}
.dx .dx-cause p{margin:4px 0 0;font-size:14px;color:#5E5878;line-height:1.5}
.dx-tip{margin-top:14px;display:flex;gap:12px;padding:14px 16px;border-radius:14px;background:#ECFDF5;border:1px solid #A7F3D0;font-size:14px;color:#065F46}
.dx-tip b{display:block;color:#064E3B}
.dx-book{border-radius:22px;padding:24px;background:#1E1838;color:#F4F2FF;display:flex;flex-direction:column;gap:12px;align-self:start}
.dx .dx-book h3{margin:0;color:#fff;font:700 19px/1.25 'Unbounded',sans-serif;letter-spacing:-.02em}
.dx .dx-book p{margin:0;font-size:14px;color:#C9C4DE}
.dx .dx-book input{width:100%;margin:0;padding:13px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14)!important;background:rgba(255,255,255,.07)!important;color:#fff!important;font:inherit;font-size:16px;box-shadow:none}
.dx .dx-book input:focus{outline:none;border-color:#A78BFA!important;box-shadow:0 0 0 3px rgba(167,139,250,.2)!important}
.dx-book input::placeholder{color:#8F89AA}
.dx-summary{font-size:13px;color:#C4B5FD;background:rgba(167,139,250,.12);padding:10px 12px;border-radius:10px}
.dx .dx-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 18px;border-radius:12px!important;font-weight:700;font-size:16px;text-decoration:none;transition:all .35s cubic-bezier(.25,.46,.45,.94)}
.dx .dx-btn:hover{transform:translateY(-1px)}
.dx .dx-btn:active{transform:translateY(0) scale(.98)}
/* liquid glass buttons, same as the hero */
.dx .dx-btn--amber{background:#FBBF24;color:#14161C;box-shadow:0 2px 8px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.3)}
.dx .dx-btn--amber:hover{background:#F59E0B;box-shadow:0 4px 16px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.2)}
.dx .dx-btn--amber:disabled{opacity:.7;cursor:default}
.dx .dx-btn--ghost{background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(255,255,255,.2);color:#fff!important;box-shadow:0 2px 8px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.15)}
.dx .dx-btn--ghost:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35)}
.dx-or{text-align:center;font-size:12px;color:#8F89AA}
.dx-ok{display:none;padding:16px;border-radius:14px;background:rgba(52,211,153,.14);color:#A7F3D0;font-weight:600;text-align:center}
.dx-err{display:none;font-size:13px;color:#FCA5A5;text-align:center}
.dx-book.is-sent .dx-ok{display:block}
.dx-book.is-sent input,.dx-book.is-sent .dx-btn--amber{display:none}
.dx.is-other .dx-causes,.dx.is-other .dx-tip{display:none}
.dx .dx__foot{margin:18px 0 0;text-align:center;font-size:13px;color:#7B7596}

@media (max-width:860px){
  .dx__apps{grid-template-columns:repeat(3,1fr)}
  .dx__res{grid-template-columns:1fr}
}
@media (max-width:560px){
  #contact.dx{padding:64px 0!important}
  .dx__wrap{padding:0 16px}
  .dx__body{padding:20px 16px}
  .dx .dx__step{padding:14px 10px;font-size:12px;gap:8px}.dx__step small,.dx-wide{display:none}
  .dx__apps{grid-template-columns:repeat(2,1fr);gap:10px}
  .dx-app img{height:70px}
  .dx__sym{grid-template-columns:1fr}
  .dx__q{font-size:17px}
}