body, html {
  display: block !important; /* Override flex display from style.css */
  justify-content: initial !important; /* Reset flex property */
  align-items: initial !important; /* Reset flex property */
  overflow: auto !important; /* Ensure scrolling is enabled */
  height: auto !important; /* Revert: Allow content to define height for html */
  width: 100% !important; /* Ensure full width */
  margin: 0;
  padding: 0;
  color: initial !important; /* Ensure no inherited color is messing things up */
}

body {
  --light: #e6f03a;
  --light: #eee;
  --dark: #161616;
  min-height: 100vh !important; /* Revert: Ensure body can at least fill viewport, allow expansion */
  /* width: 100%; already in body,html rule */
}

section {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--light);
  position: relative; /* Establish stacking context */
  z-index: 0;        /* Base for stacking context */
}

span { /* General styles for both span.up and span.down */
  position: absolute;
  display: flex; /* Use flex to help center .content-wrapper */
  justify-content: center; /* Center .content-wrapper horizontally */
  align-items: center; /* Revert to center to vertically center the .content-wrapper block */
  width: 50%; /* Each span takes half the screen */
  height: 100%; /* Make span take full height to help with vertical centering of content */
  top: 0; /* Position from the top of the section */
  z-index: 2; /* Text on top */
  color: var(--light); /* Original color for reveal effect */
  padding: 20px; /* Add some padding */
  box-sizing: border-box;
}

span.up {
  right: 0;
}

span.down {
  left: 0;
}

.content-wrapper { /* Styles for the div inside each span */
  text-align: left; /* Align text to the left for lists */
  max-width: 80%; /* Control width of the text block */
}

span h2 {
  font-family: 'Tiempo Headline', serif; /* Apply Tiempo Headline font */
  font-size: 28px; /* Adjust as needed */
  font-weight: bold; /* Adjust as needed */
  margin-bottom: 15px;
  text-transform: none; /* Override any potential inherited uppercase */
  color: var(--light); /* Ensure headline also uses reveal color */
}

span ul {
  font-family: 'Inter', sans-serif; /* Apply Inter font */
  list-style: disc; /* Use standard bullets, or none if preferred */
  margin-left: 20px; /* Indent bullets */
  padding-left: 0; 
  font-size: 16px; /* Adjust as needed */
  line-height: 1.6;
  text-transform: none; /* Override any potential inherited uppercase */
  color: var(--light); /* Ensure list items also use reveal color */
}

span li {
  margin-bottom: 10px;
}

span strong {
  font-weight: bold; /* Ensure strong tag works with Inter if it has a bold variant */
  color: var(--light); /* Ensure strong text also uses reveal color */
}

.box {
  height: 1.2vh; /* Revert to original height */
  width: 50vw;
  margin-bottom: -0.2vh; /* Keep this for overlap simulation */
  background: var(--dark);
  display: block;
  /* position: relative; REMOVED */
  /* z-index: 1;  REMOVED */
}