/* Pricing, About, FAQ and Guides pages. Builds on tokens.css and welcome-shared.css. */
.marketing-main {
    max-width: 52rem;
    margin: 0 auto;
    padding: var(--tt-space-7) var(--tt-space-4) var(--tt-space-8);
}

.marketing-main h1 {
    font-size: var(--tt-font-size-3xl);
    font-weight: var(--tt-font-weight-bold);
    line-height: var(--tt-line-height-tight);
    margin-bottom: var(--tt-space-4);
}

.marketing-main h2 {
    font-size: var(--tt-font-size-xl);
    font-weight: var(--tt-font-weight-semibold);
    margin: var(--tt-space-6) 0 var(--tt-space-3);
}

.marketing-main p,
.marketing-main li {
    font-size: var(--tt-font-size-base);
    line-height: var(--tt-line-height-relaxed);
    color: var(--tt-color-text);
}

.marketing-lead {
    font-size: var(--tt-font-size-lg);
    color: var(--tt-color-text-muted);
}

.marketing-nav__link {
    color: var(--tt-color-text);
    text-decoration: none;
    font-weight: var(--tt-font-weight-medium);
}

.marketing-nav__link:hover {
    color: var(--tt-color-primary);
}

.marketing-footer {
    flex-wrap: wrap;
    gap: var(--tt-space-3);
}

.marketing-footer__about {
    flex-basis: 100%;
    margin: 0;
    color: var(--tt-color-text-muted);
    font-size: var(--tt-font-size-sm);
}

.marketing-plan {
    border: 1px solid var(--tt-color-border);
    border-radius: var(--tt-radius-lg);
    background: var(--tt-color-surface);
    box-shadow: var(--tt-shadow-sm);
    padding: var(--tt-space-6);
    margin: var(--tt-space-5) 0;
}

.marketing-plan__price {
    font-size: var(--tt-font-size-3xl);
    font-weight: var(--tt-font-weight-bold);
}

.marketing-plan__period {
    color: var(--tt-color-text-muted);
    margin-left: var(--tt-space-2);
}

.marketing-faq details {
    border-bottom: 1px solid var(--tt-color-border);
    padding: var(--tt-space-4) 0;
}

.marketing-faq summary {
    cursor: pointer;
    font-weight: var(--tt-font-weight-semibold);
}

.marketing-faq summary h2 {
    display: inline;
    font-size: var(--tt-font-size-base);
    margin: 0;
}

.marketing-guides {
    list-style: none;
    padding: 0;
}

.marketing-guides li {
    margin-bottom: var(--tt-space-5);
}

.marketing-guides a {
    font-weight: var(--tt-font-weight-semibold);
    font-size: var(--tt-font-size-lg);
}

.marketing-meta {
    color: var(--tt-color-text-muted);
    font-size: var(--tt-font-size-sm);
}

.marketing-article table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--tt-space-4) 0;
    font-size: var(--tt-font-size-sm);
}

.marketing-article th,
.marketing-article td {
    border: 1px solid var(--tt-color-border);
    padding: var(--tt-space-2);
    vertical-align: top;
    text-align: left;
}

@media (max-width: 640px) {
    .marketing-article table {
        display: block;
        overflow-x: auto;
    }
}