.verification-page { min-height: 100dvh; color: #101722; background: #f4f0e8; font-family: "Manrope", sans-serif; }
.verification-page::before { position: fixed; z-index: -1; inset: 0; background: linear-gradient(90deg, transparent 0 7%, rgb(184 138 45 / .16) 7% calc(7% + 1px), transparent calc(7% + 1px)), radial-gradient(circle at 86% 20%, rgb(184 138 45 / .11), transparent 28rem); content: ""; }
.verification-header { display: flex; width: min(1240px, calc(100% - 48px)); min-height: 86px; align-items: center; justify-content: space-between; margin: 0 auto; border-bottom: 1px solid #d9d4c9; }
.verification-brand { display: flex; align-items: center; gap: 12px; color: #071b33; text-decoration: none; }
.verification-brand img { width: 50px; height: 46px; object-fit: contain; }
.verification-brand span { display: grid; line-height: 1.15; }
.verification-brand strong { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.12rem; letter-spacing: .06em; }
.verification-brand small { margin-top: 4px; color: #5f6875; font-size: .68rem; }
.verification-security { display: inline-flex; align-items: center; gap: 10px; color: #5f6875; font-size: .78rem; font-weight: 700; }
.verification-security i { width: 8px; height: 8px; border-radius: 50%; background: #176b4d; box-shadow: 0 0 0 5px rgb(23 107 77 / .12); }
.verification-main { display: grid; width: min(1240px, calc(100% - 48px)); max-width: none; grid-template-columns: minmax(0, .88fr) minmax(480px, 1.12fr); gap: clamp(54px, 9vw, 130px); align-items: center; margin: 0 auto; padding: clamp(68px, 9vw, 118px) 0 96px; }
.verification-intro { align-self: start; padding-top: 30px; }
.verification-kicker, .verification-step { margin: 0; color: #b88a2d; font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.verification-intro h1 { max-width: 11ch; margin: 24px 0 0; color: #071b33; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(3rem, 5.7vw, 6.2rem); font-weight: 620; line-height: .9; letter-spacing: -.058em; }
.verification-lead { max-width: 48ch; margin-top: 30px; color: #5f6875; font-size: 1.02rem; line-height: 1.7; }
.verification-facts { display: grid; gap: 0; margin: 44px 0 0; border-top: 1px solid #d9d4c9; }
.verification-facts > div { display: grid; grid-template-columns: 44px 1fr; gap: 14px; border-bottom: 1px solid #d9d4c9; padding: 18px 0; }
.verification-facts dt { color: #b88a2d; font-family: "Bricolage Grotesque", sans-serif; }
.verification-facts dd { display: grid; gap: 4px; margin: 0; }
.verification-facts strong { color: #071b33; }
.verification-facts span { color: #5f6875; font-size: .78rem; }
.verification-card { display: grid; gap: 28px; border-top: 5px solid #b88a2d; padding: clamp(28px, 4.5vw, 52px); background: #fffcf7; box-shadow: 0 30px 80px rgb(7 27 51 / .14); }
.verification-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.verification-card-head h2 { margin: 7px 0 0; color: #071b33; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.verification-card-head img { width: 70px; height: 70px; object-fit: contain; mix-blend-mode: multiply; }
.verification-query { display: grid; gap: 10px; }
.verification-query label { color: #071b33; font-size: .78rem; font-weight: 750; }
.verification-query input { width: 100%; height: 54px; border: 1px solid #d9d4c9; border-radius: 0; padding: 0 16px; color: #071b33; background: #fff; font-family: "Geist Mono", monospace; font-size: .86rem; }
.verification-query input:focus { outline: 2px solid #b88a2d; outline-offset: -2px; }
.verification-query button { min-height: 52px; border: 0; color: #fff; background: #071b33; font-weight: 750; cursor: pointer; }
.verification-query button:hover { background: #0d2d52; }
.verification-query button:disabled { cursor: wait; opacity: .66; }
.verification-query small { color: #5f6875; }
.verification-result { display: grid; gap: 18px; border-left: 3px solid #b88a2d; padding: 18px 20px; background: #f4f0e8; }
.verification-result-heading { display: grid; grid-template-columns: 34px 1fr; gap: 13px; align-items: start; }
.verification-status-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: #071b33; background: #f5ead1; font-weight: 800; }
.verification-result-heading strong { display: block; margin-bottom: 3px; color: #071b33; }
.verification-result-heading p, .verification-result > p { margin: 0; color: #5f6875; font-size: .84rem; }
.verification-result.is-valid { border-left-color: #176b4d; background: #edf7f2; }
.verification-result.is-invalid { border-left-color: #a23a35; background: #fff1ef; }
.verification-result.is-invalid .verification-status-icon { color: #a23a35; background: #f7dad7; }
.verification-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.verification-item { display: grid; gap: 3px; border-top: 1px solid #d9d4c9; padding: 12px 0; }
.verification-item span { color: #5f6875; font-size: .7rem; }
.verification-item b { overflow-wrap: anywhere; font-size: .84rem; }
.advanced-panel { border: 1px dashed #d9d4c9; padding: 12px; }
.advanced-panel pre { overflow-x: auto; white-space: pre-wrap; }
.verification-footer { display: flex; width: min(1240px, calc(100% - 48px)); align-items: center; justify-content: space-between; gap: 24px; margin: 0 auto; border-top: 1px solid #d9d4c9; padding: 24px 0 34px; color: #707984; font-size: .72rem; }
.verification-footer a { color: #071b33; font-weight: 750; text-decoration: none; }
@media (max-width: 900px) { .verification-main { grid-template-columns: 1fr; gap: 54px; } .verification-intro h1 { max-width: 14ch; } }
@media (max-width: 600px) { .verification-header, .verification-main, .verification-footer { width: min(100% - 32px, 1240px); } .verification-header { min-height: 72px; } .verification-brand small, .verification-security { display: none; } .verification-main { padding: 44px 0 60px; } .verification-intro { padding: 0; } .verification-card { padding: 24px; } .verification-grid { grid-template-columns: 1fr; } .verification-footer { align-items: flex-start; flex-direction: column; } }