/* ---------------------------------------------------------------------------
   Help Centre
   ---------------------------------------------------------------------------
   A standalone sheet, loaded only by helpdesk.aspx and helpdeskpage.aspx.

   WHY NOT SCSS. The help styles used to live in _common/scss/modules/_help.scss,
   which compiles into main.css - a file shared by every page on the site and
   currently carrying other people's uncommitted work. Keeping the redesign in
   its own file means it cannot regress anything else, it can be reverted by
   removing one <link>, and there is no build step to run. Same pattern as
   reg-results.css and garage-finder.css.

   Everything is prefixed .hc- so nothing here can collide with main.css.

   Tokens are taken from _common/scss/base/_variables.scss so the section still
   looks like the rest of the site:
     brand red   #ff0801      near-black  #202020      dark grey #38393D
     light grey  #F5F6F8      hairline    #e9ebf0
     headings    Montserrat   body        Inter
   --------------------------------------------------------------------------- */

.hc {
  --hc-red: #ff0801;
  --hc-red-dark: #d40600;
  --hc-ink: #202020;
  --hc-body: #5b6068;
  --hc-soft: #878d97;
  --hc-line: #e9ebf0;
  --hc-grey: #f5f6f8;
  --hc-tint: #fff4f3;      /* red at 4%: the section bars in the article body */
  --hc-black: #16171a;
  --hc-head: "Montserrat", "Inter", Helvetica, Arial, sans-serif;
  --hc-sans: "Inter", Helvetica, Arial, sans-serif;
  --hc-wrap: 1150px;

  font-family: var(--hc-sans);
  color: var(--hc-body);
}

.hc *,
.hc *::before,
.hc *::after { box-sizing: border-box; }

.hc__wrap {
  width: 100%;
  max-width: var(--hc-wrap);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------------------------------------------------------------- page body */

/* No hero of our own. The CMS block above both templates already draws the
   red banner and carries the page's h1; adding a second put two <h1>s on
   every page and repeated the same words twice down the screen. */


.hc-body { padding: 34px 0 60px; background: #fff; }
@media (min-width: 1024px) { .hc-body { padding: 44px 0 76px; } }

/* the category's own description, straight under the banner */
.hc-intro {
  margin: 0 0 32px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--hc-body);
}
.hc-intro p { margin: 0 0 12px; }
.hc-intro p:last-child { margin-bottom: 0; }
.hc-intro:empty { display: none; }

/* ------------------------------------------------------- category: featured */

/* The four questions people arrive for, given the weight to match. Black so
   they read as the way in, against a page that is otherwise white. */
.hc-featured {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin: 0 0 46px;
  padding: 0;
  list-style: none;
}
@media (min-width: 620px) { .hc-featured { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hc-featured { grid-template-columns: repeat(4, 1fr); } }

.hc-featured__link {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-height: 122px;
  height: 100%;
  padding: 20px 18px 18px;
  border-top: 4px solid var(--hc-red);
  background: var(--hc-black);
  color: #fff;
  font-family: var(--hc-head);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.28;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.hc-featured__link:hover,
.hc-featured__link:focus-visible {
  background: #24262b;
  color: #fff;
  transform: translateY(-2px);
}
.hc-featured__go {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--hc-red);
  font-size: 14px;
  line-height: 1;
}

/* ------------------------------------------------------- category: filter */

/* The box has to look like something you can type in: the hairline used
   everywhere else is too faint to read as a field. */
.hc-filter { margin: 0; flex: 0 1 auto; }
.hc-filter__row { position: relative; width: 290px; max-width: 100%; }
.hc .hc-filter__input {
  box-sizing: border-box;
}
.hc-filter__input {
  width: 100%;
  height: 46px;
  padding: 0 40px 0 42px;
  border: 1.5px solid #c9ced8;
  border-radius: 6px;
  background: #fff;
  font-family: var(--hc-sans);
  font-size: 15px;
  line-height: 46px;
  color: var(--hc-ink);
  -webkit-appearance: none;
  appearance: none;
}
.hc-filter__input::placeholder { color: var(--hc-soft); }
.hc-filter__input:hover { border-color: #aeb4c0; }
.hc-filter__input:focus {
  outline: none;
  border-color: var(--hc-red);
  box-shadow: 0 0 0 3px rgba(255, 8, 1, 0.14);
}
/* Safari draws its own round clear button inside a search field */
.hc-filter__input::-webkit-search-decoration,
.hc-filter__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.hc-filter__icon {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 17px;
  height: 17px;
  margin-top: -8.5px;
  color: var(--hc-soft);
  pointer-events: none;
}
@media (max-width: 599px) {
  .hc-filter { width: 100%; }
  .hc-filter__row { width: 100%; }
}
.hc-filter__input:focus + .hc-filter__icon,
.hc-filter__row:focus-within .hc-filter__icon { color: var(--hc-red); }
/* under the bar, where it can change without shifting anything */
.hc-filter__count {
  margin: 12px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--hc-soft);
}
.hc-empty {
  margin: 22px 0 0;
  padding: 18px 20px;
  background: var(--hc-grey);
  border-left: 3px solid var(--hc-red);
  font-size: 15px;
  color: var(--hc-ink);
}

/* ---------------------------------------------------- category: full list */

/* heading left, search right, one rule under both */
.hc-listbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  padding-bottom: 14px;
  margin: 0 0 6px;
  border-bottom: 2px solid var(--hc-line);
}

.hc-listhead {
  margin: 0;
  font-family: var(--hc-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hc-ink);
}

/* Columns, not cards: these are twenty-odd one-line questions and a grid of
   boxes for each would be a wall of chrome around very little text. */
.hc-list {
  display: grid;
  gap: 0 46px;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 700px) { .hc-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hc-list { grid-template-columns: repeat(3, 1fr); } }

.hc-list__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hc-line);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--hc-ink);
  text-decoration: none;
}
.hc-list__link:hover,
.hc-list__link:focus-visible { color: var(--hc-red); }
.hc-list__go {
  flex: 0 0 auto;
  color: var(--hc-red);
  font-size: 15px;
  transition: transform 0.15s ease;
}
.hc-list__link:hover .hc-list__go { transform: translateX(3px); }
.hc-list > li[hidden] { display: none; }

/* --------------------------------------------------------- article: layout */

.hc-article {
  display: grid;
  gap: 34px;
  grid-template-columns: 1fr;
}
/* Phone: the answer first, the section list under it. This category carries
   over a hundred questions, so navigation-first meant scrolling past all of
   them to reach the sentence the reader came for. */
.hc-article > .hc-main { order: 1; }
.hc-article > .hc-nav  { order: 2; }
@media (min-width: 1024px) {
  .hc-article {
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
  .hc-article > .hc-nav  { order: 1; }
  .hc-article > .hc-main { order: 2; }
}

/* ------------------------------------------------------------ article: nav */

.hc-nav { min-width: 0; }
@media (min-width: 1024px) {
  .hc-nav { position: sticky; top: 20px; }
}
.hc-nav__label {
  margin: 0 0 14px;
  font-family: var(--hc-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hc-ink);
}
.hc-nav__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }

/* Alphabetical put Delivery first and Tyres last. This is the order the old
   stylesheet used: what people ask about most, first. */
.hc-nav__group--tyres    { order: 1; }
.hc-nav__group--orders   { order: 2; }
.hc-nav__group--fitting  { order: 3; }
.hc-nav__group--delivery { order: 4; }
.hc-nav__group--payments { order: 5; }
.hc-nav__group--returns  { order: 6; }
.hc-nav__group--safety   { order: 7; }
.hc-nav__group--support  { order: 8; }
.hc-nav__group--partners { order: 9; }

.hc-nav__title {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  background: var(--hc-grey);
  font-family: var(--hc-head);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hc-ink);
  text-decoration: none;
}
.hc-nav__title:hover { color: var(--hc-red); }

/* Masks rather than images, so the glyph takes the colour of its label and the
   open section's icon turns red along with the words. */
.hc-nav__title::before {
  content: "";
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  background-color: currentColor;
  opacity: 0.75;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.hc-nav__group--open .hc-nav__title::before { opacity: 1; }
/* the label takes the space, the chevron sits at the end */
.hc-nav__title > span:first-of-type { flex: 1 1 auto; min-width: 0; }

.hc-nav__group--tyres .hc-nav__title::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3Cpath d='M12 3v5.6M12 15.4V21M3 12h5.6M15.4 12H21'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3Cpath d='M12 3v5.6M12 15.4V21M3 12h5.6M15.4 12H21'/%3E%3C/svg%3E"); }
.hc-nav__group--orders .hc-nav__title::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5 12 3l8.5 4.5v9L12 21l-8.5-4.5z'/%3E%3Cpath d='M3.5 7.5 12 12l8.5-4.5M12 12v9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.5 12 3l8.5 4.5v9L12 21l-8.5-4.5z'/%3E%3Cpath d='M3.5 7.5 12 12l8.5-4.5M12 12v9'/%3E%3C/svg%3E"); }
.hc-nav__group--fitting .hc-nav__title::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.7 3.6a5.4 5.4 0 0 0-6.9 6.7L3.6 15.5a2 2 0 0 0 2.9 2.9l5.2-5.2a5.4 5.4 0 0 0 6.7-6.9l-3 3-2.7-.7-.7-2.7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.7 3.6a5.4 5.4 0 0 0-6.9 6.7L3.6 15.5a2 2 0 0 0 2.9 2.9l5.2-5.2a5.4 5.4 0 0 0 6.7-6.9l-3 3-2.7-.7-.7-2.7z'/%3E%3C/svg%3E"); }
.hc-nav__group--delivery .hc-nav__title::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5h10v9h-10zM12.5 9.5h4l3 3v3h-7z'/%3E%3Ccircle cx='6.5' cy='17.5' r='1.9'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5h10v9h-10zM12.5 9.5h4l3 3v3h-7z'/%3E%3Ccircle cx='6.5' cy='17.5' r='1.9'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.9'/%3E%3C/svg%3E"); }
.hc-nav__group--payments .hc-nav__title::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M2.5 10h19'/%3E%3Cpath d='M6.5 15h3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M2.5 10h19'/%3E%3Cpath d='M6.5 15h3'/%3E%3C/svg%3E"); }
.hc-nav__group--returns .hc-nav__title::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5 4.5 9.5 9 14'/%3E%3Cpath d='M4.5 9.5h9a6 6 0 0 1 0 12h-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5 4.5 9.5 9 14'/%3E%3Cpath d='M4.5 9.5h9a6 6 0 0 1 0 12h-4'/%3E%3C/svg%3E"); }
.hc-nav__group--safety .hc-nav__title::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v6c0 4.4-3.1 7.9-7.5 9-4.4-1.1-7.5-4.6-7.5-9V6z'/%3E%3Cpath d='m9 12 2.2 2.2L15.4 10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v6c0 4.4-3.1 7.9-7.5 9-4.4-1.1-7.5-4.6-7.5-9V6z'/%3E%3Cpath d='m9 12 2.2 2.2L15.4 10'/%3E%3C/svg%3E"); }
.hc-nav__group--support .hc-nav__title::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 14v-2a7.5 7.5 0 0 1 15 0v2'/%3E%3Crect x='2.5' y='13.5' width='4' height='6' rx='1.6'/%3E%3Crect x='17.5' y='13.5' width='4' height='6' rx='1.6'/%3E%3Cpath d='M19.5 19.5v.5a2.5 2.5 0 0 1-2.5 2.5h-2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 14v-2a7.5 7.5 0 0 1 15 0v2'/%3E%3Crect x='2.5' y='13.5' width='4' height='6' rx='1.6'/%3E%3Crect x='17.5' y='13.5' width='4' height='6' rx='1.6'/%3E%3Cpath d='M19.5 19.5v.5a2.5 2.5 0 0 1-2.5 2.5h-2'/%3E%3C/svg%3E"); }
.hc-nav__group--partners .hc-nav__title::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.5' cy='8' r='3.2'/%3E%3Cpath d='M2.5 19.5a6 6 0 0 1 12 0'/%3E%3Cpath d='M16 5.2a3.2 3.2 0 0 1 0 5.9'/%3E%3Cpath d='M17.5 14.2a6 6 0 0 1 4 5.3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.5' cy='8' r='3.2'/%3E%3Cpath d='M2.5 19.5a6 6 0 0 1 12 0'/%3E%3Cpath d='M16 5.2a3.2 3.2 0 0 1 0 5.9'/%3E%3Cpath d='M17.5 14.2a6 6 0 0 1 4 5.3'/%3E%3C/svg%3E"); }
/* the group this article belongs to: open, and marked */
.hc-nav__group--open .hc-nav__title {
  box-shadow: inset 3px 0 0 var(--hc-red);
  color: var(--hc-red);
}
.hc-nav__title-go { flex: 0 0 auto; font-size: 11px; opacity: 0.65; }

/* Scrolls inside itself: 109 links would otherwise push every other section
   off the screen entirely. help-centre.js scrolls the current one into view. */
.hc-nav__sub {
  margin: 0;
  padding: 6px 0 10px;
  list-style: none;
  /* A fixed cap, not a vh one: on a short viewport calc(100vh - 190px)
     collapsed the scroller to a single pixel and hid the whole list. */
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (min-width: 1024px) { .hc-nav__sub { max-height: 560px; } }
.hc-nav__sub-link {
  display: block;
  padding: 8px 14px 8px 15px;
  border-left: 3px solid transparent;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--hc-body);
  text-decoration: none;
}
.hc-nav__sub-link:hover { color: var(--hc-ink); border-left-color: var(--hc-line); }
.hc-nav__sub-link--current {
  border-left-color: var(--hc-red);
  background: var(--hc-grey);
  color: var(--hc-red);
  font-weight: 700;
}

/* -------------------------------------------------------- article: content */

.hc-main { min-width: 0; }
.hc-main__title {
  margin: 0 0 20px;
  font-family: var(--hc-head);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--hc-ink);
  /* No text-wrap here. Both balance and pretty hold words back to even the
     lines out, which pushed "join" onto line two of a title that had 300px
     of room left on line one. Plain greedy wrapping fills the line. */
}
@media (min-width: 768px) { .hc-main__title { font-size: 38px; } }

.hc-main__image img { display: block; max-width: 100%; height: auto; margin: 0 0 18px; border-radius: 4px; }

/* The article body is editor-written HTML from the CMS, so it is styled by
   element rather than by class - whatever they type has to land looking right.
   Headings get a tinted bar, which is what turns a long answer into something
   that can be skimmed. */
.hc-prose { font-size: 15.5px; line-height: 1.62; color: var(--hc-body); }
.hc-prose > *:first-child { margin-top: 0; }
.hc-prose > *:last-child { margin-bottom: 0; }
.hc-prose p { margin: 0 0 13px; }
.hc-prose a { color: var(--hc-red); text-decoration: underline; text-underline-offset: 2px; }
.hc-prose a:hover { color: var(--hc-red-dark); }

.hc-prose h2 {
  margin: 26px 0 12px;
  padding: 0 0 9px;
  border-bottom: 1px solid var(--hc-line);
  font-family: var(--hc-head);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--hc-ink);
}
@media (min-width: 768px) { .hc-prose h2 { font-size: 20px; } }
/* a heading that opens the body, or follows another heading, needs no gap */
.hc-prose > h2:first-child,
.hc-prose > h3:first-child { margin-top: 0; }
.hc-prose h2 + h3,
.hc-prose h3 + h4 { margin-top: 10px; }
/* a list belongs to the heading above it */
.hc-prose h3 + ul,
.hc-prose h3 + ol,
.hc-prose h4 + ul,
.hc-prose h4 + ol { margin-top: 0; }
.hc-prose h3 {
  margin: 18px 0 8px;
  font-family: var(--hc-head);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hc-ink);
}
.hc-prose h4 {
  margin: 16px 0 6px;
  font-family: var(--hc-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--hc-ink);
}

.hc-prose ul,
.hc-prose ol { margin: 0 0 15px; padding-left: 20px; }
.hc-prose li { margin-bottom: 5px; }
.hc-prose li::marker { color: var(--hc-red); }

.hc-prose img { max-width: 100%; height: auto; display: block; margin: 16px 0; }
.hc-prose strong, .hc-prose b { color: var(--hc-ink); font-weight: 700; }
.hc-prose blockquote {
  margin: 22px 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--hc-red);
  color: var(--hc-ink);
}
.hc-prose hr { margin: 30px 0; border: 0; border-top: 1px solid var(--hc-line); }

/* a wide table must scroll inside itself, never widen the page */
.hc-prose table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px; }
.hc-prose th, .hc-prose td { padding: 10px 12px; border-bottom: 1px solid var(--hc-line); text-align: left; }
.hc-prose th { font-family: var(--hc-head); font-weight: 700; color: var(--hc-ink); }

/* ------------------------------------------------------- article: the foot */

.hc-related { margin-top: 22px; padding-top: 22px; border-top: 2px solid var(--hc-line); }
.hc-related__label {
  margin: 0 0 12px;
  font-family: var(--hc-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hc-ink);
}
.hc-related__list {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 700px) { .hc-related__list { grid-template-columns: repeat(2, 1fr); } }
.hc-related__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: 100%;
  padding: 15px 16px;
  border: 1px solid var(--hc-line);
  border-left: 3px solid var(--hc-red);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--hc-ink);
  text-decoration: none;
  transition: background 0.15s ease;
}
.hc-related__link:hover { background: var(--hc-grey); color: var(--hc-red); }
.hc-related__go { flex: 0 0 auto; color: var(--hc-red); }

.hc-back { margin-top: 22px; }
.hc-back__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  background: var(--hc-red);
  color: #fff;
  font-family: var(--hc-head);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 3px;
}
.hc-back__link:hover { background: var(--hc-red-dark); color: #fff; }

/* keyboard users must be able to see where they are */
.hc a:focus-visible {
  outline: 2px solid var(--hc-red);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .hc * { transition: none !important; }
}