/* Articles section: the article list and the article pages */

.article_container {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1rem;
}
.articles_container {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
}

/* hero */
.article_breadcrumb {
  font-size: 0.875rem;
  color: rgb(255 255 255 / 0.55);
  margin-bottom: 1rem;
}
.article_breadcrumb a {
  color: rgb(255 255 255 / 0.8);
  transition: color 0.3s;
}
.article_breadcrumb a:hover {
  color: rgb(0 191 166);
}
.article_title {
  color: #fff;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.35;
  font-weight: 700;
}
.article_lead {
  color: rgb(255 255 255 / 0.8);
  font-size: 1.125rem;
  line-height: 1.8;
  margin-top: 1rem;
}
.article_meta {
  color: rgb(255 255 255 / 0.55);
  font-size: 0.875rem;
  margin-top: 1.25rem;
}

/* article body */
/* light backdrop around the content: soft brand-colour glows over a faint dot grid */
.article_body {
  background:
    radial-gradient(60rem 30rem at 0% 0%, rgb(0 191 166 / 0.1), transparent 70%),
    radial-gradient(50rem 30rem at 100% 40%, rgb(23 36 58 / 0.07), transparent 70%),
    radial-gradient(rgb(23 36 58 / 0.08) 1px, transparent 1px) 0 0 / 22px 22px,
    #f3f6f8;
  padding: 0 0 4rem;
}
.article_body > .articles_container {
  padding-top: 3rem;
}

/* the article sits on a white card that overlaps the dark hero */
.article.article_container {
  position: relative;
  width: calc(100% - 2rem);
  max-width: 50rem;
  margin-top: -3rem;
  padding: 2.5rem 3rem;
  background: #fff;
  border-radius: 1rem;
  box-shadow:
    0 1px 2px rgb(23 36 58 / 0.06),
    0 12px 40px rgb(23 36 58 / 0.08);
}
@media (max-width: 640px) {
  .article.article_container {
    padding: 1.75rem 1.25rem;
  }
}
.article h2 {
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: 700;
  color: #17243a;
  margin: 2.5rem 0 1rem;
}
.article > h2:first-child {
  margin-top: 0;
}
.article p,
.article li {
  font-size: 1.0625rem;
  line-height: 1.9;
  color: rgb(55 65 81);
}
.article p + p {
  margin-top: 1rem;
}
.article ul {
  list-style: disc;
  padding-inline-start: 1.5rem;
}
.article ul li + li {
  margin-top: 0.5rem;
}
.article a:not(.article_button) {
  color: rgb(0 140 122);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article strong {
  color: #17243a;
}

/* a label exactly as it appears in the portal */
.article_ui {
  font-weight: 600;
  color: #17243a;
  background: rgb(23 36 58 / 0.06);
  border-radius: 0.375rem;
  padding: 0.05rem 0.4rem;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* network names and handles inside Persian text: the Persian font would
   turn TRC20 into TRC۲۰, which no longer matches what wallets show */
.article_ltr {
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.article_table_wrap {
  overflow-x: auto;
  margin-top: 1rem;
}
.article_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
.article_table th,
.article_table td {
  border: 1px solid rgb(229 231 235);
  padding: 0.75rem 1rem;
  text-align: start;
  vertical-align: top;
  color: rgb(55 65 81);
}
.article_table th {
  background: rgb(249 250 251);
  font-weight: 700;
  color: #17243a;
}
.article .article_note {
  font-size: 0.95rem;
  color: rgb(107 114 128);
  margin-top: 0.75rem;
}

/* numbered steps */
.article_steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
}
.article_steps > li {
  counter-increment: step;
  position: relative;
  padding-inline-start: 3.25rem;
  margin-top: 1.75rem;
}
.article_steps > li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: rgb(0 191 166 / 0.12);
  color: rgb(0 140 122);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.article_steps h3 {
  font-size: 1.125rem;
  line-height: 2.25rem;
  font-weight: 700;
  color: #17243a;
}

/* portal screenshots under the steps */
.article_shot {
  margin-top: 1rem;
}
.article_shot img {
  display: block;
  width: 100%;
  max-width: 16rem;
  height: auto;
  border-radius: 1.25rem;
  border: 1px solid rgb(229 231 235);
  box-shadow: 0 8px 24px rgb(23 36 58 / 0.12);
}
.article .article_shot figcaption {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgb(107 114 128);
}

/* warnings */
.article_callout {
  border-inline-start: 4px solid rgb(245 158 11);
  background: rgb(255 251 235);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin-top: 1rem;
}
.article_callout strong {
  display: block;
  color: rgb(146 64 14);
  margin-bottom: 0.25rem;
}
.article .article_callout p {
  margin: 0;
  color: rgb(120 53 15);
}

/* questions */
.article_faq h3 {
  font-size: 1.0625rem;
  line-height: 1.8;
  font-weight: 700;
  color: #17243a;
  margin-top: 1.5rem;
}
.article_faq p {
  margin-top: 0.25rem;
}

/* call to action */
.article_cta {
  margin-top: 3rem;
  padding: 2rem 1.5rem;
  border-radius: 1rem;
  background: #17243a;
  text-align: center;
}
.article .article_cta h2 {
  color: #fff;
  margin: 0 0 1.25rem;
}
.article_cta_buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.article_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 500;
  transition:
    background-color 0.3s,
    border-color 0.3s;
}
.article_button_primary {
  background: rgb(0 191 166);
  color: #fff;
}
.article_button_primary:hover {
  background: rgb(0 160 140);
}
.article_button_secondary {
  border: 1px solid rgb(255 255 255 / 0.4);
  color: #fff;
}
.article_button_secondary:hover {
  background: rgb(255 255 255 / 0.1);
}

/* article list */
.articles_grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}
.article_card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(229 231 235);
  border-radius: 1rem;
  padding: 1.5rem;
  background: #fff;
  transition:
    box-shadow 0.3s,
    transform 0.3s;
}
.article_card:hover {
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.08);
  transform: translateY(-2px);
}
.article_card_tag {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgb(0 140 122);
}
.article_card h2 {
  font-size: 1.25rem;
  line-height: 1.6;
  font-weight: 700;
  color: #17243a;
  margin-top: 0.5rem;
}
.article_card p {
  flex: 1;
  margin-top: 0.75rem;
  line-height: 1.8;
  color: rgb(75 85 99);
}
.article_card_meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: rgb(107 114 128);
}
.article_card_link {
  font-weight: 600;
  color: rgb(0 140 122);
}