/* ==========================================================================
   ICGC Praise Temple — Testimonies

   Loaded only on pages carrying an [icgc_testimony_*] shortcode. Every rule is
   written .tst.tst so it beats Divi's two-class generated selectors without
   an !important war — the same doubling abc.css uses, and for the same reason.

   No banner on this page by request, so the opening is eyebrow, title, lede on
   the paper background. That makes the first thing a person sees the invitation
   rather than a photograph, which suits a page asking somebody to tell you
   something personal.
   ========================================================================== */

/* ---- the pair on Connect ------------------------------------------------- */
/* Two invitations sharing one band. Bible class on the left, testimonies on the
   right, because the class is the older of the two and people look for it
   where it has always been. auto-fit rather than a fixed 1fr 1fr: at 620px the
   two cards stop fitting side by side and drop into a column on their own. */
.tst.tst .tst-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  align-items: stretch;
}
.tst.tst .tst-pair > * {
  background: var(--ad-surface);
  border: 1px solid var(--ad-rule);
  padding: 34px 30px 30px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
/* The button sits on the floor of its card whatever the lede above it runs to,
   so the two read as a pair rather than as two things that happen to be next
   to each other. */
.tst.tst .tst-pair .tst-cta-go { margin-top: auto; padding-top: 18px; }

.tst.tst .tst-cta-eyebrow {
  font-family: var(--ad-display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ad-gold);
  margin: 0 0 10px;
}
.tst.tst .tst-cta-title {
  font-family: var(--ad-display);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 12px;
  color: var(--ad-ink);
}
.tst.tst .tst-cta-lede {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ad-text2);
  margin: 0;
  max-width: 46ch;
  margin-inline: auto;
}

/* ---- headings and ledes -------------------------------------------------- */
.tst.tst .tst-h {
  font-family: var(--ad-display);
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 12px;
  color: var(--ad-ink);
}
.tst.tst .tst-lede {
  font-size: var(--t-lede);
  line-height: 1.6;
  color: var(--ad-text2);
  margin: 0 0 26px;
  max-width: 62ch;
}
.tst.tst.tst-staff .tst-h { margin-top: 62px; }
.tst.tst.tst-staff .tst-h:first-child { margin-top: 0; }

/* ---- the form ------------------------------------------------------------ */
.tst.tst .tst-form { max-width: 640px; }
.tst.tst .tst-row { margin-bottom: 20px; }
.tst.tst .tst-row label,
.tst.tst .tst-legend {
  display: block;
  font-family: var(--ad-display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ad-text2);
  margin-bottom: 7px;
}
.tst.tst .tst-row input[type="text"],
.tst.tst .tst-row input[type="email"],
.tst.tst .tst-row input[type="tel"],
.tst.tst .tst-row input[type="file"],
.tst.tst .tst-row select,
.tst.tst .tst-row textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  border: 1px solid var(--ad-rule);
  background: var(--ad-surface);
  font-family: inherit;
  font-size: 17px;
  color: var(--ad-text);
}
.tst.tst .tst-row textarea { min-height: 190px; line-height: 1.6; resize: vertical; }
.tst.tst .tst-row input:focus,
.tst.tst .tst-row textarea:focus,
.tst.tst .tst-row select:focus {
  outline: 2px solid var(--ad-gold);
  outline-offset: 1px;
}
.tst.tst .tst-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.tst.tst .tst-hint {
  font-size: var(--t-small);
  color: var(--ad-text2);
  margin: 7px 0 0;
  line-height: 1.55;
}

/* Whether a field is needed depends on how the person chose to share, so the
   label has to be able to say so and to change when they change their mind.
   Written on the label rather than shown only by a red outline after a failed
   submit — being told what is needed beats being told what was wrong. */
.tst.tst .tst-opt,
.tst.tst .tst-need {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.1em;
  margin-left: 7px;
  padding: 2px 6px;
}
.tst.tst .tst-opt  { background: var(--ad-surface2); color: var(--ad-text2); }
.tst.tst .tst-need { background: rgba(163, 64, 50, 0.12); color: var(--ad-clay); }

/* The three ways to give a testimony. Cards rather than bare radios: this is
   the choice the whole form turns on, and it deserves more than a row of dots.
   The label wraps the input, so the whole card is the hit area — which is the
   difference between usable and not on a phone. */
.tst.tst .tst-ways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
/* label.tst-way, not .tst-way. The rule above styles every label in a .tst-row
   as an uppercase letterspaced field label, at (0,3,1) — a bare .tst-way is
   (0,3,0) and loses, which set the whole card in capitals. Caught by building
   the mock-up against this stylesheet rather than against a sketch. */
.tst.tst .tst-row label.tst-way {
  border: 1px solid var(--ad-rule);
  background: var(--ad-surface);
  /* Even, and tighter than it was. The old 16/16/14 was hung off a heading with
     a paragraph under it; with the heading alone that bottom padding sat under
     nothing. */
  padding: 13px 15px;
  cursor: pointer;
  display: block;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  color: inherit;
}
.tst.tst .tst-way b {
  display: block;
  font-family: var(--ad-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  /* No bottom margin. There is nothing under it any more, and 5px of it was
     holding the card open against its own padding. */
  margin: 8px 0 0;
  color: var(--ad-ink);
}

/* A stack of plain choices — "may we share it" — where the label is the answer
   rather than the name of a field, so it must not take the field-label styling
   either. */
.tst.tst .tst-row label.tst-choice {
  display: block;
  margin: 0 0 8px;
  text-transform: none;
  letter-spacing: 0;
  font-family: inherit;
  font-size: var(--t-small);
  font-weight: 400;
  color: var(--ad-text);
  cursor: pointer;
}
.tst.tst .tst-row label.tst-choice:last-child { margin-bottom: 0; }
.tst.tst .tst-way:has(input:checked) {
  border-color: var(--ad-gold);
  box-shadow: inset 0 0 0 1px var(--ad-gold);
  background: rgba(201, 162, 39, 0.06);
}
/* :has() is recent. Without it the card still works — it is a real radio in a
   real label — it just does not light up, so this is decoration only. */
.tst.tst .tst-way input { margin: 0; }

/* Revealed by the choice above. Rendered VISIBLE by the server and hidden by
   the script, never the reverse: markup that starts hidden stays hidden when
   the script fails, and nobody can tell you why the box will not appear. */
.tst.tst .tst-branch {
  border-left: 3px solid var(--ad-gold);
  padding: 18px 0 2px 20px;
  margin: 22px 0 0;
}
.tst.tst .tst-branch[hidden] { display: none; }

/* ---- buttons ------------------------------------------------------------- */
.tst.tst .tst-btn,
.tst.tst .tst-b {
  display: inline-block;
  font-family: var(--ad-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: 1px solid var(--ad-gold);
  background: var(--ad-gold);
  color: #14100C;
  text-decoration: none;
  cursor: pointer;
}
.tst.tst .tst-b {
  padding: 10px 16px;
  font-size: 14px;
  background: transparent;
  border-color: var(--ad-rule);
  color: var(--ad-text);
}

/* The invitation on Connect, matched to the two cards beside it - see the note
   in abc.css. This one was the SHORT one of the three at 53px, because it never
   carried the 44px touch floor the others did; it gets it here, on the border
   box, where 44 is a minimum rather than an addition. The 2px border is the
   other half of making the three identical, and it is invisible on a solid
   button whose border is its own fill colour. */
.tst.tst.tst-cta .tst-btn {
  box-sizing: border-box;
  padding: 15px 30px;
  border-width: 2px;
  min-height: 44px;
}
.tst.tst .tst-b:hover { border-color: var(--ad-gold); }
.tst.tst .tst-quiet {
  background: none;
  border: 0;
  color: var(--ad-text2);
  text-decoration: underline;
  font-size: var(--t-small);
  cursor: pointer;
  padding: 0;
}

/* ---- outcome cards ------------------------------------------------------- */
.tst.tst .tst-card {
  border: 1px solid var(--ad-rule);
  background: var(--ad-surface);
  padding: 34px 30px;
  max-width: 640px;
}
.tst.tst .tst-card h2 {
  font-family: var(--ad-display);
  font-size: var(--t-h3);
  margin: 0 0 12px;
  color: var(--ad-ink);
}
.tst.tst .tst-card p { font-size: var(--t-small); line-height: 1.65; color: var(--ad-text); }
.tst.tst .tst-card p:last-child { margin-bottom: 0; }

/* The invitation shown to somebody the member register does not know. Set apart
   from the thank-you above it, because it is a different thought: the testimony
   is received either way, and this is an invitation rather than a condition. */
.tst.tst .tst-invite {
  margin-top: 24px;
  padding: 22px 24px;
  background: var(--ad-surface2);
  border-left: 3px solid var(--ad-gold);
}
.tst.tst .tst-invite h3 {
  font-family: var(--ad-display);
  font-size: 20px;
  margin: 0 0 8px;
  color: var(--ad-ink);
}
.tst.tst .tst-times { margin: 12px 0 0; padding: 0; list-style: none; }
.tst.tst .tst-times li {
  font-size: var(--t-small);
  padding: 5px 0;
  border-bottom: 1px solid var(--ad-rule);
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.tst.tst .tst-times li:last-child { border-bottom: 0; }
.tst.tst .tst-times b { font-family: var(--ad-display); }

/* ---- the staff screen ---------------------------------------------------- */
.tst.tst .tst-box { border: 1px solid var(--ad-rule); background: var(--ad-surface); }
.tst.tst .tst-box-head {
  background: var(--ad-ink);
  color: #F2EDE3;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--ad-display);
}
.tst.tst .tst-k {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--ad-gold);
  color: #14100C;
  padding: 4px 9px;
}
.tst.tst .tst-w { font-size: 15px; opacity: 0.78; }
.tst.tst .tst-box-body { padding: 30px 26px; }

.tst.tst .tst-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--ad-rule);
  border-bottom: 0;
  margin-bottom: 26px;
}
.tst.tst .tst-stat {
  padding: 18px 20px;
  border-bottom: 1px solid var(--ad-rule);
  border-right: 1px solid var(--ad-rule);
}
.tst.tst .tst-stat:last-child { border-right: 0; }
.tst.tst .tst-stat b {
  display: block;
  font-family: var(--ad-display);
  font-size: 30px;
  line-height: 1;
  color: var(--ad-ink);
}
.tst.tst .tst-stat span {
  display: block;
  margin-top: 6px;
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ad-text2);
}

.tst.tst .tst-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tst.tst .tst-tabs a {
  font-family: var(--ad-display);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 14px;
  border: 1px solid var(--ad-rule);
  color: var(--ad-text);
  text-decoration: none;
}
.tst.tst .tst-tabs a.is-on { background: var(--ad-gold); border-color: var(--ad-gold); color: #14100C; }

.tst.tst .tst-item {
  border: 1px solid var(--ad-rule);
  background: var(--ad-surface);
  padding: 20px 22px;
  margin-bottom: 14px;
}
.tst.tst .tst-item-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.tst.tst .tst-item-head h4 {
  font-family: var(--ad-display);
  font-size: 21px;
  margin: 0;
  color: var(--ad-ink);
}
.tst.tst .tst-tag {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  background: var(--ad-surface2);
  color: var(--ad-text2);
}
.tst.tst .tst-tag.is-typed  { background: rgba(15, 93, 78, 0.12);  color: var(--ad-green); }
.tst.tst .tst-tag.is-upload { background: rgba(201, 162, 39, 0.16); color: #7A611A; }
.tst.tst .tst-tag.is-person { background: rgba(163, 64, 50, 0.10); color: var(--ad-clay); }
/* Not a decoration. Whether the person is on the member register is the thing
   the office acts on, so it reads at a glance rather than needing a click. */
.tst.tst .tst-tag.is-guest  { background: var(--ad-ink); color: #F2EDE3; }
.tst.tst .tst-when { font-size: var(--t-small); color: var(--ad-text2); margin-left: auto; }
.tst.tst .tst-body {
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--ad-text);
  white-space: pre-wrap;
  margin: 0 0 12px;
}
.tst.tst .tst-file {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid var(--ad-rule);
  background: var(--ad-surface2);
  font-size: var(--t-small);
  text-decoration: none;
  color: var(--ad-text);
}
.tst.tst .tst-file:hover { border-color: var(--ad-gold); }
.tst.tst .tst-file b { font-family: var(--ad-display); }

.tst.tst .tst-shut {
  border-left: 3px solid var(--ad-rule);
  padding: 16px 0 16px 18px;
  font-size: var(--t-small);
  line-height: 1.65;
  color: var(--ad-text2);
}

/* ---- the printed report -------------------------------------------------- */
/* The house way of making a document: print CSS and the browser's own "Save as
   PDF". The giving statements — which are a tax document — already work this
   way, so it is a pattern the office has used rather than a new one, and it
   needs no PDF library on a host that has none. */
@media print {
  .tst.tst .tst-tabs,
  .tst.tst .tst-stats,
  .tst.tst .tst-box-head,
  .tst.tst .tst-btn,
  .tst.tst .tst-b,
  .tst.tst .tst-lede { display: none !important; }

  .tst.tst .tst-box { border: 0; }
  .tst.tst .tst-box-body { padding: 0; }
  .tst.tst .tst-item {
    border: 0;
    border-bottom: 1px solid #999;
    padding: 0 0 18px;
    margin: 0 0 18px;
    /* A testimony split across two sheets is a testimony somebody has to
       reassemble by hand at a service. */
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .tst.tst .tst-body { font-size: 12pt; line-height: 1.55; }
  .tst.tst .tst-when { margin-left: 0; }
}

/* ---- phones -------------------------------------------------------------- */
@media (max-width: 700px) {
  .tst.tst .tst-two { grid-template-columns: 1fr; }
  .tst.tst .tst-box-body { padding: 22px 16px; }
  .tst.tst .tst-pair > * { padding: 26px 20px 24px; }
  .tst.tst .tst-form { max-width: none; }
  .tst.tst .tst-item-head { gap: 8px; }
  .tst.tst .tst-when { margin-left: 0; width: 100%; }
}

/* Touch, asked of the browser rather than guessed from the width — the page
   cache varies on User-Agent, so a width query is the wrong question. */
@media (pointer: coarse) {
  .tst.tst .tst-btn { padding: 17px 30px; }
  .tst.tst .tst-b { padding: 13px 18px; }
  /* This one has never applied and is left as it is on purpose. It is (0,3,0)
     and the base rule is `.tst.tst .tst-row label.tst-way` at (0,3,1), which
     wins — the same specificity trap the comment up there records, one rule
     further down the same file.

     Not switched on, because it would only make the card bigger and the card
     was just asked to be smaller. It costs nothing either: the whole label is
     the hit area, and one heading at 13px padding still measures over 50px
     tall, comfortably past the 44px a finger needs. */
  .tst.tst .tst-way { padding: 18px; }
}

/* ---- the heading and its info button ------------------------------------ */
/* The explanation lives behind a button rather than above the fields. Three
   paragraphs of preamble in front of a form asking somebody to write something
   personal is three paragraphs between them and the box. */
.tst.tst .tst-head { display: flex; align-items: flex-start; gap: 12px; }
.tst.tst .tst-head .tst-h { margin: 0; }
.tst.tst .tst-info { position: relative; }
.tst.tst .tst-info-btn {
  list-style: none;
  cursor: pointer;
  width: 27px;
  height: 27px;
  border: 1px solid var(--ad-rule);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 14px/1 var(--ad-display);
  color: var(--ad-text2);
}
.tst.tst .tst-info-btn::-webkit-details-marker { display: none; }
.tst.tst .tst-info[open] .tst-info-btn { border-color: var(--ad-gold); color: var(--ad-ink); }
.tst.tst .tst-info-body {
  position: absolute;
  z-index: 5;
  top: 34px;
  left: 0;
  width: 62ch;
  max-width: 76vw;
  background: var(--ad-surface);
  border: 1px solid var(--ad-rule);
  padding: 18px 20px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ad-text);
}
.tst.tst .tst-info-body p { margin: 0 0 10px; }
.tst.tst .tst-info-body p:last-child { margin: 0; }

/* Visible to a screen reader, nowhere else. The "i" alone says nothing. */
.tst.tst .tst-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- what went wrong ----------------------------------------------------- */
.tst.tst .tst-oops {
  border-left: 3px solid var(--ad-clay);
  background: rgba(163, 64, 50, 0.07);
  padding: 15px 18px;
  margin: 0 0 24px;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ad-text);
}

/* ---- odds and ends on the form ------------------------------------------ */
.tst.tst .tst-short { min-height: 92px; }
.tst.tst .tst-nest { margin: 16px 0 0; }
.tst.tst .tst-why[hidden] { display: none; }
.tst.tst .tst-again { margin: 22px 0 0; }
.tst.tst .tst-quiet-link { font-size: var(--t-small); color: var(--ad-text2); }
.tst.tst .tst-addr { margin: 12px 0 0; }
.tst.tst .tst-inline { display: inline; }

/* Off the screen rather than display:none. Some bots skip anything hidden;
   none of them read the label. */
.tst.tst .tst-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.tst.tst .tst-tag.is-private { background: var(--ad-clay); color: #F7F2EA; }

/* ---- the dialog ---------------------------------------------------------- */
/* Defaults to display:none, which is safe here and only here: this element is
   created by the script, so if the script did not run there is no overlay to
   be stuck hidden — the panel is still sitting on the page, visible. */
.tst-ov {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(20, 16, 12, 0.62);
  padding: 40px 18px;
  overflow-y: auto;
}
.tst-ov.is-open { display: block; }
.tst-ov > .tst-panel {
  position: relative;
  background: var(--ad-surface);
  max-width: 700px;
  margin: 0 auto;
  padding: 38px 36px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}
.tst-ov .tst-ov-x {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: 0;
  font: 400 30px/1 var(--ad-display);
  color: var(--ad-text2);
  cursor: pointer;
  padding: 6px 10px;
}
.tst-ov .tst-ov-x:hover { color: var(--ad-ink); }
html.tst-noscroll, html.tst-noscroll body { overflow: hidden; }

@media (max-width: 700px) {
  .tst-ov { padding: 0; }
  .tst-ov > .tst-panel { padding: 44px 18px 26px; max-width: none; min-height: 100%; }
}

/* ---- printing ------------------------------------------------------------ */
/* Only the typed ones. A recording cannot go on paper, and an "in person" row
   is a job to arrange rather than a testimony to read. */
@media print {
  .tst.tst .tst-noprint,
  .tst.tst .tst-shut,
  .tst.tst .tst-hint,
  .tst.tst .tst-inline { display: none !important; }
  .tst-ov { display: none !important; }
}

/* ---- the pair at the foot of Connect ------------------------------------- */
/* Both invitations come from one code module, so their outputs are siblings and
   a grid on that module lays them out. Two Divi columns would place the cards
   correctly and then strand each dialog panel inside its own column, half a
   page wide.
 *
 * The panels are grid children too, spanning the full width. Once the scripts
 * run each is lifted into an overlay that is display:none until opened, so
 * neither takes a cell and the two cards sit side by side. With the scripts off
 * both forms appear under the cards instead — untidy, working, and the same
 * degradation the class register already accepts. */
.ad-contact-invites .ad-invites .et_pb_code_inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  align-items: stretch;
}
/* The panels, with script off, span the whole band and drop below the cards.
   A panel left in a single column takes one of the three cells and pushes a
   card onto a second row - which is what the announcements panel did until it
   was added here. It only shows without JavaScript, so it went unseen: with
   script every panel is lifted into a <dialog> and leaves the grid entirely. */
.ad-contact-invites .ad-invites .abc-panel,
.ad-contact-invites .ad-invites .ann-panel,
.ad-contact-invites .ad-invites .tst-panel { grid-column: 1 / -1; }

/* Both cards, styled together. The Bible class invitation was a centred block
   across the whole band until it had company; as one of a pair it needs the
   same surface, border and floor as the other or they read as two unrelated
   things that happen to be adjacent. */
.ad-contact-invites .abc.abc-cta,
.ad-contact-invites .tst.tst-cta {
  background: var(--ad-surface);
  border: 1px solid var(--ad-rule);
  padding: 34px 30px 30px;
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 0;
}
.ad-contact-invites .abc.abc-cta > :last-child,
.ad-contact-invites .tst.tst-cta .tst-cta-go { margin-top: auto; padding-top: 18px; margin-bottom: 0; }

/* The class invitation's own title is sized for a full-width band. In half the
   width it wants the smaller step, or it wraps to four lines beside a heading
   that fits on two. */
.ad-contact-invites .abc.abc .abc-cta-title,
.ad-contact-invites .tst.tst .tst-cta-title { font-size: var(--t-h3); }

@media (max-width: 700px) {
  .ad-contact-invites .abc.abc-cta,
  .ad-contact-invites .tst.tst-cta { padding: 26px 20px 24px; }
}

/* Both eyebrows, one size. The class invitation's is set at --t-eyebrow, which
   is sized for a heading across a full band; beside a second card at --t-label
   the two read as different kinds of thing. Normalised here rather than in
   abc.css so the change applies only where they appear as a pair — on its own
   page the class invitation keeps the size it has always had. */
.ad-contact-invites .abc.abc .abc-cta-eyebrow,
.ad-contact-invites .tst.tst .tst-cta-eyebrow {
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  color: var(--ad-gold);
  margin-bottom: 10px;
}

/* Words this page composes, as opposed to words somebody wrote. .tst-body is
   pre-wrap so a testimony keeps the paragraph breaks its author put in it;
   applying that to a sentence assembled in PHP printed the source's own
   newlines and indentation into the middle of it. */
.tst.tst .tst-note {
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--ad-text);
  margin: 0 0 12px;
}