/* Landing page */

section { padding: 5rem 0; }
section + section { border-top: 1px solid var(--pw-line); }

.hero { padding: 4.5rem 0 5rem; }
@media (max-width: 991.98px) { .hero { padding: 3rem 0 3.5rem; } }

/* Hero grid: a real comparison table, filled in once on load. */
.hero-grid { margin: 0; padding: 1.25rem 1.25rem 0.5rem; box-shadow: 0 1px 0 var(--pw-line), 0 18px 40px -24px rgba(23, 35, 46, 0.35); }
.hero-grid figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding-bottom: 0.9rem; border-bottom: 2px solid var(--pw-ink); }
.hero-grid figcaption .pw-head { font-size: 1.05rem; }
.hero-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.hero-table th, .hero-table td { padding: 0.62rem 0.5rem; border-bottom: 1px solid var(--pw-line-soft); vertical-align: middle; }
.hero-table thead th { font-family: var(--pw-font-head); font-weight: 700; text-align: center; color: var(--pw-ink); border-bottom: 1px solid var(--pw-line); }
.hero-table thead th:first-child { text-align: left; color: var(--pw-muted); font-family: var(--pw-font-body); font-weight: 400; }
.hero-table tbody th { font-weight: 400; text-align: left; padding-left: 0; }
.hero-table tbody th .prio { margin-right: 0.5rem; }
.hero-table td { text-align: center; width: 18%; }
.hero-table .pw-mark { width: 1.35rem; height: 1.35rem; }
.hero-table tfoot td, .hero-table tfoot th { border-bottom: 0; padding-top: 0.85rem; padding-bottom: 0.85rem; }
.hero-table tfoot th { font-family: var(--pw-font-head); font-weight: 700; text-align: left; padding-left: 0; }
.hero-table .score { font-family: var(--pw-font-head); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.hero-table .score small { display: block; font-family: var(--pw-font-body); font-weight: 700; font-size: 0.75rem; color: var(--pw-no); margin-top: 0.3rem; }
.hero-row-label { display: flex; align-items: center; gap: 0.5rem; }
@media (max-width: 575.98px) {
  .hero-table tbody th .prio { display: none; }
  .hero-table { font-size: 0.88rem; }
}

/* The single load moment: marks land row by row, then the scores. */
.hero-table.is-filling td .pw-mark { opacity: 0; transform: scale(0.4); animation: pw-mark-in 0.32s cubic-bezier(.3,1.6,.5,1) forwards; }
.hero-table.is-filling .score { opacity: 0; animation: pw-fade 0.5s ease forwards; }
@keyframes pw-mark-in { to { opacity: 1; transform: scale(1); } }
@keyframes pw-fade { to { opacity: 1; } }

/* Steps */
.steps { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; counter-reset: step; }
.steps li { counter-increment: step; border-top: 2px solid var(--pw-ink); padding-top: 1rem; }
.steps li::before { content: counter(step); display: block; font-family: var(--pw-font-head); font-weight: 700; font-size: 2rem; line-height: 1; margin-bottom: 0.6rem; color: var(--pw-ink); }
.steps h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.steps p { color: var(--pw-ink-2); font-size: 0.98rem; margin: 0; }
@media (max-width: 991.98px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* Answer legend */
.answers { background: var(--pw-surface); }
.legend-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--pw-line); }
.legend-list li { display: flex; gap: 1rem; padding: 1.25rem 1rem 1.25rem 0; border-bottom: 1px solid var(--pw-line); }
.legend-list li:nth-child(odd) { border-right: 1px solid var(--pw-line); }
.legend-list li:nth-child(even) { padding-left: 1.25rem; }
.legend-list .pw-mark { width: 2.2rem; height: 2.2rem; }
.legend-list strong { display: block; font-family: var(--pw-font-head); font-size: 1.15rem; }
.legend-list span { color: var(--pw-ink-2); font-size: 0.95rem; }
.legend-list em { display: block; font-style: normal; color: var(--pw-muted); font-size: 0.88rem; margin-top: 0.35rem; }
@media (max-width: 575.98px) {
  .legend-list { grid-template-columns: minmax(0, 1fr); }
  .legend-list li:nth-child(odd) { border-right: 0; }
  .legend-list li:nth-child(even) { padding-left: 0; }
}

/* Privacy */
.see { padding: 1.5rem; height: 100%; }
.see h3 { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.9rem; }
.see ul { margin: 0; padding-left: 1.2rem; }
.see li + li { margin-top: 0.35rem; }
.see-not { background: var(--pw-ink); border-color: var(--pw-ink); color: #fff; }
.see-not h3 { color: #fff; }

/* Closing */
.closing { text-align: left; padding-bottom: 5.5rem; }