/**
 * The six legal pages: Terms of Service, Privacy Policy, Sub-Processors, the
 * Data Processing Addendum, the AI/ML Policy, and the `/legal/` hub.
 *
 * The layout is the old one, measured off the pages `zipify-refresh` still
 * serves and matched: a tall dark masthead with the title centred in it, then
 * one centred 800px column on white — the effective date centred at the top,
 * section headings centred at 48px with 80px above and 40px below, body copy
 * at 20px. Sub-Processors gets the wide measure, the exception the old design
 * also made for it. The hub keeps its dark ground and its row of centred cards.
 *
 * What is NOT carried over from the export is its chrome: the skewed section
 * edge, the drifting gradient circles and the speed-mark graphic belonged to
 * `zipify-refresh`'s vocabulary, and reproducing them inside `zipify-2026`
 * would leave these six pages looking like a different site from every other
 * page in the theme. The bands here are `product.css`'s — the same gradient,
 * texture and glow the product heroes use — so the grounds match the site and
 * the proportions match the old page.
 *
 * Two deliberate departures from the export's typography, both small and both
 * in the same direction:
 *
 *  - Line height 1.5, not 1.2. An 800px measure at 20px is around 78
 *    characters a line, and 1.2 leading over 78 characters is where the eye
 *    starts losing its place returning to the left margin.
 *  - Paragraph and list-item spacing set here rather than by the empty
 *    `<p><br></p>` the builder put between every block. Same 24px rhythm,
 *    without a screen reader announcing several hundred blank paragraphs.
 *
 * `.zpl-`, not `.zpx-`: these rules belong to these six pages and load only
 * with them. The prefix is what keeps a later edit here from reaching the
 * product pages that share the band classes underneath.
 */

/* ==========================================================================
   MASTHEAD
   The old hero was 437px tall with the title centred in it and nothing else
   on the band. `min-height` rather than padding alone, so a two-line title
   (the DPA's, at narrow widths) grows the band instead of crowding it.
   ========================================================================== */

.zpl-masthead .zpx-wrap {
	display:flex; flex-direction:column; justify-content:center;
	min-height:380px;
	padding-top:64px; padding-bottom:64px;
}
.zpl-masthead__head { margin-bottom:0; --zpx-head-measure:1000px; }

/* The export set the title at 56px/600 — larger and lighter than the theme's
   display `h1`, which is 900 weight. Matched, because at this size the heavier
   cut reads as a marketing headline rather than as a document title. */
.zpl-masthead .zpx-h2 {
	font-size:clamp(34px,4.4vw,56px); font-weight:700;
	letter-spacing:-0.02em; line-height:1.14;
}
.zpl-masthead .zpx-lede { font-size:20px; margin-top:26px; }

/* ==========================================================================
   DOCUMENT COLUMN
   ========================================================================== */

.zpl-doc .zpx-wrap { padding-top:80px; padding-bottom:104px; }

/* 800px of TEXT, which is what the old page measured — the 96px is `.zpx-wrap`'s
   own gutter, which these override rather than inherit `--zpx` widths from. */
.zpl-doc__col { max-width:896px; margin-inline:auto; }
/* Sub-Processors: three columns do not fit in 800px, and the old design
   widened this one page rather than shrink the table. */
.zpl-doc__col--wide { max-width:1176px; }

/* The effective date: centred over the document, in the italic the export
   used for it. It is a fact about the document's version, so it is set apart
   from the prose rather than folded into the first paragraph. */
.zpl-stamp {
	margin:0 0 40px;
	font-family:var(--font-display);
	font-size:24px; font-weight:600; font-style:italic;
	line-height:1.3; text-align:center;
	color:var(--blue-900);
}

/* Sub-Processors' headline, and the only lede any of the five documents has.
   Same treatment as a section heading, because that is what it is. */
.zpl-lede {
	margin:0 0 48px;
	font-family:var(--font-display);
	font-size:clamp(30px,3.4vw,48px); font-weight:700;
	letter-spacing:-0.02em; line-height:1.2;
	text-align:center; text-wrap:balance;
	color:var(--ink-900);
}

/* --- Prose -------------------------------------------------------------- */

.zpl-prose {
	font-size:20px; line-height:1.5;
	color:var(--blue-900);
	/* These documents are full of defined terms in quotes, clause references
	   and long proper nouns; letting the browser hyphenate mid-word makes them
	   harder to scan, not easier. */
	hyphens:none;
	/* Hyphenation off does not help a bare URL with no break opportunity, and
	   these documents cite plenty. Break those rather than let them run past
	   the column: at 390px the longest is 380px wide and overflowed by 34px. */
	overflow-wrap:anywhere;
}

.zpl-prose > :first-child { margin-top:0; }
.zpl-prose > :last-child  { margin-bottom:0; }

.zpl-prose h2,
.zpl-prose h3,
.zpl-prose h4 {
	font-family:var(--font-display);
	color:var(--ink-900);
	letter-spacing:-0.02em;
	text-wrap:balance;
	/* The site header is sticky and 72px tall; an anchor jump without this
	   lands the heading behind it. The extra 24px keeps it off the edge. */
	scroll-margin-top:calc(var(--zp-header-h) + 24px);
}
.zpl-prose h2 {
	margin:80px 0 40px;
	font-size:clamp(30px,3.4vw,48px); font-weight:700; line-height:1.2;
	text-align:center;
}
.zpl-prose > h2:first-child { margin-top:0; }
.zpl-prose h3 { margin:52px 0 20px; font-size:25px; font-weight:700; line-height:1.26; }
.zpl-prose h4 { margin:40px 0 16px; font-size:21px; font-weight:700; line-height:1.3; }

.zpl-prose p { margin:0 0 24px; }

.zpl-prose ol,
.zpl-prose ul { margin:0 0 24px; padding-left:40px; }
.zpl-prose li { margin:0 0 24px; }
.zpl-prose li:last-child { margin-bottom:0; }
.zpl-prose li > :last-child { margin-bottom:0; }
.zpl-prose li::marker { color:var(--ink-500); }

.zpl-prose a {
	color:var(--blue-700);
	text-decoration:underline; text-underline-offset:2px;
	text-decoration-thickness:1px;
}
.zpl-prose a:hover { text-decoration-thickness:2px; }
.zpl-prose a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }

.zpl-prose strong { font-weight:700; color:var(--ink-900); }

@media (max-width:760px) {
	.zpl-prose { font-size:18px; }
	.zpl-prose h2 { margin:56px 0 28px; }
	.zpl-prose ol, .zpl-prose ul { padding-left:24px; }
	.zpl-stamp { font-size:20px; margin-bottom:32px; }
	.zpl-doc .zpx-wrap { padding-top:56px; padding-bottom:72px; }
}

/* ==========================================================================
   SUB-PROCESSOR TABLE
   Hairline row rules and nothing else, which is how the old page drew it.
   ========================================================================== */

/* `reset.css` ships a generic table treatment — a 1px box rule on every cell,
   a grey zebra and a hover tint — aimed at tables pasted into post content.
   Each is switched off explicitly rather than merely restyled, because the
   reset uses the `border` shorthand and a `border-bottom` alone would leave
   its other three edges standing. */

/* The wrapper scrolls, not the table: `overflow` needs a block box, and a
   table made `display:block` stops filling its column — the rows shrink to
   their content and the row rules stop two thirds of the way across, which is
   not what the old page did. `min-width` is where three columns stop fitting
   and scrolling is better than wrapping "Retail Media Advertising" to four
   lines. */
.zpl-tablewrap { overflow-x:auto; }

.zpl-prose .zpl-table {
	width:100%; min-width:540px;
	border-collapse:collapse;
	margin:0;
	font-size:18px;
}
.zpl-table th,
.zpl-table td { border:0; }
.zpl-table tbody > tr:nth-child(odd) > th,
.zpl-table tbody > tr:nth-child(odd) > td,
.zpl-table tbody tr:hover > th,
.zpl-table tbody tr:hover > td { background:transparent; }

.zpl-table thead th {
	padding:0 32px 18px 0;
	text-align:left; vertical-align:bottom;
	font-family:var(--font-display);
	font-size:18px; font-weight:700;
	color:var(--ink-900);
	white-space:nowrap;
}
.zpl-table tbody th,
.zpl-table tbody td {
	padding:20px 32px 20px 0;
	text-align:left; vertical-align:top;
	border-bottom:1px solid var(--ink-200);
	font-weight:400;
	color:var(--blue-900);
}
.zpl-table tbody th { white-space:nowrap; }
.zpl-table thead th:last-child,
.zpl-table tbody td:last-child { padding-right:0; }
.zpl-table tbody tr:last-child th,
.zpl-table tbody tr:last-child td { border-bottom:0; }

/* ==========================================================================
   `/legal/` HUB
   Dark ground, centred cards, an icon over the name over an outlined button —
   the export's layout, in the theme's own card and button treatment. The
   cards render inside the masthead's band, so there is no ground of their own
   here and no seam across the page.
   ========================================================================== */

/* The index band is the masthead band — see `zipify2026_legal_masthead()`. It
   only needs its title block to stop centring the page vertically and its
   floor lowered to sit under the cards. */
.zpl-masthead--index .zpx-wrap { min-height:0; padding-top:88px; padding-bottom:112px; }
.zpl-masthead--index .zpl-masthead__head { margin-bottom:56px; }

.zpl-index__grid {
	list-style:none; margin:0; padding:0;
	display:grid; gap:24px;
	/* Five documents, and they belong on one row: the old hub's four sat on
	   one, and an orphan fifth card under a full row reads as an afterthought
	   rather than as the newest policy. 180px is the width at which all five
	   still fit the 1084px content column. */
	grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}

.zpl-index__card {
	position:relative;
	display:flex; flex-direction:column; align-items:center;
	gap:20px;
	padding:32px 20px 28px;
	text-align:center;
	border:1px solid rgba(255,255,255,.16); border-radius:20px;
	background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
	transition:border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.zpl-index__card:hover { border-color:rgba(255,255,255,.34); transform:translateY(-2px); }

.zpl-index__icon { display:block; color:var(--orange-500); }
.zpl-index__icon svg { display:block; width:34px; height:34px; }

.zpl-index__title {
	margin:0;
	font-family:var(--font-display);
	font-size:19px; font-weight:700; line-height:1.28;
	letter-spacing:-0.01em;
	color:#fff;
	text-wrap:balance;
}

/* The whole card is the hit area; the button is the only link in it, so the
   accessible name is the CTA plus the document's title — "Read Terms: Terms of
   Service" — rather than five buttons all named "Read Terms". */
.zpl-index__link {
	margin-top:auto;
	display:inline-flex; align-items:center; justify-content:center;
	padding:12px 20px; border-radius:8px;
	border:1px solid rgba(255,255,255,.55);
	font-family:var(--font-display);
	font-size:15px; font-weight:700; letter-spacing:.01em;
	color:#fff; text-decoration:none;
	transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.zpl-index__link::after { content:""; position:absolute; inset:0; border-radius:inherit; }
.zpl-index__card:hover .zpl-index__link { background:rgba(255,255,255,.12); border-color:#fff; }
.zpl-index__link:focus-visible { outline:none; }
.zpl-index__card:focus-within { outline:2px solid var(--zip-yellow); outline-offset:3px; }

/* Names the link for a screen reader without repeating the title on screen. */
.zpl-index__sr {
	position:absolute; width:1px; height:1px;
	margin:-1px; padding:0; border:0;
	clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

@media (prefers-reduced-motion:reduce) {
	.zpl-index__card { transition:none; }
}

/* ==========================================================================
   PRINT
   These are the pages on the site people actually print and attach to a file.
   ========================================================================== */

@media print {
	.zpl-masthead { background:none !important; color:#000 !important; }
	.zpl-masthead .zpx-wrap { min-height:0; padding:0 0 24px; }
	.zpl-masthead .zpx-h2, .zpl-masthead .zpx-lede { color:#000 !important; }
	.zpl-doc .zpx-wrap { padding:0; }
	.zpl-doc__col { max-width:none; }
	.zpl-prose { font-size:11pt; color:#000; }
	.zpl-stamp, .zpl-lede { color:#000; }
	.zpl-prose h2, .zpl-prose h3, .zpl-prose h4 { break-after:avoid; }
	.zpl-prose li, .zpl-prose p { break-inside:avoid; }
	.zpl-prose a { color:#000; text-decoration:underline; }
}