/* ============================================================
   PAGE-SPECIFIC: setup page
   (the block above is the shared site CSS, kept in sync across
   home.html, pricing.html, how-it-works.html and this page)
   ============================================================ */

/* section intro */
.sec-intro{max-width:720px;margin:0 auto 48px;text-align:center}
.sec-intro p{font-size:18px;line-height:1.66}
.sec-intro p:last-child{margin-bottom:0}

/* hero badge */
.badge-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:36px}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:500;color:var(--ink);
  background:var(--bg-alt);border-radius:20px;padding:8px 16px;
}
.badge svg{color:var(--green);flex-shrink:0}

/* the two core steps */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:960px;margin:0 auto}
.pair__card{
  background:#fff;border:.8px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:32px 30px;display:flex;flex-direction:column;
  min-width:0; /* let the card shrink so the nowrap snippet scrolls inside it */
}
.pair__n{
  width:34px;height:34px;border-radius:9px;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;margin-bottom:18px;
}
.pair__card h3{font-size:21px;margin-bottom:12px;letter-spacing:-.025em}
.pair__card p{font-size:15.5px;line-height:1.63}
.snippet{
  margin-top:auto;background:var(--ink);border-radius:9px;padding:14px 16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.6;color:#C9D1D9;overflow-x:auto;white-space:nowrap;
  max-width:100%;-webkit-overflow-scrolling:touch;
}
.snippet .g{color:#8FD98A}
.snippet .m{color:#7C858C}

/* route cards */
.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.card-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.route{
  background:#fff;border:.8px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:28px 26px;display:flex;flex-direction:column;
}
.route__ico{
  width:44px;height:44px;border-radius:11px;background:var(--green-tint);
  border:.8px solid var(--green-line-2);display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.route h4{font-size:18px;margin-bottom:10px}
.route p{font-size:15px;line-height:1.62}
.route p:last-child{margin-bottom:0}
.route__tag{
  margin-top:auto;padding-top:16px;font-size:13px;color:var(--green);
  font-weight:500;display:flex;align-items:center;gap:7px;
}

/* two-way exchange diagram */
.exchange{
  background:var(--bg);border:.8px solid var(--line);border-radius:var(--r-card-lg);
  padding:30px 26px;max-width:760px;margin:0 auto;
}
.exchange__row{display:flex;align-items:center;gap:20px}
.exchange__end{
  flex:1 1 0;background:#fff;border:.8px solid var(--line);border-radius:var(--r-card);
  padding:18px 16px;text-align:center;box-shadow:var(--sh-card);
}
.exchange__end b{display:block;font-size:15px;color:var(--ink);font-weight:600}
.exchange__mid{flex:0 0 auto;display:grid;gap:12px;min-width:190px}
.exchange__arrow{
  display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:500;
  color:var(--body);background:var(--green-tint);border:.8px solid var(--green-line);
  border-radius:20px;padding:7px 13px;white-space:nowrap;justify-content:center;
}
.exchange__arrow svg{color:var(--green);flex-shrink:0}

/* support list */
.support{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 30px;max-width:900px;margin:0 auto}
.support li{display:flex;gap:13px;align-items:flex-start;font-size:16px;line-height:1.6}
.support li b{font-weight:600}
.support .tick{margin-top:4px}

/* band */
.band{background:var(--ink);padding:62px 0;text-align:center}
.band__kicker{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--green);font-weight:600;margin:0 0 18px}
.band p.big{font-size:clamp(21px,2.7vw,29px);line-height:1.4;color:#fff;font-weight:500;letter-spacing:-.028em;max-width:820px;margin:0 auto}
.band p.sub{font-size:16.5px;color:rgba(255,255,255,.66);max-width:660px;margin:22px auto 0;line-height:1.6}

.nav a.is-active{color:var(--green)}

@media (max-width:860px){
  .card-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .exchange__row{flex-direction:column;gap:14px}
  .exchange__mid{width:100%}
}
@media (max-width:640px){
  .pair,.card-grid,.card-grid--3,.support{grid-template-columns:1fr}
  .pair__card,.route{padding:24px 20px}
  .exchange{padding:22px 18px}
  .sec-intro{margin-bottom:34px}
}