:root {
	--ai-page-pad: var(--pad-x);
	--ai-column-gap: clamp(52px, 6vw, 92px);
	--ai-list-width: clamp(260px, 27vw, 330px);
	--ai-section-gap: 74px;
	--ai-detail-gap: 46px;
	--ai-control-pad-block: 10px;
	--ai-control-pad-inline: 15px;
	--ai-flow-step-width: 144px;
	--ai-thumb-gap: 10px;
	--ai-gallery-max-height: min(64vh, 620px);
	--ai-selected-size: 8px;
	--ai-hover-size: 5px;
	--ai-idle-size: 3px;
}

html { scroll-behavior: smooth; }

body.zoo-ai-usecases-page {
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-gothic);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
}

body.zoo-ai-usecases-page .zoo-header {
	position: static;
	border-bottom: 0;
	background: var(--bg);
}

body.zoo-ai-usecases-page .zoo-header .zoo-wrap,
body.zoo-ai-usecases-page .zoo-footer .zoo-wrap {
	max-width: var(--page-max);
	padding-right: var(--ai-page-pad);
	padding-left: var(--ai-page-pad);
}

body.zoo-ai-usecases-page .zoo-brand,
body.zoo-ai-usecases-page .zoo-navlink,
body.zoo-ai-usecases-page .zoo-foot-brand,
body.zoo-ai-usecases-page .zoo-foot-decl,
body.zoo-ai-usecases-page .zoo-foot-copy {
	color: var(--fg);
	font-family: var(--font-gothic);
}

body.zoo-ai-usecases-page .zoo-footer {
	border-top: 0;
	margin-top: var(--sp-foot-top);
	background: var(--bg);
}

.zoo-ai-usecases-main { min-width: 0; }

.ai-page,
.ai-page button,
.ai-page input,
.ai-page textarea,
.ai-page select {
	font: inherit;
}

.ai-page {
	min-height: 100vh;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-gothic);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
}

.ai-page button { color: inherit; }

.ai-shell {
	width: min(100%, var(--page-max));
	margin-inline: auto;
	padding-inline: var(--ai-page-pad);
}

.ai-hero { padding-top: var(--sp-hero-top); }

.ai-hero h1 {
	max-width: 800px;
	font-family: var(--font-mincho);
	font-size: var(--fs-h1);
	font-weight: 400;
	letter-spacing: var(--ls-h1);
	line-height: var(--lh-h1);
}

.ai-hero-copy {
	max-width: 620px;
	margin: 30px 0 0;
	color: var(--fg2);
	line-height: 2.05;
}

.ai-hero-guide {
	margin: 14px 0 0;
	color: var(--fg3);
	line-height: 2.05;
}

.ai-work { padding-top: var(--sp-work-top); }

.ai-filter-list {
	position: sticky;
	z-index: 4;
	top: 0;
	display: flex;
	gap: 18px;
	overflow-x: auto;
	padding: 12px 0;
	background: var(--bg);
	scrollbar-width: none;
}

body.admin-bar .ai-filter-list { top: 32px; }

.ai-filter-list::-webkit-scrollbar,
.ai-usecase-list::-webkit-scrollbar,
.ai-flow-scroll::-webkit-scrollbar { display: none; }

.ai-filter {
	flex: none;
	min-height: 36px;
	border: 0;
	border-radius: 0;
	padding: var(--ai-control-pad-block) var(--ai-control-pad-inline);
	background: transparent;
	color: var(--fg2);
	cursor: pointer;
	font-size: var(--fs-nav);
	letter-spacing: var(--ls-nav);
	white-space: nowrap;
}

.ai-filter[aria-pressed="true"] {
	background: var(--fg);
	color: var(--bg);
}

.ai-filter:not([aria-pressed="true"]):hover { color: var(--fg); }

.ai-browser {
	display: grid;
	grid-template-columns: var(--ai-list-width) minmax(0, 1fr);
	gap: var(--ai-column-gap);
	align-items: start;
	margin-top: 50px;
}

.ai-usecase-list {
	position: sticky;
	top: 78px;
	max-height: min(calc(100vh - 130px), 660px);
	overflow-y: auto;
	padding-right: 18px;
	scrollbar-width: none;
}

body.admin-bar .ai-usecase-list { top: 110px; }

.ai-usecase-item {
	display: grid;
	grid-template-columns: 14px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	width: 100%;
	border: 0;
	border-radius: 0;
	padding: 15px 0;
	background: transparent;
	color: var(--fg3);
	cursor: pointer;
	text-align: left;
}

.ai-usecase-item[hidden] { display: none; }

.ai-usecase-item[aria-pressed="true"] {
	color: var(--fg);
	font-weight: 500;
}

.ai-usecase-item:hover:not([aria-pressed="true"]),
.ai-usecase-item:focus-visible:not([aria-pressed="true"]) { color: var(--fg2); }

.ai-usecase-marker {
	width: var(--ai-idle-size);
	height: var(--ai-idle-size);
	margin-top: 11px;
	border-radius: 50%;
	background: currentColor;
	transition: width .18s ease, height .18s ease, margin .18s ease;
}

.ai-usecase-item:hover .ai-usecase-marker,
.ai-usecase-item:focus-visible .ai-usecase-marker {
	width: var(--ai-hover-size);
	height: var(--ai-hover-size);
	margin-top: 10px;
}

.ai-usecase-item[aria-pressed="true"] .ai-usecase-marker {
	width: var(--ai-selected-size);
	height: var(--ai-selected-size);
	margin-top: 9px;
}

.ai-usecase-title { line-height: 1.9; }

.ai-detail-dialog {
	position: static;
	inset: auto;
	display: block;
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	margin: 0;
	border: 0;
	padding: 0;
	background: transparent;
	color: inherit;
	overflow: visible;
}

.ai-detail-dialog:not([open]) { display: none; }
.ai-detail-dialog-inner { min-width: 0; }
.ai-detail-dialog-bar { display: none; }

.ai-detail-stack,
.ai-detail { min-width: 0; }

.ai-detail[hidden] { display: none; }

.ai-detail-head { max-width: 760px; }

.ai-detail-title {
	font-family: var(--font-mincho);
	font-size: clamp(var(--fs-name), 2.5vw, 34px);
	font-weight: 400;
	letter-spacing: var(--ls-name);
	line-height: 1.62;
}

.ai-detail-title:focus { outline: 0; }

.ai-detail-lead {
	max-width: 680px;
	margin: 18px 0 0;
	color: var(--fg2);
	line-height: 2.05;
}

.ai-gallery { margin-top: var(--ai-detail-gap); }

.ai-gallery-figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
}

.ai-gallery-main {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: var(--ai-gallery-max-height);
	background: var(--bg);
}

.ai-gallery-caption {
	max-width: 680px;
	margin: 13px 0;
	color: var(--fg2);
	letter-spacing: var(--ls-label);
	line-height: 1.75;
	text-align: center;
}

.ai-gallery-caption[hidden],
.ai-gallery-caption:empty { display: none; }

.ai-gallery-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ai-thumb-gap);
	margin-top: 10px;
}

.ai-thumb {
	border: 0;
	border-radius: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	opacity: .48;
	transition: opacity .2s ease;
}

.ai-thumb[aria-pressed="true"],
.ai-thumb:hover,
.ai-thumb:focus-visible { opacity: 1; }

.ai-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ai-flow {
	--ai-flow-move-duration: 1800ms;
	position: relative;
	margin-top: calc(var(--ai-detail-gap) + 6px);
}

.ai-flow-scroll {
	overflow-x: auto;
	padding: 4px 0 10px;
	scrollbar-width: none;
}

.ai-flow-track {
	display: grid;
	grid-template-columns: repeat(var(--flow-count), minmax(var(--ai-flow-step-width), 1fr));
	min-width: calc(var(--flow-count) * var(--ai-flow-step-width));
}

.ai-flow-step {
	position: relative;
	display: block;
	min-width: 0;
	width: 100%;
	border: 0;
	border-radius: 0;
	padding: 0;
	background: transparent;
	color: var(--fg3);
	cursor: help;
	text-align: left;
}

.ai-flow-step.is-stepped,
.ai-flow-step.is-current { color: var(--fg); }

.ai-flow-step:not(.is-stepped) .ai-flow-icon,
.ai-flow-step:not(.is-stepped) .ai-flow-role,
.ai-flow-step:not(.is-stepped) .ai-flow-action { opacity: .48; }

.ai-flow-number {
	display: block;
	font-size: var(--fs-label);
	letter-spacing: .18em;
}

.ai-flow-icon {
	display: block;
	width: 28px;
	height: 28px;
	margin-top: 12px;
}

.ai-flow-rail {
	position: relative;
	display: block;
	height: 16px;
	margin-top: 8px;
}

.ai-flow-rail::after {
	position: absolute;
	top: 50%;
	left: 4px;
	width: calc(100% - 4px);
	height: 1px;
	background: var(--fg3);
	content: "";
	transform: translateY(-50%);
}

.ai-flow-step:last-child .ai-flow-rail::after { display: none; }

.ai-flow-marker {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 0;
	display: block;
	width: 8px;
	height: 8px;
	border: 1px solid currentColor;
	background: var(--bg);
	transform: translateY(-50%);
}

.ai-flow-step.is-stepped .ai-flow-marker,
.ai-flow-step.is-current .ai-flow-marker {
	border-color: var(--fg);
	background: var(--fg);
}

.ai-flow-progress {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 4px;
	display: block;
	width: 0;
	height: 2px;
	background: var(--fg);
	transform: translateY(-50%);
}

.ai-flow-step.is-path-complete .ai-flow-progress { width: calc(100% - 4px); }
.ai-flow-step.is-moving .ai-flow-progress { animation: ai-flow-travel var(--ai-flow-move-duration) linear forwards; }

.ai-flow-traveler {
	position: absolute;
	top: 50%;
	right: -3px;
	display: block;
	width: 6px;
	height: 6px;
	background: var(--fg);
	opacity: 0;
	transform: translateY(-50%);
}

.ai-flow-step.is-moving .ai-flow-traveler { opacity: 1; }
.ai-flow-step.is-working .ai-flow-marker { animation: ai-flow-working 800ms ease-in-out infinite alternate; }
.ai-flow.is-paused .ai-flow-progress,
.ai-flow.is-paused .ai-flow-marker { animation-play-state: paused; }

.ai-flow-role {
	display: block;
	margin-top: 5px;
	font-size: var(--fs-label);
	letter-spacing: var(--ls-label);
}

.ai-flow-action {
	display: block;
	margin-top: 7px;
	padding-right: 18px;
	color: currentColor;
	line-height: 1.75;
}

.ai-flow-tooltip {
	position: absolute;
	z-index: 10;
	width: min(320px, calc(100% - 24px));
	border: 1px solid var(--fg);
	padding: 16px 18px 17px;
	background: var(--bg);
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 140ms ease, transform 140ms ease, visibility 140ms;
}

.ai-flow-tooltip.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ai-flow-tooltip-kicker {
	color: var(--fg3);
	font-size: var(--fs-label);
	letter-spacing: var(--ls-label);
}

.ai-flow-tooltip-title {
	margin-top: 8px;
	font-weight: 600;
}

.ai-flow-tooltip-copy {
	margin: 9px 0 0;
	color: var(--fg2);
	font-size: var(--fs-body);
	line-height: 1.85;
}

@keyframes ai-flow-travel { from { width: 0; } to { width: calc(100% - 4px); } }
@keyframes ai-flow-working { from { transform: translateY(-50%) scale(1); } to { transform: translateY(-50%) scale(1.7); } }

.ai-pair,
.ai-meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 54px;
	margin-top: var(--ai-section-gap);
}

.ai-label {
	color: var(--fg2);
	font-size: var(--fs-label);
	letter-spacing: var(--ls-label);
}

.ai-section-copy {
	margin: 16px 0 0;
	color: var(--fg2);
	line-height: 2.05;
}

.ai-pair > :last-child .ai-section-copy { color: var(--fg); }

.ai-meta-list {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.ai-meta-list li + li { margin-top: 7px; }

.ai-tool {
	display: flex;
	gap: 10px;
	align-items: center;
}

.ai-tool-logo-box {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	overflow: hidden;
}

.ai-tool-logo {
	display: block;
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.ai-tool-logo-box.is-wordmark { width: 56px; }
.ai-tool-logo-box.is-wordmark .ai-tool-logo { width: 56px; height: 20px; transform: scale(2); }

.ai-detail-link { margin-top: var(--ai-section-gap); }

.ai-article-link {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	border-bottom: 1px solid currentColor;
	padding-bottom: 4px;
	color: var(--fg);
	text-decoration: none;
}

.ai-article-link svg { width: 18px; height: 18px; }

.ai-empty {
	max-width: 620px;
	margin: 0;
	color: var(--fg2);
}

.ai-flow-modal {
	width: min(520px, calc(100vw - 40px));
	max-height: calc(100dvh - 40px);
	border: 0;
	border-radius: 0;
	padding: 0;
	background: var(--bg);
	color: var(--fg);
}

.ai-flow-modal::backdrop { background: rgb(0 0 0 / .48); }
.ai-flow-modal-inner { position: relative; padding: 30px 26px 30px; }

.ai-flow-modal-kicker {
	margin: 0;
	padding-right: 48px;
	color: var(--fg3);
	font-size: var(--fs-label);
	letter-spacing: var(--ls-label);
}

.ai-flow-modal-title {
	margin: 10px 0 0;
	font-family: var(--font-mincho);
	font-size: var(--m-fs-name);
	font-weight: 400;
	line-height: 1.6;
}

.ai-flow-modal-copy {
	margin: 18px 0 0;
	color: var(--fg2);
	line-height: 1.95;
}

.ai-flow-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
	background: transparent;
	color: var(--fg);
	cursor: pointer;
}

.ai-page .ai-flow-modal-close { color: var(--fg); }
.ai-flow-modal-close:active { transform: scale(.96); }
.ai-flow-modal-close:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }
.ai-flow-modal-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.ai-cta { padding-top: var(--sp-contact-top); }

.ai-cta h2,
.ai-contact h2 {
	font-family: var(--font-mincho);
	font-size: var(--fs-clead);
	font-weight: 400;
	letter-spacing: var(--ls-clead);
	line-height: 1.68;
}

.ai-cta p,
.ai-contact-copy {
	max-width: 620px;
	margin: 18px 0 0;
	color: var(--fg2);
	line-height: 2.05;
}

.ai-cta p + p { margin-top: 4px; }
.ai-download { margin-top: 34px; }

.ai-download .zoo-link {
	display: inline-flex;
	gap: 10px;
	align-items: center;
}

.ai-download svg { width: 18px; height: 18px; }

.ai-config-note {
	color: var(--fg3) !important;
	font-size: var(--fs-label);
	letter-spacing: var(--ls-label);
}

.ai-contact {
	display: grid;
	grid-template-columns: minmax(260px, .7fr) minmax(420px, 1.3fr);
	gap: var(--ai-column-gap);
	padding-top: 106px;
}

.ai-contact-points {
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.ai-contact-points li + li { margin-top: 8px; }
.ai-contact-points li::before { margin-right: .65em; content: "—"; }

.ai-form { min-width: 0; }
.ai-form .wpcf7 p { margin: 0 0 20px; }
.ai-form .wpcf7 label { display: block; color: var(--fg2); }
.ai-form .wpcf7-form-control-wrap { display: block; margin-top: 7px; }

.ai-form .wpcf7 input[type="text"],
.ai-form .wpcf7 input[type="email"],
.ai-form .wpcf7 input[type="url"],
.ai-form .wpcf7 input[type="tel"],
.ai-form .wpcf7 textarea {
	width: 100%;
	border: 1px solid var(--fg3);
	border-radius: 0;
	padding: 11px 12px;
	background: var(--bg);
	color: var(--fg);
}

.ai-form .wpcf7 textarea { min-height: 132px; resize: vertical; }
.ai-form .wpcf7-list-item { margin: 0; }

.ai-form .wpcf7 input[type="checkbox"] {
	width: 16px;
	height: 16px;
	border-radius: 0;
	accent-color: var(--fg);
}

.ai-form .wpcf7 input[type="submit"] {
	min-width: 116px;
	border: 0;
	border-radius: 0;
	padding: 12px 22px;
	background: var(--fg);
	color: var(--bg);
	cursor: pointer;
	letter-spacing: .08em;
}

.ai-form .wpcf7-spinner { margin-left: 12px; }
.ai-form .wpcf7-response-output { margin: 16px 0 0; border-radius: 0; }

.ai-form-fallback {
	margin: 0;
	color: var(--fg2);
}

@media (max-width: 959px) {
	:root {
		--ai-page-pad: var(--m-pad-x);
		--ai-section-gap: 58px;
		--ai-detail-gap: 38px;
		--ai-flow-step-width: 132px;
		--ai-gallery-max-height: min(58vh, 460px);
	}

	body.zoo-ai-usecases-page,
	.ai-page { font-size: var(--m-fs-body); }

	body.zoo-ai-usecases-page .zoo-header .zoo-wrap,
	body.zoo-ai-usecases-page .zoo-footer .zoo-wrap,
	.ai-shell { padding-right: var(--m-pad-x); padding-left: var(--m-pad-x); }

	.ai-hero { padding-top: var(--m-sp-hero-top); }

	.ai-hero h1 {
		font-size: var(--m-fs-h1);
		letter-spacing: var(--m-ls-h1);
		line-height: var(--m-lh-h1);
	}

	.ai-work { padding-top: var(--m-sp-work-top); }

	.ai-filter-list {
		margin-right: calc(var(--m-pad-x) * -1);
		padding-right: var(--m-pad-x);
	}

	.ai-browser { grid-template-columns: minmax(0, 1fr); margin-top: 38px; }

	.ai-usecase-list {
		position: static;
		max-height: none;
		overflow: visible;
		padding-right: 0;
	}

	.ai-usecase-item:active { transform: translateY(1px); }

	.ai-detail-dialog[open] {
		position: fixed;
		inset: 0;
		width: calc(100vw - 24px);
		height: calc(100dvh - 24px);
		max-width: 720px;
		max-height: calc(100dvh - 24px);
		margin: auto;
		background: var(--bg);
		overflow: hidden;
		animation: ai-detail-dialog-enter 220ms cubic-bezier(.16, 1, .3, 1) both;
	}

	.ai-detail-dialog::backdrop {
		background: rgb(27 36 48 / .58);
		animation: ai-detail-backdrop-enter 180ms ease-out both;
	}

	.ai-detail-dialog-inner {
		height: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.ai-detail-dialog-bar {
		position: sticky;
		z-index: 1;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 58px;
		border-bottom: 1px solid var(--fg3);
		padding: 8px 18px;
		background: var(--bg);
	}

	.ai-detail-dialog-status {
		overflow: hidden;
		color: var(--fg3);
		font-size: var(--fs-label);
		letter-spacing: var(--ls-label);
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ai-detail-dialog-close {
		display: inline-flex;
		flex: none;
		gap: 7px;
		align-items: center;
		min-height: 40px;
		border: 1px solid var(--fg);
		border-radius: 0;
		padding: 7px 11px;
		background: var(--fg);
		color: var(--bg);
		cursor: pointer;
	}

	.ai-page .ai-detail-dialog-close { color: var(--bg); }

	.ai-detail-dialog-close:active { transform: translateY(1px); }
	.ai-detail-dialog-close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
	.ai-detail-stack { padding: 30px 22px 54px; }
	.ai-detail-title { font-size: var(--m-fs-name); }
	.ai-gallery-thumbs { gap: 6px; }
	.ai-flow-tooltip { display: none; }
	.ai-flow-step { cursor: pointer; }

	.ai-pair,
	.ai-meta,
	.ai-contact { grid-template-columns: 1fr; }

	.ai-pair,
	.ai-meta { gap: 34px; }

	.ai-cta { padding-top: var(--m-sp-contact-top); }
	.ai-contact { gap: 42px; padding-top: 74px; }
	body.zoo-ai-usecases-page .zoo-footer { margin-top: var(--m-sp-foot-top); }
}

@media (max-width: 782px) {
	body.admin-bar .ai-filter-list { top: 46px; }
}

@keyframes ai-detail-dialog-enter {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes ai-detail-backdrop-enter {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.ai-usecase-marker,
	.ai-thumb,
	.ai-flow-marker,
	.ai-flow-progress,
	.ai-detail-dialog,
	.ai-detail-dialog::backdrop { animation: none !important; transition: none; }
}