:root{
  --teal:#48A6A7;
  --navy:#013d71;
  --paper:#F2EFE7;
  --ink:#2a2f33;
}

html,body{
  margin:0;
  padding:0;
  background:var(--paper);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.7;
}

header{
  text-align:center;
  padding:24px 16px 8px;
}

h1{
  margin:.25rem 0;
  font-size:clamp(28px,4vw,44px);
  color:var(--teal);
}

h2{
  margin:0;
  font-size:clamp(16px,2.2vw,20px);
  color:var(--navy);
  font-weight:500;
  opacity:.9;
}

h2 a{
  margin:0;
  font-size:clamp(16px,2.2vw,20px);
  color:var(--navy);
  font-weight:500;
  opacity:.9;
}

h2 a:hover{
  color:#2973B2;
}

.container{
  width:min(800px,92%);
  margin:24px auto 56px;
}

.collapsible{
  width:100%;
  text-align:left;
  background:none;
  border:none;
  border-bottom:2px solid var(--teal);
  padding:10px 0;
  font-size:18px;
  font-weight:600;
  color:var(--teal);
  cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}

.collapsible:hover{
  color:#2973B2;
  border-color:#2973B2;
}

.collapsible::after{
  content:"+";
  float:right;
  font-weight:400;
  transition:transform .2s ease;
}

.collapsible.active::after{
  content:"–";
}

.answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
  padding-left:4px;
}

.answer p{
  margin:8px 0 16px;
  color:var(--navy);
  font-size:16px;
}