:root {
    --ink: #101820;
    --muted: #53565a;
    --line: #d8d8d8;
    --header: #dddddd;
    --accent: #ffb900;
    --link: #00649f;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--ink);
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.4;
}

.mail-lookup {
    width: min(100% - 24px, 1040px);
    margin: 0 auto;
    padding: 16px 0 36px;
}

.step { margin: 0 6px 40px; }
.step > span { margin-right: 6px; }

.lookup-form {
    display: flex;
    align-items: stretch;
    gap: 22px;
    width: min(72%, 650px);
    margin: 0 auto 44px;
}

.lookup-form input {
    min-width: 0;
    flex: 1;
    min-height: 50px;
    padding: 12px 18px;
    border: 1px solid #6c6c6c;
    border-radius: 5px;
    color: var(--ink);
    font: inherit;
}

.lookup-form input:focus { outline: 3px solid rgba(255, 185, 0, .3); border-color: #555; }

.lookup-form button {
    min-width: 140px;
    border: 0;
    border-radius: 6px;
    background: var(--accent);
    color: #070707;
    font: 700 16px Arial, Helvetica, sans-serif;
    cursor: pointer;
}

.lookup-form button:hover { background: #34BEBA; }
.mail-lookup > hr { margin: 0 0 32px; border: 0; border-top: 1px solid #20282d; }

.result-row {
    display: grid;
    grid-template-columns: 195px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    margin-bottom: 12px;
}

.result-value, .record-type, .record-list { min-height: 47px; padding: 12px 22px; border: 1px solid var(--line); }
.result-row--records { grid-template-columns: 195px 168px minmax(0, 1fr); }
.record-list > div + div { margin-top: 6px; }
.result-row--table { align-items: start; margin-top: 28px; }
.result-row--table .result-label { padding-top: 15px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: center; }
th { padding: 12px; background: var(--header); font-weight: 700; }
td { padding: 11px 14px; border: 2px solid #ddd; }

.step--guides { margin: 56px 6px 26px; }
.guides-title { margin: 0 0 18px; font-size: 16px; font-weight: 400; }
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 13px; }

.guide-card {
    display: flex;
    min-height: 120px;
    padding: 8px 14px 10px;
    flex-direction: column;
    border: 1px solid #606060;
    border-radius: 5px;
}

.guide-card h3 { display: flex; gap: 12px; align-items: center; margin: 0 0 7px; color: var(--muted); font-size: 19px; font-weight: 400; }
.guide-card h3 i { width: 18px; color: var(--ink); text-align: center; }
.guide-card p { margin: 0 0 14px; font-size: 14px; }
.guide-card a { margin-top: auto; color: var(--link); font-size: 13px; font-weight: 600; text-decoration: underline; }
.guide-card a i { margin-left: 5px; font-size: 10px; }
.message { padding: 14px 18px; border-radius: 4px; }
.message--error { border-left: 4px solid #c62828; background: #ffebee; color: #8e1717; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 760px) {
    .lookup-form { width: 100%; }
    .result-row, .result-row--records { grid-template-columns: 1fr; gap: 6px; }
    .result-row--table .result-label { padding-top: 0; }
    .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 500px) {
    .step { margin-bottom: 24px; }
    .lookup-form { flex-direction: column; gap: 12px; margin-bottom: 28px; }
    .lookup-form button { min-height: 48px; }
    .guide-grid { grid-template-columns: 1fr; }
    .step--guides { margin-top: 36px; }
}