/* ==========================================================================
   PayitFast — blog article (detail) page
   Loaded after payitfast-blog.opt.min.css. All selectors are new, so nothing
   in the generated Webflow stylesheets is overridden.
   ========================================================================== */

/* .navbar-alt is fixed and 88px tall, so the first section has to clear it.
   The blog index uses padding-top:88px; an article also carries a back link
   and a meta row above the H1, so it gets a little more room. */
.section_article_header {
  padding-top: 128px;
  padding-bottom: 0;
}

.article_head_wrap {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}

.article_back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #5e5e5e;
  font-family: Geist, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 100%;
  text-decoration: none;
  transition: color .2s ease;
}

.article_back:hover {
  color: #111;
}

.article_back_icon {
  width: 14px;
  height: 14px;
  flex: none;
}

.article_meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.article_meta_text {
  color: #969696;
  font-family: Geist, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 100%;
}

.article_topic {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background-color: #f4f4f4;
  color: #111;
  font-family: Geist, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 100%;
}

/* On an article the badge is the way into that category's archive. */
a.article_topic {
  text-decoration: none;
  transition: background-color .2s ease;
}

a.article_topic:hover {
  background-color: #E4FF38;
}

.article_h1 {
  margin: 0;
  color: #111;
  font-family: Geist, Arial, sans-serif;
  font-size: 56px;
  font-weight: 300;
  letter-spacing: -3.2px;
  line-height: 108%;
}

.article_dek {
  margin: 0;
  max-width: 720px;
  color: #5e5e5e;
  font-family: Geist, Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 150%;
}

/* ---------- cover ---------- */

.article_cover_wrap {
  width: 100%;
  max-width: 1080px;
  margin: 48px auto 0;
}

.article_cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 24px;
}

.article_cover_caption {
  margin-top: 12px;
  color: #969696;
  font-family: Geist, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 140%;
  text-align: center;
}

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

.section_article_body {
  padding-top: 56px;
  padding-bottom: 80px;
}

.article_body {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

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

.article_body p {
  margin: 0 0 24px;
  color: #272727;
  font-family: Geist, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 168%;
}

.article_body h2 {
  margin: 56px 0 20px;
  color: #111;
  font-family: Geist, Arial, sans-serif;
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -1.6px;
  line-height: 120%;
}

.article_body h3 {
  margin: 40px 0 14px;
  color: #111;
  font-family: Geist, Arial, sans-serif;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 130%;
}

.article_body ul,
.article_body ol {
  margin: 0 0 24px;
  padding-left: 22px;
}

.article_body li {
  margin-bottom: 12px;
  color: #272727;
  font-family: Geist, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 165%;
}

.article_body li::marker {
  color: #969696;
}

.article_body strong {
  color: #111;
  font-weight: 600;
}

.article_body a {
  color: #111;
  text-decoration: underline;
  text-decoration-color: #E4FF38;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color .2s ease;
}

.article_body a:hover {
  color: #5e5e5e;
}

/* ---------- pull quote ---------- */

.article_quote {
  margin: 40px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid #E4FF38;
}

.article_quote p {
  margin: 0;
  color: #111;
  font-size: 24px;
  font-weight: 300;
  letter-spacing: -0.8px;
  line-height: 140%;
}

.article_quote_cite {
  display: block;
  margin-top: 12px;
  color: #969696;
  font-family: Geist, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 130%;
}

/* ---------- key numbers ---------- */

.article_stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 40px 0;
}

.article_stat {
  display: flex;
  flex-flow: column;
  gap: 8px;
  padding: 20px;
  border-radius: 16px;
  background-color: #f4f4f4;
}

.article_stat_value {
  color: #111;
  font-family: Geist, Arial, sans-serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -1.2px;
  line-height: 100%;
}

.article_stat_label {
  color: #5e5e5e;
  font-family: Geist, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 140%;
}

/* ---------- takeaway box ---------- */

.article_takeaway {
  margin: 48px 0;
  padding: 28px;
  border-radius: 20px;
  background-color: #0c0c0c;
}

.article_takeaway_label {
  display: block;
  margin-bottom: 12px;
  color: #E4FF38;
  font-family: Geist, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 100%;
  text-transform: uppercase;
}

.article_takeaway p {
  margin: 0;
  color: #f4f4f4;
  font-size: 17px;
  font-weight: 400;
  line-height: 160%;
}

.article_takeaway p + p {
  margin-top: 14px;
}

/* ---------- sources ---------- */

.article_sources {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid #e8e8e8;
}

.article_sources_title {
  margin: 0 0 16px;
  color: #111;
  font-family: Geist, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .4px;
  line-height: 100%;
  text-transform: uppercase;
}

.article_sources ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.article_sources li {
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 150%;
}

.article_sources a {
  color: #5e5e5e;
  text-decoration: none;
  border-bottom: 1px solid #e8e8e8;
  transition: color .2s ease, border-color .2s ease;
}

.article_sources a:hover {
  color: #111;
  border-bottom-color: #E4FF38;
}

/* Needs two classes to outrank `.article_body p`, which is equally specific
   on a single class and would otherwise force body-copy size here. */
.article_sources .article_disclaimer {
  margin-top: 24px;
  margin-bottom: 0;
  color: #969696;
  font-family: Geist, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 160%;
}

/* ---------- latest articles ---------- */

.section_article_latest {
  padding-top: 64px;
  padding-bottom: 96px;
  border-top: 1px solid #e8e8e8;
}

.article_latest_head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  width: 100%;
  margin-bottom: 40px;
}

.article_latest_title {
  margin: 0;
  color: #111;
  font-family: Geist, Arial, sans-serif;
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -1.6px;
  line-height: 120%;
}

.article_latest_link {
  color: #111;
  font-family: Geist, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 100%;
  text-decoration: none;
  border-bottom: 2px solid #E4FF38;
  padding-bottom: 4px;
  transition: opacity .2s ease;
}

.article_latest_link:hover {
  opacity: .6;
}

.article_latest_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

.article_latest_card {
  display: flex;
  flex-flow: column;
  gap: 16px;
  text-decoration: none;
}

.article_latest_img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 16px;
}

.article_latest_card_title {
  color: #111;
  font-family: Geist, Arial, sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.9px;
  line-height: 128%;
}

.article_latest_card:hover .article_latest_card_title {
  color: #5e5e5e;
}

/* ==========================================================================
   blog index (blog.html) additions
   ========================================================================== */

/* Dek under the featured post. The Webflow .news_blogs_text has
   line-height:100%, which is too tight once the text wraps. */
.blog_feature_dek {
  max-width: 620px;
  color: #5e5e5e;
  font-family: Geist, Arial, sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 152%;
}

/* .news_blogs_article_header ships with a fixed 57.6px height, which clips
   any headline longer than two lines. Allow three, then ellipsis. */
.news_blogs_list .news_blogs_article_header {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  height: auto;
  min-height: 0;
  white-space: normal;
}

/* Multi-column grid: reserve three lines so the date rows of cards sitting
   side by side line up. Single-column mobile does not need the padding. */
@media screen and (min-width: 768px) {
  .news_blogs_list .news_blogs_article_header {
    min-height: 86.4px;
  }
}

.news_blogs_list .news_blog_article:hover .news_blogs_article_header {
  color: #5e5e5e;
}

.news_blog_header .article_topic {
  margin-right: 4px;
}

/* The featured post is a highlight of one of the articles in the list below,
   not a seventh article, so it says so. It is deliberately left out of the
   filter: hiding a block that sits above the toolbar would pull the page out
   from under the reader every time they change the filter. */
.blog_featured_flag {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  background-color: #111;
  color: #E4FF38;
  font-family: Geist, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 100%;
}

/* The page-level embed clamps .news_blogs_big_header to 3 lines, which cuts
   the featured headline off in the narrow (416px) text column. The block is
   centred against a 405px image, so a fourth line still fits comfortably. */
.news_blog_header .news_blogs_big_header {
  -webkit-line-clamp: 4;
}

@media screen and (max-width: 767px) {
  .blog_feature_dek {
    font-size: 16px;
  }
}

/* ==========================================================================
   taxonomy: category filter, archive headers, article keywords
   ========================================================================== */

/* Toolbar above the card grid: live text search on the left, an archive
   selector in the middle, the live result count on the right. The search is
   client-side only; the selector navigates to a static archive so every
   category and keyword stays a real, crawlable, shareable page. */
/* .news_blogs_nav_menu_wrap is align-self:flex-start, so it shrinks to the
   width of the heading above. Left alone, a 100%-wide toolbar would stop
   there instead of reaching the container edge where the count belongs. */
.news_blogs_nav_menu_wrap:has(.blog_toolbar) {
  align-self: stretch;
}

.blog_toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* Fixed-ish width rather than 1 1 auto: a search box stretched across the
   whole container reads as a page-wide field and pushes the count off the
   controls it belongs to. It still shrinks on narrow viewports. */
.blog_search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 420px;
  min-width: 0;
}

.blog_search_icon {
  position: absolute;
  left: 18px;
  width: 16px;
  height: 16px;
  color: #969696;
  pointer-events: none;
}

.blog_search_input,
.blog_select {
  box-sizing: border-box;
  height: 48px;
  margin: 0;
  border: 1px solid #e8e8e8;
  border-radius: 999px;
  background-color: #fff;
  color: #111;
  font-family: Geist, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 100%;
  transition: border-color .2s ease;
}

.blog_search_input {
  width: 100%;
  padding: 0 18px 0 44px;
}

.blog_search_input::placeholder {
  color: #969696;
}

.blog_search_input:focus,
.blog_select:focus-visible {
  outline: none;
  border-color: #111;
}

/* ---------- archive selector ---------- */

/* A native <select> renders its list with the operating system's own styling,
   which ignores every colour and radius on this page, so this is a button
   plus a panel. Picking an entry narrows the cards in place, the same way
   the search box does; the standalone archive pages are reached from the
   category badge on an article instead. */
.blog_select_wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.blog_select_wrap.is-open {
  z-index: 20;
}

.blog_select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 190px;
  padding: 0 18px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.blog_select:hover,
.blog_select_wrap.is-open .blog_select {
  border-color: #111;
}

.blog_select_icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: #5e5e5e;
  transition: transform .2s ease;
}

.blog_select_wrap.is-open .blog_select_icon {
  transform: rotate(180deg);
}

.blog_select_menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  display: none;
  flex-flow: column;
  min-width: 100%;
  /* Tall enough for the eleven keyword entries; still scrolls on a short
     viewport rather than running off the bottom of the window. */
  max-height: min(440px, 60vh);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid #e8e8e8;
  border-radius: 18px;
  background-color: #fff;
  box-shadow: 0 18px 44px #1111111a;
}

.blog_select_wrap.is-open .blog_select_menu {
  display: flex;
}

.blog_select_option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  margin: 0;
  padding: 11px 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  text-align: left;
  cursor: pointer;
  color: #5e5e5e;
  font-family: Geist, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 100%;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}

.blog_select_option:hover,
.blog_select_option.is-focus {
  background-color: #f4f4f4;
  color: #111;
}

.blog_select_option.is-selected {
  color: #111;
}

/* Marks the archive you are already on without shouting over the labels. */
.blog_select_option.is-selected::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #E4FF38;
}

/* Pushed to the far end of the row; the count is rewritten as you type. */
.blog_count {
  margin-left: auto;
  color: #969696;
  font-family: Geist, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 100%;
  white-space: nowrap;
}

/* The section container is a centring flex column, so without align-self the
   message would sit in the middle of the page instead of lining up with the
   toolbar and the cards. */
.blog_empty {
  display: none;
  align-self: stretch;
  padding: 40px 0 8px;
  color: #5e5e5e;
  font-family: Geist, Arial, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 150%;
}

.blog_empty.is-visible {
  display: block;
}

/* The grid and the featured block both set display explicitly, so the filter
   needs to outrank them. */
.blog_hidden {
  display: none !important;
}

/* ---------- archive header ---------- */

/* On the blog index the featured block carries the 88px of clearance the
   fixed navbar needs. An archive drops that block, so the card section
   becomes the first one on the page and has to clear the navbar itself. */
.section_career_body.is-archive {
  padding-top: 128px;
}

/* Sits in .news_blogs_menu_text_wrap, a flex column with an 8px gap, so the
   margin here only adds the extra separation the crumb needs. */
.blog_archive_crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #5e5e5e;
  font-family: Geist, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 100%;
  text-decoration: none;
  transition: color .2s ease;
}

.blog_archive_crumb:hover {
  color: #111;
}

h1.news_blogs_big_header {
  margin: 0;
}

.blog_archive_kicker {
  color: #969696;
  font-family: Geist, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 100%;
  text-transform: uppercase;
}

.blog_archive_dek {
  max-width: 620px;
  color: #5e5e5e;
  font-family: Geist, Arial, sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 152%;
}

/* ---------- keywords on an article ---------- */

.section_article_keywords {
  padding-bottom: 72px;
}

.article_keywords {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid #e8e8e8;
}

.article_keywords_label {
  color: #111;
  font-family: Geist, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .4px;
  line-height: 100%;
  text-transform: uppercase;
}

.article_keywords_list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.article_keyword {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  background-color: #f4f4f4;
  color: #111;
  font-family: Geist, Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 100%;
  text-decoration: none;
  transition: background-color .2s ease;
}

.article_keyword:hover {
  background-color: #E4FF38;
}

/* Each index card carries its category above the headline, the same order the
   featured card uses. align-self keeps the pill at its own width inside the
   stretching column, and min-width lets the 1fr grid column shrink below the
   badge's content width instead of pushing the grid past the viewport. */
.news_blog_article_text_wrap > .article_topic {
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 11px;
}

.news_blogs_list .news_blog_article {
  min-width: 0;
}

/* ==========================================================================
   responsive
   ========================================================================== */

@media screen and (max-width: 991px) {
  .section_article_header,
  .section_career_body.is-archive {
    padding-top: 112px;
  }

  .article_h1 {
    font-size: 44px;
    letter-spacing: -2.4px;
  }

  .article_dek {
    font-size: 18px;
  }

  .article_cover_wrap {
    margin-top: 40px;
  }

  .section_article_body {
    padding-top: 48px;
    padding-bottom: 64px;
  }

  .article_latest_grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .section_article_header,
  .section_career_body.is-archive {
    padding-top: 104px;
  }

  .article_h1 {
    font-size: 36px;
    letter-spacing: -1.8px;
  }

  .article_body p,
  .article_body li {
    font-size: 17px;
  }

  .article_body h2 {
    margin-top: 44px;
    font-size: 27px;
    letter-spacing: -1.2px;
  }

  .article_cover {
    border-radius: 16px;
  }

  .article_stats {
    grid-template-columns: 1fr;
  }

  .article_quote p {
    font-size: 21px;
  }

  .section_article_latest {
    padding-top: 48px;
    padding-bottom: 64px;
  }

  .article_latest_title {
    font-size: 27px;
  }

  .section_article_keywords {
    padding-bottom: 48px;
  }

  /* Stack the label above the chips so a long keyword does not squeeze the
     row down to one word per line. */
  .article_keywords {
    flex-flow: column;
    align-items: flex-start;
    gap: 14px;
  }

  .blog_archive_dek {
    font-size: 16px;
  }

  /* Stacked toolbar: the count would otherwise be pushed to the right edge
     of its own wrapped line, far from the controls it describes. */
  .blog_search,
  .blog_select_wrap,
  .blog_select {
    flex: 1 1 100%;
    width: 100%;
  }

  .blog_select_menu {
    right: 0;
  }

  .blog_count {
    margin-left: 0;
  }
}

@media screen and (max-width: 479px) {
  .article_h1 {
    font-size: 31px;
    letter-spacing: -1.4px;
  }

  .article_dek {
    font-size: 17px;
  }

  .article_takeaway {
    padding: 22px;
  }

  .article_latest_grid {
    grid-template-columns: 1fr;
  }
}