/* ==========================================================================
   GoodCap Capital — Raise a Complaint (Phase 7)
   Serious, neutral support layout: no decorative motion, clear hierarchy.
   ========================================================================== */

.cp-page { background: var(--gc-mist); }

/* ---------- Small support hero ---------- */
.cp-hero { background: #fff; border-bottom: 1px solid var(--gc-line); padding: clamp(28px, 4vw, 48px) 0 clamp(28px, 4vw, 44px); }
.cp-hero__inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.cp-hero__copy { max-width: 720px; }
.cp-hero h1 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); letter-spacing: -0.03em; margin: 14px 0 12px; }
.cp-hero p { color: var(--gc-muted); max-width: 62ch; }
@media (max-width: 559px) { .cp-hero__track { width: 100%; } }

/* ---------- Layout ---------- */
.cp-main { padding: clamp(24px, 4vw, 48px) 0 var(--section-y); }
.cp-main__grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1024px) { .cp-main__grid { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 28px; } }

/* ---------- Form card ---------- */
.cp-card { background: #fff; border-radius: 24px; border: 1px solid var(--gc-line); box-shadow: var(--sh-sm); padding: clamp(22px, 4vw, 40px); }
.cp-card__head { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--gc-line); }
.cp-card__head h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
.cp-card__head p { color: var(--gc-muted); margin-top: 6px; font-size: 0.9875rem; }
.cp-card .req { color: var(--gc-error); }
.cp-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cp-form legend { padding: 0; }
.cp-form .alert { margin-bottom: 22px; }
.cp-form__details { min-height: 200px; }
.cp-form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--gc-line); }
.cp-form__foot .form-note { max-width: 42ch; }
.cp-form__foot .btn { min-width: 210px; }
@media (max-width: 559px) { .cp-form__foot .btn { width: 100%; } }
.cp-success__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }

/* ---------- Side panels ---------- */
.cp-side { display: grid; gap: 16px; }
@media (min-width: 1024px) { .cp-side { position: sticky; top: calc(var(--header-h) + 20px); } }
.cp-panel { background: #fff; border-radius: 20px; border: 1px solid var(--gc-line); padding: 22px; }
.cp-panel__title { display: flex; align-items: center; gap: 8px; font-size: 1.0625rem; letter-spacing: -0.01em; margin-bottom: 14px; }
.cp-panel__title .icon { width: 18px; height: 18px; color: var(--gc-navy); }
.cp-panel p { font-size: 0.9375rem; color: var(--gc-text); line-height: 1.65; }
.cp-panel p + p { margin-top: 10px; }
.cp-panel a { color: var(--gc-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.cp-panel--note { background: #f8fafc; }

.cp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; }
.cp-steps::before { content: ""; position: absolute; left: 13px; top: 16px; bottom: 16px; width: 2px; background: var(--gc-line); }
.cp-steps li { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.cp-steps li > span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--gc-line-blue); color: var(--gc-navy); font-size: 0.8125rem; font-weight: 800; }
.cp-steps b { display: block; color: var(--gc-ink); font-size: 0.9375rem; line-height: 1.4; padding-top: 3px; }
.cp-steps p { font-size: 0.875rem; color: var(--gc-muted); margin-top: 2px; }

.cp-contacts { display: grid; gap: 14px; }
.cp-contacts li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9375rem; color: var(--gc-ink); font-weight: 600; line-height: 1.5; }
.cp-contacts small { display: block; font-size: 0.75rem; font-weight: 700; color: var(--gc-muted); }
.cp-contacts a { color: var(--gc-ink); text-decoration: none; overflow-wrap: anywhere; }
.cp-contacts a:hover { color: var(--gc-blue); }
.cp-contacts__icon { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; background: var(--gc-mist); color: var(--gc-navy); }
.cp-contacts__icon .icon { width: 18px; height: 18px; }