/* Containers - page-level wrapperi */
.ot-container-s { width: 100%; max-width: 768px; margin: 0 auto; padding: 0 calc(var(--ot-spacing-m) * 2); }
.ot-container-m { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 calc(var(--ot-spacing-m) * 2); }
.ot-container-l { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 calc(var(--ot-spacing-m) * 2); }
.ot-container-full { width: 100%; padding: 0 calc(var(--ot-spacing-m) * 2); }

@media screen and (max-width: 900px)
{
    .ot-container-s,
    .ot-container-m,
    .ot-container-l,
    .ot-container-full
    {
        padding: 0 var(--ot-spacing-m);
    }
}

/* Grid - responsive auto layouts */
.ot-grid-auto-s { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--ot-spacing-s); }
.ot-grid-auto-m { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--ot-spacing-m); }
.ot-grid-auto-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--ot-spacing-m); }

/* Scrollbar - opt-in tanke skrol regije */
.ot-scrollbar { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--ot-bg-4) var(--ot-bg-1); }
.ot-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.ot-scrollbar::-webkit-scrollbar-track { background: var(--ot-bg-1); }
.ot-scrollbar::-webkit-scrollbar-thumb { background: var(--ot-bg-4); border-radius: 4px; }
.ot-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--ot-bg-4-hover); }

/* Truncate - single line ellipsis */
.ot-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Line clamp - multi-line ellipsis */
.ot-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ot-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ot-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* Flex */

.ot-flex-vertical { display: flex; flex-direction: column; gap: var(--ot-spacing-l); }
.ot-flex-horizontal { display: flex; gap: var(--ot-spacing-l); }
.ot-flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--ot-spacing-m); }
.ot-flex-center { display: flex; align-items: center; justify-content: center; gap: var(--ot-spacing-m); }
.ot-flex-start { display: flex; align-items: center; gap: var(--ot-spacing-m); }
.ot-flex-end { display: flex; align-items: center; justify-content: flex-end; gap: var(--ot-spacing-m); }
.ot-flex-wrap { display: flex; flex-wrap: wrap; gap: var(--ot-spacing-m); }
.ot-flex-1 { flex: 1; min-width: 0; }

/* Gap overrides */

.ot-gap-0 { gap: 0; }
.ot-gap-x { gap: var(--ot-spacing-x); }
.ot-gap-s { gap: var(--ot-spacing-s); }
.ot-gap-m { gap: var(--ot-spacing-m); }
.ot-gap-l { gap: var(--ot-spacing-l); }
.ot-p-0 { padding: 0; }
.ot-p-x { padding: var(--ot-spacing-x); }
.ot-p-s { padding: var(--ot-spacing-s); }
.ot-p-m { padding: var(--ot-spacing-m); }
.ot-p-l { padding: var(--ot-spacing-l); }

.ot-px-0 { padding-left: 0; padding-right: 0; }
.ot-px-x { padding-left: var(--ot-spacing-x); padding-right: var(--ot-spacing-x); }
.ot-px-s { padding-left: var(--ot-spacing-s); padding-right: var(--ot-spacing-s); }
.ot-px-m { padding-left: var(--ot-spacing-m); padding-right: var(--ot-spacing-m); }
.ot-px-l { padding-left: var(--ot-spacing-l); padding-right: var(--ot-spacing-l); }

.ot-py-0 { padding-top: 0; padding-bottom: 0; }
.ot-py-x { padding-top: var(--ot-spacing-x); padding-bottom: var(--ot-spacing-x); }
.ot-py-s { padding-top: var(--ot-spacing-s); padding-bottom: var(--ot-spacing-s); }
.ot-py-m { padding-top: var(--ot-spacing-m); padding-bottom: var(--ot-spacing-m); }
.ot-py-l { padding-top: var(--ot-spacing-l); padding-bottom: var(--ot-spacing-l); }

.ot-pt-0 { padding-top: 0; }
.ot-pt-x { padding-top: var(--ot-spacing-x); }
.ot-pt-s { padding-top: var(--ot-spacing-s); }
.ot-pt-m { padding-top: var(--ot-spacing-m); }
.ot-pt-l { padding-top: var(--ot-spacing-l); }

.ot-pr-0 { padding-right: 0; }
.ot-pr-x { padding-right: var(--ot-spacing-x); }
.ot-pr-s { padding-right: var(--ot-spacing-s); }
.ot-pr-m { padding-right: var(--ot-spacing-m); }
.ot-pr-l { padding-right: var(--ot-spacing-l); }

.ot-pb-0 { padding-bottom: 0; }
.ot-pb-x { padding-bottom: var(--ot-spacing-x); }
.ot-pb-s { padding-bottom: var(--ot-spacing-s); }
.ot-pb-m { padding-bottom: var(--ot-spacing-m); }
.ot-pb-l { padding-bottom: var(--ot-spacing-l); }

.ot-pl-0 { padding-left: 0; }
.ot-pl-x { padding-left: var(--ot-spacing-x); }
.ot-pl-s { padding-left: var(--ot-spacing-s); }
.ot-pl-m { padding-left: var(--ot-spacing-m); }
.ot-pl-l { padding-left: var(--ot-spacing-l); }

.ot-m-0 { margin: 0; }
.ot-m-auto { margin: auto; }
.ot-m-x { margin: var(--ot-spacing-x); }
.ot-m-s { margin: var(--ot-spacing-s); }
.ot-m-m { margin: var(--ot-spacing-m); }
.ot-m-l { margin: var(--ot-spacing-l); }

.ot-mx-0 { margin-left: 0; margin-right: 0; }
.ot-mx-auto { margin-left: auto; margin-right: auto; }
.ot-mx-x { margin-left: var(--ot-spacing-x); margin-right: var(--ot-spacing-x); }
.ot-mx-s { margin-left: var(--ot-spacing-s); margin-right: var(--ot-spacing-s); }
.ot-mx-m { margin-left: var(--ot-spacing-m); margin-right: var(--ot-spacing-m); }
.ot-mx-l { margin-left: var(--ot-spacing-l); margin-right: var(--ot-spacing-l); }

.ot-my-0 { margin-top: 0; margin-bottom: 0; }
.ot-my-auto { margin-top: auto; margin-bottom: auto; }
.ot-my-x { margin-top: var(--ot-spacing-x); margin-bottom: var(--ot-spacing-x); }
.ot-my-s { margin-top: var(--ot-spacing-s); margin-bottom: var(--ot-spacing-s); }
.ot-my-m { margin-top: var(--ot-spacing-m); margin-bottom: var(--ot-spacing-m); }
.ot-my-l { margin-top: var(--ot-spacing-l); margin-bottom: var(--ot-spacing-l); }

.ot-mt-0 { margin-top: 0; }
.ot-mt-auto { margin-top: auto; }
.ot-mt-x { margin-top: var(--ot-spacing-x); }
.ot-mt-s { margin-top: var(--ot-spacing-s); }
.ot-mt-m { margin-top: var(--ot-spacing-m); }
.ot-mt-l { margin-top: var(--ot-spacing-l); }

.ot-mr-0 { margin-right: 0; }
.ot-mr-auto { margin-right: auto; }
.ot-mr-x { margin-right: var(--ot-spacing-x); }
.ot-mr-s { margin-right: var(--ot-spacing-s); }
.ot-mr-m { margin-right: var(--ot-spacing-m); }
.ot-mr-l { margin-right: var(--ot-spacing-l); }

.ot-mb-0 { margin-bottom: 0; }
.ot-mb-auto { margin-bottom: auto; }
.ot-mb-x { margin-bottom: var(--ot-spacing-x); }
.ot-mb-s { margin-bottom: var(--ot-spacing-s); }
.ot-mb-m { margin-bottom: var(--ot-spacing-m); }
.ot-mb-l { margin-bottom: var(--ot-spacing-l); }

.ot-ml-0 { margin-left: 0; }
.ot-ml-auto { margin-left: auto; }
.ot-ml-x { margin-left: var(--ot-spacing-x); }
.ot-ml-s { margin-left: var(--ot-spacing-s); }
.ot-ml-m { margin-left: var(--ot-spacing-m); }
.ot-ml-l { margin-left: var(--ot-spacing-l); }

.ot-gap-0 { gap: 0; }
.ot-gap-x { gap: var(--ot-spacing-x); }
.ot-gap-s { gap: var(--ot-spacing-s); }
.ot-gap-m { gap: var(--ot-spacing-m); }
.ot-gap-l { gap: var(--ot-spacing-l); }
*,
*::before,
*::after
{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html
{
	height: 100%;
	scroll-behavior: smooth;
	font-size: 100%;
	tab-size: 4;
}

body
{
	min-height: 100vh;
	font-family: var(--ot-font-primary), system-ui, sans-serif;
	font-size: var(--ot-size-m);
	line-height: 1.5;
	color: var(--ot-text-1);
	background: var(--ot-bg-1);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:focus-visible
{
	outline: 2px solid var(--ot-brand);
	outline-offset: 2px;
}

:focus:not(:focus-visible)
{
	outline: none;
}

h1, h2, h3, h4, h5, h6
{
	font-family: var(--ot-font-secondary), Georgia, serif;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ot-text-1);
	font-variation-settings: 'opsz' 144;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p
{
	line-height: 1.6;
	color: var(--ot-text-2);
}

@media screen and (max-width: 768px)
{
	html { font-size: 95%; }
	h1 { line-height: 1.05; }
	p { line-height: 1.5; }
}

@media screen and (max-width: 480px)
{
	html { font-size: 90%; }
	h1 { line-height: 1.05; }
	p { line-height: 1.4; }
}

small
{
	font-size: 0.875em;
}

a
{
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

img,
picture,
video,
canvas,
svg
{
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
optgroup,
select,
textarea
{
	font: inherit;
	color: inherit;
	line-height: inherit;
}

button
{
	cursor: pointer;
	background: none;
	border: none;
}

ul, ol
{
	list-style: none;
}

table
{
	border-collapse: collapse;
	width: 100%;
}

i
{
	font-family: 'Material Symbols Rounded';
	font-weight: normal;
	font-style: normal;
	font-size: 20px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	color: inherit;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	font-variation-settings: 'opsz' 24, 'wght' 350, 'FILL' 0, 'GRAD' 0;
}

*
{
	scrollbar-width: thin;
	scrollbar-color: var(--ot-bg-3) transparent;
}

::-webkit-scrollbar
{
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track
{
	background: transparent;
}

::-webkit-scrollbar-thumb
{
	background: var(--ot-bg-3);
	border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover
{
	background: var(--ot-bg-4);
}

@media print
{
	body { background: #fff; color: #000; }
	a { color: #000; text-decoration: underline; }
	@page { margin: 2cm; }
}

hr 
{
	border: 1px solid var(--ot-bg-1-border);
}

hr.bg-2
{
	border: 1px solid var(--ot-bg-2-border);
}

hr.bg-3
{
	border: 1px solid var(--ot-bg-3-border);
}

hr.bg-4
{
	border: 1px solid var(--ot-bg-4-border);
}
:root
{
    --ot-spacing-x: 4px;
    --ot-spacing-s: 8px;
    --ot-spacing-m: 16px;
    --ot-spacing-l: 32px;

    --ot-radius-s: 4px;
    --ot-radius-m: 8px;
    --ot-radius-l: 12px;

    --ot-height-x: 18px;
    --ot-height-s: 28px;
    --ot-height-m: 34px;
    --ot-height-l: 44px;

    --ot-size-s: 11px;
    --ot-size-m: 13px;
    --ot-size-l: 22px;

    --ot-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ot-font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --ot-bg-1: rgba(29, 29, 31, 1);
    --ot-bg-1-border: rgba(43, 43, 45, 1);
    --ot-bg-1-opacity: rgba(29, 29, 31, 0.85);
    --ot-bg-1-hover: rgba(33, 33, 35, 1);

    --ot-bg-2: rgba(34, 34, 36, 1);
    --ot-bg-2-border: rgba(48, 48, 50, 1);
    --ot-bg-2-opacity: rgba(34, 34, 36, 0.85);
    --ot-bg-2-hover: rgba(38, 38, 40, 1);

    --ot-bg-3: rgba(39, 39, 41, 1);
    --ot-bg-3-border: rgba(53, 53, 55, 1);
    --ot-bg-3-opacity: rgba(39, 39, 41, 0.85);
    --ot-bg-3-hover: rgba(43, 43, 45, 1);

    --ot-bg-4: rgba(44, 44, 46, 1);
    --ot-bg-4-border: rgba(58, 58, 60, 1);
    --ot-bg-4-opacity: rgba(44, 44, 46, 0.85);
    --ot-bg-4-hover: rgba(48, 48, 50, 1);

    --ot-text-1: rgba(225, 228, 232, 1);
    --ot-text-2: rgba(156, 156, 156, 1);
    --ot-text-3: rgba(100, 100, 100, 1);

    --ot-brand: rgba(226, 112, 85, 1);
    --ot-brand-border: rgba(236, 142, 120, 1);
    --ot-brand-opacity: rgba(226, 112, 85, 0.12);
    --ot-brand-hover: rgba(206, 92, 65, 1);

    --ot-blue: rgba(56, 189, 248, 1);
    --ot-blue-border: rgba(125, 211, 252, 1);
    --ot-blue-opacity: rgba(56, 189, 248, 0.12);
    --ot-blue-hover: rgba(14, 165, 233, 1);

    --ot-red: rgba(244, 63, 94, 1);
    --ot-red-border: rgba(251, 113, 133, 1);
    --ot-red-opacity: rgba(244, 63, 94, 0.12);
    --ot-red-hover: rgba(225, 29, 72, 1);

    --ot-orange: rgba(251, 146, 60, 1);
    --ot-orange-border: rgba(253, 186, 116, 1);
    --ot-orange-opacity: rgba(251, 146, 60, 0.12);
    --ot-orange-hover: rgba(249, 115, 22, 1);

    --ot-green: rgba(52, 211, 153, 1);
    --ot-green-border: rgba(110, 231, 183, 1);
    --ot-green-opacity: rgba(52, 211, 153, 0.12);
    --ot-green-hover: rgba(16, 185, 129, 1);

    --ot-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --ot-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --ot-transition-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1);

    --ot-shadow-s: 0 1px 2px rgba(0, 0, 0, 0.2);
    --ot-shadow-m: 0 4px 12px rgba(0, 0, 0, 0.25);
    --ot-shadow-l: 0 12px 32px rgba(0, 0, 0, 0.35);

    --ot-blur: blur(12px) saturate(180%);
}

@media screen and (max-width: 900px)
{
    :root
    {
        --ot-spacing-l: 16px;
    }
}
.ot-overlay
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 100000;
}

.ot-overlay > .backdrop
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000000;
	pointer-events: auto;
}

.ot-overlay > .content
{
	position: absolute;
	pointer-events: auto;
}

.ot-overlay.ot-modal > .content
{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.ot-tooltip
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	padding: var(--ot-spacing-s) var(--ot-spacing-m);
	background: var(--ot-bg-3);
	border: 1px solid var(--ot-bg-3-border);
	border-radius: var(--ot-radius-m);
	color: var(--ot-text-1);
	font-size: var(--ot-size-s);
	max-width: 280px;
	white-space: normal;
}

.ot-tooltip > .icon
{
	font-size: 16px;
	color: var(--ot-text-2);
}

.ot-tooltip > .content > .title
{
	font-weight: 600;
	margin-bottom: 2px;
}

.ot-tooltip > .content > .text
{
	color: var(--ot-text-2);
}

.ot-tooltip.info > .icon { color: var(--ot-blue); }
.ot-tooltip.success > .icon { color: var(--ot-green); }
.ot-tooltip.warning > .icon { color: var(--ot-orange); }
.ot-tooltip.error > .icon { color: var(--ot-red); }

.ot-toast
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-m);
	padding: 16px 20px;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-1-border);
	border-radius: var(--ot-radius-l);
	color: var(--ot-text-1);
	font-size: var(--ot-size-m);
	min-width: 320px;
	max-width: 420px;
	animation: toast-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes toast-in
{
	from { opacity: 0; transform: translateY(-12px) scale(0.96); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.ot-toast > .icon
{
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}

.ot-toast > .content
{
	flex: 1;
}

.ot-toast > .content > .title
{
	font-weight: 600;
	font-size: 13.5px;
	margin-bottom: 3px;
	color: var(--ot-text-1);
}

.ot-toast > .content > .message
{
	font-size: var(--ot-size-m);
	font-weight: 600;
	line-height: 1.45;
	color: var(--ot-text-1);
}

.ot-toast > .close
{
	width: 28px;
	height: 28px;
	background: none;
	border: none;
	color: var(--ot-text-3);
	cursor: pointer;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.15s ease, color 0.15s ease;
}

.ot-toast > .close:hover
{
	background: var(--ot-bg-2);
	color: var(--ot-text-1);
}

.ot-toast > .close > i
{
	font-size: 16px;
}

.ot-toast.info > .icon { background: var(--ot-blue-opacity); color: var(--ot-blue); }
.ot-toast.success > .icon { background: var(--ot-green-opacity); color: var(--ot-green); }
.ot-toast.warning > .icon { background: var(--ot-orange-opacity); color: var(--ot-orange); }
.ot-toast.error > .icon { background: var(--ot-red-opacity); color: var(--ot-red); }

/* Confirm */

.ot-confirm
{
	display: flex;
	flex-direction: column;
	padding: 28px 32px 24px;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-1-border);
	border-radius: 20px;
	min-width: 400px;
	max-width: 460px;
	animation: confirm-in 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes confirm-in
{
	from { opacity: 0; transform: scale(0.95) translateY(8px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Icon */

.ot-confirm > .icon
{
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}

.ot-confirm > .icon > i
{
	font-size: 22px;
}

.ot-confirm > .icon.default { background: var(--ot-brand-opacity); color: var(--ot-brand); }
.ot-confirm > .icon.danger { background: var(--ot-red-opacity); color: var(--ot-red); }
.ot-confirm > .icon.warning { background: var(--ot-orange-opacity); color: var(--ot-orange); }
.ot-confirm > .icon.info { background: var(--ot-blue-opacity); color: var(--ot-blue); }
.ot-confirm > .icon.success { background: var(--ot-green-opacity); color: var(--ot-green); }

/* Title */

.ot-confirm > .title
{
	font-family: var(--ot-font-secondary);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: var(--ot-text-1);
	margin-bottom: 8px;
}

/* Description */

.ot-confirm > .description
{
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ot-text-2);
	margin-bottom: 24px;
}

/* Input */

.ot-confirm > .input
{
	width: 100%;
	margin-bottom: 24px;
}

/* Actions */

.ot-confirm > .actions
{
	display: flex;
	gap: 10px;
	width: 100%;
	padding-top: 20px;
	border-top: 1px solid var(--ot-bg-1-border);
}

.ot-confirm > .actions > *,
.ot-confirm > .actions > * > *
{
	width: 100%;
}
/* ===== TYPE SYSTEM — global reusable cell styles ===== */

/* Group — recursive layout wrapper */

.ot-type-group
{
	display: flex;
	min-width: 0;
}

.ot-type-group.layout-row
{
	flex-direction: row;
	align-items: center;
}

.ot-type-group.layout-column
{
	flex-direction: column;
	align-items: flex-start;
}

.ot-type-group.gap-none { gap: 0; }
.ot-type-group.gap-small { gap: 4px; }
.ot-type-group.gap-medium { gap: var(--ot-spacing-s); }
.ot-type-group.gap-large { gap: var(--ot-spacing-m); }

/* Text */

.ot-type-text
{
	color: var(--ot-text-1);
	font-weight: 600;
}

/* Description */

.ot-type-description
{
	color: var(--ot-text-2);
	font-weight: 400;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Number */

.ot-type-number
{
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--ot-text-1);
}

/* Date / Timeago */

.ot-type-date
{
	color: var(--ot-text-2);
	font-variant-numeric: tabular-nums;
}

/* Boolean */

.ot-type-boolean
{
	font-size: 18px;
}

.ot-type-boolean.yes { color: var(--ot-green); }
.ot-type-boolean.no { color: var(--ot-red); opacity: 0.5; }

/* Icon */

.ot-type-icon
{
	font-size: 18px;
	color: var(--ot-text-2);
}

/* Image */

.ot-type-image
{
	height: 32px;
	padding: 4px;
	border-radius: var(--ot-radius-s);
	border: 1px solid var(--ot-bg-2-border);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	max-width: 64px;
}

.ot-type-image.empty
{
	background-image: none;
}

/* Avatar */

.ot-type-avatar
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--ot-bg-2);
	color: var(--ot-text-3);
}

.ot-type-avatar > img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ot-type-avatar.ot-type-avatar-fallback > i
{
	font-size: 18px;
}

/* Media */

.ot-type-media
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	min-width: 0;
}

.ot-type-media > .ot-type-media-thumb
{
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: var(--ot-radius-s);
	background-size: cover;
	background-position: center;
	background-color: var(--ot-bg-2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ot-text-3);
}

.ot-type-media > .ot-type-media-thumb.empty > i
{
	font-size: 18px;
}

.ot-type-media > .ot-type-media-info
{
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 1px;
}

.ot-type-media > .ot-type-media-info > .ot-type-media-title
{
	font-weight: 600;
	color: var(--ot-text-1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ot-type-media > .ot-type-media-info > .ot-type-media-subtitle
{
	font-size: 11px;
	color: var(--ot-text-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Badge */

.ot-type-badge
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 100px;
	font-size: 11px;
	font-weight: 600;
	color: var(--ot-text-2);
}

.ot-type-badge > i
{
	font-size: 13px;
}

.ot-type-badge.color-brand { background: var(--ot-brand-opacity); border-color: var(--ot-brand-border); color: var(--ot-brand); }
.ot-type-badge.color-blue { background: var(--ot-blue-opacity); border-color: var(--ot-blue-border); color: var(--ot-blue); }
.ot-type-badge.color-green { background: var(--ot-green-opacity); border-color: var(--ot-green-border); color: var(--ot-green); }
.ot-type-badge.color-red { background: var(--ot-red-opacity); border-color: var(--ot-red-border); color: var(--ot-red); }
.ot-type-badge.color-orange { background: var(--ot-orange-opacity); border-color: var(--ot-orange-border); color: var(--ot-orange); }

/* Chip */

.ot-type-chip
{
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-s);
	font-size: 11px;
	font-weight: 600;
	color: var(--ot-text-2);
}

/* Tag */

.ot-type-tag
{
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	background: var(--ot-bg-3);
	border-radius: var(--ot-radius-s);
	font-size: 10px;
	font-weight: 600;
	color: var(--ot-text-2);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ot-type-tags
{
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
}

/* Status */

.ot-type-status
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	background: var(--ot-bg-2);
	border-radius: 100px;
	font-size: 11px;
	font-weight: 600;
	color: var(--ot-text-2);
}

.ot-type-status > .ot-type-status-dot
{
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ot-text-3);
}

.ot-type-status.color-green { color: var(--ot-green); background: var(--ot-green-opacity); }
.ot-type-status.color-green > .ot-type-status-dot { background: var(--ot-green); box-shadow: 0 0 0 3px var(--ot-green-opacity); }
.ot-type-status.color-red { color: var(--ot-red); background: var(--ot-red-opacity); }
.ot-type-status.color-red > .ot-type-status-dot { background: var(--ot-red); box-shadow: 0 0 0 3px var(--ot-red-opacity); }
.ot-type-status.color-orange { color: var(--ot-orange); background: var(--ot-orange-opacity); }
.ot-type-status.color-orange > .ot-type-status-dot { background: var(--ot-orange); box-shadow: 0 0 0 3px var(--ot-orange-opacity); }
.ot-type-status.color-blue { color: var(--ot-blue); background: var(--ot-blue-opacity); }
.ot-type-status.color-blue > .ot-type-status-dot { background: var(--ot-blue); }
.ot-type-status.color-brand { color: var(--ot-brand); background: var(--ot-brand-opacity); }
.ot-type-status.color-brand > .ot-type-status-dot { background: var(--ot-brand); }

/* Metric */

.ot-type-metric
{
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-variant-numeric: tabular-nums;
}

.ot-type-metric > .ot-type-metric-value
{
	font-weight: 700;
	color: var(--ot-text-1);
}

.ot-type-metric > .ot-type-metric-delta
{
	font-size: 11px;
	font-weight: 700;
	padding: 1px 5px;
	border-radius: var(--ot-radius-s);
}

.ot-type-metric > .ot-type-metric-delta.up { color: var(--ot-green); background: var(--ot-green-opacity); }
.ot-type-metric > .ot-type-metric-delta.down { color: var(--ot-red); background: var(--ot-red-opacity); }

/* Progress */

.ot-type-progress
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
}

.ot-type-progress > .ot-type-progress-track
{
	flex: 1;
	height: 6px;
	background: var(--ot-bg-3);
	border-radius: 100px;
	overflow: hidden;
	min-width: 60px;
}

.ot-type-progress > .ot-type-progress-track > .ot-type-progress-bar
{
	height: 100%;
	border-radius: 100px;
	transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.ot-type-progress > .ot-type-progress-track > .ot-type-progress-bar.color-brand { background: var(--ot-brand); }
.ot-type-progress > .ot-type-progress-track > .ot-type-progress-bar.color-blue { background: var(--ot-blue); }
.ot-type-progress > .ot-type-progress-track > .ot-type-progress-bar.color-green { background: var(--ot-green); }
.ot-type-progress > .ot-type-progress-track > .ot-type-progress-bar.color-red { background: var(--ot-red); }
.ot-type-progress > .ot-type-progress-track > .ot-type-progress-bar.color-orange { background: var(--ot-orange); }

.ot-type-progress > .ot-type-progress-label
{
	font-size: 11px;
	font-weight: 700;
	color: var(--ot-text-2);
	font-variant-numeric: tabular-nums;
	min-width: 32px;
	text-align: right;
}

/* Count */

.ot-type-count
{
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}

.ot-type-count > .ot-type-count-value
{
	font-weight: 700;
	color: var(--ot-text-1);
	font-variant-numeric: tabular-nums;
}

.ot-type-count > .ot-type-count-label
{
	color: var(--ot-text-3);
	font-weight: 400;
}

/* Color */

.ot-type-color
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ot-type-color > .ot-type-color-swatch
{
	width: 18px;
	height: 18px;
	border-radius: var(--ot-radius-s);
	border: 1px solid var(--ot-bg-2-border);
	flex-shrink: 0;
}

.ot-type-color > .ot-type-color-value
{
	font-size: 11px;
	font-weight: 600;
	color: var(--ot-text-2);
	text-transform: uppercase;
}

/* Link */

.ot-type-link
{
	color: var(--ot-brand);
	text-decoration: none;
	font-weight: 500;
}

.ot-type-link:hover
{
	text-decoration: underline;
}
/* ===== CARDS INFO ===== */

.e-7e93ff6e
{
	display: contents;
}

/* Box */

.e-7e93ff6e > .box
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-m);
	width: 100%;
	border: 1px solid transparent;
	border-radius: var(--ot-radius-l);
}

.e-7e93ff6e > .box.bg-1,
.e-7e93ff6e > .box.bg-2,
.e-7e93ff6e > .box.bg-3,
.e-7e93ff6e > .box.bg-4,
.e-7e93ff6e > .box.border
{
	padding: var(--ot-spacing-m);
}

/* ===== HEADER ===== */

.e-7e93ff6e > .box > .header
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-m);
}

/* Header icon */

.e-7e93ff6e > .box > .header > .icon
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--ot-radius-m);
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
	flex-shrink: 0;
}

.e-7e93ff6e > .box > .header > .icon > i
{
	font-size: 22px;
}

/* Header text */

.e-7e93ff6e > .box > .header > .text
{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.e-7e93ff6e > .box > .header > .text > .title
{
	margin: 0;
	font-family: var(--ot-font-secondary);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--ot-text-1);
	font-variation-settings: 'opsz' 144;
	line-height: 1.2;
}

.e-7e93ff6e > .box > .header > .text > .description
{
	margin: 0;
	font-size: 12px;
	color: var(--ot-text-2);
	line-height: 1.4;
	font-family: var(--ot-font-primary);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
}

/* Header badge */

.e-7e93ff6e > .box > .header > .badge
{
	display: inline-flex;
	align-items: center;
	padding: var(--ot-spacing-x) 10px;
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
	border-radius: 100px;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-family: var(--ot-font-primary);
	flex-shrink: 0;
}

/* ===== STATUS ===== */

.e-7e93ff6e > .box > .status
{
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: var(--ot-spacing-s);
	padding: 6px 12px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 600;
	font-family: var(--ot-font-primary);
}

.e-7e93ff6e > .box > .status > .dot
{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	position: relative;
}

.e-7e93ff6e > .box > .status > .dot::before
{
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	opacity: 0.3;
	animation: e-7e93ff6e-pulse 2.4s ease-in-out infinite;
}

@keyframes e-7e93ff6e-pulse
{
	0%, 100% { transform: scale(1); opacity: 0.3; }
	50% { transform: scale(1.4); opacity: 0.1; }
}

.e-7e93ff6e > .box > .status.color-brand { background: var(--ot-brand-opacity); color: var(--ot-brand); }
.e-7e93ff6e > .box > .status.color-brand > .dot { background: var(--ot-brand); }
.e-7e93ff6e > .box > .status.color-brand > .dot::before { background: var(--ot-brand); }

.e-7e93ff6e > .box > .status.color-blue { background: var(--ot-blue-opacity); color: var(--ot-blue); }
.e-7e93ff6e > .box > .status.color-blue > .dot { background: var(--ot-blue); }
.e-7e93ff6e > .box > .status.color-blue > .dot::before { background: var(--ot-blue); }

.e-7e93ff6e > .box > .status.color-red { background: var(--ot-red-opacity); color: var(--ot-red); }
.e-7e93ff6e > .box > .status.color-red > .dot { background: var(--ot-red); }
.e-7e93ff6e > .box > .status.color-red > .dot::before { background: var(--ot-red); }

.e-7e93ff6e > .box > .status.color-orange { background: var(--ot-orange-opacity); color: var(--ot-orange); }
.e-7e93ff6e > .box > .status.color-orange > .dot { background: var(--ot-orange); }
.e-7e93ff6e > .box > .status.color-orange > .dot::before { background: var(--ot-orange); }

.e-7e93ff6e > .box > .status.color-green { background: var(--ot-green-opacity); color: var(--ot-green); }
.e-7e93ff6e > .box > .status.color-green > .dot { background: var(--ot-green); }
.e-7e93ff6e > .box > .status.color-green > .dot::before { background: var(--ot-green); }

/* ===== STATS ===== */

.e-7e93ff6e > .box > .stats
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--ot-spacing-m);
	padding: var(--ot-spacing-m) 0;
	border-top: 1px solid var(--ot-bg-2-border);
	border-bottom: 1px solid var(--ot-bg-2-border);
}

.e-7e93ff6e > .box > .stats > .stat
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
}

.e-7e93ff6e > .box > .stats > .stat > .stat-icon
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--ot-radius-m);
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
	font-size: 18px;
	flex-shrink: 0;
}

.e-7e93ff6e > .box > .stats > .stat > .stat-text
{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.e-7e93ff6e > .box > .stats > .stat > .stat-text > .value
{
	font-family: var(--ot-font-secondary);
	font-size: 20px;
	font-weight: 600;
	color: var(--ot-text-1);
	line-height: 1;
	font-variation-settings: 'opsz' 144;
}

.e-7e93ff6e > .box > .stats > .stat > .stat-text > .label
{
	font-size: 10.5px;
	font-weight: 600;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-family: var(--ot-font-primary);
}

.e-7e93ff6e > .box > .stats > .stat.color-brand > .stat-icon { background: var(--ot-brand-opacity); color: var(--ot-brand); }
.e-7e93ff6e > .box > .stats > .stat.color-blue > .stat-icon { background: var(--ot-blue-opacity); color: var(--ot-blue); }
.e-7e93ff6e > .box > .stats > .stat.color-red > .stat-icon { background: var(--ot-red-opacity); color: var(--ot-red); }
.e-7e93ff6e > .box > .stats > .stat.color-orange > .stat-icon { background: var(--ot-orange-opacity); color: var(--ot-orange); }
.e-7e93ff6e > .box > .stats > .stat.color-green > .stat-icon { background: var(--ot-green-opacity); color: var(--ot-green); }

/* ===== ROWS ===== */

.e-7e93ff6e > .box > .rows
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-x);
}

.e-7e93ff6e > .box > .rows > .row
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ot-spacing-m);
	padding: 6px 0;
	font-size: var(--ot-size-m);
	font-family: var(--ot-font-primary);
}

.e-7e93ff6e > .box > .rows > .row > .row-label
{
	display: inline-flex;
	align-items: center;
	gap: var(--ot-spacing-x);
	color: var(--ot-text-2);
}

.e-7e93ff6e > .box > .rows > .row > .row-label > i
{
	font-size: 16px;
	color: var(--ot-text-3);
}

.e-7e93ff6e > .box > .rows > .row > .row-value
{
	font-weight: 600;
	color: var(--ot-text-1);
	text-align: right;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.e-7e93ff6e > .box > .rows > .row.color-brand > .row-value { color: var(--ot-brand); }
.e-7e93ff6e > .box > .rows > .row.color-blue > .row-value { color: var(--ot-blue); }
.e-7e93ff6e > .box > .rows > .row.color-red > .row-value { color: var(--ot-red); }
.e-7e93ff6e > .box > .rows > .row.color-orange > .row-value { color: var(--ot-orange); }
.e-7e93ff6e > .box > .rows > .row.color-green > .row-value { color: var(--ot-green); }

/* ===== TAGS ===== */

.e-7e93ff6e > .box > .tags
{
	display: flex;
	flex-wrap: wrap;
	gap: var(--ot-spacing-x);
}

.e-7e93ff6e > .box > .tags > .tag
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: var(--ot-spacing-x) 10px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 100px;
	font-size: var(--ot-size-s);
	font-weight: 600;
	color: var(--ot-text-2);
	font-family: var(--ot-font-primary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.e-7e93ff6e > .box > .tags > .tag > i
{
	font-size: 13px;
}

.e-7e93ff6e > .box > .tags > .tag.color-brand { background: var(--ot-brand-opacity); border-color: var(--ot-brand-opacity); color: var(--ot-brand); }
.e-7e93ff6e > .box > .tags > .tag.color-blue { background: var(--ot-blue-opacity); border-color: var(--ot-blue-opacity); color: var(--ot-blue); }
.e-7e93ff6e > .box > .tags > .tag.color-red { background: var(--ot-red-opacity); border-color: var(--ot-red-opacity); color: var(--ot-red); }
.e-7e93ff6e > .box > .tags > .tag.color-orange { background: var(--ot-orange-opacity); border-color: var(--ot-orange-opacity); color: var(--ot-orange); }
.e-7e93ff6e > .box > .tags > .tag.color-green { background: var(--ot-green-opacity); border-color: var(--ot-green-opacity); color: var(--ot-green); }

/* ===== NOTICE ===== */

.e-7e93ff6e > .box > .notice
{
	display: flex;
	align-items: flex-start;
	gap: var(--ot-spacing-s);
	padding: var(--ot-spacing-s) var(--ot-spacing-m);
	border-radius: var(--ot-radius-m);
	font-size: 12.5px;
	line-height: 1.5;
	font-family: var(--ot-font-primary);
}

.e-7e93ff6e > .box > .notice > i
{
	font-size: 18px;
	flex-shrink: 0;
	margin-top: 1px;
}

.e-7e93ff6e > .box > .notice.color-brand { background: var(--ot-brand-opacity); color: var(--ot-brand); }
.e-7e93ff6e > .box > .notice.color-blue { background: var(--ot-blue-opacity); color: var(--ot-blue); }
.e-7e93ff6e > .box > .notice.color-red { background: var(--ot-red-opacity); color: var(--ot-red); }
.e-7e93ff6e > .box > .notice.color-orange { background: var(--ot-orange-opacity); color: var(--ot-orange); }
.e-7e93ff6e > .box > .notice.color-green { background: var(--ot-green-opacity); color: var(--ot-green); }

/* ===== BODY ===== */

.e-7e93ff6e > .box > .body
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-s);
}

/* ===== ACTIONS ===== */

.e-7e93ff6e > .box > .actions
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-s);
}

.e-7e93ff6e > .box > .actions:empty
{
	display: none;
}

/* ===== BACKGROUND ===== */

.e-7e93ff6e > .box.bg-1 { background: var(--ot-bg-1); }
.e-7e93ff6e > .box.bg-1 > .stats { border-color: var(--ot-bg-1-border); }
.e-7e93ff6e > .box.bg-1 > .tags > .tag { background: var(--ot-bg-2); border-color: var(--ot-bg-1-border); }

.e-7e93ff6e > .box.bg-2 { background: var(--ot-bg-2); }
.e-7e93ff6e > .box.bg-2 > .stats { border-color: var(--ot-bg-2-border); }
.e-7e93ff6e > .box.bg-2 > .tags > .tag { background: var(--ot-bg-1); border-color: var(--ot-bg-2-border); }

.e-7e93ff6e > .box.bg-3 { background: var(--ot-bg-3); }
.e-7e93ff6e > .box.bg-3 > .stats { border-color: var(--ot-bg-3-border); }
.e-7e93ff6e > .box.bg-3 > .tags > .tag { background: var(--ot-bg-2); border-color: var(--ot-bg-3-border); }

.e-7e93ff6e > .box.bg-4 { background: var(--ot-bg-4); }
.e-7e93ff6e > .box.bg-4 > .stats { border-color: var(--ot-bg-4-border); }
.e-7e93ff6e > .box.bg-4 > .tags > .tag { background: var(--ot-bg-3); border-color: var(--ot-bg-4-border); }

/* ===== BORDER ===== */

.e-7e93ff6e > .box.border { border-color: var(--ot-bg-2-border); }
.e-7e93ff6e > .box.bg-1.border { border-color: var(--ot-bg-1-border); }
.e-7e93ff6e > .box.bg-2.border { border-color: var(--ot-bg-2-border); }
.e-7e93ff6e > .box.bg-3.border { border-color: var(--ot-bg-3-border); }
.e-7e93ff6e > .box.bg-4.border { border-color: var(--ot-bg-4-border); }

/* ===== SIZE ===== */

.e-7e93ff6e > .box.size-s
{
	padding: var(--ot-spacing-m);
	gap: var(--ot-spacing-s);
}

.e-7e93ff6e > .box.size-s > .header > .icon { width: 32px; height: 32px; }
.e-7e93ff6e > .box.size-s > .header > .icon > i { font-size: 18px; }
.e-7e93ff6e > .box.size-s > .header > .text > .title { font-size: 14px; }
.e-7e93ff6e > .box.size-s > .rows > .row { font-size: 12px; padding: 4px 0; }

.e-7e93ff6e > .box.size-l
{
	padding: var(--ot-spacing-l);
	gap: var(--ot-spacing-l);
}

.e-7e93ff6e > .box.size-l > .header > .icon { width: 48px; height: 48px; }
.e-7e93ff6e > .box.size-l > .header > .icon > i { font-size: 26px; }
.e-7e93ff6e > .box.size-l > .header > .text > .title { font-size: 20px; }
.e-7e93ff6e > .box.size-l > .rows > .row { font-size: 14px; padding: 8px 0; }
.e-7e93ff6e > .box.size-l > .stats > .stat > .stat-icon { width: 40px; height: 40px; font-size: 22px; }
.e-7e93ff6e > .box.size-l > .stats > .stat > .stat-text > .value { font-size: 24px; }
/* ===== CARDS ITEM ===== */

.e-7e9415d3
{
	display: contents;
}

/* Box */

.e-7e9415d3 > .box
{
	display: flex;
	flex-direction: column;
	width: 100%;
	border-radius: var(--ot-radius-l);
	border: 1px solid transparent;
	background: transparent;
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	transition: background var(--ot-transition), border-color var(--ot-transition), transform var(--ot-transition), box-shadow var(--ot-transition);
}

/* Orientation */

.e-7e9415d3 > .box.horizontal
{
	flex-direction: row;
	align-items: center;
}

/* Clickable */

.e-7e9415d3 > .box.clickable
{
	cursor: pointer;
}

/* Disabled */

.e-7e9415d3 > .box.disabled
{
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Active */

.e-7e9415d3 > .box.active
{
	border-color: var(--ot-brand);
	box-shadow: 0 0 0 3px var(--ot-brand-opacity);
}

/* ===== COVER ===== */

.e-7e9415d3 > .box > .cover
{
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--ot-bg-2);
	overflow: hidden;
	flex-shrink: 0;
}

.e-7e9415d3 > .box.horizontal > .cover
{
	width: 200px;
	aspect-ratio: auto;
	height: 100%;
	align-self: stretch;
}

.e-7e9415d3 > .box > .cover > img
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ot-transition-slow);
}

.e-7e9415d3 > .box.clickable:hover > .cover > img
{
	transform: scale(1.03);
}

.e-7e9415d3 > .box > .cover > .cover-empty
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--ot-text-3);
}

.e-7e9415d3 > .box > .cover > .cover-empty > i
{
	font-size: 48px;
	opacity: 0.5;
}

.e-7e9415d3 > .box > .cover > .badge
{
	position: absolute;
	top: var(--ot-spacing-s);
	right: var(--ot-spacing-s);
}

/* ===== BODY ===== */

.e-7e9415d3 > .box > .body
{
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	gap: var(--ot-spacing-s);
	padding: var(--ot-spacing-m);
}

.e-7e9415d3 > .box.align-center > .body
{
	align-items: center;
	text-align: center;
}

/* ===== HEAD ===== */

.e-7e9415d3 > .box > .body > .head
{
	display: flex;
	align-items: flex-start;
	gap: var(--ot-spacing-s);
	width: 100%;
}

.e-7e9415d3 > .box.align-center > .body > .head
{
	flex-direction: column;
	align-items: center;
	gap: var(--ot-spacing-s);
}

/* Icon wrap */

.e-7e9415d3 > .box > .body > .head > .icon-wrap
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: var(--ot-radius-m);
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	color: var(--ot-text-1);
}

.e-7e9415d3 > .box > .body > .head > .icon-wrap > i
{
	font-size: 20px;
}

/* Icon wrap — colors */

.e-7e9415d3 > .box > .body > .head > .icon-wrap.brand  { background: var(--ot-brand-opacity);  border-color: var(--ot-brand-border);  color: var(--ot-brand); }
.e-7e9415d3 > .box > .body > .head > .icon-wrap.blue   { background: var(--ot-blue-opacity);   border-color: var(--ot-blue-border);   color: var(--ot-blue); }
.e-7e9415d3 > .box > .body > .head > .icon-wrap.red    { background: var(--ot-red-opacity);    border-color: var(--ot-red-border);    color: var(--ot-red); }
.e-7e9415d3 > .box > .body > .head > .icon-wrap.orange { background: var(--ot-orange-opacity); border-color: var(--ot-orange-border); color: var(--ot-orange); }
.e-7e9415d3 > .box > .body > .head > .icon-wrap.green  { background: var(--ot-green-opacity);  border-color: var(--ot-green-border);  color: var(--ot-green); }

/* Icon wrap — backgrounds */

.e-7e9415d3 > .box > .body > .head > .icon-wrap.bg-1 { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); }
.e-7e9415d3 > .box > .body > .head > .icon-wrap.bg-2 { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
.e-7e9415d3 > .box > .body > .head > .icon-wrap.bg-3 { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }
.e-7e9415d3 > .box > .body > .head > .icon-wrap.bg-4 { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }

/* Head text */

.e-7e9415d3 > .box > .body > .head > .head-text
{
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	gap: 2px;
}

.e-7e9415d3 > .box > .body > .head > .head-text > .eyebrow
{
	font-size: var(--ot-size-s);
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.e-7e9415d3 > .box > .body > .head > .head-text > .title
{
	font-size: 15px;
	font-weight: 600;
	color: var(--ot-text-1);
	margin: 0;
	line-height: 1.3;
}

.e-7e9415d3 > .box > .body > .head > .head-text > .description
{
	font-size: var(--ot-size-s);
	color: var(--ot-text-2);
	margin: 0;
	line-height: 1.5;
}

/* ===== BADGE ===== */

.e-7e9415d3 > .box > .body > .head > .badge,
.e-7e9415d3 > .box > .cover > .badge
{
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border-radius: 100px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	flex-shrink: 0;
	background: var(--ot-bg-2);
	color: var(--ot-text-2);
	border: 1px solid var(--ot-bg-2-border);
}

.e-7e9415d3 .badge.brand  { background: var(--ot-brand-opacity);  color: var(--ot-brand);  border-color: var(--ot-brand-border); }
.e-7e9415d3 .badge.blue   { background: var(--ot-blue-opacity);   color: var(--ot-blue);   border-color: var(--ot-blue-border); }
.e-7e9415d3 .badge.red    { background: var(--ot-red-opacity);    color: var(--ot-red);    border-color: var(--ot-red-border); }
.e-7e9415d3 .badge.orange { background: var(--ot-orange-opacity); color: var(--ot-orange);  border-color: var(--ot-orange-border); }
.e-7e9415d3 .badge.green  { background: var(--ot-green-opacity);  color: var(--ot-green);  border-color: var(--ot-green-border); }
.e-7e9415d3 .badge.neutral { background: var(--ot-bg-2); color: var(--ot-text-2); border-color: var(--ot-bg-2-border); }

/* ===== STATS ===== */

.e-7e9415d3 > .box > .body > .stats
{
	display: flex;
	align-items: baseline;
	gap: var(--ot-spacing-s);
	flex-wrap: wrap;
}

.e-7e9415d3 > .box > .body > .stats > .value
{
	font-family: var(--ot-font-secondary);
	font-size: 28px;
	font-weight: 600;
	color: var(--ot-text-1);
	line-height: 1;
	letter-spacing: -0.02em;
	font-variation-settings: 'opsz' 144;
}

.e-7e9415d3 > .box > .body > .stats > .delta
{
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px 6px;
	border-radius: var(--ot-radius-s);
	font-size: var(--ot-size-s);
	font-weight: 700;
}

.e-7e9415d3 > .box > .body > .stats > .delta > i
{
	font-size: 13px;
}

.e-7e9415d3 > .box > .body > .stats > .delta.delta-up      { background: var(--ot-green-opacity); color: var(--ot-green); }
.e-7e9415d3 > .box > .body > .stats > .delta.delta-down    { background: var(--ot-red-opacity);   color: var(--ot-red); }
.e-7e9415d3 > .box > .body > .stats > .delta.delta-neutral { background: var(--ot-bg-2);          color: var(--ot-text-2); }

/* ===== META ===== */

.e-7e9415d3 > .box > .body > .meta
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ot-spacing-s);
}

.e-7e9415d3 > .box > .body > .meta > .meta-item
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
}

.e-7e9415d3 > .box > .body > .meta > .meta-item > i
{
	font-size: 15px;
}

/* ===== TAGS ===== */

.e-7e9415d3 > .box > .body > .tags
{
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.e-7e9415d3 > .box > .body > .tags > .tag
{
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-s);
	font-size: var(--ot-size-s);
	font-weight: 500;
	color: var(--ot-text-2);
}

/* ===== FOOTER ===== */

.e-7e9415d3 > .box > .body > .footer
{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-top: auto;
	padding-top: var(--ot-spacing-s);
}

.e-7e9415d3 > .box.align-center > .body > .footer
{
	justify-content: center;
}

/* ===== CHEVRON ===== */

.e-7e9415d3 > .box > .chevron
{
	flex-shrink: 0;
	font-size: 20px;
	color: var(--ot-text-3);
	padding: 0 var(--ot-spacing-m);
	transition: transform var(--ot-transition), color var(--ot-transition);
}

.e-7e9415d3 > .box.horizontal.clickable:hover > .chevron
{
	transform: translateX(2px);
	color: var(--ot-text-1);
}

/* ===== BACKGROUND ===== */

.e-7e9415d3 > .box.bg-1 { background: var(--ot-bg-1); }
.e-7e9415d3 > .box.bg-2 { background: var(--ot-bg-2); }
.e-7e9415d3 > .box.bg-3 { background: var(--ot-bg-3); }
.e-7e9415d3 > .box.bg-4 { background: var(--ot-bg-4); }

/* Border */

.e-7e9415d3 > .box.border              { border-color: var(--ot-bg-2-border); }
.e-7e9415d3 > .box.bg-1.border         { border-color: var(--ot-bg-1-border); }
.e-7e9415d3 > .box.bg-2.border         { border-color: var(--ot-bg-2-border); }
.e-7e9415d3 > .box.bg-3.border         { border-color: var(--ot-bg-3-border); }
.e-7e9415d3 > .box.bg-4.border         { border-color: var(--ot-bg-4-border); }

/* Hover */

.e-7e9415d3 > .box.hover.clickable:hover
{
	transform: translateY(-1px);
	border-color: var(--ot-bg-3-border);
	box-shadow: var(--ot-shadow-s);
}

.e-7e9415d3 > .box.clickable:not(.hover):hover
{
	border-color: var(--ot-bg-3-border);
}

.e-7e9415d3 > .box.bg-1.clickable:not(.hover):hover { background: var(--ot-bg-1-hover); }
.e-7e9415d3 > .box.bg-2.clickable:not(.hover):hover { background: var(--ot-bg-2-hover); }
.e-7e9415d3 > .box.bg-3.clickable:not(.hover):hover { background: var(--ot-bg-3-hover); }
.e-7e9415d3 > .box.bg-4.clickable:not(.hover):hover { background: var(--ot-bg-4-hover); }

/* Glass */

.e-7e9415d3 > .box.glass
{
	background: var(--ot-bg-1-opacity);
	border-color: var(--ot-bg-2-border);
	backdrop-filter: var(--ot-blur);
	-webkit-backdrop-filter: var(--ot-blur);
}

/* Gradient */

.e-7e9415d3 > .box.gradient
{
	background: var(--ot-bg-1);
	border: 1px solid transparent;
	background-clip: padding-box, border-box;
	background-origin: padding-box, border-box;
	background-image: linear-gradient(var(--ot-bg-1), var(--ot-bg-1)), linear-gradient(135deg, var(--ot-brand), var(--ot-blue));
}

/* ===== SIZE ===== */

.e-7e9415d3 > .box.size-s > .body
{
	padding: var(--ot-spacing-s);
	gap: var(--ot-spacing-x);
}

.e-7e9415d3 > .box.size-s > .body > .head > .icon-wrap
{
	width: 32px;
	height: 32px;
}

.e-7e9415d3 > .box.size-s > .body > .head > .icon-wrap > i
{
	font-size: 16px;
}

.e-7e9415d3 > .box.size-s > .body > .head > .head-text > .title
{
	font-size: var(--ot-size-m);
}

.e-7e9415d3 > .box.size-s > .body > .stats > .value
{
	font-size: 22px;
}

.e-7e9415d3 > .box.size-m > .body
{
	padding: var(--ot-spacing-m);
	gap: var(--ot-spacing-s);
}

.e-7e9415d3 > .box.size-l > .body
{
	padding: var(--ot-spacing-l);
	gap: var(--ot-spacing-m);
}

.e-7e9415d3 > .box.size-l > .body > .head > .icon-wrap
{
	width: 48px;
	height: 48px;
	border-radius: var(--ot-radius-l);
}

.e-7e9415d3 > .box.size-l > .body > .head > .icon-wrap > i
{
	font-size: 24px;
}

.e-7e9415d3 > .box.size-l > .body > .head > .head-text > .title
{
	font-size: 16px;
}

.e-7e9415d3 > .box.size-l > .body > .stats > .value
{
	font-size: 36px;
}

/* ===== LOADING ===== */

.e-7e9415d3 > .box.loading
{
	pointer-events: none;
}

.e-7e9415d3 > .box.loading > .body > .head > .icon-wrap,
.e-7e9415d3 > .box.loading > .body > .head > .head-text > .title,
.e-7e9415d3 > .box.loading > .body > .head > .head-text > .description,
.e-7e9415d3 > .box.loading > .body > .stats > .value,
.e-7e9415d3 > .box.loading > .cover > img
{
	background: linear-gradient(90deg, var(--ot-bg-2) 0%, var(--ot-bg-3) 50%, var(--ot-bg-2) 100%);
	background-size: 200% 100%;
	animation: e-7e9415d3-shimmer 1.4s infinite linear;
	color: transparent;
	border-color: transparent;
}

@keyframes e-7e9415d3-shimmer
{
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}

/* ===== RESPONSIVE ===== */

@media (max-width: 600px)
{
	.e-7e9415d3 > .box.horizontal
	{
		flex-direction: column;
		align-items: stretch;
	}

	.e-7e9415d3 > .box.horizontal > .cover
	{
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.e-7e9415d3 > .box.horizontal > .chevron
	{
		display: none;
	}
}
/* ===== CARDS PRICING ===== */

.e-7e10f2fa
{
	display: contents;
}

/* Box */

.e-7e10f2fa > .box
{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--ot-spacing-l);
	gap: var(--ot-spacing-l);
	background: var(--ot-bg-1);
	border: 1px solid transparent;
	border-radius: var(--ot-radius-l);
	overflow: hidden;
	transition: transform var(--ot-transition-slow), box-shadow var(--ot-transition-slow), border-color var(--ot-transition);
}

.e-7e10f2fa > .box:hover
{
	transform: translateY(-2px);
	box-shadow: var(--ot-shadow-m);
}

/* ===== RIBBON ===== */

.e-7e10f2fa > .box > .ribbon
{
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	background: var(--ot-brand);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-family: var(--ot-font-primary);
	border-radius: 0 var(--ot-radius-l) 0 var(--ot-radius-m);
}

/* ===== HEADER ===== */

.e-7e10f2fa > .box > .header
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-s);
}

/* Top (icon + badge) */

.e-7e10f2fa > .box > .header > .top
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ot-spacing-s);
}

/* Icon */

.e-7e10f2fa > .box > .header > .top > .icon
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--ot-radius-m);
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
	flex-shrink: 0;
}

.e-7e10f2fa > .box > .header > .top > .icon > i
{
	font-size: 24px;
}

/* Badge */

.e-7e10f2fa > .box > .header > .top > .badge
{
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 100px;
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
	font-size: var(--ot-size-s);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-family: var(--ot-font-primary);
	flex-shrink: 0;
}

/* Name */

.e-7e10f2fa > .box > .header > .name
{
	margin: 0;
	font-family: var(--ot-font-secondary);
	font-size: var(--ot-size-l);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--ot-text-1);
	font-variation-settings: 'opsz' 144;
	line-height: 1.2;
}

/* Description */

.e-7e10f2fa > .box > .header > .desc
{
	margin: 0;
	font-size: var(--ot-size-m);
	line-height: 1.55;
	color: var(--ot-text-2);
	font-family: var(--ot-font-primary);
}

/* Price */

.e-7e10f2fa > .box > .header > .price
{
	display: flex;
	align-items: flex-start;
	gap: 4px;
	margin-top: var(--ot-spacing-s);
	font-family: var(--ot-font-secondary);
	font-variation-settings: 'opsz' 144;
	color: var(--ot-text-1);
	line-height: 1;
}

.e-7e10f2fa > .box > .header > .price > .currency
{
	font-size: 18px;
	font-weight: 500;
	margin-top: 6px;
	color: var(--ot-text-2);
}

.e-7e10f2fa > .box > .header > .price > .amount
{
	font-size: 52px;
	font-weight: 500;
	letter-spacing: -0.03em;
}

.e-7e10f2fa > .box > .header > .price > .period
{
	font-size: 14px;
	font-weight: 500;
	color: var(--ot-text-2);
	margin-top: auto;
	margin-bottom: 8px;
	font-family: var(--ot-font-primary);
	font-variation-settings: normal;
}

/* Original price */

.e-7e10f2fa > .box > .header > .original
{
	display: inline-flex;
	align-items: center;
	font-family: var(--ot-font-primary);
	font-size: 12.5px;
	color: var(--ot-text-3);
}

.e-7e10f2fa > .box > .header > .original > .strike
{
	text-decoration: line-through;
}

/* Yearly */

.e-7e10f2fa > .box > .header > .yearly
{
	font-size: 12px;
	color: var(--ot-text-3);
	font-family: var(--ot-font-primary);
}

/* ===== FEATURES ===== */

.e-7e10f2fa > .box > .features
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-s);
	flex: 1;
	padding-top: var(--ot-spacing-l);
	border-top: 1px solid var(--ot-bg-2-border);
}

.e-7e10f2fa > .box > .features > .feature
{
	display: flex;
	align-items: flex-start;
	gap: var(--ot-spacing-s);
}

.e-7e10f2fa > .box > .features > .feature > .icon
{
	font-size: 18px;
	color: var(--ot-green);
	flex-shrink: 0;
	margin-top: 1px;
	font-variation-settings: 'FILL' 1;
}

.e-7e10f2fa > .box > .features > .feature > .text
{
	font-size: var(--ot-size-m);
	color: var(--ot-text-1);
	line-height: 1.5;
	font-family: var(--ot-font-primary);
}

/* Disabled */

.e-7e10f2fa > .box > .features > .feature.disabled > .icon
{
	color: var(--ot-text-3);
	font-variation-settings: normal;
}

.e-7e10f2fa > .box > .features > .feature.disabled > .text
{
	color: var(--ot-text-3);
	text-decoration: line-through;
	opacity: 0.7;
}

/* Highlight */

.e-7e10f2fa > .box > .features > .feature.highlight > .icon
{
	color: var(--ot-brand);
}

.e-7e10f2fa > .box > .features > .feature.highlight > .text
{
	font-weight: 600;
	color: var(--ot-text-1);
}

/* ===== ACTION ===== */

.e-7e10f2fa > .box > .action
{
	display: flex;
	margin-top: auto;
}

/* ===== TONE: HIGHLIGHTED ===== */

.e-7e10f2fa > .box.highlighted
{
	border-color: var(--ot-brand);
	box-shadow: 0 0 0 1px var(--ot-brand-opacity), 0 20px 48px -20px var(--ot-brand-opacity);
}

.e-7e10f2fa > .box.highlighted::before
{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--ot-brand) 0%, var(--ot-brand-hover) 100%);
}

.e-7e10f2fa > .box.highlighted:hover
{
	transform: translateY(-4px);
	box-shadow: 0 0 0 1px var(--ot-brand-opacity), 0 24px 56px -20px var(--ot-brand-opacity);
}

/* ===== TONE: FEATURED ===== */

.e-7e10f2fa > .box.featured
{
	background: linear-gradient(160deg, var(--ot-brand) 0%, var(--ot-brand-hover) 100%);
	border-color: var(--ot-brand);
	color: #fff;
}

.e-7e10f2fa > .box.featured::before
{
	content: '';
	position: absolute;
	top: -40%;
	right: -20%;
	width: 60%;
	height: 80%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 60%);
	pointer-events: none;
}

.e-7e10f2fa > .box.featured > .header > .top > .icon
{
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.e-7e10f2fa > .box.featured > .header > .top > .badge
{
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.e-7e10f2fa > .box.featured > .header > .name { color: #fff; }
.e-7e10f2fa > .box.featured > .header > .desc { color: rgba(255, 255, 255, 0.85); }
.e-7e10f2fa > .box.featured > .header > .price { color: #fff; }

.e-7e10f2fa > .box.featured > .header > .price > .currency,
.e-7e10f2fa > .box.featured > .header > .price > .period
{
	color: rgba(255, 255, 255, 0.85);
}

.e-7e10f2fa > .box.featured > .header > .yearly,
.e-7e10f2fa > .box.featured > .header > .original
{
	color: rgba(255, 255, 255, 0.75);
}

.e-7e10f2fa > .box.featured > .features
{
	border-top-color: rgba(255, 255, 255, 0.18);
}

.e-7e10f2fa > .box.featured > .features > .feature > .icon { color: #fff; }
.e-7e10f2fa > .box.featured > .features > .feature > .text { color: #fff; }

.e-7e10f2fa > .box.featured > .features > .feature.disabled > .icon,
.e-7e10f2fa > .box.featured > .features > .feature.disabled > .text
{
	color: rgba(255, 255, 255, 0.5);
}

.e-7e10f2fa > .box.featured > .ribbon
{
	background: #fff;
	color: var(--ot-brand);
}

/* ===== BACKGROUND ===== */

.e-7e10f2fa > .box.bg-1 { background: var(--ot-bg-1); }
.e-7e10f2fa > .box.bg-1 > .features { border-top-color: var(--ot-bg-1-border); }

.e-7e10f2fa > .box.bg-2 { background: var(--ot-bg-2); }
.e-7e10f2fa > .box.bg-2 > .features { border-top-color: var(--ot-bg-2-border); }

.e-7e10f2fa > .box.bg-3 { background: var(--ot-bg-3); }
.e-7e10f2fa > .box.bg-3 > .features { border-top-color: var(--ot-bg-3-border); }

.e-7e10f2fa > .box.bg-4 { background: var(--ot-bg-4); }
.e-7e10f2fa > .box.bg-4 > .features { border-top-color: var(--ot-bg-4-border); }

/* ===== BORDER ===== */

.e-7e10f2fa > .box.border { border-color: var(--ot-bg-2-border); }
.e-7e10f2fa > .box.bg-1.border { border-color: var(--ot-bg-1-border); }
.e-7e10f2fa > .box.bg-2.border { border-color: var(--ot-bg-2-border); }
.e-7e10f2fa > .box.bg-3.border { border-color: var(--ot-bg-3-border); }
.e-7e10f2fa > .box.bg-4.border { border-color: var(--ot-bg-4-border); }

.e-7e10f2fa > .box.highlighted.border,
.e-7e10f2fa > .box.highlighted
{
	border-color: var(--ot-brand);
}

/* ===== SIZE ===== */

.e-7e10f2fa > .box.size-s
{
	padding: var(--ot-spacing-m);
	gap: var(--ot-spacing-m);
}

.e-7e10f2fa > .box.size-s > .header > .top > .icon { width: 36px; height: 36px; }
.e-7e10f2fa > .box.size-s > .header > .top > .icon > i { font-size: 20px; }
.e-7e10f2fa > .box.size-s > .header > .name { font-size: 18px; }
.e-7e10f2fa > .box.size-s > .header > .price > .amount { font-size: 40px; }
.e-7e10f2fa > .box.size-s > .header > .price > .currency { font-size: 15px; margin-top: 4px; }
.e-7e10f2fa > .box.size-s > .header > .price > .period { font-size: 12px; margin-bottom: 6px; }
.e-7e10f2fa > .box.size-s > .features { padding-top: var(--ot-spacing-m); }
.e-7e10f2fa > .box.size-s > .features > .feature > .text { font-size: 12.5px; }

.e-7e10f2fa > .box.size-l
{
	padding: var(--ot-spacing-l);
	gap: var(--ot-spacing-l);
}

.e-7e10f2fa > .box.size-l > .header > .top > .icon { width: 52px; height: 52px; }
.e-7e10f2fa > .box.size-l > .header > .top > .icon > i { font-size: 28px; }
.e-7e10f2fa > .box.size-l > .header > .name { font-size: 28px; }
.e-7e10f2fa > .box.size-l > .header > .desc { font-size: 14px; }
.e-7e10f2fa > .box.size-l > .header > .price > .amount { font-size: 72px; letter-spacing: -0.035em; }
.e-7e10f2fa > .box.size-l > .header > .price > .currency { font-size: 22px; margin-top: 10px; }
.e-7e10f2fa > .box.size-l > .header > .price > .period { font-size: 16px; margin-bottom: 10px; }
.e-7e10f2fa > .box.size-l > .features > .feature > .text { font-size: 14px; }
/* ===== CARDS PROFILE ===== */

.e-7dbb0917
{
	display: contents;
}

/* Box */

.e-7dbb0917 > .box
{
	position: relative;
	display: flex;
	width: 100%;
	border-radius: var(--ot-radius-l);
	overflow: hidden;
	transition: border-color var(--ot-transition), box-shadow var(--ot-transition), transform var(--ot-transition);
}

.e-7dbb0917 > .box.vertical
{
	flex-direction: column;
}

.e-7dbb0917 > .box.horizontal
{
	flex-direction: row;
	align-items: center;
	gap: var(--ot-spacing-m);
}

/* Link overlay */

.e-7dbb0917 > .box > .link
{
	position: absolute;
	inset: 0;
	z-index: 1;
}

.e-7dbb0917 > .box:has(> .link):hover
{
	transform: translateY(-2px);
	box-shadow: var(--ot-shadow-m);
}

/* Cover */

.e-7dbb0917 > .box > .cover
{
	height: 120px;
	background-size: cover;
	background-position: center;
	background-color: var(--ot-bg-3);
}

.e-7dbb0917 > .box.horizontal > .cover
{
	display: none;
}

/* Body */

.e-7dbb0917 > .box > .body
{
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-m);
	padding: var(--ot-spacing-l);
	flex: 1;
	min-width: 0;
}

/* Cover offset */

.e-7dbb0917 > .box.vertical:has(> .cover) > .body
{
	margin-top: -36px;
}

/* Head */

.e-7dbb0917 > .box > .body > .head
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-m);
	min-width: 0;
}

/* Avatar */

.e-7dbb0917 > .box > .body > .head > .avatar
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--ot-bg-3);
	background-size: cover;
	background-position: center;
	border: 3px solid var(--ot-bg-1);
	box-shadow: var(--ot-shadow-s);
	flex-shrink: 0;
}

.e-7dbb0917 > .box > .body > .head > .avatar > i
{
	font-size: 28px;
	color: var(--ot-text-3);
}

/* Identity */

.e-7dbb0917 > .box > .body > .head > .identity
{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.e-7dbb0917 > .box > .body > .head > .identity > .name
{
	display: flex;
	align-items: center;
	gap: 5px;
	font-family: var(--ot-font-secondary);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--ot-text-1);
	line-height: 1.2;
	font-variation-settings: 'opsz' 144;
}

.e-7dbb0917 > .box > .body > .head > .identity > .name > .verified
{
	font-size: 15px;
	color: var(--ot-blue);
	font-variation-settings: 'FILL' 1;
}

.e-7dbb0917 > .box > .body > .head > .identity > .role
{
	font-size: 12px;
	color: var(--ot-text-2);
}

/* Description */

.e-7dbb0917 > .box > .body > .description
{
	margin: 0;
	font-size: var(--ot-size-m);
	line-height: 1.55;
	color: var(--ot-text-2);
}

/* Tags */

.e-7dbb0917 > .box > .body > .tags
{
	display: flex;
	flex-wrap: wrap;
	gap: var(--ot-spacing-x);
}

.e-7dbb0917 > .box > .body > .tags > .tag
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 9px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 100px;
	font-size: var(--ot-size-s);
	font-weight: 600;
	color: var(--ot-text-2);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.e-7dbb0917 > .box > .body > .tags > .tag > i
{
	font-size: 13px;
}

/* Meta */

.e-7dbb0917 > .box > .body > .meta
{
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
}

/* Stats */

.e-7dbb0917 > .box > .body > .stats
{
	display: flex;
	gap: var(--ot-spacing-l);
	padding: var(--ot-spacing-m) 0;
	border-top: 1px solid var(--ot-bg-2-border);
	border-bottom: 1px solid var(--ot-bg-2-border);
}

.e-7dbb0917 > .box > .body > .stats > .stat > .num
{
	font-family: var(--ot-font-secondary);
	font-size: 18px;
	font-weight: 600;
	color: var(--ot-text-1);
	line-height: 1;
	font-variation-settings: 'opsz' 144;
	margin-bottom: 3px;
}

.e-7dbb0917 > .box > .body > .stats > .stat > .label
{
	font-size: 10px;
	font-weight: 600;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Socials */

.e-7dbb0917 > .box > .body > .socials
{
	display: flex;
	gap: var(--ot-spacing-s);
}

.e-7dbb0917 > .box > .body > .socials > .social
{
	position: relative;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ot-height-m);
	height: var(--ot-height-m);
	border-radius: var(--ot-radius-m);
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	color: var(--ot-text-2);
	text-decoration: none;
	transition: background var(--ot-transition-fast), color var(--ot-transition-fast), border-color var(--ot-transition-fast), transform var(--ot-transition-fast);
}

.e-7dbb0917 > .box > .body > .socials > .social:hover
{
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
	border-color: var(--ot-brand);
	transform: translateY(-1px);
}

.e-7dbb0917 > .box > .body > .socials > .social > i
{
	font-size: 16px;
}

/* Actions */

.e-7dbb0917 > .box > .body > .actions
{
	position: relative;
	z-index: 3;
	display: flex;
	gap: var(--ot-spacing-s);
}

/* Follow */

.e-7dbb0917 > .box > .body > .follow
{
	position: relative;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ot-spacing-x);
	height: var(--ot-height-m);
	padding: 0 var(--ot-spacing-m);
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 100px;
	font-size: var(--ot-size-m);
	font-weight: 600;
	color: var(--ot-text-1);
	cursor: pointer;
	transition: background var(--ot-transition), border-color var(--ot-transition), color var(--ot-transition), transform var(--ot-transition);
	align-self: flex-start;
}

.e-7dbb0917 > .box > .body > .follow:hover
{
	border-color: var(--ot-text-1);
	transform: translateY(-1px);
}

.e-7dbb0917 > .box > .body > .follow > i
{
	font-size: 16px;
}

.e-7dbb0917 > .box > .body > .follow.active
{
	background: var(--ot-text-1);
	border-color: var(--ot-text-1);
	color: var(--ot-bg-1);
}

/* ===== HORIZONTAL ===== */

.e-7dbb0917 > .box.horizontal > .body
{
	padding: var(--ot-spacing-m);
	gap: var(--ot-spacing-s);
}

.e-7dbb0917 > .box.horizontal > .body > .stats
{
	padding: 0;
	border: none;
	gap: var(--ot-spacing-m);
}

/* ===== BACKGROUND ===== */

.e-7dbb0917 > .box.bg-1 { background: var(--ot-bg-1); }
.e-7dbb0917 > .box.bg-1 .avatar { border-color: var(--ot-bg-1); }
.e-7dbb0917 > .box.bg-1 .tag { background: var(--ot-bg-2); border-color: var(--ot-bg-1-border); }
.e-7dbb0917 > .box.bg-1 .social { background: var(--ot-bg-2); border-color: var(--ot-bg-1-border); }
.e-7dbb0917 > .box.bg-1 .stats { border-color: var(--ot-bg-1-border); }

.e-7dbb0917 > .box.bg-2 { background: var(--ot-bg-2); }
.e-7dbb0917 > .box.bg-2 .avatar { border-color: var(--ot-bg-2); }
.e-7dbb0917 > .box.bg-2 .tag { background: var(--ot-bg-1); border-color: var(--ot-bg-2-border); }
.e-7dbb0917 > .box.bg-2 .social { background: var(--ot-bg-1); border-color: var(--ot-bg-2-border); }
.e-7dbb0917 > .box.bg-2 .stats { border-color: var(--ot-bg-2-border); }

.e-7dbb0917 > .box.bg-3 { background: var(--ot-bg-3); }
.e-7dbb0917 > .box.bg-3 .avatar { border-color: var(--ot-bg-3); }
.e-7dbb0917 > .box.bg-3 .tag { background: var(--ot-bg-2); border-color: var(--ot-bg-3-border); }
.e-7dbb0917 > .box.bg-3 .social { background: var(--ot-bg-2); border-color: var(--ot-bg-3-border); }
.e-7dbb0917 > .box.bg-3 .stats { border-color: var(--ot-bg-3-border); }

.e-7dbb0917 > .box.bg-4 { background: var(--ot-bg-4); }
.e-7dbb0917 > .box.bg-4 .avatar { border-color: var(--ot-bg-4); }
.e-7dbb0917 > .box.bg-4 .tag { background: var(--ot-bg-3); border-color: var(--ot-bg-4-border); }
.e-7dbb0917 > .box.bg-4 .social { background: var(--ot-bg-3); border-color: var(--ot-bg-4-border); }
.e-7dbb0917 > .box.bg-4 .stats { border-color: var(--ot-bg-4-border); }

/* Border */

.e-7dbb0917 > .box.border { border: 1px solid var(--ot-bg-2-border); }
.e-7dbb0917 > .box.bg-1.border { border-color: var(--ot-bg-1-border); }
.e-7dbb0917 > .box.bg-2.border { border-color: var(--ot-bg-2-border); }
.e-7dbb0917 > .box.bg-3.border { border-color: var(--ot-bg-3-border); }
.e-7dbb0917 > .box.bg-4.border { border-color: var(--ot-bg-4-border); }

/* ===== SIZE ===== */

/* Small */

.e-7dbb0917 > .box.size-s > .body
{
	padding: var(--ot-spacing-m);
	gap: var(--ot-spacing-s);
}

.e-7dbb0917 > .box.size-s .avatar { width: 44px; height: 44px; }
.e-7dbb0917 > .box.size-s .avatar > i { font-size: 22px; }
.e-7dbb0917 > .box.size-s .identity > .name { font-size: 15px; }
.e-7dbb0917 > .box.size-s .identity > .role { font-size: var(--ot-size-s); }
.e-7dbb0917 > .box.size-s .description { font-size: 12px; }
.e-7dbb0917 > .box.size-s .stats > .stat > .num { font-size: 16px; }
.e-7dbb0917 > .box.size-s.vertical:has(> .cover) > .body { margin-top: -28px; }

/* Medium */

.e-7dbb0917 > .box.size-m > .body
{
	padding: var(--ot-spacing-l);
	gap: var(--ot-spacing-m);
}

.e-7dbb0917 > .box.size-m .avatar { width: 56px; height: 56px; }
.e-7dbb0917 > .box.size-m .avatar > i { font-size: 28px; }
.e-7dbb0917 > .box.size-m .identity > .name { font-size: 17px; }

/* Large */

.e-7dbb0917 > .box.size-l > .body
{
	padding: var(--ot-spacing-l);
	gap: var(--ot-spacing-m);
}

.e-7dbb0917 > .box.size-l .avatar { width: 72px; height: 72px; }
.e-7dbb0917 > .box.size-l .avatar > i { font-size: 36px; }
.e-7dbb0917 > .box.size-l .identity > .name { font-size: 20px; }
.e-7dbb0917 > .box.size-l .identity > .role { font-size: var(--ot-size-m); }
.e-7dbb0917 > .box.size-l .description { font-size: 14px; }
.e-7dbb0917 > .box.size-l .stats > .stat > .num { font-size: var(--ot-size-l); }
.e-7dbb0917 > .box.size-l.vertical:has(> .cover) > .body { margin-top: -44px; }
.e-7dbb0917 > .box.size-l > .cover { height: 140px; }
/* ===== CARDS SHARE ===== */

.e-54760d1f
{
	display: contents;
}

/* Box */

.e-54760d1f > .box
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-m);
	width: 100%;
	padding: var(--ot-spacing-l);
	border-radius: var(--ot-radius-l);
}

/* Title */

.e-54760d1f > .box > .title
{
	font-size: var(--ot-size-s);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ot-text-3);
	font-family: var(--ot-font-primary);
}

/* Actions */

.e-54760d1f > .box > .actions
{
	display: flex;
	gap: var(--ot-spacing-s);
	flex-wrap: wrap;
}

/* Action button */

.e-54760d1f > .box > .actions > .action
{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ot-spacing-x);
	min-width: 38px;
	height: 38px;
	padding: 0 var(--ot-spacing-s);
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 100px;
	color: var(--ot-text-2);
	cursor: pointer;
	font-family: var(--ot-font-primary);
	font-size: 12.5px;
	font-weight: 600;
	outline: none;
	transition: background var(--ot-transition), border-color var(--ot-transition), color var(--ot-transition), transform var(--ot-transition);
}

.e-54760d1f > .box > .actions > .action:hover
{
	background: var(--ot-bg-2-hover);
	color: var(--ot-text-1);
	transform: translateY(-1px);
}

.e-54760d1f > .box > .actions > .action:active
{
	transform: translateY(0) scale(0.95);
	transition-duration: 100ms;
}

.e-54760d1f > .box > .actions > .action > i
{
	font-size: 17px;
	transition: transform var(--ot-transition);
}

.e-54760d1f > .box > .actions > .action > .count
{
	font-variant-numeric: tabular-nums;
}

/* Copied state */

.e-54760d1f > .box > .actions > .action.copied
{
	background: var(--ot-green-opacity);
	border-color: var(--ot-green);
	color: var(--ot-green);
}

.e-54760d1f > .box > .actions > .action.copied > i
{
	animation: e-54760d1f-pop 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes e-54760d1f-pop
{
	0% { transform: scale(0.5); opacity: 0; }
	60% { transform: scale(1.2); opacity: 1; }
	100% { transform: scale(1); }
}

/* Saved state */

.e-54760d1f > .box > .actions > .action.saved
{
	background: var(--ot-text-1);
	border-color: var(--ot-text-1);
	color: var(--ot-bg-1);
}

.e-54760d1f > .box > .actions > .action.saved > i
{
	font-variation-settings: 'FILL' 1;
	animation: e-54760d1f-pop 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Liked state */

.e-54760d1f > .box > .actions > .action.liked
{
	background: var(--ot-brand);
	border-color: var(--ot-brand);
	color: #fff;
}

.e-54760d1f > .box > .actions > .action.liked > i
{
	font-variation-settings: 'FILL' 1;
	animation: e-54760d1f-heart 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes e-54760d1f-heart
{
	0% { transform: scale(1); }
	30% { transform: scale(0.7); }
	60% { transform: scale(1.3); }
	100% { transform: scale(1); }
}

/* Platforms */

.e-54760d1f > .box > .platforms
{
	display: flex;
	gap: var(--ot-spacing-s);
	padding-top: var(--ot-spacing-m);
	border-top: 1px solid var(--ot-bg-2-border);
	flex-wrap: wrap;
}

.e-54760d1f > .box > .platforms > .platform
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	color: var(--ot-text-2);
	text-decoration: none;
	transition: background var(--ot-transition), border-color var(--ot-transition), color var(--ot-transition), transform var(--ot-transition);
}

.e-54760d1f > .box > .platforms > .platform > i
{
	font-size: 17px;
}

.e-54760d1f > .box > .platforms > .platform > svg
{
	width: 16px;
	height: 16px;
	display: block;
}

.e-54760d1f > .box > .platforms > .platform:hover
{
	transform: translateY(-2px);
}

.e-54760d1f > .box > .platforms > .platform[data-platform="twitter"]:hover { background: #1DA1F2; border-color: #1DA1F2; color: #fff; }
.e-54760d1f > .box > .platforms > .platform[data-platform="facebook"]:hover { background: #1877F2; border-color: #1877F2; color: #fff; }
.e-54760d1f > .box > .platforms > .platform[data-platform="linkedin"]:hover { background: #0A66C2; border-color: #0A66C2; color: #fff; }
.e-54760d1f > .box > .platforms > .platform[data-platform="whatsapp"]:hover { background: #25D366; border-color: #25D366; color: #fff; }
.e-54760d1f > .box > .platforms > .platform[data-platform="telegram"]:hover { background: #26A5E4; border-color: #26A5E4; color: #fff; }
.e-54760d1f > .box > .platforms > .platform[data-platform="email"]:hover { background: var(--ot-text-1); border-color: var(--ot-text-1); color: var(--ot-bg-1); }

/* ===== ORIENTATION: VERTICAL ===== */

.e-54760d1f > .box.vertical > .actions
{
	flex-direction: column;
	align-items: stretch;
}

.e-54760d1f > .box.vertical > .actions > .action
{
	justify-content: center;
}

.e-54760d1f > .box.vertical > .platforms
{
	flex-direction: column;
	align-items: stretch;
}

.e-54760d1f > .box.vertical > .platforms > .platform
{
	width: 100%;
	height: 38px;
	border-radius: var(--ot-radius-m);
	justify-content: center;
	gap: var(--ot-spacing-s);
}

/* ===== VARIANT: INLINE ===== */

.e-54760d1f > .box.inline
{
	padding: 0;
	background: transparent !important;
	border: none !important;
	border-radius: 0;
	flex-direction: row;
	align-items: center;
	gap: var(--ot-spacing-m);
}

.e-54760d1f > .box.inline > .title
{
	margin: 0;
}

.e-54760d1f > .box.inline > .platforms
{
	padding-top: 0;
	border-top: none;
	border-left: 1px solid var(--ot-bg-2-border);
	padding-left: var(--ot-spacing-m);
}

/* ===== VARIANT: COMPACT ===== */

.e-54760d1f > .box.compact
{
	padding: var(--ot-spacing-s);
	gap: var(--ot-spacing-x);
}

.e-54760d1f > .box.compact > .title
{
	display: none;
}

.e-54760d1f > .box.compact > .actions > .action
{
	min-width: 34px;
	height: 34px;
	padding: 0 var(--ot-spacing-x);
}

/* ===== BACKGROUND ===== */

.e-54760d1f > .box.bg-1 { background: var(--ot-bg-1); }
.e-54760d1f > .box.bg-1 > .actions > .action { background: var(--ot-bg-2); border-color: var(--ot-bg-1-border); }
.e-54760d1f > .box.bg-1 > .actions > .action:hover { background: var(--ot-bg-1-hover); }
.e-54760d1f > .box.bg-1 > .platforms { border-color: var(--ot-bg-1-border); }
.e-54760d1f > .box.bg-1 > .platforms > .platform { background: var(--ot-bg-2); border-color: var(--ot-bg-1-border); }

.e-54760d1f > .box.bg-2 { background: var(--ot-bg-2); }
.e-54760d1f > .box.bg-2 > .actions > .action { background: var(--ot-bg-1); border-color: var(--ot-bg-2-border); }
.e-54760d1f > .box.bg-2 > .actions > .action:hover { background: var(--ot-bg-2-hover); }
.e-54760d1f > .box.bg-2 > .platforms { border-color: var(--ot-bg-2-border); }
.e-54760d1f > .box.bg-2 > .platforms > .platform { background: var(--ot-bg-1); border-color: var(--ot-bg-2-border); }

.e-54760d1f > .box.bg-3 { background: var(--ot-bg-3); }
.e-54760d1f > .box.bg-3 > .actions > .action { background: var(--ot-bg-2); border-color: var(--ot-bg-3-border); }
.e-54760d1f > .box.bg-3 > .actions > .action:hover { background: var(--ot-bg-3-hover); }
.e-54760d1f > .box.bg-3 > .platforms { border-color: var(--ot-bg-3-border); }
.e-54760d1f > .box.bg-3 > .platforms > .platform { background: var(--ot-bg-2); border-color: var(--ot-bg-3-border); }

.e-54760d1f > .box.bg-4 { background: var(--ot-bg-4); }
.e-54760d1f > .box.bg-4 > .actions > .action { background: var(--ot-bg-3); border-color: var(--ot-bg-4-border); }
.e-54760d1f > .box.bg-4 > .actions > .action:hover { background: var(--ot-bg-4-hover); }
.e-54760d1f > .box.bg-4 > .platforms { border-color: var(--ot-bg-4-border); }
.e-54760d1f > .box.bg-4 > .platforms > .platform { background: var(--ot-bg-3); border-color: var(--ot-bg-4-border); }

/* ===== VARIANT: BORDER ===== */

.e-54760d1f > .box.border { border: 1px solid var(--ot-bg-2-border); }
.e-54760d1f > .box.bg-1.border { border-color: var(--ot-bg-1-border); }
.e-54760d1f > .box.bg-2.border { border-color: var(--ot-bg-2-border); }
.e-54760d1f > .box.bg-3.border { border-color: var(--ot-bg-3-border); }
.e-54760d1f > .box.bg-4.border { border-color: var(--ot-bg-4-border); }

/* ===== SIZE ===== */

.e-54760d1f > .box.size-s
{
	padding: var(--ot-spacing-m);
	gap: var(--ot-spacing-s);
}

.e-54760d1f > .box.size-s > .actions > .action
{
	min-width: 32px;
	height: 32px;
	font-size: var(--ot-size-s);
}

.e-54760d1f > .box.size-s > .actions > .action > i
{
	font-size: 15px;
}

.e-54760d1f > .box.size-s > .platforms > .platform
{
	width: 32px;
	height: 32px;
}

.e-54760d1f > .box.size-s > .platforms > .platform > i
{
	font-size: 15px;
}

.e-54760d1f > .box.size-s > .platforms > .platform > svg
{
	width: 14px;
	height: 14px;
}

.e-54760d1f > .box.size-l
{
	padding: var(--ot-spacing-l);
	gap: var(--ot-spacing-l);
}

.e-54760d1f > .box.size-l > .title
{
	font-size: 12.5px;
}

.e-54760d1f > .box.size-l > .actions > .action
{
	min-width: 44px;
	height: 44px;
	padding: 0 var(--ot-spacing-m);
	font-size: 13.5px;
}

.e-54760d1f > .box.size-l > .actions > .action > i
{
	font-size: 19px;
}

.e-54760d1f > .box.size-l > .platforms > .platform
{
	width: 44px;
	height: 44px;
}

.e-54760d1f > .box.size-l > .platforms > .platform > i
{
	font-size: 19px;
}

.e-54760d1f > .box.size-l > .platforms > .platform > svg
{
	width: 18px;
	height: 18px;
}
/* Root */

.e-7e98a114
{
	display: flex;
	width: 100%;
}

/* Holder */

.e-7e98a114 > .box
{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	border-radius: var(--ot-radius-l);
	border: 1px solid transparent;
	background: transparent;
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	transition: background var(--ot-transition), border-color var(--ot-transition), transform var(--ot-transition), box-shadow var(--ot-transition);
}

.e-7e98a114 > .box.horizontal
{
	flex-direction: row;
	align-items: stretch;
}

.e-7e98a114 > .box.clickable
{
	cursor: pointer;
}

.e-7e98a114 > .box.disabled
{
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.e-7e98a114 > .box.active
{
	border-color: var(--ot-brand);
	box-shadow: 0 0 0 3px var(--ot-brand-opacity);
}

/* ===== BODY ===== */

.e-7e98a114 > .box > .body
{
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	gap: var(--ot-spacing-s);
	padding: var(--ot-spacing-m);
	z-index: 1;
}

/* ===== HEAD ===== */

.e-7e98a114 > .box > .body > .head
{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--ot-spacing-s);
	width: 100%;
}

.e-7e98a114 > .box > .body > .head > .head-text
{
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.e-7e98a114 > .box > .body > .head > .head-text > .label
{
	font-family: var(--ot-font-primary);
	font-size: 11px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1.4;
}

/* Icon wrap */

.e-7e98a114 > .box > .body > .head > .icon-wrap
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: var(--ot-radius-m);
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	color: var(--ot-text-1);
}

.e-7e98a114 > .box > .body > .head > .icon-wrap > i
{
	font-size: 18px;
}

.e-7e98a114 > .box > .body > .head > .icon-wrap.brand
{
	background: var(--ot-brand-opacity);
	border-color: var(--ot-brand-border);
	color: var(--ot-brand);
}

.e-7e98a114 > .box > .body > .head > .icon-wrap.blue
{
	background: var(--ot-blue-opacity);
	border-color: var(--ot-blue-border);
	color: var(--ot-blue);
}

.e-7e98a114 > .box > .body > .head > .icon-wrap.red
{
	background: var(--ot-red-opacity);
	border-color: var(--ot-red-border);
	color: var(--ot-red);
}

.e-7e98a114 > .box > .body > .head > .icon-wrap.orange
{
	background: var(--ot-orange-opacity);
	border-color: var(--ot-orange-border);
	color: var(--ot-orange);
}

.e-7e98a114 > .box > .body > .head > .icon-wrap.green
{
	background: var(--ot-green-opacity);
	border-color: var(--ot-green-border);
	color: var(--ot-green);
}

.e-7e98a114 > .box > .body > .head > .icon-wrap.bg-1 { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); }
.e-7e98a114 > .box > .body > .head > .icon-wrap.bg-2 { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
.e-7e98a114 > .box > .body > .head > .icon-wrap.bg-3 { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }
.e-7e98a114 > .box > .body > .head > .icon-wrap.bg-4 { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }

/* ===== VALUE ROW ===== */

.e-7e98a114 > .box > .body > .value-row
{
	display: flex;
	align-items: baseline;
	gap: var(--ot-spacing-s);
	flex-wrap: wrap;
}

.e-7e98a114 > .box > .body > .value-row > .value
{
	font-family: var(--ot-font-secondary);
	font-size: 32px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--ot-text-1);
	font-variation-settings: 'opsz' 144;
}

.e-7e98a114 > .box > .body > .value-row > .delta
{
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 3px 8px;
	border-radius: var(--ot-radius-s);
	font-family: var(--ot-font-primary);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.e-7e98a114 > .box > .body > .value-row > .delta > i
{
	font-size: 14px;
}

.e-7e98a114 > .box > .body > .value-row > .delta > .delta-label
{
	font-weight: 500;
	opacity: 0.7;
}

.e-7e98a114 > .box > .body > .value-row > .delta.delta-up
{
	background: var(--ot-green-opacity);
	color: var(--ot-green);
}

.e-7e98a114 > .box > .body > .value-row > .delta.delta-down
{
	background: var(--ot-red-opacity);
	color: var(--ot-red);
}

.e-7e98a114 > .box > .body > .value-row > .delta.delta-neutral
{
	background: var(--ot-bg-2);
	color: var(--ot-text-2);
}

/* ===== DESCRIPTION ===== */

.e-7e98a114 > .box > .body > .description
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
	margin: 0;
	line-height: 1.5;
}

/* ===== SPARKLINE ===== */

.e-7e98a114 > .box > .sparkline
{
	width: 100%;
	margin-top: auto;
	padding: 0 var(--ot-spacing-m) var(--ot-spacing-s);
	pointer-events: none;
}

.e-7e98a114 > .box.horizontal > .sparkline
{
	width: 40%;
	align-self: center;
	padding: var(--ot-spacing-m);
	margin-top: 0;
}

/* ===== BACKGROUND VARIANTS ===== */

.e-7e98a114 > .box.bg-1 { background: var(--ot-bg-1); }
.e-7e98a114 > .box.bg-2 { background: var(--ot-bg-2); }
.e-7e98a114 > .box.bg-3 { background: var(--ot-bg-3); }
.e-7e98a114 > .box.bg-4 { background: var(--ot-bg-4); }

.e-7e98a114 > .box.border { border-color: var(--ot-bg-2-border); }
.e-7e98a114 > .box.bg-1.border { border-color: var(--ot-bg-1-border); }
.e-7e98a114 > .box.bg-2.border { border-color: var(--ot-bg-2-border); }
.e-7e98a114 > .box.bg-3.border { border-color: var(--ot-bg-3-border); }
.e-7e98a114 > .box.bg-4.border { border-color: var(--ot-bg-4-border); }

/* Hover lift */

.e-7e98a114 > .box.hover-lift.clickable:hover
{
	transform: translateY(-1px);
	border-color: var(--ot-bg-3-border);
	box-shadow: 0 4px 16px -8px rgba(20, 20, 30, 0.08);
}

/* Gradient */

.e-7e98a114 > .box.gradient
{
	background: var(--ot-bg-1);
	border: 1px solid transparent;
	background-clip: padding-box, border-box;
	background-origin: padding-box, border-box;
	background-image: linear-gradient(var(--ot-bg-1), var(--ot-bg-1)), linear-gradient(135deg, var(--ot-brand), var(--ot-blue));
}

/* Clickable non-lift hover */

.e-7e98a114 > .box.clickable:not(.hover-lift):hover
{
	border-color: var(--ot-bg-3-border);
}

/* ===== SIZE VARIANTS ===== */

.e-7e98a114 > .box.size-s > .body
{
	padding: var(--ot-spacing-s);
	gap: var(--ot-spacing-x);
}

.e-7e98a114 > .box.size-s > .body > .value-row > .value
{
	font-size: 22px;
}

.e-7e98a114 > .box.size-s > .body > .head > .icon-wrap
{
	width: 28px;
	height: 28px;
}

.e-7e98a114 > .box.size-s > .body > .head > .icon-wrap > i
{
	font-size: 15px;
}

.e-7e98a114 > .box.size-m > .body
{
	padding: var(--ot-spacing-m);
}

.e-7e98a114 > .box.size-l > .body
{
	padding: var(--ot-spacing-l);
	gap: var(--ot-spacing-m);
}

.e-7e98a114 > .box.size-l > .body > .value-row > .value
{
	font-size: 42px;
}

.e-7e98a114 > .box.size-l > .body > .head > .icon-wrap
{
	width: 44px;
	height: 44px;
	border-radius: var(--ot-radius-l);
}

.e-7e98a114 > .box.size-l > .body > .head > .icon-wrap > i
{
	font-size: 22px;
}

/* ===== LOADING ===== */

.e-7e98a114 > .box.loading > .body > .head > .head-text > .label,
.e-7e98a114 > .box.loading > .body > .value-row > .value,
.e-7e98a114 > .box.loading > .body > .head > .icon-wrap
{
	background: linear-gradient(90deg, var(--ot-bg-2) 0%, var(--ot-bg-3) 50%, var(--ot-bg-2) 100%);
	background-size: 200% 100%;
	animation: e-7e98a114-shimmer 1.4s infinite linear;
	color: transparent !important;
	border-color: transparent !important;
}

@keyframes e-7e98a114-shimmer
{
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}
/* ===== CHARTS BAR ===== */

.e-6f75e2cf
{
	display: contents;
}

/* Box */

.e-6f75e2cf > .box
{
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: var(--ot-spacing-m);
	border-radius: var(--ot-radius-l);
	border: 1px solid transparent;
	padding: var(--ot-spacing-l);
}

/* Inline */

.e-6f75e2cf > .box.inline
{
	padding: 0;
	background: transparent !important;
	border-color: transparent !important;
	gap: var(--ot-spacing-s);
}

/* Clean */

.e-6f75e2cf > .box.clean
{
	padding: 0;
	background: transparent !important;
	border-color: transparent !important;
}

/* ===== HEAD ===== */

.e-6f75e2cf > .box > .head
{
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.e-6f75e2cf > .box > .head > .title
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	font-weight: 600;
	color: var(--ot-text-1);
}

.e-6f75e2cf > .box > .head > .description
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
}

/* ===== CANVAS ===== */

.e-6f75e2cf > .box > .canvas
{
	position: relative;
	width: 100%;
}

/* ===== GRID ===== */

.e-6f75e2cf > .box > .canvas > .grid
{
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.e-6f75e2cf > .box > .canvas > .grid > .grid-line
{
	position: absolute;
	left: 32px;
	right: 0;
	height: 1px;
	background: var(--ot-bg-2-border);
}

.e-6f75e2cf > .box > .canvas > .grid.horizontal > .grid-line
{
	left: 0;
	right: 0;
	top: 0;
	bottom: 24px;
	width: 1px;
	height: auto;
}

.e-6f75e2cf > .box > .canvas > .grid > .grid-line > .grid-value
{
	position: absolute;
	top: 50%;
	left: -32px;
	transform: translateY(-50%);
	width: 28px;
	text-align: right;
	font-family: var(--ot-font-primary);
	font-size: 10px;
	font-weight: 600;
	color: var(--ot-text-3);
}

.e-6f75e2cf > .box > .canvas > .grid.horizontal > .grid-line > .grid-value
{
	top: auto;
	bottom: -18px;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	text-align: center;
}

/* ===== BARS ===== */

.e-6f75e2cf > .box > .canvas > .bars
{
	position: relative;
	display: flex;
	height: 100%;
	gap: var(--ot-spacing-s);
	padding-left: 36px;
}

.e-6f75e2cf > .box.horizontal > .canvas > .bars
{
	flex-direction: column;
	padding-left: 0;
	padding-bottom: 24px;
}

/* Bar wrap */

.e-6f75e2cf > .box > .canvas > .bars > .bar-wrap
{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	flex: 1;
	min-width: 0;
	cursor: pointer;
}

.e-6f75e2cf > .box.horizontal > .canvas > .bars > .bar-wrap
{
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

/* Bar value */

.e-6f75e2cf > .box > .canvas > .bars > .bar-wrap > .bar-value
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	font-weight: 700;
	color: var(--ot-text-1);
	margin-bottom: var(--ot-spacing-x);
	line-height: 1;
}

.e-6f75e2cf > .box.horizontal > .canvas > .bars > .bar-wrap > .bar-value
{
	margin-bottom: 0;
	margin-left: var(--ot-spacing-s);
	order: 2;
}

/* Bar */

.e-6f75e2cf > .box > .canvas > .bars > .bar-wrap > .bar
{
	width: 100%;
	background: var(--ot-brand);
	border-radius: var(--ot-radius-s) var(--ot-radius-s) 0 0;
	min-height: 2px;
	opacity: 0.8;
	transition: opacity var(--ot-transition), filter var(--ot-transition);
	animation: e-6f75e2cf-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	transform-origin: bottom;
}

.e-6f75e2cf > .box.horizontal > .canvas > .bars > .bar-wrap > .bar
{
	height: 16px;
	width: 0;
	border-radius: 0 var(--ot-radius-s) var(--ot-radius-s) 0;
	animation: e-6f75e2cf-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	transform-origin: left;
}

@keyframes e-6f75e2cf-rise
{
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

@keyframes e-6f75e2cf-grow
{
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

/* Bar hover / active */

.e-6f75e2cf > .box > .canvas > .bars > .bar-wrap:hover > .bar,
.e-6f75e2cf > .box > .canvas > .bars > .bar-wrap.active > .bar
{
	opacity: 1;
	filter: brightness(1.05);
}

/* Bar label */

.e-6f75e2cf > .box > .canvas > .bars > .bar-wrap > .bar-label
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	font-weight: 500;
	color: var(--ot-text-3);
	margin-top: 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	text-align: center;
}

.e-6f75e2cf > .box.horizontal > .canvas > .bars > .bar-wrap > .bar-label
{
	margin-top: 0;
	margin-right: var(--ot-spacing-s);
	order: 0;
	width: 80px;
	text-align: right;
}

/* ===== BAR COLORS ===== */

.e-6f75e2cf .bar-wrap.color-brand > .bar { background: var(--ot-brand); }
.e-6f75e2cf .bar-wrap.color-blue > .bar { background: var(--ot-blue); }
.e-6f75e2cf .bar-wrap.color-red > .bar { background: var(--ot-red); }
.e-6f75e2cf .bar-wrap.color-orange > .bar { background: var(--ot-orange); }
.e-6f75e2cf .bar-wrap.color-green > .bar { background: var(--ot-green); }

/* ===== BACKGROUND ===== */

.e-6f75e2cf > .box.bg-1 { background: var(--ot-bg-1); }
.e-6f75e2cf > .box.bg-2 { background: var(--ot-bg-2); }
.e-6f75e2cf > .box.bg-3 { background: var(--ot-bg-3); }
.e-6f75e2cf > .box.bg-4 { background: var(--ot-bg-4); }

/* Border */

.e-6f75e2cf > .box.border { border-color: var(--ot-bg-2-border); }
.e-6f75e2cf > .box.bg-1.border { border-color: var(--ot-bg-1-border); }
.e-6f75e2cf > .box.bg-2.border { border-color: var(--ot-bg-2-border); }
.e-6f75e2cf > .box.bg-3.border { border-color: var(--ot-bg-3-border); }
.e-6f75e2cf > .box.bg-4.border { border-color: var(--ot-bg-4-border); }

/* ===== SIZE ===== */

.e-6f75e2cf > .box.size-s
{
	padding: var(--ot-spacing-m);
	gap: var(--ot-spacing-s);
}

.e-6f75e2cf > .box.size-l
{
	padding: var(--ot-spacing-l);
	gap: var(--ot-spacing-l);
}
/* ===== CHARTS DONUT ===== */

.e-6965df40
{
	display: contents;
}

/* Box */

.e-6965df40 > .box
{
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: var(--ot-spacing-m);
	padding: var(--ot-spacing-l);
	border: 1px solid transparent;
	border-radius: var(--ot-radius-l);
}

/* ===== HEAD ===== */

.e-6965df40 > .box > .head
{
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.e-6965df40 > .box > .head > .title
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	font-weight: 600;
	color: var(--ot-text-1);
}

.e-6965df40 > .box > .head > .desc
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
}

/* ===== CANVAS ===== */

.e-6965df40 > .box > .canvas
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-l);
	flex-wrap: wrap;
}

/* Chart */

.e-6965df40 > .box > .canvas > .chart
{
	position: relative;
	flex-shrink: 0;
}

.e-6965df40 > .box > .canvas > .chart > svg
{
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Track */

.e-6965df40 svg .track
{
	stroke: var(--ot-bg-2);
}

/* Segments */

.e-6965df40 svg .segment
{
	cursor: pointer;
	animation: e-6965df40-draw 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	transition: stroke-width var(--ot-transition), filter var(--ot-transition);
}

.e-6965df40 svg .segment:hover
{
	filter: brightness(1.08);
}

@keyframes e-6965df40-draw
{
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Segment colors */

.e-6965df40 svg .segment.color-brand  { stroke: var(--ot-brand); }
.e-6965df40 svg .segment.color-blue   { stroke: var(--ot-blue); }
.e-6965df40 svg .segment.color-green  { stroke: var(--ot-green); }
.e-6965df40 svg .segment.color-orange { stroke: var(--ot-orange); }
.e-6965df40 svg .segment.color-red    { stroke: var(--ot-red); }

/* Center */

.e-6965df40 > .box > .canvas > .chart > .center
{
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	pointer-events: none;
}

.e-6965df40 > .box > .canvas > .chart > .center > .value
{
	font-family: var(--ot-font-secondary);
	font-size: 28px;
	font-weight: 600;
	color: var(--ot-text-1);
	line-height: 1;
	font-variation-settings: 'opsz' 144;
}

.e-6965df40 > .box > .canvas > .chart > .center > .label
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	font-weight: 600;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ===== LEGEND ===== */

.e-6965df40 > .box > .canvas > .legend
{
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	gap: var(--ot-spacing-s);
}

.e-6965df40 > .box > .canvas > .legend > .item
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	color: var(--ot-text-2);
}

.e-6965df40 > .box > .canvas > .legend > .item > .dot
{
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.e-6965df40 > .box > .canvas > .legend > .item > .name
{
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.e-6965df40 > .box > .canvas > .legend > .item > .percent
{
	font-weight: 700;
	color: var(--ot-text-1);
	flex-shrink: 0;
}

/* Legend dot colors */

.e-6965df40 .item.color-brand  > .dot { background: var(--ot-brand); }
.e-6965df40 .item.color-blue   > .dot { background: var(--ot-blue); }
.e-6965df40 .item.color-green  > .dot { background: var(--ot-green); }
.e-6965df40 .item.color-orange > .dot { background: var(--ot-orange); }
.e-6965df40 .item.color-red    > .dot { background: var(--ot-red); }

/* ===== BACKGROUND ===== */

.e-6965df40 > .box.bg-1 { background: var(--ot-bg-1); }
.e-6965df40 > .box.bg-2 { background: var(--ot-bg-2); }
.e-6965df40 > .box.bg-3 { background: var(--ot-bg-3); }
.e-6965df40 > .box.bg-4 { background: var(--ot-bg-4); }

/* Border per-bg */

.e-6965df40 > .box.border                { border-color: var(--ot-bg-2-border); }
.e-6965df40 > .box.bg-1.border           { border-color: var(--ot-bg-1-border); }
.e-6965df40 > .box.bg-2.border           { border-color: var(--ot-bg-2-border); }
.e-6965df40 > .box.bg-3.border           { border-color: var(--ot-bg-3-border); }
.e-6965df40 > .box.bg-4.border           { border-color: var(--ot-bg-4-border); }

/* ===== SIZE ===== */

.e-6965df40 > .box.size-s { padding: var(--ot-spacing-m); gap: var(--ot-spacing-s); }
.e-6965df40 > .box.size-l { padding: var(--ot-spacing-l); gap: var(--ot-spacing-l); }

/* ===== MODIFIERS ===== */

.e-6965df40 > .box.clean
{
	padding: 0;
	background: transparent !important;
	border-color: transparent !important;
}

.e-6965df40 > .box.inline
{
	padding: 0;
	background: transparent !important;
	border-color: transparent !important;
	gap: var(--ot-spacing-s);
}
/* ===== CHARTS LINE ===== */

.e-7f41cd6a
{
	display: contents;
}

/* Box */

.e-7f41cd6a > .box
{
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: var(--ot-spacing-m);
	border-radius: var(--ot-radius-l);
	border: 1px solid transparent;
	padding: var(--ot-spacing-l);
}

.e-7f41cd6a > .box.inline
{
	padding: 0;
	background: transparent !important;
	border-color: transparent !important;
	gap: var(--ot-spacing-s);
}

.e-7f41cd6a > .box.clean
{
	background: transparent !important;
	border-color: transparent !important;
	padding: 0;
}

/* ===== HEAD ===== */

.e-7f41cd6a > .box > .head
{
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.e-7f41cd6a > .box > .head > .title
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	font-weight: 600;
	color: var(--ot-text-1);
}

.e-7f41cd6a > .box > .head > .description
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
}

/* ===== CANVAS ===== */

.e-7f41cd6a > .box > .canvas
{
	width: 100%;
	position: relative;
}

.e-7f41cd6a > .box > .canvas > svg
{
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Grid */

.e-7f41cd6a > .box > .canvas > svg > .grid > .grid-line
{
	stroke: var(--ot-bg-2-border);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.e-7f41cd6a > .box > .canvas > svg > .grid > .grid-label
{
	font-family: var(--ot-font-primary);
	font-size: 10px;
	font-weight: 600;
	fill: var(--ot-text-3);
}

/* X labels */

.e-7f41cd6a > .box > .canvas > svg > .labels > .x-label
{
	font-family: var(--ot-font-primary);
	font-size: 10px;
	font-weight: 500;
	fill: var(--ot-text-3);
}

/* ===== LINE ===== */

.e-7f41cd6a > .box > .canvas > svg > .series > .line
{
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	animation: e-7f41cd6a-draw 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Area */

.e-7f41cd6a > .box > .canvas > svg > .series > .area
{
	opacity: 0.3;
	animation: e-7f41cd6a-fade 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dots */

.e-7f41cd6a > .box > .canvas > svg > .series > .dot
{
	stroke: var(--ot-bg-1);
	stroke-width: 2;
	cursor: pointer;
	transition: r var(--ot-transition);
}

.e-7f41cd6a > .box > .canvas > svg > .series > .dot:hover
{
	r: 5;
}

@keyframes e-7f41cd6a-draw
{
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes e-7f41cd6a-fade
{
	from { opacity: 0; }
	to { opacity: 0.3; }
}

/* ===== SERIES COLORS ===== */

.e-7f41cd6a .series.color-brand > .line { stroke: var(--ot-brand); }
.e-7f41cd6a .series.color-brand > .dot { fill: var(--ot-brand); }
.e-7f41cd6a .series.color-brand > .area { fill: var(--ot-brand); }
.area-start.color-brand { stop-color: var(--ot-brand); stop-opacity: 0.5; }
.area-end.color-brand { stop-color: var(--ot-brand); stop-opacity: 0; }

.e-7f41cd6a .series.color-blue > .line { stroke: var(--ot-blue); }
.e-7f41cd6a .series.color-blue > .dot { fill: var(--ot-blue); }
.e-7f41cd6a .series.color-blue > .area { fill: var(--ot-blue); }
.area-start.color-blue { stop-color: var(--ot-blue); stop-opacity: 0.5; }
.area-end.color-blue { stop-color: var(--ot-blue); stop-opacity: 0; }

.e-7f41cd6a .series.color-red > .line { stroke: var(--ot-red); }
.e-7f41cd6a .series.color-red > .dot { fill: var(--ot-red); }
.e-7f41cd6a .series.color-red > .area { fill: var(--ot-red); }
.area-start.color-red { stop-color: var(--ot-red); stop-opacity: 0.5; }
.area-end.color-red { stop-color: var(--ot-red); stop-opacity: 0; }

.e-7f41cd6a .series.color-orange > .line { stroke: var(--ot-orange); }
.e-7f41cd6a .series.color-orange > .dot { fill: var(--ot-orange); }
.e-7f41cd6a .series.color-orange > .area { fill: var(--ot-orange); }
.area-start.color-orange { stop-color: var(--ot-orange); stop-opacity: 0.5; }
.area-end.color-orange { stop-color: var(--ot-orange); stop-opacity: 0; }

.e-7f41cd6a .series.color-green > .line { stroke: var(--ot-green); }
.e-7f41cd6a .series.color-green > .dot { fill: var(--ot-green); }
.e-7f41cd6a .series.color-green > .area { fill: var(--ot-green); }
.area-start.color-green { stop-color: var(--ot-green); stop-opacity: 0.5; }
.area-end.color-green { stop-color: var(--ot-green); stop-opacity: 0; }

/* ===== LEGEND ===== */

.e-7f41cd6a > .box > .legend
{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ot-spacing-m);
}

.e-7f41cd6a > .box > .legend > .legend-item
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	color: var(--ot-text-2);
}

.e-7f41cd6a > .box > .legend > .legend-item > .dot-marker
{
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.e-7f41cd6a > .box > .legend > .legend-item.color-brand > .dot-marker { background: var(--ot-brand); }
.e-7f41cd6a > .box > .legend > .legend-item.color-blue > .dot-marker { background: var(--ot-blue); }
.e-7f41cd6a > .box > .legend > .legend-item.color-red > .dot-marker { background: var(--ot-red); }
.e-7f41cd6a > .box > .legend > .legend-item.color-orange > .dot-marker { background: var(--ot-orange); }
.e-7f41cd6a > .box > .legend > .legend-item.color-green > .dot-marker { background: var(--ot-green); }

/* ===== BACKGROUND ===== */

.e-7f41cd6a > .box.bg-1 { background: var(--ot-bg-1); }
.e-7f41cd6a > .box.bg-2 { background: var(--ot-bg-2); }
.e-7f41cd6a > .box.bg-3 { background: var(--ot-bg-3); }
.e-7f41cd6a > .box.bg-4 { background: var(--ot-bg-4); }

/* Border */

.e-7f41cd6a > .box.border { border-color: var(--ot-bg-2-border); }
.e-7f41cd6a > .box.bg-1.border { border-color: var(--ot-bg-1-border); }
.e-7f41cd6a > .box.bg-2.border { border-color: var(--ot-bg-2-border); }
.e-7f41cd6a > .box.bg-3.border { border-color: var(--ot-bg-3-border); }
.e-7f41cd6a > .box.bg-4.border { border-color: var(--ot-bg-4-border); }

/* ===== SIZE ===== */

.e-7f41cd6a > .box.size-s { padding: var(--ot-spacing-m); gap: var(--ot-spacing-s); }
.e-7f41cd6a > .box.size-m { padding: var(--ot-spacing-l); }
.e-7f41cd6a > .box.size-l { padding: var(--ot-spacing-l); gap: var(--ot-spacing-l); }
/* ===== CORE BUILDER ===== */

.e-7d599f7d
{
	display: flex;
	width: 100%;
}

/* Box */

.e-7d599f7d > .box
{
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: var(--ot-spacing-l);
}

.e-7d599f7d > .box.has-steps
{
	flex-direction: row;
	align-items: flex-start;
	gap: var(--ot-spacing-m);
}

/* Steps sidebar */

.e-7d599f7d > .box > .steps
{
	flex-shrink: 0;
	width: 260px;
	min-width: 260px;
	max-width: 260px;
	position: sticky;
	top: 0;
}

/* Main */

.e-7d599f7d > .box > .main
{
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	gap: var(--ot-spacing-l);
}

/* Sections */

.e-7d599f7d > .box > .main > .sections
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-l);
}

.e-7d599f7d > .box > .main > .sections > .step-panel
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-l);
}

/* Grid */

.e-7d599f7d .grid
{
	display: grid;
	gap: var(--ot-spacing-m);
	width: 100%;
}

/* Footer */

.e-7d599f7d > .box > .main > .footer
{
	display: flex;
	justify-content: flex-end;
}

/* ===== BACKGROUND ===== */

.e-7d599f7d > .box.bg-1 { background: var(--ot-bg-1); padding: var(--ot-spacing-l); border-radius: var(--ot-radius-m); }
.e-7d599f7d > .box.bg-2 { background: var(--ot-bg-2); padding: var(--ot-spacing-l); border-radius: var(--ot-radius-m); }
.e-7d599f7d > .box.bg-3 { background: var(--ot-bg-3); padding: var(--ot-spacing-l); border-radius: var(--ot-radius-m); }
.e-7d599f7d > .box.bg-4 { background: var(--ot-bg-4); padding: var(--ot-spacing-l); border-radius: var(--ot-radius-m); }

/* ===== BORDER ===== */

.e-7d599f7d > .box.border
{
	border: 1px solid var(--ot-bg-2-border);
	padding: var(--ot-spacing-l);
	border-radius: var(--ot-radius-m);
}

/* ===== SIZE ===== */

.e-7d599f7d > .box.size-s { gap: var(--ot-spacing-m); }
.e-7d599f7d > .box.size-s > .main { gap: var(--ot-spacing-m); }
.e-7d599f7d > .box.size-s > .main > .sections { gap: var(--ot-spacing-m); }
.e-7d599f7d > .box.size-s > .main > .sections > .step-panel { gap: var(--ot-spacing-m); }
.e-7d599f7d > .box.size-s .grid { gap: var(--ot-spacing-s); }

.e-7d599f7d > .box.size-l .grid { gap: var(--ot-spacing-l); }

/* ===== RESPONSIVE ===== */

@media (max-width: 900px)
{
	.e-7d599f7d > .box.has-steps
	{
		flex-direction: column;
	}

	.e-7d599f7d > .box > .steps
	{
		width: 100%;
		position: static;
	}

	.e-7d599f7d .grid
	{
		grid-template-columns: 1fr !important;
	}
}
/* ===== CORE REPEATER ===== */

.e-d62eba0
{
	display: flex;
	width: 100%;
}

/* Box */

.e-d62eba0 > .box
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-m);
	width: 100%;
	border-radius: var(--ot-radius-m);
	border: 1px solid transparent;
}

/* ===== ROWS ===== */

.e-d62eba0 > .box > .rows
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-s);
}

/* Row */

.e-d62eba0 > .box > .rows > .row
{
	position: relative;
	display: flex;
	align-items: stretch;
	gap: var(--ot-spacing-s);
	padding: var(--ot-spacing-s);
	border: 1px solid transparent;
	border-radius: var(--ot-radius-m);
	transition: background var(--ot-transition), border-color var(--ot-transition);
}

.e-d62eba0 > .box > .rows > .row:hover
{
	border-color: var(--ot-bg-3-border);
}

/* Reorder */

.e-d62eba0 > .box > .rows > .row > .reorder
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	gap: 2px;
	align-self: center;
}

.e-d62eba0 > .box > .rows > .row > .reorder > .action
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 18px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: var(--ot-radius-s);
	color: var(--ot-text-3);
	cursor: pointer;
	outline: none;
	transition: background var(--ot-transition), color var(--ot-transition);
}

.e-d62eba0 > .box > .rows > .row > .reorder > .action:hover:not(:disabled)
{
	background: var(--ot-bg-2);
	color: var(--ot-text-1);
}

.e-d62eba0 > .box > .rows > .row > .reorder > .action:disabled
{
	opacity: 0.3;
	cursor: not-allowed;
}

.e-d62eba0 > .box > .rows > .row > .reorder > .action > i
{
	font-size: 18px;
}

/* Number */

.e-d62eba0 > .box > .rows > .row > .number
{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	align-self: center;
	border: 1px solid transparent;
	border-radius: 50%;
	font-family: var(--ot-font-primary);
	font-size: 11px;
	font-weight: 700;
	color: var(--ot-text-2);
}

/* Fields */

.e-d62eba0 > .box > .rows > .row > .fields
{
	display: flex;
	flex: 1;
	gap: var(--ot-spacing-s);
	min-width: 0;
}

.e-d62eba0 > .box.vertical > .rows > .row > .fields
{
	flex-direction: column;
}

/* Field */

.e-d62eba0 > .box > .rows > .row > .fields > .field
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-x);
	flex: 1;
	min-width: 0;
}

.e-d62eba0 > .box > .rows > .row > .fields > .field > .field-info
{
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.e-d62eba0 > .box > .rows > .row > .fields > .field > .field-info > .field-label
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	font-weight: 600;
	color: var(--ot-text-2);
	line-height: 1.2;
}

.e-d62eba0 > .box > .rows > .row > .fields > .field > .field-info > .field-description
{
	font-family: var(--ot-font-primary);
	font-size: 10.5px;
	color: var(--ot-text-3);
	line-height: 1.3;
}

/* Hide labels on subsequent rows in horizontal mode */

.e-d62eba0 > .box.horizontal > .rows > .row:not(:first-child) .field > .field-info
{
	display: none;
}

/* Row actions */

.e-d62eba0 > .box > .rows > .row > .actions
{
	display: flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
	align-self: center;
}

.e-d62eba0 > .box > .rows > .row > .actions > .action
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: var(--ot-radius-s);
	color: var(--ot-text-3);
	cursor: pointer;
	outline: none;
	transition: background var(--ot-transition), color var(--ot-transition);
}

.e-d62eba0 > .box > .rows > .row > .actions > .action:hover
{
	background: var(--ot-bg-2);
	color: var(--ot-text-1);
}

.e-d62eba0 > .box > .rows > .row > .actions > .action.danger:hover
{
	background: var(--ot-red-opacity);
	color: var(--ot-red);
}

.e-d62eba0 > .box > .rows > .row > .actions > .action > i
{
	font-size: 16px;
}

/* ===== EMPTY ===== */

.e-d62eba0 > .box > .empty
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ot-spacing-m);
	padding: var(--ot-spacing-l);
	border: 1px dashed var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
}

.e-d62eba0 > .box > .empty > .empty-icon
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--ot-bg-2);
	color: var(--ot-text-3);
}

.e-d62eba0 > .box > .empty > .empty-icon > i
{
	font-size: 24px;
}

.e-d62eba0 > .box > .empty > .empty-text
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	color: var(--ot-text-2);
}

/* ===== FOOTER ===== */

.e-d62eba0 > .box > .footer
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ot-spacing-s);
}

.e-d62eba0 > .box > .footer > .counter
{
	font-family: var(--ot-font-primary);
	font-size: 11px;
	font-weight: 600;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.e-d62eba0 > .box > .footer > .footer-actions
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
}

/* ===== BACKGROUND ===== */

.e-d62eba0 > .box.bg-1 > .rows > .row { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); }
.e-d62eba0 > .box.bg-1 > .rows > .row:hover { background: var(--ot-bg-1-hover); }
.e-d62eba0 > .box.bg-1 > .empty { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); }
.e-d62eba0 > .box.bg-1 .number { background: var(--ot-bg-2); border-color: var(--ot-bg-1-border); }

.e-d62eba0 > .box.bg-2 > .rows > .row { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
.e-d62eba0 > .box.bg-2 > .rows > .row:hover { background: var(--ot-bg-2-hover); }
.e-d62eba0 > .box.bg-2 > .empty { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
.e-d62eba0 > .box.bg-2 .number { background: var(--ot-bg-3); border-color: var(--ot-bg-2-border); }
.e-d62eba0 > .box.bg-2 .action:hover { background: var(--ot-bg-1); }

.e-d62eba0 > .box.bg-3 > .rows > .row { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }
.e-d62eba0 > .box.bg-3 > .rows > .row:hover { background: var(--ot-bg-3-hover); }
.e-d62eba0 > .box.bg-3 > .empty { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }
.e-d62eba0 > .box.bg-3 .number { background: var(--ot-bg-4); border-color: var(--ot-bg-3-border); }
.e-d62eba0 > .box.bg-3 .action:hover { background: var(--ot-bg-2); }

.e-d62eba0 > .box.bg-4 > .rows > .row { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }
.e-d62eba0 > .box.bg-4 > .rows > .row:hover { background: var(--ot-bg-4-hover); }
.e-d62eba0 > .box.bg-4 > .empty { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }
.e-d62eba0 > .box.bg-4 .number { background: var(--ot-bg-3); border-color: var(--ot-bg-4-border); }
.e-d62eba0 > .box.bg-4 .action:hover { background: var(--ot-bg-3); }

/* ===== BORDER ===== */

.e-d62eba0 > .box.border { border-color: var(--ot-bg-2-border); padding: var(--ot-spacing-m); }
.e-d62eba0 > .box.bg-1.border { border-color: var(--ot-bg-1-border); }
.e-d62eba0 > .box.bg-2.border { border-color: var(--ot-bg-2-border); }
.e-d62eba0 > .box.bg-3.border { border-color: var(--ot-bg-3-border); }
.e-d62eba0 > .box.bg-4.border { border-color: var(--ot-bg-4-border); }

/* ===== SIZE ===== */

.e-d62eba0 > .box.size-s > .rows > .row { padding: var(--ot-spacing-x); gap: var(--ot-spacing-x); }
.e-d62eba0 > .box.size-s > .rows > .row > .fields { gap: var(--ot-spacing-x); }
.e-d62eba0 > .box.size-s .action { width: 24px; height: 24px; }
.e-d62eba0 > .box.size-s .action > i { font-size: 14px; }

.e-d62eba0 > .box.size-m > .rows > .row { padding: var(--ot-spacing-s); gap: var(--ot-spacing-s); }
.e-d62eba0 > .box.size-m > .rows > .row > .fields { gap: var(--ot-spacing-s); }

.e-d62eba0 > .box.size-l > .rows > .row { padding: var(--ot-spacing-m); gap: var(--ot-spacing-m); }
.e-d62eba0 > .box.size-l > .rows > .row > .fields { gap: var(--ot-spacing-m); }
.e-d62eba0 > .box.size-l .action { width: 32px; height: 32px; }
.e-d62eba0 > .box.size-l .action > i { font-size: 18px; }

/* ===== DISABLED ===== */

.e-d62eba0 > .box.disabled > .rows > .row
{
	opacity: 0.7;
	cursor: not-allowed;
}
/* ===== DATA FILTERS ===== */

.e-435be612
{
	display: contents;
}

/* Box */

.e-435be612 > .box
{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	border: 1px solid transparent;
	border-radius: var(--ot-radius-m);
	overflow: hidden;
}

.e-435be612 > .box.sticky
{
	position: sticky;
	top: var(--ot-spacing-m);
	max-height: calc(100vh - var(--ot-spacing-l));
}

/* ===== BACKGROUND ===== */

.e-435be612 > .box.bg-1 { background: var(--ot-bg-1); }
.e-435be612 > .box.bg-2 { background: var(--ot-bg-2); }
.e-435be612 > .box.bg-3 { background: var(--ot-bg-3); }
.e-435be612 > .box.bg-4 { background: var(--ot-bg-4); }

/* ===== BORDER ===== */

.e-435be612 > .box.border { border-color: var(--ot-bg-2-border); }
.e-435be612 > .box.bg-1.border { border-color: var(--ot-bg-1-border); }
.e-435be612 > .box.bg-2.border { border-color: var(--ot-bg-2-border); }
.e-435be612 > .box.bg-3.border { border-color: var(--ot-bg-3-border); }
.e-435be612 > .box.bg-4.border { border-color: var(--ot-bg-4-border); }

/* ===== BORDER-LEFT ===== */

.e-435be612 > .box.border-left
{
	border: none;
	border-left: 1px solid var(--ot-bg-2-border);
	border-radius: 0;
}

.e-435be612 > .box.bg-1.border-left { border-left-color: var(--ot-bg-1-border); }
.e-435be612 > .box.bg-2.border-left { border-left-color: var(--ot-bg-2-border); }
.e-435be612 > .box.bg-3.border-left { border-left-color: var(--ot-bg-3-border); }
.e-435be612 > .box.bg-4.border-left { border-left-color: var(--ot-bg-4-border); }

/* ===== MODIFIERS ===== */

.e-435be612 > .box.clean
{
	background: transparent;
	border-color: transparent;
}

/* ===== HEAD ===== */

.e-435be612 > .box > .head
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	height: 65px;
	padding: 0 var(--ot-spacing-m);
	border-bottom: 1px solid var(--ot-bg-2-border);
}

.e-435be612 > .box > .head > .head-title
{
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1;
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	font-weight: 700;
	color: var(--ot-text-1);
	min-width: 0;
}

.e-435be612 > .box > .head > .head-title > i
{
	font-size: 18px;
	color: var(--ot-text-2);
}

.e-435be612 > .box > .head > .head-title > .head-count
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: var(--ot-brand);
	color: #fff;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	margin-left: 4px;
}

.e-435be612 > .box > .head > .head-clear
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 10px;
	background: transparent;
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-s);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	font-weight: 500;
	color: var(--ot-text-2);
	cursor: pointer;
	transition: background var(--ot-transition), color var(--ot-transition), border-color var(--ot-transition);
}

.e-435be612 > .box > .head > .head-clear:hover
{
	background: var(--ot-bg-2);
	color: var(--ot-text-1);
	border-color: var(--ot-bg-3-border);
}

.e-435be612 > .box > .head > .head-clear > i
{
	font-size: 14px;
}

/* ===== GROUPS ===== */

.e-435be612 > .box > .groups
{
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	flex: 1;
}

.e-435be612 > .box > .groups > .group
{
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid var(--ot-bg-2-border);
}

.e-435be612 > .box > .groups > .group:last-child
{
	border-bottom: none;
}

/* Group head */

.e-435be612 > .box > .groups > .group > .group-head
{
	display: flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	padding: 0 var(--ot-spacing-m);
	user-select: none;
}

.e-435be612 > .box > .groups > .group > .group-head.collapsible
{
	cursor: pointer;
}

.e-435be612 > .box > .groups > .group > .group-head > .group-label
{
	font-family: var(--ot-font-primary);
	font-size: 11px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.e-435be612 > .box > .groups > .group > .group-head > .group-count
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 16px;
	padding: 0 5px;
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
	border-radius: 100px;
	font-size: 10px;
	font-weight: 700;
}

.e-435be612 > .box > .groups > .group > .group-head > .group-spacer
{
	flex: 1;
}

.e-435be612 > .box > .groups > .group > .group-head > .group-clear
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: var(--ot-radius-s);
	color: var(--ot-text-3);
	cursor: pointer;
	transition: background var(--ot-transition), color var(--ot-transition);
}

.e-435be612 > .box > .groups > .group > .group-head > .group-clear:hover
{
	background: var(--ot-red-opacity);
	color: var(--ot-red);
}

.e-435be612 > .box > .groups > .group > .group-head > .group-clear > i
{
	font-size: 14px;
}

.e-435be612 > .box > .groups > .group > .group-head > .group-chevron
{
	font-size: 18px;
	color: var(--ot-text-3);
	transition: transform var(--ot-transition);
}

.e-435be612 > .box > .groups > .group.collapsed > .group-head > .group-chevron
{
	transform: rotate(-90deg);
}

/* Group body */

.e-435be612 > .box > .groups > .group > .group-body
{
	padding: 0 var(--ot-spacing-m) var(--ot-spacing-m);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.e-435be612 > .box > .groups > .group > .group-body:first-child
{
	padding-top: var(--ot-spacing-m);
}

/* ===== OPTIONS (checkbox / radio wrappers) ===== */

.e-435be612 > .box > .groups > .group > .group-body > .options
{
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Show more */

.e-435be612 > .box > .groups > .group > .group-body > .options > .show-more
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 4px;
	padding: 6px 10px;
	background: transparent;
	border: none;
	border-radius: var(--ot-radius-s);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	font-weight: 600;
	color: var(--ot-brand);
	cursor: pointer;
	transition: background var(--ot-transition);
	align-self: flex-start;
}

.e-435be612 > .box > .groups > .group > .group-body > .options > .show-more:hover
{
	background: var(--ot-brand-opacity);
}

.e-435be612 > .box > .groups > .group > .group-body > .options > .show-more > i
{
	font-size: 16px;
}

/* ===== TAGS ===== */

.e-435be612 > .box > .groups > .group > .group-body > .tags
{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.e-435be612 > .box > .groups > .group > .group-body > .tags > .tag
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 10px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 100px;
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	font-weight: 500;
	color: var(--ot-text-2);
	cursor: pointer;
	transition: background var(--ot-transition), color var(--ot-transition), border-color var(--ot-transition);
}

.e-435be612 > .box > .groups > .group > .group-body > .tags > .tag:hover
{
	background: var(--ot-bg-3);
	color: var(--ot-text-1);
}

.e-435be612 > .box > .groups > .group > .group-body > .tags > .tag.active
{
	background: var(--ot-brand);
	border-color: var(--ot-brand);
	color: #fff;
}

.e-435be612 > .box > .groups > .group > .group-body > .tags > .tag > i
{
	font-size: 15px;
}

.e-435be612 > .box > .groups > .group > .group-body > .tags > .tag > .tag-count
{
	font-size: 11px;
	font-weight: 700;
	opacity: 0.75;
	font-variant-numeric: tabular-nums;
}

/* ===== RANGE ===== */

.e-435be612 > .box > .groups > .group > .group-body > .range
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
}

.e-435be612 > .box > .groups > .group > .group-body > .range > .range-dash
{
	color: var(--ot-text-3);
	font-weight: 500;
}

/* ===== DATE RANGE ===== */

.e-435be612 > .box > .groups > .group > .group-body > .date-range
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-s);
}

/* ===== TOGGLE ===== */

.e-435be612 > .box > .groups > .group > .group-body > .toggle-wrap
{
	padding: 4px 0;
}

/* ===== FOOT ===== */

.e-435be612 > .box > .foot
{
	padding: var(--ot-spacing-m);
	border-top: 1px solid var(--ot-bg-2-border);
}

/* ===== HORIZONTAL ===== */

.e-435be612 > .box.horizontal > .groups
{
	flex-direction: row;
	align-items: flex-start;
	gap: var(--ot-spacing-m);
	padding: var(--ot-spacing-m);
	overflow-x: auto;
	overflow-y: visible;
}

.e-435be612 > .box.horizontal > .groups > .group
{
	min-width: 200px;
	border-bottom: none;
	border-right: 1px solid var(--ot-bg-2-border);
	padding-right: var(--ot-spacing-m);
}

.e-435be612 > .box.horizontal > .groups > .group:last-child
{
	border-right: none;
	padding-right: 0;
}

.e-435be612 > .box.horizontal > .groups > .group > .group-head,
.e-435be612 > .box.horizontal > .groups > .group > .group-body
{
	padding-left: 0;
	padding-right: 0;
}
/* ===== DATA TABLE ===== */

.e-305e9281
{
	display: block;
	width: 100%;
}

/* Box */

.e-305e9281 > .box
{
	display: flex;
	flex-direction: column;
	width: 100%;
	border: 1px solid transparent;
	border-radius: var(--ot-radius-m);
	overflow: hidden;
}

/* ===== BACKGROUND ===== */

.e-305e9281 > .box.bg-1 { background: var(--ot-bg-1); }
.e-305e9281 > .box.bg-2 { background: var(--ot-bg-2); }
.e-305e9281 > .box.bg-3 { background: var(--ot-bg-3); }
.e-305e9281 > .box.bg-4 { background: var(--ot-bg-4); }

/* ===== BORDER ===== */

.e-305e9281 > .box.border { border-color: var(--ot-bg-2-border); }
.e-305e9281 > .box.bg-1.border { border-color: var(--ot-bg-1-border); }
.e-305e9281 > .box.bg-2.border { border-color: var(--ot-bg-2-border); }
.e-305e9281 > .box.bg-3.border { border-color: var(--ot-bg-3-border); }
.e-305e9281 > .box.bg-4.border { border-color: var(--ot-bg-4-border); }

/* ===== MODIFIERS ===== */

.e-305e9281 > .box.border-bottom
{
	border-color: transparent;
	border-bottom-color: var(--ot-bg-2-border);
	border-radius: 0;
}

.e-305e9281 > .box.bg-1.border-bottom { border-bottom-color: var(--ot-bg-1-border); }
.e-305e9281 > .box.bg-2.border-bottom { border-bottom-color: var(--ot-bg-2-border); }
.e-305e9281 > .box.bg-3.border-bottom { border-bottom-color: var(--ot-bg-3-border); }
.e-305e9281 > .box.bg-4.border-bottom { border-bottom-color: var(--ot-bg-4-border); }

.e-305e9281 > .box.clean
{
	border-color: transparent;
	border-radius: 0;
}

/* ===== HEAD ===== */

.e-305e9281 > .box > .head
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-m);
	padding: var(--ot-spacing-m);
	border-bottom: 1px solid var(--ot-bg-2-border);
}

.e-305e9281 > .box > .head > .head-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--ot-radius-m);
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	color: var(--ot-text-1);
	flex-shrink: 0;
}

.e-305e9281 > .box > .head > .head-icon > i
{
	font-size: 22px;
}

.e-305e9281 > .box > .head > .head-text
{
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	gap: 2px;
}

.e-305e9281 > .box > .head > .head-text > .head-title
{
	margin: 0;
	font-family: var(--ot-font-secondary);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.018em;
	color: var(--ot-text-1);
	line-height: 1.15;
	font-variation-settings: 'opsz' 144;
}

.e-305e9281 > .box > .head > .head-text > .head-description
{
	margin: 0;
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
	line-height: 1.5;
}

.e-305e9281 > .box > .head > .head-actions
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
}

/* ===== TOOLBAR ===== */

.e-305e9281 > .box > .toolbar
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-m);
	padding: var(--ot-spacing-s) var(--ot-spacing-m);
	border-bottom: 1px solid var(--ot-bg-2-border);
}

.e-305e9281 > .box > .toolbar > .toolbar-search
{
	flex: 1 1 auto;
	max-width: 320px;
}

.e-305e9281 > .box > .toolbar > .toolbar-bulk
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-m);
	margin-left: auto;
	padding: 4px var(--ot-spacing-s) 4px var(--ot-spacing-m);
	background: var(--ot-brand-opacity);
	border: 1px solid var(--ot-brand-border);
	border-radius: var(--ot-radius-s);
	animation: e-305e9281-bulk-in 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes e-305e9281-bulk-in
{
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

.e-305e9281 > .box > .toolbar > .toolbar-bulk > .toolbar-bulk-count
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	font-weight: 700;
	color: var(--ot-brand);
}

.e-305e9281 > .box > .toolbar > .toolbar-bulk > .toolbar-bulk-actions
{
	display: flex;
	align-items: center;
	gap: 2px;
}

.e-305e9281 > .box > .toolbar > .toolbar-bulk .bulk-action
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 10px;
	background: transparent;
	border: none;
	border-radius: var(--ot-radius-s);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	font-weight: 500;
	color: var(--ot-text-1);
	cursor: pointer;
	transition: background var(--ot-transition), color var(--ot-transition);
}

.e-305e9281 > .box > .toolbar > .toolbar-bulk .bulk-action:hover
{
	background: var(--ot-bg-1);
}

.e-305e9281 > .box > .toolbar > .toolbar-bulk .bulk-action.danger:hover
{
	background: var(--ot-red-opacity);
	color: var(--ot-red);
}

.e-305e9281 > .box > .toolbar > .toolbar-bulk .bulk-action > i
{
	font-size: 15px;
}

.e-305e9281 > .box > .toolbar > .toolbar-bulk .bulk-clear
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: var(--ot-radius-s);
	color: var(--ot-brand);
	cursor: pointer;
	margin-left: 4px;
}

.e-305e9281 > .box > .toolbar > .toolbar-bulk .bulk-clear:hover
{
	background: var(--ot-bg-1);
}

.e-305e9281 > .box > .toolbar > .toolbar-bulk .bulk-clear > i
{
	font-size: 16px;
}

/* ===== TABLE ===== */

.e-305e9281 > .box > .table
{
	display: flex;
	flex-direction: column;
	overflow-x: auto;
}

.e-305e9281 > .box > .table > .row,
.e-305e9281 > .box > .table > div > .row
{
	display: grid;
	align-items: center;
	min-height: 48px;
	padding: 0 var(--ot-spacing-m);
	gap: var(--ot-spacing-m);
	transition: background var(--ot-transition);
}

/* Head row */

.e-305e9281 > .box > .table > .head-row
{
	min-height: 42px;
	background: var(--ot-bg-2);
	border-bottom: 1px solid var(--ot-bg-2-border);
	position: sticky;
	top: 0;
	z-index: 2;
}

.e-305e9281 > .box.bg-2 > .table > .head-row { background: var(--ot-bg-3); }
.e-305e9281 > .box.bg-3 > .table > .head-row { background: var(--ot-bg-4); }

.e-305e9281 > .box > .table > .head-row > .cell
{
	font-family: var(--ot-font-primary);
	font-size: 11px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.e-305e9281 > .box > .table > .head-row > .head-cell
{
	display: flex;
	align-items: center;
	gap: 4px;
	user-select: none;
}

.e-305e9281 > .box > .table > .head-row > .head-cell.sortable
{
	cursor: pointer;
	transition: color var(--ot-transition);
}

.e-305e9281 > .box > .table > .head-row > .head-cell.sortable:hover
{
	color: var(--ot-text-1);
}

.e-305e9281 > .box > .table > .head-row > .head-cell.sorted
{
	color: var(--ot-brand);
}

.e-305e9281 > .box > .table > .head-row > .head-cell > .sort-icon
{
	font-size: 14px;
	opacity: 0.6;
	transition: opacity var(--ot-transition);
}

.e-305e9281 > .box > .table > .head-row > .head-cell.sortable:hover > .sort-icon
{
	opacity: 1;
}

/* Body row */

.e-305e9281 > .box > .table > div > .body-row
{
	border-bottom: 1px solid var(--ot-bg-2-border);
	cursor: default;
}

.e-305e9281 > .box > .table > div > .body-row.clickable
{
	cursor: pointer;
}

.e-305e9281 > .box > .table > div:last-child > .body-row
{
	border-bottom: none;
}

.e-305e9281 > .box > .table > div > .body-row:hover
{
	background: var(--ot-bg-2);
}

.e-305e9281 > .box.bg-2 > .table > div > .body-row:hover { background: var(--ot-bg-3); }
.e-305e9281 > .box.bg-3 > .table > div > .body-row:hover { background: var(--ot-bg-4); }

.e-305e9281 > .box > .table > div > .body-row.selected
{
	background: var(--ot-brand-opacity);
}

/* Striped */

.e-305e9281 > .box.striped > .table > div:nth-child(even) > .body-row
{
	background: var(--ot-bg-2);
}

.e-305e9281 > .box.striped.bg-2 > .table > div:nth-child(even) > .body-row
{
	background: var(--ot-bg-3);
}

/* Sticky */

.e-305e9281 > .box.sticky > .table
{
	max-height: 560px;
	overflow-y: auto;
}

/* Cells */

.e-305e9281 > .box > .table .cell
{
	min-width: 0;
	padding: 10px 0;
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	color: var(--ot-text-1);
	overflow: hidden;
	text-overflow: ellipsis;
}

.e-305e9281 > .box > .table .cell.align-left { text-align: left; }
.e-305e9281 > .box > .table .cell.align-center { text-align: center; display: flex; justify-content: center; }
.e-305e9281 > .box > .table .cell.align-right { text-align: right; display: flex; justify-content: flex-end; }

/* Select cell */

.e-305e9281 > .box > .table .select-cell
{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.e-305e9281 > .box > .table .select-cell > .select-box
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	background: var(--ot-bg-1);
	border: 1.5px solid var(--ot-bg-3-border);
	border-radius: 4px;
	color: transparent;
	cursor: pointer;
	outline: none;
	transition: background var(--ot-transition), border-color var(--ot-transition);
}

.e-305e9281 > .box > .table .select-cell > .select-box:hover
{
	border-color: var(--ot-brand);
}

.e-305e9281 > .box > .table .select-cell > .select-box.checked,
.e-305e9281 > .box > .table .select-cell > .select-box.indeterminate
{
	background: var(--ot-brand);
	border-color: var(--ot-brand);
	color: #fff;
}

.e-305e9281 > .box > .table .select-cell > .select-box > i
{
	font-size: 14px;
	font-weight: 700;
}

/* Actions cell */

.e-305e9281 > .box > .table .actions-cell
{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.e-305e9281 > .box > .table .actions-cell > .actions-trigger
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: var(--ot-radius-s);
	color: var(--ot-text-3);
	cursor: pointer;
	transition: background var(--ot-transition), color var(--ot-transition);
}

.e-305e9281 > .box > .table .actions-cell > .actions-trigger:hover
{
	background: var(--ot-bg-3);
	color: var(--ot-text-1);
}

.e-305e9281 > .box > .table .actions-cell > .actions-trigger > i
{
	font-size: 18px;
}

/* ===== EMPTY ===== */

.e-305e9281 > .box > .empty
{
	padding: var(--ot-spacing-l);
}

/* ===== LOADING SKELETON ===== */

.e-305e9281 > .box > .table .skeleton
{
	background: linear-gradient(90deg, var(--ot-bg-2) 0%, var(--ot-bg-3) 50%, var(--ot-bg-2) 100%);
	background-size: 200% 100%;
	animation: e-305e9281-shimmer 1.4s infinite linear;
	border-radius: var(--ot-radius-s);
}

.e-305e9281 > .box > .table .skeleton-line
{
	height: 14px;
	width: 80%;
}

.e-305e9281 > .box > .table .skeleton-box
{
	width: 18px;
	height: 18px;
}

@keyframes e-305e9281-shimmer
{
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}

/* ===== PAGINATION ===== */

.e-305e9281 > .box > .pagination
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ot-spacing-m);
	padding: var(--ot-spacing-s) var(--ot-spacing-l);
	border-top: 1px solid var(--ot-bg-2-border);
}

.e-305e9281 > .box > .pagination > .pagination-info
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
	font-variant-numeric: tabular-nums;
}

.e-305e9281 > .box > .pagination > .pagination-controls
{
	display: flex;
	align-items: center;
	gap: 2px;
}

.e-305e9281 > .box > .pagination > .pagination-controls > .page-btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--ot-radius-s);
	color: var(--ot-text-2);
	cursor: pointer;
	transition: background var(--ot-transition), color var(--ot-transition), border-color var(--ot-transition);
}

.e-305e9281 > .box > .pagination > .pagination-controls > .page-btn:hover:not(:disabled)
{
	background: var(--ot-bg-2);
	color: var(--ot-text-1);
	border-color: var(--ot-bg-2-border);
}

.e-305e9281 > .box > .pagination > .pagination-controls > .page-btn:disabled
{
	opacity: 0.35;
	cursor: not-allowed;
}

.e-305e9281 > .box > .pagination > .pagination-controls > .page-btn > i
{
	font-size: 18px;
}

.e-305e9281 > .box > .pagination > .pagination-controls > .page-current
{
	padding: 0 var(--ot-spacing-s);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	font-weight: 700;
	color: var(--ot-text-1);
	font-variant-numeric: tabular-nums;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 767.98px)
{
	.e-305e9281 > .box > .toolbar
	{
		flex-direction: column;
		align-items: stretch;
	}

	.e-305e9281 > .box > .toolbar > .toolbar-search
	{
		max-width: 100%;
	}

	.e-305e9281 > .box > .pagination
	{
		flex-direction: column;
		gap: var(--ot-spacing-s);
	}
}
/* ===== FORM BUTTON ===== */

.e-64e877b
{
	display: contents;
}

/* Box */

.e-64e877b > .box
{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ot-spacing-s);
	height: var(--ot-height-m);
	padding: 0 var(--ot-spacing-m);
	border: 1px solid transparent;
	border-radius: var(--ot-radius-m);
	background: transparent;
	color: var(--ot-text-1);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	outline: none;
	user-select: none;
	transition: background var(--ot-transition), border-color var(--ot-transition), color var(--ot-transition), box-shadow var(--ot-transition), transform var(--ot-transition);
}

.e-64e877b > .box:hover { transform: translateY(-1px); }
.e-64e877b > .box:active { transform: translateY(0) scale(0.97); transition-duration: 100ms; }
.e-64e877b > .box:focus-visible { box-shadow: 0 0 0 3px var(--ot-brand-opacity); }

/* Body */

.e-64e877b > .box > .body
{
	display: inline-flex;
	align-items: center;
	gap: var(--ot-spacing-s);
}

.e-64e877b > .box > .body > i
{
	font-size: 18px;
	transition: transform var(--ot-transition);
}

.e-64e877b > .box > .body > .left { margin-right: -2px; }
.e-64e877b > .box > .body > .right { margin-left: -2px; }
.e-64e877b > .box:hover > .body > .right { transform: translateX(2px); }

/* Spinner */

.e-64e877b > .box > .spin > i
{
	font-size: 18px;
	animation: e-64e877b-spin 0.8s linear infinite;
}

@keyframes e-64e877b-spin
{
	to { transform: rotate(360deg); }
}

/* States */

.e-64e877b > .box.disabled
{
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
	transform: none;
}

.e-64e877b > .box.loading
{
	cursor: wait;
	pointer-events: none;
}

/* ===== STYLE: SOLID ===== */

.e-64e877b > .box.solid.brand  { background: var(--ot-brand);  border-color: var(--ot-brand);  color: #fff; }
.e-64e877b > .box.solid.blue   { background: var(--ot-blue);   border-color: var(--ot-blue);   color: #fff; }
.e-64e877b > .box.solid.red    { background: var(--ot-red);    border-color: var(--ot-red);    color: #fff; }
.e-64e877b > .box.solid.orange { background: var(--ot-orange); border-color: var(--ot-orange); color: #fff; }
.e-64e877b > .box.solid.green  { background: var(--ot-green);  border-color: var(--ot-green);  color: #fff; }
.e-64e877b > .box.solid.dark   { background: var(--ot-text-1); border-color: var(--ot-text-1); color: var(--ot-bg-1); }

.e-64e877b > .box.solid.brand:hover  { background: var(--ot-brand-hover);  border-color: var(--ot-brand-hover); }
.e-64e877b > .box.solid.blue:hover   { background: var(--ot-blue-hover);   border-color: var(--ot-blue-hover); }
.e-64e877b > .box.solid.red:hover    { background: var(--ot-red-hover);    border-color: var(--ot-red-hover); }
.e-64e877b > .box.solid.orange:hover { background: var(--ot-orange-hover); border-color: var(--ot-orange-hover); }
.e-64e877b > .box.solid.green:hover  { background: var(--ot-green-hover);  border-color: var(--ot-green-hover); }
.e-64e877b > .box.solid.dark:hover   { background: var(--ot-text-2);       border-color: var(--ot-text-2); }

/* ===== STYLE: SOFT ===== */

.e-64e877b > .box.soft.brand  { background: var(--ot-brand-opacity);  color: var(--ot-brand); }
.e-64e877b > .box.soft.blue   { background: var(--ot-blue-opacity);   color: var(--ot-blue); }
.e-64e877b > .box.soft.red    { background: var(--ot-red-opacity);    color: var(--ot-red); }
.e-64e877b > .box.soft.orange { background: var(--ot-orange-opacity); color: var(--ot-orange); }
.e-64e877b > .box.soft.green  { background: var(--ot-green-opacity);  color: var(--ot-green); }

.e-64e877b > .box.soft.brand:hover  { background: var(--ot-brand);  color: #fff; }
.e-64e877b > .box.soft.blue:hover   { background: var(--ot-blue);   color: #fff; }
.e-64e877b > .box.soft.red:hover    { background: var(--ot-red);    color: #fff; }
.e-64e877b > .box.soft.orange:hover { background: var(--ot-orange); color: #fff; }
.e-64e877b > .box.soft.green:hover  { background: var(--ot-green);  color: #fff; }

/* ===== STYLE: OUTLINE ===== */

.e-64e877b > .box.outline.brand  { border-color: var(--ot-brand);  color: var(--ot-brand); }
.e-64e877b > .box.outline.blue   { border-color: var(--ot-blue);   color: var(--ot-blue); }
.e-64e877b > .box.outline.red    { border-color: var(--ot-red);    color: var(--ot-red); }
.e-64e877b > .box.outline.orange { border-color: var(--ot-orange); color: var(--ot-orange); }
.e-64e877b > .box.outline.green  { border-color: var(--ot-green);  color: var(--ot-green); }

.e-64e877b > .box.outline.brand:hover  { background: var(--ot-brand-opacity); }
.e-64e877b > .box.outline.blue:hover   { background: var(--ot-blue-opacity); }
.e-64e877b > .box.outline.red:hover    { background: var(--ot-red-opacity); }
.e-64e877b > .box.outline.orange:hover { background: var(--ot-orange-opacity); }
.e-64e877b > .box.outline.green:hover  { background: var(--ot-green-opacity); }

/* ===== STYLE: GHOST ===== */

.e-64e877b > .box.ghost
{
	background: transparent;
	color: var(--ot-text-2);
}

.e-64e877b > .box.ghost:hover
{
	background: var(--ot-bg-2);
	color: var(--ot-text-1);
}

/* ===== STYLE: LINK ===== */

.e-64e877b > .box.link
{
	height: auto;
	padding: 0;
	background: transparent;
	border-color: transparent;
	color: var(--ot-brand);
}

.e-64e877b > .box.link:hover
{
	background: transparent;
	color: var(--ot-brand-hover);
	transform: none;
}

.e-64e877b > .box.link:hover > .body > .text
{
	text-decoration: underline;
	text-underline-offset: 3px;
}

.e-64e877b > .box.link:active { transform: none; }

/* ===== BACKGROUND ===== */

.e-64e877b > .box.bg-1 { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); }
.e-64e877b > .box.bg-2 { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
.e-64e877b > .box.bg-3 { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }
.e-64e877b > .box.bg-4 { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }

.e-64e877b > .box.bg-1:hover { background: var(--ot-bg-1-hover); }
.e-64e877b > .box.bg-2:hover { background: var(--ot-bg-2-hover); }
.e-64e877b > .box.bg-3:hover { background: var(--ot-bg-3-hover); }
.e-64e877b > .box.bg-4:hover { background: var(--ot-bg-4-hover); }

/* Glass */

.e-64e877b > .box.glass
{
	background: var(--ot-bg-1-opacity);
	border-color: var(--ot-bg-2-border);
	backdrop-filter: var(--ot-blur);
	-webkit-backdrop-filter: var(--ot-blur);
}

.e-64e877b > .box.glass:hover { background: var(--ot-bg-2-opacity); }

/* ===== SIZE ===== */

.e-64e877b > .box.size-s
{
	height: var(--ot-height-s);
	padding: 0 var(--ot-spacing-s);
	font-size: var(--ot-size-s);
	gap: var(--ot-spacing-x);
}

.e-64e877b > .box.size-s > .body { gap: var(--ot-spacing-x); }

.e-64e877b > .box.size-s > .body > i,
.e-64e877b > .box.size-s > .spin > i { font-size: 14px; }

.e-64e877b > .box.size-l
{
	height: var(--ot-height-l);
	padding: 0 var(--ot-spacing-l);
}

.e-64e877b > .box.size-l > .body > i,
.e-64e877b > .box.size-l > .spin > i { font-size: 20px; }

/* ===== MODIFIERS ===== */

.e-64e877b > .box.full
{
	width: 100%;
}

.e-64e877b > .box.rounded
{
	border-radius: 100px;
}

.e-64e877b > .box.icon-only
{
	padding: 0;
	width: var(--ot-height-m);
	gap: 0;
}

.e-64e877b > .box.icon-only.size-s { width: var(--ot-height-s); }
.e-64e877b > .box.icon-only.size-l { width: var(--ot-height-l); }

/* Link size resets */

.e-64e877b > .box.link.size-s,
.e-64e877b > .box.link.size-l
{
	height: auto;
	padding: 0;
}
/* ===== FORM CHECKBOX ===== */

.e-f249baa
{
	display: contents;
}

/* Box */

.e-f249baa > .box
{
	position: relative;
	display: inline-flex;
	align-items: flex-start;
	gap: var(--ot-spacing-s);
	cursor: pointer;
	font-family: var(--ot-font-primary);
}

.e-f249baa > .box.reverse
{
	flex-direction: row-reverse;
}

/* Input — hidden but accessible */

.e-f249baa > .box > input
{
	position: absolute;
	opacity: 0;
	cursor: pointer;
	width: 0;
	height: 0;
	margin: 0;
}

/* Info */

.e-f249baa > .box > .info
{
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding-top: 1px;
}

.e-f249baa > .box > .info > .label
{
	font-size: var(--ot-size-m);
	font-weight: 500;
	color: var(--ot-text-1);
	line-height: 1.3;
	user-select: none;
	transition: color var(--ot-transition);
}

.e-f249baa > .box > .info > .description
{
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
	line-height: 1.4;
	user-select: none;
	transition: color var(--ot-transition);
}

/* Mark */

.e-f249baa > .box > .mark
{
	position: relative;
	display: block;
	flex-shrink: 0;
	border-radius: var(--ot-radius-s);
	border: 1px solid transparent;
	background: transparent;
	transition: background var(--ot-transition), border-color var(--ot-transition), transform var(--ot-transition-fast), box-shadow var(--ot-transition);
}

/* Checkmark */

.e-f249baa > .box > .mark::after
{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	border: solid white;
	transform: translate(-50%, -60%) rotate(45deg) scale(0);
	opacity: 0;
	transition: transform var(--ot-transition), opacity var(--ot-transition-fast);
}

.e-f249baa > .box > input:checked ~ .mark::after
{
	transform: translate(-50%, -60%) rotate(45deg) scale(1);
	opacity: 1;
}

/* Indeterminate */

.e-f249baa > .box.indeterminate > .mark::after
{
	transform: translate(-50%, -50%) rotate(0) scale(1);
	opacity: 1;
	border: none;
	background: white;
	border-radius: 1px;
}

/* Focus */

.e-f249baa > .box > input:focus-visible ~ .mark
{
	box-shadow: 0 0 0 3px var(--ot-brand-opacity);
}

/* Active */

.e-f249baa > .box:active > .mark
{
	transform: scale(0.92);
}

/* Disabled */

.e-f249baa > .box.disabled
{
	cursor: not-allowed;
}

.e-f249baa > .box.disabled > .mark
{
	opacity: 0.45;
}

.e-f249baa > .box.disabled > .info > .label,
.e-f249baa > .box.disabled > .info > .description
{
	color: var(--ot-text-3);
	opacity: 0.6;
}

/* ===== SIZE ===== */

/* Small */

.e-f249baa > .box.size-s > .mark
{
	width: 16px;
	height: 16px;
}

.e-f249baa > .box.size-s > .mark::after
{
	width: 3px;
	height: 6px;
	border-width: 0 1.5px 1.5px 0;
}

.e-f249baa > .box.size-s.indeterminate > .mark::after
{
	width: 8px;
	height: 1.5px;
}

.e-f249baa > .box.size-s > .info > .label
{
	font-size: var(--ot-size-s);
}

.e-f249baa > .box.size-s > .info > .description
{
	font-size: 10.5px;
}

.e-f249baa > .box.size-s > .icon { font-size: 16px; }

/* Medium */

.e-f249baa > .box.size-m > .mark
{
	width: 20px;
	height: 20px;
}

.e-f249baa > .box.size-m > .mark::after
{
	width: 4px;
	height: 8px;
	border-width: 0 2px 2px 0;
}

.e-f249baa > .box.size-m.indeterminate > .mark::after
{
	width: 10px;
	height: 2px;
}

.e-f249baa > .box.size-m > .info > .label
{
	font-size: var(--ot-size-m);
}

/* Large */

.e-f249baa > .box.size-l > .mark
{
	width: 24px;
	height: 24px;
}

.e-f249baa > .box.size-l > .mark::after
{
	width: 5px;
	height: 10px;
	border-width: 0 2.5px 2.5px 0;
}

.e-f249baa > .box.size-l.indeterminate > .mark::after
{
	width: 12px;
	height: 2.5px;
}

.e-f249baa > .box.size-l > .info > .label
{
	font-size: var(--ot-size-m);
}

.e-f249baa > .box.size-l > .icon { font-size: 20px; }

/* ===== BACKGROUND ===== */

.e-f249baa > .box.bg-1 > .mark { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); }
.e-f249baa > .box.bg-2 > .mark { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
.e-f249baa > .box.bg-3 > .mark { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }
.e-f249baa > .box.bg-4 > .mark { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }

.e-f249baa > .box.bg-1:hover:not(.disabled):not(.indeterminate) > input:not(:checked) ~ .mark { background: var(--ot-bg-1-hover); }
.e-f249baa > .box.bg-2:hover:not(.disabled):not(.indeterminate) > input:not(:checked) ~ .mark { background: var(--ot-bg-2-hover); }
.e-f249baa > .box.bg-3:hover:not(.disabled):not(.indeterminate) > input:not(:checked) ~ .mark { background: var(--ot-bg-3-hover); }
.e-f249baa > .box.bg-4:hover:not(.disabled):not(.indeterminate) > input:not(:checked) ~ .mark { background: var(--ot-bg-4-hover); }

/* Transparent */

.e-f249baa > .box.transparent > .mark
{
	background: transparent;
	border-color: transparent;
}

/* Border */

.e-f249baa > .box.border > .mark
{
	border-color: var(--ot-bg-2-border);
}

.e-f249baa > .box.border:hover:not(.disabled) > .mark
{
	border-color: var(--ot-text-3);
}

/* ===== COLOR (checked state) ===== */

.e-f249baa > .box > input:checked ~ .mark,
.e-f249baa > .box.indeterminate > .mark
{
	background: var(--ot-brand);
	border-color: var(--ot-brand);
}

.e-f249baa > .box.color-blue > input:checked ~ .mark,
.e-f249baa > .box.color-blue.indeterminate > .mark
{
	background: var(--ot-blue);
	border-color: var(--ot-blue);
}

.e-f249baa > .box.color-red > input:checked ~ .mark,
.e-f249baa > .box.color-red.indeterminate > .mark
{
	background: var(--ot-red);
	border-color: var(--ot-red);
}

.e-f249baa > .box.color-orange > input:checked ~ .mark,
.e-f249baa > .box.color-orange.indeterminate > .mark
{
	background: var(--ot-orange);
	border-color: var(--ot-orange);
}

.e-f249baa > .box.color-green > input:checked ~ .mark,
.e-f249baa > .box.color-green.indeterminate > .mark
{
	background: var(--ot-green);
	border-color: var(--ot-green);
}

/* Focus per color */

.e-f249baa > .box.color-blue > input:focus-visible ~ .mark { box-shadow: 0 0 0 3px var(--ot-blue-opacity); }
.e-f249baa > .box.color-red > input:focus-visible ~ .mark { box-shadow: 0 0 0 3px var(--ot-red-opacity); }
.e-f249baa > .box.color-orange > input:focus-visible ~ .mark { box-shadow: 0 0 0 3px var(--ot-orange-opacity); }
.e-f249baa > .box.color-green > input:focus-visible ~ .mark { box-shadow: 0 0 0 3px var(--ot-green-opacity); }

/* Icon */

.e-f249baa > .box > .icon
{
	font-size: 18px;
	color: var(--ot-text-2);
	flex-shrink: 0;
	align-self: center;
}

/* Count */

.e-f249baa > .box > .count
{
	margin-left: auto;
	padding-left: var(--ot-spacing-s);
	font-size: 11px;
	font-weight: 700;
	color: var(--ot-text-3);
	font-variant-numeric: tabular-nums;
	align-self: center;
}
/* ===== FORM COLOR ===== */

.e-21311850
{
	display: contents;
}

/* Box */

.e-21311850 > .box
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-s);
	width: 100%;
}

/* Field */

.e-21311850 > .box > .field
{
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	width: 100%;
	padding: 0 var(--ot-spacing-s);
	border: 1px solid transparent;
	border-radius: var(--ot-radius-m);
	background: transparent;
	transition: background var(--ot-transition), border-color var(--ot-transition), box-shadow var(--ot-transition);
}

.e-21311850 > .box > .field:focus-within
{
	box-shadow: 0 0 0 3px var(--ot-brand-opacity);
}

/* Swatch */

.e-21311850 > .box > .field > .swatch
{
	position: relative;
	flex-shrink: 0;
	border-radius: var(--ot-radius-s);
	border: 1px solid var(--ot-bg-2-border);
	cursor: pointer;
	overflow: hidden;
	padding: 0;
	outline: none;
	background-color: transparent;
	background-image: linear-gradient(45deg, var(--ot-bg-3) 25%, transparent 25%), linear-gradient(-45deg, var(--ot-bg-3) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--ot-bg-3) 75%), linear-gradient(-45deg, transparent 75%, var(--ot-bg-3) 75%);
	background-size: 8px 8px;
	background-position: 0 0, 0 4px, 4px -4px, -4px 0;
	transition: border-color var(--ot-transition), transform var(--ot-transition);
}

.e-21311850 > .box > .field > .swatch:hover
{
	transform: scale(1.08);
}

/* Native color input */

.e-21311850 > .box > .field > .swatch > .native
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	border: none;
	padding: 0;
}

/* Hex input */

.e-21311850 > .box > .field > .input
{
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	outline: none;
	color: var(--ot-text-1);
	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	font-size: var(--ot-size-m);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 0;
}

.e-21311850 > .box > .field > .input::placeholder
{
	color: var(--ot-text-3);
	text-transform: none;
}

/* Action */

.e-21311850 > .box > .field > .action
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	background: transparent;
	border-radius: var(--ot-radius-s);
	color: var(--ot-text-3);
	cursor: pointer;
	outline: none;
	transition: background var(--ot-transition), color var(--ot-transition);
}

.e-21311850 > .box > .field > .action:hover
{
	background: var(--ot-bg-2-hover);
	color: var(--ot-text-1);
}

.e-21311850 > .box > .field > .action > i
{
	font-size: 14px;
}

.e-21311850 > .box > .field > .action.copied
{
	color: var(--ot-green);
	background: var(--ot-green-opacity);
}

/* Presets */

.e-21311850 > .box > .presets
{
	display: flex;
	flex-wrap: wrap;
	gap: var(--ot-spacing-x);
}

.e-21311850 > .box > .presets > .preset
{
	width: 22px;
	height: 22px;
	padding: 0;
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-s);
	cursor: pointer;
	outline: none;
	transition: border-color var(--ot-transition), transform var(--ot-transition), box-shadow var(--ot-transition);
}

.e-21311850 > .box > .presets > .preset:hover
{
	transform: scale(1.1);
}

.e-21311850 > .box > .presets > .preset.active
{
	box-shadow: 0 0 0 2px var(--ot-bg-1), 0 0 0 4px var(--ot-brand);
}

/* Disabled */

.e-21311850 > .box.disabled > .field
{
	cursor: not-allowed;
	opacity: 0.55;
}

.e-21311850 > .box.disabled > .field > .swatch
{
	cursor: not-allowed;
	transform: none;
}

.e-21311850 > .box.disabled > .field > .input
{
	cursor: not-allowed;
}

/* ===== BACKGROUND ===== */

.e-21311850 > .box.bg-1 > .field { background: var(--ot-bg-1); }
.e-21311850 > .box.bg-2 > .field { background: var(--ot-bg-2); }
.e-21311850 > .box.bg-3 > .field { background: var(--ot-bg-3); }
.e-21311850 > .box.bg-4 > .field { background: var(--ot-bg-4); }

.e-21311850 > .box.bg-1 > .field:hover:not(:focus-within) { background: var(--ot-bg-1-hover); }
.e-21311850 > .box.bg-2 > .field:hover:not(:focus-within) { background: var(--ot-bg-2-hover); }
.e-21311850 > .box.bg-3 > .field:hover:not(:focus-within) { background: var(--ot-bg-3-hover); }
.e-21311850 > .box.bg-4 > .field:hover:not(:focus-within) { background: var(--ot-bg-4-hover); }

.e-21311850 > .box.bg-1 > .field > .swatch { border-color: var(--ot-bg-1-border); }
.e-21311850 > .box.bg-2 > .field > .swatch { border-color: var(--ot-bg-2-border); }
.e-21311850 > .box.bg-3 > .field > .swatch { border-color: var(--ot-bg-3-border); }
.e-21311850 > .box.bg-4 > .field > .swatch { border-color: var(--ot-bg-4-border); }

.e-21311850 > .box.bg-1 > .field > .action:hover { background: var(--ot-bg-1-hover); }
.e-21311850 > .box.bg-2 > .field > .action:hover { background: var(--ot-bg-2-hover); }
.e-21311850 > .box.bg-3 > .field > .action:hover { background: var(--ot-bg-3-hover); }
.e-21311850 > .box.bg-4 > .field > .action:hover { background: var(--ot-bg-4-hover); }

/* Transparent */

.e-21311850 > .box.transparent > .field
{
	background: transparent;
	padding: 0;
}

/* Border */

.e-21311850 > .box.border > .field { border-color: var(--ot-bg-2-border); }
.e-21311850 > .box.bg-1.border > .field { border-color: var(--ot-bg-1-border); }
.e-21311850 > .box.bg-2.border > .field { border-color: var(--ot-bg-2-border); }
.e-21311850 > .box.bg-3.border > .field { border-color: var(--ot-bg-3-border); }
.e-21311850 > .box.bg-4.border > .field { border-color: var(--ot-bg-4-border); }

/* ===== SIZE ===== */

.e-21311850 > .box.size-s > .field
{
	height: var(--ot-height-s);
	padding: 0 var(--ot-spacing-x);
}

.e-21311850 > .box.size-s > .field > .swatch { width: 18px; height: 18px; }
.e-21311850 > .box.size-s > .field > .input { font-size: var(--ot-size-s); }
.e-21311850 > .box.size-s > .field > .action { width: 18px; height: 18px; }
.e-21311850 > .box.size-s > .field > .action > i { font-size: 13px; }
.e-21311850 > .box.size-s > .presets > .preset { width: 18px; height: 18px; }

.e-21311850 > .box.size-m > .field
{
	height: var(--ot-height-m);
	padding: 0 var(--ot-spacing-s);
}

.e-21311850 > .box.size-m > .field > .swatch { width: 22px; height: 22px; }
.e-21311850 > .box.size-m > .field > .input { font-size: var(--ot-size-m); }

.e-21311850 > .box.size-l > .field
{
	height: var(--ot-height-l);
	padding: 0 var(--ot-spacing-m);
}

.e-21311850 > .box.size-l > .field > .swatch { width: 28px; height: 28px; }
.e-21311850 > .box.size-l > .field > .input { font-size: var(--ot-size-m); }
.e-21311850 > .box.size-l > .field > .action { width: 26px; height: 26px; }
.e-21311850 > .box.size-l > .field > .action > i { font-size: 16px; }
.e-21311850 > .box.size-l > .presets > .preset { width: 28px; height: 28px; }
/* ===== FORM DATE ===== */

.e-283879c1
{
	display: contents;
}

/* Box */

.e-283879c1 > .box
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-s);
	width: 100%;
}

/* Field */

.e-283879c1 > .box > .field
{
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	width: 100%;
	padding: 0 var(--ot-spacing-m);
	border: 1px solid transparent;
	border-radius: var(--ot-radius-m);
	background: transparent;
	transition: background var(--ot-transition), border-color var(--ot-transition), box-shadow var(--ot-transition);
}

.e-283879c1 > .box > .field:focus-within
{
	box-shadow: 0 0 0 3px var(--ot-brand-opacity);
}

/* Icon */

.e-283879c1 > .box > .field > .icon
{
	flex-shrink: 0;
	font-size: 18px;
	color: var(--ot-text-3);
	transition: color var(--ot-transition);
}

.e-283879c1 > .box.today > .field > .icon
{
	color: var(--ot-brand);
}

/* Input */

.e-283879c1 > .box > .field > .input
{
	flex: 1;
	min-width: 0;
	padding: 0;
	background: transparent;
	border: none;
	outline: none;
	color: var(--ot-text-1);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	font-weight: 500;
}

.e-283879c1 > .box > .field > .input::placeholder
{
	color: var(--ot-text-3);
	font-weight: 400;
}

.e-283879c1 > .box > .field > .input::-webkit-calendar-picker-indicator
{
	cursor: pointer;
	opacity: 0.5;
	filter: invert(0.45);
	transition: opacity var(--ot-transition);
}

.e-283879c1 > .box > .field > .input::-webkit-calendar-picker-indicator:hover
{
	opacity: 1;
}

.e-283879c1 > .box > .field > .input:disabled
{
	cursor: not-allowed;
}

/* Action */

.e-283879c1 > .box > .field > .action
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	background: transparent;
	border-radius: var(--ot-radius-s);
	color: var(--ot-text-3);
	cursor: pointer;
	outline: none;
	transition: background var(--ot-transition), color var(--ot-transition);
}

.e-283879c1 > .box > .field > .action:hover
{
	background: var(--ot-bg-2-hover);
	color: var(--ot-text-1);
}

.e-283879c1 > .box > .field > .action > i
{
	font-size: 14px;
}

/* Presets */

.e-283879c1 > .box > .presets
{
	display: flex;
	flex-wrap: wrap;
	gap: var(--ot-spacing-x);
}

.e-283879c1 > .box > .presets > .preset
{
	display: inline-flex;
	align-items: center;
	padding: var(--ot-spacing-x) 10px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 100px;
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	font-weight: 500;
	color: var(--ot-text-2);
	cursor: pointer;
	outline: none;
	transition: background var(--ot-transition), border-color var(--ot-transition), color var(--ot-transition), transform var(--ot-transition);
}

.e-283879c1 > .box > .presets > .preset:hover:not(.disabled):not(.active)
{
	background: var(--ot-bg-2-hover);
	color: var(--ot-text-1);
	transform: translateY(-1px);
}

.e-283879c1 > .box > .presets > .preset.active
{
	background: var(--ot-brand-opacity);
	border-color: var(--ot-brand);
	color: var(--ot-brand);
}

.e-283879c1 > .box > .presets > .preset.disabled
{
	opacity: 0.4;
	cursor: not-allowed;
}

/* Disabled */

.e-283879c1 > .box.disabled > .field
{
	cursor: not-allowed;
	opacity: 0.55;
}

/* ===== BACKGROUND ===== */

.e-283879c1 > .box.bg-1 > .field { background: var(--ot-bg-1); }
.e-283879c1 > .box.bg-2 > .field { background: var(--ot-bg-2); }
.e-283879c1 > .box.bg-3 > .field { background: var(--ot-bg-3); }
.e-283879c1 > .box.bg-4 > .field { background: var(--ot-bg-4); }

.e-283879c1 > .box.bg-1 > .field:hover:not(:focus-within) { background: var(--ot-bg-1-hover); }
.e-283879c1 > .box.bg-2 > .field:hover:not(:focus-within) { background: var(--ot-bg-2-hover); }
.e-283879c1 > .box.bg-3 > .field:hover:not(:focus-within) { background: var(--ot-bg-3-hover); }
.e-283879c1 > .box.bg-4 > .field:hover:not(:focus-within) { background: var(--ot-bg-4-hover); }

.e-283879c1 > .box.bg-1 > .field > .action:hover { background: var(--ot-bg-1-hover); }
.e-283879c1 > .box.bg-2 > .field > .action:hover { background: var(--ot-bg-2-hover); }
.e-283879c1 > .box.bg-3 > .field > .action:hover { background: var(--ot-bg-3-hover); }
.e-283879c1 > .box.bg-4 > .field > .action:hover { background: var(--ot-bg-4-hover); }

/* Transparent */

.e-283879c1 > .box.transparent > .field
{
	background: transparent;
	padding: 0;
}

/* Border */

.e-283879c1 > .box.border > .field { border-color: var(--ot-bg-2-border); }
.e-283879c1 > .box.bg-1.border > .field { border-color: var(--ot-bg-1-border); }
.e-283879c1 > .box.bg-2.border > .field { border-color: var(--ot-bg-2-border); }
.e-283879c1 > .box.bg-3.border > .field { border-color: var(--ot-bg-3-border); }
.e-283879c1 > .box.bg-4.border > .field { border-color: var(--ot-bg-4-border); }

/* Today */

.e-283879c1 > .box.today > .field,
.e-283879c1 > .box.today.border > .field
{
	border-color: var(--ot-brand);
}

/* ===== SIZE ===== */

.e-283879c1 > .box.size-s > .field
{
	height: var(--ot-height-s);
	padding: 0 var(--ot-spacing-s);
}

.e-283879c1 > .box.size-s > .field > .icon { font-size: 15px; }
.e-283879c1 > .box.size-s > .field > .input { font-size: var(--ot-size-s); }
.e-283879c1 > .box.size-s > .field > .action { width: 18px; height: 18px; }
.e-283879c1 > .box.size-s > .field > .action > i { font-size: 13px; }
.e-283879c1 > .box.size-s > .presets > .preset { font-size: 10.5px; padding: 3px 8px; }

.e-283879c1 > .box.size-m > .field
{
	height: var(--ot-height-m);
	padding: 0 var(--ot-spacing-m);
}

.e-283879c1 > .box.size-l > .field
{
	height: var(--ot-height-l);
	padding: 0 var(--ot-spacing-l);
}

.e-283879c1 > .box.size-l > .field > .icon { font-size: 20px; }
.e-283879c1 > .box.size-l > .field > .action { width: 26px; height: 26px; }
.e-283879c1 > .box.size-l > .field > .action > i { font-size: 16px; }
.e-283879c1 > .box.size-l > .presets > .preset { font-size: 12.5px; padding: 5px 12px; }
/* ===== FORM EDITOR ===== */

.e-2248d40
{
	display: contents;
}

/* Box */

.e-2248d40 > .box
{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	border-radius: var(--ot-radius-m);
	overflow: visible;
	transition: border-color var(--ot-transition), box-shadow var(--ot-transition);
}

.e-2248d40 > .box:focus-within
{
	box-shadow: 0 0 0 3px var(--ot-brand-opacity);
}

/* Toolbar */

.e-2248d40 > .box > .bar
{
	display: flex;
	align-items: center;
	gap: 2px;
	padding: var(--ot-spacing-s) var(--ot-spacing-m);
	border-bottom: 1px solid var(--ot-bg-2-border);
	flex-wrap: wrap;
	border-radius: var(--ot-radius-m) var(--ot-radius-m) 0 0;
}

.e-2248d40 > .box > .bar > div
{
	display: inline-flex;
	align-items: center;
}

.e-2248d40 > .box > .bar .btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: var(--ot-radius-s);
	color: var(--ot-text-2);
	cursor: pointer;
	outline: none;
	transition: background var(--ot-transition-fast), color var(--ot-transition-fast);
}

.e-2248d40 > .box > .bar .btn:hover
{
	background: var(--ot-bg-3);
	color: var(--ot-text-1);
}

.e-2248d40 > .box > .bar .btn.active
{
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
}

.e-2248d40 > .box > .bar .btn > i
{
	font-size: 18px;
}

.e-2248d40 > .box > .bar .sep
{
	width: 1px;
	height: 20px;
	background: var(--ot-bg-2-border);
	margin: 0 6px;
}

/* Area */

.e-2248d40 > .box > .area
{
	position: relative;
	padding: var(--ot-spacing-l);
	width: 100%;
	border-radius: 0 0 var(--ot-radius-m) var(--ot-radius-m);
}

/* Body (contenteditable) */

.e-2248d40 > .box > .area > .body
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	line-height: 1.75;
	color: var(--ot-text-1);
	outline: none;
	min-height: 200px;
	word-break: break-word;
	overflow-wrap: break-word;
}

/* Placeholder */

.e-2248d40 > .box > .area > .body:empty::before,
.e-2248d40 > .box > .area > .body > p:only-child:empty::before
{
	content: attr(data-placeholder);
	color: var(--ot-text-3);
	pointer-events: none;
}

.e-2248d40 > .box > .area > .body > *:first-child { margin-top: 0; }
.e-2248d40 > .box > .area > .body > *:last-child { margin-bottom: 0; }

/* Headings */

.e-2248d40 > .box > .area > .body :is(h2, h3, h4)
{
	font-family: var(--ot-font-secondary);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ot-text-1);
	line-height: 1.2;
}

.e-2248d40 > .box > .area > .body h2 { font-size: 26px; margin: 1.2em 0 0.5em; }
.e-2248d40 > .box > .area > .body h3 { font-size: 21px; margin: 1.1em 0 0.45em; }
.e-2248d40 > .box > .area > .body h4 { font-size: 17px; margin: 1em 0 0.4em; }

.e-2248d40 > .box > .area > .body :is(h2, h3, h4) + :is(h2, h3, h4)
{
	margin-top: 0;
}

/* Paragraphs */

.e-2248d40 > .box > .area > .body p
{
	margin: 0 0 1em;
	color: var(--ot-text-2);
}

/* Inline formatting */

.e-2248d40 > .box > .area > .body strong { font-weight: 700; color: var(--ot-text-1); }
.e-2248d40 > .box > .area > .body em { font-style: italic; }
.e-2248d40 > .box > .area > .body s { text-decoration: line-through; color: var(--ot-text-3); }
.e-2248d40 > .box > .area > .body u { text-decoration: underline; }

/* Links */

.e-2248d40 > .box > .area > .body a
{
	color: var(--ot-brand);
	text-decoration: underline;
	text-decoration-color: var(--ot-brand-opacity);
	text-underline-offset: 3px;
	transition: text-decoration-color var(--ot-transition-fast);
}

.e-2248d40 > .box > .area > .body a:hover
{
	text-decoration-color: var(--ot-brand);
}

/* Lists */

.e-2248d40 > .box > .area > .body :is(ul, ol)
{
	margin: 0 0 1em;
	padding-left: 1.6em;
}

.e-2248d40 > .box > .area > .body ul { list-style: disc; }
.e-2248d40 > .box > .area > .body ol { list-style: decimal; }

.e-2248d40 > .box > .area > .body li
{
	margin: 0 0 0.3em;
	color: var(--ot-text-2);
}

.e-2248d40 > .box > .area > .body li:last-child
{
	margin-bottom: 0;
}

/* Blockquote */

.e-2248d40 > .box > .area > .body blockquote
{
	margin: 1.3em 0;
	padding: 0.2em 0 0.2em 1em;
	border-left: 3px solid var(--ot-brand);
	font-family: var(--ot-font-secondary);
	font-size: 1.15em;
	font-style: italic;
	line-height: 1.5;
	color: var(--ot-text-1);
}

.e-2248d40 > .box > .area > .body blockquote p
{
	margin: 0;
	color: inherit;
}

/* Inline code */

.e-2248d40 > .box > .area > .body code
{
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 0.9em;
	padding: 0.1em 0.35em;
	border-radius: var(--ot-radius-s);
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	color: var(--ot-text-1);
}

/* Pre / code block */

.e-2248d40 > .box > .area > .body pre
{
	margin: 1.3em 0;
	padding: 1em 1.2em;
	border-radius: var(--ot-radius-m);
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	overflow-x: auto;
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 0.9em;
	line-height: 1.6;
}

.e-2248d40 > .box > .area > .body pre > code
{
	background: transparent;
	border: none;
	padding: 0;
}

/* Images */

.e-2248d40 > .box > .area > .body img
{
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--ot-radius-m);
	margin: 1.5em 0;
}

/* HR */

.e-2248d40 > .box > .area > .body hr
{
	border: none;
	height: 1px;
	background: var(--ot-bg-2-border);
	margin: 2em 0;
}

/* Tables */

.e-2248d40 > .box > .area > .body table
{
	width: 100%;
	border-collapse: collapse;
	margin: 1.5em 0;
	font-size: var(--ot-size-s);
}

.e-2248d40 > .box > .area > .body th,
.e-2248d40 > .box > .area > .body td
{
	padding: var(--ot-spacing-s) var(--ot-spacing-m);
	border: 1px solid var(--ot-bg-2-border);
	text-align: left;
	vertical-align: top;
}

.e-2248d40 > .box > .area > .body thead td,
.e-2248d40 > .box > .area > .body th
{
	font-weight: 600;
	color: var(--ot-text-1);
	background: var(--ot-bg-2);
}

.e-2248d40 > .box > .area > .body td
{
	color: var(--ot-text-2);
}

/* ===== BACKGROUND ===== */

.e-2248d40 > .box.bg-1 { background: var(--ot-bg-1); }
.e-2248d40 > .box.bg-1 > .bar { background: var(--ot-bg-1); }

.e-2248d40 > .box.bg-2 { background: var(--ot-bg-2); }
.e-2248d40 > .box.bg-2 > .bar { background: var(--ot-bg-2); border-bottom-color: var(--ot-bg-2-border); }
.e-2248d40 > .box.bg-2 > .bar .btn:hover { background: var(--ot-bg-3); }
.e-2248d40 > .box.bg-2 > .bar .sep { background: var(--ot-bg-2-border); }

.e-2248d40 > .box.bg-3 { background: var(--ot-bg-3); }
.e-2248d40 > .box.bg-3 > .bar { background: var(--ot-bg-3); border-bottom-color: var(--ot-bg-3-border); }
.e-2248d40 > .box.bg-3 > .bar .btn:hover { background: var(--ot-bg-4); }
.e-2248d40 > .box.bg-3 > .bar .sep { background: var(--ot-bg-3-border); }

.e-2248d40 > .box.bg-4 { background: var(--ot-bg-4); }
.e-2248d40 > .box.bg-4 > .bar { background: var(--ot-bg-4); border-bottom-color: var(--ot-bg-4-border); }
.e-2248d40 > .box.bg-4 > .bar .btn:hover { background: var(--ot-bg-3); }
.e-2248d40 > .box.bg-4 > .bar .sep { background: var(--ot-bg-4-border); }

/* ===== BORDER ===== */

.e-2248d40 > .box.border { border: 1px solid var(--ot-bg-2-border); }
.e-2248d40 > .box.bg-1.border { border-color: var(--ot-bg-1-border); }
.e-2248d40 > .box.bg-2.border { border-color: var(--ot-bg-2-border); }
.e-2248d40 > .box.bg-3.border { border-color: var(--ot-bg-3-border); }
.e-2248d40 > .box.bg-4.border { border-color: var(--ot-bg-4-border); }

/* ===== SIZE ===== */

.e-2248d40 > .box.size-s > .bar { padding: var(--ot-spacing-x) var(--ot-spacing-s); }
.e-2248d40 > .box.size-s > .bar .btn { width: 26px; height: 26px; }
.e-2248d40 > .box.size-s > .bar .btn > i { font-size: 16px; }
.e-2248d40 > .box.size-s > .area { padding: var(--ot-spacing-m); }
.e-2248d40 > .box.size-s > .area > .body { font-size: var(--ot-size-s); min-height: 140px; }

.e-2248d40 > .box.size-m > .bar { padding: var(--ot-spacing-s) var(--ot-spacing-m); }
.e-2248d40 > .box.size-m > .area { padding: var(--ot-spacing-l); }

.e-2248d40 > .box.size-l > .bar { padding: var(--ot-spacing-m) var(--ot-spacing-l); }
.e-2248d40 > .box.size-l > .bar .btn { width: 34px; height: 34px; }
.e-2248d40 > .box.size-l > .bar .btn > i { font-size: 20px; }
.e-2248d40 > .box.size-l > .area { padding: var(--ot-spacing-l); }
.e-2248d40 > .box.size-l > .area > .body { min-height: 280px; }

/* ===== COMPACT ===== */

.e-2248d40 > .box.compact > .area { padding: var(--ot-spacing-m); }
.e-2248d40 > .box.compact > .area > .body { min-height: 120px; }
/* ===== FORM FIELD ===== */

.e-2109a6b9
{
	display: contents;
}

/* Box */

.e-2109a6b9 > .box
{
	display: flex;
	width: 100%;
	padding: var(--ot-spacing-m);
	gap: var(--ot-spacing-l);
}

.e-2109a6b9 > .box.horizontal
{
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
}

.e-2109a6b9 > .box.vertical
{
	flex-direction: column;
	gap: var(--ot-spacing-s);
}

/* Info */

.e-2109a6b9 > .box > .info
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-x);
	min-width: 0;
	flex: 1;
}

.e-2109a6b9 > .box.horizontal > .info
{
	padding-top: 6px;
	max-width: 240px;
}

/* Label */

.e-2109a6b9 > .box > .info > .label
{
	display: inline-flex;
	align-items: center;
	gap: var(--ot-spacing-x);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	font-weight: 500;
	color: var(--ot-text-1);
	line-height: 1.3;
	cursor: default;
}

.e-2109a6b9 > .box > .info > .label > .required
{
	color: var(--ot-red);
	font-weight: 600;
}

.e-2109a6b9 > .box > .info > .label > .hint
{
	font-size: 16px;
	color: var(--ot-text-3);
	cursor: help;
	transition: color var(--ot-transition);
}

.e-2109a6b9 > .box > .info > .label > .hint:hover
{
	color: var(--ot-text-1);
}

/* Description */

.e-2109a6b9 > .box > .info > .description
{
	margin: 0;
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
	line-height: 1.5;
}

/* Control */

.e-2109a6b9 > .box > .control
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-x);
	flex: 1;
	min-width: 0;
}

.e-2109a6b9 > .box.horizontal > .control
{
	flex: 1.5;
}

.e-2109a6b9 > .box.vertical > .control
{
	width: 100%;
}

/* Input slot */

.e-2109a6b9 > .box > .control > .input
{
	display: flex;
	width: 100%;
}

.e-2109a6b9 > .box > .control > .input > *
{
	width: 100%;
}

/* Error message */

.e-2109a6b9 > .box > .control > .message
{
	display: inline-flex;
	align-items: center;
	gap: var(--ot-spacing-x);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	color: var(--ot-red);
	animation: e-2109a6b9-shake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.e-2109a6b9 > .box > .control > .message > i
{
	font-size: 14px;
	font-variation-settings: 'FILL' 1;
}

@keyframes e-2109a6b9-shake
{
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-3px); }
	75% { transform: translateX(3px); }
}

/* Error state */

.e-2109a6b9 > .box.error > .control > .input > *
{
	--ot-brand: var(--ot-red);
	--ot-brand-opacity: var(--ot-red-opacity);
}

/* ===== VARIANT ===== */

.e-2109a6b9 > .box.clean
{
	padding: 0;
}

.e-2109a6b9 > .box.border
{
	border-bottom: 1px solid var(--ot-bg-2-border);
}

/* ===== SIZE ===== */

/* Small */

.e-2109a6b9 > .box.size-s
{
	padding: var(--ot-spacing-s) var(--ot-spacing-m);
	gap: var(--ot-spacing-m);
}

.e-2109a6b9 > .box.size-s.vertical
{
	gap: var(--ot-spacing-x);
}

.e-2109a6b9 > .box.size-s > .info > .label
{
	font-size: var(--ot-size-s);
}

.e-2109a6b9 > .box.size-s > .info > .description
{
	font-size: var(--ot-size-s);
}

/* Medium */

.e-2109a6b9 > .box.size-m
{
	padding: var(--ot-spacing-m);
	gap: var(--ot-spacing-m);
}

/* Large */

.e-2109a6b9 > .box.size-l
{
	padding: var(--ot-spacing-l) var(--ot-spacing-m);
	gap: var(--ot-spacing-l);
}

.e-2109a6b9 > .box.size-l.vertical
{
	gap: var(--ot-spacing-s);
}

.e-2109a6b9 > .box.size-l > .info > .label
{
	font-size: 15px;
}

.e-2109a6b9 > .box.size-l > .info > .description
{
	font-size: var(--ot-size-m);
}

/* Clean overrides */

.e-2109a6b9 > .box.clean.size-s,
.e-2109a6b9 > .box.clean.size-m,
.e-2109a6b9 > .box.clean.size-l
{
	padding: 0;
}
/* ===== FORM INPUT ===== */

.e-20dcefe9
{
	display: contents;
}

/* Box */

.e-20dcefe9 > .box
{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	border: 1px solid transparent;
	border-radius: var(--ot-radius-m);
	background: transparent;
	transition: background var(--ot-transition), border-color var(--ot-transition), box-shadow var(--ot-transition);
}

.e-20dcefe9 > .box:focus-within
{
	border-color: var(--ot-brand);
	box-shadow: 0 0 0 3px var(--ot-brand-opacity);
}

/* Field */

.e-20dcefe9 > .box > .field
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	width: 100%;
	height: var(--ot-height-m);
	padding: 0 var(--ot-spacing-m);
}

/* Icon */

.e-20dcefe9 > .box > .field > .icon
{
	flex-shrink: 0;
	font-size: 18px;
	color: var(--ot-text-3);
	transition: color var(--ot-transition);
}

.e-20dcefe9 > .box:focus-within > .field > .icon
{
	color: var(--ot-text-1);
}

/* Affix */

.e-20dcefe9 > .box > .field > .affix
{
	flex-shrink: 0;
	color: var(--ot-text-3);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	font-weight: 500;
	user-select: none;
}

/* Input */

.e-20dcefe9 > .box > .field > .input
{
	flex: 1;
	min-width: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	background: transparent;
	border: none;
	outline: none;
	color: var(--ot-text-1);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	font-weight: 500;
}

.e-20dcefe9 > .box > .field > .input::placeholder
{
	color: var(--ot-text-3);
	font-weight: 400;
}

.e-20dcefe9 > .box > .field > .input:disabled
{
	cursor: not-allowed;
}

/* Action */

.e-20dcefe9 > .box > .field > .action
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	padding: 0;
	border: none;
	background: transparent;
	border-radius: var(--ot-radius-s);
	color: var(--ot-text-3);
	cursor: pointer;
	outline: none;
	transition: background var(--ot-transition), color var(--ot-transition);
}

.e-20dcefe9 > .box > .field > .action:hover
{
	background: var(--ot-bg-3);
	color: var(--ot-text-1);
}

.e-20dcefe9 > .box > .field > .action > i
{
	font-size: 14px;
}

/* Dropdown */

.e-20dcefe9 > .box > .dropdown
{
	position: absolute;
	top: calc(100% + var(--ot-spacing-x));
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	padding: var(--ot-spacing-x);
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
	box-shadow: var(--ot-shadow-m);
	z-index: 10;
	max-height: 240px;
	overflow-y: auto;
	animation: e-20dcefe9-drop var(--ot-transition);
}

@keyframes e-20dcefe9-drop
{
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

.e-20dcefe9 > .box > .dropdown > .option
{
	display: flex;
	align-items: center;
	width: 100%;
	padding: var(--ot-spacing-s) var(--ot-spacing-m);
	background: transparent;
	border: none;
	border-radius: var(--ot-radius-s);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	font-weight: 500;
	color: var(--ot-text-1);
	text-align: left;
	cursor: pointer;
	outline: none;
	transition: background var(--ot-transition-fast), color var(--ot-transition-fast);
}

.e-20dcefe9 > .box > .dropdown > .option:hover,
.e-20dcefe9 > .box > .dropdown > .option.active
{
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
}

/* Disabled */

.e-20dcefe9 > .box.disabled
{
	cursor: not-allowed;
	opacity: 0.5;
}

/* ===== BACKGROUND ===== */

.e-20dcefe9 > .box.bg-1 { background: var(--ot-bg-1); }
.e-20dcefe9 > .box.bg-2 { background: var(--ot-bg-2); }
.e-20dcefe9 > .box.bg-3 { background: var(--ot-bg-3); }
.e-20dcefe9 > .box.bg-4 { background: var(--ot-bg-4); }
.e-20dcefe9 > .box.transparent { background: transparent; }

.e-20dcefe9 > .box.bg-1:hover:not(:focus-within):not(.disabled) { background: var(--ot-bg-1-hover); }
.e-20dcefe9 > .box.bg-2:hover:not(:focus-within):not(.disabled) { background: var(--ot-bg-2-hover); }
.e-20dcefe9 > .box.bg-3:hover:not(:focus-within):not(.disabled) { background: var(--ot-bg-3-hover); }
.e-20dcefe9 > .box.bg-4:hover:not(:focus-within):not(.disabled) { background: var(--ot-bg-4-hover); }

/* ===== BORDER ===== */

.e-20dcefe9 > .box.border { border-color: var(--ot-bg-2-border); }
.e-20dcefe9 > .box.bg-1.border { border-color: var(--ot-bg-1-border); }
.e-20dcefe9 > .box.bg-2.border { border-color: var(--ot-bg-2-border); }
.e-20dcefe9 > .box.bg-3.border { border-color: var(--ot-bg-3-border); }
.e-20dcefe9 > .box.bg-4.border { border-color: var(--ot-bg-4-border); }

/* ===== SIZE ===== */

.e-20dcefe9 > .box.size-s > .field
{
	height: var(--ot-height-s);
	padding: 0 var(--ot-spacing-s);
}

.e-20dcefe9 > .box.size-s > .field > .icon
{
	font-size: 15px;
}

.e-20dcefe9 > .box.size-s > .field > .affix,
.e-20dcefe9 > .box.size-s > .field > .input
{
	font-size: var(--ot-size-s);
}

.e-20dcefe9 > .box.size-s > .field > .action
{
	width: 18px;
	height: 18px;
}

.e-20dcefe9 > .box.size-s > .field > .action > i
{
	font-size: 13px;
}

.e-20dcefe9 > .box.size-m > .field
{
	height: var(--ot-height-m);
	padding: 0 var(--ot-spacing-m);
}

.e-20dcefe9 > .box.size-l > .field
{
	height: var(--ot-height-l);
	padding: 0 var(--ot-spacing-l);
}

.e-20dcefe9 > .box.size-l > .field > .icon
{
	font-size: 20px;
}

.e-20dcefe9 > .box.size-l > .field > .action
{
	width: 26px;
	height: 26px;
}

.e-20dcefe9 > .box.size-l > .field > .action > i
{
	font-size: 16px;
}
/* ===== FORM RADIO ===== */

.e-206433b8
{
	display: contents;
}

/* Box */

.e-206433b8 > .box
{
	position: relative;
	display: inline-flex;
	align-items: flex-start;
	gap: var(--ot-spacing-s);
	cursor: pointer;
	font-family: var(--ot-font-primary);
}

.e-206433b8 > .box.reverse
{
	flex-direction: row-reverse;
}

/* Input */

.e-206433b8 > .box > input
{
	position: absolute;
	opacity: 0;
	cursor: pointer;
	width: 0;
	height: 0;
	margin: 0;
}

/* Info */

.e-206433b8 > .box > .info
{
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding-top: 1px;
}

.e-206433b8 > .box > .info > .label
{
	font-size: var(--ot-size-m);
	font-weight: 500;
	color: var(--ot-text-1);
	line-height: 1.3;
	user-select: none;
	transition: color var(--ot-transition);
}

.e-206433b8 > .box > .info > .description
{
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
	line-height: 1.4;
	user-select: none;
	transition: color var(--ot-transition);
}

/* Mark */

.e-206433b8 > .box > .mark
{
	position: relative;
	display: block;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid transparent;
	background: transparent;
	transition: background var(--ot-transition), border-color var(--ot-transition), transform var(--ot-transition-fast), box-shadow var(--ot-transition);
}

/* Dot */

.e-206433b8 > .box > .mark::after
{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	background: white;
	transform: translate(-50%, -50%) scale(0);
	opacity: 0;
	transition: transform var(--ot-transition), opacity var(--ot-transition-fast);
}

.e-206433b8 > .box > input:checked ~ .mark::after
{
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}

/* Focus */

.e-206433b8 > .box > input:focus-visible ~ .mark
{
	box-shadow: 0 0 0 3px var(--ot-brand-opacity);
}

/* Active */

.e-206433b8 > .box:active > .mark
{
	transform: scale(0.92);
}

/* Disabled */

.e-206433b8 > .box.disabled
{
	cursor: not-allowed;
}

.e-206433b8 > .box.disabled > .mark
{
	opacity: 0.45;
}

.e-206433b8 > .box.disabled > .info > .label,
.e-206433b8 > .box.disabled > .info > .description
{
	color: var(--ot-text-3);
	opacity: 0.6;
}

/* ===== SIZE ===== */

.e-206433b8 > .box.size-s > .mark
{
	width: 16px;
	height: 16px;
}

.e-206433b8 > .box.size-s > .mark::after
{
	width: 6px;
	height: 6px;
}

.e-206433b8 > .box.size-s > .info > .label
{
	font-size: var(--ot-size-s);
}

.e-206433b8 > .box.size-s > .info > .description
{
	font-size: 10.5px;
}

.e-206433b8 > .box.size-m > .mark
{
	width: 20px;
	height: 20px;
}

.e-206433b8 > .box.size-m > .mark::after
{
	width: 8px;
	height: 8px;
}

.e-206433b8 > .box.size-m > .info > .label
{
	font-size: var(--ot-size-m);
}

.e-206433b8 > .box.size-l > .mark
{
	width: 24px;
	height: 24px;
}

.e-206433b8 > .box.size-l > .mark::after
{
	width: 10px;
	height: 10px;
}

.e-206433b8 > .box.size-l > .info > .label
{
	font-size: var(--ot-size-m);
}

/* ===== BACKGROUND ===== */

.e-206433b8 > .box.bg-1 > .mark
{
	background: var(--ot-bg-1);
	border-color: var(--ot-bg-1-border);
}

.e-206433b8 > .box.bg-1:hover:not(.disabled) > input:not(:checked) ~ .mark
{
	background: var(--ot-bg-1-hover);
}

.e-206433b8 > .box.bg-2 > .mark
{
	background: var(--ot-bg-2);
	border-color: var(--ot-bg-2-border);
}

.e-206433b8 > .box.bg-2:hover:not(.disabled) > input:not(:checked) ~ .mark
{
	background: var(--ot-bg-2-hover);
}

.e-206433b8 > .box.bg-3 > .mark
{
	background: var(--ot-bg-3);
	border-color: var(--ot-bg-3-border);
}

.e-206433b8 > .box.bg-3:hover:not(.disabled) > input:not(:checked) ~ .mark
{
	background: var(--ot-bg-3-hover);
}

.e-206433b8 > .box.bg-4 > .mark
{
	background: var(--ot-bg-4);
	border-color: var(--ot-bg-4-border);
}

.e-206433b8 > .box.bg-4:hover:not(.disabled) > input:not(:checked) ~ .mark
{
	background: var(--ot-bg-4-hover);
}

/* Transparent */

.e-206433b8 > .box.transparent > .mark
{
	background: transparent;
	border-color: transparent;
}

.e-206433b8 > .box.transparent > input:not(:checked) ~ .mark::after
{
	background: var(--ot-text-1);
}

/* Border */

.e-206433b8 > .box.border > .mark
{
	background: transparent;
	border-color: var(--ot-bg-2-border);
}

.e-206433b8 > .box.border:hover:not(.disabled) > input:not(:checked) ~ .mark
{
	border-color: var(--ot-text-3);
}

/* ===== CHECKED ===== */

.e-206433b8 > .box.bg-1 > input:checked ~ .mark,
.e-206433b8 > .box.bg-2 > input:checked ~ .mark,
.e-206433b8 > .box.bg-3 > input:checked ~ .mark,
.e-206433b8 > .box.bg-4 > input:checked ~ .mark,
.e-206433b8 > .box.transparent > input:checked ~ .mark,
.e-206433b8 > .box.border > input:checked ~ .mark
{
	background: var(--ot-brand);
	border-color: var(--ot-brand);
}

/* ===== COLOR ===== */

.e-206433b8 > .box.color-brand > input:checked ~ .mark
{
	background: var(--ot-brand);
	border-color: var(--ot-brand);
}

.e-206433b8 > .box.color-blue > input:checked ~ .mark
{
	background: var(--ot-blue);
	border-color: var(--ot-blue);
}

.e-206433b8 > .box.color-red > input:checked ~ .mark
{
	background: var(--ot-red);
	border-color: var(--ot-red);
}

.e-206433b8 > .box.color-orange > input:checked ~ .mark
{
	background: var(--ot-orange);
	border-color: var(--ot-orange);
}

.e-206433b8 > .box.color-green > input:checked ~ .mark
{
	background: var(--ot-green);
	border-color: var(--ot-green);
}

/* Color focus rings */

.e-206433b8 > .box.color-blue > input:focus-visible ~ .mark
{
	box-shadow: 0 0 0 3px var(--ot-blue-opacity);
}

.e-206433b8 > .box.color-red > input:focus-visible ~ .mark
{
	box-shadow: 0 0 0 3px var(--ot-red-opacity);
}

.e-206433b8 > .box.color-orange > input:focus-visible ~ .mark
{
	box-shadow: 0 0 0 3px var(--ot-orange-opacity);
}

.e-206433b8 > .box.color-green > input:focus-visible ~ .mark
{
	box-shadow: 0 0 0 3px var(--ot-green-opacity);
}

/* ===== ICON ===== */

.e-206433b8 > .box > .icon
{
	font-size: 18px;
	color: var(--ot-text-2);
	flex-shrink: 0;
	align-self: center;
}

.e-206433b8 > .box.size-s > .icon { font-size: 16px; }
.e-206433b8 > .box.size-l > .icon { font-size: 20px; }

/* ===== COUNT ===== */

.e-206433b8 > .box > .count
{
	margin-left: auto;
	padding-left: var(--ot-spacing-s);
	font-size: var(--ot-size-s);
	font-weight: 700;
	color: var(--ot-text-3);
	font-variant-numeric: tabular-nums;
	align-self: center;
}
/* ===== FORM RATING ===== */

.e-13e502f0
{
	display: contents;
}

/* Box */

.e-13e502f0 > .box
{
	display: inline-flex;
	flex-direction: column;
	gap: var(--ot-spacing-s);
	font-family: var(--ot-font-primary);
}

/* Info */

.e-13e502f0 > .box > .info
{
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.e-13e502f0 > .box > .info > .label
{
	font-size: var(--ot-size-m);
	font-weight: 500;
	color: var(--ot-text-1);
	line-height: 1.3;
}

.e-13e502f0 > .box > .info > .text
{
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
	line-height: 1.4;
}

/* Row */

.e-13e502f0 > .box > .row
{
	display: inline-flex;
	align-items: center;
	gap: var(--ot-spacing-s);
}

/* Stars */

.e-13e502f0 > .box > .row > .stars
{
	display: inline-flex;
	align-items: center;
	gap: var(--ot-spacing-x);
}

/* Star */

.e-13e502f0 .star
{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	outline: none;
	color: var(--ot-bg-3-border);
	transition: transform var(--ot-transition), color var(--ot-transition);
}

.e-13e502f0 .star:hover:not(:disabled)
{
	transform: scale(1.15);
}

.e-13e502f0 .star:active:not(:disabled)
{
	transform: scale(1);
	transition-duration: 100ms;
}

.e-13e502f0 .star:disabled
{
	cursor: default;
}

.e-13e502f0 .star:focus-visible
{
	outline: none;
}

.e-13e502f0 .star:focus-visible > .base
{
	filter: drop-shadow(0 0 6px var(--ot-brand-opacity));
}

/* Base icon */

.e-13e502f0 .star > .base
{
	position: relative;
	z-index: 1;
	color: var(--ot-bg-3-border);
	font-variation-settings: 'FILL' 0;
}

/* Fill icon */

.e-13e502f0 .star > .fill
{
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	width: 0;
	overflow: hidden;
	font-variation-settings: 'FILL' 1;
	transition: width var(--ot-transition-slow);
	pointer-events: none;
}

.e-13e502f0 .star.fill-50 > .fill
{
	width: 50%;
	left: 0;
	transform: translate(0, -50%);
}

.e-13e502f0 .star.fill-100 > .fill
{
	width: 100%;
	left: 0;
	transform: translate(0, -50%);
}

/* Half-click area */

.e-13e502f0 .star > .half
{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 50%;
	height: 100%;
	cursor: pointer;
}

/* States */

.e-13e502f0 > .box.readonly .star,
.e-13e502f0 > .box.disabled .star
{
	cursor: default;
	pointer-events: none;
}

.e-13e502f0 > .box.readonly .star:hover,
.e-13e502f0 > .box.disabled .star:hover
{
	transform: none;
}

.e-13e502f0 > .box.disabled
{
	opacity: 0.5;
}

/* Meta */

.e-13e502f0 > .box > .row > .meta
{
	display: inline-flex;
	align-items: baseline;
	gap: var(--ot-spacing-x);
	margin-left: var(--ot-spacing-x);
}

.e-13e502f0 > .box > .row > .meta > .value
{
	font-size: var(--ot-size-m);
	font-weight: 600;
	color: var(--ot-text-1);
	font-variant-numeric: tabular-nums;
}

.e-13e502f0 > .box > .row > .meta > .count
{
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
	font-variant-numeric: tabular-nums;
}

/* ===== COLOR ===== */

.e-13e502f0 > .box.brand .star > .fill { color: var(--ot-brand); }
.e-13e502f0 > .box.blue .star > .fill { color: var(--ot-blue); }
.e-13e502f0 > .box.red .star > .fill { color: var(--ot-red); }
.e-13e502f0 > .box.orange .star > .fill { color: var(--ot-orange); }
.e-13e502f0 > .box.green .star > .fill { color: var(--ot-green); }

.e-13e502f0 > .box.brand .star:focus-visible > .base { filter: drop-shadow(0 0 6px var(--ot-brand-opacity)); }
.e-13e502f0 > .box.blue .star:focus-visible > .base { filter: drop-shadow(0 0 6px var(--ot-blue-opacity)); }
.e-13e502f0 > .box.red .star:focus-visible > .base { filter: drop-shadow(0 0 6px var(--ot-red-opacity)); }
.e-13e502f0 > .box.orange .star:focus-visible > .base { filter: drop-shadow(0 0 6px var(--ot-orange-opacity)); }
.e-13e502f0 > .box.green .star:focus-visible > .base { filter: drop-shadow(0 0 6px var(--ot-green-opacity)); }

/* ===== SIZE ===== */

.e-13e502f0 > .box.size-s > .row > .stars { gap: 2px; }

.e-13e502f0 > .box.size-s .star > .base,
.e-13e502f0 > .box.size-s .star > .fill { font-size: 16px; }

.e-13e502f0 > .box.size-s > .row > .meta > .value { font-size: var(--ot-size-s); }
.e-13e502f0 > .box.size-s > .row > .meta > .count { font-size: 10.5px; }

.e-13e502f0 > .box.size-m > .row > .stars { gap: var(--ot-spacing-x); }

.e-13e502f0 > .box.size-m .star > .base,
.e-13e502f0 > .box.size-m .star > .fill { font-size: 22px; }

.e-13e502f0 > .box.size-l > .row > .stars { gap: var(--ot-spacing-s); }

.e-13e502f0 > .box.size-l .star > .base,
.e-13e502f0 > .box.size-l .star > .fill { font-size: 30px; }

.e-13e502f0 > .box.size-l > .row > .meta > .value { font-size: 15px; }
.e-13e502f0 > .box.size-l > .row > .meta > .count { font-size: var(--ot-size-m); }
/* ===== FORM SECTION ===== */

.e-5c75a80e
{
	display: contents;
}

/* Box */

.e-5c75a80e > .box
{
	display: flex;
	flex-direction: column;
	width: 100%;
	border: 1px solid transparent;
	border-radius: var(--ot-radius-l);
	transition: border-color var(--ot-transition);
}

/* ===== HEADER ===== */

.e-5c75a80e > .box > .head
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-m);
	padding: var(--ot-spacing-m);
	border-bottom: 1px solid transparent;
	transition: border-color var(--ot-transition);
}

.e-5c75a80e > .box:not(.collapsed) > .head
{
	border-bottom-color: var(--ot-bg-2-border);
}

/* Head main */

.e-5c75a80e > .box > .head > .head-main
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-m);
	flex: 1;
	min-width: 0;
}

.e-5c75a80e > .box.collapsible > .head > .head-main
{
	cursor: pointer;
}

/* Icon */

.e-5c75a80e > .box > .head > .head-main > .icon
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--ot-radius-m);
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
	flex-shrink: 0;
}

.e-5c75a80e > .box > .head > .head-main > .icon > i
{
	font-size: 22px;
}

/* Text */

.e-5c75a80e > .box > .head > .head-main > .text
{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.e-5c75a80e > .box > .head > .head-main > .text > .eyebrow
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ot-brand);
}

.e-5c75a80e > .box > .head > .head-main > .text > .title
{
	margin: 0;
	font-family: var(--ot-font-secondary);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--ot-text-1);
	line-height: 1.25;
	font-variation-settings: 'opsz' 144;
}

.e-5c75a80e > .box > .head > .head-main > .text > .description
{
	margin: 0;
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	color: var(--ot-text-2);
	line-height: 1.5;
}

/* Chevron */

.e-5c75a80e > .box > .head > .head-main > .chevron
{
	flex-shrink: 0;
	font-size: 22px;
	color: var(--ot-text-3);
	transition: transform var(--ot-transition-slow), color var(--ot-transition);
}

.e-5c75a80e > .box.collapsible > .head > .head-main:hover > .chevron
{
	color: var(--ot-text-1);
}

.e-5c75a80e > .box.collapsed > .head > .head-main > .chevron
{
	transform: rotate(-90deg);
}

/* Actions */

.e-5c75a80e > .box > .head > .actions
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	flex-shrink: 0;
}

/* ===== CONTENT ===== */

.e-5c75a80e > .box > .content
{
	display: flex;
	flex-direction: column;
	animation: e-5c75a80e-expand 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes e-5c75a80e-expand
{
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Padded content */

.e-5c75a80e > .box.padded > .content
{
	padding: var(--ot-spacing-m);
	gap: var(--ot-spacing-m);
}

.e-5c75a80e > .box.padded.size-s > .content
{
	padding: var(--ot-spacing-m);
	gap: var(--ot-spacing-s);
}

.e-5c75a80e > .box.padded.size-l > .content
{
	padding: var(--ot-spacing-l);
	gap: var(--ot-spacing-l);
}

/* ===== BACKGROUND ===== */

.e-5c75a80e > .box.bg-1 { background: var(--ot-bg-1); }
.e-5c75a80e > .box.bg-2 { background: var(--ot-bg-2); }
.e-5c75a80e > .box.bg-3 { background: var(--ot-bg-3); }
.e-5c75a80e > .box.bg-4 { background: var(--ot-bg-4); }

.e-5c75a80e > .box.bg-1:not(.collapsed) > .head { border-bottom-color: var(--ot-bg-1-border); }
.e-5c75a80e > .box.bg-2:not(.collapsed) > .head { border-bottom-color: var(--ot-bg-2-border); }
.e-5c75a80e > .box.bg-3:not(.collapsed) > .head { border-bottom-color: var(--ot-bg-3-border); }
.e-5c75a80e > .box.bg-4:not(.collapsed) > .head { border-bottom-color: var(--ot-bg-4-border); }

/* ===== BORDER ===== */

.e-5c75a80e > .box.border { border-color: var(--ot-bg-2-border); }
.e-5c75a80e > .box.bg-1.border { border-color: var(--ot-bg-1-border); }
.e-5c75a80e > .box.bg-2.border { border-color: var(--ot-bg-2-border); }
.e-5c75a80e > .box.bg-3.border { border-color: var(--ot-bg-3-border); }
.e-5c75a80e > .box.bg-4.border { border-color: var(--ot-bg-4-border); }

/* ===== CLEAN ===== */

.e-5c75a80e > .box.clean
{
	background: transparent;
	border: none;
	border-radius: 0;
	gap: var(--ot-spacing-m);
}

.e-5c75a80e > .box.clean > .head
{
	padding: 0 0 var(--ot-spacing-m);
	border-bottom: 1px solid var(--ot-bg-2-border);
}

.e-5c75a80e > .box.clean > .content
{
	padding: 0;
}

/* ===== SIZE: SMALL ===== */

.e-5c75a80e > .box.size-s > .head
{
	padding: var(--ot-spacing-m);
}

.e-5c75a80e > .box.size-s > .head > .head-main
{
	gap: var(--ot-spacing-s);
}

.e-5c75a80e > .box.size-s > .head > .head-main > .icon
{
	width: 34px;
	height: 34px;
	border-radius: var(--ot-radius-s);
}

.e-5c75a80e > .box.size-s > .head > .head-main > .icon > i
{
	font-size: 18px;
}

.e-5c75a80e > .box.size-s > .head > .head-main > .text > .eyebrow
{
	font-size: 10px;
}

.e-5c75a80e > .box.size-s > .head > .head-main > .text > .title
{
	font-size: 15px;
}

.e-5c75a80e > .box.size-s > .head > .head-main > .text > .description
{
	font-size: var(--ot-size-s);
}

.e-5c75a80e > .box.size-s > .head > .head-main > .chevron
{
	font-size: 20px;
}

/* ===== SIZE: LARGE ===== */

.e-5c75a80e > .box.size-l > .head
{
	padding: var(--ot-spacing-l);
}

.e-5c75a80e > .box.size-l > .head > .head-main > .icon
{
	width: 52px;
	height: 52px;
	border-radius: var(--ot-radius-l);
}

.e-5c75a80e > .box.size-l > .head > .head-main > .icon > i
{
	font-size: 26px;
}

.e-5c75a80e > .box.size-l > .head > .head-main > .text > .title
{
	font-size: 22px;
}

.e-5c75a80e > .box.size-l > .head > .head-main > .text > .description
{
	font-size: 14px;
}

.e-5c75a80e > .box.size-l > .head > .head-main > .chevron
{
	font-size: 26px;
}

/* Clean size overrides */

.e-5c75a80e > .box.clean.size-s > .head { padding: 0 0 var(--ot-spacing-s); }
.e-5c75a80e > .box.clean.size-l > .head { padding: 0 0 var(--ot-spacing-l); }
/* ===== FORM SELECT ===== */

.e-15ce864f
{
	display: contents;
}

/* Box */

.e-15ce864f > .box
{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	border: 1px solid transparent;
	border-radius: var(--ot-radius-m);
	background: transparent;
	transition: background var(--ot-transition), border-color var(--ot-transition), box-shadow var(--ot-transition);
}

.e-15ce864f > .box.open
{
	box-shadow: 0 0 0 3px var(--ot-brand-opacity);
}

/* Trigger */

.e-15ce864f > .box > .trigger
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	height: var(--ot-height-m);
	padding: 0 var(--ot-spacing-m);
	cursor: pointer;
	user-select: none;
}

.e-15ce864f > .box > .trigger > .icon
{
	flex-shrink: 0;
	font-size: 18px;
	color: var(--ot-text-3);
	transition: color var(--ot-transition);
}

.e-15ce864f > .box.open > .trigger > .icon
{
	color: var(--ot-text-1);
}

.e-15ce864f > .box > .trigger > .selected
{
	flex: 1;
	min-width: 0;
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	font-weight: 500;
	color: var(--ot-text-1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.e-15ce864f > .box > .trigger > .placeholder
{
	flex: 1;
	min-width: 0;
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	color: var(--ot-text-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Action (clear) */

.e-15ce864f > .box > .trigger > .action
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	padding: 0;
	margin-left: auto;
	border: none;
	background: transparent;
	border-radius: var(--ot-radius-s);
	color: var(--ot-text-3);
	cursor: pointer;
	outline: none;
	transition: background var(--ot-transition), color var(--ot-transition);
}

.e-15ce864f > .box > .trigger > .action:hover
{
	background: var(--ot-bg-2-hover);
	color: var(--ot-text-1);
}

.e-15ce864f > .box > .trigger > .action > i
{
	font-size: 14px;
}

/* Arrow */

.e-15ce864f > .box > .trigger > .arrow
{
	flex-shrink: 0;
	font-size: 20px;
	color: var(--ot-text-3);
	margin-left: auto;
	transition: transform var(--ot-transition), color var(--ot-transition);
}

.e-15ce864f > .box > .trigger > .action + .arrow
{
	margin-left: 0;
}

.e-15ce864f > .box.open > .trigger > .arrow
{
	transform: rotate(180deg);
	color: var(--ot-brand);
}

/* ===== DROPDOWN (rendered via float overlay) ===== */

.e-15ce864f > .box > .dropdown
{
	position: absolute;
	top: calc(100% + var(--ot-spacing-x));
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
	box-shadow: var(--ot-shadow-m);
	z-index: 100;
	overflow: hidden;
	animation: e-15ce864f-drop var(--ot-transition);
}

@keyframes e-15ce864f-drop
{
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

.e-15ce864f > .box.above > .dropdown
{
	top: auto;
	bottom: calc(100% + var(--ot-spacing-x));
	animation: e-15ce864f-drop-above var(--ot-transition);
}

@keyframes e-15ce864f-drop-above
{
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Search */

.e-15ce864f > .box > .dropdown > .search
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	padding: 0 var(--ot-spacing-m);
	height: var(--ot-height-m);
	border-bottom: 1px solid var(--ot-bg-2-border);
}

.e-15ce864f > .box > .dropdown > .search > i
{
	flex-shrink: 0;
	font-size: 18px;
	color: var(--ot-text-3);
}

.e-15ce864f > .box > .dropdown > .search > input
{
	flex: 1;
	min-width: 0;
	width: 100%;
	padding: 0;
	background: transparent;
	border: none;
	outline: none;
	color: var(--ot-text-1);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	font-weight: 500;
}

.e-15ce864f > .box > .dropdown > .search > input::placeholder
{
	color: var(--ot-text-3);
	font-weight: 400;
}

/* List */

.e-15ce864f > .box > .dropdown > .list
{
	display: flex;
	flex-direction: column;
	padding: var(--ot-spacing-x);
	max-height: 280px;
	overflow-y: auto;
}

/* Option */

.e-15ce864f > .box > .dropdown > .list > .option
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	width: 100%;
	padding: var(--ot-spacing-s) var(--ot-spacing-m);
	background: transparent;
	border: none;
	border-radius: var(--ot-radius-s);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	font-weight: 500;
	color: var(--ot-text-1);
	text-align: left;
	cursor: pointer;
	outline: none;
	transition: background var(--ot-transition-fast), color var(--ot-transition-fast);
}

.e-15ce864f > .box > .dropdown > .list > .option > .icon
{
	flex-shrink: 0;
	font-size: 18px;
	color: var(--ot-text-3);
	transition: color var(--ot-transition-fast);
}

.e-15ce864f > .box > .dropdown > .list > .option > .text
{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.e-15ce864f > .box > .dropdown > .list > .option > .text > .label
{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.e-15ce864f > .box > .dropdown > .list > .option > .text > .description
{
	font-size: var(--ot-size-s);
	font-weight: 400;
	color: var(--ot-text-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.e-15ce864f > .box > .dropdown > .list > .option > .check
{
	flex-shrink: 0;
	margin-left: auto;
	font-size: 18px;
	color: var(--ot-brand);
}

.e-15ce864f > .box > .dropdown > .list > .option:hover:not(.disabled),
.e-15ce864f > .box > .dropdown > .list > .option.active:not(.disabled)
{
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
}

.e-15ce864f > .box > .dropdown > .list > .option:hover:not(.disabled) > .icon,
.e-15ce864f > .box > .dropdown > .list > .option.active:not(.disabled) > .icon
{
	color: var(--ot-brand);
}

.e-15ce864f > .box > .dropdown > .list > .option.selected
{
	color: var(--ot-brand);
}

.e-15ce864f > .box > .dropdown > .list > .option.selected > .icon
{
	color: var(--ot-brand);
}

.e-15ce864f > .box > .dropdown > .list > .option.disabled
{
	opacity: 0.4;
	cursor: not-allowed;
}

/* Empty */

.e-15ce864f > .box > .dropdown > .list > .empty
{
	padding: var(--ot-spacing-m);
	text-align: center;
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
}

/* ===== DISABLED ===== */

.e-15ce864f > .box.disabled
{
	cursor: not-allowed;
	opacity: 0.55;
}

.e-15ce864f > .box.disabled > .trigger
{
	cursor: not-allowed;
}

/* ===== BACKGROUND ===== */

.e-15ce864f > .box.bg-1 { background: var(--ot-bg-1); }
.e-15ce864f > .box.bg-2 { background: var(--ot-bg-2); }
.e-15ce864f > .box.bg-3 { background: var(--ot-bg-3); }
.e-15ce864f > .box.bg-4 { background: var(--ot-bg-4); }

.e-15ce864f > .box.bg-1:hover:not(.open):not(.disabled) { background: var(--ot-bg-1-hover); }
.e-15ce864f > .box.bg-2:hover:not(.open):not(.disabled) { background: var(--ot-bg-2-hover); }
.e-15ce864f > .box.bg-3:hover:not(.open):not(.disabled) { background: var(--ot-bg-3-hover); }
.e-15ce864f > .box.bg-4:hover:not(.open):not(.disabled) { background: var(--ot-bg-4-hover); }

.e-15ce864f > .box.bg-1 > .trigger > .action:hover { background: var(--ot-bg-1-hover); }
.e-15ce864f > .box.bg-2 > .trigger > .action:hover { background: var(--ot-bg-2-hover); }
.e-15ce864f > .box.bg-3 > .trigger > .action:hover { background: var(--ot-bg-3-hover); }
.e-15ce864f > .box.bg-4 > .trigger > .action:hover { background: var(--ot-bg-4-hover); }

.e-15ce864f > .box.transparent { background: transparent; }

/* Border */

.e-15ce864f > .box.border { border-color: var(--ot-bg-2-border); }
.e-15ce864f > .box.bg-1.border { border-color: var(--ot-bg-1-border); }
.e-15ce864f > .box.bg-2.border { border-color: var(--ot-bg-2-border); }
.e-15ce864f > .box.bg-3.border { border-color: var(--ot-bg-3-border); }
.e-15ce864f > .box.bg-4.border { border-color: var(--ot-bg-4-border); }

/* ===== SIZE ===== */

.e-15ce864f > .box.size-s > .trigger
{
	height: var(--ot-height-s);
	padding: 0 var(--ot-spacing-s);
}

.e-15ce864f > .box.size-s > .trigger > .icon { font-size: 15px; }

.e-15ce864f > .box.size-s > .trigger > .selected,
.e-15ce864f > .box.size-s > .trigger > .placeholder { font-size: var(--ot-size-s); }

.e-15ce864f > .box.size-s > .trigger > .arrow { font-size: 17px; }

.e-15ce864f > .box.size-s > .trigger > .action { width: 18px; height: 18px; }
.e-15ce864f > .box.size-s > .trigger > .action > i { font-size: 13px; }

.e-15ce864f > .box.size-m > .trigger
{
	height: var(--ot-height-m);
	padding: 0 var(--ot-spacing-m);
}

.e-15ce864f > .box.size-l > .trigger
{
	height: var(--ot-height-l);
	padding: 0 var(--ot-spacing-l);
}

.e-15ce864f > .box.size-l > .trigger > .icon { font-size: 20px; }
.e-15ce864f > .box.size-l > .trigger > .arrow { font-size: 22px; }
.e-15ce864f > .box.size-l > .trigger > .action { width: 26px; height: 26px; }
.e-15ce864f > .box.size-l > .trigger > .action > i { font-size: 16px; }
/* ===== FORM SLIDER ===== */

.e-162fca34
{
	display: contents;
}

/* Box */

.e-162fca34 > .box
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-s);
	width: 100%;
	font-family: var(--ot-font-primary);
}

/* Head */

.e-162fca34 > .box > .head
{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--ot-spacing-m);
}

.e-162fca34 > .box > .head > .info
{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.e-162fca34 > .box > .head > .info > .label
{
	font-size: var(--ot-size-m);
	font-weight: 500;
	color: var(--ot-text-1);
	line-height: 1.3;
}

.e-162fca34 > .box > .head > .info > .description
{
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
	line-height: 1.4;
}

.e-162fca34 > .box > .head > .value
{
	font-size: var(--ot-size-m);
	font-weight: 600;
	color: var(--ot-text-1);
	font-variant-numeric: tabular-nums;
	padding: 2px var(--ot-spacing-s);
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-s);
	flex-shrink: 0;
}

/* Control */

.e-162fca34 > .box > .control
{
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

/* Track */

.e-162fca34 > .box > .control > .track
{
	position: absolute;
	left: 0;
	right: 0;
	height: 6px;
	background: var(--ot-bg-3);
	border-radius: var(--ot-radius-s);
	pointer-events: none;
	overflow: hidden;
}

.e-162fca34 > .box > .control > .track > .fill
{
	height: 100%;
	background: var(--ot-brand);
	border-radius: var(--ot-radius-s);
	transition: width 20ms linear;
}

/* Marks */

.e-162fca34 > .box > .control > .track > .marks
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	pointer-events: none;
}

.e-162fca34 > .box > .control > .track > .marks > .mark
{
	position: absolute;
	top: 50%;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: var(--ot-bg-1);
	transform: translate(-50%, -50%);
	transition: background var(--ot-transition);
}

.e-162fca34 > .box > .control > .track > .marks > .mark.active
{
	background: rgba(255, 255, 255, 0.5);
}

/* Native input */

.e-162fca34 > .box > .control > input
{
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	z-index: 1;
}

.e-162fca34 > .box > .control > input:focus
{
	outline: none;
}

/* Thumb — WebKit */

.e-162fca34 > .box > .control > input::-webkit-slider-thumb
{
	-webkit-appearance: none;
	appearance: none;
	background: white;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: var(--ot-shadow-s), 0 0 0 1px rgba(20, 20, 30, 0.08);
	transition: transform var(--ot-transition), box-shadow var(--ot-transition);
}

.e-162fca34 > .box > .control > input::-webkit-slider-thumb:hover
{
	transform: scale(1.1);
}

.e-162fca34 > .box > .control > input:active::-webkit-slider-thumb
{
	transform: scale(1.05);
	box-shadow: var(--ot-shadow-s), 0 0 0 8px var(--ot-brand-opacity);
}

.e-162fca34 > .box > .control > input:focus-visible::-webkit-slider-thumb
{
	box-shadow: var(--ot-shadow-s), 0 0 0 4px var(--ot-brand-opacity);
}

/* Thumb — Firefox */

.e-162fca34 > .box > .control > input::-moz-range-thumb
{
	background: white;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: var(--ot-shadow-s), 0 0 0 1px rgba(20, 20, 30, 0.08);
	transition: transform var(--ot-transition), box-shadow var(--ot-transition);
}

.e-162fca34 > .box > .control > input::-moz-range-thumb:hover
{
	transform: scale(1.1);
}

.e-162fca34 > .box > .control > input:active::-moz-range-thumb
{
	transform: scale(1.05);
	box-shadow: var(--ot-shadow-s), 0 0 0 8px var(--ot-brand-opacity);
}

/* Range labels */

.e-162fca34 > .box > .range
{
	display: flex;
	justify-content: space-between;
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
	font-variant-numeric: tabular-nums;
}

/* Disabled */

.e-162fca34 > .box.disabled
{
	opacity: 0.5;
	pointer-events: none;
}

/* ===== COLOR ===== */

.e-162fca34 > .box.brand > .control > .track > .fill { background: var(--ot-brand); }
.e-162fca34 > .box.brand > .control > input:active::-webkit-slider-thumb { box-shadow: var(--ot-shadow-s), 0 0 0 8px var(--ot-brand-opacity); }
.e-162fca34 > .box.brand > .control > input:active::-moz-range-thumb { box-shadow: var(--ot-shadow-s), 0 0 0 8px var(--ot-brand-opacity); }
.e-162fca34 > .box.brand > .control > input:focus-visible::-webkit-slider-thumb { box-shadow: var(--ot-shadow-s), 0 0 0 4px var(--ot-brand-opacity); }

.e-162fca34 > .box.blue > .control > .track > .fill { background: var(--ot-blue); }
.e-162fca34 > .box.blue > .control > input:active::-webkit-slider-thumb { box-shadow: var(--ot-shadow-s), 0 0 0 8px var(--ot-blue-opacity); }
.e-162fca34 > .box.blue > .control > input:active::-moz-range-thumb { box-shadow: var(--ot-shadow-s), 0 0 0 8px var(--ot-blue-opacity); }
.e-162fca34 > .box.blue > .control > input:focus-visible::-webkit-slider-thumb { box-shadow: var(--ot-shadow-s), 0 0 0 4px var(--ot-blue-opacity); }

.e-162fca34 > .box.red > .control > .track > .fill { background: var(--ot-red); }
.e-162fca34 > .box.red > .control > input:active::-webkit-slider-thumb { box-shadow: var(--ot-shadow-s), 0 0 0 8px var(--ot-red-opacity); }
.e-162fca34 > .box.red > .control > input:active::-moz-range-thumb { box-shadow: var(--ot-shadow-s), 0 0 0 8px var(--ot-red-opacity); }
.e-162fca34 > .box.red > .control > input:focus-visible::-webkit-slider-thumb { box-shadow: var(--ot-shadow-s), 0 0 0 4px var(--ot-red-opacity); }

.e-162fca34 > .box.orange > .control > .track > .fill { background: var(--ot-orange); }
.e-162fca34 > .box.orange > .control > input:active::-webkit-slider-thumb { box-shadow: var(--ot-shadow-s), 0 0 0 8px var(--ot-orange-opacity); }
.e-162fca34 > .box.orange > .control > input:active::-moz-range-thumb { box-shadow: var(--ot-shadow-s), 0 0 0 8px var(--ot-orange-opacity); }
.e-162fca34 > .box.orange > .control > input:focus-visible::-webkit-slider-thumb { box-shadow: var(--ot-shadow-s), 0 0 0 4px var(--ot-orange-opacity); }

.e-162fca34 > .box.green > .control > .track > .fill { background: var(--ot-green); }
.e-162fca34 > .box.green > .control > input:active::-webkit-slider-thumb { box-shadow: var(--ot-shadow-s), 0 0 0 8px var(--ot-green-opacity); }
.e-162fca34 > .box.green > .control > input:active::-moz-range-thumb { box-shadow: var(--ot-shadow-s), 0 0 0 8px var(--ot-green-opacity); }
.e-162fca34 > .box.green > .control > input:focus-visible::-webkit-slider-thumb { box-shadow: var(--ot-shadow-s), 0 0 0 4px var(--ot-green-opacity); }

/* ===== SIZE ===== */

.e-162fca34 > .box.size-s > .control > .track
{
	height: 4px;
}

.e-162fca34 > .box.size-s > .control > input
{
	height: 14px;
}

.e-162fca34 > .box.size-s > .control > input::-webkit-slider-thumb
{
	width: 14px;
	height: 14px;
}

.e-162fca34 > .box.size-s > .control > input::-moz-range-thumb
{
	width: 14px;
	height: 14px;
}

.e-162fca34 > .box.size-s > .head > .info > .label
{
	font-size: var(--ot-size-s);
}

.e-162fca34 > .box.size-s > .head > .value
{
	font-size: var(--ot-size-s);
}

.e-162fca34 > .box.size-s > .range
{
	font-size: 10.5px;
}

.e-162fca34 > .box.size-m > .control > .track
{
	height: 6px;
}

.e-162fca34 > .box.size-m > .control > input
{
	height: 18px;
}

.e-162fca34 > .box.size-m > .control > input::-webkit-slider-thumb
{
	width: 18px;
	height: 18px;
}

.e-162fca34 > .box.size-m > .control > input::-moz-range-thumb
{
	width: 18px;
	height: 18px;
}

.e-162fca34 > .box.size-l > .control > .track
{
	height: 8px;
}

.e-162fca34 > .box.size-l > .control > input
{
	height: 22px;
}

.e-162fca34 > .box.size-l > .control > input::-webkit-slider-thumb
{
	width: 22px;
	height: 22px;
}

.e-162fca34 > .box.size-l > .control > input::-moz-range-thumb
{
	width: 22px;
	height: 22px;
}

.e-162fca34 > .box.size-l > .head > .info > .label
{
	font-size: var(--ot-size-m);
}

.e-162fca34 > .box.size-l > .head > .value
{
	font-size: 15px;
}
/* ===== FORM TAGS ===== */

.e-283fbe2c
{
	display: contents;
}

/* Box */

.e-283fbe2c > .box
{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	border: 1px solid transparent;
	border-radius: var(--ot-radius-m);
	background: transparent;
	transition: background var(--ot-transition), border-color var(--ot-transition), box-shadow var(--ot-transition);
}

.e-283fbe2c > .box:focus-within
{
	box-shadow: 0 0 0 3px var(--ot-brand-opacity);
}

/* Field */

.e-283fbe2c > .box > .field
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ot-spacing-x);
	padding: var(--ot-spacing-s) var(--ot-spacing-m);
	min-height: var(--ot-height-m);
}

/* Tag */

.e-283fbe2c > .box > .field > .tag
{
	display: inline-flex;
	align-items: center;
	gap: var(--ot-spacing-x);
	padding: 3px 4px 3px var(--ot-spacing-s);
	border-radius: 100px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	color: var(--ot-text-1);
	font-family: var(--ot-font-primary);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1;
	transition: background var(--ot-transition), border-color var(--ot-transition), transform var(--ot-transition);
}

.e-283fbe2c > .box > .field > .tag > .text
{
	padding: 0 var(--ot-spacing-x);
}

/* Remove button */

.e-283fbe2c > .box > .field > .tag > .remove
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 0;
	border: none;
	background: transparent;
	border-radius: 50%;
	color: var(--ot-text-3);
	cursor: pointer;
	outline: none;
	transition: background var(--ot-transition), color var(--ot-transition);
}

.e-283fbe2c > .box > .field > .tag > .remove:hover
{
	background: var(--ot-bg-3);
	color: var(--ot-text-1);
}

.e-283fbe2c > .box > .field > .tag > .remove > i
{
	font-size: 13px;
}

/* Shake */

.e-283fbe2c > .box > .field > .tag.shake
{
	animation: e-283fbe2c-shake 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes e-283fbe2c-shake
{
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-3px); }
	40% { transform: translateX(3px); }
	60% { transform: translateX(-2px); }
	80% { transform: translateX(2px); }
}

/* Input */

.e-283fbe2c > .box > .field > .input
{
	flex: 1;
	min-width: 80px;
	padding: 0;
	background: transparent;
	border: none;
	outline: none;
	color: var(--ot-text-1);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
}

.e-283fbe2c > .box > .field > .input::placeholder
{
	color: var(--ot-text-3);
}

.e-283fbe2c > .box > .field > .input:disabled
{
	cursor: not-allowed;
}

/* Dropdown */

.e-283fbe2c > .box > .dropdown
{
	position: absolute;
	top: calc(100% + var(--ot-spacing-x));
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	padding: var(--ot-spacing-x);
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
	box-shadow: var(--ot-shadow-m);
	z-index: 10;
	max-height: 240px;
	overflow-y: auto;
	animation: e-283fbe2c-drop var(--ot-transition);
}

@keyframes e-283fbe2c-drop
{
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

.e-283fbe2c > .box.above > .dropdown
{
	top: auto;
	bottom: calc(100% + var(--ot-spacing-x));
	animation: e-283fbe2c-drop-above var(--ot-transition);
}

@keyframes e-283fbe2c-drop-above
{
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

.e-283fbe2c > .box > .dropdown > .option
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	width: 100%;
	padding: var(--ot-spacing-s) var(--ot-spacing-m);
	background: transparent;
	border: none;
	border-radius: var(--ot-radius-s);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	color: var(--ot-text-1);
	text-align: left;
	cursor: pointer;
	outline: none;
	transition: background var(--ot-transition-fast), color var(--ot-transition-fast);
}

.e-283fbe2c > .box > .dropdown > .option > .label
{
	font-weight: 500;
	flex-shrink: 0;
}

.e-283fbe2c > .box > .dropdown > .option > .description
{
	color: var(--ot-text-3);
	font-size: var(--ot-size-s);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.e-283fbe2c > .box > .dropdown > .option:hover,
.e-283fbe2c > .box > .dropdown > .option.active
{
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
}

/* Chips (select mode) */

.e-283fbe2c > .box > .chips
{
	display: flex;
	flex-wrap: wrap;
	gap: var(--ot-spacing-x);
	padding: var(--ot-spacing-s) var(--ot-spacing-m);
	min-height: var(--ot-height-m);
}

.e-283fbe2c > .box > .chips > .placeholder
{
	color: var(--ot-text-3);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	font-weight: 400;
	user-select: none;
}

.e-283fbe2c > .box > .chips > .chip
{
	display: inline-flex;
	align-items: center;
	gap: var(--ot-spacing-x);
	padding: 4px var(--ot-spacing-s);
	border-radius: 100px;
	background: var(--ot-bg-3);
	border: 1px solid var(--ot-bg-3-border);
	color: var(--ot-text-2);
	font-family: var(--ot-font-primary);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	outline: none;
	user-select: none;
	transition: background var(--ot-transition), border-color var(--ot-transition), color var(--ot-transition), transform var(--ot-transition);
}

.e-283fbe2c > .box > .chips > .chip:hover
{
	background: var(--ot-bg-3-hover);
	color: var(--ot-text-1);
}

.e-283fbe2c > .box > .chips > .chip:active
{
	transform: scale(0.95);
}

.e-283fbe2c > .box > .chips > .chip.selected
{
	background: var(--ot-brand-opacity);
	border-color: var(--ot-brand);
	color: var(--ot-brand);
}

.e-283fbe2c > .box > .chips > .chip:disabled
{
	cursor: not-allowed;
	opacity: 0.5;
}

/* Disabled */

.e-283fbe2c > .box.disabled
{
	cursor: not-allowed;
	opacity: 0.55;
}

.e-283fbe2c > .box.disabled > .field
{
	cursor: not-allowed;
}

/* ===== BACKGROUND ===== */

.e-283fbe2c > .box.bg-1 { background: var(--ot-bg-1); }

.e-283fbe2c > .box.bg-1 > .field > .tag
{
	background: var(--ot-bg-2);
	border-color: var(--ot-bg-1-border);
}

.e-283fbe2c > .box.bg-1 > .field > .tag > .remove:hover { background: var(--ot-bg-3); }
.e-283fbe2c > .box.bg-1 > .dropdown { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); }

.e-283fbe2c > .box.bg-2 { background: var(--ot-bg-2); }

.e-283fbe2c > .box.bg-2 > .field > .tag
{
	background: var(--ot-bg-1);
	border-color: var(--ot-bg-2-border);
}

.e-283fbe2c > .box.bg-2 > .field > .tag > .remove:hover { background: var(--ot-bg-2-hover); }
.e-283fbe2c > .box.bg-2 > .dropdown { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }

.e-283fbe2c > .box.bg-3 { background: var(--ot-bg-3); }

.e-283fbe2c > .box.bg-3 > .field > .tag
{
	background: var(--ot-bg-2);
	border-color: var(--ot-bg-3-border);
}

.e-283fbe2c > .box.bg-3 > .field > .tag > .remove:hover { background: var(--ot-bg-3-hover); }
.e-283fbe2c > .box.bg-3 > .dropdown { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }

.e-283fbe2c > .box.bg-4 { background: var(--ot-bg-4); }

.e-283fbe2c > .box.bg-4 > .field > .tag
{
	background: var(--ot-bg-3);
	border-color: var(--ot-bg-4-border);
}

.e-283fbe2c > .box.bg-4 > .field > .tag > .remove:hover { background: var(--ot-bg-4-hover); }
.e-283fbe2c > .box.bg-4 > .dropdown { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }

.e-283fbe2c > .box.bg-1:hover:not(:focus-within):not(.disabled) { background: var(--ot-bg-1-hover); }
.e-283fbe2c > .box.bg-2:hover:not(:focus-within):not(.disabled) { background: var(--ot-bg-2-hover); }
.e-283fbe2c > .box.bg-3:hover:not(:focus-within):not(.disabled) { background: var(--ot-bg-3-hover); }
.e-283fbe2c > .box.bg-4:hover:not(:focus-within):not(.disabled) { background: var(--ot-bg-4-hover); }

/* Transparent */

.e-283fbe2c > .box.transparent { background: transparent; }

/* Border */

.e-283fbe2c > .box.border { border-color: var(--ot-bg-2-border); }
.e-283fbe2c > .box.border.bg-1 { border-color: var(--ot-bg-1-border); }
.e-283fbe2c > .box.border.bg-2 { border-color: var(--ot-bg-2-border); }
.e-283fbe2c > .box.border.bg-3 { border-color: var(--ot-bg-3-border); }
.e-283fbe2c > .box.border.bg-4 { border-color: var(--ot-bg-4-border); }

/* ===== COLOR (tag chips) ===== */

.e-283fbe2c > .box.brand > .field > .tag { background: var(--ot-brand-opacity); border-color: var(--ot-brand); color: var(--ot-brand); }
.e-283fbe2c > .box.brand > .field > .tag > .remove { color: var(--ot-brand); }
.e-283fbe2c > .box.brand > .field > .tag > .remove:hover { background: var(--ot-brand); color: #fff; }
.e-283fbe2c > .box.brand > .chips > .chip.selected { background: var(--ot-brand-opacity); border-color: var(--ot-brand); color: var(--ot-brand); }

.e-283fbe2c > .box.blue > .field > .tag { background: var(--ot-blue-opacity); border-color: var(--ot-blue); color: var(--ot-blue); }
.e-283fbe2c > .box.blue > .field > .tag > .remove { color: var(--ot-blue); }
.e-283fbe2c > .box.blue > .field > .tag > .remove:hover { background: var(--ot-blue); color: #fff; }
.e-283fbe2c > .box.blue > .chips > .chip.selected { background: var(--ot-blue-opacity); border-color: var(--ot-blue); color: var(--ot-blue); }

.e-283fbe2c > .box.red > .field > .tag { background: var(--ot-red-opacity); border-color: var(--ot-red); color: var(--ot-red); }
.e-283fbe2c > .box.red > .field > .tag > .remove { color: var(--ot-red); }
.e-283fbe2c > .box.red > .field > .tag > .remove:hover { background: var(--ot-red); color: #fff; }
.e-283fbe2c > .box.red > .chips > .chip.selected { background: var(--ot-red-opacity); border-color: var(--ot-red); color: var(--ot-red); }

.e-283fbe2c > .box.orange > .field > .tag { background: var(--ot-orange-opacity); border-color: var(--ot-orange); color: var(--ot-orange); }
.e-283fbe2c > .box.orange > .field > .tag > .remove { color: var(--ot-orange); }
.e-283fbe2c > .box.orange > .field > .tag > .remove:hover { background: var(--ot-orange); color: #fff; }
.e-283fbe2c > .box.orange > .chips > .chip.selected { background: var(--ot-orange-opacity); border-color: var(--ot-orange); color: var(--ot-orange); }

.e-283fbe2c > .box.green > .field > .tag { background: var(--ot-green-opacity); border-color: var(--ot-green); color: var(--ot-green); }
.e-283fbe2c > .box.green > .field > .tag > .remove { color: var(--ot-green); }
.e-283fbe2c > .box.green > .field > .tag > .remove:hover { background: var(--ot-green); color: #fff; }
.e-283fbe2c > .box.green > .chips > .chip.selected { background: var(--ot-green-opacity); border-color: var(--ot-green); color: var(--ot-green); }

/* ===== SIZE ===== */

/* Small */

.e-283fbe2c > .box.size-s > .field,
.e-283fbe2c > .box.size-s > .chips
{
	padding: var(--ot-spacing-x) var(--ot-spacing-s);
	min-height: var(--ot-height-s);
}

.e-283fbe2c > .box.size-s > .field > .tag
{
	font-size: 10.5px;
	padding: 2px 3px 2px 7px;
}

.e-283fbe2c > .box.size-s > .field > .tag > .remove
{
	width: 14px;
	height: 14px;
}

.e-283fbe2c > .box.size-s > .field > .tag > .remove > i
{
	font-size: 11px;
}

.e-283fbe2c > .box.size-s > .field > .input
{
	font-size: var(--ot-size-s);
}

.e-283fbe2c > .box.size-s > .chips > .chip
{
	font-size: 10.5px;
	padding: 2px var(--ot-spacing-s);
}

/* Medium */

.e-283fbe2c > .box.size-m > .field,
.e-283fbe2c > .box.size-m > .chips
{
	padding: var(--ot-spacing-s) var(--ot-spacing-m);
	min-height: var(--ot-height-m);
}

/* Large */

.e-283fbe2c > .box.size-l > .field,
.e-283fbe2c > .box.size-l > .chips
{
	padding: var(--ot-spacing-s) var(--ot-spacing-l);
	min-height: var(--ot-height-l);
}

.e-283fbe2c > .box.size-l > .field > .tag
{
	font-size: 12.5px;
	padding: 4px 5px 4px var(--ot-spacing-s);
}

.e-283fbe2c > .box.size-l > .field > .tag > .remove
{
	width: 18px;
	height: 18px;
}

.e-283fbe2c > .box.size-l > .field > .tag > .remove > i
{
	font-size: 14px;
}

.e-283fbe2c > .box.size-l > .field > .input
{
	font-size: var(--ot-size-m);
}

.e-283fbe2c > .box.size-l > .chips > .chip
{
	font-size: 12.5px;
	padding: 5px var(--ot-spacing-m);
}
/* ===== FORM TEXTAREA ===== */

.e-5973ffcd
{
	display: contents;
}

/* Box */

.e-5973ffcd > .box
{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--ot-spacing-s) var(--ot-spacing-m);
	border: 1px solid transparent;
	border-radius: var(--ot-radius-m);
	background: transparent;
	transition: background var(--ot-transition), border-color var(--ot-transition), box-shadow var(--ot-transition);
}

.e-5973ffcd > .box:focus-within
{
	box-shadow: 0 0 0 3px var(--ot-brand-opacity);
}

/* Textarea */

.e-5973ffcd > .box > textarea
{
	width: 100%;
	padding: 0;
	background: transparent;
	border: none;
	outline: none;
	color: var(--ot-text-1);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	font-weight: 500;
	line-height: 1.6;
}

.e-5973ffcd > .box > textarea::placeholder
{
	color: var(--ot-text-3);
	font-weight: 400;
}

.e-5973ffcd > .box > textarea:disabled
{
	cursor: not-allowed;
}

/* Counter */

.e-5973ffcd > .box > .counter
{
	display: flex;
	align-items: center;
	gap: 2px;
	align-self: flex-end;
	margin-top: var(--ot-spacing-x);
	padding-top: var(--ot-spacing-x);
	font-family: var(--ot-font-primary);
	font-size: 10.5px;
	font-weight: 500;
	color: var(--ot-text-3);
	font-variant-numeric: tabular-nums;
	transition: color var(--ot-transition);
	pointer-events: none;
}

.e-5973ffcd > .box > .counter > .slash
{
	opacity: 0.5;
}

.e-5973ffcd > .box > .counter > .full
{
	color: var(--ot-red);
	font-weight: 600;
}

/* Disabled */

.e-5973ffcd > .box.disabled
{
	cursor: not-allowed;
	opacity: 0.55;
}

/* ===== BACKGROUND ===== */

.e-5973ffcd > .box.bg-1 { background: var(--ot-bg-1); }
.e-5973ffcd > .box.bg-2 { background: var(--ot-bg-2); }
.e-5973ffcd > .box.bg-3 { background: var(--ot-bg-3); }
.e-5973ffcd > .box.bg-4 { background: var(--ot-bg-4); }

.e-5973ffcd > .box.bg-1:hover:not(:focus-within):not(.disabled) { background: var(--ot-bg-1-hover); }
.e-5973ffcd > .box.bg-2:hover:not(:focus-within):not(.disabled) { background: var(--ot-bg-2-hover); }
.e-5973ffcd > .box.bg-3:hover:not(:focus-within):not(.disabled) { background: var(--ot-bg-3-hover); }
.e-5973ffcd > .box.bg-4:hover:not(:focus-within):not(.disabled) { background: var(--ot-bg-4-hover); }

/* Transparent */

.e-5973ffcd > .box.transparent
{
	background: transparent;
	padding: 0;
}

/* ===== BORDER ===== */

.e-5973ffcd > .box.border { border-color: var(--ot-bg-2-border); }
.e-5973ffcd > .box.bg-1.border { border-color: var(--ot-bg-1-border); }
.e-5973ffcd > .box.bg-2.border { border-color: var(--ot-bg-2-border); }
.e-5973ffcd > .box.bg-3.border { border-color: var(--ot-bg-3-border); }
.e-5973ffcd > .box.bg-4.border { border-color: var(--ot-bg-4-border); }

/* ===== SIZE ===== */

.e-5973ffcd > .box.size-s
{
	padding: var(--ot-spacing-x) var(--ot-spacing-s);
}

.e-5973ffcd > .box.size-s > textarea
{
	font-size: var(--ot-size-s);
	line-height: 1.5;
}

.e-5973ffcd > .box.size-m
{
	padding: var(--ot-spacing-s) var(--ot-spacing-m);
}

.e-5973ffcd > .box.size-m > textarea
{
	font-size: var(--ot-size-m);
	line-height: 1.6;
}

.e-5973ffcd > .box.size-l
{
	padding: var(--ot-spacing-m) var(--ot-spacing-l);
}

.e-5973ffcd > .box.size-l > textarea
{
	font-size: var(--ot-size-m);
	line-height: 1.7;
}
/* ===== FORM TOGGLE ===== */

.e-180e0ca7
{
	display: contents;
}

/* Box */

.e-180e0ca7 > .box
{
	position: relative;
	display: inline-flex;
	align-items: flex-start;
	gap: var(--ot-spacing-s);
	cursor: pointer;
	user-select: none;
	font-family: var(--ot-font-primary);
}

.e-180e0ca7 > .box.reverse
{
	flex-direction: row-reverse;
}

/* Hidden input */

.e-180e0ca7 > .box > input
{
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
}

/* Track */

.e-180e0ca7 > .box > .track
{
	position: relative;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	border-radius: 100px;
	background: var(--ot-bg-3);
	transition: background var(--ot-transition), border-color var(--ot-transition), box-shadow var(--ot-transition);
}

/* Thumb */

.e-180e0ca7 > .box > .track > .thumb
{
	position: absolute;
	top: 50%;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--ot-shadow-s);
	transform: translateY(-50%);
	transition: transform var(--ot-transition);
}

/* Active */

.e-180e0ca7 > .box.active > .track
{
	background: var(--ot-brand);
}

/* Press feedback */

.e-180e0ca7 > .box:active:not(.disabled) > .track > .thumb
{
	transform: translateY(-50%) scaleX(1.1);
}

/* Focus ring */

.e-180e0ca7 > .box > input:focus-visible ~ .track
{
	box-shadow: 0 0 0 3px var(--ot-brand-opacity);
}

/* Info */

.e-180e0ca7 > .box > .info
{
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding-top: 1px;
}

.e-180e0ca7 > .box > .info > .label
{
	font-size: var(--ot-size-m);
	font-weight: 500;
	color: var(--ot-text-1);
	line-height: 1.3;
	transition: color var(--ot-transition);
}

.e-180e0ca7 > .box > .info > .desc
{
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
	line-height: 1.4;
	transition: color var(--ot-transition);
}

/* Disabled */

.e-180e0ca7 > .box.disabled
{
	cursor: not-allowed;
}

.e-180e0ca7 > .box.disabled > .track
{
	opacity: 0.45;
}

.e-180e0ca7 > .box.disabled > .info > .label,
.e-180e0ca7 > .box.disabled > .info > .desc
{
	color: var(--ot-text-3);
	opacity: 0.6;
}

/* ===== BACKGROUND ===== */

.e-180e0ca7 > .box.bg-1 > .track { background: var(--ot-bg-1); }
.e-180e0ca7 > .box.bg-2 > .track { background: var(--ot-bg-2); }
.e-180e0ca7 > .box.bg-3 > .track { background: var(--ot-bg-3); }
.e-180e0ca7 > .box.bg-4 > .track { background: var(--ot-bg-4); }

/* Border */

.e-180e0ca7 > .box.border.bg-1 > .track { border: 1px solid var(--ot-bg-1-border); }
.e-180e0ca7 > .box.border.bg-2 > .track { border: 1px solid var(--ot-bg-2-border); }
.e-180e0ca7 > .box.border.bg-3 > .track { border: 1px solid var(--ot-bg-3-border); }
.e-180e0ca7 > .box.border.bg-4 > .track { border: 1px solid var(--ot-bg-4-border); }

/* ===== COLOR (active state) ===== */

.e-180e0ca7 > .box.active.brand > .track { background: var(--ot-brand); border-color: var(--ot-brand); }
.e-180e0ca7 > .box.active.blue > .track { background: var(--ot-blue); border-color: var(--ot-blue); }
.e-180e0ca7 > .box.active.red > .track { background: var(--ot-red); border-color: var(--ot-red); }
.e-180e0ca7 > .box.active.orange > .track { background: var(--ot-orange); border-color: var(--ot-orange); }
.e-180e0ca7 > .box.active.green > .track { background: var(--ot-green); border-color: var(--ot-green); }

/* Focus per color */

.e-180e0ca7 > .box.blue > input:focus-visible ~ .track { box-shadow: 0 0 0 3px var(--ot-blue-opacity); }
.e-180e0ca7 > .box.red > input:focus-visible ~ .track { box-shadow: 0 0 0 3px var(--ot-red-opacity); }
.e-180e0ca7 > .box.orange > input:focus-visible ~ .track { box-shadow: 0 0 0 3px var(--ot-orange-opacity); }
.e-180e0ca7 > .box.green > input:focus-visible ~ .track { box-shadow: 0 0 0 3px var(--ot-green-opacity); }

/* ===== SIZE ===== */

/* Small */

.e-180e0ca7 > .box.size-s > .track
{
	width: 28px;
	height: 16px;
}

.e-180e0ca7 > .box.size-s > .track > .thumb
{
	width: 12px;
	height: 12px;
	left: 2px;
}

.e-180e0ca7 > .box.size-s.active > .track > .thumb
{
	transform: translate(12px, -50%);
}

.e-180e0ca7 > .box.size-s:active:not(.disabled) > .track > .thumb
{
	transform: translateY(-50%) scaleX(1.1);
}

.e-180e0ca7 > .box.size-s.active:active:not(.disabled) > .track > .thumb
{
	transform: translate(10px, -50%) scaleX(1.2);
}

.e-180e0ca7 > .box.size-s > .info > .label
{
	font-size: var(--ot-size-s);
}

.e-180e0ca7 > .box.size-s > .info > .desc
{
	font-size: 10.5px;
}

/* Medium */

.e-180e0ca7 > .box.size-m > .track
{
	width: 36px;
	height: 20px;
}

.e-180e0ca7 > .box.size-m > .track > .thumb
{
	width: 16px;
	height: 16px;
	left: 2px;
}

.e-180e0ca7 > .box.size-m.active > .track > .thumb
{
	transform: translate(16px, -50%);
}

.e-180e0ca7 > .box.size-m:active:not(.disabled) > .track > .thumb
{
	transform: translateY(-50%) scaleX(1.15);
}

.e-180e0ca7 > .box.size-m.active:active:not(.disabled) > .track > .thumb
{
	transform: translate(13px, -50%) scaleX(1.25);
}

/* Large */

.e-180e0ca7 > .box.size-l > .track
{
	width: 44px;
	height: 24px;
}

.e-180e0ca7 > .box.size-l > .track > .thumb
{
	width: 20px;
	height: 20px;
	left: 2px;
}

.e-180e0ca7 > .box.size-l.active > .track > .thumb
{
	transform: translate(20px, -50%);
}

.e-180e0ca7 > .box.size-l:active:not(.disabled) > .track > .thumb
{
	transform: translateY(-50%) scaleX(1.15);
}

.e-180e0ca7 > .box.size-l.active:active:not(.disabled) > .track > .thumb
{
	transform: translate(17px, -50%) scaleX(1.25);
}

.e-180e0ca7 > .box.size-l > .info > .label
{
	font-size: var(--ot-size-m);
}
/* ===== FORM TRANSFER ===== */

.e-1e66ff82
{
	display: contents;
}

/* Box */

.e-1e66ff82 > .box
{
	display: flex;
	align-items: stretch;
	gap: var(--ot-spacing-m);
	width: 100%;
	min-height: 320px;
}

/* ===== PANEL ===== */

.e-1e66ff82 > .box > .panel
{
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	border-radius: var(--ot-radius-m);
	border: 1px solid transparent;
	overflow: hidden;
}

/* Head */

.e-1e66ff82 > .box > .panel > .head
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--ot-spacing-s) var(--ot-spacing-m);
	flex-shrink: 0;
}

.e-1e66ff82 > .box > .panel > .head > .title
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	font-weight: 700;
	color: var(--ot-text-2);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.e-1e66ff82 > .box > .panel > .head > .counter
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	font-weight: 600;
	color: var(--ot-text-3);
}

/* Search */

.e-1e66ff82 > .box > .panel > .search
{
	padding: 0 var(--ot-spacing-s) var(--ot-spacing-s);
	flex-shrink: 0;
}

/* List */

.e-1e66ff82 > .box > .panel > .list
{
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0 var(--ot-spacing-s) var(--ot-spacing-s);
	flex: 1;
	min-height: 0;
	max-height: 300px;
	overflow-y: auto;
}

/* Empty */

.e-1e66ff82 > .box > .panel > .list > .empty
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ot-spacing-s);
	flex: 1;
	min-height: 160px;
	color: var(--ot-text-3);
}

.e-1e66ff82 > .box > .panel > .list > .empty > i
{
	font-size: 28px;
	opacity: 0.6;
}

.e-1e66ff82 > .box > .panel > .list > .empty > span
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
}

/* Item */

.e-1e66ff82 > .box > .panel > .list > .item
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	width: 100%;
	padding: var(--ot-spacing-s);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--ot-radius-s);
	text-align: left;
	cursor: pointer;
	outline: none;
	transition: background var(--ot-transition-fast), border-color var(--ot-transition-fast), color var(--ot-transition-fast);
}

.e-1e66ff82 > .box > .panel > .list > .item:hover:not(.disabled):not(.selected)
{
	background: var(--ot-bg-2);
}

.e-1e66ff82 > .box > .panel > .list > .item.selected
{
	background: var(--ot-brand-opacity);
	border-color: var(--ot-brand-border);
}

.e-1e66ff82 > .box > .panel > .list > .item.disabled
{
	opacity: 0.4;
	cursor: not-allowed;
}

/* Item icon */

.e-1e66ff82 > .box > .panel > .list > .item > .item-icon
{
	flex-shrink: 0;
	font-size: 20px;
	color: var(--ot-text-2);
}

.e-1e66ff82 > .box > .panel > .list > .item.selected > .item-icon
{
	color: var(--ot-brand);
}

/* Item text */

.e-1e66ff82 > .box > .panel > .list > .item > .item-text
{
	display: flex;
	flex-direction: column;
	gap: 1px;
	flex: 1;
	min-width: 0;
}

.e-1e66ff82 > .box > .panel > .list > .item > .item-text > .item-label
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	font-weight: 500;
	color: var(--ot-text-1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.e-1e66ff82 > .box > .panel > .list > .item > .item-text > .item-desc
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Item check */

.e-1e66ff82 > .box > .panel > .list > .item > .item-check
{
	flex-shrink: 0;
	font-size: 18px;
	color: var(--ot-brand);
}

/* ===== CONTROLS ===== */

.e-1e66ff82 > .box > .controls
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ot-spacing-s);
	flex-shrink: 0;
	padding: var(--ot-spacing-s);
}

.e-1e66ff82 > .box > .controls > .control
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ot-height-m);
	height: var(--ot-height-m);
	padding: 0;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-s);
	color: var(--ot-text-2);
	cursor: pointer;
	outline: none;
	transition: background var(--ot-transition-fast), color var(--ot-transition-fast), border-color var(--ot-transition-fast), transform var(--ot-transition-fast);
}

.e-1e66ff82 > .box > .controls > .control:hover:not(:disabled)
{
	background: var(--ot-bg-3);
	color: var(--ot-text-1);
	border-color: var(--ot-bg-3-border);
}

.e-1e66ff82 > .box > .controls > .control.accent:not(:disabled)
{
	background: var(--ot-brand);
	border-color: var(--ot-brand);
	color: #fff;
}

.e-1e66ff82 > .box > .controls > .control.accent:hover:not(:disabled)
{
	background: var(--ot-brand-hover);
	border-color: var(--ot-brand-hover);
	transform: translateX(2px);
}

.e-1e66ff82 > .box > .controls > .control.accent:nth-child(3):hover:not(:disabled)
{
	transform: translateX(-2px);
}

.e-1e66ff82 > .box > .controls > .control:disabled
{
	opacity: 0.35;
	cursor: not-allowed;
}

.e-1e66ff82 > .box > .controls > .control > i
{
	font-size: 18px;
}

/* ===== BACKGROUND ===== */

.e-1e66ff82 > .box.bg-1 > .panel { background: var(--ot-bg-1); }
.e-1e66ff82 > .box.bg-2 > .panel { background: var(--ot-bg-2); }
.e-1e66ff82 > .box.bg-3 > .panel { background: var(--ot-bg-3); }
.e-1e66ff82 > .box.bg-4 > .panel { background: var(--ot-bg-4); }

/* Border */

.e-1e66ff82 > .box.border.bg-1 > .panel { border-color: var(--ot-bg-1-border); }
.e-1e66ff82 > .box.border.bg-2 > .panel { border-color: var(--ot-bg-2-border); }
.e-1e66ff82 > .box.border.bg-3 > .panel { border-color: var(--ot-bg-3-border); }
.e-1e66ff82 > .box.border.bg-4 > .panel { border-color: var(--ot-bg-4-border); }

/* ===== SIZE ===== */

.e-1e66ff82 > .box.size-s > .panel > .head
{
	padding: var(--ot-spacing-x) var(--ot-spacing-s);
}

.e-1e66ff82 > .box.size-s > .panel > .list > .item
{
	padding: var(--ot-spacing-x) var(--ot-spacing-s);
	gap: var(--ot-spacing-x);
}

.e-1e66ff82 > .box.size-s > .panel > .list > .item > .item-icon
{
	font-size: 16px;
}

.e-1e66ff82 > .box.size-s > .controls > .control
{
	width: var(--ot-height-s);
	height: var(--ot-height-s);
}

.e-1e66ff82 > .box.size-s > .controls > .control > i
{
	font-size: 15px;
}

.e-1e66ff82 > .box.size-l > .panel > .head
{
	padding: var(--ot-spacing-m) var(--ot-spacing-l);
}

.e-1e66ff82 > .box.size-l > .panel > .list > .item
{
	padding: var(--ot-spacing-m) var(--ot-spacing-l);
	gap: var(--ot-spacing-m);
}

.e-1e66ff82 > .box.size-l > .panel > .list > .item > .item-icon
{
	font-size: 22px;
}

.e-1e66ff82 > .box.size-l > .controls > .control
{
	width: var(--ot-height-l);
	height: var(--ot-height-l);
}

.e-1e66ff82 > .box.size-l > .controls > .control > i
{
	font-size: 20px;
}

/* ===== DISABLED ===== */

.e-1e66ff82 > .box.disabled
{
	opacity: 0.65;
	pointer-events: none;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 767.98px)
{
	.e-1e66ff82 > .box
	{
		flex-direction: column;
	}

	.e-1e66ff82 > .box > .controls
	{
		flex-direction: row;
		width: 100%;
		justify-content: center;
	}
}
/* ===== FORM UPLOAD ===== */

.e-3f8bc2c8
{
	display: contents;
}

/* Box */

.e-3f8bc2c8 > .box
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-s);
	width: 100%;
}

.e-3f8bc2c8 > .box.disabled
{
	opacity: 0.5;
	pointer-events: none;
}

/* ===== DROPZONE ===== */

.e-3f8bc2c8 > .box > .zone
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 160px;
	padding: var(--ot-spacing-l);
	background: var(--ot-bg-2);
	border: 1.5px dashed var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
	cursor: pointer;
	transition: background var(--ot-transition), border-color var(--ot-transition), transform var(--ot-transition);
}

.e-3f8bc2c8 > .box > .zone:hover
{
	background: var(--ot-bg-3);
	border-color: var(--ot-bg-3-border);
}

/* Hidden input */

.e-3f8bc2c8 > .box > .zone > .input
{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* Prompt */

.e-3f8bc2c8 > .box > .zone > .prompt
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ot-spacing-s);
	text-align: center;
	cursor: pointer;
}

.e-3f8bc2c8 > .box > .zone > .prompt > .badge
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--ot-radius-m);
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	color: var(--ot-text-2);
	transition: background var(--ot-transition), color var(--ot-transition), border-color var(--ot-transition), transform var(--ot-transition);
}

.e-3f8bc2c8 > .box > .zone > .prompt > .badge > i
{
	font-size: 24px;
}

.e-3f8bc2c8 > .box > .zone > .prompt > .badge > .spin
{
	font-size: 24px;
	animation: e-3f8bc2c8-spin 0.8s linear infinite;
}

@keyframes e-3f8bc2c8-spin
{
	to { transform: rotate(360deg); }
}

.e-3f8bc2c8 > .box > .zone > .prompt > .text
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.e-3f8bc2c8 > .box > .zone > .prompt > .text > .label
{
	font-size: var(--ot-size-m);
	font-weight: 600;
	color: var(--ot-text-1);
}

.e-3f8bc2c8 > .box > .zone > .prompt > .text > .hint
{
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
}

/* Has files — zone becomes grid container */

.e-3f8bc2c8 > .box > .zone.compact
{
	min-height: auto;
	padding: var(--ot-spacing-s);
	align-items: stretch;
	justify-content: stretch;
}

/* ===== GRID (inside zone) ===== */

.e-3f8bc2c8 > .box > .zone > .grid
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: var(--ot-spacing-s);
	width: 100%;
}

/* Card */

.e-3f8bc2c8 > .box > .zone > .grid > .card
{
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--ot-radius-s);
	overflow: hidden;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	animation: e-3f8bc2c8-in 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes e-3f8bc2c8-in
{
	from { opacity: 0; transform: scale(0.95); }
	to { opacity: 1; transform: scale(1); }
}

/* Thumbnail */

.e-3f8bc2c8 > .box > .zone > .grid > .card > .thumb
{
	width: 100%;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: var(--ot-radius-s);
}

.e-3f8bc2c8 > .box > .zone > .grid > .card > .thumb > img
{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.e-3f8bc2c8 > .box > .zone > .grid > .card > .thumb.placeholder
{
	color: var(--ot-text-3);
}

.e-3f8bc2c8 > .box > .zone > .grid > .card > .thumb.placeholder > i
{
	font-size: 28px;
}

/* Remove button */

.e-3f8bc2c8 > .box > .zone > .grid > .card > .remove
{
	position: absolute;
	top: var(--ot-spacing-x);
	right: var(--ot-spacing-x);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	background: var(--ot-bg-1-opacity);
	backdrop-filter: var(--ot-blur);
	-webkit-backdrop-filter: var(--ot-blur);
	border: none;
	border-radius: var(--ot-radius-s);
	color: var(--ot-text-2);
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--ot-transition-fast), background var(--ot-transition-fast), color var(--ot-transition-fast);
}

.e-3f8bc2c8 > .box > .zone > .grid > .card:hover > .remove
{
	opacity: 1;
}

.e-3f8bc2c8 > .box > .zone > .grid > .card > .remove:hover
{
	background: var(--ot-red-opacity);
	color: var(--ot-red);
}

.e-3f8bc2c8 > .box > .zone > .grid > .card > .remove > i
{
	font-size: 14px;
}

/* Add card */

.e-3f8bc2c8 > .box > .zone > .grid > .card.add
{
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	border: 1.5px dashed var(--ot-bg-2-border);
	border-radius: var(--ot-radius-s);
	background: var(--ot-bg-1);
	cursor: pointer;
	color: var(--ot-text-3);
	transition: background var(--ot-transition), border-color var(--ot-transition), color var(--ot-transition);
}

.e-3f8bc2c8 > .box > .zone > .grid > .card.add:hover
{
	background: var(--ot-bg-3);
	border-color: var(--ot-bg-3-border);
	color: var(--ot-text-1);
}

.e-3f8bc2c8 > .box > .zone > .grid > .card.add.loading
{
	cursor: default;
	border-style: solid;
}

.e-3f8bc2c8 > .box > .zone > .grid > .card.add .spin
{
	animation: e-3f8bc2c8-spin 0.8s linear infinite;
}

.e-3f8bc2c8 > .box > .zone > .grid > .card.add > i
{
	font-size: 24px;
}

/* ===== FOOTER ===== */

.e-3f8bc2c8 > .box > .footer
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--ot-spacing-x) var(--ot-spacing-s);
}

.e-3f8bc2c8 > .box > .footer > .count
{
	font-size: var(--ot-size-s);
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.e-3f8bc2c8 > .box > .footer > .clear
{
	display: inline-flex;
	align-items: center;
	gap: var(--ot-spacing-x);
	padding: var(--ot-spacing-x) var(--ot-spacing-s);
	background: transparent;
	border: none;
	border-radius: var(--ot-radius-s);
	font-size: var(--ot-size-s);
	font-weight: 500;
	color: var(--ot-text-3);
	cursor: pointer;
	transition: background var(--ot-transition-fast), color var(--ot-transition-fast);
}

.e-3f8bc2c8 > .box > .footer > .clear:hover
{
	background: var(--ot-red-opacity);
	color: var(--ot-red);
}

.e-3f8bc2c8 > .box > .footer > .clear > i
{
	font-size: 14px;
}


/* ===== BACKGROUND ===== */

.e-3f8bc2c8 > .box.bg-1 > .zone { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); }
.e-3f8bc2c8 > .box.bg-1 > .zone:hover { background: var(--ot-bg-2); }
.e-3f8bc2c8 > .box.bg-1 > .zone > .prompt > .badge { background: var(--ot-bg-2); }

.e-3f8bc2c8 > .box.bg-2 > .zone { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
.e-3f8bc2c8 > .box.bg-2 > .zone:hover { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }

.e-3f8bc2c8 > .box.bg-3 > .zone { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }
.e-3f8bc2c8 > .box.bg-3 > .zone:hover { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }

.e-3f8bc2c8 > .box.bg-4 > .zone { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }

/* ===== SIZE ===== */

.e-3f8bc2c8 > .box.size-s > .zone
{
	min-height: 100px;
	padding: var(--ot-spacing-m);
}

.e-3f8bc2c8 > .box.size-s > .zone > .prompt > .badge
{
	width: 36px;
	height: 36px;
}

.e-3f8bc2c8 > .box.size-s > .zone > .prompt > .badge > i
{
	font-size: 18px;
}

.e-3f8bc2c8 > .box.size-s > .zone > .grid
{
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: var(--ot-spacing-x);
}

.e-3f8bc2c8 > .box.size-l > .zone
{
	min-height: 220px;
	padding: var(--ot-spacing-l);
}

.e-3f8bc2c8 > .box.size-l > .zone > .prompt > .badge
{
	width: 60px;
	height: 60px;
}

.e-3f8bc2c8 > .box.size-l > .zone > .prompt > .badge > i
{
	font-size: 30px;
}

.e-3f8bc2c8 > .box.size-l > .zone > .grid
{
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
/* ===== FORM UPLOAD INPUT ===== */

.e-37c1b86d
{
	display: contents;
}

/* Box */

.e-37c1b86d > .box
{
	display: flex;
	flex-direction: column;
	width: 100%;
}

.e-37c1b86d > .box.disabled
{
	opacity: 0.5;
	pointer-events: none;
}

/* Field */

.e-37c1b86d > .box > .field
{
	display: flex;
	align-items: center;
	width: 100%;
	height: var(--ot-height-m);
	padding: 0 var(--ot-spacing-m);
	border: 1px solid transparent;
	border-radius: var(--ot-radius-m);
	transition: background var(--ot-transition), border-color var(--ot-transition), box-shadow var(--ot-transition);
}

.e-37c1b86d > .box > .field:focus-within
{
	box-shadow: 0 0 0 3px var(--ot-brand-opacity);
}

/* Preview */

.e-37c1b86d > .box > .field > .preview
{
	flex-shrink: 0;
	width: var(--ot-height-s);
	height: var(--ot-height-s);
	border-radius: var(--ot-radius-s);
	overflow: hidden;
	margin-right: var(--ot-spacing-s);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ot-bg-1);
}

.e-37c1b86d > .box > .field > .preview > img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.e-37c1b86d > .box > .field > .preview.placeholder
{
	color: var(--ot-text-3);
}

.e-37c1b86d > .box > .field > .preview.placeholder > i
{
	font-size: 16px;
}

/* Icon */

.e-37c1b86d > .box > .field > .icon
{
	flex-shrink: 0;
	font-size: 18px;
	color: var(--ot-text-3);
	margin-right: var(--ot-spacing-s);
	transition: color var(--ot-transition);
}

.e-37c1b86d > .box > .field:focus-within > .icon
{
	color: var(--ot-text-1);
}

.e-37c1b86d > .box > .field > .icon.spin
{
	margin-right: 0;
	margin-left: var(--ot-spacing-s);
	animation: e-37c1b86d-spin 0.8s linear infinite;
}

@keyframes e-37c1b86d-spin
{
	to { transform: rotate(360deg); }
}

/* Input */

.e-37c1b86d > .box > .field > .input
{
	flex: 1;
	min-width: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	background: transparent;
	border: none;
	outline: none;
	color: var(--ot-text-1);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	font-weight: 500;
}

.e-37c1b86d > .box > .field > .input::placeholder
{
	color: var(--ot-text-3);
	font-weight: 400;
}

/* Action buttons */

.e-37c1b86d > .box > .field > .action
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	padding: 0;
	margin-left: var(--ot-spacing-x);
	border: none;
	background: transparent;
	border-radius: var(--ot-radius-s);
	color: var(--ot-text-3);
	cursor: pointer;
	outline: none;
	transition: background var(--ot-transition), color var(--ot-transition);
}

.e-37c1b86d > .box > .field > .action:hover
{
	background: var(--ot-bg-3);
	color: var(--ot-text-1);
}

.e-37c1b86d > .box > .field > .action > i
{
	font-size: 14px;
}

/* Hidden file input */

.e-37c1b86d > .box > .picker
{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* ===== BACKGROUNDS ===== */

.e-37c1b86d > .box.bg-1 > .field { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); }
.e-37c1b86d > .box.bg-2 > .field { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
.e-37c1b86d > .box.bg-3 > .field { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }
.e-37c1b86d > .box.bg-4 > .field { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }

.e-37c1b86d > .box.bg-1 > .field:hover:not(:focus-within) { background: var(--ot-bg-1-hover); }
.e-37c1b86d > .box.bg-2 > .field:hover:not(:focus-within) { background: var(--ot-bg-2-hover); }
.e-37c1b86d > .box.bg-3 > .field:hover:not(:focus-within) { background: var(--ot-bg-3-hover); }
.e-37c1b86d > .box.bg-4 > .field:hover:not(:focus-within) { background: var(--ot-bg-4-hover); }

/* Border */

.e-37c1b86d > .box.border > .field { border-color: var(--ot-bg-2-border); }
.e-37c1b86d > .box.bg-1.border > .field { border-color: var(--ot-bg-1-border); }
.e-37c1b86d > .box.bg-3.border > .field { border-color: var(--ot-bg-3-border); }
.e-37c1b86d > .box.bg-4.border > .field { border-color: var(--ot-bg-4-border); }

/* Border bottom */

.e-37c1b86d > .box.border-bottom > .field
{
	border-radius: 0;
	border-color: transparent;
	border-bottom-color: var(--ot-bg-2-border);
}

/* ===== SIZES ===== */

.e-37c1b86d > .box.size-s > .field
{
	height: var(--ot-height-s);
	padding: 0 var(--ot-spacing-s);
}

.e-37c1b86d > .box.size-s > .field > .preview
{
	width: 20px;
	height: 20px;
}

.e-37c1b86d > .box.size-s > .field > .icon { font-size: 15px; }
.e-37c1b86d > .box.size-s > .field > .input { font-size: var(--ot-size-s); }
.e-37c1b86d > .box.size-s > .field > .action { width: 18px; height: 18px; }
.e-37c1b86d > .box.size-s > .field > .action > i { font-size: 13px; }

.e-37c1b86d > .box.size-l > .field
{
	height: var(--ot-height-l);
	padding: 0 var(--ot-spacing-l);
}

.e-37c1b86d > .box.size-l > .field > .preview
{
	width: var(--ot-height-m);
	height: var(--ot-height-m);
}

.e-37c1b86d > .box.size-l > .field > .icon { font-size: 20px; }
.e-37c1b86d > .box.size-l > .field > .action { width: 26px; height: 26px; }
.e-37c1b86d > .box.size-l > .field > .action > i { font-size: 16px; }
/* ===== GLOBAL ACCORDION ===== */

.e-56e72db4
{
	display: contents;
}

/* Box */

.e-56e72db4 > .box
{
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* Item */

.e-56e72db4 > .box > .item
{
	display: flex;
	flex-direction: column;
}

.e-56e72db4 > .box > .item.disabled
{
	opacity: 0.5;
	pointer-events: none;
}

/* Header */

.e-56e72db4 > .box > .item > .header
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-m);
	width: 100%;
	padding: var(--ot-spacing-m);
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--ot-font-primary);
	color: var(--ot-text-1);
	transition: background var(--ot-transition);
}

.e-56e72db4 > .box > .item > .header:hover:not(:disabled)
{
	background: var(--ot-bg-2-opacity);
}

.e-56e72db4 > .box > .item > .header:disabled
{
	cursor: not-allowed;
}

/* Leading icon */

.e-56e72db4 > .box > .item > .header > .leading
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--ot-radius-m);
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
	font-size: 20px;
	flex-shrink: 0;
	transition: background var(--ot-transition), color var(--ot-transition);
}

.e-56e72db4 > .box > .item.open > .header > .leading
{
	background: var(--ot-brand);
	color: #fff;
}

/* Text */

.e-56e72db4 > .box > .item > .header > .text
{
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.e-56e72db4 > .box > .item > .header > .text > .title
{
	font-size: 14px;
	font-weight: 600;
	color: var(--ot-text-1);
	line-height: 1.35;
	transition: color var(--ot-transition);
}

.e-56e72db4 > .box > .item > .header > .text > .description
{
	font-size: 12px;
	color: var(--ot-text-2);
	line-height: 1.4;
}

.e-56e72db4 > .box > .item.open > .header > .text > .title
{
	color: var(--ot-brand);
}

/* Chevron */

.e-56e72db4 > .box > .item > .header > .chevron
{
	font-size: 22px;
	color: var(--ot-text-3);
	flex-shrink: 0;
	transition: transform var(--ot-transition-slow), color var(--ot-transition);
}

.e-56e72db4 > .box > .item.open > .header > .chevron
{
	transform: rotate(180deg);
	color: var(--ot-brand);
}

/* Panel */

.e-56e72db4 > .box > .item > .panel
{
	overflow: hidden;
	animation: e-56e72db4-reveal var(--ot-transition-slow);
}

.e-56e72db4 > .box > .item > .panel > .content
{
	padding: 0 var(--ot-spacing-m) var(--ot-spacing-m);
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--ot-text-2);
	font-family: var(--ot-font-primary);
}

.e-56e72db4 > .box > .item > .panel > .content > span
{
	display: block;
	padding-top: var(--ot-spacing-m);
	border-top: 1px solid var(--ot-bg-2-border);
}

.e-56e72db4 > .box > .item > .panel > .content p
{
	margin: 0 0 0.8em;
}

.e-56e72db4 > .box > .item > .panel > .content p:last-child
{
	margin-bottom: 0;
}

.e-56e72db4 > .box > .item > .panel > .content :is(h2, h3, h4)
{
	font-family: var(--ot-font-secondary);
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: -0.01em;
	line-height: 1.25;
	margin: 1.2em 0 0.6em;
}

.e-56e72db4 > .box > .item > .panel > .content h2 { font-size: 18px; }
.e-56e72db4 > .box > .item > .panel > .content h3 { font-size: 16px; }
.e-56e72db4 > .box > .item > .panel > .content h4 { font-size: 14px; }

.e-56e72db4 > .box > .item > .panel > .content a
{
	color: var(--ot-brand);
	text-decoration: underline;
	text-decoration-color: var(--ot-brand-opacity);
	text-underline-offset: 3px;
	transition: text-decoration-color var(--ot-transition);
}

.e-56e72db4 > .box > .item > .panel > .content a:hover
{
	text-decoration-color: var(--ot-brand);
}

.e-56e72db4 > .box > .item > .panel > .content strong
{
	font-weight: 700;
	color: var(--ot-text-1);
}

.e-56e72db4 > .box > .item > .panel > .content code
{
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 0.9em;
	padding: 1px 6px;
	border-radius: var(--ot-radius-s);
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	color: var(--ot-text-1);
}

.e-56e72db4 > .box > .item > .panel > .content :is(ul, ol)
{
	margin: 0 0 0.8em;
	padding-left: 1.4em;
}

.e-56e72db4 > .box > .item > .panel > .content li
{
	margin: 0 0 0.3em;
}

@keyframes e-56e72db4-reveal
{
	from
	{
		opacity: 0;
		transform: translateY(-6px);
	}
	to
	{
		opacity: 1;
		transform: translateY(0);
	}
}

/* ===== TONE: ROWS ===== */

.e-56e72db4 > .box.rows
{
	border-radius: var(--ot-radius-m);
	overflow: hidden;
}

.e-56e72db4 > .box.rows > .item
{
	border-bottom: 1px solid var(--ot-bg-2-border);
}

.e-56e72db4 > .box.rows > .item:last-child
{
	border-bottom: none;
}

/* ===== TONE: CARDS ===== */

.e-56e72db4 > .box.cards
{
	gap: var(--ot-spacing-s);
}

.e-56e72db4 > .box.cards > .item
{
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
	overflow: hidden;
	transition: border-color var(--ot-transition);
}

.e-56e72db4 > .box.cards > .item:hover:not(.disabled)
{
	border-color: var(--ot-bg-3-border);
}

.e-56e72db4 > .box.cards > .item.open
{
	border-color: var(--ot-brand);
}

/* ===== TONE: MINIMAL ===== */

.e-56e72db4 > .box.minimal > .item
{
	border-bottom: 1px solid var(--ot-bg-2-border);
}

.e-56e72db4 > .box.minimal > .item:last-child
{
	border-bottom: none;
}

.e-56e72db4 > .box.minimal > .item > .header
{
	padding: var(--ot-spacing-m) 0;
}

.e-56e72db4 > .box.minimal > .item > .panel > .content
{
	padding: 0 0 var(--ot-spacing-m);
}

/* ===== BACKGROUND ===== */

.e-56e72db4 > .box.bg-1 { background: var(--ot-bg-1); border-radius: var(--ot-radius-m); }
.e-56e72db4 > .box.bg-1 > .item > .header:hover:not(:disabled) { background: var(--ot-bg-1-hover); }
.e-56e72db4 > .box.bg-1.rows > .item { border-bottom-color: var(--ot-bg-1-border); }
.e-56e72db4 > .box.bg-1.minimal > .item { border-bottom-color: var(--ot-bg-1-border); }
.e-56e72db4 > .box.bg-1.cards > .item { background: var(--ot-bg-2); border-color: var(--ot-bg-1-border); }

.e-56e72db4 > .box.bg-2 { background: var(--ot-bg-2); border-radius: var(--ot-radius-m); }
.e-56e72db4 > .box.bg-2 > .item > .header:hover:not(:disabled) { background: var(--ot-bg-2-hover); }
.e-56e72db4 > .box.bg-2.rows > .item { border-bottom-color: var(--ot-bg-2-border); }
.e-56e72db4 > .box.bg-2.minimal > .item { border-bottom-color: var(--ot-bg-2-border); }
.e-56e72db4 > .box.bg-2.cards > .item { background: var(--ot-bg-1); border-color: var(--ot-bg-2-border); }

.e-56e72db4 > .box.bg-3 { background: var(--ot-bg-3); border-radius: var(--ot-radius-m); }
.e-56e72db4 > .box.bg-3 > .item > .header:hover:not(:disabled) { background: var(--ot-bg-3-hover); }
.e-56e72db4 > .box.bg-3.rows > .item { border-bottom-color: var(--ot-bg-3-border); }
.e-56e72db4 > .box.bg-3.minimal > .item { border-bottom-color: var(--ot-bg-3-border); }
.e-56e72db4 > .box.bg-3.cards > .item { background: var(--ot-bg-2); border-color: var(--ot-bg-3-border); }

.e-56e72db4 > .box.bg-4 { background: var(--ot-bg-4); border-radius: var(--ot-radius-m); }
.e-56e72db4 > .box.bg-4 > .item > .header:hover:not(:disabled) { background: var(--ot-bg-4-hover); }
.e-56e72db4 > .box.bg-4.rows > .item { border-bottom-color: var(--ot-bg-4-border); }
.e-56e72db4 > .box.bg-4.minimal > .item { border-bottom-color: var(--ot-bg-4-border); }
.e-56e72db4 > .box.bg-4.cards > .item { background: var(--ot-bg-3); border-color: var(--ot-bg-4-border); }

/* ===== BORDER ===== */

.e-56e72db4 > .box.border { border: 1px solid var(--ot-bg-2-border); border-radius: var(--ot-radius-m); }
.e-56e72db4 > .box.border-top { border-top: 1px solid var(--ot-bg-2-border); }
.e-56e72db4 > .box.border-right { border-right: 1px solid var(--ot-bg-2-border); }
.e-56e72db4 > .box.border-bottom { border-bottom: 1px solid var(--ot-bg-2-border); }
.e-56e72db4 > .box.border-left { border-left: 1px solid var(--ot-bg-2-border); }

.e-56e72db4 > .box.bg-1.border,
.e-56e72db4 > .box.bg-1.border-top,
.e-56e72db4 > .box.bg-1.border-right,
.e-56e72db4 > .box.bg-1.border-bottom,
.e-56e72db4 > .box.bg-1.border-left { border-color: var(--ot-bg-1-border); }

.e-56e72db4 > .box.bg-2.border,
.e-56e72db4 > .box.bg-2.border-top,
.e-56e72db4 > .box.bg-2.border-right,
.e-56e72db4 > .box.bg-2.border-bottom,
.e-56e72db4 > .box.bg-2.border-left { border-color: var(--ot-bg-2-border); }

.e-56e72db4 > .box.bg-3.border,
.e-56e72db4 > .box.bg-3.border-top,
.e-56e72db4 > .box.bg-3.border-right,
.e-56e72db4 > .box.bg-3.border-bottom,
.e-56e72db4 > .box.bg-3.border-left { border-color: var(--ot-bg-3-border); }

.e-56e72db4 > .box.bg-4.border,
.e-56e72db4 > .box.bg-4.border-top,
.e-56e72db4 > .box.bg-4.border-right,
.e-56e72db4 > .box.bg-4.border-bottom,
.e-56e72db4 > .box.bg-4.border-left { border-color: var(--ot-bg-4-border); }

/* ===== SIZE ===== */

/* Small */

.e-56e72db4 > .box.size-s > .item > .header { padding: var(--ot-spacing-s) var(--ot-spacing-m); gap: var(--ot-spacing-s); }
.e-56e72db4 > .box.size-s > .item > .header > .leading { width: 28px; height: 28px; font-size: 16px; }
.e-56e72db4 > .box.size-s > .item > .header > .text > .title { font-size: 13px; }
.e-56e72db4 > .box.size-s > .item > .header > .text > .description { font-size: 11px; }
.e-56e72db4 > .box.size-s > .item > .header > .chevron { font-size: 18px; }
.e-56e72db4 > .box.size-s > .item > .panel > .content { padding: 0 var(--ot-spacing-m) var(--ot-spacing-s); font-size: 12.5px; }

.e-56e72db4 > .box.size-s.minimal > .item > .header { padding: var(--ot-spacing-s) 0; }
.e-56e72db4 > .box.size-s.minimal > .item > .panel > .content { padding: 0 0 var(--ot-spacing-s); }

/* Large */

.e-56e72db4 > .box.size-l > .item > .header { padding: var(--ot-spacing-l) var(--ot-spacing-m); gap: var(--ot-spacing-m); }
.e-56e72db4 > .box.size-l > .item > .header > .leading { width: 44px; height: 44px; font-size: 24px; }
.e-56e72db4 > .box.size-l > .item > .header > .text > .title { font-size: 16px; }
.e-56e72db4 > .box.size-l > .item > .header > .text > .description { font-size: 13px; }
.e-56e72db4 > .box.size-l > .item > .header > .chevron { font-size: 26px; }
.e-56e72db4 > .box.size-l > .item > .panel > .content { padding: 0 var(--ot-spacing-m) var(--ot-spacing-l); font-size: 14.5px; }

.e-56e72db4 > .box.size-l.minimal > .item > .header { padding: var(--ot-spacing-l) 0; }
.e-56e72db4 > .box.size-l.minimal > .item > .panel > .content { padding: 0 0 var(--ot-spacing-l); }
/* ===== GLOBAL CODE ===== */

.e-4a15b201
{
	display: contents;
}

/* Box */

.e-4a15b201 > .box
{
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
	overflow: hidden;
}

.e-4a15b201 > .box.bg-1 { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); }
.e-4a15b201 > .box.bg-2 { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
.e-4a15b201 > .box.bg-3 { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }
.e-4a15b201 > .box.bg-4 { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }

/* Head */

.e-4a15b201 > .box > .head
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	padding: var(--ot-spacing-s) var(--ot-spacing-m);
	background: var(--ot-bg-1-opacity);
	border-bottom: 1px solid var(--ot-bg-3-border);
}

/* Dots */

.e-4a15b201 > .box > .head > .dots
{
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}

.e-4a15b201 > .box > .head > .dots > span
{
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
}

.e-4a15b201 > .box > .head > .dots > span:nth-child(1) { background: #ff5f56; }
.e-4a15b201 > .box > .head > .dots > span:nth-child(2) { background: #ffbd2e; }
.e-4a15b201 > .box > .head > .dots > span:nth-child(3) { background: #27c93f; }

/* Filename / Language */

.e-4a15b201 > .box > .head > .filename,
.e-4a15b201 > .box > .head > .language
{
	flex: 1;
	text-align: center;
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 12px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.55);
}

.e-4a15b201 > .box > .head > .language
{
	text-transform: uppercase;
	font-size: 10.5px;
	letter-spacing: 0.06em;
}

/* Copy */

.e-4a15b201 > .box > .head > .copy
{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	background: var(--ot-bg-3);
	border: 1px solid var(--ot-bg-3-border);
	border-radius: 100px;
	color: var(--ot-text-2);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	font-weight: 600;
	cursor: pointer;
	flex-shrink: 0;
	transition: background var(--ot-transition), color var(--ot-transition), border-color var(--ot-transition);
}

.e-4a15b201 > .box > .head > .copy:hover
{
	background: var(--ot-bg-4);
	color: var(--ot-text-1);
}

.e-4a15b201 > .box > .head > .copy > i
{
	font-size: 13px;
}

.e-4a15b201 > .box > .head > .copy.copied
{
	background: var(--ot-green-opacity);
	border-color: var(--ot-green-border);
	color: var(--ot-green);
}

/* Body */

.e-4a15b201 > .box > .body
{
	margin: 0;
	padding: var(--ot-spacing-m);
	overflow-x: auto;
	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	font-size: var(--ot-size-m);
	line-height: 1.65;
	color: var(--ot-text-1);
	tab-size: 4;
}

.e-4a15b201 > .box > .body > code
{
	font-family: inherit;
	font-size: inherit;
	background: none;
	padding: 0;
	border: none;
	color: inherit;
	display: block;
	white-space: pre;
}

/* Scrollbar */

.e-4a15b201 > .box > .body::-webkit-scrollbar { height: 8px; }
.e-4a15b201 > .box > .body::-webkit-scrollbar-track { background: transparent; }
.e-4a15b201 > .box > .body::-webkit-scrollbar-thumb { background: var(--ot-bg-4); border-radius: 100px; }
.e-4a15b201 > .box > .body::-webkit-scrollbar-thumb:hover { background: var(--ot-bg-4-hover); }

/* ===== LINE NUMBERS ===== */

.e-4a15b201 .numbered
{
	display: flex;
	flex-direction: column;
}

.e-4a15b201 .line
{
	display: flex;
	padding: 0 var(--ot-spacing-m) 0 0;
	margin: 0 calc(var(--ot-spacing-m) * -1);
	transition: background var(--ot-transition-fast);
}

.e-4a15b201 .line > .number
{
	width: 40px;
	padding-right: 14px;
	text-align: right;
	color: var(--ot-text-3);
	user-select: none;
	flex-shrink: 0;
	border-right: 1px solid var(--ot-bg-3-border);
	margin-right: 14px;
}

.e-4a15b201 .line > .code
{
	flex: 1;
	min-width: 0;
}

/* Highlighted line */

.e-4a15b201 .line.highlighted
{
	background: var(--ot-brand-opacity);
	box-shadow: inset 2px 0 0 var(--ot-brand);
}

.e-4a15b201 .line.highlighted > .number
{
	color: var(--ot-brand);
}

/* Plain (no numbers) */

.e-4a15b201 .plain
{
	display: block;
	white-space: pre;
}

/* ===== SYNTAX TOKENS ===== */

.e-4a15b201 .t-keyword { color: #ff7b72; font-weight: 500; }
.e-4a15b201 .t-string { color: #a5d6ff; }
.e-4a15b201 .t-number { color: #ffa657; }
.e-4a15b201 .t-comment { color: #8b949e; font-style: italic; }
.e-4a15b201 .t-fn { color: #d2a8ff; }
.e-4a15b201 .t-tag { color: #7ee787; }
.e-4a15b201 .t-attr { color: #79c0ff; }
.e-4a15b201 .t-selector { color: #7ee787; }
.e-4a15b201 .t-prop { color: #79c0ff; }

/* ===== BORDER ===== */

.e-4a15b201 > .box.border { border-color: var(--ot-bg-2-border); }
.e-4a15b201 > .box.bg-1.border { border-color: var(--ot-bg-1-border); }
.e-4a15b201 > .box.bg-2.border { border-color: var(--ot-bg-2-border); }
.e-4a15b201 > .box.bg-3.border { border-color: var(--ot-bg-3-border); }
.e-4a15b201 > .box.bg-4.border { border-color: var(--ot-bg-4-border); }

/* ===== SIZE ===== */

.e-4a15b201 > .box.size-s > .head
{
	padding: var(--ot-spacing-x) var(--ot-spacing-s);
}

.e-4a15b201 > .box.size-s > .body
{
	padding: var(--ot-spacing-s) var(--ot-spacing-m);
	font-size: 12px;
	line-height: 1.55;
}

.e-4a15b201 > .box.size-l > .head
{
	padding: var(--ot-spacing-m) var(--ot-spacing-l);
}

.e-4a15b201 > .box.size-l > .body
{
	padding: var(--ot-spacing-l);
	font-size: 14px;
	line-height: 1.75;
}
/* ===== GLOBAL GALLERY ===== */

.e-ee00abe
{
	display: block;
	width: 100%;
}

/* Box */

.e-ee00abe > .box
{
	position: relative;
	width: 100%;
	overflow: hidden;
}

.e-ee00abe > .box.rounded
{
	border-radius: var(--ot-radius-l);
}

/* ===== BENTO LAYOUT ===== */

.e-ee00abe > .box > .bento
{
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 480px;
	width: 100%;
}

.e-ee00abe > .box.compact > .bento
{
	height: 360px;
}

.e-ee00abe > .box.tall > .bento
{
	height: 560px;
}

/* Bento main */

.e-ee00abe > .box > .bento > .bento-main
{
	overflow: hidden;
	cursor: pointer;
}

.e-ee00abe > .box > .bento > .bento-main > img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter var(--ot-transition-slow), transform var(--ot-transition-slow);
}

.e-ee00abe > .box > .bento > .bento-main:hover > img
{
	filter: brightness(0.92);
	transform: scale(1.02);
}

/* Bento side */

.e-ee00abe > .box > .bento > .bento-side
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}

.e-ee00abe > .box > .bento > .bento-side > .bento-thumb
{
	overflow: hidden;
	cursor: pointer;
}

.e-ee00abe > .box > .bento > .bento-side > .bento-thumb > img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter var(--ot-transition-slow), transform var(--ot-transition-slow);
}

.e-ee00abe > .box > .bento > .bento-side > .bento-thumb:hover > img
{
	filter: brightness(0.88);
	transform: scale(1.03);
}

/* Show all button */

.e-ee00abe > .box > .bento > .show-all
{
	position: absolute;
	bottom: 18px;
	right: 18px;
	display: inline-flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	padding: 10px 20px;
	background: var(--ot-text-1);
	border: none;
	border-radius: 100px;
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	font-weight: 600;
	color: var(--ot-bg-1);
	cursor: pointer;
	box-shadow: var(--ot-shadow-m);
	transition: transform var(--ot-transition), box-shadow var(--ot-transition);
	z-index: 1;
}

.e-ee00abe > .box > .bento > .show-all:hover
{
	transform: translateY(-2px);
	box-shadow: var(--ot-shadow-l);
}

.e-ee00abe > .box > .bento > .show-all > i
{
	font-size: 16px;
}

/* ===== GRID LAYOUT ===== */

.e-ee00abe > .box > .grid
{
	display: grid;
	width: 100%;
}

.e-ee00abe > .box > .grid > .grid-item
{
	overflow: hidden;
	cursor: pointer;
	border-radius: var(--ot-radius-m);
}

.e-ee00abe > .box > .grid > .grid-item > img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter var(--ot-transition-slow), transform var(--ot-transition-slow);
}

.e-ee00abe > .box > .grid > .grid-item:hover > img
{
	filter: brightness(0.92);
	transform: scale(1.04);
}

/* ===== CAROUSEL LAYOUT ===== */

.e-ee00abe > .box > .carousel
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-s);
	width: 100%;
}

/* Carousel stage */

.e-ee00abe > .box > .carousel > .carousel-stage
{
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--ot-radius-m);
	background: var(--ot-bg-2);
}

.e-ee00abe > .box > .carousel > .carousel-stage > img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: zoom-in;
	animation: e-ee00abe-fade var(--ot-transition-slow);
}

@keyframes e-ee00abe-fade
{
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Carousel nav */

.e-ee00abe > .box > .carousel > .carousel-stage > .carousel-nav
{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--ot-bg-1-opacity);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 50%;
	color: var(--ot-text-1);
	cursor: pointer;
	backdrop-filter: var(--ot-blur);
	-webkit-backdrop-filter: var(--ot-blur);
	box-shadow: var(--ot-shadow-m);
	transition: transform var(--ot-transition), box-shadow var(--ot-transition);
	z-index: 1;
}

.e-ee00abe > .box > .carousel > .carousel-stage > .prev { left: 16px; }
.e-ee00abe > .box > .carousel > .carousel-stage > .next { right: 16px; }

.e-ee00abe > .box > .carousel > .carousel-stage > .carousel-nav:hover
{
	box-shadow: var(--ot-shadow-l);
}

.e-ee00abe > .box > .carousel > .carousel-stage > .prev:hover { transform: translateY(-50%) translateX(-2px); }
.e-ee00abe > .box > .carousel > .carousel-stage > .next:hover { transform: translateY(-50%) translateX(2px); }

.e-ee00abe > .box > .carousel > .carousel-stage > .carousel-nav > i
{
	font-size: 22px;
}

/* Carousel counter */

.e-ee00abe > .box > .carousel > .carousel-stage > .carousel-counter
{
	position: absolute;
	bottom: 16px;
	right: 16px;
	padding: 6px 12px;
	background: var(--ot-bg-1-opacity);
	backdrop-filter: var(--ot-blur);
	-webkit-backdrop-filter: var(--ot-blur);
	border-radius: 100px;
	color: var(--ot-text-1);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* Carousel thumbs */

.e-ee00abe > .box > .carousel > .carousel-thumbs
{
	display: flex;
	gap: var(--ot-spacing-x);
	overflow-x: auto;
	padding: 2px 0;
	scrollbar-width: none;
}

.e-ee00abe > .box > .carousel > .carousel-thumbs::-webkit-scrollbar
{
	display: none;
}

.e-ee00abe > .box > .carousel > .carousel-thumbs > .carousel-thumb
{
	flex-shrink: 0;
	width: 80px;
	height: 56px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--ot-radius-s);
	background: transparent;
	overflow: hidden;
	cursor: pointer;
	transition: border-color var(--ot-transition), opacity var(--ot-transition);
	opacity: 0.65;
}

.e-ee00abe > .box > .carousel > .carousel-thumbs > .carousel-thumb:hover
{
	opacity: 1;
}

.e-ee00abe > .box > .carousel > .carousel-thumbs > .carousel-thumb.active
{
	opacity: 1;
	border-color: var(--ot-brand);
}

.e-ee00abe > .box > .carousel > .carousel-thumbs > .carousel-thumb > img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ===== LIGHTBOX ===== */

.lightbox-box
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	padding: 80px 80px 140px;
	box-sizing: border-box;
}

/* Lightbox close */

.lightbox-close
{
	position: absolute;
	top: 20px;
	right: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: var(--ot-blur);
	-webkit-backdrop-filter: var(--ot-blur);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: background var(--ot-transition), transform var(--ot-transition);
	z-index: 10;
}

.lightbox-close:hover
{
	background: rgba(255, 255, 255, 0.2);
	transform: rotate(90deg);
}

.lightbox-close > i
{
	font-size: 22px;
}

/* Lightbox counter */

.lightbox-counter
{
	position: absolute;
	top: 28px;
	left: 50%;
	transform: translateX(-50%);
	padding: var(--ot-spacing-s) var(--ot-spacing-m);
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: var(--ot-blur);
	-webkit-backdrop-filter: var(--ot-blur);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 100px;
	color: #fff;
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	font-weight: 700;
	letter-spacing: 0.04em;
	z-index: 10;
}

/* Lightbox nav */

.lightbox-nav
{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: var(--ot-blur);
	-webkit-backdrop-filter: var(--ot-blur);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: background var(--ot-transition), transform var(--ot-transition);
	z-index: 10;
}

.lightbox-nav.prev { left: 32px; }
.lightbox-nav.next { right: 32px; }

.lightbox-nav:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox-nav.prev:hover { transform: translateY(-50%) translateX(-3px); }
.lightbox-nav.next:hover { transform: translateY(-50%) translateX(3px); }

.lightbox-nav > i
{
	font-size: 26px;
}

/* Lightbox stage */

.lightbox-stage
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ot-spacing-m);
	max-width: 100%;
	max-height: 100%;
}

.lightbox-stage > img
{
	max-width: 100%;
	max-height: calc(100vh - 220px);
	object-fit: contain;
	border-radius: var(--ot-radius-m);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	animation: e-ee00abe-lightbox-in var(--ot-transition-slow);
}

@keyframes e-ee00abe-lightbox-in
{
	from { opacity: 0; transform: scale(0.96); }
	to { opacity: 1; transform: scale(1); }
}

/* Lightbox caption */

.lightbox-caption
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	color: rgba(255, 255, 255, 0.85);
	text-align: center;
	max-width: 600px;
	line-height: 1.5;
}

/* Lightbox thumbs */

.lightbox-thumbs
{
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	padding: 10px 14px;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	max-width: calc(100vw - 64px);
	overflow-x: auto;
	scrollbar-width: none;
	z-index: 10;
}

.lightbox-thumbs::-webkit-scrollbar
{
	display: none;
}

.lightbox-thumbs > .lightbox-thumb
{
	flex-shrink: 0;
	width: 56px;
	height: 44px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--ot-radius-s);
	background: transparent;
	overflow: hidden;
	cursor: pointer;
	transition: border-color var(--ot-transition), opacity var(--ot-transition);
	opacity: 0.55;
}

.lightbox-thumbs > .lightbox-thumb:hover
{
	opacity: 0.9;
}

.lightbox-thumbs > .lightbox-thumb.active
{
	opacity: 1;
	border-color: #fff;
}

.lightbox-thumbs > .lightbox-thumb > img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 767.98px)
{
	.e-ee00abe > .box > .bento
	{
		height: 320px;
	}

	.e-ee00abe > .box > .bento > .bento-side
	{
		display: none;
	}

	.e-ee00abe > .box > .carousel > .carousel-thumbs > .carousel-thumb
	{
		width: 60px;
		height: 42px;
	}

	.lightbox-box
	{
		padding: 60px 16px 120px;
	}

	.lightbox-nav.prev { left: 12px; }
	.lightbox-nav.next { right: 12px; }

	.lightbox-nav
	{
		width: 40px;
		height: 40px;
	}

	.lightbox-nav > i
	{
		font-size: 20px;
	}
}
/* ===== GLOBAL HEADING ===== */

.e-49fb116e
{
	display: contents;
}

/* Box */

.e-49fb116e > .box
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-l);
	width: 100%;
}

.e-49fb116e > .box.border
{
	padding-bottom: var(--ot-spacing-m);
	border-bottom: 1px solid var(--ot-bg-2-border);
}

/* Top */

.e-49fb116e > .box > .top
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-m);
}

/* Icon */

.e-49fb116e > .box > .top > .icon
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--ot-radius-m);
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
	flex-shrink: 0;
}

.e-49fb116e > .box > .top > .icon > i
{
	font-size: 26px;
}

/* Text */

.e-49fb116e > .box > .top > .text
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-s);
	min-width: 0;
	flex: 1;
}

/* Eyebrow */

.e-49fb116e > .box > .top > .text > .eyebrow
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ot-brand);
}

/* Title */

.e-49fb116e > .box > .top > .text > .title
{
	margin: 0;
	font-family: var(--ot-font-secondary);
	font-weight: 500;
	letter-spacing: -0.022em;
	color: var(--ot-text-1);
	font-variation-settings: 'opsz' 144;
	line-height: 1.05;
}

.e-49fb116e > .box > .top > .text > .title em
{
	font-style: italic;
	color: var(--ot-brand);
	font-weight: 500;
}

/* Description */

.e-49fb116e > .box > .top > .text > .description
{
	margin: 0;
	font-family: var(--ot-font-primary);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ot-text-2);
	max-width: 560px;
}

/* Right */

.e-49fb116e > .box > .top > .right
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	flex-shrink: 0;
}

.e-49fb116e > .box > .top > .right:empty
{
	display: none;
}

/* Bottom */

.e-49fb116e > .box > .bottom
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	flex-wrap: wrap;
}

/* ===== ALIGN ===== */

.e-49fb116e > .box.center > .top
{
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.e-49fb116e > .box.center > .top > .text
{
	align-items: center;
	flex: 0 1 auto;
}

.e-49fb116e > .box.center > .top > .text > .description
{
	max-width: 540px;
}

.e-49fb116e > .box.center > .bottom
{
	justify-content: center;
}

.e-49fb116e > .box.right > .top
{
	flex-direction: row-reverse;
	text-align: right;
}

.e-49fb116e > .box.right > .top > .text
{
	align-items: flex-end;
}

.e-49fb116e > .box.right > .bottom
{
	justify-content: flex-end;
}

/* ===== SIZE ===== */

/* Small */

.e-49fb116e > .box.size-s > .top > .icon
{
	width: 36px;
	height: 36px;
}

.e-49fb116e > .box.size-s > .top > .icon > i
{
	font-size: 20px;
}

.e-49fb116e > .box.size-s > .top > .text > .title
{
	font-size: var(--ot-size-l);
	line-height: 1.15;
}

.e-49fb116e > .box.size-s > .top > .text > .description
{
	font-size: var(--ot-size-m);
}

/* Medium */

.e-49fb116e > .box.size-m > .top > .text > .title
{
	font-size: 32px;
	line-height: 1.05;
}

.e-49fb116e > .box.size-m > .top > .text > .description
{
	font-size: 14px;
}

/* Large */

.e-49fb116e > .box.size-l > .top > .icon
{
	width: 60px;
	height: 60px;
}

.e-49fb116e > .box.size-l > .top > .icon > i
{
	font-size: 32px;
}

.e-49fb116e > .box.size-l > .top > .text > .title
{
	font-size: 48px;
	line-height: 1;
}

.e-49fb116e > .box.size-l > .top > .text > .description
{
	font-size: 16px;
	max-width: 640px;
}
/* ===== GLOBAL MARKDOWN ===== */

.e-4696d703
{
	display: contents;
}

/* Box */

.e-4696d703 > .box
{
	position: relative;
	width: 100%;
	border-radius: var(--ot-radius-l);
	overflow: hidden;
}

/* Body */

.e-4696d703 > .box > .body
{
	overflow: hidden;
	transition: max-height var(--ot-transition-slow);
}

.e-4696d703 > .box.expanded > .body
{
	max-height: none !important;
}

/* Prose */

.e-4696d703 .prose
{
	font-family: var(--ot-font-primary);
	font-size: 14px;
	line-height: 1.75;
	color: var(--ot-text-1);
}

.e-4696d703 .prose > .segment + .segment
{
	margin-top: 1.5em;
}

.e-4696d703 .prose > .segment:first-child .line:first-child > *,
.e-4696d703 .prose > .segment:first-child > *:first-child,
.e-4696d703 .prose > *:first-child
{
	margin-top: 0;
	padding-top: 0;
}

.e-4696d703 .prose > .segment:last-child .line:last-child > *,
.e-4696d703 .prose > .segment:last-child > *:last-child,
.e-4696d703 .prose > *:last-child
{
	margin-bottom: 0;
	padding-bottom: 0;
}

/* ===== HEADINGS ===== */

.e-4696d703 .prose :is(h1, h2, h3, h4, h5, h6)
{
	font-family: var(--ot-font-secondary);
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--ot-text-1);
	font-variation-settings: 'opsz' 144;
	line-height: 1.15;
}

.e-4696d703 .prose h1 { font-size: 2.25em; margin: 0 0 0.9em; }
.e-4696d703 .prose h2 { font-size: 1.5em; margin: 1em 0 0.75em; }
.e-4696d703 .prose h3 { font-size: 1.25em; margin: 1.6em 0 0.6em; }
.e-4696d703 .prose h4 { font-size: 1.1em; margin: 1.5em 0 0.5em; }

.e-4696d703 .prose :is(h1, h2, h3, h4) + :is(h1, h2, h3, h4)
{
	margin-top: 0;
}

/* ===== INLINE ===== */

.e-4696d703 .prose em
{
	font-style: italic;
	color: var(--ot-brand);
}

.e-4696d703 .prose strong
{
	font-weight: 700;
	color: var(--ot-text-1);
}

.e-4696d703 .prose del
{
	text-decoration: line-through;
	opacity: 0.6;
}

/* ===== PARAGRAPH ===== */

.e-4696d703 .prose p
{
	margin: 0 0 1.25em;
	color: var(--ot-text-2);
	line-height: 1.75;
}

.e-4696d703 .prose > p:first-child
{
	color: var(--ot-text-1);
}

/* ===== LINKS ===== */

.e-4696d703 .prose a
{
	color: var(--ot-brand);
	text-decoration: underline;
	text-decoration-color: var(--ot-brand-opacity);
	text-underline-offset: 3px;
	transition: text-decoration-color var(--ot-transition);
}

.e-4696d703 .prose a:hover
{
	text-decoration-color: var(--ot-brand);
}

/* ===== LISTS ===== */

.e-4696d703 .prose :is(ul, ol)
{
	margin: 0 0 1.25em;
	padding-left: 1.6em;
}

.e-4696d703 .prose ul { list-style: disc; }
.e-4696d703 .prose ol { list-style: decimal; }

.e-4696d703 .prose li
{
	margin: 0 0 0.5em;
	color: var(--ot-text-2);
	line-height: 1.7;
}

.e-4696d703 .prose li::marker
{
	color: var(--ot-brand);
}

.e-4696d703 .prose li:last-child
{
	margin-bottom: 0;
}

/* ===== BLOCKQUOTE ===== */

.e-4696d703 .prose blockquote
{
	margin: 1.6em 0;
	padding: 0.25em 0 0.25em 1.2em;
	border-left: 3px solid var(--ot-brand);
	font-family: var(--ot-font-secondary);
	font-size: 1.3em;
	font-style: italic;
	line-height: 1.45;
	color: var(--ot-text-1);
	font-variation-settings: 'opsz' 144;
}

.e-4696d703 .prose blockquote p
{
	margin: 0;
	color: inherit;
}

/* ===== INLINE CODE ===== */

.e-4696d703 .prose code,
.e-4696d703 .prose code.inline
{
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 0.88em;
	padding: 0.15em 0.4em;
	border-radius: var(--ot-radius-s);
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	color: var(--ot-brand);
}

/* ===== IMAGES ===== */

.e-4696d703 .prose img
{
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ot-radius-l);
	margin: 2em 0 0.5em;
}

.e-4696d703 .prose img + em
{
	display: block;
	font-size: 0.85em;
	font-style: italic;
	color: var(--ot-text-3);
	text-align: center;
	margin-bottom: 2em;
}

/* ===== HR ===== */

.e-4696d703 .prose hr
{
	border: none;
	height: 1px;
	background: var(--ot-bg-2-border);
	margin: 3em 0;
}

/* ===== TABLE ===== */

.e-4696d703 .prose table
{
	margin: 1.5em 0;
	width: 100%;
	border-collapse: collapse;
}

.e-4696d703 .prose th
{
	font-size: 0.85em;
	font-weight: 600;
	text-align: left;
	padding: 0.6em 1em;
	border-bottom: 2px solid var(--ot-bg-2-border);
	color: var(--ot-text-1);
}

.e-4696d703 .prose td
{
	font-size: 0.9em;
	padding: 0.6em 1em;
	border-bottom: 1px solid var(--ot-bg-2-border);
	color: var(--ot-text-2);
}

.e-4696d703 .prose tr:last-child td
{
	border-bottom: none;
}

/* ===== LINE WRAPPER ===== */

.e-4696d703 .prose > .line:empty
{
	height: var(--ot-spacing-m);
}

.e-4696d703 .prose > .line:first-child > *
{
	margin-top: 0;
	padding-top: 0;
}

.e-4696d703 .prose > .line:last-child > *
{
	margin-bottom: 0;
	padding-bottom: 0;
}

/* ===== COLLAPSIBLE ===== */

.e-4696d703 > .box.collapsible:not(.expanded) > .fade
{
	position: absolute;
	bottom: 44px;
	left: 0;
	right: 0;
	height: 80px;
	background: linear-gradient(180deg, transparent 0%, var(--ot-bg-1) 100%);
	pointer-events: none;
}

.e-4696d703 > .box.collapsible > .toggle
{
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ot-spacing-x);
	width: 100%;
	margin-top: var(--ot-spacing-m);
	padding-top: var(--ot-spacing-m);
	background: transparent;
	border: none;
	border-top: 1px solid var(--ot-bg-1-border);
	color: var(--ot-brand);
	font-size: var(--ot-size-s);
	font-weight: 600;
	font-family: var(--ot-font-primary);
	cursor: pointer;
	transition: color var(--ot-transition);
}

.e-4696d703 > .box.collapsible > .toggle:hover
{
	color: var(--ot-brand-hover);
}

.e-4696d703 > .box.collapsible > .toggle > i
{
	font-size: 18px;
}

/* ===== BACKGROUND ===== */

.e-4696d703 > .box.bg-1 { background: var(--ot-bg-1); padding: var(--ot-spacing-l); }
.e-4696d703 > .box.bg-2 { background: var(--ot-bg-2); padding: var(--ot-spacing-l); }
.e-4696d703 > .box.bg-3 { background: var(--ot-bg-3); padding: var(--ot-spacing-l); }
.e-4696d703 > .box.bg-4 { background: var(--ot-bg-4); padding: var(--ot-spacing-l); }

.e-4696d703 > .box.bg-1.collapsible:not(.expanded) > .fade { background: linear-gradient(180deg, transparent 0%, var(--ot-bg-1) 100%); }
.e-4696d703 > .box.bg-2.collapsible:not(.expanded) > .fade { background: linear-gradient(180deg, transparent 0%, var(--ot-bg-2) 100%); }
.e-4696d703 > .box.bg-3.collapsible:not(.expanded) > .fade { background: linear-gradient(180deg, transparent 0%, var(--ot-bg-3) 100%); }
.e-4696d703 > .box.bg-4.collapsible:not(.expanded) > .fade { background: linear-gradient(180deg, transparent 0%, var(--ot-bg-4) 100%); }

.e-4696d703 > .box.bg-1.collapsible > .toggle { border-top-color: var(--ot-bg-1-border); }
.e-4696d703 > .box.bg-2.collapsible > .toggle { border-top-color: var(--ot-bg-2-border); }
.e-4696d703 > .box.bg-3.collapsible > .toggle { border-top-color: var(--ot-bg-3-border); }
.e-4696d703 > .box.bg-4.collapsible > .toggle { border-top-color: var(--ot-bg-4-border); }

/* ===== BORDER ===== */

.e-4696d703 > .box.border { border: 1px solid var(--ot-bg-2-border); }
.e-4696d703 > .box.bg-1.border { border-color: var(--ot-bg-1-border); }
.e-4696d703 > .box.bg-2.border { border-color: var(--ot-bg-2-border); }
.e-4696d703 > .box.bg-3.border { border-color: var(--ot-bg-3-border); }
.e-4696d703 > .box.bg-4.border { border-color: var(--ot-bg-4-border); }
/* ===== GLOBAL MENU ===== */

/* Root */

.e-4a1a1973
{
	display: contents;
}

/* Box */

.e-4a1a1973 > .box
{
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 180px;
	padding: var(--ot-spacing-x);
	gap: 1px;
}

/* ===== ENTRY ===== */

.e-4a1a1973 .entry
{
	display: flex;
	flex-direction: column;
}

/* ===== ROW (clickable) ===== */

.e-4a1a1973 .entry > .row
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	padding: var(--ot-spacing-s);
	min-height: var(--ot-height-m);
	background: transparent;
	border: none;
	border-radius: var(--ot-radius-s);
	cursor: pointer;
	user-select: none;
	text-decoration: none;
	font-family: var(--ot-font-primary);
	text-align: left;
	width: 100%;
	transition: background var(--ot-transition-fast), color var(--ot-transition-fast);
}

.e-4a1a1973 .entry > .row:hover
{
	background: var(--ot-bg-2-hover);
}

/* Disabled */

.e-4a1a1973 .entry.disabled > .row
{
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

/* Icon */

.e-4a1a1973 .entry > .row > .icon
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	font-size: 18px;
	color: var(--ot-text-2);
	flex-shrink: 0;
}

/* Text */

.e-4a1a1973 .entry > .row > .text
{
	display: flex;
	flex-direction: column;
	gap: 1px;
	flex: 1;
	min-width: 0;
}

.e-4a1a1973 .entry > .row > .text > .label
{
	font-size: var(--ot-size-m);
	font-weight: 500;
	color: var(--ot-text-1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.e-4a1a1973 .entry > .row > .text > .description
{
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Badge */

.e-4a1a1973 .entry > .row > .badge
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: var(--ot-height-x);
	padding: 0 6px;
	background: var(--ot-brand);
	color: #fff;
	border-radius: 100px;
	font-size: 10px;
	font-weight: 700;
	font-family: var(--ot-font-primary);
	flex-shrink: 0;
	margin-left: auto;
}

/* Shortcut */

.e-4a1a1973 .entry > .row > .shortcut
{
	display: inline-flex;
	align-items: center;
	padding: 2px 6px;
	border-radius: var(--ot-radius-s);
	background: var(--ot-bg-3);
	color: var(--ot-text-2);
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.02em;
	flex-shrink: 0;
	margin-left: auto;
}

/* Trail icon */

.e-4a1a1973 .entry > .row > .trail
{
	font-size: 16px;
	color: var(--ot-text-3);
	flex-shrink: 0;
	margin-left: auto;
	transition: transform var(--ot-transition-fast);
}

.e-4a1a1973 .entry > .row:hover > .trail
{
	transform: translateX(2px);
}

.e-4a1a1973 .entry > .row > .shortcut + .trail,
.e-4a1a1973 .entry > .row > .badge + .trail,
.e-4a1a1973 .entry > .row > .badge + .shortcut
{
	margin-left: 0;
}

/* Arrow (submenu toggle) */

.e-4a1a1973 .entry > .row > .arrow
{
	font-size: 18px;
	color: var(--ot-text-3);
	flex-shrink: 0;
	margin-left: auto;
	transition: transform var(--ot-transition), color var(--ot-transition-fast);
}

.e-4a1a1973 .entry.open > .row > .arrow
{
	transform: rotate(180deg);
	color: var(--ot-brand);
}

/* ===== STATES ===== */

/* Active */

.e-4a1a1973 .entry.active > .row
{
	background: var(--ot-brand-opacity);
}

.e-4a1a1973 .entry.active > .row > .icon,
.e-4a1a1973 .entry.active > .row > .text > .label
{
	color: var(--ot-brand);
}

.e-4a1a1973 .entry.active > .row > .icon
{
	font-variation-settings: 'FILL' 0, 'wght' 500;
}

/* Danger */

.e-4a1a1973 .entry.danger > .row > .icon,
.e-4a1a1973 .entry.danger > .row > .text > .label
{
	color: var(--ot-red);
}

.e-4a1a1973 .entry.danger > .row:hover
{
	background: var(--ot-red-opacity);
}

/* Color accents */

.e-4a1a1973 .entry.color-brand > .row > .icon  { color: var(--ot-brand); }
.e-4a1a1973 .entry.color-blue > .row > .icon    { color: var(--ot-blue); }
.e-4a1a1973 .entry.color-red > .row > .icon     { color: var(--ot-red); }
.e-4a1a1973 .entry.color-orange > .row > .icon  { color: var(--ot-orange); }
.e-4a1a1973 .entry.color-green > .row > .icon   { color: var(--ot-green); }

/* ===== SEPARATOR ===== */

.e-4a1a1973 .entry.separator
{
	padding: var(--ot-spacing-x) 0;
}

.e-4a1a1973 .entry > .separator
{
	height: 1px;
	background: var(--ot-bg-2-border);
	margin: 0 var(--ot-spacing-s);
}

/* ===== HEADER ===== */

.e-4a1a1973 .entry > .header
{
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ot-text-3);
	padding: var(--ot-spacing-s) var(--ot-spacing-m) var(--ot-spacing-x);
	user-select: none;
	font-family: var(--ot-font-primary);
}

/* ===== SUBMENU ===== */

.e-4a1a1973 .entry > .submenu
{
	padding-left: calc(20px + var(--ot-spacing-s));
	animation: e-4a1a1973-reveal var(--ot-transition);
}

@keyframes e-4a1a1973-reveal
{
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ===== TONE: DEFAULT ===== */

.e-4a1a1973 > .box.default
{
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
}

/* ===== TONE: CONTEXTUAL (floating) ===== */

.e-4a1a1973 > .box.contextual
{
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-1-border);
	border-radius: var(--ot-radius-m);
	box-shadow: var(--ot-shadow-l);
	min-width: 220px;
}

/* ===== TONE: FLUSH (no container) ===== */

.e-4a1a1973 > .box.flush
{
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
}

/* ===== TONE: BORDERED ===== */

.e-4a1a1973 > .box.bordered
{
	background: transparent;
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
}

/* ===== BACKGROUND ===== */

.e-4a1a1973 > .box.bg-1 { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); }
.e-4a1a1973 > .box.bg-1 .entry > .row:hover { background: var(--ot-bg-1-hover); }
.e-4a1a1973 > .box.bg-1 .entry > .row > .shortcut { background: var(--ot-bg-2); }
.e-4a1a1973 > .box.bg-1 .entry > .separator { background: var(--ot-bg-1-border); }

.e-4a1a1973 > .box.bg-2 { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
.e-4a1a1973 > .box.bg-2 .entry > .row:hover { background: var(--ot-bg-2-hover); }
.e-4a1a1973 > .box.bg-2 .entry > .row > .shortcut { background: var(--ot-bg-1); }
.e-4a1a1973 > .box.bg-2 .entry > .separator { background: var(--ot-bg-2-border); }

.e-4a1a1973 > .box.bg-3 { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }
.e-4a1a1973 > .box.bg-3 .entry > .row:hover { background: var(--ot-bg-3-hover); }
.e-4a1a1973 > .box.bg-3 .entry > .row > .shortcut { background: var(--ot-bg-2); }
.e-4a1a1973 > .box.bg-3 .entry > .separator { background: var(--ot-bg-3-border); }

.e-4a1a1973 > .box.bg-4 { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }
.e-4a1a1973 > .box.bg-4 .entry > .row:hover { background: var(--ot-bg-4-hover); }
.e-4a1a1973 > .box.bg-4 .entry > .row > .shortcut { background: var(--ot-bg-3); }
.e-4a1a1973 > .box.bg-4 .entry > .separator { background: var(--ot-bg-4-border); }

/* ===== BORDER MODIFIERS ===== */

.e-4a1a1973 > .box.border        { border: 1px solid var(--ot-bg-2-border); }
.e-4a1a1973 > .box.border-top    { border-top: 1px solid var(--ot-bg-2-border); }
.e-4a1a1973 > .box.border-right  { border-right: 1px solid var(--ot-bg-2-border); }
.e-4a1a1973 > .box.border-bottom { border-bottom: 1px solid var(--ot-bg-2-border); }
.e-4a1a1973 > .box.border-left   { border-left: 1px solid var(--ot-bg-2-border); }

.e-4a1a1973 > .box.bg-1.border,
.e-4a1a1973 > .box.bg-1.border-top,
.e-4a1a1973 > .box.bg-1.border-right,
.e-4a1a1973 > .box.bg-1.border-bottom,
.e-4a1a1973 > .box.bg-1.border-left { border-color: var(--ot-bg-1-border); }

.e-4a1a1973 > .box.bg-3.border,
.e-4a1a1973 > .box.bg-3.border-top,
.e-4a1a1973 > .box.bg-3.border-right,
.e-4a1a1973 > .box.bg-3.border-bottom,
.e-4a1a1973 > .box.bg-3.border-left { border-color: var(--ot-bg-3-border); }

.e-4a1a1973 > .box.bg-4.border,
.e-4a1a1973 > .box.bg-4.border-top,
.e-4a1a1973 > .box.bg-4.border-right,
.e-4a1a1973 > .box.bg-4.border-bottom,
.e-4a1a1973 > .box.bg-4.border-left { border-color: var(--ot-bg-4-border); }

/* ===== SIZE ===== */

/* Small */

.e-4a1a1973 > .box.size-s .entry > .row
{
	min-height: var(--ot-height-s);
	padding: 0 var(--ot-spacing-x);
	gap: var(--ot-spacing-x);
}

.e-4a1a1973 > .box.size-s .entry > .row > .icon
{
	width: 16px;
	font-size: 15px;
}

.e-4a1a1973 > .box.size-s .entry > .row > .text > .label
{
	font-size: var(--ot-size-s);
}

.e-4a1a1973 > .box.size-s .entry > .row > .text > .description
{
	font-size: 10.5px;
}

.e-4a1a1973 > .box.size-s .entry > .row > .shortcut
{
	font-size: 10px;
	padding: 1px 5px;
}

.e-4a1a1973 > .box.size-s .entry > .header
{
	font-size: 9.5px;
	padding: var(--ot-spacing-x) var(--ot-spacing-s) 2px;
}

/* Large */

.e-4a1a1973 > .box.size-l .entry > .row
{
	min-height: var(--ot-height-l);
	padding: 0 var(--ot-spacing-m);
	gap: var(--ot-spacing-m);
}

.e-4a1a1973 > .box.size-l .entry > .row > .icon
{
	width: 24px;
	font-size: 22px;
}

.e-4a1a1973 > .box.size-l .entry > .row > .text > .label
{
	font-size: 14px;
}

.e-4a1a1973 > .box.size-l .entry > .row > .text > .description
{
	font-size: 12.5px;
}

.e-4a1a1973 > .box.size-l .entry > .row > .shortcut
{
	font-size: var(--ot-size-s);
	padding: 3px 8px;
}

.e-4a1a1973 > .box.size-l .entry > .header
{
	font-size: var(--ot-size-s);
	padding: var(--ot-spacing-m) var(--ot-spacing-l) var(--ot-spacing-x);
}
/* ===== GLOBAL NOTICE ===== */

.e-2e3de5ec
{
	display: contents;
}

/* Box */

.e-2e3de5ec > .box
{
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-m);
	width: 100%;
	padding: var(--ot-spacing-m);
	border: 1px solid transparent;
	border-radius: var(--ot-radius-m);
	font-family: var(--ot-font-primary);
	transition: opacity var(--ot-transition), transform var(--ot-transition);
}

/* Icon */

.e-2e3de5ec > .box > .icon
{
	flex-shrink: 0;
	font-size: 20px;
	line-height: 1.3;
	font-variation-settings: 'FILL' 1;
}

/* Body */

.e-2e3de5ec > .box > .body
{
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.e-2e3de5ec > .box > .body > .title
{
	font-size: var(--ot-size-m);
	font-weight: 600;
	line-height: 1.3;
}

.e-2e3de5ec > .box > .body > .text
{
	font-size: 12.5px;
	line-height: 1.5;
	opacity: 0.85;
}

/* Actions */

.e-2e3de5ec > .box > .actions
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	flex-shrink: 0;
}

.e-2e3de5ec > .box > .actions:empty
{
	display: none;
}

/* Close */

.e-2e3de5ec > .box > .close
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: var(--ot-radius-s);
	color: currentColor;
	cursor: pointer;
	flex-shrink: 0;
	opacity: 0.6;
	transition: background var(--ot-transition), opacity var(--ot-transition);
}

.e-2e3de5ec > .box > .close:hover
{
	opacity: 1;
	background: rgba(255, 255, 255, 0.1);
}

.e-2e3de5ec > .box > .close > i
{
	font-size: 18px;
}

/* ===== TONE: SOFT (opacity background) ===== */

.e-2e3de5ec > .box.soft.brand  { background: var(--ot-brand-opacity);  border-color: var(--ot-brand-border);  color: var(--ot-brand); }
.e-2e3de5ec > .box.soft.blue   { background: var(--ot-blue-opacity);   border-color: var(--ot-blue-border);   color: var(--ot-blue); }
.e-2e3de5ec > .box.soft.red    { background: var(--ot-red-opacity);    border-color: var(--ot-red-border);    color: var(--ot-red); }
.e-2e3de5ec > .box.soft.orange { background: var(--ot-orange-opacity); border-color: var(--ot-orange-border); color: var(--ot-orange); }
.e-2e3de5ec > .box.soft.green  { background: var(--ot-green-opacity);  border-color: var(--ot-green-border);  color: var(--ot-green); }

.e-2e3de5ec > .box.soft > .body > .title { color: inherit; }
.e-2e3de5ec > .box.soft > .body > .text  { color: var(--ot-text-1); }

/* ===== TONE: FILLED (solid background) ===== */

.e-2e3de5ec > .box.filled.brand  { background: var(--ot-brand);  border-color: var(--ot-brand);  color: #fff; }
.e-2e3de5ec > .box.filled.blue   { background: var(--ot-blue);   border-color: var(--ot-blue);   color: #fff; }
.e-2e3de5ec > .box.filled.red    { background: var(--ot-red);    border-color: var(--ot-red);    color: #fff; }
.e-2e3de5ec > .box.filled.orange { background: var(--ot-orange); border-color: var(--ot-orange); color: #fff; }
.e-2e3de5ec > .box.filled.green  { background: var(--ot-green);  border-color: var(--ot-green);  color: #fff; }

.e-2e3de5ec > .box.filled > .body > .title { color: #fff; }
.e-2e3de5ec > .box.filled > .body > .text  { color: #fff; opacity: 0.9; }

/* ===== TONE: ACCENT (left border bar) ===== */

.e-2e3de5ec > .box.accent
{
	border-left-width: 3px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.e-2e3de5ec > .box.accent.brand  { background: var(--ot-brand-opacity);  border-color: transparent; border-left-color: var(--ot-brand);  color: var(--ot-brand); }
.e-2e3de5ec > .box.accent.blue   { background: var(--ot-blue-opacity);   border-color: transparent; border-left-color: var(--ot-blue);   color: var(--ot-blue); }
.e-2e3de5ec > .box.accent.red    { background: var(--ot-red-opacity);    border-color: transparent; border-left-color: var(--ot-red);    color: var(--ot-red); }
.e-2e3de5ec > .box.accent.orange { background: var(--ot-orange-opacity); border-color: transparent; border-left-color: var(--ot-orange); color: var(--ot-orange); }
.e-2e3de5ec > .box.accent.green  { background: var(--ot-green-opacity);  border-color: transparent; border-left-color: var(--ot-green);  color: var(--ot-green); }

.e-2e3de5ec > .box.accent > .body > .title { color: inherit; }
.e-2e3de5ec > .box.accent > .body > .text  { color: var(--ot-text-1); }

/* ===== BACKGROUND (neutral) ===== */

.e-2e3de5ec > .box.bg-1 { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); color: var(--ot-text-2); }
.e-2e3de5ec > .box.bg-2 { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); color: var(--ot-text-2); }
.e-2e3de5ec > .box.bg-3 { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); color: var(--ot-text-2); }
.e-2e3de5ec > .box.bg-4 { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); color: var(--ot-text-2); }

.e-2e3de5ec > .box.bg-1 > .body > .title,
.e-2e3de5ec > .box.bg-2 > .body > .title,
.e-2e3de5ec > .box.bg-3 > .body > .title,
.e-2e3de5ec > .box.bg-4 > .body > .title
{
	color: var(--ot-text-1);
}

/* ===== SIZE ===== */

.e-2e3de5ec > .box.size-s
{
	padding: var(--ot-spacing-s) var(--ot-spacing-m);
	gap: var(--ot-spacing-s);
}

.e-2e3de5ec > .box.size-s > .icon
{
	font-size: 17px;
}

.e-2e3de5ec > .box.size-s > .body > .title
{
	font-size: 12px;
}

.e-2e3de5ec > .box.size-s > .body > .text
{
	font-size: var(--ot-size-s);
}

.e-2e3de5ec > .box.size-s > .close
{
	width: 24px;
	height: 24px;
}

.e-2e3de5ec > .box.size-s > .close > i
{
	font-size: 15px;
}

.e-2e3de5ec > .box.size-l
{
	padding: var(--ot-spacing-l);
	gap: var(--ot-spacing-m);
}

.e-2e3de5ec > .box.size-l > .icon
{
	font-size: 24px;
}

.e-2e3de5ec > .box.size-l > .body > .title
{
	font-size: 15px;
}

.e-2e3de5ec > .box.size-l > .body > .text
{
	font-size: 13.5px;
}

.e-2e3de5ec > .box.size-l > .close
{
	width: 32px;
	height: 32px;
}

.e-2e3de5ec > .box.size-l > .close > i
{
	font-size: 20px;
}
/* ===== GLOBAL PARAMETERS ===== */

.e-29179902
{
	display: contents;
}

/* Box */

.e-29179902 > .box
{
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* List */

.e-29179902 > .box > .list
{
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* ===== PARAM ===== */

.e-29179902 .param
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-s);
	padding: var(--ot-spacing-m) 0;
	border-bottom: 1px solid var(--ot-bg-2-border);
	transition: background var(--ot-transition);
}

.e-29179902 > .box > .list > .param:last-child
{
	border-bottom: none;
}

.e-29179902 .param.deprecated > .head > .name
{
	text-decoration: line-through;
	opacity: 0.5;
}

/* Head */

.e-29179902 .param > .head
{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ot-spacing-s);
}

/* Name */

.e-29179902 .param > .head > .name
{
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ot-text-1);
}

/* Type */

.e-29179902 .param > .head > .type
{
	display: inline-flex;
	align-items: center;
	padding: 2px var(--ot-spacing-s);
	border-radius: var(--ot-radius-s);
	background: var(--ot-blue-opacity);
	color: var(--ot-blue);
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: var(--ot-size-s);
	font-weight: 600;
}

/* Badges */

.e-29179902 .param > .head > .badge
{
	display: inline-flex;
	align-items: center;
	padding: 2px var(--ot-spacing-s);
	border-radius: 100px;
	font-family: var(--ot-font-primary);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.e-29179902 .param > .head > .badge.required
{
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
}

.e-29179902 .param > .head > .badge.deprecated
{
	background: var(--ot-red-opacity);
	color: var(--ot-red);
}

.e-29179902 .param > .head > .badge.since
{
	background: var(--ot-green-opacity);
	color: var(--ot-green);
}

/* Description */

.e-29179902 .param > .description
{
	font-size: var(--ot-size-m);
	line-height: 1.6;
	color: var(--ot-text-2);
}

.e-29179902 .param > .description code
{
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 0.88em;
	padding: 1px 6px;
	border-radius: var(--ot-radius-s);
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	color: var(--ot-text-1);
}

/* Meta (default, options) */

.e-29179902 .param > .meta
{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ot-spacing-s);
}

.e-29179902 .param > .meta > .label
{
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ot-text-3);
}

.e-29179902 .param > .meta > .options
{
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ot-spacing-x);
}

.e-29179902 .param .mono
{
	display: inline-flex;
	align-items: center;
	padding: 2px var(--ot-spacing-s);
	border-radius: var(--ot-radius-s);
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	color: var(--ot-text-1);
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: var(--ot-size-s);
	font-weight: 500;
}

/* Children */

.e-29179902 .param > .children
{
	display: flex;
	flex-direction: column;
	margin-top: var(--ot-spacing-s);
	padding-left: var(--ot-spacing-m);
	border-left: 2px solid var(--ot-bg-2-border);
}

.e-29179902 .param > .children > .param
{
	padding: var(--ot-spacing-s) 0;
	border-bottom: 1px dashed var(--ot-bg-2-border);
}

.e-29179902 .param > .children > .param:last-child
{
	border-bottom: none;
}

/* ===== TONE: ROWS ===== */

.e-29179902 > .box.rows
{
	padding: 0;
}

/* ===== TONE: COMPACT ===== */

.e-29179902 > .box.compact .param
{
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ot-spacing-m);
	padding: var(--ot-spacing-s) 0;
}

.e-29179902 > .box.compact .param > .head
{
	flex-shrink: 0;
}

.e-29179902 > .box.compact .param > .description
{
	flex: 1;
	min-width: 200px;
	font-size: 12.5px;
}

.e-29179902 > .box.compact .param > .meta
{
	flex-basis: 100%;
}

/* ===== TONE: CARDS ===== */

.e-29179902 > .box.cards > .list
{
	gap: var(--ot-spacing-s);
}

.e-29179902 > .box.cards > .list > .param
{
	padding: var(--ot-spacing-m);
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
	transition: border-color var(--ot-transition);
}

.e-29179902 > .box.cards > .list > .param:hover
{
	border-color: var(--ot-bg-3-border);
}

.e-29179902 > .box.cards > .list > .param:last-child
{
	border-bottom: 1px solid var(--ot-bg-2-border);
}

.e-29179902 > .box.cards > .list > .param:last-child:hover
{
	border-color: var(--ot-bg-3-border);
}

/* ===== BACKGROUND ===== */

.e-29179902 > .box.bg-1 { background: var(--ot-bg-1); border-radius: var(--ot-radius-m); padding: var(--ot-spacing-m); }
.e-29179902 > .box.bg-2 { background: var(--ot-bg-2); border-radius: var(--ot-radius-m); padding: var(--ot-spacing-m); }
.e-29179902 > .box.bg-3 { background: var(--ot-bg-3); border-radius: var(--ot-radius-m); padding: var(--ot-spacing-m); }
.e-29179902 > .box.bg-4 { background: var(--ot-bg-4); border-radius: var(--ot-radius-m); padding: var(--ot-spacing-m); }

.e-29179902 > .box.bg-1 .param { border-bottom-color: var(--ot-bg-1-border); }
.e-29179902 > .box.bg-2 .param { border-bottom-color: var(--ot-bg-2-border); }
.e-29179902 > .box.bg-3 .param { border-bottom-color: var(--ot-bg-3-border); }
.e-29179902 > .box.bg-4 .param { border-bottom-color: var(--ot-bg-4-border); }

.e-29179902 > .box.bg-1 .param > .head > .type,
.e-29179902 > .box.bg-1 .param .mono { background: var(--ot-bg-2); border-color: var(--ot-bg-1-border); }

.e-29179902 > .box.bg-2 .param > .head > .type,
.e-29179902 > .box.bg-2 .param .mono { background: var(--ot-bg-1); border-color: var(--ot-bg-2-border); }

.e-29179902 > .box.bg-3 .param > .head > .type,
.e-29179902 > .box.bg-3 .param .mono { background: var(--ot-bg-2); border-color: var(--ot-bg-3-border); }

.e-29179902 > .box.bg-4 .param > .head > .type,
.e-29179902 > .box.bg-4 .param .mono { background: var(--ot-bg-3); border-color: var(--ot-bg-4-border); }

/* Cards on background */

.e-29179902 > .box.bg-1.cards > .list > .param { background: var(--ot-bg-2); border-color: var(--ot-bg-1-border); }
.e-29179902 > .box.bg-1.cards > .list > .param:hover { border-color: var(--ot-bg-2-border); }

.e-29179902 > .box.bg-2.cards > .list > .param { background: var(--ot-bg-1); border-color: var(--ot-bg-2-border); }
.e-29179902 > .box.bg-2.cards > .list > .param:hover { border-color: var(--ot-bg-3-border); }

.e-29179902 > .box.bg-3.cards > .list > .param { background: var(--ot-bg-2); border-color: var(--ot-bg-3-border); }
.e-29179902 > .box.bg-3.cards > .list > .param:hover { border-color: var(--ot-bg-4-border); }

.e-29179902 > .box.bg-4.cards > .list > .param { background: var(--ot-bg-3); border-color: var(--ot-bg-4-border); }

/* Children on background */

.e-29179902 > .box.bg-1 .param > .children { border-left-color: var(--ot-bg-1-border); }
.e-29179902 > .box.bg-2 .param > .children { border-left-color: var(--ot-bg-2-border); }
.e-29179902 > .box.bg-3 .param > .children { border-left-color: var(--ot-bg-3-border); }
.e-29179902 > .box.bg-4 .param > .children { border-left-color: var(--ot-bg-4-border); }

.e-29179902 > .box.bg-1 .param > .children > .param { border-bottom-color: var(--ot-bg-1-border); }
.e-29179902 > .box.bg-2 .param > .children > .param { border-bottom-color: var(--ot-bg-2-border); }
.e-29179902 > .box.bg-3 .param > .children > .param { border-bottom-color: var(--ot-bg-3-border); }
.e-29179902 > .box.bg-4 .param > .children > .param { border-bottom-color: var(--ot-bg-4-border); }

/* ===== BORDER ===== */

.e-29179902 > .box.border { border: 1px solid var(--ot-bg-2-border); border-radius: var(--ot-radius-m); padding: var(--ot-spacing-m); }
.e-29179902 > .box.border-top { border-top: 1px solid var(--ot-bg-2-border); }
.e-29179902 > .box.border-right { border-right: 1px solid var(--ot-bg-2-border); }
.e-29179902 > .box.border-bottom { border-bottom: 1px solid var(--ot-bg-2-border); }
.e-29179902 > .box.border-left { border-left: 1px solid var(--ot-bg-2-border); }

.e-29179902 > .box.bg-1.border,
.e-29179902 > .box.bg-1.border-top,
.e-29179902 > .box.bg-1.border-right,
.e-29179902 > .box.bg-1.border-bottom,
.e-29179902 > .box.bg-1.border-left { border-color: var(--ot-bg-1-border); }

.e-29179902 > .box.bg-2.border,
.e-29179902 > .box.bg-2.border-top,
.e-29179902 > .box.bg-2.border-right,
.e-29179902 > .box.bg-2.border-bottom,
.e-29179902 > .box.bg-2.border-left { border-color: var(--ot-bg-2-border); }

.e-29179902 > .box.bg-3.border,
.e-29179902 > .box.bg-3.border-top,
.e-29179902 > .box.bg-3.border-right,
.e-29179902 > .box.bg-3.border-bottom,
.e-29179902 > .box.bg-3.border-left { border-color: var(--ot-bg-3-border); }

.e-29179902 > .box.bg-4.border,
.e-29179902 > .box.bg-4.border-top,
.e-29179902 > .box.bg-4.border-right,
.e-29179902 > .box.bg-4.border-bottom,
.e-29179902 > .box.bg-4.border-left { border-color: var(--ot-bg-4-border); }

/* ===== SIZE ===== */

/* Small */

.e-29179902 > .box.size-s .param
{
	padding: var(--ot-spacing-s) 0;
	gap: var(--ot-spacing-x);
}

.e-29179902 > .box.size-s .param > .head
{
	gap: var(--ot-spacing-x);
}

.e-29179902 > .box.size-s .param > .head > .name
{
	font-size: 12.5px;
}

.e-29179902 > .box.size-s .param > .head > .type
{
	font-size: 10px;
	padding: 1px 6px;
}

.e-29179902 > .box.size-s .param > .head > .badge
{
	font-size: 9px;
	padding: 1px 6px;
}

.e-29179902 > .box.size-s .param > .description
{
	font-size: 12px;
}

.e-29179902 > .box.size-s .param .mono
{
	font-size: 10px;
	padding: 1px 6px;
}

/* Large */

.e-29179902 > .box.size-l .param
{
	padding: var(--ot-spacing-l) 0;
	gap: var(--ot-spacing-m);
}

.e-29179902 > .box.size-l .param > .head > .name
{
	font-size: 15px;
}

.e-29179902 > .box.size-l .param > .head > .type
{
	font-size: 12px;
	padding: 3px 10px;
}

.e-29179902 > .box.size-l .param > .head > .badge
{
	font-size: var(--ot-size-s);
	padding: 3px 10px;
}

.e-29179902 > .box.size-l .param > .description
{
	font-size: 14px;
}

.e-29179902 > .box.size-l .param .mono
{
	font-size: 12px;
	padding: 3px 10px;
}
/* ===== GLOBAL TAGS ===== */

.e-4a1d382d
{
	display: contents;
}

/* Box */

.e-4a1d382d > .box
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	flex-wrap: wrap;
	width: 100%;
}

/* Tag */

.e-4a1d382d .tag
{
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--ot-spacing-x);
	padding: 7px var(--ot-spacing-m);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	font-weight: 500;
	color: var(--ot-text-2);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 100px;
	cursor: pointer;
	outline: none;
	white-space: nowrap;
	user-select: none;
	transition: background var(--ot-transition), border-color var(--ot-transition), color var(--ot-transition), transform var(--ot-transition);
}

.e-4a1d382d .tag:hover:not(.disabled):not(.active)
{
	color: var(--ot-text-1);
	transform: translateY(-1px);
}

.e-4a1d382d .tag:active:not(.disabled)
{
	transform: translateY(0) scale(0.97);
	transition-duration: 100ms;
}

.e-4a1d382d .tag:focus-visible
{
	box-shadow: 0 0 0 3px var(--ot-brand-opacity);
}

.e-4a1d382d .tag.disabled
{
	cursor: not-allowed;
	opacity: 0.45;
	pointer-events: none;
}

/* Active */

.e-4a1d382d .tag.active
{
	color: var(--ot-brand);
}

/* Icon */

.e-4a1d382d .tag > i
{
	font-size: 16px;
	margin-left: -2px;
}

/* Color dot */

.e-4a1d382d .tag > .dot
{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	background: var(--ot-text-3);
	transition: box-shadow var(--ot-transition);
}

.e-4a1d382d .tag.active > .dot
{
	box-shadow: 0 0 0 3px var(--ot-bg-1);
}

.e-4a1d382d .tag.color-brand > .dot { background: var(--ot-brand); }
.e-4a1d382d .tag.color-blue > .dot { background: var(--ot-blue); }
.e-4a1d382d .tag.color-red > .dot { background: var(--ot-red); }
.e-4a1d382d .tag.color-orange > .dot { background: var(--ot-orange); }
.e-4a1d382d .tag.color-green > .dot { background: var(--ot-green); }

/* Count badge */

.e-4a1d382d .tag > .count
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	padding: 0 6px;
	background: var(--ot-bg-2);
	border-radius: 100px;
	font-size: var(--ot-size-s);
	font-weight: 600;
	color: var(--ot-text-3);
	line-height: 18px;
	margin-right: -4px;
	transition: background var(--ot-transition-fast), color var(--ot-transition-fast);
}

.e-4a1d382d .tag.active > .count
{
	background: var(--ot-brand);
	color: #fff;
}

/* ===== TONE: PILLS ===== */

.e-4a1d382d > .box.pills > .tag
{
	background: var(--ot-bg-2);
}

.e-4a1d382d > .box.pills > .tag:hover:not(.disabled):not(.active)
{
	background: var(--ot-bg-2-hover);
}

.e-4a1d382d > .box.pills > .tag.active
{
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
}

/* ===== TONE: OUTLINE ===== */

.e-4a1d382d > .box.outline > .tag
{
	background: transparent;
	border-color: var(--ot-bg-2-border);
}

.e-4a1d382d > .box.outline > .tag:hover:not(.disabled):not(.active)
{
	border-color: var(--ot-text-2);
}

.e-4a1d382d > .box.outline > .tag.active
{
	background: var(--ot-brand-opacity);
	border-color: var(--ot-brand);
	color: var(--ot-brand);
}

/* ===== TONE: MINIMAL ===== */

.e-4a1d382d > .box.minimal > .tag
{
	background: transparent;
	border-color: transparent;
	padding: 7px var(--ot-spacing-s);
}

.e-4a1d382d > .box.minimal > .tag:hover:not(.disabled):not(.active)
{
	background: var(--ot-bg-2-opacity);
}

.e-4a1d382d > .box.minimal > .tag.active
{
	color: var(--ot-brand);
	background: var(--ot-brand-opacity);
}

/* ===== BACKGROUND ===== */

.e-4a1d382d > .box.bg-1.pills > .tag { background: var(--ot-bg-1); }
.e-4a1d382d > .box.bg-1.pills > .tag:hover:not(.disabled):not(.active) { background: var(--ot-bg-1-hover); }
.e-4a1d382d > .box.bg-1 .tag > .count { background: var(--ot-bg-2); }

.e-4a1d382d > .box.bg-2.pills > .tag { background: var(--ot-bg-2); }
.e-4a1d382d > .box.bg-2.pills > .tag:hover:not(.disabled):not(.active) { background: var(--ot-bg-2-hover); }
.e-4a1d382d > .box.bg-2 .tag > .count { background: var(--ot-bg-3); }

.e-4a1d382d > .box.bg-3.pills > .tag { background: var(--ot-bg-3); }
.e-4a1d382d > .box.bg-3.pills > .tag:hover:not(.disabled):not(.active) { background: var(--ot-bg-3-hover); }
.e-4a1d382d > .box.bg-3 .tag > .count { background: var(--ot-bg-4); }

.e-4a1d382d > .box.bg-4.pills > .tag { background: var(--ot-bg-4); }
.e-4a1d382d > .box.bg-4.pills > .tag:hover:not(.disabled):not(.active) { background: var(--ot-bg-4-hover); }
.e-4a1d382d > .box.bg-4 .tag > .count { background: var(--ot-bg-3); }

/* Outline + bg */

.e-4a1d382d > .box.bg-1.outline > .tag { border-color: var(--ot-bg-1-border); }
.e-4a1d382d > .box.bg-2.outline > .tag { border-color: var(--ot-bg-2-border); }
.e-4a1d382d > .box.bg-3.outline > .tag { border-color: var(--ot-bg-3-border); }
.e-4a1d382d > .box.bg-4.outline > .tag { border-color: var(--ot-bg-4-border); }

/* ===== BORDER MODIFIER ===== */

.e-4a1d382d > .box.border > .tag { border-color: var(--ot-bg-2-border); }
.e-4a1d382d > .box.bg-1.border > .tag { border-color: var(--ot-bg-1-border); }
.e-4a1d382d > .box.bg-2.border > .tag { border-color: var(--ot-bg-2-border); }
.e-4a1d382d > .box.bg-3.border > .tag { border-color: var(--ot-bg-3-border); }
.e-4a1d382d > .box.bg-4.border > .tag { border-color: var(--ot-bg-4-border); }

/* ===== SIZE ===== */

.e-4a1d382d > .box.size-s
{
	gap: var(--ot-spacing-x);
}

.e-4a1d382d > .box.size-s .tag
{
	padding: 5px var(--ot-spacing-s);
	font-size: var(--ot-size-s);
}

.e-4a1d382d > .box.size-s .tag > i
{
	font-size: 14px;
}

.e-4a1d382d > .box.size-s .tag > .dot
{
	width: 6px;
	height: 6px;
}

.e-4a1d382d > .box.size-s .tag > .count
{
	min-width: 16px;
	font-size: 10px;
	line-height: 16px;
	padding: 0 5px;
}

.e-4a1d382d > .box.size-s.minimal > .tag
{
	padding: 5px var(--ot-spacing-x);
}

.e-4a1d382d > .box.size-l .tag
{
	padding: 10px var(--ot-spacing-l);
	font-size: 14px;
}

.e-4a1d382d > .box.size-l .tag > i
{
	font-size: 18px;
}

.e-4a1d382d > .box.size-l .tag > .dot
{
	width: 10px;
	height: 10px;
}

.e-4a1d382d > .box.size-l .tag > .count
{
	min-width: 20px;
	font-size: var(--ot-size-s);
	line-height: 20px;
	padding: 0 8px;
}
/* ===== NAVIGATION DOCK ===== */

.e-1a845976
{
	display: contents;
}

/* Box */

.e-1a845976 > .box
{
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	width: 68px;
	height: 100%;
	padding: var(--ot-spacing-s) 0;
	overflow: hidden;
}

/* Logo */

.e-1a845976 > .box > .logo
{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	margin-bottom: var(--ot-spacing-s);
	transition: transform var(--ot-transition);
}

.e-1a845976 > .box > .logo:hover
{
	transform: scale(1.06);
}

.e-1a845976 > .box > .logo > img
{
	width: 22px;
	height: 22px;
	object-fit: contain;
}

/* Stack */

.e-1a845976 > .box > .stack
{
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	width: 100%;
}

.e-1a845976 > .box > .stack.bottom
{
	margin-top: auto;
}

/* Separator */

.e-1a845976 .separator
{
	width: 32px;
	height: 1px;
	background: var(--ot-bg-2-border);
	margin: var(--ot-spacing-s) auto;
	flex-shrink: 0;
}

/* Group */

.e-1a845976 .group
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ot-spacing-x);
	flex-shrink: 0;
}

/* Item */

.e-1a845976 .item
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--ot-radius-m);
	color: var(--ot-text-2);
	text-decoration: none;
	transition: background var(--ot-transition), color var(--ot-transition), transform var(--ot-transition);
}

.e-1a845976 .item:hover
{
	background: var(--ot-bg-3);
	color: var(--ot-text-1);
}

.e-1a845976 .item:active
{
	transform: scale(0.94);
	transition-duration: 100ms;
}

.e-1a845976 .item > i
{
	font-size: 20px;
	font-variation-settings: 'wght' 400;
}

/* Active */

.e-1a845976 .item.active
{
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
}

.e-1a845976 .item.active > i
{
	font-variation-settings: 'wght' 500;
}

.e-1a845976 .item.active::before
{
	content: '';
	position: absolute;
	left: calc(var(--ot-spacing-s) * -1);
	top: 50%;
	width: 3px;
	height: 50%;
	border-radius: 0 3px 3px 0;
	background: var(--ot-brand);
	transform: translateY(-50%);
}

/* Badge */

.e-1a845976 .item > .badge
{
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 100px;
	background: var(--ot-brand);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	font-family: var(--ot-font-primary);
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--ot-bg-2);
}

/* ===== BACKGROUND ===== */

.e-1a845976 > .box.bg-1 { background: var(--ot-bg-1); }
.e-1a845976 > .box.bg-1 .item:hover { background: var(--ot-bg-1-hover); }
.e-1a845976 > .box.bg-1 .separator { background: var(--ot-bg-1-border); }
.e-1a845976 > .box.bg-1 .item > .badge { border-color: var(--ot-bg-1); }

.e-1a845976 > .box.bg-2 { background: var(--ot-bg-2); }
.e-1a845976 > .box.bg-2 .item:hover { background: var(--ot-bg-2-hover); }
.e-1a845976 > .box.bg-2 .separator { background: var(--ot-bg-2-border); }
.e-1a845976 > .box.bg-2 .item > .badge { border-color: var(--ot-bg-2); }

.e-1a845976 > .box.bg-3 { background: var(--ot-bg-3); }
.e-1a845976 > .box.bg-3 .item:hover { background: var(--ot-bg-3-hover); }
.e-1a845976 > .box.bg-3 .separator { background: var(--ot-bg-3-border); }
.e-1a845976 > .box.bg-3 .item > .badge { border-color: var(--ot-bg-3); }

.e-1a845976 > .box.bg-4 { background: var(--ot-bg-4); }
.e-1a845976 > .box.bg-4 .item:hover { background: var(--ot-bg-4-hover); }
.e-1a845976 > .box.bg-4 .separator { background: var(--ot-bg-4-border); }
.e-1a845976 > .box.bg-4 .item > .badge { border-color: var(--ot-bg-4); }

/* ===== BORDER ===== */

.e-1a845976 > .box.border { border: 1px solid var(--ot-bg-2-border); }
.e-1a845976 > .box.border-top { border-top: 1px solid var(--ot-bg-2-border); }
.e-1a845976 > .box.border-right { border-right: 1px solid var(--ot-bg-2-border); }
.e-1a845976 > .box.border-bottom { border-bottom: 1px solid var(--ot-bg-2-border); }
.e-1a845976 > .box.border-left { border-left: 1px solid var(--ot-bg-2-border); }

.e-1a845976 > .box.bg-1.border,
.e-1a845976 > .box.bg-1.border-top,
.e-1a845976 > .box.bg-1.border-right,
.e-1a845976 > .box.bg-1.border-bottom,
.e-1a845976 > .box.bg-1.border-left { border-color: var(--ot-bg-1-border); }

.e-1a845976 > .box.bg-2.border,
.e-1a845976 > .box.bg-2.border-top,
.e-1a845976 > .box.bg-2.border-right,
.e-1a845976 > .box.bg-2.border-bottom,
.e-1a845976 > .box.bg-2.border-left { border-color: var(--ot-bg-2-border); }

.e-1a845976 > .box.bg-3.border,
.e-1a845976 > .box.bg-3.border-top,
.e-1a845976 > .box.bg-3.border-right,
.e-1a845976 > .box.bg-3.border-bottom,
.e-1a845976 > .box.bg-3.border-left { border-color: var(--ot-bg-3-border); }

.e-1a845976 > .box.bg-4.border,
.e-1a845976 > .box.bg-4.border-top,
.e-1a845976 > .box.bg-4.border-right,
.e-1a845976 > .box.bg-4.border-bottom,
.e-1a845976 > .box.bg-4.border-left { border-color: var(--ot-bg-4-border); }
/* ===== NAVIGATION FOOTER ===== */

.e-71bcd7e2
{
	display: block;
	width: 100%;
}

/* Box */

.e-71bcd7e2 > .box
{
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--ot-bg-1);
	border-top: 1px solid transparent;
	padding: var(--ot-spacing-l) var(--ot-spacing-l) var(--ot-spacing-m);
}

/* ===== BACKGROUND ===== */

.e-71bcd7e2 > .box.bg-1 { background: var(--ot-bg-1); }
.e-71bcd7e2 > .box.bg-2 { background: var(--ot-bg-2); }
.e-71bcd7e2 > .box.bg-3 { background: var(--ot-bg-3); }
.e-71bcd7e2 > .box.bg-4 { background: var(--ot-bg-4); }

/* ===== MODIFIERS ===== */

.e-71bcd7e2 > .box.border { border-top-color: var(--ot-bg-2-border); }
.e-71bcd7e2 > .box.bg-1.border { border-top-color: var(--ot-bg-1-border); }
.e-71bcd7e2 > .box.bg-2.border { border-top-color: var(--ot-bg-2-border); }
.e-71bcd7e2 > .box.bg-3.border { border-top-color: var(--ot-bg-3-border); }
.e-71bcd7e2 > .box.bg-4.border { border-top-color: var(--ot-bg-4-border); }

.e-71bcd7e2 > .box.clean
{
	background: transparent !important;
	border-top-color: transparent !important;
}

/* ===== TOP SLOT ===== */

.e-71bcd7e2 > .box > .top-slot
{
	margin-bottom: var(--ot-spacing-l);
	padding-bottom: var(--ot-spacing-l);
	border-bottom: 1px solid var(--ot-bg-2-border);
}

/* ===== MAIN ===== */

.e-71bcd7e2 > .box > .main
{
	display: grid;
	grid-template-columns: minmax(280px, 1.2fr) 3fr;
	gap: var(--ot-spacing-l);
	width: 100%;
}

/* ===== BRAND COLUMN ===== */

.e-71bcd7e2 > .box > .main > .brand-col
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-m);
	min-width: 0;
}

.e-71bcd7e2 > .box > .main > .brand-col > .brand
{
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
}

.e-71bcd7e2 > .box > .main > .brand-col > .brand > .brand-logo
{
	display: block;
	height: 28px;
	width: auto;
}

.e-71bcd7e2 > .box > .main > .brand-col > .tagline
{
	margin: 0;
	max-width: 340px;
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	color: var(--ot-text-2);
	line-height: 1.6;
}

/* Newsletter */

.e-71bcd7e2 > .box > .main > .brand-col > .newsletter
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-s);
	padding: var(--ot-spacing-m);
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
	max-width: 420px;
}

.e-71bcd7e2 > .box > .main > .brand-col > .newsletter > .newsletter-text
{
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.e-71bcd7e2 > .box > .main > .brand-col > .newsletter > .newsletter-text > .newsletter-title
{
	margin: 0;
	font-family: var(--ot-font-secondary);
	font-size: 16px;
	font-weight: 600;
	color: var(--ot-text-1);
	letter-spacing: -0.01em;
}

.e-71bcd7e2 > .box > .main > .brand-col > .newsletter > .newsletter-text > .newsletter-description
{
	margin: 0;
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
	line-height: 1.5;
}

.e-71bcd7e2 > .box > .main > .brand-col > .newsletter > .newsletter-form
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	flex-wrap: wrap;
}

.e-71bcd7e2 > .box > .main > .brand-col > .newsletter > .newsletter-form > e-form-input
{
	flex: 1 1 200px;
	min-width: 0;
}

/* ===== GROUPS ===== */

.e-71bcd7e2 > .box > .main > .groups
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--ot-spacing-l);
	align-content: start;
}

.e-71bcd7e2 > .box > .main > .groups > .group
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-s);
	min-width: 0;
}

.e-71bcd7e2 > .box > .main > .groups > .group > .group-title
{
	margin: 0 0 4px;
	font-family: var(--ot-font-primary);
	font-size: 11px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.e-71bcd7e2 > .box > .main > .groups > .group > .group-list
{
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.e-71bcd7e2 > .box > .main > .groups > .group > .group-list .group-link
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 0;
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	font-weight: 500;
	color: var(--ot-text-2);
	text-decoration: none;
	transition: color var(--ot-transition);
}

.e-71bcd7e2 > .box > .main > .groups > .group > .group-list .group-link:hover
{
	color: var(--ot-text-1);
}

.e-71bcd7e2 > .box > .main > .groups > .group > .group-list .group-link > i
{
	font-size: 16px;
	color: var(--ot-text-3);
}

.e-71bcd7e2 > .box > .main > .groups > .group > .group-list .group-link > .group-badge
{
	display: inline-flex;
	align-items: center;
	padding: 1px 6px;
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
	border-radius: 100px;
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ===== BOTTOM BAR ===== */

.e-71bcd7e2 > .box > .bottom
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-m);
	flex-wrap: wrap;
	margin-top: var(--ot-spacing-l);
	padding-top: var(--ot-spacing-m);
	border-top: 1px solid var(--ot-bg-2-border);
}

.e-71bcd7e2 > .box > .bottom > .copyright
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
}

.e-71bcd7e2 > .box > .bottom > .legal
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	flex-wrap: wrap;
}

.e-71bcd7e2 > .box > .bottom > .legal > .legal-link
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	font-weight: 500;
	color: var(--ot-text-3);
	text-decoration: none;
	transition: color var(--ot-transition);
}

.e-71bcd7e2 > .box > .bottom > .legal > .legal-link:hover
{
	color: var(--ot-text-1);
}

.e-71bcd7e2 > .box > .bottom > .legal > .legal-link:not(:last-child)::after
{
	content: '·';
	margin-left: var(--ot-spacing-s);
	color: var(--ot-text-3);
	opacity: 0.5;
}

.e-71bcd7e2 > .box > .bottom > .social
{
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}

.e-71bcd7e2 > .box > .bottom > .social > .social-link
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--ot-radius-s);
	background: transparent;
	color: var(--ot-text-2);
	text-decoration: none;
	transition: background var(--ot-transition), color var(--ot-transition), transform var(--ot-transition);
}

.e-71bcd7e2 > .box > .bottom > .social > .social-link:hover
{
	background: var(--ot-bg-2);
	color: var(--ot-brand);
	transform: translateY(-1px);
}

.e-71bcd7e2 > .box > .bottom > .social > .social-link > i
{
	font-size: 18px;
}

/* ===== BOTTOM SLOT ===== */

.e-71bcd7e2 > .box > .bottom-slot
{
	margin-top: var(--ot-spacing-m);
	padding-top: var(--ot-spacing-m);
	border-top: 1px solid var(--ot-bg-2-border);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 900px)
{
	.e-71bcd7e2 > .box > .main
	{
		grid-template-columns: 1fr;
	}

	.e-71bcd7e2 > .box > .main > .groups
	{
		grid-template-columns: repeat(2, 1fr);
	}

	.e-71bcd7e2 > .box > .bottom
	{
		flex-direction: column;
		align-items: flex-start;
	}

	.e-71bcd7e2 > .box > .bottom > .social
	{
		margin-left: 0;
	}
}

@media (max-width: 560px)
{
	.e-71bcd7e2 > .box > .main > .groups
	{
		grid-template-columns: 1fr;
	}
}
/* ===== NAVIGATION NAVBAR ===== */

/* Root */

.e-64d8716d
{
	display: block;
	width: 100%;
}

/* Box */

.e-64d8716d > .box
{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--ot-bg-1);
	border-bottom: 1px solid transparent;
	transition: transform var(--ot-transition-slow), background var(--ot-transition-slow), border-color var(--ot-transition-slow), box-shadow var(--ot-transition-slow);
	z-index: 100;
}

/* Sticky */

.e-64d8716d > .box.sticky
{
	position: sticky;
	top: 0;
}

/* Blur */

.e-64d8716d > .box.blur
{
	background: var(--ot-bg-1-opacity);
	backdrop-filter: var(--ot-blur);
	-webkit-backdrop-filter: var(--ot-blur);
}

/* Scroll hide */

.e-64d8716d > .box.hidden
{
	transform: translateY(-100%);
}

/* Shrunk */

.e-64d8716d > .box.shrunk
{
	box-shadow: var(--ot-shadow-s);
}

/* ===== BANNER ===== */

.e-64d8716d > .box > .banner
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: var(--ot-spacing-s) var(--ot-spacing-l);
	background: var(--ot-brand-opacity);
	border-bottom: 1px solid var(--ot-bg-2-border);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	color: var(--ot-text-1);
}

/* ===== BAR ===== */

.e-64d8716d > .box > .bar
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-m);
	width: 100%;
	height: 64px;
	padding: 0 var(--ot-spacing-l);
	transition: height var(--ot-transition-slow);
}

.e-64d8716d > .box.shrunk > .bar
{
	height: 56px;
}

/* ===== VARIANTS ===== */

/* Border */

.e-64d8716d > .box.border
{
	border-bottom-color: var(--ot-bg-2-border);
}

/* Clean */

.e-64d8716d > .box.clean
{
	background: transparent !important;
	border-bottom-color: transparent !important;
}

/* Background */

.e-64d8716d > .box.bg-1 { background: var(--ot-bg-1); }
.e-64d8716d > .box.bg-2 { background: var(--ot-bg-2); }
.e-64d8716d > .box.bg-3 { background: var(--ot-bg-3); }
.e-64d8716d > .box.bg-4 { background: var(--ot-bg-4); }

/* ===== SECTIONS ===== */

.e-64d8716d > .box > .bar > .section
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	min-width: 0;
}

.e-64d8716d > .box > .bar > .section.left
{
	flex: 1 1 auto;
}

.e-64d8716d > .box > .bar > .section.right
{
	flex: 0 1 auto;
	margin-left: auto;
}

/* ===== BRAND ===== */

.e-64d8716d > .box > .bar > .section > .brand
{
	display: inline-flex;
	align-items: center;
	padding: 6px var(--ot-spacing-s);
	margin-left: calc(var(--ot-spacing-s) * -1);
	border-radius: var(--ot-radius-s);
	text-decoration: none;
	color: inherit;
	transition: background var(--ot-transition);
}

.e-64d8716d > .box > .bar > .section > .brand:hover
{
	background: var(--ot-bg-2);
}

.e-64d8716d > .box > .bar > .section > .brand > .brand-logo
{
	display: block;
	height: 24px;
	width: auto;
}

/* ===== CRUMBS ===== */

.e-64d8716d > .box > .bar > .section > .crumbs
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-x);
	min-width: 0;
	overflow: hidden;
}

.e-64d8716d > .box > .bar > .section > .crumbs > .crumb
{
	display: inline-flex;
	align-items: center;
	gap: var(--ot-spacing-x);
	padding: var(--ot-spacing-x) var(--ot-spacing-s);
	border-radius: var(--ot-radius-s);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	font-weight: 500;
	color: var(--ot-text-2);
	text-decoration: none;
	white-space: nowrap;
	position: relative;
	transition: background var(--ot-transition), color var(--ot-transition);
}

.e-64d8716d > .box > .bar > .section > .crumbs > .crumb:not(:last-child)
{
	margin-right: 12px;
}

.e-64d8716d > .box > .bar > .section > .crumbs > .crumb:not(:last-child)::after
{
	content: '/';
	position: absolute;
	right: -10px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ot-text-3);
	font-weight: 400;
	opacity: 0.6;
}

.e-64d8716d > .box > .bar > .section > .crumbs > .crumb:hover
{
	background: var(--ot-bg-2);
	color: var(--ot-text-1);
}

.e-64d8716d > .box > .bar > .section > .crumbs > .crumb:last-child
{
	color: var(--ot-text-1);
	font-weight: 600;
}

.e-64d8716d > .box > .bar > .section > .crumbs > .crumb > i
{
	font-size: 16px;
}

/* ===== NAV ===== */

.e-64d8716d > .box > .bar > .section .nav
{
	display: flex;
	align-items: center;
	gap: 2px;
}

.e-64d8716d > .box > .bar > .section .nav .nav-item
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: var(--ot-spacing-s) 12px;
	border-radius: var(--ot-radius-s);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	font-weight: 500;
	color: var(--ot-text-2);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--ot-transition), color var(--ot-transition);
}

.e-64d8716d > .box > .bar > .section .nav .nav-item:hover:not(.disabled)
{
	background: var(--ot-bg-2);
	color: var(--ot-text-1);
}

.e-64d8716d > .box > .bar > .section .nav .nav-item.active
{
	color: var(--ot-text-1);
	background: var(--ot-bg-2);
	font-weight: 600;
}

.e-64d8716d > .box > .bar > .section .nav .nav-item.disabled
{
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

.e-64d8716d > .box > .bar > .section .nav .nav-item > i
{
	font-size: 18px;
}

.e-64d8716d > .box > .bar > .section .nav .nav-item > .nav-chevron
{
	font-size: 16px;
	opacity: 0.5;
	transition: transform var(--ot-transition);
}

.e-64d8716d > .box > .bar > .section .nav .nav-item.has-children:hover > .nav-chevron
{
	transform: rotate(180deg);
}

.e-64d8716d > .box > .bar > .section .nav .nav-item > .nav-badge
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--ot-height-x);
	height: var(--ot-height-x);
	padding: 0 5px;
	background: var(--ot-brand);
	color: #fff;
	border-radius: 100px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

/* ===== ACTIONS SLOT ===== */

.e-64d8716d > .box > .bar > .section > .actions
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
}

/* ===== BELL ===== */

.e-64d8716d > .box > .bar > .section .bell
{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--ot-radius-s);
	color: var(--ot-text-2);
	text-decoration: none;
	transition: background var(--ot-transition), color var(--ot-transition);
}

.e-64d8716d > .box > .bar > .section .bell:hover
{
	background: var(--ot-bg-2);
	color: var(--ot-text-1);
}

.e-64d8716d > .box > .bar > .section .bell > i
{
	font-size: 20px;
}

.e-64d8716d > .box > .bar > .section .bell > .bell-badge
{
	position: absolute;
	top: 4px;
	right: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	background: var(--ot-red);
	color: #fff;
	border: 2px solid var(--ot-bg-1);
	border-radius: 100px;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
}

/* ===== USER TRIGGER ===== */

.e-64d8716d > .box > .bar > .section .user-trigger
{
	display: inline-flex;
	align-items: center;
	gap: var(--ot-spacing-x);
	padding: 4px 6px 4px 4px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 100px;
	cursor: pointer;
	transition: background var(--ot-transition), border-color var(--ot-transition);
}

.e-64d8716d > .box > .bar > .section .user-trigger:hover
{
	background: var(--ot-bg-2);
	border-color: var(--ot-bg-2-border);
}

.e-64d8716d > .box > .bar > .section .user-avatar-small
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--ot-bg-3);
	color: var(--ot-text-2);
	flex-shrink: 0;
}

.e-64d8716d > .box > .bar > .section .user-avatar-small > img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.e-64d8716d > .box > .bar > .section .user-avatar-small.user-avatar-fallback > i
{
	font-size: 18px;
}

.e-64d8716d > .box > .bar > .section .user-chevron > i
{
	font-size: 18px;
	color: var(--ot-text-3);
}

/* ===== BURGER ===== */

.e-64d8716d > .box > .bar > .burger
{
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	border: none;
	border-radius: var(--ot-radius-s);
	color: var(--ot-text-1);
	cursor: pointer;
	margin-left: auto;
}

.e-64d8716d > .box > .bar > .burger:hover
{
	background: var(--ot-bg-2);
}

.e-64d8716d > .box > .bar > .burger > i
{
	font-size: 22px;
}

/* ===== MOBILE DRAWER ===== */

.e-64d8716d > .box > .drawer
{
	display: none;
	flex-direction: column;
	padding: var(--ot-spacing-m) var(--ot-spacing-l) var(--ot-spacing-l);
	border-top: 1px solid var(--ot-bg-2-border);
	max-height: calc(100vh - 64px);
	overflow-y: auto;
	animation: e-64d8716d-drawer-in 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes e-64d8716d-drawer-in
{
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

.e-64d8716d > .box > .drawer > .drawer-user
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	padding: var(--ot-spacing-m);
	background: var(--ot-bg-2);
	border-radius: var(--ot-radius-m);
	margin-bottom: var(--ot-spacing-m);
}

.e-64d8716d > .box > .drawer > .drawer-user > .drawer-user-avatar
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--ot-bg-3);
	color: var(--ot-text-2);
	flex-shrink: 0;
}

.e-64d8716d > .box > .drawer > .drawer-user > .drawer-user-avatar > img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.e-64d8716d > .box > .drawer > .drawer-user > .drawer-user-avatar.drawer-user-avatar-fallback > i
{
	font-size: 22px;
}

.e-64d8716d > .box > .drawer > .drawer-user > .drawer-user-text
{
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.e-64d8716d > .box > .drawer > .drawer-user > .drawer-user-text > .drawer-user-name
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	font-weight: 600;
	color: var(--ot-text-1);
}

.e-64d8716d > .box > .drawer > .drawer-user > .drawer-user-text > .drawer-user-email
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
}

.e-64d8716d > .box > .drawer > .drawer-nav,
.e-64d8716d > .box > .drawer > .drawer-user-menu
{
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.e-64d8716d > .box > .drawer .drawer-item
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	padding: 12px 14px;
	border-radius: var(--ot-radius-s);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	font-weight: 500;
	color: var(--ot-text-1);
	text-decoration: none;
	transition: background var(--ot-transition-fast);
}

.e-64d8716d > .box > .drawer .drawer-item:hover
{
	background: var(--ot-bg-2);
}

.e-64d8716d > .box > .drawer .drawer-item.active
{
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
}

.e-64d8716d > .box > .drawer .drawer-item > i
{
	font-size: 20px;
}

.e-64d8716d > .box > .drawer .drawer-item > .drawer-badge
{
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: var(--ot-brand);
	color: #fff;
	border-radius: 100px;
	font-size: 10px;
	font-weight: 700;
}

.e-64d8716d > .box > .drawer .drawer-group
{
	margin: var(--ot-spacing-s) 0;
}

.e-64d8716d > .box > .drawer .drawer-group > .drawer-group-head
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	padding: 10px 14px;
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.e-64d8716d > .box > .drawer .drawer-group > .drawer-group-head > i
{
	font-size: 16px;
}

.e-64d8716d > .box > .drawer .drawer-group > .drawer-child
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	padding: 10px 14px 10px 36px;
	border-radius: var(--ot-radius-s);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	color: var(--ot-text-2);
	text-decoration: none;
	transition: background var(--ot-transition-fast), color var(--ot-transition-fast);
}

.e-64d8716d > .box > .drawer .drawer-group > .drawer-child:hover
{
	background: var(--ot-bg-2);
	color: var(--ot-text-1);
}

.e-64d8716d > .box > .drawer .drawer-separator
{
	height: 1px;
	background: var(--ot-bg-2-border);
	margin: var(--ot-spacing-s) 0;
}

/* ===== DROPDOWN ===== */

.navbar-dropdown
{
	display: flex;
	flex-direction: column;
	padding: 6px;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
	box-shadow: var(--ot-shadow-m);
	min-width: 240px;
	max-width: 320px;
}

.navbar-dropdown > .dropdown-item
{
	display: flex;
	align-items: flex-start;
	gap: var(--ot-spacing-s);
	padding: 10px 12px;
	border-radius: var(--ot-radius-s);
	text-decoration: none;
	color: var(--ot-text-1);
	transition: background var(--ot-transition-fast);
}

.navbar-dropdown > .dropdown-item:hover
{
	background: var(--ot-bg-2);
}

.navbar-dropdown > .dropdown-item > .dropdown-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--ot-radius-s);
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
	flex-shrink: 0;
}

.navbar-dropdown > .dropdown-item > .dropdown-icon > i
{
	font-size: 18px;
}

.navbar-dropdown > .dropdown-item > .dropdown-text
{
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.navbar-dropdown > .dropdown-item > .dropdown-text > .dropdown-label
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	font-weight: 600;
	color: var(--ot-text-1);
	line-height: 1.3;
}

.navbar-dropdown > .dropdown-item > .dropdown-text > .dropdown-description
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
	line-height: 1.4;
}

/* ===== USER MENU POPUP ===== */

.navbar-user-menu
{
	display: flex;
	flex-direction: column;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
	box-shadow: var(--ot-shadow-m);
	min-width: 260px;
	overflow: hidden;
}

.navbar-user-menu > .user-head
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	padding: var(--ot-spacing-m);
	border-bottom: 1px solid var(--ot-bg-2-border);
}

.navbar-user-menu > .user-head > .user-avatar
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--ot-bg-2);
	color: var(--ot-text-2);
	flex-shrink: 0;
}

.navbar-user-menu > .user-head > .user-avatar > img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.navbar-user-menu > .user-head > .user-avatar.user-avatar-fallback > i
{
	font-size: 20px;
}

.navbar-user-menu > .user-head > .user-text
{
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.navbar-user-menu > .user-head > .user-text > .user-name
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-m);
	font-weight: 600;
	color: var(--ot-text-1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.navbar-user-menu > .user-head > .user-text > .user-email
{
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.navbar-user-menu > .user-menu-list
{
	display: flex;
	flex-direction: column;
	padding: 6px;
}

.navbar-user-menu .user-menu-item
{
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	padding: var(--ot-spacing-s) 12px;
	border-radius: var(--ot-radius-s);
	font-family: var(--ot-font-primary);
	font-size: var(--ot-size-s);
	font-weight: 500;
	color: var(--ot-text-1);
	text-decoration: none;
	transition: background var(--ot-transition-fast);
}

.navbar-user-menu .user-menu-item:hover
{
	background: var(--ot-bg-2);
}

.navbar-user-menu .user-menu-item > i
{
	font-size: 18px;
	color: var(--ot-text-3);
}

.navbar-user-menu .user-menu-separator
{
	height: 1px;
	background: var(--ot-bg-2-border);
	margin: var(--ot-spacing-x) 0;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 900px)
{
	.e-64d8716d > .box > .bar > .section .nav,
	.e-64d8716d > .box > .bar > .section .bell,
	.e-64d8716d > .box > .bar > .section .user-trigger
	{
		display: none;
	}

	.e-64d8716d > .box > .bar > .burger
	{
		display: inline-flex;
	}

	.e-64d8716d > .box.open > .drawer
	{
		display: flex;
	}

	.e-64d8716d > .box > .bar > .section.right
	{
		margin-left: 0;
	}
}
/* ===== NAVIGATION SIDEBAR ===== */

/* Root */

.e-210c16c7
{
	display: flex;
	flex-shrink: 0;
	height: 100%;
}

/* Box */

.e-210c16c7 > .box
{
	display: flex;
	flex-direction: column;
	width: 260px;
	height: 100%;
	overflow-y: auto;
}

/* ===== HEAD ===== */

.e-210c16c7 > .box > .head
{
	display: flex;
	flex-direction: column;
	gap: var(--ot-spacing-x);
	flex-shrink: 0;
	padding: var(--ot-spacing-m);
	border-bottom: 1px solid var(--ot-bg-2-border);
}

.e-210c16c7 > .box > .head > .title
{
	font-family: var(--ot-font-secondary);
	font-size: var(--ot-size-l);
	font-weight: 500;
	letter-spacing: -0.018em;
	color: var(--ot-text-1);
	font-variation-settings: 'opsz' 144;
	line-height: 1.1;
}

.e-210c16c7 > .box > .head > .subtitle
{
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
	font-family: var(--ot-font-primary);
	line-height: 1.4;
}

.e-210c16c7 > .box > .head > .version
{
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	padding: 3px 9px;
	margin-top: var(--ot-spacing-x);
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
	border-radius: 100px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	font-family: var(--ot-font-primary);
}

/* ===== STACK ===== */

.e-210c16c7 > .box > .stack
{
	display: flex;
	flex-direction: column;
	padding: var(--ot-spacing-s);
	gap: var(--ot-spacing-x);
}

.e-210c16c7 > .box > .stack.bottom
{
	margin-top: auto;
	border-top: 1px solid var(--ot-bg-2-border);
}

/* ===== GROUP ===== */

.e-210c16c7 .group
{
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.e-210c16c7 .group + .group
{
	margin-top: var(--ot-spacing-s);
}

.e-210c16c7 .group-title
{
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ot-text-3);
	padding: var(--ot-spacing-s) var(--ot-spacing-s) var(--ot-spacing-x);
	font-family: var(--ot-font-primary);
}

/* ===== ITEM ===== */

.e-210c16c7 .item
{
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-s);
	height: var(--ot-height-m);
	padding: 0 var(--ot-spacing-s);
	border-radius: var(--ot-radius-m);
	color: var(--ot-text-2);
	font-size: var(--ot-size-m);
	font-weight: 500;
	text-decoration: none;
	transition: background var(--ot-transition), color var(--ot-transition);
}

.e-210c16c7 .item > i
{
	color: var(--ot-text-3);
	font-size: 18px;
	flex-shrink: 0;
	transition: color var(--ot-transition);
}

.e-210c16c7 .item > .label
{
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.e-210c16c7 .item > .chevron
{
	opacity: 0;
	font-size: 16px;
	transform: translateX(-4px);
	transition: opacity var(--ot-transition), transform var(--ot-transition);
	margin-left: auto;
}

.e-210c16c7 .item:hover
{
	background: var(--ot-bg-1);
	color: var(--ot-text-1);
}

.e-210c16c7 .item:hover > i
{
	color: var(--ot-text-1);
}

.e-210c16c7 .item:hover > .chevron
{
	opacity: 1;
	transform: translateX(0);
}

/* Active */

.e-210c16c7 .item.active
{
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
}

.e-210c16c7 .item.active > i
{
	color: var(--ot-brand);
	font-variation-settings: 'FILL' 0, 'wght' 500;
}

.e-210c16c7 .item.active > .chevron
{
	opacity: 1;
	transform: translateX(0);
	color: var(--ot-brand);
}

.e-210c16c7 .item.active::before
{
	content: '';
	position: absolute;
	left: calc(var(--ot-spacing-s) * -1);
	top: 50%;
	width: 3px;
	height: 50%;
	border-radius: 0 3px 3px 0;
	background: var(--ot-brand);
	transform: translateY(-50%);
}

/* ===== BADGE ===== */

.e-210c16c7 .item > .badge
{
	min-width: 20px;
	height: 20px;
	padding: 0 7px;
	background: var(--ot-brand);
	color: white;
	border-radius: 100px;
	font-size: 10px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ot-font-primary);
	line-height: 1;
	margin-left: auto;
}

/* Count */

.e-210c16c7 .item > .count
{
	min-width: 20px;
	height: 20px;
	padding: 0 7px;
	background: var(--ot-bg-3);
	color: var(--ot-text-2);
	border-radius: 100px;
	font-size: 10.5px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ot-font-primary);
	line-height: 1;
	margin-left: auto;
}

.e-210c16c7 .item.active > .count
{
	background: var(--ot-brand);
	color: white;
}

/* Soon badge */

.e-210c16c7 .item > .soon-badge
{
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 3px 7px;
	background: var(--ot-bg-3);
	color: var(--ot-text-3);
	border-radius: 100px;
	font-family: var(--ot-font-primary);
	margin-left: auto;
}

/* Soon / Disabled */

.e-210c16c7 .item.soon,
.e-210c16c7 .item.disabled
{
	cursor: not-allowed;
	opacity: 0.55;
}

.e-210c16c7 .item.soon:hover,
.e-210c16c7 .item.disabled:hover
{
	background: transparent;
	color: var(--ot-text-2);
}

.e-210c16c7 .item.soon:hover > i,
.e-210c16c7 .item.disabled:hover > i
{
	color: var(--ot-text-3);
}

/* ===== FOOT ===== */

.e-210c16c7 > .box > .foot
{
	flex-shrink: 0;
	padding: var(--ot-spacing-m);
	border-top: 1px solid var(--ot-bg-2-border);
}

/* ===== BACKGROUND ===== */

.e-210c16c7 > .box.bg-1 { background: var(--ot-bg-1); }
.e-210c16c7 > .box.bg-1 > .head,
.e-210c16c7 > .box.bg-1 > .stack.bottom,
.e-210c16c7 > .box.bg-1 > .foot { border-color: var(--ot-bg-1-border); }
.e-210c16c7 > .box.bg-1 .item:hover { background: var(--ot-bg-1-hover); }
.e-210c16c7 > .box.bg-1 .item > .count { background: var(--ot-bg-2); }

.e-210c16c7 > .box.bg-2 { background: var(--ot-bg-2); }
.e-210c16c7 > .box.bg-2 > .head,
.e-210c16c7 > .box.bg-2 > .stack.bottom,
.e-210c16c7 > .box.bg-2 > .foot { border-color: var(--ot-bg-2-border); }
.e-210c16c7 > .box.bg-2 .item:hover { background: var(--ot-bg-2-hover); }
.e-210c16c7 > .box.bg-2 .item > .count { background: var(--ot-bg-3); }

.e-210c16c7 > .box.bg-3 { background: var(--ot-bg-3); }
.e-210c16c7 > .box.bg-3 > .head,
.e-210c16c7 > .box.bg-3 > .stack.bottom,
.e-210c16c7 > .box.bg-3 > .foot { border-color: var(--ot-bg-3-border); }
.e-210c16c7 > .box.bg-3 .item:hover { background: var(--ot-bg-3-hover); }
.e-210c16c7 > .box.bg-3 .item > .count { background: var(--ot-bg-4); }

.e-210c16c7 > .box.bg-4 { background: var(--ot-bg-4); }
.e-210c16c7 > .box.bg-4 > .head,
.e-210c16c7 > .box.bg-4 > .stack.bottom,
.e-210c16c7 > .box.bg-4 > .foot { border-color: var(--ot-bg-4-border); }
.e-210c16c7 > .box.bg-4 .item:hover { background: var(--ot-bg-4-hover); }
.e-210c16c7 > .box.bg-4 .item > .count { background: var(--ot-bg-3); }

/* ===== BORDER ===== */

.e-210c16c7 > .box.border { border: 1px solid var(--ot-bg-2-border); }
.e-210c16c7 > .box.border-top { border-top: 1px solid var(--ot-bg-2-border); }
.e-210c16c7 > .box.border-right { border-right: 1px solid var(--ot-bg-2-border); }
.e-210c16c7 > .box.border-bottom { border-bottom: 1px solid var(--ot-bg-2-border); }
.e-210c16c7 > .box.border-left { border-left: 1px solid var(--ot-bg-2-border); }

.e-210c16c7 > .box.bg-1.border,
.e-210c16c7 > .box.bg-1.border-top,
.e-210c16c7 > .box.bg-1.border-right,
.e-210c16c7 > .box.bg-1.border-bottom,
.e-210c16c7 > .box.bg-1.border-left { border-color: var(--ot-bg-1-border); }

.e-210c16c7 > .box.bg-2.border,
.e-210c16c7 > .box.bg-2.border-top,
.e-210c16c7 > .box.bg-2.border-right,
.e-210c16c7 > .box.bg-2.border-bottom,
.e-210c16c7 > .box.bg-2.border-left { border-color: var(--ot-bg-2-border); }

.e-210c16c7 > .box.bg-3.border,
.e-210c16c7 > .box.bg-3.border-top,
.e-210c16c7 > .box.bg-3.border-right,
.e-210c16c7 > .box.bg-3.border-bottom,
.e-210c16c7 > .box.bg-3.border-left { border-color: var(--ot-bg-3-border); }

.e-210c16c7 > .box.bg-4.border,
.e-210c16c7 > .box.bg-4.border-top,
.e-210c16c7 > .box.bg-4.border-right,
.e-210c16c7 > .box.bg-4.border-bottom,
.e-210c16c7 > .box.bg-4.border-left { border-color: var(--ot-bg-4-border); }
/* ===== NAVIGATION STEPS ===== */

.e-36dc8444
{
	display: contents;
}

/* Box */

.e-36dc8444 > .box
{
	display: flex;
	width: 100%;
	border-radius: var(--ot-radius-l);
	overflow: hidden;
}

.e-36dc8444 > .box.vertical
{
	flex-direction: column;
}

.e-36dc8444 > .box.horizontal
{
	flex-direction: row;
	align-items: stretch;
}

/* Step */

.e-36dc8444 .step
{
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--ot-spacing-m);
	padding: var(--ot-spacing-m);
	background: transparent;
	border: none;
	text-align: left;
	font-family: var(--ot-font-primary);
	cursor: pointer;
	transition: background var(--ot-transition);
}

.e-36dc8444 > .box.vertical > .step
{
	width: 100%;
}

.e-36dc8444 > .box.horizontal > .step
{
	flex: 1;
	flex-direction: column;
	text-align: center;
	align-items: center;
}

.e-36dc8444 .step:hover:not(.disabled)
{
	background: var(--ot-bg-2-opacity);
}

/* Marker */

.e-36dc8444 .step > .marker
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	color: var(--ot-text-2);
	font-weight: 600;
	z-index: 1;
	transition: background var(--ot-transition), border-color var(--ot-transition), color var(--ot-transition), transform var(--ot-transition);
}

.e-36dc8444 .step > .marker > i
{
	font-variation-settings: 'wght' 500;
}

/* Text */

.e-36dc8444 .step > .text
{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.e-36dc8444 .step > .text > .label
{
	font-weight: 600;
	color: var(--ot-text-2);
	line-height: 1.3;
	transition: color var(--ot-transition);
}

.e-36dc8444 .step > .text > .description
{
	color: var(--ot-text-3);
	line-height: 1.4;
	font-weight: 400;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

/* ===== STATES ===== */

/* Done */

.e-36dc8444 .step.done > .marker
{
	background: var(--ot-brand);
	border-color: var(--ot-brand);
	color: #fff;
}

.e-36dc8444 .step.done > .text > .label
{
	color: var(--ot-text-1);
}

/* Active */

.e-36dc8444 .step.active > .marker
{
	background: var(--ot-brand);
	border-color: var(--ot-brand);
	color: #fff;
	transform: scale(1.05);
	box-shadow: 0 0 0 4px var(--ot-brand-opacity);
}

.e-36dc8444 .step.active > .text > .label
{
	color: var(--ot-brand);
}

.e-36dc8444 .step.active > .text > .description
{
	color: var(--ot-text-2);
}

/* Disabled */

.e-36dc8444 .step.disabled
{
	cursor: not-allowed;
	opacity: 0.45;
}

.e-36dc8444 .step.disabled:hover
{
	background: transparent;
}

/* ===== CONNECTED ===== */

.e-36dc8444 > .box.vertical.connected > .step + .step::before
{
	content: '';
	position: absolute;
	width: 2px;
	background: var(--ot-bg-2-border);
	transition: background var(--ot-transition);
	z-index: 0;
}

.e-36dc8444 > .box.vertical.connected > .step.done + .step::before
{
	background: var(--ot-brand);
}

.e-36dc8444 > .box.horizontal.connected > .step + .step::before
{
	content: '';
	position: absolute;
	height: 2px;
	background: var(--ot-bg-2-border);
	transition: background var(--ot-transition);
	z-index: 0;
}

.e-36dc8444 > .box.horizontal.connected > .step.done + .step::before
{
	background: var(--ot-brand);
}

/* ===== CLEAN ===== */

.e-36dc8444 > .box.clean
{
	background: transparent !important;
	border: none !important;
	border-radius: 0;
}

/* ===== BACKGROUND ===== */

.e-36dc8444 > .box.bg-1 { background: var(--ot-bg-1); }
.e-36dc8444 > .box.bg-1 .step.upcoming > .marker { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
.e-36dc8444 > .box.bg-1 .step:hover:not(.disabled) { background: var(--ot-bg-1-hover); }

.e-36dc8444 > .box.bg-2 { background: var(--ot-bg-2); }
.e-36dc8444 > .box.bg-2 .step.upcoming > .marker { background: var(--ot-bg-1); border-color: var(--ot-bg-2-border); }
.e-36dc8444 > .box.bg-2 .step:hover:not(.disabled) { background: var(--ot-bg-2-hover); }

.e-36dc8444 > .box.bg-3 { background: var(--ot-bg-3); }
.e-36dc8444 > .box.bg-3 .step.upcoming > .marker { background: var(--ot-bg-2); border-color: var(--ot-bg-3-border); }
.e-36dc8444 > .box.bg-3 .step:hover:not(.disabled) { background: var(--ot-bg-3-hover); }

.e-36dc8444 > .box.bg-4 { background: var(--ot-bg-4); }
.e-36dc8444 > .box.bg-4 .step.upcoming > .marker { background: var(--ot-bg-3); border-color: var(--ot-bg-4-border); }
.e-36dc8444 > .box.bg-4 .step:hover:not(.disabled) { background: var(--ot-bg-4-hover); }

/* ===== BORDER ===== */

.e-36dc8444 > .box.border { border: 1px solid var(--ot-bg-2-border); }
.e-36dc8444 > .box.border-top { border-top: 1px solid var(--ot-bg-2-border); }
.e-36dc8444 > .box.border-right { border-right: 1px solid var(--ot-bg-2-border); }
.e-36dc8444 > .box.border-bottom { border-bottom: 1px solid var(--ot-bg-2-border); }
.e-36dc8444 > .box.border-left { border-left: 1px solid var(--ot-bg-2-border); }

.e-36dc8444 > .box.bg-1.border,
.e-36dc8444 > .box.bg-1.border-top,
.e-36dc8444 > .box.bg-1.border-right,
.e-36dc8444 > .box.bg-1.border-bottom,
.e-36dc8444 > .box.bg-1.border-left { border-color: var(--ot-bg-1-border); }

.e-36dc8444 > .box.bg-2.border,
.e-36dc8444 > .box.bg-2.border-top,
.e-36dc8444 > .box.bg-2.border-right,
.e-36dc8444 > .box.bg-2.border-bottom,
.e-36dc8444 > .box.bg-2.border-left { border-color: var(--ot-bg-2-border); }

.e-36dc8444 > .box.bg-3.border,
.e-36dc8444 > .box.bg-3.border-top,
.e-36dc8444 > .box.bg-3.border-right,
.e-36dc8444 > .box.bg-3.border-bottom,
.e-36dc8444 > .box.bg-3.border-left { border-color: var(--ot-bg-3-border); }

.e-36dc8444 > .box.bg-4.border,
.e-36dc8444 > .box.bg-4.border-top,
.e-36dc8444 > .box.bg-4.border-right,
.e-36dc8444 > .box.bg-4.border-bottom,
.e-36dc8444 > .box.bg-4.border-left { border-color: var(--ot-bg-4-border); }

/* Connected line per background */

.e-36dc8444 > .box.bg-1.connected > .step + .step::before { background: var(--ot-bg-1-border); }
.e-36dc8444 > .box.bg-2.connected > .step + .step::before { background: var(--ot-bg-2-border); }
.e-36dc8444 > .box.bg-3.connected > .step + .step::before { background: var(--ot-bg-3-border); }
.e-36dc8444 > .box.bg-4.connected > .step + .step::before { background: var(--ot-bg-4-border); }

.e-36dc8444 > .box.bg-1.connected > .step.done + .step::before,
.e-36dc8444 > .box.bg-2.connected > .step.done + .step::before,
.e-36dc8444 > .box.bg-3.connected > .step.done + .step::before,
.e-36dc8444 > .box.bg-4.connected > .step.done + .step::before { background: var(--ot-brand); }

/* ===== SIZE — vertical ===== */

.e-36dc8444 > .box.vertical.size-s > .step { padding: var(--ot-spacing-s) var(--ot-spacing-m); gap: var(--ot-spacing-s); }
.e-36dc8444 > .box.vertical.size-s .step > .marker { width: 24px; height: 24px; font-size: 11px; }
.e-36dc8444 > .box.vertical.size-s .step > .marker > i { font-size: 15px; }
.e-36dc8444 > .box.vertical.size-s .step > .text > .label { font-size: 12px; }
.e-36dc8444 > .box.vertical.size-s .step > .text > .description { font-size: 10.5px; }
.e-36dc8444 > .box.vertical.size-s.connected > .step + .step::before
{
	left: calc(var(--ot-spacing-m) + 12px - 1px);
	top: calc(-1 * var(--ot-spacing-s));
	height: calc(var(--ot-spacing-s) * 2);
}

.e-36dc8444 > .box.vertical.size-m > .step { padding: var(--ot-spacing-m); gap: var(--ot-spacing-m); }
.e-36dc8444 > .box.vertical.size-m .step > .marker { width: 32px; height: 32px; font-size: 13px; }
.e-36dc8444 > .box.vertical.size-m .step > .marker > i { font-size: 18px; }
.e-36dc8444 > .box.vertical.size-m .step > .text > .label { font-size: 13px; }
.e-36dc8444 > .box.vertical.size-m .step > .text > .description { font-size: 11.5px; }
.e-36dc8444 > .box.vertical.size-m.connected > .step + .step::before
{
	left: calc(var(--ot-spacing-m) + 16px - 1px);
	top: calc(-1 * var(--ot-spacing-m));
	height: calc(var(--ot-spacing-m) * 2);
}

.e-36dc8444 > .box.vertical.size-l > .step { padding: var(--ot-spacing-l) var(--ot-spacing-m); gap: var(--ot-spacing-m); }
.e-36dc8444 > .box.vertical.size-l .step > .marker { width: 40px; height: 40px; font-size: 15px; }
.e-36dc8444 > .box.vertical.size-l .step > .marker > i { font-size: 20px; }
.e-36dc8444 > .box.vertical.size-l .step > .text > .label { font-size: 15px; }
.e-36dc8444 > .box.vertical.size-l .step > .text > .description { font-size: 13px; }
.e-36dc8444 > .box.vertical.size-l.connected > .step + .step::before
{
	left: calc(var(--ot-spacing-m) + 20px - 1px);
	top: calc(-1 * var(--ot-spacing-l));
	height: calc(var(--ot-spacing-l) * 2);
}

/* ===== SIZE — horizontal ===== */

.e-36dc8444 > .box.horizontal.size-s > .step { padding: var(--ot-spacing-s); gap: var(--ot-spacing-x); }
.e-36dc8444 > .box.horizontal.size-s .step > .marker { width: 24px; height: 24px; font-size: 11px; }
.e-36dc8444 > .box.horizontal.size-s .step > .marker > i { font-size: 15px; }
.e-36dc8444 > .box.horizontal.size-s .step > .text > .label { font-size: 12px; }
.e-36dc8444 > .box.horizontal.size-s .step > .text > .description { font-size: 10.5px; }
.e-36dc8444 > .box.horizontal.size-s.connected > .step + .step::before
{
	top: calc(var(--ot-spacing-s) + 12px - 1px);
	left: calc(-50% + 12px);
	width: calc(100% - 24px);
}

.e-36dc8444 > .box.horizontal.size-m > .step { padding: var(--ot-spacing-m); gap: var(--ot-spacing-s); }
.e-36dc8444 > .box.horizontal.size-m .step > .marker { width: 32px; height: 32px; font-size: 13px; }
.e-36dc8444 > .box.horizontal.size-m .step > .marker > i { font-size: 18px; }
.e-36dc8444 > .box.horizontal.size-m .step > .text > .label { font-size: 13px; }
.e-36dc8444 > .box.horizontal.size-m .step > .text > .description { font-size: 11.5px; }
.e-36dc8444 > .box.horizontal.size-m.connected > .step + .step::before
{
	top: calc(var(--ot-spacing-m) + 16px - 1px);
	left: calc(-50% + 16px);
	width: calc(100% - 32px);
}

.e-36dc8444 > .box.horizontal.size-l > .step { padding: var(--ot-spacing-l) var(--ot-spacing-m); gap: var(--ot-spacing-s); }
.e-36dc8444 > .box.horizontal.size-l .step > .marker { width: 40px; height: 40px; font-size: 15px; }
.e-36dc8444 > .box.horizontal.size-l .step > .marker > i { font-size: 20px; }
.e-36dc8444 > .box.horizontal.size-l .step > .text > .label { font-size: 15px; }
.e-36dc8444 > .box.horizontal.size-l .step > .text > .description { font-size: 13px; }
.e-36dc8444 > .box.horizontal.size-l.connected > .step + .step::before
{
	top: calc(var(--ot-spacing-l) + 20px - 1px);
	left: calc(-50% + 20px);
	width: calc(100% - 40px);
}
/* ===== NAVIGATION TABS ===== */

.e-1a8b6ac1
{
	display: contents;
}

/* Box */

.e-1a8b6ac1 > .box
{
	display: flex;
	flex-direction: column;
}

/* Tabs nav */

.e-1a8b6ac1 > .box > .tabs
{
	display: flex;
	align-items: center;
	overflow-x: auto;
	scrollbar-width: none;
	overflow: hidden;
}

.e-1a8b6ac1 > .box > .tabs::-webkit-scrollbar
{
	display: none;
}

/* Tab base */

.e-1a8b6ac1 .tab
{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ot-spacing-s);
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	font-family: var(--ot-font-primary);
	font-weight: 500;
	color: var(--ot-text-2);
	user-select: none;
	transition: background var(--ot-transition), border-color var(--ot-transition), color var(--ot-transition);
}

.e-1a8b6ac1 .tab:hover:not(.disabled)
{
	color: var(--ot-text-1);
}

.e-1a8b6ac1 .tab.active
{
	color: var(--ot-text-1);
	font-weight: 600;
}

.e-1a8b6ac1 .tab.disabled
{
	cursor: not-allowed;
	opacity: 0.45;
}

/* Count badge */

.e-1a8b6ac1 .tab > .count
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	padding: 0 6px;
	background: var(--ot-bg-2);
	border-radius: 100px;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--ot-text-3);
	line-height: 18px;
	font-family: var(--ot-font-primary);
}

.e-1a8b6ac1 .tab.active > .count
{
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
}

/* Content panels */

.e-1a8b6ac1 > .box > .body
{
	padding-top: var(--ot-spacing-l);
}

.e-1a8b6ac1 > .box > .body .panel
{
	display: none;
}

.e-1a8b6ac1 > .box > .body .panel.active
{
	display: block;
	animation: e-1a8b6ac1-fade 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes e-1a8b6ac1-fade
{
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ===== TONE: UNDERLINE ===== */

.e-1a8b6ac1 > .box.underline > .tabs
{
	gap: var(--ot-spacing-l);
}

.e-1a8b6ac1 > .box.underline > .tabs > .tab
{
	padding: 14px 0;
}

.e-1a8b6ac1 > .box.underline > .tabs > .tab.active::after
{
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--ot-brand);
	border-radius: 2px 2px 0 0;
}

/* ===== TONE: PILLS ===== */

.e-1a8b6ac1 > .box.pills > .tabs
{
	gap: var(--ot-spacing-s);
}

.e-1a8b6ac1 > .box.pills > .tabs > .tab
{
	padding: 8px 16px;
	border-radius: 100px;
	background: transparent;
	border: 1px solid transparent;
}

.e-1a8b6ac1 > .box.pills > .tabs > .tab:hover:not(.disabled)
{
	background: var(--ot-bg-2);
}

.e-1a8b6ac1 > .box.pills > .tabs > .tab.active
{
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
}

.e-1a8b6ac1 > .box.pills > .tabs > .tab.active > .count
{
	background: var(--ot-brand);
	color: white;
}

/* ===== TONE: CONTAINED ===== */

.e-1a8b6ac1 > .box.contained > .tabs
{
	padding: var(--ot-spacing-x);
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
	gap: 2px;
}

.e-1a8b6ac1 > .box.contained > .tabs > .tab
{
	padding: 8px 14px;
	border-radius: calc(var(--ot-radius-m) - 2px);
}

.e-1a8b6ac1 > .box.contained > .tabs > .tab:hover:not(.disabled)
{
	background: var(--ot-bg-2-hover);
}

.e-1a8b6ac1 > .box.contained > .tabs > .tab.active
{
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
}

.e-1a8b6ac1 > .box.contained > .tabs > .tab.active > .count
{
	background: var(--ot-brand);
	color: white;
}

/* ===== TONE: SEGMENTED ===== */

.e-1a8b6ac1 > .box.segmented > .tabs
{
	padding: 3px;
	background: var(--ot-bg-3);
	border-radius: 100px;
	gap: 0;
	display: inline-flex;
	align-self: flex-start;
}

.e-1a8b6ac1 > .box.segmented > .tabs > .tab
{
	padding: 8px 18px;
	border-radius: 100px;
	flex: 1;
}

.e-1a8b6ac1 > .box.segmented > .tabs > .tab:hover:not(.disabled)
{
	color: var(--ot-text-1);
}

.e-1a8b6ac1 > .box.segmented > .tabs > .tab.active
{
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
}

.e-1a8b6ac1 > .box.segmented > .tabs > .tab.active > .count
{
	background: var(--ot-brand);
	color: white;
}

/* ===== BACKGROUND ===== */

/* underline / pills — bg on box */

.e-1a8b6ac1 > .box.bg-1.underline,
.e-1a8b6ac1 > .box.bg-1.pills { background: var(--ot-bg-1); padding: 0 var(--ot-spacing-m); }

.e-1a8b6ac1 > .box.bg-2.underline,
.e-1a8b6ac1 > .box.bg-2.pills { background: var(--ot-bg-2); padding: 0 var(--ot-spacing-m); }

.e-1a8b6ac1 > .box.bg-3.underline,
.e-1a8b6ac1 > .box.bg-3.pills { background: var(--ot-bg-3); padding: 0 var(--ot-spacing-m); }

.e-1a8b6ac1 > .box.bg-4.underline,
.e-1a8b6ac1 > .box.bg-4.pills { background: var(--ot-bg-4); padding: 0 var(--ot-spacing-m); }

/* contained — bg on track */

.e-1a8b6ac1 > .box.bg-1.contained > .tabs { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); }
.e-1a8b6ac1 > .box.bg-2.contained > .tabs { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
.e-1a8b6ac1 > .box.bg-3.contained > .tabs { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }
.e-1a8b6ac1 > .box.bg-4.contained > .tabs { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }

/* segmented — bg on track */

.e-1a8b6ac1 > .box.bg-1.segmented > .tabs { background: var(--ot-bg-1); }
.e-1a8b6ac1 > .box.bg-2.segmented > .tabs { background: var(--ot-bg-2); }
.e-1a8b6ac1 > .box.bg-3.segmented > .tabs { background: var(--ot-bg-3); }
.e-1a8b6ac1 > .box.bg-4.segmented > .tabs { background: var(--ot-bg-4); }

/* pills hover per bg */

.e-1a8b6ac1 > .box.bg-1.pills > .tabs > .tab:hover:not(.disabled) { background: var(--ot-bg-1-hover); }
.e-1a8b6ac1 > .box.bg-2.pills > .tabs > .tab:hover:not(.disabled) { background: var(--ot-bg-2-hover); }
.e-1a8b6ac1 > .box.bg-3.pills > .tabs > .tab:hover:not(.disabled) { background: var(--ot-bg-3-hover); }
.e-1a8b6ac1 > .box.bg-4.pills > .tabs > .tab:hover:not(.disabled) { background: var(--ot-bg-4-hover); }

/* contained hover per bg */

.e-1a8b6ac1 > .box.bg-1.contained > .tabs > .tab:hover:not(.disabled) { background: var(--ot-bg-1-hover); }
.e-1a8b6ac1 > .box.bg-2.contained > .tabs > .tab:hover:not(.disabled) { background: var(--ot-bg-2-hover); }
.e-1a8b6ac1 > .box.bg-3.contained > .tabs > .tab:hover:not(.disabled) { background: var(--ot-bg-3-hover); }
.e-1a8b6ac1 > .box.bg-4.contained > .tabs > .tab:hover:not(.disabled) { background: var(--ot-bg-4-hover); }

/* count badge per bg */

.e-1a8b6ac1 > .box.bg-1 .tab > .count { background: var(--ot-bg-2); }
.e-1a8b6ac1 > .box.bg-2 .tab > .count { background: var(--ot-bg-3); }
.e-1a8b6ac1 > .box.bg-3 .tab > .count { background: var(--ot-bg-4); }
.e-1a8b6ac1 > .box.bg-4 .tab > .count { background: var(--ot-bg-3); }

/* ===== BORDER ===== */

.e-1a8b6ac1 > .box.border.underline,
.e-1a8b6ac1 > .box.border.pills { border-bottom: 1px solid var(--ot-bg-2-border); }

.e-1a8b6ac1 > .box.bg-1.border.underline,
.e-1a8b6ac1 > .box.bg-1.border.pills { border-bottom-color: var(--ot-bg-1-border); }

.e-1a8b6ac1 > .box.bg-2.border.underline,
.e-1a8b6ac1 > .box.bg-2.border.pills { border-bottom-color: var(--ot-bg-2-border); }

.e-1a8b6ac1 > .box.bg-3.border.underline,
.e-1a8b6ac1 > .box.bg-3.border.pills { border-bottom-color: var(--ot-bg-3-border); }

.e-1a8b6ac1 > .box.bg-4.border.underline,
.e-1a8b6ac1 > .box.bg-4.border.pills { border-bottom-color: var(--ot-bg-4-border); }

/* ===== STRETCH ===== */

.e-1a8b6ac1 > .box.stretch > .tabs
{
	width: 100%;
}

.e-1a8b6ac1 > .box.stretch.segmented > .tabs
{
	align-self: stretch;
}

.e-1a8b6ac1 > .box.stretch > .tabs > .tab
{
	flex: 1;
}

/* ===== SIZE: S ===== */

.e-1a8b6ac1 > .box.size-s .tab
{
	font-size: 12px;
}

.e-1a8b6ac1 > .box.size-s .tab > i
{
	font-size: 14px;
}

.e-1a8b6ac1 > .box.size-s .tab > .count
{
	min-width: 16px;
	font-size: 10px;
	line-height: 16px;
	padding: 0 5px;
}

.e-1a8b6ac1 > .box.size-s.underline > .tabs > .tab { padding: 10px 0; }
.e-1a8b6ac1 > .box.size-s.underline > .tabs { gap: var(--ot-spacing-m); }
.e-1a8b6ac1 > .box.size-s.pills > .tabs > .tab { padding: 6px 12px; }
.e-1a8b6ac1 > .box.size-s.contained > .tabs > .tab { padding: 6px 10px; }
.e-1a8b6ac1 > .box.size-s.segmented > .tabs > .tab { padding: 6px 14px; }

/* ===== SIZE: M ===== */

.e-1a8b6ac1 > .box.size-m .tab
{
	font-size: 13px;
}

.e-1a8b6ac1 > .box.size-m .tab > i
{
	font-size: 16px;
}

/* ===== SIZE: L ===== */

.e-1a8b6ac1 > .box.size-l .tab
{
	font-size: 14px;
}

.e-1a8b6ac1 > .box.size-l .tab > i
{
	font-size: 18px;
}

.e-1a8b6ac1 > .box.size-l .tab > .count
{
	min-width: 22px;
	font-size: 11.5px;
	line-height: 22px;
	padding: 0 8px;
}

.e-1a8b6ac1 > .box.size-l.underline > .tabs > .tab { padding: 18px 0; }
.e-1a8b6ac1 > .box.size-l.pills > .tabs > .tab { padding: 12px 22px; }
.e-1a8b6ac1 > .box.size-l.contained > .tabs > .tab { padding: 12px 18px; }
.e-1a8b6ac1 > .box.size-l.segmented > .tabs > .tab { padding: 12px 24px; }
/* ===== STATUS CODE ===== */

.e-471f3f12
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 320px;
	padding: var(--ot-spacing-l);
}

/* Box */

.e-471f3f12 > .box
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ot-spacing-m);
	text-align: center;
	max-width: 480px;
}

/* Code number */

.e-471f3f12 > .box > .code
{
	font-family: var(--ot-font-secondary);
	font-size: 140px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--ot-brand);
	background: linear-gradient(180deg, var(--ot-brand) 0%, var(--ot-brand-hover) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-variation-settings: 'opsz' 144;
	user-select: none;
	margin-bottom: var(--ot-spacing-s);
}

/* Title */

.e-471f3f12 > .box > .title
{
	margin: 0;
	font-family: var(--ot-font-secondary);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--ot-text-1);
	line-height: 1.15;
	font-variation-settings: 'opsz' 144;
}

/* Description */

.e-471f3f12 > .box > .description
{
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ot-text-2);
	font-family: var(--ot-font-primary);
}

/* ===== COLOR ===== */

.e-471f3f12 > .box.brand > .code  { background: linear-gradient(180deg, var(--ot-brand) 0%, var(--ot-brand-hover) 100%);   -webkit-background-clip: text; background-clip: text; }
.e-471f3f12 > .box.blue > .code   { background: linear-gradient(180deg, var(--ot-blue) 0%, var(--ot-blue-hover) 100%);     -webkit-background-clip: text; background-clip: text; }
.e-471f3f12 > .box.red > .code    { background: linear-gradient(180deg, var(--ot-red) 0%, var(--ot-red-hover) 100%);       -webkit-background-clip: text; background-clip: text; }
.e-471f3f12 > .box.orange > .code { background: linear-gradient(180deg, var(--ot-orange) 0%, var(--ot-orange-hover) 100%); -webkit-background-clip: text; background-clip: text; }
.e-471f3f12 > .box.green > .code  { background: linear-gradient(180deg, var(--ot-green) 0%, var(--ot-green-hover) 100%);   -webkit-background-clip: text; background-clip: text; }

/* ===== SIZE ===== */

.e-471f3f12 > .box.size-s
{
	min-height: 240px;
	padding: var(--ot-spacing-m);
}

.e-471f3f12 > .box.size-s > .code        { font-size: 96px; }
.e-471f3f12 > .box.size-s > .title       { font-size: 20px; }
.e-471f3f12 > .box.size-s > .description { font-size: var(--ot-size-m); }

.e-471f3f12 > .box.size-m > .code  { font-size: 140px; }
.e-471f3f12 > .box.size-m > .title { font-size: 26px; }

.e-471f3f12 > .box.size-l
{
	min-height: 480px;
}

.e-471f3f12 > .box.size-l > .code        { font-size: 200px; letter-spacing: -0.05em; }
.e-471f3f12 > .box.size-l > .title       { font-size: 36px; }
.e-471f3f12 > .box.size-l > .description { font-size: 16px; max-width: 560px; }
/* ===== STATUS EMPTY ===== */

.e-631be738
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 320px;
	padding: var(--ot-spacing-l);
}

/* Box */

.e-631be738 > .box
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ot-spacing-m);
	text-align: center;
	max-width: 420px;
}

/* Circle */

.e-631be738 > .box > .circle
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	margin-bottom: var(--ot-spacing-s);
}

.e-631be738 > .box > .circle::before
{
	content: '';
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	opacity: 0.6;
}

.e-631be738 > .box > .circle > i
{
	font-size: 32px;
	font-variation-settings: 'wght' 400;
}

/* Title */

.e-631be738 > .box > .title
{
	margin: 0;
	font-family: var(--ot-font-secondary);
	font-weight: 500;
	font-size: 22px;
	letter-spacing: -0.01em;
	color: var(--ot-text-1);
	line-height: 1.2;
	font-variation-settings: 'opsz' 144;
}

/* Description */

.e-631be738 > .box > .description
{
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ot-text-2);
	font-family: var(--ot-font-primary);
}

/* ===== COLOR ===== */

.e-631be738 > .box.brand > .circle { background: var(--ot-brand-opacity); color: var(--ot-brand); }
.e-631be738 > .box.brand > .circle::before { border: 1px dashed var(--ot-brand-opacity); }

.e-631be738 > .box.blue > .circle { background: var(--ot-blue-opacity); color: var(--ot-blue); }
.e-631be738 > .box.blue > .circle::before { border: 1px dashed var(--ot-blue-opacity); }

.e-631be738 > .box.red > .circle { background: var(--ot-red-opacity); color: var(--ot-red); }
.e-631be738 > .box.red > .circle::before { border: 1px dashed var(--ot-red-opacity); }

.e-631be738 > .box.orange > .circle { background: var(--ot-orange-opacity); color: var(--ot-orange); }
.e-631be738 > .box.orange > .circle::before { border: 1px dashed var(--ot-orange-opacity); }

.e-631be738 > .box.green > .circle { background: var(--ot-green-opacity); color: var(--ot-green); }
.e-631be738 > .box.green > .circle::before { border: 1px dashed var(--ot-green-opacity); }

/* ===== SIZE ===== */

.e-631be738 > .box.size-s
{
	max-width: 360px;
}

.e-631be738 > .box.size-s > .circle { width: 56px; height: 56px; }
.e-631be738 > .box.size-s > .circle > i { font-size: 26px; }
.e-631be738 > .box.size-s > .title { font-size: 18px; }
.e-631be738 > .box.size-s > .description { font-size: var(--ot-size-m); }

.e-631be738 > .box.size-l
{
	max-width: 500px;
}

.e-631be738 > .box.size-l > .circle { width: 96px; height: 96px; }
.e-631be738 > .box.size-l > .circle::before { inset: -10px; }
.e-631be738 > .box.size-l > .circle > i { font-size: 44px; }
.e-631be738 > .box.size-l > .title { font-size: 28px; }
.e-631be738 > .box.size-l > .description { font-size: 15px; }
/* ===== STATUS ERROR ===== */

.e-63199a7d
{
	display: contents;
}

/* Box */

.e-63199a7d > .box
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ot-spacing-m);
	text-align: center;
	width: 100%;
	min-height: 320px;
	padding: var(--ot-spacing-l);
}

/* Inner */

.e-63199a7d > .box > .inner
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ot-spacing-m);
	max-width: 420px;
}

/* Circle */

.e-63199a7d > .box > .inner > .circle
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--ot-red-opacity);
	color: var(--ot-red);
	margin-bottom: var(--ot-spacing-s);
}

.e-63199a7d > .box > .inner > .circle::before
{
	content: '';
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	border: 1px solid var(--ot-red-opacity);
	animation: e-63199a7d-pulse 2.4s ease-in-out infinite;
}

@keyframes e-63199a7d-pulse
{
	0%, 100% { transform: scale(1); opacity: 0.6; }
	50% { transform: scale(1.08); opacity: 0.2; }
}

.e-63199a7d > .box > .inner > .circle > i
{
	font-size: 36px;
	font-variation-settings: 'FILL' 1, 'wght' 400;
}

/* Title */

.e-63199a7d > .box > .inner > .title
{
	margin: 0;
	font-family: var(--ot-font-secondary);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--ot-text-1);
	line-height: 1.2;
	font-variation-settings: 'opsz' 144;
}

/* Description */

.e-63199a7d > .box > .inner > .description
{
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ot-text-2);
	font-family: var(--ot-font-primary);
}

/* ===== COLOR ===== */

.e-63199a7d > .box.brand > .inner > .circle { background: var(--ot-brand-opacity); color: var(--ot-brand); }
.e-63199a7d > .box.brand > .inner > .circle::before { border-color: var(--ot-brand-opacity); }

.e-63199a7d > .box.blue > .inner > .circle { background: var(--ot-blue-opacity); color: var(--ot-blue); }
.e-63199a7d > .box.blue > .inner > .circle::before { border-color: var(--ot-blue-opacity); }

.e-63199a7d > .box.red > .inner > .circle { background: var(--ot-red-opacity); color: var(--ot-red); }
.e-63199a7d > .box.red > .inner > .circle::before { border-color: var(--ot-red-opacity); }

.e-63199a7d > .box.orange > .inner > .circle { background: var(--ot-orange-opacity); color: var(--ot-orange); }
.e-63199a7d > .box.orange > .inner > .circle::before { border-color: var(--ot-orange-opacity); }

.e-63199a7d > .box.green > .inner > .circle { background: var(--ot-green-opacity); color: var(--ot-green); }
.e-63199a7d > .box.green > .inner > .circle::before { border-color: var(--ot-green-opacity); }

/* ===== SIZE ===== */

.e-63199a7d > .box.size-s
{
	min-height: 240px;
	padding: var(--ot-spacing-m);
}

.e-63199a7d > .box.size-s > .inner > .circle { width: 60px; height: 60px; }
.e-63199a7d > .box.size-s > .inner > .circle > i { font-size: 28px; }
.e-63199a7d > .box.size-s > .inner > .title { font-size: 18px; }
.e-63199a7d > .box.size-s > .inner > .description { font-size: 13px; }

.e-63199a7d > .box.size-m > .inner > .circle { width: 80px; height: 80px; }
.e-63199a7d > .box.size-m > .inner > .title { font-size: 22px; }

.e-63199a7d > .box.size-l
{
	min-height: 440px;
}

.e-63199a7d > .box.size-l > .inner > .circle { width: 104px; height: 104px; }
.e-63199a7d > .box.size-l > .inner > .circle > i { font-size: 48px; }
.e-63199a7d > .box.size-l > .inner > .title { font-size: 28px; }
.e-63199a7d > .box.size-l > .inner > .description { font-size: 15px; max-width: 500px; }
/* ===== STATUS LOADING ===== */

.e-691b81f7
{
	display: contents;
}

/* Box */

.e-691b81f7 > .box
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ot-spacing-m);
	width: 100%;
	min-height: 320px;
	padding: var(--ot-spacing-l);
}

/* Circle */

.e-691b81f7 > .box > .circle
{
	position: relative;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	border: 2px solid var(--ot-bg-3-border);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: e-691b81f7-pulse 2.4s ease-in-out infinite;
}

.e-691b81f7 > .box > .circle::before
{
	content: '';
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	border: 1px dashed var(--ot-bg-3-border);
	opacity: 0.5;
	animation: e-691b81f7-pulse 2.4s ease-in-out infinite reverse;
}

.e-691b81f7 > .box > .circle > .spin
{
	font-size: 32px;
	animation: e-691b81f7-spin 0.8s linear infinite;
}

/* Text */

.e-691b81f7 > .box > .text
{
	font-size: var(--ot-size-m);
	color: var(--ot-text-2);
	font-family: var(--ot-font-primary);
}

/* ===== COLOR ===== */

.e-691b81f7 > .box.brand > .circle { border-color: var(--ot-brand-opacity); }
.e-691b81f7 > .box.brand > .circle::before { border-color: var(--ot-brand-opacity); }
.e-691b81f7 > .box.brand > .circle > .spin { color: var(--ot-brand); }

.e-691b81f7 > .box.blue > .circle { border-color: var(--ot-blue-opacity); }
.e-691b81f7 > .box.blue > .circle::before { border-color: var(--ot-blue-opacity); }
.e-691b81f7 > .box.blue > .circle > .spin { color: var(--ot-blue); }

.e-691b81f7 > .box.red > .circle { border-color: var(--ot-red-opacity); }
.e-691b81f7 > .box.red > .circle::before { border-color: var(--ot-red-opacity); }
.e-691b81f7 > .box.red > .circle > .spin { color: var(--ot-red); }

.e-691b81f7 > .box.orange > .circle { border-color: var(--ot-orange-opacity); }
.e-691b81f7 > .box.orange > .circle::before { border-color: var(--ot-orange-opacity); }
.e-691b81f7 > .box.orange > .circle > .spin { color: var(--ot-orange); }

.e-691b81f7 > .box.green > .circle { border-color: var(--ot-green-opacity); }
.e-691b81f7 > .box.green > .circle::before { border-color: var(--ot-green-opacity); }
.e-691b81f7 > .box.green > .circle > .spin { color: var(--ot-green); }

/* ===== SIZE ===== */

.e-691b81f7 > .box.size-s
{
	min-height: 200px;
	padding: var(--ot-spacing-m);
}

.e-691b81f7 > .box.size-s > .circle { width: 56px; height: 56px; }
.e-691b81f7 > .box.size-s > .circle > .spin { font-size: 24px; }
.e-691b81f7 > .box.size-s > .text { font-size: var(--ot-size-s); }

.e-691b81f7 > .box.size-l
{
	min-height: 440px;
}

.e-691b81f7 > .box.size-l > .circle { width: 104px; height: 104px; }
.e-691b81f7 > .box.size-l > .circle > .spin { font-size: 44px; }
.e-691b81f7 > .box.size-l > .text { font-size: 15px; }

/* ===== AUTO ===== */

.e-691b81f7 > .box.auto
{
	min-height: auto;
}

/* ===== ANIMATIONS ===== */

@keyframes e-691b81f7-spin
{
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes e-691b81f7-pulse
{
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.5; transform: scale(1.02); }
}
/* Base page styles */
.ot-page
{
	display: grid;
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100dvh;
	overflow: hidden;
}

/* Page area containers */
.ot-page-area
{
	position: relative;
	overflow: auto;
}

.ot-page-area > div
{
	display: contents;
}
[ot]
{
	opacity: 0;
}
/* Root */

.e-5511e8fd
{
	display: block;
	width: 100%;
}

/* Editor */

.e-5511e8fd > .ot-editor
{
	position: relative;
	max-width: 720px;
	margin: 0 auto;
	padding: var(--ot-spacing-l) 0;
}

/* Blocks Container */

.e-5511e8fd > .ot-editor > .ot-editor-blocks
{
	display: flex;
	flex-direction: column;
}

/* Placeholder */

.e-5511e8fd > .ot-editor > .ot-editor-placeholder
{
	color: var(--ot-text-3);
	font-size: var(--ot-size-m);
	padding: 0 var(--ot-spacing-m);
	padding-left: 44px;
	pointer-events: none;
}

/* Block */

.e-5511e8fd .ot-block
{
	position: relative;
	display: flex;
	align-items: flex-start;
	padding: 2px 0;
	border-radius: var(--ot-radius-m);
	outline: none;
	transition: background 0.1s ease;
}

.e-5511e8fd .ot-block:hover
{
	background: var(--ot-bg-1-hover);
}

/* Gutter */

.e-5511e8fd .ot-block-gutter
{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 44px;
	flex-shrink: 0;
	opacity: 0;
	transition: opacity 0.15s ease;
	padding-top: 2px;
}

.e-5511e8fd .ot-block:hover > .ot-block-gutter
{
	opacity: 1;
}

.e-5511e8fd .ot-block-handle,
.e-5511e8fd .ot-block-add
{
	width: 24px;
	height: 24px;
	border-radius: var(--ot-radius-s);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ot-text-3);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background 0.15s ease, color 0.15s ease;
}

.e-5511e8fd .ot-block-handle:hover,
.e-5511e8fd .ot-block-add:hover
{
	background: var(--ot-bg-3);
	color: var(--ot-text-1);
}

.e-5511e8fd .ot-block-handle > i,
.e-5511e8fd .ot-block-add > i
{
	font-size: 16px;
}

.e-5511e8fd .ot-block-handle
{
	cursor: grab;
}

.e-5511e8fd .ot-block-handle:active
{
	cursor: grabbing;
}

/* Content */

.e-5511e8fd .ot-block-content
{
	flex: 1;
	min-width: 0;
	min-height: 24px;
	outline: none;
}

.e-5511e8fd .ot-block-content > [contenteditable]
{
	outline: none;
	min-height: 24px;
	word-break: break-word;
	overflow-wrap: break-word;
}

.e-5511e8fd .ot-block-content > [contenteditable]:empty::before
{
	content: attr(data-placeholder);
	color: var(--ot-text-3);
	pointer-events: none;
}

/* Paragraph */

.e-5511e8fd .ot-block-content > p
{
	margin: 0;
	font-size: var(--ot-size-m);
	line-height: 1.7;
	color: var(--ot-text-1);
}

/* Inline Formats */

.e-5511e8fd .ot-block-content strong
{
	font-weight: 600;
	color: var(--ot-text-1);
}

.e-5511e8fd .ot-block-content em
{
	font-style: italic;
}

.e-5511e8fd .ot-block-content code
{
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 0.9em;
	padding: 0.15em 0.4em;
	border-radius: var(--ot-radius-s);
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
}

.e-5511e8fd .ot-block-content a
{
	color: var(--ot-brand);
	text-decoration: underline;
	text-decoration-color: var(--ot-brand-opacity);
	text-underline-offset: 3px;
}

/* Actions */

.e-5511e8fd .ot-block-actions
{
	display: flex;
	align-items: flex-start;
	flex-shrink: 0;
	opacity: 0;
	transition: opacity 0.15s ease;
	padding-top: 2px;
}

.e-5511e8fd .ot-block:hover > .ot-block-actions
{
	opacity: 1;
}

.e-5511e8fd .ot-block-settings
{
	width: 24px;
	height: 24px;
	border-radius: var(--ot-radius-s);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ot-text-3);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background 0.15s ease, color 0.15s ease;
}

.e-5511e8fd .ot-block-settings:hover
{
	background: var(--ot-bg-3);
	color: var(--ot-text-1);
}

.e-5511e8fd .ot-block-settings > i
{
	font-size: 16px;
}

/* Selection */

.e-5511e8fd .ot-block-selected
{
	background: var(--ot-brand-opacity);
}

.e-5511e8fd .ot-block-focused
{
	background: transparent;
}

/* Bordered variant */

.e-5511e8fd > .ot-editor.bordered
{
	border: 1px solid var(--ot-bg-1-border);
	border-radius: var(--ot-radius-l);
	padding: var(--ot-spacing-l);
}

/* Compact variant */

.e-5511e8fd > .ot-editor.compact
{
	max-width: 100%;
	padding: var(--ot-spacing-m) 0;
}
/* ===== CLOUDFLARE IMAGES INPUT ===== */

.e-6180cbf3
{
	display: contents;
}
/* ===== CLOUDFLARE IMAGES UPLOAD ===== */

.e-1cd2e108
{
	display: contents;
}
.e-5511e8fd
{
	display: block;
}

.e-5511e8fd > .holder
{
	--ot-spacing-x: 4px;
	--ot-spacing-s: 8px;
	--ot-spacing-m: 16px;
	--ot-spacing-l: 32px;

	--ot-radius-s: 4px;
	--ot-radius-m: 8px;
	--ot-radius-l: 12px;

	--ot-height-x: 18px;
	--ot-height-s: 28px;
	--ot-height-m: 34px;
	--ot-height-l: 44px;

	--ot-size-s: 11px;
	--ot-size-m: 12px;
	--ot-size-l: 22px;

	--ot-bg-1: rgba(29, 29, 31, 1);
	--ot-bg-1-border: rgba(43, 43, 45, 1);
	--ot-bg-1-opacity: rgba(29, 29, 31, 0.85);
	--ot-bg-1-hover: rgba(33, 33, 35, 1);

	--ot-bg-2: rgba(34, 34, 36, 1);
	--ot-bg-2-border: rgba(48, 48, 50, 1);
	--ot-bg-2-opacity: rgba(34, 34, 36, 0.85);
	--ot-bg-2-hover: rgba(38, 38, 40, 1);

	--ot-bg-3: rgba(39, 39, 41, 1);
	--ot-bg-3-border: rgba(53, 53, 55, 1);
	--ot-bg-3-opacity: rgba(39, 39, 41, 0.85);
	--ot-bg-3-hover: rgba(43, 43, 45, 1);

	--ot-bg-4: rgba(44, 44, 46, 1);
	--ot-bg-4-border: rgba(58, 58, 60, 1);
	--ot-bg-4-opacity: rgba(44, 44, 46, 0.85);
	--ot-bg-4-hover: rgba(48, 48, 50, 1);

	--ot-text-1: rgba(225, 228, 232, 1);
	--ot-text-2: rgba(156, 156, 156, 1);
	--ot-text-3: rgba(100, 100, 100, 1);

	--ot-blue: rgba(56, 189, 248, 1);
	--ot-blue-border: rgba(125, 211, 252, 1);
	--ot-blue-opacity: rgba(56, 189, 248, 0.12);
	--ot-blue-hover: rgba(14, 165, 233, 1);

	--ot-red: rgba(244, 63, 94, 1);
	--ot-red-border: rgba(251, 113, 133, 1);
	--ot-red-opacity: rgba(244, 63, 94, 0.12);
	--ot-red-hover: rgba(225, 29, 72, 1);

	--ot-orange: rgba(251, 146, 60, 1);
	--ot-orange-border: rgba(253, 186, 116, 1);
	--ot-orange-opacity: rgba(251, 146, 60, 0.12);
	--ot-orange-hover: rgba(249, 115, 22, 1);

	--ot-green: rgba(52, 211, 153, 1);
	--ot-green-border: rgba(110, 231, 183, 1);
	--ot-green-opacity: rgba(52, 211, 153, 0.12);
	--ot-green-hover: rgba(16, 185, 129, 1);

	--ot-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
	--ot-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
	--ot-transition-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1);

	--ot-shadow-s: 0 1px 2px rgba(0, 0, 0, 0.2);
	--ot-shadow-m: 0 4px 12px rgba(0, 0, 0, 0.25);
	--ot-shadow-l: 0 12px 32px rgba(0, 0, 0, 0.35);

	--ot-blur: blur(12px) saturate(180%);

	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 280px;
	display: flex;
	flex-direction: column;
	background: var(--ot-bg-1);
	border-right: 1px solid var(--ot-bg-2-border);
	color: var(--ot-text-1);
	font-family: var(--ot-font-primary);
	z-index: 1000;
}

/* ===== HEAD ===== */

.e-5511e8fd > .holder > .head
{
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: 0 14px;
	border-bottom: 1px solid var(--ot-bg-2-border);
	flex-shrink: 0;
}

.e-5511e8fd > .holder > .head:empty
{
	display: none;
}

/* ===== BODY ===== */

.e-5511e8fd > .holder > .body
{
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 16px 12px;
	scrollbar-width: thin;
	scrollbar-color: var(--ot-bg-3-border) transparent;
}

.e-5511e8fd > .holder > .body::-webkit-scrollbar
{
	width: 6px;
}

.e-5511e8fd > .holder > .body::-webkit-scrollbar-thumb
{
	background: var(--ot-bg-3-border);
	border-radius: 3px;
}

.e-5511e8fd > .holder > .body::-webkit-scrollbar-thumb:hover
{
	background: var(--ot-bg-4-border);
}

.e-5511e8fd > .holder > .body::-webkit-scrollbar-track
{
	background: transparent;
}

/* ===== FOOT ===== */

.e-5511e8fd > .holder > .links
{
	padding: 10px 12px;
	flex-shrink: 0;
}

.e-5511e8fd > .holder > .links:empty
{
	display: none;
}

.e-5511e8fd > .holder > .foot
{
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: 10px 12px;
	border-top: 1px solid var(--ot-bg-2-border);
	flex-shrink: 0;
}

.e-5511e8fd > .holder > .foot:empty
{
	display: none;
}

.e-430ef87
{
	display: block;
	width: 100%;
}

.e-430ef87 > .holder
{
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.e-430ef87 .field
{
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.e-430ef87 .field > .label
{
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ot-text-3);
	padding: 0 4px;
}

.e-1f72fcf8
{
	display: block;
	width: 100%;
}

.e-1f72fcf8 > .holder
{
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.e-6765daae
{
	display: block;
	width: 100%;
}

.e-6765daae > .holder
{
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.e-4dd3edd8
{
	display: block;
	width: 100%;
}

.e-4dd3edd8 > .holder
{
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.e-4dd3edd8 .row
{
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 32px;
}

.e-4dd3edd8 .row-day
{
	display: flex;
	align-items: center;
	gap: 8px;
	width: 110px;
	flex-shrink: 0;
}

.e-4dd3edd8 .row-label
{
	font-size: 12px;
	font-weight: 500;
	color: var(--ot-text-1);
}

.e-4dd3edd8 .row-times
{
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1;
	min-width: 0;
}

.e-4dd3edd8 .row-times > .e-20dcefe9
{
	display: block;
	flex: 1;
	min-width: 0;
}

.e-4dd3edd8 .row-sep
{
	color: var(--ot-text-3);
	font-size: 11px;
	flex-shrink: 0;
}

.e-4dd3edd8 .row-closed
{
	flex: 1;
	font-size: 11px;
	color: var(--ot-text-3);
	font-style: italic;
}

.e-79eb231c
{
	display: block;
	width: 100%;
}

.e-79eb231c > .holder
{
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.e-1a4bbdae
{
	display: block;
	width: 100%;
}

.e-1a4bbdae > .holder
{
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.e-1a4bbdae .hint
{
	margin: 0;
	padding: 0 4px;
	font-size: 11px;
	line-height: 1.5;
	color: var(--ot-text-3);
}

.e-577b752
{
	display: block;
	width: 100%;
}

.e-577b752 > .holder
{
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.e-577b752 .hint
{
	margin: 0;
	padding: 0 4px;
	font-size: 11px;
	line-height: 1.5;
	color: var(--ot-text-3);
}

.e-106bd62f
{
	display: block;
	width: 100%;
}

.e-106bd62f > .holder
{
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
}

.e-106bd62f > .holder > .field
{
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.e-106bd62f > .holder > .field > .label
{
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ot-text-3);
	padding: 0 4px;
}

.e-37b4f16d
{
	display: block;
	width: 100%;
}

.e-37b4f16d > .holder
{
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
}

.e-37b4f16d > .holder > .field
{
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.e-37b4f16d > .holder > .field > .label
{
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ot-text-3);
	padding: 0 4px;
}

.e-37b4f16d > .holder > .field.row
{
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 4px;
}

.e-37b4f16d > .holder > .field.row > .row-text
{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.e-37b4f16d > .holder > .field.row > .row-text > .row-label
{
	font-size: 12px;
	font-weight: 500;
	color: var(--ot-text-1);
}

.e-37b4f16d > .holder > .field.row > .row-text > .row-hint
{
	font-size: 11px;
	line-height: 1.4;
	color: var(--ot-text-3);
}

.e-1e2eed81
{
	display: block;
	width: 100%;
}

.e-1e2eed81 > .holder
{
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
}

.e-1e2eed81 > .holder > .field
{
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.e-1e2eed81 > .holder > .field > .label
{
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ot-text-3);
	padding: 0 4px;
}

.e-145ba5c7
{
	display: block;
	width: 100%;
}

.e-145ba5c7 > .holder
{
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
}

.e-145ba5c7 > .holder > .field
{
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.e-145ba5c7 > .holder > .field > .label
{
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ot-text-3);
	padding: 0 4px;
}

.e-42f66fcd
{
	display: block;
	width: 100%;
}

.e-42f66fcd > .holder
{
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.e-42f66fcd > .holder > .e-64e877b
{
	display: block;
	flex-shrink: 0;
}

.e-42f66fcd > .holder > .e-64e877b:last-child
{
	flex: 1;
	min-width: 0;
}

.e-1e9f1391
{
	display: block;
	width: 100%;
}

.e-1e9f1391 > .holder
{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	width: 100%;
}

.e-1e9f1391 .chip
{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px 5px 8px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 100px;
	font-size: 11px;
	font-weight: 500;
	color: var(--ot-text-2);
	text-decoration: none;
	transition: background var(--ot-transition), border-color var(--ot-transition), color var(--ot-transition);
}

.e-1e9f1391 .chip:hover
{
	background: var(--ot-bg-3);
	border-color: var(--ot-bg-3-border);
	color: var(--ot-text-1);
}

.e-1e9f1391 .chip > i
{
	font-size: 13px;
	color: var(--ot-text-3);
	transition: color var(--ot-transition);
}

.e-1e9f1391 .chip:hover > i
{
	color: var(--ot-brand);
}

.e-1e92cc56
{
	display: block;
	width: 100%;
}

.e-1e92cc56 > .holder
{
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
}

/* ===== GROUP ===== */

.e-1e92cc56 .group
{
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.e-1e92cc56 .group > .group-label
{
	padding: 0 12px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ot-text-3);
}

.e-1e92cc56 .group > .group-items
{
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* ===== ITEM ===== */

.e-1e92cc56 .item
{
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 12px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--ot-radius-m);
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-align: left;
	transition: background var(--ot-transition), border-color var(--ot-transition);
}

.e-1e92cc56 .item:hover
{
	background: var(--ot-bg-2);
	border-color: var(--ot-bg-2-border);
}

.e-1e92cc56 .item:hover > .chevron
{
	color: var(--ot-text-1);
	transform: translateX(2px);
}

.e-1e92cc56 .item:hover > .icon
{
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
}

/* Icon */

.e-1e92cc56 .item > .icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--ot-bg-2);
	border-radius: var(--ot-radius-s);
	color: var(--ot-text-2);
	flex-shrink: 0;
	transition: background var(--ot-transition), color var(--ot-transition);
}

.e-1e92cc56 .item > .icon > i
{
	font-size: 18px;
}

/* Text */

.e-1e92cc56 .item > .text
{
	display: flex;
	flex-direction: column;
	gap: 1px;
	flex: 1;
	min-width: 0;
}

.e-1e92cc56 .item > .text > .label
{
	font-size: var(--ot-size-m);
	font-weight: 500;
	color: var(--ot-text-1);
	line-height: 1.3;
}

.e-1e92cc56 .item > .text > .description
{
	font-size: var(--ot-size-s);
	color: var(--ot-text-3);
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Chevron */

.e-1e92cc56 .item > .chevron
{
	font-size: 18px;
	color: var(--ot-text-3);
	flex-shrink: 0;
	transition: color var(--ot-transition), transform var(--ot-transition);
}

.e-1e6a7386
{
	display: block;
	width: 100%;
}

.e-1e6a7386 > .holder
{
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.e-1e6a7386 > .holder > .e-15ce864f
{
	display: block;
	flex: 1;
	min-width: 0;
}

.e-1e6a7386 > .holder > .e-64e877b
{
	display: block;
	flex-shrink: 0;
}

.e-65a99659
{
	display: block;
	width: 100%;
}

.e-65a99659 > .holder
{
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 26px 26px 22px;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-l);
}

/* ========================================== */
/* ===== PRICE BLOCK ======================== */
/* ========================================== */

.e-65a99659 .price-block
{
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.e-65a99659 .savings
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	padding: 5px 11px 5px 9px;
	background: var(--ot-brand-opacity);
	border-radius: 100px;
	font-size: 10.5px;
	font-weight: 700;
	color: var(--ot-brand);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.e-65a99659 .savings > i
{
	font-size: 13px;
	font-variation-settings: 'FILL' 1;
}

/* Price row */

.e-65a99659 .price-row
{
	display: flex;
	flex-direction: column;
	gap: 0;
	line-height: 1;
}

.e-65a99659 .price-old
{
	font-size: 13px;
	font-weight: 500;
	color: var(--ot-text-3);
	text-decoration: line-through;
	margin-bottom: 4px;
	line-height: 1;
}

.e-65a99659 .price-current
{
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}

.e-65a99659 .price-from
{
	font-size: 11px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.e-65a99659 .price-value
{
	font-family: var(--ot-font-secondary);
	font-size: 44px;
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: -0.028em;
	font-variation-settings: 'opsz' 144;
	line-height: 1;
}

.e-65a99659 .price-currency
{
	font-family: var(--ot-font-secondary);
	font-size: 22px;
	font-weight: 400;
	color: var(--ot-text-2);
	letter-spacing: -0.018em;
	font-variation-settings: 'opsz' 144;
}

.e-65a99659 .price-per
{
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ot-text-3);
	margin-top: 6px;
	letter-spacing: 0.005em;
}

/* ========================================== */
/* ===== DATES ============================== */
/* ========================================== */

.e-65a99659 .dates
{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
	position: relative;
}

.e-65a99659 .date
{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	line-height: 1.2;
}

.e-65a99659 .date-label
{
	font-size: 9.5px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.e-65a99659 .date-value
{
	font-family: var(--ot-font-secondary);
	font-size: 14px;
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: -0.012em;
	font-variation-settings: 'opsz' 144;
}

.e-65a99659 .date-arrow
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ot-text-3);
	flex-shrink: 0;
}

.e-65a99659 .date-arrow > i
{
	font-size: 17px;
}

.e-65a99659 .date-duration
{
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 100px;
	font-size: 10px;
	font-weight: 700;
	color: var(--ot-text-2);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	white-space: nowrap;
}

/* ========================================== */
/* ===== DEADLINES ========================== */
/* ========================================== */

.e-65a99659 .deadlines
{
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.e-65a99659 .deadline
{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px 11px 12px;
	border-radius: var(--ot-radius-m);
	border: 1px solid transparent;
}

.e-65a99659 .deadline.tone-brand
{
	background: var(--ot-brand-opacity);
}

.e-65a99659 .deadline.tone-gold
{
	background: rgba(170, 130, 60, 0.1);
}

.e-65a99659 .deadline.tone-green
{
	background: rgba(20, 144, 95, 0.1);
}

.e-65a99659 .deadline.tone-dark
{
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
}

.e-65a99659 .deadline-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.e-65a99659 .deadline-icon > i
{
	font-size: 18px;
}

.e-65a99659 .deadline.tone-brand .deadline-icon > i { color: var(--ot-brand); }
.e-65a99659 .deadline.tone-gold  .deadline-icon > i { color: rgba(170, 130, 60, 1); }
.e-65a99659 .deadline.tone-green .deadline-icon > i { color: rgba(20, 144, 95, 1); }
.e-65a99659 .deadline.tone-dark  .deadline-icon > i { color: var(--ot-bg-1); }

.e-65a99659 .deadline-text
{
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
	line-height: 1.3;
}

.e-65a99659 .deadline-label
{
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.e-65a99659 .deadline.tone-brand .deadline-label { color: var(--ot-brand); }
.e-65a99659 .deadline.tone-gold  .deadline-label { color: rgba(170, 130, 60, 1); }
.e-65a99659 .deadline.tone-green .deadline-label { color: rgba(20, 144, 95, 1); }
.e-65a99659 .deadline.tone-dark  .deadline-label { color: var(--ot-bg-1); }

.e-65a99659 .deadline-value
{
	font-family: var(--ot-font-secondary);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: -0.005em;
	font-variation-settings: 'opsz' 144;
}

.e-65a99659 .deadline.tone-brand .deadline-value,
.e-65a99659 .deadline.tone-gold  .deadline-value,
.e-65a99659 .deadline.tone-green .deadline-value
{
	color: var(--ot-text-1);
}

.e-65a99659 .deadline.tone-dark .deadline-value
{
	color: var(--ot-bg-1);
}

/* ========================================== */
/* ===== CTA ================================ */
/* ========================================== */

.e-65a99659 .cta
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 22px;
	background: var(--ot-text-1);
	border-radius: 100px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ot-bg-1);
	letter-spacing: 0.005em;
	transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1), gap 240ms, transform 240ms;
	margin-top: 4px;
}

.e-65a99659 .cta:hover
{
	background: var(--ot-brand);
	gap: 14px;
	transform: translateY(-1px);
}

.e-65a99659 .cta > i
{
	font-size: 18px;
}

/* CTA note */

.e-65a99659 .cta-note
{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: 11.5px;
	font-weight: 500;
	color: var(--ot-text-3);
	letter-spacing: 0.005em;
	justify-content: center;
}

.e-65a99659 .cta-note > i
{
	font-size: 14px;
	color: rgba(20, 144, 95, 1);
	font-variation-settings: 'FILL' 1;
}

/* ========================================== */
/* ===== TRUST LIST ========================= */
/* ========================================== */

.e-65a99659 .trust
{
	list-style: none;
	margin: 4px 0 0;
	padding: 16px 0 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	border-top: 1px solid var(--ot-bg-2-border);
}

.e-65a99659 .trust-item
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ot-text-2);
	letter-spacing: 0.005em;
}

.e-65a99659 .trust-item > i
{
	font-size: 16px;
	color: var(--ot-brand);
	flex-shrink: 0;
	font-variation-settings: 'FILL' 0;
}

/* ========================================== */
/* ===== NOTIFY (collapsible form) ========== */
/* ========================================== */

.e-65a99659 .notify
{
	border-top: 1px solid var(--ot-bg-2-border);
	padding-top: 4px;
}

.e-65a99659 .notify-trigger
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 10px 0;
	background: transparent;
	border: 0;
	font: inherit;
	color: var(--ot-text-1);
	cursor: pointer;
	transition: color 200ms;
}

.e-65a99659 .notify-trigger:hover
{
	color: var(--ot-brand);
}

.e-65a99659 .notify-trigger-text
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: -0.005em;
}

.e-65a99659 .notify-trigger-text > i
{
	font-size: 17px;
	color: var(--ot-brand);
}

.e-65a99659 .notify-trigger-toggle
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ot-bg-2);
	font-size: 16px;
	transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-65a99659 .notify-trigger:hover .notify-trigger-toggle
{
	background: var(--ot-bg-3);
}

/* Notify form */

.e-65a99659 .notify-form
{
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 4px 0 12px;
	animation: e-65a99659-expand 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes e-65a99659-expand
{
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.e-65a99659 .notify-description
{
	font-size: 12px;
	line-height: 1.5;
	color: var(--ot-text-3);
	margin: 0 0 4px;
}

.e-65a99659 .notify-field
{
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
	transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1), background 200ms;
}

.e-65a99659 .notify-field:focus-within
{
	border-color: var(--ot-brand);
	background: var(--ot-bg-1);
}

.e-65a99659 .notify-field > i
{
	font-size: 16px;
	color: var(--ot-text-3);
	flex-shrink: 0;
	transition: color 200ms;
}

.e-65a99659 .notify-field:focus-within > i
{
	color: var(--ot-brand);
}

.e-65a99659 .notify-field > input
{
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: 0.005em;
	outline: none;
}

.e-65a99659 .notify-field > input::placeholder
{
	color: var(--ot-text-3);
}

.e-65a99659 .notify-submit
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 11px 18px;
	background: var(--ot-brand);
	border: 0;
	border-radius: 100px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: white;
	letter-spacing: 0.005em;
	cursor: pointer;
	transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1), gap 240ms;
	margin-top: 2px;
}

.e-65a99659 .notify-submit:hover
{
	background: var(--ot-brand-hover);
	gap: 10px;
}

.e-65a99659 .notify-submit > i
{
	font-size: 15px;
}

/* ========================================== */
/* ===== HELP =============================== */
/* ========================================== */

.e-65a99659 .help
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	background: var(--ot-bg-2);
	border-radius: var(--ot-radius-m);
}

.e-65a99659 .help-text
{
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	line-height: 1.3;
}

.e-65a99659 .help-title
{
	font-size: 10.5px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.e-65a99659 .help-phone
{
	font-family: var(--ot-font-secondary);
	font-size: 14px;
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: -0.005em;
	font-variation-settings: 'opsz' 144;
}

.e-65a99659 .help-cta
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px 9px 12px;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 100px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ot-text-1);
	letter-spacing: 0.005em;
	transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms, border-color 200ms;
	flex-shrink: 0;
}

.e-65a99659 .help-cta:hover
{
	background: var(--ot-brand);
	color: white;
	border-color: var(--ot-brand);
}

.e-65a99659 .help-cta > i
{
	font-size: 14px;
}

/* ========================================== */
/* ===== SHARE ROW ========================== */
/* ========================================== */

.e-65a99659 .share
{
	display: flex;
	gap: 6px;
	padding-top: 4px;
}

.e-65a99659 .share-btn
{
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
	color: var(--ot-text-2);
	cursor: pointer;
	transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms, border-color 200ms;
}

.e-65a99659 .share-btn:hover
{
	background: var(--ot-bg-1);
	color: var(--ot-text-1);
	border-color: var(--ot-bg-3-border);
}

.e-65a99659 .share-btn.is-active
{
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
	border-color: transparent;
}

.e-65a99659 .share-btn.is-active > i
{
	font-variation-settings: 'FILL' 1;
}

.e-65a99659 .share-btn > i
{
	font-size: 17px;
}

.e-29e43647
{
	display: block;
	width: 100%;
}

.e-29e43647 > .holder
{
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* ===== GRID ===== */

.e-29e43647 .grid
{
	display: grid;
	grid-template-columns: repeat(var(--columns, 2), 1fr);
	gap: 8px;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-l);
	padding: 8px;
}

/* ===== ITEM ===== */

.e-29e43647 .item
{
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 16px;
	background: transparent;
	border-radius: var(--ot-radius-m);
	transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-29e43647 .item:hover
{
	background: var(--ot-bg-2);
}

.e-29e43647 .item.is-sold
{
	opacity: 0.55;
}

.e-29e43647 .item.is-sold:hover
{
	background: transparent;
}

/* Pin */

.e-29e43647 .item-pin
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--ot-bg-2);
	flex-shrink: 0;
	transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-29e43647 .item:hover .item-pin
{
	background: var(--ot-bg-1);
}

.e-29e43647 .item.is-main .item-pin
{
	background: var(--ot-brand-opacity);
}

.e-29e43647 .item-pin > i
{
	font-size: 18px;
	color: var(--ot-text-3);
	transition: color 220ms;
}

.e-29e43647 .item:hover .item-pin > i,
.e-29e43647 .item.is-main .item-pin > i
{
	color: var(--ot-brand);
}

/* Text */

.e-29e43647 .item-text
{
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	flex: 1;
}

.e-29e43647 .item-head
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.e-29e43647 .item-city
{
	font-family: var(--ot-font-secondary);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.012em;
	color: var(--ot-text-1);
	font-variation-settings: 'opsz' 144;
	line-height: 1.2;
}

.e-29e43647 .item-tag
{
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	background: var(--ot-brand);
	border-radius: 100px;
	font-size: 9px;
	font-weight: 700;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.e-29e43647 .item-region
{
	font-size: 11px;
	font-weight: 600;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* Meta chips */

.e-29e43647 .item-meta
{
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
}

.e-29e43647 .meta-chip
{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px 4px 8px;
	background: var(--ot-bg-2);
	border-radius: 100px;
	font-size: 11px;
	font-weight: 500;
	color: var(--ot-text-2);
	letter-spacing: 0.005em;
}

.e-29e43647 .item:hover .meta-chip
{
	background: var(--ot-bg-1);
}

.e-29e43647 .meta-chip > i
{
	font-size: 13px;
	color: var(--ot-text-3);
}

/* Note */

.e-29e43647 .item-note
{
	font-size: 11.5px;
	font-weight: 500;
	color: var(--ot-text-3);
	line-height: 1.45;
	margin-top: 2px;
}

/* Aside (surcharge / status) */

.e-29e43647 .item-aside
{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	flex-shrink: 0;
	text-align: right;
}

.e-29e43647 .item-surcharge
{
	font-family: var(--ot-font-secondary);
	font-size: 16px;
	font-weight: 500;
	color: var(--ot-brand);
	letter-spacing: -0.012em;
	font-variation-settings: 'opsz' 144;
	white-space: nowrap;
}

.e-29e43647 .item-status
{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px 4px 8px;
	border-radius: 100px;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.e-29e43647 .item-status > i
{
	font-size: 13px;
	font-variation-settings: 'FILL' 1;
}

.e-29e43647 .item-status.available
{
	background: rgba(20, 144, 95, 0.12);
	color: rgba(20, 144, 95, 1);
}

.e-29e43647 .item-status.sold
{
	background: var(--ot-bg-3);
	color: var(--ot-text-3);
}

/* Note */

.e-29e43647 .note
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 500;
	color: var(--ot-text-3);
	margin: 0;
	padding: 0 4px;
}

.e-29e43647 .note > i
{
	font-size: 14px;
	color: var(--ot-text-3);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 700px)
{
	.e-29e43647 .grid
	{
		grid-template-columns: 1fr;
	}

	.e-29e43647 .item
	{
		padding: 14px 14px;
	}
}

.e-64a5b7d5
{
	display: block;
	width: 100%;
}

/* ===== HOLDER ===== */

.e-64a5b7d5 > .holder
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
}

/* ===== CARD VARIANT (default) ===== */

.e-64a5b7d5 > .holder.variant-card
{
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-l);
	overflow: hidden;
}

.e-64a5b7d5 > .holder.variant-card.tone-dark
{
	background: var(--ot-text-1);
	border-color: rgba(255, 255, 255, 0.1);
}

/* ===== FLAT VARIANT (no border, just dividers) ===== */

.e-64a5b7d5 > .holder.variant-flat
{
	border-top: 1px solid var(--ot-bg-2-border);
	border-bottom: 1px solid var(--ot-bg-2-border);
}

/* ===== INLINE VARIANT (compact pills) ===== */

.e-64a5b7d5 > .holder.variant-inline
{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* ========================================== */
/* ===== ITEM ============================== */
/* ========================================== */

.e-64a5b7d5 .item
{
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 24px;
	min-width: 0;
}

/* Vertical dividers (right side, all except 3rd column) */

.e-64a5b7d5 > .holder.variant-card .item:not(:nth-child(3n))::after,
.e-64a5b7d5 > .holder.variant-flat .item:not(:nth-child(3n))::after
{
	content: '';
	position: absolute;
	top: 16px;
	bottom: 16px;
	right: 0;
	width: 1px;
	background: var(--ot-bg-2-border);
}

.e-64a5b7d5 > .holder.tone-dark .item:not(:nth-child(3n))::after
{
	background: rgba(255, 255, 255, 0.08);
}

/* Horizontal divider for items not in the last row */

.e-64a5b7d5 > .holder.variant-card .item.has-row-divider,
.e-64a5b7d5 > .holder.variant-flat .item.has-row-divider
{
	border-bottom: 1px solid var(--ot-bg-2-border);
}

.e-64a5b7d5 > .holder.tone-dark .item.has-row-divider
{
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* ===== ICON ===== */

.e-64a5b7d5 .item-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--ot-brand-opacity);
	flex-shrink: 0;
}

.e-64a5b7d5 .item-icon > i
{
	font-size: 22px;
	color: var(--ot-brand);
}

/* Accent variants on icon */

.e-64a5b7d5 .item.accent-dark  .item-icon { background: rgba(20, 18, 16, 0.06); }
.e-64a5b7d5 .item.accent-dark  .item-icon > i { color: var(--ot-text-1); }

.e-64a5b7d5 .item.accent-green .item-icon { background: rgba(20, 144, 95, 0.12); }
.e-64a5b7d5 .item.accent-green .item-icon > i { color: rgba(20, 144, 95, 1); }

.e-64a5b7d5 .item.accent-gold  .item-icon { background: rgba(170, 130, 60, 0.12); }
.e-64a5b7d5 .item.accent-gold  .item-icon > i { color: rgba(170, 130, 60, 1); }

.e-64a5b7d5 > .holder.tone-dark .item-icon
{
	background: rgba(237, 28, 36, 0.18);
}

.e-64a5b7d5 > .holder.tone-dark .item-icon > i
{
	color: white;
}

/* ===== TEXT ===== */

.e-64a5b7d5 .item-text
{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	line-height: 1.25;
}

.e-64a5b7d5 .item-label
{
	font-size: 10.5px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.e-64a5b7d5 > .holder.tone-dark .item-label
{
	color: rgba(255, 255, 255, 0.55);
}

.e-64a5b7d5 .item-value
{
	font-family: var(--ot-font-secondary);
	font-size: 17px;
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: -0.012em;
	font-variation-settings: 'opsz' 144;
	line-height: 1.2;
}

.e-64a5b7d5 > .holder.tone-dark .item-value
{
	color: white;
}

.e-64a5b7d5 .item-note
{
	font-size: 11px;
	font-weight: 500;
	color: var(--ot-text-3);
	letter-spacing: 0.005em;
	margin-top: 2px;
}

.e-64a5b7d5 > .holder.tone-dark .item-note
{
	color: rgba(255, 255, 255, 0.5);
}

/* ========================================== */
/* ===== INLINE VARIANT (specific) ========== */
/* ========================================== */

.e-64a5b7d5 > .holder.variant-inline .item
{
	padding: 8px 14px 8px 12px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 100px;
	gap: 8px;
}

.e-64a5b7d5 > .holder.variant-inline .item-icon
{
	width: 28px;
	height: 28px;
	border-radius: 50%;
}

.e-64a5b7d5 > .holder.variant-inline .item-icon > i
{
	font-size: 15px;
}

.e-64a5b7d5 > .holder.variant-inline .item-text
{
	flex-direction: row;
	align-items: baseline;
	gap: 6px;
}

.e-64a5b7d5 > .holder.variant-inline .item-label
{
	font-size: 10px;
}

.e-64a5b7d5 > .holder.variant-inline .item-value
{
	font-size: 13px;
}

.e-64a5b7d5 > .holder.variant-inline .item-note
{
	display: none;
}

.e-64a5b7d5 > .holder.variant-inline .item::after
{
	display: none;
}

/* ========================================== */
/* ===== RESPONSIVE ========================= */
/* ========================================== */

@media (max-width: 700px)
{
	.e-64a5b7d5 > .holder.variant-card,
	.e-64a5b7d5 > .holder.variant-flat
	{
		grid-template-columns: repeat(2, 1fr);
	}

	.e-64a5b7d5 .item
	{
		padding: 18px 18px;
	}

	/* Reset 3-col dividers, apply 2-col dividers */

	.e-64a5b7d5 > .holder.variant-card .item:not(:nth-child(3n))::after,
	.e-64a5b7d5 > .holder.variant-flat .item:not(:nth-child(3n))::after
	{
		display: none;
	}

	.e-64a5b7d5 > .holder.variant-card .item:nth-child(2n - 1)::after,
	.e-64a5b7d5 > .holder.variant-flat .item:nth-child(2n - 1)::after
	{
		content: '';
		display: block;
		position: absolute;
		top: 16px;
		bottom: 16px;
		right: 0;
		width: 1px;
		background: var(--ot-bg-2-border);
	}
}

@media (max-width: 460px)
{
	.e-64a5b7d5 > .holder.variant-card,
	.e-64a5b7d5 > .holder.variant-flat
	{
		grid-template-columns: 1fr;
	}

	.e-64a5b7d5 > .holder.variant-card .item::after,
	.e-64a5b7d5 > .holder.variant-flat .item::after
	{
		display: none;
	}

	.e-64a5b7d5 > .holder.variant-card .item:not(:last-child),
	.e-64a5b7d5 > .holder.variant-flat .item:not(:last-child)
	{
		border-bottom: 1px solid var(--ot-bg-2-border);
	}
}

.e-721eb624
{
	display: block;
	width: 100%;
}

/* ========================================== */
/* ===== FLAT VARIANT (default) ============= */
/* ========================================== */

.e-721eb624 > .holder.variant-flat
{
	display: flex;
	flex-direction: column;
}


/* ========================================== */
/* ===== CARD VARIANT ======================= */
/* ========================================== */

.e-721eb624 > .holder.variant-card
{
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.e-721eb624 > .holder.variant-card .item
{
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-l);
	overflow: hidden;
	transition: border-color 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-721eb624 > .holder.variant-card .item:hover
{
	border-color: var(--ot-bg-3-border);
}

.e-721eb624 > .holder.variant-card .item.is-open
{
	border-color: var(--ot-brand);
}

/* ========================================== */
/* ===== TRIGGER ============================ */
/* ========================================== */

.e-721eb624 .trigger
{
	display: flex;
	align-items: center;
	gap: 20px;
	width: 100%;
	padding: 22px 4px;
	background: transparent;
	border: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-align: left;
	transition: padding 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-721eb624 > .holder.variant-card .trigger
{
	padding: 22px 24px;
}

.e-721eb624 .trigger-text
{
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-width: 0;
}

.e-721eb624 .trigger-category
{
	font-size: 10.5px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.e-721eb624 .item.is-open .trigger-category
{
	color: var(--ot-brand);
}

.e-721eb624 .trigger-question
{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--ot-font-secondary);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.012em;
	line-height: 1.3;
	color: var(--ot-text-1);
	margin: 0;
	font-variation-settings: 'opsz' 144;
	transition: color 200ms;
}

.e-721eb624 .trigger:hover .trigger-question
{
	color: var(--ot-brand);
}

.e-721eb624 .item.is-open .trigger-question
{
	color: var(--ot-brand);
}

.e-721eb624 .trigger-icon
{
	font-size: 19px;
	color: var(--ot-text-3);
	flex-shrink: 0;
	transition: color 200ms;
}

.e-721eb624 .item.is-open .trigger-icon,
.e-721eb624 .trigger:hover .trigger-icon
{
	color: var(--ot-brand);
}

/* Toggle (+/−) */

.e-721eb624 .trigger-toggle
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ot-bg-2);
	color: var(--ot-text-1);
	flex-shrink: 0;
	transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1), color 240ms, transform 240ms;
}

.e-721eb624 .trigger:hover .trigger-toggle
{
	background: var(--ot-bg-3);
}

.e-721eb624 .item.is-open .trigger-toggle
{
	background: var(--ot-brand);
	color: white;
	transform: rotate(180deg);
}

.e-721eb624 .trigger-toggle > i
{
	font-size: 18px;
}

/* ========================================== */
/* ===== ANSWER ============================= */
/* ========================================== */

.e-721eb624 .answer
{
	overflow: hidden;
	animation: e-721eb624-expand 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes e-721eb624-expand
{
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.e-721eb624 > .holder.variant-flat .answer-inner
{
	padding: 0 4px 22px;
}

.e-721eb624 > .holder.variant-card .answer-inner
{
	padding: 0 24px 22px;
}

.e-721eb624 .answer-inner
{
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--ot-text-2);
	max-width: 760px;
}

.e-721eb624 .answer-inner > p
{
	margin: 0 0 14px;
}

.e-721eb624 .answer-inner > p:last-child
{
	margin-bottom: 0;
}

.e-721eb624 .answer-inner strong
{
	font-weight: 600;
	color: var(--ot-text-1);
}

.e-721eb624 .answer-inner em
{
	font-style: italic;
}

.e-721eb624 .answer-inner a
{
	color: var(--ot-brand);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 180ms;
}

.e-721eb624 .answer-inner a:hover
{
	color: var(--ot-brand-hover);
}

.e-721eb624 .answer-inner ul,
.e-721eb624 .answer-inner ol
{
	margin: 0 0 14px;
	padding-left: 22px;
}

.e-721eb624 .answer-inner li
{
	margin: 4px 0;
}

.e-721eb624 .answer-inner ul > li::marker
{
	color: var(--ot-brand);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 700px)
{
	.e-721eb624 .trigger
	{
		gap: 14px;
		padding: 18px 4px;
	}

	.e-721eb624 > .holder.variant-card .trigger
	{
		padding: 18px 20px;
	}

	.e-721eb624 .trigger-question
	{
		font-size: 16px;
	}

	.e-721eb624 .answer-inner
	{
		font-size: 13.5px;
	}
}

.e-6958209
{
	display: block;
	width: 100%;
}

/* ========================================== */
/* ===== GRID VARIANT (default) ============= */
/* ========================================== */

.e-6958209 > .holder.variant-grid
{
	display: grid;
	grid-template-columns: repeat(var(--columns, 3), 1fr);
	gap: 32px 36px;
}

/* ========================================== */
/* ===== LIST VARIANT ======================= */
/* ========================================== */

.e-6958209 > .holder.variant-list
{
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.e-6958209 > .holder.variant-list .items
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px 24px;
}

/* ========================================== */
/* ===== GROUP ============================== */
/* ========================================== */

.e-6958209 .group
{
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

/* Group head */

.e-6958209 .group-head
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ot-bg-2-border);
}

.e-6958209 .group-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--ot-brand-opacity);
	flex-shrink: 0;
}

.e-6958209 .group-icon > i
{
	font-size: 17px;
	color: var(--ot-brand);
}

.e-6958209 .group-title
{
	font-family: var(--ot-font-secondary);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.012em;
	color: var(--ot-text-1);
	margin: 0;
	font-variation-settings: 'opsz' 144;
}

/* ========================================== */
/* ===== ITEMS LIST ========================= */
/* ========================================== */

.e-6958209 .items
{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.e-6958209 .item
{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 4px 0;
}

/* Item mark (check icon) */

.e-6958209 .item-mark
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	color: var(--ot-text-3);
	margin-top: 1px;
	transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-6958209 .item-mark > i
{
	font-size: 16px;
}

.e-6958209 .item.is-highlight .item-mark
{
	color: var(--ot-brand);
}

.e-6958209 .item.is-highlight .item-mark > i
{
	font-variation-settings: 'FILL' 1;
}

/* Item text */

.e-6958209 .item-text
{
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	line-height: 1.4;
}

.e-6958209 .item-label
{
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: -0.005em;
}

.e-6958209 .item.is-highlight .item-label
{
	font-weight: 600;
}

.e-6958209 .item-note
{
	font-size: 11.5px;
	font-weight: 500;
	color: var(--ot-text-3);
	letter-spacing: 0.005em;
}

/* ========================================== */
/* ===== PILLS VARIANT ====================== */
/* ========================================== */

.e-6958209 > .holder.variant-pills
{
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.e-6958209 > .holder.variant-pills .group
{
	gap: 12px;
}

.e-6958209 > .holder.variant-pills .group-head
{
	border-bottom: 0;
	padding-bottom: 0;
}

.e-6958209 > .holder.variant-pills .group-title
{
	font-family: var(--ot-font-primary);
	font-size: 11px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

.e-6958209 > .holder.variant-pills .group-icon
{
	width: 24px;
	height: 24px;
	border-radius: 6px;
}

.e-6958209 > .holder.variant-pills .group-icon > i
{
	font-size: 14px;
}

.e-6958209 > .holder.variant-pills .items
{
	flex-direction: row;
	flex-wrap: wrap;
	gap: 6px;
}

.e-6958209 > .holder.variant-pills .item
{
	padding: 6px 12px 6px 10px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 100px;
	gap: 6px;
	align-items: center;
}

.e-6958209 > .holder.variant-pills .item-mark
{
	width: 16px;
	height: 16px;
	margin: 0;
	color: var(--ot-brand);
}

.e-6958209 > .holder.variant-pills .item-mark > i
{
	font-size: 13px;
}

.e-6958209 > .holder.variant-pills .item-text
{
	flex-direction: row;
	align-items: baseline;
	gap: 5px;
}

.e-6958209 > .holder.variant-pills .item-label
{
	font-size: 12px;
}

.e-6958209 > .holder.variant-pills .item-note
{
	display: none;
}

/* ========================================== */
/* ===== RESPONSIVE ========================= */
/* ========================================== */

@media (max-width: 900px)
{
	.e-6958209 > .holder.variant-grid
	{
		grid-template-columns: repeat(2, 1fr);
	}

	.e-6958209 > .holder.variant-list .items
	{
		grid-template-columns: 1fr;
	}
}

@media (max-width: 500px)
{
	.e-6958209 > .holder.variant-grid
	{
		grid-template-columns: 1fr;
	}
}

.e-3427fe60
{
	display: block;
	width: 100%;
}

.e-3427fe60 > .holder
{
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* ========================================== */
/* ===== SECTORS ============================ */
/* ========================================== */

.e-3427fe60 .sectors
{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 2px;
}

.e-3427fe60 .sectors::-webkit-scrollbar
{
	display: none;
}

.e-3427fe60 .sector-pill
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px 9px 14px;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 100px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ot-text-2);
	letter-spacing: 0.005em;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms, border-color 220ms;
}

.e-3427fe60 .sector-pill:hover
{
	background: var(--ot-bg-2);
	color: var(--ot-text-1);
	border-color: var(--ot-bg-3-border);
}

.e-3427fe60 .sector-pill.is-active
{
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
	border-color: var(--ot-text-1);
}

.e-3427fe60 .sector-pill > i
{
	font-size: 16px;
	color: var(--ot-text-3);
	transition: color 220ms;
}

.e-3427fe60 .sector-pill:hover > i
{
	color: var(--ot-brand);
}

.e-3427fe60 .sector-pill.is-active > i
{
	color: var(--ot-bg-1);
}

/* ========================================== */
/* ===== GRID =============================== */
/* ========================================== */

.e-3427fe60 .grid
{
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 12px;
	min-height: 540px;
}

/* ===== HERO IMAGE ===== */

.e-3427fe60 .hero
{
	position: relative;
	border-radius: var(--ot-radius-l);
	overflow: hidden;
	cursor: pointer;
	background: var(--ot-bg-3);
}

.e-3427fe60 .hero-cover
{
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transform: scale(1);
	transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-3427fe60 .hero:hover .hero-cover
{
	transform: scale(1.04);
}

.e-3427fe60 .hero::after
{
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(20, 18, 16, 0.0) 50%, rgba(20, 18, 16, 0.55) 100%),
		linear-gradient(0deg, rgba(20, 18, 16, 0.18) 0%, transparent 35%);
	pointer-events: none;
}

/* ===== THUMBS ===== */

.e-3427fe60 .thumbs
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 12px;
}

.e-3427fe60 .thumb
{
	position: relative;
	border-radius: var(--ot-radius-l);
	overflow: hidden;
	cursor: pointer;
	background: var(--ot-bg-3);
	min-height: 0;
}

.e-3427fe60 .thumb-cover
{
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transform: scale(1);
	transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-3427fe60 .thumb:hover .thumb-cover
{
	transform: scale(1.05);
}

.e-3427fe60 .thumb::after
{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 18, 16, 0.0) 60%, rgba(20, 18, 16, 0.4) 100%);
	pointer-events: none;
}

/* ========================================== */
/* ===== CHIPS (sector / tag / badge) ======= */
/* ========================================== */

.e-3427fe60 .sector-chip
{
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px 7px 11px;
	background: rgba(255, 254, 252, 0.94);
	backdrop-filter: blur(10px) saturate(180%);
	-webkit-backdrop-filter: blur(10px) saturate(180%);
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	color: var(--ot-text-1);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.e-3427fe60 .sector-chip > i
{
	font-size: 13px;
	color: var(--ot-brand);
}

/* Tag (gore desno na hero) */

.e-3427fe60 .tag-chip
{
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 2;
	padding: 7px 13px;
	background: var(--ot-brand);
	border-radius: 100px;
	font-size: 10.5px;
	font-weight: 700;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* Badge (privremena napomena, npr. "Samo još jedna soba") */

.e-3427fe60 .badge-chip
{
	position: absolute;
	bottom: 18px;
	right: 18px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px 8px 12px;
	background: rgba(20, 18, 16, 0.65);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.e-3427fe60 .badge-pulse
{
	position: relative;
	display: inline-flex;
	width: 7px;
	height: 7px;
	background: var(--ot-brand);
	border-radius: 50%;
	flex-shrink: 0;
}

.e-3427fe60 .badge-pulse::before
{
	content: '';
	position: absolute;
	inset: -2px;
	background: var(--ot-brand);
	border-radius: 50%;
	opacity: 0.6;
	animation: e-3427fe60-pulse 1.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes e-3427fe60-pulse
{
	0%   { transform: scale(1);   opacity: 0.6; }
	70%  { transform: scale(2.2); opacity: 0; }
	100% { transform: scale(2.2); opacity: 0; }
}

/* Hero caption (preko slike) */

.e-3427fe60 .hero-caption
{
	position: absolute;
	left: 28px;
	right: 200px;
	bottom: 24px;
	z-index: 2;
	font-family: var(--ot-font-secondary);
	font-size: 24px;
	font-weight: 400;
	letter-spacing: -0.018em;
	line-height: 1.2;
	color: white;
	font-variation-settings: 'opsz' 144;
	text-shadow: 0 2px 12px rgba(20, 18, 16, 0.4);
}

/* ===== SEE-ALL CTA ===== */

.e-3427fe60 .see-all
{
	position: absolute;
	bottom: 24px;
	right: 24px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px 10px 14px;
	background: rgba(255, 254, 252, 0.94);
	backdrop-filter: blur(12px) saturate(180%);
	-webkit-backdrop-filter: blur(12px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 100px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ot-text-1);
	letter-spacing: 0.005em;
	cursor: pointer;
	transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1), color 240ms, gap 240ms, transform 240ms;
}

.e-3427fe60 .see-all:hover
{
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
	border-color: var(--ot-text-1);
	gap: 10px;
	transform: translateY(-1px);
}

.e-3427fe60 .see-all > i
{
	font-size: 16px;
}

.e-3427fe60 .see-all-count
{
	display: inline-flex;
	align-items: center;
	min-width: 22px;
	padding: 1px 7px;
	background: var(--ot-brand);
	border-radius: 100px;
	font-family: var(--ot-font-secondary);
	font-size: 10.5px;
	font-weight: 500;
	color: white;
	font-variation-settings: 'opsz' 144;
	letter-spacing: 0;
}

/* ===== THUMB CHIPS ===== */

.e-3427fe60 .thumb-tag
{
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 5px 10px;
	background: var(--ot-brand);
	border-radius: 100px;
	font-size: 9.5px;
	font-weight: 700;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.e-3427fe60 .thumb-badge
{
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 9px 5px 8px;
	background: rgba(20, 18, 16, 0.7);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 100px;
	font-size: 9.5px;
	font-weight: 700;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.e-3427fe60 .thumb-caption
{
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 12px;
	z-index: 2;
	font-size: 11.5px;
	font-weight: 600;
	color: white;
	letter-spacing: 0.005em;
	text-shadow: 0 1px 8px rgba(20, 18, 16, 0.4);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Last thumb "+N more" overlay */

.e-3427fe60 .thumb-more
{
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background: rgba(20, 18, 16, 0.72);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	color: white;
	transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-3427fe60 .thumb:hover .thumb-more
{
	background: rgba(20, 18, 16, 0.85);
}

.e-3427fe60 .thumb-more-count
{
	font-family: var(--ot-font-secondary);
	font-size: 36px;
	font-weight: 400;
	letter-spacing: -0.025em;
	font-variation-settings: 'opsz' 144;
	line-height: 1;
}

.e-3427fe60 .thumb-more-label
{
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	opacity: 0.85;
}

/* ===== EMPTY STATE ===== */

.e-3427fe60 .empty
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 280px;
	padding: 40px;
	background: var(--ot-bg-2);
	border: 1px dashed var(--ot-bg-3-border);
	border-radius: var(--ot-radius-l);
	color: var(--ot-text-3);
	font-size: 13px;
	font-weight: 500;
}

.e-3427fe60 .empty > i
{
	font-size: 32px;
	opacity: 0.6;
}

/* ========================================== */
/* ===== LIGHTBOX =========================== */
/* ========================================== */

.e-3427fe60 .lightbox
{
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 13, 11, 0.94);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	animation: e-3427fe60-fade 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes e-3427fe60-fade
{
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Close button */

.e-3427fe60 .lightbox-close
{
	position: fixed;
	top: 24px;
	right: 24px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	color: white;
	cursor: pointer;
	transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 220ms;
}

.e-3427fe60 .lightbox-close:hover
{
	background: white;
	color: var(--ot-text-1);
	transform: rotate(90deg);
}

.e-3427fe60 .lightbox-close > i
{
	font-size: 22px;
}

/* Counter */

.e-3427fe60 .lightbox-counter
{
	position: fixed;
	top: 32px;
	left: 32px;
	z-index: 2;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	color: white;
	font-family: var(--ot-font-secondary);
	font-variation-settings: 'opsz' 144;
}

.e-3427fe60 .lightbox-counter-num
{
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -0.025em;
}

.e-3427fe60 .lightbox-counter-sep
{
	font-size: 16px;
	opacity: 0.5;
}

.e-3427fe60 .lightbox-counter-total
{
	font-size: 15px;
	opacity: 0.6;
}

/* Arrows */

.e-3427fe60 .lightbox-arrow
{
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	color: white;
	cursor: pointer;
	transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms, transform 220ms;
}

.e-3427fe60 .lightbox-arrow:hover
{
	background: white;
	color: var(--ot-text-1);
	border-color: white;
	transform: translateY(-50%) scale(1.06);
}

.e-3427fe60 .lightbox-arrow-prev { left: 32px; }
.e-3427fe60 .lightbox-arrow-next { right: 32px; }

.e-3427fe60 .lightbox-arrow > i
{
	font-size: 22px;
}

/* Stage (image + info) */

.e-3427fe60 .lightbox-stage
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	max-width: calc(100vw - 200px);
	max-height: calc(100vh - 100px);
}

.e-3427fe60 .lightbox-stage > img
{
	max-width: 100%;
	max-height: calc(100vh - 200px);
	height: auto;
	border-radius: var(--ot-radius-m);
	box-shadow: 0 24px 80px -20px rgba(0, 0, 0, 0.6);
	display: block;
}

/* Lightbox info row */

.e-3427fe60 .lightbox-info
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	max-width: 720px;
	text-align: center;
}

.e-3427fe60 .lightbox-info-chips
{
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.e-3427fe60 .lightbox-chip
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 10px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 100px;
	font-size: 10.5px;
	font-weight: 700;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.e-3427fe60 .lightbox-chip > i
{
	font-size: 13px;
	opacity: 0.85;
}

.e-3427fe60 .lightbox-chip-tag
{
	background: var(--ot-brand);
	border-color: transparent;
}

.e-3427fe60 .lightbox-chip-badge
{
	background: rgba(255, 255, 255, 0.06);
}

.e-3427fe60 .lightbox-caption
{
	font-family: var(--ot-font-secondary);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.012em;
	color: rgba(255, 255, 255, 0.92);
	margin: 0;
	font-variation-settings: 'opsz' 144;
}

/* ========================================== */
/* ===== RESPONSIVE ========================= */
/* ========================================== */

@media (max-width: 1100px)
{
	.e-3427fe60 .grid
	{
		grid-template-columns: 1fr;
		grid-template-rows: 380px 280px;
		min-height: auto;
	}

	.e-3427fe60 .thumbs
	{
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: 1fr;
	}

	.e-3427fe60 .hero-caption
	{
		font-size: 18px;
		left: 20px;
		right: 160px;
		bottom: 18px;
	}
}

@media (max-width: 700px)
{
	.e-3427fe60 .grid
	{
		grid-template-rows: 320px auto;
		gap: 8px;
	}

	.e-3427fe60 .thumbs
	{
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 1fr 1fr;
	}

	.e-3427fe60 .hero-caption
	{
		display: none;
	}

	.e-3427fe60 .see-all
	{
		bottom: 16px;
		right: 16px;
	}

	.e-3427fe60 .lightbox-close
	{
		top: 16px;
		right: 16px;
		width: 40px;
		height: 40px;
	}

	.e-3427fe60 .lightbox-counter
	{
		top: 22px;
		left: 16px;
	}

	.e-3427fe60 .lightbox-counter-num { font-size: 20px; }
	.e-3427fe60 .lightbox-counter-total { font-size: 13px; }

	.e-3427fe60 .lightbox-arrow
	{
		width: 44px;
		height: 44px;
	}

	.e-3427fe60 .lightbox-arrow-prev { left: 12px; }
	.e-3427fe60 .lightbox-arrow-next { right: 12px; }

	.e-3427fe60 .lightbox-stage
	{
		max-width: calc(100vw - 32px);
	}
}

.e-dd65207
{
	display: block;
	width: 100%;
}

/* ========================================== */
/* ===== CHIPS VARIANT (default) ============ */
/* ========================================== */

.e-dd65207 > .holder.variant-chips
{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.e-dd65207 > .holder.variant-chips .item
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px 9px 12px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 100px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ot-text-1);
	letter-spacing: -0.005em;
	transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms;
}

.e-dd65207 > .holder.variant-chips .item:hover
{
	background: var(--ot-bg-1);
	border-color: var(--ot-bg-3-border);
}

.e-dd65207 > .holder.variant-chips .item-icon
{
	display: inline-flex;
	font-size: 16px;
	color: var(--ot-brand);
	flex-shrink: 0;
	font-variation-settings: 'FILL' 0;
}

/* Accent variants on chips */

.e-dd65207 > .holder.variant-chips .item.accent-brand
{
	background: var(--ot-brand-opacity);
	border-color: transparent;
}

.e-dd65207 > .holder.variant-chips .item.accent-brand .item-icon,
.e-dd65207 > .holder.variant-chips .item.accent-brand .item-label
{
	color: var(--ot-brand);
}

.e-dd65207 > .holder.variant-chips .item.accent-green
{
	background: rgba(20, 144, 95, 0.1);
	border-color: transparent;
}

.e-dd65207 > .holder.variant-chips .item.accent-green .item-icon,
.e-dd65207 > .holder.variant-chips .item.accent-green .item-label
{
	color: rgba(20, 144, 95, 1);
}

.e-dd65207 > .holder.variant-chips .item.accent-gold
{
	background: rgba(170, 130, 60, 0.1);
	border-color: transparent;
}

.e-dd65207 > .holder.variant-chips .item.accent-gold .item-icon,
.e-dd65207 > .holder.variant-chips .item.accent-gold .item-label
{
	color: rgba(170, 130, 60, 1);
}

.e-dd65207 > .holder.variant-chips .item.accent-dark
{
	background: var(--ot-text-1);
	border-color: var(--ot-text-1);
}

.e-dd65207 > .holder.variant-chips .item.accent-dark .item-icon,
.e-dd65207 > .holder.variant-chips .item.accent-dark .item-label
{
	color: var(--ot-bg-1);
}

/* ========================================== */
/* ===== BULLETS VARIANT (inline · row) ===== */
/* ========================================== */

.e-dd65207 > .holder.variant-bullets
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 18px;
}

.e-dd65207 > .holder.variant-bullets .item
{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ot-text-2);
	letter-spacing: -0.005em;
	position: relative;
}

.e-dd65207 > .holder.variant-bullets .item:not(:last-child)::after
{
	content: '';
	position: absolute;
	right: -12px;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 3px;
	background: var(--ot-bg-3-border);
	border-radius: 50%;
}

.e-dd65207 > .holder.variant-bullets .item-icon
{
	font-size: 16px;
	color: var(--ot-brand);
	flex-shrink: 0;
}

.e-dd65207 > .holder.variant-bullets .item.accent-green .item-icon { color: rgba(20, 144, 95, 1); }
.e-dd65207 > .holder.variant-bullets .item.accent-gold  .item-icon { color: rgba(170, 130, 60, 1); }
.e-dd65207 > .holder.variant-bullets .item.accent-dark  .item-icon { color: var(--ot-text-1); }
.e-dd65207 > .holder.variant-bullets .item.accent-brand .item-icon { color: var(--ot-brand); }

/* ========================================== */
/* ===== CARDS VARIANT (mini cards row) ===== */
/* ========================================== */

.e-dd65207 > .holder.variant-cards
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
}

.e-dd65207 > .holder.variant-cards .item
{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
	transition: border-color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-dd65207 > .holder.variant-cards .item:hover
{
	border-color: var(--ot-bg-3-border);
}

.e-dd65207 > .holder.variant-cards .item-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
	font-size: 18px;
	flex-shrink: 0;
}

.e-dd65207 > .holder.variant-cards .item-label
{
	font-size: 13px;
	font-weight: 600;
	color: var(--ot-text-1);
	letter-spacing: -0.005em;
}

.e-dd65207 > .holder.variant-cards .item.accent-green .item-icon { background: rgba(20, 144, 95, 0.12); color: rgba(20, 144, 95, 1); }
.e-dd65207 > .holder.variant-cards .item.accent-gold  .item-icon { background: rgba(170, 130, 60, 0.12); color: rgba(170, 130, 60, 1); }
.e-dd65207 > .holder.variant-cards .item.accent-dark  .item-icon { background: var(--ot-bg-2); color: var(--ot-text-1); }
.e-dd65207 > .holder.variant-cards .item.accent-brand .item-icon { background: var(--ot-brand-opacity); color: var(--ot-brand); }

.e-3479b6b6
{
	display: block;
	width: 100%;
}

/* ===== HOLDER ===== */

.e-3479b6b6 > .holder.variant-split
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-l);
	overflow: hidden;
}

.e-3479b6b6 > .holder.variant-stacked
{
	display: flex;
	flex-direction: column;
	gap: 0;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-l);
	overflow: hidden;
}

/* ===== COLUMN ===== */

.e-3479b6b6 .column
{
	display: flex;
	flex-direction: column;
	padding: 28px 30px;
	min-width: 0;
	position: relative;
}

.e-3479b6b6 > .holder.variant-split .column-good
{
	border-right: 1px solid var(--ot-bg-2-border);
}

.e-3479b6b6 > .holder.variant-stacked .column-good
{
	border-bottom: 1px solid var(--ot-bg-2-border);
}

/* Top accent line per column */

.e-3479b6b6 .column::before
{
	content: '';
	position: absolute;
	top: 0;
	left: 30px;
	width: 56px;
	height: 2px;
}

.e-3479b6b6 .column-good::before
{
	background: rgba(20, 144, 95, 1);
}

.e-3479b6b6 .column-bad::before
{
	background: var(--ot-text-3);
}

/* ===== HEAD ===== */

.e-3479b6b6 .column-head
{
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}

.e-3479b6b6 .column-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	flex-shrink: 0;
}

.e-3479b6b6 .column-good .column-icon
{
	background: rgba(20, 144, 95, 0.12);
}

.e-3479b6b6 .column-bad .column-icon
{
	background: var(--ot-bg-2);
}

.e-3479b6b6 .column-icon > i
{
	font-size: 20px;
	font-variation-settings: 'FILL' 1;
}

.e-3479b6b6 .column-good .column-icon > i
{
	color: rgba(20, 144, 95, 1);
}

.e-3479b6b6 .column-bad .column-icon > i
{
	color: var(--ot-text-3);
}

.e-3479b6b6 .column-title
{
	font-family: var(--ot-font-secondary);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.012em;
	color: var(--ot-text-1);
	margin: 0;
	font-variation-settings: 'opsz' 144;
}

/* ===== ITEMS ===== */

.e-3479b6b6 .items
{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.e-3479b6b6 .item
{
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 6px 0;
}

/* Item mark */

.e-3479b6b6 .item-mark
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 2px;
}

.e-3479b6b6 .column-good .item-mark
{
	background: rgba(20, 144, 95, 0.12);
}

.e-3479b6b6 .column-bad .item-mark
{
	background: var(--ot-bg-2);
}

.e-3479b6b6 .item-mark > i
{
	font-size: 14px;
}

.e-3479b6b6 .column-good .item-mark > i
{
	color: rgba(20, 144, 95, 1);
}

.e-3479b6b6 .column-bad .item-mark > i
{
	color: var(--ot-text-3);
}

/* Item text */

.e-3479b6b6 .item-text
{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
	line-height: 1.45;
}

.e-3479b6b6 .item-label
{
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: -0.005em;
}

.e-3479b6b6 .column-bad .item-label
{
	color: var(--ot-text-2);
}

.e-3479b6b6 .item-note
{
	font-size: 11.5px;
	font-weight: 500;
	color: var(--ot-text-3);
	letter-spacing: 0.005em;
}

/* Item price (npr "doplata 280 €") */

.e-3479b6b6 .item-price
{
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	background: var(--ot-bg-2);
	border-radius: 100px;
	font-family: var(--ot-font-secondary);
	font-size: 11.5px;
	font-weight: 500;
	color: var(--ot-text-1);
	font-variation-settings: 'opsz' 144;
	letter-spacing: -0.005em;
	flex-shrink: 0;
	white-space: nowrap;
	margin-top: 2px;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 700px)
{
	.e-3479b6b6 > .holder.variant-split
	{
		grid-template-columns: 1fr;
	}

	.e-3479b6b6 > .holder.variant-split .column-good
	{
		border-right: 0;
		border-bottom: 1px solid var(--ot-bg-2-border);
	}

	.e-3479b6b6 .column
	{
		padding: 22px 22px;
	}

	.e-3479b6b6 .column::before
	{
		left: 22px;
	}
}

.e-728156ea
{
	display: block;
	width: 100%;
}

.e-728156ea > .holder
{
	width: 100%;
}

/* ===== LAYOUT ===== */

.e-728156ea .layout
{
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 0;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-l);
	overflow: hidden;
	min-height: 460px;
}

/* ========================================== */
/* ===== STAGE (map area) =================== */
/* ========================================== */

.e-728156ea .stage
{
	position: relative;
	background: var(--ot-bg-3);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

/* Decorative grid (when no image) */

.e-728156ea .stage-grid
{
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(255, 254, 252, 0.0) 0%, rgba(255, 254, 252, 0.0) 100%),
		repeating-linear-gradient(0deg,   rgba(20, 18, 16, 0.04) 0,  rgba(20, 18, 16, 0.04) 1px, transparent 1px, transparent 60px),
		repeating-linear-gradient(90deg,  rgba(20, 18, 16, 0.04) 0,  rgba(20, 18, 16, 0.04) 1px, transparent 1px, transparent 60px),
		radial-gradient(circle at 50% 50%, var(--ot-bg-2) 0%, var(--ot-bg-3) 60%, var(--ot-bg-3) 100%);
}

.e-728156ea .stage::after
{
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 50% 50%, transparent 30%, rgba(20, 18, 16, 0.05) 70%, rgba(20, 18, 16, 0.18) 100%);
	pointer-events: none;
}

/* Address chip */

.e-728156ea .address-chip
{
	position: absolute;
	top: 22px;
	left: 22px;
	right: 22px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 12px 18px 12px 14px;
	background: rgba(255, 254, 252, 0.96);
	backdrop-filter: blur(12px) saturate(180%);
	-webkit-backdrop-filter: blur(12px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: var(--ot-radius-m);
	max-width: fit-content;
}

.e-728156ea .address-icon
{
	font-size: 20px;
	color: var(--ot-brand);
	flex-shrink: 0;
	font-variation-settings: 'FILL' 1;
}

.e-728156ea .address-text
{
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	line-height: 1.3;
}

.e-728156ea .address-title
{
	font-family: var(--ot-font-secondary);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.012em;
	color: var(--ot-text-1);
	font-variation-settings: 'opsz' 144;
}

.e-728156ea .address-line
{
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Pin (center) */

.e-728156ea .pin
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -100%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.e-728156ea .pin-icon
{
	position: relative;
	z-index: 3;
	font-size: 56px;
	color: var(--ot-brand);
	font-variation-settings: 'FILL' 1;
	filter: drop-shadow(0 4px 16px rgba(20, 18, 16, 0.25));
}

.e-728156ea .pin-pulse
{
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--ot-brand);
	opacity: 0.4;
	animation: e-728156ea-pulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.e-728156ea .pin-pulse-2
{
	animation-delay: 1.2s;
}

@keyframes e-728156ea-pulse
{
	0%   { transform: translateX(-50%) scale(0.8); opacity: 0.5; }
	70%  { transform: translateX(-50%) scale(3.5); opacity: 0; }
	100% { transform: translateX(-50%) scale(3.5); opacity: 0; }
}

/* Open in maps link */

.e-728156ea .open-link
{
	position: absolute;
	bottom: 22px;
	right: 22px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px 9px 14px;
	background: rgba(255, 254, 252, 0.96);
	backdrop-filter: blur(12px) saturate(180%);
	-webkit-backdrop-filter: blur(12px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 100px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ot-text-1);
	letter-spacing: 0.005em;
	transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1), color 240ms, gap 240ms, transform 240ms;
}

.e-728156ea .open-link:hover
{
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
	border-color: var(--ot-text-1);
	gap: 10px;
	transform: translateY(-1px);
}

.e-728156ea .open-link > i
{
	font-size: 14px;
}

/* ========================================== */
/* ===== ASIDE (distances + cities) ========= */
/* ========================================== */

.e-728156ea .aside
{
	display: flex;
	flex-direction: column;
	gap: 0;
	border-left: 1px solid var(--ot-bg-2-border);
	min-width: 0;
}

.e-728156ea .distances
{
	padding: 24px 26px;
}

.e-728156ea .cities
{
	padding: 24px 26px;
	border-top: 1px solid var(--ot-bg-2-border);
	flex-shrink: 0;
}

/* Aside heading */

.e-728156ea .aside-head
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	font-size: 11px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

.e-728156ea .aside-head > i
{
	font-size: 14px;
	color: var(--ot-brand);
}

/* Distances list */

.e-728156ea .items
{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.e-728156ea .item
{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--ot-bg-2-border);
}

.e-728156ea .item:last-child
{
	border-bottom: 0;
}

.e-728156ea .item-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--ot-bg-2);
	flex-shrink: 0;
}

.e-728156ea .item.is-highlight .item-icon
{
	background: var(--ot-brand-opacity);
}

.e-728156ea .item-icon > i
{
	font-size: 15px;
	color: var(--ot-text-2);
}

.e-728156ea .item.is-highlight .item-icon > i
{
	color: var(--ot-brand);
}

.e-728156ea .item-text
{
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	flex: 1;
	line-height: 1.35;
}

.e-728156ea .item-label
{
	font-size: 13px;
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: -0.005em;
}

.e-728156ea .item.is-highlight .item-label
{
	font-weight: 600;
}

.e-728156ea .item-note
{
	font-size: 11px;
	font-weight: 500;
	color: var(--ot-text-3);
	letter-spacing: 0.005em;
}

.e-728156ea .item-distance
{
	font-family: var(--ot-font-secondary);
	font-size: 13px;
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: -0.005em;
	font-variation-settings: 'opsz' 144;
	flex-shrink: 0;
	white-space: nowrap;
}

.e-728156ea .item.is-highlight .item-distance
{
	color: var(--ot-brand);
}

/* City pills */

.e-728156ea .city-pills
{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.e-728156ea .city-pill
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px 6px 12px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 100px;
	font-size: 12px;
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: -0.005em;
	transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1), border-color 200ms;
}

.e-728156ea .city-pill:hover
{
	background: var(--ot-bg-1);
	border-color: var(--ot-bg-3-border);
}

.e-728156ea .city-distance
{
	font-family: var(--ot-font-secondary);
	font-size: 11px;
	font-weight: 500;
	color: var(--ot-text-3);
	font-variation-settings: 'opsz' 144;
	letter-spacing: 0;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 900px)
{
	.e-728156ea .layout
	{
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.e-728156ea .stage
	{
		min-height: 320px;
	}

	.e-728156ea .aside
	{
		border-left: 0;
		border-top: 1px solid var(--ot-bg-2-border);
	}

	.e-728156ea .pin-icon
	{
		font-size: 44px;
	}
}

.e-1b09e47d
{
	display: block;
	width: 100%;
}

.e-1b09e47d > .holder
{
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 32px 36px;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-l);
}

/* ===== HEAD ===== */

.e-1b09e47d .head
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.e-1b09e47d .brand
{
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
}

.e-1b09e47d .brand-logo
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: var(--ot-radius-m);
	background-size: cover;
	background-position: center;
	background-color: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	flex-shrink: 0;
}

.e-1b09e47d .brand-logo-fallback > i
{
	font-size: 28px;
	color: var(--ot-text-3);
}

.e-1b09e47d .brand-text
{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	line-height: 1.25;
}

.e-1b09e47d .brand-since
{
	font-size: 10.5px;
	font-weight: 700;
	color: var(--ot-brand);
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

.e-1b09e47d .brand-name
{
	font-family: var(--ot-font-secondary);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.018em;
	color: var(--ot-text-1);
	margin: 0;
	font-variation-settings: 'opsz' 144;
}

.e-1b09e47d .brand-tagline
{
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ot-text-3);
	letter-spacing: 0.005em;
}

/* Head CTA */

.e-1b09e47d .head-cta
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	background: var(--ot-text-1);
	border-radius: 100px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ot-bg-1);
	letter-spacing: 0.005em;
	flex-shrink: 0;
	transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1), gap 240ms;
}

.e-1b09e47d .head-cta:hover
{
	background: var(--ot-brand);
	gap: 12px;
}

.e-1b09e47d .head-cta > i
{
	font-size: 16px;
}

/* ===== DESCRIPTION ===== */

.e-1b09e47d .description
{
	font-size: 14px;
	line-height: 1.65;
	color: var(--ot-text-2);
	margin: 0;
	max-width: 760px;
}

/* ===== STATS ===== */

.e-1b09e47d .stats
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	padding: 18px 0;
	border-top: 1px solid var(--ot-bg-2-border);
	border-bottom: 1px solid var(--ot-bg-2-border);
}

.e-1b09e47d .stat
{
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 20px;
	position: relative;
	line-height: 1.2;
}

.e-1b09e47d .stat:first-child
{
	padding-left: 0;
}

.e-1b09e47d .stat:not(:last-child)::after
{
	content: '';
	position: absolute;
	right: 0;
	top: 4px;
	bottom: 4px;
	width: 1px;
	background: var(--ot-bg-2-border);
}

.e-1b09e47d .stat-value
{
	font-family: var(--ot-font-secondary);
	font-size: 28px;
	font-weight: 400;
	letter-spacing: -0.025em;
	color: var(--ot-text-1);
	font-variation-settings: 'opsz' 144;
}

.e-1b09e47d .stat-label
{
	font-size: 10.5px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin-top: 4px;
}

/* ===== FOOT ===== */

.e-1b09e47d .foot
{
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 28px;
}

/* License */

.e-1b09e47d .license
{
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}

.e-1b09e47d .license-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(20, 144, 95, 0.12);
	flex-shrink: 0;
}

.e-1b09e47d .license-icon > i
{
	font-size: 19px;
	color: rgba(20, 144, 95, 1);
	font-variation-settings: 'FILL' 1;
}

.e-1b09e47d .license-text
{
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	line-height: 1.4;
}

.e-1b09e47d .license-label
{
	font-size: 10.5px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.e-1b09e47d .license-code
{
	font-family: var(--ot-font-secondary);
	font-size: 14px;
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: -0.005em;
	font-variation-settings: 'opsz' 144;
}

.e-1b09e47d .license-issuer
{
	font-size: 12px;
	font-weight: 600;
	color: var(--ot-text-2);
}

.e-1b09e47d .license-note
{
	font-size: 11px;
	font-weight: 500;
	color: var(--ot-text-3);
	margin-top: 2px;
}

/* Contacts */

.e-1b09e47d .contacts
{
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.e-1b09e47d .contact
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px 10px 12px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
	color: inherit;
	transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1), border-color 200ms, transform 200ms;
}

.e-1b09e47d .contact:hover
{
	background: var(--ot-bg-1);
	border-color: var(--ot-bg-3-border);
	transform: translateY(-1px);
}

.e-1b09e47d .contact-icon
{
	font-size: 18px;
	color: var(--ot-brand);
}

.e-1b09e47d .contact-text
{
	display: flex;
	flex-direction: column;
	gap: 0;
	line-height: 1.3;
}

.e-1b09e47d .contact-label
{
	font-size: 9.5px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.e-1b09e47d .contact-value
{
	font-size: 13px;
	font-weight: 600;
	color: var(--ot-text-1);
	letter-spacing: -0.005em;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 800px)
{
	.e-1b09e47d > .holder
	{
		padding: 24px 22px;
	}

	.e-1b09e47d .head
	{
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	.e-1b09e47d .stats
	{
		grid-template-columns: repeat(2, 1fr);
		gap: 16px 0;
	}

	.e-1b09e47d .stat
	{
		padding: 0 14px;
	}

	.e-1b09e47d .stat:nth-child(2n)::after
	{
		display: none;
	}

	.e-1b09e47d .foot
	{
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.e-1b09e47d .brand-name
	{
		font-size: 19px;
	}

	.e-1b09e47d .stat-value
	{
		font-size: 24px;
	}
}

.e-1bf3dc14
{
	display: block;
	width: 100%;
}

.e-1bf3dc14 > .holder
{
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* ========================================== */
/* ===== STEPS (vertical timeline) ========== */
/* ========================================== */

.e-1bf3dc14 .steps
{
	display: flex;
	flex-direction: column;
	gap: 0;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-l);
	padding: 28px 30px;
}

.e-1bf3dc14 .step
{
	display: flex;
	gap: 18px;
	min-height: 72px;
}

/* Marker (number circle + connector line) */

.e-1bf3dc14 .step-marker
{
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	width: 36px;
}

.e-1bf3dc14 .step-num
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-3-border);
	font-family: var(--ot-font-secondary);
	font-size: 14px;
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: -0.005em;
	font-variation-settings: 'opsz' 144;
}

.e-1bf3dc14 .step:first-child .step-num
{
	background: var(--ot-brand);
	border-color: var(--ot-brand);
	color: white;
}

.e-1bf3dc14 .step-line
{
	flex: 1;
	width: 1px;
	background: var(--ot-bg-2-border);
	margin: 6px 0;
}

/* Body */

.e-1bf3dc14 .step-body
{
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-bottom: 22px;
	flex: 1;
	min-width: 0;
}

.e-1bf3dc14 .step:last-child .step-body
{
	padding-bottom: 0;
}

.e-1bf3dc14 .step-head
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.e-1bf3dc14 .step-icon
{
	font-size: 18px;
	color: var(--ot-brand);
	flex-shrink: 0;
}

.e-1bf3dc14 .step-title
{
	font-family: var(--ot-font-secondary);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.012em;
	color: var(--ot-text-1);
	margin: 0;
	font-variation-settings: 'opsz' 144;
}

.e-1bf3dc14 .step-description
{
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ot-text-2);
	margin: 0;
}

.e-1bf3dc14 .step-meta
{
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
}

.e-1bf3dc14 .step-amount
{
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	background: var(--ot-brand-opacity);
	border-radius: 100px;
	font-family: var(--ot-font-secondary);
	font-size: 13px;
	font-weight: 500;
	color: var(--ot-brand);
	letter-spacing: -0.005em;
	font-variation-settings: 'opsz' 144;
}

.e-1bf3dc14 .step-deadline
{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ot-text-3);
	letter-spacing: 0.005em;
}

.e-1bf3dc14 .step-deadline > i
{
	font-size: 14px;
}

/* ========================================== */
/* ===== METHODS GRID ======================= */
/* ========================================== */

.e-1bf3dc14 .methods
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.e-1bf3dc14 .method
{
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 20px;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
	transition: border-color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-1bf3dc14 .method:hover
{
	border-color: var(--ot-bg-3-border);
}

.e-1bf3dc14 .method-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--ot-bg-2);
	flex-shrink: 0;
}

.e-1bf3dc14 .method-icon > i
{
	font-size: 19px;
	color: var(--ot-text-1);
}

.e-1bf3dc14 .method-text
{
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	line-height: 1.4;
}

.e-1bf3dc14 .method-title
{
	font-family: var(--ot-font-secondary);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.012em;
	color: var(--ot-text-1);
	margin: 0;
	font-variation-settings: 'opsz' 144;
}

.e-1bf3dc14 .method-description
{
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ot-text-2);
	margin: 0;
}

.e-1bf3dc14 .method-note
{
	font-size: 11px;
	font-weight: 500;
	color: var(--ot-text-3);
	letter-spacing: 0.005em;
	margin-top: 2px;
}

/* ========================================== */
/* ===== NOTICE ============================= */
/* ========================================== */

.e-1bf3dc14 .notice
{
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 22px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
	border-left: 3px solid var(--ot-brand);
}

.e-1bf3dc14 .notice-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 2px;
}

.e-1bf3dc14 .notice-icon > i
{
	font-size: 20px;
	color: var(--ot-brand);
}

.e-1bf3dc14 .notice-text
{
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	flex: 1;
}

.e-1bf3dc14 .notice-title
{
	font-family: var(--ot-font-primary);
	font-size: 13px;
	font-weight: 700;
	color: var(--ot-text-1);
	margin: 0;
	letter-spacing: -0.005em;
}

.e-1bf3dc14 .notice-message
{
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--ot-text-2);
	margin: 0;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 700px)
{
	.e-1bf3dc14 .methods
	{
		grid-template-columns: 1fr;
	}

	.e-1bf3dc14 .steps
	{
		padding: 22px 20px;
	}
}

.e-5d54262c
{
	display: block;
	width: 100%;
}

.e-5d54262c > .holder
{
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* ===== TABLE ===== */

.e-5d54262c .table
{
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-l);
	overflow: hidden;
}

/* ===== HEAD ===== */

.e-5d54262c .table-head
{
	display: grid;
	grid-template-columns: 2fr 1.4fr 1.2fr 1fr;
	gap: 0;
	padding: 14px 24px;
	background: var(--ot-bg-2);
	border-bottom: 1px solid var(--ot-bg-2-border);
}

.e-5d54262c .head-cell
{
	font-size: 10.5px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.e-5d54262c .head-cell-price
{
	text-align: right;
}

/* ===== ROW ===== */

.e-5d54262c .table-body
{
	display: flex;
	flex-direction: column;
}

.e-5d54262c .row
{
	display: grid;
	grid-template-columns: 2fr 1.4fr 1.2fr 1fr;
	gap: 0;
	align-items: center;
	padding: 18px 24px;
	border-bottom: 1px solid var(--ot-bg-2-border);
	transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1);
	position: relative;
}

.e-5d54262c .row:last-child
{
	border-bottom: 0;
}

.e-5d54262c .row:hover
{
	background: var(--ot-bg-2);
}

.e-5d54262c .row.status-sold
{
	opacity: 0.55;
}

.e-5d54262c .row.has-badge::before
{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--ot-brand);
}

/* ===== CELL ===== */

.e-5d54262c .cell
{
	min-width: 0;
}

/* Period */

.e-5d54262c .cell-period
{
	display: flex;
	flex-direction: column;
	gap: 3px;
	line-height: 1.3;
}

.e-5d54262c .period-value
{
	font-family: var(--ot-font-secondary);
	font-size: 16px;
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: -0.012em;
	font-variation-settings: 'opsz' 144;
}

.e-5d54262c .period-days
{
	font-size: 11px;
	font-weight: 600;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.e-5d54262c .period-badge
{
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 3px 9px;
	border-radius: 100px;
	font-size: 9.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-top: 4px;
}

.e-5d54262c .period-badge.tone-brand  { background: var(--ot-brand-opacity);    color: var(--ot-brand); }
.e-5d54262c .period-badge.tone-dark   { background: var(--ot-text-1);            color: var(--ot-bg-1); }
.e-5d54262c .period-badge.tone-green  { background: rgba(20, 144, 95, 0.12);     color: rgba(20, 144, 95, 1); }
.e-5d54262c .period-badge.tone-gold   { background: rgba(170, 130, 60, 0.12);    color: rgba(170, 130, 60, 1); }

/* Room */

.e-5d54262c .cell-room
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: -0.005em;
}

.e-5d54262c .cell-room > .cell-icon
{
	font-size: 17px;
	color: var(--ot-text-3);
}

/* Price */

.e-5d54262c .cell-price
{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;
	line-height: 1.0;
	text-align: right;
}

.e-5d54262c .price-old
{
	font-size: 11px;
	font-weight: 500;
	color: var(--ot-text-3);
	text-decoration: line-through;
	margin-bottom: 2px;
}

.e-5d54262c .price-row
{
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}

.e-5d54262c .price-from
{
	font-size: 9.5px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.e-5d54262c .price-value
{
	font-family: var(--ot-font-secondary);
	font-size: 22px;
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: -0.018em;
	font-variation-settings: 'opsz' 144;
}

.e-5d54262c .price-savings
{
	font-size: 10.5px;
	font-weight: 600;
	color: var(--ot-brand);
	letter-spacing: 0.005em;
	margin-top: 4px;
}

/* Status */

.e-5d54262c .cell-status
{
	display: flex;
	justify-content: flex-end;
}

.e-5d54262c .status-pill
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 10px;
	background: var(--ot-bg-2);
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	color: var(--ot-text-2);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.e-5d54262c .status-pill > i
{
	font-size: 13px;
	font-variation-settings: 'FILL' 1;
}

/* Status colors */

.e-5d54262c .row.status-available .status-pill
{
	background: rgba(20, 144, 95, 0.12);
	color: rgba(20, 144, 95, 1);
}

.e-5d54262c .row.status-last .status-pill
{
	background: var(--ot-brand-opacity);
	color: var(--ot-brand);
}

.e-5d54262c .row.status-sold .status-pill
{
	background: var(--ot-bg-3);
	color: var(--ot-text-3);
}

.e-5d54262c .row.status-soon .status-pill
{
	background: rgba(170, 130, 60, 0.12);
	color: rgba(170, 130, 60, 1);
}

/* ===== NOTE ===== */

.e-5d54262c .note
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 500;
	color: var(--ot-text-3);
	margin: 0;
	padding: 0 4px;
}

.e-5d54262c .note > i
{
	font-size: 14px;
	color: var(--ot-text-3);
}

/* ===== RESPONSIVE (cards on mobile) ===== */

@media (max-width: 800px)
{
	.e-5d54262c .table-head
	{
		display: none;
	}

	.e-5d54262c .row
	{
		grid-template-columns: 1fr 1fr;
		gap: 12px 16px;
		padding: 18px 20px;
	}

	.e-5d54262c .cell-period
	{
		grid-column: 1 / -1;
		padding-bottom: 12px;
		border-bottom: 1px solid var(--ot-bg-2-border);
	}

	.e-5d54262c .cell-room
	{
		grid-column: 1 / 2;
	}

	.e-5d54262c .cell-status
	{
		grid-column: 2 / 3;
	}

	.e-5d54262c .cell-price
	{
		grid-column: 1 / -1;
		align-items: flex-start;
		text-align: left;
	}
}

.e-1669e408
{
	display: block;
	width: 100%;
}

/* ===== HOLDER (sticky) ===== */

.e-1669e408 > .holder
{
	position: sticky;
	top: var(--sticky-top, 76px);
	z-index: 50;
	margin: 0 -8px;
	padding: 8px 8px;
	background: linear-gradient(180deg, var(--ot-bg-1) 70%, transparent 100%);
}

/* ===== BAR ===== */

.e-1669e408 .bar
{
	position: relative;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 100px;
	overflow: hidden;
}

/* Subtle edge fade for horizontal scroll */

.e-1669e408 .bar::before,
.e-1669e408 .bar::after
{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 32px;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-1669e408 .bar::before
{
	left: 0;
	background: linear-gradient(90deg, var(--ot-bg-1) 0%, transparent 100%);
}

.e-1669e408 .bar::after
{
	right: 0;
	background: linear-gradient(90deg, transparent 0%, var(--ot-bg-1) 100%);
}

/* ===== TRACK (horizontal scroll on mobile) ===== */

.e-1669e408 .track
{
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px;
	overflow-x: auto;
	scrollbar-width: none;
}

.e-1669e408 .track::-webkit-scrollbar
{
	display: none;
}

/* ===== TAB ===== */

.e-1669e408 .tab
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px 11px 16px;
	background: transparent;
	border: 0;
	border-radius: 100px;
	color: var(--ot-text-2);
	cursor: pointer;
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: -0.005em;
	white-space: nowrap;
	flex-shrink: 0;
	position: relative;
	transition: background 280ms cubic-bezier(0.22, 1, 0.36, 1), color 280ms;
}

.e-1669e408 .tab:hover
{
	background: var(--ot-bg-2);
	color: var(--ot-text-1);
}

.e-1669e408 .tab.is-active
{
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
	font-weight: 600;
}

/* ===== TAB ICON ===== */

.e-1669e408 .tab-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: var(--ot-text-3);
	transition: color 280ms;
}

.e-1669e408 .tab:hover .tab-icon
{
	color: var(--ot-brand);
}

.e-1669e408 .tab.is-active .tab-icon
{
	color: var(--ot-bg-1);
}

/* ===== TAB LABEL ===== */

.e-1669e408 .tab-label
{
	letter-spacing: -0.005em;
}

/* ===== TAB COUNT ===== */

.e-1669e408 .tab-count
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	padding: 1px 7px;
	background: var(--ot-bg-2);
	border-radius: 100px;
	font-family: var(--ot-font-secondary);
	font-size: 10.5px;
	font-weight: 500;
	color: var(--ot-text-2);
	font-variation-settings: 'opsz' 144;
	letter-spacing: 0;
	transition: background 280ms cubic-bezier(0.22, 1, 0.36, 1), color 280ms;
}

.e-1669e408 .tab.is-active .tab-count
{
	background: rgba(255, 254, 252, 0.18);
	color: var(--ot-bg-1);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 900px)
{
	.e-1669e408 > .holder
	{
		top: var(--sticky-top, 64px);
	}

	.e-1669e408 .bar::before,
	.e-1669e408 .bar::after
	{
		opacity: 1;
	}

	.e-1669e408 .tab
	{
		padding: 10px 14px 10px 12px;
		font-size: 12.5px;
	}
}

.e-58cd9997
{
	display: block;
	width: 100%;
}

/* ===== HOLDER ===== */

.e-58cd9997 > .holder
{
	position: relative;
	display: flex;
	align-items: stretch;
	min-height: 280px;
	border-radius: var(--ot-radius-l);
	overflow: hidden;
	background: var(--ot-bg-3);
	transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-58cd9997 > .holder:hover
{
	transform: translateY(-3px);
}

/* ===== COVER ===== */

.e-58cd9997 > .holder > .cover
{
	position: absolute;
	inset: 0;
	background-color: var(--ot-bg-3);
	overflow: hidden;
}

.e-58cd9997 > .holder > .cover::before
{
	content: '';
	position: absolute;
	inset: 0;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	transform: scale(1);
	transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 0;
}

.e-58cd9997 > .holder:hover > .cover::before
{
	transform: scale(1.05);
}

.e-58cd9997 > .holder > .cover > .cover-overlay
{
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Tones */

.e-58cd9997 > .holder.tone-dark > .cover > .cover-overlay
{
	background: linear-gradient(180deg, rgba(20, 18, 16, 0.25) 0%, rgba(20, 18, 16, 0.45) 60%, rgba(20, 18, 16, 0.78) 100%);
}

.e-58cd9997 > .holder.tone-light > .cover > .cover-overlay
{
	background: linear-gradient(180deg, rgba(255, 254, 252, 0.0) 0%, rgba(255, 254, 252, 0.6) 65%, rgba(255, 254, 252, 0.92) 100%);
}

.e-58cd9997 > .holder.tone-brand > .cover > .cover-overlay
{
	background: linear-gradient(180deg, rgba(237, 28, 36, 0.5) 0%, rgba(237, 28, 36, 0.85) 100%);
}

.e-58cd9997 > .holder.tone-gold > .cover > .cover-overlay
{
	background: linear-gradient(180deg, rgba(170, 130, 60, 0.5) 0%, rgba(170, 130, 60, 0.85) 100%);
}

/* No-image: pure tone background */

.e-58cd9997 > .holder.no-image
{
	background: var(--ot-bg-2);
}

.e-58cd9997 > .holder.no-image.tone-dark   { background: var(--ot-text-1); color: white; }
.e-58cd9997 > .holder.no-image.tone-light  { background: var(--ot-bg-2); }
.e-58cd9997 > .holder.no-image.tone-brand  { background: var(--ot-brand); color: white; }
.e-58cd9997 > .holder.no-image.tone-gold   { background: rgba(170, 130, 60, 1); color: white; }

/* Gradient variant — auto-applies gradient when no-image */

.e-58cd9997 > .holder.gradient
{
	background:
		linear-gradient(135deg, var(--ot-text-1) 0%, rgba(60, 50, 40, 1) 100%);
	color: white;
}

.e-58cd9997 > .holder.gradient.tone-brand
{
	background:
		linear-gradient(135deg, var(--ot-brand) 0%, rgba(170, 16, 24, 1) 100%);
}

.e-58cd9997 > .holder.gradient.tone-gold
{
	background:
		linear-gradient(135deg, rgba(170, 130, 60, 1) 0%, rgba(120, 90, 40, 1) 100%);
}

/* ===== CONTENT ===== */

.e-58cd9997 > .holder > .content
{
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px 36px;
	width: 100%;
	justify-content: flex-end;
}

.e-58cd9997 > .holder.align-center > .content
{
	align-items: center;
	text-align: center;
}

.e-58cd9997 .content-top
{
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.e-58cd9997 > .holder.align-center .content-top
{
	justify-content: center;
}

/* Meta chip */

.e-58cd9997 .meta
{
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	background: rgba(255, 254, 252, 0.96);
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	color: var(--ot-text-1);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.e-58cd9997 > .holder.tone-light .meta
{
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
}

/* Eyebrow */

.e-58cd9997 .eyebrow
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

.e-58cd9997 > .holder.tone-dark .eyebrow,
.e-58cd9997 > .holder.tone-brand .eyebrow,
.e-58cd9997 > .holder.tone-gold .eyebrow
{
	color: rgba(255, 254, 252, 0.85);
}

.e-58cd9997 > .holder.tone-light .eyebrow
{
	color: var(--ot-brand);
}

.e-58cd9997 .eyebrow > .eyebrow-mark
{
	width: 22px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

/* Title */

.e-58cd9997 .title
{
	font-family: var(--ot-font-secondary);
	font-size: 36px;
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 0;
	font-variation-settings: 'opsz' 144;
	max-width: 480px;
}

.e-58cd9997 > .holder.align-center .title
{
	max-width: 620px;
}

.e-58cd9997 > .holder.tone-dark .title,
.e-58cd9997 > .holder.tone-brand .title,
.e-58cd9997 > .holder.tone-gold .title
{
	color: white;
}

.e-58cd9997 > .holder.tone-light .title
{
	color: var(--ot-text-1);
}

.e-58cd9997 .title em
{
	font-style: italic;
	color: var(--ot-brand);
}

.e-58cd9997 > .holder.tone-brand .title em,
.e-58cd9997 > .holder.tone-gold .title em
{
	color: white;
	opacity: 0.85;
}

/* Description */

.e-58cd9997 .description
{
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
	max-width: 480px;
}

.e-58cd9997 > .holder.tone-dark .description,
.e-58cd9997 > .holder.tone-brand .description,
.e-58cd9997 > .holder.tone-gold .description
{
	color: rgba(255, 254, 252, 0.85);
}

.e-58cd9997 > .holder.tone-light .description
{
	color: var(--ot-text-2);
}

/* CTA */

.e-58cd9997 .cta
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	padding: 12px 22px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.005em;
	width: fit-content;
	transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1), color 240ms, transform 240ms, gap 240ms;
}

.e-58cd9997 > .holder.tone-dark .cta,
.e-58cd9997 > .holder.tone-brand .cta,
.e-58cd9997 > .holder.tone-gold .cta
{
	background: var(--ot-bg-1);
	color: var(--ot-text-1);
}

.e-58cd9997 > .holder.tone-dark .cta:hover,
.e-58cd9997 > .holder.tone-brand .cta:hover,
.e-58cd9997 > .holder.tone-gold .cta:hover
{
	background: var(--ot-brand);
	color: white;
	gap: 12px;
}

.e-58cd9997 > .holder.tone-light .cta
{
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
}

.e-58cd9997 > .holder.tone-light .cta:hover
{
	background: var(--ot-brand);
	color: white;
	gap: 12px;
}

.e-58cd9997 .cta > i
{
	font-size: 16px;
}

/* ========================================== */
/* ===== HORIZONTAL VARIANT ================= */
/* ========================================== */

.e-58cd9997 > .holder.horizontal
{
	min-height: 220px;
	align-items: center;
}

.e-58cd9997 > .holder.horizontal > .cover
{
	position: relative;
	flex-shrink: 0;
	width: 45%;
	min-height: inherit;
}

.e-58cd9997 > .holder.horizontal > .cover > .cover-overlay
{
	display: none;
}

.e-58cd9997 > .holder.horizontal > .content
{
	position: relative;
	flex: 1;
	width: auto;
	padding: 28px 36px;
	color: var(--ot-text-1);
	background: var(--ot-bg-1);
	min-height: inherit;
	justify-content: center;
}

.e-58cd9997 > .holder.horizontal.tone-dark
{
	background: var(--ot-bg-1);
}

.e-58cd9997 > .holder.horizontal .title,
.e-58cd9997 > .holder.horizontal .description
{
	color: var(--ot-text-1);
}

.e-58cd9997 > .holder.horizontal .description
{
	color: var(--ot-text-2);
}

.e-58cd9997 > .holder.horizontal .eyebrow
{
	color: var(--ot-brand);
}

.e-58cd9997 > .holder.horizontal .cta
{
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
}

.e-58cd9997 > .holder.horizontal .title
{
	font-size: 28px;
}

/* ========================================== */
/* ===== TALL VARIANT (1:2) ================= */
/* ========================================== */

.e-58cd9997 > .holder.tall
{
	aspect-ratio: 1 / 1.4;
	min-height: 420px;
}

.e-58cd9997 > .holder.tall > .content
{
	padding: 28px 28px 30px;
}

.e-58cd9997 > .holder.tall .title
{
	font-size: 28px;
}

/* ========================================== */
/* ===== WIDE VARIANT (16:6) ================ */
/* ========================================== */

.e-58cd9997 > .holder.wide
{
	min-height: 200px;
	aspect-ratio: 16 / 5;
}

.e-58cd9997 > .holder.wide > .content
{
	padding: 28px 44px;
	flex-direction: row;
	align-items: center;
	gap: 24px;
	justify-content: space-between;
}

.e-58cd9997 > .holder.wide .title
{
	font-size: 30px;
	max-width: 600px;
}

.e-58cd9997 > .holder.wide .description
{
	display: none;
}

.e-58cd9997 > .holder.wide .cta
{
	margin-top: 0;
	flex-shrink: 0;
}

.e-58cd9997 > .holder.wide .content-top
{
	margin-bottom: -8px;
}

/* ========================================== */
/* ===== FLAT VARIANT (no image, no gradient) */
/* ========================================== */

.e-58cd9997 > .holder.flat
{
	background: var(--ot-bg-2);
	color: var(--ot-text-1);
	border: 1px solid var(--ot-bg-2-border);
}

.e-58cd9997 > .holder.flat:hover
{
	border-color: var(--ot-bg-3-border);
}

.e-58cd9997 > .holder.flat > .cover
{
	display: none;
}

.e-58cd9997 > .holder.flat .title,
.e-58cd9997 > .holder.flat .description
{
	color: var(--ot-text-1);
}

.e-58cd9997 > .holder.flat .description
{
	color: var(--ot-text-2);
}

.e-58cd9997 > .holder.flat .cta
{
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
}

/* ========================================== */
/* ===== RESPONSIVE ========================= */
/* ========================================== */

@media (max-width: 900px)
{
	.e-58cd9997 > .holder
	{
		min-height: 240px;
	}

	.e-58cd9997 > .holder > .content
	{
		padding: 24px 24px;
	}

	.e-58cd9997 .title
	{
		font-size: 28px;
	}

	.e-58cd9997 > .holder.horizontal
	{
		flex-direction: column;
	}

	.e-58cd9997 > .holder.horizontal > .cover
	{
		position: relative;
		width: 100%;
		min-height: 180px;
	}

	.e-58cd9997 > .holder.wide > .content
	{
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.e-58cd9997 > .holder.wide .title
	{
		font-size: 24px;
	}
}

.e-37934a4d
{
	display: block;
	width: 100%;
}

/* ===== HOLDER ===== */

.e-37934a4d > .holder
{
	display: flex;
	flex-direction: column;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-l);
	overflow: hidden;
	color: inherit;
	cursor: pointer;
	transition: border-color 360ms cubic-bezier(0.22, 1, 0.36, 1), transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-37934a4d > .holder:hover
{
	border-color: var(--ot-bg-3-border);
	transform: translateY(-3px);
}

/* ===== COVER ===== */

.e-37934a4d > .holder > .cover
{
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	background-color: var(--ot-bg-3);
	overflow: hidden;
}

.e-37934a4d > .holder > .cover::before
{
	content: '';
	position: absolute;
	inset: 0;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	transform: scale(1);
	transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 0;
}

.e-37934a4d > .holder:hover > .cover::before
{
	transform: scale(1.06);
}

.e-37934a4d > .holder > .cover > .cover-overlay
{
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(20, 18, 16, 0.0) 60%, rgba(20, 18, 16, 0.18) 100%);
}

/* Highlight chip */

.e-37934a4d .highlight
{
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	padding: 6px 11px;
	background: var(--ot-text-1);
	border-radius: 100px;
	font-size: 10px;
	font-weight: 700;
	color: var(--ot-bg-1);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* ===== BODY ===== */

.e-37934a4d > .holder > .body
{
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px 24px 22px;
	flex: 1;
}

/* Meta (category + date) */

.e-37934a4d .meta
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.e-37934a4d .category
{
	font-size: 10.5px;
	font-weight: 700;
	color: var(--ot-brand);
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

.e-37934a4d .meta-dot
{
	width: 3px;
	height: 3px;
	background: var(--ot-bg-3-border);
	border-radius: 50%;
}

.e-37934a4d .date
{
	font-size: 11.5px;
	font-weight: 500;
	color: var(--ot-text-3);
	letter-spacing: 0.005em;
}

/* Title */

.e-37934a4d .title
{
	font-family: var(--ot-font-secondary);
	font-size: 26px;
	font-weight: 400;
	letter-spacing: -0.022em;
	line-height: 1.15;
	color: var(--ot-text-1);
	margin: 0;
	font-variation-settings: 'opsz' 144;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 200ms;
}

.e-37934a4d > .holder:hover .title
{
	color: var(--ot-brand);
}

/* Excerpt */

.e-37934a4d .excerpt
{
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--ot-text-2);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Footer (author + reading time) */

.e-37934a4d > .holder > .body > .footer
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--ot-bg-2-border);
}

.e-37934a4d .author
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.e-37934a4d .author-avatar
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background-size: cover;
	background-position: center;
	background-color: var(--ot-bg-3);
	border-radius: 50%;
	flex-shrink: 0;
}

.e-37934a4d .author-avatar-fallback > i
{
	font-size: 18px;
	color: var(--ot-text-3);
}

.e-37934a4d .author-text
{
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
	line-height: 1.3;
}

.e-37934a4d .author-name
{
	font-size: 12px;
	font-weight: 600;
	color: var(--ot-text-1);
	letter-spacing: -0.005em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.e-37934a4d .author-role
{
	font-size: 10.5px;
	font-weight: 500;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.e-37934a4d .reading
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 600;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	flex-shrink: 0;
}

.e-37934a4d .reading > i
{
	font-size: 14px;
	opacity: 0.85;
}

/* ========================================== */
/* ===== FEATURED VARIANT =================== */
/* ========================================== */

.e-37934a4d > .holder.featured
{
	flex-direction: row;
	align-items: stretch;
}

.e-37934a4d > .holder.featured > .cover
{
	width: 56%;
	aspect-ratio: auto;
	flex-shrink: 0;
	min-height: 380px;
}

.e-37934a4d > .holder.featured > .body
{
	padding: 36px 40px 32px;
	gap: 16px;
	flex: 1;
	justify-content: center;
}

.e-37934a4d > .holder.featured .title
{
	font-size: 40px;
	-webkit-line-clamp: 3;
	letter-spacing: -0.028em;
	line-height: 1.05;
}

.e-37934a4d > .holder.featured .excerpt
{
	font-size: 15px;
	-webkit-line-clamp: 4;
}

.e-37934a4d > .holder.featured > .body > .footer
{
	margin-top: 8px;
}

/* ========================================== */
/* ===== HORIZONTAL VARIANT ================= */
/* ========================================== */

.e-37934a4d > .holder.horizontal
{
	flex-direction: row;
	align-items: stretch;
}

.e-37934a4d > .holder.horizontal > .cover
{
	width: 220px;
	min-width: 220px;
	aspect-ratio: auto;
	flex-shrink: 0;
}

.e-37934a4d > .holder.horizontal > .body
{
	padding: 18px 22px;
	gap: 8px;
	flex: 1;
	min-width: 0;
}

.e-37934a4d > .holder.horizontal .title
{
	font-size: 19px;
	-webkit-line-clamp: 2;
	line-height: 1.2;
}

.e-37934a4d > .holder.horizontal .excerpt
{
	-webkit-line-clamp: 2;
	font-size: 12.5px;
}

.e-37934a4d > .holder.horizontal > .body > .footer
{
	padding-top: 10px;
}

/* ========================================== */
/* ===== COMPACT VARIANT ==================== */
/* ========================================== */

.e-37934a4d > .holder.compact > .cover
{
	aspect-ratio: 16 / 9;
}

.e-37934a4d > .holder.compact > .body
{
	padding: 14px 16px 16px;
	gap: 6px;
}

.e-37934a4d > .holder.compact .title
{
	font-size: 16px;
	-webkit-line-clamp: 2;
	line-height: 1.25;
}

.e-37934a4d > .holder.compact .excerpt,
.e-37934a4d > .holder.compact .author
{
	display: none;
}

.e-37934a4d > .holder.compact > .body > .footer
{
	padding-top: 6px;
	border-top: 0;
	margin-top: 0;
	justify-content: flex-end;
}

/* ========================================== */
/* ===== MINIMAL VARIANT (no cover) ========= */
/* ========================================== */

.e-37934a4d > .holder.minimal
{
	background: transparent;
	border: 0;
	border-top: 1px solid var(--ot-bg-2-border);
	border-radius: 0;
}

.e-37934a4d > .holder.minimal:hover
{
	border-top-color: var(--ot-text-1);
	transform: none;
}

.e-37934a4d > .holder.minimal > .cover
{
	display: none;
}

.e-37934a4d > .holder.minimal > .body
{
	padding: 22px 0 22px;
}

.e-37934a4d > .holder.minimal > .body > .footer
{
	border-top: 0;
	padding-top: 8px;
}

/* ========================================== */
/* ===== RESPONSIVE ========================= */
/* ========================================== */

@media (max-width: 900px)
{
	.e-37934a4d > .holder.featured
	{
		flex-direction: column;
	}

	.e-37934a4d > .holder.featured > .cover
	{
		width: 100%;
		min-height: 240px;
		aspect-ratio: 16 / 10;
	}

	.e-37934a4d > .holder.featured > .body
	{
		padding: 26px 24px 24px;
	}

	.e-37934a4d > .holder.featured .title
	{
		font-size: 28px;
	}
}

@media (max-width: 600px)
{
	.e-37934a4d > .holder.horizontal
	{
		flex-direction: column;
	}

	.e-37934a4d > .holder.horizontal > .cover
	{
		width: 100%;
		min-width: 0;
		aspect-ratio: 16 / 10;
	}
}

.e-392065d6
{
	display: block;
	width: 100%;
}

/* ===== HOLDER ===== */

.e-392065d6 > .holder
{
	position: relative;
	display: block;
	background: var(--ot-bg-3);
	border-radius: var(--ot-radius-l);
	overflow: hidden;
	color: white;
	cursor: pointer;
	border: 1px solid transparent;
	transition: border-color 360ms cubic-bezier(0.22, 1, 0.36, 1), transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-392065d6 > .holder:hover
{
	transform: translateY(-3px);
}

/* ===== COVER ===== */

.e-392065d6 > .holder > .cover
{
	position: relative;
	width: 100%;
	background-color: var(--ot-bg-3);
	overflow: hidden;
}

.e-392065d6 > .holder.size-s > .cover { aspect-ratio: 4 / 5; min-height: 280px; }
.e-392065d6 > .holder.size-m > .cover { aspect-ratio: 4 / 5; min-height: 380px; }
.e-392065d6 > .holder.size-l > .cover { aspect-ratio: 4 / 5; min-height: 540px; }

.e-392065d6 > .holder > .cover::before
{
	content: '';
	position: absolute;
	inset: 0;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	transform: scale(1);
	transition: transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 0;
}

.e-392065d6 > .holder:hover > .cover::before
{
	transform: scale(1.06);
}

/* Overlay */

.e-392065d6 > .holder > .cover > .cover-overlay
{
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(20, 18, 16, 0.05) 0%, transparent 35%, rgba(20, 18, 16, 0.5) 75%, rgba(20, 18, 16, 0.85) 100%);
	transition: background 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-392065d6 > .holder:hover > .cover > .cover-overlay
{
	background:
		linear-gradient(180deg, rgba(20, 18, 16, 0.1) 0%, transparent 25%, rgba(20, 18, 16, 0.55) 70%, rgba(20, 18, 16, 0.9) 100%);
}

/* Country chip */

.e-392065d6 .country-chip
{
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 10px;
	background: rgba(255, 254, 252, 0.94);
	backdrop-filter: blur(10px) saturate(180%);
	-webkit-backdrop-filter: blur(10px) saturate(180%);
	border-radius: 100px;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--ot-text-1);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.e-392065d6 .country-chip > .country-flag
{
	font-size: 14px;
	letter-spacing: 0;
}

/* Content (overlay) */

.e-392065d6 > .holder > .cover > .content
{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 24px 22px;
}

.e-392065d6 .region
{
	font-size: 10.5px;
	font-weight: 700;
	color: rgba(255, 254, 252, 0.85);
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

.e-392065d6 .name
{
	font-family: var(--ot-font-secondary);
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 0.98;
	color: white;
	margin: 0;
	font-variation-settings: 'opsz' 144;
}

.e-392065d6 > .holder.size-s .name { font-size: 28px; }
.e-392065d6 > .holder.size-m .name { font-size: 38px; }
.e-392065d6 > .holder.size-l .name { font-size: 56px; }

.e-392065d6 .description
{
	font-size: 13px;
	line-height: 1.55;
	color: rgba(255, 254, 252, 0.82);
	margin: 0;
	max-width: 380px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.e-392065d6 .meta
{
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
}

.e-392065d6 .meta-item
{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 600;
	color: rgba(255, 254, 252, 0.85);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.e-392065d6 .meta-item > i
{
	font-size: 13px;
	opacity: 0.85;
}

/* CTA */

.e-392065d6 .cta
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	padding: 10px 18px;
	background: rgba(255, 254, 252, 0.14);
	border: 1px solid rgba(255, 254, 252, 0.32);
	border-radius: 100px;
	font-size: 12px;
	font-weight: 600;
	color: white;
	letter-spacing: 0.005em;
	width: fit-content;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1), color 240ms, transform 240ms, gap 240ms;
}

.e-392065d6 > .holder:hover .cta
{
	background: white;
	color: var(--ot-text-1);
	border-color: white;
	transform: translateX(2px);
	gap: 12px;
}

.e-392065d6 .cta > i
{
	font-size: 16px;
}

/* ===== BODY (hidden by default, shown for horizontal + card) ===== */

.e-392065d6 > .holder > .body
{
	display: none;
}

/* ========================================== */
/* ===== HORIZONTAL VARIANT ================= */
/* ========================================== */

.e-392065d6 > .holder.horizontal
{
	display: flex;
	align-items: stretch;
	background: var(--ot-bg-1);
	border-color: var(--ot-bg-2-border);
	color: inherit;
}

.e-392065d6 > .holder.horizontal:hover
{
	border-color: var(--ot-bg-3-border);
}

.e-392065d6 > .holder.horizontal > .cover
{
	width: 40%;
	min-width: 180px;
	aspect-ratio: auto;
	min-height: 140px;
	flex-shrink: 0;
}

.e-392065d6 > .holder.horizontal > .cover > .cover-overlay,
.e-392065d6 > .holder.horizontal > .cover > .content,
.e-392065d6 > .holder.horizontal > .cover > .country-chip
{
	display: none;
}

.e-392065d6 > .holder.horizontal > .body
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
	padding: 18px 22px;
	flex: 1;
	min-width: 0;
}

.e-392065d6 > .holder.horizontal .body-head
{
	display: flex;
	align-items: center;
	gap: 8px;
}

.e-392065d6 > .holder.horizontal .body-flag
{
	font-size: 18px;
	flex-shrink: 0;
}

.e-392065d6 > .holder.horizontal .body-text
{
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.e-392065d6 > .holder.horizontal .body-name
{
	font-family: var(--ot-font-secondary);
	font-size: 19px;
	font-weight: 500;
	letter-spacing: -0.012em;
	color: var(--ot-text-1);
	margin: 0;
	font-variation-settings: 'opsz' 144;
	line-height: 1.15;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 200ms;
}

.e-392065d6 > .holder.horizontal:hover .body-name
{
	color: var(--ot-brand);
}

.e-392065d6 > .holder.horizontal .body-country
{
	font-size: 10.5px;
	font-weight: 600;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.e-392065d6 > .holder.horizontal .body-description
{
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ot-text-2);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.e-392065d6 > .holder.horizontal .body-meta
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 11px;
	font-weight: 600;
	color: var(--ot-text-2);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-top: auto;
}

.e-392065d6 > .holder.horizontal .body-meta > i
{
	font-size: 16px;
	transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), color 240ms;
}

.e-392065d6 > .holder.horizontal:hover .body-meta > i
{
	color: var(--ot-brand);
	transform: translateX(3px);
}

/* ========================================== */
/* ===== FEATURED VARIANT =================== */
/* ========================================== */

.e-392065d6 > .holder.featured > .cover
{
	aspect-ratio: 1 / 1;
}

.e-392065d6 > .holder.featured.size-l > .cover
{
	min-height: 640px;
}

.e-392065d6 > .holder.featured > .cover > .content
{
	padding: 36px 36px 32px;
	gap: 14px;
}

.e-392065d6 > .holder.featured .name
{
	font-size: 64px;
	letter-spacing: -0.03em;
}

.e-392065d6 > .holder.featured.size-l .name
{
	font-size: 80px;
}

.e-392065d6 > .holder.featured .description
{
	font-size: 14px;
	max-width: 460px;
	-webkit-line-clamp: 3;
}

/* ========================================== */
/* ===== COMPACT VARIANT ==================== */
/* ========================================== */

.e-392065d6 > .holder.compact > .cover
{
	aspect-ratio: 4 / 3;
	min-height: 200px;
}

.e-392065d6 > .holder.compact > .cover > .content
{
	padding: 16px 18px 16px;
	gap: 4px;
}

.e-392065d6 > .holder.compact .name
{
	font-size: 22px;
}

.e-392065d6 > .holder.compact .region,
.e-392065d6 > .holder.compact .description,
.e-392065d6 > .holder.compact .meta,
.e-392065d6 > .holder.compact .cta
{
	display: none;
}

.e-392065d6 > .holder.compact .country-chip
{
	top: 12px;
	left: 12px;
	padding: 4px 10px 4px 8px;
	font-size: 9.5px;
}

/* ========================================== */
/* ===== CARD VARIANT (image + body below) == */
/* ========================================== */

.e-392065d6 > .holder.card
{
	display: flex;
	flex-direction: column;
	background: var(--ot-bg-1);
	border-color: var(--ot-bg-2-border);
	color: inherit;
}

.e-392065d6 > .holder.card:hover
{
	border-color: var(--ot-bg-3-border);
}

.e-392065d6 > .holder.card > .cover
{
	aspect-ratio: 4 / 3;
	min-height: auto;
}

.e-392065d6 > .holder.card > .cover > .cover-overlay,
.e-392065d6 > .holder.card > .cover > .content
{
	display: none;
}

.e-392065d6 > .holder.card > .body
{
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 22px 22px;
	flex: 1;
}

.e-392065d6 > .holder.card .body-head
{
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.e-392065d6 > .holder.card .body-flag
{
	font-size: 18px;
}

.e-392065d6 > .holder.card .body-text
{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.e-392065d6 > .holder.card .body-name
{
	font-family: var(--ot-font-secondary);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: -0.018em;
	color: var(--ot-text-1);
	margin: 0;
	font-variation-settings: 'opsz' 144;
	line-height: 1.2;
	transition: color 200ms;
}

.e-392065d6 > .holder.card:hover .body-name
{
	color: var(--ot-brand);
}

.e-392065d6 > .holder.card .body-country
{
	font-size: 10.5px;
	font-weight: 600;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.e-392065d6 > .holder.card .body-description
{
	font-size: 13px;
	line-height: 1.55;
	color: var(--ot-text-2);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.e-392065d6 > .holder.card .body-meta
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding-top: 4px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ot-text-2);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.e-392065d6 > .holder.card .body-meta > i
{
	font-size: 16px;
	transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), color 240ms;
}

.e-392065d6 > .holder.card:hover .body-meta > i
{
	color: var(--ot-brand);
	transform: translateX(3px);
}

/* ========================================== */
/* ===== RESPONSIVE ========================= */
/* ========================================== */

@media (max-width: 700px)
{
	.e-392065d6 > .holder.featured .name
	{
		font-size: 44px;
	}

	.e-392065d6 > .holder.size-l > .cover  { min-height: 420px; }

	.e-392065d6 > .holder.horizontal
	{
		flex-direction: column;
	}

	.e-392065d6 > .holder.horizontal > .cover
	{
		width: 100%;
		min-height: 200px;
	}
}

.e-769a98d3
{
	display: block;
	width: 100%;
}

/* ===== HOLDER ===== */

.e-769a98d3 > .holder
{
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-l);
	overflow: hidden;
	color: inherit;
	cursor: pointer;
	transition: border-color 360ms cubic-bezier(0.22, 1, 0.36, 1), transform 360ms cubic-bezier(0.22, 1, 0.36, 1), background 240ms;
}

.e-769a98d3 > .holder:hover
{
	border-color: var(--ot-bg-3-border);
	transform: translateY(-3px);
}

/* ===== COVER ===== */

.e-769a98d3 > .holder > .cover
{
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	background-color: var(--ot-bg-3);
	overflow: hidden;
}

.e-769a98d3 > .holder.no-cover > .cover
{
	background:
		radial-gradient(circle at 30% 30%, var(--ot-bg-2) 0%, var(--ot-bg-3) 100%);
}

.e-769a98d3 > .holder:not(.no-cover) > .cover::before
{
	content: '';
	position: absolute;
	inset: 0;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	transform: scale(1);
	transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 0;
}

.e-769a98d3 > .holder:hover:not(.no-cover) > .cover::before
{
	transform: scale(1.06);
}

.e-769a98d3 > .holder > .cover > .cover-overlay
{
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(20, 18, 16, 0.0) 0%, transparent 50%, rgba(20, 18, 16, 0.4) 100%);
}

/* ===== FLAG (shared) ===== */

.e-769a98d3 .flag
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* Flag in cover (default) */

.e-769a98d3 .flag-cover
{
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	width: 48px;
	height: 48px;
	font-size: 28px;
	background: rgba(255, 254, 252, 0.94);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 12px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-769a98d3 > .holder:hover .flag-cover
{
	transform: scale(1.06);
}

/* Flag in body — hidden by default, shown for horizontal/compact/stamp */

.e-769a98d3 .flag-body
{
	display: none;
}

/* Region (top right) */

.e-769a98d3 .region
{
	position: absolute;
	top: 22px;
	right: 16px;
	z-index: 2;
	font-size: 10px;
	font-weight: 700;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-shadow: 0 1px 8px rgba(20, 18, 16, 0.4);
}

.e-769a98d3 > .holder.no-cover .region
{
	color: var(--ot-text-3);
	text-shadow: none;
}

/* Code (bottom right corner inside cover) */

.e-769a98d3 .code
{
	position: absolute;
	bottom: 16px;
	right: 18px;
	z-index: 2;
	font-family: var(--ot-font-secondary);
	font-size: 32px;
	font-weight: 300;
	line-height: 1;
	color: rgba(255, 254, 252, 0.85);
	letter-spacing: -0.03em;
	font-variation-settings: 'opsz' 144;
	text-shadow: 0 2px 12px rgba(20, 18, 16, 0.3);
	user-select: none;
	pointer-events: none;
}

.e-769a98d3 > .holder.no-cover .code
{
	color: var(--ot-bg-3-border);
	text-shadow: none;
	font-size: 56px;
	font-weight: 200;
	bottom: 12px;
	right: 18px;
	opacity: 0.9;
}

/* ===== BODY ===== */

.e-769a98d3 > .holder > .body
{
	display: flex;
	align-items: stretch;
	gap: 0;
	padding: 18px 20px 18px;
	flex: 1;
	position: relative;
}

.e-769a98d3 .body-text
{
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	min-width: 0;
}

.e-769a98d3 .body-head
{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.e-769a98d3 .name
{
	font-family: var(--ot-font-secondary);
	font-size: 24px;
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--ot-text-1);
	margin: 0;
	font-variation-settings: 'opsz' 144;
	transition: color 200ms;
}

.e-769a98d3 > .holder:hover .name
{
	color: var(--ot-brand);
}

.e-769a98d3 .highlight
{
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	background: var(--ot-brand-opacity);
	border-radius: 100px;
	font-size: 9.5px;
	font-weight: 700;
	color: var(--ot-brand);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	flex-shrink: 0;
	margin-top: 4px;
}

/* Stats */

.e-769a98d3 .stats
{
	display: flex;
	align-items: baseline;
	gap: 16px;
}

.e-769a98d3 .stat
{
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
}

.e-769a98d3 .stat > .stat-value
{
	font-family: var(--ot-font-secondary);
	font-size: 16px;
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: -0.01em;
	font-variation-settings: 'opsz' 144;
}

.e-769a98d3 .stat > .stat-label
{
	font-size: 11px;
	font-weight: 600;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* Action arrow (corner) */

.e-769a98d3 .action
{
	position: absolute;
	bottom: 16px;
	right: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: var(--ot-text-2);
	transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1), color 240ms, transform 240ms;
}

.e-769a98d3 > .holder:hover .action
{
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
	transform: translateX(2px);
}

.e-769a98d3 .action > i
{
	font-size: 16px;
}

/* ========================================== */
/* ===== HORIZONTAL VARIANT ================= */
/* ========================================== */

.e-769a98d3 > .holder.horizontal
{
	flex-direction: row;
	align-items: center;
}

.e-769a98d3 > .holder.horizontal > .cover
{
	display: none;
}

.e-769a98d3 > .holder.horizontal > .body
{
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	flex: 1;
}

.e-769a98d3 > .holder.horizontal .flag-body
{
	display: inline-flex;
	width: 40px;
	height: 40px;
	font-size: 22px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 10px;
	flex-shrink: 0;
}

.e-769a98d3 > .holder.horizontal .body-text
{
	flex-direction: row;
	align-items: center;
	gap: 14px;
	flex: 1;
}

.e-769a98d3 > .holder.horizontal .body-head
{
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.e-769a98d3 > .holder.horizontal .name
{
	font-size: 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}

.e-769a98d3 > .holder.horizontal .highlight
{
	margin-top: 0;
}

.e-769a98d3 > .holder.horizontal .stats
{
	gap: 12px;
	flex-shrink: 0;
}

.e-769a98d3 > .holder.horizontal .action
{
	position: static;
	margin-left: 4px;
}

/* ========================================== */
/* ===== FEATURED VARIANT =================== */
/* ========================================== */

.e-769a98d3 > .holder.featured > .cover
{
	aspect-ratio: 16 / 11;
}

.e-769a98d3 > .holder.featured .flag-cover
{
	width: 56px;
	height: 56px;
	font-size: 32px;
	border-radius: 14px;
}

.e-769a98d3 > .holder.featured .code
{
	font-size: 44px;
}

.e-769a98d3 > .holder.featured > .body
{
	padding: 24px 26px 24px;
}

.e-769a98d3 > .holder.featured .body-text
{
	gap: 12px;
}

.e-769a98d3 > .holder.featured .name
{
	font-size: 32px;
}

.e-769a98d3 > .holder.featured .stat > .stat-value
{
	font-size: 22px;
}

.e-769a98d3 > .holder.featured .action
{
	bottom: 24px;
	right: 26px;
	width: 36px;
	height: 36px;
}

.e-769a98d3 > .holder.featured .action > i
{
	font-size: 18px;
}

/* ========================================== */
/* ===== COMPACT VARIANT (pill) ============= */
/* ========================================== */

.e-769a98d3 > .holder.compact
{
	flex-direction: row;
	align-items: center;
	border-radius: 100px;
	background: var(--ot-bg-2);
	border-color: transparent;
	padding: 4px 16px 4px 4px;
}

.e-769a98d3 > .holder.compact:hover
{
	background: var(--ot-bg-1);
	border-color: var(--ot-bg-2-border);
	transform: translateX(2px);
}

.e-769a98d3 > .holder.compact > .cover
{
	display: none;
}

.e-769a98d3 > .holder.compact > .body
{
	align-items: center;
	gap: 10px;
	padding: 4px 8px;
	flex: 1;
}

.e-769a98d3 > .holder.compact .flag-body
{
	display: inline-flex;
	width: 32px;
	height: 32px;
	font-size: 18px;
	background: var(--ot-bg-1);
	border-radius: 50%;
	flex-shrink: 0;
}

.e-769a98d3 > .holder.compact .body-text
{
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

.e-769a98d3 > .holder.compact .body-head
{
	flex: 1;
	min-width: 0;
}

.e-769a98d3 > .holder.compact .name
{
	font-family: var(--ot-font-primary);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--ot-text-1);
}

.e-769a98d3 > .holder.compact .highlight,
.e-769a98d3 > .holder.compact .stats,
.e-769a98d3 > .holder.compact .action
{
	display: none;
}

/* ========================================== */
/* ===== STAMP VARIANT (passport mark) ====== */
/* ========================================== */

.e-769a98d3 > .holder.stamp
{
	flex-direction: column;
	background: transparent;
	border: 0;
	padding: 0;
	overflow: visible;
	border-radius: 0;
}

.e-769a98d3 > .holder.stamp:hover
{
	transform: translateY(-3px);
}

.e-769a98d3 > .holder.stamp > .cover
{
	aspect-ratio: 1 / 1;
	border: 2px solid var(--ot-text-1);
	border-radius: var(--ot-radius-m);
	background: var(--ot-bg-1);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.e-769a98d3 > .holder.stamp > .cover::before,
.e-769a98d3 > .holder.stamp > .cover > .cover-overlay,
.e-769a98d3 > .holder.stamp .code,
.e-769a98d3 > .holder.stamp .region
{
	display: none;
}

.e-769a98d3 > .holder.stamp .flag-cover
{
	position: static;
	width: auto;
	height: auto;
	font-size: 64px;
	background: transparent;
	border: 0;
	border-radius: 0;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.e-769a98d3 > .holder.stamp > .body
{
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 14px 0 0;
	text-align: center;
}

.e-769a98d3 > .holder.stamp .body-text
{
	align-items: center;
	gap: 4px;
}

.e-769a98d3 > .holder.stamp .body-head
{
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.e-769a98d3 > .holder.stamp .name
{
	font-size: 18px;
}

.e-769a98d3 > .holder.stamp .stats,
.e-769a98d3 > .holder.stamp .action
{
	display: none;
}

/* ========================================== */
/* ===== RESPONSIVE ========================= */
/* ========================================== */

@media (max-width: 600px)
{
	.e-769a98d3 > .holder.featured .name
	{
		font-size: 24px;
	}
}

.e-487914a5
{
	display: block;
}

/* ===== HOLDER (default = pill) ===== */

.e-487914a5 > .holder
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px 10px 14px;
	width: 100%;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 100px;
	color: inherit;
	cursor: pointer;
	min-width: 0;
	transition: border-color 240ms cubic-bezier(0.22, 1, 0.36, 1), background 240ms, transform 240ms;
}

.e-487914a5 > .holder:hover
{
	border-color: var(--ot-bg-3-border);
	background: var(--ot-bg-2);
	transform: translateX(2px);
}

.e-487914a5 > .holder.active
{
	border-color: var(--ot-text-1);
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
}

/* Flag */

.e-487914a5 .flag
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
}

/* Icon */

.e-487914a5 .icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: var(--ot-text-3);
	flex-shrink: 0;
	transition: color 200ms;
}

.e-487914a5 > .holder:hover .icon
{
	color: var(--ot-brand);
}

.e-487914a5 > .holder.active .icon
{
	color: var(--ot-bg-1);
}

/* Text */

.e-487914a5 .text
{
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
	flex: 1;
	line-height: 1.25;
}

.e-487914a5 .label
{
	font-size: 13px;
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: -0.005em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.e-487914a5 > .holder.active .label
{
	color: var(--ot-bg-1);
	font-weight: 600;
}

.e-487914a5 .description
{
	font-size: 11px;
	font-weight: 500;
	color: var(--ot-text-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.e-487914a5 > .holder.active .description
{
	color: rgba(255, 254, 252, 0.75);
}

/* Count */

.e-487914a5 .count
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	padding: 2px 7px;
	background: var(--ot-bg-3);
	border-radius: 100px;
	font-family: var(--ot-font-secondary);
	font-size: 11px;
	font-weight: 500;
	color: var(--ot-text-2);
	font-variation-settings: 'opsz' 144;
	letter-spacing: 0;
	flex-shrink: 0;
}

.e-487914a5 > .holder.active .count
{
	background: rgba(255, 254, 252, 0.18);
	color: var(--ot-bg-1);
}

/* Arrow */

.e-487914a5 .arrow
{
	font-size: 16px;
	color: var(--ot-text-3);
	margin-left: 2px;
	flex-shrink: 0;
	transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), color 240ms;
}

.e-487914a5 > .holder:hover .arrow
{
	color: var(--ot-brand);
	transform: translateX(3px);
}

.e-487914a5 > .holder.active .arrow
{
	color: var(--ot-bg-1);
}

/* ========================================== */
/* ===== LIST VARIANT (full-width row) ====== */
/* ========================================== */

.e-487914a5 > .holder.list
{
	border-radius: var(--ot-radius-m);
	padding: 14px 18px 14px 16px;
	gap: 12px;
}

.e-487914a5 > .holder.list .flag
{
	font-size: 22px;
}

.e-487914a5 > .holder.list .icon
{
	font-size: 20px;
}

.e-487914a5 > .holder.list .label
{
	font-size: 14px;
	font-weight: 600;
}

.e-487914a5 > .holder.list .description
{
	font-size: 12px;
}

/* ========================================== */
/* ===== GHOST VARIANT (no border, hover bg) */
/* ========================================== */

.e-487914a5 > .holder.ghost
{
	background: transparent;
	border-color: transparent;
	border-radius: var(--ot-radius-s);
}

.e-487914a5 > .holder.ghost:hover
{
	background: var(--ot-bg-2);
	border-color: transparent;
}

.e-487914a5 > .holder.ghost.active
{
	background: var(--ot-bg-2);
	border-color: transparent;
	color: var(--ot-text-1);
}

.e-487914a5 > .holder.ghost.active .label
{
	color: var(--ot-text-1);
}

.e-487914a5 > .holder.ghost.active .icon,
.e-487914a5 > .holder.ghost.active .arrow
{
	color: var(--ot-brand);
}

.e-487914a5 > .holder.ghost.active .count
{
	background: var(--ot-bg-1);
	color: var(--ot-text-2);
}

.e-487914a5 > .holder.ghost.active .description
{
	color: var(--ot-text-3);
}

/* ========================================== */
/* ===== TAG VARIANT (extra compact) ======== */
/* ========================================== */

.e-487914a5 > .holder.tag
{
	padding: 6px 12px 6px 10px;
	gap: 6px;
	background: var(--ot-bg-2);
	border-color: transparent;
	width: auto;
}

.e-487914a5 > .holder.tag:hover
{
	background: var(--ot-bg-1);
	border-color: var(--ot-bg-2-border);
	transform: translateX(0);
}

.e-487914a5 > .holder.tag .flag,
.e-487914a5 > .holder.tag .icon
{
	font-size: 14px;
}

.e-487914a5 > .holder.tag .text
{
	flex: 0 0 auto;
}

.e-487914a5 > .holder.tag .label
{
	font-size: 12px;
}

.e-487914a5 > .holder.tag .description
{
	display: none;
}

.e-487914a5 > .holder.tag .count
{
	min-width: 18px;
	font-size: 10px;
	padding: 1px 6px;
}

.e-487914a5 > .holder.tag .arrow
{
	display: none;
}

.e-5677af83
{
	display: block;
	width: 100%;
}

/* ===== HOLDER ===== */

.e-5677af83 > .holder
{
	display: flex;
	flex-direction: column;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-l);
	overflow: hidden;
	color: inherit;
	cursor: pointer;
	transition: border-color 360ms cubic-bezier(0.22, 1, 0.36, 1), transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-5677af83 > .holder:hover
{
	border-color: var(--ot-bg-3-border);
	transform: translateY(-3px);
}

/* ===== COVER ===== */

.e-5677af83 > .holder > .cover
{
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	background-color: var(--ot-bg-3);
	overflow: hidden;
}

.e-5677af83 > .holder > .cover::before
{
	content: '';
	position: absolute;
	inset: 0;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	transform: scale(1);
	transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 0;
}

.e-5677af83 > .holder:hover > .cover::before
{
	transform: scale(1.06);
}

.e-5677af83 > .holder > .cover > .cover-overlay
{
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(20, 18, 16, 0.18) 0%, transparent 30%, transparent 60%, rgba(20, 18, 16, 0.45) 100%);
	pointer-events: none;
}

/* ===== COVER TOP (type + badge) ===== */

.e-5677af83 .cover-top
{
	position: absolute;
	top: 14px;
	left: 14px;
	right: 14px;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	pointer-events: none;
}

.e-5677af83 .type-chip
{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 11px 6px 9px;
	background: rgba(255, 254, 252, 0.94);
	backdrop-filter: blur(10px) saturate(180%);
	-webkit-backdrop-filter: blur(10px) saturate(180%);
	border-radius: 100px;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--ot-text-1);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.e-5677af83 .type-chip > i
{
	font-size: 13px;
	color: var(--ot-brand);
}

.e-5677af83 .badge
{
	padding: 6px 11px;
	border-radius: 100px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: white;
}

.e-5677af83 .badge.badge-brand { background: var(--ot-brand); }
.e-5677af83 .badge.badge-dark  { background: var(--ot-text-1); }
.e-5677af83 .badge.badge-green { background: rgba(20, 144, 95, 1); }
.e-5677af83 .badge.badge-gold  { background: rgba(170, 130, 60, 1); }

/* ===== SAVE BUTTON ===== */

.e-5677af83 .save
{
	position: absolute;
	bottom: 14px;
	right: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: rgba(255, 254, 252, 0.94);
	border: 0;
	border-radius: 50%;
	color: var(--ot-text-1);
	cursor: pointer;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms, transform 220ms;
}

.e-5677af83 .save:hover
{
	background: white;
	transform: scale(1.06);
}

.e-5677af83 .save > i
{
	font-size: 18px;
}

.e-5677af83 > .holder.is-saved .save
{
	background: var(--ot-brand);
	color: white;
}

.e-5677af83 > .holder.is-saved .save > i
{
	font-variation-settings: 'FILL' 1;
}

/* ===== COVER BOTTOM (duration + transport) ===== */

.e-5677af83 .cover-bottom
{
	position: absolute;
	bottom: 14px;
	left: 14px;
	right: 60px;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	pointer-events: none;
	flex-wrap: wrap;
}

.e-5677af83 .cover-meta
{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	background: rgba(20, 18, 16, 0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 100px;
	font-size: 11.5px;
	font-weight: 600;
	color: white;
	letter-spacing: 0.02em;
}

.e-5677af83 .cover-meta > i
{
	font-size: 13px;
}

.e-5677af83 .cover-meta-transport
{
	gap: 3px;
	padding: 5px 9px;
}

.e-5677af83 .cover-meta-transport > i
{
	font-size: 14px;
}

/* ===== BODY ===== */

.e-5677af83 > .holder > .body
{
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 22px 18px;
	flex: 1;
}

/* Head: destination + stars */

.e-5677af83 .body > .head
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.e-5677af83 .destination
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 600;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	min-width: 0;
}

.e-5677af83 .destination > .destination-flag
{
	font-size: 14px;
	letter-spacing: 0;
	flex-shrink: 0;
}

.e-5677af83 .destination > .destination-text
{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.e-5677af83 .stars
{
	display: inline-flex;
	gap: 1px;
	flex-shrink: 0;
}

.e-5677af83 .stars > i
{
	font-size: 12px;
	color: rgba(220, 165, 50, 1);
	font-variation-settings: 'FILL' 1;
}

/* Name */

.e-5677af83 .body > .name
{
	font-family: var(--ot-font-secondary);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--ot-text-1);
	margin: 0;
	font-variation-settings: 'opsz' 144;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 200ms;
}

.e-5677af83 > .holder:hover > .body > .name
{
	color: var(--ot-brand);
}

/* Description */

.e-5677af83 .body > .description
{
	font-size: 13px;
	line-height: 1.55;
	color: var(--ot-text-2);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Highlights */

.e-5677af83 .body > .highlights
{
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 4px;
}

.e-5677af83 .highlight
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 9px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 6px;
	font-size: 10.5px;
	font-weight: 500;
	color: var(--ot-text-2);
}

.e-5677af83 .highlight > i
{
	font-size: 12px;
	color: var(--ot-brand);
}

/* Footer: departure + price */

.e-5677af83 .body > .footer
{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 8px;
}

.e-5677af83 .departure
{
	display: flex;
	flex-direction: column;
	gap: 1px;
	line-height: 1.2;
}

.e-5677af83 .departure > .departure-label
{
	font-size: 9.5px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.e-5677af83 .departure > .departure-value
{
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ot-text-1);
}

.e-5677af83 .price
{
	text-align: right;
	display: flex;
	flex-direction: column;
	gap: 1px;
	line-height: 1.0;
}

.e-5677af83 .price > .price-old
{
	font-size: 11px;
	font-weight: 500;
	color: var(--ot-text-3);
	text-decoration: line-through;
	margin-bottom: 2px;
}

.e-5677af83 .price > .price-row
{
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	justify-content: flex-end;
}

.e-5677af83 .price > .price-row > .price-from
{
	font-size: 10.5px;
	font-weight: 600;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.e-5677af83 .price > .price-row > .price-value
{
	font-family: var(--ot-font-secondary);
	font-size: 24px;
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: -0.02em;
	font-variation-settings: 'opsz' 144;
}

.e-5677af83 .price > .price-per
{
	font-size: 10px;
	font-weight: 500;
	color: var(--ot-text-3);
	margin-top: 3px;
}

/* Action strip (bottom) */

.e-5677af83 .body > .action
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 8px -22px -18px;
	padding: 14px 22px;
	background: var(--ot-bg-2);
	border-top: 1px solid var(--ot-bg-2-border);
	transition: background 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-5677af83 > .holder:hover > .body > .action
{
	background: var(--ot-text-1);
}

.e-5677af83 .body > .action > .action-text
{
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ot-text-1);
	letter-spacing: 0.005em;
	transition: color 320ms;
}

.e-5677af83 > .holder:hover > .body > .action > .action-text
{
	color: var(--ot-bg-1);
}

.e-5677af83 .body > .action > .action-arrow
{
	font-size: 16px;
	color: var(--ot-text-2);
	transition: color 320ms, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-5677af83 > .holder:hover > .body > .action > .action-arrow
{
	color: var(--ot-bg-1);
	transform: translateX(4px);
}

/* ========================================== */
/* ===== HORIZONTAL VARIANT ================= */
/* ========================================== */

.e-5677af83 > .holder.horizontal
{
	flex-direction: row;
	align-items: stretch;
}

.e-5677af83 > .holder.horizontal > .cover
{
	width: 360px;
	min-width: 360px;
	aspect-ratio: auto;
}

.e-5677af83 > .holder.horizontal > .body
{
	flex: 1;
	padding: 28px 32px 24px;
	gap: 12px;
}

.e-5677af83 > .holder.horizontal > .body > .name
{
	font-size: 28px;
}

.e-5677af83 > .holder.horizontal > .body > .description
{
	-webkit-line-clamp: 3;
	font-size: 13.5px;
}

.e-5677af83 > .holder.horizontal > .body > .action
{
	margin: 12px -32px -24px;
	padding: 16px 32px;
}

/* ========================================== */
/* ===== FEATURED VARIANT =================== */
/* ========================================== */

.e-5677af83 > .holder.featured > .cover
{
	aspect-ratio: 16 / 11;
}

.e-5677af83 > .holder.featured > .body
{
	padding: 28px 28px 22px;
	gap: 12px;
}

.e-5677af83 > .holder.featured > .body > .name
{
	font-size: 32px;
	-webkit-line-clamp: 2;
}

.e-5677af83 > .holder.featured > .body > .description
{
	font-size: 14px;
	-webkit-line-clamp: 3;
}

.e-5677af83 > .holder.featured > .body > .action
{
	margin: 8px -28px -22px;
	padding: 18px 28px;
}

.e-5677af83 > .holder.featured > .body > .action > .action-text
{
	font-size: 13.5px;
}

/* ========================================== */
/* ===== COMPACT VARIANT ==================== */
/* ========================================== */

.e-5677af83 > .holder.compact > .body
{
	padding: 16px 16px 14px;
	gap: 8px;
}

.e-5677af83 > .holder.compact > .body > .name
{
	font-size: 18px;
}

.e-5677af83 > .holder.compact > .body > .description
{
	display: none;
}

.e-5677af83 > .holder.compact > .body > .highlights
{
	display: none;
}

.e-5677af83 > .holder.compact > .body > .footer
{
	padding-top: 4px;
}

.e-5677af83 > .holder.compact > .body > .action
{
	margin: 4px -16px -14px;
	padding: 10px 16px;
}

/* ========================================== */
/* ===== RESPONSIVE ========================= */
/* ========================================== */

@media (max-width: 700px)
{
	.e-5677af83 > .holder.horizontal
	{
		flex-direction: column;
	}

	.e-5677af83 > .holder.horizontal > .cover
	{
		width: 100%;
		min-width: 0;
		aspect-ratio: 4 / 3;
	}
}

.e-55752aec
{
	display: block;
	width: 100%;
}

/* ===== HOLDER ===== */

.e-55752aec > .holder
{
	width: 100%;
}

.e-55752aec > .holder.tone-dark
{
	background: var(--ot-text-1);
	color: rgba(255, 255, 255, 0.78);
}

.e-55752aec > .holder.tone-light
{
	background: var(--ot-bg-2);
	color: var(--ot-text-2);
	border-top: 1px solid var(--ot-bg-2-border);
}

.e-55752aec > .holder > .inner
{
	max-width: 1440px;
	margin: 0 auto;
	padding: 64px 32px 28px;
}

/* ========================================== */
/* ===== MASTHEAD (editorial tagline) ======= */
/* ========================================== */

.e-55752aec .masthead
{
	display: flex;
	align-items: center;
	gap: 24px;
	padding-bottom: 56px;
	margin-bottom: 56px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.e-55752aec > .holder.tone-light .masthead
{
	border-bottom-color: var(--ot-bg-3-border);
}

.e-55752aec .masthead > .masthead-line
{
	flex-shrink: 0;
	width: 56px;
	height: 1px;
	background: var(--ot-brand);
}

.e-55752aec .masthead > .masthead-text
{
	font-family: var(--ot-font-secondary);
	font-size: 56px;
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 1.0;
	color: white;
	margin: 0;
	font-variation-settings: 'opsz' 144;
	max-width: 980px;
}

.e-55752aec > .holder.tone-light .masthead > .masthead-text
{
	color: var(--ot-text-1);
}

.e-55752aec .masthead-text em
{
	font-style: italic;
	color: var(--ot-brand);
}

/* ========================================== */
/* ===== BRAND ZONE ========================= */
/* ========================================== */

.e-55752aec .brand-zone
{
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 28px;
	padding-bottom: 36px;
	margin-bottom: 36px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.e-55752aec > .holder.tone-light .brand-zone
{
	border-bottom-color: var(--ot-bg-3-border);
}

.e-55752aec .brand
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	flex-shrink: 0;
}

.e-55752aec .brand > .brand-logo
{
	height: 36px;
	width: auto;
	display: block;
}

.e-55752aec .brand > .brand-name
{
	font-family: var(--ot-font-secondary);
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: white;
	font-variation-settings: 'opsz' 144;
}

.e-55752aec > .holder.tone-light .brand > .brand-name
{
	color: var(--ot-text-1);
}

.e-55752aec .brand-tagline
{
	font-size: 13px;
	line-height: 1.6;
	max-width: 420px;
	letter-spacing: 0.005em;
}

.e-55752aec .brand-aside
{
	display: flex;
	align-items: center;
	gap: 24px;
	flex-shrink: 0;
}

/* Languages switcher */

.e-55752aec .languages
{
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 4px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 100px;
}

.e-55752aec > .holder.tone-light .languages
{
	background: var(--ot-bg-1);
	border-color: var(--ot-bg-2-border);
}

.e-55752aec .language
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	padding: 6px 10px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.65);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms;
}

.e-55752aec > .holder.tone-light .language
{
	color: var(--ot-text-3);
}

.e-55752aec .language:hover
{
	color: white;
}

.e-55752aec > .holder.tone-light .language:hover
{
	color: var(--ot-text-1);
}

.e-55752aec .language.active
{
	background: white;
	color: var(--ot-text-1);
}

.e-55752aec > .holder.tone-light .language.active
{
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
}

/* Socials */

.e-55752aec .socials
{
	display: inline-flex;
	gap: 4px;
}

.e-55752aec .social
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.78);
	transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms, border-color 200ms;
}

.e-55752aec > .holder.tone-light .social
{
	border-color: var(--ot-bg-3-border);
	color: var(--ot-text-2);
}

.e-55752aec .social:hover
{
	background: white;
	color: var(--ot-text-1);
	border-color: white;
}

.e-55752aec > .holder.tone-light .social:hover
{
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
	border-color: var(--ot-text-1);
}

.e-55752aec .social > i
{
	font-size: 18px;
}

/* ========================================== */
/* ===== MAIN ZONE (columns + contact) ====== */
/* ========================================== */

.e-55752aec .main-zone
{
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 64px;
	padding-bottom: 48px;
	margin-bottom: 28px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.e-55752aec > .holder.tone-light .main-zone
{
	border-bottom-color: var(--ot-bg-3-border);
}

.e-55752aec .columns
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px 36px;
}

.e-55752aec .column
{
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.e-55752aec .column-title
{
	font-size: 11px;
	font-weight: 700;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	margin-bottom: 8px;
}

.e-55752aec > .holder.tone-light .column-title
{
	color: var(--ot-text-1);
}

.e-55752aec .link
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.7);
	letter-spacing: 0;
	transition: color 180ms cubic-bezier(0.22, 1, 0.36, 1), transform 180ms;
	width: fit-content;
}

.e-55752aec > .holder.tone-light .link
{
	color: var(--ot-text-2);
}

.e-55752aec .link:hover
{
	color: white;
	transform: translateX(2px);
}

.e-55752aec > .holder.tone-light .link:hover
{
	color: var(--ot-brand);
}

.e-55752aec .link > .link-icon
{
	font-size: 15px;
	opacity: 0.65;
}

.e-55752aec .link > .link-badge
{
	display: inline-flex;
	align-items: center;
	padding: 1px 6px;
	background: var(--ot-brand);
	border-radius: 100px;
	font-size: 9px;
	font-weight: 700;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Contact */

.e-55752aec .contact
{
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.e-55752aec .contact-title
{
	font-size: 11px;
	font-weight: 700;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	margin-bottom: 8px;
}

.e-55752aec > .holder.tone-light .contact-title
{
	color: var(--ot-text-1);
}

.e-55752aec .contact-row
{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	color: inherit;
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-55752aec .contact-row:hover
{
	transform: translateX(2px);
}

.e-55752aec .contact-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	flex-shrink: 0;
}

.e-55752aec > .holder.tone-light .contact-icon
{
	background: var(--ot-bg-3);
}

.e-55752aec .contact-icon > i
{
	font-size: 17px;
	color: rgba(255, 255, 255, 0.78);
}

.e-55752aec > .holder.tone-light .contact-icon > i
{
	color: var(--ot-text-2);
}

.e-55752aec .contact-row:hover .contact-icon
{
	background: var(--ot-brand);
}

.e-55752aec .contact-row:hover .contact-icon > i
{
	color: white;
}

.e-55752aec .contact-text
{
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	line-height: 1.3;
}

.e-55752aec .contact-label
{
	font-size: 10.5px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.55);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.e-55752aec > .holder.tone-light .contact-label
{
	color: var(--ot-text-3);
}

.e-55752aec .contact-value
{
	font-size: 13.5px;
	font-weight: 600;
	color: white;
}

.e-55752aec > .holder.tone-light .contact-value
{
	color: var(--ot-text-1);
}

/* ========================================== */
/* ===== TRUST ZONE (partners/payments/awards) */
/* ========================================== */

.e-55752aec .trust-zone
{
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding-bottom: 32px;
	margin-bottom: 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.e-55752aec > .holder.tone-light .trust-zone
{
	border-bottom-color: var(--ot-bg-3-border);
}

.e-55752aec .trust-group
{
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.e-55752aec .trust-eyebrow
{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 10.5px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.55);
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

.e-55752aec > .holder.tone-light .trust-eyebrow
{
	color: var(--ot-text-3);
}

.e-55752aec .trust-mark
{
	width: 22px;
	height: 1px;
	background: var(--ot-brand);
}

.e-55752aec .trust-logos
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px 36px;
}

.e-55752aec .trust-logo
{
	display: inline-flex;
	align-items: center;
	height: 32px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.005em;
	transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms;
}

.e-55752aec > .holder.tone-light .trust-logo
{
	color: var(--ot-text-3);
}

.e-55752aec a.trust-logo
{
	cursor: pointer;
}

.e-55752aec a.trust-logo:hover
{
	color: white;
}

.e-55752aec > .holder.tone-light a.trust-logo:hover
{
	color: var(--ot-text-1);
}

.e-55752aec .trust-logo > img
{
	height: 100%;
	width: auto;
	max-width: 120px;
	object-fit: contain;
	opacity: 0.7;
	filter: grayscale(1) brightness(2);
	transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1), filter 200ms;
}

.e-55752aec > .holder.tone-light .trust-logo > img
{
	filter: grayscale(1);
}

.e-55752aec a.trust-logo:hover > img,
.e-55752aec .trust-logos.payments .trust-logo > img,
.e-55752aec .trust-logos.awards .trust-logo > img
{
	opacity: 1;
}

.e-55752aec a.trust-logo:hover > img
{
	filter: none;
}

/* ========================================== */
/* ===== BOTTOM ZONE ======================== */
/* ========================================== */

.e-55752aec .bottom-zone
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 24px;
	flex-wrap: wrap;
}

.e-55752aec .bottom-left
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.45);
	letter-spacing: 0.005em;
}

.e-55752aec > .holder.tone-light .bottom-left
{
	color: var(--ot-text-3);
}

.e-55752aec .bottom-sep
{
	opacity: 0.4;
}

.e-55752aec .bottom-links
{
	display: inline-flex;
	gap: 4px;
	flex-wrap: wrap;
}

.e-55752aec .bottom-link
{
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 11.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.55);
	letter-spacing: 0.005em;
	transition: color 180ms, background 180ms;
}

.e-55752aec > .holder.tone-light .bottom-link
{
	color: var(--ot-text-3);
}

.e-55752aec .bottom-link:hover
{
	color: white;
	background: rgba(255, 255, 255, 0.05);
}

.e-55752aec > .holder.tone-light .bottom-link:hover
{
	color: var(--ot-text-1);
	background: var(--ot-bg-1);
}

/* ========================================== */
/* ===== RESPONSIVE ========================= */
/* ========================================== */

@media (max-width: 1100px)
{
	.e-55752aec > .holder > .inner
	{
		padding: 48px 24px 24px;
	}

	.e-55752aec .masthead
	{
		padding-bottom: 40px;
		margin-bottom: 40px;
	}

	.e-55752aec .masthead > .masthead-text
	{
		font-size: 40px;
	}

	.e-55752aec .main-zone
	{
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.e-55752aec .columns
	{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px)
{
	.e-55752aec .brand-zone
	{
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.e-55752aec .brand-aside
	{
		flex-wrap: wrap;
	}

	.e-55752aec .masthead > .masthead-text
	{
		font-size: 28px;
	}

	.e-55752aec .columns
	{
		grid-template-columns: 1fr;
	}

	.e-55752aec .bottom-zone
	{
		flex-direction: column;
		align-items: flex-start;
	}
}

.e-7195b5f3
{
	display: block;
	width: 100%;
}

.e-7195b5f3 > .holder
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 8px 48px;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.01em;
}

.e-7195b5f3 > .holder.tone-dark
{
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
}

.e-7195b5f3 > .holder.tone-brand
{
	background: var(--ot-brand);
	color: white;
}

.e-7195b5f3 > .holder.tone-light
{
	background: var(--ot-bg-2);
	color: var(--ot-text-1);
	border-bottom: 1px solid var(--ot-bg-2-border);
}

.e-7195b5f3 > .holder > .track
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 22px;
}

.e-7195b5f3 > .holder > .track > .message
{
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1), transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
	white-space: nowrap;
}

.e-7195b5f3 > .holder > .track > .message.active
{
	position: relative;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.e-7195b5f3 > .holder > .track > .message > .message-icon
{
	font-size: 15px;
	opacity: 0.85;
}

.e-7195b5f3 > .holder > .track > .message > .message-text
{
	letter-spacing: 0.01em;
}

.e-7195b5f3 > .holder > .track > .message > .message-link
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	transition: opacity 180ms;
}

.e-7195b5f3 > .holder > .track > .message > .message-link:hover
{
	opacity: 0.78;
}

.e-7195b5f3 > .holder > .track > .message > .message-link > i
{
	font-size: 14px;
}

.e-7195b5f3 > .holder > .close
{
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 180ms, background 180ms;
}

.e-7195b5f3 > .holder > .close:hover
{
	opacity: 1;
	background: rgba(255, 255, 255, 0.12);
}

.e-7195b5f3 > .holder.tone-light > .close:hover
{
	background: var(--ot-bg-3);
}

.e-7195b5f3 > .holder > .close > i
{
	font-size: 14px;
}

@media (max-width: 720px)
{
	.e-7195b5f3 > .holder
	{
		min-height: 34px;
		padding: 7px 40px;
		font-size: 11.5px;
	}
}

.e-6ee5c69e
{
	display: block;
}

.e-6ee5c69e > .holder
{
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-l);
	overflow: hidden;
}

.e-6ee5c69e > .holder.width-m    { width: 640px; }
.e-6ee5c69e > .holder.width-l    { width: 880px; }
.e-6ee5c69e > .holder.width-xl   { width: 1080px; }
.e-6ee5c69e > .holder.width-full { width: calc(100vw - 64px); max-width: 1280px; }

/* ===== BODY ===== */

.e-6ee5c69e > .holder > .body
{
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	padding: 28px;
}

.e-6ee5c69e > .holder.has-feature > .body
{
	grid-template-columns: 1fr 280px;
}

/* ===== COLUMNS ===== */

.e-6ee5c69e .columns
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px 32px;
}

.e-6ee5c69e > .holder.width-m .columns  { grid-template-columns: repeat(2, 1fr); }
.e-6ee5c69e > .holder.width-xl .columns { grid-template-columns: repeat(4, 1fr); }

.e-6ee5c69e .column
{
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.e-6ee5c69e .column-title
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
	padding: 0 10px;
	font-size: 10.5px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.e-6ee5c69e .column-title > i
{
	font-size: 14px;
	color: var(--ot-brand);
	opacity: 0.85;
}

/* ===== LINK ===== */

.e-6ee5c69e .link
{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	color: var(--ot-text-1);
	transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1), transform 180ms;
	min-width: 0;
}

.e-6ee5c69e .link:hover
{
	background: var(--ot-bg-2);
	transform: translateX(2px);
}

.e-6ee5c69e .link > .link-flag
{
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
}

.e-6ee5c69e .link > .link-icon
{
	font-size: 18px;
	color: var(--ot-text-3);
	flex-shrink: 0;
	transition: color 180ms;
}

.e-6ee5c69e .link:hover > .link-icon
{
	color: var(--ot-brand);
}

.e-6ee5c69e .link > .link-text
{
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	flex: 1;
}

.e-6ee5c69e .link > .link-text > .link-label
{
	font-size: 13px;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: var(--ot-text-1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.e-6ee5c69e .link > .link-text > .link-description
{
	font-size: 11.5px;
	color: var(--ot-text-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.e-6ee5c69e .link > .link-badge
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px 7px;
	background: var(--ot-brand-opacity);
	border-radius: 100px;
	font-size: 9.5px;
	font-weight: 700;
	color: var(--ot-brand);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	flex-shrink: 0;
}

/* ===== FEATURE CARD ===== */

.e-6ee5c69e .feature
{
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--ot-radius-m);
	overflow: hidden;
	color: white;
	background: var(--ot-bg-3);
	min-height: 260px;
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-6ee5c69e .feature:hover
{
	transform: translateY(-2px);
}

.e-6ee5c69e .feature > .feature-cover
{
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-6ee5c69e .feature:hover > .feature-cover
{
	transform: scale(1.04);
}

.e-6ee5c69e .feature > .feature-cover > .feature-overlay
{
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 18, 16, 0.0) 30%, rgba(20, 18, 16, 0.55) 75%, rgba(20, 18, 16, 0.85) 100%);
}

.e-6ee5c69e .feature > .feature-content
{
	position: relative;
	z-index: 1;
	margin-top: auto;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.e-6ee5c69e .feature > .feature-content > .feature-eyebrow
{
	font-size: 10.5px;
	font-weight: 700;
	color: rgba(255, 254, 252, 0.85);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.e-6ee5c69e .feature > .feature-content > .feature-title
{
	font-family: var(--ot-font-secondary);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: white;
	margin: 0;
	font-variation-settings: 'opsz' 144;
}

.e-6ee5c69e .feature > .feature-content > .feature-description
{
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(255, 254, 252, 0.82);
	margin: 0;
}

.e-6ee5c69e .feature > .feature-content > .feature-cta
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 600;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.e-6ee5c69e .feature > .feature-content > .feature-cta > i
{
	font-size: 16px;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-6ee5c69e .feature:hover > .feature-content > .feature-cta > i
{
	transform: translateX(4px);
}

/* ===== BOTTOM ===== */

.e-6ee5c69e > .holder > .bottom
{
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 12px 22px;
	background: var(--ot-bg-2);
	border-top: 1px solid var(--ot-bg-2-border);
}

.e-6ee5c69e .bottom-link
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
	color: var(--ot-text-2);
	transition: background 160ms, color 160ms;
}

.e-6ee5c69e .bottom-link:hover
{
	background: var(--ot-bg-1);
	color: var(--ot-text-1);
}

.e-6ee5c69e .bottom-link > i
{
	font-size: 15px;
	opacity: 0.75;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1100px)
{
	.e-6ee5c69e > .holder.width-l,
	.e-6ee5c69e > .holder.width-xl,
	.e-6ee5c69e > .holder.width-full
	{
		width: calc(100vw - 32px);
		max-width: 720px;
	}

	.e-6ee5c69e > .holder.has-feature > .body
	{
		grid-template-columns: 1fr;
	}

	.e-6ee5c69e .columns
	{
		grid-template-columns: repeat(2, 1fr);
	}
}

.e-730d9f10
{
	display: block;
}

/* ===== HOLDER ===== */

.e-730d9f10 > .holder
{
	min-width: var(--min-width, 200px);
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 6px;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
	overflow: hidden;
}

.e-730d9f10 > .holder.tone-dark
{
	background: var(--ot-text-1);
	border-color: rgba(255, 255, 255, 0.08);
}

/* ===== ENTRY ===== */

.e-730d9f10 .entry
{
	display: flex;
	flex-direction: column;
}

/* ===== SEPARATOR ===== */

.e-730d9f10 .entry.type-separator > .separator
{
	height: 1px;
	background: var(--ot-bg-2-border);
	margin: 4px 6px;
}

.e-730d9f10 > .holder.tone-dark .entry.type-separator > .separator
{
	background: rgba(255, 255, 255, 0.08);
}

/* ===== HEADER ===== */

.e-730d9f10 .entry.type-header > .header
{
	padding: 10px 12px 6px;
	font-size: 10px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

.e-730d9f10 > .holder.tone-dark .entry.type-header > .header
{
	color: rgba(255, 255, 255, 0.55);
}

/* ===== ROW (link or action) ===== */

.e-730d9f10 .row
{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: var(--ot-text-1);
	cursor: pointer;
	font: inherit;
	text-align: left;
	width: 100%;
	min-width: 0;
	position: relative;
	transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms;
}

.e-730d9f10 > .holder.tone-dark .row
{
	color: rgba(255, 255, 255, 0.85);
}

.e-730d9f10 .row:hover
{
	background: var(--ot-bg-2);
}

.e-730d9f10 > .holder.tone-dark .row:hover
{
	background: rgba(255, 255, 255, 0.08);
}

/* Active state */

.e-730d9f10 .entry.active > .row
{
	background: var(--ot-bg-2);
	color: var(--ot-text-1);
	font-weight: 600;
}

.e-730d9f10 .entry.active > .row::before
{
	content: '';
	position: absolute;
	left: -6px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: var(--ot-brand);
	border-radius: 2px;
}

.e-730d9f10 > .holder.tone-dark .entry.active > .row
{
	background: rgba(255, 255, 255, 0.12);
	color: white;
}

/* Danger state */

.e-730d9f10 .entry.danger > .row
{
	color: var(--ot-brand);
}

.e-730d9f10 .entry.danger > .row:hover
{
	background: var(--ot-brand-opacity);
}

/* ===== LEADING (icon / flag) ===== */

.e-730d9f10 .leading
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 1;
}

.e-730d9f10 .leading.flag
{
	font-size: 16px;
}

.e-730d9f10 .leading.icon > i
{
	font-size: 17px;
	color: var(--ot-text-3);
	transition: color 200ms;
}

.e-730d9f10 > .holder.tone-dark .leading.icon > i
{
	color: rgba(255, 255, 255, 0.55);
}

.e-730d9f10 .row:hover .leading.icon > i
{
	color: var(--ot-brand);
}

.e-730d9f10 .entry.active .leading.icon > i
{
	color: var(--ot-brand);
}

.e-730d9f10 .entry.danger .leading.icon > i
{
	color: var(--ot-brand);
}

/* Size adjustments */

.e-730d9f10 > .holder.size-s .leading.icon > i { font-size: 15px; }
.e-730d9f10 > .holder.size-s .leading.flag      { font-size: 14px; }
.e-730d9f10 > .holder.size-l .leading.icon > i { font-size: 19px; }
.e-730d9f10 > .holder.size-l .leading.flag      { font-size: 18px; }

/* ===== TEXT ===== */

.e-730d9f10 .text
{
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	flex: 1;
	line-height: 1.3;
}

.e-730d9f10 .label
{
	font-size: 13px;
	font-weight: 500;
	color: inherit;
	letter-spacing: -0.005em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.e-730d9f10 > .holder.size-s .label  { font-size: 12px; }
.e-730d9f10 > .holder.size-l .label  { font-size: 14px; }

.e-730d9f10 .description
{
	font-size: 11px;
	font-weight: 500;
	color: var(--ot-text-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.e-730d9f10 > .holder.tone-dark .description
{
	color: rgba(255, 255, 255, 0.55);
}

.e-730d9f10 > .holder.size-l .description { font-size: 11.5px; }

/* ===== BADGE ===== */

.e-730d9f10 .badge
{
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	background: var(--ot-brand);
	border-radius: 100px;
	font-size: 9.5px;
	font-weight: 700;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	flex-shrink: 0;
}

/* ===== SHORTCUT ===== */

.e-730d9f10 .shortcut
{
	font-family: var(--ot-font-secondary);
	font-size: 11px;
	font-weight: 500;
	color: var(--ot-text-3);
	font-variation-settings: 'opsz' 144;
	letter-spacing: 0;
	flex-shrink: 0;
	padding: 2px 6px;
	background: var(--ot-bg-2);
	border-radius: 4px;
}

.e-730d9f10 > .holder.tone-dark .shortcut
{
	color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.08);
}

.e-452637df
{
	display: block;
	width: 100%;
	z-index: 100;
}

.e-452637df > .holder
{
	width: 100%;
	transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1), border-color 240ms, padding 240ms;
}

.e-452637df > .holder.sticky
{
	position: sticky;
	top: 0;
}

.e-452637df > .holder.tone-light
{
	background: var(--ot-bg-1);
	border-bottom: 1px solid transparent;
}

.e-452637df > .holder.tone-light.scrolled
{
	border-bottom-color: var(--ot-bg-2-border);
	background: var(--ot-bg-1-opacity);
	backdrop-filter: blur(14px) saturate(180%);
	-webkit-backdrop-filter: blur(14px) saturate(180%);
}

.e-452637df > .holder.tone-dark
{
	background: var(--ot-text-1);
	color: white;
	border-bottom: 1px solid transparent;
}

.e-452637df > .holder.tone-dark.scrolled
{
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* ===== INNER ===== */

.e-452637df > .holder > .inner
{
	display: flex;
	align-items: center;
	gap: 32px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 32px;
	min-height: 76px;
	transition: min-height 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-452637df > .holder.scrolled > .inner
{
	min-height: 64px;
}

/* ===== BRAND ===== */

.e-452637df .brand
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	color: inherit;
	transition: opacity 180ms;
}

.e-452637df .brand:hover
{
	opacity: 0.78;
}

.e-452637df .brand > .brand-logo
{
	height: 32px;
	width: auto;
	display: block;
}

.e-452637df .brand > .brand-name
{
	font-family: var(--ot-font-secondary);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.02em;
	font-variation-settings: 'opsz' 144;
}

/* ===== LINKS ===== */

.e-452637df > .holder > .inner > .links
{
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 1;
	margin-left: 16px;
}

.e-452637df .link-wrap
{
	display: contents;
}

.e-452637df .link
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	background: transparent;
	border: 0;
	border-radius: 8px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: var(--ot-text-2);
	white-space: nowrap;
	cursor: pointer;
	transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1), color 180ms;
}

.e-452637df > .holder.tone-dark .link
{
	color: rgba(255, 255, 255, 0.78);
}

.e-452637df .link:hover
{
	background: var(--ot-bg-2);
	color: var(--ot-text-1);
}

.e-452637df > .holder.tone-dark .link:hover
{
	background: rgba(255, 255, 255, 0.08);
	color: white;
}

.e-452637df .link.active
{
	color: var(--ot-text-1);
	font-weight: 600;
}

.e-452637df > .holder.tone-dark .link.active
{
	color: white;
}

.e-452637df .link > .link-icon
{
	font-size: 17px;
	opacity: 0.85;
}

.e-452637df .link > .link-badge
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px 7px;
	background: var(--ot-brand);
	border-radius: 100px;
	font-size: 9.5px;
	font-weight: 700;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-left: 2px;
}

.e-452637df .link > .link-chevron
{
	font-size: 16px;
	margin-left: -2px;
	opacity: 0.6;
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-452637df .link.has-megamenu:hover > .link-chevron
{
	transform: translateY(1px);
}

/* ===== RIGHT ===== */

.e-452637df > .holder > .inner > .right
{
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.e-452637df .action
{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--ot-text-2);
	transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1), color 180ms;
}

.e-452637df > .holder.tone-dark .action
{
	color: rgba(255, 255, 255, 0.78);
}

.e-452637df .action:hover
{
	background: var(--ot-bg-2);
	color: var(--ot-text-1);
}

.e-452637df > .holder.tone-dark .action:hover
{
	background: rgba(255, 255, 255, 0.08);
	color: white;
}

.e-452637df .action > i
{
	font-size: 21px;
}

.e-452637df .action > .action-badge
{
	position: absolute;
	top: 4px;
	right: 4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ot-brand);
	border: 2px solid var(--ot-bg-1);
	border-radius: 100px;
	font-size: 9.5px;
	font-weight: 700;
	color: white;
	letter-spacing: 0;
}

.e-452637df > .holder.tone-dark .action > .action-badge
{
	border-color: var(--ot-text-1);
}

/* ===== CTA ===== */

.e-452637df .cta
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: 8px;
	padding: 11px 20px;
	background: var(--ot-text-1);
	border-radius: 100px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--ot-bg-1);
	transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 220ms;
}

.e-452637df .cta:hover
{
	background: var(--ot-brand);
	color: white;
	transform: translateY(-1px);
}

.e-452637df > .holder.tone-dark .cta
{
	background: var(--ot-bg-1);
	color: var(--ot-text-1);
}

.e-452637df > .holder.tone-dark .cta:hover
{
	background: var(--ot-brand);
	color: white;
}

.e-452637df .cta > i
{
	font-size: 16px;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1100px)
{
	.e-452637df > .holder > .inner
	{
		padding: 0 20px;
		gap: 16px;
	}

	.e-452637df .link
	{
		padding: 10px 10px;
		font-size: 13px;
	}
}

@media (max-width: 900px)
{
	.e-452637df > .holder > .inner > .links
	{
		display: none;
	}
}

.e-ef22c0a
{
	display: block;
	width: 100%;
}

.e-ef22c0a > .holder
{
	position: relative;
	overflow: hidden;
	border-radius: var(--ot-radius-l);
}

/* ===== TONES ===== */

.e-ef22c0a > .holder.tone-dark
{
	background: var(--ot-text-1);
	color: white;
}

.e-ef22c0a > .holder.tone-light
{
	background: var(--ot-bg-2);
	color: var(--ot-text-1);
	border: 1px solid var(--ot-bg-2-border);
}

.e-ef22c0a > .holder.variant-brand
{
	background: linear-gradient(135deg, var(--ot-brand) 0%, rgba(170, 16, 24, 1) 100%);
	color: white;
}

/* ===== FULL VARIANT (image background) ===== */

.e-ef22c0a > .holder.variant-full
{
	background: var(--ot-bg-3);
	color: white;
}

.e-ef22c0a > .holder.variant-full > .cover
{
	position: absolute;
	inset: 0;
	background-color: var(--ot-bg-3);
}

.e-ef22c0a > .holder.variant-full > .cover::before
{
	content: '';
	position: absolute;
	inset: 0;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.e-ef22c0a > .holder.variant-full > .cover > .cover-overlay
{
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(135deg, rgba(20, 18, 16, 0.78) 0%, rgba(20, 18, 16, 0.5) 100%);
}

/* ===== CONTENT ===== */

.e-ef22c0a > .holder > .content
{
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 0;
	padding: 56px 56px;
}

.e-ef22c0a > .holder.variant-split.has-image > .content
{
	grid-template-columns: 1.2fr 1fr;
	gap: 48px;
	padding: 56px 56px 56px 64px;
}

.e-ef22c0a > .holder.variant-compact > .content
{
	padding: 36px 40px;
}

/* ===== TEXT ===== */

.e-ef22c0a .text
{
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 580px;
}

/* Eyebrow */

.e-ef22c0a .eyebrow
{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
}

.e-ef22c0a > .holder.tone-dark .eyebrow,
.e-ef22c0a > .holder.variant-full .eyebrow
{
	color: rgba(255, 254, 252, 0.85);
}

.e-ef22c0a > .holder.tone-light .eyebrow
{
	color: var(--ot-brand);
}

.e-ef22c0a > .holder.variant-brand .eyebrow
{
	color: rgba(255, 254, 252, 0.85);
}

.e-ef22c0a .eyebrow > .eyebrow-mark
{
	width: 28px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

/* Title */

.e-ef22c0a .title
{
	font-family: var(--ot-font-secondary);
	font-size: 44px;
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 0;
	font-variation-settings: 'opsz' 144;
}

.e-ef22c0a > .holder.variant-compact .title
{
	font-size: 32px;
}

.e-ef22c0a .title em
{
	font-style: italic;
	color: var(--ot-brand);
}

.e-ef22c0a > .holder.tone-dark .title,
.e-ef22c0a > .holder.variant-full .title,
.e-ef22c0a > .holder.variant-brand .title
{
	color: white;
}

.e-ef22c0a > .holder.variant-brand .title em
{
	color: white;
	opacity: 0.85;
}

.e-ef22c0a > .holder.variant-full .title em
{
	color: white;
	font-style: italic;
}

/* Description */

.e-ef22c0a .description
{
	font-size: 14.5px;
	line-height: 1.65;
	margin: 0;
	max-width: 480px;
	opacity: 0.85;
}

/* Perks */

.e-ef22c0a .perks
{
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 4px 0 8px;
	padding: 0;
	list-style: none;
}

.e-ef22c0a .perk
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.005em;
}

.e-ef22c0a .perk > i
{
	font-size: 16px;
	color: var(--ot-brand);
}

.e-ef22c0a > .holder.tone-dark .perk > i,
.e-ef22c0a > .holder.variant-full .perk > i
{
	color: rgba(255, 254, 252, 0.85);
}

.e-ef22c0a > .holder.variant-brand .perk > i
{
	color: white;
	opacity: 0.85;
}

/* ===== FORM ===== */

.e-ef22c0a .form
{
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 6px;
}

.e-ef22c0a .form-row
{
	display: flex;
	align-items: stretch;
	gap: 8px;
	background: var(--ot-bg-1);
	border: 1px solid transparent;
	border-radius: 100px;
	padding: 6px 6px 6px 18px;
	max-width: 480px;
	transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-ef22c0a > .holder.tone-light .form-row
{
	border-color: var(--ot-bg-3-border);
}

.e-ef22c0a .form-row:focus-within
{
	border-color: var(--ot-brand);
}

.e-ef22c0a .form-input
{
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
}

.e-ef22c0a .form-icon
{
	font-size: 18px;
	color: var(--ot-text-3);
	flex-shrink: 0;
}

.e-ef22c0a .form-input > input
{
	width: 100%;
	height: 44px;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: 0.005em;
	outline: none;
}

.e-ef22c0a .form-input > input::placeholder
{
	color: var(--ot-text-3);
}

.e-ef22c0a .form-cta
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	background: var(--ot-text-1);
	border: 0;
	border-radius: 100px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.005em;
	color: var(--ot-bg-1);
	cursor: pointer;
	transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1), gap 240ms;
}

.e-ef22c0a .form-cta:hover
{
	background: var(--ot-brand);
	color: white;
	gap: 12px;
}

.e-ef22c0a > .holder.variant-brand .form-cta
{
	background: var(--ot-bg-1);
	color: var(--ot-text-1);
}

.e-ef22c0a > .holder.variant-brand .form-cta:hover
{
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
}

.e-ef22c0a .form-cta > i
{
	font-size: 17px;
}

/* Disclaimer */

.e-ef22c0a .form-disclaimer
{
	display: block;
	font-size: 11px;
	line-height: 1.55;
	margin: 0;
	max-width: 480px;
	opacity: 0.6;
}

.e-ef22c0a .form-disclaimer > span
{
	display: inline;
}

.e-ef22c0a .form-disclaimer a
{
	display: inline;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ===== SIDE IMAGE (split variant) ===== */

.e-ef22c0a .side
{
	position: relative;
	min-height: 340px;
	border-radius: var(--ot-radius-m);
	background-size: cover;
	background-position: center;
	background-color: var(--ot-bg-3);
	overflow: hidden;
}

.e-ef22c0a .side > .side-decoration
{
	position: absolute;
	inset: 0;
	background:
		linear-gradient(160deg, rgba(20, 18, 16, 0.0) 60%, rgba(20, 18, 16, 0.32) 100%);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1100px)
{
	.e-ef22c0a > .holder.variant-split.has-image > .content
	{
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 44px 40px;
	}

	.e-ef22c0a .side
	{
		min-height: 220px;
	}
}

@media (max-width: 700px)
{
	.e-ef22c0a > .holder > .content
	{
		padding: 36px 28px;
	}

	.e-ef22c0a .title
	{
		font-size: 32px;
	}

	.e-ef22c0a .form-row
	{
		flex-direction: column;
		padding: 8px;
		border-radius: var(--ot-radius-m);
	}

	.e-ef22c0a .form-input
	{
		padding: 4px 10px;
	}

	.e-ef22c0a .form-cta
	{
		justify-content: center;
		padding: 14px 22px;
		border-radius: 100px;
	}
}

.e-2120f33a
{
	display: block;
}

.e-2120f33a > .holder
{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	pointer-events: none;
}

/* ===== TRIGGER ===== */

.e-2120f33a .trigger
{
	position: fixed;
	bottom: 28px;
	right: 28px;
	z-index: 91;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	background: var(--ot-text-1);
	border: 0;
	border-radius: 50%;
	color: var(--ot-bg-1);
	cursor: pointer;
	pointer-events: auto;
	transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1), transform 240ms;
}

.e-2120f33a > .holder.position-left .trigger
{
	right: auto;
	left: 28px;
}

.e-2120f33a .trigger:hover
{
	background: var(--ot-brand);
	transform: scale(1.06);
}

.e-2120f33a > .holder.is-open .trigger
{
	background: var(--ot-brand);
	transform: scale(0.92);
}

.e-2120f33a .trigger > .trigger-icon
{
	font-size: 26px;
	z-index: 1;
	font-variation-settings: 'FILL' 1;
}

.e-2120f33a .trigger > .trigger-pulse
{
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 2px solid var(--ot-text-1);
	opacity: 0;
	animation: e-2120f33a-pulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes e-2120f33a-pulse
{
	0%   { transform: scale(0.95); opacity: 0.5; }
	70%  { transform: scale(1.15); opacity: 0; }
	100% { transform: scale(1.15); opacity: 0; }
}

.e-2120f33a > .holder.is-open .trigger > .trigger-pulse
{
	display: none;
}

/* ===== BACKDROP ===== */

.e-2120f33a .backdrop
{
	position: fixed;
	inset: 0;
	z-index: 89;
	background: rgba(20, 18, 16, 0.45);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	pointer-events: auto;
	animation: e-2120f33a-fade 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes e-2120f33a-fade
{
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ===== PANEL ===== */

.e-2120f33a .panel
{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	width: 100%;
	max-width: 420px;
	background: var(--ot-bg-1);
	border-left: 1px solid var(--ot-bg-2-border);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: auto;
	overflow: hidden;
}

.e-2120f33a > .holder.position-left .panel
{
	right: auto;
	left: 0;
	border-left: 0;
	border-right: 1px solid var(--ot-bg-2-border);
	transform: translateX(-100%);
}

.e-2120f33a > .holder.is-open .panel
{
	transform: translateX(0);
}

/* ===== HEAD ===== */

.e-2120f33a .panel-head
{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 28px 28px 24px;
	border-bottom: 1px solid var(--ot-bg-2-border);
	flex-shrink: 0;
}

.e-2120f33a .panel-head-text
{
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.e-2120f33a .panel-eyebrow
{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 11px;
	font-weight: 700;
	color: var(--ot-brand);
	text-transform: uppercase;
	letter-spacing: 0.18em;
}

.e-2120f33a .panel-eyebrow > .panel-eyebrow-mark
{
	width: 22px;
	height: 1px;
	background: var(--ot-brand);
}

.e-2120f33a .panel-title
{
	font-family: var(--ot-font-secondary);
	font-size: 26px;
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--ot-text-1);
	margin: 0;
	font-variation-settings: 'opsz' 144;
}

.e-2120f33a .panel-subtitle
{
	font-size: 13px;
	line-height: 1.55;
	color: var(--ot-text-2);
	margin: 0;
}

.e-2120f33a .panel-close
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--ot-bg-2);
	border: 0;
	border-radius: 50%;
	color: var(--ot-text-1);
	cursor: pointer;
	flex-shrink: 0;
	transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1), transform 200ms;
}

.e-2120f33a .panel-close:hover
{
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
	transform: rotate(90deg);
}

.e-2120f33a .panel-close > i
{
	font-size: 18px;
}

/* ===== BODY ===== */

.e-2120f33a .panel-body
{
	flex: 1;
	overflow-y: auto;
	padding: 24px 28px 28px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ===== CONTACTS GRID ===== */

.e-2120f33a .contacts
{
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.e-2120f33a .contact
{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
	color: inherit;
	transition: border-color 240ms cubic-bezier(0.22, 1, 0.36, 1), background 240ms, transform 240ms;
}

.e-2120f33a .contact:hover
{
	background: var(--ot-bg-1);
	border-color: var(--ot-bg-3-border);
	transform: translateX(2px);
}

.e-2120f33a .contact-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--ot-bg-1);
	color: var(--ot-text-1);
	flex-shrink: 0;
	transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1), color 240ms;
}

.e-2120f33a .contact:hover .contact-icon
{
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
}

.e-2120f33a .contact.accent-brand:hover  .contact-icon { background: var(--ot-brand);             color: white; }
.e-2120f33a .contact.accent-green:hover  .contact-icon { background: rgba(20, 144, 95, 1);        color: white; }
.e-2120f33a .contact.accent-blue:hover   .contact-icon { background: rgba(40, 100, 200, 1);       color: white; }
.e-2120f33a .contact.accent-purple:hover .contact-icon { background: rgba(110, 60, 180, 1);       color: white; }

.e-2120f33a .contact-icon > i
{
	font-size: 19px;
}

.e-2120f33a .contact-text
{
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	flex: 1;
	line-height: 1.3;
}

.e-2120f33a .contact-label
{
	font-size: 10.5px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.e-2120f33a .contact-value
{
	font-size: 14px;
	font-weight: 600;
	color: var(--ot-text-1);
}

.e-2120f33a .contact-arrow
{
	font-size: 16px;
	color: var(--ot-text-3);
	flex-shrink: 0;
	transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1), transform 200ms;
}

.e-2120f33a .contact:hover .contact-arrow
{
	color: var(--ot-brand);
	transform: translateX(3px);
}

/* ===== FORM ===== */

.e-2120f33a .form
{
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 4px;
	border-top: 1px solid var(--ot-bg-2-border);
}

.e-2120f33a .form-head
{
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 16px;
	margin-bottom: 8px;
}

.e-2120f33a .form-title
{
	font-family: var(--ot-font-secondary);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.012em;
	color: var(--ot-text-1);
	margin: 0;
	font-variation-settings: 'opsz' 144;
}

.e-2120f33a .form-description
{
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ot-text-2);
	margin: 0;
}

/* Field */

.e-2120f33a .field
{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
	transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1), background 200ms;
}

.e-2120f33a .field:focus-within
{
	border-color: var(--ot-brand);
	background: var(--ot-bg-1);
}

.e-2120f33a .field-textarea
{
	align-items: flex-start;
	padding-top: 14px;
}

.e-2120f33a .field-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	color: var(--ot-text-3);
	flex-shrink: 0;
	transition: color 200ms;
}

.e-2120f33a .field:focus-within .field-icon
{
	color: var(--ot-brand);
}

.e-2120f33a .field input,
.e-2120f33a .field textarea
{
	width: 100%;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: 0.005em;
	outline: none;
	resize: none;
}

.e-2120f33a .field input::placeholder,
.e-2120f33a .field textarea::placeholder
{
	color: var(--ot-text-3);
}

.e-2120f33a .field textarea
{
	min-height: 60px;
	line-height: 1.55;
}

/* Form CTA */

.e-2120f33a .form-cta
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 6px;
	padding: 14px 22px;
	background: var(--ot-text-1);
	border: 0;
	border-radius: 100px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.005em;
	color: var(--ot-bg-1);
	cursor: pointer;
	transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1), gap 240ms, transform 240ms;
}

.e-2120f33a .form-cta:hover
{
	background: var(--ot-brand);
	color: white;
	gap: 12px;
	transform: translateY(-1px);
}

.e-2120f33a .form-cta > i
{
	font-size: 17px;
}

/* ===== FOOT ===== */

.e-2120f33a .panel-foot
{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 28px;
	background: var(--ot-bg-2);
	border-top: 1px solid var(--ot-bg-2-border);
	flex-shrink: 0;
}

.e-2120f33a .panel-foot > i
{
	font-size: 20px;
	color: var(--ot-brand);
	flex-shrink: 0;
}

.e-2120f33a .panel-foot-text
{
	display: flex;
	flex-direction: column;
	gap: 1px;
	line-height: 1.3;
	min-width: 0;
}

.e-2120f33a .panel-foot-label
{
	font-size: 10.5px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.e-2120f33a .panel-foot-value
{
	font-size: 13px;
	font-weight: 600;
	color: var(--ot-text-1);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 600px)
{
	.e-2120f33a .trigger
	{
		bottom: 20px;
		right: 20px;
		width: 52px;
		height: 52px;
	}

	.e-2120f33a > .holder.position-left .trigger
	{
		left: 20px;
	}

	.e-2120f33a .panel
	{
		max-width: 100%;
	}

	.e-2120f33a .panel-head
	{
		padding: 22px 22px 20px;
	}

	.e-2120f33a .panel-body
	{
		padding: 20px 22px 22px;
	}

	.e-2120f33a .panel-foot
	{
		padding: 16px 22px;
	}
}

.e-47aff2f
{
	display: block;
	width: 100%;
}

.e-47aff2f > .holder
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 42px;
	padding: 0 32px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.005em;
}

.e-47aff2f > .holder.tone-light
{
	background: var(--ot-bg-1);
	color: var(--ot-text-2);
	border-bottom: 1px solid var(--ot-bg-2-border);
}

.e-47aff2f > .holder.tone-dark
{
	background: var(--ot-text-1);
	color: rgba(255, 255, 255, 0.78);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ===== ROWS ===== */

.e-47aff2f > .holder > .left,
.e-47aff2f > .holder > .right
{
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.e-47aff2f > .holder > .left
{
	flex-shrink: 0;
}

/* ===== ITEM ===== */

.e-47aff2f .item
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: inherit;
	cursor: pointer;
	white-space: nowrap;
	font: inherit;
	transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1), color 180ms;
}

.e-47aff2f > .holder.tone-light .item:hover
{
	background: var(--ot-bg-2);
	color: var(--ot-text-1);
}

.e-47aff2f > .holder.tone-dark .item:hover
{
	background: rgba(255, 255, 255, 0.08);
	color: white;
}

.e-47aff2f .item.phone
{
	font-weight: 600;
	color: var(--ot-text-1);
}

.e-47aff2f > .holder.tone-dark .item.phone
{
	color: white;
}

.e-47aff2f .item > i
{
	font-size: 15px;
	opacity: 0.85;
}

.e-47aff2f .item > .badge
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1px 6px;
	background: var(--ot-brand);
	border-radius: 100px;
	font-size: 9.5px;
	font-weight: 700;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-left: 2px;
}

.e-47aff2f .dropdown-trigger > .chevron
{
	font-size: 14px;
	margin-left: -2px;
	opacity: 0.6;
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-47aff2f .avatar
{
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-color: var(--ot-bg-3);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1100px)
{
	.e-47aff2f > .holder
	{
		padding: 0 20px;
		gap: 16px;
	}

	.e-47aff2f .item
	{
		padding: 6px 10px;
	}
}

@media (max-width: 900px)
{
	.e-47aff2f > .holder
	{
		display: none;
	}
}

.e-8d5a0f0
{
	display: block;
	width: 100%;
}

/* ===== HOLDER ===== */

.e-8d5a0f0 > .holder
{
	display: flex;
	flex-direction: column;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-l);
	overflow: hidden;
	position: sticky;
	top: 96px;
}

/* ===== HEAD ===== */

.e-8d5a0f0 .head
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--ot-bg-2-border);
	flex-shrink: 0;
	background: var(--ot-bg-1);
}

.e-8d5a0f0 .head-left
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.e-8d5a0f0 .head-icon
{
	font-size: 19px;
	color: var(--ot-brand);
}

.e-8d5a0f0 .head-title
{
	font-family: var(--ot-font-secondary);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.012em;
	color: var(--ot-text-1);
	margin: 0;
	font-variation-settings: 'opsz' 144;
}

.e-8d5a0f0 .head-clear
{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 10px;
	background: transparent;
	border: 0;
	border-radius: 6px;
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1), background 200ms;
}

.e-8d5a0f0 .head-clear:hover
{
	color: var(--ot-brand);
	background: var(--ot-brand-opacity);
}

.e-8d5a0f0 .head-clear > i
{
	font-size: 14px;
}

/* ===== BODY ===== */

.e-8d5a0f0 .body
{
	padding: 4px 0;
}

/* ===== GROUP ===== */

.e-8d5a0f0 .group
{
	border-bottom: 1px solid var(--ot-bg-2-border);
}

.e-8d5a0f0 .group:last-child
{
	border-bottom: 0;
}

.e-8d5a0f0 .group-head
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 22px;
	background: transparent;
	border: 0;
	color: var(--ot-text-1);
	cursor: pointer;
	font: inherit;
	width: 100%;
}

.e-8d5a0f0 .group-head-text
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.e-8d5a0f0 .group-head-icon
{
	font-size: 16px;
	color: var(--ot-text-3);
	transition: color 200ms;
}

.e-8d5a0f0 .group.has-value .group-head-icon
{
	color: var(--ot-brand);
}

.e-8d5a0f0 .group-label
{
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ot-text-1);
	letter-spacing: -0.005em;
}

.e-8d5a0f0 .group-count
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	padding: 1px 6px;
	background: var(--ot-brand);
	border-radius: 100px;
	font-family: var(--ot-font-secondary);
	font-size: 10.5px;
	font-weight: 500;
	color: white;
	font-variation-settings: 'opsz' 144;
}

.e-8d5a0f0 .group-chevron
{
	font-size: 18px;
	color: var(--ot-text-3);
	transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-8d5a0f0 .group.is-collapsed .group-chevron
{
	transform: rotate(-90deg);
}

.e-8d5a0f0 .group-body
{
	padding: 0 22px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.e-8d5a0f0 .group.is-collapsed .group-body
{
	display: none;
}

/* ===== SEARCH ===== */

.e-8d5a0f0 .search
{
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
	transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-8d5a0f0 .search:focus-within
{
	border-color: var(--ot-brand);
	background: var(--ot-bg-1);
}

.e-8d5a0f0 .search-icon
{
	font-size: 16px;
	color: var(--ot-text-3);
	flex-shrink: 0;
}

.e-8d5a0f0 .search > input
{
	flex: 1;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--ot-text-1);
	outline: none;
}

.e-8d5a0f0 .search > input::placeholder
{
	color: var(--ot-text-3);
}

/* ===== OPTIONS (checkbox / radio) ===== */

.e-8d5a0f0 .options
{
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.e-8d5a0f0 .options-search
{
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-s);
	margin-bottom: 6px;
	transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-8d5a0f0 .options-search:focus-within
{
	border-color: var(--ot-brand);
	background: var(--ot-bg-1);
}

.e-8d5a0f0 .options-search > i
{
	font-size: 14px;
	color: var(--ot-text-3);
	flex-shrink: 0;
}

.e-8d5a0f0 .options-search > input
{
	flex: 1;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	color: var(--ot-text-1);
	outline: none;
}

/* OPTION */

.e-8d5a0f0 .option
{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	border-radius: 6px;
	cursor: pointer;
	transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-8d5a0f0 .option:hover
{
	background: var(--ot-bg-2);
}

.e-8d5a0f0 .option-control
{
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
}

.e-8d5a0f0 .option-control > input
{
	position: absolute;
	opacity: 0;
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.e-8d5a0f0 .option-mark
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	background: var(--ot-bg-1);
	border: 1.5px solid var(--ot-bg-3-border);
	border-radius: 4px;
	transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms;
}

.e-8d5a0f0 .group-radio .option-mark
{
	border-radius: 50%;
}

.e-8d5a0f0 .option-mark > i
{
	font-size: 14px;
	color: white;
	opacity: 0;
	transition: opacity 180ms;
	font-variation-settings: 'FILL' 1;
}

.e-8d5a0f0 .option.is-checked .option-mark
{
	background: var(--ot-brand);
	border-color: var(--ot-brand);
}

.e-8d5a0f0 .option.is-checked .option-mark > i
{
	opacity: 1;
}

.e-8d5a0f0 .group-radio .option.is-checked .option-mark > i
{
	font-size: 8px;
	color: white;
}

.e-8d5a0f0 .option-flag
{
	font-size: 16px;
	line-height: 1;
	flex-shrink: 0;
}

.e-8d5a0f0 .option-icon
{
	font-size: 17px;
	color: var(--ot-text-3);
	flex-shrink: 0;
	transition: color 180ms;
}

.e-8d5a0f0 .option.is-checked .option-icon
{
	color: var(--ot-brand);
}

.e-8d5a0f0 .option-label
{
	font-size: 13px;
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: -0.002em;
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.e-8d5a0f0 .option.is-checked .option-label
{
	font-weight: 600;
}

.e-8d5a0f0 .option-count
{
	font-size: 11px;
	font-weight: 500;
	color: var(--ot-text-3);
	flex-shrink: 0;
	letter-spacing: 0;
}

/* Expand button */

.e-8d5a0f0 .option-expand
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 8px;
	background: transparent;
	border: 0;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var(--ot-brand);
	cursor: pointer;
	margin-top: 4px;
	width: fit-content;
	transition: gap 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-8d5a0f0 .option-expand:hover
{
	gap: 8px;
}

.e-8d5a0f0 .option-expand > i
{
	font-size: 14px;
}

/* ===== RANGE ===== */

.e-8d5a0f0 .range-fields
{
	display: flex;
	align-items: center;
	gap: 8px;
}

.e-8d5a0f0 .range-field
{
	flex: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-s);
	transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
	cursor: text;
	min-width: 0;
}

.e-8d5a0f0 .range-field:focus-within
{
	border-color: var(--ot-brand);
	background: var(--ot-bg-1);
}

.e-8d5a0f0 .range-label
{
	font-size: 9.5px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	flex-shrink: 0;
}

.e-8d5a0f0 .range-field > input
{
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ot-text-1);
	outline: none;
	-moz-appearance: textfield;
	width: 100%;
	min-width: 0;
	flex: 1;
}

.e-8d5a0f0 .range-field > input::-webkit-outer-spin-button,
.e-8d5a0f0 .range-field > input::-webkit-inner-spin-button
{
	-webkit-appearance: none;
	margin: 0;
}

.e-8d5a0f0 .range-unit
{
	font-size: 11px;
	font-weight: 600;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	flex-shrink: 0;
}

.e-8d5a0f0 .range-sep
{
	font-size: 13px;
	color: var(--ot-text-3);
	flex-shrink: 0;
}

/* ===== STARS ===== */

.e-8d5a0f0 .stars
{
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.e-8d5a0f0 .star-row
{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	background: transparent;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	font: inherit;
	width: 100%;
	transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-8d5a0f0 .star-row:hover
{
	background: var(--ot-bg-2);
}

.e-8d5a0f0 .star-row.is-checked
{
	background: var(--ot-brand-opacity);
}

.e-8d5a0f0 .star-icons
{
	display: inline-flex;
	gap: 1px;
}

.e-8d5a0f0 .star-icons > .star-on
{
	font-size: 16px;
	color: rgba(220, 165, 50, 1);
	font-variation-settings: 'FILL' 1;
}

.e-8d5a0f0 .star-icons > .star-off
{
	font-size: 16px;
	color: var(--ot-bg-3);
}

.e-8d5a0f0 .star-label
{
	font-size: 12px;
	font-weight: 500;
	color: var(--ot-text-3);
	letter-spacing: 0.005em;
}

.e-8d5a0f0 .star-row.is-checked .star-label
{
	color: var(--ot-text-1);
	font-weight: 600;
}

/* ===== FOOT (apply) ===== */

.e-8d5a0f0 .foot
{
	padding: 14px 22px;
	border-top: 1px solid var(--ot-bg-2-border);
	background: var(--ot-bg-1);
	flex-shrink: 0;
}

.e-8d5a0f0 .apply
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 14px 18px;
	background: var(--ot-text-1);
	border: 0;
	border-radius: 100px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--ot-bg-1);
	letter-spacing: 0.005em;
	cursor: pointer;
	transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1), gap 240ms;
}

.e-8d5a0f0 .apply:hover
{
	background: var(--ot-brand);
	color: white;
	gap: 12px;
}

.e-8d5a0f0 .apply-count
{
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	background: rgba(255, 255, 255, 0.18);
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
}

.e-8d5a0f0 .apply > i
{
	font-size: 17px;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 900px)
{
	.e-8d5a0f0 > .holder
	{
		position: relative;
		top: auto;
		max-height: none;
	}
}

.e-6a07c313
{
	display: block;
	width: 100%;
}

.e-6a07c313 > .holder
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 0;
}

/* ===== COUNTER ===== */

.e-6a07c313 .counter
{
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	flex-shrink: 0;
}

.e-6a07c313 .counter-label
{
	font-size: 10.5px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin-right: 2px;
}

.e-6a07c313 .counter-value
{
	font-family: var(--ot-font-secondary);
	font-size: 22px;
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: -0.02em;
	font-variation-settings: 'opsz' 144;
}

.e-6a07c313 .counter-sep
{
	font-size: 13px;
	font-weight: 500;
	color: var(--ot-text-3);
	letter-spacing: 0.005em;
}

.e-6a07c313 .counter-total
{
	font-family: var(--ot-font-secondary);
	font-size: 14px;
	font-weight: 500;
	color: var(--ot-text-3);
	letter-spacing: -0.01em;
	font-variation-settings: 'opsz' 144;
}

/* ===== PAGES (left) ===== */

.e-6a07c313 .pages
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* ===== ASIDE (counter + per-page on the right) ===== */

.e-6a07c313 .aside
{
	display: inline-flex;
	align-items: center;
	gap: 24px;
	flex-shrink: 0;
}

/* Arrow */

.e-6a07c313 .arrow
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 50%;
	color: var(--ot-text-1);
	cursor: pointer;
	font: inherit;
	transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms, border-color 220ms, transform 220ms;
}

.e-6a07c313 .arrow:hover:not(:disabled)
{
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
	border-color: var(--ot-text-1);
	transform: scale(1.04);
}

.e-6a07c313 .arrow:disabled
{
	opacity: 0.3;
	cursor: not-allowed;
}

.e-6a07c313 .arrow > i
{
	font-size: 18px;
}

/* Page number */

.e-6a07c313 .page
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 50%;
	font-family: var(--ot-font-secondary);
	font-size: 14px;
	font-weight: 500;
	color: var(--ot-text-2);
	letter-spacing: -0.005em;
	cursor: pointer;
	font-variation-settings: 'opsz' 144;
	transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms, border-color 220ms, transform 220ms;
}

.e-6a07c313 .page:hover:not(:disabled):not(.is-active)
{
	background: var(--ot-bg-2);
	color: var(--ot-text-1);
	border-color: var(--ot-bg-2-border);
}

.e-6a07c313 .page.is-active
{
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
	font-weight: 600;
	border-color: var(--ot-text-1);
	cursor: default;
}

.e-6a07c313 .page.is-dots
{
	cursor: default;
	color: var(--ot-text-3);
}

.e-6a07c313 .page.is-dots:hover
{
	background: transparent;
	border-color: transparent;
}

.e-6a07c313 .page.is-dots > i
{
	font-size: 18px;
}

/* ===== PER-PAGE ===== */

.e-6a07c313 .per-page
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.e-6a07c313 .per-page-select
{
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 36px 0 16px;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 100px;
	font-family: var(--ot-font-secondary);
	font-size: 14px;
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: -0.005em;
	font-variation-settings: 'opsz' 144;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23787878' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-6a07c313 .per-page-select:hover,
.e-6a07c313 .per-page-select:focus
{
	border-color: var(--ot-bg-3-border);
	outline: none;
}

.e-6a07c313 .per-page-label
{
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 900px)
{
	.e-6a07c313 > .holder
	{
		flex-wrap: wrap;
		gap: 16px;
		justify-content: center;
	}

	.e-6a07c313 .pages
	{
		flex: 1 1 100%;
		justify-content: center;
		flex-wrap: wrap;
	}

	.e-6a07c313 .aside
	{
		flex: 1 1 100%;
		justify-content: center;
		flex-wrap: wrap;
	}
}

@media (max-width: 600px)
{
	.e-6a07c313 .arrow
	{
		width: 36px;
		height: 36px;
	}

	.e-6a07c313 .page
	{
		min-width: 36px;
		height: 36px;
		font-size: 13px;
	}
}

.e-13096690
{
	display: block;
	width: 100%;
}

.e-13096690 > .holder
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--ot-bg-2-border);
}

/* ===== LEFT (count + filter trigger) ===== */

.e-13096690 .left
{
	display: inline-flex;
	align-items: center;
	gap: 16px;
	flex: 1;
	min-width: 0;
}

.e-13096690 .filter-trigger
{
	display: none;
	align-items: center;
	gap: 8px;
	padding: 10px 16px 10px 14px;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 100px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ot-text-1);
	letter-spacing: 0.005em;
	cursor: pointer;
	transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1), background 200ms;
}

.e-13096690 .filter-trigger:hover
{
	border-color: var(--ot-bg-3-border);
	background: var(--ot-bg-2);
}

.e-13096690 .filter-trigger > i
{
	font-size: 16px;
	color: var(--ot-brand);
}

.e-13096690 .filter-trigger-count
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	padding: 1px 6px;
	background: var(--ot-brand);
	border-radius: 100px;
	font-family: var(--ot-font-secondary);
	font-size: 10.5px;
	font-weight: 500;
	color: white;
	font-variation-settings: 'opsz' 144;
	letter-spacing: 0;
}

/* Count */

.e-13096690 .count
{
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
}

.e-13096690 .count-value
{
	font-family: var(--ot-font-secondary);
	font-size: 22px;
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: -0.02em;
	font-variation-settings: 'opsz' 144;
}

.e-13096690 .count-label
{
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* ===== RIGHT (sort + view) ===== */

.e-13096690 .right
{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

/* Sort */

.e-13096690 .sort
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px 10px 14px;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 100px;
	font: inherit;
	color: var(--ot-text-1);
	cursor: pointer;
	transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1), background 200ms;
}

.e-13096690 .sort:hover
{
	border-color: var(--ot-bg-3-border);
	background: var(--ot-bg-2);
}

.e-13096690 .sort-icon
{
	font-size: 16px;
	color: var(--ot-text-3);
}

.e-13096690 .sort-label
{
	font-size: 11px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.e-13096690 .sort-value
{
	font-size: 13px;
	font-weight: 600;
	color: var(--ot-text-1);
	letter-spacing: -0.005em;
}

.e-13096690 .sort-chevron
{
	font-size: 16px;
	color: var(--ot-text-3);
	margin-left: -2px;
}

/* View toggle */

.e-13096690 .view
{
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 4px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 100px;
}

.e-13096690 .view-btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: transparent;
	border: 0;
	border-radius: 100px;
	color: var(--ot-text-3);
	cursor: pointer;
	transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms;
}

.e-13096690 .view-btn:hover
{
	color: var(--ot-text-1);
}

.e-13096690 .view-btn.is-active
{
	background: var(--ot-bg-1);
	color: var(--ot-text-1);
}

.e-13096690 .view-btn > i
{
	font-size: 18px;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 900px)
{
	.e-13096690 > .holder
	{
		flex-wrap: wrap;
		gap: 12px;
	}

	.e-13096690 .filter-trigger
	{
		display: inline-flex;
	}

	.e-13096690 .left
	{
		flex: 1 1 100%;
		justify-content: space-between;
	}

	.e-13096690 .right
	{
		flex: 1 1 100%;
		justify-content: space-between;
	}

	.e-13096690 .sort-label
	{
		display: none;
	}
}

@media (max-width: 500px)
{
	.e-13096690 .view
	{
		display: none;
	}
}

.e-4f8a6dbe
{
	display: block;
	width: 100%;
}

.e-4f8a6dbe > .holder
{
	display: grid;
	grid-template-columns: repeat(var(--columns, 4), 1fr);
	grid-auto-rows: 240px;
	gap: 18px;
}

/* ===== TILE ===== */

.e-4f8a6dbe .tile
{
	position: relative;
	display: flex;
	overflow: hidden;
	border-radius: var(--ot-radius-l);
	background: var(--ot-bg-3);
	color: white;
	cursor: pointer;
	transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
	min-height: 240px;
}

.e-4f8a6dbe .tile:hover
{
	transform: translateY(-3px);
}

/* ===== COVER ===== */

.e-4f8a6dbe .tile > .cover
{
	position: absolute;
	inset: 0;
	background-color: var(--ot-bg-3);
	overflow: hidden;
}

.e-4f8a6dbe .tile > .cover::before
{
	content: '';
	position: absolute;
	inset: 0;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	transform: scale(1);
	transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 0;
}

.e-4f8a6dbe .tile:hover > .cover::before
{
	transform: scale(1.05);
}

.e-4f8a6dbe .tile > .cover > .cover-overlay
{
	position: absolute;
	inset: 0;
	z-index: 1;
}

.e-4f8a6dbe .cover-overlay.tone-dark
{
	background: linear-gradient(180deg, rgba(20, 18, 16, 0.05) 0%, rgba(20, 18, 16, 0.35) 55%, rgba(20, 18, 16, 0.85) 100%);
}

.e-4f8a6dbe .cover-overlay.tone-light
{
	background: linear-gradient(180deg, rgba(255, 254, 252, 0.0) 0%, rgba(255, 254, 252, 0.6) 65%, rgba(255, 254, 252, 0.94) 100%);
}

.e-4f8a6dbe .cover-overlay.tone-brand
{
	background: linear-gradient(180deg, rgba(237, 28, 36, 0.4) 0%, rgba(237, 28, 36, 0.85) 100%);
}

.e-4f8a6dbe .cover-overlay.tone-gold
{
	background: linear-gradient(180deg, rgba(170, 130, 60, 0.45) 0%, rgba(170, 130, 60, 0.85) 100%);
}

/* Flat background (no image) */

.e-4f8a6dbe .flat-bg
{
	position: absolute;
	inset: 0;
}

.e-4f8a6dbe .flat-bg.tone-dark   { background: var(--ot-text-1); }
.e-4f8a6dbe .flat-bg.tone-light  { background: var(--ot-bg-2); }
.e-4f8a6dbe .flat-bg.tone-brand  { background: linear-gradient(135deg, var(--ot-brand) 0%, rgba(170, 16, 24, 1) 100%); }
.e-4f8a6dbe .flat-bg.tone-gold   { background: linear-gradient(135deg, rgba(170, 130, 60, 1) 0%, rgba(120, 90, 40, 1) 100%); }

/* ===== CONTENT ===== */

.e-4f8a6dbe .tile > .content
{
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px 26px 26px;
	width: 100%;
	margin-top: auto;
}

.e-4f8a6dbe .content-top
{
	display: flex;
	align-items: center;
	gap: 10px;
}

.e-4f8a6dbe .meta
{
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	background: rgba(255, 254, 252, 0.96);
	border-radius: 100px;
	font-size: 10.5px;
	font-weight: 700;
	color: var(--ot-text-1);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.e-4f8a6dbe .eyebrow
{
	font-size: 10.5px;
	font-weight: 700;
	color: rgba(255, 254, 252, 0.85);
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

.e-4f8a6dbe .tile > .content > .title
{
	font-family: var(--ot-font-secondary);
	font-size: 28px;
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.05;
	color: white;
	margin: 0;
	font-variation-settings: 'opsz' 144;
}

.e-4f8a6dbe .tile > .content > .title em
{
	font-style: italic;
}

.e-4f8a6dbe .tile > .content > .description
{
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 254, 252, 0.85);
	margin: 0;
	max-width: 360px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.e-4f8a6dbe .tile > .content > .cta
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 600;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.e-4f8a6dbe .tile > .content > .cta > i
{
	font-size: 16px;
	transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-4f8a6dbe .tile:hover > .content > .cta > i
{
	transform: translateX(4px);
}

/* ===== TONE-LIGHT TILE TEXT ===== */

.e-4f8a6dbe .tile:has(.tone-light) > .content > .title,
.e-4f8a6dbe .tile:has(.tone-light) > .content > .cta
{
	color: var(--ot-text-1);
}

.e-4f8a6dbe .tile:has(.tone-light) > .content > .description
{
	color: var(--ot-text-2);
}

.e-4f8a6dbe .tile:has(.tone-light) > .content > .content-top > .eyebrow
{
	color: var(--ot-brand);
}

/* ===== LARGER TILES (span 2 / wide / tall) ===== */

.e-4f8a6dbe .tile[style*="span 2"] .title,
.e-4f8a6dbe .tile[style*="row: span 2"] .title
{
	font-size: 38px;
	letter-spacing: -0.025em;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1100px)
{
	.e-4f8a6dbe > .holder
	{
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 220px;
	}
}

@media (max-width: 600px)
{
	.e-4f8a6dbe > .holder
	{
		grid-template-columns: 1fr;
	}

	.e-4f8a6dbe .tile[style*="span 2"]
	{
		grid-column: auto !important;
	}

	.e-4f8a6dbe .tile[style*="row: span 2"]
	{
		grid-row: auto !important;
	}

	.e-4f8a6dbe .tile > .content > .title
	{
		font-size: 24px;
	}
}

.e-357f3986
{
	display: block;
	width: 100%;
}

.e-357f3986 > .holder
{
	width: 100%;
	border-radius: var(--ot-radius-l);
	overflow: hidden;
}

/* ===== TONES ===== */

.e-357f3986 > .holder.tone-light
{
	background: var(--ot-bg-1);
	color: var(--ot-text-1);
	border: 1px solid var(--ot-bg-2-border);
	padding: 56px 56px;
}

.e-357f3986 > .holder.tone-bg
{
	background: var(--ot-bg-2);
	color: var(--ot-text-1);
	padding: 56px 56px;
}

.e-357f3986 > .holder.tone-dark
{
	background: var(--ot-text-1);
	color: white;
	padding: 56px 56px;
}

/* ===== HEAD ===== */

.e-357f3986 .head
{
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 40px;
	max-width: 760px;
}

.e-357f3986 > .holder.variant-centered .head
{
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	align-items: center;
}

.e-357f3986 .eyebrow
{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 11px;
	font-weight: 700;
	color: var(--ot-brand);
	text-transform: uppercase;
	letter-spacing: 0.18em;
}

.e-357f3986 > .holder.tone-dark .eyebrow
{
	color: rgba(255, 254, 252, 0.85);
}

.e-357f3986 .eyebrow > .eyebrow-mark
{
	width: 28px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

.e-357f3986 .title
{
	font-family: var(--ot-font-secondary);
	font-size: 44px;
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 0;
	font-variation-settings: 'opsz' 144;
	color: inherit;
}

.e-357f3986 .title em
{
	font-style: italic;
	color: var(--ot-brand);
}

.e-357f3986 > .holder.tone-dark .title em
{
	color: var(--ot-brand);
}

.e-357f3986 .description
{
	font-size: 14.5px;
	line-height: 1.65;
	margin: 0;
	max-width: 560px;
	opacity: 0.85;
}

/* ===== BODY ===== */

.e-357f3986 .body
{
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: flex-start;
}

.e-357f3986 > .holder.variant-split .body
{
	grid-template-columns: 1.4fr 1fr;
}

.e-357f3986 > .holder.variant-centered .body
{
	grid-template-columns: 1fr;
	max-width: 720px;
	margin: 0 auto;
}

.e-357f3986 > .holder.variant-compact .body
{
	grid-template-columns: 1fr;
	max-width: 560px;
}

/* ========================================== */
/* ===== FORM =============================== */
/* ========================================== */

.e-357f3986 .form
{
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.e-357f3986 .form-grid
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 14px;
}

.e-357f3986 .field
{
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.e-357f3986 .field.field-textarea,
.e-357f3986 .field.field-span-2
{
	grid-column: span 2;
}

/* Label */

.e-357f3986 .field-label
{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 0 2px;
}

.e-357f3986 > .holder.tone-dark .field-label
{
	color: rgba(255, 254, 252, 0.6);
}

.e-357f3986 .field-required
{
	color: var(--ot-brand);
	font-size: 12px;
}

/* Control */

.e-357f3986 .field-control
{
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
	transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1), background 200ms;
}

.e-357f3986 > .holder.tone-bg .field-control
{
	background: var(--ot-bg-1);
}

.e-357f3986 > .holder.tone-dark .field-control
{
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.1);
}

.e-357f3986 .field-control:focus-within
{
	border-color: var(--ot-brand);
	background: var(--ot-bg-1);
}

.e-357f3986 > .holder.tone-dark .field-control:focus-within
{
	background: rgba(255, 255, 255, 0.1);
}

.e-357f3986 .field.field-textarea > .field-control
{
	align-items: flex-start;
	padding-top: 14px;
}

/* Icon */

.e-357f3986 .field-icon
{
	font-size: 17px;
	color: var(--ot-text-3);
	flex-shrink: 0;
	transition: color 200ms;
}

.e-357f3986 > .holder.tone-dark .field-icon
{
	color: rgba(255, 254, 252, 0.5);
}

.e-357f3986 .field-control:focus-within .field-icon
{
	color: var(--ot-brand);
}

/* Inputs / textarea / select */

.e-357f3986 .field-control input,
.e-357f3986 .field-control textarea,
.e-357f3986 .field-control select
{
	flex: 1;
	width: 100%;
	min-width: 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--ot-text-1);
	letter-spacing: 0.005em;
	outline: none;
	resize: none;
}

.e-357f3986 > .holder.tone-dark .field-control input,
.e-357f3986 > .holder.tone-dark .field-control textarea,
.e-357f3986 > .holder.tone-dark .field-control select
{
	color: white;
}

.e-357f3986 .field-control input::placeholder,
.e-357f3986 .field-control textarea::placeholder
{
	color: var(--ot-text-3);
}

.e-357f3986 > .holder.tone-dark .field-control input::placeholder,
.e-357f3986 > .holder.tone-dark .field-control textarea::placeholder
{
	color: rgba(255, 254, 252, 0.45);
}

.e-357f3986 .field-control textarea
{
	min-height: 110px;
	line-height: 1.55;
}

.e-357f3986 .field-control select
{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	padding-right: 24px;
}

.e-357f3986 .field-chevron
{
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	color: var(--ot-text-3);
	pointer-events: none;
}

/* ===== FORM FOOT ===== */

.e-357f3986 .form-foot
{
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 6px;
	flex-wrap: wrap;
}

.e-357f3986 .form-cta
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	background: var(--ot-text-1);
	border: 0;
	border-radius: 100px;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ot-bg-1);
	letter-spacing: 0.005em;
	cursor: pointer;
	transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1), gap 240ms, transform 240ms;
	flex-shrink: 0;
}

.e-357f3986 .form-cta:hover
{
	background: var(--ot-brand);
	color: white;
	gap: 14px;
	transform: translateY(-1px);
}

.e-357f3986 > .holder.tone-dark .form-cta
{
	background: var(--ot-bg-1);
	color: var(--ot-text-1);
}

.e-357f3986 > .holder.tone-dark .form-cta:hover
{
	background: var(--ot-brand);
	color: white;
}

.e-357f3986 .form-cta > i
{
	font-size: 17px;
}

/* Disclaimer */

.e-357f3986 .form-disclaimer
{
	display: block;
	font-size: 11.5px;
	line-height: 1.55;
	margin: 0;
	max-width: 480px;
	opacity: 0.6;
	flex: 1;
	min-width: 220px;
}

.e-357f3986 .form-disclaimer > span,
.e-357f3986 .form-disclaimer > span > *
{
	display: inline;
}

.e-357f3986 .form-disclaimer a
{
	display: inline;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ========================================== */
/* ===== INFO (side block) ================== */
/* ========================================== */

.e-357f3986 .info
{
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.e-357f3986 > .holder.variant-split .info
{
	padding-left: 32px;
	border-left: 1px solid var(--ot-bg-2-border);
}

.e-357f3986 > .holder.tone-dark .info
{
	border-left-color: rgba(255, 255, 255, 0.1);
}

.e-357f3986 > .holder.tone-bg .info
{
	border-left-color: var(--ot-bg-3-border);
}

/* Info head */

.e-357f3986 .info-head
{
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.e-357f3986 .info-title
{
	font-family: var(--ot-font-secondary);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.012em;
	color: var(--ot-text-1);
	margin: 0;
	font-variation-settings: 'opsz' 144;
}

.e-357f3986 > .holder.tone-dark .info-title
{
	color: white;
}

.e-357f3986 .info-description
{
	font-size: 13px;
	line-height: 1.55;
	color: var(--ot-text-2);
	margin: 0;
}

.e-357f3986 > .holder.tone-dark .info-description
{
	color: rgba(255, 254, 252, 0.7);
}

/* Info rows */

.e-357f3986 .info-rows
{
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.e-357f3986 .info-row
{
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
	border-radius: var(--ot-radius-m);
	color: inherit;
	transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 220ms;
}

.e-357f3986 .info-row:hover
{
	background: var(--ot-bg-2);
	transform: translateX(2px);
}

.e-357f3986 > .holder.tone-bg .info-row:hover
{
	background: var(--ot-bg-1);
}

.e-357f3986 > .holder.tone-dark .info-row:hover
{
	background: rgba(255, 255, 255, 0.06);
}

.e-357f3986 .info-row-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--ot-bg-2);
	color: var(--ot-text-1);
	flex-shrink: 0;
	transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms;
}

.e-357f3986 > .holder.tone-bg .info-row-icon
{
	background: var(--ot-bg-1);
}

.e-357f3986 > .holder.tone-dark .info-row-icon
{
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 254, 252, 0.85);
}

.e-357f3986 .info-row:hover .info-row-icon
{
	background: var(--ot-brand);
	color: white;
}

.e-357f3986 .info-row-icon > i
{
	font-size: 17px;
}

.e-357f3986 .info-row-text
{
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	line-height: 1.3;
}

.e-357f3986 .info-row-label
{
	font-size: 10.5px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.e-357f3986 > .holder.tone-dark .info-row-label
{
	color: rgba(255, 254, 252, 0.55);
}

.e-357f3986 .info-row-value
{
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ot-text-1);
}

.e-357f3986 > .holder.tone-dark .info-row-value
{
	color: white;
}

/* Info socials */

.e-357f3986 .info-socials
{
	display: inline-flex;
	gap: 6px;
	padding-top: 12px;
	border-top: 1px solid var(--ot-bg-2-border);
}

.e-357f3986 > .holder.tone-bg .info-socials
{
	border-top-color: var(--ot-bg-3-border);
}

.e-357f3986 > .holder.tone-dark .info-socials
{
	border-top-color: rgba(255, 255, 255, 0.08);
}

.e-357f3986 .info-social
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 50%;
	color: var(--ot-text-2);
	transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms, border-color 220ms;
}

.e-357f3986 > .holder.tone-dark .info-social
{
	border-color: rgba(255, 255, 255, 0.12);
	color: rgba(255, 254, 252, 0.78);
}

.e-357f3986 .info-social:hover
{
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
	border-color: var(--ot-text-1);
}

.e-357f3986 > .holder.tone-dark .info-social:hover
{
	background: var(--ot-bg-1);
	color: var(--ot-text-1);
	border-color: var(--ot-bg-1);
}

.e-357f3986 .info-social > i
{
	font-size: 17px;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1100px)
{
	.e-357f3986 > .holder
	{
		padding: 44px 36px;
	}

	.e-357f3986 > .holder.variant-split .body
	{
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.e-357f3986 > .holder.variant-split .info
	{
		padding-left: 0;
		border-left: 0;
		padding-top: 28px;
		border-top: 1px solid var(--ot-bg-2-border);
	}

	.e-357f3986 > .holder.tone-dark.variant-split .info
	{
		border-top-color: rgba(255, 255, 255, 0.1);
	}

	.e-357f3986 > .holder.tone-bg.variant-split .info
	{
		border-top-color: var(--ot-bg-3-border);
	}
}

@media (max-width: 700px)
{
	.e-357f3986 > .holder
	{
		padding: 32px 24px;
	}

	.e-357f3986 .title
	{
		font-size: 32px;
	}

	.e-357f3986 .head
	{
		margin-bottom: 28px;
	}

	.e-357f3986 .form-grid
	{
		grid-template-columns: 1fr;
	}

	.e-357f3986 .field.field-span-2,
	.e-357f3986 .field.field-textarea
	{
		grid-column: auto;
	}
}

.e-35bc979f
{
	display: block;
	width: 100%;
}

/* ===== HOLDER ===== */

.e-35bc979f > .holder
{
	width: 100%;
	margin: 0 auto;
	font-family: var(--ot-font-primary);
	font-size: 16px;
	line-height: 1.75;
	color: var(--ot-text-1);
	letter-spacing: 0;
}

.e-35bc979f > .holder.width-narrow  { max-width: 720px; }
.e-35bc979f > .holder.width-medium  { max-width: 880px; }
.e-35bc979f > .holder.width-wide    { max-width: 1100px; }
.e-35bc979f > .holder.width-full    { max-width: 1440px; }

.e-35bc979f > .holder.align-center
{
	text-align: center;
}

.e-35bc979f > .holder.align-center img,
.e-35bc979f > .holder.align-center figure
{
	margin-left: auto;
	margin-right: auto;
}

.e-35bc979f > .holder.tone-muted
{
	color: var(--ot-text-2);
}

/* Reset margin on first/last child */

.e-35bc979f > .holder > *:first-child
{
	margin-top: 0;
}

.e-35bc979f > .holder > *:last-child
{
	margin-bottom: 0;
}

/* ===== HEADINGS ===== */

.e-35bc979f > .holder h1,
.e-35bc979f > .holder h2,
.e-35bc979f > .holder h3,
.e-35bc979f > .holder h4
{
	font-family: var(--ot-font-secondary);
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--ot-text-1);
	margin: 56px 0 16px;
	font-variation-settings: 'opsz' 144;
	line-height: 1.1;
}

.e-35bc979f > .holder h1
{
	font-size: 56px;
	letter-spacing: -0.03em;
	line-height: 1.0;
	margin: 0 0 24px;
}

.e-35bc979f > .holder h2
{
	font-size: 36px;
	letter-spacing: -0.025em;
	margin-top: 64px;
	padding-top: 32px;
	border-top: 1px solid var(--ot-bg-2-border);
}

.e-35bc979f > .holder h2:first-child
{
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}

.e-35bc979f > .holder h3
{
	font-size: 26px;
	letter-spacing: -0.018em;
	margin-top: 44px;
}

.e-35bc979f > .holder h4
{
	font-size: 19px;
	font-weight: 500;
	letter-spacing: -0.012em;
	margin-top: 32px;
}

.e-35bc979f > .holder h1 em,
.e-35bc979f > .holder h2 em,
.e-35bc979f > .holder h3 em,
.e-35bc979f > .holder h4 em
{
	font-style: italic;
	color: var(--ot-brand);
}

/* ===== PARAGRAPH ===== */

.e-35bc979f > .holder p
{
	margin: 0 0 18px;
	color: inherit;
}

.e-35bc979f > .holder p.lead,
.e-35bc979f > .holder .lead
{
	font-family: var(--ot-font-secondary);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: -0.012em;
	color: var(--ot-text-1);
	margin: 0 0 32px;
	font-variation-settings: 'opsz' 144;
}

/* ===== INLINE ===== */

.e-35bc979f > .holder strong,
.e-35bc979f > .holder b
{
	font-weight: 600;
	color: var(--ot-text-1);
}

.e-35bc979f > .holder em,
.e-35bc979f > .holder i
{
	font-style: italic;
}

.e-35bc979f > .holder a
{
	color: var(--ot-brand);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-35bc979f > .holder a:hover
{
	color: var(--ot-brand-hover);
	text-decoration-thickness: 2px;
}

.e-35bc979f > .holder mark
{
	background: var(--ot-brand-opacity);
	color: var(--ot-text-1);
	padding: 1px 4px;
	border-radius: 3px;
}

.e-35bc979f > .holder small
{
	font-size: 0.85em;
	color: var(--ot-text-3);
}

.e-35bc979f > .holder code
{
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.92em;
	padding: 2px 7px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 4px;
	color: var(--ot-text-1);
}

/* ===== LISTS ===== */

.e-35bc979f > .holder ul,
.e-35bc979f > .holder ol
{
	margin: 0 0 22px;
	padding-left: 22px;
}

.e-35bc979f > .holder ul { list-style: none; padding-left: 0; }
.e-35bc979f > .holder ol { list-style: decimal; padding-left: 24px; }

.e-35bc979f > .holder ul > li,
.e-35bc979f > .holder ol > li
{
	margin: 8px 0;
	line-height: 1.7;
}

.e-35bc979f > .holder ul > li
{
	position: relative;
	padding-left: 24px;
}

.e-35bc979f > .holder ul > li::before
{
	content: '';
	position: absolute;
	left: 4px;
	top: 14px;
	width: 8px;
	height: 1px;
	background: var(--ot-brand);
}

.e-35bc979f > .holder ol > li::marker
{
	color: var(--ot-brand);
	font-family: var(--ot-font-secondary);
	font-weight: 500;
	font-variation-settings: 'opsz' 144;
}

.e-35bc979f > .holder li > ul,
.e-35bc979f > .holder li > ol
{
	margin: 8px 0;
}

/* ===== BLOCKQUOTE ===== */

.e-35bc979f > .holder blockquote
{
	margin: 32px 0;
	padding: 8px 28px;
	border-left: 3px solid var(--ot-brand);
	font-family: var(--ot-font-secondary);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.012em;
	color: var(--ot-text-1);
	font-variation-settings: 'opsz' 144;
}

.e-35bc979f > .holder blockquote p
{
	margin: 8px 0;
}

.e-35bc979f > .holder blockquote cite
{
	display: block;
	margin-top: 12px;
	font-family: var(--ot-font-primary);
	font-size: 12px;
	font-weight: 600;
	font-style: normal;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

/* ===== IMAGES & FIGURES ===== */

.e-35bc979f > .holder img
{
	display: block;
	max-width: 100%;
	height: auto;
	margin: 32px 0;
	border-radius: var(--ot-radius-l);
}

.e-35bc979f > .holder figure
{
	margin: 36px 0;
}

.e-35bc979f > .holder figure > img
{
	margin: 0;
}

.e-35bc979f > .holder figure > figcaption
{
	margin-top: 12px;
	font-size: 12.5px;
	color: var(--ot-text-3);
	text-align: center;
	letter-spacing: 0.005em;
}

/* ===== HR ===== */

.e-35bc979f > .holder hr
{
	margin: 48px 0;
	border: 0;
	border-top: 1px solid var(--ot-bg-2-border);
}

/* ===== TABLES ===== */

.e-35bc979f > .holder table
{
	width: 100%;
	margin: 32px 0;
	border-collapse: collapse;
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
	overflow: hidden;
	font-size: 14px;
}

.e-35bc979f > .holder thead
{
	background: var(--ot-bg-2);
}

.e-35bc979f > .holder th
{
	text-align: left;
	padding: 14px 18px;
	font-size: 11px;
	font-weight: 700;
	color: var(--ot-text-1);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	border-bottom: 1px solid var(--ot-bg-2-border);
}

.e-35bc979f > .holder td
{
	padding: 14px 18px;
	border-bottom: 1px solid var(--ot-bg-2-border);
	color: var(--ot-text-1);
	vertical-align: top;
}

.e-35bc979f > .holder tr:last-child td
{
	border-bottom: 0;
}

.e-35bc979f > .holder tbody tr:hover
{
	background: var(--ot-bg-2);
}

/* ===== CODE BLOCKS ===== */

.e-35bc979f > .holder pre
{
	margin: 32px 0;
	padding: 22px 24px;
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
	border-radius: var(--ot-radius-m);
	overflow-x: auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 13px;
	line-height: 1.65;
}

.e-35bc979f > .holder pre > code
{
	background: transparent;
	border: 0;
	padding: 0;
	color: inherit;
	font-size: inherit;
}

/* ===== KBD ===== */

.e-35bc979f > .holder kbd
{
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-3-border);
	border-radius: 4px;
	font-family: var(--ot-font-secondary);
	font-size: 0.85em;
	font-weight: 500;
	color: var(--ot-text-1);
	font-variation-settings: 'opsz' 144;
}

/* ===== DETAILS / SUMMARY ===== */

.e-35bc979f > .holder details
{
	margin: 24px 0;
	padding: 18px 22px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-m);
}

.e-35bc979f > .holder details > summary
{
	cursor: pointer;
	font-weight: 600;
	color: var(--ot-text-1);
	letter-spacing: -0.005em;
	list-style: none;
}

.e-35bc979f > .holder details > summary::-webkit-details-marker
{
	display: none;
}

.e-35bc979f > .holder details > summary::after
{
	content: '+';
	float: right;
	font-family: var(--ot-font-secondary);
	font-size: 22px;
	line-height: 1;
	color: var(--ot-brand);
	font-variation-settings: 'opsz' 144;
	transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-35bc979f > .holder details[open] > summary::after
{
	content: '−';
}

.e-35bc979f > .holder details > p:first-of-type
{
	margin-top: 14px;
}

.e-35bc979f > .holder details > *:last-child
{
	margin-bottom: 0;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 900px)
{
	.e-35bc979f > .holder
	{
		font-size: 15.5px;
	}

	.e-35bc979f > .holder h1
	{
		font-size: 40px;
	}

	.e-35bc979f > .holder h2
	{
		font-size: 28px;
		margin-top: 48px;
		padding-top: 24px;
	}

	.e-35bc979f > .holder h3
	{
		font-size: 22px;
		margin-top: 32px;
	}

	.e-35bc979f > .holder blockquote
	{
		font-size: 19px;
		padding: 4px 22px;
	}

	.e-35bc979f > .holder .lead,
	.e-35bc979f > .holder p.lead
	{
		font-size: 18px;
	}

	.e-35bc979f > .holder pre
	{
		padding: 18px 20px;
		font-size: 12.5px;
	}
}

.e-31a00c76
{
	display: block;
	width: 100%;
}

.e-31a00c76 > .holder
{
	position: relative;
	overflow: hidden;
	border-radius: var(--ot-radius-l);
	padding: 64px 64px;
}

/* ===== VARIANTS ===== */

.e-31a00c76 > .holder.variant-dark
{
	background: var(--ot-text-1);
	color: white;
}

.e-31a00c76 > .holder.variant-light
{
	background: var(--ot-bg-2);
	color: var(--ot-text-1);
	border: 1px solid var(--ot-bg-2-border);
}

.e-31a00c76 > .holder.variant-brand
{
	background: linear-gradient(135deg, var(--ot-brand) 0%, rgba(170, 16, 24, 1) 100%);
	color: white;
}

.e-31a00c76 > .holder.variant-image
{
	background: var(--ot-bg-3);
	color: white;
}

/* Image cover */

.e-31a00c76 > .holder > .cover
{
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.e-31a00c76 > .holder > .cover > .cover-overlay
{
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(20, 18, 16, 0.78) 0%, rgba(20, 18, 16, 0.55) 100%);
}

/* ===== CONTENT ===== */

.e-31a00c76 > .holder > .content
{
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 64px;
}

.e-31a00c76 > .holder.align-center > .content
{
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
}

/* Text */

.e-31a00c76 .text
{
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 640px;
}

.e-31a00c76 > .holder.align-center .text
{
	align-items: center;
}

/* Eyebrow */

.e-31a00c76 .eyebrow
{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
}

.e-31a00c76 > .holder.variant-dark .eyebrow,
.e-31a00c76 > .holder.variant-image .eyebrow
{
	color: rgba(255, 254, 252, 0.85);
}

.e-31a00c76 > .holder.variant-light .eyebrow
{
	color: var(--ot-brand);
}

.e-31a00c76 > .holder.variant-brand .eyebrow
{
	color: rgba(255, 254, 252, 0.85);
}

.e-31a00c76 .eyebrow > .eyebrow-mark
{
	width: 28px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

/* Title */

.e-31a00c76 .title
{
	font-family: var(--ot-font-secondary);
	font-size: 56px;
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 1.0;
	margin: 0;
	font-variation-settings: 'opsz' 144;
}

.e-31a00c76 > .holder.variant-dark .title,
.e-31a00c76 > .holder.variant-image .title,
.e-31a00c76 > .holder.variant-brand .title
{
	color: white;
}

.e-31a00c76 > .holder.variant-light .title
{
	color: var(--ot-text-1);
}

.e-31a00c76 .title em
{
	font-style: italic;
	color: var(--ot-brand);
}

.e-31a00c76 > .holder.variant-brand .title em
{
	color: white;
	opacity: 0.85;
}

.e-31a00c76 > .holder.variant-image .title em
{
	color: white;
	font-style: italic;
}

/* Description */

.e-31a00c76 .description
{
	font-size: 16px;
	line-height: 1.65;
	margin: 0;
	max-width: 540px;
}

.e-31a00c76 > .holder.variant-dark .description,
.e-31a00c76 > .holder.variant-image .description,
.e-31a00c76 > .holder.variant-brand .description
{
	color: rgba(255, 254, 252, 0.85);
}

.e-31a00c76 > .holder.variant-light .description
{
	color: var(--ot-text-2);
}

/* Actions */

.e-31a00c76 .actions
{
	display: inline-flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

.e-31a00c76 .cta
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 28px;
	border-radius: 100px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.005em;
	transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1), color 240ms, gap 240ms, transform 240ms;
}

/* Primary CTA */

.e-31a00c76 > .holder.variant-dark .cta.primary,
.e-31a00c76 > .holder.variant-image .cta.primary
{
	background: var(--ot-bg-1);
	color: var(--ot-text-1);
}

.e-31a00c76 > .holder.variant-dark .cta.primary:hover,
.e-31a00c76 > .holder.variant-image .cta.primary:hover
{
	background: var(--ot-brand);
	color: white;
	gap: 14px;
	transform: translateX(2px);
}

.e-31a00c76 > .holder.variant-light .cta.primary
{
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
}

.e-31a00c76 > .holder.variant-light .cta.primary:hover
{
	background: var(--ot-brand);
	color: white;
	gap: 14px;
	transform: translateX(2px);
}

.e-31a00c76 > .holder.variant-brand .cta.primary
{
	background: var(--ot-bg-1);
	color: var(--ot-text-1);
}

.e-31a00c76 > .holder.variant-brand .cta.primary:hover
{
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
	gap: 14px;
	transform: translateX(2px);
}

/* Secondary CTA (ghost) */

.e-31a00c76 .cta.secondary
{
	background: transparent;
	border: 1px solid currentColor;
	opacity: 0.85;
}

.e-31a00c76 .cta.secondary:hover
{
	opacity: 1;
	gap: 14px;
}

.e-31a00c76 .cta > i
{
	font-size: 18px;
}

/* ===== CONTACTS ===== */

.e-31a00c76 .contacts
{
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex-shrink: 0;
}

.e-31a00c76 .contact
{
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border-radius: var(--ot-radius-m);
	color: inherit;
	transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1), transform 240ms;
}

.e-31a00c76 > .holder.variant-dark .contact:hover,
.e-31a00c76 > .holder.variant-image .contact:hover
{
	background: rgba(255, 255, 255, 0.06);
	transform: translateX(3px);
}

.e-31a00c76 > .holder.variant-light .contact:hover
{
	background: var(--ot-bg-1);
	transform: translateX(3px);
}

.e-31a00c76 > .holder.variant-brand .contact:hover
{
	background: rgba(255, 255, 255, 0.12);
	transform: translateX(3px);
}

.e-31a00c76 .contact-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
}

.e-31a00c76 > .holder.variant-dark .contact-icon,
.e-31a00c76 > .holder.variant-image .contact-icon
{
	background: rgba(255, 255, 255, 0.1);
}

.e-31a00c76 > .holder.variant-light .contact-icon
{
	background: var(--ot-bg-3);
}

.e-31a00c76 > .holder.variant-brand .contact-icon
{
	background: rgba(255, 255, 255, 0.16);
}

.e-31a00c76 .contact-icon > i
{
	font-size: 18px;
}

.e-31a00c76 .contact-text
{
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	line-height: 1.3;
}

.e-31a00c76 .contact-label
{
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	opacity: 0.7;
}

.e-31a00c76 .contact-value
{
	font-size: 14.5px;
	font-weight: 600;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1100px)
{
	.e-31a00c76 > .holder
	{
		padding: 48px 44px;
	}

	.e-31a00c76 .title
	{
		font-size: 44px;
	}

	.e-31a00c76 > .holder > .content
	{
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

@media (max-width: 600px)
{
	.e-31a00c76 > .holder
	{
		padding: 36px 28px;
	}

	.e-31a00c76 .title
	{
		font-size: 32px;
	}
}

.e-6539f1ad
{
	display: block;
	width: 100%;
}

.e-6539f1ad > .holder
{
	display: grid;
	grid-template-columns: repeat(var(--columns, 3), 1fr);
	gap: 24px;
}

/* ===== COLUMN ===== */

.e-6539f1ad .column
{
	display: flex;
	flex-direction: column;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-l);
	overflow: hidden;
	transition: border-color 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-6539f1ad .column:hover
{
	border-color: var(--ot-bg-3-border);
}

/* ===== HEAD ===== */

.e-6539f1ad .column-head
{
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 26px 20px;
	border-bottom: 1px solid var(--ot-bg-2-border);
	position: relative;
}

.e-6539f1ad .column-head::before
{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 2px;
	background: var(--ot-brand);
}

.e-6539f1ad .column.accent-dark   .column-head::before { background: var(--ot-text-1); }
.e-6539f1ad .column.accent-green  .column-head::before { background: rgba(20, 144, 95, 1); }
.e-6539f1ad .column.accent-gold   .column-head::before { background: rgba(170, 130, 60, 1); }

.e-6539f1ad .column-head-row
{
	display: flex;
	align-items: center;
	gap: 12px;
}

.e-6539f1ad .column-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--ot-brand-opacity);
	flex-shrink: 0;
}

.e-6539f1ad .column-icon > i
{
	font-size: 19px;
	color: var(--ot-brand);
}

.e-6539f1ad .column.accent-dark   .column-icon { background: rgba(20, 18, 16, 0.06); }
.e-6539f1ad .column.accent-dark   .column-icon > i { color: var(--ot-text-1); }
.e-6539f1ad .column.accent-green  .column-icon { background: rgba(20, 144, 95, 0.12); }
.e-6539f1ad .column.accent-green  .column-icon > i { color: rgba(20, 144, 95, 1); }
.e-6539f1ad .column.accent-gold   .column-icon { background: rgba(170, 130, 60, 0.12); }
.e-6539f1ad .column.accent-gold   .column-icon > i { color: rgba(170, 130, 60, 1); }

.e-6539f1ad .column-head-text
{
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.e-6539f1ad .column-eyebrow
{
	font-size: 10.5px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.e-6539f1ad .column-title
{
	font-family: var(--ot-font-secondary);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: -0.018em;
	line-height: 1.15;
	color: var(--ot-text-1);
	margin: 0;
	font-variation-settings: 'opsz' 144;
}

.e-6539f1ad .column-subtitle
{
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--ot-text-2);
	margin: 0;
}

/* ===== ITEMS ===== */

.e-6539f1ad .items
{
	list-style: none;
	margin: 0;
	padding: 4px 0;
	flex: 1;
}

.e-6539f1ad .item
{
	display: block;
	border-bottom: 1px solid var(--ot-bg-2-border);
}

.e-6539f1ad .item:last-child
{
	border-bottom: 0;
}

.e-6539f1ad .item-link
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 26px;
	color: inherit;
	transition: background 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-6539f1ad .item-link:hover
{
	background: var(--ot-bg-2);
}

.e-6539f1ad .item-left
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1;
}

.e-6539f1ad .item-flag
{
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
}

.e-6539f1ad .item-pin
{
	font-size: 17px;
	color: var(--ot-text-3);
	flex-shrink: 0;
	transition: color 200ms;
}

.e-6539f1ad .item-link:hover .item-pin
{
	color: var(--ot-brand);
}

.e-6539f1ad .item-text
{
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	line-height: 1.3;
}

.e-6539f1ad .item-location
{
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ot-text-1);
	letter-spacing: -0.005em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.e-6539f1ad .item-region
{
	font-size: 11px;
	font-weight: 500;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.e-6539f1ad .item-badge
{
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	background: var(--ot-brand-opacity);
	border-radius: 100px;
	font-size: 9.5px;
	font-weight: 700;
	color: var(--ot-brand);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	flex-shrink: 0;
	margin-left: 4px;
}

/* Price */

.e-6539f1ad .item-price
{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0;
	flex-shrink: 0;
	line-height: 1.0;
}

.e-6539f1ad .item-price-old
{
	font-size: 10.5px;
	font-weight: 500;
	color: var(--ot-text-3);
	text-decoration: line-through;
	margin-bottom: 2px;
}

.e-6539f1ad .item-price-row
{
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
}

.e-6539f1ad .item-price-from
{
	font-size: 9.5px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.e-6539f1ad .item-price-value
{
	font-family: var(--ot-font-secondary);
	font-size: 17px;
	font-weight: 500;
	color: var(--ot-brand);
	letter-spacing: -0.01em;
	font-variation-settings: 'opsz' 144;
}

.e-6539f1ad .column.accent-dark   .item-price-value { color: var(--ot-text-1); }
.e-6539f1ad .column.accent-green  .item-price-value { color: rgba(20, 144, 95, 1); }
.e-6539f1ad .column.accent-gold   .item-price-value { color: rgba(170, 130, 60, 1); }

/* ===== CTA ===== */

.e-6539f1ad .column-cta
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 26px;
	background: var(--ot-bg-2);
	border-top: 1px solid var(--ot-bg-2-border);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ot-text-1);
	letter-spacing: 0.005em;
	transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1), color 240ms, gap 240ms;
}

.e-6539f1ad .column-cta:hover
{
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
	gap: 12px;
}

.e-6539f1ad .column-cta > i
{
	font-size: 16px;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1100px)
{
	.e-6539f1ad > .holder
	{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px)
{
	.e-6539f1ad > .holder
	{
		grid-template-columns: 1fr;
	}
}

.e-4180a2e8
{
	display: block;
	width: 100%;
}

.e-4180a2e8 > .holder
{
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ===== BORDERS ===== */

.e-4180a2e8 > .holder.border-top
{
	padding-top: 32px;
	border-top: 1px solid var(--ot-bg-2-border);
}

.e-4180a2e8 > .holder.border-bottom
{
	padding-bottom: 32px;
	border-bottom: 1px solid var(--ot-bg-2-border);
}

/* ===== ROW (text + aside) ===== */

.e-4180a2e8 > .holder > .row
{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
}

.e-4180a2e8 > .holder.align-center > .row
{
	justify-content: center;
	align-items: center;
}

/* ===== TEXT ===== */

.e-4180a2e8 .text
{
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	max-width: 720px;
	flex: 1;
}

.e-4180a2e8 > .holder.align-center .text
{
	align-items: center;
	text-align: center;
	max-width: 820px;
	margin: 0 auto;
}

/* Eyebrow */

.e-4180a2e8 .eyebrow
{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 11px;
	font-weight: 700;
	color: var(--ot-brand);
	text-transform: uppercase;
	letter-spacing: 0.18em;
}

.e-4180a2e8 .eyebrow > .eyebrow-mark
{
	width: 28px;
	height: 1px;
	background: var(--ot-brand);
}

.e-4180a2e8 > .holder.align-center .eyebrow
{
	justify-content: center;
}

/* Title */

.e-4180a2e8 .title
{
	font-family: var(--ot-font-secondary);
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1.02;
	color: var(--ot-text-1);
	margin: 0;
	font-variation-settings: 'opsz' 144;
}

.e-4180a2e8 .title em
{
	font-style: italic;
	color: var(--ot-brand);
	font-weight: 400;
}

.e-4180a2e8 > .holder.size-s   .title { font-size: 28px;  letter-spacing: -0.018em; line-height: 1.1;   }
.e-4180a2e8 > .holder.size-m   .title { font-size: 40px;  letter-spacing: -0.022em; line-height: 1.05;  }
.e-4180a2e8 > .holder.size-l   .title { font-size: 56px;  letter-spacing: -0.028em; line-height: 1.0;   }
.e-4180a2e8 > .holder.size-xl  .title { font-size: 76px;  letter-spacing: -0.035em; line-height: 0.96;  }

/* Description */

.e-4180a2e8 .description
{
	font-size: 15px;
	line-height: 1.65;
	color: var(--ot-text-2);
	margin: 0;
	max-width: 620px;
}

.e-4180a2e8 > .holder.size-s   .description { font-size: 13.5px; }
.e-4180a2e8 > .holder.size-l   .description,
.e-4180a2e8 > .holder.size-xl  .description { font-size: 16px; }

.e-4180a2e8 > .holder.align-center .description
{
	margin: 0 auto;
}

/* ===== ASIDE (index + right slot) ===== */

.e-4180a2e8 .aside
{
	display: flex;
	align-items: flex-end;
	gap: 24px;
	flex-shrink: 0;
}

.e-4180a2e8 > .holder.align-center .aside
{
	display: none;
}

.e-4180a2e8 .index
{
	font-family: var(--ot-font-secondary);
	font-size: 96px;
	font-weight: 300;
	line-height: 0.8;
	letter-spacing: -0.04em;
	color: var(--ot-bg-3);
	font-variation-settings: 'opsz' 144;
	user-select: none;
	pointer-events: none;
}

.e-4180a2e8 > .holder.size-s  .index { font-size: 64px; }
.e-4180a2e8 > .holder.size-l  .index { font-size: 120px; }
.e-4180a2e8 > .holder.size-xl .index { font-size: 144px; }

.e-4180a2e8 .right
{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

/* ===== BOTTOM SLOT ===== */

.e-4180a2e8 > .holder > .bottom
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.e-4180a2e8 > .holder.align-center > .bottom
{
	justify-content: center;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 900px)
{
	.e-4180a2e8 > .holder
	{
		gap: 20px;
	}

	.e-4180a2e8 > .holder > .row
	{
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.e-4180a2e8 > .holder.align-center > .row
	{
		align-items: center;
	}

	.e-4180a2e8 .index
	{
		display: none;
	}

	.e-4180a2e8 > .holder.size-l   .title { font-size: 40px; }
	.e-4180a2e8 > .holder.size-xl  .title { font-size: 48px; }
}

.e-a1f0e9c
{
	display: block;
	width: 100%;
}

.e-a1f0e9c > .holder
{
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 64px 0 56px;
}

.e-a1f0e9c > .holder.tone-light
{
	background: var(--ot-bg-1);
	color: var(--ot-text-1);
	border-bottom: 1px solid var(--ot-bg-2-border);
}

.e-a1f0e9c > .holder.tone-dark
{
	background: var(--ot-text-1);
	color: white;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ===== COVER ===== */

.e-a1f0e9c > .holder.has-image
{
	color: white;
	border-bottom: 0;
	padding: 96px 0 64px;
}

.e-a1f0e9c > .holder > .cover
{
	position: absolute;
	inset: 0;
	background-color: var(--ot-bg-3);
}

.e-a1f0e9c > .holder > .cover::before
{
	content: '';
	position: absolute;
	inset: 0;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.e-a1f0e9c > .holder > .cover > .cover-overlay
{
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(20, 18, 16, 0.45) 0%, rgba(20, 18, 16, 0.55) 60%, rgba(20, 18, 16, 0.78) 100%),
		linear-gradient(90deg, rgba(20, 18, 16, 0.4) 0%, rgba(20, 18, 16, 0.0) 60%);
}

/* ===== INNER ===== */

.e-a1f0e9c > .holder > .inner
{
	position: relative;
	z-index: 2;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* ===== BREADCRUMBS ===== */

.e-a1f0e9c .breadcrumbs
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.e-a1f0e9c .crumb
{
	color: currentColor;
	opacity: 0.55;
	text-transform: uppercase;
	transition: opacity 180ms;
}

.e-a1f0e9c > .holder.has-image .crumb
{
	opacity: 0.75;
}

.e-a1f0e9c .crumb:hover
{
	opacity: 1;
}

.e-a1f0e9c .crumb.active
{
	opacity: 1;
	color: var(--ot-brand);
}

.e-a1f0e9c > .holder.has-image .crumb.active
{
	color: white;
}

.e-a1f0e9c .crumb:not(:last-child)::after
{
	content: '/';
	margin-left: 8px;
	opacity: 0.45;
}

/* ===== HEAD (title + count) ===== */

.e-a1f0e9c .head
{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 48px;
}

.e-a1f0e9c .text
{
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 760px;
}

/* Eyebrow */

.e-a1f0e9c .eyebrow
{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 11px;
	font-weight: 700;
	color: var(--ot-brand);
	text-transform: uppercase;
	letter-spacing: 0.18em;
}

.e-a1f0e9c > .holder.has-image .eyebrow
{
	color: white;
}

.e-a1f0e9c .eyebrow > .eyebrow-mark
{
	width: 28px;
	height: 1px;
	background: currentColor;
}

.e-a1f0e9c > .holder.has-image .eyebrow > .eyebrow-mark
{
	background: var(--ot-brand);
}

/* Title */

.e-a1f0e9c .title
{
	font-family: var(--ot-font-secondary);
	font-size: 76px;
	font-weight: 400;
	letter-spacing: -0.035em;
	line-height: 0.96;
	margin: 0;
	font-variation-settings: 'opsz' 144;
}

.e-a1f0e9c > .holder.has-image .title
{
	color: white;
}

.e-a1f0e9c .title em
{
	font-style: italic;
	color: var(--ot-brand);
}

/* Description */

.e-a1f0e9c .description
{
	font-size: 16px;
	line-height: 1.65;
	margin: 0;
	max-width: 580px;
	opacity: 0.85;
}

.e-a1f0e9c > .holder.has-image .description
{
	color: rgba(255, 254, 252, 0.92);
	opacity: 1;
}

/* Count */

.e-a1f0e9c .count
{
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex-shrink: 0;
	text-align: right;
	line-height: 1;
}

.e-a1f0e9c .count-value
{
	font-family: var(--ot-font-secondary);
	font-size: 56px;
	font-weight: 400;
	letter-spacing: -0.03em;
	font-variation-settings: 'opsz' 144;
}

.e-a1f0e9c > .holder.has-image .count-value
{
	color: white;
}

.e-a1f0e9c .count-label
{
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	opacity: 0.7;
	margin-top: 6px;
}

.e-a1f0e9c > .holder.has-image .count-label
{
	color: white;
	opacity: 0.78;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 900px)
{
	.e-a1f0e9c > .holder
	{
		padding: 44px 0 36px;
	}

	.e-a1f0e9c > .holder.has-image
	{
		padding: 64px 0 48px;
	}

	.e-a1f0e9c > .holder > .inner
	{
		padding: 0 20px;
		gap: 24px;
	}

	.e-a1f0e9c .head
	{
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.e-a1f0e9c .title
	{
		font-size: 48px;
	}

	.e-a1f0e9c .count
	{
		text-align: left;
	}

	.e-a1f0e9c .count-value
	{
		font-size: 36px;
	}
}

.e-14474df
{
	display: block;
	width: 100%;
}

.e-14474df > .holder
{
	width: 100%;
	padding: 56px 0 48px;
}

.e-14474df > .holder.tone-light
{
	background: var(--ot-bg-1);
	color: var(--ot-text-1);
}

.e-14474df > .holder.tone-dark
{
	background: var(--ot-text-1);
	color: white;
}

.e-14474df > .holder > .inner
{
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* ===== BREADCRUMBS ===== */

.e-14474df .breadcrumbs
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.e-14474df .crumb
{
	color: currentColor;
	opacity: 0.55;
	text-transform: uppercase;
	transition: opacity 180ms;
}

.e-14474df .crumb:hover  { opacity: 1; }
.e-14474df .crumb.active { opacity: 1; color: var(--ot-brand); }

.e-14474df .crumb:not(:last-child)::after
{
	content: '/';
	margin-left: 8px;
	opacity: 0.45;
}

/* ===== HEADER (text + actions) ===== */

.e-14474df .header
{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
}

.e-14474df .text
{
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 920px;
	min-width: 0;
}

/* ===== META CHIPS ===== */

.e-14474df .meta
{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 4px;
}

.e-14474df .meta-chip
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--ot-bg-2);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 100px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ot-text-1);
	letter-spacing: 0.005em;
}

.e-14474df > .holder.tone-dark .meta-chip
{
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.12);
	color: white;
}

.e-14474df .meta-chip > i
{
	font-size: 14px;
	color: var(--ot-text-3);
}

.e-14474df > .holder.tone-dark .meta-chip > i
{
	color: rgba(255, 255, 255, 0.7);
}

.e-14474df .meta-chip > .flag
{
	font-size: 14px;
	line-height: 1;
}

.e-14474df .meta-chip > .stars
{
	display: inline-flex;
	gap: 1px;
}

.e-14474df .meta-chip > .stars > i
{
	font-size: 12px;
	color: rgba(220, 165, 50, 1);
	font-variation-settings: 'FILL' 1;
}

/* Tone variants */

.e-14474df .meta-chip.meta-brand
{
	background: var(--ot-brand-opacity);
	border-color: transparent;
	color: var(--ot-brand);
}

.e-14474df .meta-chip.meta-brand > i
{
	color: var(--ot-brand);
}

.e-14474df .meta-chip.meta-dark
{
	background: var(--ot-text-1);
	border-color: var(--ot-text-1);
	color: white;
}

.e-14474df .meta-chip.meta-dark > i
{
	color: rgba(255, 255, 255, 0.85);
}

.e-14474df .meta-chip.meta-green
{
	background: rgba(20, 144, 95, 0.12);
	border-color: transparent;
	color: rgba(20, 144, 95, 1);
}

.e-14474df .meta-chip.meta-green > i
{
	color: rgba(20, 144, 95, 1);
}

/* ===== EYEBROW ===== */

.e-14474df .eyebrow
{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 11px;
	font-weight: 700;
	color: var(--ot-brand);
	text-transform: uppercase;
	letter-spacing: 0.18em;
}

.e-14474df .eyebrow > .eyebrow-mark
{
	width: 28px;
	height: 1px;
	background: var(--ot-brand);
}

/* ===== TITLE ===== */

.e-14474df .title
{
	font-family: var(--ot-font-secondary);
	font-size: 64px;
	font-weight: 400;
	letter-spacing: -0.032em;
	line-height: 0.98;
	margin: 0;
	font-variation-settings: 'opsz' 144;
	color: currentColor;
}

.e-14474df .title em
{
	font-style: italic;
	color: var(--ot-brand);
}

/* ===== LEAD ===== */

.e-14474df .lead
{
	font-size: 17px;
	line-height: 1.6;
	margin: 4px 0 0;
	max-width: 720px;
	opacity: 0.85;
}

/* ===== CODE ===== */

.e-14474df .code
{
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 8px;
	font-family: var(--ot-font-primary);
}

.e-14474df .code-label
{
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	opacity: 0.55;
}

.e-14474df .code-value
{
	font-family: var(--ot-font-secondary);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	font-variation-settings: 'opsz' 144;
}

/* ===== ACTIONS (top right) ===== */

.e-14474df .actions
{
	display: inline-flex;
	gap: 4px;
	flex-shrink: 0;
	margin-top: 4px;
}

.e-14474df .action
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 50%;
	color: var(--ot-text-2);
	transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1), color 220ms, border-color 220ms, transform 220ms;
}

.e-14474df > .holder.tone-dark .action
{
	border-color: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.85);
}

.e-14474df .action:hover
{
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
	border-color: var(--ot-text-1);
	transform: scale(1.04);
}

.e-14474df > .holder.tone-dark .action:hover
{
	background: var(--ot-bg-1);
	color: var(--ot-text-1);
	border-color: var(--ot-bg-1);
}

.e-14474df .action > i
{
	font-size: 19px;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 900px)
{
	.e-14474df > .holder
	{
		padding: 36px 0 32px;
	}

	.e-14474df > .holder > .inner
	{
		padding: 0 20px;
		gap: 22px;
	}

	.e-14474df .header
	{
		flex-direction: column;
		gap: 20px;
	}

	.e-14474df .title
	{
		font-size: 40px;
	}

	.e-14474df .lead
	{
		font-size: 15px;
	}

	.e-14474df .actions
	{
		margin-top: 0;
	}

	.e-14474df .action
	{
		width: 38px;
		height: 38px;
	}
}

.e-5f8187c
{
	display: block;
	width: 100%;
}

.e-5f8187c > .holder
{
	position: relative;
	width: 100%;
}

/* ========================================== */
/* ===== CLASSIC VARIANT ==================== */
/* ========================================== */

.e-5f8187c > .holder.variant-classic
{
	background: var(--ot-bg-1);
	color: var(--ot-text-1);
	padding: 64px 0 0;
}

/* ========================================== */
/* ===== COVER VARIANT (dark hero) ========== */
/* ========================================== */

.e-5f8187c > .holder.variant-cover
{
	min-height: 620px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: var(--ot-bg-3);
	color: white;
	padding: 96px 0 64px;
}

.e-5f8187c > .holder.variant-cover > .cover
{
	position: absolute;
	inset: 0;
	background-color: var(--ot-bg-3);
}

.e-5f8187c > .holder.variant-cover > .cover::before
{
	content: '';
	position: absolute;
	inset: 0;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.e-5f8187c > .holder.variant-cover > .cover > .cover-overlay
{
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(20, 18, 16, 0.55) 0%, rgba(20, 18, 16, 0.4) 40%, rgba(20, 18, 16, 0.85) 100%);
}

/* ===== INNER ===== */

.e-5f8187c > .holder > .inner
{
	position: relative;
	z-index: 2;
	max-width: 880px;
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ===== BREADCRUMBS ===== */

.e-5f8187c .breadcrumbs
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.e-5f8187c .crumb
{
	color: currentColor;
	opacity: 0.55;
	text-transform: uppercase;
	transition: opacity 180ms;
}

.e-5f8187c .crumb:hover  { opacity: 1; }
.e-5f8187c .crumb.active { opacity: 1; color: var(--ot-brand); }

.e-5f8187c .crumb:not(:last-child)::after
{
	content: '/';
	margin-left: 8px;
	opacity: 0.45;
}

/* ===== TEXT ===== */

.e-5f8187c .text
{
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* ===== META ROW ===== */

.e-5f8187c .meta
{
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 500;
}

.e-5f8187c .category
{
	display: inline-flex;
	padding: 5px 12px;
	background: var(--ot-brand-opacity);
	border-radius: 100px;
	font-size: 10.5px;
	font-weight: 700;
	color: var(--ot-brand);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	transition: background 200ms, color 200ms;
}

.e-5f8187c > .holder.variant-cover .category
{
	background: rgba(255, 254, 252, 0.16);
	color: white;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.e-5f8187c .category:hover
{
	background: var(--ot-brand);
	color: white;
}

.e-5f8187c .meta-dot
{
	width: 3px;
	height: 3px;
	background: currentColor;
	border-radius: 50%;
	opacity: 0.4;
}

.e-5f8187c .date
{
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.005em;
	opacity: 0.7;
}

.e-5f8187c .reading
{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	opacity: 0.7;
}

.e-5f8187c .reading > i
{
	font-size: 14px;
}

/* ===== TITLE ===== */

.e-5f8187c .title
{
	font-family: var(--ot-font-secondary);
	font-size: 60px;
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 1.02;
	margin: 0;
	font-variation-settings: 'opsz' 144;
}

.e-5f8187c > .holder.variant-cover .title
{
	font-size: 72px;
	letter-spacing: -0.035em;
	line-height: 0.98;
}

.e-5f8187c .title em
{
	font-style: italic;
	color: var(--ot-brand);
}

.e-5f8187c > .holder.variant-cover .title em
{
	color: white;
}

/* ===== LEAD ===== */

.e-5f8187c .lead
{
	font-family: var(--ot-font-secondary);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: -0.012em;
	margin: 4px 0 0;
	font-variation-settings: 'opsz' 144;
	opacity: 0.92;
}

/* ===== AUTHOR ===== */

.e-5f8187c .author
{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
	color: inherit;
	transition: opacity 200ms;
}

.e-5f8187c .author:hover
{
	opacity: 0.78;
}

.e-5f8187c .author-avatar
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background-size: cover;
	background-position: center;
	background-color: var(--ot-bg-3);
	border-radius: 50%;
	flex-shrink: 0;
}

.e-5f8187c > .holder.variant-cover .author-avatar
{
	border: 2px solid rgba(255, 255, 255, 0.4);
}

.e-5f8187c .author-avatar-fallback > i
{
	font-size: 22px;
	color: var(--ot-text-3);
}

.e-5f8187c .author-text
{
	display: flex;
	flex-direction: column;
	gap: 1px;
	line-height: 1.3;
}

.e-5f8187c .author-name
{
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: -0.005em;
}

.e-5f8187c .author-role
{
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	opacity: 0.65;
}

/* ===== BELOW IMAGE (classic variant) ===== */

.e-5f8187c .below-image
{
	max-width: 1280px;
	margin: 56px auto 0;
	padding: 0 32px;
}

.e-5f8187c .below-image > img
{
	display: block;
	width: 100%;
	height: auto;
	max-height: 640px;
	object-fit: cover;
	border-radius: var(--ot-radius-l);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 900px)
{
	.e-5f8187c > .holder.variant-classic
	{
		padding: 44px 0 0;
	}

	.e-5f8187c > .holder.variant-cover
	{
		min-height: 480px;
		padding: 64px 0 44px;
	}

	.e-5f8187c > .holder > .inner
	{
		padding: 0 20px;
	}

	.e-5f8187c .title
	{
		font-size: 40px;
	}

	.e-5f8187c > .holder.variant-cover .title
	{
		font-size: 44px;
	}

	.e-5f8187c .lead
	{
		font-size: 17px;
	}

	.e-5f8187c .below-image
	{
		margin-top: 36px;
		padding: 0 20px;
	}
}

.e-b44d700
{
	display: block;
	width: 100%;
}

.e-b44d700 > .holder
{
	display: grid;
	grid-template-columns: repeat(var(--columns, 4), 1fr);
	gap: 16px;
}

/* ===== ITEM ===== */

.e-b44d700 .item
{
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 22px;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-l);
	color: inherit;
	cursor: pointer;
	overflow: hidden;
	transition: border-color 320ms cubic-bezier(0.22, 1, 0.36, 1), transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-b44d700 .item:hover
{
	border-color: var(--ot-bg-3-border);
	transform: translateY(-2px);
}

/* Top accent line on hover */

.e-b44d700 .item::before
{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--ot-brand);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-b44d700 .item:hover::before
{
	transform: scaleX(1);
}

.e-b44d700 .item.accent-dark::before  { background: var(--ot-text-1); }
.e-b44d700 .item.accent-green::before { background: rgba(20, 144, 95, 1); }
.e-b44d700 .item.accent-gold::before  { background: rgba(170, 130, 60, 1); }

/* ===== ICON ===== */

.e-b44d700 .item-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--ot-bg-2);
	flex-shrink: 0;
	transition: background 280ms cubic-bezier(0.22, 1, 0.36, 1), transform 280ms;
}

.e-b44d700 .item:hover .item-icon
{
	background: var(--ot-brand);
	transform: scale(1.04);
}

.e-b44d700 .item.accent-dark:hover  .item-icon { background: var(--ot-text-1); }
.e-b44d700 .item.accent-green:hover .item-icon { background: rgba(20, 144, 95, 1); }
.e-b44d700 .item.accent-gold:hover  .item-icon { background: rgba(170, 130, 60, 1); }

.e-b44d700 .item-icon > i
{
	font-size: 22px;
	color: var(--ot-text-1);
	transition: color 280ms;
}

.e-b44d700 .item:hover .item-icon > i
{
	color: white;
}

/* ===== TEXT ===== */

.e-b44d700 .item-text
{
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1;
}

.e-b44d700 .item-head
{
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.e-b44d700 .item-title
{
	font-family: var(--ot-font-secondary);
	font-size: 15.5px;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var(--ot-text-1);
	margin: 0;
	font-variation-settings: 'opsz' 144;
	transition: color 200ms;
}

.e-b44d700 .item:hover .item-title
{
	color: var(--ot-brand);
}

.e-b44d700 .item.accent-dark:hover  .item-title { color: var(--ot-text-1); }
.e-b44d700 .item.accent-green:hover .item-title { color: rgba(20, 144, 95, 1); }
.e-b44d700 .item.accent-gold:hover  .item-title { color: rgba(170, 130, 60, 1); }

.e-b44d700 .item-badge
{
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	background: var(--ot-brand-opacity);
	border-radius: 100px;
	font-size: 9px;
	font-weight: 700;
	color: var(--ot-brand);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	flex-shrink: 0;
}

.e-b44d700 .item-description
{
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--ot-text-2);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ===== ARROW ===== */

.e-b44d700 .item-arrow
{
	font-size: 17px;
	color: var(--ot-text-3);
	flex-shrink: 0;
	transition: color 240ms cubic-bezier(0.22, 1, 0.36, 1), transform 240ms;
}

.e-b44d700 .item:hover .item-arrow
{
	color: var(--ot-brand);
	transform: translateX(3px);
}

.e-b44d700 .item.accent-dark:hover  .item-arrow { color: var(--ot-text-1); }
.e-b44d700 .item.accent-green:hover .item-arrow { color: rgba(20, 144, 95, 1); }
.e-b44d700 .item.accent-gold:hover  .item-arrow { color: rgba(170, 130, 60, 1); }

/* ===== RESPONSIVE ===== */

@media (max-width: 1100px)
{
	.e-b44d700 > .holder
	{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px)
{
	.e-b44d700 > .holder
	{
		grid-template-columns: 1fr;
	}
}

.e-284dcdbd
{
	display: block;
	width: 100%;
}

.e-284dcdbd > .holder
{
	width: 100%;
}

/* ========================================== */
/* ===== EDITORIAL VARIANT ================== */
/* ========================================== */

.e-284dcdbd .editorial
{
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 0;
	min-height: 680px;
	background: var(--ot-bg-2);
	border-bottom: 1px solid var(--ot-bg-2-border);
}

.e-284dcdbd > .holder.image-right .editorial
{
	grid-template-columns: 1fr 1.2fr;
}

.e-284dcdbd > .holder.image-right .editorial > .stage  { order: 2; }
.e-284dcdbd > .holder.image-right .editorial > .panel  { order: 1; }

/* ===== STAGE (image side) ===== */

.e-284dcdbd .stage
{
	position: relative;
	overflow: hidden;
	background: var(--ot-bg-3);
}

.e-284dcdbd .stage > .image
{
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-color: var(--ot-bg-3);
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1), transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-284dcdbd .stage > .image.active
{
	opacity: 1;
	transform: scale(1);
}

.e-284dcdbd .stage > .image > .image-grain
{
	position: absolute;
	inset: 0;
	background:
		linear-gradient(160deg, rgba(20, 18, 16, 0.0) 60%, rgba(20, 18, 16, 0.32) 100%),
		linear-gradient(0deg, rgba(20, 18, 16, 0.18) 0%, transparent 30%);
}

.e-284dcdbd .stage > .image > .image-meta
{
	position: absolute;
	left: 28px;
	bottom: 24px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: rgba(20, 18, 16, 0.4);
	backdrop-filter: blur(12px) saturate(180%);
	-webkit-backdrop-filter: blur(12px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 100px;
	font-size: 11px;
	font-weight: 600;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

/* Stage arrows — float on image edges */

.e-284dcdbd .stage-arrow
{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: rgba(255, 255, 255, 0.92);
	border: 0;
	border-radius: 50%;
	color: var(--ot-text-1);
	cursor: pointer;
	opacity: 0;
	transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), transform 240ms, background 240ms;
}

.e-284dcdbd .stage:hover .stage-arrow
{
	opacity: 1;
}

.e-284dcdbd .stage-arrow:hover
{
	background: var(--ot-text-1);
	color: white;
}

.e-284dcdbd .stage-arrow-prev { left: 20px; }
.e-284dcdbd .stage-arrow-next { right: 20px; }

.e-284dcdbd .stage:hover .stage-arrow-prev { transform: translateY(-50%) translateX(0); }
.e-284dcdbd .stage:hover .stage-arrow-next { transform: translateY(-50%) translateX(0); }

.e-284dcdbd .stage-arrow > i { font-size: 20px; }

/* ===== PANEL (content side) ===== */

.e-284dcdbd .panel
{
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ot-bg-1);
	padding: 56px 64px 32px;
	overflow: hidden;
}

/* Deco big number */

.e-284dcdbd .panel > .panel-deco
{
	position: absolute;
	top: 56px;
	right: 64px;
	display: flex;
	align-items: baseline;
	gap: 12px;
	pointer-events: none;
}

.e-284dcdbd .panel > .panel-deco > .deco-num
{
	font-family: var(--ot-font-secondary);
	font-size: 96px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--ot-bg-3);
	font-variation-settings: 'opsz' 144;
	transition: color 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-284dcdbd .panel > .panel-deco > .deco-line
{
	width: 24px;
	height: 1px;
	background: var(--ot-bg-3-border);
	margin-bottom: 14px;
}

.e-284dcdbd .panel > .panel-deco > .deco-total
{
	font-family: var(--ot-font-secondary);
	font-size: 18px;
	font-weight: 400;
	color: var(--ot-text-3);
	font-variation-settings: 'opsz' 144;
}

/* Panel slide (stacked, crossfade) */

.e-284dcdbd .panel > .panel-slide
{
	position: absolute;
	left: 64px;
	right: 64px;
	top: 56px;
	margin-top: 88px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 520px;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}

.e-284dcdbd .panel > .panel-slide.active
{
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.e-284dcdbd .panel-eyebrow
{
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 11px;
	font-weight: 700;
	color: var(--ot-brand);
	text-transform: uppercase;
	letter-spacing: 0.18em;
}

.e-284dcdbd .panel-eyebrow > .panel-eyebrow-mark
{
	width: 28px;
	height: 1px;
	background: var(--ot-brand);
}

.e-284dcdbd .panel-title
{
	font-family: var(--ot-font-secondary);
	font-size: 64px;
	font-weight: 400;
	letter-spacing: -0.035em;
	line-height: 0.96;
	color: var(--ot-text-1);
	margin: 0;
	font-variation-settings: 'opsz' 144;
}

.e-284dcdbd .panel-title em
{
	font-style: italic;
	color: var(--ot-brand);
	font-weight: 400;
}

.e-284dcdbd .panel-description
{
	font-size: 15px;
	line-height: 1.65;
	color: var(--ot-text-2);
	margin: 0;
}

.e-284dcdbd .panel-cta
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	padding: 14px 24px;
	background: var(--ot-text-1);
	border-radius: 100px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.005em;
	color: var(--ot-bg-1);
	width: fit-content;
	transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1), transform 240ms, gap 240ms;
}

.e-284dcdbd .panel-cta:hover
{
	background: var(--ot-brand);
	transform: translateX(2px);
	gap: 14px;
}

.e-284dcdbd .panel-cta > i
{
	font-size: 18px;
}

/* ===== THUMBS ===== */

.e-284dcdbd .panel > .panel-thumbs
{
	margin-top: auto;
	padding-top: 48px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	border-top: 1px solid var(--ot-bg-2-border);
}

.e-284dcdbd .thumb
{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding: 14px 0 0;
	background: transparent;
	border: 0;
	border-top: 1px solid transparent;
	cursor: pointer;
	text-align: left;
	transition: border-color 280ms cubic-bezier(0.22, 1, 0.36, 1);
	margin-top: -1px;
}

.e-284dcdbd .thumb:hover
{
	border-top-color: var(--ot-bg-3-border);
}

.e-284dcdbd .thumb.active
{
	border-top-color: var(--ot-brand);
}

.e-284dcdbd .thumb > .thumb-cover
{
	display: none;
}

.e-284dcdbd .thumb > .thumb-text
{
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	width: 100%;
}

.e-284dcdbd .thumb > .thumb-text > .thumb-num
{
	font-family: var(--ot-font-secondary);
	font-size: 11px;
	font-weight: 500;
	color: var(--ot-text-3);
	font-variation-settings: 'opsz' 144;
	letter-spacing: 0;
	transition: color 280ms;
}

.e-284dcdbd .thumb.active > .thumb-text > .thumb-num
{
	color: var(--ot-brand);
}

.e-284dcdbd .thumb > .thumb-text > .thumb-label
{
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ot-text-2);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 240ms;
}

.e-284dcdbd .thumb.active > .thumb-text > .thumb-label
{
	color: var(--ot-text-1);
}

.e-284dcdbd .thumb > .thumb-progress
{
	position: absolute;
	top: -1px;
	left: 0;
	height: 1px;
	background: var(--ot-brand);
	transition: width 50ms linear;
	z-index: 1;
}

/* ========================================== */
/* ===== MULTI VARIANT ====================== */
/* ========================================== */

.e-284dcdbd .multi
{
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.e-284dcdbd .multi > .multi-track
{
	display: flex;
	gap: 18px;
	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-284dcdbd .multi-slide
{
	position: relative;
	display: flex;
	align-items: flex-end;
	flex-shrink: 0;
	width: calc((100% - 18px * (var(--per-view, 3) - 1)) / var(--per-view, 3));
	min-height: 360px;
	background-size: cover;
	background-position: center;
	background-color: var(--ot-bg-3);
	border-radius: var(--ot-radius-l);
	overflow: hidden;
	color: white;
	transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-284dcdbd .multi-slide:hover
{
	transform: translateY(-3px);
}

.e-284dcdbd .multi-slide > .multi-overlay
{
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 18, 16, 0.0) 35%, rgba(20, 18, 16, 0.4) 65%, rgba(20, 18, 16, 0.85) 100%);
}

.e-284dcdbd .multi-slide > .multi-content
{
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 24px 24px;
	width: 100%;
}

.e-284dcdbd .multi-eyebrow
{
	font-size: 10.5px;
	font-weight: 700;
	color: rgba(255, 254, 252, 0.85);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.e-284dcdbd .multi-title
{
	font-family: var(--ot-font-secondary);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: white;
	margin: 0;
	font-variation-settings: 'opsz' 144;
}

.e-284dcdbd .multi-cta
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 600;
	color: white;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.e-284dcdbd .multi-cta > i
{
	font-size: 16px;
	transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-284dcdbd .multi-slide:hover .multi-cta > i
{
	transform: translateX(4px);
}

.e-284dcdbd .multi > .multi-controls
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 4px;
}

.e-284dcdbd .multi-counter
{
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-family: var(--ot-font-secondary);
	color: var(--ot-text-2);
	font-variation-settings: 'opsz' 144;
}

.e-284dcdbd .multi-counter > .num
{
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.02em;
}

.e-284dcdbd .multi-counter > .num.total { font-size: 14px; opacity: 0.6; }
.e-284dcdbd .multi-counter > .sep       { font-size: 16px; opacity: 0.55; }

.e-284dcdbd .multi-arrows
{
	display: inline-flex;
	gap: 8px;
}

.e-284dcdbd .arrow
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--ot-bg-2-border);
	border-radius: 50%;
	background: var(--ot-bg-1);
	color: var(--ot-text-1);
	cursor: pointer;
	transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1), border-color 240ms, transform 240ms;
}

.e-284dcdbd .arrow:hover
{
	background: var(--ot-text-1);
	color: var(--ot-bg-1);
	border-color: var(--ot-text-1);
	transform: scale(1.04);
}

.e-284dcdbd .arrow > i { font-size: 19px; }

/* ========================================== */
/* ===== RESPONSIVE ========================= */
/* ========================================== */

@media (max-width: 1100px)
{
	.e-284dcdbd .editorial
	{
		min-height: 580px;
	}

	.e-284dcdbd .panel
	{
		padding: 44px 44px 28px;
	}

	.e-284dcdbd .panel > .panel-deco
	{
		top: 44px;
		right: 44px;
	}

	.e-284dcdbd .panel > .panel-slide
	{
		left: 44px;
		right: 44px;
		top: 44px;
	}

	.e-284dcdbd .panel-title
	{
		font-size: 50px;
	}

	.e-284dcdbd .multi-slide
	{
		width: calc((100% - 16px) / 2);
	}
}

@media (max-width: 900px)
{
	.e-284dcdbd .editorial
	{
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.e-284dcdbd > .holder.image-right .editorial > .stage  { order: 1; }
	.e-284dcdbd > .holder.image-right .editorial > .panel  { order: 2; }

	.e-284dcdbd .stage
	{
		min-height: 360px;
	}

	.e-284dcdbd .panel
	{
		padding: 32px 24px;
	}

	.e-284dcdbd .panel > .panel-deco
	{
		position: relative;
		top: auto;
		right: auto;
		margin-bottom: 16px;
	}

	.e-284dcdbd .panel > .panel-deco > .deco-num
	{
		font-size: 56px;
	}

	.e-284dcdbd .panel > .panel-slide
	{
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		margin-top: 0;
		display: none;
	}

	.e-284dcdbd .panel > .panel-slide.active
	{
		display: flex;
	}

	.e-284dcdbd .panel-title
	{
		font-size: 38px;
	}

	.e-284dcdbd .panel > .panel-thumbs
	{
		grid-template-columns: repeat(2, 1fr);
		padding-top: 32px;
	}

	.e-284dcdbd .multi-slide
	{
		width: 100%;
	}

	.e-284dcdbd .stage-arrow
	{
		opacity: 1;
	}

	.e-284dcdbd .stage-arrow-prev { left: 12px; }
	.e-284dcdbd .stage-arrow-next { right: 12px; }
}

.e-6705b62a
{
	display: block;
	width: 100%;
}

.e-6705b62a > .holder
{
	display: grid;
	grid-template-columns: repeat(var(--columns, 3), 1fr);
	gap: 24px;
}

/* ===== TESTIMONIAL ===== */

.e-6705b62a .testimonial
{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 32px 30px 26px;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-l);
	margin: 0;
	transition: border-color 320ms cubic-bezier(0.22, 1, 0.36, 1), transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.e-6705b62a .testimonial:hover
{
	border-color: var(--ot-bg-3-border);
	transform: translateY(-3px);
}

/* Decorative quote mark */

.e-6705b62a .testimonial > .quote
{
	position: absolute;
	top: 22px;
	right: 26px;
	font-size: 56px;
	color: var(--ot-bg-3);
	line-height: 1;
	pointer-events: none;
	font-variation-settings: 'FILL' 1;
}

/* Stars */

.e-6705b62a .testimonial > .stars
{
	display: inline-flex;
	gap: 1px;
}

.e-6705b62a .testimonial > .stars > i
{
	font-size: 14px;
	color: rgba(220, 165, 50, 1);
	font-variation-settings: 'FILL' 1;
}

/* Quote text */

.e-6705b62a .testimonial > .text
{
	font-family: var(--ot-font-secondary);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: -0.012em;
	color: var(--ot-text-1);
	margin: 0;
	font-variation-settings: 'opsz' 144;
}

/* Footer (author info) */

.e-6705b62a .testimonial > .footer
{
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--ot-bg-2-border);
}

.e-6705b62a .avatar
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-size: cover;
	background-position: center;
	background-color: var(--ot-bg-3);
	border-radius: 50%;
	flex-shrink: 0;
}

.e-6705b62a .avatar-fallback > i
{
	font-size: 22px;
	color: var(--ot-text-3);
}

.e-6705b62a .author
{
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
	line-height: 1.3;
}

.e-6705b62a .name
{
	font-size: 13px;
	font-weight: 600;
	color: var(--ot-text-1);
	letter-spacing: -0.005em;
}

.e-6705b62a .meta
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 500;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.e-6705b62a .meta > .meta-dot
{
	width: 3px;
	height: 3px;
	background: var(--ot-bg-3-border);
	border-radius: 50%;
}

.e-6705b62a .date
{
	font-size: 11px;
	font-weight: 500;
	color: var(--ot-text-3);
	flex-shrink: 0;
	letter-spacing: 0.005em;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 900px)
{
	.e-6705b62a > .holder
	{
		grid-template-columns: 1fr;
	}

	.e-6705b62a .testimonial
	{
		padding: 26px 24px 22px;
	}

	.e-6705b62a .testimonial > .text
	{
		font-size: 15.5px;
	}
}

.e-351651c2
{
	display: block;
	width: 100%;
}

.e-351651c2 > .holder
{
	display: grid;
	grid-template-columns: repeat(var(--columns, 4), 1fr);
	gap: 0;
}

/* ===== ITEM ===== */

.e-351651c2 .item
{
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 0 28px;
	position: relative;
}

.e-351651c2 .item:first-child
{
	padding-left: 0;
}

.e-351651c2 .item:last-child
{
	padding-right: 0;
}

/* Border variant: dividers between items */

.e-351651c2 > .holder.border .item:not(:first-child)::before
{
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: var(--ot-bg-2-border);
}

/* ===== ICON ===== */

.e-351651c2 .item > .icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: var(--ot-brand-opacity);
	border-radius: 14px;
	flex-shrink: 0;
}

.e-351651c2 .item > .icon > i
{
	font-size: 24px;
	color: var(--ot-brand);
}

/* ===== STAT (when present, replaces icon) ===== */

.e-351651c2 .item > .stat
{
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1;
}

.e-351651c2 .item > .stat > .stat-value
{
	font-family: var(--ot-font-secondary);
	font-size: 56px;
	font-weight: 400;
	letter-spacing: -0.035em;
	color: var(--ot-text-1);
	font-variation-settings: 'opsz' 144;
}

.e-351651c2 .item > .stat > .stat-label
{
	font-size: 11px;
	font-weight: 700;
	color: var(--ot-text-3);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin-top: 6px;
}

/* Stats variant: bigger numbers, no description box */

.e-351651c2 > .holder.stats .item > .stat > .stat-value
{
	font-size: 72px;
}

.e-351651c2 > .holder.stats .item > .title
{
	font-size: 13px;
	font-weight: 600;
	color: var(--ot-text-2);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.e-351651c2 > .holder.stats .item > .description
{
	font-size: 13px;
	color: var(--ot-text-3);
}

/* ===== TITLE ===== */

.e-351651c2 .item > .title
{
	font-family: var(--ot-font-secondary);
	font-size: 19px;
	font-weight: 500;
	letter-spacing: -0.012em;
	line-height: 1.25;
	color: var(--ot-text-1);
	margin: 0;
	font-variation-settings: 'opsz' 144;
}

/* ===== DESCRIPTION ===== */

.e-351651c2 .item > .description
{
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--ot-text-2);
	margin: 0;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 1100px)
{
	.e-351651c2 > .holder
	{
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 0;
	}

	.e-351651c2 .item
	{
		padding: 0 16px;
	}

	.e-351651c2 .item:nth-child(2n + 1)
	{
		padding-left: 0;
	}

	.e-351651c2 .item:nth-child(2n)
	{
		padding-right: 0;
	}

	.e-351651c2 > .holder.border .item:not(:first-child)::before
	{
		display: none;
	}

	.e-351651c2 > .holder.border .item:nth-child(2n)::before
	{
		display: block;
	}
}

@media (max-width: 600px)
{
	.e-351651c2 > .holder
	{
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.e-351651c2 .item
	{
		padding: 0;
	}

	.e-351651c2 > .holder.border .item:not(:first-child)::before
	{
		display: none;
	}

	.e-351651c2 .item > .stat > .stat-value
	{
		font-size: 44px;
	}
}

.p-41e4856a .content
{
	display: flex;
	flex-direction: column;
}

.p-41e4856a .listing
{
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 32px;
	padding: 48px 32px 96px;
	align-items: flex-start;
}

.p-41e4856a .listing-sidebar
{
	min-width: 0;
}

.p-41e4856a .listing-results
{
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.p-41e4856a .results-grid
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.p-41e4856a .atlas-card-link
{
	display: block;
	color: inherit;
	text-decoration: none;
	min-width: 0;
}

@media (max-width: 1300px)
{
	.p-41e4856a .results-grid
	{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px)
{
	.p-41e4856a .listing
	{
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 32px 20px 64px;
	}
}

@media (max-width: 600px)
{
	.p-41e4856a .results-grid
	{
		grid-template-columns: 1fr;
	}
}

.p-4aa14b57 .content
{
	display: flex;
	flex-direction: column;
	gap: 96px;
	padding-bottom: 80px;
}

.p-4aa14b57 .atlas-card-link
{
	display: block;
	color: inherit;
	text-decoration: none;
	min-width: 0;
}

.p-4aa14b57 .link-cta
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ot-text-1);
	transition: color 180ms cubic-bezier(0.22, 1, 0.36, 1), gap 180ms;
}

.p-4aa14b57 .link-cta:hover
{
	color: var(--ot-brand);
	gap: 10px;
}

.p-4aa14b57 .link-cta > i
{
	font-size: 16px;
}

.p-4aa14b57 .tour-cards-test,
.p-4aa14b57 .city-cards-test,
.p-4aa14b57 .country-cards-test
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}

@media (max-width: 1100px)
{
	.p-4aa14b57 .tour-cards-test,
	.p-4aa14b57 .city-cards-test,
	.p-4aa14b57 .country-cards-test { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px)
{
	.p-4aa14b57 .tour-cards-test,
	.p-4aa14b57 .city-cards-test,
	.p-4aa14b57 .country-cards-test { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

@media (max-width: 600px)
{
	.p-4aa14b57 .tour-cards-test,
	.p-4aa14b57 .city-cards-test,
	.p-4aa14b57 .country-cards-test { grid-template-columns: 1fr; }
}

.p-4aa14b57 .magazine-grid
{
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 28px;
	align-items: stretch;
}

.p-4aa14b57 .magazine-side
{
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.p-4aa14b57 .banners-row
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.p-4aa14b57 .superlist-grid
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

@media (max-width: 900px)
{
	.p-4aa14b57 .superlist-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px)
{
	.p-4aa14b57 .superlist-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1100px)
{
	.p-4aa14b57 .magazine-grid { grid-template-columns: 1fr; }
	.p-4aa14b57 .banners-row { grid-template-columns: 1fr; }
}

@media (max-width: 900px)
{
	.p-4aa14b57 .content
	{
		gap: 64px;
		padding-bottom: 56px;
	}
}

.p-6aaecdd6 .content
{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - 80px);
	padding: 80px 0;
}

.p-6bcc54f9 .content
{
	display: flex;
	flex-direction: column;
}

.p-6bcc54f9 .page-body
{
	padding: 80px 0 64px;
}

.p-6bcc54f9 .page-contact
{
	padding: 32px 32px 120px;
}

@media (max-width: 900px)
{
	.p-6bcc54f9 .page-body
	{
		padding: 56px 0 40px;
	}

	.p-6bcc54f9 .page-contact
	{
		padding: 24px 20px 80px;
	}
}

.p-43213a89 .content
{
	display: flex;
	flex-direction: column;
}

.p-43213a89 .placeholder
{
	padding: 80px 32px 120px;
	text-align: center;
	color: var(--ot-text-3);
	font-size: 14px;
}

.p-65f4c2d0 .content
{
	display: flex;
	flex-direction: column;
}

.p-65f4c2d0 .gallery-block
{
	padding: 24px 32px 0;
}

.p-65f4c2d0 .body-layout
{
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 48px;
	padding: 48px 32px 96px;
	align-items: flex-start;
}

.p-65f4c2d0 .body-main
{
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.p-65f4c2d0 .body-sidebar
{
	min-width: 0;
	position: sticky;
	top: var(--ot-spacing-m);
}

.p-65f4c2d0 .placeholder-section
{
	padding: 24px 28px;
	background: var(--ot-bg-1);
	border: 1px solid var(--ot-bg-2-border);
	border-radius: var(--ot-radius-l);
	min-height: 280px;
	scroll-margin-top: 160px;
}

.p-65f4c2d0 .block-section
{
	display: flex;
	flex-direction: column;
	gap: 24px;
	scroll-margin-top: 160px;
	padding: 8px 0;
}

.p-65f4c2d0 .placeholder-section > h2
{
	font-family: var(--ot-font-secondary);
	font-size: 28px;
	font-weight: 400;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
	font-variation-settings: 'opsz' 144;
	color: var(--ot-text-1);
}

.p-65f4c2d0 .placeholder-section > p
{
	font-size: 13.5px;
	color: var(--ot-text-3);
	margin: 0;
}

.p-65f4c2d0 .placeholder-sidebar
{
	padding: 32px 24px;
	background: var(--ot-bg-2);
	border: 1px dashed var(--ot-bg-3-border);
	border-radius: var(--ot-radius-l);
	text-align: center;
	color: var(--ot-text-3);
	font-size: 13px;
}

@media (max-width: 1100px)
{
	.p-65f4c2d0 .body-layout
	{
		grid-template-columns: 1fr;
	}

	.p-65f4c2d0 .body-sidebar
	{
		position: relative;
		top: auto;
	}
}

@media (max-width: 900px)
{
	.p-65f4c2d0 .gallery-block
	{
		padding: 16px 20px 0;
	}

	.p-65f4c2d0 .body-layout
	{
		padding: 32px 20px 64px;
	}
}

/* ===== ATLAS — Mondorama brand ===== */

:root
{
	--ot-spacing-x: 4px;
	--ot-spacing-s: 10px;
	--ot-spacing-m: 20px;
	--ot-spacing-l: 40px;

	--ot-radius-s: 6px;
	--ot-radius-m: 10px;
	--ot-radius-l: 18px;

	--ot-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ot-font-secondary: 'Fraunces', 'Inter', Georgia, serif;

	/* Pure white surfaces, neutral light borders */

	--ot-bg-1: rgba(255, 255, 255, 1);
	--ot-bg-1-border: rgba(232, 232, 232, 1);
	--ot-bg-1-opacity: rgba(255, 255, 255, 0.94);
	--ot-bg-1-hover: rgba(250, 250, 250, 1);

	--ot-bg-2: rgba(248, 248, 248, 1);
	--ot-bg-2-border: rgba(228, 228, 228, 1);
	--ot-bg-2-opacity: rgba(248, 248, 248, 0.92);
	--ot-bg-2-hover: rgba(243, 243, 243, 1);

	--ot-bg-3: rgba(240, 240, 240, 1);
	--ot-bg-3-border: rgba(218, 218, 218, 1);
	--ot-bg-3-opacity: rgba(240, 240, 240, 0.92);
	--ot-bg-3-hover: rgba(232, 232, 232, 1);

	--ot-bg-4: rgba(228, 228, 228, 1);
	--ot-bg-4-border: rgba(208, 208, 208, 1);
	--ot-bg-4-opacity: rgba(228, 228, 228, 0.92);
	--ot-bg-4-hover: rgba(218, 218, 218, 1);

	--ot-text-1: rgba(18, 18, 20, 1);
	--ot-text-2: rgba(72, 72, 76, 1);
	--ot-text-3: rgba(120, 120, 124, 1);

	/* Mondorama brand red — #ed1c24 */

	--ot-brand: rgba(237, 28, 36, 1);
	--ot-brand-border: rgba(243, 76, 82, 1);
	--ot-brand-opacity: rgba(237, 28, 36, 0.10);
	--ot-brand-hover: rgba(204, 16, 24, 1);

	--ot-shadow-s: 0 1px 3px rgba(0, 0, 0, 0.06);
	--ot-shadow-m: 0 8px 24px -8px rgba(0, 0, 0, 0.10);
	--ot-shadow-l: 0 24px 60px -16px rgba(0, 0, 0, 0.14);
}

body
{
	background: var(--ot-bg-1);
	font-family: var(--ot-font-primary);
	color: var(--ot-text-1);
}

h1, h2, h3, h4, h5, h6
{
	font-family: var(--ot-font-secondary);
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: var(--ot-text-1);
	font-variation-settings: 'opsz' 144, 'wght' 400;
}

h1 em, h2 em, h3 em, h4 em
{
	font-style: italic;
	font-weight: 400;
	color: var(--ot-brand);
}

a
{
	color: inherit;
	text-decoration: none;
	transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}