/* ==========================================================================
   UitnodigingsLink — "De Link" (DESIGN.md). Mobile first, no build step.
   1 tokens · 2 base · 3 underline + thread · 4 buttons · 5 header/menu
   6 sections · 7 hero + phone · 8 features · 9 occasions · 10 steps
   11 demos · 12 choice · 13 faq · 14 cta · 15 footer · 16 loader
   17 pages · 18 motion (scroll-driven, view transitions) · 19 reduced motion
   ========================================================================== */

/* 1 · tokens ------------------------------------------------------------- */
:root {
	--link: var(--wp--preset--color--primary, #2340ff);
	--link-dark: var(--wp--preset--color--primary-dark, #1a30c9);
	--link-soft: var(--wp--preset--color--primary-soft, #e4e9ff);
	--link-ink: var(--wp--preset--color--primary-light, #7086ff);
	--oranje: var(--wp--preset--color--accent, #ff6b1a);
	--oranje-soft: var(--wp--preset--color--accent-soft, #ffeadd);
	--oranje-ink: var(--wp--preset--color--accent-ink, #b4440a);
	--ink: var(--wp--preset--color--ink, #101632);
	--ink-2: var(--wp--preset--color--night-soft, #1b2350);
	--muted: var(--wp--preset--color--muted, #4b5275);
	--line: var(--wp--preset--color--line, #d9def2);
	--cloud: var(--wp--preset--color--surface, #f4f6ff);
	--white: #fff;
	--display: var(--wp--preset--font-family--display, "Bricolage Grotesque", system-ui, sans-serif);
	--r-s: var(--wp--custom--radius--small, 8px);
	--r-m: var(--wp--custom--radius--medium, 14px);
	--r-l: var(--wp--custom--radius--large, 22px);
	--r-xl: var(--wp--custom--radius--xlarge, 32px);
	--shadow: var(--wp--preset--shadow--soft);
	--shadow-lift: var(--wp--preset--shadow--lift);
	--ease-out: cubic-bezier(.2, .7, .2, 1);
	--ease-draw: cubic-bezier(.7, 0, .2, 1);
	--header-h: 64px;
	--de-header-height: var(--header-h); /* core sticky offsets */
	--wide: 1240px;
	--gutter: 16px;
	--u-thick: .12em;
}
@media (min-width: 1024px) { :root { --header-h: 76px; --gutter: 24px; } }

/* 2 · base --------------------------------------------------------------- */
html { scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { overflow-x: clip; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
:where(.ul) p { max-width: 72ch; }
:where(.ul) img { max-width: 100%; height: auto; }
::selection { background: var(--link); color: var(--white); }
:focus-visible { outline: 3px solid var(--oranje); outline-offset: 3px; border-radius: 4px; }
.ul-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ul-skip { position: absolute; left: 12px; top: 10px; z-index: 100; background: var(--ink); color: var(--white); padding: 10px 14px; border-radius: var(--r-s); font-weight: 700; text-decoration: none; transform: translateY(-200%); opacity: 0; transition: transform .2s, opacity .2s; }
.ul-skip:focus { transform: none; opacity: 1; }
.ul-main { min-height: 60vh; }
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* 3 · underline (the brand device) + thread ------------------------------ */
.ul-u {
	background-image: linear-gradient(var(--link), var(--link));
	background-repeat: no-repeat;
	background-position: 0 94%;
	background-size: 100% var(--u-thick);
	padding-bottom: .05em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	border-radius: 2px;
}
.is-dark .ul-u, .ul-footer .ul-u { background-image: linear-gradient(var(--link-ink), var(--link-ink)); }

/* The thread: one Link-blue line that runs from section to section and ends under the last button. */
.ul-section { position: relative; }
.ul-section + .ul-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--gutter);
	width: 3px;
	height: clamp(44px, 7vw, 92px);
	border-radius: 0 0 3px 3px;
	background: var(--link);
	transform-origin: top;
}
.ul-section.is-dark::before, .is-dark + .ul-section::before { background: var(--link-ink); }
.is-dark + .ul-section::before { background: var(--link); }

/* 4 · buttons ------------------------------------------------------------ */
.wp-element-button, .ul-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, color .2s, transform .2s var(--ease-out), box-shadow .2s;
}
.ul-btn {
	background: var(--link);
	color: var(--white);
	font: 700 1.0625rem/1.2 var(--display);
	letter-spacing: -.01em;
	padding: .9rem 1.4rem;
	border-radius: var(--r-m);
	border: 0;
}
.ul-btn--sm { padding: .7rem 1.05rem; font-size: 1rem; }
.ul-btn:hover { background: var(--link-dark); color: var(--white); }
.wp-element-button:not(.is-style-link .wp-element-button), .ul-btn { box-shadow: 0 1px 0 rgb(255 255 255 / 20%) inset, 0 6px 18px -8px rgb(35 64 255 / 70%); }
.wp-element-button:not(.is-style-link .wp-element-button):hover, .ul-btn:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgb(255 255 255 / 20%) inset, 0 12px 26px -10px rgb(35 64 255 / 80%); }
.wp-element-button:active, .ul-btn:active { transform: translateY(0) scale(.98); }
/* the label gets an underline on hover: every button is a link */
.wp-block-button:not(.is-style-link) .wp-element-button::after, .ul-btn::after {
	content: "";
	position: absolute;
	left: 1.4rem;
	right: 1.4rem;
	bottom: .62rem;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	opacity: .9;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--ease-draw);
}
.ul-btn--sm::after { left: 1.05rem; right: 1.05rem; bottom: .5rem; }
.wp-block-button:not(.is-style-link) .wp-element-button:hover::after, .ul-btn:hover::after { transform: scaleX(1); }
.is-style-link .wp-element-button {
	background: none;
	color: var(--ink);
	padding-inline: .15rem;
	box-shadow: none;
	text-decoration: underline;
	text-decoration-color: var(--link);
	text-decoration-thickness: 3px;
	text-underline-offset: 7px;
	transition: text-decoration-thickness .2s, text-underline-offset .2s, color .2s;
}
.is-style-link .wp-element-button:hover { background: none; color: var(--link); text-decoration-thickness: 5px; text-underline-offset: 5px; }
.ul-arrow { width: 1em; height: 1em; flex: none; transition: transform .25s var(--ease-out); }
a:hover > .ul-arrow, a:focus-visible > .ul-arrow { transform: translateX(3px); }
.ul-textlink { font: 700 1.0625rem/1.3 var(--display); color: var(--link); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.ul-textlink::after { content: " →"; display: inline-block; transition: transform .25s var(--ease-out); }
.ul-textlink:hover::after { transform: translateX(3px); }

.ul-badge { display: inline-block; margin: 0; padding: .28rem .65rem; border-radius: 999px; background: var(--oranje-soft); color: var(--oranje-ink); font: 700 .78rem/1.2 var(--display); letter-spacing: .01em; vertical-align: middle; white-space: nowrap; }
.ul-badge--soon { background: var(--white); color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--line); }
.ul-badge--made { background: var(--link); color: var(--white); }

/* 5 · header + menu ------------------------------------------------------ */
.ul-site-header { position: sticky; top: 0; z-index: 60; }
/* blur lives on a pseudo-element: backdrop-filter on .ul-header itself would trap the fixed phone menu */
.ul-header { position: relative; isolation: isolate; box-shadow: 0 1px 0 transparent; transition: box-shadow .25s; }
.ul-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--cloud) 84%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); }
.ul-header:has(.ul-menu.is-open)::before { background: var(--cloud); }
.ul-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.ul-header__bar { box-sizing: border-box; max-width: var(--wide); height: var(--header-h); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 12px; }
.ul-header__logo { display: inline-flex; flex: none; margin-right: auto; padding: 8px 0; }
.ul-logo { display: inline-flex; }
.ul-logo svg { display: block; height: 23px; width: auto; }
@media (min-width: 1024px) { .ul-logo svg { height: 27px; } }
.ul-header__logo .ul-logo__line { transform-box: fill-box; transform-origin: left center; transition: transform .45s var(--ease-draw); }
.ul-header__logo:hover .ul-logo__line { transform: scaleX(1.06); }
.ul-nav { display: none; }
.ul-nav__link { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 13px; border: 0; background: none; color: var(--ink); font: 600 1rem/1 var(--display); letter-spacing: -.01em; text-decoration: none; cursor: pointer; border-radius: 10px; }
.ul-nav__link::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 3px; border-radius: 2px; background: var(--link); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-draw); }
.ul-nav__link:hover::after, .ul-nav__link[aria-expanded="true"]::after, .ul-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.ul-nav__link:hover { color: var(--ink); }
.ul-nav__trigger::after { right: 30px; }
.ul-chevron { width: 12px; height: 12px; transition: transform .25s var(--ease-out); }
[aria-expanded="true"] > .ul-chevron { transform: rotate(180deg); }
.ul-header__actions { display: flex; align-items: center; gap: 6px; }
.ul-header__mine { display: none; padding: 10px 12px; color: var(--ink); font: 600 .95rem/1 var(--display); text-decoration: none; }
.ul-header__mine:hover { color: var(--link); }
.ul-header__actions .ul-btn { display: none; }
.ul-burger { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-right: -8px; border: 0; border-radius: 12px; background: none; color: var(--ink); cursor: pointer; }
.ul-burger:hover { background: var(--link-soft); }
.ul-burger__lines { position: relative; width: 22px; height: 16px; }
.ul-burger__lines i { position: absolute; left: 0; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease-out), opacity .2s, width .3s var(--ease-out), background-color .3s; }
.ul-burger__lines i:nth-child(1) { top: 0; width: 22px; }
.ul-burger__lines i:nth-child(2) { top: 6.75px; width: 15px; }
.ul-burger__lines i:nth-child(3) { top: 13.5px; width: 22px; background: var(--link); height: 3px; }
.ul-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6.75px) rotate(45deg); }
.ul-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; width: 0; }
.ul-burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6.75px) rotate(-45deg); background: currentColor; height: 2.5px; }
@media (min-width: 640px) { .ul-header__actions .ul-btn { display: inline-flex; } }
@media (min-width: 1024px) {
	.ul-nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
	.ul-header__logo { margin-right: 18px; }
	.ul-header__mine { display: inline-block; }
	.ul-burger { display: none; }
}

.ul-menu { position: fixed; top: var(--header-h); left: 0; right: 0; height: calc(100vh - var(--header-h)); z-index: 59; overflow-y: auto; overscroll-behavior: contain; background: var(--cloud); opacity: 0; transform: translateY(-8px); transition: opacity .22s, transform .3s var(--ease-out); }
.ul-menu.is-open { opacity: 1; transform: none; }
.ul-menu[hidden] { display: none; }
.ul-menu__inner { box-sizing: border-box; max-width: var(--wide); margin: 0 auto; padding: 16px var(--gutter) 120px; }
.ul-menu__groups { display: grid; gap: 22px; }
.ul-menu__label { margin: 0 0 6px; padding: 0 12px; color: var(--muted); font: 700 .8rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.ul-menu ul { list-style: none; margin: 0; padding: 0; }
.ul-menu__item a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; transition: background-color .15s; }
.ul-menu__item a:hover, .ul-menu__item a:focus-visible { background: var(--link-soft); }
.ul-menu__name { display: flex; align-items: center; gap: 8px; font: 650 1.0625rem/1.25 var(--display); letter-spacing: -.01em; }
.ul-menu__item a:hover .ul-menu__name { color: var(--link); }
.ul-menu__line { color: var(--muted); font-size: .875rem; line-height: 1.35; }
.ul-menu__item--soon a { opacity: .62; }
.ul-menu__more { display: grid; gap: 2px; margin-top: 18px !important; padding-top: 14px !important; border-top: 1px solid var(--line) !important; }
.ul-menu__more a { display: block; padding: 12px; color: var(--ink); font: 700 1.25rem/1.2 var(--display); text-decoration: none; border-radius: 12px; }
.ul-menu__more a:hover { background: var(--link-soft); }
.ul-menu__cta { width: 100%; justify-content: center; margin-top: 18px; box-sizing: border-box; }
@media (min-width: 1024px) {
	.ul-menu { position: absolute; top: 100%; left: 0; right: 0; height: auto; overflow: visible; background: var(--white); box-shadow: 0 1px 0 var(--line), 0 30px 60px -20px rgb(16 22 50 / 22%); border-radius: 0 0 var(--r-xl) var(--r-xl); }
	.ul-menu__inner { padding: 28px var(--gutter) 30px; }
	.ul-menu__groups { grid-template-columns: 1.15fr 1fr .9fr; gap: 28px; }
	.ul-menu__more, .ul-menu__cta { display: none; }
}

.ul-progress { display: none; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--link); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* 6 · sections ----------------------------------------------------------- */
.ul-section { box-sizing: border-box; max-width: var(--wide); margin: 0 auto; padding: clamp(80px, 11vw, 140px) var(--gutter); }
.ul-section.is-dark { color: rgb(255 255 255 / 80%); background: var(--ink); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.ul-section.is-dark :is(h2, h3) { color: var(--white); }
.ul-section__head { display: grid; gap: 14px; margin-bottom: clamp(32px, 5vw, 56px); max-width: 860px; }
.ul-section__head h2 { margin: 0; }
.ul-section__head p { margin: 0; color: var(--muted); font-size: clamp(1.0625rem, 1.6vw, 1.25rem); max-width: 40em; }
.is-dark .ul-section__head p { color: rgb(255 255 255 / 72%); }
.ul-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); font: 650 .95rem/1.2 var(--display); letter-spacing: -.005em; }
.ul-eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--oranje); box-shadow: 0 0 0 4px var(--oranje-soft); }

/* 7 · hero + phone ------------------------------------------------------- */
.ul-hero { display: grid; gap: 48px; padding-top: clamp(28px, 6vw, 64px); padding-bottom: clamp(64px, 9vw, 112px); }
.ul-hero__copy { display: grid; gap: 22px; align-content: center; }
.ul-hero__copy > * { margin: 0; }
.ul-hero__title { font-size: clamp(2.55rem, 10.8vw, 5.9rem); line-height: .98; letter-spacing: -.04em; }
.ul-hero__lead { color: var(--muted); font-size: clamp(1.0625rem, 1.8vw, 1.3rem); line-height: 1.55; max-width: 31em; }
.ul-hero__actions { gap: 10px 22px; }
.ul-hero__facts { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; list-style: none; color: var(--muted); font-size: .9375rem; }
.ul-hero__facts li { display: inline-flex; align-items: center; gap: 7px; }
.ul-hero__facts li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--link) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3 7 10.6l4.6-5' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
@media (min-width: 960px) {
	.ul-hero { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: 40px; min-height: calc(100svh - var(--header-h) - 40px); box-sizing: border-box; }
}

.ul-stage { --pw: min(78vw, 340px); position: relative; isolation: isolate; display: grid; justify-items: center; gap: 20px; padding-bottom: 6px; }
.ul-stage__glow { position: absolute; inset: 4% -6% 16%; z-index: -1; background: radial-gradient(closest-side at 40% 40%, rgb(35 64 255 / 22%), transparent 70%), radial-gradient(closest-side at 72% 72%, rgb(255 107 26 / 16%), transparent 70%); filter: blur(10px); pointer-events: none; }
.ul-stage::after { content: ""; position: absolute; top: calc(var(--pw) * 2.05 - 4px); left: 50%; width: min(440px, 96%); height: 12px; border-radius: 6px; translate: -50% 0; background: linear-gradient(90deg, var(--link) 0 82%, var(--oranje) 82%); z-index: -1; }
.ul-phone { position: relative; width: var(--pw); aspect-ratio: 9 / 19.2; padding: 9px; box-sizing: border-box; border-radius: 50px; background: linear-gradient(145deg, #2a3157, #0b0f24 40%); box-shadow: 0 0 0 1.5px rgb(255 255 255 / 8%) inset, 0 2px 4px rgb(16 22 50 / 12%), 0 40px 80px -30px rgb(16 22 50 / 55%), 0 18px 40px -20px rgb(35 64 255 / 35%); }
.ul-phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 41px; background: #e9edfa; isolation: isolate; }
.ul-phone__screen::before { content: ""; position: absolute; top: 9px; left: 50%; z-index: 9; width: 30%; height: 24px; border-radius: 14px; translate: -50% 0; background: #05070f; }
.ul-chat { position: absolute; inset: 0; display: flex; flex-direction: column; font: 400 13.5px/1.38 system-ui, -apple-system, "Segoe UI", sans-serif; color: #0d1330; }
.ul-chat__head { display: flex; align-items: center; gap: 9px; padding: 42px 12px 9px 8px; background: rgb(255 255 255 / 92%); border-bottom: 1px solid rgb(16 22 50 / 8%); }
.ul-chat__back { width: 18px; height: 18px; color: var(--link); }
.ul-chat__back svg { width: 18px; height: 18px; }
.ul-chat__avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--link); color: var(--white); font: 800 15px/1 var(--display); }
.ul-chat__who { display: grid; min-width: 0; }
.ul-chat__who b { font-size: 14px; font-weight: 650; }
.ul-chat__who small { overflow: hidden; color: #646b8a; font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.ul-chat__log { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; margin: 0; padding: 12px 10px 10px; list-style: none; overflow: hidden; background-image: radial-gradient(rgb(35 64 255 / 7%) 1px, transparent 1.2px); background-size: 16px 16px; }
.ul-msg { position: relative; align-self: flex-start; max-width: 84%; padding: 7px 10px 8px; border-radius: 15px 15px 15px 5px; background: var(--white); box-shadow: 0 1px 1px rgb(16 22 50 / 7%); }
.ul-msg__from { display: block; margin-bottom: 1px; color: var(--oranje-ink); font-size: 12px; font-weight: 700; }
.ul-msg--link { padding: 5px 5px 8px; width: 84%; box-sizing: border-box; }
.ul-msg__url { display: block; padding: 6px 5px 0; overflow-wrap: anywhere; color: var(--link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.ul-msg__url .ul-caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--ink); animation: ul-blink 1s steps(1) infinite; }
.ul-msg--typing { display: inline-flex; gap: 4px; padding: 11px 13px; }
.ul-msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: #9aa1bd; animation: ul-typing 1s infinite; }
.ul-msg--typing i:nth-child(2) { animation-delay: .15s; }
.ul-msg--typing i:nth-child(3) { animation-delay: .3s; }
.ul-card { position: relative; display: grid; overflow: hidden; border-radius: 11px; background: var(--cloud); color: inherit; text-decoration: none; }
.ul-card__art { display: grid; place-items: center; height: 104px; background: radial-gradient(circle at 30% 20%, #fff, transparent 60%), linear-gradient(135deg, var(--link-soft), #dfe5ff 55%, var(--oranje-soft)); }
.ul-card__mark { width: 46px; height: auto; }
.ul-card__text { display: grid; gap: 1px; padding: 8px 9px; }
.ul-card__text b { font-size: 13px; line-height: 1.25; }
.ul-card__text small { color: #646b8a; font-size: 11.5px; }
.ul-chat__bar { padding: 8px 10px 18px; background: rgb(255 255 255 / 92%); }
.ul-chat__bar span { display: block; padding: 8px 14px; border-radius: 999px; background: #eef1fa; color: #8a90ab; font-size: 13px; }
.ul-tap { position: absolute; z-index: 5; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgb(35 64 255 / 28%); box-shadow: 0 0 0 2px rgb(35 64 255 / 40%); pointer-events: none; animation: ul-tap .6s var(--ease-out) forwards; }
.ul-msg.is-new { animation: ul-pop .38s var(--ease-out) both; transform-origin: 0 100%; }

.ul-unfold { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; background: var(--white); clip-path: circle(0 at var(--ux, 50%) var(--uy, 60%)); transition: clip-path .75s var(--ease-draw); }
.ul-unfold[hidden] { display: none; }
.ul-unfold.is-open { clip-path: circle(160% at var(--ux, 50%) var(--uy, 60%)); }
.ul-unfold__bar { display: flex; align-items: center; gap: 6px; padding: 40px 8px 8px; background: #f6f7fc; border-bottom: 1px solid rgb(16 22 50 / 8%); }
.ul-unfold__back { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border: 0; border-radius: 50%; background: none; color: var(--link); cursor: pointer; }
.ul-unfold__back:hover { background: var(--link-soft); }
.ul-unfold__back svg { width: 16px; height: 16px; }
.ul-unfold__url { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; padding: 7px 10px; border-radius: 10px; background: #e8ebf6; color: var(--ink); font: 600 12.5px/1.2 system-ui, sans-serif; }
.ul-unfold__url svg { width: 11px; height: 11px; flex: none; color: #5b627f; }
.ul-unfold__url span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: underline; text-decoration-color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ul-unfold__view { position: relative; flex: 1; overflow: hidden; background: var(--cloud); }
.ul-unfold__view iframe { position: absolute; top: 0; left: 0; width: 390px; height: calc(100% / var(--s, .8)); border: 0; transform: scale(var(--s, .8)); transform-origin: 0 0; background: var(--white); }
.ul-unfold:not(.is-loading) .ul-loader { display: none; }
.ul-toast { position: absolute; top: 42px; left: 8px; right: 8px; z-index: 8; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: rgb(255 255 255 / 94%); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px -10px rgb(16 22 50 / 40%); font: 400 12px/1.3 system-ui, sans-serif; color: var(--ink); transform: translateY(-160%); transition: transform .5s var(--ease-out); }
.ul-toast.is-on { transform: none; }
.ul-toast b { display: block; font-size: 12.5px; }
.ul-toast small { color: #5b627f; font-size: 12px; }
.ul-toast__icon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 9px; background: #1f9d55; color: var(--white); font-weight: 800; }

.ul-stage__tabs { position: relative; z-index: 2; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: 18px; padding: 4px; border-radius: 999px; background: var(--white); box-shadow: var(--shadow); }
.ul-stage__tabs button { position: relative; overflow: hidden; padding: 9px 14px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: 650 .9375rem/1 var(--display); letter-spacing: -.01em; cursor: pointer; transition: background-color .2s, color .2s; }
.ul-stage__tabs button:hover { background: var(--link-soft); }
.ul-stage__tabs button[aria-selected="true"] { background: var(--ink); color: var(--white); }
.ul-stage__tabs button::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--link-ink); transform: scaleX(0); transform-origin: left; }
.ul-stage.is-auto .ul-stage__tabs button[aria-selected="true"]::after { animation: ul-scene var(--scene, 13s) linear forwards; }
.ul-stage__note { margin: 0; max-width: 30em; color: var(--muted); font-size: .875rem; text-align: center; }
.ul-stage__note span { white-space: nowrap; }

.ul-float { display: none; }
@media (min-width: 960px) {
	.ul-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px; background: rgb(255 255 255 / 92%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-lift); font-size: .8125rem; line-height: 1.3; color: var(--ink); pointer-events: none; }
	.ul-float b { display: block; font: 700 .9375rem/1.2 var(--display); }
	.ul-float small { color: var(--muted); font-size: .8125rem; }
	.ul-float__icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 10px; background: #1f9d55; color: var(--white); font-weight: 800; }
	.ul-float__icon--pin { background: var(--oranje) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 14s4.5-4.2 4.5-7.6a4.5 4.5 0 0 0-9 0C3.5 9.8 8 14 8 14Z' fill='%23fff'/%3E%3Ccircle cx='8' cy='6.4' r='1.7' fill='%23ff6b1a'/%3E%3C/svg%3E") center/18px no-repeat; }
	.ul-stage { --pw: clamp(272px, calc((100svh - var(--header-h) - 190px) / 2.13), 340px); }
	.ul-float--count { top: 9%; left: -7%; display: grid; gap: 0; padding: 12px 16px; text-align: left; }
	.ul-float--rsvp { top: 40%; right: -9%; }
	.ul-float--route { bottom: 27%; left: -9%; }
	.ul-float--count b { color: var(--link); font: 800 2rem/1 var(--display); letter-spacing: -.03em; }
}

/* 8 · features ----------------------------------------------------------- */
.ul-features__body { display: grid; gap: 18px; }
.ul-addr { position: sticky; top: calc(var(--header-h) + 10px); z-index: 3; display: flex; align-items: center; gap: 0; min-width: 0; padding: 13px 16px; border-radius: 16px; background: var(--white); box-shadow: var(--shadow), 0 0 0 1px var(--line); font: 600 .9375rem/1.2 system-ui, sans-serif; white-space: nowrap; overflow: hidden; }
.ul-addr__lock { width: 12px; height: 13px; flex: none; margin-right: 9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 13'%3E%3Crect x='1' y='5.5' width='10' height='7' rx='1.6' fill='%234b5275'/%3E%3Cpath d='M3.3 5.5V4a2.7 2.7 0 0 1 5.4 0v1.5' fill='none' stroke='%234b5275' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.ul-addr__host { overflow: hidden; color: var(--muted); text-overflow: ellipsis; min-width: 0; flex-shrink: 1; }
.ul-addr__path { flex: none; color: var(--link); font-weight: 750; text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: 4px; }
.ul-addr__path::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -3px; background: var(--ink); animation: ul-blink 1s steps(1) infinite; }
.ul-features__grid { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ul-feature { padding: 22px 22px 24px; border-radius: var(--r-l); background: var(--white); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .3s, transform .3s var(--ease-out); }
.ul-feature p { margin: 0; color: var(--muted); }
.ul-feature .ul-feature__path { margin-bottom: 6px; color: var(--ink); font: 800 1.45rem/1.15 var(--display); letter-spacing: -.02em; }
.ul-feature.is-active { box-shadow: 0 0 0 2px var(--link), var(--shadow); }
.ul-feature.is-active .ul-feature__path { color: var(--link); }
@media (min-width: 720px) { .ul-features__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
	.ul-features__body { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 40px; }
	.ul-addr { top: calc(var(--header-h) + 40px); padding: 18px 22px; font-size: 1.125rem; }
}

/* 9 · occasions ---------------------------------------------------------- */
.ul-occasions__dfy { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ul-occ a { position: relative; display: grid; align-content: start; gap: 6px; height: 100%; box-sizing: border-box; min-height: 158px; padding: 24px 76px 24px 24px; border-radius: var(--r-l); background: var(--white); box-shadow: 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; transition: transform .3s var(--ease-out), box-shadow .3s; }
.ul-occ a:hover, .ul-occ a:focus-visible { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--link), var(--shadow-lift); }
.ul-occ__name { justify-self: start; font: 800 clamp(1.5rem, 2.4vw, 1.875rem)/1.1 var(--display); letter-spacing: -.03em; background: linear-gradient(var(--link), var(--link)) 0 96% / 0 .12em no-repeat; transition: background-size .4s var(--ease-draw); }
.ul-occ a:hover .ul-occ__name, .ul-occ a:focus-visible .ul-occ__name { background-size: 100% .12em; }
.ul-occ__line { color: var(--muted); font-size: .9875rem; }
.ul-occ__go { position: absolute; right: 20px; bottom: 20px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cloud); color: var(--link); transition: background-color .25s, color .25s; }
.ul-occ a:hover .ul-occ__go { background: var(--link); color: var(--white); }
.ul-occ__go .ul-arrow { width: 18px; height: 18px; }
.ul-occ a:hover .ul-arrow { transform: translateX(3px); }
.ul-occasions__row { margin-top: 36px; }
.ul-occasions__label { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--muted); font-size: .9875rem; }
.ul-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ul-chip { display: inline-block; padding: 10px 17px; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink); font: 650 .975rem/1.1 var(--display); letter-spacing: -.01em; text-decoration: none; transition: box-shadow .2s, color .2s, transform .2s var(--ease-out); }
a.ul-chip:hover { box-shadow: inset 0 0 0 2px var(--link); color: var(--link); transform: translateY(-1px); }
.ul-chip--soon { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--muted); border: 0; outline: 1.5px dashed transparent; }
@media (min-width: 640px) { .ul-occasions__dfy { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ul-occasions__dfy { grid-template-columns: repeat(3, 1fr); } }

/* 10 · steps (dark) ------------------------------------------------------ */
.ul-steps__list { display: grid; gap: 34px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ul-step { position: relative; padding-top: 26px; }
.ul-step::before, .ul-step::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 2px; background: rgb(255 255 255 / 14%); }
.ul-step::after { height: 3px; top: -.5px; background: var(--link-ink); transform-origin: left; }
.ul-step__n { display: block; margin-bottom: 10px; color: var(--link-ink); font: 700 .9375rem/1 var(--display); font-variant-numeric: tabular-nums; }
.ul-step h3 { margin: 0 0 8px; font-size: clamp(1.75rem, 3vw, 2.25rem); }
.ul-step p { margin: 0; color: rgb(255 255 255 / 74%); }
@media (min-width: 900px) { .ul-steps__list { grid-template-columns: repeat(4, 1fr); gap: 28px; } }

/* 11 · demos ------------------------------------------------------------- */
.ul-demos { display: grid; gap: 40px; }
.ul-demos__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ul-demos__link { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: baseline; padding: 18px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background-color .2s, padding .3s var(--ease-out); }
.ul-demos__n { grid-row: span 2; color: var(--muted); font: 600 .875rem/1 var(--display); font-variant-numeric: tabular-nums; }
.ul-demos__name { position: relative; justify-self: start; display: inline-flex; align-items: center; gap: 12px; font: 800 clamp(1.75rem, 4.2vw, 2.75rem)/1.05 var(--display); letter-spacing: -.035em; background: linear-gradient(var(--link), var(--link)) 0 100% / 0 .1em no-repeat; padding-bottom: .06em; transition: background-size .45s var(--ease-draw); }
.ul-demos__name::before { content: ""; width: .32em; height: .32em; flex: none; border-radius: 50%; background: var(--tone, var(--link)); transition: transform .3s var(--ease-out); }
.ul-demos__for { color: var(--muted); font-size: .9375rem; margin-top: 2px; }
.ul-demos__url { grid-column: 2; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--link); font: 600 .875rem/1.2 system-ui, sans-serif; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.ul-demos__link:hover .ul-demos__name, .ul-demos__link:focus-visible .ul-demos__name, .ul-demos__link.is-peek .ul-demos__name { background-size: 100% .1em; }
.ul-demos__link:hover .ul-demos__name::before, .ul-demos__link.is-peek .ul-demos__name::before { transform: scale(1.35); }
.ul-demos__peek { display: none; }
@media (min-width: 1024px) {
	.ul-demos { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: start; gap: 56px; }
	.ul-demos__link { grid-template-columns: 44px 1fr auto; padding: 20px 8px; }
	.ul-demos__link:hover { padding-left: 16px; }
	.ul-demos__url { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin: 0; }
	.ul-demos__peek { position: sticky; top: calc(var(--header-h) + 32px); display: grid; justify-items: center; }
	.ul-phone--peek { width: 300px; }
	.ul-phone--peek .ul-phone__screen { background: var(--cloud) url("../brand/mark-light.svg") center/64px no-repeat; }
	.ul-phone--peek iframe { position: absolute; top: 0; left: 0; width: 390px; height: calc(100% / var(--s, .72)); border: 0; transform: scale(var(--s, .72)); transform-origin: 0 0; opacity: 0; transition: opacity .35s; }
	.ul-phone--peek.is-ready iframe { opacity: 1; }
	.ul-phone--peek:not(.is-loading) .ul-loader { display: none; }
}

/* 12 · choice ------------------------------------------------------------ */
.ul-entry { margin: 0; color: var(--ink) !important; font: 650 clamp(1.125rem, 2vw, 1.375rem)/1.35 var(--display) !important; }
.ul-choice__grid { display: grid; gap: 14px; }
.ul-choice__card { display: grid; align-content: start; gap: 14px; padding: clamp(26px, 4vw, 40px); border-radius: var(--r-xl); background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.ul-choice__card > * { margin: 0; }
.ul-choice__card .ul-badge { justify-self: start; }
.ul-choice__card h3 { font-size: clamp(2rem, 4vw, 2.75rem); }
.ul-choice__card p { color: var(--muted); }
.ul-choice__card ul { display: grid; gap: 8px; padding: 0; list-style: none; }
.ul-choice__card li { display: flex; gap: 10px; align-items: baseline; }
.ul-choice__card li::before { content: ""; width: 14px; height: 3px; flex: none; translate: 0 -4px; border-radius: 2px; background: var(--link); }
.ul-choice__card--made { background: var(--ink); color: var(--white); box-shadow: none; }
.ul-choice__card--made h3 { color: var(--white); }
.ul-choice__card--made p { color: rgb(255 255 255 / 74%); }
.ul-choice__card--made li::before { background: var(--link-ink); }
.ul-choice__card--made .ul-textlink { color: var(--white); text-decoration-color: var(--link-ink); }
@media (min-width: 800px) { .ul-choice__grid { grid-template-columns: 1fr 1fr; } }

/* 13 · faq --------------------------------------------------------------- */
.ul-faq h2 { margin: 0 0 clamp(24px, 4vw, 40px); }
.ul-faq__list { max-width: 860px; border-top: 1px solid var(--line); }
.ul-faq details { border-bottom: 1px solid var(--line); padding: 0; }
.ul-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 2px; cursor: pointer; list-style: none; font: 700 clamp(1.125rem, 2vw, 1.3rem)/1.3 var(--display); letter-spacing: -.015em; }
.ul-faq summary::-webkit-details-marker { display: none; }
.ul-faq summary::after { content: ""; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' stroke='%232340ff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat; box-shadow: 0 0 0 1px var(--line); transition: transform .3s var(--ease-out), background-color .2s; }
.ul-faq details[open] summary::after { transform: rotate(45deg); }
.ul-faq summary:hover { color: var(--link); }
.ul-faq details p { margin: 0 0 22px; color: var(--muted); }
@supports (interpolate-size: allow-keywords) {
	.ul-faq { interpolate-size: allow-keywords; }
	.ul-faq details::details-content { height: 0; overflow: clip; transition: height .35s var(--ease-out), content-visibility .35s allow-discrete; }
	.ul-faq details[open]::details-content { height: auto; }
}

/* 14 · cta (the thread ends under the button) ---------------------------- */
.ul-cta { padding-bottom: clamp(96px, 12vw, 160px); }
.ul-cta h2 { margin: 0 0 14px; max-width: 13ch; font-size: clamp(2.6rem, 7.5vw, 5rem); line-height: 1; letter-spacing: -.04em; }
.ul-cta > p { margin: 0 0 30px; color: var(--muted); font-size: 1.1875rem; }
.ul-cta__button { position: relative; }
.ul-cta__button .wp-element-button { font-size: 1.1875rem; padding: 1.1rem 1.8rem; }
.ul-cta__button::before { content: ""; position: absolute; left: 0; right: 0; bottom: -16px; height: 6px; border-radius: 3px; background: var(--link); transform-origin: left; }

/* 15 · footer ------------------------------------------------------------ */
.ul-site-footer { margin-top: 0; }
.ul-footer { background: var(--ink); color: rgb(255 255 255 / 72%); }
.ul-footer__inner { box-sizing: border-box; max-width: var(--wide); margin: 0 auto; padding: 72px var(--gutter) 32px; }
.ul-footer__top { display: grid; gap: 26px; margin-bottom: 52px; }
.ul-footer__logo { justify-self: start; }
.ul-footer__claim { margin: 0; color: var(--white); font: 800 clamp(2.4rem, 7vw, 4.75rem)/1 var(--display); letter-spacing: -.04em; }
.ul-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 20px; }
.ul-footer__label { margin: 0 0 12px; color: var(--white); font: 700 .9375rem/1 var(--display); }
.ul-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ul-footer a { color: rgb(255 255 255 / 76%); text-decoration: none; font-size: .9375rem; }
.ul-footer a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--link-ink); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ul-footer__base { display: grid; gap: 16px; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / 12%); font-size: .8125rem; line-height: 1.6; }
.ul-footer__base p { margin: 0; max-width: none; }
.ul-footer__base a { font-size: inherit; }
.ul-footer__legal { display: flex !important; flex-wrap: wrap; gap: 6px 18px !important; }
.ul-footer__legal a { font-size: .8125rem; }
@media (min-width: 900px) {
	.ul-footer__top { grid-template-columns: auto 1fr; align-items: end; gap: 40px; }
	.ul-footer__claim { justify-self: end; text-align: right; }
	.ul-footer__cols { grid-template-columns: repeat(4, 1fr); }
	.ul-footer__base { grid-template-columns: 1fr auto; align-items: end; }
}

/* 16 · loader (DESIGN.md "Loading screen") ------------------------------- */
.ul-loader { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: var(--cloud); opacity: 0; animation: ul-fade .25s .3s forwards; pointer-events: none; }
.ul-loader__word { position: relative; display: inline-block; padding: 0 4px 9px; color: var(--link); font: 800 30px/1 var(--display); letter-spacing: -.03em; }
.ul-loader__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border-radius: 3px; background: var(--link); transform-origin: left; animation: ul-load 1.4s var(--ease-draw) infinite; }
.ul-loader__cursor { position: absolute; right: -6px; top: 1px; width: 2.5px; height: 26px; background: var(--ink); animation: ul-blink 1s steps(1) infinite; }

/* 17 · pages ------------------------------------------------------------- */
.ul-page { padding: clamp(40px, 7vw, 80px) var(--gutter) clamp(80px, 10vw, 128px); }
.ul-page__title { margin-bottom: 28px; font-size: clamp(2.4rem, 6vw, 4rem); }
.ul-404 { text-align: left; }
.ul-404__code { margin: 0; color: var(--link); font: 800 clamp(5rem, 18vw, 10rem)/.9 var(--display); letter-spacing: -.05em; }

/* 18 · motion ------------------------------------------------------------ */
@keyframes ul-blink { 50% { opacity: 0; } }
@keyframes ul-fade { to { opacity: 1; } }
@keyframes ul-typing { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes ul-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes ul-tap { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes ul-load { 0% { transform: scaleX(0); } 70% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes ul-scene { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ul-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ul-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ul-underline { from { background-size: 0 var(--u-thick); } to { background-size: 100% var(--u-thick); } }
@keyframes ul-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes ul-rise-soft { from { transform: translateY(14px); } }
@keyframes ul-float { 50% { transform: translateY(-8px); } }
@keyframes ul-phone-in { from { opacity: 0; transform: translateY(30px) rotate(2deg) scale(.97); } }

@media (prefers-reduced-motion: no-preference) {
	/* hero entrance: the H1 never starts invisible (LCP) */
	.ul-hero .ul-eyebrow { animation: ul-rise .6s var(--ease-out) both; }
	.ul-hero__title { animation: ul-rise-soft .7s var(--ease-out) .05s both; }
	.ul-hero__title .ul-u { animation: ul-underline .9s var(--ease-draw) .55s both; }
	.ul-hero__lead { animation: ul-rise .7s var(--ease-out) .15s both; }
	.ul-hero__actions { animation: ul-rise .7s var(--ease-out) .25s both; }
	.ul-hero__facts { animation: ul-rise .7s var(--ease-out) .35s both; }
	.ul-phone { animation: ul-phone-in 1s var(--ease-out) .2s both; }
	.ul-stage::after { transform-origin: left; animation: ul-draw-x 1.1s var(--ease-draw) .6s both; }
	.ul-float--rsvp { animation: ul-rise .6s var(--ease-out) 1.2s both, ul-float 6s ease-in-out 2s infinite; }
	.ul-float--route { animation: ul-rise .6s var(--ease-out) 1.45s both, ul-float 7s ease-in-out 2.2s infinite; }
	.ul-float--count { animation: ul-rise .6s var(--ease-out) 1.7s both, ul-float 6.5s ease-in-out 2.4s infinite; }

	@supports (animation-timeline: view()) {
		.ul-progress { display: block; animation: ul-draw-x linear both; animation-timeline: scroll(root block); }
		.ul-section:not(.ul-hero) .ul-u { animation: ul-underline linear both; animation-timeline: view(); animation-range: entry 55% cover 42%; }
		.ul-footer .ul-u { animation: ul-underline linear both; animation-timeline: view(); animation-range: entry 40% cover 35%; }
		.ul-section + .ul-section::before { animation: ul-draw-y linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
		.ul-section__head { animation: ul-rise linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
		.ul-occ, .ul-feature, .ul-choice__card, .ul-demos__item { animation: ul-rise linear both; animation-timeline: view(); animation-range: entry 5% cover 25%; }
		.ul-step::after { animation: ul-draw-x linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
		.ul-step:nth-child(2)::after { animation-range: entry 40% cover 50%; }
		.ul-step:nth-child(3)::after { animation-range: entry 50% cover 55%; }
		.ul-step:nth-child(4)::after { animation-range: entry 60% cover 60%; }
		.ul-cta__button::before { animation: ul-draw-x linear both; animation-timeline: view(); animation-range: entry 70% cover 55%; }
	}

	/* cross-document view transitions: moving between pages feels like following one link */
	@view-transition { navigation: auto; }
	.ul-header__logo { view-transition-name: ul-logo; }
	.ul-progress { view-transition-name: ul-progress; }
	::view-transition-old(root) { animation: .22s ease-in both ul-vt-out; }
	::view-transition-new(root) { animation: .38s var(--ease-out) both ul-vt-in; }
}
@keyframes ul-vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes ul-vt-in { from { opacity: 0; transform: translateY(10px); } }

/* 19 · reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	.ul-loader { opacity: 1; animation: none !important; }
	.ul-loader__bar { animation: none !important; transform: none; }
	.ul-loader__word { animation: ul-pulse 1.6s ease-in-out infinite !important; animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
	.ul-addr__path::after, .ul-msg__url .ul-caret { animation: none !important; }
}
@keyframes ul-pulse { 50% { opacity: .45; } }

/* 20 · occasion landing pages (inc/landing.php, tools/landing-pages.php) -- */
.ul-lhero .ul-hero__title { font-size: clamp(2.4rem, 9vw, 4.9rem); line-height: 1; max-width: 14ch; text-wrap: balance; }
.ul-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; color: var(--muted); font-size: .9375rem; }
.ul-price b { color: var(--link); font: 800 1.75rem/1 var(--display); letter-spacing: -.03em; }
.ul-lstage { --pw: min(74vw, 320px); position: relative; isolation: isolate; display: grid; justify-items: center; gap: 22px; }
.ul-lstage::after { content: ""; position: absolute; top: calc(var(--pw) * 2.05 - 4px); left: 50%; z-index: -1; width: min(420px, 96%); height: 12px; border-radius: 6px; translate: -50% 0; background: linear-gradient(90deg, var(--link) 0 82%, var(--oranje) 82%); }
.ul-lstage .ul-phone { width: var(--pw); }
.ul-unfold--static { clip-path: none; }
.ul-lstage__open { display: inline-flex; align-items: center; gap: 6px; color: var(--link); font: 650 .9375rem/1.2 var(--display); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (min-width: 960px) { .ul-lstage { --pw: clamp(260px, calc((100svh - var(--header-h) - 170px) / 2.13), 320px); } }

.ul-lgrid { display: grid; gap: 12px; }
.ul-lcard { padding: 24px 24px 26px; border-radius: var(--r-l); background: var(--white); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .3s, transform .3s var(--ease-out); }
.ul-lcard:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--link), var(--shadow); }
.ul-lcard h3 { margin: 0 0 6px; font-size: 1.375rem; letter-spacing: -.02em; }
.ul-lcard p { margin: 0; color: var(--muted); }
@media (min-width: 720px) { .ul-lgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .ul-lgrid { grid-template-columns: repeat(3, 1fr); } }

.ul-pkgs { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ul-pkg { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px 24px 24px; border-radius: var(--r-xl); background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.ul-pkg > * { margin: 0; }
.ul-pkg__name { font: 800 1.375rem/1.1 var(--display); letter-spacing: -.02em; }
.ul-pkg__price { color: var(--link); font: 800 2.6rem/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ul-pkg__guests { justify-self: start; align-self: flex-start; padding: .28rem .65rem; border-radius: 999px; background: var(--link-soft); color: var(--link-dark); font: 700 .8rem/1.2 var(--display); }
.ul-pkg__tag { color: var(--muted); font-size: .9375rem; }
.ul-pkg ul { display: grid; gap: 7px; margin: 4px 0 8px; padding: 0; list-style: none; font-size: .9375rem; }
.ul-pkg li { display: flex; gap: 10px; align-items: baseline; }
.ul-pkg li::before { content: ""; width: 12px; height: 3px; flex: none; translate: 0 -3px; border-radius: 2px; background: var(--link); }
.ul-pkg__go { margin-top: auto !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: .8rem 1rem; border-radius: var(--r-m); box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); font: 700 1rem/1.2 var(--display); text-decoration: none; transition: background-color .2s, color .2s, box-shadow .2s; }
.ul-pkg__go:hover { background: var(--ink); color: var(--white); }
.ul-pkg--premium { box-shadow: 0 0 0 2px var(--link), var(--shadow-lift); }
.ul-pkg--premium::before { content: "Onze tip"; position: absolute; top: -12px; left: 22px; padding: .3rem .7rem; border-radius: 999px; background: var(--oranje); color: var(--white); font: 700 .78rem/1.2 var(--display); }
.ul-pkg--premium .ul-pkg__go { background: var(--link); color: var(--white); box-shadow: none; }
.ul-pkg--premium .ul-pkg__go:hover { background: var(--link-dark); }
.ul-pkg--atelier { background: var(--ink); color: rgb(255 255 255 / 80%); box-shadow: none; }
.ul-pkg--atelier .ul-pkg__name { color: var(--white); }
.ul-pkg--atelier .ul-pkg__price { color: var(--link-ink); }
.ul-pkg--atelier .ul-pkg__tag { color: rgb(255 255 255 / 70%); }
.ul-pkg--atelier li::before { background: var(--link-ink); }
.ul-pkg--atelier .ul-pkg__go { box-shadow: inset 0 0 0 2px rgb(255 255 255 / 70%); color: var(--white); }
.ul-pkg--atelier .ul-pkg__go:hover { background: var(--white); color: var(--ink); }
@media (min-width: 760px) { .ul-pkgs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .ul-pkgs { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } }
.ul-lpackages .ul-section__head p { font-size: 1rem; }

.ul-lform .dic-love, .ul-lform .dic-party { margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.ul-lcard, .ul-pkg { animation: ul-rise linear both; animation-timeline: view(); animation-range: entry 5% cover 25%; }
	}
}
.ul-lstage .ul-stage__glow { inset: 4% 0 16%; }
.ul-lgrid > *, .ul-hero > *, .ul-section__head > *, .ul-lgrid .ul-lcard > * { margin-block-start: 0; }
.ul-lcard > * + * { margin-top: 6px; }
@media (min-width: 1100px) { .ul-lgrid:has(> :nth-child(4):last-child) { grid-template-columns: 1fr 1fr; } }

/* 21 · pillar/service pages ------------------------------------------------ */
.ul-phero { min-height: 0 !important; grid-template-columns: 1fr !important; padding-bottom: clamp(40px, 6vw, 72px); }
.ul-phero .ul-hero__title { max-width: 16ch; }
.ul-ltext { max-width: 860px; margin-inline: 0; }
.ul-ltext h2 { margin: 0 0 18px; }
.ul-ltext p { margin: 0 0 14px; color: var(--muted); font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); }
@media (min-width: 1024px) { .ul-ltext { margin-left: max(var(--gutter), calc((100vw - var(--wide)) / 2)); padding-right: var(--gutter); } }

.ul-compare { margin: 0; overflow-x: auto; border-radius: var(--r-l); background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.ul-compare table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .9375rem; }
.ul-compare :is(th, td) { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ul-compare thead th { color: var(--muted); font: 700 .8125rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .06em; border-bottom-width: 2px; }
.ul-compare thead th:nth-child(2) { color: var(--link); }
.ul-compare tbody th { font: 650 1rem/1.3 var(--display); }
.ul-compare tbody td:nth-child(2) { color: var(--ink); font-weight: 650; background: color-mix(in srgb, var(--link-soft) 45%, transparent); }
.ul-compare tbody td { color: var(--muted); }
.ul-compare tr:last-child :is(th, td) { border-bottom: 0; }

.ul-entry b { color: var(--link); font-family: var(--display); font-weight: 800; }
.ul-lane__price { margin: 0; color: var(--muted) !important; }
.ul-lane__price b { color: var(--link); font: 800 1.75rem/1 var(--display); letter-spacing: -.03em; }
.ul-choice__card--made .ul-lane__price { color: rgb(255 255 255 / 70%) !important; }
.ul-choice__card--made .ul-lane__price b { color: var(--link-ink); }

.ul-addons, .ul-iprices { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ul-addon { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 20px 22px; border-radius: var(--r-l); background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.ul-addon p { margin: 0; }
.ul-addon__name { font: 750 1.125rem/1.25 var(--display); letter-spacing: -.01em; }
.ul-addon__price { color: var(--link); font: 800 1.125rem/1.25 var(--display); white-space: nowrap; }
.ul-addon__text { grid-column: 1 / -1; color: var(--muted); font-size: .9375rem; }
@media (min-width: 760px) { .ul-addons { grid-template-columns: 1fr 1fr; } }
.ul-iprices li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; padding: 18px 22px; border-radius: var(--r-l); background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.ul-iprices a { color: var(--ink); font: 750 1.125rem/1.25 var(--display); text-decoration: none; background: linear-gradient(var(--link), var(--link)) 0 100% / 0 3px no-repeat; transition: background-size .35s var(--ease-draw); }
.ul-iprices a:hover { background-size: 100% 3px; }
.ul-iprices p { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; color: var(--muted); font-size: .9375rem; }
.ul-iprices b { color: var(--link); font-family: var(--display); font-weight: 800; }

/* legal and plain pages */
.ul-page :is(h2, h3) { margin: 2.2em 0 .6em; }
.ul-page h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.025em; }
.ul-page p, .ul-page li { color: var(--ink); }
.ul-page .ul-legal-list { padding-left: 1.2em; }
.ul-page .ul-legal-list li + li { margin-top: 6px; }
.ul-draft-note { padding: 12px 16px; border-radius: var(--r-m); background: var(--oranje-soft); color: var(--oranje-ink) !important; font-size: .9375rem; }

/* coming-soon chips open the core waitlist (inc/demos.php) */
.ul-wait details { display: contents; }
.ul-wait summary { cursor: pointer; list-style: none; }
.ul-wait summary::-webkit-details-marker { display: none; }
.ul-wait summary:hover { box-shadow: inset 0 0 0 2px var(--link); color: var(--link); }
.ul-wait__hint { color: var(--link); font-weight: 600; }
.ul-wait:has(details[open]) { flex-basis: 100%; }
.ul-wait details[open] summary { box-shadow: inset 0 0 0 2px var(--link); color: var(--ink); }
.ul-wait__panel { margin-top: 12px; padding: 20px; border-radius: var(--r-l); background: var(--white); box-shadow: 0 0 0 1px var(--line); max-width: 560px; }

/* WooCommerce cart/checkout blocks hydrate after load: reserve a screen so the footer never jumps into view (CLS). */
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout, .woocommerce-cart .ul-page, .woocommerce-checkout .ul-page { min-height: calc(100vh - var(--header-h)); }