healthchecks/static/css/pricing.css

#pricing-tagline {
    font-weight: bold;
    margin: 20px 0;
    font-size: 28px;
}

.panel.plan h1 {
    font-size: 24px;
    font-weight: bold;

    display: inline-block;
    line-height: 0.9;
    text-shadow: 0px 1px var(--panel-bg), -1px 1px var(--panel-bg), 1px 1px var(--panel-bg), -1px 0px var(--panel-bg);
}

.hobbyist h1 {
    color: var(--plan-hobbyist-color);
    border-bottom: 3px solid var(--plan-hobbyist-border);
}

.supporter h1 {
    color: var(--plan-supporter-color);
    border-bottom: 3px solid var(--plan-supporter-border);
}

.business h1 {
    color: var(--plan-business-color);
    border-bottom: 3px solid var(--plan-business-border);
}

.business-plus h1 {
    color: var(--plan-business-plus-color);
    border-bottom: 3px solid var(--plan-business-plus-border);
}

.mo {
    font-size: 16px;
}

.plan .btn  {
    font-weight: bold;
    color: #1ea65a;
    border-color: #1ea65a;
    background: #FFF;
    transition: all 0.2s ease;

    border-radius: 5px;
    padding: 8px 20px;
}

.plan .btn:hover {
    color: #fff;
    background: #22bc66;
    border-color: #22bc66;
}

.plan .list-group-item {
    padding: 10px 8px;
}

.plan .list-group-item:last-child {
    border-bottom: 0;

}

.error-message {
    font-family: monospace;
}

#faq {
    margin: 40px 0;
}

#faq h2 {
    font-size: 14px;
    font-weight: bold;
}


#period-controls {
    text-align: center;
    padding: 24px;
}

#period-controls .btn {
    width: 100px;
}

#plans .panel-footer {
    background: transparent;
}

#annual-note {
    margin: 10px 0;
    color: #AAA;
}

.page-pricing span[data-help] {
    border-bottom: 1px dashed #888;
    cursor: help;
}

.page-pricing .tooltip-inner {
    text-align: left;
}