@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700&display=swap');

:root{
  --bg:#f2efe8;
  --paper:#faf8f3;
  --ink:#22211e;
  --muted:#79746b;
  --line:#d9d3c8;
  --accent:#8b7865;
  --dark:#24231f;
  --green:#63735e;
  --danger:#8a554d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:"DM Sans",sans-serif;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; opacity:.25;
  background-image:radial-gradient(#8e877c .55px,transparent .55px);
  background-size:17px 17px;
}
.page{width:min(1180px,calc(100% - 48px));margin:0 auto;position:relative}
.topbar{
  min-height:112px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line)
}
.brand{display:flex;align-items:center;gap:14px;color:inherit;text-decoration:none}
.brand-mark{
  width:43px;height:43px;border:1px solid var(--dark);display:grid;place-items:center;
  font:700 12px "Manrope";letter-spacing:.08em
}
.brand-copy strong{display:block;font:700 13px "Manrope";letter-spacing:.16em}
.brand-copy small{display:block;margin-top:3px;color:var(--muted);font-size:9px;letter-spacing:.22em}
.private{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.16em}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(99,115,94,.12)}
.main{
  display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:center;
  min-height:650px;padding:80px 0
}
.eyebrow,.panel-label{font:700 10px "Manrope";letter-spacing:.2em;color:var(--accent)}
.intro h1{
  margin:22px 0 26px;font:600 clamp(48px,6vw,76px)/1.02 "Manrope";
  letter-spacing:-.055em
}
.intro h1 span{color:#8b867e}
.lead{max-width:610px;margin:0;color:var(--muted);font-size:17px;line-height:1.7}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:58px}
.trust div{border-top:1px solid var(--line);padding-top:15px;display:flex;gap:12px;align-items:flex-start}
.trust b{font:600 9px "Manrope";color:var(--accent);letter-spacing:.1em}
.trust span{font-size:11px;line-height:1.45;color:var(--muted)}
.access-panel{background:var(--paper);border:1px solid var(--line);box-shadow:0 24px 70px rgba(39,35,30,.07)}
.panel-top{
  height:64px;padding:0 28px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between
}
.status{font-size:9px;font-weight:700;letter-spacing:.12em;color:var(--green);display:flex;gap:8px;align-items:center}
.status i{width:6px;height:6px;border-radius:50%;background:var(--green)}
.panel-body{padding:42px 38px 36px}
.number{font:500 10px "Manrope";color:var(--muted);letter-spacing:.16em}
.panel-body h2{font:600 32px "Manrope";letter-spacing:-.04em;margin:28px 0 10px}
.panel-body>p{margin:0 0 36px;color:var(--muted);font-size:13px;line-height:1.6}
form label{display:block;margin-bottom:9px;font-size:9px;font-weight:700;letter-spacing:.16em;color:var(--muted)}
.input-wrap{display:grid;grid-template-columns:1fr auto;border:1px solid #cfc8bd;background:#fff}
input{
  min-width:0;border:0;outline:0;background:transparent;padding:18px 17px;
  font:600 13px "DM Sans";letter-spacing:.08em;color:var(--ink);text-transform:uppercase
}
input::placeholder{color:#aaa49a}
button{
  border:0;background:var(--dark);color:#f7f3eb;padding:0 20px;cursor:pointer;
  font:700 10px "Manrope";letter-spacing:.13em;transition:.18s ease
}
button:hover{background:#37352f}
button span{font-size:15px;margin-left:8px}
.message{min-height:20px;margin:10px 0 0!important;font-size:11px!important}
.message.error{color:var(--danger)}
.message.success{color:var(--green)}
.help{margin-top:27px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px}
.help span{font-size:10px;color:var(--muted)}
.help span:first-child{font-weight:600;color:var(--ink)}
.note{border-top:1px solid var(--line);padding:31px 0;display:grid;grid-template-columns:180px 1fr;gap:30px}
.note>span{font-size:9px;font-weight:700;letter-spacing:.16em}
.note p{margin:0;max-width:680px;color:var(--muted);font-size:11px;line-height:1.65}
footer{
  min-height:100px;border-top:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;color:var(--muted);font-size:9px;letter-spacing:.1em
}
@media(max-width:900px){
  .main{grid-template-columns:1fr;gap:48px;min-height:auto;padding:68px 0}
  .intro{max-width:720px}.access-panel{max-width:620px;width:100%}
}
@media(max-width:620px){
  .page{width:calc(100% - 28px)}
  .topbar{min-height:88px}.private{display:none}
  .main{padding:54px 0;gap:40px}
  .intro h1{font-size:44px}
  .lead{font-size:15px}
  .trust{grid-template-columns:1fr;margin-top:40px;gap:15px}
  .panel-top{padding:0 20px}
  .panel-body{padding:30px 20px 24px}
  .panel-body h2{font-size:28px}
  .input-wrap{grid-template-columns:1fr}
  button{min-height:50px}
  .help{flex-direction:column;gap:7px}
  .note{grid-template-columns:1fr;gap:10px}
  footer{justify-content:center;align-items:flex-start;flex-direction:column;gap:7px}
}