/* ============================================================
   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 the CSS in "conservative mode" — only visual changes, keeping all selectors and layout exactly. The given CSS is a small media query block with three rules. Let me analyze:

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

Now, I need to apply the target style: masonry-flow with flat-solid effect. But the given CSS rules are only about layout (text-align, font-size, padding). In conservative mode, I can't change:
- text-align (it's layout/typography alignment)
- font-size (typography)
- padding (margin/padding ±20% max — but this uses a CSS variable var(--space-md), which I could change since it's a custom property... but wait, I'm not supposed to change padding values beyond ±20%. Actually padding with var(--space-md) — the variable value isn't defined here, so I could keep it. But the instruction says "padding, margin (keep similar values, ±20% maximum)". Changing the variable would affect other places potentially. Hmm.

Actually, the CSS variables section says "CSS custom properties (--color-*, --shadow-*) values" can be changed. But --space-md is a spacing variable, not color/shadow. So I should not change it.

The task is to refresh visually. Since this block doesn't have any colors, shadows, or radii, I need to add some visual properties that don't break layout. But wait — the instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly." The target style is masonry-flow with flat-solid, but this snippet is just a media query for a hero section. 

Hmm. Actually, maybe the user expects me to add visual properties within the existing rules? But that would change the CSS beyond what's there. In conservative mode, I can add decorative properties like color, background, border-radius, box-shadow, etc. But the rules are about text-align, font-size, padding — those are not visual identity properties I'm allowed to change in some cases.

Let me re-read the constraints:

NEVER CHANGE:
- text-align, vertical-align (listed under typography/layout)
- font-size
- padding, margin (±20% max)

So the existing declarations must stay as-is. However, I CAN add new declarations to existing selectors, as long as they are visual-only (colors, shadows, radius, transitions, gradients, opacity, outline, etc.) and don't affect layout.

But wait — the target style says "flat-solid" which means box-shadow: none everywhere. But original has no box-shadow. So adding box-shadow: none is fine.

Also "masonry-flow" color palette: white cards, soft shadows on light gray bg. But flat-solid says no shadows. So basically solid colors with borders.

Let me craft additions:

1. `.app-hero-section .row .col-lg-7` — it's a column in a hero section. On mobile, text-align center. I could add a background color? That might change layout visually but not structurally. In conservative mode, background colors are allowed. But adding a background to a col might look weird. Maybe add a subtle background to the hero section... but I can't add new selectors? Actually, the constraint is to preserve selectors — I can't add new selectors? The instruction says "preserving ALL selectors" — meaning keep existing ones. Adding new selectors would change the HTML relationship? Actually adding a selector for an existing element is fine structurally, but the instruction says "Only rewrite the CSS" and "preserving ALL selectors exactly". It's safer not to add new selectors.

Hmm, but the target style wants a visual refresh. The given CSS has no visual properties. So perhaps the intended transformation is:

- Keep the three rules, but add visual declarations that fit the flat-solid/masonry style.
- Maybe change the media query breakpoint? No — @media conditions can't change.

Wait, maybe I'm overthinking. The user says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Since there are no colors/shadows/radius/gradients in the original, maybe I should just keep the rules as-is? But that would be no change at all, which wouldn't satisfy "refresh".

Alternatively, I can add color-related declarations to the existing rules:

For `.app-hero-section .row .col-lg-7` (text-align: center) — I could add:
- color: #2d2d2d (dark gray text)
- Maybe a background? But a background on a column inside a row might be okay. Actually the hero section often has a background. Let me use a light background color for the column? Hmm. Actually adding background to a col could create visible blocks. But the target is "white cards on light gray bg" — that's the overall page. This snippet doesn't include the overall page.

Let me think about what makes sense for a "masonry-flow" with "flat-solid":
- flat-solid: box-shadow: none everywhere, solid background colors, minimal radius (0-6px), defined by color contrast and borders.

So I could:
- Add `background-color: #ffffff;` to the hero column? Or `border-radius: 6px;`? 

Actually, maybe the best approach is to add visual properties that give the hero badge and contact cards a flat-solid look:

1. `.app-hero-section .row .col-lg-7` — add `color: #2b2b2b;` and maybe `border-radius: 6px;`? Border radius on a full-width column won't be visible unless it has a background/border. Better not to add background to avoid layout weirdness. But I could add a subtle background: `background-color: rgba(255,255,255,0.6);` — still, a column background might create a card look. That's actually fine.

Hmm, but the original hero section probably already has its own styles elsewhere (this is just the mobile adjustments). Changing the column's background might conflict. But the task is to rewrite only this snippet.

Let me consider the "badge.bg-warning" rule. The badge has class `bg-warning` — likely from Bootstrap, which sets background-color: #ffc107. The media query here only adjusts font-size. I could add a background-color override? Changing `bg-warning` background color is a visual change. For flat-solid style, I could make it a solid accent color. Also add `border-radius: 4px;` (Bootstrap badge already has pill radius, but overriding to 4px fits flat-solid). Add `color: #1f2937;` for contrast. Also `box-shadow: none;` (flat-solid).

2. For the contact cards:
```css
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
}
```
I could add:
- `background: #ffffff;` — white cards
- `border: 1px solid #e5e7eb;`
- `border-radius: 6px;`
- `box-shadow: none;`
- `transition: border-color 0.2s ease, transform 0.2s ease;` — but transform is a layout property? transform is visual, but changing transform on hover (if there's a :hover elsewhere) might be fine. Actually adding a transition on transform without any transform change does nothing. Adding a transition is allowed. But `transform` itself is not in the forbidden list, but it could affect layout rendering. Better to avoid transform; just use color transitions.

Wait — I need to be careful. The "transition timing, easing, duration" can change; adding transitions is allowed. But I shouldn't add transform properties since they can affect visual layout. Border, background, border-radius are all safe.

Also, for the hero column rule:
```css
.app-hero-section .row .col-lg-7 {
    text-align: center;
    color: #2b2b2b;
    border-radius: 6px;
}
```
Adding border-radius to a column without a background/border has no visual effect. That's harmless but pointless. Better to keep it minimal. Maybe don't add anything to the first rule, except perhaps nothing at all. But the user wants a "refresh". 

Hmm, let me reconsider the task. The file is "assets/css/saishi.css#块2/2" (block 2 of 2). So this is a fragment of a larger CSS file. The whole file is being rewritten in two blocks. This block is the media query for small screens. The "target style" describes the overall design direction. So in this block, I should apply the visual style to the selectors that appear here.

Given the constraints:

Rule 1: `.app-hero-section .row .col-lg-7` — text-align center is required (never change). I can add visual declarations. What makes sense? On mobile, the hero content is centered. To match flat-solid / masonry aesthetic, I can add:
- `background-color: #ffffff;`? That might make a white block in the hero. Could be a "card" style. Actually hero sections often have a colored background; centering text on white is fine.
- `border-radius: 0 0 6px 6px;`? 
- `color: #374151;`

But I worry about unintended visual consequences. Conservative mode is about not breaking layout. Background color won't break layout. I'll add it tastefully.

Rule 2: `.app-hero-section .badge.bg-warning` — Bootstrap badge. I can override background, color, border-radius, box-shadow. For flat-solid:
- `background-color: #f59e0b;` (solid amber) — but wait, `bg-warning` is Bootstrap's warning color. Changing it to a custom amber is fine. Or keep hue but make it flat.
- `color: #111827;`
- `border-radius: 4px;` — flat-solid minimal radius (Bootstrap default is pill 50rem, but we want 0-6px).
- `box-shadow: none;`

Rule 3: for the cards:
- `background-color: #ffffff;`
- `border: 1px solid #e5e7eb;`
- `border-radius: 6px;`
- `box-shadow: none;`
- Maybe `transition: border-color 0.2s ease, box-shadow 0.2s ease;` but box-shadow none... transition on color maybe.

Also there's the `!important` on padding — I must keep it.

Now, do I need to change any values of the existing declarations? 
- `font-size: 0.85rem` — cannot change (typography).
- `text-align: center` — cannot change.
- `padding: var(--space-md) !important` — padding is a layout property, keep within ±20%. The variable is unknown; I'll keep it exactly.

So the only actual changes are additions. Let me also consider whether I should add `box-shadow: none;` everywhere to enforce flat-solid. That's a visual property and safe.

Also `border-radius` — the target says minimal radius (0-6px). I'll use 6px for cards, 4px for badge.

Color palette from "Pinterest-like": white cards, soft shadows on light gray bg. Since flat-solid says no shadows, I'll use borders to define cards. Light gray bg is for the body, but body isn't in this snippet. I can't add a body rule (new selector). So I'll just style the components.

Let me write the output:

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

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

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

Wait — is adding `background-color` to a hero column going to create a big white box? The `.col-lg-7` is inside `.row`. On mobile (max-width 575.98), the column is full-width. Adding white bg with 6px radius could look like a white card. That matches Pinterest style (white cards on gray bg). However, the hero section itself might already have a background (e.g., dark). Making the column white would change visual dramatically, but that's the point of a visual refresh. But is it safe? It doesn't affect layout. It's allowed.

Alternatively, I could avoid adding background to the column since it might be too aggressive. But the task explicitly asks for a visual identity refresh, including "background color" changes. Since the original has no background, adding one is a change.

Hmm, but the rule is about `.col-lg-7` — adding a white background to just the text column might look odd if the hero has other elements. But in the context of "masonry-flow" with "white cards", it's okay.

Let me also think about whether I should adjust the badge's border. The badge is `bg-warning`, bootstrap classes often have `border: 1px solid transparent`. I can set `border: 1px solid #d97706;` to define it flat. That's fine.

Also, for the cards, `border-color` is a visual change. I'll use `#e5e7eb` (light gray). 

Should I change `border-radius` on the hero column? A full-width column with 6px radius — since there's a white background, the radius will be visible at the corners. Good.

Now, about the `transition`: adding transitions is allowed. I'll keep them subtle. But for flat-solid, transitions on border-color and background-color are fine.

Let me double-check the selector preservation:
- `.app-hero-section .row .col-lg-7` — preserved exactly.
- `.app-hero-section .badge.bg-warning` — preserved exactly.
- `.contact-channels-section article, .contact-quick-section .contact-card` — preserved exactly with comma and newline.

Media query: `@media (max-width: 575.98px)` — preserved.

Existing declarations:
- `text-align: center;` — kept.
- `font-size: 0.85rem;` — kept.
- `padding: var(--space-md) !important;` — kept.

New declarations are all in allowed categories:
- `background-color` — allowed (color).
- `color` — allowed.
- `border-radius` — allowed.
- `border: 1px solid ...` — border-color and border-style allowed, width must not change... wait, "border-color and border-style (NOT border-width)". Adding a border with `1px` width — is that allowed? The original has no border. Adding a border of 1px could change layout slightly (box-sizing?). If the elements have `box-sizing: border-box` (Bootstrap does), adding a 1px border won't change layout size. But the constraint says "border-width" should not change. Since there was no border originally, adding `border: 1px solid` introduces a border-width. Hmm.

The constraint: "border-color and border-style (NOT border-width)" — meaning I can change color and style but not width. Adding a border where none existed could be considered a change in border-width (0 to 1px). But if box-sizing is border-box, the layout won't change. Still, to be strictly conservative, I could use `outline` instead of `border`. But outline doesn't take up space either way. Actually outline is allowed ("outline styles (color, type)"). 

But the target style says "Defined by color contrast and borders". So borders are part of the desired look. The original cards might already have borders from other CSS blocks (this is block 2 of 2; block 1 might define the base styles). Since this block only contains mobile adjustments, the base card styles are elsewhere. Adding a border here might override or complement.

I think adding a 1px border is acceptable — the spirit is to keep layout identical. With `box-sizing: border-box`, no layout change. But to be extra safe, I could use `outline: 1px solid #e5e7eb;` which never affects layout. However, outline doesn't round with border-radius in older browsers, and it draws outside the element edge. Modern browsers do follow border-radius for outline. Hmm.

Given the "conservative" emphasis, perhaps I should avoid adding borders that could shift content. But the cards likely have `box-sizing: border-box` (Bootstrap). The contact cards and article elements — if they have fixed heights, adding a border could change inner space. Since padding is `var(--space-md)`, and if box-sizing is border-box, the border is included in the width/height. So layout stays.

Actually, let me reconsider: the safest visual additions that definitely don't affect layout:
- `background-color` — no layout impact.
- `color` — no layout impact.
- `box-shadow: none` — no layout impact.
- `border-radius` — no layout impact (only visual).
- `outline` — no layout impact.
- `opacity`, `filter`, `backdrop-filter` — no layout impact (filter can create containing block but no layout shift).
- `transition` — no layout impact.

`border` introduces a layout-relevant box if box-sizing is content-box. Most modern CSS resets use border-box. But I can't be 100% sure. To be safe, I'll use `out