/* Native page composer: opt-in styles for staging template integration. */
.velocity-native-page {
    --v-native-ink: #17212d;
    --v-native-muted: #526174;
    --v-native-surface: #f5f7f8;
    --v-native-orange: #f26b21;
    --v-native-navy: #0f2435;
    color: var(--v-native-ink);
}

.velocity-native-page h1,
.velocity-native-page h2,
.velocity-native-page h3 {
    color: var(--v-native-ink);
    font-weight: 800;
    line-height: 1.08;
}

.velocity-native-hero {
    background: linear-gradient(135deg, #fff8f1 0%, #f7fbfc 100%);
    border-bottom: 1px solid #dfe7eb;
    padding: clamp(3.5rem, 7vw, 7rem) 0;
}

.velocity-native-hero__content,
.velocity-native-prose,
.velocity-native-section__heading {
    max-width: 52rem;
}

.velocity-native-eyebrow {
    color: var(--v-native-orange);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    margin: 0 0 .75rem;
    text-transform: uppercase;
}

.velocity-native-hero h1 {
    font-size: clamp(2.3rem, 5vw, 4.4rem);
    margin: 0;
}

.velocity-native-hero__intro,
.velocity-native-conversion-panel p,
.velocity-native-decision-card p,
.velocity-native-faq__answer p,
.velocity-native-prose {
    color: var(--v-native-muted);
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    line-height: 1.7;
}

.velocity-native-hero__intro { margin: 1.25rem 0 0; }
.velocity-native-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

.velocity-native-button {
    align-items: center;
    border: 2px solid transparent;
    border-radius: 999px;
    display: inline-flex;
    font-weight: 800;
    justify-content: center;
    min-height: 3rem;
    padding: .7rem 1.25rem;
    text-align: center;
    text-decoration: none;
}

.velocity-native-button--primary { background: var(--v-native-orange); color: #fff; }
.velocity-native-button--primary:hover, .velocity-native-button--primary:focus { background: #cc5312; color: #fff; }
.velocity-native-button--secondary { border-color: var(--v-native-navy); color: var(--v-native-navy); }
.velocity-native-button--secondary:hover, .velocity-native-button--secondary:focus { background: var(--v-native-navy); color: #fff; }
.velocity-native-button--light { border-color: #fff; color: #fff; }
.velocity-native-button--light:hover, .velocity-native-button--light:focus { background: #fff; color: var(--v-native-navy); }

.velocity-native-section, .velocity-native-body { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.velocity-native-section--soft { background: var(--v-native-surface); }
.velocity-native-section__heading { margin-bottom: 2rem; }
.velocity-native-section__heading h2, .velocity-native-conversion-panel h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); margin: 0; }
.velocity-native-decision-intro { color: var(--v-native-muted); font-size: 1rem; line-height: 1.6; margin: .9rem 0 0; max-width: 45rem; }

.velocity-native-prose > *:first-child { margin-top: 0; }
.velocity-native-prose > *:last-child { margin-bottom: 0; }
.velocity-native-prose h2 { font-size: clamp(1.55rem, 2.5vw, 2.3rem); margin: 2.4rem 0 1rem; }
.velocity-native-prose h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); margin: 1.75rem 0 .75rem; }
.velocity-native-prose img { height: auto; max-width: 100%; }
.velocity-native-prose a { color: #bd470b; font-weight: 700; }

.velocity-native-decision-grid, .velocity-native-related-links__list {
    display: grid;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.velocity-native-decision-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.velocity-native-decision-card { background: #fff; border: 1px solid #dce5e8; border-radius: 1rem; padding: 1.5rem; }
.velocity-native-decision-card__number { color: var(--v-native-orange); display: block; font-size: .9rem; font-weight: 900; margin-bottom: 1.25rem; }
.velocity-native-decision-card h3 { font-size: 1.2rem; margin: 0 0 .75rem; }
.velocity-native-decision-card p { font-size: 1rem; margin: 0; }

.velocity-native-faq__list { max-width: 52rem; }
.velocity-native-faq__item { border-bottom: 1px solid #dce5e8; }
.velocity-native-faq__item summary { cursor: pointer; font-size: 1.1rem; font-weight: 800; padding: 1.15rem .25rem; }
.velocity-native-faq__answer { padding: 0 .25rem 1.15rem; }
.velocity-native-faq__answer p { font-size: 1rem; margin: 0; }

.velocity-native-related-links { background: var(--v-native-surface); }
.velocity-native-related-links__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.velocity-native-related-links__list a { align-items: center; background: #fff; border: 1px solid #dce5e8; border-radius: .85rem; color: var(--v-native-ink); display: flex; font-weight: 800; justify-content: space-between; min-height: 4rem; padding: 1rem; text-decoration: none; }
.velocity-native-related-links__list a:hover, .velocity-native-related-links__list a:focus { border-color: var(--v-native-orange); color: var(--v-native-orange); }

.velocity-native-conversion-panel { background: var(--v-native-navy); color: #fff; padding: clamp(3rem, 6vw, 5rem) 0; }
.velocity-native-conversion-panel h2, .velocity-native-conversion-panel p { color: #fff; }
.velocity-native-conversion-panel__inner { align-items: center; display: flex; gap: 2rem; justify-content: space-between; }
.velocity-native-conversion-panel__inner .velocity-native-actions { flex-shrink: 0; margin-top: 0; }

@media (max-width: 767.98px) {
    .velocity-native-decision-grid, .velocity-native-related-links__list { grid-template-columns: 1fr; }
    .velocity-native-conversion-panel__inner { align-items: flex-start; flex-direction: column; }
    .velocity-native-conversion-panel__inner .velocity-native-actions { margin-top: 0; width: 100%; }
    .velocity-native-conversion-panel__inner .velocity-native-button { width: 100%; }
}
