/* Inter - self-hosted (was Google Fonts @import) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/css/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/css/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/css/fonts/inter-latin-600-normal.woff2') format('woff2');
}
/* WCAG AA contrast fix: raise text-indigo-200/65 to 80% opacity for 4.5:1 ratio on dark bg */
.text-indigo-200\/65 {
    color: color-mix(in srgb, oklch(87% 0.065 274.039) 80%, transparent) !important;
}

/* Custom overrides for the audience toggle buttons */
.audience-tile {
    padding: 6px 10px !important;
    border: 1px solid #000 !important;
    background: linear-gradient(to right, #1f2937, #1f2937) !important;
    color: #cbd5e1 !important;
}

@media (min-width: 768px) {
    .audience-tile {
        padding: 10px 30px !important;
    }
}

.audience-tile.selected {
    border-color: #818cf8 !important;
    background: linear-gradient(to right, #4f46e5, #6366f1) !important;
    color: #fff !important;
    box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3) !important;
}

/* Play button overlay (video modal trigger) */
.play-button {
    border: none !important;
    cursor: pointer !important;
    color: inherit !important;
    position: absolute !important;
    bottom: 2rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    border-radius: 9999px !important;
    background: rgba(3, 7, 18, 0.9) !important;
    padding: 0.75rem 1.5rem 0.75rem 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #e5e7eb !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid #1f2937 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.play-button:hover {
    transform: translateX(-50%) scale(1.05) !important;
    background: linear-gradient(to top, #4f46e5, #6366f1) !important;
    color: #fff !important;
    border-color: #818cf8 !important;
    box-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.4) !important;
}

.play-button .play-icon {
    position: relative !important;
    display: inline-flex !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.625rem !important;
    border-radius: 9999px !important;
    background: #fff !important;
}

.play-button .play-icon svg {
    fill: #4f46e5 !important;
}

/* Report banner placeholder (What you get section) */
.report-banner {
    padding-top: 0 !important;
    padding-bottom: 2.5rem !important;
}

.report-banner-img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

@media (min-width: 768px) {
    .report-banner {
        padding-top: 0 !important;
        padding-bottom: 3.5rem !important;
    }
}

/* Modal close button */
.modal-close-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    border-radius: 9999px !important;
    background: #1f2937 !important;
    color: #d1d5db !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: 1px solid #374151 !important;
}

.modal-close-button:hover {
    background: #ef4444 !important;
    color: #fff !important;
    border-color: #ef4444 !important;
    transform: scale(1.1) !important;
}

/* Success toast */
.toast-success {
    position: fixed !important;
    bottom: 1.5rem !important;
    right: 1.5rem !important;
    z-index: 9999 !important;
    max-width: 24rem !important;
    border-radius: 0.75rem !important;
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
    background: #111827 !important;
    padding: 1rem 1.25rem !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(34, 197, 94, 0.1) !important;
}

/* Sticky header */
.sticky {
    position: sticky !important;
}

.z-\[200\] {
    z-index: 200 !important;
}

@media (min-width: 768px) {
    .md\:justify-end {
        justify-content: flex-end !important;
    }
    .md\:flex-1 {
        flex: 1 1 0% !important;
    }
}

/* Header CTA - centered on mobile, right-aligned on desktop */
.nav-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    margin: 0;
    padding: 0;
    list-style: none !important;
}
@media (max-width: 767px) {
    .nav-cta {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 0 !important;
        height: 100% !important;
        pointer-events: none !important;
    }
    .nav-cta > li {
        pointer-events: auto !important;
    }
}
@media (min-width: 768px) {
    .nav-cta {
        position: static !important;
        transform: none !important;
        flex: 1 1 0% !important;
        justify-content: flex-end !important;
    }
}

.toast-success .toast-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    border-radius: 9999px !important;
    background: rgba(34, 197, 94, 0.2) !important;
    flex-shrink: 0 !important;
}

.toast-success .toast-icon svg {
    width: 1rem !important;
    height: 1rem !important;
    color: #4ade80 !important;
}

/* Benefit card images - 50% size on mobile, full width on desktop */
.benefit-img {
    width: 100% !important;
    /* All benefit images render at a uniform ratio so cards have equal height
       in the 3-column layout (sources are mixed 560x461 and 560x560). */
    aspect-ratio: 560 / 461;
    object-fit: cover;
}
@media (max-width: 767px) {
    .benefit-img {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
        padding-top: 1rem !important;
    }
}

/* Benefit cards - blend with the page background on mobile */
.benefit-card {
    background-color: #00020f !important;
}

@media (max-width: 767px) {
    .benefit-card > div {
        background-color: #00020f !important;
    }
    /* Remove the inner gradient overlay so the flat colour shows */
    .benefit-card > div::after {
        display: none !important;
        background: none !important;
    }
}


/* Comparison section - center article content on mobile */
@media (max-width: 767px) {
    .comparison-grid article {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}


/* Inter - self-hosted (was Google Fonts @import) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/css/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/css/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/css/fonts/inter-latin-600-normal.woff2') format('woff2');
}

/* Footer brand block — centered on mobile, right-aligned on desktop */
@media (max-width: 767px) {
    .footer-brand-col {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
}
@media (min-width: 768px) {
    .footer-brand-col {
        display: block !important;
        text-align: right !important;
    }
}

/* md:grid-cols-3 (not in precompiled Tailwind) */
@media (min-width: 768px) {
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Built-for images full width of parent through 1023px (mobile + md) */
@media (max-width: 1023px) {
    .builtfor-img {
        width: 100% !important;
        height: auto !important;
    }
}

/* Nav and footer logo sizing */
.nav-logo img, .footer-brand-col img {
    width: 40px !important;
    height: 40px !important;
}

/* Missing Tailwind utility — privacy-analytics page cards */
.mx-12 {
    margin-left: 3rem !important;
    margin-right: 3rem !important;
}

/* Missing Tailwind padding utilities */
.px-6 {
    padding-inline: calc(var(--spacing) * 6) !important;
}
.px-7 {
    padding-inline: calc(var(--spacing) * 7) !important;
}
.px-8 {
    padding-inline: calc(var(--spacing) * 8) !important;
}
.px-12 {
    padding-inline: calc(var(--spacing) * 12) !important;
}

/* Blog card aspect ratio — the template uses aspect-[101/64] but Tailwind v4
   generates .aspect-101\/64 (no brackets), so the rule doesn't match. */
.aspect-\[101\/64\] {
    aspect-ratio: 101/64;
}

/* Margin utilities not present in pre-compiled style.css */
.mx-5 {
    margin-inline: calc(var(--spacing) * 5) !important;
}
.mx-6 {
    margin-inline: calc(var(--spacing) * 6) !important;
}

/* Space utilities not present in pre-compiled style.css */
.space-y-10 {
    :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
    }
}


/* Prevent horizontal scroll */
html {
    overflow-x: hidden !important;
}
body {
    overflow-x: hidden !important;
    position: relative;
    width: 100%;
    max-width: 100vw;
}

/* The main wrapper div — force it to stay within viewport */
.flex.min-h-screen.flex-col.overflow-hidden {
    max-width: 100vw;
}


/* Hide nav items between 768px-950px to prevent crowding */
@media (max-width: 950px) {
    .max-\[950px\]\:hidden {
        display: none !important;
    }
}