/* WebHostRanks Engine: base styles. Theme styles still apply around these blocks. */

.whe-hero { padding: 56px 24px; background: #0f1b2d; color: #fff; border-radius: 14px; margin-bottom: 32px; }
.whe-hero h1 { color: #fff; font-size: 2.6rem; line-height: 1.15; margin: 0 0 12px; }
.whe-hero p { max-width: 640px; opacity: .9; font-size: 1.1rem; }

.whe-btn { display: inline-block; background: #ff6a3d; color: #fff !important; padding: 12px 20px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.whe-btn:hover { filter: brightness(.95); }
.whe-btn-ghost { background: transparent; border: 2px solid #fff; }

.whe-ranking { display: grid; gap: 16px; }
.whe-card { display: grid; grid-template-columns: 56px 1fr 180px; gap: 20px; align-items: start; background: #fff; border: 1px solid #e3e7ee; border-radius: 14px; padding: 20px; }
.whe-rank { font-size: 1.4rem; font-weight: 800; color: #ff6a3d; }
.whe-card h3 { margin: 0 0 4px; }
.whe-best { color: #5b6573; margin: 0 0 8px; }
.whe-pros { margin: 0 0 8px 18px; }
.whe-price { font-size: .95rem; margin: 0 0 6px; }
.whe-offer { background: #fff4ef; color: #9a3412; padding: 6px 10px; border-radius: 8px; display: inline-block; font-weight: 600; }
.whe-side { text-align: center; }
.whe-score { font-size: 2rem; font-weight: 800; }
.whe-score span { color: #0f1b2d; }
.whe-side .whe-btn { margin-top: 10px; width: 100%; box-sizing: border-box; text-align: center; }

.whe-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.whe-offer-card { border: 1px solid #e3e7ee; border-radius: 14px; padding: 18px; background: #fff; }

.whe-meta { color: #5b6573; font-size: .9rem; }
.whe-empty { color: #5b6573; font-style: italic; }
.whe-disclosure { font-size: .85rem; color: #5b6573; margin-top: 24px; }

.whe-provider .whe-score-big { font-size: 1.1rem; margin-bottom: 12px; }
.whe-provider .whe-score-big span { font-size: 2.6rem; font-weight: 800; color: #ff6a3d; }
.whe-score-table, .whe-method-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.whe-score-table th, .whe-score-table td, .whe-method-table th, .whe-method-table td { border-bottom: 1px solid #e3e7ee; padding: 10px; text-align: left; vertical-align: top; }

@media (max-width: 720px) {
    .whe-card { grid-template-columns: 1fr; }
    .whe-hero h1 { font-size: 2rem; }
}