/* ===============================
   PAGE WRAP
================================ */

.tb-legal-page{
  max-width:960px;
  margin:0 auto;
  padding:32px 22px 96px;

  background:rgb(var(--tb-color3));
  color:rgb(var(--tb-color1));
}


/* ===============================
   HERO
================================ */

.tb-legal-hero{
  max-width:720px;
  margin-bottom:44px;
}

.tb-legal-kicker{
  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;

  color:rgb(var(--tb-color2));

  margin-bottom:10px;
}

.tb-legal-title{
  font-size:36px;
  line-height:1.1;
  font-weight:1000;
  letter-spacing:-.035em;

  margin-bottom:12px;

  color:rgb(var(--tb-color1));
}

.tb-legal-sub{
  font-size:15px;
  line-height:1.6;

  color:rgb(var(--tb-color2));

  max-width:560px;
}


/* ===============================
   TABS WRAPPER
================================ */

.tb-legal-tabs{
  margin-top:40px;
}

.tb-legal-tabs input{
  display:none;
}


/* ===============================
   TAB LABELS
================================ */

.tb-tab-labels{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:30px;
}

.tb-tab-labels label{

  padding:9px 18px;

  border-radius:999px;

  font-size:13px;
  font-weight:900;

  cursor:pointer;

  color:rgb(var(--tb-color2));

  border:1px solid rgb(var(--tb-color1) / .08);

  background:rgb(var(--tb-color3));

  transition:
    background .15s ease,
    box-shadow .15s ease,
    border-color .15s ease,
    color .15s ease;
}

.tb-tab-labels label:hover{
  border-color:rgb(var(--tb-color1) / .35);
}


/* ACTIVE TAB */

#tab-terms:checked ~ .tb-tab-labels label[for="tab-terms"],
#tab-privacy:checked ~ .tb-tab-labels label[for="tab-privacy"],
#tab-risk:checked ~ .tb-tab-labels label[for="tab-risk"],
#tab-contact:checked ~ .tb-tab-labels label[for="tab-contact"]{

  color:rgb(var(--tb-color1));

  background:rgb(var(--tb-color4));

  border-color:rgb(var(--tb-color1));

  box-shadow:0 6px 18px rgb(var(--tb-color5) / .6);
}


/* ===============================
   TAB CONTENT AREA
================================ */

.tb-tab-content{
  position:relative;
}


/* PANELS */

.tb-tab-panel{
  display:none;
  animation:fadeUp .25s ease;
}

#tab-terms:checked ~ .tb-tab-content .terms,
#tab-privacy:checked ~ .tb-tab-content .privacy,
#tab-risk:checked ~ .tb-tab-content .risk,
#tab-contact:checked ~ .tb-tab-content .contact{
  display:block;
}


/* ===============================
   CONTENT TYPOGRAPHY
================================ */

.tb-tab-panel h2{
  font-size:22px;
  font-weight:1000;
  margin-bottom:12px;

  color:rgb(var(--tb-color1));
}

.tb-tab-panel p{
  font-size:15px;
  line-height:1.65;

  color:rgb(var(--tb-color2));

  margin-bottom:16px;

  max-width:720px;
}

.tb-tab-panel ul{
  margin:12px 0 22px 20px;
  max-width:720px;
}

.tb-tab-panel li{
  font-size:14px;
  line-height:1.55;
  margin-bottom:8px;

  color:rgb(var(--tb-color2));
}


/* MUTED NOTE */

.tb-muted{
  font-size:13px;
  line-height:1.5;

  color:rgb(var(--tb-color2));

  font-weight:700;

  max-width:680px;
}


/* ===============================
   CONTACT / INFO BOX
================================ */

.tb-legal-box{

  margin:18px 0 22px;

  padding:16px 18px;

  border-radius:14px;

  background:rgb(var(--tb-color4));

  border:1px solid rgb(var(--tb-color1) / .08);

  font-size:14px;
  font-weight:800;

  color:rgb(var(--tb-color1));

  max-width:420px;
}


/* ===============================
   FOOTNOTE
================================ */

.tb-legal-foot{

  margin-top:54px;

  font-size:12px;

  font-weight:700;

  color:rgb(var(--tb-color2));

  text-align:left;
}


/* ===============================
   ANIMATION
================================ */

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(6px);
  }
  to{
    opacity:1;
    transform:none;
  }
}


/* ===============================
   MOBILE
================================ */

@media(max-width:768px){

  .tb-legal-page{
    padding:26px 16px 80px;
  }

  .tb-legal-title{
    font-size:28px;
  }

  .tb-tab-labels{
    gap:8px;
  }

}