/* Timiton Site Chrome — header + footer (Figma 2026 redesign). RTL-first. */

/* ---- motion foundation (120–250ms, no overshoot; one reduced-motion kill switch) ---- */
:root { --tsc-fast: 150ms; --tsc-med: 220ms; --tsc-ease: cubic-bezier(.4, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) {
	.tsc-header *, .tsc-footer *, .tsc-ai *, .tsc-sec *, .tsc-svc *, .tpg-root *,
	.tsc-header *::before, .tsc-footer *::before, .tsc-ai *::before, .tsc-sec *::before, .tsc-svc *::before, .tpg-root *::before,
	.tsc-header *::after, .tsc-footer *::after, .tsc-ai *::after, .tsc-sec *::after, .tsc-svc *::after, .tpg-root *::after {
		/* `none` rather than a .01ms duration: a keyframe with fill-mode `both` still paints its
		   `from` frame (opacity 0) for one frame before it finishes */
		animation: none !important; transition: none !important; scroll-behavior: auto !important;
	}
}
@keyframes tscPanelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes tscDrawerIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes tscPanelOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes tscMascotIdle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.tsc-header,
.tsc-footer {
	--tsc-white: #fdfdfc;
	--tsc-black: #15191d;
	--tsc-dark: #343434;
	--tsc-grey: #6d707d;
	--tsc-stroke: #d3dce9;
	--tsc-fill: #f4f4f2;
	font-family: "Rubik", sans-serif;
	direction: rtl;
	color: var(--tsc-dark);
	-webkit-font-smoothing: antialiased;
}

/* ---- theme resets (hello-elementor styles buttons/links/inputs globally) ---- */
.tsc-header *,
.tsc-footer * { box-sizing: border-box; }
.tsc-header p,
.tsc-footer p { margin: 0; }
.tsc-header ul,
.tsc-footer ul { list-style: none; margin: 0; padding: 0; }
.tsc-header a,
.tsc-footer a { text-decoration: none; color: inherit; }
.tsc-header img,
.tsc-footer img { display: block; max-width: none; height: auto; border: 0; box-shadow: none; }
.tsc-header button,
.tsc-footer button {
	appearance: none; -webkit-appearance: none;
	background: none; border: 0; border-radius: 0; padding: 0; margin: 0;
	font: inherit; color: inherit; cursor: pointer; line-height: inherit; text-transform: none; letter-spacing: 0;
	transition: none; /* the theme reset gives every button `transition: all .3s` — off-token; widgets re-add what they animate */
}
.tsc-header button:hover,
.tsc-header button:focus { background: none; color: inherit; }
.tsc-header [hidden] { display: none !important; }
.tsc-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tsc-header :focus-visible,
.tsc-footer :focus-visible { outline: 2px solid #2870b7; outline-offset: 2px; }

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

/* The top bar stays pinned while the secondary rows scroll and fade behind it.
   JS reserves the bar's original height, keeping the page's scroll position stable.
   Use fixed rather than sticky: the site's body overflow rule breaks nested sticky. */
.tsc-sticky-shell {
	position: relative !important;
	top: auto !important;
	z-index: 10010;
}
.tsc-sticky-shell .tsc-bar { position: fixed; top: var(--tsc-admin-offset, 0px); left: 0; right: 0; }
.tsc-sticky-shell .tsc-channels,
.tsc-sticky-shell .tsc-strip { transition: opacity var(--tsc-med) var(--tsc-ease), transform var(--tsc-med) var(--tsc-ease), visibility var(--tsc-med); }
.tsc-sticky-shell--compact .tsc-channels,
.tsc-sticky-shell--compact .tsc-strip { opacity: 0; visibility: hidden; transform: translateY(-12px); pointer-events: none; }

.tsc-bar { position: relative; z-index: 999; background: var(--tsc-white); }
.tsc-bar__inner {
	display: flex; align-items: center; gap: 32px;
	padding: 24px 32px; min-height: 97.5px;
	background: var(--tsc-white);
	border-bottom: 1.5px solid var(--tsc-stroke);
}
.tsc-header.is-open .tsc-bar__inner { border-bottom-color: transparent; }

.tsc-logo { flex: 0 0 auto; display: block; }
.tsc-logo img { width: 110.72px; height: 48px; object-fit: contain; }

.tsc-nav { display: flex; align-items: center; gap: 16px; flex: 0 1 auto; }
.tsc-header .tsc-nav__item {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 18px; line-height: 28px; font-weight: 400; color: var(--tsc-dark); white-space: nowrap;
}
.tsc-nav__item[aria-expanded="true"] .tsc-nav__label { font-weight: 600; }
.tsc-nav__label { display: block; }
/* The open item goes bold (Figma) — reserve the bold width with a hidden ::after copy of the text
   (tsc.js sets data-text) so the neighbouring buttons don't shift when a panel opens. */
.tsc-nav__label[data-text] { display: inline-flex; flex-direction: column; align-items: center; }
.tsc-nav__label[data-text]::after { content: attr(data-text); font-weight: 600; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
/* hover / press affordance (the item had none): underline fades in, chevron flips while open */
.tsc-header .tsc-nav__item .tsc-nav__label { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 6px; transition: text-decoration-color var(--tsc-fast) var(--tsc-ease); }
.tsc-header .tsc-nav__item:hover .tsc-nav__label,
.tsc-header .tsc-nav__item:focus-visible .tsc-nav__label { text-decoration-color: currentColor; }
.tsc-header .tsc-nav__item:active { opacity: .7; }
.tsc-chev { width: 20px; height: 20px; flex: 0 0 20px; transition: transform var(--tsc-fast) var(--tsc-ease); }
.tsc-chev--down { transform: rotate(-90deg); }
.tsc-nav__item[aria-expanded="true"] .tsc-chev--down { transform: rotate(90deg); }

.tsc-tools { display: flex; align-items: center; gap: 24px; margin-inline-start: auto; padding: 0 12px; align-self: stretch; }
.tsc-vsep { width: 0; align-self: stretch; border-inline-start: 1.5px solid var(--tsc-stroke); }
.tsc-burger { position: relative; width: 27px; height: 27px; flex: 0 0 27px; display: flex; align-items: center; justify-content: center; }
/* Both icons stay rendered (so the X is already loaded) and cross-fade. */
.tsc-burger img { position: absolute; top: 50%; left: 50%; width: 24.5px; height: auto; transform: translate(-50%, -50%); transition: opacity var(--tsc-fast) var(--tsc-ease); }
/* 44px hit areas for the 20–27px icon buttons (no visual change) */
.tsc-search-toggle { position: relative; }
.tsc-burger::before,
.tsc-search-toggle::before { content: ""; position: absolute; inset: -12px; }
.tsc-burger .tsc-burger__close { width: 23px; opacity: 0; }
.tsc-burger[aria-expanded="true"] .tsc-burger__open { opacity: 0; }
.tsc-burger[aria-expanded="true"] .tsc-burger__close { opacity: 1; }

.tsc-search { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 4px; border: 1px solid transparent; }
.tsc-search:hover { background: #f0f3f6; }
.tsc-search:focus-within { background: #f8f9f9; border-color: var(--tsc-stroke); }
.tsc-search:focus-within .tsc-search__input { width: 313px; max-width: 313px; } /* 364 total (Figma); narrower bars below */
@media (max-width: 1439px) and (min-width: 1281px) { .tsc-search:focus-within .tsc-search__input { width: 192px; max-width: 192px; } }
.tsc-search__btn { width: 27px; height: 27px; flex: 0 0 27px; }
.tsc-search__btn img { width: 27px; height: 27px; }
.tsc-header .tsc-search__input {
	width: 168px; field-sizing: content; min-width: 150px; max-width: 260px; border: 0; background: transparent; box-shadow: none; outline: 0; padding: 0; margin: 0; transition: width var(--tsc-med, 220ms) var(--tsc-ease, ease);
	font-family: inherit; font-size: 18px; line-height: 21px; color: var(--tsc-black) !important; direction: rtl; min-height: 0; border-radius: 0;
}
.tsc-header .tsc-search__input::placeholder { color: var(--tsc-black); opacity: 1; }
.tsc-header .tsc-search__input:focus::placeholder { color: var(--tsc-grey); }
.tsc-header .tsc-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.tsc-search-toggle { display: none; }

/* ---- dropdown panels ---- */
.tsc-panel {
	position: absolute; top: 100%; left: 0; right: 0;
	background: var(--tsc-white); border-bottom: 1.5px solid var(--tsc-stroke);
	padding: 16px 64px 40px;
	box-shadow: 0 16px 24px -20px rgba(21, 25, 29, .18);
}
.tsc-brands { display: flex; align-items: center; justify-content: center; }
.tsc-brand {
	flex: 0 1 388px; text-align: center; font-size: 24px; font-weight: 500; line-height: 28px; color: var(--tsc-dark);
	white-space: nowrap; padding: 0 16px;
}
.tsc-psep { align-self: stretch; width: 0; border-inline-start: 1.5px solid var(--tsc-stroke); flex: 0 0 auto; }
.tsc-brands .tsc-psep { min-height: 28px; }

.tsc-groups { display: flex; align-items: flex-start; justify-content: center; gap: 48px; }
.tsc-groups > .tsc-psep { margin: 0 32px; }
.tsc-col { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.tsc-col__title { font-size: 24px; font-weight: 500; line-height: 28px; color: var(--tsc-dark); white-space: nowrap; }
.tsc-col__list { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.tsc-col__link { display: block; padding: 2px 8px 4px; font-size: 18px; line-height: 21px; color: var(--tsc-dark); white-space: nowrap; }
.tsc-col__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.tsc-col--bare .tsc-col__list { min-width: 149px; }
.tsc-col__link--icon { display: flex; align-items: center; gap: 16px; padding: 0; font-weight: 600; }
.tsc-col__link--icon img { width: 32px; height: 32px; object-fit: cover; flex: 0 0 32px; }

.tsc-card { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 200px; text-align: center; }
.tsc-card__title { font-size: 24px; font-weight: 500; line-height: 28px; color: var(--tsc-dark); }
.tsc-card__desc { font-size: 16px; line-height: 19px; color: var(--tsc-grey); }
.tsc-card__img { width: auto; max-width: 145px; max-height: 125px; margin-top: 4px; object-fit: contain; }

.tsc-panel--burger { padding-top: 16px; }
.tsc-cols--burger { display: flex; align-items: flex-start; justify-content: space-between; }
.tsc-cols--burger .tsc-col { width: 405.333px; }

/* ---- channels ---- */
.tsc-channels { display: flex; gap: 16px; padding: 32px 48px 0; }
.tsc-ch { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tsc-ch__btn {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; height: 52px; padding: 0 24px; border-radius: 6px;
	transition: filter var(--tsc-fast) var(--tsc-ease), transform var(--tsc-fast) var(--tsc-ease);
}
.tsc-ch:hover .tsc-ch__btn { filter: brightness(1.06); transform: translateY(-1px); }
.tsc-header .tsc-ch__icon { width: 32px; height: 32px; object-fit: contain; flex: 0 0 32px; }
.tsc-ch__label { font-size: 18px; font-weight: 500; line-height: 21px; color: var(--tsc-white); white-space: nowrap; }
.tsc-ch__sub { display: none; font-size: 12px; line-height: 14px; color: var(--tsc-grey); text-align: center; }

/* ---- category strip ---- */
.tsc-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 8px; padding: 24px 48px 32px; }
.tsc-strip__link { font-size: 18px; line-height: 21px; color: var(--tsc-grey); white-space: nowrap; padding: 0 8px; border-inline-start: 1.5px solid var(--tsc-stroke); }
.tsc-strip__link:first-child { border-inline-start: 0; padding-inline-start: 0; }
.tsc-header .tsc-strip__link { color: var(--tsc-grey); transition: color var(--tsc-fast) var(--tsc-ease); }
.tsc-header .tsc-strip__link:hover { color: var(--tsc-black); }
.tsc-header .tsc-strip__link:active { opacity: .7; }
.tsc-header:not(:has(.tsc-strip)) .tsc-channels { padding-bottom: 32px; }

/* ---- mobile drawer / search (hidden on desktop) ---- */
.tsc-drawer,
.tsc-msearch { display: none; }

@media (max-width: 1280px) and (min-width: 1025px) {
	.tsc-bar__inner { gap: 20px; }
	.tsc-nav { gap: 12px; }
	.tsc-header .tsc-search__input { width: 150px; font-size: 16px; }
	.tsc-search:focus-within .tsc-search__input { width: 170px; max-width: 170px; }
	.tsc-channels { padding-inline: 32px; gap: 12px; }
	.tsc-ch__btn { padding: 0 12px; }
	.tsc-cols--burger .tsc-col { width: auto; }
}

@media (max-width: 1180px) and (min-width: 1025px) {
	/* the bar overflowed by up to 88px here: keep the magnifier, drop the text field */
	.tsc-header .tsc-search__input { display: none; }
	.tsc-nav { gap: 8px; }
	.tsc-tools { gap: 16px; }
}

@media (max-width: 1024px) {
	.tsc-bar__inner { padding: 24px 16px; min-height: 0; gap: 12px; }
	.tsc-logo img { width: 92.27px; height: 40px; }
	.tsc-nav,
	.tsc-search,
	.tsc-panel,
	.tsc-strip { display: none !important; }
	.tsc-tools { padding: 0; gap: 12px; }
	.tsc-burger { width: 20px; height: 20px; flex-basis: 20px; }
	.tsc-burger img { width: 17px; }
	.tsc-burger .tsc-burger__close { width: 16px; }
	.tsc-search-toggle { display: flex; width: 20px; height: 20px; }
	.tsc-search-toggle img { width: 20px; height: 20px; }

	.tsc-drawer:not([hidden]) {
		display: flex; flex-direction: column;
		position: absolute; top: 100%; left: 0; right: 0;
		max-height: calc(100vh - 88px); overflow-y: auto; overscroll-behavior: contain;
		background: var(--tsc-white); border-bottom: 1.5px solid var(--tsc-stroke);
		padding: 0 16px 8px;
		box-shadow: 0 16px 24px -20px rgba(21, 25, 29, .25);
	}
	.tsc-acc { border-bottom: 1.5px solid var(--tsc-stroke); }
	.tsc-acc:last-child { border-bottom: 0; }
	.tsc-header .tsc-acc__head {
		display: flex; align-items: center; gap: 4px; width: 100%;
		padding: 24px 24px; font-size: 18px; line-height: 28px; color: var(--tsc-dark); text-align: start;
	}
	.tsc-acc__head[aria-expanded="true"] .tsc-chev { transform: rotate(-90deg); }
	.tsc-acc__body:not([hidden]) { display: flex; flex-direction: column; padding-bottom: 8px; margin-top: -8px; }
	.tsc-mitem {
		display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px;
		text-align: center; border-top: 1.5px solid var(--tsc-stroke); color: var(--tsc-dark);
	}
	.tsc-acc__body > .tsc-mitem:first-child,
	.tsc-mitem__group + .tsc-mitem { border-top: 0; }
	.tsc-mitem__title { font-size: 18px; font-weight: 600; line-height: 21px; }
	.tsc-mitem__desc { font-size: 14px; line-height: 17px; }
	.tsc-mitem__group { padding: 16px 8px 0; font-size: 14px; line-height: 17px; color: var(--tsc-grey); text-align: center; }

	/* Figma NavBar "search": the bar takes the logo's place in the row (burger + separator stay) */
	.tsc-header.is-msearch .tsc-logo,
	.tsc-header.is-msearch .tsc-search-toggle { display: none; }
	.tsc-header.is-msearch .tsc-tools { flex: 1 1 auto; margin-inline-start: 0; }
	.tsc-msearch:not([hidden]) { display: block; flex: 1 1 auto; min-width: 0; order: -1; }
	.tsc-msearch__bar {
		display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
		background: var(--tsc-fill); border: 1px solid var(--tsc-stroke); border-radius: 4px;
	}
	.tsc-header .tsc-msearch__input {
		flex: 1 1 auto; min-width: 0; height: 100%; border: 0; border-radius: 0; padding: 0; margin: 0; min-height: 0;
		font-family: inherit; font-size: 14px; line-height: 17px; color: var(--tsc-black) !important; background: transparent; box-shadow: none; outline: 0;
	}
	.tsc-header .tsc-msearch__input::placeholder { color: var(--tsc-black); opacity: 1; }
	.tsc-header .tsc-msearch__input:focus::placeholder { color: var(--tsc-grey); }
	.tsc-header .tsc-msearch__input::-webkit-search-cancel-button { -webkit-appearance: none; }
	.tsc-header .tsc-msearch__btn { width: 20px; height: 20px; flex: 0 0 20px; display: flex; align-items: center; justify-content: center; }
	/* "search-active": category groups drop under the bar while the field has focus */
	.tsc-msearch__panel {
		display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 2;
		flex-direction: column; align-items: flex-start; gap: 32px; padding: 16px; direction: rtl; text-align: start; /* RTL column: flex-start = right */
		max-height: calc(100vh - 88px); overflow-y: auto; overscroll-behavior: contain;
		background: var(--tsc-white); border-bottom: 1px solid var(--tsc-stroke);
		box-shadow: 0 16px 24px -20px rgba(21, 25, 29, .25);
		animation: tscPanelIn var(--tsc-med) var(--tsc-ease) both;
	}
	.tsc-msearch.is-focus .tsc-msearch__panel { display: flex; }
	.tsc-msearch__group { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }
	.tsc-msearch__title { font-size: 18px; font-weight: 600; line-height: 21px; color: var(--tsc-dark); }
	.tsc-msearch__list { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; padding: 0; margin: 0; list-style: none; }
	.tsc-header .tsc-msearch__link { font-size: 16px; line-height: 25px; color: var(--tsc-dark); }

	.tsc-channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 24px 24px 0; }
	.tsc-header .tsc-channels { padding-bottom: 0; }
	.tsc-ch { gap: 8px; }
	.tsc-ch__btn { height: 40px; padding: 0 8px; gap: 4px; }
	.tsc-header .tsc-ch__icon { width: 20px; height: 20px; flex-basis: 20px; }
	.tsc-ch__label { font-size: 16px; line-height: 19px; }
	.tsc-ch__sub { display: block; }
}

@media (max-width: 360px) {
	.tsc-ch__label { font-size: 14px; }
	.tsc-header .tsc-ch__icon { display: none; }
}

/* ============================ TIMITON AI BLOCK ============================ */

.tsc-ai {
	--tsc-white: #fdfdfc; --tsc-black: #15191d; --tsc-dark: #343434; --tsc-grey: #6d707d;
	--tsc-stroke: #d3dce9; --tsc-fill: #f4f4f2; --tsc-btn-grey: #b8bbc8; --tsc-zigi: #036ab9;
	display: flex; flex-direction: column; align-items: center; gap: 32px;
	padding: 32px 16px 0; font-family: "Rubik", sans-serif; direction: rtl; color: var(--tsc-dark);
}
.tsc-ai * { box-sizing: border-box; }
.tsc-ai img { display: block; max-width: none; border: 0; box-shadow: none; }
.tsc-ai button,
.tsc-ai input,
.tsc-ai select {
	appearance: none; -webkit-appearance: none; margin: 0; font: inherit; color: inherit;
	letter-spacing: 0; text-transform: none; box-shadow: none; outline-offset: 2px;
	transition: none; /* theme reset: `transition: all .3s` on buttons/inputs */
}
.tsc-ai button { background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; line-height: normal; }
.tsc-ai [hidden] { display: none !important; }
.tsc-ai :focus-visible { outline: 2px solid #2870b7; }

/* tabs */
.tsc-ai .tsc-ai__tabs { display: flex; align-items: center; gap: 8px; padding: 8px 4px; background: var(--tsc-fill); border-radius: 6px; }
/* #6b6e7b (not --tsc-grey): the grey on the #f4f4f2 fill measured 4.47:1 — two units darker clears AA 4.5 */
.tsc-ai .tsc-ai__tab { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 4px; font-size: 16px; line-height: 19px; color: #6b6e7b; white-space: nowrap; }
.tsc-ai .tsc-ai__tab::before { content: ""; position: absolute; inset: -4px 0; } /* 36px tab → 44px tap height (the 8px tablist padding is the slack) */
/* the three tabs have different heights: tsc.js animates the block height between them */
.tsc-ai.is-resizing { transition: height var(--tsc-med) var(--tsc-ease); }
.tsc-ai .tsc-ai__tab:hover { color: var(--tsc-black); background: rgba(21, 25, 29, .05); }
.tsc-ai .tsc-ai__tab.is-active { background: var(--tsc-black); color: var(--tsc-white); }
.tsc-ai__ico { width: 20px; height: 20px; object-fit: contain; padding: 1px; }
.tsc-ai__ico--on,
.tsc-ai__tab.is-active .tsc-ai__ico--off { display: none !important; }
.tsc-ai__tab.is-active .tsc-ai__ico--on { display: block !important; }
.tsc-ai__panel { width: 100%; display: flex; justify-content: center; }

/* 1. AI bar */
.tsc-aibar {
	position: relative; display: flex; align-items: center; gap: 16px;
	width: 936px; max-width: 100%; padding: 16px 72px 16px 16px;
	background: var(--tsc-white); border: 1px solid var(--tsc-stroke); border-radius: 6px;
}
.tsc-aibar__monkey { position: absolute; top: -25px; right: -19px; width: 96px; height: 98px; object-fit: contain; pointer-events: none; }
.tsc-ai .tsc-aibar__input {
	flex: 1 1 auto; min-width: 0; height: 40px; padding: 0; border: 0; background: transparent; border-radius: 0;
	font-size: 16px; line-height: 19px; color: var(--tsc-dark) !important; text-align: right;
}
.tsc-ai .tsc-aibar__input::placeholder { color: var(--tsc-dark); opacity: 1; }
.tsc-ai .tsc-aibar__input:focus { outline: 0; }
.tsc-ai .tsc-aibar__input:focus::placeholder { color: var(--tsc-grey); }
.tsc-aibar { transition: border-color var(--tsc-fast) var(--tsc-ease); }
.tsc-aibar:focus-within { border-color: #9aa9bf; }
.tsc-ai .tsc-aibar__btn {
	flex: 0 0 auto; height: 40px; padding: 0 16px; border-radius: 4px; background: var(--tsc-btn-grey);
	font-size: 16px; font-weight: 600; color: var(--tsc-black); transition: background-color var(--tsc-fast) var(--tsc-ease);
}
.tsc-ai .tsc-aibar__btn:hover { background: #a3a7b6; }

/* 2. DOCZigi */
.tsc-doc { display: flex; align-items: center; justify-content: center; gap: 32px; min-height: 90px; }
.tsc-doc__fields { display: flex; align-items: center; gap: 16px; }
.tsc-field {
	position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label arrow" "input arrow";
	align-items: center; column-gap: 32px; row-gap: 8px; margin: 0; padding: 12px; cursor: text;
	background: var(--tsc-white); border: 1.5px solid var(--tsc-stroke); border-radius: 6px;
}
.tsc-field { transition: border-color var(--tsc-fast) var(--tsc-ease); }
.tsc-field:focus-within { border-color: #9aa9bf; }
.tsc-field--area,
.tsc-field--cov { width: 329px; }
.tsc-field--area { grid-template-columns: 1fr; grid-template-areas: "label" "input"; }
.tsc-field__label { grid-area: label; font-size: 14px; line-height: 17px; color: var(--tsc-grey); text-align: right; }
.tsc-ai .tsc-field__input {
	grid-area: input; width: 100%; height: 28px; padding: 0; border: 0; border-radius: 0; background: transparent;
	font-size: 18px; line-height: 28px; color: var(--tsc-dark) !important; text-align: right;
}
.tsc-ai .tsc-field--q .tsc-field__input { width: 238px; }
.tsc-ai .tsc-field__input::placeholder { color: var(--tsc-dark); opacity: 1; }
.tsc-ai .tsc-field--area .tsc-field__input::placeholder { color: var(--tsc-black); }
.tsc-ai .tsc-field__input:focus { outline: 0; }
.tsc-ai .tsc-field__select { cursor: pointer; position: relative; z-index: 1; }
.tsc-field__arrow { grid-area: arrow; width: 30px; height: 27px; object-fit: contain; transform: rotate(-90deg); pointer-events: none; }
.tsc-ai .tsc-doc__btn {
	height: 40px; padding: 0 16px; border-radius: 4px; background: var(--tsc-zigi);
	font-size: 16px; font-weight: 600; color: var(--tsc-white); transition: background-color var(--tsc-fast) var(--tsc-ease);
}
.tsc-ai .tsc-doc__btn:hover { background: #02579a; }
.tsc-field:hover { border-color: #b9c5d6; }

/* 3. tools carousel */
/* LTR like the Figma: "<" on the left, the track starts from its left edge. */
.tsc-tools-car { direction: ltr; position: relative; display: flex; align-items: center; justify-content: center; gap: 44px; width: 100%; max-width: 998px; }
.tsc-tools-car__track {
	display: flex; gap: 32px; width: 862px; max-width: 100%; overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain;
}
.tsc-tools-car__track::-webkit-scrollbar { display: none; }
.tsc-ai .tsc-tools-car__arrow { position: relative; flex: 0 0 24px; width: 24px; height: 24px; }
.tsc-ai .tsc-tools-car__arrow::before { content: ""; position: absolute; inset: -10px; } /* 44px hit area */
.tsc-tools-car__arrow img { width: 24px; height: 24px; }
.tsc-tools-car__arrow--next img { transform: rotate(180deg); }
.tsc-ai .tsc-tools-car__arrow[disabled] { opacity: .3; cursor: default; }
.tsc-tool {
	flex: 0 0 159.75px; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
	min-height: 207px; gap: 8px; scroll-snap-align: start; text-decoration: none; color: inherit;
}
.tsc-tool__media { display: flex; align-items: flex-start; justify-content: center; height: 125px; }
.tsc-tool__media img { width: auto; max-width: 159px; height: auto; max-height: 125px; transition: transform var(--tsc-fast) var(--tsc-ease); }
.tsc-tool:hover .tsc-tool__media img { transform: translateY(-3px); }
.tsc-tool__text { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 70px; text-align: center; }
.tsc-tool__title { font-size: 24px; font-weight: 500; line-height: 28px; color: var(--tsc-dark); white-space: nowrap; }
.tsc-tool__desc { width: 149px; font-size: 16px; line-height: 19px; color: var(--tsc-grey); }

@media (max-width: 1024px) {
	.tsc-ai { gap: 32px; padding: 24px 24px 0; }
	.tsc-ai .tsc-ai__tabs { width: 100%; justify-content: center; padding: 8px 4px; border: 1px solid var(--tsc-stroke); border-radius: 4px; gap: 0; }
	.tsc-ai__panel[id$="-p-ai"] { padding-top: 16px; }

	.tsc-aibar { width: 100%; padding: 8px; border-radius: 4px; }
	.tsc-aibar__monkey { top: -48px; right: 1px; width: 47px; height: 48px; }
	.tsc-ai .tsc-aibar__input { padding-right: 0; }

	.tsc-doc { flex-direction: column; align-items: stretch; gap: 32px; width: 100%; min-height: 0; }
	.tsc-doc__fields { flex-direction: column; align-items: stretch; gap: 16px; }
	.tsc-field,
	.tsc-field--area,
	.tsc-field--cov { width: 100%; grid-template-areas: "input arrow"; row-gap: 0; column-gap: 12px; min-height: 44px; }
	.tsc-field--area { grid-template-areas: "input"; }
	.tsc-field__label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.tsc-ai .tsc-field__input,
	.tsc-ai .tsc-field--q .tsc-field__input { width: 100%; height: 17px; font-size: 14px; line-height: 17px; }
	.tsc-field__arrow { width: 20px; height: 20px; }
	.tsc-ai .tsc-doc__btn { width: 100%; }

	.tsc-tools-car { gap: 0; max-width: 390px; margin: 0 -12px; }
	.tsc-tools-car__track { gap: 8px; width: auto; flex: 1 1 auto; padding: 0 4px; }
	.tsc-ai .tsc-tools-car__arrow { position: absolute; top: 91px; z-index: 2; }
	.tsc-tools-car__arrow--prev { left: 0; }
	.tsc-tools-car__arrow--next { right: 0; }
	.tsc-tool { min-height: 196px; }
	.tsc-tool__title { font-size: 18px; line-height: 21px; }
	.tsc-tool__desc { font-size: 14px; line-height: 17px; }
}

/* ===================== SECTIONS (news / catalogue) ====================== */

.tsc-sec {
	--tsc-white: #fdfdfc; --tsc-black: #15191d; --tsc-dark: #343434; --tsc-grey: #6d707d;
	--tsc-stroke: #d3dce9; --tsc-fill: #f4f4f2; --tsc-light-grey: #b8bbc8;
	display: flex; flex-direction: column; gap: 24px; align-items: stretch;
	/* Figma page is 1440 wide with a 1344 content column — keep that column centred
	   on wider screens so every section starts and ends on the same vertical lines. */
	max-width: 1440px; margin-inline: auto;
	padding: 32px 48px; font-family: "Rubik", sans-serif; direction: rtl; color: var(--tsc-dark);
}
.tsc-sec * { box-sizing: border-box; }
.tsc-sec img { display: block; max-width: none; border: 0; box-shadow: none; }
.tsc-sec p { margin: 0; }
.tsc-sec a { text-decoration: none; color: inherit; }
.tsc-sec button,
.tsc-sec input,
.tsc-sec select {
	appearance: none; -webkit-appearance: none; margin: 0; font: inherit; color: inherit;
	letter-spacing: 0; text-transform: none; box-shadow: none; transition: none;
}
.tsc-sec button { background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; line-height: normal; }
.tsc-sec :focus-visible { outline: 2px solid #2870b7; outline-offset: 2px; }
.tsc-sec .tsc-sec__title { margin: 0; font-size: 24px; font-weight: 500; line-height: 28px; color: #000; text-align: right; }
.tsc-sec__title--m { display: none; }
.tsc-sec__body { display: flex; align-items: flex-start; gap: 32px; }
.tsc-sec--cat .tsc-sec__body { align-items: center; gap: 16px; }

/* ---- carousel (shared) ---- */
/* grid so the arrows stay on the slide row and the dots get their own row below */
.tsc-car { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 8px; min-width: 0; }
.tsc-car__arrow--prev { grid-column: 1; }
.tsc-car__track { grid-column: 2; }
.tsc-car__arrow--next { grid-column: 3; }
.tsc-car--wide { flex: 1 1 822px; max-width: 822px; }
/* sizes to its items (4 × 190 + gaps + arrows = 902 in the design); the card takes the rest */
.tsc-car--cat { flex: 0 1 auto; }
.tsc-car__track {
	display: flex; gap: 24px; min-width: 0; width: 100%;
	overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; overscroll-behavior-x: contain;
}
.tsc-car__track::-webkit-scrollbar { display: none; }
.tsc-sec .tsc-car__arrow { position: relative; flex: 0 0 27px; width: 27px; height: 30px; }
.tsc-sec .tsc-car__arrow::before { content: ""; position: absolute; inset: -8px; } /* 43×46 hit area (8px gap to the track) */
.tsc-car__arrow img { width: 27px; height: 30px; }
.tsc-car__arrow--prev img { transform: rotate(180deg); }
.tsc-sec .tsc-car__arrow[disabled] { opacity: .25; cursor: default; }
.tsc-car[data-dots] { padding-bottom: 24px; }
.tsc-car[data-dots] .tsc-car__dots { margin-top: 0; margin-bottom: -24px; }
.tsc-car__dots { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 16px; }
.tsc-sec .tsc-car__dot { position: relative; width: 8px; height: 8px; border-radius: 16px; background: var(--tsc-light-grey); transition: width var(--tsc-fast) var(--tsc-ease), background-color var(--tsc-fast) var(--tsc-ease); }
.tsc-sec .tsc-car__dot::before { content: ""; position: absolute; inset: -10px -3px; } /* taller hit area between 8px dots */
.tsc-sec .tsc-car__dot.is-active { width: 24px; background: var(--tsc-grey); }
.tsc-car__empty { padding: 24px; font-size: 18px; color: var(--tsc-grey); }

/* ---- wide article slide ---- */
.tsc-car--wide .tsc-car__track { gap: 16px; }
.tsc-car--wide .tsc-car__dots { position: absolute; width: auto; margin: 0; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 2; }
.tsc-wide {
	position: relative; flex: 0 0 100%; scroll-snap-align: center;
	aspect-ratio: 752 / 403; border-radius: 6px; overflow: hidden; background: var(--tsc-fill);
}
.tsc-wide__img { width: 100%; height: 100%; object-fit: cover; }
.tsc-wide::after {
	content: ""; position: absolute; inset: 0; border-radius: 6px; pointer-events: none;
	/* Figma's diagonal wash + a bottom scrim so the headline stays readable on light photos */
	background:
		linear-gradient(to top, rgba(21, 25, 29, .6) 0%, rgba(21, 25, 29, 0) 45%),
		linear-gradient(117deg, rgba(0, 0, 0, 0) 50%, rgba(52, 52, 52, .5) 100%);
}
.tsc-wide__label {
	position: absolute; top: 16px; inset-inline-start: 16px; z-index: 2;
	display: flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 4px;
	background: var(--tsc-white); font-size: 18px; line-height: 21px; color: var(--tsc-black);
}
.tsc-wide__title {
	position: absolute; bottom: 24px; inset-inline-start: 24px; inset-inline-end: 24px; z-index: 2;
	font-size: 24px; font-weight: 600; line-height: 30px; color: #f8f9f9; text-align: right;
	display: block; overflow: hidden; max-height: 60px;
}

/* ---- catalogue items ---- */
.tsc-car--cat .tsc-car__track { gap: var(--tsc-igap, 24px); }
.tsc-cat-item {
	flex: 0 0 var(--tsc-iw, 190px); height: var(--tsc-ih, 190px); scroll-snap-align: center;
	border-radius: var(--tsc-irad, 4px); overflow: hidden; background: var(--tsc-fill);
}
.tsc-cat-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tsc-med) var(--tsc-ease); }
.tsc-cat-item:hover img { transform: scale(1.03); }

/* ---- ad strip ---- */
.tsc-sec.tsc-sec--ad { padding-block: 40px; }
.tsc-ad { width: 100%; }
.tsc-ad--empty {
	position: relative; display: flex; align-items: center; justify-content: center;
	height: var(--tsc-adh, 208px); background: #d9d9d9;
	font-size: 18px; font-weight: 500; color: #000;
}
.tsc-ad__dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; direction: ltr; gap: 8px; align-items: center; }
.tsc-ad__dots i,
.tsc-ad__dots b { display: block; width: 8px; height: 8px; border-radius: 16px; background: var(--tsc-light-grey, #b8bbc8); }
.tsc-ad__dots b { width: 24px; background: var(--tsc-grey, #6d707d); }
.tsc-car--ad .tsc-car__track { gap: 16px; }
.tsc-ad__slide { flex: 0 0 100%; scroll-snap-align: center; height: var(--tsc-adh, 208px); display: block; }
.tsc-ad__slide img { width: 100%; height: 100%; object-fit: cover; }
.tsc-ad--live :is(img, video) { max-width: 100%; height: auto; margin-inline: auto; }

@media (max-width: 1024px) {
	.tsc-sec.tsc-sec--ad { padding: 24px 0; }
	.tsc-ad--empty,
	.tsc-ad__slide { height: var(--tsc-adh-m, 128px); }
	.tsc-ad__dots { bottom: 8px; }
}

/* ---- service card (self-contained: also used by timiton-posts-grid) ---- */
.tsc-svc {
	--tsc-white: #fdfdfc; --tsc-black: #15191d; --tsc-dark: #343434; --tsc-grey: #6d707d;
	--tsc-stroke: #d3dce9; --tsc-fill: #f4f4f2;
	position: relative; flex: 0 0 auto;
	font-family: "Rubik", sans-serif; direction: rtl; color: var(--tsc-dark);
}
.tsc-svc * { box-sizing: border-box; }
.tsc-svc p { margin: 0; }
.tsc-svc a { text-decoration: none; color: inherit; }
.tsc-svc img { display: block; max-width: none; border: 0; box-shadow: none; }
.tsc-svc button,
.tsc-svc input,
.tsc-svc select {
	appearance: none; -webkit-appearance: none; margin: 0; font: inherit; color: inherit;
	letter-spacing: 0; text-transform: none; box-shadow: none; transition: none;
}
.tsc-svc button { background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; line-height: normal; }
.tsc-svc__sub { font-size: 16px; line-height: 25px; color: var(--tsc-black); text-align: center; }
.tsc-sec--news .tsc-svc { flex: 0 1 490px; width: 490px; min-width: 360px; }
.tsc-sec--cat .tsc-svc { flex: 1 1 0; min-width: 320px; }
.tsc-svc__card {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px;
	padding: 24px; background: var(--tsc-white); border: 1.5px solid var(--tsc-stroke); border-radius: 6px;
}
.tsc-svc__logo { min-height: 19px; position: absolute; top: 22px; right: 24px; z-index: 3; display: flex; direction: ltr; gap: 1px; font-size: 16px; line-height: 19px; }
.tsc-svc__logo span:first-child { font-weight: 600; }
/* brand word-marks (SMOONUP, GOMALL…) are semibold in both colours; DOCZigi keeps DOC bold + Zigi regular */
.tsc-svc__logo--bold span { font-weight: 600; }
.tsc-svc__mascot { position: absolute; top: -67px; left: 8px; width: 130px; height: 140px; object-fit: contain; pointer-events: none; z-index: 2; }
.tsc-svc__head { display: flex; align-items: center; justify-content: center; gap: 8px; }
.tsc-svc__title { font-size: 24px; font-weight: 600; line-height: 28px; color: var(--tsc-black); }
.tsc-svc__icon { width: 32px; height: 32px; object-fit: contain; }
.tsc-svc__fields { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.tsc-svc__field {
	position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
	min-height: 48px; padding: 8px 16px; border: 1.5px solid var(--tsc-stroke); border-radius: 6px;
}
.tsc-svc__field { transition: border-color var(--tsc-fast) var(--tsc-ease); }
.tsc-svc__field:hover { border-color: #b9c5d6; }
.tsc-svc__field:focus-within { border-color: #9aa9bf; }
.tsc-svc .tsc-svc__input {
	flex: 1 1 auto; min-width: 0; height: 28px; padding: 0; border: 0; border-radius: 0; background: transparent;
	font-size: 18px; line-height: 28px; color: var(--tsc-dark) !important; text-align: right;
}
.tsc-svc .tsc-svc__input::placeholder { color: var(--tsc-dark); opacity: 1; }
.tsc-svc .tsc-svc__input:focus { outline: 0; }
.tsc-svc .tsc-svc__select { cursor: pointer; }
.tsc-svc__arrow { flex: 0 0 27px; width: 27px; height: 30px; transform: rotate(-90deg); pointer-events: none; }
.tsc-svc__toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 48px; }
.tsc-svc__toggle-label { font-size: 18px; line-height: 21px; color: var(--tsc-dark); }
.tsc-svc .tsc-switch {
	position: relative; flex: 0 0 68px; width: 68px; height: 36px; border-radius: 18px;
	border: 1.5px solid var(--tsc-black); background: var(--tsc-white); transition: background-color var(--tsc-med) var(--tsc-ease);
}
.tsc-switch__knob {
	position: absolute; top: 3px; inset-inline-start: 3px; width: 26px; height: 26px; border-radius: 50%;
	background: var(--tsc-white); border: 1.5px solid var(--tsc-black); transition: transform var(--tsc-med) var(--tsc-ease), background-color var(--tsc-med) var(--tsc-ease), border-color var(--tsc-med) var(--tsc-ease);
}
.tsc-svc .tsc-switch[aria-checked="true"] { background: #43ab55; border-color: #43ab55; }
.tsc-switch[aria-checked="true"] .tsc-switch__knob { transform: translateX(-32px); background: var(--tsc-white); border-color: var(--tsc-white); }
.tsc-svc .tsc-svc__btn {
	display: flex; align-items: center; justify-content: center; width: 100%; height: 64px; padding: 8px 16px;
	border-radius: 6px; font-size: 24px; font-weight: 500; line-height: 28px; transition: filter var(--tsc-fast) var(--tsc-ease);
}
.tsc-sec--cat .tsc-svc__btn { height: 48px; font-size: 22px; font-weight: 600; }
.tsc-sec--cat .tsc-svc__mascot { width: 74px; height: 80px; top: -9px; left: 15px; }
/* "כרטיס מלא" (card_variant=std) inside a catalogue section = the article-grid card (Figma 604:7708 beside
   "המגזינים שלנו"): mascot 130×140 peeking 67px above, 18/500 title + sub, 48px/18px button. */
.tsc-sec--cat .tsc-svc--std { align-self: flex-start; }
.tsc-sec--cat .tsc-svc--std .tsc-svc__card { padding: 88px 16px 16px; }
.tsc-sec--cat .tsc-svc--std .tsc-svc__mascot { width: 130px; height: 140px; top: -67px; left: 8px; }
.tsc-sec--cat .tsc-svc--std .tsc-svc__head { margin-bottom: -12px; }
.tsc-sec--cat .tsc-svc--std .tsc-svc__title { font-size: 18px; font-weight: 500; line-height: 21px; }
.tsc-sec--cat .tsc-svc--std .tsc-svc__btn { height: 48px; font-size: 18px; font-weight: 500; }
.tsc-sec--news .tsc-svc__field { min-height: 62px; }
.tsc-sec--news .tsc-svc__icon { width: 24px; height: 24px; }
.tsc-svc .tsc-svc__btn:hover { filter: brightness(1.06); }
.tsc-svc__mobile { display: none; }

/* ---- service-card carousel (posts-grid 2026, Figma 258:1472 + dots I258:1472;584:10639):
   one card visible, scroll-snap track, dots under it (8×8 #b8bbc8 r16 gap 8, active 24×8
   #6d707d; first/active dot is the rightmost in RTL). The mascot pokes 67px above the card,
   so the scroll box keeps that strip as padding (an overflow container would clip it). ---- */
/* Heights are driven by flex all the way down (column → carousel → track → item → card), never
   by percentages: a % height against the negative-margin track resolved ~70px short and put the
   dots over the card's button. */
.tsc-svcar { --tsc-svcar-over: 70px; position: relative; direction: rtl; display: flex; flex-direction: column; }
.tsc-svcar__track {
	display: flex; flex: 1 1 auto; min-height: 0; overflow-x: auto; overflow-y: hidden;
	padding-top: var(--tsc-svcar-over); margin-top: calc(-1 * var(--tsc-svcar-over));
	scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
	cursor: grab;
}
.tsc-svcar__track::-webkit-scrollbar { display: none; }
.tsc-svcar__item { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; }
.tsc-svcar__item > .tsc-svc { width: 100%; flex: 1 1 auto; display: flex; flex-direction: column; }
.tsc-svcar__item .tsc-svc__card { flex: 1 1 auto; }
.tsc-svcar.is-dragging .tsc-svcar__track { scroll-snap-type: none; cursor: grabbing; user-select: none; -webkit-user-select: none; scroll-behavior: auto; }
.tsc-svcar.is-dragging .tsc-svc__card { pointer-events: none; }
.tsc-svcar__dots { display: flex; align-items: center; justify-content: center; gap: 8px; height: 8px; direction: rtl; }
.tsc-svcar .tsc-svcar__dot {
	position: relative; display: block; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 16px; background: #b8bbc8; cursor: pointer;
	transition: width var(--tsc-fast, 150ms) var(--tsc-ease, ease), background-color var(--tsc-fast, 150ms) var(--tsc-ease, ease);
}
.tsc-svcar .tsc-svcar__dot::before { content: ""; position: absolute; inset: -10px -3px; } /* hit area */
.tsc-svcar .tsc-svcar__dot.is-active { width: 24px; background: #6d707d; }
.tsc-svcar .tsc-svcar__dot:focus-visible { outline: 2px solid #6d707d; outline-offset: 2px; }
.tsc-svcar--single .tsc-svcar__dots { display: none; }

@media (max-width: 1280px) and (min-width: 1025px) {
	.tsc-sec { padding-inline: 32px; }
	.tsc-sec--news .tsc-svc { flex: 0 1 400px; width: 400px; min-width: 320px; }
	.tsc-car--wide { flex: 1 1 auto; max-width: none; }
	.tsc-svc__mascot { width: 104px; height: 112px; top: -30px; }
}

@media (max-width: 1024px) {
	.tsc-sec { gap: 24px; padding: 24px; }
	.tsc-sec .tsc-sec__title { font-size: 18px; font-weight: 600; line-height: 21px; }
	.tsc-sec__title--d { display: none; }
	.tsc-sec__title--m { display: inline; }
	.tsc-sec__body,
	.tsc-sec--cat .tsc-sec__body { flex-direction: column; align-items: stretch; gap: 24px; }

	/* arrows sit over the slide edges (Figma mobile), so the slide keeps the full width */
	.tsc-car { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
	.tsc-car--wide,
	.tsc-car--cat { flex: 1 1 auto; max-width: none; }
	.tsc-car__track,
	.tsc-car__arrow--prev,
	.tsc-car__arrow--next { grid-column: 1; grid-row: 1; }
	/* RTL: "start" is the right edge — prev belongs there, next on the left. */
	.tsc-sec .tsc-car__arrow { z-index: 2; justify-self: end; flex-basis: 24px; width: 24px; height: 24px; }
	.tsc-sec .tsc-car__arrow--prev { justify-self: start; }
	.tsc-car__arrow img { width: 24px; height: 24px; }
	/* news: arrows in 24px gutters beside the slide (326px at 390) instead of over it */
	.tsc-sec--news .tsc-car { margin-inline: -24px; grid-template-columns: 24px minmax(0, 1fr) 24px; column-gap: 8px; }
	.tsc-sec--news .tsc-car__arrow--prev { grid-column: 1; }
	.tsc-sec--news .tsc-car__track { grid-column: 2; }
	.tsc-sec--news .tsc-car__arrow--next { grid-column: 3; }
	.tsc-sec--news .tsc-car__arrow { justify-self: center; }
	.tsc-car--wide .tsc-car__track { gap: 8px; }
	.tsc-car--wide .tsc-car__dots { position: static; transform: none; width: auto; margin-top: 8px; }
	.tsc-wide { border-radius: 4px; aspect-ratio: 326 / 200; }
	.tsc-wide__title { bottom: 16px; inset-inline: 16px; font-size: 18px; line-height: 22px; max-height: 44px; }
	.tsc-wide__label { top: 8px; inset-inline-start: 8px; height: 24px; padding: 0 8px; font-size: 14px; }

	/* mobile coverflow: the centred card is bigger than its neighbours */
	.tsc-car--cat .tsc-car__track {
		gap: 16px; padding-inline: calc(50% - var(--tsc-iw-m, 166px) / 2);
		align-items: center; scroll-snap-type: x mandatory;
	}
	.tsc-cat-item {
		flex-basis: calc(var(--tsc-iw-m, 166px) * .63); height: auto; aspect-ratio: var(--tsc-ar, 1);
		transition: flex-basis var(--tsc-med) var(--tsc-ease);
	}
	/* arrows overlay the slide edges here: a wider hit area is free */
	.tsc-sec .tsc-car__arrow::before { inset: -10px; }
	.tsc-cat-item.is-center { flex-basis: var(--tsc-iw-m, 166px); }
	/* the centred tile is taller than its neighbours, so during the is-center hand-off the
	   track briefly shrank ~28px and shifted everything below (client report). Reserve the
	   centred tile's height so the row never collapses mid-transition. */
	.tsc-car--cat .tsc-car__track { min-height: var(--tsc-ih-m, 166px); }
	.tsc-car--cat { min-height: var(--tsc-ih-m, 166px); }

	.tsc-svc { padding-top: 30px; width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; }
	.tsc-svc__card { display: none; }
	.tsc-svc__logo { top: 0; right: 0; }
	.tsc-svc__mobile {
		position: relative; display: flex; align-items: center; justify-content: center; gap: 8px;
		width: 100%; min-height: 75px; padding: 24px; background: var(--tsc-white);
		border: 1.5px solid var(--tsc-stroke); border-radius: 6px;
	}
	.tsc-svc__mobile .tsc-svc__title { font-size: 18px; line-height: 21px; }
	.tsc-svc__mobile .tsc-svc__icon { width: 24px; height: 24px; }
	.tsc-svc__mobile .tsc-svc__mascot { top: -30px; left: 8px; width: 74px; height: 80px; }

	/* carousel on mobile: the collapsed rows (Figma 377:6333, 342×99) swipe in their own
	   row, 4px dots underneath like the article scroller (377:3525) */
	.tsc-svcar { --tsc-svcar-over: 0px; }
	.tsc-svcar__track { flex: 0 0 auto; gap: 16px; cursor: default; }
	.tsc-svcar__dots { gap: 4px; height: 4px; margin-top: 8px; }
	.tsc-svcar .tsc-svcar__dot { width: 4px; height: 4px; }
	.tsc-svcar .tsc-svcar__dot.is-active { width: 16px; }
}

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

.tsc-footer { display: flex; flex-direction: column; align-items: center; gap: 32px; padding-bottom: 64px; background: var(--tsc-white); }

.tsc-fstrip { display: flex; gap: 4px; width: 100%; }
.tsc-fstrip span { flex: 1 1 0; }
.tsc-fstrip--all { max-width: calc(100% - 128px); height: 16px; }
.tsc-fstrip--all span { border-radius: 2px; }
.tsc-fstrip--m { display: none; }

.tsc-stats { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; padding: 0 64px; color: var(--tsc-black); }
.tsc-stats__num { font-size: 128px; font-weight: 500; line-height: 152px; margin-bottom: -40px !important; }
.tsc-stats__text { font-size: 24px; line-height: 28px; text-align: center; max-width: 444px; }
.tsc-cta {
	display: flex; align-items: center; justify-content: center; width: 100%; height: 64px; padding: 0 32px;
	background: var(--tsc-black); border-radius: 8px;
	font-size: 22px; font-weight: 600; line-height: 26px; color: var(--tsc-white) !important;
	transition: background-color var(--tsc-fast) var(--tsc-ease), transform var(--tsc-fast) var(--tsc-ease);
}
.tsc-cta:hover { background: #2b3036; }

.tsc-fband { width: 100%; background: #f8f9f9; } /* Figma fill-light-grey (258:1536), not the #f4f4f2 header fill */
.tsc-fband__inner { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 64px; }
.tsc-fhead { font-size: 14px; line-height: 17px; color: #6b6e7b; white-space: nowrap; } /* 4.5:1 on the fill (see .tsc-ai__tab) */

.tsc-legal { display: flex; align-items: flex-start; gap: 141px; }
.tsc-legal__col { display: flex; flex-direction: column; gap: 24px; }
.tsc-legal__col + .tsc-legal__col { min-width: 234px; } /* Figma 258:1614: the business column is a fixed 234px */
.tsc-legal__col ul { display: flex; flex-direction: column; gap: 8px; }
.tsc-legal__link { font-size: 16px; line-height: 19px; color: var(--tsc-black); white-space: nowrap; }
.tsc-footer .tsc-legal__link { color: var(--tsc-black); line-height: 25px; transition: color var(--tsc-fast) var(--tsc-ease); }
.tsc-footer .tsc-legal__link:hover { color: var(--tsc-grey); text-decoration: underline; text-underline-offset: 3px; }

.tsc-follow { display: flex; flex-direction: column; gap: 24px; padding: 8px; }
.tsc-follow__grid { display: grid; grid-template-columns: repeat(2, fit-content(100%)); gap: 16px; }
.tsc-sgroup { display: flex; flex-direction: column; gap: 8px; min-width: 191.5px; }
.tsc-sgroup__title { font-size: 16px; line-height: 25px; color: var(--tsc-black); } /* Figma 16pt-regular = 16/25 (258:1546, 612:19838) */
.tsc-sgroup__icons { display: flex; gap: 16px; align-items: center; }
.tsc-soc {
	position: relative; display: flex; align-items: center; justify-content: center;
	width: 40px; height: 39px; border: 1px solid var(--tsc-black); border-radius: 4px; transition: background-color var(--tsc-fast) var(--tsc-ease), transform var(--tsc-fast) var(--tsc-ease);
}
.tsc-soc:hover { background: #e8e8e5; }
.tsc-soc::before { content: ""; position: absolute; inset: -6px; } /* 44px tap target around the 32–40px box */
.tsc-soc img { width: 24px; height: 24px; object-fit: contain; }
.tsc-soc--facebook,
.tsc-soc--youtube { padding: 0; }
.tsc-soc--facebook img,
.tsc-soc--youtube img { position: absolute; inset: -1px; width: 40px; height: 39px; }
.tsc-soc--facebook { overflow: hidden; }

.tsc-talk { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 8px; }
.tsc-talk__row { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.tsc-talk__text { font-size: 12px; line-height: 14px; color: var(--tsc-black); max-width: 165px; }
/* v1.10.1 "orange line" block (Figma 545:2408 desktop / 545:2521 mobile): the monkey-with-phone
   image sits on top of a 40px orange button, a 12px caption underneath. The whole 120px block is the link. */
.tsc-orange { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 118px; }
.tsc-footer .tsc-orange__btn { position: relative; display: block; width: 100%; height: 120px; color: var(--tsc-white) !important; }
.tsc-orange__bg { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; border-radius: 4px; background: #fe7907; transition: filter var(--tsc-fast) var(--tsc-ease); }
.tsc-footer .tsc-orange__img { position: absolute; top: 0; left: 0; width: 87.4px; height: 88px; object-fit: contain; transition: transform var(--tsc-fast) var(--tsc-ease); }
.tsc-orange__label { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; font-size: 16px; font-weight: 600; line-height: 19px; white-space: nowrap; }
.tsc-orange__btn:hover .tsc-orange__bg { filter: brightness(.92); }
.tsc-orange__btn:hover .tsc-orange__img { transform: translateY(-2px); }
.tsc-orange__btn:active .tsc-orange__bg { filter: brightness(.86); }
.tsc-orange__text { width: 100%; max-width: none; }
.tsc-fai {
	display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
	border: 1px solid var(--tsc-black); border-radius: 4px;
	font-size: 16px; font-weight: 600; line-height: 19px; color: var(--tsc-black); white-space: nowrap;
	transition: background-color var(--tsc-fast) var(--tsc-ease), transform var(--tsc-fast) var(--tsc-ease);
}
.tsc-fai:hover { background: #e8e8e5; }
.tsc-fai img { width: 21.8px; height: 21.8px; padding: 1.5px; }

.tsc-rights { font-size: 14px; line-height: 17px; color: var(--tsc-black); text-align: center; }

@media (max-width: 1280px) and (min-width: 1025px) {
	.tsc-fband__inner { padding: 48px 32px; gap: 24px; }
	.tsc-legal { gap: 48px; }
}

@media (max-width: 1024px) {
	.tsc-footer { gap: 16px; padding-bottom: 24px; }
	.tsc-fstrip--all { display: none; }
	.tsc-fstrip--m { display: flex; height: 8px; }
	.tsc-fstrip--m span { border-radius: 1px; }

	.tsc-stats { gap: 24px; padding: 0 24px; }
	.tsc-stats__num { font-size: 64px; font-weight: 700; line-height: 76px; margin-bottom: -24px !important; }
	.tsc-stats__text { font-size: 18px; line-height: 28px; max-width: 250px; }
	.tsc-cta { height: 40px; padding: 0 16px; border-radius: 4px; font-size: 16px; line-height: 19px; }

	.tsc-fband { margin-top: 8px; }
	/* Figma 373:2633: legal on top, then follow, then talk; 40px between blocks */
	.tsc-fband__inner { flex-direction: column; align-items: stretch; gap: 40px; padding: 24px; }

	.tsc-talk { gap: 8px; padding: 8px; align-items: stretch; }
	.tsc-talk__row { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 16px; }
	.tsc-talk__text { font-size: 12px; line-height: 14px; }
	.tsc-orange { width: 133px; }
	.tsc-footer .tsc-orange__img { top: -5px; width: 98.6px; height: 99px; }

	.tsc-follow { gap: 24px; padding: 8px 0; }
	.tsc-follow__grid { grid-template-columns: fit-content(100%) minmax(0, 1fr); column-gap: 56px; row-gap: 16px; }
	.tsc-sgroup { min-width: 0; }
	.tsc-sgroup__icons { gap: 8px; }
	.tsc-soc { width: 32.82px; height: 32px; border-width: .82px; border-radius: 3.28px; }
	.tsc-soc img { width: 19.7px; height: 19.7px; }
	.tsc-soc--facebook img,
	.tsc-soc--youtube img { inset: -.82px; width: 32.82px; height: 32px; }

	.tsc-legal { justify-content: space-between; gap: 16px; }
	.tsc-legal__col + .tsc-legal__col { min-width: 0; }
	.tsc-footer .tsc-legal__link { font-size: 14px; line-height: 21.6px; }

	.tsc-rights { margin-top: 8px !important; }
}

/* ---- motion: open/close, press states, idle ---- */
.tsc-panel:not([hidden]) { animation: tscPanelIn var(--tsc-med) var(--tsc-ease) both; }
.tsc-drawer:not([hidden]) { animation: tscDrawerIn var(--tsc-med) var(--tsc-ease) both; }
.tsc-acc__body:not([hidden]) { animation: tscPanelIn var(--tsc-fast) var(--tsc-ease) both; }
.tsc-header .tsc-closing { animation: tscPanelOut var(--tsc-fast) var(--tsc-ease) both; }
.tsc-bar { transition: box-shadow var(--tsc-fast) var(--tsc-ease); }
.tsc-bar.tsc-bar--stuck { box-shadow: 0 4px 12px -8px rgba(21, 25, 29, .25); }
.tsc-search { transition: background-color var(--tsc-fast) var(--tsc-ease), border-color var(--tsc-fast) var(--tsc-ease); }
.tsc-ch__btn:active { transform: translateY(0) scale(.98); transition-duration: 100ms; }

.tsc-ai .tsc-ai__tab { transition: background-color var(--tsc-fast) var(--tsc-ease), color var(--tsc-fast) var(--tsc-ease); }
.tsc-ai__panel:not([hidden]) { animation: tscPanelIn var(--tsc-fast) var(--tsc-ease) both; }
.tsc-ai .tsc-tools-car__arrow { transition: transform 100ms var(--tsc-ease), opacity var(--tsc-fast) var(--tsc-ease); }
.tsc-ai .tsc-tools-car__arrow:active:not([disabled]) { transform: scale(.88); }
.tsc-ai .tsc-aibar__btn:active,
.tsc-ai .tsc-doc__btn:active { transform: translateY(1px); }

.tsc-sec .tsc-car__arrow { transition: transform 100ms var(--tsc-ease), opacity var(--tsc-fast) var(--tsc-ease); }
.tsc-sec .tsc-car__arrow:active:not([disabled]) { transform: scale(.88); }
.tsc-wide { overflow: hidden; }
.tsc-wide__img { transition: transform var(--tsc-med) var(--tsc-ease); }
.tsc-wide:hover .tsc-wide__img { transform: scale(1.03); }

.tsc-svc .tsc-svc__btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: no-preference) {
	.tsc-svc__mascot { animation: tscMascotIdle 6s ease-in-out infinite; }
}

.tsc-cta:active, .tsc-soc:active, .tsc-fai:active { transform: scale(.97); }

/* scroll-in reveal: tsc.js adds the class only when IntersectionObserver exists and motion is allowed */
.tsc-reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--tsc-med) var(--tsc-ease), transform var(--tsc-med) var(--tsc-ease); }
.tsc-reveal.is-in { opacity: 1; transform: none; }

/* tablet: don't stretch the phone layout to 850px slides */
@media (max-width: 1024px) and (min-width: 700px) {
	.tsc-car--wide { max-width: 620px; margin-inline: auto; }
	.tsc-sec--news .tsc-car { margin-inline: 0; }
}
/* strip wraps to two rows below 1440 at 18px */
@media (max-width: 1439px) and (min-width: 1025px) {
	.tsc-header .tsc-strip__link { font-size: 16px; }
}