/* What is Alioup: plain-language overview. Builds on home.css and blog.css. */

.wi-hero { padding-bottom: 64px; }
.wi-hero .bl-hero-text { max-width: 760px; }
.wi-hero .bl-lede strong { color: var(--home-ink); }

.wi-body { background: #fff; }

.wi-container { max-width: 800px; }

.home-new .wi-container h2 {
    margin: 48px 0 14px;
    color: var(--home-ink);
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.2;
    letter-spacing: 0;
}

.home-new .wi-container h2:first-child { margin-top: 0; }

.wi-container p,
.wi-container li {
    color: var(--home-muted);
    font-size: 17px;
    line-height: 1.7;
}

.wi-container a { color: var(--home-teal); text-decoration: underline; text-underline-offset: 3px; }
.wi-container a:hover { color: var(--home-rust); }
.wi-container strong { color: var(--home-ink); }

.wi-list { margin: 0; padding-left: 22px; }
.wi-list li { margin-bottom: 12px; }

.wi-table-wrap {
    margin: 8px 0 16px;
    overflow-x: auto;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(26, 40, 51, 0.08);
    border: 1px solid #ebe6dd;
}

.wi-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 16px;
    line-height: 1.5;
}

.wi-table th,
.wi-table td {
    padding: 14px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #ebe6dd;
    color: var(--home-muted);
}

.wi-table thead th {
    background: var(--home-teal);
    color: #fff;
    font-weight: 600;
}

.wi-table tbody th { color: var(--home-ink); font-weight: 600; }
.wi-table tbody tr:last-child th,
.wi-table tbody tr:last-child td { border-bottom: 0; }
.wi-table tbody tr:nth-child(even) { background: var(--home-cream); }

.wi-compare td:last-child { color: var(--home-ink); font-weight: 600; }

@media (max-width: 640px) {
    .wi-table { min-width: 0; font-size: 14px; }
    .wi-table th,
    .wi-table td { padding: 10px 8px; }
    .wi-table-wrap { overflow-x: visible; }
}