/* Moonlit — theme-served pages (Step 24). Uses the theme's own parts throughout. */
.ml-tp__in { display: flex; flex-direction: column; gap: 56px; padding-block: 64px 96px; max-width: 820px; }
.ml-tp__b { display: flex; flex-direction: column; gap: 16px; }
.ml-tp__b > h2 { color: var(--ml-text); }

.ml-tp__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; }
.ml-tp__facts li { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid var(--ml-line); }
.ml-tp__facts em { font-style: normal; }
.ml-tp__facts a { color: var(--ml-accent); text-decoration: underline; text-underline-offset: 3px; }

.ml-tp__steps { display: flex; flex-direction: column; }
.ml-tp__steps li { display: flex; gap: 18px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--ml-line); }
.ml-tp__n {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px;
  width: 40px; height: 40px; border: 1px solid var(--ml-line); border-radius: 99px;
  font-family: var(--ml-display); font-size: 16px; color: var(--ml-rose);
}
.ml-tp__sb { display: flex; flex-direction: column; gap: 3px; }
.ml-tp__sb strong { font-weight: 400; font-size: 16px; }
.ml-tp__sb em { font-style: normal; font-size: 13px; color: var(--ml-text-2); }

.ml-tp__shapes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.ml-tp__shapes li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 8px; border: 1px solid var(--ml-line); }

.ml-tp__form { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.ml-tp__ta { height: auto; padding-block: 12px; resize: vertical; }
.ml-tp__form .ml-btn { align-self: flex-start; margin-top: 8px; }

/* 5 Nov (Harsh, /pages/contact screenshot: "form … bada kar do, side me bahut space he"). On a page with the contact form
   (contact, inquire, rewards) the body uses the page's full width: on a desktop the form takes a wide right column and the
   text / email sections sit on the left; inside the form Name | Email share a row, Phone and the message run full width.
   The three forms list their fields in the same order (label, field × 4, then Send), which the placement below follows. */
.ml-tp__in:has(.ml-tp__form) .ml-tp__form .ml-select { max-width: none; }
.ml-tp__in:has(.ml-tp__form) .ml-tp__ta { min-height: 168px; }
@media (min-width: 768px) {
  .ml-tp__in:has(.ml-tp__form) .ml-tp__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 10px; max-width: none; }
  .ml-tp__form > :nth-child(1) { grid-area: 1 / 1; }
  .ml-tp__form > :nth-child(2) { grid-area: 2 / 1; }
  .ml-tp__form > :nth-child(3) { grid-area: 1 / 2; }
  .ml-tp__form > :nth-child(4) { grid-area: 2 / 2; }
  .ml-tp__form > :nth-child(5) { grid-area: 3 / 1 / 4 / -1; margin-top: 10px; }
  .ml-tp__form > :nth-child(6) { grid-area: 4 / 1 / 5 / -1; }
  .ml-tp__form > :nth-child(7) { grid-area: 5 / 1 / 6 / -1; margin-top: 10px; }
  .ml-tp__form > :nth-child(8) { grid-area: 6 / 1 / 7 / -1; }
  .ml-tp__form > :nth-child(9) { grid-area: 7 / 1; justify-self: start; }
}
@media (min-width: 1024px) {
  /* row-gap 0: the form spans 12 rows, and gaps between empty rows would add height; the left sections space themselves */
  .ml-tp__in:has(.ml-tp__form) { max-width: var(--ml-max); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 96px; row-gap: 0; align-items: start; }
  .ml-tp__in:has(.ml-tp__form) > .ml-tp__b { grid-column: 1; margin-bottom: 48px; }
  .ml-tp__in:has(.ml-tp__form) > .ml-tp__b:has(.ml-tp__form) { grid-column: 2; grid-row: 1 / span 12; }
  .ml-tp__in:has(.ml-tp__form) .ml-tp__facts { grid-template-columns: 1fr; }
}

.ml-tp__cta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 32px; background: var(--ml-porcelain);
}

@media (max-width: 767px) {
  .ml-tp__in { gap: 40px; padding-block: 36px 64px; }
  .ml-tp__facts { grid-template-columns: 1fr; gap: 14px; }
  .ml-tp__shapes { grid-template-columns: repeat(3, 1fr); }
  .ml-tp__cta { padding: 24px 20px; }
}