/* ============================================================
   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 respond with rewritten CSS. Need understand constraints. We are given original CSS block small. Need refresh visually only, keep selectors/layout/typography. Target style vertical-flow but only this fragment. Effects tight-rhythm. Must output only CSS, no markdown. Need preserve selectors and properties. Let's parse 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;
    }
}

Need refresh visual identity. But these rules only set text-align, font-size, padding. We can add visual properties? Need keep layout. We can change colors, shadows, radius, transitions, gradients. Here no color values except var(--space-md) in padding. We cannot change padding by more than 20%, and should not change layout. --space-md value exists maybe should not change? It is custom property value. We can alter? Allowed "CSS custom properties (--color-*, --shadow-*) values" but --space-md is spacing, not allowed? "width, height, padding, margin (keep similar values, ±20% maximum)" So changing --space-md could be layout. Better not.

We can introduce declarations? The instruction: "Only change colors, shadows, radius, transitions, gradients." We can add new visual-only declarations, but keep selectors. Need maybe add background-color, color, border-radius, box-shadow, transition to existing selectors? But that may affect elements if they have other styles. However the file may be a partial responsive override. We need refresh. But target "warm minimal" with sage accent. Need adapt within selectors.

Need be careful text-align, font-size, padding are typography/layout, shouldn't change. They are original, and likely should remain. We can add visual decorations to those elements on mobile. Also maybe change padding? --space-md, but no.

Need decide if adding property declarations might violate? The prompt says "Keep ALL selectors and layout exactly as-is" and "Only change colors, shadows, radius, transitions, gradients." This implies we can substitute/add these. But adding box-shadow or border-radius to .app-hero-section .badge.bg-warning is visual. Need no layout changes. Could change background, color, border-color, etc. But these are not in original declarations. Adding could be okay? The task "Refresh visual identity" suggests yes.

Need perhaps produce a rewritten stylesheet that includes visual properties in same rules. But need avoid harming base? Since this is responsive block, adding visual properties may not be enough. However maybe we should simply modify original somehow? It already has no colors. Perhaps output same with adjusted spacing? But requirement says colors must change; no colors present. Need create new colors in place? There is "padding: var(--space-md) !important;" --space-md could be color? No.

Maybe the intended action: We can replace values of properties within allowed categories. Here there are no allowed categories. Need add new rules? Hmm.

Let's examine target style vertical-flow and tight-rhythm. Maybe the file is "assets/css/saishi.css#块2/2" only a fragment? Need output that fragment. We need demonstrate visual refresh. Perhaps add color to text-align? Not.

Could perhaps use `text-align: center` unchanged, `font-size: 0.85rem` unchanged, `padding: var(--space-md) !important` unchanged, but add `color`, `background`, `border-radius`, `box-shadow`, `transition` inside each. Need ensure no break.

Let's interpret "conservative mode" says "Only colors, shadows, and decorative properties may change" and "refresh visual identity without changing layout structure or class names". So adding decorative properties is required. We can use same selectors, perhaps combine with original declarations.

Need target style warm minimal off-white background, soft black, one muted accent sage/terracotta. We don't control body. For these elements:

1 `.app-hero-section .row .col-lg-7 { text-align: center; }` This is a column. Adding background-color on that col may be okay? It could alter visual, but not layout. Could add `color` maybe. But if hero section has text, setting color could be okay. Add maybe `color: #2d2d2d;`? But likely inherited. Maybe not necessary. Since text-align rule for mobile centered. To "refresh", we can add `text-shadow`? Not. Maybe add `background-color: rgba(...)`? That could create card? But section likely full width; might look okay? Need not overreach.

2 `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` This badge has bootstrap .bg-warning (yellow). We can override background, color, border, radius, shadow, transition. This part seems target. Need replace warning yellow with terracotta or sage. Since .bg-warning from Bootstrap sets background-color: #ffc107; color: #000? Need override in this rule. Add `background-color: #c47b5a; color: #faf8f3; border-radius: 3px; box-shadow: 0 1px 2px rgba(45,45,45,.12); transition: background-color .25s ease, box-shadow .25s ease;` But we must not change font-size. Could add `padding`? no.

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

Need maybe add `border-radius`, `background-color`, `box-shadow`, `transition`. Perhaps these are contact cards. Warm minimal with tight rhythm: small radius 4px, subtle border? Need not add border width? `border-color` and `border-style` can change, but adding `border: 1px solid ...` would change border width (1px) from none. Not allowed? The never-change table includes "border-color and border-style (NOT border-width)" only if existing? If adding border-width, maybe not allowed. Better avoid border.

But could add `background-color: rgba(135, 168, 120, 0.06);` and `border-radius: 4px;` and `box-shadow: 0 1px 2px rgba(45,45,45,0.04);`. This doesn't change layout. `transition: box-shadow .2s ease, transform ...` no transform not visual? Transform is layout? Not allowed? Avoid.

Need maybe use custom properties? We can set `--color-...`? But in responsive media, could set? Not needed.

Need maintain "selector lists" exactly: `.contact-channels-section article,
.contact-quick-section .contact-card { ... }` same. Need maybe output with stable formatting.

Need decide whether to include `color` in first rule. Possibly unnecessary. But "colors throughout file replaced with fresh palette" — none original. We can add a background tint? For `col-lg-7`, perhaps no.

Maybe a more subtle "visual only" on first rule: add `--tw-color`? Hmm.

Let's think of "vertical-flow" target: Single column, large vertical gaps, narrow content, warm minimal. But in mobile max 575, probably already single. We can add `background-color: #faf8f3`? Not if body. Could update `border-radius`? Col has no.

Perhaps original CSS was extracted from a media query, and the goal is to "refresh this CSS visually" but keep original. If a property has no color, we can rewrite by selecting a color equivalent? Maybe `font-size: 0.85rem` could be "color" typo? No.

Could use `background` in text-align? Not.

Let's see possible expected output from a style transformation engine. It might add a `background: linear-gradient(...)`? But no.

Need remain conservative. Since task says "only the rewritten CSS, preserving ALL selectors and layout exactly" — adding new properties might violate "ALL selectors ... exactly" if same property lists? It says "Selector lists" preserved, not necessarily property lists. However "Only change colors, shadows, radius, transitions, gradients" suggests we can add new properties if categories. But "preserving ALL selectors" not all declarations. We also must "font-size, font-weight, line-height unchanged" so need keep `font-size: 0.85rem`.

Maybe output should include original properties plus new visual properties. Need perhaps add `background-color` to first rule? It could make the `col-lg-7` area a band. Not good.

Maybe the best is to create a modified stylesheet with all original declarations plus only decorative declarations for elements where appropriate. But ensure that we didn't add layout. Let's formulate:

@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;
        background-color: #c47b5a;
        color: #faf8f3;
        border-radius: 3px;
        box-shadow: 0 1px 2px rgba(45, 45, 45, 0.15);
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: rgba(135, 168, 120, 0.08);
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(45, 45, 45, 0.06);
        transition: box-shadow 0.2s ease;
    }
}

Need maybe no "transition" if no hover? Fine. But target tight-rhythm: small radius 2-6px. Good.

Need maybe include `--space-md !important` unchanged. But the original had `padding: var(--space-md) !important;` with `!important` inside var? Actually original `padding: var(--space-md) !important;`. Keep exactly. If adding `background-color` after with no important, okay.

Need maybe first rule add `color: #2d2d2d;`? text-align only. But if we don't add visual there, "colors changed" okay elsewhere. Yet if strict evaluator checks that every rule has colors? Maybe not.

Maybe target "vertical-flow" could require "background-color: #faf8f3;" on hero col? No.

Need consider `background-color` on `.app-hero-section .badge.bg-warning`: Bootstrap uses `.bg-warning` maybe background-color: #ffc107; our override needs same specificity? In Bootstrap, `.bg-warning` specificity 0,1,0; `.app-hero-section .badge.bg-warning` 0,3,0; but original media rule only font-size. Our addition with background-color will override because higher specificity. Good. But if `!important`? Not needed.

Need maybe include `background: #c47b5a;` instead of background-color? Could use gradient? Original allowed gradients. Maybe a muted accent with subtle gradient? Tight-rhythm says subtle shadows or none, small radii. Could use `background: linear-gradient(135deg, #c47b5a, #b5674a);` But then maybe too aggressive. "Color palette: Warm minimal: off-white..., soft black..., one muted accent (sage or terracotta)" We can choose terracotta #c47b5a. For contact cards, use sage background translucent. Nice.

Need maybe add `backdrop-filter`? No.

Need maybe preserve `text-align` and `font-size` unchanged. Need ensure no max-width changes. Good.

But maybe "vertical-flow" style asks for large vertical gaps; in these selectors no gap. Could add `margin-bottom`? Not allowed. But not.

Maybe add `transition` to `.contact-channels-section article, .contact-quick-section .contact-card` with `box-shadow` only. But no hover. Could still animate when states change from other rules. Fine.

Potential issue: `background-color: rgba(135, 168, 120, 0.08)` on cards could affect if `article` and `.contact-card` already have background; but okay. The original padding with `!important` maybe they are cards. Existing card likely has background and shadow from base; our background may alter color but not layout. Okay.

Need maybe "border-color and border-style may change" but adding border not necessary. Good.

Need maybe "opacity" can change, but no.

Could add `caret-color`, `accent-color`? No.

Need be careful with `transition: background-color 0.2s ease, box-shadow 0.2s ease;` The original may already have transition; our rule overrides transition to only these, maybe could remove a transform transition, but visual only. Fine. But if there is hover transform, changing transition might affect but not layout? It changes timing/duration allowed. Maybe okay.

Need maybe use `!important` for background-color? If base `.bg-warning` has `!important`? Bootstrap not. Fine.

Could maybe customize badge with border-radius, but if Bootstrap badge has `.rounded-pill` with border-radius 50rem? The class `.badge.bg-warning` may have border-radius from `.badge` (0.375rem maybe), but our 3px overrides. That's allowed. Good.

Need perhaps add `box-shadow` 0 1px 2px rgba(45,45,45,.12). Subtle. Good.

Need maybe if "tight-rhythm" means no shadows "or none", so okay.

Need maybe "vertical-flow" with "warm minimal" means off-white background. Could add background-color to `.app-hero-section .row .col-lg-7`? Hmm maybe we can set `color: #2d2d2d;` on the `col-lg-7` for base text. But that's not visual? color allowed. Let's add `color: #2d2d2d;`? It may ensure soft black on off-white? But if parent has dark background, color could be bad. However target style wants warm minimal. This is a "conservative" reset; we shouldn't set colors that may break in dark sections. Yet no knowledge. Better not.

Need perhaps add `background-color: transparent`? no.

Maybe no changes to first rule. The original CSS only handles alignment; "visual identity refresh" can be applied in selectors with badge/cards. But if an automated diff expects all values changed? Not sure.

Let's consider if we can change `text-align: center` to same but add `text-shadow`? The allowed property `text-shadow` can be added. For centered text in hero, adding a very subtle text-shadow `0 1px 0 rgba(250,248,243,.6)`? But not necessary and could look bad.

Could set `text-shadow: none`? That's a color/shadow change. Add to first rule? If base has text-shadow, `none` changes but not layout. But no reason. Maybe no.

Maybe use `transition` in first rule with color? no.

Need maybe output must be first character CSS, no fences. We'll do that. But let's verify all constraints.

Selectors preserved:
- `@media (max-width: 575.98px)` exact
- `.app-hero-section .row .col-lg-7` exact
- `.app-hero-section .badge.bg-warning` exact
- `.contact-channels-section article,` and `.contact-quick-section .contact-card` exact (line break in selector list okay)
All properties:
- text-align unchanged
- font-size unchanged (0.85rem)
- padding unchanged (var(--space-md) !important)
- added visual properties. But rule "width, height, padding, margin (keep similar values, ±20% maximum)" — padding unchanged.
- display/position unchanged, no grid, etc.
- font-family etc unchanged.
- border-radius changed (allowed).
- box-shadow added/changed (allowed).
- transition added (allowed).
- background-color/color changed (allowed).
- opacity not touched.

Could there be an issue with adding `background-color` to `.contact-channels-section article, .contact-quick-section .contact-card` and `border-radius` on `article` may be okay. But if `article` is a whole section? In contact channels, article likely card. The class `article` maybe "article" element; adding background to entire article card. Fine.

Need maybe perhaps add `border-radius: 6px;` to first `col`? Not.

Need maybe "outline style" changed? no.

Potential issue: target "vertical-flow" says "Large vertical gaps (48-72px)" and "Narrow content max-width (680-800px) centered." But we cannot change layout in conservative mode. This directive may conflict; we should not. We are in conservative mode, so only visual changes. Good.

Let's think if adding box-shadow to `.contact-channels-section article` could create shadows on elements that have `overflow` hidden? Not layout. Good.

Need perhaps adjust line? "text-align: center" — The target "vertical-flow" maybe centered? okay.

Need maybe include color in first rule from warm palette? Could set `color: #2d2d2d;` to define text color on mobile. But this might be redundant and potentially harmful. However the color palette requirement "soft black #2d2d2d" maybe we should include. We can set `color: #2d2d2d;` in first rule? Since `.col-lg-7` likely text container; desired. Let's add? But if the original section is dark, setting dark text on dark bg would fail. The target style "warm minimal" suggests body off-white, text dark. But the entire file could have dark hero, and first rule only centers. Adding `color` may be unsafe. But conservative mode says "visual identity" might apply. Hmm.

Could maybe add `color: inherit;`? Not fresh. No.

Maybe use CSS variables for colors to be easy. But if we