/* ═══════════════════════════════════════════
   PRIVACY POLICY — DESIGN TOKENS
   Reusing Yogneeti design system
   ═══════════════════════════════════════════ */
:root {
    --cream: #F9F8F2;
    --sage-green: #8A9A90;
    --charcoal: #2C2C2C;
    --dark-rust: #5C4033;
    --stone: #E6E4DD;

    --glass-bg: rgba(249, 248, 242, 0.25);
    --glass-border: 1px solid rgba(255, 255, 255, 0.3);

    --fs-display: clamp(2.5rem, 5vw + 1rem, 4.5rem);
    --fs-h2: clamp(1.5rem, 2.5vw + 0.5rem, 2.5rem);
    --fs-body: clamp(0.95rem, 0.8vw + 0.4rem, 1.125rem);
    --fs-small: clamp(0.8rem, 0.6vw + 0.3rem, 0.9rem);

    --rhythm-unit: clamp(4rem, 2rem + 5.5vw, 8rem);  /* matches style.css */
    --gutter: clamp(1rem, 2vw, 2rem);

    --ease-exhale: cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-slow: all 0.8s var(--ease-exhale);
}


/* ═══════════════════════════════════════════
   RESET
   ═══════════════════════════════════════════ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body {
    font-family: 'Lato', 'Geist', sans-serif;
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--charcoal);
    background: var(--cream);
    overflow-x: clip;
}

/* Paper texture overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background: url('PageWiseAssets/Texture.webp') repeat;
    background-size: 600px;
    opacity: 0.12;
    mix-blend-mode: multiply;
}

h1,
h2,
h3,
h4 {
    font-family: 'Playfair Display', 'Editorial New', serif;
    font-weight: 500;
    line-height: 1.15;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

button {
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
    color: inherit;
}

/* Nav styles inherited from style.css — no overrides needed */



/* ═══════════════════════════════════════════
   PRIVACY POLICY CONTENT
   ═══════════════════════════════════════════ */
.policy {
    max-width: 780px;
    margin: 0 auto;
    padding: calc(var(--rhythm-unit) + 4rem) var(--gutter) var(--rhythm-unit);
}

.policy__header {
    margin-bottom: clamp(3rem, 6vw, 5rem);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1s var(--ease-exhale) 0.3s forwards;
}

.policy__title {
    font-size: var(--fs-display);
    color: var(--charcoal);
    margin-bottom: 1.5rem;
}

.policy__intro {
    font-size: var(--fs-body);
    color: rgba(44, 44, 44, 0.7);
    line-height: 1.7;
    max-width: 60ch;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.policy__section {
    margin-bottom: clamp(2rem, 4vw, 3rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.8s var(--ease-exhale), transform 0.8s var(--ease-exhale);
}

.policy__section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.policy__section:last-child {
    /* The border went, but its margin and padding stayed — up to 6rem of
       separation below the final paragraph, separating it from nothing, and
       then stacking on .policy's own bottom pad and the footer's top pad.
       Measured 334px of empty run below the last line at 1440x900. */
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.policy__heading {
    font-size: var(--fs-h2);
    color: var(--charcoal);
    margin-bottom: 1rem;
    font-weight: 500;
}

.policy__number {
    color: var(--sage-deep, #5A6457);
    font-weight: 600;
    margin-right: 0.3em;
}

.policy__section p {
    color: rgba(44, 44, 44, 0.7);
    line-height: 1.7;
    margin-bottom: 1rem;
    max-width: 65ch;
}

.policy__list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;
}

.policy__list li {
  max-width: var(--measure, 68ch); margin-inline: auto;
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    color: rgba(44, 44, 44, 0.7);
    line-height: 1.7;
}

/* Sage-green bullet */
.policy__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sage-green);
    opacity: 0.5;
}

.policy__link {
    color: var(--dark-rust);
    border-bottom: 1px solid transparent;
    transition: border-color 0.4s var(--ease-exhale);
}

.policy__link:hover {
    border-bottom-color: var(--dark-rust);
}


/* ═══════════════════════════════════════════
   FOOTER — intentionally not defined here.
   ═══════════════════════════════════════════
   Same stale duplicate that faq.css carried: a pre-2026-08-05 snapshot of
   style.css that pinned the grid to three columns while the markup ships
   four, so the Connect column wrapped onto its own row on both legal pages.

   The footer is styled in ONE place — style.css, "FOOTER" section.
   Do not redeclare .footer or .footer__* in any per-page stylesheet;
   override a token (--footer-rule, --footer-legal-ink) instead.
   Removed 2026-08-07. */


/* ═══════════════════════════════════════════════
   BENEDICTION — Fixed behind all page content
   ═══════════════════════════════════════════════ */
.page-content {
    position: relative;
    z-index: 1;
    background: var(--cream);
}

.benediction-spacer {
    height: var(--benediction-h, 400px);
    pointer-events: none;
}

.benediction {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background: var(--charcoal);
    color: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(4rem, 8vw, 6rem) 2rem;
    min-height: 50svh;
}

.benediction__inner {
    max-width: 900px;
    width: 100%;
    text-align: center;
}

.benediction__sanskrit {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.benediction__verse {
    font-family: 'Noto Sans Devanagari', sans-serif;
    font-size: clamp(1.15rem, 2.2vw, 1.6rem);
    font-weight: 700;
    color: var(--cream);
    line-height: 1.8;
    margin: 0;
}

.benediction__translations {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
}

.benediction__transliteration {
    font-family: 'Playfair Display', serif;
    font-size: clamp(0.8rem, 1.1vw, 0.95rem);
    font-style: italic;
    color: rgba(249, 248, 242, 0.65);
    line-height: 1.7;
    margin: 0;
}

.benediction__meaning {
    font-family: 'Lato', sans-serif;
    font-size: clamp(0.8rem, 1.1vw, 0.95rem);
    color: rgba(249, 248, 242, 0.65);
    line-height: 1.7;
    margin: 0;
}

.benediction__meaning--closing {
    margin-top: 1rem;
    font-style: italic;
    color: #8FA39A;
}

@media (min-width: 768px) {
    .benediction__translations {
        grid-template-columns: 1fr 1fr;
        gap: clamp(2rem, 4vw, 4rem);
        text-align: left;
    }

    .benediction__col:last-child {
        text-align: right;
    }
}


/* Reduced motion — see style.css for the authoritative sitewide block.
   Repeated here so this stylesheet is self-consistent if loaded alone. */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Focus — keyboard affordance for this page's interactive elements. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sage-deep, #5A6457);
  outline-offset: 3px;
}