/* ============================================================
   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 CSS. Need comply. Only visual properties can change. Original CSS includes media max-width 575.98. Selectors:
.app-hero-section .row .col-lg-7 text-align center? That's typography/text-align? In constraints, text-align typography fixed? Never change? They say typography font size/family etc, text-transform, white-space. But original includes text-align: center. It is not layout? It is text-align, listed under typography can't change? They said never change font-size, line-height, letter-spacing; "text-align, vertical-align" under layout? Let's inspect: In 📐 LAYOUT includes text-align, vertical-align. Yes don't change. Also badge font-size remains. padding can change ±20% only; here !important with var — we can update variable? Could change padding via var? The var says don't change CSS custom properties? They say custom properties values can change. But padding values in custom property if use? We need maybe leave padding because layout. Original has padding: var(--space-md) !important; leave. We can alter colors if any no colors. Need rewrite visual identity only. Target style warm minimal, airy-rhythm. But original only text selectors; no visual color. We can perhaps add properties? The instruction "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." We cannot add display etc. Can add color? But output should rewrite CSS preserving selectors and layout. Existing rules have no colors, no shadows. We might change font-size? It's typography fixed, no. Padding: var(--space-md) could maybe keep because ±20 max; no need.

Maybe there is a comment #块2/2 indicates block 2 of 2, file maybe only a media query chunk. We must transform visual identity perhaps by adding color and radius? But maybe CSS doesn't have any. Is it acceptable to output identical? Need "all color values replaced with fresh palette". There are no color values. We could add decoration to selectors? But adding properties not originally there might be allowed "colors, shadows, decorative properties may change" and "large border-radius" target. Yet layout property? border-radius can change/add. But selectors: "app-hero-section .row .col-lg-7" maybe no visual? We could add color etc. But if selectors originally only text-align and font-size, adding color changes appearance but not layout. Need keep visual identity? Could maybe change font-size? Not allowed.

Let's read task carefully. They ask "Refresh this CSS visually" with original CSS snippet. Maybe they expect to output same selectors but color/shadow modifications, but if no colors, maybe no modifications. But likely for code test, need generate changes. Need not hallucinate? Let's consider all constraints. "SELF-CHECK ... Colors throughout file replaced with fresh palette? Shadows redesigned?" But no values. Maybe we can append color declarations to existing rule—valid CSS, adds visual changes. Need not change layout. Selectors preserved. We can change `text-align: center`? no. Could leave `text-align` and `font-size`. For each selector, add color/background/gradient/shadow/radius? But some no effect if no color property. Maybe okay.

Need decide. Let's analyze target style: vertical-flow, warm minimal. Original media query breakpoint 575.98. Mobile contact cards. "Warm minimal" color palette. We can add:
- `.app-hero-section .row .col-lg-7 { text-align: center; color: #2d2d2d; }` maybe inherited.
- `.app-hero-section .badge.bg-warning { font-size: 0.85rem; background?? }` But .badge.bg-warning may be Bootstrap warning color. Changing background-color is visual. We can set background gradient? But use `bg-warning` class with background-color. Should not change layout. Add `background-color: #d9a441`? But target warm minimal muted accent maybe terracotta. Yet if bg-warning is warning, original Bootstrap yellow; changing to terracotta might change semantic. But okay. But note Bootstrap .badge has `--bs-badge-color` etc. We could override background-color.

- `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` Add border-radius, box-shadow, background? This would change visual. But "keep all selectors and layout" okay. Need preserve padding unchanged (could leave). But adding background/box-shadow uses no layout. However adding `box-shadow` may affect layout? no. Could use `background` and `border-radius`.

Also use CSS custom properties? The snippet uses var(--space-md), no custom property definitions. We can define? It would be output CSS? Need maybe definitions not associated. Could add at root? But may alter layout? If define `--space-md` maybe original var uses existing variable. But no, don't define unless need.

Need preserve `@media (max-width: 575.98px)` unchanged. Need maybe no markdown.

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c47b5a;
        color: #faf8f3;
        border-radius: 999px;
        box-shadow: 0 4px 14px rgba(196, 123, 90, 0.25);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 20px;
        background-color: rgba(250, 248, 243, 0.8);
        box-shadow: 0 10px 30px rgba(45, 45, 45, 0.06), 0 2px 6px rgba(45, 45, 45, 0.04);
        transition: box-shadow 0.3s ease, background-color 0.3s ease;
    }
}
```
But adding transition? okay. Need "single column layout"? No changes to layout within media. Airy rhythm: border radius 20, soft shadows.

But is `text-align: center` under layout cannot change. Keep. We added color; is that allowed? Yes. But should we avoid adding background to `.badge.bg-warning` because `bg-warning` semantically has background; overriding color property if `color` no issue. Use terracotta? The target says one muted accent (sage or terracotta). .badge.bg-warning maybe should be accent; yes.

Need maybe "background: linear-gradient" if gradient allowed. Add gradient? The target airy rhythm maybe no. `background-color` is color change. Could use `background: linear-gradient(135deg, #d08968, #c47b5a)`. That's a gradient and visual. But with class bg-warning, CSS background shorthand may override Bootstrap background-image? Bootstrap `.bg-warning` sets `--bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;` Actually maybe `.bg-warning` uses `background-color` with !important. To override, our `background: linear-gradient(...) !important` would be needed? But not necessarily; class loaded order matters. Should avoid complexity. Better use `background-color: #c47b5a !important;`? But adding !important to appearance maybe okay. However original only font-size no important; we can add. To ensure override? Depending on load order, our CSS may come after Bootstrap? Unknown. Need maybe `background: #c47b5a !important;` But use only visual; okay.

For card shadow, class `.contact-card` maybe already has border shadow. We can override/see. We can add.

Need maybe change to warm minimal: off-white #faf8f3, soft black #2d2d2d, terracotta #c47b5a. Use those.

But maybe "vertical-flow" target: single column layout "grid-template-columns: 1fr" — Can't change layout due conservative. It says Layout pattern (Aggressive only) in header. But mode conservative; no grid changes. So just visual.

Need output only CSS. However there is a nuanced issue: Original includes `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` within media. If we add `background-color` to both, okay.

Could add `border: 1px solid rgba(...)`? They permit border-color, border-style, not border-width. Could add border using `border: 1px solid` would involve width unchanged? Rule says "border-color and border-style (NOT border-width)" can change; adding border-width of 1px could break layout? It affects box size. Since box-sizing? Not sure; avoid.

Could add `outline` instead? But no.

Could add backdrop-filter to cards? Maybe visual, but may affect performance; no.

Need maybe "large border-radius (16-28px)" so 20 good. For badge 999 pill.

Need maybe "soft pillowy shadows" multi-layer. Use:
```
box-shadow: 0 12px 32px rgba(45, 45, 45, 0.08), 0 3px 8px rgba(45, 45, 45, 0.05);
```
No need to add transition? It's okay. But if original had transitions, none; adding transitions can be considered "transition timing/easing" change? There was no transition; adding is okay? They said "transition timing, easing, duration" can change. New transition property okay.

Need maybe change `font-size: 0.85rem`? No, typography fixed. Keep.

Could add `letter-spacing`? Not allowed. color and background okay.

Need maybe preserve padding `var(--space-md)` exactly. If custom `--space-md` is defined, maybe not. We might change to `calc(var(--space-md) * 1.1)`? No need. Keep.

Need maybe original `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` no color; adding `background-color: #c47b5a; color: #faf8f3;` may make badge not semantic "warning" but target. Need maybe maybe target style: warm minimal, muted accent. Good.

Could maybe include `border: 0`? no.

Let's see if any hidden need to preserve "selector lists (commas)" exactly. We must keep `.contact-channels-section article,
    .contact-quick-section .contact-card` as original with comma line. Yes.

Need first character = CSS. Use no markdown. Good.

But maybe "FILE FINGERPRINT", request ID not needed in output.

Let's think about "Accessibility" maybe color contrast. Terracotta #c47b5a with off-white #faf8f3: contrast? #c47b5a luminance maybe 0.24? off-white 0.94, ratio maybe 4? Need small text? Badge font-size .85rem maybe 13.6px, if white text on terracotta maybe contrast 4.2? Actually compute approximate. #c47b5a (196,123,90). Relative luminance: R 196/255=0.769 -> linear 0.552? G 0.482 -> 0.199, B 0.353 ->0.104. L=0.2126*0.552 +0.7152*0.199+0.0722*0.104 = 0.117+0.142+0.0075=0.2665. Off-white L=0.953? contrast=(0.953+0.05)/(0.267+0.05)=3.16. For large text? font-size .85rem maybe small, white on terracotta fails. Better use dark text on terracotta: soft black #2d2d2d on #c47b5a? L of #2d2d2d=0.033; contrast=(0.267+0.05)/(0.033+0.05)=3.82 still small but maybe fails. Maybe use #faf8f3 background and terracotta text? `color: #c47b5a; background-color: #faf8f3;` But bg-warning originally background has color maybe white? Could set `background-color: #faf8f3; color: #c47b5a; box-shadow`? But warning badge? Hmm.

Target palette "one muted accent" could be sage. Use sage #87a878 as background; off-white text? L sage 0.37? Contrast with white ~3.3. Use dark text #2d2d2d on sage: L=0.37+0.05? Contrast 0.42/0.083=5.06. Good. For badge, use sage background, soft black text. But target says one accent; if cards warm off-white, badge sage. Warm minimal sage. Use `background-color: #87a878; color: #2d2d2d;`. But Bootstrap `badge bg-warning` expected yellow; changing to sage is radical but okay. The target style one muted accent sage or terracotta. Maybe choose terracotta for visual; but contrast issue maybe less important. Could use `color: #2d2d2d` with background #c47b5a; contrast 3.8 maybe for small text but with font-weight bold? The badge likely bold? Bootstrap badge has font-weight 700, so large? "Large text" means >=18pt bold (24px) or 14pt (18.66px). 0.85rem = 13.6px, not. Need at least 4.5. Off-white on terracotta 3.16 fail. Better choose darker terracotta maybe #a45d3e: R 164 G93 B62. L approx R linear 0.367? G 0.112, B 0.052. L=0.078+0.080+0.0038=0.1618. Contrast with off-white (1.003)/(0.212)=4.73 passes. But accent specified #c47b5a. Could use `#b35e3f` or `#b06645`? The target says #c47b5a, but can vary. Better keep specified? Maybe "muted accent (sage #87a878 or terracotta #c47b5a)" one. Could use `#b95f3e` for accessible. But maybe not.

We can apply sage to card? off-white + sage for badge? Let's decide palette:
- off-white `#faf8f3`
- soft black `#2d2d2d`
- sage `#87a878` accent.

Badge: `background-color: #87a878; color: #2d2d2d; border-radius: 20px; box-shadow: 0 4px 14px rgba(135,168,120,0.25);`
Cards: `background-color: rgba(250,248,243,0.8); border: 1px solid rgba(45,45,45,0.06); border-radius: 24px; box-shadow: 0 16px 40px rgba(45,45,45,0.06), 0 2px 8px rgba(45,45,45,0.04); transition: box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease;` But adding transform property? transition can include transform, but if no transform, okay. However "animation & media: transition timing can change" but adding transform transition not layout. Fine.

But adding `border: 1px solid rgba(...)` uses border-width 1px. They explicitly "border-color and border-style (NOT border-width)" can change. But "NEVER CHANGE border-width" they said cannot change border width. Adding border-width from none to 1px could change layout? In conservative, never change "border-width" likely means don't change width values if present, but adding is maybe against. Better avoid border. Use `outline`? Outline also maybe no. Use background and shadow only.

Could add `backdrop-filter: blur(8px)`? It's decorative; can use. But maybe not necessary.

Need maybe "contact channels section article" has existing card. We can set `border-radius: 24px; background-color: rgba(250, 248, 243, 0.7); box-shadow: ...;`.

Need consider custom properties: If original `.badge.bg-warning` has Bootstrap background with `!important`, our `background-color` without `!important` may not override if Bootstrap loaded after. But perhaps this stylesheet includes Bootstrap then our file loaded later. In file saishi.css likely custom after Bootstrap. But to be safe, use `background-color: #87a878 !important;` However original has no `!important`; adding important could override intentional? It's visual only. But if user wants style, okay. Should we use `.app-hero-section .badge.bg-warning` specificity: 0,3,0 vs Bootstrap `.bg-warning` 0,1,0; so our specificity higher, no need important. `background-color` may be same property but specificity. So okay.

Need maybe set `color: #2d2d2d` and background. But if `.badge` has `color: #000`? okay.

Need maybe `box-shadow` on badge might affect no layout. Good.

Potential issue: All colors in original? none. We are adding colors. Fine.

Let's also add a `background` to `.app-hero-section .row .col-lg-7`? No, only maybe color. It's within hero section; setting color soft black. But maybe bootstrap .col already has text default; not necessary. Could set `color: #2d2d2d` to