/* ==========================================================================
   GERMAN-A1-1000-MOST-COMMON-WORDS.CSS — scoped styles for german-a1-1000-most-common-words.html, the 1000-word
   reference organized by grammatical category instead of alphabetically.
   .card/.hub-tag-badge/.badge-a1/.level-section-banner-card are inherited
   from see-test.css. Everything here is specific to this page: the hero,
   the category quick-nav chips, and the empty word-grid placeholders
   (auto-hide the "coming soon" hint once real word tiles are added later,
   via the :empty selector — no markup change needed at that point).

   This file also carries the "modern Bauhaus" redesign applied to
   a1-start.html/german-a1-stories-path-story-1.html/german-a1-practice-story-lesson.html: it redeclares the
   shared design tokens (--bg/--surface/--ink/--accent/--gold/--line/
   --serif/--color-*) with the same values those pages use, plus the same
   redesigned navbar. Since this stylesheet only ever loads on this one
   page, every shared component that reads those tokens (.card, .hl-base,
   .level-section-banner-card) picks up the new palette here only — no
   other page is affected. See german-a1-stories-path-story-1.css for the fuller rationale.
   ========================================================================== */

:root {
    --bg: #f7f2e7;
    --surface: #ffffff;
    --surface-2: #fbf7ee;
    --ink: #191726;
    --ink-soft: #5a5470;
    --ink-faint: #9089a3;
    --accent: #e0432b;
    --accent-2: #c23621;
    --accent-soft: rgba(224, 67, 43, 0.12);
    --gold: #b4870a;
    --gold-soft: rgba(239, 176, 0, 0.18);
    --line: #e7dec7;

    --shadow-sm: 0 1px 2px rgba(25, 23, 38, 0.06), 0 1px 1px rgba(25, 23, 38, 0.04);
    --shadow-md: 0 10px 24px -8px rgba(25, 23, 38, 0.16), 0 2px 8px -2px rgba(25, 23, 38, 0.06);
    --shadow-lg: 0 0 0 1px rgba(25, 23, 38, 0.04), 0 16px 40px -16px rgba(224, 67, 43, 0.28);

    --serif: "Futura", "Avenir Next", Avenir, "Century Gothic", system-ui, sans-serif;
    --line-strong: #d8cba8;
    --accent-glow: rgba(224, 67, 43, 0.45);
    --accent-glow-hover: rgba(224, 67, 43, 0.6);

    /* --- A1 six-topic palette (Bauhaus retint, matches the other redesigned pages) --- */
    --color-nom: #1d5fa6; --color-nom-bg: #e5eef8;
    --color-acc: #e0432b; --color-acc-bg: #fbe7e3;
    --color-irr: #b4870a; --color-irr-bg: #faf1d6;
    --color-coo: #0f7168; --color-coo-bg: #e2f2f0;
    --color-sub: #6c4ba6; --color-sub-bg: #eee8f7;
    --color-neg: #b8355f; --color-neg-bg: #f8e5eb;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #131220;
        --surface: #1c1a2c;
        --surface-2: #211f34;
        --ink: #f3eee1;
        --ink-soft: #b3abc9;
        --ink-faint: #867f9c;
        --accent: #ff5b41;
        --accent-2: #ff7b62;
        --accent-soft: rgba(255, 91, 65, 0.16);
        --gold: #ffcb3d;
        --gold-soft: rgba(255, 203, 61, 0.18);
        --line: #33304a;
        --line-strong: #413c5c;
        --accent-glow: rgba(255, 91, 65, 0.4);
        --accent-glow-hover: rgba(255, 91, 65, 0.55);

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 10px 28px -10px rgba(0, 0, 0, 0.55);
        --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 16px 44px -16px rgba(255, 91, 65, 0.35);

        --color-nom: #5b98e8; --color-nom-bg: rgba(91, 152, 232, 0.16);
        --color-acc: #ff5b41; --color-acc-bg: rgba(255, 91, 65, 0.16);
        --color-irr: #ffcb3d; --color-irr-bg: rgba(255, 203, 61, 0.18);
        --color-coo: #2fb6a8; --color-coo-bg: rgba(47, 182, 168, 0.16);
        --color-sub: #9a7bd6; --color-sub-bg: rgba(154, 123, 214, 0.18);
        --color-neg: #e06a94; --color-neg-bg: rgba(224, 106, 148, 0.18);
    }
}

/* ================= NAVBAR (redesigned, scoped to this page only) =================
   Identical to german-a1-stories-path-story-1.css's navbar — see-test.css's shared .navbar/
   .brand-box/.dropdown-item rules still exist and are used by every other
   page unchanged; these selectors only apply here because this file is
   only ever linked from german-a1-1000-most-common-words.html. */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.brand-mark {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
}

.brand-word {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    color: var(--ink);
}

.brand-word b {
    color: var(--accent);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.nav-links > a {
    font-family: var(--mono);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    padding: 9px 14px;
    border-radius: 8px;
    color: var(--ink-soft);
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-links > a:hover {
    background: var(--surface-2);
    color: var(--ink);
}

.navbar .dropdown-item {
    position: relative;
}

.navbar .dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 9px 14px;
    border-radius: 8px;
    color: var(--ink-soft);
    text-decoration: none;
    border: none;
    background: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.navbar .dropdown-trigger:hover,
.navbar .dropdown-item.open .dropdown-trigger {
    background: var(--surface-2);
    color: var(--ink);
}

.navbar .dropdown-trigger.active {
    color: var(--accent);
}

.navbar .caret {
    transition: transform 0.18s ease;
    font-size: 0.7em;
}

.navbar .dropdown-item.open .caret {
    transform: rotate(180deg);
}

.navbar .dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 230px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    padding: 14px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
    overflow: hidden;
}

/* Vibrant Bauhaus accent strip across the top of the popup — same three
   primaries used throughout the site's topic-color system (matches
   german-courses-page.html). */
.navbar .dropdown-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--gold), var(--color-nom));
}

.navbar .dropdown-item.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.navbar .dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--ink-soft);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.navbar .dropdown-menu a:hover {
    background: var(--surface-2);
    color: var(--ink);
    transform: translateX(2px);
}

/* --- Language flag swatches + "Soon" badges (matches german-courses-page.html) --- */
.dropdown-flag {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.15s ease;
}

.dropdown-flag-es {
    background: linear-gradient(to bottom, #c60b1e 0 25%, #ffc400 25% 75%, #c60b1e 75% 100%);
}

.dropdown-flag-fr {
    background: linear-gradient(to right, #0055a4 0 33.33%, #ffffff 33.33% 66.66%, #ef4135 66.66% 100%);
}

.navbar .dropdown-menu a:hover .dropdown-flag-es {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 3px var(--color-acc-bg);
}

.navbar .dropdown-menu a:hover .dropdown-flag-fr {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 3px var(--color-nom-bg);
}

.dropdown-lang-name {
    flex: 1;
}

.dropdown-soon-badge {
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gold);
    background: var(--gold-soft);
    padding: 3px 7px;
    border-radius: 999px;
    flex-shrink: 0;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.nav-toggle span {
    width: 22px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 860px) {
    .nav-links {
        position: fixed;
        inset: 60px 0 auto 0;
        background: var(--surface);
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-md);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
        gap: 2px;
    }

    .nav-links.open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-links > a,
    .navbar .dropdown-trigger {
        width: 100%;
    }

    .navbar .dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        padding-left: 14px;
        margin-top: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }

    /* The gradient strip is positioned relative to the popup's own box —
       once that box goes position:static for the mobile stacked layout,
       there's no floating panel left for it to sit across, so drop it. */
    .navbar .dropdown-menu::before {
        display: none;
    }

    .navbar .dropdown-item.open .dropdown-menu {
        display: flex;
    }

    .nav-toggle {
        display: flex;
    }
}

.a1w-page {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 88px 16px 80px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- Back-to-A1-start link: same "back to X" pattern used by .gl-back-link
   on the chapter/lesson pages (grammar-lesson.css), scoped here since this
   page doesn't load that stylesheet. --- */
.a1w-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    text-decoration: none;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 999px;
    padding: 6px 16px 6px 6px;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.a1w-back-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--accent);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.a1w-back-link:hover {
    background: var(--accent);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.a1w-back-link:hover .a1w-back-link-icon {
    transform: translateX(-2px);
}

/* --- Hero: two soft Bauhaus shapes echoed from the other redesigned
   pages, left-aligned like them (rather than the previous centered
   layout), with the "Level A1" badge flowing inline above the headline
   instead of floating in the card's corner. --- */
.a1w-hero-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    text-align: left;
    padding: 56px 32px 40px;
    border-radius: 26px;
    box-shadow: var(--shadow-lg);
}

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

.a1w-hero-card::before {
    width: 270px;
    height: 270px;
    right: -95px;
    top: -110px;
    background: radial-gradient(circle at 30% 30%, var(--gold), transparent 70%);
    opacity: 0.5;
}

.a1w-hero-card::after {
    width: 180px;
    height: 180px;
    right: 55px;
    top: 120px;
    border: 25px solid var(--color-nom);
    opacity: 0.14;
}

.a1w-hero-card > .card-badge {
    position: static;
    display: inline-flex;
    margin: 0 0 14px;
}

.a1w-hero-card h1 {
    font-family: var(--serif);
    font-size: clamp(1.7rem, 4.2vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.08;
    text-wrap: balance;
    color: var(--ink, #1e293b);
    margin: 0 0 10px;
}

.a1w-hero-sub {
    color: var(--ink-soft, #475569);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 620px;
    margin: 0 0 22px;
}

.a1w-hero-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.a1w-hero-link {
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--ink);
    text-decoration: none;
    padding: 7px 13px;
    border-radius: 999px;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.a1w-hero-link:hover {
    transform: translateY(-1px);
    background: var(--ink);
    color: var(--bg);
}

/* The shared .card.level-section-banner-card (see-test.css) centers its
   contents for the curriculum-hub pickers it was designed for — on this
   page it wraps every category section, which the redesign renders
   left-aligned like every other card. Its h3/p rules use !important, so
   font-weight/margin need !important too to actually win. */
.a1w-page .card.level-section-banner-card {
    display: block;
    text-align: left;
    padding: 26px;
    border-radius: 20px;
}

.a1w-page .card.level-section-banner-card h3 {
    font-weight: 800 !important;
    margin: 12px 0 8px !important;
}

.a1w-page .card.level-section-banner-card p {
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.6;
    max-width: none;
    margin: 0;
}

.a1w-page .level-section-banner-card > .hub-tag-badge {
    position: static;
    display: inline-flex;
    margin: 0 0 14px;
}

/* --- Category sections: .level-section-banner-card already supplies the
   badge/heading/description look; this page just adds the placeholder
   word-grid beneath each one. --- */
.a1w-word-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(8, auto);
    grid-auto-flow: row;
    gap: 10px;
    margin-top: 16px;
    min-height: 64px;
}

@media (max-width: 700px) {
    .a1w-word-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: none;
        grid-auto-flow: row;
    }
}

.a1w-word-grid:empty {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--line, #e2e8f0);
    border-radius: 14px;
    background: var(--surface-2, #f8fafc);
}

.a1w-word-grid:empty::after {
    content: "Words coming soon";
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-faint, #94a3b8);
}

/* --- Pagination: only added (by german-a1-1000-most-common-words.js) to grids with more
   than 40 tiles (5 columns x 8 rows) — click-through instead of
   letting the grid overflow the page with extra implicit columns. --- */
.a1w-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 14px;
}

.a1w-page-btn {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--line-strong);
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.a1w-page-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: var(--accent);
}

.a1w-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.a1w-page-indicator {
    font-family: var(--mono);
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ink-soft, #475569);
    font-variant-numeric: tabular-nums;
}

/* --- Word tiles: each entry gets its own small card (German term on
   top, translation below) instead of the flat inline chips borrowed
   from the letter-course scrolling ticker — much easier to scan once
   a category holds dozens of words in a static grid instead of a
   moving marquee. --- */
.a1w-word-tile[hidden] {
    display: none;
}

.a1w-word-tile:not([hidden]) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    height: 64px;
    box-sizing: border-box;
    padding: 11px 14px;
    background: var(--surface, #ffffff);
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 12px;
    box-shadow: var(--shadow-sm, none);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.a1w-word-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, none);
    border-color: var(--accent);
}

/* Single-line, ellipsis-truncated — keeps every tile the exact same
   size/ratio (matching the Adjectives grid, whose short words/glosses
   never needed wrapping) instead of longer nouns/verbs stretching their
   row taller than the rest of the grid. */
.a1w-tile-de {
    font-family: var(--serif);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink, #1e293b);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.a1w-tile-en {
    font-size: 0.76rem;
    color: var(--ink-soft, #475569);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Reference tables: for categories (like Pronouns & Possessive
   Articles) whose content is a grammatical paradigm rather than a set
   of standalone vocabulary tiles, so a table reads better than a grid
   of word chips. --- */
.a1w-ref-tables {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.a1w-ref-tables h4 {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink, #1e293b);
    margin: 16px 0 0;
}

.a1w-ref-tables h4:first-child {
    margin-top: 0;
}

.a1w-ref-note {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--ink-soft, #475569);
    margin: 0;
}

.a1w-ref-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--line, #e2e8f0);
}

.a1w-ref-table {
    width: 100%;
    min-width: 360px;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface, #ffffff);
}

.a1w-ref-table th,
.a1w-ref-table td {
    padding: 9px 14px;
    text-align: left;
    border-bottom: 1px solid var(--line, #e2e8f0);
}

.a1w-ref-table th {
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-faint, #94a3b8);
    background: var(--surface-2, #f8fafc);
}

.a1w-ref-table td {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ink-soft, #475569);
    font-variant-numeric: tabular-nums;
}

.a1w-ref-table tr:last-child td {
    border-bottom: none;
}

.a1w-ref-table tr:hover td {
    background-color: var(--surface-2, #f8fafc);
}

/* Case-as-row tables (Der-/Ein-Words): a labeled case column plus a
   highlighted cell for whichever form actually changes from nominative,
   matching the same case-tag/highlight-acc convention already used on
   declension-table.html. */
.a1w-ref-table td.a1w-case-tag {
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--ink-faint, #94a3b8);
}

.a1w-ref-table td.a1w-highlight-acc {
    background-color: var(--color-acc-bg, #e7eff8);
    color: var(--color-acc, #3b82c4);
    font-weight: 700;
    border-radius: 4px;
}

/* --- Numbers 1-100 diagram: small pill "chips" for the base numbers
   (1-20, the even tens, hundert) and for the ordered 1-10 strip below;
   the even tens get a tinted background since they're the reusable
   building blocks the 21-99 grid combines. The grid itself reuses
   .a1w-ref-table — each cell holds a numeral with its spelled form
   underneath, and row/column headers spell out the two components
   (ones-prefix + tens-word) a reader combines to get every cell. --- */
.a1w-number-basics,
.a1w-number-order-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 4px;
}

.a1w-number-chip {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 7px 12px;
    background: var(--surface-2, #f8fafc);
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 999px;
}

.a1w-number-chip-ten {
    background: var(--accent-soft, #ede8f7);
    border-color: transparent;
}

.a1w-number-num {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--accent, #4c3575);
    font-variant-numeric: tabular-nums;
}

.a1w-number-word {
    font-family: var(--serif);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--ink, #1e293b);
}

/* table-layout:fixed + width:100% forces the 9 columns to always fit
   within .a1w-ref-table-wrap's own width (first column narrow and fixed
   for the row label, the other 8 splitting the rest evenly) instead of
   growing to each cell's natural content width — which is what was
   pushing the table wider than its card and past the wrap's overflow
   scroll. Padding is also tightened since 9 columns share the row. */
.a1w-ref-table.a1w-number-grid {
    table-layout: fixed;
    width: 100%;
    min-width: 0;
}

.a1w-number-grid th,
.a1w-number-grid td {
    text-align: center;
    padding: 8px 4px;
    overflow-wrap: break-word;
}

.a1w-number-grid th:first-child,
.a1w-number-grid td:first-child {
    width: 60px;
}

.a1w-number-grid th {
    line-height: 1.5;
    font-size: 0.58rem;
}

.a1w-number-grid td {
    font-family: var(--mono);
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--ink, #1e293b);
}

.a1w-number-grid td small {
    display: block;
    font-family: var(--serif);
    font-size: 0.62rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--ink-faint, #94a3b8);
    margin-top: 2px;
}

.a1w-number-grid td.a1w-case-tag {
    text-align: left;
    font-size: 0.68rem;
    white-space: nowrap;
}

/* --- Responsive --- */
@media (max-width: 640px) {
    .a1w-hero-card {
        padding: 44px 22px 32px;
    }
}