.stay-access-card,.spare-key-card{
  margin:20px 0;
  padding:clamp(20px,3.4vw,28px);
  border:1px solid #b8d1c7;
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 24px rgba(24,59,52,.07);
  scroll-margin-top:100px;
}
.stay-access-card{border-top:4px solid var(--green)}
.stay-access-card h2,.stay-access-card h3,.spare-key-card h2,.spare-key-card h3{color:var(--ink);line-height:1.17;text-wrap:balance}
.stay-access-card h2{margin:7px 0 8px;font-size:clamp(27px,3.5vw,38px)}
.stay-access-card h3{margin:20px 0 7px;font-size:22px}
.stay-access-card p,.spare-key-card p{max-width:70ch;margin:7px 0}
.stay-access-label{display:inline-flex;padding:6px 10px;border-radius:999px;background:var(--ink);color:#fff;font-size:11px;font-weight:850;letter-spacing:.05em;line-height:1.3;text-transform:uppercase}
.stay-access-form{display:grid;gap:10px;max-width:540px;margin-top:17px}
.stay-access-form label{font-weight:800;color:var(--ink)}
.stay-access-form input[type="text"],.spare-key-form input[type="text"]{width:100%;min-height:50px;padding:12px 14px;border:1px solid #9db8b0;border-radius:11px;background:#fff;color:var(--ink);font-size:18px;letter-spacing:.06em;text-transform:uppercase}
.stay-access-form input:focus,.spare-key-form input[type="text"]:focus{border-color:var(--green);outline:3px solid rgba(47,111,95,.2);outline-offset:1px}
.guest-count-confirmation{display:flex!important;align-items:flex-start;gap:9px;margin:0 0 14px;font-size:14px;font-weight:650!important;line-height:1.45}
.guest-count-confirmation input{flex:0 0 auto;width:19px;height:19px;margin-top:2px}
.stay-access-status{max-width:70ch;padding:11px 13px;margin-top:13px;border:1px solid var(--line);border-radius:11px;background:#fff}
.stay-access-status[data-state="success"]{border-color:#8ab99e;background:#f0faf4;color:#174d35}
.stay-access-status[data-state="attention"]{border-color:#d8b574;background:var(--amber-soft);color:#6c4c15}
.stay-access-status[data-state="error"]{border-color:#d8918d;background:var(--danger-soft);color:#8e2f29}
.stay-access-status[data-state="working"]{border-color:#9db8b0;color:var(--muted)}
.stay-access-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:15px 0 0}
.stay-access-actions button,.stay-access-form button,.spare-key-form button{font:inherit;cursor:pointer}
.stay-access-actions button:disabled,.stay-access-form button:disabled,.spare-key-form button:disabled{opacity:.52;cursor:wait}
.stay-privacy{color:var(--muted);font-size:13px;line-height:1.5}
.verified-stay-panel{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}

.spare-key-card{border-color:#d4b27b;border-top:4px solid var(--amber);background:#fffdfa}
.spare-key-card .stay-access-label{background:#76501d}
.spare-key-trigger{width:100%;font:inherit;text-align:left;cursor:pointer}
.spare-key-trigger:focus-visible{outline:3px solid rgba(47,111,95,.28);outline-offset:3px}
.spare-key-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid #eadbc3}
.spare-key-card-heading h2{margin:6px 0 0;font-size:clamp(26px,3.3vw,36px)}
.spare-key-card-heading .btn{flex:0 0 auto}
.spare-key-card .compact-list{max-width:540px;margin:14px 0}
.spare-key-card .compact-list .rule{border-color:#e5d1b1;background:#fff}
.spare-key-fee{margin-top:16px!important;padding:13px 15px;border-left:4px solid var(--amber);border-radius:10px;background:var(--amber-soft);color:#5f4218}
.spare-key-form{display:grid;gap:11px;max-width:560px;margin-top:14px}
.spare-key-form>label:not(.fee-confirmation){font-weight:800;color:var(--ink)}
.fee-confirmation{display:flex;align-items:flex-start;gap:11px;min-height:52px;padding:13px;border:1px solid #d7bc8f;border-radius:12px;background:#fff;font-weight:750;cursor:pointer}
.fee-confirmation:hover{border-color:#b98a43;background:#fffcf6}
.fee-confirmation input{width:21px;height:21px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--green)}
.fee-confirmation span{padding-top:1px;line-height:1.4}
#spareKeyViewAction{margin-top:14px;padding-top:14px;border-top:1px solid #d5e4de}
#spareKeyViewAction .btn{min-width:180px}
.spare-key-result{margin-top:16px;padding:18px;border:1px solid #94bbaa;border-left:4px solid var(--green);border-radius:14px;background:#f4faf7}
.spare-key-result h3{margin:0 0 7px}
.spare-key-code{display:block;margin:8px 0;color:var(--ink);font-size:clamp(34px,8vw,54px);font-weight:900;letter-spacing:.12em;line-height:1.1;user-select:all}

@media(max-width:650px){
  .stay-access-card,.spare-key-card{margin:16px 0;padding:18px;border-radius:16px}
  .stay-access-actions{display:grid;grid-template-columns:1fr;margin-top:13px}
  .stay-access-actions .btn,.stay-access-actions button{width:100%}
  .spare-key-card-heading{gap:12px}
  .spare-key-card-heading .btn{width:100%}
  .fee-confirmation{min-height:56px}
}

@media(max-width:340px){
  .stay-access-card,.spare-key-card{padding:15px}
}