/* =========================================================================
   BuyTides — Privacy Policy page (/privacy-policy/, page 3)
   =========================================================================

   Scoped entirely to `.pp-page`, the wrapper in templates/page-privacy-policy.html.

   Ported from the design bundle buytides-privacy-policy.html. The rules below
   are the design's own stylesheet with every selector prefixed by `.pp-page`;
   the design's `html, body` rules land on the wrapper instead. The page
   markup itself is one Custom HTML block on the page and carries the design's
   inline styles unchanged, apart from the brand navy (#0b2c4d -> #2b3754).
   ========================================================================= */

.pp-page,
.pp-page *,
.pp-page *::before,
.pp-page *::after { box-sizing: border-box; }

.pp-page {
	margin: 0;
	padding: 0;
	background: #fff;
	font-family: Inter, system-ui, sans-serif;
	font-size: 16px;
	line-height: normal;
	color: #2b3754;
	-webkit-font-smoothing: antialiased;
}

/* Twenty Twenty-Five's block gap: clear it on the wrapper and on the post
   content's children, so the hero sits flush under the header and the
   sections stack exactly as the design does. */
.wp-site-blocks > .pp-page,
.pp-page .wp-block-post-content,
.pp-page .wp-block-post-content > * { margin-block: 0; }

.pp-page a { color: #1B7FA8; text-decoration: none; }
.pp-page a:hover { color: #2b3754; }
.pp-page ::selection { background: #6FE4F2; color: #2b3754; }
.pp-page h1, .pp-page h2, .pp-page h3 { font-family: Outfit, sans-serif; font-weight: 600; letter-spacing: -.028em; margin: 0; text-wrap: balance; }
.pp-page p { margin: 0; text-wrap: pretty; }
.pp-page .pp-wrap { max-width: none; margin: 0; padding: 0 clamp(20px, 4vw, 48px); }
.pp-page .pp-kick { font-family: Outfit, sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #1B7FA8; }
.pp-page .pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 24px; border: 0; border-radius: 12px; background: #2b3754; color: #fff; font-family: Outfit, sans-serif; font-size: 16px; font-weight: 600; cursor: pointer; transition: background .15s ease; }
.pp-page .pp-btn:hover { background: #12406C; color: #fff; }
.pp-page .pp-btn-cy { background: #61DDEB; color: #2b3754; }
.pp-page .pp-btn-cy:hover { background: #3ECFE0; color: #2b3754; }
.pp-page .pp-layout { display: block; padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(48px, 6vw, 80px); }
.pp-page .pp-sec { padding-top: clamp(32px, 3.6vw, 48px); scroll-margin-top: 24px; }
.pp-page .pp-sec h2 { font-size: clamp(21px, 2.1vw, 27px); line-height: 1.18; margin-bottom: 14px; }
.pp-page .pp-sec p { font-size: 15.5px; line-height: 1.72; color: #4B6479; max-width: none; margin-bottom: 14px; }
.pp-page .pp-sec ul { margin: 0 0 14px; padding-left: 20px; }
.pp-page .pp-sec li { font-size: 15.5px; line-height: 1.72; color: #4B6479; max-width: none; margin-bottom: 9px; }
.pp-page .pp-sec strong { color: #2b3754; font-weight: 600; }
.pp-page .pp-sec h3 { font-size: 17px; line-height: 1.35; margin: 22px 0 10px; }
.pp-page .pp-table { width: 100%; border-collapse: collapse; margin: 4px 0 16px; }
.pp-page .pp-table th { text-align: left; font-family: Outfit, sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #1B7FA8; padding: 10px 14px; background: #EAF9FC; }
.pp-page .pp-table td { font-size: 14.5px; line-height: 1.6; color: #4B6479; padding: 14px; border-bottom: 1px solid #E4EDF2; vertical-align: top; }
.pp-page .pp-note { border-left: 3px solid #61DDEB; background: #F4F7F9; border-radius: 0 12px 12px 0; padding: 20px 22px; margin-bottom: 16px; }
.pp-page .pp-note p:last-child { margin-bottom: 0; }

/* Not in the design: its closing "Your choices" band keeps two columns at every
   width, which squeezes both buttons into a ~145px column on a phone. Stack it.
   !important because the columns are an inline style on the element. */
@media (max-width: 760px) {
	.pp-page .pp-cta-grid { grid-template-columns: 1fr !important; }
}
