/* Main page layout – index, es, zh */
header,main,footer{max-width:var(--max-w);margin-inline:auto;padding:1rem}
header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}
h1{font-size:clamp(1.45rem,2.6vw,1.95rem);margin:.2rem 0}
h2{font-size:clamp(1.2rem,2.1vw,1.45rem);margin:1.1rem 0 .65rem}
nav.top a{margin:.25rem .5rem;color:var(--clr-primary);font-weight:600;text-decoration:none}

.toc{
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  gap:.38rem;
  width:max-content;
  max-width:100%;
  margin:0 auto .2rem;
  font-size:.9rem;
  overflow-x:auto;
  padding-bottom:.05rem;
}
.toc a{
  display:inline-block;
  text-align:center;
  padding:.16rem .5rem;
  border:1px solid var(--clr-primary);
  border-radius:var(--radius);
  text-decoration:none;
  color:var(--clr-primary);
  white-space:nowrap;
  line-height:1.2;
  flex:0 0 auto;
}
.toc a:hover{background:var(--clr-primary);color:#fff}

section{margin-block:2rem}
#controls{margin-top:.2rem}
textarea,select,input[type="range"],button{display:block;width:100%;max-width:20rem;margin:.5rem auto;font-size:1rem}
textarea{min-height:8rem;padding:.5rem}
button{background:var(--clr-primary);color:#fff;border:none;border-radius:var(--radius);padding:.75rem 1.5rem;cursor:pointer;transition:background .2s}
button:hover{background:var(--clr-primary-dark)}
.range-label{display:flex;justify-content:center;gap:.4rem;align-items:center}
ul,ol{text-align:left;max-width:60ch;margin-inline:auto}
table{margin-inline:auto;border-collapse:collapse;font-size:.9rem}
th,td{border:1px solid #ccc;padding:.25rem .5rem}
footer p{font-size:.85rem;margin:.4rem 0}
.break-all{overflow-wrap:anywhere;word-break:break-word}
.crypto-address{font-size:.92em}

.affiliate-card{
  max-width:60ch;
  margin:1rem auto;
  padding:1rem;
  border:1px solid #d9deea;
  border-radius:var(--radius);
  background:#f7f9ff;
  text-align:left;
}
.affiliate-card img{
  width:100%;
  height:auto;
  border-radius:var(--radius);
  display:block;
  margin-top:.75rem;
}
.affiliate-note{font-size:.85rem;color:#444}

.dictate-inside{
  position:absolute;
  top:.45rem;
  right:.45rem;
  width:2.25rem !important;
  min-height:2.25rem !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:999px !important;
  font-size:1.05rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--clr-primary);
}
.dictate-inside:hover{background:var(--clr-primary-dark)}
.dictate-inside:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
  box-shadow:0 0 0 3px rgba(79,70,229,.45);
}
.dictate-inside::after{
  content:attr(data-tooltip);
  position:absolute;
  right:0;
  bottom:calc(100% + .35rem);
  padding:.2rem .4rem;
  border-radius:.35rem;
  background:#1f2340;
  color:#eef2ff;
  font-size:.78rem;
  line-height:1.2;
  white-space:nowrap;
  opacity:0;
  transform:translateY(2px);
  transition:opacity .15s ease,transform .15s ease;
  pointer-events:none;
  z-index:3;
}
.dictate-inside:hover::after,
.dictate-inside:focus-visible::after{
  opacity:1;
  transform:translateY(0);
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.support-compact{
  max-width:32rem;
  margin:0 auto .65rem;
  padding:.55rem .65rem;
  border:1px solid #d9deea;
  border-radius:var(--radius);
  background:#f8f9ff;
  text-align:left;
}
.support-compact p{margin:.18rem 0}
.support-title{font-size:.82rem;color:#535b72}
.support-inline{
  display:flex;
  align-items:center;
  gap:.42rem;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding-bottom:.12rem;
}
.trustpilot-link{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.28rem;
  border:1px solid #cfd6f7;
  background:#fff;
  color:#1f2a44;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  padding:.32rem .58rem;
  text-decoration:none;
  white-space:nowrap;
}
.trustpilot-link:hover{background:#eef2ff}
.support-actions{
  display:flex;
  flex-wrap:nowrap;
  gap:.35rem;
  margin-top:0;
}
.support-help{margin-top:.22rem;font-size:.73rem;color:#5c6478}

.product-truth-table{
  margin:1rem auto 0;
  padding:.65rem .7rem;
  border:1px solid #d9deea;
  border-radius:var(--radius);
  background:#f8f9ff;
  text-align:left;
}
.product-truth-table h3{margin:.1rem 0 .35rem;font-size:1rem}
.product-truth-table p{margin:.1rem 0 .55rem;font-size:.86rem;color:#4b5565}
.product-truth-table table{
  width:100%;
  max-width:100%;
  margin:0;
  font-size:.82rem;
  background:#fff;
}
.product-truth-table th,
.product-truth-table td{
  text-align:left;
  vertical-align:top;
  padding:.36rem .44rem;
}

.page-layout{display:block}
.page-rail{
  display:none;
  flex:0 0 170px;
  align-self:flex-start;
  position:sticky;
  top:1rem;
}
.page-rail a{display:block;text-decoration:none}
.page-rail img{
  width:170px;
  height:auto;
  display:block;
  border-radius:var(--radius);
  border:1px solid #ddd7ff;
  box-shadow:0 8px 24px rgba(35,26,76,.12);
}

@media(max-width:40em){
  header{flex-direction:column}
  nav.top{width:100%;text-align:center}
  .toc{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
    overflow-x:visible;
  }
}
@media(min-width:62em){
  .page-layout{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:clamp(1rem,3vw,2.2rem);
  }
  .page-rail{display:block}
  .page-layout main{max-width:var(--max-w);width:100%;margin:0;padding:1rem}
}
@media(min-width:70em){
  .page-rail{flex-basis:205px}
  .page-rail img{width:205px}
  .page-layout{gap:clamp(1.4rem,4vw,3.2rem)}
}
@media(min-width:70em) and (max-width:81.99em) and (min-resolution:1.5dppx){
  .page-rail{flex-basis:122px}
  .page-rail img{width:122px}
}
@media(min-width:82em){
  .page-rail{flex-basis:248px}
  .page-rail img{width:248px}
  .page-layout{gap:clamp(2rem,6vw,6rem)}
}