:root{--navy:#071b34;--blue:#0a68ff;--blue-dark:#074fbf;--sky:#eef5ff;--white:#fff;--text:#132238;--muted:#66758a;--border:#dbe5f1;--danger:#b42318;--success:#117a4b;--shadow:0 24px 60px rgba(8,32,67,.14)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at top left,rgba(10,104,255,.2),transparent 34%),linear-gradient(180deg,#f5f9ff 0%,#edf4fc 100%)}
.page-shell{width:min(1050px,calc(100% - 32px));margin:42px auto 120px}.hero{padding:clamp(34px,6vw,68px);color:#fff;border-radius:30px 30px 0 0;background:linear-gradient(135deg,rgba(7,27,52,.98),rgba(10,104,255,.92));box-shadow:var(--shadow)}
.eyebrow{margin:0 0 12px;font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}h1{margin:0;max-width:820px;font-size:clamp(2.25rem,6vw,4.6rem);line-height:1.02}.hero-copy{max-width:760px;margin:24px 0 0;font-size:1.08rem;line-height:1.75;color:rgba(255,255,255,.84)}
.notice{margin-top:26px;padding:14px 16px;border:1px solid rgba(255,255,255,.24);border-radius:14px;background:rgba(255,255,255,.1)}.demo-card,.included-card{background:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.75);box-shadow:var(--shadow)}.demo-card{padding:clamp(26px,5vw,54px);border-radius:0 0 30px 30px}
.step-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:38px}.step{display:flex;flex-direction:column;align-items:center;gap:8px;color:#8a98aa;text-align:center;font-size:.82rem}.step span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e8eef5;color:#6d7b8d;font-weight:800}.step.active{color:var(--navy)}.step.active span,.step.complete span{background:var(--blue);color:#fff}.step.complete{color:var(--blue-dark)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.field{display:flex;flex-direction:column;gap:8px}label{font-weight:750;color:var(--navy)}input{width:100%;border:1px solid var(--border);border-radius:13px;padding:14px 15px;font:inherit;color:var(--text);background:#fff}input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(10,104,255,.12)}
.upload-box{display:flex;align-items:center;gap:18px;margin-top:24px;padding:22px;border:1px dashed #a9bed3;border-radius:18px;background:var(--sky)}.upload-box div{display:flex;flex-direction:column;gap:4px}.upload-box span{color:var(--muted);font-size:.9rem}.actions{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:26px}.primary-button,.secondary-button{border:0;border-radius:13px;padding:14px 20px;font:inherit;font-weight:800;cursor:pointer}.primary-button{color:#fff;background:linear-gradient(135deg,var(--blue),var(--blue-dark));box-shadow:0 12px 25px rgba(10,104,255,.22)}.secondary-button{color:var(--blue-dark);background:#e9f2ff}.text-link{color:var(--blue-dark);font-weight:800;text-decoration:none}.error{min-height:18px;color:var(--danger);font-size:.84rem}.file-error{display:block;margin-top:8px}
.processing-panel,.results-panel{text-align:center;padding:25px 0 4px}.spinner{width:58px;height:58px;margin:0 auto 22px;border:6px solid #dce8f5;border-top-color:var(--blue);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.processing-panel h2,.results-panel h2,.included-card h2{margin:0;color:var(--navy)}.processing-panel p:last-child{color:var(--muted)}.success-icon{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 22px;border-radius:50%;color:#fff;background:var(--success);font-size:2rem;font-weight:900}
.result-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:32px 0}.result-grid article{padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--sky)}.result-grid span{display:block;color:var(--muted);font-size:.86rem}.result-grid strong{display:block;margin-top:9px;color:var(--navy);font-size:1.22rem}.summary{padding:24px;text-align:left;border:1px solid var(--border);border-radius:18px;background:#f9fbfe}.summary h3{margin-top:0;color:var(--navy)}.summary ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px;margin-bottom:0;padding-left:20px;color:#4d6076}.notice.dark{color:#fff;background:var(--navy);border:0}.results-panel>.secondary-button{margin-top:24px}.included-card{margin-top:28px;padding:clamp(28px,5vw,52px);border-radius:26px}.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:24px}.feature-grid span{padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--sky);font-weight:700;color:#314a65}
.return-link{position:fixed;left:22px;bottom:20px;z-index:20;padding:12px 16px;border-radius:999px;color:#fff;background:var(--navy);text-decoration:none;font-weight:800;box-shadow:0 12px 28px rgba(7,27,52,.25)}
@media(max-width:800px){.step-row{grid-template-columns:repeat(3,1fr)}.grid,.result-grid,.feature-grid,.summary ul{grid-template-columns:1fr}.actions{align-items:stretch;flex-direction:column}.actions .primary-button,.actions .text-link{width:100%;text-align:center}}

/* Sample downloads and drag-and-drop upload */
.sample-instructions{
  margin-top:24px;
  padding:18px 20px;
  border:1px solid var(--border);
  border-radius:16px;
  background:#f9fbfe;
  display:grid;
  gap:8px;
}
.sample-instructions strong{color:var(--navy);font-size:1rem}
.sample-instructions>span{color:var(--muted);line-height:1.55}
.sample-links{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:4px}
.upload-box{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:18px;
  min-height:150px;
  border:2px dashed #9db6cf;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
  cursor:pointer;
}
.upload-box:hover,.upload-box:focus,.upload-box.dragover{
  border-color:var(--blue);
  background:#e9f3ff;
  transform:translateY(-1px);
  outline:none;
}
.drop-icon{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:14px;
  background:#dcecff;
  color:var(--blue-dark);
  font-size:1.6rem;
  font-weight:900;
}
.drop-copy{display:grid;gap:4px}
.drop-copy strong{color:var(--navy);font-size:1.05rem}
.drop-copy span{color:var(--muted);line-height:1.45}
.selected-file{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:12px;
  border-top:1px solid var(--border);
  color:var(--navy);
}
.selected-file-copy{display:grid;gap:4px}
.selected-file-label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#66758a;font-weight:800}
.remove-file-button{
  display:none;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:42px;
  height:42px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#ff7aa2,#ff4d7a);
  color:#fff;
  font-size:1.5rem;
  font-weight:900;
  line-height:1;
  box-shadow:0 10px 22px rgba(255,77,122,.26);
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;
}
.remove-file-button.visible{display:inline-flex}
.remove-file-button:hover,.remove-file-button:focus{transform:translateY(-1px) scale(1.03);box-shadow:0 14px 24px rgba(255,77,122,.34);outline:none}
.actions-end{justify-content:flex-end}
@media(max-width:720px){
  .upload-box{grid-template-columns:1fr;text-align:center}
  .drop-icon{margin:0 auto}
  .upload-box .secondary-button{width:100%}
  .selected-file{flex-direction:column;align-items:center;text-align:center}
}

/* Compact selected-file state */
.upload-empty{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  width:100%;
}
.upload-box.has-file{
  min-height:auto;
  padding:16px 18px;
  border-style:solid;
  background:linear-gradient(180deg,#f7fbff 0%,#eef6ff 100%);
}
.upload-box.has-file:hover,
.upload-box.has-file:focus{
  transform:none;
}
.selected-file[hidden],
.upload-empty[hidden]{display:none !important}
.selected-file{
  grid-column:1/-1;
  width:100%;
  padding:0;
  border-top:0;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  text-align:left;
}
.selected-file-copy{
  min-width:0;
  display:grid;
  gap:4px;
}
.selected-file-copy strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--navy);
}
.ready-status{
  color:var(--success) !important;
  font-size:.82rem !important;
  font-weight:800;
}
.remove-file-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:0;
  border-radius:999px;
  padding:0;
  color:#fff;
  background:linear-gradient(135deg,#ff6b8f,#ef3f68);
  font-size:1.25rem;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(239,63,104,.24);
}
@media(max-width:720px){
  .upload-empty{grid-template-columns:1fr;text-align:center}
  .selected-file{grid-template-columns:auto minmax(0,1fr) auto;text-align:left}
}

/* Center the sample instructions and upload content */
.sample-instructions{
  text-align:center;
  justify-items:center;
}
.sample-links{
  justify-content:center;
}
.upload-empty{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
}
.drop-copy{
  align-items:center;
  text-align:center;
}
.upload-empty .secondary-button{
  min-width:240px;
}
.selected-file{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
}
.selected-file-copy{
  justify-items:center;
  text-align:center;
}
.selected-file-copy strong{
  max-width:100%;
  text-align:center;
}
.remove-file-button{
  margin-top:4px;
}
@media(max-width:720px){
  .selected-file{
    grid-template-columns:1fr;
    text-align:center;
  }
}