/* =============================================
   One-Pager shared print styles
   A4 print-ready, works B&W and color
   ============================================= */

@page {
  size: A4;
  margin: 18mm 16mm;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: #f4f4f4;
  color: #0A1128;
  margin: 0;
  padding: 20px 0;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.page {
  width: 170mm;
  min-height: 257mm;
  margin: 0 auto;
  background: #fff;
  padding: 20mm 18mm;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

/* ── Header ── */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10mm;
  border-bottom: 2pt solid #FF5252;
  padding-bottom: 6mm;
}

.logo {
  font-size: 22pt;
  font-weight: 900;
  color: #0A1128;
  letter-spacing: -0.5pt;
}

.logo span {
  color: #FF5252;
}

.lang-badge {
  font-size: 8pt;
  font-weight: 600;
  letter-spacing: 1pt;
  text-transform: uppercase;
  color: #888;
  border: 1pt solid #ddd;
  padding: 2pt 6pt;
  border-radius: 3pt;
}

/* ── Headline ── */
.headline {
  font-size: 26pt;
  font-weight: 900;
  line-height: 1.15;
  color: #0A1128;
  margin-bottom: 7mm;
  letter-spacing: -0.5pt;
}

.headline em {
  font-style: normal;
  color: #FF5252;
}

/* ── Problem ── */
.problem {
  font-size: 11pt;
  line-height: 1.6;
  color: #444;
  margin-bottom: 12mm;
  padding-left: 6mm;
  border-left: 3pt solid #FF5252;
}

/* ── Section titles ── */
.section-title {
  font-size: 8pt;
  font-weight: 700;
  letter-spacing: 1.5pt;
  text-transform: uppercase;
  color: #FF5252;
  margin-bottom: 5mm;
}

/* ── Features grid ── */
.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5mm 12mm;
  margin-bottom: 12mm;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 4mm;
  font-size: 10pt;
  line-height: 1.45;
  color: #0A1128;
}

.feature-item svg {
  flex-shrink: 0;
  margin-top: 1pt;
}

/* ── Competitive advantages ── */
.advantages {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8mm;
  margin-bottom: 12mm;
  padding: 8mm 0;
  border-top: 1pt solid #eee;
  border-bottom: 1pt solid #eee;
}

.advantage-item strong {
  display: block;
  font-size: 11pt;
  font-weight: 800;
  color: #0A1128;
  margin-bottom: 2mm;
}

.advantage-item p {
  font-size: 9pt;
  line-height: 1.5;
  color: #666;
  margin: 0;
}

/* ── CTA ── */
.cta-wrap {
  text-align: center;
  margin-bottom: 10mm;
}

.cta-btn {
  display: inline-block;
  background: #FF5252;
  color: #fff;
  font-size: 13pt;
  font-weight: 800;
  padding: 7mm 16mm;
  border-radius: 8mm;
  text-decoration: none;
  letter-spacing: -0.3pt;
  box-shadow: 0 4pt 12pt rgba(255,82,82,0.35);
}

/* ── QR ── */
.qr-wrap {
  text-align: center;
  margin-bottom: 10mm;
}

.qr-wrap img {
  width: 120px;
  height: 120px;
  display: inline-block;
}

.qr-caption {
  font-size: 8pt;
  color: #aaa;
  margin-top: 3mm;
}

/* ── Footer ── */
.footer {
  font-size: 9pt;
  color: #aaa;
  text-align: center;
  border-top: 0.5pt solid #eee;
  padding-top: 5mm;
  margin-top: 4mm;
}

/* ── No-print elements ── */
.no-print {
  display: none;
}

/* ── Tablet (in-between) — gentle scaling ── */
@media (max-width: 768px) {
  .page {
    width: 100%;
    min-height: unset;
    padding: 10mm 8mm;
  }
  .headline { font-size: 20pt; margin-bottom: 4mm; }
  .features-grid { gap: 4mm 6mm; }
  .advantages { gap: 5mm; padding: 5mm 0; }
}

/* ── Portrait phone — full reflow ── */
@media (max-width: 480px) {
  .page {
    width: 100%;
    min-height: unset;
    padding: 12px 14px;
    box-shadow: none;
  }
  .header { margin-bottom: 5mm; padding-bottom: 3mm; }
  .logo { font-size: 18pt; }
  .headline { font-size: 16pt; line-height: 1.3; margin-bottom: 4mm; }
  .problem { font-size: 10pt; line-height: 1.7; margin-bottom: 6mm; }
  .features-grid {
    grid-template-columns: 1fr;
    gap: 4mm;
    margin-bottom: 7mm;
  }
  .advantages {
    grid-template-columns: 1fr;
    gap: 5mm;
    padding: 5mm 0;
    margin-bottom: 7mm;
  }
  .cta-wrap { margin-bottom: 6mm; }
  .cta-btn { padding: 12px 22px; font-size: 12pt; border-radius: 6mm; }
  .qr-wrap { margin-bottom: 6mm; }
  .qr-wrap img { width: 110px; height: 110px; }
  .footer { padding-top: 3mm; margin-top: 2mm; }
}

/* ── Print overrides ── */
@media print {
  body {
    background: #fff;
    padding: 0;
  }
  .page {
    box-shadow: none;
    width: 100%;
    min-height: unset;
  }
}