/* Source: public-design.css */ /* CrewMaster 2026 public world: connected creator systems. Route-scoped by header.php. */ .cm-public-design { --primary: 208.888889 55.102041% 28.823529%; --primary-foreground: 0 0% 100%; --cm-brand: #214b72; --cm-panel: #101722; --cm-panel-raised: #162131; --cm-page: #0b1019; --cm-link: #a4c9e8; --cm-focus: #96c6ec; --background: 218.571429 38.888889% 7.058824%; --foreground: 210 20% 96%; --card: 216.666667 36% 9.803922%; --card-foreground: 210 20% 96%; --muted: 215.555556 38.028169% 13.921569%; --muted-foreground: 220 12% 71%; --border: 215 19% 23%; --input: 215 19% 32%; --cm-width: 1248px; --cm-space: clamp(64px,8vw,112px); --cm-radius: 8px; --cm-panel-radius: 16px; --cm-ink: hsl(var(--foreground)); --cm-secondary: hsl(var(--muted-foreground)); --cm-surface: hsl(var(--card)); --cm-line: hsl(var(--border)); --cm-ease: cubic-bezier(.23,1,.32,1); --cm-ease-in-out: cubic-bezier(.77,0,.175,1); --cm-fast: 160ms; color: var(--cm-ink); background: hsl(var(--background)); line-height: 1.65; -webkit-font-smoothing: antialiased; color-scheme: dark; scrollbar-color: var(--cm-line) hsl(var(--background)); } /* Home-only motion fixes: Telegram transcript and View in App routing story. */ .cm-public-design .t8-home .cm-showcase .cm-chat-demo{overflow:visible} .cm-public-design .t8-home .cm-showcase .cm-chat-header{padding:10px 12px} .cm-public-design .t8-home .cm-showcase .cm-chat-avatar{width:30px;height:30px;font-size:17px} .cm-public-design .t8-home .cm-showcase .cm-chat-transcript{min-height:252px;gap:7px;padding:10px 12px;overflow:visible} .cm-public-design .t8-home .cm-showcase .cm-chat-command{padding:7px 10px;font-size:11px} .cm-public-design .t8-home .cm-showcase .cm-chat-answer{max-width:96%;font-size:10px;line-height:1.38} .cm-public-design .t8-home .cm-showcase .cm-chat-answer>div:first-child{padding:8px 10px} .cm-public-design .t8-home .cm-showcase .cm-chat-options span{padding:7px 4px;font-size:9px} .cm-public-design .t8-home .cm-showcase .cm-chat-success{max-width:96%;padding:8px 10px;font-size:10px;line-height:1.3} .cm-public-design .t8-home .cm-showcase .cm-chat-success small{font-size:9px;line-height:1.35} .cm-public-design .t8-home .cm-showcase .cm-chat-typing{top:54px;left:12px;padding:10px} .t8-workspace #t5-panel-telegram .cm-chat-header{padding:10px 12px}.t8-workspace #t5-panel-telegram .cm-chat-avatar{width:30px;height:30px;font-size:17px} .t8-workspace #t5-panel-telegram .t5-preview,.t8-workspace #t5-panel-telegram .t5-preview-content,.t8-workspace #t5-panel-telegram .cm-chat-demo{overflow:visible} .t8-workspace #t5-panel-telegram .cm-chat-transcript{min-height:292px;gap:6px;padding:9px 11px 22px;overflow:visible} .t8-workspace #t5-panel-telegram .cm-chat-command{padding:6px 9px;font-size:10px} .t8-workspace #t5-panel-telegram .cm-chat-answer{max-width:96%;font-size:9px;line-height:1.25} .t8-workspace #t5-panel-telegram .cm-chat-answer>div:first-child{padding:7px 9px} .t8-workspace #t5-panel-telegram .cm-chat-options{gap:3px;margin-top:3px}.t8-workspace #t5-panel-telegram .cm-chat-options span{padding:5px 3px;font-size:8px} .t8-workspace #t5-panel-telegram .cm-chat-success{max-width:96%;padding:7px 9px;font-size:9px;line-height:1.25}.t8-workspace #t5-panel-telegram .cm-chat-success small{font-size:8px;line-height:1.25}.t8-workspace #t5-panel-telegram .cm-chat-success>i{font-size:17px} .t8-workspace #t5-panel-telegram .cm-chat-typing{top:50px;left:11px;padding:9px} .t8-workspace .cm-demo-viewinapp{container-type:inline-size} .t8-workspace #t5-panel-viewinapp{grid-template-columns:minmax(180px,.5fr) minmax(0,1.6fr);gap:24px;padding:32px} .t8-workspace #t5-panel-viewinapp .t5-preview-content{padding:26px 22px} .t8-workspace .cm-app-demo{display:grid;grid-template-columns:minmax(210px,1.1fr) 132px minmax(210px,.9fr);align-items:center;gap:20px;width:100%;max-width:790px;margin:auto} .t8-workspace .cm-app-source{display:flex;align-items:center;gap:13px;min-width:0;padding:18px;border:1px solid #5b555b;border-radius:14px;background:#2f2730;box-shadow:0 16px 36px #160a1329} .t8-workspace .cm-app-source-icon{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:11px;background:#ff00331c;color:#ff405f;font-size:24px} .t8-workspace .cm-app-source div{display:grid;min-width:0}.t8-workspace .cm-app-source small{color:#c6aeb6;font-size:9px;letter-spacing:.14em}.t8-workspace .cm-app-source strong{display:block;max-width:100%;overflow:hidden;color:#f5e9ed;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.t8-workspace .cm-app-source>i{margin-left:auto;flex:none;color:#9b8991;font-size:13px} .t8-workspace .cm-app-transform{position:relative;display:flex;align-items:center;justify-content:center;width:100%;color:#74d1ff}.t8-workspace .cm-app-transform-line{min-width:10px;height:1px;flex:1;background:linear-gradient(90deg,transparent,#63cbff)}.t8-workspace .cm-app-transform-line:nth-of-type(3){background:linear-gradient(90deg,#63cbff,transparent)} .t8-workspace .cm-app-engine{display:flex;align-items:center;gap:8px;flex:none;padding:9px 12px;border:1px solid #55c9ff70;border-radius:999px;background:#102b3b;color:#d8f3ff;font-size:10px;white-space:nowrap;box-shadow:0 0 22px #32bfff22}.t8-workspace .cm-app-engine img{width:22px;height:22px}.t8-workspace .cm-app-packet{position:absolute;z-index:2;left:0;top:50%;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#74d1ff;color:#09202d;font-size:10px;opacity:0} .t8-workspace .cm-app-phone{width:210px;max-width:100%;padding:10px;border:1px solid #515968;border-radius:26px;background:#171a21;box-shadow:0 22px 45px #0006}.t8-workspace .cm-phone-camera{margin-bottom:9px}.t8-workspace .cm-phone-screen{position:relative;height:220px;overflow:hidden;border-radius:17px;background:#0c0f14} .t8-workspace .cm-app-browser{position:absolute;inset:12px;display:flex;align-items:center;justify-content:space-between;padding:12px;border:1px solid #4c5360;border-radius:10px;background:#272c35;color:#d4d7dc;font-size:10px}.t8-workspace .cm-app-browser span{display:flex;align-items:center;gap:7px}.t8-workspace .cm-app-browser>i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#672936;color:#ff9bad} .t8-workspace .cm-app-youtube{position:absolute;inset:12px;display:grid;place-items:center;align-content:center;gap:5px;border-radius:12px;background:radial-gradient(circle at 50% 32%,#642233,#26131a 72%);opacity:0;transform:scale(.88)}.t8-workspace .cm-app-youtube>i{color:#ff3152;font-size:38px}.t8-workspace .cm-app-youtube strong{color:white;font-size:14px}.t8-workspace .cm-app-youtube span{color:#d6a9b2;font-size:8px;letter-spacing:.18em} .t8-workspace .cm-app-direct{position:absolute;left:20px;right:20px;bottom:18px;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px;border-radius:999px;background:#173c32;color:#a0eacb;font-size:8px;opacity:0;transform:translateY(8px)} @keyframes cm-via-packet{0%,8%{left:0;opacity:0;transform:translate(-4px,-50%) scale(.8)}14%{opacity:1}43%{left:calc(100% - 28px);opacity:1;transform:translate(4px,-50%) scale(1)}48%,100%{left:calc(100% - 28px);opacity:0;transform:translate(8px,-50%) scale(.7)}} @keyframes cm-via-browser{0%,42%{opacity:1;transform:translateX(0) scale(1)}52%,100%{opacity:0;transform:translateX(42px) scale(.94)}} @keyframes cm-via-youtube{0%,48%{opacity:0;transform:scale(.88)}58%,92%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.96)}} @keyframes cm-via-direct{0%,60%{opacity:0;transform:translateY(8px)}68%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}} @media(prefers-reduced-motion:no-preference){.t8-workspace .cm-demo-viewinapp.cm-ambient-active .cm-app-packet{animation:cm-via-packet 6s cubic-bezier(.45,0,.2,1) infinite}.t8-workspace .cm-demo-viewinapp.cm-ambient-active .cm-app-browser{animation:cm-via-browser 6s cubic-bezier(.4,0,.2,1) infinite}.t8-workspace .cm-demo-viewinapp.cm-ambient-active .cm-app-youtube{animation:cm-via-youtube 6s cubic-bezier(.2,.8,.2,1) infinite}.t8-workspace .cm-demo-viewinapp.cm-ambient-active .cm-app-direct{animation:cm-via-direct 6s cubic-bezier(.2,.8,.2,1) infinite}} @media(prefers-reduced-motion:reduce){.t8-workspace .cm-app-browser,.t8-workspace .cm-app-packet{display:none}.t8-workspace .cm-app-youtube,.t8-workspace .cm-app-direct{opacity:1;transform:none}} @container(max-width:620px){.t8-workspace .cm-app-demo{grid-template-columns:1fr;gap:12px}.t8-workspace .cm-app-source{width:min(330px,100%);margin:auto}.t8-workspace .cm-app-transform{width:min(280px,86%);height:48px;margin:auto}.t8-workspace .cm-app-transform-line{height:1px}.t8-workspace .cm-app-phone{width:min(210px,78vw);margin:auto}} @media(max-width:767px){.t8-workspace #t5-panel-viewinapp{grid-template-columns:1fr;gap:24px;padding:28px 18px 38px}.t8-workspace #t5-panel-viewinapp .t5-preview-content{padding:22px 16px}.cm-public-design .t8-home .cm-showcase .cm-chat-transcript{min-height:220px;gap:5px;padding:8px 10px}.cm-public-design .t8-home .cm-showcase .cm-chat-header{padding:8px 10px}.cm-public-design .t8-home .cm-showcase .cm-chat-answer{font-size:9px;line-height:1.3}.cm-public-design .t8-home .cm-showcase .cm-chat-options span{padding:5px 3px}.cm-public-design .t8-home .cm-showcase .cm-chat-success{padding:6px 8px}.cm-public-design .t8-home .cm-showcase .cm-chat-command{padding:6px 8px}} .cm-public-design ::selection { background: hsl(var(--primary)/.25); color: var(--cm-ink); } .cm-public-design :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline: 2px solid var(--cm-focus); outline-offset: 4px; } .cm-public-design :is(a,button,summary) { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .cm-public-design :is(button,a) { transition: color var(--cm-fast) ease,background-color var(--cm-fast) ease,border-color var(--cm-fast) ease,transform var(--cm-fast) var(--cm-ease); } .cm-public-design :is(button,a[class*="bg-primary"],.cm-button):active { transform: scale(.98); } .cm-public-design :is(button:disabled,[aria-disabled="true"]) { opacity: .45; cursor: not-allowed; } .cm-public-design :is(input,select,textarea) { caret-color: var(--cm-link); font-size: 16px; border-radius: var(--cm-radius); } .cm-public-design input:is([type="checkbox"],[type="radio"]) { min-height: 0; } .cm-public-design :is(h1,h2,h3) { line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; } .cm-public-design h1 { font-size: clamp(36px,4.8vw,64px); font-weight: 700; } .cm-public-design h2 { font-size: clamp(28px,3.4vw,44px); font-weight: 600; } .cm-public-design h3 { letter-spacing: -.02em; } .cm-public-design p { text-wrap: pretty; } .cm-public-design p:is(.text-xl,.text-2xl) { font-size: 18px; line-height: 1.75; } .cm-public-design .text-gray-500 { color: var(--cm-secondary); } .cm-public-design .gradient-text { background: none; color: var(--cm-link); -webkit-text-fill-color: currentColor; } .cm-public-design :is(.glow-effect,.animate-glow) { box-shadow: none; animation: none; } .cm-public-design :is(.animate-fade-in,.animate-slide-up) { animation: none; opacity: 1; transform: none; } .cm-public-design :is(.cm-container,[class*="max-w-7xl"]) { max-width: var(--cm-width); margin-inline: auto; } .cm-public-design .cm-container { width: calc(100% - 64px); } .cm-public-design .cm-section { padding-block: var(--cm-space); } .cm-public-design :is(section,[id]) { scroll-margin-top: 104px; } .cm-public-design .cm-section-heading { max-width: 700px; margin-bottom: 56px; } .cm-public-design .cm-section-heading h2 { margin-bottom: 20px; } .cm-public-design .cm-section-heading p { max-width: 60ch; color: var(--cm-secondary); font-size: 17px; } .cm-public-design .cm-section-heading h2 > span { color: var(--cm-link); } .cm-public-design .cm-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .cm-public-design .cm-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 12px 22px; border-radius: var(--cm-radius); font-size: 14px; font-weight: 600; line-height: 1.5; text-align: center; overflow: hidden; } .cm-public-design .cm-button-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: inset 0 1px 0 hsl(0 0% 100%/.35),0 6px 20px hsl(var(--primary)/.12); } .cm-public-design .cm-button-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg,transparent 20%,hsl(0 0% 100%/.22) 50%,transparent 80%); transform: translateX(-130%); transition: transform 250ms var(--cm-ease); pointer-events: none; } .cm-public-design .cm-button-secondary { border: 1px solid var(--cm-line); background: hsl(var(--muted)/.3); color: var(--cm-ink); } .cm-public-design .cm-text-link { display: inline-flex; gap: 16px; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--cm-link); text-underline-offset: 6px; } .cm-public-design :is(.cm-button,.cm-text-link,.cm-product-paths a) > i:last-child { transition: transform var(--cm-fast) var(--cm-ease); } /* A floating navigation bar becomes solid as the visitor enters the product story. */ .cm-public-design .cm-public-nav { top: 16px; left: 50%; width: calc(100% - 48px); max-width: var(--cm-width); transform: translateX(-50%); background: hsl(var(--background)/.8); border: 1px solid hsl(var(--border)/.6); border-radius: 12px; backdrop-filter: blur(16px); transition: background-color 200ms ease,border-color 200ms ease,box-shadow 200ms ease; } .cm-public-design.cm-is-scrolled .cm-public-nav { background: hsl(var(--card)/.96); border-color: var(--cm-line); box-shadow: 0 12px 32px hsl(225 30% 2%/.3); } .cm-public-design .cm-public-nav > div { padding-inline: 20px; } .cm-public-design .cm-public-nav > div > div { height: 64px; } .cm-public-design .cm-public-nav a { font-size: 14px; } .cm-public-design .cm-navbar-brand-label { font-size: 18px; } .cm-public-design .cm-public-nav :is(button,#language-button) { min-height: 44px; } .cm-public-design .cm-public-nav a[aria-current="page"] { color: var(--cm-link); } .cm-public-design .cm-public-nav a[href="/"] img { height: 32px; width: 32px; } .cm-public-design #mobile-menu { top: 72px; left: 0; right: 0; background: hsl(var(--card)); border-color: var(--cm-line); border-radius: 12px; backdrop-filter: none; } .cm-public-design #mobile-menu a { min-height: 44px; } /* First viewport: creator copy and the product at work, in a shared scene. */ .cm-public-design .cm-launch-hero { position: relative; isolation: isolate; padding: 144px 0 32px; overflow: clip; } .cm-public-design .cm-launch-grid { display: grid; grid-template-columns: minmax(0,.94fr) minmax(0,1.06fr); align-items: center; gap: 64px; } .cm-public-design .cm-launch-copy { position: relative; z-index: 2; } .cm-public-design .cm-launch-copy h1 { font-size: clamp(40px,4.2vw,60px); line-height: 1.07; letter-spacing: -.035em; max-width: 16ch; margin-bottom: 28px; } .cm-public-design .cm-launch-copy h1 br { display: none; } .cm-public-design .cm-headline-accent { color: var(--cm-link); } .cm-public-design .cm-launch-copy > p { font-size: 17px; color: var(--cm-secondary); line-height: 1.8; max-width: 50ch; margin-bottom: 32px; } .cm-public-design .cm-hero-platform-line { display: flex; gap: 10px; align-items: center; font-size: 12px; margin-top: 28px; color: var(--cm-secondary); } .cm-public-design .cm-hero-platform-line i { font-size: 15px; margin-left: 12px; } .cm-public-design .cm-hero-platform-line i:first-child { margin-left: 0; } .cm-public-design .cm-hero-ambient { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .cm-public-design .cm-hero-ambient > div:first-child { position: absolute; right: -10%; top: 0; width: 75%; height: 90%; background: radial-gradient(ellipse,hsl(var(--primary)/.13),transparent 66%); } .cm-public-design .cm-hero-ambient > div:last-child { position: absolute; width: 80%; height: 160px; right: -10%; top: 54%; background: linear-gradient(90deg,transparent,hsl(var(--primary)/.08),transparent); transform: rotate(-22deg); } .cm-public-design .cm-showcase { position: relative; min-width: 0; perspective: 1400px; padding-block: 24px 56px; } .cm-public-design .cm-showcase-shell { position: relative; z-index: 2; border: 1px solid hsl(210 24% 35%/.7); border-radius: var(--cm-panel-radius); background: hsl(225 18% 9%); overflow: hidden; box-shadow: 0 36px 72px hsl(225 35% 2%/.55); transform: rotateX(calc(var(--cm-scroll-x,4deg) + var(--cm-tilt-x,0deg))) rotateY(calc(var(--cm-scroll-rotate-y,-8deg) + var(--cm-tilt-y,0deg))) translateY(var(--cm-scroll-y,0px)); transition: transform 250ms var(--cm-ease); transform-style: preserve-3d; } .cm-public-design .cm-showcase-light { position: absolute; inset: -12% -20%; background: radial-gradient(ellipse,hsl(var(--primary)/.12),transparent 67%); pointer-events: none; } .cm-public-design .cm-showcase-orbit { position: absolute; inset: 10% -20%; border: 1px solid hsl(var(--primary)/.12); border-radius: 50%; transform: rotate(-28deg); pointer-events: none; } .cm-public-design .cm-window-bar { display: flex; gap: 16px; align-items: center; padding: 14px 16px; background: hsl(225 20% 12%); border-bottom: 1px solid hsl(var(--border)/.65); font-size: 11px; color: var(--cm-secondary); } .cm-public-design .cm-window-bar > i { margin-left: auto; } .cm-public-design .cm-window-dots { display: flex; gap: 5px; } .cm-public-design .cm-window-dots b { width: 6px; height: 6px; border-radius: 50%; background: hsl(220 10% 40%); } .cm-public-design .cm-showcase-body { display: grid; grid-template-columns: 56px 1fr; } .cm-public-design .cm-showcase-side { display: flex; flex-direction: column; align-items: center; gap: 26px; border-right: 1px solid hsl(var(--border)/.6); padding-top: 20px; color: var(--cm-secondary); font-size: 15px; } .cm-public-design .cm-showcase-side i:first-of-type { color: var(--cm-link); } .cm-public-design .cm-showcase-content { min-width: 0; padding: 20px; } .cm-public-design .cm-preview-switch { display: flex; gap: 2px; padding-bottom: 16px; } .cm-public-design .cm-preview-switch button { min-height: 40px; padding: 8px 12px; font-size: 12px; font-weight: 600; color: var(--cm-secondary); white-space: nowrap; border-bottom: 2px solid transparent; } .cm-public-design .cm-preview-switch button[aria-selected="true"] { border-color: var(--cm-link); color: var(--cm-ink); } .cm-public-design .cm-preview-panels { min-height: 230px; } .cm-public-design .cm-preview-panels > [hidden] { display: none; } .cm-public-design .cm-preview-note { display: flex; align-items: center; gap: 8px; color: var(--cm-secondary); font-size: 11px; padding-top: 16px; } .cm-public-design .cm-floating-message { position: absolute; z-index: 3; bottom: 24px; left: -32px; display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: hsl(225 19% 13%); border: 1px solid hsl(210 24% 35%/.6); border-radius: 12px; box-shadow: 0 16px 40px hsl(225 35% 2%/.35); } .cm-public-design .cm-provider-icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--cm-link); background: hsl(var(--primary)/.1); border-radius: 10px; font-size: 22px; } .cm-public-design .cm-floating-message strong { display: block; font-size: 13px; line-height: 1.4; } .cm-public-design .cm-floating-message div > span { display: block; color: var(--cm-secondary); font-size: 11px; } .cm-public-design .cm-floating-message > i { color: var(--cm-link); font-size: 12px; } .cm-public-design .cm-floating-platforms { position: absolute; top: 0; right: -12px; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 12px 20px; border: 1px solid var(--cm-line); border-radius: 10px; background: hsl(225 19% 13%); color: var(--cm-ink); } .cm-public-design .cm-floating-platforms span { width: 12px; height: 1px; background: hsl(var(--primary)/.5); } .cm-public-design .cm-live-proof { display: flex; align-items: center; gap: 48px; margin-top: 64px; padding-top: 28px; border-top: 1px solid hsl(var(--border)/.6); } .cm-public-design .cm-live-proof > div { display: flex; align-items: baseline; gap: 12px; } .cm-public-design .cm-live-proof strong { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .cm-public-design .cm-live-proof span { font-size: 12px; color: var(--cm-secondary); } .cm-public-design .cm-motion-control { margin-left: auto; min-width: 44px; min-height: 44px; border: 1px solid var(--cm-line); border-radius: var(--cm-radius); color: var(--cm-secondary); } /* Existing public demo markup becomes a product visual, never a live data claim. */ .cm-public-design .cm-demo-ui > div { max-width: none; width: 100%; } .cm-public-design .cm-demo-ui > div > div { border: 0; box-shadow: none; background: transparent; padding: 0; } .cm-public-design .cm-demo-ui .text-xs { font-size: 14px; } .cm-public-design .cm-demo-ui [class*="text-[9px]"] { font-size: 11px; } .cm-public-design .cm-demo-ui [class*="text-[10px]"] { font-size: 12px; } .cm-public-design .cm-demo-ui [class*="text-indigo-500"] { color: var(--cm-link); } .cm-public-design .cm-demo-ui [class*="bg-indigo-500"] { background-color: hsl(var(--primary)/.07); } .cm-public-design .cm-demo-ui [class*="border-indigo-500"] { border-color: hsl(var(--primary)/.15); } .cm-public-design .cm-demo-ui .text-indigo-700,.cm-public-design .cm-demo-ui .text-emerald-700,.cm-public-design .cm-demo-ui .text-red-700,.cm-public-design .cm-demo-ui .text-amber-700,.cm-public-design .cm-demo-ui .text-pink-700,.cm-public-design .cm-demo-ui .text-blue-700,.cm-public-design .cm-demo-ui .text-purple-700 { color: var(--cm-ink); } .cm-public-design .cm-demo-modules .grid > div { background: hsl(var(--muted)/.7); border-color: var(--cm-line); box-shadow: none; transform: none; padding-block: 24px; } .cm-public-design .cm-demo-telegram .text-xs { font-size: 13px; } .cm-public-design .cm-demo-vault > div > div { padding: 8px; } .cm-public-design .cm-product-paths { border-block: 1px solid hsl(var(--border)/.6); } .cm-public-design .cm-product-paths > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); } .cm-public-design .cm-product-paths a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 84px; padding: 24px; border-right: 1px solid hsl(var(--border)/.6); font-size: 14px; font-weight: 500; } .cm-public-design .cm-product-paths a:first-child { padding-left: 0; } .cm-public-design .cm-product-paths a:last-child { border-right: 0; } .cm-public-design .cm-product-paths i { color: var(--cm-link); font-size: 12px; } /* Three paced stories, alternating material and copy. */ .cm-public-design .cm-story-section > div > header { max-width: 720px; } .cm-public-design .cm-story-row { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: 96px; align-items: center; padding-block: 48px; } .cm-public-design .cm-story-copy { max-width: 430px; } .cm-public-design .cm-story-icon { color: var(--cm-link); font-size: 28px; margin-bottom: 24px; } .cm-public-design .cm-story-copy h3 { font-size: clamp(28px,3.1vw,40px); margin-bottom: 20px; font-weight: 600; } .cm-public-design .cm-story-copy p { color: var(--cm-secondary); font-size: 17px; margin-bottom: 20px; line-height: 1.8; } .cm-public-design .cm-story-visual { position: relative; padding: 40px; border-radius: 24px; background: var(--cm-panel); isolation: isolate; } .cm-public-design .cm-story-visual::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at 70% 20%,hsl(var(--primary)/.08),transparent 65%); } .cm-public-design .cm-demo-frame { background: var(--cm-panel); border: 1px solid var(--cm-line); border-radius: 12px; padding: 24px; box-shadow: 0 24px 40px hsl(225 35% 2%/.25); } .cm-public-design .cm-story-visual figcaption { padding-top: 20px; color: var(--cm-secondary); font-size: 11px; } .cm-public-design .cm-story-reverse { grid-template-columns: minmax(0,1.18fr) minmax(0,.82fr); } .cm-public-design .cm-story-reverse .cm-story-copy { order: 2; } .cm-public-design .cm-story-reverse .cm-story-visual { order: 1; } .cm-public-design .cm-message-rail { display: flex; align-items: center; justify-content: center; gap: 20px; padding-top: 24px; color: var(--cm-link); } .cm-public-design .cm-message-rail > span { width: 100px; height: 1px; background: hsl(var(--primary)/.25); position: relative; } .cm-public-design .cm-message-rail > span::after { content: ''; position: absolute; width: 24px; height: 1px; background: hsl(var(--primary)); } /* Connections use the real providers already supported by CrewMaster. */ .cm-public-design .cm-network-section { position: relative; background: var(--cm-page); border-block: 1px solid hsl(var(--border)/.6); } .cm-public-design .cm-network-layout { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); gap: 64px; align-items: center; } .cm-public-design .cm-network-layout .cm-section-heading { margin-bottom: 0; } .cm-public-design .cm-network-map { display: grid; grid-template-columns: 112px 1fr 124px 1fr 132px; align-items: center; min-height: 340px; } .cm-public-design .cm-network-inputs { display: grid; gap: 20px; } .cm-public-design .cm-network-node { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--cm-secondary); min-height: 48px; } .cm-public-design .cm-network-node i { font-size: 24px; color: var(--cm-ink); width: 28px; } .cm-public-design .cm-network-links { height: 264px; display: flex; flex-direction: column; justify-content: space-between; position: relative; } .cm-public-design .cm-network-links > span { display: block; position: relative; height: 1px; width: 100%; background: hsl(var(--primary)/.22); } .cm-public-design .cm-network-links > span:first-child { transform: rotate(38deg); transform-origin: left; } .cm-public-design .cm-network-links > span:nth-child(2) { transform: rotate(14deg); transform-origin: left; } .cm-public-design .cm-network-links > span:nth-child(3) { transform: rotate(-14deg); transform-origin: left; } .cm-public-design .cm-network-links > span:last-child { transform: rotate(-38deg); transform-origin: left; } .cm-public-design .cm-network-links > span::after,.cm-public-design .cm-network-output-line > span::after { content: ''; position: absolute; top: -1px; left: 0; width: 24px; height: 3px; border-radius: 3px; background: hsl(var(--primary)); opacity: 0; } .cm-public-design .cm-network-core { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 8px; border: 1px solid hsl(var(--primary)/.3); border-radius: 16px; background: hsl(225 20% 12%); box-shadow: 0 20px 48px hsl(225 40% 2%/.3); } .cm-public-design .cm-network-core strong { font-size: 13px; font-weight: 600; } .cm-public-design .cm-network-output-line { position: relative; height: 1px; background: hsl(var(--primary)/.3); } .cm-public-design .cm-network-output-line > span { position: absolute; inset: 0; } .cm-public-design .cm-network-outputs { display: grid; gap: 20px; padding-left: 16px; } .cm-public-design .cm-network-outputs span { display: block; padding-block: 12px; font-size: 12px; border-bottom: 1px solid var(--cm-line); } .cm-public-design .cm-capability-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 40px; } .cm-public-design .cm-capability-grid article { padding-block: 32px; border-top: 1px solid var(--cm-line); } .cm-public-design .cm-capability-grid i { font-size: 18px; color: var(--cm-link); margin-bottom: 16px; } .cm-public-design .cm-capability-grid h3 { font-size: 18px; font-weight: 600; margin-bottom: 12px; } .cm-public-design .cm-capability-grid p { font-size: 14px; color: var(--cm-secondary); } /* Public product catalog and detail surfaces share the same visual world. */ .cm-public-design .cm-page-hero { position: relative; padding-top: 156px; padding-bottom: 64px; text-align: left; background: radial-gradient(ellipse at 85% 30%,hsl(var(--primary)/.09),transparent 60%); } .cm-public-design .cm-page-hero p { margin-inline: 0; margin-bottom: 0; max-width: 62ch; color: var(--cm-secondary); } .cm-public-design .cm-page-hero .grid-pattern { display: none; } .cm-public-design .cm-feature-catalog { background: transparent; } .cm-public-design .cm-feature-catalog > div > .grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 24px; } .cm-public-design .cm-feature-link { grid-column: span 2; } .cm-public-design .cm-feature-link:nth-child(-n+2) { grid-column: span 3; } .cm-public-design .cm-feature-link:last-child { grid-column: span 4; } .cm-public-design .cm-feature-link > div { background: hsl(var(--card)); border-color: var(--cm-line); border-radius: var(--cm-panel-radius); backdrop-filter: none; box-shadow: none; transform: none; overflow: hidden; } .cm-public-design .cm-feature-link > div > div { padding: 28px; } .cm-public-design .cm-feature-link h3 { font-size: 23px; } .cm-public-design .cm-feature-link h3 > span { opacity: 1; transform: none; } .cm-public-design .cm-feature-link h3 svg path { fill: currentColor; } .cm-public-design .cm-feature-link p { font-size: 15px; color: var(--cm-secondary); } .cm-public-design .cm-feature-link .w-14 { background: transparent; width: 32px; height: 32px; transform: none; } .cm-public-design .cm-catalog-preview { height: 216px; overflow: hidden; pointer-events: none; padding: 24px 24px 0; background: radial-gradient(ellipse at 50% 100%,hsl(var(--primary)/.1),transparent 80%); border-bottom: 1px solid var(--cm-line); } .cm-public-design .cm-catalog-preview .cm-demo-ui { transform: translateY(8px); } .cm-public-design .cm-detail-hero { position: relative; padding-top: 148px; padding-bottom: 64px; background: radial-gradient(ellipse at 90% 20%,hsl(var(--primary)/.08),transparent 60%); } .cm-public-design .cm-detail-hero > .absolute { display: none; } .cm-public-design .cm-detail-hero .w-16 { width: 48px; height: 48px; background: hsl(var(--primary)/.08); border-radius: 12px; } .cm-public-design .cm-detail-stories > div { padding-block: 40px; border-bottom: 1px solid hsl(var(--border)/.6); } .cm-public-design .cm-detail-stories > div > .max-w-md { padding: 28px; background: radial-gradient(ellipse at top right,hsl(var(--primary)/.05),hsl(var(--card))); border-radius: 20px; box-shadow: 0 24px 48px hsl(225 35% 2%/.25); } .cm-public-design .cm-detail-stories > div > .max-w-md > div { box-shadow: none; } .cm-public-design .cm-detail-stories .text-lg { line-height: 1.75; } /* Pricing remains driven by the existing billing logic. */ .cm-public-design .cm-plans-intro { padding-top: var(--cm-space); border-top: 1px solid var(--cm-line); background: hsl(var(--card)/.4); } .cm-public-design .cm-plans-intro .cm-section-heading { margin-bottom: 0; padding-bottom: 32px; } .cm-public-design .cm-pricing { padding: 32px 0 64px; background: hsl(var(--card)/.4); } .cm-public-design .cm-pricing > div:first-child { align-items: center; } .cm-public-design #togglePricing { min-height: 28px; min-width: 48px; } .cm-public-design #togglePricing::before { content: ''; position: absolute; inset: -8px; } .cm-public-design .cm-pricing .grid[class*="lg:grid-cols-4"] { gap: 16px; } .cm-public-design .cm-plan-card { border-radius: var(--cm-panel-radius); border-color: var(--cm-line); background: hsl(var(--card)); backdrop-filter: none; box-shadow: none; } .cm-public-design .cm-plan-card > .text-center { text-align: left; padding: 28px 24px 12px; } .cm-public-design .cm-plan-card h3 { font-size: 22px; } .cm-public-design .cm-plan-card .flex.items-baseline { justify-content: flex-start; margin-bottom: 24px; } .cm-public-design .cm-plan-card .monthly-price,.cm-public-design .cm-plan-card .yearly-price { font-size: 40px; } .cm-public-design .cm-plan-card a { min-height: 44px; border-radius: var(--cm-radius); } .cm-public-design .cm-plan-popular { border-color: hsl(var(--primary)/.6); background: linear-gradient(160deg,hsl(209 48% 16%),hsl(var(--card)) 60%); } .cm-public-design .cm-plan-popular > .absolute { position: static; transform: none; padding: 12px 24px 0; } .cm-public-design .cm-plan-popular > .absolute > div { background: transparent; color: var(--cm-link); font-size: 11px; padding: 0; border-radius: 0; } .cm-public-design .cm-plan-popular > .text-center { padding-top: 12px; } .cm-public-design .cm-pricing-more { text-align: center; padding-block: 24px 48px; } .cm-public-design #comparison { background: transparent; } .cm-public-design #comparison table { min-width: 680px; background: var(--cm-surface); font-variant-numeric: tabular-nums; } .cm-public-design #comparison th:first-child { min-width: 240px; } .cm-public-design .cm-faq-list { display: grid; gap: 0; } .cm-public-design .cm-faq-item { border-bottom: 1px solid var(--cm-line); padding-block: 0; } .cm-public-design .cm-faq-item summary { list-style: none; cursor: pointer; min-height: 72px; display: flex; gap: 24px; align-items: center; justify-content: space-between; padding-block: 20px; font-size: 17px; font-weight: 500; } .cm-public-design .cm-faq-item summary::-webkit-details-marker { display: none; } .cm-public-design .cm-faq-item summary::after { content: '+'; font-size: 24px; color: var(--cm-link); font-weight: 400; } .cm-public-design .cm-faq-item[open] summary::after { content: '−'; } .cm-public-design .cm-faq-item > p { color: var(--cm-secondary); padding-bottom: 24px; max-width: 72ch; font-size: 15px; } .cm-public-design .cm-outcome-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 32px; } .cm-public-design .cm-outcome-grid article { padding-top: 24px; border-top: 1px solid var(--cm-line); } .cm-public-design .cm-outcome-grid i { color: var(--cm-link); font-size: 20px; margin-bottom: 24px; } .cm-public-design .cm-outcome-grid h3 { font-size: 22px; margin-bottom: 12px; } .cm-public-design .cm-outcome-grid p { color: var(--cm-secondary); font-size: 14px; } /* Customer proof is manually scrollable; never autoplay text the visitor is reading. */ .cm-public-design #reviews { padding-block: var(--cm-space); } .cm-public-design #reviews > div:first-child .text-center { text-align: left; } .cm-public-design #reviews > div:first-child p { margin-inline: 0; font-size: 17px; } .cm-public-design #reviews .cm-reviews-track { max-width: var(--cm-width); margin-inline: auto; overflow-x: auto; padding-bottom: 16px; scroll-snap-type: x proximity; } .cm-public-design #reviews .scroll-wrapper { animation: none; width: 100%; display: block; } .cm-public-design #reviews .scroll-content { display: flex; padding-inline: 32px; gap: 20px; } .cm-public-design #reviews .scroll-content[aria-hidden="true"] { display: none; } .cm-public-design #reviews .review-card { flex: 0 0 calc((100% - 40px)/3); width: auto; min-width: 0; background: hsl(var(--card)); border-color: var(--cm-line); box-shadow: none; scroll-snap-align: start; } .cm-public-design #reviews .text-foreground\/50 { color: var(--cm-secondary); } .cm-public-design .cm-finale,.cm-public-design .cm-join-bar { position: relative; overflow: hidden; isolation: isolate; background: var(--cm-panel); border-block: 1px solid hsl(var(--border)/.6); } .cm-public-design .cm-finale-light { position: absolute; z-index: -1; inset: -50% -15%; background: radial-gradient(ellipse at 70% 50%,hsl(var(--primary)/.18),transparent 57%); } .cm-public-design .cm-finale-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; align-items: center; } .cm-public-design .cm-finale h2 { font-size: clamp(36px,4.4vw,56px); max-width: 18ch; margin-bottom: 24px; } .cm-public-design .cm-finale p { color: var(--cm-secondary); font-size: 17px; max-width: 50ch; margin-bottom: 28px; } .cm-public-design .cm-finale-symbol { position: relative; display: grid; place-items: center; min-height: 240px; } .cm-public-design .cm-finale-symbol img { position: relative; z-index: 1; width: 144px; height: 144px; opacity: .85; } .cm-public-design .cm-finale-symbol span { position: absolute; width: 220px; height: 220px; border: 1px solid hsl(var(--primary)/.16); border-radius: 50%; } .cm-public-design .cm-finale-symbol span:last-child { width: 300px; height: 300px; border-color: hsl(var(--primary)/.08); } .cm-public-design .cm-join-bar { padding-block: 80px; background: radial-gradient(ellipse at 100% 50%,hsl(var(--primary)/.13),hsl(var(--card)) 70%); } .cm-public-design .cm-join-bar > div { text-align: left; max-width: var(--cm-width); } .cm-public-design .cm-join-bar > div > div { justify-content: flex-start; } .cm-public-design .cm-join-bar a { min-height: 48px; font-size: 14px; border-radius: var(--cm-radius); } .cm-public-design .cm-public-footer { background: hsl(var(--background)); } .cm-public-design .cm-public-footer > div { background: transparent; box-shadow: none; border-radius: 0; } .cm-public-design .cm-public-footer > div > .absolute { display: none; } .cm-public-design .cm-public-footer > div > .relative { padding-block: 56px 24px; } .cm-public-design .cm-public-footer .mb-16 { margin-bottom: 0; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--cm-line); } .cm-public-design .cm-public-footer li a { display: inline-block; padding-block: 4px; font-size: 13px; text-underline-offset: 5px; } .cm-public-design .cm-public-footer .text-neutral-400 { color: var(--cm-secondary); } /* Editorial and task surfaces breathe; they inherit type and material, not spectacle. */ .cm-public-design .cm-legal-page > .absolute { display: none; } .cm-public-design .cm-legal-hero { padding-top: 148px; padding-bottom: 56px; } .cm-public-design .cm-legal-mobile-index { display: none; } .cm-public-design .cm-legal-content > div > div > section { border: 0; border-bottom: 1px solid var(--cm-line); border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; padding-inline: 0; } .cm-public-design .cm-legal-content p { max-width: 75ch; } .cm-public-design .blog-index-hero { padding-top: 148px; background: radial-gradient(ellipse at 85% 20%,hsl(var(--primary)/.08),transparent 65%); } .cm-public-design :is(.blog-index-hero,.blog-article-hero) > .absolute { display: none; } .cm-public-design .blog-index-hero-grid { gap: 48px; } .cm-public-design .blog-search-panel { background: hsl(var(--card)); border-radius: var(--cm-panel-radius); box-shadow: 0 20px 40px hsl(225 35% 2%/.25); backdrop-filter: none; } .cm-public-design .blog-search-button { border-radius: var(--cm-radius); min-height: 44px; } .cm-public-design .blog-card { border-radius: var(--cm-panel-radius); border-color: var(--cm-line); } .cm-public-design .blog-card > [class*="bg-gradient"] { background: hsl(var(--card)); } .cm-public-design .blog-content { max-width: 75ch; } .cm-public-design #cm-prereg .cm-aura { opacity: .4; } .cm-public-design #cm-prereg .cm-panel { border-radius: var(--cm-panel-radius); background: hsl(var(--card)); backdrop-filter: none; animation: none; } .cm-public-design #cm-prereg .cm-steps [aria-current] span { box-shadow: none; } .cm-public-design #cm-prereg :is(.cm-primary,.cm-secondary) { border-radius: var(--cm-radius); } .cm-public-design #cm-prereg .cm-plan input { min-height: 0; } .cm-public-design #PopUp_login .popup-content { max-width: min(480px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; background: hsl(var(--card)); border-radius: var(--cm-panel-radius); backdrop-filter: none; } .cm-public-design #PopUp_login h2 { font-size: 24px; } .cm-public-design .cm-dialog-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--cm-radius); color: var(--cm-secondary); } .cm-public-design #cm-cookie-consent h2 { font-size: 18px; line-height: 1.3; } /* Authored motion: fast arrival, distinct one-time reveals and bounded ambient signals. */ @keyframes cm-arrive { from { opacity: .01; transform: translate3d(0,20px,0); } to { opacity: 1; transform: translate3d(0,0,0); } } @keyframes cm-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes cm-signal { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: .85; } 85% { opacity: .85; } 100% { transform: translateX(var(--cm-track-length,80px)); opacity: 0; } } .cm-public-design .cm-entry-active { animation: cm-arrive 650ms var(--cm-ease) both; animation-delay: var(--cm-delay,0ms); } .cm-public-design .cm-reveal-pending { opacity: .01; transform: translateY(24px); } .cm-public-design [data-cm-reveal="left"].cm-reveal-pending { transform: translateX(-24px); } .cm-public-design [data-cm-reveal="right"].cm-reveal-pending { transform: translateX(24px); } .cm-public-design .cm-reveal-active { animation: cm-arrive 600ms var(--cm-ease) both; animation-delay: var(--cm-delay,0ms); } .cm-public-design .cm-ambient-active .cm-floating-message { animation: cm-float 8s var(--cm-ease-in-out) infinite; } .cm-public-design .cm-ambient-active .cm-floating-platforms { animation: cm-float 10s var(--cm-ease-in-out) infinite reverse; } .cm-public-design .cm-ambient-active .cm-network-links > span::after,.cm-public-design .cm-ambient-active .cm-network-output-line > span::after { animation: cm-signal 3.2s linear infinite; } .cm-public-design .cm-network-links > span:nth-child(2)::after { animation-delay: .5s; } .cm-public-design .cm-network-links > span:nth-child(3)::after { animation-delay: 1s; } .cm-public-design .cm-network-links > span:nth-child(4)::after { animation-delay: 1.5s; } .cm-public-design.cm-motion-paused *,.cm-public-design.cm-motion-paused *::after { animation-play-state: paused !important; } .cm-public-design.cm-motion-paused .cm-reveal-pending { opacity: 1; transform: none; } @media (hover:hover) and (pointer:fine) { .cm-public-design .cm-button-primary:hover::after { transform: translateX(130%); } .cm-public-design .cm-button:hover { transform: translateY(-2px); } .cm-public-design .cm-button-secondary:hover { border-color: hsl(var(--primary)/.5); background: hsl(var(--primary)/.06); } .cm-public-design :is(.cm-button,.cm-text-link,.cm-product-paths a):hover > i:last-child { transform: translateX(3px); } .cm-public-design .cm-product-paths a:hover { background: hsl(var(--card)); } .cm-public-design .cm-feature-link:hover > div { border-color: hsl(var(--primary)/.5); transform: translateY(-3px); } .cm-public-design .cm-feature-link > div { transition: transform 200ms var(--cm-ease),border-color 160ms ease; } .cm-public-design .cm-text-link:hover,.cm-public-design .cm-public-footer li a:hover { text-decoration: underline; } .cm-public-design .cm-dialog-close:hover { background: hsl(var(--muted)); } } @media (max-width:1100px) { .cm-public-design .cm-launch-grid { gap: 32px; } .cm-public-design .cm-showcase-content { padding: 16px; } .cm-public-design .cm-showcase-side { display: none; } .cm-public-design .cm-showcase-body { grid-template-columns: 1fr; } .cm-public-design .cm-floating-message { left: -8px; } .cm-public-design .cm-launch-copy h1 { font-size: 48px; } .cm-public-design .cm-live-proof { gap: 32px; } .cm-public-design .cm-live-proof > div { flex-direction: column; gap: 4px; } .cm-public-design .cm-story-row { gap: 48px; } .cm-public-design .cm-network-layout { grid-template-columns: 1fr; gap: 24px; } .cm-public-design .cm-network-layout .cm-section-heading { max-width: 650px; } .cm-public-design .cm-network-map { max-width: 740px; width: 100%; margin: auto; } .cm-public-design .cm-pricing .grid[class*="lg:grid-cols-4"] { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; } } @media (max-width:1023px) { .cm-public-design .cm-legal-mobile-index { display: block; margin-bottom: 32px; } .cm-public-design .cm-legal-mobile-index summary { cursor: pointer; padding-block: 16px; border-block: 1px solid var(--cm-line); font-weight: 600; } .cm-public-design .cm-legal-mobile-index nav { display: grid; gap: 4px; padding-block: 16px; } .cm-public-design .cm-legal-mobile-index a { padding-block: 8px; font-size: 14px; } .cm-public-design #reviews .review-card { flex-basis: calc((100% - 20px)/2); } } @media (max-width:767px) { .cm-public-design { --cm-space: 64px; } .cm-public-design .cm-container { width: calc(100% - 32px); } .cm-public-design h1 { font-size: 36px; } .cm-public-design h2 { font-size: 30px; } .cm-public-design .cm-public-nav { top: 8px; width: calc(100% - 24px); } .cm-public-design .cm-public-nav > div { padding-inline: 12px; } .cm-public-design .cm-public-nav > div > div { height: 60px; gap: 8px; } .cm-public-design .cm-navbar-brand-label { font-size: 16px; } .cm-public-design .cm-launch-hero { padding-top: 112px; padding-bottom: 24px; } .cm-public-design .cm-launch-grid { grid-template-columns: 1fr; gap: 32px; } .cm-public-design .cm-launch-copy h1 { font-size: clamp(36px,9vw,48px); max-width: 19ch; } .cm-public-design .cm-launch-copy > p { font-size: 16px; margin-bottom: 24px; } .cm-public-design .cm-actions { display: grid; grid-template-columns: 1fr; } .cm-public-design .cm-button { width: 100%; } .cm-public-design .cm-hero-platform-line { margin-top: 20px; } .cm-public-design .cm-hero-platform-line .t8-hero-platform { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid hsl(var(--border)/.7); border-radius: 999px; background: rgba(9, 16, 24, 0.34); backdrop-filter: blur(6px); } .cm-public-design .cm-azure-home .cm-hero-platform-line .fa-telegram { color: #5aa9ff; } .cm-public-design .cm-azure-home .cm-hero-platform-line .fa-youtube { color: #ff4d67; } .cm-public-design .cm-azure-home .cm-hero-platform-line .fa-twitch { color: #9a67ff; } .cm-public-design .cm-azure-home .cm-hero-platform-line .fa-discord { color: #8aa6ff; } .cm-public-design .cm-azure-home .cm-hero-platform-line .fa-instagram { color: #ff8ab4; } .cm-public-design .cm-azure-home .cm-hero-platform-line .fa-tiktok { color: #e7ecff; } .cm-public-design .cm-hero-platform-line .t8-hero-platform-icon svg { width: 1em; height: 1em; } .cm-public-design .cm-showcase { padding-top: 20px; padding-bottom: 48px; } .cm-public-design .cm-showcase-shell { transform: none; border-radius: 12px; } .cm-public-design .cm-floating-platforms { right: 12px; font-size: 13px; padding: 10px 16px; } .cm-public-design .cm-floating-message { bottom: 12px; left: 8px; right: 8px; padding: 12px 16px; gap: 12px; } .cm-public-design .cm-floating-message > i { margin-left: auto; } .cm-public-design .cm-showcase-orbit { display: none; } .cm-public-design .cm-window-bar { padding: 12px; } .cm-public-design .cm-showcase-content { padding: 16px 12px; } .cm-public-design .cm-preview-switch { gap: 0; } .cm-public-design .cm-preview-switch button { font-size: 11px; padding: 8px; flex: 1; } .cm-public-design .cm-demo-ui .text-xs { font-size: 12px; } .cm-public-design .cm-demo-ui [class*="text-[9px]"] { font-size: 10px; } .cm-public-design .cm-live-proof { margin-top: 24px; gap: 12px; padding-top: 24px; } .cm-public-design .cm-live-proof > div { flex: 1; min-width: 0; } .cm-public-design .cm-live-proof strong { font-size: 18px; overflow-wrap: anywhere; } .cm-public-design .cm-live-proof span { font-size: 11px; line-height: 1.5; } .cm-public-design .cm-motion-control { min-width: 40px; } .cm-public-design .cm-product-paths > div { grid-template-columns: 1fr; } .cm-public-design .cm-product-paths a { padding: 16px 0; min-height: 56px; border-right: 0; border-bottom: 1px solid hsl(var(--border)/.6); } .cm-public-design .cm-product-paths a:last-child { border-bottom: 0; } .cm-public-design .cm-section-heading { margin-bottom: 32px; } .cm-public-design .cm-story-row,.cm-public-design .cm-story-reverse { grid-template-columns: 1fr; gap: 28px; padding-block: 32px; } .cm-public-design .cm-story-reverse .cm-story-copy { order: 0; } .cm-public-design .cm-story-reverse .cm-story-visual { order: 0; } .cm-public-design .cm-story-copy h3 { font-size: 30px; } .cm-public-design .cm-story-copy p { font-size: 16px; } .cm-public-design .cm-story-visual { padding: 20px; border-radius: 16px; } .cm-public-design .cm-demo-frame { padding: 16px; } .cm-public-design .cm-network-map { grid-template-columns: 76px 1fr 84px 1fr 90px; min-height: 280px; } .cm-public-design .cm-network-inputs { gap: 12px; } .cm-public-design .cm-network-node { gap: 6px; font-size: 10px; } .cm-public-design .cm-network-node i { font-size: 18px; width: 20px; } .cm-public-design .cm-network-links { height: 220px; } .cm-public-design .cm-network-links > span:first-child { transform: rotate(72deg); } .cm-public-design .cm-network-links > span:last-child { transform: rotate(-72deg); } .cm-public-design .cm-network-core { padding: 16px 4px; border-radius: 12px; gap: 8px; } .cm-public-design .cm-network-core img { width: 40px; height: 40px; } .cm-public-design .cm-network-core strong { font-size: 10px; } .cm-public-design .cm-network-outputs { padding-left: 8px; gap: 12px; } .cm-public-design .cm-network-outputs span { font-size: 10px; } .cm-public-design .cm-capability-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; } .cm-public-design .cm-capability-grid h3 { font-size: 17px; } .cm-public-design .cm-capability-grid p { font-size: 13px; } .cm-public-design .cm-page-hero,.cm-public-design .cm-detail-hero { padding-top: 112px; padding-bottom: 40px; } .cm-public-design .cm-feature-catalog > div > .grid { grid-template-columns: 1fr; gap: 20px; } .cm-public-design .cm-feature-link,.cm-public-design .cm-feature-link:nth-child(-n+2),.cm-public-design .cm-feature-link:last-child { grid-column: auto; } .cm-public-design .cm-detail-stories > div > .max-w-md { padding: 20px; } .cm-public-design .cm-pricing .grid[class*="lg:grid-cols-4"] { grid-template-columns: 1fr; gap: 24px; } .cm-public-design .cm-outcome-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; } .cm-public-design .cm-outcome-grid h3 { font-size: 20px; } .cm-public-design #reviews .scroll-content { padding-inline: 16px; } .cm-public-design #reviews .review-card { flex-basis: 88%; } .cm-public-design .cm-finale-layout { grid-template-columns: 1fr; gap: 32px; } .cm-public-design .cm-finale h2 { font-size: 36px; } .cm-public-design .cm-finale-symbol { min-height: 180px; } .cm-public-design .cm-finale-symbol img { width: 96px; height: 96px; } .cm-public-design .cm-finale-symbol span { width: 160px; height: 160px; } .cm-public-design .cm-finale-symbol span:last-child { width: 220px; height: 220px; } .cm-public-design .cm-public-footer .grid[class*="sm:grid-cols-3"] { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; } .cm-public-design .cm-public-footer .grid[class*="sm:grid-cols-3"] > div:first-child { grid-column: 1/-1; } .cm-public-design .cm-legal-hero,.cm-public-design .blog-index-hero { padding-top: 112px; } .cm-public-design #PopUp_login .popup-content > div { padding: 56px 24px 24px; } .cm-public-design .cm-ambient-active .cm-floating-message,.cm-public-design .cm-ambient-active .cm-floating-platforms { animation: none; } } @media (prefers-reduced-motion:reduce) { .cm-public-design *,.cm-public-design *::before,.cm-public-design *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .cm-public-design .cm-reveal-pending { opacity: 1; transform: none; } .cm-public-design .cm-showcase-shell { transform: none; } .cm-public-design .cm-network-links > span::after,.cm-public-design .cm-network-output-line > span::after { opacity: 0; } } @media (prefers-reduced-transparency:reduce) { .cm-public-design .cm-public-nav { background: hsl(var(--card)); backdrop-filter: none; } } .cm-public-design.cm-document-hidden *,.cm-public-design.cm-document-hidden *::after { animation-play-state: paused !important; } /* Keep consent UI compact and offscreen reveals inside phone bounds. */ .cm-public-design #cm-cookie-banner-title { font-size: 18px; line-height: 1.4; letter-spacing: -.01em; } .cm-public-design #cm-cookie-settings-title { font-size: 24px; } @keyframes cm-reveal-left { from { opacity: .01; transform: translate3d(-24px,0,0); } to { opacity: 1; transform: translate3d(0,0,0); } } @keyframes cm-reveal-right { from { opacity: .01; transform: translate3d(24px,0,0); } to { opacity: 1; transform: translate3d(0,0,0); } } @media (min-width: 768px) and (prefers-reduced-motion: no-preference) { .cm-public-design [data-cm-reveal="left"].cm-reveal-active { animation-name: cm-reveal-left; } .cm-public-design [data-cm-reveal="right"].cm-reveal-active { animation-name: cm-reveal-right; } } @media (max-width: 767px) and (prefers-reduced-motion: no-preference) { .cm-public-design [data-cm-reveal].cm-reveal-pending { transform: translateY(24px); } } /* One material language, taken from the navbar. Provider colors identify platforms only. */ .cm-public-design .cm-launch-hero { background: var(--cm-page); } .cm-public-design .cm-hero-ambient > div:first-child { right: -4%; width: 86%; height: 110%; background: radial-gradient(ellipse at 65% 35%,#214b7233,transparent 62%); } .cm-public-design .cm-hero-ambient > div:last-child { display: none; } .cm-public-design .cm-headline-accent { color: var(--cm-link); } .cm-public-design .cm-showcase-shell { background: var(--cm-panel); border-color: var(--cm-line); box-shadow: 0 32px 64px #03070d66; } .cm-public-design .cm-window-bar { background: var(--cm-panel-raised); } .cm-public-design .cm-showcase-light { background: radial-gradient(ellipse,#214b7233,transparent 67%); } .cm-public-design .cm-floating-platforms,.cm-public-design .cm-floating-message { background: var(--cm-panel-raised); border-color: var(--cm-line); } .cm-public-design .fa-twitch { color: #b89cff; } .cm-public-design .fa-youtube { color: #ff7c85; } .cm-public-design .fa-discord { color: #8c9bff; } .cm-public-design .fa-telegram { color: #69cfff; } .cm-public-design .cm-preview-switch button[aria-selected=true] { color: var(--cm-link); border-color: var(--cm-link); } .cm-public-design .cm-preview-note { color: var(--cm-secondary); } .cm-public-design :is(.cm-story-section,.cm-network-section,.cm-capabilities,.cm-finale,.cm-join-bar) { background: var(--cm-page); color: var(--cm-ink); } .cm-public-design :is(.cm-story-visual,.cm-demo-frame) { background: var(--cm-panel); color: var(--cm-ink); border-radius: var(--cm-panel-radius); } .cm-public-design .cm-story-visual { border: 1px solid var(--cm-line); padding: 28px; } .cm-public-design .cm-story-visual::before { background: none; } .cm-public-design .cm-story-visual figcaption { color: var(--cm-secondary); } .cm-public-design :is(.cm-story-icon,.cm-capability-grid i,.cm-outcome-grid i) { color: var(--cm-link); } .cm-public-design .cm-demo-studio .grid > div { background: var(--cm-panel-raised); border-color: var(--cm-line); } .cm-public-design .cm-demo-studio .space-y-1\.5 > div { padding: 12px; background: var(--cm-panel-raised); } .cm-public-design .cm-finale-light { background: radial-gradient(ellipse at 75% 60%,#214b723d,transparent 60%); } .cm-public-design .cm-finale p { color: var(--cm-secondary); } .cm-public-design .cm-finale-symbol span { border-color: #a4c9e833; } /* A readable, bounded chat story. The static transcript is the default. */ .cm-public-design .cm-chat-demo { overflow: hidden; border-radius: 12px; background: var(--cm-panel); color: #eef5ff; } .cm-public-design .cm-demo-ui .cm-chat-header,.cm-public-design .cm-chat-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--cm-panel-raised); border-radius: 0; } .cm-public-design .cm-chat-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #2584b1; font-size: 21px; } .cm-public-design .cm-chat-avatar i { color: white; } .cm-public-design .cm-chat-header strong { display: block; font-size: 14px; } .cm-public-design .cm-chat-header span:not(.cm-chat-avatar) { display: block; font-size: 11px; color: #c0d7ed; } .cm-public-design .cm-chat-header > i { margin-left: auto; } .cm-public-design .cm-demo-ui .cm-chat-transcript,.cm-public-design .cm-chat-transcript { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--cm-panel); border-radius: 0; min-height: 344px; } .cm-public-design .cm-chat-command { align-self: flex-end; display: flex; gap: 16px; align-items: center; padding: 10px 14px; border-radius: 12px 12px 3px 12px; background: #336594; font-size: 13px; } .cm-public-design .cm-chat-command i { color: #a4dcff; font-size: 11px; } .cm-public-design .cm-chat-answer { max-width: 90%; font-size: 12px; line-height: 1.6; } .cm-public-design .cm-chat-answer > div:first-child { padding: 12px 14px; background: var(--cm-panel-raised); border-radius: 3px 12px 12px 12px; } .cm-public-design .cm-chat-options { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 5px; } .cm-public-design .cm-chat-options span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 5px; border-radius: 6px; background: #24364b; font-size: 10px; } .cm-public-design .cm-chat-success { display: flex; align-items: center; gap: 10px; max-width: 90%; background: #235647; color: #dbfff0; padding: 12px; border-radius: 12px; font-size: 12px; } .cm-public-design .cm-chat-success > i { color: #8af2bf; font-size: 20px; } .cm-public-design .cm-chat-success small { display: block; color: #b6e9d3; font-size: 10px; } .cm-public-design .cm-chat-typing { position: absolute; top: 72px; left: 16px; display: flex; gap: 5px; padding: 14px; background: var(--cm-panel-raised); border-radius: 12px; opacity: 0; } .cm-public-design .cm-chat-typing span { width: 5px; height: 5px; border-radius: 50%; background: #b5d2ef; } @keyframes cm-chat-send { 0% { opacity: .15; transform: translateY(10px); } 5%,94% { opacity: 1; transform: none; } 100% { opacity: .15; transform: translateY(10px); } } @keyframes cm-chat-reply { 0%,18% { opacity: 0; transform: translateY(12px); } 24%,94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(12px); } } @keyframes cm-chat-access { 0%,46% { opacity: 0; transform: translateY(12px) scale(.97); } 52%,94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(12px); } } @keyframes cm-chat-typing { 0%,17% { opacity: 1; } 20%,100% { opacity: 0; } } @keyframes cm-typing-dot { 0%,60%,100% { transform: none; } 30% { transform: translateY(-4px); } } @keyframes cm-feed-arrival { 0%,8% { opacity: .25; transform: translateY(8px); } 16%,94% { opacity: 1; transform: none; } 100% { opacity: .25; transform: translateY(8px); } } @media (prefers-reduced-motion:no-preference) { .cm-public-design .cm-chat-demo.cm-ambient-active .cm-chat-command { animation: cm-chat-send 10s var(--cm-ease) infinite; } .cm-public-design .cm-chat-demo.cm-ambient-active .cm-chat-answer { animation: cm-chat-reply 10s var(--cm-ease) infinite; } .cm-public-design .cm-chat-demo.cm-ambient-active .cm-chat-success { animation: cm-chat-access 10s var(--cm-ease) infinite; } .cm-public-design .cm-chat-demo.cm-ambient-active .cm-chat-typing { animation: cm-chat-typing 10s linear infinite; } .cm-public-design .cm-chat-demo.cm-ambient-active .cm-chat-typing span { animation: cm-typing-dot 900ms ease-in-out infinite; } .cm-public-design .cm-chat-demo.cm-ambient-active .cm-chat-typing span:nth-child(2) { animation-delay: 150ms; } .cm-public-design .cm-chat-demo.cm-ambient-active .cm-chat-typing span:nth-child(3) { animation-delay: 300ms; } .cm-public-design .cm-demo-studio.cm-ambient-active .space-y-1\.5 > div { animation: cm-feed-arrival 9s var(--cm-ease) infinite; } .cm-public-design .cm-demo-studio.cm-ambient-active .space-y-1\.5 > div:nth-child(2) { animation-delay: 1.2s; } .cm-public-design .cm-demo-studio.cm-ambient-active .space-y-1\.5 > div:nth-child(3) { animation-delay: 2.4s; } } /* Connected platforms: one accurate curved network, no guessed angled divs. */ .cm-public-design .cm-network-section { background: var(--cm-page); color: var(--cm-ink); border-block: 1px solid var(--cm-line); } .cm-public-design .cm-network-section .cm-text-link { color: var(--cm-link); } .cm-public-design .cm-network-orchestra { position: relative; display: block; width: 100%; aspect-ratio: 680/360; min-height: 0; } .cm-public-design .cm-network-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .cm-public-design .cm-wire { stroke-width: 2; stroke: #9c82cb; } .cm-public-design .cm-packet { stroke-width: 5; stroke-linecap: round; stroke-dasharray: 3 97; stroke-dashoffset: 0; opacity: 0; } .cm-public-design .cm-wire-0 { stroke: #9146d9; } .cm-public-design .cm-wire-1 { stroke: #df4861; } .cm-public-design .cm-wire-2 { stroke: #6574db; } .cm-public-design .cm-wire-3 { stroke: #298cbc; } .cm-public-design .cm-wire-out,.cm-public-design .cm-packet-out { stroke: #80b2d9; } .cm-public-design .cm-wire { opacity: .4; } .cm-public-design .cm-network-orchestra .cm-network-inputs { position: absolute; inset: 0 auto 0 0; width: 24%; display: flex; flex-direction: column; justify-content: space-between; gap: 0; } .cm-public-design .cm-network-orchestra .cm-network-node { flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; min-height: 0; height: 25%; font-size: 11px; font-weight: 600; color: var(--cm-secondary); } .cm-public-design .cm-network-orchestra .cm-network-node i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--cm-panel-raised); font-size: 22px; box-shadow: 0 4px 12px #55407812; } .cm-public-design .cm-platform-twitch i { color: #b89cff; } .cm-public-design .cm-platform-youtube i { color: #ff7c85; } .cm-public-design .cm-platform-discord i { color: #8c9bff; } .cm-public-design .cm-platform-telegram i { color: #69cfff; } .cm-public-design .cm-network-orchestra .cm-network-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 104px; height: 104px; justify-content: center; padding: 12px; background: var(--cm-brand); color: white; border: none; border-radius: 24px; box-shadow: 0 16px 32px #38205030; } .cm-public-design .cm-network-core img { width: 44px; height: 44px; } .cm-public-design .cm-core-ripple { position: absolute; inset: -12px; border: 1px solid var(--cm-link); border-radius: 32px; opacity: 0; } .cm-public-design .cm-network-orchestra .cm-network-outputs { position: absolute; top: 0; right: 0; height: 100%; width: 27%; display: flex; flex-direction: column; justify-content: space-around; gap: 0; padding: 0; } .cm-public-design .cm-network-orchestra .cm-network-outputs span { display: flex; align-items: center; gap: 8px; border: none; padding: 12px; background: #ffffffd9; border-radius: 10px; color: var(--cm-secondary); font-size: 11px; box-shadow: 0 4px 12px #5540780d; } .cm-public-design .cm-network-outputs i { color: var(--cm-link); } @keyframes cm-packet-travel { 0% { stroke-dashoffset: 3; opacity: 0; } 6%,82% { opacity: 1; } 92%,100% { stroke-dashoffset: -97; opacity: 0; } } @keyframes cm-core-receive { 0%,55% { opacity: 0; transform: scale(.95); } 65% { opacity: .85; } 100% { opacity: 0; transform: scale(1.2); } } @media (prefers-reduced-motion:no-preference) { .cm-public-design .cm-network-section.cm-ambient-active .cm-packet { animation: cm-packet-travel 5s linear infinite; } .cm-public-design .cm-network-section .cm-wire-1.cm-packet { animation-delay: .65s; } .cm-public-design .cm-network-section .cm-wire-2.cm-packet { animation-delay: 1.3s; } .cm-public-design .cm-network-section .cm-wire-3.cm-packet { animation-delay: 1.95s; } .cm-public-design .cm-network-section.cm-ambient-active .cm-core-ripple { animation: cm-core-receive 5s var(--cm-ease) infinite; } } @media (max-width:767px) { .cm-public-design .cm-chat-transcript { padding: 12px; min-height: 370px; } .cm-public-design .cm-chat-answer,.cm-public-design .cm-chat-success { max-width: 100%; } .cm-public-design .cm-network-orchestra { aspect-ratio: 680/400; } .cm-public-design .cm-network-orchestra .cm-network-core { width: 76px; height: 76px; border-radius: 16px; gap: 4px; } .cm-public-design .cm-network-core img { width: 32px; height: 32px; } .cm-public-design .cm-network-orchestra .cm-network-node i { width: 32px; height: 32px; font-size: 18px; border-radius: 8px; } .cm-public-design .cm-network-orchestra .cm-network-outputs { width: 28%; } .cm-public-design .cm-network-orchestra .cm-network-outputs span { padding: 8px 6px; font-size: 9px; gap: 4px; } .cm-public-design .cm-network-orchestra .cm-network-core strong { font-size: 10px; } .cm-public-design .cm-core-ripple { inset: -8px; border-radius: 22px; } } /* Brand contrast: the exact brand fills actions; its light tint carries dark-surface text. */ .cm-public-design .text-primary { color: var(--cm-link); } .cm-public-design :is(.cm-story-section,.cm-network-section) .text-primary { color: var(--cm-link); } .cm-public-design .cm-navbar-brand-label { color: var(--cm-link); } .cm-public-design .cm-motion-control { position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 44px; height: 44px; border: 1px solid #a4c9e866; background: var(--cm-brand); color: white; box-shadow: 0 6px 20px #09162240; } .cm-public-design .cm-motion-control[hidden] { display: none; } .cm-public-design .cm-preview-switch { position: relative; } .cm-public-design .cm-preview-switch.cm-tabs-enhanced button { border-color: transparent; } .cm-public-design .cm-tab-indicator { position: absolute; left: 0; bottom: 16px; height: 2px; width: 1px; background: var(--cm-link); pointer-events: none; transform-origin: left; } @keyframes cm-light-drift { 0%,100% { transform: translate3d(-2%,0,0) scale(1); } 50% { transform: translate3d(3%,3%,0) scale(1.04); } } @keyframes cm-demo-step { from { opacity: .65; transform: translate3d(0,12px,0) scale(.97); } to { opacity: 1; transform: none; } } @keyframes cm-node-send { 0%,8%,24%,100% { transform: none; } 14% { transform: translateY(-3px) scale(1.06); } } @keyframes cm-output-receive { 0%,57%,77%,100% { transform: none; } 65% { transform: translateX(3px); } } @media (prefers-reduced-motion:no-preference) { .cm-public-design .cm-launch-hero.cm-ambient-active .cm-hero-ambient > div:first-child { animation: cm-light-drift 18s var(--cm-ease-in-out) infinite; } .cm-public-design .cm-finale.cm-ambient-active .cm-finale-light { animation: cm-light-drift 14s var(--cm-ease-in-out) infinite reverse; } .cm-public-design .cm-demo-arriving :is(.cm-module-step,.cm-vault-file) { animation: cm-demo-step 650ms var(--cm-ease) both; animation-delay: var(--cm-delay,0ms); } .cm-public-design .cm-network-section.cm-ambient-active .cm-network-node i { animation: cm-node-send 5s var(--cm-ease) infinite; } .cm-public-design .cm-network-node:nth-child(2) i { animation-delay: .65s; } .cm-public-design .cm-network-node:nth-child(3) i { animation-delay: 1.3s; } .cm-public-design .cm-network-node:nth-child(4) i { animation-delay: 1.95s; } .cm-public-design .cm-network-section.cm-ambient-active .cm-network-outputs span { animation: cm-output-receive 5s var(--cm-ease) infinite; } .cm-public-design .cm-network-outputs span:nth-child(2) { animation-delay: .6s; } .cm-public-design .cm-network-outputs span:nth-child(3) { animation-delay: 1.2s; } } @media (max-width:767px) { .cm-public-design .cm-motion-control { right: 16px; bottom: 16px; } .cm-public-design .cm-launch-hero.cm-ambient-active .cm-hero-ambient > div:first-child { animation: none; } } .cm-public-design :is(.cm-text-link,.cm-button) > i.fa-arrow-right { transition: transform var(--cm-fast) var(--cm-ease); } @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) { .cm-public-design :is(.cm-text-link,.cm-button):hover > i.fa-arrow-right { transform: translateX(3px); } } .cm-public-design :is(.cm-story-section,.cm-network-section) :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline-color: var(--cm-focus); } /* Shared modern public shell: all marketing surfaces inherit the navbar material. */ .cm-public-design .grid-pattern { display: none; } .cm-public-design :is(.cm-page-hero,.cm-detail-hero,.blog-index-hero,.cm-join-bar) { background: radial-gradient(ellipse at 80% 0,#214b722b,transparent 65%),var(--cm-page); } .cm-public-design :is(.cm-pricing,.cm-plans-intro) { background: var(--cm-page); } .cm-public-design :is(.cm-plan-card,.cm-feature-link > div,.review-card,.blog-post-card,.cm-legal-card) { background: var(--cm-panel); border-color: var(--cm-line); border-radius: var(--cm-panel-radius); } .cm-public-design .cm-plan-popular { background: var(--cm-panel-raised); border-color: #527fa5; } .cm-public-design .cm-detail-stories > div > .max-w-md { background: var(--cm-panel); border: 1px solid var(--cm-line); border-radius: var(--cm-panel-radius); box-shadow: none; } .cm-public-design .cm-detail-hero .w-16,.cm-public-design .cm-feature-link .w-14 { color: var(--cm-link); background: var(--cm-panel-raised); } .cm-public-design .cm-feature-link [class*="text-"]:not(p):not(.text-muted-foreground) { --tw-text-opacity: 1; } .cm-public-design :is(.cm-capabilities,.cm-outcomes,#reviews) { border-top: 1px solid var(--cm-line); } .cm-public-design .cm-finale { background: var(--cm-panel); } .cm-public-design footer { background: var(--cm-page); } .cm-public-design .cm-demo-frame { box-shadow: none; } .cm-public-design .cm-constellation { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .6; pointer-events: none; } .cm-public-design .cm-nav-progress { position: absolute; bottom: -1px; left: 12px; right: 12px; height: 2px; background: var(--cm-link); transform: scaleX(0); transform-origin: left; pointer-events: none; } .cm-public-design .cm-product-paths { background: var(--cm-page); } .cm-public-design .cm-product-paths a { position: relative; overflow: hidden; } .cm-public-design .cm-product-paths a::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg,transparent,#214b7233,transparent); transform: translateX(-100%); transition: transform 250ms var(--cm-ease); } .cm-public-design .cm-explorer { border-block: 1px solid var(--cm-line); } .cm-public-design .cm-explorer-heading { display: flex; gap: 48px; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; } .cm-public-design .cm-explorer-heading h2 { max-width: 21ch; } .cm-public-design .cm-explorer-heading > p { max-width: 38ch; font-size: 16px; color: var(--cm-secondary); } .cm-public-design .cm-explorer-layout { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 64px; align-items: start; } .cm-public-design .cm-explorer-select { border-top: 1px solid var(--cm-line); } .cm-public-design .cm-explorer-option { padding: 24px 0; border-bottom: 1px solid var(--cm-line); } .cm-public-design .cm-explorer-option button { width: 100%; display: flex; align-items: center; gap: 16px; min-height: 48px; text-align: left; font-size: 24px; font-weight: 600; color: var(--cm-secondary); } .cm-public-design .cm-explorer-option button > i:first-child { width: 28px; color: var(--cm-link); font-size: 22px; } .cm-public-design .cm-explorer-option button > i:last-child { margin-left: auto; font-size: 16px; transition: transform 200ms var(--cm-ease); } .cm-public-design .cm-explorer-option button[aria-selected=true] { color: var(--cm-ink); } .cm-public-design .cm-explorer-option button[aria-selected=true] > i:last-child { transform: rotate(45deg); } .cm-public-design .cm-explorer-detail { padding: 16px 0 0 44px; } .cm-public-design .cm-explorer-detail p { color: var(--cm-secondary); font-size: 15px; line-height: 1.8; margin-bottom: 12px; } .cm-public-design .cm-explorer-stage { position: sticky; top: 112px; border: 1px solid var(--cm-line); border-radius: 16px; background: var(--cm-panel); overflow: hidden; min-height: 460px; } .cm-public-design .cm-explorer-stage .cm-window-bar { padding: 16px 24px; } .cm-public-design .cm-explorer-panel { padding: 28px; min-height: 390px; } .cm-public-design .cm-explorer-panel h3 { margin-bottom: 20px; font-size: 16px; } .cm-public-design .cm-explorer-panel .cm-preview-note { margin-top: 20px; } .cm-public-design .cm-explorer:not(.cm-explorer-ready) .cm-explorer-panel { border-bottom: 1px solid var(--cm-line); } .cm-public-design .cm-network-header { display: flex; align-items: center; gap: 20px; margin-top: 24px; flex-wrap: wrap; } .cm-public-design .cm-network-hint { color: var(--cm-secondary); font-size: 14px; } .cm-public-design .cm-network-reset { min-height: 44px; padding: 8px 14px; border: 1px solid var(--cm-line); border-radius: 8px; color: var(--cm-link); font-size: 13px; } .cm-public-design .cm-network-orchestra .cm-network-node { border-radius: 12px; text-align: left; transition: opacity 200ms ease,background-color 200ms ease; } .cm-public-design .cm-network-node[aria-pressed=true] { background: #214b7233; color: var(--cm-ink); } .cm-public-design .cm-network-node[aria-pressed=true] i { outline: 1px solid var(--cm-link); } .cm-public-design .cm-wire,.cm-public-design .cm-packet { transition: opacity 200ms ease; } .cm-public-design .cm-network-filtered .cm-network-node[aria-pressed=false] { opacity: 1; } .cm-public-design .cm-network-filtered :is(.cm-wire,.cm-packet):not(.cm-wire-selected):not(.cm-wire-out):not(.cm-packet-out) { opacity: .08; animation: none; } .cm-public-design .cm-network-orchestra .cm-network-outputs span { background: var(--cm-panel-raised); color: var(--cm-ink); border: 1px solid var(--cm-line); } .cm-public-design .cm-spotlight { position: relative; isolation: isolate; overflow: hidden; } .cm-public-design .cm-spotlight::after { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: radial-gradient(280px circle at var(--cm-light-x,50%) var(--cm-light-y,50%),#214b7240,transparent 75%); opacity: 0; transition: opacity 200ms ease; pointer-events: none; } .cm-public-design .cm-capability-grid { grid-template-columns: 1fr 1fr; gap: 0 64px; } .cm-public-design .cm-capability-grid article { display: grid; grid-template-columns: 36px 1fr; gap: 8px 20px; padding-block: 32px; } .cm-public-design .cm-capability-grid article > i { grid-row: span 2; margin: 4px 0 0; } .cm-public-design .cm-capability-grid article p { grid-column: 2; } .cm-public-design .cm-capability-grid article h3 { margin: 0; } .cm-public-design .cm-finale-symbol span::after { content: ''; position: absolute; top: 50%; left: -3px; width: 6px; height: 6px; background: var(--cm-link); border-radius: 50%; } @keyframes cm-orbit-turn { to { transform: rotate(360deg); } } @media (prefers-reduced-motion:no-preference) { .cm-public-design .cm-finale.cm-ambient-active .cm-finale-symbol span { animation: cm-orbit-turn 24s linear infinite; } .cm-public-design .cm-finale.cm-ambient-active .cm-finale-symbol span:last-child { animation-duration: 32s; animation-direction: reverse; } } @media (hover:hover) and (pointer:fine) { .cm-public-design .cm-product-paths a:hover::before { transform: translateX(0); } .cm-public-design .cm-spotlight:hover::after { opacity: 1; } } @media (max-width:1100px) { .cm-public-design .cm-explorer-layout { gap: 32px; grid-template-columns: 1fr 1.2fr; } .cm-public-design .cm-explorer-option button { font-size: 20px; } } @media (max-width:767px) { .cm-public-design .cm-explorer-heading { display: block; margin-bottom: 24px; } .cm-public-design .cm-explorer-heading > p { margin-top: 16px; } .cm-public-design .cm-explorer-layout { grid-template-columns: 1fr; gap: 24px; } .cm-public-design .cm-explorer-stage { position: relative; top: auto; min-height: 0; } .cm-public-design .cm-explorer-panel { min-height: 0; padding: 20px; } .cm-public-design .cm-explorer-option { padding: 16px 0; } .cm-public-design .cm-explorer-option button { font-size: 19px; } .cm-public-design .cm-explorer-detail { padding-left: 44px; } .cm-public-design .cm-capability-grid { grid-template-columns: 1fr; } .cm-public-design .cm-network-header { margin-top: 16px; gap: 8px; } .cm-public-design .cm-network-orchestra .cm-network-node { min-height: 44px; } .cm-public-design .cm-constellation { opacity: .3; } } .cm-public-design.cm-motion-paused :is(.cm-product-paths a::before,.cm-explorer-option button > i:last-child) { transition: none; } /* Shared materials also cover the incumbent content templates and their HTML samples. */ .cm-public-design :is(.cm-demo-modules,.cm-demo-vault) svg { color: var(--cm-link); } .cm-public-design :is(.cm-demo-modules,.cm-demo-vault) [class*="bg-emerald"],.cm-public-design .cm-demo-modules [class*="bg-red"],.cm-public-design .cm-demo-modules [class*="bg-pink"],.cm-public-design .cm-demo-modules [class*="bg-amber"] { background: var(--cm-panel-raised); } .cm-public-design :is(.cm-demo-modules,.cm-demo-vault) [class*="border-emerald"],.cm-public-design .cm-demo-modules [class*="border-red"],.cm-public-design .cm-demo-modules [class*="border-pink"],.cm-public-design .cm-demo-modules [class*="border-amber"] { border-color: var(--cm-line); } .cm-public-design :is(.cm-feature-catalog,.cm-detail-stories) :is([class*="bg-blue-"],[class*="bg-indigo-"],[class*="bg-purple-"]) { background-color: var(--cm-panel-raised); } .cm-public-design .cm-feature-catalog :is([class*="text-blue-"],[class*="text-indigo-"],[class*="text-purple-"],[class*="text-emerald-"],[class*="text-amber-"]) { color: var(--cm-link); } .cm-public-design :is(.bg-card\/50,.bg-card\/30,.bg-black\/15) { background-color: var(--cm-panel); border-color: var(--cm-line); backdrop-filter: none; } .cm-public-design :is(input,select,textarea) { background-color: var(--cm-panel); } .cm-public-design .cm-chat-command { background: var(--cm-brand); } .cm-public-design .cm-chat-avatar { background: var(--cm-brand); } .cm-public-design .cm-chat-success { background: #152d29; } .cm-public-design .cm-explorer-option button > i.fa-telegram { color: var(--cm-link); } .cm-public-design .blog-card { background: var(--cm-panel); border-color: var(--cm-line); border-radius: var(--cm-panel-radius); } .cm-public-design .cm-plan-card { padding-top: 28px; transition: border-color 200ms ease,background-color 200ms ease; } .cm-public-design .cm-plan-popular > .absolute { position: absolute; top: 0; left: 0; transform: none; padding: 12px 24px 0; } .cm-public-design .cm-plan-popular > .text-center { padding-top: 28px; } .cm-public-design .cm-plan-card a:not([class*="bg-primary"]) { background: var(--cm-panel-raised); border: 1px solid var(--cm-line); } .cm-public-design #cm-prereg :is(.cm-symbol,.cm-eyebrow,.cm-recommended,.cm-discount,.cm-welcome-offer,.cm-social > i,a) { color: var(--cm-link); } .cm-public-design #cm-prereg :focus-visible { outline-color: var(--cm-focus); } .cm-public-design #cm-prereg :is(.cm-panel,dialog,.cm-social,.cm-plan) { background: var(--cm-panel); border-color: var(--cm-line); border-radius: var(--cm-panel-radius); box-shadow: none; backdrop-filter: none; } .cm-public-design #cm-prereg .cm-eyebrow { display: none; } @media (hover:hover) and (pointer:fine) { .cm-public-design .cm-plan-card:hover { box-shadow: none; border-color: #527fa5; } } @media (max-width:767px) { .cm-public-design .cm-explorer-select { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; } .cm-public-design .cm-explorer-option { display: contents; } .cm-public-design .cm-explorer-option button { order: 1; flex-direction: column; justify-content: center; gap: 8px; padding: 12px 6px; font-size: 12px; text-align: center; border-bottom: 2px solid transparent; } .cm-public-design .cm-explorer-option button[aria-selected=true] { border-bottom-color: var(--cm-link); } .cm-public-design .cm-explorer-option button > i:last-child { display: none; } .cm-public-design .cm-explorer-detail { order: 2; grid-column: 1/-1; padding: 20px 0 0; } } /* Finish-review fixes: readable hover states and consistent transcript symbols. */ .cm-public-design .hover\:text-primary:hover,.cm-public-design .cm-public-nav a:hover { color: var(--cm-link); } .cm-public-design .cm-transcript-icon { width: 16px; margin-right: 4px; color: var(--cm-link); text-align: center; font-size: 11px; } /* T8 public family: Features, Widgets, Pricing and Blog. */ .cm-t8-public-page { background:#020912; color:#f8fbff; } .cm-t8-page-hero { position:relative; min-height:660px; display:flex; align-items:center; overflow:hidden; border-bottom:1px solid rgba(123,181,255,.13); background:radial-gradient(circle at 68% 42%,rgba(33,121,255,.2),transparent 38%),linear-gradient(180deg,#03101e 0%,#020912 100%); } .cm-t8-page-hero .cm-azure-field { opacity:.65; } .cm-t8-page-hero-copy { position:relative; z-index:2; padding-top:120px; padding-bottom:90px; } .cm-t8-eyebrow { margin:0 0 22px; color:#79b7ff; font:700 12px/1.2 Inter,sans-serif; letter-spacing:.22em; } .cm-t8-page-hero h1 { max-width:930px; margin:0; font:700 clamp(3.4rem,8vw,7.2rem)/.93 Outfit,Inter,sans-serif; letter-spacing:-.065em; text-wrap:balance; } .cm-t8-page-hero-copy>p:not(.cm-t8-eyebrow) { max-width:720px; margin:30px 0 0; color:rgba(235,244,255,.72); font-size:clamp(1.05rem,2vw,1.35rem); line-height:1.65; } .cm-t8-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:38px; } .cm-t8-text-link,.cm-t8-back { display:inline-flex; align-items:center; gap:9px; color:#b7d9ff; font-weight:700; } .cm-t8-back { margin-bottom:42px; font-size:.9rem; } .cm-t8-catalog,.cm-t8-widget-showcase { padding-top:110px; padding-bottom:120px; } .cm-t8-section-head { display:grid; grid-template-columns:52px minmax(0,1fr); gap:22px; align-items:start; margin-bottom:48px; } .cm-t8-section-head>span { padding-top:9px; color:#5f9fef; font:700 12px/1 Inter,sans-serif; letter-spacing:.16em; } .cm-t8-section-head h2 { margin:0; color:#fff; font:650 clamp(2.1rem,4vw,4.2rem)/1 Outfit,sans-serif; letter-spacing:-.045em; } .cm-t8-section-head p { max-width:680px; margin:14px 0 0; color:rgba(225,238,255,.62); font-size:1.05rem; } .cm-t8-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid rgba(255,255,255,.12); } .cm-t8-feature-card { position:relative; min-height:360px; padding:38px; border-bottom:1px solid rgba(255,255,255,.12); color:#fff; transition:background .3s ease; scroll-margin-top:90px; } .cm-t8-feature-card:nth-child(odd) { border-right:1px solid rgba(255,255,255,.12); } .cm-t8-feature-card:hover { background:linear-gradient(135deg,color-mix(in srgb,var(--feature-color) 13%,transparent),rgba(255,255,255,.025)); } .cm-t8-feature-top { display:flex; align-items:center; justify-content:space-between; gap:18px; } .cm-t8-feature-icon { display:grid; width:58px; height:58px; place-items:center; border:1px solid color-mix(in srgb,var(--feature-color) 45%,transparent); border-radius:50%; color:var(--feature-color); font-size:22px; } .cm-t8-feature-count { color:rgba(255,255,255,.45); font:700 11px/1 Inter,sans-serif; letter-spacing:.12em; text-transform:uppercase; } .cm-t8-feature-card h2 { margin:34px 0 12px; font:650 clamp(1.8rem,3vw,2.7rem)/1 Outfit,sans-serif; letter-spacing:-.035em; } .cm-t8-feature-card p { max-width:540px; color:rgba(235,244,255,.62); line-height:1.65; } .cm-t8-feature-card ul { display:flex; flex-wrap:wrap; gap:7px; margin:18px 0 0; padding:0; list-style:none; } .cm-t8-feature-card li,.cm-t8-widget-card>div span { border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:6px 10px; color:rgba(255,255,255,.68); font-size:11px; } .cm-t8-card-link { position:absolute; left:38px; bottom:34px; display:flex; gap:12px; align-items:center; color:var(--feature-color); font-weight:700; } .cm-t8-feature-card:hover .cm-t8-card-link i { transform:translateX(6px); } .cm-t8-card-link i { transition:transform .25s ease; } .cm-t8-flow { padding:100px 0; border-top:1px solid rgba(255,255,255,.09); background:linear-gradient(180deg,rgba(15,41,71,.45),rgba(3,12,23,.2)); } .cm-t8-platform-row { display:grid; grid-template-columns:repeat(6,1fr); border-block:1px solid rgba(255,255,255,.1); } .cm-t8-platform-row span { display:flex; min-height:100px; align-items:center; justify-content:center; gap:10px; border-right:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.72); font-weight:700; } .cm-t8-platform-row span:last-child { border-right:0; } .cm-t8-platform-row i { color:#71aff9; font-size:20px; } .cm-t8-widget-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid rgba(255,255,255,.11); border-left:1px solid rgba(255,255,255,.11); } .cm-t8-widget-card { position:relative; min-height:285px; padding:30px; border-right:1px solid rgba(255,255,255,.11); border-bottom:1px solid rgba(255,255,255,.11); background:rgba(255,255,255,.012); transition:background .25s ease,transform .25s ease; } .cm-t8-widget-card:hover { z-index:1; background:rgba(37,122,226,.09); transform:translateY(-3px); } .cm-t8-widget-card>i { margin-top:28px; color:#6eaeff; font-size:24px; } .cm-t8-widget-number { position:absolute; top:24px; right:25px; color:rgba(255,255,255,.26); font:700 11px/1 Inter,sans-serif; letter-spacing:.12em; } .cm-t8-widget-card h2 { margin:22px 0 11px; font-size:1.2rem; font-weight:700; } .cm-t8-widget-card p { color:rgba(235,244,255,.58); font-size:.88rem; line-height:1.55; } .cm-t8-widget-card>div { position:absolute; left:30px; right:20px; bottom:25px; display:flex; gap:6px; } .cm-t8-widget-bottom { display:flex; align-items:end; justify-content:space-between; gap:35px; } .cm-t8-widget-bottom h2 { max-width:800px; margin:0; font:650 clamp(2.2rem,5vw,4.4rem)/1 Outfit,sans-serif; letter-spacing:-.045em; } .cm-t8-live-pill { display:flex; align-items:center; gap:9px; color:rgba(255,255,255,.64); font-size:.86rem; font-weight:700; } .cm-t8-live-pill i { width:8px; height:8px; border-radius:50%; background:#48d98b; box-shadow:0 0 0 5px rgba(72,217,139,.12); } .t8-blog-bridge { position:relative; z-index:2; padding:100px 0; border-top:1px solid rgba(255,255,255,.1); background:#030c17; } .t8-blog-bridge-inner { display:flex; align-items:end; justify-content:space-between; gap:45px; } .t8-blog-bridge-inner>div>span { color:#70aff8; font-size:11px; font-weight:800; letter-spacing:.2em; } .t8-blog-bridge h2 { max-width:820px; margin:15px 0 18px; color:#fff; font:650 clamp(2.6rem,6vw,5.8rem)/.98 Outfit,sans-serif; letter-spacing:-.055em; } .t8-blog-bridge p { max-width:690px; color:rgba(235,244,255,.63); font-size:1.08rem; } .t8-blog-link { display:flex; flex:none; align-items:center; gap:26px; border-bottom:1px solid #6faef8; padding:12px 0; color:#d6eaff; font-weight:800; } .t8-blog-link i { transition:transform .2s ease; }.t8-blog-link:hover i{transform:translateX(6px)} .cm-public-design .blog-index-hero { min-height:620px; display:flex; align-items:center; padding-top:9rem!important; background:radial-gradient(circle at 75% 35%,rgba(30,115,229,.22),transparent 38%),#030c17!important; } .cm-public-design .blog-index-hero h1 { font:650 clamp(3.4rem,7vw,6.8rem)/.95 Outfit,sans-serif!important; letter-spacing:-.055em; } .cm-public-design .blog-search-panel { border-radius:0!important; background:rgba(4,15,28,.72)!important; } .cm-public-design .blog-card { border-radius:0!important; background:#030b15!important; } .cm-public-design #pricing { background:#020912!important; } .cm-public-design .cm-plan-card { border-radius:0!important; background:rgba(5,17,31,.78)!important; } @media(max-width:980px){.cm-t8-widget-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cm-t8-platform-row{grid-template-columns:repeat(3,1fr)}.t8-blog-bridge-inner,.cm-t8-widget-bottom{align-items:flex-start;flex-direction:column}} @media(max-width:680px){.cm-t8-page-hero{min-height:600px}.cm-t8-page-hero h1{font-size:clamp(3rem,15vw,4.6rem)}.cm-t8-feature-grid,.cm-t8-widget-grid{grid-template-columns:1fr}.cm-t8-feature-card:nth-child(odd){border-right:0}.cm-t8-feature-card{min-height:340px;padding:28px 22px}.cm-t8-card-link{left:22px}.cm-t8-platform-row{grid-template-columns:repeat(2,1fr)}.cm-t8-section-head{grid-template-columns:34px 1fr}.cm-t8-catalog,.cm-t8-widget-showcase{padding-top:80px;padding-bottom:80px}.t8-blog-bridge{padding:75px 0}} /* Rolled back public-shell experiment: retained inert to preserve local history. */ @media not all { .cm-public-design .cm-public-nav,.cm-public-design.cm-is-scrolled .cm-public-nav{top:0;left:0;width:100%;max-width:none;transform:none;border:0;border-bottom:1px solid #7ebeff2e;border-radius:0;background:#050c16e8;color:#f3f8fa;box-shadow:none;backdrop-filter:blur(18px)} .cm-public-design .cm-public-nav>div{max-width:1408px;padding-inline:40px}.cm-public-design .cm-public-nav>div>div{height:78px} .cm-public-design .cm-public-nav :is(a,button,.cm-navbar-brand-label){color:#eef7ff}.cm-public-design .cm-public-nav .bg-primary{border:1px solid #75c6ff8c;border-radius:999px;background:#f2e156;color:#111827;box-shadow:none}.cm-public-design .cm-public-nav .bg-primary:hover{background:#fff17a;color:#111827}.cm-public-design .cm-public-nav a:not([href="/"]):hover{color:#79c9ff} .cm-public-design #mobile-menu{top:78px;left:0;right:0;border:0;border-bottom:1px solid #7ebeff33;border-radius:0;background:#07111e} .cm-t8-public-page{font-family:Outfit,Inter,sans-serif}.cm-t8-public-page .cm-t8-page-hero{min-height:100svh} .cm-t8-public-page .cm-t8-catalog{width:100%;max-width:none;padding:120px max(40px,calc((100vw - 1328px)/2));background:#f4f0e5;color:#17181d} .cm-t8-public-page .cm-t8-catalog :is(.cm-t8-section-head h2,.cm-t8-feature-card h2){color:#17181d}.cm-t8-public-page .cm-t8-catalog :is(.cm-t8-section-head p,.cm-t8-feature-card p){color:#55565d} .cm-t8-public-page .cm-t8-catalog :is(.cm-t8-feature-grid,.cm-t8-feature-card){border-color:#17181d}.cm-t8-public-page .cm-t8-catalog .cm-t8-feature-card{color:#17181d}.cm-t8-public-page .cm-t8-catalog .cm-t8-feature-card:hover{background:#f1df55} .cm-t8-public-page .cm-t8-catalog .cm-t8-feature-icon{border:1px solid #17181d;background:var(--feature-color);color:#fff;box-shadow:7px 7px 0 #17181d}.cm-t8-public-page .cm-t8-catalog .cm-t8-feature-count{color:#62636a}.cm-t8-public-page .cm-t8-catalog .cm-t8-feature-card li{border-color:#17181d;color:#17181d}.cm-t8-public-page .cm-t8-catalog .cm-t8-card-link{color:#17181d} .cm-t8-public-page .cm-t8-flow{min-height:72svh;display:grid;align-items:center;border:0;background:#ff705d;color:#17181d}.cm-t8-public-page .cm-t8-flow :is(.cm-t8-section-head h2,.cm-t8-widget-bottom h2){color:#17181d}.cm-t8-public-page .cm-t8-flow .cm-t8-section-head p{color:#4b2926}.cm-t8-public-page .cm-t8-flow :is(.cm-t8-section-head>span,.cm-t8-eyebrow){color:#17181d} .cm-t8-public-page .cm-t8-platform-row{border-color:#17181d;background:#f4f0e5;box-shadow:12px 12px 0 #17181d}.cm-t8-public-page .cm-t8-platform-row span{border-color:#17181d;color:#17181d}.cm-t8-public-page .cm-t8-platform-row i{color:#2447e8} .cm-t8-widgets-page .cm-t8-page-hero{background:radial-gradient(circle at 70% 30%,#a970ff57,transparent 36%),#10131a}.cm-t8-widgets-page .cm-t8-widget-showcase{width:100%;max-width:none;padding:120px max(40px,calc((100vw - 1328px)/2));background:#10131a}.cm-t8-widgets-page .cm-t8-widget-grid,.cm-t8-widgets-page .cm-t8-widget-card{border-color:#4b5260} .cm-t8-widgets-page .cm-t8-widget-card:nth-child(4n+1):hover{background:#2447e8}.cm-t8-widgets-page .cm-t8-widget-card:nth-child(4n+2):hover{background:#9146ff}.cm-t8-widgets-page .cm-t8-widget-card:nth-child(4n+3):hover{background:#d93d76}.cm-t8-widgets-page .cm-t8-widget-card:nth-child(4n):hover{background:#156b5b}.cm-t8-widgets-page .cm-t8-widget-card:hover p{color:#fff}.cm-t8-widgets-page .cm-t8-flow .cm-button{border-radius:999px;background:#17181d;color:#fff} .cm-public-design .cm-detail-hero{min-height:82svh;display:flex;align-items:center;padding-top:130px!important;padding-bottom:80px!important;background:radial-gradient(circle at 72% 35%,#2447e84d,transparent 38%),#10131a;color:#f4f0e5}.cm-public-design .cm-detail-hero>.absolute{opacity:.2}.cm-public-design .cm-detail-hero h1{max-width:900px;font:650 clamp(3.8rem,8vw,7rem)/.94 Outfit,Inter,sans-serif;letter-spacing:-.06em}.cm-public-design .cm-detail-hero p{max-width:760px;color:#b9c7d5!important;font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.65}.cm-public-design .cm-detail-hero a{color:#8ecbff} .cm-public-design #cm-public-content:not(.cm-t8-public-page)>.cm-detail-hero~section{max-width:none!important;margin:0!important;padding:110px max(40px,calc((100vw - 1280px)/2))!important;background:#f4f0e5;color:#17181d}.cm-public-design #cm-public-content:not(.cm-t8-public-page)>.cm-detail-hero~section:nth-of-type(3){background:#ff705d}.cm-public-design #cm-public-content:not(.cm-t8-public-page)>.cm-detail-hero~section :is(h2,h3){color:#17181d}.cm-public-design #cm-public-content:not(.cm-t8-public-page)>.cm-detail-hero~section p{color:#55565d}.cm-public-design #cm-public-content:not(.cm-t8-public-page)>.cm-detail-hero~section [class*="bg-card"]{border:1px solid #17181d!important;border-radius:0!important;background:#fffdf7!important;color:#17181d!important;box-shadow:10px 10px 0 #17181d!important}.cm-public-design #cm-public-content:not(.cm-t8-public-page)>.cm-detail-hero~section [class*="rounded-xl"]{border-radius:0!important} .cm-public-design #pricing{padding-top:90px!important;padding-bottom:110px!important;background:#d9d7ff!important;color:#17181d}.cm-public-design #pricing .cm-plan-card{border:0!important;border-right:1px solid #17181d!important;border-radius:0!important;background:transparent!important;color:#17181d;box-shadow:none!important}.cm-public-design #pricing .grid.grid-cols-1{gap:0!important;border-block:1px solid #17181d}.cm-public-design #pricing .cm-plan-popular{background:#f1df55!important}.cm-public-design #pricing .cm-plan-card :is(p,span){color:#34353a}.cm-public-design #pricing .cm-plan-card :is(button,a){border-radius:999px} .cm-public-design #comparison{background:#f4f0e5!important;color:#17181d}.cm-public-design #comparison table{border:1px solid #17181d;border-radius:0;background:transparent}.cm-public-design #comparison :is(tr,th,td){border-color:#17181d!important}.cm-public-design #comparison tr:hover{background:#f1df55!important}.cm-public-design #comparison .text-muted-foreground{color:#55565d} .cm-public-design .blog-index-hero{background:#2447e8!important;color:#fff}.cm-public-design .blog-index-hero p{color:#dce3ff!important}.cm-public-design .blog-search-panel{border:1px solid #17181d!important;border-radius:0!important;background:#f1df55!important;color:#17181d;box-shadow:12px 12px 0 #17181d!important}.cm-public-design :is(.blog-search-label,.blog-search-control,.blog-search-control input){color:#17181d!important}.cm-public-design .blog-search-control{border-color:#17181d;background:#f4f0e5}.cm-public-design .blog-search-button{border:1px solid #17181d;border-radius:999px;background:#17181d;color:#fff}.cm-public-design .blog-topic-chip{border-color:#17181d;background:#f4f0e5;color:#17181d}.cm-public-design .blog-index-hero+section{background:#f4f0e5;color:#17181d}.cm-public-design .blog-card{border-color:#17181d!important;border-radius:0!important;background:#f4f0e5!important;color:#17181d;box-shadow:none}.cm-public-design .blog-card :is(p,span){color:#55565d}.cm-public-design .blog-card :is(h2,h3){color:#17181d}.cm-public-design .blog-card:hover{transform:translateY(-6px);box-shadow:10px 10px 0 #17181d} .cm-public-design .cm-public-footer{position:relative;overflow:hidden;border-top:1px solid #3d4654;background:#10131a;color:#f4f0e5}.cm-public-design .cm-public-footer>div{min-height:680px;display:flex;align-items:center;background:#10131a}.cm-public-design .cm-public-footer>div>.absolute:first-child{display:block;opacity:.18}.cm-public-design .cm-public-footer>div>.absolute:nth-child(2){display:block;background:radial-gradient(circle at 18% 35%,#2447e859,transparent 38%),radial-gradient(circle at 84% 25%,#ff705d33,transparent 30%)}.cm-public-design .cm-public-footer>div>.absolute:nth-child(3){display:block;bottom:-.18em}.cm-public-design .cm-public-footer .footer-wordmark{color:#f4f0e5;opacity:.16;font-size:clamp(6rem,16vw,14rem)}.cm-public-design .cm-public-footer>div>.relative{width:100%;padding:90px 40px 130px}.cm-public-design .cm-public-footer h3{color:#f1df55}.cm-public-design .cm-public-footer li a{font-size:14px;color:#c5c9d1}.cm-public-design .cm-public-footer li a:hover{color:#fff;text-decoration:none;transform:translateX(4px)}.cm-public-design .cm-public-footer .text-neutral-400{color:#a8adba}.cm-public-design .cm-public-footer .mb-16{border-color:#3d4654}.cm-public-design .cm-public-footer a[class*="border-primary"]{border-radius:0;border-color:#596170;background:#171b24} @media(max-width:767px){.cm-public-design .cm-public-nav>div{padding-inline:16px}.cm-public-design .cm-public-nav>div>div{height:70px}.cm-public-design #mobile-menu{top:70px}.cm-t8-public-page .cm-t8-catalog,.cm-t8-widgets-page .cm-t8-widget-showcase{padding-inline:20px}.cm-public-design #pricing .grid.grid-cols-1{border:0;gap:16px!important}.cm-public-design #pricing .cm-plan-card{border:1px solid #17181d!important}.cm-public-design .cm-public-footer>div>.relative{padding:70px 20px 110px}} } /* Source: public-azure.css */ /* Dark azure marketing composition. Dark mode is a user requirement on every surface. */ .cm-public-design { --cm-azure: #52c6ff; --cm-azure-ink: #eef7ff; --cm-azure-text: #acc1d3; --cm-azure-page: #0b1019; --cm-azure-line: #294358; } .cm-public-design :is(.cm-azure-home,.cm-azure-catalog) { background: var(--cm-azure-page); color: var(--cm-azure-ink); } .cm-public-design :is(.cm-azure-home,.cm-azure-catalog) ::selection { background: #a5e4ff; color: #112f49; } .cm-public-design .cm-azure-home .cm-launch-hero { padding: 172px 0 0; overflow: clip; background: #0b1019; } .cm-public-design .cm-azure-home .cm-launch-grid { min-height: 645px; gap: 36px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; } .cm-public-design .cm-azure-home .cm-launch-copy { padding-bottom: 75px; } .cm-public-design .cm-azure-home .cm-launch-copy h1 { max-width: 12ch; font-size: clamp(48px,5.5vw,80px); font-weight: 700; line-height: 1.035; letter-spacing: -.04em; margin-bottom: 28px; } .cm-public-design .cm-azure-home .cm-headline-accent { color: #65ceff; white-space: nowrap; } .cm-public-design .cm-azure-home .cm-launch-copy > p { color: #b6cbdc; max-width: 43ch; font-size: 17px; line-height: 1.8; } .cm-public-design .cm-azure-home .cm-launch-copy .cm-button-secondary { background: transparent; border-color: #3b5e79; color: #e4f3ff; } .cm-public-design .cm-azure-home .cm-hero-platform-line { color: #a7c1d6; } .cm-public-design .cm-azure-home .cm-hero-platform-line i { color: #9ed8f5; } .cm-azure-field { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; } .cm-azure-field::before { content: ''; position: absolute; width: 130%; height: 530px; top: -230px; left: -15%; transform: rotate(-12deg); background: linear-gradient(110deg,#0b1623 5%,#113e5d 43%,#0873a4 71%,#095286); } .cm-azure-field > span { position: absolute; width: 110%; height: 620px; top: -280px; right: -55%; transform: rotate(-26deg); background: linear-gradient(115deg,#13334c,#097fb1 35%,#07375c 75%); border-radius: 40%; } .cm-azure-field > span:nth-child(2) { width: 95%; height: 420px; top: 140px; right: -43%; background: linear-gradient(105deg,#102c43,#0d7197 48%,#10364f); opacity: .65; } .cm-azure-field > span:nth-child(3) { width: 90%; height: 370px; top: 410px; right: -60%; background: linear-gradient(95deg,#0c1e2e,#145b7b 50%,#163f5a); opacity: .5; } .cm-public-design .cm-azure-home .cm-showcase { color: var(--cm-ink); padding: 0 0 45px; margin-right: -65px; } .cm-public-design .cm-azure-home .cm-showcase-shell { background: #101c2c; box-shadow: 0 40px 80px #00000066,0 8px 20px #00000033; border-color: #416882; } .cm-public-design .cm-azure-home .cm-showcase-orbit { display: none; } .cm-public-design .cm-azure-home .cm-showcase-light { background: none; } .cm-public-design .cm-azure-home .cm-showcase .cm-preview-note { justify-content: flex-end; padding-bottom: 40px; } .cm-public-design .cm-azure-home .cm-floating-message { bottom: 8px; left: -44px; background: #13273b; color: #edf7ff; border: 0; box-shadow: 0 16px 48px #00000040; padding: 18px 22px; } .cm-public-design .cm-azure-home .cm-floating-message div > span { color: #b1c5d6; } .cm-public-design .cm-azure-home .cm-floating-platforms { background: #173951; border: 0; box-shadow: 0 12px 24px #11375126; top: -28px; right: 28px; } .cm-public-design .cm-azure-home .cm-live-proof { border-color: #294358; margin-top: 44px; padding-block: 32px; position: relative; gap: 48px; } .cm-public-design .cm-azure-home .cm-live-proof strong { color: #e6f5ff; font-size: 27px; font-variant-numeric: tabular-nums; } .cm-public-design .cm-azure-home .cm-live-proof span { color: #adc5d7; } .cm-public-design .cm-azure-home .cm-product-paths { background: #0e1a28; border-block: 1px solid #263e53; } .cm-public-design .cm-azure-home .cm-product-paths > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-block: 24px; } .cm-public-design .cm-azure-home .cm-product-paths a { display: flex; justify-content: flex-start; gap: 9px; padding: 8px 0; color: #b8cee0; font-size: 13px; border: 0; min-height: 44px; } .cm-public-design .cm-azure-home .cm-product-paths a > i { color: #52c6ff; font-size: 18px; } .cm-public-design .cm-azure-home .cm-product-paths a::before { display: none; } .cm-public-design .cm-azure-home .cm-explorer { background: #0b1019; padding-block: 112px 128px; } .cm-public-design .cm-azure-home .cm-explorer-heading { margin-bottom: 60px; } .cm-public-design .cm-azure-home .cm-explorer-heading h2 { font-size: clamp(34px,3.8vw,52px); max-width: 21ch; } .cm-public-design .cm-azure-home .cm-explorer-heading > p { color: var(--cm-azure-text); } .cm-public-design .cm-azure-home .cm-explorer-layout { gap: 80px; } .cm-public-design .cm-azure-home .cm-explorer-option { border-color: #294358; } .cm-public-design .cm-azure-home .cm-explorer-option button { color: #acc6db; } .cm-public-design .cm-azure-home .cm-explorer-option button[aria-selected=true] { color: #ecf7ff; } .cm-public-design .cm-azure-home .cm-explorer-option button > i:first-child { color: #52c6ff; } .cm-public-design .cm-azure-home .cm-explorer-detail p { color: var(--cm-azure-text); } .cm-public-design .cm-azure-home .cm-explorer-detail .cm-text-link { color: #83d4ff; } .cm-public-design .cm-azure-home .cm-explorer-stage { color: var(--cm-ink); border: 0; box-shadow: 0 28px 65px #00000040; transform: rotate(-1deg); } .cm-public-design .cm-azure-home .cm-explorer-stage .cm-window-bar { background: #1d3e59; } .cm-public-design .cm-azure-home .cm-product-stories { position: relative; background: #0e1926; padding-top: 88px; padding-bottom: 128px; } .cm-product-stories::before { content: ''; position: absolute; inset: -35px 0 auto; height: 36px; background: #0e1926; clip-path: polygon(0 100%,100% 0,100% 100%); } .cm-hub-story { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 80px; align-items: center; padding-block: 36px 96px; } .cm-public-design .cm-product-copy h2 { font-size: clamp(32px,3.4vw,46px); max-width: 18ch; font-weight: 600; margin-bottom: 24px; } .cm-public-design .cm-product-copy > p { color: var(--cm-azure-text); font-size: 17px; line-height: 1.8; max-width: 52ch; margin-bottom: 24px; } .cm-product-benefits { list-style: none; display: grid; gap: 14px; margin-bottom: 28px; font-size: 14px; } .cm-product-benefits li { display: flex; align-items: center; gap: 12px; } .cm-product-benefits i { color: #68cfff; font-size: 12px; } .cm-hub-scene { min-width: 0; position: relative; padding: 24px 0; } .cm-hub-scene::before { content: ''; position: absolute; inset: 0 -24px 16px; background: linear-gradient(125deg,#1b5c7a,#1688bc); border-radius: 16px; transform: rotate(-5deg); } .cm-story-browser { position: relative; color: var(--cm-ink); border-radius: 12px; overflow: hidden; background: #111e2d; box-shadow: 0 24px 44px #12436533; } .cm-hub-scene > .cm-preview-note { position: relative; justify-content: center; color: #bed6e8; margin-top: 16px; } .cm-hub-demo { padding: 24px; color: #eef8ff; } .cm-hub-profile { display: flex; align-items: center; gap: 12px; padding-bottom: 24px; } .cm-hub-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #1c5676; color: #9ee5ff; } .cm-hub-profile > div { display: grid; gap: 2px; font-size: 14px; } .cm-hub-profile > div > span { color: #abc6d9; font-size: 11px; } .cm-hub-profile > i { color: #6bd6ff; margin-left: auto; } .cm-hub-blocks { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; } .cm-hub-video { position: relative; min-height: 175px; background: linear-gradient(135deg,#116487,#183551); border-radius: 8px; overflow: hidden; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; } .cm-hub-video > i { font-size: 22px; } .cm-hub-video > strong { position: relative; z-index: 1; font-size: 13px; } .cm-video-waves { position: absolute; inset: 30px 22px 38px; display: flex; align-items: center; justify-content: center; gap: 8px; } .cm-video-waves span { width: 13px; height: 65%; background: #64d7f9; border-radius: 8px; opacity: .5; transform: scaleY(.5); } .cm-video-waves span:nth-child(2n) { height: 90%; } .cm-video-waves span:nth-child(3n) { height: 40%; } .cm-hub-schedule { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: #1d3045; border-radius: 8px; } .cm-hub-schedule > i { color: #82d9f7; font-size: 18px; } .cm-hub-schedule strong { font-size: 13px; } .cm-hub-schedule > span { font-size: 10px; color: #adc6d8; line-height: 1.6; } .cm-hub-schedule > div { display: flex; gap: 6px; margin-top: auto; } .cm-hub-schedule b { width: 18px; height: 18px; border-radius: 4px; background: #31506c; } .cm-hub-schedule b:nth-child(2),.cm-hub-schedule b:nth-child(4) { background: #63c6ef; } .cm-hub-resource { display: flex; align-items: center; gap: 10px; padding: 16px 12px; font-size: 11px; background: #1b3044; border-radius: 8px; } .cm-hub-resource > i { color: #8ddaff; } .cm-hub-resource > i:last-child { margin-left: auto; } .cm-link-stories { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; } .cm-link-story { position: relative; border-radius: 16px; overflow: hidden; padding: 44px 44px 24px; background: #132e45; } .cm-link-story .cm-product-copy h2 { font-size: 34px; } .cm-link-story .cm-product-copy > p { font-size: 16px; min-height: 86px; margin-bottom: 12px; } .cm-public-design .cm-link-story .cm-text-link { color: #8bd8ff; } .cm-link-story > .cm-preview-note { color: #b0cada; justify-content: center; } .cm-view-story { background: #14283e; } .cm-bio-scene { min-height: 330px; position: relative; display: grid; place-items: center; padding-top: 32px; } .cm-bio-phone { width: 240px; background: #13273b; border-radius: 24px; padding: 12px; color: #e0f2ff; box-shadow: 0 20px 40px #2a63812b; transform: rotate(-5deg); } .cm-public-design .cm-bio-phone .cm-demo-bio > div > div { background: #13273b; color: #cfe9fb; border: 0; padding: 8px; box-shadow: none; } .cm-public-design .cm-bio-phone .cm-demo-bio [class*="bg-"] { background: #1d3a52; } .cm-public-design .cm-bio-phone .cm-demo-bio [class*="border-"] { border-color: #376079; } .cm-bio-domain { position: absolute; z-index: 2; top: 52px; right: -8px; font-size: 13px; padding: 12px 18px; color: #fff; background: #214b72; border-radius: 8px; box-shadow: 0 10px 24px #214b7226; } .cm-bio-domain strong { font-weight: 700; } .cm-bio-social { position: absolute; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; color: #fff; font-size: 24px; box-shadow: 0 12px 24px #214b7226; } .cm-bio-social-one { left: 12px; top: 140px; background: #6441a5; transform: rotate(-12deg); } .cm-bio-social-two { right: 6px; bottom: 46px; background: #255577; transform: rotate(10deg); } .cm-view-scene { padding-top: 32px; min-height: 362px; } .cm-app-demo { max-width: 390px; margin-inline: auto; } .cm-smart-link { display: flex; gap: 12px; align-items: center; padding: 16px 20px; border-radius: 8px; font-size: 12px; background: #13273b; color: #c5e4f8; box-shadow: 0 8px 24px #24577512; } .cm-smart-link > i:last-child { margin-left: auto; } .cm-app-route { position: relative; height: 54px; display: grid; place-items: end center; padding-bottom: 5px; color: #75cefa; } .cm-app-route::before { content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 40px; background: #3b607a; } .cm-app-route > span { position: absolute; top: 0; left: calc(50% - 2px); height: 13px; width: 5px; border-radius: 3px; background: #029bda; } .cm-app-phone { width: 255px; padding: 12px; border-radius: 20px; background: #13273b; box-shadow: 0 18px 40px #20557526; color: #d6eaff; margin-inline: auto; } .cm-phone-camera { width: 48px; height: 4px; background: #517086; border-radius: 10px; margin: 0 auto 10px; } .cm-app-video { height: 95px; background: #213f56; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .cm-app-video > i { color: #d63744; font-size: 32px; } .cm-app-video > span { font-size: 10px; color: #c2ddf0; } .cm-app-phone > strong { font-size: 12px; display: block; margin: 12px 0 4px; } .cm-app-phone > p { font-size: 10px; color: #b3cbdd; } .cm-app-open { display: flex; gap: 7px; align-items: center; margin-top: 12px; padding: 9px; background: #183d39; border-radius: 6px; color: #9ce6cc; font-size: 9px; } .cm-widget-story { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items: center; padding: 72px 0 0; } .cm-rank-demo { border-radius: 12px; padding: 24px; background: #112c45; color: #fff; box-shadow: 0 24px 48px #214b7226; } .cm-rank-header { display: flex; align-items: center; gap: 12px; font-size: 14px; margin-bottom: 20px; } .cm-rank-header > i { color: #86dfff; font-size: 20px; } .cm-rank-signal { margin-left: auto; width: 7px; height: 7px; background: #70e3bb; border-radius: 50%; } .cm-rank-row { position: relative; isolation: isolate; overflow: hidden; display: flex; gap: 12px; align-items: center; min-height: 62px; padding: 12px; border-top: 1px solid #355066; font-size: 13px; } .cm-rank-position { color: #84cef0; width: 16px; font-variant-numeric: tabular-nums; } .cm-rank-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #2b5c7b; color: #b4eaff; } .cm-rank-count { display: flex; gap: 10px; align-items: center; margin-left: auto; font-variant-numeric: tabular-nums; } .cm-rank-count > i { color: #85cde9; } .cm-rank-bar { position: absolute; z-index: -1; height: 100%; width: 100%; left: 0; bottom: 0; background: linear-gradient(90deg,#197db83d,#197db808); transform: scaleX(var(--rank)); transform-origin: left; } .cm-public-design .cm-widget-scene .cm-preview-note { justify-content: center; color: #acc1d3; } .cm-public-design .cm-widget-story .cm-text-link { color: #8bd8ff; } .cm-public-design .cm-azure-home .cm-network-section { color: var(--cm-ink); padding-block: 160px 140px; border: 0; background: #0e2b43; clip-path: polygon(0 5%,100% 0,100% 95%,0 100%); margin-top: -35px; } .cm-public-design .cm-azure-home .cm-network-section .cm-section-heading h2 { font-size: clamp(34px,3.5vw,48px); } .cm-public-design .cm-azure-home .cm-network-section .cm-section-heading p { color: #b0cbdd; } .cm-public-design .cm-azure-home .cm-network-core { background: #154c70; border-color: #4484a3; } .cm-public-design .cm-azure-home .cm-network-orchestra .cm-network-outputs span { background: #173c56; border-color: #35546a; } .cm-public-design .cm-azure-home .cm-network-reset { border-color: #547a92; } .cm-public-design .cm-azure-home .cm-capabilities { border: 0; padding-top: 100px; } .cm-public-design .cm-azure-home .cm-capabilities .cm-section-heading h2 > span { color: #65ceff; } .cm-public-design .cm-azure-home .cm-capability-grid article { border-color: var(--cm-azure-line); } .cm-public-design .cm-azure-home .cm-capability-grid p { color: var(--cm-azure-text); } .cm-public-design .cm-azure-home .cm-capability-grid i { color: #71cfff; } .cm-public-design .cm-azure-home :is(.cm-plans-intro,.cm-pricing,.cm-pricing-more) { color: var(--cm-ink); } .cm-public-design .cm-azure-home .cm-plans-intro { padding-top: 96px; } .cm-public-design .cm-azure-home .cm-pricing-more { background: var(--cm-page); width: 100%; max-width: none; margin: 0; padding: 24px max(32px,calc((100% - 1248px)/2)) 64px; } .cm-public-design .cm-azure-home .cm-outcomes { border: 0; } .cm-public-design .cm-azure-home .cm-outcomes .cm-section-heading p,.cm-public-design .cm-azure-home .cm-outcome-grid p { color: var(--cm-azure-text); } .cm-public-design .cm-azure-home .cm-outcomes .cm-section-heading h2 > span,.cm-public-design .cm-azure-home .cm-outcome-grid i { color: #65ceff; } .cm-public-design .cm-azure-home .cm-outcome-grid article { border-color: var(--cm-azure-line); } .cm-public-design .cm-azure-home #reviews { color: var(--cm-ink); background: var(--cm-page); } .cm-public-design .cm-azure-home .cm-finale { color: var(--cm-ink); background: #133d5b; border: 0; } .cm-public-design .cm-azure-home .cm-finale-light { background: linear-gradient(130deg,transparent 30%,#117fb1aa 80%,#50cbef); transform: rotate(-15deg); } .cm-public-design .cm-azure-home .cm-finale-symbol span { border-color: #6bcafa55; } .cm-public-design .cm-azure-home .cm-finale .cm-button-primary { background: #214b72; color: #fff; } /* The catalog mirrors the same product-led compositions, with all seven previews. */ .cm-public-design .cm-azure-catalog .cm-page-hero { background: linear-gradient(120deg,#0b1019 35%,#133f60 75%,#175d80); padding-bottom: 84px; } .cm-public-design .cm-azure-catalog .cm-page-hero .gradient-text { color: #65ceff; } .cm-public-design .cm-azure-catalog .cm-page-hero p { color: var(--cm-azure-text); } .cm-public-design .cm-azure-catalog .cm-feature-link > div { background: #13273b; border-color: #294358; color: #e4f3ff; } .cm-public-design .cm-azure-catalog .cm-feature-link > div { display: flex; flex-direction: column; } .cm-public-design .cm-azure-catalog .cm-catalog-preview { flex-shrink: 0; } .cm-public-design .cm-azure-catalog .cm-catalog-content { flex: 1; min-width: 0; height: auto; } .cm-public-design .cm-azure-catalog .cm-catalog-note { color: #b0cada; margin: 0 0 18px; font-size: 11px; } .cm-public-design .cm-azure-catalog .cm-catalog-count { padding-top: 12px; } .cm-public-design .cm-azure-catalog .cm-feature-link p { color: var(--cm-azure-text); } .cm-public-design .cm-azure-catalog .cm-feature-link [class*="text-"][class*="-500"] { color: #83d4ff; } .cm-public-design .cm-azure-catalog .cm-feature-link .cm-catalog-preview { background: #17364f; color: var(--cm-ink); height: 250px; border: 0; } .cm-public-design .cm-azure-catalog .cm-catalog-preview > .cm-demo-ui { background: #122337; border-radius: 12px; padding: 12px; transform: translateY(12px) rotate(-2deg); } .cm-public-design .cm-azure-catalog .cm-catalog-preview .cm-demo-hub { padding: 0; } .cm-public-design .cm-azure-catalog .cm-catalog-preview .cm-demo-viewinapp { background: transparent; } .cm-public-design .cm-azure-catalog .cm-catalog-preview .cm-demo-widget { background: transparent; padding: 0; } .cm-public-design .cm-azure-catalog .cm-feature-link:last-child { grid-column: span 4; } .cm-public-design .cm-azure-catalog .cm-feature-link:last-child > div { display: grid; grid-template-columns: 1fr 1fr; align-items: center; } .cm-public-design .cm-azure-catalog .cm-feature-link:last-child .cm-catalog-preview { height: 100%; min-height: 320px; display: grid; align-items: center; } /* Explanatory scenes use the existing visibility, pause and reduced-motion state. */ @keyframes cm-azure-flow { 0%,100% { transform: translate3d(0,0,0) rotate(-26deg); } 50% { transform: translate3d(-9%,8%,0) rotate(-18deg); } } @keyframes cm-azure-wave { 0%,100% { transform: scaleY(.4); opacity: .4; } 50% { transform: scaleY(1); opacity: .85; } } @keyframes cm-app-packet { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(35px); opacity: 0; } } @keyframes cm-app-confirm { 0%,30% { opacity: .35; } 45%,100% { opacity: 1; } } @keyframes cm-rank-fill { from { transform: scaleX(.15); } to { transform: scaleX(var(--rank)); } } @keyframes cm-azure-bob { 0%,100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-9px) rotate(-3deg); } } @media (prefers-reduced-motion:no-preference) { .cm-public-design .cm-launch-hero.cm-ambient-active .cm-azure-field > span { animation: cm-azure-flow 16s var(--cm-ease-in-out) infinite; } .cm-public-design .cm-launch-hero.cm-ambient-active .cm-azure-field > span:nth-child(2) { animation-delay: -5s; animation-duration: 20s; } .cm-public-design .cm-launch-hero.cm-ambient-active .cm-azure-field > span:nth-child(3) { animation-delay: -10s; animation-duration: 24s; } .cm-public-design .cm-demo-hub.cm-ambient-active .cm-video-waves span { animation: cm-azure-wave 2.4s ease-in-out infinite; } .cm-public-design .cm-demo-hub.cm-ambient-active .cm-video-waves span:nth-child(2n) { animation-delay: -.7s; } .cm-public-design .cm-demo-hub.cm-ambient-active .cm-video-waves span:nth-child(3n) { animation-delay: -1.4s; } .cm-public-design .cm-demo-viewinapp.cm-ambient-active .cm-app-route > span { animation: cm-app-packet 2.4s linear infinite; } .cm-public-design .cm-demo-viewinapp.cm-ambient-active .cm-app-open { animation: cm-app-confirm 2.4s var(--cm-ease) infinite; } .cm-public-design .cm-demo-widget.cm-ambient-active .cm-rank-bar { animation: cm-rank-fill 1.2s var(--cm-ease) both; } .cm-public-design .cm-bio-story.cm-ambient-active .cm-bio-phone { animation: cm-azure-bob 7s ease-in-out infinite; } } .cm-public-design.cm-document-hidden :is(.cm-azure-field > span,.cm-video-waves span,.cm-app-route > span,.cm-app-open,.cm-rank-bar,.cm-bio-phone), .cm-public-design.cm-motion-paused :is(.cm-azure-field > span,.cm-video-waves span,.cm-app-route > span,.cm-app-open,.cm-rank-bar,.cm-bio-phone) { animation-play-state: paused !important; } @media (hover:hover) and (pointer:fine) { .cm-public-design .cm-azure-home .cm-product-paths a:hover { color: #8cdeff; } .cm-public-design .cm-azure-home .cm-launch-copy .cm-button-secondary:hover { background: #18374e; } .cm-public-design .cm-azure-catalog .cm-feature-link:hover > div { border-color: #68b8e0; } .cm-public-design .cm-azure-catalog .cm-feature-link:hover .cm-catalog-preview > .cm-demo-ui { transform: translateY(5px) rotate(0); } .cm-public-design .cm-azure-catalog .cm-catalog-preview > .cm-demo-ui { transition: transform 250ms var(--cm-ease); } } @media (max-width:1100px) { .cm-hub-scene::before { inset-inline: 0; } .cm-public-design .cm-azure-home .cm-launch-grid { gap: 28px; } .cm-public-design .cm-azure-home .cm-showcase { margin-right: 0; } .cm-public-design .cm-azure-home .cm-launch-copy h1 { font-size: clamp(42px,5.8vw,64px); } .cm-public-design .cm-azure-home .cm-explorer-layout,.cm-hub-story { gap: 40px; } .cm-link-story { padding: 32px 28px 20px; } .cm-bio-domain { right: -12px; } .cm-bio-social-one { left: -8px; } .cm-bio-social-two { right: -8px; } } @media (max-width:767px) { .cm-public-design .cm-azure-home .cm-launch-hero { padding-top: 126px; } .cm-public-design .cm-azure-home .cm-launch-grid { grid-template-columns: 1fr; gap: 32px; min-height: 0; } .cm-public-design .cm-azure-home .cm-launch-copy { padding-bottom: 0; } .cm-public-design .cm-azure-home .cm-launch-copy h1 { font-size: clamp(42px,10.3vw,64px); max-width: 14ch; } .cm-public-design .cm-azure-home .cm-launch-copy > p { font-size: 15px; } .cm-public-design .cm-azure-home .cm-launch-copy .cm-actions { gap: 8px; } .cm-public-design .cm-azure-home .cm-launch-copy .cm-button { width: auto; padding: 12px 14px; font-size: 12px; } .cm-public-design .cm-azure-home .cm-showcase { margin: 12px 0 0; padding-bottom: 32px; } .cm-public-design .cm-azure-home .cm-showcase-shell { transform: none; } .cm-public-design .cm-azure-home .cm-floating-message { left: 12px; bottom: 4px; padding: 12px 16px; } .cm-public-design .cm-azure-home .cm-floating-platforms { right: 12px; top: -20px; } .cm-azure-field::before { height: 380px; top: -265px; width: 180%; left: -30%; } .cm-azure-field > span { top: 350px; right: -125%; width: 170%; height: 550px; } .cm-azure-field > span:nth-child(2) { top: 680px; right: -105%; width: 160%; } .cm-azure-field > span:nth-child(3) { display: none; } .cm-public-design .cm-azure-home .cm-live-proof { margin-top: 24px; padding-block: 24px; gap: 20px; } .cm-public-design .cm-azure-home .cm-live-proof strong { font-size: 23px; } .cm-public-design .cm-azure-home .cm-product-paths > div { justify-content: center; gap: 0 18px; padding-block: 16px; } .cm-public-design .cm-azure-home .cm-product-paths a { font-size: 11px; gap: 6px; } .cm-public-design .cm-azure-home .cm-product-paths a > i { font-size: 14px; } .cm-public-design .cm-azure-home .cm-explorer { padding-block: 64px 80px; } .cm-public-design .cm-azure-home .cm-explorer-heading { margin-bottom: 24px; } .cm-public-design .cm-azure-home .cm-explorer-heading h2 { font-size: 34px; } .cm-public-design .cm-azure-home .cm-explorer-layout { gap: 28px; } .cm-public-design .cm-azure-home .cm-explorer-stage { transform: none; } .cm-public-design .cm-azure-home .cm-explorer-option button[aria-selected=true] { border-bottom-color: #52c6ff; } .cm-public-design .cm-azure-home .cm-product-stories { padding-block: 44px 96px; } .cm-hub-story { grid-template-columns: 1fr; gap: 24px; padding-block: 24px 56px; } .cm-hub-scene { padding: 16px 0; } .cm-hub-scene::before { inset: 0 0 12px; transform: rotate(-3deg); } .cm-hub-demo { padding: 16px; } .cm-hub-blocks { gap: 8px; } .cm-hub-video { min-height: 165px; padding: 12px; } .cm-hub-schedule { padding: 12px; } .cm-hub-resource { padding: 12px 8px; gap: 6px; font-size: 10px; } .cm-link-stories { grid-template-columns: 1fr; gap: 24px; } .cm-link-story { padding: 28px 24px 20px; } .cm-link-story .cm-product-copy > p { min-height: 0; } .cm-public-design .cm-product-copy h2 { font-size: 32px; } .cm-public-design .cm-product-copy > p { font-size: 15px; } .cm-bio-domain { right: -10px; font-size: 11px; padding: 10px 12px; } .cm-bio-social { width: 42px; height: 42px; border-radius: 10px; font-size: 19px; } .cm-bio-social-one { left: -10px; } .cm-bio-social-two { right: -10px; } .cm-widget-story { grid-template-columns: 1fr; gap: 24px; padding-top: 56px; } .cm-rank-demo { padding: 18px; } .cm-public-design .cm-azure-home .cm-network-section { padding-block: 96px; clip-path: polygon(0 2%,100% 0,100% 98%,0 100%); } .cm-public-design .cm-azure-home .cm-capabilities { padding-top: 64px; } .cm-public-design .cm-azure-home .cm-plans-intro { padding-top: 64px; } .cm-public-design .cm-azure-home .cm-pricing-more { padding-inline: 20px; } .cm-public-design .cm-azure-catalog .cm-page-hero { padding-bottom: 56px; } .cm-public-design .cm-azure-catalog .cm-feature-link:last-child { grid-column: auto; } .cm-public-design .cm-azure-catalog .cm-feature-link:last-child > div { display: block; } .cm-public-design .cm-azure-catalog .cm-feature-link:last-child .cm-catalog-preview { min-height: 0; height: 250px; } } @media (prefers-reduced-motion:reduce) { .cm-public-design :is(.cm-azure-field > span,.cm-video-waves span,.cm-app-route > span,.cm-app-open,.cm-rank-bar,.cm-bio-phone) { animation: none; } .cm-public-design .cm-azure-catalog .cm-catalog-preview > .cm-demo-ui { transition: none; } } /* Source: t3/palette.css */ /* /t3 only: vivid azure actions, neutral dark surfaces, contrasting product scenes. The existing geometry and motion remain shared with the main home. */ .cm-public-design.cm-public-t3 { --primary: 198 100% 55%; --primary-foreground: 220 40% 7%; --background: 225 16% 6%; --card: 225 14% 11%; --muted: 225 12% 15%; --border: 225 12% 23%; --input: 225 12% 36%; --cm-brand: #1abaff; --cm-link: #58ccff; --cm-focus: #8bdcff; --cm-page: #0d0e12; --cm-panel: #181a20; --cm-panel-raised: #22252e; --cm-azure: #1abaff; --cm-azure-ink: #f5f5f8; --cm-azure-text: #bdbdc9; --cm-azure-page: #0d0e12; --cm-azure-line: #343541; --t3-coral: #ff997f; --t3-lilac: #b3a0ff; --t3-amber: #f5c375; } .cm-public-t3 .cm-azure-home .cm-launch-hero, .cm-public-t3 .cm-azure-home .cm-explorer { background: var(--cm-page); } .cm-public-t3 .cm-azure-home .cm-headline-accent { color: var(--cm-brand); } .cm-public-t3 .cm-azure-home .cm-launch-copy > p, .cm-public-t3 .cm-azure-home .cm-live-proof span, .cm-public-t3 .cm-azure-home .cm-hero-platform-line { color: var(--cm-azure-text); } .cm-public-t3 .cm-azure-field::before { background: linear-gradient(110deg,#131520 5%,#22203b 40%,#463f85 72%,#087ead); } .cm-public-t3 .cm-azure-field > span { background: linear-gradient(115deg,#192a40,#119fda 36%,#433b82 78%); } .cm-public-t3 .cm-azure-field > span:nth-child(2) { background: linear-gradient(105deg,#302442,#965580 48%,#d17c68); opacity: .72; } .cm-public-t3 .cm-azure-field > span:nth-child(3) { background: linear-gradient(95deg,#242035,#5e477c 50%,#9b6650); opacity: .6; } .cm-public-t3 .cm-azure-home .cm-showcase-shell { background: #15171e; border-color: #474553; } .cm-public-t3 .cm-azure-home .cm-floating-message { background: #23202e; } .cm-public-t3 .cm-azure-home .cm-floating-message div > span { color: #c4bbd1; } .cm-public-t3 .cm-azure-home .cm-floating-platforms { background: #252131; } .cm-public-t3 .cm-azure-home .cm-live-proof { border-color: var(--cm-azure-line); } .cm-public-t3 .cm-azure-home .cm-product-paths { background: #17171e; border-color: var(--cm-azure-line); } .cm-public-t3 .cm-azure-home .cm-product-paths a { color: #c5c4d0; } .cm-public-t3 .cm-azure-home .cm-product-paths a:nth-child(3n+1) > i { color: var(--cm-brand); } .cm-public-t3 .cm-azure-home .cm-product-paths a:nth-child(3n+2) > i { color: var(--t3-lilac); } .cm-public-t3 .cm-azure-home .cm-product-paths a:nth-child(3n) > i { color: var(--t3-coral); } .cm-public-t3 .cm-azure-home .cm-explorer-option { border-color: var(--cm-azure-line); } .cm-public-t3 .cm-azure-home .cm-explorer-option button { color: #c5c4d0; } .cm-public-t3 .cm-azure-home .cm-explorer-option:nth-child(2) button > i:first-child { color: var(--t3-lilac); } .cm-public-t3 .cm-azure-home .cm-explorer-option:nth-child(3) button > i:first-child { color: var(--t3-amber); } .cm-public-t3 .cm-azure-home .cm-explorer-stage .cm-window-bar { background: #2b273b; } .cm-public-t3 .cm-azure-home .cm-product-stories, .cm-public-t3 .cm-product-stories::before { background: #15141c; } .cm-public-t3 .cm-hub-scene::before { background: linear-gradient(125deg,#5b448d,#c87571); } .cm-public-t3 .cm-story-browser { background: #1c1926; box-shadow: 0 24px 44px #00000033; } .cm-public-t3 .cm-hub-video { background: linear-gradient(135deg,#634284,#30304e); } .cm-public-t3 .cm-video-waves span { background: #c8a2ff; } .cm-public-t3 .cm-hub-schedule { background: #30253b; } .cm-public-t3 .cm-hub-schedule > i { color: var(--t3-coral); } .cm-public-t3 .cm-hub-schedule b { background: #544257; } .cm-public-t3 .cm-hub-schedule b:nth-child(2), .cm-public-t3 .cm-hub-schedule b:nth-child(4) { background: var(--t3-coral); } .cm-public-t3 .cm-hub-resource { background: #292433; } .cm-public-t3 .cm-hub-resource > i { color: var(--t3-lilac); } .cm-public-t3 .cm-link-story { background: #282037; } .cm-public-t3 .cm-view-story { background: #302323; } .cm-public-t3 .cm-link-story .cm-product-copy > p { color: #d0c2df; } .cm-public-t3 .cm-view-story .cm-product-copy > p { color: #dcc4c0; } .cm-public-t3 .cm-link-story > .cm-preview-note { color: #c7bbd5; } .cm-public-t3 .cm-view-story > .cm-preview-note { color: #d4bfba; } .cm-public-t3 .cm-bio-phone, .cm-public-t3 .cm-bio-phone .cm-demo-bio > div > div { background: #1d1828; color: #e4ddf1; } .cm-public-t3 .cm-bio-phone .cm-demo-bio [class*="bg-"] { background: #342840; } .cm-public-t3 .cm-bio-phone .cm-demo-bio [class*="border-"] { border-color: #564363; } .cm-public-t3 .cm-bio-domain { background: #7050b0; } .cm-public-t3 .cm-smart-link { background: #422d2e; color: #f4d6ca; } .cm-public-t3 .cm-app-phone { background: #211c21; color: #f4e9e7; } .cm-public-t3 .cm-app-video { background: #39272b; } .cm-public-t3 .cm-app-route { color: var(--t3-coral); } .cm-public-t3 .cm-app-route::before { background: #8e625c; } .cm-public-t3 .cm-app-route > span { background: var(--t3-coral); } .cm-public-t3 .cm-rank-bar { background: linear-gradient(90deg,#d79d3b38,#d79d3b05); } .cm-public-t3 .cm-rank-header > i, .cm-public-t3 .cm-rank-position, .cm-public-t3 .cm-rank-count > i { color: var(--t3-amber); } .cm-public-t3 .cm-rank-avatar { background: #59432e; color: #ffe0a8; } .cm-public-t3 .cm-azure-home .cm-network-section { background: #1b1928; } .cm-public-t3 .cm-azure-home .cm-network-section .cm-section-heading p { color: #c5bfd7; } .cm-public-t3 .cm-azure-home .cm-network-core { background: #27324b; border-color: #6a84aa; } .cm-public-t3 .cm-azure-home .cm-network-orchestra .cm-network-outputs span { background: #292537; border-color: #484158; } .cm-public-t3 .cm-azure-home .cm-network-reset { border-color: #736789; } .cm-public-t3 .cm-azure-home .cm-capability-grid article:nth-child(3n+2) > i, .cm-public-t3 .cm-azure-home .cm-outcome-grid article:nth-child(2) > i { color: var(--t3-lilac); } .cm-public-t3 .cm-azure-home .cm-capability-grid article:nth-child(3n) > i, .cm-public-t3 .cm-azure-home .cm-outcome-grid article:nth-child(4) > i { color: var(--t3-coral); } .cm-public-t3 .cm-azure-home .cm-outcome-grid article:nth-child(3) > i { color: var(--t3-amber); } .cm-public-t3 .cm-azure-home .cm-finale { background: #1b1b2c; } .cm-public-t3 .cm-azure-home .cm-finale-light { background: linear-gradient(130deg,transparent 30%,#61438c99 65%,#cd827577); } /* Bright azure needs dark ink, including hover, for readable action labels. */ .cm-public-design.cm-public-t3 .cm-button-primary, .cm-public-design.cm-public-t3 .cm-azure-home .cm-finale .cm-button-primary, .cm-public-design.cm-public-t3 .cm-motion-control, .cm-public-design.cm-public-t3 .bg-primary, .cm-public-design.cm-public-t3 .cm-chat-command { background: var(--cm-brand); color: #07151e; } .cm-public-t3 .cm-chat-command i { color: #153e50; } .cm-public-design.cm-public-t3 .cm-button-primary:hover, .cm-public-design.cm-public-t3 .cm-public-nav .bg-primary:hover { background: #58ccff; color: #07151e; } .cm-public-t3 .cm-azure-home ::selection { background: #1abaff; color: #07151e; } /* Saturated platform identities; dark neutral surfaces keep the colors distinct. */ .cm-public-design.cm-public-t3 { --cm-brand: #00baff; --cm-link: #00c4ff; --cm-focus: #00c4ff; --social-telegram: #00aeef; --social-youtube: #ff0033; --social-kick: #53fc18; --social-twitch: #9146ff; --social-discord: #5865f2; --social-instagram: #ff0080; --social-tiktok: #25f4ee; --social-minecraft: #62c339; } .cm-public-t3 .cm-azure-field::before { background: linear-gradient(110deg,#10131c 8%,#123a6b 45%,#007fff 75%,#00baff); } .cm-public-t3 .cm-azure-field > span { background: linear-gradient(115deg,#003e78,#00baff 40%,#0071fa 80%); } .cm-public-t3 .cm-azure-field > span:nth-child(2) { background: linear-gradient(105deg,#261044,#9146ff 50%,#ff0080); opacity: .95; } .cm-public-t3 .cm-azure-field > span:nth-child(3) { background: linear-gradient(95deg,#331423,#ff0033 58%,#ff4c00); opacity: .85; } .cm-public-design.cm-public-t3 .cm-public-nav { background: linear-gradient(120deg,#ffffff14,#ffffff04),#10151d70; border: 1px solid #ffffff30; border-top-color: #ffffff52; -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); box-shadow: inset 0 1px 0 #ffffff12,0 12px 36px #00000024; } .cm-public-design.cm-public-t3.cm-is-scrolled .cm-public-nav { background: linear-gradient(120deg,#ffffff12,#ffffff03),#10151da8; border-color: #ffffff30; box-shadow: inset 0 1px 0 #ffffff16,0 12px 36px #00000038; } .cm-public-t3 .cm-azure-home .cm-floating-message { background: #062b42; border: 1px solid #00aeef80; } .cm-public-t3 .cm-azure-home .cm-floating-platforms { background: #171720; } .cm-public-t3 .cm-azure-home .cm-showcase-shell { border-color: #00baff66; } .cm-public-t3 .cm-azure-home .cm-product-paths a > i, .cm-public-t3 .cm-azure-home .cm-explorer-option button > i:first-child, .cm-public-t3 .cm-azure-home .cm-capability-grid article > i, .cm-public-t3 .cm-azure-home .cm-outcome-grid article > i { color: var(--cm-brand); } .cm-public-t3 .cm-azure-home .cm-explorer-stage .cm-window-bar { background: #19252f; } .cm-public-t3 .cm-azure-home .cm-product-stories, .cm-public-t3 .cm-product-stories::before { background: #121318; } .cm-public-t3 .cm-hub-scene::before { background: linear-gradient(125deg,#9146ff,#6200ed); } .cm-public-t3 .cm-hub-video { background: linear-gradient(135deg,#7725e5,#4d00b8); } .cm-public-t3 .cm-video-waves span { background: #ffffff; opacity: .55; } .cm-public-t3 .cm-hub-video > .fa-twitch { color: #fff; } .cm-public-t3 .cm-hub-schedule { background: #1b2736; } .cm-public-t3 .cm-hub-schedule > i { color: var(--cm-brand); } .cm-public-t3 .cm-hub-schedule b:nth-child(2), .cm-public-t3 .cm-hub-schedule b:nth-child(4) { background: var(--cm-brand); } .cm-public-t3 .cm-hub-resource { background: #20212b; } .cm-public-t3 .cm-hub-resource > i { color: var(--cm-brand); } .cm-public-t3 .cm-bio-story { background: #171820; } .cm-public-t3 .cm-view-story { background: #271217; } .cm-public-t3 .cm-bio-phone, .cm-public-t3 .cm-bio-phone .cm-demo-bio > div > div { background: #171820; } .cm-public-t3 .cm-bio-phone .cm-demo-bio [class*="bg-"] { background: #22232e; } .cm-public-t3 .cm-bio-domain { background: #0078a8; } .cm-public-t3 .cm-bio-social-one { background: #7725e5; } .cm-public-t3 .cm-bio-social-two { background: linear-gradient(35deg,#ffb000,#ff003b 45%,#c000ff); } .cm-public-t3 .cm-bio-social i { color: white; } .cm-public-t3 .cm-smart-link { background: #43131f; color: #fff; border: 1px solid #ff00334d; } .cm-public-t3 .cm-app-phone { background: #181317; } .cm-public-t3 .cm-app-video { background: #4b0c1b; } .cm-public-t3 .cm-app-route { color: #ff0033; } .cm-public-t3 .cm-app-route::before { background: #ff003380; } .cm-public-t3 .cm-app-route > span { background: #ff0033; } .cm-public-t3 .cm-rank-demo { background: #172219; } .cm-public-t3 .cm-rank-bar { background: linear-gradient(90deg,#53fc1840,#53fc1804); } .cm-public-t3 .cm-rank-header > i, .cm-public-t3 .cm-rank-position, .cm-public-t3 .cm-rank-count > i { color: #53fc18; } .cm-public-t3 .cm-rank-avatar { background: #234b17; color: #53fc18; } .cm-public-t3 .cm-azure-home .cm-network-section { background: #15161f; } .cm-public-t3 .cm-azure-home .cm-network-core { background: #006fac; border: 1px solid #00baff; } .cm-public-t3 .cm-azure-home .cm-network-orchestra .cm-network-outputs span { background: #1e222c; } .cm-public-t3 .cm-azure-home .cm-finale { background: #111e30; } .cm-public-t3 .cm-azure-home .cm-finale-light { background: linear-gradient(130deg,transparent 30%,#007affb3 70%,#00baff); } .cm-public-t3 .cm-network-orchestra { aspect-ratio: 680/560; } .cm-public-t3 .cm-network-orchestra .cm-network-inputs { width: 27%; } .cm-public-t3 .cm-network-orchestra .cm-network-node { height: 12.5%; flex-direction: row; align-items: center; gap: 10px; color: #f5f5f8; } .cm-public-t3 .cm-network-orchestra .cm-social-mark { width: 40px; height: 40px; display: grid; place-items: center; flex-shrink: 0; border-radius: 10px; background: #232530; } .cm-public-t3 .cm-network-orchestra .cm-social-mark :is(i,svg) { width: 24px; height: 24px; border-radius: 0; background: none; box-shadow: none; font-size: 24px; } .cm-public-t3 .cm-platform-telegram { --provider: var(--social-telegram); } .cm-public-t3 .cm-platform-youtube { --provider: var(--social-youtube); } .cm-public-t3 .cm-platform-kick { --provider: var(--social-kick); } .cm-public-t3 .cm-platform-twitch { --provider: var(--social-twitch); } .cm-public-t3 .cm-platform-discord { --provider: var(--social-discord); } .cm-public-t3 .cm-platform-instagram { --provider: var(--social-instagram); } .cm-public-t3 .cm-platform-tiktok { --provider: var(--social-tiktok); } .cm-public-t3 .cm-platform-minecraft { --provider: var(--social-minecraft); } .cm-public-t3 .cm-social-mark { color: var(--provider); } .cm-public-t3 .cm-network-node[aria-pressed=true] .cm-social-mark { background: color-mix(in srgb,var(--provider) 20%,#15161f); outline: 1px solid var(--provider); } .cm-public-t3 :is(.cm-wire,.cm-packet).cm-wire-telegram { stroke: var(--social-telegram); } .cm-public-t3 :is(.cm-wire,.cm-packet).cm-wire-youtube { stroke: var(--social-youtube); } .cm-public-t3 :is(.cm-wire,.cm-packet).cm-wire-kick { stroke: var(--social-kick); } .cm-public-t3 :is(.cm-wire,.cm-packet).cm-wire-twitch { stroke: var(--social-twitch); } .cm-public-t3 :is(.cm-wire,.cm-packet).cm-wire-discord { stroke: var(--social-discord); } .cm-public-t3 :is(.cm-wire,.cm-packet).cm-wire-instagram { stroke: var(--social-instagram); } .cm-public-t3 :is(.cm-wire,.cm-packet).cm-wire-tiktok { stroke: var(--social-tiktok); } .cm-public-t3 :is(.cm-wire,.cm-packet).cm-wire-minecraft { stroke: var(--social-minecraft); } .cm-public-t3 .fa-brands.fa-telegram { color: var(--social-telegram); } .cm-public-t3 .fa-brands.fa-youtube { color: var(--social-youtube); } .cm-public-t3 .fa-brands.fa-twitch { color: var(--social-twitch); } .cm-public-t3 .fa-brands.fa-discord { color: var(--social-discord); } .cm-public-t3 .fa-brands.fa-instagram { color: #ff0080; } .cm-public-t3 .fa-brands.fa-tiktok { color: #25f4ee; text-shadow: 2px 1px #fe2c55; } .cm-public-t3 .cm-bio-social .fa-brands, .cm-public-t3 .cm-hub-video .fa-brands { color: white; } @media(max-width:767px) { .cm-public-t3 .cm-network-orchestra { aspect-ratio: auto; height: 560px; } .cm-public-t3 .cm-network-orchestra .cm-network-node { flex-direction: column; justify-content: center; gap: 3px; font-size: 10px; } .cm-public-t3 .cm-network-orchestra .cm-social-mark { width: 32px; height: 32px; } .cm-public-t3 .cm-network-orchestra .cm-social-mark :is(i,svg) { width: 22px; height: 22px; font-size: 22px; } } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .cm-public-design.cm-public-t3 .cm-public-nav { background: #151a24; } } @media(prefers-reduced-transparency:reduce) { .cm-public-design.cm-public-t3 .cm-public-nav { background: #151a24; backdrop-filter: none; -webkit-backdrop-filter: none; } } /* Keep provider meaning in the hero strip; a filled Telegram badge needs white ink. */ .cm-public-t3 .cm-azure-home .cm-hero-platform-line .fa-twitch { color: var(--social-twitch); } .cm-public-t3 .cm-azure-home .cm-hero-platform-line .fa-youtube { color: var(--social-youtube); } .cm-public-t3 .cm-azure-home .cm-hero-platform-line .fa-telegram { color: var(--social-telegram); } .cm-public-t3 .cm-chat-avatar .fa-brands.fa-telegram { color: #fff; } /* Source: t4/layout.css */ /* T4 keeps T3's saturated social colors and expands the tools-to-plans sequence. */ .cm-public-design.cm-public-t4 .cm-public-nav { top: 0; width: 100%; max-width: none; border-inline: 0; border-top: 0; border-radius: 0; } .cm-public-design.cm-public-t4 .cm-public-nav > div { max-width: var(--cm-width); width: 100%; margin-inline: auto; } .cm-public-t4 .cm-showcase .cm-preview-panels { height: 320px; min-height: 320px; } .cm-public-t4 .cm-showcase .cm-preview-panels > [role="tabpanel"] { height: 100%; overflow: hidden; } .cm-public-t4 .cm-showcase .cm-preview-panels > [role="tabpanel"] > .cm-demo-ui { height: 100%; display: flex; align-items: center; } .cm-public-t4 .cm-showcase .cm-preview-switch button { position: relative; } .cm-public-t4 .cm-showcase .cm-preview-switch button[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--cm-link); transform-origin: left; animation: cm-t4-tab-progress 5.5s linear; } @keyframes cm-t4-tab-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } .cm-public-t4 .cm-tool-plans { position: relative; background: linear-gradient(180deg,#0d0e12 0%,#101822 72%,#0d0e12 100%); padding-top: 24px; overflow: visible; } .cm-public-t4 .cm-t4-tools { padding-bottom: 64px; } .cm-public-t4 .cm-t4-tools-heading { max-width: 760px; margin-bottom: 44px; } .cm-public-t4 .cm-t4-tools-heading h2 { font-size: clamp(34px,4vw,54px); max-width: 19ch; margin-bottom: 20px; } .cm-public-t4 .cm-t4-tools-heading h2 span { color: var(--cm-brand); } .cm-public-t4 .cm-t4-tools-heading p { font-size: 18px; color: var(--cm-azure-text); line-height: 1.7; } .cm-public-t4 .cm-t4-product-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; } .cm-public-t4 .cm-t4-product { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 28px; border-radius: 16px; background: #191c24; border: 1px solid #343943; } .cm-public-t4 .cm-t4-product-telegram { grid-column: span 2; background: linear-gradient(125deg,#07384f,#11212f 75%); border-color: #008bc4; } .cm-public-t4 .cm-t4-product-viewinapp { background: linear-gradient(135deg,#34121c,#1c1a22); } .cm-public-t4 .cm-t4-product-creatorhub { background: linear-gradient(135deg,#261a3f,#1c1a22); } .cm-public-t4 .cm-t4-product-title { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .cm-public-t4 .cm-t4-product-title > i { font-size: 24px; color: var(--cm-brand); } .cm-public-t4 .cm-t4-product-title > .fa-youtube { color: var(--social-youtube); } .cm-public-t4 .cm-t4-product h3 { font-size: 22px; line-height: 1.25; margin: 0; } .cm-public-t4 .cm-t4-product h3 a { color: #f5f5f8; } .cm-public-t4 .cm-t4-product h3 a:hover { color: var(--cm-link); } .cm-public-t4 .cm-t4-product > p { font-size: 14px; color: #c2c6d0; line-height: 1.75; margin-bottom: 22px; } .cm-public-t4 .cm-t4-product-telegram > p { max-width: 52ch; color: #b9dce9; font-size: 16px; } .cm-public-t4 .cm-t4-product ul { display: grid; gap: 12px; padding: 0; margin: 0 0 22px; list-style: none; } .cm-public-t4 .cm-t4-product li { display: flex; align-items: baseline; gap: 10px; font-size: 13px; line-height: 1.6; color: #e0e3ec; } .cm-public-t4 .cm-t4-product li i { font-size: 11px; color: var(--cm-brand); } .cm-public-t4 .cm-t4-product > .cm-text-link { margin-top: auto; font-size: 13px; width: fit-content; } .cm-public-t4 .cm-t4-platforms { display: flex; gap: 22px; font-size: 25px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #ffffff20; } .cm-public-t4 .cm-t4-operations { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px 40px; padding: 48px 0 40px; margin-top: 24px; border-bottom: 1px solid #ffffff20; } .cm-public-t4 .cm-t4-operations > div { display: grid; grid-template-columns: 24px 1fr; gap: 10px 12px; align-content: start; } .cm-public-t4 .cm-t4-operations i { color: var(--cm-brand); padding-top: 3px; } .cm-public-t4 .cm-t4-operations h3 { font-size: 16px; line-height: 1.4; } .cm-public-t4 .cm-t4-operations p { grid-column: 2; font-size: 14px; line-height: 1.7; color: #bdbdc9; } .cm-public-t4 .cm-azure-home .cm-plans-intro { background: transparent; border: 0; padding-top: 20px; } .cm-public-t4 .cm-plans-intro .cm-section-heading { max-width: 1248px; padding-bottom: 24px; } .cm-public-t4 .cm-plans-intro h2 { max-width: 22ch; font-size: clamp(32px,3.5vw,48px); } .cm-public-t4 .cm-plans-intro p { max-width: 65ch; } .cm-public-t4 .cm-tool-plans .cm-pricing { background: transparent; padding-top: 16px; padding-bottom: 20px; overflow: visible; } .cm-public-t4 .cm-pricing > .max-w-7xl { max-width: 1248px; width: calc(100% - 64px); padding-inline: 0; } .cm-public-t4 .cm-pricing > div:first-child { padding-bottom: 40px; } .cm-public-t4 .cm-plan-card { padding-top: 40px; background: #171c25; min-width: 0; } .cm-public-t4 .cm-plan-card > .text-center { padding-top: 20px; } .cm-public-t4 .cm-plan-popular { border: 1px solid var(--cm-brand); background: linear-gradient(160deg,#0c3044,#171c25 50%); } .cm-public-t4 .cm-plan-popular > .absolute { position: absolute; top: 14px; left: 24px; padding: 0; transform: none; } .cm-public-t4 .cm-plan-card .monthly-price, .cm-public-t4 .cm-plan-card .yearly-price { font-size: clamp(30px,2.8vw,40px); letter-spacing: -.03em; } .cm-public-t4 .cm-plan-card > .space-y-4 { border-top: 1px solid #ffffff14; margin-inline: 24px; padding: 24px 0 28px; } .cm-public-t4 .cm-plan-card > .space-y-4 > div { font-size: 14px; line-height: 1.65; } .cm-public-t4 .cm-plan-card button[type=submit], .cm-public-t4 .cm-plan-card a { min-height: 46px; } .cm-public-t4 .cm-azure-home .cm-pricing-more { background: transparent; padding-top: 24px; padding-bottom: 80px; } @media(max-width:1100px) { .cm-public-t4 .cm-t4-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .cm-public-t4 .cm-t4-operations { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media(max-width:767px) { .cm-public-design.cm-public-t4 .cm-public-nav { width: 100%; } .cm-public-t4 .cm-showcase .cm-preview-panels { height: 360px; min-height: 360px; } .cm-public-t4 .cm-tool-plans { padding-top: 0; } .cm-public-t4 .cm-t4-tools { padding-bottom: 36px; } .cm-public-t4 .cm-t4-product-grid { grid-template-columns: 1fr; gap: 16px; } .cm-public-t4 .cm-t4-product-telegram { grid-column: auto; } .cm-public-t4 .cm-t4-product { padding: 24px; } .cm-public-t4 .cm-t4-operations { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; } .cm-public-t4 .cm-pricing > .max-w-7xl { width: calc(100% - 32px); } .cm-public-t4 .cm-pricing > div:first-child { column-gap: 8px; grid-template-columns: 1fr auto 1fr; } .cm-public-t4 .cm-pricing > div:first-child > div:last-child > span:last-child { display: block; width: fit-content; margin-top: 8px; font-size: 11px; } .cm-public-t4 .cm-plan-card .monthly-price,.cm-public-t4 .cm-plan-card .yearly-price { font-size: 40px; } } @media(prefers-reduced-motion:reduce) { .cm-public-t4 .cm-showcase .cm-preview-switch button[aria-selected="true"]::after { animation: none; transform: scaleX(1); } } /* Source: t8/scenes.css */ /* T7 styles isolated to the selected scenes. */ @font-face{font-family:Outfit;src:url(/assets-graphic/home/outfit-400.woff2) format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Outfit;src:url(/assets-graphic/home/outfit-600.woff2) format('woff2');font-weight:600;font-display:swap}@font-face{font-family:Outfit;src:url(/assets-graphic/home/outfit-700.woff2) format('woff2');font-weight:700;font-display:swap}.cm-public-design .t8-scenes{--night:#070f1c;--ink:#112e48;--white:#f3f8fa;--muted:#b2c5d6;--blue:#68cfff;--ease-out:cubic-bezier(.23,1,.32,1);--gutter:clamp(24px,6vw,112px);--space:clamp(100px,13vw,200px);color-scheme:dark;scrollbar-color:#537996 #070f1c}.cm-public-design .t8-scenes *{box-sizing:border-box}.cm-public-design .t8-scenes{margin:0;background:var(--night);color:var(--white);font:400 17px/1.6 Outfit,sans-serif;-webkit-font-smoothing:antialiased}.cm-public-design .t8-scenes ::selection{background:#79d6ff;color:#071929}.cm-public-design .t8-scenes a{color:inherit;text-decoration:none;text-underline-offset:5px}.cm-public-design .t8-scenes button{font:inherit;color:inherit;cursor:pointer;border:0}.cm-public-design .t8-scenes button,.cm-public-design .t8-scenes a,.cm-public-design .t8-scenes summary{-webkit-tap-highlight-color:transparent}.cm-public-design .t8-scenes button:disabled{opacity:.45;cursor:default}.cm-public-design .t8-scenes button:focus-visible,.cm-public-design .t8-scenes a:focus-visible,.cm-public-design .t8-scenes summary:focus-visible{outline:3px solid #39b9ef;outline-offset:5px}.cm-public-design .t8-scenes h1,.cm-public-design .t8-scenes h2,.cm-public-design .t8-scenes h3,.cm-public-design .t8-scenes h4,.cm-public-design .t8-scenes p{margin:0}.cm-public-design .t8-scenes h1,.cm-public-design .t8-scenes h2,.cm-public-design .t8-scenes h3{font-weight:600;letter-spacing:-.04em;line-height:1.06;text-wrap:balance}.cm-public-design .t8-scenes h2{font-size:clamp(40px,5.4vw,88px)}.cm-public-design .t8-scenes p{max-width:65ch}.cm-public-design .t8-scenes img{max-width:100%;height:auto}.cm-public-design .t8-scenes main{overflow:clip;position:relative}.cm-public-design .t8-scenes section[id]{scroll-margin-top:108px}.cm-public-design .t8-scenes [hidden]{display:none!important}.cm-public-design .t8-scenes .scene{width:100%;max-width:1600px;margin:auto;padding:var(--space) var(--gutter);position:relative}.cm-public-design .t8-scenes .scene-heading{display:grid;grid-template-columns:1.4fr 1fr;gap:8%;align-items:end;margin-bottom:88px}.cm-public-design .t8-scenes .scene-heading p,.cm-public-design .t8-scenes .bio-copy p{font-size:18px;color:var(--muted);max-width:38ch}.cm-public-design .t8-scenes .scene-heading .t7-button{margin-top:24px}.cm-public-design .t8-scenes .demo-label{margin:28px auto 0;text-align:center;font-size:12px;letter-spacing:.02em;color:var(--muted)}.cm-public-design .t8-scenes .world{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--night)}.cm-public-design .t8-scenes .world>div{position:absolute}.cm-public-design .t8-scenes .world-base,.cm-public-design .t8-scenes .world-blue,.cm-public-design .t8-scenes .world-light,.cm-public-design .t8-scenes .world-night{inset:0}.cm-public-design .t8-scenes .world-base{background:radial-gradient(ellipse at 62% 28%,#173b58 0,transparent 60%),#070f1c}.cm-public-design .t8-scenes .world-blue{background:radial-gradient(ellipse at 40% 60%,#116c94,#0a2341 80%);opacity:0}.cm-public-design .t8-scenes .world-light{background:radial-gradient(ellipse at 75% 30%,#f4fafb,#bbdce7);opacity:0}.cm-public-design .t8-scenes .world-night{background:#070f1c;opacity:0}.cm-public-design .t8-scenes .world-orbit{width:120vw;height:120vw;border:1px solid #8bdfff19;border-radius:50%;left:12vw;top:-66vw;transform:rotate(-20deg)}.cm-public-design .t8-scenes .orbit-two{width:160vw;height:160vw;left:-60vw;top:-30vw}.cm-public-design .t8-scenes .world-signal{height:90vh;width:1px;background:linear-gradient(transparent,#92dfff65,transparent);left:18%;top:30%;transform:rotate(27deg)}.cm-public-design .t8-scenes .t7-nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 3.5vw;transition:background 200ms ease,border-color 200ms ease;border-bottom:1px solid transparent}.cm-public-design .t8-scenes .t7-nav.scrolled{background:#070f1cf0;border-color:#ffffff12}.cm-public-design .t8-scenes .brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:600;letter-spacing:-.035em}.cm-public-design .t8-scenes .brand img{width:32px;height:32px}.cm-public-design .t8-scenes .t7-nav nav,.cm-public-design .t8-scenes .nav-actions{display:flex;align-items:center;gap:32px}.cm-public-design .t8-scenes .t7-nav nav a,.cm-public-design .t8-scenes .login{font-size:14px;padding:10px 0}.cm-public-design .t8-scenes .t7-nav a:hover{text-decoration:underline}.cm-public-design .t8-scenes .t7-button{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:52px;background:var(--white);color:var(--night);padding:13px 22px;border-radius:6px;font-size:15px;font-weight:600;line-height:1.4;transition:background 180ms ease,transform 140ms var(--ease-out);text-decoration:none!important}.cm-public-design .t8-scenes .t7-button.secondary{background:transparent;color:inherit;border:1px solid currentColor}.cm-public-design .t8-scenes .arrow{width:18px;height:12px;position:relative;display:inline-block;flex:none;transition:transform 180ms var(--ease-out)}.cm-public-design .t8-scenes .arrow:before{content:'';position:absolute;top:5px;left:0;width:17px;height:1px;background:currentColor}.cm-public-design .t8-scenes .arrow:after{content:'';position:absolute;right:0;top:1px;width:9px;height:9px;border-top:1px solid;border-right:1px solid;transform:rotate(45deg)}.cm-public-design .t8-scenes .nav-actions .t7-button{min-height:44px;padding:10px 16px;gap:22px}.cm-public-design .t8-scenes .skip{position:fixed;left:20px;top:-100px;background:white;color:#071929;padding:16px;z-index:100}.cm-public-design .t8-scenes .skip:focus{top:12px}.cm-public-design .t8-scenes #menu-toggle{display:none;background:none;padding:12px 0;min-width:44px}.cm-public-design .t8-scenes #mobile-menu{position:absolute;top:100%;left:0;right:0;background:var(--night);padding:20px 24px 28px;box-shadow:0 22px 40px #03081055}.cm-public-design .t8-scenes #mobile-menu a{display:block;padding:12px 0;font-size:22px}.cm-public-design .t8-scenes .motion-toggle{position:fixed;bottom:18px;right:18px;z-index:45;border:1px solid #5c7586;background:#0a182a;color:#e5f4ff;border-radius:6px;padding:10px 14px;font-size:12px;min-height:44px}.cm-public-design .t8-scenes .hero{position:relative}.cm-public-design .t8-scenes .hero-camera{height:100svh;min-height:740px;position:relative;overflow:clip;isolation:isolate}.cm-public-design .t8-scenes .core{position:absolute;width:clamp(420px,48vw,760px);aspect-ratio:1;left:50%;top:29%;margin-left:calc(clamp(420px,48vw,760px) / -2);margin-top:calc(clamp(420px,48vw,760px) / -2);z-index:-1}.cm-public-design .t8-scenes .core-rim{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,#0c1b2c,#285c7b,#9beaff,#2b6c96,#0a2038,#5eacc6,#163f5b,#0c1b2c);box-shadow:inset 2px 4px 12px #bfefff50,0 45px 100px #02071370}.cm-public-design .t8-scenes .core-inner{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(ellipse at 40% 30%,#123f5c,#060e1b 67%);box-shadow:inset 0 8px 24px #0009;border:1px solid #8fddff40}.cm-public-design .t8-scenes .core-mark{position:absolute;inset:32%;display:grid;place-items:center}.cm-public-design .t8-scenes .core-mark img{width:100%;height:100%;filter:brightness(1.9)}.cm-public-design .t8-scenes .core-light{position:absolute;inset:1%;border-radius:50%;border-top:2px solid #b7ecff;transform:rotate(-40deg)}.cm-public-design .t8-scenes .hero-copy{position:absolute;left:var(--gutter);right:var(--gutter);bottom:135px;z-index:2}.cm-public-design .t8-scenes .hero-copy h1{font-size:clamp(62px,7.4vw,120px);line-height:1.01;max-width:1250px;letter-spacing:-.04em;text-wrap:initial}.cm-public-design .t8-scenes .hero-copy h1 span{color:#a8dff2}.cm-public-design .t8-scenes .hero-copy p{margin-top:24px;max-width:38ch;color:#c7dfeb;font-size:18px}.cm-public-design .t8-scenes .hero-actions{display:flex;gap:12px;margin-top:28px}.cm-public-design .t8-scenes .hero-platforms{position:absolute;right:var(--gutter);bottom:148px;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:flex-end;max-width:330px;color:#a6c3d5;font-size:16px}.cm-public-design .t8-scenes .hero-bottom{position:absolute;bottom:34px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;font-size:12px;letter-spacing:.03em;color:#a4bbc9}.cm-public-design .t8-scenes .hero-bottom a{display:flex;align-items:center;gap:20px;min-height:44px}.cm-public-design .t8-scenes .down{height:25px;width:1px;background:currentColor;position:relative}.cm-public-design .t8-scenes .down:after{content:'';width:7px;height:7px;border-right:1px solid;border-bottom:1px solid;position:absolute;bottom:0;left:-3px;transform:rotate(45deg)}.cm-public-design .t8-scenes .ecosystem{padding-top:130px}.cm-public-design .t8-scenes .network{max-width:950px;margin:auto;position:relative;padding-bottom:50px}.cm-public-design .t8-scenes .sources{display:flex;justify-content:space-between;padding:0 7%;position:relative;z-index:2}.cm-public-design .t8-scenes .source{font-size:clamp(22px,3vw,40px);font-weight:600;letter-spacing:-.04em}.cm-public-design .t8-scenes .twitch{color:#c9b4ff}.cm-public-design .t8-scenes .youtube{color:#ffa4a9}.cm-public-design .t8-scenes .kick{color:#a2ed8e}.cm-public-design .t8-scenes .network-lines{width:100%;height:240px;display:block;overflow:visible;fill:none;stroke:#8abfd339;stroke-width:1}.cm-public-design .t8-scenes .network-trace{stroke:#8ee6ff;stroke-width:2;stroke-dasharray:1100;stroke-dashoffset:0}.cm-public-design .t8-scenes .network-core{position:relative;display:flex;align-items:center;justify-content:center;gap:18px;margin-top:-3px;font-size:32px;font-weight:600;letter-spacing:-.04em}.cm-public-design .t8-scenes .network-core img{width:72px;height:72px}.cm-public-design .t8-scenes .automation{display:grid;grid-template-columns:1fr 1.25fr;gap:13%;align-items:center;margin-top:70px}.cm-public-design .t8-scenes .automation-intro h3{font-size:34px;max-width:11ch}.cm-public-design .t8-scenes .automation-intro p{font-size:13px;margin-top:20px;color:var(--muted)}.cm-public-design .t8-scenes .flow-meter{height:2px;background:#ffffff20;margin-top:32px;max-width:260px}.cm-public-design .t8-scenes .flow-meter i{display:block;height:100%;background:#7ae5ff;transform-origin:left}.cm-public-design .t8-scenes .event-flow{padding:0;margin:0;list-style:none}.cm-public-design .t8-scenes .flow-event{display:flex;align-items:center;gap:16px;border-bottom:1px solid #ffffff24;padding:20px 0;font-size:16px}.cm-public-design .t8-scenes .event-dot{width:7px;height:7px;flex:none;border-radius:50%;background:#a8e8d8}.cm-public-design .t8-scenes .event-time{font-size:12px;color:#b3cddb;margin-left:auto;font-variant-numeric:tabular-nums}.cm-public-design .t8-scenes .manifesto{padding:160px 2.8vw 180px;overflow:hidden}.cm-public-design .t8-scenes .manifesto h2{font-size:clamp(66px,11.5vw,184px);font-weight:700;line-height:.96;letter-spacing:-.04em}.cm-public-design .t8-scenes .manifesto h2 span{display:block;white-space:nowrap}.cm-public-design .t8-scenes .manifesto h2 span:nth-child(2){color:#8bd6ed}.cm-public-design .t8-scenes .manifesto p{margin:64px var(--gutter) 0 auto;max-width:300px;font-size:20px;color:#b7d9e9}.cm-public-design .t8-scenes .analytics{padding-top:80px}.cm-public-design .t8-scenes .analytics-sources{display:flex;justify-content:center;gap:8%;margin-bottom:40px;font-size:14px;color:#b9e5f3}.cm-public-design .t8-scenes .analytics-window{max-width:1080px;margin:auto;border-radius:12px;background:#091a2c;box-shadow:0 50px 110px #03132466;overflow:hidden}.cm-public-design .t8-scenes .window-bar{display:flex;justify-content:space-between;align-items:center;padding:22px 32px;border-bottom:1px solid #ffffff15;font-size:13px}.cm-public-design .t8-scenes .window-bar strong{font-size:18px}.cm-public-design .t8-scenes .window-bar strong span{font-weight:400;color:#a9bfd1;margin-left:16px}.cm-public-design .t8-scenes .window-bar>span{color:#b9cbda}.cm-public-design .t8-scenes .dashboard{display:grid;grid-template-columns:85px 1fr}.cm-public-design .t8-scenes .dashboard-rail{padding:28px 22px;border-right:1px solid #ffffff15;display:flex;align-items:center;flex-direction:column;gap:30px}.cm-public-design .t8-scenes .dashboard-rail img{width:32px}.cm-public-design .t8-scenes .dashboard-rail i{width:20px;height:16px;border:1px solid #647f95;border-radius:3px}.cm-public-design .t8-scenes .dashboard-main{padding:32px 40px 28px}.cm-public-design .t8-scenes .dashboard-main h3{font-size:25px;letter-spacing:-.025em}.cm-public-design .t8-scenes .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:30px 0 36px}.cm-public-design .t8-scenes .metrics>div{display:flex;flex-direction:column}.cm-public-design .t8-scenes .metrics span{color:#b3c4d2;font-size:13px}.cm-public-design .t8-scenes .metrics strong{font-size:48px;font-weight:400;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.cm-public-design .t8-scenes .chart-head{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ffffff20;padding-top:25px}.cm-public-design .t8-scenes .chart-head h4{font-size:15px;font-weight:400}.cm-public-design .t8-scenes .chart-head>span{font-size:20px}.cm-public-design .t8-scenes .bars{display:flex;gap:28px;height:195px;align-items:end;margin-top:18px;border-bottom:1px solid #ffffff20;padding:0 24px 12px}.cm-public-design .t8-scenes .bar-column{flex:1;text-align:center}.cm-public-design .t8-scenes .bar-stack{display:flex;flex-direction:column-reverse;gap:3px;transform-origin:bottom}.cm-public-design .t8-scenes .bar-stack i{height:var(--bar);display:block;background:#b4a2ed}.cm-public-design .t8-scenes .bar-stack .bar-1{background:#e89ca1}.cm-public-design .t8-scenes .bar-stack .bar-2{background:#9cd9a5}.cm-public-design .t8-scenes .bar-column>span{display:block;font-size:11px;color:#afc2d2;margin-top:10px}.cm-public-design .t8-scenes .chart-legend{display:flex;gap:24px;margin-top:22px;font-size:12px;color:#c1d3e0}.cm-public-design .t8-scenes .chart-legend span:before{content:'';display:inline-block;width:7px;height:7px;background:#b4a2ed;margin-right:8px}.cm-public-design .t8-scenes .chart-legend span:nth-child(2):before{background:#e89ca1}.cm-public-design .t8-scenes .chart-legend span:nth-child(3):before{background:#9cd9a5}.cm-public-design .t8-scenes .vault-stage{height:590px;position:relative;max-width:1080px;margin:auto;isolation:isolate}.cm-public-design .t8-scenes .vault-folder{position:absolute;inset:120px 7% 30px;background:#1e506b;border-radius:12px;transform:rotate(-4deg);box-shadow:0 40px 70px #031c3540}.cm-public-design .t8-scenes .vault-folder:before{content:'';position:absolute;left:0;top:-26px;width:30%;height:40px;background:inherit;border-radius:12px}.cm-public-design .t8-scenes .vault-folder>span{position:absolute;bottom:22px;left:30px;font-size:19px;color:#b5ddea}.cm-public-design .t8-scenes .vault-media{position:absolute;width:61%;left:21%;top:35px;background:#10293d;box-shadow:0 38px 70px #001b3460;border-radius:12px;overflow:hidden}.cm-public-design .t8-scenes .vault-art{position:relative;height:280px;background:#080f23;overflow:hidden}.cm-public-design .t8-scenes .vault-art>div{position:absolute;width:360px;height:360px;border-radius:50%;border:32px solid #3b99be;left:5%;top:28%;transform:rotateX(45deg) rotateZ(-25deg)}.cm-public-design .t8-scenes .vault-art>div:nth-child(2){left:32%;top:-30%;border-color:#235374}.cm-public-design .t8-scenes .vault-art>div:nth-child(3){left:60%;top:20%;border-color:#8ad3e1}.cm-public-design .t8-scenes .play-mark{position:absolute;top:50%;left:50%;width:0;height:0;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;transform:translate(-50%,-50%)}.cm-public-design .t8-scenes .media-caption{display:flex;justify-content:space-between;gap:20px;padding:20px 24px;font-size:13px}.cm-public-design .t8-scenes .media-caption span{color:#b8d0df}.cm-public-design .t8-scenes .vault-permission{margin:0 24px 24px;padding-top:18px;border-top:1px solid #ffffff25;display:flex;align-items:center;gap:16px}.cm-public-design .t8-scenes .vault-permission div{display:flex;flex-direction:column;font-size:13px}.cm-public-design .t8-scenes .vault-permission span{color:#b0cddf}.cm-public-design .t8-scenes .lock-mark{width:15px;height:14px;border:1px solid currentColor;border-radius:3px;position:relative;flex:none}.cm-public-design .t8-scenes .lock-mark:before{content:'';position:absolute;width:8px;height:8px;border:1px solid currentColor;border-bottom:0;top:-8px;left:2px;border-radius:6px 6px 0 0}.cm-public-design .t8-scenes .media-piece{position:absolute;width:24%;height:235px;border-radius:8px;overflow:hidden;padding:20px;box-shadow:0 25px 50px #03192d50}.cm-public-design .t8-scenes .media-image{background:#3a6b81;left:0;top:0;transform:rotate(-11deg)}.cm-public-design .t8-scenes .media-orb{width:170px;height:170px;border:25px solid #96ccda;border-radius:50%;margin-top:25px}.cm-public-design .t8-scenes .media-document{right:0;top:50px;background:#d4e8ed;color:#14374b;transform:rotate(10deg)}.cm-public-design .t8-scenes .media-piece>span{font-size:12px}.cm-public-design .t8-scenes .media-document b{display:block;font-size:26px;line-height:1.1;letter-spacing:-.03em;margin:18px 0}.cm-public-design .t8-scenes .media-document i{display:block;height:2px;background:#6d939f;width:80%;margin:12px 0}.cm-public-design .t8-scenes .vault-metadata{position:absolute;bottom:0;right:3%;max-width:235px;display:flex;flex-direction:column;font-size:13px}.cm-public-design .t8-scenes .vault-metadata>span{color:var(--muted);margin-bottom:8px}.cm-public-design .t8-scenes .bio{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;color:var(--ink);padding-top:190px;padding-bottom:180px}.cm-public-design .t8-scenes .bio-copy{max-width:590px}.cm-public-design .t8-scenes .bio-copy p{margin-top:28px;color:#34576d}.cm-public-design .t8-scenes .bio-copy .t7-button{margin-top:30px}.cm-public-design .t8-scenes .bio-stage{position:relative;padding:50px 0;display:flex;justify-content:center}.cm-public-design .t8-scenes .bio-page{position:relative;z-index:2;width:330px;background:#f6faf9;color:#15374b;border-radius:16px;box-shadow:0 42px 85px #20495e33;padding:0 24px 22px;text-align:center;overflow:hidden}.cm-public-design .t8-scenes .bio-address{font-size:12px;padding:14px;border-bottom:1px solid #163a4915;margin:0 -24px}.cm-public-design .t8-scenes .bio-cover{height:140px;margin:0 -24px 30px;position:relative;background:linear-gradient(135deg,#548797,#9fd2d5)}.cm-public-design .t8-scenes .bio-avatar{width:84px;height:84px;border-radius:50%;background:#16475b;position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);border:5px solid #f6faf9;font-size:36px;color:#d5f1f1;line-height:74px}.cm-public-design .t8-scenes .bio-page h3{font-size:26px}.cm-public-design .t8-scenes .bio-page p{font-size:13px;max-width:25ch;margin:10px auto;color:#4e6979}.cm-public-design .t8-scenes .bio-social{display:flex;justify-content:center;align-items:center;gap:12px;font-size:11px;margin:22px 0}.cm-public-design .t8-scenes .bio-social i{width:3px;height:3px;background:#6a8592;border-radius:50%}.cm-public-design .t8-scenes .bio-link{background:#e3eef0;padding:16px;margin-top:10px;font-size:13px;border-radius:6px}.cm-public-design .t8-scenes .bio-link>span:not(.play-mark){font-size:11px;color:#506b77;display:block}.cm-public-design .t8-scenes .bio-link.featured{background:#123d51;color:#eafaff;padding:22px 15px 22px 50px;position:relative;text-align:left}.cm-public-design .t8-scenes .bio-link.featured .play-mark{left:26px;border-left-width:9px;border-top-width:6px;border-bottom-width:6px}.cm-public-design .t8-scenes .bio-link small{display:block;color:#a6cbd5;font-size:11px}.cm-public-design .t8-scenes .bio-signature{font-size:13px;margin-top:25px}.cm-public-design .t8-scenes .bio-satellites{position:absolute;inset:0}.cm-public-design .t8-scenes .bio-satellites span{position:absolute;font-size:15px;padding:12px 18px;background:#ffffff75;border:1px solid #7096a526;border-radius:6px}.cm-public-design .t8-scenes .bio-satellites span:nth-child(1){top:0;left:0}.cm-public-design .t8-scenes .bio-satellites span:nth-child(2){top:16%;right:-10%}.cm-public-design .t8-scenes .bio-satellites span:nth-child(3){top:38%;left:-8%}.cm-public-design .t8-scenes .bio-satellites span:nth-child(4){top:65%;right:-12%}.cm-public-design .t8-scenes .bio-satellites span:nth-child(5){bottom:0;left:0}.cm-public-design .t8-scenes .bio-satellites span:nth-child(6){bottom:6%;right:-5%}.cm-public-design .t8-scenes .bio-satellites span:nth-child(7){top:-7%;right:10%}.cm-public-design .t8-scenes .bio>.demo-label{grid-column:1/-1;margin:0;color:#47697b}.cm-public-design .t8-scenes .hub{color:var(--ink)}.cm-public-design .t8-scenes .hub .scene-heading p{color:#34576d}.cm-public-design .t8-scenes .hub-composition{height:520px;position:relative;display:grid;place-items:center}.cm-public-design .t8-scenes .hub-orbits{position:absolute;inset:0;display:grid;place-items:center}.cm-public-design .t8-scenes .hub-orbits i{position:absolute;width:460px;height:460px;border:1px solid #38647830;border-radius:50%}.cm-public-design .t8-scenes .hub-orbits i:nth-child(2){width:700px;height:380px;transform:rotate(-25deg)}.cm-public-design .t8-scenes .hub-orbits i:nth-child(3){width:950px;height:450px;transform:rotate(15deg)}.cm-public-design .t8-scenes .hub-center{display:flex;align-items:center;flex-direction:column;z-index:2;gap:10px}.cm-public-design .t8-scenes .hub-center img{width:95px;height:95px}.cm-public-design .t8-scenes .hub-center strong{font-size:40px;font-weight:600;letter-spacing:-.04em}.cm-public-design .t8-scenes .hub-center span{font-size:14px;color:#36586d}.cm-public-design .t8-scenes .hub-destinations{position:absolute;inset:0}.cm-public-design .t8-scenes .hub-destinations span{position:absolute;padding:12px 22px;background:#e9f5f7;font-size:17px;border-radius:6px}.cm-public-design .t8-scenes .hub-destinations span:nth-child(1){top:8%;left:24%}.cm-public-design .t8-scenes .hub-destinations span:nth-child(2){top:25%;right:14%}.cm-public-design .t8-scenes .hub-destinations span:nth-child(3){bottom:8%;right:20%}.cm-public-design .t8-scenes .hub-destinations span:nth-child(4){bottom:15%;left:20%}.cm-public-design .t8-scenes .hub-destinations span:nth-child(5){top:40%;left:4%}.cm-public-design .t8-scenes .widgets{padding-top:170px}.cm-public-design .t8-scenes .broadcast{background:#102438;border-radius:12px;overflow:hidden;box-shadow:0 40px 90px #03122566;max-width:1100px;margin:auto}.cm-public-design .t8-scenes .broadcast-top,.cm-public-design .t8-scenes .broadcast-bottom{display:flex;justify-content:space-between;gap:20px;padding:20px 28px;font-size:13px}.cm-public-design .t8-scenes .broadcast-top>span{color:#b6c9d9}.cm-public-design .t8-scenes .broadcast-screen{position:relative;height:510px;overflow:hidden;background:#081c2e}.cm-public-design .t8-scenes .broadcast-art{position:absolute;inset:0;background:radial-gradient(ellipse at 25% 10%,#24779a,transparent 60%)}.cm-public-design .t8-scenes .broadcast-art i{position:absolute;border:55px solid #2b7c99;width:600px;height:600px;border-radius:50%;left:-10%;top:10%;transform:rotateX(55deg) rotateY(10deg)}.cm-public-design .t8-scenes .broadcast-art i:nth-child(2){left:10%;top:-35%;border-color:#6cb6c7}.cm-public-design .t8-scenes .broadcast-art i:nth-child(3){left:40%;top:18%;border-color:#143b55}.cm-public-design .t8-scenes .live-label{position:absolute;top:25px;left:28px;font-size:12px}.cm-public-design .t8-scenes .live-label:before{content:'';display:inline-block;background:#e9777b;width:6px;height:6px;border-radius:50%;margin-right:8px}.cm-public-design .t8-scenes .broadcast-alert{position:absolute;top:80px;left:12%;display:flex;align-items:center;gap:18px;background:#d5f4f1;color:#143b48;padding:22px 30px;border-radius:6px;box-shadow:0 20px 40px #05152240}.cm-public-design .t8-scenes .broadcast-alert strong{font-size:23px;font-weight:600;letter-spacing:-.02em}.cm-public-design .t8-scenes .broadcast-alert>span:last-child{font-size:12px}.cm-public-design .t8-scenes .alert-star{width:12px;height:12px;background:#1b6477;transform:rotate(45deg)}.cm-public-design .t8-scenes .broadcast-chat{position:absolute;right:28px;bottom:28px;padding:22px;background:#0b1e30e8;border-radius:6px;font-size:12px;max-width:270px}.cm-public-design .t8-scenes .broadcast-chat b{font-size:13px}.cm-public-design .t8-scenes .broadcast-chat p{margin-top:13px;color:#c0d6e2}.cm-public-design .t8-scenes .broadcast-gift,.cm-public-design .t8-scenes .broadcast-raid{position:absolute;left:28px;bottom:110px;background:#0d2b3e;padding:14px 20px;font-size:13px;border-radius:6px}.cm-public-design .t8-scenes .broadcast-raid{bottom:50px}.cm-public-design .t8-scenes .tts{position:absolute;left:28px;top:210px;display:flex;flex-direction:column;gap:16px;font-size:12px}.cm-public-design .t8-scenes .tts>div{display:flex;align-items:center;gap:5px;height:46px}.cm-public-design .t8-scenes .tts i{width:4px;height:var(--h);background:#c5f0ec;border-radius:3px;transform-origin:center}.cm-public-design .t8-scenes .broadcast-bottom{justify-content:center;gap:50px;color:#c3d9e5;font-size:12px}.cm-public-design .t8-scenes .widget-note{text-align:center;font-size:13px;margin:24px auto 0;color:var(--muted)}.cm-public-design .t8-scenes .proof{padding-top:120px;padding-bottom:160px}.cm-public-design .t8-scenes .proof h2{font-size:20px;letter-spacing:0;color:#a4bbc9;margin-bottom:42px}.cm-public-design .t8-scenes .proof blockquote{margin:0;max-width:1080px}.cm-public-design .t8-scenes .proof blockquote>p{font-size:clamp(27px,3.7vw,58px);line-height:1.25;letter-spacing:-.03em;text-wrap:pretty}.cm-public-design .t8-scenes .proof footer{display:flex;align-items:center;gap:20px;margin-top:40px}.cm-public-design .t8-scenes .creator-monogram{width:64px;height:64px;background:#214b72;border-radius:50%;display:grid;place-items:center;font-size:26px}.cm-public-design .t8-scenes .proof cite{font-size:15px;font-style:normal;display:block}.cm-public-design .t8-scenes .proof footer a{font-size:13px;color:#a5c1d6;display:inline-block;min-height:44px;padding-top:8px}.cm-public-design .t8-scenes .pricing{padding-top:80px}.cm-public-design .t8-scenes .billing-control{display:flex;align-items:center;gap:6px;margin-bottom:35px}.cm-public-design .t8-scenes .billing-control button{padding:12px 22px;min-height:48px;background:none;border:1px solid #ffffff30;border-radius:6px;font-size:14px}.cm-public-design .t8-scenes .billing-control button[aria-pressed=true]{background:#edf6fa;color:#0a2033}.cm-public-design .t8-scenes .billing-control>span{font-size:13px;color:#a6bdce;margin-left:24px}.cm-public-design .t8-scenes .plan-list{border-top:1px solid #ffffff40}.cm-public-design .t8-scenes .plan{border-bottom:1px solid #ffffff30}.cm-public-design .t8-scenes .plan summary{display:grid;grid-template-columns:1fr 1.6fr .8fr 24px;align-items:center;gap:24px;padding:34px 0;cursor:pointer;list-style:none}.cm-public-design .t8-scenes .plan summary::-webkit-details-marker,.cm-public-design .t8-scenes .faq summary::-webkit-details-marker{display:none}.cm-public-design .t8-scenes .plan-name{font-size:clamp(28px,3.5vw,48px);font-weight:600;letter-spacing:-.035em}.cm-public-design .t8-scenes .plan-description{font-size:15px;color:#b5c7d5;max-width:35ch}.cm-public-design .t8-scenes .plan-price{display:flex;align-items:baseline;gap:8px;justify-content:flex-end;white-space:nowrap}.cm-public-design .t8-scenes .plan-price strong{font-size:32px;font-weight:400;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.cm-public-design .t8-scenes .plan-price small{font-size:12px;color:#b5c7d5}.cm-public-design .t8-scenes .plan-plus{width:16px;height:16px;position:relative;display:block;flex:none}.cm-public-design .t8-scenes .plan-plus:before,.cm-public-design .t8-scenes .plan-plus:after{content:'';position:absolute;left:0;top:7px;width:16px;height:1px;background:currentColor}.cm-public-design .t8-scenes .plan-plus:after{transform:rotate(90deg)}.cm-public-design .t8-scenes details[open]>summary .plan-plus:after{transform:rotate(0)}.cm-public-design .t8-scenes .plan-content{padding:0 0 35px 29%;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:start}.cm-public-design .t8-scenes .plan-content ul{margin:0;padding:0;list-style:none;columns:2;column-gap:32px}.cm-public-design .t8-scenes .plan-content li{font-size:14px;padding:6px 0;color:#d3e1eb;break-inside:avoid}.cm-public-design .t8-scenes .annual-total{font-size:13px;color:#a7cfe5;margin-top:20px}.cm-public-design .t8-scenes .pricing-notes{display:flex;justify-content:space-between;gap:28px;margin-top:28px;font-size:12px;color:#a4bac9}.cm-public-design .t8-scenes .pricing-notes a{white-space:nowrap;text-decoration:underline;min-height:44px}.cm-public-design .t8-scenes .faq{display:grid;grid-template-columns:1fr 1.4fr;gap:10%;padding-top:60px}.cm-public-design .t8-scenes .faq h2{font-size:40px}.cm-public-design .t8-scenes .faq details{border-bottom:1px solid #ffffff30}.cm-public-design .t8-scenes .faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:30px;cursor:pointer;font-size:18px;padding:24px 0}.cm-public-design .t8-scenes .faq details p{font-size:15px;color:#b2c6d5;padding:0 30px 25px 0}.cm-public-design .t8-scenes .final{text-align:center;padding-top:170px;padding-bottom:180px;isolation:isolate}.cm-public-design .t8-scenes .final h2{font-size:clamp(54px,8vw,128px)}.cm-public-design .t8-scenes .final p{margin:28px auto;color:#b1c8d9}.cm-public-design .t8-scenes .final .t7-button{margin-top:10px}.cm-public-design .t8-scenes .final-mark img{width:80px;height:80px;margin-bottom:45px}.cm-public-design .t8-scenes .final-orbit{position:absolute;inset:0;display:grid;place-items:center;z-index:-1}.cm-public-design .t8-scenes .final-orbit i{position:absolute;width:70%;aspect-ratio:1.7;border:1px solid #487f9b35;border-radius:50%;transform:rotate(-20deg)}.cm-public-design .t8-scenes .final-orbit i:nth-child(2){width:95%;transform:rotate(20deg)}.cm-public-design .t8-scenes .final-orbit i:nth-child(3){width:125%;transform:rotate(-40deg)}.cm-public-design .t8-scenes .t7-footer{padding:70px var(--gutter) 90px;border-top:1px solid #ffffff20;position:relative;overflow:hidden;background:#070f1c}.cm-public-design .t8-scenes .footer-top{display:flex;justify-content:space-between;gap:40px}.cm-public-design .t8-scenes .footer-top>p{font-size:24px;letter-spacing:-.02em}.cm-public-design .t8-scenes .footer-top nav{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:13px;max-width:500px}.cm-public-design .t8-scenes .footer-top nav a{min-height:44px;display:inline-flex;align-items:center}.cm-public-design .t8-scenes .footer-wordmark{display:block;margin:70px auto 35px;max-width:1600px}.cm-public-design .t8-scenes .footer-wordmark img{width:100%;max-height:260px;object-fit:contain;filter:brightness(0) invert(1);opacity:.85}.cm-public-design .t8-scenes .footer-bottom{display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#a2b9ca}.cm-public-design .t8-scenes .footer-bottom a{min-height:44px}.cm-public-design .t8-scenes .inner-page main{padding-top:150px}.cm-public-design .t8-scenes .inner-page .world-blue{opacity:.15}.cm-public-design .t8-scenes .page-title{font-size:clamp(60px,8vw,110px);padding:60px var(--gutter) 0}.cm-public-design .t8-scenes .catalog{padding-top:60px}.cm-public-design .t8-scenes .catalog h1,.cm-public-design .t8-scenes .product-detail h1{font-size:clamp(50px,7vw,100px);max-width:16ch;margin-bottom:60px}.cm-public-design .t8-scenes .catalog>a{display:grid;grid-template-columns:1fr 1.2fr 25px;gap:40px;border-top:1px solid #ffffff30;padding:40px 0;align-items:center}.cm-public-design .t8-scenes .catalog>a h2{font-size:36px}.cm-public-design .t8-scenes .catalog>a p{font-size:16px;color:#b4cbd9}.cm-public-design .t8-scenes .product-detail{padding-top:45px}.cm-public-design .t8-scenes .back-link{display:inline-block;font-size:14px;color:#c1ddeb;margin-bottom:50px;padding:10px 0}.cm-public-design .t8-scenes .product-detail h1{margin-bottom:30px}.cm-public-design .t8-scenes .product-lead{font-size:24px;color:#b7d2e2;max-width:42ch;margin-bottom:35px}.cm-public-design .t8-scenes .product-chapters{margin-top:120px;display:grid;grid-template-columns:1fr 1fr;gap:70px}.cm-public-design .t8-scenes .product-chapters h2{font-size:32px;margin-bottom:20px}.cm-public-design .t8-scenes .product-chapters p{color:#b7cedd;font-size:16px}@media(hover:hover) and (pointer:fine){.cm-public-design .t8-scenes .t7-button:hover{background:#bae9fa;transform:translateY(-2px)}.cm-public-design .t8-scenes .t7-button.secondary:hover{background:#80ceee15}.cm-public-design .t8-scenes .t7-button:hover .arrow{transform:translateX(4px)}.cm-public-design .t8-scenes .t7-button:active{transform:scale(.98)}.cm-public-design .t8-scenes .footer-top a:hover,.cm-public-design .t8-scenes .catalog>a:hover h2{text-decoration:underline}.cm-public-design .t8-scenes .billing-control button:hover{border-color:#a8d9ed}}@media(min-width:1600px){.cm-public-design .t8-scenes .hero-copy{left:max(var(--gutter),calc((100vw - 1376px)/2))}.cm-public-design .t8-scenes .hero-platforms{right:max(var(--gutter),calc((100vw - 1376px)/2))}}@media(max-width:1100px){.cm-public-design .t8-scenes .t7-nav nav{gap:20px}.cm-public-design .t8-scenes .nav-actions{gap:20px}.cm-public-design .t8-scenes .hero-copy h1{font-size:8.1vw}.cm-public-design .t8-scenes .hero-platforms{bottom:83px;max-width:none;font-size:13px}.cm-public-design .t8-scenes .hero-copy{bottom:175px}.cm-public-design .t8-scenes .hero-bottom{bottom:20px}.cm-public-design .t8-scenes .scene-heading{gap:40px;grid-template-columns:1.2fr 1fr}.cm-public-design .t8-scenes .scene-heading p{font-size:16px}.cm-public-design .t8-scenes .bio{gap:20px}.cm-public-design .t8-scenes .bio-satellites span{font-size:12px;padding:9px}.cm-public-design .t8-scenes .plan summary{grid-template-columns:1fr 1.3fr 1fr 20px}.cm-public-design .t8-scenes .plan-content{padding-left:0}.cm-public-design .t8-scenes .broadcast-alert{left:8%}.cm-public-design .t8-scenes .hub-orbits i:nth-child(3){width:100%}}@media(max-width:767px){.cm-public-design .t8-scenes{--gutter:24px;--space:100px}.cm-public-design .t8-scenes .t7-nav{padding:16px 24px;gap:12px}.cm-public-design .t8-scenes .brand{font-size:20px;gap:8px}.cm-public-design .t8-scenes .brand img{width:27px;height:27px}.cm-public-design .t8-scenes .t7-nav>nav,.cm-public-design .t8-scenes .nav-actions .login,.cm-public-design .t8-scenes .nav-actions>.t7-button{display:none}.cm-public-design .t8-scenes #menu-toggle{display:block}.cm-public-design .t8-scenes .hero-camera{min-height:720px;height:100svh}.cm-public-design .t8-scenes .core{width:410px;margin-left:-205px;margin-top:-205px;top:29%}.cm-public-design .t8-scenes .hero-copy{bottom:148px;left:24px;right:24px}.cm-public-design .t8-scenes .hero-copy h1{font-size:clamp(47px,10.8vw,78px);max-width:640px;line-height:1.02}.cm-public-design .t8-scenes .hero-copy h1 span{display:inline-block;max-width:12ch}.cm-public-design .t8-scenes .hero-copy p{font-size:15px;margin-top:20px;max-width:32ch}.cm-public-design .t8-scenes .hero-actions{gap:10px;flex-wrap:wrap;margin-top:22px}.cm-public-design .t8-scenes .hero-actions .t7-button{font-size:13px;gap:17px;padding:12px 14px;min-height:48px}.cm-public-design .t8-scenes .hero-platforms{left:24px;right:24px;bottom:85px;justify-content:flex-start;gap:17px;font-size:12px}.cm-public-design .t8-scenes .hero-bottom{bottom:20px;left:24px;right:24px}.cm-public-design .t8-scenes .hero-bottom>span{max-width:140px;line-height:1.5;font-size:10px}.cm-public-design .t8-scenes .hero-bottom a{font-size:10px;gap:12px}.cm-public-design .t8-scenes .scene-heading{display:block;margin-bottom:55px}.cm-public-design .t8-scenes .scene-heading h2{margin-bottom:26px}.cm-public-design .t8-scenes .scene-heading p{font-size:16px;max-width:38ch}.cm-public-design .t8-scenes .scene-heading .t7-button{margin-top:20px}.cm-public-design .t8-scenes .ecosystem{padding-top:95px}.cm-public-design .t8-scenes .sources{padding:0 3%}.cm-public-design .t8-scenes .source{font-size:25px}.cm-public-design .t8-scenes .network-lines{height:160px}.cm-public-design .t8-scenes .network-core{font-size:25px;gap:12px}.cm-public-design .t8-scenes .network-core img{width:52px;height:52px}.cm-public-design .t8-scenes .automation{grid-template-columns:1fr;gap:30px;margin-top:30px}.cm-public-design .t8-scenes .automation-intro h3{font-size:29px;max-width:20ch}.cm-public-design .t8-scenes .automation-intro p{margin-top:12px}.cm-public-design .t8-scenes .flow-meter{margin-top:18px;max-width:none}.cm-public-design .t8-scenes .flow-event{font-size:13px;padding:19px 0;gap:10px}.cm-public-design .t8-scenes .event-time{font-size:10px}.cm-public-design .t8-scenes .manifesto{padding:90px 18px 100px}.cm-public-design .t8-scenes .manifesto h2{font-size:11.5vw;line-height:1.02}.cm-public-design .t8-scenes .manifesto p{margin:35px 6px 0 auto;max-width:240px;font-size:17px}.cm-public-design .t8-scenes .analytics{padding-top:60px}.cm-public-design .t8-scenes .analytics-sources{gap:13px;flex-wrap:wrap;font-size:11px;margin-bottom:24px}.cm-public-design .t8-scenes .analytics-window{margin:0 -10px}.cm-public-design .t8-scenes .window-bar{padding:16px;font-size:10px;gap:10px}.cm-public-design .t8-scenes .window-bar strong{font-size:15px}.cm-public-design .t8-scenes .window-bar strong span{margin-left:6px}.cm-public-design .t8-scenes .dashboard{grid-template-columns:40px 1fr}.cm-public-design .t8-scenes .dashboard-rail{padding:20px 10px;gap:25px}.cm-public-design .t8-scenes .dashboard-rail img{width:22px}.cm-public-design .t8-scenes .dashboard-rail i{width:14px;height:12px}.cm-public-design .t8-scenes .dashboard-main{padding:22px 15px}.cm-public-design .t8-scenes .dashboard-main h3{font-size:20px}.cm-public-design .t8-scenes .metrics{gap:10px;margin:24px 0}.cm-public-design .t8-scenes .metrics span{font-size:10px;max-width:10ch;line-height:1.3;min-height:26px}.cm-public-design .t8-scenes .metrics strong{font-size:33px}.cm-public-design .t8-scenes .chart-head h4{font-size:12px}.cm-public-design .t8-scenes .chart-head>span{font-size:16px}.cm-public-design .t8-scenes .bars{gap:12px;height:180px;padding:0 0 10px}.cm-public-design .t8-scenes .bar-column>span{font-size:9px}.cm-public-design .t8-scenes .chart-legend{gap:10px;font-size:9px;flex-wrap:wrap}.cm-public-design .t8-scenes .chart-legend span:before{width:5px;height:5px;margin-right:4px}.cm-public-design .t8-scenes .demo-label{font-size:10px}.cm-public-design .t8-scenes .vault-stage{height:440px;margin:0 -6px}.cm-public-design .t8-scenes .vault-folder{inset:115px 5% 25px}.cm-public-design .t8-scenes .vault-folder>span{left:20px;bottom:16px;font-size:14px}.cm-public-design .t8-scenes .vault-media{width:86%;left:7%;top:68px}.cm-public-design .t8-scenes .vault-art{height:175px}.cm-public-design .t8-scenes .vault-art>div{width:230px;height:230px;border-width:22px}.cm-public-design .t8-scenes .media-piece{height:155px;width:38%;padding:15px}.cm-public-design .t8-scenes .media-document{top:10px}.cm-public-design .t8-scenes .media-document b{font-size:19px;margin:10px 0}.cm-public-design .t8-scenes .media-orb{width:110px;height:110px;border-width:17px}.cm-public-design .t8-scenes .media-caption{padding:16px;gap:14px;font-size:11px}.cm-public-design .t8-scenes .media-caption span{font-size:10px}.cm-public-design .t8-scenes .vault-permission{margin:0 16px 18px;padding-top:15px}.cm-public-design .t8-scenes .vault-permission div{font-size:11px}.cm-public-design .t8-scenes .vault-metadata{bottom:-12px;right:3%;font-size:11px;max-width:180px}.cm-public-design .t8-scenes .bio{grid-template-columns:1fr;gap:60px;padding-top:110px;padding-bottom:100px}.cm-public-design .t8-scenes .bio-copy h2{font-size:48px}.cm-public-design .t8-scenes .bio-copy p{font-size:16px}.cm-public-design .t8-scenes .bio-stage{padding:50px 0 20px;margin:0 8px}.cm-public-design .t8-scenes .bio-page{width:290px}.cm-public-design .t8-scenes .bio-satellites span:nth-child(1){left:-15px}.cm-public-design .t8-scenes .bio-satellites span:nth-child(2){right:-20px}.cm-public-design .t8-scenes .bio-satellites span:nth-child(3){left:-24px}.cm-public-design .t8-scenes .bio-satellites span:nth-child(4){right:-25px}.cm-public-design .t8-scenes .bio-satellites span:nth-child(5){bottom:-15px;left:-15px}.cm-public-design .t8-scenes .bio-satellites span:nth-child(6){right:-20px;bottom:-30px}.cm-public-design .t8-scenes .bio-satellites span:nth-child(7){top:0;right:0}.cm-public-design .t8-scenes .bio>.demo-label{margin-top:0}.cm-public-design .t8-scenes .hub-composition{height:440px}.cm-public-design .t8-scenes .hub-orbits i{width:300px;height:340px}.cm-public-design .t8-scenes .hub-orbits i:nth-child(2){width:400px;height:270px}.cm-public-design .t8-scenes .hub-orbits i:nth-child(3){width:530px;height:350px}.cm-public-design .t8-scenes .hub-center strong{font-size:30px}.cm-public-design .t8-scenes .hub-center img{width:75px;height:75px}.cm-public-design .t8-scenes .hub-destinations span{font-size:12px;padding:8px 12px}.cm-public-design .t8-scenes .hub-destinations span:nth-child(1){left:14%;top:0}.cm-public-design .t8-scenes .hub-destinations span:nth-child(2){right:0;top:20%}.cm-public-design .t8-scenes .hub-destinations span:nth-child(3){right:2%;bottom:5%}.cm-public-design .t8-scenes .hub-destinations span:nth-child(4){left:5%;bottom:10%}.cm-public-design .t8-scenes .hub-destinations span:nth-child(5){left:-10px;top:34%}.cm-public-design .t8-scenes .widgets{padding-top:100px}.cm-public-design .t8-scenes .broadcast{margin:0 -8px}.cm-public-design .t8-scenes .broadcast-top{padding:16px;font-size:11px;gap:8px}.cm-public-design .t8-scenes .broadcast-top>span{font-size:9px;max-width:100px;text-align:right}.cm-public-design .t8-scenes .broadcast-screen{height:490px}.cm-public-design .t8-scenes .broadcast-art i{width:410px;height:410px;border-width:40px}.cm-public-design .t8-scenes .broadcast-alert{left:14px;right:14px;top:70px;padding:18px 15px;gap:12px}.cm-public-design .t8-scenes .broadcast-alert strong{font-size:17px}.cm-public-design .t8-scenes .broadcast-alert>span:last-child{margin-left:auto;font-size:10px}.cm-public-design .t8-scenes .live-label{left:18px;top:22px;font-size:11px}.cm-public-design .t8-scenes .tts{top:142px;left:18px;font-size:10px;gap:8px}.cm-public-design .t8-scenes .tts>div{height:34px}.cm-public-design .t8-scenes .tts i{max-height:30px;width:3px}.cm-public-design .t8-scenes .broadcast-chat{right:14px;left:14px;bottom:18px;padding:14px;font-size:10px;max-width:none}.cm-public-design .t8-scenes .broadcast-chat p{margin-top:6px}.cm-public-design .t8-scenes .broadcast-chat b{font-size:11px}.cm-public-design .t8-scenes .broadcast-gift{bottom:208px;left:14px;font-size:10px;padding:10px 14px}.cm-public-design .t8-scenes .broadcast-raid{bottom:158px;left:14px;font-size:10px;padding:10px 14px}.cm-public-design .t8-scenes .broadcast-bottom{padding:14px;font-size:11px;gap:35px}.cm-public-design .t8-scenes .widget-note{font-size:11px}.cm-public-design .t8-scenes .proof{padding-top:70px;padding-bottom:100px}.cm-public-design .t8-scenes .proof h2{font-size:17px;margin-bottom:28px}.cm-public-design .t8-scenes .proof blockquote>p{font-size:28px}.cm-public-design .t8-scenes .proof footer{gap:14px;margin-top:28px}.cm-public-design .t8-scenes .creator-monogram{width:50px;height:50px;font-size:23px;flex:none}.cm-public-design .t8-scenes .proof cite{font-size:13px}.cm-public-design .t8-scenes .pricing{padding-top:60px}.cm-public-design .t8-scenes .billing-control{flex-wrap:wrap;margin-bottom:25px}.cm-public-design .t8-scenes .billing-control>span{margin:12px 0 0;width:100%;font-size:11px}.cm-public-design .t8-scenes .plan summary{grid-template-columns:1fr auto 16px;gap:8px 16px;padding:25px 0}.cm-public-design .t8-scenes .plan-name{font-size:31px}.cm-public-design .t8-scenes .plan-description{grid-column:1/3;grid-row:2;font-size:13px;max-width:30ch;padding-top:5px}.cm-public-design .t8-scenes .plan-price strong{font-size:28px}.cm-public-design .t8-scenes .plan-price small{font-size:10px}.cm-public-design .t8-scenes .plan-plus{grid-column:3;grid-row:1}.cm-public-design .t8-scenes .plan-content{grid-template-columns:1fr;gap:24px;padding:0 0 28px}.cm-public-design .t8-scenes .plan-content ul{columns:1}.cm-public-design .t8-scenes .plan-content li{font-size:13px;padding:5px 0}.cm-public-design .t8-scenes .plan-content .t7-button{justify-self:start;min-width:140px}.cm-public-design .t8-scenes .pricing-notes{display:block;font-size:11px}.cm-public-design .t8-scenes .pricing-notes a{display:inline-flex;align-items:center;white-space:normal;margin-top:10px}.cm-public-design .t8-scenes .faq{grid-template-columns:1fr;gap:28px;padding-top:20px}.cm-public-design .t8-scenes .faq h2{font-size:35px}.cm-public-design .t8-scenes .faq summary{font-size:16px;gap:18px;padding:22px 0}.cm-public-design .t8-scenes .faq details p{font-size:14px;padding-right:12px}.cm-public-design .t8-scenes .final{padding-top:100px;padding-bottom:120px}.cm-public-design .t8-scenes .final h2{font-size:54px}.cm-public-design .t8-scenes .final p{font-size:15px}.cm-public-design .t8-scenes .final-mark img{width:62px;height:62px;margin-bottom:35px}.cm-public-design .t8-scenes .final-orbit i{width:120%;aspect-ratio:1}.cm-public-design .t8-scenes .final-orbit i:nth-child(2){width:160%}.cm-public-design .t8-scenes .final-orbit i:nth-child(3){width:200%}.cm-public-design .t8-scenes .t7-footer{padding-top:45px}.cm-public-design .t8-scenes .footer-top{display:block}.cm-public-design .t8-scenes .footer-top>p{font-size:22px}.cm-public-design .t8-scenes .footer-top nav{margin-top:25px;gap:8px 24px}.cm-public-design .t8-scenes .footer-wordmark{margin:40px 0 25px}.cm-public-design .t8-scenes .footer-bottom{font-size:10px;gap:24px}.cm-public-design .t8-scenes .footer-bottom>a{max-width:140px;text-align:right}.cm-public-design .t8-scenes .motion-toggle{font-size:10px;bottom:12px;right:12px;padding:9px 12px}.cm-public-design .t8-scenes .catalog{padding-top:20px}.cm-public-design .t8-scenes .catalog>a{grid-template-columns:1fr 18px;gap:15px;padding:30px 0}.cm-public-design .t8-scenes .catalog>a h2{font-size:28px}.cm-public-design .t8-scenes .catalog>a p{grid-row:2;grid-column:1/-1;font-size:14px}.cm-public-design .t8-scenes .catalog>a .arrow{grid-column:2;grid-row:1}.cm-public-design .t8-scenes .product-lead{font-size:19px}.cm-public-design .t8-scenes .product-chapters{grid-template-columns:1fr;gap:45px;margin-top:75px}.cm-public-design .t8-scenes .product-chapters h2{font-size:27px}.cm-public-design .t8-scenes .product-detail h1{font-size:49px}}@media(prefers-reduced-motion:reduce){.cm-public-design .t8-scenes *,.cm-public-design .t8-scenes *:before,.cm-public-design .t8-scenes *:after{scroll-behavior:auto!important;transition-duration:0s!important}.cm-public-design .t8-scenes .world-orbit,.cm-public-design .t8-scenes .world-signal{opacity:.4}.cm-public-design .t8-scenes .hero-camera{min-height:780px}.cm-public-design .t8-scenes .core{transform:scale(.75);top:28%}}.cm-public-design .t8-scenes .motion-reduced .core{transform:scale(.75);top:28%}.cm-public-design .t8-scenes .motion-reduced .bio,.cm-public-design .t8-scenes .motion-reduced .hub,.cm-public-design .t8-scenes .no-motion .bio,.cm-public-design .t8-scenes .no-motion .hub{background:#d9ebf0}@media(prefers-reduced-transparency:reduce){.cm-public-design .t8-scenes .t7-nav.scrolled{background:#070f1c}.cm-public-design .t8-scenes .bio-satellites span{background:#e4f1f5}}.cm-public-design .t8-scenes .hero-bottom a{margin-right:155px}.cm-public-design .t8-scenes .hero-platforms{color:#c0d6e4}.cm-public-design .t8-scenes .hero-copy{text-shadow:0 2px 20px #07142445}.cm-public-design .t8-scenes .hero-actions{text-shadow:none}.cm-public-design .t8-scenes .nojs-nav{display:none}@media(max-width:767px){.cm-public-design .t8-scenes .hero-bottom>span{display:none}.cm-public-design .t8-scenes .hero-bottom a{margin-right:120px;font-size:11px}.cm-public-design .t8-scenes .hero-platforms{bottom:89px}.cm-public-design .t8-scenes .hero-copy{bottom:158px}}.cm-public-design .t8-scenes{--twitch:#9146ff;--youtube:#ff0033;--kick:#53fc18;--telegram:#00baff;--discord:#5865f2;--muted:#c5d6e4;--blue:#18baff;--white:#f5f9ff;--ink:#0b253b}.cm-public-design .t8-scenes{font-size:18px}.cm-public-design .t8-scenes .world-base{background:radial-gradient(ellipse at 55% 15%,#103e75 0,#07121f 68%)}.cm-public-design .t8-scenes .world-blue{background:radial-gradient(ellipse at 25% 55%,#064e73,#091a36 75%)}.cm-public-design .t8-scenes .world-night{background:#091321}.cm-public-design .t8-scenes .t7-nav{background:#07121f90}.cm-public-design .t8-scenes .t7-nav.scrolled{background:#07121ff5}.cm-public-design .t8-scenes .t7-nav nav a,.cm-public-design .t8-scenes .login{font-size:16px}.cm-public-design .t8-scenes .nav-actions .t7-button{font-size:15px}.cm-public-design .t8-scenes .t7-button{background:#1abaff;color:#051a2b;min-height:56px;font-size:16px;padding:15px 24px;gap:30px}.cm-public-design .t8-scenes .t7-button.secondary{color:inherit;background:transparent}.cm-public-design .t8-scenes .scene-heading p,.cm-public-design .t8-scenes .bio-copy p{font-size:20px;line-height:1.65}.cm-public-design .t8-scenes .demo-label{font-size:14px;color:#ccdeeb}.cm-public-design .t8-scenes .scene-heading{margin-bottom:70px}.cm-public-design .t8-scenes .hero-camera{min-height:850px}.cm-public-design .t8-scenes .core{width:clamp(440px,46vw,720px);margin-left:calc(clamp(440px,46vw,720px)/-2);margin-top:calc(clamp(440px,46vw,720px)/-2);top:29%}.cm-public-design .t8-scenes .core-rim{background:conic-gradient(from 10deg,#168fff,#00baff 20%,#277cbb 36%,#9146ff 57%,#2854b7 72%,#168fff);box-shadow:inset 2px 4px 12px #8adfff70,0 45px 100px #02071370}.cm-public-design .t8-scenes .core-inner{inset:5%;background:radial-gradient(ellipse at 50% 25%,#123f6a,#071424 74%);border-color:#3fc8ff80}.cm-public-design .t8-scenes .core-mark{inset:29%;transform:rotate(0deg)}.cm-public-design .t8-scenes .core-mark img{filter:none}.cm-public-design .t8-scenes .core-light{border-top-color:#74dcff;transform:rotate(0)}.cm-public-design .t8-scenes .hero-copy{bottom:150px}.cm-public-design .t8-scenes .hero-copy h1{font-size:clamp(72px,8.2vw,136px);line-height:1.01;max-width:1100px}.cm-public-design .t8-scenes .hero-copy h1 span{color:#28c2ff}.cm-public-design .t8-scenes .hero-copy p{font-size:20px;max-width:39ch;color:#e2eef7}.cm-public-design .t8-scenes .hero-actions .t7-button{font-size:16px}.cm-public-design .t8-scenes .hero-platforms{bottom:150px;right:var(--gutter);max-width:385px;gap:12px;justify-content:flex-end;font-size:17px;opacity:1}.cm-public-design .t8-scenes .platform-chip{display:inline-flex;align-items:center;gap:12px;border-radius:8px;padding:12px 17px;line-height:1.3;font-weight:600;color:white;background:#17283c}.cm-public-design .t8-scenes .platform-chip svg{width:23px;height:23px;flex:none}.cm-public-design .t8-scenes .platform-chip.twitch{background:#9146ff;color:white}.cm-public-design .t8-scenes .platform-chip.youtube{background:#da002c;color:white}.cm-public-design .t8-scenes .platform-chip.kick{background:#53fc18;color:#092500}.cm-public-design .t8-scenes .platform-chip.telegram{background:#00baff;color:#061f30}.cm-public-design .t8-scenes .platform-chip.discord{background:#5865f2;color:white}.cm-public-design .t8-scenes .hero-bottom{font-size:14px;color:#d0e1ed;bottom:34px}.cm-public-design .t8-scenes .hero-bottom a{margin-right:150px}.cm-public-design .t8-scenes .hero-bottom>span{max-width:310px}.cm-public-design .t8-scenes .hero-platforms span:nth-child(4),.cm-public-design .t8-scenes .hero-platforms span:nth-child(5){opacity:1}.cm-public-design .t8-scenes .source{display:flex;align-items:center;gap:16px;font-size:40px;color:#f5f9ff}.cm-public-design .t8-scenes .source svg{width:42px;height:42px;fill:currentColor}.cm-public-design .t8-scenes .source.twitch svg{color:#aa6aff}.cm-public-design .t8-scenes .source.youtube svg{color:#ff2447}.cm-public-design .t8-scenes .source.kick svg{color:#53fc18}.cm-public-design .t8-scenes .network-lines{stroke-width:2}.cm-public-design .t8-scenes .wire-twitch{stroke:#a66aff}.cm-public-design .t8-scenes .wire-youtube{stroke:#ff294e}.cm-public-design .t8-scenes .wire-kick{stroke:#53fc18}.cm-public-design .t8-scenes .network-core img{width:85px;height:85px}.cm-public-design .t8-scenes .flow-event{font-size:18px;opacity:1}.cm-public-design .t8-scenes .event-time{font-size:14px;color:#cee2f0}.cm-public-design .t8-scenes .automation-intro p{font-size:15px;color:#ccdeeb}.cm-public-design .t8-scenes .event-dot{width:9px;height:9px;background:#53fc18}.cm-public-design .t8-scenes .manifesto h2 span:nth-child(2){color:#1abaff}.cm-public-design .t8-scenes .manifesto p{color:#d2e7f2;font-size:22px}.cm-public-design .t8-scenes .analytics-sources{font-size:17px;color:#e0f1fc;gap:6%}.cm-public-design .t8-scenes .analytics-sources span{border-bottom:3px solid;padding:9px 0}.cm-public-design .t8-scenes .analytics-sources span:nth-child(1){border-color:#9146ff}.cm-public-design .t8-scenes .analytics-sources span:nth-child(2){border-color:#ff0033}.cm-public-design .t8-scenes .analytics-sources span:nth-child(3){border-color:#53fc18}.cm-public-design .t8-scenes .analytics-sources span:nth-child(4){border-color:#00baff}.cm-public-design .t8-scenes .analytics-sources span:nth-child(5){border-color:#5865f2}.cm-public-design .t8-scenes .window-bar{font-size:15px}.cm-public-design .t8-scenes .window-bar>span{color:#d2e2ee}.cm-public-design .t8-scenes .dashboard-main h3{font-size:29px}.cm-public-design .t8-scenes .metrics span{font-size:15px;color:#d0e1ed}.cm-public-design .t8-scenes .metrics strong{font-size:52px}.cm-public-design .t8-scenes .chart-head h4{font-size:17px}.cm-public-design .t8-scenes .bar-column>span{font-size:13px;color:#ccdfed}.cm-public-design .t8-scenes .bar-stack i{background:#a05aff}.cm-public-design .t8-scenes .bar-stack .bar-1{background:#ff2447}.cm-public-design .t8-scenes .bar-stack .bar-2{background:#53fc18}.cm-public-design .t8-scenes .chart-legend{font-size:14px;color:#deedf6}.cm-public-design .t8-scenes .chart-legend span:before{background:#a05aff}.cm-public-design .t8-scenes .chart-legend span:nth-child(2):before{background:#ff2447}.cm-public-design .t8-scenes .chart-legend span:nth-child(3):before{background:#53fc18}.cm-public-design .t8-scenes .bars{height:215px}.cm-public-design .t8-scenes .vault-permission{opacity:1}.cm-public-design .t8-scenes .vault-permission div{font-size:15px;color:#f4f9ff}.cm-public-design .t8-scenes .vault-permission span{color:#d1e4ef}.cm-public-design .t8-scenes .media-caption{font-size:15px}.cm-public-design .t8-scenes .media-caption span{color:#d2e4ee}.cm-public-design .t8-scenes .media-piece>span,.cm-public-design .t8-scenes .vault-metadata{font-size:15px}.cm-public-design .t8-scenes .vault-metadata{max-width:270px}.cm-public-design .t8-scenes .vault-metadata>span{color:#d3e8f5}.cm-public-design .t8-scenes .media-document{background:#ffcb38;color:#241a02}.cm-public-design .t8-scenes .media-document i{background:#785c00}.cm-public-design .t8-scenes .media-image{background:#5b28b2}.cm-public-design .t8-scenes .media-orb{border-color:#c29aff}.cm-public-design .t8-scenes .vault-art>div:first-child{border-color:#168fff}.cm-public-design .t8-scenes .vault-art>div:nth-child(2){border-color:#803eff}.cm-public-design .t8-scenes .vault-art>div:nth-child(3){border-color:#26d4e9}.cm-public-design .t8-scenes .creator-world{background:linear-gradient(180deg,#0b2540 0,#d9ebf0 180px,#d9ebf0 calc(100% - 180px),#091321 100%);padding:180px 0;position:relative;margin:0}.cm-public-design .t8-scenes .bio{background:#d9ebf0;color:#0b253b;padding-top:95px;padding-bottom:105px}.cm-public-design .t8-scenes .bio-copy p{color:#26495e}.cm-public-design .t8-scenes .bio>.demo-label{color:#294b60}.cm-public-design .t8-scenes .bio-page{color:#112d40}.cm-public-design .t8-scenes .bio-page p{font-size:15px;color:#355366}.cm-public-design .t8-scenes .bio-address,.cm-public-design .t8-scenes .bio-social,.cm-public-design .t8-scenes .bio-link,.cm-public-design .t8-scenes .bio-signature{font-size:14px}.cm-public-design .t8-scenes .bio-link>span:not(.play-mark),.cm-public-design .t8-scenes .bio-link small{font-size:13px}.cm-public-design .t8-scenes .bio-page{width:365px;padding-bottom:24px}.cm-public-design .t8-scenes .bio-cover{background:linear-gradient(135deg,#7535e9,#2967dc)}.cm-public-design .t8-scenes .bio-avatar{background:#5424b0;color:white}.cm-public-design .t8-scenes .bio-link.featured{background:#5721b6}.cm-public-design .t8-scenes .bio-link small{color:#e3d5ff}.cm-public-design .t8-scenes .bio-satellites span{font-size:16px;background:#f4fafc;color:#102c42;border:1px solid #91afbf}.cm-public-design .t8-scenes .bio-satellites span:nth-child(1){background:#9146ff;color:#fff;border-color:transparent}.cm-public-design .t8-scenes .bio-satellites span:nth-child(2){background:#da002c;color:#fff;border-color:transparent}.cm-public-design .t8-scenes .bio-satellites span:nth-child(3){background:#53fc18;color:#092500;border-color:transparent}.cm-public-design .t8-scenes .bio-satellites span:nth-child(4){background:#00baff;color:#061f30;border-color:transparent}.cm-public-design .t8-scenes .bio-satellites span:nth-child(5){background:#5865f2;color:#fff;border-color:transparent}.cm-public-design .t8-scenes .bio-satellites span:nth-child(6){background:#ffcb38;color:#241a02;border-color:transparent}.cm-public-design .t8-scenes .widgets{padding-top:110px}.cm-public-design .t8-scenes .broadcast-top,.cm-public-design .t8-scenes .broadcast-bottom{font-size:15px}.cm-public-design .t8-scenes .broadcast-top>span{color:#d7e7f1}.cm-public-design .t8-scenes .live-label{font-size:15px}.cm-public-design .t8-scenes .broadcast-screen{height:560px}.cm-public-design .t8-scenes .broadcast-alert{background:#9146ff;color:#fff;opacity:1;max-width:85%}.cm-public-design .t8-scenes .broadcast-alert strong{font-size:26px}.cm-public-design .t8-scenes .broadcast-alert>span:last-child{font-size:14px}.cm-public-design .t8-scenes .alert-star{background:#53fc18}.cm-public-design .t8-scenes .broadcast-chat{font-size:14px;max-width:310px;background:#071b2cf5}.cm-public-design .t8-scenes .broadcast-chat b{font-size:16px}.cm-public-design .t8-scenes .broadcast-chat p{color:#e0eff9}.cm-public-design .t8-scenes .broadcast-gift,.cm-public-design .t8-scenes .broadcast-raid{font-size:15px;background:#102a40;color:#f5f9ff;opacity:1}.cm-public-design .t8-scenes .broadcast-gift{border-left:1px solid #53fc18}.cm-public-design .t8-scenes .broadcast-raid{border-left:1px solid #9146ff}.cm-public-design .t8-scenes .tts{font-size:14px;opacity:1}.cm-public-design .t8-scenes .tts i{background:#1ad2ff}.cm-public-design .t8-scenes .broadcast-art i:first-child{border-color:#167cfa}.cm-public-design .t8-scenes .broadcast-art i:nth-child(2){border-color:#5423b8}.cm-public-design .t8-scenes .broadcast-art i:nth-child(3){border-color:#0093c4}.cm-public-design .t8-scenes .widget-note{font-size:15px;color:#ccdeeb}.cm-public-design .t8-scenes .proof blockquote>p{font-size:clamp(30px,3.7vw,58px)}.cm-public-design .t8-scenes .proof cite{font-size:18px}.cm-public-design .t8-scenes .proof footer a{font-size:16px;color:#bce6ff}.cm-public-design .t8-scenes .proof{padding-top:100px}.cm-public-design .t8-scenes .creator-monogram{background:#7533e2}.cm-public-design .t8-scenes .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}.cm-public-design .t8-scenes .cm-t4-tools{padding-top:80px;padding-bottom:60px}.cm-public-design .t8-scenes .cm-t4-tools-heading{max-width:860px;margin-bottom:60px}.cm-public-design .t8-scenes .cm-t4-tools-heading h2{font-size:clamp(44px,5.4vw,86px);max-width:17ch;margin-bottom:28px}.cm-public-design .t8-scenes .cm-t4-tools-heading p{font-size:20px;color:#ccdeeb;max-width:52ch}.cm-public-design .t8-scenes .cm-t4-product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.cm-public-design .t8-scenes .cm-t4-product{min-width:0;display:flex;flex-direction:column;padding:34px;background:#11243a;border-radius:12px}.cm-public-design .t8-scenes .cm-t4-product-telegram{grid-column:span 2;background:#073d59}.cm-public-design .t8-scenes .cm-t4-product-studio{background:#12368b}.cm-public-design .t8-scenes .cm-t4-product-creatorhub{background:#3b177a}.cm-public-design .t8-scenes .cm-t4-product-pagelinks{background:#351454}.cm-public-design .t8-scenes .cm-t4-product-viewinapp{background:#550b22}.cm-public-design .t8-scenes .cm-t4-product-fileshare{background:#403008}.cm-public-design .t8-scenes .cm-t4-product-widget{grid-column:span 2;background:#0b3d2d}.cm-public-design .t8-scenes .cm-t4-product-title{display:flex;align-items:center;gap:18px;margin-bottom:22px}.cm-public-design .t8-scenes .cm-t4-product h3{font-size:30px;line-height:1.2}.cm-public-design .t8-scenes .cm-t4-product>p{font-size:17px;line-height:1.7;color:#e1edf6;margin-bottom:24px;max-width:54ch}.cm-public-design .t8-scenes .cm-t4-product ul{list-style:none;padding:0;margin:0 0 25px;display:grid;gap:12px}.cm-public-design .t8-scenes .cm-t4-product li{display:flex;gap:12px;align-items:baseline;font-size:15px;line-height:1.5;color:#f1f6fc}.cm-public-design .t8-scenes .tool-check{height:8px;width:12px;transform:rotate(-45deg);border-bottom:1px solid #8ee6ff;border-left:1px solid #8ee6ff;flex:none}.cm-public-design .t8-scenes .tool-symbol{display:grid;place-items:center;width:36px;height:36px;flex:none;color:#3ccbff}.cm-public-design .t8-scenes .tool-symbol svg{width:32px;height:32px}.cm-public-design .t8-scenes .cm-t4-product-viewinapp .tool-symbol{color:#ff4969}.cm-public-design .t8-scenes .cm-t4-product-fileshare .tool-symbol{color:#ffcb38}.cm-public-design .t8-scenes .cm-t4-product-widget .tool-symbol{color:#53fc18}.cm-public-design .t8-scenes .tool-geometry{width:25px;height:25px;border:2px solid currentColor;border-radius:5px;display:block;position:relative}.cm-public-design .t8-scenes .tool-geometry:after{content:'';position:absolute;left:5px;top:5px;width:11px;height:11px;border:1px solid currentColor;border-radius:2px}.cm-public-design .t8-scenes .tool-geometry.creatorhub{border-radius:50%}.cm-public-design .t8-scenes .tool-geometry.pagelinks{width:30px;height:15px;border-radius:12px;transform:rotate(-35deg)}.cm-public-design .t8-scenes .tool-geometry.fileshare{border-top-width:5px}.cm-public-design .t8-scenes .tool-geometry.widget{border-radius:50%;border-right-color:transparent}.cm-public-design .t8-scenes .cm-text-link{display:flex;align-items:center;gap:22px;min-height:48px;font-size:16px;font-weight:600;margin-top:auto;width:fit-content;text-decoration:underline}.cm-public-design .t8-scenes .cm-t4-platforms{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px}.cm-public-design .t8-scenes .platform-color{display:flex;align-items:center;gap:8px;font-size:14px;color:white}.cm-public-design .t8-scenes .platform-color svg{width:22px;height:22px}.cm-public-design .t8-scenes .platform-color.twitch svg{color:#b67dff}.cm-public-design .t8-scenes .platform-color.youtube svg{color:#ff3b59}.cm-public-design .t8-scenes .platform-color.kick svg{color:#53fc18}.cm-public-design .t8-scenes .platform-color.telegram svg{color:#00baff}.cm-public-design .t8-scenes .platform-color.discord svg{color:#969fff}.cm-public-design .t8-scenes .billing-control button{font-size:16px}.cm-public-design .t8-scenes .billing-control>span{font-size:15px;color:#cedfeb}.cm-public-design .t8-scenes .plan-description{font-size:17px;color:#d1e1ed}.cm-public-design .t8-scenes .plan-content li{font-size:16px;color:#e3eff7}.cm-public-design .t8-scenes .plan-price small{font-size:14px;color:#d1e1ed}.cm-public-design .t8-scenes .annual-total,.cm-public-design .t8-scenes .pricing-notes{font-size:14px;color:#d1e1ed}.cm-public-design .t8-scenes .faq details p{font-size:17px;color:#d1e1ed}.cm-public-design .t8-scenes .footer-wordmark img{height:auto;max-height:none;aspect-ratio:5.1;object-fit:contain;opacity:1}.cm-public-design .t8-scenes .footer-top nav{font-size:16px}.cm-public-design .t8-scenes .footer-bottom{font-size:14px;color:#cedfeb}.cm-public-design .t8-scenes .motion-toggle{font-size:14px;padding:12px 16px;min-height:46px;background:#071726;border-color:#5e879f;right:16px;bottom:16px}.cm-public-design .t8-scenes .final .t7-button{min-width:200px}.cm-public-design .t8-scenes .final p{font-size:20px}.cm-public-design .t8-scenes .footer-top>p{font-size:28px}.cm-public-design .t8-scenes .catalog>a p,.cm-public-design .t8-scenes .product-chapters p{font-size:18px}.cm-public-design .t8-scenes .product-chapters h2{font-size:36px}@media(hover:hover) and (pointer:fine){.cm-public-design .t8-scenes .t7-button:hover{background:#68d2ff}.cm-public-design .t8-scenes .cm-t4-product a:hover{text-decoration:underline}.cm-public-design .t8-scenes .cm-text-link:hover .arrow{transform:translateX(4px)}}@media(max-width:1100px){.cm-public-design .t8-scenes .hero-copy h1{font-size:8.5vw}.cm-public-design .t8-scenes .hero-copy p{max-width:34ch;font-size:18px}.cm-public-design .t8-scenes .hero-platforms{bottom:135px;max-width:330px;font-size:15px}.cm-public-design .t8-scenes .platform-chip{padding:10px 13px;gap:9px}.cm-public-design .t8-scenes .platform-chip svg{width:20px;height:20px}.cm-public-design .t8-scenes .hero-copy{bottom:220px}.cm-public-design .t8-scenes .hero-bottom>span{font-size:13px}.cm-public-design .t8-scenes .hero-bottom a{font-size:13px}.cm-public-design .t8-scenes .scene-heading p{font-size:18px}.cm-public-design .t8-scenes .cm-t4-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cm-public-design .t8-scenes .cm-t4-product-widget{grid-column:auto}.cm-public-design .t8-scenes .cm-t4-product h3{font-size:27px}.cm-public-design .t8-scenes .cm-t4-product{padding:28px}.cm-public-design .t8-scenes .bio-page{width:320px}.cm-public-design .t8-scenes .source{font-size:32px}.cm-public-design .t8-scenes .source svg{width:34px;height:34px}}@media(max-width:767px){.cm-public-design .t8-scenes{font-size:17px}.cm-public-design .t8-scenes .hero-camera{height:auto;min-height:930px}.cm-public-design .t8-scenes .core{width:360px;margin-left:-180px;margin-top:-180px;top:205px}.cm-public-design .t8-scenes .hero-copy{top:370px;bottom:auto;left:24px;right:24px}.cm-public-design .t8-scenes .hero-copy h1{font-size:clamp(49px,11.5vw,76px);line-height:1.03;max-width:650px}.cm-public-design .t8-scenes .hero-copy h1 span{max-width:none}.cm-public-design .t8-scenes .hero-copy p{font-size:17px;line-height:1.55;max-width:34ch;margin-top:22px}.cm-public-design .t8-scenes .hero-actions{margin-top:24px;gap:10px;flex-wrap:wrap}.cm-public-design .t8-scenes .hero-actions .t7-button{font-size:14px;padding:13px 15px;min-height:52px;gap:15px}.cm-public-design .t8-scenes .hero-platforms{top:760px;bottom:auto;left:24px;right:24px;max-width:500px;justify-content:flex-start;gap:9px;font-size:14px}.cm-public-design .t8-scenes .platform-chip{padding:9px 12px;gap:8px;min-height:42px}.cm-public-design .t8-scenes .platform-chip svg{width:20px;height:20px}.cm-public-design .t8-scenes .hero-bottom{bottom:20px;font-size:14px}.cm-public-design .t8-scenes .hero-bottom a{font-size:14px;margin-right:0;max-width:220px;line-height:1.4}.cm-public-design .t8-scenes .hero-bottom>span{display:none}.cm-public-design .t8-scenes .hero-platforms .platform-chip{opacity:1}.cm-public-design .t8-scenes .motion-toggle{bottom:14px;right:14px;font-size:0;width:46px;height:46px;padding:0}.cm-public-design .t8-scenes .motion-toggle:after{content:'';display:block;width:12px;height:14px;border-left:3px solid;border-right:3px solid;margin:auto}.cm-public-design .t8-scenes .motion-toggle[aria-pressed=true]:after{height:0;width:0;border-left:11px solid;border-right:0;border-top:7px solid transparent;border-bottom:7px solid transparent}.cm-public-design .t8-scenes .scene-heading p,.cm-public-design .t8-scenes .bio-copy p{font-size:18px}.cm-public-design .t8-scenes .scene-heading{margin-bottom:50px}.cm-public-design .t8-scenes .t7-button{font-size:16px;min-height:54px}.cm-public-design .t8-scenes .source{font-size:23px;gap:9px;flex-direction:column}.cm-public-design .t8-scenes .source svg{width:34px;height:34px}.cm-public-design .t8-scenes .sources{padding:0 5%}.cm-public-design .t8-scenes .network-core{font-size:29px}.cm-public-design .t8-scenes .network-core img{width:62px;height:62px}.cm-public-design .t8-scenes .flow-event{font-size:15px;gap:10px;flex-wrap:wrap}.cm-public-design .t8-scenes .event-time{font-size:12px}.cm-public-design .t8-scenes .automation-intro p{font-size:14px}.cm-public-design .t8-scenes .analytics-sources{font-size:14px;gap:9px 15px}.cm-public-design .t8-scenes .window-bar{font-size:13px;align-items:flex-start}.cm-public-design .t8-scenes .window-bar strong{font-size:16px}.cm-public-design .t8-scenes .window-bar>span{font-size:13px;max-width:90px;text-align:right}.cm-public-design .t8-scenes .dashboard{grid-template-columns:36px 1fr}.cm-public-design .t8-scenes .dashboard-main{padding:22px 13px}.cm-public-design .t8-scenes .dashboard-main h3{font-size:23px}.cm-public-design .t8-scenes .metrics{gap:8px}.cm-public-design .t8-scenes .metrics span{font-size:13px;min-height:38px;max-width:11ch;line-height:1.4}.cm-public-design .t8-scenes .metrics strong{font-size:34px}.cm-public-design .t8-scenes .chart-head h4{font-size:15px;max-width:17ch}.cm-public-design .t8-scenes .chart-head>span{font-size:20px}.cm-public-design .t8-scenes .bar-column>span{font-size:12px}.cm-public-design .t8-scenes .chart-legend{font-size:13px;gap:10px 16px;flex-wrap:wrap}.cm-public-design .t8-scenes .bars{height:185px;gap:11px}.cm-public-design .t8-scenes .demo-label{font-size:13px;margin-top:30px}.cm-public-design .t8-scenes .vault-stage{height:510px}.cm-public-design .t8-scenes .vault-art{height:185px}.cm-public-design .t8-scenes .media-caption{font-size:14px;display:block}.cm-public-design .t8-scenes .media-caption span{font-size:13px;display:block;margin-top:4px}.cm-public-design .t8-scenes .vault-permission div{font-size:13px}.cm-public-design .t8-scenes .vault-metadata{font-size:13px;max-width:220px;bottom:-5px}.cm-public-design .t8-scenes .media-piece>span{font-size:13px}.cm-public-design .t8-scenes .vault-folder{bottom:30px}.cm-public-design .t8-scenes .vault-folder>span{font-size:17px}.cm-public-design .t8-scenes .creator-world{padding:120px 0;background:linear-gradient(180deg,#0b2540 0,#d9ebf0 120px,#d9ebf0 calc(100% - 120px),#091321 100%)}.cm-public-design .t8-scenes .bio{padding-top:60px;padding-bottom:65px;gap:60px}.cm-public-design .t8-scenes .bio-copy h2{font-size:49px}.cm-public-design .t8-scenes .bio-stage{margin:0 8px;padding-top:65px}.cm-public-design .t8-scenes .bio-page{width:310px;padding-inline:20px}.cm-public-design .t8-scenes .bio-address{margin-inline:-20px;font-size:13px}.cm-public-design .t8-scenes .bio-cover{margin-inline:-20px}.cm-public-design .t8-scenes .bio-page p{font-size:14px}.cm-public-design .t8-scenes .bio-social{font-size:13px;gap:9px}.cm-public-design .t8-scenes .bio-link{font-size:14px}.cm-public-design .t8-scenes .bio-satellites span{font-size:14px;padding:9px 12px}.cm-public-design .t8-scenes .bio>.demo-label{font-size:13px}.cm-public-design .t8-scenes .broadcast{margin-inline:-8px}.cm-public-design .t8-scenes .broadcast-top{font-size:14px;align-items:center}.cm-public-design .t8-scenes .broadcast-top>span{font-size:11px}.cm-public-design .t8-scenes .broadcast-screen{height:600px}.cm-public-design .t8-scenes .broadcast-alert{left:14px;right:14px;max-width:none;gap:10px;padding:18px 14px;flex-wrap:wrap}.cm-public-design .t8-scenes .broadcast-alert strong{font-size:18px}.cm-public-design .t8-scenes .broadcast-alert>span:last-child{font-size:13px}.cm-public-design .t8-scenes .tts{top:170px;left:18px;font-size:14px;gap:14px}.cm-public-design .t8-scenes .tts>div{height:40px}.cm-public-design .t8-scenes .broadcast-chat{font-size:13px;left:14px;right:14px;bottom:18px;max-width:none;padding:18px}.cm-public-design .t8-scenes .broadcast-chat b{font-size:14px}.cm-public-design .t8-scenes .broadcast-chat p{margin-top:8px}.cm-public-design .t8-scenes .broadcast-gift,.cm-public-design .t8-scenes .broadcast-raid{font-size:13px;max-width:calc(100% - 28px);line-height:1.5;padding:12px 16px}.cm-public-design .t8-scenes .broadcast-gift{bottom:256px}.cm-public-design .t8-scenes .broadcast-raid{bottom:201px}.cm-public-design .t8-scenes .broadcast-bottom{font-size:14px}.cm-public-design .t8-scenes .widget-note{font-size:14px;line-height:1.65}.cm-public-design .t8-scenes .cm-t4-tools{padding-top:55px;padding-bottom:50px}.cm-public-design .t8-scenes .cm-t4-tools-heading h2{font-size:43px;max-width:15ch}.cm-public-design .t8-scenes .cm-t4-tools-heading p{font-size:18px}.cm-public-design .t8-scenes .cm-t4-product-grid{grid-template-columns:1fr;gap:18px}.cm-public-design .t8-scenes .cm-t4-product-telegram,.cm-public-design .t8-scenes .cm-t4-product-widget{grid-column:auto}.cm-public-design .t8-scenes .cm-t4-product{padding:26px}.cm-public-design .t8-scenes .cm-t4-product h3{font-size:28px}.cm-public-design .t8-scenes .cm-t4-product>p{font-size:17px}.cm-public-design .t8-scenes .cm-t4-product li{font-size:15px}.cm-public-design .t8-scenes .cm-t4-platforms{gap:14px}.cm-public-design .t8-scenes .platform-color{font-size:13px}.cm-public-design .t8-scenes .platform-color svg{width:20px;height:20px}.cm-public-design .t8-scenes .proof blockquote>p{font-size:29px}.cm-public-design .t8-scenes .proof cite{font-size:16px}.cm-public-design .t8-scenes .proof footer a{font-size:15px}.cm-public-design .t8-scenes .billing-control button{font-size:16px}.cm-public-design .t8-scenes .billing-control>span{font-size:14px;line-height:1.6}.cm-public-design .t8-scenes .plan-description{font-size:15px}.cm-public-design .t8-scenes .plan-content li{font-size:15px}.cm-public-design .t8-scenes .plan-price small{font-size:13px}.cm-public-design .t8-scenes .plan-price strong{font-size:29px}.cm-public-design .t8-scenes .annual-total,.cm-public-design .t8-scenes .pricing-notes{font-size:14px}.cm-public-design .t8-scenes .faq summary{font-size:18px}.cm-public-design .t8-scenes .faq details p{font-size:16px}.cm-public-design .t8-scenes .final p{font-size:18px}.cm-public-design .t8-scenes .footer-top nav{font-size:16px}.cm-public-design .t8-scenes .footer-bottom{font-size:13px;display:block}.cm-public-design .t8-scenes .footer-bottom a{display:block;max-width:none;text-align:left;margin-top:12px;padding-right:55px}.cm-public-design .t8-scenes .footer-wordmark{margin:55px -5px 35px}.cm-public-design .t8-scenes .footer-top>p{font-size:27px}.cm-public-design .t8-scenes .catalog>a p,.cm-public-design .t8-scenes .product-chapters p{font-size:17px}.cm-public-design .t8-scenes .catalog>a h2{font-size:29px}.cm-public-design .t8-scenes .back-link{font-size:16px}.cm-public-design .t8-scenes .product-chapters h2{font-size:31px}.cm-public-design .t8-scenes .no-motion .hero-camera,.cm-public-design .t8-scenes .motion-reduced .hero-camera{min-height:930px}.cm-public-design .t8-scenes .motion-reduced .core,.cm-public-design .t8-scenes .no-motion .core{top:205px;transform:scale(.9)}}@media(max-width:767px) and (max-height:740px){.cm-public-design .t8-scenes .hero-camera,.cm-public-design .t8-scenes .motion-reduced .hero-camera,.cm-public-design .t8-scenes .no-motion .hero-camera{min-height:870px}.cm-public-design .t8-scenes .core,.cm-public-design .t8-scenes .motion-reduced .core,.cm-public-design .t8-scenes .no-motion .core{top:155px;width:310px;margin-left:-155px;margin-top:-155px}.cm-public-design .t8-scenes .hero-copy{top:295px}.cm-public-design .t8-scenes .hero-copy h1{font-size:47px}.cm-public-design .t8-scenes .hero-copy p{font-size:16px}.cm-public-design .t8-scenes .hero-platforms{top:680px}.cm-public-design .t8-scenes .hero-bottom{bottom:22px}}@media(prefers-reduced-motion:reduce){.cm-public-design .t8-scenes .hero-camera{min-height:850px}.cm-public-design .t8-scenes .core{transform:scale(.75);top:29%}}.cm-public-design .t8-scenes .core-mark{inset:25%}@media(max-width:767px){.cm-public-design .t8-scenes .core-mark{inset:19%}.cm-public-design .t8-scenes .hero-camera,.cm-public-design .t8-scenes .no-motion .hero-camera,.cm-public-design .t8-scenes .motion-reduced .hero-camera{min-height:880px}.cm-public-design .t8-scenes .hero-copy{top:350px}.cm-public-design .t8-scenes .hero-actions .t7-button{padding:13px 12px;gap:10px;font-size:14px}.cm-public-design .t8-scenes .hero-platforms{top:710px}}@media(max-width:767px) and (max-height:740px){.cm-public-design .t8-scenes .hero-camera,.cm-public-design .t8-scenes .no-motion .hero-camera,.cm-public-design .t8-scenes .motion-reduced .hero-camera{min-height:820px}.cm-public-design .t8-scenes .hero-copy{top:295px}.cm-public-design .t8-scenes .hero-platforms{top:635px}}.cm-public-design .t8-scenes .motion-toggle{z-index:55;width:46px;height:46px;padding:0;font-size:0}.cm-public-design .t8-scenes .motion-toggle:after{content:'';display:block;width:12px;height:14px;border-left:3px solid;border-right:3px solid;margin:auto}.cm-public-design .t8-scenes .motion-toggle[aria-pressed=true]:after{height:0;width:0;border-left:11px solid;border-right:0;border-top:7px solid transparent;border-bottom:7px solid transparent}@media(max-width:767px){.cm-public-design .t8-scenes .motion-toggle{top:18px;right:90px;bottom:auto}} /* Source: t8/workspace.css */ /* CrewMaster T5 / Night editorial. Self-hosted Outfit; code-native product evidence. */ @font-face { font-family: 'T5 Outfit'; src: url('/assets-graphic/home/outfit-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'T5 Outfit'; src: url('/assets-graphic/home/outfit-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'T5 Outfit'; src: url('/assets-graphic/home/outfit-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } .cm-public-design.t8-workspace { --primary: 197 100% 50%; --primary-foreground: 210 30% 7%; --background: 240 4% 8%; --foreground: 40 14% 94%; --card: 240 4% 12%; --card-foreground: 40 14% 94%; --muted: 240 4% 16%; --muted-foreground: 240 5% 70%; --border: 240 4% 25%; --input: 240 4% 38%; --secondary: 240 4% 20%; --secondary-foreground: 40 14% 94%; --ring: 197 100% 50%; --popover: 240 4% 12%; --popover-foreground: 40 14% 94%; --cm-brand: #00b7ff; --cm-link: #00b7ff; --cm-focus: #00b7ff; --cm-page: #141415; --cm-panel: #1d1d20; --cm-panel-raised: #28282c; --cm-ink: #f2f1ed; --cm-secondary: #b2b2bc; --cm-line: #3d3d42; --cm-width: 1328px; --cm-radius: 4px; --cm-panel-radius: 6px; font-family: 'T5 Outfit',sans-serif; font-size: 16px; background: var(--cm-page); color: var(--cm-ink); line-height: 1.65; } .t8-workspace :is(h1,h2,h3,h4,button,input,select,textarea) { font-family: 'T5 Outfit',sans-serif; } .t8-workspace :is(h1,h2,h3) { font-weight: 600; letter-spacing: -.035em; } .t8-workspace h1 { font-size: clamp(48px,7vw,100px); line-height: .98; } .t8-workspace h2 { font-size: clamp(30px,3.7vw,52px); line-height: 1.1; } .t8-workspace p { text-wrap: pretty; } .t8-workspace ::selection { background: #00b7ff; color: #101820; } .t8-workspace .cm-container { width: calc(100% - 80px); max-width: var(--cm-width); } .t8-workspace :is(a,button,input,select,summary):focus-visible { outline: 2px solid #00b7ff; outline-offset: 5px; } .t8-workspace [id] { scroll-margin-top: 108px; } .t8-workspace .grid-pattern,.t8-workspace [data-cm-motion],.t8-workspace .cm-nav-progress { display: none; } .t8-workspace :is(.cm-button,.cm-text-link) { font-family: 'T5 Outfit',sans-serif; font-size: 15px; font-weight: 600; } .t8-workspace .cm-button { min-height: 50px; border-radius: 4px; padding: 13px 22px; } .t8-workspace .cm-button-primary { background: var(--cm-brand); color: #081b24; border: 0; box-shadow: none; } .t8-workspace .cm-button-primary::after { display: none; } .t8-workspace .cm-button-primary:hover { background: #5ed2ff; color: #081b24; } .t8-workspace .cm-button-secondary { background: transparent; border-color: #66666d; color: var(--cm-ink); } .t8-workspace .cm-text-link { color: var(--cm-link); gap: 12px; text-underline-offset: 5px; } .t8-workspace .bg-primary { background-color: var(--cm-brand); color: #081b24; } .t8-workspace .text-primary { color: var(--cm-link); } .t8-workspace .gradient-text { background: none; -webkit-text-fill-color: currentColor; color: var(--cm-link); } /* A flat masthead, connected to the page grid rather than floating over it. */ .cm-public-design.t8-workspace .cm-public-nav, .cm-public-design.t8-workspace.cm-is-scrolled .cm-public-nav { position: sticky; top: 0; left: auto; transform: none; width: 100%; margin: 0; background: #141415f7; border: 0; border-bottom: 1px solid var(--cm-line); border-radius: 0; backdrop-filter: none; box-shadow: none; } .t8-workspace .cm-public-nav > div { max-width: 1408px; padding-inline: 40px; } .t8-workspace .cm-public-nav > div > div { height: 78px; } .t8-workspace .cm-public-nav a { font-size: 15px; } .t8-workspace .cm-navbar-brand-label { color: var(--cm-ink); } .t8-workspace #mobile-menu { border-radius: 0; background: #1d1d20; } .t8-workspace .cm-public-nav .bg-primary { border-radius: 4px; box-shadow: none; padding: 10px 22px; } .t8-workspace .t5-skip { position: fixed; left: 20px; top: -100px; z-index: 9999; background: #00b7ff; color: #081b24; padding: 12px 20px; } .t8-workspace .t5-skip:focus { top: 12px; } /* Home: manifesto, then one product workbench. */ .t8-workspace .t5-hero { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(260px,.65fr); align-items: end; gap: 60px; padding-block: 80px 64px; } .t8-workspace .t5-hero h1 { font-size: clamp(60px,7.9vw,112px); line-height: .97; margin: 0; letter-spacing: -.04em; text-wrap: initial; } .t8-workspace .t5-hero h1 span { color: var(--cm-brand); } .t8-workspace .t5-hero-aside > p { color: #c2c2c9; font-size: 17px; line-height: 1.75; margin-bottom: 24px; } .t8-workspace .t5-workspace { display: grid; grid-template-columns: 220px minmax(0,1fr); border: 1px solid #46464c; background: #1d1d20; border-radius: 6px; overflow: hidden; } .t8-workspace .t5-workspace-nav { display: flex; flex-direction: column; gap: 4px; padding: 24px 16px; background: #19191b; border-right: 1px solid var(--cm-line); } .t8-workspace .t5-workspace-logo { display: block; padding: 4px 12px 28px; } .t8-workspace .t5-workspace-nav button { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px; text-align: left; color: #b2b2bc; border-radius: 4px; font-size: 14px; } .t8-workspace .t5-workspace-nav button > i:first-child { width: 18px; text-align: center; } .t8-workspace .t5-workspace-nav button > i:last-child { margin-left: auto; font-size: 11px; opacity: 0; } .t8-workspace .t5-workspace-nav button[aria-selected=true] { background: #00b7ff; color: #07151e; } .t8-workspace .t5-workspace-nav button[aria-selected=true] > i { color: inherit; opacity: 1; } .t8-workspace .t5-workspace-nav button:hover:not([aria-selected=true]) { background: #2b2b30; color: white; } .t8-workspace .t5-workspace-panels { min-width: 0; } .t8-workspace .t5-workspace-panel { display: grid; grid-template-columns: minmax(200px,.75fr) minmax(0,1.2fr); align-items: center; gap: 32px; padding: 40px; min-height: 520px; } .t8-workspace .t5-workspace-panel[hidden] { display: none; } .t8-workspace .t5-workspace-copy h2 { font-size: clamp(30px,3vw,44px); margin-bottom: 22px; } .t8-workspace .t5-workspace-copy p { font-size: 15px; color: #b2b2bc; margin-bottom: 24px; } .t8-workspace .t5-preview { width: 100%; min-width: 0; background: #13191f; border: 1px solid #3b444d; border-radius: 6px; overflow: hidden; transform: none; } .t8-workspace .t5-preview-bar { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 18px; border-bottom: 1px solid #35404b; color: #abb7c4; font-size: 11px; } .t8-workspace .t5-preview-brand { display: flex; align-items: center; gap: 8px; } .t8-workspace .t5-preview-content { padding: 20px; } .t8-workspace .t5-preview .cm-demo-ui { padding: 0; background: transparent; color: #e4edf5; } .t8-workspace .t5-demo-note { display: flex; gap: 8px; align-items: center; padding: 12px 18px; margin: 0; font-size: 11px; color: #acb7c4; border-top: 1px solid #35404b; } .t8-workspace .t5-workspace .cm-chat-answer { font-size: 11px; } .t8-workspace .t5-workspace .cm-chat-actions { font-size: 9px; } .t8-workspace .t5-proof { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding-block: 44px; border-bottom: 1px solid var(--cm-line); } .t8-workspace .t5-proof > div { display: flex; gap: 18px; align-items: center; } .t8-workspace .t5-proof strong { font-size: clamp(26px,3vw,42px); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.03em; } .t8-workspace .t5-proof span { max-width: 14ch; font-size: 13px; color: #b2b2bc; line-height: 1.4; } .t8-workspace .t5-section-heading { max-width: 800px; margin-bottom: 48px; } .t8-workspace .t5-section-heading h2 { max-width: 22ch; margin-bottom: 24px; } .t8-workspace .t5-section-heading p { color: #b2b2bc; font-size: 18px; max-width: 60ch; } .t8-workspace .t5-products { padding-block: 100px; } .t8-workspace .t5-directory-row { display: grid; grid-template-columns: minmax(230px,.7fr) minmax(0,1.2fr) 52px; gap: 40px; align-items: center; padding-block: 30px; border-top: 1px solid var(--cm-line); } .t8-workspace .t5-directory-row:last-child { border-bottom: 1px solid var(--cm-line); } .t8-workspace .t5-directory-name { display: flex; gap: 20px; align-items: center; } .t8-workspace .t5-directory-name > i { width: 28px; color: var(--cm-brand); font-size: 24px; text-align: center; } .t8-workspace .t5-directory-name h3 { margin: 0; font-size: 25px; } .t8-workspace .t5-directory-name a { color: var(--cm-ink); } .t8-workspace .t5-directory-row > p { font-size: 15px; line-height: 1.7; color: #b2b2bc; max-width: 62ch; } .t8-workspace .t5-arrow-link { height: 48px; width: 48px; border: 1px solid #56565e; border-radius: 50%; display: grid; place-items: center; color: var(--cm-ink); } .t8-workspace .t5-arrow-link:hover { background: #00b7ff; border-color: #00b7ff; color: #101820; } .t8-workspace .t5-community { padding-block: 88px; background: #1c1c1f; } .t8-workspace .t5-social-grid { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 24px; } .t8-workspace .t5-social-grid > div { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; border-top: 1px solid #44444b; padding-top: 24px; } .t8-workspace .t5-social-grid i { font-size: 32px; height: 32px; } .t8-workspace .t5-social-grid span { color: #d9d9df; font-size: 14px; } .t8-workspace .fa-twitch { color: #a970ff; } .t8-workspace .fa-youtube { color: #ff1744; } .t8-workspace .fa-telegram { color: #00b7ff; } .t8-workspace .fa-discord { color: #7784ff; } .t8-workspace .fa-instagram { color: #ff1485; } .t8-workspace .fa-tiktok { color: #25f4ee; text-shadow: 2px 1px #fe2c55; } .t8-workspace .t5-social-kick { color: #53fc18; } .t8-workspace .t5-social-minecraft { color: #62c339; } .t8-workspace .t5-home-plans { padding-top: 100px; } .t8-workspace .t5-home-plans > .t5-section-heading { max-width: var(--cm-width); } .t8-workspace .t5-comparison-link { text-align: right; padding-block: 12px 60px; } /* Product index and detail pages: reusable editorial page grammar. */ .t8-workspace .t5-page-head { padding-block: 80px 64px; } .t8-workspace .t5-page-head h1 { max-width: 15ch; margin-bottom: 28px; } .t8-workspace .t5-page-head > p { max-width: 62ch; color: #b2b2bc; font-size: 19px; line-height: 1.75; } .t8-workspace .t5-catalog-list { padding-bottom: 80px; } .t8-workspace .t5-catalog-product { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1fr); gap: 90px; align-items: center; padding-block: 64px; border-top: 1px solid var(--cm-line); } .t8-workspace .t5-catalog-copy > i { display: block; font-size: 32px; color: var(--cm-brand); margin-bottom: 24px; } .t8-workspace .t5-catalog-copy h2 { margin-bottom: 22px; } .t8-workspace .t5-catalog-copy > p { font-size: 17px; color: #b2b2bc; max-width: 55ch; margin-bottom: 24px; } .t8-workspace .t5-catalog-copy ul { padding: 0; list-style: none; margin-bottom: 28px; } .t8-workspace .t5-catalog-copy li { border-bottom: 1px solid #333339; padding-block: 9px; font-size: 14px; } .t8-workspace .t5-product-head { padding-top: 44px; } .t8-workspace .t5-back { margin-bottom: 44px; } .t8-workspace .t5-product-head > div { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 80px; align-items: end; margin-bottom: 36px; } .t8-workspace .t5-product-head h1 { margin-bottom: 0; overflow-wrap: anywhere; } .t8-workspace .t5-product-head p { max-width: 55ch; color: #b2b2bc; font-size: 19px; line-height: 1.7; } .t8-workspace .t5-product-stage { padding: 48px; background: #202126; border-radius: 6px; } .t8-workspace .t5-product-stage > .t5-preview { max-width: 780px; margin-inline: auto; } .t8-workspace .t5-product-stage .t5-preview-content { padding: 32px; } .t8-workspace .t5-tone-telegram > .t5-product-stage { background: #082d3a; } .t8-workspace .t5-tone-creatorhub > .t5-product-stage { background: #281e42; } .t8-workspace .t5-tone-viewinapp > .t5-product-stage { background: #371923; } .t8-workspace .t5-tone-pagelinks > .t5-product-stage { background: #242536; } .t8-workspace .t5-product-detail { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 100px; padding-block: 90px; } .t8-workspace .t5-product-detail aside { align-self: start; position: sticky; top: 110px; } .t8-workspace .t5-product-detail aside h2 { font-size: 23px; margin-bottom: 24px; } .t8-workspace .t5-product-detail aside nav { display: grid; max-height: calc(100dvh - 230px); overflow-y: auto; } .t8-workspace .t5-product-detail aside a { color: #b2b2bc; font-size: 14px; border-top: 1px solid #333339; padding-block: 12px; } .t8-workspace .t5-product-detail aside a:hover { color: #00b7ff; } .t8-workspace .t5-feature-list article { padding-block: 32px 44px; border-top: 1px solid #44444b; } .t8-workspace .t5-feature-list article h2 { font-size: clamp(26px,2.7vw,36px); margin-bottom: 20px; } .t8-workspace .t5-feature-lead { color: #e2e2e7; font-size: 19px; margin-bottom: 18px; max-width: 60ch; } .t8-workspace .t5-feature-description { color: #b2b2bc; font-size: 16px; line-height: 1.85; max-width: 70ch; } .t8-workspace .t5-related { padding-bottom: 100px; } .t8-workspace .t5-related > h2 { max-width: 22ch; margin-bottom: 40px; } .t8-workspace .t5-close { border-top: 1px solid #55555d; background: #202024; padding-block: 72px; } .t8-workspace .t5-close > div { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.8fr); gap: 100px; align-items: center; } .t8-workspace .t5-close h2 { font-size: clamp(36px,5vw,64px); } .t8-workspace .t5-close p { color: #b2b2bc; margin-bottom: 26px; font-size: 17px; } /* Preview-specific geometry, deliberately static without ambient loops. */ .t8-workspace .cm-hub-demo { padding: 12px; } .t8-workspace .cm-hub-profile { display: flex; gap: 12px; align-items: center; margin-bottom: 24px; } .t8-workspace .cm-hub-avatar { padding: 10px; border-radius: 50%; background: #23404e; } .t8-workspace .cm-hub-profile > div { display: grid; font-size: 13px; } .t8-workspace .cm-hub-profile > div > span { color: #99abb9; } .t8-workspace .cm-hub-profile > i { margin-left: auto; color: #00b7ff; } .t8-workspace .cm-hub-blocks { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; } .t8-workspace .cm-hub-video { padding: 20px; min-height: 150px; background: #462779; border-radius: 6px; display: flex; flex-direction: column; justify-content: space-between; font-size: 13px; } .t8-workspace .cm-hub-video > i { font-size: 26px; color: white; } .t8-workspace .cm-video-waves { display: flex; justify-content: center; align-items: center; gap: 8px; height: 50px; } .t8-workspace .cm-video-waves span { width: 8px; height: 60%; background: #ffffff66; border-radius: 3px; } .t8-workspace .cm-video-waves span:nth-child(2n) { height: 100%; } .t8-workspace .cm-hub-schedule { padding: 16px; background: #26313e; border-radius: 6px; display: grid; gap: 8px; font-size: 12px; } .t8-workspace .cm-hub-schedule > span { font-size: 10px; color: #adc0d1; } .t8-workspace .cm-hub-schedule > div { display: flex; gap: 5px; } .t8-workspace .cm-hub-schedule b { width: 15px; height: 15px; background: #375469; border-radius: 3px; } .t8-workspace .cm-hub-schedule b:nth-child(2n) { background: #00b7ff; } .t8-workspace .cm-hub-resource { display: flex; gap: 10px; align-items: center; padding: 14px; background: #26313e; font-size: 11px; border-radius: 6px; } .t8-workspace .cm-demo-bio { max-width: 340px; margin-inline: auto; } .t8-workspace .cm-smart-link { padding: 16px; background: #2f2730; border-radius: 6px; display: flex; align-items: center; gap: 12px; font-size: 12px; } .t8-workspace .cm-app-route { text-align: center; padding: 14px; color: #00b7ff; } .t8-workspace .cm-app-phone { max-width: 280px; margin-inline: auto; padding: 16px; background: #252932; border-radius: 12px; } .t8-workspace .cm-phone-camera { height: 4px; width: 36px; margin: 0 auto 16px; border-radius: 4px; background: #818894; } .t8-workspace .cm-app-video { padding: 24px; background: #431d2b; display: grid; justify-items: center; gap: 12px; font-size: 11px; } .t8-workspace .cm-app-video i { font-size: 32px; } .t8-workspace .cm-app-phone > strong { display: block; margin-top: 14px; font-size: 13px; } .t8-workspace .cm-app-phone > p { font-size: 11px; margin-top: 8px; } .t8-workspace .cm-app-open { display: flex; align-items: center; gap: 8px; font-size: 10px; padding: 12px; margin-top: 12px; background: #173c32; color: #a0eacb; } .t8-workspace .cm-rank-header { display: flex; gap: 12px; align-items: center; padding: 16px 10px; font-size: 14px; } .t8-workspace .cm-rank-row { position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; padding: 20px 10px; font-size: 12px; border-top: 1px solid #3b444d; overflow: hidden; } .t8-workspace .cm-rank-count { margin-left: auto; } .t8-workspace .cm-rank-position,.t8-workspace .cm-rank-count > i { color: #00b7ff; } .t8-workspace .cm-rank-avatar { display: grid; place-items: center; background: #324456; border-radius: 50%; width: 28px; height: 28px; } .t8-workspace .cm-rank-bar { position: absolute; z-index: -1; inset: 0; background: #00b7ff15; transform: scaleX(var(--rank)); transform-origin: left; } /* T5 / Air-inspired editorial direction: original CrewMaster composition and assets. */ .cm-public-design.t8-workspace { --primary: 235 74% 54%; --primary-foreground: 0 0% 100%; --background: 44 45% 94%; --foreground: 225 18% 10%; --card: 45 44% 96%; --card-foreground: 225 18% 10%; --muted: 42 24% 88%; --muted-foreground: 225 8% 38%; --border: 225 12% 16%; --cm-brand: #2447e8; --cm-link: #2447e8; --cm-focus: #2447e8; --cm-page: #f4f0e5; --cm-ink: #17181d; --cm-secondary: #55565d; --cm-line: #24252a; background: var(--cm-page); color: var(--cm-ink); } .t8-workspace ::selection { background: #2447e8; color: #fff; } .cm-public-design.t8-workspace .cm-public-nav, .cm-public-design.t8-workspace.cm-is-scrolled .cm-public-nav { position: sticky; background: #f4f0e5f2; color: #17181d; border-color: #24252a; } .t8-workspace .cm-public-nav :is(a,button,.cm-navbar-brand-label) { color: #17181d; } .t8-workspace .cm-public-nav .bg-primary { background: #17181d; color: #fff; border-radius: 999px; } .t8-workspace #mobile-menu { background: #f4f0e5; color: #17181d; border-color: #24252a; } .t8-workspace .cm-button { border-radius: 999px; } .t8-workspace .cm-button-primary { background: #17181d; color: #fff; } .t8-workspace .cm-button-primary:hover { background: #2447e8; color: #fff; } .t8-workspace .cm-text-link { color: #2447e8; } .t8-workspace .t5-air-hero { min-height: calc(100svh - 79px); display: grid; align-items: center; overflow: hidden; background: #f1df55; border-bottom: 1px solid #17181d; } .t8-workspace .t5-air-hero-grid { display: flex; align-items: center; gap: 48px; padding-block: clamp(64px,9vw,132px); } .t8-workspace .t5-air-hero-copy { flex: 1 1 66%; min-width: 0; padding-top: 80px; }.t8-workspace .t5-air-orbit { flex: 0 1 34%; } .t8-workspace .t5-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 700; } .t8-workspace .t5-kicker span { width: 34px; height: 10px; border-radius: 50%; background: #2447e8; transform: rotate(-12deg); } .t8-workspace .t5-air-hero h1 { max-width: 10ch; margin: 0; color: #17181d; font-size: clamp(66px,9.5vw,148px); line-height: .82; letter-spacing: -.07em; } .t8-workspace .t5-air-hero h1 em { font-style: normal; color: #2447e8; } .t8-workspace .t5-air-intro { display: flex; align-items: end; gap: 28px; max-width: 590px; margin-top: 48px; margin-left: clamp(0px,8vw,130px); } .t8-workspace .t5-air-intro p { max-width: 48ch; font-size: 18px; line-height: 1.55; } .t8-workspace .t5-round-link { flex: 0 0 auto; width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid #17181d; border-radius: 50%; color: #17181d; } .t8-workspace .t5-round-link:hover { background: #17181d; color: #fff; transform: rotate(-45deg); } .t8-workspace .t5-air-orbit { position: relative; width: min(31vw,430px); aspect-ratio: 1; margin-inline: auto; } .t8-workspace .t5-orbit-ring { position: absolute; inset: 8%; border: 2px solid #17181d; border-radius: 50%; } .t8-workspace .t5-orbit-ring::before,.t8-workspace .t5-orbit-ring::after { content: ''; position: absolute; inset: 16%; border: 1px dashed #17181d88; border-radius: inherit; } .t8-workspace .t5-orbit-ring::after { inset: 36%; border-style: solid; } .t8-workspace .t5-orbit-core { position: absolute; inset: 50% auto auto 50%; width: 124px; height: 124px; display: grid; place-items: center; transform: translate(-50%,-50%) rotate(7deg); background: #17181d; border-radius: 28% 72% 65% 35% / 42% 38% 62% 58%; } .t8-workspace .t5-orbit-core img { width: 72px; height: 72px; } .t8-workspace .t5-orbit-node { position: absolute; width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid #17181d; border-radius: 50%; background: #f4f0e5; color: #17181d; font-size: 25px; box-shadow: 8px 8px 0 #17181d; } .t8-workspace .t5-node-twitch { left: 0; top: 18%; }.t8-workspace .t5-node-youtube { right: 1%; top: 5%; }.t8-workspace .t5-node-telegram { right: 0; bottom: 10%; }.t8-workspace .t5-node-discord { left: 8%; bottom: 2%; } .t8-workspace .t5-orbit-ring { animation: t5-orbit-spin 24s linear infinite; } @keyframes t5-orbit-spin { to { transform: rotate(360deg); } } .t8-workspace .t5-ticker { overflow: hidden; border-bottom: 1px solid #17181d; background: #2447e8; color: #fff; } .t8-workspace .t5-ticker > div { display: flex; align-items: center; width: max-content; animation: t5-marquee 26s linear infinite; } .t8-workspace .t5-ticker span { padding: 18px 24px; font-size: 18px; font-weight: 600; white-space: nowrap; } .t8-workspace .t5-ticker i { width: 10px; height: 10px; border: 1px solid #fff; border-radius: 50%; } @keyframes t5-marquee { to { transform: translateX(-50%); } } .t8-workspace .t5-index { margin: 0 0 18px; color: #2447e8; font: 700 13px/1 'T5 Outfit',sans-serif; letter-spacing: .12em; } .t8-workspace .t5-air-story { padding-block: clamp(90px,11vw,160px); } .t8-workspace .t5-air-story > header { display: flex; align-items: flex-start; gap: 40px; }.t8-workspace .t5-air-story > header .t5-index { flex: 0 0 80px; } .t8-workspace .t5-air-story > header h2 { max-width: 17ch; font-size: clamp(44px,6.2vw,88px); } .t8-workspace .t5-air-principles { display: flex; margin-top: 90px; border-top: 1px solid #17181d; }.t8-workspace .t5-air-principles article { flex: 1 1 0; } .t8-workspace .t5-air-principles article { padding: 28px 38px 20px 0; border-right: 1px solid #17181d; } .t8-workspace .t5-air-principles article+article { padding-left: 38px; }.t8-workspace .t5-air-principles article:last-child { border-right: 0; } .t8-workspace .t5-air-principles span { font-size: 12px; }.t8-workspace .t5-air-principles h3 { margin: 42px 0 18px; font-size: clamp(28px,3vw,42px); } .t8-workspace .t5-air-principles p { color: #55565d; max-width: 34ch; } .t8-workspace .t5-workspace-wrap { padding-block: clamp(90px,10vw,140px); background: #17181d; color: #f8f5ec; } .t8-workspace .t5-workspace-wrap { min-height: 460vh; padding-block: 0; } .t8-workspace .t5-workspace-wrap > .cm-container { position: sticky; top: 0; min-height: 100svh; display: grid; align-content: center; padding-block: 36px; } .t8-workspace .t5-workspace-heading { display: grid; grid-template-columns: 100px minmax(0,1fr) minmax(260px,.55fr); gap: 30px; align-items: end; margin-bottom: 60px; } .t8-workspace .t5-workspace-heading h2 { max-width: 14ch; font-size: clamp(42px,5.4vw,76px); }.t8-workspace .t5-workspace-heading > p:last-child { color: #aaaab1; } .t8-workspace .t5-workspace { grid-template-columns: 240px minmax(0,1fr); border: 1px solid #46464c; border-radius: 22px; background: #222329; box-shadow: 0 40px 90px #0006; } .t8-workspace .t5-workspace-nav { padding: 18px; background: #1b1c21; border-color: #46464c; gap: 2px; } .t8-workspace .t5-workspace-nav button { min-height: 54px; color: #aaaab1; border-radius: 12px; }.t8-workspace .t5-workspace-nav button[aria-selected=true] { background: #f1df55; color: #17181d; } .t8-workspace .t5-workspace-panel { grid-template-columns: minmax(210px,.6fr) minmax(0,1.4fr); min-height: 590px; padding: clamp(26px,4vw,58px); } .t8-workspace .t5-workspace-copy > i { display: inline-grid; place-items: center; width: 54px; height: 54px; margin-bottom: 38px; border-radius: 50%; background: #2447e8; color: #fff; font-size: 22px; } .t8-workspace .t5-workspace-copy h3 { margin-bottom: 22px; color: #fff; font-size: clamp(34px,4vw,56px); }.t8-workspace .t5-workspace-copy p { color: #aaaab1; } .t8-workspace .t5-preview { border-radius: 18px; transform: rotate(1.5deg); background: #f4f0e5; color: #17181d; border-color: #777; box-shadow: 20px 24px 0 #2447e8; } .t8-workspace .t5-preview-bar { color: #55565d; border-color: #ccc6b9; }.t8-workspace .t5-preview .cm-demo-ui { color: #17181d; } .t8-workspace .t5-proof { border-bottom: 0; padding-block: 70px; }.t8-workspace .t5-proof > div { justify-content: center; }.t8-workspace .t5-proof span { color: #55565d; } .t8-workspace .t5-products { padding-block: 110px 140px; }.t8-workspace .t5-section-heading { max-width: 940px; }.t8-workspace .t5-section-heading h2 { font-size: clamp(44px,6vw,82px); }.t8-workspace .t5-section-heading p { color: #55565d; } .t8-workspace .t5-directory-row { grid-template-columns: minmax(250px,.7fr) minmax(0,1.2fr) 64px; padding-block: 34px; border-color: #17181d; } .t8-workspace .t5-directory-name > i { color: #2447e8; }.t8-workspace .t5-directory-row > p { color: #55565d; }.t8-workspace .t5-arrow-link { border-color: #17181d; color: #17181d; } .t8-workspace .t5-arrow-link:hover { background: #f1df55; border-color: #17181d; color: #17181d; transform: rotate(-35deg); } .t8-workspace .t5-community { padding-block: 120px; background: #ff705d; color: #17181d; }.t8-workspace .t5-community .t5-section-heading p { color: #3f2724; } .t8-workspace .t5-social-grid { gap: 16px; }.t8-workspace .t5-social-grid > div { min-height: 150px; justify-content: space-between; padding: 22px 16px 18px; border: 1px solid #17181d; border-radius: 50% 50% 12px 12px; background: #f4f0e5; } .t8-workspace .t5-social-grid span { color: #17181d; font-weight: 600; }.t8-workspace .t5-home-plans { padding-top: 120px; background: #d9d7ff; } .t8-workspace .t5-close { border-color: #17181d; background: #f1df55; color: #17181d; }.t8-workspace .t5-close p { color: #4f4a2d; } .t8-workspace .cm-public-footer { background: #17181d; color: #f4f0e5; } .t8-workspace .t5-page-head { padding-block: clamp(70px,9vw,130px); } .t8-workspace .t5-page-head h1 { color: #17181d; font-size: clamp(60px,8vw,112px); letter-spacing: -.065em; } .t8-workspace .t5-page-head > p,.t8-workspace .t5-product-head p,.t8-workspace .t5-catalog-copy > p,.t8-workspace .t5-feature-description { color: #55565d; } .t8-workspace .t5-catalog-product { border-color: #17181d; } .t8-workspace .t5-catalog-copy > i { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #2447e8; color: #fff; } .t8-workspace .t5-catalog-copy li,.t8-workspace .t5-feature-list article { border-color: #17181d; } .t8-workspace .t5-product-stage { border-radius: 28px; } .t8-workspace .t5-product-stage > .t5-preview { box-shadow: 16px 18px 0 #17181d; } .t8-workspace .t5-product-detail aside a { color: #55565d; border-color: #17181d; }.t8-workspace .t5-product-detail aside a:hover { color: #2447e8; } .t8-workspace .t5-feature-lead { color: #17181d; } @media(max-width:1024px) { .t8-workspace .t5-air-orbit { width: 300px; } .t8-workspace .t5-workspace-heading { grid-template-columns: 70px 1fr; }.t8-workspace .t5-workspace-heading > p:last-child { grid-column: 2; } .t8-workspace .t5-workspace { grid-template-columns: 190px 1fr; }.t8-workspace .t5-workspace-panel { grid-template-columns: 1fr; }.t8-workspace .t5-workspace-copy { display: none; } .t8-workspace .t5-social-grid { grid-template-columns: repeat(4,1fr); } } @media(max-width:767px) { .t8-workspace .cm-container { width: calc(100% - 32px); }.t8-workspace .cm-public-nav > div { padding-inline: 16px; } .t8-workspace .t5-air-hero { min-height: auto; }.t8-workspace .t5-air-hero-grid { flex-direction: column; align-items: stretch; padding-block: 64px 70px; }.t8-workspace .t5-air-hero h1 { font-size: clamp(58px,18vw,88px); } .t8-workspace .t5-air-intro { margin: 36px 0 0; align-items: center; }.t8-workspace .t5-air-intro p { font-size: 16px; }.t8-workspace .t5-air-orbit { width: min(82vw,330px); margin-top: 20px; } .t8-workspace .t5-air-hero-copy { padding-top: 32px; }.t8-workspace .t5-air-story > header { display: block; }.t8-workspace .t5-air-story > header h2 { font-size: 45px; }.t8-workspace .t5-air-principles { flex-direction: column; margin-top: 56px; } .t8-workspace .t5-air-principles article,.t8-workspace .t5-air-principles article+article { padding: 28px 0; border-right: 0; border-bottom: 1px solid #17181d; }.t8-workspace .t5-air-principles h3 { margin-top: 24px; } .t8-workspace .t5-workspace-heading { grid-template-columns: 1fr; }.t8-workspace .t5-workspace-heading > p:last-child { grid-column: auto; }.t8-workspace .t5-workspace { display: block; border-radius: 16px; } .t8-workspace .t5-workspace-wrap { min-height: auto; padding-block: 84px; }.t8-workspace .t5-workspace-wrap > .cm-container { position: static; min-height: 0; padding-block: 0; } .t8-workspace .t5-workspace-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #46464c; }.t8-workspace .t5-workspace-nav button { width: auto; flex: 0 0 auto; padding-inline: 16px; } .t8-workspace .t5-workspace-panel { min-height: 430px; padding: 28px 18px 38px; }.t8-workspace .t5-preview { transform: none; box-shadow: 8px 10px 0 #2447e8; } .t8-workspace .t5-proof { grid-template-columns: 1fr; gap: 28px; }.t8-workspace .t5-proof > div { justify-content: flex-start; } .t8-workspace .t5-directory-row { grid-template-columns: 1fr 50px; gap: 18px; }.t8-workspace .t5-directory-row > p { grid-column: 1/-1; grid-row: 2; }.t8-workspace .t5-arrow-link { grid-column: 2; grid-row: 1; } .t8-workspace .t5-social-grid { grid-template-columns: repeat(2,1fr); }.t8-workspace .t5-social-grid > div { min-height: 130px; } .t8-workspace .t5-close > div,.t8-workspace .t5-product-head > div,.t8-workspace .t5-catalog-product,.t8-workspace .t5-product-detail { grid-template-columns: 1fr; gap: 36px; } .t8-workspace .t5-product-detail aside { position: static; }.t8-workspace .t5-product-stage { padding: 22px; } } @media(prefers-reduced-motion:reduce) { .t8-workspace .t5-ticker > div,.t8-workspace .t5-orbit-ring { animation: none; } } /* Immersive product chapters. */ .t8-workspace .t5-automation { min-height: 100svh; display: grid; align-items: center; padding-block: 120px; background: #2447e8; color: #fff; } .t8-workspace .t5-automation-layout { display: grid; grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr); gap: clamp(60px,9vw,150px); align-items: center; } .t8-workspace .t5-automation .t5-index { color: #f1df55; }.t8-workspace .t5-automation-copy h2 { max-width: 11ch; margin-bottom: 32px; font-size: clamp(52px,7vw,98px); }.t8-workspace .t5-automation-copy > p:last-child { max-width: 43ch; color: #d8defe; font-size: 18px; } .t8-workspace .t5-automation-flow { position: relative; display: grid; justify-items: center; padding: 30px; } .t8-workspace .t5-flow-event,.t8-workspace .t5-flow-core { width: min(100%,520px); display: flex; align-items: center; gap: 18px; padding: 22px 24px; background: #fff; color: #17181d; border: 1px solid #17181d; box-shadow: 10px 10px 0 #17181d; } .t8-workspace .t5-flow-event { transform: translateX(-7%); }.t8-workspace .t5-flow-core { transform: translateX(7%); background: #f1df55; } .t8-workspace .t5-flow-event > i { color: #9146ff; font-size: 30px; }.t8-workspace .t5-flow-event div,.t8-workspace .t5-flow-core div { display: grid; }.t8-workspace .t5-flow-event span,.t8-workspace .t5-flow-core span { color: #62636a; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }.t8-workspace .t5-flow-event strong,.t8-workspace .t5-flow-core strong { font-size: 16px; } .t8-workspace .t5-flow-line { position: relative; width: 2px; height: 66px; overflow: hidden; background: #ffffff4d; }.t8-workspace .t5-flow-line b { position: absolute; inset: 0; background: #f1df55; transform: translateY(-100%); } .t8-workspace .t5-flow-results { width: min(100%,570px); display: grid; gap: 8px; }.t8-workspace .t5-flow-results article { display: grid; grid-template-columns: 28px 1fr 20px; gap: 14px; align-items: center; padding: 16px 20px; border: 1px solid #ffffff70; background: #1932b2; }.t8-workspace .t5-flow-results article > i:last-child { color: #f1df55; } .t8-workspace .t5-automation:not(.t5-in-view) [data-t5-flow] { opacity: .18; transform: translateY(18px); }.t8-workspace .t5-automation.t5-in-view [data-t5-flow] { opacity: 1; transform: translateY(0); transition: opacity .7s var(--cm-ease),transform .7s var(--cm-ease); }.t8-workspace .t5-automation.t5-in-view [data-t5-flow]:nth-child(2) { transition-delay: .14s; }.t8-workspace .t5-automation.t5-in-view [data-t5-flow]:nth-child(3) { transition-delay: .28s; }.t8-workspace .t5-automation.t5-in-view .t5-flow-results article:nth-child(2) { transition-delay: .42s; }.t8-workspace .t5-automation.t5-in-view .t5-flow-results article:nth-child(3) { transition-delay: .56s; }.t8-workspace .t5-automation.t5-in-view .t5-flow-line b { animation: t5-flow-down .8s var(--cm-ease) forwards; } @keyframes t5-flow-down { to { transform: translateY(0); } } .t8-workspace .t5-vault { padding-block: 130px; overflow: hidden; background: #080b12; color: #f4f0e5; } .t8-workspace .t5-vault-head { display: grid; grid-template-columns: 120px minmax(0,1fr); margin-bottom: 80px; }.t8-workspace .t5-vault-head h2 { max-width: 12ch; font-size: clamp(54px,7vw,104px); }.t8-workspace .t5-vault-head > div > p { max-width: 50ch; margin-top: 26px; color: #a8adba; font-size: 18px; } .t8-workspace .t5-vault-rail { display: flex; gap: 24px; width: max-content; padding-inline: max(40px,calc((100vw - var(--cm-width))/2)); transform: translateX(var(--t5-vault-shift,0)); transition: transform .1s linear; } .t8-workspace .t5-vault-item { width: min(38vw,520px); flex: 0 0 auto; }.t8-workspace .t5-vault-item:nth-child(even) { margin-top: 90px; }.t8-workspace .t5-vault-media { position: relative; height: 390px; display: grid; place-items: center; overflow: hidden; border: 1px solid #363c48; background: #131925; }.t8-workspace .t5-vault-media::before { content: ''; position: absolute; inset: 0; background: linear-gradient(140deg,#2447e84d,transparent 45%,#ff705d3d); }.t8-workspace .t5-vault-photo .t5-vault-media { background: #57372d; }.t8-workspace .t5-vault-file .t5-vault-media { background: #20382e; }.t8-workspace .t5-vault-audio .t5-vault-media { background: #34224a; }.t8-workspace .t5-vault-media > i { position: relative; font-size: 58px; }.t8-workspace .t5-vault-media > span { position: absolute; right: 16px; top: 16px; padding: 7px 9px; border: 1px solid #ffffff55; font-size: 10px; letter-spacing: .1em; } .t8-workspace .t5-vault-item footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 18px; }.t8-workspace .t5-vault-item footer span { color: #a8adba; font-size: 12px; }.t8-workspace .t5-vault-item footer i { margin-right: 7px; } .t8-workspace .t5-wave { display: flex; align-items: center; gap: 5px; height: 90px; }.t8-workspace .t5-wave i { width: 4px; height: calc(20% + (var(--wave,1) * 5%)); background: #f4f0e5; }.t8-workspace .t5-wave i:nth-child(3n) { height: 85%; }.t8-workspace .t5-wave i:nth-child(2n) { height: 52%; } .t8-workspace .t5-analytics { min-height: 100svh; display: grid; align-items: center; padding-block: 120px; background: #f4f0e5; } .t8-workspace .t5-analytics-head { display: grid; grid-template-columns: 100px minmax(0,1fr) minmax(260px,.55fr); gap: 30px; align-items: end; margin-bottom: 70px; }.t8-workspace .t5-analytics-head h2 { max-width: 14ch; font-size: clamp(48px,6.5vw,92px); }.t8-workspace .t5-analytics-head > p:last-child { color: #55565d; } .t8-workspace .t5-analytics-stage { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 40px; align-items: stretch; } .t8-workspace .t5-source-list { display: grid; align-content: center; gap: 10px; }.t8-workspace .t5-source-list span { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border-bottom: 1px solid #17181d; font-weight: 600; }.t8-workspace .t5-source-list i,.t8-workspace .t5-source-list b { width: 22px; text-align: center; } .t8-workspace .t5-analytics-board { min-width: 0; padding: 26px; border: 1px solid #17181d; background: #17181d; color: #fff; box-shadow: 14px 14px 0 #f1df55; }.t8-workspace .t5-board-top,.t8-workspace .t5-board-legend { display: flex; justify-content: space-between; gap: 20px; }.t8-workspace .t5-board-top span:last-child { color: #999ba5; font-size: 11px; }.t8-workspace .t5-board-legend { justify-content: flex-start; padding-top: 18px; color: #b9bbc4; font-size: 12px; }.t8-workspace .t5-board-legend span::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #f1df55; }.t8-workspace .t5-board-legend span:nth-child(2)::before { background: #ff705d; }.t8-workspace .t5-board-legend span:nth-child(3)::before { background: #7d8eff; } .t8-workspace .t5-chart { position: relative; height: 330px; margin-top: 30px; background: repeating-linear-gradient(to bottom,transparent 0,transparent 65px,#ffffff18 66px); }.t8-workspace .t5-chart svg { width: 100%; height: 100%; overflow: visible; }.t8-workspace .t5-chart-area { fill: #2447e84a; }.t8-workspace .t5-chart-line { fill: none; stroke: #f1df55; stroke-width: 4; vector-effect: non-scaling-stroke; stroke-dasharray: 1100; stroke-dashoffset: 1100; }.t8-workspace .t5-analytics.t5-in-view .t5-chart-line { animation: t5-chart-draw 1.8s var(--cm-ease) forwards; } @keyframes t5-chart-draw { to { stroke-dashoffset: 0; } } .t8-workspace .t5-bio { padding-block: 140px; overflow: hidden; background: #ff705d; color: #17181d; }.t8-workspace .t5-bio-layout { display: grid; grid-template-columns: minmax(300px,.7fr) minmax(0,1.3fr); gap: 80px; align-items: center; }.t8-workspace .t5-bio header h2 { max-width: 11ch; margin-bottom: 28px; font-size: clamp(52px,7vw,100px); }.t8-workspace .t5-bio header > p:not(.t5-index) { max-width: 42ch; margin-bottom: 26px; } .t8-workspace .t5-bio-scene { position: relative; min-height: 680px; display: grid; place-items: center; }.t8-workspace .t5-bio-phone { position: relative; z-index: 2; width: 330px; padding: 18px 20px 28px; border: 2px solid #17181d; border-radius: 44px; background: #f4f0e5; box-shadow: 18px 20px 0 #17181d; }.t8-workspace .t5-phone-top { width: 74px; height: 7px; margin: 0 auto 28px; border-radius: 10px; background: #17181d; }.t8-workspace .t5-phone-avatar { display: grid; justify-items: center; gap: 5px; margin-bottom: 24px; }.t8-workspace .t5-phone-avatar img { background: #17181d; border-radius: 50%; }.t8-workspace .t5-phone-avatar span { color: #666; font-size: 11px; }.t8-workspace .t5-bio-phone > a { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 14px; border: 1px solid #17181d; color: #17181d; font-size: 13px; font-weight: 600; } .t8-workspace .t5-bio-chip { position: absolute; z-index: 1; display: flex; gap: 9px; align-items: center; padding: 13px 17px; border: 1px solid #17181d; background: #f1df55; font-weight: 600; box-shadow: 7px 7px 0 #17181d; transition: transform .3s var(--cm-ease); }.t8-workspace .t5-bio-twitch { left: 2%; top: 18%; transform: rotate(-8deg); }.t8-workspace .t5-bio-youtube { right: 1%; top: 24%; transform: rotate(7deg); }.t8-workspace .t5-bio-telegram { left: 1%; bottom: 18%; transform: rotate(5deg); }.t8-workspace .t5-bio-vault { right: 0; bottom: 14%; transform: rotate(-6deg); } .t8-workspace .t5-widgets { min-height: 100svh; padding-block: 120px; background: #10131a; color: #f4f0e5; }.t8-workspace .t5-widgets-head { display: grid; grid-template-columns: 100px minmax(0,1fr) minmax(260px,.55fr); gap: 30px; align-items: end; margin-bottom: 60px; }.t8-workspace .t5-widgets-head h2 { max-width: 13ch; font-size: clamp(52px,7vw,100px); }.t8-workspace .t5-widgets-head > p:last-child { color: #a6aab4; } .t8-workspace .t5-obs-scene { display: grid; grid-template-columns: minmax(0,1fr) 240px; border: 1px solid #444b59; background: #07090d; box-shadow: 0 35px 80px #0008; }.t8-workspace .t5-stream-stage { position: relative; min-height: 570px; overflow: hidden; background: linear-gradient(155deg,#172b42,#0f141d 60%,#40212a); }.t8-workspace .t5-stream-stage::before { content: ''; position: absolute; width: 48%; height: 75%; right: 13%; bottom: -20%; border: 1px solid #ffffff26; border-radius: 50% 50% 0 0; background: #ffffff08; }.t8-workspace .t5-stream-label { position: absolute; left: 22px; top: 22px; padding: 7px 10px; background: #e61f45; font-size: 11px; }.t8-workspace .t5-stream-label i { margin-right: 6px; font-size: 7px; }.t8-workspace .t5-game-hud { position: absolute; left: 24px; bottom: 28px; display: flex; gap: 8px; }.t8-workspace .t5-game-hud span { width: 70px; height: 6px; background: #ffffff36; }.t8-workspace .t5-game-hud span:first-child { background: #53fc18; } .t8-workspace .t5-sub-alert { position: absolute; left: 50%; top: 44%; display: flex; align-items: center; gap: 18px; min-width: 320px; padding: 20px 24px; transform: translate(-50%,-50%) scale(.9); opacity: .35; border: 1px solid #f1df55; background: #17181de8; }.t8-workspace .t5-sub-alert > i { color: #f1df55; font-size: 34px; }.t8-workspace .t5-sub-alert div { display: grid; }.t8-workspace .t5-sub-alert span { color: #afb2bc; font-size: 12px; }.t8-workspace .t5-widgets.t5-in-view .t5-sub-alert { animation: t5-alert-in 5s var(--cm-ease) infinite; } @keyframes t5-alert-in { 0%,12%{opacity:0;transform:translate(-50%,-42%) scale(.92)} 22%,75%{opacity:1;transform:translate(-50%,-50%) scale(1)} 90%,100%{opacity:0;transform:translate(-50%,-55%) scale(.98)} } .t8-workspace .t5-stream-chat { background: #11151d; border-left: 1px solid #444b59; }.t8-workspace .t5-stream-chat header { display: flex; justify-content: space-between; padding: 18px; border-bottom: 1px solid #343a46; }.t8-workspace .t5-stream-chat p { display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px 18px; border-bottom: 1px solid #272c35; }.t8-workspace .t5-stream-chat p span { width: 75%; height: 7px; background: #ffffff20; }.t8-workspace .t5-obs-timeline { grid-column: 1/-1; display: flex; gap: 8px; padding: 14px; border-top: 1px solid #444b59; }.t8-workspace .t5-obs-timeline span { padding: 8px 12px; border: 1px solid #444b59; color: #b8bbc4; font-size: 11px; } .t8-workspace .t5-quote { min-height: 92svh; display: grid; align-items: center; padding-block: 100px; background: #f1df55; color: #17181d; }.t8-workspace .t5-quote-layout { display: grid; grid-template-columns: minmax(280px,.65fr) minmax(0,1.35fr); gap: clamp(50px,8vw,130px); align-items: center; }.t8-workspace .t5-quote-portrait { position: relative; aspect-ratio: .82; overflow: hidden; filter: grayscale(1) contrast(1.08); }.t8-workspace .t5-quote-portrait::after { content: ''; position: absolute; inset: 0; background: #2447e8; mix-blend-mode: screen; opacity: .25; }.t8-workspace .t5-quote-portrait img { width: 100%; height: 100%; object-fit: cover; }.t8-workspace .t5-quote blockquote { max-width: 16ch; margin: 0; font-size: clamp(38px,5vw,72px); font-weight: 600; line-height: 1.04; letter-spacing: -.045em; }.t8-workspace .t5-quote figcaption { display: flex; gap: 14px; align-items: baseline; margin-top: 38px; }.t8-workspace .t5-quote figcaption span { color: #57512f; } /* Existing prices and limits remain authoritative; only their presentation changes. */ .t8-workspace .t5-home-plans .cm-pricing { padding: 0 0 80px; background: transparent; }.t8-workspace .t5-home-plans .cm-pricing > div:first-child { position: sticky; top: 94px; z-index: 5; width: fit-content; margin: 0 auto 42px; padding: 10px 16px; border: 1px solid #17181d; border-radius: 999px; background: #d9d7fff0; backdrop-filter: blur(12px); } .t8-workspace .t5-home-plans .cm-pricing > .max-w-7xl { max-width: var(--cm-width); width: calc(100% - 80px); padding: 0; }.t8-workspace .t5-home-plans .cm-pricing .grid.grid-cols-1 { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; border-block: 1px solid #17181d; } .t8-workspace .t5-home-plans .cm-plan-card { border: 0; border-right: 1px solid #17181d; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }.t8-workspace .t5-home-plans .cm-plan-card:last-child { border-right: 0; }.t8-workspace .t5-home-plans .cm-plan-card:hover { background: #f4f0e580; transform: translateY(-10px); }.t8-workspace .t5-home-plans .cm-plan-popular { background: #f1df55; }.t8-workspace .t5-home-plans .cm-plan-card > .text-center { text-align: left; }.t8-workspace .t5-home-plans .cm-plan-card .justify-center { justify-content: flex-start; }.t8-workspace .t5-home-plans .cm-plan-card h3 { font-size: 30px; }.t8-workspace .t5-home-plans .cm-plan-card .monthly-price,.t8-workspace .t5-home-plans .cm-plan-card .yearly-price { font-size: clamp(36px,4vw,55px); }.t8-workspace .t5-home-plans .cm-plan-card > .space-y-4 { border-top: 1px solid #17181d; }.t8-workspace .t5-home-plans .cm-plan-card button,.t8-workspace .t5-home-plans .cm-plan-card a { border-radius: 999px; } @media(max-width:1024px) { .t8-workspace .t5-automation-layout,.t8-workspace .t5-bio-layout { grid-template-columns: 1fr; }.t8-workspace .t5-automation-flow { margin-top: 30px; } .t8-workspace .t5-vault-item { width: 55vw; }.t8-workspace .t5-analytics-head,.t8-workspace .t5-widgets-head { grid-template-columns: 70px 1fr; }.t8-workspace .t5-analytics-head > p:last-child,.t8-workspace .t5-widgets-head > p:last-child { grid-column: 2; } .t8-workspace .t5-bio-scene { min-height: 620px; } } @media(max-width:767px) { .t8-workspace .t5-automation,.t8-workspace .t5-vault,.t8-workspace .t5-analytics,.t8-workspace .t5-bio,.t8-workspace .t5-widgets { min-height: auto; padding-block: 84px; } .t8-workspace .t5-automation-copy h2,.t8-workspace .t5-vault-head h2,.t8-workspace .t5-analytics-head h2,.t8-workspace .t5-bio header h2,.t8-workspace .t5-widgets-head h2 { font-size: 48px; } .t8-workspace .t5-flow-event,.t8-workspace .t5-flow-core { transform: none; padding: 18px; }.t8-workspace .t5-automation-flow { padding: 0; } .t8-workspace .t5-vault-head { grid-template-columns: 1fr; }.t8-workspace .t5-vault-rail { gap: 14px; padding-inline: 16px; }.t8-workspace .t5-vault-item { width: 82vw; }.t8-workspace .t5-vault-item:nth-child(even) { margin-top: 40px; }.t8-workspace .t5-vault-media { height: 300px; } .t8-workspace .t5-analytics-head,.t8-workspace .t5-widgets-head { grid-template-columns: 1fr; }.t8-workspace .t5-analytics-head > p:last-child,.t8-workspace .t5-widgets-head > p:last-child { grid-column: auto; }.t8-workspace .t5-analytics-stage { grid-template-columns: 1fr; }.t8-workspace .t5-source-list { display: flex; overflow-x: auto; }.t8-workspace .t5-source-list span { flex: 0 0 auto; }.t8-workspace .t5-chart { height: 240px; }.t8-workspace .t5-analytics-board { padding: 18px; box-shadow: 8px 8px 0 #f1df55; } .t8-workspace .t5-bio-scene { min-height: 590px; }.t8-workspace .t5-bio-phone { width: min(300px,82vw); }.t8-workspace .t5-bio-chip { font-size: 11px; padding: 10px; }.t8-workspace .t5-bio-twitch,.t8-workspace .t5-bio-telegram { left: -8px; }.t8-workspace .t5-bio-youtube,.t8-workspace .t5-bio-vault { right: -8px; } .t8-workspace .t5-obs-scene { grid-template-columns: 1fr; }.t8-workspace .t5-stream-stage { min-height: 420px; }.t8-workspace .t5-stream-chat { display: none; }.t8-workspace .t5-sub-alert { min-width: 0; width: calc(100% - 40px); }.t8-workspace .t5-obs-timeline { overflow-x: auto; } .t8-workspace .t5-quote { min-height: auto; }.t8-workspace .t5-quote-layout { grid-template-columns: 1fr; }.t8-workspace .t5-quote-portrait { max-height: 480px; }.t8-workspace .t5-home-plans .cm-pricing > .max-w-7xl { width: calc(100% - 32px); }.t8-workspace .t5-home-plans .cm-pricing .grid.grid-cols-1 { grid-template-columns: 1fr; }.t8-workspace .t5-home-plans .cm-plan-card { border-right: 0; border-bottom: 1px solid #17181d; } } @media(prefers-reduced-motion:reduce) { .t8-workspace .t5-automation:not(.t5-in-view) [data-t5-flow] { opacity: 1; transform: none; }.t8-workspace .t5-automation.t5-in-view .t5-flow-line b { animation: none; transform: none; }.t8-workspace .t5-analytics.t5-in-view .t5-chart-line { animation: none; stroke-dashoffset: 0; }.t8-workspace .t5-widgets.t5-in-view .t5-sub-alert { animation: none; opacity: 1; transform: translate(-50%,-50%); } } .t8-workspace.t5-static-preview .t5-workspace-wrap { min-height: auto; padding-block: 100px; } .t8-workspace.t5-static-preview .t5-workspace-wrap > .cm-container { position: static; min-height: 0; padding-block: 0; } /* Source: t8/layout.css */ /* Composition-only overrides: the retained T8 hero keeps its original styling. */ /* Intro belongs to the hero, below the navigation and over its real background. */ .cm-public-design .t8-home .cm-launch-hero{isolation:isolate;position:relative} .t8-intro{position:absolute;inset:0;z-index:3;color:#f3f8fa;pointer-events:none;overflow:hidden} .t8-intro[hidden]{display:none} .t8-intro-words,.t8-intro-brand{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:20px;font:600 clamp(38px,8vw,120px)/1.1 Outfit,sans-serif;letter-spacing:-.04em;white-space:nowrap} .t8-intro-words span{position:absolute;opacity:0}.t8-intro-brand{opacity:0}.t8-intro-brand img{width:clamp(42px,9vw,120px);height:auto} .t8-intro-pending .t8-home .cm-launch-grid,.t8-intro-pending .t8-home .cm-live-proof{visibility:hidden} .cm-public-design .t8-home .cm-launch-hero.cm-ambient-active .cm-azure-field>span{animation:t8-hero-flow 12s cubic-bezier(.77,0,.175,1) infinite alternate} .cm-public-design .t8-home .cm-launch-hero.cm-ambient-active .cm-azure-field>span:nth-child(2){animation-duration:15s;animation-delay:-5s}.cm-public-design .t8-home .cm-launch-hero.cm-ambient-active .cm-azure-field>span:nth-child(3){animation-duration:18s;animation-delay:-9s} @keyframes t8-hero-flow{from{transform:translate3d(-3%,2%,0) rotate(-26deg) scale(.96)}to{transform:translate3d(7%,-7%,0) rotate(-15deg) scale(1.08)}} .cm-public-design .t8-scenes{--night:#0b1019;--white:#f3f8fa;--muted:#b2c5d6;--gutter:clamp(24px,6vw,112px);--space:clamp(100px,13vw,200px);background:transparent} .cm-public-design .t8-scenes .t7-button{background:#214b72;color:white}.cm-public-design .t8-scenes .manifesto h2{font-family:Outfit,sans-serif}.cm-public-design .t8-scenes .t8-feature-cta .cm-button{margin:48px 0 0 3vw;font-family:Outfit,sans-serif;font-size:16px;color:white} .t8-workspace{--cm-line:#46464c;--cm-link:#a4c9e8;--cm-ink:#f3f8fa;font-family:Outfit,sans-serif}.cm-public-design .t8-workspace .t5-workspace-wrap{min-height:0;padding-block:90px}.cm-public-design .t8-workspace .t5-workspace-wrap>.cm-container{position:static;min-height:0;padding-block:0}.cm-public-design .t8-workspace .t5-workspace-heading{display:block;margin-bottom:48px}.cm-public-design .t8-workspace .t5-workspace-heading h2{max-width:20ch;margin-bottom:20px}.cm-public-design .t8-workspace .t5-workspace-copy{display:block}.cm-public-design .t8-workspace .t5-workspace-nav button[aria-selected=true]{background:#214b72;color:white}.cm-public-design .t8-workspace .t5-workspace-copy>i{background:#214b72}.cm-public-design .t8-workspace .t5-preview{box-shadow:none}.cm-public-design .t8-workspace .t5-workspace-panel[hidden]{display:none} .t8-home #reviews .cm-reviews-track{overflow-x:auto;scroll-behavior:auto;scrollbar-width:thin;scrollbar-color:#537996 #0b1019}.t8-home #reviews{background:#0b1019}.t8-home #reviews .scroll-content{width:100%}.t8-home #reviews .review-card{flex-shrink:0}.t8-home #reviews .scroll-content[aria-hidden=true]{display:none} @media(max-width:767px){.t8-intro-brand{gap:12px;font-size:clamp(32px,9vw,68px)}.cm-public-design .t8-workspace .cm-container{width:calc(100% - 32px)}.cm-public-design .t8-workspace .t5-workspace-copy h3{font-size:32px}.cm-public-design .t8-workspace .t5-workspace-copy>i{margin-bottom:18px}.cm-public-design .t8-scenes .manifesto h2{font-size:clamp(36px,10.3vw,78px)}.cm-public-design .t8-scenes .manifesto{padding-block:90px}.cm-public-design .t8-scenes .t8-feature-cta .cm-button{max-width:94%;gap:12px}} @media(prefers-reduced-motion:reduce){.t8-intro{display:none!important}} @media(min-width:768px){ .cm-public-design .t8-workspace.t8-workspace-scroll .t5-workspace-wrap{padding-block:24px} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-workspace-heading{margin-bottom:24px} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-workspace-heading h2{font-size:clamp(34px,3.5vw,52px);max-width:26ch;margin-bottom:12px} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-workspace-panel{height:clamp(360px,49vh,520px);min-height:0;padding:28px;grid-template-columns:minmax(180px,.65fr) minmax(0,1.35fr);gap:24px} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-workspace-copy h3{font-size:34px;margin-bottom:16px} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-workspace-copy>i{margin-bottom:20px} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-preview{max-height:100%;overflow:auto} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-workspace-nav{padding:12px} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-workspace-nav button{min-height:44px;padding:10px 12px} } @media(max-width:767px){.t8-intro{max-height:100svh}.t8-intro-words,.t8-intro-brand{top:43%}} @media(prefers-reduced-motion:reduce){.cm-public-design .t8-home .cm-launch-hero.cm-ambient-active .cm-azure-field>span{animation:none}.t8-intro-pending .t8-home .cm-launch-grid,.t8-intro-pending .t8-home .cm-live-proof{visibility:visible}} .cm-public-design .t8-workspace .t5-workspace-copy .cm-text-link{color:#a4c9e8} /* A real pinned chapter on every screen; all seven tools share one stage. */ .cm-public-design .t8-workspace .t8-workspace-pin{position:relative;width:100%;overflow:visible} .cm-public-design .t8-workspace .t8-workspace-pin>.cm-container{position:relative;min-height:0;padding-block:0;display:block} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-preview{overflow:hidden} @media(max-width:767px){ .cm-public-design .t8-workspace.t8-workspace-scroll .t5-workspace-wrap{padding-block:32px} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-workspace-heading{margin-bottom:20px} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-workspace-heading h2{font-size:32px;margin-bottom:10px} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-workspace-heading p{font-size:14px} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-workspace-panel{height:450px;min-height:0;grid-template-rows:auto minmax(0,1fr);padding:18px;gap:14px} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-workspace-copy>i{display:none} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-workspace-copy h3{font-size:24px;margin-bottom:8px} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-workspace-copy p{font-size:13px;line-height:1.4;margin-bottom:10px} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-workspace-copy a{font-size:13px} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-preview{height:100%;min-height:0;transform:none} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-workspace-nav{padding:10px;gap:4px} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-workspace-nav button{min-height:42px;padding:8px 12px} } .cm-public-design .t8-scenes{overflow:clip} /* The fourth original background shape is now an element so it can enter with a word. */ .cm-public-design .t8-home .cm-azure-field::before{content:none} .cm-public-design .t8-home .t8-field-base{position:absolute;width:130%;height:530px;top:-230px;left:-15%;transform:rotate(-12deg);background:linear-gradient(110deg,#10131c 8%,#123a6b 45%,#007fff 75%,#00baff);z-index:-1} @media(max-width:767px){ .cm-public-design .t8-home .t8-field-base{height:380px;top:-265px;width:180%;left:-30%} .cm-public-design .t8-home .cm-azure-field>span:nth-child(1){top:160px;right:-120%} .cm-public-design .t8-home .cm-azure-field>span:nth-child(2){top:330px;right:-115%} .cm-public-design .t8-home .cm-azure-field>span:nth-child(3){display:block;top:500px;right:-120%;width:160%} } .t8-home :is(.t5-tone-telegram,[data-t8-feature="telegram"]){--feature:#3b82f6;--feature-text:#60a5fa;} .t8-home :is(.t5-tone-studio,[data-t8-feature="studio"]){--feature:#6366f1;--feature-text:#a5b4fc;} .t8-home :is(.t5-tone-creatorhub,[data-t8-feature="creatorhub"]){--feature:#a855f7;--feature-text:#c084fc;} .t8-home :is(.t5-tone-pagelinks,[data-t8-feature="pagelinks"]){--feature:#fde047;--feature-text:#fde047;} .t8-home :is(.t5-tone-viewinapp,[data-t8-feature="viewinapp"]){--feature:#ef4444;--feature-text:#f87171;} .t8-home :is(.t5-tone-fileshare,[data-t8-feature="fileshare"]){--feature:#22c55e;--feature-text:#4ade80;} .t8-home :is(.t5-tone-widget,[data-t8-feature="widget"]){--feature:#ec4899;--feature-text:#f472b6;} .cm-public-design .t8-home .cm-product-paths a>i{color:var(--feature-text)} .cm-public-design .t8-workspace .t5-workspace-nav button[aria-selected=true]{background:color-mix(in srgb,var(--feature) 22%,#101722);color:var(--feature-text);box-shadow:inset 3px 0 var(--feature)} .cm-public-design .t8-workspace .t5-workspace-copy>i{background:color-mix(in srgb,var(--feature) 18%,#101722);color:var(--feature-text)} .cm-public-design .t8-workspace .t5-workspace-copy .cm-text-link{color:var(--feature-text)} .cm-public-design .t8-workspace .t5-preview{background:color-mix(in srgb,var(--feature) 10%,#101722);color:#f3f8fa;border-color:color-mix(in srgb,var(--feature) 60%,#263649)} .cm-public-design .t8-workspace .t5-preview-bar{color:var(--feature-text);border-color:color-mix(in srgb,var(--feature) 35%,#263649)} .cm-public-design .t8-scenes .analytics{--feature:#6366f1;--feature-text:#a5b4fc} .cm-public-design .t8-scenes .vault{--feature:#22c55e;--feature-text:#4ade80} .cm-public-design .t8-scenes .bio{--feature:#fde047;--feature-text:#fde047} .cm-public-design .t8-scenes .widgets{--feature:#ec4899;--feature-text:#f472b6} .cm-public-design .t8-scenes :is(.analytics,.vault,.bio,.widgets) .t7-button{background:color-mix(in srgb,var(--feature) 20%,#101722);color:var(--feature-text);border:1px solid color-mix(in srgb,var(--feature) 55%,#263649)} .cm-public-design .t8-scenes .analytics-window{background:#171a35}.cm-public-design .t8-scenes .analytics .window-bar{color:#a5b4fc} .cm-public-design .t8-scenes .vault-folder{background:#155b3b}.cm-public-design .t8-scenes .vault-folder>span{color:#bbf7d0}.cm-public-design .t8-scenes .vault-permission{color:#86efac} .cm-public-design .t8-scenes .bio-cover{background:linear-gradient(130deg,#fde047,#fef08a)}.cm-public-design .t8-scenes .bio-avatar{background:#fde047;color:#241400}.cm-public-design .t8-scenes .bio-link.featured{background:#fde047;color:#241400} .cm-public-design .t8-scenes .broadcast{border:1px solid #ec489955}.cm-public-design .t8-scenes .broadcast-top{color:#f472b6;background:#32152b} .t8-home [data-cm-preview="telegram"][aria-selected=true]{color:#60a5fa;border-color:#3b82f6}.t8-home [data-cm-preview="modules"][aria-selected=true]{color:#a5b4fc;border-color:#6366f1}.t8-home [data-cm-preview="vault"][aria-selected=true]{color:#4ade80;border-color:#22c55e} .cm-public-design .t8-workspace .t5-preview .cm-demo-ui{color:#e4edf5} /* Match both labels and icons in the seven hero feature links to mainsite. */ .cm-public-design .t8-home .cm-product-paths a[data-t8-feature], .cm-public-design .t8-home .cm-product-paths a[data-t8-feature]>i, .cm-public-design .t8-home .cm-product-paths a[data-t8-feature]>span{color:var(--feature-text)} /* Complete intro words with a gentle fade; fit Abbonamenti on narrow screens. */ .t8-typewriter{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;white-space:nowrap;font:600 clamp(28px,7.5vw,112px)/1.1 Outfit,sans-serif;letter-spacing:-.04em} /* T7 ecosystem with a quiet background that does not obscure its connections. */ .cm-public-design .t8-scenes .ecosystem{isolation:isolate;background:radial-gradient(ellipse at 50% 40%,#173c5540,transparent 65%)} .cm-public-design .t8-scenes .ecosystem::before{content:'';position:absolute;z-index:-1;inset:8% -10% 28%;border:1px solid #68cfff0c;border-radius:50%;transform:rotate(-12deg);pointer-events:none} /* The title leads into the wider card; only the card stays centered while pinned. */ .cm-public-design .t8-workspace .cm-container{width:calc(100% - 64px);max-width:1600px} .cm-public-design .t8-workspace.t8-workspace-scroll .t8-workspace-title{margin-bottom:64px} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-workspace-heading{margin-bottom:0} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-workspace-heading h2{font-family:Outfit,sans-serif;font-size:clamp(40px,5.4vw,88px);font-weight:600;line-height:1.06;letter-spacing:-.04em;max-width:22ch;margin-bottom:24px} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-workspace-heading p{font-size:18px;color:#b2c5d6} .cm-public-design .t8-workspace .t5-workspace-wrap{padding-top:100px;padding-bottom:100px} /* Full-width automatic reviews. Duplicate group closes the loop seamlessly. */ .cm-public-design .t8-home #reviews{width:100%;max-width:none;mask-image:none} .cm-public-design .t8-home #reviews .cm-reviews-track{width:100%;max-width:none;margin:0;overflow:hidden;scroll-snap-type:none;mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent)} .cm-public-design .t8-home #reviews .scroll-wrapper{display:flex;width:max-content;gap:0;animation:none} .cm-public-design .t8-home #reviews .scroll-content,.cm-public-design .t8-home #reviews .scroll-content[aria-hidden="true"]{display:flex;width:max-content;flex:0 0 auto;gap:24px;padding:12px} .cm-public-design .t8-home #reviews .review-card{flex:0 0 360px;width:360px;max-width:85vw} .cm-public-design .t8-scenes .t8-pricing-title h2{font-size:clamp(40px,7.5vw,120px);line-height:1.02} .cm-public-design .t8-scenes .t8-pricing-title{padding-bottom:90px} @media(max-width:767px){ .t8-typewriter{top:43%;font-size:clamp(34px,9vw,68px)} .cm-public-design .t8-workspace .cm-container{width:calc(100% - 32px)} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-workspace-heading h2{font-size:40px} .cm-public-design .t8-workspace.t8-workspace-scroll .t8-workspace-title{margin-bottom:40px} .cm-public-design .t8-scenes .t8-pricing-title h2{font-size:clamp(26px,6.8vw,52px)} } @media(prefers-reduced-motion:reduce){ .cm-public-design .t8-home #reviews .cm-reviews-track{overflow-x:auto} .cm-public-design .t8-home #reviews .scroll-content[aria-hidden="true"]{display:none} .t8-type-caret{animation:none} } /* T8: direct editorial links and clean, legible product scenes. */ .cm-public-design .t8-scenes .t8-feature-cta h2{font-size:clamp(30px,7.6vw,120px)} .cm-public-design .t8-scenes .t8-feature-link{display:block} .cm-public-design .t8-scenes .t8-feature-link i{font-size:.65em;vertical-align:middle;transition:transform .2s} .cm-public-design .t8-scenes .t8-feature-link:hover i{transform:translateX(10px)} .cm-public-design .t8-scenes .t8-feature-link:hover{color:#68cfff} .cm-public-design .t8-scenes .vault-art{background:linear-gradient(135deg,#123a48,#081c2e)} .cm-public-design .t8-scenes .t8-image-symbol{display:block;font-size:76px;text-align:center;margin:30px auto;color:#ddc7ff} .cm-public-design .t8-scenes .broadcast-screen{background:#091521} .cm-public-design .t8-scenes .broadcast-alert{flex-wrap:wrap;border:1px solid #c390ff;box-shadow:0 12px 32px #0005} .cm-public-design .t8-scenes .t8-widget-label{flex-basis:100%;font-size:13px;letter-spacing:.03em;font-weight:600;color:#fff} .cm-public-design .t8-scenes .broadcast-chat{border:1px solid #49bbeb;background:#10283a;box-shadow:0 12px 32px #0005} .cm-public-design .t8-scenes .broadcast-chat b{color:#79d7ff;font-size:18px} .cm-public-design .t8-scenes .tts{padding:16px 20px;border:1px solid #35b9d0;border-radius:8px;background:#10283a;top:245px;left:28px} .cm-public-design .t8-scenes .broadcast-gift{border:1px solid #53b56b;background:#143625} .cm-public-design .t8-scenes .broadcast-raid{border:1px solid #aa75ed;background:#302044} .cm-public-design .t8-scenes .ecosystem::before{display:none} @media(max-width:767px){ .cm-public-design .t8-scenes .t8-feature-cta h2{font-size:7vw} .cm-public-design .t8-scenes .t8-pricing-title h2{font-size:7vw} .cm-public-design .t8-scenes .broadcast-screen{height:690px} .cm-public-design .t8-scenes .tts{top:245px;left:14px;right:14px;padding:14px} .cm-public-design .t8-scenes .broadcast-gift{bottom:268px} .cm-public-design .t8-scenes .broadcast-raid{bottom:207px} } /* One continuous background animation from first paint: visibility only pauses it. */ .cm-public-design .t8-home .cm-launch-hero .cm-azure-field>span{animation:t8-hero-flow 16s cubic-bezier(.45,0,.55,1) infinite alternate both;animation-play-state:paused} .cm-public-design .t8-home .cm-launch-hero .cm-azure-field>span:nth-child(2){animation-duration:20s;animation-delay:-5s} .cm-public-design .t8-home .cm-launch-hero .cm-azure-field>span:nth-child(3){animation-duration:24s;animation-delay:-9s} .cm-public-design .t8-home .cm-launch-hero.cm-ambient-active .cm-azure-field>span{animation-name:t8-hero-flow;animation-duration:16s;animation-timing-function:cubic-bezier(.45,0,.55,1);animation-fill-mode:both;animation-play-state:running} .cm-public-design .t8-home .cm-launch-hero.cm-ambient-active .cm-azure-field>span:nth-child(2){animation-duration:20s;animation-delay:-5s} .cm-public-design .t8-home .cm-launch-hero.cm-ambient-active .cm-azure-field>span:nth-child(3){animation-duration:24s;animation-delay:-9s} .t8-intro-cluster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(15px,4vw,70px)} .t8-intro-word{position:relative;font:600 clamp(18px,3.1vw,52px)/1.2 Outfit,sans-serif;color:#d4efff;visibility:hidden} .t8-intro-master{position:absolute;left:0;right:0;text-align:center;font:700 clamp(44px,10vw,150px)/1 Outfit,sans-serif;letter-spacing:-.05em;visibility:hidden} .t8-intro-halo{position:absolute;width:55%;height:30%;border-radius:50%;background:radial-gradient(ellipse,#168fff66,transparent 70%);filter:blur(22px);z-index:-1;visibility:hidden} .cm-public-design .t8-scenes .vault-folder>span{font-size:clamp(24px,3vw,40px);font-weight:700;text-shadow:0 3px 16px #00281966} .cm-public-design .t8-scenes .media-caption strong{font-size:clamp(22px,2.6vw,34px);color:#fff} .cm-public-design .t8-scenes .vault-metadata strong{font-size:clamp(22px,3vw,38px);line-height:1.2;color:#a4f3bd;max-width:22ch;display:block} .cm-public-design .t8-scenes .t8-feature-cta{position:relative;min-height:65vh;display:flex;align-items:center;padding-block:110px 160px;overflow:visible} .cm-public-design .t8-scenes .t8-feature-cta h2{position:relative;z-index:2;transform-origin:left center} .cm-public-design .t8-scenes .t8-long-arrow{position:absolute;left:0;top:calc(100% - 100px);width:160vw;height:5px;background:#68cfff;pointer-events:none;box-shadow:0 0 24px #168fff55} .cm-public-design .t8-scenes .t8-long-arrow::before{content:'';position:absolute;left:0;top:50%;width:36px;height:36px;border-left:5px solid #68cfff;border-bottom:5px solid #68cfff;transform:translateY(-50%) rotate(45deg)} .cm-public-design .t8-home #reviews{padding:100px 0;background:radial-gradient(ellipse at 50% 100%,#123a5533,transparent 65%),#0b0d10;font-family:Outfit,sans-serif;border-block:1px solid #6dcfff18} .cm-public-design .t8-home #reviews h2{font:600 clamp(34px,5vw,70px)/1.08 Outfit,sans-serif;letter-spacing:-.04em;color:#f3f8fa} .cm-public-design .t8-home #reviews .review-card{background:linear-gradient(145deg,#14212c,#10151c);border:1px solid #75cfff30;border-radius:18px;padding:30px;box-shadow:0 18px 40px #0003;transition:border-color .3s,box-shadow .3s} .cm-public-design .t8-home #reviews .review-card:hover{border-color:#68cfff88;box-shadow:0 18px 40px #0005} .cm-public-design .t8-home #reviews .review-card p{font-size:16px;line-height:1.65;color:#d8e6ef} .cm-public-design .t8-home #pricing{perspective:1200px} .cm-public-design .t8-home #pricing .cm-plan-card{transition-property:border-color,background-color;transform-origin:center bottom;will-change:transform,opacity} .cm-public-design .t8-home #pricing .cm-plan-popular{background:linear-gradient(155deg,#163047,#111b28);border-color:#68cfff} .cm-public-design .t8-scenes #final h2>span{display:block;transform-origin:center bottom} .cm-public-design .t8-scenes .t8-final-brand{color:#68cfff;font-size:clamp(44px,9vw,140px);letter-spacing:-.05em} .t8-return-layer{position:fixed;inset:0;z-index:10000;background:#0b0d10;display:grid;place-items:center;overflow:hidden;pointer-events:none;color:#68cfff} .t8-return-layer strong{font:700 clamp(44px,10vw,150px)/1 Outfit,sans-serif;letter-spacing:-.05em;white-space:nowrap;transform-origin:50% 50%} @media(max-width:767px){.t8-intro-cluster{gap:12px}.t8-intro-word{font-size:clamp(15px,4.4vw,25px)}.cm-public-design .t8-scenes .media-caption{align-items:flex-start;gap:12px;flex-direction:column}.cm-public-design .t8-scenes .vault-metadata{bottom:-65px}.cm-public-design .t8-home #reviews{padding-block:65px}.cm-public-design .t8-scenes .t8-feature-cta{min-height:50vh;padding-bottom:110px}.cm-public-design .t8-scenes .t8-long-arrow{top:calc(100% - 65px)}} @media(prefers-reduced-motion:reduce){.cm-public-design .t8-home .cm-launch-hero .cm-azure-field>span,.cm-public-design .t8-home .cm-launch-hero.cm-ambient-active .cm-azure-field>span{animation:none}.cm-public-design .t8-scenes .t8-long-arrow{left:12%;width:88%}.t8-return-layer{display:none}} .cm-public-design .t8-scenes .t8-vault-name{display:block;color:#4ade80;font-size:clamp(24px,3vw,40px);font-weight:600;margin-bottom:18px;letter-spacing:-.03em} .cm-public-design .t8-scenes .vault-stage{margin-bottom:100px} .cm-public-design .t8-scenes .vault-metadata{left:0;right:0;bottom:-95px;max-width:none;align-items:center;text-align:center} .cm-public-design .t8-scenes .vault-metadata strong{max-width:30ch} @media(max-width:767px){.cm-public-design .t8-scenes .vault-stage{margin-bottom:120px}.cm-public-design .t8-scenes .vault-metadata{bottom:-110px;padding-inline:20px}} /* Editorial scale, generous supporting copy, and product motion. */ .cm-public-design .t8-scenes .t8-feature-cta h2{font-size:clamp(66px,11.5vw,184px);line-height:.96} .cm-public-design .t8-scenes .t8-feature-cta{min-height:80vh;padding-block:70px} .cm-public-design .t8-scenes .t8-long-arrow{height:14px;box-shadow:0 0 30px #168fff44} .cm-public-design .t8-scenes .t8-long-arrow::before{width:64px;height:64px;border-width:14px} .cm-public-design .t8-scenes .manifesto>p,.cm-public-design .t8-scenes .scene-heading p,.cm-public-design .t8-scenes .bio-copy>p,.cm-public-design .t8-scenes #final>p{font-size:clamp(20px,2.1vw,30px);line-height:1.5;max-width:38ch} .cm-public-design .t8-home #cm-reviews-heading{font-size:clamp(44px,7.5vw,112px);line-height:1.02;letter-spacing:-.055em;text-align:left} .cm-public-design .t8-home #cm-reviews-heading>span{display:block} .cm-public-design .t8-home #cm-reviews-heading>span:last-child{color:#68cfff} .cm-public-design .t8-home #reviews h2+p{text-align:left;margin-left:0;font-size:clamp(20px,2vw,28px);color:#b2c5d6} .t8-studio-live{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;margin-top:26px} .t8-studio-chart{min-width:0;padding:20px;border:1px solid #a5b4fc30;border-radius:12px;background:#11152d} .t8-studio-chart svg{display:block;width:100%;overflow:visible;margin:24px 0 12px} .t8-live-dot{width:8px;height:8px;background:#68cfff;border-radius:50%;box-shadow:0 0 16px #68cfff} .t8-studio-feed{padding:20px;border:1px solid #a5b4fc30;border-radius:12px;background:#141a30} .t8-studio-feed h4{font-size:17px;color:#c7d2fe;margin-bottom:18px} .t8-studio-event{display:flex;align-items:center;gap:12px;padding:16px 0;border-top:1px solid #ffffff12;font-size:14px;color:#e2e8f0} .t8-studio-event i{color:#a78bfa;font-size:20px}.t8-studio-event:nth-of-type(2) i{color:#38bdf8}.t8-studio-event:nth-of-type(3) i{color:#34d399}.t8-studio-event b{color:#34d399;margin-left:auto} .cm-public-design .t8-scenes #bio-title{display:grid} .cm-public-design .t8-scenes #bio-title>span{grid-area:1/1} .cm-public-design .t8-scenes .t8-bio-custom{opacity:0} .cm-public-design .t8-scenes .bio-page{--bio-theme:#fde047;--bio-surface:#192334;background:var(--bio-surface);border-color:var(--bio-theme);box-shadow:0 25px 65px #0005;transform-style:preserve-3d} .cm-public-design .t8-scenes .bio-cover{background:var(--bio-theme)} .cm-public-design .t8-scenes .bio-avatar,.cm-public-design .t8-scenes .bio-link.featured{background:var(--bio-theme);color:#091521} .cm-public-design .t8-scenes .bio-link:not(.featured){border-color:var(--bio-theme)} .cm-public-design .t8-scenes .bio-signature{color:var(--bio-theme)} .cm-public-design .t8-scenes .broadcast-alert{transform-origin:center center;will-change:transform} .t8-return-layer .t8-final-brand{white-space:nowrap;display:block} @media(max-width:767px){ .cm-public-design .t8-scenes .t8-feature-cta h2{font-size:11.5vw} .cm-public-design .t8-scenes .t8-feature-cta{min-height:65vh} .cm-public-design .t8-scenes .t8-long-arrow{height:8px} .cm-public-design .t8-scenes .t8-long-arrow::before{width:34px;height:34px;border-width:8px} .cm-public-design .t8-scenes .manifesto>p,.cm-public-design .t8-scenes .scene-heading p,.cm-public-design .t8-scenes .bio-copy>p{font-size:20px} .t8-studio-live{grid-template-columns:1fr;gap:12px}.t8-studio-chart,.t8-studio-feed{padding:14px}.t8-studio-chart svg{max-height:125px;margin:12px 0}.t8-studio-event{padding:10px 0;font-size:13px} } @media(prefers-reduced-motion:reduce){.cm-public-design .t8-scenes .t8-bio-custom{display:none}.cm-public-design .t8-scenes .t8-bio-original{opacity:1}} /* Keep the phone readable in every palette and the full pinned composition in view. */ .cm-public-design .t8-scenes .bio-page,.cm-public-design .t8-scenes .bio-page h3,.cm-public-design .t8-scenes .bio-address,.cm-public-design .t8-scenes .bio-social{color:#edf6ff} .cm-public-design .t8-scenes .bio-page p{color:#bdd3e2} .cm-public-design .t8-scenes .bio-link:not(.featured){color:#163247} .cm-public-design .t8-scenes .bio{padding-top:30px;padding-bottom:30px} .cm-public-design .t8-scenes .bio-stage{padding-block:20px} .cm-public-design .t8-scenes .bio-cover{height:100px} @media(max-width:767px){ .cm-public-design .t8-scenes .bio{gap:12px;padding-block:15px} .cm-public-design .t8-scenes .bio-copy h2{font-size:32px} .cm-public-design .t8-scenes .bio-copy>p{font-size:18px;line-height:1.4;margin-top:14px} .cm-public-design .t8-scenes .bio-copy .t7-button{margin-top:12px;min-height:44px;padding-block:10px} .cm-public-design .t8-scenes .bio-stage{padding:12px 0;margin:0} .cm-public-design .t8-scenes .bio-page{width:260px;padding-bottom:12px} .cm-public-design .t8-scenes .bio-address{padding:8px;font-size:11px} .cm-public-design .t8-scenes .bio-cover{height:60px;margin-bottom:24px} .cm-public-design .t8-scenes .bio-avatar{width:52px;height:52px;line-height:44px;font-size:24px;border-width:4px;bottom:-16px} .cm-public-design .t8-scenes .bio-page h3{font-size:20px} .cm-public-design .t8-scenes .bio-page p{font-size:12px;line-height:1.35;margin-block:6px} .cm-public-design .t8-scenes .bio-social{font-size:11px;margin-block:10px} .cm-public-design .t8-scenes .bio-link{padding:9px;margin-top:7px;font-size:12px} .cm-public-design .t8-scenes .bio-signature{margin-top:10px;font-size:12px} } .cm-public-design .t8-scenes .t8-feature-link{font:inherit;line-height:inherit;letter-spacing:inherit} .cm-public-design .t8-scenes .t8-long-arrow::before{border:0;border-left:14px solid #68cfff;border-bottom:14px solid #68cfff} @media(max-width:767px){.cm-public-design .t8-scenes .t8-long-arrow::before{border-left-width:8px;border-bottom-width:8px}} @media(max-width:767px) and (max-height:750px){ .cm-public-design .t8-scenes .bio{padding-block:8px;gap:8px} .cm-public-design .t8-scenes .bio-copy h2{font-size:28px} .cm-public-design .t8-scenes .bio-copy>p{font-size:16px;line-height:1.3;margin-top:10px} .cm-public-design .t8-scenes .bio-copy .t7-button{min-height:36px;padding:7px 14px;margin-top:10px} .cm-public-design .t8-scenes .bio-stage{zoom:.65} } /* Override the legacy public-site mobile heading cap only in these T8 scenes. */ @media(max-width:767px){ .cm-public-design .t8-scenes .manifesto:not(.t8-pricing-title) h2{font-size:11.5vw!important} .cm-public-design .t8-home #cm-reviews-heading{font-size:clamp(36px,9.8vw,54px)!important} } /* Keep the requested feature heading on exactly two complete lines. */ .cm-public-design .t8-scenes .t8-feature-cta h2{font-size:clamp(30px,9.3vw,149px)!important} /* Explicit line counts and compact closing spacing. */ .cm-public-design .t8-home #cm-reviews-heading{font-size:clamp(14px,3.9vw,62px)!important;white-space:nowrap} .cm-public-design .t8-home #cm-reviews-heading>span{display:inline-block} .cm-public-design .t8-home #cm-reviews-heading>span+span{margin-left:.22em} .cm-public-design .t8-scenes #final{padding-block:80px 40px} .cm-public-design .t8-scenes #final h2{font-size:clamp(28px,6vw,96px);line-height:1.12} .cm-public-design .t8-scenes #final .t8-final-line{display:block;white-space:nowrap} .cm-public-design .t8-scenes #final .t8-final-brand,.cm-public-design .t8-scenes #final .t8-final-rest{display:inline-block;font-size:inherit;letter-spacing:-.05em} .cm-public-design .t8-scenes #final>p{margin:20px auto 8px} .cm-public-design .t8-scenes #final .t7-button{background:transparent;color:#68cfff;font-size:clamp(22px,2.5vw,36px);padding:8px 0;min-width:0;min-height:48px} .cm-public-design .t8-scenes #final .t7-button>span:first-child{background:linear-gradient(100deg,#68cfff,#a5a0ff,#f0abfc);background-clip:text;-webkit-background-clip:text;color:transparent} .cm-public-design .t8-scenes #final .t7-button:focus-visible{outline:2px solid #68cfff;outline-offset:8px} @media(max-width:767px){.cm-public-design .t8-scenes #final{padding-block:56px 24px}.cm-public-design .t8-scenes #final h2{font-size:5.8vw}} .t8-return-layer.is-returning .t8-final-brand{visibility:hidden!important} /* Closing sentence remains intact; only its surrounding copy fades for the zoom. */ .cm-public-design .t8-scenes #final h2{font-size:clamp(36px,6vw,96px)} .cm-public-design .t8-scenes #final .t8-final-line{display:block;font-size:clamp(17px,4.1vw,66px);white-space:nowrap} .cm-public-design .t8-scenes #final .t8-final-line>span{display:inline-block;font-size:inherit;letter-spacing:-.05em} .cm-public-design .t8-scenes #final>p{max-width:none;font-size:clamp(17px,1.7vw,27px);line-height:1.6} .cm-public-design .t8-scenes .t8-final-start{display:inline-flex;align-items:center;gap:.65em;margin-left:.35em;color:#68cfff;white-space:nowrap;font-weight:600} .t8-final-arrow{position:relative;width:2.2em;height:2px;background:currentColor;display:inline-block} .t8-final-arrow::after{content:'';position:absolute;right:0;top:50%;width:.55em;height:.55em;border-top:2px solid;border-right:2px solid;transform:translateY(-50%) rotate(45deg)} .t8-final-start:focus-visible{outline:2px solid #68cfff;outline-offset:5px} .t8-manifesto-desc-line{display:block} .t8-home #reviews .cm-reviews-track{cursor:grab;touch-action:pan-y} .t8-home #reviews .cm-reviews-track.is-dragging{cursor:grabbing;user-select:none} .t8-home #reviews .cm-reviews-track img{-webkit-user-drag:none} .t8-return-layer .t8-return-word{visibility:visible!important} /* Restore the large closing statement and continue the hero atmosphere to the footer. */ .cm-public-design .t8-scenes #final h2{font-size:clamp(36px,6vw,96px)} .cm-public-design .t8-scenes #final .t8-final-line{font-size:inherit} .cm-public-design .t8-scenes #final{padding-inline:20px} .t8-closing-region{position:relative;isolation:isolate;overflow:clip} .cm-public-design .t8-home .t8-closing-background{position:absolute;inset:0;z-index:-1;margin:0;padding:0;min-height:0;border:0;overflow:clip;background:transparent;pointer-events:none} .cm-public-design .t8-home .t8-closing-background .cm-azure-field{position:sticky;top:0;height:100vh;min-height:700px;width:100%;opacity:1} .cm-public-design .t8-closing-region #pricing,.cm-public-design .t8-closing-region footer,.cm-public-design .t8-closing-region footer>div{background:transparent!important} .cm-public-design .t8-closing-region footer>div>.grid-pattern,.cm-public-design .t8-closing-region footer>div>.bg-gradient-to-br{display:none} @media(max-width:767px){.cm-public-design .t8-scenes #final h2{font-size:5.8vw}} /* Give the closing statement breathing room before the footer. */ .cm-public-design .t8-scenes #final{padding-bottom:clamp(150px,24vh,280px)} .t8-return-backdrop{position:absolute;inset:-20px;overflow:hidden;background:#0b0d10;pointer-events:none} .t8-return-snapshot{position:absolute;margin:0!important;overflow:visible!important;isolation:isolate} .t8-return-layer>.t8-return-word{z-index:1} /* Hold the entire ending scene at the word's natural center, with no pre-zoom travel. */ .t8-ending-stage{position:relative} .cm-public-design .t8-scenes #final .t8-final-line{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:baseline;gap:.16em;white-space:nowrap} .cm-public-design .t8-scenes #final .t8-final-prefix{text-align:right} .cm-public-design .t8-scenes #final .t8-final-rest{text-align:left} .t8-final-arrow{width:1.65em;height:4px} .t8-final-arrow::after{width:.5em;height:.5em;border:0;border-top:4px solid currentColor;border-right:4px solid currentColor;background:transparent} @media(max-width:767px){.cm-public-design .t8-scenes #final .t8-final-line{font-size:5.8vw}} .cm-public-design .t8-scenes .automation-intro h3{font-size:38px} .cm-public-design .t8-home .cm-hero-platform-line{display:flex;flex-wrap:wrap;gap:12px 20px} .t8-hero-platform{display:inline-flex;align-items:center;gap:8px;white-space:nowrap} .t8-hero-platform-icon{display:inline-flex;width:1em;height:1em} .t8-hero-platform-icon svg{width:100%;height:100%;fill:currentColor} @media(max-width:767px){.cm-public-design .t8-scenes .automation-intro h3{font-size:33px}} /* Responsive T8 composition: size against CSS viewport width AND height. */ .cm-public-design .t8-home>.cm-launch-hero{padding-top:clamp(104px,14svh,156px)} .cm-public-design .t8-home .cm-launch-grid{min-height:0;gap:clamp(24px,3vw,48px);padding-block:24px} .cm-public-design .t8-home .cm-launch-copy{padding-bottom:24px;min-width:0} .cm-public-design .t8-home .cm-launch-copy h1{font-size:clamp(38px,min(5vw,8svh),76px);max-width:14ch} .cm-public-design .t8-home .cm-showcase{margin-right:0;min-width:0;padding-bottom:24px} .cm-public-design .t8-home .cm-live-proof{margin-top:clamp(16px,3svh,36px);padding-block:24px} .cm-public-design .t8-scenes{--gutter:clamp(20px,4vw,80px);--space:clamp(64px,10svh,128px)} .cm-public-design .t8-scenes :is(.scene-heading,.bio-copy) h2{font-size:clamp(32px,min(5vw,7.5svh),76px)} .cm-public-design .t8-scenes :is(.manifesto>p,.scene-heading p,.bio-copy>p){font-size:clamp(17px,1.65vw,24px)} .cm-public-design .t8-scenes .t8-feature-cta{min-height:0;padding-block:clamp(64px,12svh,140px)} .cm-public-design .t8-scenes .t8-feature-cta h2{font-size:clamp(28px,min(8.3vw,12svh),128px)!important} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-workspace-heading h2{font-size:clamp(32px,min(4.5vw,7svh),68px)} .cm-public-design .t8-workspace .cm-container{max-width:1400px} .cm-public-design .t8-scenes #final{padding-block:clamp(64px,10svh,120px)} .cm-public-design .t8-scenes #final h2{font-size:clamp(28px,min(5.3vw,8svh),80px)} .cm-public-design .t8-scenes #final .t8-final-line{display:flex;justify-content:center;flex-wrap:wrap;gap:0 .2em;white-space:normal;font-size:inherit} .cm-public-design .t8-closing-region footer{position:relative;visibility:visible;opacity:1} .cm-public-design .t8-home .t8-closing-background{padding:0} .cm-public-design .t8-home .t8-closing-background .cm-azure-field{min-height:0;height:100svh} @media(min-width:768px) and (max-height:850px){ .cm-public-design .t8-home .cm-showcase .cm-preview-panels{height:280px;min-height:280px} .cm-public-design .t8-home .cm-launch-copy h1{margin-bottom:20px} .cm-public-design .t8-home .cm-launch-copy>p{font-size:16px;line-height:1.6} .cm-public-design .t8-home .cm-showcase .cm-preview-note{padding-bottom:20px} } @media(max-width:1023px){ .cm-public-design .t8-home .cm-launch-grid{grid-template-columns:1fr;max-width:720px} .cm-public-design .t8-home .cm-launch-copy h1{font-size:clamp(36px,6vw,56px);max-width:19ch} .cm-public-design .t8-home .cm-showcase{width:100%;max-width:640px;margin-inline:auto} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-workspace-panel{height:auto;min-height:0} .cm-public-design .t8-workspace.t8-workspace-scroll .t5-preview{height:auto;min-height:280px} .cm-public-design .t8-scenes .bio-stage{zoom:1} } @media(max-width:767px){ .cm-public-design .t8-home>.cm-launch-hero{padding-top:96px} .cm-public-design .t8-home .cm-launch-grid{padding-block:16px} .cm-public-design .t8-home .cm-launch-copy h1{font-size:clamp(32px,8.5vw,48px)!important} .cm-public-design .t8-home .cm-launch-copy{padding-bottom:0} .cm-public-design .t8-home .cm-hero-platform-line{gap:10px 16px;font-size:13px} .cm-public-design .t8-scenes .manifesto:not(.t8-pricing-title):not(.t8-feature-cta) h2{font-size:clamp(30px,8.5vw,56px)!important} .cm-public-design .t8-scenes #final h2,.cm-public-design .t8-scenes #final .t8-final-line{font-size:clamp(24px,5.8vw,42px)} .cm-public-design .t8-scenes #final>p{font-size:17px} .cm-public-design .t8-workspace .t5-workspace-wrap{padding-block:56px} } /* The closing sentence precedes the footer and keeps its compact native spacing. */ .cm-public-design .t8-ending-stage #final{min-height:0;padding-block:clamp(64px,10svh,120px)} /* Shared feature strip uses each product's primary color. */ .cm-public-design .t8-home .cm-product-paths a[data-t8-feature], .cm-public-design .t8-home .cm-product-paths a[data-t8-feature]>i, .cm-public-design .t8-home .cm-product-paths a[data-t8-feature]>span{color:var(--feature)} .cm-public-design #reviews .review-card .cm-review-audience{font-size:12px;line-height:1.6;color:#b2c5d6;margin-top:5px} .cm-review-audience>i{font-size:10px;margin-right:4px;color:#00baff} /* Crw.Bio social satellites: TikTok and Instagram replace the product labels. */ .cm-public-design .t8-scenes .bio-satellites span:nth-child(6){background:#101010;color:#fff;border-color:transparent} .cm-public-design .t8-scenes .bio-satellites span:nth-child(7){background:linear-gradient(135deg,#833ab4,#c13584 55%,#fd8c45);color:#fff;border-color:transparent}