/* Base (v0.2 merged) */
html{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}

body{
  margin:0;
  background:var(--pi-page);
  color:var(--pi-text);
  font-family:var(--pi-font-display);
  font-size:var(--pi-body-size);
  line-height:var(--pi-body-line);
}

/* Titles */
h1.pi,h2.pi,h3.pi,h4.pi{
  margin:0 0 var(--pi-space-4);
  font-weight:400;            /* lighter Bebas Neue */
  letter-spacing:.4px;        /* improves readability */
}

/* Heading scale */
h1.pi{
  font-size:var(--pi-h1-size);
  line-height:var(--pi-h1-line);
  color:var(--pi-text-strong);
}
h2.pi{
  font-size:var(--pi-h2-size);
  line-height:var(--pi-h2-line);
  color:var(--pi-text-strong);
}
h3.pi{
  font-size:var(--pi-h3-size);
  line-height:var(--pi-h3-line);
  color:var(--pi-text-strong);
}
h4.pi{
  font-size:var(--pi-h4-size);
  line-height:var(--pi-h4-line);
  color:var(--pi-text-strong);
}

/* Simple layout helpers */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--pi-space-6)}
.section{padding:var(--pi-space-6) 0}
.stack>*+*{margin-top:var(--pi-space-4)}
.grid{display:grid;gap:var(--pi-space-6)}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.responsive-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width: 900px){ .grid.responsive-2{grid-template-columns:1fr} }
.hidden{display:none!important}

/* Global Bebas baseline */
body{
  font-weight: 400;              /* keep Bebas from being fake-bolded */
  letter-spacing: .35px;         /* optional: opens it up a bit */
}

/* Tame <b>/<strong> so labels don't look too heavy */
b, strong{
  font-weight: 400;              /* or 400 if you want NO bold at all */
}

#appHeader {
  padding: 8px 20px; /* override the pi-card padding only for this header */
}