/* ==========================================================================
   DeshipOS — Privacy Policy widget
   Centered intro header + sticky table-of-contents with scrollspy & reading
   progress + clean reading column + questions card. Mobile-first.
   Depends on assets/css/base.css for design tokens.
   ========================================================================== */

.deshipos-privacy {
	--dpp-accent:     var(--dew-brand, #16A34A);
	--dpp-accent-2:   var(--dew-brand-strong, #15803D);
	--dpp-soft:       var(--dew-brand-soft, rgba(22, 163, 74, .12));
	--dpp-bg:         var(--dew-bg, #FFFFFF);
	--dpp-surface:    var(--dew-surface, #F8FAFC);
	--dpp-surface-2:  var(--dew-surface-2, #F1F5F9);
	--dpp-divider:    var(--dew-divider, #E2E8F0);
	--dpp-ink:        var(--dew-ink, #0F172A);
	--dpp-text:       var(--dew-text, #1E293B);
	--dpp-muted:      var(--dew-muted, #475569);
	--dpp-faint:      var(--dew-faint, #94A3B8);

	--dpp-offset:     96px;

	color: var(--dpp-text);
	width: 100%;
	padding-top: 72px;
	padding-bottom: 72px;
	box-sizing: border-box;
	position: relative;
}

.deshipos-privacy *,
.deshipos-privacy *::before,
.deshipos-privacy *::after { box-sizing: border-box; }

.deshipos-privacy__inner {
	--dpp-container-w: 1140px;
	--dpp-sidebar-w:   260px;
	width: 100%;
	max-width: var(--dpp-container-w);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--dew-space-4);
	padding-right: var(--dew-space-4);
}

/* ==========================================================================
   Intro header
   ========================================================================== */
.deshipos-privacy__head {
	max-width: 760px;
	margin: 0 auto var(--dew-space-10);
	text-align: center;
}
.deshipos-privacy__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--dpp-accent-2);
	background: var(--dpp-soft);
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: var(--dew-space-4);
}
.deshipos-privacy__eyebrow svg { flex: none; }
.deshipos-privacy__title {
	font-size: clamp(30px, 5vw, 46px);
	line-height: 1.12;
	letter-spacing: var(--dew-tracking-tight);
	color: var(--dpp-ink);
	margin: 0 0 var(--dew-space-4);
	font-weight: 800;
}
.deshipos-privacy__subtitle {
	font-size: clamp(16px, 2vw, 18px);
	line-height: 1.65;
	color: var(--dpp-muted);
	margin: 0 auto;
	max-width: 620px;
}
.deshipos-privacy__updated {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: var(--dew-space-6) 0 0;
	padding: 7px 16px;
	font-size: 14px;
	font-weight: 500;
	color: var(--dpp-muted);
	background: var(--dpp-surface);
	border: 1px solid var(--dpp-divider);
	border-radius: 999px;
}
.deshipos-privacy__updated svg { color: var(--dpp-accent); flex: none; }
.deshipos-privacy__updated-label { color: var(--dpp-faint); }
.deshipos-privacy__updated-date { color: var(--dpp-ink); font-weight: 700; }

/* ==========================================================================
   Layout grid
   ========================================================================== */
.deshipos-privacy__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--dew-space-10);
	/* Equal-height columns give position: sticky room to travel. */
	align-items: stretch;
}
.deshipos-privacy.has-toc .deshipos-privacy__layout {
	grid-template-columns: var(--dpp-sidebar-w) minmax(0, 1fr);
}

/* ==========================================================================
   Table of contents
   ========================================================================== */
.deshipos-privacy__toc { min-width: 0; }
.deshipos-privacy.is-sticky .deshipos-privacy__toc-inner {
	position: sticky;
	top: var(--dpp-offset);
	max-height: calc(100vh - var(--dpp-offset) - 24px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 4px;
}
.deshipos-privacy__toc-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--dpp-faint);
	margin: 0 0 var(--dew-space-3);
}

/* Reading progress */
.deshipos-privacy__progress {
	position: relative;
	height: 4px;
	border-radius: 999px;
	background: var(--dpp-surface-2);
	overflow: hidden;
	margin-bottom: var(--dew-space-5);
}
.deshipos-privacy__progress-fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0%;
	border-radius: 999px;
	background: var(--dew-brand-gradient, linear-gradient(135deg, #16A34A 0%, #22C55E 100%));
	transition: width 120ms linear;
}

/* TOC list */
.deshipos-privacy__toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 2px solid var(--dpp-divider);
	counter-reset: none;
}
.deshipos-privacy__toc-link {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 8px 12px;
	margin-left: -2px;
	border-left: 2px solid transparent;
	font-size: 14px;
	line-height: 1.4;
	color: var(--dpp-muted);
	text-decoration: none;
	border-radius: 0 8px 8px 0;
	transition: color var(--dew-dur-fast) var(--dew-ease-out),
	            border-color var(--dew-dur-fast) var(--dew-ease-out),
	            background var(--dew-dur-fast) var(--dew-ease-out);
}
.deshipos-privacy__toc-num {
	flex: none;
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--dpp-faint);
	min-width: 1.2em;
	transition: color var(--dew-dur-fast) var(--dew-ease-out);
}
.deshipos-privacy__toc-text { min-width: 0; }
.deshipos-privacy__toc-link:hover {
	color: var(--dpp-ink);
	background: var(--dpp-surface);
}
.deshipos-privacy__toc-link.is-active {
	color: var(--dpp-accent-2);
	border-left-color: var(--dpp-accent);
	background: var(--dpp-soft);
	font-weight: 600;
}
.deshipos-privacy__toc-link.is-active .deshipos-privacy__toc-num { color: var(--dpp-accent-2); }

/* Mobile contents toggle (hidden on desktop) */
.deshipos-privacy__toc-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 16px;
	margin-bottom: var(--dew-space-5);
	font-size: 15px;
	font-weight: 600;
	color: var(--dpp-ink);
	background: var(--dpp-surface);
	border: 1px solid var(--dpp-divider);
	border-radius: 12px;
	cursor: pointer;
}
.deshipos-privacy__toc-toggle svg { color: var(--dpp-accent); flex: none; }

/* ==========================================================================
   Content / reading column
   ========================================================================== */
.deshipos-privacy__content { min-width: 0; max-width: 760px; }

.deshipos-privacy__section {
	padding: var(--dew-space-8) 0;
	scroll-margin-top: calc(var(--dpp-offset) + 16px);
}
.deshipos-privacy__section:first-child { padding-top: 0; }
.deshipos-privacy__section + .deshipos-privacy__section {
	border-top: 1px solid var(--dpp-divider);
}

.deshipos-privacy__section-title {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: clamp(21px, 2.6vw, 27px);
	line-height: 1.25;
	letter-spacing: var(--dew-tracking-snug);
	color: var(--dpp-ink);
	font-weight: 700;
	margin: 0 0 var(--dew-space-4);
}
/* Numbered badge (when numbering is on) */
.deshipos-privacy__section-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 10px;
	background: var(--dpp-soft);
	color: var(--dpp-accent-2);
	font-size: 16px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
/* Icon badge (when numbering is off) */
.deshipos-privacy__section-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 10px;
	background: var(--dpp-soft);
	color: var(--dpp-accent-2);
	font-size: 19px;
}
.deshipos-privacy__section-icon svg,
.deshipos-privacy__section-icon i { width: 19px; height: 19px; font-size: 19px; }
.deshipos-privacy__section-text { flex: 1; min-width: 0; }

.deshipos-privacy__anchor {
	flex: none;
	color: var(--dpp-faint);
	text-decoration: none;
	font-weight: 700;
	opacity: 0;
	transition: opacity var(--dew-dur-fast) var(--dew-ease-out), color var(--dew-dur-fast) var(--dew-ease-out);
}
.deshipos-privacy__section-title:hover .deshipos-privacy__anchor { opacity: 1; }
.deshipos-privacy__anchor:hover { color: var(--dpp-accent); }

/* ----- Prose (WYSIWYG content) ----- */
.deshipos-privacy__prose {
	font-size: 16px;
	line-height: 1.75;
	color: var(--dpp-text);
}
/* Indent prose to align with the section title text when a badge is present. */
.deshipos-privacy.is-numbered .deshipos-privacy__prose,
.deshipos-privacy__section-title:has(.deshipos-privacy__section-icon) + .deshipos-privacy__prose {
	padding-left: 52px;
}
.deshipos-privacy__prose > *:first-child { margin-top: 0; }
.deshipos-privacy__prose > *:last-child { margin-bottom: 0; }
.deshipos-privacy__prose p { margin: 0 0 var(--dew-space-4); }
.deshipos-privacy__prose h2,
.deshipos-privacy__prose h3,
.deshipos-privacy__prose h4 {
	color: var(--dpp-ink);
	line-height: 1.3;
	margin: var(--dew-space-6) 0 var(--dew-space-3);
	font-weight: 700;
}
.deshipos-privacy__prose h2 { font-size: 20px; }
.deshipos-privacy__prose h3 { font-size: 18px; }
.deshipos-privacy__prose h4 { font-size: 16px; }
.deshipos-privacy__prose ul,
.deshipos-privacy__prose ol {
	margin: 0 0 var(--dew-space-4);
	padding-left: 1.3em;
}
.deshipos-privacy__prose li { margin-bottom: var(--dew-space-2); padding-left: 4px; }
.deshipos-privacy__prose li::marker { color: var(--dpp-accent); }
.deshipos-privacy__prose a {
	color: var(--dpp-accent-2);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.deshipos-privacy__prose a:hover { color: var(--dpp-accent); }
.deshipos-privacy__prose strong { color: var(--dpp-ink); font-weight: 700; }
.deshipos-privacy__prose code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .9em;
	background: var(--dpp-surface-2);
	color: var(--dpp-accent-2);
	padding: .15em .4em;
	border-radius: 6px;
}
.deshipos-privacy__prose blockquote {
	margin: 0 0 var(--dew-space-4);
	padding: var(--dew-space-3) var(--dew-space-5);
	border-left: 3px solid var(--dpp-accent);
	background: var(--dpp-surface);
	border-radius: 0 8px 8px 0;
	color: var(--dpp-muted);
}
.deshipos-privacy__prose blockquote p:last-child { margin-bottom: 0; }
.deshipos-privacy__prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--dew-space-4);
	font-size: 15px;
}
.deshipos-privacy__prose th,
.deshipos-privacy__prose td {
	text-align: left;
	padding: 10px 12px;
	border: 1px solid var(--dpp-divider);
}
.deshipos-privacy__prose th { background: var(--dpp-surface); font-weight: 700; color: var(--dpp-ink); }

/* ==========================================================================
   Questions / contact card
   ========================================================================== */
.deshipos-privacy__contact {
	display: flex;
	align-items: center;
	gap: var(--dew-space-5);
	margin-top: var(--dew-space-10);
	padding: var(--dew-space-6);
	background: var(--dpp-surface);
	border: 1px solid var(--dpp-divider);
	border-radius: 16px;
	position: relative;
	overflow: hidden;
}
.deshipos-privacy__contact::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--dew-brand-gradient, linear-gradient(135deg, #16A34A 0%, #22C55E 100%));
}
.deshipos-privacy__contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex: none;
	border-radius: 14px;
	background: var(--dpp-soft);
	color: var(--dpp-accent-2);
}
.deshipos-privacy__contact-body { flex: 1; min-width: 0; }
.deshipos-privacy__contact-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--dpp-ink);
	margin: 0 0 4px;
}
.deshipos-privacy__contact-text {
	font-size: 15px;
	line-height: 1.55;
	color: var(--dpp-muted);
	margin: 0;
}
.deshipos-privacy__contact-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	padding: 12px 20px;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	background: var(--dpp-accent);
	border-radius: 12px;
	text-decoration: none;
	box-shadow: var(--dew-shadow-sm);
	transition: background var(--dew-dur-fast) var(--dew-ease-out),
	            transform var(--dew-dur-fast) var(--dew-ease-out),
	            box-shadow var(--dew-dur-base) var(--dew-ease-out);
}
.deshipos-privacy__contact-btn svg { transition: transform var(--dew-dur-base) var(--dew-ease-out); }
.deshipos-privacy__contact-btn:hover {
	background: var(--dpp-accent-2);
	transform: translateY(-1px);
	box-shadow: var(--dew-shadow-md);
}
.deshipos-privacy__contact-btn:hover svg { transform: translateX(3px); }

/* ==========================================================================
   Back to top
   ========================================================================== */
.deshipos-privacy__top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: var(--dpp-accent);
	border: 0;
	border-radius: 50%;
	box-shadow: var(--dew-shadow-lg);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--dew-dur-base) var(--dew-ease-out),
	            transform var(--dew-dur-base) var(--dew-ease-out),
	            visibility var(--dew-dur-base) var(--dew-ease-out),
	            background var(--dew-dur-fast) var(--dew-ease-out);
	z-index: 40;
}
.deshipos-privacy__top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.deshipos-privacy__top:hover { background: var(--dpp-accent-2); }

/* ==========================================================================
   Scroll reveal — active only when JS adds `.js-reveal` (content visible
   without JS). Per-element transition-delay (inline) staggers blocks.
   ========================================================================== */
.deshipos-privacy.js-reveal [data-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .6s var(--dew-ease-out), transform .6s var(--dew-ease-out);
	will-change: opacity, transform;
}
.deshipos-privacy.js-reveal [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   Responsive — contents becomes a collapsible drawer
   ========================================================================== */
@media (max-width: 880px) {
	.deshipos-privacy.has-toc .deshipos-privacy__layout {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.deshipos-privacy__toc-toggle { display: flex; }
	.deshipos-privacy.is-sticky .deshipos-privacy__toc-inner {
		position: static;
		max-height: none;
		overflow: visible;
	}
	.deshipos-privacy__toc {
		display: none;
		padding: var(--dew-space-5);
		margin-bottom: var(--dew-space-6);
		background: var(--dpp-surface);
		border: 1px solid var(--dpp-divider);
		border-radius: 14px;
	}
	.deshipos-privacy__toc.is-open { display: block; }
	.deshipos-privacy__content { max-width: none; }
}

@media (max-width: 560px) {
	.deshipos-privacy { padding-top: 48px; padding-bottom: 48px; }
	.deshipos-privacy__contact {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
	.deshipos-privacy__contact-btn { width: 100%; justify-content: center; }
	.deshipos-privacy.is-numbered .deshipos-privacy__prose,
	.deshipos-privacy__section-title:has(.deshipos-privacy__section-icon) + .deshipos-privacy__prose {
		padding-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.deshipos-privacy *,
	.deshipos-privacy *::before,
	.deshipos-privacy *::after {
		transition-duration: .01ms !important;
	}
	.deshipos-privacy.js-reveal [data-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}