/* Kronos Audit Tool v3.0.0 */
.kra-wrap { max-width: 600px; margin: 0 auto; font-family: 'Open Sans', Arial, sans-serif; color: #333; }
.kra-hero { text-align: center; margin-bottom: 1.5rem; }
.kra-title { font-size: 26px; font-weight: 700; color: #111; margin: 0 0 8px; }
.kra-subtitle { font-size: 15px; color: #555; margin: 0; line-height: 1.6; }
.kra-form-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 28px; margin-bottom: 1rem; }
.kra-field { margin-bottom: 16px; }
.kra-field label { display: block; font-size: 13px; color: #555; margin-bottom: 6px; font-weight: 600; }
.kra-field input { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; color: #333; box-sizing: border-box; transition: border-color 0.2s; }
.kra-field input:focus { outline: none; border-color: #4a90d9; box-shadow: 0 0 0 3px rgba(74,144,217,0.12); }
.kra-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kra-required { color: #c0392b; }
.kra-optional { color: #aaa; font-weight: 400; font-size: 12px; }
.kra-error { font-size: 12px; color: #c0392b; display: none; margin-top: 4px; }
.kra-consent { font-size: 11px; color: #aaa; margin: 0 0 16px; line-height: 1.5; }
.kra-btn { width: 100%; padding: 13px; background: #4a90d9; color: #fff; border: none; border-radius: 4px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.kra-btn:hover { background: #357abd; }
.kra-btn:disabled { background: #ccc; cursor: not-allowed; }
.kra-progress { text-align: center; padding: 48px 20px; }
.kra-progress-label { font-size: 15px; color: #333; margin-bottom: 16px; font-weight: 600; }
.kra-progress-track { background: #f0f0f0; border-radius: 4px; height: 8px; overflow: hidden; max-width: 400px; margin: 0 auto 12px; }
.kra-progress-fill { height: 8px; background: #4a90d9; border-radius: 4px; width: 0%; transition: width 0.5s ease; }
.kra-progress-sub { font-size: 12px; color: #aaa; margin: 0; }
.kra-results { }
.kra-email-confirm { background: #eaf6f0; border: 1px solid #b8e0ce; border-radius: 6px; padding: 14px 16px; font-size: 13px; color: #1a5c3a; margin-bottom: 16px; line-height: 1.5; }
.kra-score-card { background: #f7f7f7; border-radius: 8px; padding: 24px; display: flex; align-items: center; gap: 20px; margin-bottom: 16px; }
.kra-score-circle { width: 90px; height: 90px; border-radius: 50%; border: 4px solid #ccc; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 700; flex-shrink: 0; }
.kra-score-info { flex: 1; }
.kra-score-label { font-size: 12px; color: #777; display: block; margin-bottom: 4px; }
.kra-score-domain { font-size: 15px; font-weight: 700; color: #111; display: block; margin-bottom: 4px; }
.kra-score-source { font-size: 11px; color: #aaa; display: block; }
.kra-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.kra-metric { background: #f7f7f7; border-radius: 6px; padding: 16px; }
.kra-metric-name { font-size: 12px; color: #777; display: block; margin-bottom: 4px; }
.kra-metric-score { font-size: 22px; font-weight: 700; display: block; margin-bottom: 8px; }
.kra-metric-bar { height: 4px; background: #e0e0e0; border-radius: 2px; overflow: hidden; }
.kra-metric-fill { height: 4px; border-radius: 2px; }
.kra-metric-note { font-size: 11px; color: #777; margin-top: 6px; display: block; }
.kra-findings-wrap { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; margin-bottom: 16px; }
.kra-findings-wrap h3 { font-size: 15px; font-weight: 700; color: #111; margin: 0 0 16px; }
.kra-finding { border-left: 4px solid #ccc; border-radius: 4px; padding: 14px 16px; margin-bottom: 12px; }
.kra-finding:last-child { margin-bottom: 0; }
.kra-finding-title { font-size: 14px; font-weight: 700; color: #333; margin: 0 0 6px; }
.kra-finding-impact { font-size: 13px; color: #555; margin: 0; line-height: 1.6; }
.kra-finding-fix { font-size: 12px; color: #4a90d9; margin: 8px 0 0; line-height: 1.5; }
.kra-cta { background: #1a1a2e; border-radius: 8px; padding: 28px; text-align: center; }
.kra-cta h3 { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.kra-cta p { font-size: 13px; color: #aab4c8; margin: 0 0 16px; line-height: 1.6; }
.kra-cta-btn { display: inline-block; background: #fff; color: #1a1a2e; padding: 12px 28px; border-radius: 4px; font-size: 14px; font-weight: 700; text-decoration: none; }
.kra-cta-btn:hover { background: #f0f4f9; }
@media (max-width: 480px) {
    .kra-grid-2 { grid-template-columns: 1fr; }
    .kra-metrics { grid-template-columns: 1fr; }
    .kra-score-card { flex-direction: column; text-align: center; }
}
.kra-cta-phone { font-size: 13px; color: #aab4c8; margin: 12px 0 0; }
.kra-cta-phone a { color: #fff; font-weight: 600; text-decoration: none; }
.kra-cta-phone a:hover { text-decoration: underline; }
.kra-cta-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.kra-cta-btn-outline { display: inline-block; background: transparent; color: #fff; border: 2px solid #fff; padding: 12px 24px; border-radius: 4px; font-size: 14px; font-weight: 700; text-decoration: none; }
.kra-cta-btn-outline:hover { background: rgba(255,255,255,0.1); }
.kra-cta-btn-primary { display: inline-block; background: #ffffff; color: #1a1a2e; padding: 14px 32px; border-radius: 4px; font-size: 15px; font-weight: 700; text-decoration: none; min-width: 220px; text-align: center; }
.kra-cta-btn-primary:hover { background: #f0f4f9; }
.kra-cta-secondary { font-size: 13px; color: #aab4c8; margin: 10px 0 0; }
.kra-cta-secondary a { color: #fff; opacity: 0.7; text-decoration: underline; }
.kra-cta-secondary a:hover { opacity: 1; }

/* ── 3-CTA Block ─────────────────────────────────────────── */
.kra-cta-3 {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: stretch;
    margin: 20px 0 0;
    flex-wrap: nowrap;
}
.kra-cta3-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 18px 12px;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    transition: opacity 0.2s, transform 0.15s;
    cursor: pointer;
    min-width: 0;
}
.kra-cta3-btn:hover { opacity: 0.92; transform: translateY(-1px); }
.kra-cta3-primary {
    background: #ffffff;
    color: #1a1a2e;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.kra-cta3-secondary {
    background: rgba(255,255,255,0.12);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.3);
}
.kra-cta3-tertiary {
    background: rgba(255,255,255,0.08);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.2);
}
.kra-cta3-icon {
    font-size: 22px;
    margin-bottom: 8px;
    display: block;
    line-height: 1;
}
.kra-cta3-primary .kra-cta3-icon { color: #1a1a2e; }
.kra-cta3-secondary .kra-cta3-icon,
.kra-cta3-tertiary .kra-cta3-icon  { color: #ffffff; }
.kra-cta3-label {
    font-size: 13px;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
    line-height: 1.2;
}
.kra-cta3-sub {
    font-size: 11px;
    display: block;
    line-height: 1.3;
    opacity: 0.75;
}
.kra-cta3-primary .kra-cta3-sub   { color: #555; opacity: 1; }
.kra-cta3-secondary .kra-cta3-sub,
.kra-cta3-tertiary .kra-cta3-sub  { color: #aab4c8; opacity: 1; }
.kra-cta-sub { font-size: 13px; color: #aab4c8; margin: 0 0 4px; line-height: 1.6; }

/* Mobile: stack vertically */
@media (max-width: 540px) {
    .kra-cta-3 {
        flex-direction: column;
    }
    .kra-cta3-btn {
        flex-direction: row;
        justify-content: flex-start;
        gap: 14px;
        padding: 16px 20px;
        text-align: left;
    }
    .kra-cta3-icon {
        font-size: 20px;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    .kra-cta3-label { font-size: 14px; }
    .kra-cta3-sub   { font-size: 12px; }
}