/* b5t1w.css */
.info-section-head h2{
  margin:0;
  color:#172033;
  font-size:27px;
  letter-spacing:-.025em;
}
.info-kicker{
  display:inline-block;
  margin-bottom:7px;
  color:#2f67ff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.info-page-section p{
  margin:0 0 14px;
  color:#46556a;
  font-size:15px;
  line-height:1.75;
}
.info-page-section p:last-child{margin-bottom:0}
.info-whatsapp{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:7px;
  padding:10px 15px;
  border-radius:10px;
  background:#172033;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:13px;
  transition:background .15s ease,transform .15s ease;
}
.info-whatsapp:hover{background:#2f67ff;transform:translateY(-1px)}
.faq-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.faq-item{
  padding:17px 18px;
  border:1px solid #d8e2ea;
  border-radius:13px;
  background:rgba(255,255,255,.62);
}
.faq-item h3{margin:0 0 7px;color:#172033;font-size:15px}
.faq-item p{margin:0;color:#59677a;font-size:14px;line-height:1.65}
/* Once information sections exist, the footer only needs a normal gap. */
.info-sections + .site-footer{margin-top:72px}
@media(max-width:720px){
  .info-sections{width:calc(100% - 32px);margin:max(250px,42vh) auto 0}
  .info-page-section{padding:24px 20px}
  .faq-list{grid-template-columns:1fr}
  .info-sections + .site-footer{margin-top:54px}
}

/* Single-file page navigation: About and FAQ behave like separate pages without separate HTML files. */
.single-page-view{
  display:none;
  min-height:100vh;
  background:#eef5f9;
  color:#172033;
  padding:0 0 70px;
}
body.route-about .app,
body.route-about .site-footer,
body.route-faq .app,
body.route-faq .site-footer{display:none !important}
body.route-about #about-page{display:block}
body.route-faq #faq-page{display:block}
.subpage-header{
  width:min(1260px,calc(100% - 48px));
  margin:0 auto;
  min-height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid #cad8e4;
}
.subpage-brand{display:inline-flex;align-items:center;text-decoration:none}
.subpage-logo{display:block;width:230px;max-width:48vw;height:auto}
.subpage-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  padding:0;
  border:0;
  background:transparent;
  color:#172033;
  text-decoration:none;
  font-family:Arial,sans-serif;
  font-size:31px;
  font-weight:400;
  line-height:1;
  transition:color .15s ease,transform .15s ease;
}
.subpage-back:hover{color:#2f67ff;transform:translateX(-3px)}
.subpage-content{
  width:min(1120px,calc(100% - 48px));
  margin:64px auto 0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.subpage-content h1,.subpage-content h2{margin:6px 0 0;font-size:34px;letter-spacing:-.03em;color:#172033}
.subpage-divider{height:1px;background:#cad8e4;margin:20px 0 24px}
.subpage-content>p{margin:0 0 17px;color:#46556a;font-size:16px;line-height:1.8}
.subpage-content .faq-list{margin-top:4px}
.subpage-content{padding-bottom:24px}
@media(max-width:720px){
  .subpage-header{width:calc(100% - 32px);min-height:92px}
  .subpage-logo{width:180px}
  .subpage-back{width:38px;height:38px;font-size:28px;padding:0}
  .subpage-content{width:calc(100% - 32px);margin-top:34px;padding:0}
  .subpage-content h1,.subpage-content h2{font-size:28px}
}


/* Professional website header */
.app{
  width:min(1220px,calc(100% - 48px));
  padding:20px 0 70px;
}
.top-row.site-header{
  min-height:84px;
  padding:0 0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  border-bottom:1px solid var(--line);
}
.header-brand{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  text-decoration:none;
}
.header-brand .brand-logo{
  height:58px;
  width:auto;
  max-width:300px;
}
.header-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
}
.header-nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 15px;
  border-radius:10px;
  color:#334155;
  text-decoration:none;
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
  transition:background .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.header-nav-link:hover{
  color:var(--accent);
  background:rgba(47,103,255,.07);
}
.header-nav-active{
  color:#fff;
  background:var(--accent);
  box-shadow:0 7px 18px rgba(47,103,255,.18);
}
.header-nav-active:hover{
  color:#fff;
  background:#2459e8;
}
.header-contact{
  margin-left:3px;
  border:1px solid rgba(47,103,255,.28);
  color:var(--accent);
  background:rgba(255,255,255,.42);
}
.test-status-bar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-height:58px;
  padding-top:13px;
}
.test-status-bar .live-stats{gap:28px}
.typing-zone{padding-top:26px}

@media(max-width:820px){
  .app{width:calc(100% - 32px);padding-top:14px}
  .top-row.site-header{
    align-items:flex-start;
    gap:12px;
    padding-bottom:13px;
  }
  .header-brand .brand-logo{height:46px;max-width:210px}
  .header-nav{gap:3px}
  .header-nav-link{min-height:38px;padding:0 10px;font-size:13px}
  .header-contact{margin-left:0}
  .test-status-bar{justify-content:center;padding-top:12px}
  .test-status-bar .live-stats{gap:16px;flex-wrap:wrap;justify-content:center}
}
@media(max-width:600px){
  .top-row.site-header{display:block}
  .header-brand{margin-bottom:12px}
  .header-nav{
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .header-nav::-webkit-scrollbar{display:none}
  .header-nav-link{flex:0 0 auto}
  .test-status-bar .stat-label{font-size:10px}
  .test-status-bar .stat-value{font-size:18px}
}


/* Monetag In-Page Push safe area (Zone 11916414)
   Keeps floating ads from covering FingerWPM controls. */
@media (min-width: 821px){
  body#top > .app{
    margin-top:150px;
  }
}
@media (min-width: 601px) and (max-width: 820px){
  body#top > .app{
    margin-top:145px;
  }
}
@media (max-width: 600px){
  body#top > .app{
    margin-top:135px;
  }
}

/* Fine adjustment: lower only the top navigation controls by 5px. */
@media (min-width: 821px){
  .top-row.site-header .header-nav{
    transform: translateY(5px);
  }
}