/* Progress bar */
body.single-techtips .tt-progress{
  position: fixed;
  left: 0;
  top: 0;
  height: 6px;
  width: 100%;
  background: rgba(0,0,0,0.12);
  z-index: 999999;
}
body.single-techtips .tt-progress__bar{
  height: 100%;
  width: 0%;
  background: #F10000;
}
body.admin-bar.single-techtips .tt-progress{ top: 32px; }
@media (max-width: 782px){
  body.admin-bar.single-techtips .tt-progress{ top: 46px; }
}

/* Hero */
body.single-techtips .tt-hero{
  padding: 78px 16px;
  color:#fff;
  text-align:center;
  background:#0d1327 !important;
  position:relative;
  z-index:1;
}
body.single-techtips .tt-hero__inner{ max-width:1200px; margin:0 auto; }
body.single-techtips .tt-hero__kicker{ font-size:14px; letter-spacing:.06em; opacity:.85; margin-bottom:18px; }
body.single-techtips .tt-hero__title{
  margin:0;
  font-family:'Space Grotesk',sans-serif;
  font-size:46px;
  font-weight:500;
  line-height:56px;
  text-transform:uppercase;
}

/* Layout */
body.single-techtips .tt-wrap{
  position:relative;
  z-index:2;
  margin-top:0;
  padding-top:28px;
  background:#fff;
}
body.single-techtips .tt-layout{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:28px;
  align-items:start;
  max-width:1200px;
  margin:0 auto;
  padding:28px 16px;
}

body.single-techtips .tt-wrap,
body.single-techtips .tt-layout,
body.single-techtips .tt-content,
body.single-techtips main.tt-content,
body.single-techtips .customize-support,
body.single-techtips #page,
body.single-techtips #content,
body.single-techtips #primary,
body.single-techtips .site-content,
body.single-techtips .content-area {
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  contain: none !important;
}


/* TOC box */
body.single-techtips .tt-toc{
  position: sticky !important;
  top: 90px;
  background:#fff;
  border-radius:14px;
  padding:18px 16px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}
body.single-techtips .tt-toc__title{
  font-weight:700;
  font-size:20px;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:20px;
  opacity:.85;
  font-family: 'Inter';
}

/* Reference-style TOC rows */
body.single-techtips #ttTocNav .js-anchor{
  margin:0 0 10px 0;
  padding-left:22px;
  position:relative;
}
body.single-techtips #ttTocNav .js-anchor::before{
  content:"›";
      color: #f10000;
    font-family: icon3ds;
  position:absolute;
  left:6px;
  font-size: 30px;
  opacity:0;
  top: 0px;
  transform:translateX(-2px);
  transition:opacity .15s ease, transform .15s ease;
}
body.single-techtips #ttTocNav .js-anchor.is-active::before{
  opacity:.7;
  transform:translateX(0);
}
body.single-techtips #ttTocNav a{
  display:block;
  color:#0d1327;
  text-decoration:none;
  line-height:1.35;
  padding:6px 8px;
  border-radius:10px;
  transition:background .2s ease, color .2s ease;
}
body.single-techtips #ttTocNav .js-anchor.is-active a{
  font-weight:600;
}
body.single-techtips #ttTocNav a:hover{
  background:rgba(0,0,0,.04);
}

/* Mobile */
@media (max-width: 900px){
  body.single-techtips .tt-layout{ grid-template-columns:1fr; }
  body.single-techtips .tt-toc{ position:relative !important; top:auto; }
}
body.single-techtips .tt-layout {
  align-items: start;
}

body.single-techtips .tt-toc {
  align-self: start;
}
body.single-techtips .tt-layout {
  min-height: 100vh;
}
/* Sticky fix: your theme sets overflow hidden on html/body, which breaks position: sticky */
html.tt-toc-js-on,
body.single-techtips {
  overflow: visible !important;
}

/* If the theme sets overflow-x/y separately, force them too */
html.tt-toc-js-on,
body.single-techtips {
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* Keep your TOC sticky */
body.single-techtips .tt-toc{
  position: sticky !important;
  top: 150px;
}