/* ============================================================================
   The provider area.

   Scoped to .yb-provider-page and nothing else. Every color, radius and
   measure below is one the site already defines in styles.css — this file adds
   arrangement, not a second visual system. The provider pages are the one
   place outside the homepage that carries illustrations, so what it mostly
   does is give them room.

   Loaded only on /for-providers. The two form pages keep the plain
   info-hero + info-body chrome they share with the rest of the site.
   ========================================================================== */

/* ---------------------------------------------------------------- the hero
   Paper, not the dark band every other info page opens with. The six
   illustrations are drawn for light and lavender grounds — their stroke
   colors are the site's ink and purple, and on the dark band they would
   disappear. The reference the owner supplied is light for the same reason. */
.yb-provider-page .ybp-hero {
  padding: clamp(34px, 6vw, 74px) 0 clamp(26px, 4vw, 52px);
}
.yb-provider-page .ybp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(26px, 4vw, 54px);
}
.yb-provider-page .ybp-hero h1 {
  font-size: clamp(32px, 5.2vw, 54px);
  margin: 16px 0 0;
}
.yb-provider-page .ybp-hero-lede {
  margin-top: 18px;
  max-width: 46ch;
  font-size: clamp(16px, 1.6vw, 18.5px);
  line-height: 1.62;
  color: var(--muted);
}
.yb-provider-page .ybp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.yb-provider-page .ybp-hero-helper {
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted);
}
.yb-provider-page .ybp-hero-visual {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
}

/* ------------------------------------------------------------- the sections */
.yb-provider-page .ybp-section {
  padding: clamp(34px, 5vw, 62px) 0;
  border-top: 1px solid var(--line);
}
.yb-provider-page .ybp-section h2 {
  font-size: clamp(23px, 2.9vw, 33px);
  /* Wide enough that neither of the two section headings wraps at desktop,
     bounded so a longer one never runs the full 1320px. */
  max-width: 54ch;
}
.yb-provider-page .ybp-section-lede {
  margin-top: 12px;
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--muted);
}

/* ------------------------------------------------------------ three benefits */
.yb-provider-page .ybp-benefits {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: clamp(22px, 3vw, 34px);
}
.yb-provider-page .ybp-benefit {
  min-width: 0;
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.yb-provider-page .ybp-benefit-visual {
  display: block;
  width: 152px;
  max-width: 100%;
  height: auto;
}
.yb-provider-page .ybp-benefit h3 {
  margin-top: 18px;
  font-size: 19.5px;
}
.yb-provider-page .ybp-benefit p {
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* ------------------------------------------------------------- how it works
   A real ordered list. The numbers are the list's own — a counter rather than
   three typed spans — so the sequence survives reordering and reads to a
   screen reader as "1 of 3". */
.yb-provider-page .ybp-steps {
  list-style: none;
  counter-reset: ybp-step;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(22px, 3vw, 34px);
  padding: 0;
}
.yb-provider-page .ybp-steps li {
  counter-increment: ybp-step;
  min-width: 0;
}
.yb-provider-page .ybp-steps li::before {
  content: counter(ybp-step, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--purple-tint);
  color: var(--purple);
  font-family: "DM Sans", sans-serif;
  font-size: 13.5px;
  font-weight: 700;
}
.yb-provider-page .ybp-steps h3 {
  margin-top: 14px;
  font-size: 18.5px;
}
.yb-provider-page .ybp-steps p {
  margin-top: 7px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}

.yb-provider-page .ybp-source-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
  margin-top: clamp(26px, 4vw, 40px);
  padding: clamp(18px, 2.6vw, 26px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.yb-provider-page .ybp-source-note p {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink);
}
.yb-provider-page .ybp-source-note a {
  color: var(--purple);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.yb-provider-page .ybp-source-visual {
  display: block;
  width: 132px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ----------------------------------------------------------- pilot invitation */
.yb-provider-page .ybp-pilot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(24px, 4vw, 46px);
  background: var(--purple-tint);
  border-radius: var(--radius-panel);
}
.yb-provider-page .ybp-pilot h2 {
  font-size: clamp(23px, 3vw, 34px);
  color: var(--purple-dark);
}
/* On the lavender panel the ordinary muted grey only just clears contrast;
   styles.css already carries the tint-safe one. */
.yb-provider-page .ybp-pilot :is(p, small) { color: var(--muted-on-tint); }
.yb-provider-page .ybp-pilot p {
  margin-top: 12px;
  max-width: 56ch;
  font-size: 16.5px;
  line-height: 1.62;
}
.yb-provider-page .ybp-pilot .ybp-actions { margin-top: 22px; }
.yb-provider-page .ybp-pilot-helper { font-size: 14px; margin-top: 12px; }
.yb-provider-page .ybp-pilot-visual {
  display: block;
  width: 180px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ------------------------------------------------------------------- FAQ */
.yb-provider-page .ybp-faq { margin-top: clamp(20px, 3vw, 30px); }
.yb-provider-page .ybp-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 3vw, 30px);
}

/* ------------------------------------------------------------- breakpoints */
@media (max-width: 479px) {
  /* Two stacked buttons, full width, tall enough for a thumb. The artwork
     follows them: on a phone the copy and the actions come first. */
  .yb-provider-page .ybp-actions > .btn {
    width: 100%;
    min-height: 46px;
    white-space: normal;
  }
}
@media (min-width: 700px) {
  .yb-provider-page .ybp-benefits,
  .yb-provider-page .ybp-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .yb-provider-page .ybp-source-note {
    grid-template-columns: minmax(0, 1fr) 132px;
  }
}
@media (min-width: 960px) {
  .yb-provider-page .ybp-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
  .yb-provider-page .ybp-pilot {
    grid-template-columns: 180px minmax(0, 1fr);
  }
}

/* On a phone the hero illustration was filling the width and pushing the
   actions below the fold. It is a supporting drawing, not the message: a
   small, deliberate mark under the copy. */
@media (max-width: 699px) {
  .yb-provider-page .ybp-hero-visual {
    max-width: 232px;
    margin: 10px auto 0;
  }
  .yb-provider-page .ybp-hero-grid { gap: 12px; }
}