:root {
  --mobile-pad: 22px;
}

body.homina-mobile {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% -10%, rgba(205, 222, 220, 0.58), transparent 28rem),
    linear-gradient(180deg, #fbfaf6 0%, #eee7dc 100%);
  color: var(--ink);
}

.mobile-journey {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px;
}

.mobile-screen {
  min-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
  padding: 26px var(--mobile-pad);
  border: 1px solid rgba(95, 111, 79, 0.12);
  border-radius: 10px;
  background:
    radial-gradient(circle at 82% 8%, rgba(205, 222, 220, 0.22), transparent 18rem),
    rgba(251, 250, 246, 0.88);
  box-shadow: 0 24px 70px rgba(32, 40, 32, 0.12);
}

.start-screen {
  justify-content: center;
}

.mobile-logo {
  width: 38mm;
  height: auto;
  margin-bottom: 34px;
}

.mobile-kicker,
.mobile-progress {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mobile-progress {
  align-self: flex-end;
  color: rgba(32, 40, 32, 0.44);
}

.mobile-screen h1,
.mobile-screen h2,
.mobile-screen h3 {
  font-family: var(--title);
  font-weight: 500;
  letter-spacing: 0;
}

.mobile-screen h1 {
  max-width: 290px;
  margin: 0 0 16px;
  font-size: 53px;
  line-height: 0.92;
}

.mobile-screen h2 {
  margin: 0 0 24px;
  font-size: 37px;
  line-height: 1.02;
}

.mobile-chapter,
.mobile-context,
.mobile-body {
  margin: 0 0 28px;
  color: rgba(32, 40, 32, 0.68);
  font-size: 14px;
  line-height: 1.7;
}

.mobile-body {
  max-width: 340px;
  margin: -8px auto auto;
}

.mobile-privacy-note {
  margin: 0 0 24px;
  padding: 14px 0 0;
  border-top: 1px solid rgba(95, 111, 79, 0.14);
  color: rgba(32, 40, 32, 0.58);
  font-size: 12px;
  line-height: 1.65;
}

.mobile-privacy-note.compact {
  margin-top: -8px;
  margin-bottom: 4px;
}

.mobile-primary,
.mobile-nav button,
.summary-actions button {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(95, 111, 79, 0.24);
  border-radius: 999px;
  background: var(--olive);
  color: var(--warm-white);
  font-family: var(--text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mobile-primary {
  width: fit-content;
  margin-top: 12px;
}

.pause-screen {
  justify-content: center;
  text-align: center;
}

.pause-screen .mobile-progress {
  position: absolute;
  top: 38px;
  right: 40px;
}

.pause-screen h2 {
  margin: auto 0;
  font-size: 42px;
  white-space: pre-line;
}

.question-screen h2 {
  max-width: 360px;
}

.mobile-question-body {
  max-width: 360px;
  margin: -8px 0 24px;
  color: rgba(32, 40, 32, 0.66);
  font-size: 14px;
  line-height: 1.78;
}

.mobile-question-body p {
  margin: 0 0 10px;
}

.mobile-answer {
  display: block;
  margin-top: auto;
}

.mobile-answer span {
  display: block;
  margin-bottom: 10px;
  color: rgba(32, 40, 32, 0.5);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.mobile-answer input,
.mobile-answer textarea {
  width: 100%;
  border: 1px solid rgba(95, 111, 79, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.45);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.65;
  outline: 0;
}

.mobile-answer input {
  min-height: 52px;
  padding: 0 14px;
}

.mobile-answer textarea {
  min-height: 230px;
  padding: 15px;
  resize: vertical;
}

.mobile-answer input:focus,
.mobile-answer textarea:focus {
  border-color: rgba(196, 164, 101, 0.48);
  box-shadow: 0 0 0 4px rgba(205, 222, 220, 0.18);
}

.mobile-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.mobile-nav button:first-child,
.summary-actions button:not(:first-child) {
  background: rgba(251, 250, 246, 0.64);
  color: var(--olive);
}

.summary-screen {
  gap: 18px;
}

.summary-list {
  display: grid;
  gap: 12px;
  margin: 0 calc(var(--mobile-pad) * -0.25);
}

.summary-list article {
  padding: 16px;
  border: 1px solid rgba(95, 111, 79, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.32);
}

.summary-list h3 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.08;
}

.summary-list p {
  margin: 0;
  color: rgba(32, 40, 32, 0.72);
  font-size: 14px;
  line-height: 1.65;
}

.summary-actions {
  display: grid;
  gap: 9px;
}

.mobile-print {
  display: none;
}

@media (max-width: 380px) {
  :root {
    --mobile-pad: 18px;
  }

  .mobile-journey {
    padding: 10px;
  }

  .mobile-screen {
    min-height: calc(100vh - 20px);
  }

  .mobile-screen h1 {
    font-size: 47px;
  }

  .mobile-screen h2 {
    font-size: 33px;
  }
}

@media print {
  body.homina-mobile {
    background: var(--warm-white);
  }

  .mobile-screen {
    display: none;
  }

  .mobile-journey {
    width: auto;
    min-height: 0;
    padding: 0;
  }

  .mobile-print {
    display: block;
  }

  .mobile-print-cover,
  .mobile-print-answer {
    width: 210mm;
    min-height: 297mm;
    padding: 28mm 24mm;
    page-break-after: always;
    background: var(--warm-white);
  }

  .mobile-print-cover {
    display: grid;
    align-content: center;
    text-align: center;
  }

  .mobile-print-cover img {
    width: 42mm;
    margin: 0 auto 18mm;
  }

  .mobile-print-cover h1 {
    margin: 0 auto 7mm;
    font-size: 48pt;
  }

  .mobile-print-cover h2,
  .mobile-print-answer h2 {
    margin: 0;
    font-size: 25pt;
  }

  .mobile-print-answer p {
    margin-top: 14mm;
    font-size: 12pt;
    line-height: 1.85;
  }
}