/* ============================================================
   NEREUS LAB — Phishing Workflow (always vertical, no media query)
   ============================================================ */

#nrl-phishing-workflow {
  --teal:        #1D9E75;
  --teal-mid:    #0F6E56;
  --teal-light:  #5DCAA5;
  --teal-pale:   #E1F5EE;
  --teal-bg:     #f0faf7;
  --teal-border: #c8e8da;
  --ink:         #1a2332;
  --ink-light:   #4a5e72;
  --muted:       #7a8fa6;
  --border:      #e2eaf0;
  --bg:          #ffffff;
  --bg-soft:     #f7fafb;
  --mono:        'DM Mono','Courier New',monospace;
  --sans:        'Syne',system-ui,sans-serif;
  font-family: var(--sans);
  color:       var(--ink);
  width:       100%;
  box-sizing:  border-box;
}

#nrl-phishing-workflow *,
#nrl-phishing-workflow *::before,
#nrl-phishing-workflow *::after {
  box-sizing: inherit;
  margin:     0;
  padding:    0;
}

.nrl-pw2-header { margin-bottom: 40px; }

.nrl-pw2-label {
  font-family:    var(--mono);
  font-size:      10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--teal);
  margin-bottom:  10px;
  display:        block;
}

.nrl-pw2-title {
  font-size:      26px;
  font-weight:    700;
  letter-spacing: -0.02em;
  color:          var(--ink);
  line-height:    1.15;
  margin-bottom:  8px;
}

.nrl-pw2-subtitle {
  font-size:   14px;
  color:       var(--muted);
  line-height: 1.6;
}

/* ── ALWAYS vertical timeline ── */
.nrl-pw2-timeline {
  display:        flex !important;
  flex-direction: column !important;
  position:       relative;
  gap:            0;
}

.nrl-pw2-timeline::before {
  content:    '';
  position:   absolute;
  left:       27px;
  top:        28px;
  bottom:     28px;
  width:      2px;
  height:     auto !important;
  background: var(--teal-border);
  z-index:    0;
}

/* ── Step ── */
.nrl-pw2-step {
  display:        flex !important;
  flex-direction: row !important;
  align-items:    flex-start !important;
  gap:            24px;
  padding-bottom: 24px;
  position:       relative;
  width:          100%;
}

.nrl-pw2-step:last-child { padding-bottom: 0; }

/* ── Bubble ── */
.nrl-pw2-bubble {
  width:           56px !important;
  height:          56px !important;
  min-width:       56px !important;
  border-radius:   50% !important;
  background:      var(--bg);
  border:          2px solid var(--teal-border);
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  flex-shrink:     0 !important;
  margin-bottom:   0 !important;
  position:        relative;
  z-index:         1;
}

.nrl-pw2-bubble-inner {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             2px;
  line-height:     1;
}

.nrl-pw2-num {
  font-family:    var(--mono);
  font-size:      8px;
  letter-spacing: 0.1em;
  color:          var(--teal-light);
}

.nrl-pw2-bubble svg {
  display: block;
  width:   18px;
  height:  18px;
}

.nrl-pw2-step:first-child .nrl-pw2-bubble {
  background:   var(--teal) !important;
  border-color: var(--teal) !important;
}
.nrl-pw2-step:first-child .nrl-pw2-num { color: rgba(255,255,255,0.75); }

.nrl-pw2-step:last-child .nrl-pw2-bubble {
  background:   var(--teal-pale) !important;
  border-color: var(--teal) !important;
}
.nrl-pw2-step:last-child .nrl-pw2-num { color: var(--teal-mid); }

/* ── Card ── */
.nrl-pw2-card {
  flex:          1 !important;
  width:         auto !important;
  background:    var(--bg);
  border:        1px solid var(--border);
  border-radius: 8px;
  border-left:   3px solid var(--teal-border);
  border-top:    1px solid var(--border) !important;
  padding:       20px 24px;
  min-width:     0;
  margin-top:    4px;
  text-align:    left !important;
}

.nrl-pw2-step:first-child .nrl-pw2-card {
  background:        var(--teal-bg);
  border-left-color: var(--teal);
}
.nrl-pw2-step:last-child .nrl-pw2-card {
  border-left-color: var(--teal);
}

.nrl-pw2-step-label {
  font-family:    var(--mono);
  font-size:      9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--teal);
  display:        block;
  margin-bottom:  5px;
}

.nrl-pw2-step-title {
  font-size:     17px;
  font-weight:   700;
  color:         var(--ink);
  line-height:   1.25;
  margin-bottom: 10px;
}

.nrl-pw2-step-desc {
  font-size:     13px;
  color:         var(--ink-light);
  line-height:   1.65;
  margin-bottom: 14px;
}

.nrl-pw2-details {
  list-style:            none;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   6px 24px;
}

.nrl-pw2-details li {
  display:     flex;
  align-items: flex-start;
  gap:         8px;
  font-size:   12px;
  color:       var(--muted);
  line-height: 1.5;
}

.nrl-pw2-details li::before {
  content:       '';
  display:       block;
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    var(--teal-light);
  margin-top:    5px;
  flex-shrink:   0;
}

.nrl-pw2-pill {
  display:        inline-block;
  font-family:    var(--mono);
  font-size:      9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding:        3px 10px;
  border-radius:  2px;
  background:     var(--teal-pale);
  color:          var(--teal-mid);
  border:         0.5px solid var(--teal-border);
  margin-top:     14px;
}

@media (max-width: 540px) {
  .nrl-pw2-details { grid-template-columns: 1fr; }
  .nrl-pw2-card    { padding: 16px 18px; }
  .nrl-pw2-step-title { font-size: 15px; }
}

.nrl-pw2-card {
  padding: 28px 32px !important;
}
.nrl-pw2-step {
  padding-bottom: 40px !important;
}

.nrl-pw-dp-top {
  padding: 8px 4px 0 !important;
}

.nrl-pw-panel.is-visible {
  padding: 48px !important;
}

.nrl-pw-dp-block {
  padding: 24px !important;
}

.nrl-pw-dp-footer {
  padding-top: 24px !important;
}
#nrl-pentest-workflow .nrl-pw-panel.is-visible {
  padding: 40px 48px !important;
}

#nrl-pentest-workflow .nrl-pw-dp-block {
  padding: 24px !important;
}

#nrl-pentest-workflow .nrl-pw-dp-desc {
  padding: 0 4px !important;
}

#nrl-pentest-workflow .nrl-pw-dp-top {
  padding: 4px 4px 0 !important;
}

#nrl-pentest-workflow .nrl-pw-dp-footer {
  padding: 20px 4px 0 !important;
}

#nrl-pentest-workflow .nrl-pw-dp-pills {
  padding: 0 4px !important;
}