/* ═══════════════════════════════════════════
   VITANTRA — how-it-works.css
═══════════════════════════════════════════ */

/* ── STEPS ── */
.steps-section {
  background: var(--bg);
  padding: 120px 0 0;
}

.steps-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding-bottom: 100px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.si-eyebrow { margin-bottom: 20px; }
.si-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(44px, 5.5vw, 72px);
  font-weight: 300;
  font-style: italic;
  color: var(--tx);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.si-title strong { font-style: normal; font-weight: 600; color: var(--forest); }
.si-body {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.82;
  color: var(--tx-sub);
  margin-bottom: 32px;
}
.si-chips { display:flex; flex-wrap:wrap; gap:8px; }
.si-chip {
  background: var(--forest-pale);
  border: 1px solid rgba(26,58,53,0.15);
  color: var(--forest-mid);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: var(--r-full);
  letter-spacing: 0.02em;
}

/* Step layout */
.step {
  display: grid;
  grid-template-columns: 280px 1fr 1fr;
  gap: 72px;
  align-items: center;
  padding: 100px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.step:last-child { border-bottom: none; }

/* Step number column */
.step-num-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.step-big-num {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: 140px;
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: rgba(26,58,53,0.35);
  display: block;
  margin-bottom: 12px;
  user-select: none;
  transition: color 300ms ease;
}
.step:hover .step-big-num { color: rgba(26,58,53,0.50); }
.step-phase-tag {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Text column */
.step-text {}
.step-eyebrow { margin-bottom: 18px; }
.step-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 300;
  font-style: italic;
  color: var(--tx);
  line-height: 1.12;
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}
.step-title strong { font-style: normal; font-weight: 600; color: var(--forest); }
.step-body {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.82;
  color: var(--tx-sub);
  margin-bottom: 28px;
}
.step-details { display:flex; flex-direction:column; gap:12px; }
.step-detail {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: 14px;
  color: var(--tx-mid);
  line-height: 1.6;
}
.step-detail-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  margin-top: 6px;
}

/* Visual column — cards */
.step-card {
  background: var(--bg-dark-deep);
  border: 1px solid var(--border-dark-md);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--sh-xl);
}

/* Onboarding card */
.ob-header {
  background: var(--forest);
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-dark);
}
.ob-header-row { display:flex; justify-content:space-between; align-items:center; margin-bottom: 14px; }
.ob-brand { font-family:'Cormorant Garamond',serif; font-size:16px; font-weight:600; color:var(--ivory); }
.ob-step { font-size:12px; color:var(--tx-inv-faint); }
.ob-segs { display:flex; gap:5px; }
.ob-seg { height:4px; flex:1; border-radius:2px; }
.ob-seg.done    { background: var(--forest-mid); }
.ob-seg.cur     { background: var(--sage-light); }
.ob-seg.ahead   { background: rgba(125,181,160,0.2); }
.ob-seg.empty   { background: rgba(255,255,255,0.07); }
.ob-body { padding: 22px 24px; display:flex; flex-direction:column; gap:12px; }
.ob-q { font-size:15px; font-weight:600; color:var(--ivory); margin-bottom:2px; line-height:1.4; }
.ob-hint { font-size:12px; color:var(--tx-inv-faint); }
.ob-opts { display:flex; flex-direction:column; gap:8px; }
.ob-opt {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-md);
  padding: 13px 16px;
  display: flex; align-items:center; gap: 12px;
  font-size: 13px; color: var(--tx-inv-sub);
  cursor: pointer;
  transition: all 150ms ease;
}
.ob-opt.sel {
  border-color: var(--sage);
  background: rgba(125,181,160,0.07);
  color: var(--ivory);
}
.ob-opt-icon { font-size: 18px; flex-shrink:0; }
.ob-check {
  width: 18px; height:18px; border-radius:50%;
  background: var(--sage);
  margin-left: auto;
  display: flex; align-items:center; justify-content:center;
  font-size: 9px; font-weight:800; color: var(--forest);
  flex-shrink:0;
}

/* Plan card */
.pg-header {
  background: var(--forest);
  padding: 20px 24px;
  display: flex; align-items:center; gap:12px;
  border-bottom: 1px solid var(--border-dark);
}
.pg-orb {
  width: 34px; height:34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sage), var(--forest-mid));
  flex-shrink:0;
  position:relative;
  animation: pgPulse 2.5s ease-in-out infinite;
}
@keyframes pgPulse {
  0%,100%{ box-shadow: 0 0 0 0 rgba(125,181,160,0.3); }
  50%{ box-shadow: 0 0 0 10px rgba(125,181,160,0); }
}
.pg-title { font-size:14px; font-weight:600; color:var(--ivory); }
.pg-sub { font-size:13px; color:var(--sage-light); margin-top:1px; font-weight:500; }
.pg-body { padding:20px 24px; display:flex; flex-direction:column; gap:10px; }
.pg-row {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-md);
  padding: 13px 15px;
  border-left: 2.5px solid transparent;
}
.pg-row.rs { border-left-color: var(--sage); }
.pg-row.rb { border-left-color: #4A90C4; }
.pg-row.rg { border-left-color: var(--gold); }
.pg-row-title { font-size:13px; font-weight:600; color:var(--ivory); margin-bottom:2px; }
.pg-row-sub { font-size:10.5px; color:var(--tx-inv-faint); }
.pg-insight {
  background: rgba(125,181,160,0.07);
  border: 1px solid rgba(125,181,160,0.18);
  border-radius: var(--r-md);
  padding: 13px 15px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--sage-light);
  line-height: 1.65;
}

/* Track card */
.tc-header {
  background: var(--forest);
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-dark);
}
.tc-title { font-size:14px; font-weight:600; color:var(--ivory); margin-bottom:2px; }
.tc-sub { font-size:13px; color:var(--sage-light); font-weight:500; }
.tc-body { padding:20px 24px; display:flex; flex-direction:column; gap:14px; }
.tc-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.tcm {
  background: rgba(255,255,255,0.04);
  border:1px solid var(--border-dark);
  border-radius:var(--r-sm);
  padding:10px 8px; text-align:center;
}
.tcm-val { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:600; display:block; line-height:1; margin-bottom:3px; }
.tcm-lbl { font-size:8px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--tx-inv-faint); }
.tcm.tg .tcm-val { color: var(--gold-light); }
.tcm.ts .tcm-val { color: var(--sage-light); }
.tc-chart { display:flex; align-items:flex-end; gap:6px; height:52px; }
.tc-bar-w { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.tc-bar { width:100%; border-radius:3px; background:rgba(255,255,255,0.06); position:relative; overflow:hidden; min-height:4px; }
.tc-bar-fill { position:absolute; bottom:0; left:0; right:0; border-radius:3px; background: linear-gradient(to top, var(--forest-mid), var(--sage)); animation: barUp 1s var(--ease-expo) both; }
@keyframes barUp { from{ height:0%; } }
.tc-day { font-size:8px; color:var(--tx-inv-faint); font-weight:500; }
.tc-note {
  background: rgba(125,181,160,0.07);
  border: 1px solid rgba(125,181,160,0.18);
  border-radius: var(--r-md);
  padding:12px 15px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--sage-light);
  line-height: 1.65;
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .step { grid-template-columns: 160px 1fr 1fr; gap: 48px; }
  .step-big-num { font-size: 100px; }
}
@media (max-width: 860px) {
  .step { grid-template-columns: 1fr 1fr; }
  .step-num-col { display: none; }
  .steps-intro { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .step { grid-template-columns: 1fr; }
  .tc-metrics { grid-template-columns: repeat(2, 1fr); }
}