* { box-sizing: border-box; }
:root {
  --ink: #26332e;
  --muted: #77817b;
  --green: #557665;
  --green-dark: #3e5e4d;
  --soft: #f3f6f1;
  --line: #e5eae4;
}
body {
  margin: 0;
  color: var(--ink);
  background: transparent;
  font-family: "DM Sans", sans-serif;
/* ============================================================================ */
  min-height: 100vh;
    display: flex;
    flex-direction: column;
  isolation: isolate;
}
body::before {
  content: "";
  position: fixed;
  inset: -5px;
  z-index: -1;
  background: url("../img/desktop.png") center / cover no-repeat;
  filter: blur(4px);
}
.announcement {
  min-height: 34px; display:flex; align-items:center; justify-content:center;
  gap:9px; padding:7px 12px; background:#eaf0e8; color:#536c5d;
  font-size:11px; letter-spacing:.07em; text-align:center;
}
.announcement span { color:#9aab83; }
.site-header {
  height:62px; padding:0 max(6vw, 22px); display:flex; align-items:center;
  justify-content:space-between; background:#ffffffb3; border-bottom:1px solid #f0f2ee;
}
.brand { display:flex; align-items:center; color:#26332e; text-decoration:none; }
.brand-logo { display:block; width:100px; max-height:48px; object-fit:contain; }
.brand span { color:#89a28c; }
.header-note { color:#8b958e; font-size:10px; letter-spacing:.16em; font-weight:700; }
.page-shell {
  width:min(1080px, 90%); margin:55px auto; display:flex;
  justify-content:center; align-items:center; flex:1;
}
.intro { padding:10px 0; }
.eyebrow { display:flex; align-items:center; gap:9px; color:#536b59; font-size:10px; font-weight:700; letter-spacing:.17em; text-shadow:0 1px 4px rgba(255,255,255,.9); }
.eyebrow span { width:23px; height:1px; background:#91a795; }
.intro h1 { margin:23px 0 17px; font:700 clamp(38px,5vw,58px)/1.12 "Playfair Display",serif; letter-spacing:-1.4px; text-shadow:0 2px 6px rgba(255,255,255,.8); }
.intro h1 em { color:#52795e; font-weight:700; }
.intro p { max-width:410px; color:#34443a; font-size:14px; font-weight:600; line-height:1.9; text-shadow:0 1px 4px rgba(255,255,255,.95), 0 0 8px rgba(255,255,255,.75); }
.trust-line { margin-top:30px; color:#46584b; font-size:11px; font-weight:600; letter-spacing:.05em; text-shadow:0 1px 4px rgba(255,255,255,.95); }
.trust-line span { color:#8da48f; margin-right:7px; }
.verify-card {
  width:min(540px,100%); padding:34px; background:#ffffffe0; border:1px solid #edf0eb; border-radius:8px;
  box-shadow:0 18px 55px rgba(45,65,49,.07);
}
.card-heading { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:27px; }
.step-label { color:#849486; font-size:9px; font-weight:700; letter-spacing:.16em; }
.card-heading h2 { margin:9px 0 6px; font:600 27px "Playfair Display",serif; }
.card-heading p { margin:0; color:var(--muted); font-size:12px; }
.card-icon { width:43px; height:43px; display:grid; place-items:center; border-radius:50%; background:#eff4ee; color:#718c77; font-size:25px; }
.field { margin:0 0 19px; }
.field label { display:block; margin-bottom:8px; font-size:12px; font-weight:600; }
.field input {
  width:100%; height:48px; padding:0 14px; border:1px solid var(--line);
  border-radius:4px; outline:none; color:var(--ink); background:#fff;
  font:13px "DM Sans",sans-serif; transition:border .2s, box-shadow .2s;
}
.field input:focus { border-color:#8da693; box-shadow:0 0 0 3px rgba(141,166,147,.12); }
.field input::placeholder { color:#aab2ac; }
.phone-wrap { display:flex; height:48px; align-items:center; border:1px solid var(--line); border-radius:4px; }
.phone-wrap:focus-within { border-color:#8da693; box-shadow:0 0 0 3px rgba(141,166,147,.12); }
.phone-wrap span { padding:0 13px; color:#78847b; font-size:13px; border-right:1px solid var(--line); }
.phone-wrap input { height:46px; border:0; box-shadow:none!important; }
.barcode-wrap { display:flex; gap:8px; }
.barcode-wrap input { min-width:0; flex:1; }
.scan-button {
  min-width:83px; border:1px solid #dce6dc; border-radius:4px; background:#f2f6f1;
  color:#536f5b; cursor:pointer; font:600 12px "DM Sans",sans-serif;
}
.scan-button:hover { background:#e8f0e7; }
.field small { display:block; margin-top:7px; color:#929c94; font-size:10px; line-height:1.5; }
.submit-button {
  width:100%; height:51px; display:flex; align-items:center; justify-content:center; gap:15px;
  margin-top:25px; border:0; border-radius:4px; background:var(--green);
  color:white; cursor:pointer; font:600 13px "DM Sans",sans-serif; transition:background .2s;
}
.submit-button:hover { background:var(--green-dark); }
.submit-button:disabled { opacity:.65; cursor:not-allowed; }
.btn-arrow { font-size:19px; }
.privacy-note { margin-top:17px; text-align:center; color:#929c94; font-size:10px; }
.privacy-note span { margin-right:5px; color:#78947d; }
.message { display:none; margin-top:12px; padding:11px 12px; border-radius:4px; font-size:12px; line-height:1.5; }
.message.error { display:block; color:#a33c36; background:#fff1ef; }
.message.success { display:block; color:#38664a; background:#edf6ee; }
.scanner-box { margin-top:14px; overflow:hidden; border:1px solid var(--line); border-radius:5px; }
.site-footer {
  min-height:65px; padding:18px max(6vw, 22px); display:flex; justify-content:space-between;
  gap:12px; flex-wrap:wrap; border-top:1px solid #edf0eb; color:#929c94; font-size:10px;

  /* =============================================== */
  margin-top: auto;
    background: #333;
    color: #fff;
    padding: 15px;
    text-align: center;
}
@media (max-width:760px) {
  body::before { background-image:url("../img/phone.png"); }
  .page-shell { width:min(520px,90%); margin:0 auto; }
  .intro { text-align:center; }
  .eyebrow { justify-content:center; }
  .intro p { margin-left:auto; margin-right:auto; }
  .trust-line { margin-top:18px; }
  .verify-card { padding:25px 21px; }
  .site-header { height:65px; }
}
@media (max-width:380px) {
  .header-note { font-size:8px; }
  .card-heading h2 { font-size:24px; }
  .verify-card { padding:22px 16px; }
}