/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

We need answer CSS only. Need rewrite visually while preserving selectors and layout. User provided block2/2. Original CSS is a media query with some rules. Need refresh visual identity only. But original has no colors/shadows/transitions. Need maybe add colors? Need within conservative mode: maintain selectors exactly, layout unchanged incl padding maybe within ±20? They included padding in .contact uses var(--space-md) !important. Could change padding? Never change layout, padding keep similar, ±20%. But target flat-solid horizontal strips? This is a small media query fragment. We can add color-related properties? But "only colors, shadows, and decorative properties may change". We can introduce background colors, border-radius, etc. But output must be rewritten CSS, preserving selectors and layout. We can add new declarations? The instruction says refresh this CSS visually. Keep all selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients. It doesn't explicitly prohibit adding properties, but target style maybe add background/color to elements? Need be careful: if no properties changed, maybe can add:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }
}
Need apply flat-solid perhaps with border-radius/borders? But changing selectors? No. We can add color declarations to those selectors: background-color, border-radius, border-left etc. But "contact-channels-section article" maybe use alternate backgrounds. However, in media query, changing background-color could affect layout? It doesn't affect layout. Could change border-radius. Need preserve width/height/padding/margin? Adding box-shadow no because flat-solid says none. Colors solid only no gradients. The target "horizontal-strips" likely applies globally but this block only within media query. Need maybe "strong color zones" within contact cards? But original CSS doesn't have color values. We can add background-color and color and border-radius to the target selectors, but should not change layout. 

But user says "Only change colors, shadows, radius, transitions, gradients." Since original has none, maybe output should include no added properties? But task expects a visually refreshed CSS. However, could add text-shadow? But these are basic elements. Need ensure not breaking layout. "HTML is FIXED — only colors, shadows, and decorative properties may change." We can add decorative properties. But if we add background to .contact-channels-section article, it changes visual identity. Need perhaps apply:
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background-color: #ffffff;
    border: 1px solid #f0e9dc;
    border-radius: 0.5rem;
}
But border may be "border-color and border-style (NOT border-width)" only. Adding border-width? In original no border; adding border-width changes layout? Borders affect dimensions? Since box-sizing might border-box? But not guaranteed. Could use outline instead, doesn't affect layout. Outline color/style allowed. Better to avoid border if not originally present. Use background-color and outline. But outline maybe invisible depending outline-style. Can set `outline: 1px solid #...`? But outline width is not allowed? "outline styles (color, type)" can change but adding outline width? They say border-width not change but outline width? They didn't specifically include outline-width in never change; allowed "outline styles (color, type)" maybe width okay? Better avoid layout-affecting.

Maybe use background-color on .badge.bg-warning? `.app-hero-section .badge.bg-warning` is a Bootstrap warning badge; we can override background-color and color to new palette. But original rule only sets font-size. Could add background-color: #e76f51; maybe okay. But "only colors" yes. Need no gradient.

Text color? `.app-hero-section .row .col-lg-7` text-align center; add color? But that changes hero text color. Could set color: #2c3e50; maybe okay.

Need consider "horizontal-strips" pattern. This fragment maybe "Block 2/2" from a larger stylesheet with media query. In that media query, perhaps elements are used. We need preserve selectors. But adding background to `.badge.bg-warning` could be part of alternating color zones. Could set it to a cream/dark color.

Maybe we should not invent properties because everything in original is typography/layout; however task demands visual refresh. We can apply only safe color properties:
- background-color for hero col? That would change whole col background, probably bad. 
- color for text inside col? Could alter text, fine.
- background-color for badge.btn-warning (Bootstrap class bg-warning). Since bg-warning in Bootstrap sets background-color #ffc107; we can override with a new color. Add `background-color: #d4a373;` and maybe `color: #2f2e41;` and `border-radius: 6px;` (border-radius safe). This is visually refreshed.
- contact cards: Could add `background-color: #fffdf7;` and `border-radius: 4px;` maybe not layout. But `border-radius` only decorative; safe. Could add `border-left: 4px solid #d4a373;` but border-left affects width maybe if box-sizing not border-box, but within card maybe okay. Yet "NOT border-width" means can't set border-width. We can set `border-left-style: solid; border-left-color: #...` but width would be default medium (3px) if not previously. This affects layout. Avoid.
- Add `outline: none`? Not relevant.
- Use CSS custom property? Could set `--shadow`? Not needed.
- Need "box-shadow: none everywhere" due flat-solid. We can add `box-shadow: none` to all three selectors? That changes visual only. Since target says box-shadow none everywhere, add `box-shadow: none;`? But original may already have shadows from other CSS; adding to selectors here is a visual change. But following "box-shadow: none everywhere", we can add `box-shadow: none;` to selectors. However, `.app-hero-section .badge.bg-warning` may have box-shadow elsewhere; setting none is good. But output must not add comments. Should we set `box-shadow: none` in each? That is within allowed (shadows). Good.
- For contact card, could set `background-color: #ffffff; border-radius: 0;`? "flat-solid minimal radius (0-6px)" so use `border-radius: 6px` maybe. But if original had radius elsewhere, overriding to 6px is okay.

Need not change `padding`. But target style: horizontal strips, alternating backgrounds. Since this block only mobile rules, maybe need create "strips" across sections. But cannot add new selectors, and can't change structure. Could add background colors on the elements present. The three selectors:
1. `.app-hero-section .row .col-lg-7` — likely a column inside hero, not strip. Setting background-color to white or cream could create strip? But column only.
2. `.app-hero-section .badge.bg-warning` — badge.
3. `.contact-channels-section article, .contact-quick-section .contact-card` — cards.

Maybe this is second block from set: The first block likely had other rules. But we only process this block. Need output exactly this media query with enhanced visual declarations.

Need ensure selectors preserved:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }
}

Add declarations after existing. Need keep order? Fine.

What visual direction should we use? Target: "horizontal-strips" with alternating white/cream/dark/white. But in this mobile media query, cards can have cream backgrounds and borders. "flat-solid": no gradients, no shadows, solid backgrounds, minimal radius. Strong color zones.

Let's propose:
- `.app-hero-section .row .col-lg-7`: `color: #2b2d42; background-color: #f8f9fa; border-radius: 6px;` Wait adding background to full column could block text? It may look like a strip. But if "horizontal strips" every section full-width and alternating, coloring col could be good. But not sure. The hero column width may contain text; adding background could create a visual card. However, it might be an unusual change. The instruction "only colors, shadows, and decorative properties may change" allows background-color. This could alter visual identity significantly; perhaps intended. Could set `background-color: transparent` to keep stripe pattern? Hmm.

Need perhaps avoid background on general column because it changes background but in mobile hero maybe desirable. The style says horizontal strips, full-width sections with alternating background colors. But we don't have section selectors. Could use CSS variables set on elements? No extra selectors. If we can't add selectors, impossible to create full-width strips. So likely just use the rules available.

Maybe set the hero col background to `#fff` and badge to dark `#2b2d42` color, contact cards to cream. That matches white/cream/dark/white pattern in sequence? But sequence of rules: col white, badge dark, contact cards cream. Good.

Let's craft:
```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2b2d42;
        background-color: #ffffff;
        border-radius: 6px;
        box-shadow: none;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #ffffff;
        background-color: #1f1f29;
        border-radius: 4px;
        box-shadow: none;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        color: #2b2d42;
        background-color: #faf3e8;
        border-radius: 6px;
        box-shadow: none;
    }
}
```
But target says alternating: white / cream / dark / white. This gives hero col white, badge dark, contact cards cream. Good. But `.badge.bg-warning` with class bg-warning usually has yellow bg and dark text; changing to dark background with white text is okay. But "badge.bg-warning" semantics may expect warning color; but visual refresh allowed. Maybe use a strong dark color `#1d1d1f` as dark strip. Good.

However, adding background-color to col-lg-7 might create a full white block in a centered hero, possibly okay. But in a mobile-only media query, this will display white background on entire hero text column, not full width strip; but maybe acceptable. Need maybe "horizontal strips" with full-width. But we can't alter width. Could set margin/width? Layout forbidden. We can use `background-color` on sections not available. So this is best.

Should we set `transition`? Since no interactions, not needed. But could add `transition: background-color 0.3s ease;` maybe decorative property, allowed. But maybe unnecessary. Original no hover. Could add `transition` to cards for visual smoothing but no hover. Yet allowed "transition timing, easing, duration". We can set `transition: background-color 0.25s ease-in-out;`. But this is an extra property, no effect unless background changes. Maybe okay.

Need make sure "border-radius visual rounding only" can set 6px. Good.

Need maybe use `accent-color`? Not relevant.

Need maybe no gradients: we have none.

Need maybe no box-shadow: set none. Good.

Need perhaps no text-shadow? none.

Need maybe add `outline: none`? Not necessary.

Need ensure not changing `font-size` etc. We added color, background, border-radius, box-shadow. Did not change padding except existing. Good.

Potential issue: `.app-hero-section .badge.bg-warning` in Bootstrap may have `background-color: #ffc107 !important`? Actually Bootstrap `.bg-warning` uses `background-color: #ffc107 !important` in some versions? `!important` may override? The original CSS sets font-size only. If `.bg-warning` uses `!important`, our `background-color` may not override unless we add `!important`. Should we add `!important` to color properties to be safe? Since visual identity needs override. But adding `!important` is a change to CSS declaration priority, not layout. It could be okay. Should we add `!important`? Maybe include `background-color: #1f1f29 !important;` and `color: #ffffff !important;` because badge classes are likely using `.bg-warning` with important. But in our output, if we add !important, it's stronger. Does "conservative" allow? It changes property priority but not layout. Could be necessary. User didn't mention. But to ensure exact preservation of selectors, no issue. However, target says "HTML fixed, only colors/shadows/radius..." `!important` is not a value but priority. It might affect. Should we avoid unless needed? The original `font-size: 0.85rem` no `!important`; if `.app-hero-section .badge.bg-warning` specificity includes .app-hero-section and .badge and .bg-warning, it will override Bootstrap's `.bg-warning` if equal? Let's assess specificity: `.app-hero-section .badge.bg-warning` specificity = (0,3,0). Bootstrap `.bg-warning` = (0,1,0) and if `!important`, important beats normal. Bootstrap bg-warning is `background-color: #ffc107 !important;` in Bootstrap 4/5? I think `.bg-warning` is `background-color: #ffc107 !important;`? In Bootstrap 4, `.bg-warning { background-color: #ffc107 !important; }` yes. So to change warning badge, we might need `!important`. But original CSS didn't try to change background. Our new style should. Use `!important` for background-color and maybe color. But if add `!important` to color and background, okay. Need not add to border-radius. But `badge.bg-warning` may also border-radius from `.badge` not important. Fine.

Similarly `.contact-channels-section article` may have existing background-color from theme with same/higher specificity. Our selector `.contact-channels-section article` specificity = (0,1,1), maybe theme article might have (0,0,1) or `.post-card` etc. Could be okay. But to be safe, maybe not important. However, should avoid unnecessary `!important`. Since original rule includes `padding: var(--space-md) !important;` so in that media query they already use important. Matching with !important for visual properties could be consistent.

But could the instruction "no AI marker comments" not relevant. Need output first CSS character. 
Need maybe preserve whitespace and line breaks fine.

Let's consider if color palette should be warm cream/dark, matching "horizontal-strips": white / cream / dark / white. Let's pick palette:
- Light white: #ffffff
- Cream: #faf3e8 or #f5eddf
- Dark: #1f1f29 or #242424
- Maybe accent orange: #d4a373 for badge? But "Strong color zones" maybe use dark zone as badge. The badge originally warning; maybe use a strong color like #e76f51 (terracotta) with white text. But target's palette says alternating white/cream/dark/white, not necessarily accent. It also says "Strong color zones." I'd use dark #202124.

Maybe set `.app-hero-section .badge.bg-warning` to `background-color: #e76f51`; this is a strong warm accent, not dark. But target strong color zones could be dark. Hmm.

Let's think "horizontal-strips" examples:
- Strip 1: white background, left aligned text
- Strip 2: cream background
- Strip 3: dark background with white text
- Strip 4: white bg
But within this media snippet, perhaps the hero column (strip 1) should be white, badge dark, contact cards cream. This is good.

Potential risk: Setting `background-color` on `.contact-channels-section article` with border-radius on mobile may make article cards all cream. But if parent contact section already has cream, okay. Good.

Need perhaps add `color: #2b2d42` to contact cards. Fine.

Should we add `background-color: #ffffff` to `.app-hero-section .row .col-lg-7`? Since "Full-width sections (width:100%)" but this is column not full-width. But in mobile, col-lg-7 in row likely width 100% due to grid? Actually at max-width 575.98px, col-lg-7 (Bootstrap 4/5?) may be width 100% because large breakpoint not applied? Wait `.col-lg-7` in Bootstrap only applies at min-width lg; on small screens it might not stack? Actually `col-lg-7` sets flex at lg; on mobile it doesn't have base styles, so it may be full width (100%)? In Bootstrap, `col-lg-7` is a layout class that applies `position: relative; width: 100%; padding-right/left` from `col`? In Bootstrap 4, `.col-lg-7` is not `col`, so on mobile, div might be full width? It will be block. So background could be horizontal strip-ish. Good.

Need