/* ============================================================
   VERIXID — HOW IT WORKS PAGE CSS
   ============================================================ */

/* ─── STEPS ──────────────────────────────────────────────── */
.hiw-steps {
  width     : 100%;
  max-width : 640px;
  margin    : 2.5rem auto 0;
}

.hiw-step {
  display : flex;
  gap     : 1.5rem;
  align-items: flex-start;
}

.hiw-step-number {
  font-size     : 0.75rem;
  font-weight   : 700;
  letter-spacing: 0.1em;
  color         : #171717;
  font-family   : 'JetBrains Mono', monospace;
  min-width     : 2rem;
  padding-top   : 0.2rem;
  flex-shrink   : 0;
}

.hiw-step-title {
  font-size   : 1.0625rem;
  font-weight : 700;
  margin      : 0 0 0.5rem;
  color       : #171717;
}

.hiw-step-desc {
  font-size  : 0.9rem;
  line-height: 1.7;
  color      : rgb(74, 74, 74);
  margin     : 0;
}

.hiw-divider {
  width        : 1px;
  height       : 2rem;
  background   : var(--color-border, #2a2a2a);
  margin       : 0.75rem 0 0.75rem 0.9rem;
}

/* ─── PRIVACY CALLOUT ────────────────────────────────────── */
.hiw-callout {
  width     : 100%;
  max-width : 640px;
  margin    : 3rem auto 0;
}

.hiw-callout-inner {
  display      : flex;
  gap          : 1.25rem;
  align-items  : flex-start;
  background   : rgba(74, 222, 128, 0.04);
  border       : 1px solid rgba(74, 222, 128, 0.15);
  border-radius: 12px;
  padding      : 1.5rem;
}

.hiw-callout-icon {
  flex-shrink: 0;
  width      : 2rem;
  height     : 2rem;
  color      : #0067b8;
  margin-top : 0.1rem;
}

.hiw-callout-icon svg {
  width : 100%;
  height: 100%;
}

.hiw-callout-title {
  font-size  : 0.9375rem;
  font-weight: 700;
  color      : #171717;
  margin     : 0 0 0.5rem;
}

.hiw-callout-desc {
  font-size  : 0.875rem;
  line-height: 1.7;
  color      : rgb(74, 74, 74);
  margin     : 0;
}

/* ─── SECTION LABEL & TITLE ──────────────────────────────── */
.hiw-section-label {
  font-size     : 0.75rem;
  font-weight   : 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color         : #0067b8;
  margin        : 0 0 0.5rem;
}

.hiw-section-title {
  font-size  : 1.25rem;
  font-weight: 700;
  color      : #171717;
  margin     : 0 0 2rem;
}

/* ─── TECHNICAL GRID ─────────────────────────────────────── */
.hiw-technical {
  width     : 100%;
  max-width : 640px;
  margin    : 3.5rem auto 0;
}

.hiw-tech-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 1rem;
}

@media (max-width: 480px) {
  .hiw-tech-grid {
    grid-template-columns: 1fr;
  }
}

.hiw-tech-card {
  background   : #fff;
  border       : 1px solid rgb(74, 74, 74);
  border-radius: 10px;
  padding      : 1.25rem;
}

.hiw-tech-name {
  font-size     : 0.8125rem;
  font-weight   : 700;
  letter-spacing: 0.05em;
  font-family   : 'JetBrains Mono', monospace;
  color         : #171717;
  margin        : 0 0 0.5rem;
}

.hiw-tech-desc {
  font-size  : 0.8375rem;
  line-height: 1.65;
  color      : rgb(74, 74, 74);
  margin     : 0;
}

/* ─── FAQ ────────────────────────────────────────────────── */
.hiw-faq {
  width     : 100%;
  max-width : 640px;
  margin    : 3.5rem auto 0;
}

.hiw-faq-list {
  display       : flex;
  flex-direction: column;
  gap           : 0.5rem;
}

.faq-item {
  background   : #fff;
  border       : 1px solid rgb(74, 74, 74);
  border-radius: 10px;
  overflow     : hidden;
  transition   : border-color 0.15s ease;
}

.faq-item[open] {
  border-color: rgba(74, 222, 128, 0.2);
}

.faq-question {
  /*display        : flex;*/
  justify-content: space-between;
  align-items    : left;
  gap            : 1rem;
  padding        : 1rem 1.25rem;
  font-size      : 0.9rem;
  font-weight    : 600;
  color          : rgb(74, 74, 74);
  cursor         : pointer;
  list-style     : none;
  user-select    : none;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question:hover {
  color: #171717;
}

.faq-icon {
  font-size  : 1.1rem;
  font-weight: 400;
  color      : #0067b8;
  flex-shrink: 0;
  transition : transform 0.15s ease;
}

.faq-answer {
  font-size  : 0.875rem;
  line-height: 1.7;
  color      : rgb(74, 74, 74);
  padding    : 0 1.25rem 1.25rem;
  margin     : 0;
}


/* ─── CTA ────────────────────────────────────────────────── */
.hiw-cta {
  width     : 100%;
  max-width : 640px;
  margin    : 3.5rem auto 0;
  text-align: center;
  padding   : 2.5rem 1.5rem;
  background: #fff;
}

.hiw-cta-title {
  font-size  : 1.125rem;
  font-weight: 700;
  color      : #171717;
  margin     : 0 0 0.5rem;
}

.hiw-cta-desc {
  font-size : 0.875rem;
  color     : rgb(74, 74, 74);
  margin    : 0 0 1.5rem;
}

.btn-cta {
  display      : inline-block;
  padding      : 0.75rem 2rem;
  background   : #0067b8;
  color        : #fff;
  font-weight  : 700;
  font-size    : 0.9rem;
  letter-spacing: 0.03em;
  border-radius: 8px;
  text-decoration: none;
  transition   : opacity 0.15s ease, transform 0.1s ease;
}

.btn-cta:hover {
  opacity  : 0.88;
  transform: translateY(-1px);
}