/* Makedisi sample lead magnet — form, teaser, and reader. */

/* Hide the redundant theme page title on sample pages (the section provides
   its own heading). Covers Blocksy's page-title markup. */
.ms-sample-page .page-title,
.ms-sample-page .ct-page-title-container,
.ms-sample-page .entry-header .page-title,
.ms-sample-page .hero-section { display: none !important; }

.ms-sample-page .ct-container-full,
.ms-sample-page .ct-container,
.ms-sample-page article[class*="post-"] {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	width: 100% !important;
	--theme-content-vertical-spacing: 0;
}

.ms-sample-page .site-main,
.ms-sample-page .content-area,
.ms-sample-page .entry-content {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
}

.ms-sample-page .entry-content > .ms-prototype-shell {
	width: 100vw !important;
	max-width: 100vw !important;
	margin: 0 calc(50% - 50vw) !important;
}

.ms-prototype-shell,
.ms-form {
	--ink: #141210;
	--ink-soft: #43403b;
	--ink-faint: #5a564d; /* darkened from #736e66 for contrast headroom (~6.3:1 on cream) */
	--cream: #f6f1e7;
	--cream-deep: #efe8da;
	--paper: #fffdf8;
	--line: #ddd4c4;
	--line-strong: #c8bda8;
	--accent: #d2542b;
	--accent-deep: #b8431f;
	--wa: #1f8f4e;
	--ok: #217a43;
	--err: #a63a2d;
	--shadow-card: 0 1px 2px rgba(20,18,16,.04), 0 18px 44px -22px rgba(20,18,16,.30);
	--shadow-cover: 24px 30px 60px -28px rgba(20,18,16,.55), 0 2px 8px rgba(20,18,16,.18);
	/* Spacing scale — ratified A3: 4·8·12·16·18·22·28·40·56·64·78·88 */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 18px;
	--space-6: 22px;
	--space-7: 28px;
	--space-8: 40px;
	--space-9: 56px;
	--space-10: 64px;
	--space-11: 78px;
	--space-12: 88px;
	--gutter: 28px;
	--gutter-mobile: 20px;
	--container-wide: 1180px;
	--container-reader: 900px;
	--measure-lede: 46ch;
	--measure-copy: 42ch;
	--measure-reader: 62ch;
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 10px;
	--r: 14px; /* cards (A1/A7) */
}

.ms-prototype-shell {
	background: var(--page-bg);
	color: var(--ink);
	font-family: var(--font-text);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	font-optical-sizing: auto;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
	overflow-x: hidden;
}

.ms-prototype-shell *,
.ms-prototype-shell *::before,
.ms-prototype-shell *::after { box-sizing: border-box; }

.ms-prototype-shell p,
.ms-prototype-shell h1,
.ms-prototype-shell h2,
.ms-prototype-shell h3 { margin-top: 0; }

.ms-proto-page {
	min-height: 60vh;
}

.ms-prototype-shell a,
.ms-prototype-shell button,
.ms-prototype-shell input {
	outline-offset: 3px;
}

.ms-prototype-shell a:focus-visible,
.ms-prototype-shell button:focus-visible,
.ms-prototype-shell input:focus-visible {
	outline: 2px solid var(--accent);
}

.ms-proto-ui,
.ms-prototype-shell button,
.ms-prototype-shell input,
.ms-prototype-shell label { font-family: var(--font-text); font-optical-sizing: auto; }

.ms-btn,
.ms-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--control-h-lg);
	padding: 0 var(--control-px-lg);
	border-radius: var(--control-radius) !important;
	border: 1px solid var(--ink) !important;
	font-family: var(--font-text);
	font-weight: 600;
	font-size: var(--fs-base);
	line-height: var(--lh-heading);
	letter-spacing: .02em;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease, transform .15s ease;
}

.ms-submit,
.ms-btn--primary {
	background: var(--ink) !important;
	color: var(--cream) !important;
}

.ms-submit:hover:not(:disabled),
.ms-btn--primary:hover {
	background: #000 !important;
	color: var(--cream) !important;
	transform: translateY(-1px);
}

.ms-btn--secondary {
	background: transparent !important;
	color: var(--ink) !important;
}

.ms-btn--secondary:hover {
	background: var(--ink) !important;
	color: var(--cream) !important;
}

.ms-proto-wrap { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); }
.ms-proto-hero { padding: var(--space-11) var(--gutter) var(--space-9); position: relative; }
.ms-proto-eyebrow {
	font-family: var(--font-text);
	font-weight: 600;
	font-size: var(--fs-2xs);
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--accent-deep);
	margin-bottom: var(--space-4);
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	position: relative;
	z-index: 1;
}
.ms-proto-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); }
.ms-proto-display {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 600;
	color: var(--ink);
	font-size: var(--fs-display);
	line-height: var(--lh-tight);
	max-width: 14ch;
	position: relative;
	z-index: 1;
}
.ms-proto-lede {
	margin-top: var(--space-5);
	max-width: var(--measure-lede);
	font-size: var(--fs-lg);
	line-height: 1.5;
	color: var(--ink-soft);
	position: relative;
	z-index: 1;
}
.ms-proto-grid {
	margin-top: var(--space-9);
	display: grid;
	grid-template-columns: minmax(0,300px) 1fr;
	gap: var(--space-10);
	align-items: start;
	position: relative;
	z-index: 1;
}
.ms-proto-cover-stage { position: relative; perspective: 1400px; }
.ms-proto-cover {
	position: relative;
	width: 100%;
	aspect-ratio: 2 / 3;
	border-radius: var(--radius-md);
	/* Lifted-book shadow (mirrors the product page's --rb-shadow-cover) so the
	   cover reads as a physical object, not a flat tile. The hover lift already
	   existed but had no shadow to lift away from. */
	box-shadow: 24px 30px 60px -28px rgba(20,18,16,.55), 0 2px 8px rgba(20,18,16,.18);
	overflow: hidden;
	background: #cdd2cf;
	background-image: var(--ms-cover-image);
	background-size: cover;
	background-position: center;
	transition: transform .35s ease, box-shadow .35s ease;
}
.ms-proto-cover:hover {
	transform: translateY(-4px);
	box-shadow: 30px 38px 72px -30px rgba(20,18,16,.60), 0 3px 10px rgba(20,18,16,.20);
}
.ms-proto-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 9px; background: linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.12)); z-index: 3; }
.ms-proto-sky { position: absolute; inset: 0 0 58% 0; background: linear-gradient(180deg,#e9e4d8,#d7d2c4); }
.ms-proto-wall { position: absolute; inset: 42% 0 0 0; background: linear-gradient(180deg,var(--accent),var(--accent-deep) 70%,#7c2f16); }
.ms-proto-figure { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); width: 34%; height: 30%; background: #2b2622; border-radius: 46% 46% 30% 30%; opacity: .92; }
.ms-proto-author { position: absolute; top: 7%; left: 0; right: 0; text-align: center; font-family: var(--font-text); font-size: var(--fs-2xs); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); }
.ms-proto-title { position: absolute; top: 15%; left: 0; right: 0; text-align: center; font-family: "Sacramento", cursive; font-size: clamp(26px,4vw,34px); color: #1c1916; line-height: 1; }
.ms-proto-cover-note { margin-top: var(--space-3); font-family: var(--font-text); font-size: var(--fs-2xs); letter-spacing: .04em; color: var(--ink-faint); text-align: center; }
.ms-proto-meta { display: flex; flex-direction: column; gap: var(--space-4); }
.ms-proto-by { font-family: var(--font-text); font-size: var(--fs-md); color: var(--ink-soft); }
.ms-proto-by b { color: var(--ink); font-weight: 600; }
.ms-proto-note { font-size: var(--fs-md); color: var(--ink-soft); max-width: var(--measure-copy); }
.ms-proto-facts { display: flex; gap: var(--space-5); flex-wrap: wrap; padding-top: var(--space-2); }
.ms-proto-fact { display: flex; flex-direction: column; gap: var(--space-1); }
.ms-proto-k { font-family: var(--font-text); font-size: var(--fs-2xs); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.ms-proto-v { font-family: var(--font-text); font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.ms-proto-excerpt { position: relative; margin-top: var(--space-3); border-top: 1px solid var(--line); padding-top: var(--space-6); }
.ms-proto-label { font-family: var(--font-text); font-size: var(--fs-2xs); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--space-4); }
.ms-proto-excerpt-copy { position: relative; max-height: 272px; overflow: hidden; }
.ms-proto-excerpt-copy p { font-size: var(--fs-lg); line-height: 1.72; color: var(--ink); margin-bottom: 1.1em; max-width: var(--measure-reader); }
.ms-proto-excerpt-copy p:first-child::first-letter {
	font-family: var(--font-display);
	font-weight: 600;
	float: left;
	font-size: 3.6em;
	line-height: .78;
	padding: var(--space-2) var(--space-3) 0 0;
	color: var(--accent-deep);
}
.ms-proto-fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 130px;
	background: linear-gradient(180deg,rgba(253,255,250,0),var(--page-bg) 92%);
	pointer-events: none;
}
.ms-proto-continue {
	margin-top: var(--space-5);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--control-h-sm);
	padding: 0 var(--control-px-lg);
	border: 1px solid var(--ink);
	border-radius: var(--control-radius);
	font-family: var(--font-text);
	font-weight: 600;
	font-size: var(--fs-sm);
	letter-spacing: .02em;
	color: var(--ink);
	background: transparent;
	text-decoration: none;
	transition: background .18s ease, color .18s ease, transform .15s ease;
}
.ms-proto-continue:hover { background: var(--ink); color: var(--cream); transform: translateY(-1px); }
.ms-proto-continue svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; }

.ms-proto-capture-band { background: var(--page-bg); border-top: 1px solid var(--line); margin-top: 0; }
.ms-proto-capture {
	max-width: var(--container-wide);
	margin: 0 auto;
	padding: var(--space-11) var(--gutter);
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: var(--space-10);
	align-items: start;
}
/* Section heading on the display face — was Commissioner, out of step with the
   hero ("Peek inside…") and reviews ("What readers…") titles. */
.ms-proto-capture-copy h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-3xl); line-height: var(--lh-heading); letter-spacing: -.01em; max-width: 16ch; }
.ms-proto-capture-copy p { margin-top: var(--space-4); font-size: var(--fs-md); color: var(--ink-soft); max-width: var(--measure-copy); }
.ms-proto-trust { margin-top: var(--space-7); display: flex; flex-direction: column; gap: var(--space-3); }
.ms-proto-row { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-base); color: var(--ink-soft); }
.ms-proto-tick { width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.ms-proto-tick svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 2.4; fill: none; }
/* Early-reader reviews — real testimonials, editorial 2026 card system */
.ms-proto-reviews-band { border-top: 1px solid var(--line); margin-top: 0; }
.ms-proto-reviews { padding-top: var(--space-11); padding-bottom: var(--space-11); }
/* "What readers say" — display face, matching "Peek inside the first chapter". */
.ms-proto-reviews-title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-3xl); line-height: var(--lh-heading); letter-spacing: -.01em; color: var(--ink); margin: var(--space-3) 0 var(--space-9); max-width: 20ch; }

/* Redesign: literary "praise" blurbs, not cards. The boxed paper cards read as
   e-commerce and forced the two very different quote lengths into equal columns.
   De-carded: each testimonial is led by a hanging Abril quote mark in rust, set
   at an editorial measure with the quote at full ink — like the praise leaf of a
   hardcover. A generous column gap separates them; no box, no shadow. */
.ms-proto-reviews-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-9) clamp(40px, 6vw, 88px);
	align-items: start;
}

.ms-proto-review {
	position: relative;
	display: block;
	margin: 0;
	padding: 3.1rem 0 0 0;   /* room for the hanging quote mark */
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}
/* The one flourish — a big opening quotation mark in the display face + rust. */
.ms-proto-review::before {
	content: "\201C";
	position: absolute;
	top: -0.14em;
	left: -0.02em;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 3.6rem;
	line-height: 1;
	color: var(--accent);
	pointer-events: none;
}

.ms-proto-review-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

/* small, quiet credibility — rust stars above the quote */
.ms-proto-review-stars { display: inline-flex; gap: 3px; }
.ms-proto-review-stars svg { width: 15px; height: 15px; fill: var(--accent); }

/* the quote — editorial reading size, full ink (was muted ink-soft in a card) */
.ms-proto-review-quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--font-text);
	font-size: var(--fs-md);
	line-height: 1.62;
	color: var(--ink);
	text-wrap: pretty;
}

/* attribution — small avatar + name, set off by a short rust rule (no card border) */
.ms-proto-review-by {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-3);
	padding-top: 0;
	border-top: 0;
	font-family: var(--font-text);
	font-weight: 600;
	font-size: var(--fs-base);
	letter-spacing: .01em;
	text-transform: none;
	color: var(--ink);
}
.ms-proto-review-avatar {
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
	background: var(--cream-deep);
	box-shadow: 0 0 0 1px var(--line);
}

/* Mobile — the text column narrows, so widen the opaque wash + soften the photo (§7) */
@media (max-width: 760px) {
	.ms-proto-review-photo { opacity: .10; }
	.ms-proto-review-wash {
		background: linear-gradient(100deg,
			var(--paper) 0%,
			var(--paper) 54%,
			rgba(255,253,248,.55) 82%,
			rgba(255,253,248,.30) 100%);
	}
}

.ms-proto-card {
	background: var(--paper);
	border: 1px solid var(--line-strong);
	border-radius: var(--r);
	box-shadow: var(--shadow-card);
	padding: var(--space-8);
	text-align: left;
}
.ms-proto-card h3 { font-family: var(--font-text); font-weight: 600; font-size: var(--fs-xl); line-height: 1.2; margin-bottom: var(--space-2); color: var(--ink); }
.ms-proto-sub { font-size: var(--fs-base); color: var(--ink-faint); margin-bottom: var(--space-5); }
.ms-field { margin-bottom: var(--space-4); }
.ms-field label { display: block; font-family: var(--font-text); font-weight: 600; font-size: var(--fs-xs); letter-spacing: .04em; margin-bottom: var(--space-2); color: var(--ink); }
.ms-field label .ms-optional { font-weight: 400; color: var(--ink-faint); letter-spacing: 0; }
.ms-field input[type="text"],
.ms-field input[type="email"],
.ms-field input[type="tel"] {
	width: 100%;
	padding: 13px var(--space-4);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-lg);
	background: #fff;
	font-family: var(--font-text);
	font-size: var(--fs-base);
	color: var(--ink);
	transition: border-color .18s, box-shadow .18s;
}
.ms-field input::placeholder { color: #b3aa98; }
.ms-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(210,84,43,.14); }
.ms-field--check { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--space-3); align-items: start; margin: var(--space-2) 0 var(--space-5); }
.ms-field--check input { margin-top: 0; width: 24px; height: 24px; flex: none; accent-color: var(--accent); cursor: pointer; }
.ms-field--check label { font-size: var(--fs-sm); color: var(--ink-faint); line-height: 1.45; font-weight: 400; margin: 0; }
.ms-error { display: block; color: var(--err); font-size: var(--fs-xs); margin-top: 5px; min-height: 1px; }
.ms-error[data-for="consent"] { grid-column: 1 / -1; }
.ms-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Out-rank the theme's [type="submit"] rule (ties .ms-submit on specificity
   and wins on source order) so the control-size system holds on the submit. */
.ms-form .ms-submit {
	width: 100%;
	min-height: var(--control-h-lg);
	padding: 0 var(--control-px-lg);
}
.ms-submit:disabled { opacity: .6; cursor: default; transform: none; }
.ms-submit svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
.ms-form__status { margin: var(--space-3) 0 0; font-size: var(--fs-sm); min-height: 1px; }
.ms-form__status--ok { color: var(--ok); }
.ms-form__status--err { color: var(--err); }
.ms-proto-privacy { margin-top: var(--space-3); text-align: center; font-size: var(--fs-xs); color: var(--ink-faint); }
.ms-proto-privacy svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 4px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* Reveal-on-scroll — opt-in. JS adds .ms-anim to <html> ONLY when motion is
   allowed and IntersectionObserver exists, then tags each element .ms-in as it
   enters view. The default (no JS, headless render, reduced motion) is fully
   visible, so the page never ships blank and below-fold sections animate when
   you actually reach them — not all at once on load. */
.ms-anim .ms-proto-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
	will-change: opacity, transform;
}
.ms-anim .ms-proto-reveal.ms-in { opacity: 1; transform: none; will-change: auto; }
/* Hero load stagger (all in view together) + the two praise blurbs as a pair. */
.ms-anim .ms-proto-lede.ms-proto-reveal { transition-delay: .07s; }
.ms-anim .ms-proto-cover-stage.ms-proto-reveal { transition-delay: .13s; }
.ms-anim .ms-proto-meta.ms-proto-reveal { transition-delay: .19s; }
.ms-anim .ms-proto-review.ms-proto-reveal:nth-child(2) { transition-delay: .12s; }

/* Micro-interaction: the directional CTAs nudge their arrow on hover/focus. */
.ms-proto-continue svg, .ms-submit svg { transition: transform .2s cubic-bezier(.22,1,.36,1); }
.ms-proto-continue:hover svg, .ms-proto-continue:focus-visible svg,
.ms-submit:hover svg, .ms-submit:focus-visible svg { transform: translateX(3px); }

/* Honour reduced-motion: everything visible + still, no transitions. */
@media (prefers-reduced-motion: reduce) {
	.ms-anim .ms-proto-reveal { opacity: 1; transform: none; transition: none; }
	.ms-proto-cover, .ms-proto-continue, .ms-btn, .ms-submit { transition: none; }
	.ms-proto-continue:hover svg, .ms-submit:hover svg { transform: none; }
}

@media (max-width: 880px) {
	/* Capture band (copy + form) stacks here; the hero stays 2-col until 720
	   (below) so tablet doesn't get the narrow centred column + dead gutters. */
	.ms-proto-capture { grid-template-columns: 1fr; gap: var(--space-9); }
}

@media (max-width: 720px) {
	/* Hero collapses to a single fluid column — no narrow centred clamp; the
	   meta keeps its own measure caps so lines never run long. */
	.ms-proto-grid { grid-template-columns: 1fr; gap: var(--space-8); }
	.ms-proto-cover-stage { max-width: 300px; margin: 0 auto; }
	.ms-proto-cover,
	.ms-proto-cover:hover { transform: none; }
	.ms-proto-reviews-grid { grid-template-columns: 1fr; gap: var(--space-7); }
}

@media (max-width: 600px) {
	.ms-proto-wrap,
	.ms-proto-hero,
	.ms-proto-capture { padding-left: var(--gutter-mobile); padding-right: var(--gutter-mobile); }
	.ms-proto-hero { padding-top: var(--space-8); padding-bottom: var(--space-7); }
	.ms-proto-display { font-size: clamp(2.4rem, 14vw, 3.6rem); }
	.ms-proto-reviews { padding-top: var(--space-8); padding-bottom: var(--space-8); }
	.ms-proto-capture { padding-top: var(--space-8); padding-bottom: var(--space-9); }
	.ms-proto-card { padding: var(--space-6); }
}

.ms-reader {
	max-width: var(--container-reader);
	margin: 0 auto;
	padding: var(--space-11) var(--gutter);
}
.ms-reader__eyebrow {
	text-transform: uppercase;
	letter-spacing: .24em;
	font-size: var(--fs-2xs);
	color: var(--accent-deep);
	margin: 0 0 var(--space-3);
	font-family: var(--font-text);
	font-weight: 600;
}
.ms-reader__title {
	color: var(--ink);
	margin: 0 0 var(--space-6);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-display-sm);
	line-height: var(--lh-tight);
}

/* Book-like reading experience (not a text dump) */
.ms-reader__body {
    font-family: var(--font-text);
    max-width: var(--measure-reader);
    margin: 0 auto;
    color: var(--ink-soft);
    font-size: var(--fs-lg);
    line-height: 1.7;
}
.ms-reader__body p { margin: 0 0 var(--space-5); }
.ms-reader__body p.ms-dropcap::first-letter {
    float: left;
    font-family: var(--font-display);
    font-size: 3.6em;
    line-height: .82;
    font-weight: 700;
    color: var(--accent-deep);
    padding: var(--space-2) var(--space-3) 0 0;
}
.ms-reader__excerpt-note {
    max-width: var(--measure-reader);
    margin: var(--space-6) auto 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm);
    color: var(--ink-faint);
    font-style: italic;
}
/* Dev-only gating-bypassed badge (never renders in production) */
.ms-reader__devnote {
	margin: 0 0 var(--space-4);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	background: #fde68a;
	color: #5b4300;
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: center;
}

/* In-browser PDF viewer (PDF.js — paged reader). Fills the reading column so
   it aligns with the heading/CTAs and reads as the primary surface. */
.ms-pdfviewer { margin: var(--space-5) auto 0; max-width: 100%; }
.ms-pdfviewer__status { text-align: center; color: var(--ink-faint); font-size: var(--fs-sm); min-height: 1px; margin: var(--space-3) 0 0; }

/* Control bar with persistent buy CTA */
.ms-pdfviewer__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-4);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--r) var(--r) 0 0;
    box-shadow: var(--shadow-card);
    position: sticky;
    top: 0;
    z-index: 2;
}
.ms-pdfviewer__nav { display: flex; align-items: center; gap: var(--space-3); }
.ms-pdfviewer__prev,
.ms-pdfviewer__next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--paper) !important;
    border: 1px solid var(--ink) !important;
    color: var(--ink) !important;
    border-radius: var(--control-radius) !important;
    min-height: var(--control-h-sm);
    padding: 0 var(--control-px-sm);
    font-family: var(--font-text);
    font-weight: 600;
    font-size: var(--fs-sm);
    cursor: pointer;
}
.ms-pdfviewer__prev:disabled,
.ms-pdfviewer__next:disabled { opacity: .4; cursor: default; }
.ms-pdfviewer__counter { font-size: var(--fs-sm); color: var(--ink); min-width: 96px; text-align: center; }
.ms-pdfviewer__buy { min-height: var(--control-h-sm); padding: 0 var(--control-px-sm); font-size: var(--fs-sm); }

/* The page stage */
.ms-pdfviewer__stage {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: var(--cream);
    border: 1px solid var(--line-strong);
    border-top: none;
    border-radius: 0 0 var(--r) var(--r);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
    min-height: 420px;
}
.ms-pdfviewer__canvaswrap { width: 100%; display: flex; justify-content: center; }
.ms-pdfviewer__canvaswrap[hidden] { display: none !important; }
.ms-pdfviewer__canvaswrap canvas {
    display: block;
    background: var(--paper);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
    border-radius: 2px;
    max-width: 100%;
    height: auto;
}

/* End-of-preview card — the single conversion moment (primary buy + secondary download) */
.ms-pdfviewer__end[hidden] { display: none; }
.ms-pdfviewer__end {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 480px;
    margin: auto;
    padding: var(--space-9) var(--space-5);
    gap: var(--space-4);
}
.ms-pdfviewer__end h2 { margin: 0; font-family: var(--font-text); font-weight: 600; font-size: var(--fs-xl); line-height: var(--lh-heading); color: var(--ink); }
.ms-pdfviewer__end p { margin: 0; font-size: var(--fs-md); line-height: var(--lh-snug); color: var(--ink-soft); max-width: 34ch; }
/* Stacked button group — primary buy, then secondary download, equal width */
.ms-pdfviewer__end-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); width: 100%; max-width: 280px; margin-top: var(--space-2); }
.ms-pdfviewer__end-actions .ms-btn { width: 100%; }

/* Buy CTA shown only when the in-browser viewer fails (fallback text path) */
.ms-reader__cta-fallback { margin-top: var(--space-5); text-align: center; }

@media (max-width: 600px) {
    .ms-pdfviewer__bar { justify-content: center; }
    /* Pass D: on mobile the toolbar prioritises reading controls only — hide the
       secondary buy here. The end-of-preview card is the mobile conversion moment
       (buy_end); the toolbar buy (buy_toolbar) stays on desktop/tablet.
       Scoped via .ms-pdfviewer__bar to out-rank the later `.ms-btn` display rule. */
    .ms-pdfviewer__bar .ms-pdfviewer__buy { display: none; }
    .ms-pdfviewer__stage { padding: var(--space-3); }
}

@media (max-width: 600px) {
	.ms-form { padding: var(--space-6); }
	.ms-reader { padding: var(--space-8) var(--gutter-mobile) var(--space-9); }
	.ms-reader__body { font-size: var(--fs-md); }
}