/* ============================================================
   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 CSS visually while keeping selectors, layout, etc. The original CSS is a media query block with 3 rules. It uses classes: .app-hero-section .row .col-lg-7, .app-hero-section .badge.bg-warning, .contact-channels-section article, .contact-quick-section .contact-card. These are existing classes. We can only change colors, shadows, radius, transitions, gradients, opacity, etc. But the original CSS doesn't have many visual properties except text-align and padding. Note padding is a layout property but allowed to vary ±20%. Wait, the original says "padding, margin (keep similar values, ±20% maximum)". We can adjust padding values slightly. But the rule says "padding: var(--space-md) !important;" we can change to a slightly different spacing but keep within 20%. Since we don't know the value of --space-md, we can replace with a concrete value? But the original uses a variable. Changing the variable reference to a different variable or value is a color/property change. We need to be careful: the selectors must stay exactly. The declarations can change.

The target style: vertical-flow, warm minimal palette, flat-solid with no box-shadow, solid backgrounds, minimal radius. However, the existing rules don't set colors, shadows, or radius. We can add new visual properties? The instruction says "Only colors, shadows, and decorative properties may change" and "ALL selectors and layout exactly as-is". We can add new declarations to selectors? The original CSS only has text-align and padding. We can add color, background, border-radius, etc. to these selectors to refresh visual identity, as long as we don't change layout. That is allowed because the task is to refresh visual identity. But we must preserve existing declarations? We can change them. We can add new ones. Need to ensure we don't alter layout properties except padding within 20%. We can change text-align? That's a layout-ish property (typography? text-align is in the never-change list: "text-align, vertical-align" are listed under LAYOUT? Actually the NEVER CHANGE list includes "text-align, vertical-align" in the layout section. Wait, check: "📐 LAYOUT (HTML cannot adapt to changes): ... text-align, vertical-align" Yes, text-align is in the never-change list. So we must keep text-align: center as is. We cannot change it. Similarly padding is allowed within ±20%. The original uses `var(--space-md)` for padding. We don't know the computed value. We could replace with a slightly different value, but that might change layout. To be safe, we can keep the variable or use a similar value. The target says vertical gaps large etc. But that would require changing layout properties like margin/padding/gap. We can only adjust padding ±20%. The original has `padding: var(--space-md) !important;` on those elements. We can replace with a custom property or a specific value that is similar. Since we don't know --space-md, it's risky. We could keep `var(--space-md)` but then no visual change. We could add `padding-left` and `padding-right`? But that might be layout change. We need to output CSS that refreshes visual identity. Since the original file segment is only that media query, we can add new color and background declarations to the selectors, and perhaps adjust radius/shadow. But the flat-solid variant says box-shadow: none everywhere. We can add box-shadow: none. We can add border-radius: 0 or 4px. We can add background colors for .contact-card etc. But we need to know the context. However, the instruction says "File: assets/css/saishi.css#块2/2" and it's a partial file. We are given only this block. We should transform this block as requested. The target style "vertical-flow" is about layout pattern, but we cannot change layout. So we can only apply the color palette and effect variant to the existing elements.

Let's examine the selectors:

1. `.app-hero-section .row .col-lg-7` – This is a column in a row within hero. We can set color, maybe background? But adding background to a column might break layout? It could be okay as a visual change. But if it's a column, background could affect look but not layout. We can add color and text-shadow? Since flat-solid, no shadows. We can set `color: #2d2d2d;` and maybe `caret-color`, not relevant. Could set `background: transparent;` or `background: #faf8f3;`? Not sure. We need to be conservative: don't add layout-changing properties. Background is fine. Border-radius is fine. Box-shadow none is fine.

2. `.app-hero-section .badge.bg-warning` – This is a badge with Bootstrap bg-warning class. We can override background-color to sage or terracotta. We can set `background-color: #c47b5a;` and `color: #fff;` or `#faf8f3`. Also border-radius maybe 4px. The original rule sets font-size: 0.85rem; we keep font-size (typography unchanged). We can add padding? It already has Bootstrap badge padding, we shouldn't change padding because we don't know. We can add border-radius, color, background-color. We can also set `box-shadow: none;`.

3. `.contact-channels-section article, .contact-quick-section .contact-card` – These have padding: var(--space-md) !important;. We can keep or adjust padding slightly. For visual identity, we can set background-color: #fff or #faf8f3, border: 1px solid #e8e4dc, border-radius: 4px, box-shadow: none. But note the original selector is a list of two selectors. We need to keep exactly.

The target palette: off-white #faf8f3, soft black #2d2d2d, muted accent sage #87a878 or terracotta #c47b5a. Since flat-solid, no gradients. We can use sage for one, terracotta for another. For badge.bg-warning, orange/warning is close to terracotta #c47b5a. So set badge to terracotta. For contact cards, maybe background #faf8f3 with border #e2ddd3; or white #ffffff with border #eae6de. For hero col, color #2d2d2d.

We also need to consider the media query condition. We must keep the @media (max-width: 575.98px) exactly. The original has a closing brace. We need to output the full rewritten CSS within the media query. We can add declarations and maybe additional rules? The instruction: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is." This likely means we only transform the provided rules. We can add new selectors? Probably not, because "Selectors: keep EXACTLY" and "Selector lists (commas)" preserve. It also says "NO AI markers". We should not add new selectors. We can add new declarations to existing rules. We can also add new rules with existing selectors? That's fine, but not necessary.

However, the task says "Output the rewritten CSS now" and "First character = first CSS character". We should output the media query with the same selectors, with changed/added declarations.

Let's plan:

For `.app-hero-section .row .col-lg-7`:
- Keep text-align: center.
- Add color: #2d2d2d; (soft black)
- Add background-color: transparent; (no change)
- Maybe add `--bs-bg-opacity`? No.
- Since flat-solid, we can ensure no shadows: box-shadow: none; but that might not be needed. But to fulfill "box-shadow: none everywhere", we can add box-shadow: none to each rule. But it's a bit odd to add box-shadow to a col. It's fine.
- Add border-radius: 0; (minimal radius) but the target says minimal radius 0-6px. For the hero column, radius 0 is fine.
- Add maybe `transition: none;`? The original has no transition. We can set transition to something like `transition: background-color 0.2s ease;` but that could be a visual enhancement. However, if we add transition to elements that don't have hover, no effect. But allowed. To keep conservative, we can add `transition: background-color 0.2s ease;` to cards for hover state? But no hover rules. Not needed. We'll add simple transitions perhaps to the cards.

For `.app-hero-section .badge.bg-warning`:
- Keep font-size: 0.85rem; (typography)
- Add background-color: #c47b5a; (terracotta)
- Add color: #faf8f3; (off-white text)
- Add border-radius: 0.375rem; or 4px. The badge original is rounded-pill? Bootstrap badge has `.rounded-pill` if class present, but we don't know. We can set `border-radius: 0.25rem;` (4px). Since flat-solid minimal radius, maybe 4px.
- Add box-shadow: none;
- Maybe add `border: 1px solid rgba(0,0,0,0.1);`? But border is allowed (border-color and border-style). We can add a border? The original badge might have a border? Not sure. Adding a border could affect layout? border-width is part of box model, but the never-change list says "border-width" should not change? Actually it says "border-color and border-style (NOT border-width)" can change. It doesn't explicitly say you can't add border-width. It says "border-color and border-style (NOT border-width)" under "You MUST CHANGE". That implies border-width should not be changed. Adding a border-width where there was none could alter layout. Better not add border to avoid layout change. We can set border-color/ style if a border exists? But if border-width is zero by default, adding border-style would show a border with default width? Actually border-style with no border-width defaults to medium (3px), which could change layout. So avoid adding borders unless we also set border-width: 0? But that is pointless. Better not add border. The original badge likely has no border. So just background-color, color, box-shadow.

For `.contact-channels-section article, .contact-quick-section .contact-card`:
- Original: padding: var(--space-md) !important;. We can keep `padding: var(--space-md) !important;` exactly? But that doesn't change visual. We can replace with `padding: calc(var(--space-md) * 1.1) !important;` but that uses calc and could be within 20%. Or we can use a specific value that is likely similar, but we don't know --space-md. Safer to keep the variable. However, the task says "Only colors, shadows, and decorative properties may change" and "padding, margin (keep similar values, ±20% maximum)" — padding is a layout property allowed to vary. To make a change, we could set padding to `1.5rem !important` assuming --space-md is around 1.5rem (common). But if --space-md is 1rem, then 1.5rem is 50% change, violating. We can set `padding: 1.25rem !important` which is between 1rem and 1.5rem. But still risky. Better to use `var(--space-md)` and add a custom property value? We can define `--space-md`? No, we are not supposed to add variables? We can add custom properties? The instruction says CSS custom properties (--color-*, --shadow-*) values must change. It doesn't say we can't add new ones. But it's a media query block; defining a variable inside media query might be weird. We can define `padding: var(--space-md) !important;` and then add `padding-left: calc(var(--space-md) * 0.9);`? But that changes individual sides, might be okay. However, simpler: keep the padding declaration as is, because the visual change can come from background, border-radius, box-shadow. The task says "Previous attempt didn't change enough." So we need visible changes. Background-color and border-radius on the cards will be visible.

Let's set:
- background-color: #ffffff; (cards white) or #faf8f3? The base off-white is #faf8f3. If the page background is off-white, cards could be white to stand out. Or use #fff8f0? Let's use #ffffff for contrast.
- color: #2d2d2d;
- border-radius: 0.375rem; (6px)
- box-shadow: none; (flat)
- transition: box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out; (though no hover)
- Maybe add `border: 1px solid #eae6de;`? If we add border, we change border-width (from 0 to 1px), which is a layout change. But the instruction says border-width is NOT to be changed. It says "border-color and border-style (NOT border-width)" must change. That means we should not change border-width. If the original has no border, adding one changes border-width. So avoid. If the original has borders, we'd need to keep the same width. We don't know. Better not add border unless we set `border: 1px solid`? That changes border-width from 0 to 1px. The instruction specifically says "NOT border-width" meaning you should not alter border-width values. So we cannot add a border if the original has none. So avoid border. Use box-shadow none and background colors.

But without borders, the cards may look flat. That's the flat-solid variant. We can use `outline: 1px solid #eae6de; outline-offset: -1px;`? Outline is allowed: "outline styles (color, type)" can change. But adding outline also doesn't affect layout? Outline doesn't take up space, so outline: 1px solid #eae6de is safe. The instruction says you MUST change outline color/type if present. We can add outline. That is a decorative property. Let's add `outline: 1px solid rgba(45,45,45,0.08);` or `outline: 1px solid #e2ddd3;`. Outline doesn't affect box size, so layout remains. Great. For the badge, maybe no outline. For hero col, no.

Also, accent-color and caret-color: we can set these on the body? Not in the selectors. We could add to the hero col? Not needed. But the task says "caret-color, accent-color" are to change. We can add `caret-color: #c47b5a;` to a selector that might contain input? None of these are inputs. Not necessary. But we can add `accent-color: #87a878;` to the article? Not relevant. Better not add unused properties. But to satisfy "All color values" change, we can add `color` etc.

Let's also think about the badge: Bootstrap's `.bg-warning` sets `background-color: #ffc107 !important;` maybe. To override with our selector `.app-hero-section .badge.bg-warning`, we need to use a declaration with same specificity? The specificity of `.app-hero-section .badge.bg-warning` (3 classes) is higher than `.bg-warning` (1 class), so it overrides. We can set `background-color: #c47b5a !important;` to ensure override. Since the original rule has only font-size, but Bootstrap's `.bg-warning` will apply unless we override. We should use `background-color: #c47b5a;` with sufficient specificity; but to be safe, use `!important`? The original uses `!important` on padding. We can add `background-color: #c47b5a !important;`. But the instruction says "No markdown fences, no explanations" and "No AI comments". Using important is fine. But we need to keep layout properties. Adding important to color doesn't harm. However, note that Bootstrap might have `.badge` color etc. We'll set `color: #faf8f3;` and maybe `background-color: #c47b5a;` without important? Since the selector is more specific, it should work. But to be safe, use `!important`.

Let's craft the CSS:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2d2d2d;
        background-color: transparent;
        border-radius: 0;
        box-shadow: none;
        transition: background-color 0.2s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c47b5a !important;
        color: #faf8f3 !important;
        border-radius: 0.25rem;
        box-shadow: none;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        color: #2d2d2d;
        border-radius: 0.375rem;
        box-shadow: none;
        outline: 1px solid #eae6de;
        outline-offset: -1px;
        transition: background-color 0.2s ease, outline-color 0.2s ease;
    }
}
```

But wait: the original has `padding: var(--space-md) !important;` in the third rule, within the media query. We need to preserve that exact declaration? It's allowed to modify padding within ±20%. The variable is unknown. We can keep it as is. That's okay. The visual change comes from background, radius, outline. Good.

Should we set `border-radius: 0` for hero col? The target style "vertical-flow" minimal radius