/* Phase 2 structural conversion enhancements.
   Loaded after style.css so these rules can extend the existing theme without
   disturbing the established responsive system. */

.ml-section-note {
  max-width: 760px;
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ml-line);
  color: rgba(21, 19, 15, 0.58);
  font-size: 0.9rem;
}

.ml-transformations--four {
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .ml-transformations--four {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .ml-transformations--four {
    grid-template-columns: repeat(4, 1fr);
  }
}

.ml-t-card--static {
  cursor: default;
}

.ml-t-card--static:hover .ml-t-card__media img {
  transform: none;
}

@media (min-width: 720px) {
  .ml-why--four {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .ml-why--four {
    grid-template-columns: repeat(4, 1fr);
  }
}

.ml-faq {
  border-top: 1px solid var(--ml-line);
}

.ml-faq__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

.ml-faq__intro .ml-lede {
  margin-top: 1.25rem;
}

.ml-faq__items {
  border-top: 1px solid var(--ml-line);
}

.ml-faq__item {
  border-bottom: 1px solid var(--ml-line);
}

.ml-faq__item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 2.5rem 1.4rem 0;
  font-family: var(--ml-font-display);
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.35;
}

.ml-faq__item summary::-webkit-details-marker {
  display: none;
}

.ml-faq__item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-family: var(--ml-font-body);
  font-size: 1.35rem;
  font-weight: 300;
  color: var(--ml-warm-taupe);
}

.ml-faq__item[open] summary::after {
  content: "−";
}

.ml-faq__item summary:focus-visible {
  outline: 2px solid var(--ml-warm-taupe);
  outline-offset: 4px;
}

.ml-faq__answer {
  padding: 0 2.5rem 1.5rem 0;
}

.ml-faq__answer p {
  margin: 0;
  color: rgba(21, 19, 15, 0.66);
  max-width: 66ch;
}

@media (min-width: 900px) {
  .ml-faq__layout {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 6rem;
    align-items: start;
  }

  .ml-faq__intro {
    position: sticky;
    top: 8rem;
  }
}

/* v2.5.30 — header/admin-bar alignment + conversion CTA refinement.
   WordPress shifts normal document flow down while logged in, but fixed theme
   chrome does not inherit that offset automatically. Align the fixed header and
   full-screen mobile nav with the admin toolbar so previewing draft acquisition
   pages does not expose a false white band between the header and page content. */
.admin-bar .ml-header {
  top: 32px;
}

.admin-bar .ml-mobile-nav {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .ml-header,
  .admin-bar .ml-mobile-nav {
    top: 46px;
  }
}

/* The Visualiser is the primary conversion action. Keep it visually consistent
   with the architectural UI rather than the oversized pill treatment inherited
   from generic buttons inside the mobile navigation. */
.ml-mobile-nav > .ml-mobile-nav__visualiser {
  width: 100%;
  min-height: 56px;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(249, 244, 242, 0.28);
  border-radius: 2px;
  font-family: var(--ml-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.13em;
  text-align: center;
}

.ml-header__visualiser {
  border-radius: 2px !important;
  letter-spacing: 0.09em;
}

/* v2.5.31 — utility/legal pages use the normal fixed-header offset from the
   body already. Their title hero therefore needs only editorial breathing room,
   not the large campaign-page top spacing used by generic inner pages. */
.ml-page-hero--legal {
  padding-top: clamp(2.75rem, 5vw, 4rem);
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

@media (max-width: 700px) {
  .ml-page-hero--legal {
    padding-top: 2.75rem;
    padding-bottom: 1.75rem;
  }
}