/* ===========================================================
   Dr. Fixit — Warranty Registration
   App layer on top of drfixit-base.css. Every colour resolves
   through the brand tokens declared there.
   =========================================================== */

body{ font-family:var(--bs-body-font-family); -webkit-font-smoothing:antialiased; }
.bi{ line-height:1; }

/* ===========================================================
   1. BAR — lockup, crumb and the helpdesk pill
   =========================================================== */
.wz-help{ gap:.7rem; padding:.55rem 1rem .55rem .55rem; }
.wz-help-ic{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:var(--df-yellow); color:var(--df-blue-ink); font-size:.95rem;
}
.wz-help-txt{ display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.wz-help-txt small{ font-size:.58rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--df-muted); }
.wz-help-txt b{ font-size:.86rem; font-weight:800; letter-spacing:.01em; color:var(--df-blue); font-variant-numeric:tabular-nums; }
.wz-help-txt em{ font-style:normal; font-weight:600; color:var(--df-muted); }
@media (max-width:575.98px){ .wz-help{ padding:.45rem; } .wz-help .wz-help-ic{ display:grid; } .wz-help-txt{ display:none !important; } }

/* ===========================================================
   2. VIEWS — landing and wizard share the one sheet
   =========================================================== */
.wz-view[hidden]{ display:none !important; }
.wz-view{ animation:wz-in .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes wz-in{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* ===========================================================
   3. LANDING — headline, feats and the protected-home art
   =========================================================== */
.wz-hero{ display:grid; gap:clamp(2rem,4vw,56px); align-items:center; }
@media (min-width:992px){ .wz-hero{ grid-template-columns:1.05fr .95fr; } }
.wz-hero .df-hero-h1 .a{ font-size:clamp(2.3rem,5.6vw,58px); }
.wz-hero .df-hero-h1 .b{ font-size:clamp(1.7rem,4vw,42px); }
.wz-hero .df-feat-ic{ color:var(--df-blue); font-size:1.5rem; }
.wz-hero-cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:34px; }
.wz-hero-cta .btn{ display:inline-flex; align-items:center; gap:.6rem; }

/* The stage: a lit home under the Dr. Fixit umbrella, in the rain. */
.wz-stage{ position:relative; width:100%; max-width:520px; justify-self:center; }
.wz-art{ display:block; width:100%; height:auto; overflow:visible; }
.wz-art .rain line{ animation:wz-fall 1.3s linear infinite; }
.wz-art .rain line:nth-child(2n){ animation-delay:.35s; }
.wz-art .rain line:nth-child(3n){ animation-delay:.8s; }
@keyframes wz-fall{ 0%{ transform:translate(0,-30px); opacity:0; } 15%{ opacity:.7; } 70%{ opacity:.7; } 100%{ transform:translate(-8px,50px); opacity:0; } }
.wz-art .umbrella{ transform-origin:260px 200px; animation:wz-sway 6s ease-in-out infinite; }
@keyframes wz-sway{ 0%,100%{ transform:rotate(-2deg); } 50%{ transform:rotate(2deg); } }
.wz-art .ripple{ transform-box:fill-box; transform-origin:center; animation:wz-ripple 2.6s ease-out infinite; }
@keyframes wz-ripple{ 0%{ transform:scale(.3); opacity:0; } 30%{ opacity:.8; } 100%{ transform:scale(1.5); opacity:0; } }
.wz-art .bounce{ animation:wz-bounce 1.8s ease-out infinite; }
@keyframes wz-bounce{ 0%{ transform:translate(0,0); opacity:0; } 20%{ opacity:1; } 100%{ transform:translate(-14px,-22px); opacity:0; } }
@keyframes wz-spin{ to{ transform:rotate(360deg); } }

/* Floating cards on the art keep card ink whatever ground they sit on. */
.wz-float, .wz-ticket{ --df-text:#0C2039; --df-muted:#5A7290; }
.wz-float{
  position:absolute; left:0; top:4%; z-index:2; display:flex; align-items:center; gap:.6rem;
  background:#fff; border-radius:14px; padding:.55rem .85rem .55rem .55rem; box-shadow:var(--df-shadow-3);
  animation:wz-float 6s ease-in-out infinite; animation-delay:-2s;
}
.wz-float > i{ width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:var(--df-yellow); color:var(--df-blue-ink); font-size:1.05rem; }
.wz-float b{ display:block; font-size:.84rem; font-weight:800; color:var(--df-text); line-height:1.15; }
.wz-float small{ display:block; font-size:.68rem; font-weight:600; color:var(--df-muted); }

/* The ticket that floats off the art — what you leave with. */
.wz-ticket{
  position:absolute; right:-10px; bottom:-4%; z-index:2; display:flex; align-items:center; gap:.7rem;
  background:#fff; border-radius:16px; padding:.7rem .95rem .7rem .7rem;
  box-shadow:var(--df-shadow-3); animation:wz-float 6s ease-in-out infinite;
}
.wz-ticket-ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:#E7F8ED; color:var(--df-ink-ok); font-size:1.2rem; }
.wz-ticket-txt b{ display:block; font-size:.88rem; font-weight:800; color:var(--df-text); }
.wz-ticket-txt span{ display:block; font-size:.7rem; font-weight:600; color:var(--df-muted); }
@keyframes wz-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

/* Four steps, as the landing's "what happens" strip on white. */
.wz-journey{ margin-top:clamp(2.2rem,5vw,64px); }
.wz-journey-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.wz-jcard{ position:relative; background:#fff; border-radius:20px; padding:1.25rem 1.2rem; box-shadow:var(--df-shadow-2); }
.wz-jcard .df-step-n{ margin-bottom:.8rem; }
.wz-jcard b{ display:block; font-family:"Archivo Black",sans-serif; font-weight:400; font-size:1.05rem; color:var(--df-blue); letter-spacing:-.01em; }
.wz-jcard p{ margin:.35rem 0 0; font-size:.84rem; line-height:1.5; color:var(--df-muted); }
.wz-jcard i.bi{ position:absolute; top:1.1rem; right:1.1rem; font-size:1.35rem; color:rgba(0,70,129,.28); }

/* ===========================================================
   4. WIZARD — head, the working sheet and the progress card
   =========================================================== */
.wz-layout{ display:grid; gap:clamp(1.25rem,3vw,32px); align-items:start; }
@media (min-width:992px){ .wz-layout{ grid-template-columns:minmax(0,1fr) 330px; } }

.wz-card{ padding:0; overflow:visible; }
.wz-card-top{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:1.1rem clamp(1.2rem,3vw,34px); border-bottom:1px solid var(--df-line);
}
.wz-card-top .df-crumb{ color:var(--df-muted); white-space:nowrap; }
.wz-card-top .df-qsegs{ flex:1 1 180px; }
.df-qsegs{ display:flex; gap:6px; }
.df-qsegs i{ flex:1; height:6px; border-radius:3px; background:var(--df-surface-3); display:block; transition:background .3s; }
.df-qsegs i.done{ background:var(--df-blue); }
.df-qsegs i.now{ background:var(--df-yellow-deep); }
.wz-card-body{ padding:clamp(1.3rem,3vw,34px); }
.wz-card-foot{
  display:flex; justify-content:space-between; gap:.75rem;
  padding:1rem clamp(1.2rem,3vw,34px) clamp(1.2rem,3vw,28px); border-top:1px solid var(--df-line);
}
.wz-card-foot .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; }
.wz-card-foot .btn:disabled{ visibility:hidden; }
@media (max-width:767.98px){
  .wz-card-foot{
    position:sticky; bottom:0; z-index:30; background:#fff; border-radius:0 0 22px 22px;
    box-shadow:0 -14px 24px -18px rgba(0,25,60,.35);
  }
  .wz-card-foot .btn{ flex:1; padding-inline:1rem; }
}
.btn-df.is-submit{ background:#12793B; box-shadow:0 14px 30px -16px rgba(18,121,59,.85); }
.btn-df.is-submit:hover{ background:#0F6A33; }

/* Panels */
.wz-panel{ display:none; }
.wz-panel.show{ display:block; animation:wz-in .35s cubic-bezier(.2,.7,.2,1) both; }
.wz-head{ margin-bottom:1.6rem; }
.wz-head h2{ font-size:clamp(1.5rem,3vw,2rem); color:var(--df-blue); margin-top:.35rem; }
.wz-head p{ margin:.5rem 0 0; color:var(--df-muted); line-height:1.6; font-weight:500; }

.wz-alert{ display:none; margin-bottom:1.2rem; align-items:center; }
.wz-alert.show{ display:flex; animation:df-shake .34s; }
.wz-alert .df-notice-ic{ width:34px; height:34px; color:var(--df-ink-bad); font-size:1.05rem; }
.wz-alert span{ font-size:.9rem; font-weight:700; color:var(--df-ink-bad); }
@keyframes df-shake{ 20%{transform:translateX(-6px)} 45%{transform:translateX(5px)} 70%{transform:translateX(-3px)} 100%{transform:translateX(0)} }

/* A group of fields — the label line is the landing's kicker. */
.wz-group{ margin-top:1.8rem; }
.wz-group-t{
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; margin-bottom:.9rem;
  font-size:.72rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--df-blue-deep);
}
.wz-group-t > i.bi{
  width:28px; height:28px; border-radius:9px; display:grid; place-items:center; font-size:.85rem;
  background:var(--df-yellow-soft); color:var(--df-blue); border:1px solid rgba(232,162,0,.35);
}
.wz-group-t .req{ color:var(--df-ink-bad); }
.wz-note{
  display:flex; gap:.55rem; align-items:flex-start; margin:-.2rem 0 1rem; padding:.7rem .85rem;
  border-radius:12px; font-size:.82rem; font-weight:600; line-height:1.5;
  background:var(--df-surface-2); border:1px solid var(--df-line); color:var(--df-muted);
}
.wz-note--warn{ background:#FFF7DB; border-color:rgba(232,162,0,.5); color:#6B4E00; }
.wz-opt{ display:none; padding:.2rem .55rem; border-radius:20px; font-size:.58rem; letter-spacing:.12em; background:var(--df-surface-2); border:1px solid var(--df-line-2); color:var(--df-muted); }
.wz-opt.show{ display:inline-block; }
.wz-count{ display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 .4rem; border-radius:11px; background:var(--df-blue); color:#fff; font-size:.7rem; letter-spacing:0; }
.wz-verified{
  display:none; margin-left:auto; align-items:center; gap:.35rem; padding:.3rem .65rem; border-radius:20px;
  background:#E7F8ED; border:1px solid rgba(34,197,94,.5); color:var(--df-ink-ok); letter-spacing:.08em; font-size:.62rem;
}
.wz-verified.show{ display:inline-flex; }

/* Reveal blocks that open as choices are made */
.wz-reveal{ display:none; }
.wz-reveal.show{ display:block; animation:wz-in .35s ease both; }

/* ===========================================================
   5. CHOICE TILES — the role fork, generalised
   =========================================================== */
.wz-grid{ display:grid; gap:.8rem; }
.wz-grid.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.wz-grid.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.wz-grid.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:991.98px){ .wz-grid.cols-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767.98px){ .wz-grid.cols-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:420px){ .wz-grid.cols-2,.wz-grid.cols-3{ grid-template-columns:1fr; } }

.wz-choice{ position:relative; }
.wz-choice > input{ position:absolute; opacity:0; width:1px; height:1px; }
.wz-choice > label{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; height:100%;
  padding:1rem 1rem 1.05rem; border-radius:18px; cursor:pointer; overflow:hidden;
  background:#fff; border:1.5px solid var(--df-line-2); box-shadow:var(--df-shadow-1);
  transition:border-color .15s, transform .12s, box-shadow .15s, background .15s;
}
.wz-choice > label::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--df-blue);
  transform:scaleY(0); transform-origin:top; transition:transform .2s;
}
.wz-choice > label:hover{ border-color:rgba(0,70,129,.45); transform:translateY(-2px); box-shadow:var(--df-shadow-2); }
.wz-choice .c-ico{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center; margin-bottom:.55rem;
  background:var(--df-surface-2); border:1px solid var(--df-ic-line); color:var(--df-blue); font-size:1.3rem;
  transition:background .15s, color .15s;
}
.wz-choice .c-title{ font-family:"Archivo Black",sans-serif; font-size:1rem; letter-spacing:-.01em; color:var(--df-text); line-height:1.2; }
.wz-choice .c-sub{ font-size:.78rem; color:var(--df-muted); font-weight:500; }
.wz-choice .c-tick{
  position:absolute; top:.75rem; right:.75rem; width:22px; height:22px; border-radius:50%;
  border:1.5px solid var(--df-line-2); display:grid; place-items:center; font-size:.8rem; color:transparent;
  transition:.15s;
}
.wz-choice input:checked + label{ border-color:var(--df-blue); background:#F4F8FD; }
.wz-choice input:checked + label::before{ transform:scaleY(1); }
.wz-choice input:checked + label .c-ico{ background:var(--df-yellow); border-color:var(--df-yellow-deep); color:var(--df-blue-ink); }
.wz-choice input:checked + label .c-tick{ background:var(--df-blue); border-color:var(--df-blue); color:#fff; animation:wz-pop .3s cubic-bezier(.34,1.56,.64,1); }
.wz-choice input[type=checkbox] + label .c-tick{ border-radius:7px; }
.wz-choice input:focus-visible + label{ outline:3px solid var(--df-blue); outline-offset:3px; }
.wz-choice.invalid > label{ border-color:var(--df-bad); background:#FFF6F7; }
@keyframes wz-pop{ from{ transform:scale(.3); } to{ transform:scale(1); } }

/* compact: icon beside the title, one line */
.wz-choice.compact > label{ flex-direction:row; align-items:center; gap:.75rem; padding:.8rem 2.6rem .8rem .85rem; }
.wz-choice.compact .c-ico{ width:38px; height:38px; font-size:1.05rem; margin:0; flex:0 0 auto; border-radius:11px; }
.wz-choice.compact .c-title{ font-size:.92rem; }
.wz-choice.compact .c-tick{ top:50%; transform:translateY(-50%); }
.wz-choice.compact input:checked + label .c-tick{ animation:none; }

/* ===========================================================
   6. FIELDS
   =========================================================== */
.wz-field{ position:relative; }
.wz-field .df-label{ color:var(--df-muted); margin-bottom:.45rem; }
.form-control.df-input,.form-select.df-input{
  background-color:var(--df-surface-2); border:1.5px solid var(--df-line-2); border-radius:14px;
  padding:.85rem 1rem; color:var(--df-text); font-size:1rem; font-weight:600; letter-spacing:.01em;
  min-height:54px;
}
.form-select.df-input{ padding-right:2.4rem; }
textarea.form-control.df-input{ min-height:96px; resize:vertical; }
.form-control.df-input::placeholder{ color:#93A7C0; font-weight:500; letter-spacing:0; }
.form-control.df-input:focus,.form-select.df-input:focus{ background-color:#fff; border-color:var(--df-blue); box-shadow:0 0 0 .2rem rgba(0,70,129,.16); }
.form-control.df-input.is-invalid,.form-select.df-input.is-invalid{ border-color:var(--df-bad); background-color:#FFF6F7; background-image:none; }
.form-control.df-input.is-invalid:focus{ box-shadow:0 0 0 .2rem rgba(255,77,94,.16); }
.wz-prefix{ position:relative; }
.wz-prefix > span{
  position:absolute; left:1rem; top:50%; transform:translateY(-50%); font-weight:800; color:var(--df-muted); font-size:.95rem; pointer-events:none;
}
.wz-prefix > .df-input{ padding-left:3.1rem; font-variant-numeric:tabular-nums; letter-spacing:.06em; }
.df-help i.bi{ margin-right:.25rem; color:var(--df-blue); }
.df-help b{ color:var(--df-text); }

.wz-chip{
  display:none; margin-top:.5rem; align-items:center; gap:.4rem; padding:.3rem .7rem; border-radius:20px;
  background:#E7F8ED; border:1px solid rgba(34,197,94,.5); color:var(--df-ink-ok); font-size:.74rem; font-weight:800;
}
.wz-chip.show{ display:inline-flex; }

/* Autocomplete */
.ac-menu{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:60; display:none; max-height:290px; overflow:auto;
  background:#fff; border:1px solid var(--df-line-2); border-radius:16px; box-shadow:var(--df-shadow-3); padding:.35rem;
}
.ac-menu.show{ display:block; }
.ac-item{ display:flex; align-items:center; gap:.7rem; padding:.6rem .65rem; border-radius:11px; cursor:pointer; }
.ac-item:hover,.ac-item.active{ background:var(--df-surface-2); }
.ac-ico{ width:34px; height:34px; border-radius:10px; flex:0 0 auto; display:grid; place-items:center; background:var(--df-yellow-soft); color:var(--df-blue); }
.ac-main{ display:block; font-size:.9rem; font-weight:800; color:var(--df-text); }
.ac-sub{ display:block; font-size:.74rem; color:var(--df-muted); font-weight:600; }
.ac-empty,.ac-loading{ padding:.8rem; font-size:.85rem; color:var(--df-muted); font-weight:600; }

/* ===========================================================
   7. UPLOADS
   =========================================================== */
.wz-upload{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:1rem 1.1rem; border-radius:18px;
  background:var(--df-surface-2); border:1.5px dashed rgba(0,70,129,.3); transition:border-color .15s, background .15s;
}
.wz-upload:hover{ border-color:var(--df-blue); background:#EEF4FC; }
.wz-upload + .wz-upload{ margin-top:.8rem; }
.wz-upload.invalid{ border-color:var(--df-bad); background:#FFF6F7; }
.wz-upload.has-file{ border-style:solid; border-color:rgba(34,197,94,.55); background:#F1FBF4; }
.wz-upload .uz-ico{ width:48px; height:48px; border-radius:14px; flex:0 0 auto; display:grid; place-items:center; background:#fff; color:var(--df-blue); font-size:1.35rem; box-shadow:var(--df-shadow-1); }
.wz-upload.has-file .uz-ico{ color:var(--df-ink-ok); }
.wz-upload .uz-text{ flex:1 1 200px; min-width:0; }
.wz-upload .uz-text b{ display:block; font-weight:800; font-size:.95rem; }
.wz-upload .uz-text small{ display:block; color:var(--df-muted); font-size:.76rem; font-weight:500; margin-top:.1rem; }
.wz-upload .btn-upload{ position:relative; overflow:hidden; margin:0; cursor:pointer; padding:.65rem 1.05rem; font-size:.85rem; display:inline-flex; gap:.45rem; align-items:center; }
.wz-upload .btn-upload input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.upload-name{ display:none; flex-basis:100%; align-items:center; gap:.45rem; font-size:.82rem; font-weight:700; color:var(--df-ink-ok); word-break:break-all; }
.upload-name.show{ display:flex; }
.upload-name a{ color:var(--df-ink-bad); cursor:pointer; text-decoration:underline; font-weight:800; margin-left:.3rem; }
.upload-err{ display:none; margin-top:.45rem; font-size:.8rem; font-weight:700; color:var(--df-ink-bad); }
.upload-err.show{ display:block; }

.doc-list{ display:flex; flex-direction:column; gap:.6rem; margin-top:.8rem; }
.doc-file{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; padding:.7rem .8rem; border-radius:14px; background:#fff; border:1px solid var(--df-line-2); box-shadow:var(--df-shadow-1); }
.doc-file .d-ico{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--df-surface-2); color:var(--df-blue); font-size:1.1rem; flex:0 0 auto; }
.doc-file .d-meta{ flex:1 1 160px; min-width:0; }
.doc-file .d-meta b{ display:block; font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.doc-file .d-meta small{ color:var(--df-dim); font-size:.72rem; }
.doc-file .df-input{ width:auto; flex:0 1 210px; min-height:42px; padding-block:.5rem; font-size:.85rem; }
.doc-empty{ margin-top:.8rem; font-size:.82rem; font-weight:600; color:var(--df-dim); text-align:center; padding:.9rem; border-radius:14px; border:1px dashed var(--df-line-2); }

.wz-remove{
  border:0; background:transparent; color:var(--df-ink-bad); font-weight:800; font-size:.78rem;
  padding:.4rem .6rem; border-radius:10px; display:inline-flex; align-items:center; gap:.3rem;
}
.wz-remove:hover{ background:#FFECEE; }

/* ===========================================================
   8. PRODUCTS
   =========================================================== */
.product-list{ display:flex; flex-direction:column; gap:.9rem; }
.product-item{ border-radius:18px; background:var(--df-surface-2); border:1px solid var(--df-line-2); padding:1rem 1.05rem 1.1rem; }
.pi-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem; }
.pi-no{ display:inline-flex; align-items:center; gap:.55rem; font-size:.7rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--df-blue-deep); }
.pi-no span{ width:28px; height:28px; border-radius:9px; display:grid; place-items:center; font-family:"Archivo Black",sans-serif; font-size:.85rem; letter-spacing:0; color:var(--df-blue-ink); background:linear-gradient(160deg,var(--df-yellow-soft),var(--df-yellow) 60%,var(--df-yellow-deep)); }
.product-grid{ display:grid; gap:.75rem; grid-template-columns:repeat(6,minmax(0,1fr)); }
.product-grid .pf-t,.product-grid .pf-s,.product-grid .pf-c{ grid-column:span 2; }
.product-grid .pf-p{ grid-column:span 4; }
.product-grid .pf-a{ grid-column:span 2; }
@media (max-width:767.98px){ .product-grid{ grid-template-columns:1fr; } .product-grid > *{ grid-column:auto !important; } }
.product-grid label{ display:block; font-size:.62rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--df-muted); margin-bottom:.35rem; }
.product-grid .df-input{ min-height:48px; padding-block:.6rem; font-size:.9rem; background-color:#fff; }
.add-row{
  margin-top:.9rem; width:100%; display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem; border-radius:16px; border:1.5px dashed rgba(0,70,129,.4); background:transparent;
  color:var(--df-blue); font-weight:800; font-size:.9rem; transition:.15s;
}
.add-row:hover{ background:#EEF4FC; border-color:var(--df-blue); }

/* ===========================================================
   9. REVIEW
   =========================================================== */
.review-grid{ display:grid; gap:.9rem; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:767.98px){ .review-grid{ grid-template-columns:1fr; } }
.review-card{ border-radius:18px; background:var(--df-surface-2); border:1px solid var(--df-line); padding:1rem 1.1rem .4rem; }
.review-card.full{ grid-column:1/-1; }
.review-card h4{
  display:flex; align-items:center; gap:.5rem; margin:0 0 .3rem;
  font-family:"Archivo Black",sans-serif; font-size:.98rem; color:var(--df-blue); letter-spacing:-.01em;
}
.review-card h4 .bi{ color:var(--df-blue); }
.review-card .edit{ margin-left:auto; cursor:pointer; font-family:"Archivo",sans-serif; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--df-blue); padding:.3rem .55rem; border-radius:8px; }
.review-card .edit:hover{ background:#fff; }
.rv-row{ display:flex; gap:1rem; align-items:baseline; padding:.55rem 0; border-bottom:1px dashed var(--df-line-2); }
.rv-row:last-child{ border-bottom:0; }
.rv-row .k{ flex:0 0 42%; font-size:.64rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--df-dim); }
.rv-row .v{ margin-left:auto; text-align:right; font-size:.88rem; font-weight:700; word-break:break-word; }
.rv-row .v.empty{ color:var(--df-dim); font-weight:500; font-style:italic; }
.rv-prod{ width:100%; font-size:.82rem; border-collapse:collapse; margin:.3rem 0 .7rem; }
.rv-prod th{ font-size:.6rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--df-dim); text-align:left; padding:.45rem .4rem; border-bottom:1px solid var(--df-line-2); }
.rv-prod td{ padding:.55rem .4rem; border-bottom:1px dashed var(--df-line-2); font-weight:600; vertical-align:top; }
.rv-prod-wrap{ overflow-x:auto; }
.consent{
  grid-column:1/-1; display:flex; gap:.8rem; align-items:flex-start; padding:1rem 1.1rem; border-radius:18px;
  background:linear-gradient(100deg,rgba(255,222,0,.3),rgba(255,222,0,.1)); border:1px solid rgba(232,162,0,.6);
}
.consent .form-check-input{ width:1.3rem; height:1.3rem; margin:0; flex:0 0 auto; border:1.5px solid var(--df-blue); border-radius:6px; cursor:pointer; }
.consent .form-check-input:checked{ background-color:var(--df-blue); border-color:var(--df-blue); }
.consent label{ font-size:.86rem; font-weight:600; line-height:1.5; cursor:pointer; }

/* ===========================================================
   10. DONE — the warranty certificate
   =========================================================== */
.done-screen{ display:none; text-align:center; padding:.5rem 0 .5rem; }
.done-screen.show{ display:block; animation:wz-in .5s ease both; }
.df-burst{ position:relative; width:130px; height:130px; margin-inline:auto; display:grid; place-items:center; }
.done-tick{
  position:relative; z-index:1; width:84px; height:84px; border-radius:50%; display:grid; place-items:center;
  background:var(--df-ok); color:#fff; font-size:2.4rem; box-shadow:0 16px 30px -12px rgba(34,197,94,.7);
  animation:wz-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.df-burst-ring{ border-color:rgba(34,197,94,.45); }
.done-screen h2{ color:var(--df-blue); font-size:clamp(1.7rem,3.4vw,2.3rem); margin-top:.8rem; }
.done-screen > p{ max-width:48ch; margin:.6rem auto 0; color:var(--df-muted); font-weight:500; line-height:1.6; }

.cert{
  position:relative; max-width:520px; margin:1.8rem auto 0; text-align:left; overflow:hidden;
  border-radius:22px; background:#fff; border:1px solid var(--df-line-2); box-shadow:var(--df-shadow-2);
}
.cert-top{
  position:relative; display:flex; align-items:center; gap:.8rem; padding:1rem 1.2rem;
  background:var(--df-sky); border-bottom:2px dashed rgba(0,41,75,.2);
}
.cert-top img{ height:34px; width:auto; background:#fff; padding:5px 9px; border-radius:10px; }
.cert-top .t{ font-family:"Archivo Black",sans-serif; color:var(--df-blue); font-size:1rem; line-height:1.1; }
.cert-top .t small{ display:block; font-family:"Archivo",sans-serif; font-size:.6rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--df-blue-deep); }
.cert-body{ padding:1.1rem 1.2rem 1.2rem; display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:center; }
.cert-row{ display:flex; flex-direction:column; margin-bottom:.6rem; }
.cert-row:last-child{ margin-bottom:0; }
.cert-row span{ font-size:.58rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--df-dim); }
.cert-row b{ font-size:.95rem; font-weight:800; color:var(--df-text); word-break:break-word; }
.cert-row b.ref{ font-family:"Archivo Black",sans-serif; font-weight:400; font-size:1.35rem; color:var(--df-blue); letter-spacing:.02em; }
.cert-stamp{
  width:96px; height:96px; border-radius:50%; display:grid; place-content:center; text-align:center;
  border:3px double var(--df-ok); color:var(--df-ink-ok); transform:rotate(-12deg);
  font-size:.58rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  animation:wz-stamp .6s .35s cubic-bezier(.34,1.56,.64,1) both;
}
.cert-stamp i{ font-size:1.6rem; }
@keyframes wz-stamp{ from{ opacity:0; transform:rotate(-12deg) scale(2.2); } to{ opacity:1; transform:rotate(-12deg) scale(1); } }
.cert::before,.cert::after{ /* ticket notches */
  content:""; position:absolute; top:62px; width:22px; height:22px; border-radius:50%; background:var(--df-bg); border:1px solid var(--df-line-2); z-index:2;
}
.cert::before{ left:-12px; } .cert::after{ right:-12px; }
.done-actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
.done-actions .btn{ display:inline-flex; align-items:center; gap:.5rem; }

/* ===========================================================
   11. PROGRESS CARD — the shield that fills as you go
   =========================================================== */
.wz-side{ position:sticky; top:1.25rem; }
@media (max-width:991.98px){ .wz-side{ position:static; } }
.wz-shield{ display:flex; align-items:center; gap:1rem; margin-bottom:1.1rem; }
.wz-shield svg{ width:78px; height:auto; flex:0 0 auto; overflow:visible; }
.wz-shield .water{ transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.wz-shield .wave{ animation:wz-wave 2.4s linear infinite; }
@keyframes wz-wave{ from{ transform:translateX(0); } to{ transform:translateX(-40px); } }
.wz-shield .check{ stroke-dasharray:40; stroke-dashoffset:40; transition:stroke-dashoffset .6s .3s ease; }
.wz-shield.full .check{ stroke-dashoffset:0; }
.wz-shield-txt b{ display:block; font-family:"Archivo Black",sans-serif; font-weight:400; font-size:2rem; line-height:1; color:var(--df-blue); font-variant-numeric:tabular-nums; }
.wz-shield-txt span{ display:block; font-size:.62rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--df-muted); margin-top:.3rem; }
.wz-shield-txt small{ display:block; font-size:.78rem; color:var(--df-muted); font-weight:500; margin-top:.35rem; line-height:1.4; }

.steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.35rem; }
.steps .step{
  display:flex; align-items:center; gap:.8rem; padding:.55rem .6rem; border-radius:14px;
  border:1px solid transparent; transition:background .15s, border-color .15s;
}
.steps .step.reachable{ cursor:pointer; }
.steps .step.reachable:hover{ background:var(--df-surface-2); }
.steps .dot{
  width:34px; height:34px; border-radius:11px; flex:0 0 auto; display:grid; place-items:center;
  font-family:"Archivo Black",sans-serif; font-size:.9rem; color:var(--df-dim);
  background:var(--df-surface-2); border:1px solid var(--df-line-2); transition:.2s;
}
.steps .meta{ min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.steps .t{ font-size:.9rem; font-weight:800; color:var(--df-muted); }
.steps .s{ font-size:.72rem; color:var(--df-dim); font-weight:500; margin-top:.1rem; }
.steps .step.done .dot{ background:var(--df-blue); border-color:var(--df-blue); color:#fff; }
.steps .step.done .t{ color:var(--df-text); }
.steps .step.active{ background:linear-gradient(100deg,rgba(255,222,0,.3),rgba(255,222,0,.1)); border-color:rgba(232,162,0,.6); }
.steps .step.active .dot{ color:var(--df-blue-ink); border-color:var(--df-yellow-deep); background:linear-gradient(160deg,var(--df-yellow-soft),var(--df-yellow) 60%,var(--df-yellow-deep)); }
.steps .step.active .t{ color:var(--df-text); }
.wz-trust{ display:flex; gap:.7rem; align-items:flex-start; margin-top:1.1rem; padding-top:1rem; border-top:1px dashed var(--df-line-2); }
.wz-trust i{ color:var(--df-ink-ok); font-size:1.2rem; }

/* ===========================================================
   12. OTP
   =========================================================== */
.otp-overlay{
  position:fixed; inset:0; z-index:1080; display:none; place-items:center; padding:1rem;
  background:rgba(0,41,75,.55); backdrop-filter:blur(6px);
}
.otp-overlay.show{ display:grid; animation:wz-fade .2s ease both; }
@keyframes wz-fade{ from{ opacity:0; } to{ opacity:1; } }
.otp-card{
  position:relative; width:100%; max-width:420px; background:#fff; border-radius:24px; text-align:center;
  padding:2rem clamp(1.2rem,4vw,2.2rem) 1.6rem; box-shadow:var(--df-shadow-3);
  animation:wz-in .35s cubic-bezier(.2,.7,.2,1) both;
}
.otp-card::before{ content:""; position:absolute; left:0; right:0; top:0; height:6px; border-radius:24px 24px 0 0; background:var(--df-sky); }
.otp-card.shake{ animation:df-shake .4s; }
.otp-close{ position:absolute; top:.9rem; right:.9rem; width:36px; height:36px; border-radius:11px; border:1px solid var(--df-line-2); background:var(--df-surface-2); color:var(--df-muted); }
.otp-ico{
  width:92px; aspect-ratio:1; margin:.3rem auto 1.1rem; border-radius:50%; display:grid; place-items:center; position:relative;
  background:radial-gradient(circle at 50% 38%,var(--df-yellow-soft) 0%,#fff 62%); border:3px solid var(--df-yellow);
  color:var(--df-blue); font-size:2.1rem;
}
.otp-ico::after{ content:""; position:absolute; inset:-9px; border-radius:50%; border:2px dashed rgba(0,70,129,.28); animation:wz-spin 18s linear infinite; }
.otp-card h3{ font-size:1.55rem; color:var(--df-blue); }
.otp-card > p{ margin:.55rem 0 0; font-size:.9rem; color:var(--df-muted); font-weight:500; line-height:1.55; }
.otp-card > p b{ color:var(--df-text); font-variant-numeric:tabular-nums; }
.otp-card > p a{ color:var(--df-blue); font-weight:800; cursor:pointer; font-size:.82rem; }
.otp-inputs{ display:flex; justify-content:center; gap:.5rem; margin:1.4rem 0 .6rem; }
.otp-box{
  width:min(48px,13vw); height:58px; text-align:center; border-radius:14px; font-family:"Archivo Black",sans-serif; font-size:1.4rem;
  border:1.5px solid var(--df-line-2); background:var(--df-surface-2); color:var(--df-text); outline:0; transition:.15s;
}
.otp-box:focus{ border-color:var(--df-blue); background:#fff; box-shadow:0 0 0 .2rem rgba(0,70,129,.16); }
.otp-box.filled{ border-color:var(--df-blue); background:#fff; }
.otp-overlay.err .otp-box{ border-color:var(--df-bad); background:#FFF6F7; }
.otp-error{ display:none; font-size:.82rem; font-weight:700; color:var(--df-ink-bad); margin-bottom:.4rem; }
.otp-error.show{ display:block; }
.otp-verify{ width:100%; margin-top:.6rem; display:inline-flex; justify-content:center; align-items:center; gap:.5rem; }
.otp-resend{ margin-top:1rem; font-size:.84rem; color:var(--df-muted); font-weight:600; }
.otp-resend a{ color:var(--df-blue); font-weight:800; cursor:pointer; }
.otp-resend a.disabled{ color:var(--df-dim); pointer-events:none; }
.otp-demo{ margin-top:1rem; padding:.6rem .8rem; border-radius:12px; font-size:.78rem; font-weight:600; background:var(--df-yellow-soft); color:#6B4E00; }

/* ===========================================================
   13. THEME — Monsoon Night
   Night-blue field with slanted rain, a thin yellow top rule
   and puddle ripples at the foot. Copy on the field turns
   light; every white card keeps its own dark ink.
   =========================================================== */
body{ --df-bg:#001B33; background:#001B33; }
.df-sheet{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg stroke='%23BFD6F2' stroke-width='1.4' stroke-linecap='round' opacity='.22'%3E%3Cline x1='20' y1='10' x2='14' y2='30'/%3E%3Cline x1='90' y1='40' x2='84' y2='60'/%3E%3Cline x1='50' y1='90' x2='44' y2='110'/%3E%3Cline x1='120' y1='100' x2='114' y2='120'/%3E%3C/g%3E%3C/svg%3E") 0 0/140px 140px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23FFDE00' stroke-opacity='.18' stroke-width='2'%3E%3Cellipse cx='240' cy='150' rx='180' ry='24'/%3E%3Cellipse cx='240' cy='150' rx='110' ry='14'/%3E%3Cellipse cx='1120' cy='130' rx='240' ry='30'/%3E%3Cellipse cx='1120' cy='130' rx='150' ry='18'/%3E%3Cellipse cx='1120' cy='130' rx='70' ry='8'/%3E%3C/g%3E%3C/svg%3E") bottom center/100% 200px no-repeat,
    radial-gradient(900px 600px at 78% 18%, rgba(30,111,191,.55), transparent 62%),
    radial-gradient(700px 500px at 0% 100%, rgba(255,222,0,.10), transparent 60%),
    linear-gradient(180deg,#00294B 0%,#001F3A 60%,#001526 100%);
  border-top:5px solid var(--df-yellow);
}
/* copy on the night field */
.df-sheet-body{
  --df-text:#E9F0FA; --df-muted:#9DB4D2; --df-dim:#7F9BBF;
  --df-line:rgba(157,180,210,.2); --df-line-2:rgba(157,180,210,.32);
}
.df-hero-kick, .df-sheet-kick{ color:var(--df-yellow); }
.df-hero-h1 .a, .df-sheet-h1{ color:var(--df-yellow); }
.df-hero-h1 .b{ color:#fff; }
.df-hero-sub, .df-sheet-sub{ color:#C9D8EC; }
.df-feat-ic{ background:rgba(255,255,255,.08); border:1px solid rgba(255,222,0,.35); box-shadow:none; color:var(--df-yellow) !important; }
.df-feat b{ color:#fff; }
.df-feat b + span{ color:#9DB4D2; }
.df-hero-top .df-crumb{ color:#C9D8EC; }
.df-bar-sep{ background:rgba(255,255,255,.25); }
.wz-hero-cta .btn-df{ background:var(--df-yellow); color:var(--df-blue-ink); box-shadow:0 14px 30px -14px rgba(255,222,0,.6); }
.wz-hero-cta .btn-df-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); box-shadow:none; }
.wz-jcard{ background:rgba(255,255,255,.06); border:1px solid rgba(157,180,210,.22); box-shadow:none; }
.wz-jcard b{ color:var(--df-yellow); }
.wz-jcard p{ color:#9DB4D2; }
.wz-jcard i.bi{ color:rgba(255,222,0,.4); }
.df-sheet > .df-footer{ color:rgba(233,240,250,.55); }
.df-sheet .df-back{ background:rgba(255,255,255,.1); color:#fff; }

/* ===========================================================
   14. MOTION — honour the reader's setting
   =========================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}