/* ========== Shared base between #nagare-small & #nagare-big ========== */
#nagare-small,
#nagare-big {
  display: grid;
  gap: 12px;
  color: #313131;
  font-size: 15px;
  letter-spacing: 0.02em;
  font-weight: bold;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

#nagare-small > li,
#nagare-big > li {
  display: flex;
  border-radius: 4px;
  list-style: none;
  padding-left: 0;
}

#nagare-big > li {
  flex-direction: column;
}
/* number badge (used in both) */
.nagare-small-number {
  background: #4e83c1;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* content card (shared) */
.nagare-small-content,
.nagare-big-content {
  background: #ebebeb;
  padding: 12px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 8px 8px 0;
}

/* icon (shared) */
.nagare-small-content .material-symbols-outlined,
.nagare-big-content .material-symbols-outlined {
  font-size: 32px;
  opacity: 0.5;
  color: #2a4f79;
  margin-bottom: 8px;
}

/* highlight current (shared) */
.current .nagare-small-content,
.current .nagare-big-content {
  border: 2px solid #4e83c1;
}

/* ========== #nagare-small specific ========== */
#nagare-small {
  grid-template-columns: 35px 1fr 1fr 35px 1fr 35px 1fr 0.8fr;
  grid-template-rows: 35px 50px 50px 50px;
  grid-template-areas:
    "one account  trial  two activate three payment link"
    "one account  trial  two activate three payment link"
    "one contact  contact two activate three payment link"
    "one contact  contact two activate three payment link";
}
@media (max-width: 768px) {
  #nagare-small {
    grid-template-columns: 35px 1fr;
    grid-template-areas:
      "one account"
      "one trial"
      "one contact"
      "two activate"
      "three payment"
      "link link";
    grid-template-rows: auto;
    padding-right: 2em;
  }

}

.account { grid-area: account; }
.trial    { grid-area: trial; }
.activate { grid-area: activate; }
.payment  { grid-area: payment; }
.contact  { grid-area: contact; }
.one      { grid-area: one; }
.two      { grid-area: two; }
.three     { grid-area: three; }
.link     { grid-area: link; align-self: center; font-weight: 400; }

#nagare-small .nagare-small-number { width: 32px; }
#nagare-small .nagare-small-content {
  width: 100%;
  flex-direction: column;
}

/* ========== #nagare-big specific ========== */
#nagare-big {
  grid-template-columns: 35px 1fr;
  grid-template-areas:
    "one   account"
    "one   trial"
    "one   contact"
    "two   activate"
    "three payment";
  max-width: 600px;
}

/* Grid placement */
#nagare-big .account  { grid-area: account; }
#nagare-big .trial    { grid-area: trial; }
#nagare-big .activate { grid-area: activate; }
#nagare-big .payment  { grid-area: payment; }
#nagare-big .contact  { grid-area: contact; }
#nagare-big .one      { grid-area: one; }
#nagare-big .two      { grid-area: two; }
#nagare-big .three    { grid-area: three; }

/* Blue rails 1–3 */
#nagare-big .one,
#nagare-big .two,
#nagare-big .three {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4e83c1;
  border-radius: 4px 0 0 4px;
  margin-bottom: 12px;
}

#nagare-big .nagare-small-number { width: 100%; } /* full rail width */
#nagare-big .nagare-big-content {
  width: 100%;
  flex-direction: row;
}

#nagare-big li p { padding: 8px; }
#nagare-big .nagare-big-content .material-symbols-outlined {
  margin-right: 8px;
  position: relative;
  top: -2px;
}

/* ========== Supporting text ========== */
.account-exp,
.trial-exp,
.contact-exp,
.activate-exp,
.payment-exp {
  font-weight: normal;
  text-align: left;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.6;
}

.smaller {
  font-size: 12px;
  color: #555;
  line-height: 1.5;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}