.srs-how-it-works{ display:block; }

.srs-how-it-works{
  color-scheme: light;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  --maxw: 1400px;

  --text: #0b1220;
  --muted: #334155;
  --line: #e6eaf2;

  --shadow-1: 0 8px 24px rgba(2,12,44,.08);
  --shadow-2: 0 22px 60px rgba(2,12,44,.18);

  --safeL: env(safe-area-inset-left, 0px);
  --safeR: env(safe-area-inset-right, 0px);
  --safeT: env(safe-area-inset-top, 0px);
  --safeB: env(safe-area-inset-bottom, 0px);

  --padX: clamp(14px, 3vw, 28px);
  --padY: 28px;

  color: var(--text);

  /* ✅ prevent letter-stacking */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.srs-how-it-works :where(*, *::before, *::after){ box-sizing: border-box; }
.srs-how-it-works :where(h2, h3, p){ margin: 0; }
.srs-how-it-works :where(h2,h3,p,li,ul,ol,div,section,header,article,aside){ min-width:0; }
.srs-how-it-works :where(img,svg,video,canvas){ max-width:100%; height:auto; }

.srs-how-it-works :where(h2,h3,p,li,ol){
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.srs-how-it-works .srs-how-it-works__section{
  position: relative;
  isolation: isolate;

  width: 100%;
  max-width: 100%;
  margin: 0;

  overflow: hidden;
  overflow-x: clip;

  padding:
    calc(var(--padY) + var(--safeT))
    0
    calc(var(--padY) + var(--safeB))
    0;

  border: 0;
  border-radius: 0;
  background: transparent;

  contain: layout paint;
}

.srs-how-it-works .srs-how-it-works__section::before{
  content:"";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(1000px 600px at 90% 0%, rgba(16,185,129,.18), transparent 65%),
    radial-gradient(900px 650px at 50% 120%, rgba(236,72,153,.16), transparent 60%),
    linear-gradient(120deg,
      rgba(124,58,237,.06),
      rgba(236,72,153,.05) 40%,
      rgba(245,158,11,.06) 75%,
      rgba(16,185,129,.06)
    );
}

.srs-how-it-works .srs-how-it-works__section::after{
  content:"";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    linear-gradient(transparent 31px, rgba(100,116,139,.08) 32px),
    linear-gradient(90deg, transparent 31px, rgba(100,116,139,.08) 32px);
  background-size: 32px 32px;

  mask: linear-gradient(to bottom,
    rgba(0,0,0,0),
    rgba(0,0,0,.28) 30%,
    rgba(0,0,0,.34)
  );
}

.srs-how-it-works .srs-how-it-works__section > *{
  position: relative;
  z-index: 1;
}

.srs-how-it-works .srs-how-it-works__container{
  max-width: var(--maxw);
  margin: 0 auto;

  padding-inline:
    calc(var(--padX) + var(--safeL))
    calc(var(--padX) + var(--safeR));

  min-width: 0;
}

.srs-how-it-works .srs-how-it-works__header{
  margin-bottom: 18px;
}

.srs-how-it-works .srs-how-it-works__heading{
  margin: 0 0 12px;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 950;
  letter-spacing: -.015em;
  line-height: 1.12;

  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.srs-how-it-works .srs-how-it-works__intro{
  max-width: 90ch;
  font-size: clamp(.95rem, 1.8vw, 1.05rem);
  line-height: 1.7;
  color: var(--muted);
}

.srs-how-it-works .srs-how-it-works__stack{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.5vw, 22px);
  margin-top: 22px;
  min-width: 0;
}

.srs-how-it-works .srs-how-it-works__card{
  background: rgba(255,255,255,.86);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 0;

  box-shadow: var(--shadow-1);
  min-width: 0;

  transition: transform .18s ease, box-shadow .18s ease;
}

@media (hover:hover){
  .srs-how-it-works .srs-how-it-works__card:hover{
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
  }
}

.srs-how-it-works .srs-how-it-works__card-header{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 8px;
  min-width: 0;
}

.srs-how-it-works .srs-how-it-works__icon{
  width: 38px;
  height: 38px;
  border-radius: 12px;

  display: grid;
  place-items: center;

  background: #fff;
  border: 1px solid var(--line);

  flex: 0 0 auto;
}

.srs-how-it-works .srs-how-it-works__card-title{
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.2;
  min-width: 0;

  /* ✅ stop weird hyphenation like "ci-ti-zen" */
  hyphens: none;
  overflow-wrap: break-word;
  word-break: normal;
}

/* =========================
   ✅ Steps: desktop = number beside text
   ✅ Mobile = badge above + text below (like image 2)
   ========================= */

.srs-how-it-works .srs-how-it-works__steps{
  margin: 0;
  padding: 6px 14px 0 14px;     /* was left-heavy; now balanced */
  min-width: 0;

  list-style: none;             /* remove default 1. 2. */
  counter-reset: srsStep;       /* custom numbering */
}

.srs-how-it-works .srs-how-it-works__steps li{
  margin: 7px 0;
  line-height: 1.65;
  color: var(--muted);

  /* ✅ stop re-quest / pro-vided hyphen splitting */
  hyphens: none;
  overflow-wrap: break-word;
  word-break: normal;

  /* ✅ desktop layout: number left, text right */
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;

  counter-increment: srsStep;
}

.srs-how-it-works .srs-how-it-works__steps li::before{
  content: counter(srsStep);
  flex: 0 0 auto;

  width: 26px;
  height: 26px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  color: #0b1220;

  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  box-shadow: 0 10px 22px rgba(2,12,44,.10);
}

.srs-how-it-works .srs-how-it-works__card--citizens{ --accent:#0ea5e9; }
.srs-how-it-works .srs-how-it-works__card--subscribers{ --accent:#10b981; }
.srs-how-it-works .srs-how-it-works__card--admins{ --accent:#8b5cf6; }

.srs-how-it-works .srs-how-it-works__icon svg{
  width: 18px;
  height: 18px;
  color: var(--accent);
}

.srs-how-it-works .srs-how-it-works__note{
  margin-top: 22px;
  padding: 14px 16px;

  font-weight: 800;
  line-height: 1.55;

  border-left: 6px solid #10b981;
  background: rgba(255,255,255,.82);
  border-radius: 14px;
  box-shadow: var(--shadow-1);

  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* ✅ stack to 1 column */
@media (max-width: 980px){
  .srs-how-it-works .srs-how-it-works__stack{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px){
  .srs-how-it-works{
    --padY: 20px;
    --padX: 12px;
  }
}

/* ✅ Mobile header layout: icon centered on top, title below (like WCU) */
@media (max-width: 520px){
  .srs-how-it-works .srs-how-it-works__card-header{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 10px 14px 6px;
  }

  .srs-how-it-works .srs-how-it-works__icon{
    margin: 0 auto;
  }

  .srs-how-it-works .srs-how-it-works__card-title{
    text-align: center;
    width: 100%;
  }

  /* ✅ Steps on mobile: badge on top, text below (like image 2) */
  .srs-how-it-works .srs-how-it-works__steps{
    padding: 6px 16px 0 16px;
  }

  .srs-how-it-works .srs-how-it-works__steps li{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
}

@media (max-width: 420px){
  .srs-how-it-works .srs-how-it-works__card{
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce){
  .srs-how-it-works .srs-how-it-works__card{
    transition: none;
  }
  .srs-how-it-works .srs-how-it-works__card:hover{
    transform: none;
    box-shadow: var(--shadow-1);
  }
}