/* Teamenu site styles: header, hero (.tmh), home sections (.tmp, .tmm), product (.tpp), solutions (.tps). */

/* ---------- site header (main navigation) ---------- */
:root { color-scheme: dark; }
html, body { margin: 0; background: #212125; }
body { font-family: Roboto, system-ui, sans-serif; color: #fff; }
.tm-nav { position: fixed; inset: 0 0 auto 0; height: 72px; z-index: 50; display: flex; align-items: center; gap: 28px; padding: 0 clamp(16px,4vw,56px);
  background: rgba(33,33,37,.55); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); font-family: Roboto, system-ui, sans-serif; }
.tm-nav__logo { display: flex; align-items: center; text-decoration: none; }
.tm-nav__logo img { height: 22px; width: auto; display: block; }
.tm-nav nav { display: flex; gap: 26px; margin-left: auto; }
.tm-nav nav a { color: #fff; text-decoration: none; font-size: 16px; font-weight: 300; }
.tm-nav nav a[aria-current] { font-weight: 500; color: #B496FF; }
.tm-nav__audit { background: #D81F46; color: #fff; padding: 8px 18px; border-radius: 6px; border: 2px solid #fff; text-decoration: none; font-weight: 500; font-size: 15px; white-space: nowrap; }
.tm-nav__audit:hover { background: #C01639; } .tm-nav__audit .s { display: none; }
.tm-nav__cta { white-space: nowrap; background: #6E46F0; color: #fff; padding: 8px 22px; border-radius: 6px; border: 2px solid #fff; text-decoration: none; font-weight: 500; font-size: 15px; }
.tmp-foot__logo img { height: 24px; width: auto; display: block; }
@media (max-width: 1100px) { .tm-nav { gap: 18px; } .tm-nav nav { gap: 18px; } .tm-nav nav a { font-size: 15px; } }
.tm-nav__burger, .tm-nav__m { display: none; }
@media (max-width: 899px) {
  .tm-nav__audit { margin-left: auto; }
  .tm-nav__burger { position: relative; display: block; flex: none; width: 42px; height: 40px; margin-right: -6px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
  .tm-nav__burger span { position: absolute; left: 10px; right: 10px; height: 2px; border-radius: 2px; background: #fff; transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s, top .3s; }
  .tm-nav__burger span:nth-child(1) { top: 13px; } .tm-nav__burger span:nth-child(2) { top: 19px; } .tm-nav__burger span:nth-child(3) { top: 25px; }
  .tm-nav__burger:focus-visible { outline: 2px solid #B496FF; outline-offset: 2px; }
  .tm-nav.is-open .tm-nav__burger span:nth-child(1) { top: 19px; transform: rotate(45deg); }
  .tm-nav.is-open .tm-nav__burger span:nth-child(2) { opacity: 0; }
  .tm-nav.is-open .tm-nav__burger span:nth-child(3) { top: 19px; transform: rotate(-45deg); }
  /* the panel: positioned against the header, fills the rest of the screen */
  .tm-nav nav { position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 100%); height: calc(100dvh - 100%); margin: 0; padding: 12px clamp(16px,4vw,56px) 32px;
    display: flex; flex-direction: column; gap: 0; overflow-y: auto; overscroll-behavior: contain; background: #1A1A1F; border-top: 1px solid rgba(255,255,255,.08);
    visibility: hidden; opacity: 0; transform: translateY(-10px); transition: opacity .25s, transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s .3s; }
  .tm-nav.is-open nav { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s; }
  .tm-nav nav > a { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 24px; font-weight: 300; }
  .tm-nav nav > a::after { content: '→'; font-size: 20px; color: #80808C; transition: transform .2s, color .2s; }
  .tm-nav nav > a:hover::after, .tm-nav nav > a[aria-current]::after { color: #B496FF; transform: translateX(3px); }
  .tm-nav.is-open nav > a { animation: tm-nav-in .35s cubic-bezier(.2,.7,.2,1) both; }
  .tm-nav.is-open nav > a:nth-child(2) { animation-delay: .04s; } .tm-nav.is-open nav > a:nth-child(3) { animation-delay: .08s; } .tm-nav.is-open nav > a:nth-child(4) { animation-delay: .12s; }
  .tm-nav__m { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 480px; margin-top: 28px; }
  .tm-nav .tm-nav__m a { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 6px; border: 2px solid #fff; color: #fff; text-decoration: none; font-size: 17px; font-weight: 500; }
  .tm-nav__m-cta { background: #6E46F0; } .tm-nav__m-audit { background: #D81F46; }
  .tm-nav .tm-nav__m .tm-nav__m-link { min-height: 44px; border: 0; font-weight: 400; color: #D4D4DE; }
  html.tm-nav-lock, html.tm-nav-lock body { overflow: hidden; }
}
@keyframes tm-nav-in { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 699px) { .tm-nav { height: 64px; gap: 8px; } .tm-nav__cta, .tm-nav__audit { padding: 7px 11px; font-size: 14px; } .tm-nav__logo img { height: 18px; } }
@media (max-width: 560px) { .tm-nav__cta { display: none; } }
@media (prefers-reduced-motion: reduce) { .tm-nav nav, .tm-nav nav > a, .tm-nav__burger span { transition: none !important; animation: none !important; } }
@media (max-width: 480px) { .tm-nav__audit .l { display: none; } .tm-nav__audit .s { display: inline; } .tm-nav__cta, .tm-nav__audit { padding: 7px 9px; font-size: 13px; } .tm-nav__logo img { height: 16px; } }
.tm-data { display: none !important; }


/* Teamenu hero — three-screen story, dark theme matching teamenu.net.
 * All classes are prefixed .tmh to avoid collisions with the Webflow site.
 * Tokens mirror the site's Webflow variables (--teamenu-purple, --grey-super-dark, …). */
.tmh {
  --tm-font: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tm-bg: #212125;            /* --grey-super-dark */
  --tm-surface: #2A2A33;
  --tm-surface-2: #323240;     /* --dark-grey */
  --tm-ink: #FFFFFF;           /* --grey-light */
  --tm-ink-2: #D4D4DE;
  --tm-muted: #80808C;         /* --grey-medium */
  --tm-line: rgba(255, 255, 255, .1);
  --tm-purple: #6E46F0;        /* --teamenu-purple */
  --tm-lilac: #B496FF;         /* --teamenu-light-purple */
  --tm-green: #4FF591;         /* --green */
  --tm-red: #FF3A5E;           /* --red */
  --tm-red-soft: #FF8197;
  --tm-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 18px 40px -12px rgba(0, 0, 0, .55);
  --tm-nav: 72px;
  --tm-gutter: clamp(16px, 4vw, 56px);
  position: relative;
  color: var(--tm-ink);
  background: var(--tm-bg);
  font-family: var(--tm-font);
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
  isolation: isolate;
}
.tmh *, .tmh *::before, .tmh *::after { box-sizing: border-box; }
html.tmh-snap { scroll-snap-type: y proximity; }

/* ---------- pinned visual layer + per-section backgrounds ---------- */
.tmh-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; overflow: hidden; pointer-events: none; z-index: 0; --b2: 0; --b3: 0; }
.tmh-bg { position: absolute; inset: 0; }
/* 1 — the site's hero: deep purple fading into grey-super-dark */
.tmh-bg--1 { background: radial-gradient(90% 60% at 72% -5%, rgba(110, 70, 240, .38), transparent 62%), linear-gradient(180deg, #231158 0%, #212125 78%); }
/* 2 — the problem: colder, darker, a faint red cast */
.tmh-bg--2 { opacity: var(--b2); background: radial-gradient(60% 55% at 72% 58%, rgba(255, 58, 94, .13), transparent 70%), linear-gradient(180deg, #17171B 0%, #131316 100%); }
/* 3 — the solution: the Teamenu app's own purple-blue gradient */
.tmh-bg--3 { opacity: var(--b3); background: radial-gradient(70% 60% at 78% 45%, rgba(79, 245, 145, .07), transparent 70%), linear-gradient(150deg, #2B2A58 0%, #3B2E5E 48%, #263A60 100%); }
.tmh-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- sections ---------- */
.tmh-sec { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; scroll-snap-align: start; pointer-events: none;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 48px); align-items: center;
  padding: calc(var(--tm-nav) + 24px) var(--tm-gutter) 40px; max-width: 1440px; margin: 0 auto; }
.tmh-sec > * { pointer-events: auto; }
.tmh-stage { pointer-events: none !important; align-self: stretch; min-height: 320px; }
.tmh-copy { max-width: 560px; }
.tmh-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tm-muted); }
.tmh-eyebrow .tmh-ph { width: 16px; height: 16px; }
.tmh-eyebrow--problem, .tmh-eyebrow--solution { padding: 6px 12px 6px 10px; border-radius: 999px; border: 1px solid; }
.tmh-eyebrow--problem { color: var(--tm-red-soft); background: rgba(255, 58, 94, .1); border-color: rgba(255, 58, 94, .35); }
.tmh-eyebrow--solution { color: var(--tm-green); background: rgba(79, 245, 145, .08); border-color: rgba(79, 245, 145, .3); }
.tmh-h { margin: 0; font-weight: 300; letter-spacing: -0.02em; line-height: 1.05; color: var(--tm-ink); text-wrap: balance; }
.tmh-h strong { font-weight: 500; }
.tmh-s1 .tmh-h { font-size: clamp(38px, 4.6vw, 64px); }
.tmh-s1 .tmh-h strong { color: var(--tm-lilac); }
.tmh-s2 .tmh-h, .tmh-s3 .tmh-h { font-size: clamp(30px, 3.5vw, 50px); min-height: 3.2em; }
.tmh-lede { margin: 20px 0 0; font-size: clamp(16px, 1.3vw, 20px); font-weight: 300; line-height: 1.45; color: var(--tm-ink-2); max-width: 30em; }
.tmh-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.tmh-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 6px; font: 500 18px/1 var(--tm-font);
  text-decoration: none; cursor: pointer; border: 2px solid #fff; color: #fff; transition: background .25s, transform .2s; }
.tmh-btn .tmh-ph { width: 18px; height: 18px; }
.tmh-btn--primary { background: var(--tm-purple); }
.tmh-btn--primary:hover { background: #5E38EA; }
.tmh-btn--ghost { background: #1C1C1C; }
.tmh-btn--ghost:hover { background: #2A2A2A; }
.tmh-btn small { font-size: 14px; color: var(--tm-muted); font-weight: 400; }

.tmh :focus-visible { outline: 3px solid var(--tm-lilac); outline-offset: 2px; border-radius: 8px; }

/* inline icon primitives — app marks sit on white tiles, as in the Teamenu app */
.tmh-ph { width: 1em; height: 1em; flex: none; }
.tmh-app { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.tmh-app svg { width: 60%; height: 60%; }
.tmh-app img { width: 70%; height: 70%; object-fit: contain; display: block; }
.tmh-mono { font: 700 11px/1 var(--tm-font); letter-spacing: -.02em; }
.tmh-app--s { width: 18px; height: 18px; border-radius: 5px; }
.tmh-app--s .tmh-mono { font-size: 7.5px; }
.tmh-app--m { width: 24px; height: 24px; border-radius: 6px; }
.tmh-app--m .tmh-mono { font-size: 9.5px; }
.tmh-app--l { width: 36px; height: 36px; border-radius: 9px; }
.tmh-app--l .tmh-mono { font-size: 13px; }
.tmh-app--xl { width: 46px; height: 46px; border-radius: 12px; }
.tmh-app--xl .tmh-mono { font-size: 16px; }
.tmh-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.tmh-swap { display: inline; transition: opacity .28s ease, filter .28s ease; }
.tmh-h.tmh-swap { display: block; }
.tmh-swap.is-out { opacity: 0; filter: blur(3px); }
.tmh-inline-app { display: inline-flex; align-items: baseline; gap: .22em; white-space: nowrap; font-weight: 500; }
.tmh-inline-app .tmh-app { width: .9em; height: .9em; border-radius: .22em; align-self: center; transform: translateY(.02em); }
.tmh-inline-app .tmh-mono { font-size: .34em; }
/* problem: the thing you can't find, in red with a dashed "missing" underline */
.tmh-res { font-weight: 500; color: var(--tm-red-soft); text-decoration: underline dashed 2px; text-underline-offset: .16em; text-decoration-color: rgba(255, 58, 94, .55); }
/* solution: who in lilac, what in green */
.tmh-s3 .tmh-h [data-s3-who] { color: var(--tm-lilac); }
.tmh-s3 .tmh-h [data-s3-what] { color: var(--tm-green); }
.tmh-s3 .tmh-h .tmh-instant { color: var(--tm-ink); font-weight: 500; }

/* ---------- controls ---------- */
.tmh-ctl { position: absolute; right: var(--tm-gutter); bottom: 20px; display: flex; align-items: center; gap: 10px; pointer-events: auto; z-index: 3; }
.tmh-dots { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(33,33,37,.7); border: 1px solid var(--tm-line); backdrop-filter: blur(12px); }
.tmh-dot { width: 28px; height: 28px; border: 0; padding: 0; background: transparent; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.tmh-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #5A5A66; transition: background .2s, transform .2s; }
.tmh-dot[aria-current="step"]::before { background: var(--tm-lilac); transform: scale(1.25); }
.tmh-pause { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--tm-line);
  background: rgba(33,33,37,.7); backdrop-filter: blur(12px); color: var(--tm-ink-2); font: 500 13px/1 var(--tm-font); cursor: pointer; }
.tmh-pause .tmh-ph { width: 16px; height: 16px; }
@keyframes tmh-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ---------- screens 2 and 3: one example at a time (its chip + refresh), headline slot machine ---------- */
.tmh-chips { display: flex; align-items: center; gap: 8px; margin-top: 26px; }
.tmh-chip { display: inline-flex; align-items: center; gap: 10px; min-width: 0; min-height: 50px; padding: 5px 16px 5px 6px; border-radius: 999px; border: 1px solid var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--tm-ink-2); font: 400 14px/1.15 var(--tm-font); cursor: pointer; text-align: left;
  transition: opacity .35s ease, transform .4s cubic-bezier(.2,.7,.2,1), background .2s; }
.tmh-chip:hover { background: color-mix(in srgb, var(--c) 24%, transparent); }
.tmh-chip b { display: block; font-weight: 500; color: var(--tm-ink); }
.tmh-chip small { display: block; font-size: 12px; color: var(--tm-muted); margin-top: 2px; }
.tmh-chip i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 22%, #2A2A33); color: var(--c); flex: none; }
.tmh-chip i .tmh-ph { width: 19px; height: 19px; }
.tmh-chip--agent i { position: relative; border-radius: 12px; background: #24242C; border: 1.5px dashed color-mix(in srgb, var(--c) 70%, transparent); }
.tmh-chip i em { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--c); color: #1B1B22; display: grid; place-items: center; }
.tmh-chip i em .tmh-ph { width: 10px; height: 10px; }
.tmh-chip small .tmh-flag { display: inline-block; vertical-align: -1px; margin-right: 4px; }
.tmh-chips.is-spinning .tmh-chip { opacity: 0; transform: translateY(8px); pointer-events: none; }
.tmh-chips.is-spinning .tmh-chip-refresh .tmh-ph { animation: tmh-turn .7s linear infinite; }
@keyframes tmh-turn { to { transform: rotate(360deg); } }
/* each spinning slot sits on its own line, so its changing width never reflows the words around it */
.tmh-s2 .tmh-h .tmh-res, .tmh-s3 .tmh-h [data-s3-who], .tmh-s3 .tmh-h .tmh-instant { display: block; width: fit-content; }
.tmh-s3 .tmh-h [data-s3-what] { display: inline-block; }
@media (min-width: 1024px) { .tmh-s2 .tmh-h { min-height: 4.2em; } }  /* room for a long app name on its own line: the chips never move */
.tmh-cluster .tmh-cl, .tmh-panel { transition: opacity .4s ease; }
.tmh-cluster.is-spinning .tmh-cl { opacity: .18; }
.tmh-panel.is-spinning { opacity: .3; }
.tmh-progress { display: none; }

/* ---------- screen 2: the person and the friction (pinned layer) ---------- */
.tmh-cluster { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 2; opacity: var(--in, 0); }
.tmh-cl { position: absolute; left: 50%; top: 50%; width: 560px; height: 440px; transform: translate(-50%, -50%) scale(calc(var(--fit, 1) * (0.86 + 0.14 * var(--in, 0))));
  --c: var(--tm-lilac); font-size: 14px; color: var(--tm-ink-2); }
.tmh-cl.is-switching > * { opacity: 0 !important; transition-duration: .25s !important; }
.tmh-f { --o: 0; position: absolute; transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1); transform: translateY(10px) scale(.98); }
.tmh-cl .tmh-f { opacity: calc(var(--fo, 1) * var(--o)); }
.tmh-f.is-on { --o: .5; transform: none; }
.tmh-f.is-active { --o: 1; transform: translateY(-3px); }
.tmh-cl.is-static .tmh-f { transform: none; transition: none; }
.tmh-cl .tmh-f:not(.is-active) { --o: 0; }

.tmh-card { background: var(--tm-surface); border: 1px solid var(--tm-line); border-radius: 14px; box-shadow: var(--tm-shadow); }
.tmh-win__bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--tm-line); font-size: 13px; font-weight: 500; color: var(--tm-ink); }
.tmh-win__bar .tmh-dots3 { margin-left: auto; display: flex; gap: 4px; }
.tmh-win__bar .tmh-dots3 i { width: 6px; height: 6px; border-radius: 50%; background: #4A4A56; }
.tmh-win__body { padding: 12px; }
.tmh-field { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 20px; background: #1C1C22; color: var(--tm-ink); font-size: 14px; }
.tmh-field .tmh-ph { width: 16px; height: 16px; color: var(--tm-muted); }
.tmh-caret { width: 1.5px; height: 16px; background: var(--tm-ink); animation: tmh-blink 1s steps(1) infinite; }
@keyframes tmh-blink { 50% { opacity: 0; } }
.tmh-results { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.tmh-results b { font-weight: 500; color: var(--tm-ink); font-size: 13px; }
.tmh-results span { font-size: 12px; color: var(--tm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmh-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; }
.tmh-tag--red { background: rgba(255, 58, 94, .16); color: var(--tm-red-soft); }
.tmh-tag--green { background: rgba(79, 245, 145, .14); color: var(--tm-green); }
.tmh-tag .tmh-ph { width: 12px; height: 12px; }
.tmh-tabs { display: inline-flex; gap: 3px; padding: 5px; border-radius: 12px; background: #1C1C22; position: relative; }
.tmh-tab { flex: none; width: 40px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 8px; position: relative; z-index: 1; }
.tmh-tab > span:not(.tmh-app) { display: none; }
.tmh-tabs__ind { position: absolute; top: 5px; bottom: 5px; left: 5px; width: 40px; border-radius: 8px; background: #3A3A46; }
.tmh-tabs__count { position: absolute; left: 6px; top: -20px; white-space: nowrap; font-size: 11px; color: var(--tm-muted); }
.tmh-wrong { display: flex; gap: 12px; padding: 14px; align-items: flex-start; }
.tmh-wrong b { display: block; font-weight: 500; color: var(--tm-ink); font-size: 14px; margin-bottom: 4px; }
.tmh-wrong small { display: block; font-size: 12px; color: var(--tm-muted); margin-bottom: 8px; }
.tmh-chat, .tmh-ai { padding: 12px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.tmh-chat__h { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--tm-muted); margin-bottom: 2px; }
.tmh-bub { max-width: 90%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.35; }
.tmh-bub--me { align-self: flex-end; background: color-mix(in srgb, var(--c) 26%, #2A2A33); color: var(--tm-ink); border-bottom-right-radius: 4px; }
.tmh-bub--them { align-self: flex-start; background: #383844; color: var(--tm-ink-2); border-bottom-left-radius: 4px; }
.tmh-bub--link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--tm-line); color: var(--tm-lilac); font-weight: 500; }
.tmh-bub--link .tmh-ph { width: 14px; height: 14px; }
.tmh-f.is-active .tmh-bub--link { animation: tmh-lost 4.2s ease-in forwards; }
@keyframes tmh-lost { 0%, 45% { transform: none; opacity: 1; } 100% { transform: translateY(-46px); opacity: 0; } }
.tmh-chat__lost { font-size: 11.5px; color: var(--tm-muted); display: flex; align-items: center; gap: 5px; opacity: 0; transition: opacity .4s 1.6s; }
.tmh-f.is-active .tmh-chat__lost { opacity: 1; }
.tmh-chat__lost .tmh-ph { width: 13px; height: 13px; }
.tmh-ai .tmh-bub--them { display: flex; gap: 6px; align-items: flex-start; }
.tmh-ai .tmh-bub--them .tmh-ph { width: 15px; height: 15px; margin-top: 1px; color: var(--tm-red-soft); }

.tmh-person { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 10px; transform: translate(-50%, -50%); z-index: 2; }
.tmh-avatar { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #1B1B22; box-shadow: 0 0 0 7px color-mix(in srgb, var(--c) 18%, transparent), var(--tm-shadow); position: relative; }
.tmh-avatar .tmh-ph { width: 32px; height: 32px; }
.tmh-avatar__q { position: absolute; right: -6px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; background: #1C1C22; color: var(--tm-red-soft); display: grid; place-items: center; border: 1px solid rgba(255,58,94,.4); }
.tmh-avatar__q .tmh-ph { width: 14px; height: 14px; }
.tmh-cl:not(.is-static) .tmh-avatar__q { animation: tmh-look 3.2s ease-in-out infinite; }
@keyframes tmh-look { 0%, 100% { transform: rotate(0); } 30% { transform: translate(-3px, -2px) rotate(-12deg); } 60% { transform: translate(2px, 1px) rotate(8deg); } }
.tmh-person__chip { background: #1C1C22; border: 1px solid var(--tm-line); border-radius: 999px; padding: 7px 14px; font-size: 13px; color: var(--tm-ink-2); white-space: nowrap; }
.tmh-person__chip b { color: var(--tm-ink); font-weight: 500; }

.tmh-missing { position: absolute; width: 220px; padding: 14px; display: flex; gap: 12px; align-items: center; border-radius: 14px; background: var(--tm-surface);
  border: 1.5px dashed rgba(255, 58, 94, .7); box-shadow: 0 0 0 6px rgba(255, 58, 94, .07), var(--tm-shadow); z-index: 1; transition: border-color .4s, box-shadow .4s; }
.tmh-cl:not(.is-static) .tmh-missing { animation: tmh-drift 7s ease-in-out infinite; }
@keyframes tmh-drift { 0%, 100% { translate: 0 0; } 25% { translate: 14px -8px; } 50% { translate: 22px 4px; } 75% { translate: 6px 10px; } }
.tmh-missing b { display: block; font-weight: 500; font-size: 14px; color: var(--tm-ink); line-height: 1.25; }
.tmh-missing small { display: block; font-size: 12px; color: var(--tm-muted); margin-top: 3px; }
.tmh-missing__lbl { position: absolute; left: 12px; top: -11px; padding: 2px 9px; border-radius: 999px; background: #1C1C22; font-size: 11px; font-weight: 500; color: var(--tm-red-soft); border: 1px solid rgba(255, 58, 94, .45); }
.tmh-missing__ok { display: none; }
.tmh-reach { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; }
.tmh-reach path { fill: none; stroke: var(--tm-red); stroke-width: 1.6; stroke-dasharray: 3 6; opacity: .6; stroke-linecap: round; }
.tmh-cl:not(.is-static) .tmh-reach path { animation: tmh-dash 1.6s linear infinite; }
@keyframes tmh-dash { to { stroke-dashoffset: -18; } }
/* screen 2 → 3: friction falls away, the missing resource turns green */
.tmh-cl.is-resolved .tmh-missing { border-style: solid; border-color: var(--tm-green); box-shadow: 0 0 0 6px rgba(79, 245, 145, .1), var(--tm-shadow); animation: none; }
.tmh-cl.is-resolved .tmh-missing__lbl { display: none; }
.tmh-cl.is-resolved .tmh-missing__ok { display: inline-flex; position: absolute; left: 12px; top: -12px; background: #1C1C22; border: 1px solid rgba(79,245,145,.45); }
.tmh-cl.is-resolved .tmh-reach path { stroke: var(--tm-green); stroke-dasharray: none; opacity: .9; animation: none; }
.tmh-cl.is-resolved .tmh-avatar__q { display: none; }

/* ---------- screen 3 ---------- */
.tmh-s3 { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.tmh-note { margin: 18px 0 0; font-size: 14px; font-weight: 300; color: var(--tm-ink-2); display: flex; gap: 8px; align-items: center; }
.tmh-note .tmh-ph { width: 17px; height: 17px; color: var(--tm-green); }

/* ---------- screen 3: the Teamenu app screen ---------- */
.tmh-panel { width: 100%; max-width: 480px; justify-self: center; --c: var(--tm-lilac); }
.tmh-appwin { border: 6px solid #D9D9E0; border-radius: 30px; overflow: hidden; color: #fff;
  background: linear-gradient(160deg, #3C4172 0%, #47395F 55%, #354469 100%); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0,0,0,.3); }
.tmh-appwin__search { display: flex; align-items: center; gap: 10px; height: 42px; margin: 14px 16px 4px; padding: 0 16px; border-radius: 21px; background: #1D1D23; color: #B9B9C6; font-size: 15px; }
.tmh-appwin__search .tmh-ph { width: 20px; height: 20px; color: #fff; }
.tmh-appwin__body { padding: 2px 16px 14px; }
.tmh-appwin__sec { display: flex; align-items: center; gap: 10px; margin: 12px 2px 8px; }
.tmh-appwin__sec b { display: block; font-size: 17px; font-weight: 500; color: #fff; line-height: 1.15; }
.tmh-appwin__sec small { display: block; font-size: 12.5px; color: #C7C7D6; margin-top: 2px; }
.tmh-appwin__av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--tm-lilac); color: #3A2A78; flex: none; }
.tmh-appwin__av .tmh-ph { width: 19px; height: 19px; }
.tmh-appwin__av.is-agent { border-radius: 10px; }
.tmh-appwin__group { background: rgba(28, 28, 42, .5); border-radius: 14px; padding: 10px 8px 12px; }
.tmh-appwin__gt { position: relative; text-align: center; font-size: 14px; font-weight: 500; color: #CFCFDB; margin-bottom: 8px; }
.tmh-appwin__gt i { position: absolute; right: 8px; top: -2px; font-style: normal; letter-spacing: 1px; color: #CFCFDB; }
.tmh-appwin__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 48px; padding: 0 16px; background: #1D1D23; }
.tmh-appwin__bar b { font-size: 17px; font-weight: 500; letter-spacing: .02em; }
.tmh-appwin__bar > .tmh-ph { justify-self: end; width: 22px; height: 22px; }
.tmh-appwin__logo svg { height: 12px; width: auto; display: block; }
.tmh-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.tmh-tile { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 2px 7px; border: 0; border-radius: 12px; background: transparent;
  color: #fff; font: 400 12.5px/1.2 var(--tm-font); cursor: pointer; text-align: center; transition: background .15s, box-shadow .15s; }
.tmh-tile:hover { background: rgba(255,255,255,.07); }
.tmh-tile[aria-pressed="true"] { background: rgba(180, 150, 255, .16); box-shadow: inset 0 0 0 1.5px var(--tm-lilac); }
.tmh-tile__ic { position: relative; }
.tmh-tile__ic .tmh-app { box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.tmh-tile__sh { position: absolute; right: -6px; top: -6px; width: 19px; height: 19px; border-radius: 50%; background: var(--tm-lilac); color: #2A2350; display: grid; place-items: center; box-shadow: 0 0 0 2px #3E3A66; }
.tmh-tile__sh .tmh-ph { width: 11px; height: 11px; }
.tmh-tile__l { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }

/* screen 2: enterprise search + portal navigation */
.tmh-es__filter { margin-top: 8px; font-size: 11.5px; color: var(--tm-muted); }
.tmh-es__hits { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tmh-es__hits li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tm-ink-2); opacity: .75; }
.tmh-es__hits li span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: line-through rgba(255,129,151,.5); }
.tmh-pt-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 4px; font-size: 12px; color: var(--tm-ink-2); }
.tmh-pt-crumbs .tmh-ph { width: 10px; height: 10px; color: var(--tm-muted); }
.tmh-pt-crumbs span { padding: 2px 6px; border-radius: 6px; background: #1C1C22; }
.tmh-f.is-active .tmh-pt-crumbs span { animation: tmh-crumb .4s both; animation-delay: calc(var(--j) * .45s); }
@keyframes tmh-crumb { from { opacity: 0; transform: translateX(-4px); } }
.tmh-pt-menu { list-style: none; margin: 10px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tmh-pt-menu li { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; background: #23232B; font-size: 12px; color: var(--tm-muted); }
.tmh-pt-menu .tmh-ph { width: 13px; height: 13px; }

/* screen 2: email thread */
.tmh-mail { padding-bottom: 10px; }
.tmh-mail__item { margin: 10px 12px 0; padding: 9px 11px; border-radius: 10px; background: #23232B; font-size: 13px; line-height: 1.35; }
.tmh-mail__item small { display: block; font-size: 11.5px; color: var(--tm-muted); margin-bottom: 3px; }
.tmh-mail__item b { font-weight: 500; color: var(--tm-ink); }
.tmh-mail__item.is-reply { margin-left: 28px; color: var(--tm-ink-2); }
.tmh-mail__auto { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 12px 0; font-size: 11.5px; color: var(--tm-muted); }
.tmh-mail__auto > .tmh-ph { width: 13px; height: 13px; }
/* screen 2: cost-of-friction link */
.tmh-link-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--tm-ink); font-size: 16px; font-weight: 500; text-decoration: none;
  border-bottom: 1px solid rgba(255,129,151,.5); padding-bottom: 3px; }
.tmh-link-cta .tmh-ph { width: 18px; height: 18px; color: var(--tm-red-soft); }
.tmh-link-cta:hover { border-bottom-color: var(--tm-red-soft); }
.tmh-btn--danger { background: #D81F46; }   /* --red darkened for 5:1 contrast with white text */
.tmh-btn--danger:hover { background: #C01639; }
.tmh-ctas--s3 { margin-top: 18px; }
.tmh-ctas--s3 .tmh-btn { min-height: 44px; font-size: 16px; padding: 0 18px; }

/* screens 2 and 3: refresh button next to the chip */
.tmh-chip-refresh { width: 44px; height: 44px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.28); background: rgba(255,255,255,.03); color: var(--tm-ink-2);
  display: grid; place-items: center; cursor: pointer; transition: transform .35s ease, border-color .2s, color .2s; flex: none; }
.tmh-chip-refresh:hover { border-color: var(--tm-lilac); color: var(--tm-lilac); transform: rotate(90deg); }
.tmh-chip-refresh .tmh-ph { width: 19px; height: 19px; }

/* ---------- screen 3: showcase = device toggle + framed menu ---------- */
.tmh-showcase { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; min-width: 0; }
.tmh-devices { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: rgba(0,0,0,.28); border: 1px solid var(--tm-line); }
.tmh-devices button { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent; color: var(--tm-ink-2);
  font: 500 13px/1 var(--tm-font); cursor: pointer; transition: background .2s, color .2s; white-space: nowrap; }
.tmh-devices button .tmh-ph { width: 17px; height: 17px; }
.tmh-devices button[aria-checked="true"] { background: #fff; color: #1D1D23; }
.tmh-devices .tmh-app--s { box-shadow: none; }
.tmh-panel { max-width: none; display: flex; justify-content: center; }

/* the menu itself (same in every frame) */
.tmh-menu { display: flex; flex-direction: column; min-height: 0; color: #fff; background: linear-gradient(160deg, #3C4172 0%, #47395F 55%, #354469 100%); }
.tmh-menu__body { overflow-y: auto; padding: 2px 14px 16px; height: var(--menu-h, 470px); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.tmh-menu__body:focus-visible { outline-offset: -3px; }
.tmh-menu .tmh-appwin__search { flex: none; margin: 12px 14px 4px; }
.tmh-menu .tmh-appwin__bar { flex: none; }
.tmh-menu .tmh-appwin__group + .tmh-appwin__group { margin-top: 10px; }
.tmh-menu .tmh-appwin__sec { margin: 16px 2px 8px; }
.tmh-menu .tmh-tiles { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); }
.tmh-menu .tmh-tile { font-size: 12px; }
.tmh-col { background: #2C2C3E !important; border: 2px solid var(--col); color: var(--col); }
.tmh-col .tmh-ph { width: 56%; height: 56%; }

/* frame: browser with Teamenu as a sidebar */
.tmh-dev { overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.3); }
.tmh-dev--browser { width: 100%; max-width: 640px; border-radius: 14px; background: #1D1D23; border: 1px solid rgba(255,255,255,.12); --menu-h: clamp(260px, calc(100svh - 330px), 450px); }
.tmh-br__bar { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; background: #2A2A31; border-bottom: 1px solid rgba(255,255,255,.08); }
.tmh-br__dots { display: flex; gap: 6px; } .tmh-br__dots i { width: 11px; height: 11px; border-radius: 50%; background: #55555F; }
.tmh-br__url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 14px; background: #1D1D23; color: #A6A6B3; font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.tmh-br__url .tmh-ph { width: 13px; height: 13px; flex: none; }
.tmh-br__ext { display: grid; place-items: center; width: 28px; height: 28px; color: var(--tm-lilac); }
.tmh-br__ext .tmh-tm__leaf { width: 20px; height: 20px; }
.tmh-br__body { display: grid; grid-template-columns: minmax(0, 1fr) 330px; }
.tmh-br__page { padding: 22px 18px; display: flex; flex-direction: column; gap: 12px; background: #F1F1F4; }
.tmh-br__page i { display: block; height: 10px; border-radius: 5px; background: #D9D9E0; }
.tmh-br__page i:nth-child(1) { width: 55%; height: 16px; background: #C9C9D3; } .tmh-br__page i:nth-child(2) { width: 85%; } .tmh-br__page i:nth-child(3) { width: 70%; }
.tmh-br__page b { display: block; height: 84px; border-radius: 10px; background: #E2E2E9; }
.tmh-br__side { border-left: 1px solid rgba(0,0,0,.3); min-width: 0; }
.tmh-br__side .tmh-menu { height: 100%; }

/* frame: phone */
.tmh-dev--phone { position: relative; width: 340px; max-width: 100%; border-radius: 44px; border: 9px solid #0E0E12; background: #0E0E12; --menu-h: clamp(280px, calc(100svh - 300px), 500px);
  box-shadow: 0 0 0 2px #3A3A44, 0 30px 80px -20px rgba(0,0,0,.7); }
.tmh-dev--phone .tmh-menu { border-radius: 35px; overflow: hidden; padding-top: 22px; }
.tmh-phone__notch { position: absolute; z-index: 2; left: 50%; top: 8px; width: 96px; height: 24px; border-radius: 14px; background: #0E0E12; transform: translateX(-50%); }

/* frame: Microsoft Teams (dark theme) with Teamenu as a pinned app, opened full-width */
.tmh-dev--teams { width: 100%; max-width: 660px; border-radius: 8px; background: #1F1F1F; color: #FFFFFF; border: 1px solid #3D3D3D;
  --menu-h: clamp(240px, calc(100svh - 380px), 440px); font-family: 'Segoe UI', var(--tm-font); }
.tmh-tm__top { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 12px; background: #33344A; }
.tmh-tm__nav { display: flex; gap: 8px; color: #C8C8C8; } .tmh-tm__nav .tmh-ph { width: 14px; height: 14px; }
.tmh-tm__search { flex: 1; max-width: 380px; margin: 0 auto; height: 28px; display: grid; place-items: center; border-radius: 4px; background: #1F1F1F; color: #ADADAD; font-size: 12.5px; }
.tmh-tm__me { width: 28px; height: 28px; border-radius: 50%; background: #5B5FC7; color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px #33344A, 3px 3px 0 -1px #92C353; }
.tmh-tm__me .tmh-ph { width: 15px; height: 15px; }
.tmh-tm__wrap { display: grid; grid-template-columns: 64px minmax(0, 1fr); }
.tmh-tm__rail { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; background: #2B2B2B; }
.tmh-tm__rail span { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; padding: 7px 0; color: #ADADAD; font-size: 10px; position: relative; }
.tmh-tm__rail span .tmh-ph { width: 21px; height: 21px; }
.tmh-tm__rail span.is-on { color: #fff; background: #1F1F1F; }
.tmh-tm__rail span.is-on::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #7F85F5; }
.tmh-tm__rail .is-app .tmh-app--s { width: 22px; height: 22px; border-radius: 6px; }
.tmh-tm__fill { flex: 1; padding: 0 !important; }
.tmh-tm__main { display: flex; flex-direction: column; min-width: 0; background: #1F1F1F; }
.tmh-tm__head { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-bottom: 1px solid #3D3D3D; font-size: 18px; }
.tmh-tm__head .tmh-app--s { width: 24px; height: 24px; border-radius: 6px; }
.tmh-tm__head b { font-weight: 600; margin-right: 10px; }
.tmh-tm__tabs { display: flex; align-items: stretch; gap: 18px; height: 100%; font-size: 13.5px; color: #ADADAD; }
.tmh-tm__tabs span { display: flex; align-items: center; position: relative; white-space: nowrap; }
.tmh-tm__tabs span.is-on { color: #fff; font-weight: 600; }
.tmh-tm__tabs span.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: #7F85F5; }
.tmh-dev--teams .tmh-menu { border-radius: 0; background: #1F1F1F; }
.tmh-dev--teams .tmh-appwin__group { background: #292929; }
.tmh-dev--teams .tmh-appwin__search { background: #2B2B2B; }
.tmh-dev--teams .tmh-appwin__bar { display: none; }

/* frame: an AI assistant using Teamenu to find what it needs */
.tmh-dev--agent { width: 100%; max-width: 560px; border-radius: 16px; background: #1B1B22; border: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; }
.tmh-ag__head { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 15px; }
.tmh-ag__head .tmh-app--m { background: transparent; box-shadow: none; }
.tmh-ag__conn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tm-green); }
.tmh-ag__conn i { width: 7px; height: 7px; border-radius: 50%; background: var(--tm-green); box-shadow: 0 0 0 3px rgba(79,245,145,.18); }
.tmh-ag__body { display: flex; flex-direction: column; gap: 12px; padding: 16px; height: clamp(300px, calc(100svh - 330px), 470px); overflow-y: auto; scrollbar-width: thin; }
.tmh-ag__body > * { animation: tmh-ag-in .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--d, 0) * .85s); }
.tmh-dev--agent.is-static .tmh-ag__body > * { animation: none; }
@keyframes tmh-ag-in { from { opacity: 0; transform: translateY(8px); } }
.tmh-ag__msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.tmh-ag__msg small { display: block; font-size: 11.5px; color: rgba(255,255,255,.7); margin-bottom: 2px; }
.tmh-ag__msg--user { align-self: flex-end; background: #4A3D8F; border-bottom-right-radius: 4px; }
.tmh-ag__msg--bot { align-self: flex-start; background: #2B2B35; border-bottom-left-radius: 4px; color: var(--tm-ink-2); }
.tmh-ag__step { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #C7C7D6; }
.tmh-ag__step .tmh-app--s { width: 20px; height: 20px; }
.tmh-ag__tool code { display: block; padding: 9px 12px; border-radius: 10px; background: #121217; border: 1px solid rgba(255,255,255,.08); font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #C7C7D6; white-space: pre-wrap; word-break: break-word; }
.tmh-ag__tool em { font-style: normal; color: var(--tm-lilac); }
.tmh-ag__results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tmh-ag__res { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08); background: #24242C; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.tmh-ag__res:hover { border-color: rgba(180,150,255,.5); }
.tmh-ag__res[aria-pressed="true"] { border-color: var(--tm-lilac); background: rgba(180,150,255,.12); }
.tmh-ag__res b { display: block; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmh-ag__res small { display: block; font-size: 11.5px; color: var(--tm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmh-ag__ok { width: 18px; height: 18px; color: var(--tm-green); }
.tmh-ag__found { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tm-green); }
.tmh-ag__found .tmh-ph { width: 14px; height: 14px; }
.tmh-ag__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tmh-ag__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 5px; border-radius: 999px; background: #1B1B22; border: 1px solid rgba(255,255,255,.1); font-size: 12px; color: #fff; }
.tmh-ag__chip .tmh-app--s { width: 16px; height: 16px; }
.tmh-ag__input { display: flex; align-items: center; justify-content: space-between; margin: 0 14px 14px; height: 42px; padding: 0 14px; border-radius: 21px; background: #2B2B35; color: var(--tm-muted); font-size: 13.5px; }
.tmh-ag__input .tmh-ph { width: 17px; height: 17px; color: var(--tm-lilac); }

/* person tags + group tags in the menu */
.tmh-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tmh-tags span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,.25); font-size: 10.5px; color: #E4E4EE; white-space: nowrap; }
.tmh-tags em { font-style: normal; color: var(--tm-lilac); }
.tmh-gtag { position: absolute; left: 8px; top: 1px; padding: 1px 7px; border-radius: 999px; background: rgba(180,150,255,.18); color: var(--tm-lilac); font-size: 10px; font-weight: 500; }
/* Teams rail: Teamenu leaf as a monochrome glyph, like the built-in apps */
.tmh-tm__leaf { display: block; width: 21px; height: 21px; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }

/* shared collection overlay inside the menu */
.tmh-menu { position: relative; }
.tmh-col-ov { position: absolute; z-index: 3; left: 10px; right: 10px; top: 60px; bottom: 10px; overflow-y: auto; padding: 12px; border-radius: 14px;
  background: #2C2C40; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 50px -10px rgba(0,0,0,.7); }
.tmh-col-ov__h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tmh-col-ov__h b { display: block; font-size: 15px; font-weight: 500; }
.tmh-col-ov__h small { display: block; font-size: 12px; color: #C7C7D6; margin-top: 2px; }
.tmh-col-ov__x { margin-left: auto; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.tmh-col-ov__x .tmh-ph { width: 20px; height: 20px; }
.tmh-col-ov .tmh-tiles { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); }
.tmh-dev--teams .tmh-col-ov { background: #2B2B2B; }

.tmh-appwin__av.is-group { border-radius: 10px; background: #fff; color: #3A2A78; }


/* ---------- reduced motion & pause ---------- */
.tmh.is-paused *, .tmh.is-paused *::before, .tmh.is-paused *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .tmh *, .tmh *::before, .tmh *::after { animation: none !important; transition-duration: .01ms !important; }
  html.tmh-snap { scroll-snap-type: none; }
}

/* ---------- tablet ---------- */
@media (max-width: 1023px) {
  .tmh-sec, .tmh-s3 { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 20px; padding-top: calc(var(--tm-nav) + 20px); }
  .tmh-copy { max-width: 680px; }
  .tmh-s1 .tmh-stage { min-height: 50svh; }
  .tmh-s2 .tmh-stage { min-height: 48svh; }
  .tmh-s2 .tmh-h, .tmh-s3 .tmh-h { min-height: 2.2em; }
  .tmh-panel { justify-self: start; }
}

/* ---------- mobile ---------- */
@media (max-width: 699px) {
  .tmh { --tm-nav: 64px; }
  .tmh-sec { padding: calc(var(--tm-nav) + 12px) 16px 76px; gap: 14px; }
  .tmh-s1 .tmh-h { font-size: clamp(32px, 8.8vw, 42px); }
  .tmh-s2 .tmh-h, .tmh-s3 .tmh-h { font-size: clamp(26px, 7.4vw, 34px); min-height: 2.15em; }
  .tmh-lede { font-size: 16px; margin-top: 12px; }
  .tmh-ctas { margin-top: 18px; gap: 8px; flex-wrap: nowrap; }
  .tmh-btn { min-height: 46px; font-size: 15px; padding: 0 14px; }
  .tmh-btn small { display: none; }
  .tmh-s1 .tmh-stage { min-height: 40svh; }
  .tmh-s2 .tmh-stage { min-height: 46svh; }
  .tmh-eyebrow { margin-bottom: 12px; font-size: 11.5px; }
  .tmh-chips { margin-top: 14px; }
  .tmh-chip small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tmh-chip > span { min-width: 0; }
  .tmh-cl { width: 340px; height: 380px; }
  .tmh-missing { width: 200px; }
  .tmh-devices button { padding: 0 11px; font-size: 12px; }
  .tmh-br__body { grid-template-columns: minmax(0, 1fr); } .tmh-br__page { display: none; }
  .tmh-tm__wrap { grid-template-columns: 52px minmax(0, 1fr); } .tmh-tm__rail span { width: 52px; font-size: 9px; } .tmh-tm__tabs span:not(.is-on) { display: none; }
  .tmh-devices .tmh-dev__lbl { display: none; } .tmh-devices button[aria-checked="true"] .tmh-dev__lbl { display: inline; }
  .tmh-devices button { min-width: 44px; justify-content: center; }
  .tmh-dev--phone { width: 300px; --menu-h: 440px; }
  .tmh-dev--browser { --menu-h: 420px; }
  .tmh-chip-refresh { width: 50px; height: 50px; }
  .tmh-appwin__body { padding: 2px 10px 12px; }
  .tmh-tile { font-size: 11.5px; }
  .tmh-app--xl { width: 40px; height: 40px; border-radius: 10px; }
  .tmh-ctl { bottom: 12px; right: 12px; }
  .tmh-pause span { display: none; }
  .tmh-pause { width: 40px; padding: 0; justify-content: center; }
}
@media (max-width: 699px) and (max-height: 720px) {
  .tmh-s1 .tmh-lede { display: none; }
  .tmh-s1 .tmh-h { font-size: clamp(28px, 8vw, 34px); }
  .tmh-s1 .tmh-stage { min-height: 300px; }
}

/* short laptop screens: keep screen 3 within one viewport */
@media (min-width: 1024px) and (max-height: 860px) {
  .tmh-s3 .tmh-h { font-size: clamp(28px, 3vw, 40px); min-height: 0; }
  .tmh-s3 .tmh-eyebrow { margin-bottom: 10px; }
  .tmh-note { margin-top: 10px; font-size: 13px; }
  .tmh-dev--browser { --menu-h: clamp(240px, calc(100svh - 360px), 450px); }
  .tmh-dev--phone { --menu-h: clamp(240px, calc(100svh - 330px), 500px); }
  .tmh-dev--teams { --menu-h: clamp(200px, calc(100svh - 400px), 400px); }
  .tmh-ag__body { height: clamp(240px, calc(100svh - 360px), 470px); }
}

/* ---------- screen 3: flags next to the city ---------- */
.tmh-flag { width: 14px; height: 10px; border-radius: 2px; flex: none; box-shadow: 0 0 0 .5px rgba(255,255,255,.25); }

/* ---------- WebKit: keep framed, scrolling menus painted (iOS Safari can leave them blank until a tap) ---------- */
.tmh-dev { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-mask-image: -webkit-radial-gradient(white, black); }
.tmh-menu__body, .tmh-ag__body, .tmh-col-ov { -webkit-overflow-scrolling: touch; -webkit-transform: translateZ(0); transform: translateZ(0); }

@media (max-width: 699px) {
  /* buttons go under the Teamenu preview on phones only */
  .tmh-s3 .tmh-copy { display: contents; }
  .tmh-s3 .tmh-copy > * { order: 0; }
  .tmh-s3 .tmh-showcase { order: 1; }
  .tmh-s3 .tmh-ctas--s3 { order: 2; margin-top: 4px; flex-direction: column; flex-wrap: nowrap; }
  .tmh-s3 .tmh-ctas--s3 .tmh-btn { justify-content: center; width: 100%; }
  .tmh-s3 .tmh-eyebrow { justify-self: start; }
  .tmh-s3 .tmh-dev--phone { --menu-h: clamp(250px, calc(100svh - 430px), 420px); }
  .tmh-s3 .tmh-dev--browser, .tmh-s3 .tmh-dev--teams { --menu-h: clamp(240px, calc(100svh - 470px), 400px); }
  .tmh-s3 .tmh-ag__body { height: clamp(260px, calc(100svh - 420px), 420px); }
  .tmh-s3 .tmh-note { order: 0; margin-top: 0; }
}

/* ---------- teaser for the next screen (tells people there is more below) ---------- */
.tmh-sec { padding-bottom: 96px; }
@media (min-width: 1024px) and (max-height: 800px) { .tmh-s1 .tmh-h { font-size: clamp(34px, 4.1vw, 54px); } .tmh-s1 .tmh-lede { margin-top: 14px; } .tmh-s1 .tmh-ctas { margin-top: 22px; } }
.tmh-teaser { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 12px;
  max-width: calc(100% - 2 * var(--tm-gutter)); padding: 7px 8px 7px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(28,28,34,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 34px -12px rgba(0,0,0,.6);
  color: var(--tm-ink); font: 400 15px/1.3 var(--tm-font); text-align: left; cursor: pointer; transition: border-color .2s, transform .25s; }
.tmh-teaser:hover { border-color: rgba(255,255,255,.32); transform: translateX(-50%) translateY(-2px); }
.tmh-teaser__lbl { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 5px 11px 5px 9px; border-radius: 999px; border: 1px solid;
  font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.tmh-teaser__lbl .tmh-ph { width: 14px; height: 14px; }
.tmh-teaser--problem .tmh-teaser__lbl { color: var(--tm-red-soft); background: rgba(255,58,94,.1); border-color: rgba(255,58,94,.35); }
.tmh-teaser--solution .tmh-teaser__lbl { color: var(--tm-green); background: rgba(79,245,145,.08); border-color: rgba(79,245,145,.3); }
.tmh-teaser__txt { min-width: 0; }
.tmh-teaser__arrow { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #1D1D23; }
.tmh-teaser__arrow .tmh-ph { width: 17px; height: 17px; animation: tmh-nudge 2s ease-in-out infinite; }
.tmh-teaser--problem .tmh-teaser__arrow { background: var(--tm-red-soft); }
.tmh-teaser--solution .tmh-teaser__arrow { background: var(--tm-green); }
@media (min-width: 1024px) { .tmh-ctas--s3 { margin-top: 22px; } }

/* ---------- Teams frame: the Teamenu tab always fills the window down to the bottom of the app rail ---------- */
.tmh-dev--teams .tmh-menu { flex: 1 1 auto; }
.tmh-dev--teams .tmh-menu__body { flex: 1 1 auto; }

@media (max-width: 699px) {
  .tmh-sec { padding-bottom: 92px; }
  .tmh-dots { display: none; }               /* room for the teaser; the pause button stays */
  .tmh-teaser { left: 16px; right: 64px; bottom: 12px; transform: none; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; justify-items: start; border-radius: 16px; padding: 7px 8px 7px 10px; font-size: 13px; }
  .tmh-teaser:hover { transform: none; }
  .tmh-teaser__lbl { padding: 3px 9px 3px 7px; font-size: 10.5px; }
  .tmh-teaser__txt { grid-column: 1; grid-row: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .tmh-teaser__arrow { grid-column: 2; grid-row: 1 / 3; width: 32px; height: 32px; }
  .tmh-s3 .tmh-ctas--s3 { padding-bottom: 0; }
}
@media (max-width: 699px) and (max-height: 720px) { .tmh-sec { padding-bottom: 80px; } .tmh-s2 .tmh-stage { min-height: 40svh; } }

/* ---------- teaser to the next section: brand purple variant (screen 3 and the home sections) ---------- */
.tmh-teaser--next { text-decoration: none; }
.tmh-teaser--next .tmh-teaser__lbl { color: var(--tm-lilac, #B496FF); background: rgba(110,70,240,.16); border-color: rgba(180,150,255,.4); }
.tmh-teaser--next .tmh-teaser__arrow { background: var(--tm-lilac, #B496FF); color: #2A2350; }
.tmh-teaser--next.tmh-teaser--problem .tmh-teaser__lbl { color: var(--tm-red-soft); background: rgba(255,58,94,.1); border-color: rgba(255,58,94,.35); }
.tmh-teaser--next.tmh-teaser--problem .tmh-teaser__arrow { background: var(--tm-red-soft); color: #3A0F18; }
.tmh-teaser--next.tmh-teaser--solution .tmh-teaser__lbl { color: var(--tm-green); background: rgba(79,245,145,.08); border-color: rgba(79,245,145,.3); }
.tmh-teaser--next.tmh-teaser--solution .tmh-teaser__arrow { background: var(--tm-green); color: #0E2A1B; }
.tmh-teaser--flow { position: relative; inset: auto; transform: none; width: max-content; max-width: 100%; margin: clamp(48px, 6vw, 80px) auto 0; }
.tmh-teaser--flow:hover { transform: translateY(-2px); }
@media (max-width: 699px) {
  .tmh-s3 .tmh-teaser { position: static; order: 3; grid-column: 1 / -1; margin: 8px 48px 0 0; }
  .tmh-teaser--flow { width: auto; margin-left: 0; margin-right: 0; }
}
.tmh-teaser__txt { white-space: nowrap; }
@media (max-width: 699px) { .tmh-teaser--flow .tmh-teaser__txt, .tmh-s3 .tmh-teaser__txt { white-space: normal; } }


/* ==========================================================================
   Teamenu home: sections below the hero. Same tokens, type and icon style as the hero.
   All classes are prefixed .tmp- (page) and .tmm- (friction metric).
   ========================================================================== */
.tmp {
  --tm-font: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tm-bg: #212125; --tm-bg-2: #1A1A1F; --tm-surface: #2A2A33; --tm-surface-2: #323240;
  --tm-ink: #FFFFFF; --tm-ink-2: #D4D4DE; --tm-muted: #9A9AA8; --tm-line: rgba(255, 255, 255, .1);
  --tm-hatch: repeating-linear-gradient(135deg, rgba(212,212,222,.6) 0 3px, rgba(212,212,222,.22) 3px 7px);   /* curation time: the customer's people, not paid to Teamenu */
  --tm-purple: #6E46F0; --tm-lilac: #B496FF; --tm-green: #4FF591; --tm-red: #FF3A5E; --tm-red-soft: #FF8197;
  --tm-gutter: clamp(16px, 4vw, 56px);
  position: relative; color: var(--tm-ink); background: var(--tm-bg); font-family: var(--tm-font); -webkit-font-smoothing: antialiased; color-scheme: dark;
}
.tmp *, .tmp *::before, .tmp *::after { box-sizing: border-box; }
.tmp :focus-visible { outline: 3px solid var(--tm-lilac); outline-offset: 2px; border-radius: 8px; }
.tmp .tmh-ph { width: 1em; height: 1em; flex: none; }
.tmp-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tmp-wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--tm-gutter); }
.tmp-sec { position: relative; padding: clamp(72px, 9vw, 128px) 0; }
.tmp-sec + .tmp-sec { border-top: 1px solid rgba(255,255,255,.06); }

/* type */
.tmp-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 12px 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tm-lilac); background: rgba(110,70,240,.14); border: 1px solid rgba(180,150,255,.35); }
.tmp-eyebrow .tmh-ph { width: 16px; height: 16px; }
.tmp-eyebrow--green { color: var(--tm-green); background: rgba(79,245,145,.08); border-color: rgba(79,245,145,.3); }
.tmp-h { margin: 0; max-width: 22em; font-size: clamp(30px, 3.6vw, 52px); font-weight: 300; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.tmp-h strong { font-weight: 500; color: var(--tm-lilac); }
.tmp-secure .tmp-h strong { color: var(--tm-green); }
.tmp-h3 { margin: clamp(56px, 7vw, 88px) 0 22px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 400; letter-spacing: -.01em; }
.tmp-h4 { margin: 0 0 14px; font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tm-muted); }
.tmp p { line-height: 1.55; }
.tmp-lede2 { margin-top: 22px; max-width: 46em; font-size: clamp(16px, 1.3vw, 19px); font-weight: 300; color: var(--tm-ink-2); }
.tmp-lede2 p { margin: 0 0 8px; }
.tmp-big { font-size: clamp(20px, 1.9vw, 26px); font-weight: 300; line-height: 1.35 !important; color: var(--tm-ink); }
.tmp-big strong { font-weight: 500; color: var(--tm-lilac); }
.tmp-big span { display: block; margin-top: 6px; color: var(--tm-ink-2); }

/* icon badge */
.tmp-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; color: var(--tm-lilac);
  background: rgba(110,70,240,.16); border: 1px solid rgba(180,150,255,.28); }
.tmp-ic .tmh-ph { width: 22px; height: 22px; }

/* buttons (match the hero) */
.tmp-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.tmp-ctas--center { justify-content: center; }
.tmp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 6px; font: 500 18px/1 var(--tm-font);
  text-decoration: none; cursor: pointer; border: 2px solid #fff; color: #fff; transition: background .25s; }
.tmp-btn .tmh-ph { width: 18px; height: 18px; }
.tmp-btn--primary { background: var(--tm-purple); } .tmp-btn--primary:hover { background: #5E38EA; }
.tmp-btn--ghost { background: #1C1C1C; } .tmp-btn--ghost:hover { background: #2A2A2A; }
.tmp-btn--danger { background: #D81F46; } .tmp-btn--danger:hover { background: #C01639; }

/* scroll reveal (only when JS runs) */
.tmp-js .tmp-rv { opacity: 0; transform: translateY(14px); transition: opacity .6s ease var(--rv, 0ms), transform .6s cubic-bezier(.2,.7,.2,1) var(--rv, 0ms); }
.tmp-js .tmp-rv.is-in { opacity: 1; transform: none; }

/* ---------- proof band ---------- */
.tmp-proof { padding-top: clamp(56px, 6vw, 88px); background: var(--tm-bg-2); }
.tmp-proof__lbl { margin: 0 0 26px; text-align: center; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--tm-muted); }
.tmp-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tmp-marquee__track { display: flex; align-items: center; gap: clamp(40px, 5vw, 72px); width: max-content; margin: 0; padding: 8px 0; list-style: none; animation: tmp-marquee 48s linear infinite; }
.tmp-marquee:hover .tmp-marquee__track, .tmp-marquee:focus-within .tmp-marquee__track { animation-play-state: paused; }
.tmp-marquee li { flex: none; display: grid; place-items: center; height: 56px; }
.tmp-marquee img { display: block; height: var(--h, 36px); width: auto; opacity: .62; transition: opacity .2s; }
.tmp-marquee li:hover img { opacity: 1; }
@keyframes tmp-marquee { to { transform: translateX(calc(-50% - clamp(40px, 5vw, 72px) / 2)); } }

.tmp-founders { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: clamp(56px, 6vw, 88px); }
.tmp-founders .tmp-ctas { grid-column: 1 / -1; margin-top: 0; }
.tmp-quote { margin: 0; position: relative; padding: clamp(24px, 3vw, 40px); border-radius: 20px; background: linear-gradient(150deg, rgba(110,70,240,.2), rgba(110,70,240,.04) 60%), var(--tm-surface);
  border: 1px solid rgba(180,150,255,.22); }
.tmp-quote::before { content: '“'; position: absolute; right: 24px; top: -8px; font-size: 140px; line-height: 1; font-weight: 700; color: rgba(180,150,255,.18); }
.tmp-quote__faces { display: flex; margin-bottom: 18px; }
.tmp-quote__faces span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--tm-lilac); color: #2A2350; font-weight: 500; font-size: 20px;
  box-shadow: 0 0 0 3px #2E2A45; }
.tmp-quote__faces span + span { margin-left: -12px; background: #8B66FF; color: #fff; }
.tmp-quote__faces img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tmp-quote blockquote { margin: 0; font-size: clamp(17px, 1.45vw, 21px); font-weight: 300; color: var(--tm-ink-2); }
.tmp-quote blockquote p { margin: 0 0 12px; }
.tmp-quote blockquote strong { font-weight: 500; color: #fff; }
.tmp-quote figcaption { margin-top: 10px; font-size: 15px; color: var(--tm-lilac); font-weight: 500; }
.tmp-quote figcaption::before { content: '— '; }
.tmp-facts { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tmp-facts li { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: 16px; background: var(--tm-surface); border: 1px solid var(--tm-line); }
.tmp-facts p { margin: 0; font-size: clamp(17px, 1.45vw, 21px); font-weight: 300; color: var(--tm-ink-2); }
.tmp-facts strong { font-weight: 500; color: #fff; }

/* ---------- product animation ---------- */
.tmp-flow { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: clamp(14px, 2vw, 28px); align-items: stretch;
  margin-top: clamp(36px, 4vw, 56px); padding: clamp(14px, 2vw, 24px); border-radius: 24px; border: 1px solid var(--tm-line);
  background: radial-gradient(60% 80% at 55% 50%, rgba(110,70,240,.18), transparent 70%), var(--tm-bg-2); }
.tmp-flow__col { min-width: 0; border-radius: 16px; }
.tmp-flow__lbl { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; font-weight: 500; color: #fff; }
.tmp-flow__lbl .tmh-ph { width: 18px; height: 18px; color: var(--tm-lilac); }
.tmp-flow__lbl small { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--tm-muted); }
.tmp-flow__stack { padding: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--tm-line); }
.tmp-flow__chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.tmp-chip { position: relative; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 6px 8px 6px 6px; border-radius: 9px; background: #26262E; border: 1px solid transparent;
  font-size: 12px; color: var(--tm-ink-2); opacity: .55; transition: opacity .4s, border-color .4s, background .4s; }
.tmp-chip__l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmp-chip__n { position: absolute; right: -4px; top: -7px; padding: 1px 5px; border-radius: 999px; background: var(--tm-purple); color: #fff; font: 500 10px/1.4 var(--tm-font); font-style: normal; }
.tmp-chip__n:empty { display: none; }
.tmp-chip.is-used { opacity: .85; }
.tmp-chip.is-ping { animation: tmp-ping .6s ease-out; }
@keyframes tmp-ping { 0% { box-shadow: 0 0 0 0 rgba(180,150,255,.7); } 100% { box-shadow: 0 0 0 9px rgba(180,150,255,0); } }
.tmp-flow.is-curated .tmp-chip:not(.is-picked) { opacity: .28; }
.tmp-chip.is-picked { opacity: 1; border-color: rgba(180,150,255,.6); background: rgba(110,70,240,.18); }
.tmp-chip.is-moving, .tmp-tile.is-moving { animation: tmp-wobble .5s ease-in-out 2; }
@keyframes tmp-wobble { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

.tmp-flow__engine { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; padding: 10px 4px; text-align: center; }
.tmp-flow__core { position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 24px; background: linear-gradient(150deg, #7C55F5, #5534D6);
  box-shadow: 0 0 0 10px rgba(110,70,240,.14), 0 0 60px rgba(110,70,240,.55); color: #fff; }
.tmp-flow__core::after { content: ''; position: absolute; inset: -10px; border-radius: 30px; border: 1.5px solid rgba(180,150,255,.5); animation: tmp-halo 2.4s ease-out infinite; }
@keyframes tmp-halo { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.tmp-leaf { display: block; width: 40px; height: 40px; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.tmp-flow__steps { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 0; padding: 0; list-style: none; text-align: left; }
.tmp-flow__steps li { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; font-size: 13px; line-height: 1.3; color: var(--tm-muted);
  border: 1px solid transparent; transition: color .3s, background .3s, border-color .3s; }
.tmp-flow__steps .tmh-ph { width: 18px; height: 18px; }
.tmp-flow__steps li.is-on { color: #fff; background: rgba(110,70,240,.22); border-color: rgba(180,150,255,.45); }
.tmp-flow__steps li.is-on .tmh-ph { color: var(--tm-lilac); }
.tmp-flow__steps li.is-done { color: var(--tm-ink-2); }
.tmp-flow__steps li.is-done .tmh-ph { color: var(--tm-green); }
.tmp-flow__log { min-height: 3.2em; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--tm-ink-2); }
.tmp-flow__log b { color: #fff; font-weight: 500; }
.tmp-flow__log.is-in { animation: tmp-fade .4s ease both; }
@keyframes tmp-fade { from { opacity: 0; transform: translateY(4px); } }

.tmp-flow__menu { display: flex; flex-direction: column; padding: 14px; border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(160deg, #3C4172 0%, #47395F 55%, #354469 100%); box-shadow: 0 24px 60px -24px rgba(0,0,0,.7); }
.tmp-flow__menu .tmp-flow__lbl small { margin-left: 6px; }
.tmp-flow__tiles { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 4px; align-content: start; margin: 0; padding: 12px 6px; list-style: none;
  border-radius: 14px; background: rgba(28,28,42,.5); }
.tmp-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 6px 2px; text-align: center; font-size: 12px; color: #fff; }
.tmp-tile__ic, .tmp-tile__l { opacity: 0; transition: opacity .3s; }
.tmp-tile::before { content: ''; position: absolute; top: 6px; left: 50%; width: 36px; height: 36px; margin-left: -18px; border-radius: 9px; border: 1.5px dashed rgba(255,255,255,.22); transition: opacity .3s; }
.tmp-tile.is-in .tmp-tile__ic, .tmp-tile.is-in .tmp-tile__l { opacity: 1; }
.tmp-tile.is-in::before { opacity: 0; }
.tmp-tile__l { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmp-tile__b { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); padding: 1px 6px; border-radius: 999px; font: 500 10px/1.4 var(--tm-font); font-style: normal; white-space: nowrap; }
.tmp-tile__b:empty { display: none; }
.tmp-tile.is-moving .tmp-tile__b { background: #1C1C22; color: var(--tm-red-soft); border: 1px solid rgba(255,58,94,.5); }
.tmp-tile.is-followed .tmp-tile__b { background: #1C1C22; color: var(--tm-green); border: 1px solid rgba(79,245,145,.5); }
.tmp-tile.is-followed .tmh-app { box-shadow: 0 0 0 2px var(--tm-green), 0 2px 6px rgba(0,0,0,.35); }
.tmp-fly { position: absolute; z-index: 5; pointer-events: none; transform-origin: 0 0; transition: transform .62s cubic-bezier(.5,0,.2,1); }
.tmp-fly .tmh-app { box-shadow: 0 10px 24px rgba(0,0,0,.5), 0 0 0 3px rgba(180,150,255,.6); }
.tmp-flow__teams { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tmp-flow__teams button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.2); color: var(--tm-ink-2); font: 500 12px/1 var(--tm-font); cursor: pointer; }
.tmp-flow__teams button .tmh-ph { width: 14px; height: 14px; }
.tmp-flow__teams button[aria-selected="true"] { background: #fff; color: #1D1D23; border-color: #fff; }

/* hero tile sizes reused (tmh-app is styled by the hero stylesheet; repeat here so the home sections work alone) */
.tmp .tmh-app { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.tmp .tmh-app svg { width: 60%; height: 60%; } .tmp .tmh-app img { width: 70%; height: 70%; object-fit: contain; display: block; }
.tmp .tmh-mono { font: 700 11px/1 var(--tm-font); }
.tmp .tmh-app--s { width: 20px; height: 20px; border-radius: 5px; } .tmp .tmh-app--s .tmh-mono { font-size: 7.5px; }
.tmp .tmh-app--l { width: 36px; height: 36px; border-radius: 9px; } .tmp .tmh-app--l .tmh-mono { font-size: 13px; }

/* ---------- number funnel ---------- */
.tmp-funnel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(56px, 7vw, 96px); }
.tmp-funnel__rows { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tmp-funnel__rows li { display: grid; grid-template-columns: clamp(92px, 9vw, 132px) minmax(0, 1fr); align-items: center; gap: 4px 18px; }
.tmp-funnel__rows b { grid-row: 1 / 3; font-size: clamp(30px, 3vw, 44px); font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; text-align: right; }
.tmp-funnel__rows span { font-size: clamp(15px, 1.25vw, 18px); font-weight: 300; color: var(--tm-ink-2); }
.tmp-funnel__rows li::after { content: ''; display: block; grid-column: 2; height: 8px; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, var(--tm-purple), var(--tm-lilac));
  transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.tmp-funnel__rows li:nth-child(2)::after { transition-delay: .15s; } .tmp-funnel__rows li:nth-child(3)::after { transition-delay: .3s; }
.tmp-funnel__rows li:nth-child(4)::after { transition-delay: .45s; } .tmp-funnel__rows li:nth-child(5)::after { transition-delay: .6s; }
.tmp-funnel.is-in li::after, .tmp:not(.tmp-js) .tmp-funnel li::after { transform: none; }
.tmp-funnel__rows li.is-today::after { background: var(--tm-green); box-shadow: 0 0 14px rgba(79,245,145,.5); }
.tmp-funnel__rows li.is-today b, .tmp-funnel__rows li.is-today span { color: var(--tm-green); }
.tmp-funnel__rows { gap: 18px; }
.tmp-funnel__copy p { margin: 0 0 16px; font-size: 17px; font-weight: 300; color: var(--tm-ink-2); }

/* ---------- steps + cards ---------- */
.tmp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: clamp(56px, 7vw, 96px) 0 0; padding: 0; list-style: none; counter-reset: s; }
.tmp-steps li { position: relative; padding: 22px 20px 22px; border-radius: 18px; background: var(--tm-surface); border: 1px solid var(--tm-line); }
.tmp-steps li:not(:last-child)::after { content: ''; position: absolute; z-index: 1; right: -12px; top: 38px; width: 10px; height: 10px; border-top: 2px solid var(--tm-lilac); border-right: 2px solid var(--tm-lilac); transform: rotate(45deg); }
.tmp-steps__n { position: absolute; right: 16px; top: 14px; font-size: 40px; font-weight: 300; color: rgba(180,150,255,.28); line-height: 1; }
.tmp-steps p { margin: 16px 0 0; font-size: 16px; font-weight: 300; color: var(--tm-ink-2); }
.tmp-steps strong, .tmp-cards strong { font-weight: 500; color: #fff; }
.tmp-steps li:last-child { background: linear-gradient(150deg, rgba(79,245,145,.12), transparent 70%), var(--tm-surface); border-color: rgba(79,245,145,.3); }
.tmp-steps li:last-child .tmp-ic { color: var(--tm-green); background: rgba(79,245,145,.1); border-color: rgba(79,245,145,.3); }
.tmp-cards { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.tmp-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tmp-cards li { padding: 22px 20px; border-radius: 18px; background: var(--tm-surface); border: 1px solid var(--tm-line); }
.tmp-cards h4 { margin: 16px 0 8px; font-size: 20px; font-weight: 500; color: #fff; }
.tmp-cards p { margin: 0; font-size: 15.5px; font-weight: 300; color: var(--tm-ink-2); }
.tmp-cards li:hover { border-color: rgba(180,150,255,.35); }
.tmp-result { margin-top: 8px; }
.tmp-result ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.tmp-result li { display: flex; gap: 12px; align-items: flex-start; padding: 18px 20px; border-radius: 16px; background: rgba(79,245,145,.06); border: 1px solid rgba(79,245,145,.22);
  font-size: 17px; font-weight: 400; color: #fff; line-height: 1.4; }
.tmp-result .tmh-ph { width: 24px; height: 24px; color: var(--tm-green); margin-top: -1px; }

/* ---------- value section ---------- */
.tmp-value { background: radial-gradient(70% 50% at 50% 0%, rgba(255,58,94,.08), transparent 70%), var(--tm-bg-2); }
.tmp-challenges blockquote { margin: 0; font-size: 15.5px; font-weight: 300; font-style: italic; color: var(--tm-ink-2); line-height: 1.5; }

/* ---------- secure by design ---------- */
.tmp-secure { background: radial-gradient(60% 60% at 80% 30%, rgba(79,245,145,.06), transparent 70%), var(--tm-bg); }
.tmp-secure__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: clamp(36px, 4vw, 56px); }
.tmp-secure__copy p { margin: 18px 0 0; font-size: 17px; font-weight: 300; color: var(--tm-ink-2); }
.tmp-secure__copy strong { font-weight: 500; color: #fff; }
.tmp-stores { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tmp-stores li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--tm-surface); border: 1px solid var(--tm-line); font-size: 17px; }
.tmp-stores .tmh-ph { width: 20px; height: 20px; color: var(--tm-lilac); }
.tmp-arch { margin: 0; padding: clamp(16px, 2vw, 24px); border-radius: 22px; background: var(--tm-bg-2); border: 1px solid var(--tm-line); }
.tmp-arch__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.tmp-arch__box { position: relative; padding: 16px; border-radius: 16px; background: var(--tm-surface); border: 1px solid var(--tm-line); }
.tmp-arch__box > b { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 500; }
.tmp-arch__box ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--tm-ink-2); }
.tmp-arch__box li { display: flex; align-items: center; gap: 8px; }
.tmp-arch__box .tmh-ph { width: 16px; height: 16px; color: var(--tm-muted); }
.tmp-arch__clients::after, .tmp-arch__tm::after { content: ''; position: absolute; z-index: 1; right: -12px; top: 50%; width: 9px; height: 9px; margin-top: -5px;
  border-top: 2px solid var(--tm-lilac); border-right: 2px solid var(--tm-lilac); transform: rotate(45deg); }
.tmp-arch__mid { display: flex; flex-direction: column; gap: 10px; }
.tmp-arch__tm { flex: 1; text-align: center; border-color: rgba(180,150,255,.5); background: linear-gradient(160deg, rgba(110,70,240,.35), rgba(110,70,240,.12)); }
.tmp-arch__tm .tmp-leaf { width: 30px; height: 30px; margin: 0 auto 6px; color: var(--tm-lilac); }
.tmp-arch__tm > b { margin-bottom: 2px; }
.tmp-arch__tm small { display: block; margin-bottom: 12px; font-size: 12px; color: var(--tm-ink-2); }
.tmp-arch__tm ul { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tmp-arch__tm li { padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.25); color: #fff; font-size: 12.5px; }
.tmp-arch__never { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--tm-red-soft); }
.tmp-arch__never .tmh-ph { width: 15px; height: 15px; }
.tmp-arch__apps .tmh-ph { color: var(--tm-green); }
.tmp-arch__path { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; padding: 10px 14px; border-radius: 12px;
  color: var(--tm-green); font-size: 13.5px; }
.tmp-arch__path .tmh-ph { width: 16px; height: 16px; }
.tmp-arch figcaption { margin-top: 12px; font-size: 13px; color: var(--tm-muted); text-align: center; }
.tmp-secure__note { text-wrap: pretty; max-width: 46em; margin: clamp(40px, 5vw, 64px) 0 18px; font-size: clamp(18px, 1.6vw, 22px); font-weight: 300; color: #fff; }
.tmp-trust { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tmp-trust li { display: flex; flex-direction: column; gap: 6px; padding: 18px 16px; border-radius: 16px; background: var(--tm-surface); border: 1px solid var(--tm-line); }
.tmp-trust .tmh-ph { width: 26px; height: 26px; color: var(--tm-green); margin-bottom: 6px; }
.tmp-trust b { font-size: 15px; font-weight: 500; }
.tmp-trust span { font-size: 13.5px; color: var(--tm-ink-2); line-height: 1.4; }

/* ---------- objection tabs ---------- */
.tmp-tabs { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 48px); margin-top: clamp(36px, 4vw, 56px); }
.tmp-tabs__list { display: flex; flex-direction: column; gap: 8px; }
.tmp-tabs__list button { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--tm-line); background: var(--tm-surface);
  color: var(--tm-ink-2); font: italic 400 18px/1.25 var(--tm-font); text-align: left; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.tmp-tabs__list button .tmh-ph { width: 22px; height: 22px; font-style: normal; color: var(--tm-muted); }
.tmp-tabs__list button:hover { border-color: rgba(180,150,255,.4); }
.tmp-tabs__list button[aria-selected="true"] { color: #fff; border-color: var(--tm-lilac); background: rgba(110,70,240,.22); }
.tmp-tabs__list button[aria-selected="true"] .tmh-ph { color: var(--tm-lilac); }
.tmp-tabs__panel { padding: clamp(22px, 3vw, 36px); border-radius: 20px; background: var(--tm-surface); border: 1px solid var(--tm-line); animation: tmp-fade .35s ease; }
.tmp-tabs__panel p { margin: 0 0 14px; font-size: clamp(16px, 1.3vw, 19px); font-weight: 300; color: var(--tm-ink-2); }
.tmp-tabs__panel strong { font-weight: 500; color: #fff; }
.tmp-tabs__short { margin: 22px 0 0 !important; padding-top: 18px; border-top: 1px solid var(--tm-line); color: #fff !important; font-weight: 400 !important; }
.tmp-qs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.tmp-qs li { padding: 12px 14px; border-radius: 12px; background: #1C1C22; font-size: 15px; font-style: italic; color: var(--tm-red-soft); border: 1px dashed rgba(255,58,94,.4); }

/* ---------- close + footer ---------- */
.tmp-close { text-align: center; background: radial-gradient(90% 90% at 50% 120%, rgba(110,70,240,.55), transparent 70%), linear-gradient(180deg, #212125, #231158); }
.tmp-close .tmp-h { margin: 0 auto; font-size: clamp(30px, 3.4vw, 48px); }
.tmp-foot { padding: 56px 0 40px; background: #17171B; border-top: 1px solid var(--tm-line); font-size: 15px; }
.tmp-foot__grid { display: grid; grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); gap: 28px; }
.tmp-foot__logo svg { height: 24px; width: auto; display: block; }
.tmp-foot__brand p { margin: 16px 0 0; color: var(--tm-muted); font-size: 14px; }
.tmp-foot nav { display: flex; flex-direction: column; gap: 10px; }
.tmp-foot nav b { font-weight: 500; color: #fff; margin-bottom: 4px; }
.tmp-foot nav a { display: inline-flex; align-items: center; gap: 8px; color: var(--tm-ink-2); text-decoration: none; }
.tmp-foot nav a:hover { color: var(--tm-lilac); }
.tmp-foot nav a .tmh-ph { width: 17px; height: 17px; }
.tmp-foot__funding { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--tm-line); }
.tmp-foot__funding-link { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; border-radius: 8px; transition: opacity .2s; }
.tmp-foot__funding-link:hover { opacity: .85; }
.tmp-foot__funding-link:focus-visible { outline: 2px solid #B496FF; outline-offset: 4px; }
.tmp-foot__funding img { display: block; height: 48px; width: auto; max-width: 100%; }
.tmp-foot__llmb { border-radius: 8px; }

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  .tmp-founders, .tmp-funnel, .tmp-secure__grid, .tmp-tabs { grid-template-columns: minmax(0, 1fr); }
  .tmp-flow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tmp-flow__engine { grid-column: 1 / -1; grid-row: 1; flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .tmp-flow__steps { flex-direction: row; flex-wrap: wrap; width: auto; justify-content: center; }
  .tmp-flow__core { width: 64px; height: 64px; border-radius: 18px; } .tmp-flow__core .tmp-leaf { width: 30px; height: 30px; }
  .tmp-flow__log { flex-basis: 100%; min-height: 2.6em; }
  .tmp-steps, .tmp-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tmp-steps li:nth-child(2)::after { display: none; }
  .tmp-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tmp-tabs__list { flex-direction: row; flex-wrap: wrap; }
  .tmp-tabs__list button { flex: 1 1 200px; min-height: 52px; font-size: 16px; }
  .tmp-foot__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tmp-foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
  .tmp-sec { padding: 64px 0; }
  .tmp-flow { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .tmp-flow__steps li { font-size: 12px; padding: 7px 9px; }
  .tmp-flow__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tmp-flow__chips li:nth-child(n+13) { display: none; }
  .tmp-steps, .tmp-cards--4, .tmp-result ul, .tmp-arch__row, .tmp-qs { grid-template-columns: minmax(0, 1fr); }
  .tmp-arch__clients::after, .tmp-arch__tm::after { right: auto; left: 50%; top: auto; bottom: -13px; margin: 0 0 0 -5px; transform: rotate(135deg); }
  .tmp-steps li:not(:last-child)::after { right: auto; left: 34px; top: auto; bottom: -12px; transform: rotate(135deg); display: block; }
  .tmp-trust { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tmp-trust li:last-child { grid-column: 1 / -1; }
  .tmp-tabs__list { flex-direction: column; }
  .tmp-tabs__list button { flex: none; }
  .tmp-btn { min-height: 46px; font-size: 16px; padding: 0 18px; }
  .tmp-ctas .tmp-btn { width: 100%; }
  .tmp-funnel__rows li { grid-template-columns: 88px minmax(0, 1fr); gap: 4px 12px; }
  .tmp-funnel__rows b { font-size: 28px; }
  .tmp-marquee img { height: calc(var(--h, 36px) * .8); }
  .tmp-foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tmp *, .tmp *::before, .tmp *::after { animation: none !important; transition-duration: .01ms !important; }
  .tmp-marquee__track { flex-wrap: wrap; justify-content: center; width: auto; padding: 0 var(--tm-gutter); }
  .tmp-marquee__track [aria-hidden="true"] { display: none; }
  .tmp-marquee { -webkit-mask-image: none; mask-image: none; }
  .tmp-js .tmp-rv { opacity: 1; transform: none; }
}

/* ==========================================================================
   Digital friction metric: the time one person loses, in blocks of what Teamenu costs per person
   ========================================================================== */
.tmm { --red: #FF5470; --red-bg: rgba(255,58,94,.12); --green: #4FF591; --green-bg: rgba(79,245,145,.1); --line: rgba(255,255,255,.1); --muted: #A3A3B2;
  margin-top: clamp(36px, 4vw, 56px); overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: #212128; box-shadow: 0 30px 80px -30px rgba(0,0,0,.7); }
.tmm-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding: clamp(24px, 4vw, 44px) clamp(20px, 4vw, 44px) 20px; }
.tmm-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--tm-lilac); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.tmm-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tmm-h { margin: 0; font-size: clamp(28px, 3.4vw, 44px); font-weight: 300; line-height: 1.08; letter-spacing: -.02em; }
.tmm-h strong { font-weight: 500; color: var(--tm-lilac); }
.tmm-toggle-label { margin: 0 0 8px 4px; color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.tmm-toggle { display: flex; gap: 4px; padding: 4px; border-radius: 13px; background: rgba(0,0,0,.3); border: 1px solid var(--line); white-space: nowrap; }
.tmm-toggle button { border: 0; border-radius: 9px; padding: 11px 14px; background: transparent; color: var(--tm-ink-2); font: 500 13px/1 var(--tm-font); cursor: pointer; transition: background .25s, color .25s; }
.tmm-toggle button[aria-pressed="true"] { background: #fff; color: #1D1D23; }
.tmm[data-mode="with"] .tmm-toggle button[aria-pressed="true"] { background: var(--tm-purple); color: #fff; }
.tmm-body { padding: 0 clamp(14px, 3vw, 30px) 18px; }
/* minutes + source */
.tmm-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 24px; padding: 0 clamp(6px, 1vw, 14px) 16px; }
.tmm-mins-l { margin: 0 0 8px; color: var(--muted); font-size: 10.5px; font-weight: 500; letter-spacing: .055em; text-transform: uppercase; }
.tmm-mins-btns { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(0,0,0,.3); border: 1px solid var(--line); }
.tmm-mins-btns button { flex: 1 1 auto; min-width: 44px; min-height: 40px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--tm-ink-2);
  font: 500 14px/1 var(--tm-font); font-variant-numeric: tabular-nums; cursor: pointer; transition: background .2s, color .2s; }
.tmm-mins-btns button:hover { background: rgba(255,255,255,.06); }
.tmm-mins-btns button[aria-pressed="true"] { background: var(--red); color: #fff; }
.tmm[data-mode="with"] .tmm-mins-btns button[aria-pressed="true"] { background: var(--green); color: #0E2A1B; }
.tmm-source { display: flex; gap: 8px; flex: 1 1 320px; max-width: 46em; margin: 0; font-size: 12.5px !important; line-height: 1.45 !important; color: var(--muted); }
.tmm-source .tmh-ph { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--tm-lilac); }
.tmm-source a { color: var(--tm-lilac); white-space: nowrap; }
/* the sum, the sentence and the blocks */
.tmm-stage { padding: clamp(16px, 2.4vw, 28px); border-radius: 20px; background: #2A2A33; border: 1px solid var(--line); }
.tmm-sum { margin: 0; font-size: clamp(16px, 1.7vw, 21px) !important; font-weight: 300; line-height: 1.6 !important; color: var(--tm-ink-2); }
.tmm-sum b { font-weight: 500; color: #fff; } .tmm-sum i { font-style: normal; margin: 0 .2em; color: var(--muted); }
.tmm-sum strong { display: inline-block; margin-left: .1em; font-size: clamp(30px, 3.4vw, 46px); font-weight: 500; line-height: 1; vertical-align: -.12em; color: var(--red); transition: color .5s; }
.tmm[data-mode="with"] .tmm-sum strong { color: var(--green); }
.tmm-sum small { display: block; font-size: 12.5px; color: var(--muted); }
.tmm-say { margin: 16px 0 0; font-size: clamp(19px, 2vw, 26px) !important; font-weight: 300; line-height: 1.3 !important; color: #fff; }
.tmm-say b { font-weight: 500; color: var(--red); } .tmm[data-mode="with"] .tmm-say b { color: var(--green); }
.tmm-say em { font-style: normal; font-weight: 500; color: var(--tm-lilac); }
.tmm-blocks { --bs: 58px; display: flex; flex-wrap: wrap; gap: 6px; min-height: var(--bs); margin: 22px 0 0; padding: 0; list-style: none; }
.tmm-blocks.is-many { --bs: 30px; gap: 5px; }
.tmm-blocks li { position: relative; flex: none; width: var(--bs); height: var(--bs); border-radius: 8px; background: rgba(255,255,255,.05); overflow: hidden; }
.tmm-blocks.is-in li { animation: tmm-pop .45s cubic-bezier(.2,.8,.2,1.3) both; animation-delay: calc(var(--i) * var(--step, 60ms)); }
@keyframes tmm-pop { from { opacity: 0; transform: scale(.6); } }
.tmm-blocks li i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--part, 100%); border-radius: 8px; background: var(--red);
  transition: background .5s; transition-delay: calc(min(var(--i) * 30ms, 1200ms) + .2s); }
.tmm[data-mode="with"] .tmm-blocks li i { background: var(--green); }
.tmm[data-mode="with"] .tmm-blocks li.is-cost i { background: linear-gradient(90deg, var(--tm-purple) var(--lic, 100%), transparent var(--lic, 100%)), var(--tm-hatch); transition-delay: 0s; }   /* licence | curation time */
.tmm-blocks li span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12.5px; font-weight: 500; color: #fff; opacity: 0; transition: opacity .4s; }
.tmm[data-mode="with"] .tmm-blocks li span { opacity: 1; }
.tmm-key { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; }
.tmm-key p { display: flex; gap: 9px; align-items: flex-start; max-width: 46em; margin: 0; font-size: 13.5px !important; line-height: 1.45 !important; color: var(--tm-ink-2); }
.tmm-key b { font-weight: 500; color: #fff; }
.tmm-key i { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 4px; }
.tmm-key .is-red { background: var(--red); } .tmm-key .is-purple { background: var(--tm-purple); } .tmm-key .is-hatch { background: var(--tm-hatch); } .tmm-key .is-green { background: var(--green); }
.tmm[data-mode="without"] .tmm-only-with, .tmm[data-mode="with"] .tmm-only-without { display: none; }
/* three numbers */
.tmm-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.tmm-kpi { min-width: 0; padding: 15px 16px 14px; border: 1px solid var(--line); border-radius: 14px; background: #24242C; }
.tmm-kpi p { margin: 0; color: var(--muted); font-size: 10.5px !important; line-height: 1.3; font-weight: 500; letter-spacing: .055em; text-transform: uppercase; }
.tmm-kpi b { display: block; margin-top: 9px; color: var(--red); font-size: clamp(26px, 3vw, 36px); line-height: 1; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tmm[data-mode="with"] .tmm-kpi b { color: var(--green); } .tmm[data-mode="with"] .tmm-kpi.is-cost b { color: var(--tm-lilac); }
.tmm[data-mode="with"] .tmm-kpi { border-color: rgba(79,245,145,.3); }
.tmm-kpi small { display: block; margin-top: 7px; font-size: 12.5px; line-height: 1.4; color: var(--tm-ink-2); }
.tmm-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(20px, 4vw, 44px) 18px; border-top: 1px solid rgba(255,255,255,.06); }
.tmm-note { margin: 0; font-size: 12px !important; color: var(--muted); line-height: 1.45; }
.tmm-auto { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--tm-ink-2);
  font: 500 11px/1 var(--tm-font); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.tmm-auto-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-bg); }
.tmm.is-manual .tmm-auto-dot { background: #8F8FA3; box-shadow: none; }
.tmm-progress { height: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
.tmm-progress-bar { width: 0; height: 100%; background: linear-gradient(90deg, var(--tm-purple), var(--tm-lilac)); }
.tmm-progress-bar.run { animation: tmm-progress 22s linear forwards; }
.tmm.is-off .tmm-progress-bar.run, .tmm.is-manual .tmm-progress-bar { animation-play-state: paused; }
@keyframes tmm-progress { to { width: 100%; } }
@media (max-width: 860px) {
  .tmm-head { grid-template-columns: 1fr; align-items: start; }
  .tmm-kpis { grid-template-columns: minmax(0, 1fr); }
  .tmm-kpi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; } .tmm-kpi b { margin: 0; } .tmm-kpi small { flex-basis: 100%; margin: 0; }
}
@media (max-width: 480px) {
  .tmm-body { padding: 0 10px 12px; }
  .tmm-toggle { width: 100%; } .tmm-toggle button { flex: 1; padding: 11px 6px; }
  .tmm-mins { width: 100%; } .tmm-mins-btns button { min-width: 0; }
  .tmm-blocks { --bs: 42px; } .tmm-blocks.is-many { --bs: 22px; gap: 4px; }
  .tmm-foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .tmm-progress-bar { width: 100%; } .tmm-blocks.is-in li { animation: none; } .tmm-blocks li i { transition: none; } }

/* ---------- process graphic: How Teamenu spots resources ---------- */
.tmp-process { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.tmp-process li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 12px; text-align: center; }
.tmp-process li:not(:last-child)::before { content: ''; position: absolute; top: 39px; left: calc(50% + 50px); right: calc(-50% + 50px); height: 2px;
  background: linear-gradient(90deg, var(--tm-lilac), rgba(180,150,255,.35)); transform-origin: left; transform: scaleX(var(--pl, 1)); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.tmp-process li:not(:last-child)::after { content: ''; position: absolute; top: 35px; right: calc(-50% + 52px); width: 9px; height: 9px; border-top: 2px solid var(--tm-lilac); border-right: 2px solid var(--tm-lilac);
  transform: rotate(45deg); opacity: var(--pa, 1); transition: opacity .3s .7s; }
.tmp-process__node { position: relative; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; color: #fff;
  background: radial-gradient(circle at 35% 30%, #8C6BFF, #5534D6 70%); box-shadow: 0 0 0 8px rgba(110,70,240,.14), 0 14px 40px -10px rgba(110,70,240,.7); }
.tmp-process__node .tmh-ph { width: 34px; height: 34px; }
.tmp-process__node em { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: #fff; color: #3A2A78; font: 500 14px/1 var(--tm-font); font-style: normal; box-shadow: 0 0 0 3px var(--tm-bg); }
.tmp-process li.is-end .tmp-process__node { background: radial-gradient(circle at 35% 30%, #7DFAB0, #1FB866 70%); color: #0E2A1B; box-shadow: 0 0 0 8px rgba(79,245,145,.12), 0 14px 40px -10px rgba(79,245,145,.6); }
.tmp-process p { margin: 22px 0 0; max-width: 17em; font-size: 16px; font-weight: 300; color: var(--tm-ink-2); }
.tmp-process strong { font-weight: 500; color: #fff; }
.tmp-js .tmp-process:not(.is-in) li { --pl: 0; --pa: 0; }
.tmp-js .tmp-process li .tmp-process__node { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.tmp-js .tmp-process:not(.is-in) .tmp-process__node { transform: scale(.6); }
.tmp-process li:nth-child(2)::before, .tmp-process li:nth-child(2) .tmp-process__node { transition-delay: .35s; }
.tmp-process li:nth-child(3)::before, .tmp-process li:nth-child(3) .tmp-process__node { transition-delay: .7s; }
.tmp-process li:nth-child(4) .tmp-process__node { transition-delay: 1.05s; }
@media (max-width: 860px) {
  .tmp-process { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .tmp-process li { flex-direction: row; align-items: center; gap: 20px; padding: 0; text-align: left; }
  .tmp-process__node { width: 64px; height: 64px; flex: none; } .tmp-process__node .tmh-ph { width: 28px; height: 28px; }
  .tmp-process p { margin: 0; max-width: none; }
  .tmp-process li:not(:last-child)::before { top: 72px; left: 31px; right: auto; width: 2px; height: 20px; transform-origin: top; transform: scaleY(var(--pl, 1)); }
  .tmp-process li:not(:last-child)::after { top: 86px; right: auto; left: 27px; transform: rotate(135deg); }
}

.tmp-foot__audit { color: #FF8197 !important; font-weight: 500; }
.tmp-foot__get { color: var(--tm-lilac) !important; font-weight: 500; }
.tmp-foot__get .tmp-leaf { width: 17px; height: 17px; flex: none; }
.tmp [id] { scroll-margin-top: 80px; }


/* solution cards: bigger, more telling icons + learn more */
.tmp-challenges li { display: flex; flex-direction: column; }
.tmp-sol-ic { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 20px; color: #fff;
  background: radial-gradient(circle at 30% 25%, #8C6BFF, #5534D6 75%); box-shadow: 0 14px 34px -12px rgba(110,70,240,.75); }
.tmp-sol-ic > .tmh-ph { width: 40px; height: 40px; }
.tmp-sol-ic em { position: absolute; right: -10px; bottom: -10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; color: #5534D6; box-shadow: 0 0 0 4px var(--tm-surface); }
.tmp-sol-ic em .tmh-ph { width: 19px; height: 19px; }
.tmp-challenges h4 { margin-top: 24px; }
.tmp-challenges blockquote { flex: 1; }
/* home: the challenges are problems, so they carry the red accent (solutions keep purple) */
.tmp-challenges li { background: linear-gradient(180deg, rgba(255,58,94,.09), rgba(255,58,94,0) 55%), var(--tm-surface); border-color: rgba(255,58,94,.22); transition: border-color .2s; }
.tmp-challenges li:hover { border-color: rgba(255,58,94,.5); }
.tmp-challenges .tmp-sol-ic { background: radial-gradient(circle at 30% 25%, #FF6B85, #C8203F 75%); box-shadow: 0 14px 34px -12px rgba(255,58,94,.7); }
.tmp-challenges .tmp-sol-ic em { color: #C8203F; }
.tmp-challenges blockquote { color: #E6E6EE; font-weight: bold; }
.tmp-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; min-height: 40px; padding: 0 16px; border-radius: 6px;
  border: 1.5px solid rgba(180,150,255,.6); color: #fff; font-size: 15px; font-weight: 500; text-decoration: none; transition: background .2s, border-color .2s; }
.tmp-more .tmh-ph { width: 16px; height: 16px; color: var(--tm-lilac); transition: transform .2s; }
.tmp-more:hover { background: rgba(110,70,240,.25); border-color: var(--tm-lilac); }
.tmp-more:hover .tmh-ph { transform: translateX(3px); }
.tmp-founders > .tmh-teaser { grid-column: 1 / -1; margin-top: 8px; }


/* ==========================================================================
   Teamenu /product page. Builds on home.css (tokens, type, buttons, cards).
   All classes are prefixed .tpp-.
   ========================================================================== */
.tpp code, .tpp pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.tpp-sec { scroll-margin-top: 72px; }
.tpp [id] { scroll-margin-top: 72px; }

/* ---------- hero ---------- */
.tpp-hero { position: relative; padding: calc(72px + clamp(40px, 6vw, 88px)) 0 clamp(56px, 7vw, 96px); overflow: hidden;
  background: radial-gradient(70% 60% at 85% 10%, rgba(110,70,240,.4), transparent 65%), linear-gradient(180deg, #231158 0%, #212125 85%); }
.tpp-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6.4fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.tpp-h1 { margin: 0; font-size: clamp(34px, 3.4vw, 52px); font-weight: 300; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.tpp-h1 strong { font-weight: 500; color: var(--tm-lilac); }
.tpp-lede { margin: 22px 0 0; max-width: 32em; font-size: clamp(17px, 1.4vw, 20px); font-weight: 300; line-height: 1.5; color: var(--tm-ink-2); }
.tpp-for { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.tpp-for li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--tm-line); }
.tpp-for p { margin: 0; font-size: 15.5px; font-weight: 300; color: var(--tm-ink-2); }
.tpp-for b { display: block; margin-bottom: 2px; font-weight: 500; color: #fff; }
.tpp-hero .tmp-ctas { margin-top: 30px; }

/* twin widget */
.tpp-twin { position: relative; padding: 16px; border-radius: 24px; border: 1px solid rgba(255,255,255,.12); background: rgba(20,20,26,.6);
  backdrop-filter: blur(10px); box-shadow: 0 40px 100px -40px rgba(0,0,0,.8); }
.tpp-twin__teams { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tpp-twin__teams button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16);
  background: transparent; color: var(--tm-ink-2); font: 500 13px/1 var(--tm-font); cursor: pointer; }
.tpp-twin__teams button .tmh-ph { width: 16px; height: 16px; }
.tpp-twin__teams button[aria-selected="true"] { background: #fff; color: #1D1D23; border-color: #fff; }
.tpp-twin__panes { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1.15fr); gap: 0; align-items: stretch; }
.tpp-twin__cap { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tm-muted); }
.tpp-twin__cap .tmh-ph { width: 15px; height: 15px; color: var(--tm-lilac); }
.tpp-menu { border-radius: 18px; padding: 12px; background: linear-gradient(160deg, #3C4172 0%, #47395F 55%, #354469 100%); border: 1px solid rgba(255,255,255,.14); }
.tpp-menu__head { display: flex; align-items: center; gap: 9px; margin: 2px 2px 10px; }
.tpp-menu__head b { font-size: 15px; font-weight: 500; }
.tpp-menu__head small { margin-left: auto; font-size: 11px; color: #C7C7D6; }
.tpp-menu__av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #fff; color: #3A2A78; }
.tpp-menu__av .tmh-ph { width: 17px; height: 17px; }
.tpp-menu__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 8px 4px; list-style: none; border-radius: 12px; background: rgba(28,28,42,.5); }
.tpp-tile { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 7px 2px; border: 0; border-radius: 10px; background: transparent;
  color: #fff; font: 400 11.5px/1.2 var(--tm-font); text-align: center; cursor: pointer; transition: background .2s, box-shadow .2s, transform .2s; }
.tpp-tile > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
.tpp-tile.is-hot { background: rgba(180,150,255,.2); box-shadow: inset 0 0 0 1.5px var(--tm-lilac); transform: translateY(-2px); }
.tpp-twin.is-in .tpp-tile { animation: tpp-pop .45s cubic-bezier(.2,.8,.2,1.2) both; animation-delay: calc(var(--d) * 70ms); }
@keyframes tpp-pop { from { opacity: 0; transform: scale(.7); } }
.tpp-twin__bridge { position: relative; display: grid; place-items: center; }
.tpp-twin__bridge i { position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, var(--tm-lilac) 0 6px, transparent 6px 11px); animation: tpp-flow 1s linear infinite; }
.tpp-twin__core { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--tm-purple); color: #fff; box-shadow: 0 0 0 6px rgba(110,70,240,.25); }
.tpp-twin__core .tmp-leaf { width: 16px; height: 16px; }
@keyframes tpp-flow { to { background-position: 11px 0; } }
.tpp-code { margin: 0; padding: 14px; border-radius: 14px; background: #101015; border: 1px solid rgba(255,255,255,.08); color: #C7C7D6; font-size: 11.5px; line-height: 1.55;
  white-space: pre; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.tpp-twin .tpp-code { height: 100%; max-height: 340px; min-height: 280px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tpp-code .j-k { color: #B496FF; } .tpp-code .j-s { color: #9FE8BF; } .tpp-code .j-c { color: #7E7E92; } .tpp-code b { color: #fff; font-weight: 600; }
.tpp-code .j-e { display: inline; border-radius: 4px; transition: background .2s; }
.tpp-code .j-e.is-hot { background: rgba(110,70,240,.35); box-shadow: 0 0 0 3px rgba(110,70,240,.35); }
.tpp-twin.is-in .j-e { animation: tpp-fade .4s ease both; animation-delay: calc(var(--d) * 90ms + 150ms); }
@keyframes tpp-fade { from { opacity: 0; } }
.tpp-twin__note { display: flex; align-items: center; gap: 8px; margin: 12px 2px 0; font-size: 13px; color: var(--tm-muted); }
.tpp-twin__note .tmh-ph { width: 16px; height: 16px; color: var(--tm-lilac); }

/* ---------- what goes in ---------- */
.tpp-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.tpp-filter button { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.03); color: var(--tm-ink-2); font: 500 13.5px/1 var(--tm-font); cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.tpp-filter button .tmh-ph { width: 16px; height: 16px; color: var(--tm-lilac); }
.tpp-filter button small { font-size: 11.5px; font-weight: 400; color: var(--tm-muted); }
.tpp-filter button:hover { border-color: rgba(180,150,255,.5); }
.tpp-filter button[aria-pressed="true"] { background: var(--tm-purple); border-color: var(--tm-purple); color: #fff; }
.tpp-filter button[aria-pressed="true"] .tmh-ph, .tpp-filter button[aria-pressed="true"] small { color: #E5DCFF; }
.tpp-filter__more { flex-basis: 100%; margin: 6px 0 0; font-size: 15px; color: var(--tm-ink-2); }
.tpp-universe { display: flex; flex-direction: column; gap: 10px; margin: 28px 0 8px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tpp-urow { display: flex; gap: 10px; width: max-content; }
.tpp-urow__track { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; animation: tpp-marq var(--dur, 80s) linear infinite; }
.tpp-urow__track.is-rev { animation-direction: reverse; }
.tpp-universe.is-paused .tpp-urow__track, .tpp-universe.is-off .tpp-urow__track { animation-play-state: paused; }
@keyframes tpp-marq { to { transform: translateX(calc(-100% - 10px)); } }
.tpp-uchip { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 12px; background: var(--tm-surface); border: 1px solid var(--tm-line);
  transition: opacity .35s, border-color .35s, background .35s, transform .35s; }
.tpp-uchip b { display: block; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.tpp-uchip small { display: block; max-width: 230px; font-size: 11.5px; color: var(--tm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpp-universe.is-filtered .tpp-uchip { opacity: .22; }
.tpp-universe.is-filtered .tpp-uchip.is-hit { opacity: 1; border-color: var(--tm-lilac); background: rgba(110,70,240,.25); transform: scale(1.04); }
.tpp-envs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 28px 0 0; padding: 0; list-style: none; color: var(--tm-ink-2); font-size: 15px; }
.tpp-envs li { display: inline-flex; align-items: center; gap: 7px; }
.tpp-envs .tmh-ph { width: 18px; height: 18px; color: var(--tm-lilac); }
.tpp-anatomy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(56px, 7vw, 96px); }
.tpp-anatomy .tmp-h3 { margin-top: 0; }
.tpp-anatomy .tmp-h3 span { color: var(--tm-lilac); }
.tpp-anatomy__copy p { font-size: 17px; font-weight: 300; color: var(--tm-ink-2); }
.tpp-entry { padding: 20px; border-radius: 22px; background: var(--tm-bg-2); border: 1px solid var(--tm-line); }
.tpp-entry__card { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; background: linear-gradient(150deg, rgba(110,70,240,.35), rgba(110,70,240,.12)); border: 1px solid rgba(180,150,255,.5); }
.tpp-entry__card b { display: block; font-size: 16px; font-weight: 500; }
.tpp-entry__card code { display: block; margin-top: 3px; font-size: 12px; color: #C7C7D6; word-break: break-all; }
.tpp-entry__kept { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.tpp-entry__kept li { display: flex; gap: 9px; padding: 11px 12px; border-radius: 12px; background: var(--tm-surface); font-size: 13px; color: var(--tm-muted); line-height: 1.35; }
.tpp-entry__kept b { display: block; color: #fff; font-weight: 500; font-size: 13.5px; }
.tpp-entry__kept .tmh-ph { width: 18px; height: 18px; flex: none; color: var(--tm-green); }
.tpp-entry__not { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 12px; list-style: none; border-radius: 12px; border: 1.5px dashed rgba(255,58,94,.4); }
.tpp-entry__not::before { content: 'Never stored'; flex-basis: 100%; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tm-red-soft); }
.tpp-entry__not li { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(255,58,94,.1); color: var(--tm-red-soft); font-size: 12.5px; text-decoration: line-through; text-decoration-color: rgba(255,129,151,.6); }
.tpp-entry__not .tmh-ph { width: 13px; height: 13px; }

/* ---------- where it appears ---------- */
.tpp-where { background: var(--tm-bg-2); }
.tpp-where__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(32px, 4vw, 48px); }
.tpp-where__who { margin-bottom: 22px; }
.tpp-where__who p { margin: 0 0 8px; font-size: 17px; font-weight: 300; color: var(--tm-ink-2); }
.tpp-where__who b { font-weight: 500; color: #fff; }
.tpp-sso .tmh-ph { width: 16px; height: 16px; margin-right: 4px; vertical-align: -2px; color: var(--tm-lilac); }
.tpp-surfaces { display: flex; flex-direction: column; gap: 6px; }
.tpp-surfaces button { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--tm-line); background: var(--tm-surface);
  color: var(--tm-ink-2); font: 500 15px/1 var(--tm-font); text-align: left; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.tpp-surfaces button .tmh-ph { width: 20px; height: 20px; color: var(--tm-muted); }
.tpp-surfaces button[aria-selected="true"] { color: #fff; border-color: var(--tm-lilac); background: rgba(110,70,240,.22); }
.tpp-surfaces button[aria-selected="true"] .tmh-ph { color: var(--tm-lilac); }
.tpp-stage { display: grid; place-items: center; min-height: 440px; padding: clamp(16px, 3vw, 36px); border-radius: 24px;
  background: radial-gradient(60% 70% at 50% 45%, rgba(110,70,240,.28), transparent 70%), #17171C; border: 1px solid var(--tm-line); }
.tpp-stage.is-in .tpp-mock { animation: tpp-rise .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes tpp-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.tpp-mock { width: 100%; max-width: 560px; overflow: hidden; color: #fff; box-shadow: 0 30px 70px -24px rgba(0,0,0,.8); }
.tpp-mtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 4px; margin: 0; padding: 10px 6px; list-style: none; border-radius: 12px; background: rgba(28,28,42,.5); }
.tpp-mtiles li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; text-align: center; animation: tpp-pop .4s cubic-bezier(.2,.8,.2,1.2) both; animation-delay: calc(var(--d) * 60ms + 200ms); }
.tpp-mhead { display: flex; align-items: center; gap: 9px; margin: 2px 2px 8px; }
.tpp-mhead b { display: block; font-size: 14px; font-weight: 500; } .tpp-mhead small { display: block; font-size: 11.5px; color: #C7C7D6; }
.tpp-mhead__av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tm-lilac); color: #3A2A78; }
.tpp-mhead__av .tmh-ph { width: 16px; height: 16px; }
.tpp-mock__bar { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; background: #2A2A31; }
.tpp-mock__bar > i { width: 10px; height: 10px; border-radius: 50%; background: #55555F; }
.tpp-mock__url { flex: 1; display: flex; align-items: center; gap: 6px; height: 24px; margin-left: 8px; padding: 0 10px; border-radius: 12px; background: #1D1D23; color: #A6A6B3; font-size: 11.5px; }
.tpp-mock__url .tmh-ph { width: 12px; height: 12px; }
.tpp-mock__ext .tmp-leaf { width: 18px; height: 18px; color: var(--tm-lilac); }
.tpp-mock--browser { border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: #1D1D23; }
.tpp-mock__body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; }
.tpp-mock__page { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: #F1F1F4; }
.tpp-mock__page i { height: 9px; border-radius: 5px; background: #D9D9E0; } .tpp-mock__page i:first-child { width: 60%; height: 14px; background: #C9C9D3; }
.tpp-mock__page b { height: 70px; border-radius: 10px; background: #E2E2E9; }
.tpp-mock__side { padding: 12px; background: linear-gradient(160deg, #3C4172 0%, #47395F 55%, #354469 100%); }
.tpp-mock--teams { border-radius: 10px; border: 1px solid #3D3D3D; background: #1F1F1F; font-family: 'Segoe UI', var(--tm-font); }
.tpp-mock__tbar { display: grid; place-items: center; height: 36px; background: #33344A; } .tpp-mock__tbar span { width: 50%; padding: 4px; border-radius: 4px; background: #1F1F1F; color: #ADADAD; font-size: 11px; text-align: center; }
.tpp-mock__tw { display: grid; grid-template-columns: 52px minmax(0, 1fr); }
.tpp-mock__tw nav { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; background: #2B2B2B; color: #ADADAD; }
.tpp-mock__tw nav span { display: grid; place-items: center; width: 52px; height: 38px; } .tpp-mock__tw nav .tmh-ph { width: 19px; height: 19px; }
.tpp-mock__tw nav .is-on { position: relative; color: #fff; background: #1F1F1F; } .tpp-mock__tw nav .is-on::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #7F85F5; }
.tpp-mock__tw nav .tmp-leaf { width: 19px; height: 19px; }
.tpp-mock__tmain { padding: 0 12px 12px; } .tpp-mock__tmain .tpp-mtiles { background: #292929; }
.tpp-mock__ttabs { display: flex; align-items: center; gap: 12px; height: 44px; margin-bottom: 8px; border-bottom: 1px solid #3D3D3D; font-size: 12.5px; color: #ADADAD; }
.tpp-mock__ttabs b { color: #fff; font-size: 14px; } .tpp-mock__ttabs .is-on { color: #fff; font-weight: 600; box-shadow: inset 0 -2px #7F85F5; height: 100%; display: flex; align-items: center; }
.tpp-mock--slack { display: grid; grid-template-columns: 150px minmax(0, 1fr); border-radius: 10px; background: #1A1D21; border: 1px solid #383838; }
.tpp-mock--slack nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; background: #3F0E40; font-size: 12.5px; color: #CFC3CF; }
.tpp-mock--slack nav b { margin: 0 6px 8px; color: #fff; font-size: 14px; } .tpp-mock--slack nav span { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 5px; }
.tpp-mock--slack nav .is-on { background: #1164A3; color: #fff; } .tpp-mock--slack nav .tmh-ph { width: 14px; height: 14px; }
.tpp-mock__smain { padding: 12px; } .tpp-mock__smain .tpp-mtiles { background: #222529; }
.tpp-mock__stitle { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #383838; } .tpp-mock__stitle small { color: #ABABAD; font-size: 11.5px; }
.tpp-mock--phone { position: relative; max-width: 290px; padding: 32px 12px 0; border-radius: 40px; border: 8px solid #0E0E12; box-shadow: 0 0 0 2px #3A3A44, 0 30px 70px -24px rgba(0,0,0,.8);
  background: linear-gradient(160deg, #3C4172 0%, #47395F 55%, #354469 100%); }
.tpp-mock__notch { position: absolute; left: 50%; top: 6px; width: 84px; height: 20px; margin-left: -42px; border-radius: 12px; background: #0E0E12; }
.tpp-mock__search { display: flex; align-items: center; gap: 8px; height: 36px; margin-bottom: 10px; padding: 0 12px; border-radius: 18px; background: #1D1D23; color: #B9B9C6; font-size: 13px; }
.tpp-mock__search .tmh-ph { width: 16px; height: 16px; }
.tpp-mtiles.is-3 { margin-bottom: 12px; }
.tpp-mock__pbar { display: flex; align-items: center; justify-content: center; gap: 6px; height: 46px; margin: 0 -12px; background: #1D1D23; color: var(--tm-lilac); font-weight: 500; }
.tpp-mock__pbar .tmp-leaf { width: 16px; height: 16px; }
.tpp-mock--term { border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: #101015; }
.tpp-mock--term .tpp-code { border: 0; border-radius: 0; font-size: 12px; min-height: 280px; }

/* ---------- set-up journey ---------- */
.tpp-journey { margin-top: clamp(36px, 4vw, 56px); }
.tpp-journey__map { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; padding: 0 0 64px; list-style: none; }
.tpp-journey__map::before { content: ''; position: absolute; left: calc(100% / 14); right: calc(100% / 14); top: 36px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.1); }
.tpp-journey__map::after { content: ''; position: absolute; left: calc(100% / 14); top: 36px; height: 3px; border-radius: 3px; width: calc((100% - 100% / 7) * var(--p, 0));
  background: linear-gradient(90deg, var(--tm-purple), var(--tm-lilac)); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.tpp-journey__map li { position: relative; z-index: 1; display: flex; justify-content: center; }
.tpp-journey__map button { display: flex; flex-direction: column; align-items: center; gap: 10px; border: 0; background: none; color: var(--tm-ink-2); font: 500 15px/1.2 var(--tm-font); cursor: pointer; }
.tpp-jn { position: relative; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: #2A2A33; border: 2px solid rgba(255,255,255,.14); color: var(--tm-muted);
  transition: background .35s, border-color .35s, color .35s, transform .35s, box-shadow .35s; }
.tpp-jn .tmh-ph { width: 30px; height: 30px; }
.tpp-jn em { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #3A3A46; color: #fff; font: 500 12px/1 var(--tm-font); font-style: normal; }
.tpp-journey__map li.is-done .tpp-jn { border-color: var(--tm-lilac); color: var(--tm-lilac); }
.tpp-journey__map button[aria-selected="true"] { color: #fff; }
.tpp-journey__map button[aria-selected="true"] .tpp-jn { background: radial-gradient(circle at 35% 30%, #8C6BFF, #5534D6 70%); border-color: transparent; color: #fff; transform: scale(1.1);
  box-shadow: 0 0 0 8px rgba(110,70,240,.18), 0 14px 40px -10px rgba(110,70,240,.8); }
.tpp-journey__map button[aria-selected="true"] .tpp-jn em { background: #fff; color: #3A2A78; }
.tpp-journey__map li.is-loop .tpp-jn { border-style: dashed; }
.tpp-journey__loop { position: absolute !important; left: calc(300% / 7 + 100% / 14 - 20px); width: calc(200% / 7 + 40px); bottom: 0; height: 52px; display: flex !important; align-items: flex-end; justify-content: center; gap: 8px;
  padding-bottom: 4px; border: 2px dashed rgba(79,245,145,.5); border-top: 0; border-radius: 0 0 28px 28px; color: var(--tm-green); font-size: 13px; }
.tpp-journey__loop .tmh-ph { width: 16px; height: 16px; animation: tpp-spin 4s linear infinite; }
@keyframes tpp-spin { to { transform: rotate(360deg); } }
.tpp-journey__detail { position: relative; margin-top: 22px; padding: clamp(22px, 3vw, 34px); border-radius: 22px; background: var(--tm-surface); border: 1px solid rgba(180,150,255,.28); }
.tpp-journey__detail.is-in { animation: tpp-rise .45s cubic-bezier(.2,.7,.2,1) both; }
.tpp-jd__n { position: absolute; right: 24px; top: 18px; font-size: 44px; font-weight: 300; color: rgba(180,150,255,.35); line-height: 1; }
.tpp-jd__n small { font-size: 16px; }
.tpp-jd__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(110,70,240,.2); color: var(--tm-lilac); }
.tpp-jd__ic .tmh-ph { width: 26px; height: 26px; }
.tpp-journey__detail h3 { margin: 14px 0 14px; font-size: 26px; font-weight: 500; }
.tpp-jd__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tpp-jd__cols p { margin: 0; font-size: 17px; font-weight: 300; color: var(--tm-ink-2); }
.tpp-jd__l { display: flex; align-items: center; gap: 6px; margin-bottom: 6px !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .06em; text-transform: uppercase; color: var(--tm-muted) !important; }
.tpp-jd__get { padding: 14px 16px; border-radius: 14px; background: rgba(79,245,145,.07); border: 1px solid rgba(79,245,145,.25); }
.tpp-jd__get .tpp-jd__l { color: var(--tm-green) !important; } .tpp-jd__get .tmh-ph { width: 16px; height: 16px; }
.tpp-jd__get p:last-child { color: #fff; }
.tpp-motto { margin-top: clamp(40px, 5vw, 64px); text-align: center; }
.tpp-motto p { margin: 0 auto 10px; max-width: 40em; font-size: clamp(17px, 1.4vw, 20px); font-weight: 300; color: var(--tm-ink-2); }
.tpp-motto strong { font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; color: #fff; }
.tpp-motto .tmp-ctas { justify-content: center; margin-top: 26px; }

/* ---------- two-column text + widget ---------- */
.tpp-cols { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(32px, 4vw, 48px); }
.tpp-cols--rev { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.tpp-cols__text p { margin: 0 0 14px; font-size: 17px; font-weight: 300; color: var(--tm-ink-2); }
.tpp-cols__text b { font-weight: 500; color: #fff; }
.tpp-strong { color: #fff !important; font-weight: 400 !important; }

/* learns */
.tpp-learn { display: grid; grid-template-columns: 160px minmax(0, 1fr) 220px; gap: 12px; padding: 16px; border-radius: 24px; background: var(--tm-bg-2); border: 1px solid var(--tm-line); }
.tpp-learn__src { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tpp-learn__src li { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 10px; background: var(--tm-surface); border: 1px solid transparent; font-size: 12.5px; color: var(--tm-ink-2); transition: all .3s; }
.tpp-learn__src .tmh-ph { width: 17px; height: 17px; flex: none; color: var(--tm-muted); }
.tpp-learn__src li.is-on { border-color: var(--tm-lilac); background: rgba(110,70,240,.22); color: #fff; box-shadow: 0 0 20px rgba(110,70,240,.35); }
.tpp-learn__src li.is-on .tmh-ph { color: var(--tm-lilac); }
.tpp-learn__h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; font-size: 13px; font-weight: 500; color: #fff; }
.tpp-learn__h .tmh-ph { width: 16px; height: 16px; color: var(--tm-lilac); }
.tpp-learn__h small { flex-basis: 100%; font-weight: 400; color: var(--tm-muted); font-size: 12px; }
.tpp-learn__cards { display: flex; flex-direction: column; gap: 8px; min-height: 250px; margin: 0; padding: 0; list-style: none; }
.tpp-scard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: var(--tm-surface); border: 1px solid rgba(180,150,255,.3);
  animation: tpp-slide .45s cubic-bezier(.2,.7,.2,1) both; transition: opacity .4s, transform .4s, border-color .3s, background .3s; }
@keyframes tpp-slide { from { opacity: 0; transform: translateX(-16px); } }
.tpp-scard b { display: block; font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpp-scard small { display: block; font-size: 11.5px; color: var(--tm-muted); line-height: 1.35; }
.tpp-scard__act { display: flex; gap: 4px; }
.tpp-scard__act button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: transparent; color: var(--tm-ink-2); cursor: pointer; }
.tpp-scard__act .tmh-ph { width: 16px; height: 16px; }
.tpp-scard__act .ok:hover { background: var(--tm-green); color: #0E2A1B; border-color: var(--tm-green); }
.tpp-scard__act .no:hover { background: rgba(255,58,94,.25); color: var(--tm-red-soft); border-color: rgba(255,58,94,.5); }
.tpp-scard.is-ok { border-color: var(--tm-green); background: rgba(79,245,145,.12); }
.tpp-scard.is-no { border-color: rgba(255,58,94,.5); background: rgba(255,58,94,.08); }
.tpp-scard.is-gone { opacity: 0; transform: translateX(30px); }
.tpp-learn__menu { padding: 12px; border-radius: 16px; background: linear-gradient(160deg, #3C4172 0%, #47395F 55%, #354469 100%); }
.tpp-learn__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 2px; margin: 0; padding: 8px 2px; list-style: none; border-radius: 10px; background: rgba(28,28,42,.5); min-height: 180px; align-content: start; }
.tpp-ltile { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; text-align: center; line-height: 1.2; }
.tpp-ltile > span:last-child { max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tpp-ltile.is-new { animation: tpp-pop .5s cubic-bezier(.2,.8,.2,1.3) both; }
.tpp-ltile.is-new .tmh-app { box-shadow: 0 0 0 2px var(--tm-green), 0 2px 6px rgba(0,0,0,.35); }
.tpp-learn__stat { margin: 10px 0 0; font-size: 12px; color: #C7C7D6; text-align: center; }
.tpp-learn__stat b { display: block; font-size: 28px; font-weight: 500; color: var(--tm-green); }

/* follows your org */
.tpp-org { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 40px); align-items: start; margin-top: clamp(32px, 4vw, 48px); }
.tpp-org__tiers { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tpp-org__tiers li { position: relative; margin-left: calc(var(--i) * 6%); opacity: .45; transition: opacity .5s; }
.tpp-org__tiers li.is-on { opacity: 1; }
.tpp-org__tiers li:not(:last-child)::after { content: ''; position: absolute; left: 22px; bottom: -11px; width: 2px; height: 12px; background: var(--c); }
.tpp-org__tiers button { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding: 14px 16px; border-radius: 16px; text-align: left; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 10%, #24242C); color: #fff; font: inherit; transition: box-shadow .25s, transform .25s; }
.tpp-org__tiers button:hover, .tpp-org__tiers button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--c); }
.tpp-tier__l { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.tpp-org__tiers b { font-size: 16px; font-weight: 500; }
.tpp-tier__tiles { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tpp-tier__tiles .tmh-app--s { width: 24px !important; height: 24px !important; border-radius: 6px !important; }
.tpp-tier__tiles > span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 4px; border-radius: 999px; background: rgba(0,0,0,.25); font-size: 12.5px; color: var(--tm-ink-2); }
.tpp-tier__tiles > span.is-updated { box-shadow: 0 0 0 1.5px var(--tm-green); }
.tpp-org__result { position: sticky; top: 140px; padding: 14px; border-radius: 20px; background: linear-gradient(160deg, #3C4172 0%, #47395F 55%, #354469 100%); border: 1px solid rgba(255,255,255,.14); }
.tpp-org__menu { display: flex; flex-direction: column; gap: 8px; }
.tpp-om { padding: 8px 10px 10px; border-radius: 12px; background: rgba(28,28,42,.5); opacity: .15; transform: translateY(-6px); transition: opacity .5s, transform .5s, box-shadow .3s; }
.tpp-om.is-in { opacity: 1; transform: none; }
.tpp-org.is-focus .tpp-om:not(.is-hot) { opacity: .25; }
.tpp-om.is-hot { box-shadow: 0 0 0 2px var(--c); }
.tpp-om p { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 11.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: #E4E4EE; }
.tpp-om p i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.tpp-om ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.tpp-om li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; text-align: center; }
.tpp-om li > span:not(.tmh-app) { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpp-om li em { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); padding: 0 6px; border-radius: 999px; background: #1C1C22; color: var(--tm-green); border: 1px solid rgba(79,245,145,.5); font: 500 9.5px/1.5 var(--tm-font); font-style: normal; }
.tpp-om li em:empty { display: none; }
.tpp-om li.is-updated .tmh-app { box-shadow: 0 0 0 2px var(--tm-green); }
.tpp-org__event { display: flex; gap: 8px; align-items: flex-start; min-height: 3.2em; margin: 12px 2px 0; font-size: 13px; line-height: 1.4; color: #E4E4EE; }
.tpp-org__event .tmh-ph { width: 18px; height: 18px; flex: none; }
.tpp-org__event.is-move .tmh-ph { color: var(--tm-lilac); animation: tpp-spin 1.2s linear infinite; }
.tpp-org__event.is-ok .tmh-ph { color: var(--tm-green); }
.tpp-org__event b { font-weight: 500; color: #fff; }
.tpp-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
.tpp-points li { display: flex; gap: 12px; align-items: flex-start; }
.tpp-points .tmh-ph { width: 26px; height: 26px; flex: none; color: var(--tm-lilac); }
.tpp-points p { margin: 0; font-size: 16px; font-weight: 300; color: var(--tm-ink-2); }
.tpp-points b { font-weight: 500; color: #fff; }

/* peer to peer */
.tpp-modes { display: flex; flex-direction: column; gap: 6px; margin: 20px 0; }
.tpp-modes button { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--tm-line); background: var(--tm-surface); color: var(--tm-ink-2);
  font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.tpp-modes .tmh-ph { width: 20px; height: 20px; flex: none; color: var(--tm-muted); }
.tpp-modes b { display: block; font-size: 15px; font-weight: 500; color: #fff; } .tpp-modes span { font-size: 13px; }
.tpp-modes button[aria-pressed="true"] { border-color: var(--tm-lilac); background: rgba(110,70,240,.2); } .tpp-modes button[aria-pressed="true"] .tmh-ph { color: var(--tm-lilac); }
.tpp-net { margin: 0; padding: 12px; border-radius: 24px; background: var(--tm-bg-2); border: 1px solid var(--tm-line); }
.tpp-net svg { display: block; width: 100%; height: auto; font-family: var(--tm-font); }
.tpp-net .n-col { fill: rgba(255,255,255,.025); stroke: rgba(255,255,255,.08); stroke-dasharray: 4 6; }
.tpp-net .n-down { fill: none; stroke: rgba(180,150,255,.45); stroke-width: 1.6; transition: opacity .4s; }
.tpp-net .n-side { fill: none; stroke: rgba(79,245,145,.45); stroke-width: 1.8; stroke-dasharray: 5 6; transition: opacity .4s, stroke .3s; }
.tpp-net .n-side.is-hot { stroke: var(--tm-green); stroke-width: 2.4; }
.tpp-net[data-mode="down"] .n-side, .tpp-net[data-mode="side"] .n-down { opacity: .12; }
.tpp-net .n-node circle { fill: #2A2A33; stroke: rgba(255,255,255,.35); stroke-width: 1.5; }
.tpp-net .n-node.is-dep circle { fill: rgba(110,70,240,.35); stroke: var(--tm-lilac); }
.tpp-net .n-node.is-org circle { fill: var(--tm-purple); stroke: #fff; stroke-width: 2; }
.tpp-net .n-node.is-you circle { fill: var(--tm-lilac); stroke: #fff; stroke-width: 2.5; }
.tpp-net .n-node text { fill: #E4E4EE; font-size: 13px; font-weight: 500; }
.tpp-net .n-node.is-org text { fill: #fff; font-size: 12px; }
.tpp-net .n-node.is-you text { fill: var(--tm-lilac); }
.tpp-net .n-dot--down { fill: var(--tm-lilac); } .tpp-net .n-dot--side { fill: var(--tm-green); filter: drop-shadow(0 0 4px rgba(79,245,145,.8)); }
.tpp-net .n-dot { transition: opacity .3s; }
.tpp-net .n-label { fill: var(--tm-green); font-size: 12.5px; font-weight: 500; transition: opacity .3s; paint-order: stroke; stroke: #1A1A1F; stroke-width: 4px; }
.tpp-net figcaption { margin: 8px 6px 2px; min-height: 2.8em; font-size: 14px; color: var(--tm-ink-2); }

/* AI */
.tpp-aisec { background: radial-gradient(60% 60% at 80% 40%, rgba(110,70,240,.18), transparent 70%), var(--tm-bg-2); }
.tpp-ask { display: block; margin-top: 6px; font-size: 20px; font-weight: 400 !important; color: var(--tm-lilac) !important; }
.tpp-agent { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 12px; padding: 14px; border-radius: 24px; background: #17171C; border: 1px solid var(--tm-line); }
.tpp-agent__roster { padding: 12px; border-radius: 16px; background: var(--tm-surface); }
.tpp-agent__roster ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tpp-agent__roster li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--tm-ink-2); }
.tpp-av { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: #3A3A46; color: #fff; font-size: 11px; font-weight: 500; }
.tpp-av.is-agent { border-radius: 9px; background: var(--tm-purple); } .tpp-av .tmh-ph { width: 17px; height: 17px; }
.tpp-agent__new { padding: 8px; margin: 4px -6px 0; border-radius: 10px; background: rgba(110,70,240,.2); border: 1px solid rgba(180,150,255,.5); color: #fff !important;
  animation: tpp-join .7s cubic-bezier(.2,.8,.2,1.2) .4s both; }
.tpp-agent__new small { display: block; font-size: 11px; color: var(--tm-lilac); }
@keyframes tpp-join { from { opacity: 0; transform: translateX(-30px) scale(.9); } }
.tpp-agent__console { display: flex; flex-direction: column; min-width: 0; }
.tpp-agent__tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.tpp-agent__tabs [role="tab"] { min-height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--tm-line); background: transparent; color: var(--tm-ink-2); font: 500 12.5px/1 ui-monospace, Menlo, monospace; cursor: pointer; }
.tpp-agent__tabs [aria-selected="true"] { background: var(--tm-purple); border-color: var(--tm-purple); color: #fff; }
.tpp-agent__replay { margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--tm-line); background: transparent; color: var(--tm-ink-2); cursor: pointer; }
.tpp-agent__replay .tmh-ph { width: 16px; height: 16px; }
.tpp-code--agent { height: 360px; }
.tpp-line { animation: tpp-fade .3s ease both; }

/* secure */
.tpp-secure { background: radial-gradient(60% 60% at 80% 30%, rgba(79,245,145,.06), transparent 70%), var(--tm-bg); }
.tpp-gate { padding: 18px; border-radius: 24px; background: var(--tm-bg-2); border: 1px solid var(--tm-line); }
.tpp-gate__who { display: flex; flex-wrap: wrap; gap: 6px; }
.tpp-gate__who button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: transparent;
  color: var(--tm-ink-2); font: 500 13px/1 var(--tm-font); cursor: pointer; }
.tpp-gate__who .tmh-ph { width: 16px; height: 16px; }
.tpp-gate__who button[aria-pressed="true"] { background: #fff; color: #1D1D23; border-color: #fff; }
.tpp-gate__track { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 22px 0 14px; }
.tpp-gate__track::before { content: ''; position: absolute; left: 12%; right: 12%; top: 32px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 6px, transparent 6px 12px); }
.tpp-gate__node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 13px; color: var(--tm-ink-2); }
.tpp-gate__ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--tm-surface); border: 1px solid var(--tm-line); color: #fff; transition: all .3s; }
.tpp-gate__ic .tmh-ph, .tpp-gate__ic .tmp-leaf { width: 26px; height: 26px; }
.tpp-gate__tm .tpp-gate__ic { background: var(--tm-purple); border-color: rgba(180,150,255,.6); }
.tpp-gate__node small { display: block; font-size: 11.5px; color: var(--tm-muted); }
.tpp-gate.is-at-lock.is-ok .tpp-gate__lock .tpp-gate__ic { border-color: var(--tm-green); color: var(--tm-green); box-shadow: 0 0 24px rgba(79,245,145,.4); }
.tpp-gate.is-at-lock.is-no .tpp-gate__lock .tpp-gate__ic { border-color: var(--tm-red); color: var(--tm-red-soft); box-shadow: 0 0 24px rgba(255,58,94,.45); animation: tmp-wobble .4s 2; }
.tpp-gate.is-at-lock.is-ok .tpp-gate__dest .tpp-gate__ic { color: var(--tm-green); border-color: var(--tm-green); background: rgba(79,245,145,.15); }
.tpp-gate.is-at-lock.is-no .tpp-gate__dest { opacity: .35; }
.tpp-gate__dot { position: absolute; z-index: 2; left: 12.5%; top: 26px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--tm-lilac); opacity: 0; box-shadow: 0 0 12px var(--tm-lilac); }
.tpp-gate.is-run .tpp-gate__dot { animation: tpp-gate-go 1.5s cubic-bezier(.4,0,.2,1) forwards; }
.tpp-gate.is-at-lock.is-ok .tpp-gate__dot { animation: none; opacity: 1; left: 87.5%; background: var(--tm-green); box-shadow: 0 0 12px var(--tm-green); transition: left .6s ease; }
.tpp-gate.is-at-lock.is-no .tpp-gate__dot { animation: none; opacity: 1; left: 62.5%; background: var(--tm-red); box-shadow: 0 0 12px var(--tm-red); }
@keyframes tpp-gate-go { 0% { opacity: 1; left: 12.5%; } 100% { opacity: 1; left: 62.5%; } }
.tpp-gate__res { display: flex; gap: 8px; align-items: flex-start; min-height: 3em; margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--tm-ink-2); }
.tpp-gate__res .tmh-ph { width: 20px; height: 20px; flex: none; }
.tpp-gate.is-ok .tpp-gate__res .tmh-ph { color: var(--tm-green); } .tpp-gate.is-no .tpp-gate__res .tmh-ph { color: var(--tm-red-soft); }
.tpp-gate__res b { font-weight: 500; color: #fff; }
.tpp-gate__go { min-height: 42px; font-size: 15px; }
.tpp-trust4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; margin-top: clamp(40px, 5vw, 64px) !important; }
.tpp-export { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(79,245,145,.5); background: transparent;
  color: var(--tm-green); font: 500 13px/1 var(--tm-font); cursor: pointer; }
.tpp-export:hover { background: rgba(79,245,145,.12); } .tpp-export .tmh-ph { width: 15px !important; height: 15px !important; margin: 0 !important; }

/* solutions */
.tpp-sol { background: var(--tm-bg-2); }
.tpp-sol__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: clamp(32px, 4vw, 48px); }
.tpp-sol__tabs button { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 18px; border-radius: 18px; border: 1px solid var(--tm-line); background: var(--tm-surface);
  color: #fff; font: 500 18px/1.2 var(--tm-font); text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.tpp-sol__tabs button:hover { border-color: rgba(180,150,255,.5); }
.tpp-sol__tabs button[aria-selected="true"] { border-color: var(--tm-lilac); background: linear-gradient(160deg, rgba(110,70,240,.32), rgba(110,70,240,.08)); transform: translateY(-3px); }
.tpp-sol__tabs .tmp-sol-ic { width: 60px; height: 60px; border-radius: 16px; } .tpp-sol__tabs .tmp-sol-ic > .tmh-ph { width: 32px; height: 32px; }
.tpp-sol__tabs .tmp-sol-ic em { width: 28px; height: 28px; right: -8px; bottom: -8px; } .tpp-sol__tabs .tmp-sol-ic em .tmh-ph { width: 16px; height: 16px; }
.tpp-sol__panel { margin-top: 14px; padding: clamp(22px, 3vw, 34px); border-radius: 22px; background: var(--tm-surface); border: 1px solid var(--tm-line); animation: tpp-rise .4s ease both; }
.tpp-sol__panel blockquote { margin: 0 0 22px; font-size: clamp(19px, 1.7vw, 24px); font-weight: 300; font-style: italic; color: #fff; }
.tpp-sol__how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tpp-sol__how a { display: flex; gap: 12px; height: 100%; padding: 16px; border-radius: 14px; background: #24242C; border: 1px solid var(--tm-line); color: var(--tm-ink-2); text-decoration: none; transition: border-color .2s, transform .2s; }
.tpp-sol__how a:hover { border-color: var(--tm-lilac); transform: translateY(-2px); }
.tpp-sol__how .tmh-ph { width: 24px; height: 24px; flex: none; color: var(--tm-lilac); }
.tpp-sol__how span { font-size: 14.5px; line-height: 1.45; }
.tpp-sol__how b { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 500; color: #fff; }

/* faq */
.tpp-faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.tpp-faq__more { margin-top: 20px; font-size: 16px; color: var(--tm-ink-2); }
.tpp-faq__more a { display: inline-flex; align-items: center; gap: 6px; color: var(--tm-lilac); text-decoration: none; font-weight: 500; }
.tpp-faq__more .tmh-ph { width: 16px; height: 16px; }
.tpp-faq__list { display: flex; flex-direction: column; gap: 10px; }
.tpp-faq__list details { border-radius: 16px; background: var(--tm-surface); border: 1px solid var(--tm-line); transition: border-color .2s; }
.tpp-faq__list details[open] { border-color: rgba(180,150,255,.45); }
.tpp-faq__list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; font-size: 18px; font-weight: 400; font-style: italic; color: #fff; }
.tpp-faq__list summary::-webkit-details-marker { display: none; }
.tpp-faq__list summary .tmh-ph { width: 20px; height: 20px; flex: none; color: var(--tm-lilac); transition: transform .3s; }
.tpp-faq__list details[open] summary .tmh-ph { transform: rotate(45deg); }
.tpp-faq__list details p { margin: 0; padding: 0 20px 20px; font-size: 16.5px; font-weight: 300; color: var(--tm-ink-2); line-height: 1.6; }
.tpp-faq__list details[open] p { animation: tpp-fade .35s ease; }
.tpp-close__lede { max-width: 36em; margin: 18px auto 0; font-size: 18px; font-weight: 300; color: var(--tm-ink-2); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .tpp-learn { grid-template-columns: minmax(0, 1fr) 180px; }
  .tpp-learn__src { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .tpp-learn__src li { flex: 1 1 auto; }
}
@media (max-width: 1023px) {
  .tpp-hero__grid, .tpp-anatomy, .tpp-where__grid, .tpp-cols, .tpp-cols--rev, .tpp-org, .tpp-faq__grid { grid-template-columns: minmax(0, 1fr); }
  .tpp-org__result { position: static; }
  .tpp-surfaces { flex-direction: row; flex-wrap: wrap; } .tpp-surfaces button { flex: 1 1 auto; }
  .tpp-sol__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tpp-trust4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .tpp-points { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .tpp-journey__map { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0; }
  .tpp-journey__map::before, .tpp-journey__map::after { left: 36px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  .tpp-journey__map::after { height: calc(100% * var(--p, 0)); bottom: auto; }
  .tpp-journey__map li { justify-content: flex-start; }
  .tpp-journey__map button { flex-direction: row; gap: 16px; }
  .tpp-jn { width: 64px; height: 64px; margin-left: 4px; } .tpp-jn .tmh-ph { width: 26px; height: 26px; }
  .tpp-journey__loop { position: relative !important; left: auto; width: auto; height: auto; justify-content: flex-start; padding: 8px 12px; border: 2px dashed rgba(79,245,145,.5); border-radius: 12px; margin-left: 96px; }
  .tpp-jd__cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .tpp-hero { padding-top: calc(64px + 32px); }
  .tpp-twin { padding: 12px; }
  .tpp-twin__panes { grid-template-columns: minmax(0, 1fr); }
  .tpp-twin__bridge { height: 34px; } .tpp-twin__bridge i { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--tm-lilac) 0 6px, transparent 6px 11px); }
  .tpp-twin .tpp-code { min-height: 0; max-height: 220px; }
  .tpp-menu__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tpp-entry__kept { grid-template-columns: minmax(0, 1fr); }
  .tpp-stage { min-height: 0; padding: 12px; }
  .tpp-mock__body { grid-template-columns: minmax(0, 1fr); } .tpp-mock__page { display: none; }
  .tpp-mock--slack { grid-template-columns: minmax(0, 1fr); } .tpp-mock--slack nav { display: none; }
  .tpp-mock--term .tpp-code { font-size: 10px; }
  .tpp-learn { grid-template-columns: minmax(0, 1fr); }
  .tpp-learn__src li { font-size: 11.5px; padding: 8px; }
  .tpp-org__tiers li { margin-left: calc(var(--i) * 4%); }
  .tpp-agent { grid-template-columns: minmax(0, 1fr); }
  .tpp-agent__roster ul { flex-direction: row; flex-wrap: wrap; }
  .tpp-agent__roster li:not(.tpp-agent__new) span + * { display: none; }
  .tpp-code--agent { height: 300px; font-size: 10.5px; }
  .tpp-gate__node { font-size: 11.5px; } .tpp-gate__ic { width: 48px; height: 48px; border-radius: 14px; } .tpp-gate__ic .tmh-ph, .tpp-gate__ic .tmp-leaf { width: 20px; height: 20px; }
  .tpp-gate__track::before { top: 25px; } .tpp-gate__dot { top: 19px; }
  .tpp-sol__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tpp-sol__tabs button { font-size: 15px; padding: 14px; gap: 14px; }
  .tpp-sol__how { grid-template-columns: minmax(0, 1fr); }
  .tpp-trust4 { grid-template-columns: minmax(0, 1fr) !important; }
  .tpp-faq__list summary { font-size: 16px; padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tpp-urow { width: auto; flex-wrap: wrap; } .tpp-urow__track { flex-wrap: wrap; justify-content: center; } .tpp-urow__track[aria-hidden] { display: none; }
  .tpp-universe { -webkit-mask-image: none; mask-image: none; max-height: 420px; overflow: hidden; padding: 0 var(--tm-gutter); }
}

/* ---------- hero: sources → curated Teamenu → people and agents ---------- */
.tpp-hf { display: grid; grid-template-columns: 158px minmax(0, 1fr); grid-template-areas: "src mid" "out out"; gap: 20px 24px; align-items: start; }
.tpp-hf__col { min-width: 0; }
.tpp-hf__col:first-child { grid-area: src; } .tpp-hf__mid { grid-area: mid; } .tpp-hf__col:last-child { grid-area: out; }
.tpp-hf__src, .tpp-hf__users { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tpp-hf__src li { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--tm-line);
  font-size: 12.5px; color: var(--tm-ink-2); transition: border-color .25s, background .25s, color .25s, box-shadow .25s; }
.tpp-hf__src .tmh-ph { width: 17px; height: 17px; flex: none; color: var(--tm-muted); }
.tpp-hf__src li.is-on { border-color: var(--tm-lilac); background: rgba(110,70,240,.25); color: #fff; box-shadow: 0 0 18px rgba(110,70,240,.45); }
.tpp-hf__src li.is-on .tmh-ph { color: var(--tm-lilac); }
.tpp-hf__users li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 10px; background: rgba(255,255,255,.04);
  border: 1px solid var(--tm-line); opacity: .5; transition: opacity .3s, border-color .3s, background .3s; }
.tpp-hf__users b { display: block; font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpp-hf__users small { display: block; font-size: 11px; color: var(--tm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpp-hf__users li > .tmh-ph { width: 16px; height: 16px; color: var(--tm-green); opacity: 0; transform: scale(.4); transition: opacity .3s, transform .3s cubic-bezier(.2,.8,.2,1.4); }
.tpp-hf__users li.is-got { opacity: 1; border-color: rgba(79,245,145,.35); background: rgba(79,245,145,.06); }
.tpp-hf__users li.is-got > .tmh-ph { opacity: 1; transform: none; }
.tpp-hf__users .tpp-av { width: 28px; height: 28px; font-size: 10.5px; }
.tpp-hf__users { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) and (max-width: 1023px) { .tpp-hf__users { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tpp-hf .tpp-menu { padding: 14px; }
.tpp-hf .tpp-menu__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; padding: 14px 10px; }
.tpp-hf .tpp-tile { padding: 8px 4px; }
.tpp-tile.is-wait { position: relative; }
.tpp-tile.is-wait > * { opacity: 0; }
.tpp-tile.is-wait::before { content: ''; position: absolute; top: 7px; left: 50%; width: 34px; height: 34px; margin-left: -17px; border-radius: 9px; border: 1.5px dashed rgba(255,255,255,.25); }
.tpp-tile:not(.is-wait) > * { animation: tpp-pop .4s cubic-bezier(.2,.8,.2,1.3) both; }
.tpp-menu { transition: box-shadow .4s; }
.tpp-menu.is-send { box-shadow: 0 0 0 2px var(--tm-lilac), 0 0 40px rgba(110,70,240,.6); }
.tpp-fly { position: absolute; z-index: 6; pointer-events: none; transition: transform .65s cubic-bezier(.5,0,.2,1); }
.tpp-fly .tmh-app { box-shadow: 0 10px 24px rgba(0,0,0,.5), 0 0 0 3px rgba(180,150,255,.6); }
.tpp-fly.is-leaf { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--tm-purple); color: #fff; box-shadow: 0 0 16px rgba(110,70,240,.8); }
.tpp-fly.is-leaf .tmp-leaf { width: 13px; height: 13px; }
.tpp-twin__aibtn { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(180,150,255,.5);
  background: rgba(110,70,240,.14); color: #fff; font: 500 14px/1 var(--tm-font); cursor: pointer; transition: background .2s; }
.tpp-twin__aibtn:hover { background: rgba(110,70,240,.3); }
.tpp-twin__aibtn .tmh-ph { width: 17px; height: 17px; color: var(--tm-lilac); }
.tpp-twin__aibtn .tmh-ph:last-child { transition: transform .3s; }
.tpp-twin__aibtn[aria-expanded="true"] .tmh-ph:last-child { transform: rotate(180deg); }
.tpp-twin__ai { margin-top: 12px; animation: tpp-rise .4s cubic-bezier(.2,.7,.2,1) both; }
.tpp-twin__ai .tpp-code { max-height: 260px; min-height: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- assistant chat (where it appears + AI section) ---------- */
.tpp-mock--assist { max-width: 520px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: #1B1B22; }
.tpp-chat__bar { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 14px; }
.tpp-chat__bar > .tmh-ph { width: 20px; height: 20px; padding: 4px; box-sizing: content-box; border-radius: 8px; background: var(--tm-purple); color: #fff; }
.tpp-chat__bar small { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--tm-green); }
.tpp-chat__bar small .tmh-ph { width: 13px; height: 13px; }
.tpp-chat__body { display: flex; flex-direction: column; gap: 10px; padding: 14px; min-height: 300px; }
.tpp-amsg { max-width: 90%; padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; animation: tpp-rise .4s ease both; }
.tpp-amsg small { display: block; font-size: 11px; color: rgba(255,255,255,.7); margin-bottom: 2px; }
.tpp-amsg.is-user { align-self: flex-end; background: #4A3D8F; border-bottom-right-radius: 4px; }
.tpp-amsg.is-bot { align-self: flex-start; background: #2B2B35; border-bottom-left-radius: 4px; color: var(--tm-ink-2); }
.tpp-astep { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #C7C7D6; animation: tpp-rise .4s ease both; }
.tpp-astep .tmp-leaf { width: 14px; height: 14px; color: var(--tm-lilac); }
.tpp-alinks { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.tpp-alinks li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: #1B1B22; border: 1px solid rgba(180,150,255,.3); }
.tpp-alinks b { display: block; font-size: 13px; font-weight: 500; color: #fff; }
.tpp-alinks small { display: block; font-size: 11.5px; color: var(--tm-muted); }
.tpp-alinks > li > .tmh-ph { width: 16px; height: 16px; color: var(--tm-lilac); }
.tpp-afoot { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 12px; color: var(--tm-muted); animation: tpp-rise .4s ease both; }
.tpp-afoot .tmh-ph { width: 14px; height: 14px; color: var(--tm-green); }
.tpp-agent__main { display: flex; flex-direction: column; min-width: 0; }
.tpp-chat { border-radius: 16px; background: #1B1B22; border: 1px solid rgba(255,255,255,.1); }
.tpp-chat .tpp-chat__body { min-height: 330px; }
.tpp-agent__main .tpp-twin__aibtn { align-self: flex-start; }
.tpp-agent__console { margin-top: 10px; animation: tpp-rise .4s cubic-bezier(.2,.7,.2,1) both; }
.tpp-agent__console .tpp-code--agent { height: 300px; }

/* ---------- set-up: list layout for phones ---------- */
.tpp-jlist { display: none; }

/* ---------- solutions: entry points to /solutions ---------- */
.tpp-sol__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
.tpp-entry-card { display: flex; flex-direction: column; height: 100%; padding: 20px; border-radius: 18px; background: var(--tm-surface); border: 1px solid var(--tm-line); color: inherit; text-decoration: none;
  transition: border-color .2s, transform .2s, background .2s; }
.tpp-entry-card:hover { border-color: var(--tm-lilac); transform: translateY(-4px); background: linear-gradient(160deg, rgba(110,70,240,.25), rgba(110,70,240,.06)), var(--tm-surface); }
.tpp-entry-card h3 { margin: 22px 0 8px; font-size: 20px; font-weight: 500; color: #fff; }
.tpp-entry-card blockquote { flex: 1; margin: 0; font-size: 15px; font-weight: 300; font-style: italic; line-height: 1.5; color: var(--tm-ink-2); }
.tpp-entry-card__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 15px; font-weight: 500; color: var(--tm-lilac); }
.tpp-entry-card__go .tmh-ph { width: 16px; height: 16px; transition: transform .2s; }
.tpp-entry-card:hover .tpp-entry-card__go .tmh-ph { transform: translateX(4px); }

@media (max-width: 1100px) {
  .tpp-hf { grid-template-columns: 140px minmax(0, 1fr); gap: 18px 18px; }
  .tpp-hf .tpp-menu__tiles { gap: 10px 6px; padding: 12px 6px; }
}
@media (max-width: 1023px) {
  .tpp-sol__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .tpp-journey__map, .tpp-journey__detail { display: none !important; }
  .tpp-jlist { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; position: relative; }
  .tpp-jlist ol { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
  .tpp-jlist li:not(.tpp-jlist__loop) { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding-bottom: 22px; }
  .tpp-jlist li:not(.tpp-jlist__loop)::before { content: ''; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px; background: linear-gradient(var(--tm-lilac), rgba(180,150,255,.2)); }
  .tpp-jlist > li:last-child::before { display: none; }
  .tpp-jlist .tpp-jn { width: 56px; height: 56px; background: radial-gradient(circle at 35% 30%, #8C6BFF, #5534D6 70%); border: 0; color: #fff; }
  .tpp-jlist .tpp-jn .tmh-ph { width: 24px; height: 24px; }
  .tpp-jlist .tpp-jn em { background: #fff; color: #3A2A78; }
  .tpp-jlist h3 { margin: 4px 0 4px; font-size: 19px; font-weight: 500; }
  .tpp-jlist p { margin: 0; font-size: 15px; font-weight: 300; color: var(--tm-ink-2); line-height: 1.45; }
  .tpp-jlist__get { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px !important; padding: 8px 10px; border-radius: 10px; background: rgba(79,245,145,.07); border: 1px solid rgba(79,245,145,.22); color: #fff !important; font-size: 14px !important; }
  .tpp-jlist__get .tmh-ph { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--tm-green); }
  .tpp-jlist__loop { position: relative; margin: 0 0 22px -8px; padding: 12px 8px 0; border-radius: 18px; border: 2px dashed rgba(79,245,145,.45); }
  .tpp-jlist__loop .tpp-jn { border: 0; }
  .tpp-jlist__loop::before { content: ''; position: absolute; left: 35px; top: -24px; height: 24px; width: 2px; background: rgba(180,150,255,.5); }
  .tpp-jlist__lbl { display: flex !important; align-items: center; gap: 6px; margin: 0 0 12px 6px !important; color: var(--tm-green) !important; font-size: 13px !important; font-weight: 500 !important; }
  .tpp-jlist__lbl .tmh-ph { width: 16px; height: 16px; animation: tpp-spin 4s linear infinite; }
  .tpp-jlist__loop li:last-child { padding-bottom: 12px; }
  .tpp-jlist__loop li:last-child::before { display: none; }
}
@media (max-width: 699px) {
  .tpp-hf { grid-template-columns: minmax(0, 1fr); grid-template-areas: "src" "mid" "out"; gap: 14px; }
  .tpp-hf__src { flex-direction: row; flex-wrap: wrap; }
  .tpp-hf__src li { flex: 1 1 auto; padding: 7px 8px; font-size: 11.5px; }
  .tpp-hf__users { display: grid; grid-template-columns: 1fr 1fr; }
  .tpp-hf .tpp-twin__cap { margin-bottom: 6px; }
  .tpp-sol__grid { grid-template-columns: minmax(0, 1fr); }
  .tpp-chat .tpp-chat__body { min-height: 0; }
}
.tpp [hidden] { display: none !important; }


/* ==========================================================================
   Teamenu /solutions page. Builds on home.css and product.css. Classes: .tps-
   ========================================================================== */
.tps [id] { scroll-margin-top: 72px; }

/* ---------- hero ---------- */
.tps-hero { position: relative; overflow: hidden; padding: calc(72px + clamp(40px, 6vw, 84px)) 0 clamp(40px, 5vw, 64px);
  background: radial-gradient(70% 60% at 80% 0%, rgba(110,70,240,.42), transparent 65%), linear-gradient(180deg, #231158 0%, #212125 88%); }
.tps-hero__bg { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 22px; opacity: .13; pointer-events: none;
  -webkit-mask-image: radial-gradient(42% 60% at 92% 30%, #000, transparent 85%); mask-image: radial-gradient(42% 60% at 92% 30%, #000, transparent 85%); }
.tps-bg__row { display: flex; gap: 22px; width: max-content; margin: 0; padding: 0; list-style: none; animation: tpp-marq var(--dur, 100s) linear infinite; }
.tps-bg__row.is-rev { animation-direction: reverse; }
.tps-bg__row li { flex: none; }
.tps-hero .tmp-wrap { position: relative; }
.tps-h1 { max-width: 17em; }
.tps-lede { max-width: 38em; }
.tps-cycle { display: inline-block; font-weight: 500; color: var(--tm-lilac); transition: opacity .25s, transform .25s, filter .25s; }
.tps-cycle.is-out { opacity: 0; transform: translateY(6px); filter: blur(2px); }
.tps-four { margin: clamp(40px, 5vw, 64px) 0 14px; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--tm-muted); }
.tps-ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tps-way { position: relative; display: flex; flex-direction: column; height: 100%; padding: 20px 20px 18px; border-radius: 20px; text-decoration: none; color: #fff;
  background: rgba(30,30,38,.75); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); transition: transform .25s, border-color .25s, background .25s; }
.tps-way:hover { transform: translateY(-4px); border-color: var(--tm-lilac); background: linear-gradient(160deg, rgba(110,70,240,.3), rgba(110,70,240,.06)), rgba(30,30,38,.85); }
.tps-way > b { margin: 22px 0 8px; font-size: 19px; font-weight: 500; }
.tps-strike { flex: 1; font-size: 16px; font-weight: 300; line-height: 1.45; color: var(--tm-ink-2); }
.tps-strike s { font-weight: bold; text-decoration: line-through 2px; text-decoration-color: transparent; color: var(--tm-red-soft); transition: text-decoration-color .45s, color .45s; transition-delay: calc(.3s + var(--i) * .25s); }
.tps-strike ins { text-decoration: none; font-weight: 500; color: var(--tm-green); display: inline-block; opacity: 0; transform: translateY(6px);
  transition: opacity .4s, transform .4s; transition-delay: calc(.8s + var(--i) * .25s); }
.tps-way.is-in .tps-strike s, .tps-way:hover .tps-strike s { color: rgba(255,129,151,.6); text-decoration-color: var(--tm-red); }
.tps-way.is-in .tps-strike ins, .tps-way:hover .tps-strike ins { opacity: 1; transform: none; }
.tps-way__go { align-self: flex-start; display: grid; place-items: center; width: 34px; height: 34px; margin-top: 16px; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--tm-lilac); transition: background .2s, color .2s; }
.tps-way__go .tmh-ph { width: 17px; height: 17px; }
.tps-way:hover .tps-way__go { background: var(--tm-lilac); color: #2A2350; }
.tps-hint { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; font-size: 14px; color: var(--tm-ink-2); }
.tps-hint .tmh-ph { width: 18px; height: 18px; color: var(--tm-red-soft); flex: none; }

/* ---------- solution sections ---------- */
.tps-sol { --accent: #B496FF; }
.tps-sol:nth-of-type(odd) { background: var(--tm-bg-2); }
.tps-sol .tmp-eyebrow { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.tps-num { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #1B1B22; font-size: 11.5px; font-weight: 700; letter-spacing: 0; }
.tps-sol .tmp-h strong { color: var(--accent); }
.tps-intro { max-width: 46em; margin-top: 24px; }
.tps-intro p { margin: 0 0 12px; font-size: clamp(16px, 1.3vw, 19px); font-weight: 300; color: var(--tm-ink-2); }
.tps-intro b { font-weight: 500; color: #fff; }
.tps-pull { font-size: clamp(20px, 1.9vw, 26px) !important; font-weight: 400 !important; color: #fff !important; margin: 18px 0 !important; padding-left: 16px; border-left: 3px solid var(--accent); }
.tps-intro .tps-cycle { color: var(--accent); }

/* demo shell */
.tps-demo { margin-top: clamp(32px, 4vw, 48px); padding: clamp(14px, 2vw, 22px); border-radius: 24px; border: 1px solid var(--tm-line);
  background: radial-gradient(60% 70% at 70% 40%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%), #17171C; }
.tps-demo__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.tps-demo__t { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 500; }
.tps-demo__t .tmh-ph { width: 20px; height: 20px; color: var(--accent); }
.tps-demo__sub { margin: 0; font-size: 13px; color: var(--tm-muted); }
.tps-toggle { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 4px; border-radius: 12px; background: rgba(0,0,0,.3); border: 1px solid var(--tm-line); }
.tps-toggle button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--tm-ink-2); font: 500 13px/1 var(--tm-font); cursor: pointer; transition: background .2s, color .2s; }
.tps-toggle button:hover { background: rgba(255,255,255,.06); }
.tps-toggle button[aria-pressed="true"] { background: #fff; color: #1D1D23; }
.tps-toggle button[data-v="with"][aria-pressed="true"] { background: var(--tm-purple); color: #fff; }
.tps-verdict { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; animation: tpp-rise .4s ease both; }
.tps-verdict .tmh-ph { width: 18px; height: 18px; flex: none; }
.tps-verdict.is-bad { color: var(--tm-red-soft); } .tps-verdict.is-good { color: var(--tm-green); }
.tps-verdict b { font-weight: 500; color: #fff; }

/* 1. AI field */
.tps-ai__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 14px; align-items: stretch; }
.tps-field { margin: 0; padding: 14px; border-radius: 16px; background: #121217; border: 1px solid rgba(255,255,255,.06); }
.tps-field figcaption { margin-bottom: 10px; font-size: 13px; color: var(--tm-muted); }
.tps-field figcaption b { color: #fff; font-weight: 500; font-size: 15px; }
.tps-field__dots { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 5px; }
.tps-field__dots i { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 4px; background: rgba(255,255,255,.07); transition: background .3s, transform .3s, box-shadow .3s, opacity .3s; }
.tps-field__dots i .tmh-app { width: 100% !important; height: 100% !important; border-radius: 4px !important; opacity: 0; transition: opacity .3s; box-shadow: none; }
.tps-field__dots i.is-scan { background: rgba(255,255,255,.55); transform: scale(1.25); }
.tps-field__dots i.is-wrong { background: var(--tm-red); transform: scale(1.35); box-shadow: 0 0 14px rgba(255,58,94,.8); }
.tps-ai[data-mode="with"] .tps-field__dots i:not(.is-team) { opacity: .35; }
.tps-field__dots i.is-team { background: transparent; transform: scale(1.3); z-index: 1; }
.tps-field__dots i.is-team .tmh-app { opacity: 1; box-shadow: 0 0 0 2px var(--tm-lilac); }
.tps-field__dots i.is-right .tmh-app { box-shadow: 0 0 0 3px var(--tm-green), 0 0 16px rgba(79,245,145,.8); }
.tps-ai__chat .tpp-chat__body { min-height: 0; }
.tps-ai__chat .tpp-chat__bar small { color: var(--tm-muted); } .tps-ai[data-mode="with"] .tps-ai__chat .tpp-chat__bar small { color: var(--tm-green); }

/* 2. migration */
.tps-mig__phases { position: relative; margin: 0 4px 20px; }
.tps-mig__phases input[type=range] { width: 100%; margin: 0; accent-color: var(--accent); height: 28px; cursor: pointer; }
.tps-mig__ticks { display: grid; grid-template-columns: repeat(4, 1fr); margin: 4px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--tm-muted); }
.tps-mig__ticks li { cursor: pointer; } .tps-mig__ticks li:nth-child(2) { text-align: center; transform: translateX(-16%); } .tps-mig__ticks li:nth-child(3) { text-align: center; transform: translateX(16%); } .tps-mig__ticks li:last-child { text-align: right; }
.tps-mig__ticks li.is-on { color: #fff; font-weight: 500; } .tps-mig__ticks li.is-done { color: var(--tm-ink-2); }
.tps-mig__plat { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-bottom: 14px; }
.tps-mig__p { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: var(--tm-surface); border: 1px solid var(--tm-line); transition: opacity .4s, border-color .4s; }
.tps-mig__p b { font-size: 16px; font-weight: 500; } .tps-mig__p small { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 12px; color: var(--tm-ink-2); }
.tps-mig__arrow .tmh-ph { width: 24px; height: 24px; color: var(--accent); }
.tps-mig[data-phase="3"] [data-mig-old] { opacity: .4; } .tps-mig[data-phase="3"] [data-mig-old] small { background: rgba(255,58,94,.15); color: var(--tm-red-soft); }
.tps-mig:not([data-phase="0"]) [data-mig-new] { border-color: rgba(91,140,255,.6); } .tps-mig:not([data-phase="0"]) [data-mig-new] small { background: rgba(79,245,145,.12); color: var(--tm-green); }
.tps-mig__rows { display: grid; gap: 10px; }
.tps-mig__row { padding: 12px; border-radius: 16px; background: #121217; border: 1px solid rgba(255,255,255,.06); }
.tps-mig__row.is-tm { border-color: rgba(180,150,255,.4); background: linear-gradient(160deg, rgba(110,70,240,.18), rgba(110,70,240,.04)), #121217; }
.tps-mig__rl { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13.5px; color: var(--tm-ink-2); }
.tps-mig__rl > .tmh-ph, .tps-mig__rl .tmp-leaf { width: 17px; height: 17px; color: var(--tm-lilac); }
.tps-mig__rl b { margin-left: auto; font-weight: 500; color: #fff; }
.tps-mig__row ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.tps-mig__row li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 9px; border-radius: 10px; background: var(--tm-surface); border: 1px solid transparent; font-size: 12.5px;
  transition: border-color .35s, background .35s, color .35s; animation: tpp-fade .35s ease both; }
.tps-mig__row li span:not(.tmh-app) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tps-mig__row li > .tmh-ph { width: 16px; height: 16px; flex: none; }
.tps-mig__row li.is-ok > .tmh-ph { color: var(--tm-green); }
.tps-mig__row li.is-broken { border-color: rgba(255,58,94,.5); background: rgba(255,58,94,.08); color: var(--tm-red-soft); } .tps-mig__row li.is-broken > .tmh-ph { color: var(--tm-red); }
.tps-mig__row li.is-off { opacity: .45; text-decoration: line-through; } .tps-mig__row li.is-off > .tmh-ph { color: var(--tm-red); }
.tps-mig__note { min-height: 2.8em; margin: 12px 4px 0; font-size: 14px; color: var(--tm-ink-2); }

/* 3. onboarding */
.tps-onb__who { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 15px; color: #fff; }
.tps-onb__who .tmh-ph { width: 20px; height: 20px; color: var(--accent); }
.tps-onb__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 14px; }
.tps-onb__month { position: relative; padding: 14px; border-radius: 16px; background: #121217; border: 1px solid rgba(255,255,255,.06); }
.tps-onb__days { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 0; list-style: none; }
.tps-onb__days li { position: relative; display: grid; place-items: end start; aspect-ratio: 1.15; padding: 5px; border-radius: 8px; background: rgba(255,255,255,.05); font-size: 10.5px; color: var(--tm-muted);
  transition: background .3s, box-shadow .3s; }
.tps-onb__days li.is-ask { background: rgba(255,58,94,.18); box-shadow: inset 0 0 0 1px rgba(255,58,94,.5); color: var(--tm-red-soft); }
.tps-onb__days li.is-ask::after { content: '?'; position: absolute; top: 3px; right: 6px; font-size: 13px; font-weight: 700; color: var(--tm-red); }
.tps-onb__days li.is-calm { background: rgba(79,245,145,.08); }
.tps-onb__days li.is-ready { background: rgba(79,245,145,.25); box-shadow: inset 0 0 0 1.5px var(--tm-green); color: #fff; }
.tps-onb__bubbles { display: flex; flex-direction: column; gap: 6px; min-height: 172px; margin-top: 14px; }
.tps-q { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; max-width: 100%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: #2B2B35; border: 1px solid rgba(255,58,94,.35);
  font-size: 13.5px; color: #fff; animation: tpp-rise .35s ease both; margin-left: min(var(--x), 45%); }
.tps-q .tmh-ph { width: 16px; height: 16px; flex: none; color: var(--tm-red-soft); }
.tps-onb__ready { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(79,245,145,.08); border: 1px solid rgba(79,245,145,.35);
  font-size: 14px; color: var(--tm-ink-2); animation: tpp-rise .4s ease both; }
.tps-onb__ready .tmp-leaf { width: 20px; height: 20px; flex: none; color: var(--tm-green); }
.tps-onb__ready b { color: #fff; font-weight: 500; }
.tps-onb__side { display: flex; flex-direction: column; gap: 10px; }
.tps-onb__stat { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--tm-surface); }
.tps-onb__stat b { font-size: 30px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--tm-red-soft); transition: color .3s; min-width: 1.7em; }
.tps-onb__stat span { font-size: 13px; color: var(--tm-ink-2); }
.tps-onb[data-mode="with"] .tps-onb__stat b { color: var(--tm-green); }
.tps-onb__menu .tpp-menu__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tps-onb__menu .tpp-tile { cursor: default; font-size: 10.5px; } .tps-onb__menu .tpp-tile .tmh-app--l { width: 30px; height: 30px; }

/* 4. shadow IT */
.tps-sit__task { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 15px; color: var(--tm-ink-2); }
.tps-sit__task .tmh-ph { width: 20px; height: 20px; color: var(--accent); } .tps-sit__task b { color: #fff; font-weight: 500; }
.tps-sit__path { display: flex; flex-wrap: wrap; align-items: stretch; gap: 26px; margin: 0; padding: 0; list-style: none; }
.tps-sit__path li { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 160px; padding: 12px; border-radius: 14px; background: var(--tm-surface); border: 1px solid var(--tm-line);
  opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.tps-sit__path li.is-in { opacity: 1; transform: none; }
.tps-sit__path li:not(:last-child)::after { content: ''; position: absolute; right: -19px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-top: 2px solid var(--tm-muted); border-right: 2px solid var(--tm-muted); transform: rotate(45deg); }
.tps-sit__ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; }
.tps-sit__ic .tmh-ph, .tps-sit__ic .tmp-leaf { width: 18px; height: 18px; }
.tps-sit__path b { display: block; font-size: 14px; font-weight: 500; } .tps-sit__path small { display: block; font-size: 12px; color: var(--tm-muted); line-height: 1.35; }
.tps-sit__path li.is-stuck { border-style: dashed; border-color: rgba(245,165,36,.5); } .tps-sit__path li.is-stuck .tps-sit__ic { color: var(--accent); }
.tps-sit__path li.is-shadow { border-color: var(--tm-red); background: rgba(255,58,94,.1); } .tps-sit__path li.is-shadow .tps-sit__ic { background: var(--tm-red); }
.tps-sit__path li.is-good { border-color: var(--tm-green); background: rgba(79,245,145,.1); flex-grow: 3; }
.tps-sit[data-mode="with"] .tps-sit__path li:first-child .tps-sit__ic { background: var(--tm-purple); }
.tps-sit__result { min-height: 3.4em; margin-top: 16px; }
.tps-sit__result .tps-verdict { font-size: 15px; }

/* blocks */
.tps-blocks { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) minmax(0, 6fr); gap: 14px; margin-top: clamp(32px, 4vw, 48px); }
.tps-lbl { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.tps-lbl .tmh-ph { width: 16px; height: 16px; }
.tps-lbl small { flex-basis: 100%; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tm-muted); }
/* "What your people say": same red treatment as the home page's challenge quotes (.tmp-challenges) */
.tps-say { margin: 0; padding: 22px; border-radius: 20px; position: relative; transition: border-color .2s;
  background: linear-gradient(180deg, rgba(255,58,94,.09), rgba(255,58,94,0) 55%), var(--tm-surface); border: 1px solid rgba(255,58,94,.22); }
.tps-say:hover { border-color: rgba(255,58,94,.5); }
.tps-say::after { content: ''; position: absolute; left: 30px; bottom: -10px; width: 20px; height: 20px; transform: rotate(45deg); background: var(--tm-surface); border-right: inherit; border-bottom: inherit; }
.tps-say .tps-lbl { color: var(--tm-red-soft); }
.tps-say blockquote { margin: 0; font-size: clamp(19px, 1.6vw, 23px); font-weight: bold; font-style: italic; line-height: 1.4; color: #E6E6EE; }
.tps-block { padding: 22px; border-radius: 20px; background: var(--tm-surface); border: 1px solid var(--tm-line); }
.tps-block p { margin: 0 0 10px; font-size: 15.5px; font-weight: 300; line-height: 1.55; color: var(--tm-ink-2); }
.tps-block b { font-weight: 500; color: #fff; } .tps-block i { color: #fff; }
.tps-block--does { border-color: rgba(180,150,255,.35); background: linear-gradient(160deg, rgba(110,70,240,.16), transparent 70%), var(--tm-surface); }
.tps-block--does .tps-lbl { color: var(--tm-lilac); }
.tps-two { display: grid; gap: 6px; margin: 4px 0 12px; padding: 0; list-style: none; }
.tps-two li { display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.25); font-size: 14px; color: var(--tm-ink-2); }
.tps-two .tmh-ph { width: 20px; height: 20px; flex: none; color: var(--tm-lilac); } .tps-two b { display: block; color: #fff; font-weight: 500; }

/* measure picker */
.tps-measure { margin-top: 14px; padding: 22px; border-radius: 20px; background: #17171C; border: 1px solid var(--tm-line); }
.tps-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.tps-metrics button { width: 100%; height: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--tm-line);
  background: var(--tm-surface); color: var(--tm-ink-2); font: 400 14px/1.4 var(--tm-font); text-align: left; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.tps-metrics button:hover { border-color: rgba(255,129,151,.5); }
.tps-metrics em { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font: 700 15px/1 var(--tm-font); font-style: normal; }
.tps-metrics em .tmh-ph { width: 18px; height: 18px; }
.tps-metrics button > .tmh-ph { width: 20px; height: 20px; padding: 5px; box-sizing: content-box; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); color: var(--tm-ink-2); }
.tps-metrics button[aria-pressed="true"] { border-color: var(--tm-red-soft); background: rgba(255,58,94,.1); color: #fff; }
.tps-metrics button[aria-pressed="true"] > .tmh-ph { background: #D81F46; border-color: #D81F46; color: #fff; }

/* objection */
.tps-objection { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4px 28px; align-items: start; margin-top: 14px; padding: 22px; border-radius: 20px; border: 1px dashed rgba(255,255,255,.18); }
.tps-objection .tps-lbl { grid-column: 1 / -1; }
.tps-objection h3 { margin: 0; font-size: clamp(20px, 1.8vw, 26px); font-weight: 400; font-style: italic; line-height: 1.3; }
.tps-objection p { margin: 0 0 10px; font-size: 16px; font-weight: 300; line-height: 1.55; color: var(--tm-ink-2); } .tps-objection b { color: #fff; font-weight: 500; }
.tps-sol .tmp-ctas { margin-top: 28px; }

/* friction check */
.tps-check { background: radial-gradient(60% 60% at 50% 0%, rgba(255,58,94,.08), transparent 70%), var(--tm-bg); }
.tps-check__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 40px); align-items: start; margin-top: clamp(32px, 4vw, 48px); }
.tps-check__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tps-check__list button { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--tm-line); background: var(--tm-surface);
  color: var(--tm-ink-2); font: italic 300 17px/1.4 var(--tm-font); text-align: left; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.tps-check__list button > .tmh-ph { width: 18px; height: 18px; flex: none; padding: 4px; border-radius: 7px; border: 1.5px solid rgba(255,255,255,.3); color: transparent; transition: all .2s; }
.tps-check__list button:hover { border-color: rgba(180,150,255,.5); }
.tps-check__list button[aria-pressed="true"] { border-color: var(--tm-lilac); background: rgba(110,70,240,.18); color: #fff; }
.tps-check__list button[aria-pressed="true"] > .tmh-ph { background: var(--tm-purple); border-color: var(--tm-purple); color: #fff; }
.tps-check__out { position: sticky; top: 100px; padding: 24px; border-radius: 20px; background: linear-gradient(160deg, rgba(110,70,240,.22), rgba(110,70,240,.04)), var(--tm-surface); border: 1px solid rgba(180,150,255,.35); }
.tps-check__out p { margin: 0 0 12px; font-size: 16px; color: var(--tm-ink-2); line-height: 1.5; }
.tps-check__out a:not(.tmp-btn) { color: var(--tm-lilac); font-weight: 500; }
.tps-check__n b { display: block; font-size: 40px; font-weight: 500; color: #fff; line-height: 1.1; }
.tps-check__empty { display: flex; align-items: center; gap: 10px; } .tps-check__empty .tmh-ph { width: 22px; height: 22px; color: var(--tm-lilac); }
.tps-check__out .tmp-ctas { margin-top: 18px; }

/* audit tray */
.tps-tray { position: fixed; left: 50%; bottom: 16px; z-index: 60; width: min(760px, calc(100% - 32px)); transform: translateX(-50%); animation: tpp-rise .4s cubic-bezier(.2,.7,.2,1) both; }
.tps-tray.is-bump .tps-tray__n { animation: tps-bump .5s ease; }
@keyframes tps-bump { 40% { transform: scale(1.35); } }
.tps-tray__in { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 18px; background: rgba(28,28,34,.92); border: 1px solid rgba(255,129,151,.45);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 20px 50px -14px rgba(0,0,0,.8); }
.tps-tray__n { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: #D81F46; color: #fff; font-weight: 700; }
.tps-tray p { flex: 1; min-width: 0; margin: 0; font-size: 13px; color: var(--tm-muted); }
.tps-tray p b { display: block; font-size: 14px; font-weight: 500; color: #fff; }
.tps-tray p span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tps-tray__clear { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: transparent; color: var(--tm-ink-2); cursor: pointer; }
.tps-tray__clear .tmh-ph { width: 16px; height: 16px; }
.tps-tray .tmp-btn { flex: none; min-height: 42px; font-size: 15px; padding: 0 16px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .tps-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tps-blocks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tps-say { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .tps-ai__grid, .tps-onb__grid, .tps-check__grid, .tps-objection { grid-template-columns: minmax(0, 1fr); }
  .tps-check__out { position: static; }
  .tps-blocks { grid-template-columns: minmax(0, 1fr); }
  .tps-mig__row ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tps-sit__path { flex-direction: column; gap: 16px; } .tps-sit__path li { flex: none; }
  .tps-sit__path li:not(:last-child)::after { right: auto; left: 28px; top: auto; bottom: -13px; margin: 0; transform: rotate(135deg); }
}
@media (max-width: 699px) {
  .tps-ways { grid-template-columns: minmax(0, 1fr); }
  .tps-way { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 14px; }
  .tps-way .tmp-sol-ic { width: 56px; height: 56px; border-radius: 16px; } .tps-way .tmp-sol-ic > .tmh-ph { width: 28px; height: 28px; }
  .tps-way .tmp-sol-ic em { width: 26px; height: 26px; right: -7px; bottom: -7px; } .tps-way .tmp-sol-ic em .tmh-ph { width: 14px; height: 14px; }
  .tps-way > b { margin: 0; flex: 1; } .tps-strike { flex-basis: 100%; margin-top: 8px; } .tps-way__go { display: none; }
  .tps-demo__bar { flex-direction: column; align-items: stretch; } .tps-toggle { display: flex; } .tps-toggle button { flex: 1 1 auto; }
  .tps-field__dots { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tps-onb__days { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tps-mig__plat { grid-template-columns: minmax(0, 1fr); } .tps-mig__arrow { justify-self: center; transform: rotate(90deg); }
  .tps-mig__row ul { grid-template-columns: minmax(0, 1fr); }
  .tps-tray { bottom: 10px; width: calc(100% - 20px); }
  .tps-tray__in { gap: 8px; padding: 8px; border-radius: 16px; }
  .tps-tray__n { width: 32px; height: 32px; }
  .tps-tray p b { font-size: 13px; } .tps-tray p span { display: none; }
  .tps-tray__clear { width: 30px; height: 30px; }
  .tps-tray .tmp-btn { width: auto; min-height: 38px; padding: 0 12px; font-size: 14px; }
  .tps-mig__ticks { font-size: 11.5px; } .tps-mig__ticks li:nth-child(2), .tps-mig__ticks li:nth-child(3) { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tps-bg__row { animation: none; }
    .tps-strike s { text-decoration-color: var(--tm-red); } .tps-strike ins { opacity: 1; transform: none; }
}

.tps.has-tray .tmp-foot { padding-bottom: 120px; }


/* ==========================================================================
   Pricing page (.tpr-). Builds on the home, product and solutions styles.
   ========================================================================== */
.tpr [id] { scroll-margin-top: 84px; }
.tpr-center { text-align: center; margin-left: auto; margin-right: auto; }
.tpr-link { display: inline-flex; align-items: center; gap: 8px; color: var(--tm-lilac); font-size: 15px; font-weight: 500; text-decoration: none; }
.tpr-link .tmh-ph { width: 16px; height: 16px; transition: transform .2s; }
.tpr-link:hover .tmh-ph:last-child { transform: translateX(3px); }

/* hero */
.tpr-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.tpr-facts li { padding: 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--tm-line); }
.tpr-facts b { display: block; white-space: nowrap; font-size: clamp(24px, 2.2vw, 32px); font-weight: 500; letter-spacing: -.02em; color: #fff; }
.tpr-facts li:nth-child(2) b { color: var(--tm-lilac); } .tpr-facts li:nth-child(3) b { color: var(--tm-green); }
.tpr-facts span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--tm-ink-2); }
.tpr-ladder { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; min-height: 420px; padding: 24px 18px 0;
  border-radius: 24px; background: radial-gradient(70% 70% at 60% 30%, rgba(110,70,240,.35), transparent 70%), rgba(20,20,26,.55); border: 1px solid rgba(255,255,255,.1); overflow: hidden; }
.tpr-ladder::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255,255,255,.12); }
.tpr-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 14px; border-radius: 16px 16px 0 0; color: #fff; text-decoration: none;
  border: 1px solid rgba(255,255,255,.12); border-bottom: 0; transform-origin: bottom; transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .5s, box-shadow .25s, background .25s;
  transition-delay: calc(var(--i) * .18s); }
.tpr-ladder:not(.is-in) .tpr-step { transform: scaleY(.2) translateY(40px); opacity: 0; }
.tpr-step--free { height: 52%; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); }
.tpr-step--business { height: 78%; background: linear-gradient(180deg, rgba(110,70,240,.65), rgba(110,70,240,.18)); border-color: rgba(180,150,255,.6); box-shadow: 0 0 60px -10px rgba(110,70,240,.7); }
.tpr-step--ent { height: 100%; background: linear-gradient(180deg, rgba(79,245,145,.16), rgba(79,245,145,.03)); border-color: rgba(79,245,145,.35); }
.tpr-step:hover { box-shadow: 0 0 0 2px var(--tm-lilac), 0 0 60px -10px rgba(110,70,240,.8); }
.tpr-step__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(0,0,0,.25); color: #fff; }
.tpr-step__ic .tmh-ph { width: 22px; height: 22px; }
.tpr-step--ent .tpr-step__ic { color: var(--tm-green); }
.tpr-step__name { margin-top: 6px; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--tm-ink-2); }
.tpr-step__price { font-size: clamp(30px, 2.8vw, 42px); font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.tpr-step__price small { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: #E4E4EE; }
.tpr-step__note { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-bottom: 6px; font-size: 12.5px; line-height: 1.35; color: #E4E4EE; }
.tpr-step__note .tmh-ph { width: 16px; height: 16px; flex: none; color: var(--tm-green); }
.tpr-step__badge { position: absolute; top: -13px; left: 14px; padding: 3px 10px; border-radius: 999px; background: #fff; color: #3A2A78; font-size: 11.5px; font-weight: 600; }

/* plan cards */
.tpr-plans { background: var(--tm-bg-2); }
.tpr-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin-top: clamp(32px, 4vw, 48px); }
.tpr-card { position: relative; display: flex; flex-direction: column; padding: 26px 24px; border-radius: 22px; background: var(--tm-surface); border: 1px solid var(--tm-line); transition: box-shadow .4s; }
.tpr-card.is-flash { animation: tpr-flash 1.6s ease; }
@keyframes tpr-flash { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px var(--tm-lilac), 0 0 60px rgba(110,70,240,.6); } }
.tpr-card--featured { border: 1.5px solid var(--tm-lilac); background: linear-gradient(170deg, rgba(110,70,240,.32), rgba(110,70,240,.06) 45%), var(--tm-surface);
  box-shadow: 0 30px 80px -30px rgba(110,70,240,.8); transform: translateY(-10px); }
.tpr-card__badge { position: absolute; top: -14px; left: 24px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--tm-purple);
  border: 1.5px solid #fff; font-size: 12.5px; font-weight: 600; color: #fff; }
.tpr-card__badge .tmh-ph { width: 14px; height: 14px; color: #FFD66B; }
.tpr-card__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(110,70,240,.2); color: var(--tm-lilac); }
.tpr-card__ic .tmh-ph { width: 24px; height: 24px; }
.tpr-card--featured .tpr-card__ic { background: radial-gradient(circle at 35% 30%, #8C6BFF, #5534D6 70%); color: #fff; }
.tpr-card h3 { margin: 16px 0 6px; font-size: 22px; font-weight: 500; }
.tpr-price { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.tpr-price b { font-size: clamp(40px, 3.6vw, 52px); font-weight: 500; letter-spacing: -.03em; line-height: 1.05; }
.tpr-price span { font-size: 15px; color: var(--tm-ink-2); }
.tpr-price__sub { margin: 6px 0 0; font-size: 14.5px; color: var(--tm-ink-2); } .tpr-price__sub b { font-weight: 500; color: var(--tm-lilac); }
.tpr-card__lede { margin: 14px 0 0; font-size: 15.5px; font-weight: 300; line-height: 1.5; color: var(--tm-ink-2); }
.tpr-limits { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 0; padding: 12px; list-style: none; border-radius: 14px; background: rgba(0,0,0,.25); }
.tpr-limits li { position: relative; display: flex; justify-content: space-between; font-size: 13.5px; color: var(--tm-ink-2); padding-bottom: 7px; }
.tpr-limits li::after { content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: var(--w); border-radius: 2px; background: linear-gradient(90deg, var(--tm-lilac), rgba(180,150,255,.3)); }
.tpr-limits b { font-weight: 500; color: #fff; }
.tpr-feats { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; flex: 1; }
.tpr-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.4; color: var(--tm-ink-2); }
.tpr-feats .tmh-ph { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--tm-green); }
.tpr-feats b { font-weight: 500; color: #fff; }
.tpr-feats--ent .tmh-ph { color: var(--tm-lilac); }
.tpr-best { margin: 18px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); font-size: 14px; line-height: 1.45; color: var(--tm-ink-2); }
.tpr-best b { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--tm-lilac); }
.tpr-card__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 20px; }
.tpr-card__ctas .tmp-btn { flex: 1 1 auto; }
.tpr-est { margin-top: 18px; padding: 14px; border-radius: 14px; background: rgba(0,0,0,.3); border: 1px solid rgba(180,150,255,.35); }
.tpr-est label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tm-muted); }
.tpr-est__row { display: flex; align-items: center; gap: 8px; }
.tpr-est__btn { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: transparent; color: #fff; cursor: pointer; }
.tpr-est__btn:hover { background: rgba(110,70,240,.3); } .tpr-est__btn .tmh-ph { width: 16px; height: 16px; }
.tpr-est input { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: #1B1B22; color: #fff;
  font: 500 18px/1 var(--tm-font); text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.tpr-est input::-webkit-outer-spin-button, .tpr-est input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tpr-est__unit { font-size: 14px; color: var(--tm-ink-2); }
.tpr-est__out { margin: 10px 0 0; font-size: 16px; font-weight: 500; color: var(--tm-lilac); font-variant-numeric: tabular-nums; }

/* ROI calculator */
.tpr-roi { background: radial-gradient(60% 60% at 80% 40%, rgba(79,245,145,.07), transparent 70%), var(--tm-bg); }
.tpr-calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
.tpr-calc__in, .tpr-calc__out { padding: clamp(18px, 2.4vw, 28px); border-radius: 22px; border: 1px solid var(--tm-line); }
.tpr-calc__in { display: flex; flex-direction: column; gap: 26px; background: var(--tm-surface); }
.tpr-calc__out { background: linear-gradient(160deg, rgba(110,70,240,.2), rgba(110,70,240,.04) 60%), #17171C; border-color: rgba(180,150,255,.3); }
.tpr-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.tpr-field label, .tpr-field legend { display: flex; justify-content: space-between; align-items: baseline; width: 100%; margin-bottom: 10px; padding: 0; font-size: 15px; color: var(--tm-ink-2); }
.tpr-field output { font-size: 24px; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.tpr-field input[type=range] { width: 100%; height: 28px; margin: 0; accent-color: var(--tm-purple); cursor: pointer; }
.tpr-field__hint { display: flex; justify-content: space-between; margin: 4px 0 0; font-size: 12px; color: var(--tm-muted); }
.tpr-field__hint--txt { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.4; }
.tpr-mins { display: flex; } .tpr-mins button { flex: 1; font-size: 15px; }
.tpr-multiple { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0; }
.tpr-multiple b { font-size: clamp(56px, 6vw, 84px); font-weight: 500; letter-spacing: -.04em; line-height: 1; color: var(--tm-green); font-variant-numeric: tabular-nums; }
.tpr-multiple span { font-size: 16px; color: var(--tm-ink-2); }
.tpr-calc.is-below .tpr-multiple b { color: var(--tm-red-soft); }
.tpr-bars { display: flex; flex-direction: column; gap: 12px; margin: 22px 0; }
.tpr-bar { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13.5px; color: var(--tm-ink-2); }
.tpr-bar i { display: block; height: 14px; border-radius: 7px; min-width: 4px; transition: width .6s cubic-bezier(.2,.7,.2,1); }
.tpr-bar--cost i { position: relative; overflow: hidden; background: var(--tm-hatch); }
.tpr-bar--cost em { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--tm-purple), var(--tm-lilac)); transition: width .6s cubic-bezier(.2,.7,.2,1); }
/* the year-one cost, split: licence (paid to Teamenu) and curation time (the customer's own people) */
.tpr-split { display: grid; gap: 10px; margin: -6px 0 20px; padding: 0; list-style: none; }
.tpr-split li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: start; font-size: 14px; color: var(--tm-ink-2); }
.tpr-split li > i { width: 14px; height: 14px; margin-top: 3px; border-radius: 4px; }
.tpr-split .is-lic > i { background: var(--tm-lilac); } .tpr-split .is-cur > i { background: var(--tm-hatch); }
.tpr-split span b { font-weight: 500; color: #fff; } .tpr-split small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--tm-muted); }
.tpr-split li > b { font-size: 16px; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; } .tpr-split .is-lic > b { color: var(--tm-lilac); }
.tpr-bar--value i { background: linear-gradient(90deg, #1FB866, var(--tm-green)); box-shadow: 0 0 16px rgba(79,245,145,.4); }
.tpr-bar b { font-size: 16px; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; min-width: 6.5em; text-align: right; }
.tpr-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.tpr-kpis div { padding: 12px 14px; border-radius: 14px; background: rgba(0,0,0,.25); }
.tpr-kpis dt { font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--tm-muted); }
.tpr-kpis dd { margin: 4px 0 0; font-size: 22px; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.tpr-calc__note { margin: 14px 0 0; font-size: 12.5px; color: var(--tm-muted); }
.tpr-calc__out .tmp-ctas { margin-top: 20px; }

/* compare */
.tpr-compare { background: var(--tm-bg-2); }
.tpr-compare__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.tpr-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--tm-ink-2); cursor: pointer; user-select: none; }
.tpr-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tpr-switch span { position: relative; width: 44px; height: 24px; border-radius: 12px; background: #3A3A46; transition: background .2s; }
.tpr-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.tpr-switch input:checked + span { background: var(--tm-purple); } .tpr-switch input:checked + span::after { transform: translateX(20px); }
.tpr-switch input:focus-visible + span { outline: 3px solid var(--tm-lilac); outline-offset: 2px; }
.tpr-table-wrap { margin-top: 24px; border-radius: 20px; border: 1px solid var(--tm-line); background: var(--tm-surface); overflow: hidden; overflow: clip; }
.tpr-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tpr-table th, .tpr-table td { padding: 14px 18px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.06); }
.tpr-table th[scope=row] { text-align: left; font-weight: 400; color: var(--tm-ink-2); }
.tpr-table thead th { position: sticky; top: 72px; z-index: 2; background: #262630; font-size: 16px; font-weight: 500; color: #fff; }
.tpr-table thead th:first-child { text-align: left; color: var(--tm-muted); font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.tpr-table .is-biz { background: rgba(110,70,240,.1); }
.tpr-table thead .is-biz { background: #3A2D73; color: #fff; }
.tpr-table td { color: #fff; width: 26%; }
.tpr-table td .tmh-ph { width: 20px; height: 20px; vertical-align: -4px; }
.tpr-table td:not(:has(.tpr-yes, .tpr-no)) .tmh-ph { width: 17px; height: 17px; margin-right: 6px; color: var(--tm-green); }
.tpr-yes { color: var(--tm-green); } .tpr-no { color: #5A5A66; }
.tpr-row--price td b { font-size: 17px; font-weight: 500; } .tpr-row--price .is-biz b { color: var(--tm-lilac); }
.tpr-table tbody tr { transition: opacity .3s; }
.tpr-table tbody tr:hover th, .tpr-table tbody tr:hover td { box-shadow: inset 0 0 0 999px rgba(255,255,255,.035); }
.tpr-table.is-diff tbody tr:not([data-diff]) { display: none; }
.tpr-table tfoot td { border-bottom: 0; padding: 18px; } .tpr-table tfoot .tmp-btn { min-height: 44px; font-size: 15px; padding: 0 18px; }
.tpr-ent-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 4px 0; font-size: 15px; color: var(--tm-ink-2); }
.tpr-ent-note > .tmh-ph { width: 20px; height: 20px; color: var(--tm-green); }
.tpr-ent-note a { display: inline-flex; align-items: center; gap: 6px; color: var(--tm-lilac); font-weight: 500; text-decoration: none; }
.tpr-ent-note a .tmh-ph { width: 16px; height: 16px; }

/* plan finder */
.tpr-finder { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 3vw, 40px); align-items: start; margin-top: clamp(32px, 4vw, 48px); }
.tpr-qs { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: q; }
.tpr-qs li { counter-increment: q; padding: 18px; border-radius: 18px; background: var(--tm-surface); border: 1px solid var(--tm-line); }
.tpr-q { display: flex; gap: 12px; margin: 0 0 12px; font-size: 16.5px; line-height: 1.4; color: #fff; }
.tpr-q::before { content: counter(q); display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--tm-purple); font-size: 13px; font-weight: 600; }
.tpr-qs .tps-toggle { display: flex; } .tpr-qs .tps-toggle button { flex: 1; min-height: 40px; font-size: 14px; }
.tpr-qs .tps-toggle button[aria-pressed="true"] { background: var(--tm-purple); color: #fff; }
.tpr-choices { display: flex; flex-direction: column; gap: 12px; }
.tpr-choice { position: relative; padding: 20px 22px; border-radius: 18px; background: var(--tm-surface); border: 1px solid var(--tm-line); transition: opacity .35s, border-color .35s, transform .35s, box-shadow .35s; }
.tpr-choice h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 19px; font-weight: 500; }
.tpr-choice h3 .tmh-ph { width: 22px; height: 22px; color: var(--tm-lilac); }
.tpr-choice p { margin: 0 0 12px; font-size: 15.5px; font-weight: 300; line-height: 1.5; color: var(--tm-ink-2); }
.tpr-finder.has-pick .tpr-choice:not(.is-pick) { opacity: .4; }
.tpr-choice.is-pick { border-color: var(--tm-lilac); background: linear-gradient(160deg, rgba(110,70,240,.3), rgba(110,70,240,.06)), var(--tm-surface); transform: translateX(-6px); box-shadow: 0 20px 50px -20px rgba(110,70,240,.8); }
.tpr-choice__tag:empty { display: none; }
.tpr-choice__tag { position: absolute; top: -11px; right: 18px; padding: 3px 10px; border-radius: 999px; background: var(--tm-green); color: #0E2A1B; font-size: 12px; font-weight: 600; animation: tpp-pop .4s cubic-bezier(.2,.8,.2,1.3); }

/* closing */
.tpr-close__nums { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin: 22px 0 0; font-size: 18px; color: var(--tm-ink-2); }
.tpr-close__nums b { font-size: 30px; font-weight: 500; color: #fff; margin-right: 4px; }

/* responsive */
@media (max-width: 1023px) {
  .tpr-cards { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; }
  .tpr-card--featured { transform: none; order: -1; }
  .tpr-calc, .tpr-finder { grid-template-columns: minmax(0, 1fr); }
  .tpr-ladder { min-height: 340px; }
}
@media (max-width: 699px) {
  .tpr-facts { grid-template-columns: minmax(0, 1fr); } .tpr-facts li { display: flex; align-items: baseline; gap: 10px; } .tpr-facts span { margin: 0; }
  .tpr-ladder { min-height: 340px; gap: 6px; padding: 22px 8px 0; }
  .tpr-step--free { height: 60%; } .tpr-step__price { font-size: 26px; } .tpr-step__name { font-size: 11px; }
  .tpr-step { padding: 12px 8px; } .tpr-step__note { font-size: 11px; } .tpr-step__ic { width: 32px; height: 32px; } .tpr-step__ic .tmh-ph { width: 18px; height: 18px; }
  .tpr-step__badge { left: 8px; font-size: 10.5px; }
  .tpr-bar { grid-template-columns: minmax(0, 1fr) auto; } .tpr-bar span { grid-column: 1 / -1; } .tpr-bar b { min-width: 0; }
  .tpr-kpis dd { font-size: 19px; }
  .tpr-table { font-size: 14px; } .tpr-table th, .tpr-table td { padding: 12px 8px; } .tpr-table th[scope=row] { padding-left: 12px; }
  .tpr-table thead th { top: 64px; font-size: 14px; } .tpr-table td { width: 24%; } .tpr-table th[scope=row] { font-size: 13.5px; }
  .tpr-table tfoot .tmp-btn { width: 100%; padding: 0 8px; font-size: 13px; }
  .tpr-choice.is-pick { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .tpr-ladder .tpr-step { transform: none !important; opacity: 1 !important; } }


/* ==========================================================================
   About page (.tpa-). Builds on the home, product and solutions styles.
   ========================================================================== */
.tpa [id] { scroll-margin-top: 84px; }
.tpa-big { max-width: 22em; margin: clamp(36px, 5vw, 64px) auto 0; text-align: center; font-size: clamp(24px, 2.6vw, 38px); font-weight: 300; line-height: 1.25; letter-spacing: -.01em; color: #fff; }
.tpa-big strong { font-weight: 500; color: var(--tm-lilac); }
.tpa-big--sm { font-size: clamp(20px, 2vw, 28px); margin-top: 32px; }
.tpa-big--strike s { color: var(--tm-muted); text-decoration-color: var(--tm-red); text-decoration-thickness: 2px; }

/* hero */
.tpa-hero .tpp-hero__grid { align-items: center; }
.tpa-hero__ai { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.45; color: var(--tm-red-soft); }
.tpa-hero__ai .tmh-ph { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.tpa-hero__mission { margin: 18px 0 0; padding-left: 16px; border-left: 3px solid var(--tm-purple); font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; line-height: 1.35; color: #fff; }
.tpa-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.tpa-facts li { padding: 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--tm-line); }
.tpa-facts b { display: block; font-size: clamp(26px, 2.4vw, 34px); font-weight: 500; letter-spacing: -.02em; color: #fff; white-space: nowrap; }
.tpa-facts li:nth-child(2) b { color: var(--tm-lilac); } .tpa-facts li:nth-child(3) b { color: var(--tm-green); }
.tpa-facts span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--tm-ink-2); }
.tpa-hero__next { position: relative; display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 48px); }
.tpa-hero__next .tmh-teaser { position: static; transform: none; }
.tpa-hero__next .tmh-teaser:hover { transform: translateY(-2px); }

.tpa-mess { position: relative; margin: 0; border-radius: 24px; background: radial-gradient(60% 60% at 50% 50%, rgba(110,70,240,.28), transparent 70%), rgba(20,20,26,.6); border: 1px solid rgba(255,255,255,.1); overflow: hidden; }
.tpa-mess__bar { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.tpa-mess__state { font-size: 14px; font-weight: 500; color: var(--tm-red-soft); transition: color .4s; }
.tpa-mess.is-ok .tpa-mess__state { color: var(--tm-green); }
.tpa-mess__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(180,150,255,.5); background: rgba(110,70,240,.25); color: #fff; font: 500 14px/1 var(--tm-font); cursor: pointer; white-space: nowrap; }
.tpa-mess__btn:hover { background: rgba(110,70,240,.45); } .tpa-mess__btn .tmh-ph { width: 16px; height: 16px; }
.tpa-mess__stage { position: relative; aspect-ratio: 1 / .86; }
.tpa-mess__apps { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.tpa-mess__apps li { position: absolute; left: 50%; top: 50%; z-index: 2; }
.tpa-mess.is-ready .tpa-mess__apps li { transition: left 1.1s cubic-bezier(.6,0,.2,1), top 1.1s cubic-bezier(.6,0,.2,1), transform 1.1s cubic-bezier(.6,0,.2,1); }
.tpa-mess__apps .tmh-app { width: clamp(34px, 3.4vw, 46px); height: clamp(34px, 3.4vw, 46px); border-radius: 11px; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.tpa-mess:not(.is-ok) .tpa-mess__apps li { animation: tpa-jitter 3.2s ease-in-out infinite; animation-delay: calc(var(--j, 0) * -1s); }
.tpa-mess__apps li:nth-child(3n) { --j: 1.1; } .tpa-mess__apps li:nth-child(3n+1) { --j: 2.2; }
@keyframes tpa-jitter { 50% { translate: 0 -5px; } }
.tpa-mess__lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; transition: opacity .8s; }
.tpa-mess__lines--mess path { stroke: rgba(255,58,94,.55); stroke-width: 1.4; stroke-dasharray: 4 5; }
.tpa-mess__lines--ok path { stroke: var(--tm-lilac); stroke-width: 1.6; stroke-dasharray: 3 7; animation: tpa-flow 1.2s linear infinite; opacity: .85; }
.tpa-mess.is-ok .tpa-mess__lines--mess, .tpa-mess:not(.is-ok) .tpa-mess__lines--ok { opacity: 0; }
@keyframes tpa-flow { to { stroke-dashoffset: -20; } }
.tpa-mess__core { position: absolute; left: 50%; top: 50%; z-index: 2; display: flex; gap: 6px; transform: translate(-50%,-50%); }
.tpa-mess__who { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #3A3A46; color: #fff; border: 2px solid rgba(255,255,255,.2); transition: background .6s, box-shadow .6s, opacity .6s; }
.tpa-mess__who .tmh-ph { width: 26px; height: 26px; }
.tpa-mess__who--ai { opacity: .35; }
.tpa-mess.is-ok .tpa-mess__who { background: var(--tm-purple); border-color: #fff; box-shadow: 0 0 40px rgba(110,70,240,.9); }
.tpa-mess.is-ok .tpa-mess__who--ai { opacity: 1; background: #1FB866; box-shadow: 0 0 40px rgba(79,245,145,.6); }
.tpa-mess__q { position: absolute; top: -18px; font-size: 18px; font-weight: 700; color: var(--tm-red-soft); animation: tpa-q 2.4s ease-in-out infinite; transition: opacity .4s; }
.tpa-mess__q:nth-of-type(1) { left: -10px; } .tpa-mess__q:nth-of-type(2) { left: 22px; top: -30px; animation-delay: .8s; } .tpa-mess__q:nth-of-type(3) { left: 54px; animation-delay: 1.6s; }
.tpa-mess.is-ok .tpa-mess__q { opacity: 0; animation: none; }
@keyframes tpa-q { 0%, 100% { transform: translateY(0); opacity: .3; } 50% { transform: translateY(-6px); opacity: 1; } }

/* five waves */
.tpa-waves { background: var(--tm-bg-2); }
.tpa-tl { position: relative; margin-top: clamp(32px, 4vw, 52px); }
.tpa-tl__chart { position: relative; height: 120px; margin: 0 0 6px; }
.tpa-tl__chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.tpa-tl__grid { stroke: rgba(255,255,255,.1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tpa-tl__cap, .tpa-tl__cx, .tpa-tl__fix { stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1); }
.tpa-tl__cap { stroke: var(--tm-lilac); } .tpa-tl__cx { stroke: var(--tm-red); } .tpa-tl__fix { stroke: var(--tm-green); stroke-dasharray: 100 100; }
.tpa-tl__dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--tm-bg-2); border: 2.5px solid; opacity: 0; transform: scale(.4); transition: opacity .4s .5s, transform .4s .5s; }
.tpa-tl__dot--cap { border-color: var(--tm-lilac); } .tpa-tl__dot--cx { border-color: var(--tm-red); } .tpa-tl__dot--fix { border-color: var(--tm-green); background: var(--tm-green); }
.tpa-tl__dot.is-on { opacity: 1; transform: none; }
.tpa-tl__legend { position: absolute; left: 0; top: 0; display: flex; gap: 16px; margin: 0; font-size: 12.5px; color: var(--tm-muted); }
.tpa-tl__k { display: inline-flex; align-items: center; gap: 6px; } .tpa-tl__k::before { content: ''; width: 14px; height: 3px; border-radius: 2px; }
.tpa-tl__k--cap::before { background: var(--tm-lilac); } .tpa-tl__k--cx::before { background: var(--tm-red); }
.tpa-tl__stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tpa-stage__btn { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; height: 100%; padding: 16px; border-radius: 18px; border: 1px solid var(--tm-line); background: var(--tm-surface);
  color: #fff; font: inherit; text-align: left; cursor: pointer; opacity: .5; transition: opacity .5s, border-color .5s, background .5s, transform .5s, box-shadow .5s; }
.tpa-stage.is-past .tpa-stage__btn { opacity: .78; }
.tpa-stage.is-on .tpa-stage__btn { opacity: 1; border-color: rgba(255,58,94,.55); background: linear-gradient(170deg, rgba(255,58,94,.12), transparent 60%), var(--tm-surface); transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(255,58,94,.6); }
.tpa-stage--next.is-on .tpa-stage__btn { border-color: var(--tm-green); background: linear-gradient(170deg, rgba(79,245,145,.14), rgba(110,70,240,.12) 60%), var(--tm-surface); box-shadow: 0 24px 60px -20px rgba(79,245,145,.5); }
.tpa-stage__btn:hover { opacity: 1; }
.tpa-stage__era { font-size: 12.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--tm-muted); }
.tpa-stage--next .tpa-stage__era { color: var(--tm-green); }
.tpa-stage__name { font-size: 17px; font-weight: 500; line-height: 1.25; }
.tpa-stage__warn { display: flex; gap: 7px; align-items: flex-start; font-size: 14px; line-height: 1.35; color: var(--tm-red-soft); }
.tpa-stage__warn .tmh-ph { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.tpa-stage__warn--ok { color: var(--tm-green); }
.tpa-stage.is-on .tpa-stage__warn { animation: tpa-blink .9s ease 2; }
.tpa-stage--next.is-on .tpa-stage__warn { animation: none; }
@keyframes tpa-blink { 50% { opacity: .35; } }
/* stage illustrations */
.tpa-stage__art { position: relative; display: block; width: 100%; height: 104px; border-radius: 12px; background: rgba(0,0,0,.25); overflow: hidden; }
.tpa-art--storage .tpa-art__hub { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 12px; background: #3A3A46; color: #fff; }
.tpa-art--storage .tpa-art__hub .tmh-ph { width: 26px; height: 26px; }
.tpa-art--storage > .tmh-ph { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; color: var(--tm-ink-2); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.tpa-stage.is-on .tpa-art--storage > .f1, .tpa-stage.is-past .tpa-art--storage > .f1 { transform: translate(-62px, -28px) rotate(-14deg); }
.tpa-stage.is-on .tpa-art--storage > .f2, .tpa-stage.is-past .tpa-art--storage > .f2 { transform: translate(58px, -30px) rotate(12deg); }
.tpa-stage.is-on .tpa-art--storage > .f3, .tpa-stage.is-past .tpa-art--storage > .f3 { transform: translate(-70px, 24px) rotate(8deg); }
.tpa-stage.is-on .tpa-art--storage > .f4, .tpa-stage.is-past .tpa-art--storage > .f4 { transform: translate(64px, 26px) rotate(-10deg); }
.tpa-stage.is-on .tpa-art--storage > .f5, .tpa-stage.is-past .tpa-art--storage > .f5 { transform: translate(0, 38px) rotate(20deg); }
.tpa-art--silos { display: flex; align-items: flex-end; justify-content: center; gap: 0; padding: 12px 10px 0; }
.tpa-silo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; height: 0; padding-top: 10px; border: 2px solid rgba(255,255,255,.25); border-bottom: 0; border-radius: 8px 8px 0 0; background: rgba(255,255,255,.04); color: var(--tm-ink-2); transition: height 1s cubic-bezier(.2,.7,.2,1); overflow: hidden; }
.tpa-silo + .tpa-silo { margin-left: 8px; }
.tpa-silo .tmh-ph { width: 16px; height: 16px; }
.tpa-stage.is-on .tpa-silo, .tpa-stage.is-past .tpa-silo { height: 88px; }
.tpa-silo:nth-child(2) { transition-delay: .15s; } .tpa-silo:nth-child(3) { transition-delay: .3s; }
.tpa-art--cloud { display: grid; grid-template-columns: repeat(3, 24px); gap: 8px 14px; place-content: center; }
.tpa-art--cloud .tmh-app { opacity: 0; transform: scale(.3); transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1.4); transition-delay: calc(var(--d) * 90ms); }
.tpa-stage.is-on .tpa-art--cloud .tmh-app, .tpa-stage.is-past .tpa-art--cloud .tmh-app { opacity: 1; transform: none; }
.tpa-art--ai .tpa-art__ring { position: absolute; left: 50%; top: 50%; display: grid; grid-template-columns: 24px 24px; gap: 6px; transform: translate(-50%,-50%); z-index: 1; }
.tpa-art--ai em { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 2px; background: var(--tm-lilac); opacity: 0; transform: rotate(var(--a)) translateX(0); }
.tpa-stage.is-on .tpa-art--ai em, .tpa-stage.is-past .tpa-art--ai em { animation: tpa-sprawl 2.6s cubic-bezier(.2,.7,.2,1) infinite; }
.tpa-art--ai em:nth-of-type(2n) { animation-delay: .5s !important; background: var(--tm-red-soft); } .tpa-art--ai em:nth-of-type(3n) { animation-delay: 1.1s !important; }
@keyframes tpa-sprawl { 0% { opacity: 0; transform: rotate(var(--a)) translateX(14px); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(80px); } }
.tpa-art--next > svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.tpa-art--next path { stroke: var(--tm-green); stroke-width: 1.5; stroke-dasharray: 3 5; opacity: 0; transition: opacity .6s .4s; }
.tpa-stage.is-on .tpa-art--next path { opacity: 1; animation: tpa-flow 1s linear infinite; }
.tpa-art--next .n, .tpa-art--next .r { position: absolute; display: grid; place-items: center; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; color: #fff; }
.tpa-art--next .n { background: var(--tm-purple); } .tpa-art--next .n2 { background: #1FB866; }
.tpa-art--next .r { border-radius: 7px; background: #3A3A46; color: var(--tm-green); }
.tpa-art--next .tmh-ph { width: 15px; height: 15px; }
.tpa-art--next .n1 { left: 25%; top: 32.5%; } .tpa-art--next .n2 { left: 25%; top: 67.5%; }
.tpa-art--next .r1 { left: 76.6%; top: 17.5%; } .tpa-art--next .r2 { left: 76.6%; top: 50%; } .tpa-art--next .r3 { left: 76.6%; top: 82.5%; }

.tpa-nots { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.tpa-nots li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--tm-line); font-size: 14.5px; color: var(--tm-ink-2); }
.tpa-nots .tmh-ph { width: 15px; height: 15px; color: var(--tm-red-soft); flex: none; }
.tpa-nots li.is-ok { color: #fff; border-color: rgba(79,245,145,.4); background: rgba(79,245,145,.06); } .tpa-nots li.is-ok .tmh-ph { color: var(--tm-green); }
/* people as the glue */
.tpa-glue { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(48px, 6vw, 80px); }
.tpa-tri { position: relative; width: 100%; max-width: 380px; margin: 0 auto; aspect-ratio: 300 / 250; }
.tpa-tri > svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; overflow: visible; }
.tpa-tri__glue { stroke: var(--tm-red-soft); stroke-width: 2; stroke-dasharray: 4 5; transition: opacity .8s 1.8s; }
.tpa-tri__edge { stroke: var(--tm-green); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1); }
.tpa-tri.is-in .tpa-tri__edge { stroke-dashoffset: 0; } .tpa-tri.is-in .tpa-tri__edge:nth-of-type(3) { transition-delay: .5s; } .tpa-tri.is-in .tpa-tri__edge:nth-of-type(4) { transition-delay: 1s; }
.tpa-tri.is-in .tpa-tri__glue { opacity: 0; }
.tpa-tri__n { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--tm-surface); border: 1px solid rgba(255,255,255,.2); font-size: 14px; font-weight: 500; transform: translate(-50%,-50%); white-space: nowrap; }
.tpa-tri__n .tmh-ph { width: 16px; height: 16px; color: var(--tm-lilac); }
.tpa-tri__n--a { left: 50%; top: 20%; } .tpa-tri__n--b { left: 20%; top: 82%; } .tpa-tri__n--c { left: 80%; top: 82%; }
.tpa-tri__me { position: absolute; left: 50%; top: 56%; display: flex; flex-direction: column; align-items: center; gap: 2px; transform: translate(-50%,-50%); color: var(--tm-red-soft); transition: opacity .8s 1.8s, transform .8s 1.8s; }
.tpa-tri__me .tmh-ph { width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: rgba(255,58,94,.18); }
.tpa-tri__me small { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.tpa-tri.is-in .tpa-tri__me { opacity: 0; transform: translate(-50%,-30%) scale(.8); }
.tpa-glue__txt p { margin: 0; font-size: clamp(17px, 1.4vw, 20px); font-weight: 300; line-height: 1.5; color: var(--tm-ink-2); }
.tpa-glue__pull { margin-top: 18px !important; font-size: clamp(22px, 2.1vw, 30px) !important; line-height: 1.3 !important; color: #fff !important; }
.tpa-glue__pull strong { font-weight: 500; color: var(--tm-lilac); }

/* a third way */
.tpa-third { background: var(--tm-bg-2); }
.tpa-ways { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 14px; align-items: stretch; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
.tpa-way { position: relative; display: flex; flex-direction: column; padding: 20px; border-radius: 22px; background: var(--tm-surface); border: 1px solid var(--tm-line); }
.tpa-way--ours { order: 0; border: 1.5px solid var(--tm-lilac); background: linear-gradient(170deg, rgba(110,70,240,.3), rgba(110,70,240,.05) 50%), var(--tm-surface); box-shadow: 0 30px 80px -30px rgba(110,70,240,.8); transform: translateY(-10px); }
.tpa-way--one { order: -1; } .tpa-way--sprawl { order: 1; }
.tpa-way__badge { position: absolute; top: -14px; left: 20px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--tm-purple); border: 1.5px solid #fff; font-size: 12.5px; font-weight: 600; }
.tpa-way__badge .tmh-ph { width: 14px; height: 14px; color: var(--tm-green); }
.tpa-way h3 { margin: 18px 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tm-ink-2); }
.tpa-way--ours h3 { color: #fff; font-size: 14px; }
.tpa-way p { margin: 0; font-size: 17px; line-height: 1.4; color: #fff; }
.tpa-way em { font-style: normal; font-weight: 500; }
.tpa-loss { color: var(--tm-red-soft); } .tpa-gain { color: var(--tm-green); }
.tpa-way__art { position: relative; display: block; height: 150px; border-radius: 14px; background: rgba(0,0,0,.25); overflow: hidden; }
.tpa-one { position: absolute; inset: 22px 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: 12px; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.05); transition: inset .9s cubic-bezier(.6,0,.2,1); }
.tpa-one > .tmh-ph { width: 22px; height: 22px; color: var(--tm-red-soft); }
.tpa-one > span { display: grid; grid-template-columns: repeat(3, 18px); gap: 8px; color: var(--tm-muted); }
.tpa-one > span .tmh-ph { width: 18px; height: 18px; }
.tpa-ways.is-in .tpa-one { inset: 30px 52px; }
.tpa-sprawl { position: absolute; inset: 14px 18px; }
.tpa-sprawl .tmh-app { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%,-50%) rotate(var(--r)); transition: left 1.2s, top 1.2s; }
.tpa-ways.is-in .tpa-sprawl .tmh-app { animation: tpa-drift 5s ease-in-out infinite alternate; }
.tpa-sprawl .tmh-app:nth-child(2n) { animation-duration: 6.5s !important; } .tpa-sprawl .tmh-app:nth-child(3n) { animation-direction: alternate-reverse !important; }
@keyframes tpa-drift { to { translate: 10px -8px; rotate: 12deg; } }
.tpa-net { position: absolute; inset: 10px 14px; }
.tpa-net > svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.tpa-net path { stroke: var(--tm-lilac); stroke-width: 1.5; stroke-dasharray: 3 5; opacity: 0; transition: opacity .5s; }
.tpa-ways.is-in .tpa-net path { opacity: .9; animation: tpa-flow 1.1s linear infinite; }
.tpa-net .c { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: var(--tm-purple); color: #fff; box-shadow: 0 0 30px rgba(110,70,240,.9); }
.tpa-net .c .tmh-ph { width: 22px; height: 22px; }
.tpa-net .tmh-app { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%,-50%) scale(.4); opacity: 0; transition: transform .5s cubic-bezier(.2,.8,.2,1.4), opacity .4s; }
.tpa-ways.is-in .tpa-net .tmh-app { transform: translate(-50%,-50%); opacity: 1; }
.tpa-net .tmh-app:nth-of-type(2) { transition-delay: .1s; } .tpa-net .tmh-app:nth-of-type(3) { transition-delay: .2s; } .tpa-net .tmh-app:nth-of-type(4) { transition-delay: .3s; } .tpa-net .tmh-app:nth-of-type(5) { transition-delay: .4s; } .tpa-net .tmh-app:nth-of-type(6) { transition-delay: .5s; }
.tpa-third__txt { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; max-width: 980px; margin: clamp(32px, 4vw, 48px) auto 0; }
.tpa-third__txt p { margin: 0; font-size: 17px; font-weight: 300; line-height: 1.55; color: var(--tm-ink-2); }

/* EDA */
.tpa-eda__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
.tpa-eda__card, .tpa-eda__clients { padding: clamp(18px, 2.4vw, 28px); border-radius: 22px; background: var(--tm-surface); border: 1px solid var(--tm-line); }
.tpa-eda__card { background: linear-gradient(160deg, rgba(110,70,240,.22), rgba(110,70,240,.04) 55%), var(--tm-surface); border-color: rgba(180,150,255,.3); }
.tpa-eda__card > p { margin: 14px 0 0; font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--tm-ink-2); }
.tpa-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.tpa-chips li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; background: rgba(0,0,0,.25); border: 1px solid var(--tm-line); font-size: 14px; color: #fff; }
.tpa-chips .tmh-ph { width: 16px; height: 16px; color: var(--tm-lilac); }
.tpa-eda__lbl { margin: 0 0 14px; font-size: 12.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--tm-muted); }
.tpa-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.tpa-logos li { display: grid; place-items: center; height: 72px; border-radius: 14px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.05); transition: background .25s; }
.tpa-logos li:hover { background: rgba(255,255,255,.07); }
.tpa-logos img { display: block; height: var(--h, 32px); width: auto; max-width: 80%; opacity: .75; transition: opacity .2s; } .tpa-logos li:hover img { opacity: 1; }
.tpa-logos__txt { font-size: 24px; font-weight: 500; letter-spacing: -.01em; color: rgba(255,255,255,.75); }
.tpa-lens { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--tm-line); }
.tpa-lens__tabs { display: flex; } .tpa-lens__tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.tpa-lens__tabs .tmh-ph { width: 16px; height: 16px; }
.tpa-lens__tabs button[aria-pressed="true"] { background: var(--tm-purple); color: #fff; }
.tpa-lens__panels p { margin: 14px 0 0; padding: 14px 16px; border-radius: 14px; background: rgba(0,0,0,.25); font-size: 17px; line-height: 1.45; color: #fff; animation: tpp-fade .35s ease; }
.tpa-lens__panels b { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--tm-lilac); }
.tpa-question { max-width: 900px; margin: clamp(48px, 6vw, 88px) auto 0; padding: 0; text-align: center; }
.tpa-question p { margin: 0; font-size: 17px; color: var(--tm-muted); }
.tpa-question__q { margin-top: 14px !important; font-size: clamp(24px, 2.8vw, 40px) !important; font-weight: 300; line-height: 1.25; color: #fff !important; letter-spacing: -.01em; }
.tpa-question__q::before { content: '“'; color: var(--tm-lilac); } .tpa-question__q::after { content: '”'; color: var(--tm-lilac); }
.tpa-question__a { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px !important; font-size: clamp(22px, 2.2vw, 30px) !important; font-weight: 500; color: var(--tm-lilac) !important; }
.tpa-leaf { display: inline-block; width: 30px; height: 30px; background: var(--tm-lilac); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.tpa-question .tpa-question__q, .tpa-question .tpa-question__a { transition: opacity .8s, transform .8s cubic-bezier(.2,.7,.2,1); }
.tmp-js .tpa-question:not(.is-in) .tpa-question__q { opacity: 0; transform: translateY(16px); }
.tmp-js .tpa-question:not(.is-in) .tpa-question__a { opacity: 0; transform: scale(.9); }
.tpa-question.is-in .tpa-question__a { transition-delay: 1s; }

/* the connected network */
.tpa-future { background: radial-gradient(60% 50% at 50% 40%, rgba(110,70,240,.14), transparent 70%), var(--tm-bg-2); }
.tpa-net-fig { margin: clamp(28px, 4vw, 44px) 0 0; padding: clamp(16px, 2.4vw, 28px); border-radius: 24px; background: rgba(20,20,26,.6); border: 1px solid rgba(255,255,255,.1); }
.tpa-net-fig__hint { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tm-muted); }
.tpa-net-fig__hint .tmh-ph { width: 16px; height: 16px; color: var(--tm-lilac); }
.tpa-nw { position: relative; display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: clamp(60px, 9vw, 140px); align-items: center; }
.tpa-nw__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; fill: none; z-index: 2; }
.tpa-link { stroke: rgba(255,255,255,.07); stroke-width: 1.3; transition: stroke .35s, stroke-width .35s, opacity .35s; }
.tpa-link.is-on { stroke-width: 2.2; stroke-dasharray: 5 6; animation: tpa-flow .9s linear infinite; }
.tpa-link--team.is-on { stroke: var(--tm-lilac); filter: drop-shadow(0 0 4px rgba(180,150,255,.6)); }
.tpa-link--ai.is-on { stroke: var(--tm-green); filter: drop-shadow(0 0 4px rgba(79,245,145,.6)); }
.tpa-net-fig.has-pick .tpa-link:not(.is-on) { opacity: .3; }
.tpa-nw__actors { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; }
.tpa-actor { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 14px 6px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: var(--tm-surface); color: #fff; font: 500 15px/1.2 var(--tm-font); text-align: left; cursor: pointer; transition: border-color .3s, background .3s, box-shadow .3s, transform .3s; }
.tpa-actor:hover { border-color: rgba(255,255,255,.35); }
.tpa-actor__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(110,70,240,.3); color: var(--tm-lilac); flex: none; } .tpa-actor__ic .tmh-ph { width: 17px; height: 17px; }
.tpa-actor .tmh-app { width: 30px; height: 30px; border-radius: 50%; }
.tpa-actor--ai { border-style: dashed; }
.tpa-actor[aria-pressed="true"] { transform: translateX(6px); }
.tpa-actor--team[aria-pressed="true"] { border-color: var(--tm-lilac); background: rgba(110,70,240,.35); box-shadow: 0 0 30px -6px rgba(110,70,240,.9); }
.tpa-actor--ai[aria-pressed="true"] { border-color: var(--tm-green); background: rgba(31,184,102,.22); box-shadow: 0 0 30px -6px rgba(79,245,145,.7); border-style: solid; }
.tpa-nw__systems { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tpa-sys { padding: 12px; border-radius: 16px; background: rgba(42,42,51,.92); border: 1px solid var(--tm-line); transition: border-color .35s, opacity .35s; }
.tpa-net-fig.has-pick .tpa-sys:not(.is-on) { opacity: .55; }
.tpa-sys.is-on { border-color: rgba(255,255,255,.28); }
.tpa-sys__h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 500; color: var(--tm-muted); }
.tpa-sys__res { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; }
.tpa-res { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px; background: rgba(0,0,0,.25); font-size: 13.5px; color: var(--tm-ink-2); transition: background .3s, color .3s, box-shadow .3s; }
.tpa-res > span:nth-of-type(1) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpa-res__ic { width: 15px; height: 15px; flex: none; color: var(--tm-muted); }
.tpa-res__lock { display: grid; color: rgba(255,255,255,.3); } .tpa-res__lock .tmh-ph { width: 13px; height: 13px; }
.tpa-res.is-on { background: rgba(110,70,240,.28); color: #fff; box-shadow: inset 0 0 0 1px rgba(180,150,255,.55); }
.tpa-res.is-on .tpa-res__ic { color: var(--tm-lilac); } .tpa-res.is-on .tpa-res__lock { color: var(--tm-green); }
.tpa-nw__cap { min-height: 2.8em; margin: 18px 0 0; font-size: 16px; line-height: 1.4; color: #fff; text-align: center; }
.tpa-promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.tpa-promises li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: var(--tm-surface); border: 1px solid var(--tm-line); font-size: 15.5px; line-height: 1.45; color: var(--tm-ink-2);
  transition: opacity .6s, transform .6s cubic-bezier(.2,.7,.2,1); }
.tpa-promises li:nth-child(2) { transition-delay: .15s; } .tpa-promises li:nth-child(3) { transition-delay: .3s; }
.tmp-js .tpa-promises:not(.is-in) li { opacity: 0; transform: translateY(14px); }
.tpa-promises b { color: #fff; font-weight: 500; }
.tpa-promises .tmh-ph { width: 22px; height: 22px; flex: none; color: var(--tm-green); }

/* close */
.tpa-pick { max-width: 760px; margin: 18px auto 0; }
.tpa-pick__q { margin: 0; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5; color: var(--tm-ink-2); }
.tpa-pick__opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; }
.tpa-pick__opts button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.05); color: #fff; font: 500 15px/1 var(--tm-font); cursor: pointer; transition: background .2s, border-color .2s; }
.tpa-pick__opts button:hover { border-color: rgba(255,255,255,.45); } .tpa-pick__opts .tmh-ph { width: 17px; height: 17px; color: var(--tm-lilac); }
.tpa-pick__opts button[aria-pressed="true"] { background: var(--tm-purple); border-color: #fff; } .tpa-pick__opts button[aria-pressed="true"] .tmh-ph { color: #fff; }
.tpa-pilot.is-bump { animation: tpa-bump .5s cubic-bezier(.2,.8,.2,1.4); }
@keyframes tpa-bump { 40% { transform: scale(1.06); } }


/* next-section buttons at the bottom of each section */

/* what we saw: the chaos desk */
.tpa-desk { margin-top: clamp(28px, 4vw, 44px); padding: clamp(14px, 2vw, 22px); border-radius: 24px; background: var(--tm-surface); border: 1px solid var(--tm-line); }
.tpa-desk__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.tpa-desk__task { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; color: var(--tm-ink-2); }
.tpa-desk__task b { color: #fff; font-weight: 500; } .tpa-desk__task .tmh-ph { width: 18px; height: 18px; color: var(--tm-lilac); }
.tpa-desk[data-mode="chaos"] [data-desk-toggle] button[aria-pressed="true"] { background: #D81F46; color: #fff; }
.tpa-desk[data-mode="calm"] [data-desk-toggle] button[aria-pressed="true"] { background: var(--tm-purple); color: #fff; }
.tpa-desk__meters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.tpa-desk__meters div { padding: 10px 14px; border-radius: 12px; background: rgba(0,0,0,.25); }
.tpa-desk__meters dt { font-size: 11.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--tm-muted); }
.tpa-desk__meters dd { margin: 2px 0 0; font-size: 28px; font-weight: 500; font-variant-numeric: tabular-nums; transition: color .4s; }
.tpa-desk[data-mode="chaos"] .tpa-desk__meters dd { color: var(--tm-red-soft); } .tpa-desk[data-mode="calm"] .tpa-desk__meters dd { color: var(--tm-green); }
.tpa-desk__stage { position: relative; height: 470px; border-radius: 16px; overflow: hidden; transition: background .6s;
  background: radial-gradient(70% 70% at 50% 50%, rgba(255,58,94,.08), transparent 70%), #17171C; }
.tpa-desk[data-mode="calm"] .tpa-desk__stage { background: radial-gradient(60% 70% at 30% 40%, rgba(110,70,240,.22), transparent 70%), #17171C; }
.tpa-desk__trail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; fill: none; }
.tpa-desk__path { stroke-width: 2.4; stroke-linecap: round; }
.tpa-desk__path--bad { stroke: var(--tm-red); stroke-dasharray: 6 7; opacity: .5; animation: tpa-flow 1.4s linear infinite; }
.tpa-desk__path--ok { stroke: var(--tm-green); stroke-dasharray: 5 6; animation: tpa-flow .9s linear infinite; filter: drop-shadow(0 0 4px rgba(79,245,145,.6)); }
/* windows (without Teamenu) */
.tpa-win { position: absolute; z-index: 2; width: 36%; border-radius: 12px; background: #2E2E38; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 50px -10px rgba(0,0,0,.7); overflow: hidden;
  opacity: 0; transform: translateY(18px) scale(.9) rotate(var(--r, 0deg)); transition: opacity .35s, transform .5s cubic-bezier(.2,.8,.2,1.25); }
.tpa-win.is-on { opacity: 1; transform: rotate(var(--r, 0deg)); }
.tpa-desk[data-mode="calm"] .tpa-win { opacity: 0 !important; transform: scale(.85) rotate(var(--r, 0deg)); transition: opacity .3s, transform .4s; }
.tpa-win--1 { left: 3%; top: 6%; --r: -2deg; } .tpa-win--2 { left: 37%; top: 3%; width: 31%; --r: 1.5deg; } .tpa-win--3 { left: 63%; top: 24%; width: 33%; --r: -1deg; }
.tpa-win--4 { left: 6%; top: 58%; width: 34%; --r: 2deg; } .tpa-win--5 { left: 34%; top: 57%; width: 28%; --r: -2.5deg; }
.tpa-win__bar { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; background: #3A3A46; font-size: 12.5px; font-weight: 500; color: var(--tm-ink-2); }
.tpa-win__bar > .tmh-ph { width: 16px; height: 16px; }
.tpa-win__search { display: flex; align-items: center; gap: 8px; margin: 10px 12px 6px; padding: 7px 10px; border-radius: 8px; background: #1D1D23; font-size: 13.5px; color: #fff; }
.tpa-win__search .tmh-ph { width: 14px; height: 14px; color: var(--tm-muted); } .tpa-win__search small { margin-left: auto; font-size: 11.5px; color: var(--tm-red-soft); }
.tpa-win__list, .tpa-win__chat { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 4px 12px 12px; list-style: none; font-size: 13px; color: var(--tm-ink-2); }
.tpa-win__list li { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; background: rgba(255,255,255,.04); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpa-win__chat { padding-top: 10px; } .tpa-win__chat b { display: block; font-size: 11.5px; font-weight: 500; color: var(--tm-lilac); }
.tpa-win__rec, .tpa-win__mail, .tpa-win__dm { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 12px; font-size: 13px; color: var(--tm-ink-2); }
.tpa-win__rec b, .tpa-win__mail b { font-size: 14.5px; font-weight: 500; color: #fff; }
.tpa-win__rec .is-missing { color: var(--tm-red-soft); font-weight: 500; }
.tpa-win__mail span { display: inline-flex; align-items: center; gap: 6px; } .tpa-win__mail .tmh-ph { width: 14px; height: 14px; }
.tpa-win__dm span { max-width: 88%; padding: 7px 10px; border-radius: 12px; line-height: 1.3; }
.tpa-win__dm .me { align-self: flex-end; background: var(--tm-purple); color: #fff; border-bottom-right-radius: 3px; }
.tpa-win__dm .them { background: rgba(255,255,255,.08); border-bottom-left-radius: 3px; }
.tpa-desk__verdict { position: absolute; z-index: 4; right: 3%; bottom: 5%; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 14px; border-radius: 999px; font-size: 15px; font-weight: 500;
  opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.tpa-desk__verdict .tmh-ph { width: 18px; height: 18px; }
.tpa-desk__verdict--bad { color: #fff; background: #D81F46; box-shadow: 0 10px 30px -8px rgba(255,58,94,.7); }
.tpa-desk__verdict--ok { color: #0E2A1B; background: var(--tm-green); box-shadow: 0 10px 30px -8px rgba(79,245,145,.6); }
.tpa-desk[data-mode="chaos"].is-end .tpa-desk__verdict--bad, .tpa-desk[data-mode="calm"].is-end .tpa-desk__verdict--ok { opacity: 1; transform: none; }
/* the team's menu (with Teamenu) */
.tpa-menu { position: absolute; z-index: 2; left: 5%; top: 50%; width: 40%; padding: 16px; border-radius: 16px; background: #24242C; border: 1px solid rgba(180,150,255,.4); box-shadow: 0 30px 70px -20px rgba(110,70,240,.6);
  opacity: 0; transform: translateY(-50%) scale(.92); transition: opacity .45s .15s, transform .55s .15s cubic-bezier(.2,.8,.2,1.2); pointer-events: none; }
.tpa-desk[data-mode="calm"] .tpa-menu { opacity: 1; transform: translateY(-50%); }
.tpa-menu__head { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14px; font-weight: 500; color: #fff; }
.tpa-menu__head .tpa-leaf { width: 16px; height: 16px; }
.tpa-menu__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.tpa-menu__tiles li { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 4px 10px; border-radius: 12px; background: rgba(255,255,255,.04); font-size: 12.5px; line-height: 1.2; color: var(--tm-ink-2); text-align: center; transition: background .3s, box-shadow .3s, color .3s; }
.tpa-menu__tiles li.is-on { background: rgba(79,245,145,.12); box-shadow: inset 0 0 0 1.5px var(--tm-green); color: #fff; }
.tpa-opened { position: absolute; z-index: 2; right: 5%; top: 50%; width: 38%; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; transform: translateY(-50%); }
.tpa-opened li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #2E2E38; border: 1px solid rgba(79,245,145,.4);
  opacity: 0; transform: translateX(16px); transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1.2); }
.tpa-desk[data-mode="calm"] .tpa-opened li.is-on { opacity: 1; transform: none; }
.tpa-opened li > span:not(.tmh-app) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tpa-opened b { font-size: 14.5px; font-weight: 500; color: #fff; } .tpa-opened small { font-size: 12.5px; color: var(--tm-green); }
.tpa-opened li > .tmh-ph { width: 20px; height: 20px; color: var(--tm-green); flex: none; }
.tpa-cursor { position: absolute; z-index: 5; left: 50%; top: 50%; width: 30px; height: 30px; margin: -4px 0 0 -6px; color: #fff; opacity: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); transition: left .5s cubic-bezier(.4,0,.2,1), top .5s cubic-bezier(.4,0,.2,1), opacity .3s; pointer-events: none; }
.tpa-cursor .tmh-ph { width: 30px; height: 30px; } .tpa-cursor.is-on { opacity: 1; }
.tpa-desk .tpa-nots { margin-top: 14px; }

/* EDA: home page logo band inside the card, EDGY logo */
.tpa-eda__clients .tmp-marquee { margin: 0 -8px; }
.tpa-eda__clients .tmp-marquee__track { gap: 44px; animation-duration: 40s; }
.tpa-eda__clients .tmp-marquee img { height: calc(var(--h, 36px) * .82); }


@media (max-width: 899px) {
  .tpa-desk__meters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tpa-desk__who { width: 100%; } .tpa-desk__who button { flex: 1; justify-content: center; padding: 0 6px; font-size: 13.5px; }
  .tpa-desk__stage { height: 600px; }
  .tpa-win { width: 82% !important; }
  .tpa-win--1 { left: 3%; top: 2%; } .tpa-win--2 { left: 15%; top: 23%; } .tpa-win--3 { left: 4%; top: 41%; } .tpa-win--4 { left: 14%; top: 58%; } .tpa-win--5 { left: 6%; top: 72%; }
  .tpa-desk__verdict { left: 50%; right: auto; transform: translate(-50%, 8px); white-space: nowrap; font-size: 14px; }
  .tpa-desk[data-mode="chaos"].is-end .tpa-desk__verdict--bad, .tpa-desk[data-mode="calm"].is-end .tpa-desk__verdict--ok { transform: translate(-50%, 0); }
  .tpa-menu { left: 4%; right: 4%; width: auto; top: 4%; transform: scale(.92); }
  .tpa-desk[data-mode="calm"] .tpa-menu { transform: none; }
  .tpa-opened { left: 4%; right: 4%; width: auto; top: auto; bottom: 15%; transform: none; }
}


/* EDA logo (dark grey file, shown in white) */
.tpa-eda__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 !important; }
.tpa-eda__logo { display: block; height: 54px; width: auto; filter: brightness(0) invert(1); }
.tpa-eda__brand small { font-size: 13px; color: var(--tm-muted); }

/* EDGY: books, toolset and the knowledge graph */
.tpa-edgy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; max-width: 1040px; margin: clamp(40px, 5vw, 64px) auto 0;
  padding: clamp(18px, 2.6vw, 32px); border-radius: 22px; background: var(--tm-surface); border: 1px solid var(--tm-line); }
.tpa-edgy__img { display: block; height: 46px; width: auto; margin-bottom: 16px; }
.tpa-edgy__copy p { margin: 0 0 12px; font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--tm-ink-2); }
.tpa-edgy__copy p b { font-weight: 500; color: #fff; }
.tpa-edgy__kg { padding: 12px 14px; border-radius: 12px; background: rgba(110,70,240,.14); color: #fff !important; font-weight: 400 !important; }
.tpa-edgy__kg strong { font-weight: 500; color: var(--tm-lilac); }
.tpa-link-out { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--tm-lilac); font-size: 15px; font-weight: 500; text-decoration: none; }
.tpa-link-out .tmh-ph { width: 17px; height: 17px; } .tpa-link-out:hover { color: #fff; }
.tpa-kg { position: relative; width: 100%; max-width: 460px; margin: 0 auto; aspect-ratio: 400 / 260; }
.tpa-kg > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tpa-kg__e { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 2; stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1); }
.tpa-kg__e--with { stroke: #FF5C8A; } .tpa-kg__e--ai { stroke: var(--tm-green); stroke-dasharray: 4 6; stroke-dashoffset: 0; opacity: 0; transition: opacity .6s 1.6s; }
.tpa-kg text { fill: var(--tm-muted); font: 500 12px var(--tm-font); letter-spacing: .04em; opacity: 0; transition: opacity .5s 1s; }
.tpa-kg.is-in .tpa-kg__e { stroke-dashoffset: 0; } .tpa-kg.is-in .tpa-kg__e--ai { opacity: 1; animation: tpa-flow 1.1s linear infinite; } .tpa-kg.is-in text { opacity: 1; }
.tpa-kg.is-in .tpa-kg__e:nth-of-type(2) { transition-delay: .35s; } .tpa-kg.is-in .tpa-kg__e:nth-of-type(3) { transition-delay: .7s; }
.tpa-kg__n { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: #1E1E25; border: 1.5px solid; font-size: 13px; font-weight: 500; color: #fff; white-space: nowrap; transform: translate(-50%, -50%); }
.tpa-kg__n small { font-size: 11px; font-weight: 400; color: var(--tm-muted); }
.tpa-kg__n .tmh-ph { width: 15px; height: 15px; }
.tpa-kg__n--person { border-color: var(--tm-lilac); } .tpa-kg__n--person .tmh-ph { color: var(--tm-lilac); }
.tpa-kg__n--ai { border-color: var(--tm-green); border-style: dashed; } .tpa-kg__n--ai .tmh-ph { color: var(--tm-green); }
.tpa-kg__n--res { border-color: #3D7BFF; } .tpa-kg__n--task { border-color: #FF5C8A; } .tpa-kg__n--task .tmh-ph { color: #FF5C8A; }

/* desk: whose day */
.tpa-desk__who { display: flex; width: fit-content; max-width: 100%; margin: 0 0 14px; }
.tpa-desk__who button { display: inline-flex; align-items: center; gap: 7px; }
.tpa-desk__who .tmh-ph { width: 16px; height: 16px; }
.tpa-desk__who button[aria-pressed="true"] { background: #fff; color: #1D1D23; }

/* responsive */
@media (max-width: 1023px) {
  .tpa-tl { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin-left: calc(var(--tm-gutter) * -1); margin-right: calc(var(--tm-gutter) * -1); padding: 10px var(--tm-gutter) 8px; scroll-padding: 0 var(--tm-gutter); scrollbar-width: none; }
  .tpa-tl::-webkit-scrollbar { display: none; }
  .tpa-tl__chart, .tpa-tl__stages { width: 1100px; }
  .tpa-stage { scroll-snap-align: center; }
  .tpa-edgy { grid-template-columns: minmax(0, 1fr); }
  .tpa-ways { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; }
  .tpa-way--ours { order: -2; transform: none; margin-top: 10px; }
  .tpa-eda__grid, .tpa-glue { grid-template-columns: minmax(0, 1fr); }
  .tpa-nw { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .tpa-nw__actors { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .tpa-actor[aria-pressed="true"] { transform: translateY(-3px); }
  .tpa-nw__svg { z-index: 0; } .tpa-sys { background: rgba(42,42,51,.86); }
}
@media (max-width: 699px) {
  .tpa-facts { grid-template-columns: minmax(0, 1fr); } .tpa-facts li { display: flex; align-items: baseline; gap: 12px; } .tpa-facts b { min-width: 2.6em; } .tpa-facts span { margin: 0; }
  .tpa-mess__bar { flex-wrap: wrap; } .tpa-mess__state { font-size: 13px; }
  .tpa-tl__chart, .tpa-tl__stages { width: 1000px; }
  .tpa-third__txt, .tpa-promises { grid-template-columns: minmax(0, 1fr); }
  .tpa-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tpa-logos li:last-child { grid-column: 1 / -1; }
  .tpa-lens__tabs button { padding: 0 6px; font-size: 13.5px; } .tpa-lens__tabs .tmh-ph { display: none; }
  .tpa-nw__systems { grid-template-columns: minmax(0, 1fr); }
  .tpa-actor { min-height: 40px; font-size: 14px; padding-right: 12px; }
  .tpa-pick__opts button { font-size: 14px; }
  .tpa-kg__n { font-size: 12px; padding: 5px 9px; } .tpa-kg__n small { display: none; }
  .tpa-desk__who .tmh-ph { display: none; } .tpa-desk__who button { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .tpa-mess__apps li, .tpa-mess__q, .tpa-sprawl .tmh-app, .tpa-desk__path, .tpa-link.is-on, .tpa-mess__lines path, .tpa-net path, .tpa-art--next path, .tpa-art--ai em { animation: none !important; }
}


/* ==========================================================================
   Digital Friction Audit (.tfa-) and its report (.trp-)
   ========================================================================== */
.tfa [id] { scroll-margin-top: 84px; }
.tfa-eyebrow { color: var(--tm-red-soft); border-color: rgba(255,58,94,.4); background: rgba(255,58,94,.08); }
.tfa-link { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--tm-lilac); font: 500 15px/1.2 var(--tm-font); cursor: pointer; text-decoration: none; }
.tfa-link:hover { color: #fff; } .tfa-link .tmh-ph { width: 17px; height: 17px; }

/* hero + card */
.tfa-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.tfa-hero.is-running .tfa-hero__grid { grid-template-columns: minmax(0, 1fr); }
.tfa-hero.is-running .tfa-hero__copy { display: none; }
.tfa-hero.is-running .tfa-app { width: 100%; max-width: 980px; margin: 0 auto; }
.tfa-hero.is-report .tfa-app { max-width: 1120px; padding: 0; background: none; border: 0; box-shadow: none; }
.tfa-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.tfa-facts li { padding: 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--tm-line); }
.tfa-facts b { display: block; font-size: clamp(28px, 2.6vw, 38px); font-weight: 500; line-height: 1; color: #fff; }
.tfa-facts li:nth-child(1) b { color: var(--tm-red-soft); } .tfa-facts li:nth-child(2) b { color: var(--tm-lilac); } .tfa-facts li:nth-child(3) b { color: var(--tm-green); }
.tfa-facts span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; color: var(--tm-ink-2); }
.tfa-app { position: relative; padding: clamp(20px, 2.6vw, 32px); border-radius: 24px; border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(80% 60% at 100% 0%, rgba(255,58,94,.14), transparent 60%), radial-gradient(70% 70% at 0% 100%, rgba(110,70,240,.25), transparent 70%), #1E1E25;
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.8); }
.tfa-screen.is-entering { animation: tfa-in .4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes tfa-in { from { opacity: 0; transform: translateY(10px); } }
.tfa-start__k { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tm-muted); }
.tfa-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--tm-red); box-shadow: 0 0 0 0 rgba(255,58,94,.6); animation: tfa-pulse 2s infinite; }
@keyframes tfa-pulse { 70% { box-shadow: 0 0 0 10px rgba(255,58,94,0); } 100% { box-shadow: 0 0 0 0 rgba(255,58,94,0); } }
.tfa-start__h { margin: 10px 0 18px; font-size: clamp(24px, 2.3vw, 32px); font-weight: 300; line-height: 1.2; }
.tfa-start__h strong { font-weight: 500; color: var(--tm-red-soft); }
.tfa-steps { position: relative; display: grid; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.tfa-steps li { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.04); }
.tfa-steps li > span { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(110,70,240,.3); color: #fff; font-weight: 600; font-size: 14px; }
.tfa-steps li:nth-child(2) > span { background: rgba(255,58,94,.35); } .tfa-steps li:nth-child(4) > span { background: rgba(79,245,145,.25); color: var(--tm-green); }
.tfa-steps b { font-size: 15.5px; font-weight: 500; } .tfa-steps small { font-size: 13px; color: var(--tm-muted); }
.tfa-prefill { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: rgba(79,245,145,.08); border: 1px solid rgba(79,245,145,.3); font-size: 14px; line-height: 1.45; color: #fff; }
.tfa-prefill .tmh-ph { width: 18px; height: 18px; flex: none; color: var(--tm-green); margin-top: 1px; }
.tfa-start__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.tfa-go { min-height: 54px; padding: 0 26px; font-size: 17px; }
.tfa-start__note { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 13.5px; color: var(--tm-muted); }
.tfa-start__note .tmh-ph { width: 15px; height: 15px; }

/* questions */
.tfa-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.tfa-back { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px 6px 4px; border: 0; border-radius: 8px; background: none; color: var(--tm-ink-2); font: 500 14px var(--tm-font); cursor: pointer; }
.tfa-back:hover { color: #fff; background: rgba(255,255,255,.06); } .tfa-back .tmh-ph { width: 16px; height: 16px; }
.tfa-prog { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 13px; color: var(--tm-muted); }
.tfa-prog__bar { display: flex; gap: 4px; }
.tfa-prog__bar i { width: 22px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); transition: background .3s; }
.tfa-prog__bar i.is-done { background: var(--tm-lilac); } .tfa-prog__bar i.is-a.is-done { background: var(--tm-red-soft); }
.tfa-prog__bar i.is-on { background: #fff; }
.tfa-q { margin: 0; font-size: clamp(22px, 2.2vw, 30px); font-weight: 400; line-height: 1.25; outline: none; }
.tfa-help { margin: 10px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--tm-ink-2); }
.tfa-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.tfa-opts--long { grid-template-columns: minmax(0, 1fr); }
.tfa-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; height: 100%; padding: 12px 16px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04); color: #fff; font: 400 16px/1.35 var(--tm-font); text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.tfa-opt:hover { border-color: rgba(180,150,255,.7); background: rgba(110,70,240,.12); }
.tfa-opt:active { transform: scale(.99); }
.tfa-opt__dot { position: relative; width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); transition: border-color .2s; }
.tfa-opt__l { display: flex; flex-direction: column; } .tfa-opt__l small { margin-top: 2px; font-size: 13px; color: var(--tm-muted); }
.tfa-opt[aria-pressed="true"] { border-color: var(--tm-lilac); background: rgba(110,70,240,.28); }
.tfa-opt[aria-pressed="true"] .tfa-opt__dot { border-color: var(--tm-lilac); } .tfa-opt[aria-pressed="true"] .tfa-opt__dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--tm-lilac); }
.tfa-exact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed rgba(255,255,255,.12); }
.tfa-exact label { font-size: 14px; color: var(--tm-ink-2); }
.tfa-exact input, .tfa-field input, .tfa-field select { height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: #15151A; color: #fff; font: 400 16px var(--tm-font); }
.tfa-exact input { width: 130px; }
.tfa-exact input:focus, .tfa-field input:focus, .tfa-field select:focus { outline: 2px solid var(--tm-lilac); outline-offset: 1px; border-color: transparent; }
.tfa-exact .tmp-btn { min-height: 46px; padding: 0 18px; font-size: 15px; } .tfa-exact .tmp-btn[disabled] { opacity: .4; cursor: default; }
.tfa-default { flex-basis: 100%; font-size: 14.5px; }
.tfa-context { display: flex; gap: 10px; margin: 20px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--tm-muted); }
.tfa-context .tmh-ph { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--tm-lilac); }
.tfa-context a, .tfa-help a, .tfa-fine a { color: var(--tm-lilac); }

/* first result */
.tfa-res { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
.tfa-res__k { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--tm-muted); }
.tfa-res__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 6px 0 0; }
.tfa-res__big b { font-size: clamp(48px, 6.4vw, 88px); font-weight: 500; letter-spacing: -.035em; line-height: 1; color: #fff; text-shadow: 0 0 60px rgba(255,58,94,.5); font-variant-numeric: tabular-nums; }
.tfa-res__big small { font-size: 20px; color: var(--tm-red-soft); }
.tfa-res__line { margin: 14px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--tm-ink-2); } .tfa-res__line strong { color: #fff; font-weight: 500; }
.tfa-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.tfa-kpis li { padding: 12px; border-radius: 12px; background: rgba(0,0,0,.25); }
.tfa-kpis b { display: block; font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; } .tfa-kpis span { font-size: 12.5px; line-height: 1.35; color: var(--tm-muted); }
.tfa-kpis .is-lic b { color: var(--tm-lilac); } .tfa-kpis .is-be b { color: var(--tm-green); }
.tfa-res__be { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(79,245,145,.08); border: 1px solid rgba(79,245,145,.3); font-size: 15px; line-height: 1.45; }
.tfa-res__be .tmh-ph { width: 20px; height: 20px; flex: none; color: var(--tm-green); } .tfa-res__be strong { color: var(--tm-green); font-weight: 500; }
.tfa-res__be.is-warn { background: rgba(255,58,94,.08); border-color: rgba(255,58,94,.35); } .tfa-res__be.is-warn .tmh-ph, .tfa-res__be.is-warn strong { color: var(--tm-red-soft); }
.tfa-res__beyond { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--tm-line); font-size: 15px; line-height: 1.45; color: var(--tm-ink-2); }
.tfa-res__beyond .tmh-ph { width: 20px; height: 20px; flex: none; color: var(--tm-green); }
.tfa-worth { display: flex; flex-direction: column; padding: 18px; border-radius: 18px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08); }
.tfa-worth__h { margin: 0 0 12px; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tm-muted); }
.tfa-worth__btns { display: flex; flex-wrap: wrap; gap: 6px; }
.tfa-worth__b { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: transparent; color: var(--tm-ink-2); font: 500 14px var(--tm-font); cursor: pointer; }
.tfa-worth__b[aria-pressed="true"] { background: #fff; color: #1D1D23; border-color: #fff; }
.tfa-worth__viz { margin-top: 18px; }
.tfa-worth__bar { position: relative; height: 16px; border-radius: 8px; background: rgba(255,255,255,.08); }
.tfa-worth__bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: linear-gradient(90deg, #1FB866, var(--tm-green)); box-shadow: 0 0 18px rgba(79,245,145,.45); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.tfa-worth__bar em { position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--tm-lilac); box-shadow: 0 0 10px var(--tm-purple); }
.tfa-worth__out { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 14px 0 0; }
.tfa-worth__out b { font-size: 30px; font-weight: 500; color: var(--tm-green); font-variant-numeric: tabular-nums; } .tfa-worth__out span { font-size: 15px; color: var(--tm-lilac); }
.tfa-worth__note { margin: auto 0 0; padding-top: 14px; font-size: 13.5px; line-height: 1.45; color: var(--tm-ink-2); } .tfa-worth__note strong { color: #fff; font-weight: 500; }
.tfa-adjust { margin-top: 14px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--tm-line); }
.tfa-adjust summary { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 14.5px; font-weight: 500; color: var(--tm-ink-2); cursor: pointer; list-style: none; }
.tfa-adjust summary::-webkit-details-marker { display: none; } .tfa-adjust summary .tmh-ph { width: 17px; height: 17px; color: var(--tm-lilac); }
.tfa-adjust__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 16px 16px; }
.tfa-adjust__note { margin: 0; padding: 0 16px 10px; font-size: 13.5px; color: var(--tm-muted); }
.tfa-adjust--report { margin: 0 0 16px; }
.tfa-field { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--tm-ink-2); min-width: 0; }
.tfa-field input, .tfa-field select { width: 100%; }
.tfa-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 18px; padding: 20px 22px; border-radius: 18px;
  background: linear-gradient(120deg, rgba(110,70,240,.35), rgba(255,58,94,.18)); border: 1px solid rgba(180,150,255,.4); }
.tfa-more h3 { margin: 0; font-size: 20px; font-weight: 500; } .tfa-more p { margin: 6px 0 0; max-width: 34em; font-size: 14.5px; line-height: 1.45; color: var(--tm-ink-2); }

/* score + form */
.tfa-gate { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 18px; align-items: start; }
.tfa-gate__score { padding: 20px; border-radius: 18px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08); }
.tfa-gate__ring { display: flex; align-items: center; gap: 16px; margin: 12px 0 16px; } .tfa-gate__ring p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--tm-ink-2); }
.tfa-gate__gap { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(110,70,240,.14); font-size: 14px; line-height: 1.45; }
.tfa-gate__gap .tmh-ph { width: 18px; height: 18px; color: var(--tm-lilac); flex: none; margin-top: 1px; } .tfa-gate__gap strong { color: #fff; font-weight: 500; }
.tfa-gate__cost { margin: 14px 0 0; font-size: 14px; color: var(--tm-muted); } .tfa-gate__cost b { color: #fff; font-weight: 500; }
.tfa-ring { position: relative; flex: none; width: 112px; height: 112px; }
.tfa-ring[data-size="l"] { width: 150px; height: 150px; }
.tfa-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tfa-ring circle { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 11; }
.tfa-ring circle.v { stroke: var(--rc, var(--tm-lilac)); stroke-linecap: round; filter: drop-shadow(0 0 6px var(--rc, var(--tm-lilac))); }
.tfa-ring--low { --rc: #FF5C7C; } .tfa-ring--mid { --rc: #B496FF; } .tfa-ring--high { --rc: #4FF591; }
.tfa-ring--none b { color: var(--tm-muted); }
.tfa-ring b { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 14px; font-size: 36px; font-weight: 500; }
.tfa-ring[data-size="l"] b { font-size: 50px; padding-bottom: 18px; }
.tfa-ring small { position: absolute; left: 0; right: 0; bottom: 30%; text-align: center; font-size: 12px; color: var(--tm-muted); }
.tfa-areas { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tfa-areas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
.tfa-areas__n { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: #fff; } .tfa-areas__n .tmh-ph { width: 16px; height: 16px; color: var(--tm-muted); }
.tfa-areas__v { font-size: 13px; color: var(--tm-muted); text-align: right; } .tfa-areas__v b { color: #fff; font-weight: 500; }
.tfa-areas .tfa-dots { grid-column: 1 / -1; }
.tfa-areas small { grid-column: 1 / -1; font-size: 12.5px; color: var(--tm-muted); }
/* a 1–5 score as five segments; colour by band: 1–2 low, 3 mid, 4–5 high */
.tfa-dots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.tfa-dots i { height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); }
.tfa-dots i.is-on { background: var(--tm-lilac); }
.is-low > .tfa-dots i.is-on { background: #FF5C7C; } .is-high > .tfa-dots i.is-on { background: var(--tm-green); }
.tfa-form h2 { margin: 0; font-size: clamp(22px, 2vw, 28px); font-weight: 400; line-height: 1.25; outline: none; }
.tfa-form__lead { margin: 8px 0 14px; font-size: 15px; line-height: 1.45; color: var(--tm-ink-2); }
.tfa-inc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 0 0 18px; padding: 0; list-style: none; }
.tfa-inc li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.35; color: var(--tm-muted); }
.tfa-inc .tmh-ph { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--tm-lilac); } .tfa-inc b { display: block; font-weight: 500; color: #fff; }
.tfa-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tfa-field input[aria-invalid] { border-color: var(--tm-red); }
.tfa-err { min-height: 0; font-style: normal; font-size: 12.5px; color: var(--tm-red-soft); } .tfa-err:empty { display: none; }
.tfa-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tfa-check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--tm-ink-2); cursor: pointer; }
.tfa-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--tm-purple); }
.tfa-submit { width: 100%; min-height: 54px; margin-top: 16px; justify-content: center; font-size: 17px; }
.tfa-submit[disabled] { opacity: .7; cursor: progress; }
.tfa-fine { display: flex; gap: 6px; align-items: center; margin: 10px 0 0; font-size: 12.5px; color: var(--tm-muted); } .tfa-fine .tmh-ph { width: 14px; height: 14px; }

/* status and actions above the report */
.tfa-status { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 0 0 12px; padding: 14px 18px; border-radius: 14px; font-size: 15px; line-height: 1.45; }
.tfa-status .tmh-ph { width: 20px; height: 20px; flex: none; } .tfa-status span { flex: 1; min-width: 220px; }
.tfa-status--ok { background: rgba(79,245,145,.1); border: 1px solid rgba(79,245,145,.4); } .tfa-status--ok .tmh-ph { color: var(--tm-green); }
.tfa-status--warn { background: rgba(255,58,94,.1); border: 1px solid rgba(255,58,94,.4); } .tfa-status--warn .tmh-ph { color: var(--tm-red-soft); }
.tfa-status--sample { background: rgba(110,70,240,.18); border: 1px solid rgba(180,150,255,.45); } .tfa-status--sample .tmh-ph { color: var(--tm-lilac); }
.tfa-status .tmp-btn { min-height: 42px; font-size: 15px; }
.tfa-actions { position: sticky; top: 76px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; padding: 10px; border-radius: 14px; background: rgba(26,26,31,.85); backdrop-filter: blur(12px); border: 1px solid var(--tm-line); }
.tfa-actions .tmp-btn { min-height: 42px; padding: 0 16px; font-size: 15px; }
.tfa-actions .tfa-link { margin-left: auto; padding-right: 6px; }

/* ---------- the report ---------- */
.trp { color: #fff; }
.trp a { color: var(--tm-lilac); } .trp a.tmp-btn { color: #fff; }
.trp-cover { position: relative; padding: clamp(24px, 4vw, 48px); border-radius: 24px; overflow: hidden; border: 1px solid rgba(180,150,255,.35);
  background: radial-gradient(60% 80% at 100% 0%, rgba(255,58,94,.22), transparent 60%), radial-gradient(80% 90% at 0% 100%, rgba(110,70,240,.55), transparent 70%), #1C1830; }
.trp-cover__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--tm-ink-2); }
.trp-cover__top img { height: 20px; width: auto; }
.trp-cover__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; margin-top: 26px; }
.trp-prepared { margin: 0 0 18px; font-size: 14px; color: var(--tm-ink-2); }
.trp-cover__k { margin: 0; font-size: 18px; color: var(--tm-ink-2); }
.trp-cover__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 4px 0 0; font-size: clamp(52px, 7.4vw, 104px); font-weight: 500; letter-spacing: -.04em; line-height: 1; text-shadow: 0 0 70px rgba(255,58,94,.45); }
.trp-cover__big small { font-size: 20px; font-weight: 400; letter-spacing: 0; color: var(--tm-red-soft); text-shadow: none; }
.trp-cover__be { margin: 16px 0 0; font-size: clamp(17px, 1.5vw, 21px); color: var(--tm-ink-2); } .trp-cover__be b { color: var(--tm-green); font-weight: 500; }
.trp-cover__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: start; }
.trp-cover__be { font-size: 14.5px !important; line-height: 1.5; max-width: 34em; }
.trp-cover .trp-interest { margin: 14px 0 0; font-size: 14.5px; color: var(--tm-ink-2); }
.trp-key { padding: 18px 20px; border-radius: 18px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.1); }
.trp-key__h { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--tm-muted); }
.trp-key .trp-table { margin-top: 8px; font-size: 14px; }
.trp-key .trp-table th, .trp-key .trp-table td { padding: 10px 0; } .trp-key .trp-table td { padding-left: 12px; font-size: 16px; }
.trp-key tr:last-child th, .trp-key tr:last-child td { border-bottom: 0; }
.trp-key .is-be td { color: var(--tm-green); } .trp-key .is-strong td { font-weight: 600; }
.trp-sec { margin-top: 16px; padding: clamp(20px, 3vw, 40px); border-radius: 22px; background: var(--tm-surface); border: 1px solid var(--tm-line); }
.trp-h { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 400; line-height: 1.2; }
.trp-h span { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--tm-purple); font-size: 18px; font-weight: 600; }
.trp-h3 { margin: 26px 0 10px; font-size: 18px; font-weight: 500; }
.trp-sec p { margin: 12px 0 0; font-size: 16px; font-weight: 300; line-height: 1.6; color: var(--tm-ink-2); max-width: 54em; }
.trp-sec p strong { color: #fff; font-weight: 500; }
.trp-sec .trp-lead { margin-top: 0; font-size: clamp(19px, 1.7vw, 23px); font-weight: 400; line-height: 1.4; color: #fff; }
.trp-sec .trp-lead strong { color: var(--tm-lilac); }
.trp-interest { display: flex; gap: 10px; align-items: center; } .trp-interest .tmh-ph { width: 18px; height: 18px; color: var(--tm-green); flex: none; }
.trp-table { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 15px; }
.trp-table th, .trp-table td { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; vertical-align: top; }
.trp-table thead th { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tm-muted); }
.trp-table tbody th { font-weight: 400; color: var(--tm-ink-2); }
.trp-table td { color: #fff; font-variant-numeric: tabular-nums; } .trp-table td:last-child { text-align: right; white-space: nowrap; }
.trp-table--kv td { font-size: 17px; font-weight: 500; } .trp-table .is-lic td { color: var(--tm-lilac); }
.trp-table thead th:not(:first-child) { text-align: right; } .trp-table--stack td { text-align: right; white-space: nowrap; }
.trp-table--cost td:nth-child(2), .trp-table--cost thead th:nth-child(2) { text-align: left; white-space: normal; color: var(--tm-ink-2); }
.trp-table--method td, .trp-table--method thead th { text-align: left !important; white-space: normal; } .trp-table--method td:last-child { color: var(--tm-ink-2); }
.trp-table .is-strong th, .trp-table .is-strong td { color: #fff; font-weight: 500; }
.trp-table .is-neg { color: var(--tm-red-soft); } .trp-table .is-pos { color: var(--tm-green); }
.trp-sec .trp-note { font-size: 14px; color: var(--tm-muted); }
.trp-table .is-total th, .trp-table .is-total td { border-top: 2px solid rgba(255,255,255,.3); font-weight: 500; color: #fff; font-size: 17px; }
.trp-table .is-total2 th, .trp-table .is-total2 td { color: var(--tm-ink-2); }
.trp-table .trp-group th { padding: 20px 0 6px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tm-lilac); }
.trp-table .trp-group.is-cur th { color: var(--tm-ink-2); } .trp-table--cost tr.is-lic td:nth-child(n+3) { color: var(--tm-lilac); }
.trp-table--kv .is-cur td { color: var(--tm-ink-2); }
.trp-table--measures td { min-width: 110px; text-align: center !important; } .trp-table--measures thead th:not(:first-child) { text-align: center; }
.trp-table--measures td.is-empty::after { content: ''; display: inline-block; width: 70px; border-bottom: 1px dashed rgba(255,255,255,.3); }
.trp-table .is-sub th { padding-top: 22px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tm-green); }
.trp-table .is-picked th { color: #fff; }
.trp-score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px 36px; align-items: center; margin-top: 26px; padding: 22px; border-radius: 18px; background: rgba(0,0,0,.22); }
.trp-score__ring { display: flex; align-items: center; gap: 16px; max-width: 380px; } .trp-score__ring p { margin: 0; font-size: 14.5px; line-height: 1.45; }
.trp-score__ring p b { display: block; margin-bottom: 4px; color: #fff; font-weight: 500; }
.trp-callout { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: rgba(110,70,240,.14); }
.trp-callout .tmh-ph { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--tm-lilac); }
.trp-callout--gap { background: rgba(255,58,94,.1); } .trp-callout--gap .tmh-ph, .trp-callout--gap strong { color: var(--tm-red-soft) !important; }
.trp-callout--ok { background: rgba(79,245,145,.08); } .trp-callout--ok .tmh-ph { color: var(--tm-green); }
.trp-callout--warn { margin-top: 16px !important; background: rgba(255,58,94,.1); } .trp-callout--warn .tmh-ph, .trp-callout--warn strong { color: var(--tm-red-soft) !important; }
.trp-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px !important; }
.trp-formula span { display: inline-flex; flex-direction: column; padding: 10px 14px; border-radius: 12px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08); font-size: 12.5px; color: var(--tm-muted); }
.trp-formula span b { font-size: 20px; font-weight: 500; color: #fff; }
.trp-formula em { font-style: normal; font-size: 20px; color: var(--tm-muted); }
.trp-formula .is-result { background: rgba(255,58,94,.14); border-color: rgba(255,58,94,.45); } .trp-formula .is-result b { color: var(--tm-red-soft); }
.tfa-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 26px 0 0; }
.tfa-formula span { padding: 12px 16px; border-radius: 12px; background: var(--tm-surface); border: 1px solid var(--tm-line); font-size: 16px; }
.tfa-formula em { font-style: normal; font-size: 22px; color: var(--tm-muted); } .tfa-formula .is-result { background: rgba(255,58,94,.14); border-color: rgba(255,58,94,.45); color: var(--tm-red-soft); font-weight: 500; }
.trp-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.trp-area { display: flex; flex-direction: column; padding: 20px; border-radius: 18px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.08); }
.trp-area header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.trp-area__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(110,70,240,.25); color: var(--tm-lilac); } .trp-area__ic .tmh-ph { width: 20px; height: 20px; }
.trp-area h3 { flex: 1; margin: 0; font-size: 19px; font-weight: 500; }
.trp-area__score { font-size: 14px; color: var(--tm-muted); } .trp-area__score b { font-size: 22px; font-weight: 500; color: #fff; }
.trp-badge { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.trp-badge--high { background: rgba(79,245,145,.15); color: var(--tm-green); } .trp-badge--mid { background: rgba(180,150,255,.18); color: var(--tm-lilac); }
.trp-badge--low { background: rgba(255,58,94,.15); color: var(--tm-red-soft); } .trp-badge--none { background: rgba(255,255,255,.08); color: var(--tm-muted); }
.trp-area > .tfa-dots { margin: 14px 0 4px; } .trp-area.is-none { opacity: .75; }
.trp-qa { display: grid; gap: 8px; margin: 12px 0 0; }
.trp-qa div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; font-size: 14px; line-height: 1.45; }
.trp-qa dt { font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tm-muted); padding-top: 2px; }
.trp-qa dd { margin: 0; color: var(--tm-ink-2); } .trp-qa div:nth-child(2) dd { color: #fff; }
.trp-area > p { font-size: 15px !important; }
.trp-area__means b, .trp-area__check b { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tm-muted); }
.trp-area .trp-area__means { color: #fff; }
.trp-area .trp-area__check { margin-top: auto; padding: 12px 14px; border-radius: 12px; background: rgba(110,70,240,.12); }
.trp-area .trp-area__means + .trp-area__check { margin-top: 14px; }
.trp-fit, .trp-formulas, .trp-scale { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.trp-fit li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: rgba(79,245,145,.06); font-size: 15px; line-height: 1.5; color: var(--tm-ink-2); }
.trp-fit .tmh-ph { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--tm-green); } .trp-fit b { display: block; color: #fff; font-weight: 500; }
.trp-beyond { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trp-formulas { gap: 6px; } .trp-formulas li { padding: 8px 12px; border-radius: 10px; background: rgba(0,0,0,.22); font-size: 14px; line-height: 1.45; color: var(--tm-ink-2); font-variant-numeric: tabular-nums; }
.trp-scale { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.trp-scale li { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: rgba(0,0,0,.22); font-size: 13px; line-height: 1.4; color: var(--tm-ink-2); }
.trp-scale b { font-size: 22px; font-weight: 500; color: var(--tm-lilac); } .trp-scale li.is-low b { color: #FF5C7C; } .trp-scale li.is-high b { color: var(--tm-green); } .trp-scale strong { display: block; color: #fff; font-weight: 500; }
.trp-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; font-size: 14.5px; font-weight: 500; text-decoration: none; }
.trp-more .tmh-ph { width: 15px; height: 15px; transition: transform .2s; } .trp-more:hover .tmh-ph { transform: translateX(3px); }
.trp-tl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; counter-reset: tl; }
.trp-tl li { position: relative; padding: 18px 16px; border-radius: 16px; background: rgba(0,0,0,.22); }
.trp-tl__when { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tm-lilac); } .trp-tl li:last-child .trp-tl__when { color: var(--tm-green); }
.trp-tl b { display: block; margin-top: 6px; font-size: 17px; font-weight: 500; }
.trp-tl p { margin-top: 8px !important; font-size: 14px !important; line-height: 1.5 !important; }
.trp-sources { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; } .trp-sources a { color: var(--tm-ink-2); }
.trp-next { margin-top: 16px; padding: clamp(24px, 4vw, 48px); border-radius: 24px; text-align: center; border: 1px solid rgba(255,58,94,.35);
  background: radial-gradient(70% 90% at 50% 0%, rgba(255,58,94,.25), transparent 70%), radial-gradient(80% 80% at 50% 100%, rgba(110,70,240,.45), transparent 70%), #1C1830; }
.trp-next__k { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--tm-red-soft); }
.trp-next h2 { max-width: 20em; margin: 10px auto 0; font-size: clamp(26px, 3vw, 40px); font-weight: 400; line-height: 1.2; }
.trp-next > p { max-width: 40em; margin: 14px auto 22px; font-size: 16.5px; line-height: 1.55; color: var(--tm-ink-2); }
.trp-next .tmp-btn { min-height: 56px; padding: 0 28px; font-size: 17px; }
.trp-next .trp-h3 { margin-top: 36px; }
.trp-further { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; text-align: left; }
.trp-further a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px; border-radius: 16px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.1); color: var(--tm-ink-2); text-decoration: none; transition: border-color .2s, transform .2s; }
.trp-further a:hover { border-color: var(--tm-lilac); transform: translateY(-2px); }
.trp-further .tmh-ph { width: 22px; height: 22px; color: var(--tm-lilac); margin-bottom: 4px; } .trp-further b { color: #fff; font-weight: 500; } .trp-further span { font-size: 13.5px; line-height: 1.4; }
.trp-foot { margin-top: 16px; padding: 20px 4px; font-size: 14px; line-height: 1.5; color: var(--tm-muted); text-align: center; }
.trp-foot p { margin: 0 auto; max-width: 46em; } .trp-foot__brand { display: inline-flex !important; align-items: center; gap: 8px; margin-top: 12px !important; }
.trp-foot__brand img { height: 15px; width: auto; }

/* landing sections */
.tfa-preview { background: var(--tm-bg-2); overflow-x: clip; }
.tfa-preview__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.tfa-toc { display: flex; flex-direction: column; gap: 10px; margin: 26px 0 28px; padding: 0; list-style: none; counter-reset: toc; }
.tfa-toc li { counter-increment: toc; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; font-size: 15px; line-height: 1.45; color: var(--tm-ink-2); }
.tfa-toc li::before { content: counter(toc); grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(110,70,240,.25); color: var(--tm-lilac); font-weight: 600; font-size: 14px; }
.tfa-toc li:first-child::before { content: '★'; background: rgba(255,58,94,.2); color: var(--tm-red-soft); }
.tfa-toc b { color: #fff; font-weight: 500; font-size: 16.5px; }
.tfa-pages { position: relative; height: 480px; }
.tfa-page { position: absolute; width: 300px; height: 400px; padding: 22px; border-radius: 16px; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 70px -20px rgba(0,0,0,.8); background: #24242C; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.tfa-page--1 { left: 4%; top: 40px; z-index: 3; transform: rotate(-4deg); background: radial-gradient(70% 60% at 100% 0%, rgba(255,58,94,.25), transparent 60%), radial-gradient(80% 70% at 0% 100%, rgba(110,70,240,.6), transparent 70%), #1C1830; }
.tfa-page--2 { left: 30%; top: 10px; z-index: 2; transform: rotate(3deg); }
.tfa-page--3 { left: 54%; top: 70px; z-index: 1; transform: rotate(8deg); }
.tfa-pages:hover .tfa-page--1 { transform: rotate(-7deg) translate(-20px, -6px); } .tfa-pages:hover .tfa-page--3 { transform: rotate(11deg) translate(24px, 10px); }
.tfa-page__brand img { height: 15px; width: auto; }
.tfa-page__k { margin: 18px 0 0; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tm-ink-2); }
.tfa-page__big { display: flex; flex-direction: column; margin: 24px 0 0; font-size: 46px; font-weight: 500; letter-spacing: -.03em; line-height: 1; text-shadow: 0 0 40px rgba(255,58,94,.5); }
.tfa-page__big small { margin-top: 6px; font-size: 14px; letter-spacing: 0; color: var(--tm-red-soft); text-shadow: none; }
.tfa-page__sub { margin: 16px 0 0; font-size: 14px; color: var(--tm-ink-2); } .tfa-page__sub b { color: var(--tm-green); font-weight: 500; }
.tfa-mini-kpis { display: grid; gap: 6px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--tm-muted); }
.tfa-mini-kpis li { padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,.3); } .tfa-mini-kpis b { margin-right: 6px; font-size: 15px; font-weight: 500; color: #fff; }
.tfa-mini-score { position: relative; width: 130px; height: 130px; margin: 22px auto 18px; }
.tfa-mini-score svg { width: 100%; height: 100%; transform: rotate(-90deg); fill: none; } .tfa-mini-score circle { stroke: rgba(255,255,255,.1); stroke-width: 11; }
.tfa-mini-score circle + circle { stroke: var(--tm-lilac); stroke-linecap: round; }
.tfa-mini-score b { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 12px; font-size: 38px; font-weight: 500; }
.tfa-mini-score small { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; font-size: 11px; color: var(--tm-muted); }
.tfa-mini-bars { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--tm-ink-2); }
.tfa-mini-bars i { display: block; height: 6px; margin-top: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--tm-lilac) var(--w), rgba(255,255,255,.08) var(--w)); }
.tfa-mini-bars .is-weak { color: var(--tm-red-soft); } .tfa-mini-bars .is-weak i { background: linear-gradient(90deg, #FF5C7C var(--w), rgba(255,255,255,.08) var(--w)); }
.tfa-mini-tl { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 14px; }
.tfa-mini-tl li { padding: 12px; border-radius: 10px; background: rgba(0,0,0,.25); }
.tfa-mini-tl b { display: block; font-size: 11px; letter-spacing: .06em; color: var(--tm-lilac); }
.tfa-trust__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; }
.tfa-trust__list li { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 18px; background: var(--tm-surface); border: 1px solid var(--tm-line); }
.tfa-trust__list .tmh-ph { width: 26px; height: 26px; color: var(--tm-lilac); margin-bottom: 6px; }
.tfa-trust__list b { font-size: 17px; font-weight: 500; } .tfa-trust__list span { font-size: 14.5px; line-height: 1.5; color: var(--tm-ink-2); }

/* responsive */
@media (max-width: 1023px) {
  .tfa-hero__grid, .tfa-preview__grid, .tfa-gate { grid-template-columns: minmax(0, 1fr); }
  .tfa-res { grid-template-columns: minmax(0, 1fr); }
  .tfa-trust__list, .trp-further { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trp-tl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trp-cover__grid { grid-template-columns: minmax(0, 1fr); }
  .trp-scale { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tfa-pages { height: 440px; max-width: 520px; margin: 0 auto; width: 100%; }
}
@media (max-width: 699px) {
  .tfa-facts { grid-template-columns: minmax(0, 1fr); } .tfa-facts li { display: flex; align-items: center; gap: 12px; } .tfa-facts span { margin: 0; }
  .tfa-app { padding: 18px 16px; border-radius: 20px; }
  .tfa-hero.is-running .tfa-app { margin: 0 -6px; width: auto; }
  .tfa-prog > span:first-child { display: none; } .tfa-prog__bar i { width: 14px; }
  .tfa-kpis, .tfa-adjust__grid, .tfa-form__grid, .tfa-inc { grid-template-columns: minmax(0, 1fr); }
  .trp-beyond { grid-template-columns: minmax(0, 1fr); }
  .tfa-kpis li { display: flex; align-items: baseline; gap: 10px; }
  .tfa-trust__list, .trp-further, .trp-tl, .trp-areas, .trp-scale { grid-template-columns: minmax(0, 1fr); }
  .tfa-pages { height: 400px; } .tfa-page { width: 220px; height: 330px; padding: 16px; } .tfa-page--1 { left: 0; } .tfa-page--2 { left: 18%; } .tfa-page--3 { left: auto; right: 0; }
  .trp-table td:last-child { white-space: normal; }
  .tfa-page__big { font-size: 36px; }
  .trp-score { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .trp-key { padding: 14px 16px; }
  /* wide tables become one card per row, each value labelled with its column */
  .trp-table--stack thead { display: none; }
  .trp-table--stack, .trp-table--stack tbody, .trp-table--stack tr, .trp-table--stack th, .trp-table--stack td { display: block; width: 100%; }
  .trp-table--stack tr { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .trp-table--stack th, .trp-table--stack td { padding: 3px 0 !important; border: 0 !important; }
  .trp-table--stack th { color: #fff !important; font-weight: 500; }
  .trp-table--stack tr.trp-group { padding: 14px 0 0; border-bottom: 0; } .trp-table--stack tr.trp-group th { padding: 0 !important; color: var(--tm-lilac) !important; } .trp-table--stack tr.trp-group.is-cur th { color: var(--tm-ink-2) !important; }
  .trp-table--stack td { display: flex; justify-content: space-between; gap: 12px; text-align: right !important; white-space: normal !important; min-width: 0 !important; }
  .trp-table--stack td::before { content: attr(data-label); flex: 1; text-align: left; color: var(--tm-muted); font-size: 12.5px; }
  .trp-table--stack td.is-empty { display: none; }
  .trp-table--measures td.is-empty { display: flex; } .trp-table--measures td.is-empty::after { width: 90px; }
  .trp-table { font-size: 13.5px; } .trp-table th, .trp-table td { padding: 10px 6px; }
  .trp-qa div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tfa-actions { top: 70px; } .tfa-actions .tmp-btn { flex: 1 1 auto; justify-content: center; } .tfa-actions .tfa-link { margin: 0 auto; }
  .trp-sec { padding: 18px 16px; } .trp-cover { padding: 20px 18px; }
}
@media (prefers-reduced-motion: reduce) { .tfa-pulse { animation: none; } .tfa-worth__bar i { transition: none; } }

/* print: the report only (Save as PDF) */
@media print {
  @page { size: A4; margin: 12mm; }
  html, body { background: #1A1A1F !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tm-nav, .tmp-foot, .tfa-preview, .tfa-trust, .tfa .tpp-faq, .tfa .tmp-close, .tfa-hero__copy, .tfa-status, .tfa-actions, .tfa-adjust--report, .tmh-teaser { display: none !important; }
  .tfa-hero { padding: 0 !important; min-height: 0 !important; background: none !important; }
  .tfa-hero .tmp-wrap { padding: 0 !important; max-width: none !important; }
  .tfa-app { max-width: none !important; padding: 0 !important; }
  .trp-sec, .trp-next, .trp-cover { break-inside: auto; box-shadow: none !important; }
  .trp-sec { break-before: page; }
  .trp-area, .trp-tl li, .trp-table tr, .trp-score, .trp-key, .trp-callout, .trp-further li, .trp-fit li { break-inside: avoid; }
  .trp-cover__big, .tfa-res__big b { text-shadow: none !important; }
  .trp a { text-decoration: none; }
}

/* =====================================================================
   CONTACT (tct-): the form in the hero, three ways in, proof, FAQ
   ===================================================================== */
.tct-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "copy app" "facts app" "how app" ". app";
  grid-template-rows: auto auto auto 1fr; column-gap: clamp(28px, 4vw, 64px); row-gap: 26px; align-items: start; }
.tct-hero__copy { grid-area: copy; } .tct-facts { grid-area: facts; } .tct-how { grid-area: how; } .tct-app { grid-area: app; }
.tct-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.tct-facts li { padding: 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--tm-line); }
.tct-facts b { display: block; font-size: clamp(24px, 2.2vw, 32px); font-weight: 500; line-height: 1; color: #fff; }
.tct-facts li:nth-child(1) b { color: var(--tm-lilac); } .tct-facts li:nth-child(2) b { color: var(--tm-green); }
.tct-facts span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; color: var(--tm-ink-2); }
.tct-how { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tct-how li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.06); }
.tct-how li:first-child { border-top: 0; }
.tct-how li > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(110,70,240,.3); font-size: 13px; font-weight: 600; }
.tct-how li:last-child > span { background: rgba(79,245,145,.22); color: var(--tm-green); }
.tct-how p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--tm-ink-2); } .tct-how b { display: block; font-weight: 500; color: #fff; }

/* the form card */
.tct-app { position: relative; scroll-margin-top: calc(var(--tm-nav, 72px) + 16px); padding: clamp(20px, 2.6vw, 32px); border-radius: 24px; border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(80% 60% at 100% 0%, rgba(110,70,240,.3), transparent 60%), radial-gradient(70% 70% at 0% 100%, rgba(79,245,145,.08), transparent 70%), #1E1E25;
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.8); }
.tct-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.tct-step { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 0; font-size: clamp(20px, 1.8vw, 24px); font-weight: 400; color: #fff; }
.tct-step__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tm-purple); font-size: 14px; font-weight: 600; }
.tct-intents__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tct-intent { --c: var(--tm-lilac); position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.tct-intent:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); transform: translateY(-2px); }
.tct-intent--start { --c: #8B66FF; } .tct-intent--pilot { --c: var(--tm-green); } .tct-intent--session { --c: var(--tm-red-soft); } .tct-intent--enterprise { --c: var(--tm-lilac); }
.tct-intent input, .tct-other input, .tct-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tct-intent__ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 12px; background: color-mix(in srgb, var(--c) 18%, #26262F); color: var(--c); }
.tct-intent__ic .tmh-ph { width: 22px; height: 22px; }
.tct-intent b { font-size: 16.5px; font-weight: 500; color: #fff; } .tct-intent small { font-size: 13px; line-height: 1.4; color: var(--tm-muted); }
.tct-intent:has(input:checked) { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.tct-intent:has(input:focus-visible), .tct-other:has(input:focus-visible), .tct-chip:has(input:focus-visible) { outline: 2px solid var(--tm-lilac); outline-offset: 2px; }
.tct-other { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 10px; padding: 12px 16px; border-radius: 14px; border: 1px dashed rgba(255,255,255,.2);
  cursor: pointer; font-size: 15px; color: var(--tm-ink); }
.tct-other .tmh-ph { width: 18px; height: 18px; color: var(--tm-muted); } .tct-other small { font-size: 13px; color: var(--tm-muted); }
.tct-other:hover, .tct-other:has(input:checked) { border-color: rgba(255,255,255,.4); }
/* with JavaScript: reasons first, then only the questions for the chosen one */
.tct.is-js .tct-form:not(.has-intent) .tct-details, .tct.is-js .tct-form.has-intent .tct-intents { display: none; }
.tct.is-js .tct-form.has-intent .tct-details { animation: tfa-in .4s cubic-bezier(.2,.7,.2,1) both; }
.tct-details { display: grid; gap: 18px; }
.tct:not(.is-js) .tct-details { margin-top: 24px; }
.tct-chosen { --c: var(--tm-lilac); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 16px; border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); }
.tct-chosen--start { --c: #8B66FF; } .tct-chosen--pilot { --c: var(--tm-green); } .tct-chosen--session { --c: var(--tm-red-soft); } .tct-chosen--other { --c: rgba(255,255,255,.4); }
.tct-chosen__ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: color-mix(in srgb, var(--c) 20%, #26262F); color: var(--c); }
.tct-chosen__ic .tmh-ph { width: 22px; height: 22px; }
.tct-chosen small { display: block; font-size: 12px; color: var(--tm-muted); } .tct-chosen b { font-size: 17px; font-weight: 500; color: #fff; }
.tct-chosen__x { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.2); color: var(--tm-ink-2); font: 500 14px var(--tm-font); cursor: pointer; }
.tct-chosen__x:hover { color: #fff; border-color: rgba(255,255,255,.4); } .tct-chosen__x .tmh-ph { width: 15px; height: 15px; }
.tct-ctx { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(255,58,94,.1); border: 1px solid rgba(255,58,94,.35); font-size: 14px; line-height: 1.45; }
.tct-ctx .tmh-ph { width: 18px; height: 18px; flex: none; color: var(--tm-red-soft); }
.tct-ctx[data-tct-interests] { background: rgba(110,70,240,.14); border-color: rgba(180,150,255,.35); } .tct-ctx[data-tct-interests] .tmh-ph { color: var(--tm-lilac); }
.tct-q legend { margin: 0 0 8px; padding: 0; font-size: 14.5px; font-weight: 500; color: var(--tm-ink); }
.tct-q__hint { font-weight: 400; font-size: 13px; } .tct-q__hint a, .tct-fine a { color: var(--tm-lilac); }
.tct-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tct-chip { position: relative; cursor: pointer; }
.tct-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.03);
  font-size: 14px; color: var(--tm-ink-2); transition: border-color .15s, background .15s, color .15s; }
.tct-chip:hover span { border-color: rgba(255,255,255,.4); color: #fff; }
.tct-chip input:checked + span { border-color: var(--tm-lilac); background: rgba(110,70,240,.35); color: #fff; }
.tct-chip input[type="checkbox"]:checked + span::before { content: "✓"; margin-right: 6px; color: var(--tm-green); }
.tct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tct-field { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--tm-ink-2); min-width: 0; }
.tct-field input, .tct-field select, .tct-field textarea { width: 100%; height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: #15151A; color: #fff; font: 400 16px var(--tm-font); }
.tct-field textarea { height: auto; min-height: 84px; padding: 12px 14px; line-height: 1.45; resize: vertical; }
.tct-field input:focus, .tct-field select:focus, .tct-field textarea:focus { outline: 2px solid var(--tm-lilac); outline-offset: 1px; border-color: transparent; }
.tct-field [aria-invalid] { border-color: var(--tm-red); }
.tct-err { font-style: normal; font-size: 12.5px; line-height: 1.4; color: var(--tm-red-soft); } .tct-err:empty { display: none; } .tct-err.is-hint { color: var(--tm-lilac); }
.tct-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tct-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--tm-ink-2); cursor: pointer; }
.tct-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--tm-purple); }
.tct-submit { width: 100%; min-height: 54px; font-size: 17px; } .tct-submit[disabled] { opacity: .7; cursor: progress; }
.tct-fine { display: flex; gap: 6px; align-items: center; margin: -8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--tm-muted); } .tct-fine .tmh-ph { width: 14px; height: 14px; flex: none; }
.tct-fine + .tct-fine { margin-top: -14px; }
/* after sending */
.tct-done { outline: none; animation: tfa-in .4s cubic-bezier(.2,.7,.2,1) both; }
.tct-done__ic .tmh-ph { width: 48px; height: 48px; color: var(--tm-green); }
.tct-done h2 { margin: 10px 0 0; font-size: clamp(24px, 2.3vw, 32px); font-weight: 300; line-height: 1.2; }
.tct-done h3 { margin: 24px 0 6px; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--tm-muted); }
.tct-done p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--tm-ink-2); }
.tct-done .tmp-btn { margin-top: 16px; }
.tct-done__topic { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px !important; padding: 6px 12px; border-radius: 999px; background: rgba(110,70,240,.18); color: #fff !important; font-size: 14px !important; }
.tct-done__topic .tmh-ph { width: 16px; height: 16px; color: var(--tm-lilac); }
.tct-done__status { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px !important; padding: 12px 14px; border-radius: 12px; background: rgba(79,245,145,.08); border: 1px solid rgba(79,245,145,.35); }
.tct-done__status.is-warn { background: rgba(255,58,94,.1); border-color: rgba(255,58,94,.4); }
.tct-done__status .tmh-ph { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--tm-green); } .tct-done__status.is-warn .tmh-ph { color: var(--tm-red-soft); }
.tct-done__more { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tct-done__more a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--tm-line);
  color: #fff; text-decoration: none; font-size: 15px; }
.tct-done__more a:hover { border-color: rgba(180,150,255,.5); } .tct-done__more .tmh-ph { width: 16px; height: 16px; color: var(--tm-lilac); }

/* three ways in */
.tct-paths__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.tct-path { --c: var(--tm-lilac); display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 22px; background: var(--tm-surface); border: 1px solid var(--tm-line); }
.tct-path--pilot { --c: var(--tm-green); border-color: rgba(110,70,240,.6); background: radial-gradient(90% 60% at 100% 0%, rgba(110,70,240,.3), transparent 70%), var(--tm-surface); }
.tct-path--start { --c: #8B66FF; }
.tct-path__ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--c) 18%, #26262F); color: var(--c); }
.tct-path__ic .tmh-ph { width: 24px; height: 24px; }
.tct-path h3 { margin: 4px 0 0; font-size: 22px; font-weight: 500; }
.tct-path__big { margin: 0; font-size: clamp(30px, 2.8vw, 40px); font-weight: 500; line-height: 1; color: #fff; } .tct-path__big small { font-size: 15px; font-weight: 400; color: var(--tm-muted); }
.tct-path ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tct-path ul li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.45; color: var(--tm-ink-2); }
.tct-path ul li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.tct-path__tl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.tct-path__tl li { padding: 10px 8px; border-radius: 10px; background: rgba(255,255,255,.05); font-size: 12.5px; line-height: 1.3; color: var(--tm-ink-2); }
.tct-path__tl b { display: block; font-size: 12px; font-weight: 500; color: var(--c); } .tct-path__tl li:first-child b { color: var(--tm-red-soft); }
.tct-path .tmp-btn { margin-top: auto; align-self: flex-start; font-size: 16px; min-height: 46px; }
.tct-audit { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 16px; padding: 18px 22px; border-radius: 18px; background: rgba(255,58,94,.08); border: 1px solid rgba(255,58,94,.35); }
.tct-audit__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255,58,94,.2); color: var(--tm-red-soft); flex: none; }
.tct-audit__ic .tmh-ph { width: 22px; height: 22px; }
.tct-audit p { flex: 1 1 320px; margin: 0; font-size: 16px; line-height: 1.45; color: var(--tm-ink-2); } .tct-audit b { color: #fff; font-weight: 500; }
.tct-audit .tmp-btn { font-size: 16px; min-height: 46px; }

/* proof */
.tct-proof__eda { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin: 30px 0 0; text-align: center; font-size: 15px; color: var(--tm-ink-2); }
.tct-proof__eda img { height: 40px; width: auto; filter: brightness(0) invert(1); opacity: .85; }
.tct-proof__eda a { display: inline-flex; align-items: center; gap: 6px; color: var(--tm-lilac); text-decoration: none; } .tct-proof__eda .tmh-ph { width: 15px; height: 15px; }

@media (max-width: 1023px) {
  .tct-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "app" "facts" "how"; grid-template-rows: none; }
  .tct-app { max-width: 720px; width: 100%; }
  .tct-paths__grid { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
}
@media (max-width: 699px) {
  .tct-hero.tpp-hero { padding-top: calc(64px + 24px); }
  .tct-hero .tpp-lede { margin-top: 14px; font-size: 16px; }
  .tct-app { padding: 18px 14px; border-radius: 20px; margin: 0 -4px; width: auto; }
  .tct-intents__grid { gap: 8px; } .tct-intent { padding: 12px; } .tct-intent__ic { width: 34px; height: 34px; margin-bottom: 2px; } .tct-intent b { font-size: 15px; } .tct-intent small { font-size: 12.5px; }
  .tct-grid { grid-template-columns: minmax(0, 1fr); }
  .tct-facts { grid-template-columns: minmax(0, 1fr); } .tct-facts li { display: flex; align-items: center; gap: 12px; } .tct-facts span { margin: 0; }
  .tct-chosen b { font-size: 15.5px; } .tct-chosen__x { padding: 0 10px; }
  .tct-path { padding: 20px; } .tct-path__tl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tct-audit .tmp-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .tct-intent, .tct.is-js .tct-form.has-intent .tct-details, .tct-done { transition: none; animation: none; } .tct-intent:hover { transform: none; } }

/* ==================== Demo video overlay (tm-video, partials/demo-video.php) ==================== */
.tm-video { width: min(1120px, calc(100vw - 32px)); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; color: #fff; overflow: visible; }
.tm-video::backdrop { background: rgba(12,12,16,.86); backdrop-filter: blur(4px); }
.tm-video[open] { animation: tm-video-in .25s ease-out; }
.tm-video__box { position: relative; }
.tm-video__frame { position: relative; aspect-ratio: 16 / 9; max-height: calc(100vh - 120px); margin: 0 auto; border-radius: 14px; overflow: hidden; background: #000; box-shadow: var(--tm-shadow); }
.tm-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tm-video__close { position: absolute; right: 0; top: -54px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--tm-surface-2); color: #fff; cursor: pointer; }
.tm-video__close:hover { background: var(--tm-purple); }
.tm-video__close:focus-visible { outline: 2px solid var(--tm-lilac); outline-offset: 2px; }
.tm-video__close .tmh-ph { width: 20px; height: 20px; }
html.tm-video-lock, html.tm-video-lock body { overflow: hidden; }
@keyframes tm-video-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tm-video[open] { animation: none; } }

/* ==================== Product "Where it appears": same frame sizes as the home hero showcase (tmh-dev--*) ==================== */
@media (min-width: 1024px) { .tpp-where .tpp-where__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.tpp-where .tpp-stage { min-height: 720px; padding: 24px; }
.tpp-where .tpp-mock { display: flex; flex-direction: column; }
.tpp-where .tpp-mock--browser { max-width: 640px; height: 600px; }
.tpp-where .tpp-mock--browser .tpp-mock__bar { flex: none; height: 42px; }
.tpp-where .tpp-mock__body { flex: 1 1 auto; min-height: 0; grid-template-columns: minmax(0, 1fr) 330px; }
.tpp-where .tpp-mock--teams { max-width: 660px; height: 596px; }
.tpp-where .tpp-mock__tbar { flex: none; }
.tpp-where .tpp-mock__tw { flex: 1 1 auto; min-height: 0; }
.tpp-where .tpp-mock--phone { max-width: 340px; height: 646px; }
.tpp-where .tpp-mock__pbar { margin-top: auto; }
.tpp-where .tpp-mock--assist { max-width: 560px; height: 580px; }
.tpp-where .tpp-chat__bar { flex: none; height: 52px; }
.tpp-where .tpp-chat__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
@media (max-width: 699px) {
  .tpp-where .tpp-stage { min-height: 584px; padding: 12px; }
  .tpp-where .tpp-mock__body { grid-template-columns: minmax(0, 1fr); }
  .tpp-where .tpp-mock--browser { height: 524px; }
  .tpp-where .tpp-mock--teams { height: 536px; }
  .tpp-where .tpp-mock--phone { max-width: 300px; height: 560px; }
  .tpp-where .tpp-mock--assist { height: 530px; }
}


/* ==========================================================================
   Legal pages: privacy/ and legal/ (.tlg-). Long-form text with a sticky section list.
   ========================================================================== */
.tlg [id] { scroll-margin-top: 96px; }
.tlg-hero { padding: calc(72px + clamp(40px, 6vw, 80px)) 0 clamp(36px, 4vw, 56px); border-bottom: 1px solid var(--tm-line);
  background: radial-gradient(60% 120% at 85% 0%, rgba(110,70,240,.18), transparent 70%); }
.tlg-meta { margin: 16px 0 0; color: var(--tm-muted); font-size: 15px; }
.tlg-switch { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.tlg-switch a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--tm-line);
  color: var(--tm-ink-2); font-size: 15px; text-decoration: none; transition: border-color .2s, color .2s, background .2s; }
.tlg-switch a:hover { color: #fff; border-color: rgba(180,150,255,.5); }
.tlg-switch a[aria-current="page"] { color: #fff; background: rgba(110,70,240,.22); border-color: rgba(180,150,255,.5); }
.tlg-switch .tmh-ph { width: 17px; height: 17px; }

.tlg-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(72px, 9vw, 120px); }
.tlg-side { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; font-size: 14px; }
.tlg-side summary { list-style: none; margin-bottom: 12px; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tm-muted); pointer-events: none; }
.tlg-side summary::-webkit-details-marker { display: none; }
.tlg-side summary .tmh-ph { display: none; }
.tlg-side ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--tm-line); }
.tlg-side a { display: flex; gap: 10px; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--tm-ink-2); line-height: 1.35; text-decoration: none; }
.tlg-side a span { flex: none; min-width: 1.4em; color: var(--tm-muted); font-variant-numeric: tabular-nums; }
.tlg-side a:hover { color: #fff; border-left-color: var(--tm-lilac); }

.tlg-doc { max-width: 46em; color: var(--tm-ink-2); font-size: 16px; overflow-wrap: anywhere; }
.tlg-doc > :first-child { margin-top: 0; }
.tlg-doc p, .tlg-doc li { line-height: 1.65; }
.tlg-doc p { margin: 0 0 16px; }
.tlg-doc h2 { margin: 56px 0 18px; padding-top: 28px; border-top: 1px solid var(--tm-line); font-size: clamp(22px, 2vw, 28px); font-weight: 400; line-height: 1.25; letter-spacing: -.01em; color: #fff; }
.tlg-doc h2 span { color: var(--tm-lilac); font-weight: 500; }
.tlg-doc h3 { margin: 32px 0 12px; font-size: 18px; font-weight: 500; color: #fff; }
.tlg-doc strong { font-weight: 500; color: #fff; }
.tlg-doc ul { margin: 0 0 20px; padding-left: 22px; }
.tlg-doc li { margin-bottom: 8px; }
.tlg-doc li::marker { color: var(--tm-lilac); }
.tlg-doc a { color: var(--tm-lilac); text-underline-offset: 3px; }
.tlg-doc a:hover { color: #fff; }
.tlg-address { padding: 16px 20px; border-radius: 12px; background: var(--tm-surface); border: 1px solid var(--tm-line); }
.tlg-table { margin: 0 0 24px; overflow-x: auto; border: 1px solid var(--tm-line); border-radius: 12px; }
.tlg-table table { width: 100%; border-collapse: collapse; font-size: 14px; overflow-wrap: normal; }
.tlg-table th, .tlg-table td { padding: 12px 14px; text-align: left; vertical-align: top; line-height: 1.5; border-bottom: 1px solid var(--tm-line); }
.tlg-table tr:last-child > * { border-bottom: 0; }
.tlg-table thead th { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tm-muted); background: var(--tm-surface); }
.tlg-table tbody th { min-width: 12em; font-weight: 500; color: #fff; }
.tlg-table td:last-child, .tlg-table thead th:last-child { white-space: nowrap; }
.tlg-table td:last-child { font-weight: 500; color: #fff; }
.tlg-top { margin-top: 48px; }
.tlg-top a { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; text-decoration: none; }

@media (max-width: 899px) {
  .tlg-grid { grid-template-columns: minmax(0, 1fr); }
  .tlg-side { position: static; max-height: none; padding: 14px 16px; border: 1px solid var(--tm-line); border-radius: 12px; background: var(--tm-surface); }
  .tlg-side summary { display: flex; align-items: center; justify-content: space-between; margin: 0; pointer-events: auto; cursor: pointer; }
  .tlg-side summary .tmh-ph { display: block; width: 18px; height: 18px; transition: transform .2s; }
  .tlg-side details[open] summary { margin-bottom: 12px; }
  .tlg-side details[open] summary .tmh-ph { transform: rotate(180deg); }
}
@media print {
  .tm-nav, .tlg .tmp-foot, .tlg-side, .tlg-switch, .tlg-top { display: none !important; }
  .tlg, .tlg-doc, .tlg-doc h2, .tlg-doc h3, .tlg-doc strong { color: #000 !important; background: none !important; }
  .tlg-grid { display: block; padding: 0; }
}


/* ==========================================================================
   Currency switch (.tm-cur), on every page that shows prices: partials/currency-switch.php
   ========================================================================== */
.tm-cur { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; border: 1px solid var(--tm-line); background: rgba(255,255,255,.03); vertical-align: middle; }
.tm-cur button { min-width: 30px; height: 26px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--tm-muted);
  font: 500 13px/1 var(--tm-font); cursor: pointer; transition: background .2s, color .2s; }
.tm-cur button:hover { color: #fff; }
.tm-cur button[aria-pressed="true"] { background: rgba(110,70,240,.32); color: #fff; }
.tm-cur button:focus-visible { outline: 2px solid var(--tm-lilac); outline-offset: 1px; }
/* icons that follow the currency: one per currency, the right one shows */
.tm-cur-gbp, .tm-cur-usd { display: none !important; }
html[data-cur="gbp"] .tm-cur-eur, html[data-cur="usd"] .tm-cur-eur { display: none !important; }
html[data-cur="gbp"] .tm-cur-gbp, html[data-cur="usd"] .tm-cur-usd { display: inline-block !important; }
.tm-cur-wrap { margin-top: 20px; }
/* the switch inside the running audit: between "Back" and the progress, and in the report's toolbar */
.tfa-top .tm-cur { margin-left: auto; }
.tfa-actions .tm-cur { margin-left: auto; }
.tfa-actions .tm-cur + .tfa-link { margin-left: 0; }
@media print { .tm-cur { display: none !important; } }

/* ==========================================================================
   Slide decks (deck/): 16:9 slides for presenting. Prefix .tdk-
   The stage is drawn at 1920×1080 and scaled to the screen by teamenu-deck.js, so sizes here are stage pixels.
   Colors keep the site's meaning: red = problem, green = result, lilac = Teamenu.
   ========================================================================== */
.tdk-body { margin: 0; background: #000; }
.tdk-body:not(.tdk-body--lib) { overflow: hidden; }
.tdk {
  --tm-font: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tm-bg: #212125; --tm-surface: #2A2A33; --tm-surface-2: #323240;
  --tm-ink: #FFFFFF; --tm-ink-2: #D4D4DE; --tm-muted: #9A9AA8; --tm-line: rgba(255, 255, 255, .1);
  --tm-purple: #6E46F0; --tm-lilac: #B496FF; --tm-green: #4FF591; --tm-red: #FF3A5E; --tm-red-soft: #FF8197;
  position: fixed; inset: 0; overflow: hidden; background: #000; color: var(--tm-ink); font-family: var(--tm-font);
  -webkit-font-smoothing: antialiased; color-scheme: dark; cursor: none; user-select: none; -webkit-user-select: none;
}
.tdk.is-pointer { cursor: default; }
.tdk *, .tdk *::before, .tdk *::after { box-sizing: border-box; }
:where(.tdk) :where(p, ul, ol) { margin: 0; padding: 0; }
:where(.tdk) :where(ul, ol) { list-style: none; }
.tdk s { text-decoration: none; }
.tdk .tmh-ph { width: 1em; height: 1em; flex: none; }
/* app tiles: one size knob, --a */
.tdk .tmh-app { width: var(--a, 64px); height: var(--a, 64px); border-radius: calc(var(--a, 64px) * .24); box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.tdk .tmh-mono { font-size: calc(var(--a, 64px) * .36); }
.tdk-stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: 50% 50%; overflow: hidden; background: var(--tm-bg); }
.tdk.is-black .tdk-stage { visibility: hidden; }
.tdk-mark { position: absolute; left: 120px; bottom: 56px; width: 168px; opacity: .55; transition: opacity .6s; pointer-events: none; }
.tdk-mark svg, [data-tdk-logo] svg { display: block; width: 100%; height: auto; }
.tdk-stage.is-nomark .tdk-mark { opacity: 0; }

/* slides, scenes, steps */
.tdk-slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s;
  background: radial-gradient(1100px 700px at 88% 6%, rgba(110,70,240,.17), transparent 62%), var(--tm-bg); }
.tdk-slide.is-current { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.tdk-scene { position: absolute; inset: 0; padding: 110px 120px 140px; }
.tdk [data-step] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.tdk [data-step].is-shown { opacity: 1; transform: none; }
.tdk [data-step].is-past { transform: translateY(-28px); }
.tdk .tdk-scene[data-step] { transform: none; transition: opacity .6s ease; }
.tdk .tdk-scene[data-step]:not(.is-shown) { pointer-events: none; }
.tdk-in { opacity: 0; }
.tdk-in.is-go { animation: tdk-up .9s cubic-bezier(.2,.7,.2,1) var(--t, 0s) both; }
@keyframes tdk-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes tdk-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes tdk-strike { to { background-size: 100% var(--sw); } }
@keyframes tdk-dash { to { stroke-dashoffset: -44; } }
@keyframes tdk-dashbg { to { background-position: 22px 0; } }
.tdk-grow { opacity: 1; transform: scaleX(0); transform-origin: 0 50%; }
.tdk-grow.is-go { animation: tdk-grow 1.4s cubic-bezier(.3,.7,.2,1) var(--t, 0s) both; }
.tdk-strike { --sw: max(5px, .09em); background: linear-gradient(var(--tm-red), var(--tm-red)) no-repeat 0 60% / 0 var(--sw); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tdk-strike.is-go { animation: tdk-up .9s cubic-bezier(.2,.7,.2,1) var(--t, 0s) both, tdk-strike .55s ease calc(var(--t, 0s) + var(--t2, .7s)) forwards; }

/* type and shared bits */
.tdk-h { margin: 0; max-width: 1560px; font-size: 92px; font-weight: 300; line-height: 1.05; letter-spacing: -.025em; text-wrap: balance; }
.tdk-h strong { font-weight: 500; color: var(--tm-lilac); }
.tdk .tdk-red { color: var(--tm-red-soft); }
.tdk .tdk-green { color: var(--tm-green); }
.tdk-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 28px; padding: 10px 22px; border-radius: 999px; font-size: 24px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tm-lilac); background: rgba(110,70,240,.14); border: 1px solid rgba(180,150,255,.35); }
.tdk-ic { display: inline-grid; place-items: center; flex: none; width: 96px; height: 96px; border-radius: 26px; color: var(--tm-lilac);
  background: rgba(110,70,240,.16); border: 1px solid rgba(180,150,255,.3); font-size: 48px; }
.tdk-pill { display: inline-flex; align-items: center; gap: 16px; height: 88px; padding: 0 36px 0 28px; border-radius: 999px; font-size: 38px;
  background: rgba(255,255,255,.06); border: 1px solid var(--tm-line); }
.tdk-pill .tmh-ph { font-size: 42px; color: var(--tm-lilac); }
/* a resource: the thing inside an app (rendered from data-res by teamenu-deck.js) */
.tdk-res { display: inline-flex; align-items: center; gap: 18px; padding: 14px 28px 14px 14px; border-radius: 20px; text-align: left; white-space: nowrap; --a: 58px;
  background: var(--tm-surface); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 40px -16px rgba(0,0,0,.6); }
.tdk-res__t { display: grid; gap: 4px; }
.tdk-res b { font-size: 27px; font-weight: 500; letter-spacing: -.005em; }
.tdk-res small { display: flex; align-items: center; gap: 8px; font-size: 20px; color: var(--tm-muted); }
.tdk-res small .tmh-ph { font-size: 22px; color: var(--tm-lilac); }

/* cover */
.tdk-cover { display: grid; place-items: center; text-align: center;
  background: radial-gradient(1000px 640px at 50% 46%, rgba(110,70,240,.3), transparent 70%), var(--tm-bg); }
.tdk-drift > .tdk-res { position: absolute; left: var(--x); top: var(--y); opacity: .13; filter: saturate(.5);
  animation: tdk-drift 18s ease-in-out var(--d, 0s) infinite alternate; }
@keyframes tdk-drift { from { transform: translate(-14px, 18px) rotate(-2deg); } to { transform: translate(18px, -22px) rotate(2deg); } }
.tdk-cover__c { position: relative; }
.tdk-cover__logo { width: 1040px; margin: 0 auto; }
.tdk-chain { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 80px; }
.tdk-chain__plus { font-size: 52px; font-weight: 300; color: var(--tm-muted); }
.tdk-chain__line { width: 110px; height: 5px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--tm-lilac) 0 12px, transparent 12px 22px);
  animation: tdk-dashbg .9s linear infinite; }
.tdk-chain__leaf { display: grid; place-items: center; width: 150px; height: 150px; border-radius: 40px; color: #fff;
  background: linear-gradient(145deg, #8B66FF, var(--tm-purple)); box-shadow: 0 0 0 16px rgba(110,70,240,.16), 0 30px 90px -10px rgba(110,70,240,.8); }
.tdk-chain__leaf .tmp-leaf { width: 72px; height: 72px; }
.tdk-chain__res { display: grid; gap: 12px; }
.tdk-chain__res .tdk-res { padding: 10px 24px 10px 10px; --a: 46px; }
.tdk-chain__res .tdk-res b { font-size: 24px; } .tdk-chain__res .tdk-res small { font-size: 18px; }
.tdk-cover__tag { margin-top: 72px; font-size: 60px; font-weight: 300; letter-spacing: -.015em; color: var(--tm-ink-2); }
.tdk-cover__tag strong { font-weight: 500; color: var(--tm-green); }

/* problem: the maze */
.tdk-prob .tdk-scene:first-child { background: radial-gradient(800px 560px at 50% 62%, rgba(255,58,94,.14), transparent 70%); }
.tdk-maze__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.tdk-maze__lines path { fill: none; stroke: var(--tm-red-soft); stroke-width: 4; stroke-dasharray: 14 30; opacity: .6; animation: tdk-dash 1.6s linear infinite; }
.tdk-maze__me { position: absolute; left: 1100px; top: 660px; display: grid; place-items: center; width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 50%;
  font-size: 92px; color: #fff; background: var(--tm-purple); box-shadow: 0 0 0 18px rgba(110,70,240,.22), 0 0 0 40px rgba(110,70,240,.08); }
.tdk-maze__lens { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; font-size: 40px;
  background: var(--tm-red); border: 6px solid var(--tm-bg); animation: tdk-search 2.4s ease-in-out infinite; }
@keyframes tdk-search { 0%, 100% { transform: rotate(-14deg) translate(0, 0); } 50% { transform: rotate(10deg) translate(-6px, -4px); } }
.tdk-maze__q { position: absolute; display: grid; place-items: center; width: 120px; height: 120px; margin: -60px 0 0 -60px; --a: 120px; }
.tdk-maze__q > span:last-child { position: absolute; top: 100%; left: 50%; display: grid; justify-items: center; gap: 6px; margin-top: 18px; transform: translateX(-50%); white-space: nowrap; font-size: 40px; font-weight: 400; }
.tdk-maze__q small { font-size: 22px; color: var(--tm-muted); }
.tdk-want { position: absolute; left: 120px; top: 250px; display: grid; gap: 12px; padding: 30px 18px 18px; border-radius: 28px; border: 3px dashed rgba(255,58,94,.7); background: rgba(255,58,94,.06); }
.tdk-want__lbl { position: absolute; left: 22px; top: -20px; padding: 4px 16px; border-radius: 999px; font-size: 22px; font-weight: 500; color: #fff; background: var(--tm-red); }
.tdk-want .tdk-res { box-shadow: none; }
.tdk-maze__new { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 30px; font-size: 56px; color: var(--tm-lilac);
  border: 4px dashed rgba(180,150,255,.6); background: rgba(110,70,240,.12); }
.tdk-maze__q--up > span:last-child { top: auto; bottom: 100%; margin: 0 0 20px; }

/* problem: numbers */
.tdk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; margin-top: 90px; }
.tdk-stat { display: flex; flex-direction: column; padding: 52px 56px 44px; border-radius: 36px; background: rgba(255,255,255,.045); border: 1px solid var(--tm-line); }
.tdk-stat__n { display: flex; align-items: baseline; gap: 10px; font-size: 200px; font-weight: 300; line-height: .9; letter-spacing: -.04em; color: var(--tm-red-soft); font-variant-numeric: tabular-nums; }
.tdk-stat__n b { font-weight: 300; }
.tdk-stat__n small { font-size: 72px; letter-spacing: 0; }
.tdk-stat__l { margin-top: 26px; min-height: 2.3em; font-size: 42px; font-weight: 300; line-height: 1.15; color: var(--tm-ink); }
.tdk-stat__src { margin-top: auto; padding-top: 30px; font-size: 24px; letter-spacing: .06em; text-transform: uppercase; color: var(--tm-muted); }
.tdk-day { position: relative; height: 34px; margin-top: 46px; border-radius: 17px; overflow: hidden; background: rgba(255,255,255,.1); }
.tdk-day i { position: absolute; inset: 0 auto 0 0; width: 18.75%; background: var(--tm-red); border-radius: 17px; }   /* 90 min of an 8-hour day */
.tdk-ppl { position: relative; margin-top: 40px; font-size: 44px; }
.tdk-ppl__row { display: flex; gap: 6px; color: rgba(255,255,255,.18); }
.tdk-ppl__on { position: absolute; inset: 0 auto 0 0; width: 47%; overflow: hidden; color: var(--tm-red); }
.tdk-vs { display: grid; gap: 16px; margin-top: 36px; }
.tdk-vs p { display: flex; align-items: center; gap: 18px; font-size: 26px; white-space: nowrap; color: var(--tm-ink-2); }
.tdk-vs i { display: block; height: 30px; border-radius: 15px; flex: none; }
.tdk-vs p:first-child i { width: 52%; background: var(--tm-red); }
.tdk-vs p:last-child i { width: 37%; background: var(--tm-lilac); opacity: .7; }

/* problem: it's all there */
.tdk-all__nums { position: absolute; left: 120px; top: 470px; display: grid; gap: 56px; }
.tdk-all__nums p { display: grid; }
.tdk-all__nums b { font-size: 132px; font-weight: 300; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.tdk-all__nums p > span { font-size: 38px; font-weight: 300; color: var(--tm-ink-2); }
.tdk-silos { position: absolute; left: 780px; top: 372px; display: flex; gap: 28px; }
.tdk-silo { display: grid; justify-items: center; align-content: start; gap: 10px; width: 150px; --a: 72px; }
.tdk-silo > b { margin-bottom: 8px; font-size: 22px; font-weight: 500; color: var(--tm-ink-2); }
.tdk-silo ul { display: grid; gap: 6px; width: 100%; }
.tdk-silo li { display: flex; align-items: center; gap: 8px; height: 30px; padding-left: calc(var(--d) * 14px); font-size: 22px; color: var(--tm-lilac); opacity: calc(.9 - var(--i) * .075); }
.tdk-silo li span { display: block; height: 10px; width: var(--w); border-radius: 5px; background: rgba(255,255,255,.28); }
.tdk-silo li.is-want { margin-left: -6px; padding-right: 6px; border-radius: 8px; color: var(--tm-red); opacity: 1; outline: 3px dashed var(--tm-red); outline-offset: 0; }
.tdk-silo li.is-want span { background: var(--tm-red-soft); }
.tdk-outside { position: absolute; left: 730px; top: 320px; width: 1110px; height: 650px; border: 4px dashed rgba(255,255,255,.22); border-radius: 48px; --a: 72px; }
.tdk-outside > .tmh-app { position: absolute; opacity: .75; }
.tdk-outside__lbl { position: absolute; right: 48px; top: -30px; display: inline-flex; align-items: center; gap: 12px; padding: 10px 22px; border-radius: 999px;
  font-size: 30px; background: var(--tm-bg); border: 1px solid var(--tm-line); color: var(--tm-ink-2); }
.tdk-outside__lbl .tmh-ph { color: var(--tm-lilac); }

/* product */
.tdk-rt { display: flex; flex-direction: column; justify-content: center; gap: 150px; }
.tdk-nots { display: flex; flex-wrap: wrap; align-items: baseline; gap: 18px 46px; font-size: 76px; font-weight: 300; color: var(--tm-muted); }
.tdk-nots s { color: var(--tm-ink-2); }
.tdk-right { display: flex; align-items: center; gap: 36px; }
.tdk-right li { display: flex; align-items: center; gap: 26px; }
.tdk-right b { font-size: 66px; font-weight: 500; letter-spacing: -.02em; white-space: nowrap; }
.tdk-right .tdk-ic { width: 108px; height: 108px; font-size: 54px; border-radius: 30px; }
.tdk-right__to { font-size: 64px; color: var(--tm-lilac); }
.tdk-promise { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 90px; }
.tdk-promise__list { display: flex; gap: 40px; }
.tdk-promise__list li { position: relative; display: grid; justify-items: center; gap: 26px; width: 330px; padding: 52px 20px 44px; border-radius: 36px; font-size: 40px;
  border: 3px dashed rgba(255,255,255,.18); background: rgba(255,255,255,.03); color: var(--tm-ink-2); }
.tdk-promise__list .tmh-ph { font-size: 84px; color: var(--tm-muted); }
.tdk-promise__no { position: absolute; left: 0; right: 0; top: -28px; width: max-content; margin: 0 auto; padding: 6px 24px; border-radius: 999px;
  font-size: 32px; font-weight: 500; color: #fff; background: var(--tm-red); }
.tdk-promise__q { font-size: 120px; font-weight: 300; letter-spacing: -.03em; color: var(--tm-red-soft); }
.tdk-built { display: grid; grid-template-columns: 680px 1fr; gap: 60px; align-items: center; padding-bottom: 120px; }
.tdk-built__logo { width: 640px; margin-bottom: 64px; }
.tdk-built .tdk-h { font-size: 80px; }
.tdk-built__one { margin-top: 48px; font-size: 50px; font-weight: 300; color: var(--tm-ink-2); }
.tdk-built__one b { font-weight: 500; color: var(--tm-green); }
.tdk-built__ui { display: grid; justify-items: center; gap: 40px; }
.tdk-panel { width: 720px; border-radius: 32px; overflow: hidden; background: #2b2a3a; border: 1px solid rgba(180,150,255,.25);
  box-shadow: 0 40px 120px -30px rgba(110,70,240,.6), 0 2px 8px rgba(0,0,0,.4); padding-bottom: 32px; }
.tdk-panel__bar { display: flex; align-items: center; justify-content: space-between; padding: 22px 32px; font-size: 28px; color: var(--tm-ink-2); background: rgba(0,0,0,.25); }
.tdk-panel__bar .tmp-leaf { width: 34px; height: 34px; color: var(--tm-lilac); }
.tdk-panel__h { display: flex; align-items: center; gap: 12px; padding: 28px 36px 18px; font-size: 26px; font-weight: 500; color: var(--tm-ink-2); }
.tdk-panel__h .tmh-ph { color: var(--tm-lilac); font-size: 30px; }
.tdk-panel__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 8px; padding: 0 20px; --a: 76px; }
.tdk-panel__tiles li, .tdk-panel__groups li { display: grid; justify-items: center; gap: 10px; font-size: 21px; text-align: center; line-height: 1.15; color: var(--tm-ink-2); }
.tdk-panel__groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 20px; }
.tdk-panel__groups span { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 18px; font-size: 40px; color: var(--c); border: 3px solid var(--c); background: rgba(255,255,255,.04); }
.tdk-surf { display: flex; gap: 10px; }
.tdk-surf li { display: flex; align-items: center; gap: 12px; height: 68px; padding: 0 20px; border-radius: 999px; font-size: 24px; white-space: nowrap; color: var(--tm-muted); --a: 34px;
  border: 1px solid var(--tm-line); background: rgba(255,255,255,.04); transition: background .5s, color .5s, border-color .5s, transform .5s; }
.tdk-surf li > .tmh-ph { font-size: 34px; }
.tdk-surf li.is-on { color: #fff; background: var(--tm-purple); border-color: var(--tm-purple); transform: translateY(-6px); }
.tdk-surf__ai { display: flex; } .tdk-surf__ai .tmh-app + .tmh-app { margin-left: -10px; }

/* how it works (the home page flow, bigger) */
.tdk-how__top { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.tdk-tags { display: flex; gap: 14px; }
.tdk-tags li { padding: 14px 28px; border-radius: 999px; font-size: 30px; color: var(--tm-lilac); background: rgba(110,70,240,.14); border: 1px solid rgba(180,150,255,.35); }
.tdk-flow { display: grid; grid-template-columns: 720px 1fr 600px; gap: 30px; align-items: stretch; margin-top: 52px; height: 600px; }
.tdk-flow__stack, .tdk-flow__menu { padding: 28px 30px; border-radius: 32px; background: rgba(255,255,255,.04); border: 1px solid var(--tm-line); }
.tdk-flow__menu { display: flex; flex-direction: column; background: linear-gradient(160deg, rgba(110,70,240,.26), rgba(110,70,240,.08)); border-color: rgba(180,150,255,.3); }
.tdk-flow__lbl { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; font-size: 30px; font-weight: 500; }
.tdk-flow__lbl .tmh-ph { color: var(--tm-lilac); font-size: 34px; }
[data-flow-stack] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; --a: 34px; }
[data-flow-stack] li { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 12px; border-radius: 14px; font-size: 21px; white-space: nowrap; overflow: hidden;
  color: var(--tm-muted); border: 2px solid transparent; transition: color .5s, background .5s, border-color .5s; }
[data-flow-stack] li .tmh-app { opacity: .45; filter: grayscale(1); transition: opacity .5s, filter .5s; }
[data-flow-stack] li span { overflow: hidden; text-overflow: ellipsis; }
[data-flow-stack] li.is-hit { color: #fff; background: rgba(110,70,240,.22); border-color: rgba(180,150,255,.7); }
[data-flow-stack] li.is-hit .tmh-app { opacity: 1; filter: none; }
.tdk-flow__core { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px; }
.tdk-flow__leaf { display: grid; place-items: center; width: 170px; height: 170px; border-radius: 46px; color: #fff; background: linear-gradient(145deg, #8B66FF, var(--tm-purple));
  box-shadow: 0 0 0 18px rgba(110,70,240,.14), 0 30px 90px -10px rgba(110,70,240,.7); transition: transform .6s, box-shadow .6s; }
.tdk-flow__leaf .tmp-leaf { width: 80px; height: 80px; }
.tdk-how.is-curating .tdk-flow__leaf { transform: scale(1.1); box-shadow: 0 0 0 30px rgba(110,70,240,.2), 0 30px 110px -6px rgba(110,70,240,.95); }
.tdk-flow__core ul { display: grid; gap: 18px; }
.tdk-flow__core li { display: flex; align-items: center; gap: 14px; font-size: 26px; color: var(--tm-ink-2); }
.tdk-flow__core li .tmh-ph { font-size: 32px; color: var(--tm-green); }
[data-flow-menu] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 12px; align-content: start; flex: 1; padding-top: 10px; --a: 92px; }
[data-flow-menu] li { display: grid; justify-items: center; gap: 12px; font-size: 22px; text-align: center; line-height: 1.15; opacity: 0; transform: scale(.7);
  transition: opacity .5s, transform .6s cubic-bezier(.3,1.5,.5,1); }
[data-flow-menu] li.is-in { opacity: 1; transform: none; }
.tdk-flow__tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.tdk-flow__tabs li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; font-size: 21px; color: var(--tm-muted); border: 1px solid var(--tm-line); transition: all .5s; }
.tdk-flow__tabs li.is-on { color: #1d1d22; background: #fff; border-color: #fff; }
.tdk-nos, .tdk-ai { position: absolute; left: 120px; right: 120px; bottom: 62px; display: flex; justify-content: center; gap: 30px; }
.tdk-nos li { display: flex; align-items: center; gap: 14px; padding: 16px 30px; border-radius: 999px; font-size: 30px; background: rgba(79,245,145,.07); border: 1px solid rgba(79,245,145,.3); }
.tdk-nos .tmh-ph { font-size: 40px; color: var(--tm-green); }
.tdk-ai { align-items: center; font-size: 36px; }
.tdk-ai > .tmh-ph { font-size: 44px; color: var(--tm-muted); }
.tdk-ai span { display: inline-flex; align-items: center; gap: 14px; padding: 14px 30px; border-radius: 999px; font-weight: 500; background: var(--tm-purple); }
.tdk-ai b { font-weight: 400; color: var(--tm-green); }
.tdk-how[data-at="2"] .tdk-flow__tabs li.is-on { color: #fff; background: var(--tm-purple); border-color: var(--tm-purple); }

/* team */
.tdk-since { display: grid; grid-template-columns: 760px 1fr; gap: 100px; align-items: center; padding-bottom: 150px; }
.tdk-since__y { font-size: 290px; font-weight: 300; line-height: .85; letter-spacing: -.05em; }
.tdk-since__who { display: flex; align-items: center; gap: 36px; margin-top: 64px; }
.tdk-since__who p { display: grid; }
.tdk-since__who b { font-size: 64px; font-weight: 500; color: var(--tm-lilac); line-height: 1.05; }
.tdk-since__who span { font-size: 36px; font-weight: 300; color: var(--tm-ink-2); }
.tdk-faces { display: flex; flex: none; }
.tdk-faces img { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; border: 5px solid var(--tm-bg); background: var(--tm-lilac); }
.tdk-faces img + img { margin-left: -30px; }
.tdk-since__eda { display: block; height: 64px; margin-top: 64px; filter: brightness(0) invert(1); opacity: .7; }
.tdk-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tdk-logos li { display: grid; place-items: center; height: 150px; border-radius: 24px; background: rgba(255,255,255,.035); }
.tdk-logos img { display: block; height: var(--h, 50px); width: auto; max-width: 78%; object-fit: contain; opacity: .82; }
.tdk-proof__cards { display: flex; flex-wrap: wrap; align-items: center; gap: 36px; margin-top: 100px; }
.tdk-proof__card { display: flex; align-items: center; gap: 30px; padding: 40px 52px 40px 40px; border-radius: 36px; background: rgba(255,255,255,.045); border: 1px solid var(--tm-line); }
.tdk-proof__card b { white-space: nowrap; font-size: 56px; font-weight: 500; letter-spacing: -.015em; }
.tdk-saves { display: flex; flex-basis: 100%; gap: 16px; }
.tdk-saves li { display: flex; align-items: center; gap: 12px; padding: 16px 28px; border-radius: 999px; font-size: 32px; color: var(--tm-green); background: rgba(79,245,145,.08); border: 1px solid rgba(79,245,145,.3); }
.tdk-saves li::before { content: '−'; font-weight: 500; }
.tdk-wins { display: flex; gap: 30px; margin-top: 80px; }
.tdk-wins li { display: flex; align-items: center; gap: 18px; flex: 1; padding: 34px 36px; border-radius: 30px; font-size: 40px; font-weight: 300; line-height: 1.15; background: rgba(79,245,145,.06); }
.tdk-wins .tmh-ph { font-size: 52px; color: var(--tm-green); }

/* market */
.tdk-traits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; margin-top: 140px; }
.tdk-traits li { display: grid; gap: 34px; padding: 52px 44px; border-radius: 36px; font-size: 46px; font-weight: 300; line-height: 1.12; background: rgba(255,255,255,.045); border: 1px solid var(--tm-line); }
.tdk-traits .tdk-ic { width: 120px; height: 120px; font-size: 60px; border-radius: 32px; }
.tdk-fixes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 100px; }
.tdk-fixes li { display: flex; flex-direction: column; gap: 26px; min-height: 560px; padding: 48px 40px; border-radius: 36px; background: rgba(255,255,255,.045); border: 1px solid var(--tm-line); }
.tdk-fixes b { font-size: 54px; font-weight: 500; letter-spacing: -.015em; line-height: 1.05; }
.tdk-fixes__yes { font-size: 40px; font-weight: 300; line-height: 1.2; color: var(--tm-green); }
.tdk-fixes__no { margin-top: auto; font-size: 34px; line-height: 1.3; color: var(--tm-red-soft); }
.tdk-be { display: flex; align-items: center; justify-content: center; gap: 110px; padding-bottom: 150px;
  background: radial-gradient(800px 560px at 30% 50%, rgba(79,245,145,.1), transparent 70%); }
.tdk-be__clock { position: relative; width: 520px; height: 520px; flex: none; }
.tdk-be__clock svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tdk-be__clock circle { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 14; }
.tdk-be__clock .tdk-be__arc { opacity: 1; stroke: var(--tm-green); stroke-linecap: round; stroke-dasharray: 13 47; }
.tdk-be__arc.is-go { animation: tdk-arc 1.5s cubic-bezier(.3,.7,.2,1) both; }
@keyframes tdk-arc { from { stroke-dasharray: 0 60; } to { stroke-dasharray: 13 47; } }
.tdk-be__clock > .tmh-ph { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; color: var(--tm-green); }
.tdk-be__n { font-size: 300px; font-weight: 300; line-height: .85; letter-spacing: -.05em; color: var(--tm-green); font-variant-numeric: tabular-nums; }
.tdk-be__n b { font-weight: 300; }
.tdk-be__l { margin-top: 30px; font-size: 54px; font-weight: 300; color: var(--tm-ink-2); }
.tdk-be__l strong { font-weight: 500; color: var(--tm-ink); }
.tdk-be__one { display: flex; align-items: center; gap: 18px; margin-top: 70px; font-size: 50px; font-weight: 500; }
.tdk-be__one .tmh-ph { color: var(--tm-green); font-size: 58px; }

/* ask */
.tdk-asks { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 100px; }
.tdk-asks__card { display: grid; align-content: start; gap: 34px; padding: 56px 60px; border-radius: 40px; background: rgba(255,255,255,.045); border: 1px solid var(--tm-line); }
.tdk-asks__card > b { font-size: 70px; font-weight: 500; letter-spacing: -.02em; }
.tdk-asks__card ol { display: grid; gap: 22px; }
.tdk-asks__card li { display: flex; align-items: center; gap: 18px; font-size: 38px; font-weight: 300; color: var(--tm-ink-2); }
.tdk-asks__card li .tmh-ph { font-size: 44px; color: var(--tm-lilac); }
.tdk-tea { display: grid; grid-template-columns: 1fr 620px; align-items: center; gap: 60px; padding-bottom: 200px; }
.tdk-tea__stop { display: grid; gap: 30px; }
.tdk-tea__stop li { font-size: 96px; white-space: nowrap; font-weight: 300; letter-spacing: -.03em; line-height: 1; }
.tdk-tea__stop .tdk-strike.is-go { animation: tdk-up .9s cubic-bezier(.2,.7,.2,1) var(--t) both, tdk-strike .55s ease calc(var(--t) + var(--t2)) forwards, tdk-dim .6s ease calc(var(--t) + var(--t2)) forwards; }
@keyframes tdk-dim { to { color: var(--tm-muted); } }
.tdk-tea__cup { position: relative; display: grid; justify-items: center; }
.tdk-tea__cup svg { width: 460px; overflow: visible; }
.tdk-tea__cup > .tmp-leaf { position: absolute; left: 50%; top: 142px; width: 64px; height: 64px; margin-left: -32px; color: var(--tm-green); transform: rotate(-18deg); }
.tdk-tea__cup p { margin-top: 34px; font-size: 52px; font-weight: 300; }
.tdk-tea__cup p strong { font-weight: 500; color: var(--tm-green); }
.tdk-tea__body { fill: var(--tm-purple); }
.tdk-tea__tea { fill: #3a2290; }
.tdk-tea__handle { fill: none; stroke: #8B66FF; stroke-width: 26; stroke-linecap: round; }
.tdk-tea__saucer { fill: rgba(255,255,255,.1); }
.tdk-steam path { fill: none; stroke: var(--tm-lilac); stroke-width: 12; stroke-linecap: round; opacity: 0; animation: tdk-steam 3.6s ease-in-out infinite; }
.tdk-steam path:nth-child(2) { animation-delay: 1.2s; } .tdk-steam path:nth-child(3) { animation-delay: 2.4s; }
@keyframes tdk-steam { 0% { opacity: 0; transform: translateY(20px); } 30% { opacity: .55; } 100% { opacity: 0; transform: translateY(-50px); } }
.tdk-tea__end { position: absolute; left: 120px; right: 120px; bottom: 90px; display: flex; align-items: center; justify-content: center; gap: 40px; }
.tdk-tea__end [data-tdk-logo] { width: 300px; }
.tdk-tea__end b { font-size: 44px; font-weight: 400; color: var(--tm-ink-2); }
.tdk-ask.is-current[data-at="1"] ~ .tdk-mark { opacity: 0; }

/* reduced motion: end states, no loops */
@media (prefers-reduced-motion: reduce) {
  .tdk *, .tdk *::before, .tdk *::after { animation: none !important; transition-duration: .01s !important; }
  .tdk-in { opacity: 1; }
  .tdk-grow { transform: none; }
  .tdk-strike { background-size: 100% var(--sw); }
  .tdk-steam path { opacity: .45; }
}

/* library page (deck/) and its thumbnails */
.tdk-body--lib { color: #fff; background: #1A1A1F; font-family: 'Roboto', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.tdk-lib { max-width: 1520px; margin: 0 auto; padding: 56px clamp(16px, 4vw, 56px) 96px; }
.tdk-lib__head { display: flex; align-items: center; gap: 20px; }
.tdk-lib__logo { width: 150px; }
.tdk-lib__head h1 { margin: 0; font-size: 30px; font-weight: 300; color: #D4D4DE; }
.tdk-lib > h2 { margin: 56px 0 18px; font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #9A9AA8; }
.tdk-lib > p a, .tdk-lib__decks a { color: #B496FF; }
.tdk-lib__decks code, .tdk-lib__grid > li > code { font-size: 14px; color: #9A9AA8; }
.tdk-lib__hint { margin: 0 0 24px; max-width: 70em; line-height: 1.6; color: #D4D4DE; }
.tdk-lib__hint code { padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,.08); color: #fff; }
.tdk-lib__decks { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tdk-lib__decks > li { display: grid; gap: 6px; padding: 18px 22px; border-radius: 14px; background: #2A2A33; }
.tdk-lib__decks a { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; text-decoration: none; }
.tdk-lib__decks b { font-size: 20px; font-weight: 500; }
.tdk-lib__decks span { color: #D4D4DE; }
.tdk-lib__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 28px 24px; margin: 0; padding: 0; list-style: none; }
.tdk-lib__grid > li { display: grid; gap: 8px; }
.tdk-lib__grid > li > a { display: block; border-radius: 12px; outline-offset: 3px; }
.tdk--still { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; cursor: pointer; }
.tdk--still .tdk-stage { left: 0; top: 0; transform: scale(.2); transform-origin: 0 0; }   /* teamenu-deck.js fits it to the thumbnail */
.tdk--still .tdk-mark { display: none; }
.tdk--still *, .tdk--still *::before, .tdk--still *::after { animation: none !important; transition: none !important; }
.tdk--still .tdk-in { opacity: 1; }
.tdk--still .tdk-grow { transform: none; }
.tdk--still .tdk-strike { background-size: 100% var(--sw); }