/* styles.css  */
:root{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --c-primary:#006699;
  --c-bg:#f8f9fa;
  --c-card:#ffffff;
  --c-border:#dee2e6;
}

body{
  margin:0;
  background:var(--c-bg);
  color:#212529;
  line-height:1.6;
}

header{
  background:var(--c-primary);
  color:#fff;
  padding:2rem 1rem;
  text-align:center;
}

header h1{
  margin:0;
  font-size:clamp(1.8rem,4vw,2.5rem);
}

main{
  max-width:1000px;
  margin:2rem auto;
  padding:0 1rem;
}

section{
  margin-bottom:3rem;
  background:var(--c-card);
  border:1px solid var(--c-border);
  border-radius:12px;
  padding:1.5rem 1.25rem;
  box-shadow:0 3px 6px rgba(0,0,0,.04);
}

section h2{
  margin-top:0;
  color:var(--c-primary);
  font-size:1.35rem;
}

ul.audio-list{
  list-style:none;
  padding:0;
  margin:0;
}

ul.audio-list li{
  margin-bottom:1.25rem;
  border-bottom:1px dashed var(--c-border);
  padding-bottom:.75rem;
}

.track-title{
  font-weight:600;
  display:block;
  margin-bottom:.3rem;
}

.skip-buttons{
  display:flex;
  gap:.5rem;
  margin-top:.4rem;
}

.skip-buttons button{
  background:#6c757d;
  color:#fff;
  border:none;
  padding:.3rem .6rem;
  border-radius:6px;
  cursor:pointer;
  font-size:.8rem;
}

.skip-buttons button:hover{
  opacity:.85;
}

audio{
  width:100%;
}

/* CTA button */
.cta-btn{
  background:var(--c-primary);
  color:#fff;
  padding:.6rem 1.4rem;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
}

.cta-btn:hover{
  opacity:.9;
}

/* Optional PDF button from earlier */
.pdf-btn{
  margin-left:.5rem;
  padding:.25rem .75rem;
  font-size:.9rem;
  border:1px solid #ddd;
  border-radius:4px;
  cursor:pointer;
}

.pdf-btn:hover{
  background:#f0f0f0;
}