/* ============================================================
   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 answer rewritten CSS only. Need inspect input: original CSS only media query, with rules. Need refresh visual identity without changing selectors/layout/typography. Must change colors, shadows, radius, etc. But current CSS has no colors except badge etc. Need insert visual changes while preserving selectors and layout. Since target style flat-solid, box-shadow none. Need maybe change colors? But there are no colors. We can add properties? The instructions say all color values etc need changed; if absent, maybe add? Need preserve selectors exactly. We can add background, border, etc maybe. Need be careful: original media query conditions preserved. Need output CSS with same selectors.

Need 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 rewrite visual identity. But selectors must remain exactly. Can modify values? Need not change font-size. text-align is layout/typography? It's typography but allowed? Text-align in never change under typography. Actually "text-align, vertical-align" in never change. So keep text-align.

Can change padding based on --space-md? That is custom property from root? It's a value using var. Need maybe keep same layout. But padding allowed ±20%. We can change from var(--space-md) to maybe calc? But likely keep. Need maybe add background, border-radius, border, box-shadow none. But original no. This is media-specific, and wanting visual changes: maybe for mobile, change badge background-color, card border, hero color? But no colors originally. Need produce "refreshed" CSS preserving layout.

Could add color, background-color, border-radius, border, box-shadow to existing selectors. Need ensure no layout break? Adding background to a col? Could. Need align with target palette: Pinterest-like white cards, light gray bg, accents. But selectors are sections/hero and contact channels. Could adjust within media query.

Need maybe include variables? The CSS uses var(--space-md). We can't change root variables because not in file. But can use color variables? The request says CSS custom property values change if present. Only this file? Could use existing variables maybe not defined. Better use concrete color values.

Need identify "block 2/2" maybe there is another CSS file? But only this snippet. Need output rewritten CSS only.

Need ensure no markdown fences. We need output only CSS.

Let's craft a response: same media query, same selectors, modified declarations. But need maybe add extra declarations within rules. That's allowed: selectors preserved, layout unchanged. Need not change text-align, font-size, padding perhaps. We can add visual-only declarations.

Because target: flat-solid, box-shadow none. So if add, ensure no shadows. Color palette: white cards on light gray, accent strips. But these selectors not card. Maybe can set .app-hero-section .col-lg-7 background? Hmm.

Let's think through likely HTML. .app-hero-section .row .col-lg-7 (Bootstrap column) text center. Adding background to column might affect hero? Maybe okay. Could set color? Need maintain readability. But changing text color of all hero col content? The original didn't specify. To refresh, we can set background-color: #ffffff? But if original transparent, could alter visual. But allowed.

Maybe more prudent: Add only properties that are visual and don't affect layout: color, background-color, border-radius, border, box-shadow (none), transition. But don't overdo.

Need include the badge: .app-hero-section .badge.bg-warning. Bootstrap bg-warning originally maybe yellow. We can set background-color to a fresh accent (e.g., #f59e0b?); but "flat-solid" palette. Could set color: #78350f, background-color: #fbbf24, border-radius: 6px, box-shadow: none. But font-size unchanged. Need avoid overriding Bootstrap? It's okay.

Contact cards: .contact-channels-section article, .contact-quick-section .contact-card. Add background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 6px; box-shadow: none; maybe transition. But padding is important. Keep padding var(--space-md) !important. Could add margin? No.

Need maybe set .app-hero-section .row .col-lg-7 { text-align:center; background-color: rgba(255,255,255,0.85); }? Hmm. It might create blocks. Better to not over-alter layout.

Need satisfy "all color values replaced with fresh palette" but there were none. We can introduce colors. We should maybe create a fully restructured CSS with same selectors but richer visual declarations.

Need be careful with media query condition. It's @media (max-width: 575.98px). Preserve exactly.

Let's formulate:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1f2937;
        background-color: #ffffff;
        border-radius: 6px;
        box-shadow: none;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #451a03;
        background-color: #fbbf24;
        border: 1px solid #f59e0b;
        border-radius: 6px;
        box-shadow: none;
    }

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

Need ensure "box-shadow: none everywhere" yes. Border-radius minimal. "flat-solid" no gradients. Good.

But does adding background-color to .col-lg-7 alter layout? It might make hero column white background, but no padding. Could be okay. But maybe shouldn't because original hero may have background. Hmm.

Need "refresh visual identity without changing layout structure or class names." It's allowed to change colors/background. We can add. But should be careful adding to hero column could interfere with "text-align center" only. Could set only color, maybe not background. But need visual change enough. The previous attempt didn't change enough. We should change more.

Maybe use background: transparent? Need no.

Alternatively, modify badge and cards enough. But "hero-section .row .col-lg-7" has only text-align; can add color maybe. It could be a "hero" text container. Setting color to #1f2937 okay. Background white could make a block on light gray; maybe desired.

Need perhaps include CSS variables? Not needed.

Need maybe include `accent-color` or `caret-color`? Could add to contact? no.

Need the output no comment. But we can include no comments. It says no markdown fences. Fine.

Need check with self-check: selectors preserved character-for-character? Yes, whitespace changed maybe but selectors exact. display/position unchanged. width/height/padding/margin within ±20%? We didn't change padding. Font unchanged. Colors replaced yes. Shadows redesigned with none. Border-radius adjusted. No AI comments.

Could there be issue with `color` property on `.col-lg-7` maybe inherited by badge? Badge has its own color. Fine.

Need maybe ensure `background-color: #ffffff` on col-lg-7 may override hero's bg; but okay. Could use `background-color: transparent`? no.

Let's think if there is a better way to "refresh" without changing layout: use `background: #f9fafb;` for body? But no selector. Could add `@media` only, not body. We cannot add selectors outside because selectors must be preserved? We can add? The instruction says selectors preserved, but maybe don't add new selectors? It says keep all selectors exactly. It may be okay to add? Better not add new selectors. So add declarations to existing selectors only.

Need maybe add a new property `border-top` accent for cards? Could. But card-specific classes? Existing contacts. Use `border-left: 4px solid #f59e0b;` maybe. But margin/padding? Border-width? Wait border-width is layout? They say never change border-width? Actually "border-width" not in never-change? They say "border-color and border-style (NOT border-width)" can change. So cannot change border-width. But we can add border-width? They say "border-color and border-style (NOT border-width)" under "may change" but "NOT border-width" indicates don't change border-width. But adding border-width from none to 1px is changing layout? Border affects box dimensions. They specifically say not border-width, so avoid changing border width? Hmm. It says "border-color and border-style (NOT border-width)" so can change colors/style but not width. Adding border of 1px could change layout if box-sizing not border-box. We want avoid. Better use `outline`? Outline doesn't affect layout. But visual borders? Use `box-shadow: none` as required. Could use `outline: 1px solid #e5e7eb`? But outline would be outside, no layout. Yet target "flat-solid" and minimal radius. Could use border but risk.

Maybe for flat-solid, use border colors on existing elements; but adding border width changes layout. However original contact cards may already have border? Unknown. Since original CSS in file doesn't include, but Bootstrap may have border. But we should avoid new border width. We can use `outline` perhaps. But outline can overlap? In flat-solid, a border is nice. Yet instruction says "border-color and border-style (NOT border-width)" meaning if you set `border: 1px solid`, you change width. Maybe not allowed. Could set `border-style: solid; border-color: #e5e7eb;` but without width, no visible border unless existing width from earlier styles. Not reliable. Could use `outline: 1px solid #e5e7eb`? `outline-style`, `outline-color` allowed, `outline-width` maybe not specified but "outline styles (color, type)" allowed, maybe outline width not. But outline doesn't affect layout, so okay. But "flat-solid" can use color contrast and borders. Maybe use `box-shadow: none` and `background-color` only.

Need perhaps use `filter`? No.

Let's think about "previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette." So if we add just subtle white background, not enough. We need make colors more distinct. Use a more distinctive palette: maybe deep teal, coral, etc. But target style says Pinterest-like: white cards, soft shadows on light gray bg, but variant flat-solid says no shadows, solid backgrounds, minimal radius. Use "white cards on light gray bg" but we don't have body/card wrappers. We can make contact cards white with light gray border. Need include accent strip perhaps: `border-left: 4px solid #ef4444` but border-width. Maybe use `box-shadow: inset 4px 0 0 #ef4444`? But that is a box-shadow, and variant says box-shadow: none everywhere. So no shadow. Use `background: linear-gradient`? But variant says solid background only, no gradients. Use border-left? If width changed, maybe layout not too bad if inside padding? Hmm.

Maybe contact cards originally with padding var(--space-md) and some border from Bootstrap? If we add border-left, width changes by 4px; could be okay if within `box-sizing: border-box`. But unknown. We should avoid since instructions "not border-width." Use `outline`? But outline not part of box; can create accent with `border-left` maybe not.

Maybe use `box-shadow: 4px 0 0 #ef4444 inset` but shadow prohibited. So no. Use solid backgrounds and contrast. Could use `background-color` for cards as #ffffff and `background-color` for section? Not.

Could add `border-color` and `border-style` without border-width; if element has default border-width from Bootstrap? Probably not. But not visible.

Maybe use `border-radius` from 0 to 6px, not too significant. Could add `transition` to badge/cards.

Need perhaps set `background-color` on `.app-hero-section .badge.bg-warning` to `#f97316` and `color` to `#fff7ed`. That's quite distinct.

But "flat-solid" palette in target style: "Pinterest-like: white cards, soft shadows on light gray bg, Each card may have its own accent strip." The "soft shadows" contradict variant "box-shadow none". We follow variant: no shadows.

Let's choose a fresh palette: 
- Light gray background: #f3f4f6
- White surface: #ffffff
- Text color: #111827
- Accent orange: #ea580c
- Accent border: #d1d5db
Maybe use `outline` for cards:
  outline: 1px solid #e5e7eb;
  outline-offset: -1px;
But outline may not expand layout. However border radius with outline follows? In modern browsers, outline follows border-radius? Yes with `outline-style: solid`, it follows border-radius? Usually outline follows border-radius in modern browsers? I think outline is not necessarily rounded but in Firefox? Actually CSS outlines now follow border-radius? Historically not, but in modern browsers they follow border-radius. Still okay.

Need maybe use `outline-color`, `outline-style`, `outline-offset`? It says outline styles (color, type) can change. Use `outline: 1px solid #e5e7eb;` okay.

Need maybe use `accent-color: #ea580c` on article? Not.

Need maybe use `caret-color`? no.

Let's produce:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #431407;
        background-color: #fb923c;
        border-radius: 6px;
        box-shadow: none;
    }

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

Need maybe `box-shadow: none` everywhere. Yes for badge and cards. Could also set `.col-lg-7 { box-shadow: none; }`? Not necessary. Better include to satisfy "box-shadow none everywhere"? That phrase from target variant maybe not literally. But to be safe, add `box-shadow: none;` to all three rules, though first has no box-shadow. Add to all? Yes.

Need maybe `background-color` to `.col-lg-7`? If we set `background-color: #ffffff`, it's a solid white block in hero; could be considered. But we can avoid due to uncertainty. Need "more distinct" maybe add `background-color: transparent`? no.

Maybe instead of adding to `.col-lg-7`, use `background-color: #f8fafc` to `.app-hero-section`? But selector currently .app-hero-section .row .col-lg-7, not section. Could add to existing rule? `background-color: rgba(255,255,255,0.7)` maybe. But no.

Could set `color` only. That might not be enough. Hmm.

Need maybe style the hero section by adding `background-color` to col-lg-7. Is that safe? It could produce a white column within row, but text align center. This is a big visual change. But if hero section has an image background, white column with no padding may look weird. Better not.

Maybe add `border-radius: 12px` to col-lg-7? But no background, border-radius invisible. Could be harmless. But minimal radius target 0-6. Use 6px.

Maybe `background-color: #ffffff` on contact cards is key. That's enough distinct.

Need perhaps include `border-radius: 6px` on `.col-lg-7`: invisible but visual-only; no effect? Fine.

Let's think about "app-hero-section .badge.bg-warning" - `bg-warning` is Bootstrap utility with `--bs-warning`; our override with `background-color` should work. Need use `!important`? Not necessary but to override Bootstrap maybe not if stylesheet order. In media query, same specificity `.app-hero-section .badge.bg-warning` (0,3,0) vs `.bg-warning` (0,1,0), so ours wins. Good.

Need "font-size: 0.85rem" unchanged. Good.

Need "contact-channels-section article, .contact-quick-section .contact-card" includes `padding: var(--space-md) !important`. Keep exactly maybe with same spacing and !important. We can add `background-color: #f9fafb;`? Let's check target: white cards on light gray bg. But cards should be white and background section likely light gray. If we don't have section background, setting cards white may not show. Maybe set `background-color: #f3f4f6` on contact articles? But then not white. Alternative: set `background-color: #ffffff` on cards, and