.contract-image-wrap { position: relative; width: 100%; max-width: 600px; margin: 0 auto 24px; }
.contract-image-wrap img { display: block; width: 100%; height: auto; border-radius: 10px; }
.contract-grade-fields {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.grade-field {
    position: absolute;
    width: 7%;
    min-width: 42px;
    pointer-events: auto;
}
.grade-field input {
    display: block;
    width: 100%;
    padding: 4px 2px;
    color: #302a24;
    background: #ffffff;
    border: 2px solid #000000;
    border-radius: 8px;
    font-size: 1.05rem;
    text-align: center;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}
.grade-field input::-webkit-inner-spin-button, .grade-field input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.grade-field label { display: none; }
/* Percentages follow the three number blanks on the card image. */
#textbox1-wrap { bottom: 21.6%; left: 23%; }
#textbox2-wrap { bottom: 21.6%; left: 38%; }
#textbox3-wrap { bottom: 21.6%; left: 54%; }