/* New How It Works (3-step vertical) */
.hiwv2-section {
  position: relative;
  padding: clamp(4rem, 7vw, 7rem) 1rem;
  isolation: isolate;
  overflow: hidden;
  background-color: #111;
  
  /* A subtle inner shadow to give depth */
  box-shadow: inset 0 10px 30px -10px rgba(0,0,0,0.4), inset 0 -10px 30px -10px rgba(0,0,0,0.4);

  padding-top: clamp(4rem, 7vw, 7rem);
}

.hiwv2-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url('../assets/images/background/lines.svg');
  background-size: cover;
  background-position: center;
  opacity: 0.1; /* Make lines very subtle */
  /* Add a gradient overlay to fade the lines out */
  mask-image: linear-gradient(to bottom, 
    rgba(0,0,0,1) 0%, 
    rgba(0,0,0,1) 60%, 
    rgba(0,0,0,0) 100%
  );
}

/* Light mode removed */

/* Top fade to avoid any harsh seam */
.hiwv2-section::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 110px; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.24), rgba(0,0,0,0));
}
/* Single theme top fade */

.hiwv2-container { max-width: min(92vw, 1100px); margin: 0 auto; position: relative; z-index: 1; }
.hiwv2-title { text-align: center; font-family: 'Satoshi', sans-serif; font-weight: 900; color: var(--text); font-size: clamp(1.6rem, 3.2vw, 2.25rem); margin-bottom: clamp(1.75rem, 3vw, 2.25rem); }

/* Steps list */
.hiwv2-steps { display: grid; grid-auto-rows: 1fr; gap: clamp(1rem, 2vw, 1.25rem); }
.hiwv2-step { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: clamp(1rem, 2.2vw, 1.25rem); }

/* Light mode variant */
/* Single theme cards */

.hiwv2-num { font-family: 'Satoshi', sans-serif; font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.4rem); color: #6B7280; -webkit-text-stroke: 1px #6B7280; color: transparent; }
.hiwv2-content h3 { margin: 0 0 0.35rem; font-family: 'Satoshi', sans-serif; font-weight: 800; color: var(--text); font-size: clamp(1.05rem, 2vw, 1.2rem); }
.hiwv2-content p { margin: 0; font-family: 'Inter', sans-serif; color: var(--muted); font-size: 0.98rem; line-height: 1.55; }

/* Mockups */
.hiwv2-visual { width: clamp(180px, 28vw, 280px); justify-self: end; }
.mock { border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.25); padding: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
/* Single theme mock */

/* Mock details */
.mock-upload { display: grid; gap: 8px; }
.mock-upload .bar { height: 8px; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 6px; width: 70%; }
.mock-upload .wave { height: 56px; border-radius: 8px; background:
  repeating-linear-gradient(90deg, rgba(255,255,255,0.25) 0 2px, transparent 2px 4px),
  linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0)); }

.mock-prompt { display: grid; gap: 8px; }
.mock-prompt .input { font-family: 'Fira Code', monospace; background: rgba(0,0,0,0.3); color: var(--text); padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); }
/* Single theme input */

.mock-export { display: grid; gap: 8px; }
.mock-export .button { padding: 10px; border-radius: 8px; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; text-align: center; font-weight: 700; }
.mock-export .preview { height: 56px; border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0)); border: 1px solid rgba(255,255,255,0.1); margin-top: 8px; }
.mock-export .sizes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.mock-export .chip { padding: 6px 10px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; color: var(--text); font-size: 0.85rem; }
/* Single theme chip */

/* Responsive */
@media (max-width: 900px) {
  .hiwv2-step { grid-template-columns: auto 1fr; grid-template-rows: auto auto; }
  .hiwv2-visual { grid-column: 1 / -1; justify-self: start; width: 100%; }
  .mock-export .sizes { justify-content: flex-start; }
}