/* ==========================================================================
   OIB Privacy Policy — clean modern docs layout
   • Soft gradient background
   • Calm hero with crisp image card
   • Sticky "On this page" TOC sidebar with scroll-spy
   • Numbered, anchor-linked section cards
   ========================================================================== */

.oib-pp {
	--oib-pp-pt: 96px;
	--oib-pp-pb: 96px;
	--oib-pp-top: 100px;                 /* sticky offset from viewport top */
	--oib-pp-primary: var(--oib-primary, #7E5D74);
	--oib-pp-primary-dark: var(--oib-primary-dark, #6A4960);
	--oib-pp-primary-light: var(--oib-primary-light, #917388);
	--oib-pp-ink: #0b1220;
	--oib-pp-ink-soft: #334155;
	--oib-pp-muted: #64748b;
	--oib-pp-line: rgba(15, 23, 42, 0.08);
	--oib-pp-surface: #ffffff;

	position: relative;
	/* IMPORTANT: do NOT use overflow:hidden here — it breaks position:sticky. */
	padding: var(--oib-pp-pt) 24px var(--oib-pp-pb);
	background:
		radial-gradient(1100px 520px at 12% -10%, rgba(126, 93, 116, 0.10), transparent 60%),
		radial-gradient(900px 480px at 105% 8%, rgba(145, 115, 136, 0.08), transparent 60%),
		linear-gradient(180deg, #faf7f9 0%, #f5f8fc 50%, #ffffff 100%);
	font-family: var(--oib-font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	color: var(--oib-pp-ink-soft);
	-webkit-font-smoothing: antialiased;
}

.oib-pp__inner {
	position: relative;
	margin: 0 auto;
}

.oib-pp__inner--narrow { max-width: 1180px; }
.oib-pp__inner--wide   { max-width: 1320px; }

/* ==========================================================================
   Hero — clean split layout, no clutter
   ========================================================================== */

.oib-pp__hero {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: 64px;
	align-items: center;
	margin-bottom: 72px;
}

.oib-pp__hero-text { min-width: 0; }

/* ---- Eyebrow pill ---- */
.oib-pp__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 22px;
	padding: 7px 14px 7px 12px;
	border-radius: 999px;
	background: rgba(126, 93, 116, 0.08);
	border: 1px solid rgba(126, 93, 116, 0.15);
	color: var(--oib-pp-primary);
	font-family: var(--oib-font-heading, "Satoshi", "Inter", sans-serif);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
}

.oib-pp__eyebrow-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--oib-pp-primary);
}

/* ---- Heading + subtitle ---- */
.oib-pp__heading {
	margin: 0 0 20px;
	color: var(--oib-pp-ink);
	font-family: var(--oib-font-heading, "Satoshi", "Inter", sans-serif);
	font-size: clamp(34px, 4.6vw, 56px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.028em;
}

.oib-pp__subtitle {
	margin: 0 0 28px;
	color: var(--oib-pp-ink-soft);
	font-size: clamp(16px, 1.15vw, 18.5px);
	line-height: 1.7;
	max-width: 60ch;
}

/* ---- Meta pill ---- */
.oib-pp__meta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--oib-pp-surface);
	border: 1px solid var(--oib-pp-line);
	color: var(--oib-pp-muted);
	font-size: 13.5px;
	font-weight: 500;
	box-shadow: 0 6px 18px -10px rgba(15, 23, 42, 0.10);
}

.oib-pp__meta i {
	color: var(--oib-pp-primary);
	font-size: 13px;
}

/* ---- Hero image — clean layered card stack (frame + badge) ---- */
.oib-pp__hero-media {
	position: relative;
	margin: 0 22px 22px 0;            /* room for offset frame to peek out */
	aspect-ratio: 5 / 5.4;            /* taller, slightly portrait */
	min-height: 460px;
	border-radius: 14px;
	background: #eef2f7;
	box-shadow: 0 12px 30px -18px rgba(15, 23, 42, 0.14);
	isolation: isolate;
}

/* Soft offset frame — peeks out behind the image card. */
.oib-pp__hero-media::before {
	content: "";
	position: absolute;
	inset: 22px -22px -22px 22px;
	border-radius: 14px;
	background: rgba(126, 93, 116, 0.08);
	z-index: -1;
	pointer-events: none;
	transition: transform 0.4s ease;
}

.oib-pp__hero-media:hover::before {
	transform: translate(3px, 3px);
}

/* Image clip wrapper — keeps rounded corners. */
.oib-pp__hero-clip {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	overflow: hidden;
}

/* Plain brand-colored rounded square in the bottom-left corner. */


.oib-pp__hero-media:hover .oib-pp__hero-badge {
	transform: translateY(-2px);
}

.oib-pp__hero-badge:empty { font-size: 0; }
.oib-pp__hero-badge svg,
.oib-pp__hero-badge i {
	line-height: 1;
	font-size: inherit;
}

.oib-pp__hero-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

/* Brand-tinted gradient overlay — sits on top of the image, inside the clip. */
.oib-pp__hero-clip::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, rgba(126, 93, 116, 0.45) 0%, rgba(126, 93, 116, 0) 55%),
		linear-gradient(180deg, rgba(11, 18, 32, 0) 55%, rgba(11, 18, 32, 0.35) 100%);
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.oib-pp__hero-media:hover .oib-pp__hero-image {
	transform: scale(1.04);
}

.oib-pp__hero-media:hover .oib-pp__hero-clip::after {
	opacity: 0.85;
}

.oib-pp__hero-media--no-overlay .oib-pp__hero-clip::after { display: none; }

/* Frame off — collapse the margin reserved for the peek. */
.oib-pp__hero-media--no-frame {
	margin-right: 0;
	margin-bottom: 0;
}
.oib-pp__hero-media--no-frame::before { display: none; }

.oib-pp__hero-media--no-badge .oib-pp__hero-badge { display: none; }

/* ==========================================================================
   Layout: TOC sidebar + sections
   ========================================================================== */

.oib-pp__layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

/* ---- TOC: truly sticky ---- */
.oib-pp__toc {
	position: sticky;
	top: var(--oib-pp-top);
	align-self: start;
	z-index: 2;
}

.oib-pp__toc-inner {
	padding: 18px 14px;
	background: var(--oib-pp-surface);
	border: 1px solid var(--oib-pp-line);
	border-radius: 16px;
	box-shadow: 0 16px 36px -24px rgba(15, 23, 42, 0.14);
	max-height: calc(100vh - var(--oib-pp-top) - 32px);
	overflow-y: auto;
}

.oib-pp__toc-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	padding: 0 6px 12px;
	border-bottom: 1px solid var(--oib-pp-line);
	color: var(--oib-pp-ink);
	font-family: var(--oib-font-heading, "Satoshi", "Inter", sans-serif);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
}

.oib-pp__toc-label i {
	color: var(--oib-pp-primary);
}

.oib-pp__toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.oib-pp__toc-item { margin: 0; }

.oib-pp__toc-link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px 9px 14px;
	border-radius: 8px;
	color: var(--oib-pp-muted);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease;
}

.oib-pp__toc-link::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 50%;
	transform: translateY(-50%) scaleY(0.4);
	width: 3px;
	height: 18px;
	border-radius: 3px;
	background: var(--oib-pp-primary);
	opacity: 0;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.oib-pp__toc-link:hover,
.oib-pp__toc-link:focus-visible {
	background: rgba(126, 93, 116, 0.06);
	color: var(--oib-pp-ink);
	outline: none;
}

.oib-pp__toc-link.is-active {
	background: rgba(126, 93, 116, 0.08);
	color: var(--oib-pp-primary-dark);
	font-weight: 600;
}

.oib-pp__toc-link.is-active::before {
	opacity: 1;
	transform: translateY(-50%) scaleY(1);
}

.oib-pp__toc-num {
	flex-shrink: 0;
	min-width: 22px;
	color: var(--oib-pp-primary);
	font-family: var(--oib-font-heading, "Satoshi", "Inter", sans-serif);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.oib-pp__toc-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ==========================================================================
   Sections list
   ========================================================================== */

.oib-pp__sections {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 24px;
}

.oib-pp__item {
	margin: 0;
	padding: 0;
	scroll-margin-top: calc(var(--oib-pp-top) - 4px);
}

/* ---- Card ---- */
.oib-pp__card {
	position: relative;
	background: var(--oib-pp-surface);
	border: 1px solid var(--oib-pp-line);
	border-radius: 18px;
	padding: 32px 36px;
	box-shadow: 0 14px 32px -22px rgba(15, 23, 42, 0.14);
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.oib-pp__card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 28px;
	bottom: 28px;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: linear-gradient(180deg, var(--oib-pp-primary) 0%, var(--oib-pp-primary-light) 100%);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.oib-pp__card:hover {
	transform: translateY(-2px);
	border-color: rgba(126, 93, 116, 0.20);
	box-shadow: 0 22px 44px -22px rgba(15, 23, 42, 0.18);
}

.oib-pp__card:hover::before { opacity: 1; }

.oib-pp__item:target .oib-pp__card,
.oib-pp__item.is-active .oib-pp__card {
	border-color: rgba(126, 93, 116, 0.28);
	box-shadow:
		0 0 0 3px rgba(126, 93, 116, 0.10),
		0 22px 44px -22px rgba(15, 23, 42, 0.18);
}

.oib-pp__item:target .oib-pp__card::before,
.oib-pp__item.is-active .oib-pp__card::before { opacity: 1; }

/* ---- Card head ---- */
.oib-pp__card-head {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 18px;
}

.oib-pp__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(126, 93, 116, 0.10);
	color: var(--oib-pp-primary);
	font-size: 20px;
	line-height: 1;
	flex-shrink: 0;
	transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.oib-pp__card:hover .oib-pp__icon {
	background: var(--oib-pp-primary);
	color: #ffffff;
	transform: scale(1.04);
}

.oib-pp__icon svg {
	width: 1em;
	height: 1em;
	display: block;
	fill: currentColor;
}

.oib-pp__icon i {
	font-size: inherit;
	line-height: 1;
}

.oib-pp__card-titles {
	min-width: 0;
	flex: 1;
}

.oib-pp__step {
	display: inline-block;
	margin-bottom: 4px;
	color: var(--oib-pp-primary);
	font-family: var(--oib-font-heading, "Satoshi", "Inter", sans-serif);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.oib-pp__title {
	margin: 0;
	color: var(--oib-pp-ink);
	font-family: var(--oib-font-heading, "Satoshi", "Inter", sans-serif);
	font-size: clamp(19px, 1.55vw, 23px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.018em;
}

.oib-pp__title-link {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}

.oib-pp__title-anchor {
	color: var(--oib-pp-primary);
	font-weight: 700;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.oib-pp__card:hover .oib-pp__title-anchor,
.oib-pp__title-link:focus-visible .oib-pp__title-anchor {
	opacity: 0.6;
	transform: translateX(0);
}

/* ---- Card body (WYSIWYG content) ---- */
.oib-pp__body {
	color: var(--oib-pp-ink-soft);
	font-size: 15.5px;
	line-height: 1.78;
}

.oib-pp__body > *:first-child { margin-top: 0; }
.oib-pp__body > *:last-child  { margin-bottom: 0; }

.oib-pp__body p { margin: 0 0 14px; }

.oib-pp__body a {
	color: var(--oib-pp-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
	transition: color 0.2s ease;
}

.oib-pp__body a:hover { color: var(--oib-pp-primary-dark); }

.oib-pp__body ul,
.oib-pp__body ol {
	margin: 0 0 14px;
	padding-left: 0;
	list-style: none;
}

.oib-pp__body ul li,
.oib-pp__body ol li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 26px;
}

.oib-pp__body ul li::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 0.72em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--oib-pp-primary);
}

.oib-pp__body ol { counter-reset: oibpp-body; }

.oib-pp__body ol li { counter-increment: oibpp-body; }

.oib-pp__body ol li::before {
	content: counter(oibpp-body);
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	background: rgba(126, 93, 116, 0.10);
	color: var(--oib-pp-primary);
	font-family: var(--oib-font-heading, "Satoshi", "Inter", sans-serif);
	font-size: 11.5px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.oib-pp__body strong {
	color: var(--oib-pp-ink);
	font-weight: 700;
}

.oib-pp__body blockquote {
	margin: 18px 0;
	padding: 14px 20px;
	border-left: 3px solid var(--oib-pp-primary);
	background: rgba(126, 93, 116, 0.05);
	border-radius: 0 12px 12px 0;
	color: var(--oib-pp-ink-soft);
	font-style: italic;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.oib-pp__layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	/* On tablet/mobile, TOC becomes a normal inline block (no sticky). */
	.oib-pp__toc {
		position: relative;
		top: auto;
	}

	.oib-pp__toc-inner {
		max-height: none;
		padding: 16px;
	}

	.oib-pp__toc-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2px;
	}
}

@media (max-width: 960px) {
	.oib-pp__hero {
		grid-template-columns: 1fr;
		gap: 36px;
		margin-bottom: 56px;
	}

	.oib-pp__hero-media {
		order: -1;
		aspect-ratio: 16 / 10;
		min-height: 0;
		max-height: 460px;
		margin: 0 18px 18px 0;
	}

	.oib-pp__hero-media::before { inset: 18px -18px -18px 18px; }

	.oib-pp__subtitle { max-width: none; }
}

@media (max-width: 600px) {
	.oib-pp {
		padding: clamp(56px, 12vw, 80px) 16px clamp(56px, 12vw, 80px);
	}

	.oib-pp__hero {
		gap: 26px;
		margin-bottom: 36px;
	}

	.oib-pp__hero-media {
		aspect-ratio: 16 / 11;
		max-height: 340px;
		border-radius: 12px;
		margin: 0 14px 14px 0;
	}

	.oib-pp__hero-media::before {
		inset: 14px -14px -14px 14px;
		border-radius: 12px;
	}

	.oib-pp__hero-badge {
		width: 44px;
		height: 44px;
		font-size: 17px;
		border-radius: 12px;
		bottom: -12px;
		left: -12px;
	}

	.oib-pp__toc-list { grid-template-columns: 1fr; }

	.oib-pp__sections { gap: 16px; }

	.oib-pp__card {
		padding: 22px;
		border-radius: 14px;
	}

	.oib-pp__card-head {
		gap: 14px;
		margin-bottom: 14px;
	}

	.oib-pp__icon {
		width: 42px;
		height: 42px;
		font-size: 18px;
		border-radius: 10px;
	}

	.oib-pp__title { font-size: 18px; }

	.oib-pp__body {
		font-size: 14.75px;
		line-height: 1.72;
	}

	.oib-pp__title-anchor { display: none; }
}

/* ==========================================================================
   A11y / motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.oib-pp__card,
	.oib-pp__icon,
	.oib-pp__hero-image,
	.oib-pp__toc-link,
	.oib-pp__title-anchor,
	.oib-pp__card::before,
	.oib-pp__toc-link::before { transition: none !important; }
	.oib-pp__card:hover { transform: none; }
	.oib-pp__card:hover .oib-pp__icon { transform: none; }
	.oib-pp__hero-media:hover .oib-pp__hero-image { transform: none; }
	html { scroll-behavior: auto; }
}