/* Styles extracted from post-cta.html inline styles */

:root {
    --page-max-width: 393px;
}

.main-root {
    position: relative;
    min-height: 100vh;
}

.page-bg {
    position: absolute;
    inset: 0;
    background: var(--color-primary-dark);
    z-index: 0;
}

.confirm-contents {
    position: relative;
    z-index: 2;
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding-top: 73px;
    padding-bottom: 120px;
}

.logo-wrap { text-align: center; position: relative; }
.footer-logo-img { display: inline-block; }
.company-name { display: block; margin-top: 14px; margin-bottom: 60px; color: var(--color-accent-cream); font-weight: 700; }
.underline { position: relative; width: 100vw; left: 50%; transform: translateX(-50%); height: 1px; background: var(--color-accent-cream); opacity: 0.25; }
.underline-second { margin: 0 0 30px; }

.hero-title { text-align: center; margin: 0; color: var(--color-accent-cream); }

/* Page break spacing: 30px above title and 30px below sender line */
.hero-title { margin-top: 30px; }

.supporting-message { max-width: 315px; margin: 18px auto 0; text-align: center; color: var(--color-accent-cream); text-transform: uppercase; font-size: 14px; line-height: 18px; }
.supporting-message p { margin: 0 0 12px; }

.cta-email-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px; /* single source of vertical rhythm between CTA, OR and email details */
}

.cta-row { position: relative; margin: 0; }
.cta-rect { width: 121px; height: 29px; margin: 0 auto; background: var(--color-accent-cream); border: 1px solid var(--color-accent-cream); }
.announcement-access { display: block; width: 100%; height: 100%; text-decoration: none; color: var(--color-primary-dark); font-weight: 600; line-height: 29px; text-align: center; text-transform: uppercase; }

.or-sep { margin: 0; text-align: center; color: var(--color-accent-cream); font-style: italic; font-size: 12px; text-transform: uppercase; line-height: 1; }

.email-details { max-width: 275px; margin: 0; color: var(--color-accent-cream); font-size: 14px; line-height: 18px; text-transform: uppercase; }

/* Strong override to cancel the legacy rule in main.css that used
   `.confirm-contents .or-sep { ... !important }`. We explicitly
   reset width/display and provide vertical padding so the "OR"
   glyph is optically centered and spacing is driven by the
   `.cta-email-group` gap. */
.confirm-contents .cta-email-group .or-sep,
.confirm-contents .or-sep {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 6px 0 !important; /* equal space above/below the glyph */
    line-height: 1 !important;
    text-align: center !important;
}
.email-details p { margin: 0 0 8px; }
.email-details a { color: var(--color-accent-cream); text-decoration: underline; }

.underline-after-sender { margin: 30px 0 0; }

.not-received { max-width: 315px; margin: 60px auto 0; color: var(--color-accent-cream); font-size: 14px; line-height: 18px; text-align: center; text-transform: uppercase; }
.not-received .italic { margin: 0 0 8px; font-style: italic; }
.not-received .underline-link { text-decoration: underline; color: var(--color-accent-cream); font-weight: 700; }

.terms-privacy { position: fixed; left: 0; right: 0; bottom: 33px; text-align: center; color: var(--color-accent-cream); font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; z-index: 3; transform: none; display: flex; justify-content: center; gap: 8px; }
.terms-privacy .home-link { font-weight: 400; }

/* small tweaks for logo img display matching previous inline style */
.logo-wrap img.footer-logo-img { display: inline-block; }