/* Hallmark v2.0.0 · genre: modern-minimal · shape: Workbench · theme: custom (ProWebLook brand system) · signature: interactive multi-surface payload and formula inspector */
/* Hallmark · pre-emit critique: P4 H5 E5 S5 R4 V4 · weakest: R, cut decorative status pills above headings so every card and section opens directly with its title and real API contract */
/* Hallmark · waive 7b · surface: absolute · modern-minimal light brand palette matches shared ProWebLook Front header and footer */
/* Hallmark · dismissed 58 · technical integration guides intentionally include complete setup steps, three starter configs, and five FAQs for search indexing */

:root {
	--int-ink: #152b49;
	--int-muted: #4c5f76;
	--int-blue: #1658bd;
	--int-blue-hover: #104596;
	--int-blue-soft: #edf3fd;
	--int-emerald: #176649;
	--int-emerald-soft: #eaf6f0;
	--int-surface: #fcfcfa;
	--int-paper: #ffffff;
	--int-band: #f3f6fb;
	--int-code-bg: #111c2d;
	--int-code-ink: #e8eff8;
	--int-border: #cfd9e6;
	--int-border-strong: #9fb2c9;
	--int-shadow: 0 12px 20px -8px rgba(21, 43, 73, 0.12);
	--int-font-sans: "Nunito Sans", "Segoe UI", sans-serif;
	--int-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

html,
body {
	overflow-x: clip;
}

.pwl-int-page {
	color: var(--int-ink);
	background: var(--int-paper);
	font-family: var(--int-font-sans);
	font-size: 16px;
	line-height: 1.6;
	overflow-x: clip;
	caret-color: var(--int-blue);
}

.pwl-int-page ::selection {
	background: var(--int-blue-soft);
	color: var(--int-ink);
}

.pwl-int-page * {
	box-sizing: border-box;
}

.pwl-int-page h1,
.pwl-int-page h2,
.pwl-int-page h3 {
	color: var(--int-ink);
	font-family: var(--int-font-sans);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.16;
	overflow-wrap: break-word;
	min-width: 0;
}

.pwl-int-page h1,
.pwl-int-page h2 {
	text-wrap: balance;
}

.pwl-int-page h1 {
	font-size: clamp(2.25rem, 4vw, 3.6rem);
	margin: 16px 0 16px;
	max-width: 16ch;
}

.pwl-int-page h2 {
	font-size: clamp(1.9rem, 2.9vw, 2.65rem);
	margin: 0 0 16px;
	max-width: 26ch;
}

.pwl-int-page h3 {
	font-size: 1.2rem;
	margin: 0 0 8px;
}

.pwl-int-page p {
	margin: 0 0 16px;
	max-width: 65ch;
}

.pwl-int-page a {
	color: var(--int-blue);
}

.pwl-int-page a:focus-visible,
.pwl-int-page button:focus-visible,
.pwl-int-page summary:focus-visible {
	outline: 3px solid var(--int-blue);
	outline-offset: 4px;
	border-radius: 4px;
}

.pwl-int-page section[id] {
	scroll-margin-top: 128px;
}

.pwl-int-page .int-shell {
	width: min(1240px, calc(100% - 64px));
	margin-inline: auto;
}

.pwl-int-page .int-hero {
	background: var(--int-surface);
	padding: 56px 0 64px;
	border-bottom: 1px solid var(--int-border);
}

.pwl-int-page .int-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
	align-items: center;
	gap: 48px;
}

.pwl-int-page .int-back-link {
	display: inline-flex;
	align-items: center;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--int-blue);
	text-decoration: underline;
	text-underline-offset: 4px;
	white-space: nowrap;
}

.pwl-int-page .int-lead {
	color: var(--int-muted);
	font-size: 1.1rem;
	max-width: 56ch;
	margin: 0 0 24px;
}

.pwl-int-page .int-copy-box {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 16px;
	background: var(--int-paper);
	border: 1px solid var(--int-border-strong);
	border-radius: 12px;
	padding: 12px 16px;
	margin: 0 0 24px;
	max-width: 560px;
}

.pwl-int-page .int-copy-meta {
	min-width: 0;
}

.pwl-int-page .int-copy-label {
	display: block;
	font-size: 0.85rem;
	color: var(--int-muted);
	margin: 0 0 4px;
}

.pwl-int-page .int-copy-box code {
	font-family: var(--int-font-mono);
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--int-ink);
	overflow-wrap: break-word;
}

.pwl-int-page .int-copy-btn {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--int-blue);
	border: 1px solid var(--int-border-strong);
	border-radius: 8px;
	padding: 8px 16px;
	font-family: var(--int-font-sans);
	font-size: 0.9rem;
	font-weight: 800;
	min-height: 44px;
	white-space: nowrap;
	cursor: pointer;
	transition: opacity 150ms ease, transform 150ms ease;
}

.pwl-int-page .int-copy-btn:hover {
	opacity: 0.9;
}

.pwl-int-page .int-copy-btn:active {
	transform: scale(0.98);
}

.pwl-int-page .int-copy-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.pwl-int-page .int-copy-status {
	font-size: 0.85rem;
	color: var(--int-emerald);
	font-weight: 700;
	min-height: 20px;
}

.pwl-int-page .int-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 20px;
}

.pwl-int-page .int-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	border-radius: 8px;
	font-size: 0.95rem;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
	min-height: 48px;
	transition: opacity 150ms ease, transform 150ms ease;
}

.pwl-int-page .int-btn:active {
	transform: scale(0.98);
}

.pwl-int-page .int-btn-primary {
	background: var(--int-blue);
	color: var(--int-paper);
	border: 1px solid var(--int-blue);
}

.pwl-int-page .int-btn-primary:hover {
	background: var(--int-blue-hover);
	border-color: var(--int-blue-hover);
	color: var(--int-paper);
}

.pwl-int-page .int-btn-ghost {
	background: transparent;
	color: var(--int-ink);
	border: 1px solid var(--int-border-strong);
}

.pwl-int-page .int-btn-ghost:hover {
	color: var(--int-blue);
}

.pwl-int-page .int-link {
	font-weight: 800;
	font-size: 0.94rem;
	text-decoration: underline;
	text-underline-offset: 4px;
	white-space: nowrap;
}

.pwl-int-page .int-note {
	color: var(--int-muted);
	font-size: 0.88rem;
	margin: 20px 0 0;
	max-width: 56ch;
}

.pwl-int-page .int-stage {
	background: var(--int-paper);
	border: 1px solid var(--int-border);
	border-radius: 16px;
	box-shadow: var(--int-shadow);
	padding: 24px;
}

.pwl-int-page .int-stage-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--int-border);
}

.pwl-int-page .int-stage-head h2 {
	font-size: 1.28rem;
	margin: 0 0 4px;
}

.pwl-int-page .int-stage-head p {
	font-size: 0.88rem;
	color: var(--int-muted);
	margin: 0;
}

.pwl-int-page .int-stage-mark {
	flex-shrink: 0;
	font-size: 0.86rem;
	font-weight: 800;
	color: var(--int-emerald);
	background: var(--int-emerald-soft);
	padding: 8px 12px;
	border-radius: 8px;
	white-space: nowrap;
}

.pwl-int-page .int-pipeline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 16px 0;
	border-bottom: 1px solid var(--int-border);
	margin: 0 0 16px;
}

.pwl-int-page .int-pipe-step {
	font-size: 0.84rem;
	font-weight: 700;
	color: var(--int-ink);
}

.pwl-int-page .int-pipe-step.is-accent {
	color: var(--int-blue);
	font-weight: 800;
}

.pwl-int-page .int-pipe-line {
	flex: 1 1 16px;
	height: 2px;
	background: var(--int-border);
	min-width: 16px;
}

.pwl-int-page .int-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

.pwl-int-page .int-tab {
	background: var(--int-band);
	color: var(--int-ink);
	border: 1px solid var(--int-border-strong);
	border-radius: 8px;
	padding: 8px 12px;
	font-family: var(--int-font-sans);
	font-size: 0.85rem;
	font-weight: 800;
	min-height: 44px;
	white-space: nowrap;
	cursor: pointer;
}

.pwl-int-page .int-tab:active {
	transform: scale(0.98);
}

.pwl-int-page .int-tab:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.pwl-int-page .int-tab.is-active {
	background: var(--int-blue);
	border-color: var(--int-blue);
	color: var(--int-paper);
}

.pwl-int-page .int-panel.is-hidden {
	display: none;
}

.pwl-int-page .int-expr {
	font-size: 0.86rem;
	color: var(--int-muted);
	margin: 0 0 12px;
}

.pwl-int-page .int-expr code {
	font-family: var(--int-font-mono);
	color: var(--int-ink);
	font-weight: 700;
}

.pwl-int-page .int-code {
	margin: 0;
	background: var(--int-code-bg);
	color: var(--int-code-ink);
	border-radius: 12px;
	padding: 16px;
	font-family: var(--int-font-mono);
	font-size: 0.82rem;
	line-height: 1.5;
	overflow-x: auto;
}

.pwl-int-page .int-section-band {
	padding: 72px 0;
	background: var(--int-band);
	border-block: 1px solid var(--int-border);
}

.pwl-int-page .int-section-paper {
	padding: 80px 0;
	background: var(--int-paper);
}

.pwl-int-page .int-section-surface {
	padding: 64px 0;
	background: var(--int-surface);
	border-top: 1px solid var(--int-border);
}

.pwl-int-page .int-section-head {
	max-width: 65ch;
	margin: 0 0 36px;
}

.pwl-int-page .int-section-head p {
	color: var(--int-muted);
	margin: 0;
}

.pwl-int-page .int-filter-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 0 0 28px;
}

.pwl-int-page .int-filter-btn {
	background: var(--int-paper);
	color: var(--int-ink);
	border: 1px solid var(--int-border-strong);
	border-radius: 8px;
	padding: 8px 16px;
	font-family: var(--int-font-sans);
	font-size: 0.9rem;
	font-weight: 800;
	min-height: 44px;
	white-space: nowrap;
	cursor: pointer;
}

.pwl-int-page .int-filter-btn:active {
	transform: scale(0.98);
}

.pwl-int-page .int-filter-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.pwl-int-page .int-filter-btn.is-active {
	background: var(--int-blue);
	border-color: var(--int-blue);
	color: var(--int-paper);
}

.pwl-int-page .int-filter-status {
	font-size: 0.88rem;
	color: var(--int-muted);
	font-weight: 700;
	margin-left: auto;
	min-height: 24px;
}

.pwl-int-page .int-dir-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.pwl-int-page .int-dir-card {
	display: flex;
	flex-direction: column;
	background: var(--int-paper);
	border: 1px solid var(--int-border);
	border-radius: 12px;
	padding: 24px;
}

.pwl-int-page .int-dir-card.is-filtered-out {
	display: none;
}

.pwl-int-page .int-card-sub {
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--int-emerald);
	margin: 0 0 12px;
}

.pwl-int-page .int-dir-card p {
	color: var(--int-muted);
	font-size: 0.94rem;
}

.pwl-int-page .int-signal-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	padding: 12px 0 0;
	margin: auto 0 16px;
	border-top: 1px solid var(--int-border);
}

.pwl-int-page .int-signal-row li {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--int-ink);
	background: var(--int-band);
	padding: 4px 8px;
	border-radius: 4px;
}

.pwl-int-page .int-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--int-border);
	border-radius: 12px;
	background: var(--int-paper);
}

.pwl-int-page .int-matrix {
	width: 100%;
	border-collapse: collapse;
	min-width: 720px;
}

.pwl-int-page .int-matrix th,
.pwl-int-page .int-matrix td {
	text-align: left;
	padding: 16px;
	border-bottom: 1px solid var(--int-border);
	font-size: 0.92rem;
}

.pwl-int-page .int-matrix thead th {
	background: var(--int-band);
	color: var(--int-ink);
	font-weight: 800;
	font-size: 0.9rem;
}

.pwl-int-page .int-matrix tbody tr:last-child th,
.pwl-int-page .int-matrix tbody tr:last-child td {
	border-bottom: 0;
}

.pwl-int-page .int-matrix-yes {
	color: var(--int-emerald);
	font-weight: 800;
}

.pwl-int-page .int-matrix-no {
	color: var(--int-muted);
}

.pwl-int-page .int-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	counter-reset: int-step;
}

.pwl-int-page .int-steps li {
	counter-increment: int-step;
	background: var(--int-paper);
	border: 1px solid var(--int-border);
	border-radius: 12px;
	padding: 24px;
}

.pwl-int-page .int-steps h3::before {
	content: counter(int-step) ". ";
	color: var(--int-blue);
}

.pwl-int-page .int-steps p {
	color: var(--int-muted);
	font-size: 0.93rem;
	margin: 0 0 12px;
}

.pwl-int-page .int-resource-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 28px;
}

.pwl-int-page .int-cap-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.pwl-int-page .int-cap-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--int-border);
	border-radius: 12px;
	padding: 24px;
	background: var(--int-paper);
}

.pwl-int-page .int-cap-cost {
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--int-blue);
	margin: 0 0 12px;
}

.pwl-int-page .int-cap-card p {
	color: var(--int-muted);
	font-size: 0.94rem;
}

.pwl-int-page .int-cap-card .int-link {
	margin-top: auto;
}

.pwl-int-page .int-bp-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.pwl-int-page .int-bp-card {
	display: flex;
	flex-direction: column;
	background: var(--int-paper);
	border: 1px solid var(--int-border);
	border-radius: 12px;
	padding: 24px;
}

.pwl-int-page .int-bp-card p {
	color: var(--int-muted);
	font-size: 0.92rem;
}

.pwl-int-page .int-bp-pre {
	margin: 0 0 16px;
	max-height: 220px;
	overflow: auto;
	background: var(--int-code-bg);
	color: var(--int-code-ink);
	border-radius: 8px;
	padding: 16px;
	font-family: var(--int-font-mono);
	font-size: 0.78rem;
	line-height: 1.5;
}

.pwl-int-page .int-bp-foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: auto;
}

.pwl-int-page .int-bp-foot .int-copy-btn {
	margin-left: 0;
}

.pwl-int-page .int-faq-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
	gap: 48px;
}

.pwl-int-page .int-faq details {
	border-bottom: 1px solid var(--int-border);
	padding: 20px 0;
}

.pwl-int-page .int-faq details:first-child {
	padding-top: 0;
}

.pwl-int-page .int-faq summary {
	cursor: pointer;
	font-weight: 800;
	font-size: 1.04rem;
	color: var(--int-ink);
}

.pwl-int-page .int-faq-body {
	padding-top: 12px;
	color: var(--int-muted);
	font-size: 0.95rem;
}

.pwl-int-page .int-faq-body p:last-child {
	margin-bottom: 0;
}

.pwl-int-page .int-closing p {
	color: var(--int-muted);
	max-width: 58ch;
	margin: 0 0 24px;
}

@media (prefers-reduced-motion: reduce) {
	.pwl-int-page .int-copy-btn,
	.pwl-int-page .int-btn {
		transition: none;
	}
}

@media (max-width: 1080px) {
	.pwl-int-page .int-hero-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
	.pwl-int-page .int-dir-grid,
	.pwl-int-page .int-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.pwl-int-page .int-bp-grid,
	.pwl-int-page .int-faq-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}

@media (max-width: 640px) {
	.pwl-int-page .int-shell {
		width: calc(100% - 32px);
	}
	.pwl-int-page .int-hero {
		padding: 40px 0 48px;
	}
	.pwl-int-page .int-section-band,
	.pwl-int-page .int-section-paper,
	.pwl-int-page .int-section-surface {
		padding: 48px 0;
	}
	.pwl-int-page .int-dir-grid,
	.pwl-int-page .int-steps,
	.pwl-int-page .int-cap-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}