.landing-page {
    background: #ffffff;
    overflow-x: hidden;
}

.pms-container {
    margin: 0 auto;
    max-width: 1280px;
    padding: 0 2rem;
    width: 100%;
}

.hero-section {
    background: linear-gradient(135deg, #236092 0%, #236092 48%, #1c355e 100%);
    color: #ffffff;
    overflow: hidden;
    position: relative;
}


/* Decorative veil of the heroes — pure CSS (2026-08-11).

   Before: the site's FIVE heroes all loaded the SAME hotlinked photo from images.unsplash.com at 10%
   opacity. That was a request to a third-party CDN on every page: outside the cookie consent, outside
   our control (the URL can vanish at any moment) and paid for by the visitor in latency — all for an
   effect that is barely visible. Two radial-gradients deliver the same depth without leaving our
   domain.

   A single rule on purpose: there were five identical copies, and five copies diverge. */
.hero-section__overlay,
.features-hero__overlay,
.resources-hero__overlay,
.resource-article-hero__overlay,
.demo-hero__overlay {
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.16), transparent 45%),
        radial-gradient(circle at 82% 78%, rgba(120, 190, 235, 0.18), transparent 50%);
    inset: 0;
    position: absolute;
}

.hero-section__content {
    padding-bottom: 4rem;
    padding-top: 4rem;
    position: relative;
}

.hero-header {
    margin-bottom: 2.5rem;
    text-align:center;
}

.hero-grid {
    align-items: center;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
}

.hero-copy {
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hero-copy__title {
    color: #ffffff;
    font-family: var(--pms-heading-font);
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0;
}

.hero-copy__subtitle {
    color: #dbeafe;
    font-size: 1.125rem;
    line-height: 1.75;
    margin: 0;
}

.hero-copy__micro {
    margin: -0.25rem 0 0;
}

.hero-copy__micro-link {
    color: #e0f2fe;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hero-copy__micro-link:hover {
    color: #ffffff;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.hero-actions__primary,
.cta-actions__primary {
    align-items: center;
    background: #ffffff;
    border-radius: 0.7rem;
    box-shadow: 0 20px 40px rgba(28, 53, 94, 0.25);
    color: #236092;
    display: inline-flex;
    font-weight: 600;
    gap: 0.5rem;
    justify-content: center;
    min-height: 56px;
    padding: 0.85rem 2rem;
    text-decoration: none;
    transition: background 180ms ease, transform 180ms ease;
}

.hero-actions__primary:hover,
.cta-actions__primary:hover {
    background: #f3f4f6;
    color: #236092;
    transform: scale(1.05);
}

.hero-actions__secondary,
.cta-actions__secondary {
    align-items: center;
    border: 2px solid #ffffff;
    border-radius: 0.7rem;
    color: #ffffff;
    display: inline-flex;
    font-weight: 600;
    justify-content: center;
    min-height: 56px;
    padding: 0.85rem 2rem;
    text-decoration: none;
    transition: background 180ms ease;
}

.hero-actions__secondary:hover,
.cta-actions__secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* PR-SIGNUP-WELCOME: 10->0 countdown below the Success/AlreadyActive buttons
   on /signup/confirm. Small text, neutral colour. */
.signup-confirmation-cta__countdown {
    color: #64748b;
    font-size: 0.85rem;
    margin-top: 1rem;
}

/* PR-STRIPE-SDK-2c bug fix: .cta-actions__secondary was designed for a dark
   background (hero/dark). In .signup-confirmation-cta the background is light (section--soft)
   -> a white button on a light background is invisible. Overridden to carry the brand colour. */
.signup-confirmation-cta .cta-actions__secondary,
.section--soft .cta-actions__secondary,
.section--white .cta-actions__secondary {
    background: transparent;
    border-color: var(--pms-accent, #1c355e);
    color: var(--pms-accent, #1c355e);
}

.signup-confirmation-cta .cta-actions__secondary:hover,
.section--soft .cta-actions__secondary:hover,
.section--white .cta-actions__secondary:hover {
    background: var(--pms-accent, #1c355e);
    color: #ffffff;
}

.hero-stats-band {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    margin-top: 2.5rem;
    padding-top: 1.75rem;
}

.hero-stats {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    padding-top: 0;
    row-gap: 1.25rem;
}

.hero-stats__group {
    min-width: 0;
    text-align: center;
}

.hero-stats strong {
    display: block;
    font-family: var(--pms-heading-font);
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    line-height: 1.15;
    white-space: nowrap;
}

.hero-stats span {
    color: #bfdbfe;
    display: block;
    font-size: 0.875rem;
    margin-top: 0.35rem;
}

.hero-stats__divider {
    align-self: center;
    background: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    height: 2.75rem;
    width: 1px;
}

.hero-media {
    align-self: center;
    display: block;
    width: 100%;
}

.hero-image {
    /* The file is 856x580 (cropped 2026-09-03: the source had an 11px white strip on the right edge). It said 840/580 until 2026-08-30, so object-fit: cover shaved ~3% off
       the sides and the declared ratio disagreed with the painted box on every crawl. The mobile
       override below always had the right number. */
    aspect-ratio: 856 / 580;
    border-radius: 1rem;
    box-shadow: 0 24px 60px rgba(29, 29, 27, 0.25);
    display: block;
    height: auto;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.section-image {
    border-radius: 1rem;
    box-shadow: 0 24px 60px rgba(29, 29, 27, 0.25);
    display: block;
    height: 350px;
    object-fit: cover;
    width: 100%;
}

.section-image--raised {
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.content-grid {
    align-items: center;
    display: grid;
    gap: 4rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wave-divider {
    line-height: 0;
    width: 100%;
}

.wave-divider svg {
    display: block;
    height: 100px;
    width: 100%;
}

/* Features (#fff) → How it works (#f9fafb): mesma geometria que soft→dark, cores da marca + base cinza */
.wave-divider--features-soft {
    background-color: #ffffff;
}

.section {
    padding: 6rem 0;
}

.section--white {
    background: #ffffff;
}

.section--soft {
    background: #f9fafb;
}

.section--dark {
    background: #1c355e;
    color: #ffffff;
}

.section-heading {
    margin: 0 auto 4rem;
    max-width: 48rem;
    text-align: center;
}

.section-heading h2,
.steps-copy h2 {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.steps-copy__lead {
    color: #5a6b78;
    font-size: 1.125rem;
    line-height: 1.65;
    margin: -0.35rem 0 0;
    max-width: 38rem;
}

.section--how-it-works {
    padding-bottom: 4.5rem;
    padding-top: 4.5rem;
}

.how-it-works__intro {
    margin-bottom: 2rem;
    text-align: center;
}

.how-it-works__title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0 auto 0.75rem;
    max-width: 44rem;
}

.how-it-works__lead {
    color: #5a6b78;
    font-size: 1.0625rem;
    line-height: 1.65;
    margin: 0 auto;
    max-width: 40rem;
}

.how-it-works__grid {
    align-items: start;
    gap: 2.5rem;
}

.how-it-works__grid .steps-list {
    gap: 1.15rem;
}

.how-it-works__image {
    height: clamp(240px, 30vw, 300px);
    margin: 0 auto;
    max-width: 100%;
    object-fit: cover;
}

.how-it-works__media {
    width: 100%;
}

/* Testimonials (Adm.Api public/testimonials) */
.section--testimonials {
    padding-bottom: 4rem;
    padding-top: 2.5rem;
}

.testimonials__intro {
    margin-bottom: 2.5rem;
    text-align: center;
}

.testimonials__title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: clamp(1.85rem, 3.2vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0 auto;
    max-width: 40rem;
}

.testimonials__grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.testimonial-card {
    background: #ffffff;
    border: 1px solid #e3e8ec;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(28, 53, 94, 0.06);
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.35rem 1.5rem;
}

.testimonial-card__quote {
    border: none;
    color: #5a6b78;
    font-size: 1.02rem;
    font-style: italic;
    line-height: 1.65;
    margin: 0 0 1.25rem;
    padding: 0;
    quotes: none;
}

.testimonial-card__footer {
    margin-top: auto;
}

.testimonial-card__author-line {
    color: #1c355e;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
}

.testimonial-card__title {
    font-weight: 500;
}

.testimonial-card__company {
    color: #5a6b78;
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.testimonial-card__segment {
    color: #236092;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-top: 0.5rem;
    text-transform: uppercase;
}

.steps-copy--side {
    gap: 0;
}

.section-heading p,
.step-item p,
.feature-card p {
    color: #5a6b78;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

.section-heading p {
    font-size: 1.25rem;
}

/* Below hero: B2B differentiation band (Fase 1 plano consolidado) */
.section--differentiator {
    background: linear-gradient(180deg, #ffffff 0%, #f0f7fb 35%, #eef5f9 100%);
    padding-bottom: 5rem;
    padding-top: 4.5rem;
}

.differentiator-grid {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.differentiator-card {
    background: #ffffff;
    border: 1px solid rgba(28, 53, 94, 0.09);
    border-radius: 1rem;
    box-shadow: 0 10px 36px rgba(28, 53, 94, 0.07);
    padding: 1.5rem 1.4rem;
}

.differentiator-card__title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin: 0 0 0.65rem;
}

.differentiator-card__body {
    color: #5a6b78;
    font-size: 0.98rem;
    line-height: 1.65;
    margin: 0;
}

.differentiator-link-wrap {
    margin: 2.25rem 0 0;
    text-align: center;
}

.differentiator-link {
    color: #236092;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid rgba(65, 151, 203, 0.45);
    padding-bottom: 2px;
    transition: color 160ms ease, border-color 160ms ease;
}

.differentiator-link:hover {
    border-bottom-color: #4197cb;
    color: #1c355e;
}

.features-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-card {
    background: #ffffff;
    border: 1px solid #dfe6ec;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(28, 53, 94, 0.05);
    height: 100%;
    padding: 2rem;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.feature-card:hover {
    border-color: rgba(65, 151, 203, 0.55);
    box-shadow: 0 10px 25px rgba(28, 53, 94, 0.14);
}

.feature-card__icon {
    align-items: center;
    background: linear-gradient(135deg, #4197cb, #236092);
    border-radius: 0.75rem;
    color: #ffffff;
    display: flex;
    height: 3.5rem;
    justify-content: center;
    /* Geraldo 2026-07-26: o quadrado do icone fica centralizado no card; titulo e texto
       seguem alinhados a esquerda. Para centralizar o card inteiro, some text-align: center
       em .feature-card (nao foi pedido). */
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    width: 3.5rem;
}

.feature-card h3 {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    margin-top: 0;
}

.steps-copy,
.benefits-copy {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.steps-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.step-item {
    display: flex;
    gap: 1.5rem;
}

.step-item__number {
    align-items: center;
    background: linear-gradient(135deg, #4197cb, #236092);
    border-radius: 999px;
    color: #ffffff;
    display: flex;
    flex: 0 0 4rem;
    font-family: var(--pms-heading-font);
    font-size: 1.25rem;
    font-weight: 800;
    height: 4rem;
    justify-content: center;
}

.step-item h3 {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 0.35rem;
    margin-top: 0;
}

.benefits-copy h2 {
    color: #ffffff;
    font-family: var(--pms-heading-font);
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0;
}

.benefits-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.benefit-item {
    align-items: flex-start;
    color: #dbeafe;
    display: flex;
    font-size: 1.125rem;
    gap: 0.75rem;
    line-height: 1.6;
}

.benefit-item .mud-icon-root {
    color: #4197cb;
    flex: 0 0 auto;
    margin-top: 0.15rem;
}

.cta-section {
    background: linear-gradient(135deg, #236092, #236092);
    color: #ffffff;
    text-align: center;
}

.cta-section__content {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    max-width: 896px;
    text-align: center;
}

.cta-section h2 {
    color: #ffffff;
    font-family: var(--pms-heading-font);
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0;
}

.cta-section p {
    color: #dbeafe;
    font-size: 1.25rem;
    margin: 0;
}

.cta-section__anchor {
    color: #dbeafe;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.cta-section small {
    color: #bfdbfe;
    font-size: 0.875rem;
}

.footer-section {
    background: #1d1d1b;
    color: #9ca3af;
    padding: 3rem 0;
}

.footer-section__grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 2rem;
}

.footer-brand {
    align-items: center;
    color: #ffffff;
    display: flex;
    font-family: var(--pms-heading-font);
    font-weight: 800;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.footer-brand img {
    height: 40px;
    width: 40px;
}

.footer-section h4 {
    color: #ffffff;
    font-family: var(--pms-heading-font);
    font-size: 1rem;
    margin: 0 0 1rem;
}

.footer-section p {
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0;
}

.footer-section ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-section a {
    color: #9ca3af;
    text-decoration: none;
    transition: color 180ms ease;
}

.footer-section a:hover {
    color: #236092;
}

.footer-section__bottom {
    border-top: 1px solid #2d2d2c;
    font-size: 0.875rem;
    padding-top: 2rem;
    text-align: center;
}

/* Social row, above the copyright. Deliberately inherits .footer-section a for colour: it adds
   layout only, so it introduces no new colour pair for the contrast guard to judge. Wraps instead
   of scrolling - five targets have to fit a 320px screen. */
.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: center;
    margin-bottom: 1rem;
}

/* WCAG 2.5.8: a 44px target around a 20px glyph. Sizing the anchor rather than the icon keeps the
   marks optically equal - they are drawn on the same 16x16 grid and must stay that way. */
.footer-social a {
    align-items: center;
    border-radius: 6px;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.footer-social__icon {
    height: 20px;
    width: 20px;
}

/* The row is the only place in the footer where the link text is an image, so the focus ring has to
   be drawn explicitly - there is no underline or text colour change to fall back on. */
.footer-social a:focus-visible {
    outline: 2px solid #9ca3af;
    outline-offset: 2px;
}

/* ===================== Features page ===================== */
.features-hero {
    background: linear-gradient(135deg, #236092 0%, #236092 48%, #1c355e 100%);
    color: #ffffff;
    overflow: hidden;
    position: relative;
}


.features-hero__content {
    padding-bottom: 4rem;
    padding-top: 4rem;
    position: relative;
}

.features-hero--stacked .features-hero__content {
    text-align: center;
}

/* Hero variant: full-bleed background image with text on top */
.features-hero--background {
    background-color: #1c355e;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: clamp(440px, 60vh, 640px);
    display: flex;
    align-items: center;
}

.features-hero--background .features-hero__overlay {
    background-image: none;
    background-color: transparent;
    opacity: 1;
}

.features-hero__overlay--dark {
    background: linear-gradient(180deg, rgba(15, 27, 50, 0.25) 0%, rgba(15, 27, 50, 0.35) 60%, rgba(15, 27, 50, 0.45) 100%);
    inset: 0;
    position: absolute;
}

.features-hero--background .features-hero__content {
    padding-top: 5rem;
    padding-bottom: 5rem;
    text-align: center;
    width: 100%;
}

.features-hero--background .features-hero__content::before {
    background: rgba(15, 27, 50, 0.50);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    content: "";
    inset: 3rem 0;
    margin: 0 auto;
    max-width: 64rem;
    position: absolute;
    z-index: 0;
}

.features-hero--background .features-hero__content > * {
    position: relative;
    z-index: 1;
}

.features-hero--background .features-hero__title {
    color: #ffffff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.features-hero--background .features-hero__subtitle {
    color: #e6eef8;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.40);
}

.features-hero--background .features-hero__eyebrow {
    color: #cfe3f5;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.features-hero--background .features-hero__actions {
    justify-content: center;
}

.features-hero__eyebrow {
    color: #bfdbfe;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    margin: 0 0 0.85rem;
    text-transform: uppercase;
}

.features-hero__title {
    color: #ffffff;
    font-family: var(--pms-heading-font);
    font-size: clamp(2.25rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 auto 1rem;
    max-width: 50rem;
}

.features-hero__subtitle {
    color: #dbeafe;
    font-size: 1.125rem;
    line-height: 1.75;
    margin: 0 auto 1.75rem;
    max-width: 48rem;
}

.features-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2.5rem;
}

.features-hero__media {
    margin: 0 auto;
    max-width: 880px;
}

.features-hero__media img {
    border-radius: 1rem;
    box-shadow: 0 24px 60px rgba(29, 29, 27, 0.35);
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

/* Split variant: text+buttons left, image right */
.features-hero__grid {
    align-items: center;
    display: grid;
    gap: 3rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.features-hero--split .features-hero__copy {
    text-align: left;
}

.features-hero--split .features-hero__title,
.features-hero--split .features-hero__subtitle {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
}

.features-hero--split .features-hero__actions {
    justify-content: flex-start;
    margin-bottom: 0;
}

.features-hero__media--side {
    margin: 0;
    max-width: none;
}

.features-hero__media--side img {
    height: auto;
    max-height: 520px;
    object-fit: cover;
    width: 100%;
}

.features-logos {
    background: #ffffff;
    padding: 3rem 0 1rem;
}

.features-logos__title {
    color: #5a6b78;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    margin: 0 0 1.5rem;
    text-align: center;
    text-transform: uppercase;
}

.features-logos__list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.features-logos__item {
    color: #5a6b78;
    font-family: var(--pms-heading-font);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    opacity: 0.75;
}

.features-category {
    background: #ffffff;
    padding: 4rem 0;
}

.features-category:nth-of-type(even-row),
.features-category--alt {
    background: #f9fafb;
}

.features-category__grid {
    align-items: center;
    display: grid;
    gap: 3rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.features-category--image-right .features-category__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.features-category--image-right .features-category__media {
    order: 2;
}

.features-category__media img {
    border-radius: 1rem;
    box-shadow: 0 24px 50px rgba(28, 53, 94, 0.18);
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.features-category__eyebrow {
    color: #236092;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin: 0 0 0.6rem;
    text-transform: uppercase;
}

.features-category__title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 0.85rem;
}

.features-category__lead {
    color: #5a6b78;
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 0 1.75rem;
}

.features-tiles {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.features-tile {
    background: #ffffff;
    border: 1px solid #e3e8ec;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(28, 53, 94, 0.05);
    padding: 1.1rem 1.15rem;
}

.features-tile__icon {
    color: #236092;
    text-align: center;
    margin-bottom: 0.5rem;
}

.features-tile__title {
    color: #1c355e;
    text-align: center;
    font-family: var(--pms-heading-font);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.35rem;
}

.features-tile__body {
    color: #5a6b78;
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
}

.features-spotlight {
    background: #ffffff;
    border-top: 1px solid #eef2f5;
    padding: 3.5rem 0;
}

.features-spotlight + .features-category,
.features-category + .features-spotlight {
    border-top: 1px solid #eef2f5;
}

.features-spotlight__grid {
    align-items: center;
    display: grid;
    gap: 3rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.features-spotlight--image-right .features-spotlight__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.features-spotlight--image-right .features-spotlight__media {
    order: 2;
}

.features-spotlight__media img {
    border-radius: 1rem;
    box-shadow: 0 24px 50px rgba(28, 53, 94, 0.18);
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.features-spotlight__title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: clamp(1.65rem, 2.4vw, 2.05rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 1rem;
}

.features-spotlight__body {
    color: #5a6b78;
    font-size: 1.025rem;
    line-height: 1.7;
    margin: 0;
}

.features-support {
    background: #f9fafb;
    padding: 4rem 0;
}

.features-support__grid {
    align-items: center;
    display: grid;
    gap: 3rem;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.features-support__eyebrow {
    color: #236092;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin: 0 0 0.6rem;
    text-transform: uppercase;
}

.features-support__title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: clamp(1.85rem, 3vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 1.5rem;
}

.features-support__body {
    display: grid;
    gap: 1.25rem;
}

.features-support__body h3 {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
}

.features-support__body p {
    color: #5a6b78;
    font-size: 1rem;
    line-height: 1.65;
    margin: 0;
}

.features-support__media img {
    border-radius: 1rem;
    box-shadow: 0 24px 50px rgba(28, 53, 94, 0.18);
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.features-accordion-wrapper {
    padding-bottom: 5rem;
    padding-top: 4.5rem;
}

.features-accordion-section__intro {
    margin: 0 auto 2.5rem;
    max-width: 48rem;
    text-align: center;
}

.features-accordion-section__title {
    color: #ffffff;
    font-family: var(--pms-heading-font);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 0.75rem;
}

.features-accordion-section__subtitle {
    color: #bfdbfe;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

.features-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0 auto;
    max-width: 920px;
}

.features-accordion__group {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 180ms ease, background 180ms ease;
}

.features-accordion__group--open {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(65, 151, 203, 0.55);
}

.features-accordion__head {
    align-items: center;
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    font-family: var(--pms-heading-font);
    font-size: 1.1rem;
    font-weight: 700;
    justify-content: space-between;
    letter-spacing: -0.01em;
    padding: 1.05rem 1.35rem;
    text-align: left;
    width: 100%;
}

.features-accordion__head:hover {
    background: rgba(255, 255, 255, 0.03);
}

.features-accordion__body {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: grid;
    gap: 1.1rem;
    padding: 1.25rem 1.35rem 1.5rem;
}

.features-accordion__item-title {
    color: #ffffff;
    font-family: var(--pms-heading-font);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.features-accordion__item-body {
    color: #bfdbfe;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 960px) {
    .features-category__grid,
    .features-category--image-right .features-category__grid,
    .features-spotlight__grid,
    .features-spotlight--image-right .features-spotlight__grid,
    .features-support__grid,
    .features-hero__grid {
        grid-template-columns: 1fr;
    }

    .features-category--image-right .features-category__media,
    .features-spotlight--image-right .features-spotlight__media {
        order: 0;
    }

    .features-tiles {
        grid-template-columns: 1fr;
    }

    .features-hero__content {
        padding-bottom: 3rem;
        padding-top: 3rem;
    }

    .features-hero--split .features-hero__copy {
        text-align: center;
    }

    .features-hero--split .features-hero__actions {
        justify-content: center;
    }
}

@media (max-width: 960px) {
    .hero-section__content {
        padding-bottom: 4rem;
        padding-top: 3rem;
    }

    .hero-grid,
    .content-grid {
        grid-template-columns: 1fr;
    }

    .hero-copy {
        align-self: stretch;
    }

    .hero-header {
        margin-bottom: 2rem;
    }

    .hero-media {
        width: 100%;
    }

    .hero-stats-band {
        margin-top: 2rem;
        padding-top: 1.5rem;
    }

    .features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-section__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .section {
        padding: 4rem 0;
    }
}

@media (max-width: 600px) {
    .pms-container {
        padding: 0 1rem;
    }

    .hero-actions,
    .cta-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .features-grid,
    .footer-section__grid,
    .differentiator-grid {
        grid-template-columns: 1fr;
    }

    .hero-stats {
        align-items: center;
        flex-direction: column;
        gap: 1.25rem;
    }

    .hero-stats__group {
        text-align: center;
    }

    .hero-stats strong {
        white-space: normal;
    }

    .hero-stats__divider {
        display: none;
    }

    .hero-media {
        width: 100%;
    }

    .hero-image {
        aspect-ratio: 856 / 580;
        height: auto;
        max-height: 440px;
        object-fit: cover;
    }

    .step-item {
        flex-direction: column;
    }
}

/* ===================== Pricing page ===================== */
.pricing-hero {
    background: linear-gradient(135deg, #236092 0%, #236092 48%, #1c355e 100%);
    color: #ffffff;
    padding: 4.5rem 0 3.5rem;
    text-align: center;
}

.pricing-hero__content {
    margin: 0 auto;
    max-width: 56rem;
}

.pricing-hero__eyebrow {
    color: #bfdbfe;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    margin: 0 0 0.85rem;
    text-transform: uppercase;
}

.pricing-hero__title {
    color: #ffffff;
    font-family: var(--pms-heading-font);
    font-size: clamp(2rem, 3.8vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0 0 1rem;
}

.pricing-hero__subtitle {
    color: #dbeafe;
    font-size: 1.075rem;
    line-height: 1.7;
    margin: 0 auto 1.25rem;
    max-width: 48rem;
}

.pricing-hero__note {
    color: #bfdbfe;
    font-size: 0.92rem;
    margin: 0 auto;
    max-width: 42rem;
    opacity: 0.85;
}

.pricing-tiers {
    background: #ffffff;
    padding: 3.5rem 0 1.5rem;
}

.pricing-tiers__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pricing-tier {
    background: #ffffff;
    border: 1px solid #e3e8ec;
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(28, 53, 94, 0.06);
    display: flex;
    flex-direction: column;
    padding: 1.85rem 1.75rem 2rem;
    position: relative;
}

.pricing-tier--featured {
    border-color: #4197cb;
    box-shadow: 0 20px 50px rgba(28, 53, 94, 0.18);
    transform: translateY(-8px);
}

.pricing-tier__badge {
    background: #236092;
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    left: 50%;
    letter-spacing: 0.14em;
    padding: 0.35rem 0.85rem;
    position: absolute;
    text-transform: uppercase;
    top: -0.85rem;
    transform: translateX(-50%);
}

.pricing-tier__eyebrow {
    color: #236092;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin: 0 0 0.4rem;
    text-transform: uppercase;
}

.pricing-tier__name {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
}

.pricing-tier__reason {
    color: #236092;
    font-size: 0.8rem;
    font-weight: 600;
    margin: -0.25rem 0 0.6rem;
}

.pricing-tier__description {
    color: #5a6b78;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 1.1rem;
    min-height: 3rem;
}

.pricing-tier__price {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 0.4rem;
}

.pricing-tier__price-amount {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

.pricing-tier__price-unit {
    color: #5a6b78;
    font-size: 0.95rem;
    font-weight: 500;
}

.pricing-tier__starting {
    color: #5a6b78;
    font-size: 0.85rem;
    margin: 0 0 1.25rem;
}

.pricing-tier__cta {
    align-items: center;
    border-radius: 0.7rem;
    display: inline-flex;
    font-weight: 600;
    justify-content: center;
    margin-bottom: 1.5rem;
    min-height: 48px;
    padding: 0.7rem 1.25rem;
    text-decoration: none;
    transition: background 180ms ease, transform 180ms ease;
}

.pricing-tier__cta--primary {
    background: #236092;
    box-shadow: 0 12px 25px rgba(28, 53, 94, 0.2);
    color: #ffffff;
}

.pricing-tier__cta--primary:hover {
    background: #1c355e;
    transform: scale(1.02);
}

.pricing-tier__cta--secondary {
    background: #ffffff;
    border: 2px solid #236092;
    color: #236092;
}

.pricing-tier__cta--secondary:hover {
    background: #f3f4f6;
}

.pricing-tier__inclusions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pricing-tier__inclusion {
    align-items: flex-start;
    color: #1c355e;
    display: flex;
    font-size: 0.93rem;
    gap: 0.55rem;
    line-height: 1.5;
}

.pricing-tier__inclusion .mud-icon-root {
    color: #4197cb;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.pricing-tier__addons {
    border-top: 1px solid #e3e8ec;
    margin-top: 1.25rem;
    padding-top: 1rem;
}

.pricing-tier__addons-title {
    color: #5a6b78;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin: 0 0 0.75rem;
    text-transform: uppercase;
}

.pricing-tier__inclusion--addon .mud-icon-root {
    color: #758592;
}

/* ---------- Selectable variant (PricingTiers Mode="Selectable") ---------- */
/* Usado pelo Step 1 do wizard /signup. /pricing continua intocada. */

/* Wrapper: it reduces padding-top because inside the step there is no hero above. */
.pricing-tiers--selectable {
    padding: 1rem 0 0.5rem;
}

/* The card width in Step 1 of /signup has to match /pricing.
   The Embedded=true parameter of the PricingTiers/PricingComparison component already omits
   the inner .pms-container; this rule is extra defence in case the container still shows up
   through another path (cache, parameter not applied, and so on) — it neutralizes the
   max-width and padding of the inner container when rendered inside Step 1. */
.signup-step--plan .pms-container {
    max-width: none;
    padding: 0;
    width: 100%;
}

/* ---------- Step 2 (Login info): label-on-top format + box with a visible border ----------
   It replaces the MudBlazor default floating label with a classic form pattern,
   inspired by the Skimmer signup but with PMS theme typography and colours.

   Compact spacing: label glued to the input (gap 0.2rem), fields close together
   (margin-bottom 0.55rem), reduced inner input padding (0.45/0.75rem) — it saves
   ~120px of total height in the step compared with the MudBlazor default. */

.signup-form {
    margin: 0 auto;
    max-width: 32rem;
}

/* The unified Step 2 (Create Account) has to fit two 385px columns side by side
   with a 145px gap (= 915px) AND the 967px legal block below. That is why max-width goes
   to 967px (Geraldo's decision, 2026-05-15). On smaller viewports it collapses naturally
   through width auto + max-width. */
.signup-form--wide {
    max-width: 967px;
}

.signup-form__row {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 600px) {
    .signup-form__row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* Banner promocional acima do stepper (Step 2 com plano Growth). */
.signup-promo {
    margin: 0 auto 1.5rem;
    max-width: 56rem;
    padding: 0 1rem;
    text-align: center;
}

.signup-promo__title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: clamp(1.25rem, 2.2vw, 1.65rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin: 0 0 0.4rem;
}

.signup-promo__subtitle {
    color: #5a6b78;
    font-family: var(--pms-body-font);
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}

/* Step 2: ACCOUNT INFORMATION (left) + PAYMENT INFORMATION (right).
   Design decision (Geraldo, 2026-05-15): each column a fixed 385px, a 145px gap between
   them, centered in the wrapper. Total: 385 + 145 + 385 = 915px. */
.signup-create-account__columns {
    align-items: start;
    display: grid;
    gap: 145px;
    grid-template-columns: 385px 385px;
    justify-content: center;
    margin-bottom: 1.25rem;
}

/* Screens that cannot fit 915px (plus side breathing room) -> fluid grid. */
@media (max-width: 1080px) {
    .signup-create-account__columns {
        gap: 2rem;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 820px) {
    .signup-create-account__columns {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

.signup-create-account__column {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* First Name narrower than Last Name (Skimmer-style). It applies only to the row carrying the
   --names modifier — other rows (Password+Confirm, Expiry+CVV, ZIP+Country) stay 1:1. */
.signup-form__row--names {
    grid-template-columns: 2fr 3fr;
}

@media (max-width: 600px) {
    .signup-form__row--names {
        grid-template-columns: 1fr;
    }
}

/* Consent checkbox — centered, exactly 967px wide on desktop.
   Rendered OUTSIDE the outer .pms-container (see Signup.razor: the
   @if (_currentStep == 2) block below .signup-wizard-body__inner) so it escapes
   the container side padding and reaches a real 967px. On viewports < 967px it
   uses the inline padding (1rem) so it does not touch the absolute viewport edges. */
.signup-consent {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    margin: 1.5rem auto 0.5rem;
    max-width: 967px;
    padding: 0 1rem;
    width: 100%;
}

/* Wrapper of the Start Free Trial button, between the consent and the legal block. */
.signup-submit {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    margin: 0.5rem auto 1rem;
    max-width: 967px;
    padding: 0 1rem;
    width: 100%;
}

.signup-submit__button {
    min-width: 18rem;
}

@media (max-width: 600px) {
    .signup-submit__button {
        min-width: 0;
        width: 100%;
    }
}

/* Single legal block (fine print + ToS + footnotes †/*) at the end of Step 2.
   Exactly 967px wide on desktop, text centered.
   Rendered OUTSIDE the outer .pms-container for the same reason as .signup-consent. */
.signup-legal-block {
    box-sizing: border-box;
    color: #5a6b78;
    font-family: var(--pms-body-font);
    font-size: 0.75rem;
    line-height: 1.55;
    margin: 0 auto;
    max-width: 967px;
    padding: 0.5rem 1rem 1rem;
    text-align: center;
    width: 100%;
}

.signup-legal-block p {
    margin: 0 0 0.6rem;
}

.signup-legal-block p:last-child {
    margin-bottom: 0;
}

/* Subtitle of each Step 2 block (Account Information / Payment Information).
   Uppercase + letter-spacing to rank it below the step h2. */
.signup-section__title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.2;
    margin: 0 0 0.85rem;
    text-transform: uppercase;
}

/* Checkbox de consent: alinha o texto multilinha e reduz padding default do MudCheckBox. */
.signup-consent-checkbox {
    margin: 1rem 0 0.5rem;
}

/* Heading do step (h2 + lead) — neutraliza margens default do browser e aproxima do form. */
.signup-step__heading {
    margin-bottom: 1rem;
}

.signup-step__heading h2 {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 0.35rem;
}

.signup-step__heading p {
    color: #5a6b78;
    font-family: var(--pms-body-font);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.signup-field {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0.55rem;
}

.signup-field__label {
    color: #1c355e;
    font-family: var(--pms-body-font);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.15;
    margin-bottom: 2px;
}

/* MudBlazor sometimes applies a margin-top on the control when Margin=Dense.
   Zeroed so the label really sits against the input. */
.signup-field .mud-input-outlined,
.signup-field .mud-input-control {
    margin-top: 0;
}

/* A MudTextField with Label="" still renders an empty floating-label structure.
   We hide it so only the native <label> shows. */
.signup-field .mud-input-label,
.signup-field .mud-input-label-outlined,
.signup-field .mud-input-label-margin-dense {
    display: none;
}

/* Outlined: full visible border, soft corners, PMS theme colours. */
.signup-field .mud-input-outlined > fieldset,
.signup-field .mud-input-outlined-with-label > fieldset {
    border-color: #e3e8ec;
    border-radius: 8px;
    border-width: 1px;
    top: 0;
}

.signup-field .mud-input-outlined > fieldset > legend,
.signup-field .mud-input-outlined-with-label > fieldset > legend {
    display: none;
}

.signup-field .mud-input-outlined:hover > fieldset {
    border-color: #b6cbe0;
}

.signup-field .mud-input-outlined.mud-focused > fieldset {
    border-color: #4197cb;
    border-width: 2px;
}

.signup-field .mud-input-outlined.mud-input-error > fieldset {
    border-color: #b32121;
}

/* Texto do input: cor, fonte e padding compactos. */
.signup-field .mud-input-outlined input,
.signup-field .mud-input-outlined textarea {
    color: #1c355e;
    font-family: var(--pms-body-font);
    font-size: 0.92rem;
    line-height: 1.3;
    padding: 0.45rem 0.75rem;
}

/* MudBlazor adiciona min-height ao input control container; reduz para acompanhar
   o padding mais apertado. */
.signup-field .mud-input-outlined.mud-input-control-input-container,
.signup-field .mud-input-outlined .mud-input-control-input-container {
    min-height: 0;
}

/* HelperText (e.g. "Same as the email — not editable") — it shows on 1 field only,
   with reduced margin so it does not inflate the height when present. */
.signup-field .mud-input-helper-text {
    color: #5a6b78;
    font-family: var(--pms-body-font);
    font-size: 0.75rem;
    line-height: 1.3;
    margin-top: 0.15rem;
}

.signup-field .mud-input-helper-text.mud-input-error {
    color: #b32121;
}

/* ---------- Wrapper of the pricing components in Step 1 ----------
   Rendered OUTSIDE the outer .pms-container (signup-wizard-body__inner) so they use
   100% of the viewport. The side padding is minimal, only so they do not touch the edges. */
.signup-pricing-fullbleed {
    width: 100%;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .signup-pricing-fullbleed {
        padding: 0 2rem;
    }
}

/* Step 1 of /signup: each plan card a fixed 390px on wide desktop.
   The whole grid takes 3 * 390 + 2 * 1.5rem (gap) = 1218px, centered in the wrapper.
   On viewports narrower than ~1280px it keeps the default behaviour (1fr distributes)
   so it does not cause horizontal scroll. It does not affect /pricing, because the
   pricing-tiers--selectable class is only applied in Selectable mode (the wizard). */
@media (min-width: 1280px) {
    .pricing-tiers--selectable .pricing-tiers__grid {
        grid-template-columns: repeat(3, 390px);
        justify-content: center;
    }
}

/* Selection state of the whole card (when tier.Code == SelectedCode). */
.pricing-tier--selected {
    border-color: #1c355e;
    box-shadow: 0 0 0 3px rgba(65, 151, 203, 0.35), 0 20px 50px rgba(28, 53, 94, 0.18);
}

/* CTA como <button> herda o look de .pricing-tier__cta--primary/--secondary
   mas precisa de reset porque <button> tem font/background/border defaults. */
.pricing-tier__cta--selectable {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    font: inherit;
    text-align: center;
    width: 100%;
}

.pricing-tier__cta--selectable:focus-visible {
    outline: 3px solid #4197cb;
    outline-offset: 3px;
}

/* "1st month free" badge — secondary, it does not take the central position of --featured.
   It sits in the top-right corner, inside the card. */
.pricing-tier__badge--trial {
    background: #2f8f47;
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    left: auto;
    letter-spacing: 0.12em;
    padding: 0.3rem 0.7rem;
    position: absolute;
    right: 0.85rem;
    text-transform: uppercase;
    top: 0.85rem;
    transform: none;
}

/* ---------- PricingComparison collapse (StartCollapsed=true) ---------- */
.pricing-comparison__collapsible {
    margin-top: 1rem;
}

.pricing-comparison__collapsible summary {
    list-style: none;
}

.pricing-comparison__collapsible summary::-webkit-details-marker {
    display: none;
}

.pricing-comparison__toggle {
    align-items: center;
    background: #ffffff;
    border: 1px solid #e3e8ec;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(28, 53, 94, 0.06);
    color: #1c355e;
    cursor: pointer;
    display: flex;
    font-family: var(--pms-heading-font);
    font-size: 1rem;
    font-weight: 700;
    gap: 0.6rem;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    transition: background 180ms ease, box-shadow 180ms ease;
}

.pricing-comparison__toggle:hover {
    background: #f0f5fb;
    box-shadow: 0 6px 16px rgba(28, 53, 94, 0.12);
}

.pricing-comparison__collapsible[open] .pricing-comparison__toggle {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
}

.pricing-comparison__collapsible[open] .pricing-comparison__toggle-icon {
    transform: rotate(180deg);
}

.pricing-comparison__toggle-icon {
    transition: transform 180ms ease;
}

.pricing-comparison__toggle-icon .mud-icon-root {
    color: #236092;
}

.pricing-promo-note {
    background: #ffffff;
    padding: 1rem 0 3rem;
}

.pricing-promo-note p {
    color: #5a6b78;
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 56rem;
    text-align: center;
}

.pricing-comparison {
    background: #f9fafb;
    padding: 4rem 0;
}

.pricing-comparison__intro {
    margin: 0 auto 2.5rem;
    max-width: 48rem;
    text-align: center;
}

.pricing-comparison__title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 0.85rem;
}

.pricing-comparison__subtitle {
    color: #5a6b78;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

.pricing-comparison__table-wrap {
    background: #ffffff;
    border: 1px solid #e3e8ec;
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(28, 53, 94, 0.06);
    overflow-x: auto;
}

.pricing-comparison__table {
    border-collapse: collapse;
    width: 100%;
}

.pricing-comparison__table th,
.pricing-comparison__table td {
    padding: 0.85rem 1rem;
    text-align: left;
    vertical-align: middle;
}

.pricing-comparison__feature-head {
    background: #ffffff;
    width: 40%;
}

.pricing-comparison__tier-head {
    background: #f0f5fb;
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    width: 20%;
}

.pricing-comparison__group-row .pricing-comparison__group-title {
    background: #1c355e;
    color: #ffffff;
    font-family: var(--pms-heading-font);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    padding: 0.6rem 1rem;
    text-align: left;
    text-transform: uppercase;
}

.pricing-comparison__row:nth-child(even) {
    background: #fafbfc;
}

.pricing-comparison__feature {
    color: #1c355e;
    font-size: 0.95rem;
    font-weight: 500;
}

.pricing-comparison__value {
    color: #1c355e;
    font-size: 0.95rem;
    text-align: center;
}

.pricing-comparison__value .mud-icon-root {
    color: #4197cb;
}

.pricing-comparison__value-empty {
    color: #c2cdd6;
}

@media (max-width: 960px) {
    .pricing-tiers__grid {
        grid-template-columns: 1fr;
    }

    .pricing-tier--featured {
        transform: none;
    }
}

@media (max-width: 600px) {
    .pricing-comparison__table th,
    .pricing-comparison__table td {
        padding: 0.65rem 0.6rem;
    }

    .pricing-comparison__feature {
        font-size: 0.88rem;
    }

    .pricing-comparison__value {
        font-size: 0.88rem;
    }
}

/* ===================== Demo page ===================== */
.demo-hero {
    /* Measured contrast (2026-08-11): with #4197cb at the first stop, eyebrow/subtitle/bullets/meta
       landed between 2.27:1 and 2.76:1 — all failing WCAG AA, and in the top-left corner, which is
       exactly where that text falls on a 135deg gradient. Starting at #236092 the worst case moves
       to 4.68:1. The gradient still exists, only entirely inside the range that sustains text. */
    background: linear-gradient(135deg, #236092 0%, #1d4f7a 45%, #1c355e 100%);
    color: #ffffff;
    overflow: hidden;
    position: relative;
}


.demo-hero__grid {
    align-items: start;
    display: grid;
    gap: 3rem;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    padding-bottom: 4.5rem;
    padding-top: 4.5rem;
    position: relative;
}

.demo-hero__copy {
    color: #ffffff;
}

.demo-hero__eyebrow {
    color: #bfdbfe;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    margin: 0 0 0.85rem;
    text-transform: uppercase;
}

.demo-hero__title {
    color: #ffffff;
    font-family: var(--pms-heading-font);
    font-size: clamp(2rem, 3.8vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0 0 1rem;
}

.demo-hero__subtitle {
    color: #dbeafe;
    font-size: 1.075rem;
    line-height: 1.7;
    margin: 0 0 1.75rem;
}

.demo-hero__highlights {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.demo-hero__highlights li {
    align-items: flex-start;
    color: #e6eef8;
    display: flex;
    font-size: 1rem;
    gap: 0.6rem;
    line-height: 1.5;
}

.demo-hero__highlights .mud-icon-root {
    color: #bfdbfe;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.demo-hero__form {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 27, 50, 0.35);
    color: #1c355e;
    padding: 1.75rem 1.75rem 1.5rem;
}

.demo-hero__form-title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.4rem;
}

.demo-hero__form-subtitle {
    color: #5a6b78;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 1.25rem;
}

.demo-hero__form .lead-form {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

/* ADR-0114 / F6 — the demo entry column in the hero.

   What was wrong (Geraldo, 2026-08-11): a white card with a title, a subtitle and a
   .cta-actions__primary button — which is WHITE with blue text, designed for a dark background.
   Inside the white card it became white on white, and the card showed nothing of the product.
   The column is now proof: the profitability screen in a frame, and a genuinely solid button. */
.demo-hero__preview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
}

.demo-preview {
    background: #0f1b2e;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    box-shadow: 0 30px 70px rgba(8, 16, 30, 0.45);
    margin: 0;
    overflow: hidden;
}

/* Window bar: the three dots only. No address bar — an invented domain in a screenshot
   is fabricated proof, which is precisely what FabricatedSocialProofGuardTests exists to prevent. */
.demo-preview__chrome {
    align-items: center;
    background: #16243c;
    display: flex;
    gap: 0.4rem;
    padding: 0.6rem 0.85rem;
}

.demo-preview__chrome span {
    background: rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    height: 10px;
    width: 10px;
}

/* The frame content is a ZoomableScreenshot (button + img). This neutralizes the button styling
   so it behaves like an image inside the frame; click-to-zoom keeps working. */
.demo-preview .pms-zoomable {
    background: none;
    border: 0;
    cursor: zoom-in;
    display: block;
    padding: 0;
    width: 100%;
}

.demo-preview .pms-zoomable img {
    display: block;
    height: auto;
    width: 100%;
}

/* Solid button: real contrast on the dark hero AND on a light background. */
.demo-hero__cta {
    align-items: center;
    background: #ffffff;
    border-radius: 0.7rem;
    box-shadow: 0 18px 38px rgba(8, 16, 30, 0.38);
    color: #16406b;
    display: inline-flex;
    font-size: 1.05rem;
    font-weight: 700;
    justify-content: center;
    min-height: 58px;
    padding: 0.9rem 2rem;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease;
    width: 100%;
}

.demo-hero__cta:hover {
    box-shadow: 0 22px 46px rgba(8, 16, 30, 0.5);
    color: #16406b;
    transform: translateY(-2px);
}

.demo-hero__cta-meta {
    color: #c9dcef;
    font-size: 0.9rem;
    margin: 0;
}

.demo-hero__start-link {
    color: #dce9f6;
    font-size: 0.95rem;
    text-decoration: underline;
}

.demo-hero__start-link:hover {
    color: #ffffff;
}

/* Human contact block, now in the middle of the page instead of the hero. */
.demo-talk__inner {
    display: flex;
    justify-content: center;
}

.demo-talk__inner .demo-hero__form {
    box-shadow: 0 18px 44px rgba(15, 27, 50, 0.12);
    max-width: 560px;
    width: 100%;
}

.demo-sections-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.demo-section-card {
    background: #ffffff;
    border: 1px solid #e3e8ec;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(28, 53, 94, 0.06);
    padding: 1.5rem 1.5rem 1.65rem;
}

.demo-section-card__title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.85rem;
}

.demo-section-card__body {
    color: #5a6b78;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 0.75rem;
}

.demo-section-card__body:last-child {
    margin-bottom: 0;
}

@media (max-width: 960px) {
    .demo-hero__grid {
        grid-template-columns: 1fr;
        padding-bottom: 3rem;
        padding-top: 3rem;
    }

    .demo-sections-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================== About page ===================== */
.about-mission {
    background: #ffffff;
    padding: 4rem 0;
}

.about-mission__content {
    margin: 0 auto;
    max-width: 56rem;
    text-align: center;
}

.about-mission__eyebrow {
    color: #236092;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    margin: 0 0 1rem;
    text-transform: uppercase;
}

.about-mission__statement {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: clamp(1.55rem, 2.6vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.35;
    margin: 0;
}

.about-values {
    background: #ffffff;
    padding: 0 0 4rem;
}

.about-values__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Icon and title centered (Geraldo 2026-08-11): the "What we believe" boxes had the
   icon and the title pinned left with a justified body, which read as a list, not as a card. */
.about-value-card {
    background: #ffffff;
    border: 1px solid #e3e8ec;
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(28, 53, 94, 0.06);
    padding: 1.85rem 1.85rem 1.75rem;
    text-align: center;
}

.about-value-card__icon {
    align-items: center;
    /* The card's inline-flex + text-align:center already center the icon box. */
    background: rgba(65, 151, 203, 0.12);
    border-radius: 12px;
    color: #236092;
    display: inline-flex;
    height: 56px;
    justify-content: center;
    margin-bottom: 1rem;
    width: 56px;
}

.about-value-card__title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem;
}

.about-value-card__body {
    color: #5a6b78;
    font-size: 0.98rem;
    line-height: 1.6;
    margin: 0;
}

.about-story {
    padding: 4.5rem 0;
}

.about-story__grid {
    display: grid;
    gap: 3rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.about-story__title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: clamp(1.85rem, 3vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 1.25rem;
}

.about-story__body {
    color: #5a6b78;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 1rem;
}

.about-timeline {
    counter-reset: timeline;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.about-timeline::before {
    background: rgba(65, 151, 203, 0.35);
    bottom: 1rem;
    content: "";
    left: 27px;
    position: absolute;
    top: 1rem;
    width: 2px;
}

.about-timeline__item {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    position: relative;
}

.about-timeline__icon {
    align-items: center;
    background: #4197cb;
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    flex-shrink: 0;
    height: 56px;
    justify-content: center;
    position: relative;
    width: 56px;
    z-index: 1;
}

.about-timeline__year {
    color: #236092;
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.about-timeline__title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.35rem;
}

.about-timeline__text {
    color: #5a6b78;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}

.about-principles {
    padding-bottom: 5rem;
    padding-top: 4.5rem;
}

.about-principles__grid {
    align-items: start;
    display: grid;
    gap: 3rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.about-principles__title {
    color: #ffffff;
    font-family: var(--pms-heading-font);
    font-size: clamp(1.85rem, 3vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 1rem;
}

.about-principles__lead {
    color: #bfdbfe;
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0;
}

.about-principles__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.about-principles__item {
    align-items: flex-start;
    color: #e6eef8;
    display: flex;
    font-size: 1rem;
    gap: 0.6rem;
    line-height: 1.55;
}

.about-principles__item .mud-icon-root {
    color: #4197cb;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

@media (max-width: 960px) {
    .about-values__grid {
        grid-template-columns: 1fr;
    }

    .about-story__grid,
    .about-principles__grid {
        grid-template-columns: 1fr;
    }
}

/* ===================== Resources page ===================== */
.resources-hero {
    background: linear-gradient(135deg, #236092 0%, #236092 48%, #1c355e 100%);
    color: #ffffff;
    overflow: hidden;
    position: relative;
}


.resources-hero__content {
    margin: 0 auto;
    max-width: 56rem;
    padding-bottom: 4rem;
    padding-top: 4.5rem;
    position: relative;
    text-align: center;
}

.resources-hero__eyebrow {
    color: #bfdbfe;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    margin: 0 0 0.85rem;
    text-transform: uppercase;
}

.resources-hero__title {
    color: #ffffff;
    font-family: var(--pms-heading-font);
    font-size: clamp(2rem, 3.8vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0 0 1rem;
}

.resources-hero__subtitle {
    color: #dbeafe;
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0 auto;
    max-width: 48rem;
}

.resources-catalog {
    background: #ffffff;
    padding: 3rem 0 4rem;
}

.resources-catalog__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    margin: 0 auto 2.5rem;
}

.resources-catalog__filter {
    background: #ffffff;
    border: 1px solid #d6dde5;
    border-radius: 999px;
    color: #5a6b78;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.5rem 1.1rem;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.resources-catalog__filter:hover {
    border-color: #4197cb;
    color: #236092;
}

.resources-catalog__filter--active {
    background: #236092;
    border-color: #236092;
    color: #ffffff;
}

.resources-catalog__empty {
    color: #5a6b78;
    font-size: 1rem;
    margin: 0;
    padding: 3rem 1rem;
    text-align: center;
}

.resources-catalog__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.resource-card {
    background: #ffffff;
    border: 1px solid #e3e8ec;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(28, 53, 94, 0.06);
    color: inherit;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.resource-card:hover {
    border-color: #4197cb;
    box-shadow: 0 16px 40px rgba(28, 53, 94, 0.14);
    transform: translateY(-2px);
}

.resource-card__cover {
    align-items: center;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #236092 0%, #236092 100%);
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    justify-content: center;
}

.resource-card__cover .mud-icon-root {
    font-size: 2.4rem !important;
}

.resource-card__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 1.25rem 1.35rem 1.35rem;
}

.resource-card__category {
    color: #236092;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin: 0 0 0.55rem;
    text-transform: uppercase;
}

.resource-card__title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0 0 0.65rem;
}

.resource-card__summary {
    color: #5a6b78;
    flex-grow: 1;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 1rem;
}

.resource-card__meta {
    align-items: center;
    color: #5a6b78;
    display: flex;
    font-size: 0.85rem;
    gap: 0.75rem;
    justify-content: space-between;
}

.resource-card__cta {
    align-items: center;
    color: #236092;
    display: inline-flex;
    font-weight: 600;
    gap: 0.3rem;
}

.resources-philosophy {
    padding-top: 4rem;
}

.resources-philosophy__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.resources-philosophy-card {
    background: #ffffff;
    border: 1px solid #e3e8ec;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(28, 53, 94, 0.06);
    padding: 1.5rem 1.5rem 1.65rem;
}

.resources-philosophy-card__title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.85rem;
}

.resources-philosophy-card__body {
    color: #5a6b78;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 0.75rem;
}

.resources-philosophy-card__body:last-child {
    margin-bottom: 0;
}

.resources-request {
    padding-bottom: 4rem;
    padding-top: 3.5rem;
}

.resources-request__content {
    margin: 0 auto;
    max-width: 48rem;
    text-align: center;
}

.resources-request__title {
    color: #ffffff;
    font-family: var(--pms-heading-font);
    font-size: clamp(1.75rem, 3vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 0.85rem;
}

.resources-request__lead {
    color: #bfdbfe;
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 0 1.5rem;
}

.resources-request .cta-actions {
    justify-content: center;
}

@media (max-width: 960px) {
    .resources-catalog__grid,
    .resources-philosophy__grid {
        grid-template-columns: 1fr;
    }
}

/* ===================== Contact page ===================== */
.contact-email {
    background: #ffffff;
    padding: 3rem 0 3.5rem;
}

.contact-email__card {
    background: #ffffff;
    border: 1px solid #e3e8ec;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(28, 53, 94, 0.10);
    margin: 0 auto;
    max-width: 38rem;
    padding: 2.25rem 2rem 2rem;
    text-align: center;
}

.contact-email__icon {
    align-items: center;
    background: rgba(65, 151, 203, 0.12);
    border-radius: 50%;
    color: #236092;
    display: inline-flex;
    height: 72px;
    justify-content: center;
    margin: 0 auto 1.1rem;
    width: 72px;
}

.contact-email__eyebrow {
    color: #236092;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin: 0 0 0.4rem;
    text-transform: uppercase;
}

.contact-email__title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 0.45rem;
}

.contact-email__subtitle {
    color: #5a6b78;
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 1.35rem;
}

.contact-email__address {
    color: #236092;
    display: inline-block;
    font-family: var(--pms-heading-font);
    font-size: clamp(1.2rem, 2.2vw, 1.55rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 1.1rem;
    text-decoration: none;
    word-break: break-all;
}

.contact-email__address:hover {
    color: #1c355e;
    text-decoration: underline;
}

.contact-email__note {
    color: #5a6b78;
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0;
}

.contact-blocks {
    padding-bottom: 4.5rem;
    padding-top: 4rem;
}

.contact-blocks__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.contact-block-card {
    background: #ffffff;
    border: 1px solid #e3e8ec;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(28, 53, 94, 0.06);
    padding: 1.5rem 1.5rem 1.65rem;
}

.contact-block-card__title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.85rem;
}

.contact-block-card__body {
    color: #5a6b78;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 0.75rem;
}

.contact-block-card__body:last-child {
    margin-bottom: 0;
}

.contact-shortcuts {
    padding-bottom: 4rem;
    padding-top: 4rem;
}

.contact-shortcuts__content {
    margin: 0 auto;
    max-width: 48rem;
    text-align: center;
}

.contact-shortcuts__title {
    color: #ffffff;
    font-family: var(--pms-heading-font);
    font-size: clamp(1.75rem, 3vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 0.85rem;
}

.contact-shortcuts__lead {
    color: #bfdbfe;
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 0 1.5rem;
}

.contact-shortcuts .cta-actions {
    justify-content: center;
}

@media (max-width: 960px) {
    .contact-blocks__grid {
        grid-template-columns: 1fr;
    }
}

/* ===================== FAQ page ===================== */
.faq-catalog {
    background: #ffffff;
    padding: 3rem 0 4rem;
}

.faq-catalog__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: space-between;
    margin: 0 auto 2rem;
}

.faq-catalog__search {
    align-items: center;
    background: #ffffff;
    border: 1px solid #d6dde5;
    border-radius: 999px;
    color: #5a6b78;
    display: inline-flex;
    flex-grow: 1;
    gap: 0.5rem;
    max-width: 28rem;
    min-width: 18rem;
    padding: 0.55rem 1rem;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.faq-catalog__search:focus-within {
    border-color: #4197cb;
    box-shadow: 0 0 0 3px rgba(65, 151, 203, 0.15);
}

.faq-catalog__search-input {
    background: transparent;
    border: none;
    color: #1c355e;
    flex-grow: 1;
    font-size: 0.95rem;
    outline: none;
}

.faq-catalog__search-clear {
    background: transparent;
    border: none;
    color: #5a6b78;
    cursor: pointer;
    padding: 0.15rem;
}

.faq-catalog__search-clear:hover {
    color: #1c355e;
}

.faq-catalog__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.faq-catalog__filter {
    background: #ffffff;
    border: 1px solid #d6dde5;
    border-radius: 999px;
    color: #5a6b78;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.45rem 1rem;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.faq-catalog__filter:hover {
    border-color: #4197cb;
    color: #236092;
}

.faq-catalog__filter--active {
    background: #236092;
    border-color: #236092;
    color: #ffffff;
}

.faq-catalog__empty {
    color: #5a6b78;
    font-size: 1rem;
    margin: 0;
    padding: 3rem 1rem;
    text-align: center;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0 auto;
    max-width: 920px;
}

.faq-item {
    background: #ffffff;
    border: 1px solid #e3e8ec;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(28, 53, 94, 0.04);
    overflow: hidden;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.faq-item--open {
    border-color: rgba(65, 151, 203, 0.55);
    box-shadow: 0 8px 24px rgba(28, 53, 94, 0.10);
}

.faq-item__head {
    align-items: flex-start;
    background: transparent;
    border: none;
    color: #1c355e;
    cursor: pointer;
    display: flex;
    font-family: var(--pms-heading-font);
    gap: 1rem;
    justify-content: space-between;
    padding: 1.05rem 1.35rem;
    text-align: left;
    width: 100%;
}

.faq-item__head:hover {
    background: rgba(65, 151, 203, 0.05);
}

.faq-item__head-text {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.faq-item__category {
    color: #236092;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.faq-item__question {
    color: #1c355e;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.faq-item__body {
    border-top: 1px solid #eef2f5;
    padding: 1.1rem 1.35rem 1.35rem;
}

.faq-item__body p {
    color: #5a6b78;
    font-size: 0.98rem;
    line-height: 1.65;
    margin: 0;
}

.faq-pagination {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

.faq-pagination__btn {
    align-items: center;
    background: #ffffff;
    border: 1px solid #d6dde5;
    border-radius: 0.6rem;
    color: #236092;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 600;
    gap: 0.35rem;
    padding: 0.5rem 0.9rem;
    transition: background 160ms ease, border-color 160ms ease;
}

.faq-pagination__btn:hover:not(:disabled) {
    background: #f3f4f6;
    border-color: #4197cb;
}

.faq-pagination__btn:disabled {
    color: #c2cdd6;
    cursor: not-allowed;
    opacity: 0.6;
}

.faq-pagination__status {
    color: #5a6b78;
    font-size: 0.9rem;
    font-weight: 500;
}

.faq-philosophy {
    padding-bottom: 4.5rem;
    padding-top: 4rem;
}

.faq-philosophy__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.faq-philosophy-card {
    background: #ffffff;
    border: 1px solid #e3e8ec;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(28, 53, 94, 0.06);
    padding: 1.5rem 1.5rem 1.65rem;
}

.faq-philosophy-card__title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.85rem;
}

.faq-philosophy-card__body {
    color: #5a6b78;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 0.75rem;
}

.faq-philosophy-card__body:last-child {
    margin-bottom: 0;
}

.faq-still-questions {
    padding-bottom: 4rem;
    padding-top: 3.5rem;
}

.faq-still-questions__content {
    margin: 0 auto;
    max-width: 48rem;
    text-align: center;
}

.faq-still-questions__title {
    color: #ffffff;
    font-family: var(--pms-heading-font);
    font-size: clamp(1.75rem, 3vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 0.85rem;
}

.faq-still-questions__lead {
    color: #bfdbfe;
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 0 1.5rem;
}

.faq-still-questions .cta-actions {
    justify-content: center;
}

@media (max-width: 960px) {
    .faq-philosophy__grid {
        grid-template-columns: 1fr;
    }

    .faq-catalog__toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .faq-catalog__search {
        max-width: 100%;
    }
}

/* ===================== Legal pages ===================== */
.legal-page__body {
    padding-top: 3.5rem;
}

.legal-page__inner {
    margin: 0 auto;
    max-width: 56rem;
}

.legal-page__notes {
    background: rgba(65, 151, 203, 0.08);
    border-left: 4px solid #4197cb;
    border-radius: 6px;
    color: #1c355e;
    list-style: disc;
    margin: 0 0 2.5rem;
    padding: 1rem 1.25rem 1rem 2.25rem;
}

.legal-page__notes li {
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 0.4rem;
}

.legal-page__notes li:last-child {
    margin-bottom: 0;
}

.legal-page__sections {
    counter-reset: legal-counter;
    list-style: none;
    margin: 0;
    padding: 0;
}

.legal-section {
    border-top: 1px solid #eef2f5;
    display: flex;
    gap: 1.25rem;
    padding: 1.75rem 0;
}

.legal-section:first-child {
    border-top: none;
    padding-top: 0;
}

.legal-section__index {
    color: #236092;
    flex-shrink: 0;
    font-family: var(--pms-heading-font);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.4;
    min-width: 2.25rem;
}

.legal-section__title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.65rem;
}

.legal-section__paragraph {
    color: #5a6b78;
    font-size: 0.98rem;
    line-height: 1.65;
    margin: 0 0 0.75rem;
}

.legal-section__paragraph:last-child {
    margin-bottom: 0;
}

.legal-page__contact {
    padding-bottom: 4.5rem;
    padding-top: 4rem;
}

.legal-page__contact-inner {
    margin: 0 auto;
    max-width: 48rem;
    text-align: center;
}

.legal-page__contact-title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: clamp(1.5rem, 2.5vw, 1.95rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 0.75rem;
}

.legal-page__contact-body {
    color: #5a6b78;
    font-size: 1rem;
    line-height: 1.65;
    margin: 0 0 1.5rem;
}

.legal-page__contact .cta-actions {
    justify-content: center;
}

.legal-page__extra {
    margin-top: 2.5rem;
}

.legal-page__preferences {
    background: rgba(65, 151, 203, 0.08);
    border: 1px solid rgba(65, 151, 203, 0.25);
    border-radius: 14px;
    padding: 1.5rem 1.5rem 1.65rem;
}

.legal-page__preferences-title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.6rem;
}

.legal-page__preferences-body {
    color: #5a6b78;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 0.85rem;
}

.legal-page__preferences-status {
    color: #1c355e;
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0 0 1.1rem;
}

.legal-page__preferences-status strong {
    margin-right: 0.35rem;
}

@media (max-width: 600px) {
    .legal-section {
        flex-direction: column;
        gap: 0.5rem;
    }

    .legal-section__index {
        min-width: 0;
    }
}

/* ===================== Legal page preferences (cookies page) ===================== */
.legal-page__extra {
    margin-top: 2.5rem;
}

.legal-page__preferences {
    background: rgba(65, 151, 203, 0.08);
    border: 1px solid rgba(65, 151, 203, 0.25);
    border-radius: 14px;
    padding: 1.5rem 1.5rem 1.65rem;
}

.legal-page__preferences-title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.6rem;
}

.legal-page__preferences-body {
    color: #5a6b78;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 0.85rem;
}

.legal-page__preferences-status {
    color: #1c355e;
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0 0 1.1rem;
}

.legal-page__preferences-status strong {
    margin-right: 0.35rem;
}

/* ===================== Cookie consent banner ===================== */
.cookie-banner {
    background: #ffffff;
    border-top: 1px solid #d6dde5;
    bottom: 0;
    box-shadow: 0 -12px 40px rgba(15, 27, 50, 0.18);
    color: #1c355e;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 1100;
}

.cookie-banner__inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1.1rem 2rem;
}

.cookie-banner--expanded .cookie-banner__inner {
    align-items: flex-start;
    flex-direction: column;
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
}

.cookie-banner__copy {
    flex: 1 1 22rem;
    min-width: 0;
}

.cookie-banner__eyebrow {
    color: #236092;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin: 0 0 0.25rem;
    text-transform: uppercase;
}

.cookie-banner__title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 0.4rem;
}

.cookie-banner__body {
    color: #5a6b78;
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
}

.cookie-banner__link {
    color: #236092;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-banner__link:hover {
    color: #1c355e;
}

.cookie-banner__categories {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    width: 100%;
}

.cookie-banner__category {
    align-items: center;
    background: #f9fafb;
    border: 1px solid #e3e8ec;
    border-radius: 10px;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.85rem 1rem;
}

.cookie-banner__category-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.cookie-banner__category-text strong {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 0.95rem;
    font-weight: 700;
}

.cookie-banner__category-text span {
    color: #5a6b78;
    font-size: 0.85rem;
    line-height: 1.45;
}

.cookie-banner__always-on {
    color: #236092;
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cookie-banner__switch {
    cursor: pointer;
    display: inline-block;
    flex-shrink: 0;
    height: 24px;
    position: relative;
    width: 44px;
}

.cookie-banner__switch input {
    height: 0;
    opacity: 0;
    width: 0;
}

.cookie-banner__switch span {
    background: #c2cdd6;
    border-radius: 999px;
    inset: 0;
    position: absolute;
    transition: background 160ms ease;
}

.cookie-banner__switch span::before {
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    content: "";
    height: 18px;
    left: 3px;
    position: absolute;
    top: 3px;
    transition: transform 160ms ease;
    width: 18px;
}

.cookie-banner__switch input:checked + span {
    background: #4197cb;
}

.cookie-banner__switch input:checked + span::before {
    transform: translateX(20px);
}

.cookie-banner__switch input:focus-visible + span {
    outline: 2px solid #4197cb;
    outline-offset: 2px;
}

.cookie-banner__actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.cookie-banner--expanded .cookie-banner__actions {
    align-self: flex-end;
    margin-top: 0.5rem;
}

.cookie-banner__btn {
    border: 1px solid transparent;
    border-radius: 0.55rem;
    cursor: pointer;
    font-family: var(--pms-heading-font);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.55rem 1.1rem;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.cookie-banner__btn--primary {
    background: #236092;
    color: #ffffff;
}

.cookie-banner__btn--primary:hover {
    background: #1c355e;
}

.cookie-banner__btn--secondary {
    background: #ffffff;
    border-color: #236092;
    color: #236092;
}

.cookie-banner__btn--secondary:hover {
    background: #f3f4f6;
}

.cookie-banner__btn--ghost {
    background: transparent;
    color: #5a6b78;
}

.cookie-banner__btn--ghost:hover {
    color: #1c355e;
}

@media (max-width: 720px) {
    .cookie-banner__inner {
        align-items: stretch;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 1rem 1.1rem;
    }

    .cookie-banner__actions {
        flex-direction: column;
    }

    .cookie-banner__btn {
        width: 100%;
    }
}

/* ===================== Resource article page (redesign) ===================== */
.resource-article__loading {
    padding: 6rem 0;
}

.resource-article-hero {
    background: linear-gradient(135deg, #236092 0%, #236092 48%, #1c355e 100%);
    color: #ffffff;
    overflow: hidden;
    position: relative;
}


.resource-article-hero__content {
    margin: 0 auto;
    max-width: 56rem;
    padding-bottom: 3.5rem;
    padding-top: 3.5rem;
    position: relative;
}

.resource-article-hero__crumbs {
    align-items: center;
    color: rgba(255, 255, 255, 0.78);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.85rem;
    gap: 0.4rem;
    margin: 0 0 1.5rem;
}

.resource-article-hero__crumbs a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: color 160ms ease;
}

.resource-article-hero__crumbs a:hover {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.resource-article-hero__crumbs span[aria-hidden="true"] {
    color: rgba(255, 255, 255, 0.45);
}

.resource-article-hero__crumbs-current {
    color: #ffffff;
    font-weight: 500;
    max-width: 30rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resource-article-hero__eyebrow {
    color: #bfdbfe;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    margin: 0 0 0.85rem;
    text-transform: uppercase;
}

.resource-article-hero__title {
    color: #ffffff;
    font-family: var(--pms-heading-font);
    font-size: clamp(1.85rem, 3.5vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0 0 1rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.resource-article-hero__summary {
    color: #dbeafe;
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 0 1.25rem;
}

.resource-article-hero__meta {
    color: #cfe3f5;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.88rem;
    gap: 0.85rem;
}

.resource-article-body-section {
    padding-bottom: 4rem;
    padding-top: 3rem;
}

.resource-article-body-section__inner {
    margin: 0 auto;
    max-width: 48rem;
}

.resource-article__placeholder {
    color: #5a6b78;
    font-size: 1rem;
    margin: 0;
    padding: 3rem 0;
    text-align: center;
}

.resource-article__body {
    color: #2b3a48;
    font-size: 1.05rem;
    line-height: 1.75;
}

.resource-article__body > *:first-child {
    margin-top: 0;
}

.resource-article__body > *:last-child {
    margin-bottom: 0;
}

.resource-article__body p {
    margin: 0 0 1.25rem;
}

.resource-article__body h2 {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: clamp(1.4rem, 2.3vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 2.5rem 0 0.85rem;
}

.resource-article__body h3 {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: clamp(1.2rem, 1.8vw, 1.4rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    margin: 2rem 0 0.6rem;
}

.resource-article__body h4 {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 1.075rem;
    font-weight: 700;
    margin: 1.6rem 0 0.5rem;
}

.resource-article__body ul,
.resource-article__body ol {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
}

.resource-article__body li {
    margin-bottom: 0.55rem;
}

.resource-article__body li::marker {
    color: #4197cb;
}

.resource-article__body strong {
    color: #1c355e;
}

.resource-article__body a {
    color: #236092;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.resource-article__body a:hover {
    color: #1c355e;
}

.resource-article__body code {
    background: #f3f4f6;
    border-radius: 4px;
    color: #1c355e;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.92em;
    padding: 0.1em 0.35em;
}

.resource-article__body pre {
    background: #1c355e;
    border-radius: 8px;
    color: #f4f8fc;
    margin: 0 0 1.5rem;
    overflow-x: auto;
    padding: 1rem 1.25rem;
}

.resource-article__body pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.resource-article__body blockquote {
    border-left: 4px solid #4197cb;
    color: #5a6b78;
    font-style: italic;
    margin: 0 0 1.5rem;
    padding: 0.25rem 0 0.25rem 1.25rem;
}

.resource-article__body table {
    border-collapse: collapse;
    margin: 0 0 1.5rem;
    width: 100%;
}

.resource-article__body th,
.resource-article__body td {
    border-bottom: 1px solid #e3e8ec;
    padding: 0.65rem 0.85rem;
    text-align: left;
}

.resource-article__body th {
    background: #f0f5fb;
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-weight: 700;
}

.resource-article__body hr {
    border: none;
    border-top: 1px solid #e3e8ec;
    margin: 2.5rem 0;
}

.resource-article-related {
    padding-bottom: 4rem;
    padding-top: 4rem;
}

.resource-article-related__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.resource-article-cta {
    padding-bottom: 4.5rem;
    padding-top: 4rem;
}

.resource-article-cta__inner {
    margin: 0 auto;
    max-width: 48rem;
    text-align: center;
}

.resource-article-cta__title {
    color: #ffffff;
    font-family: var(--pms-heading-font);
    font-size: clamp(1.75rem, 3vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 0.85rem;
}

.resource-article-cta__lead {
    color: #bfdbfe;
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 0 1.5rem;
}

.resource-article-cta .cta-actions {
    justify-content: center;
}

@media (max-width: 960px) {
    .resource-article-related__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .resource-article-hero__crumbs-current {
        max-width: 14rem;
    }
}

/* =============================================================
   SignupConfirmation page (compact success hero + steps + CTA)
   ============================================================= */

.signup-confirmation-page {
    background: #ffffff;
}

.signup-confirmation-hero {
    background: linear-gradient(135deg, #1c355e 0%, #236092 55%, #236092 100%);
    color: #ffffff;
    padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem);
    position: relative;
    overflow: hidden;
}

.signup-confirmation-hero__overlay {
    background: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.18), transparent 60%);
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.signup-confirmation-hero__content {
    position: relative;
    text-align: center;
    z-index: 1;
}

.signup-confirmation-hero__badge {
    align-items: center;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    height: 4.25rem;
    justify-content: center;
    margin-bottom: 1.25rem;
    width: 4.25rem;
}

.signup-confirmation-hero__badge .mud-icon-root {
    font-size: 2.1rem !important;
    height: 2.1rem !important;
    width: 2.1rem !important;
}

.signup-confirmation-hero__eyebrow {
    color: #bfdbfe;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}

.signup-confirmation-hero__title {
    color: #ffffff;
    font-family: var(--pms-heading-font);
    font-size: clamp(2rem, 4vw, 2.85rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 0.85rem;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}

.signup-confirmation-hero__lead {
    color: #e0eaf6;
    font-size: 1.075rem;
    line-height: 1.6;
    margin: 0 auto 1.5rem;
    max-width: 38rem;
}

.signup-confirmation-hero__email {
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    flex-wrap: wrap;
    font-size: 0.95rem;
    gap: 0.5rem;
    justify-content: center;
    max-width: 100%;
    padding: 0.55rem 1.1rem;
}

.signup-confirmation-hero__email .mud-icon-root {
    color: #bfdbfe;
    font-size: 1.1rem !important;
    height: 1.1rem !important;
    width: 1.1rem !important;
}

.signup-confirmation-hero__email-label {
    color: #bfdbfe;
}

.signup-confirmation-hero__email-value {
    font-weight: 600;
    word-break: break-all;
}

.signup-confirmation-steps {
    padding-bottom: clamp(3rem, 6vw, 4.5rem);
    padding-top: clamp(2.5rem, 5vw, 4rem);
}

.signup-confirmation-steps__inner {
    margin: 0 auto;
    max-width: 52rem;
}

.signup-confirmation-steps__list {
    display: grid;
    gap: 1.25rem;
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
}

.signup-confirmation-step {
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(28, 53, 94, 0.05);
    display: grid;
    gap: 1.1rem;
    grid-template-columns: 3rem 1fr;
    padding: 1.25rem 1.4rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.signup-confirmation-step:hover {
    border-color: #4197cb;
    box-shadow: 0 8px 22px rgba(28, 53, 94, 0.09);
    transform: translateY(-1px);
}

.signup-confirmation-step__index {
    align-items: center;
    background: linear-gradient(135deg, #1c355e 0%, #236092 100%);
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    font-family: var(--pms-heading-font);
    font-size: 1.1rem;
    font-weight: 800;
    height: 2.5rem;
    justify-content: center;
    line-height: 1;
    width: 2.5rem;
}

.signup-confirmation-step__title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 1.075rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
}

.signup-confirmation-step__body-text {
    color: #475569;
    font-size: 0.97rem;
    line-height: 1.6;
    margin: 0;
}

.signup-confirmation-help {
    align-items: center;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    color: #475569;
    display: flex;
    font-size: 0.92rem;
    gap: 0.6rem;
    line-height: 1.5;
    margin-top: 1.75rem;
    padding: 0.85rem 1.1rem;
}

.signup-confirmation-help .mud-icon-root {
    color: #236092;
    flex-shrink: 0;
    font-size: 1.1rem !important;
    height: 1.1rem !important;
    width: 1.1rem !important;
}

.signup-confirmation-cta {
    padding-bottom: clamp(3.5rem, 6vw, 4.5rem);
    padding-top: clamp(2.5rem, 5vw, 4rem);
}

.signup-confirmation-cta__inner {
    margin: 0 auto;
    max-width: 44rem;
    text-align: center;
}

.signup-confirmation-cta__title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: clamp(1.6rem, 2.6vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 0.7rem;
}

.signup-confirmation-cta__lead {
    color: #475569;
    font-size: 1.025rem;
    line-height: 1.65;
    margin: 0 0 1.5rem;
}

.signup-confirmation-cta .cta-actions {
    justify-content: center;
}

@media (max-width: 600px) {
    .signup-confirmation-step {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .signup-confirmation-step__index {
        margin-bottom: 0.25rem;
    }
}

/* =============================================================
   NotFound page (404 hero + suggestion cards + CTA)
   ============================================================= */

.notfound-page {
    background: #ffffff;
}

.notfound-hero {
    background: linear-gradient(135deg, #1c355e 0%, #236092 60%, #236092 100%);
    color: #ffffff;
    overflow: hidden;
    padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem);
    position: relative;
}

.notfound-hero__overlay {
    background:
        radial-gradient(ellipse at top right, rgba(65, 151, 203, 0.35), transparent 55%),
        radial-gradient(ellipse at bottom left, rgba(28, 53, 94, 0.5), transparent 60%);
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.notfound-hero__content {
    position: relative;
    text-align: center;
    z-index: 1;
}

.notfound-hero__code {
    background: linear-gradient(135deg, #ffffff 0%, #bfdbfe 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: var(--pms-heading-font);
    font-size: clamp(5rem, 14vw, 9rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.95;
    margin: 0 0 0.5rem;
    text-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.notfound-hero__eyebrow {
    color: #bfdbfe;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}

.notfound-hero__title {
    color: #ffffff;
    font-family: var(--pms-heading-font);
    font-size: clamp(1.85rem, 3.6vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 0.85rem;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}

.notfound-hero__lead {
    color: #e0eaf6;
    font-size: 1.075rem;
    line-height: 1.6;
    margin: 0 auto 0.6rem;
    max-width: 38rem;
}

.notfound-hero__body {
    color: #cdd9ec;
    font-size: 0.98rem;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 38rem;
}

.notfound-suggestions {
    padding-bottom: clamp(3rem, 6vw, 4.5rem);
    padding-top: clamp(2.5rem, 5vw, 4rem);
}

.notfound-suggestions__inner {
    margin: 0 auto;
    max-width: 70rem;
}

.notfound-suggestions__grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 1.75rem;
}

.notfound-suggestion-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(28, 53, 94, 0.05);
    color: inherit;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.4rem;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.notfound-suggestion-card:hover,
.notfound-suggestion-card:focus-visible {
    border-color: #4197cb;
    box-shadow: 0 12px 28px rgba(28, 53, 94, 0.12);
    outline: none;
    transform: translateY(-3px);
}

.notfound-suggestion-card__icon {
    align-items: center;
    background: linear-gradient(135deg, #236092 0%, #4197cb 100%);
    border-radius: 12px;
    color: #ffffff;
    display: inline-flex;
    height: 3rem;
    justify-content: center;
    margin-bottom: 1rem;
    width: 3rem;
}

.notfound-suggestion-card__icon .mud-icon-root {
    font-size: 1.65rem !important;
    height: 1.65rem !important;
    width: 1.65rem !important;
}

.notfound-suggestion-card__title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
}

.notfound-suggestion-card__body {
    color: #475569;
    flex: 1;
    font-size: 0.97rem;
    line-height: 1.6;
    margin: 0 0 1rem;
}

.notfound-suggestion-card__cta {
    align-items: center;
    color: #236092;
    display: inline-flex;
    font-size: 0.92rem;
    font-weight: 700;
    gap: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.notfound-suggestion-card__cta .mud-icon-root {
    font-size: 1.05rem !important;
    height: 1.05rem !important;
    transition: transform 0.2s ease;
    width: 1.05rem !important;
}

.notfound-suggestion-card:hover .notfound-suggestion-card__cta .mud-icon-root,
.notfound-suggestion-card:focus-visible .notfound-suggestion-card__cta .mud-icon-root {
    transform: translateX(3px);
}

.notfound-cta {
    padding-bottom: clamp(3.5rem, 6vw, 4.5rem);
    padding-top: clamp(2.5rem, 5vw, 4rem);
}

.notfound-cta__inner {
    margin: 0 auto;
    max-width: 44rem;
    text-align: center;
}

.notfound-cta__title {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: clamp(1.6rem, 2.6vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 0.7rem;
}

.notfound-cta__lead {
    color: #475569;
    font-size: 1.025rem;
    line-height: 1.65;
    margin: 0 0 1.5rem;
}

.notfound-cta .cta-actions {
    justify-content: center;
}

@media (max-width: 960px) {
    .notfound-suggestions__grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================
   Signup wizard (3 steps: plan / login / payment)
   ============================================================= */

.signup-wizard-page {
    background: #ffffff;
}

.signup-wizard-hero {
    background: linear-gradient(135deg, #1c355e 0%, #236092 60%, #236092 100%);
    color: #ffffff;
    overflow: hidden;
    padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.75rem);
    position: relative;
}

.signup-wizard-hero__overlay {
    background:
        radial-gradient(ellipse at top right, rgba(65, 151, 203, 0.35), transparent 55%),
        radial-gradient(ellipse at bottom left, rgba(28, 53, 94, 0.5), transparent 60%);
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.signup-wizard-hero__content {
    position: relative;
    text-align: center;
    z-index: 1;
}

.signup-wizard-hero__eyebrow {
    color: #bfdbfe;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}

.signup-wizard-hero__title {
    color: #ffffff;
    font-family: var(--pms-heading-font);
    font-size: clamp(1.85rem, 3.6vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 0.85rem;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
}

.signup-wizard-hero__subtitle {
    color: #e0eaf6;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 42rem;
}

.signup-wizard-body {
    padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
    padding-top: clamp(2.5rem, 5vw, 4rem);
}

.signup-wizard-body__inner {
    margin: 0 auto;
    max-width: 56rem;
}

/* Stepper visual no topo (3 bolas + labels) */

.signup-stepper {
    counter-reset: signup-step;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    list-style: none;
    margin: 0 auto 2.5rem;
    max-width: 36rem;
    padding: 0;
}

.signup-stepper__step {
    align-items: center;
    color: #5a6b78;
    display: flex;
    flex: 1;
    flex-direction: column;
    font-size: 0.85rem;
    gap: 0.45rem;
    position: relative;
    text-align: center;
}

.signup-stepper__step::after {
    background: #e2e8f0;
    content: "";
    height: 2px;
    left: calc(50% + 1.25rem);
    position: absolute;
    right: calc(-50% + 1.25rem);
    top: 1.05rem;
    z-index: 0;
}

.signup-stepper__step:last-child::after {
    display: none;
}

.signup-stepper__step--done::after {
    background: #236092;
}

.signup-stepper__dot {
    align-items: center;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 50%;
    color: #5a6b78;
    display: inline-flex;
    font-family: var(--pms-heading-font);
    font-size: 0.95rem;
    font-weight: 700;
    height: 2.15rem;
    justify-content: center;
    position: relative;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    width: 2.15rem;
    z-index: 1;
}

.signup-stepper__step--current .signup-stepper__dot {
    background: linear-gradient(135deg, #236092 0%, #236092 100%);
    border-color: #236092;
    color: #ffffff;
}

.signup-stepper__step--done .signup-stepper__dot {
    background: #236092;
    border-color: #4197cb;
    color: #ffffff;
}

.signup-stepper__step--current,
.signup-stepper__step--done {
    color: #1c355e;
}

.signup-stepper__label {
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Content of each step (shared) */

.signup-step {
    margin-bottom: 1.5rem;
}

.signup-step__heading {
    margin-bottom: 1.5rem;
    text-align: center;
}

.signup-step__heading h2 {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem;
}

.signup-step__heading p {
    color: #475569;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}

/* Step 1 — selectable plan cards */

.signup-plan-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
}

.signup-plan-card {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: inherit;
    padding: 1.4rem 1.2rem 1.2rem;
    position: relative;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

/* Keyboard focus needs its OWN indicator: until 2026-08-17 the focused card was marked only by a
   #93c5fd border, 1.80:1 against white - below the 3:1 WCAG 1.4.11 asks of a non-text indicator, so
   a keyboard user could not tell which plan was focused. Hover keeps the soft treatment below;
   focus gets a ring in a colour the palette already uses (#236092, 6.65:1 on white). */
.signup-plan-card:focus-visible {
    outline: 3px solid #236092;
    outline-offset: 3px;
}

.signup-plan-card:hover,
.signup-plan-card:focus-visible {
    border-color: #93c5fd;
    box-shadow: 0 8px 22px rgba(28, 53, 94, 0.08);
    transform: translateY(-2px);
}

.signup-plan-card--featured {
    border-color: #4197cb;
}

.signup-plan-card--selected {
    border-color: #236092;
    box-shadow: 0 12px 28px rgba(35, 96, 146, 0.18);
}

.signup-plan-card__badges {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    position: absolute;
    right: 0.8rem;
    top: 0.8rem;
}

.signup-plan-card__badge {
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.22rem 0.65rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.signup-plan-card__badge--featured {
    background: linear-gradient(135deg, #236092 0%, #236092 100%);
}

.signup-plan-card__badge--trial {
    background: linear-gradient(135deg, #047857 0%, #10b981 100%);
}

.signup-plan-card__name {
    color: #1c355e;
    font-family: var(--pms-heading-font);
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
}

.signup-plan-card__price {
    align-items: baseline;
    display: flex;
    gap: 0.35rem;
    margin: 0 0 0.6rem;
}

.signup-plan-card__price-amount {
    color: #236092;
    font-family: var(--pms-heading-font);
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.signup-plan-card__price-unit {
    color: #64748b;
    font-size: 0.85rem;
}

.signup-plan-card__summary {
    color: #475569;
    flex: 0 0 auto;
    font-size: 0.92rem;
    line-height: 1.4;
    margin: 0 0 0.85rem;
}

.signup-plan-card__features {
    flex: 1;
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}

.signup-plan-card__features li {
    align-items: flex-start;
    color: #334155;
    display: flex;
    font-size: 0.88rem;
    gap: 0.45rem;
    line-height: 1.4;
    margin-bottom: 0.35rem;
}

.signup-plan-card__features li .mud-icon-root {
    color: #4197cb;
    font-size: 1rem !important;
    height: 1rem !important;
    margin-top: 0.1rem;
    width: 1rem !important;
}

.signup-plan-card__indicator {
    color: #5a6b78;
    margin-top: 0.5rem;
    text-align: right;
}

.signup-plan-card--selected .signup-plan-card__indicator {
    color: #236092;
}

/* Steps 2 and 3 — forms */

.signup-form {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 32rem;
}

.signup-form__row {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 1fr 1fr;
}

.signup-consent__text {
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.45;
}

/* Step 3 — summary do plano selecionado (verde se trial, azul se direto) */

.signup-step3-summary {
    align-items: flex-start;
    border-radius: 12px;
    display: flex;
    font-size: 0.95rem;
    gap: 0.75rem;
    line-height: 1.5;
    margin: 0 auto 1.5rem;
    max-width: 32rem;
    padding: 0.95rem 1.1rem;
}

.signup-step3-summary--trial {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(4, 120, 87, 0.06) 100%);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #065f46;
}

.signup-step3-summary--direct {
    background: rgba(33, 96, 146, 0.06);
    border: 1px solid rgba(33, 96, 146, 0.25);
    color: #1c355e;
}

.signup-step3-summary .mud-icon-root {
    flex-shrink: 0;
    font-size: 1.4rem !important;
    height: 1.4rem !important;
    margin-top: 0.05rem;
    width: 1.4rem !important;
}

.signup-step3-summary--trial .mud-icon-root {
    color: #059669;
}

.signup-step3-summary--direct .mud-icon-root {
    color: #236092;
}

/* Step 3 — legal fine print below the card fields.
   Adapted from the Skimmer /Account/Register pattern: smaller typography, neutral colour,
   tight spacing so it reads as "small print" without being illegible. */

.signup-trial-fineprint {
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.45;
    margin: 1.5rem auto 0;
    max-width: 32rem;
    padding: 1rem 0 0;
}

.signup-trial-fineprint p {
    margin: 0 0 0.5rem;
}

.signup-trial-fineprint p:last-child {
    margin-bottom: 0;
}

.signup-trial-fineprint__tos {
    color: #475569;
    font-style: italic;
    margin-top: 0.75rem !important;
}

/* Wizard actions (Back / Next / Submit) */

.signup-wizard-actions {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 2rem;
}

.signup-wizard-actions .cta-actions__primary,
.signup-wizard-actions .cta-actions__secondary {
    align-items: center;
    display: inline-flex;
    gap: 0.45rem;
    min-width: 9rem;
}

.signup-wizard-actions .cta-actions__primary[disabled],
.signup-wizard-actions .cta-actions__primary:disabled,
.signup-wizard-actions .cta-actions__secondary[disabled],
.signup-wizard-actions .cta-actions__secondary:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

@media (max-width: 720px) {
    .signup-plan-grid {
        grid-template-columns: 1fr;
    }

    .signup-form__row {
        grid-template-columns: 1fr;
    }

    .signup-stepper {
        gap: 0.25rem;
    }

    .signup-stepper__label {
        font-size: 0.7rem;
    }
}

/* ====================================================================
   PR-STRIPE-SDK-2b — Estilos pra UI de signup com Stripe Elements.
   Adicionados quando o wizard ganhou state de "AwaitingCardConfirmation"
   (form read-only + PaymentElement montado).
   ==================================================================== */

/* Placeholder na coluna direita durante Phase CollectInfo (antes do user
   clicar "Continue to payment" e o Stripe Elements ser montado). */
.signup-payment-placeholder {
    align-items: center;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 2rem 1rem;
    text-align: center;
}

    .signup-payment-placeholder .mud-icon-root {
        color: #5a6b78;
        font-size: 2.5rem !important;
        height: 2.5rem !important;
        width: 2.5rem !important;
    }

    .signup-payment-placeholder h4 {
        color: #1c355e;
        font-size: 1rem;
        font-weight: 600;
        margin: 0;
    }

    .signup-payment-placeholder p {
        font-size: 0.875rem;
        margin: 0;
        max-width: 32ch;
    }

/* Stripe PaymentElement container. The minimum height guarantees the Stripe
   iframe has room to render; the inner padding gives the tabs/inputs breathing space. */
.signup-stripe-mount {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-top: 1rem;
    min-height: 240px;
    padding: 1rem;
}

/* Coluna esquerda na Phase AwaitingCardConfirmation: form vira read-only. */
.signup-create-account__column--readonly {
    background-color: #f8fafc;
    border-radius: 8px;
    padding: 1.25rem;
}

.signup-section__header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

    .signup-section__header .signup-section__title {
        margin: 0;
    }

.signup-section__title--spaced {
    margin-top: 1.5rem;
}

/* Link "Edit details" pequeno (volta pra Phase CollectInfo). */
.signup-edit-link {
    align-items: center;
    background: transparent;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #236092;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 500;
    gap: 0.25rem;
    padding: 0.25rem 0.6rem;
    transition: all 120ms ease;
}

    .signup-edit-link:hover:not(:disabled) {
        background: #ffffff;
        border-color: #236092;
    }

    .signup-edit-link:disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }

/* Lista <dl> que mostra dados do user em modo read-only. */
.signup-readonly-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}

    .signup-readonly-list > div {
        display: grid;
        gap: 0.125rem;
    }

    .signup-readonly-list dt {
        color: #64748b;
        font-size: 0.72rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .signup-readonly-list dd {
        color: #1c355e;
        font-size: 0.95rem;
        font-weight: 500;
        margin: 0;
    }

/* ============================================================================
   PR-SIGNUP-CONFLICT — plain HTML overlay for the 409 conflict dialog.
   It replaces a MudDialog that had lifecycle problems (a residual overlay in the
   DOM after the @if fell). Control is 100% through the Blazor @if in the markup.
   ============================================================================ */
.signup-conflict-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.signup-conflict-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.signup-conflict-overlay__dialog {
    position: relative;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
}

.signup-conflict-overlay__title {
    margin: 0 0 16px;
    color: #1c355e;
    font-size: 1.25rem;
    font-weight: 600;
}

.signup-conflict-overlay__body {
    margin: 0 0 12px;
    color: #1c355e;
    font-size: 0.95rem;
    line-height: 1.5;
}

.signup-conflict-overlay__email {
    margin: 0 0 24px;
    color: #4a5568;
    font-size: 0.85rem;
    opacity: 0.7;
}

.signup-conflict-overlay__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.signup-conflict-overlay__btn {
    appearance: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    padding: 10px 16px;
    text-decoration: none;
    transition: background-color 0.2s;
}

.signup-conflict-overlay__btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.signup-conflict-overlay__btn--text {
    background: transparent;
    color: #1c355e;
}

.signup-conflict-overlay__btn--text:hover:not(:disabled) {
    background: rgba(28, 53, 94, 0.08);
}

.signup-conflict-overlay__btn--primary {
    background: #236092;
    color: #ffffff;
}

.signup-conflict-overlay__btn--primary:hover:not(:disabled) {
    background: #1c4f7a;
}

.signup-conflict-overlay__spinner {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: signup-conflict-spin 0.7s linear infinite;
}

@keyframes signup-conflict-spin {
    to { transform: rotate(360deg); }
}


/* Zoomable screenshots (2026-08-06): product screenshots are 1600px assets rendered ~556px wide —
   unreadable. The thumbnail is wrapped in a zoom button; clicking opens a fixed overlay with the
   same full-resolution image. Escape / click / the 44px close button dismiss it. */
.pms-zoomable {
    background: none;
    border: 0;
    cursor: zoom-in;
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
}

.pms-zoomable img {
    display: block;
    /* height: auto is REQUIRED now that the tag carries intrinsic width/height (ScreenshotSizes,
       2026-08-30): with width:100% and no height rule the browser would use the literal attribute
       - a 1444px tall thumbnail. auto turns the pair back into a ratio, which is the whole point:
       the box is reserved before the file arrives. */
    height: auto;
    width: 100%;
}

.pms-zoomable__overlay {
    align-items: center;
    background: rgba(12, 24, 40, 0.88);
    cursor: zoom-out;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1.25rem;
    position: fixed;
    z-index: 1000;
}

.pms-zoomable__overlay:focus {
    outline: none;
}

.pms-zoomable__full {
    border-radius: 10px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    cursor: zoom-out;
    height: auto;
    max-height: 92vh;
    max-width: min(1600px, 96vw);
    width: auto;
}

.pms-zoomable__close {
    background: rgba(255, 255, 255, 0.14);
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    cursor: pointer;
    font-size: 1.75rem;
    line-height: 1;
    min-height: 44px;
    min-width: 44px;
    position: fixed;
    right: 0.75rem;
    top: 0.75rem;
}

.pms-zoomable__close:hover {
    background: rgba(255, 255, 255, 0.28);
}


/* R11 — auto-diagnostico (self-check) em /why-pms (Sprint C neurovendas) */
.why-pms-selfcheck { text-align: center; }
.why-pms-selfcheck__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    opacity: 0.7;
    margin-bottom: 0.5rem;
}
.why-pms-selfcheck__list {
    list-style: none;
    margin: 1.5rem auto 1rem;
    padding: 0;
    max-width: 720px;
    text-align: left;
    display: grid;
    gap: 0.75rem;
}
.why-pms-selfcheck__list li {
    position: relative;
    padding-left: 1.75rem;
    line-height: 1.5;
}
.why-pms-selfcheck__list li::before {
    content: "?";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
}
.why-pms-selfcheck__kicker { font-weight: 600; margin-top: 0.75rem; }


/* R4 — bloco de fundadores em /about (Sprint B neurovendas) */
.about-founders__eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; opacity: 0.7; margin-bottom: 0.25rem; }
.about-founders__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; margin-top: 1.75rem; }
.about-founder-card { display: flex; gap: 1.1rem; align-items: flex-start; background: rgba(255, 255, 255, 0.65); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 16px; padding: 1.25rem; }
.about-founder-card__photo { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.about-founder-card__name { margin: 0; }
.about-founder-card__role { margin: 0.15rem 0 0.55rem; font-weight: 600; opacity: 0.8; font-size: 0.9rem; }
.about-founder-card__bio { margin: 0 0 0.6rem; line-height: 1.5; }
.about-founder-card__link { font-weight: 600; text-decoration: none; }
.about-founder-card__link::after { content: " \2197"; }
@media (max-width: 560px) { .about-founder-card { flex-direction: column; align-items: center; text-align: center; } }


/* R14 — ponte prova->trial no meio da jornada (Sprint C neurovendas) */
.mid-journey-cta__inner { text-align: center; display: grid; gap: 1rem; justify-items: center; }
.mid-journey-cta__text { font-size: 1.15rem; font-weight: 600; max-width: 640px; margin: 0 auto; line-height: 1.5; }


/* R3 — prova por produto na Home (Sprint B neurovendas) */
.product-proof__eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; opacity: 0.7; margin-bottom: 0.25rem; }
.product-proof__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 1.75rem; }
.product-proof__card { margin: 0; background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); }
.product-proof__card img { display: block; width: 100%; height: auto; }
.product-proof__card .pms-zoomable { display: block; width: 100%; border: 0; padding: 0; background: none; cursor: zoom-in; }
.product-proof__card figcaption { padding: 0.75rem 1rem; font-weight: 600; font-size: 0.95rem; }
.product-proof__cta { justify-content: center; margin-top: 1.75rem; }


/* R15 — o que voce leva no trial (/pricing, Sprint D neurovendas) */
.trial-includes { text-align: center; }
.trial-includes__eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; opacity: 0.7; margin-bottom: 0.25rem; }
.trial-includes__list { list-style: none; margin: 1.5rem auto 1rem; padding: 0; max-width: 680px; text-align: left; display: grid; gap: 0.75rem; }
.trial-includes__list li { position: relative; padding-left: 1.9rem; line-height: 1.5; }
.trial-includes__list li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 700; color: #1a7f37; }
.trial-includes__note { font-size: 0.9rem; opacity: 0.85; margin-top: 0.75rem; }


/* Disponibilidade do app mobile — texto honesto agora; badges quando publicar */
.app-availability-section { padding-top: 0; padding-bottom: 0; }
.app-availability { text-align: center; }
.app-availability__platforms { font-size: 1.15rem; font-weight: 700; margin: 0; }
.app-availability__soon { font-size: 0.9rem; opacity: 0.75; margin: 0.35rem 0 0; }
.app-availability__badges { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 0.75rem; }
.app-availability__badges img { height: 48px; width: auto; }


/* Facelift mobile gallery (/mobile-app, 2026-08-10) — redesigned app across light/dark + languages.
   Portrait phone shots, so cards are phone-width and centered, not full-bleed like product-proof. */
.mobile-facelift { text-align: center; }
.mobile-facelift__eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; opacity: 0.7; margin-bottom: 0.25rem; }
.mobile-facelift__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 240px)); gap: 1.75rem 1.5rem; margin-top: 2rem; justify-content: center; }
.mobile-facelift__card { margin: 0; }
.mobile-facelift__card .pms-zoomable { display: block; width: 100%; border: 1px solid rgba(0, 0, 0, 0.08); padding: 0; background: none; cursor: zoom-in; border-radius: 22px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14); }
.mobile-facelift__card img { display: block; width: 100%; height: auto; }
.mobile-facelift__card figcaption { padding: 0.7rem 0.4rem 0; font-weight: 600; font-size: 0.9rem; line-height: 1.35; }

/* =============================================================================================
   PR-SEO-1 — FeaturesAccordion moved from component state to native <details>/<summary> (the body
   of every group is now in the first response). Deltas only: the summary keeps the old head
   styling, the [open] state mirrors .features-accordion__group--open, and the +/- icons swap via
   [open] instead of a re-render. */

details.features-accordion__group > summary.features-accordion__head {
    list-style: none;
}

details.features-accordion__group > summary.features-accordion__head::-webkit-details-marker {
    display: none;
}

details.features-accordion__group[open] {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(65, 151, 203, 0.55);
}

.features-accordion__head-icon {
    align-items: center;
    display: inline-flex;
}

details.features-accordion__group > summary .features-accordion__head-icon--open {
    display: none;
}

details.features-accordion__group[open] > summary .features-accordion__head-icon--open {
    display: inline-flex;
}

details.features-accordion__group[open] > summary .features-accordion__head-icon--closed {
    display: none;
}

/* ------------------------------------------------------------------------------------------------
   Route Margin Check (/route-margin-check) — the lead magnet.

   Colours are the audited ones: the hero is #236092, not the primary #4197cb. White on the primary
   is 3.22:1 and the pale-blue eyebrow lands near 2.4:1; on #236092 every one of them clears 4.5:1.
   That is the finding of the 2026-08-17 WCAG pass, and ColorContrastGuardTests lists this hero
   among the surfaces that may not go back.

   The result block is deliberately plain — a table and a headline. A stranger is being asked to
   believe a number about his own business; ornament around it reads as sales, and the page is
   trying to read as arithmetic.
   ------------------------------------------------------------------------------------------------ */

.route-margin-hero {
    background: linear-gradient(135deg, #236092 0%, #236092 48%, #1c355e 100%);
    color: #ffffff;
    padding: 4rem 0 3.5rem;
}

.route-margin-hero__inner {
    max-width: 46rem;
}

.route-margin-hero__eyebrow {
    color: #bfdbfe;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    margin: 0 0 0.85rem;
    text-transform: uppercase;
}

.route-margin-hero__title {
    color: #ffffff;
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    line-height: 1.15;
    margin: 0 0 1.1rem;
}

.route-margin-hero__subtitle {
    color: #e6eef8;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

.route-margin-section {
    padding-top: 2.5rem;
}

.route-margin__inputs {
    margin-bottom: 2rem;
}

.route-margin__waiting {
    color: #5a6b78;
    font-style: italic;
    margin: 0;
}

.route-margin__answer {
    border-top: 1px solid rgba(28, 53, 94, 0.12);
    padding-top: 2rem;
}

.route-margin__headline {
    color: #1c355e;
    font-family: "Poppins", sans-serif;
    font-size: clamp(1.3rem, 2.6vw, 1.9rem);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 1.75rem;
}

.route-margin__cascade {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    margin: 0 0 1.5rem;
    max-width: 34rem;
    width: 100%;
}

.route-margin__cascade th,
.route-margin__cascade td {
    border-bottom: 1px solid rgba(28, 53, 94, 0.10);
    padding: 0.55rem 0;
    text-align: left;
}

.route-margin__cascade th {
    color: #5a6b78;
    font-weight: 500;
}

.route-margin__cascade td {
    color: #1c355e;
    font-weight: 600;
    text-align: right;
}

.route-margin__cascade-total th,
.route-margin__cascade-total td {
    border-bottom: 2px solid rgba(28, 53, 94, 0.30);
    font-weight: 700;
}

.route-margin__caveat {
    color: #5a6b78;
    line-height: 1.6;
    margin: 0 0 1rem;
    max-width: 42rem;
}

.route-margin__assumptions {
    background: #f5f8fb;
    border-radius: 0.75rem;
    margin: 1.5rem 0 2rem;
    padding: 1rem 1.25rem;
}

.route-margin__assumptions summary {
    color: #1c355e;
    cursor: pointer;
    font-weight: 600;
}

.route-margin__assumptions-body {
    padding-top: 1rem;
}

.route-margin__assumptions-body p {
    color: #5a6b78;
    line-height: 1.6;
    margin: 0.85rem 0 0;
    max-width: 42rem;
}

.route-margin__capture {
    background: #f5f8fb;
    border-radius: 0.75rem;
    margin-top: 2rem;
    padding: 1.5rem;
}

.route-margin__capture h3 {
    color: #1c355e;
    margin: 0 0 0.5rem;
}

.route-margin__capture p {
    color: #5a6b78;
    line-height: 1.6;
    margin: 0 0 1rem;
    max-width: 42rem;
}

.route-margin__fineprint {
    color: #5a6b78;
    font-size: 0.85rem;
    margin: 1rem 0 0;
}

.route-margin__sent {
    background: #f5f8fb;
    border-left: 4px solid #236092;
    border-radius: 0.5rem;
    color: #1c355e;
    font-weight: 600;
    margin-top: 2rem;
    padding: 1rem 1.25rem;
}

.route-margin-why__inner {
    max-width: 46rem;
}

.route-margin-why__inner h2 {
    color: #1c355e;
    margin: 0 0 1rem;
}

.route-margin-why__inner p {
    color: #5a6b78;
    line-height: 1.7;
    margin: 0 0 1rem;
}

.route-margin-why__who {
    border-left: 3px solid #236092;
    padding-left: 1rem;
}

/* Route Margin Check band on /resources. Deliberately not a .resource-card: the grid is articles,
   and a tool wearing a card would make the catalogue lie about what it holds. */
.resources-tool {
    padding: 2.5rem 0 0;
}

.resources-tool__inner {
    align-items: center;
    background: #f5f8fb;
    border-left: 4px solid #236092;
    border-radius: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: space-between;
    padding: 1.5rem 1.75rem;
}

.resources-tool__eyebrow {
    color: #236092;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin: 0 0 0.35rem;
    text-transform: uppercase;
}

.resources-tool__title {
    color: #1c355e;
    font-size: 1.35rem;
    margin: 0 0 0.5rem;
}

.resources-tool__body {
    color: #5a6b78;
    line-height: 1.6;
    margin: 0;
    max-width: 40rem;
}

.resources-tool__cta {
    align-items: center;
    background: #236092;
    border-radius: 0.5rem;
    color: #ffffff;
    display: inline-flex;
    font-weight: 600;
    gap: 0.4rem;
    padding: 0.7rem 1.25rem;
    text-decoration: none;
    white-space: nowrap;
}

.resources-tool__cta:hover {
    background: #1c355e;
    color: #ffffff;
}

/* Route Margin Check — field groups (2026-08-31).

   The form shipped as eight inputs in four rows with nothing saying what they were for, and it read
   as a wall: two fields about the tech and two about the vehicle looked redundant because no heading
   said they were halves of one answer. Headings cost three lines of CSS and remove the whole
   objection. The hint is our own <p> rather than MudBlazor's HelperText, which was rendering inside
   the row box and being clipped by the row below. */
.route-margin__group {
    margin-bottom: 2.25rem;
}

.route-margin__group-title {
    color: #1c355e;
    font-size: 1.05rem;
    margin: 0 0 0.2rem;
}

.route-margin__group-lead {
    color: #5a6b78;
    margin: 0 0 1.1rem;
}

.route-margin__hint {
    color: #5a6b78;
    font-size: 0.82rem;
    line-height: 1.45;
    margin: 0.4rem 0 0;
}

/* Route Margin Check — plain form (2026-08-31, when the WASM island was removed).

   These inputs are ordinary <input type="number">. There is no component library on this page and
   that is the point: it is the landing page of a paid ad, and the previous version downloaded a
   .NET runtime before a visitor could type a digit. */
.route-margin__group {
    border: 0;
    margin: 0 0 2.25rem;
    padding: 0;
}

.route-margin__group-title {
    color: #1c355e;
    font-family: "Poppins", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0;
}

.route-margin__group-lead {
    color: #5a6b78;
    margin: 0.2rem 0 1.1rem;
}

.route-margin__row {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.route-margin__field {
    display: flex;
    flex-direction: column;
}

.route-margin__field--narrow {
    max-width: 16rem;
}

.route-margin__field > span {
    color: #1c355e;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.route-margin__field input {
    border: 1px solid rgba(28, 53, 94, 0.25);
    border-radius: 0.5rem;
    color: #1c355e;
    font-family: inherit;
    font-size: 1rem;
    padding: 0.7rem 0.85rem;
    width: 100%;
}

.route-margin__field input:focus {
    border-color: #236092;
    outline: 2px solid rgba(35, 96, 146, 0.35);
    outline-offset: 1px;
}

/* The hint is a sibling BELOW the input, in normal flow. The component library rendered it inside
   the field box and the line was being clipped by the row underneath. */
.route-margin__hint {
    color: #5a6b78;
    font-size: 0.82rem;
    font-style: normal;
    line-height: 1.45;
    margin-top: 0.4rem;
}

.route-margin__consent {
    align-items: flex-start;
    color: #5a6b78;
    display: flex;
    gap: 0.6rem;
    line-height: 1.5;
    margin: 1.25rem 0;
}

.route-margin__consent input {
    margin-top: 0.25rem;
}

.route-margin__submit {
    background: #236092;
    border: 0;
    border-radius: 0.5rem;
    color: #ffffff;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.8rem 1.5rem;
}

.route-margin__submit:hover {
    background: #1c355e;
}

.route-margin__error {
    color: #b3261e;
    font-weight: 600;
    margin: 1rem 0 0;
}

.route-margin__capture h2 {
    color: #1c355e;
    font-size: 1.25rem;
    margin: 0 0 0.5rem;
}

/* /switch vendor tiles (2026-09-06): the vendor mark sits where the Material icon would. */
.features-tile__logo { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; display: block; }