body.pricing-page {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: #dfe3e8;
    margin: 0;
}

.pricing-hero {
    background: linear-gradient(rgba(15, 30, 50, .55), rgba(15, 30, 50, .55)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><rect width="10" height="10" fill="%23223"/></svg>');
    background-size: cover;
    color: #fff;
    text-align: center;
    padding-bottom: 60px;
}

.pricing-hero .brand { font-size: 1.4rem; font-weight: 700; color: #fff; }
.pricing-hero .brand-badge {
    background: #1c9be0; color: #fff; padding: 3px 8px; border-radius: 4px; margin-right: 8px; font-size: .9rem;
}
.pricing-hero nav a { color: #fff; margin: 0 14px; text-decoration: none; opacity: .9; }
.pricing-hero nav a:hover { opacity: 1; }
.btn-try-free { background: #1c6fd6; color: #fff; border-radius: 4px; padding: 10px 22px; font-weight: 600; }
.btn-try-free:hover { color: #fff; opacity: .9; }
.pricing-hero h1 { font-weight: 800; margin-top: 30px; }
.pricing-hero .subtitle { opacity: .9; }

.pricing-cards { margin-top: -60px; padding-bottom: 60px; }

.pricing-card {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    overflow: hidden;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.pricing-card .ribbon {
    position: absolute; top: 14px; right: -34px; width: 130px;
    background: #111; color: #fff; text-align: center; transform: rotate(45deg);
    font-size: .7rem; font-weight: 700; padding: 4px 0; letter-spacing: 1px;
}
.pricing-card .card-header-block { background: #0d3c66; color: #fff; padding: 22px 24px; }
.pricing-card .card-header-block h3 { font-weight: 800; margin: 0 0 4px; }
.pricing-card .card-header-block p { margin: 0; opacity: .85; font-size: .9rem; }
.pricing-card .card-body-block { background: #f4f5f7; padding: 26px 24px 30px; flex: 1; display: flex; flex-direction: column; }
.pricing-card .price { text-align: center; }
.pricing-card .price .dollar { font-size: 1.6rem; vertical-align: top; position: relative; top: 6px; color: #333; }
.pricing-card .price .amount { font-size: 3.4rem; font-weight: 800; color: #222; }
.pricing-card .price .cents { font-size: 1.4rem; vertical-align: top; position: relative; top: 6px; color: #333; }
.pricing-card .price-caption { text-align: center; color: #6b7280; margin-bottom: 20px; }
.pricing-card .feature-list { list-style: none; padding: 0; margin: 0 0 24px; }
.pricing-card .feature-list li { padding: 10px 0; border-bottom: 1px solid #e5e7eb; color: #374151; }
.pricing-card .feature-list li .check { color: #111; margin-right: 8px; }
.btn-register {
    display: block; text-align: center; background: #e07a1f; color: #fff; font-weight: 700;
    padding: 12px; border-radius: 4px; text-decoration: none;
}
.btn-register:hover { background: #c96a15; color: #fff; }
.fine-print { text-align: center; color: #6b7280; font-size: .82rem; margin: 14px 0 0; }