/* The small "Client access" block above the footer: one line of words and six digit boxes. It names no client. */
.client-access { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(32px, 3vw, 44px); padding: 16px clamp(18px, 2.4vw, 30px); border: 1px solid var(--ink-line); border-radius: var(--radius); background: var(--ink-raised); } /* quiet raised band: words left, form right */
.contact .client-access h2 { font: 700 clamp(22px, 2.2vw, 28px)/1.1 var(--display); letter-spacing: -0.02em; white-space: normal; } /* block title: beats the big closing-title rule on the contact section */
.client-access-text p { margin-top: 6px; color: var(--paper-soft); font-size: 16px; } /* the one supporting line */
.code-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } /* digit boxes then the button */
.code-digits { display: flex; gap: 8px; } /* the six boxes */
.code-digit { width: 46px; height: 54px; padding: 0; border: 1.5px solid rgb(243 239 230 / 0.3); border-radius: 12px; background: var(--ink); color: var(--paper); font: 600 24px var(--mono); text-align: center; caret-color: var(--amber); } /* one digit box, 44 px or more to tap */
.code-digit:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgb(242 181 68 / 0.25); } /* clear focus ring in the accent */
.code-digit.is-wrong { border-color: var(--recording); } /* red edge after a wrong code */
.code-form .button { min-height: 54px; cursor: pointer; background: transparent; } /* the Enter button, as tall as the boxes */
.code-form .button:disabled { opacity: 0.5; cursor: wait; transform: none; } /* while the code is being checked */
.code-message { grid-column: 1 / -1; min-height: 0; color: var(--paper-soft); font-size: 15px; } /* calm line under the form */
.code-message:empty { display: none; } /* no gap until there is a message */
.code-message[data-tone="problem"] { color: #ffb4a8; } /* wrong or locked: warm red text, passes 4.5:1 on the dark band */
.client-access + .site-footer { margin-top: clamp(24px, 3vw, 36px); } /* closer footer, the block already spaces it */
@media (max-width: 760px) { /* phone and small tablet */
  .client-access { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 16px; padding: 10px 14px; } /* stack words above the form */
  .code-digits { gap: 6px; width: 100%; } /* boxes share the row */
  .code-digit { flex: 1 1 0; min-width: 0; width: 0; height: 44px; } /* six equal boxes that fit 390 px */
  .code-form { flex-direction: column; align-items: stretch; gap: 8px; } /* button under the boxes */
  .code-form .button { min-height: 44px; } /* a little shorter on phones, still 44 px */
  .client-access + .site-footer { margin-top: 16px; } /* footer sits closer on phones */
  .client-access-text p { margin-top: 2px; } /* words sit closer on phones */
  .code-form .button { justify-content: center; } /* centred label */
}