/* ─────────────────────────────────────────────
   MENUKAART DOWNLOAD — redesigned form section
   Left: form card with bricks/studs
   Right: floating tilted menukaart preview
─────────────────────────────────────────────  */
.menukaart {
  padding:64px 0 96px;
}
.menukaart-inner {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:48px;
  align-items:center;
}

/* LEFT: form */
.menukaart-form-card {
  background:var(--white);
  border:1.5px solid var(--ink);
  border-radius:20px;
  box-shadow: 0 6px 0 var(--ink);
  padding:40px 36px 32px;
  position:relative;
}
.menukaart-form-card .app-studs {
  position:absolute;
  top:-9px;
  left:28px;
  display:flex;
  gap:6px;
  z-index:30;
}
.menukaart-form-card .app-studs .stud { width:11px; height:11px; border-width:1.5px }

.menukaart-tag {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:1.3px;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:18px;
  padding:5px 11px 5px 7px;
  background:var(--yellow);
  border:1.5px solid var(--ink);
  border-radius:7px;
  box-shadow: 0 2px 0 var(--ink);
}
.menukaart-tag::before {
  content:'';
  width:8px; height:8px;
  border-radius:50%;
  background:var(--orange);
  border:1.5px solid var(--ink);
}

.menukaart-form-card h2 {
  font-family:var(--font-display);
  font-size:clamp(34px, 4vw, 52px);
  font-weight:400;
  line-height:.96;
  letter-spacing:-1.2px;
  color:var(--ink);
  text-transform:uppercase;
  margin-bottom:16px;
}
.menukaart-form-card h2 em {
  font-style:normal;
  color:var(--orange-d);
  position:relative;
  display:inline-block;
}
.menukaart-form-card h2 em::after {
  content:'';
  position:absolute;
  left:-3px; right:-3px; bottom:14px;
  height:17px;
  background:var(--yellow);
  border-radius:3px;
  z-index:-1;
  transform:rotate(-1.5deg);
}
.menukaart-form-card .menukaart-desc {
  font-size:15.5px;
  color:var(--gray-1);
  line-height:1.55;
  margin-bottom:28px;
  max-width:440px;
}

/* form bits */
.menukaart-form {
  display:flex;
  flex-direction:column;
  gap:16px;
}
.form-row {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.form-field {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.form-field label {
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:6px;
}
.form-field label .req {
  color:var(--orange-d);
}
.form-field input,
.form-field textarea,
.form-field select {
  font-family:var(--font-ui);
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  padding:11px 14px;
  background:var(--bg-warm);
  border:1.5px solid var(--ink);
  border-radius:9px;
  transition:background .15s, box-shadow .15s, transform .1s;
  width:100%;
  resize:none;
}
.form-field input:hover,
.form-field textarea:hover { background:var(--white) }
.form-field input:focus,
.form-field textarea:focus {
  outline:none;
  background:var(--white);
  box-shadow: 0 0 0 3px rgba(242,107,31,.18);
  transform:translateY(-1px);
}
.form-field textarea { min-height:80px }
.form-field input::placeholder,
.form-field textarea::placeholder {
  color:var(--gray-2);
  font-weight:400;
}

/* Interests chip selector */
.form-chips-label {
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:10px;
  display:block;
}
.form-chips {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.chip {
  font-family:var(--font-ui);
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
  padding:7px 12px;
  background:var(--white);
  border:1.5px solid var(--ink);
  border-radius:999px;
  cursor:pointer;
  transition:background .15s, color .15s, transform .15s, box-shadow .15s;
  letter-spacing:-0.1px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  user-select:none;
}
.chip::before {
  content:'';
  width:6px; height:6px;
  border-radius:50%;
  background:var(--gray-3);
  border:1px solid var(--ink);
  transition:background .15s;
}
.chip:hover {
  background:var(--bg);
}
.chip.active {
  background:var(--ink);
  color:var(--white);
  box-shadow: 0 2px 0 var(--orange-d);
  transform:translateY(-1px);
}
.chip.active::before {
  background:var(--orange);
  border-color:var(--orange-d);
}

/* Submit */
.menukaart-submit {
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.menukaart-submit .btn {
  padding:13px 22px;
  font-size:12px;
}
.menukaart-note {
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:500;
  color:var(--gray-1);
  letter-spacing:0.5px;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:8px;
}
.menukaart-note::before {
  content:'';
  width:6px; height:6px;
  border-radius:50%;
  background:var(--green);
  flex-shrink:0;
}

/* RIGHT: PDF preview */
.menukaart-preview {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:520px;
}

/* The "book" mockup */
.menukaart-book {
  position:relative;
  width:100%;
  max-width:440px;
  aspect-ratio: 4 / 5;
  background:linear-gradient(135deg, #1a1a20 0%, #2a2a32 100%);
  border:1.5px solid var(--ink);
  border-radius:14px;
  box-shadow:
    0 12px 0 var(--ink),
    0 30px 60px -20px rgba(21,21,26,.4);
  transform:rotate(-3deg);
  padding:36px 32px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.menukaart-book:hover {
  transform:rotate(-2deg) translateY(-4px);
}

/* Book studs */
.menukaart-book::before {
  content:'';
  position:absolute;
  top:14px; right:18px;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:
    18px 0 0 var(--yellow),
    36px 0 0 var(--red),
    54px 0 0 var(--blue);
}

/* Glow on book */
.menukaart-book::after {
  content:'';
  position:absolute;
  top:-50%; right:-30%;
  width:300px; height:300px;
  background:radial-gradient(circle, rgba(242,107,31,.35), transparent 60%);
  pointer-events:none;
}

.book-eyebrow {
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--orange);
  display:inline-flex;
  align-items:center;
  gap:8px;
  position:relative;
  z-index:1;
  margin-bottom:24px;
}
.book-eyebrow::before {
  content:'';
  width:7px; height:7px; border-radius:50%;
  background:var(--orange);
}

.book-title {
  font-family:var(--font-display);
  font-size:clamp(36px, 4.5vw, 52px);
  font-weight:400;
  line-height:.9;
  letter-spacing:-1.5px;
  color:var(--white);
  text-transform:uppercase;
  position:relative;
  z-index:1;
  margin-bottom:18px;
}
.book-title em {
  font-style:normal;
  color:var(--orange);
}

.book-subtitle {
  font-family:var(--font-ui);
  font-size:14px;
  font-weight:500;
  color:rgba(255,255,255,.7);
  line-height:1.5;
  max-width:240px;
  position:relative;
  z-index:1;
}

.book-bottom {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  position:relative;
  z-index:1;
}

.book-pages {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.book-pages-num {
  font-family:var(--font-display);
  font-size:32px;
  color:var(--orange);
  line-height:1;
  letter-spacing:-1px;
}
.book-pages-label {
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

.book-cta {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--ink);
  padding:8px 14px;
  background:var(--yellow);
  border:1.5px solid var(--ink);
  border-radius:7px;
  box-shadow: 0 2px 0 var(--white);
}

/* Floating bricks around preview */
.menukaart-deco {
  position:absolute;
  border:1.5px solid var(--ink);
  border-radius:5px;
  box-shadow: 0 3px 0 var(--ink);
  z-index:1;
  pointer-events:none;
}
.menukaart-deco-1 {
  width:44px; height:30px;
  background:var(--orange);
  top:32px; left:18%;
  transform:rotate(-12deg);
  animation:float1 6s ease-in-out infinite;
}
.menukaart-deco-2 {
  width:32px; height:32px;
  background:var(--yellow);
  bottom:60px; left:8%;
  transform:rotate(18deg);
  animation:float2 7s ease-in-out infinite;
}
.menukaart-deco-3 {
  width:36px; height:24px;
  background:var(--red);
  top:60px; right:6%;
  transform:rotate(8deg);
  animation:float3 8s ease-in-out infinite;
}
@keyframes float2 {
  0%,100% { transform:rotate(18deg) translateY(0) }
  50% { transform:rotate(14deg) translateY(-10px) }
}