/* How it works section: full-black band, five bordered protocol cards, both themes */

.s-how-it-works {
  background: var(--band);
  color: var(--band-ink);
  padding: 140px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: clip;
}

.s-how-it-works .hiw-in {
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
}

.s-how-it-works .hiw-top {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* title block: production hides the tag content but keeps its 14px slot,
   so the heading lands at the same offset */
.s-how-it-works .hiw-title {
  width: 100%;
  max-width: 804px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.s-how-it-works .hiw-tag { height: 8px; flex: none; }
.s-how-it-works .hiw-tag > * { display: none; }

.s-how-it-works .hiw-h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 44px;
  line-height: 1.2;
  color: var(--band-ink);
}

/* card grid: row of 3 + row of 2, hairline borders, shared vertical edges */
.s-how-it-works .hiw-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.s-how-it-works .hiw-row { display: flex; width: 100%; }
.s-how-it-works .hiw-row-1 { align-items: stretch; }
.s-how-it-works .hiw-row-2 { align-items: center; }

.s-how-it-works .hiw-card {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid var(--band-line);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  background: var(--band);
}

.s-how-it-works .hiw-card + .hiw-card { margin-left: -1px; }
.s-how-it-works .hiw-row-1 .hiw-card { justify-content: space-between; }

/* text block pinned to the card bottom */
.s-how-it-works .hiw-txt {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.s-how-it-works .hiw-card-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: var(--band-ink);
}

.s-how-it-works .hiw-card-body {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--band-ink);
  opacity: 0.7;
}

/* shared diagram primitives ------------------------------------------ */

/* animated-border box: rotating lime gradient under a 15% lime wash and a
   black core, exactly the production layer stack */
.s-how-it-works .hiw-beam {
  position: relative;
  border-radius: 6px;
  padding: 1px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.s-how-it-works .hiw-rot {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(206, 246, 6, 0.1) 0%, var(--accent) 48.44%, rgba(206, 246, 6, 0.1) 100%);
  opacity: 0.6;
  transform: scale(4);
  animation: hiw-spin 7s linear infinite;
}

.s-how-it-works .hiw-rot-big {
  opacity: 1;
  transform: scale(6);
  animation-name: hiw-spin-big;
}

@keyframes hiw-spin { to { transform: scale(4) rotate(360deg); } }
@keyframes hiw-spin-big { to { transform: scale(6) rotate(360deg); } }

.s-how-it-works .hiw-tint {
  position: absolute;
  inset: 0;
  background: rgba(206, 246, 6, 0.15);
}

.s-how-it-works .hiw-core {
  position: absolute;
  inset: 1px;
  background: var(--band);
  border-radius: 6px;
}

/* vertical connector: dim lime line, bright middle, soft travelling pulse */
.s-how-it-works .hiw-link {
  position: relative;
  display: block;
  flex: none;
  overflow: hidden;
}

.s-how-it-works .hiw-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(206, 246, 6, 0.1) 0%, var(--accent) 50%, rgba(206, 246, 6, 0.1) 100%);
}

.s-how-it-works .hiw-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -40%;
  height: 40%;
  background: linear-gradient(180deg, rgba(206, 246, 6, 0) 0%, rgba(206, 246, 6, 0.9) 50%, rgba(206, 246, 6, 0) 100%);
  animation: hiw-drip 2.6s ease-in-out infinite;
}

@keyframes hiw-drip {
  0% { top: -40%; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* card 1: supported collateral diagram ------------------------------- */

.s-how-it-works .sc {
  height: 309px;
  background: var(--band);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 29px;
  position: relative;
  overflow: visible;
}

.s-how-it-works .sc-line {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 3px;
  background: rgba(206, 246, 6, 0.1);
  overflow: hidden;
}

.s-how-it-works .sc-streak {
  position: absolute;
  top: 1px;
  left: 100%;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--accent) 50%, rgba(255, 255, 255, 0) 100%);
  animation: hiw-streak 3.6s linear infinite;
}

@keyframes hiw-streak {
  0% { left: 100%; }
  100% { left: -60px; }
}

.s-how-it-works .sc-stack {
  flex: none;
  width: 29%;
  aspect-ratio: 0.584337;
  position: relative;
}

.s-how-it-works .sc-tile {
  position: absolute;
  left: 51%;
  width: 100%;
  height: auto;
  aspect-ratio: 1.73214;
  transform: translate(-50%, -50%);
}

.s-how-it-works .sc-t-weth { top: 29%; }
.s-how-it-works .sc-t-usdc { top: 44%; }
.s-how-it-works .sc-t-wbtc { top: 56%; }
.s-how-it-works .sc-t-susde { top: 71%; }

.s-how-it-works .sc-pill {
  position: relative;
  z-index: 1;
  flex: none;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: linear-gradient(#14160a 0%, #000 100%);
  padding: 6px 10px;
}

.s-how-it-works .sc-pill p {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: var(--band-ink);
  white-space: pre;
}

.s-how-it-works .sc-ausd {
  flex: none;
  width: 33%;
  aspect-ratio: 1.67901;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.s-how-it-works .sc-ausd-in {
  width: 107%;
  aspect-ratio: 1.72059;
  position: relative;
  flex: none;
}

.s-how-it-works .sc-glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.s-how-it-works .sc-ausd-tile {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 89%;
  height: auto;
}

/* card 2: mint aUSD workflow ----------------------------------------- */

.s-how-it-works .mint {
  height: 309px;
  background: var(--band);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 21px;
  overflow: hidden;
}

.s-how-it-works .mint-flow {
  width: 100%;
  max-width: 194px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s-how-it-works .step { width: 100%; }

.s-how-it-works .step-in {
  position: relative;
  width: 100%;
  border-radius: 6px;
  background: linear-gradient(rgba(206, 246, 6, 0.05) 0%, rgba(206, 246, 6, 0) 100%);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.s-how-it-works .step-label {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 8px;
  line-height: 12px;
  text-transform: uppercase;
  color: var(--band-ink);
  opacity: 0.5;
}

.s-how-it-works .step-name {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 11px;
  line-height: 16.5px;
  color: var(--band-ink);
}

.s-how-it-works .step-link { width: 3px; height: 26px; }

.s-how-it-works .mint-health {
  display: flex;
  align-items: center;
  gap: 8px;
}

.s-how-it-works .hdot {
  flex: none;
  width: 12px;
  height: 12px;
  position: relative;
}

.s-how-it-works .hdot::before {
  content: "";
  position: absolute;
  top: calc(47.5% - 2.4px);
  left: calc(50% - 2.4px);
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: var(--accent);
  animation: hiw-dot 2.4s ease-in-out infinite;
}

@keyframes hiw-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.s-how-it-works .hlabel {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 8px;
  line-height: 12px;
  color: var(--band-ink);
  opacity: 0.5;
  white-space: pre;
}

/* card 3: stability pool typing widget + checklist ------------------- */

.s-how-it-works .stab {
  height: 309px;
  background: var(--band);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.s-how-it-works .stab-in {
  width: 100%;
  max-width: 248px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.s-how-it-works .type-in {
  position: relative;
  width: 100%;
  border-radius: 6px;
  background: linear-gradient(rgba(206, 246, 6, 0.05) 0%, rgba(206, 246, 6, 0) 100%);
  padding: 10px;
  display: flex;
  align-items: center;
  min-height: 38.5px;
}

.s-how-it-works .type-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 10px;
  line-height: 16.5px;
  color: var(--band-ink);
  white-space: pre;
}

.s-how-it-works .type-caret {
  display: inline-block;
  width: 0;
  height: 12px;
  border-right: 3px solid rgba(255, 255, 255, 0.85);
  margin-left: 2px;
  animation: hiw-blink 1s step-end infinite;
}

@keyframes hiw-blink { 50% { opacity: 0; } }

.s-how-it-works .check-box {
  width: 100%;
  height: 163px;
  border: 1px solid rgba(206, 246, 6, 0.15);
  border-radius: 6px;
  background: linear-gradient(rgba(102, 153, 255, 0.04) 0%, rgba(206, 246, 6, 0) 100%);
  padding: 12px;
  overflow: hidden;
}

.s-how-it-works .check-win {
  height: 139px;
  overflow: hidden;
  position: relative;
}

.s-how-it-works .check-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: hiw-check 14s linear infinite;
}

@keyframes hiw-check { to { transform: translateY(-149px); } }

.s-how-it-works .check-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0.5;
}

.s-how-it-works .check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 23px;
}

.s-how-it-works .check-ico {
  flex: none;
  width: 23px;
  height: 23px;
}

.s-how-it-works .check-ico svg {
  display: block;
  width: 100%;
  height: 100%;
}

.s-how-it-works .check-row p {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 10px;
  line-height: 16.5px;
  color: var(--band-ink);
}

/* card 4: oracle aggregator tree ------------------------------------- */

.s-how-it-works .orc {
  height: 300px;
  background: var(--band);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: clip;
}

.s-how-it-works .orc-box {
  border: 1px solid rgba(206, 246, 6, 0.15);
  border-radius: 6px;
  background: linear-gradient(rgba(206, 246, 6, 0.04) 0%, rgba(206, 246, 6, 0) 100%);
  padding: 12px 14px;
}

.s-how-it-works .orc-box p,
.s-how-it-works .orc-node-in p {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: var(--band-ink);
  white-space: pre;
}

.s-how-it-works .orc-link { width: 1px; height: 40px; }

.s-how-it-works .orc-node { width: min-content; }

.s-how-it-works .orc-node-in {
  position: relative;
  border-radius: 6px;
  background: linear-gradient(#14160a 0%, #000 100%);
  padding: 10px 38px;
}

/* card 5: governance token marquee ----------------------------------- */

.s-how-it-works .gov {
  height: 300px;
  background: var(--band);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.s-how-it-works .gov-marquee {
  width: 100%;
  overflow: hidden;
}

.s-how-it-works .gov-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 23px;
  width: max-content;
  animation: hiw-gov 30s linear infinite;
}

@keyframes hiw-gov { to { transform: translateX(-486px); } }

/* production tile: 58x58, radius 5, logo box at 52% (~30px), logo contained */
.s-how-it-works .gov-tile {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}

.s-how-it-works .gov-tile img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* the production DOM carries a 90px centre mark over the marquee, but it
   never reads on the black band in either theme, so it stays hidden */
.s-how-it-works .gov-mark {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  z-index: 1;
  object-fit: contain;
}

/* bottom dotted texture strip ---------------------------------------- */

.s-how-it-works .hiw-strip {
  width: 100%;
  height: 80px;
  border: 1px solid var(--band-line);
  background-image: radial-gradient(circle, var(--band-line) 1px, rgba(255, 255, 255, 0) 1.3px);
  background-size: 10px 10px;
  background-position: 9px 8px;
}

/* dark theme: the band tokens are theme-invariant, so no overrides needed */

/* breakpoints --------------------------------------------------------- */

@media (max-width: 1439px) {
  .s-how-it-works { padding: 100px 30px; }
  .s-how-it-works .hiw-top { gap: 60px; }
  .s-how-it-works .hiw-h2 { font-size: 38px; }
  .s-how-it-works .hiw-card-title { font-size: 22px; }
  .s-how-it-works .hiw-txt { padding: 16px; }

  .s-how-it-works .sc { padding: 0 13px; }

  /* row 1 becomes a 2 + 1 grid: stability card spans the full width */
  .s-how-it-works .hiw-row-1 { flex-wrap: wrap; }
  .s-how-it-works .hiw-card-collateral,
  .s-how-it-works .hiw-card-mint { flex: 1 1 45%; }
  .s-how-it-works .hiw-card-stability {
    flex: 1 1 100%;
    margin-left: 0;
    margin-top: -1px;
  }
}

@media (max-width: 767px) {
  .s-how-it-works { padding: 80px 20px; }
  .s-how-it-works .hiw-top { gap: 40px; }
  .s-how-it-works .hiw-h2 { font-size: 26px; }
  .s-how-it-works .hiw-card-title { font-size: 20px; }
  .s-how-it-works .hiw-txt { padding: 14px; }

  .s-how-it-works .hiw-row { flex-direction: column; }
  .s-how-it-works .hiw-row-2 { margin-top: -1px; }
  .s-how-it-works .hiw-card,
  .s-how-it-works .hiw-card-collateral,
  .s-how-it-works .hiw-card-mint,
  .s-how-it-works .hiw-card-stability {
    flex: none;
    width: 100%;
    margin-left: 0;
  }
  .s-how-it-works .hiw-card + .hiw-card { margin-top: -1px; }
}

/* reduced motion: everything settles, loops stop ---------------------- */

@media (prefers-reduced-motion: reduce) {
  .s-how-it-works .hiw-rot,
  .s-how-it-works .hiw-link::after,
  .s-how-it-works .sc-streak,
  .s-how-it-works .hdot::before,
  .s-how-it-works .type-caret,
  .s-how-it-works .check-track,
  .s-how-it-works .gov-track {
    animation: none;
  }
}