.hostillaComparisonPage .hostillaDictionaryMain {
    width: min(1180px, calc(100% - 32px));
    max-width: 1180px;
    margin-inline: auto;
}

.hostillaComparisonPage .hostillaComparisonBreadcrumb {
    margin: 18px 0;
}

.hostillaComparisonHero {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(240px, .7fr);
    gap: 30px;
    align-items: center;
    padding: 34px;
    border: 1px solid #d8e8d2;
    border-radius: 8px;
    background: #f7fbf5;
}

.hostillaComparisonHero h1 {
    max-width: 850px;
    margin: 6px 0 14px;
    font-size: 44px;
    line-height: 1.08;
    color: #142319;
    letter-spacing: 0;
}

.hostillaComparisonLead {
    max-width: 780px;
    margin: 0;
    color: #405047;
    font-size: 18px;
    line-height: 1.65;
}

.hostillaComparisonHero aside {
    display: grid;
    gap: 10px;
}

.hostillaComparisonHero aside span {
    display: block;
    padding: 14px 16px;
    border: 1px solid #d7e7d1;
    border-radius: 8px;
    background: #fff;
    color: #53605a;
    font-size: 13px;
    line-height: 1.35;
}

.hostillaComparisonHero aside strong {
    display: block;
    margin-bottom: 3px;
    color: #2c871d;
    font-size: 21px;
}

.hostillaComparisonArticle {
    display: grid;
    gap: 52px;
    padding: 42px 0 16px;
}

.hostillaComparisonSectionHead {
    max-width: 820px;
    margin-bottom: 22px;
}

.hostillaComparisonSectionHead > p,
.hostillaComparisonCta > div > p {
    margin: 0 0 5px;
    color: #408f28;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.hostillaComparisonSectionHead h2,
.hostillaComparisonCta h2 {
    margin: 0 0 9px;
    color: #19261d;
    font-size: 28px;
    line-height: 1.2;
}

.hostillaComparisonSectionHead > span,
.hostillaComparisonCta > div > span {
    color: #56635b;
    line-height: 1.65;
}

.hostillaComparisonStats,
.hostillaComparisonMethodGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.hostillaComparisonStats article,
.hostillaComparisonMethodGrid article {
    min-width: 0;
    padding: 20px;
    border: 1px solid #dbe9d6;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(35, 67, 28, .06);
}

.hostillaComparisonStats strong {
    display: block;
    margin-bottom: 5px;
    color: #2c8b1b;
    font-size: 25px;
}

.hostillaComparisonStats span {
    color: #5f6a63;
    line-height: 1.45;
}

.hostillaComparisonGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.hostillaComparisonCard {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 22px;
    border: 1px solid #cfe4c7;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(35, 67, 28, .08);
}

.hostillaComparisonCard > header {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 78px;
}

.hostillaComparisonCard > header span {
    display: inline-block;
    margin-bottom: 5px;
    color: #3f8e2a;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.hostillaComparisonCard > header h3 {
    margin: 0;
    color: #1c2920;
    font-size: 21px;
    line-height: 1.25;
}

.hostillaComparisonCard > header b {
    flex: 0 0 auto;
    max-width: 112px;
    color: #758079;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    text-align: right;
}

.hostillaComparisonOffers {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
    margin: 18px 0;
}

.hostillaComparisonOffers section {
    min-width: 0;
    padding: 14px;
    border: 1px solid #e2e9df;
    border-radius: 8px;
    background: #fafcf9;
}

.hostillaComparisonOffers section.is-hostilla {
    border-color: #a8d49a;
    background: #f2faef;
}

.hostillaComparisonOffers p,
.hostillaComparisonOffers strong,
.hostillaComparisonOffers section > span {
    display: block;
    overflow-wrap: anywhere;
}

.hostillaComparisonOffers p {
    margin: 0 0 3px;
    color: #438d2f;
    font-size: 12px;
    font-weight: 800;
}

.hostillaComparisonOffers strong {
    color: #202d24;
    font-size: 17px;
}

.hostillaComparisonOffers section > span {
    margin-top: 4px;
    color: #66726a;
    font-size: 13px;
}

.hostillaComparisonVersus {
    align-self: center;
    color: #869087;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.hostillaComparisonPeriods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.hostillaComparisonPeriod {
    min-width: 0;
    padding: 15px;
    border-radius: 8px;
    background: #f6f8f5;
}

.hostillaComparisonPeriod h4 {
    margin: 0 0 10px;
    color: #263128;
    font-size: 15px;
}

.hostillaComparisonPeriod dl {
    margin: 0;
}

.hostillaComparisonPeriod dl > div {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid #e1e7de;
}

.hostillaComparisonPeriod dt {
    color: #667168;
    font-size: 12px;
}

.hostillaComparisonPeriod dd {
    margin: 0;
    color: #1d2920;
    font-size: 13px;
    font-weight: 800;
    text-align: right;
}

.hostillaComparisonPeriod > p {
    margin: 10px 0 4px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.hostillaComparisonPeriod > p.is-saving { color: #258018; }
.hostillaComparisonPeriod > p.is-higher { color: #a65f00; }
.hostillaComparisonPeriod small { color: #747e77; font-size: 10px; line-height: 1.35; }

.hostillaComparisonBilling,
.hostillaComparisonNote {
    margin: 14px 0 0;
    color: #56625a;
    font-size: 13px;
    line-height: 1.55;
}

.hostillaComparisonNote {
    flex: 1 1 auto;
    margin-top: 8px;
}

.hostillaComparisonCard > footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e2eadf;
}

.hostillaComparisonCard > footer a {
    color: #3d842d;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.hostillaComparisonCard > footer a.hostillaComparisonBuy,
.hostillaComparisonCta a,
.hostillaComparisonUnavailable a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid #439e2c;
    border-radius: 7px;
    background: #3fa526;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
}

.hostillaComparisonMethodGrid article > strong {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e7f5e1;
    color: #31811f;
}

.hostillaComparisonMethodGrid h3 {
    margin: 12px 0 7px;
    color: #263128;
    font-size: 18px;
}

.hostillaComparisonMethodGrid p,
.hostillaComparisonDisclosure {
    margin: 0;
    color: #606b63;
    line-height: 1.6;
}

.hostillaComparisonDisclosure {
    margin-top: 16px;
    padding: 16px 18px;
    border: 1px solid #dce9d7;
    border-radius: 8px;
    background: #f7faf5;
    font-size: 13px;
}

.hostillaComparisonSources ul {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hostillaComparisonSources li {
    padding: 13px 15px;
    border-left: 3px solid #7ebb64;
    background: #f7faf5;
    color: #5b665e;
    line-height: 1.5;
}

.hostillaComparisonSources a {
    color: #327f22;
    font-weight: 800;
}

.hostillaComparisonFaq details {
    margin-bottom: 10px;
    border: 1px solid #dbe9d6;
    border-radius: 8px;
    background: #fff;
}

.hostillaComparisonFaq summary {
    padding: 16px 18px;
    color: #243027;
    font-weight: 800;
    cursor: pointer;
}

.hostillaComparisonFaq details p {
    margin: 0;
    padding: 0 18px 17px;
    color: #5b675f;
    line-height: 1.6;
}

.hostillaComparisonCta {
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: space-between;
    padding: 28px;
    border: 1px solid #cfe4c6;
    border-radius: 8px;
    background: #f1f9ed;
}

.hostillaComparisonCta > div:last-child {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 10px;
}

.hostillaComparisonCta > div:last-child a:last-child {
    background: #fff;
    color: #328522;
}

.hostillaComparisonUnavailable {
    max-width: 760px;
    margin: 48px auto;
    padding: 30px;
    border: 1px solid #d9e8d3;
    border-radius: 8px;
    background: #fff;
    text-align: center;
}

@media (max-width: 900px) {
    .hostillaComparisonHero { grid-template-columns: minmax(0, 1fr); }
    .hostillaComparisonHero aside { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hostillaComparisonGrid { grid-template-columns: minmax(0, 1fr); }
    .hostillaComparisonCta { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 680px) {
    .hostillaComparisonPage .hostillaDictionaryMain { width: min(100% - 20px, 1180px); }
    .hostillaComparisonHero { gap: 20px; padding: 22px 18px; }
    .hostillaComparisonHero h1 { font-size: 31px; }
    .hostillaComparisonLead { font-size: 16px; }
    .hostillaComparisonHero aside,
    .hostillaComparisonStats,
    .hostillaComparisonMethodGrid,
    .hostillaComparisonPeriods { grid-template-columns: minmax(0, 1fr); }
    .hostillaComparisonArticle { gap: 42px; padding-top: 32px; }
    .hostillaComparisonSectionHead h2,
    .hostillaComparisonCta h2 { font-size: 24px; }
    .hostillaComparisonCard { padding: 17px; }
    .hostillaComparisonCard > header { display: block; min-height: 0; }
    .hostillaComparisonCard > header b { display: block; max-width: none; margin-top: 8px; text-align: left; }
    .hostillaComparisonOffers { grid-template-columns: minmax(0, 1fr); }
    .hostillaComparisonVersus { padding: 0; }
    .hostillaComparisonCard > footer { align-items: stretch; flex-direction: column; }
    .hostillaComparisonCard > footer a.hostillaComparisonBuy { width: 100%; box-sizing: border-box; }
    .hostillaComparisonCta { padding: 22px 18px; }
    .hostillaComparisonCta > div:last-child,
    .hostillaComparisonCta a { width: 100%; box-sizing: border-box; }
}