/* ==========================================================
   QRCheckSS V4 - COMPACT SIZE ONLY
   Typography / dimensions / spacing only.
   NO colors, backgrounds, gradients or shadows.
   ========================================================== */

:root {
    --compact-max-width: 1020px;
}

/* Global */
html {
    font-size: 13px;
}

body {
    font-size: 13px;
    line-height: 1.55;
}

.container {
    width: min(
        calc(100% - 36px),
        var(--compact-max-width)
    );
    margin-inline: auto;
}

/* Header */
.nav-wrap {
    min-height: 58px;
    gap: 12px;
}

.brand-mark {
    width: 33px;
    height: 33px;
    border-radius: 10px;
}

.brand-copy strong {
    font-size: 13px;
}

.brand-copy small {
    font-size: 7.5px;
}

.main-nav {
    gap: 2px;
}

.main-nav a {
    padding: 5px 7px;
    font-size: 10px;
}

.nav-cta {
    min-height: 31px;
    padding: 5px 10px;
    font-size: 10px;
}

.language-toggle,
.theme-toggle,
.nav-menu-toggle {
    min-height: 31px;
    font-size: 10px;
}

.theme-toggle,
.nav-menu-toggle {
    width: 31px;
}

/* Homepage hero */
.hero {
    min-height: 440px;
    padding: 46px 0 40px;
}

.hero-grid {
    gap: 28px;
}

.hero h1 {
    max-width: 590px;
    font-size: clamp(
        30px,
        3.5vw,
        39px
    );
    line-height: 1.07;
}

.hero-lead {
    max-width: 550px;
    margin-top: 13px;
    font-size: 12.5px;
    line-height: 1.6;
}

.hero-actions {
    margin-top: 17px;
}

.trust-row {
    margin-top: 17px;
}

.eyebrow,
.v4-eyebrow {
    margin-bottom: 10px;
    padding: 4px 8px;
    font-size: 8px;
}

/* Internal page hero */
.v4-page-hero {
    padding: 44px 0 31px;
}

.v4-page-hero-grid {
    gap: 24px;
}

.v4-page-hero h1 {
    max-width: 690px;
    font-size: clamp(
        27px,
        3.2vw,
        34px
    );
    line-height: 1.08;
}

.v4-page-hero p {
    max-width: 630px;
    margin-top: 11px;
    font-size: 12px;
    line-height: 1.58;
}

.v4-hero-aside {
    padding: 12px;
    border-radius: 12px;
}

.v4-hero-aside strong {
    font-size: 16px;
}

.v4-hero-aside span {
    font-size: 8.5px;
}

/* Sections */
.section,
.v4-section {
    padding: 40px 0;
}

.section-heading,
.v4-section-head {
    max-width: 700px;
}

.v4-section-head {
    margin-bottom: 17px;
}

.section-heading h2,
.v4-section-title {
    font-size: clamp(
        21px,
        2.3vw,
        26px
    );
    line-height: 1.15;
}

.section-heading p,
.v4-section-lead {
    font-size: 12px;
    line-height: 1.58;
}

/* General headings */
main h1:not(.hero h1):not(.v4-page-hero h1):not(.about-profile-copy h1) {
    font-size: 25px;
}

main h2:not(.section-heading h2):not(.v4-section-title) {
    font-size: 17px;
}

main h3 {
    font-size: 13px;
}

main h4 {
    font-size: 12px;
}

main p,
main li {
    font-size: 11.5px;
    line-height: 1.55;
}

/* Grids */
.v4-grid-2,
.v4-grid-3,
.v4-grid-4 {
    gap: 9px;
}

/* Cards */
.v4-card,
.qrv3-card {
    padding: 12px;
    border-radius: 12px;
}

.v4-card h2 {
    font-size: 15px;
}

.v4-card h3,
.qrv3-card h3 {
    font-size: 13px;
}

.v4-card p,
.v4-card li,
.qrv3-card p,
.qrv3-card li {
    font-size: 11px;
}

/* Original scanner/results/dashboard cards */
.scanner-card,
.status-card,
.result-hero,
.result-panel,
.reports-card,
.dashboard-card,
.summary-card,
.kpi-card,
.info-card,
.privacy-note,
.chart-card,
.activity-card,
.table-card {
    padding: 12px;
    border-radius: 12px;
}

/* Scanner */
.scanner-layout {
    gap: 14px;
}

.scanner-card h2 {
    font-size: 16px;
}

.scanner-tabs {
    gap: 5px;
}

.scanner-tab {
    padding: 7px 9px;
    font-size: 10.5px;
}

.scanner-panel {
    padding: 12px;
}

.drop-zone {
    padding: 17px;
}

.drop-zone p,
.drop-zone span {
    font-size: 11px;
}

.upload-icon {
    width: 40px;
    height: 40px;
}

/* Buttons */
.btn,
.v4-button {
    min-height: 32px;
    padding: 6px 11px;
    font-size: 10.5px;
}

.btn-large {
    min-height: 36px;
    padding: 7px 13px;
}

.btn-small {
    min-height: 28px;
    padding: 5px 8px;
}

/* Result cards */
.summary-grid,
.kpi-grid {
    gap: 8px;
}

.summary-card small,
.kpi-card small {
    font-size: 8.5px;
}

.summary-card strong {
    font-size: 16px;
}

.kpi-card > strong {
    font-size: 17px;
}

.kpi-card > span {
    font-size: 9.5px;
}

/* Research */
.v4-research-banner {
    padding: 15px;
    gap: 13px;
}

.v4-research-metrics {
    gap: 6px;
}

.v4-research-metrics > div {
    padding: 8px;
}

.v4-research-metrics strong {
    font-size: 15px;
}

.v4-research-metrics span {
    font-size: 8px;
}

/* Tables */
table th,
table td,
.v4-table th,
.v4-table td {
    padding: 7px 8px;
    font-size: 10px;
}

/* ML */
.qrv3-ml-verdict {
    gap: 6px;
}

.qrv3-ml-primary {
    padding: 9px;
}

.qrv3-ml-prediction {
    font-size: 20px;
}

/* About Me */
.about-layout {
    max-width: 860px;
    gap: 21px;
}

.about-avatar {
    width: min(160px, 100%);
}

.about-profile-copy h1 {
    font-size: clamp(
        26px,
        2.8vw,
        31px
    );
}

.about-profile-copy h2 {
    font-size: 13px;
}

.about-profile-copy .headline {
    font-size: 11.5px;
}

.about-profile-copy p {
    font-size: 11px;
}

.about-meta-grid {
    gap: 6px;
    margin-top: 10px;
}

.about-meta-grid > div {
    padding: 8px;
}

/* Footer */
.footer-wrap,
.footer-wrap-v4 {
    padding-top: 21px;
    padding-bottom: 21px;
    gap: 17px;
}

.footer-wrap a,
.footer-wrap-v4 a {
    font-size: 9.5px;
}

/* Laptop */
@media (max-width: 1100px) {

    .container {
        width: min(
            calc(100% - 28px),
            900px
        );
    }

    .hero h1 {
        font-size: clamp(
            29px,
            4vw,
            36px
        );
    }

    .v4-page-hero h1 {
        font-size: clamp(
            26px,
            3.7vw,
            32px
        );
    }

    .section,
    .v4-section {
        padding: 37px 0;
    }
}

/* Mobile */
@media (max-width: 760px) {

    html,
    body {
        font-size: 12px;
    }

    .container {
        width: calc(100% - 20px);
        max-width: 540px;
    }

    .nav-wrap {
        min-height: 54px;
    }

    .hero {
        min-height: auto;
        padding: 35px 0 30px;
    }

    .hero h1 {
        font-size: 26px;
    }

    .hero-lead {
        font-size: 11.5px;
    }

    .v4-page-hero {
        padding: 35px 0 26px;
    }

    .v4-page-hero h1 {
        font-size: 24px;
    }

    .v4-page-hero p {
        font-size: 11.5px;
    }

    .section,
    .v4-section {
        padding: 32px 0;
    }

    .section-heading h2,
    .v4-section-title {
        font-size: 20px;
    }

    .v4-card,
    .qrv3-card {
        padding: 11px;
    }

    .about-avatar {
        width: 140px;
    }
}