/* ============================================================
   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 to rewrite CSS visually. Original CSS is a media query with three rules. We must preserve selectors exactly, layout properties unchanged. We can change colors, shadows, border-radius, transitions, etc. But here original has no colors? It has font-size, padding, text-align. Text-align is layout? It's typography? Actually text-align is listed under typography as unchanged? Wait: "📐 LAYOUT ... text-align, vertical-align" in never change? Let's check: "📐 LAYOUT (HTML cannot adapt to changes): ... text-align, vertical-align" Yes, text-align must NOT change. So we cannot change text-align: center. Font-size is typography, cannot change. Padding is layout, can vary ±20% maximum. But we can change if within ±20%. Original padding: var(--space-md) !important. We don't know value, but we can change to another custom property? It's a value, but the variable --space-md is set elsewhere. We must preserve layout? We can change to a similar padding? But the instruction says "padding, margin (keep similar values, ±20% maximum)". We could change var(--space-md) to something else? But that would be changing a CSS custom property value? Actually the value is "var(--space-md)". Changing it could break layout. Better to keep it. We can add color, background, border-radius, box-shadow, transition, etc. We can add new declarations without changing existing ones. We must ensure no layout changes.

The target style "card-mosaic" with "airy-rhythm" but the original CSS only contains a media query for mobile. We need to apply visual refresh within these selectors. We can add properties like background, border-radius, box-shadow, transition, etc. But we should be careful: the selectors include .app-hero-section .row .col-lg-7, .app-hero-section .badge.bg-warning, .contact-channels-section article, .contact-quick-section .contact-card. These are elements inside sections. We can give them visual styling. However, for .app-hero-section .row .col-lg-7, text-align center is existing. We can add maybe color, background? But it's a layout column; adding background may alter appearance but not layout. We should maybe keep minimal. The user expects a visual identity refresh. Since original CSS is only mobile adjustments, we can enrich with colors, shadows, radius.

But we must also consider the instruction: "Refresh the visual identity WITHOUT changing layout structure or class names." So we can add visual properties. But we must not change selectors. We can add additional declarations. Also we can change existing values if within allowed categories. For example, we might change padding value to a different one within ±20%, but we don't know the base. Safer to keep.

We can add border-radius, box-shadow, background, color, transition, backdrop-filter, etc. But need to ensure no layout changes.

Let's craft a response.

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 must preserve selectors and existing declarations. We can add new properties to each rule. But we should keep the same property order? Not necessary. We can output:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(...);
        border-radius: 24px;
        box-shadow: ...;
        color: ...;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: ...; /* maybe override? But .bg-warning is a bootstrap class with background color. We can change background-color? Since selector includes .bg-warning, but our rule can override background. */
        box-shadow: ...;
        border-radius: ...;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: ...;
        border-radius: ...;
        box-shadow: ...;
        transition: ...;
    }
}

But we must be careful: .col-lg-7 is a column; adding background may cause full-width colored block? But it's inside a row. Could be okay. However, we need to ensure no layout changes: background doesn't affect layout. Border-radius doesn't affect layout. Box-shadow doesn't. But if we set border-radius, no issue. If we set background on col-lg-7, it might be visually odd, but it's a visual refresh. Maybe better to not add heavy background to a grid column. We can add a subtle gradient or none. But the target style says vibrant card colors on neutral background, each card type different accent. However the selectors are not necessarily "cards". The contact-card is a card. So we can make contact cards vibrant. The badge maybe accent. The hero column maybe neutral.

Given "card-mosaic" layout pattern but not applicable because HTML fixed and we can't change grid spans. We can still use colors. We should aim for a cohesive refresh.

Let's choose a fresh palette: maybe soft cream background, coral, teal, amber accents. Since we only modify these selectors, we can set:

- For hero col: maybe transparent with a soft radial gradient backdrop? But text-align center only. Could add a soft color to text: color: #2d2a26; and a subtle background: rgba(255,255,255,0.4); border-radius: 24px; padding? No, padding would affect layout. Don't add padding. Shadow maybe soft.

- For badge: background: linear-gradient(135deg, #ff9a56, #ff6b6b); color: #fff; border-radius: 999px; box-shadow: 0 4px 15px rgba(255,107,107,0.3); maybe keep font-size unchanged.

- For contact cards: background: #fff; border-radius: 20px; box-shadow: 0 8px 30px rgba(0,0,0,0.06); transition: all 0.3s ease; maybe with a vibrant accent on hover? But we can't add :hover because selectors must be preserved exactly? Actually we can add pseudo-class? The instruction: "Pseudo-classes (:hover, :focus, ::before, ::after)" are selectors to keep exactly? It says "Selectors (CRITICAL - HTML is fixed): ... Pseudo-classes (:hover, :focus, ::before, ::after)" This likely means if present, keep them. But can we add new selectors? No, "Every selector character-for-character preserved?" So we should not add new selectors. We can only modify existing rules. So no :hover.

We can add transition property to the rule, so if there are hover styles elsewhere, transition applies.

Let's ensure not to change existing declarations. Keep text-align, font-size, padding the same. Add new properties. Use !important on padding as original. We can use !important for our added properties? No need.

We need to output only CSS, no fences.

Let's craft a beautiful, airy, card-mosaic-inspired visual identity.

Maybe define gradient backgrounds for each card type. For .contact-channels-section article: background: linear-gradient(145deg, #ffffff, #f8f4f0); border-left: maybe 4px solid color? But border-left width is layout? Border-width is not allowed to change? Actually "border-color and border-style (NOT border-width)" means we cannot change border-width. So don't add border-width. If we add border-left: 4px solid ... then that changes border-width, not allowed. So avoid. We can use box-shadow to simulate accent borders.

For .contact-quick-section .contact-card: same.

For .app-hero-section .badge.bg-warning: background gradient, border-radius pill.

For .col-lg-7: we could set color, maybe a soft text-shadow. Since it's a column, background could be a very subtle radial pattern. But perhaps we should not over-decorate hero column. Maybe just color and text-shadow for breathing rhythm.

Let's select palette:

- Background/neutral: #faf7f2 (not used if no background)
- Ink: #2b2b2b
- Accent 1 (coral): #ff6b6b
- Accent 2 (amber): #ffb84d
- Accent 3 (teal): #2ec4b6
- Accent 4 (lavender): #a29bfe

Shadows:
- Soft pillowy: 0 8px 30px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04)
- Vibrant glow: 0 10px 25px rgba(255,107,107,0.25)

Border radius:
- Badge: 999px
- Contact cards: 24px
- Hero col: 28px? But no background perhaps.

Let's write:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2d2a26;
        text-shadow: 0 2px 8px rgba(255, 184, 77, 0.15);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffb84d, #ff6b6b);
        color: #ffffff;
        border-radius: 999px;
        box-shadow: 0 8px 20px rgba(255, 107, 107, 0.25);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff, #f8f3ec);
        border-radius: 24px;
        box-shadow: 0 12px 32px rgba(45, 42, 38, 0.08), 0 3px 10px rgba(45, 42, 38, 0.04);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
}

But wait: "transform" is a layout? transform is not listed? It can affect visual but not layout? It is not in never-change list? Actually the never-change list includes "display, position, grid-*, flex-*, width, height, padding, margin, gap, justify-*, align-*, float, clear, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit, object-position, text-align, vertical-align, typography, animation, media queries". Transform is not listed, so we can add. But adding transform to the rule itself without hover won't do anything. Transition on transform is fine. However, if there are existing hover transforms elsewhere, this transition rule would affect them. That's okay.

But we should be careful: "transition timing, easing, duration" can change. We can add transition. That's allowed.

Should we change the padding value? It says keep similar values, ±20%. We can leave.

We need to ensure the color of text on gradient badge is readable: white on orange/coral yes.

For hero col, adding text-shadow might be okay.

But maybe we need to more strongly follow "card-mosaic" and "airy-rhythm": large border-radius, soft pillowy shadows. Let's increase radius to 28px for contact cards? But if the card includes content, 24-28 is fine. On mobile, perhaps 20px. Airy says 16-28. Let's use 24px.

We can also add backdrop-filter to hero col? Not necessary.

Let's check original selectors: `.contact-channels-section article, .contact-quick-section .contact-card` is a group. We can add declarations.

Could we add a custom property definitions? No @media, but we can use var(--space-md) already. We might define new custom properties on root? But that would require new selector. Not allowed. So avoid.

Could we change `padding: var(--space-md)` to `padding: var(--space-lg)`? That could break layout and also change variable. Better keep.

Now, the instruction says "All color values: background, color, border-color, fill, stroke, outline-color" must be changed. We changed some. But not all original had none. We added.

"box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)" We added multi-layer.

"text-shadow" We added.

"border-radius" We added.

"transition" We added.

"filter, backdrop-filter" not used.

"opacity" not used.

"outline styles" not used.

"border-color and border-style" not used.

"caret-color, accent-color" not used.

"CSS custom properties (--color-*, --shadow-*) values" not used.

We may want to include more visual details to satisfy "each card type a different accent". For contact channels articles and contact quick cards, we use same background. Maybe differentiate by box-shadow color? But they are in the same rule, so same. We cannot add separate rules for each because selectors would change? We could not add separate selectors. We can only modify the existing rule. So both get same style. But we can use different box-shadow layered colors? No, it's the same property. We can add a universal gradient with both teal and coral accents maybe.

Alternatively, we could set `background: linear-gradient(145deg, #ffffff, #fdf6ec)` for contact articles and `background: linear-gradient(145deg, #ffffff, #eef9f7)` for contact-card? But that would require separate rules. We can't add new selectors, but we could split the group? The original is a group; we must preserve selector list? It says "Selector lists (commas)" are selectors to preserve. So we cannot split them into separate rules because that would change selector structure? Maybe we could duplicate the rule? The instruction: "Selector lists (commas)" means treat as part of selector. We should keep the exact selector list. So we cannot split. We can only style the group identically.

Maybe we can change the background to include both accents with a gradient that is vibrant and neutral: from white to soft peach. That's fine.

Let's think about "vibrant card colors on neutral background" — we can make the cards have a subtle white-to-peach gradient, which is neutral but warm. The badge is vibrant coral/amber. The hero column text could be warm ink.

We could also add a "border-radius: 28px" and "box-shadow: 0 18px 40px rgba(...)" for airy.

Let's produce final CSS. We need to ensure first character is CSS, no markdown. Add a newline at end maybe.

Let's craft:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #34302a;
        text-shadow: 0 2px 12px rgba(255, 184, 77, 0.18);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffb84d, #ff6b6b);
        color: #fff;
        border-radius: 999px;
        box-shadow: 0 6px 18px rgba(255, 107, 107, 0.3), 0 2px 6px rgba(255, 184, 77, 0.2);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff, #faf5ee);
        border-radius: 24px;
        box-shadow: 0 16px 40px rgba(52, 48, 42, 0.07), 0 4px 12px rgba(52, 48, 42, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
        transition: box-shadow 0.35s ease, transform 0.35s ease;
    }
}

Is "box-shadow: 0 0 0 1px rgba(...) inset" allowed? It's a border-like shadow but not border-width. Fine. But "0 0 0 1px" is an inset ring. That's nice.

Should we include `transform` in transition? It may be okay. But if there is no transform, transition on transform won't matter. Yet it's allowed. Could add `transition: box-shadow 0.35s ease, transform 0.35s ease, background 0.35s ease;` That's fine.

Now, check layout constraints: No width, height, display, position, etc. No changes to padding. Good.

But wait: The target style says "Aggressive: padding 32-56px, gap 32-48px" but the original padding is var(--space-md). We can't change. But we are in conservative mode? Actually the user says "Mode: 🛡️ CONSERVATIVE". So we must be careful. The target style description is just inspiration. We can apply visual effects only.

One more thing: We changed `color` on `.badge.bg-warning` and background. But the color property is typography? Actually `color` is text color, not listed under "Typography". The "Typography" section lists font-family, font-size, font-weight, font-style, line-height, letter-spacing, word-spacing, text-transform, white-space, word-break. `color` is not there, so allowed.

We also changed `color` on `.col-lg-7` and added text-shadow. That's