/* ===========================================================================
 * Blog — listing and single post
 *
 * Loaded after sections.css/brand.css so it can override the Tailwind utility
 * classes in the blog templates by source order at equal specificity, with no
 * `!important` anywhere.
 *
 * The listing is organised by topic rather than by picture. The library has one
 * placeholder shared by 65 posts and a handful of near-identical technician
 * photos, so a thumbnail grid was repeating the same image down the page. The
 * cards carry their category instead — a coloured chip and a matching rail —
 * and a single featured post at the top carries the only photograph.
 * ========================================================================= */

:root {
  --fa-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fa-tint: #eef3ec;
  --fa-edge: rgba(42, 90, 174, 0.14);
  --fa-edge-strong: rgba(42, 90, 174, 0.34);
  --fa-ink: #343434;
  --fa-ink-soft: #5d6b5f;
  /* Default category accent; each category overrides it below. */
  --fa-accent: #0a4a52;
  --fa-accent-soft: rgba(10, 74, 82, 0.1);
}

/* One accent per topic. Set on the card, so the chip, the rail and the hover
 * state all read from the same value and a new category needs one block. */
[data-category="air-conditioning"]   { --fa-accent: #2a5aae; --fa-accent-soft: rgba(42, 90, 174, 0.1); }
[data-category="heating"]            { --fa-accent: #bf5420; --fa-accent-soft: rgba(191, 84, 32, 0.11); }
[data-category="indoor-air-quality"] { --fa-accent: #0a4a52; --fa-accent-soft: rgba(10, 74, 82, 0.1); }
[data-category="maintenance-tips"]   { --fa-accent: #004713; --fa-accent-soft: rgba(0, 71, 19, 0.09); }
[data-category="company-news"]       { --fa-accent: #3f6d4d; --fa-accent-soft: rgba(63, 109, 77, 0.12); }

/* ===========================================================================
 * Listing
 * ========================================================================= */

/* ===========================================================================
 * Blog hero
 *
 * The module paints a photograph behind a hard
 * `linear-gradient(to right, #2A5AAE 33%, transparent)` — a blue slab over the
 * left third with the picture fighting its way out of the right. It is the
 * loudest thing on the page and it says nothing.
 *
 * Here it becomes one of the brand's dark bands: the photograph stays, but as
 * texture at low opacity, faded out from the left so the type sits on flat
 * colour. Scoped to the posts page, so every other inner hero is untouched
 * until this is agreed.
 * ========================================================================= */
body.blog #ss-inner-hero > div {
  background-color: #013d14;
  background-image: var(--fa-surface-dark);
}
body.blog #ss-inner-hero img {
  /* The header is absolute and overlays the top of this band, so the top of the
   * photograph was behind the nav. Pushing the frame down and right puts the
   * van in the lower right, clear of it. Opacity and scrim come from the shared
   * photo-band rules. */
  object-position: 72% 78%;
}
/* The scrim itself is `.fa-scrim` in brand.css now — one treatment for both
 * heroes rather than a blog-only variant. */
/* At phone width the photograph is almost entirely under the mask and the
 * header, so it is texture nobody can see. The band is better plain. */
@media (max-width: 767px) {
  body.blog #ss-inner-hero img {
    display: none;
  }
}
/* 517px of banner before a word of content. */
body.blog #ss-inner-hero > div > div {
  padding-top: 7.5rem;
  padding-bottom: 3rem;
}
@media (min-width: 1024px) {
  body.blog #ss-inner-hero > div > div {
    padding-top: 8.5rem;
    padding-bottom: 4rem;
  }
}
/* The same sky light source the other bands carry. */
body.blog #ss-inner-hero > div::after {
  content: "";
  position: absolute;
  top: -45%;
  right: -8%;
  width: 52%;
  height: 170%;
  border-radius: 50%;
  background-image: radial-gradient(closest-side, rgba(57, 194, 244, 0.22), rgba(57, 194, 244, 0) 70%);
  pointer-events: none;
}
body.blog #ss-inner-hero span.uppercase {
  color: var(--fa-sky);
}
body.blog #ss-inner-hero span.uppercase > span {
  background-color: var(--fa-sky);
}
/* The primary action takes the sky blue; the ghost beside it is already right. */
body.blog #ss-inner-hero a.bg-primary {
  background-color: transparent;
  background-image: linear-gradient(160deg, var(--fa-sky-bright) 0%, var(--fa-sky) 58%, #1fa8dd 100%);
  color: #002b0e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 22px -12px rgba(31, 168, 221, 0.95);
}
body.blog #ss-inner-hero a.bg-primary:hover {
  background-image: linear-gradient(160deg, #a6e4fc 0%, var(--fa-sky-bright) 58%, var(--fa-sky) 100%);
}

/* The listing takes the same tint as the single post, so the cards on it read
 * as cards rather than as white panels on a white page. */
#ss-blog-listing {
  background-color: var(--fa-tint);
}

.fa-listing__head {
  margin-top: 2.25rem;
}

/* The CTA is 21rem tall beside a column that runs for several thousand pixels.
 * Without this the right-hand side of the listing is empty for all but the
 * first screenful. */
@media (min-width: 1024px) {
  #ss-blog-listing > div > aside {
    position: sticky;
    top: 6.5rem;
  }
}

/* --- Featured post ------------------------------------------------------- */

.fa-feature {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 1.75rem;
  box-shadow: 0 22px 48px -28px rgba(1, 61, 20, 0.75);
  transition: transform 260ms var(--fa-ease), box-shadow 260ms var(--fa-ease);
}
.fa-feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 60px -28px rgba(1, 61, 20, 0.8);
}
.fa-feature__media {
  position: relative;
  overflow: hidden;
  min-height: 12rem;
  background-color: rgba(0, 0, 0, 0.2);
}
/* Out of flow so the image contributes no intrinsic height — in flow, a
 * stretched `height: 100%` image resolves against a height that is waiting on
 * the image and the card runs away to about 1,500px. */
.fa-feature__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--fa-ease);
}
.fa-feature:hover .fa-feature__img {
  transform: scale(1.04);
}
.fa-feature__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1.75rem;
}
.fa-feature__title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(1.3125rem, 1rem + 1.1vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
}
.fa-feature__title > a {
  color: inherit;
  text-decoration: none;
}
/* The whole card is the target; the chip stays separately clickable below. */
.fa-feature__title > a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.fa-feature__excerpt {
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}
.fa-feature__chip {
  position: relative;
  z-index: 2;
}
.fa-feature .fa-card__meta {
  color: rgba(255, 255, 255, 0.6);
}
.fa-feature .fa-card__meta-dot {
  background-color: rgba(255, 255, 255, 0.4);
}
.fa-feature__cta {
  margin-top: 0.25rem;
}

@media (min-width: 900px) {
  .fa-feature {
    grid-template-columns: 42% 1fr;
  }
  .fa-feature__body {
    padding: 1.75rem 2rem;
    justify-content: center;
  }
}


/* --- The two ways in ------------------------------------------------------ */

.fa-entry {
  margin-top: 1.75rem;
}
.fa-entry__heading {
  margin-top: 0.375rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--fa-ink);
}
.fa-entry__subheading {
  font-family: "DM Sans", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #7b857c;
}
.fa-entry__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}
/* Four across on anything with room, so the whole row is one line. */
@media (min-width: 880px) {
  .fa-entry__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* A question and an icon do not need a card's worth of padding. */
.fa-tile--row {
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: 12px;
}
.fa-tile--row .fa-tile__badge {
  width: 1.875rem;
  height: 1.875rem;
  flex-shrink: 0;
}
.fa-tile--row .fa-tile__badge svg {
  width: 1rem;
  height: 1rem;
}
.fa-tile--row .fa-tile__title {
  font-size: 0.875rem;
  line-height: 1.25;
}

.fa-entry--topics {
  margin-top: 1.125rem;
}
.fa-entry__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
  list-style: none;
  padding: 0;
}
.fa-topic {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3125rem 0.75rem 0.3125rem 0.375rem;
  border: 1px solid rgba(52, 52, 52, 0.1);
  border-radius: 999px;
  background-color: #ffffff;
  text-decoration: none;
  transition: transform 200ms var(--fa-ease), border-color 200ms var(--fa-ease),
              box-shadow 200ms var(--fa-ease);
}
.fa-topic:hover {
  transform: translateY(-2px);
  border-color: var(--fa-accent);
  box-shadow: 0 12px 24px -18px rgba(52, 52, 52, 0.55);
}
.fa-topic__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background-color: var(--fa-accent-soft);
  color: var(--fa-accent);
  transition: background-color 200ms var(--fa-ease), color 200ms var(--fa-ease);
}
.fa-topic:hover .fa-topic__badge {
  background-color: var(--fa-accent);
  color: #ffffff;
}
.fa-topic__badge svg {
  width: 0.875rem;
  height: 0.875rem;
}
.fa-topic__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.fa-topic__name {
  font-family: "DM Sans", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--fa-ink);
}
.fa-topic__count {
  font-family: "DM Sans", sans-serif;
  font-size: 0.6875rem;
  color: #7b857c;
}

@media (prefers-reduced-motion: reduce) {
  .fa-topic,
  .fa-topic__badge {
    transition: none;
  }
  .fa-topic:hover {
    transform: none;
  }
}

/* --- Card grid ----------------------------------------------------------- */

.fa-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}
.fa-grid--after-feature {
  margin-top: 1.25rem;
}
@media (min-width: 620px) {
  .fa-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .fa-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fa-card {
  position: relative;
  display: flex;
  overflow: hidden;
  border: 1px solid var(--fa-edge);
  border-radius: 16px;
  background-color: #ffffff;
  transition: transform 220ms var(--fa-ease), box-shadow 220ms var(--fa-ease),
              border-color 220ms var(--fa-ease);
}
/* The topic rail. Thin at rest, wider on hover — the card's only decoration,
 * and the thing that makes a column of cards scannable by subject. */
.fa-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: var(--fa-accent);
  transition: width 220ms var(--fa-ease);
}
.fa-card:hover {
  transform: translateY(-3px);
  border-color: var(--fa-accent);
  box-shadow: 0 16px 34px -22px rgba(52, 52, 52, 0.45);
}
.fa-card:hover::before {
  width: 6px;
}
.fa-card__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5625rem;
  width: 100%;
  padding: 1.125rem 1.25rem 1rem 1.375rem;
}

.fa-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  background-color: var(--fa-accent-soft);
  color: var(--fa-accent);
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 200ms var(--fa-ease), color 200ms var(--fa-ease);
}
.fa-card__chip:hover {
  background-color: var(--fa-accent);
  color: #ffffff;
}
.fa-card__chip-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.fa-card__title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--fa-ink);
}
.fa-card__title > a {
  color: inherit;
  text-decoration: none;
}
.fa-card__title > a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.fa-card:hover .fa-card__title {
  color: var(--fa-accent);
}
.fa-card__excerpt {
  font-family: "DM Sans", sans-serif;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fa-ink-soft);
  /* Three lines is the teaser; past that the card is doing the article's job. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fa-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  margin-top: auto;
  padding-top: 0.5rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  color: #7b857c;
}
.fa-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.fa-card__meta-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}
.fa-card__meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #c2cbc3;
}

.fa-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--fa-accent);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 220ms var(--fa-ease), transform 220ms var(--fa-ease);
}
.fa-card:hover .fa-card__more,
.fa-card:focus-within .fa-card__more {
  opacity: 1;
  transform: translateY(0);
}
.fa-card__more-icon {
  width: 0.875rem;
  height: 0.875rem;
}
/* Touch devices have no hover, so the cue would never appear. */
@media (hover: none) {
  .fa-card__more {
    opacity: 1;
    transform: none;
  }
}

/* --- Topic pills --------------------------------------------------------- */

.fa-topic-pill {
  padding: 0.5625rem 1.125rem;
  transition: background-color 200ms var(--fa-ease), color 200ms var(--fa-ease),
              border-color 200ms var(--fa-ease), transform 200ms var(--fa-ease);
}
.fa-topic-pill:hover {
  transform: translateY(-1px);
}

/* ===========================================================================
 * Single post
 * ========================================================================= */

#ss-blog-single {
  background-color: var(--fa-tint);
}
.fa-post {
  position: relative;
  background-color: #ffffff;
  border: 1px solid rgba(52, 52, 52, 0.08);
  border-radius: 20px;
  padding: clamp(1.25rem, 0.75rem + 2vw, 2.75rem);
  /* A 4% shadow on a near-white page is invisible, so the article read as
   * untinted page rather than as a sheet laid on one. */
  box-shadow: 0 18px 40px -28px rgba(52, 52, 52, 0.45);
}
.fa-post__figure img {
  box-shadow: 0 18px 44px -26px rgba(52, 52, 52, 0.45);
}

/* Reading progress. Fixed to the top of the viewport, scaled from the left by
 * js/blog-article.js; at rest it is a zero-width bar on no track. */
.fa-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 70;
  pointer-events: none;
}
.fa-progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background-image: linear-gradient(90deg, #004713 0%, #0a4a52 50%, #2a5aae 100%);
}

/* --- Body copy ----------------------------------------------------------- */

.fa-post__body {
  font-size: 1.0625rem;
  line-height: 1.8;
}
/* Headings were 36px over 16px body — a 2.25x jump that turned every section
 * break into a wall. The rule above each one does the separating instead. */
/* A 48px rule floating above a heading reads as a stray mark. A divider that
 * spans the column reads as the end of the section before it, which is what it
 * is for. */
.fa-post__body h2 {
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(52, 52, 52, 0.1);
  font-size: 1.75rem;
  line-height: 1.25;
  scroll-margin-top: 6.5rem;
}
/* Nothing to divide it from. */
.fa-post__body > h2:first-of-type {
  margin-top: 2.25rem;
  padding-top: 0;
  border-top: 0;
}
.fa-post__body h3 {
  margin-top: 2.25rem;
  font-size: 1.3125rem;
}
.fa-post__body > p:first-of-type {
  padding-left: 1.125rem;
  border-left: 3px solid var(--fa-accent);
  font-size: 1.1875rem;
  line-height: 1.7;
  color: #343434;
}
.fa-post__body ul {
  list-style: none;
  padding-left: 0;
}
.fa-post__body ul > li {
  position: relative;
  padding-left: 1.75rem;
}
.fa-post__body ul > li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #0a4a52;
}
.fa-post__body blockquote {
  border-left-width: 3px;
  border-color: #0a4a52;
  border-radius: 0 14px 14px 0;
  background-color: #f2f7f0;
  padding: 1.25rem 1.5rem;
  font-style: normal;
}

/* --- Contents list ------------------------------------------------------- */

.fa-toc {
  border: 1px solid var(--fa-edge);
  border-radius: 16px;
  background-color: #ffffff;
  padding: 1.25rem 1.25rem 1.125rem;
}
.fa-toc__title {
  font-family: "DM Sans", sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7b857c;
}
.fa-toc__list {
  list-style: none;
  margin: 0.875rem 0 0;
  padding: 0 0 0 0.875rem;
  /* The guide line the current marker rides on. */
  border-left: 2px solid rgba(42, 90, 174, 0.14);
  counter-reset: fa-toc;
}
.fa-toc__list > li + li {
  margin-top: 0.5rem;
}
.fa-toc__link {
  position: relative;
  display: block;
  font-family: "DM Sans", sans-serif;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--fa-ink-soft);
  text-decoration: none;
  transition: color 180ms var(--fa-ease);
}
.fa-toc__link::before {
  content: "";
  position: absolute;
  left: -1.0625rem;
  top: 0.3em;
  width: 2px;
  height: 1.1em;
  border-radius: 1px;
  background-color: #0a4a52;
  opacity: 0;
  transition: opacity 180ms var(--fa-ease);
}
.fa-toc__link:hover {
  color: #0a4a52;
}
.fa-toc__link.is-current {
  color: #0a4a52;
  font-weight: 700;
}
.fa-toc__link.is-current::before {
  opacity: 1;
}

/* The inline copy is for narrow screens, where the rail sits below the whole
 * article and a contents list there is no use to anyone. */
.fa-toc--inline {
  margin-top: 1.75rem;
  background-color: #f6f9f3;
}
.fa-toc--rail {
  display: none;
}
@media (min-width: 1024px) {
  .fa-toc--inline {
    display: none;
  }
  .fa-toc--rail {
    display: block;
    position: sticky;
    top: 6.5rem;
    /* The cards below it scroll past behind it rather than through it. */
    z-index: 2;
    box-shadow: 0 10px 24px -20px rgba(52, 52, 52, 0.5);
  }
  /* Measured at 605px on a 13-heading article, which swamped the rail and
   * pushed everything else below the fold. It scrolls itself past that. */
  .fa-toc--rail .fa-toc__list {
    max-height: min(26rem, calc(100vh - 16rem));
    overflow-y: auto;
    /* Room for the current-item marker, which sits outside the text box. */
    padding-right: 0.5rem;
    scrollbar-width: thin;
  }
}

/* --- FAQ accordion -------------------------------------------------------- */

.fa-faq {
  margin-top: 1.5rem;
  border: 1px solid rgba(52, 52, 52, 0.1);
  border-radius: 14px;
  overflow: hidden;
}
.fa-faq__item + .fa-faq__item {
  border-top: 1px solid rgba(52, 52, 52, 0.1);
}
.fa-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--fa-ink);
  transition: background-color 180ms var(--fa-ease), color 180ms var(--fa-ease);
}
/* Safari still paints its own disclosure triangle without this. */
.fa-faq__q::-webkit-details-marker {
  display: none;
}
.fa-faq__q:hover {
  background-color: #f4f8f2;
  color: var(--fa-accent);
}
/* The chevron is drawn rather than iconned, so it can rotate on open with no
 * second element and no script. */
.fa-faq__q::after {
  content: "";
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.4em;
  border-right: 2px solid var(--fa-accent);
  border-bottom: 2px solid var(--fa-accent);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 220ms var(--fa-ease);
}
.fa-faq__item[open] > .fa-faq__q {
  color: var(--fa-accent);
}
.fa-faq__item[open] > .fa-faq__q::after {
  transform: rotate(-135deg);
  margin-top: 0.7em;
}
.fa-faq__a {
  padding: 0 1.25rem 1.25rem;
}
.fa-post__body .fa-faq__a > p {
  margin-top: 0;
}
.fa-post__body .fa-faq__a > p + p {
  margin-top: 0.875rem;
}

/* --- In-article call to action ------------------------------------------- */

.fa-inline-cta {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 3rem 0;
  padding: 1.75rem;
  border-radius: 18px;
  background-image: var(--fa-surface-dark);
  color: #ffffff;
}
.fa-inline-cta__title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
}
.fa-inline-cta__copy {
  margin-top: 0.5rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.fa-inline-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.fa-inline-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8125rem 1.5rem;
  border-radius: 999px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 200ms var(--fa-ease), background-color 200ms var(--fa-ease),
              color 200ms var(--fa-ease);
}
.fa-inline-cta__btn:hover {
  transform: translateY(-2px);
}
.fa-inline-cta__btn--primary {
  background-color: #ffffff;
  color: #002b0e;
}
.fa-inline-cta__btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #ffffff;
}
.fa-inline-cta__btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.14);
}
.fa-inline-cta__icon {
  width: 1.0625rem;
  height: 1.0625rem;
}
@media (min-width: 720px) {
  .fa-inline-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1.875rem 2.25rem;
  }
  .fa-inline-cta__actions {
    flex-shrink: 0;
  }
}
/* The CTA is injected into the post body, so it inherits the wrapper's
 * arbitrary-variant tag rules — `[&_p]:text-ink-body` and
 * `[&_a]:text-secondary [&_a]:underline`. Those are one class plus one element
 * each, which outranks a single class, so the white heading came out dark olive
 * on the gradient and the buttons came out blue and underlined. Two classes
 * beats one class plus an element, which is all these need. */
.fa-post__body .fa-inline-cta p {
  margin-top: 0;
}
.fa-post__body .fa-inline-cta__title {
  color: #ffffff;
}
.fa-post__body .fa-inline-cta__copy {
  color: rgba(255, 255, 255, 0.85);
}
.fa-post__body .fa-inline-cta__btn {
  text-decoration: none;
  font-weight: 700;
}
.fa-post__body .fa-inline-cta__btn--primary {
  color: #002b0e;
}
.fa-post__body .fa-inline-cta__btn--ghost {
  color: #ffffff;
}

/* --- Share --------------------------------------------------------------- */

.fa-post__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(42, 90, 174, 0.12);
}
.fa-post__share-label {
  font-family: "DM Sans", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #7b857c;
}
.fa-post__share {
  display: flex;
  gap: 0.5rem;
}
.fa-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--fa-edge);
  color: #0a4a52;
  transition: background-color 200ms var(--fa-ease), color 200ms var(--fa-ease),
              border-color 200ms var(--fa-ease), transform 200ms var(--fa-ease);
}
.fa-share:hover {
  background-color: #0a4a52;
  border-color: #0a4a52;
  color: #ffffff;
  transform: translateY(-2px);
}
.fa-share__icon {
  width: 1rem;
  height: 1rem;
}

/* --- Related ------------------------------------------------------------- */

.fa-related {
  margin-top: 2.5rem;
}
.fa-related > h2 {
  font-size: 1.75rem;
}
.fa-related-card {
  position: relative;
  background-color: #ffffff;
  border-color: var(--fa-edge);
  transition: transform 220ms var(--fa-ease), box-shadow 220ms var(--fa-ease),
              border-color 220ms var(--fa-ease);
}
.fa-related-card:hover {
  transform: translateY(-3px);
  border-color: var(--fa-edge-strong);
  box-shadow: 0 14px 30px -18px rgba(52, 52, 52, 0.4);
}
.fa-related-card__media {
  display: block;
  overflow: hidden;
  background-image: linear-gradient(160deg, #eef3ec 0%, #e3ecf5 100%);
}
.fa-related-card__media img {
  display: block;
  transition: transform 520ms var(--fa-ease);
}
.fa-related-card:hover .fa-related-card__media img {
  transform: scale(1.05);
}
.fa-related-card h3 > a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.fa-related-card > div > a {
  position: relative;
  z-index: 2;
}

/* --- Sidebar ------------------------------------------------------------- */

/* The services card is `bg-paper`, which is the page tint — on the tinted page
 * it would vanish. The other two carry their own image and brand fills. */
#ss-blog-single aside .bg-paper {
  background-color: #ffffff;
  border-color: var(--fa-edge);
}
@media (min-width: 1024px) {
  #ss-blog-single > div > aside {
    align-self: stretch;
  }
  /* Without a contents list to follow the reader, the last card does it, so the
   * column is not empty for the length of the article. */
  #ss-blog-single > div > aside:not(:has(.fa-toc--rail:not([hidden]))) > div:last-child {
    position: sticky;
    top: 6.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fa-feature,
  .fa-feature__img,
  .fa-card,
  .fa-card::before,
  .fa-card__more,
  .fa-related-card,
  .fa-related-card__media img,
  .fa-topic-pill,
  .fa-share,
  .fa-inline-cta__btn {
    transition: none;
  }
  .fa-feature:hover,
  .fa-card:hover,
  .fa-related-card:hover,
  .fa-topic-pill:hover,
  .fa-share:hover,
  .fa-inline-cta__btn:hover {
    transform: none;
  }
  .fa-feature:hover .fa-feature__img,
  .fa-related-card:hover .fa-related-card__media img {
    transform: none;
  }
  .fa-card__more {
    opacity: 1;
    transform: none;
  }
}