.section-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

/* Editor-only, scoped under .editor-styles-wrapper so this can never reach the front end — see
   the full comment on .wp-block-tt360-section in components/section.css. The base (non "-lg")
   case has no max-width of its own normally, so it needs "none" restated — the "-lg" variant
   two rules below is a two-class selector (.section-heading.section-heading-lg), which already
   has enough specificity on its own to beat GeneratePress's `body .wp-block { max-width:
   var(--content-width) }` rule and didn't need this; the base, single-class case doesn't.
   :not(.section-heading-lg) keeps this from also winning (it has higher specificity than the
   "-lg" rule by itself) against that rule's own real 880px cap on an "-lg" instance. Confirmed
   directly: measured max-width: 1120px (editor) vs no cap at all, 1168px, on the real page,
   for a plain section-heading with no "-lg". */
.editor-styles-wrapper .block-editor-block-list__layout .wp-block-tt360-section-heading:not(.section-heading-lg) {
    max-width: none;
}

.section-heading .eyebrow {
    font-size: 16px;
}

.section-heading .heading {
    margin: 0;
    font-size: 48px;
    line-height: 1.08;
    letter-spacing: -0.96px;
}

/* Caps width for every section-heading except the hero's own text block, which doesn't use
   this component. */
.section-heading.section-heading-lg {
    max-width: 880px;
    margin: 0 auto;
}

/* The "light" treatment (for a heading on a green section) now applies automatically from the
   ancestor tt360/section's own background class, not a manual toggle on this block — the
   section-heading-type-light modifier class/attribute is gone. Content saved with that old
   attribute still renders correctly: the attribute is just silently ignored now (nothing reads
   it any more), and every real instance of "light" was always inside a green section anyway
   (that was the attribute's entire stated purpose), so the automatic rule below produces the
   identical visual result the manual toggle always did. */
.tt360-section-bg-green .section-heading .eyebrow {
    color: rgba(var(--cream), 0.85);
}

.tt360-section-bg-green .section-heading .heading {
    max-width: 800px;
    color: rgba(var(--cream), 1);
}

.tt360-section-bg-green .section-heading .intro {
    color: rgba(var(--cream), 0.85);
}

/* The prototype only ever has this on the Pricing FAQ's intro (a mailto link), in its own
   faq.css, not here — ported to the shared component instead since there's no FAQ-specific
   wrapper class to hook into in this theme's block composition (the FAQ List sits inside the
   same tt360/section as this heading, not a dedicated .faq-section). */
.tt360-section-bg-green .section-heading .intro a {
    color: rgba(var(--cream), 1);
    text-decoration: underline;
}

/* md */
@media (max-width: 767.98px) {
    .section-heading .heading {
        font-size: 30px;
    }
}