/* ═══════════════════════════════════════════════
   SIMULATOR — Step 1
   All classes prefixed .sim- to avoid collisions
═══════════════════════════════════════════════ */

/* ── Outer card ── */
.sim-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0, 48, 64, 0.10);
  box-shadow: 0 2px 16px rgba(0, 48, 64, 0.07), 0 1px 4px rgba(0, 48, 64, 0.04);
  padding: 28px 32px 32px;
  position: relative;
  font-family: 'TT Fors', system-ui, sans-serif;
}

/* ── Top bar: logo + currency ── */
.sim-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.sim-logo {
  width: 120px;
  height: auto;
  flex-shrink: 0;
}

.sim-logo img {
  width: 100%;
  height: auto;
  filter: brightness(0) saturate(100%)
    invert(11%) sepia(47%) saturate(2000%)
    hue-rotate(170deg) brightness(85%) contrast(100%);
}

/* ── Currency selector ── */
.sim-currency-wrap {
  position: relative;
  flex-shrink: 0;
}

.sim-currency {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid rgba(0, 48, 64, 0.18);
  border-radius: 8px;
  padding: 7px 32px 7px 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'TT Fors', system-ui, sans-serif;
  color: #003040;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23003040' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.sim-currency:focus,
.sim-currency:hover {
  border-color: rgba(0, 48, 64, 0.4);
}

/* ── Section heading + divider ── */
.sim-section-heading {
  font-size: 18px;
  font-weight: 600;
  color: #003040;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  margin-top: 8px;
}

.sim-section-divider {
  height: 1px;
  background: rgba(0, 48, 64, 0.1);
  margin-bottom: 16px;
}

.sim-section-subtext {
  font-size: 13px;
  color: rgba(0, 48, 64, 0.8);
  margin-bottom: 22px;
  line-height: 1.5;
}

/* ── Field grid ── */
.sim-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
  margin-bottom: 24px;
}

/* Full-width grid item */
.sim-grid .sim-field-full {
  grid-column: 1 / -1;
}

/* ── Individual field ── */
.sim-field {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Label row (label + tooltip) */
.sim-label-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 7px;
}

.sim-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 48, 64, 0.85);
  line-height: 1;
}

/* ── Tooltip button ── */
.sim-tooltip-btn {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 48, 64, 0.3);
  background: transparent;
  color: rgba(0, 48, 64, 0.5);
  font-size: 10px;
  font-weight: 600;
  font-family: 'TT Fors', system-ui, sans-serif;
  cursor: help;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  line-height: 1;
  transition: border-color 0.15s, color 0.15s;
  position: relative; /* anchor for tooltip */
}
.sim-tooltip-btn:hover {
  border-color: rgba(0, 48, 64, 0.6);
  color: #003040;
}

/* ── Tooltip popup ── */
.sim-tooltip-popup {
  display: none;
  position: absolute;
  z-index: 500;
  width: 260px;
  background: #003040;
  color: #fff;
  font-size: 12px;
  font-family: 'TT Fors', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.55;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
  pointer-events: none;
  white-space: normal;
  text-align: left;
}

/* Arrow shape — rendered via ::before, direction set by JS class */
.sim-tooltip-popup::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}

/* Arrow pointing LEFT (tooltip is to the right of the btn) */
.sim-tooltip-popup.tip-right {
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%);
}
.sim-tooltip-popup.tip-right::before {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 7px solid #003040;
}

/* Arrow pointing RIGHT (tooltip is to the left of the btn) */
.sim-tooltip-popup.tip-left {
  top: 50%;
  right: calc(100% + 10px);
  left: auto;
  transform: translateY(-50%);
}
.sim-tooltip-popup.tip-left::before {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 7px solid #003040;
}

.sim-tooltip-btn:hover .sim-tooltip-popup,
.sim-tooltip-btn:focus .sim-tooltip-popup {
  display: block;
}

/* ── Inputs ── */
.sim-input,
.sim-select {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid rgba(0, 48, 64, 0.16);
  border-radius: 8px;
  font-size: 14px;
  font-family: 'TT Fors', system-ui, sans-serif;
  color: #003040;
  background: #fff;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.4;
}
.sim-input:focus,
.sim-select:focus {
  border-color: #46A0FF;
  box-shadow: 0 0 0 3px rgba(70, 160, 255, 0.14);
}
.sim-input::placeholder {
  color: rgba(0, 48, 64, 0.3);
}

/* Select arrow */
.sim-select {
  cursor: pointer;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23003040' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  color: #003040;  /* always dark once a value is selected */
}
/* Only the placeholder state (nothing selected yet) is grey */
.sim-select.placeholder-selected {
  color: rgba(0, 48, 64, 0.38);
}
/* Once a real value is selected, always dark */
.sim-select:not(.placeholder-selected) {
  color: #003040 !important;
}
/* All individual options always dark */
.sim-select option {
  color: #003040 !important;
}
/* Placeholder option stays grey */
.sim-select option[value=""] {
  color: rgba(0,48,64,0.38) !important;
}
.sim-select:disabled {
  background-color: #f5f6f7;
  opacity: 0.55;
  cursor: not-allowed;
}

/* Hide number spinners */
.sim-input[type="number"]::-webkit-inner-spin-button,
.sim-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.sim-input[type="number"] { -moz-appearance: textfield; }

/* Currency-prefix wrapper */
.sim-input-prefix-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.sim-input-prefix {
  position: absolute;
  left: 13px;
  font-size: 14px;
  color: rgba(0, 48, 64, 0.45);
  pointer-events: none;
  font-family: 'TT Fors', system-ui, sans-serif;
  line-height: 1;
  top: 50%;
  transform: translateY(-50%);
}
.sim-input-prefix-wrap .sim-input {
  padding-left: 26px;
}

/* Percent-suffix wrapper */
.sim-input-suffix-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.sim-input-suffix {
  position: absolute;
  right: 13px;
  font-size: 13px;
  color: rgba(0, 48, 64, 0.4);
  pointer-events: none;
  font-family: 'TT Fors', system-ui, sans-serif;
  line-height: 1;
  top: 50%;
  transform: translateY(-50%);
}
.sim-input-suffix-wrap .sim-input {
  padding-right: 36px;
}


/* ── Salary hint ── */
.sim-salary-hint {
  font-size: 12px;
  color: #46A0FF;
  margin-top: 6px;
  min-height: 16px;
  font-family: 'TT Fors', system-ui, sans-serif;
}

/* ── Sub-section: Hiring Process Costs & Recruitment costs ── */
.sim-subsection {
  margin-top: 28px;
}

/* ── Next button ── */
.sim-next-btn {
  width: 100%;
  padding: 15px;
  background: #003040;
  color: #fff;
  font-family: 'TT Fors', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: -0.01em;
  margin-top: 28px;
  transition: background 0.2s, transform 0.15s;
}
.sim-next-btn:hover {
  background: #00202e;
  transform: translateY(-1px);
}
.sim-next-btn:active {
  transform: translateY(0);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .sim-card {
    padding: 20px 18px 24px;
  }
  .sim-grid {
    grid-template-columns: 1fr;
  }
  .sim-grid .sim-field-full {
    grid-column: 1;
  }
}

/* ═══════════════════════════════════════════════
   SIMULATOR — Step progress indicator
═══════════════════════════════════════════════ */
.sim-progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 0;
  justify-content: flex-end;
}
.sim-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.sim-progress-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  font-family: 'TT Fors', system-ui, sans-serif;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.sim-progress-dot.done {
  background: #003040;
  color: #fff;
  border: 2px solid #003040;
}
.sim-progress-dot.active {
  background: #003040;
  color: #fff;
  border: 2px solid #003040;
}
.sim-progress-dot.future {
  background: #f0f2f4;
  color: rgba(0, 48, 64, 0.35);
  border: 2px solid rgba(0, 48, 64, 0.15);
}
.sim-progress-line {
  width: 32px;
  height: 2px;
  background: rgba(0, 48, 64, 0.15);
  margin: 0 2px;
  margin-bottom: 12px;
  transition: background 0.3s;
  flex-shrink: 0;
}
.sim-progress-line.done {
  background: #003040;
}

/* ═══════════════════════════════════════════════
   SIMULATOR — Step 2 button row
═══════════════════════════════════════════════ */
.sim-btn-row {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  align-items: stretch;
}
.sim-back-btn {
  padding: 14px 28px;
  background: #fff;
  color: #003040;
  font-family: 'TT Fors', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  border: 1.5px solid rgba(0, 48, 64, 0.22);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.sim-back-btn:hover {
  border-color: rgba(0, 48, 64, 0.45);
  background: #f8fafb;
}
.sim-primary-btn {
  flex: 1;
  padding: 15px;
  background: #003040;
  color: #fff;
  font-family: 'TT Fors', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: background 0.2s, transform 0.15s;
}
.sim-primary-btn:hover {
  background: #00202e;
  transform: translateY(-1px);
}
.sim-primary-btn:active {
  transform: translateY(0);
}

/* Step transition animation */
.sim-step-enter {
  animation: simStepIn 0.28s ease-out both;
}
@keyframes simStepIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════
   SIMULATOR — Step 3
═══════════════════════════════════════════════ */

/* ── Step 3 heading area ── */
.s3-header {
  text-align: center;
  margin-bottom: 28px;
}
.s3-title {
  font-size: 26px;
  font-weight: 600;
  color: #003040;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
  font-family: 'TT Fors', system-ui, sans-serif;
}
.s3-subtitle {
  font-size: 14px;
  color: rgba(0,48,64,0.6);
  font-style: italic;
  line-height: 1.55;
  font-family: 'TT Fors', system-ui, sans-serif;
}
.s3-subtitle strong {
  font-style: italic;
  font-weight: 600;
  color: rgba(0,48,64,0.75);
}

/* ── Download button ── */
.s3-download-btn {
  display: block;
  margin: 0 auto 32px;
  padding: 13px 36px;
  background: #003040;
  color: #fff;
  font-family: 'TT Fors', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: background 0.2s, transform 0.15s;
}
.s3-download-btn:hover {
  background: #00202e;
  transform: translateY(-1px);
}

/* ── KPI cards grid ── */
.s3-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
.s3-kpi-card {
  border-radius: 12px;
  border: 1px solid rgba(0,48,64,0.1);
  padding: 18px 20px 20px;
  background: #fff;
  font-family: 'TT Fors', system-ui, sans-serif;
}
.s3-kpi-card.blue  { background: #e8f5fc; border-color: rgba(70,160,255,0.25); }
.s3-kpi-card.yellow{ background: #fffbee; border-color: rgba(255,200,60,0.3); }
.s3-kpi-label {
  font-size: 13px;
  color: #003040;
  font-weight: 500;
  margin-bottom: 10px;
  font-family: 'TT Fors', system-ui, sans-serif;
}
.s3-kpi-value {
  font-size: 24px;
  font-weight: 500;
  color: #003040;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-family: 'TT Fors', system-ui, sans-serif;
}
.s3-kpi-sub {
  font-size: 13px;
  color: #003040;
  font-weight: 500;
  margin-top: 6px;
  font-family: 'TT Fors', system-ui, sans-serif;
}

/* ── Cost breakdown section ── */
.s3-breakdown-title {
  font-size: 18px;
  font-weight: 600;
  color: #003040;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  font-family: 'TT Fors', system-ui, sans-serif;
}
.s3-breakdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 28px;
}
.s3-breakdown-card {
  border-radius: 12px;
  padding: 20px 22px;
  font-family: 'TT Fors', system-ui, sans-serif;
}
.s3-breakdown-card.plain {
  background: #f8fafb;
  border: 1px solid rgba(0,48,64,0.08);
}
.s3-breakdown-card.teal {
  background: #e8f5fc;
  border: 1px solid rgba(70,160,255,0.2);
}
.s3-breakdown-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #003040;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,48,64,0.09);
  font-family: 'TT Fors', system-ui, sans-serif;
}
.s3-breakdown-card.teal .s3-breakdown-card-title {
  border-bottom-color: rgba(70,160,255,0.18);
}
.s3-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  margin-bottom: 8px;
  font-family: 'TT Fors', system-ui, sans-serif;
}
.s3-breakdown-row:last-child { margin-bottom: 0; }
.s3-breakdown-row-label {
  color: rgba(0,48,64,0.58);
}
.s3-breakdown-row-val {
  font-weight: 600;
  color: #003040;
  font-family: 'TT Fors', system-ui, sans-serif;
}

/* ── Etiq CTA bar ── */
.s3-etiq-cta {
  background: linear-gradient(135deg, #003040 0%, #004a5c 100%);
  border-radius: 14px;
  padding: 36px 40px;
  text-align: center;
  color: #fff;
  margin-bottom: 24px;
  font-family: 'TT Fors', system-ui, sans-serif;
}
.s3-etiq-cta-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  font-family: 'TT Fors', system-ui, sans-serif;
}
.s3-etiq-cta-btn {
  display: inline-block;
  padding: 13px 32px;
  background: #46A0FF;
  color: #fff;
  font-family: 'TT Fors', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: background 0.2s, transform 0.15s;
  text-decoration: none;
  margin-bottom: 14px;
}
.s3-etiq-cta-btn:hover {
  background: #2d8ff0;
  transform: translateY(-1px);
}
.s3-etiq-cta-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  font-family: 'TT Fors', system-ui, sans-serif;
}

/* ── Modal overlay ── */
.sim-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: simFadeIn 0.2s ease-out;
}
@keyframes simFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.sim-modal {
  background: #fff;
  border-radius: 16px;
  padding: 36px 40px;
  width: 100%;
  max-width: 440px;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,0.22);
  animation: simModalIn 0.25s ease-out;
}
@keyframes simModalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.sim-modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  font-size: 22px;
  color: rgba(0,48,64,0.35);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  transition: color 0.15s;
}
.sim-modal-close:hover { color: #003040; }
.sim-modal-title {
  font-size: 20px;
  font-weight: 600;
  color: #003040;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
  font-family: 'TT Fors', system-ui, sans-serif;
}
.sim-modal-sub {
  font-size: 13px;
  color: rgba(0,48,64,0.5);
  margin-bottom: 24px;
  line-height: 1.55;
  font-family: 'TT Fors', system-ui, sans-serif;
}
.sim-modal-field {
  margin-bottom: 16px;
}
.sim-modal-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: rgba(0,48,64,0.75);
  margin-bottom: 6px;
  font-family: 'TT Fors', system-ui, sans-serif;
}
.sim-modal-submit {
  width: 100%;
  padding: 14px;
  background: #003040;
  color: #fff;
  font-family: 'TT Fors', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.2s;
  letter-spacing: -0.01em;
}
.sim-modal-submit:hover { background: #00202e; }

/* ── Responsive Step 3 ── */
@media (max-width: 700px) {
  .s3-kpi-grid { grid-template-columns: 1fr 1fr; }
  .s3-breakdown-grid { grid-template-columns: 1fr; }
  .s3-etiq-cta { padding: 28px 20px; }
  .sim-modal { padding: 28px 24px; }
}
@media (max-width: 420px) {
  .s3-kpi-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   SIMULATOR — Step 4 (Gated Report)
═══════════════════════════════════════════════ */

/* Report uses wider shell */
.sim-report-shell {
  font-family: 'TT Fors', system-ui, sans-serif;
  padding: 0;
}

/* ── Report top bar ── */
.s4-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 32px;
  padding: 28px 40px 0;
}
.s4-logo { width: 120px; height: auto; }
.s4-logo img {
  width: 100%;
  filter: brightness(0) saturate(100%)
    invert(11%) sepia(47%) saturate(2000%)
    hue-rotate(170deg) brightness(85%) contrast(100%);
}

/* ── Report header ── */
.s4-header {
  padding: 0 40px 28px;
  border-bottom: 1px solid rgba(0,48,64,0.08);
  margin-bottom: 32px;
}
.s4-title {
  font-size: 32px;
  font-weight: 600;
  color: #003040;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
  line-height: 1.1;
}
.s4-subtitle {
  font-size: 14px;
  color: rgba(0,48,64,0.5);
  margin-bottom: 20px;
}
.s4-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.s4-btn-print {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  background: #003040;
  color: #fff;
  font-family: 'TT Fors', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}
.s4-btn-print:hover { background: #00202e; }
.s4-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  background: #fff;
  color: #003040;
  font-family: 'TT Fors', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  border: 1.5px solid rgba(0,48,64,0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.s4-btn-back:hover { border-color: rgba(0,48,64,0.4); background: #f8fafb; }

/* ── Report body padding ── */
.s4-body { padding: 0 40px 40px; }

/* ── KPI cards ── */
.s4-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
.s4-kpi-card {
  border-radius: 12px;
  border: 1px solid rgba(0,48,64,0.1);
  padding: 18px 22px 20px;
  background: #fff;
}
.s4-kpi-card.blue { background: #e8f5fc; border-color: rgba(70,160,255,0.22); }
.s4-kpi-card.teal { background: #eaf9f9; border-color: rgba(100,220,240,0.3); }
.s4-kpi-label {
  font-size: 13px;
  color: #003040;
  font-weight: 600;
  margin-bottom: 10px;
  font-family: 'TT Fors', system-ui, sans-serif;
}
.s4-kpi-value {
  font-size: 26px;
  font-weight: 500;
  color: #003040;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-family: 'TT Fors', system-ui, sans-serif;
}
.s4-kpi-card.blue .s4-kpi-value { color: #46A0FF; }
.s4-kpi-card.teal .s4-kpi-value { color: #46A0FF; }

/* ── Section title ── */
.s4-section-title {
  font-size: 20px;
  font-weight: 600;
  color: #003040;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  font-family: 'TT Fors', system-ui, sans-serif;
}

/* ── Scenario card ── */
.s4-scenario-card {
  background: #fff;
  border: 1px solid rgba(0,48,64,0.09);
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 16px;
}
.s4-scenario-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #003040;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,48,64,0.08);
  font-family: 'TT Fors', system-ui, sans-serif;
}
.s4-scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 24px;
}
.s4-scenario-field-label {
  font-size: 11px;
  color: rgba(0,48,64,0.42);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  font-family: 'TT Fors', system-ui, sans-serif;
}
.s4-scenario-field-value {
  font-size: 14px;
  font-weight: 600;
  color: #003040;
  font-family: 'TT Fors', system-ui, sans-serif;
}

/* ── Cost comparison table ── */
.s4-table-wrap {
  background: #fff;
  border: 1px solid rgba(0,48,64,0.09);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 32px;
}
.s4-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'TT Fors', system-ui, sans-serif;
}
.s4-table th {
  padding: 12px 18px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: rgba(0,48,64,0.45);
  background: #f8fafb;
  border-bottom: 1px solid rgba(0,48,64,0.07);
}
.s4-table td {
  padding: 14px 18px;
  font-size: 13px;
  color: #003040;
  border-bottom: 1px solid rgba(0,48,64,0.05);
}
.s4-table tr:last-child td { border-bottom: none; }
.s4-table tr.s4-row-highlight td {
  color: #46A0FF;
  font-weight: 600;
  background: rgba(100,220,240,0.06);
}
.s4-table tr.s4-row-etiq td {
  color: #003040;
  font-weight: 600;
  background: rgba(100,220,240,0.12);
}

/* ── Etiq comparison box ── */
.s4-etiq-box {
  background: linear-gradient(135deg, rgba(100,220,240,0.07), rgba(100,220,240,0.02));
  border: 1px solid rgba(100,220,240,0.25);
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 32px;
}
.s4-etiq-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.s4-etiq-card {
  background: #fff;
  border: 1px solid rgba(0,48,64,0.08);
  border-radius: 10px;
  padding: 16px 18px;
}
.s4-etiq-card.highlighted {
  background: linear-gradient(135deg, rgba(100,220,240,0.18), rgba(100,220,240,0.07));
  border: 1.5px solid rgba(100,220,240,0.4);
}
.s4-etiq-card-label {
  font-size: 13px;
  color: #003040;
  font-weight: 600;
  margin-bottom: 6px;
  font-family: 'TT Fors', system-ui, sans-serif;
}
.s4-etiq-card-value {
  font-size: 22px;
  font-weight: 500;
  color: #003040;
  letter-spacing: -0.02em;
  font-family: 'TT Fors', system-ui, sans-serif;
}
.s4-etiq-card-time {
  font-size: 12px;
  color: #003040;
  margin-top: 5px;
  font-weight: 600;
  opacity: 0.55;
  font-family: 'TT Fors', system-ui, sans-serif;
}
.s4-compare-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(100,220,240,0.15);
  font-family: 'TT Fors', system-ui, sans-serif;
}
.s4-compare-row:last-child { border-bottom: none; }
.s4-compare-label { font-size: 14px; color: rgba(0,48,64,0.75); }
.s4-compare-value { font-size: 15px; font-weight: 600; color: #003040; }

/* ── Detailed cost breakdown (3 cols) ── */
.s4-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.s4-breakdown-card {
  border-radius: 12px;
  padding: 22px 24px;
  font-family: 'TT Fors', system-ui, sans-serif;
  min-width: 0;
}
.s4-breakdown-card.plain {
  background: #f8fafb;
  border: 1px solid rgba(0,48,64,0.08);
}
.s4-breakdown-card.blue {
  background: #e8f5fc;
  border: 1px solid rgba(70,160,255,0.18);
}
.s4-breakdown-card.etiq {
  background: linear-gradient(135deg, rgba(100,220,240,0.1), rgba(100,220,240,0.04));
  border: 1px solid rgba(100,220,240,0.28);
}
.s4-breakdown-card-title {
  font-size: 13px;
  font-weight: 600;
  color: #003040;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,48,64,0.09);
  font-family: 'TT Fors', system-ui, sans-serif;
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
  min-height: 36px;
}
.s4-breakdown-card.blue  .s4-breakdown-card-title { border-color: rgba(70,160,255,0.15); }
.s4-breakdown-card.etiq .s4-breakdown-card-title { border-color: rgba(100,220,240,0.22); }
.s4-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12.5px;
  margin-bottom: 9px;
  gap: 8px;
  font-family: 'TT Fors', system-ui, sans-serif;
}
.s4-breakdown-row:last-child { margin-bottom: 0; }
.s4-breakdown-row-label { color: rgba(0,48,64,0.55); flex-shrink: 1; min-width: 0; }
.s4-breakdown-row-val { font-weight: 400; color: #003040; flex-shrink: 0; text-align: right; }
.s4-breakdown-divider {
  border: none;
  border-top: 1px solid rgba(0,48,64,0.08);
  margin: 10px 0;
}
.s4-breakdown-card.blue  .s4-breakdown-divider { border-color: rgba(70,160,255,0.15); }
.s4-breakdown-card.etiq .s4-breakdown-divider { border-color: rgba(100,220,240,0.2); }

/* ── Final CTA ── */
.s4-cta {
  background: linear-gradient(135deg, #003040 0%, #004a5c 100%);
  border-radius: 16px;
  padding: 44px 48px;
  text-align: center;
  color: #fff;
  margin-bottom: 8px;
}
.s4-cta-title {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  font-family: 'TT Fors', system-ui, sans-serif;
}
.s4-cta-body {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  max-width: 580px;
  margin: 0 auto 28px;
  font-family: 'TT Fors', system-ui, sans-serif;
}
.s4-cta-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.s4-cta-btn-outline {
  padding: 12px 28px;
  background: transparent;
  color: #fff;
  font-family: 'TT Fors', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.s4-cta-btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.s4-cta-btn-filled {
  padding: 12px 28px;
  background: #46A0FF;
  color: #fff;
  font-family: 'TT Fors', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
}
.s4-cta-btn-filled:hover { background: #2d8ff0; }

/* ── Responsive ── */
@media (max-width: 800px) {
  .s4-topbar, .s4-header, .s4-body { padding-left: 20px; padding-right: 20px; }
  .s4-kpi-grid { grid-template-columns: 1fr 1fr; }
  .s4-scenario-grid { grid-template-columns: 1fr 1fr; }
  .s4-etiq-cards { grid-template-columns: 1fr; }
  .s4-breakdown-grid { grid-template-columns: 1fr; }
  .s4-cta { padding: 32px 24px; }
}
@media (max-width: 500px) {
  .s4-kpi-grid { grid-template-columns: 1fr; }
  .s4-scenario-grid { grid-template-columns: 1fr; }
}

/* ── Print styles ── */
@media print {
  /* Force background colours to print */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Hide everything except the report */
  .nav, .hero, .overview, .simulator-section > .container > .simulator-header,
  .s4-btn-back, .s4-btn-print, .s4-actions,
  .s4-cta, .footer { display: none !important; }

  /* Page setup */
  @page {
    margin: 18mm 16mm;
    size: A4;
  }

  html, body {
    background: white !important;
    font-size: 11px !important;
  }

  /* Remove card chrome */
  .simulator-shell,
  .sim-report-shell {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  .simulator-section {
    background: white !important;
    padding: 0 !important;
  }

  /* Tighten padding */
  .s4-topbar { padding: 0 0 16px !important; }
  .s4-header { padding: 0 0 16px !important; }
  .s4-body   { padding: 0 !important; }

  /* Scale down large values */
  .s4-title  { font-size: 22px !important; }
  .s4-kpi-value { font-size: 18px !important; }
  .s4-etiq-card-value { font-size: 16px !important; }
  .s4-section-title { font-size: 14px !important; margin-bottom: 10px !important; }
  .s4-scenario-card-title { font-size: 12px !important; }
  .s4-breakdown-card-title { font-size: 11px !important; }

  /* Keep grids from collapsing */
  .s4-kpi-grid      { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .s4-breakdown-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 8px !important; }
  .s4-etiq-cards    { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .s4-scenario-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px 16px !important; }

  /* Avoid page breaks inside cards */
  .s4-scenario-card,
  .s4-kpi-grid,
  .s4-table-wrap,
  .s4-etiq-box,
  .s4-breakdown-card { break-inside: avoid; }

  /* Reduce card padding */
  .s4-kpi-card     { padding: 10px 14px !important; }
  .s4-scenario-card { padding: 14px 18px !important; margin-bottom: 10px !important; }
  .s4-breakdown-card { padding: 12px 14px !important; }
  .s4-etiq-box     { padding: 14px 18px !important; }
  .s4-etiq-card    { padding: 10px 12px !important; }
  .s4-table th, .s4-table td { padding: 8px 12px !important; font-size: 11px !important; }
}

/* ═══════════════════════════════════════════════
   ADDITIONAL FIXES
═══════════════════════════════════════════════ */

/* Step 3 — 3-col breakdown grid */
.s3-breakdown-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.s3-breakdown-card.etiq-card {
  background: linear-gradient(135deg, rgba(100,220,240,0.1), rgba(100,220,240,0.04));
  border: 1px solid rgba(100,220,240,0.3);
}

/* Step 4 — scenario field labels darker */
.s4-scenario-field-label {
  font-size: 11px;
  color: rgba(0,48,64,0.65);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  font-family: 'TT Fors', system-ui, sans-serif;
}

/* Step 4 — breakdown row label darker */
.s4-breakdown-row-label {
  color: rgba(0,48,64,0.72);
}

/* Step 4 — scenario cards blue background */
.s4-scenario-card {
  background: rgba(70,160,255,0.07);
  border: 1px solid rgba(70,160,255,0.2);
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 16px;
}
.s4-scenario-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #003040;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(70,160,255,0.18);
  font-family: 'TT Fors', system-ui, sans-serif;
}

/* Print-only CTA */
.s4-cta-print-only { display: none; }
@media print {
  .s4-cta { display: none !important; }
  .s4-cta-print-only {
    display: block;
    background: #003040 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    border-radius: 12px;
    padding: 24px 28px;
    color: white;
    margin-top: 20px;
    break-inside: avoid;
  }
  .s4-cta-print-title {
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin-bottom: 10px;
    font-family: 'TT Fors', system-ui, sans-serif;
  }
  .s4-cta-print-body {
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
    margin-bottom: 8px;
    font-family: 'TT Fors', system-ui, sans-serif;
  }
  .s4-cta-print-contact {
    font-size: 11px;
    color: rgba(255,255,255,0.65);
    font-family: 'TT Fors', system-ui, sans-serif;
  }
}

/* ── Mobile: hide progress bar ── */
@media (max-width: 600px) {
  .sim-progress { display: none; }

  /* Step 3 — 3-col grid collapses to 1 on mobile */
  .s3-breakdown-grid-3 { grid-template-columns: 1fr; }

  /* Mobile cost comparison table — stacked cards instead of table */
  .s4-table-wrap { display: none; }
  .s4-table-mobile { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
  .s4-table-mobile-card {
    background: #fff;
    border: 1px solid rgba(0,48,64,0.09);
    border-radius: 10px;
    padding: 14px 16px;
    font-family: 'TT Fors', system-ui, sans-serif;
  }
  .s4-table-mobile-card.highlight { background: rgba(100,220,240,0.06); border-color: rgba(70,160,255,0.2); }
  .s4-table-mobile-card.etiq { background: rgba(100,220,240,0.12); border-color: rgba(100,220,240,0.3); }
  .s4-table-mobile-label { font-size: 15px; font-weight: 600; color: #003040; margin-bottom: 10px; }
  .s4-table-mobile-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
  .s4-table-mobile-key { color: rgba(0,48,64,0.55); }
  .s4-table-mobile-val { font-weight: 500; color: #003040; }

  /* Etiq comparison rows — stack percent and months on separate lines */
  .s4-compare-value { font-size: 13px; text-align: right; white-space: normal; word-break: break-word; }

  /* Tooltips on mobile — drop below button, full width constrained */
  .sim-tooltip-btn .sim-tooltip-popup,
  .sim-tooltip-btn .sim-tooltip-popup.tip-right,
  .sim-tooltip-btn .sim-tooltip-popup.tip-left {
    position: fixed;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    top: auto !important;
    bottom: 80px;
    transform: none !important;
  }
  .sim-tooltip-btn .sim-tooltip-popup::before { display: none; }
}

/* Desktop — hide mobile table */
@media (min-width: 601px) {
  .s4-table-mobile { display: none; }
}

/* ── Verdict sentence ── */
.sim-verdict {
  font-family: 'TT Fors', system-ui, sans-serif;
  font-size: 15px;
  color: #003040;
  line-height: 1.65;
  background: linear-gradient(135deg, rgba(70,160,255,0.08), rgba(70,160,255,0.03));
  border: 1px solid rgba(70,160,255,0.2);
  border-left: 3px solid #46A0FF;
  border-radius: 8px;
  padding: 14px 20px;
  margin-bottom: 24px;
}
.sim-verdict-role {
  font-weight: 600;
  color: #003040;
}
.sim-verdict-winner {
  font-weight: 600;
  color: #46A0FF;
}

/* ── Dynamic % input ── */
.sim-pct-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}
.sim-pct-wrap .sim-input {
  /* transparent text — ghost renders on top */
  color: transparent !important;
  caret-color: #003040;  /* keep visible cursor */
  background: white;
  position: relative;
  z-index: 1;
  width: 100%;
}
.sim-pct-wrap .sim-input:focus {
  color: transparent !important;
  caret-color: #003040;
}
.sim-pct-ghost {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'TT Fors', system-ui, sans-serif;
  font-size: 14px;
  color: #003040;
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 1px;
}
.sim-pct-sign {
  font-size: 14px;
  color: rgba(0,48,64,0.5);
  margin-left: 1px;
}
/* placeholder state — when input is empty */
.sim-pct-wrap .sim-input::placeholder {
  color: transparent;
}

/* ── Verdict sentence centred ── */
.sim-verdict {
  text-align: center;
}