/* ============================================================================
   BENCHMARK REPORT — gated landing page for the "State of AI Adoption in Thai
   Enterprises" report (FUNNEL.md, build-order item 4).

   Reuses the .rdy- landing-page framework from readiness.css (slim chrome,
   hero, cards, form states) so both lead-magnet pages read as one product.
   Everything here is prefixed .bmk- and covers only what this page adds:
   the two-column gate with the report-cover preview, and the select control
   clone.css doesn't style.
   ============================================================================ */

.bmk-gate-section { padding-top: 40px; }

.bmk-gate { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; align-items: center; }
.bmk-gate-copy h3 { margin: 8px 0 8px; font-family: var(--font-display); font-size: 24px; letter-spacing: -.01em; }
.bmk-gate-copy > p { margin: 0 0 6px; color: var(--text-body); font-size: 14px; line-height: 1.6; }

.bmk-form .lead-field { margin-top: 14px; }
.bmk-form .lead-submit { width: 100%; margin-top: 18px; }
.bmk-optional { color: var(--text-muted); font-style: normal; }
.bmk-form select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--hairline-strong); border-radius: var(--r-md);
  background: var(--canvas); color: var(--text-primary); font-family: var(--font-body); font-size: 15px;
  transition: border-color .18s ease; appearance: none;
}
.bmk-form select:focus { outline: none; border-color: var(--accent-blue-link); }

/* --- Report-cover preview -------------------------------------------------- */
.bmk-preview { display: flex; justify-content: center; }
.bmk-cover {
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  width: min(280px, 100%); aspect-ratio: 210 / 297; padding: 26px 22px;
  border: 1px solid var(--hairline-strong); border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--canvas-soft), var(--canvas) 55%, var(--accent-support-tint));
  box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
}
.bmk-cover-eyebrow { color: var(--accent-blue-link); font-family: var(--font-label); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.bmk-cover-title { font-family: var(--font-display); font-size: 24px; letter-spacing: -.01em; line-height: 1.2; color: var(--text-primary); }
.bmk-cover-meta { color: var(--text-muted); font-family: var(--font-label); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

/* --- Confirmed state ------------------------------------------------------- */
.bmk-confirmed h3 { margin: 8px 0 8px; font-family: var(--font-display); font-size: 24px; letter-spacing: -.01em; }
.bmk-confirmed p { margin: 0; color: var(--text-body); font-size: 14px; line-height: 1.6; }
.bmk-confirmed a { color: var(--accent-blue-link); text-decoration: none; }
.bmk-confirmed a:hover { text-decoration: underline; }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 720px) {
  .bmk-gate { grid-template-columns: 1fr; }
  .bmk-preview { order: -1; }
  .bmk-cover { width: min(220px, 70%); }
}