/* Base mobile adjustments */
html, body {
  font-size: 16px; /* ensure legible base */
}

/* Panel content flow: stack and reduce gaps */
.panel-content {
  flex-direction: column;   /* stack vertically */
  align-items: center;      /* center children horizontally */
  gap: 1rem;                /* vertical spacing */
  max-width: 100%;
  padding: 0 0rem;
}

/* Panel 1 */
.panel-intro {
  min-height: 0;            /* let content define height */
  padding: 0rem;            /* tighter on mobile */
}

.panel-image img {
  width: 35%;
  max-width: 360px;         /* cap for small screens */
}

.image-title {
  width: 100%;
  max-width: 300px;
}

.panel-image,
.panel-intro .panel-text {
  margin: 0 auto;           /* ensure each block centers */
}

.panel-intro .panel-text {
  width: 80%;               
  max-width: 480px;          /* remove the desktop cap */
  margin: 0 auto;       /* center the block */
  text-align: center;       /* center the text inside */
}

/* Panel 2 */
.panel-purchase {
  padding: 1.5rem 1rem 2rem;
}

.panel-purchase h2 {
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}

.panel-purchase .panel-text {
  font-size: 0.98rem;
  line-height: 1.6;
  padding: 1rem;            /* lighter box padding on mobile */
  max-width: 100%;
}

/* Purchase options: stack list above button cleanly */
.purchase-options {
  flex-direction: column;
  align-items: center;      /* center children horizontally */
  gap: 0.75rem;
}

.purchase-list {
  max-width: 100%;
}

.purchase-button {
  width: 50%;
  margin: 0 auto;           /* centers the block horizontally */
  display: block;           /* ensures margin:auto works */
  padding: 12px 16px;       /* finger-friendly tap target */
  text-align: center;       /* keeps the text centered inside */
}

/* Panel 3 */
.panel-details {
  padding: 2rem 1rem;
}

.panel-overlay {
  padding: 1rem;
}

.details-image {
  max-width: 100%;
}

/* Contact panel */
.contact {
  padding: 1.5rem 1rem;
}

.contact-title {
  font-size: 1.4rem;
}

.contact-subtitle {
  font-size: 0.95rem;
}

/* Form wrapper: ensure no scrollbars and good fit */
.form-wrapper {
  max-height: 556px;        /* tighter cap on mobile */
  padding: 0.75rem;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.6); /* slightly stronger for small screens */
}

/* Typographic small refinements */
.kicker {
  font-size: 0.95rem;
  letter-spacing: 0.1em;
}

/* Gold bullets alignment tweak */
.panel-purchase ul li {
  padding-left: 1rem;
}

.panel-purchase ul li::before {
  top: 0.7em;
  width: 5px;
  height: 5px;
}