/* ==========================================================================
   TeerCMS v2
   Main Stylesheet
   Mobile First
   Google Discover Optimized
   Author: TeerCMS
   ========================================================================== */


/* ==========================================================================
   01. RESET
   ========================================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    font-size:16px;
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    font-size:1rem;
    line-height:1.6;
    color:#1f2937;
    background:#f5f7fb;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
}

img{
    display:block;
    max-width:100%;
    height:auto;
}

picture{
    display:block;
}

svg{
    display:block;
}

a{
    color:inherit;
    text-decoration:none;
    transition:.25s ease;
}

button{
    font:inherit;
    border:none;
    background:none;
    cursor:pointer;
}

input,
textarea,
select{
    font:inherit;
}

ul,
ol{
    list-style:none;
}

table{
    border-collapse:collapse;
    border-spacing:0;
    width:100%;
}

iframe{
    border:0;
    width:100%;
}

:focus-visible{
    outline:3px solid #0b57d0;
    outline-offset:2px;
}


/* ==========================================================================
   02. ROOT VARIABLES
   ========================================================================== */

:root{

    --primary:#0b57d0;
    --primary-dark:#0846a8;
    --secondary:#ef4444;

    --green:#16a34a;
    --orange:#ea580c;

    --text:#1f2937;
    --text-light:#6b7280;

    --border:#e5e7eb;

    --bg:#f5f7fb;
    --white:#ffffff;

    --radius:14px;

    --shadow-sm:
        0 1px 3px rgba(0,0,0,.08);

    --shadow:
        0 8px 30px rgba(0,0,0,.08);

    --shadow-lg:
        0 20px 40px rgba(0,0,0,.12);

    --container:1220px;

    --transition:.25s ease;

}


/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6{
    color:#111827;
    line-height:1.3;
    font-weight:700;
}

h1{

    font-size:2rem;
    margin-bottom:1rem;

}

h2{

    font-size:1.55rem;
    margin-bottom:.85rem;

}

h3{

    font-size:1.2rem;
    margin-bottom:.75rem;

}

p{

    margin-bottom:1rem;
    color:var(--text);

}

small{

    color:var(--text-light);

}

strong{

    font-weight:700;

}


/* ==========================================================================
   04. LAYOUT
   ========================================================================== */

.container{

    width:min(100% - 32px,var(--container));
    margin-inline:auto;

}

.site-main{

    padding:24px 0 40px;

}

.grid{

    display:grid;
    gap:24px;

}

.content-layout{

    display:grid;
    gap:24px;

}

.content{

    min-width:0;

}

.sidebar{

    display:flex;
    flex-direction:column;
    gap:20px;

}


/* ==========================================================================
   05. HEADER
   ========================================================================== */

.site-header{

    position:sticky;
    top:0;
    z-index:1000;

    background:#fff;

    border-bottom:1px solid #edf2f7;

    box-shadow:0 8px 30px rgba(15,23,42,.05);

}

.header-container{

    height:78px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo{

    display:flex;

    align-items:center;

}

.logo img{

    height:46px;

    width:auto;

    display:block;

}

.logo .logo-icon{

    display:none;

}

.main-nav{

    margin-left:auto;

}

.main-nav ul{

    display:flex;

    align-items:center;

    gap:36px;

    margin:0;

    padding:0;

    list-style:none;

}

.main-nav a{

    position:relative;

    display:block;

    padding:6px 0;

    color:#1e293b;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    transition:.25s;

}

.main-nav a:hover{

    color:#1557c0;

}

.main-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#1557c0;

    transition:.25s;

}

.main-nav a:hover::after,

.main-nav a.active::after{

    width:100%;

}

.menu-toggle{

    display:none;

    flex-direction:column;

    gap:5px;

    border:none;

    background:none;

    cursor:pointer;

}

.menu-toggle span{

    width:26px;

    height:2px;

    background:#222;

    border-radius:20px;

}

@media(max-width:992px){

    .header-container{

        height:72px;

    }

    .menu-toggle{

        display:flex;

    }

    .main-nav{

        position:absolute;

        top:72px;

        left:0;

        width:100%;

        display:none;

        background:#fff;

        border-top:1px solid #eee;

    }

    .main-nav.active{

        display:block;

    }

    .main-nav ul{

        flex-direction:column;

        gap:0;

        padding:15px 0;

    }

    .main-nav li{

        width:100%;

    }

    .main-nav a{

        padding:14px 25px;

    }

    .main-nav a::after{

        display:none;

    }

}
/* ==========================================================================
   06. MOBILE MENU
   ========================================================================== */

.menu-toggle{

    width:44px;
    height:44px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;

}

.menu-toggle span{

    display:block;
    width:24px;
    height:2px;
    background:#111827;
    transition:.3s;

}

.main-nav{

    display:none;

    background:var(--white);
    border-top:1px solid var(--border);

}

.main-nav.active{

    display:block;

}

.main-nav ul{

    display:flex;
    flex-direction:column;

}

.main-nav li{

    border-bottom:1px solid var(--border);

}

.main-nav a{

    display:block;
    padding:15px 18px;
    font-weight:600;

}

.main-nav a:hover{

    background:#f8fafc;
    color:var(--primary);

}

.main-nav a.active{

    color:var(--primary);

}


/* ==========================================================================
   07. HERO RESULT CARD
   ========================================================================== */

.breaking-result{

    margin-bottom:28px;

}

.result-card{

    background:linear-gradient(
        135deg,
        #0b57d0,
        #0846a8
    );

    color:#fff;

    border-radius:18px;

    padding:24px;

    box-shadow:var(--shadow);

}

.result-title{

    display:flex;
    align-items:center;
    gap:10px;

    font-size:1.2rem;
    font-weight:700;

    margin-bottom:20px;

}

.live-dot{

    width:10px;
    height:10px;
    border-radius:50%;
    background:#22c55e;

    animation:pulse 1.4s infinite;

}

.result-grid{

    display:grid;
    gap:16px;

}

.result-box{

    background:rgba(255,255,255,.15);

    border-radius:14px;

    padding:18px;

    text-align:center;

    backdrop-filter:blur(8px);

}

.result-box span{

    display:block;

    opacity:.9;

    margin-bottom:8px;

}

.result-box strong{

    display:block;

    font-size:2.2rem;

    font-weight:800;

}
/* ==========================================================================
   08. CONTENT CARDS
   ========================================================================== */

.card{

    background:var(--white);

    border:1px solid var(--border);

    border-radius:16px;

    padding:20px;

    margin-bottom:24px;

    box-shadow:var(--shadow-sm);

}

.card-title{

    font-size:1.35rem;

    font-weight:700;

    margin-bottom:18px;

    color:#111827;

}

/* ==========================================
   Common Numbers - Date/Round Table Format
=========================================== */

.common-table-card{

    border-radius:16px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    border:1px solid var(--border);

    margin-bottom:24px;

    background:var(--white);

}

.common-date-bar{

    background:#0f172a;

    color:#fff;

    text-align:center;

    font-weight:700;

    font-size:1.3rem;

    padding:18px;

}

.common-round-label{

    padding:14px 20px 0;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    color:var(--text-light);

}

.common-round-table{

    width:100%;

    border-collapse:collapse;

    margin-bottom:6px;

}

.common-round-table th{

    padding:14px 8px;

    text-align:center;

    color:#fff;

    font-weight:700;

    font-size:1rem;

}

.common-round-table td{

    padding:20px 8px;

    text-align:center;

    font-weight:800;

    font-size:1.5rem;

    color:#111827;

    border-bottom:1px solid var(--border);

}

.common-round-table.round-first th{

    background:var(--primary);

}

.common-round-table.round-second th{

    background:var(--secondary);

}

.common-disclaimer{

    background:#fef3c7;

    border:1px solid #f59e0b;

    color:#92400e;

    padding:18px 22px;

    border-radius:14px;

    margin-bottom:24px;

}

.common-disclaimer h3{

    margin:0 0 8px;

    color:#92400e;

    font-size:1.05rem;

}

.common-disclaimer p{

    margin:0;

    font-size:.92rem;

    line-height:1.6;

}

@media (max-width:600px){

    .common-round-table td{

        font-size:1.2rem;

        padding:16px 4px;

    }

    .common-round-table th{

        font-size:.85rem;

        padding:10px 4px;

    }

}

.card p:last-child{

    margin-bottom:0;

}


/* ==========================================================================
   09. RESULT TABLE
   ========================================================================== */

.result-table{

    width:100%;

    overflow-x:auto;

}

.result-table table{

    width:100%;

    background:#fff;

}

.result-table th{

    background:var(--primary);

    color:#fff;

    font-weight:700;

    padding:14px;

    text-align:center;

}

.result-table td{

    padding:14px;

    border-bottom:1px solid var(--border);

    text-align:center;

}

.result-table tr:nth-child(even){

    background:#fafafa;

}

.result-table tr:hover{

    background:#f1f5f9;

}

.result-first{

    color:#0b57d0;

    font-weight:700;

    font-size:1.1rem;

}

.result-second{

    color:#dc2626;

    font-weight:700;

    font-size:1.1rem;

}


/* ==========================================================================
   10. SIDEBAR
   ========================================================================== */

.widget{

    background:#fff;

    border-radius:16px;

    padding:18px;

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

}

.widget-title{

    font-size:1.1rem;

    margin-bottom:16px;

    padding-bottom:10px;

    border-bottom:2px solid #eef2f7;

}


/* ==========================================================================
   Latest Results
   ========================================================================== */

.latest-result-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.latest-result-list li{

    border-bottom:1px solid #edf2f7;

    padding-bottom:12px;

}

.latest-result-list li:last-child{

    border:none;

    padding-bottom:0;

}

.latest-result-list a{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

}

.latest-result-list a:hover{

    color:var(--primary);

}

.latest-result-list .date{

    font-size:.9rem;

    color:var(--text-light);

}

.latest-result-list .score{

    font-weight:700;

}


/* ==========================================================================
   Number Chips
   ========================================================================== */

.number-group{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.number-chip{

    background:#eef4ff;

    color:var(--primary);

    padding:8px 14px;

    border-radius:999px;

    font-weight:700;

    min-width:52px;

    text-align:center;

}


/* ==========================================================================
   Archive List
   ========================================================================== */

.archive-list{

    display:flex;

    flex-direction:column;

}

.archive-list li{

    border-bottom:1px solid var(--border);

}

.archive-list li:last-child{

    border:none;

}

.archive-list a{

    display:block;

    padding:12px 0;

}

.archive-list a:hover{

    color:var(--primary);

    padding-left:6px;

}


/* ==========================================================================
   FAQ Links
   ========================================================================== */

.faq-links{

    display:flex;

    flex-direction:column;

}

.faq-links li{

    border-bottom:1px solid var(--border);

}

.faq-links li:last-child{

    border:none;

}

.faq-links a{

    display:block;

    padding:12px 0;

}

.faq-links a:hover{

    color:var(--primary);

}


/* ==========================================================================
   11. BUTTONS
   ========================================================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:12px 20px;

    border-radius:10px;

    font-weight:600;

    transition:var(--transition);

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-dark);

}

.btn-outline{

    border:1px solid var(--primary);

    color:var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}


/* ==========================================================================
   12. BADGES
   ========================================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 12px;

    border-radius:999px;

    font-size:.82rem;

    font-weight:700;

}

.badge-success{

    background:#dcfce7;

    color:#15803d;

}

.badge-danger{

    background:#fee2e2;

    color:#b91c1c;

}

.badge-primary{

    background:#dbeafe;

    color:#1d4ed8;

}


/* ==========================================================================
   13. BREADCRUMB
   ========================================================================== */

.breadcrumb{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:18px;

    font-size:.9rem;

}

.breadcrumb a{

    color:var(--primary);

}

.breadcrumb span{

    color:#9ca3af;

}


/* ==========================================================================
   14. ALERT BOXES
   ========================================================================== */

.notice{

    background:#fff8e6;

    border-left:4px solid #f59e0b;

    padding:18px;

    border-radius:10px;

    margin-bottom:24px;

}

.success-box{

    background:#ecfdf5;

    border-left:4px solid #22c55e;

    padding:18px;

    border-radius:10px;

}

.error-box{

    background:#fef2f2;

    border-left:4px solid #ef4444;

    padding:18px;

    border-radius:10px;

}


/* ==========================================================================
   15. PAGINATION
   ========================================================================== */

.pagination{

    display:flex;

    justify-content:center;

    gap:8px;

    margin:40px 0;

    flex-wrap:wrap;

}

.pagination a{

    min-width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    border:1px solid var(--border);

    border-radius:10px;

}

.pagination a:hover{

    background:var(--primary);

    color:#fff;

}

.pagination .active{

    background:var(--primary);

    color:#fff;

}


/* ==========================================================================
   16. FOOTER
   ========================================================================== */

.site-footer{

    background:#111827;

    color:#d1d5db;

    margin-top:40px;

}

.footer-top{

    padding:40px 0;

}

.footer-grid{

    display:grid;

    gap:30px;

}

.footer-title{

    color:#fff;

    margin-bottom:16px;

}

.footer-links{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.footer-links a:hover{

    color:#fff;

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.1);

    padding:20px 0;

    text-align:center;

    font-size:.92rem;

}


/* ==========================================================================
   17. UTILITIES
   ========================================================================== */

.text-center{

    text-align:center;

}

.mt-1{margin-top:8px;}
.mt-2{margin-top:16px;}
.mt-3{margin-top:24px;}
.mt-4{margin-top:32px;}

.mb-1{margin-bottom:8px;}
.mb-2{margin-bottom:16px;}
.mb-3{margin-bottom:24px;}
.mb-4{margin-bottom:32px;}

.hidden{

    display:none !important;

}


/* ==========================================================================
   18. ANIMATIONS
   ========================================================================== */

@keyframes pulse{

    0%{

        transform:scale(1);
        opacity:1;

    }

    50%{

        transform:scale(1.35);
        opacity:.55;

    }

    100%{

        transform:scale(1);
        opacity:1;

    }

}


/* ==========================================================================
   19. TABLET
   ========================================================================== */

@media (min-width:768px){

    .content-layout{

        grid-template-columns:2fr 1fr;

    }

    .result-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .footer-grid{

        grid-template-columns:repeat(2,1fr);

    }

}


/* ==========================================================================
   20. DESKTOP
   ========================================================================== */

@media (min-width:992px){

    .menu-toggle{

        display:none;

    }

    .main-nav{

        display:block;

        border:none;

    }

    .main-nav ul{

        flex-direction:row;

        justify-content:center;

        gap:10px;

    }

    .main-nav li{

        border:none;

    }

    .main-nav a{

        padding:18px 20px;

    }

    .footer-grid{

        grid-template-columns:2fr 1fr 1fr;

    }

}


/* ==========================================================================
   21. LARGE DESKTOP
   ========================================================================== */

@media (min-width:1200px){

    h1{

        font-size:2.4rem;

    }

    h2{

        font-size:1.8rem;

    }

    .site-main{

        padding:32px 0 50px;

    }

}
/* ==========================================================================
   Scroll To Top
   ========================================================================== */

.scroll-top{

    position:fixed;

    right:20px;

    bottom:20px;

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:20px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:var(--shadow);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.25s;

    z-index:999;

}

.scroll-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.site-header.scrolled{

    box-shadow:0 8px 24px rgba(0,0,0,.12);

}
/* ==========================================================================
   Home Hero
   ========================================================================== */
/* ==========================================================
   HERO
========================================================== */

.hero-card{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:40px;

    align-items:center;

    padding:45px;

    margin-bottom:30px;

    border-radius:22px;

    background:linear-gradient(135deg,#1557c0,#0c6bdc);

    color:#fff;

}

.hero-content h1{

    margin:18px 0 10px;

    font-size:3rem;

    line-height:1.2;

    color:#fff;

}

.hero-date{

    color:rgba(255,255,255,.85);

    margin-bottom:18px;

}

.hero-description{

    color:rgba(255,255,255,.95);

    line-height:1.9;

    max-width:640px;

    font-size:1.05rem;

}

.live-badge{

    display:inline-block;

    padding:8px 16px;

    border-radius:40px;

    background:#ff3b30;

    color:#fff;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.08em;

}

.hero-scores{

    display:grid;

    gap:22px;

}

.score-card{

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(10px);

    border-radius:18px;

    text-align:center;

    padding:28px;

}

.score-card small{

    display:block;

    margin-bottom:14px;

    color:#fff;

    font-size:1rem;

}

.score-card strong{

    display:block;

    font-size:4rem;

    line-height:1;

    color:#fff;

}

@media (max-width:768px){

    .hero-card{

        grid-template-columns:1fr;

        padding:30px;

    }

    .hero-content h1{

        font-size:2rem;

    }

    .hero-scores{

        grid-template-columns:1fr 1fr;

    }

    .score-card strong{

        font-size:3rem;

    }

}
/* ==========================================================================
   Quick Info
   ========================================================================== */

.quick-info{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin:25px 0;

}

.info-card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:14px;

    padding:20px;

    text-align:center;

}

.info-card small{

    display:block;

    color:var(--text-light);

    margin-bottom:8px;

}

.info-card strong{

    font-size:1.6rem;

    color:var(--primary);

}

/* ==========================================================================
   Archive Grid
   ========================================================================== */

.archive-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));

    gap:16px;

}

.archive-card{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:18px;

    border:1px solid var(--border);

    border-radius:12px;

    background:#fff;

    text-decoration:none;

    transition:.25s;

}

.archive-card:hover{

    transform:translateY(-3px);

    border-color:var(--primary);

}

/* ==========================================================================
   Features
   ========================================================================== */

.feature-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}

.feature-card{

    border:1px solid var(--border);

    border-radius:14px;

    padding:24px;

    background:#fff;

}

.feature-card h3{

    margin-bottom:12px;

}

.feature-card p{

    margin:0;

}

/* ==========================================================================
   Quick Links
   ========================================================================== */

.quick-links{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));

    gap:15px;

}

.quick-links a{

    padding:14px 18px;

    border:1px solid var(--border);

    border-radius:10px;

    text-decoration:none;

    transition:.25s;

}

.quick-links a:hover{

    border-color:var(--primary);

    background:#f7fbff;

}

/* ==========================================================================
   Section Header
   ========================================================================== */

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.section-header h2{

    margin:0;

}

.view-all{

    font-size:.9rem;

    text-decoration:none;

}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:768px){

    .hero-card{

        grid-template-columns:1fr;

        padding:25px;

    }

    .hero-left h1{

        font-size:1.8rem;

    }

    .quick-info{

        grid-template-columns:1fr;

    }

    .feature-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   Sidebar
========================================================== */

.sidebar{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.widget{

    background:#fff;

    border:1px solid var(--border);

    border-radius:16px;

    padding:22px;

}

.widget-title{

    margin:0 0 18px;

    font-size:1.15rem;

    border-bottom:1px solid var(--border);

    padding-bottom:12px;

}

.widget-result{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;

}

.widget-number{

    text-align:center;

    background:#f7f9fc;

    border-radius:12px;

    padding:16px;

}

.widget-number small{

    display:block;

    margin-bottom:8px;

    color:#666;

}

.widget-number strong{

    font-size:2rem;

    color:var(--primary);

}

.sidebar-search{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.sidebar-search input{

    padding:12px;

    border:1px solid var(--border);

    border-radius:10px;

}

.dream-search-input{

    width:100%;

    padding:14px 16px;

    border:1px solid var(--border);

    border-radius:10px;

    font-size:1rem;

    box-sizing:border-box;

}

.dream-search-input:focus{

    outline:none;

    border-color:var(--primary);

}

.archive-card.active{

    background:var(--primary);

    color:#fff;

}

.widget-list{

    list-style:none;

    margin:0;

    padding:0;

}

.widget-list li{

    border-bottom:1px solid #eee;

}

.widget-list li:last-child{

    border-bottom:none;

}

.widget-list a{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

    padding:12px 0;

    text-decoration:none;

    color:inherit;

}

.widget-list a:hover{

    color:var(--primary);

}

.ad-placeholder{

    height:250px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px dashed #ccc;

    border-radius:12px;

    background:#fafafa;

    font-size:1.1rem;

    color:#888;

}

@media (max-width:768px){

    .widget-result{

        grid-template-columns:1fr;

    }

}
/* ==========================================================
   Footer - Premium / Authority Layout
========================================================== */

.site-footer{
    position:relative;
    margin-top:64px;
    padding-top:10px;
    background:
        radial-gradient(circle at 15% 0%, rgba(11,87,208,.14), transparent 34%),
        radial-gradient(circle at 85% 10%, rgba(255,255,255,.05), transparent 30%),
        #0b1220;
    color:#fff;
    overflow:hidden;
}

.site-footer::before{
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:4px;
    background:linear-gradient(90deg,#0b57d0,#60a5fa,#0b57d0);
}

.footer-identity{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:34px;
    padding:46px 0 32px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.footer-brand{
    max-width:650px;
}

.footer-brand-link{
    display:inline-flex;
    align-items:center;
    margin-bottom:16px;
}

.footer-logo{
    width:auto;
    max-width:220px;
    height:58px;
    object-fit:contain;
}

.footer-brand-copy{
    max-width:620px;
    margin:0;
    color:#aeb9ca;
    line-height:1.8;
    font-size:.97rem;
}

.footer-trust-card{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:310px;
    max-width:390px;
    padding:16px 18px;
    border:1px solid rgba(96,165,250,.24);
    background:rgba(255,255,255,.045);
    border-radius:16px;
    box-shadow:0 14px 36px rgba(0,0,0,.16);
    backdrop-filter:blur(10px);
}

.footer-trust-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#0b57d0;
    color:#fff;
    font-weight:800;
    font-size:1.25rem;
    box-shadow:0 8px 20px rgba(11,87,208,.32);
}

.footer-trust-card strong{
    display:block;
    margin-bottom:4px;
    font-size:.95rem;
    letter-spacing:.01em;
}

.footer-trust-card span{
    display:block;
    color:#aeb9ca;
    font-size:.82rem;
    line-height:1.5;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.05fr 1.05fr 1.35fr 1fr;
    gap:38px;
    padding:38px 0 34px;
}

.footer-widget h3{
    margin:0 0 17px;
    color:#fff;
    font-size:1rem;
    font-weight:700;
    letter-spacing:.02em;
}

.footer-widget ul{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-widget li{
    margin-bottom:10px;
}

.footer-widget a{
    color:#aeb9ca;
    text-decoration:none;
    transition:color .2s ease, transform .2s ease;
}

.footer-widget a:hover{
    color:#fff;
}

.footer-widget p{
    color:#aeb9ca;
    line-height:1.7;
}

.footer-result-intro{
    margin-bottom:14px;
    font-size:.84rem;
}

.footer-result{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.footer-result div{
    padding:14px 12px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    background:rgba(255,255,255,.045);
    text-align:center;
}

.footer-result small{
    display:block;
    margin-bottom:3px;
    color:#aeb9ca;
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.footer-result strong{
    display:block;
    font-size:1.9rem;
    line-height:1.2;
    color:#fff;
}

.footer-result span{
    display:block;
    margin-top:3px;
    color:#7f8ba0;
    font-size:.72rem;
}

.footer-result-link{
    display:inline-block;
    margin-top:13px;
    color:#8fc2ff !important;
    font-size:.86rem;
    font-weight:600;
}

.footer-independence{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:18px;
    padding-top:15px;
    border-top:1px solid rgba(255,255,255,.08);
    color:#7f8ba0;
    font-size:.78rem;
}

.footer-independence-dot{
    width:8px;
    height:8px;
    flex:0 0 8px;
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 0 4px rgba(34,197,94,.10);
}

.footer-note{
    margin:0 0 24px;
    padding:16px 18px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:14px;
    background:rgba(255,255,255,.028);
}

.footer-note p{
    margin:0;
    color:#8f9bad;
    line-height:1.75;
    font-size:.8rem;
}

.footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:20px 0 24px;
    border-top:1px solid rgba(255,255,255,.08);
    color:#7f8ba0;
    font-size:.78rem;
}

.footer-bottom p{
    margin:0;
}

@media (max-width:992px){
    .footer-identity{
        align-items:flex-start;
        flex-direction:column;
    }

    .footer-trust-card{
        min-width:0;
        width:100%;
        max-width:520px;
    }

    .footer-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:768px){
    .site-footer{
        margin-top:48px;
    }

    .footer-identity{
        padding:38px 0 26px;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:30px;
        padding:30px 0;
    }

    .footer-result{
        grid-template-columns:1fr 1fr;
    }

    .footer-bottom{
        flex-direction:column;
        align-items:flex-start;
    }
}

/* ==========================================================
   Breadcrumb
========================================================== */

.breadcrumb{

    margin:24px 0;

}

.breadcrumb ol{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

    margin:0;

    padding:0;

    list-style:none;

    font-size:.92rem;

}

.breadcrumb li{

    display:flex;

    align-items:center;

}

.breadcrumb li:not(:last-child)::after{

    content:"";

    margin:0 8px;

    color:#94a3b8;

}

.breadcrumb a{

    color:var(--primary);

    text-decoration:none;

}

.breadcrumb span{

    color:#64748b;

}

@media (max-width:768px){

    .breadcrumb{

        margin:18px 0;

    }

    .breadcrumb ol{

        font-size:.85rem;

    }

}
/* ==========================================================
   FAQ
========================================================== */

.faq-list{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.faq-item{

    border:1px solid var(--border);

    border-radius:14px;

    overflow:hidden;

    background:#fff;

}

.faq-item summary{

    list-style:none;

    cursor:pointer;

    padding:18px 22px;

    font-weight:600;

    position:relative;

    user-select:none;

}

.faq-item summary::-webkit-details-marker{

    display:none;

}

.faq-item summary::after{

    content:"+";

    position:absolute;

    right:22px;

    top:50%;

    transform:translateY(-50%);

    font-size:1.4rem;

    transition:.25s;

}

.faq-item[open] summary::after{

    content:"";

}

.faq-answer{

    padding:0 22px 20px;

    color:#555;

    line-height:1.8;

}

@media (max-width:768px){

    .faq-item summary{

        padding:16px;

    }

    .faq-answer{

        padding:0 16px 18px;

    }

}

/* ==========================================================
   RESULT PAGE
========================================================== */

.result-hero{

    margin-bottom:28px;

}

.result-navigation{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    align-items:center;

}

.result-navigation .btn{

    width:100%;

    text-align:center;

}

.result-table{

    overflow-x:auto;

}

.result-table table{

    width:100%;

    border-collapse:collapse;

}

.result-table th{

    background:#f8fafc;

    color:#111827;

    font-weight:700;

    white-space:nowrap;

}

.result-table th,
.result-table td{

    padding:14px 18px;

    border:1px solid #e5e7eb;

    text-align:left;

}

.result-table tbody tr:hover{

    background:#fafcff;

}

.result-first{

    color:#1557c0;

    font-weight:700;

}

.result-second{

    color:#e63946;

    font-weight:700;

}

.number-group{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.number-chip{

    min-width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#1557c0;

    color:#fff;

    border-radius:14px;

    font-size:1.25rem;

    font-weight:700;

    box-shadow:0 10px 25px rgba(21,87,192,.15);

}

.number-chip:hover{

    transform:translateY(-2px);

    transition:.2s;

}

@media(max-width:768px){

    .result-navigation{

        grid-template-columns:1fr;

    }

    .number-chip{

        min-width:50px;

        height:50px;

        font-size:1.1rem;

    }

}

/* ==========================================================================
   FINAL OVERRIDES
   ========================================================================== */

/* Mobile result-table sizing lives in mobile.css (loaded after this file,
   so it's the correct place for these overrides - see "Responsive Tables"
   section there). */


/* ========================================================================
   31. PERFORMANCE, READABILITY & ADSENSE UX
   ======================================================================== */

.content p,
.page-content p,
.content li,
.page-content li{
    line-height:1.75;
}

.content > .card,
.content > .hero-card{
    scroll-margin-top:96px;
}

.card{
    padding:24px;
}

.section-header{
    gap:16px;
}

.section-header h2{
    letter-spacing:-.01em;
}

.btn,
.main-nav a,
.menu-toggle,
.quick-links a,
.archive-card,
.ng-hint{
    -webkit-tap-highlight-color:transparent;
}

.btn,
.main-nav a,
.archive-card,
.quick-links a{
    min-height:44px;
}

@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{
        transition:none !important;
        animation:none !important;
    }
}

/* Manual AdSense placements: clearly separated from editorial content. */
.ad-slot{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    margin:4px 0 28px;
    text-align:center;
}

.ad-slot-label{
    margin-bottom:7px;
    color:#94a3b8;
    font-size:.68rem;
    line-height:1;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.ad-slot-fixed{
    width:300px;
    min-height:250px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.ad-slot-responsive{
    width:100%;
}

@media (max-width:360px){
    .ad-slot-fixed,
    .ad-slot-fixed .adsbygoogle{
        width:100% !important;
        max-width:300px !important;
    }
}


/* Mobile stylesheet merged into the main stylesheet to reduce an extra blocking request. */
/* ==========================================================================
   TeerCMS v2
   Mobile Responsive Styles
   ========================================================================== */


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width:1024px){

    .container{

        width:94%;

    }

    .content-layout{

        grid-template-columns:1fr;

    }

    .sidebar{

        margin-top:30px;

    }

}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width:768px){

    html{

        font-size:15px;

    }

    body{

        overflow-x:hidden;

    }

    .container{

        width:94%;

    }

    .site-header{

        padding:14px 0;

    }

    .header-inner{

        flex-wrap:wrap;

        gap:15px;

    }

    .logo{

        font-size:1.3rem;

    }

    .main-menu{

        width:100%;

        display:none;

        flex-direction:column;

        background:#fff;

        border:1px solid var(--border);

        border-radius:12px;

        padding:15px;

        margin-top:10px;

    }

    .main-menu.active{

        display:flex;

    }

    .main-menu a{

        padding:10px 0;

    }

    .menu-toggle{

        display:flex;

    }

    .hero{

        padding:20px;

    }

    .result-grid{

        grid-template-columns:1fr;

        gap:15px;

    }

    .grid{

        grid-template-columns:1fr;

    }

    .number-group{

        gap:8px;

    }

    .number-chip{

        min-width:46px;

        font-size:.95rem;

    }

    .search-form{

        flex-direction:column;

    }

    .search-form input{

        width:100%;

    }

    .search-form button{

        width:100%;

    }

    .result-navigation{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:30px;

    }

}


/* ==========================================================================
   Responsive Tables
   ========================================================================== */

@media (max-width:768px){

    .result-table{

        overflow-x:visible;

    }

    .result-table table{

        table-layout:fixed;

        width:100%;

        min-width:0;

    }

    .result-table th{

        padding:8px 3px;

        font-size:.72rem;

        white-space:normal;

        overflow:hidden;

    }

    .result-table td{

        padding:9px 3px;

        font-size:.82rem;

        overflow:hidden;

        text-overflow:ellipsis;

    }

    .result-first,
    .result-second{

        font-size:.92rem;

    }

    .result-table .btn{

        padding:6px 4px;

        font-size:.7rem;

        border-radius:6px;

        min-width:0;

        width:100%;

        box-sizing:border-box;

    }

}


/* ==========================================================================
   Small Phones
   ========================================================================== */

@media (max-width:480px){

    h1{

        font-size:1.8rem;

    }

    h2{

        font-size:1.35rem;

    }

    .card{

        padding:18px;

    }

    .result-box{

        padding:18px;

    }

    .result-box strong{

        font-size:2rem;

    }

    .stat-card{

        padding:18px;

    }

    .scroll-top{

        right:15px;

        bottom:15px;

    }

    .logo .logo-full{

        display:none;

    }

    .logo .logo-icon{

        display:block;

        height:40px;

        width:auto;

    }

}

/* ========================================================================
   09. MOBILE UX / PERFORMANCE OVERRIDES
   ======================================================================== */

@media (max-width:768px){
    .container{width:min(100% - 24px, var(--container));}
    .site-main{padding-top:18px;padding-bottom:28px;}
    .header-container{height:68px;flex-wrap:wrap;}
    .main-nav{display:none;width:100%;margin-left:0;padding:8px 0 12px;}
    .main-nav.active{display:block;}
    .main-nav ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 0;border:1px solid var(--border);border-radius:12px;background:#fff;box-shadow:var(--shadow-sm);}
    .main-nav a{padding:13px 16px;}
    .menu-toggle{display:flex;}
    .menu-toggle span{display:block;width:22px;height:2px;margin:3px 0;background:#111827;border-radius:2px;}
    .hero-card{padding:24px 20px;gap:22px;border-radius:18px;margin-bottom:20px;}
    .hero-description{font-size:1rem;line-height:1.75;}
    .card{padding:20px 18px;margin-bottom:18px;border-radius:14px;}
    .content p,.page-content p,.content li,.page-content li{line-height:1.72;}
    .section-header{align-items:flex-start;flex-direction:column;}
    .section-header h2{width:100%;}
    .section-header .view-all{align-self:flex-start;}
    .btn{min-height:46px;}
    .result-table{border-radius:10px;}
    .result-table table{font-size:.84rem;}
    .ad-slot{margin:2px 0 22px;padding:0 2px;}
    .ad-slot-label{font-size:.64rem;}
    .ad-slot-fixed{min-height:250px;}
}

@media (max-width:480px){
    .container{width:min(100% - 20px, var(--container));}
    .hero-content h1{font-size:1.85rem;}
    .hero-scores{gap:10px;}
    .score-card{padding:20px 12px;border-radius:14px;}
    .score-card strong{font-size:2.6rem;}
    .ad-slot-fixed{width:300px;max-width:100%;}
}

/* Contextual internal-link clusters */
.related-resources{margin-top:18px}
.related-links-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.related-link-card{display:flex;flex-direction:column;gap:4px;padding:14px 15px;border:1px solid rgba(0,0,0,.09);border-radius:12px;text-decoration:none;background:rgba(0,0,0,.015);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.related-link-card:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.06);border-color:rgba(0,0,0,.16)}
.related-link-label{font-weight:700;line-height:1.35}
.related-link-desc{font-size:.88rem;line-height:1.45;opacity:.7}
@media(max-width:640px){.related-links-grid{grid-template-columns:1fr}.related-link-card{padding:13px 14px}}

/* SEO information strip: factual, compact and readable. */
.result-meta-strip{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 18px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:#f8fafc;color:#475569;font-size:.84rem;line-height:1.5}
.result-meta-strip strong{color:#334155}
.result-meta-strip span{min-width:0}
@media(max-width:640px){.result-meta-strip{display:block}.result-meta-strip span{display:block;margin:3px 0}}

/* ==========================================================================\n   31. SINGLE-COLUMN CONTENT MODE\n   ========================================================================== */
.content-layout{
    display:block;
    width:100%;
}

.content{
    width:min(100%, 980px);
    margin-inline:auto;
}

.content .result-table,
.content .archive-table,
.content .statistics-table{
    width:100%;
}


/* ========================================================================
   Resource Showcase / Second Fold
   ======================================================================== */
.resource-showcase{
    margin:0 0 22px;
    padding:30px;
    border:1px solid var(--border);
    border-radius:22px;
    background:linear-gradient(180deg,#ffffff 0%,#f7f9fc 100%);
    box-shadow:0 14px 36px rgba(15,23,42,.06);
}
.resource-showcase-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:22px;
}
.resource-showcase-head h2{
    margin:4px 0 8px;
    font-size:clamp(1.6rem,3vw,2.25rem);
    line-height:1.08;
    letter-spacing:-.025em;
}
.resource-showcase-head p{
    margin:0;
    color:var(--text-light);
    font-size:1rem;
}
.resource-showcase-kicker{
    display:inline-block;
    padding:5px 10px;
    border-radius:999px;
    background:#eef2ff;
    color:#4338ca;
    font-size:.75rem;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.resource-showcase-main-link{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:10px 15px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    color:var(--text);
    font-weight:750;
    text-decoration:none;
    transition:.2s ease;
}
.resource-showcase-main-link:hover{
    transform:translateY(-1px);
    border-color:var(--primary);
    box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.resource-showcase-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}
.resource-showcase-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:268px;
    padding:18px 18px 17px;
    border:1px solid var(--border);
    border-radius:18px;
    overflow:hidden;
    background:#fff;
    color:var(--text);
    text-decoration:none;
    box-shadow:0 8px 22px rgba(15,23,42,.05);
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.resource-showcase-card::after{
    content:"";
    position:absolute;
    width:110px;
    height:110px;
    right:-36px;
    top:-36px;
    border-radius:50%;
    background:currentColor;
    opacity:.055;
}
.resource-showcase-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 30px rgba(15,23,42,.1);
}
.resource-card-orange{color:#e85d04;border-top:4px solid #f28c28}
.resource-card-purple{color:#7c3aed;border-top:4px solid #9b5de5}
.resource-card-blue{color:#155eef;border-top:4px solid #4f7cff}
.resource-card-teal{color:#00897b;border-top:4px solid #26a69a}
.resource-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:92px;
    height:92px;
    margin:2px auto 18px;
    border-radius:22px;
    background:currentColor;
    color:#fff;
    box-shadow:0 10px 20px rgba(0,0,0,.1);
}
.resource-icon svg{width:54px;height:54px}
.resource-card-content{
    display:flex;
    flex:1;
    flex-direction:column;
    align-items:center;
    text-align:center;
    color:var(--text);
}
.resource-card-content strong{
    font-size:1rem;
    line-height:1.28;
    margin-bottom:10px;
}
.resource-card-content span{
    color:var(--text-light);
    font-size:.92rem;
    line-height:1.48;
}
.resource-card-content em{
    margin-top:auto;
    padding-top:16px;
    color:currentColor;
    font-size:.9rem;
    font-style:normal;
    font-weight:800;
}
@media (max-width:980px){
    .resource-showcase-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
    .resource-showcase{padding:20px 16px;border-radius:16px}
    .resource-showcase-head{align-items:flex-start;flex-direction:column;gap:14px}
    .resource-showcase-head h2{font-size:1.55rem}
    .resource-showcase-main-link{width:100%}
    .resource-showcase-grid{grid-template-columns:1fr;gap:14px}
    .resource-showcase-card{min-height:226px;padding:16px}
    .resource-icon{width:78px;height:78px;margin-bottom:14px;border-radius:19px}
    .resource-icon svg{width:47px;height:47px}
}

/* ========================================================================
   32. FULL-WIDTH / SIDEBAR-FREE CONTENT MODE
   ======================================================================== */
:root{--container:1440px;}
.container{width:min(100% - 40px,var(--container));}
.content-layout{display:block;width:100%;}
.content{width:100%;max-width:none;margin-inline:0;}
.site-main>.container{width:min(100% - 40px,var(--container));}

/* Keep long-form copy comfortably readable inside the wider page while
   allowing tables, tools and showcase modules to use the full content width. */
.content>p,
.content>ul,
.content>ol,
.content>.card>p,
.content>.card>ul,
.content>.card>ol,
.page-content>p,
.page-content>ul,
.page-content>ol{max-width:1120px;}

/* Resource cards use real visual assets rather than icon-only placeholders. */
.resource-icon.resource-image-wrap{
    width:100%;
    height:142px;
    margin:0 0 18px;
    border-radius:15px;
    overflow:hidden;
    background:#f5f7fb;
    box-shadow:0 10px 24px rgba(15,23,42,.10);
}
.resource-icon.resource-image-wrap img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}
.resource-card-content em{cursor:pointer;}
@media(max-width:980px){
    .container{width:min(100% - 28px,var(--container));}
}
@media(max-width:640px){
    .container{width:min(100% - 20px,var(--container));}
    .resource-icon.resource-image-wrap{height:165px;}
}


/* ========================================================================
   32. FULL-WIDTH SIDEBAR-FREE LAYOUT + RESOURCE IMAGES
   ======================================================================== */
:root{--container:1440px;}
.container{width:calc(100% - 40px);max-width:none;}
.content-layout{display:block;width:100%;}
.content{width:100%;max-width:none;margin-inline:0;}
.sidebar{display:none!important;}

/* Full-width visual modules; long copy remains comfortably readable. */
.content>p,
.content>ul,
.content>ol,
.content>.card>p,
.content>.card>ul,
.content>.card>ol,
.page-content>p,
.page-content>ul,
.page-content>ol{max-width:1120px;}

/* Image-led second-fold resources. */
.resource-icon.resource-image-wrap{
    width:100%;
    height:142px;
    margin:0 0 18px;
    border-radius:15px;
    overflow:hidden;
    background:#f5f7fb;
    box-shadow:0 10px 24px rgba(15,23,42,.10);
}
.resource-icon.resource-image-wrap img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}
@media(max-width:980px){
    .container{width:calc(100% - 28px);}
}
@media(max-width:640px){
    .container{width:calc(100% - 20px);}
    .resource-icon.resource-image-wrap{height:165px;}
}


/* ========================================================================
   33. PREMIUM CENTERED TABLE SYSTEM
   ======================================================================== */
.result-table{
    width:min(100%, 1220px);
    margin:24px auto;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border:1px solid #e3e8f0;
    border-radius:16px;
    background:#fff;
    box-shadow:0 10px 28px rgba(15,23,42,.055);
}
.result-table table{
    width:100%;
    min-width:620px;
    margin:0 auto;
    border-collapse:separate;
    border-spacing:0;
    background:#fff;
}
.result-table th{
    background:linear-gradient(180deg,#eef4ff 0%,#e5eefc 100%);
    color:#14213d;
    font-weight:800;
    padding:15px 18px;
    text-align:center;
    vertical-align:middle;
    border-bottom:1px solid #dbe4f0;
    white-space:nowrap;
}
.result-table td{
    padding:15px 18px;
    text-align:center;
    vertical-align:middle;
    border-bottom:1px solid #edf1f6;
    color:#263247;
}
.result-table tbody tr:nth-child(even){background:#fbfcfe;}
.result-table tbody tr:hover{background:#f5f8fd;}
.result-table tbody tr:last-child td,
.result-table tbody tr:last-child th{border-bottom:0;}
.result-table th:first-child{border-top-left-radius:15px;}
.result-table th:last-child{border-top-right-radius:15px;}

.common-table-card{
    width:min(100%,1220px);
    margin:26px auto;
    box-shadow:0 12px 30px rgba(15,23,42,.065);
}
.common-round-table{
    width:min(100%,1160px);
    margin:0 auto 8px;
}
.common-round-table th,
.common-round-table td{text-align:center;vertical-align:middle;}

@media(max-width:760px){
    .result-table{
        width:100%;
        margin:20px auto;
        border-radius:13px;
    }
    .result-table th,
    .result-table td{padding:13px 12px;font-size:.9rem;}
    .common-table-card{width:100%;}
}

/* ========================================================================
   34. MOBILE-FIRST TABLE REFINEMENT
   Keep tables fully visible on phones: no horizontal scrolling.
   ======================================================================== */
.result-table{
    width:min(100%,1160px);
    margin:22px auto;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    box-shadow:0 4px 16px rgba(15,23,42,.045);
}
.result-table table{
    width:100%;
    min-width:0;
    table-layout:fixed;
    border-collapse:collapse;
    margin:0;
}
.result-table th,
.result-table td{
    padding:13px 12px;
    text-align:center;
    vertical-align:middle;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
    border-bottom:1px solid var(--border);
}
.result-table th{
    background:#f8fafc;
    color:#162033;
    font-weight:700;
}
.result-table tbody tr:nth-child(even){background:#fafbfc;}
.result-table tbody tr:hover{background:#f5f8fb;}
.result-table tbody tr:last-child td,
.result-table tbody tr:last-child th{border-bottom:0;}
.result-table .btn{
    max-width:100%;
    white-space:normal;
    word-break:normal;
}
.common-table-card{
    width:min(100%,1160px);
    margin:24px auto;
}
.common-round-table{
    width:100%;
    min-width:0;
    table-layout:fixed;
    margin:0 auto 8px;
    border-collapse:collapse;
}
.common-round-table th,
.common-round-table td{
    text-align:center;
    vertical-align:middle;
    white-space:normal;
    overflow-wrap:anywhere;
}

@media (max-width:768px){
    .result-table{
        width:100%;
        margin:18px auto;
        border-radius:10px;
        overflow:hidden;
    }
    .result-table th,
    .result-table td{
        padding:9px 5px;
        font-size:.79rem;
        line-height:1.35;
    }
    .result-table .result-first,
    .result-table .result-second{
        font-size:.92rem;
    }
    .result-table .btn{
        width:auto;
        min-width:0;
        padding:7px 8px;
        font-size:.72rem;
        line-height:1.2;
    }
    .common-table-card{width:100%;}
    .common-round-table th,
    .common-round-table td{padding:9px 5px;font-size:.8rem;}
}

@media (max-width:420px){
    .result-table th,
    .result-table td{
        padding:8px 4px;
        font-size:.74rem;
    }
    .result-table .btn{
        padding:6px 6px;
        font-size:.68rem;
    }
}


/* ==========================================================================
   32. PRE-LAUNCH UX / ACCESSIBILITY / DATA SURFACE
   ========================================================================== */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.search-help{margin:12px 0 0;color:var(--text-light);font-size:.9rem}
.search-form input[type="search"]{min-width:0}
.archive-summary-card .quick-info{margin:0}
@media(max-width:640px){
    .search-form input[type="search"]{font-size:16px}
    .archive-summary-card .info-card strong{font-size:1rem;line-height:1.35}
}

/* ========================================================================
   35. VISUAL UX REFINEMENT - CLEAN PREMIUM SYSTEM
   Focus: stronger hierarchy, calmer surfaces, better scanability and touch UX.
   Mobile-safe: no horizontal scrolling, no fixed-width visual panels.
   ======================================================================== */

:root{
    --surface:#ffffff;
    --surface-soft:#f7f9fc;
    --text-strong:#111827;
    --text-muted:#667085;
    --line-soft:#e7ebf2;
    --primary-soft:#eef4ff;
    --accent-orange:#f97316;
    --accent-violet:#7c3aed;
    --accent-blue:#2563eb;
    --accent-teal:#0f9f8f;
    --shadow-card:0 10px 30px rgba(15,23,42,.055);
    --shadow-card-hover:0 16px 38px rgba(15,23,42,.09);
}

html{scroll-behavior:smooth;}

body{
    background:
        radial-gradient(circle at 8% 8%, rgba(37,99,235,.035), transparent 28%),
        radial-gradient(circle at 92% 18%, rgba(124,58,237,.035), transparent 26%),
        #f7f9fc;
    color:var(--text);
}

.site-main{
    padding-top:18px;
}

.site-main > .container{
    position:relative;
}

/* Calm, premium breadcrumbs */
.breadcrumb{
    margin:0 auto 16px;
    padding:8px 12px;
    width:max-content;
    max-width:100%;
    border:1px solid var(--line-soft);
    border-radius:999px;
    background:rgba(255,255,255,.88);
    box-shadow:0 4px 14px rgba(15,23,42,.03);
}

.breadcrumb ol{
    gap:6px;
}

.breadcrumb a,
.breadcrumb span{
    font-size:.82rem;
}

/* Universal content cards: stronger separation without heaviness. */
.content > .card,
.content > .hero-card,
.content > .resource-showcase,
.content > .archive-summary-card,
.content > .common-table-card{
    border-color:var(--line-soft);
    box-shadow:var(--shadow-card);
}

.content > .card{
    padding:28px;
    border-radius:18px;
    background:rgba(255,255,255,.98);
    transition:box-shadow .2s ease, border-color .2s ease;
}

.content > .card:hover{
    box-shadow:var(--shadow-card-hover);
    border-color:#dde3ec;
}

.section-header{
    margin-bottom:16px;
}

.section-header h2{
    margin:0;
    font-size:clamp(1.3rem,1.9vw,1.72rem);
    letter-spacing:-.02em;
    color:var(--text-strong);
}

.section-header .view-all{
    flex:0 0 auto;
    font-weight:750;
    text-decoration:none;
}

/* Premium hero with visual depth while preserving the existing layout. */
.hero-card{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    margin-bottom:24px;
    border:1px solid rgba(255,255,255,.2);
    box-shadow:0 18px 48px rgba(15,23,42,.15);
    background:
        radial-gradient(circle at 12% 12%, rgba(255,255,255,.16), transparent 26%),
        radial-gradient(circle at 90% 85%, rgba(255,255,255,.1), transparent 24%),
        linear-gradient(135deg,#124fc0 0%,#0a63d8 52%,#1647ad 100%);
}

.hero-card::before,
.hero-card::after{
    content:"";
    position:absolute;
    z-index:-1;
    border-radius:50%;
    pointer-events:none;
}

.hero-card::before{
    width:240px;
    height:240px;
    right:-90px;
    top:-110px;
    background:rgba(255,255,255,.09);
}

.hero-card::after{
    width:180px;
    height:180px;
    left:-80px;
    bottom:-100px;
    background:rgba(255,255,255,.06);
}

.hero-content h1{
    letter-spacing:-.035em;
}

.hero-description{
    max-width:760px;
}

.score-card{
    border:1px solid rgba(255,255,255,.2);
    box-shadow:0 12px 28px rgba(0,0,0,.12);
}

/* Resource showcase: more visual hierarchy and stronger image treatment. */
.resource-showcase{
    position:relative;
    overflow:hidden;
    margin-bottom:28px;
    padding:30px;
    border-color:#e4e9f1;
    background:linear-gradient(180deg,#ffffff 0%,#f9fbff 100%);
    box-shadow:0 12px 34px rgba(15,23,42,.06);
}

.resource-showcase::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    right:-180px;
    top:-180px;
    border-radius:50%;
    background:rgba(37,99,235,.045);
    pointer-events:none;
}

.resource-showcase-head{
    position:relative;
    z-index:1;
}

.resource-showcase-head h2{
    font-weight:800;
}

.resource-showcase-main-link{
    box-shadow:0 5px 15px rgba(15,23,42,.045);
}

.resource-showcase-card{
    min-height:286px;
    border-color:#e4e8ef;
    box-shadow:0 8px 22px rgba(15,23,42,.05);
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.resource-showcase-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 34px rgba(15,23,42,.105);
    border-color:#d7deea;
}

.resource-icon.resource-image-wrap{
    position:relative;
    height:152px;
    background:#eef2f7;
    box-shadow:0 8px 22px rgba(15,23,42,.08);
}

.resource-icon.resource-image-wrap::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(15,23,42,.08));
    pointer-events:none;
}

.resource-card-content strong{
    color:var(--text-strong);
}

.resource-card-content span{
    max-width:290px;
}

/* Modern number chips */
.number-chip{
    border:1px solid #dfe7f3;
    box-shadow:0 5px 13px rgba(15,23,42,.04);
    transition:transform .18s ease, box-shadow .18s ease;
}

.number-chip:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(15,23,42,.07);
}

/* Search surfaces */
.search-form{
    display:flex;
    align-items:stretch;
    gap:10px;
}

.search-form input,
.search-form select{
    min-height:48px;
    border:1px solid #d9e0ea;
    border-radius:12px;
    background:#fff;
    color:var(--text-strong);
    padding:0 14px;
    font:inherit;
    box-shadow:inset 0 1px 2px rgba(15,23,42,.025);
}

.search-form input:focus,
.search-form select:focus{
    outline:0;
    border-color:#8bb2f3;
    box-shadow:0 0 0 4px rgba(37,99,235,.1);
}

.btn{
    border-radius:12px;
    font-weight:750;
    letter-spacing:-.01em;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn:hover{
    transform:translateY(-1px);
}

.btn-primary{
    box-shadow:0 8px 18px rgba(11,87,208,.16);
}

/* Result metadata becomes a calm information rail rather than a dense strip. */
.result-meta-strip{
    margin-bottom:20px;
    padding:14px 16px;
    border-color:#e1e7ef;
    background:linear-gradient(180deg,#fbfcfe,#f6f8fb);
    box-shadow:0 5px 16px rgba(15,23,42,.035);
}

/* Related-link cards feel like useful destinations, not SEO blocks. */
.related-links-grid{
    gap:12px;
}

.related-link-card{
    min-height:88px;
    border-color:#e4e9f0;
    background:#fff;
    box-shadow:0 5px 15px rgba(15,23,42,.035);
}

.related-link-card:hover{
    border-color:#d4ddec;
    box-shadow:0 12px 24px rgba(15,23,42,.07);
}

.related-link-label{
    color:var(--text-strong);
}

/* FAQ cards: scannable, spacious and touch-friendly. */
.faq-list{
    display:grid;
    gap:10px;
}

.faq-item{
    overflow:hidden;
    border:1px solid #e4e9f0;
    border-radius:14px;
    background:#fff;
    box-shadow:0 4px 14px rgba(15,23,42,.035);
}

.faq-item summary{
    padding:16px 18px;
    font-weight:750;
    line-height:1.45;
}

.faq-answer{
    padding:0 18px 16px;
    color:#475569;
}

/* Archive cards */
.archive-grid{
    gap:14px;
}

.archive-card{
    min-height:72px;
    border-color:#e3e8ef;
    box-shadow:0 5px 15px rgba(15,23,42,.035);
}

.archive-card:hover,
.archive-card.active{
    box-shadow:0 10px 22px rgba(15,23,42,.07);
}

/* Tables: preserve fully visible mobile behavior while polishing desktop. */
.result-table,
.common-table-card{
    border-color:#e2e7ee;
    box-shadow:0 8px 24px rgba(15,23,42,.045);
}

.result-table th{
    background:#f4f7fb;
    color:#192338;
    font-weight:800;
}

.result-table td{
    color:#273449;
}

/* Prevent decorative interactions from making the page feel noisy on touch. */
@media (hover:none){
    .content > .card:hover,
    .resource-showcase-card:hover,
    .related-link-card:hover,
    .archive-card:hover,
    .number-chip:hover,
    .btn:hover{
        transform:none;
    }
}

@media (max-width:768px){
    .site-main{padding-top:14px;}
    .breadcrumb{
        width:auto;
        max-width:100%;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        justify-content:center;
    }
    .content > .card{
        padding:22px 18px;
        border-radius:16px;
    }
    .resource-showcase{
        padding:20px 14px;
        border-radius:17px;
    }
    .resource-showcase-card{
        min-height:0;
    }
    .resource-icon.resource-image-wrap{
        height:162px;
    }
    .search-form{
        width:100%;
    }
}

@media (max-width:480px){
    .site-main{padding-top:10px;}
    .content > .card{
        padding:20px 15px;
        border-radius:14px;
    }
    .resource-showcase-head h2{
        font-size:1.42rem;
    }
    .resource-showcase-head p{
        font-size:.93rem;
    }
    .resource-icon.resource-image-wrap{
        height:156px;
    }
}

/* ========================================================================
   36. VISUAL POLISH PASS - PREMIUM, SIMPLE, USER-FIRST
   Keeps the single-column/full-width architecture and mobile-safe tables.
   ======================================================================== */

.site-header{
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border-bottom-color:rgba(226,232,240,.88);
}

.header-container{
    position:relative;
}

.logo{
    padding:4px 0;
}

.logo img{
    filter:drop-shadow(0 4px 8px rgba(15,23,42,.06));
}

.main-nav a{
    letter-spacing:-.01em;
}

.main-nav a.active{
    color:#0b57d0;
}

.main-nav a::after{
    height:3px;
    border-radius:999px;
    bottom:-7px;
}

.site-main{
    background:linear-gradient(180deg,rgba(248,250,252,.72),rgba(247,249,252,0));
}

/* Give each content block a distinct rhythm without adding visual noise. */
.content > .card{
    position:relative;
}

.content > .card::before{
    content:"";
    position:absolute;
    top:0;
    left:28px;
    right:28px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(37,99,235,.14),transparent);
}

.content > .card h2:first-child,
.content > .card .section-header h2{
    letter-spacing:-.025em;
}

/* A subtle label treatment for headings that already have supporting text. */
.section-header{
    padding-bottom:2px;
}

.section-header .view-all{
    padding:7px 10px;
    border-radius:999px;
    background:#f6f8fb;
    border:1px solid #e7ebf1;
    color:#314158;
    font-size:.84rem;
}

.section-header .view-all:hover{
    background:#eef4ff;
    border-color:#d7e4ff;
    color:var(--primary);
}

/* Hero: make the primary task feel like the focal point. */
.hero-card{
    min-height:300px;
    padding:42px;
}

.hero-content{
    position:relative;
    z-index:1;
}

.hero-date{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:7px 12px;
    margin:4px 0 18px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:999px;
    background:rgba(255,255,255,.09);
    backdrop-filter:blur(8px);
    color:rgba(255,255,255,.92);
    font-weight:650;
}

.live-badge{
    box-shadow:0 8px 18px rgba(0,0,0,.12);
}

.hero-scores{
    position:relative;
    z-index:1;
    grid-template-columns:1fr 1fr;
    align-self:stretch;
}

.score-card{
    min-height:150px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.score-card strong{
    letter-spacing:-.045em;
}

/* Resource cards: more image-led, less boxy, strong affordance. */
.resource-showcase-grid{
    align-items:stretch;
}

.resource-showcase-card{
    padding:12px 12px 17px;
    background:linear-gradient(180deg,#fff,#fcfdff);
}

.resource-showcase-card:focus-visible{
    outline:3px solid rgba(37,99,235,.24);
    outline-offset:2px;
}

.resource-icon.resource-image-wrap{
    margin-bottom:15px;
    height:168px;
    border-radius:13px;
    box-shadow:none;
}

.resource-card-content{
    padding:0 7px;
}

.resource-card-content strong{
    font-size:1.03rem;
}

.resource-card-content em{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    margin-top:14px;
    padding:8px 12px;
    border:1px solid currentColor;
    border-radius:999px;
    font-size:.84rem;
}

.resource-showcase-card:hover .resource-card-content em{
    background:currentColor;
    color:#fff;
}

/* Quick links become compact navigation tiles rather than plain text lists. */
.quick-links{
    gap:10px;
}

.quick-links a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:50px;
    padding:12px 14px;
    border-radius:12px;
    background:#fbfcfe;
}

.quick-links a::after{
    content:"→";
    font-weight:800;
    color:#8492a6;
    transition:transform .18s ease,color .18s ease;
}

.quick-links a:hover::after{
    transform:translateX(2px);
    color:var(--primary);
}

/* Results get a clearer visual hierarchy. */
.result-first,
.result-second{
    font-variant-numeric:tabular-nums;
    letter-spacing:.02em;
}

.result-table td:first-child{
    font-weight:650;
    color:#475569;
}

.result-table .btn-outline{
    box-shadow:none;
}

/* Statistics/summary surfaces. */
.quick-info{
    gap:14px;
}

.info-card{
    border-color:#e3e8ef;
    box-shadow:0 6px 18px rgba(15,23,42,.035);
}

.info-card strong{
    letter-spacing:-.025em;
}

.archive-summary-card{
    background:linear-gradient(180deg,#ffffff,#fafcff);
}

/* Tool pages become more focused without introducing a new visual language. */
.tool-page-content{
    max-width:1180px;
    margin-inline:auto;
}

.tool-page-content .card{
    box-shadow:var(--shadow-card);
}

/* FAQ: compact enough to scan, generous enough to read. */
.faq-list{
    max-width:1180px;
    margin-inline:auto;
}

.faq-item summary{
    color:#172033;
    cursor:pointer;
}

.faq-item summary:hover{
    background:#fbfcfe;
}

/* Ads remain visually separated and don't look like primary content. */
.ad-slot{
    margin:10px auto 28px;
}

/* Desktop composition: use the wide canvas for visual sections, not giant text lines. */
@media (min-width:1200px){
    .hero-card{
        margin-inline:0;
        padding:48px 54px;
    }
    .content > .card > p,
    .content > .card > ul,
    .content > .card > ol{
        max-width:1120px;
    }
}

@media (max-width:900px){
    .hero-card{
        padding:32px 28px;
    }
    .resource-showcase-card{
        min-height:0;
    }
}

@media (max-width:768px){
    .site-header{
        -webkit-backdrop-filter:none;
        backdrop-filter:none;
    }
    .main-nav ul{
        box-shadow:0 12px 28px rgba(15,23,42,.08);
    }
    .hero-card{
        min-height:0;
        padding:26px 20px;
    }
    .hero-scores{
        grid-template-columns:1fr 1fr;
    }
    .score-card{
        min-height:126px;
    }
    .score-card small{
        font-size:.88rem;
    }
    .score-card strong{
        font-size:2.55rem;
    }
    .resource-icon.resource-image-wrap{
        height:164px;
    }
    .content > .card::before{
        left:18px;
        right:18px;
    }
}

@media (max-width:480px){
    .hero-card{
        padding:22px 15px;
    }
    .hero-content h1{
        font-size:1.75rem;
    }
    .hero-date{
        margin-bottom:14px;
        font-size:.85rem;
    }
    .hero-scores{
        gap:8px;
    }
    .score-card{
        min-height:116px;
        padding:17px 8px;
    }
    .score-card strong{
        font-size:2.35rem;
    }
    .resource-icon.resource-image-wrap{
        height:154px;
    }
    .section-header .view-all{
        font-size:.79rem;
    }
}

/* ========================================================================
   37. COLOR & ENGAGEMENT REFINEMENT - LIGHT, PREMIUM, USER-FIRST
   Adds visual energy without changing layout, mobile table behavior, or
   navigation architecture.
   ======================================================================== */
:root{
    --accent-violet:#7c3aed;
    --accent-coral:#f97316;
    --accent-sky:#2563eb;
    --accent-teal:#0f9f95;
    --accent-pink:#ec4899;
    --surface-tint:#f8f9ff;
}

body{
    background:
        radial-gradient(circle at 8% 6%,rgba(249,115,22,.055),transparent 24%),
        radial-gradient(circle at 92% 12%,rgba(124,58,237,.055),transparent 25%),
        radial-gradient(circle at 50% 95%,rgba(37,99,235,.04),transparent 28%),
        #f7f9fd;
}

.site-main{
    background:
        linear-gradient(180deg,rgba(255,255,255,.34),rgba(247,249,252,.12));
}

/* Header: a restrained color cue keeps navigation lively. */
.site-header::after{
    content:"";
    display:block;
    height:2px;
    background:linear-gradient(90deg,#f97316 0%,#ef4444 25%,#7c3aed 55%,#2563eb 78%,#0f9f95 100%);
    opacity:.72;
}

.main-nav a.active{
    color:#0b57d0;
    background:linear-gradient(180deg,rgba(37,99,235,.07),rgba(37,99,235,.035));
    border-radius:10px;
}

@media (min-width:993px){
    .main-nav a.active{
        padding-inline:12px;
        margin-inline:-12px;
    }
}

/* Primary hero: richer gradient, same structure and responsive behavior. */
.hero-card{
    background:
        radial-gradient(circle at 9% 30%,rgba(249,115,22,.19),transparent 24%),
        radial-gradient(circle at 86% 18%,rgba(124,58,237,.20),transparent 25%),
        linear-gradient(135deg,#104fc1 0%,#1768dd 48%,#4630b9 100%);
    box-shadow:0 20px 52px rgba(30,64,175,.18);
}

.live-badge{
    background:linear-gradient(90deg,#f97316,#ef4444);
}

.score-card:first-child{
    background:linear-gradient(145deg,rgba(239,68,68,.92),rgba(249,115,22,.88));
}

.score-card:last-child{
    background:linear-gradient(145deg,rgba(37,99,235,.96),rgba(79,70,229,.90));
}

.score-card:first-child small::before,
.score-card:last-child small::before{
    content:"";
    display:inline-block;
    width:7px;
    height:7px;
    margin:0 7px 2px 0;
    border-radius:50%;
    background:rgba(255,255,255,.72);
}

/* Resource area: let the existing image-led cards carry the color story. */
.resource-showcase{
    background:
        radial-gradient(circle at 8% 16%,rgba(249,115,22,.08),transparent 21%),
        radial-gradient(circle at 92% 18%,rgba(124,58,237,.08),transparent 22%),
        linear-gradient(180deg,#ffffff 0%,#fbfcff 100%);
}

.resource-showcase-kicker{
    background:linear-gradient(90deg,#eef4ff,#f5edff);
    color:#5b36d6;
    border:1px solid #e3ddff;
}

.resource-showcase-main-link:hover{
    background:linear-gradient(90deg,#f8fbff,#fbf7ff);
}

.resource-card-orange{
    border-top-color:#f97316;
    background:linear-gradient(180deg,#fff,#fffaf6);
}

.resource-card-purple{
    border-top-color:#8b5cf6;
    background:linear-gradient(180deg,#fff,#fbf8ff);
}

.resource-card-blue{
    border-top-color:#3b82f6;
    background:linear-gradient(180deg,#fff,#f7faff);
}

.resource-card-teal{
    border-top-color:#14b8a6;
    background:linear-gradient(180deg,#fff,#f6fffd);
}

.resource-showcase-card:hover{
    border-color:#d9e1ef;
}

/* General cards gain just enough color to avoid a monochrome documentation feel. */
.content > .card{
    background:
        linear-gradient(180deg,#ffffff 0%,#ffffff 88%,#fbfcff 100%);
    box-shadow:0 9px 26px rgba(15,23,42,.045);
}

.content > .card::after{
    content:"";
    position:absolute;
    left:28px;
    right:28px;
    bottom:0;
    height:2px;
    border-radius:99px;
    background:linear-gradient(90deg,rgba(249,115,22,.18),rgba(124,58,237,.15),rgba(37,99,235,.18));
    opacity:.65;
    pointer-events:none;
}

/* Headings and section links get a small visual cue rather than extra blocks. */
.section-header h2::before{
    content:"";
    display:inline-block;
    width:6px;
    height:22px;
    margin-right:10px;
    border-radius:99px;
    vertical-align:-2px;
    background:linear-gradient(180deg,#f97316,#7c3aed,#2563eb);
}

.section-header .view-all:hover{
    background:linear-gradient(90deg,#eef6ff,#f7f2ff);
}

/* Number references look more like useful interactive objects. */
.number-chip{
    background:linear-gradient(180deg,#f5f8ff,#edf4ff);
    border-color:#d7e3fb;
}

.number-chip:nth-child(3n+1){
    color:#c2410c;
    background:linear-gradient(180deg,#fff7ed,#ffedd5);
    border-color:#fed7aa;
}

.number-chip:nth-child(3n+2){
    color:#6d28d9;
    background:linear-gradient(180deg,#faf5ff,#f3e8ff);
    border-color:#e9d5ff;
}

/* Tool / action buttons: brighter, still restrained. */
.btn-primary{
    background:linear-gradient(135deg,#155eef,#5b3fd1);
    box-shadow:0 8px 18px rgba(37,99,235,.16);
}

.btn-primary:hover{
    background:linear-gradient(135deg,#0b57d0,#4c1d95);
}

.btn-outline{
    border-color:#b8c9ea;
    background:#fff;
}

.btn-outline:hover{
    background:linear-gradient(135deg,#eef5ff,#f7f1ff);
}

/* Search controls: friendlier and easier to spot. */
.search-form input,
.search-form select{
    background:linear-gradient(180deg,#fff,#fbfcff);
}

.search-form button{
    min-height:48px;
}

/* Archive/info cards: subtle color bands for scanability. */
.info-card:nth-child(3n+1){
    box-shadow:inset 0 3px 0 #f97316,0 6px 18px rgba(15,23,42,.035);
}

.info-card:nth-child(3n+2){
    box-shadow:inset 0 3px 0 #7c3aed,0 6px 18px rgba(15,23,42,.035);
}

.info-card:nth-child(3n+3){
    box-shadow:inset 0 3px 0 #2563eb,0 6px 18px rgba(15,23,42,.035);
}

.archive-card:hover,
.archive-card.active{
    border-color:#ccd8ed;
    background:linear-gradient(180deg,#ffffff,#f8fbff);
}

/* FAQ rows get a tiny accent on open/focus without becoming busy. */
.faq-item:focus-within{
    border-color:#cfdcff;
    box-shadow:0 8px 20px rgba(37,99,235,.06);
}

.faq-item[open] summary{
    background:linear-gradient(90deg,#f7f9ff,#fcf9ff);
}

/* Footer: introduce restrained color so the dark area feels intentional. */
.site-footer{
    position:relative;
    background:
        radial-gradient(circle at 8% 0%,rgba(37,99,235,.14),transparent 28%),
        radial-gradient(circle at 92% 20%,rgba(124,58,237,.12),transparent 24%),
        #111827;
}

.site-footer::before{
    content:"";
    display:block;
    height:3px;
    background:linear-gradient(90deg,#f97316,#ef4444,#7c3aed,#2563eb,#0f9f95);
    opacity:.9;
}

.footer-trust-card{
    background:linear-gradient(135deg,rgba(37,99,235,.13),rgba(124,58,237,.11));
    border-color:rgba(129,140,248,.22);
}

@media (max-width:768px){
    .content > .card::after{
        left:18px;
        right:18px;
    }
    .section-header h2::before{
        height:19px;
        width:5px;
        margin-right:8px;
    }
    .hero-card{
        box-shadow:0 14px 36px rgba(30,64,175,.15);
    }
}

@media (max-width:480px){
    .site-header::after{height:2px;}
    .section-header h2::before{
        height:17px;
        margin-right:7px;
    }
}

/* ========================================================================
   45. FINAL UX CORRECTIONS - RESULT CARDS, LINKS, ARCHIVES, FOOTER
   ======================================================================== */
/* Result hero: premium neutral score panels; color belongs to the accents,
   not giant red/blue fills. */
.score-card{
    position:relative;
    overflow:hidden;
    background:rgba(255,255,255,.97) !important;
    color:#172033;
    border:1px solid rgba(255,255,255,.72);
    box-shadow:0 14px 34px rgba(12,35,84,.16);
    backdrop-filter:blur(6px);
}
.score-card::before{
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:6px;
    background:linear-gradient(90deg,#f97316,#ef4444);
}
.score-card:last-child::before{
    background:linear-gradient(90deg,#2563eb,#4f46e5);
}
.score-card small{
    color:#46536a !important;
    font-weight:750;
    padding-top:3px;
}
.score-card strong{
    color:#172033 !important;
    text-shadow:none;
}
.score-card:first-child strong{color:#c2410c !important;}
.score-card:last-child strong{color:#2454c5 !important;}
.score-card:first-child small::before,
.score-card:last-child small::before{
    background:#dce5f4 !important;
}

/* Number references: deliberately calm and uniform. */
.number-chip,
.number-chip:nth-child(3n+1),
.number-chip:nth-child(3n+2){
    color:#263449 !important;
    background:#f7f9fc !important;
    border-color:#dfe6ef !important;
}
.number-chip:hover{
    border-color:#bccbe0 !important;
    background:#fff !important;
}

/* Archive cards: ensure labels are always readable, including links. */
.archive-card,
.archive-card:visited{
    color:#243044 !important;
    font-weight:700;
}
.archive-card::after{
    content:"→";
    margin-left:8px;
    color:#7b8ba3;
    font-weight:800;
}
.archive-card:hover::after,
.archive-card.active::after{color:var(--primary);}

/* Make related/tool cards unmistakably clickable without changing structure. */
.related-link-card{
    position:relative;
    cursor:pointer;
    padding-right:42px !important;
}
.related-link-card::after{
    content:"→";
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    color:#8091a9;
    font-size:1.1rem;
    font-weight:800;
    transition:transform .18s ease,color .18s ease;
}
.related-link-card:hover::after,
.related-link-card:focus-visible::after{
    color:#0b57d0;
    transform:translate(3px,-50%);
}
.related-link-label{
    color:#14213d !important;
    font-weight:800;
}
.related-link-desc{
    color:#66758b;
}

/* Text links are visibly identifiable while remaining understated. */
.page-content a:not(.btn):not(.archive-card):not(.related-link-card),
.content > .card a:not(.btn):not(.archive-card):not(.related-link-card){
    color:#0b57d0;
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
    font-weight:600;
}
.page-content a:not(.btn):not(.archive-card):not(.related-link-card):hover,
.content > .card a:not(.btn):not(.archive-card):not(.related-link-card):hover{
    color:#0846a8;
}

/* Footer brand image reads correctly against the dark footer. */
.footer-logo{
    filter:none !important;
    opacity:1;
}
.footer-brand-link{background:transparent;}

@media(max-width:640px){
    .score-card{
        min-height:112px;
        padding:18px 8px;
    }
    .score-card strong{font-size:2.35rem;}
    .related-link-card{padding-right:38px !important;}
    .archive-card{min-height:68px;}
}

/* ========================================================================
   46. FINAL SIMPLIFICATION + RESULT CONSISTENCY + SUBSCRIBER UX
   ======================================================================== */

/* Inline content links: quiet, readable, non-editorial appearance. */
.page-content a:not(.btn):not(.archive-card):not(.related-link-card),
.content > .card a:not(.btn):not(.archive-card):not(.related-link-card),
.content > .hero-card a:not(.btn):not(.archive-card):not(.related-link-card){
    color:#315b8a !important;
    text-decoration:none !important;
    font-weight:400 !important;
    border-bottom:0 !important;
}
.page-content a:not(.btn):not(.archive-card):not(.related-link-card):hover,
.content > .card a:not(.btn):not(.archive-card):not(.related-link-card):hover,
.content > .hero-card a:not(.btn):not(.archive-card):not(.related-link-card):hover{
    color:#173f6b !important;
    text-decoration:none !important;
}

/* The result cards use one calm visual language: cool blue, not warning red. */
.score-card::before,
.score-card:first-child::before,
.score-card:last-child::before{
    background:linear-gradient(90deg,#2563eb,#4f46e5) !important;
}
.score-card:first-child strong,
.score-card:last-child strong{
    color:#2454c5 !important;
}

/* Common Numbers resource card: sophisticated cool accent instead of orange. */
.resource-card-orange{
    color:#3b5ccc !important;
    border-top-color:#5b6ee1 !important;
}

/* Archive browser: a navigation component, not a giant SEO block. */
.archive-browser-intro{
    max-width:900px;
    margin-top:-4px;
    color:var(--text-light);
}
.archive-year-heading{
    margin:28px 0 12px;
    font-size:1rem;
    color:#41516a;
    letter-spacing:.02em;
}
.archive-year-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}
.archive-year-card{
    min-height:54px !important;
    padding:14px 16px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

/* Subscription CTA: visible, valuable, but intentionally compact. */
.alert-signup{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(420px,1.15fr);
    gap:24px;
    align-items:center;
    margin:0 0 24px;
    padding:24px 26px;
    border:1px solid #d8e2f1;
    border-radius:20px;
    background:
        radial-gradient(circle at 92% 18%,rgba(91,110,225,.13),transparent 32%),
        linear-gradient(135deg,#f8fbff,#f6f4ff);
    box-shadow:0 12px 32px rgba(15,23,42,.055);
}
.alert-signup-kicker{
    display:inline-block;
    margin-bottom:6px;
    color:#3154c6;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.alert-signup-copy h2{
    margin:0 0 6px;
    font-size:clamp(1.35rem,2vw,1.7rem);
    letter-spacing:-.02em;
}
.alert-signup-copy p{
    margin:0;
    color:#5d6b80;
    line-height:1.55;
}
.alert-signup-form{min-width:0;}
.alert-phone-row{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:8px;
    align-items:center;
    padding:6px;
    border:1px solid #ced9e8;
    border-radius:15px;
    background:#fff;
    box-shadow:0 7px 18px rgba(15,23,42,.045);
}
.alert-country{
    display:inline-flex;
    align-items:center;
    height:44px;
    padding:0 10px;
    color:#526177;
    font-weight:700;
    border-right:1px solid #e4e9f0;
}
.alert-phone-row input{
    width:100%;
    min-width:0;
    height:44px;
    border:0;
    outline:0;
    background:transparent;
    color:#172033;
}
.alert-phone-row .btn{min-height:44px;padding:10px 15px;border-radius:11px;white-space:nowrap;}
.alert-consent{
    display:flex;
    gap:8px;
    align-items:flex-start;
    margin-top:11px;
    color:#536174;
    font-size:.79rem;
    line-height:1.5;
}
.alert-consent input{margin-top:3px;accent-color:#3154c6;}
.alert-consent a{color:#315b8a;text-decoration:none;font-weight:600;}
.alert-disclaimer{
    margin:7px 0 0;
    color:#738096;
    font-size:.72rem;
    line-height:1.45;
}
.alert-message{min-height:1.2em;margin:6px 0 0;font-size:.8rem;font-weight:700;}
.alert-message.is-success{color:#166534;}
.alert-message.is-error{color:#b42318;}
.alert-phone-row button:disabled{opacity:.65;cursor:wait;}
.alert-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.subscriber-status-page{max-width:900px;margin:0 auto;}

@media(max-width:900px){
    .alert-signup{grid-template-columns:1fr;}
    .archive-year-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:640px){
    .alert-signup{padding:20px 16px;border-radius:16px;gap:16px;}
    .alert-phone-row{grid-template-columns:1fr;gap:7px;padding:8px;}
    .alert-country{height:32px;padding:0 2px;border-right:0;border-bottom:1px solid #e4e9f0;justify-content:flex-start;}
    .alert-phone-row input{height:42px;}
    .alert-phone-row .btn{width:100%;}
    .archive-year-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .archive-year-card{min-height:50px !important;}
}
@media(max-width:380px){
    .archive-year-grid{grid-template-columns:1fr;}
}

.common-round-table.round-first th{background:#2563eb !important;}
.common-round-table.round-second th{background:#4f46e5 !important;}

/* ========================================================================
   22. NAVIGATION + CONTEXTUAL TOOL DISCOVERY
   ======================================================================== */
.main-nav ul{gap:4px;}
.main-nav a,.nav-tools summary{display:flex;align-items:center;gap:7px;border-radius:10px;padding:11px 12px;color:#1e293b;font-size:14px;font-weight:650;text-decoration:none;transition:background .2s ease,color .2s ease,box-shadow .2s ease;}
.main-nav a::after{display:none;}
.main-nav a:hover,.nav-tools summary:hover{background:#f4f7ff;color:#1557c0;}
.main-nav a.active{background:#eef4ff;color:#1557c0;box-shadow:inset 0 0 0 1px rgba(21,87,192,.06);}
.nav-icon{font-size:15px;line-height:1;opacity:.86;}
.nav-tools{position:relative;}
.nav-tools summary{list-style:none;cursor:pointer;user-select:none;}
.nav-tools summary::-webkit-details-marker{display:none;}
.nav-tools[open] summary{background:#eef4ff;color:#1557c0;}
.nav-chevron{font-size:12px;line-height:1;opacity:.68;transition:transform .2s ease;}
.nav-tools[open] .nav-chevron{transform:rotate(180deg);}
.nav-tools-menu{position:absolute;top:calc(100% + 8px);right:0;width:255px;padding:8px;border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:0 18px 45px rgba(15,23,42,.14);z-index:1200;}
.nav-tools-menu a{display:block;padding:11px 12px;border-radius:10px;}
.nav-tools-menu a:hover{background:#f7f9ff;}
.nav-tools-menu strong,.nav-tools-menu small{display:block;}
.nav-tools-menu strong{font-size:.9rem;}
.nav-tools-menu small{margin-top:3px;color:var(--text-light);font-size:.76rem;line-height:1.4;}

.context-tool-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 20px;padding:16px 18px;border:1px solid var(--border);border-left:4px solid #2563eb;border-radius:14px;background:linear-gradient(90deg,rgba(37,99,235,.055),rgba(255,255,255,.96));box-shadow:var(--shadow-sm);}
.context-tool-purple{border-left-color:#7c3aed;background:linear-gradient(90deg,rgba(124,58,237,.055),#fff);}
.context-tool-teal{border-left-color:#0f9f8f;background:linear-gradient(90deg,rgba(15,159,143,.055),#fff);}
.context-tool-orange{border-left-color:#d97706;background:linear-gradient(90deg,rgba(217,119,6,.055),#fff);}
.context-tool-copy{min-width:0;}
.context-tool-eyebrow{display:block;margin-bottom:3px;font-size:.68rem;letter-spacing:.09em;font-weight:800;color:#64748b;}
.context-tool-copy strong{display:block;color:#111827;font-size:1.02rem;line-height:1.3;}
.context-tool-copy>span:last-child{display:block;margin-top:4px;color:#64748b;font-size:.83rem;line-height:1.5;}
.context-tool-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.context-tool-primary,.context-tool-secondary{white-space:nowrap;text-decoration:none!important;border-radius:10px;font-size:.82rem;font-weight:700;padding:10px 13px;}
.context-tool-primary{background:#1557c0;color:#fff;box-shadow:0 6px 16px rgba(21,87,192,.2);}
.context-tool-purple .context-tool-primary{background:#6d28d9;}.context-tool-teal .context-tool-primary{background:#0f766e;}.context-tool-orange .context-tool-primary{background:#b45309;}
.context-tool-secondary{color:#334155;border:1px solid var(--border);background:#fff;}
.context-tool-primary:hover,.context-tool-secondary:hover{transform:translateY(-1px);}

.popular-tools{margin:0 0 26px;padding:20px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(135deg,#fbfdff,#f6f7ff);box-shadow:var(--shadow-sm);}
.popular-tools-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:14px;}
.popular-tools-head h2{margin:4px 0 3px;font-size:1.35rem;}
.popular-tools-head p{margin:0;color:var(--text-light);font-size:.88rem;}
.popular-tools-all{color:#334155;text-decoration:none!important;font-weight:700;font-size:.82rem;white-space:nowrap;}
.popular-tools-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.popular-tool-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:14px;border:1px solid var(--border);border-radius:13px;background:#fff;text-decoration:none!important;box-shadow:0 4px 18px rgba(15,23,42,.035);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.popular-tool-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.08);border-color:#cbd5e1;}
.popular-tool-card strong,.popular-tool-card small{display:block;}.popular-tool-card strong{color:#172033;font-size:.86rem;line-height:1.35;}.popular-tool-card small{margin-top:2px;color:#6b7280;font-size:.72rem;line-height:1.35;}
.popular-tool-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;font-weight:800;font-size:1rem;}.tool-purple .popular-tool-icon{background:#f0e8ff;color:#6d28d9;}.tool-teal .popular-tool-icon{background:#e6f7f4;color:#0f766e;}.tool-orange .popular-tool-icon{background:#fff1db;color:#b45309;}.tool-blue .popular-tool-icon{background:#eaf1ff;color:#1557c0;}
.popular-tool-arrow{color:#94a3b8;font-weight:800;}

.result-tools{display:grid;grid-template-columns:1.1fr 2fr;gap:18px;align-items:center;margin:0 0 22px;padding:18px;border:1px solid #dbe5f5;border-radius:16px;background:linear-gradient(135deg,#f5f9ff,#ffffff);}
.result-tools-copy>span{display:block;font-size:.66rem;font-weight:800;letter-spacing:.1em;color:#5573a9;}.result-tools-copy h2{margin:4px 0 4px;font-size:1.15rem;}.result-tools-copy p{margin:0;font-size:.82rem;color:#64748b;line-height:1.55;}
.result-tools-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}.result-tools-actions a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;border:1px solid #e4eaf4;border-radius:10px;background:#fff;color:#24324a;text-decoration:none;font-size:.8rem;font-weight:700;}.result-tools-actions a:hover{border-color:#b8c9e8;background:#f9fbff;}

@media (max-width:1100px){.main-nav ul{gap:2px;}.main-nav a,.nav-tools summary{padding:10px 8px;font-size:13px;}.popular-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:768px){
 .main-nav a,.nav-tools summary{padding:13px 16px;font-size:15px;border-radius:0;}
 .nav-tools{border-bottom:1px solid var(--border);}.nav-tools summary{width:100%;justify-content:flex-start;}.nav-tools-menu{position:static;width:auto;margin:0 12px 10px;padding:5px;border-radius:10px;box-shadow:none;background:#f8fafc;}.nav-tools-menu a{border-radius:8px;padding:11px 12px;}
 .context-tool-bar{align-items:flex-start;flex-direction:column;gap:13px;padding:15px;}.context-tool-actions{justify-content:flex-start;width:100%;}.context-tool-primary,.context-tool-secondary{white-space:normal;}
 .popular-tools{padding:16px;margin-bottom:20px;}.popular-tools-head{align-items:flex-start;flex-direction:column;gap:8px;}.popular-tools-grid{grid-template-columns:1fr;}
 .result-tools{grid-template-columns:1fr;}.result-tools-actions{grid-template-columns:1fr 1fr;}
}
@media (max-width:480px){.result-tools-actions{grid-template-columns:1fr;}.context-tool-actions{display:grid;grid-template-columns:1fr;width:100%;}.context-tool-primary,.context-tool-secondary{text-align:center;}}

.score-time{display:block;margin-top:12px;font-size:.92rem;font-weight:700;color:rgba(255,255,255,.92);}

.rolling-pagination-actions{display:flex;justify-content:center;margin-top:18px;}
.rolling-pagination-actions .btn{min-width:240px;text-align:center;}

/* ========================================================================
   47. FINAL REQUESTED CORRECTIONS - RESULT HERO + ARCHIVE UX
   ======================================================================== */
/* Keep the two result cards visually identical and keep timings readable. */
.score-card:first-child strong,
.score-card:last-child strong{color:#2454c5 !important;}
.score-time{color:#172033 !important;background:transparent !important;text-shadow:none !important;}

/* Keep F/R and S/R compact on narrow screens exactly as requested. */
@media(max-width:640px){
    .score-card small{font-size:.86rem;line-height:1.25;}
    .score-time{font-size:.8rem !important;font-weight:700 !important;margin-top:8px !important;color:#172033 !important;}
}

/* Rolling archive: button stays adjacent to the table rather than far below. */
.rolling-table-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid #e6ebf3;
}
.rolling-status{
    color:#5f6d82;
    font-size:.9rem;
    font-weight:650;
}
.rolling-load-more{
    min-width:240px;
}
.rolling-load-more.is-loading{
    opacity:.72;
    cursor:wait;
}
.archive-inline-intro{margin-top:-4px;color:#64748b;}
@media(max-width:640px){
    .rolling-table-footer{flex-direction:column;align-items:stretch;}
    .rolling-load-more{width:100%;min-width:0;}
    .rolling-status{text-align:center;}
}

/* Final client-requested mobile-first date emphasis.
   The date is a primary answer cue, while the existing result/SEO hierarchy remains intact. */
.hero-date-emphasis{
    display:inline-flex !important;
    align-items:center;
    gap:9px;
    width:auto;
    min-height:42px;
    padding:8px 16px !important;
    margin:0 0 14px !important;
    border:1.5px solid rgba(255,255,255,.72) !important;
    border-radius:999px;
    background:rgba(255,255,255,.12) !important;
    color:#fff !important;
    box-shadow:0 8px 22px rgba(0,0,0,.10);
    backdrop-filter:blur(8px);
    font-size:1rem;
    letter-spacing:.01em;
}
.hero-date-emphasis strong{
    color:#fff !important;
    font-weight:800;
}
.hero-date-icon{font-size:1.05em;line-height:1;}
.hero-date-day{
    padding-left:9px;
    margin-left:2px;
    border-left:1px solid rgba(255,255,255,.35);
    font-weight:650;
}
@media(max-width:640px){
    .hero-date-emphasis{
        width:100%;
        justify-content:center;
        min-height:48px;
        padding:9px 14px !important;
        margin-bottom:15px !important;
        font-size:1.05rem;
    }
    .hero-date-day{font-size:.92em;}
}

/* Final hero label correction: use the compact F/R and S/R labels only. */
.score-card small::before,
.score-card:first-child small::before,
.score-card:last-child small::before{display:none !important;content:none !important;}
.score-card small{color:#46536a !important;}
.score-time{display:none !important;}

/* ========================================================================
   40. COMPACT ALERT + RESULT DATE SEARCH REFINEMENT
   ======================================================================== */
.alert-signup{
    grid-template-columns:minmax(0,1.05fr) minmax(460px,1.25fr);
    gap:18px;
    margin-bottom:20px;
    padding:17px 20px;
    border-radius:16px;
    box-shadow:0 8px 24px rgba(15,23,42,.045);
}
.alert-signup-copy h2{font-size:clamp(1.15rem,1.65vw,1.42rem);margin-bottom:4px}
.alert-signup-copy p{font-size:.88rem;line-height:1.42}
.alert-signup-kicker{margin-bottom:4px;font-size:.66rem}
.alert-phone-row{padding:4px;border-radius:13px;gap:6px}
.alert-country{height:40px;padding:0 9px;font-size:.88rem}
.alert-phone-row input{height:40px;font-size:.95rem}
.alert-phone-row .btn{min-height:40px;padding:8px 14px;font-size:.88rem}
.alert-consent{margin-top:7px;font-size:.72rem;line-height:1.35}
.alert-message{margin-top:4px;font-size:.75rem}

.result-date-search{
    position:relative;
    overflow:hidden;
    padding:24px 26px;
    background:linear-gradient(135deg,#ffffff 0%,#f8fbff 58%,#f7f3ff 100%);
}
.result-date-search::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:5px;
    background:linear-gradient(180deg,#2563eb,#7c3aed);
}
.result-date-search-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:16px;
}
.result-date-search-head h2{
    margin:2px 0 4px;
    color:var(--text-strong);
    font-size:clamp(1.25rem,2vw,1.62rem);
    letter-spacing:-.02em;
}
.result-date-search-head p{margin:0;color:var(--text-light);line-height:1.55}
.result-date-search-kicker{
    display:inline-block;
    color:#3154c6;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.result-date-search-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:46px;
    height:46px;
    border-radius:14px;
    background:#eef4ff;
    color:#3154c6;
    font-size:24px;
    box-shadow:inset 0 0 0 1px #dce7fb;
}
.result-date-search-form{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
}
.result-date-input-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:52px;
    padding:0 14px;
    border:1px solid #d8e0ec;
    border-radius:13px;
    background:#fff;
    box-shadow:0 5px 15px rgba(15,23,42,.035);
}
.result-date-input-icon{font-size:18px;line-height:1}
.result-date-input-wrap input{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    color:var(--text-strong);
    font:inherit;
    font-size:1rem;
}
.result-date-input-wrap:focus-within{
    border-color:#8bb2f3;
    box-shadow:0 0 0 4px rgba(37,99,235,.08);
}
.result-date-search-button{min-height:52px;padding:0 20px;white-space:nowrap}

@media(max-width:900px){
    .alert-signup{grid-template-columns:1fr;gap:10px}
}
@media(max-width:640px){
    .alert-signup{padding:15px 14px;border-radius:14px;gap:11px}
    .alert-signup-copy h2{font-size:1.18rem}
    .alert-signup-copy p{font-size:.82rem}
    .alert-phone-row{grid-template-columns:auto minmax(0,1fr);padding:5px}
    .alert-country{height:38px;border-bottom:0;border-right:1px solid #e4e9f0}
    .alert-phone-row input{height:38px}
    .alert-phone-row .btn{grid-column:1/-1;width:100%;min-height:40px}
    .alert-consent{font-size:.7rem}
    .result-date-search{padding:20px 18px}
    .result-date-search-head{align-items:flex-start;margin-bottom:13px}
    .result-date-search-icon{width:40px;height:40px;border-radius:12px;font-size:21px}
    .result-date-search-head p{font-size:.9rem}
    .result-date-search-form{grid-template-columns:1fr;gap:9px}
    .result-date-search-button{width:100%}
}

/* ========================================================================
   COMMON NUMBERS PAGE — PREMIUM REFERENCE PRESENTATION v2
   Calm, premium palette: ink + emerald + violet. No blue-heavy gradients.
   ======================================================================== */
.common-reference-hero{
    margin:0 0 24px;
    border-radius:24px;
    overflow:hidden;
    background:#101828;
    box-shadow:0 18px 42px rgba(16,24,40,.14);
    color:#fff;
    position:relative;
}
.common-reference-hero::before,
.common-reference-hero::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    border:1px solid rgba(255,255,255,.08);
}
.common-reference-hero::before{width:320px;height:320px;right:-150px;top:-185px;background:rgba(124,58,237,.12);}
.common-reference-hero::after{width:240px;height:240px;left:-135px;bottom:-165px;background:rgba(16,185,129,.08);}
.common-reference-hero-inner{
    position:relative;
    z-index:1;
    padding:34px 34px 32px;
    text-align:left;
}
.common-reference-date{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 18px;
    margin-bottom:18px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:999px;
    background:rgba(255,255,255,.07);
    box-shadow:inset 0 1px rgba(255,255,255,.08);
    color:#fff;
    font-size:1.05rem;
}
.common-reference-date span{font-size:1.1rem;}
.common-reference-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 16px;
    margin-bottom:14px;
    border-radius:999px;
    background:#f4b740;
    color:#172033;
    box-shadow:0 7px 18px rgba(0,0,0,.12);
    font-size:.8rem;
    font-weight:800;
    letter-spacing:.08em;
}
.common-reference-hero h1{
    margin:0 0 10px;
    color:#fff;
    font-size:clamp(2rem,3.2vw,3rem);
    line-height:1.08;
    letter-spacing:-.035em;
}
.common-reference-subtitle{
    max-width:780px;
    margin:0 0 10px;
    color:#f3f5f9;
    font-size:1.08rem;
    line-height:1.65;
}
.common-reference-note{
    max-width:820px;
    margin:0;
    color:#bcc5d4;
    font-size:.93rem;
    line-height:1.55;
}

.common-table-card{
    width:min(100%,1160px);
    margin:26px auto;
    padding:18px;
    border:1px solid #e4e7ec;
    border-radius:22px;
    background:#ffffff;
    box-shadow:0 14px 34px rgba(16,24,40,.06);
}
.common-date-bar{
    margin:0 0 16px;
    padding:12px 16px;
    border-radius:14px;
    background:#111827;
    color:#fff;
    text-align:center;
    font-weight:750;
    letter-spacing:.01em;
}
.common-round-label{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:12px 16px;
    border-radius:16px 16px 0 0;
    color:#fff;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.common-round-table{
    width:100%;
    min-width:0;
    table-layout:fixed;
    margin:0 0 18px;
    border-collapse:separate;
    border-spacing:0;
    overflow:hidden;
    background:#fff;
    border:1px solid #e8eaee;
    border-top:0;
    border-radius:0 0 16px 16px;
    box-shadow:0 6px 18px rgba(16,24,40,.045);
}
.common-round-table th,
.common-round-table td{
    text-align:center;
    vertical-align:middle;
    white-space:normal;
    overflow-wrap:anywhere;
}
.common-round-table th{
    padding:13px 10px;
    background:#f6f7f9;
    color:#667085;
    font-weight:800;
    letter-spacing:.01em;
}
.common-round-table td{
    padding:20px 10px;
    color:#101828;
    font-weight:800;
    font-size:1.5rem;
    border-top:1px solid #eceff2;
}
.common-round-table.round-first + .common-round-label{margin-top:4px;}
.common-table-card > .common-round-label:first-of-type{background:#0f766e;}
.common-table-card > .common-round-label:nth-of-type(2){background:#6d28d9;}
.common-table-card > .common-round-label::before{
    content:"";
    width:9px;
    height:9px;
    margin-right:9px;
    border-radius:50%;
    background:rgba(255,255,255,.84);
}

@media (max-width:768px){
    .common-reference-hero{border-radius:18px;margin-bottom:18px;}
    .common-reference-hero-inner{padding:24px 18px 22px;}
    .common-reference-date{font-size:.95rem;padding:9px 14px;margin-bottom:15px;}
    .common-reference-badge{font-size:.68rem;padding:8px 12px;}
    .common-reference-hero h1{font-size:1.9rem;}
    .common-reference-subtitle{font-size:.98rem;line-height:1.55;}
    .common-reference-note{font-size:.86rem;}
    .common-table-card{padding:12px;border-radius:18px;margin:18px auto;}
    .common-date-bar{padding:10px 12px;font-size:.88rem;margin-bottom:12px;}
    .common-round-label{min-height:46px;padding:10px 12px;font-size:.78rem;}
    .common-round-table th{padding:10px 6px;font-size:.78rem;}
    .common-round-table td{padding:16px 6px;font-size:1.15rem;}
}

/* ========================================================================
   COMMON NUMBERS FINAL VISUAL CORRECTION
   Keep the global blue visual language; improve contrast and readability.
   ======================================================================== */
.common-reference-hero{
    background:linear-gradient(135deg,#1557c0 0%,#1468df 52%,#3949d8 100%);
    color:#fff;
}
.common-reference-hero::before{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.11);
}
.common-reference-hero::after{
    background:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.08);
}
.common-reference-date{
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.38);
    color:#fff;
}
.common-reference-badge{
    background:#fff;
    color:#1557c0;
    box-shadow:0 8px 18px rgba(0,0,0,.12);
}

.common-table-card{
    background:#f8fbff;
    border-color:#dce6f5;
    box-shadow:0 12px 28px rgba(21,87,192,.08);
}
.common-date-bar{
    background:#eaf2ff;
    color:#16335f;
    border:1px solid #cfe0fb;
    box-shadow:none;
}
.common-round-label,
.common-table-card > .common-round-label:first-of-type,
.common-table-card > .common-round-label:nth-of-type(2){
    background:#1f5fd5;
    color:#fff;
    border-radius:14px 14px 0 0;
}
.common-round-table{
    border-color:#dce6f5;
    box-shadow:0 6px 18px rgba(21,87,192,.055);
}
.common-round-table th,
.common-table-card .common-round-table th{
    background:#f3f7fd;
    color:#31445f;
    border-bottom:1px solid #dfe7f2;
}
.common-round-table td,
.common-table-card .common-round-table td{
    background:#fff;
    color:#111827;
    border-top:1px solid #e7edf5;
}
.common-table-card .common-round-table tr:last-child td:first-child{border-bottom-left-radius:14px;}
.common-table-card .common-round-table tr:last-child td:last-child{border-bottom-right-radius:14px;}

@media (max-width:768px){
    .common-reference-hero-inner{padding:22px 16px 20px;}
    .common-reference-hero h1{font-size:1.82rem;}
    .common-reference-subtitle{font-size:.96rem;}
    .common-reference-note{font-size:.84rem;}
    .common-table-card{padding:10px;background:#f8fbff;}
    .common-date-bar{font-size:.86rem;padding:10px 12px;}
    .common-round-label{min-height:44px;padding:10px 12px;font-size:.76rem;}
    .common-round-table th{font-size:.8rem;padding:10px 5px;}
    .common-round-table td{font-size:1.16rem;padding:16px 5px;}
}

/* ========================================================================
   COMMON NUMBERS — FINAL PREMIUM BLUE CORRECTION
   Restore the same blue family used by the rest of the site and improve
   contrast in the reference-number panels. No black/charcoal hero.
   ======================================================================== */
.common-reference-hero{
    background:linear-gradient(135deg,#1557c0 0%,#1669dc 58%,#3157d9 100%);
    color:#fff;
    box-shadow:0 16px 36px rgba(21,87,192,.16);
}
.common-reference-hero::before{
    background:rgba(255,255,255,.07);
    border-color:rgba(255,255,255,.12);
}
.common-reference-hero::after{
    background:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.08);
}
.common-reference-date{
    background:rgba(255,255,255,.13);
    border-color:rgba(255,255,255,.38);
    color:#fff;
}
.common-reference-badge{
    background:#fff;
    color:#1557c0;
    box-shadow:0 7px 16px rgba(0,0,0,.10);
}

/* Make the reference panel feel like the site's result system, not a
   separate color theme. */
.common-table-card{
    width:min(100%,1160px);
    margin:24px auto;
    padding:16px;
    border:1px solid #dbe5f3;
    border-radius:22px;
    background:#f8fbff;
    box-shadow:0 12px 30px rgba(21,87,192,.07);
}
.common-date-bar{
    margin:0 0 14px;
    padding:11px 16px;
    border-radius:12px;
    background:#eaf2ff;
    border:1px solid #d3e2f8;
    color:#17345d;
    text-align:center;
    font-weight:800;
    letter-spacing:.01em;
}
.common-round-label,
.common-table-card > .common-round-label:first-of-type,
.common-table-card > .common-round-label:nth-of-type(2){
    min-height:48px;
    padding:11px 16px;
    border-radius:14px 14px 0 0;
    background:#1f5fd5;
    color:#fff;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.common-table-card > .common-round-label::before{
    width:8px;
    height:8px;
    margin-right:8px;
    background:rgba(255,255,255,.9);
}
.common-round-table,
.common-table-card .common-round-table{
    width:100%;
    min-width:0;
    table-layout:fixed;
    margin:0 0 18px;
    border-collapse:separate;
    border-spacing:0;
    overflow:hidden;
    background:#fff;
    border:1px solid #dce6f4;
    border-top:0;
    border-radius:0 0 14px 14px;
    box-shadow:0 5px 16px rgba(17,24,39,.045);
}
.common-round-table th,
.common-table-card .common-round-table th{
    padding:12px 8px;
    background:#f1f6fd;
    color:#2f415b;
    border-bottom:1px solid #dfe7f2;
    text-align:center;
    vertical-align:middle;
    font-weight:800;
    font-size:.95rem;
}
.common-round-table td,
.common-table-card .common-round-table td{
    padding:18px 8px;
    background:#fff;
    color:#111827;
    border-top:0;
    text-align:center;
    vertical-align:middle;
    font-weight:800;
    font-size:1.45rem;
}
.common-table-card .common-round-table tr:last-child td:first-child{border-bottom-left-radius:14px;}
.common-table-card .common-round-table tr:last-child td:last-child{border-bottom-right-radius:14px;}

@media (max-width:768px){
    .common-reference-hero-inner{padding:22px 16px 20px;}
    .common-reference-date{font-size:.94rem;padding:9px 13px;margin-bottom:13px;}
    .common-reference-badge{font-size:.68rem;padding:8px 12px;margin-bottom:11px;}
    .common-reference-hero h1{font-size:1.82rem;}
    .common-reference-subtitle{font-size:.95rem;line-height:1.52;}
    .common-reference-note{font-size:.84rem;}
    .common-table-card{padding:9px;margin:16px auto;border-radius:18px;}
    .common-date-bar{font-size:.84rem;padding:9px 10px;margin-bottom:10px;}
    .common-round-label,
    .common-table-card > .common-round-label:first-of-type,
    .common-table-card > .common-round-label:nth-of-type(2){min-height:42px;padding:9px 10px;font-size:.74rem;}
    .common-round-table th{padding:9px 4px;font-size:.78rem;}
    .common-round-table td{padding:15px 4px;font-size:1.08rem;}
}