:root {
  --deep-blue: #7690c5;
  --ink: #22252a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 1.35; }
img { display: block; max-width: 100%; }
a { color: inherit; }

.site-title { height: 31px; display: grid; place-items: center; color: #fff; background: var(--deep-blue); font-size: 16px; font-weight: 700; }
.page-shell { width: min(100%, 1262px); margin: 0 auto; }
.article { padding: 35px 0 0; }
.article-header, .hero-image, .intro, .section-title { width: 830px; margin-right: auto; margin-left: auto; }
.article-header h1 { margin: 0 0 7px; font-size: 32px; line-height: 1.2; letter-spacing: -.6px; }
.byline { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; color: #35363a; font-size: 14px; }
.byline-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.byline p, .byline time { display: block; margin: 0; }
.byline time { color: #67696e; }
.hero-image { overflow: hidden; background: #e5e5e5; }
.hero-image img { width: 100%; aspect-ratio: 1.784 / 1; object-fit: cover; object-position: center; }
.intro { margin-top: 38px; font-size: 18px; line-height: 1.2; }
.intro p { margin: 0 0 22px; }
.intro-lead { font-weight: 700; }
.section-title { margin-top: 32px; margin-bottom: 115px; text-align: center; font-size: 32px; line-height: 1; }

.reason { width: 1160px; min-height: 0; display: grid; grid-template-columns: 542px 568px; align-items: start; column-gap: 50px; margin: 0 auto 44px; }
.reason-image { grid-column: 1; margin: 5px 0 0; }
.reason-image { overflow: hidden; background: #f3f4f6; }
.reason-image img { width: 100%; height: auto; border-radius: 1px; }
.reason-copy, .reason:not(.reason--featured) .reason-copy { grid-column: 2; }
.reason-number { display: block; margin-bottom: 2px; color: #83a0dc; font-size: 72px; line-height: .93; font-weight: 700; }
.reason h2 { margin: 4px 0 12px; font-size: 32px; line-height: 1; letter-spacing: -.7px; }
.reason p { margin: 0; color: #42454a; font-size: 18px; line-height: 1.15; }
blockquote { margin: 24px 0 0; color: #53555a; font-size: 18px; line-height: 1.18; }
blockquote cite { display: block; margin-top: 14px; font-style: normal; }

.offer-card { width: 1070px; min-height: 549px; display: grid; grid-template-columns: 1fr 1fr; margin: 60px auto 95px; border: 3px solid #e1e2e5; border-radius: 4px; padding: 8px; text-align: center; box-shadow: 0 1px 1px rgb(0 0 0 / .07); }
.offer-product { display: grid; place-items: center; margin: 0; padding: 0 10px; }
.offer-product img { width: min(100%, 515px); height: auto; }
.offer-content { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 30px 18px; }
.offer-card h2 { max-width: 505px; margin: 0 auto 30px; color: #4e5055; font-size: 28px; line-height: 1; font-weight: 400; }
.offer-card h2 strong { font-weight: 800; }
.offer-content > p:not(.availability) { max-width: 390px; margin: 0 auto 30px; color: #54575c; font-size: 16px; line-height: 1.2; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 56px; border: 0; border-radius: 1px; color: #fff; background: #7590c7; font-family: inherit; font-size: 17px; font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: 0 1px 1px rgb(0 0 0 / .12); }
.button:hover { background: #6682b9; }
.button--full { width: 100%; }
.availability { margin: 13px 0 0; color: #86898e; font-size: 12px; }
.availability span { color: #e04c4c; font-weight: 700; }

.comments { width: 840px; margin: -9px auto 0; }
.comment-form { margin-bottom: 16px; }
.comment-form input { width: 100%; height: 40px; border: 1px solid #d9dce1; border-radius: 2px; padding: 0 14px; color: #333; font: 14px Arial, sans-serif; outline-color: #a6b6d7; }
.comment-list { padding: 0; margin-left: -5px; }
.comment { position: relative; min-height: 91px; padding: 0 0 25px 73px; font-size: 16px; }
.comment-avatar { position: absolute; top: 8px; left: 0; width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.comment--reply { margin-left: 68px; padding-left: 68px; }
.comment h3 { margin: 0 0 3px; color: #4779ba; font-size: 17px; line-height: 1.1; }
.comment p { margin: 0 0 4px; color: #292b30; line-height: 1.2; }
.comment small { color: #6685b3; font-size: 15px; }

.footer { padding: 21px 51px 105px; color: #8b8e94; text-align: center; font-size: 15px; line-height: 1.25; }
.footer p { margin: 0 0 19px; }
.footer nav { display: flex; justify-content: center; flex-wrap: wrap; margin: 23px 0 18px; }
.footer nav a { padding: 0 8px; color: #797c81; text-decoration: none; border-right: 1px solid #c3c5c7; }
.footer nav a:last-child { border-right: 0; }
.copyright { color: #5c5f64; }

.sticky-offer { position: fixed; z-index: 10; bottom: 0; left: 0; width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 66px; padding: 5px 12px; color: #fff; background: var(--deep-blue); font-size: 17px; font-weight: 700; }
.sticky-offer .button { min-width: 288px; padding: 0 17px; color: #4d5259; background: #fff; }
.mobile-cta { display: none; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 22px; max-width: calc(100% - 32px); transform: translate(-50%, 120px); padding: 9px 12px; border-radius: 3px; color: #fff; background: #2d333c; font-size: 12px; opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip: rect(0, 0, 0, 0); overflow: hidden; white-space: nowrap; border: 0; }

@media (max-width: 700px) {
  body { font-size: 18px; }
  .site-title { height: 29px; font-size: 11px; }
  .article { padding: 45px 10px 0; }
  .article-header, .hero-image, .intro, .section-title { width: auto; margin-right: 0; margin-left: 0; }
  .article-header { margin-right: 5px; margin-left: 5px; }
  .article-header h1 { margin-bottom: 18px; font-size: 25.5833px; line-height: 1.2; letter-spacing: -.45px; }
  .byline { gap: 8px; margin-bottom: 11px; font-size: 18px; line-height: 18px; }
  .byline-avatar { width: 44px; height: 44px; }
  .hero-image img { aspect-ratio: 1.784 / 1; }
  .intro { margin: 22px 5px 0; font-size: 18px; line-height: 21.6px; }
  .intro p { margin: 0 0 30px; }
  .intro p:last-child { margin-bottom: 25px; }
  .section-title { margin: 0 5px 45px; font-size: 28.5833px; line-height: 1; }
  .reason { width: auto; min-height: 0; display: block; margin: 0 5px 46px; }
  .reason-image { margin: 0 0 14px; }
  .reason-number { margin-bottom: 0; font-size: 60.5833px; line-height: 1; }
  .reason h2 { margin: 24px 0 25px; font-size: 28.5833px; line-height: 1; letter-spacing: -.55px; }
  .reason p, blockquote { font-size: 18px; line-height: 21.6px; }
  blockquote { margin-top: 24px; }
  blockquote cite { margin-top: 20px; font-size: 15px; line-height: 15px; }
  .offer-card { width: auto; min-height: 0; display: block; margin: 46px 15px 74px; padding: 14px 10px 22px; border-width: 2px; }
  .offer-product { padding: 0; }
  .offer-product img { width: min(100%, 300px); }
  .offer-content { padding: 24px 0 0; }
  .offer-card h2 { margin-bottom: 26px; font-size: 24.5833px; line-height: 1.2; }
  .offer-card > p:not(.availability) { margin-bottom: 26px; font-size: 16px; }
  .button { min-height: 50px; font-size: 15px; }
  .availability { margin-top: 12px; font-size: 10px; }
  .comments { width: auto; margin: 0 5px; }
  .comment-form { margin-bottom: 17px; }
  .comment-form input { height: 40px; padding: 0 10px; font-size: 12px; }
  .comment-list { padding: 0; margin-left: -5px; }
  .comment { min-height: 0; padding: 0 0 11px 61px; font-size: 16px; }
  .comment::before { width: 50px; height: 50px; }
  .comment--reply { margin-left: 47px; }
  .comment h3 { margin-bottom: 10px; font-size: 17px; }
  .comment p { margin-bottom: 10px; line-height: 19.2px; }
  .comment small { font-size: 12px; line-height: 14px; }
  .footer { padding: 63px 15px 49px; font-size: 11px; }
  .footer p { margin-bottom: 16px; }
  .footer nav { margin: 20px 0 14px; }
  .sticky-offer { display: none; }
  .mobile-cta { position: fixed; z-index: 10; right: 13px; bottom: 13px; left: 13px; display: inline-flex; min-height: 36px; background: var(--deep-blue); box-shadow: 0 3px 10px rgb(28 50 93 / .32); font-size: 13px; }
  .toast { bottom: 61px; font-size: 10px; }
}