@import url('/lib/security-pinned/fonts-d2aab09f86dd.css');

/* ── TOKENS ── */
:root {
    --primary-blue: #2B45B0;
    --bg-light: #EAECF5;
    --white: #ffffff;
    --text-main: #2D3748;
    --text-sub: #718096;
    --font-stack: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
    /* Neomorphic Shadows */
    --neo-shadow-dark: rgba(163, 177, 198, 0.6);
    --neo-shadow-light: rgba(255, 255, 255, 0.8);
}

body {
    background-color: var(--bg-light);
    color: var(--text-main);
    font-family: var(--font-stack);
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* ── BACKGROUND CLEANUP ── */
/* Removing dark cyberpunk overlays */
.bg-grid, .bg-vig, .scanline, .corner {
    display: none !important;
}

.bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-light); /* This is the "floor" color */
    z-index: -10;
    pointer-events: none;
}

    /* We add a pseudo-element for the image so we can mask it specifically */
    .bg::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url('/assets/Angeles.jpg');
        background-size: cover;
        background-position: center 15%;
        background-repeat: no-repeat;
        /* IMPROVED MASK: Smoother, better fade effect */
        -webkit-mask-image: linear-gradient( to bottom, rgba(0,0,0,1) 0%, /* Fully visible at top */
        rgba(0,0,0,0.9) 25%, /* Slight fade starts */
        rgba(0,0,0,0.6) 50%, /* More noticeable fade */
        rgba(0,0,0,0.2) 75%, /* Much lighter */
        rgba(0,0,0,0) 100% /* Fully transparent at bottom */
        );
        mask-image: linear-gradient( to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 25%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100% );
        opacity: 0.4;
        filter: saturate(0.8) brightness(0.95) contrast(1.1) blur(0.5px);
    }

/* ── STATUS BAR ── */
.status-bar {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-sub);
}

.s-pip {
    width: 6px;
    height: 6px;
    background: var(--primary-blue);
    box-shadow: 0 0 8px var(--primary-blue);
}

/* ── MAIN STAGE ── */
.stage {
    min-height: 100vh;
    padding-top: 40px;
    position: relative;
    background: linear-gradient(180deg, rgba(234, 236, 245, 0) 0%, rgba(234, 236, 245, 0.3) 60%, rgba(234, 236, 245, 1) 100%);
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ── RADAR TO PULSE COMPASS ── */
.radar-wrap {
    width: 220px;
    height: 220px;
    margin-bottom: 2rem;
    position: relative;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 1. Change the background to your primary blue */
    background-color: var(--primary-blue);
    /* 2. Adjust Neomorphic Shadows to work on a blue surface */
    /* Dark shadow - deeper blue */
    /* Light shadow - brighter blue/white */
    box-shadow: 15px 15px 30px rgba(25, 41, 105, 0.7), -15px -15px 30px rgba(100, 131, 255, 0.4);
}

.r-dish {
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    /* 1. Change the background here too to match */
    background-color: var(--primary-blue);
    /* 2. Adjust Inset Shadows for neomorphic depth against blue */
    box-shadow: inset 8px 8px 16px rgba(25, 41, 105, 0.7), inset -8px -8px 16px rgba(100, 131, 255, 0.4);
}

/* Pulse Animation */
.r-ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(43, 69, 176, 0.1);
    border-radius: 50%;
    animation: pulse 4s infinite ease-out;
}

.r-ring-2 {
    animation-delay: 1s;
}

.r-ring-3 {
    animation-delay: 2s;
}

@keyframes pulse {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

.r-logo {
    position: relative;
    z-index: 5; /* Ensure it stays above the dish and rings */
}

    .r-logo img {
        width: 120px;
        height: auto;
        display: block;
        /* 3. Ensure your logo is visible! If it's a dark SVG, use a filter to make it white. */
        /* Only uncomment the next line if your logo is dark and needs to be white. */
        /* filter: brightness(0) invert(1); */
    }

/* ── TYPOGRAPHY ── */
.title {
    font-family: 'Oswald', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--primary-blue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 12;
}

.eyebrow {
    font-family: 'Syne Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.5em;
    color: var(--text-sub);
    text-transform: uppercase;
    margin-bottom: 1rem;
    position: relative;
    z-index: 12;
}

.tagline {
    font-size: 1rem;
    color: var(--text-main);
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 12;
}

    .tagline strong {
        color: var(--primary-blue);
        font-weight: 700;
    }

/* ── CTA BUTTON ── */
.cta {
    background: var(--primary-blue) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 16px 40px !important;
    font-family: var(--font-stack);
    font-weight: 500;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: inset 1px 2px 2px 0 #ffffff70, inset -1px -2px 2px 0 #00000030, 1px 1px 4px 0 #00000010;
    transition: all 0.3s ease;
    position: relative;
    z-index: 12;
}

    .cta:hover {
        transform: translateY(-3px);
        box-shadow: inset 1px 2px 2px 0 #ffffff70, inset -1px -2px 2px 0 #00000030, 12px 12px 25px var(--neo-shadow-dark) !important;
    }

    .cta:active {
        transform: translateY(0);
        box-shadow: inset 4px 4px 8px rgba(0,0,0,0.2) !important;
    }

/* ── INFORMATION SECTIONS ── */
.info-sections {
    background: var(--bg-light);
    padding-top: 3rem;
    margin-top: -50px; /* Overlap with hero slightly */
}

/* Overview Section */
.overview-section {
    background: linear-gradient(135deg, rgba(43, 69, 176, 0.02) 0%, rgba(43, 69, 176, 0) 100%);
    padding: 4rem 0;
}

.section-title {
    font-family: 'Oswald', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-blue);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 1.5rem;
}

.section-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-main);
    margin-bottom: 1.5rem;
}

.feature-card {
    background: var(--white);
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 8px 8px 16px var(--neo-shadow-dark), -4px -4px 12px var(--neo-shadow-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

    .feature-card:hover {
        transform: translateY(-8px);
        box-shadow: 12px 12px 24px var(--neo-shadow-dark), -6px -6px 16px var(--neo-shadow-light);
    }

.feature-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-blue), #4a6ce1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: var(--white);
}

    .feature-icon svg {
        width: 32px;
        height: 32px;
    }

.feature-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary-blue);
    margin-bottom: 0.75rem;
}

.feature-card p {
    font-size: 0.95rem;
    color: var(--text-sub);
    line-height: 1.6;
}

/* Values Section */
.values-section {
    background: var(--white);
    padding: 4rem 0;
    position: relative;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.value-card {
    background: linear-gradient(135deg, rgba(43, 69, 176, 0.03) 0%, rgba(43, 69, 176, 0.01) 100%);
    padding: 2.5rem 2rem;
    border-radius: 16px;
    border: 1px solid rgba(43, 69, 176, 0.1);
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.value-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary-blue), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.value-card:hover {
    transform: translateY(-6px);
    border-color: rgba(43, 69, 176, 0.3);
    box-shadow: 0 12px 24px rgba(43, 69, 176, 0.1);
}

    .value-card:hover::before {
        opacity: 1;
    }

.value-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-blue), #4a6ce1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--white);
}

    .value-icon svg {
        width: 36px;
        height: 36px;
    }

.value-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 1rem;
}

.value-card p {
    font-size: 0.95rem;
    color: var(--text-sub);
    line-height: 1.7;
}

/* Features Section with Grid */
.features-section {
    background: linear-gradient(180deg, rgba(43, 69, 176, 0.02) 0%, rgba(43, 69, 176, 0) 100%);
    padding: 4rem 0;
}

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

.feature-list-item {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    padding: 2rem;
    background: var(--white);
    border-radius: 16px;
    border-left: 4px solid var(--primary-blue);
    transition: all 0.3s ease;
    cursor: pointer;
}

    .feature-list-item:hover {
        transform: translateX(8px);
        box-shadow: 8px 8px 16px var(--neo-shadow-dark), -4px -4px 8px var(--neo-shadow-light);
    }

.feature-number {
    font-family: 'Oswald', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-blue);
    min-width: 60px;
    line-height: 1;
}

.feature-content h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
    margin-top: 0;
}

.feature-content p {
    font-size: 0.95rem;
    color: var(--text-sub);
    line-height: 1.6;
    margin: 0;
}

/* ── FOOTER SECTION ── */
.footer-section {
    background: var(--white);
    padding: 3rem 0 2rem;
    border-top: 1px solid rgba(43, 69, 176, 0.1);
    margin-top: 4rem;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
    margin-bottom: 2rem;
}

.footer-about {
    flex: 1;
}

.footer-title {
    font-family: var(--font-stack);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
}

.footer-description {
    font-size: 0.9rem;
    color: var(--text-sub);
    line-height: 1.6;
    margin: 0;
}

.footer-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.footer-link {
    font-size: 0.9rem;
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

    .footer-link:hover {
        color: #4a6ce1;
        text-decoration: underline;
    }

.footer-divider {
    height: 1px;
    background: rgba(43, 69, 176, 0.1);
    margin: 2rem 0;
}

.copyright {
    font-size: 0.6rem;
    color: var(--text-sub);
    opacity: 0.6;
    letter-spacing: 0.1em;
    margin: 0;
}

/* Privacy Modal Styling */
.modal-content {
    border: 1px solid rgba(43, 69, 176, 0.1);
    border-radius: 12px;
}

.modal-header {
    background: linear-gradient(135deg, rgba(43, 69, 176, 0.03) 0%, rgba(43, 69, 176, 0.01) 100%);
    border-bottom: 1px solid rgba(43, 69, 176, 0.1);
    padding: 1.5rem;
}

.modal-title {
    font-family: var(--font-stack);
    color: var(--primary-blue);
    font-weight: 700;
}

.modal-body {
    padding: 2rem;
    background: var(--white);
}

.privacy-content h6 {
    font-family: var(--font-stack);
    color: var(--primary-blue);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.privacy-content p {
    color: var(--text-main);
    line-height: 1.7;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.privacy-content ul {
    color: var(--text-main);
    line-height: 1.8;
    font-size: 0.95rem;
    margin: 1rem 0;
    padding-left: 2rem;
}

    .privacy-content ul li {
        margin-bottom: 0.5rem;
    }

.modal-footer {
    background: var(--bg-light);
    border-top: 1px solid rgba(43, 69, 176, 0.1);
}

/* ── FOOTER BAR (Hero Section) ── */
.footer-bar {
    margin-top: 2rem;
    margin-bottom: 0;
    padding-bottom: 0;
}

.f-badge {
    background: var(--bg-light);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-sub);
    text-transform: uppercase;
    box-shadow: 4px 4px 8px var(--neo-shadow-dark), -4px -4px 8px var(--neo-shadow-light);
}

.f-pip {
    width: 5px;
    height: 5px;
    background: #28a745; /* Success Green */
}

.f-sep {
    width: 1px;
    height: 20px;
    background: rgba(113, 128, 150, 0.2);
}


@media (max-width: 768px) {
    /* 1. Reset the stage to use a grid for explicit placement */
    .stage {
        position: relative !important;
        min-height: 932px; /* Based on your inspector's height */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; /* This keeps the Logo/Button centered */
    }

    /* 2. Force the logo circle to the dead center */
    .radar-wrap {
        width: 150px; /* Mobile size */
        height: 150px;
        /* The "Secret Sauce" for centering circles */
        display: flex !important;
        align-items: center;
        justify-content: center;
        /* Use auto margins to occupy equal space on both sides */
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 1.5rem;
        position: relative;
        left: 0;
        right: 0;
    }

    /* 3. Ensure the image inside doesn't shift */
    .r-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

        .r-logo img {
            width: 65px; /* Adjust as needed */
            height: auto;
            margin: 0; /* Clear any Bootstrap margins */
        }

    .title {
        font-size: 2rem;
        margin-bottom: 0.2rem;
        line-height: 1.2;
    }

    .eyebrow {
        font-size: 0.55rem;
        letter-spacing: 0.25em;
        margin-bottom: 0.8rem;
    }

    .tagline {
        font-size: 0.8rem;
        margin-bottom: 2.5rem;
        padding: 0 10px;
    }
    /* 4. Fix the button width and depth */
    .cta {
        display: flex; /* Using flex inside the button for content centering */
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 240px; /* Limits the width so it looks professional */

        margin-left: auto !important;
        margin-right: auto !important;
        /* Ensure no Bootstrap default floats are messing it up */
        float: none;
        position: relative;
    }

    /* 5. Ensure the Footer doesn't float up */
    .footer-bar {
        position: absolute !important;
        bottom: 30px; /* Adjust this to set distance from the very bottom edge */
        left: 0;
        right: 0;
        width: 100%;
        /* Reset margins that might interfere */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        /* Ensure it sits above the background */
        z-index: 50;
    }

    .f-badge {
        font-size: 0.5rem;
        padding: 4px 10px;
    }

    .copyright {
        position: relative;
        bottom: auto;
    }

    /* 6. Fix Background Scale for Mobile Aspect Ratio */
    .bg {
        background-size: cover; /* Use cover, but let position handle the focus */
        background-position: 70% top; /* Shift to the right to see the church towers better */
    }

    /* 7. Mobile Information Sections */
    .overview-section {
        padding: 2rem 0;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .section-text {
        font-size: 0.95rem;
    }

    .feature-card {
        padding: 1.5rem;
    }

    .feature-icon {
        width: 50px;
        height: 50px;
    }

        .feature-icon svg {
            width: 24px;
            height: 24px;
        }

    .feature-card h3 {
        font-size: 1.1rem;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .value-icon {
        width: 60px;
        height: 60px;
    }

        .value-icon svg {
            width: 30px;
            height: 30px;
        }

    .value-card h3 {
        font-size: 1.1rem;
    }

    .value-card p {
        font-size: 0.85rem;
    }

    .features-section {
        padding: 2rem 0;
    }

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

    .feature-list-item {
        flex-direction: row;
        padding: 1.5rem;
        gap: 1.5rem;
    }

    .feature-number {
        font-size: 2rem;
        min-width: 40px;
    }

    .feature-content h3 {
        font-size: 1rem;
    }

    .feature-content p {
        font-size: 0.85rem;
    }

    /* Mobile Footer */
    .footer-section {
        padding: 2rem 0 1.5rem;
    }

    .footer-content {
        flex-direction: column;
        gap: 1.5rem;
    }

    .footer-links {
        flex-direction: column;
        width: 100%;
    }

    .footer-link {
        width: 100%;
        text-align: center;
    }

    .floating-cta {
        top: 15px;
        right: 15px;
        left: 15px;
    }

    .pill-title {
        display: none; /* Hide branding on small screens */
    }

    .cta-pill {
        justify-content: space-between;
    }
}

/* ── FLOATING PILL CTA ── */
.floating-cta {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 1000;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

    /* Class triggered by your JavaScript scroll listener */
    .floating-cta.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

/* The Glass Capsule Base */
.cta-pill {
    background: rgba(234, 236, 245, 0.9);
    backdrop-filter: blur(15px);
    padding: 6px;
    padding-left: 10px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 10px 10px 20px rgba(163, 177, 198, 0.5), -10px -10px 20px rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    overflow: visible; /* Allows the radar rings to expand outside */
}

/* ── REPLICATED RADAR LOGO ── */
.pill-logo-wrap {
    position: relative;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pill-logo-inner {
    position: relative;
    width: 34px;
    height: 34px;
    background-color: #2B45B0; /* Your primary blue */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3);
}

.pill-img {
    width: 18px;
    height: auto;
    position: relative;
    z-index: 5;
}

/* Radar Rings */
.p-ring {
    position: absolute;
    inset: 0;
    border: 1.5px solid #2B45B0;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: pill-pulse 3s infinite ease-out;
}

.p-ring-2 {
    animation-delay: 1s;
}

.p-ring-3 {
    animation-delay: 2s;
}

@keyframes pill-pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

/* Branding Text */
.pill-title {
    font-family: var(--font-stack);
    color: #2B45B0;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 0 25px 0 0;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Blue Action Button */
.pill-btn {
    background: #2B45B0;
    color: #ffffff !important;
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    box-shadow: inset 1px 2px 2px 0 #ffffff70, inset -1px -2px 2px 0 #00000030, 4px 4px 10px rgba(43, 69, 176, 0.3);
    display: flex;
    align-items: center;
}

    .pill-btn:hover {
        transform: scale(1.02);
        background: #3a59ce;
        box-shadow: 6px 6px 12px rgba(43, 69, 176, 0.4);
    }

/* ── HOME SUBMISSION HERO · UI-only draft surface ── */
.stage {
    min-height: 900px;
    padding: 42px 20px 42px;
    justify-content: center;
}

.home-submission-hero {
    position: relative;
    z-index: 15;
    display: flex;
    width: min(100%,760px);
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-brand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 84px !important;
    height: 84px !important;
    margin-bottom: 22px !important;
    padding: 0 !important;
    border: 6.5px solid rgba(20, 70, 160) !important;
    border-radius: 50% !important;
    background: #1646A0 !important;
    box-shadow: inset 4px 4px 8px rgba(10, 35, 85, 0.5), inset -4px -4px 8px rgba(45, 110, 240, 0.5), 0 10px 24px rgba(22, 70, 160, 0.35) !important;
}

    .hero-brand img {
        width: 42px !important;
        height: 42px !important;
        object-fit: contain !important;
        display: block !important;
    }

.hero-kicker {
    display: block;
    margin-bottom: 10px;
    color: #1646a0;
    font-family: var(--font-stack);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.hero-copy h1 {
    max-width: 700px;
    margin: 0;
    color: #172033;
    font-family: var(--font-stack);
    font-size: clamp(34px,5vw,54px);
    font-weight: 720;
    letter-spacing: -.055em;
    line-height: 1;
}

.hero-copy p {
    max-width: 590px;
    margin: 13px auto 22px;
    color: #526076;
    font-size: 14px;
    line-height: 1.55;
}

.hero-mode-switcher {
    display: grid;
    width: min(100%,430px);
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 5px;
    padding: 4px;
    border: 1px solid #cad9f3;
    border-radius: 9px;
    background: #eaf0fc;
}

.hero-mode-button {
    min-height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #506079;
    font: 650 10.5px var(--font-stack);
    cursor: pointer;
    transition: background .16s,color .16s,box-shadow .16s;
}

    .hero-mode-button.is-active {
        background: #1646a0;
        box-shadow: 0 5px 10px rgba(22,70,160,.18);
        color: #fff;
    }

    .hero-mode-button:focus-visible, .home-portal-link:focus-visible, #heroModeMessage:focus-visible {
        outline: 3px solid rgba(22,70,160,.25);
        outline-offset: 2px;
    }

.hero-composer {
    width: 100%;
    margin-top: 12px;
    padding: 16px;
    border: 1px solid #d6e0ef;
    border-radius: 12px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 14px 32px rgba(32,54,91,.12);
    text-align: left;
    transition: border-color .18s,box-shadow .18s;
}

.home-submission-hero[data-mode="recommendation"] .hero-composer {
    border-color: #bed5c8;
}

.hero-composer:focus-within {
    border-color: #1646a0;
    box-shadow: 0 0 0 4px rgba(22,70,160,.1),0 14px 32px rgba(32,54,91,.12);
}

.hero-composer-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.hero-composer label {
    color: #25334a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.hero-mode-badge {
    flex: 0 0 auto;
    padding: 4px 6px;
    border-radius: 4px;
    background: #eaf0fc;
    color: #1646a0;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.home-submission-hero[data-mode="recommendation"] .hero-mode-badge {
    background: #e7f4ef;
    color: #197153;
}

.hero-composer textarea {
    display: block;
    width: 100%;
    min-height: 76px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #25334a;
    font: 13px/1.55 var(--font-stack);
    resize: vertical;
}

    .hero-composer textarea::placeholder {
        color: #8390a4;
        opacity: 1;
    }

    .hero-composer textarea:focus {
        outline: 0;
    }

.hero-composer-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    font: var(--font-stack);
    gap: 14px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid #e7edf5;
    color: #6c788c;
    font-size: 10px;
    line-height: 1.4;
}

.hero-composer-scope {
    flex: 0 0 auto;
    color: #1646a0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.hero-portal-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    text-align: center;
}

.portal-question {
    color: #526076;
    font-size: 11px;
    font-weight: 400;
    font-family: var(--font-stack);
}

.portal-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 320px);
    padding: 12px 24px;
    color: #ffffff;
    border-radius: 10px;
    font-family: var(--font-stack);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-decoration: none;
    background: #1646A0;
    transition: all 0.3s ease;
    box-shadow: inset 1px 2px 2px 0 #ffffff70, inset -1px -2px 2px 0 #00000030, 4px 4px 10px rgba(43, 69, 176, 0.3);
}

    .portal-action-btn:hover {
        background: #1646a0;
        color: #ffffff;
        text-decoration: none;
        transform: translateY(-1px);
        box-shadow: inset 2px 2px 4px rgba(45, 110, 240, 0.4), inset -2px -2px 4px rgba(10, 35, 85, 0.5), 0 8px 20px rgba(22, 70, 160, 0.35);
    }

    .portal-action-btn:active {
        transform: translateY(0);
        box-shadow: inset 3px 3px 6px rgba(10, 35, 85, 0.6);
    }

.home-proof-bar {
    margin-top: 25px !important;
}



@media (max-width:768px) {
    .stage {
        min-height: 780px !important;
        padding: 68px 16px 32px;
    }

    .home-submission-hero {
        width: 100%;
    }

    .hero-brand {
        width: 70px;
        height: 70px;
        margin-bottom: 17px;
    }

        .hero-brand img {
            width: 34px;
            height: 34px;
        }

    .hero-copy h1 {
        font-size: clamp(32px,10vw,43px);
        font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .hero-copy p {
        margin-bottom: 18px;
        font-size: 12.5px;
    }

    .hero-composer {
        padding: 13px;
    }

    .hero-composer-footer {
        flex-direction: column;
        gap: 6px;
    }

    .hero-composer-scope {
        align-self: flex-end;
    }

    .home-submission-hero + .footer-bar {
        position: relative !important;
        bottom: auto !important;
        margin-top: 20px !important;
    }
}

@media (max-width:440px) {
    .stage {
        min-height: 760px !important;
    }

    .hero-kicker {
        font-size: 9px;
    }

    .hero-composer-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .hero-mode-badge {
        align-self: flex-start;
    }

    .hero-portal-row {
        flex-direction: column;
        gap: 4px;
    }

    .home-proof-bar .f-sep {
        display: none;
    }
}
/* Client refinement: crop the image at the measured focal point while always covering the full hero width—never expose side gutters. */
.bg::before {
    background-position: 18% 34%;
    background-size: cover;
}

.hero-brand {
    width: 70px;
    height: 70px;
    margin-bottom: 19px;
    padding: 6px;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 50%;
    background: linear-gradient(145deg,#315cc9,#163e99);
    box-shadow: 0 12px 25px rgba(22,70,160,.27),inset 0 1px 2px rgba(255,255,255,.28);
}

    .hero-brand img {
        width: 56px;
        height: 56px;
    }

.hero-copy h1 {
    margin-bottom: 22px;
}

@media (max-width:768px) {
    .bg::before {
        background-position: 37% 28%;
        background-size: cover;
    }

    .hero-brand {
        width: 60px;
        height: 60px;
        margin-bottom: 17px;
        padding: 5px;
    }

        .hero-brand img {
            width: 48px;
            height: 48px;
        }
}
/* Keep both mode headlines centered and balanced against the centered church focal point. */
.hero-copy {
    width: min(100%,680px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .hero-copy h1 {
        width: 100%;
        max-width: 680px;
        text-wrap: balance;
    }

@media (max-width:768px) {
    .hero-copy {
        width: 100%;
    }

        .hero-copy h1 {
            max-width: 620px;
        }
}
/* Prevent longer recommendation headlines from overwhelming the centered focal composition. */
.hero-copy h1 {
    font-size: clamp(28px,3.5vw,44px);
    line-height: 1.08;
}

@media (min-width:769px) {
    .hero-copy {
        width:min(calc(100vw - 48px),1000px);
    }

    .hero-copy h1 {
        max-width:1000px;
        white-space:nowrap;
        text-wrap:nowrap;
    }
}

@media (max-width:768px) {
    .hero-copy h1 {
        display:flex;
        min-height:3.24em;
        align-items:center;
        justify-content:center;
        font-size: clamp(28px,8vw,38px);
    }
}
/* Keep the hero and its photograph on the same content-width coordinate system. */
html,
body {
    width: 100%;
    min-width: 0;
}

.stage {
    width: 100% !important;
    max-width: none;
    align-self: stretch;
}

    .stage > .bg {
        right: 0;
        left: 0;
        width: 100% !important;
        transform: none;
        background-color: transparent;
    }
/* Do not paint a second, differently cropped copy of the hero photo behind the stage. */
body {
    background-color: #eaecf5;
    background-image: none;
}
/* Full-bleed safeguard: override every earlier height-based image size. */
.stage > .bg::before {
    background-size: cover !important;
}
/* Replace the image mask with a full-width fade overlay; masks can clip the photograph before the viewport edges. */
.stage > .bg::before {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background-image: linear-gradient(to bottom, rgba(234, 236, 245, 0.6) 0%, rgba(234, 236, 245, 0.64) 25%, rgba(234, 236, 245, 0.76) 50%, rgba(234, 236, 245, 0.92) 75%, #eaecf5 100%), url('/assets/Angeles.jpg');
    background-size: 100% 100%, cover !important;
    background-position: center, 18% 34%;
    background-repeat: no-repeat;
    opacity: 1;
}

@media (max-width: 768px) {
    .stage > .bg::before {
        background-position: center, 37% 28%;
    }
}
/* Crop away the photo's pale edge content without moving its centered focal point. */
.stage > .bg {
    --hero-background-x: 33px;
    --hero-background-scale: 1.05;
    overflow: hidden;
}

    .stage > .bg::before {
        transform: translateX(var(--hero-background-x)) scale(var(--hero-background-scale));
        transform-origin: center top;
    }

@media (max-width: 768px) {
    .stage > .bg {
        --hero-background-x: 0px;
        --hero-background-scale: 1.06;
    }
}
/* Mobile: keep the submission workspace compact and avoid a large empty fade before the next section. */
@media (max-width: 768px) {
    .stage {
        min-height: 680px !important;
        padding: 60px 16px 24px;
    }

    .home-proof-bar {
        margin-top: 16px !important;
    }
}
/* Mobile: size the hero from its content instead of a fixed pixel height, so no dead fade area is left above the next section. */
@media (max-width: 768px) {
    .stage {
        min-height: 0 !important;
        height: auto !important;
        padding: 56px 16px 30px !important;
        justify-content: flex-start;
    }

    .info-sections {
        margin-top: 0;
        padding-top: 1.5rem;
    }

    .home-submission-hero + .footer-bar {
        margin-top: 14px !important;
    }
}

@media (max-width: 440px) {
    .stage {
        min-height: 0 !important;
        height: auto !important;
    }
}
/* Mobile: the spire tips sit at x=308 and x=553 of the 900px source, so their midpoint is 47.8% of the image.
   Because a cover-sized image overflows less as the viewport widens, the focal value is tuned per band so both
   towers stay symmetrical around the centered status text and hero content. */
@media (max-width: 480px) {
    .stage > .bg::before {
        background-position: center, 46.3% 28%;
    }
}

@media (min-width: 481px) and (max-width: 620px) {
    .stage > .bg::before {
        background-position: center, 44.5% 28%;
    }
}

@media (min-width: 621px) and (max-width: 768px) {
    .stage > .bg::before {
        background-position: center, 34% 28%;
    }
}
/* UI-only submission affordance for the homepage composer. */
.hero-composer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.hero-submit-button {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid #1646a0;
    border-radius: 6px;
    background: #1646a0;
    color: #fff;
    font: 700 9px var(--font-stack);
    letter-spacing: 0.045em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}

    .hero-submit-button svg {
        width: 16px;
        height: 16px;
    }

    .hero-submit-button:hover {
        background: #0b2e6f;
        box-shadow: 0 5px 12px rgba(22, 70, 160, .22);
        transform: translateY(-1px);
    }

    .hero-submit-button:focus-visible {
        outline: 3px solid rgba(22, 70, 160, .25);
        outline-offset: 2px;
    }

@media (max-width: 768px) {
    .hero-composer-actions {
        align-self: flex-end;
    }
}
/* Keep the UI-only composer action compact and right-aligned instead of a full-width bar. */
.hero-composer-submit-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

    .hero-composer-submit-row .hero-submit-button {
        display: inline-flex;
        width: auto;
        min-height: 32px;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 0 14px;
        border-radius: 6px;
        font-size: 9px;
    }
/* Final width safeguard: keep the hero aligned to the document content box. */
.stage {
    width: 100% !important;
}

    .stage > .bg {
        left: 0;
        width: 100% !important;
        transform: none;
    }

body {
    overflow-x: hidden;
}

/* ===== Hero Continue Modal ===== */

.hero-continue-modal .hcm-content {
    border: none;
    border-radius: 40px;
    box-shadow: 0 25px 60px rgba(11, 46, 111, 0.25);
    overflow: visible;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Body */
.hero-continue-modal .hcm-body {
    position: relative;
    padding: 32px 32px 20px;
    border-radius: 20px;
}

.hero-continue-modal .hcm-logo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #1646a0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

    .hero-continue-modal .hcm-logo img {
        width: 28px;
        height: 28px;
        object-fit: contain;
    }

.hero-continue-modal .hcm-close {
    position: absolute;
    top: 24px;
    right: 24px;
    box-shadow: none;
    opacity: 0.5;
}

    .hero-continue-modal .hcm-close:hover {
        opacity: 1;
    }

    .hero-continue-modal .hcm-close:focus {
        box-shadow: none;
    }

.hero-continue-modal .hcm-title {
    font-weight: 800;
    font-size: 26px;
    color: #0d1321;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin-bottom: 16px;
}

.hero-continue-modal .hcm-lead {
    font-size: 17px;
    font-weight: 500;
    color: #172033;
    line-height: 1.5;
}

.hero-continue-modal .hcm-subtext {
    font-size: 13px;
    color: #8994a6;
    line-height: 1.5;
    margin-top: 8px;
}

/* Footer */
.hero-continue-modal .hcm-footer {
    border-top: 1px solid #e5eaf2;
    padding: 20px 32px 28px;
    border-radius: 0 0 20px 20px;
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 12px;
}

.hero-continue-modal .hcm-footer-right {
    display: flex;
    gap: 10px;
}

.hero-continue-modal .hcm-btn {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 11px 20px;
    border-radius: 10px;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.hero-continue-modal .hcm-btn-cancel {
    background: #eef1f6;
    border: 1px solid #eef1f6;
    color: #8994a6;
}

    .hero-continue-modal .hcm-btn-cancel:hover {
        background: #e3e7ee;
        color: #5b6577;
    }

.hero-continue-modal .hcm-btn-outline {
    background: #ffffff;
    border: 1.5px solid #1646a0;
    color: #1646a0;
}

    .hero-continue-modal .hcm-btn-outline:hover {
        background: #eef3fb;
        color: #0b2e6f;
        border-color: #0b2e6f;
    }

.hero-continue-modal .hcm-btn-primary {
    background: #1646a0;
    border: 1.5px solid #1646a0;
    color: #ffffff;
}

    .hero-continue-modal .hcm-btn-primary:hover {
        background: #0b2e6f;
        border-color: #0b2e6f;
    }

/* Mobile stacking */
@media (max-width: 576px) {
    .hero-continue-modal .hcm-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .hero-continue-modal .hcm-footer-right {
        flex-direction: column;
    }

    .hero-continue-modal .hcm-btn {
        width: 100%;
        text-align: center;
    }
}
/* Printable, phone-friendly entry points for barangay and city information desks. */
.qr-access-section { position:relative; z-index:5; padding:4rem 0; background:linear-gradient(180deg,rgba(43,69,176,.02) 0%,rgba(43,69,176,0) 100%); }
.qr-access-heading { max-width:760px; margin:0 auto 3rem; text-align:center; }
.qr-access-eyebrow { display:block; margin-bottom:.65rem; color:var(--primary-blue); font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.qr-access-heading .section-title { margin-bottom:1rem; }
.qr-access-heading p { margin:0; color:var(--text-sub); font-size:1.05rem; line-height:1.7; }
.qr-access-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; }
.qr-access-card { position:relative; display:flex; flex-direction:column; align-items:center; min-width:0; padding:2rem; overflow:hidden; border:1px solid rgba(43,69,176,.1); border-radius:16px; background:var(--white); box-shadow:8px 8px 16px var(--neo-shadow-dark),-4px -4px 12px var(--neo-shadow-light); text-align:center; transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease; }
.qr-access-card:hover { transform:translateY(-6px); border-color:rgba(43,69,176,.3); box-shadow:12px 12px 24px var(--neo-shadow-dark),-6px -6px 16px var(--neo-shadow-light); }
.qr-access-card::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,transparent,var(--primary-blue),transparent); }
.qr-access-number { align-self:flex-start; margin-bottom:.75rem; color:rgba(43,69,176,.45); font-family:'Oswald',sans-serif; font-size:1.1rem; font-weight:700; }
.qr-access-card img { width:min(190px,100%); height:auto; aspect-ratio:1; padding:10px; border:1px solid rgba(43,69,176,.12); border-radius:12px; background:var(--white); }
.qr-access-content { display:flex; flex:1; flex-direction:column; align-items:center; width:100%; }
.qr-access-card h3 { margin:1.25rem 0 .75rem; color:var(--primary-blue); font-size:1.25rem; font-weight:700; }
.qr-access-card p { margin:0 0 1rem; color:var(--text-sub); font-size:.95rem; line-height:1.7; }
.qr-access-card a,.qr-install-action,.pwa-install-button { margin-top:auto; color:var(--primary-blue); font-size:.85rem; font-weight:700; }
.qr-install-action { padding:0; border:0; background:transparent; text-decoration:underline; cursor:pointer; }
.pwa-install-button { padding:.65rem 1rem; border:0; border-radius:8px; background:var(--primary-blue); color:var(--white); cursor:pointer; }
.pwa-install-help { margin-top:.75rem; color:var(--text-sub); font-size:.8rem; line-height:1.5; }

.pwa-install-guide[hidden] { display:none; }
.pwa-install-guide { position:fixed; inset:0; z-index:2100; display:grid; place-items:center; padding:1rem; }
.pwa-install-guide-backdrop { position:absolute; inset:0; background:rgba(8,22,55,.68); backdrop-filter:blur(4px); }
.pwa-install-guide-dialog { position:relative; width:min(430px,100%); max-height:calc(100dvh - 2rem); overflow:auto; display:grid; grid-template-columns:64px 1fr; gap:1rem; padding:1.5rem; border:1px solid rgba(36,73,184,.2); border-radius:22px; background:#fff; color:#172033; box-shadow:0 24px 70px rgba(8,22,55,.3); text-align:left; }
.pwa-install-guide-dialog img { border-radius:16px; box-shadow:0 8px 22px rgba(36,73,184,.2); }
.pwa-install-guide-kicker { color:#2449b8; font-size:.76rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.pwa-install-guide-dialog h3 { margin:.25rem 2rem 0 0; color:#173b99; font-size:1.4rem; line-height:1.2; }
.pwa-install-guide-intro { grid-column:1/-1; margin:0; color:#65728a; font-size:.9rem; line-height:1.55; }
.pwa-install-guide-close { position:absolute; top:.8rem; right:.85rem; width:2.25rem; height:2.25rem; border:0; border-radius:50%; background:#edf2ff; color:#173b99; font-size:1.55rem; line-height:1; cursor:pointer; }
.pwa-install-guide-dialog ol { grid-column:1/-1; margin:.25rem 0 0; padding-left:1.4rem; }
.pwa-install-guide-dialog li { margin:.65rem 0; padding-left:.35rem; line-height:1.45; }
.pwa-install-guide-dialog li::marker { color:#2449b8; font-weight:800; }
.pwa-install-guide-note { grid-column:1/-1; margin:0; padding:.85rem 1rem; border-radius:12px; background:#f1f5ff; color:#52617b; font-size:.85rem; line-height:1.5; }
.pwa-install-guide-done { grid-column:1/-1; min-height:46px; border:0; border-radius:10px; background:#2449b8; color:#fff; font-weight:800; cursor:pointer; }
body.pwa-guide-open { overflow:hidden; }

/* Android installation is presented as its own opaque screen so the homepage
   cannot compete with the install decision. */
.pwa-install-guide-android { padding:0; overflow:auto; background:linear-gradient(155deg,#eef4ff 0%,#fff 48%,#e8f0ff 100%); }
.pwa-install-guide-android .pwa-install-guide-backdrop { display:none; }
.pwa-install-guide-android .pwa-install-guide-dialog { width:100%; min-height:100dvh; max-height:none; place-content:center; grid-template-columns:82px minmax(0,390px); column-gap:1.25rem; padding:clamp(2rem,7vw,4.5rem) max(1.25rem,calc((100vw - 520px)/2)); border:0; border-radius:0; background:transparent; box-shadow:none; }
.pwa-install-guide-android .pwa-install-guide-dialog::before { content:'Official mobile app'; grid-column:1/-1; width:max-content; margin:0 auto .65rem; padding:.38rem .75rem; border:1px solid #c8d7f8; border-radius:999px; background:#fff; color:#2449b8; font-size:.7rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.pwa-install-guide-android .pwa-install-guide-dialog img { width:82px; height:82px; border-radius:21px; }
.pwa-install-guide-android .pwa-install-guide-kicker { font-size:.8rem; }
.pwa-install-guide-android .pwa-install-guide-dialog h3 { margin:.3rem 0 0; font-size:clamp(1.75rem,7vw,2.35rem); letter-spacing:-.035em; }
.pwa-install-guide-android .pwa-install-guide-intro { margin:.65rem 0 .25rem; text-align:center; }
.pwa-install-guide-android .pwa-install-guide-dialog ol { margin:.5rem 0; padding:1.1rem 1.1rem 1.1rem 2.8rem; border:1px solid #dce5f6; border-radius:18px; background:rgba(255,255,255,.82); box-shadow:0 14px 38px rgba(23,59,153,.08); }
.pwa-install-guide-android .pwa-install-guide-dialog li { margin:.75rem 0; padding-left:.4rem; }
.pwa-install-guide-android .pwa-install-guide-note { border:1px solid #dce5f6; background:rgba(255,255,255,.68); }
.pwa-install-guide-android .pwa-install-guide-done { min-height:58px; border-radius:15px; background:linear-gradient(135deg,#2853ca,#173b99); font-size:1rem; box-shadow:0 14px 28px rgba(36,73,184,.25); }
.pwa-install-guide-android .pwa-install-guide-close { top:1rem; right:1rem; background:#fff; box-shadow:0 5px 18px rgba(23,59,153,.12); }

@media (max-width:480px) {
  .pwa-install-guide { align-items:end; padding:0; }
  .pwa-install-guide-dialog { width:100%; max-height:90dvh; border-radius:22px 22px 0 0; padding:1.25rem; }
  .pwa-install-guide-android { align-items:stretch; }
  .pwa-install-guide-android .pwa-install-guide-dialog { min-height:100dvh; max-height:none; grid-template-columns:68px minmax(0,1fr); padding:4.5rem 1.25rem 2rem; border-radius:0; }
  .pwa-install-guide-android .pwa-install-guide-dialog img { width:68px; height:68px; border-radius:18px; }
}
@media (max-width:991px) { .qr-access-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.qr-access-card:last-child { grid-column:1/-1; width:calc(50% - 1rem); justify-self:center; } }
@media (max-width:700px) { .qr-access-grid { grid-template-columns:1fr; }.qr-access-card,.qr-access-card:last-child { grid-column:auto; width:100%; max-width:420px; justify-self:center; } }
@media (max-width:480px) { .qr-access-section { padding:3rem 1rem; }.qr-access-heading { margin-bottom:2rem; }.qr-access-card { padding:1.5rem; }.qr-access-card img { width:180px; } }
@media print { .qr-access-section { padding:20px 0; background:#fff; }.qr-access-grid { grid-template-columns:repeat(3,1fr); gap:12px; }.qr-access-card,.qr-access-card:last-child { width:auto; box-shadow:none; break-inside:avoid; }.qr-access-card img { width:150px; } }