/*
 * The pricing page (templates/public/pricing.html), which lists what every Intave service costs on
 * one page: a page title, then one .pricing section per service, each headed by the service name.
 *
 * A service priced in tiers gets .pricing-grid of .pricing-card; a service sold for a single flat
 * price gets .pricing-flat, since it has nothing to compare against. The same plans are offered
 * inside the portal by portal/subscriptions.css, at portal type sizes rather than these.
 *
 * The page follows the home page's rhythm - a large centred title over its content - and stays
 * flat: the panel color, no gradient or shadow. The button is the shared component.
 */
.pricing {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 120px;
    padding: 0 1.5rem;
}

.pricing:first-of-type {
    /* The page title stands alone, so it sits closer to the section it introduces. */
    margin: var(--hero-top) auto 100px;
}

/* Typography comes from .page-title in public/base.css. */
.pricing__title {
    text-align: center;
}

.pricing__lead {
    max-width: 60ch;
    margin: 24px auto 0;
    color: var(--text-dim);
    font-size: var(--font-size-small);
    line-height: 1.6;
    text-align: center;
}

/* The name of the service the plans below belong to - one step down from the page title. */
.pricing__service {
    font-family: var(--display);
    font-size: var(--font-size-medium);
    font-weight: bold;
    line-height: 1.1;
    text-align: center;
    margin: 0;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    align-items: stretch;
}

.pricing-card {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    background: var(--panel);
    border-radius: 14px;
}

.pricing-card__name {
    font-family: var(--display);
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 15px;
}

.pricing-card__size {
    margin: 0.35rem 0 1.4rem;
    color: var(--text-dim);
    font-size: 1.0rem;
    line-height: 1.5;
}

.pricing-card__price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--bar-border);
}

.pricing-card__amount {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.pricing-card__period {
    color: var(--text-dim);
    font-size: 1rem;
    font-weight: 500;
}

.pricing-card__features {
    /* Pushes the button to the bottom edge so every card in the row ends on the same line. */
    flex: 1;
    margin: 1.4rem 0 1.75rem;
    padding: 0;
    list-style: none;
}

.pricing-card__features li {
    position: relative;
    margin-bottom: 0.7rem;
    padding-left: 1.75rem;
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: 1.5;
}

/*
 * The one feature worth catching the eye. The gradient is painted behind the line and clipped to
 * the glyphs, which is why the text itself has to become transparent - both properties are needed,
 * as WebKit honours -webkit-text-fill-color over color. Weight is raised a little because thin
 * strokes lose too much of a multi-hue gradient to read cleanly.
 */
.pricing-card__features li.pricing-card__rainbow {
    background: linear-gradient(90deg, #ff5f6d, #ffa251, #ffd93d, #47e08d, #4ea8ff, #a06cff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.pricing-card .button {
    padding: 0.85rem 1.25rem;
    font-size: 1rem;
}

/*
 * A service sold for one flat price. It has no tiers to compare, so instead of a lone plan card the
 * price is stated once, full width: the figure, then what it covers, then the way in.
 */
.pricing-flat {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 80px;
    padding: 3.5rem 1.75rem;
    background: var(--panel);
    border-radius: 14px;
}

.pricing-flat__figure {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.6rem;
}

.pricing-flat__amount {
    font-family: var(--display);
    font-size: 5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}

.pricing-flat__period {
    color: var(--text-dim);
    font-size: 1.25rem;
    font-weight: 500;
}

.pricing-flat__points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    width: 100%;
    max-width: 900px;
    margin: 3rem 0;
    padding: 3rem 0 0;
    border-top: 1px solid var(--bar-border);
    list-style: none;
}

.pricing-flat__points li {
    position: relative;
    padding-left: 1.75rem;
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* A checkmark drawn from two borders, so no icon font or asset is needed for it. */
.pricing-card__features li::before,
.pricing-flat__points li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0.25rem;
    width: 6px;
    height: 11px;
    border-right: 2px solid var(--good);
    border-bottom: 2px solid var(--good);
    transform: rotate(45deg);
}

.pricing-flat .button {
    padding: 0.85rem 2rem;
    font-size: 1rem;
}

/*
 * What a plan costs on top of its monthly price, one row per service against the same three plans
 * as the grid above. Only the largest plan is metered, so most cells carry the flag-coloured cross
 * that stands for "nothing to pay" - the counterpart of the checkmark used in the plan cards.
 *
 * Rows are separated by a single rule rather than boxed in, keeping the table as flat as the rest
 * of the page. The leading column names the service and so stays at full text color.
 */
.pricing-table {
    width: 100%;
    margin-top: 60px;
    border-collapse: collapse;
    font-size: var(--font-size-small);
}

.pricing-table th,
.pricing-table td {
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--bar-border);
    font-size: var(--font-size-small);
    line-height: 1.5;
    text-align: center;
}

.pricing-table thead th {
    font-family: var(--display);
    font-size: 1.1rem;
    font-weight: 700;
}

.pricing-table tbody th {
    color: var(--text);
    font-weight: 600;
    text-align: left;
}

.pricing-table tbody td {
    color: var(--text-dim);
}

.pricing-table tbody tr:last-child th,
.pricing-table tbody tr:last-child td {
    border-bottom: none;
}

.pricing-table__free {
    color: var(--good);
    font-size: inherit;
    font-weight: 600;
    line-height: 1;
}

@media (max-width: 900px) {
    .pricing-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding-top: 48px;
    }

    .pricing-flat {
        margin-top: 48px;
        padding: 2.5rem 1.5rem;
    }

    .pricing-flat__amount {
        font-size: 3.5rem;
    }

    .pricing-flat__points {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.7rem;
        margin: 2rem 0;
        padding-top: 2rem;
    }

    .pricing-table {
        margin-top: 40px;
        font-size: 0.9rem;
    }

    .pricing-table th,
    .pricing-table td {
        padding: 0.85rem 0.6rem;
    }
}