/*
 * Heading treatment.
 *
 * Every section heading on the site was plain ink, which left the page reading
 * as a wall of grey with the teal only in buttons and links. This gives the
 * headings the brand colour without shouting: the type starts in ink and warms
 * into teal across its own width, so the colour arrives at the end of the
 * phrase rather than sitting on all of it.
 *
 * Loaded last, after ds-page.css, because those files set `color` on the same
 * selectors at the same specificity — order is what decides this.
 *
 * The fill is painted with background-clip:text, so:
 *  - `color` is always declared first as the fallback. A browser without
 *    background-clip:text keeps the solid ink/white and loses nothing.
 *  - the clip only applies inside @supports, so `color: transparent` can never
 *    be left on its own and render the heading invisible.
 *  - forced-colours mode drops the whole thing and goes back to system ink.
 */

/* ------------------------------------------------------------------ */
/* light ground                                                        */
/* ------------------------------------------------------------------ */

.ds-head h2,
.ds-brand-header h2,
.ds-prose h2,
.ds-query-copy h2 {
  color: var(--ds-ink);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .ds-head h2,
  .ds-brand-header h2,
  .ds-prose h2,
  .ds-query-copy h2 {
    /* Almost vertical, deliberately. A horizontal ramp is painted across the
       element box rather than across the text, so a heading that wraps leaves
       its short last line sitting in the ink end of the gradient - "...one pass
       of the" in teal above a plain "drive". Running the ramp down the box
       instead is wrap-proof: one line reads as a duotone letterform, two lines
       hand the colour from the first to the second. The 8deg of tilt is there
       only to keep it from looking mechanical. */
    background-image: linear-gradient(
      172deg,
      var(--ds-ink) 0%,
      var(--ds-ink) 22%,
      var(--ds-teal-deep) 88%,
      var(--ds-teal) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Chrome will otherwise clip descenders of the last line against the
       text box when the fill is painted. */
    padding-bottom: 0.06em;
  }
}

/* ------------------------------------------------------------------ */
/* dark ground                                                         */
/* ------------------------------------------------------------------ */

/* On the ink and teal plates the same idea runs white into the light teal the
   dark surfaces already use for their eyebrows. */
.ds-phero-content h1,
.ds-prodshow-body h2,
.ds-cta-inner h2 {
  color: #fff;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .ds-phero-content h1,
  .ds-prodshow-body h2,
  .ds-cta-inner h2 {
    background-image: linear-gradient(
      172deg,
      #ffffff 0%,
      #ffffff 30%,
      #8fe8de 90%,
      #4fd6c7 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 0.06em;
  }
}

/* The product heading carries its own teal word already. A span inside a
   clipped heading paints its own colour rather than the gradient, so it has to
   be brightened to stay legible against the dark plate. */
.ds-prodshow-body h2 span {
  color: #4fd6c7;
}

/* ------------------------------------------------------------------ */
/* accessibility                                                       */
/* ------------------------------------------------------------------ */

@media (forced-colors: active) {
  .ds-head h2,
  .ds-brand-header h2,
  .ds-prose h2,
  .ds-query-copy h2,
  .ds-phero-content h1,
  .ds-prodshow-body h2,
  .ds-cta-inner h2 {
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: CanvasText;
  }
}