/* Shared offer pages and the homepage price comparison. */
.offer-section, .offer-page { --offer-accent: #d2f86a; letter-spacing: 0; }
.tone-start { --offer-accent: #d2f86a; }
.tone-catalog { --offer-accent: #b8dfff; }
.tone-company { --offer-accent: #ffbca6; }
.offer-section { background: #f5f6f2; color: #141414; padding: 90px 0; }
.offer-section *, .offer-page * { letter-spacing: 0; }
.offer-section a:focus-visible, .offer-examples a:focus-visible { outline-color: #3e6800; }
.offer-kicker { display: flex; justify-content: space-between; gap: 20px; font-size: 11px; font-weight: 600; padding-bottom: 22px; border-bottom: 1px solid #cdd0c6; }
.offer-heading { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: end; margin: 32px 0; }
.offer-heading h2, .offer-page h2 { font-size: 42px; line-height: 1.15; font-weight: 800; margin: 0; }
.offer-heading p { max-width: 440px; margin: 0; font-size: 16px; line-height: 1.65; color: #575b50; }
.offer-common { display: flex; flex-wrap: wrap; gap: 12px 34px; padding: 20px 0 30px; font-size: 13px; }
.offer-common span { display: flex; align-items: center; gap: 8px; }
.offer-common span::before { content: ''; width: 6px; height: 6px; flex: none; border-radius: 50%; background: #49711a; }
.offer-common strong { font-size: 17px; }
.offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.offer-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid #d1d4c9; border-radius: 6px; overflow: hidden; background: #fff; }
.offer-card-top { padding: 25px 24px 23px; background: var(--offer-accent); }
.offer-card-top > span { font-size: 11px; font-weight: 600; }
.offer-card-top h3 { font-size: 40px; line-height: 1.1; margin: 24px 0 12px; white-space: nowrap; }
.offer-card-top h3 small { font-size: 25px; }
.offer-card-top p { margin: 0; font-size: 14px; min-height: 40px; line-height: 1.4; }
.offer-card-image { display: block; position: relative; aspect-ratio: 3 / 2; background: #e3e6dd; overflow: hidden; }
.offer-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.offer-card-image:hover img { transform: scale(1.03); }
.offer-card-image > span { position: absolute; bottom: 0; inset-inline: 0; background: #141414; color: #fff; font-size: 11px; padding: 9px 15px; display: flex; justify-content: space-between; align-items: center; }
.offer-card-image .icon { width: 16px; height: 16px; }
.offer-card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.offer-card-body > p { margin: 0 0 22px; font-size: 14px; line-height: 1.65; min-height: 92px; }
.offer-card dl { margin: auto 0 24px; font-size: 12px; }
.offer-card dl div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid #e1e4da; }
.offer-card dt { color: #5b6053; }
.offer-card dd { margin: 0; text-align: right; font-weight: 600; }
.offer-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--offer-accent); color: #141414; padding: 17px 20px; min-height: 56px; border-radius: 4px; font-size: 14px; font-weight: 800; border: 1px solid transparent; transition: background .2s, border-color .2s; }
.offer-card .offer-button { background: #141414; color: #fff; font-size: 12px; }
.offer-button:hover { background: #fff; border-color: #141414; color: #141414; }
.offer-card .offer-button:hover { background: var(--offer-accent); }
.offer-button .icon { width: 20px; height: 20px; }
.offer-compare-heading { margin: 62px 0 28px; display: flex; justify-content: space-between; align-items: baseline; gap: 30px; }
.offer-compare-heading h3 { margin: 0; font-size: 28px; }
.offer-compare-heading p { margin: 0; color: #575b50; font-size: 14px; max-width: 440px; line-height: 1.6; }
.offer-table-wrap { width: 100%; }
.offer-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; line-height: 1.6; }
.offer-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.offer-table th, .offer-table td { text-align: left; padding: 19px 16px; border-bottom: 1px solid #cdd0c6; vertical-align: top; overflow-wrap: anywhere; }
.offer-table thead th { font-size: 21px; background: var(--offer-accent); }
.offer-table thead th:first-child { background: transparent; font-size: 12px; font-weight: 400; }
.offer-table thead a { display: block; }
.offer-table thead span { font-size: 14px; }
.offer-table tbody th { color: #5b6053; font-weight: 600; }
.offer-table th:first-child { padding-left: 0; width: 24%; }
.offer-table .is-current { box-shadow: inset 0 -3px #141414; }
.offer-domain { display: block; text-decoration: underline; text-underline-offset: 4px; }
.offer-domain + .offer-domain { margin-top: 9px; }
.offer-total { font-weight: 800; }
.offer-terms { font-size: 12px; line-height: 1.8; color: #5b6053; margin: 26px 0 0; max-width: 930px; }
.offer-header { height: 86px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.offer-back, .offer-header-contact { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; min-height: 44px; }
.offer-back .icon, .offer-header-contact .icon { width: 18px; height: 18px; }
.offer-back { color: #c6c9bf; margin-right: auto; margin-left: 30px; }
.offer-header-contact { color: var(--offer-accent); }
.offer-nav { border-block: 1px solid #373a33; }
.offer-nav > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.offer-nav a { display: flex; align-items: center; gap: 18px; padding: 20px; border-bottom: 3px solid transparent; }
.offer-nav a:first-child { padding-left: 0; }
.offer-nav a[aria-current] { color: var(--offer-accent); border-bottom-color: var(--offer-accent); }
.offer-nav span { font-size: 16px; white-space: nowrap; font-weight: 800; }
.offer-nav small { font-size: 11px; }
.offer-hero { position: relative; isolation: isolate; overflow: hidden; }
.offer-hero-background, .offer-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.offer-hero-background { object-fit: cover; object-position: center; }
.offer-hero-shade { background: rgb(10 14 11 / 76%); }
.offer-hero-content { padding-block: 48px 32px; }
.offer-eyebrow { margin: 0 0 20px; font-size: 12px; color: var(--offer-accent); }
.offer-hero h1 { font-size: 68px; line-height: 1.08; letter-spacing: 0; margin: 0; font-weight: 800; }
.offer-hero h1 span { color: var(--offer-accent); white-space: nowrap; }
.offer-hero-intro { margin: 22px 0; max-width: 590px; font-size: 17px; line-height: 1.65; }
.offer-hero-actions { display: flex; align-items: center; gap: 30px; }
.offer-example-link { font-size: 13px; padding: 12px 0; text-decoration: underline; text-underline-offset: 5px; }
.offer-hero-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding-top: 26px; border-top: 1px solid #676e61; margin: 34px 0 0; }
.offer-hero-facts dt { font-size: 11px; color: #c8cdc2; }
.offer-hero-facts dd { font-size: 21px; margin: 7px 0 0; font-weight: 600; }
.offer-detail-section { padding-block: 70px; }
.offer-page .offer-detail-section .offer-kicker, .offer-payment .offer-kicker { border-color: #393e32; color: #bdc3b3; }
.offer-detail-section .offer-heading p { color: #bdc3b3; }
.offer-feature-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 45px; }
.offer-feature-list article { border-top: 1px solid #3c4234; padding-top: 24px; }
.offer-feature-list article > span { color: var(--offer-accent); font-size: 12px; }
.offer-feature-list h3 { font-size: 20px; line-height: 1.4; margin: 18px 0 12px; }
.offer-feature-list p { font-size: 14px; line-height: 1.75; color: #bdc3b3; margin: 0; }
.offer-scope-note { margin: 34px 0 0; max-width: 920px; font-size: 13px; line-height: 1.8; color: #bdc3b3; }
.offer-examples { background: #f5f6f2; color: #141414; padding: 70px 0; }
.offer-examples h2 { margin: 30px 0 40px; }
.offer-example { margin: 0; }
.offer-example + .offer-example { margin-top: 56px; }
.offer-example figcaption { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 22px; }
.offer-example h3 { font-size: 25px; margin: 0 0 12px; }
.offer-example figcaption p { margin: 0; font-size: 14px; line-height: 1.7; max-width: 700px; color: #575b50; }
.offer-example-visit { display: flex; align-items: center; gap: 14px; font-size: 13px; white-space: nowrap; padding: 12px 0; text-decoration: underline; text-underline-offset: 5px; }
.offer-example-screen { display: block; aspect-ratio: 3 / 2; border: 1px solid #cdd0c6; }
.offer-example-screen img { width: 100%; height: 100%; object-fit: contain; }
.offer-payment { padding-block: 70px; }
.offer-payment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 38px; }
.offer-payment h2 { font-size: 36px; }
.offer-payment-grid p { color: #bdc3b3; font-size: 15px; line-height: 1.8; max-width: 410px; margin-top: 24px; }
.offer-receipt { margin: 0; }
.offer-receipt > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 20px 0; border-bottom: 1px solid #393e32; font-size: 14px; }
.offer-receipt > div:first-child { padding-top: 0; }
.offer-receipt dt { max-width: 210px; }
.offer-receipt dt small { display: block; color: #aeb5a3; font-size: 11px; margin-top: 5px; }
.offer-receipt dd { font-size: 22px; font-weight: 600; margin: 0; white-space: nowrap; }
.offer-receipt .offer-receipt-total { color: var(--offer-accent); }
.offer-receipt-total dd { font-size: 30px; font-weight: 800; }
.offer-payment .offer-terms { color: #aeb5a3; }
.offer-faq { padding-bottom: 70px; }
.offer-faq h2 { margin-bottom: 30px; }
.offer-faq details { border-top: 1px solid #393e32; }
.offer-faq details:last-child { border-bottom: 1px solid #393e32; }
.offer-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; list-style: none; padding: 25px 0; font-size: 17px; cursor: pointer; }
.offer-faq summary::-webkit-details-marker { display: none; }
.offer-faq details[open] summary .icon { transform: rotate(45deg); }
.offer-faq details p { color: #bdc3b3; line-height: 1.8; font-size: 14px; max-width: 800px; margin: 0 0 28px; }
.offer-faq p a { color: var(--offer-accent); text-decoration: underline; text-underline-offset: 4px; }
.offer-page-compare { padding-block: 64px; }
.offer-page-compare .offer-heading { margin-top: 0; }
.offer-related { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 36px; }
.offer-related a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; border-bottom: 1px solid #a9ae9f; }
.offer-related span { font-size: 12px; }
.offer-related strong { display: block; font-size: 19px; margin-top: 10px; }
.offer-final { padding: 70px 0; background: var(--offer-accent); color: #141414; }
.offer-final p { font-size: 11px; margin: 0 0 22px; }
.offer-final h2 { margin-bottom: 30px; }
.offer-final .offer-button { color: #fff; background: #141414; margin-right: 24px; }
.offer-final .offer-button:hover { background: #fff; color: #141414; }
.offer-final .wrap > span { display: inline-block; font-size: 12px; margin-top: 18px; }
.offer-footer { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-block: 36px; }
.offer-footer p, .offer-footer > a:last-child { font-size: 12px; }
.offer-footer > a:last-child { display: flex; align-items: center; gap: 12px; }
.offer-footer .icon { width: 18px; height: 18px; }
@media (min-width: 1600px) { .offer-hero-content { padding-block: 60px 40px; } }
@media (max-width: 1100px) {
  .offer-card-top, .offer-card-body { padding: 20px; }
  .offer-card-top h3 { font-size: 34px; }
  .offer-card-body > p { min-height: 138px; }
  .offer-heading { gap: 30px; }
  .offer-heading h2, .offer-page h2 { font-size: 34px; }
  .offer-nav a { gap: 10px; flex-wrap: wrap; }
  .offer-nav small { width: 100%; }
  .offer-payment-grid { gap: 35px; }
  .offer-receipt-total dd { font-size: 25px; }
}
@media (max-width: 800px) {
  .offer-section { padding-block: 54px; }
  .offer-grid { gap: 12px; }
  .offer-card-top, .offer-card-body { padding: 16px; }
  .offer-card-top h3 { font-size: 29px; }
  .offer-card-top h3 small { font-size: 19px; }
  .offer-card-top > span { font-size: 10px; }
  .offer-card-body > p { font-size: 13px; min-height: 165px; }
  .offer-card dl div { flex-direction: column; gap: 5px; }
  .offer-card dd { text-align: left; }
  .offer-card .offer-button { font-size: 11px; gap: 6px; padding: 14px 10px; }
  .offer-card .offer-button .icon { width: 16px; height: 16px; }
  .offer-heading { grid-template-columns: 1fr; gap: 20px; }
  .offer-heading p { max-width: 600px; }
  .offer-table thead th { font-size: 18px; }
  .offer-table th, .offer-table td { padding: 15px 10px; }
  .offer-feature-list { gap: 20px; }
  .offer-feature-list h3 { font-size: 18px; }
  .offer-payment-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .offer-page .wrap, .offer-section .wrap { width: calc(100% - 40px); }
  .offer-kicker { font-size: 10px; }
  .offer-kicker span:last-child { display: none; }
  .offer-heading h2, .offer-page h2 { font-size: 30px; }
  .offer-heading p { font-size: 14px; }
  .offer-common { gap: 13px; flex-direction: column; font-size: 12px; padding-top: 0; }
  .offer-grid { grid-template-columns: 1fr; gap: 24px; }
  .offer-card-top, .offer-card-body { padding: 22px; }
  .offer-card-top h3 { font-size: 40px; margin-top: 18px; }
  .offer-card-top > span { font-size: 11px; }
  .offer-card-top p { min-height: 0; }
  .offer-card-body > p { min-height: 0; font-size: 14px; }
  .offer-card dl div { flex-direction: row; }
  .offer-card dd { text-align: right; }
  .offer-card .offer-button { font-size: 13px; padding: 15px 18px; }
  .offer-compare-heading { display: block; margin-top: 40px; }
  .offer-compare-heading h3 { font-size: 26px; margin-bottom: 15px; }
  .offer-table { font-size: 11px; line-height: 1.5; }
  .offer-table th:first-child { width: 25%; }
  .offer-table th, .offer-table td { padding: 13px 5px; }
  .offer-table thead th { font-size: 14px; line-height: 1.5; }
  .offer-table thead th:first-child { font-size: 10px; }
  .offer-table thead span { display: block; font-size: 11px; }
  .offer-total { font-size: 12px; }
  .offer-header { height: 76px; gap: 16px; }
  .offer-header .logo { font-size: 35px; }
  .offer-back { margin-left: auto; margin-right: 0; font-size: 12px; gap: 8px; }
  .offer-header-contact { display: none; }
  .offer-nav .wrap { width: calc(100% - 24px); }
  .offer-nav a { padding: 14px 8px; gap: 5px; display: block; }
  .offer-nav a:first-child { padding-left: 8px; }
  .offer-nav span { font-size: 14px; }
  .offer-nav small { display: block; font-size: 9px; line-height: 1.5; margin-top: 5px; }
  .offer-hero-content { padding-block: 30px 25px; }
  .offer-eyebrow { font-size: 10px; line-height: 1.6; margin-bottom: 18px; }
  .offer-hero h1 { font-size: 48px; }
  .offer-hero-intro { font-size: 14px; line-height: 1.7; margin: 18px 0 22px; }
  .offer-hero-actions { align-items: stretch; flex-direction: column; gap: 8px; }
  .offer-example-link { align-self: flex-start; font-size: 12px; }
  .offer-hero-facts { gap: 14px; padding-top: 20px; margin-top: 20px; }
  .offer-hero-facts dt { font-size: 10px; line-height: 1.5; }
  .offer-hero-facts dd { font-size: 16px; }
  .offer-detail-section, .offer-examples, .offer-payment { padding-block: 44px; }
  .offer-feature-list { grid-template-columns: 1fr; margin-top: 30px; gap: 24px; }
  .offer-feature-list h3 { margin-block: 12px 8px; font-size: 19px; }
  .offer-example figcaption { display: block; }
  .offer-example h3 { font-size: 22px; }
  .offer-example-visit { margin-top: 10px; }
  .offer-examples h2 { margin-bottom: 30px; }
  .offer-receipt dd { font-size: 20px; }
  .offer-receipt dt { font-size: 13px; }
  .offer-receipt-total dd { font-size: 23px; }
  .offer-receipt > div { gap: 14px; }
  .offer-faq { padding-bottom: 44px; }
  .offer-faq summary { font-size: 15px; line-height: 1.5; }
  .offer-related { grid-template-columns: 1fr; gap: 10px; }
  .offer-related strong { font-size: 18px; }
  .offer-final { padding-block: 44px; }
  .offer-final .offer-button { margin-right: 0; width: 100%; }
  .offer-footer { flex-wrap: wrap; gap: 24px; }
  .offer-footer p { display: none; }
}
@media (max-width: 360px) {
  .offer-hero h1 { font-size: 42px; }
  .offer-nav span { font-size: 12px; }
  .offer-table { font-size: 10px; }
  .offer-table thead th { font-size: 12px; }
  .offer-table .offer-total { font-size: 10px; }
  .offer-receipt-total dd { font-size: 20px; }
  .offer-final .offer-button { font-size: 12px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .offer-card-image img, .offer-button { transition: none; } }