/* Seasonal checklist hub.
   Extracted from Views/Checklist/Index.cshtml — keep edits here, not inline. */

        /* Re-tint the shared header to match this page's parchment surface
           via the --ih-page-* contract defined in _Layout.cshtml. */
        body {
            --ih-page-bg: #f5efe3;
            --ih-page-bg-blur: rgba(245, 239, 227, 0.88);
        }
        html[data-theme="dark"] body {
            --ih-page-bg: #14110d;
            --ih-page-bg-blur: rgba(20, 17, 13, 0.82);
        }

        .clx-shell {
            --bg: #f5efe3;
            --bg-warm: #ebe2cf;
            --ink: #1f1a14;
            --ink-soft: #4a413a;
            --ink-muted: #8a7f73;
            --rule: #d8cdb6;
            --forest: #2d4a36;
            --terra-dk: #a8613a;
            --butter: #e8c96d;
            --cell-bg: #fbf6ea;

            background: var(--bg);
            color: var(--ink);
            font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
            font-size: 17px;
            line-height: 1.5;
            min-height: 100vh;
            width: 100%;
            box-sizing: border-box;
            padding-top: 1px;
        }
        /* Dark theme — track the global site theme set by the navbar toggle. */
        html[data-theme="dark"] .clx-shell {
            --bg: #14110d;
            --bg-warm: #1d1915;
            --ink: #f0e9da;
            --ink-soft: #c8bda9;
            --ink-muted: #8a8170;
            --rule: #2e2820;
            --forest: #5e9176;
            --terra-dk: #d97a48;
            --butter: #f0d27a;
            --cell-bg: #221d17;
        }
        @media (prefers-color-scheme: dark) {
            html[data-theme="auto"] .clx-shell {
                --bg: #14110d;
                --bg-warm: #1d1915;
                --ink: #f0e9da;
                --ink-soft: #c8bda9;
                --ink-muted: #8a8170;
                --rule: #2e2820;
                --forest: #5e9176;
                --terra-dk: #d97a48;
                --butter: #f0d27a;
                --cell-bg: #221d17;
            }
        }
        .clx-shell *, .clx-shell *::before, .clx-shell *::after { box-sizing: border-box; }
        /* Override the host stylesheet's `section { padding: var(--spacing-xl) 0 }`
           AND its `section:not(.hero) { opacity: 0; transform: translateY(10px) }`
           scroll-reveal. The host JS only adds a `.visible` class to sections
           tracked on the landing page, so without these overrides our content is
           fully transparent. */
        .clx-shell section,
        .clx-shell section:not(.hero) {
            padding: 0;
            overflow: visible;
            position: static;
            opacity: 1 !important;
            transform: none !important;
            transition: none;
        }
        .clx-page {
            max-width: 980px;
            margin: 0 auto;
            padding: 0 20px 80px;
        }
        @media (min-width: 480px) {
            .clx-page { padding: 0 36px 80px; }
        }
        @media (min-width: 720px) {
            .clx-page { padding: 0 48px 80px; }
        }
        .clx-head {
            text-align: center;
            padding: 40px 0 24px;
            margin-bottom: 32px;
        }
        /* House icon + kicker are redundant with the navbar brand on this page —
           hide them. The selectors stay so the markup can be kept identical to
           Region.cshtml's header pattern. */
        .clx-head img.house,
        .clx-head .kicker {
            display: none;
        }
        .clx-head h1 {
            font-family: "Bricolage Grotesque", sans-serif;
            font-weight: 600;
            font-size: clamp(40px, 8vw, 64px);
            line-height: 1.02;
            letter-spacing: -0.02em;
            margin: 0 0 16px;
            color: var(--ink);
        }
        .clx-head .lead {
            font-size: 17px;
            color: var(--ink-soft);
            max-width: 620px;
            margin: 0 auto;
        }

        .clx-section {
            margin: 40px 0;
        }
        .clx-section-head {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 18px;
            border-bottom: 1px solid var(--rule);
            padding-bottom: 10px;
        }
        .clx-section-head h2 {
            font-family: "Bricolage Grotesque", sans-serif;
            font-weight: 600;
            font-size: 28px;
            letter-spacing: -0.01em;
            margin: 0;
            color: var(--ink);
        }
        .clx-section-head .count {
            font-family: "JetBrains Mono", monospace;
            font-size: 12px;
            color: var(--ink-muted);
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .clx-generic {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
            margin-bottom: 12px;
        }
        @media (max-width: 640px) {
            .clx-generic { grid-template-columns: 1fr; }
        }
        .clx-generic-card {
            display: block;
            background: var(--forest);
            color: var(--bg);
            border-radius: 8px;
            padding: 22px 24px;
            text-decoration: none;
            transition: transform 120ms;
        }
        .clx-generic-card:hover { transform: translateY(-2px); color: #fff; }
        .clx-generic-card .ec {
            font-family: "JetBrains Mono", monospace;
            font-size: 11px;
            color: var(--butter);
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }
        .clx-generic-card h3 {
            font-family: "Bricolage Grotesque", sans-serif;
            font-weight: 600;
            font-size: 24px;
            margin: 6px 0 6px;
            letter-spacing: -0.01em;
            color: #fff;
        }
        .clx-generic-card p {
            margin: 0;
            font-size: 14px;
            opacity: 0.9;
            line-height: 1.4;
        }

        .clx-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 10px;
        }
        .clx-card {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            background: var(--cell-bg);
            border: 1px solid var(--rule);
            border-radius: 6px;
            text-decoration: none;
            color: var(--ink);
            transition: border-color 120ms, transform 120ms;
        }
        .clx-card:hover { border-color: var(--ink); transform: translateY(-1px); color: var(--ink); }
        .clx-card .code {
            font-family: "JetBrains Mono", monospace;
            font-weight: 600;
            font-size: 13px;
            background: var(--ink);
            color: var(--bg);
            padding: 5px 8px;
            border-radius: 3px;
            letter-spacing: 0.04em;
            min-width: 38px;
            text-align: center;
        }
        .clx-card .name {
            font-family: "Bricolage Grotesque", sans-serif;
            font-weight: 600;
            font-size: 16px;
            letter-spacing: -0.01em;
        }

        .clx-foot {
            text-align: center;
            padding: 32px 0 8px;
            color: var(--ink-muted);
            font-size: 14px;
        }
        .clx-foot a { color: var(--terra-dk); }

        /* === App-promo banners ============================================
           Short pitches that everything on this page already lives in the
           app — automatically. Forest-green so they pop against parchment.
           The top one is a single clickable bar; the bottom one is a richer
           closing card. Both CTAs open the web app at /web (start in-browser,
           no app-store detour) and carry utm_* params for funnel attribution. */
        .clx-promo {
            background: var(--forest);
            color: var(--bg);
            border-radius: 12px;
            text-decoration: none;
        }
        .clx-promo-btn {
            flex: none;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: var(--butter);
            color: #1f1a14;
            font-family: "Inter", sans-serif;
            font-weight: 700;
            font-size: 14px;
            padding: 11px 18px;
            border-radius: 999px;
            text-decoration: none;
            white-space: nowrap;
            transition: transform 120ms, opacity 120ms;
        }
        .clx-promo-btn:hover { transform: translateY(-1px); color: #1f1a14; opacity: 0.94; }
        .clx-promo-btn svg { width: 15px; height: 15px; }

        /* Bottom — centered closing card (a <div>, not a <section>, so the
           shell's `section { padding: 0 }` reset doesn't flatten it). */
        .clx-promo--bottom {
            text-align: center;
            padding: 38px 28px;
            margin: 52px 0 8px;
        }
        .clx-promo-kicker {
            font-family: "JetBrains Mono", monospace;
            font-size: 11px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--butter);
        }
        .clx-promo--bottom h2 {
            font-family: "Bricolage Grotesque", sans-serif;
            font-weight: 600;
            font-size: clamp(26px, 4.5vw, 34px);
            line-height: 1.08;
            letter-spacing: -0.01em;
            margin: 10px 0 0;
            color: #fff;
        }
        .clx-promo--bottom p {
            margin: 12px auto 0;
            max-width: 520px;
            font-size: 15px;
            line-height: 1.5;
            opacity: 0.92;
        }
        .clx-promo--bottom b { color: #fff; }
        .clx-promo-actions {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 18px;
            flex-wrap: wrap;
            margin-top: 22px;
        }
        .clx-promo-note {
            font-size: 13px;
            opacity: 0.82;
            color: var(--bg);
        }