/**
 * Privacy Policy — premium SaaS legal page (Stripe / Notion / Linear feel) on a
 * white background with the Doso brand-blue accent system.
 *
 * Hero (title + last-updated + intro banner), two-column body with a sticky
 * Table of Contents, callout notices, reading-progress bar, back-to-top button
 * and a mobile TOC accordion. Behaviour in assets/js/privacy.js.
 *
 * Markup: page-privacy-policy.php
 *
 * @package Doso
 */

.privacy-page{
	/* Brand tokens, with safe fallbacks if the theme vars are absent. */
	--pp-brand:var(--color-primary,#2563eb);
	--pp-brand-d:var(--color-primary-d,#1e3a8a);
	--pp-brand-soft:#eef4ff;
	--pp-brand-tint:#f5f8ff;

	--pp-ink:#4b5563;          /* headings — grey */
	--pp-text:#6b7280;         /* body — grey */
	--pp-muted:#9097a1;        /* meta */
	--pp-line:#e7eaf0;         /* borders */
	--pp-surface:#f7f9fc;      /* light section bg */

	--pp-font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
	--pp-radius:16px;
	--pp-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
	--pp-header-offset:108px;  /* fixed site header (84px) + breathing room */

	background:#fff;
}
/* Smooth anchor scrolling only on this page (scoped to the root scroller). */
:root:has(.privacy-page){scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){:root:has(.privacy-page){scroll-behavior:auto}}
.privacy-page,
.privacy-page h1,.privacy-page h2,.privacy-page h3,.privacy-page h4,
.privacy-page p,.privacy-page li,.privacy-page a,.privacy-page button,.privacy-page span,.privacy-page strong{
	font-family:var(--pp-font);
}

/* ---- Reading-progress bar (fixed at very top) ----------------------------- */
.pp-progress{
	position:fixed;top:0;left:0;right:0;height:3px;z-index:60;
	background:transparent;pointer-events:none;
}
.pp-progress__bar{
	display:block;height:100%;width:0;
	background:linear-gradient(90deg,var(--pp-brand),var(--color-accent,#06b6d4));
	transition:width .1s linear;
}

/* ---- Hero ----------------------------------------------------------------- */
.pp-hero{
	position:relative;overflow:hidden;
	display:flex;flex-direction:column;justify-content:center;
	min-height:clamp(280px,32vh,360px);
	padding-block:clamp(1.5rem,3vw,2rem);
	background:linear-gradient(180deg,var(--pp-brand-tint) 0%,#fff 100%);
	border-bottom:1px solid var(--pp-line);
}
.pp-hero__inner{position:relative;z-index:2;max-width:1180px;text-align:center}

/* ---- "Tech squares" motif — overlapping 45° translucent squares clustered
 * at the right end of the hero, in the four logo blue/cyan shades. ----------- */
.pp-hero__deco{
	position:absolute;top:0;right:0;bottom:0;
	width:min(52%,640px);z-index:1;pointer-events:none;
	/* Fade the cluster out toward the centre so text always stays legible. */
	-webkit-mask-image:linear-gradient(to left,#000 55%,transparent 100%);
	mask-image:linear-gradient(to left,#000 55%,transparent 100%);
}

.pp-square{
	position:absolute;border-radius:8px;opacity:0;transform:rotate(45deg);
	box-shadow:0 8px 22px rgba(30,58,138,.08);
	animation:pp-square-in .9s ease forwards, pp-square-float 9s ease-in-out infinite;
	will-change:transform,opacity;
}

/*
 * Diagonal cascade flowing out of the top-right corner (densest at the corner,
 * thinning toward the centre). Positioned by top/right so the cluster always
 * hugs the corner regardless of hero height; offsets in px, sizes 40–124px.
 * Four shades: deep navy · brand blue · sky blue · cyan (translucent so the
 * overlaps blend like frosted glass).
 */
.pp-square:nth-child(1){--o:.40;top:-34px;right:-30px;width:124px;height:124px;background:rgba(30,58,138,.85);animation-duration:.9s,11s;animation-delay:0s,0s}
.pp-square:nth-child(2){--o:.55;top:14px;right:74px;width:78px;height:78px;background:rgba(6,182,212,.8);animation-duration:.9s,8s;animation-delay:.08s,.5s}
.pp-square:nth-child(3){--o:.45;top:60px;right:-14px;width:100px;height:100px;background:rgba(37,99,235,.8);animation-duration:.9s,10s;animation-delay:.16s,.3s}
.pp-square:nth-child(4){--o:.6;top:-8px;right:168px;width:58px;height:58px;background:rgba(96,165,250,.85);animation-duration:.9s,7.5s;animation-delay:.24s,1.1s}
.pp-square:nth-child(5){--o:.5;top:96px;right:96px;width:72px;height:72px;background:rgba(6,182,212,.7);animation-duration:.9s,9.5s;animation-delay:.32s,.7s}
.pp-square:nth-child(6){--o:.35;top:150px;right:6px;width:92px;height:92px;background:rgba(30,58,138,.8);animation-duration:.9s,12s;animation-delay:.4s,.2s}
.pp-square:nth-child(7){--o:.6;top:42px;right:228px;width:46px;height:46px;background:rgba(37,99,235,.85);animation-duration:.9s,8.5s;animation-delay:.48s,.9s}
.pp-square:nth-child(8){--o:.5;top:128px;right:178px;width:60px;height:60px;background:rgba(96,165,250,.8);animation-duration:.9s,9s;animation-delay:.56s,.4s}
.pp-square:nth-child(9){--o:.55;top:188px;right:96px;width:52px;height:52px;background:rgba(6,182,212,.78);animation-duration:.9s,7s;animation-delay:.64s,1.3s}
.pp-square:nth-child(10){--o:.6;top:8px;right:300px;width:40px;height:40px;background:rgba(96,165,250,.9);animation-duration:.9s,8s;animation-delay:.72s,.6s}
.pp-square:nth-child(11){--o:.45;top:182px;right:212px;width:44px;height:44px;background:rgba(37,99,235,.82);animation-duration:.9s,10.5s;animation-delay:.8s,1s}
.pp-square:nth-child(12){--o:.5;top:120px;right:300px;width:36px;height:36px;background:rgba(6,182,212,.85);animation-duration:.9s,9s;animation-delay:.88s,.15s}

@keyframes pp-square-in{from{opacity:0}to{opacity:var(--o,.5)}}
@keyframes pp-square-float{
	0%,100%{transform:rotate(45deg) translate(0,0)}
	50%{transform:rotate(45deg) translate(0,-14px)}
}
@media(prefers-reduced-motion:reduce){
	.pp-square{animation:pp-square-in .5s ease forwards}
}
@media(max-width:860px){
	.pp-hero__deco{width:62%;transform:scale(.8);transform-origin:top right;opacity:.8}
}
@media(max-width:560px){
	.pp-hero__deco{display:none}   /* keep small screens clean */
}
.pp-hero__eyebrow{
	display:inline-block;margin-bottom:.7rem;padding:.28rem .7rem;border-radius:999px;
	background:var(--pp-brand-soft);color:var(--pp-brand-d);
	font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.pp-hero__title{
	margin:0;color:var(--pp-ink);font-weight:700;line-height:1.1;letter-spacing:-.02em;
	font-size:clamp(1.75rem,3.5vw,2.5rem);       /* 28–40px */
}
.pp-hero__updated{
	display:inline-flex;align-items:center;gap:.4rem;margin:.65rem 0 0;
	color:var(--pp-muted);font-size:.92rem;
}
.pp-hero__updated svg{color:var(--pp-brand)}
.pp-hero__banner{
	margin:1.15rem auto 0;padding:.85rem 1.2rem;border-radius:var(--pp-radius);
	background:var(--pp-brand);color:#fff;font-size:.98rem;line-height:1.55;font-weight:500;
	box-shadow:0 8px 20px rgba(37,99,235,.16);max-width:720px;
}

/* ---- Two-column body ------------------------------------------------------ */
.pp-body{
	max-width:1180px;
	display:grid;
	grid-template-columns:minmax(0,1fr) 280px;
	gap:clamp(1.5rem,4vw,3rem);
	align-items:start;
	padding-block:clamp(1.75rem,3.5vw,2.75rem);
}
.pp-doc--custom{grid-column:1 / -1}

/* ---- Sticky Table of Contents --------------------------------------------- */
.pp-toc{position:sticky;top:var(--pp-header-offset);order:2}
.pp-toc__card{
	background:#fff;border:1px solid var(--pp-line);border-radius:var(--pp-radius);
	box-shadow:var(--pp-shadow);overflow:hidden;
}
.pp-toc__toggle{
	display:flex;align-items:center;justify-content:space-between;width:100%;
	padding:1.1rem 1.25rem;border:0;background:transparent;cursor:default;
	color:var(--pp-ink);
}
.pp-toc__label{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:black}
.pp-toc__chev{display:none;color:var(--pp-muted);transition:transform .25s ease}
.pp-toc__panel{padding:.25rem .6rem 1rem}
.pp-toc__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.pp-toc__list a{
	display:flex;align-items:flex-start;gap:.65rem;padding:.55rem .7rem;border-radius:10px;
	color:black;font-size:1rem;line-height:1.45;font-weight:500;
	text-decoration:none;border-left:2px solid transparent;
	transition:color .18s ease,background .18s ease,border-color .18s ease;
}
.pp-toc__list a:hover,.pp-toc__list a:focus-visible{color:var(--pp-ink);background:var(--pp-surface);text-decoration:none}
.pp-toc__num{
	flex:0 0 auto;width:1.5rem;height:1.5rem;border-radius:7px;
	display:grid;place-items:center;font-size:.8rem;font-weight:700;
	background:var(--pp-surface);color:var(--pp-muted);transition:all .18s ease;
}
.pp-toc__list a.is-active{color:var(--pp-brand-d);background:var(--pp-brand-soft);border-left-color:var(--pp-brand);font-weight:600}
.pp-toc__list a.is-active .pp-toc__num{background:var(--pp-brand);color:#fff}

/* ---- Document content (flat, screenshot-matched typography) --------------- */
.pp-doc{order:1;max-width:920px}
.pp-section{
	padding-block:0;margin-bottom:14px;border:0;
	scroll-margin-top:var(--pp-header-offset);
}

/* Section heading: 18px bold, brand-coloured, with a dot bullet to its left. */
.pp-section__title{
	display:block;position:relative;
	margin:18px 0 12px 18px;
	color:var(--pp-brand);font-weight:700;line-height:1.5;letter-spacing:0;
	font-size:18px;
}
.pp-section__title::before{
	content:"";position:absolute;left:-18px;top:.6em;
	width:8px;height:8px;border-radius:50%;background:var(--p-orange,#f2a866);
}
.pp-section__num{display:none}            /* no number badges in this design */

.pp-doc p{
	margin:2px 0;color:#555;
	font-size:14px;line-height:28px;
}
.pp-doc strong,.pp-doc b{color:#333;font-weight:700}
.pp-doc a{color:var(--pp-brand);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.pp-doc a:hover{color:var(--pp-brand-d)}

/* ---- Callout notice (kept subtle, flat) ----------------------------------- */
.pp-note{
	margin:6px 0 6px 18px;padding:2px 0 2px 14px;
	border-left:3px solid var(--pp-brand);background:transparent;border-radius:0;
}
.pp-note svg{display:none}
.pp-note p{margin:2px 0;color:#555;font-size:14px;line-height:28px;font-weight:400}
.pp-note a{color:var(--pp-brand)}

/* ---- Subsections (smaller bold lead-ins) ---------------------------------- */
.pp-sub{margin-top:10px}
.pp-sub__title{
	margin:8px 0 2px;color:#333;font-weight:700;line-height:1.5;
	font-size:14px;
}
.pp-list{margin:2px 0;padding-left:18px;list-style:disc}
.pp-list li{
	color:#555;font-size:14px;line-height:28px;
}
.pp-list li::marker{color:var(--pp-brand)}

/* ---- Contact (plain, flat) ------------------------------------------------ */
.pp-contact-card{
	margin:4px 0;padding:0;background:transparent;border:0;border-radius:0;
	display:flex;flex-direction:column;gap:0;max-width:none;
}
.pp-contact-card__name{font-size:14px;font-weight:700;color:#333;margin-bottom:2px}
.pp-contact-card__row{
	display:flex;justify-content:flex-start;align-items:baseline;gap:.4rem;
	padding:0;border:0;text-decoration:none;
}
.pp-contact-card__row span{color:#555;font-size:14px;line-height:28px}
.pp-contact-card__row strong{color:var(--pp-brand);font-weight:600;font-size:14px}
a.pp-contact-card__row:hover strong{color:var(--pp-brand-d)}

/* ---- Editor-supplied content fallback (same scale) ------------------------ */
.pp-doc--custom h2,.pp-doc--custom h3{margin:18px 0 12px;font-weight:700;color:var(--pp-brand);font-size:18px;line-height:1.5}
.pp-doc--custom ul{padding-left:18px}
.pp-doc--custom li{font-size:14px;line-height:28px;color:#555;margin:2px 0}

/* ---- Parsed editor sections: style raw h3/ul/blockquote to match design ---- */
.pp-section__content h3{margin:8px 0 2px;color:#333;font-weight:700;line-height:1.5;font-size:14px}
.pp-section__content ul{margin:2px 0;padding-left:18px;list-style:disc}
.pp-section__content ul li{color:#555;font-size:14px;line-height:28px}
.pp-section__content ul li::marker{color:var(--pp-brand)}
.pp-section__content blockquote{
	margin:6px 0 6px 18px;padding:2px 0 2px 14px;
	border-left:3px solid var(--pp-brand);background:transparent;
}
.pp-section__content blockquote p{margin:2px 0;color:#555;font-size:14px;line-height:28px}

/* ---- Back-to-top button --------------------------------------------------- */
.pp-top{
	position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:55;
	width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
	background:var(--pp-brand);color:#fff;display:grid;place-items:center;
	box-shadow:0 8px 20px rgba(37,99,235,.35);
	opacity:0;visibility:hidden;transform:translateY(12px);
	transition:opacity .25s ease,transform .25s ease,visibility .25s,background .2s;
}
.pp-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.pp-top:hover{background:var(--pp-brand-d)}

/* ---- Responsive ----------------------------------------------------------- */
@media(max-width:980px){
	.pp-body{grid-template-columns:1fr}
	.pp-toc{position:static;top:auto;order:0;margin-bottom:.5rem}
	.pp-toc__toggle{cursor:pointer}
	.pp-toc__chev{display:block}
	.pp-toc__toggle[aria-expanded="true"] .pp-toc__chev{transform:rotate(180deg)}
	/* Collapsed by default on mobile; JS adds .is-open to reveal. */
	.pp-toc__panel{display:none}
	.pp-toc.is-open .pp-toc__panel{display:block}
	.pp-toc__list{display:grid;grid-template-columns:1fr 1fr;gap:.2rem}
}
@media(max-width:560px){
	.pp-toc__list{grid-template-columns:1fr}
	.pp-section__num{width:2rem;height:2rem;font-size:1rem}
	.pp-doc p,.pp-list li{font-size:1.06rem}
}