@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Inter:wght@400;500;600&display=swap');

:root{
  --pink:#E91E63;
  --pink-deep:#B0154A;
  --pink-tint:#FDE9F0;
  --ink:#1C1418;
  --ink-soft:#5B4B52;
  --paper:#FFFBFC;
  --line:#F1D9E3;
  --max:760px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--pink-deep);}
a:focus-visible, button:focus-visible{outline:3px solid var(--pink); outline-offset:2px;}

.topbar{
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.topbar-inner{
  max-width:960px;
  margin:0 auto;
  padding:18px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{
  font-family:'Fraunces',serif;
  font-weight:700;
  font-size:22px;
  color:var(--ink);
  text-decoration:none;
  letter-spacing:-0.01em;
}
.brand span{color:var(--pink);}
.topnav a{
  color:var(--ink-soft);
  text-decoration:none;
  margin-left:22px;
  font-size:14.5px;
  font-weight:500;
}
.topnav a:hover, .topnav a[aria-current="page"]{color:var(--pink-deep);}

.hero{
  max-width:var(--max);
  margin:0 auto;
  padding:52px 24px 8px;
}
.eyebrow{
  color:var(--pink-deep);
  font-weight:600;
  font-size:13px;
  letter-spacing:0.02em;
  margin:0 0 10px;
}
h1{
  font-family:'Fraunces',serif;
  font-size:clamp(30px,5vw,42px);
  font-weight:700;
  margin:0 0 16px;
  line-height:1.15;
  letter-spacing:-0.01em;
}
.intro{
  font-size:17px;
  color:var(--ink-soft);
  max-width:64ch;
}
.updated{
  font-size:13px;
  color:#9C8A92;
  margin-top:18px;
}

main.doc{
  max-width:var(--max);
  margin:0 auto;
  padding:8px 24px 80px;
}
.doc hr{
  border:none;
  border-top:1px solid var(--line);
  margin:34px 0 38px;
}
section.sec{margin-bottom:30px;}
section.sec h2{
  font-family:'Fraunces',serif;
  font-size:19px;
  font-weight:700;
  margin:0 0 10px;
}
section.sec p{
  margin:0 0 12px;
  color:#332830;
  font-size:15.5px;
}
section.sec p:last-child{margin-bottom:0;}

.callout{
  background:var(--pink-tint);
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px 20px;
  margin:0 0 34px;
  font-size:14.5px;
  color:#5A2A3E;
}
.callout strong{color:var(--pink-deep);}

.faq dt{
  font-weight:600;
  margin-top:16px;
  font-size:15px;
}
.faq dd{margin:6px 0 0; color:#332830; font-size:15px;}

.card-list{list-style:none; padding:0; margin:0;}
.card-list li{
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px 18px;
  margin-bottom:12px;
  font-size:15px;
}
.card-list li strong{display:block; color:var(--pink-deep); margin-bottom:4px; font-size:14px;}

.btn{
  display:inline-block;
  background:var(--pink);
  color:#fff;
  text-decoration:none;
  padding:12px 22px;
  border-radius:8px;
  font-weight:600;
  font-size:14.5px;
}
.btn.secondary{
  background:transparent;
  border:1.5px solid var(--pink);
  color:var(--pink-deep);
}
.btn-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px;}

footer{
  border-top:1px solid var(--line);
  padding:28px 24px 40px;
}
.footer-inner{
  max-width:960px;
  margin:0 auto;
  font-size:13px;
  color:#9C8A92;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}
.footer-inner a{color:#9C8A92;}
.footer-inner a:hover{color:var(--pink-deep);}

@media (max-width:640px){
  .topnav a{margin-left:14px; font-size:13.5px;}
}