/* ============================================================
   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 respond with rewritten CSS, preserving layout exactly, changing visual properties. We have a small media query snippet. Need apply editorial magazine palette, tight rhythm. We must not change selectors or layout. Only colors, shadows, radius, transitions, gradients. The original CSS has text-align: center; font-size: .85rem; padding var(--space-md) !important. Padding is layout, can adjust ±20% but original padding is var(--space-md). We could change variable? But the padding uses var(--space-md). We can't change property's value? It says padding/margin keep similar values ±20% max. We could keep var as is perhaps. But the target style tight-rhythm wants compact spacing, but original padding var(--space-md) maybe from root. We shouldn't change layout. We can add visual properties like color, background? Maybe need fresh visual identity. Since only three rules, we can add visual properties to existing selectors without changing selectors. For example text-align center remains. font-size maybe typography, cannot change. Need likely preserve text-align and font-size. We can add color, background, border-radius, shadows etc to these elements. But careful: The first selector targets .app-hero-section .row .col-lg-7, text-align center. We can perhaps add color? But that may affect inherited text color. Is that allowed? Yes color values can change. But not necessary.

We need produce CSS with same selectors and rules. We can perhaps reintroduce default color on elements. Need maybe include media query same. We can add visual properties to each rule.

Need consider "all colors" replaced. Original doesn't have colors. We need select a fresh palette. Since target style editorial magazine: cream/beige backgrounds, ink black text, deep red accent. We can apply subtle background tints or shadows. But should we add extra rules not original? The "selectors preserved" means can't add new selectors? It likely says selectors preserved, but adding new declarations inside existing rules is okay. However we need be careful not to alter layout. Adding background may not layout.

Maybe we can change padding values? Since target tight rhythm, but original uses var(--space-md). We can update custom properties? Not defined here. We shouldn't.

Need maybe output:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a1a;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c44536;
        color: #f5f1e8;
        border-radius: 4px;
        box-shadow: 0 2px 0 rgba(26,26,26,0.15);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        border: 1px solid #e8e0d4;
        border-radius: 6px;
        box-shadow: 0 1px 2px rgba(26,26,26,0.05);
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }
}

But wait, .badge.bg-warning originally is Bootstrap warning badge, likely background-yellow. We can override background-color and color. Does that break layout? No. But color affects text. Fine.

Need think about "border-color and border-style (NOT border-width)" can change/add. Adding border: 1px solid ... sets border-width, but property is border shorthand including width. The instruction says "border-color and border-style (NOT border-width)" so adding border width is not allowed? Actually "border-color and border-style (NOT border-width)" means can change border-color and style, but not border-width. Adding border-width maybe violates. Better avoid border shorthand with width; use border-style and border-color if needed. But if element originally no border, adding border could affect layout dimensions due to box sizing? We need not alter layout. So avoid border. Could use box-shadow as border substitute. But box-shadow not layout. We can use outline maybe, but outline can affect? Outline doesn't layout. But outline-color and outline-style allowed. Could add outline: none? Hmm.

Better use background-color, color, box-shadow, border-radius. The border-radius doesn't layout unless background visible.

Need "transition timing, easing, duration" can change/add. Good.

Need maybe `caret-color`, `accent-color`? Not relevant.

Need maybe use `filter`? Could add but might alter visuals. But no need.

Need maybe edit `text-shadow`: first rule perhaps add text-shadow? It would apply to text, but target tight rhythm subtle shadow. Could add:
text-shadow: 0 1px 0 rgba(245,241,232,0.6);

But this might affect readability? Fine.

Need perhaps define color custom properties? Not necessary.

Need ensure all colors replaced? No original colors. We'll set colors.

Need consider if rule selectors include .contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }. If we add background-color to both, okay. But maybe background-color on article changes visual. Good.

Need maybe add a deep red accent to badge. The badge.bg-warning with Bootstrap class may have background. We override. Need target editorial: cream backgrounds, ink black, deep red. For hero col, maybe color ink black. For badge, background deep red, color cream. For articles, background cream white? Maybe #fffdf9 slightly off-white. border radius 6px. Box shadow subtle.

Need potentially override background for `.contact-channels-section article` and `.contact-quick-section .contact-card` with `background-color: #fffdf7; border-radius: 6px; box-shadow: 0 2px 4px rgba(196,69,54,0.08); transition: box-shadow 0.2s ease;` Good.

Need maybe add `accent-color`? no.

Need maybe use `outline` on badge? not.

Need maybe no media breakpoints change. Keep same.

Need include original rules unchanged plus visual declarations. But as per "rewritten CSS" maybe we can change padding values? It says "keep similar values ±20% maximum." We can keep exactly. Fine.

Need think about "text-align: center" in col-lg-7. Could add `font-family`? no, cannot change typography. Could add `color`. Good.

Need maybe the original media query is only a snippet; perhaps root variables like --space-md are defined elsewhere. We cannot change them. Fine.

Potential issue: The user asked "all colors, shadows, radius" changed. In our output, there isn't much previous. We need apply fresh palette. Good.

Need maybe "box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)" We can use multiple shadows:
box-shadow: 0 2px 4px rgba(26,26,26,0.06), 0 0 0 1px rgba(245,241,232,0.8);
But adding spread ring, okay. Or `0 2px 4px rgba(26,26,26,0.05), 0 8px 16px rgba(107,112,92,0.06);` Tight rhythm: subtle. Good.

Need perhaps apply same to badge? Maybe `box-shadow: 0 2px 0 #8f2f22;` A deep button shadow. But badge not interactive. Could use `box-shadow: 0 1px 2px rgba(26,26,26,0.2)`.

Need maybe change text-shadow for hero: `text-shadow: 0 1px 2px rgba(245,241,232,0.4);` But maybe not visible.

Need maybe "gradient colors and stops": Could add a gradient to background of contact-card: `background: linear-gradient(135deg, #fffdf8 0%, #f5f1e8 100%);` But this adds background. It is a visual property. Is changing background from no background to gradient okay? Yes. But layout not affected. However if parent has background, adding gradient could change contrast. Fine.

Need maybe "filter, backdrop-filter": Could add `backdrop-filter: blur(2px)`? Might not work as no transparency. Avoid.

Need maybe "opacity": Could add opacity 0.99? no need.

Need maybe "outline styles": Add `outline-color`? no.

Need maybe "caret-color, accent-color": Could add `caret-color: #c44536; accent-color: #c44536;` to hero or badge articles. Not harmful. Might be unnecessary.

Need maybe "transition timing, easing, duration": Add `transition: box-shadow 0.25s ease-in-out, background-color 0.25s ease;` Good.

Need perhaps maintain `!important` on padding as original. Yes.

Need maybe perhaps define `--space-md`? no.

Need perhaps output without markdown fences and no comments. We'll do exactly.

But wait, the user says "No  comments" only, but other comments maybe okay. We'll avoid comments entirely.

Need maybe because there are only three rules, we can include `@media (max-width: 575.98px)` only. But "File: assets/css/saishi.css#块2/2" maybe only second block. We should not include other original CSS outside the snippet? likely output only this block. Good.

Need maybe preserve line structure? not important.

Let's craft final CSS:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a1a;
        text-shadow: 0 1px 0 rgba(245,241,232,0.5);
        caret-color: #c44536;
        accent-color: #c44536;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #c44536 0%, #a93226 100%);
        color: #f5f1e8;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(26,26,26,0.18), 0 1px 0 rgba(245,241,232,0.6) inset;
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(180deg, #fffdf8 0%, #f5f1e8 100%);
        color: #1a1a1a;
        border-radius: 6px;
        box-shadow: 0 2px 4px rgba(26,26,26,0.04), 0 8px 16px rgba(107,112,92,0.08);
        transition: background 0.25s ease, box-shadow 0.25s ease;
    }
}

But check "transition: transform" changes transform? We are not changing transform but transition property can include transform. Since no transform property, okay. But layout unchanged.

Potential concern: `background: linear-gradient` on `.badge.bg-warning` uses `background` shorthand may alter background-size etc, but fine. Could use `background-color` only to be safe. But target gradient allowed.

Need consider "border-radius" can be added. Good.

Need "font-size .85rem" unchanged. Good.

Need "padding var(--space-md) !important" unchanged. Good.

Need "text-align center" unchanged. Good.

Need "selectors preserved" yes.

Potential concern: The `.app-hero-section .badge.bg-warning` is a Bootstrap badge with `font-size: .85rem`, but if we add `color: #f5f1e8`, this overrides Bootstrap default. Fine.

Need perhaps "transition: transform 0.2s ease" could imply transform property, but we didn't set transform. Fine.

Need maybe card `background: linear-gradient` might affect border-radius appearance? No.

Could perhaps use `background-color` instead of background to keep simple. But target "gradient colors and stops" wants gradient. We'll use gradient.

Need maybe "box-shadow with multi-layer effects" we have two shadows. Good.

Need maybe "text-shadow" in hero. Good.

Need maybe "border-style" and "border-color" could add `border-style: solid; border-color: rgba(196,69,54,0.15);` but not border-width. However if no width, it won't appear. Better not.

Need perhaps "outline" allowed but no.

Need maybe "filter" not needed.

Need maybe "opacity" not needed.

Need maybe `accent-color` and `caret-color` are visual properties allowed. Good.

Need maybe "transition timing, easing, duration" changed/added. Good.

Need maybe "all colors replaced" we have new palette.

Need maybe "unchanged height, width, padding, margin within 20%": we kept padding exact.

Need perhaps "no AI marker comments" no comments.

Need output exactly as CSS no markdown. Good.

But wait, does adding `text-shadow` to `.col-lg-7` potentially affect child elements? It inherits into text inside all descendants; may be okay. However text-shadow on a container applies to all text in it. Fine.

Potential issue: `background: linear-gradient` on `.contact-channels-section article` might alter `background-color` but not layout. Fine.

Potential issue: If original article has existing background, our rule overrides. Good.

Need maybe include "box-sizing" unchanged.

Need maybe maybe "transition" property can be considered layout? No.

Need maybe "caret-color" not relevant but okay.

Need maybe "accent-color" not relevant but okay.

Need maybe "text-shadow" on hero can create slightly increased paint, no layout.

Need maybe "backdrop-filter" no.

Let's produce final.

But ensure "No markdown fences, no explanations. First char = first CSS char." So output:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a1a;
        text-shadow: 0 1px 0 rgba(245, 241, 232, 0.5);
        caret-color: #c44536;
        accent-color: #c44536;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #c44536 0%, #a93226 100%);
        color: #f5f1e8;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(26, 26, 26, 0.18), 0 1px 0 rgba(245, 241, 232, 0.6) inset;
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(180deg, #fffdf8 0%, #f5f1e8 100%);
        color: #1a1a1a;
        border-radius: 6px;
        box-shadow: 0 2px 4px rgba(26, 26, 26, 0.04), 0 8px 16px rgba(107, 112, 92, 0.08);
        transition: background 0.25s ease, box-shadow 0.25s ease;
    }
}

Looks good. But maybe `background` shorthand with gradient removes any existing background-color; fine.

Need maybe "box-shadow color fully redesign": yes.

Need maybe "all colors" replaced: deep red, cream, olive. Good.

Need maybe `transition: transform` not a color, but no harm. Could perhaps avoid transform because content might be expected to not have transform. But transitions are allowed. It doesn't affect static. Fine.

Could maybe add `box-shadow` on hero? not necessary. But maybe target "subtle shadows or none" in tight rhythm. Good.

Need perhaps target "Single accent color deep red or olive" we used both deep red and olive in shadow. Good.

Need maybe "editorial neutrals: cream/beige backgrounds, ink black text" yes.

Need maybe "wide max-width containers (1200-1400px)" not relevant.

Need maybe "asymmetric grids" not relevant.

Need maybe "compact spacing" we keep.

Need maybe "small border-radius (2-6px)" we use 4/6. Good.

Need maybe "subtle shadows or none" we use subtle. Good.

Need maybe "information-dense feel" okay.

Potential issue: The `badge.bg-warning` class in Bootstrap includes `--bs-badge-color: #fff` and background-color var(--bs-warning). Our gradient will override `background-image` but not `background-color`, but gradient overrides background-image, but if background-color remains yellow and gradient image fully covers? `background` shorthand sets background-color to transparent? Actually `background: linear-gradient(...)` resets background-color to transparent? In CSS, `background` shorthand resets all background properties to initial values, then sets specified layer. So background-color becomes transparent, linear-gradient is background-image. Good. Good.

Need maybe `background: linear-gradient` on `.contact-channels-section article` would reset any background image etc, but fine.

Need maybe `color` in article could override existing color, but intended.

Need perhaps `accent-color` and `caret-color` not needed but allowed. Could maybe be weird but okay.

Need maybe `text-shadow` with rgba spaces after commas? CSS allows. Fine.

Need maybe "no markdown fences" final answer no code block. Good.

Let's ensure no comments. Yes.

Could include original declarations? Yes.

Need maybe "text-align: center;` and `font-size: .85