/* Article-scoped styles for /journal/mobile-site-speed-independent-accommodation/.
   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 "Want your site tested
   against these numbers?" 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; }
}


/* ---- crawl figures ---------------------------------------------------------
   The 606-site findings as a compact grid, on the Journal's own tokens. Numbers
   are set in Chivo, the family the rest of the site uses for figures. */
.sp-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; margin: 30px 0 34px; padding: 0; list-style: none;
}
.sp-stat {
  background: var(--bw-tint, #E9EFE4);
  border: 1px solid var(--bw-line, #D3E0CE);
  border-radius: var(--bw-r-md, 18px);
  padding: 20px 18px 18px; min-width: 0;
}
.bw-prose .sp-stat__n {
  font-family: 'Chivo', system-ui, sans-serif; font-weight: 900;
  font-size: clamp(26px, 2.6vw, 34px); line-height: 1; letter-spacing: -0.03em;
  color: var(--bw-field, #1E6B3C); margin: 0 0 8px;
}
.bw-prose .sp-stat__l {
  font-family: 'Karla', system-ui, sans-serif; font-weight: 700;
  font-size: 15px; line-height: 1.3; color: var(--bw-ink, #0C2A1C); margin: 0 0 6px;
}
.bw-prose .sp-stat__d {
  font-family: 'Karla', system-ui, sans-serif; font-size: 13.5px; line-height: 1.45;
  color: var(--bw-muted, #5A7264); margin: 0;
}

/* ---- the Deloitte pull quote ----------------------------------------------
   journal.css already styles .bw-prose blockquote; this is the same object with
   more weight, because the stat is the point of the section. */
.bw-prose blockquote.sp-pull {
  background: var(--bw-ink, #0C2A1C);
  border-left: 4px solid var(--bw-accent-mid, #7FC98B);
  border-radius: var(--bw-r-md, 18px);
  padding: 30px 32px; margin: 30px 0 28px;
}
.bw-prose blockquote.sp-pull p {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: clamp(19px, 1.9vw, 24px); line-height: 1.4; letter-spacing: -0.015em;
  font-weight: 600; color: var(--bw-cream, #F2F6EE); margin: 0;
}
.bw-prose blockquote.sp-pull strong { color: var(--bw-accent-soft, #9FDCA9); font-weight: 800; }
/* .bw-prose a (0,1,1) would paint this link dark green on a dark ground */
.bw-prose blockquote.sp-pull a {
  color: var(--bw-white, #FFFFFF); font-weight: 700;
  border-bottom: 1.5px solid rgba(159, 220, 169, 0.6);
}
.bw-prose blockquote.sp-pull a:hover,
.bw-prose blockquote.sp-pull a:focus-visible {
  color: var(--bw-accent-soft, #9FDCA9); border-bottom-color: var(--bw-accent-soft, #9FDCA9);
}

/* ---- two CTAs side by side in the conversion card ------------------------- */
.pgform--inline .pgform__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.bw-prose .pgform--inline a.pgform__callbtn--ghost {
  background: transparent; color: var(--pf-cream, #F2F6EE);
  border: 1.5px solid rgba(242, 246, 238, 0.42);
}
.bw-prose .pgform--inline a.pgform__callbtn--ghost:hover,
.bw-prose .pgform--inline a.pgform__callbtn--ghost:focus-visible {
  background: rgba(242, 246, 238, 0.12); color: #FFFFFF; border-color: var(--pf-accent-soft, #9FDCA9);
}

@media (max-width: 760px) {
  .sp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sp-stats { grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 26px 0 30px; }
  .sp-stat { padding: 16px 16px 14px; }
  .bw-prose blockquote.sp-pull { padding: 24px 20px; border-radius: var(--bw-r-sm, 12px); }
  .bw-prose blockquote.sp-pull p { font-size: 18px; }
  /* both buttons go full width so neither can be clipped */
  .pgform--inline .pgform__cta { flex-direction: column; }
  .bw-prose .pgform--inline a.pgform__callbtn--ghost { display: flex; width: 100%; }
}