/* Automation Bridge public demo — intentionally scoped to the demo template. */
@font-face {
	font-display: swap;
	font-family: "Vazir Demo";
	font-style: normal;
	font-weight: 400;
	src: url("fonts/vazir-400.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "Vazir Demo";
	font-style: normal;
	font-weight: 700;
	src: url("fonts/vazir-700.woff2") format("woff2");
}

body.wab-demo-page {
	--wab-ink: #111814;
	--wab-ink-soft: #202a24;
	--wab-paper: #f8f8f3;
	--wab-surface: #ffffff;
	--wab-surface-soft: #eef2e9;
	--wab-line: #d4dbd1;
	--wab-muted: #5b675f;
	--wab-accent: #d6ff52;
	--wab-accent-dark: #587500;
	--wab-success: #bff56b;
	--wab-error: #ff9c8c;
	--wab-radius: 18px;
	--wab-shadow: 0 24px 70px rgb(17 24 20 / 10%);
	background: var(--wab-paper);
	margin: 0;
	max-width: none;
	padding: 0;
	overflow-x: hidden;
}

body.wab-demo-page .wab-public-demo {
	background: var(--wab-paper);
	color: var(--wab-ink);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.6;
	min-height: 100vh;
	text-align: start;
	width: 100%;
	overflow-x: clip;
}

body.wab-demo-page .wab-public-demo,
body.wab-demo-page .wab-public-demo *,
body.wab-demo-page .wab-public-demo *::before,
body.wab-demo-page .wab-public-demo *::after {
	box-sizing: border-box;
}

body.wab-demo-page .wab-public-demo a {
	color: inherit;
	text-decoration: none;
}

body.wab-demo-page .wab-public-demo button,
body.wab-demo-page .wab-public-demo input,
body.wab-demo-page .wab-public-demo textarea,
body.wab-demo-page .wab-public-demo select {
	font: inherit;
}

body.wab-demo-page .wab-demo-container {
	margin-inline: auto;
	max-width: 1240px;
	padding-inline: clamp(20px, 4vw, 48px);
	width: 100%;
}

/* Header */
body.wab-demo-page .wab-demo-header {
	margin: 16px auto 0;
	padding-inline: 16px;
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 14px);
	z-index: 50;
}

body.wab-demo-page .wab-demo-header__inner {
	align-items: center;
	background: rgb(248 248 243 / 90%);
	border: 1px solid rgb(17 24 20 / 16%);
	border-radius: 999px;
	box-shadow: 0 12px 35px rgb(17 24 20 / 8%);
	display: flex;
	justify-content: space-between;
	min-height: 64px;
	padding: 8px 12px 8px 20px;
	position: relative;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

body.wab-demo-page .wab-public-demo[dir="rtl"] .wab-demo-header__inner {
	padding: 8px 20px 8px 12px;
}

body.wab-demo-page .wab-demo-brand {
	align-items: center;
	display: inline-flex;
	font-size: 21px;
	font-weight: 900;
	letter-spacing: -0.06em;
	line-height: 1;
	white-space: nowrap;
}

body.wab-demo-page .wab-demo-brand span {
	color: var(--wab-accent-dark);
	font-size: 18px;
	margin-inline-start: 4px;
}

body.wab-demo-page .wab-demo-navigation {
	align-items: center;
	display: flex;
	font-size: 14px;
	font-weight: 680;
	gap: clamp(16px, 2.4vw, 30px);
}

body.wab-demo-page .wab-demo-navigation > a {
	transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

body.wab-demo-page .wab-demo-navigation > a:not(.wab-demo-language):hover {
	color: var(--wab-accent-dark);
}

body.wab-demo-page .wab-demo-language {
	border: 1px solid var(--wab-ink);
	border-radius: 999px;
	line-height: 1;
	padding: 10px 15px;
}

body.wab-demo-page .wab-demo-language:hover {
	background: var(--wab-ink);
	color: var(--wab-surface);
}

body.wab-demo-page .wab-demo-menu {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	display: none;
	flex-direction: column;
	height: 42px;
	justify-content: center;
	padding: 8px;
	width: 42px;
}

body.wab-demo-page .wab-demo-menu > span:not(.screen-reader-text) {
	background: var(--wab-ink);
	border-radius: 2px;
	display: block;
	height: 2px;
	margin: 2px 0;
	transition: transform 160ms ease, opacity 160ms ease;
	width: 22px;
}

body.wab-demo-page .wab-demo-menu[aria-expanded="true"] > span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

body.wab-demo-page .wab-demo-menu[aria-expanded="true"] > span:nth-child(2) {
	opacity: 0;
}

body.wab-demo-page .wab-demo-menu[aria-expanded="true"] > span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* Shared type and controls */
body.wab-demo-page .wab-demo-eyebrow {
	color: var(--wab-accent-dark);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	line-height: 1.5;
	margin: 0 0 18px;
	text-transform: uppercase;
}

body.wab-demo-page .wab-demo-hero h1,
body.wab-demo-page .wab-demo-section h2 {
	color: inherit;
	font-family: inherit;
	font-size: clamp(42px, 5.6vw, 78px);
	font-weight: 780;
	letter-spacing: -0.065em;
	line-height: 0.98;
	margin: 0;
	max-width: 820px;
	text-wrap: balance;
}

body.wab-demo-page .wab-demo-section h2 {
	font-size: clamp(34px, 4vw, 56px);
}

body.wab-demo-page .wab-demo-lede,
body.wab-demo-page .wab-demo-section-heading > p:not(.wab-demo-eyebrow),
body.wab-demo-page .wab-demo-payload__grid > div > p,
body.wab-demo-page .wab-demo-security__card > div > p,
body.wab-demo-page .wab-demo-cta .wab-demo-container > p:not(.wab-demo-eyebrow) {
	color: var(--wab-muted);
	font-size: clamp(16px, 1.5vw, 19px);
	line-height: 1.7;
	max-width: 660px;
}

body.wab-demo-page .wab-demo-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 34px;
}

body.wab-demo-page .wab-demo-button {
	align-items: center;
	appearance: none;
	border: 1px solid var(--wab-ink);
	border-radius: 5px;
	cursor: pointer;
	display: inline-flex;
	font-size: 15px;
	font-weight: 760;
	gap: 18px;
	justify-content: center;
	line-height: 1.25;
	min-height: 54px;
	padding: 14px 19px;
	text-align: center;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

body.wab-demo-page .wab-demo-button:hover {
	transform: translateY(-2px);
}

body.wab-demo-page .wab-demo-button:disabled {
	cursor: wait;
	opacity: 0.62;
	transform: none;
}

body.wab-demo-page .wab-public-demo .wab-demo-button--primary {
	background: var(--wab-ink);
	color: var(--wab-surface);
}

body.wab-demo-page .wab-public-demo .wab-demo-button--primary:hover {
	background: var(--wab-ink-soft);
	box-shadow: 0 10px 24px rgb(17 24 20 / 18%);
}

body.wab-demo-page .wab-demo-button--quiet {
	background: transparent;
}

body.wab-demo-page .wab-demo-button--quiet:hover {
	background: var(--wab-surface-soft);
}

body.wab-demo-page .wab-public-demo :focus-visible {
	outline: 3px solid #749500;
	outline-offset: 4px;
}

/* Hero */
body.wab-demo-page .wab-demo-hero {
	padding-block: clamp(78px, 10vw, 132px) clamp(88px, 10vw, 124px);
}

body.wab-demo-page .wab-demo-hero__grid {
	align-items: center;
	display: grid;
	gap: clamp(48px, 7vw, 90px);
	grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
}

body.wab-demo-page .wab-demo-hero__copy {
	min-width: 0;
}

body.wab-demo-page .wab-demo-hero .wab-demo-lede {
	margin: 27px 0 0;
}

body.wab-demo-page .wab-demo-note {
	color: var(--wab-muted);
	font-size: 13px;
	margin: 21px 0 0;
}

body.wab-demo-page .wab-demo-terminal {
	background: #111915;
	border: 1px solid #344239;
	border-radius: 10px;
	box-shadow: 16px 16px 0 var(--wab-accent), var(--wab-shadow);
	color: #dce6dd;
	min-width: 0;
	overflow: hidden;
	transform: rotate(0.4deg);
}

body.wab-demo-page .wab-demo-terminal__bar {
	align-items: center;
	background: #17211b;
	border-bottom: 1px solid #344239;
	display: flex;
	gap: 7px;
	min-height: 48px;
	padding: 0 17px;
}

body.wab-demo-page .wab-demo-terminal__bar i {
	background: var(--wab-accent);
	border-radius: 50%;
	display: block;
	height: 8px;
	width: 8px;
}

body.wab-demo-page .wab-demo-terminal__bar i:nth-child(2) {
	background: #8a9b8d;
}

body.wab-demo-page .wab-demo-terminal__bar i:nth-child(3) {
	background: #405046;
}

body.wab-demo-page .wab-demo-terminal__bar span {
	color: #8f9e92;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 12px;
	margin-inline-start: 7px;
}

body.wab-demo-page .wab-demo-terminal__body {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: clamp(12px, 1.1vw, 14px);
	line-height: 1.65;
	padding: 23px 21px 27px;
}

body.wab-demo-page .wab-demo-terminal__body p {
	border-inline-start: 1px solid #3a4a40;
	margin: 0;
	overflow-wrap: anywhere;
	padding: 11px 14px;
}

body.wab-demo-page .wab-demo-terminal__body b,
body.wab-demo-page .wab-demo-terminal__body em {
	color: var(--wab-accent);
	font-style: normal;
}

body.wab-demo-page .wab-demo-terminal__body span {
	color: #9dad9f;
}

/* Shared section layout */
body.wab-demo-page .wab-demo-section {
	padding-block: clamp(76px, 9vw, 118px);
}

body.wab-demo-page .wab-demo-section-heading {
	align-items: start;
	display: grid;
	gap: 20px 42px;
	grid-template-columns: minmax(150px, 0.55fr) minmax(0, 1.45fr);
}

body.wab-demo-page .wab-demo-section-heading > .wab-demo-eyebrow {
	grid-row: 1 / span 2;
}

body.wab-demo-page .wab-demo-section-heading > p:not(.wab-demo-eyebrow) {
	margin: 0;
}

/* Flow */
body.wab-demo-page .wab-demo-flow {
	border-block: 1px solid var(--wab-line);
}

body.wab-demo-page .wab-demo-flow__steps {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: 60px 0 0;
	padding: 0;
}

body.wab-demo-page .wab-demo-flow__steps li {
	border-top: 2px solid var(--wab-ink);
	display: flex;
	flex-direction: column;
	gap: 11px;
	min-width: 0;
	padding: 17px 6px 0 0;
	position: relative;
}

body.wab-demo-page .wab-public-demo[dir="rtl"] .wab-demo-flow__steps li {
	padding: 17px 0 0 6px;
}

body.wab-demo-page .wab-demo-flow__steps li:not(:last-child)::after {
	background: var(--wab-paper);
	content: "→";
	font-size: 20px;
	inset-inline-end: -13px;
	padding-inline: 5px;
	position: absolute;
	top: -17px;
}

body.wab-demo-page .wab-public-demo[dir="rtl"] .wab-demo-flow__steps li:not(:last-child)::after {
	content: "←";
}

body.wab-demo-page .wab-demo-flow__steps span {
	color: var(--wab-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 12px;
}

body.wab-demo-page .wab-demo-flow__steps strong {
	font-size: 17px;
	font-weight: 720;
	line-height: 1.35;
}

/* Live demo and progress */
body.wab-demo-page .wab-demo-live {
	background: var(--wab-ink);
	color: var(--wab-surface);
}

body.wab-demo-page .wab-demo-live__grid {
	align-items: center;
	display: grid;
	gap: clamp(46px, 7vw, 90px);
	grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
}

body.wab-demo-page .wab-demo-live .wab-demo-eyebrow {
	color: var(--wab-accent);
}

body.wab-demo-page .wab-demo-live .wab-demo-lede,
body.wab-demo-page .wab-demo-live__status {
	color: #b8c4ba;
}

body.wab-demo-page .wab-demo-live .wab-demo-lede {
	margin: 25px 0 27px;
}

body.wab-demo-page .wab-demo-live .wab-demo-button--primary {
	background: var(--wab-accent);
	border-color: var(--wab-accent);
	color: var(--wab-ink);
}

body.wab-demo-page .wab-demo-live .wab-demo-button--primary:hover {
	background: #e2ff85;
	box-shadow: 0 10px 28px rgb(214 255 82 / 18%);
}

body.wab-demo-page .wab-demo-live__status {
	font-size: 14px;
	margin: 17px 0 0;
	min-height: 24px;
	overflow-wrap: anywhere;
}

body.wab-demo-page .wab-demo-progress {
	background: #151f19;
	border: 1px solid #3a493f;
	border-radius: var(--wab-radius);
	box-shadow: 0 22px 60px rgb(0 0 0 / 20%);
	padding: clamp(22px, 3vw, 34px);
}

body.wab-demo-page .wab-demo-progress ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.wab-demo-page .wab-demo-progress li {
	align-items: center;
	color: #839187;
	display: grid;
	font-size: 15px;
	gap: 15px;
	grid-template-columns: 28px minmax(0, 1fr);
	min-height: 52px;
	position: relative;
	transition: color 180ms ease;
}

body.wab-demo-page .wab-demo-progress li:not(:last-child)::after {
	background: #425047;
	content: "";
	height: 14px;
	inset-inline-start: 13px;
	position: absolute;
	top: 39px;
	width: 1px;
}

body.wab-demo-page .wab-demo-progress li b {
	align-items: center;
	border: 1px solid #5a695f;
	border-radius: 50%;
	display: inline-flex;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 12px;
	height: 28px;
	justify-content: center;
	width: 28px;
}

body.wab-demo-page .wab-demo-progress li.is-active,
body.wab-demo-page .wab-demo-progress li.is-done {
	color: var(--wab-surface);
}

body.wab-demo-page .wab-demo-progress li.is-active b {
	border-color: var(--wab-accent);
	box-shadow: 0 0 0 5px rgb(214 255 82 / 12%);
	color: var(--wab-accent);
}

body.wab-demo-page .wab-demo-progress li.is-done b {
	background: var(--wab-accent);
	border-color: var(--wab-accent);
	color: var(--wab-ink);
}

body.wab-demo-page .wab-demo-progress li.is-done:not(:last-child)::after {
	background: var(--wab-accent);
}

body.wab-demo-page .wab-demo-progress li.is-failed {
	color: var(--wab-error);
}

body.wab-demo-page .wab-demo-progress li.is-failed b {
	border-color: var(--wab-error);
	color: var(--wab-error);
}

/* Payload */
body.wab-demo-page .wab-demo-payload {
	background: #e5eee0;
}

body.wab-demo-page .wab-demo-payload__grid {
	align-items: center;
	display: grid;
	gap: clamp(42px, 7vw, 86px);
	grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
}

body.wab-demo-page .wab-demo-payload__grid > div > p {
	margin: 24px 0 0;
}

body.wab-demo-page .wab-demo-payload pre {
	background: #111a15;
	border: 1px solid #35433a;
	border-radius: 10px;
	box-shadow: 12px 12px 0 rgb(88 117 0 / 20%);
	color: #dce6dd;
	direction: ltr;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: clamp(11px, 1vw, 13px);
	line-height: 1.68;
	margin: 0;
	max-height: 460px;
	overflow: auto;
	padding: clamp(20px, 3vw, 32px);
	text-align: left;
	white-space: pre;
}

body.wab-demo-page .wab-demo-payload code {
	background: transparent;
	color: inherit;
	font: inherit;
	padding: 0;
}

/* Integrations */
body.wab-demo-page .wab-demo-integrations {
	background: var(--wab-surface);
}

body.wab-demo-page .wab-demo-integration-list {
	border: 1px solid var(--wab-line);
	border-radius: var(--wab-radius);
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin-top: 55px;
	overflow: hidden;
}

body.wab-demo-page .wab-demo-integration-list span {
	align-items: center;
	background: var(--wab-surface);
	border-inline-end: 1px solid var(--wab-line);
	display: flex;
	font-size: clamp(17px, 2vw, 26px);
	font-weight: 780;
	justify-content: center;
	min-height: 104px;
	padding: 20px 12px;
	text-align: center;
	transition: background-color 160ms ease, color 160ms ease;
}

body.wab-demo-page .wab-demo-integration-list span:last-child {
	border-inline-end: 0;
}

body.wab-demo-page .wab-demo-integration-list span:hover {
	background: var(--wab-accent);
}

/* Feature and capability cards */
body.wab-demo-page .wab-demo-features {
	background: var(--wab-surface-soft);
}

body.wab-demo-page .wab-demo-feature-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 54px;
}

body.wab-demo-page .wab-demo-feature-grid article {
	background: var(--wab-surface);
	border: 1px solid transparent;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	min-height: 270px;
	padding: clamp(22px, 2.5vw, 30px);
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

body.wab-demo-page .wab-demo-feature-grid article:hover {
	border-color: #b7c3b4;
	box-shadow: 0 16px 40px rgb(17 24 20 / 8%);
	transform: translateY(-4px);
}

body.wab-demo-page .wab-demo-feature-grid article > span {
	color: var(--wab-accent-dark);
	font-size: 31px;
	font-weight: 700;
	line-height: 1;
}

body.wab-demo-page .wab-demo-feature-grid h3 {
	color: var(--wab-ink);
	font-family: inherit;
	font-size: 19px;
	font-weight: 760;
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin: auto 0 10px;
}

body.wab-demo-page .wab-demo-feature-grid article p {
	color: var(--wab-muted);
	font-size: 14px;
	line-height: 1.65;
	margin: 0;
}

body.wab-demo-page .wab-demo-capabilities {
	background: var(--wab-ink);
	color: var(--wab-surface);
}

body.wab-demo-page .wab-demo-capabilities .wab-demo-section-heading {
	margin-bottom: 64px;
}

body.wab-demo-page .wab-demo-capabilities .wab-demo-section-heading .wab-demo-eyebrow,
body.wab-demo-page .wab-demo-capabilities > .wab-demo-container > .wab-demo-eyebrow {
	color: var(--wab-accent);
}

body.wab-demo-page .wab-demo-capabilities > .wab-demo-container > .wab-demo-eyebrow {
	border-bottom: 1px solid #3c4941;
	margin: 48px 0 0;
	padding-bottom: 12px;
}

body.wab-demo-page .wab-demo-capabilities .wab-demo-feature-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 18px;
}

body.wab-demo-page .wab-demo-capabilities .wab-demo-feature-grid:nth-of-type(1) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.wab-demo-page .wab-demo-capabilities .wab-demo-feature-grid article {
	background: #18221c;
	border-color: #334138;
	min-height: 220px;
}

body.wab-demo-page .wab-demo-capabilities .wab-demo-feature-grid article:hover {
	border-color: #75876f;
	box-shadow: 0 18px 50px rgb(0 0 0 / 20%);
}

body.wab-demo-page .wab-demo-capabilities .wab-demo-feature-grid h3 {
	color: var(--wab-surface);
}

body.wab-demo-page .wab-demo-capabilities .wab-demo-feature-grid article p {
	color: #aebcb0;
}

body.wab-demo-page .wab-demo-capabilities .wab-demo-feature-grid article > span {
	color: var(--wab-accent);
}

/* Security */
body.wab-demo-page .wab-demo-security {
	background: var(--wab-paper);
}

body.wab-demo-page .wab-demo-security__card {
	align-items: center;
	background: var(--wab-accent);
	border: 1px solid #b9df3d;
	border-radius: var(--wab-radius);
	display: grid;
	gap: clamp(36px, 6vw, 80px);
	grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
	padding: clamp(34px, 6vw, 72px);
}

body.wab-demo-page .wab-demo-security__card .wab-demo-eyebrow {
	color: #425800;
}

body.wab-demo-page .wab-demo-security__card > div > p {
	color: #334225;
	margin: 24px 0 0;
}

body.wab-demo-page .wab-demo-security__marks {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.wab-demo-page .wab-demo-security__marks span {
	background: rgb(255 255 255 / 24%);
	border: 1px solid #789713;
	border-radius: 7px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 10px;
	line-height: 1.45;
	min-width: 0;
	padding: 15px 12px;
}

body.wab-demo-page .wab-demo-security__marks b {
	font-size: 12px;
	letter-spacing: -0.03em;
}

/* CTA and footer */
body.wab-demo-page .wab-demo-cta {
	background: linear-gradient(135deg, #101713 0%, #1a281f 100%);
	color: var(--wab-surface);
	position: relative;
	text-align: center;
}

body.wab-demo-page .wab-demo-cta::before {
	background: radial-gradient(circle, rgb(214 255 82 / 16%) 0%, transparent 68%);
	content: "";
	height: 420px;
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(760px, 100%);
}

body.wab-demo-page .wab-demo-cta .wab-demo-container {
	align-items: center;
	display: flex;
	flex-direction: column;
	position: relative;
}

body.wab-demo-page .wab-demo-cta .wab-demo-eyebrow {
	color: var(--wab-accent);
}

body.wab-demo-page .wab-demo-cta .wab-demo-container > p:not(.wab-demo-eyebrow) {
	color: #b8c4ba;
	margin: 24px 0 8px;
}

body.wab-demo-page .wab-public-demo .wab-demo-button--light {
	background: var(--wab-surface);
	border-color: var(--wab-surface);
	color: var(--wab-ink);
	margin-top: 20px;
}

body.wab-demo-page .wab-public-demo .wab-demo-button--light:hover {
	background: var(--wab-accent);
	border-color: var(--wab-accent);
}

body.wab-demo-page .wab-demo-footer {
	background: var(--wab-ink);
	border-top: 1px solid #344039;
	color: #b6c2b8;
	padding-block: 30px;
}

body.wab-demo-page .wab-demo-footer .wab-demo-container {
	align-items: center;
	display: flex;
	gap: 24px;
	justify-content: space-between;
}

body.wab-demo-page .wab-demo-footer .wab-demo-brand {
	color: var(--wab-surface);
}

body.wab-demo-page .wab-demo-footer p {
	font-size: 13px;
	margin: 0;
}

body.wab-demo-page .wab-demo-footer a:last-child {
	font-size: 14px;
	font-weight: 700;
}

/* Directional refinements */
body.wab-demo-page .wab-public-demo[dir="rtl"] {
	font-family: "Vazir Demo", Tahoma, Arial, ui-sans-serif, system-ui, sans-serif;
}

body.wab-demo-page .wab-public-demo[dir="rtl"] .wab-demo-eyebrow {
	letter-spacing: 0.04em;
}

body.wab-demo-page .wab-public-demo[dir="rtl"] .wab-demo-button > span[aria-hidden="true"] {
	transform: scaleX(-1);
}

body.wab-demo-page .wab-public-demo[dir="rtl"] .wab-demo-terminal {
	direction: ltr;
	text-align: left;
}

/* Tablet */
@media (max-width: 900px) {
	body.wab-demo-page .wab-demo-navigation {
		background: var(--wab-paper);
		border: 1px solid var(--wab-line);
		border-radius: 16px;
		box-shadow: var(--wab-shadow);
		display: none;
		gap: 0;
		inset-inline: 0;
		padding: 10px;
		position: absolute;
		top: calc(100% + 10px);
	}

	body.wab-demo-page .wab-demo-navigation.is-open {
		align-items: stretch;
		display: flex;
		flex-direction: column;
	}

	body.wab-demo-page .wab-demo-navigation > a {
		border-radius: 8px;
		padding: 12px 14px;
	}

	body.wab-demo-page .wab-demo-navigation > a:not(.wab-demo-language):hover {
		background: var(--wab-surface-soft);
	}

	body.wab-demo-page .wab-demo-language {
		margin-top: 5px;
		text-align: center;
	}

	body.wab-demo-page .wab-demo-menu {
		display: flex;
	}

	body.wab-demo-page .wab-demo-hero__grid,
	body.wab-demo-page .wab-demo-live__grid,
	body.wab-demo-page .wab-demo-payload__grid,
	body.wab-demo-page .wab-demo-security__card {
		grid-template-columns: minmax(0, 1fr);
	}

	body.wab-demo-page .wab-demo-terminal {
		max-width: 620px;
		width: calc(100% - 14px);
	}

	body.wab-demo-page .wab-demo-feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.wab-demo-page .wab-demo-capabilities .wab-demo-feature-grid,
	body.wab-demo-page .wab-demo-capabilities .wab-demo-feature-grid:nth-of-type(1) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile */
@media (max-width: 640px) {
	body.wab-demo-page .wab-demo-container {
		padding-inline: 20px;
	}

	body.wab-demo-page .wab-demo-header {
		margin-top: 9px;
		padding-inline: 9px;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 8px);
	}

	body.wab-demo-page .wab-demo-header__inner,
	body.wab-demo-page .wab-public-demo[dir="rtl"] .wab-demo-header__inner {
		min-height: 58px;
		padding: 7px 8px 7px 16px;
	}

	body.wab-demo-page .wab-public-demo[dir="rtl"] .wab-demo-header__inner {
		padding: 7px 16px 7px 8px;
	}

	body.wab-demo-page .wab-demo-hero {
		padding-block: 66px 82px;
	}

	body.wab-demo-page .wab-demo-hero__grid {
		gap: 48px;
	}

	body.wab-demo-page .wab-demo-hero h1 {
		font-size: clamp(38px, 12vw, 54px);
		letter-spacing: -0.055em;
	}

	body.wab-demo-page .wab-demo-section h2 {
		font-size: clamp(32px, 9vw, 43px);
		letter-spacing: -0.05em;
	}

	body.wab-demo-page .wab-demo-actions {
		align-items: stretch;
		flex-direction: column;
	}

	body.wab-demo-page .wab-demo-button {
		width: 100%;
	}

	body.wab-demo-page .wab-demo-terminal {
		box-shadow: 9px 9px 0 var(--wab-accent);
	}

	body.wab-demo-page .wab-demo-terminal__body {
		font-size: 11px;
		padding: 17px 13px 21px;
	}

	body.wab-demo-page .wab-demo-terminal__body p {
		padding: 9px 10px;
	}

	body.wab-demo-page .wab-demo-section {
		padding-block: 72px;
	}

	body.wab-demo-page .wab-demo-section-heading {
		display: block;
	}

	body.wab-demo-page .wab-demo-section-heading h2 + p {
		margin-top: 22px;
	}

	body.wab-demo-page .wab-demo-flow__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 42px;
	}

	body.wab-demo-page .wab-demo-flow__steps li:nth-child(2)::after {
		display: none;
	}

	body.wab-demo-page .wab-demo-live__grid {
		gap: 42px;
	}

	body.wab-demo-page .wab-demo-progress {
		padding: 19px;
	}

	body.wab-demo-page .wab-demo-payload pre {
		box-shadow: 8px 8px 0 rgb(88 117 0 / 20%);
		font-size: 11px;
		max-width: 100%;
		padding: 18px;
	}

	body.wab-demo-page .wab-demo-integration-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.wab-demo-page .wab-demo-integration-list span {
		border-bottom: 1px solid var(--wab-line);
		min-height: 86px;
	}

	body.wab-demo-page .wab-demo-integration-list span:nth-child(2n) {
		border-inline-end: 0;
	}

	body.wab-demo-page .wab-demo-integration-list span:last-child {
		border-bottom: 0;
		grid-column: 1 / -1;
	}

	body.wab-demo-page .wab-demo-feature-grid,
	body.wab-demo-page .wab-demo-capabilities .wab-demo-feature-grid,
	body.wab-demo-page .wab-demo-capabilities .wab-demo-feature-grid:nth-of-type(1) {
		grid-template-columns: minmax(0, 1fr);
	}

	body.wab-demo-page .wab-demo-feature-grid article {
		min-height: 220px;
	}

	body.wab-demo-page .wab-demo-capabilities .wab-demo-section-heading {
		margin-bottom: 46px;
	}

	body.wab-demo-page .wab-demo-security__card {
		padding: 30px 22px;
	}

	body.wab-demo-page .wab-demo-security__marks {
		grid-template-columns: minmax(0, 1fr);
	}

	body.wab-demo-page .wab-demo-footer .wab-demo-container {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media (max-width: 400px) {
	body.wab-demo-page .wab-demo-flow__steps {
		grid-template-columns: minmax(0, 1fr);
	}

	body.wab-demo-page .wab-demo-flow__steps li::after {
		display: none;
	}

	body.wab-demo-page .wab-demo-progress li {
		font-size: 14px;
	}
}

/* Subtle entrance motion, disabled when requested by the visitor. */
@keyframes wab-demo-rise {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: no-preference) {
	body.wab-demo-page .wab-demo-hero__copy,
	body.wab-demo-page .wab-demo-terminal {
		animation: wab-demo-rise 480ms ease-out both;
	}

	body.wab-demo-page .wab-demo-terminal {
		animation-delay: 90ms;
	}

	body.wab-demo-page .wab-public-demo {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.wab-demo-page .wab-public-demo *,
	body.wab-demo-page .wab-public-demo *::before,
	body.wab-demo-page .wab-public-demo *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* v1.1.1 pre-sale presentation additions. */
body.wab-demo-page .wab-demo-product-shot {
	background: #fff;
	border: 1px solid #ccd6cc;
	border-radius: 16px;
	box-shadow: 16px 16px 0 var(--wab-accent), var(--wab-shadow);
	color: var(--wab-ink);
	overflow: hidden;
	transform: rotate(0.4deg);
}

body.wab-demo-page .wab-demo-product-shot__bar,
body.wab-demo-page .wab-demo-product-shot__log,
body.wab-demo-page .wab-demo-product-shot__body,
body.wab-demo-page .wab-demo-product-shot__checks {
	display: flex;
}

body.wab-demo-page .wab-demo-product-shot__bar {
	align-items: center;
	background: #17211b;
	color: #fff;
	justify-content: space-between;
	padding: 15px 19px;
}

body.wab-demo-page .wab-demo-product-shot__bar b { font-size: 14px; }
body.wab-demo-page .wab-demo-product-shot__bar i { color: var(--wab-accent); font: 12px ui-monospace, monospace; }
body.wab-demo-page .wab-demo-product-shot__body { flex-direction: column; gap: 10px; padding: 23px; }
body.wab-demo-page .wab-demo-product-shot__body > span { color: var(--wab-muted); font-size: 12px; font-weight: 700; }
body.wab-demo-page .wab-demo-product-shot__body strong { font-size: 14px; }
body.wab-demo-page .wab-demo-product-shot__body > div { background: #f2f5ef; border: 1px solid #d2dbd0; border-radius: 6px; direction: ltr; font: 12px ui-monospace, monospace; overflow: hidden; padding: 11px; text-overflow: ellipsis; white-space: nowrap; }
body.wab-demo-page .wab-demo-product-shot__body p { color: var(--wab-accent-dark); font-size: 12px; margin: 2px 0 5px; }
body.wab-demo-page .wab-demo-product-shot__body button { align-self: flex-start; background: var(--wab-ink); border: 0; border-radius: 5px; color: #fff; cursor: default; font-size: 13px; font-weight: 700; padding: 11px 14px; }
body.wab-demo-page .wab-demo-product-shot__log { align-items: center; border-top: 1px solid #d2dbd0; font-size: 12px; gap: 10px; justify-content: space-between; padding: 14px 19px; }
body.wab-demo-page .wab-demo-product-shot__log span { color: var(--wab-muted); }
body.wab-demo-page .wab-demo-product-shot__log strong { color: var(--wab-accent-dark); font-size: 11px; }

body.wab-demo-page .wab-demo-use-cases { background: var(--wab-surface); }
body.wab-demo-page .wab-demo-use-grid,
body.wab-demo-page .wab-demo-scope-grid { display: grid; gap: 14px; margin-top: 52px; }
body.wab-demo-page .wab-demo-use-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.wab-demo-page .wab-demo-use-grid article,
body.wab-demo-page .wab-demo-scope-grid article { border: 1px solid var(--wab-line); border-radius: 12px; min-width: 0; padding: 28px; }
body.wab-demo-page .wab-demo-use-grid article { background: #f8faf6; }
body.wab-demo-page .wab-demo-use-grid article > span { color: var(--wab-accent-dark); font: 700 12px ui-monospace, monospace; }
body.wab-demo-page .wab-demo-use-grid h3,
body.wab-demo-page .wab-demo-scope-grid h3 { font-size: 19px; line-height: 1.35; margin: 54px 0 11px; overflow-wrap: anywhere; }
body.wab-demo-page .wab-demo-use-grid p,
body.wab-demo-page .wab-demo-scope-grid p { color: var(--wab-muted); font-size: 14px; line-height: 1.7; margin: 0; }
body.wab-demo-page .wab-demo-scope { background: var(--wab-ink); color: var(--wab-surface); }
body.wab-demo-page .wab-demo-scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.wab-demo-page .wab-demo-scope-grid article { background: #18221c; border-color: #334138; }
body.wab-demo-page .wab-demo-scope-grid article > span { color: var(--wab-accent); font-size: 25px; }
body.wab-demo-page .wab-demo-scope-grid h3 { margin-top: 33px; }
body.wab-demo-page .wab-demo-scope-grid p { color: #b8c4ba; }
body.wab-demo-page .wab-demo-test-note { border-top: 1px solid #c9d2c7; color: var(--wab-muted); font: 12px ui-monospace, monospace; margin: 28px 0 0; padding-top: 18px; }
body.wab-demo-page .wab-demo-admin { background: #e5eee0; }
body.wab-demo-page .wab-demo-admin__grid { align-items: center; display: grid; gap: clamp(40px, 7vw, 80px); grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); }
body.wab-demo-page .wab-demo-admin__grid .wab-demo-lede { margin: 24px 0 0; }
body.wab-demo-page .wab-demo-admin__panel { background: #fff; border: 1px solid #cbd6ca; border-radius: 12px; box-shadow: 12px 12px 0 rgb(88 117 0 / 18%); padding: 10px 18px; }
body.wab-demo-page .wab-demo-admin__panel div { align-items: center; border-bottom: 1px solid #e0e6de; display: flex; font-size: 14px; gap: 20px; justify-content: space-between; padding: 17px 0; }
body.wab-demo-page .wab-demo-admin__panel div:last-child { border: 0; }
body.wab-demo-page .wab-demo-admin__panel b { background: #eaf5d2; border-radius: 999px; color: #4d6900; font-size: 11px; padding: 5px 8px; white-space: nowrap; }

@media (max-width: 900px) {
	body.wab-demo-page .wab-demo-use-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.wab-demo-page .wab-demo-use-grid article:last-child { grid-column: 1 / -1; }
	body.wab-demo-page .wab-demo-admin__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
	body.wab-demo-page .wab-demo-product-shot { box-shadow: 9px 9px 0 var(--wab-accent); }
	body.wab-demo-page .wab-demo-use-grid,
	body.wab-demo-page .wab-demo-scope-grid { grid-template-columns: minmax(0, 1fr); }
	body.wab-demo-page .wab-demo-use-grid article:last-child { grid-column: auto; }
	body.wab-demo-page .wab-demo-use-grid h3 { margin-top: 35px; }
	body.wab-demo-page .wab-demo-admin__panel { padding-inline: 14px; }
}