/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

We need to rewrite the given CSS block with visual changes only. The original CSS is a media query with a few rules. We need to preserve selectors, layout properties, typography, etc. But we can change colors, shadows, border-radius, transitions, etc. However, the original CSS doesn't have many colors; it sets text-align, font-size, padding. Those are layout/typography? Let's analyze:

Original:
```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }
}
```

Constraints:
- Never change selector list, media query, display, position, grid, width/height, padding/margin (within ±20%), gap, etc.
- text-align: center is a layout property? It says in "Typography" no change for text-align? Actually in the "NEVER CHANGE" section under Layout, it includes text-align? Wait: under Typography, it says: "font-family, font-size, font-weight, font-style, line-height, letter-spacing, word-spacing, text-transform, white-space, word-break" — text-align is not specifically listed under typography, but in the layout list it says "text-align, vertical-align" are in the "NEVER CHANGE" list? Let's check original prompt: Under "📐 LAYOUT (HTML cannot adapt to changes):" It lists "display, position, grid-template-*, ... width, height, min/max-width, ... padding, margin (keep similar values, ±20% maximum), gap, ... justify-content, align-items, align-self, float, clear, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit, object-position, text-align, vertical-align". Yes, text-align is under Layout, never change. So keep text-align: center.

- font-size: 0.85rem is under Typography, cannot change. So keep font-size: 0.85rem.

- padding: var(--space-md) !important is a padding property, must keep similar value (within ±20%). The value is a CSS variable reference. We probably should keep the same padding value because changing var would affect global? But we can change the custom property value? The prompt says CSS custom properties (--color-*, --shadow-*) values can change, but only colors/shadows, not spacing variables. So we should keep padding as is.

Thus, what can we actually change in this block? There are no colors or shadows originally. We might add visual properties (colors, shadows, border-radius, transitions) to these elements, but must not break layout. We can add background, color, border, border-radius, box-shadow, transition, etc., as long as we don't change the listed properties. The selectors remain same. Since the original is minimal, we can introduce visual identity enhancements within the media query.

The target style is "horizontal-strips" with "sharp-edges" variant. This suggests alternating background colors per strip, but the selectors here are specific components. We can add backgrounds, borders, shadows, small radius, transitions.

We need to be careful: the media query is for small screens. Adding colors to .app-hero-section .badge.bg-warning etc. The elements already may have existing styles elsewhere (outside this media query). We only need to output this block rewritten.

We should interpret "horizontal-strips" as a style theme across full-width sections? But we are limited to these selectors. We can apply strong borders and offset shadows to the cards/article, and maybe a background color.

The "horizontal-strips" pattern: alternating white/cream/dark/white. We don't know the entire document; we just have these selectors. We can assign colors to these elements to fit the pattern: maybe .contact-card gets cream background, article gets dark background? But we need to be mindful of contrast and accessibility.

Let's produce a rewritten version that adds visual properties consistent with "sharp-edges": border-radius: 0px (or 2px), box-shadow: 4px 4px 0px 0px some solid color, borders: 2px solid dark, transitions: 0.15s. Also maybe set background colors, text colors.

We can change font-size? No. padding? Keep as var(--space-md). text-align center keep.

The first selector .app-hero-section .row .col-lg-7 { text-align: center; } — we might add some color? It is a column, likely a hero text container. Could add a background? That might affect layout? Background is allowed. But if it's a full-width column, adding a background strip could align with horizontal-strips. But perhaps not necessary. We can add a background color to the column to create a strip effect. However, adding padding might not be allowed. Adding background is fine.

But we need output only CSS. We can add declarations.

Need to preserve exactly the selectors and media query. Original media query order and rule order should maybe stay? We can keep same order.

Let's craft:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background-color: #fdfdf0; /* cream */
        border-bottom: 3px solid #1a1a2e;
        box-shadow: 4px 4px 0px 0px #1a1a2e;
        border-radius: 0px;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #ffb347; /* orange */
        color: #1a1a2e;
        border: 2px solid #1a1a2e;
        box-shadow: 3px 3px 0px 0px #1a1a2e;
        border-radius: 0px;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .app-hero-section .badge.bg-warning:hover {
        transform: translate(2px, 2px);
        box-shadow: 1px 1px 0px 0px #1a1a2e;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #fdfdf0;
        border: 2px solid #1a1a2e;
        border-radius: 0px;
        box-shadow: 4px 4px 0px 0px #1a1a2e;
        transition: box-shadow 0.15s ease, transform 0.15s ease;
    }
}
```

But note: .badge.bg-warning might be using Bootstrap's .badge and .bg-warning classes. Adding background-color will override Bootstrap's background gradient? That's fine. Need to ensure `font-size` remains as original. We didn't change it. We added `transition`, `border`, etc. We added a hover state. Is adding a pseudo-class hover allowed? The prompt says pseudo-classes are selectors that must be kept exactly, but we can add new rules? The instruction says "Selectors: keep EXACTLY". That refers to existing selectors. Can we add new selectors? The task is to rewrite the given CSS visual identity. It doesn't explicitly forbid adding new selectors, but "The HTML is FIXED — only colors, shadows, and decorative properties may change." In the "NEVER CHANGE" list, selectors are to be preserved exactly. Adding a new selector for :hover might be allowed if we are not changing existing selector list? But in conservative mode, we should avoid adding new selectors not present in original, because it could change behavior. The instruction says "Selectors: keep EXACTLY (.post-card stays .post-card)" but doesn't explicitly forbid adding new ones, but the safest is to not add new selectors. We can only modify existing rules. So no hover rule. If we want transitions, that's fine, but no new selectors.

Maybe we can use `transition` on existing elements. Let's keep only the three existing rule blocks.

Also, the first rule currently only sets text-align. We can add color and background.

But we must be careful: The background of .col-lg-7 might cause visual issues if it's inside a row with gutters, but it's allowed. However, the target style "horizontal-strips" might want sections to alternate. The selector .app-hero-section .row .col-lg-7 is a column, not a full-width strip. Maybe better to leave it mostly unchanged, and focus on cards. But the prompt says "All color values ... background, color, border-color, fill, stroke, outline-color" can change. There are no existing colors, so we can introduce.

Let's ensure we don't change `font-size`, `padding`, `text-align`. We can add `background-color`, `color`, `border`, `border-radius`, `box-shadow`, `transition`.

For "sharp-edges", border-radius small or zero. We'll use 0px.

For "horizontal-strips", alternate background colors. We can choose:

- .col-lg-7: background-color: #fff (white)
- .badge.bg-warning: background-color: #ffcc00 (strong color), color: #1a1a2e
- .contact-channels-section article, .contact-quick-section .contact-card: background-color: #f7f3e8 (cream), border: 2px solid #1a1a2e, box-shadow: 4px 4px 0px #1a1a2e.

The outer document probably has a dark background? We don't know. Maybe use a palette: ink #1a1a2e, cream #f9f6f0, paper #ffffff, accent #e54b4b or #f4a261.

Let's decide palette:
- Dark ink: #1e1e24
- Deep accent: #e63946
- Warm cream: #fdf6e3
- White: #ffffff
- Soft gold: #f4a261

For sharp edges, use 3px solid borders and 4px 4px 0 0 shadows.

Need to output only CSS, no markdown.

But the file fingerprint and request ID are given; do we need to include any header? No, "first character = first CSS character" means no comments. So output just CSS.

Let's craft final CSS:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #f4a261;
        color: #1e1e24;
        border: 2px solid #1e1e24;
        border-radius: 0;
        box-shadow: 3px 3px 0 0 #1e1e24;
        transition: box-shadow 0.15s ease, transform 0.15s ease;
    }

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

But is adding a transition OK? Transition is allowed to change timing/duration; adding is a decorative property. Yes.

Could use `border-radius: 2px` for slight rounding. The variant says 0-4px, so 0 is fine. "Strong borders (2-3px solid)" — use 2 or 3.

For `box-shadow`: "Hard offset shadows: 4px 4px 0px solid color" — use `4px 4px 0 0 color`. Use no blur, no spread. Good.

Check padding unchanged: `var(--space-md)` stays. Font-size unchanged. Text-align unchanged.

One thing: The original first rule has only text-align. We added border-bottom and box-shadow to a container. That might change the layout? Box-shadow doesn't affect layout. Border-bottom does affect box-sizing? By default, border-box? In Bootstrap, box-sizing is border-box, so border width may reduce content width but not overall width. This could be considered a layout change? Border changes border-width, and the prompt says "border-color and border-style (NOT border-width)" can change. It explicitly says cannot change border-width. We are setting border: 2px solid, which sets border-width — that's forbidden! Wait: "NEVER CHANGE: border-color and border-style (NOT border-width)" means you may change border-color and border-style, but NOT border-width. So we must not change border-width from whatever it is (likely 0) to 2px. We can only change border-color or border-style if a border already exists elsewhere? But if original rule doesn't set border, adding a border with width changes layout. That's forbidden. So we cannot add border with width. We can add outline? Similarly, outline-width? The prompt says "outline styles (color, type)" can change, but "outline styles (color, type)" maybe outline-color and outline-style, not width? Actually in the "MUST CHANGE" list: "outline styles (color, type)" and "border-color and border-style (NOT border-width)". So we cannot set border-width. We cannot add a border because it would create a border-width. Unless we use `border: 0 solid color`? But then no visible border. So we should avoid adding borders. Instead, we can use box-shadow to simulate borders? Or use `outline`? Outline also has width. Maybe we can use `box-shadow` with 0 0 0 2px color to create a border-like effect without layout change? Box-shadow doesn't affect layout, so it's allowed. For sharp edges, we can use inset or spread shadow to simulate border. For example `box-shadow: 0 0 0 2px #1e1e24, 4px 4px 0 0 #1e1e24;` This creates a hard border and offset shadow. That's allowed because box-shadow doesn't affect layout. We can still achieve strong border look.

Thus, avoid `border` property entirely for elements that didn't have it. The original CSS didn't set borders. So don't add border-width. We can change border-color if existing border from other CSS? But within this block, there is no border. We are to rewrite this CSS only; adding border-width globally on these elements would alter layout, forbidden. So use box-shadow for borders.

What about `background-color`? Adding background is fine, no layout change. `color` fine. `border-radius` fine (doesn't affect layout? It doesn't change dimensions). `box-shadow` fine.

Also, `transition` is fine.

So modify:

```
.app-hero-section .row .col-lg-7 {
    text-align: center;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px #1e1e24, 4px 4px 0 0 #1e1e24;
    border-radius: 0;
}
```
But this puts a heavy border around the column, maybe too much. But okay.

Alternatively, we can add `outline: 3px solid #1e1e24;` but outline-width is a width, forbidden. So no.

Maybe skip adding strong border to first rule, just background. The target style can be represented by cards.

Let's be conservative: avoid adding border-like shadows to columns that may not need it. But the variant demands strong borders. We can apply to article/card only, using box-shadow layering.

Let's craft:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background-color: #ffffff;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #f4a261;
        color: #1e1e24;
        box-shadow: 0 0 0 2px #1e1e24, 3px 3px 0 0 #1e1e24;
        border-radius: 0;
        transition: box-shadow 0.15s ease;
    }

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

Need to ensure we preserve `!important` on padding? Yes, keep. The original padding: var(--space-md) !important. We keep that exactly.

Now, is `box-shadow` with spread creating a "border" effect that's allowed? Yes, it's a decorative shadow.

Check order: Original first rule sets text-align only. We added background. Good.

One concern: The badge `.badge.bg-warning` may already have `background-color` from Bootstrap. We override it. Fine.

Let's also consider `border-radius`: The target "sharp-edges" says 0-4px. We use 0.

`transition`: Snappy 0.15s. We use 0.15s ease. Good.

If we want to satisfy "horizontal-strips" alternating colors: the three elements have different backgrounds (white,