/*
 * Creative Exposure V2 - long-form legal document presentation.
 *
 * Terms & Conditions and Privacy Policy. A dark header band, then the document on the off-white
 * page inside the standard 95% shell, with the text itself constrained to a comfortable reading
 * measure rather than running the full width of a desktop monitor.
 *
 * Deliberately restrained: no decorative dash motif, no cards wrapped around legal paragraphs, no
 * imagery. Headings carry the hierarchy, generous leading carries the readability. Links are
 * underlined and large enough to hit on a phone.
 *
 * Presentation only: no pricing, cart, checkout or SEO logic. Approved breakpoints only
 * (640 / 768 / 1024 / 1280). DDR-001 palette tokens only. No em dashes.
 */

.ce-legal { background: var(--ce-color-bg-page); color: var(--ce-color-text); }

/* --------------------------------------------------------------- Header band */

.ce-legal__head { background: var(--ce-color-black); color: var(--ce-color-bg-page); padding: 34px 0 38px; }
.ce-legal__head .ce-breadcrumbs,
.ce-legal__head .ce-breadcrumbs a { color: rgba(253, 250, 246, 0.62); }
.ce-legal__head .ce-breadcrumbs a:hover { color: var(--ce-color-bg-page); }
.ce-legal__eyebrow { display: block; font-size: 0.7rem; font-weight: var(--ce-fw-bold); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ce-color-rust); margin: 14px 0 10px; }
.ce-legal__head h1 { font-size: 2rem; line-height: 1.1; color: var(--ce-color-bg-page); margin: 0; }
.ce-legal__sub { font-size: 1rem; line-height: 1.6; color: rgba(253, 250, 246, 0.78); margin: 12px 0 0; max-width: 62ch; }
.ce-legal__updated { font-size: 0.82rem; color: rgba(253, 250, 246, 0.55); margin: 14px 0 0; }

/* ------------------------------------------------------------ Document body */

.ce-legal__body { padding-top: 38px; padding-bottom: 76px; }

/* The reading measure is the point of this file. Legal text at full desktop width is unreadable,
   so the document is capped well before the shell edge. An explicit length rather than a ch
   value, because ch resolves against the widest zero glyph and overshot the measure the rest of
   the site uses for long-form prose. */
.ce-legal__doc { max-width: 680px; }

.ce-legal__doc > *:first-child { margin-top: 0; }
.ce-legal__doc p { font-size: 1rem; line-height: 1.8; color: var(--ce-color-text-mid); margin: 0 0 18px; }
.ce-legal__doc h2 { font-size: 1.3rem; line-height: 1.25; color: var(--ce-color-text); margin: 42px 0 14px; padding-top: 20px; border-top: 1px solid var(--ce-color-border); }
.ce-legal__doc h2:first-of-type { margin-top: 10px; }
.ce-legal__doc h3 { font-size: 1.02rem; line-height: 1.3; color: var(--ce-color-text); margin: 28px 0 10px; }
.ce-legal__doc ul,
.ce-legal__doc ol { margin: 0 0 20px; padding-left: 22px; }
.ce-legal__doc li { font-size: 1rem; line-height: 1.75; color: var(--ce-color-text-mid); margin-bottom: 8px; }
.ce-legal__doc strong { color: var(--ce-color-text); font-weight: var(--ce-fw-semibold); }

/* Links are underlined so they are unmistakable in a wall of legal text, and the touch target is
   not a hairline. */
.ce-legal__doc a { color: var(--ce-color-rust); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ce-legal__doc a:hover { color: var(--ce-color-text); }

/* The contact block that closes each document. */
.ce-legal__contact { margin: 34px 0 0; padding: 22px 22px 20px; background: var(--ce-color-bg-cream); border: 1px solid var(--ce-color-border); border-left: 3px solid var(--ce-color-rust); border-radius: var(--ce-radius-card-sm); }
.ce-legal__contact p { margin: 0 0 8px; }
.ce-legal__contact p:last-child { margin-bottom: 0; }
.ce-legal__contact .ce-legal__cname { font-weight: var(--ce-fw-bold); color: var(--ce-color-text); }

/* ----------------------------------------------------------- Breakpoints */

@media (min-width: 768px) {
	.ce-legal__head { padding: 44px 0 48px; }
	.ce-legal__head h1 { font-size: 2.4rem; }
	.ce-legal__body { padding-top: 46px; }
	.ce-legal__doc h2 { font-size: 1.4rem; }
}

@media (min-width: 1024px) {
	.ce-legal__head { padding: 52px 0 56px; }
	.ce-legal__head h1 { font-size: 2.75rem; }
	.ce-legal__contact { padding: 26px 28px 24px; }
}

@media (min-width: 1280px) {
	.ce-legal__body { padding-top: 54px; padding-bottom: 88px; }
	.ce-legal__head h1 { font-size: 3rem; }
}