/* Clutch Marketing: extra article blocks for The Future (Clutch Article template).
   Use in an article's Content (HTML source):
     <div class="c-takeaways"><p class="c-kicker">Key takeaways</p><ul><li>…</li></ul></div>
     <blockquote>…</blockquote>                       (pull quote)
     <div class="c-checklist"><ul><li>…</li></ul></div>
     <div class="c-callout"><p>…</p></div>
     <div class="c-compare"><div class="c-compare__card">…</div><div class="c-compare__card is-good">…</div></div>
     <div class="c-mid-cta"><p>…</p><a href="make-it-happen/">…</a></div> */
.c-article .c-takeaways { margin: 44px 0 10px; padding: 30px 34px; border-radius: 22px; background: #171717; border: 1px solid rgba(255,255,255,.12); border-left: 4px solid var(--theme, #D6193A); }
.c-article .c-kicker { font-size: 13px !important; text-transform: uppercase; letter-spacing: .14em; color: #8c8c8c !important; margin: 0 0 14px !important; }
.c-article .c-takeaways ul, .c-article .c-checklist ul { list-style: none; margin: 0; padding: 0; }
.c-article .c-takeaways li { position: relative; padding: 8px 0 8px 30px; font-size: 19px; line-height: 1.5; color: #fff; }
.c-article .c-takeaways li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 12px; height: 2px; background: var(--theme, #D6193A); }

.c-article blockquote.c-quote { margin: 46px 0; padding: 6px 0 6px 34px; border-left: 4px solid var(--theme, #D6193A); }
.c-article blockquote.c-quote, .c-article blockquote.c-quote p { font-family: var(--font_sequelsansromanbody), sans-serif; font-size: 38px; line-height: 1.18; letter-spacing: -0.03em; color: #fff; }
.c-article blockquote.c-quote p { margin: 0; }

.c-article .c-checklist { margin: 18px 0 26px; }
.c-article .c-checklist li { position: relative; padding: 13px 0 13px 40px; border-top: 1px solid rgba(255,255,255,.12); font-size: 19px; line-height: 1.45; color: #fff; }
.c-article .c-checklist li:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.c-article .c-checklist li::before { content: ""; position: absolute; left: 0; top: 14px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--theme, #D6193A) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat; }

.c-article .c-callout { margin: 34px 0; padding: 40px 38px; border-radius: 24px; text-align: left;
  background: radial-gradient(circle 420px at 100% 0%, rgba(214,25,58,.28), rgba(214,25,58,0) 70%), #171717; border: 1px solid rgba(214,25,58,.55); }
.c-article .c-callout p, .c-article .c-callout strong { font-family: var(--font_sequelsansromanbody), sans-serif; font-size: 34px; line-height: 1.15; letter-spacing: -0.03em; color: #fff !important; margin: 0; font-weight: 400; }

.c-article .c-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0 26px; }
.c-article .c-compare__card { padding: 28px 26px; border-radius: 22px; background: #171717; border: 1px solid rgba(255,255,255,.12); }
.c-article .c-compare__card.is-good { border-color: rgba(214,25,58,.6); background: radial-gradient(circle 300px at 100% 0%, rgba(214,25,58,.22), rgba(214,25,58,0) 70%), #171717; }
.c-article .c-compare__label { font-size: 13px !important; text-transform: uppercase; letter-spacing: .12em; color: #8c8c8c !important; margin: 0 0 10px !important; }
.c-article .c-compare__num { font-family: var(--font_sequelsansromanbody), sans-serif; font-size: 64px !important; line-height: 1 !important; letter-spacing: -0.04em; color: #fff !important; margin: 0 0 4px !important; }
.c-article .c-compare__num span { font-size: 18px; letter-spacing: 0; color: #a9a9a9; margin-left: 8px; }
.c-article .c-compare__card p:last-child { font-size: 17px; line-height: 1.5; color: #a9a9a9; margin: 10px 0 0; }
.c-article .c-compare__card.is-good .c-compare__num { color: var(--theme, #D6193A) !important; }

.c-article .c-mid-cta { margin: 40px 0 10px; padding: 30px 32px; border-radius: 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap;
  background: #1c1c1c; border: 1px solid rgba(255,255,255,.12); }
.c-article .c-mid-cta p { font-size: 22px !important; line-height: 1.3 !important; color: #fff !important; margin: 0 !important; max-width: 560px; letter-spacing: -0.02em; }
.c-article .c-mid-cta a { display: inline-flex; align-items: center; min-height: 50px; padding: 0 24px; border-radius: 999px; background: var(--theme, #D6193A); color: #fff !important; text-decoration: none !important; font-size: 16px; white-space: nowrap; }
.c-article .c-mid-cta a:hover { background: #b9122f; }

@media (max-width: 767px) {
  .c-article .c-takeaways { padding: 24px 20px; }
  .c-article .c-takeaways li, .c-article .c-checklist li { font-size: 17px; }
  .c-article blockquote.c-quote, .c-article blockquote.c-quote p { font-size: 27px; }
  .c-article .c-callout { padding: 28px 22px; }
  .c-article .c-callout p, .c-article .c-callout strong { font-size: 26px; }
  .c-article .c-compare { grid-template-columns: 1fr; }
  .c-article .c-mid-cta p { font-size: 19px !important; }
  .c-article .c-mid-cta a { width: 100%; justify-content: center; }
}