/*
 * Yumat Digital — front-end styles.
 *
 * Ported 1:1 from the approved prototype (design system "classical" + the
 * Template Marketplace page). Every rule is scoped under .yumat-digital so the
 * host theme is never touched: no bare h1 / button / img selectors, and no
 * custom properties on :root.
 */

.yumat-digital {
	/* — palette — */
	--yd-bg: #f3f2f2;
	--yd-surface: #eae9e9;
	--yd-text: #201f1d;
	--yd-accent: #b68235;
	--yd-footer-bg: #2d2b2b;
	--yd-divider: color-mix(in srgb, var(--yd-text) 16%, transparent);

	--yd-neutral-100: #f8f4f4;
	--yd-neutral-200: #eae7e7;
	--yd-neutral-300: #d7d3d3;
	--yd-neutral-400: #bab6b6;
	--yd-neutral-500: #9b9797;
	--yd-neutral-600: #7d7979;
	--yd-neutral-700: #605d5d;
	--yd-neutral-800: #444141;
	--yd-neutral-900: #2d2b2b;

	--yd-accent-100: #fff3e4;
	--yd-accent-200: #ffe3bf;
	--yd-accent-300: #facb8d;
	--yd-accent-400: #e1ad66;
	--yd-accent-500: #c28d41;
	--yd-accent-600: #a06f24;
	--yd-accent-700: #7d5411;
	--yd-accent-800: #5a3b0a;
	--yd-accent-900: #3a270d;

	/* — type — */
	--yd-font: "Kanit", system-ui, -apple-system, "Segoe UI", sans-serif;
	--yd-font-heading: "Kanit", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* — metrics — */
	--yd-max: 1240px;
	--yd-gutter: 40px;
	--yd-radius-sm: 2px;
	--yd-radius-md: 4px;
	--yd-radius-lg: 7px;
	--yd-shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
	--yd-shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
	--yd-shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

	font-family: var(--yd-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--yd-text);
	background: var(--yd-bg);
	-webkit-font-smoothing: antialiased;
}

.yumat-digital *,
.yumat-digital *::before,
.yumat-digital *::after {
	box-sizing: border-box;
}

/* Full-bleed without touching the theme's own layout rules. */
.yumat-digital--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.yumat-digital a {
	color: var(--yd-accent-700);
	text-underline-offset: 3px;
}

.yumat-digital a:hover {
	color: var(--yd-accent-800);
}

.yumat-digital :focus-visible {
	outline: 2px solid var(--yd-accent);
	outline-offset: 2px;
}

.yumat-digital ::selection {
	background: color-mix(in srgb, var(--yd-accent) 30%, transparent);
}

.yumat-digital img {
	max-width: 100%;
	height: auto;
	display: block;
}

.yumat-digital p {
	margin: 0;
}

.yumat-digital h1,
.yumat-digital h2,
.yumat-digital h3,
.yumat-digital h4 {
	font-family: var(--yd-font-heading);
}

/*
 * Heading defaults live on the component classes, not on the bare `h*`
 * selectors: a `.yumat-digital h2` selector would outrank a single-class
 * `.yd-h2` and silently win. Individual rules further down override these.
 */
.yd-hero__title,
.yd-h2,
.yd-gallery__title,
.yd-process__title,
.yd-quote__title,
.yd-service__name,
.yd-tile__name,
.yd-system__name,
.yd-step__title,
.yd-plan__name,
.yd-modal__name {
	margin: 0;
	line-height: 1.12;
	letter-spacing: -0.015em;
}

.yumat-digital ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   Shared components
   ═══════════════════════════════════════════════════════════════ */

.yd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	text-decoration: none;
	font-family: var(--yd-font-heading);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.2;
	color: var(--yd-text);
	background: transparent;
	border: 1px solid transparent;
	padding: 9px 17px;
	border-radius: var(--yd-radius-md);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.yd-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.yd-btn--primary {
	color: var(--yd-accent);
	border-color: var(--yd-accent);
}

.yd-btn--primary:hover {
	color: var(--yd-accent);
	background: color-mix(in srgb, var(--yd-accent) 12%, transparent);
}

.yd-btn--primary:active {
	background: color-mix(in srgb, var(--yd-accent) 22%, transparent);
}

.yd-btn--ghost {
	color: var(--yd-accent);
	padding-inline: 5px;
}

.yd-btn--ghost:hover {
	color: var(--yd-accent);
	background: color-mix(in srgb, var(--yd-accent) 10%, transparent);
}

.yd-btn--ghost:active {
	background: color-mix(in srgb, var(--yd-accent) 18%, transparent);
}

.yd-btn--icon {
	width: 36px;
	height: 36px;
	padding: 0;
	font-size: 16px;
}

.yd-btn--block {
	width: 100%;
	margin-top: 9px;
}

.yd-input {
	width: 100%;
	min-height: 36px;
	padding: 6px 10px;
	font-family: inherit;
	font-size: 14px;
	color: var(--yd-text);
	caret-color: var(--yd-accent);
	background: transparent;
	border: 1px solid var(--yd-divider);
	border-radius: var(--yd-radius-md);
}

.yd-input:hover {
	border-color: color-mix(in srgb, var(--yd-text) 45%, transparent);
}

.yd-input:focus-visible {
	border-color: var(--yd-accent);
	outline-offset: 0;
}

.yd-field > label {
	display: block;
	font-size: 12px;
	margin-bottom: 5px;
	color: color-mix(in srgb, var(--yd-text) 70%, transparent);
}

.yd-tag {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	letter-spacing: 0.02em;
	padding: 3px 10px;
	border-radius: 3px;
	border: 1px solid transparent;
	background: transparent;
	font-family: inherit;
	color: inherit;
}

.yd-tag--accent {
	background: var(--yd-accent-100);
	color: var(--yd-accent-800);
}

.yd-tag--outline {
	border-color: var(--yd-accent);
	color: var(--yd-accent);
}

.yd-card {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 14px;
	border-radius: var(--yd-radius-md);
	background: transparent;
	border: 1px solid var(--yd-divider);
}

.yd-hr {
	height: 1px;
	border: 0;
	margin: 0;
	background: var(--yd-divider);
}

.yd-plate {
	filter: sepia(0.22) saturate(0.82) contrast(1.05);
	border: 6px solid var(--yd-surface);
	outline: 1px solid var(--yd-divider);
}

.yd-seg {
	display: inline-flex;
	overflow: hidden;
	border: 1px solid var(--yd-divider);
	border-radius: var(--yd-radius-md);
}

.yd-seg__opt {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	font-size: 13px;
	font-family: var(--yd-font);
	cursor: pointer;
	border: 0;
	background: transparent;
	color: var(--yd-neutral-700);
	font-variant-numeric: tabular-nums;
}

.yd-seg__opt + .yd-seg__opt {
	border-left: 1px solid var(--yd-divider);
}

.yd-seg__opt:hover {
	background: color-mix(in srgb, var(--yd-text) 7%, transparent);
}

.yd-seg__opt.is-active {
	background: var(--yd-accent-100);
	color: var(--yd-accent-800);
}

.yd-num {
	font-variant-numeric: tabular-nums;
}

.yd-kicker {
	font-size: 11px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--yd-accent-700);
}

.yd-eyebrow {
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--yd-neutral-600);
}

.yd-h2 {
	font-weight: 300;
	font-size: 36px;
}

.yd-section {
	max-width: var(--yd-max);
	margin: 0 auto;
}

/* Keep in-page anchors clear of the sticky header. */
.yumat-digital [id] {
	scroll-margin-top: var(--yd-anchor-offset, 88px);
}

.yd-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.yd-section__lead {
	margin: 0;
	font-size: 14px;
	color: var(--yd-neutral-700);
	max-width: 46ch;
}

/* ═══════════════════════════════════════════════════════════════════
   Header
   ═══════════════════════════════════════════════════════════════ */

.yd-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: color-mix(in srgb, var(--yd-bg) 92%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--yd-divider);
}

.yd-header__inner {
	max-width: var(--yd-max);
	margin: 0 auto;
	padding: 16px var(--yd-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.yd-brand {
	display: flex;
	align-items: baseline;
	gap: 10px;
	text-decoration: none;
	color: inherit;
}

.yd-brand__name {
	font-family: var(--yd-font-heading);
	font-size: 24px;
	letter-spacing: 0.02em;
	line-height: 1.2;
}

.yd-brand__tagline {
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--yd-neutral-600);
}

.yd-brand__logo {
	max-height: 40px;
	width: auto;
}

.yd-nav {
	display: flex;
	align-items: center;
	gap: 18px;
	font-size: 14px;
	white-space: nowrap;
}

.yd-nav a {
	text-decoration: none;
	color: var(--yd-text);
}

.yd-nav a:hover {
	color: var(--yd-accent);
}

.yd-nav a.yd-btn--primary {
	color: var(--yd-accent);
}

.yd-nav-toggle {
	display: none;
	width: 40px;
	height: 36px;
	padding: 0;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--yd-divider);
	border-radius: var(--yd-radius-md);
	cursor: pointer;
	color: var(--yd-text);
}

.yd-nav-toggle__bar,
.yd-nav-toggle__bar::before,
.yd-nav-toggle__bar::after {
	display: block;
	width: 18px;
	height: 1.5px;
	background: currentColor;
	content: "";
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.yd-nav-toggle__bar::before {
	transform: translateY(-6px);
}

.yd-nav-toggle__bar::after {
	transform: translateY(4.5px);
}

.yd-nav-toggle[aria-expanded="true"] .yd-nav-toggle__bar {
	background: transparent;
}

.yd-nav-toggle[aria-expanded="true"] .yd-nav-toggle__bar::before {
	transform: rotate(45deg);
}

.yd-nav-toggle[aria-expanded="true"] .yd-nav-toggle__bar::after {
	transform: rotate(-45deg);
}

/* ═══════════════════════════════════════════════════════════════════
   Hero
   ═══════════════════════════════════════════════════════════════ */

.yd-hero {
	position: relative;
	max-width: var(--yd-max);
	margin: 0 auto;
	padding: 96px var(--yd-gutter) 72px;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 64px;
	align-items: end;
}

.yd-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	pointer-events: none;
	z-index: 0;
}

.yd-hero > div {
	position: relative;
	z-index: 1;
}

.yd-hero__kicker {
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--yd-accent-700);
	font-variant-numeric: tabular-nums;
}

.yd-hero__title {
	font-weight: 300;
	font-size: 60px;
	line-height: 1.14;
	letter-spacing: -0.01em;
	margin: 20px 0 0;
	max-width: 16ch;
	text-wrap: pretty;
}

.yd-hero__title:first-child {
	margin-top: 0;
}

.yd-hero__desc {
	margin-top: 24px;
	max-width: 46ch;
	font-size: 17px;
	line-height: 1.75;
	color: var(--yd-neutral-800);
}

.yd-hero__desc p {
	margin: 0 0 14px;
}

.yd-hero__desc p:last-child {
	margin-bottom: 0;
}

.yd-hero__actions {
	display: flex;
	gap: 14px;
	margin-top: 32px;
	flex-wrap: wrap;
}

.yd-hero__media {
	margin-bottom: 20px;
	border: 1px solid var(--yd-divider);
}

.yd-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--yd-divider);
	border: 1px solid var(--yd-divider);
}

.yd-stat {
	background: var(--yd-bg);
	padding: 22px 20px;
}

.yd-stat__value {
	font-family: var(--yd-font-heading);
	font-size: 40px;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

.yd-stat__label {
	font-size: 13px;
	color: var(--yd-neutral-700);
	margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   Services
   ═══════════════════════════════════════════════════════════════ */

.yd-services {
	padding: 0 var(--yd-gutter) 24px;
}

.yd-services .yd-hr,
.yd-gallery .yd-hr,
.yd-line .yd-hr,
.yd-systems .yd-hr {
	margin-bottom: 40px;
}

.yd-work .yd-hr,
.yd-process .yd-hr,
.yd-pricing .yd-hr {
	margin-bottom: 44px;
}

.yd-services__head {
	margin-bottom: 36px;
}

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

.yd-service {
	background: var(--yd-bg);
	padding: 32px 28px 34px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.yd-service__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.yd-service__no {
	font-family: var(--yd-font-heading);
	font-weight: 300;
	font-size: 32px;
	color: var(--yd-accent);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.yd-service__media {
	border: 1px solid var(--yd-divider);
}

.yd-service__name {
	font-weight: 500;
	font-size: 23px;
	line-height: 1.3;
}

.yd-service__desc {
	font-size: 14px;
	line-height: 1.8;
	color: var(--yd-neutral-800);
}

.yd-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 13px;
	color: var(--yd-neutral-800);
}

.yd-list li {
	display: flex;
	gap: 9px;
}

.yd-list li::before {
	content: "—";
	color: var(--yd-accent);
	flex: none;
}

.yd-service__foot {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--yd-divider);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.yd-service__price {
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	color: var(--yd-accent-700);
}

/* ═══════════════════════════════════════════════════════════════════
   Template library
   ═══════════════════════════════════════════════════════════════ */

.yd-gallery {
	padding: 0 var(--yd-gutter) 40px;
}

.yd-gallery__title {
	font-weight: 300;
	font-size: 36px;
	margin: 12px 0 0;
}

.yd-gallery__meta {
	margin: 10px 0 0;
	color: var(--yd-neutral-700);
	font-size: 15px;
}

.yd-gallery__controls {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.yd-gallery__search {
	width: 270px;
	max-width: 100%;
}

.yd-fav-toggle {
	font-size: 13px;
	border: 1px solid var(--yd-neutral-400);
	color: var(--yd-neutral-700);
}

.yd-fav-toggle.is-active {
	border-color: var(--yd-accent);
	color: var(--yd-accent-800);
}

.yd-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 28px 0 32px;
}

.yd-cat {
	cursor: pointer;
	font-family: var(--yd-font);
	font-size: 13px;
	background: transparent;
	border: 1px solid var(--yd-neutral-400);
	color: var(--yd-neutral-700);
}

.yd-cat.is-active {
	background: var(--yd-accent-100);
	border-color: var(--yd-accent);
	color: var(--yd-accent-800);
}

.yd-cat__count {
	margin-left: 8px;
	font-variant-numeric: tabular-nums;
	opacity: 0.55;
}

.yd-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.yd-tile {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 0;
	transition: border-color 0.15s ease;
}

.yd-tile.is-selected {
	border-color: var(--yd-accent);
}

.yd-tile[hidden] {
	display: none;
}

.yd-tile__media {
	aspect-ratio: 4 / 3;
	border-bottom: 1px solid var(--yd-divider);
	position: relative;
	overflow: hidden;
}

.yd-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.yd-fav {
	position: absolute;
	left: 10px;
	top: 10px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--yd-divider);
	background: var(--yd-bg);
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	color: var(--yd-neutral-600);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.yd-fav.is-active {
	color: var(--yd-accent-700);
}

.yd-tile__demo {
	position: absolute;
	right: 10px;
	bottom: 10px;
	background: var(--yd-bg);
	font-size: 12px;
	padding: 6px 12px;
	cursor: pointer;
}

.yd-tile__body {
	padding: 20px 22px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.yd-tile__name {
	font-weight: 500;
	font-size: 24px;
	line-height: 1.2;
}

.yd-tile__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.yd-tile__foot {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--yd-divider);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.yd-tile__price {
	font-family: var(--yd-font-heading);
	font-size: 20px;
	font-variant-numeric: tabular-nums;
}

.yd-empty {
	padding: 64px 0;
	text-align: center;
	color: var(--yd-neutral-600);
}

/* ═══════════════════════════════════════════════════════════════════
   LINE OA
   ═══════════════════════════════════════════════════════════════ */

.yd-line {
	padding: 72px var(--yd-gutter);
}

.yd-line__head {
	margin-bottom: 36px;
}

.yd-line__head .yd-section__lead {
	max-width: 44ch;
}

.yd-line__grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 56px;
	align-items: start;
}

.yd-menus {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: start;
}

.yd-menu__frame {
	border: 1px solid var(--yd-divider);
	background: var(--yd-neutral-100);
	padding: 8px;
	display: flex;
	align-items: center;
	min-height: 112px;
}

.yd-menu__frame img {
	width: 100%;
}

.yd-menu__grid {
	display: grid;
	gap: 5px;
	width: 100%;
}

.yd-menu__cell {
	border: 1px solid var(--yd-neutral-400);
	background: var(--yd-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	color: var(--yd-neutral-700);
	text-align: center;
	padding: 4px;
	line-height: 1.3;
}

.yd-menu__name {
	margin-top: 10px;
	font-size: 13px;
}

.yd-menu__note {
	font-size: 12px;
	color: var(--yd-neutral-600);
	font-variant-numeric: tabular-nums;
}

.yd-rows {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--yd-divider);
	border: 1px solid var(--yd-divider);
}

.yd-row {
	background: var(--yd-bg);
	padding: 20px 22px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: baseline;
}

.yd-row__name {
	font-size: 15px;
}

.yd-row__desc {
	font-size: 13px;
	color: var(--yd-neutral-700);
	margin-top: 4px;
}

.yd-row__price {
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--yd-accent-700);
	white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   Systems
   ═══════════════════════════════════════════════════════════════ */

.yd-systems {
	padding: 0 var(--yd-gutter) 72px;
}

.yd-systems__head {
	margin-bottom: 36px;
}

.yd-systems__head .yd-section__lead {
	max-width: 44ch;
}

.yd-system {
	background: var(--yd-bg);
	padding: 26px 24px 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.yd-system__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.yd-system__name {
	font-weight: 500;
	font-size: 19px;
}

.yd-system__tag {
	font-size: 10px;
	white-space: nowrap;
}

.yd-system__desc {
	font-size: 14px;
	line-height: 1.75;
	color: var(--yd-neutral-800);
}

.yd-system__price {
	margin-top: auto;
	padding-top: 12px;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--yd-accent-700);
}

/* ═══════════════════════════════════════════════════════════════════
   Work
   ═══════════════════════════════════════════════════════════════ */

.yd-work {
	padding: 72px var(--yd-gutter);
}

.yd-work__head {
	margin-bottom: 36px;
}

.yd-works {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.yd-work__thumb {
	aspect-ratio: 4 / 3;
	padding: 8px;
	overflow: hidden;
}

.yd-work__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.yd-work__meta {
	margin-top: 14px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.yd-work__name {
	font-family: var(--yd-font-heading);
	font-size: 21px;
	text-decoration: none;
	color: inherit;
}

.yd-work__kind {
	font-size: 12px;
	color: var(--yd-neutral-600);
	margin-top: 3px;
}

.yd-work__year {
	font-size: 12px;
	color: var(--yd-neutral-600);
	font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════
   Process
   ═══════════════════════════════════════════════════════════════ */

.yd-process {
	padding: 0 var(--yd-gutter) 72px;
}

.yd-process__title {
	font-weight: 300;
	font-size: 36px;
	margin: 0 0 40px;
}

.yd-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--yd-divider);
	border: 1px solid var(--yd-divider);
}

.yd-step {
	background: var(--yd-bg);
	padding: 28px 24px 32px;
}

.yd-step__no {
	font-family: var(--yd-font-heading);
	font-size: 34px;
	color: var(--yd-accent);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.yd-step__title {
	font-weight: 600;
	font-size: 20px;
	margin: 14px 0 8px;
}

.yd-step__desc {
	font-size: 14px;
	line-height: 1.7;
	color: var(--yd-neutral-800);
}

/* ═══════════════════════════════════════════════════════════════════
   Pricing
   ═══════════════════════════════════════════════════════════════ */

.yd-pricing {
	padding: 0 var(--yd-gutter) 72px;
}

.yd-pricing__head {
	margin-bottom: 40px;
}

.yd-plans {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.yd-plan {
	padding: 30px 28px 32px;
	gap: 16px;
}

.yd-plan.is-featured {
	border-color: var(--yd-accent);
}

.yd-plan__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 22px;
}

.yd-plan__name {
	font-weight: 500;
	font-size: 30px;
}

.yd-plan__price {
	font-family: var(--yd-font-heading);
	font-size: 36px;
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
}

.yd-plan__rule {
	height: 1px;
	background: var(--yd-divider);
}

.yd-plan__features {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
	line-height: 1.6;
}

.yd-plan__features li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.yd-plan__features li::before {
	content: "—";
	color: var(--yd-accent);
	margin-top: 1px;
	flex: none;
}

.yd-plan .yd-btn--block {
	margin-top: auto;
}

.yd-compare {
	margin-top: 36px;
	border: 1px solid var(--yd-divider);
	overflow-x: auto;
}

.yd-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	min-width: 560px;
}

.yd-table th {
	text-align: left;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--yd-text) 60%, transparent);
	padding: 9px;
	border-bottom: 1px solid var(--yd-divider);
	font-weight: 500;
}

.yd-table td {
	padding: 9px;
	border-bottom: 1px solid var(--yd-divider);
}

.yd-table tbody tr:hover {
	background: color-mix(in srgb, var(--yd-text) 4%, transparent);
}

.yd-table .yd-center {
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════
   Quote
   ═══════════════════════════════════════════════════════════════ */

.yd-quote {
	position: relative;
	border-top: 1px solid var(--yd-divider);
	background: var(--yd-neutral-100);
}

.yd-quote__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.1;
	pointer-events: none;
}

.yd-quote__inner {
	position: relative;
	max-width: var(--yd-max);
	margin: 0 auto;
	padding: 72px var(--yd-gutter);
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 72px;
}

.yd-quote__title {
	font-weight: 300;
	font-size: 36px;
}

.yd-quote__desc {
	margin-top: 18px;
	font-size: 16px;
	line-height: 1.8;
	color: var(--yd-neutral-800);
	max-width: 42ch;
}

.yd-quote__desc p {
	margin: 0 0 14px;
}

.yd-quote__desc p:last-child {
	margin-bottom: 0;
}

.yd-quote__rule {
	margin: 32px 0;
}

.yd-contact {
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-size: 14px;
	color: var(--yd-neutral-800);
}

.yd-contact a {
	color: inherit;
	text-decoration: none;
}

.yd-contact a:hover {
	color: var(--yd-accent-800);
	text-decoration: underline;
}

.yd-quote__card {
	padding: 32px;
	background: var(--yd-bg);
}

.yd-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.yd-form__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.yd-form__legend {
	font-size: 13px;
	margin-bottom: 10px;
	color: var(--yd-neutral-700);
}

.yd-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.yd-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
}

.yd-chip__remove {
	border: none;
	background: none;
	cursor: pointer;
	color: inherit;
	padding: 0;
	font-size: 15px;
	line-height: 1;
}

.yd-chips-empty {
	font-size: 13px;
	color: var(--yd-neutral-600);
	border: 1px dashed var(--yd-neutral-400);
	border-radius: var(--yd-radius-md);
	padding: 14px;
}

.yd-form__error {
	font-size: 13px;
	color: #a02b2b;
}

.yd-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.yd-sent {
	padding: 36px 8px;
	text-align: center;
}

.yd-sent__title {
	font-family: var(--yd-font-heading);
	font-size: 30px;
}

.yd-sent__text {
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--yd-neutral-700);
}

.yd-sent .yd-btn {
	margin-top: 20px;
}

/* ═══════════════════════════════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════════════════════════ */

.yd-footer {
	border-top: 1px solid var(--yd-divider);
	background: var(--yd-footer-bg);
	color: var(--yd-neutral-200);
}

.yd-footer__inner {
	max-width: var(--yd-max);
	margin: 0 auto;
	padding: 44px var(--yd-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.yd-footer__brand {
	font-family: var(--yd-font-heading);
	font-size: 22px;
	color: var(--yd-neutral-100);
}

.yd-footer__brand img {
	max-height: 36px;
	width: auto;
}

.yd-footer__links {
	display: flex;
	gap: 22px;
	font-size: 13px;
	flex-wrap: wrap;
}

.yd-footer__links a,
.yd-footer__social a {
	color: var(--yd-accent-300);
	text-decoration: none;
}

.yd-footer__links a:hover,
.yd-footer__social a:hover {
	color: var(--yd-accent-200);
	text-decoration: underline;
}

.yd-footer__social {
	display: flex;
	gap: 16px;
	font-size: 13px;
	flex-wrap: wrap;
}

.yd-footer__text {
	font-size: 13px;
	color: var(--yd-neutral-400);
	font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════
   Modal
   ═══════════════════════════════════════════════════════════════ */

.yd-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background: color-mix(in srgb, var(--yd-neutral-900) 50%, transparent);
	animation: yd-fade 0.18s ease-out;
}

.yd-modal[hidden] {
	display: none;
}

@keyframes yd-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.yd-modal__dialog {
	width: 100%;
	max-width: 1040px;
	max-height: 88vh;
	overflow: auto;
	padding: 0;
	background: var(--yd-surface);
	box-shadow: var(--yd-shadow-lg);
	border: 1px solid var(--yd-divider);
	border-radius: var(--yd-radius-lg);
	animation: yd-rise 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes yd-rise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.yumat-digital *,
	.yd-modal,
	.yd-modal__dialog {
		animation: none !important;
		transition: none !important;
	}
}

.yd-modal__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 28px 20px;
	border-bottom: 1px solid var(--yd-divider);
}

.yd-modal__name {
	font-weight: 500;
	font-size: 30px;
	margin: 8px 0 0;
}

.yd-modal__tools {
	display: flex;
	align-items: center;
	gap: 12px;
}

.yd-modal__body {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
}

.yd-modal__stage {
	padding: 28px;
	background: var(--yd-neutral-200);
	border-right: 1px solid var(--yd-divider);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 400px;
}

.yd-modal__frame {
	width: 100%;
	aspect-ratio: 16 / 10;
	border: 1px solid var(--yd-neutral-400);
	border-radius: var(--yd-radius-md);
	overflow: hidden;
	box-shadow: var(--yd-shadow-md);
	background: var(--yd-bg);
	transition: width 0.2s ease;
}

.yd-modal__frame.is-mobile {
	width: 300px;
	aspect-ratio: 9 / 16;
}

.yd-modal__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.yd-modal__side {
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.yd-modal__desc {
	font-size: 15px;
	line-height: 1.8;
	color: var(--yd-neutral-800);
}

.yd-modal__rule {
	height: 1px;
	background: var(--yd-divider);
}

.yd-specs {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 14px;
}

.yd-specs__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.yd-specs__k {
	color: var(--yd-neutral-600);
}

.yd-specs__v {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.yd-modal__price {
	font-family: var(--yd-font-heading);
	font-size: 30px;
	font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════
   Browser wireframe preview (ported from the prototype's Preview component)
   ═══════════════════════════════════════════════════════════════ */

.yd-wire {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--yd-neutral-100);
	overflow: hidden;
}

.yd-wire__chrome {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 6px 8px;
	border-bottom: 1px solid var(--yd-divider);
	background: var(--yd-neutral-200);
	flex-shrink: 0;
}

.yd-wire__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--yd-neutral-400);
}

.yd-wire__url {
	margin-left: 6px;
	height: 6px;
	flex: 1;
	max-width: 96px;
	border-radius: 3px;
	background: var(--yd-neutral-300);
}

.yd-wire__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	border-bottom: 1px solid var(--yd-divider);
	flex-shrink: 0;
}

.yd-wire__logo {
	height: 7px;
	width: 44px;
	background: var(--yd-accent-500);
}

.yd-wire__links {
	display: flex;
	gap: 7px;
}

.yd-wire__link {
	height: 5px;
	background: var(--yd-neutral-300);
}

.yd-wire__body {
	flex: 1;
	min-height: 0;
}

.yd-wire__bar {
	background: var(--yd-neutral-300);
}

.yd-wire__bar--dark {
	background: var(--yd-neutral-800);
}

.yd-wire__bar--mid {
	background: var(--yd-neutral-400);
}

.yd-wire__cta {
	border: 1px solid var(--yd-accent);
	border-radius: var(--yd-radius-md);
}

/* center */
.yd-wire__body--center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 22px;
}

/* left */
.yd-wire__body--left {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 14px;
	padding: 16px 18px;
	align-items: center;
}

.yd-wire__col {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.yd-wire__block {
	height: 100%;
	min-height: 70px;
	background: var(--yd-neutral-300);
	border: 1px solid var(--yd-divider);
}

/* split */
.yd-wire__body--split {
	display: flex;
	flex-direction: column;
}

.yd-wire__hero {
	flex: 1;
	min-height: 60px;
	background: var(--yd-neutral-300);
	display: flex;
	align-items: center;
	justify-content: center;
}

.yd-wire__hero span {
	height: 10px;
	width: 46%;
	background: var(--yd-neutral-100);
}

.yd-wire__cols {
	display: flex;
	gap: 9px;
	padding: 12px 14px;
}

.yd-wire__cols > div {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

/* grid */
.yd-wire__body--grid {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 16px;
}

.yd-wire__cells {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 8px;
}

.yd-wire__cells > div {
	border: 1px solid var(--yd-divider);
	background: var(--yd-neutral-200);
}

/* ═══════════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1180px) {
	.yumat-digital {
		--yd-gutter: 28px;
	}

	.yd-hero {
		gap: 44px;
	}

	.yd-line__grid {
		gap: 36px;
	}
}

@media (max-width: 1020px) {
	.yd-hero {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 40px;
		padding-top: 64px;
	}

	.yd-hero__title {
		font-size: 46px;
		max-width: 20ch;
	}

	.yd-grid-3,
	.yd-tiles,
	.yd-works,
	.yd-plans {
		grid-template-columns: repeat(2, 1fr);
	}

	.yd-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.yd-line__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.yd-quote__inner {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	.yd-modal__body {
		grid-template-columns: 1fr;
	}

	.yd-modal__stage {
		min-height: 260px;
		border-right: 0;
		border-bottom: 1px solid var(--yd-divider);
	}
}

@media (max-width: 900px) {
	.yd-nav-toggle {
		display: inline-flex;
	}

	.yd-header__inner {
		flex-wrap: wrap;
	}

	.yd-nav {
		display: none;
		order: 3;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		white-space: normal;
		border-top: 1px solid var(--yd-divider);
		margin: 4px 0 0;
		padding-top: 4px;
	}

	.yd-nav.is-open {
		display: flex;
	}

	.yd-nav a {
		padding: 12px 2px;
		border-bottom: 1px solid var(--yd-divider);
	}

	.yd-nav a.yd-btn {
		margin-top: 12px;
		margin-bottom: 4px;
		border-bottom: 1px solid var(--yd-accent);
		justify-content: center;
	}
}

@media (max-width: 760px) {
	.yumat-digital {
		--yd-gutter: 20px;
	}

	.yd-hero {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.yd-hero__title {
		font-size: 34px;
		max-width: none;
	}

	.yd-hero__desc {
		font-size: 16px;
		max-width: none;
	}

	.yd-h2,
	.yd-gallery__title,
	.yd-process__title,
	.yd-quote__title {
		font-size: 28px;
	}

	.yd-grid-3,
	.yd-tiles,
	.yd-works,
	.yd-plans,
	.yd-grid-4,
	.yd-menus {
		grid-template-columns: 1fr;
	}

	.yd-menus {
		gap: 24px;
	}

	.yd-tiles,
	.yd-works,
	.yd-plans {
		gap: 20px;
	}

	.yd-service {
		padding: 26px 22px 28px;
	}

	.yd-line,
	.yd-work {
		padding-top: 52px;
		padding-bottom: 52px;
	}

	.yd-systems,
	.yd-process,
	.yd-pricing {
		padding-bottom: 52px;
	}

	.yd-quote__inner {
		padding-top: 52px;
		padding-bottom: 52px;
	}

	.yd-quote__card {
		padding: 22px;
	}

	.yd-gallery__controls {
		width: 100%;
	}

	.yd-gallery__search {
		flex: 1;
		width: auto;
		min-width: 0;
	}

	.yd-modal {
		padding: 0;
	}

	.yd-modal__dialog {
		max-width: none;
		max-height: 100vh;
		height: 100%;
		border-radius: 0;
		border: 0;
	}

	.yd-modal__head {
		padding: 18px 20px 16px;
		flex-wrap: wrap;
	}

	.yd-modal__name {
		font-size: 24px;
	}

	.yd-modal__stage,
	.yd-modal__side {
		padding: 20px;
	}

	.yd-modal__frame.is-mobile {
		width: 220px;
	}

	.yd-footer__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		padding-top: 32px;
		padding-bottom: 32px;
	}
}

@media (max-width: 480px) {
	.yd-hero__title {
		font-size: 29px;
	}

	.yd-stat__value {
		font-size: 32px;
	}

	.yd-form__pair {
		grid-template-columns: 1fr;
	}

	.yd-seg {
		flex-direction: column;
		align-items: stretch;
	}

	.yd-seg__opt + .yd-seg__opt {
		border-left: 0;
		border-top: 1px solid var(--yd-divider);
	}

	.yd-tile__name {
		font-size: 21px;
	}

	.yd-plan__price {
		font-size: 30px;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   Website packages — "เลือกเว็บไซต์ที่เหมาะกับธุรกิจของคุณ"

   Deliberately lighter than the rest of the page: a white ground carries the
   block, ink does the reading work, and gold is reserved for the one thing a
   visitor should act on. Roughly 75 / 20 / 5.
   ══════════════════════════════════════════════════════════════════════ */

.yumat-digital {
	--yd-paper: #ffffff;
}

.yd-section--paper {
	max-width: none;
	background: var(--yd-paper);
	border-top: 1px solid var(--yd-divider);
	border-bottom: 1px solid var(--yd-divider);
}

.yd-section__inner {
	max-width: var(--yd-max);
	margin: 0 auto;
	padding: 88px var(--yd-gutter);
}

/* — heading — */
.yd-pricing__intro {
	max-width: 62ch;
	margin: 0 auto 52px;
	text-align: center;
}

.yd-pricing__title {
	margin: 0;
}

.yd-pricing__lead {
	margin: 16px 0 0;
	font-size: 16px;
	line-height: 1.85;
	color: var(--yd-neutral-700);
}

/* — the three cards — */
.yd-pkgs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}

.yd-pkg {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 32px 28px 30px;
	background: var(--yd-paper);
	border: 1px solid var(--yd-neutral-300);
	border-radius: var(--yd-radius-lg);
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.yd-pkg:hover {
	border-color: var(--yd-neutral-400);
	box-shadow: var(--yd-shadow-md);
}

.yd-pkg.is-featured {
	border-color: var(--yd-accent);
	box-shadow: 0 10px 30px color-mix(in srgb, var(--yd-accent) 16%, transparent);
	transform: translateY(-10px);
}

.yd-pkg.is-featured:hover {
	box-shadow: 0 14px 38px color-mix(in srgb, var(--yd-accent) 22%, transparent);
}

.yd-pkg__badge {
	position: absolute;
	top: -11px;
	left: 28px;
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	font-size: 11px;
	letter-spacing: 0.04em;
	white-space: nowrap;
	color: var(--yd-neutral-800);
	background: var(--yd-neutral-200);
	border: 1px solid var(--yd-neutral-300);
	border-radius: 999px;
}

.yd-pkg__badge.is-strong {
	color: #fff;
	background: var(--yd-accent);
	border-color: var(--yd-accent);
}

.yd-pkg__name {
	margin: 6px 0 0;
	font-family: var(--yd-font-heading);
	font-weight: 500;
	font-size: 25px;
	line-height: 1.25;
}

.yd-pkg__price {
	margin: 10px 0 0;
	font-family: var(--yd-font-heading);
	font-weight: 500;
	font-size: 27px;
	font-variant-numeric: tabular-nums;
	color: var(--yd-accent-700);
}

/* What the price actually buys. Sits directly under the number so nobody can
   read the price without reading the technology it covers. */
.yd-pkg__tech {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
}

.yd-pkg__tech-label {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--yd-neutral-600);
}

.yd-pkg__tech-value {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	font-size: 12.5px;
	color: var(--yd-neutral-900);
	background: var(--yd-neutral-100);
	border: 1px solid var(--yd-neutral-300);
	border-radius: 999px;
}

.yd-pkg.is-featured .yd-pkg__tech-value {
	color: var(--yd-accent-800);
	background: var(--yd-accent-100);
	border-color: color-mix(in srgb, var(--yd-accent) 35%, transparent);
}

.yd-pkg__tech-note {
	margin: 9px 0 0;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--yd-neutral-600);
}

.yd-pkg__desc {
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.85;
	color: var(--yd-neutral-700);
}

.yd-pkg__features {
	list-style: none;
	margin: 20px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--yd-neutral-200);
	display: flex;
	flex-direction: column;
	gap: 11px;
	font-size: 14px;
	line-height: 1.6;
}

.yd-pkg__features li {
	position: relative;
	padding-left: 26px;
}

.yd-pkg__features li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	font-size: 13px;
	color: var(--yd-accent);
}

/* — "ดูรายละเอียด" accordion: native <details>, no JavaScript — */
.yd-pkg__more {
	margin-top: 18px;
	border-top: 1px solid var(--yd-neutral-200);
	padding-top: 14px;
}

.yd-pkg__summary {
	display: flex;
	align-items: center;
	gap: 7px;
	list-style: none;
	cursor: pointer;
	font-size: 13px;
	color: var(--yd-accent-700);
	user-select: none;
}

.yd-pkg__summary::-webkit-details-marker {
	display: none;
}

.yd-pkg__summary::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.18s ease;
}

.yd-pkg__more[open] .yd-pkg__summary::after {
	transform: translateY(1px) rotate(-135deg);
}

.yd-pkg__summary:hover {
	color: var(--yd-accent-800);
}

.yd-pkg__summary:focus-visible {
	outline: 2px solid var(--yd-accent);
	outline-offset: 3px;
}

.yd-pkg__more-close,
.yd-pkg__more[open] .yd-pkg__more-open {
	display: none;
}

.yd-pkg__more[open] .yd-pkg__more-close {
	display: inline;
}

.yd-pkg__more-body {
	padding-top: 14px;
}

.yd-pkg__more-title {
	margin: 0 0 10px;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--yd-neutral-600);
}

.yd-pkg__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--yd-neutral-800);
}

.yd-pkg__list li {
	position: relative;
	padding-left: 18px;
}

.yd-pkg__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 6px;
	height: 1px;
	background: var(--yd-neutral-500);
}

.yd-pkg__cta {
	margin-top: auto;
}

.yd-pkg .yd-pkg__cta {
	margin-top: 26px;
}

/* — filled gold button, used once per block — */
.yd-btn--solid {
	color: #fff;
	background: var(--yd-accent);
	border-color: var(--yd-accent);
}

.yd-btn--solid:hover {
	color: #fff;
	background: var(--yd-accent-600);
	border-color: var(--yd-accent-600);
}

.yd-btn--solid:active {
	background: var(--yd-accent-700);
	border-color: var(--yd-accent-700);
}

/* — price note and the costs quoted separately — */
.yd-pricenote {
	margin-top: 48px;
	padding: 26px 28px;
	background: var(--yd-neutral-100);
	border: 1px solid var(--yd-neutral-200);
	border-radius: var(--yd-radius-lg);
}

.yd-pricenote__text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--yd-neutral-700);
}

.yd-pricenote__extra {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px dashed var(--yd-neutral-300);
}

.yd-pricenote__title {
	margin: 0 0 12px;
	font-family: var(--yd-font-heading);
	font-weight: 500;
	font-size: 15px;
}

.yd-pricenote__fine {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.85;
	color: var(--yd-neutral-700);
}

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

.yd-chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 13px;
	font-size: 12.5px;
	color: var(--yd-neutral-800);
	background: var(--yd-paper);
	border: 1px solid var(--yd-neutral-300);
	border-radius: 999px;
}

.yd-chip--accent {
	color: var(--yd-accent-800);
	background: var(--yd-accent-100);
	border-color: color-mix(in srgb, var(--yd-accent) 35%, transparent);
}

/* — "อยากดูแลเว็บไซต์แบบไหน?" — */
.yd-build {
	margin-top: 72px;
	padding-top: 64px;
	border-top: 1px solid var(--yd-divider);
}

.yd-build__head {
	max-width: 62ch;
	margin: 0 auto 36px;
	text-align: center;
}

.yd-h3 {
	margin: 0;
	font-family: var(--yd-font-heading);
	font-weight: 300;
	font-size: 29px;
	line-height: 1.3;
}

.yd-build__lead {
	margin: 14px 0 0;
	font-size: 15px;
	line-height: 1.85;
	color: var(--yd-neutral-700);
}

.yd-build__note {
	display: inline-block;
	margin: 16px 0 0;
	padding: 10px 18px;
	font-size: 13px;
	line-height: 1.75;
	text-align: left;
	color: var(--yd-neutral-800);
	background: var(--yd-neutral-100);
	border: 1px solid var(--yd-neutral-200);
	border-radius: var(--yd-radius-md);
}

.yd-build__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.yd-way {
	display: flex;
	flex-direction: column;
	padding: 30px 28px;
	background: var(--yd-paper);
	border: 1px solid var(--yd-neutral-300);
	border-radius: var(--yd-radius-lg);
}

.yd-way__label {
	align-self: flex-start;
	padding: 4px 12px;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--yd-accent-800);
	background: var(--yd-accent-100);
	border-radius: 999px;
}

.yd-way__title {
	margin: 16px 0 0;
	font-family: var(--yd-font-heading);
	font-weight: 500;
	font-size: 21px;
	line-height: 1.35;
}

.yd-way__desc {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.85;
	color: var(--yd-neutral-700);
}

.yd-way__features {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
	line-height: 1.6;
}

.yd-way__features li {
	position: relative;
	padding-left: 26px;
}

.yd-way__features li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	font-size: 13px;
	color: var(--yd-accent);
}

.yd-way__note {
	margin-top: 22px;
	padding: 18px 20px;
	background: var(--yd-neutral-100);
	border-left: 2px solid var(--yd-accent-300);
	border-radius: 0 var(--yd-radius-md) var(--yd-radius-md) 0;
}

.yd-way__note-title {
	margin: 0 0 8px;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--yd-neutral-600);
}

.yd-way__note-text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.85;
	color: var(--yd-neutral-800);
}

.yd-way__choices-title {
	margin: 16px 0 10px;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--yd-neutral-800);
}

.yd-way__choices {
	margin: 0;
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 13.5px;
	line-height: 1.75;
	color: var(--yd-neutral-700);
}

.yd-way__choice-title {
	display: block;
	color: var(--yd-text);
}

/* — custom systems — */
.yd-custom {
	margin-top: 72px;
	padding-top: 64px;
	border-top: 1px solid var(--yd-divider);
}

.yd-custom__heading {
	text-align: center;
	margin-bottom: 32px;
}

.yd-custom__card {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: center;
	padding: 34px;
	background: var(--yd-neutral-900);
	border-radius: var(--yd-radius-lg);
	color: var(--yd-neutral-200);
}

.yd-custom__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.yd-custom__name {
	margin: 0;
	font-family: var(--yd-font-heading);
	font-weight: 400;
	font-size: 25px;
	color: #fff;
}

.yd-custom__price {
	font-size: 15px;
	color: var(--yd-accent-300);
	white-space: nowrap;
}

.yd-custom__desc {
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.8;
	color: var(--yd-neutral-400);
}

.yd-custom__items {
	margin-top: 18px;
}

.yd-custom__card .yd-chip {
	color: var(--yd-neutral-200);
	background: color-mix(in srgb, #ffffff 8%, transparent);
	border-color: color-mix(in srgb, #ffffff 18%, transparent);
}

.yd-custom__card .yd-chip--accent {
	color: var(--yd-accent-300);
	background: color-mix(in srgb, var(--yd-accent) 16%, transparent);
	border-color: color-mix(in srgb, var(--yd-accent) 42%, transparent);
}

.yd-custom__action .yd-btn {
	white-space: nowrap;
}

.yd-custom__card .yd-btn--primary {
	color: var(--yd-accent-300);
	border-color: color-mix(in srgb, var(--yd-accent) 60%, transparent);
}

.yd-custom__card .yd-btn--primary:hover {
	background: color-mix(in srgb, var(--yd-accent) 18%, transparent);
}

/* — closing CTA — */
.yd-help {
	margin-top: 72px;
	padding: 48px 40px;
	text-align: center;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--yd-accent) 7%, var(--yd-paper)) 0%,
		var(--yd-paper) 100%
	);
	border: 1px solid color-mix(in srgb, var(--yd-accent) 30%, transparent);
	border-radius: var(--yd-radius-lg);
}

.yd-help__title {
	margin: 0;
	font-family: var(--yd-font-heading);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.3;
}

.yd-help__text {
	max-width: 54ch;
	margin: 14px auto 0;
	font-size: 15px;
	line-height: 1.85;
	color: var(--yd-neutral-700);
}

.yd-help__cta {
	margin-top: 26px;
	padding: 13px 34px;
	font-size: 16px;
}

.yd-help__line {
	margin: 16px 0 0;
	font-size: 14px;
	color: var(--yd-neutral-700);
}

.yd-help__line-label {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--yd-neutral-600);
	margin-right: 8px;
}

.yd-help__line-id {
	color: var(--yd-accent-800);
}

/* ── responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1020px) {
	.yd-section__inner {
		padding: 72px var(--yd-gutter);
	}

	.yd-pkgs {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.yd-pkg.is-featured {
		transform: none;
	}

	.yd-custom__card {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.yd-custom__action .yd-btn {
		width: 100%;
	}
}

@media (max-width: 760px) {
	.yd-section__inner {
		padding: 56px var(--yd-gutter);
	}

	.yd-pricing__intro {
		margin-bottom: 40px;
		text-align: left;
	}

	.yd-pkgs,
	.yd-build__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	/* Put the recommended package first on a phone, where nobody scrolls past
	   two cards to find it. */
	.yd-pkg.is-featured {
		order: -1;
	}

	.yd-build__head,
	.yd-custom__heading {
		text-align: left;
	}

	.yd-build,
	.yd-custom {
		margin-top: 52px;
		padding-top: 44px;
	}

	.yd-help {
		margin-top: 52px;
		padding: 36px 24px;
		text-align: left;
	}

	.yd-help__text {
		margin-left: 0;
	}

	.yd-help__cta {
		display: flex;
		width: 100%;
	}

	/* Comfortable thumb targets — the default button height reads fine with a
	   mouse but sits under the 44px minimum on a phone. */
	.yd-pkg__cta,
	.yd-help__cta,
	.yd-custom__action .yd-btn {
		min-height: 46px;
	}

	/* The disclosure control is a tap target too. */
	.yd-pkg__summary {
		padding: 6px 0;
	}
}

@media (max-width: 480px) {
	.yd-pkg,
	.yd-way {
		padding: 26px 20px 24px;
	}

	.yd-pkg__name {
		font-size: 23px;
	}

	.yd-pkg__price {
		font-size: 25px;
	}

	.yd-pricenote,
	.yd-custom__card {
		padding: 22px 20px;
	}

	.yd-help__title {
		font-size: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.yd-pkg,
	.yd-pkg__summary::after {
		transition: none;
	}

	.yd-pkg.is-featured {
		transform: none;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   Split service pages — the compact hero that opens a single-service page,
   and the block that sends a visitor on to the other two services.
   ══════════════════════════════════════════════════════════════════════ */

.yd-pagehero {
	padding: 64px var(--yd-gutter) 48px;
}

.yd-crumbs {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 26px;
	font-size: 13px;
	color: var(--yd-neutral-600);
}

.yd-crumbs a {
	color: var(--yd-neutral-700);
	text-decoration: none;
	border-bottom: 1px solid var(--yd-neutral-300);
}

.yd-crumbs a:hover {
	color: var(--yd-accent-700);
	border-bottom-color: var(--yd-accent);
}

.yd-pagehero__title {
	margin: 12px 0 0;
	font-family: var(--yd-font-heading);
	font-weight: 300;
	font-size: clamp(32px, 4.4vw, 50px);
	line-height: 1.16;
	letter-spacing: -0.01em;
	max-width: 20ch;
	text-wrap: pretty;
}

.yd-pagehero__desc {
	margin: 20px 0 0;
	max-width: 56ch;
	font-size: 17px;
	line-height: 1.8;
	color: var(--yd-neutral-800);
}

.yd-pagehero__actions {
	margin-top: 30px;
}

/* — other services — */
.yd-cross {
	padding: 8px var(--yd-gutter) 72px;
}

.yd-cross__title {
	margin: 0 0 28px;
	font-size: 28px;
}

.yd-cross__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.yd-cross__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px 26px;
	text-decoration: none;
	color: inherit;
	background: var(--yd-neutral-100);
	border: 1px solid var(--yd-divider);
	border-radius: var(--yd-radius-lg);
	transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.yd-cross__card:hover {
	color: inherit;
	background: var(--yd-bg);
	border-color: var(--yd-accent);
	transform: translateY(-2px);
}

.yd-cross__name {
	font-family: var(--yd-font-heading);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.3;
}

.yd-cross__desc {
	font-size: 14px;
	line-height: 1.8;
	color: var(--yd-neutral-700);
}

.yd-cross__go {
	margin-top: 6px;
	font-size: 14px;
	color: var(--yd-accent-700);
}

@media (max-width: 760px) {
	.yd-pagehero {
		padding: 44px var(--yd-gutter) 36px;
	}

	.yd-pagehero__title {
		max-width: none;
	}

	.yd-cross__grid {
		grid-template-columns: 1fr;
	}

	.yd-cross {
		padding-bottom: 56px;
	}

	.yd-pagehero__actions .yd-btn {
		display: flex;
		width: 100%;
		min-height: 46px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.yd-cross__card {
		transition: none;
	}

	.yd-cross__card:hover {
		transform: none;
	}
}

/* — scope disclaimers: the price is a starting point, not the whole system — */
.yd-pkg__scope,
.yd-modal__scope {
	margin: 16px 0 0;
	padding: 12px 14px;
	font-size: 12.5px;
	line-height: 1.75;
	color: var(--yd-accent-800);
	background: var(--yd-accent-100);
	border-left: 2px solid var(--yd-accent);
	border-radius: 0 var(--yd-radius-md) var(--yd-radius-md) 0;
}

.yd-modal__scope[hidden] {
	display: none;
}

/* — Template Library intro copy — */
.yd-gallery__lead {
	margin: 12px 0 0;
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.8;
	color: var(--yd-neutral-800);
}

.yd-gallery__pricenote {
	margin: 8px 0 0;
	max-width: 62ch;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--yd-neutral-600);
}

@media (max-width: 760px) {
	/* The card's "ดูรายละเอียด" button is a primary tap target too. */
	.yd-tile__foot .yd-btn {
		min-height: 44px;
		padding-inline: 18px;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   In-page sub-navigation (under the hero)

   Static by default, so anchor links work with JS off. frontend.js pins it
   under whatever the theme keeps at the top (header, admin bar) by adding
   .is-fixed plus top/left/width, and holds its place with the wrapper.
   ══════════════════════════════════════════════════════════════════════ */

.yd-subnav-wrap {
	position: relative;
}

.yd-subnav {
	position: relative;
	z-index: 45; /* above page content, below theme headers (Elementor: 99) and the modal */
	background: var(--yd-bg);
	border-top: 1px solid var(--yd-divider);
	border-bottom: 1px solid var(--yd-divider);
}

.yd-subnav.is-fixed {
	position: fixed;
	box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.28);
}

.yd-subnav__inner {
	max-width: var(--yd-max);
	margin: 0 auto;
	padding: 0 var(--yd-gutter);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.yd-subnav__inner::-webkit-scrollbar {
	display: none;
}

.yumat-digital .yd-subnav__list {
	--yd-subnav-pad: 14px;
	display: flex;
	flex-wrap: nowrap;
	gap: 4px;
	width: max-content;
	min-width: calc(100% + 2 * var(--yd-subnav-pad));
	/* Line the first label up with the content edge, not its hit area. */
	margin: 0 calc(-1 * var(--yd-subnav-pad));
}

.yd-subnav__item {
	flex: none;
}

.yumat-digital .yd-subnav__link {
	position: relative;
	display: block;
	padding: 15px var(--yd-subnav-pad) 14px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	text-decoration: none;
	color: var(--yd-neutral-700);
	transition: color 0.15s ease;
}

.yumat-digital .yd-subnav__link::after {
	content: "";
	position: absolute;
	left: var(--yd-subnav-pad);
	right: var(--yd-subnav-pad);
	bottom: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: transparent;
	transition: background-color 0.15s ease;
}

.yumat-digital .yd-subnav__link:hover {
	color: var(--yd-text);
}

.yumat-digital .yd-subnav__link.is-active {
	color: var(--yd-accent-700);
}

.yumat-digital .yd-subnav__link.is-active::after {
	background: var(--yd-accent);
}

.yumat-digital .yd-subnav__link:focus-visible {
	outline-offset: -3px;
}

@media (max-width: 760px) {
	.yumat-digital .yd-subnav__list {
		--yd-subnav-pad: 12px;
	}

	.yumat-digital .yd-subnav__link {
		padding-top: 13px;
		padding-bottom: 12px;
		font-size: 14px;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   Theme mode — .yumat-digital--theme

   The page sits inside the site's own header and footer, so it takes the
   theme's look: its font, black headings, green pill CTAs, navy accents,
   white cards with soft corners and a content width that lines up with the
   theme header. Tokens come from "โหมดแสดงผล" (inline CSS); the values
   below are yuumat.com's, as a fallback. Every rule uses the two-class
   selector so it outranks the standalone palette without !important.
   ══════════════════════════════════════════════════════════════════════ */

.yumat-digital.yumat-digital--theme {
	--yd-theme-font: "Noto Sans Thai", sans-serif;
	--yd-theme-cta: #29c01b;
	--yd-theme-accent: #3c4a5e;
	--yd-theme-heading: #000000;
	--yd-theme-text: #222222;
	--yd-theme-band: #f1f8ff;
	--yd-theme-border: #e3e8ef;
	--yd-theme-card-radius: 10px;
	--yd-theme-btn-radius: 30px;
	--yd-theme-max: 1120px;

	/* — remap the standalone palette onto the theme — */
	--yd-bg: #ffffff;
	--yd-paper: #ffffff;
	--yd-surface: #f7f8f9;
	--yd-text: var(--yd-theme-text);
	--yd-accent: var(--yd-theme-accent);
	--yd-divider: var(--yd-theme-border);

	--yd-accent-100: color-mix(in srgb, var(--yd-theme-accent) 9%, #ffffff);
	--yd-accent-200: color-mix(in srgb, var(--yd-theme-accent) 22%, #ffffff);
	--yd-accent-300: color-mix(in srgb, var(--yd-theme-accent) 40%, #ffffff);
	--yd-accent-400: color-mix(in srgb, var(--yd-theme-accent) 62%, #ffffff);
	--yd-accent-500: var(--yd-theme-accent);
	--yd-accent-600: color-mix(in srgb, var(--yd-theme-accent) 88%, #000000);
	--yd-accent-700: var(--yd-theme-accent);
	--yd-accent-800: color-mix(in srgb, var(--yd-theme-accent) 78%, #000000);
	--yd-accent-900: color-mix(in srgb, var(--yd-theme-accent) 60%, #000000);

	--yd-neutral-100: #f7f8f9;
	--yd-neutral-200: #eef1f4;
	--yd-neutral-300: #dde3ea;
	--yd-neutral-400: #c2cad4;
	--yd-neutral-500: #9aa4b1;
	--yd-neutral-600: #6b7685;
	--yd-neutral-700: #4a5563;
	--yd-neutral-800: #333b46;
	--yd-neutral-900: #1a2533;

	--yd-font: var(--yd-theme-font);
	--yd-font-heading: var(--yd-theme-font);

	--yd-gutter: 20px;
	/* Content edge = theme container edge: the max includes our side gutters. */
	--yd-max: calc(var(--yd-theme-max) + 2 * var(--yd-gutter));
	--yd-radius-sm: 4px;
	--yd-radius-md: 8px;
	--yd-radius-lg: var(--yd-theme-card-radius);
	--yd-shadow-sm: 0 1px 3px rgba(26, 37, 51, 0.08);
	--yd-shadow-md: 0 8px 24px rgba(26, 37, 51, 0.1);
	--yd-shadow-lg: 0 18px 48px rgba(26, 37, 51, 0.18);

	--yd-section-space: clamp(52px, 7vw, 88px);
	--yd-h2-size: clamp(26px, 1.6vw + 18px, 35px);

	font-size: 16px;
	line-height: 1.65;
	color: var(--yd-text);
	background: var(--yd-bg);
}

/* Theme mode never prints a light, rule-separated "classical" page: drop the
   hairlines that open each section and space sections out instead. */
.yumat-digital.yumat-digital--theme .yd-section > .yd-hr {
	display: none;
}

.yumat-digital.yumat-digital--theme a {
	color: var(--yd-theme-accent);
}

.yumat-digital.yumat-digital--theme a:hover {
	color: var(--yd-accent-900);
}

.yumat-digital.yumat-digital--theme :focus-visible {
	outline-color: var(--yd-theme-accent);
}

/* — headings — */
.yumat-digital.yumat-digital--theme .yd-h2,
.yumat-digital.yumat-digital--theme .yd-gallery__title,
.yumat-digital.yumat-digital--theme .yd-process__title,
.yumat-digital.yumat-digital--theme .yd-quote__title,
.yumat-digital.yumat-digital--theme .yd-pricing__title,
.yumat-digital.yumat-digital--theme .yd-cross__title,
.yumat-digital.yumat-digital--theme .yd-help__title {
	font-weight: 600;
	font-size: var(--yd-h2-size);
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--yd-theme-heading);
}

.yumat-digital.yumat-digital--theme .yd-h3 {
	font-weight: 600;
	font-size: clamp(22px, 1vw + 16px, 28px);
	letter-spacing: 0;
	color: var(--yd-theme-heading);
}

.yumat-digital.yumat-digital--theme .yd-hero__title,
.yumat-digital.yumat-digital--theme .yd-pagehero__title {
	font-weight: 600;
	font-size: clamp(30px, 3vw + 16px, 50px);
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--yd-theme-heading);
}

.yumat-digital.yumat-digital--theme .yd-service__name,
.yumat-digital.yumat-digital--theme .yd-tile__name,
.yumat-digital.yumat-digital--theme .yd-pkg__name,
.yumat-digital.yumat-digital--theme .yd-way__title,
.yumat-digital.yumat-digital--theme .yd-cross__name,
.yumat-digital.yumat-digital--theme .yd-modal__name,
.yumat-digital.yumat-digital--theme .yd-sent__title {
	font-weight: 600;
	font-size: clamp(20px, 0.6vw + 16px, 25px);
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--yd-theme-heading);
}

.yumat-digital.yumat-digital--theme .yd-system__name,
.yumat-digital.yumat-digital--theme .yd-step__title,
.yumat-digital.yumat-digital--theme .yd-work__name,
.yumat-digital.yumat-digital--theme .yd-row__name {
	font-weight: 600;
	letter-spacing: 0;
	color: var(--yd-theme-heading);
}

.yumat-digital.yumat-digital--theme .yd-system__name,
.yumat-digital.yumat-digital--theme .yd-step__title {
	font-size: 20px;
}

.yumat-digital.yumat-digital--theme .yd-work__name {
	font-size: 19px;
}

.yumat-digital.yumat-digital--theme .yd-row__name {
	font-size: 16px;
}

/* — body copy — */
.yumat-digital.yumat-digital--theme .yd-hero__desc,
.yumat-digital.yumat-digital--theme .yd-pagehero__desc,
.yumat-digital.yumat-digital--theme .yd-quote__desc,
.yumat-digital.yumat-digital--theme .yd-pricing__lead {
	font-size: clamp(16px, 0.3vw + 15px, 18px);
	color: var(--yd-neutral-700);
}

.yumat-digital.yumat-digital--theme .yd-section__lead,
.yumat-digital.yumat-digital--theme .yd-gallery__lead,
.yumat-digital.yumat-digital--theme .yd-service__desc,
.yumat-digital.yumat-digital--theme .yd-system__desc,
.yumat-digital.yumat-digital--theme .yd-step__desc,
.yumat-digital.yumat-digital--theme .yd-pkg__desc,
.yumat-digital.yumat-digital--theme .yd-way__desc,
.yumat-digital.yumat-digital--theme .yd-cross__desc,
.yumat-digital.yumat-digital--theme .yd-help__text,
.yumat-digital.yumat-digital--theme .yd-modal__desc {
	font-size: 15px;
	color: var(--yd-neutral-700);
}

.yumat-digital.yumat-digital--theme .yd-list,
.yumat-digital.yumat-digital--theme .yd-row__desc,
.yumat-digital.yumat-digital--theme .yd-contact,
.yumat-digital.yumat-digital--theme .yd-pkg__features,
.yumat-digital.yumat-digital--theme .yd-way__features {
	font-size: 14.5px;
}

.yumat-digital.yumat-digital--theme .yd-kicker,
.yumat-digital.yumat-digital--theme .yd-hero__kicker {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--yd-theme-cta);
}

.yumat-digital.yumat-digital--theme .yd-eyebrow {
	font-size: 12px;
	letter-spacing: 0.08em;
}

/* Prices read in the accent, numbers in the heading weight. */
.yumat-digital.yumat-digital--theme .yd-pkg__price,
.yumat-digital.yumat-digital--theme .yd-tile__price,
.yumat-digital.yumat-digital--theme .yd-modal__price {
	font-weight: 700;
	color: var(--yd-theme-accent);
}

.yumat-digital.yumat-digital--theme .yd-service__price,
.yumat-digital.yumat-digital--theme .yd-system__price,
.yumat-digital.yumat-digital--theme .yd-row__price {
	font-size: 15px;
	font-weight: 600;
	color: var(--yd-theme-accent);
}

.yumat-digital.yumat-digital--theme .yd-service__no,
.yumat-digital.yumat-digital--theme .yd-step__no {
	font-weight: 700;
	color: var(--yd-theme-cta);
}

/* — buttons: pill, theme green for the action, navy for the rest — */
.yumat-digital.yumat-digital--theme .yd-btn {
	font-family: var(--yd-font);
	font-weight: 500;
	font-size: 15px;
	padding: 11px 24px;
	border-radius: var(--yd-theme-btn-radius);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.yumat-digital.yumat-digital--theme .yd-btn--solid,
.yumat-digital.yumat-digital--theme .yd-hero__actions .yd-btn--primary,
.yumat-digital.yumat-digital--theme .yd-quote .yd-btn--primary[data-yd-submit] {
	color: #ffffff;
	background: var(--yd-theme-cta);
	border-color: var(--yd-theme-cta);
}

.yumat-digital.yumat-digital--theme .yd-btn--solid:hover,
.yumat-digital.yumat-digital--theme .yd-hero__actions .yd-btn--primary:hover,
.yumat-digital.yumat-digital--theme .yd-quote .yd-btn--primary[data-yd-submit]:hover {
	color: #ffffff;
	background: color-mix(in srgb, var(--yd-theme-cta) 88%, #000000);
	border-color: color-mix(in srgb, var(--yd-theme-cta) 88%, #000000);
	box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--yd-theme-cta) 70%, transparent);
}

.yumat-digital.yumat-digital--theme .yd-btn--primary {
	color: #ffffff;
	background: var(--yd-theme-accent);
	border-color: var(--yd-theme-accent);
}

.yumat-digital.yumat-digital--theme .yd-btn--primary:hover,
.yumat-digital.yumat-digital--theme .yd-btn--primary:active {
	color: #ffffff;
	background: color-mix(in srgb, var(--yd-theme-accent) 82%, #000000);
	border-color: color-mix(in srgb, var(--yd-theme-accent) 82%, #000000);
}

.yumat-digital.yumat-digital--theme .yd-btn--ghost {
	color: var(--yd-theme-heading);
	background: transparent;
	border-color: var(--yd-theme-heading);
	padding-inline: 22px;
}

.yumat-digital.yumat-digital--theme .yd-btn--ghost:hover,
.yumat-digital.yumat-digital--theme .yd-btn--ghost:active {
	color: #ffffff;
	background: var(--yd-theme-heading);
}

.yumat-digital.yumat-digital--theme .yd-btn--icon {
	padding: 0;
	border-radius: 50%;
	border-color: var(--yd-divider);
}

.yumat-digital.yumat-digital--theme .yd-btn:disabled {
	box-shadow: none;
}

/* Big moments get the theme's large pill. */
.yumat-digital.yumat-digital--theme .yd-hero__actions .yd-btn,
.yumat-digital.yumat-digital--theme .yd-pagehero__actions .yd-btn,
.yumat-digital.yumat-digital--theme .yd-help__cta {
	padding: 15px 36px;
	font-size: 17px;
}

/* Small inline buttons on cards stay compact. */
.yumat-digital.yumat-digital--theme .yd-tile__demo {
	padding: 6px 14px;
	font-size: 13px;
	color: var(--yd-theme-heading);
	background: #ffffff;
	border-color: transparent;
	box-shadow: var(--yd-shadow-sm);
}

.yumat-digital.yumat-digital--theme .yd-tile__demo:hover {
	color: #ffffff;
	background: var(--yd-theme-heading);
}

.yumat-digital.yumat-digital--theme .yd-tile__foot .yd-btn,
.yumat-digital.yumat-digital--theme .yd-service__foot .yd-btn {
	padding: 8px 18px;
	font-size: 14px !important; /* beats the inline 13px from the prototype markup */
}

/* — form controls — */
.yumat-digital.yumat-digital--theme .yd-input {
	min-height: 46px;
	padding: 10px 14px;
	font-size: 16px; /* 16px keeps iOS from zooming on focus */
	background: #ffffff;
	border-color: var(--yd-neutral-300);
	border-radius: var(--yd-radius-md);
}

.yumat-digital.yumat-digital--theme .yd-input:focus-visible {
	border-color: var(--yd-theme-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--yd-theme-accent) 18%, transparent);
	outline: none;
}

.yumat-digital.yumat-digital--theme .yd-field > label,
.yumat-digital.yumat-digital--theme .yd-form__legend {
	font-size: 14px;
	font-weight: 500;
	color: var(--yd-theme-heading);
}

.yumat-digital.yumat-digital--theme .yd-seg {
	border-radius: var(--yd-radius-md);
	border-color: var(--yd-neutral-300);
	background: #ffffff;
}

.yumat-digital.yumat-digital--theme .yd-seg__opt {
	padding: 10px 14px;
	font-size: 14px;
}

.yumat-digital.yumat-digital--theme .yd-seg__opt.is-active,
.yumat-digital.yumat-digital--theme .yd-cat.is-active {
	color: #ffffff;
	background: var(--yd-theme-accent);
}

.yumat-digital.yumat-digital--theme .yd-cat {
	border-radius: var(--yd-theme-btn-radius);
}

.yumat-digital.yumat-digital--theme .yd-tag {
	border-radius: 999px;
	font-size: 12px;
}

/* — cards: white, soft corners, a light border instead of ruled grids — */
.yumat-digital.yumat-digital--theme .yd-grid-3,
.yumat-digital.yumat-digital--theme .yd-grid-4,
.yumat-digital.yumat-digital--theme .yd-stats {
	gap: 20px;
	background: transparent;
	border: 0;
}

.yumat-digital.yumat-digital--theme .yd-rows {
	gap: 12px;
	background: transparent;
	border: 0;
}

.yumat-digital.yumat-digital--theme .yd-service,
.yumat-digital.yumat-digital--theme .yd-system,
.yumat-digital.yumat-digital--theme .yd-step,
.yumat-digital.yumat-digital--theme .yd-stat,
.yumat-digital.yumat-digital--theme .yd-row,
.yumat-digital.yumat-digital--theme .yd-card,
.yumat-digital.yumat-digital--theme .yd-quote__card,
.yumat-digital.yumat-digital--theme .yd-cross__card {
	background: #ffffff;
	border: 1px solid var(--yd-divider);
	border-radius: var(--yd-radius-lg);
}

.yumat-digital.yumat-digital--theme .yd-service,
.yumat-digital.yumat-digital--theme .yd-system,
.yumat-digital.yumat-digital--theme .yd-step {
	padding: 30px 24px;
}

.yumat-digital.yumat-digital--theme .yd-tile,
.yumat-digital.yumat-digital--theme .yd-service,
.yumat-digital.yumat-digital--theme .yd-system,
.yumat-digital.yumat-digital--theme .yd-pkg,
.yumat-digital.yumat-digital--theme .yd-cross__card {
	transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.yumat-digital.yumat-digital--theme .yd-tile:hover,
.yumat-digital.yumat-digital--theme .yd-service:hover,
.yumat-digital.yumat-digital--theme .yd-system:hover,
.yumat-digital.yumat-digital--theme .yd-cross__card:hover {
	box-shadow: var(--yd-shadow-md);
}

.yumat-digital.yumat-digital--theme .yd-tile {
	overflow: hidden;
}

.yumat-digital.yumat-digital--theme .yd-tile.is-selected {
	border-color: var(--yd-theme-cta);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--yd-theme-cta) 40%, transparent);
}

.yumat-digital.yumat-digital--theme .yd-fav {
	background: #ffffff;
	box-shadow: var(--yd-shadow-sm);
}

.yumat-digital.yumat-digital--theme .yd-fav.is-active {
	color: #e0245e;
}

.yumat-digital.yumat-digital--theme .yd-plate {
	filter: none;
	border-color: #ffffff;
	outline-color: var(--yd-divider);
	border-radius: var(--yd-radius-lg);
}

.yumat-digital.yumat-digital--theme .yd-hero__media,
.yumat-digital.yumat-digital--theme .yd-service__media,
.yumat-digital.yumat-digital--theme .yd-menu__frame,
.yumat-digital.yumat-digital--theme .yd-work__thumb {
	border-radius: var(--yd-radius-lg);
	overflow: hidden;
}

/* Packages */
.yumat-digital.yumat-digital--theme .yd-pkg {
	background: #ffffff;
	border-color: var(--yd-divider);
}

.yumat-digital.yumat-digital--theme .yd-pkg.is-featured {
	border-color: var(--yd-theme-cta);
	box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--yd-theme-cta) 45%, transparent);
}

.yumat-digital.yumat-digital--theme .yd-pkg__badge.is-strong {
	background: var(--yd-theme-cta);
	border-color: var(--yd-theme-cta);
}

.yumat-digital.yumat-digital--theme .yd-pkg.is-featured .yd-pkg__tech-value {
	background: color-mix(in srgb, var(--yd-theme-cta) 12%, #ffffff);
	color: color-mix(in srgb, var(--yd-theme-cta) 55%, #000000);
}

.yumat-digital.yumat-digital--theme .yd-custom__card {
	background: var(--yd-neutral-900);
}

.yumat-digital.yumat-digital--theme .yd-custom__card .yd-btn--primary {
	color: var(--yd-neutral-900);
	background: #ffffff;
	border-color: #ffffff;
}

.yumat-digital.yumat-digital--theme .yd-custom__price {
	color: #ffffff;
	font-weight: 600;
}

.yumat-digital.yumat-digital--theme .yd-help {
	background: #ffffff;
	border-color: var(--yd-divider);
}

/* — section rhythm & bands — */
.yumat-digital.yumat-digital--theme .yd-services,
.yumat-digital.yumat-digital--theme .yd-gallery,
.yumat-digital.yumat-digital--theme .yd-line,
.yumat-digital.yumat-digital--theme .yd-systems,
.yumat-digital.yumat-digital--theme .yd-work,
.yumat-digital.yumat-digital--theme .yd-process,
.yumat-digital.yumat-digital--theme .yd-cross,
.yumat-digital.yumat-digital--theme .yd-section__inner,
.yumat-digital.yumat-digital--theme .yd-quote__inner {
	padding-top: var(--yd-section-space);
	padding-bottom: var(--yd-section-space);
}

/* Alternate like the theme's home page: the process strip and the quote
   block sit on the light band, full width; everything else stays white.
   On every preset that keeps two bands from touching. */
.yumat-digital.yumat-digital--theme .yd-process {
	background: var(--yd-theme-band);
	box-shadow: 0 0 0 100vmax var(--yd-theme-band);
	clip-path: inset(0 -100vmax);
}

.yumat-digital.yumat-digital--theme .yd-section--paper {
	background: #ffffff;
	border-color: transparent;
}

.yumat-digital.yumat-digital--theme .yd-quote {
	background: var(--yd-theme-band);
	border-color: transparent;
}

.yumat-digital.yumat-digital--theme .yd-menu__frame {
	background: #ffffff;
}

.yumat-digital.yumat-digital--theme .yd-pagehero {
	padding-top: clamp(40px, 5vw, 72px);
	padding-bottom: clamp(36px, 4vw, 56px);
}

.yumat-digital.yumat-digital--theme .yd-hero {
	padding-top: clamp(48px, 6vw, 88px);
	padding-bottom: clamp(44px, 5vw, 72px);
}

.yumat-digital.yumat-digital--theme .yd-crumbs a {
	color: var(--yd-neutral-700);
	border-bottom-color: var(--yd-neutral-300);
}

/* — sub-navigation in the theme's type — */
.yumat-digital.yumat-digital--theme .yd-subnav {
	background: #ffffff;
}

.yumat-digital.yumat-digital--theme .yd-subnav__link {
	font-size: 16px;
	color: var(--yd-neutral-700);
}

.yumat-digital.yumat-digital--theme .yd-subnav__link:hover {
	color: var(--yd-theme-heading);
}

.yumat-digital.yumat-digital--theme .yd-subnav__link.is-active {
	color: var(--yd-theme-heading);
	font-weight: 600;
}

.yumat-digital.yumat-digital--theme .yd-subnav__link.is-active::after {
	background: var(--yd-theme-cta);
}

/* — modal keeps the theme look too — */
.yumat-digital.yumat-digital--theme .yd-modal__dialog {
	background: #ffffff;
}

.yumat-digital.yumat-digital--theme .yd-modal__stage {
	background: var(--yd-neutral-100);
}

.yumat-digital.yumat-digital--theme .yd-modal__scope {
	background: var(--yd-theme-band);
}

@media (max-width: 760px) {
	.yumat-digital.yumat-digital--theme .yd-subnav__link {
		font-size: 15px;
	}

	.yumat-digital.yumat-digital--theme .yd-hero__actions .yd-btn,
	.yumat-digital.yumat-digital--theme .yd-pagehero__actions .yd-btn,
	.yumat-digital.yumat-digital--theme .yd-help__cta {
		padding: 13px 28px;
		font-size: 16px;
	}

	.yumat-digital.yumat-digital--theme .yd-service,
	.yumat-digital.yumat-digital--theme .yd-system,
	.yumat-digital.yumat-digital--theme .yd-step {
		padding: 24px 20px;
	}
}

@media (max-width: 760px) {
	.yumat-digital.yumat-digital--theme .yd-modal__dialog {
		border-radius: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.yumat-digital .yd-subnav__link,
	.yumat-digital .yd-subnav__link::after,
	.yumat-digital.yumat-digital--theme .yd-tile,
	.yumat-digital.yumat-digital--theme .yd-service,
	.yumat-digital.yumat-digital--theme .yd-system,
	.yumat-digital.yumat-digital--theme .yd-pkg,
	.yumat-digital.yumat-digital--theme .yd-cross__card {
		transition: none;
	}
}

/* 100vw counts the desktop scrollbar, which pushes a full-width page 8px past
   the viewport. frontend.js publishes the scrollbar width; take it off. */
.yumat-digital--full.yumat-digital--theme {
	width: calc(100vw - var(--yd-scrollbar, 0px));
	max-width: calc(100vw - var(--yd-scrollbar, 0px));
	margin-left: calc(50% - 50vw + var(--yd-scrollbar, 0px) / 2);
	margin-right: calc(50% - 50vw + var(--yd-scrollbar, 0px) / 2);
}