.start-readiness {
  display: grid;
  gap: 14px;
  margin: 18px 0;
  padding: 17px;
  border: 1px solid rgba(98,216,255,.2);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(98,216,255,.09), transparent 42%),
    rgba(7,15,25,.7);
}

.start-readiness > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.start-readiness > header span {
  color: var(--cyan, #62d8ff);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .13em;
}

.start-readiness > header h3 {
  margin: 5px 0 0;
  color: #edf6ff;
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.08;
}

.start-readiness > header p {
  max-width: 520px;
  margin: 0;
  color: #8fa2b8;
  font-size: 11px;
  line-height: 1.48;
  text-align: right;
}

.start-readiness-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.start-readiness-grid article {
  position: relative;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 9px;
  min-height: 86px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}

.start-readiness-grid article > i {
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: #69798c;
  box-shadow: 0 0 0 4px rgba(105,121,140,.08);
}

.start-readiness-grid article > span { display: grid; align-content: start; gap: 4px; min-width: 0; }
.start-readiness-grid article > span b { color: #dfeaf5; font-size: 11px; }
.start-readiness-grid article > span small { color: #7f91a6; font-size: 9px; line-height: 1.4; }
.start-readiness-grid article > strong {
  grid-column: 2;
  width: fit-content;
  padding: 4px 6px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: #8798aa;
  font-size: 8px;
  letter-spacing: .1em;
}

.start-readiness-grid article[data-state="ready"] { border-color: rgba(68,227,194,.18); background: rgba(68,227,194,.035); }
.start-readiness-grid article[data-state="ready"] > i { background: var(--mint, #44e3c2); box-shadow: 0 0 0 4px rgba(68,227,194,.1), 0 0 15px rgba(68,227,194,.25); }
.start-readiness-grid article[data-state="ready"] > strong { border-color: rgba(68,227,194,.25); color: var(--mint, #44e3c2); }
.start-readiness-grid article[data-state="attention"] { border-color: rgba(255,190,92,.2); }
.start-readiness-grid article[data-state="attention"] > i { background: #ffbe5c; box-shadow: 0 0 0 4px rgba(255,190,92,.1); }
.start-readiness-grid article[data-state="attention"] > strong { border-color: rgba(255,190,92,.26); color: #ffca7b; }

.start-readiness > footer {
  padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: #7f91a6;
  font-size: 10px;
  line-height: 1.48;
}

.start-readiness > footer b { color: #b9c8d7; }

@media (max-width: 1050px) {
  .start-readiness-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .start-readiness { padding: 13px; border-radius: 14px; }
  .start-readiness > header { align-items: start; flex-direction: column; gap: 8px; }
  .start-readiness > header p { text-align: left; }
  .start-readiness-grid { grid-template-columns: 1fr; }
  .start-readiness-grid article { min-height: 78px; }
}