/* ═══════════════════════════════════════════════════════════
   BRAND-SCORE.CSS — Umbrella Corp HQ
   Brand Score Audit Tool
   Fonts : Bebas Neue (display) + DM Sans 300/400 (body)
   Tokens: --corp-red #c1121f | --void #0a0a0a | --carbon #111
           --ivory #f0ede8 | --steel #666
═══════════════════════════════════════════════════════════ */

/* ─── Local Token Aliases ───────────────────────────────── */
:root {
  --bs-card-bg:       #1e1e1e;
  --bs-input-bg:      #161616;
  --bs-border:        rgba(255,255,255,0.07);
  --bs-border-red:    rgba(193,18,31,0.35);
  --bs-border-focus:  #c1121f;
  --bs-section-pad:   120px;
  --bs-radius:        0px;
  --transition-snap:  0.18s ease;

  /* Verdict colours */
  --c-critical:   #7f1d1d;
  --c-needs-work: #c1121f;
  --c-average:    #f59e0b;
  --c-good:       #16a34a;
  --c-excellent:  #22c55e;
}

/* ═══════════════════════════════
   HERO
═══════════════════════════════ */
.tool-hero {
  min-height:       100vh;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  background:       var(--void);
  position:         relative;
  overflow:         hidden;
  padding-top:      var(--nav-height);
}

.tool-hero::before {
  content:        '';
  position:       absolute;
  top:            0;
  left:           50%;
  transform:      translateX(-50%);
  width:          900px;
  height:         600px;
  background:     radial-gradient(ellipse 80% 60% at 50% 0%, rgba(193,18,31,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.tool-hero::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events:  none;
}

.tool-hero-inner {
  position:   relative;
  z-index:    2;
  text-align: center;
  max-width:  860px;
  padding:    0 24px;
}

.tool-breadcrumb {
  display:        inline-flex;
  align-items:    center;
  gap:            10px;
  font-size:      11px;
  color:          var(--steel);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-family:    var(--font-body);
  font-weight:    500;
  margin-bottom:  40px;
  opacity:        0;
  animation:      fadeInUp 0.5s ease 0.1s forwards;
}

.tool-breadcrumb a        { color: var(--steel); text-decoration: none; transition: color var(--transition-snap); }
.tool-breadcrumb a:hover  { color: var(--corp-red); }
.tool-breadcrumb span:last-child { color: rgba(240,237,232,0.5); }

.tool-hero-heading {
  font-family:    var(--font-display);
  font-size:      80px;
  line-height:    0.92;
  letter-spacing: 0.01em;
  color:          var(--ivory);
  margin-bottom:  32px;
  opacity:        0;
  animation:      fadeInUp 0.6s ease 0.2s forwards;
}

.tool-hero-sub {
  font-family:  var(--font-body);
  font-weight:  300;
  font-size:    18px;
  color:        var(--steel);
  line-height:  1.75;
  max-width:    600px;
  margin:       0 auto 48px;
  opacity:      0;
  animation:    fadeInUp 0.6s ease 0.35s forwards;
}

/* Trust bar */
.trust-bar {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             12px;
  margin-bottom:   64px;
  opacity:         0;
  animation:       fadeInUp 0.6s ease 0.5s forwards;
}

.trust-pill {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  padding:        8px 18px;
  background:     rgba(193,18,31,0.06);
  border:         1px solid rgba(193,18,31,0.22);
  color:          var(--ivory);
  font-family:    var(--font-body);
  font-size:      12px;
  font-weight:    500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:     background var(--transition-snap), border-color var(--transition-snap);
}

.trust-pill:hover { background: rgba(193,18,31,0.12); border-color: rgba(193,18,31,0.4); }

/* Scroll hint */
.scroll-hint {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
  color:          var(--steel);
  font-family:    var(--font-body);
  font-size:      11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity:        0;
  animation:      fadeInUp 0.6s ease 0.7s forwards;
}

.scroll-hint svg { width: 22px; height: 22px; animation: bounceDown 2s ease-in-out infinite; }

/* ═══════════════════════════════
   FORM SECTION
═══════════════════════════════ */
.bs-form-section {
  padding:    var(--bs-section-pad) 0;
  background: var(--void);
}

/* ─── Progress tracker ──────────────────────────────────── */
.bs-stepper {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0;
  margin-bottom:   48px;
}

.bs-step-dot {
  width:           36px;
  height:          36px;
  border-radius:   50%;
  border:          1px solid rgba(255,255,255,0.15);
  background:      #1a1a1a;
  color:           var(--steel);
  font-family:     var(--font-display);
  font-size:       14px;
  letter-spacing:  0.05em;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  transition:      all 0.2s ease;
  position:        relative;
  z-index:         1;
  flex-shrink:     0;
}

.bs-step-dot.is-active {
  background:  var(--corp-red);
  border-color: var(--corp-red);
  color:       var(--ivory);
  box-shadow:  0 0 0 4px rgba(193,18,31,0.18);
}

.bs-step-dot.is-complete {
  background:  rgba(193,18,31,0.15);
  border-color: rgba(193,18,31,0.4);
  color:       var(--corp-red);
  cursor:      pointer;
}

.bs-step-dot.is-complete::after {
  content:    '✓';
  font-size:  14px;
  font-family: var(--font-body);
}

.bs-step-dot.is-complete span { display: none; }

.bs-step-dot.is-upcoming {
  opacity: 0.4;
  cursor:  default;
}

.bs-step-connector {
  flex:        1;
  height:      1px;
  background:  rgba(255,255,255,0.1);
  max-width:   80px;
  transition:  background 0.3s ease;
}

.bs-step-connector.is-filled {
  background: rgba(193,18,31,0.4);
}

/* ─── Progress bar (thin, under stepper) ────────────────── */
.bs-progress-bar {
  max-width:  860px;
  margin:     -32px auto 44px;
  height:     2px;
  background: rgba(255,255,255,0.05);
}

.bs-progress-fill {
  height:     100%;
  width:      0%;
  background: var(--corp-red);
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* ─── Form card ─────────────────────────────────────────── */
.bs-card {
  background:    var(--bs-card-bg);
  border-top:    3px solid var(--corp-red);
  border-left:   1px solid var(--bs-border);
  border-right:  1px solid var(--bs-border);
  border-bottom: 1px solid var(--bs-border);
  padding:       60px 60px 64px;
  max-width:     860px;
  margin:        0 auto;
  position:      relative;
  animation:     fadeInUp 0.4s ease forwards;
}

.bs-card::before {
  content:       '';
  position:      absolute;
  bottom:        0;
  right:         0;
  width:         48px;
  height:        48px;
  border-bottom: 2px solid rgba(193,18,31,0.2);
  border-right:  2px solid rgba(193,18,31,0.2);
}

/* ─── Step label ────────────────────────────────────────── */
.bs-step-label {
  font-family:    var(--font-display);
  font-size:      13px;
  color:          var(--corp-red);
  letter-spacing: 0.3em;
  margin-bottom:  36px;
  display:        block;
}

/* ─── Form groups ───────────────────────────────────────── */
.bs-form-group { margin-bottom: 28px; }

.bs-form-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   24px;
}

.bs-label {
  display:        block;
  font-family:    var(--font-body);
  font-size:      11px;
  font-weight:    500;
  color:          var(--steel);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom:  10px;
}

.bs-required { color: var(--corp-red); margin-left: 2px; }

/* ─── Inputs & selects ──────────────────────────────────── */
.bs-input,
.bs-select,
.bs-textarea {
  width:           100%;
  background:      var(--bs-input-bg);
  border:          1px solid var(--bs-border);
  color:           var(--ivory);
  font-family:     var(--font-body);
  font-size:       15px;
  font-weight:     300;
  padding:         14px 20px;
  outline:         none;
  transition:      border-color var(--transition-snap), background var(--transition-snap), box-shadow var(--transition-snap);
  -webkit-appearance: none;
  appearance:      none;
  box-sizing:      border-box;
}

.bs-textarea { resize: vertical; min-height: 88px; line-height: 1.6; }

.bs-input:focus,
.bs-select:focus,
.bs-textarea:focus {
  border-color: var(--bs-border-focus);
  background:   #1a1a1a;
  box-shadow:   0 0 0 3px rgba(193,18,31,0.1);
}

.bs-input::placeholder,
.bs-textarea::placeholder { color: rgba(102,102,102,0.55); font-weight: 300; }

.bs-input.is-error,
.bs-select.is-error { border-color: #e74c3c; }

/* Styled select arrow */
.bs-select {
  background-image:    url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23c1121f' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 18px center;
  padding-right:       48px;
  cursor:              pointer;
}

.bs-select option { background: #1e1e1e; color: var(--ivory); }

.bs-field-error {
  display:     block;
  font-size:   11px;
  color:       #e74c3c;
  margin-top:  6px;
  min-height:  16px;
  font-family: var(--font-body);
  font-weight: 400;
}

.bs-helper-text {
  font-family: var(--font-body);
  font-size:   12px;
  color:       rgba(102,102,102,0.7);
  margin-top:  7px;
  line-height: 1.5;
}

/* ─── Yes/No toggle pair ────────────────────────────────── */
.bs-yn-group {
  display: flex;
  gap:     12px;
}

.bs-yn-label {
  flex:            1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  padding:         12px 20px;
  background:      var(--bs-input-bg);
  border:          1px solid var(--bs-border);
  color:           var(--steel);
  font-family:     var(--font-body);
  font-size:       14px;
  font-weight:     400;
  cursor:          pointer;
  transition:      all 0.18s ease;
  user-select:     none;
}

.bs-yn-label input { display: none; }

.bs-yn-label.is-checked {
  background:   rgba(193,18,31,0.1);
  border-color: var(--corp-red);
  color:        var(--ivory);
}

/* ─── Pill checkbox group ───────────────────────────────── */
.bs-pills-wrap {
  display:   flex;
  flex-wrap: wrap;
  gap:       10px;
  margin-top: 4px;
}

.bs-pill-toggle {
  display:     inline-flex;
  align-items: center;
  gap:         7px;
  padding:     9px 18px;
  background:  var(--bs-input-bg);
  border:      1px solid var(--bs-border);
  color:       var(--steel);
  font-family: var(--font-body);
  font-size:   13px;
  font-weight: 400;
  cursor:      pointer;
  transition:  all 0.15s ease;
  user-select: none;
}

.bs-pill-toggle input { display: none; }

.bs-pill-toggle.is-checked {
  background:   rgba(193,18,31,0.1);
  border-color: var(--corp-red);
  color:        var(--ivory);
}

.bs-pill-toggle:hover:not(.is-checked) {
  border-color: rgba(193,18,31,0.3);
  color:        rgba(240,237,232,0.7);
}

/* ─── Range slider ──────────────────────────────────────── */
.bs-slider-wrap {
  display:       flex;
  align-items:   center;
  gap:           20px;
  margin-bottom: 8px;
}

.bs-range-slider {
  flex:               1;
  -webkit-appearance: none;
  appearance:         none;
  height:             4px;
  outline:            none;
  border:             none;
  cursor:             pointer;
  padding:            0;
  background:         #2a2a2a;
}

.bs-range-slider::-webkit-slider-runnable-track { height: 4px; background: #2a2a2a; border: none; }
.bs-range-slider::-moz-range-track              { height: 4px; background: #2a2a2a; border: none; }
.bs-range-slider::-moz-range-progress           { background: var(--corp-red); height: 4px; }

.bs-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance:         none;
  width:              22px;
  height:             22px;
  background:         var(--corp-red);
  border-radius:      50%;
  cursor:             pointer;
  border:             2px solid rgba(255,255,255,0.15);
  transition:         transform 0.15s ease, box-shadow 0.15s ease;
  margin-top:         -9px;
}

.bs-range-slider::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(193,18,31,0.2); }
.bs-range-slider::-moz-range-thumb           { width: 22px; height: 22px; background: var(--corp-red); border-radius: 50%; cursor: pointer; border: 2px solid rgba(255,255,255,0.15); }

.bs-slider-display {
  font-family:    var(--font-display);
  font-size:      20px;
  color:          var(--ivory);
  letter-spacing: 0.03em;
  min-width:      160px;
  text-align:     right;
  white-space:    nowrap;
  line-height:    1;
}

/* ─── Navigation buttons ────────────────────────────────── */
.bs-btn-row {
  display:     flex;
  align-items: center;
  gap:         16px;
  margin-top:  44px;
}

.bs-next-btn,
.bs-submit-btn {
  flex:            1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  padding:         20px 32px;
  background:      var(--corp-red);
  color:           var(--ivory);
  font-family:     var(--font-display);
  font-size:       22px;
  letter-spacing:  0.12em;
  border:          none;
  cursor:          pointer;
  position:        relative;
  overflow:        hidden;
  transition:      background 0.2s ease, transform 0.15s ease;
}

.bs-next-btn::before,
.bs-submit-btn::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       -100%;
  width:      100%;
  height:     100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  transition: left 0.45s ease;
}

.bs-next-btn:hover,
.bs-submit-btn:hover { background: #a50e19; }

.bs-next-btn:hover::before,
.bs-submit-btn:hover::before { left: 100%; }

.bs-next-btn:active,
.bs-submit-btn:active { transform: scale(0.99); }

.bs-back-btn {
  padding:        18px 28px;
  background:     transparent;
  border:         1px solid rgba(255,255,255,0.12);
  color:          var(--steel);
  font-family:    var(--font-display);
  font-size:      18px;
  letter-spacing: 0.1em;
  cursor:         pointer;
  transition:     border-color 0.2s ease, color 0.2s ease;
  white-space:    nowrap;
}

.bs-back-btn:hover { border-color: rgba(255,255,255,0.25); color: var(--ivory); }

/* ─── Global error ──────────────────────────────────────── */
.bs-global-error {
  display:       none;
  background:    rgba(127,29,29,0.18);
  border:        1px solid rgba(193,18,31,0.4);
  color:         #fca5a5;
  font-family:   var(--font-body);
  font-size:     13px;
  padding:       14px 20px;
  margin-bottom: 28px;
  line-height:   1.55;
}

/* ═══════════════════════════════
   LOADING
═══════════════════════════════ */
.bs-loading-section {
  padding:    120px 0;
  background: var(--void);
}

.bs-loading-inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            32px;
  text-align:     center;
}

.bs-loading-logo-wrap {
  position:        relative;
  width:           120px;
  height:          120px;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.bs-loading-logo-ring {
  width:     120px;
  height:    120px;
  animation: spinSlow 3.5s linear infinite;
}

.bs-loading-logo-wrap::after {
  content:      '';
  position:     absolute;
  inset:        -12px;
  border-radius: 50%;
  background:   radial-gradient(circle, rgba(193,18,31,0.15) 0%, transparent 70%);
  animation:    loadingPulse 1.8s ease-in-out infinite;
}

.bs-loading-title {
  font-family:    var(--font-display);
  font-size:      40px;
  letter-spacing: 0.04em;
  color:          var(--ivory);
  line-height:    1;
}

.bs-progress-bar-wrap {
  width:      360px;
  max-width:  100%;
  height:     3px;
  background: rgba(255,255,255,0.07);
  position:   relative;
  overflow:   hidden;
}

.bs-progress-bar-fill {
  height:     100%;
  width:      0%;
  background: var(--corp-red);
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}

.bs-progress-bar-fill::after {
  content:    '';
  position:   absolute;
  top:        0;
  right:      0;
  width:      40px;
  height:     100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
}

.bs-loading-msg {
  font-family:   var(--font-body);
  font-size:     14px;
  color:         var(--steel);
  letter-spacing: 0.05em;
  min-height:    22px;
  transition:    opacity 0.3s ease;
}

/* ═══════════════════════════════
   RESULTS
═══════════════════════════════ */
.bs-results-section {
  padding:    100px 0 var(--bs-section-pad);
  background: var(--void);
}

.bs-results-section .container { max-width: 1100px; }

/* ─── Results header ────────────────────────────────────── */
.bs-results-header {
  text-align:    center;
  margin-bottom: 80px;
}

.bs-results-tag {
  display:        inline-block;
  font-family:    var(--font-body);
  font-size:      11px;
  font-weight:    500;
  color:          var(--corp-red);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom:  20px;
  padding:        6px 16px;
  border:         1px solid rgba(193,18,31,0.25);
  background:     rgba(193,18,31,0.06);
}

.bs-results-title {
  font-family:    var(--font-display);
  font-size:      clamp(36px,5vw,68px);
  color:          var(--ivory);
  line-height:    0.95;
  letter-spacing: 0.01em;
  margin-bottom:  20px;
}

.bs-results-title span { color: var(--corp-red); }

.bs-results-headline {
  font-family:  var(--font-body);
  font-size:    18px;
  color:        rgba(240,237,232,0.7);
  max-width:    580px;
  margin:       0 auto 12px;
  line-height:  1.65;
  font-weight:  300;
}

.bs-results-summary {
  font-family:  var(--font-body);
  font-size:    15px;
  color:        var(--steel);
  max-width:    640px;
  margin:       0 auto;
  line-height:  1.8;
  font-weight:  300;
}

/* ─── Score circle ──────────────────────────────────────── */
.bs-score-section {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  margin-bottom:  80px;
}

.bs-score-ring-wrap {
  position:      relative;
  width:         180px;
  height:        180px;
  margin-bottom: 20px;
}

.bs-score-svg { width: 180px; height: 180px; }

#bs-score-circle {
  stroke-dasharray:  339.3;
  stroke-dashoffset: 339.3;
  transition:        stroke-dashoffset 1.6s cubic-bezier(0.4,0,0.2,1);
}

.bs-score-num-wrap {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             2px;
}

.bs-score-number {
  font-family:    var(--font-display);
  font-size:      60px;
  color:          var(--ivory);
  letter-spacing: 0.02em;
  line-height:    1;
}

.bs-score-denom {
  font-family:    var(--font-display);
  font-size:      24px;
  color:          var(--steel);
  align-self:     flex-end;
  padding-bottom: 8px;
}

.bs-score-label {
  font-family:    var(--font-body);
  font-size:      12px;
  font-weight:    500;
  color:          var(--steel);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom:  10px;
}

.bs-score-verdict {
  font-family:    var(--font-display);
  font-size:      26px;
  letter-spacing: 0.06em;
  padding:        6px 20px;
  border:         1px solid currentColor;
}

.bs-score-verdict.is-critical   { color: var(--c-critical);   border-color: var(--c-critical);   background: rgba(127,29,29,0.12);  }
.bs-score-verdict.is-needs-work { color: var(--c-needs-work); border-color: var(--c-needs-work); background: rgba(193,18,31,0.08);  }
.bs-score-verdict.is-average    { color: var(--c-average);    border-color: var(--c-average);    background: rgba(245,158,11,0.08); }
.bs-score-verdict.is-good       { color: var(--c-good);       border-color: var(--c-good);       background: rgba(22,163,74,0.08);  }
.bs-score-verdict.is-excellent  { color: var(--c-excellent);  border-color: var(--c-excellent);  background: rgba(34,197,94,0.08);  }

/* ─── Dimensions grid ───────────────────────────────────── */
.bs-dims-section {
  margin-bottom: 80px;
}

.bs-section-heading {
  font-family:    var(--font-display);
  font-size:      clamp(28px,3vw,42px);
  color:          var(--ivory);
  letter-spacing: 0.03em;
  margin-bottom:  36px;
  text-align:     center;
}

.bs-dims-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1px;
  background:            rgba(255,255,255,0.04);
  max-width:             900px;
  margin:                0 auto;
}

/* last item spans full width if odd count */
.bs-dim-row:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.bs-dim-row {
  background: #181818;
  padding:    32px 28px;
  transition: background 0.2s ease;
}

.bs-dim-row:hover { background: #1f1f1f; }

.bs-dim-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   14px;
}

.bs-dim-name {
  font-family:    var(--font-body);
  font-size:      12px;
  font-weight:    500;
  color:          var(--steel);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.bs-dim-right {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.bs-dim-score {
  font-family:    var(--font-display);
  font-size:      22px;
  color:          var(--ivory);
  letter-spacing: 0.04em;
  line-height:    1;
}

.bs-dim-verdict-pill {
  font-family:    var(--font-body);
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding:        4px 10px;
}

.bs-dim-verdict-pill.is-critical   { color: var(--c-critical);   background: rgba(127,29,29,0.18);  border: 1px solid rgba(127,29,29,0.4);   }
.bs-dim-verdict-pill.is-needs-work { color: var(--c-needs-work); background: rgba(193,18,31,0.1);   border: 1px solid rgba(193,18,31,0.3);   }
.bs-dim-verdict-pill.is-average    { color: var(--c-average);    background: rgba(245,158,11,0.1);  border: 1px solid rgba(245,158,11,0.3);  }
.bs-dim-verdict-pill.is-good       { color: var(--c-good);       background: rgba(22,163,74,0.1);   border: 1px solid rgba(22,163,74,0.3);   }
.bs-dim-verdict-pill.is-excellent  { color: var(--c-excellent);  background: rgba(34,197,94,0.1);   border: 1px solid rgba(34,197,94,0.3);   }

/* Bar track */
.bs-dim-bar-track {
  height:        4px;
  background:    rgba(255,255,255,0.07);
  margin-bottom: 12px;
  overflow:      hidden;
}

.bs-dim-bar-fill {
  height:     100%;
  width:      0%;
  transition: width 1s cubic-bezier(0.4,0,0.2,1) 0.2s;
}

.bs-dim-bar-fill.is-critical   { background: var(--c-critical);   }
.bs-dim-bar-fill.is-needs-work { background: var(--c-needs-work); }
.bs-dim-bar-fill.is-average    { background: var(--c-average);    }
.bs-dim-bar-fill.is-good       { background: var(--c-good);       }
.bs-dim-bar-fill.is-excellent  { background: var(--c-excellent);  }

.bs-dim-insight {
  font-family:  var(--font-body);
  font-size:    13px;
  color:        rgba(240,237,232,0.55);
  line-height:  1.6;
  font-weight:  300;
}

/* ─── Recommendations ───────────────────────────────────── */
.bs-recs-section { margin-bottom: 80px; }

.bs-recs-list {
  display:        flex;
  flex-direction: column;
  gap:            1px;
  background:     rgba(255,255,255,0.04);
  max-width:      900px;
  margin:         0 auto;
}

.bs-rec-card {
  display:    flex;
  background: #181818;
  transition: background 0.2s ease;
}

.bs-rec-card:hover { background: #1f1f1f; }

.bs-rec-priority {
  font-family:     var(--font-display);
  font-size:       48px;
  color:           rgba(193,18,31,0.2);
  letter-spacing:  0.02em;
  padding:         32px 28px;
  line-height:     1;
  min-width:       90px;
  display:         flex;
  align-items:     flex-start;
  justify-content: center;
  border-right:    1px solid rgba(255,255,255,0.04);
  flex-shrink:     0;
}

.bs-rec-body {
  padding:     28px 28px 28px 24px;
  flex:        1;
}

.bs-rec-meta {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         10px;
  margin-bottom: 12px;
}

.bs-rec-area {
  font-family:    var(--font-body);
  font-size:      11px;
  font-weight:    600;
  color:          var(--corp-red);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding:        4px 10px;
  background:     rgba(193,18,31,0.07);
  border:         1px solid rgba(193,18,31,0.2);
}

.bs-rec-impact {
  font-family:    var(--font-body);
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding:        4px 10px;
  border:         1px solid;
}

.bs-impact-high   { color: var(--c-excellent); border-color: rgba(34,197,94,0.3);  background: rgba(34,197,94,0.06);  }
.bs-impact-medium { color: var(--c-average);   border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.06); }
.bs-impact-low    { color: var(--steel);        border-color: rgba(255,255,255,0.1);background: rgba(255,255,255,0.03);}

.bs-rec-timeframe {
  font-family:  var(--font-body);
  font-size:    12px;
  color:        var(--steel);
  font-weight:  300;
}

.bs-rec-action {
  font-family:  var(--font-body);
  font-size:    15px;
  color:        rgba(240,237,232,0.8);
  line-height:  1.7;
  font-weight:  300;
}

/* ─── Positioning block ─────────────────────────────────── */
.bs-positioning-section { margin-bottom: 80px; }

.bs-positioning-card {
  max-width:  860px;
  margin:     0 auto;
  background: #181818;
  border-top: 2px solid rgba(193,18,31,0.3);
  border:     1px solid var(--bs-border);
  padding:    40px 44px;
}

.bs-positioning-label {
  font-family:    var(--font-body);
  font-size:      10px;
  font-weight:    600;
  color:          var(--corp-red);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom:  14px;
  display:        block;
  padding:        5px 12px;
  background:     rgba(193,18,31,0.07);
  border:         1px solid rgba(193,18,31,0.2);
  width:          fit-content;
}

.bs-positioning-text {
  font-family:  var(--font-body);
  font-size:    15px;
  color:        rgba(240,237,232,0.75);
  line-height:  1.85;
  font-weight:  300;
}

/* ─── Results actions ───────────────────────────────────── */
.bs-results-actions {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             16px;
  margin-bottom:   40px;
}

.bs-restart-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  padding:         18px 36px;
  background:      transparent;
  color:           var(--ivory);
  font-family:     var(--font-display);
  font-size:       18px;
  letter-spacing:  0.08em;
  border:          1px solid rgba(240,237,232,0.2);
  cursor:          pointer;
  transition:      border-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
}

.bs-restart-btn:hover { border-color: var(--corp-red); color: var(--corp-red); }

.bs-share-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  padding:         18px 32px;
  background:      transparent;
  color:           var(--steel);
  font-family:     var(--font-display);
  font-size:       18px;
  letter-spacing:  0.08em;
  border:          1px solid rgba(255,255,255,0.08);
  cursor:          pointer;
  transition:      color 0.2s ease, border-color 0.2s ease;
}

.bs-share-btn:hover { color: var(--ivory); border-color: rgba(255,255,255,0.2); }

/* ─── AI disclaimer ─────────────────────────────────────── */
.bs-disclaimer {
  font-family:  var(--font-body);
  font-size:    11px;
  color:        rgba(102,102,102,0.5);
  text-align:   center;
  line-height:  1.7;
  max-width:    500px;
  margin:       0 auto;
  font-weight:  300;
}

/* ─── CTA section ───────────────────────────────────────── */
.tool-cta { background: #0d0d0d; border-top: 1px solid rgba(255,255,255,0.04); }
.tool-cta .section-heading { text-align: center; }
.tool-cta .section-heading span { color: var(--corp-red); }

/* ═══════════════════════════════
   KEYFRAMES
═══════════════════════════════ */
@keyframes loadingPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.95); }
  50%       { opacity: 0.8; transform: scale(1.05); }
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  40%       { transform: translateY(8px); }
  60%       { transform: translateY(4px); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════
   RESPONSIVE — 768px
═══════════════════════════════ */
@media (max-width: 768px) {
  :root { --bs-section-pad: 72px; }

  .tool-hero-heading { font-size: 48px; }
  .tool-hero-sub     { font-size: 15px; }

  .bs-card { padding: 36px 24px 40px; }

  .bs-form-row { grid-template-columns: 1fr; gap: 0; }

  .bs-stepper { gap: 0; }
  .bs-step-connector { max-width: 40px; }

  .bs-dims-grid { grid-template-columns: 1fr; }

  .bs-dim-row:last-child:nth-child(odd) { grid-column: auto; }

  .bs-rec-priority { font-size: 36px; padding: 24px 16px; min-width: 64px; }
  .bs-rec-body     { padding: 20px 16px; }

  .bs-positioning-card { padding: 28px 24px; }

  .bs-results-actions { flex-direction: column; align-items: stretch; }
  .bs-restart-btn, .bs-share-btn { justify-content: center; }

  .bs-slider-wrap { flex-direction: column; align-items: flex-start; gap: 10px; }
  .bs-slider-display { min-width: auto; font-size: 22px; text-align: left; }

  .bs-progress-bar-wrap { width: 280px; }
  .bs-loading-title     { font-size: 28px; }

  .bs-yn-group { flex-direction: column; }

  .bs-btn-row { flex-direction: column-reverse; }
  .bs-back-btn { width: 100%; text-align: center; }
}

@media (max-width: 480px) {
  .tool-hero-heading { font-size: 38px; }
  .tool-hero-sub     { font-size: 14px; }

  .bs-score-number { font-size: 48px; }
  .bs-score-ring-wrap, .bs-score-svg { width: 140px; height: 140px; }

  .bs-rec-meta { gap: 6px; }

  .bs-next-btn, .bs-submit-btn { font-size: 18px; padding: 17px 24px; }
}

@media print {
  .whatsapp-btn, .cursor-dot, .cursor-ring, .scroll-hint { display: none !important; }
  body { background: #0a0a0a !important; }
}