/* Article-scoped styles for /journal/claude-travel-tech-independent-operators/.
   Everything else on the page is the Journal's own components.

   The one thing this article does differently: the site's page-enquiry form
   (.pgform) normally sits after </article> as a full-bleed dark band. Here it
   has to live inside the article, in the "What marketing stack should you
   automate?" section, so the heading, the copy, the strategy-call button and
   the form read as one conversion block. The markup, classes, JS hooks,
   validation, submission and success behaviour are the component's own and are
   untouched — only the band around it is neutralised so it sits at the width of
   the prose column. */

.pgform--inline {
  /* the band's own ground, padding and seam belong to a full-width section */
  padding: 0;
  background: none;
  border-bottom: 0;
  margin: 40px 0 8px;
}
.pgform--inline .pgform__inner { max-width: 100%; }
/* Inside .bw-prose the article's own typography outranks the card's:
   .bw-prose h2 (0,1,1) beats .pgform__title (0,1,0) and paints the heading
   --bw-ink, which is invisible on the card's dark half; the same is true of h3
   and of the prose paragraph rhythm. Each is restated here at (0,2,1). */
.bw-prose .pgform--inline .pgform__title {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.08; letter-spacing: -0.03em; font-weight: 800;
  color: var(--pf-white, #FFFFFF);
  margin: 0 0 18px; scroll-margin-top: 100px;
}
.bw-prose .pgform--inline .pgform__lede {
  font-family: 'Karla', system-ui, sans-serif;
  font-size: 17px; line-height: 1.6;
  color: rgba(242, 246, 238, 0.82); margin: 0 0 20px; max-width: 46ch;
}
.bw-prose .pgform--inline .pgform__done h3 {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  color: var(--pf-ink, #0C2A1C); margin: 0 0 10px; font-size: 21px; line-height: 1.25;
}
.bw-prose .pgform--inline .pgform__done p { color: var(--pf-body, #22452F); margin: 0; }
.bw-prose .pgform--inline p { margin-bottom: 0; }
.bw-prose .pgform--inline label { margin: 0; }

/* pageform.css collapses the card at a 1024px VIEWPORT, but here the card lives
   in a 760px column at every viewport width, so it must always be one column:
   copy and call button above, form below. */
.pgform--inline .pgform__card { grid-template-columns: minmax(0, 1fr); }
.pgform--inline .pgform__intro { justify-content: flex-start; }
.pgform--inline .pgform__intro > .pgform__lede { margin-bottom: 20px; }

/* At the 760px prose measure the card is already one column (pageform.css
   collapses it at 1024px), so the two halves stack: copy and call button above,
   form below. Slightly tighter padding than the full-width band, which is sized
   for a 1180px container. */
.pgform--inline .pgform__intro { padding: 34px 32px 32px; }
.pgform--inline .pgform__panel { padding: 32px 32px 30px; }

/* the strategy-call button: the site's pill, on the card's dark half */
.pgform--inline .pgform__cta { margin: 4px 0 0; }
.bw-prose .pgform--inline a.pgform__callbtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; box-sizing: border-box;
  font-family: 'Karla', sans-serif; font-size: 16px; font-weight: 600;
  line-height: 1.3; text-align: center; text-decoration: none;
  padding: 13px 26px; border-radius: var(--pf-r-pill, 999px);
  background: var(--pf-accent, #3E8E4F); color: #FFFFFF;
  border-bottom: 0;
  transition: background .18s ease, color .18s ease;
}
/* journal.css sets .bw-prose a{color;border-bottom} at (0,1,1) and a:hover at
   (0,1,1); both are restated here at (0,2,1) so the pill keeps its own colours */
.bw-prose .pgform--inline a.pgform__callbtn:hover,
.bw-prose .pgform--inline a.pgform__callbtn:focus-visible {
  background: #FFFFFF; color: var(--pf-ink, #0C2A1C); border-bottom-color: transparent;
}
.bw-prose .pgform--inline a.pgform__callbtn:focus-visible {
  outline: 3px solid var(--pf-accent-soft, #9FDCA9); outline-offset: 3px;
}

/* The form's own inputs must not inherit the article's prose typography. */
.bw-prose .pgform--inline input,
.bw-prose .pgform--inline textarea,
.bw-prose .pgform--inline label,
.bw-prose .pgform--inline button { font-family: 'Karla', sans-serif; }
.bw-prose .pgform--inline ul,
.bw-prose .pgform--inline ol { margin: 0; padding: 0; }

@media (max-width: 560px) {
  .pgform--inline { margin-top: 32px; }
  .pgform--inline .pgform__intro { padding: 26px 20px 24px; }
  .pgform--inline .pgform__panel { padding: 24px 20px 24px; }
  /* full-width, wrapping, 48px minimum target — never a clipped pill */
  .bw-prose .pgform--inline a.pgform__callbtn {
    display: flex; width: 100%; max-width: 100%;
    padding-left: 18px; padding-right: 18px; font-size: 15px;
  }
}
@media (max-width: 360px) {
  .pgform--inline .pgform__intro { padding: 22px 16px 20px; }
  .pgform--inline .pgform__panel { padding: 20px 16px 20px; }
  .bw-prose .pgform--inline a.pgform__callbtn { padding-left: 14px; padding-right: 14px; font-size: 14px; }
}