.difference { background: var(--color-ink); color: var(--color-cream); }
.difference-heading { display: grid; grid-template-columns: 33% 67%; margin-bottom: 55px; }
.difference h2 { margin: 0; font: 400 clamp(52px, 6vw, 88px)/.92 var(--font-display); }
.difference-heading > p:last-child { grid-column: 2; max-width: 540px; margin: 24px 0 0; opacity: .65; }
.difference-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.diy-path, .our-path { padding: 34px; }
.diy-path, .our-path { min-height: 440px; }
.diy-path { background: #283128; color: #d9ddd4; }
.our-path { background: var(--color-lime); color: var(--color-ink); }
.difference-grid > article > p, .update-card > span { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.difference-grid h3 { margin: 20px 0 28px; font: 400 43px/.95 var(--font-display); }
.difference-grid ol { margin: 0; padding: 0; list-style: none; }
.diy-path li { padding: 12px 0; border-top: 1px solid rgb(255 255 255 / 15%); opacity: .72; }
.diy-path li::before { margin-right: 10px; color: var(--color-coral-text); content: '×'; }
.our-path li { display: grid; grid-template-columns: 12px 1fr; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid rgb(23 32 24 / 20%); }
.our-path li::before { width: 7px; height: 7px; border-radius: 50%; background: var(--color-coral-text); content: ''; }
.our-path > b { display: block; margin-top: 28px; font: italic 28px/1 var(--font-display); }
.benefits { background: var(--color-paper); }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 50px; background: var(--color-line); border: 1px solid var(--color-line); }
.benefit { min-height: 210px; padding: 28px; background: var(--color-paper); }
.benefit-icon { display: block; width: 56px; height: 56px; overflow: visible; color: var(--color-coral-text); fill: none; stroke: currentcolor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.benefit-icon-delay-0 { --benefit-icon-delay: 0ms; }
.benefit-icon-delay-70 { --benefit-icon-delay: 70ms; }
.benefit-icon-delay-140 { --benefit-icon-delay: 140ms; }
.benefit-icon-delay-210 { --benefit-icon-delay: 210ms; }
.benefit-icon-delay-280 { --benefit-icon-delay: 280ms; }
.benefit-icon-delay-350 { --benefit-icon-delay: 350ms; }
.benefit-icon-mark { fill: currentcolor; stroke: none; }
.js .benefit:not(.visible) .benefit-icon-stroke,
.js .proof-item:not(.visible) .benefit-icon-stroke,
.js .home-offer:not(.visible) .benefit-icon-stroke { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .benefit:not(.visible) .benefit-icon-mark,
.js .proof-item:not(.visible) .benefit-icon-mark,
.js .home-offer:not(.visible) .benefit-icon-mark { opacity: 0; }
.js .benefit.visible .benefit-icon-stroke,
.js .proof-item.visible .benefit-icon-stroke,
.js .home-offer.visible .benefit-icon-stroke { animation: benefit-icon-draw 850ms cubic-bezier(.25, .75, .25, 1) var(--benefit-icon-delay, 0ms) both; }
.js .benefit.visible .benefit-icon-mark,
.js .proof-item.visible .benefit-icon-mark,
.js .home-offer.visible .benefit-icon-mark { animation: benefit-icon-mark 300ms ease calc(var(--benefit-icon-delay, 0ms) + 620ms) both; }
@keyframes benefit-icon-draw { to { stroke-dashoffset: 0; } }
@keyframes benefit-icon-mark { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
.benefit h3 { margin: 35px 0 6px; font: 400 28px var(--font-display); }
.benefit p { max-width: 270px; margin: 0; color: #526052; font-size: 14px; line-height: 1.5; }
.benefit-closing { max-width: 670px; margin: 45px auto 0; font: 400 clamp(30px, 3.5vw, 48px)/1.05 var(--font-display); text-align: center; }
.own-link { display: grid; grid-template-columns: 1fr 1fr; gap: 12%; align-items: start; background: var(--color-coral); }
.own-link h2 { margin: 0; font: 400 clamp(52px, 6vw, 88px)/.92 var(--font-display); }
.own-link > div:last-child > p:first-child { max-width: 510px; margin: 0; font-size: 19px; line-height: 1.6; }
.channel-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0; }
.channel-list span { padding: 8px 11px; border: 1px solid rgb(23 32 24 / 35%); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.own-link-closing { font: italic 32px/1 var(--font-display); }
.updates { background: #e9e3d8; }
.updates-heading .section-heading { margin-bottom: 50px; }
.update-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.update-card { min-height: 235px; padding: 32px; background: var(--color-paper); }
.update-card:first-child { background: var(--color-ink); color: white; }
.update-card h3 { margin: 35px 0 10px; font: 400 39px/.95 var(--font-display); }
.update-card p { max-width: 440px; margin: 0; line-height: 1.6; }
.update-note { margin: 22px 0 0; opacity: .65; font-size: 12px; text-align: center; }

@media (max-width: 900px) {
  .difference-heading, .own-link { grid-template-columns: 1fr; gap: 30px; }
  .difference-heading > p:last-child { grid-column: auto; }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .difference-grid, .update-grid, .benefit-grid { grid-template-columns: 1fr; }
  .difference-grid > article, .update-card { padding: 26px; }
  .difference-grid h3 { font-size: 37px; }
  .benefit { min-height: 180px; }
  .own-link { gap: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .benefit-icon-stroke { animation: none !important; stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .benefit-icon-mark { animation: none !important; opacity: 1 !important; transform: none !important; }
}