html, body { height: 100%; margin: 0; }
body { 
    background-color: #FBE383; 
    font-family: sans-serif;
}
/* LOGO */
.header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    text-align: center;
    
    text-transform: uppercase;
    margin-bottom: -20px;
}
    
.header h1 {
    font-family: 'Space Grotesk', sans-serif;
    color: #A45A00;
    font-size: 48px;
    line-height: 0.8;
    grid-column: 2; 
}
.header h1 b {
    color: #000;
    font-size: 60px;
}

.header h1 i {
    font-size: 30px;
    font-style: normal;
    color: #764100;
}
.header h1 i b {
    font-size: 40px;
}

.header h2 {
    grid-column: 3;
    color: #000;
    text-align: left;
    margin-left: 1rem;
    margin-top: 2rem;
}

/* LOGO IMAGE */
.logo { 
    display: block; 
    max-height: 30%; 
    max-width: 100%; 
    margin: 0 auto;
}

/* CONTENT */
.content {
    color: #000;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 80%;
    margin: 0 auto;
}


.card {
    padding: 1rem;    
}

/* Divider between columns (desktop) */
.content .card + .card {
    position: relative;
    margin-left: 1rem;
    padding-left: 1rem;
}
.content .card + .card::before {
    content: "";
    position: absolute;
    left: 0;              /* at the inner edge */
    top: 15%;             /* shorter vertical rule */
    height: 70%;
    width: 1px;
    background: #A45A00;  /* matches brand tone */
}

ul.tools-list { padding-left: 1.25em; }         /* tweak indent to taste */
ul.tools-list li::marker { content: "– "; }     /* en dash; use "-" if you insist */

ul.tools-list li {
    font-size: 1.2rem;
}

/* Ensure description goes below floated badge */
ul.tools-list li small { display: block; clear: both; margin-top: 0.25rem; }

/* BADGES */
.badge {
    float: right;
    display: inline-block;
    padding: 0.15rem 0.45rem;
    font-size: 0.7rem;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
    color: #FFF !important;
    text-decoration: none;
    vertical-align: top;
}

.badge-blue {
    background: #1e40af; /* blue-800 */
    color: #fff;
}

@media (max-width: 900px) {
    .content {
        grid-template-columns: 1fr;
    }
    /* Switch to horizontal divider when stacked */
    .content .card + .card {
        margin-left: 0;
        padding-left: 1rem; /* keep consistent padding */
        border-top: 1px solid #A45A00;
        margin-top: 0.5rem;
        padding-top: 0.75rem;
    }
    .content .card + .card::before { display: none; }
    /* On small screens, let the badge wrap and align left */
    .tools-list .badge {
        float: none;
        margin-left: 1rem;
    }
}


/* GLOBAL LINK COLOR */
a, a:visited { 
    color: #764100;
}
a:hover { color: #764100; }


/* LINKS */
a.header-link { display: block; }
a.header-link:hover { text-decoration: underline; }
a.header-link > h1 { color: #000 !important; text-align: center; margin: 0.5rem 0 0; }