/* One section heading for every home-page section after the logos: Results, Claims, Features, News
   (13 Oct 2026, James: "every section needs to be consistent").
   Markup:
     <header class="shead rv">
       <p class="eyebrow shead__k">Results</p>
       <h2 class="shead__h" id="res-h">Proof at the scale high-volume claims demand.</h2>
       <p class="shead__d">One line from the site's own copy.</p>
     </header>
   The heading takes the left half; a description, when shown, sits in the right half with its last line on
   the heading's last baseline. Descriptions are hidden unless the review option "Descriptions: Beside" is
   on (html.cg-desc, set by shead.js). Below 900px everything stacks.
   Type and spacing follow the product pages' section heads (product.css .pp-h, .pp-sub, .pp-head), and the
   eyebrow is the shared contact section's (a dot, then the title), so the page reads as one system down to
   the contact form. */

/* Rhythm: the same padding and a hairline at the top of every section that uses .shead */
#main > section:is(.res, .cl, .xp, .news) {
  --sec-y: clamp(4rem, 6.5vw, 6rem);
  padding-block: var(--sec-y);
  border-block-start: 1px solid var(--line-dark);
}

.shead {
  --sh-h: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--gap-col);
  align-items: end;
  margin: 0 0 clamp(2.5rem, 5vw, 4.25rem);
}
#main .shead .shead__k {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: .625rem;
  margin: 0 0 1.25rem; /* 20px at every size, as on the shared contact eyebrow (.contact__h margin-top) */
  line-height: 1.2;
  color: rgb(255 255 255 / .66);
}
/* the dot: one person, the brand's motif (as on the contact eyebrow) */
.shead__k::before {
  content: "";
  flex: none;
  inline-size: .4375rem;
  block-size: .4375rem;
  border-radius: 50%;
  background: #8fb4ff;
}
#main .shead .shead__h {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  max-width: 18ch;
  font-size: var(--sh-h);
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1.04;
  color: var(--paper);
  text-wrap: balance;
}
/* James (15 Oct 2026): a small description sitting under the heading, always shown. */
.shead .shead__d {
  grid-column: 1;
  grid-row: 3;
  margin: 1rem 0 0;
  max-width: 46ch;
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.55;
  color: rgb(255 255 255 / .62);
  text-wrap: pretty;
}

@media (width <= 899px) {
  .shead { grid-template-columns: minmax(0, 1fr); }
  .shead .shead__d { margin-top: .875rem; }
}