.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
    padding: 44px 0 52px;
    max-width: 620px;
    margin: 0 auto;
}

.hero__mark { width: 88px; height: 88px; }

.hero h1 { font-size: clamp(36px, 5vw, 54px); line-height: 1.1; }

.sections {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
}

.intro { display: flex; flex-direction: column; gap: 14px; max-width: 620px; }

.intro h2 { font-size: clamp(26px, 3vw, 34px); }

.intro p { font-size: 16px; }

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 4px;
}

.card__rule { width: 28px; height: 4px; border-radius: 999px; margin-bottom: 12px; }

.card__rule--yellow { background: var(--yellow); }

.card__rule--teal { background: var(--teal); }

.card__title { font-size: 15px; font-weight: 800; color: var(--ink); }

.card__body { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--muted); }

.pledge {
    background: var(--navy);
    border-radius: 24px;
    padding: clamp(24px, 4vw, 40px);
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

.pledge__halo {
    position: absolute;
    right: -90px;
    bottom: -140px;
    width: 300px;
    height: 300px;
    border-radius: 999px;
    border: 44px solid rgba(255, 211, 0, .08);
    pointer-events: none;
}

.pledge__eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.22em;
    color: rgba(255, 255, 255, .55);
}

.pledge__lead {
    font-size: clamp(16px, 1.8vw, 19px);
    line-height: 1.6;
    font-weight: 700;
    color: #ffffff;
    max-width: 680px;
}

/* A âncora default do site é teal sobre fundo claro (site.css) e fica
   ilegível sobre o navy do painel. Aqui ela veste o amarelo Winx, que já é
   a cor de destaque do próprio painel, e o `align-self` a segura no
   tamanho do texto: como filha direta do flex de `.pledge`, ela esticaria
   pela largura toda. */
.pledge__link {
    align-self: start;
    font-size: 14px;
    font-weight: 800;
    color: var(--yellow);
}

.pledge__link:hover { color: var(--yellow); text-decoration: underline; text-underline-offset: 0.2em; }

.pledge__link:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 4px; }

.pledge__rule { height: 1px; background: rgba(255, 255, 255, .14); }

.pledge__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.pledge__item { display: flex; flex-direction: column; gap: 8px; }

.pledge__title { font-size: 14px; font-weight: 800; color: #ffffff; }

.pledge__body { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .75); }

.cta--final { margin-top: 8px; padding-bottom: 16px; }

.cta--final .btn { width: 100%; max-width: 380px; padding: 16px 24px; }