/* ============================================================
   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;
    }
}

The user wants me to refresh the CSS visually while keeping all selectors and layout exactly as-is. Let me analyze the original CSS:

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

This is a media query block. The selectors are:
1. `.app-hero-section .row .col-lg-7` - with `text-align: center`
2. `.app-hero-section .badge.bg-warning` - with `font-size: 0.85rem`
3. `.contact-channels-section article, .contact-quick-section .contact-card` - with `padding: var(--space-md) !important`

Now, per the rules:
- I cannot change selectors
- I cannot change `text-align` (it's in the layout/typography list — text-align is in the "never change" list)
- I cannot change `font-size` (in the never change list)
- I cannot change `padding` (in the never change list, but can change ±20% maximum)

Wait, but padding can change ±20% maximum. `var(--space-md)` is a CSS custom property value. I can change CSS custom property values... but here `var(--space-md)` is a reference. Hmm.

Actually, per the rules:
- "CSS custom properties (--color-*, --shadow-*) values" — I can change custom property values
- "padding, margin (keep similar values, ±20% maximum)" — I can change padding but must keep similar values

So what can I actually change in this CSS? The media query has:
1. `text-align: center` — typography, cannot change
2. `font-size: 0.85rem` — typography, cannot change
3. `padding: var(--space-md) !important` — padding, can change ±20%

Wait, but the visual identity refresh is about colors, shadows, radius, transitions, gradients. There are no colors or shadows in this CSS at all.

Hmm. This is a challenge. The original CSS is quite minimal. It's a media query for small screens. There's nothing color-related.

Let me think about what I can do:

1. `text-align: center` — this is in the NEVER CHANGE list (text-align). So I must keep it.
2. `font-size: 0.85rem` — this is in the NEVER CHANGE list (font-size). So I must keep it.
3. `padding: var(--space-md) !important` — padding can change ±20%. `--space-md` is a custom property reference. I don't know its value. I could change it to a different value but keep it similar. Maybe `var(--space-md)` → `var(--space-md)` stays, or I could adjust... Actually, since I don't know the value of `--space-md`, I can't calculate ±20%. 

The safest approach: Since the task says visual identity refresh and this CSS has no colors/shadows, I should add decorative properties that don't break layout. But the rules say "ONLY the rewritten CSS, preserving ALL selectors and layout exactly." 

Wait, could I add properties? The instructions say to refresh the visual identity. Adding color, background, border-radius etc. to these selectors could work, but it might change appearance in ways that could be considered breaking. Let me re-read.

"Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

Since there are no colors/shadows/radius/transitions/gradients in the original, I need to either:
1. Keep it as-is (no visual changes possible)
2. Add new visual properties while keeping existing ones

Given the target style "horizontal-strips" and "airy-rhythm", I could add decorative properties to these elements. But I must be careful:
- `.app-hero-section .row .col-lg-7` — adding a background color would change the look significantly.
- `.app-hero-section .badge.bg-warning` — this is a badge with bg-warning. I could change its background with `background: ...` or `background-color`. But the class `bg-warning` is a Bootstrap utility class; overriding it with a custom color would be a visual change. And it's allowed since we're changing colors.
- `.contact-channels-section article, .contact-quick-section .contact-card` — could add border-radius, box-shadow, background.

But wait, the "output ONLY the rewritten CSS" — since this is a media query, the output should be the media query block.

Let me consider: The safest interpretation is that I should produce the same media query with adjusted values. Since the only changeable values are allowed to be colors/shadows/radius/transitions/gradients, and there are none, I should add those in a way that respects the never-change list.

Actually, let me reconsider. The instructions say things like:
- "✅ YOU MUST CHANGE (visual identity only)" — all color values, box-shadow, text-shadow, border-radius, gradients, transition timing, filter, opacity, outline, border-color, caret-color, accent-color, CSS custom properties

- "🔒 NEVER CHANGE" — selectors, display, position, grid, width/height, padding/margin (keep similar ±20%), gap, justify/align, float, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit, text-align, vertical-align, font-*, text-transform, white-space, word-break, animation names, media query breakpoints, @import, etc.

So `text-align: center` and `font-size: 0.85rem` must stay exactly. `padding: var(--space-md) !important` — the padding value is a var reference. I could change it to another var or value within ±20%, but since I don't know the base value, changing it risks breaking. Better to keep it.

Hmm, but then the file would be unchanged. That doesn't fulfill "refresh the visual identity."

Option: Add new declarations within each rule that are visual-only and don't break layout:
- For `.app-hero-section .row .col-lg-7` (mobile, text-align center): I could add nothing? Adding background would create a colored block on mobile. That could be a "horizontal strip" effect on mobile. But it might look odd.

Actually wait, maybe I'm overthinking. Let me look at the media query again. It's inside a file `saishi.css` (赛事 = competition/event). The elements are hero section, badge, contact cards.

The target style is "horizontal-strips" with alternating backgrounds and "airy-rhythm" with generous spacing, large border-radius, soft pillowy shadows.

Given the constraints, the most reasonable output would be:
1. Keep the media query and selectors.
2. Keep `text-align: center` and `font-size: 0.85rem` (never change).
3. Adjust padding within ±20%? Or keep `var(--space-md)`. Since I don't know `--space-md`'s value, I should keep it. But I might change `!important`... no, `!important` is not in the never-change list explicitly, but changing it could affect specificity/layout behavior. Keep it.

Hmm, this is tricky. The file only contains this media query. If I can't change anything, the output would be identical. That seems wrong for the task.

Let me re-read the rules: "You may add new visual properties as long as you don't change layout." Actually the rules say: "Only colors, shadows, and decorative properties may change."

So I think adding decorative properties is acceptable. Let me add:
- `.app-hero-section .row .col-lg-7 { text-align: center; }` — add a subtle decorative touch? Maybe not, since this is a column layout; adding background could make a visible strip on mobile. Actually, the "horizontal strips" style wants alternating backgrounds. On mobile, the hero section columns stack. Adding a background to the col-lg-7 could create a strip. But `bg` might be a light color... Since the original has no visual identity here, adding a soft background could be fine. But careful — the hero section might already have backgrounds. Overriding could break the visual hierarchy. 

Alternatively, maybe the correct output is to show that the visual changes happen by adding `border-radius`, `box-shadow`, etc. to the contact cards.

Let me craft a sensible "airy-rhythm" transformation:

For the contact cards (`article`, `.contact-card`) in the media query:
```css
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.15);
}
```

Wait, but adding `background` could conflict with existing styles. The contact cards already might have backgrounds. Hmm.

Actually, adding `border-radius` is safe (visual only). Adding `box-shadow` is safe (visual only). Adding `background` — the cards might already have a background (e.g., white cards on a gray background). If I add `background: rgba(255,255,255,0.05)`, it would override the white background and make them translucent, potentially breaking readability. But since this is a media query at max-width 575.98px, and the original CSS only adjusts padding, maybe the cards are fine as-is.

Given "change colors, shadows, radius, transitions, gradients" — I should modify existing values where present, and where none exist, I can add them.

But adding background color to elements that already have background via other classes could be risky. Let me think about what's likely:
- `.app-hero-section .badge.bg-warning` — Bootstrap's `bg-warning` sets `background-color: #ffc107` (warning yellow). Since this is in the media query and the original CSS only sets font-size, overriding the background color here is a color change. It's allowed. Maybe I should change it to a fresh warning color? But `bg-warning` is already a utility class that does that. Overriding within the media query would apply only on mobile. Hmm.

Given the target style "horizontal-strips" with palette "white / cream / dark / white" and "strong color zones," I can assume the component variables exist. But I only see this fragment.

I think the safest and most defensible approach given the instructions:

1. Keep `text-align: center` unchanged (it's in never-change).
2. Keep `font-size: 0.85rem` unchanged (never-change).
3. Keep padding value as `var(--space-md)` (avoid breaking layout). But maybe I can change the `!important`... no.
4. Add visual properties that are additive and safe:
   - For the badge: adjust `background-color`? Actually, changing the badge's yellow to something else on mobile could be odd. But the task explicitly says "ALL color values ... must change" where present. There are no color values here, so nothing to change. "You MUST CHANGE" applies to color values present in the file. There are none. So adding new ones is optional but encouraged to achieve the target style.

Let me look for an alternative interpretation: Perhaps the user expects me to recognize that the only changeable declarations are the properties that fall under the allowed categories. Since there are none, the output should essentially preserve everything, but maybe adjust `padding` to a different spacing value within ±20% as a "visual rhythm" change — e.g., `var(--space-md)` to `calc(var(--space-md) * 1.2)`? That's a bit hacky and could be considered changing layout.

Actually, the rule: "padding, margin (keep similar values, ±20% maximum)". So I can change padding by up to ±20%. Since I don't know `--space-md`, I can instead express a similar value. For example, `padding: var(--space-md)` could become `padding: 1.2rem` if `--space-md` is likely 1rem. But that's guessing. Let me check Bootstrap: `--space-md` is not a standard Bootstrap variable. In custom CSS, `--space-md` is usually `1rem` or `1.5rem`. Common design systems: `--space-md: 1rem` or `1.25rem`. 

Hmm. Since this is a mobile media query and the original sets padding to `--space-md`, I could set `padding: var(--space-md)` remains safest. But "fresh visual identity" — I could change it to `padding: var(--space-md)` → same. No good.

Let me consider: perhaps I should add `!important`-free additional declarations. The instructions say "Only colors, shadows, and decorative properties may change." So I can add decorative properties. Adding `border-radius`, `box-shadow`, `transition`, `background`, `outline`, etc. is allowed, provided they don't change layout. `border-radius` and `box-shadow` don't affect layout. `background` doesn't affect layout. `transition` doesn't affect layout.

So a reasonable transform:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.06) 100%);
        border-radius: 24px;
        padding: 12px;
    }
    ...
}
```

Wait, adding padding to col-lg-7 could change layout spacing. Margin/padding changes allowed ±20%. Adding padding 12px when there was no padding is a layout change from no padding to 12px. That's a big change. Avoid adding padding/margin. Only add non-layout visuals: background, border-radius, box-shadow, transition, etc. But background on a grid column might create a colored strip — that's the "horizontal strips" idea. Yet it might interfere with the hero section's own background. Hmm.

Actually, maybe a cleaner approach: Since the media query is for small screens and the target style is "airy-rhythm", I can add:
- `border-radius` to the contact cards (large, 20px+).
- `box-shadow` soft pillowy shadows.
- `transition` for hover states.
- For the badge: change `background-color` to a fresh tone? Or add a subtle box-shadow to make it pop.
- For the hero col: nothing? Or maybe add a subtle text-shadow for the centered text? `text-shadow` is allowed. Adding a soft text-shadow could enhance the "airy" feel. But text-shadow on a headline could reduce readability. A very subtle one is fine.

Let me craft the output. I need to be careful: selectors must be character-for-character preserved. The original selectors:
- `.app-hero-section .row .col-lg-7`
- `.app-hero-section .badge.bg-warning`
- `.contact-channels-section article, .contact-quick-section .contact-card` (comma list, preserving exact spacing)

Declarations to preserve exactly:
- `text-align: center;`
- `font-size: 0.85rem;`
- `padding: var(--space-md) !important;`

New declarations to add (visual only):

For `.app-hero-section .row .col-lg-7`:
- `text-shadow: 0 2px 12px rgba(255, 255, 255, 0.15);` — subtle airy glow. But this is text-shadow on the column; the column contains text. A soft white glow might look nice on dark backgrounds. But if the background is light, white glow is invisible; that's fine — it's decorative.

Actually, the palette is "white / cream / dark / white" — on dark strips, a white glow on centered text would look good. On light strips, invisible. Safe enough.

- `border-radius: 24px;` — wait, applying border-radius to a column that is full-width would only be visible if the column has a background or border. Adding border-radius without a background does nothing. Adding a background could create a card-like strip. Hmm, on mobile, `.col-lg-7` takes full width. Adding a subtle background could create a strip effect. But it might conflict with the hero section's design. The media query originally centers text. Maybe the hero has a dark background? I'll add a very subtle gradient background that adapts? No, can't know.

Maybe better to add `background: transparent` — no point.

Let me be more conservative: add only visually safe properties that render even without knowing the underlying design:
- `box-shadow` on the badge and contact cards — but box-shadow on elements is visible only if the element has a background or border. Actually, no: box-shadow renders outside the element's border-box. If the element has no background and no border, a drop-shadow might still be visible if the element's contents have color (text). Actually, box-shadow is drawn behind the element; for it to be visible, the element must have a background or the shadow must show around opaque content. If the element background is transparent, the shadow will be visible around the element's box even if transparent? No — if the background is transparent, the shadow still renders as a shadow of the border-box, i.e., a rectangle. It will appear as a rectangular shadow even if the card background is white (which it likely is). So adding box-shadow to cards is safe and visible only if the card background/opaque. If cards are transparent, the shadow would be a weird rectangle. But contact cards in Bootstrap are typically `card` elements with backgrounds. `.contact-card` is probably a custom card with a background. So adding box-shadow is likely fine.

To be safer, I can use `box-shadow: 0 24px 48px -24px rgba(20, 24, 35, 0.18);` — soft, high blur, negative spread so it hugs the card.

For the badge `.badge.bg