/* Homepage comparison: Sideways8 vs the alternatives (block markup: table.s8-vs) */
.s8-vs-wrap { --vs-ink: #17301F; --vs-ink2: #1F3A2B; --vs-gold: #F2B705; --vs-r: 26px; position: relative; margin-top: 8px; }
.s8-vs { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-family: var(--fb); font-size: 16px; line-height: 1.45; color: var(--tx); filter: drop-shadow(0 22px 34px rgba(20, 34, 25, .1)) drop-shadow(0 2px 4px rgba(20, 34, 25, .05)); }
.s8-vs caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.s8-vs th:nth-child(1) { width: 26%; }
.s8-vs th:nth-child(2) { width: 28%; }
.s8-vs th:nth-child(3), .s8-vs th:nth-child(4) { width: 23%; }

/* Header: column names float above the card; the Sideways8 column rises as a dark pillar */
.s8-vs thead th { vertical-align: bottom; text-align: left; padding: 0 26px 20px; font-weight: 400; background: none; border: 0; }
.s8-vs .s8-vs-name { display: flex; align-items: center; gap: 10px; font-family: var(--fd); font-weight: 700; font-size: 20px; line-height: 1.15; letter-spacing: -.01em; color: var(--tx); }
.s8-vs thead small { display: block; margin-top: 5px; font-size: 13px; line-height: 1.35; color: var(--mu); }
.s8-vs thead th.s8-vs-q { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mu); padding-bottom: 22px; }
.s8-vs thead th.us { position: relative; padding: 34px 26px 22px; border-radius: var(--vs-r) var(--vs-r) 0 0; background: radial-gradient(120% 90% at 0% 0%, rgba(242, 183, 5, .22), transparent 55%), var(--vs-ink); overflow: hidden; }
.s8-vs thead th.us .s8-vs-name { color: #fff; font-size: 24px; }
.s8-vs thead th.us small { color: rgba(255, 255, 255, .66); }
.s8-vs-mark { display: inline-grid; place-items: center; height: 26px; padding: 0 7px; border-radius: 8px; background: var(--vs-gold); color: #142219; font-family: var(--fb); font-size: 12px; font-weight: 800; letter-spacing: .02em; }

/* Body: a white card crossed by the pillar */
.s8-vs tbody td { padding: 22px 26px; vertical-align: middle; background: var(--card); color: var(--mu); border-top: 1px dashed var(--line); transition: background .25s, color .25s; }
.s8-vs tbody tr:first-child td { border-top: 0; }
.s8-vs tbody tr:first-child td:first-child { border-top-left-radius: var(--vs-r); }
.s8-vs tbody tr:first-child td:last-child { border-top-right-radius: var(--vs-r); }
.s8-vs tbody tr:last-child td:first-child { border-bottom-left-radius: var(--vs-r); }
.s8-vs tbody tr:last-child td:last-child { border-bottom-right-radius: var(--vs-r); }
.s8-vs tbody td:first-child { color: var(--tx); font-weight: 700; font-size: 16px; }
.s8-vs tbody td:first-child { display: table-cell; }
.s8-vs-rl { display: flex; align-items: center; gap: 14px; }
.s8-vs-ic { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--bg2); color: var(--tx); transition: background .3s, color .3s, rotate .45s cubic-bezier(.2, .7, .2, 1); }
.s8-vs-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Marks: a gold check for Sideways8, quieter marks for the others */
.s8-vs td.us, .s8-vs td[data-m] { position: relative; padding-left: 60px; }
.s8-vs td.us::before, .s8-vs td[data-m]::before { content: ""; position: absolute; left: 24px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: center / 14px no-repeat; }
.s8-vs td[data-m="no"]::before { background-color: rgba(127, 127, 127, .14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 4l6 6M10 4l-6 6' stroke='%237A776D' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.s8-vs td[data-m="part"]::before { background-color: rgba(184, 154, 94, .2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7h7' stroke='%238A6F3A' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.s8-vs tbody td.us { background: var(--vs-ink); color: #fff; font-weight: 600; border-top: 1px solid rgba(255, 255, 255, .08); }
.s8-vs td.us, .s8-vs th.us { box-shadow: -18px 0 26px -20px rgba(8, 16, 11, .5), 18px 0 26px -20px rgba(8, 16, 11, .5); }
.s8-vs tbody tr:first-child td.us { border-top-color: rgba(255, 255, 255, .12); }
.s8-vs td.us::before { width: 26px; height: 26px; margin-top: -13px; background-color: var(--vs-gold); background-size: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4l2.6 2.6L11 4.6' fill='none' stroke='%23142219' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); box-shadow: 0 0 0 5px rgba(242, 183, 5, .14); transition: scale .45s cubic-bezier(.2, 1.5, .4, 1), box-shadow .3s; }

/* Foot: the pillar ends in the call to action */
.s8-vs tfoot td { padding: 0; border: 0; background: none; }
.s8-vs tfoot td.us { padding: 22px 26px 28px; border-radius: 0 0 var(--vs-r) var(--vs-r); background: var(--vs-ink); text-align: center; border-top: 1px solid rgba(255, 255, 255, .08); }
.s8-vs tfoot td.us::before { content: none; }
.s8-vs tfoot .w-btn { display: flex; justify-content: center; width: 100%; }
.s8-vs tfoot small { display: block; margin-top: 10px; font-size: 13px; color: rgba(255, 255, 255, .66); }

/* Hover: the row lights up, the check pulses, the row icon turns gold */
@media (hover: hover) and (pointer: fine) {
  .s8-vs tbody tr:hover td { background: #FBF8F0; color: var(--tx); }
  .s8-vs tbody tr:hover td.us { background: var(--vs-ink2); color: #fff; }
  .s8-vs tbody tr:hover td.us::before { scale: 1.14; box-shadow: 0 0 0 8px rgba(242, 183, 5, .2); }
  .s8-vs tbody tr:hover .s8-vs-ic { background: var(--vs-gold); color: #142219; rotate: -8deg; }
}
.pal-forest .s8-vs tbody tr:hover td:not(.us) { background: var(--card2); }

/* The table runs its own entrance, so the site-wide reveal leaves its wrapper alone */
.s8-js .s8-vs-wrap.s8-rv { opacity: 1 !important; translate: none !important; scale: none !important; }

/* Entrance: rows rise one after another, then each check pops in */
.s8-js .s8-vs-wrap:not(.is-on) thead th.us { translate: 0 18px; opacity: 0; }
.s8-js .s8-vs-wrap:not(.is-on) tbody td, .s8-js .s8-vs-wrap:not(.is-on) tfoot td.us { translate: 0 16px; opacity: 0; }
.s8-js .s8-vs-wrap:not(.is-on) td.us::before { scale: 0; }
.s8-vs-wrap.is-on thead th, .s8-vs-wrap.is-on tbody td, .s8-vs-wrap.is-on tfoot td { transition: opacity .6s ease, translate .8s cubic-bezier(.16, .8, .2, 1), background .25s, color .25s; }
.s8-vs-wrap.is-on tbody tr:nth-child(1) td { transition-delay: .12s, .12s, 0s, 0s; }
.s8-vs-wrap.is-on tbody tr:nth-child(2) td { transition-delay: .2s, .2s, 0s, 0s; }
.s8-vs-wrap.is-on tbody tr:nth-child(3) td { transition-delay: .28s, .28s, 0s, 0s; }
.s8-vs-wrap.is-on tbody tr:nth-child(4) td { transition-delay: .36s, .36s, 0s, 0s; }
.s8-vs-wrap.is-on tbody tr:nth-child(5) td { transition-delay: .44s, .44s, 0s, 0s; }
.s8-vs-wrap.is-on tfoot td { transition-delay: .52s, .52s, 0s, 0s; }
.s8-vs-wrap.is-on tbody tr:nth-child(1) td.us::before { transition-delay: .5s; }
.s8-vs-wrap.is-on tbody tr:nth-child(2) td.us::before { transition-delay: .6s; }
.s8-vs-wrap.is-on tbody tr:nth-child(3) td.us::before { transition-delay: .7s; }
.s8-vs-wrap.is-on tbody tr:nth-child(4) td.us::before { transition-delay: .8s; }
.s8-vs-wrap.is-on tbody tr:nth-child(5) td.us::before { transition-delay: .9s; }
.s8-vs-wrap.is-done td.us::before, .s8-vs-wrap.is-done td { transition-delay: 0s !important; }

/* Tablets: a little tighter */
@media (max-width: 1100px) {
  .s8-vs thead th, .s8-vs tbody td { padding-left: 18px; padding-right: 18px; }
  .s8-vs td.us, .s8-vs td[data-m] { padding-left: 54px; }
  .s8-vs td.us::before, .s8-vs td[data-m]::before { left: 18px; }
  .s8-vs-ic { display: none; }
  .s8-vs { font-size: 15px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .s8-vs tfoot .w-btn { padding-left: 10px; padding-right: 10px; font-size: 12px; letter-spacing: .06em; white-space: normal; }
}

/* Phones: each row becomes a card. The Sideways8 answer leads, the other two sit side by side. */
@media (max-width: 900px) {
  .s8-vs, .s8-vs tbody, .s8-vs tr, .s8-vs td, .s8-vs tfoot { display: block; width: auto; }
  .s8-vs { filter: none; table-layout: auto; }
  .s8-vs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .s8-vs tbody { display: grid; gap: 14px; max-width: 640px; margin: 0 auto; }
  .s8-vs tfoot { max-width: 640px; margin: 0 auto; }
  .s8-vs tbody tr { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: 24px; background: var(--card); box-shadow: 0 14px 30px rgba(20, 34, 25, .08); }
  .s8-vs tbody td, .s8-vs tbody tr:first-child td { border: 0; border-radius: 0 !important; padding: 14px 16px; font-size: 14px; }
  .s8-vs tbody td:first-child { grid-column: 1 / -1; display: flex; align-items: center; padding: 16px 16px 12px; font-size: 17px; font-family: var(--fd); }
  .s8-vs-rl { gap: 12px; }
  .s8-vs-ic { display: inline-grid; width: 34px; height: 34px; border-radius: 11px; }
  .s8-vs tbody tr td.us { grid-column: 1 / -1; margin: 0 10px; border-radius: 16px !important; padding: 14px 16px 14px 54px; font-size: 15px; box-shadow: none; }
  .s8-vs td.us::before { left: 16px; }
  .s8-vs tbody tr td[data-m] { padding: 14px 36px 16px 16px; }
  .s8-vs td[data-m]::before { left: auto; right: 12px; top: 13px; margin: 0; width: 20px; height: 20px; background-size: 12px; }
  .s8-vs td[data-th]::after { content: attr(data-th); display: block; order: -1; font-family: var(--fb); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--mu); margin-bottom: 4px; white-space: nowrap; }
  .s8-vs td[data-th] { display: flex; flex-direction: column; }
  .s8-vs td.us[data-th]::after { color: var(--vs-gold); }
  .s8-vs td[data-m] + td[data-m] { border-left: 1px dashed var(--line); }
  .s8-vs tbody td[data-m] { margin-top: 6px; }
  .s8-vs tfoot tr { display: block; margin-top: 16px; }
  .s8-vs tfoot .s8-vs-gap { display: none; }
  .s8-vs tfoot td.us { border-radius: 24px; padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .s8-js .s8-vs-wrap th, .s8-js .s8-vs-wrap td { opacity: 1 !important; translate: none !important; transition: none !important; }
  .s8-js .s8-vs-wrap td.us::before { scale: 1 !important; transition: none !important; }
}