/* ============================================================
   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 rewrite a small CSS snippet from `assets/css/saishi.css`. The original CSS is:

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

I need to preserve all selectors and layout, but change visual-only properties. However, this snippet is quite minimal — it only has `text-align`, `font-size`, and `padding`. Those are all in the "never change" category:
- `text-align` is listed under layout/typography that must not change.
- `font-size` is typography, must not change.
- `padding` is layout, must not change.

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

The original CSS has no colors, shadows, radius, transitions, or gradients. So how do I "refresh" it?

I need to add visual properties while keeping the existing ones. The constraints say:
- Never change: `text-align`, `font-size`, `padding` (plus all the listed layout/typography properties).
- Must change: colors, shadows, radius, transitions, gradients.

Since the original snippet is inside a media query, I should preserve the media query and the selectors. I can add new visual declarations to each rule that don't affect layout.

Let's think about what properties are safe to add:
- `background-color`, `color`, `border-color`, `box-shadow`, `text-shadow`, `border-radius`, `transition`, `filter`, `backdrop-filter`, `opacity`, `outline`, `caret-color`, `accent-color`, custom properties.

But adding `background-color` etc. to elements that originally had none could alter appearance, but that's the point — visual refresh. However, I must NOT change layout. So `box-shadow`, `border-radius`, `background`, `color`, etc. are fine.

The target style is "horizontal-strips" with "airy-rhythm" variant: generous spacing, large border-radius (16-28px), soft pillowy shadows, breathing room.

But wait — padding must stay within ±20%. The original `padding: var(--space-md)` — I can't change that. The target says Aggressive padding 32-56px but I can't change padding. I should keep padding as is. I can add `border-radius` and `box-shadow` to the cards to give them a "pillowy" look.

Let me craft a solution:

For `.app-hero-section .row .col-lg-7`:
- Keep `text-align: center;`
- Add perhaps `color`, `text-shadow`? Or maybe leave minimal.

Since the original only sets text-align, adding a text-shadow could be a visual enhancement. But it's a hero section column. Maybe add a soft text-shadow? That might be too much. Alternatively, add a `background`? That could conflict with existing design. Since we're told to output a full CSS file, but actually the input is just this snippet. The instruction says "File: assets/css/saishi.css#块2/2" — this is block 2 of 2. So the original CSS provided is only this media query block. I should rewrite this block only, keeping all selectors.

I need to make visual changes. Since the original has no visual properties, I'll add some that fit the "airy-rhythm" variant while respecting the constraints.

Let me plan:

1. `.app-hero-section .row .col-lg-7` — keep `text-align: center;`. Add maybe `color: #2d2a26;`? But that could override something. Hmm. Better to avoid adding colors that might break hierarchy. But the task explicitly says refresh colors. Since there are no colors in the snippet, adding them is the only way.

Actually, the instruction says "Only change colors, shadows, radius, transitions, gradients." It doesn't say I must add them to every rule. But the self-check says "Colors throughout the file replaced with fresh palette?" — there are no colors to replace. It also says "Shadows redesigned (different offsets, colors)?" — no shadows exist. I think the spirit is to give the CSS a new visual identity. So I should add decorative properties in a way that's safe.

Let me think about safe additions:

For `.badge.bg-warning`:
- Keep `font-size: 0.85rem;`
- Add `background-color`? The class is `bg-warning`, which Bootstrap uses with `!important` typically. Adding a `background-color` without `!important` might not override Bootstrap. But we're inside a media query. Hmm.
- Add `border-radius`? Bootsrap badge already has border-radius. Changing it could be a visual change: e.g., `border-radius: 999px;` for a pill shape. That's visual and doesn't affect layout much. Could also add `box-shadow`.
- Add `transition` for hover states.

For `.contact-channels-section article, .contact-quick-section .contact-card`:
- Keep `padding: var(--space-md) !important;`
- Add `border-radius: 24px;` with a large pillowy radius.
- Add `box-shadow` soft pillowy shadow.
- Add `background` maybe, but the original doesn't specify background. Adding a background could clash with existing site background. However, to create alternating strips, maybe I can use gradients. But this is a media query for small screens, so layout changes are minimal. 

Wait — the overall file fingerprint suggests this is a partial file. The user says "块2/2" (block 2/2). So maybe there is another block with the main styles. But I only see this snippet. I must rewrite only what's given.

The safe approach: preserve the exact declarations, and add new visual declarations that don't affect layout (no dimensions, no display, no position, no margins/paddings). Adding `border-radius`, `box-shadow`, `background-color`, `color`, `transition`, `backdrop-filter`, `opacity`, etc. is acceptable.

Let me design:

Target: horizontal-strips + airy-rhythm.

Since we can't change layout, I'll give:

- `.app-hero-section .row .col-lg-7`: Keep `text-align: center`. Add a subtle `color` and `text-shadow` for a soft airy feel. But careful — this could affect readability. Maybe a very soft text-shadow like `0 2px 20px rgba(255, 255, 255, 0.4)`? Actually if the hero has an image, a light text-shadow can help. Hmm.

Actually, maybe I should be more conservative: only add properties that clearly are decorative and won't break anything. For the hero column, adding a `background` or `box-shadow` to a column could make it look like a card, which changes visual layout perception but not actual layout. That might be desired? The target style says "Large border-radius (16-28px), soft pillowy shadows". So giving the hero column a card look could fit. But `.col-lg-7` is a grid column; giving it a background and radius on mobile might be fine.

But wait — the instruction "⚠️ Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette." So I need to be bold.

Let me create a fresh palette. Since the target style mentions alternating white / cream / dark, but with the original snippet I can't create full-width strips because that would require layout changes. However, I can add background colors to these elements.

Let me think of a cohesive palette:

- Cream: #FAF3E7 or #FDF8F0
- Dark: #1E2A32 or #2B2B2B
- Accent: maybe terracotta #D97A5C or sage #7A9E7E
- Soft shadow: rgba(30, 42, 50, 0.12)

For the hero column, maybe give a dark text color and soft shadow? Actually, let me not overreach.

Let me re-read the exact constraints:

"✅ YOU MUST CHANGE (visual identity only): All color values: background, color, border-color, fill, stroke, outline-color; box-shadow; text-shadow; border-radius; gradient colors and stops; transition timing; filter; opacity; outline; border-color/border-style; caret-color, accent-color; CSS custom properties values."

So I must change these wherever they appear. They don't appear in the original, so I can add them.

"🔒 NEVER CHANGE (would break HTML layout): ..."

The protected properties include `text-align` and `font-size` and `padding`. So I keep those exactly.

Alright, let me write the new CSS.

Plan:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2b2724;
        text-shadow: 0 2px 24px rgba(255, 255, 255, 0.35);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f4b942 0%, #e8963a 100%);
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 999px;
        box-shadow: 0 8px 20px -6px rgba(232, 150, 58, 0.55);
        transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #fffdf8;
        border-radius: 24px;
        box-shadow: 0 12px 32px -12px rgba(31, 38, 45, 0.18), 0 4px 12px -6px rgba(31, 38, 45, 0.06);
        transition: box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s ease;
    }
}
```

Wait — I added `transform` in transition but I shouldn't change `transform` because it's not listed and could break layout? Actually `transform` is not in the never-change list, but adding a transform on hover without a hover rule doesn't matter. But if I add `transition: transform` without ever changing transform, it's useless. However, Bootstrap might have hover transforms on cards. Adding a transition on transform is safe. But to be safe, I'll keep transition to box-shadow and background-color only.

Also, should I add a `background` to the hero column? That could make the whole column a card. Hmm. The original rule only centers text. Adding a background might be too invasive. But the "horizontal-strips" target wants alternating background colors per strip. Since we can't add new elements or change the HTML, we could give the column a cream background with radius and shadow to create a "strip" feel on mobile. That might be the bold move needed.

Let me think about what would be visually distinct:

- `.app-hero-section .row .col-lg-7`: Give it a cream/white card background, large radius, soft shadow. That makes it pop as a "strip" on mobile. But is `.col-lg-7` the only column in the row? On mobile it might be full-width. Adding a background to it would create a filled block — matches "horizontal strips" (full-width sections with distinct padding). The padding isn't changed, but the background creates a zone.

However, `background` on a Bootstrap column might conflict with the hero section's existing background. But that's exactly the visual refresh we want.

Let me add:

```css
.app-hero-section .row .col-lg-7 {
    text-align: center;
    background: #fffaf1;
    border-radius: 28px;
    box-shadow: 0 20px 45px -20px rgba(30, 40, 50, 0.25), 0 8px 20px -12px rgba(30, 40, 50, 0.08);
}
```

Hmm but a hero section column with a background might look odd. But the instruction says "More distinct this round." I'll do it.

Actually, wait. The media query is `max-width: 575.98px`, so on mobile. A hero section column with a cream card background could look nice as a "strip". I'll include it.

For the badge, `border-radius: 999px` makes it a pill. Bootstrap's `.badge` already has `border-radius: 0.375rem` by default. Overriding to a pill is a clear visual change. Good.

For the contact cards, adding a cream background, radius 24px, and a soft pillowy shadow. Good.

Also I should consider `transition` changes. Original has no transition, so adding is fine.

Should I add `border-color`? For the badge, I added a border with color. But adding `border` changes border-width from 0 to 1px, and the rule says "NOT border-width" under never-change? Actually it says "border-color and border-style (NOT border-width)" under "MUST CHANGE" — meaning I can change border-color/style but not border-width. But changing from 0 to 1px would change the width. Hmm. Adding a border where there was none changes the width. But the "MUST CHANGE" list says I can change border-color and border-style, NOT border-width. Adding `border: 1px solid ...` sets width. That's risky because it could affect box-sizing. Many elements use `border-width: 0` by default. Adding a border changes layout slightly. To be safe, I can use `box-shadow` to simulate a border instead, or use `outline` which doesn't affect layout. `outline` doesn't participate in layout. So instead of `border: 1px solid`, I can do `outline: 1px solid rgba(255,255,255,0.35); outline-offset: -1px;` — safe.

Good idea. Let me use `outline` for border-like effects.

Let me refine:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: #fdf6ec;
        border-radius: 28px;
        box-shadow: 0 24px 48px -24px rgba(44, 38, 30, 0.28), 0 10px 24px -18px rgba(44, 38, 30, 0.12);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f6c453 0%, #e07b39 100%);
        color: #3a2a1a;
        border-radius: 999px;
        box-shadow: 0 10px 22px -8px rgba(224, 123, 57, 0.6);
        transition: box-shadow 0.3s ease, filter 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #fffaf2;
        border-radius: 24px;
        box-shadow: 0 18px 40px -20px rgba(40, 35, 28, 0.25), 0 6px 16px -10px rgba(40, 35, 28, 0.08);
        transition: background-color 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease;
    }
}
```

Wait, adding `background` to `.col-lg-7` might be too much — it could make the hero look like a card inside the hero, which might not be desired. But the task explicitly asks for a bold visual change. However, I should consider: the hero section typically has a dark background image. Adding a cream background on the column might look like a floating card. That could be a nice "airy" look. But if the hero already has text and buttons, giving the whole column a background might make it look like a contained panel. This is a visual choice. I think it's acceptable.

But hold on — the target style says "horizontal-strips" with "Alternating background colors per strip" and "Strong color zones." On mobile (max-width 575.98px), each section stacks vertically, so giving `.col-lg-7` a strong background could create that "strip" effect. Good.

However, I'm a bit worried about adding `background` to a grid column because it could interfere with the hero's own background and images. But since we only have this snippet, I'll make it distinct.

Let me also consider adding a `color` to `.app-hero-section .row .col-lg-7` — if the hero text is white on a dark hero background, and I add a cream background, I need to set text color to dark. But the original doesn't set color, and text elements have their own colors (headings, paragraphs). Setting `color` on the column will inherit to all text unless overridden. That could help readability on a cream background. But if the original hero text was styled white via other classes, my `color` without `!important` might not override. But in a media query with same specificity, later in the file wins. Since this is a snippet, I can't know. I'll set `color: #2c2a26;` to ensure dark text on cream. But if headings have their own color classes, they'll still win. It's fine.

Actually, wait — Bootstrap hero columns often contain white