/* ============================================================
   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: rewrite CSS visually, conservative, no layout changes. Need only colors/shadows/radius/transitions etc. Original is a media query block with three rules. Need output CSS with same selectors, same properties maybe but can adjust colors etc if present. However no colors present except presumably bootstrap classes. Need refresh visually? There are no colors specified. We can add color properties? Must not change layout. But we can add decorative properties maybe okay. Need preserve selectors and properties? We can add colors/shadows? But "refesh this CSS visually" with only given rules. We can change values that exist? There are padding, font-size, text-align. These are layout/typography fixed, cannot change except maybe not. We shouldn't change. Need maybe add colors, shadows, border-radius? But if adding new declarations under same selectors, it's okay? The task says refresh this CSS visually. Since original has no colors, need maybe introduce style via colors? But rules apply responsive. The selectors: `.app-hero-section .row .col-lg-7` gets text-align center, we could add color? But "background colors" target maybe not. But the instruction from system: "You must change all color values ... CSS custom property values." If none, you can add color? Yet "HTML is fixed — only colors, shadows, and decorative properties may change." So we can add color/background/text-shadow etc. Need preserve exact selectors and layout. Adding declarations is acceptable? It says "Rewritten CSS", "keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Could be: add visual properties. But must not break layout. Text-align center is layout but unchanged from original? It is in original, so should preserve.

Need maybe respect "horizontal-strips" and "sharp-edges." Need apply to elements perhaps. But the selectors are limited mobile. We can add background to `.app-hero-section`? Need not change layout. But if add background to `.col-lg-7`, might affect. However "only colors, shadows, and decorative properties may change" includes "background colors." So we can set background colors, border, box-shadow. But with responsive media.

Need output only CSS no markdown. The original is already only a media query. I can produce a visually refreshed CSS with same media query, same selectors, same layout-related values? Specifically:
- `.app-hero-section .row .col-lg-7` text-align: center; (must preserve). Add color? maybe color: #? Could add text-shadow? maybe.
- `.app-hero-section .badge.bg-warning` font-size 0.85rem preserved. Add background-color? But class bg-warning already has bootstrap background. We can override with `background: #...` and border, box-shadow maybe. Sharp edges.
- `.contact-channels-section article,.contact-quick-section .contact-card` padding var(--space-md) !important preserved. Add background, border, box-shadow? But original padding 16? Maybe okay.

Need maybe introduce color variables? The original no custom props. Could we add root variables? That isn't inside media? But "output only CSS" could include `:root`? Would change global? Maybe not ideal. The task says rewrite file. Could add CSS custom props for palette. But if we add static colors okay.

Need think about target style: horizontal-strips: full-width sections, padding 60-100? But cannot change padding beyond ±20. Original padding is var(--space-md) probably 16-24, cannot become 60px due layout restriction. Since media query maybe no full horizontal strips. So maybe we can use background stripes? The variant sharp edges: hard offset shadows 4px 4px 0 solid color, small radius, strong borders, snappy transitions. But if add box-shadow to `.contact-card` etc may be okay.

Need ensure output "same layout": no new display etc. We can add backgrounds and shadows only.

Let's parse original exactly:

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

Rewritten version: preserve media breakpoint. For each selector, maybe append "background-color", "color", "box-shadow", "border", "border-radius", "transition". Need not preserve only original properties? It says refresh this CSS visually. It might be expected to rewrite values of colors/shadows/radius/transitions. If no existing, adding is valid.

Need maybe change `font-size`? Typography fixed, don't change. `padding` can remain exact. `text-align` fixed. `var(--space-md) !important` fixed. Need keep.

We need choose a fresh palette, maybe horizontal strips of white/cream/dark. For mobile, these elements maybe surfaces. Could use:
- hero col: background: transparent? maybe not. To create horizontal strip maybe background: #faf7f0? But `.col-lg-7` inside row. Add background: #f7f3ea; border: 3px solid #111; box-shadow: 4px 4px 0 #d94f2b? But this may make text area colored and padding because no padding? Could not look good. But task wants visual identity.

- badge: background-color: #d94f2b; border: 2px solid #111; box-shadow: 4px 4px 0 #111; border-radius: 0; color: #fff; transition: box-shadow .15s, transform .15s? But transform is layout? Actually transform visual and can shift, but "visual identity" maybe can change. But never change layout? transform can affect layout? It is visual; but if adding to static no hover. We can add transition, but no hover. However easier.

- contact cards: background-color: #fff9ef; border: 2px solid #111; border-radius: 0; box-shadow: 4px 4px 0 #111; perhaps. Also transition: border-color .15s, box-shadow .15s? Without hover maybe okay.

Need not add :hover? It's allowed? It says pseudo-classes preserved. Could add but original selectors don't have pseudo. Adding new rules with :hover might be okay but selector changes? The instruction says "Every selector character-for-character preserved?" That implies if we add new selectors, maybe not allowed? "Only colors shadows..." no new selectors? It says "selector lists preserved" and output "rewritten CSS preserving ALL selectors" perhaps it doesn't forbid adding? But safest: don't add new selectors not in original. So no :hover. But transitions can exist on base.

Need maybe use variables in colors? We can define CSS variables? That would require new selector `:root` or `@media`? But output instructions "preserving ALL selectors" likely no additional selectors. But adding `:root` not in original may violate? Maybe don't.

Need maybe add `!important` to new declarations? Not necessary. But the specific selectors already have `!important` for padding. We can add not important.

Need maintain responsive current file. Since original has `@media (max-width: 575.98px)`, output same. For visual identity, maybe we need also add base styles outside media? The original file is only media; but target horizontal strips may apply desktop? The file fingerprint #块2/2 maybe "block 2 of 2" maybe this snippet is only responsive part. But our task says refresh the CSS visually across this file. Since file only has this media, maybe output same media block. If we add outside media, it's an extra selector/rules, not preserving file structure. Should avoid. So all modifications within the media query. It doesn't define the base, so we can add more declarations to existing selectors.

Potential issue: `.app-hero-section .badge.bg-warning` is Bootstrap badge warning; overriding background-color may not be "horizontal strip." Could create a "striped" background using `background: repeating-linear-gradient(45deg, #d94f2b 0, #d94f2b 8px, #111 8px, #111 16px)`? But colors? Target variant "sharp-edges"; maybe "horizontal-strips" means full-width strips, not striped backgrounds. Since "color palette: Alternating: white / cream / dark / white pattern." Could apply to cards.

Need perhaps change `--space-md`? No custom property defined here. Don't.

Need maybe use `border-radius: 0px;` on these; but if card had default border radius from other CSS, it overrides within media. Fine. For badge, `border-radius: 0`? Yes sharp edges. But Bootstrap badge pill? In mobile this will override. Good.

Need maybe use `box-shadow: 4px 4px 0px #111` although syntax can be `box-shadow: 4px 4px 0 #111`. "Hard offset shadows: 4px 4px 0px solid color" Actually box-shadow doesn't take `solid`; maybe "4px 4px 0 0 #..." but you can use 3 values + color. We'll use `4px 4px 0 #111`.

Need maybe set `text-shadow` on badge: `text-shadow: 2px 2px 0 #000`? But variant mentions strong borders, hard offset shadows. text-shadow maybe okay. But don't change font-size. Add `text-shadow: 2px 2px 0 rgba(0,0,0,.25);` maybe.

Need perhaps set `caret-color`, `accent-color` irrelevant.

Need maybe set `outline`? Could add `outline: 3px solid #...` maybe decorative. But Bootstrap components might not have. But if we set outline to `.contact-card`, can be harsh. Fine.

Need determine exact output no markdown.

Let's create final CSS:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a1a;
        background: #faf6ef;
        border: 3px solid #111;
        border-radius: 0;
        box-shadow: 4px 4px 0 #111;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #fff;
        background: #d65a31;
        border: 2px solid #111;
        border-radius: 0;
        box-shadow: 4px 4px 0 #111;
        text-shadow: 2px 2px 0 rgba(0,0,0,.25);
        transition: box-shadow .15s ease-in-out;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        color: #1a1a1a;
        background: #fff9ef;
        border: 2px solid #111;
        border-radius: 0;
        box-shadow: 4px 4px 0 #111;
        transition: box-shadow .15s ease-in-out;
    }
}

But if we add border/background to hero col, could drastically change layout? It has no padding maybe; border contributes to width due box-sizing? If box-sizing globally border-box? Likely Bootstrap uses border-box. Should be okay. But maybe no need hero col; maybe too aggressive. But target "vertical sections" and "strong color zones" suggests yes.

Need ensure transition timing snappy .15s. Use `transition: box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;` okay.

Need maybe "only colors shadows radius transitions gradients." We added color/background/border/box-shadow/text-shadow/transition. Good.

Need maybe alter `font-size` no. `padding` no.

Potential issue: original uses `.badge.bg-warning` maybe Bootstrap `bg-warning` background color via CSS variable; our `background` shorthand overrides with color. Good.

But if background shorthand `#d65a31` is okay. Color: `#1a1a1a`.

Need maybe preserve `text-align: center` exactly with value? Since rule says typography fixed, but original text-align is layout, should keep. We can use same.

Need maybe not add border to `.app-hero-section .row .col-lg-7`? It may create "stripes" but if it wraps? okay.

But "horizontal-strips" target style says "Each strip with distinct padding (60-100px vertical) Alternating background colors per strip" cannot due constraints, but we can emulate with background stripes on contact section? Could use `background: repeating-linear-gradient(180deg, #fff9ef 0, #fff9ef 24px, #f2ead9 24px, #f2ead9 48px);` for contact cards maybe "horizontal strips" literally. But variant "sharp-edges" allows gradients. We can change gradients. But adding striped background to card might be cool. However "horizontal-strips" pattern specifically says full-width sections; not background stripes. But maybe "layout pattern" is aggressive not applicable? In conservative mode, cannot change layout. So interpret "horizontal-strips" as alternating backgrounds on sections, but our rules target small elements. We can set background to horizontal repeating gradient to evoke strips. But need "strong color zones" and "sharp edges".

Maybe we can make `.contact-channels-section article` a horizontal strip with `background: #2b2b2b; border: 3px solid #111;` but no. Let's craft tasteful.

Need maybe use `background-color` not `background` to preserve underlying? However to create visual identity, use `background`. For `.contact-channels-section article, .contact-quick-section .contact-card`, we can use `background: #f6efe2;` plus `border-top: 6px solid #d65a31;` to create strip? But border-width cannot change? Original border-width none; adding border-width is not forbidden? It says "border-color and border-style (NOT border-width)" i.e., if border-width values in original, don't change, but can add border-width? Hmm "only colors, shadows, and decorative properties may change" includes border radius, color, style. It says NOT border-width means never change border-width. But adding border-width to an element that had no border? Is that changing layout? It can alter dimensions. But with border-box, maybe. But safer to avoid changing layout: don't add border-width? But variant specifically says strong borders (2-3px solid). The rule list says border-color and border-style can change, not border-width. It didn't explicitly forbid adding border-width? Under layout, width/height etc. Border-width influences box size. But with box-sizing: border-box, it still affects available inner area. It might alter layout somewhat. The safety check says "border-width unchanged" maybe. Original no border-width; adding could be considered changing. But target says strong borders, so maybe okay within visual identity? Yet "NEVER CHANGE" includes "width, height, padding, margin..." not border-width. It only mentions border-color and border-style (NOT border-width) under can change. Actually in "✅ YOU MUST CHANGE" list: "border-color and border-style (NOT border-width)" meaning you may change color/style but not width. So if no width existed, don't add width. Hmm.

Could use `outline` with 3px solid for strong border because outline doesn't affect layout. But outline doesn't respond to border-radius? It can if `outline-offset`; but can use `outline: 3px solid #111`; it draws around element, no layout effect. Better for strong borders while respecting layout. Use outline instead of border. But target variant says strong borders. Use `outline: 2px solid #111; outline-offset: -2px;` to create inside border no layout. `outline-offset` is decorative. Good.

For hard offset shadows, `box-shadow` doesn't affect layout. Great. The hero col maybe no.

Need maybe use `border-radius: 0px`, but this doesn't affect layout? It changes how background corners appear. Allowed. For contact cards, if original has radius from base CSS, set to 0. Good.

Need maybe use `background` on existing element: if element had a background image, override. No layout.

Need maybe use `color` and `text-shadow`. Fine.

Need maybe preserve `!important` on padding. Should output exactly.

Need perhaps include `background-image` gradients no.

Let's think: The output should just be CSS. We can add comments? No.

We need maybe not include "AI-REWRITTEN" comments.

Potential issue: media query block with `@media (max-width: 575.98px)` uses 575.98px, must keep exactly. Good.

Let's consider exact line formatting. We can preserve spaces.

We need ensure selector list with comma:
`.contact-channels-section article,
    .contact-quick-section .contact-card` present. If rewriting, keep same.

Need choose palette consistent "white / cream / dark / white pattern". Perhaps:
- Hero col: background `#faf7f2` (cream), color `#161616`, outline 2px solid #161616, border-radius 0, box-shadow 4px 4px 0 #d65a31, transition .15s.
- Badge: `#d65a31` orange, text #fff, outline #161616, shadow #161616.
- Contact cards: `#ffffff` maybe, color dark, outline #161616, shadow #d65a31? To alternate dark zone maybe one card dark? But selector includes both contact channels article and contact quick card; can't alternate between separate. Could use `background-image: linear-gradient(180deg, #fff 0%, #fff 50%, #161616 50%, #161616 100%)` and color white? That would make half dark. Hmm "horizontal strips" alternating. But if set both same, no alternation. Yet selected elements are