/* Pepenero — landing page (QR target).
   The cover must never scroll: height is locked to the screen and every
   vertical space clamps against dvh, so short phones compress the same
   design instead of overflowing. At ≥852px-tall screens (iPhone 15 class)
   every clamp sits on its max and the page is pixel-identical. */
.land {
  height: 100%;
  overflow: hidden;
  padding: calc(30px + env(safe-area-inset-top, 0px)) 22px calc(34px + env(safe-area-inset-bottom, 0px));
  padding: calc(clamp(16px, 4dvh, 30px) + env(safe-area-inset-top, 0px)) 22px calc(clamp(18px, 4.6dvh, 34px) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  position: relative;
  background:
    radial-gradient(340px 260px at 50% 8%, rgba(26, 26, 26, .05), transparent 70%),
    var(--bg);
}
@media (min-width: 768px) { .land { padding-top: 68px; } }

/* fine double border like a printed menu cover — top/bottom clear the
   notch / home-indicator safe areas so all four edges stay visible */
.land::before {
  content: "";
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  left: 10px;
  border: 1px solid rgba(26, 26, 26, .22);
  border-radius: 4px;
  pointer-events: none;
}
.land::after {
  content: "";
  position: absolute;
  top: calc(15px + env(safe-area-inset-top, 0px));
  right: 15px;
  bottom: calc(15px + env(safe-area-inset-bottom, 0px));
  left: 15px;
  border: 1px solid rgba(26, 26, 26, .09);
  border-radius: 3px;
  pointer-events: none;
}
/* clear the desktop bezel curve + fake notch (see besh landing.css) */
@media (min-width: 768px) {
  .land::before { top: 50px; bottom: 50px; }
  .land::after { top: 55px; bottom: 55px; }
}

.land > * { position: relative; z-index: 1; }

/* centers the hero block in whatever space is left above the pinned footer */
.land-hero { margin-top: auto; margin-bottom: auto; }

.land-head { text-align: center; margin-top: 18px; margin-top: clamp(6px, 2.6dvh, 18px); }
.land-logo {
  width: 186px;
  width: clamp(128px, 22dvh, 186px);
  margin: 0 auto 20px;
  margin-bottom: clamp(10px, 3dvh, 20px);
  mix-blend-mode: multiply;
}
.land-tag {
  font-family: var(--serif);
  font-size: 12.5px;
  letter-spacing: 4.2px;
  color: var(--ink);
  text-transform: uppercase;
}
.land-tag-ar {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 7px;
}
.orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
  margin: clamp(10px, 3dvh, 20px) 0;
  color: var(--ink);
}
.orn::before, .orn::after {
  content: "";
  height: 1px;
  width: 64px;
  background: linear-gradient(90deg, transparent, var(--rule));
}
.orn::after { background: linear-gradient(90deg, var(--rule), transparent); }
.orn span { font-size: 9px; transform: rotate(45deg); background: var(--ink); width: 5px; height: 5px; }

.land-quote {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 13.5px;
  font-size: clamp(11px, 2dvh, 13.5px);
  font-style: italic;
  line-height: 1.65;
  color: #4a4a46;
  text-align: center;
  padding: 0 10px;
}
.land-quote .accent { color: var(--ink); font-weight: 400; }

.cta-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  gap: clamp(8px, 1.8dvh, 12px);
  margin: 24px 2px 0;
  margin-top: clamp(14px, 3.4dvh, 24px);
}
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  height: clamp(44px, 7.5dvh, 54px);
  border-radius: 999px;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta:active { transform: scale(.98); }
.cta-primary {
  background: var(--ink);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}
.cta-ghost {
  border: 1px solid #d9d9d5;
  color: var(--ink);
  background: #ffffff;
}
.cta svg { flex: none; }

/* entrance animation */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.land-head, .land-quote, .cta-stack, .land-foot, .powered {
  animation: rise .6s cubic-bezier(.2, .7, .3, 1) both;
}
.land-quote { animation-delay: .08s; }
.cta-stack { animation-delay: .16s; }
.land-foot { animation-delay: .24s; }
.powered { animation-delay: .3s; }

/* landing-only footer compression (menu/info footers keep shared.css values) */
.land .land-foot { padding-top: clamp(12px, 3.7dvh, 26px); }
.land .powered { margin-top: clamp(10px, 2.6dvh, 18px); }

/* short phones (SE / older Androids): tighten text metrics so the whole
   cover — badge included — still fits inside one screen */
@media (max-height: 700px) {
  .land-quote { line-height: 1.45; }
  .land-tag { font-size: 11.5px; letter-spacing: 3.6px; }
  .land-tag-ar { margin-top: 5px; }
  .land .land-foot { font-size: 8.5px; }
  .land .powered { padding: 7px 8px; gap: 7px; }
  .land .powered img { height: 11px; }
  .cta { height: clamp(42px, 6.8dvh, 54px); font-size: 12px; }
}