/* Family Mortgage Shield :: legal pages (privacy, terms, do not sell). Same header and footer as index.html. */
:root{--cream:#F7F1E8;--ink:#1E1A16;--ink2:#3A332C;--muted:#6F655B;--orange:#E8792B;--orange2:#CF651E;--sand:#EFE4D3;--line:rgba(30,26,22,.12);--red:#B8422E;
  --serif:"Fraunces","Playfair Display",Georgia,serif;--sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100svh;display:flex;flex-direction:column}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
header.top{position:sticky;top:0;z-index:50;background:rgba(247,241,232,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--serif);font-weight:600;font-size:17px;color:inherit}
.brand img{width:32px;height:32px;display:block}
/* header nav, Danny 2026-09-15: the four links belong in the top bar, not only the footer. */
.topnav{display:flex;align-items:center;gap:22px;margin-left:auto;margin-right:22px}
.topnav a{text-decoration:none;font-weight:600;font-size:14px;color:var(--ink2);white-space:nowrap}
.topnav a:hover{color:var(--orange2)}
@media (max-width:900px){.topnav{display:none}}
.secure{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);font-weight:500}
.secure svg{width:14px;height:14px}
main{flex:1;padding:36px 0 50px}
.doc{max-width:760px}
.doc h1{font-family:var(--serif);font-weight:600;font-size:clamp(30px,7vw,44px);line-height:1.1;margin-bottom:6px}
.doc .meta{color:var(--muted);font-size:13.5px;margin-bottom:24px}
.doc h2{font-family:var(--serif);font-weight:600;font-size:22px;margin:28px 0 8px}
.doc p,.doc li{color:var(--ink2);margin-bottom:10px}
.doc ul{padding-left:20px;margin-bottom:10px}
.doc .box{background:var(--sand);border-radius:14px;padding:16px 18px;margin:14px 0}
.doc a{color:var(--orange2);font-weight:600}
[data-needs-pinnacle]{position:relative;outline:2px dashed var(--red);outline-offset:3px;padding:0 4px;background:repeating-linear-gradient(135deg,rgba(184,66,46,.06) 0 8px,transparent 8px 16px)}
[data-needs-pinnacle]::after{content:"NEEDS PINNACLE";position:absolute;top:-12px;right:-4px;font:700 9px/1 var(--sans);letter-spacing:.1em;color:#fff;background:var(--red);padding:3px 5px;border-radius:4px}
/* header CTA. Every page except index.html (the quiz is the page). */
.hcta{display:inline-flex;align-items:center;background:var(--orange);color:#fff;font-weight:700;font-size:14px;border-radius:999px;padding:10px 18px;text-decoration:none;white-space:nowrap}
.hcta:hover{background:var(--orange2)}
/* phones: the header CTA needs the room, so the wordmark goes to one line and the "Secure" tag hides. 2026-09-15, seen live at 375px: the brand wrapped to three lines. */
@media (max-width:480px){.secure{display:none}.brand{font-size:15px}.brand span{white-space:nowrap}.hcta{font-size:13px;padding:9px 14px}}
@media (max-width:360px){.brand span{display:none}}
footer{margin-top:auto;border-top:1px solid var(--line);padding:28px 0 calc(28px + env(safe-area-inset-bottom));font-size:12.5px;color:var(--muted)}
/* four column footer */
footer .fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:28px 32px;margin-bottom:22px}
footer .fcol h4{font-family:var(--serif);font-weight:600;font-size:15px;color:var(--ink2);margin-bottom:12px}
footer .fcol a{display:block;text-decoration:none;font-weight:600;color:var(--ink2);margin-bottom:8px}
footer .fcol a:hover{color:var(--orange)}
footer .fcol .brand{display:inline-flex;margin-bottom:12px;font-size:16px;color:var(--ink)}
footer .fcol p{margin-bottom:10px;max-width:460px}
footer .fmute{color:var(--muted)}
footer .frule{height:1px;background:var(--line);margin:0 0 16px}
@media (max-width:900px){footer .fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){footer .fgrid{grid-template-columns:1fr;gap:22px}}
footer .links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:12px}
footer .links a{text-decoration:none;font-weight:600;color:var(--ink2)}
footer .links a:hover{color:var(--orange)}
footer p{max-width:900px;line-height:1.6}
footer .copy{margin-top:10px}