/* =============================================================
   saviliate-vendors.css
   Extends saviliate-landing.css — all rules scoped to body.sv
   ============================================================= */

/* ── mt-6 helper ─────────────────────────────────────────────── */
.sv .mt-6 { margin-top: 5rem !important; }

/* ── Hero additions ──────────────────────────────────────────── */
.sv .sv-vhero { padding-top: 10rem; }

.sv .sv-trust-bar { border-top: 1px solid var(--sv-border); }
.sv .sv-trust-item {
  font-size: .82rem;
  color: rgba(255,255,255,.55);
  font-family: 'DM Mono', monospace;
  letter-spacing: .04em;
}

/* Flow diagram */
.sv .sv-flow-step { min-width: 80px; }
.sv .sv-flow-icon {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--sv-border);
  background: rgba(201,169,110,.07);
  color: var(--sv-gold); font-size: 1rem;
}
.sv .sv-flow-label {
  font-family: 'DM Mono', monospace; font-size: .62rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.4); line-height: 1.3;
}
.sv .sv-flow-arrow {
  color: rgba(201,169,110,.3); font-size: .75rem;
  padding: 0 .25rem; padding-bottom: 1.6rem;
  align-self: flex-end;
}
@media (max-width: 767px) {
  .sv .sv-flow-step { min-width: 60px; }
  .sv .sv-flow-label { font-size: .52rem; }
  .sv .sv-flow-arrow { padding: 0 .1rem; padding-bottom: 1.4rem; }
}

/* ── Check items ─────────────────────────────────────────────── */
.sv .sv-check-icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(61,153,144,.2);
  border: 1px solid rgba(61,153,144,.4);
  color: var(--sv-teal-light);
  display: grid; place-items: center;
  font-size: .7rem;
}
.sv .sv-check-text { font-size: .88rem; color: rgba(255,255,255,.65); line-height: 1.6; }

/* ── How It Works — timeline ─────────────────────────────────── */
.sv .sv-system-visual { position: relative; }

.sv .sv-timeline { position: relative; padding-left: 2.5rem; }

.sv .sv-timeline-line {
  position: absolute;
  top: 1.25rem; bottom: 0;
  left: 1.1rem;
  width: 1px;
  background: linear-gradient(to bottom, var(--sv-gold), transparent);
  opacity: .3;
}

.sv .sv-timeline-step { position: relative; }

.sv .sv-tl-icon-wrap {
  position: absolute;
  left: -2.5rem;
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  border: 1px solid var(--sv-border);
  background: var(--sv-ink2);
  color: var(--sv-gold);
  font-size: .9rem;
  flex-shrink: 0;
}

.sv .sv-tl-actor {
  font-family: 'DM Mono', monospace;
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sv-gold); opacity: .75;
}
.sv .sv-tl-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem; font-weight: 500; color: #fff;
}
.sv .sv-tl-desc {
  font-size: .85rem; color: rgba(255,255,255,.5); line-height: 1.7;
}

/* ── Attribution Level Cards ─────────────────────────────────── */
.sv .sv-level-card {
  border: 1px solid var(--sv-border);
  border-radius: 4px; overflow: hidden;
  background: var(--sv-ink2);
  transition: border-color .3s;
}
.sv .sv-level-card:hover { border-color: rgba(201,169,110,.35); }

.sv .sv-level-card--teal  .sv-level-label-col { background: rgba(26,74,74,.3); }
.sv .sv-level-card--gold  .sv-level-label-col { background: rgba(140,95,30,.22); }
.sv .sv-level-card--green .sv-level-label-col { background: rgba(26,74,40,.28); }

.sv .sv-level-label-col { border-right: 1px solid var(--sv-border); }
.sv .sv-level-desc-col  { border-right: 1px solid var(--sv-border); }

@media (max-width: 991px) {
  .sv .sv-level-label-col,
  .sv .sv-level-desc-col { border-right: none; border-bottom: 1px solid var(--sv-border); }
}

.sv .sv-level-badge {
  font-family: 'DM Mono', monospace; font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--sv-gold); border: 1px solid rgba(201,169,110,.3);
  border-radius: 100px; padding: .2rem .65rem; display: inline-block;
}
.sv .sv-level-icon {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--sv-border);
  background: rgba(201,169,110,.07);
  color: var(--sv-gold); font-size: 1.25rem;
}
.sv .sv-level-event {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem; font-weight: 500; color: #fff; margin: 0;
}
.sv .sv-level-best-label {
  font-family: 'DM Mono', monospace; font-size: .6rem;
  text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.3);
}
.sv .sv-level-best { font-size: .78rem; color: rgba(255,255,255,.5); line-height: 1.5; }

.sv .sv-level-headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem; font-weight: 400; color: #fff;
}
.sv .sv-level-body { font-size: .87rem; color: rgba(255,255,255,.55); line-height: 1.75; margin: 0; }
.sv .sv-level-tradeoff {
  font-size: .8rem; color: rgba(255,255,255,.4);
  border-top: 1px solid var(--sv-border);
  padding-top: .75rem;
}

/* Combine callout */
.sv .sv-combine-callout {
  background: linear-gradient(135deg, rgba(26,74,74,.3), rgba(10,10,15,.8));
  border: 1px solid rgba(201,169,110,.25);
  border-radius: 4px;
}
.sv .sv-combine-icon {
  width: 44px; height: 44px; border-radius: 8px;
  background: rgba(201,169,110,.1); border: 1px solid var(--sv-border);
  color: var(--sv-gold); font-size: 1.1rem;
  display: grid; place-items: center; flex-shrink: 0;
}
.sv .sv-combine-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem; font-weight: 500; color: #fff;
}
.sv .sv-combine-body { font-size: .87rem; color: rgba(255,255,255,.55); line-height: 1.7; }

/* ── Industry tabs ────────────────────────────────────────────── */
.sv .sv-industry-tab {
  font-family: 'DM Mono', monospace; font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--sv-border);
  border-radius: 2px; padding: .55rem 1.1rem;
  transition: all .25s; cursor: none;
}
.sv .sv-industry-tab:hover { color: var(--sv-gold); border-color: rgba(201,169,110,.35); }
.sv .sv-industry-tab.active {
  background: rgba(201,169,110,.12);
  border-color: rgba(201,169,110,.45);
  color: var(--sv-gold);
}

.sv .sv-industry-panel {
  border: 1px solid var(--sv-border); border-radius: 4px; overflow: hidden;
}
.sv .sv-ind-icon {
  width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0;
  border: 1px solid var(--sv-border); background: rgba(255,255,255,.06);
  color: var(--sv-gold); font-size: 1.2rem;
}
.sv .sv-ind-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem; font-weight: 500; color: #fff;
}
.sv .sv-ind-level {
  font-family: 'DM Mono', monospace; font-size: .65rem;
  color: var(--sv-gold); letter-spacing: .08em;
}
.sv .sv-ind-model { font-size: .82rem; color: rgba(255,255,255,.45); font-style: italic; }

/* Funnel steps */
.sv .sv-funnel-step { padding: .5rem 0; }
.sv .sv-funnel-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(201,169,110,.12); border: 1px solid rgba(201,169,110,.3);
  color: var(--sv-gold); font-family: 'DM Mono', monospace;
  font-size: .6rem; display: grid; place-items: center;
}
.sv .sv-funnel-text { font-size: .83rem; color: rgba(255,255,255,.65); }
.sv .sv-funnel-connector {
  width: 1px; height: 12px;
  background: rgba(201,169,110,.2); margin-left: 11px;
}

/* ── Security cards ───────────────────────────────────────────── */
.sv .sv-sec-card {
  background: var(--sv-ink2);
  border: 1px solid var(--sv-border); border-radius: 6px;
  transition: background .3s, border-color .3s;
}
.sv .sv-sec-card:hover {
  background: rgba(26,74,74,.18);
  border-color: rgba(201,169,110,.28);
}
.sv .sv-sec-icon {
  width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0;
  border: 1px solid var(--sv-border); background: rgba(201,169,110,.07);
  color: var(--sv-gold); font-size: .95rem;
}
.sv .sv-sec-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem; font-weight: 500; color: #fff;
}
.sv .sv-sec-desc { font-size: .82rem; color: rgba(255,255,255,.5); line-height: 1.65; }

/* ── CTA additions ────────────────────────────────────────────── */
.sv .sv-cta-step-num {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: rgba(201,169,110,.12); border: 1px solid rgba(201,169,110,.35);
  color: var(--sv-gold); font-family: 'DM Mono', monospace;
  font-size: .7rem; display: grid; place-items: center;
}
.sv .sv-cta-step-text { font-size: .85rem; color: rgba(255,255,255,.6); white-space: nowrap; }
.sv .sv-cta-chevron { color: rgba(201,169,110,.3); font-size: .75rem; }