Add privacy modal

styles.css

@@ -543,6 +543,32 @@ button {
   text-transform: uppercase;
 }
 
+.footer__privacy-button {
+  width: fit-content;
+  margin-top: 0.9rem;
+  padding: 0.45rem 0.85rem;
+  border: 1px solid rgba(47, 58, 24, 0.2);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--text-dark);
+  font-size: 0.82rem;
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition:
+    background 180ms ease,
+    border-color 180ms ease,
+    transform 180ms ease;
+}
+
+.footer__privacy-button:hover,
+.footer__privacy-button:focus-visible {
+  background: rgba(47, 58, 24, 0.08);
+  border-color: rgba(47, 58, 24, 0.34);
+  transform: translateY(-1px);
+}
+
 .footer__claim {
   display: flex;
   flex-direction: column;
@@ -691,6 +717,90 @@ button {
   background: #ef49ae;
 }
 
+.privacy-flyover {
+  position: fixed;
+  inset: 0;
+  z-index: 21;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.privacy-flyover__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(24, 27, 18, 0.44);
+  backdrop-filter: blur(3px);
+}
+
+.privacy-flyover__panel {
+  position: relative;
+  width: min(680px, calc(100vw - 2rem));
+  max-height: calc(100vh - 2rem);
+  margin: 2rem auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 2rem;
+  border-radius: var(--radius-panel);
+  background: var(--bg-light);
+  box-shadow: var(--shadow-panel);
+}
+
+.privacy-flyover__close {
+  position: absolute;
+  top: 0.9rem;
+  right: 0.9rem;
+  width: 2.4rem;
+  height: 2.4rem;
+  border: 0;
+  border-radius: 999px;
+  background: rgba(47, 58, 24, 0.08);
+  color: var(--text-dark);
+  cursor: pointer;
+}
+
+.privacy-flyover__eyebrow {
+  margin: 0 0 0.4rem;
+  font-size: 0.95rem;
+  font-weight: var(--font-weight-bold);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: rgba(54, 65, 33, 0.72);
+}
+
+.privacy-flyover h2 {
+  margin: 0;
+  padding-right: 2.75rem;
+  font-size: clamp(1.85rem, 3vw, 2.6rem);
+  line-height: 0.96;
+  font-weight: var(--font-weight-black);
+  text-transform: uppercase;
+}
+
+.privacy-flyover__content {
+  display: grid;
+  gap: 1rem;
+  margin-top: 1.4rem;
+}
+
+.privacy-flyover__content p,
+.privacy-flyover__responsible p {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.55;
+}
+
+.privacy-flyover__responsible {
+  display: grid;
+  gap: 0.35rem;
+  padding: 1rem;
+  border-radius: var(--radius-small);
+  background: #edf1cc;
+}
+
+.privacy-flyover__responsible a {
+  color: inherit;
+}
+
 [hidden] {
   display: none !important;
 }
@@ -880,6 +990,11 @@ button {
     gap: 0.5rem;
   }
 
+  .footer__privacy-button {
+    margin-top: 0.35rem;
+    font-size: 0.78rem;
+  }
+
   .footer__claim-meta {
     align-items: flex-start;
     margin-top: 1.15rem;
@@ -963,4 +1078,43 @@ button {
     padding: 0.8rem 1rem;
     font-size: 0.95rem;
   }
+
+  .privacy-flyover__panel {
+    width: calc(100vw - 2.5rem);
+    max-height: calc(100dvh - 2.5rem);
+    margin: 1.25rem auto;
+    padding: 1.2rem;
+    border-radius: 2rem;
+  }
+
+  .privacy-flyover__close {
+    top: 0.8rem;
+    right: 0.8rem;
+    width: 2rem;
+    height: 2rem;
+    font-size: 1.5rem;
+  }
+
+  .privacy-flyover__eyebrow {
+    margin-bottom: 0.25rem;
+    font-size: 0.8rem;
+    letter-spacing: 0.07em;
+  }
+
+  .privacy-flyover h2 {
+    font-size: clamp(1.3rem, 6vw, 1.7rem);
+    line-height: 1.05;
+    text-transform: none;
+  }
+
+  .privacy-flyover__content {
+    gap: 0.85rem;
+    margin-top: 1rem;
+  }
+
+  .privacy-flyover__content p,
+  .privacy-flyover__responsible p {
+    font-size: 0.95rem;
+    line-height: 1.5;
+  }
 }