/* Family Mortgage Shield :: legal pages (privacy, terms, do not sell). Same header and footer as index.html.
   v2 (2026-09-30): header and footer sit on the dark base, the same as the funnel page. The document body stays cream. */
:root{--cream:#F7F1E8;--ink:#1E1A16;--ink2:#3A332C;--muted:#6F655B;--orange:#E8792B;--orange2:#CF651E;--orange3:#F08A3E;--sand:#EFE4D3;--line:rgba(30,26,22,.12);--red:#B8422E;
  --base:#141A24;--on-dark:#F7F1E8;--on-dark2:#D9D2C7;--on-dark3:#B9B2A6;--dline:rgba(247,241,232,.13);--dline2:rgba(247,241,232,.22);
  --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(20,26,36,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--dline);border-top:3px solid var(--orange);color:var(--on-dark)}
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:var(--on-dark)}
.brand img{width:32px;height:32px;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
/* 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(--on-dark2);white-space:nowrap}
.topnav a:hover{color:var(--orange3)}
@media (max-width:900px){.topnav{display:none}}
.secure{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--on-dark2);font-weight:500;border:1px solid var(--dline2);background:rgba(247,241,232,.06);border-radius:99px;padding:6px 11px}
.secure svg{width:14px;height:14px;color:var(--orange3)}
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],[data-needs-adam]{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,[data-needs-adam]::after{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:linear-gradient(180deg,#F08A3E,#DD6E22);color:#fff;font-weight:700;font-size:14px;border-radius:999px;padding:10px 18px;text-decoration:none;white-space:nowrap;box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 6px 16px -4px rgba(232,121,43,.6);transition:transform .15s}
.hcta:hover{transform:translateY(-1px)}
.hcta:active{transform:translateY(1px)}
/* 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:400px){.brand{font-size:14px;gap:8px}.brand img{width:30px;height:30px}.hcta{font-size:12.5px;padding:9px 12px}}
@media (max-width:360px){.brand span{display:none}}
footer{margin-top:auto;background:var(--base);color:var(--on-dark3);border-top:1px solid var(--dline);padding:34px 0 calc(30px + env(safe-area-inset-bottom));font-size:13px}
/* 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(--on-dark);margin-bottom:12px}
footer .fcol a{display:block;text-decoration:none;font-weight:600;color:var(--on-dark2);margin-bottom:8px}
footer .fcol a:hover{color:var(--orange3)}
footer .fcol .brand{display:inline-flex;margin-bottom:12px;font-size:16px;color:var(--on-dark)}
footer .fcol .brand img{filter:none}
footer .fcol p{margin-bottom:10px;max-width:460px;color:var(--on-dark2)}
footer .fmute{color:var(--on-dark3)!important}
footer .frule{height:1px;background:var(--dline);margin:0 0 16px}
footer .copy{color:var(--on-dark2)}
@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(--on-dark2)}
footer .links a:hover{color:var(--orange3)}
footer p{max-width:900px;line-height:1.6}
footer .copy{margin-top:10px}

[data-needs-pinnacle]::after{content:"NEEDS PINNACLE"}
[data-needs-adam]::after{content:"NEEDS ADAM"}
html.demo [data-needs-pinnacle],html.demo [data-needs-adam]{outline:0!important;background:none!important;padding:0}
html.demo [data-needs-pinnacle]::after,html.demo [data-needs-adam]::after{content:"Sample";background:var(--sand2);color:var(--muted);font-size:9px}