:root {
  --bg: #FDF0EE;
  --bg2: #FAE4E0;
  --nav: #7A0A0A;
  --nav2: #5c0606;
  --card: #FFFFFF;
  --border: #E8C5C0;
  --border2: #D4A09A;
  --red: #B71C1C;
  --red-light: #E53935;
  --red-faint: rgba(183,28,28,0.08);
  --yellow: #F4C430;
  --yellow-dark: #D4A017;
  --yellow-faint: rgba(244,196,48,0.15);
  --text: #1A0505;
  --text2: #5C2020;
  --muted: #9E6060;
  --green: #1B7A3E;
  --green-faint: rgba(27,122,62,0.1);
  --shadow: 0 2px 12px rgba(122,10,10,0.08);
  --shadow-lg: 0 8px 32px rgba(122,10,10,0.12);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'Open Sans',sans-serif; min-height:100vh; display:flex; flex-direction:column; color:var(--text);
  background:
    linear-gradient(160deg, rgba(122,10,10,0.045) 0%, rgba(122,10,10,0) 40%, rgba(122,10,10,0) 75%, rgba(122,10,10,0.035) 100%),
    repeating-linear-gradient(0deg, rgba(212,160,23,0.075) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(212,160,23,0.075) 0 1px, transparent 1px 56px),
    var(--bg);
}
a { color:var(--red); }
:focus-visible { outline:3px solid var(--yellow); outline-offset:2px; border-radius:4px; }

nav { background:var(--nav); padding:0 2rem; height:88px; display:flex; align-items:center; justify-content:space-between; box-shadow:0 2px 16px rgba(0,0,0,0.2); flex-shrink:0; }
.nav-left { display:flex; align-items:center; gap:1rem; }
.logo { font-family:'Montserrat',sans-serif; font-weight:900; font-size:3rem; color:#fff; letter-spacing:-2px; text-decoration:none; }
.logo span { color:var(--yellow); }
.nav-badge { background:var(--yellow); color:var(--nav); font-size:0.7rem; font-weight:800; padding:0.35rem 0.85rem; border-radius:100px; font-family:'Montserrat',sans-serif; letter-spacing:0.5px; white-space:nowrap; }
.nav-btn { background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25); color:#fff; font-family:'Montserrat',sans-serif; font-weight:800; font-size:0.72rem; padding:0.45rem 1.1rem; border-radius:100px; cursor:pointer; letter-spacing:0.5px; transition:all 0.2s; white-space:nowrap; text-decoration:none; display:inline-block; }
.nav-btn:hover { background:rgba(255,255,255,0.22); border-color:rgba(255,255,255,0.5); }

.page-hero { padding:3rem 1.5rem 2.2rem; text-align:center; }
.page-hero h1 { font-family:'Montserrat',sans-serif; font-weight:900; font-size:clamp(1.7rem,3.5vw,2.6rem); color:var(--nav); letter-spacing:-1px; }
.page-hero .effective { display:inline-block; margin-top:0.8rem; background:var(--yellow-faint); border:1px solid rgba(244,196,48,0.5); color:var(--text2); font-size:0.72rem; font-weight:600; padding:0.35rem 0.9rem; border-radius:100px; }
.page-hero .lede { max-width:680px; margin:1rem auto 0; font-size:0.9rem; color:var(--text2); line-height:1.75; }

main.doc { flex:1; width:100%; max-width:860px; margin:0 auto; padding:0 1.5rem 3.5rem; }
.doc-card { background:var(--card); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow-lg); padding:2.4rem 2.6rem; }
.doc-card + .doc-card { margin-top:1.2rem; }

.doc h2 { font-family:'Montserrat',sans-serif; font-weight:900; font-size:1.02rem; color:var(--red); margin:2rem 0 0.7rem; padding-bottom:0.45rem; border-bottom:2px solid var(--border); letter-spacing:0.3px; }
.doc h2:first-child { margin-top:0; }
.doc h3 { font-family:'Montserrat',sans-serif; font-weight:800; font-size:0.86rem; color:var(--text); margin:1.4rem 0 0.5rem; }
.doc p { font-size:0.83rem; color:var(--text2); line-height:1.85; margin-bottom:0.8rem; }
.doc ul, .doc ol { margin:0.4rem 0 1rem 1.3rem; }
.doc li { font-size:0.83rem; color:var(--text2); line-height:1.8; margin-bottom:0.45rem; }
.doc strong { color:var(--text); }

.callout { border-radius:6px; padding:1rem 1.2rem; margin:1rem 0 1.2rem; font-size:0.8rem; line-height:1.75; }
.callout.warn { background:var(--yellow-faint); border:1.5px solid var(--yellow); color:var(--text2); }
.callout.warn strong { color:var(--nav); }
.callout.info { background:var(--red-faint); border:1px solid rgba(183,28,28,0.2); color:var(--text2); }
.callout.ok { background:var(--green-faint); border:1px solid rgba(27,122,62,0.25); color:var(--text2); }

.contact-email { display:inline-flex; align-items:center; gap:0.5rem; background:var(--nav); color:#fff !important; text-decoration:none; font-family:'Montserrat',sans-serif; font-weight:800; font-size:0.92rem; padding:0.8rem 1.6rem; border-radius:6px; box-shadow:0 4px 12px rgba(122,10,10,0.3); transition:background 0.2s; }
.contact-email:hover { background:var(--red); }

.faq-item { border:1px solid var(--border); border-radius:6px; margin-bottom:0.7rem; overflow:hidden; background:var(--bg2); }
.faq-item summary { cursor:pointer; padding:0.9rem 1.1rem; font-family:'Montserrat',sans-serif; font-weight:800; font-size:0.82rem; color:var(--text); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; font-size:1.1rem; color:var(--red); flex-shrink:0; }
.faq-item[open] summary::after { content:'–'; }
.faq-item .faq-a { padding:0 1.1rem 1rem; font-size:0.8rem; color:var(--text2); line-height:1.8; }

footer { background:var(--nav); margin-top:auto; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:space-around; align-items:center; gap:0.5rem 1.5rem; padding:1.4rem 2rem; }
.footer-links a, .footer-links button { background:none; border:none; cursor:pointer; font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.05rem; color:#fff; text-decoration:none; letter-spacing:0.2px; padding:0.3rem 0.2rem; transition:color 0.2s; }
.footer-links a:hover, .footer-links button:hover { color:var(--yellow); }
.footer-sub { border-top:1px solid rgba(255,255,255,0.15); padding:0.9rem 2rem; display:flex; flex-wrap:wrap; gap:0.4rem 1.5rem; justify-content:space-between; align-items:center; }
.footer-sub, .footer-sub a { color:rgba(255,255,255,0.65); font-size:0.7rem; }
.footer-sub a { text-decoration:underline; text-underline-offset:2px; }
.footer-sub a:hover { color:#fff; }
.footer-sub-links { display:flex; gap:1.2rem; flex-wrap:wrap; }
.footer-copy { display:flex; flex-direction:column; gap:0.2rem; }

@media(max-width:720px) {
  nav { padding:0 1rem; height:72px; }
  .logo { font-size:2.1rem; }
  .nav-badge { display:none; }
  .doc-card { padding:1.6rem 1.4rem; }
  main.doc { padding:0 1rem 2.5rem; }
  .footer-links { justify-content:flex-start; padding:1.2rem; gap:0.4rem 1.3rem; }
  .footer-links a, .footer-links button { font-size:0.92rem; }
}
