/* SafeCyber Scorecard — public styles */

.scs-wrap { max-width: 620px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #18170f; }

/* Progress */
.scs-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 1.5rem; }
.scs-progress-bar { flex: 1; height: 3px; background: #e6e3db; border-radius: 2px; overflow: hidden; }
.scs-progress-fill { height: 100%; background: #378ADD; border-radius: 2px; transition: width 0.4s ease; }
.scs-progress-text { font-size: 12px; color: #9b9890; min-width: 44px; text-align: right; }
.scs-domain-pill { display: inline-block; font-size: 11px; font-weight: 500; color: #378ADD; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 0.4rem; }

/* Question card */
.scs-q-card { background: #fff; border: 0.5px solid rgba(0,0,0,0.1); border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; }
.scs-q-text { font-size: 15px; font-weight: 500; color: #18170f; line-height: 1.5; margin-bottom: 1rem; }
.scs-options { display: flex; flex-direction: column; gap: 7px; }
.scs-opt { display: flex; align-items: flex-start; gap: 11px; padding: 11px 14px; border: 0.5px solid rgba(0,0,0,0.08); border-radius: 7px; cursor: pointer; transition: background 0.12s, border-color 0.12s; background: #f5f4f0; }
.scs-opt:hover { background: #e6e3db; border-color: rgba(0,0,0,0.14); }
.scs-opt.scs-selected { border-color: #378ADD; background: #E6F1FB; }
.scs-radio { width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,0.2); flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; transition: all 0.12s; }
.scs-opt.scs-selected .scs-radio { border-color: #378ADD; background: #378ADD; }
.scs-radio-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity 0.12s; }
.scs-opt.scs-selected .scs-radio-dot { opacity: 1; }
.scs-opt-text { font-size: 13.5px; color: #6a6860; line-height: 1.45; }
.scs-opt.scs-selected .scs-opt-text { color: #0C447C; }

/* Nav */
.scs-nav { display: flex; gap: 8px; margin-top: 1rem; }
.scs-btn { flex: 1; padding: 0.65rem 1rem; border-radius: 7px; font-size: 14px; font-weight: 500; cursor: pointer; border: 0.5px solid rgba(0,0,0,0.14); background: #fff; color: #6a6860; transition: background 0.12s; font-family: inherit; }
.scs-btn:hover:not(:disabled) { background: #f5f4f0; color: #18170f; }
.scs-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.scs-btn.scs-primary { background: #0C447C; border-color: #0C447C; color: #fff; }
.scs-btn.scs-primary:hover:not(:disabled) { background: #185FA5; }

/* Intro */
.scs-intro { margin-bottom: 1.75rem; }
.scs-intro h2 { font-size: clamp(1.4rem, 4vw, 1.9rem); font-weight: 600; letter-spacing: -0.02em; color: #18170f; margin-bottom: 0.5rem; line-height: 1.2; }
.scs-intro p { font-size: 14px; color: #6a6860; line-height: 1.6; margin-bottom: 1rem; }
.scs-domain-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.scs-domain-tag { font-size: 11px; font-weight: 500; color: #6a6860; background: #f5f4f0; border: 0.5px solid rgba(0,0,0,0.1); border-radius: 20px; padding: 3px 10px; }

/* Gate */
.scs-gate { background: #fff; border: 0.5px solid rgba(0,0,0,0.1); border-radius: 12px; padding: 2rem; text-align: center; }
.scs-gate-icon { width: 52px; height: 52px; background: #E6F1FB; border-radius: 50%; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; }
.scs-gate h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.4rem; color: #18170f; }
.scs-gate p { font-size: 13px; color: #6a6860; margin-bottom: 1.25rem; line-height: 1.5; }
.scs-gate-fields { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.scs-gate-fields input { width: 100%; padding: 0.65rem 0.9rem; border: 0.5px solid rgba(0,0,0,0.14); border-radius: 7px; font-size: 14px; background: #f5f4f0; color: #18170f; font-family: inherit; }
.scs-gate-fields input:focus { outline: none; border-color: #378ADD; box-shadow: 0 0 0 3px rgba(55,138,221,0.12); }
.scs-gate-fields input.scs-error { border-color: #E24B4A; }
.scs-gate-note { font-size: 11px; color: #9b9890; margin-top: 10px; }
.scs-gate-loading { font-size: 13px; color: #6a6860; margin-top: 10px; display: none; }

/* Results */
.scs-results-header { background: #fff; border: 0.5px solid rgba(0,0,0,0.1); border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.scs-score-circle { width: 88px; height: 88px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.scs-score-num { font-size: 2rem; font-weight: 700; line-height: 1; }
.scs-score-pct { font-size: 10px; font-weight: 500; margin-top: 2px; }
.scs-score-info h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 4px; color: #18170f; }
.scs-score-info p { font-size: 13px; color: #6a6860; line-height: 1.5; }
.scs-radar-card { background: #fff; border: 0.5px solid rgba(0,0,0,0.1); border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; }
.scs-section-label { font-size: 11px; font-weight: 500; color: #9b9890; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem; }
.scs-radar-wrap { position: relative; width: 100%; height: 280px; }
.scs-domain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 1rem; }
@media (max-width: 420px) { .scs-domain-grid { grid-template-columns: 1fr; } }
.scs-domain-card { background: #fff; border: 0.5px solid rgba(0,0,0,0.08); border-radius: 7px; padding: 0.85rem 1rem; }
.scs-domain-name { font-size: 12px; color: #9b9890; margin-bottom: 5px; }
.scs-domain-bar { height: 4px; background: #e6e3db; border-radius: 2px; overflow: hidden; margin-bottom: 4px; }
.scs-domain-fill { height: 100%; border-radius: 2px; transition: width 0.5s ease; }
.scs-domain-score { font-size: 14px; font-weight: 600; }

/* Findings */
.scs-findings-card { background: #fff; border: 0.5px solid rgba(0,0,0,0.1); border-radius: 12px; padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.scs-finding { display: flex; gap: 11px; padding: 9px 0; border-bottom: 0.5px solid rgba(0,0,0,0.06); }
.scs-finding:last-child { border-bottom: none; padding-bottom: 0; }
.scs-finding-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.scs-finding-text { font-size: 13.5px; color: #6a6860; line-height: 1.5; }
.scs-finding-text strong { font-weight: 500; color: #18170f; }

/* Offers */
.scs-offers { margin-bottom: 1rem; }
.scs-offers-title { font-size: 15px; font-weight: 600; color: #18170f; margin-bottom: 4px; }
.scs-offers-sub { font-size: 13px; color: #6a6860; margin-bottom: 1rem; }
.scs-offers-grid { display: flex; flex-direction: column; gap: 10px; }
.scs-offer-card { background: #fff; border: 0.5px solid rgba(0,0,0,0.1); border-radius: 10px; padding: 1rem 1.1rem; position: relative; }
.scs-offer-badge { position: absolute; top: -1px; right: 14px; font-size: 10px; font-weight: 500; background: #0C447C; color: #fff; padding: 2px 8px; border-radius: 0 0 6px 6px; }
.scs-offer-thumb { width: 100%; height: 120px; object-fit: cover; border-radius: 6px; margin-bottom: 10px; }
.scs-offer-domains { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.scs-offer-domain-tag { font-size: 10px; background: #E6F1FB; color: #185FA5; border-radius: 10px; padding: 2px 8px; font-weight: 500; }
.scs-offer-title { font-size: 14px; font-weight: 600; color: #18170f; margin-bottom: 4px; }
.scs-offer-excerpt { font-size: 12.5px; color: #6a6860; line-height: 1.45; margin-bottom: 10px; }
.scs-offer-footer { display: flex; align-items: center; justify-content: space-between; }
.scs-offer-price { font-size: 14px; font-weight: 600; color: #18170f; }
.scs-offer-cta { font-size: 13px; font-weight: 500; color: #fff; background: #0C447C; border-radius: 6px; padding: 6px 14px; text-decoration: none; }
.scs-offer-cta:hover { background: #185FA5; }

/* CTA card */
.scs-cta-card { background: #0C447C; border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.scs-cta-text h3 { font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: 3px; }
.scs-cta-text p { font-size: 12.5px; color: rgba(255,255,255,0.65); line-height: 1.4; }
.scs-cta-btn { background: #fff; color: #0C447C; border: none; border-radius: 7px; padding: 0.6rem 1.1rem; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-block; white-space: nowrap; flex-shrink: 0; }
.scs-cta-btn:hover { background: #E6F1FB; }

/* PDF / actions row */
.scs-actions-row { display: flex; gap: 8px; margin-bottom: 1rem; flex-wrap: wrap; }
.scs-pdf-btn { font-size: 13px; color: #6a6860; background: #fff; border: 0.5px solid rgba(0,0,0,0.12); border-radius: 7px; padding: 8px 14px; cursor: pointer; text-decoration: none; font-family: inherit; }
.scs-pdf-btn:hover { background: #f5f4f0; color: #18170f; }
.scs-restart-btn { font-size: 13px; color: #9b9890; background: transparent; border: 0.5px solid rgba(0,0,0,0.1); border-radius: 7px; padding: 8px 14px; cursor: pointer; font-family: inherit; }
.scs-restart-btn:hover { background: #f5f4f0; color: #6a6860; }