/* Homepage and pricing only: shared editorial rhythm, existing theme colors. */
.marketing-page { --marketing-muted: color-mix(in oklab, var(--color-base-content) 68%, transparent); }
.marketing-hero { max-width: 920px; margin: 0 auto; padding: 76px 24px 48px; text-align: center; }
.marketing-hero h1 { margin: 22px 0 26px; font-size: clamp(40px, 5.4vw, 72px); font-weight: 500; line-height: 1.08; letter-spacing: -.055em; text-wrap: balance; }
.marketing-hero h1 span { color: var(--color-primary); }
.marketing-deck { max-width: 590px; margin: 0 auto 28px; font-size: 20px; line-height: 1.6; color: var(--marketing-muted); text-wrap: balance; }
.marketing-primary { border-radius: 999px; padding-inline: 24px; gap: 14px; font-weight: 500; }
.marketing-secondary { display: block; width: fit-content; margin: 18px auto 0; color: var(--color-primary); font-size: 14px; }
.marketing-secondary:hover { text-decoration: underline; text-underline-offset: 4px; }
.marketing-note { margin-top: 18px; color: var(--marketing-muted); font-size: 13px; line-height: 1.7; }
.marketing-examples { max-width: 1152px; margin: 0 auto 56px; padding: 0 32px; display: grid; grid-template-columns: .7fr 1fr 1fr; gap: 14px; }
.marketing-examples figure { min-width: 0; }
.marketing-examples img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.marketing-examples .marketing-reference img { object-fit: contain; background: var(--color-base-100); }
.marketing-examples figcaption { margin-top: 12px; color: var(--marketing-muted); font-size: 13px; line-height: 1.5; }
.marketing-page h2 { font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
.marketing-open-item { padding: 24px 0; border-top: 1px solid var(--color-base-300); }
.marketing-step { font-size: 13px; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.marketing-feature { padding: 18px 0; border-bottom: 1px solid var(--color-base-300); }
.marketing-feature:first-child { padding-top: 0; }
.marketing-final { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 32px 0; }
.pricing-content { max-width: 1100px; margin: 0 auto; padding: 0 32px 64px; }
.pricing-content .marketing-hero { padding-bottom: 54px; }
.pricing-content .marketing-hero h1 { font-size: clamp(40px, 4.7vw, 64px); }
.pricing-content .marketing-deck { max-width: 580px; margin-bottom: 0; }
.pricing-plan { display: grid; grid-template-columns: 1.35fr .8fr 1fr auto; align-items: center; gap: 28px; padding: 30px 0; border-top: 1px solid var(--color-base-300); }
.pricing-plan h2 { font-size: 23px; margin: 0 0 6px; }
.pricing-plan-name p { max-width: 260px; color: var(--marketing-muted); font-size: 14px; line-height: 1.6; }
.pricing-price { font-size: 36px; font-weight: 500; letter-spacing: -.045em; white-space: nowrap; }
.pricing-price span { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--marketing-muted); }
.pricing-allowance { font-size: 15px; line-height: 1.7; }
.pricing-support { color: var(--marketing-muted); font-size: 13px; }
.pricing-action .btn { min-width: 170px; font-weight: 500; }
.pricing-shared { padding: 24px 0; border-block: 1px solid var(--color-base-300); color: var(--marketing-muted); font-size: 15px; line-height: 1.8; }
.pricing-billing { margin-top: 20px; }
.pricing-questions { display: grid; grid-template-columns: 1fr 2fr; gap: 72px; max-width: 1100px; margin: 0 auto; padding: 24px 32px 100px; }
.pricing-questions h2 { font-size: 32px; }
.pricing-questions dl > div { padding: 26px 0; border-top: 1px solid var(--color-base-300); }
.pricing-questions dt { font-size: 18px; font-weight: 500; line-height: 1.5; }
.pricing-questions dd { margin-top: 12px; color: var(--marketing-muted); font-size: 16px; line-height: 1.8; }
@media (max-width: 900px) {
    .pricing-plan { grid-template-columns: 1.2fr .8fr; gap: 16px 24px; }
    .pricing-plan-name p { max-width: none; }
    .pricing-price { text-align: right; }
    .pricing-action { text-align: right; }
    .pricing-questions { gap: 32px; }
    .marketing-final { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
    .marketing-hero { padding: 48px 20px 32px; }
    .marketing-hero h1 { font-size: clamp(36px, 9.5vw, 48px); margin-top: 18px; }
    .marketing-deck { font-size: 17px; }
    .marketing-note { font-size: 12px; }
    .marketing-examples { padding: 0 20px; gap: 8px; margin-bottom: 36px; grid-template-columns: 1fr 1fr; }
    .marketing-examples .marketing-reference { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
    .marketing-examples .marketing-reference img { width: 64px; height: 64px; }
    .marketing-examples .marketing-reference figcaption { margin: 0; }
    .marketing-examples figcaption { font-size: 12px; }
    .pricing-content { padding: 0 20px 32px; }
    .pricing-content .marketing-hero { padding-inline: 0; padding-bottom: 32px; }
    .pricing-plan { padding: 24px 0; gap: 14px; }
    .pricing-plan h2 { font-size: 21px; }
    .pricing-price { font-size: 30px; }
    .pricing-plan-name p, .pricing-allowance { font-size: 13px; }
    .pricing-action .btn { min-width: 0; width: 100%; font-size: 12px; padding-inline: 10px; }
    .pricing-questions { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px 64px; }
}