/* Channel Partner landing page (Views/CP/Index.cshtml). Scoped to body.cpx. Presentation only. */
:root { --cp-yellow: #ffb400; --cp-ink: #151515; --cp-muted: #6c675a; --cp-line: #ece6d3; --cp-cream: #faf8f2; }
body.cpx { margin: 0; font-family: "Montserrat", "Inter", "Segoe UI", system-ui, sans-serif; color: var(--cp-ink); background: #fff; -webkit-font-smoothing: antialiased; }
body.cpx *, body.cpx *::before, body.cpx *::after { box-sizing: border-box; }
body.cpx a { text-decoration: none; color: inherit; }
body.cpx h1, body.cpx h2, body.cpx h3, body.cpx p, body.cpx ul { margin: 0; padding: 0; }
.cp-wrap { max-width: 1500px; margin: 0 auto; padding: 0 28px; }
.cp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 26px; border-radius: 8px; border: 0; background: var(--cp-yellow); color: #111 !important; font: 800 .84rem/1 inherit; font-family: inherit; cursor: pointer; text-transform: uppercase; letter-spacing: .02em; }
.cp-btn:hover { background: #ffc83d; } .cp-btn.ghost { background: transparent; color: #fff !important; border: 1px solid rgba(255, 255, 255, .5); }
.cp-block { width: 100%; }
.cp-title { font-size: 1.5rem; font-weight: 800; } .cp-title span { color: var(--cp-yellow); }
.cp-sub { color: var(--cp-muted); font-size: .84rem; margin-top: 6px; }

/* hero */
.cp-hero { background: #0a0a0a; color: #fff; position: relative; overflow: hidden; padding: 38px 0 44px; }
.cp-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(620px 320px at 82% 20%, rgba(255, 180, 0, .22), transparent 70%), radial-gradient(420px 260px at 8% 100%, rgba(255, 180, 0, .12), transparent 70%); }
.cp-hero .cp-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.cp-eyebrow { display: inline-block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-yellow); font-weight: 800; margin-bottom: 10px; }
.cp-hero h1 { font-size: clamp(2rem, 4.6vw, 3.6rem); font-weight: 800; line-height: 1.04; text-transform: uppercase; }
.cp-hero h1 span { color: var(--cp-yellow); }
.cp-lead { margin: 14px 0 20px; color: #e6e1d0; font-size: 1rem; max-width: 560px; }
.cp-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.cp-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #3a3a3a; border-radius: 999px; padding: 8px 14px; font-size: .74rem; font-weight: 700; background: rgba(255, 255, 255, .04); }
.cp-chip i { color: var(--cp-yellow); }
.cp-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* registration card */
.cp-card { background: #fff; color: var(--cp-ink); border-radius: 16px; padding: 24px 24px 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.cp-card h3 { font-size: 1.15rem; font-weight: 800; } .cp-card > p { font-size: .78rem; color: var(--cp-muted); margin: 4px 0 14px; }
.cp-form { display: grid; gap: 12px; }
.cp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cp-form label { display: block; font-size: .7rem; font-weight: 700; color: #3b3a35; }
.cp-form input[type=text], .cp-form input[type=tel], .cp-form input[type=email], .cp-form select { width: 100%; height: 44px; margin-top: 5px; padding: 0 12px; border: 1px solid #e3dcc4; border-radius: 8px; font: inherit; font-size: .82rem; font-weight: 500; background: #fff; color: #151515; outline: none; }
.cp-form input:focus, .cp-form select:focus { border-color: var(--cp-yellow); box-shadow: 0 0 0 3px rgba(255, 180, 0, .18); }
.cp-terms { display: flex !important; gap: 9px; align-items: flex-start; font-weight: 500 !important; font-size: .72rem !important; }
.cp-terms input { accent-color: var(--cp-yellow); margin-top: 2px; } .cp-terms a { color: #1d6fe0; text-decoration: underline; }
.cp-note { background: var(--cp-cream); border: 1px dashed #e0d7b8; border-radius: 8px; padding: 9px 12px; font-size: .7rem; color: #4a4638; }
.cp-note i { color: var(--cp-yellow); margin-right: 6px; }
.cp-err { color: #c0271c; font-size: .74rem; font-weight: 600; min-height: 1em; }
.cp-already { text-align: center; font-size: .76rem; margin-top: 12px; color: var(--cp-muted); } .cp-already a { color: #1d6fe0; font-weight: 700; text-decoration: underline; }

/* sections */
.cp-sec { padding: 36px 0; } .cp-sec.cream { background: var(--cp-cream); }
.cp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.cp-step { background: #fff; border: 1px solid var(--cp-line); border-radius: 14px; padding: 20px 18px; position: relative; }
.cp-step .n { position: absolute; top: -14px; left: 18px; width: 30px; height: 30px; border-radius: 50%; background: var(--cp-yellow); font-weight: 800; display: grid; place-items: center; font-size: .86rem; }
.cp-step i { font-size: 1.6rem; color: #111; margin-bottom: 10px; display: block; }
.cp-step h3 { font-size: .96rem; font-weight: 800; margin-bottom: 4px; } .cp-step p { font-size: .76rem; color: var(--cp-muted); line-height: 1.55; }
.cp-earn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.cp-e { border: 1px solid var(--cp-line); border-radius: 14px; padding: 18px; background: #fff; }
.cp-e i { width: 42px; height: 42px; border-radius: 10px; background: #111; color: var(--cp-yellow); display: grid; place-items: center; font-size: 1.1rem; margin-bottom: 10px; }
.cp-e h3 { font-size: .92rem; font-weight: 800; margin-bottom: 4px; } .cp-e p { font-size: .74rem; color: var(--cp-muted); line-height: 1.55; }
.cp-dash { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 36px; align-items: center; }
.cp-dash ul { list-style: none; margin-top: 16px; } .cp-dash li { margin-bottom: 12px; font-size: .86rem; display: flex; gap: 10px; align-items: flex-start; } .cp-dash li i { color: var(--cp-yellow); margin-top: 3px; }
.cp-mock { background: #0a0a0a; color: #fff; border-radius: 14px; padding: 16px; box-shadow: 0 22px 50px rgba(0, 0, 0, .3); }
.cp-mock .h { display: flex; justify-content: space-between; font-size: .72rem; font-weight: 800; margin-bottom: 12px; } .cp-mock .h span { color: var(--cp-yellow); }
.cp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cp-kpi { background: #161616; border: 1px solid #262626; border-radius: 10px; padding: 12px; font-size: .62rem; color: #bdb8a6; } .cp-kpi b { display: block; font-size: 1.05rem; color: #fff; margin-top: 4px; } .cp-kpi em { font-style: normal; color: #5fd08a; font-size: .6rem; }
.cp-bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; margin-top: 14px; background: #161616; border-radius: 10px; padding: 12px; border: 1px solid #262626; }
.cp-bars i { flex: 1; background: linear-gradient(180deg, var(--cp-yellow), #b87d00); border-radius: 3px 3px 0 0; }
.cp-faq { max-width: 900px; margin: 22px auto 0; }
.cp-q { border: 1px solid var(--cp-line); border-radius: 10px; margin-bottom: 10px; background: #fff; overflow: hidden; }
.cp-q button { width: 100%; text-align: left; border: 0; background: transparent; padding: 15px 18px; font: 700 .86rem inherit; font-family: inherit; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; }
.cp-q button::after { content: "+"; font-size: 1.2rem; line-height: 1; color: #b87d00; } .cp-q.is-open button::after { content: "\2212"; }
.cp-q .a { display: none; padding: 0 18px 16px; font-size: .8rem; color: #4a4638; line-height: 1.65; } .cp-q.is-open .a { display: block; }

@media (max-width: 991.98px) { .cp-hero .cp-wrap, .cp-dash { grid-template-columns: 1fr; } .cp-steps, .cp-earn { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .cp-wrap { padding: 0 14px; } .cp-row2, .cp-steps, .cp-earn, .cp-kpis { grid-template-columns: 1fr; } .cp-card { padding: 18px 16px; } }

@media (max-width: 900px) { .cp-sec { padding: 28px 0; } }

/* "body.cpx p/h3 { margin: 0 }" above is more specific than the single-class rules, so spacing is restated here */
body.cpx .cp-eyebrow { margin-bottom: 10px; }
body.cpx .cp-hero h1 { margin: 0; }
body.cpx .cp-lead { margin: 14px 0 20px; }
body.cpx .cp-sub { margin-top: 6px; }
body.cpx .cp-card > p { margin: 6px 0 14px; }
body.cpx .cp-card h3 { margin-bottom: 2px; }
body.cpx .cp-step h3, body.cpx .cp-e h3 { margin-bottom: 6px; }
body.cpx .cp-dash ul { margin-top: 16px; }
body.cpx .cp-already { margin-top: 12px; }