/*
 * Design, Print & Digital — scoped production styles.
 * KAITAGO Core Design System v1.
 *
 * Loaded ONLY on pages using template-design-print-digital.php.
 *
 * Every rule is namespaced under .kdpd-page. Tokens are scoped to .kdpd-page
 * deliberately — NOT :root — so nothing here can reach the Kadence header,
 * footer, Journal or any other page on the site.
 *
 * Breakpoints: 900px and 560px. Verified at 1440 / 1280 / 1024 / 768 / 390 / 360.
 */

/* ============================================================
 * FONTS — not yet self-hosted.
 * ============================================================
 * No @font-face rules are active, so the page makes NO request for a font
 * file that does not exist. The stacks below fall back to system serif/sans.
 *
 * When approved .woff2 files land in ../fonts/, uncomment this block. Include
 * the vietnamese subset or diacritics will break. Nothing else needs to change.
 *
 * @font-face {
 *   font-family: "Newsreader";
 *   src: url("../fonts/newsreader-400.woff2") format("woff2");
 *   font-weight: 400; font-style: normal; font-display: swap;
 * }
 * @font-face {
 *   font-family: "Newsreader";
 *   src: url("../fonts/newsreader-500.woff2") format("woff2");
 *   font-weight: 500; font-style: normal; font-display: swap;
 * }
 * @font-face {
 *   font-family: "Manrope";
 *   src: url("../fonts/manrope-400.woff2") format("woff2");
 *   font-weight: 400; font-style: normal; font-display: swap;
 * }
 * @font-face {
 *   font-family: "Manrope";
 *   src: url("../fonts/manrope-600.woff2") format("woff2");
 *   font-weight: 600; font-style: normal; font-display: swap;
 * }
 * @font-face {
 *   font-family: "Manrope";
 *   src: url("../fonts/manrope-700.woff2") format("woff2");
 *   font-weight: 700; font-style: normal; font-display: swap;
 * }
 */

/* ============================================================
 * TOKENS
 * ============================================================ */

.kdpd-page {
	--kdpd-off-white: #F6F5F0;
	--kdpd-ink: #151716;
	--kdpd-olive: #46563C;
	--kdpd-olive-hover: #384629;
	--kdpd-olive-light: #E8EBE3;
	--kdpd-blue: #5D7B82;
	--kdpd-orange: #D66B45;

	--kdpd-text: #151716;
	--kdpd-text-secondary: #43463F;
	--kdpd-text-muted: #6E7168;
	--kdpd-text-inverse: #F6F5F0;
	--kdpd-text-on-dark-muted: #B9BBB2;

	--kdpd-border: #DEDDD6;
	--kdpd-border-strong: #C4C3BA;
	--kdpd-border-on-dark: #33362F;

	--kdpd-surface-card: #FFFFFF;
	--kdpd-surface-sunken: #EFEEE8;

	--kdpd-serif: "Newsreader", Georgia, "Times New Roman", serif;
	--kdpd-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--kdpd-ls-label: 0.12em;

	--kdpd-content-width: 1200px;
	--kdpd-gutter: clamp(20px, 5vw, 40px);
	--kdpd-radius: 3px;
	--kdpd-radius-pill: 999px;

	background: var(--kdpd-off-white);
	color: var(--kdpd-text);
	font-family: var(--kdpd-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

.kdpd-page *,
.kdpd-page *::before,
.kdpd-page *::after {
	box-sizing: border-box;
}

.kdpd-page :focus-visible {
	outline: 2px solid var(--kdpd-blue);
	outline-offset: 3px;
}

/* ============================================================
 * LAYOUT PRIMITIVES
 * ============================================================ */

.kdpd-container {
	max-width: var(--kdpd-content-width);
	margin: 0 auto;
	padding: clamp(52px, 7vw, 100px) var(--kdpd-gutter);
}

.kdpd-section + .kdpd-section {
	border-top: 1px solid var(--kdpd-border);
}

.kdpd-sectionhead {
	max-width: 62ch;
	margin-bottom: clamp(32px, 4vw, 48px);
}

/* ============================================================
 * TYPE
 * ============================================================ */

.kdpd-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: var(--kdpd-ls-label);
	text-transform: uppercase;
	color: var(--kdpd-olive);
}

.kdpd-eyebrow--orange { color: var(--kdpd-orange); font-weight: 700; }
.kdpd-eyebrow--onDark { color: var(--kdpd-olive-light); }

.kdpd-rule {
	flex: 0 0 auto;
	display: block;
	width: 24px;
	height: 1.5px;
	background: var(--kdpd-olive);
}

.kdpd-rule--orange { background: var(--kdpd-orange); }
.kdpd-rule--light { background: var(--kdpd-olive-light); }

.kdpd-h1 {
	margin: 0 0 20px;
	max-width: 18ch;
	font-family: var(--kdpd-serif);
	font-size: clamp(36px, 4.6vw, 62px);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.015em;
	text-wrap: pretty;
}

.kdpd-h2 {
	margin: 0 0 14px;
	max-width: 20ch;
	font-family: var(--kdpd-serif);
	font-size: clamp(28px, 3.2vw, 42px);
	font-weight: 500;
	line-height: 1.22;
	letter-spacing: -0.01em;
	text-wrap: pretty;
}

.kdpd-h2--sm { font-size: clamp(25px, 2.6vw, 34px); }
.kdpd-h2--onDark { color: var(--kdpd-text-inverse); max-width: 22ch; margin-bottom: clamp(32px, 4vw, 44px); }
.kdpd-h2--onOlive { color: var(--kdpd-text-inverse); max-width: 20ch; }

.kdpd-lede {
	margin: 0 0 14px;
	max-width: 52ch;
	font-size: clamp(17px, 1.3vw, 19px);
	line-height: 1.6;
	color: var(--kdpd-text-secondary);
	text-wrap: pretty;
}

.kdpd-support {
	margin: 0 0 30px;
	max-width: 52ch;
	font-size: 16px;
	color: var(--kdpd-text-muted);
}

.kdpd-sectionlede {
	margin: 0;
	max-width: 56ch;
	font-size: 16px;
	line-height: 1.65;
	color: var(--kdpd-text-secondary);
	text-wrap: pretty;
}

.kdpd-minilabel {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--kdpd-ls-label);
	text-transform: uppercase;
	color: var(--kdpd-text-muted);
}

.kdpd-minilabel--orange { color: var(--kdpd-orange); }

.kdpd-note {
	margin: 16px 0 0;
	max-width: 62ch;
	font-size: 13px;
	line-height: 1.6;
	color: var(--kdpd-text-muted);
}

/* ============================================================
 * BUTTONS
 * ============================================================ */

.kdpd-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.kdpd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 13px 28px;
	border: 1px solid transparent;
	border-radius: var(--kdpd-radius);
	font-family: var(--kdpd-sans);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out;
}

.kdpd-btn--primary { background: var(--kdpd-olive); border-color: var(--kdpd-olive); color: #FFFFFF; }
.kdpd-btn--primary:hover,
.kdpd-btn--primary:focus { background: var(--kdpd-olive-hover); border-color: var(--kdpd-olive-hover); color: #FFFFFF; text-decoration: none; }

.kdpd-btn--ghost { background: transparent; border-color: var(--kdpd-olive); color: var(--kdpd-olive); }
.kdpd-btn--ghost:hover,
.kdpd-btn--ghost:focus { background: var(--kdpd-olive-light); color: var(--kdpd-olive-hover); text-decoration: none; }

.kdpd-btn--onOlive { background: var(--kdpd-off-white); border-color: var(--kdpd-off-white); color: var(--kdpd-ink); }
.kdpd-btn--onOlive:hover,
.kdpd-btn--onOlive:focus { background: #E7E6DE; color: var(--kdpd-ink); text-decoration: none; }

.kdpd-btn--ghostOnOlive { background: transparent; border-color: rgba(246, 245, 240, 0.45); color: var(--kdpd-text-inverse); }
.kdpd-btn--ghostOnOlive:hover,
.kdpd-btn--ghostOnOlive:focus { background: rgba(246, 245, 240, 0.12); color: var(--kdpd-text-inverse); text-decoration: none; }

/* ============================================================
 * ANCHOR OFFSET
 * ============================================================
 * The page has no navigation of its own — the Kadence global header is the only
 * header. A small offset keeps a jumped-to heading clear of a sticky global
 * header if one is enabled in the Customizer.
 */

.kdpd-page [id] { scroll-margin-top: 24px; }

/* ============================================================
 * MEDIA FRAMES
 * ============================================================
 * Placeholder and real image occupy an identical box, so replacing one with
 * the other causes no layout shift.
 */

.kdpd-frame {
	max-width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	overflow: hidden;
	background: var(--kdpd-surface-sunken);
}

.kdpd-frame--placeholder {
	border: 1px dashed var(--kdpd-border-strong);
	padding: 10px;
	text-align: center;
}

.kdpd-frame__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kdpd-text-muted);
}

.kdpd-frame__img {
	width: 100%;
	height: 100%;
	/*
	 * contain, not cover: these are design deliverables and mockups — cropping
	 * a folder cover or a name card misrepresents the work.
	 */
	object-fit: contain;
	display: block;
}

/* ============================================================
 * 01 — HERO + SIGNATURE INTERACTION
 * ============================================================
 * Progressive disclosure: one stage panel visible at a time. Each panel owns a
 * different composition, so nothing is layered or absolutely positioned and
 * each collapses independently on mobile.
 */

.kdpd-hero {
	display: grid;
	grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.05fr);
	gap: clamp(36px, 5vw, 64px);
	align-items: start;
}

.kdpd-stagebox {
	background: var(--kdpd-surface-card);
	border: 1px solid var(--kdpd-border);
	padding: clamp(16px, 2.5vw, 24px);
	max-width: 100%;
}

.kdpd-stagebox__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 14px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--kdpd-border);
}

.kdpd-stagetab {
	flex: 1 1 90px;
	min-width: 0;
	min-height: 44px;
	padding: 0 0 8px;
	text-align: left;
	background: none;
	border: 0;
	border-bottom: 2px solid var(--kdpd-border);
	cursor: pointer;
	font-family: var(--kdpd-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: var(--kdpd-ls-label);
	text-transform: uppercase;
	color: var(--kdpd-text-muted);
	transition: color 180ms ease-out, border-color 180ms ease-out;
}

.kdpd-stagetab:hover { color: var(--kdpd-olive); }

.kdpd-stagetab[aria-selected="true"] {
	color: var(--kdpd-olive);
	border-bottom-color: var(--kdpd-olive);
}

.kdpd-panel { min-width: 0; }
.kdpd-panel:focus { outline: none; }
.kdpd-panel + .kdpd-panel { margin-top: 24px; }

/*
 * WITHOUT JS: no [data-kdpd-ready], so nothing below applies — all three
 * panels render in sequence and the block reads completely.
 * WITH JS: only the active panel is shown, with a subtle 350ms reveal.
 */
.kdpd-stagebox[data-kdpd-ready] .kdpd-panel { display: none; margin-top: 0; }

.kdpd-stagebox[data-kdpd-ready][data-stage="1"] .kdpd-panel[data-kdpd-panel="1"],
.kdpd-stagebox[data-kdpd-ready][data-stage="2"] .kdpd-panel[data-kdpd-panel="2"],
.kdpd-stagebox[data-kdpd-ready][data-stage="3"] .kdpd-panel[data-kdpd-panel="3"] {
	display: block;
	animation: kdpd-fade 350ms ease-out;
}

@keyframes kdpd-fade {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

/* Asset clusters — plain grids, no collage offsets. */

.kdpd-assets {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.kdpd-assets--sources { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
.kdpd-assets--outputs { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

.kdpd-asset { min-width: 0; }
.kdpd-asset figure { margin: 0; }

.kdpd-asset figcaption {
	padding: 8px 0 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--kdpd-text-secondary);
}

.kdpd-taglist {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.kdpd-taglist li {
	background: var(--kdpd-surface-sunken);
	border: 1px solid var(--kdpd-border);
	border-left: 2px solid var(--kdpd-blue);
	padding: 6px 11px;
	font-size: 12.5px;
	color: var(--kdpd-text-secondary);
}

/* Stage 02 — the invisible work. Type and hairlines only, no imagery. */

.kdpd-chain {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 1px;
	background: var(--kdpd-border);
	border: 1px solid var(--kdpd-border);
}

.kdpd-chain__step {
	display: flex;
	align-items: baseline;
	gap: 12px;
	background: var(--kdpd-surface-card);
	padding: 11px 14px;
}

.kdpd-chain__index {
	flex: 0 0 auto;
	font-family: var(--kdpd-serif);
	font-size: 15px;
	line-height: 1.2;
	color: var(--kdpd-olive);
}

.kdpd-chain__label { font-size: 14px; color: var(--kdpd-text-secondary); }

.kdpd-panel__link { margin: 16px 0 0; }

.kdpd-panel__link a {
	font-size: 14px;
	font-weight: 600;
	color: var(--kdpd-olive);
	text-decoration: none;
	border-bottom: 1px solid var(--kdpd-olive);
	padding-bottom: 2px;
	transition: color 180ms ease-out, border-color 180ms ease-out;
}

.kdpd-panel__link a:hover,
.kdpd-panel__link a:focus { color: var(--kdpd-olive-hover); border-bottom-color: var(--kdpd-olive-hover); }

.kdpd-stagenote {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--kdpd-border);
	font-size: 13px;
	line-height: 1.6;
	color: var(--kdpd-text-muted);
}

/* ============================================================
 * 02 — PROBLEM
 * ============================================================ */

.kdpd-problems {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 clamp(24px, 4vw, 56px);
	border-top: 1px solid var(--kdpd-border);
}

.kdpd-problem { padding: 20px 0; border-bottom: 1px solid var(--kdpd-border); }

.kdpd-problem__title {
	margin: 0 0 6px;
	font-family: var(--kdpd-sans);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--kdpd-text);
}

.kdpd-problem__body { margin: 0; font-size: 15px; line-height: 1.6; color: var(--kdpd-text-secondary); }

/* ============================================================
 * 03 — THREE OUTPUT LAYERS
 * ============================================================ */

.kdpd-layers {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 20px;
	align-items: start;
}

.kdpd-layer {
	background: var(--kdpd-surface-card);
	border: 1px solid var(--kdpd-border);
	padding: 24px;
}

.kdpd-layer--primary {
	border-color: var(--kdpd-border-strong);
	border-top: 3px solid var(--kdpd-olive);
	padding: clamp(24px, 3vw, 36px);
}

.kdpd-layer--secondary { border-top: 2px solid var(--kdpd-orange); }

.kdpd-layer__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 10px;
}

.kdpd-layer__number {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--kdpd-ls-label);
	text-transform: uppercase;
	color: var(--kdpd-olive);
}

.kdpd-layer__number--orange { color: var(--kdpd-orange); }
.kdpd-layer__number--blue { color: var(--kdpd-blue); display: block; margin: 0 0 8px; }

.kdpd-badge {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #FFFFFF;
	background: var(--kdpd-olive);
	padding: 3px 9px;
	border-radius: var(--kdpd-radius-pill);
}

.kdpd-layer__title {
	margin: 0 0 12px;
	max-width: 22ch;
	font-family: var(--kdpd-serif);
	font-size: clamp(23px, 2.3vw, 30px);
	font-weight: 500;
	line-height: 1.26;
}

.kdpd-layer__title--sm { font-size: 21px; max-width: 24ch; }

.kdpd-layer__body {
	margin: 0 0 20px;
	max-width: 48ch;
	font-size: 15px;
	line-height: 1.65;
	color: var(--kdpd-text-secondary);
}

.kdpd-layer__grid {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--kdpd-border);
	border: 1px solid var(--kdpd-border);
}

.kdpd-layer__grid li {
	background: var(--kdpd-surface-card);
	padding: 12px 14px;
	font-size: 14px;
	color: var(--kdpd-text-secondary);
}

.kdpd-layer__rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--kdpd-border); }

.kdpd-layer__rows li {
	padding: 9px 0;
	border-bottom: 1px solid var(--kdpd-border);
	font-size: 14px;
	color: var(--kdpd-text-secondary);
}

.kdpd-support {
	margin-top: 20px;
	display: grid;
	grid-template-columns: minmax(260px, 1fr) minmax(260px, 1.2fr);
	gap: 16px 40px;
	align-items: start;
	background: var(--kdpd-surface-sunken);
	border: 1px solid var(--kdpd-border);
	border-left: 2px solid var(--kdpd-blue);
	padding: 22px 24px;
}

.kdpd-support__title { margin: 0 0 6px; font-size: 17px; font-weight: 600; }

.kdpd-support__body { margin: 0; max-width: 44ch; font-size: 14px; line-height: 1.6; color: var(--kdpd-text-muted); }

.kdpd-chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }

.kdpd-chips li {
	background: var(--kdpd-surface-card);
	border: 1px solid var(--kdpd-border);
	border-radius: var(--kdpd-radius-pill);
	padding: 6px 12px;
	font-size: 13px;
	color: var(--kdpd-text-secondary);
}

/* ============================================================
 * 04 — TRANSFORMATION SYSTEM
 * ============================================================ */

.kdpd-tcols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--kdpd-border);
	border: 1px solid var(--kdpd-border);
}

.kdpd-tcol { background: var(--kdpd-surface-card); padding: 24px; }
.kdpd-tcol--system { background: var(--kdpd-surface-sunken); }

.kdpd-tcol__meta {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 6px;
	font-size: 13px;
	color: var(--kdpd-text-muted);
}

.kdpd-tcol__number {
	font-family: var(--kdpd-serif);
	font-size: 24px;
	line-height: 1;
	color: var(--kdpd-olive);
}

.kdpd-tcol--output .kdpd-tcol__number { color: var(--kdpd-orange); }

.kdpd-tcol__title {
	margin: 0 0 14px;
	font-family: var(--kdpd-sans);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.kdpd-tcol__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--kdpd-border); }

.kdpd-tcol__list li {
	padding: 9px 0;
	border-bottom: 1px solid var(--kdpd-border);
	font-size: 14px;
	color: var(--kdpd-text-secondary);
}

/* ============================================================
 * 05 — KIM TRẦN — transformation chain
 * ============================================================
 * source materials → organisation → coordinated outputs.
 * Not an equal-weight gallery: the sources sit smaller and cooler, the outputs
 * larger and warmer, with an explicit bridge between them.
 */

.kdpd-case__head {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
	margin-bottom: clamp(28px, 4vw, 40px);
}

.kdpd-wip {
	background: var(--kdpd-surface-card);
	border: 1px solid var(--kdpd-border);
	border-left: 2px solid var(--kdpd-orange);
	padding: 20px 22px;
}

.kdpd-wip__list { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.65; color: var(--kdpd-text-secondary); }
.kdpd-wip__list li + li { margin-top: 6px; }

.kdpd-chainblock { margin-bottom: 32px; }

.kdpd-chainstep {
	background: var(--kdpd-surface-card);
	border: 1px solid var(--kdpd-border);
	padding: clamp(18px, 2.4vw, 26px);
}

.kdpd-chainstep--sources { background: var(--kdpd-surface-sunken); border-left: 2px solid var(--kdpd-blue); }
.kdpd-chainstep--outputs { border-left: 2px solid var(--kdpd-orange); }

.kdpd-chainstep__head { margin-bottom: 18px; }
.kdpd-chainstep__head .kdpd-minilabel { margin-bottom: 4px; }
.kdpd-chainstep__note { margin: 0; font-size: 13px; color: var(--kdpd-text-muted); }

.kdpd-chainbridge {
	display: grid;
	justify-items: center;
	gap: 4px;
	padding: 18px 20px;
	text-align: center;
}

.kdpd-chainbridge__mark { font-size: 15px; line-height: 1; color: var(--kdpd-border-strong); }

.kdpd-chainbridge__label {
	margin: 4px 0 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--kdpd-ls-label);
	text-transform: uppercase;
	color: var(--kdpd-olive);
}

.kdpd-chainbridge__note { margin: 0 0 4px; max-width: 52ch; font-size: 13px; line-height: 1.6; color: var(--kdpd-text-muted); }

.kdpd-caseassets {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 16px;
}

.kdpd-caseassets--sources { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
.kdpd-caseassets--outputs { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }

.kdpd-caseasset { min-width: 0; background: var(--kdpd-surface-card); border: 1px solid var(--kdpd-border); }
.kdpd-caseasset figure { margin: 0; }
.kdpd-caseasset figcaption { padding: 12px 14px; }

.kdpd-caseasset__title { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 3px; }
.kdpd-caseasset__caption { display: block; font-size: 12.5px; line-height: 1.5; color: var(--kdpd-text-muted); }

.kdpd-outcome {
	max-width: 68ch;
	background: var(--kdpd-surface-card);
	border: 1px solid var(--kdpd-border);
	border-left: 2px solid var(--kdpd-olive);
	padding: 20px 24px;
}

.kdpd-outcome .kdpd-minilabel { color: var(--kdpd-olive); }
.kdpd-outcome__body { margin: 0; font-size: 15px; line-height: 1.65; color: var(--kdpd-text-secondary); }

/* ============================================================
 * 06 — PROCESS
 * ============================================================ */

.kdpd-section--process { background: var(--kdpd-ink); }
.kdpd-section--process.kdpd-section + .kdpd-section { border-top: 0; }

.kdpd-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--kdpd-border-on-dark);
	border: 1px solid var(--kdpd-border-on-dark);
}

.kdpd-step { background: var(--kdpd-ink); padding: 24px; }

.kdpd-step__number {
	display: block;
	margin-bottom: 14px;
	font-family: var(--kdpd-serif);
	font-size: 34px;
	line-height: 1;
	color: var(--kdpd-olive-light);
}

.kdpd-step__title { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--kdpd-text-inverse); }
.kdpd-step__body { margin: 0; font-size: 14px; line-height: 1.6; color: var(--kdpd-text-on-dark-muted); }

/* ============================================================
 * 07 — TRUST / QUALIFICATION
 * ============================================================ */

.kdpd-trust {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}

.kdpd-qualification { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.65; color: var(--kdpd-text-muted); }

.kdpd-points { margin: 0; display: grid; border-top: 1px solid var(--kdpd-border); }

.kdpd-point { padding: 14px 0; border-bottom: 1px solid var(--kdpd-border); }
.kdpd-point dt { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.kdpd-point dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--kdpd-text-secondary); }

/* ============================================================
 * 08 — FINAL CTA
 * ============================================================ */

.kdpd-section--cta { background: var(--kdpd-olive); }
.kdpd-section--cta.kdpd-section + .kdpd-section { border-top: 0; }

.kdpd-cta {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
}

.kdpd-cta__body { margin: 14px 0 0; max-width: 48ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: #DDE1D6; }

.kdpd-actions--cta { justify-content: flex-start; }

/* ============================================================
 * BREAKPOINTS
 * ============================================================
 * Verified at 1440 / 1280 / 1024 / 768 / 390 / 360.
 *
 * Every cluster on this page is a plain grid — no absolute positioning, no
 * collage offsets, no transforms that extend a box — so collapsing is a matter
 * of changing column counts. Each grid child carries min-width: 0 so it can
 * shrink below its content width instead of pushing the page wider.
 */

@media (max-width: 900px) {
	.kdpd-hero { grid-template-columns: 1fr; }
	.kdpd-layers { grid-template-columns: 1fr; }
	.kdpd-support { grid-template-columns: 1fr; }
	.kdpd-tcols { grid-template-columns: 1fr; }
	.kdpd-case__head { grid-template-columns: 1fr; }
	.kdpd-steps { grid-template-columns: repeat(2, 1fr); }
	.kdpd-trust { grid-template-columns: 1fr; }
	.kdpd-cta { grid-template-columns: 1fr; }

	/* Stage 03 outputs: two up. Kim Trần outputs: two up. */
	.kdpd-caseassets--outputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
 * BREAKPOINT — 560px
 * ============================================================
 * Stage tabs stay in ONE horizontal row, sharing width equally, 44px targets.
 * Every asset cluster becomes a single clean column.
 */

@media (max-width: 560px) {
	.kdpd-stagebox__tabs { flex-wrap: nowrap; gap: 6px; }

	.kdpd-stagetab {
		flex: 1 1 0;
		min-width: 0;
		font-size: 11px;
		letter-spacing: 0.05em;
	}

	.kdpd-assets--sources,
	.kdpd-assets--outputs,
	.kdpd-caseassets--sources,
	.kdpd-caseassets--outputs { grid-template-columns: minmax(0, 1fr); }

	.kdpd-problems { grid-template-columns: 1fr; }
	.kdpd-layer__grid { grid-template-columns: 1fr; }
	.kdpd-steps { grid-template-columns: 1fr; }

	/*
	 * Portrait frames (9:16, 3:4) resolve to 500px+ tall at full column width
	 * via aspect-ratio, which is what previously made blocks collide. Capped
	 * and centred so each asset stays compact and in order.
	 */
	.kdpd-frame--portrait {
		max-width: 220px;
		margin-inline: auto;
	}

	.kdpd-asset figcaption { padding-top: 6px; }
	.kdpd-caseasset figcaption { padding: 11px 13px; }
	.kdpd-frame__label { font-size: 10px; letter-spacing: 0.04em; }

	.kdpd-chain__step { padding: 10px 12px; }
	.kdpd-taglist li { font-size: 12px; padding: 5px 10px; }

	.kdpd-h1 { max-width: none; }
	.kdpd-btn { width: 100%; }
	.kdpd-actions { gap: 10px; }
	.kdpd-chainstep { padding: 16px; }
	.kdpd-chainbridge { padding: 14px 8px; }
}

/* 360px — the narrowest supported width. */
@media (max-width: 400px) {
	.kdpd-frame--portrait { max-width: 190px; }
	.kdpd-assets { gap: 10px; }
	.kdpd-caseassets { gap: 12px; }
	.kdpd-stagetab { padding-right: 2px; }
}

/* ============================================================
 * OVERFLOW GUARDS
 * ============================================================
 * Boundaries, not fixes — the layouts above collapse correctly on their own.
 */

.kdpd-page img,
.kdpd-page svg,
.kdpd-page figure,
.kdpd-page ul,
.kdpd-page ol,
.kdpd-page dl { max-width: 100%; }

.kdpd-stagebox { overflow-x: clip; }

.kdpd-layers > *,
.kdpd-tcols > *,
.kdpd-support > *,
.kdpd-case__head > *,
.kdpd-trust > *,
.kdpd-cta > *,
.kdpd-steps > *,
.kdpd-problems > *,
.kdpd-assets > *,
.kdpd-caseassets > * { min-width: 0; }

/* ============================================================
 * REDUCED MOTION
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.kdpd-page *,
	.kdpd-page *::before,
	.kdpd-page *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.kdpd-page { scroll-behavior: auto; }
}

/* ============================================================
 * PRINT
 * ============================================================ */

@media print {
	/* Reveal every stage panel so a printed page loses nothing. */
	.kdpd-stagebox[data-kdpd-ready] .kdpd-panel { display: block !important; animation: none !important; }
	.kdpd-stagebox[data-kdpd-ready] .kdpd-panel[hidden] { display: block !important; }
}