/* dmarc-checker.css - trimmed to only what Bootstrap can't handle */

/* Backdrop blur for glassy navbar */
.backdrop-blur {
    backdrop-filter: saturate(180%) blur(12px);
}

/* Social hover */
.social-link:hover {
    opacity: .75;
}

/* Primary CTAs */
.btn-scan {
    background: #6f42c1;
    border: none;
    color: #fff;
}

.btn-scan:hover {
    background: #5b32a8;
    color: #fff;
}

.btn-expert {
    background: #5b3df6;
    border-color: #5b3df6;
}

.btn-expert:hover {
    background: #4a2ee6;
    border-color: #4a2ee6;
}

/* Decorative underline */
.hero-underline {
    position: relative;
    display: inline-block;
    line-height: 1;
}

.hero-underline img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -0.35em;
    width: 100%;
    height: auto;
    opacity: .9;
}

@font-face {
    font-family: "Funnel Display";
    src: local("Funnel Display"), url("../font/funnel_display/FunnelDisplay-VariableFont_wght.ttf") format("truetype");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto Local";
    src: local("Roboto"), url("../font/roboto/Roboto-VariableFont_wdth_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-body: "Roboto Local", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-heading: "Funnel Display", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-family: var(--font-body);
}

:where(h1,h2,h3,h4,h5,h6,.display-1,.display-2,.display-3,.display-4,.display-5,.display-6) {
    font-family: var(--font-heading);
    font-weight: 700;
}

/* Pull hero under sticky header on large screens while keeping mobile spacing sane */
header.sticky-top.pt-3 + section {
    margin-top: -6rem;
    padding-top: 1rem;
}

@media (max-width: 991.98px) {
    header.sticky-top.pt-3 + section {
        margin-top: 0;
        padding-top: 0;
    }
}

/* Compare chips */
.compare-grid {
    display: grid;
    grid-template-columns:repeat(12, 1fr);
    row-gap: 14px;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: .44rem .8rem;
    white-space: nowrap;
}

/* Palettes */
.chip-gray {
    background: #e7ebf0;
    color: #374151;
}

.chip-slate {
    background: ghostwhite;
    color: #374151;
}

.chip-lilac {
    background: #efe9ff;
    color: #4338ca;
}

.chip-yellow {
    background: #fff0c9;
    color: #7a5a00;
}

.chip-pink {
    background: #f5e9ff;
    color: #6d28d9;
}

.chip-blue {
    background: #e8edff;
    color: #1f3b8a;
}

/* Organic tilt (desktop only for readability on mobile) */
@media (min-width: 992px) {
    .chip:nth-child(odd) {
        transform: rotate(-2deg);
    }

    .chip:nth-child(even) {
        transform: rotate(2deg);
    }
}

/* Left offsets (WITHOUT) */
.compare-grid.without .chip:nth-child(1) {
    grid-column: 2 / span 7;
}

.compare-grid.without .chip:nth-child(2) {
    grid-column: 4 / span 6;
}

.compare-grid.without .chip:nth-child(3) {
    grid-column: 2 / span 8;
}

.compare-grid.without .chip:nth-child(4) {
    grid-column: 5 / span 7;
}

.compare-grid.without .chip:nth-child(5) {
    grid-column: 2 / span 7;
}

/* Right offsets (WITH) */
.compare-grid.with .chip:nth-child(1) {
    grid-column: 5 / span 7;
}

.compare-grid.with .chip:nth-child(2) {
    grid-column: 3 / span 7;
}

.compare-grid.with .chip:nth-child(3) {
    grid-column: 6 / span 6;
}

.compare-grid.with .chip:nth-child(4) {
    grid-column: 4 / span 6;
}

.compare-grid.with .chip:nth-child(5) {
    grid-column: 5 / span 7;
}

.compare-grid.with .chip:nth-child(6) {
    grid-column: 4 / span 7;
}

.compare-grid.with .chip:nth-child(7) {
    grid-column: 5 / span 6;
}

.compare-grid.with .chip:nth-child(8) {
    grid-column: 4 / span 7;
}

/* Mobile: stack chips and remove tilt */
@media (max-width: 991.98px) {
    .compare-grid {
        grid-template-columns:1fr;
    }

    .compare-grid .chip {
        grid-column: auto;
        transform: none !important;
    }
}

/* Minor hero padding tuning via utilities, but keep a guard for legacy */
.hero-wrap {
    padding-top: 5rem;
    padding-bottom: 3rem;
}

@media (min-width: 992px) {
    .hero-wrap {
        padding-top: 6rem;
        padding-bottom: 5rem;
    }
}