/**
 * CounselRisk Benchmark — Full UI Stylesheet
 *
 * Complete design system for the AI Governance Benchmark application.
 * Every selector is prefixed with .crb-benchmark-wrap to prevent
 * collisions with WordPress theme styles.
 *
 * Fixes applied (production review):
 *   - .crb-form-card h2 added to h2 grouped rule (was falling through to theme)
 *   - min-height raised to 48px on .crb-btn and .crb-btn-back (WCAG 2.5.5)
 *   - .crb-form-input height raised to 48px to match button sizing
 *   - .crb-ans: overflow:hidden + white-space:normal + max-width:100% (text overflow fix)
 *   - .crb-ans-text: min-width:0 + overflow-wrap:break-word + white-space:normal
 *
 * @package CounselRisk_Benchmark
 */

/* ============================================================
   DESIGN TOKENS
   Defined on the wrapper so all descendants inherit via cascade.
   ============================================================ */
.crb-benchmark-wrap {
    --cr-navy-950:    #0F1724;
    --cr-navy-900:    #142033;
    --cr-navy-800:    #1B2B44;
    --cr-gold-500:    #C8A45D;
    --cr-gold-600:    #B38F4F;
    --cr-ivory-50:    #F7F4EE;
    --cr-surface-0:   #FFFFFF;
    --cr-surface-50:  #FAFAF8;
    --cr-surface-100: #F1EEE8;
    --cr-border-200:  #E6E0D6;
    --cr-text-900:    #17202B;
    --cr-text-700:    #425066;
    --cr-text-500:    #6B7280;
    --cr-danger-500:  #A0564A;
    --cr-warning-500: #B3832C;
    --cr-success-500: #486B4A;
    --cr-focus:       rgba(200, 164, 93, 0.28);
    --cr-serif:       Georgia, 'Times New Roman', Times, serif;
    --cr-sans:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --cr-radius-sm:   8px;
    --cr-radius-md:   12px;
    --cr-radius-lg:   16px;
    --cr-shadow:      0 1px 4px rgba(15, 23, 36, 0.06), 0 4px 16px rgba(15, 23, 36, 0.07);
    --cr-transition:  160ms ease;
}

/* ============================================================
   SCOPED RESET
   box-sizing + margin/padding reset scoped entirely within the
   benchmark wrapper. Prevents theme interference without leaking.
   ============================================================ */
.crb-benchmark-wrap *,
.crb-benchmark-wrap *::before,
.crb-benchmark-wrap *::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

/* ============================================================
   OUTER WRAPPER
   ============================================================ */
.crb-benchmark-wrap {
    font-family:            var(--cr-sans);
    font-size:              15px;
    line-height:            1.6;
    color:                  var(--cr-text-900);
    background:             var(--cr-surface-50);
    -webkit-font-smoothing: antialiased;
    width:                  100%;
}

/* ============================================================
   APP CONTAINER  (#crb-benchmark-root / .crb-benchmark-app)
   ============================================================ */
.crb-benchmark-wrap .crb-benchmark-app {
    max-width:    1200px;
    margin-left:  auto;
    margin-right: auto;
    padding:      48px 24px 72px;
}

/* ============================================================
   LOADING STATE  (pre-JS, replaced by app on init)
   ============================================================ */
.crb-benchmark-wrap .crb-benchmark-loading {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      320px;
}

.crb-benchmark-wrap .crb-benchmark-loading p {
    font-size:      0.875rem;
    color:          var(--cr-text-500);
    letter-spacing: 0.03em;
}

/* ============================================================
   NOSCRIPT NOTICE
   ============================================================ */
.crb-benchmark-wrap .crb-noscript-notice {
    margin:        32px auto;
    max-width:     600px;
    padding:       20px 24px;
    border:        1px solid var(--cr-border-200);
    border-radius: var(--cr-radius-md);
    background:    var(--cr-surface-0);
    text-align:    center;
}

.crb-benchmark-wrap .crb-noscript-notice p {
    font-size:   0.9rem;
    color:       var(--cr-text-700);
    line-height: 1.6;
}

/* ============================================================
   SCREEN ENTRY ANIMATION
   ============================================================ */
@keyframes crbSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.crb-benchmark-wrap .crb-screen {
    animation: crbSlideIn 200ms ease forwards;
}

@media (prefers-reduced-motion: reduce) {
    .crb-benchmark-wrap .crb-screen {
        animation: none;
    }
}

/* ============================================================
   BASE CARD
   ============================================================ */
.crb-benchmark-wrap .crb-card {
    background:    var(--cr-surface-0);
    border:        1px solid var(--cr-border-200);
    border-radius: var(--cr-radius-lg);
    box-shadow:    var(--cr-shadow);
}

/* ============================================================
   INTRO SCREEN
   ============================================================ */
.crb-benchmark-wrap .crb-intro {
    max-width: 760px;
    margin:    0 auto;
}

.crb-benchmark-wrap .crb-eyebrow {
    display:        block;
    font-size:      0.68rem;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--cr-gold-600);
    margin-bottom:  20px;
    padding-bottom: 14px;
    border-bottom:  1px solid var(--cr-border-200);
}

.crb-benchmark-wrap .crb-intro h1 {
    font-family:    var(--cr-serif);
    font-size:      clamp(1.7rem, 4vw, 2.35rem);
    font-weight:    400;
    color:          var(--cr-text-900);
    line-height:    1.25;
    margin-bottom:  14px;
    letter-spacing: -0.01em;
}

.crb-benchmark-wrap .crb-intro-subtitle {
    font-size:     1rem;
    color:         var(--cr-text-700);
    margin-bottom: 22px;
    line-height:   1.5;
}

.crb-benchmark-wrap .crb-intro-desc {
    font-size:     0.9rem;
    color:         var(--cr-text-500);
    line-height:   1.7;
    margin-bottom: 36px;
    max-width:     580px;
}

/* Trust row */
.crb-benchmark-wrap .crb-trust-row {
    display:       flex;
    margin-bottom: 36px;
    border:        1px solid var(--cr-border-200);
    border-radius: var(--cr-radius-md);
    overflow:      hidden;
    background:    var(--cr-surface-0);
}

.crb-benchmark-wrap .crb-trust-item {
    flex:         1;
    padding:      16px 18px;
    text-align:   center;
    border-right: 1px solid var(--cr-border-200);
}

.crb-benchmark-wrap .crb-trust-item:last-child {
    border-right: none;
}

.crb-benchmark-wrap .crb-trust-val {
    display:       block;
    font-family:   var(--cr-serif);
    font-size:     0.95rem;
    color:         var(--cr-text-900);
    margin-bottom: 3px;
}

.crb-benchmark-wrap .crb-trust-lbl {
    display:        block;
    font-size:      0.7rem;
    color:          var(--cr-text-500);
    letter-spacing: 0.04em;
}

/* ============================================================
   BUTTONS
   min-height: 48px meets WCAG 2.5.5 minimum touch target size.
   ============================================================ */
.crb-benchmark-wrap .crb-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    font-family:     var(--cr-sans);
    font-size:       0.86rem;
    font-weight:     600;
    letter-spacing:  0.04em;
    border:          none;
    border-radius:   var(--cr-radius-sm);
    cursor:          pointer;
    transition:      background var(--cr-transition), opacity var(--cr-transition), box-shadow var(--cr-transition);
    text-decoration: none;
    min-height:      48px;
    padding:         11px 26px;
    white-space:     nowrap;
}

.crb-benchmark-wrap .crb-btn:focus-visible {
    outline:        2px solid var(--cr-gold-500);
    outline-offset: 3px;
}

.crb-benchmark-wrap .crb-btn-primary {
    background: var(--cr-navy-900);
    color:      var(--cr-ivory-50);
}

.crb-benchmark-wrap .crb-btn-primary:hover {
    background: var(--cr-navy-800);
    box-shadow: 0 2px 8px rgba(15, 23, 36, 0.18);
}

.crb-benchmark-wrap .crb-btn-primary:disabled {
    opacity:    0.36;
    cursor:     not-allowed;
    box-shadow: none;
}

.crb-benchmark-wrap .crb-btn-gold {
    background: var(--cr-gold-500);
    color:      var(--cr-navy-950);
}

.crb-benchmark-wrap .crb-btn-gold:hover {
    background: var(--cr-gold-600);
    box-shadow: 0 2px 8px rgba(200, 164, 93, 0.28);
}

.crb-benchmark-wrap .crb-btn-full {
    width: 100%;
}

/* Back button — text/underline style.
   min-height: 48px for WCAG 2.5.5.             */
.crb-benchmark-wrap .crb-btn-back {
    background:            none;
    border:                none;
    color:                 var(--cr-text-500);
    font-size:             0.83rem;
    cursor:                pointer;
    padding:               8px 4px;
    font-family:           var(--cr-sans);
    text-decoration:       underline;
    text-underline-offset: 3px;
    transition:            color var(--cr-transition);
    min-height:            48px;
}

.crb-benchmark-wrap .crb-btn-back:hover {
    color: var(--cr-text-700);
}

.crb-benchmark-wrap .crb-btn-back:focus-visible {
    outline:        2px solid var(--cr-gold-500);
    outline-offset: 3px;
}

.crb-benchmark-wrap .crb-btn-link {
    background:            none;
    border:                none;
    color:                 var(--cr-gold-600);
    font-size:             0.87rem;
    font-weight:           500;
    cursor:                pointer;
    padding:               0;
    font-family:           var(--cr-sans);
    text-decoration:       underline;
    text-underline-offset: 3px;
    transition:            color var(--cr-transition);
}

.crb-benchmark-wrap .crb-btn-link:hover {
    color: var(--cr-gold-500);
}

.crb-benchmark-wrap .crb-btn-link:focus-visible {
    outline:        2px solid var(--cr-gold-500);
    outline-offset: 3px;
}

/* ============================================================
   SCREEN CARD  (pre-question)
   ============================================================ */
.crb-benchmark-wrap .crb-screen-card {
    max-width: 760px;
    margin:    0 auto;
    padding:   44px 44px 38px;
}

/* FIX: h2 style grouped to cover both card types that render an h2.
   Previously only .crb-screen-card h2 existed; .crb-form-card h2
   fell through to WordPress theme defaults (wrong font/size/color). */
.crb-benchmark-wrap .crb-screen-card h2,
.crb-benchmark-wrap .crb-form-card h2 {
    font-family:   var(--cr-serif);
    font-size:     clamp(1.25rem, 3vw, 1.65rem);
    font-weight:   400;
    color:         var(--cr-text-900);
    margin-bottom: 9px;
    line-height:   1.3;
}

.crb-benchmark-wrap .crb-support-line {
    font-size:     0.875rem;
    color:         var(--cr-text-500);
    margin-bottom: 32px;
    line-height:   1.6;
}

/* ============================================================
   PRE-QUESTION — SEGMENTED CARDS
   ============================================================ */
.crb-benchmark-wrap .crb-field-group {
    margin-bottom: 26px;
}

.crb-benchmark-wrap .crb-field-label {
    display:        block;
    font-size:      0.76rem;
    font-weight:    600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color:          var(--cr-text-700);
    margin-bottom:  10px;
}

.crb-benchmark-wrap .crb-seg-group {
    display:        flex;
    flex-direction: column;
    gap:            7px;
}

.crb-benchmark-wrap .crb-seg-card {
    display:         flex;
    align-items:     center;
    padding:         12px 15px;
    border:          1.5px solid var(--cr-border-200);
    border-radius:   var(--cr-radius-sm);
    cursor:          pointer;
    font-size:       0.87rem;
    color:           var(--cr-text-700);
    background:      var(--cr-surface-0);
    transition:      border-color var(--cr-transition), background var(--cr-transition);
    user-select:     none;
    min-height:      48px;
    position:        relative;
    font-family:     var(--cr-sans);
    text-align:      left;
    width:           100%;
}

.crb-benchmark-wrap .crb-seg-card:hover {
    border-color: var(--cr-gold-500);
    background:   var(--cr-ivory-50);
}

.crb-benchmark-wrap .crb-seg-card.is-selected {
    border-color:  var(--cr-gold-500);
    background:    #FBF7F0;
    color:         var(--cr-text-900);
    padding-right: 38px; /* keep text clear of the checkmark circle */
}

/* Gold check circle — functional selected indicator, not decorative */
.crb-benchmark-wrap .crb-seg-card.is-selected::after {
    content:          '';
    position:         absolute;
    right:            13px;
    top:              50%;
    transform:        translateY(-50%);
    width:            16px;
    height:           16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23C8A45D'/%3E%3Cpath d='M4.5 8l2.5 2.5 4.5-4.5' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size:  contain;
}

.crb-benchmark-wrap .crb-seg-card:focus-visible {
    outline:        2px solid var(--cr-gold-500);
    outline-offset: 2px;
}

/* ============================================================
   QUESTION FLOW
   ============================================================ */
.crb-benchmark-wrap .crb-q-container {
    max-width: 760px;
    margin:    0 auto;
}

.crb-benchmark-wrap .crb-q-meta {
    display:       flex;
    align-items:   center;
    margin-bottom: 18px;
    gap:           16px;
}

.crb-benchmark-wrap .crb-q-step {
    font-size:      0.72rem;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--cr-text-500);
    white-space:    nowrap;
}

.crb-benchmark-wrap .crb-progress-rail {
    flex:          1;
    height:        3px;
    background:    var(--cr-border-200);
    border-radius: 2px;
    overflow:      hidden;
}

.crb-benchmark-wrap .crb-progress-fill {
    height:        100%;
    background:    var(--cr-gold-500);
    border-radius: 2px;
    transition:    width 300ms ease;
}

/* Question card inner padding */
.crb-benchmark-wrap .crb-q-card {
    padding: 38px 42px 34px;
}

.crb-benchmark-wrap .crb-q-text {
    font-family:   var(--cr-serif);
    font-size:     clamp(1.05rem, 2.5vw, 1.25rem);
    font-weight:   400;
    color:         var(--cr-text-900);
    line-height:   1.45;
    margin-bottom: 11px;
}

.crb-benchmark-wrap .crb-q-context {
    font-size:     0.8rem;
    color:         var(--cr-text-500);
    font-style:    italic;
    margin-bottom: 28px;
    padding-left:  12px;
    border-left:   2px solid var(--cr-border-200);
    line-height:   1.55;
}

/* Answer cards */
.crb-benchmark-wrap .crb-ans-list {
    display:        flex;
    flex-direction: column;
    gap:            9px;
    margin-bottom:  28px;
}

.crb-benchmark-wrap .crb-ans {
    display:       flex;
    align-items:   flex-start;
    gap:           13px;
    padding:       13px 16px;
    border:        1.5px solid var(--cr-border-200);
    border-radius: var(--cr-radius-sm);
    cursor:        pointer;
    background:    var(--cr-surface-0);
    transition:    border-color var(--cr-transition), background var(--cr-transition);
    text-align:    left;
    width:         100%;
    max-width:     100%;     /* FIX: hard cap on button width */
    font-family:   var(--cr-sans);
    min-height:    52px;
    overflow:      hidden;   /* FIX: clip any content that escapes the button box */
    white-space:   normal;   /* FIX: override any theme button { white-space:nowrap } */
}

.crb-benchmark-wrap .crb-ans:hover {
    border-color: rgba(200, 164, 93, 0.55);
    background:   var(--cr-ivory-50);
}

.crb-benchmark-wrap .crb-ans.is-selected {
    border-color: var(--cr-gold-500);
    background:   #FBF7F0;
}

.crb-benchmark-wrap .crb-ans:focus-visible {
    outline:        2px solid var(--cr-gold-500);
    outline-offset: 2px;
}

/* Answer letter circle */
.crb-benchmark-wrap .crb-ans-letter {
    flex-shrink:     0;
    width:           21px;
    height:          21px;
    border-radius:   50%;
    border:          1.5px solid var(--cr-border-200);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.67rem;
    font-weight:     700;
    color:           var(--cr-text-500);
    margin-top:      1px;
    background:      var(--cr-surface-0);
    transition:      border-color var(--cr-transition), background var(--cr-transition), color var(--cr-transition);
    letter-spacing:  0;
}

.crb-benchmark-wrap .crb-ans.is-selected .crb-ans-letter {
    background:   var(--cr-gold-500);
    border-color: var(--cr-gold-500);
    color:        var(--cr-navy-950);
}

.crb-benchmark-wrap .crb-ans-text {
    font-size:     0.875rem;
    color:         var(--cr-text-700);
    line-height:   1.55;
    flex:          1;
    min-width:     0;            /* FIX: lets flex child compress within card */
    overflow-wrap: break-word;   /* FIX: wraps long unbroken strings */
    word-break:    break-word;   /* FIX: fallback for older browsers */
    white-space:   normal;       /* FIX: override any inherited nowrap from theme */
}

.crb-benchmark-wrap .crb-ans.is-selected .crb-ans-text {
    color: var(--cr-text-900);
}

/* Question navigation */
.crb-benchmark-wrap .crb-q-nav {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
}

.crb-benchmark-wrap .crb-q-nav-right {
    display:     flex;
    align-items: center;
    gap:         16px;
    margin-left: auto;
}

/* ============================================================
   RESULTS SCREEN
   ============================================================ */
.crb-benchmark-wrap .crb-results-container {
    max-width: 860px;
    margin:    0 auto;
}

.crb-benchmark-wrap .crb-results-card {
    padding: 44px 48px 40px;
}

/* Score area */
.crb-benchmark-wrap .crb-score-area {
    margin-bottom:  28px;
    padding-bottom: 28px;
    border-bottom:  1px solid var(--cr-border-200);
}

.crb-benchmark-wrap .crb-score-label {
    font-size:      0.72rem;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--cr-text-500);
    margin-bottom:  12px;
}

.crb-benchmark-wrap .crb-score-value {
    font-family:    var(--cr-serif);
    font-size:      clamp(2rem, 5vw, 2.8rem);
    color:          var(--cr-text-900);
    line-height:    1;
    margin-bottom:  14px;
    letter-spacing: -0.02em;
}

.crb-benchmark-wrap .crb-score-denom {
    font-size:   0.5em;
    color:       var(--cr-text-500);
    font-weight: 400;
}

/* Band badge */
.crb-benchmark-wrap .crb-band-badge {
    display:        inline-block;
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding:        5px 13px;
    border-radius:  4px;
    margin-bottom:  16px;
}

.crb-benchmark-wrap .crb-band-badge.is-exposed {
    background: rgba(160, 86, 74, 0.1);
    color:      var(--cr-danger-500);
    border:     1px solid rgba(160, 86, 74, 0.2);
}

.crb-benchmark-wrap .crb-band-badge.is-partial {
    background: rgba(179, 131, 44, 0.1);
    color:      var(--cr-warning-500);
    border:     1px solid rgba(179, 131, 44, 0.2);
}

.crb-benchmark-wrap .crb-band-badge.is-structured {
    background: rgba(72, 107, 74, 0.1);
    color:      var(--cr-success-500);
    border:     1px solid rgba(72, 107, 74, 0.2);
}

.crb-benchmark-wrap .crb-results-interp {
    font-size:     0.93rem;
    color:         var(--cr-text-700);
    line-height:   1.65;
    margin-bottom: 13px;
}

.crb-benchmark-wrap .crb-bench-compare {
    font-size:     0.8rem;
    color:         var(--cr-text-500);
    font-style:    italic;
    padding:       11px 15px;
    background:    var(--cr-surface-50);
    border:        1px solid var(--cr-border-200);
    border-radius: var(--cr-radius-sm);
}

/* Dimension breakdown */
.crb-benchmark-wrap .crb-results-dims {
    margin-bottom:  28px;
    padding-bottom: 28px;
    border-bottom:  1px solid var(--cr-border-200);
}

.crb-benchmark-wrap .crb-dims-label {
    font-size:      0.7rem;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--cr-text-500);
    margin-bottom:  18px;
}

.crb-benchmark-wrap .crb-dim-row {
    display:       flex;
    align-items:   center;
    gap:           14px;
    margin-bottom: 13px;
}

.crb-benchmark-wrap .crb-dim-row:last-child {
    margin-bottom: 0;
}

.crb-benchmark-wrap .crb-dim-name {
    font-size:   0.78rem;
    color:       var(--cr-text-700);
    width:       190px;
    flex-shrink: 0;
    line-height: 1.4;
}

.crb-benchmark-wrap .crb-dim-rail {
    flex:          1;
    height:        7px;
    background:    var(--cr-surface-100);
    border-radius: 4px;
    overflow:      hidden;
    border:        1px solid var(--cr-border-200);
}

.crb-benchmark-wrap .crb-dim-fill {
    height:        100%;
    width:         0;
    border-radius: 4px;
    transition:    width 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.crb-benchmark-wrap .crb-dim-fill.is-lo {
    background: rgba(160, 86, 74, 0.65);
}

.crb-benchmark-wrap .crb-dim-fill.is-md {
    background: rgba(179, 131, 44, 0.75);
}

.crb-benchmark-wrap .crb-dim-fill.is-hi {
    background: var(--cr-success-500);
}

.crb-benchmark-wrap .crb-dim-score {
    font-size:   0.8rem;
    color:       var(--cr-text-700);
    font-weight: 600;
    width:       34px;
    text-align:  right;
    flex-shrink: 0;
}

/* Gap insight card */
.crb-benchmark-wrap .crb-gap-card {
    background:    var(--cr-ivory-50);
    border:        1px solid var(--cr-border-200);
    border-left:   3px solid var(--cr-gold-500);
    border-radius: var(--cr-radius-sm);
    padding:       18px 20px;
    margin-bottom: 24px;
}

.crb-benchmark-wrap .crb-gap-label {
    font-size:      0.68rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--cr-gold-600);
    margin-bottom:  5px;
}

.crb-benchmark-wrap .crb-gap-dim {
    font-size:     0.875rem;
    font-weight:   600;
    color:         var(--cr-text-900);
    margin-bottom: 7px;
}

.crb-benchmark-wrap .crb-gap-text {
    font-size:   0.845rem;
    color:       var(--cr-text-700);
    line-height: 1.6;
}

/* Anti-self-drafting advisory block */
.crb-benchmark-wrap .crb-advisory {
    background:    var(--cr-navy-950);
    border-radius: var(--cr-radius-sm);
    padding:       16px 20px;
    margin-bottom: 32px;
}

.crb-benchmark-wrap .crb-advisory p {
    font-size:   0.845rem;
    color:       rgba(247, 244, 238, 0.82);
    line-height: 1.65;
}

.crb-benchmark-wrap .crb-advisory strong {
    color: var(--cr-gold-500);
}

/* Results CTA area */
.crb-benchmark-wrap .crb-cta-area {
    background:    var(--cr-surface-50);
    border:        1px solid var(--cr-border-200);
    border-radius: var(--cr-radius-md);
    padding:       28px 28px 24px;
    text-align:    center;
}

.crb-benchmark-wrap .crb-cta-area h3 {
    font-family:   var(--cr-serif);
    font-size:     1.2rem;
    font-weight:   400;
    color:         var(--cr-text-900);
    margin-bottom: 9px;
    line-height:   1.35;
}

.crb-benchmark-wrap .crb-cta-support {
    font-size:     0.86rem;
    color:         var(--cr-text-500);
    margin-bottom: 20px;
    line-height:   1.6;
}

.crb-benchmark-wrap .crb-cta-sec {
    margin-top: 14px;
}

/* ============================================================
   FORM SCREEN
   h2 style is covered by the grouped rule above with .crb-screen-card h2.
   ============================================================ */
.crb-benchmark-wrap .crb-form-card {
    max-width: 600px;
    margin:    0 auto;
    padding:   44px 44px 38px;
}

.crb-benchmark-wrap .crb-form-field {
    margin-bottom: 18px;
}

.crb-benchmark-wrap .crb-form-label {
    display:        block;
    font-size:      0.76rem;
    font-weight:    600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color:          var(--cr-text-700);
    margin-bottom:  7px;
}

.crb-benchmark-wrap .crb-form-label-opt {
    font-weight:    400;
    color:          var(--cr-text-500);
    text-transform: none;
    letter-spacing: 0;
    font-size:      0.75rem;
}

.crb-benchmark-wrap .crb-form-input {
    width:              100%;
    height:             48px;
    padding:            0 15px;
    border:             1.5px solid var(--cr-border-200);
    border-radius:      var(--cr-radius-sm);
    font-family:        var(--cr-sans);
    font-size:          0.89rem;
    color:              var(--cr-text-900);
    background:         var(--cr-surface-0);
    transition:         border-color var(--cr-transition), box-shadow var(--cr-transition);
    -webkit-appearance: none;
    appearance:         none;
}

.crb-benchmark-wrap .crb-form-input::placeholder {
    color: var(--cr-text-500);
}

.crb-benchmark-wrap .crb-form-input:focus {
    outline:      none;
    border-color: var(--cr-gold-500);
    box-shadow:   0 0 0 3px var(--cr-focus);
}

.crb-benchmark-wrap .crb-form-input.has-error {
    border-color: var(--cr-danger-500);
}

.crb-benchmark-wrap .crb-field-err {
    display:    block;
    font-size:  0.75rem;
    color:      var(--cr-danger-500);
    margin-top: 5px;
}

.crb-benchmark-wrap .crb-privacy {
    font-size:   0.75rem;
    color:       var(--cr-text-500);
    line-height: 1.55;
    margin-top:  14px;
    padding-top: 14px;
    border-top:  1px solid var(--cr-border-200);
}

/* ============================================================
   SHARED UTILITY
   ============================================================ */
.crb-benchmark-wrap .crb-action-row {
    margin-top: 28px;
}

/* ============================================================
   CONFIRMATION SCREEN
   ============================================================ */
.crb-benchmark-wrap .crb-confirm-wrap {
    max-width:   600px;
    margin:      0 auto;
    text-align:  center;
    padding:     56px 32px 48px;
}

.crb-benchmark-wrap .crb-confirm-icon {
    width:           52px;
    height:          52px;
    border:          2px solid var(--cr-gold-500);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0 auto 22px;
}

.crb-benchmark-wrap .crb-confirm-icon svg {
    width:  22px;
    height: 22px;
    stroke: var(--cr-gold-500);
}

.crb-benchmark-wrap .crb-confirm-wrap h2 {
    font-family:   var(--cr-serif);
    font-size:     1.55rem;
    font-weight:   400;
    color:         var(--cr-text-900);
    margin-bottom: 13px;
}

.crb-benchmark-wrap .crb-confirm-wrap p {
    font-size:     0.9rem;
    color:         var(--cr-text-500);
    line-height:   1.7;
    margin-bottom: 8px;
}

.crb-benchmark-wrap .crb-confirm-cta {
    margin-top:  28px;
    padding-top: 24px;
    border-top:  1px solid var(--cr-border-200);
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */
@media (max-width: 600px) {

    .crb-benchmark-wrap .crb-benchmark-app {
        padding: 24px 14px 56px;
    }

    .crb-benchmark-wrap .crb-screen-card,
    .crb-benchmark-wrap .crb-q-card,
    .crb-benchmark-wrap .crb-results-card,
    .crb-benchmark-wrap .crb-form-card {
        padding: 24px 18px 20px;
    }

    /* Trust row stacks vertically on mobile */
    .crb-benchmark-wrap .crb-trust-row {
        flex-direction: column;
    }

    .crb-benchmark-wrap .crb-trust-item {
        border-right:  none;
        border-bottom: 1px solid var(--cr-border-200);
        display:       flex;
        align-items:   center;
        gap:           10px;
        padding:       12px 16px;
        text-align:    left;
    }

    .crb-benchmark-wrap .crb-trust-item:last-child {
        border-bottom: none;
    }

    .crb-benchmark-wrap .crb-trust-val {
        margin-bottom: 0;
    }

    /* Dimension name narrows on small screens */
    .crb-benchmark-wrap .crb-dim-name {
        width:     110px;
        font-size: 0.72rem;
    }

    /* Question nav: Next button stacks above Back */
    .crb-benchmark-wrap .crb-q-nav {
        flex-direction: column-reverse;
        align-items:    stretch;
    }

    .crb-benchmark-wrap .crb-q-nav-right {
        flex-direction: column-reverse;
        margin-left:    0;
        width:          100%;
    }

    .crb-benchmark-wrap .crb-q-nav-right .crb-btn {
        width: 100%;
    }

    .crb-benchmark-wrap .crb-btn-back {
        text-align: center;
    }
}

/* ============================================================
   PRE-STEP VALIDATION ERRORS
   ============================================================ */

.crb-benchmark-wrap .crb-field-group.has-pre-error .crb-seg-group {
    outline: 2px solid var(--cr-danger-500);
    outline-offset: 4px;
    border-radius: var(--cr-radius-sm);
}

.crb-benchmark-wrap .crb-pre-err {
    display: block;
    margin-top: 8px;
    font-family: var(--cr-sans);
    font-size: 0.82rem;
    color: var(--cr-danger-500);
    line-height: 1.4;
}

/* ============================================================
   STAGED PROGRESS UI
   ============================================================ */

.crb-benchmark-wrap .crb-progress-wrap {
    max-width: 440px;
    margin:  0 auto;
    padding: 48px 32px 56px;
    text-align: center;
}

.crb-benchmark-wrap .crb-progress-header {
    margin-bottom: 36px;
}

.crb-benchmark-wrap .crb-progress-header h2 {
    font-family: var(--cr-serif);
    font-size:   1.35rem;
    font-weight: 400;
    color:       var(--cr-text-900);
    margin:      16px 0 8px;
    line-height: 1.3;
}

/* Spinner */
.crb-benchmark-wrap .crb-progress-spinner {
    display:       inline-block;
    width:         36px;
    height:        36px;
    border:        3px solid var(--cr-border-200);
    border-top:    3px solid var(--cr-gold-500);
    border-radius: 50%;
    animation:     crb-spin 0.9s linear infinite;
}

@keyframes crb-spin {
    to { transform: rotate( 360deg ); }
}

/* Stages list */
.crb-benchmark-wrap .crb-progress-stages {
    text-align: left;
    max-width:  320px;
    margin:     0 auto;
}

.crb-benchmark-wrap .crb-progress-stage {
    display:     flex;
    align-items: center;
    padding:     12px 0;
    opacity:     0.35;
    transition:  opacity 400ms ease, transform 400ms ease;
    transform:   translateY( 4px );
}

.crb-benchmark-wrap .crb-progress-stage.is-active {
    opacity:   1;
    transform: translateY( 0 );
}

.crb-benchmark-wrap .crb-progress-stage.is-done {
    opacity:   0.55;
    transform: translateY( 0 );
}

/* Stage indicator dot */
.crb-benchmark-wrap .crb-stage-indicator {
    flex-shrink: 0;
    width:       28px;
    height:      28px;
    display:     flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
}

.crb-benchmark-wrap .crb-stage-dot {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    background:    var(--cr-border-200);
    transition:    background 400ms ease, transform 400ms ease;
}

.crb-benchmark-wrap .crb-progress-stage.is-active .crb-stage-dot {
    background: var(--cr-gold-500);
    transform:  scale( 1.3 );
    box-shadow: 0 0 0 4px rgba( 200, 164, 93, 0.2 );
}

.crb-benchmark-wrap .crb-progress-stage.is-done .crb-stage-dot {
    background: var(--cr-success-500);
    transform:  scale( 1 );
}

/* Stage label */
.crb-benchmark-wrap .crb-stage-label {
    font-family: var(--cr-sans);
    font-size:   0.9rem;
    color:       var(--cr-text-700);
    line-height: 1.4;
}

.crb-benchmark-wrap .crb-progress-stage.is-active .crb-stage-label {
    color:       var(--cr-text-900);
    font-weight: 600;
}