/* Emergency Ready accent override (ADR-0072 thin site).
 * Reuses the shared PocketCloud-family chrome (styles.css + agency.css) and only
 * recolors the accent to an emergency red. Keep this file tiny — the visual
 * system is shared; this is branding, not logic. */

:root {
    --color-accent-primary: #e5484d;
    --color-accent-hover:   #f2555a;
    --color-accent-glow:    rgba(229, 72, 77, 0.28);
    --color-accent-subtle:  rgba(229, 72, 77, 0.10);
    --color-border-accent:  rgba(229, 72, 77, 0.32);
}

/* Emergency brand mark reads as a red badge. */
.cc-brand__mark {
    background: linear-gradient(135deg, #e5484d, #b81d24);
    color: #fff;
}

/* App screenshot gallery + branded showcase. */
.cc-shots--gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    align-items: start;
}
.cc-screenshot {
    width: 100%;
    height: auto;
    border-radius: 12px;
}
.cc-screenshot--wide {
    max-width: 960px;
    margin: 0 auto 28px;
    display: block;
}

/* Agency client list (social proof). */
.cc-agency-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    padding: 0;
    margin: 0;
}
.cc-agency {
    background: var(--color-accent-subtle);
    border: 1px solid var(--color-border-accent);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cc-agency strong { font-size: 1.05rem; }
.cc-agency span { opacity: 0.75; font-size: 0.95rem; }

/* Agency section A/B variant 1 — a card per agency with its own image. */
.cc-agency-list--cards .cc-agency { gap: 10px; }
.cc-agency--card img { margin-bottom: 4px; }

/* Testimonials A/B variant 1 — a lead quote above supporting quotes. */
.cc-testimonial-lead { max-width: 820px; margin: 0 auto 24px; }