
:root{
  --crowberry:#182727; --text:#FFF;
  --firmament:#4C7570;

  /* Desktop constants (from vandrel_desktop_only_v1) */
  --top-space:271px;                 /* logo Y unchanged */
  --logo-w:442px; --logo-h:217px;
  --input-w:383px; --input-h:75px;
  --btn-w:174px; --btn-h:75px;
  --radius:3px;
  --foot-gap-from-form:295px;
  --foot-w:178px; --foot-h:38px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--crowberry);color:var(--text)}
body{font-family:"Century Gothic","CenturyGothic","Avant Garde","Futura",Arial,sans-serif;
     -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}

.frame{min-height:100vh;display:grid;place-items:center;padding:0 24px}
.stack{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;max-width:1728px;text-align:center;min-height:100vh}

/* ===== Desktop (vandrel_desktop_only_v1) ===== */
.brand{margin-top:var(--top-space)}
.brand .logo-img{width:var(--logo-w);height:auto;max-height:var(--logo-h);display:block;object-fit:contain}

/* Tagline hidden on desktop */
.tagline{display:none}

/* 3 cm gap between logo and form on desktop */
.form{
  margin-top:3cm;
  display:grid;grid-template-columns:var(--input-w) var(--btn-w);
  gap:16px;align-items:center;justify-content:center;
}
.input{
  width:var(--input-w);height:var(--input-h);
  padding:0 16px;border:none;border-radius:var(--radius);
  background:rgba(255,255,255,.20);color:#FFF;outline:none;
  text-transform:uppercase;letter-spacing:.06em
}
.input::placeholder{color:rgba(255,255,255,.90)}
.button{
  width:var(--btn-w);height:var(--btn-h);
  border:none;border-radius:var(--radius);
  background:#FFF;opacity:.7;color:#222;font-weight:700;cursor:pointer
}

.ok{display:none;margin-top:12px;color:#E7F1EE;font-size:14px}

.foot-phrase{
  width:var(--foot-w);height:var(--foot-h);
  margin-top:var(--foot-gap-from-form);
  color:#FFF;text-align:center;
  font-family:"Hanken Grotesk","Century Gothic","CenturyGothic",Arial,sans-serif;
  font-size:16px;font-weight:300;line-height:38px;
  margin-left:auto;margin-right:auto;
}

/* ===== Mobile (vandrel_V25_mobile_no_tagline_2cm) ===== */
@media (max-width:560px){
  .frame{ padding:0 16px; min-height:100dvh; }
  .stack{ align-items:center; justify-content:flex-start; text-align:center; }

  /* Keep last-approved logo position/size */
  .brand{ margin-top:150px; }
  .brand .logo-img{ width:280px; height:auto; max-height:160px; }

  /* Hide tagline on mobile */
  .tagline{ display:none; }

  /* EXACT 2cm gap between logo and form */
  .form{
    margin-top:2cm;
    display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:nowrap;
  }
  .input{
    width: calc(248px * 0.7);
    height: 60px;
    border-radius:3px; background:rgba(255,255,255,.20);
    font-size:10px;
  }
  .button{
    width: calc(184px * 0.7);
    height:60px; border-radius:3px; opacity:.7; background:#FFF;
  }

  .foot-phrase{
    width:178px; height:38px;
    margin-top:145px; line-height:38px;
    font-size:13px;
  }
}
