/* ============================================================
   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 are asked to rewrite the given CSS snippet. The original is a small media query block. We need to apply visual changes only: colors, shadows, radius, transitions, gradients. But the given CSS contains only layout-ish properties: text-align, font-size, padding. No colors or shadows. In conservative mode, we can adjust padding within ±20%? The instruction says padding/margin can be changed within ±20% maximum. But the target style is "tight-rhythm" with compact spacing, but we cannot change layout drastically. The original padding: var(--space-md) !important. We don't know the value of --space-md but we can maybe change to a slightly smaller value, but within ±20%. However, it's a variable reference. We could change to a different variable or a fixed value? But that might be considered changing layout if we don't know. The safest is keep padding as is. But we need to output something. Since there are no colors, we can add color properties? But the instruction says only rewrite the CSS, preserving all selectors and layout exactly. We cannot add new selectors. We can add new declarations within existing rules if they are visual properties. We can add background, color, border-radius, box-shadow, etc. But we must not change existing properties. Let's review the original:

```
@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;
    }
}
```

We need to "refresh this CSS visually". We can alter font-size? It's typography, but not font-family/font-weight. Actually allowed to change font-size? The "never change" list includes font-size, font-weight, line-height, letter-spacing, etc. So font-size cannot be changed. text-align is layout? It is in the never change list: text-align, vertical-align. So we can't change text-align. So the only existing property we can change is padding? Padding is listed as "keep similar values, ±20% maximum". We can change padding within ±20%. But using var(--space-md) we don't know the value. We can replace with a calc or a different var but maybe that would break. We can also add new visual properties like color, background, border-radius, box-shadow to these selectors. That would refresh visual identity without altering layout. However, adding background to these elements might be okay, but we must be careful: .badge.bg-warning is a Bootstrap badge with background color. We could change its background/color. .col-lg-7 could get a background etc. But in a media query, these are mobile styles. The target style is "horizontal-strips" and "tight-rhythm". But we cannot change layout structure. We might add a subtle border-radius and shadow to the contact cards. But the media query is only for small screens.

Given the constraints, the best approach is to preserve all existing declarations exactly (since they are mostly unchangeable), and add visual declarations that don't affect layout. We need to ensure the output includes the same selectors and the same existing declarations. We can also maybe adjust padding within ±20% by substituting a fixed value close to --space-md? But we don't know the variable. In typical CSS, --space-md might be 1rem or 1.5rem. But changing to a fixed pixel could be risky. Since the instruction says "keep similar values, ±20% maximum", we can tweak it but it's risky. To be safe, we can keep padding as is.

Maybe the task expects us to add colors, shadows, etc. But the original CSS lacks them. We could add to each rule some visual flair. Let's think: The "target style: horizontal-strips" suggests alternating backgrounds. We could set backgrounds on these elements in a way that creates strips. For example, .app-hero-section .row .col-lg-7 could get a background color, .badge a color, contact cards a background, border-radius, shadow. But these are mobile-only styles. It's fine.

However, we must not add properties that change layout. Adding background, color, border-radius, box-shadow, border-color, etc. are allowed. But adding border-width is not allowed. Adding padding is allowed within ±20%. We can add border-radius small like 4px. We can add box-shadow subtle or none. We can add transition. We can add background gradients.

We also need to ensure the selector lists are preserved exactly. The third selector list: `.contact-channels-section article, .contact-quick-section .contact-card` — both selectors in that list. We must keep the same selector list and the same declarations within. We can add declarations to the list.

Let's craft a rewritten CSS. We'll keep all original declarations exactly (text-align, font-size, padding). Then add new visual declarations. But we need to be careful: The original third rule already has padding with !important. If we add a background-color, it won't conflict. We can add multiple declarations.

Potential additions:

For `.app-hero-section .row .col-lg-7`: maybe add a subtle background tint? But if this column contains text, adding background might create a strip. But we need to be careful about horizontal strips style. On mobile, the column is probably stacked. We could add a background gradient or color. But this might affect readability. Let's add a warm cream background and subtle border-radius? Yet the class `.col-lg-7` is a grid column; adding background may be okay. But we need to consider that on desktop this media query does not apply. So it's mobile-only.

For `.app-hero-section .badge.bg-warning`: Bootstrap's `.bg-warning` sets background-color to warning color. We can override with a different color. We can change background-color to a strong color, color to white, add border-radius, box-shadow. But careful: `.badge.bg-warning` has higher specificity? We can add declarations in the same rule.

For contact cards: add background, border-radius, box-shadow, transition. The padding is already using var(--space-md). We can keep it.

But the instruction also says "No AI marker comments" and output only CSS.

Let's decide on a palette. Horizontal strips alternating white/cream/dark/white. Since this is mobile, we can give the hero column a cream background, the badge a dark accent, and contact cards a white background with shadow. Tight-rhythm: small border-radius 4px, subtle shadows.

We cannot change font-size, but we can add color, background, etc.

Let's write:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(135deg, #fdfbf7 0%, #f8f3ed 100%);
        border-radius: 6px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #e67e22;
        color: #fff;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        transition: box-shadow 0.25s ease, transform 0.25s ease;
    }
}
```

But is adding `transform` to transition allowed? The property "transform" isn't in the forbidden list, but it's a layout-affecting property. Adding a transition on transform is okay if we don't change transform itself. We are not adding a transform, just a transition. However, adding transition might be okay. But we need to check "transition timing, easing, duration" are allowed to change. We can add transitions. But adding `transition` property is allowed. Yet `transform` in a transition property is just a name, not a value. It's fine.

However, the instruction says "No  comments". Fine.

But let's consider if adding background to `.col-lg-7` might break layout? No, background doesn't affect layout. Border-radius doesn't affect layout. Box-shadow doesn't. So okay.

But wait: We need to be careful about the "target style: horizontal-strips" and "tight-rhythm". The original CSS is a media query. Maybe we should adjust padding to be tighter, e.g., `padding: calc(var(--space-md) * 0.9) !important;` or `padding: 0.9rem !important;` if --space-md is unknown. But since it's a variable, we can do `padding: calc(var(--space-md) - 2px) !important;` That's within ±20% if --space-md is around 1rem (16px). But we don't know. Could also keep. To demonstrate "tight-rhythm", we might change padding to `padding: calc(var(--space-md) * 0.9) !important;`. But using calc with var is valid. The original value `var(--space-md)` is a single custom property. Changing to `calc(var(--space-md) - 0.2rem)` might be okay. But the instruction says "keep similar values, ±20% maximum". Since we don't know the value, using a multiplier 0.9 is within 10%. That should be safe. But is it worth the risk? Since the original uses a variable, changing it to a calc expression still preserves the variable and tightens spacing. This aligns with "tight-rhythm". But the user requested "only colors, shadows, and decorative properties may change" in the initial list? Actually the initial list says "✅ YOU MUST CHANGE (visual identity only): All color values... box-shadow... border-radius... gradients... transition... filter... opacity... outline... border-color... caret-color... accent-color... CSS custom properties (--color-*, --shadow-*) values". Padding is not in the must-change list; it's in the "NEVER CHANGE" list with "keep similar values, ±20% maximum" as a layout property. So we are allowed to adjust padding within ±20% but not required. To be conservative, we can leave it. But the target style says "Compact spacing (Aggressive: padding 8-16px, gap 8-12px)". The original `var(--space-md)` is likely around 1.5rem (24px), which is larger. We can reduce it by 10% to be more compact. But maybe we can set `padding: 16px !important;` if we assume --space-md is around 20px? Risky.

Let's inspect the original file name "saishi.css" and the snippet. The `--space-md` variable is probably defined in a root elsewhere. Typically `--space-md` might be `1.25rem` or `1.5rem`. A media query for small screens likely wants less padding. But since the original uses var, changing to a fixed value could be okay if we choose 16px (which is within ±20% of 20px? 16px is 20% less than 20px, but 20px is not a standard space-md maybe 24px; 16px is 33% less). Better to use `calc(var(--space-md) * 0.9)` to stay close.

But the instruction "keep similar values, ±20% maximum" is a constraint; if we don't know the value, using a multiplier is a neat way to ensure it's within range. We'll do `padding: calc(var(--space-md) * 0.9) !important;`. That is a 10% reduction. But does `calc(var(--space-md) * 0.9)` work with a length? Yes, if --space-md is a length, multiplying by 0.9 is valid? Actually CSS calc doesn't allow multiplying a length by a unitless number? Wait, `calc(1rem * 0.9)` is valid? In CSS, multiplication is not supported in calc until newer CSS Values Level 4? Actually, CSS calc supports `+`, `-`, `*`, `/` in modern browsers? The CSS calc() function originally supported + - * /? No, originally only +, -, *, /? Let's recall: CSS calc() supports +, -, *, /? As of CSS Values and Units Level 3, calc() supports +, -, *, /? Actually it only supports + and - for lengths, and * and / are not widely supported. Wait, I think `calc(100% - 20px)` is fine. But `calc(1rem * 0.9)` is not valid because multiplication requires at least one operand to be a number and the other a dimension, but the grammar used to allow `*`? Let's check: CSS calc() does NOT support multiplication or division in CSS Values 3. It was added in CSS Values 4 but browser support is not universal. So `calc(var(--space-md) * 0.9)` may be invalid. We should avoid that. Instead, use `calc(var(--space-md) - 2px)` which is valid if --space-md is a length. But 2px reduction may be within ±20% if --space-md is 10px? Probably not. But likely --space-md is at least 16px. We can use `calc(var(--space-md) - 0.2rem)` = ~3.2px reduction, within 20% for anything above 16px. That's safe. But using `- 0.2rem` is valid. Alternatively, we can leave padding unchanged.

Given the strict constraints, I think it's safer to leave padding exactly as is. The instruction says "Keep ALL selectors and layout exactly as-is." In the task prompt at top: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." That explicitly says only colors, shadows, radius, transitions, gradients. It does NOT mention padding. So we should NOT change padding. The "±20%" rule is a general guideline for if we do change it, but the task specifically says only change colors, shadows, radius, transitions, gradients. So we should not touch padding. Great. So keep `padding: var(--space-md) !important;` exactly.

Also keep `text-align: center;` and `font-size: 0.85rem;` exactly.

Now we can add visual properties. But we must be careful: Adding `background-color` to `.app-hero-section .row .col-lg-7` might be okay, but if that element already has a background from another rule, our media query might override or add. Since it's inside the media query, it will apply on mobile. That's fine.

But maybe the intended "refresh" is to replace existing colors/shadows/radius/transitions/gradients in the original CSS. Since there are none, we can add some. The instruction says "Colors throughout the file replaced with fresh palette?" There are no colors to replace. So adding new colors is okay.

Let's craft a version that adds subtle depth and a tight-rhythm feel.

We need to decide on a color palette. The "horizontal-strips" target suggests alternating white / cream / dark / white. Since this is a small media query snippet, we can apply a cream background to the hero column, a dark accent to the badge, and white cards with a subtle border/shadow. Border-radius small (4px). Shadows subtle.

Let's write:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background-color: #faf7f2;
        border-radius: 6px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #d97706;
        color: #fff;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    }

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

But do we need to worry about `background-color` vs `background`? We should use `background-color` for safety. For the badge, we override Bootstrap's bg-warning background-color with our own. Good.

However, we should ensure the `color: #fff` doesn't affect layout. It's allowed. The badge may have `color` from Bootstrap; overriding is fine.

But wait: The original rule `.app-hero-section .badge.bg-warning` only contains `font-size`. If we add `background-color` and `color`, we are adding visual properties. Good.

Potential issue: Adding `background-color` to `.app-hero-section .row .col-lg-7` might create a full-width background on the column, but since it's a column within a row, it might not be full-width. That's okay. The horizontal-strips style might want full-width sections, but we cannot change layout. We can only add colors. So the strips may not be full-width. But the target style description might not be fully applicable due to fixed HTML. We do our best.

Should we add `border: 1px solid` to cards? Border-color is allowed, and border-style is allowed, but border-width is not? The forbidden list says "border-color and border-style (NOT border-width)" can change. We can add