/* ============================================================
   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 CSS snippet with a target style of "vertical-flow" and effect variant "sharp-edges". 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 with three rules. I need to:
1. Keep all selectors exactly the same
2. Keep layout properties (text-align, font-size, padding) - wait, text-align is a layout property that I should NOT change. font-size is typography that I should NOT change. padding is layout that I can change ±20% max.

Wait, let me re-read the constraints:
- text-align: listed under LAYOUT → do not change
- font-size: listed under TYPOGRAPHY → do not change
- padding: can change ±20% but should keep similar

So the actually changeable things in this snippet are minimal. The original has:
- `text-align: center;` - must keep
- `font-size: 0.85rem;` - must keep
- `padding: var(--space-md) !important;` - can adjust slightly

Since the original uses CSS custom property `--space-md`, I could potentially change the value of `--space-md`? But that's defined elsewhere, not in this file. I could adjust the padding value slightly but within ±20%.

The target style is "vertical-flow" with "sharp-edges". The palette is warm minimal: off-white #faf8f3, soft black #2d2d2d, one muted accent (sage #87a878 or terracotta #c47b5a).

Since there are no colors, shadows, radius, transitions in the original CSS, I need to add some? But the rules are under a media query for max-width 575.98px. I should preserve the structure.

Actually, wait. The instructions say "Refresh the visual identity WITHOUT changing layout structure or class names." Since this snippet has almost no colors, I can add visual properties that are allowed:

- border-radius (visual rounding only) - can add
- box-shadow - can add
- transition - can add
- background-color - can add

But adding properties to elements could be considered changing their appearance. The allowed changes include:
- All color values: background, color, border-color, fill, stroke, outline-color
- box-shadow
- text-shadow
- border-radius
- gradient colors/stops
- transition timing, easing, duration
- filter, backdrop-filter
- opacity
- outline styles
- border-color and border-style
- caret-color, accent-color
- CSS custom properties values

So I can add color, shadow, radius, and transition properties to these elements without changing the selectors.

Let me think about what visual identity to give:

1. `.app-hero-section .row .col-lg-7` - text-align center (keep). I could add a color? Yes, `color: #2d2d2d` or maybe just leave it since it inherits. But to make changes visible, I could add color.

2. `.app-hero-section .badge.bg-warning` - font-size 0.85rem (keep). I could add background-color, color, border, box-shadow, border-radius.

3. `.contact-channels-section article, .contact-quick-section .contact-card` - padding var(--space-md) !important (keep similar). I could add background-color, border, border-radius, box-shadow, transition.

The target style says:
- Hard offset shadows: 4px 4px 0px solid color
- Small or zero border-radius (0-4px)
- Strong borders (2-3px solid)
- Snappy transitions (0.15s)

Warm minimal palette:
- off-white #faf8f3
- soft black #2d2d2d
- accent: sage #87a878 or terracotta #c47b5a

Let me craft the CSS. I need to keep the media query and selectors exactly.

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

Rewritten (adding visual properties):

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c47b5a;
        color: #faf8f3;
        border: 2px solid #2d2d2d;
        border-radius: 4px;
        box-shadow: 4px 4px 0px #2d2d2d;
    }

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

Hmm, but wait — `transform` is a layout property? Actually transform is not listed in the "never change" list explicitly, but it affects layout/visual. The list says "display, position, grid-template-*, width, height, padding, margin, 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". Transform is not listed, so I could add it. But since this is conservative mode, adding transform transitions might be fine as a transition target.

Actually, `transition` can include transform, color, box-shadow, background-color etc. That's fine.

But let me reconsider: Should I add `color` to the first rule? The first rule only had `text-align: center`. Adding color is an allowed change. However, since color inherits, adding it doesn't hurt.

Let me think about the `bg-warning` badge. In Bootstrap, `bg-warning` is typically yellow/orange background. With the warm minimal palette, I should change it to terracotta #c47b5a or sage #87a878. Terracotta makes sense for a warning badge — it's a warm muted orange/brown. Let me use terracotta.

For the hard offset shadow: `box-shadow: 4px 4px 0px #2d2d2d;` — that's the signature sharp-edges style.

For strong border: `border: 2px solid #2d2d2d;`

For border-radius: small, 4px max. I'll use 4px or 2px. The variant says "Small or zero border-radius (0-4px)". Let me use 4px for cards, and maybe 2px for the badge.

For snappy transitions: `transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;`

Now, padding: The original uses `var(--space-md)`. I need to keep it similar (±20% max). Since it's a variable, I don't know its value. Changing `var(--space-md)` to something else would change the variable reference — but the instructions say CSS custom property values can change. However, `--space-md` is probably defined elsewhere, not in this snippet. Since I can't change the variable's definition here, I should keep `var(--space-md)` as is to avoid breaking layout. Or I could change it slightly but that's risky. Best to keep it exactly.

Actually, wait — the padding with `!important` is a strong statement. Let me keep it as is.

Let me also think about the `.contact-channels-section article` — these are articles, probably with backgrounds. I can add cards styling.

But hold on — in the first rule, should I add a color? The palette says "off-white #faf8f3, soft black #2d2d2d". If the hero section text is centered, setting color to soft black makes sense. But it might override something. In conservative mode, adding is okay.

Actually, let me be careful: the instructions say "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." So I can add those properties. Let me add:

Rule 1:
- `color: #2d2d2d;`

Rule 2 (badge):
- `background-color: #c47b5a;`
- `color: #faf8f3;`
- `border: 2px solid #2d2d2d;`
- `border-radius: 2px;`
- `box-shadow: 4px 4px 0px #2d2d2d;`

Wait, badge is inline element. Box-shadow works on inline elements too. Border on inline elements can be a bit tricky but works for a badge (which is usually inline-block in Bootstrap). Actually Bootstrap badges are `display: inline-block` by default. So adding border and box-shadow should be fine.

Rule 3 (cards):
- `background-color: #faf8f3;`
- `border: 2px solid #2d2d2d;`
- `border-radius: 4px;`
- `box-shadow: 4px 4px 0px rgba(45, 45, 45, 0.9);`
- `transition: box-shadow 0.15s ease, transform 0.15s ease;`

But wait, `text-align: center` on the first rule is a layout property I must keep — and I am keeping it. Good.

Should I add a hover state? The instructions say pseudo-classes must be preserved exactly — but adding :hover would be adding a new selector, which might not be "preserving." The instruction says "Selectors: keep EXACTLY" and "Pseudo-classes (:hover, :focus, ::before, ::after)" — I think this means if they exist, keep them the same. Adding new ones would change the selectors, which could be considered against the rules. The task says "Only change colors, shadows, radius, transitions, gradients." Adding a :hover rule would add a selector, which is risky. I'll avoid adding new selectors.

But can I reference hover in transition? Yes, `transition` on the base class is fine, and if there's a hover rule elsewhere it will use it. So adding transition is safe.

Let me also consider: Should I change `text-align: center`? No, it's in the "never change" list (text-align). Keep it.

`font-size: 0.85rem` — typography, keep it.

`padding: var(--space-md) !important;` — layout, keep similar. Keep exact to be safe.

Now, let me reconsider the visual identity. The target style is "vertical-flow" with "sharp-edges". The layout pattern says:
- Single column layout: "grid-template-columns: 1fr" or simple flex column
- flex-direction: column where appropriate
- Large vertical gaps (48-72px)
- Narrow content max-width (680-800px) centered

But this is under a media query for small screens (max-width: 575.98px). On mobile, single column is already the default. I can't change layout, so I'll embody the vertical-flow spirit via the card styles: vertical rhythm with strong shadows, etc.

Actually, the "vertical-flow" layout pattern is "Aggressive only" per the prompt — but the mode says "CONSERVATIVE (HTML fixed, visual changes only)". The target style is just a reference for the visual refresh. I can only apply colors/shadows/radius/transitions. That's consistent.

Hmm, but the task says "Layout pattern (Aggressive only)". This suggests the layout pattern is only for aggressive mode, and in conservative mode I should only do visual tweaks. Good.

So my changes: add background, border, radius, shadow, transition, color to the elements.

Let me also consider the palette more. Warm minimal:
- off-white #faf8f3 as background for cards
- soft black #2d2d2d for text/borders
- sage #87a878 or terracotta #c47b5a as accent

For badges (warning), terracotta #c47b5a is a good fit. Let me use that.

For cards, I could use off-white background with soft black border and hard offset shadow. The shadow color could be a darkened terracotta or sage for a subtle accent. Let me use `4px 4px 0px #2d2d2d` for a clean hard shadow. Or maybe a semi-transparent black for a softer-but-still-hard shadow.

Actually, sharp-edges says "Hard offset shadows: 4px 4px 0px solid color". The "solid color" could be the soft black. Let me use `#2d2d2d` with full opacity for the strongest effect.

For border-radius: 0px for sharp edges? "Small or zero border-radius (0-4px)". Let me use 0px to be truly sharp, but 2-4px is also acceptable. The variant name is "sharp-edges", so 0px or 2px. Let me use 2px for a slight softening, or 0 for pure sharp. Hmm. I'll go with 0px for the badge and 4px for cards? No, to be consistent with sharp edges, let me use 2px everywhere or 0. Let me use 0px for a truly sharp edge — actually many brutalist designs use 0. Let me use 2px as a compromise. Hmm, the variant says "(0-4px)". I'll pick 4px for cards and 0px for badges to vary. Actually, let me keep it simple: 4px for cards, 2px for badge.

Wait, re-reading the variant: "Small or zero border-radius (0-4px)". I'll use 4px max. Let me use:
- badge: border-radius: 2px;
- cards: border-radius: 4px;

Strong borders (2-3px solid): I'll use 2px for both.

Snappy transitions (0.15s): `transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;`

Now, for the first rule `.app-hero-section .row .col-lg-7`, I'll add `color: #2d2d2d;`. But is this appropriate? It's the hero section column, text centered. Setting the text color to soft black aligns with the warm minimal palette. It's an allowed color change.

Let me also think about whether I should add a custom property. The original uses `var(--space-md)`. I could redefine `--space-md` value? No, because that would affect the whole file where it's defined. And it might be defined in this file (block 2 of 2, actually the file is saishi.css). But changing the variable's value could affect other rules. Better not.

Let me write the final CSS.

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c47b5a;
        color: #faf8f3;
        border: 2px solid #2d2d2d;
        border-radius: 2px;
        box-shadow: 4px 4px 0px #2d2d2d;
    }

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

Wait, should I include `transform` in transition even though base has no transform? It's fine; it will transition if transform changes (e.g., from a hover rule elsewhere). But in conservative mode, maybe I should not overreach. Adding transition is allowed ("transition timing, easing, duration" are listed as changeable). I'll include it.

But hold on — `padding: var(--space-md) !important;` — is this "within ±20%"? Yes, unchanged. Good.

One concern: adding `background-color: #faf8f3` to `.contact-channels-section article` and `.contact-quick-section .contact-card` might override existing backgrounds. But the whole point is to refresh the visual identity. Since the original has no background, adding one is a visual change, which is allowed.

However, should the cards be off-white or should the page be off-white? The page background is likely set elsewhere. For cards, off-white with a black border and offset shadow creates a nice brutalist card look. Good.

For the badge, `bg-warning` in Bootstrap has `--bs-warning-bg` etc. Overriding with terracotta and adding border/shadow makes it pop.

Let