@font-face {
  font-family: 'Glacial Indifference';
  src: url("/static/fonts/GlacialIndifference-Regular.otf") format("opentype");
  font-weight: normal;
}

@font-face {
  font-family: 'Glacial Indifference';
  src: url("/static/fonts/GlacialIndifference-Bold.otf") format("opentype");
  font-weight: bold;
}

/* ===== In-Progress Section (matches mock) ===== */
.inprog {
  --ink:#1f2a44;
  --muted:#6b7280;
  --blue:#2d6cdf;
  --badge1:#ff9966;
  --badge2:#ff5e62;
  --card:#ffffff;
  --line:#e9eef3;
}

.inprog .ip-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 10px 28px rgba(31,42,68,.08);
  padding:28px;
}

.inprog .ip-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:28px;
  align-items:center;
}

.inprog .ip-badge{
  display:inline-block;
  background:linear-gradient(90deg,var(--badge1),var(--badge2));
  color:#fff;
  font-weight:900;
  letter-spacing:.3px;
  font-size:12px;
  padding:8px 14px;
  border-radius:999px;
  margin-bottom:14px;
}

.inprog .ip-title{
  margin:6px 0 10px;
  font-size:36px;
  line-height:1.15;
  color:var(--ink);
  font-weight:900;
}

.inprog .ip-lead{
  margin:0 0 16px;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
  max-width:48ch;
}

.inprog .ip-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

/* spinner + progress bar */
.inprog .ip-spinner{
  width:18px; height:18px;
  border-radius:50%;
  border:3px solid #c7d2fe;
  border-top-color:var(--blue);
  animation:ip-spin 1s linear infinite;
}
@keyframes ip-spin { to { transform:rotate(360deg) } }

.inprog .ip-bar{
  height:8px; width:240px; background:#eef2f7; border-radius:999px;
  overflow:hidden; position:relative;
}
.inprog .ip-bar span{
  position:absolute; inset:0; width:35%; background:linear-gradient(90deg,#a5b4fc,var(--blue));
  border-radius:999px; animation:ip-load 2.3s ease-in-out infinite;
}
@keyframes ip-load {
  0%{transform:translateX(-100%)}
  50%{transform:translateX(40%)}
  100%{transform:translateX(110%)}
}

/* buttons */
.inprog .btn{
  display:inline-block; padding:12px 18px; border-radius:12px;
  text-decoration:none; font-weight:800; font-size:14px; transition:.15s ease;
}
.inprog .btn-primary{ background:var(--blue); color:#fff; box-shadow:0 8px 16px rgba(45,108,223,.25) }
.inprog .btn-primary:hover{ transform:translateY(-1px) }
.inprog .btn-outline{ background:#fff; color:var(--ink); border:1px solid #dbe3ec }
.inprog .btn-outline:hover{ box-shadow:0 8px 16px rgba(31,42,68,.08) }

/* Illustration panel */
.inprog .ip-illust{
  position:relative; border-radius:18px; overflow:hidden;
  padding:16px; background:linear-gradient(135deg,#ffe5ec 0%,#e8f1ff 100%);
  box-shadow:0 10px 28px rgba(31,42,68,.08);
}
.inprog .ip-illust img{
  width:100%; height:auto; display:block; object-fit:contain;
  filter: drop-shadow(0 10px 18px rgba(31,42,68,.15));
}

/* Decorative soft blobs (optional) */
.inprog .blob{ position:absolute; border-radius:50%; opacity:.25; filter:blur(2px) }
.inprog .b1{ width:220px; height:220px; background:#ff9fb0; top:-40px; right:-40px }
.inprog .b2{ width:160px; height:160px; background:#9fbaff; bottom:-30px; left:-30px }

/* Responsive */
@media (max-width: 920px){
  .inprog .ip-grid{ grid-template-columns:1fr; gap:22px }
  .inprog .ip-lead{ max-width:unset }
  .inprog .ip-bar{ width:100% }
}

/* Responsive overrides for progress section (tablet + mobile) */
@media (max-width: 1024px){
  .inprog.progress__flex-center{
    height:auto;
    min-height:0;
    align-items:stretch;
    padding:48px 20px;
  }

  .inprog .progress__flex-col{
    height:auto;
  }

  .inprog .progress__grid-cols{
    grid-template-columns:1fr;
    gap:28px;
    height:auto;
    text-align:center;
  }

  .inprog .progress__flex-col-aba9{
    max-width:100%;
    margin:0;
  }

  .inprog .progress__flex-center-5877{
    height:auto;
    max-width:100%;
  }

  .inprog .progress__style-11{
    height:auto;
    max-height:360px;
  }

  .inprog .progress__flex-gap,
  .inprog .progress__flex-gap-f4f1{
    flex-wrap:wrap;
  }
}

@media (max-width: 768px){
  .inprog.progress__flex-center{
    padding:36px 16px;
  }

  .inprog .progress__style-9{
    font-size:32px;
    line-height:1.2;
  }

  .inprog .progress__flex-center-a53f{
    font-size:14px;
  }

  .inprog .ip-row{
    flex-wrap:wrap;
  }

  .inprog .ip-bar{
    max-width:240px;
  }

  .inprog .btn{
    min-height:44px;
  }
}

@media (max-width: 480px){
  .inprog.progress__flex-center{
    padding:28px 12px;
  }

  .inprog .progress__style-9{
    font-size:28px;
  }

  .inprog .btn{
    width:100%;
    text-align:center;
  }
}