/* Styles for `landing.html`, loaded after `app.css` so the shared tokens and
 * components are already in scope. Rules written the same way in three or
 * more pages belong in `app.css` instead: `tests/test_shared_styles.py`
 * fails when one is copied that far.
 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.page-content {
    padding: 22px 22px 16px;
    width: 100%;
}
.page-header {
    text-align: left;
    margin-bottom: 16px;
}
.page-header p {
    color: #9aa2af;
    margin: 0;
    font-size: 1.1rem;
}
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}
.special-card-wrap {
    display: none;
}
.special-card {
    border-color: #d4a54a;
    background: linear-gradient(180deg, #181c24 0%, #12151b 100%);
}
body.light-mode .special-card {
    border-color: #4338ca;
    background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 100%);
}
.section-title {
    grid-column: 1 / -1;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4b5563;
    font-family: 'IBM Plex Mono', monospace;
    padding: 10px 0 4px;
    border-bottom: 1px solid #252a35;
    margin-bottom: 2px;
}
body.light-mode .section-title { color: #9ca3af; border-bottom-color: #d7dce6; }
.card {
    background: #12151b;
    border: 1px solid #252a35;
    border-radius: 2px;
    padding: 14px 12px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.card:hover {
    background: #181c24;
    border-color: #d4a54a;
}
body.light-mode .card {
    background: #ffffff;
    border-color: #d7dce6;
}
body.light-mode .card:hover {
    background: #f8faff;
    border-color: #4338ca;
}
.card-icon {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    color: #d4a54a;
}
body.light-mode .card-icon { color: #4338ca; }
.card-icon svg { width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.card h2 {
    margin: 0;
    font-size: 0.98rem;
}
.card p {
    margin: 0;
    font-size: 0.84rem;
    color: #aeb5c1;
}
body.light-mode .card p { color: #4b5563; }
@media (max-width: 700px) {
    .page-content {
        padding: 14px 12px 10px;
    }
}