/* ===== tn content stylesheet ===== */

main .tn-section,
main .tn-hero,
main .tn-cards,
main .tn-faq{
  max-width:1200px;
  margin:0 auto;
  padding:2.5rem 1rem;
}

main h1{
  font-family:var(--font-heading);
  font-size:clamp(1.8rem, 4vw, 2.6rem);
  line-height:1.15;
  margin:0 0 1rem;
  color:var(--color-bright);
}
main h2{
  font-family:var(--font-heading);
  font-size:clamp(1.4rem, 3vw, 1.9rem);
  line-height:1.2;
  margin:0 0 1rem;
  color:var(--color-bright);
}
main h3{
  font-family:var(--font-heading);
  font-size:clamp(1.1rem, 2.2vw, 1.35rem);
  line-height:1.25;
  margin:1.5rem 0 .6rem;
  color:var(--color-bright);
}
main p{
  color:var(--color-text);
  margin:0 0 1rem;
}
main ul,main ol{
  margin:0 0 1rem;
  padding-left:1.3rem;
  color:var(--color-text);
}
main li{
  margin-bottom:.4rem;
}
main strong{
  color:var(--color-accent);
}
main a{
  color:var(--color-accent);
}
main a:hover{
  text-decoration:none;
}
main blockquote{
  margin:1.5rem 0 0;
  padding:1rem 1.25rem;
  background:var(--color-panel);
  border-left:4px solid var(--color-accent);
  border-radius:var(--radius);
  color:var(--color-muted);
}
main blockquote p{
  margin:0;
  color:var(--color-muted);
}

/* ===== Hero ===== */
main .tn-hero{
  display:flex;
  flex-direction:column-reverse;
  gap:2rem;
  align-items:center;
  padding-top:2rem;
}
main .tn-hero--text-only{
  flex-direction:column;
  text-align:left;
}
main .tn-hero__media img{
  width:100%;
  max-width:560px;
  margin:0 auto;
  border-radius:var(--radius);
}
main .tn-hero__content{
  width:100%;
  text-align:center;
}
main .tn-hero--text-only .tn-hero__content{
  text-align:left;
  max-width:900px;
  margin:0 auto;
}
main .tn-hero__ctas{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  justify-content:center;
  margin-top:1.25rem;
}

@media (min-width:768px){
  main .tn-hero{
    flex-direction:row;
    align-items:center;
    text-align:left;
  }
  main .tn-hero__content{
    text-align:left;
    flex:1 1 50%;
  }
  main .tn-hero__media{
    flex:1 1 50%;
  }
  main .tn-hero__ctas{
    justify-content:flex-start;
  }
  main .tn-hero--text-only{
    flex-direction:column;
  }
  main .tn-hero--text-only .tn-hero__content{
    flex:none;
  }
}

/* ===== Section w/ media (alternating) ===== */
main .tn-section--media{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}
main .tn-section--media .tn-section__media img{
  width:100%;
  border-radius:var(--radius);
}
main .tn-section--media .tn-section__content{
  width:100%;
}

@media (min-width:768px){
  main .tn-section--media{
    flex-direction:row;
    align-items:center;
  }
  main .tn-section--media .tn-section__media,
  main .tn-section--media .tn-section__content{
    flex:1 1 50%;
    min-width:0;
  }
}

/* ===== Cards / grid ===== */
main .tn-cards__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin-top:1.5rem;
}
@media (min-width:640px){
  main .tn-cards__grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (min-width:1024px){
  main .tn-cards__grid{
    grid-template-columns:repeat(3,1fr);
  }
}
main .tn-card{
  background:var(--color-panel);
  border-radius:var(--radius);
  padding:1.25rem;
  border:1px solid rgba(255,255,255,0.06);
}
main .tn-card h3{
  color:var(--color-accent);
  margin-top:0;
}
main .tn-card p:last-child,
main .tn-card ul:last-child{
  margin-bottom:0;
}

/* ===== Sub-sections grid ===== */
main .tn-subgrid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  margin-top:1.5rem;
}
@media (min-width:640px){
  main .tn-subgrid{
    grid-template-columns:repeat(2,1fr);
  }
}
main .tn-subcard{
  background:var(--color-panel);
  border-radius:var(--radius);
  padding:1.25rem;
  border:1px solid rgba(255,255,255,0.06);
}
main .tn-subcard--media img{
  width:100%;
  border-radius:var(--radius);
  margin-bottom:1rem;
}
main .tn-subcard h3{
  color:var(--color-accent);
  margin-top:0;
}

/* ===== Steps (ordered lists) ===== */
main .tn-steps{
  counter-reset:none;
  padding-left:1.3rem;
}
main .tn-steps li{
  margin-bottom:.65rem;
}

/* ===== How-to (steps + gallery) ===== */
main .tn-howto{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  margin-top:1.5rem;
}
main .tn-howto__steps{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
main .tn-howto__step{
  background:var(--color-panel);
  border-radius:var(--radius);
  padding:1.1rem 1.25rem;
  border:1px solid rgba(255,255,255,0.06);
}
main .tn-howto__step h3{
  color:var(--color-accent);
  margin-top:0;
  margin-bottom:.4rem;
}
main .tn-howto__step p:last-child{
  margin-bottom:0;
}
main .tn-howto__gallery{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.75rem;
}
main .tn-howto__gallery img{
  width:100%;
  border-radius:var(--radius);
}
@media (min-width:768px){
  main .tn-howto{
    flex-direction:row;
    align-items:flex-start;
  }
  main .tn-howto__steps{
    flex:1 1 55%;
  }
  main .tn-howto__gallery{
    flex:1 1 45%;
    grid-template-columns:repeat(2,1fr);
    position:sticky;
    top:1rem;
  }
}

/* ===== Tables ===== */
main .tn-table-wrap{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,0.08);
  margin-top:1rem;
}
main table{
  width:100%;
  border-collapse:collapse;
  min-width:560px;
  background:var(--color-panel);
}
main thead th{
  background:var(--color-dark);
  color:var(--color-bright);
  text-align:left;
  padding:.75rem 1rem;
  font-size:.9rem;
  white-space:nowrap;
}
main tbody td{
  padding:.65rem 1rem;
  border-top:1px solid rgba(255,255,255,0.08);
  color:var(--color-text);
  font-size:.9rem;
}
main tbody tr:nth-child(even){
  background:rgba(255,255,255,0.02);
}

/* ===== FAQ ===== */
main .tn-faq__list{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  margin-top:1.5rem;
}
main .tn-faq__item{
  background:var(--color-panel);
  border-radius:var(--radius);
  padding:.9rem 1.1rem;
  border:1px solid rgba(255,255,255,0.06);
}
main .tn-faq__item summary{
  cursor:pointer;
  font-weight:600;
  color:var(--color-bright);
  list-style:none;
  position:relative;
  padding-right:1.75rem;
}
main .tn-faq__item summary::-webkit-details-marker{
  display:none;
}
main .tn-faq__item summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:0;
  color:var(--color-accent);
  font-size:1.25rem;
  line-height:1;
}
main .tn-faq__item[open] summary::after{
  content:"–";
}
main .tn-faq__item p{
  margin-top:.75rem;
  margin-bottom:0;
  color:var(--color-muted);
}

/* ===== Buttons reuse ===== */
main .tn-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.6rem 1.1rem;
  border-radius:var(--radius);
  font-weight:600;
  font-size:.9rem;
  text-decoration:none;
  white-space:nowrap;
  min-height:44px;
  border:2px solid transparent;
}
main .tn-cta--primary{
  background:var(--color-accent);
  color:var(--color-dark);
}
main .tn-cta--primary:hover{
  filter:brightness(1.08);
}
main .tn-cta--secondary{
  background:transparent;
  color:var(--color-bright);
  border-color:var(--color-bright);
}
main .tn-cta--secondary:hover{
  background:rgba(255,255,255,0.1);
}