/* assets/css/support.css
 * Layout for the support console.
 *
 * Not a marketing page and not a legal page, so it borrows the shell of
 * neither. Somebody arriving here is mid-problem, often mid-shift, and
 * usually slightly annoyed. Everything above the fold is either the search
 * box or the way to reach a person, and the artwork budget is zero.
 *
 * The answer library reuses the .faq component from components.css rather
 * than growing a second accordion. This file adds only what the library
 * needs on top of it: the category tag, the filter row and the empty state.
 */

/* ---- Head ------------------------------------------------------------- */

.support-head {
  padding: 58px 0 52px;
  background: var(--band);
  text-align: center;
}

.support-head__inner {
  max-width: 720px;
  margin-inline: auto;
}

.support-head__title {
  /* FACE AND WEIGHT STATED, NOT INHERITED.
     These relied on the global `h1` rule for bold. That holds while the hero
     is an <h1> on a page that loaded base.css in the usual order — and stops
     holding the moment one is rendered from a React page, wrapped in another
     element, or reached with a different stylesheet order. A hero headline
     should not depend on which tag it happens to be in. */
  font-family: var(--font-heading);
  font-weight: 700;

  --hard-shadow-offset: 3px;
  font-size: var(--hero);
  line-height: var(--hero-lh);
}

.support-head__lead {
  margin-top: 14px;
  font-size: var(--lead);
  line-height: 28px;
  color: var(--ink-soft);
}

/* ---- Search -----------------------------------------------------------
 * Live filter, not a submitted search. There is no index to query and no
 * results page to land on — every answer is already on this page, so typing
 * narrows what is in front of you and the round trip never happens.
 */

.support-search {
  position: relative;
  max-width: 560px;
  margin: 26px auto 0;
}

.support-search .input {
  min-height: 56px;
  padding-right: 52px;
  border-color: var(--forest);
  font-size: var(--lead);
}

.support-search__clear {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  padding: 8px 11px;
  border: 0;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--small);
  cursor: pointer;
}

.support-search__clear:hover {
  background: var(--verde-100);
  color: var(--ink);
}

.support-search__clear[hidden] {
  display: none;
}

/* ---- Down right now ---------------------------------------------------
 * Deliberately the first thing under the head. A club whose register has
 * stopped in the middle of a Saturday should not have to read a category
 * grid to find a phone number.
 */

.support-now {
  margin-top: -26px;
}

.support-now__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
  max-width: 980px;
  margin-inline: auto;
  padding: 28px 34px;
  border-radius: var(--radius);
  background: var(--forest);
  color: var(--white);
}

.support-now__title {
  font-size: var(--h6);
  line-height: var(--h6-lh);
  color: var(--white);
}

.support-now__body {
  margin-top: 8px;
  font-size: var(--body);
  line-height: 24px;
  color: var(--verde-100);
}

.support-now__body a {
  color: var(--accent);
  text-underline-offset: 3px;
}

.support-now__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- Answer library ---------------------------------------------------- */

.support-lib {
  padding: 62px 0 20px;
}

.support-lib__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  max-width: 860px;
  margin-inline: auto;
}

.support-lib__title {
  font-size: var(--h4);
  line-height: var(--h4-lh);
}

/* Announced politely rather than assertively — a count that re-reads itself
   on every keystroke is unusable with a screen reader. */
.support-lib__count {
  font-size: var(--small);
  line-height: var(--small-lh);
  color: var(--ink-soft);
}

.support-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  max-width: 860px;
  margin: 22px auto 0;
}

.support-filter {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--white);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--small);
  line-height: 18px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

.support-filter:hover {
  border-color: var(--forest);
  color: var(--ink);
}

.support-filter[aria-pressed="true"] {
  border-color: var(--forest);
  background: var(--band);
  color: var(--forest);
}

.support-list {
  max-width: 860px;
  margin: 26px auto 0;
}

.support-article[hidden] {
  display: none;
}

/* The category sits inside the summary so it survives filtering and is
   still there when the answer is open — after three searches it is easy to
   lose track of which shelf an answer came off. */
.support-article__cat {
  flex: none;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--band-soft);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--forest);
}

.support-article .faq__q {
  gap: 14px;
}

.support-article .faq__q > span:first-child {
  flex: 1;
}

.rich + .faq__a {
  padding-top: 0;
}

.rich ul {
  margin: 10px 0 0;
  padding-left: 22px;
}

.rich li + li {
  margin-top: 7px;
}

.rich a {
  color: var(--brand);
  text-underline-offset: 3px;
}

/* ---- Empty state -------------------------------------------------------
 * A dead end is the worst thing a support page can do, so the empty state
 * is a route to a person rather than an apology.
 */

.support-none {
  max-width: 860px;
  margin: 26px auto 0;
  padding: 36px 30px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.support-none[hidden] {
  display: none;
}

.support-none__title {
  font-size: var(--h6);
  line-height: var(--h6-lh);
}

.support-none__body {
  max-width: 460px;
  margin: 10px auto 20px;
  font-size: var(--body);
  line-height: 24px;
  color: var(--ink-soft);
}

/* ---- Ways to reach us --------------------------------------------------- */

.support-routes {
  padding: 74px 0 0;
}

.support-routes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1040px;
  margin: 40px auto 0;
}

.support-route {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.support-route__when {
  font-family: var(--font-accent);
  font-size: 20px;
  line-height: 20.8px;
  color: var(--ink);
}

.support-route__title {
  margin-top: 8px;
  font-size: var(--h6);
  line-height: var(--h6-lh);
}

.support-route__body {
  margin-top: 10px;
  font-size: var(--body);
  line-height: 24px;
  color: var(--ink-soft);
}

/* Pushed to the bottom so three cards of uneven copy still line their
   actions up along one edge. */
.support-route__action {
  margin-top: auto;
  padding-top: 20px;
}

.support-route__action a {
  color: var(--brand);
  font-size: var(--body);
  text-underline-offset: 3px;
}

/* ---- Member redirect ----------------------------------------------------
 * Members of client clubs will find this page and write to us about a tee
 * time. Saying so plainly saves them a day and saves us a forwarded email.
 */

.support-member {
  padding: 74px 0 96px;
}

.support-member__box {
  max-width: 860px;
  margin-inline: auto;
  padding: 26px 32px;
  border-left: 4px solid var(--brand);
  background: var(--paper);
}

.support-member__box h2 {
  font-size: var(--h6);
  line-height: var(--h6-lh);
}

.support-member__box p {
  margin-top: 12px;
  font-size: var(--body);
  line-height: 25px;
  color: var(--ink-soft);
}

.support-member__box a {
  color: var(--brand);
  text-underline-offset: 3px;
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 1100px) {
  .support-head {
    padding: 46px 0 44px;
  }

  

  .support-now__box {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .support-now__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .support-routes__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .support-routes,
  .support-member {
    padding-top: 56px;
  }
}

@media (max-width: 640px) {
  

  .support-lib__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .support-now__box {
    padding: 22px 20px;
  }

  .support-now__actions .btn {
    width: 100%;
  }

  /* The tag drops below the question rather than squeezing it into two
     words. Order matters here: the question is what someone is scanning
     for. */
  .support-article .faq__q {
    flex-wrap: wrap;
  }

  .support-article .faq__q > span:first-child {
    flex: 1 0 100%;
  }

  .support-article__cat {
    order: 2;
  }

  .support-member__box {
    padding: 22px 20px;
  }
}

/* ---- Feed states ------------------------------------------------------
 * Loading, failed and nothing-published. All three end in a way to reach a
 * person, because an empty support page with an apology on it is the least
 * useful thing this site could show.
 */

.support-status {
  max-width: 860px;
  margin: 26px auto 0;
  padding: 30px 30px 34px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.support-status[hidden] {
  display: none;
}

.support-status p {
  max-width: 520px;
  margin: 0 auto;
  font-size: var(--body);
  line-height: 25px;
  color: var(--ink-soft);
}

.support-status p + p {
  margin-top: 12px;
}

.support-status a {
  color: var(--brand);
  text-underline-offset: 3px;
}

/* ---- Rich text from the admin ------------------------------------------
 * Article bodies are written in TipTap (StarterKit + Link, Image, Youtube,
 * Underline, TextAlign) and stored as HTML.
 *
 * TipTap bakes Tailwind classes into that HTML — text-emerald-400 on links,
 * rounded-lg max-w-full h-auto my-4 on images, w-full aspect-video on video
 * embeds. Tailwind is not loaded here, so every one of those classes is
 * inert. That is why each tag is styled by element below rather than by the
 * class the editor wrote: the class cannot be relied on, and emerald-400 is
 * an admin dark-theme colour that would be wrong on this background anyway.
 *
 * The list covers everything StarterKit can emit, not just what the current
 * articles happen to use, so the first time somebody reaches for a blockquote
 * it already looks right.
 *
 * Scoped to .rich rather than to the accordion, because the same HTML now
 * renders in two places: inside an answer on this page, and on the article's
 * own page at /kb/<slug>. One class, one rendering, no way for the two to
 * drift apart.
 */

/* THREE LEVELS THAT LOOK LIKE THREE LEVELS.
 *
 * These originally collapsed h1, h2 and h3 into one size, which was fine when
 * the only thing using them was a four-paragraph answer inside an accordion.
 * The permissions article has seventeen numbered sections with sub-headings
 * under them, and rendered flat it reads as one undifferentiated wall — you
 * cannot see where a section starts. A long reference document needs real
 * hierarchy or it cannot be skimmed, and skimming is the whole reason
 * somebody opens it. */

.rich h1,
.rich h2 {
  margin: 40px 0 0;
  padding-top: 4px;
  font-size: var(--h5);
  line-height: var(--h5-lh);
  color: var(--ink);
  scroll-margin-top: 24px;
}

.rich h3 {
  margin: 28px 0 0;
  font-size: var(--h6);
  line-height: var(--h6-lh);
  color: var(--ink);
}

.rich h4,
.rich h5,
.rich h6 {
  margin: 22px 0 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--lead);
  line-height: 26px;
  color: var(--ink);
}

/* An em-dashed definition list is the shape most of these articles take —
   "6.5 Apply Discounts — Apply discounts to orders". Giving the items room
   stops seventeen of them running together. */
.rich li {
  margin-top: 9px;
}

.rich > :first-child {
  margin-top: 0;
}

.rich ul,
.rich ol {
  margin: 12px 0 0;
  padding-left: 22px;
}

.rich li + li {
  margin-top: 7px;
}

.rich strong {
  color: var(--ink);
  font-weight: 500;
}

.rich a {
  color: var(--brand);
  text-underline-offset: 3px;
}

/* An aside inside an answer, usually the "be careful with this" line. Same
   left-rule treatment the legal pages use, so a callout means one thing
   across the site. */
.rich blockquote {
  margin: 16px 0 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--verde-400);
  color: var(--ink-soft);
}

.rich blockquote p {
  margin-top: 0;
}

.rich blockquote p + p {
  margin-top: 10px;
}

/* Clubs will paste settings values and the odd snippet in here. --font-data
   is the Inter already loaded for figures; it is not monospaced but it reads
   as a different register, which is what this needs to do. */
.rich code {
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--white);
  font-family: var(--font-data);
  font-size: 0.9em;
  color: var(--ink);
}

.rich pre {
  margin: 14px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow-x: auto;
}

.rich pre code {
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--small);
  line-height: 21px;
}

.rich hr {
  margin: 22px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.rich img {
  max-width: 100%;
  height: auto;
  margin-top: 14px;
  border-radius: var(--radius);
}

/* The Youtube extension writes w-full aspect-video, which does nothing here.
   Without this an embed renders at the browser default 300x150 in the corner
   of the answer. */
.rich iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin-top: 16px;
  border: 0;
  border-radius: var(--radius);
}

.rich s {
  color: var(--ink-soft);
}

.rich table {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
}

.rich th,
.rich td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: var(--body);
  line-height: 22px;
}

.rich th {
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 500;
}

.support-article__more {
  padding-top: 4px;
}

.support-article__more a {
  color: var(--brand);
  font-size: var(--small);
  text-underline-offset: 3px;
}

/* The snippet in the list. Deliberately plain — it is a recognition aid, not
   the article, and styling it like prose invites people to read it there. */
.support-article__snip {
  color: var(--ink-soft);
}

/* ---- Article page ------------------------------------------------------
 * The /kb/<slug> page reuses the legal document shell. These are the few
 * things an article needs that a legal page does not.
 */

.kb-updated {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: var(--small);
  line-height: var(--small-lh);
  color: var(--ink-soft);
}

/* The rail is built from the article's own h2s, so unlike the legal pages it
   can be any length. Capped and scrolled rather than allowed to run past the
   fold on a seventeen-section reference. */
.legal__rail-list {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}

@media (max-width: 1100px) {
  .legal__rail-list {
    max-height: none;
    overflow-y: visible;
  }
}

/* ---- Start here --------------------------------------------------------
 * The articles marked featured in the admin. Cards rather than list rows, so
 * the group reads as a recommendation and not as the top of the list below
 * it — which is exactly what it looked like when featured only meant "sorted
 * a bit higher".
 */

.support-featured {
  max-width: 860px;
  margin: 30px auto 0;
}

.support-featured[hidden] {
  display: none;
}

.support-featured__title {
  margin-bottom: 14px;
  font-family: var(--font-accent);
  font-size: 20px;
  line-height: 20.8px;
  color: var(--ink);
}

.support-featured__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.support-featured__item {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.support-featured__item:hover {
  border-color: var(--forest);
  background: var(--white);
}

.support-featured__item b {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--body);
  line-height: 22px;
  color: var(--ink);
}

.support-featured__item span {
  display: block;
  margin-top: 6px;
  font-size: var(--small);
  line-height: 20px;
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .support-featured__grid {
    grid-template-columns: 1fr;
  }
}


/* ========================================================================
   ARTICLE PAGE  (/kb/<slug>)
   ========================================================================
   HERO. Deliberately identical in structure to .legal-head and every other
   band on the site: padding, a background, nothing else.

   The version before this was the only hero in the product carrying
   `position: relative`, `overflow: hidden`, an absolutely positioned child
   and a CSS mask — four things nothing else does, on the one page that did
   not behave like the others.

   The artwork is a background layer on the section itself. A background
   cannot overflow its box, so none of that machinery is needed to contain
   it, and the left-hand fade is the first layer of the list rather than a
   mask: band colour to transparent, painted over the art.
   ======================================================================== */

.kb-hero {
  padding: 56px 0 60px;

  background-color: var(--band);
  background-image:
    linear-gradient(
      to right,
      var(--band) 0%,
      rgba(166, 232, 196, 0.85) 26%,
      rgba(166, 232, 196, 0) 44%
    ),
    url("../img/kb-hero-art.webp");
  background-repeat: no-repeat, no-repeat;

  /* ALIGNED TO THE CONTENT COLUMN, NOT THE VIEWPORT EDGE.
     `right bottom` pinned the drawing to the far edge of the window, so on a
     wide monitor it drifted further and further from the text it belongs to.
     calc(50% - 650px) is the container's own right edge — --container is
     1300, so half of it is 650 — which keeps the illustration inside the same
     grid as everything else on the page. max() stops it going negative and
     hanging off the edge on narrower windows. */
  background-position:
    left top,
    right max(24px, calc(50% - 650px)) bottom 0;
  background-size: 100% 100%, auto 86%;
}

/* Capped well short of the artwork rather than sharing a grid with it. 620 on
   a 1300 container leaves the whole right half clear, which is what stops a
   long headline running at the illustration. */
.kb-hero__copy {
  max-width: 620px;
}

/* Where you are, before what this is. Sentence case at body size — small caps
   at wide tracking is the house style of every documentation template. */
.kb-hero__crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: var(--small);
  line-height: var(--small-lh);
  color: var(--forest);
}

.kb-hero__crumbs a {
  color: var(--forest);
  text-underline-offset: 3px;
}

.kb-hero__crumbs span[aria-hidden] {
  opacity: 0.45;
}

/* 52px filled the entire copy column on a four-word title. An article
   headline is a label for what you are about to read, not a marketing
   headline. */
.kb-hero__title {
  --hard-shadow-offset: 3px;
  font-size: 42px;
  line-height: 52px;
}

.kb-hero__lead {
  max-width: 560px;
  margin-top: 16px;
  font-size: var(--lead);
  line-height: 29px;
  color: var(--ink-soft);
}

.kb-hero__meta {
  margin-top: 18px;
  font-size: var(--small);
  line-height: var(--small-lh);
  color: var(--forest);
  opacity: 0.8;
}

/* ---- Search strip ------------------------------------------------------
 * Position was right; the finish was not.
 *
 * TWO THINGS CHANGED.
 *
 * The background was --paper, which put a third band between the mint hero
 * and the white article — three stacked colours where two would do. White
 * with a hairline under it reads as a toolbar attached to the hero rather
 * than as another section of the page.
 *
 * The label was Caveat. That face is the site's accent — eyebrows, the "Start
 * here" heading, handwritten asides. On a form row next to a text field it
 * reads as a sticker somebody stuck on a control, and it is the only place on
 * the site where the handwriting sits directly against an input. Sentence
 * case in the body face, muted, so the field is the thing you see.
 */

.kb-search {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.kb-search__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 760px;
  margin-inline: auto;
}

.kb-jump {
  position: relative;
  flex: 1;
  min-width: 0;
  max-width: 560px;
}

.kb-jump__label {
  flex: none;
  font-size: var(--small);
  line-height: var(--small-lh);
  color: var(--ink-soft);
  white-space: nowrap;
}

.kb-jump .input {
  min-height: 46px;
  border-color: var(--line);
  background: var(--white);
  font-size: var(--body);
}

.kb-jump .input:hover {
  border-color: var(--ink-soft);
}

.kb-jump .input:focus {
  border-color: var(--forest);
}

/* Results overlay rather than push the page down — a list that moves the
   heading you are reading is worse than no list. */
.kb-jump__results {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 18px 40px -18px rgba(11, 31, 23, 0.35);
}

.kb-jump__results a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-btn);
  color: var(--ink);
  font-size: var(--body);
  line-height: 21px;
  text-decoration: none;
}

.kb-jump__results a:hover {
  background: var(--paper);
}

.kb-jump__results a span {
  display: block;
  margin-top: 2px;
  font-size: var(--small);
  color: var(--ink-soft);
}

.kb-updated {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: var(--small);
  line-height: var(--small-lh);
  color: var(--ink-soft);
}

.legal__rail-list {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}

/* ---- Responsive --------------------------------------------------------- */

/* The artwork goes below 1200. Measured rather than guessed: the new
   composition is 1.54:1 where the first was 2.05:1, so at its tallest it
   occupies 551px of width instead of 737. At 1240 the copy column ends at
   x=644 and the art starts at x=689 — clear. At 1100 the art would start at
   x=549, which is inside the copy. */
@media (max-width: 1200px) {
  .kb-hero {
    background-image: none;
  }
}

@media (max-width: 1100px) {
  .kb-hero {
    padding: 44px 0 46px;
  }

  .kb-hero__title {
    --hard-shadow-offset: 2px;
    font-size: 34px;
    line-height: 43px;
  }

  .legal__rail-list {
    max-height: none;
    overflow-y: visible;
  }
}

@media (max-width: 760px) {
  .kb-search__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
}

@media (max-width: 640px) {
  .kb-hero__title {
    --hard-shadow-offset: 2px;
    font-size: 28px;
    line-height: 36px;
  }
}

/* ---- Category groups ----------------------------------------------------
 * A heading every dozen answers, so the list can be skipped rather than only
 * read. At 126 answers the flat version gave a reader nothing to scan past.
 *
 * Hidden while searching — see the note in main.js. Ranked results cross
 * categories, so a heading would be claiming answers it does not own.
 */

/* The heading is now a wrapper for a button — the h3 keeps the document
   outline, the button carries the behaviour. The styling that used to sit on
   the heading moves onto the button, because that is what you now click. */
.support-group {
  margin: 34px 0 12px;
}

.support-group__btn {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font-family: inherit;
  font-size: var(--h6);
  line-height: var(--h6-lh);
  font-weight: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

/* A chevron that turns. It is the only thing telling somebody these open, so
   it is on the right where a disclosure control is expected rather than
   tucked beside the label. */
.support-group__btn::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.18s ease;
}

.support-group__btn[aria-expanded="true"]::after {
  transform: translateY(1px) rotate(225deg);
}

.support-group__btn:hover { color: var(--brand); }

.support-group__btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.support-group[hidden] {
  display: none;
}

/* The count sets an expectation before anybody starts opening things. */
.support-group__btn span {
  font-family: var(--font-data);
  font-size: var(--small);
  font-weight: 400;
  color: var(--ink-soft);
}

/* The first heading sits directly under the filter chips, where the margin
   above would double up. */
.support-list > .support-group:first-child {
  margin-top: 6px;
}