/* =========================================================
   Base page styling for "How it works"
   ========================================================= */

body {
  margin: 0;
  background: radial-gradient(circle at top, #020617 0%, #020617 40%, #000000 100%);
  color: #e5e7eb;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Inter", "Segoe UI", sans-serif;
}

/* Keep the rest of the site layout; just constrain the HIW content */
main.hiw {
  max-width: 1120px;
  margin: 0 auto;
  padding: 80px 16px 64px;
  box-sizing: border-box;
}

/* =========================================================
   Hero
   ========================================================= */

.hiw__hero {
  margin-bottom: 56px;
}

.hiw__hero-inner {
  max-width: 760px;
}

.hiw__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  margin: 0 0 8px;
}

.hiw__title {
  font-size: clamp(28px, 4vw, 34px);
  font-weight: 700;
  margin: 0 0 12px;
  color: #f9fafb;
}

.hiw__subtitle {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.7;
  color: #d1d5db;
}

/* Pills under hero */

.hiw__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.hiw-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.9);
  font-size: 12px;
  color: #e5e7eb;
}

.hiw-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #6b7280;
}

.hiw-pill__dot--green {
  background: #22c55e;
}

.hiw-pill__dot--blue {
  background: #3b82f6;
}

.hiw-pill__dot--amber {
  background: #facc15;
}

/* Hero quick-links (chips) */

.hiw__quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hiw-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.8);
  font-size: 12px;
  color: #e5e7eb;
  text-decoration: none;
}

.hiw-chip:hover {
  border-color: rgba(129, 140, 248, 0.8);
}

/* =========================================================
   Sections (Buying / Selling / Fees / Safety)
   ========================================================= */

.hiw-section {
  padding: 40px 0;
  border-top: 1px solid rgba(31, 41, 55, 0.7);
}

.hiw-section:first-of-type {
  border-top: none;
}

.hiw-section--highlight {
  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.85), #020617 100%);
  border-radius: 24px;
  margin-top: 40px;
  padding-inline: 16px;
}

.hiw-section--last {
  margin-bottom: 16px;
}

.hiw-section__inner {
  max-width: 1120px;
  margin: 0 auto;
}

.hiw-section__header {
  max-width: 720px;
  margin-bottom: 24px;
}

.hiw-section__title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  color: #f9fafb;
}

.hiw-section__subtitle {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #9ca3af;
}

/* =========================================================
   Flow cards (Steps for buying / selling)
   ========================================================= */

.hiw-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

@media (min-width: 900px) {
  .hiw-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hiw-step {
  list-style: none;
}

.hiw-flowCard,
.hiw-card {
  position: relative;
  background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.98), #020617);
  border-radius: 20px;
  padding: 18px 18px 16px 18px;
  border: 1px solid rgba(31, 41, 55, 0.9);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.6);
  font-size: 14px;
}

/* Icon bubble */

.hiw-flowCard__icon {
  position: absolute;
  top: -18px;
  left: 18px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1d4ed8;
  color: #eff6ff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.8);
}

.hiw-flowCard__icon--buying {
  background: #3b82f6;
}

.hiw-flowCard__icon--selling {
  background: #6366f1;
}

.hiw-flowCard__icon--fees {
  background: #22c55e;
}

.hiw-flowCard__icon--safety {
  background: #facc15;
}

.hiw-flowCard__iconSvg {
  width: 22px;
  height: 22px;
}

/* Content inside cards */

.hiw-flowCard__content {
  margin-top: 22px; /* space for icon bubble */
}

.hiw-flowCard__title,
.hiw-card__title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: #e5e7eb;
}

.hiw-flowCard p,
.hiw-card p {
  margin: 0 0 8px;
  color: #d1d5db;
}

.hiw-note {
  font-size: 13px;
  color: #93c5fd;
}

/* Lists inside cards */

.hiw-list {
  margin: 6px 0 8px 18px;
  padding: 0;
}

.hiw-list li {
  margin-bottom: 4px;
}

.hiw-list--tight li {
  margin-bottom: 3px;
}

.hiw-steps {
  margin: 6px 0 8px 18px;
  padding: 0;
}

.hiw-steps li {
  margin-bottom: 4px;
}

/* =========================================================
   Generic grid (Fees / Safety cards)
   ========================================================= */

.hiw-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.hiw-grid--two {
  grid-template-columns: minmax(0, 1fr);
}

.hiw-grid--three {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .hiw-flow {
    grid-template-columns: minmax(0, 1fr); /* still 1 column on desktop */
  }

  .hiw-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Variants */

.hiw-card--list {
  padding-left: 18px;
}

.hiw-flowCard--generic {
  padding-top: 26px; /* a bit more room for icon bubble */
}

/* Links inside cards */

.hiw-card a {
  color: #93c5fd;
  text-decoration: none;
}

.hiw-card a:hover {
  text-decoration: underline;
}