/* ============================================================
   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 answer rewrite CSS per instructions. Need only visual changes. Original CSS is small media query with layout properties. Need preserve selectors and layout exactly. But target style horizontal-strips, sharp edges. Need "refresh visual identity WITHOUT changing layout structure or class names" but original has only text-align, font-size (typography fixed? It says typography font-size font-weight line-height unchanged? Under NEVER CHANGE includes font-size? Actually "📝 TYPOGRAPHY (font system fixed): font-family, font-size, font-weight, font-style, line-height, letter-spacing, word-spacing, text-transform, white-space, word-break" So don't change font-size. But "visual changes only" maybe must output same except colors? Original only has media query with text-align and font-size and padding. No colors. Need perhaps add colors? But preserving selectors exactly. Since no colors to change, output same? But task wants refreshed. But we can change only visual properties, include maybe adding background-color? Could change transition, box-shadow? But elements not specified. We cannot add properties? It says only colors, shadows, and decorative properties may change; but likely should keep original declarations and maybe add visual properties? Need be careful: "Only change colors, shadows, radius, transitions, gradients." Original CSS has no colors but can we modify text-align? That's layout, no. padding can change ±20%, but target style maybe no need. Need output rewritten CSS preserving all selectors and layout exactly. For media query with three rules. Maybe easiest: output same CSS unchanged because no visual to refresh. But user expects changed. Need make some visual changes? Could use `background-color` on element? But not in original. Maybe "refresh visual identity" requires substituting new palette? But there are no colors. Need perhaps add visual properties to selectors? It says NOT to change selectors or layout; adding background-color wouldn't change layout. Could add `background-color`, `border-radius`, `box-shadow`, `transition` to these elements, but this would affect layout? It wouldn't change dimensions unless box-sizing? box-shadow no layout, border-radius no layout, transition no layout. Background-color no layout. But perhaps adding declarations to existing rules is allowed? It says "Only colors, shadows, and decorative properties may change" Could add. But also "NO AI marker comments." Need produce something that meets target style horizontal-strips sharp edges. Since only these selectors, we can add `background-color`, `box-shadow`? But elements are inside hero, contact channels. The "horizontal strips" maybe not possible. Better to keep same and maybe add `background-color`? Let's parse system prompt.

We are expert CSS designer conservative mode. Mission: Refresh visual identity without changing layout structure or class names. HTML fixed — only colors, shadows, and decorative properties may change. Rules: ✅ MUST CHANGE (visual identity only): all color values, box-shadow, text-shadow, border-radius, gradient colors, transition, filter, backdrop-filter, opacity, outline styles, border-color/style, caret-color, accent-color, custom props. 🔒 NEVER CHANGE: selectors, display, position, grid, width,height, padding/margin (keep similar), gap, justify, etc., typography (including font-size). So original CSS includes font-size declaration. Since typography fixed, can't change. But maybe "font-size" in original is part of typography, so preserve exactly. text-align preserve. padding preserve. Therefore no possible changes except maybe add properties? But if no existing visual properties, output same.

However the file might contain only this snippet? The "File: assets/css/saishi.css#块2/2" means block 2 of 2. The original CSS block is just media query. We need rewrite "this CSS visually." Perhaps we can add visual declarations to existing selectors. Need ensure no layout changes. Let's see rules: "ONLY the rewritten CSS, preserving ALL selectors and layout exactly" and "Only change colors, shadows, radius, transitions, gradients." So if adding declarations not in original, is that changing? It might be acceptable if they are visual properties. But "preserving ALL selectors" yes selectors same. "layout exactly" additions backgrounds/shadows don't affect layout. Still, there is risk of adding extra style not requested? Yet target style aggressive horizontal strips with strong color zones. But these selectors are specific components, not full-width strips. Need maybe assign cream/dark backgrounds to the contact sections and hero? Let's consider.

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

Need "horizontal-strips" pattern: full-width sections alternating white/cream/dark/white, strong color zones. Since media query only mobile, maybe we can add backgrounds to parent sections? But selectors are specific inner elements, not full-width. Adding background to `.contact-channels-section article` could make cards colored, not strips. But "horizontal strips" style maybe can be reflected by strong background zones on `.app-hero-section .row .col-lg-7`? Hmm.

Maybe need rewrite with new color variables? No CSS variables defined in snippet. Could change `padding` var? No. Perhaps use `background`, `box-shadow`, `border`, `border-radius`, `transition`. Need "small or zero border-radius", "Hard offset shadows: 4px 4px 0px solid color", "Strong borders (2-3px solid)", "Snappy transitions (0.15s)".

Potential output:
```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: #fff8e7;
        box-shadow: 4px 4px 0 0 #1a1a1a;
        border: 2px solid #1a1a1a;
        border-radius: 0;
        transition: none;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: #f4b400;
        color: #1a1a1a;
        border-radius: 0;
        box-shadow: 4px 4px 0 0 #1a1a1a;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #fff8e7;
        border: 2px solid #1a1a1a;
        border-radius: 0;
        box-shadow: 4px 4px 0 0 #1a1a1a;
    }
}
```
But wait: `.app-hero-section .badge.bg-warning` already has bg-warning likely background color. Changing background to `#f4b400` okay. But `.app-hero-section .row .col-lg-7` adding background and border may alter visual significantly but not layout. But is this "preserving selectors and layout exactly"? Yes. But is it "refreshing all color values"? There were no colors. We can introduce colors. However the instruction "MUST CHANGE: All color values" doesn't apply if none. But maybe adding color is a visual change.

Need consider "No markdown fences, no explanations" so output only CSS. But also "No AI-REWRITTEN comments".

Need ensure border-color/style not width? It says border-color and border-style CAN change, not border-width. So `border: 2px solid` is border-width, forbidden? Under NEVER CHANGE: "border-color and border-style (NOT border-width)" Wait in NEVER CHANGE list says: "border-color and border-style (NOT border-width)" Actually let's reread:

```
✅ YOU MUST CHANGE:
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow ...
  • border-radius ...
  • transition ...
  • filter...
  • opacity
  • outline styles (color, type)
  • border-color and border-style (NOT border-width)
```

So border-width cannot change? It says change border-color and border-style, not border-width. But it also says "border-color and border-style (NOT border-width)" meaning border-width is not to be changed? In bold it says "🔒 NEVER CHANGE ... border-color and border-style (NOT border-width)" Wait that section is "NEVER CHANGE" perhaps includes "border-color and border-style"? Let's read original prompt text exactly:

"🔒 NEVER CHANGE (would break HTML layout):
...
📐 LAYOUT (HTML cannot adapt to changes):
...
📝 TYPOGRAPHY ...
🎬 ANIMATION & MEDIA:
...
"

Actually the "NEVER CHANGE" list includes display, position, grid, width, height, padding, margin, gap, etc. It does NOT include border-width explicitly? Let's scroll up:

From user:
```
✅ 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 ...
  • filter, backdrop-filter
  • opacity
  • outline styles (color, type)
  • border-color and border-style (NOT border-width)
  • caret-color, accent-color
  • CSS custom properties ...
```

Border-color and border-style must change, but border-width NOT (so leave border-width if present). In original no borders.

"🔒 NEVER CHANGE ...:
🏷️ SELECTORS ...
📐 LAYOUT ...
  • width, height, min/max-width, min/max-height
  • padding, margin (keep similar values, ±20% maximum)
  • gap...
  • ...
  • box-sizing
  • visibility
  • aspect-ratio
  • object-fit...
  • text-align, vertical-align
📝 TYPOGRAPHY ...
"
No mention of border-width. So border-width can be changed? Wait "border-color and border-style (NOT border-width)" in must-change means do not change border-width, maybe because border-width affects layout. So no border-width change. Since we are adding border, we'd set border-width 2px? Original did not have border, so adding border could affect layout (element dimensions) unless box-sizing border-box? Usually could increase size. But box-sizing may be global. To avoid layout change, we shouldn't add border. But target style demands strong borders. Yet we can add `outline` instead? Outline doesn't affect layout. Or `box-shadow` simulates border. But target says strong borders (2-3px solid). Could use `box-shadow: inset 0 0 0 2px #1a1a1a`? That is visual border without layout. But box-shadow in must-change list. Maybe we can preserve layout by using inset shadows.

Similarly, hard offset shadows 4px 4px 0 color with `box-shadow: 4px 4px 0 0 #1a1a1a` no layout. Good.

What about padding? Original has padding with !important. We can keep same or adjust ±20%. But target horizontal strips wants distinct padding 60-100px vertical. But this is mobile media query and only inner elements, so shouldn't change to 60-100? Also padding is layout, keep within ±20%. So keep `var(--space-md)` exactly? Since changing the value would affect layout. The prompt says "keep similar values, ±20% maximum". Since `var(--space-md)` value unknown, cannot approximate. Keep same.

Need maybe add `background` to `.app-hero-section .row .col-lg-7`. But `.col-lg-7` is column, adding background makes a block inside hero. Could create strong color zone. But is that "horizontal strip"? Maybe. For sharp edges, `border-radius: 0`; no issue.

But we need be careful with "selectors character-for-character preserved" and "no AI marker comments". We can add declarations within existing rule blocks. Need preserve selectors exactly and order? Could add after original declarations. Need preserve media query.

Should we change `text-align: center`? No, that's layout, never change. `font-size: 0.85rem` no, typography fixed. `padding` no. So all original declarations remain identical. Add new declarations.

Need perhaps introduce colorful "horizontal-strips" target: alternating white/cream/dark/white pattern. For each of three rules:
- `.app-hero-section .row .col-lg-7`: maybe `background: #fff8e7` cream? But target says "Full-width sections (width: 100%)" not applicable. "Each strip with distinct padding (60-100px vertical)" not applicable. "Alternating background colors per strip": white/cream/dark/white. Strong color zones. Could choose:
  - `.app-hero-section .row .col-lg-7`: background: #1a1a1a; color: #fff? But text-align center; changing color affects text maybe okay. However text color originally inherits; adding color might make text visible. But "colors may change" yes.
  - `.badge.bg-warning`: background #ffd166, color #1a1a1a.
  - contact articles/cards: background #fffdf5; color #1a1a1a; 
Need "dark zone" perhaps hero column dark? But hero might have white text already? Unknown. Could be risky. Better to keep text colors neutral? Hmm.

But "All color values: background, color, border-color" in must-change means if there are any colors, change. Since none, no mandate. We can add minimal visual identity: use box-shadow and background colors.

Need ensure `box-shadow` values valid. Syntax `4px 4px 0 0 #1a1a1a` is offset-x offset-y blur spread color. This is valid hard offset shadow. It says "Hard offset shadows: 4px 4px 0px solid color" but CSS box-shadow doesn't have "solid"; use `4px 4px 0 0 #color`. Good.

Need maybe multiple shadows? Could use `box-shadow: 4px 4px 0 0 #f4b400, 8px 8px 0 0 #1a1a1a;` But target "4px 4px 0px solid color" maybe one.

Need strong borders via `outline`? Could add `outline: 2px solid #1a1a1a; outline-offset: -2px;` Since outline doesn't affect layout and is visual. Good. But "border-color and border-style (NOT border-width)" suggests don't use border. Use `outline` is allowed under "outline styles (color, type)"? But `outline` includes width too? They said "outline styles (color, type)" so maybe no width? Actually outline shorthand includes width; but outline doesn't affect layout. Could use `outline: 2px solid #1a1a1a;` Fine.

Need avoid changing font-size? Keep original.

Need maybe change transition: no existing transitions, add `transition: none`? Actually "Snappy transitions (0.15s)" but no hover rules. Adding `transition: all 0.15s steps(2, jump-none)`? But transition only matters if properties change on state. No hover states. Could still define. But no need.

Need maybe use CSS variables? Original custom properties? Not in snippet, but could set `--space-md`? No, that could affect layout. Don't.

Need perhaps add `filter`? No.

Question: Should we output only the block, preserving exact media query? Yes.

Need decide final CSS. Let's craft robustly:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: #1a1a1a;
        color: #fff8e7;
        box-shadow: 4px 4px 0 0 #f4b400;
        outline: 2px solid #f4b400;
        border-radius: 0;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: #f4b400;
        color: #1a1a1a;
        box-shadow: 4px 4px 0 0 #1a1a1a;
        border-radius: 0;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #fff8e7;
        color: #1a1a1a;
        box-shadow: 4px 4px 0 0 #1a1a1a;
        outline: 2px solid #1a1a1a;
        border-radius: 0;
    }
}
```

But is `color` maybe considered typography? No, color is visual. Good. But does adding background to `.col-lg-7` create block that is not full width? It is inside row, column width. Could still be okay.

However "horizontal-strips" target says "Alternating: white / cream / dark / white pattern" So maybe set:
- `.app-hero-section .row .col-lg-7`: dark `#1a1a1a` (dark zone), color cream
- `.badge.bg-warning`: yellow/cream? Actually badge warning is yellow, not strip. But okay.
- contact articles/cards: white/cream. Fine.

Need "Strong color zones" maybe use `background: #ff9f1c`? Let's pick palette:
- Ink: `#111111` or `#1a1a1a`
- Paper: `#fffdf5` (cream)
- White: `#ffffff`
- Accent: `#ffb703` (gold)
Use dark `#111111`, cream `#fff6e5`, white `#ffffff`, accent `#ffb703`.

Let's define:
```
background: #111111;
color: #fff6e5;
box-shadow: 4px 4px 0 0 #ffb