/* ═══════════════════════════════════════════════════════════
   ROI-PREDICTOR.CSS — Umbrella Corp HQ
   Marketing ROI Predictor Tool — Full Page Styles
   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 {
  --tool-card-bg:        #1e1e1e;
  --tool-input-bg:       #161616;
  --tool-border:         rgba(255, 255, 255, 0.07);
  --tool-border-red:     rgba(193, 18, 31, 0.35);
  --tool-border-focus:   #c1121f;
  --tool-metric-bg:      #191919;
  --tool-highlight-glow: rgba(193, 18, 31, 0.12);
  --tool-section-pad:    120px;
  --tool-radius:         0px;   /* sharp corners, matches site */
  --transition-snap:     0.18s ease;
}

/* ═══════════════════════════════
   TOOL 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);
}

/* Subtle radial glow behind heading */
.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;
}

/* Fine grid lines background texture */
.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;
}

/* ═══════════════════════════════
   TOOL FORM SECTION
═══════════════════════════════ */

.tool-form-section {
  padding:    var(--tool-section-pad) 0;
  background: var(--void);
}

/* ─── Tool Card ──────────────────────────────────────────── */

.tool-card {
  background:    var(--tool-card-bg);
  border-top:    3px solid var(--corp-red);
  border-left:   1px solid var(--tool-border);
  border-right:  1px solid var(--tool-border);
  border-bottom: 1px solid var(--tool-border);
  padding:       60px 60px 64px;
  max-width:     860px;
  margin:        0 auto;
  position:      relative;
}

/* Corner accent mark */
.tool-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 ─────────────────────────────────────────── */

.step-label {
  font-family:    var(--font-display);
  font-size:      13px;
  color:          var(--corp-red);
  letter-spacing: 0.3em;
  margin-bottom:  36px;
  display:        block;
  position:       relative;
  padding-left:   0;
}

/* ─── Form Groups & Rows ─────────────────────────────────── */

.form-group {
  margin-bottom: 28px;
}

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

.tool-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;
}

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

/* ─── Inputs & Selects ───────────────────────────────────── */

.tool-input,
.tool-select {
  width:           100%;
  background:      var(--tool-input-bg);
  border:          1px solid var(--tool-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;
}

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

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

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

/* Styled select arrow */
.tool-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;
}

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

/* ─── Field Error ────────────────────────────────────────── */

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

/* ─── Slider ─────────────────────────────────────────────── */

.slider-wrap {
  display:     flex;
  align-items: center;
  gap:         20px;
  margin-bottom: 12px;
}

.range-slider {
  flex:              1;
  -webkit-appearance: none;
  appearance:        none;
  height:            4px;
  background:        linear-gradient(90deg, var(--corp-red) 0%, #333 0%);
  outline:           none;
  border:            none;
  cursor:            pointer;
  padding:           0;
}

/* Webkit track */
.range-slider::-webkit-slider-runnable-track {
  height:     4px;
  background: #2a2a2a;
  border:     none;
}

/* Moz track */
.range-slider::-moz-range-track {
  height:     4px;
  background: #2a2a2a;
  border:     none;
}

/* Moz progress fill */
.range-slider::-moz-range-progress {
  background: var(--corp-red);
  height:     4px;
}

/* Webkit thumb */
.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;
}

.range-slider::-webkit-slider-thumb:hover,
.range-slider:active::-webkit-slider-thumb {
  transform:  scale(1.2);
  box-shadow: 0 0 0 6px rgba(193, 18, 31, 0.2);
}

/* Moz thumb */
.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);
  transition:    transform 0.15s ease, box-shadow 0.15s ease;
}

.range-slider::-moz-range-thumb:hover {
  transform:  scale(1.2);
  box-shadow: 0 0 0 6px rgba(193, 18, 31, 0.2);
}

/* MS slider (IE/Edge legacy) */
.range-slider::-ms-track {
  height:     4px;
  background: transparent;
  border:     none;
  color:      transparent;
}

.range-slider::-ms-fill-lower {
  background: var(--corp-red);
}

.range-slider::-ms-fill-upper {
  background: #2a2a2a;
}

.range-slider::-ms-thumb {
  width:        22px;
  height:       22px;
  background:   var(--corp-red);
  border-radius: 50%;
  border:       2px solid rgba(255, 255, 255, 0.15);
  cursor:       pointer;
}

/* ─── Slider Value Display ───────────────────────────────── */

.slider-value-display {
  font-family:    var(--font-display);
  font-size:      22px;
  color:          var(--ivory);
  letter-spacing: 0.03em;
  min-width:      130px;
  text-align:     right;
  white-space:    nowrap;
  line-height:    1;
  transition:     color 0.15s ease;
}

.slider-value-display.is-updating {
  color: var(--corp-red);
}

/* ─── Helper Text ────────────────────────────────────────── */

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

/* ─── Calculate Button ───────────────────────────────────── */

.calculate-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  width:           100%;
  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;
  margin-top:      40px;
  position:        relative;
  overflow:        hidden;
  transition:      background 0.2s ease, transform 0.15s ease;
}

.calculate-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;
}

.calculate-btn:hover {
  background: #a50e19;
}

.calculate-btn:hover::before {
  left: 100%;
}

.calculate-btn:active {
  transform: scale(0.99);
}

.calculate-btn:disabled {
  opacity: 0.55;
  cursor:  not-allowed;
}

/* ═══════════════════════════════
   LOADING STATE
═══════════════════════════════ */

.loading-section {
  padding:    80px 0;
  background: var(--void);
}

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

/* ─── Loading Logo Ring ──────────────────────────────────── */

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

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

/* Pulsing glow beneath ring */
.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;
}

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

/* ─── Progress Bar ───────────────────────────────────────── */

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

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

/* Shimmer on fill */
.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));
}

/* ─── Loading Message ────────────────────────────────────── */

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

/* ═══════════════════════════════
   PREVIEW RESULTS (before lead gate)
═══════════════════════════════ */

.preview-section {
  padding:    80px 0;
  background: var(--void);
}

.preview-card {
  background:    #171717;
  border-top:    3px solid var(--corp-red);
  border-left:   1px solid var(--tool-border);
  border-right:  1px solid var(--tool-border);
  border-bottom: 1px solid var(--tool-border);
  padding:       56px 60px;
  max-width:     860px;
  margin:        0 auto;
  animation:     fadeInUp 0.5s ease forwards;
}

.preview-header {
  margin-bottom: 40px;
  text-align:    center;
}

.preview-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:  16px;
  padding:        6px 16px;
  border:         1px solid rgba(193, 18, 31, 0.25);
  background:     rgba(193, 18, 31, 0.06);
}

.preview-headline {
  font-family:    var(--font-display);
  font-size:      clamp(32px, 4vw, 52px);
  color:          var(--ivory);
  letter-spacing: 0.02em;
  line-height:    1;
  margin-top:     12px;
}

/* ─── ROI Compare Grid ───────────────────────────────────── */

.roi-compare-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   1px;
  background:            rgba(255, 255, 255, 0.04);
  margin-bottom:         36px;
}

.roi-metric-box {
  background:  var(--tool-metric-bg);
  padding:     36px 28px;
  text-align:  center;
  transition:  background 0.2s ease;
}

.roi-metric-box:hover {
  background: #1f1f1f;
}

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

.roi-metric-val {
  font-family:    var(--font-display);
  font-size:      56px;
  color:          var(--ivory);
  line-height:    0.95;
  letter-spacing: 0.02em;
}

.roi-metric-sub {
  font-family:  var(--font-body);
  font-size:    12px;
  color:        rgba(102, 102, 102, 0.7);
  margin-top:   10px;
  letter-spacing: 0.05em;
}

/* Highlighted UCH column */
.roi-metric-box.is-highlight {
  background:  rgba(193, 18, 31, 0.07);
  border-top:  2px solid var(--corp-red);
  position:    relative;
}

.roi-metric-box.is-highlight .roi-metric-val {
  color: var(--corp-red);
}

.roi-metric-box.is-highlight .roi-metric-label {
  color: rgba(193, 18, 31, 0.8);
}

/* ─── Blurred Rows ───────────────────────────────────────── */

.blurred-rows {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  margin-bottom:  28px;
}

.blurred-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         16px 20px;
  background:      rgba(255, 255, 255, 0.03);
  border:          1px solid var(--tool-border);
}

.blurred-label {
  font-family:  var(--font-body);
  font-size:    14px;
  color:        var(--steel);
  font-weight:  300;
}

.blurred-value {
  font-family:     var(--font-display);
  font-size:       24px;
  color:           var(--ivory);
  letter-spacing:  0.04em;
  filter:          blur(8px);
  user-select:     none;
  -webkit-user-select: none;
  pointer-events:  none;
  transition:      filter 0.4s ease;
}

/* ─── Lock Bar ───────────────────────────────────────────── */

.lock-bar {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             14px;
  padding:         16px 24px;
  background:      rgba(0, 0, 0, 0.4);
  border:          1px solid rgba(255, 255, 255, 0.06);
  margin-bottom:   32px;
  font-family:     var(--font-body);
  font-size:       13px;
  color:           var(--steel);
  letter-spacing:  0.06em;
}

.lock-icon {
  font-size:  20px;
  line-height: 1;
}

.lock-sections {
  font-family:    var(--font-display);
  font-size:      18px;
  color:          var(--corp-red);
  letter-spacing: 0.18em;
}

/* ─── Unlock Button ──────────────────────────────────────── */

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

.unlock-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;
}

.unlock-btn:hover {
  background: #a50e19;
}

.unlock-btn:hover::before {
  left: 100%;
}

/* ═══════════════════════════════
   LEAD GATE MODAL
═══════════════════════════════ */

.lead-modal-overlay {
  position:         fixed;
  inset:            0;
  background:       rgba(0, 0, 0, 0.88);
  backdrop-filter:  blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index:          2000;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          24px;
  animation:        fadeInUp 0.3s ease forwards;
}

.lead-modal {
  background:    #1a1a1a;
  border-top:    3px solid var(--corp-red);
  border-left:   1px solid rgba(255, 255, 255, 0.09);
  border-right:  1px solid rgba(255, 255, 255, 0.09);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  width:         100%;
  max-width:     500px;
  position:      relative;
  max-height:    92vh;
  overflow-y:    auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(193,18,31,0.3) transparent;
}

.lead-modal::-webkit-scrollbar {
  width: 4px;
}

.lead-modal::-webkit-scrollbar-track {
  background: transparent;
}

.lead-modal::-webkit-scrollbar-thumb {
  background: rgba(193, 18, 31, 0.3);
}

.lead-modal-inner {
  padding: 48px 44px 44px;
}

.lead-modal-close {
  position:   absolute;
  top:        16px;
  right:      16px;
  background: none;
  border:     1px solid rgba(255, 255, 255, 0.1);
  color:      var(--steel);
  font-size:  16px;
  width:      36px;
  height:     36px;
  display:    flex;
  align-items: center;
  justify-content: center;
  cursor:     pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  line-height: 1;
}

.lead-modal-close:hover {
  color:        var(--ivory);
  border-color: var(--corp-red);
  background:   rgba(193, 18, 31, 0.1);
}

.lead-modal-heading {
  font-family:    var(--font-display);
  font-size:      44px;
  letter-spacing: 0.02em;
  color:          var(--ivory);
  line-height:    1;
  margin-bottom:  12px;
}

.lead-modal-sub {
  font-family:  var(--font-body);
  font-size:    14px;
  color:        var(--steel);
  line-height:  1.65;
  margin-bottom: 32px;
  font-weight:  300;
}

/* ─── Lead Form Fields ───────────────────────────────────── */

.lead-field {
  margin-bottom: 20px;
}

.lead-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:  8px;
}

.lead-input {
  width:           100%;
  background:      var(--tool-input-bg);
  border:          1px solid var(--tool-border);
  color:           var(--ivory);
  font-family:     var(--font-body);
  font-size:       15px;
  font-weight:     300;
  padding:         13px 18px;
  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;
}

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

.lead-input::placeholder {
  color:       rgba(102, 102, 102, 0.5);
  font-weight: 300;
}

.lead-input.is-error {
  border-color: #e74c3c;
}

/* ─── Checkboxes ─────────────────────────────────────────── */

.lead-checkboxes {
  margin-bottom: 24px;
  display:       flex;
  flex-direction: column;
  gap:           12px;
}

.lead-checkbox-row {
  display:     flex;
  align-items: flex-start;
  gap:         12px;
  cursor:      pointer;
  font-family: var(--font-body);
  font-size:   13px;
  color:       var(--steel);
  line-height: 1.5;
  font-weight: 300;
}

.lead-checkbox-row input[type="checkbox"] {
  -webkit-appearance: none;
  appearance:         none;
  width:              16px;
  height:             16px;
  min-width:          16px;
  background:         var(--tool-input-bg);
  border:             1px solid rgba(255, 255, 255, 0.15);
  cursor:             pointer;
  position:           relative;
  margin-top:         1px;
  transition:         background 0.15s ease, border-color 0.15s ease;
}

.lead-checkbox-row input[type="checkbox"]:checked {
  background:   var(--corp-red);
  border-color: var(--corp-red);
}

.lead-checkbox-row input[type="checkbox"]:checked::after {
  content:    '';
  position:   absolute;
  left:       4px;
  top:        1px;
  width:      5px;
  height:     9px;
  border:     2px solid white;
  border-top: none;
  border-left: none;
  transform:  rotate(45deg);
}

/* ─── Unlock Submit Button ───────────────────────────────── */

.unlock-submit-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  width:           100%;
  padding:         18px 32px;
  background:      var(--corp-red);
  color:           var(--ivory);
  font-family:     var(--font-display);
  font-size:       22px;
  letter-spacing:  0.1em;
  border:          none;
  cursor:          pointer;
  transition:      background 0.2s ease;
  margin-bottom:   16px;
}

.unlock-submit-btn:hover {
  background: #a50e19;
}

.unlock-submit-btn:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}

/* ─── Lead Fine Print ────────────────────────────────────── */

.lead-fine-print {
  font-family:  var(--font-body);
  font-size:    11px;
  color:        rgba(102, 102, 102, 0.6);
  text-align:   center;
  line-height:  1.6;
  font-weight:  300;
}

/* ═══════════════════════════════
   FULL RESULTS SECTION
═══════════════════════════════ */

.results-section {
  padding:    100px 0 var(--tool-section-pad);
  background: var(--void);
  animation:  fadeInUp 0.6s ease forwards;
}

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

/* ─── Section Sub Headings ───────────────────────────────── */

.section-sub-heading {
  font-family:    var(--font-display);
  font-size:      clamp(32px, 3.5vw, 48px);
  color:          var(--ivory);
  letter-spacing: 0.03em;
  margin-bottom:  40px;
  text-align:     center;
}

/* ─── Score Section ──────────────────────────────────────── */

.score-section {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  margin-bottom:  80px;
}

.score-circle-wrap {
  position:   relative;
  width:       160px;
  height:      160px;
  margin-bottom: 20px;
}

.score-svg {
  width:     160px;
  height:    160px;
  transform: rotate(0deg); /* SVG handles rotation via attribute */
}

#score-circle-fill {
  transition: stroke-dashoffset 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

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

.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:  12px;
}

.score-context {
  font-family:  var(--font-body);
  font-size:    16px;
  color:        rgba(240, 237, 232, 0.65);
  max-width:    440px;
  line-height:  1.65;
  font-weight:  300;
}

/* ─── Metrics Grid ───────────────────────────────────────── */

.metrics-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1px;
  background:            rgba(255, 255, 255, 0.04);
  margin-bottom:         80px;
}

.metric-card {
  background:  #181818;
  padding:     36px 28px;
  text-align:  center;
  border-top:  2px solid transparent;
  transition:  background 0.2s ease, border-color 0.2s ease;
}

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

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

.metric-val {
  font-family:    var(--font-display);
  font-size:      clamp(36px, 3.5vw, 52px);
  color:          var(--ivory);
  line-height:    0.95;
  letter-spacing: 0.02em;
  margin-bottom:  10px;
}

.metric-sub {
  font-family:  var(--font-body);
  font-size:    12px;
  color:        rgba(102, 102, 102, 0.6);
  letter-spacing: 0.04em;
}

.metric-card.is-highlight {
  background:  rgba(193, 18, 31, 0.07);
  border-top:  2px solid var(--corp-red);
}

.metric-card.is-highlight .metric-val {
  color: var(--corp-red);
}

.metric-card.is-opportunity {
  background:  rgba(193, 18, 31, 0.04);
  border-top:  2px solid rgba(193, 18, 31, 0.4);
}

.metric-card.is-opportunity .metric-val {
  color: var(--ivory);
}

/* ─── AI Narrative Section ───────────────────────────────── */

.ai-narrative-section {
  max-width:     720px;
  margin:        0 auto 80px;
  display:       flex;
  flex-direction: column;
  gap:           40px;
}

.narrative-block {
  padding:     0 0 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.narrative-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.narrative-tag {
  display:        inline-block;
  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;
  padding:        5px 12px;
  background:     rgba(193, 18, 31, 0.07);
  border:         1px solid rgba(193, 18, 31, 0.2);
}

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

/* ─── Chart Section ──────────────────────────────────────── */

.chart-section {
  margin-bottom: 80px;
}

.chart-wrap {
  max-width:  640px;
  margin:     0 auto;
  background: #181818;
  border:     1px solid var(--tool-border);
  padding:    32px 32px 24px;
}

/* ─── Timeline Section ───────────────────────────────────── */

.timeline-section {
  margin-bottom: 80px;
}

.timeline-steps {
  display:     flex;
  align-items: flex-start;
  gap:         0;
  max-width:   900px;
  margin:      0 auto;
}

.timeline-step {
  flex:       1;
  text-align: center;
  padding:    40px 28px;
  background: #181818;
  border:     1px solid var(--tool-border);
  position:   relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.timeline-step:hover {
  background:   #1f1f1f;
  border-color: rgba(193, 18, 31, 0.25);
}

.timeline-step:not(:last-of-type) {
  border-right: none;
}

/* Active step border */
.timeline-step:nth-child(1) {
  border-top: 2px solid var(--corp-red);
}

.timeline-connector {
  /* hidden — borders handle visual */
  display: none;
}

.timeline-num {
  font-family:    var(--font-display);
  font-size:      12px;
  color:          var(--corp-red);
  letter-spacing: 0.2em;
  margin-bottom:  10px;
}

.timeline-month {
  font-family:    var(--font-display);
  font-size:      28px;
  color:          var(--ivory);
  letter-spacing: 0.04em;
  margin-bottom:  4px;
}

.timeline-phase {
  font-family:    var(--font-body);
  font-size:      12px;
  font-weight:    500;
  color:          var(--corp-red);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom:  12px;
}

.timeline-desc {
  font-family:  var(--font-body);
  font-size:    13px;
  color:        var(--steel);
  line-height:  1.6;
  margin-bottom: 20px;
  font-weight:  300;
}

.timeline-milestone {
  font-family:    var(--font-display);
  font-size:      22px;
  color:          var(--ivory);
  letter-spacing: 0.03em;
  margin-top:     auto;
  padding-top:    16px;
  border-top:     1px solid rgba(255, 255, 255, 0.06);
}

/* ─── Results Actions ────────────────────────────────────── */

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

.btn-pdf {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  padding:         18px 40px;
  background:      var(--corp-red);
  color:           var(--ivory);
  font-family:     var(--font-display);
  font-size:       20px;
  letter-spacing:  0.1em;
  border:          none;
  cursor:          pointer;
  transition:      background 0.2s ease;
  text-decoration: none;
}

.btn-pdf:hover {
  background: #a50e19;
}

.btn-pdf.pdf-generating {
  opacity: 0.7;
  cursor:  wait;
}

.btn-pdf.pdf-generating::before {
  content:   '';
  width:     16px;
  height:    16px;
  border:    2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spinSlow 0.6s linear infinite;
  flex-shrink: 0;
}

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

.btn-cta-outline:hover {
  border-color: var(--corp-red);
  color:        var(--corp-red);
}

.btn-share {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  padding:         18px 28px;
  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;
}

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

/* ─── AI Disclaimer ──────────────────────────────────────── */

.ai-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;
}

/* ─── Tool 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);
}

.tool-cta .section-subtext {
  text-align: center;
  margin:     20px auto 0;
}

/* ─── Work Cards in index (adjusted for /tools/) ────────── */

.work-card {
  display:     flex;
  align-items: stretch;
  min-height:  420px;
  border:      1px solid rgba(255,255,255,0.04);
  overflow:    hidden;
  margin-bottom: 24px;
  background:  var(--carbon);
}

.work-card--reverse {
  flex-direction: row-reverse;
}

.work-card__image {
  flex: 1;
  min-height: 320px;
}

.work-card__content {
  flex:    1;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.work-card__industry {
  font-size:      11px;
  color:          var(--corp-red);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  margin-bottom:  12px;
  font-family:    var(--font-body);
  font-weight:    500;
}

.work-card__client {
  font-family:   var(--font-display);
  font-size:     clamp(36px, 4vw, 60px);
  margin-bottom: 20px;
  line-height:   1;
}

.work-card__services {
  display:       flex;
  flex-wrap:     wrap;
  gap:           8px;
  margin-bottom: 24px;
}

.work-card__result {
  font-size:   14px;
  color:       var(--steel);
  line-height: 1.7;
}

.work-card__result strong {
  color:       var(--corp-red);
  font-weight: 500;
}

.work-card__link {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  margin-top:      24px;
  font-size:       12px;
  color:           var(--corp-red);
  letter-spacing:  0.15em;
  text-transform:  uppercase;
  text-decoration: none;
  font-family:     var(--font-body);
  font-weight:     500;
  border-bottom:   1px solid rgba(193,18,31,0.3);
  padding-bottom:  4px;
  transition:      gap 0.2s, border-color 0.2s;
  width:           fit-content;
}

.work-card__link:hover {
  gap:          14px;
  border-color: var(--corp-red);
}

/* ═══════════════════════════════
   KEYFRAME ANIMATIONS
═══════════════════════════════ */

@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);
  }
}

@keyframes scoreCountFill {
  from { stroke-dashoffset: 339.3; }
  to   { stroke-dashoffset: var(--target-offset, 0); }
}

@keyframes progressPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

/* ═══════════════════════════════
   RESPONSIVE — 768px (Tablet / Mobile)
═══════════════════════════════ */

@media (max-width: 768px) {

  :root {
    --tool-section-pad: 72px;
  }

  /* Hero */
  .tool-hero-heading {
    font-size: 48px;
  }

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

  .trust-bar {
    gap: 8px;
  }

  .trust-pill {
    font-size: 11px;
    padding:   7px 14px;
  }

  /* Tool card */
  .tool-card {
    padding: 36px 24px 40px;
  }

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

  /* Form row: single column */
  .form-row {
    grid-template-columns: 1fr;
    gap:                   0;
  }

  /* Slider */
  .slider-wrap {
    flex-direction: column;
    align-items:    flex-start;
    gap:            12px;
  }

  .slider-value-display {
    text-align: left;
    font-size:  28px;
  }

  /* ROI compare grid: 1 col */
  .roi-compare-grid {
    grid-template-columns: 1fr;
  }

  .roi-metric-val {
    font-size: 44px;
  }

  /* Metrics: 2 col */
  .metrics-grid {
    grid-template-columns: 1fr 1fr;
  }

  .metric-val {
    font-size: 36px;
  }

  /* Score */
  .score-number {
    font-size: 44px;
  }

  /* Narrative */
  .ai-narrative-section {
    gap: 28px;
  }

  /* Chart */
  .chart-wrap {
    padding: 20px 16px 16px;
  }

  /* Timeline: column */
  .timeline-steps {
    flex-direction: column;
    gap:            1px;
    background:     rgba(255,255,255,0.04);
  }

  .timeline-step {
    border-right: 1px solid var(--tool-border) !important;
  }

  .timeline-step:not(:last-of-type) {
    border-bottom: none;
  }

  /* Action buttons */
  .results-actions {
    flex-direction: column;
    align-items:    stretch;
  }

  .btn-pdf,
  .btn-cta-outline,
  .btn-share {
    justify-content: center;
    width:           100%;
  }

  /* Lead modal */
  .lead-modal-inner {
    padding: 40px 24px 32px;
  }

  .lead-modal-heading {
    font-size: 36px;
  }

  /* Loading */
  .progress-bar-wrap {
    width: 280px;
  }

  .loading-title {
    font-size: 28px;
  }

  /* Lock bar */
  .lock-bar {
    flex-wrap: wrap;
    font-size: 12px;
    gap:       8px;
  }
}

/* ═══════════════════════════════
   RESPONSIVE — 480px (Small Phone)
═══════════════════════════════ */

@media (max-width: 480px) {

  .tool-hero-heading {
    font-size: 38px;
  }

  .tool-hero-sub {
    font-size: 14px;
  }

  /* Metrics: single column */
  .metrics-grid {
    grid-template-columns: 1fr;
  }

  .calculate-btn {
    font-size: 18px;
    padding:   17px 24px;
  }

  .unlock-btn {
    font-size: 20px;
    padding:   17px 24px;
  }

  .roi-metric-val {
    font-size: 40px;
  }

  .slider-value-display {
    font-size: 24px;
    min-width: auto;
  }

  .preview-headline {
    font-size: 28px;
  }

  .loading-logo-wrap,
  .loading-logo-ring {
    width:  88px;
    height: 88px;
  }

  .blurred-row {
    flex-direction: column;
    align-items:    flex-start;
    gap:            8px;
  }

  .blurred-value {
    font-size: 20px;
  }

  .score-circle-wrap,
  .score-svg {
    width:  130px;
    height: 130px;
  }

  .score-number {
    font-size: 40px;
  }
}

/* ═══════════════════════════════
   PRINT MEDIA (for PDF screenshots)
═══════════════════════════════ */

@media print {
  .lead-modal-overlay,
  .whatsapp-btn,
  .cursor-dot,
  .cursor-ring,
  .scroll-hint {
    display: none !important;
  }

  .blurred-value {
    filter: none !important;
  }

  body {
    background: #0a0a0a !important;
  }
}