/* Clairyx Studio / From chaos to clarity
   Design tokens, editorial layouts, distinct product interfaces, responsive states.
   All artwork is local SVG/CSS. Fonts are remote references with system fallbacks. */
:root {
  --paper:#f4f2ed;
  --paper-deep:#ebe9e2;
  --ink:#161918;
  --muted:#646861;
  --line:#dcdcd4;
  --orange:#ff5b2b;
  --orange-ink:#bc3914;
  --green:#168361;
  --blue:#4b8bf4;
  --serif:'Prata','GFS Didot',Georgia,'Times New Roman',serif;
  --sans:'Manrope','Inter',Arial,sans-serif;
  --hand:'Caveat','Comic Neue',cursive;
  --mono:'SFMono-Regular',Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.25,1)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:115px;
  -webkit-text-size-adjust:100%
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:450 15px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  cursor:not-allowed;
  opacity:.45
}
a {
  color:inherit;
  text-decoration:none
}
a,button {
  touch-action:manipulation
}
img,svg {
  display:block
}
img {
  max-width:100%
}
h1,h2,h3,h4,p {
  margin:0
}
h1,h2,h3 {
  font-family:var(--serif);
  font-weight:400;
  line-height:1.18
}
h1 {
  font-size:clamp(64px,7.2vw,108px);
  letter-spacing:-.065em
}
h2 {
  font-size:clamp(36px,3.4vw,52px);
  letter-spacing:-.045em
}
h3 {
  font-size:26px;
  letter-spacing:-.045em
}
p {
  color:var(--muted)
}
ul,ol {
  padding-left:20px
}
button {
  color:inherit
}
::selection {
  background:#ffbc91;
  color:#161918
}
:focus-visible {
  outline:2px solid var(--orange-ink);
  outline-offset:5px
}
input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline-offset:2px
}
[hidden] {
  display:none!important
}
.sr-only {
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.container {
  width:min(1328px,calc(100% - 112px));
  margin-inline:auto
}
.period {
  color:var(--orange)
}
.icon {
  width:21px;
  height:21px;
  flex:none;
  stroke-width:1.6
}
.arrow {
  width:20px;
  height:20px;
  flex:none
}
.eyebrow {
  display:block;
  font-family:var(--sans);
  font-size:10px;
  font-weight:650;
  line-height:1.6;
  letter-spacing:.17em;
  color:var(--muted);
  text-transform:uppercase
}
.text-link {
  display:inline-flex;
  gap:15px;
  align-items:center;
  font-size:12px;
  font-weight:650;
  line-height:1.5;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px
}
.text-link .arrow {
  width:18px;
  height:18px;
  transition:transform .25s
}
.text-link:hover .arrow {
  transform:translateX(4px)
}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:22px;
  min-height:50px;
  padding:13px 26px;
  border:1px solid transparent;
  border-radius:50px;
  font-size:12px;
  font-weight:650;
  line-height:1.5;
  transition:transform .25s var(--ease),background .25s,border-color .25s
}
.button:hover {
  transform:translateY(-2px)
}
.button.primary {
  background:var(--orange);
  color:#171916;
  border-color:var(--orange);
  box-shadow:inset 0 1px 0 #ffffff30
}
.button.primary:hover {
  background:#ff743f
}
.button.outline {
  border-color:var(--line);
  background:transparent
}
.button.outline:hover {
  border-color:var(--ink)
}
.button.light {
  background:var(--paper);
  color:var(--ink)
}
.x-symbol {
  font-family:var(--sans);
  font-size:26px;
  font-weight:400;
  line-height:1
}
.handnote {
  font-family:var(--hand);
  font-size:25px;
  line-height:1.04;
  text-transform:uppercase;
  letter-spacing:.025em;
  transform:rotate(-8deg);
  pointer-events:none;
  position:relative;
  color:var(--ink)
}
.handnote svg {
  width:76px;
  height:57px;
  stroke:currentColor;
  fill:none;
  margin:5px 0 0 30px;
  stroke-width:1.3
}
.route-line {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  color:var(--orange);
  pointer-events:none;
  z-index:0;
  overflow:visible
}
.route-line path {
  stroke-width:1.5
}
.skip-link {
  position:fixed;
  top:-100px;
  left:16px;
  z-index:120;
  padding:12px 24px;
  background:var(--ink);
  color:white;
  border-radius:5px
}
.skip-link:focus {
  top:10px
}
.read-progress {
  position:fixed;
  inset:0 0 auto;
  height:2px;
  background:var(--orange);
  z-index:110;
  transform:scaleX(0);
  transform-origin:left
}
.site-header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(244,242,237,.94);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px)
}
.header-inner {
  width:min(1328px,calc(100% - 112px));
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  height:99px
}
.wordmark {
  font-family:var(--serif);
  font-size:24px;
  letter-spacing:-.075em;
  white-space:nowrap;
  line-height:1
}
.wordmark span {
  margin-left:4px
}
.primary-nav {
  display:flex;
  gap:36px;
  align-items:center
}
.primary-nav a {
  font-size:11px;
  font-weight:600;
  padding:12px 0;
  position:relative
}
.primary-nav a:after {
  position:absolute;
  content:'';
  height:1px;
  background:var(--orange);
  bottom:8px;
  left:0;
  width:100%;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s
}
.primary-nav a:hover:after,.primary-nav a[aria-current]:after {
  transform:scaleX(1)
}
.header-right {
  display:flex;
  align-items:center;
  gap:25px
}
.language-switch {
  display:flex;
  gap:9px
}
.language-switch a {
  font-size:9px;
  color:var(--muted);
  font-weight:600;
  line-height:28px
}
.language-switch a[aria-current] {
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--orange);
  text-underline-offset:5px
}
.header-cta {
  display:flex;
  align-items:center;
  gap:18px;
  border-left:1px solid var(--line);
  padding-left:25px;
  font-size:11px;
  font-weight:650;
  white-space:nowrap
}
.circle-arrow {
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--orange);
  color:var(--ink);
  transition:transform .3s
}
.header-cta:hover .circle-arrow {
  transform:rotate(-35deg)
}
.circle-arrow .arrow {
  width:18px
}
.menu-toggle {
  display:none;
  background:none;
  border:0;
  width:40px;
  height:40px;
  padding:8px
}
.menu-toggle span {
  display:block;
  background:var(--ink);
  height:1px;
  margin:6px 0;
  transition:transform .25s
}
.menu-toggle[aria-expanded=true] span:first-child {
  transform:translateY(3.5px) rotate(45deg)
}
.menu-toggle[aria-expanded=true] span:last-child {
  transform:translateY(-3.5px) rotate(-45deg)
}
/* Portfolio / an editorial, uneven rhythm instead of a uniform grid. */
.portfolio-hero {
  padding:66px 0 32px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 185px 278px;
  gap:25px;
  align-items:center
}
.portfolio-hero .eyebrow {
  margin-bottom:17px
}
.portfolio-hero h1 {
  font-size:clamp(76px,7.9vw,118px);
  line-height:1.06;
  white-space:nowrap
}
.hero-subtitle {
  font-size:21px;
  line-height:1.4;
  max-width:630px;
  color:var(--ink);
  margin-top:13px;
  letter-spacing:-.035em
}
.portfolio-note {
  align-self:start;
  justify-self:center;
  margin-top:9px
}
.portfolio-aside {
  font-size:12px;
  line-height:1.6;
  max-width:270px;
  padding-top:12px;
  color:var(--ink)
}
.portfolio-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin:8px 0 36px
}
.filter-list {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.filter-button {
  background:transparent;
  border:1px solid var(--line);
  border-radius:50px;
  padding:9px 17px;
  font-size:10px;
  line-height:1.6;
  white-space:nowrap;
  transition:background .25s,color .25s
}
.filter-button:hover {
  border-color:var(--ink)
}
.filter-button.active {
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper)
}
.work-count {
  display:flex;
  align-items:center;
  gap:14px;
  font-size:10px;
  white-space:nowrap
}
.work-count>i {
  height:9px;
  width:9px;
  flex:none;
  border-radius:50%;
  background:var(--orange);
  box-shadow:inset 0 0 0 3px #ffb484
}
.work-count .eyebrow {
  font-size:8px;
  letter-spacing:.13em
}
.count-line {
  width:58px;
  height:1px;
  background:var(--line);
  margin:0 12px
}
.case-grid {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:20px 18px
}
.case-card {
  min-width:0;
  grid-column:span 6;
  height:366px;
  position:relative;
  border:1px solid var(--line);
  border-radius:7px;
  overflow:hidden;
  isolation:isolate;
  transition:border-color .3s
}
.case-card:nth-child(6n+1) {
  grid-column:span 7
}
.case-card:nth-child(6n+2) {
  grid-column:span 5
}
.case-card:nth-child(6n+5) {
  grid-column:span 7
}
.case-card:nth-child(6n+6) {
  grid-column:span 5
}
.case-card.dark {
  background:linear-gradient(124deg,#111514,#202322 110%);
  color:#faf9f4;
  border-color:#242725
}
.case-card.light {
  background:linear-gradient(120deg,rgba(255,255,255,.04),rgba(255,255,255,.38))
}
.case-card:hover {
  border-color:#bbbdb3
}
.case-card-copy {
  position:relative;
  z-index:3;
  padding:27px 0 24px 28px;
  width:44%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.case-number {
  font-family:var(--sans);
  font-size:11px;
  line-height:1.4;
  color:var(--orange-ink);
  font-weight:650;
  text-decoration:underline;
  text-underline-offset:4px
}
.dark .case-number,.dark-surface .case-number {
  color:#ff905f
}
.case-card h3 {
  font-size:25px;
  letter-spacing:-.05em;
  line-height:1.12;
  margin:20px 0 14px
}
.case-card h3 a:hover {
  color:var(--orange)
}
.case-card-copy>p {
  font-size:11px;
  line-height:1.62;
  max-width:220px;
  margin-bottom:18px;
  min-height:55px
}
.dark p {
  color:#bdbfb9
}
.case-card .text-link {
  font-size:11px;
  gap:12px;
  margin-bottom:18px
}
.case-tags {
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  margin-top:auto;
  font-size:8px;
  line-height:1.5
}
.case-tags span {
  border-radius:30px;
  padding:5px 9px;
  background:#e7e6e0;
  white-space:nowrap;
  color:#3f443f
}
.dark .case-tags span {
  background:#ffffff10;
  color:#d4d7d1;
  border:1px solid #ffffff0d
}
.case-card-visual {
  position:absolute;
  z-index:2;
  left:47%;
  right:18px;
  top:28px;
  bottom:23px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  transition:transform .55s var(--ease)
}
.case-card:hover .case-card-visual {
  transform:translateY(-4px)
}
.preview-interface {
  width:100%;
  pointer-events:none;
  user-select:none
}
.case-card .route-line {
  left:25%;
  width:90%;
  opacity:1
}
.card-note {
  position:absolute;
  z-index:4;
  font-size:20px;
  right:15px;
  top:15px;
  max-width:104px
}
.card-note svg {
  width:52px;
  height:38px;
  margin-left:8px
}
.dark .card-note {
  color:#ff814d
}
.card-crm .case-card-visual {
  left:44%;
  right:-43px;
  top:28px;
  bottom:-20px;
  align-items:stretch;
  transform:rotate(.5deg);
  transform-origin:left bottom
}
.card-crm:hover .case-card-visual {
  transform:translateY(-4px) rotate(0)
}
.card-crm .card-note {
  display:none
}
.card-analytics .case-card-copy {
  width:44%;
  padding-left:23px
}
.card-analytics .case-card-visual {
  left:45%;
  right:17px;
  top:34px;
  bottom:36px
}
.card-analytics .card-note {
  display:none
}
.card-integrations .case-card-visual {
  left:41%;
  right:5px;
  top:38px;
  bottom:18px
}
.card-integrations .card-note {
  right:17px;
  top:12px
}
.card-bot .case-card-visual {
  left:47%;
  right:15px;
  bottom:-32px;
  top:23px
}
.card-bot .card-note {
  display:none
}
.card-monitoring .case-card-visual {
  left:44%;
  right:20px
}
.card-monitoring .case-card-copy {
  width:41%
}
.card-monitoring .card-note {
  top:auto;
  bottom:20px;
  right:17px;
  font-size:17px
}
.card-monitoring .card-note svg {
  display:none
}
.card-automation .case-card-copy {
  width:44%;
  padding-left:23px
}
.card-automation .case-card-visual {
  left:48%;
  right:-17px;
  bottom:24px;
  top:48px
}
.card-automation .card-note {
  top:10px;
  right:15px;
  font-size:16px
}
.card-reports .case-card-visual {
  top:21px;
  bottom:-40px;
  left:47%;
  right:20px;
  transform:rotate(3deg)
}
.card-reports .card-note {
  top:19px;
  right:13px;
  font-size:18px
}
.card-catalog .case-card-visual {
  left:45%;
  right:-55px;
  top:42px;
  bottom:30px
}
.card-catalog .card-note {
  display:none
}
.card-deployment .case-card-visual {
  left:45%;
  right:28px;
  top:28px;
  bottom:32px
}
.card-deployment .card-note {
  right:12px;
  bottom:15px;
  top:auto;
  font-size:18px
}
.card-deployment .card-note svg {
  display:none
}
.card-workspace .case-card-visual {
  left:47%;
  right:-36px;
  top:28px;
  bottom:22px
}
.card-workspace .card-note {
  display:none
}
.case-grid.is-filtered .case-card {
  grid-column:span 6
}
.portfolio-disclosure,.demo-disclosure,.case-provenance {
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:10px;
  line-height:1.7;
  color:var(--muted);
  max-width:1020px;
  margin:23px 0 0
}
.portfolio-disclosure .icon,.demo-disclosure .icon {
  width:14px;
  height:14px;
  margin-top:2px
}
.cta-section {
  padding:70px 0 60px;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(220px,.7fr) auto;
  align-items:center;
  gap:36px
}
.cta-section h2 {
  font-size:45px;
  line-height:1.13;
  max-width:600px;
  margin-top:17px
}
.cta-section p {
  font-size:12px;
  line-height:1.65;
  max-width:320px
}
.cta-section .button {
  white-space:nowrap
}
.site-footer {
  border-top:1px solid var(--line)
}
.footer-inner {
  display:grid;
  grid-template-columns:300px 1fr 225px 120px;
  align-items:center;
  width:min(1440px,100%);
  margin:auto;
  min-height:150px
}
.footer-art {
  height:150px;
  position:relative;
  overflow:hidden
}
.footer-art img {
  height:100%;
  width:100%;
  object-fit:cover
}
.footer-art>span {
  position:absolute;
  right:19px;
  top:38px;
  width:86px;
  font-size:8px;
  letter-spacing:.16em;
  line-height:1.75;
  color:#333933;
  font-weight:600
}
.footer-nav {
  display:flex;
  justify-content:center;
  gap:28px;
  font-size:10px
}
.footer-contact {
  display:flex;
  flex-direction:column;
  gap:7px;
  border-left:1px solid var(--line);
  padding-left:30px;
  font-size:10px
}
.footer-contact .eyebrow {
  font-size:8px;
  margin-bottom:6px
}
.footer-contact a {
  text-decoration:underline;
  text-underline-offset:3px;
  display:flex;
  align-items:center;
  gap:7px;
  width:max-content
}
.footer-contact .arrow {
  width:13px;
  height:13px
}
.footer-mark {
  padding-left:30px
}
.footer-mark>svg {
  width:49px;
  height:40px;
  margin-bottom:20px
}
.footer-mark>span {
  font-size:7px;
  letter-spacing:.16em;
  line-height:1.6;
  display:block
}
.footer-bottom {
  border-top:1px solid var(--line);
  padding:20px 0;
  width:min(1328px,calc(100% - 112px));
  margin:auto;
  display:flex;
  justify-content:space-between;
  gap:25px;
  align-items:center;
  font-size:9px;
  color:var(--muted)
}
.footer-bottom>div {
  display:flex;
  gap:25px
}
.footer-bottom a:hover,.footer-nav a:hover,.footer-contact a:hover {
  color:var(--orange-ink)
}
/* Homepage */
.home-hero {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1.16fr;
  gap:26px;
  min-height:588px;
  padding:55px 0 55px;
  align-items:center
}
.home-hero-copy {
  position:relative;
  z-index:2
}
.home-hero .eyebrow {
  margin-bottom:20px
}
.home-hero h1 {
  font-size:clamp(76px,7.8vw,112px);
  line-height:1.04;
  letter-spacing:-.07em
}
.home-hero-copy>p {
  font-size:16px;
  max-width:470px;
  margin-top:25px;
  color:#414740;
  line-height:1.65
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  margin-top:30px
}
.secondary-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  text-decoration:underline;
  text-underline-offset:4px;
  font-weight:600
}
.play-circle {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%
}
.play-circle .icon {
  width:15px;
  height:15px
}
.hero-signoff {
  display:flex;
  align-items:center;
  gap:13px;
  font-size:8px;
  letter-spacing:.14em;
  color:var(--muted);
  margin-top:37px
}
.small-x {
  font-size:27px;
  font-family:var(--sans);
  color:var(--ink);
  font-weight:400
}
.home-system-visual {
  height:463px;
  position:relative;
  min-width:0
}
.home-system-visual>.route-line {
  left:-8%;
  top:8%;
  width:110%;
  height:98%
}
.hero-note {
  position:absolute;
  left:10px;
  top:12px;
  font-size:23px
}
.hero-note svg {
  margin-left:35px
}
.chaos-inputs {
  position:absolute;
  left:0;
  top:113px;
  width:195px;
  z-index:3;
  display:grid;
  gap:15px
}
.input-fragment {
  min-height:54px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  background:#fafaf7;
  border:1px solid #e7e7df;
  border-radius:6px;
  box-shadow:0 8px 24px #282e2220;
  font-size:9px;
  line-height:1.5
}
.input-fragment>i {
  margin-left:auto;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--orange);
  flex:none
}
.fragment-icon {
  display:grid;
  place-items:center;
  background:#f1f4ef;
  width:29px;
  height:29px;
  border-radius:6px;
  flex:none
}
.fragment-icon .icon {
  width:19px;
  height:19px
}
.fragment-icon.green {
  color:#198858
}
.fragment-icon.blue {
  color:#2588ce
}
.fragment-icon.orange {
  color:#e6552c
}
.fragment-0 {
  transform:rotate(-3deg)
}
.fragment-1 {
  transform:translateX(-9px) rotate(2deg)
}
.fragment-2 {
  transform:translateX(8px) rotate(-2deg)
}
.fragment-3 {
  transform:translateX(-6px) rotate(2deg)
}
.hero-system-panel {
  position:absolute;
  top:65px;
  left:205px;
  right:-8px;
  z-index:2;
  transform:rotate(1.5deg);
  box-shadow:0 20px 50px #25271e12
}
.hero-system-panel .ui-workspace {
  min-height:307px;
  box-shadow:none
}
.hero-system-panel .is-compact .ui-topbar>strong {
  font-family:var(--serif);
  font-weight:400;
  font-size:21px
}
.hero-system-panel .is-compact .ui-main {
  padding:24px 22px
}
.hero-system-panel .is-compact .workspace-kpis {
  margin-top:18px
}
.hero-system-panel .is-compact .task-row {
  min-height:57px
}
.system-connected {
  background:var(--ink);
  color:#d5ddd3;
  font-size:9px;
  padding:11px 16px;
  display:flex;
  align-items:center;
  gap:9px;
  border-radius:0 0 5px 5px
}
.system-note {
  position:absolute;
  right:22px;
  bottom:0;
  font-size:23px
}
.system-note svg {
  display:none
}
.system-note:after {
  content:'';
  height:1px;
  background:var(--orange);
  width:115px;
  display:block;
  margin-top:8px;
  transform:rotate(-4deg)
}
.technology-strip {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:40px;
  justify-content:space-between;
  padding:24px 0
}
.technology-strip>.eyebrow {
  font-size:9px;
  max-width:200px
}
.technology-strip>div {
  display:flex;
  gap:38px;
  flex-wrap:wrap;
  align-items:center
}
.technology-strip>div>span {
  display:flex;
  gap:9px;
  align-items:center;
  font-size:12px;
  font-weight:550
}
.technology-strip .icon {
  width:20px
}
.section {
  padding:78px 0;
  border-bottom:1px solid var(--line)
}
.section-heading {
  display:grid;
  grid-template-columns:1.2fr 1fr auto;
  align-items:end;
  gap:36px;
  margin-bottom:36px
}
.section-heading>div {
  min-width:0
}
.section-heading .eyebrow {
  margin-bottom:18px
}
.section-heading h2 {
  font-size:47px;
  line-height:1.18
}
.section-heading>p {
  font-size:12px;
  line-height:1.7;
  max-width:410px;
  padding-bottom:4px
}
.section-heading>.text-link {
  white-space:nowrap;
  padding-bottom:8px
}
.problem-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px
}
.problem-grid article {
  position:relative;
  padding:8px 30px 6px 0;
  border-right:1px solid var(--line)
}
.problem-grid article:last-child {
  border:0
}
.service-icon {
  height:46px;
  width:46px;
  border-radius:10px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  background:#ffffff3b
}
.service-icon .icon {
  width:24px;
  height:24px;
  stroke-width:1.45
}
.problem-no {
  position:absolute;
  right:25px;
  top:12px;
  color:#999d95;
  font-size:9px;
  letter-spacing:.1em
}
.problem-grid h3 {
  margin-top:22px;
  font-size:27px
}
.problem-grid p {
  font-size:12px;
  line-height:1.75;
  margin-top:12px;
  max-width:315px
}
.featured-section {
  padding-bottom:60px
}
.featured-grid .case-card:nth-child(n) {
  grid-column:span 6
}
.featured-grid .case-card {
  height:354px
}
.featured-grid .case-card h3 {
  font-size:26px
}
.featured-grid .card-analytics .case-card-copy {
  padding-left:28px
}
.home-demo-section {
  position:relative
}
.demo-tabs {
  display:flex;
  width:max-content;
  max-width:100%;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:7px 7px 0 0;
  overflow:hidden
}
.demo-tabs>button {
  background:transparent;
  display:flex;
  align-items:center;
  gap:12px;
  border:0;
  border-right:1px solid var(--line);
  font-size:12px;
  padding:16px 28px;
  color:var(--muted)
}
.demo-tabs>button:last-child {
  border-right:0
}
.demo-tabs>button>span {
  font-size:9px;
  opacity:.6;
  margin-left:15px
}
.demo-tabs>button[aria-selected=true] {
  background:var(--ink);
  color:var(--paper)
}
.demo-tabs .icon {
  width:18px;
  height:18px
}
.home-demo-stage {
  position:relative
}
.demo-note {
  position:absolute;
  right:24px;
  top:-71px;
  font-size:21px
}
.live-demo {
  border:1px solid #c9cdc3;
  border-radius:7px;
  overflow:hidden;
  box-shadow:0 15px 45px #20272009;
  background:#fff
}
.home-demo-stage .live-demo {
  border-top-left-radius:0
}
.demo-window-bar {
  height:39px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #e0e3da;
  background:#eeefe9;
  padding:0 20px;
  gap:10px;
  color:#72796d;
  font-family:var(--mono);
  font-size:9px
}
.window-dots {
  display:flex;
  gap:5px
}
.window-dots>i {
  width:6px;
  height:6px;
  background:#a4aaa0;
  border-radius:50%
}
.window-dots>i:first-child {
  background:#ff916e
}
.demo-indicator {
  display:flex;
  gap:7px;
  align-items:center;
  font-size:8px
}
.demo-indicator .icon {
  width:12px;
  height:12px
}
.live-demo .product-ui {
  border:0;
  border-radius:0;
  box-shadow:none;
  min-height:470px
}
.live-demo .ui-main {
  padding:28px 33px
}
.live-demo .ui-analytics .ui-main {
  max-width:1080px;
  margin:auto;
  width:100%
}
.live-demo .ui-monitoring .ui-main,.live-demo .ui-deployment .ui-main {
  max-width:1000px;
  margin:auto;
  width:100%
}
.services-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px
}
.service-card {
  padding:25px 23px 19px;
  border:1px solid var(--line);
  border-radius:5px;
  transition:background .25s,transform .25s
}
.service-card:hover {
  background:#fcfbf7;
  transform:translateY(-3px)
}
.service-card .service-icon {
  background:none;
  border:0;
  width:29px;
  height:34px
}
.service-card h3 {
  font-size:23px;
  margin-top:23px;
  line-height:1.25
}
.service-card p {
  font-size:11px;
  line-height:1.7;
  margin:12px 0 28px;
  min-height:56px
}
.service-card>div {
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  padding-top:14px;
  font-size:8px;
  letter-spacing:.025em
}
.service-card .arrow {
  width:17px
}
.pricing-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px
}
.price-card {
  padding:28px;
  border:1px solid var(--line);
  border-radius:6px;
  display:flex;
  flex-direction:column;
  background:#ffffff1f
}
.price-card.featured {
  border-color:var(--orange);
  background:#faf8f2;
  position:relative;
  box-shadow:0 9px 40px #1b291308
}
.price-name {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px
}
.price-name h3 {
  font-size:28px
}
.price-name>span {
  font-size:8px;
  color:var(--orange-ink);
  padding:5px 8px;
  border-radius:4px;
  background:#ffe1d3;
  font-weight:650;
  text-transform:uppercase;
  letter-spacing:.04em
}
.price-card>p {
  font-size:12px;
  line-height:1.7;
  min-height:47px;
  max-width:300px;
  margin-top:14px
}
.price {
  display:flex;
  flex-direction:column;
  margin-top:27px
}
.price>small {
  font-size:10px;
  color:var(--muted)
}
.price>strong {
  font-family:var(--serif);
  font-weight:400;
  font-size:48px;
  letter-spacing:-.05em;
  line-height:1.35
}
.price>strong>span {
  font-size:30px
}
.price-time {
  font-size:10px;
  margin-top:5px;
  color:var(--muted)
}
.price-card ul {
  padding:0;
  margin:28px 0;
  list-style:none;
  display:grid;
  gap:11px;
  font-size:11px
}
.price-card li {
  display:flex;
  gap:9px;
  align-items:flex-start
}
.price-card li .icon {
  width:14px;
  height:14px;
  margin-top:2px
}
.price-card .button {
  margin-top:auto;
  min-height:44px;
  width:100%;
  font-size:11px
}
.process-grid {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:24px;
  margin:45px 0 70px;
  position:relative
}
.process-grid:before {
  content:'';
  height:1px;
  position:absolute;
  left:0;
  right:0;
  top:15px;
  background:var(--line)
}
.process-grid article {
  position:relative
}
.process-number {
  height:31px;
  width:31px;
  display:grid;
  place-items:center;
  background:var(--orange);
  border-radius:50%;
  font-size:9px;
  margin-bottom:24px;
  position:relative;
  box-shadow:0 0 0 7px var(--paper)
}
.process-grid h3 {
  font-family:var(--sans);
  font-size:13px;
  font-weight:650;
  letter-spacing:-.02em;
  margin-bottom:10px
}
.process-grid p {
  font-size:10px;
  line-height:1.75;
  max-width:165px
}
.approach-statement {
  display:grid;
  grid-template-columns:90px 1fr 180px;
  align-items:center;
  border-top:1px solid var(--line);
  padding-top:45px;
  gap:35px
}
.approach-statement>.x-symbol {
  font-size:112px;
  font-weight:400;
  color:var(--orange);
  line-height:.8
}
.approach-statement>p {
  font-family:var(--serif);
  font-size:40px;
  line-height:1.25;
  letter-spacing:-.045em;
  color:var(--ink)
}
.approach-statement>.eyebrow {
  font-size:8px
}
.faq-section {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:85px
}
.faq-section h2 {
  margin-top:17px;
  max-width:410px
}
.faq-section .handnote {
  font-size:23px;
  margin:38px 0 10px 10px;
  width:max-content
}
.faq-section .handnote svg {
  width:55px;
  height:35px;
  margin-left:60px
}
.faq-list {
  border-top:1px solid var(--line)
}
.faq-list details {
  border-bottom:1px solid var(--line);
  padding:20px 0
}
.faq-list summary {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  cursor:pointer;
  font-weight:550;
  font-size:13px
}
.faq-list summary::-webkit-details-marker {
  display:none
}
.faq-list summary .icon {
  width:18px;
  height:18px;
  transition:transform .3s
}
.faq-list details[open] summary .icon {
  transform:rotate(45deg)
}
.faq-list p {
  font-size:12px;
  margin-top:17px;
  line-height:1.8;
  max-width:520px
}
/* Product UI foundations. Compact previews and full interactive views share data,
   but have different spacing and detail density, not a scaled screenshot. */
.product-ui {
  font-family:var(--sans);
  font-size:12px;
  line-height:1.5;
  color:#242d2a;
  background:#fbfcf9;
  border:1px solid #dcdfd8;
  border-radius:7px;
  overflow:hidden;
  box-shadow:0 13px 33px #1227190b;
  isolation:isolate
}
.product-ui h3 {
  font-family:var(--sans);
  font-weight:600;
  letter-spacing:-.02em;
  font-size:18px
}
.product-ui p {
  color:#737d74
}
.product-ui .icon {
  width:17px;
  height:17px;
  stroke-width:1.6
}
.product-ui button,.product-ui input,.product-ui select,.product-ui textarea {
  font-family:var(--sans);
  font-size:inherit
}
.product-ui button:focus-visible,.product-ui input:focus-visible,.product-ui select:focus-visible,.product-ui textarea:focus-visible {
  outline-color:#b83919;
  outline-offset:3px
}
.ui-main {
  min-width:0;
  padding:23px
}
.ui-topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:19px
}
.ui-topbar>strong {
  font-size:17px;
  font-weight:650;
  letter-spacing:-.045em
}
.ui-controls {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0
}
.ui-controls>small {
  font-size:9px;
  color:#768174
}
.ui-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:7px 11px;
  border:1px solid #dce1d7;
  background:#fff;
  color:#2e3930;
  border-radius:5px;
  font-size:10px;
  line-height:1.5;
  white-space:nowrap;
  min-height:32px
}
.ui-button:hover:not(:disabled) {
  border-color:#b3bdb0;
  background:#f3f5ef
}
.ui-button.ui-accent {
  background:#242d27;
  color:#f9faf6;
  border-color:#242d27
}
.ui-button.ui-accent:hover {
  background:#3a483d
}
.ui-button .icon {
  width:14px;
  height:14px
}
.ui-pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:5px;
  padding:4px 7px;
  font-size:8px;
  line-height:1.45;
  color:#697369;
  background:#f0f2eb;
  white-space:nowrap;
  letter-spacing:0;
  font-weight:500
}
.ui-pill.green {
  background:#e3f4e9;
  color:#17754c
}
.ui-pill.amber {
  background:#fff0d6;
  color:#805013
}
.ui-pill.red {
  background:#ffebe2;
  color:#a83619
}
.status-dot {
  height:6px;
  width:6px;
  border-radius:50%;
  display:inline-block;
  background:#2db77e;
  flex:none
}
.ui-bottom-note {
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin-top:23px;
  font-size:9px;
  color:#758074
}
.ui-bottom-note>.icon {
  width:14px;
  height:14px
}
.ui-subhead {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:11px;
  font-weight:650;
  margin:24px 0 12px;
  letter-spacing:-.02em
}
.ui-subhead>span:not(.ui-pill) {
  font-size:8px;
  font-weight:400;
  color:#80887d
}
.ui-empty {
  padding:20px 0;
  text-align:center;
  font-size:11px;
  color:#81897d
}
.ui-crumb {
  font-size:9px;
  color:#7c8578;
  margin-bottom:27px;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.ui-sidebar {
  display:flex;
  flex-direction:column;
  width:174px;
  flex:none;
  padding:23px 15px;
  background:linear-gradient(155deg,#111814,#242b25);
  color:#e3e9dd
}
.ui-brand {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  letter-spacing:-.04em;
  font-weight:600;
  margin-bottom:28px
}
.ui-brand>.x-symbol {
  display:grid;
  place-items:center;
  border:1px solid #7b8d73;
  border-radius:5px;
  width:22px;
  height:22px;
  font-size:24px;
  font-weight:400
}
.ui-navigation {
  display:grid;
  gap:6px
}
.ui-navigation>span {
  display:flex;
  align-items:center;
  gap:11px;
  border-radius:5px;
  padding:10px 8px;
  font-size:10px;
  color:#b1bdac
}
.ui-navigation>span.active {
  background:#ffffff0b;
  color:#ff996e
}
.ui-settings {
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:auto;
  padding:24px 8px 0;
  font-size:9px;
  color:#a4b09f
}
.ui-settings .icon {
  width:15px
}
.ui-summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin:5px 0 23px
}
.ui-summary>strong {
  font-size:22px;
  letter-spacing:-.06em
}
.ui-summary>strong>small {
  font-size:11px;
  letter-spacing:0;
  font-weight:400;
  color:#818b7c;
  margin-left:4px
}
.ui-summary>span {
  color:#7b8575;
  font-size:9px
}
.ui-select-label select,.report-controls select {
  background:#fff;
  color:#394335;
  border:1px solid #dce2d6;
  border-radius:4px;
  padding:7px 25px 7px 10px;
  font-size:10px;
  max-width:100%
}
.ui-crm {
  display:flex
}
.ui-crm .ui-main {
  flex:1
}
.kanban {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  min-width:0
}
.kanban-column {
  padding:13px 9px 8px;
  background:#f0f2ec;
  border:1px solid #e8eae2;
  border-radius:5px;
  min-width:0
}
.kanban-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  font-size:10px;
  font-weight:600;
  margin-bottom:8px
}
.kanban-title>span {
  display:flex;
  align-items:center;
  gap:6px
}
.kanban-title>small {
  background:#e5e9df;
  padding:1px 5px;
  border-radius:3px;
  color:#75816c;
  font-size:8px
}
.stage-dot {
  width:5px;
  height:5px;
  background:#4da089;
  border-radius:50%
}
.stage-1 {
  background:#528fea
}
.stage-2 {
  background:#a98c53
}
.column-total {
  display:block;
  font-size:10px;
  font-weight:600;
  color:#45875c;
  margin-bottom:13px
}
.deal-card {
  display:flex;
  width:100%;
  flex-direction:column;
  align-items:stretch;
  text-align:left;
  border:1px solid #e8ebe3;
  background:#fff;
  border-radius:5px;
  padding:12px 11px;
  margin-top:9px;
  box-shadow:0 2px 3px #14260904;
  transition:border .2s,box-shadow .2s
}
.deal-card:hover {
  border-color:#a8bda0;
  box-shadow:0 4px 12px #30492910
}
.deal-source {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:8px;
  color:#7c8873;
  margin-bottom:9px
}
.deal-card>strong {
  font-size:11px;
  line-height:1.4;
  font-weight:650;
  letter-spacing:-.03em
}
.deal-amount {
  font-size:10px;
  color:#5a6355;
  margin-top:6px
}
.deal-task {
  margin-top:16px;
  font-size:9px;
  display:flex;
  gap:5px;
  line-height:1.5;
  color:#6b7564;
  min-height:29px
}
.deal-task .icon {
  width:12px;
  height:12px;
  margin-top:1px
}
.deal-bottom {
  margin-top:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px
}
.avatar {
  display:grid;
  place-items:center;
  background:#d8e7d3;
  color:#3d583c;
  font-size:7px;
  font-weight:650;
  border-radius:50%;
  height:23px;
  width:23px;
  flex:none;
  border:1px solid #bacaaf
}
.a-ML {
  background:#e4dacf;
  color:#665342;
  border-color:#d4c4b3
}
.a-SP {
  background:#dcdff0;
  color:#575d7a;
  border-color:#c8cfe5
}
.deal-bottom>small {
  font-size:7px;
  color:#92998b;
  white-space:nowrap
}
.analytics-total {
  display:flex;
  align-items:center;
  gap:18px;
  margin:12px 0 5px
}
.analytics-total>strong {
  font-size:34px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:-.075em
}
.analytics-total .ui-pill {
  font-size:7px
}
.bar-chart {
  height:188px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:9px;
  position:relative;
  padding-top:18px;
  isolation:isolate
}
.chart-grid {
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(to top,transparent 0,transparent calc(25% - 1px),#e8ede4 calc(25% - 1px),#e8ede4 25%);
  z-index:-1
}
.bar-chart>span {
  height:var(--v);
  flex:1;
  max-width:48px;
  border-radius:3px 3px 0 0;
  background:linear-gradient(0deg,#74a5f3,#accafa);
  transition:height .4s var(--ease)
}
.bar-chart>span:nth-last-child(-n+3) {
  background:linear-gradient(0deg,#367ae3,#77a7fb)
}
.chart-axis {
  display:flex;
  justify-content:space-between;
  font-size:8px;
  color:#94a08c;
  padding-top:8px
}
.analytics-kpis {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:24px
}
.analytics-kpis>div {
  padding:17px 18px;
  background:#f0f3ec;
  border-radius:5px;
  display:flex;
  flex-direction:column;
  gap:6px
}
.analytics-kpis small {
  font-size:9px;
  color:#6d7b64
}
.analytics-kpis strong {
  font-weight:600;
  font-size:23px;
  letter-spacing:-.05em
}
.analytics-details {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:45px;
  margin-top:12px
}
.channel-row {
  display:grid;
  grid-template-columns:85px 1fr 30px;
  gap:12px;
  align-items:center;
  font-size:10px;
  margin:11px 0
}
.channel-row>div {
  height:4px;
  background:#e9eee3;
  border-radius:20px;
  overflow:hidden
}
.channel-row>div>i {
  display:block;
  height:100%;
  background:#8daa93;
  border-radius:20px
}
.channel-row>strong {
  font-weight:500;
  font-size:9px;
  color:#6e7a64;
  text-align:right
}
.product-row {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:10px;
  border-bottom:1px solid #e6ebdf;
  padding:10px 0
}
.product-row>strong {
  margin-left:auto;
  white-space:nowrap;
  font-size:10px;
  font-weight:600
}
.tiny-product {
  width:25px;
  height:30px;
  background:#f0f3eb;
  display:grid;
  place-items:center;
  border-radius:4px;
  color:#687b58
}
.tiny-product .icon {
  width:15px;
  height:15px
}
.integration-map {
  position:relative;
  width:100%;
  height:306px;
  max-width:450px;
  margin:auto
}
.integration-map>svg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  color:#bfc4ba;
  pointer-events:none
}
.hub-core {
  position:absolute;
  left:50%;
  top:47%;
  transform:translate(-50%,-50%);
  width:75px;
  height:77px;
  border-radius:15px;
  background:linear-gradient(145deg,#303733,#0b110f);
  border:1px solid #404841;
  box-shadow:0 10px 15px #121a151e;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  color:white;
  z-index:2
}
.hub-core>.x-symbol {
  font-size:44px;
  line-height:.9
}
.hub-core>small {
  font-family:var(--sans);
  font-size:6px;
  letter-spacing:.16em
}
.integration-node {
  position:absolute;
  transform:translate(-50%,-50%);
  width:52px;
  height:54px;
  border:1px solid #e3e7dc;
  border-radius:9px;
  background:#fff;
  box-shadow:0 8px 18px #2d3a2810;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:3px
}
.integration-node .icon {
  width:24px;
  height:24px
}
.integration-node small {
  font-size:7px;
  font-weight:650
}
.integration-node.chosen {
  outline:2px solid #ff915f;
  outline-offset:4px
}
.integration-node.green {
  color:#1c9762
}
.integration-node.blue {
  color:#468ace
}
.integration-node.orange {
  color:#dc6e37
}
.integration-node.violet {
  color:#6d66c3
}
.integration-node.gray {
  color:#6e7669
}
.ui-integrations.is-compact {
  border:0;
  background:transparent;
  overflow:visible;
  box-shadow:none
}
.integration-two {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:500px
}
.map-side {
  background:#f3f5ee;
  padding:28px 28px 35px;
  display:flex;
  flex-direction:column;
  min-width:0
}
.map-side>.integration-map {
  flex:1;
  min-height:320px
}
.connection-info {
  display:flex;
  align-items:center;
  gap:12px;
  border-top:1px solid #dce3d4;
  padding-top:20px;
  font-size:10px;
  margin-top:25px
}
.connection-info>strong {
  font-size:13px
}
.connection-info .status-dot {
  margin-left:auto
}
.event-side {
  padding:28px;
  min-width:0
}
.event-list {
  display:grid;
  gap:13px;
  margin:23px 0
}
.event-row {
  display:grid;
  grid-template-columns:50px 1fr auto;
  gap:13px;
  align-items:center;
  border-bottom:1px solid #e3e9dc;
  padding-bottom:12px
}
.event-row>time {
  font-family:var(--mono);
  font-size:8px;
  color:#929b89
}
.event-row>div {
  display:flex;
  flex-direction:column;
  gap:5px
}
.event-row strong {
  font-family:var(--mono);
  font-size:10px;
  font-weight:500
}
.event-row small {
  font-size:9px;
  color:#7e8c73
}
.event-side .ui-subhead {
  margin-top:28px
}
.event-payload {
  white-space:pre-wrap;
  font:10px/1.8 var(--mono);
  color:#556f57;
  background:#f3f5ef;
  padding:16px;
  border-radius:4px;
  border:1px solid #e1e8d8;
  margin:10px 0 0
}
.ui-bot {
  max-width:450px;
  background:#1d2425;
  border:1px solid #465151;
  color:#f4f8f6
}
.chat-shell {
  display:flex;
  flex-direction:column;
  min-height:515px
}
.chat-header {
  display:flex;
  align-items:center;
  gap:11px;
  padding:18px;
  background:#18201f;
  border-bottom:1px solid #34403b
}
.telegram-icon {
  display:grid;
  place-items:center;
  width:35px;
  height:35px;
  border-radius:50%;
  background:#2586c7;
  color:white;
  flex:none
}
.telegram-icon>.icon {
  width:21px;
  height:21px;
  transform:rotate(-12deg)
}
.chat-header>div {
  flex:1;
  min-width:0
}
.chat-header strong {
  display:block;
  font-size:11px;
  font-weight:550
}
.chat-header small {
  display:block;
  font-size:8px;
  margin-top:3px;
  color:#8caaa1
}
.chat-header .ui-button {
  background:#26332e;
  border-color:#34483b;
  color:#c4d7c9;
  min-height:29px;
  padding:5px 8px
}
.chat-messages {
  padding:20px 17px;
  display:flex;
  flex-direction:column;
  gap:11px;
  max-height:600px;
  overflow:auto;
  flex:1;
  background-image:radial-gradient(#aacbb20b .8px,transparent .8px);
  background-size:13px 13px
}
.chat-bubble {
  font-size:11px;
  line-height:1.6;
  border-radius:8px;
  padding:11px 13px;
  max-width:90%;
  box-shadow:0 2px 3px #0000001a
}
.chat-bubble.bot {
  align-self:flex-start;
  color:#26332b;
  background:#f4f5ef;
  border-bottom-left-radius:2px
}
.chat-bubble.user {
  align-self:flex-end;
  background:#38534a;
  color:#e0ece4;
  border-bottom-right-radius:2px
}
.chat-bubble>small {
  display:block;
  font-size:7px;
  text-align:right;
  margin-top:3px;
  opacity:.55
}
.chat-options {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:8px;
  max-width:90%
}
.chat-options .ui-button {
  background:#f4f6ef;
  border-color:#d6e3d2;
  color:#397db5;
  font-size:10px;
  white-space:normal;
  text-align:center;
  min-height:34px;
  flex:1 1 42%
}
.chat-options .ui-button:hover {
  background:#dcecd9
}
.chat-input {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #34443c;
  padding:14px;
  color:#8ea08e;
  font-size:9px
}
.chat-input>.icon {
  width:15px
}
.chat-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:15px;
  border-top:1px solid #34403b
}
.chat-footer .ui-button {
  background:#26342d;
  border-color:#465247;
  color:#d6e3ce;
  font-size:9px
}
.chat-footer>span {
  font-size:8px;
  color:#92a18d
}
.lead-summary {
  background:#f3f5ee;
  border-radius:7px;
  padding:16px;
  color:#2e402e
}
.lead-summary dl {
  margin:14px 0 0
}
.lead-summary dl>div {
  display:flex;
  justify-content:space-between;
  gap:15px;
  border-top:1px solid #dce5d5;
  padding-top:8px;
  margin-top:8px;
  font-size:10px
}
.lead-summary dt {
  color:#7c8973
}
.lead-summary dd {
  margin:0;
  max-width:60%;
  text-align:right
}
.ui-monitoring,.ui-deployment {
  background:linear-gradient(135deg,#151d18,#0f1412);
  color:#d9e5d3;
  border-color:#354537
}
.ui-monitoring .ui-pill.green,.ui-deployment .ui-pill.green {
  background:#1c3b2f;
  color:#83dbb8
}
.ui-monitoring .ui-pill.amber,.ui-deployment .ui-pill.amber {
  background:#4a3726;
  color:#e9b781
}
.health-head {
  display:flex;
  align-items:center;
  gap:13px;
  border-bottom:1px solid #2c392b;
  padding:4px 0 24px
}
.health-icon {
  display:grid;
  place-items:center;
  background:#69c99d;
  width:39px;
  height:39px;
  border-radius:50%;
  color:#143525
}
.health-icon>.icon {
  width:22px;
  height:22px
}
.health-icon.amber {
  background:#e0a160;
  color:#473411
}
.health-head strong {
  font-size:13px;
  font-weight:600;
  color:#72d5a9;
  display:block
}
.health-head small {
  font-size:9px;
  color:#83977b;
  display:block;
  margin-top:5px
}
.ui-tabs {
  display:flex;
  gap:6px;
  margin:20px 0 6px
}
.ui-tabs>.ui-button {
  background:transparent;
  color:#849b7e;
  border-color:transparent;
  font-size:10px
}
.ui-tabs>.ui-button.active {
  background:#243b2c;
  color:#d4edc9
}
.service-rows {
  margin-top:7px
}
.service-row {
  display:grid;
  grid-template-columns:1.25fr .8fr 1fr 50px;
  gap:18px;
  align-items:center;
  padding:18px 0;
  border-bottom:1px solid #283627;
  font-size:11px
}
.service-row>span:first-child {
  display:flex;
  gap:10px;
  align-items:center
}
.service-status {
  display:flex;
  gap:7px;
  align-items:center;
  color:#72b88e;
  font-size:9px
}
.service-status.amber {
  color:#e6ad6e
}
.service-status.amber .status-dot {
  background:#e6ad6e
}
.sparkline {
  color:#4aad85;
  width:100%;
  height:32px
}
.service-row strong {
  font-size:10px;
  color:#b1c8a7;
  text-align:right;
  font-weight:500
}
.monitor-actions {
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:24px
}
.monitor-actions .ui-button {
  background:#b3d9b3;
  color:#1c3522;
  border-color:#b3d9b3;
  font-size:11px
}
.monitor-actions .ui-button:hover {
  background:#d2e8ca
}
.monitor-actions>span {
  font-size:9px;
  color:#829979
}
.incident-detail {
  padding:18px 0 0
}
.incident-detail>.eyebrow {
  color:#869778;
  font-size:9px
}
.incident-detail>h3 {
  font-size:18px;
  color:#ebd5b3;
  margin:16px 0 12px;
  font-weight:450
}
.incident-detail>p {
  font-size:11px;
  color:#9ca992;
  max-width:550px
}
.incident-timeline {
  border-left:1px solid #4d6244;
  margin-top:24px;
  padding-left:18px;
  display:grid;
  gap:13px;
  color:#9cac91;
  font-family:var(--mono);
  font-size:10px
}
.job-list {
  display:grid;
  gap:3px
}
.job-row {
  display:grid;
  grid-template-columns:36px 1fr auto auto;
  gap:14px;
  align-items:center;
  padding:18px 0;
  border-bottom:1px solid #e5eade
}
.job-icon {
  height:34px;
  width:34px;
  background:#fff0e3;
  border:1px solid #efdbc4;
  border-radius:8px;
  display:grid;
  place-items:center;
  color:#e1702d
}
.job-icon>.icon {
  width:17px;
  height:17px
}
.job-row strong {
  font-size:11px;
  font-weight:600;
  display:block
}
.job-row small {
  font-size:9px;
  color:#8a9480;
  display:block;
  margin-top:5px
}
.switch {
  border:0;
  border-radius:20px;
  width:31px;
  height:18px;
  background:#b9c5b0;
  position:relative;
  padding:0;
  flex:none
}
.switch>i {
  display:block;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff;
  position:absolute;
  top:3px;
  left:3px;
  transition:transform .2s
}
.switch[aria-checked=true] {
  background:#55b787
}
.switch[aria-checked=true]>i {
  transform:translateX(13px)
}
.schedule-strip {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  background:#f1f4eb;
  border:1px solid #e4eadb;
  border-radius:5px;
  margin:24px 0;
  padding:20px;
  gap:20px
}
.schedule-strip>div {
  display:flex;
  flex-direction:column;
  gap:8px
}
.schedule-strip span {
  font-size:8px;
  letter-spacing:.13em;
  color:#8d987e
}
.schedule-strip strong {
  font-size:12px;
  font-weight:500;
  letter-spacing:-.02em
}
.execution-log>div:not(.ui-empty) {
  display:flex;
  align-items:center;
  gap:13px;
  padding:11px 0;
  border-bottom:1px solid #e5ecdd
}
.execution-log code {
  font:10px var(--mono)
}
.execution-log span {
  margin-left:auto;
  font-size:9px;
  color:#8b977f
}
.report-workbench {
  display:grid;
  grid-template-columns:240px 1fr;
  background:#e7ebe1;
  min-height:560px
}
.report-controls {
  padding:30px 25px;
  background:#f6f8f1;
  border-right:1px solid #dce4d1
}
.report-controls>.ui-brand {
  font-size:13px;
  gap:9px;
  margin-bottom:28px
}
.report-controls label:not(.ui-checkbox) {
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:9px;
  color:#6e7c61;
  font-weight:600;
  margin-bottom:20px
}
.report-controls select {
  width:100%;
  font-size:11px;
  padding:10px
}
.ui-checkbox {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  color:#536149;
  margin:14px 0;
  font-weight:400
}
.ui-checkbox>input,.task-row>input,.catalog-table input {
  accent-color:#3e6650;
  width:14px;
  height:14px;
  cursor:pointer;
  flex:none
}
.report-controls>.ui-button {
  width:100%;
  margin-top:24px;
  font-size:10px;
  min-height:39px
}
.report-paper {
  margin:34px auto;
  padding:32px 36px 24px;
  background:#fffffc;
  box-shadow:0 10px 30px #2d3a2011;
  width:calc(100% - 82px);
  max-width:550px;
  min-height:480px;
  position:relative;
  color:#36482e
}
.report-wordmark {
  font:600 8px var(--sans);
  letter-spacing:.1em;
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid #d6dfcb;
  padding-bottom:15px
}
.report-wordmark>span {
  font-size:6px;
  font-weight:400;
  color:#8c997f
}
.report-edition {
  display:block;
  margin-top:25px;
  font-size:7px;
  color:#889779;
  letter-spacing:.16em
}
.report-paper>h3 {
  font-family:var(--serif);
  font-size:32px;
  font-weight:400;
  color:#20381e;
  letter-spacing:-.04em;
  line-height:1.2;
  margin-top:12px
}
.report-rule {
  height:2px;
  background:#40643a;
  width:37px;
  margin-top:17px
}
.report-metric {
  display:flex;
  flex-direction:column;
  margin-top:25px
}
.report-metric>span {
  font-size:9px;
  color:#889477
}
.report-metric>strong {
  font:400 32px/1.5 var(--serif);
  letter-spacing:-.05em
}
.report-metric>small {
  font-size:7px;
  color:#98a38a
}
.paper-chart {
  height:105px;
  gap:8px;
  margin-top:24px
}
.paper-chart>span,.paper-chart>span:nth-last-child(-n+3) {
  background:linear-gradient(#9bae7e,#5d7850)
}
.paper-stock {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-top:1px solid #dde4d3;
  padding-top:17px;
  margin-top:20px;
  font-size:10px;
  color:#7b8b69
}
.paper-stock>strong {
  font-size:20px;
  font-weight:500;
  color:#416331
}
.paper-lines {
  display:grid;
  gap:6px;
  margin-top:22px;
  opacity:.6
}
.paper-lines>i {
  height:3px;
  background:#dbe2d1;
  display:block;
  width:95%;
  border-radius:2px
}
.paper-lines>i:nth-child(2) {
  width:87%
}
.paper-lines>i:nth-child(3) {
  width:64%
}
.paper-footer {
  display:flex;
  gap:12px;
  justify-content:space-between;
  margin-top:25px;
  border-top:1px solid #e0e6d5;
  padding-top:12px;
  font-size:6px;
  color:#9ba98a
}
.ui-table-wrap {
  width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain
}
.ui-table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:11px
}
.ui-table th {
  font-size:9px;
  font-weight:500;
  color:#8b9581;
  padding:12px 10px;
  border-bottom:1px solid #dfe6d5;
  white-space:nowrap
}
.ui-table td {
  padding:14px 10px;
  border-bottom:1px solid #e8eddf;
  vertical-align:middle
}
.catalog-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  border-top:1px solid #e3e9d9;
  padding:18px 0
}
.catalog-toolbar>span {
  font-size:9px;
  color:#88967b
}
.ui-search {
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid #e0e7d6;
  padding:7px 10px;
  border-radius:5px;
  background:#fff;
  max-width:320px;
  min-width:0
}
.ui-search>.icon {
  width:14px;
  height:14px;
  color:#929e85
}
.ui-search>input {
  border:0;
  background:transparent;
  min-width:0;
  width:100%;
  outline:none;
  font-size:10px;
  padding:2px 0;
  color:#43513a
}
.ui-search:focus-within {
  outline:1px solid #809c6d;
  outline-offset:1px
}
.product-name {
  display:flex;
  align-items:center;
  gap:14px;
  background:none;
  border:0;
  text-align:left;
  padding:0;
  font-size:11px
}
.product-name:hover {
  text-decoration:underline;
  text-underline-offset:3px
}
.product-name>span:last-child>small {
  display:block;
  font-size:8px;
  color:#98a288;
  margin-top:5px
}
.product-thumb {
  width:28px;
  height:37px;
  display:inline-flex;
  position:relative;
  justify-content:center;
  align-items:center;
  flex:none;
  filter:drop-shadow(0 2px 1px #1b301b10)
}
.product-thumb>i {
  display:block;
  background:linear-gradient(90deg,#b2bda6,#eff2e9 40%,#b7c5a9);
  border:1px solid #b3bca9;
  border-radius:3px 3px 7px 7px;
  width:18px;
  height:28px
}
.product-thumb>b {
  position:absolute;
  top:3px;
  background:#444f3c;
  width:18px;
  height:5px;
  border-radius:3px 3px 0 0
}
.product-thumb.p-1>i {
  width:12px;
  border-radius:2px;
  background:linear-gradient(90deg,#dad2b4,#f1eddb,#b0ab90)
}
.product-thumb.p-1>b {
  background:#d1c6a4;
  width:12px;
  top:2px
}
.product-thumb.p-2>i {
  width:12px;
  background:linear-gradient(90deg,#293029,#4a5743,#30392c)
}
.product-thumb.p-2>b {
  width:12px;
  background:#8da180;
  top:2px
}
.product-thumb.p-3>i {
  width:13px;
  background:linear-gradient(90deg,#6c725f,#aab593,#879173)
}
.product-thumb.p-3>b {
  width:13px;
  background:#7b856b;
  top:2px
}
.product-thumb.p-4>i {
  width:22px;
  height:19px;
  background:linear-gradient(90deg,#1e2923,#6d7c68,#243229);
  border-radius:4px
}
.product-thumb.p-4>b {
  width:12px;
  background:#576753;
  top:6px;
  left:5px
}
.catalog-bulk {
  display:flex;
  align-items:center;
  gap:15px;
  background:#eef3e8;
  padding:17px 18px;
  margin-top:25px;
  border:1px solid #dce6d0;
  border-radius:5px
}
.catalog-bulk>strong {
  font-size:11px;
  white-space:nowrap
}
.catalog-bulk>span {
  font-size:9px;
  color:#7c8f6a
}
.catalog-bulk>.ui-button {
  margin-left:auto
}
.build-meta {
  display:flex;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid #30432c;
  padding:0 0 21px;
  font-size:10px;
  color:#819e72
}
.build-meta>span {
  display:flex;
  gap:9px;
  align-items:center
}
.build-meta code {
  font-family:var(--mono);
  font-size:10px;
  color:#8bb281
}
.build-steps {
  padding:12px 0
}
.build-step {
  display:flex;
  align-items:center;
  gap:13px;
  padding:12px 0;
  font-size:11px;
  border-bottom:1px solid #243621
}
.build-step-icon {
  display:grid;
  place-items:center;
  background:#68c092;
  width:20px;
  height:20px;
  border-radius:50%;
  color:#163526
}
.build-step-icon>.icon {
  width:14px;
  height:14px;
  stroke-width:2
}
.build-step-icon.pending {
  color:#729167;
  background:#2a4025
}
.build-step>small {
  margin-left:auto;
  font-size:9px;
  color:#8bac7b
}
.build-step.running {
  color:#f3d9ac
}
.build-step.running .build-step-icon {
  background:#dcb77f;
  color:#443414
}
.deploy-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:19px 0
}
.ui-deployment .ui-button {
  background:#1b2c1e;
  border-color:#476040;
  color:#b9d4a8
}
.ui-deployment .ui-button.ui-accent {
  background:#a8c398;
  color:#20371a;
  border-color:#a8c398
}
.ui-deployment .ui-button:hover:not(:disabled) {
  background:#39512d;
  color:#e0efce
}
.build-log {
  padding:20px;
  background:#0b140e;
  border:1px solid #283e21;
  border-radius:5px;
  color:#819d6f;
  font:10px/1.9 var(--mono);
  white-space:pre-wrap;
  min-height:140px;
  overflow-wrap:anywhere
}
.build-log>span {
  color:#bdce9f
}
.ui-deployment .ui-bottom-note {
  color:#718e5d;
  font-size:9px;
  justify-content:flex-start
}
.workspace-greeting {
  font-size:10px;
  margin-top:-10px;
  margin-bottom:20px;
  color:#839476!important
}
.workspace-kpis {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px;
  margin-bottom:27px
}
.workspace-kpis>div {
  border:1px solid #e0e7d5;
  background:#fff;
  border-radius:5px;
  padding:15px 18px;
  display:flex;
  flex-direction:column;
  gap:5px
}
.workspace-kpis strong {
  font-size:25px;
  font-weight:550;
  letter-spacing:-.05em;
  line-height:1.3
}
.workspace-kpis small {
  font-size:9px;
  color:#7b8b6d
}
.workspace-columns {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:36px
}
.workspace-columns .ui-subhead:first-child {
  margin-top:0
}
.task-row {
  display:flex;
  gap:11px;
  align-items:center;
  border-bottom:1px solid #e3ead8;
  padding:16px 0;
  cursor:pointer
}
.task-row>span {
  flex:1;
  min-width:0
}
.task-row strong {
  font-size:11px;
  font-weight:500;
  display:block
}
.task-row small {
  display:block;
  font-size:8px;
  color:#8e9b80;
  margin-top:5px
}
.task-row time {
  font-size:9px;
  color:#92a080
}
.task-row.done strong {
  text-decoration:line-through;
  color:#8d9b7d
}
.task-row.done>input {
  opacity:.7
}
.document-link {
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 0;
  width:100%;
  font-size:10px;
  background:transparent;
  border:0;
  border-bottom:1px solid #e6ecdd;
  text-align:left
}
.document-link>.icon {
  color:#879b72;
  width:16px;
  height:16px
}
.document-link .arrow {
  margin-left:auto;
  width:14px;
  height:14px
}
.document-link:hover {
  color:#54813e
}
.meeting-card {
  background:#eef2e5;
  border-left:2px solid #92ae74;
  border-radius:3px;
  padding:17px 18px;
  display:flex;
  flex-direction:column;
  gap:10px
}
.meeting-card>span {
  font-size:9px;
  color:#8a9c76
}
.meeting-card>strong {
  font-size:13px;
  font-weight:500
}
.meeting-card>small {
  font-size:9px;
  color:#8a9a77
}
.avatar-stack {
  display:flex;
  margin-top:5px
}
.avatar-stack>.avatar {
  margin-right:-6px;
  box-shadow:0 0 0 2px #eef2e5
}
.sticky-note {
  display:flex;
  flex-direction:column;
  background:#f7f0d7;
  transform:rotate(-1deg);
  padding:18px;
  margin-top:25px;
  box-shadow:0 4px 15px #2c38120a
}
.sticky-note>span {
  font-family:var(--hand);
  font-size:21px;
  color:#776d48
}
.sticky-note>textarea {
  font-size:11px;
  line-height:1.8;
  background:transparent;
  border:0;
  min-height:90px;
  width:100%;
  resize:vertical;
  margin-top:7px;
  color:#746b49
}
.sticky-note>textarea::placeholder {
  color:#a79b75
}
.sticky-note>small {
  font-size:7px;
  color:#a2966b
}
.is-compact {
  font-size:9px
}
.is-compact .ui-main {
  padding:18px 17px
}
.is-compact .ui-topbar {
  margin-bottom:13px;
  gap:7px
}
.is-compact .ui-topbar>strong {
  font-size:13px
}
.is-compact .ui-pill {
  font-size:6px;
  padding:3px 5px
}
.is-compact .ui-sidebar {
  width:87px;
  padding:16px 9px
}
.is-compact .ui-brand {
  font-size:8px;
  margin-bottom:22px;
  gap:5px
}
.is-compact .ui-brand>.x-symbol {
  width:16px;
  height:16px;
  font-size:18px
}
.is-compact .ui-navigation>span {
  font-size:7px;
  gap:7px;
  padding:9px 4px;
  white-space:nowrap
}
.is-compact .ui-navigation .icon {
  width:11px;
  height:11px
}
.is-compact .ui-settings {
  font-size:7px;
  gap:5px;
  padding:15px 4px 0
}
.is-compact .ui-settings .icon {
  width:11px;
  height:11px
}
.is-compact .ui-summary {
  margin:0 0 16px;
  gap:5px;
  flex-wrap:wrap
}
.is-compact .ui-summary>strong {
  font-size:17px
}
.is-compact .ui-summary>strong>small {
  font-size:7px
}
.is-compact .ui-summary>span {
  font-size:7px
}
.is-compact .kanban {
  gap:8px;
  min-width:300px
}
.is-compact .kanban-column {
  padding:8px 7px;
  min-width:0
}
.is-compact .kanban-title {
  font-size:7px;
  gap:5px
}
.is-compact .kanban-title>span {
  gap:4px
}
.is-compact .kanban-title>small {
  font-size:6px;
  padding:1px 3px
}
.is-compact .column-total {
  font-size:8px;
  margin-bottom:10px
}
.is-compact .deal-card {
  padding:9px 7px;
  margin-top:8px
}
.is-compact .deal-source {
  font-size:6px;
  margin-bottom:7px
}
.is-compact .deal-card>strong {
  font-size:8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.is-compact .deal-amount {
  font-size:7px;
  margin-top:4px
}
.is-compact .deal-bottom {
  margin-top:12px
}
.is-compact .avatar {
  height:17px;
  width:17px;
  font-size:5px
}
.is-compact .deal-bottom>small {
  font-size:6px
}
.is-compact .analytics-total {
  gap:7px;
  margin:7px 0 4px;
  flex-wrap:wrap
}
.is-compact .analytics-total>strong {
  font-size:25px
}
.is-compact .analytics-total .ui-pill {
  font-size:5px
}
.is-compact .bar-chart {
  height:110px;
  gap:5px
}
.is-compact .chart-axis {
  font-size:6px;
  padding-top:5px
}
.is-compact .analytics-kpis {
  gap:6px;
  margin-top:15px
}
.is-compact .analytics-kpis>div {
  padding:9px 8px;
  gap:6px
}
.is-compact .analytics-kpis small {
  font-size:6px;
  white-space:nowrap
}
.is-compact .analytics-kpis strong {
  font-size:15px;
  letter-spacing:-.045em
}
.is-compact .integration-map {
  height:274px
}
.is-compact .integration-node {
  width:46px;
  height:49px;
  border-radius:8px
}
.is-compact .integration-node .icon {
  width:24px;
  height:24px
}
.is-compact .integration-node small {
  font-size:6px
}
.is-compact .hub-core {
  width:64px;
  height:66px
}
.is-compact .hub-core .x-symbol {
  font-size:41px
}
.is-compact .hub-core small {
  font-size:5px
}
.is-compact .chat-shell {
  min-height:340px
}
.is-compact .chat-header {
  padding:13px 11px;
  gap:8px
}
.is-compact .chat-header strong {
  font-size:9px
}
.is-compact .chat-header small {
  font-size:6px
}
.is-compact .telegram-icon {
  width:29px;
  height:29px
}
.is-compact .telegram-icon>.icon {
  width:18px;
  height:18px
}
.is-compact .chat-messages {
  padding:13px 11px;
  gap:8px;
  overflow:hidden
}
.is-compact .chat-bubble {
  padding:8px 10px;
  font-size:8px;
  max-width:94%
}
.is-compact .chat-bubble>small {
  font-size:5px;
  margin-top:2px
}
.is-compact .chat-options {
  gap:4px;
  max-width:100%
}
.is-compact .chat-options .ui-button {
  min-height:25px;
  font-size:7px;
  padding:5px 6px;
  border-radius:4px
}
.is-compact .chat-input {
  padding:10px;
  font-size:7px
}
.is-compact .health-head {
  gap:9px;
  padding:4px 0 17px
}
.is-compact .health-icon {
  width:29px;
  height:29px
}
.is-compact .health-icon>.icon {
  width:17px;
  height:17px
}
.is-compact .health-head strong {
  font-size:9px
}
.is-compact .health-head small {
  font-size:6px;
  margin-top:4px
}
.is-compact .service-row {
  grid-template-columns:1fr .8fr .85fr 32px;
  gap:9px;
  font-size:8px;
  padding:12px 0;
  white-space:nowrap
}
.is-compact .service-row .icon {
  width:11px;
  height:11px
}
.is-compact .service-row>span:first-child {
  gap:6px
}
.is-compact .service-status {
  font-size:6px;
  gap:5px
}
.is-compact .status-dot {
  width:4px;
  height:4px
}
.is-compact .sparkline {
  height:22px
}
.is-compact .service-row strong {
  font-size:7px
}
.is-compact .job-row {
  grid-template-columns:26px 1fr auto;
  gap:8px;
  padding:17px 0
}
.is-compact .job-icon {
  width:25px;
  height:27px;
  border-radius:6px
}
.is-compact .job-icon>.icon {
  width:14px;
  height:14px
}
.is-compact .job-row strong {
  font-size:9px;
  white-space:nowrap
}
.is-compact .job-row small {
  font-size:7px;
  margin-top:4px;
  white-space:nowrap
}
.is-compact .switch {
  transform:scale(.74);
  transform-origin:right center
}
.is-compact .report-workbench {
  display:block;
  min-height:350px;
  background:transparent
}
.is-compact.ui-reports {
  background:transparent;
  border:0;
  box-shadow:none;
  overflow:visible
}
.is-compact .report-paper {
  margin:0;
  width:100%;
  padding:22px;
  min-height:370px;
  max-width:400px;
  box-shadow:0 12px 33px #27342112
}
.is-compact .report-wordmark {
  font-size:6px;
  gap:10px
}
.is-compact .report-wordmark span {
  font-size:5px
}
.is-compact .report-edition {
  font-size:6px;
  margin-top:20px
}
.is-compact .report-paper>h3 {
  font-size:25px
}
.is-compact .report-metric {
  margin-top:18px
}
.is-compact .report-metric>span {
  font-size:8px
}
.is-compact .report-metric>strong {
  font-size:26px
}
.is-compact .report-metric>small {
  font-size:6px
}
.is-compact .paper-chart {
  height:74px;
  margin-top:15px;
  gap:5px
}
.is-compact .paper-stock {
  font-size:8px
}
.is-compact .paper-stock>strong {
  font-size:17px
}
.is-compact .ui-table {
  font-size:8px
}
.is-compact .ui-table th {
  font-size:6px;
  padding:8px 5px
}
.is-compact .ui-table td {
  padding:11px 5px
}
.is-compact .product-name {
  gap:6px;
  font-size:8px;
  white-space:nowrap
}
.is-compact .product-thumb {
  width:21px;
  height:31px;
  transform:scale(.75)
}
.is-compact .catalog-table input {
  width:9px;
  height:9px;
  margin:0
}
.is-compact .ui-table .ui-pill {
  font-size:5px;
  white-space:nowrap
}
.is-compact .build-meta {
  font-size:8px;
  padding-bottom:15px
}
.is-compact .build-meta code {
  font-size:8px
}
.is-compact .build-meta .icon {
  width:12px;
  height:12px
}
.is-compact .build-step {
  font-size:9px;
  padding:11px 0;
  gap:9px
}
.is-compact .build-step-icon {
  width:15px;
  height:15px
}
.is-compact .build-step-icon>.icon {
  width:10px;
  height:10px
}
.is-compact .build-step>small {
  font-size:7px
}
.is-compact .ui-bottom-note {
  font-size:7px;
  margin-top:12px;
  gap:7px
}
.is-compact .workspace-greeting {
  font-size:7px;
  margin-top:-7px;
  margin-bottom:17px
}
.is-compact .workspace-kpis {
  gap:7px;
  margin-bottom:22px
}
.is-compact .workspace-kpis>div {
  padding:12px 10px;
  gap:4px
}
.is-compact .workspace-kpis strong {
  font-size:20px
}
.is-compact .workspace-kpis small {
  font-size:6px;
  white-space:nowrap
}
.is-compact .workspace-columns {
  display:block
}
.is-compact .ui-subhead {
  font-size:9px;
  margin:18px 0 9px
}
.is-compact .task-row {
  padding:12px 0;
  gap:7px
}
.is-compact .task-row>input {
  height:10px;
  width:10px;
  margin:0
}
.is-compact .task-row strong {
  font-size:8px
}
.is-compact .task-row small {
  font-size:6px
}
.is-compact .task-row time {
  font-size:7px
}
/* Case studies: different hero compositions and story-specific visual explanations. */
.case-top {
  position:relative;
  padding-bottom:38px;
  border-bottom:1px solid var(--line)
}
.breadcrumbs {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:11px;
  font-size:10px;
  padding-top:22px;
  color:var(--muted)
}
.breadcrumbs>a:hover {
  color:var(--orange-ink)
}
.breadcrumbs>span:last-child {
  color:var(--ink)
}
.case-hero {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:70px;
  align-items:center;
  padding:58px 0 48px;
  min-height:570px
}
.case-hero-copy>.eyebrow {
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:24px;
  font-size:9px;
  letter-spacing:.14em
}
.case-hero h1 {
  font-size:clamp(49px,4.6vw,70px);
  line-height:1.1;
  letter-spacing:-.065em
}
.case-hero-copy>p {
  font-size:14px;
  line-height:1.75;
  max-width:490px;
  margin-top:26px;
  color:#545b50
}
.case-hero .hero-actions {
  gap:24px;
  margin-top:29px
}
.case-hero .hero-actions .button {
  font-size:11px;
  padding-inline:23px
}
.case-hero .hero-actions .text-link {
  font-size:11px
}
.case-hero-art {
  position:relative;
  min-height:425px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  isolation:isolate
}
.case-hero-art>.route-line {
  inset:-40px -40px 0;
  width:calc(100% + 80px);
  height:calc(100% + 40px);
  z-index:0
}
.case-hero-preview {
  width:100%;
  position:relative;
  z-index:1;
  transform:rotate(1deg);
  box-shadow:0 15px 35px #1d2b1c0b
}
.case-hero-preview>.preview-interface {
  border-radius:7px;
  overflow:hidden
}
.case-hero-preview .product-ui {
  box-shadow:none
}
.case-hero-preview .is-compact .ui-main {
  padding:23px
}
.case-hero-preview .is-compact .ui-topbar>strong {
  font-size:17px
}
.case-hero-preview .is-compact .ui-sidebar {
  width:110px;
  padding:22px 12px
}
.case-hero-preview .is-compact .ui-brand {
  font-size:11px;
  gap:7px
}
.case-hero-preview .is-compact .ui-navigation>span {
  font-size:9px;
  padding:13px 4px
}
.case-hero-preview .is-compact .ui-navigation .icon {
  width:13px;
  height:13px
}
.case-hero-preview .is-compact .ui-summary>strong {
  font-size:25px
}
.case-hero-preview .is-compact .kanban {
  min-width:0;
  gap:10px
}
.case-hero-preview .is-compact .kanban-title {
  font-size:8px
}
.case-hero-preview .is-compact .column-total {
  font-size:10px
}
.case-hero-preview .is-compact .deal-card {
  padding:13px 10px
}
.case-hero-preview .is-compact .deal-card>strong {
  font-size:9px
}
.case-hero-preview .is-compact .deal-amount {
  font-size:8px
}
.case-hero-preview .is-compact .deal-bottom {
  margin-top:18px
}
.preview-caption {
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:11px 7px 0;
  font-size:7px;
  letter-spacing:.14em;
  color:var(--muted)
}
.case-hero-note {
  position:absolute;
  right:18px;
  bottom:-20px;
  font-size:25px;
  z-index:3
}
.case-hero-note svg {
  display:none
}
.case-hero-note:after {
  display:block;
  content:'';
  height:1px;
  background:var(--orange);
  width:100px;
  margin-top:7px;
  transform:rotate(-4deg)
}
.case-metadata {
  display:grid;
  grid-template-columns:1.15fr 1fr .7fr 1fr;
  gap:25px;
  border-top:1px solid var(--line);
  padding-top:30px
}
.case-metadata>div {
  border-right:1px solid var(--line);
  padding-right:25px;
  min-width:0
}
.case-metadata>div:last-child {
  border:0;
  padding-right:0
}
.case-metadata .eyebrow {
  font-size:8px
}
.case-metadata p {
  font-size:11px;
  line-height:1.7;
  color:var(--ink);
  margin-top:9px
}
.dark-surface {
  background:#141917;
  color:#f5f4ec;
  border-color:#30382d
}
.dark-surface .breadcrumbs {
  color:#8b9584
}
.dark-surface .breadcrumbs>span:last-child {
  color:#e0e7d9
}
.dark-surface .eyebrow {
  color:#919e87
}
.dark-surface .case-hero-copy>p {
  color:#b3bdae
}
.dark-surface .case-hero-preview {
  box-shadow:0 20px 60px #00000020
}
.dark-surface .preview-caption {
  color:#8c9a80
}
.dark-surface .case-metadata {
  border-color:#37412f
}
.dark-surface .case-metadata>div {
  border-color:#37412f
}
.dark-surface .case-metadata p {
  color:#d1dac8
}
.dark-surface .case-hero-note {
  color:#ff986b
}
.case-hero--analytics {
  grid-template-columns:1fr;
  gap:25px;
  text-align:center;
  padding-top:50px;
  padding-bottom:38px
}
.case-hero--analytics .case-hero-copy>.eyebrow {
  justify-content:center
}
.case-hero--analytics h1 {
  font-size:75px
}
.case-hero--analytics .case-hero-copy>p {
  max-width:560px;
  margin-inline:auto;
  font-size:13px
}
.case-hero--analytics .hero-actions {
  justify-content:center;
  margin-top:24px
}
.case-hero--analytics .case-hero-art {
  width:78%;
  margin:0 auto;
  min-height:340px;
  padding-top:22px
}
.case-hero--analytics .case-hero-preview {
  transform:none
}
.case-hero--analytics .is-compact .ui-main {
  padding:23px 34px
}
.case-hero--analytics .is-compact .bar-chart {
  height:170px
}
.case-hero--analytics .is-compact .analytics-total {
  justify-content:flex-start
}
.case-hero--analytics .is-compact .analytics-total>strong {
  font-size:33px
}
.case-hero--analytics .is-compact .analytics-kpis {
  grid-template-columns:repeat(3,1fr);
  margin-top:10px;
  gap:12px
}
.case-hero--analytics .is-compact .analytics-kpis>div {
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px
}
.case-hero--analytics .is-compact .analytics-kpis small {
  font-size:9px
}
.case-hero--analytics .is-compact .analytics-kpis strong {
  font-size:22px
}
.case-hero--analytics .case-hero-note {
  right:-105px;
  bottom:25px;
  text-align:left;
  font-size:21px
}
.case-hero--integrations {
  grid-template-columns:1.12fr 1fr;
  gap:30px
}
.case-hero--integrations .case-hero-preview {
  box-shadow:none;
  transform:none;
  max-width:470px
}
.case-hero--integrations .case-hero-preview>.preview-interface {
  overflow:visible
}
.case-hero--integrations .is-compact .integration-map {
  height:390px;
  max-width:500px
}
.case-hero--integrations .is-compact .integration-node {
  width:65px;
  height:65px;
  border-radius:12px
}
.case-hero--integrations .is-compact .integration-node>.icon {
  width:30px;
  height:30px
}
.case-hero--integrations .is-compact .integration-node>small {
  font-size:8px
}
.case-hero--integrations .is-compact .hub-core {
  width:92px;
  height:95px;
  border-radius:15px
}
.case-hero--integrations .is-compact .hub-core>.x-symbol {
  font-size:59px
}
.case-hero--integrations .is-compact .hub-core>small {
  font-size:7px
}
.case-hero--integrations .case-hero-note {
  right:0;
  bottom:0
}
.case-hero--bot {
  grid-template-columns:1.3fr 1fr;
  gap:95px;
  padding-right:80px
}
.case-hero--bot .case-hero-art {
  min-height:505px
}
.case-hero--bot .case-hero-preview {
  max-width:340px;
  transform:rotate(3deg);
  box-shadow:0 18px 42px #12261916;
  border-radius:10px
}
.case-hero--bot .is-compact .chat-shell {
  min-height:420px
}
.case-hero--bot .is-compact .chat-header {
  padding:18px 16px
}
.case-hero--bot .is-compact .chat-header strong {
  font-size:12px
}
.case-hero--bot .is-compact .chat-header small {
  font-size:8px
}
.case-hero--bot .is-compact .chat-messages {
  padding:20px 15px;
  gap:12px
}
.case-hero--bot .is-compact .chat-bubble {
  font-size:10px;
  padding:10px 13px
}
.case-hero--bot .is-compact .chat-options .ui-button {
  font-size:9px;
  min-height:30px
}
.case-hero--bot .case-hero-note {
  right:-75px;
  bottom:22px;
  font-size:23px
}
.case-bot .case-live-section>.live-demo {
  max-width:650px;
  margin:auto;
  background:#eaeae3
}
.case-bot .live-demo>[data-demo] {
  padding:35px 0
}
.case-bot .live-demo .ui-bot {
  margin:auto;
  border:1px solid #43523c;
  border-radius:9px;
  min-height:570px;
  box-shadow:0 15px 45px #27321b25
}
.case-bot .live-demo .chat-shell {
  min-height:570px
}
.case-hero--monitoring .case-hero-preview {
  transform:rotate(-1.5deg);
  border:1px solid #414d37;
  border-radius:7px;
  padding:6px;
  background:#192216
}
.case-hero--monitoring .is-compact .health-head {
  padding:18px 0 27px
}
.case-hero--monitoring .is-compact .health-head strong {
  font-size:12px
}
.case-hero--monitoring .is-compact .service-row {
  font-size:10px;
  padding:17px 0
}
.case-hero--monitoring .is-compact .service-status {
  font-size:8px
}
.case-hero--monitoring .is-compact .service-row strong {
  font-size:9px
}
.case-hero--automation {
  grid-template-columns:1.1fr 1fr;
  gap:52px
}
.case-hero--automation .case-hero-preview {
  max-width:480px;
  transform:rotate(-1.5deg)
}
.case-hero--automation .is-compact .job-row {
  padding:25px 0;
  gap:13px
}
.case-hero--automation .is-compact .job-row strong {
  font-size:12px
}
.case-hero--automation .is-compact .job-row small {
  font-size:9px
}
.case-hero--automation .is-compact .job-icon {
  height:33px;
  width:32px
}
.case-hero--automation .case-hero-note {
  bottom:6px
}
.case-hero--reports {
  grid-template-columns:1.3fr 1fr;
  gap:90px
}
.case-hero--reports .case-hero-art {
  min-height:540px
}
.case-hero--reports .case-hero-preview {
  max-width:345px;
  transform:rotate(5deg);
  box-shadow:none
}
.case-hero--reports .case-hero-preview:before,.case-hero--reports .case-hero-preview:after {
  content:'';
  position:absolute;
  inset:6px -7px -6px 9px;
  background:#ebeee4;
  z-index:-1;
  transform:rotate(-5deg);
  box-shadow:0 7px 25px #2837180c;
  border:1px solid #d8dfd0
}
.case-hero--reports .case-hero-preview:after {
  inset:3px -3px -3px 6px;
  transform:rotate(-2deg);
  background:#fafbf5
}
.case-hero--reports .case-hero-preview>.preview-interface {
  overflow:visible
}
.case-hero--reports .is-compact .report-paper {
  min-height:450px;
  padding:30px
}
.case-hero--reports .is-compact .report-paper>h3 {
  font-size:31px
}
.case-hero--reports .is-compact .report-metric>strong {
  font-size:34px
}
.case-hero--reports .is-compact .paper-chart {
  height:85px
}
.case-hero--reports .case-hero-note {
  bottom:1px;
  right:-4px;
  font-size:23px
}
.case-hero--catalog {
  grid-template-columns:1fr 1.1fr;
  gap:48px
}
.case-hero--catalog h1 {
  font-size:62px
}
.case-hero--catalog .case-hero-preview {
  transform:rotate(1.2deg)
}
.case-hero--catalog .is-compact .ui-table {
  font-size:10px
}
.case-hero--catalog .is-compact .ui-table th {
  font-size:8px
}
.case-hero--catalog .is-compact .ui-table td {
  padding:14px 8px
}
.case-hero--catalog .is-compact .product-name {
  font-size:10px;
  gap:12px
}
.case-hero--catalog .is-compact .product-thumb {
  transform:scale(.9)
}
.case-hero--catalog .is-compact .ui-table .ui-pill {
  font-size:7px
}
.case-hero--catalog .case-hero-note {
  bottom:1px
}
.case-hero--deployment .case-hero-preview {
  border-radius:8px;
  background:#192216;
  padding:6px;
  border:1px solid #3d4d33;
  transform:rotate(1.2deg)
}
.case-hero--deployment .is-compact .build-step {
  font-size:12px;
  padding:18px 0;
  gap:12px
}
.case-hero--deployment .is-compact .build-step-icon {
  width:20px;
  height:20px
}
.case-hero--deployment .is-compact .build-step small {
  font-size:9px
}
.case-hero--deployment .is-compact .build-meta {
  font-size:10px
}
.case-hero--deployment .is-compact .build-meta code {
  font-size:10px
}
.case-hero--workspace {
  grid-template-columns:1.12fr 1fr;
  gap:50px
}
.case-hero--workspace .case-hero-art {
  min-height:490px
}
.case-hero--workspace .case-hero-preview {
  transform:rotate(-2deg);
  margin-top:45px
}
.workspace-time {
  position:absolute;
  right:0;
  top:-19px;
  font-family:var(--serif);
  font-size:140px;
  letter-spacing:-.05em;
  color:#dadbd1;
  line-height:1;
  z-index:-1
}
.case-hero--workspace .is-compact .workspace-kpis strong {
  font-size:28px
}
.case-hero--workspace .is-compact .workspace-kpis small {
  font-size:8px
}
.case-hero--workspace .is-compact .task-row {
  padding:15px 0
}
.case-hero--workspace .is-compact .task-row strong {
  font-size:10px
}
.case-hero--workspace .is-compact .task-row small,.case-hero--workspace .is-compact .task-row time {
  font-size:8px
}
.case-hero--workspace .case-hero-note {
  bottom:-7px;
  right:10px
}
.case-context {
  display:grid;
  grid-template-columns:1fr 1.18fr;
  gap:90px;
  padding:82px 0;
  border-bottom:1px solid var(--line)
}
.case-context h2 {
  font-size:40px;
  margin-top:21px;
  max-width:490px
}
.before-after {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px
}
.before-label,.after-label {
  font-size:9px;
  letter-spacing:.15em;
  font-weight:650;
  display:flex;
  align-items:center;
  gap:8px;
  text-transform:uppercase
}
.before-label:before,.after-label:before {
  content:'';
  height:6px;
  width:6px;
  border-radius:50%;
  background:#a0a391
}
.after-label:before {
  background:var(--orange)
}
.before-after p {
  font-size:12px;
  line-height:1.85;
  margin-top:16px
}
.case-feature {
  padding:85px 0;
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:95px;
  align-items:center;
  border-bottom:1px solid var(--line)
}
.case-feature h2 {
  margin-top:20px;
  font-size:39px;
  line-height:1.22
}
.case-feature p {
  font-size:12px;
  line-height:1.85;
  max-width:475px;
  margin-top:24px
}
.customer-journey {
  background:#eceee7;
  border:1px solid #dee3d6;
  border-radius:7px;
  padding:28px 25px;
  position:relative
}
.journey-inputs {
  display:flex;
  gap:15px;
  justify-content:center
}
.journey-inputs>span {
  background:#fbfcf8;
  border:1px solid #d9e0d1;
  border-radius:5px;
  padding:10px 22px;
  font-size:10px;
  box-shadow:0 5px 15px #293f2010
}
.journey-inputs>span:nth-child(2) {
  transform:rotate(4deg)
}
.journey-inputs>span:nth-child(1) {
  transform:rotate(-4deg)
}
.journey-track {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:35px 0 30px;
  position:relative
}
.journey-track:before {
  content:'';
  height:1px;
  background:var(--orange);
  position:absolute;
  top:12px;
  left:0;
  right:0
}
.journey-track>div {
  position:relative
}
.journey-track>div>span {
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  background:#f9fbf3;
  border:1px solid var(--orange);
  border-radius:50%;
  font-size:8px;
  margin-bottom:13px;
  box-shadow:0 0 0 4px #eceee7
}
.journey-track h3 {
  font-family:var(--sans);
  font-size:10px;
  font-weight:550;
  line-height:1.5;
  letter-spacing:-.02em
}
.journey-record {
  border:1px solid #d8e1ce;
  border-radius:5px;
  padding:15px;
  display:flex;
  align-items:center;
  gap:13px;
  background:#f8fbf1
}
.journey-record>div {
  display:flex;
  flex-direction:column;
  gap:5px
}
.journey-record strong {
  font-size:10px;
  letter-spacing:.07em
}
.journey-record small {
  font-size:8px;
  color:#829574
}
.journey-record>.icon:last-child {
  margin-left:auto;
  color:#639a50;
  width:18px
}
.feature-analytics {
  display:block
}
.data-equation {
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:space-between;
  padding:20px 0 50px
}
.data-equation>div {
  flex:1;
  min-width:0;
  border:1px solid var(--line);
  border-radius:5px;
  padding:28px 20px;
  display:flex;
  flex-direction:column;
  gap:9px;
  background:#fafaf5
}
.data-equation>div>span {
  font:400 33px/1.2 var(--serif);
  letter-spacing:-.055em
}
.data-equation>div>small {
  font-size:9px;
  color:var(--muted)
}
.data-equation>b {
  font-weight:400;
  font-size:25px;
  color:var(--orange)
}
.data-equation>div.equation-result {
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink)
}
.equation-result small {
  color:#aeba9e!important
}
.feature-foot {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:end;
  padding-top:20px
}
.feature-foot p {
  margin-top:0;
  max-width:520px
}
.contract-code {
  background:#161f18;
  border:1px solid #35492e;
  border-radius:7px;
  color:#dce8d0;
  box-shadow:0 15px 25px #27341b0b;
  overflow:hidden
}
.contract-code>div {
  font:9px var(--mono);
  color:#98b382;
  border-bottom:1px solid #304525;
  padding:16px 25px;
  display:flex;
  align-items:center;
  gap:9px
}
.contract-code pre {
  font:12px/1.8 var(--mono);
  padding:22px 28px;
  margin:0;
  color:#c6d6b7
}
.contract-code pre>span {
  color:#9eba7f
}
.contract-code pre>em {
  font-style:normal;
  color:#efb280
}
.contract-code pre>small {
  color:#6f9761;
  font-size:10px
}
.feature-bot {
  display:block
}
.feature-bot>div:first-child {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 90px;
  align-items:end
}
.feature-bot>div:first-child>.eyebrow {
  grid-column:1/-1
}
.feature-bot p {
  margin-top:0;
  max-width:500px
}
.conversation-steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:44px
}
.conversation-steps>div {
  border:1px solid var(--line);
  padding:25px;
  border-radius:6px;
  background:#f9f9f4;
  position:relative
}
.conversation-steps>div:after {
  content:'→';
  position:absolute;
  right:-17px;
  top:48%;
  font-size:19px;
  color:var(--orange);
  z-index:2
}
.conversation-steps>div:last-child:after {
  content:none
}
.conversation-steps>div>span {
  font-size:9px;
  color:var(--orange-ink);
  text-decoration:underline;
  text-underline-offset:4px
}
.conversation-steps h3 {
  font-size:24px;
  margin-top:19px
}
.conversation-steps p {
  display:inline-block;
  font-size:10px;
  line-height:1.5;
  padding:7px 12px;
  background:#e8eee0;
  border-radius:7px 7px 2px 7px;
  margin-top:25px;
  color:#506942
}
.feature-monitoring {
  background:var(--ink);
  color:var(--paper);
  padding:60px 45px;
  border-radius:7px;
  margin-top:65px;
  border-bottom:0
}
.feature-monitoring>.div>.eyebrow {
  color:#adb6a3
}
.feature-monitoring p {
  color:#aebaa4
}
.feature-monitoring h2 {
  font-size:38px
}
.incident-story {
  border:1px solid #3d4c32;
  border-radius:6px;
  background:#1b2419;
  padding:24px
}
.incident-story>.eyebrow {
  font-size:8px;
  color:#8c9f76;
  margin-bottom:21px
}
.incident-story>div:not(.eyebrow) {
  display:flex;
  align-items:center;
  gap:18px;
  padding:18px 0;
  border-bottom:1px solid #35452a;
  position:relative
}
.incident-story>div:last-child {
  border:0
}
.incident-story>div>span {
  font-family:var(--mono);
  font-size:9px;
  color:#94b175
}
.incident-story>div>div {
  display:flex;
  flex-direction:column;
  gap:7px
}
.incident-story strong {
  font-size:11px;
  font-weight:500
}
.incident-story small {
  font-size:9px;
  color:#899f73
}
.incident-story .icon {
  margin-left:auto;
  width:17px;
  height:17px;
  color:#88b874
}
.schedule-art {
  padding:35px 0 20px;
  position:relative
}
.clock-numeral {
  font:400 127px/1.2 var(--serif);
  letter-spacing:-.07em;
  color:#243321
}
.clock-numeral>span {
  color:var(--orange)
}
.schedule-art>.eyebrow {
  font-size:8px;
  margin:16px 0 38px
}
.hour-rail {
  display:flex;
  gap:4px;
  align-items:flex-end;
  height:58px;
  margin-bottom:35px
}
.hour-rail>i {
  flex:1;
  height:23px;
  border-left:1px solid #b9c4ad;
  position:relative
}
.hour-rail>i.on {
  height:48px;
  border-color:var(--orange)
}
.hour-rail small {
  position:absolute;
  left:-3px;
  bottom:-19px;
  font-style:normal;
  font-family:var(--mono);
  font-size:8px;
  color:#829774
}
.scheduled-label {
  display:flex;
  align-items:center;
  gap:11px;
  background:#edf1e5;
  border:1px solid #dde6cf;
  border-radius:5px;
  padding:14px 18px;
  font-family:var(--mono);
  font-size:11px
}
.scheduled-label>.icon {
  color:#6b9955;
  width:16px;
  height:16px
}
.scheduled-label>span {
  margin-left:auto;
  color:#81936c;
  font-family:var(--sans);
  font-size:9px
}
.report-blocks {
  display:flex;
  gap:15px;
  align-items:center
}
.report-block {
  background:#fffef8;
  border:1px solid #dfe2d4;
  box-shadow:0 8px 18px #2e411509;
  padding:22px 16px;
  min-height:220px;
  flex:1;
  min-width:0;
  transform:rotate(-4deg)
}
.report-block:nth-child(2) {
  transform:rotate(3deg) translateY(-20px)
}
.report-block:nth-child(3) {
  transform:rotate(-2deg)
}
.report-block>span {
  font-size:7px;
  letter-spacing:.1em;
  color:#8b9877
}
.report-block>.icon {
  width:45px;
  height:45px;
  color:#577e48;
  margin:29px 0 18px
}
.report-block>small {
  font-size:5px;
  letter-spacing:.07em;
  color:#869875;
  display:block;
  margin-top:23px
}
.import-compare {
  background:#fafbf5;
  border:1px solid #d6dfcc;
  border-radius:6px;
  padding:27px;
  box-shadow:0 10px 30px #203b1309
}
.import-compare>.eyebrow {
  font-size:8px;
  margin-bottom:21px
}
.import-table>div {
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:20px;
  padding:15px 0;
  border-bottom:1px solid #e1e7d6;
  align-items:center;
  font-size:12px
}
.import-table>div:first-child {
  font-size:8px;
  color:#8e9b7b;
  letter-spacing:.12em
}
.import-table strong {
  font-family:var(--mono);
  font-weight:400;
  font-size:11px
}
.import-table del {
  color:#98a28a
}
.import-table b {
  font-weight:600;
  color:#5b8c42
}
.import-safety {
  display:flex;
  gap:9px;
  align-items:center;
  font-size:9px;
  color:#82966c;
  margin-top:25px
}
.import-safety .icon {
  width:16px;
  height:16px
}
.version-path {
  background:#202b1c;
  border:1px solid #3b502e;
  border-radius:7px;
  padding:30px;
  color:#dce7d0;
  position:relative
}
.version-path>div:not(.version-arrow) {
  display:flex;
  align-items:center;
  gap:15px;
  background:#152012;
  border:1px solid #3c552d;
  border-radius:6px;
  padding:21px 20px
}
.version-path>div>.icon {
  width:19px;
  color:#8eb671
}
.version-path>div>span {
  font-size:9px;
  color:#97ac82
}
.version-path strong {
  margin-left:auto;
  font-family:var(--mono);
  font-weight:400;
  font-size:15px
}
.version-arrow {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  font-size:9px;
  font-family:var(--mono);
  color:#a9be92;
  padding:23px 0
}
.version-arrow>.arrow {
  color:var(--orange)
}
.day-story {
  border-left:1px solid var(--orange);
  padding:5px 0 5px 28px
}
.day-story>div {
  display:grid;
  grid-template-columns:90px 1fr;
  gap:30px;
  padding:23px 0;
  position:relative
}
.day-story>div:before {
  content:'';
  width:7px;
  height:7px;
  background:var(--orange);
  border-radius:50%;
  position:absolute;
  left:-32px;
  top:31px;
  box-shadow:0 0 0 5px var(--paper)
}
.day-story time {
  font:400 28px var(--serif);
  letter-spacing:-.04em;
  color:#566348
}
.day-story strong {
  font-size:12px;
  font-weight:600
}
.day-story p {
  font-size:10px;
  margin-top:7px
}
.case-live-section {
  padding:85px 0 75px;
  border-bottom:1px solid var(--line)
}
.case-live-section .section-heading {
  grid-template-columns:1.15fr 1fr;
  gap:70px;
  align-items:end
}
.case-live-section .section-heading h2 {
  font-size:42px
}
.case-live-section .section-heading>p {
  max-width:480px
}
.case-outcomes {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:90px;
  padding:75px 0 35px;
  align-items:center
}
.outcomes-title h2 {
  font-size:46px;
  margin-top:19px
}
.outcomes-list>div {
  display:flex;
  align-items:center;
  gap:22px;
  padding:25px 0;
  border-top:1px solid var(--line)
}
.outcomes-list>div>span {
  font-size:10px;
  color:var(--orange-ink)
}
.outcomes-list h3 {
  font-family:var(--sans);
  font-weight:500;
  font-size:15px;
  line-height:1.6;
  letter-spacing:-.015em;
  max-width:490px
}
.outcomes-list .icon {
  color:#7d9768;
  width:20px;
  height:20px;
  margin-left:auto
}
.case-provenance {
  padding-bottom:25px;
  margin:0;
  border-bottom:1px solid var(--line);
  max-width:100%;
  font-size:10px;
  display:block
}
.next-case {
  display:flex;
  align-items:center;
  gap:35px;
  border-top:1px solid var(--line);
  padding:36px 0 43px
}
.next-number {
  font:400 68px/1 var(--serif);
  color:#c9cfc0;
  letter-spacing:-.06em;
  min-width:80px
}
.next-case h2 {
  font-size:29px;
  margin-top:12px;
  line-height:1.3
}
.next-case .eyebrow {
  font-size:8px
}
.next-icon {
  margin-left:auto;
  width:50px;
  height:50px;
  background:var(--orange);
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:none;
  transition:transform .3s
}
.next-icon .arrow {
  width:22px;
  height:22px
}
.next-case:hover .next-icon {
  transform:rotate(-35deg)
}
/* Terms and privacy: original document text, designed rather than abbreviated. */
.legal-hero {
  display:grid;
  grid-template-columns:minmax(0,1.4fr) 130px minmax(235px,.65fr);
  gap:26px;
  align-items:center;
  padding:63px 0 50px
}
.legal-hero h1 {
  font-size:clamp(55px,6.4vw,94px);
  line-height:1.12;
  margin-top:22px
}
.legal-hero>div>p {
  font-size:17px;
  line-height:1.6;
  margin-top:23px;
  max-width:620px;
  color:#555d50
}
.legal-date {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:25px
}
.legal-note {
  font-size:23px;
  align-self:start;
  margin-top:28px
}
.legal-summary {
  border:1px solid var(--line);
  border-radius:6px;
  padding:24px;
  background:#faf9f5;
  margin-top:20px
}
.legal-summary>.icon {
  width:29px;
  height:29px;
  color:var(--orange-ink);
  background:#ffe6d8;
  box-sizing:content-box;
  border-radius:10px;
  padding:9px;
  margin-bottom:20px
}
.legal-summary h3 {
  font-size:23px;
  line-height:1.25
}
.legal-summary p {
  font-size:11px;
  line-height:1.9;
  margin:12px 0 19px
}
.legal-summary .text-link {
  font-size:10px;
  gap:8px;
  overflow-wrap:anywhere
}
.legal-summary .arrow {
  width:14px
}
.legal-principles {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);
  border-radius:6px;
  padding:28px;
  margin:5px 0 48px;
  background:#faf9f526
}
.legal-principles>div {
  display:flex;
  align-items:center;
  gap:15px;
  padding:0 24px;
  border-right:1px solid var(--line);
  font-family:var(--serif);
  font-size:19px;
  letter-spacing:-.04em;
  line-height:1.35
}
.legal-principles>div:first-child {
  padding-left:0
}
.legal-principles>div:last-child {
  padding-right:0;
  border:0
}
.legal-principles .icon {
  width:25px;
  height:25px
}
.legal-layout {
  display:grid;
  grid-template-columns:265px minmax(0,1fr);
  gap:70px;
  padding-bottom:65px
}
.legal-toc {
  position:sticky;
  top:120px;
  align-self:start;
  max-height:calc(100vh - 138px);
  overflow-y:auto;
  scrollbar-width:thin;
  padding:4px 16px 12px 0
}
.legal-toc>.eyebrow {
  font-size:9px;
  margin:15px 0 20px
}
.legal-toc nav {
  display:flex;
  flex-direction:column;
  gap:4px
}
.legal-toc nav a {
  display:flex;
  gap:13px;
  padding:9px 0;
  font-size:10px;
  line-height:1.6
}
.legal-toc nav a>span {
  font-family:var(--mono);
  font-size:9px;
  color:#9ba28d;
  line-height:1.75
}
.legal-toc nav a:hover,.legal-toc nav a[aria-current] {
  color:var(--orange-ink)
}
.legal-toc nav a[aria-current]>span {
  color:var(--orange-ink)
}
.legal-help {
  background:var(--ink);
  color:var(--paper);
  border-radius:6px;
  padding:26px;
  margin-top:28px;
  position:relative;
  overflow:hidden
}
.legal-help:after {
  content:'';
  border:1px solid var(--orange);
  width:155px;
  height:72px;
  position:absolute;
  right:-65px;
  bottom:20px;
  border-radius:50%;
  transform:rotate(-38deg)
}
.legal-help>.eyebrow {
  color:#a8b29c;
  font-size:8px
}
.legal-help h3 {
  font-size:35px;
  line-height:1.15;
  margin-top:17px
}
.legal-help .button {
  padding:10px 18px;
  min-height:40px;
  font-size:10px;
  margin-top:22px;
  position:relative;
  z-index:1
}
.print-button {
  background:transparent;
  border:0;
  border-top:1px solid var(--line);
  padding:23px 0 0;
  margin-top:25px;
  width:100%;
  justify-content:flex-start;
  font-size:10px;
  gap:8px;
  font-weight:500
}
.print-button .icon {
  width:16px;
  height:16px
}
.legal-content {
  max-width:880px
}
.legal-section {
  padding:32px 0;
  border-bottom:1px solid var(--line);
  scroll-margin-top:110px
}
.legal-section:first-child {
  padding-top:15px
}
.legal-section>.case-number {
  font-size:10px
}
.legal-section h2 {
  font-size:35px;
  line-height:1.25;
  margin:18px 0 22px
}
.legal-section p,.legal-section li {
  font-size:13px;
  line-height:1.95;
  color:#626b58;
  margin:12px 0;
  max-width:820px
}
.legal-section strong,.legal-section b {
  font-weight:650;
  color:#414e38
}
.legal-section a {
  text-decoration:underline;
  text-underline-offset:3px;
  overflow-wrap:anywhere
}
.legal-section a:hover {
  color:var(--orange-ink)
}
.legal-section ul,.legal-section ol {
  padding-left:20px
}
.legal-section li {
  padding-left:6px
}
.legal-section blockquote {
  padding-left:18px;
  border-left:1px solid var(--orange)
}
.legal-privacy .legal-hero {
  grid-template-columns:minmax(0,1.2fr) 130px minmax(265px,.7fr);
  padding-bottom:60px;
  border-bottom:1px solid var(--line);
  margin-bottom:25px
}
.legal-privacy .legal-layout {
  gap:55px;
  grid-template-columns:235px minmax(0,1fr)
}
.legal-privacy .legal-toc {
  border-right:1px solid var(--line);
  padding-right:27px
}
.legal-privacy .legal-section {
  padding:34px 0 39px
}
.legal-privacy .legal-section:first-child {
  padding-top:15px
}
.legal-privacy .legal-section:first-child>p:first-of-type {
  font-size:15px;
  color:#3d4a34;
  line-height:1.8
}
.page-legal[data-lang=ru] .legal-hero h1,.page-legal[data-lang=ua] .legal-hero h1 {
  font-size:55px;
  line-height:1.2
}
.legal-privacy[data-lang=ru] .legal-hero h1,.legal-privacy[data-lang=ua] .legal-hero h1 {
  font-size:46px;
  overflow-wrap:anywhere
}
/* Contact: local brief builder, with real contact channels instead of false submissions. */
.contact-heading {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:50px;
  align-items:center;
  padding-top:58px;
  position:relative
}
.contact-heading h1 {
  font-size:clamp(78px,7.6vw,109px);
  line-height:1.06;
  letter-spacing:-.065em;
  margin-top:22px
}
.contact-heading .eyebrow {
  font-size:9px
}
.contact-architecture {
  position:relative;
  min-height:295px;
  align-self:start;
  padding-top:30px
}
.contact-architecture>img {
  width:100%;
  height:300px;
  object-fit:contain;
  object-position:center right
}
.contact-architecture>.handnote {
  position:absolute;
  top:25px;
  left:15px;
  font-size:24px
}
.contact-main {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr) minmax(0,.7fr);
  gap:44px;
  align-items:start;
  padding:35px 0 65px
}
.contact-intro {
  padding-top:8px
}
.contact-intro>p {
  font-size:13px;
  color:#4d5844;
  line-height:1.8
}
.contact-services {
  display:flex;
  flex-direction:column;
  gap:24px;
  margin:35px 0 55px
}
.contact-services>div {
  display:flex;
  align-items:flex-start;
  gap:17px
}
.contact-services .service-icon {
  height:40px;
  width:40px;
  flex:none
}
.contact-services .service-icon>.icon {
  height:22px;
  width:22px
}
.contact-services h3 {
  font-family:var(--sans);
  font-size:12px;
  line-height:1.4;
  font-weight:600;
  letter-spacing:-.02em
}
.contact-services p {
  font-size:11px;
  line-height:1.6;
  margin-top:6px
}
.contact-intro>.handnote {
  font-size:26px;
  padding-left:13px;
  max-width:250px
}
.contact-intro>.handnote:after {
  content:'';
  display:block;
  width:115px;
  height:1px;
  background:var(--orange);
  margin-top:9px;
  transform:rotate(-4deg)
}
.contact-intro>.handnote>svg {
  display:none
}
.contact-form-column {
  margin-top:-63px;
  position:relative;
  z-index:3;
  min-width:0
}
.project-form {
  padding:35px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#f9f8f4;
  box-shadow:0 18px 50px #25351a08
}
.project-form>h2 {
  font-size:33px;
  line-height:1.2
}
.project-form>p {
  font-size:11px;
  margin-top:14px;
  line-height:1.65;
  margin-bottom:26px
}
.project-form label:not(.consent-label) {
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:8px;
  line-height:1.6;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:600;
  color:#7e8a71;
  margin-bottom:21px;
  min-width:0
}
.project-form input:not([type=checkbox]):not([type=hidden]),.project-form select,.project-form textarea {
  border:1px solid #daddd0;
  border-radius:4px;
  padding:10px 12px;
  background:transparent;
  color:#39472f;
  outline-color:var(--orange-ink);
  width:100%;
  min-width:0;
  font-size:11px;
  line-height:1.5;
  letter-spacing:0;
  text-transform:none;
  font-weight:400;
  transition:border-color .2s
}
.project-form textarea {
  resize:vertical;
  min-height:110px
}
.project-form input:hover,.project-form textarea:hover,.project-form select:hover {
  border-color:#a6b397
}
.project-form input::placeholder,.project-form textarea::placeholder {
  color:#a3ad97
}
.project-form .form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}
.consent-label {
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:9px;
  line-height:1.7;
  color:#7f8e70;
  margin:3px 0 22px
}
.consent-label>input {
  margin:3px 0 0;
  width:13px;
  height:13px;
  accent-color:var(--orange-ink);
  flex:none
}
.consent-label a {
  text-decoration:underline;
  text-underline-offset:3px;
  color:#546845
}
.project-form>.button {
  min-height:46px;
  font-size:11px;
  padding:12px 23px
}
.project-form .form-local-note {
  font-size:8px;
  line-height:1.75;
  color:#8a987b;
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin:23px 0 0
}
.form-local-note>.icon {
  width:12px;
  height:12px;
  margin-top:2px;
  flex:none
}
.contact-process {
  padding:23px 0 0
}
.contact-process>.eyebrow {
  font-size:8px
}
.contact-process>h2 {
  font-size:33px;
  line-height:1.2;
  margin:19px 0 28px
}
.contact-process>ol {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:26px;
  position:relative
}
.contact-process>ol:before {
  content:'';
  position:absolute;
  width:1px;
  background:var(--line);
  left:43px;
  top:9px;
  bottom:21px
}
.contact-process li {
  display:flex;
  gap:34px;
  position:relative
}
.contact-process li:before {
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ink);
  position:absolute;
  top:7px;
  left:40px
}
.contact-process li>span {
  font-size:10px;
  color:var(--orange-ink);
  padding-top:1px;
  flex:none
}
.contact-process li>div {
  min-width:0
}
.contact-process h3 {
  font-size:20px;
  line-height:1.25;
  margin-bottom:9px
}
.contact-process p {
  font-size:10px;
  line-height:1.7;
  max-width:210px
}
.contact-direct {
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr;
  gap:35px;
  padding:45px 0 62px;
  border-top:1px solid var(--line);
  align-items:center
}
.contact-direct h2 {
  font-size:52px;
  margin-top:18px
}
.contact-direct>.a {
  min-width:0
}
.contact-direct>a {
  display:flex;
  align-items:center;
  gap:20px;
  font-size:13px;
  min-width:0
}
.contact-direct>a>.icon {
  width:27px;
  height:27px
}
.contact-direct>a>div {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0
}
.contact-direct strong {
  font-size:12px;
  font-weight:550;
  text-decoration:underline;
  text-underline-offset:4px;
  overflow-wrap:anywhere
}
.contact-direct span:not(.eyebrow) {
  font-size:9px;
  color:var(--muted)
}
.contact-direct>a>.arrow {
  margin-left:auto;
  width:16px;
  height:16px
}
.contact-direct a:hover {
  color:var(--orange-ink)
}
.brief-result {
  padding:28px;
  margin-top:24px;
  border:1px solid #98af89;
  border-radius:6px;
  background:#f4f8ed
}
.brief-result h2 {
  font-size:29px
}
.brief-result>p {
  font-size:11px;
  line-height:1.7;
  margin-top:14px;
  color:#738563
}
.brief-result pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font:10px/1.8 var(--mono);
  color:#4b653e;
  padding:20px 0;
  margin:20px 0;
  border-block:1px solid #d9e4cf;
  max-height:350px;
  overflow-y:auto
}
.brief-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px
}
.brief-actions .button {
  font-size:10px;
  padding:10px 16px;
  min-height:40px
}
/* Branded error page and shared accessible overlays. */
.error-hero {
  padding:70px 0 40px;
  position:relative
}
.error-hero h1 {
  font-size:clamp(64px,7.6vw,111px);
  line-height:1.08;
  margin-top:24px;
  max-width:1040px
}
.error-hero>p {
  font-size:17px;
  max-width:670px;
  line-height:1.7;
  margin-top:27px;
  color:#535f49
}
.error-hero .hero-actions {
  margin-top:31px
}
.error-note {
  position:absolute;
  right:20px;
  top:150px;
  font-size:27px
}
.error-route {
  position:relative;
  min-height:355px;
  margin:20px 0 65px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 10px 10px 80px
}
.error-route>svg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0
}
.error-number {
  font:400 180px/1 var(--serif);
  letter-spacing:-.09em;
  color:#dcdfd3;
  position:relative;
  z-index:1;
  margin-top:120px;
  transform:rotate(-4deg)
}
.route-recovery {
  width:295px;
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:12px
}
.route-recovery>.eyebrow {
  font-size:8px;
  margin-bottom:6px;
  text-align:right
}
.route-recovery>a {
  background:#fdfdf7;
  border:1px solid #e4e9da;
  padding:19px 20px;
  border-radius:7px;
  box-shadow:0 5px 19px #34461d08;
  display:flex;
  align-items:center;
  gap:18px;
  font-size:12px;
  transition:transform .2s
}
.route-recovery>a:hover {
  transform:translateX(-4px)
}
.route-recovery .arrow {
  margin-left:auto;
  width:17px
}
.route-recovery .icon {
  width:22px;
  height:22px
}
.toast {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translate(-50%,20px);
  max-width:min(560px,calc(100% - 32px));
  width:max-content;
  z-index:150;
  background:#242d23;
  color:#f6f8f1;
  padding:14px 23px;
  border:1px solid #60704e;
  border-radius:8px;
  box-shadow:0 5px 25px #1b2a1640;
  font-size:12px;
  line-height:1.6;
  opacity:0;
  visibility:hidden;
  transition:transform .2s,opacity .2s,visibility .2s;
  pointer-events:none
}
.toast.visible {
  transform:translate(-50%,0);
  opacity:1;
  visibility:visible
}
dialog {
  max-width:min(590px,calc(100% - 32px));
  width:100%;
  max-height:calc(100dvh - 48px);
  padding:38px;
  border:1px solid #d2ddc6;
  border-radius:9px;
  background:#f8faf2;
  color:#354d29;
  box-shadow:0 25px 100px #10180b55;
  overscroll-behavior:contain
}
dialog::backdrop {
  background:#1a261aaa;
  backdrop-filter:blur(5px)
}
.dialog-close {
  width:33px;
  height:33px;
  border:1px solid #d5dfc9;
  border-radius:50%;
  background:#f9fcf1;
  display:grid;
  place-items:center;
  position:absolute;
  top:17px;
  right:17px
}
.dialog-close>.icon {
  width:17px;
  height:17px
}
#dialog-body>.eyebrow {
  font-size:8px;
  max-width:85%
}
#dialog-body>h2 {
  font-size:32px;
  margin:20px 0;
  line-height:1.22
}
#dialog-body>p {
  font-size:12px;
  line-height:1.8
}
#dialog-body .button {
  font-size:11px;
  margin-top:15px
}
.dialog-kicker {
  font-family:var(--mono);
  font-size:10px;
  color:#96a783;
  margin-bottom:23px
}
.detail-list {
  margin:22px 0;
  border-top:1px solid #d9e4ca
}
.detail-list>div {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  padding:13px 0;
  border-bottom:1px solid #dee7d1;
  font-size:12px
}
.detail-list dt {
  color:#8b9c78;
  font-size:10px
}
.detail-list dd {
  margin:0;
  text-align:right;
  max-width:70%
}
.dialog-note {
  font-size:10px!important;
  color:#899c76!important;
  margin-top:20px!important
}
.sample-document {
  font-size:13px;
  line-height:1.8
}
.sample-document h3 {
  font-size:24px;
  margin-bottom:18px
}
.sample-document p {
  margin:14px 0
}
.sample-document li {
  margin-bottom:10px
}
.event-row {
  grid-template-columns:25px minmax(0,1fr) auto;
  gap:12px
}
.event-icon {
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e9f3e3;
  color:#45884e
}
.event-icon.amber {
  background:#fff0d9;
  color:#a07236
}
.event-icon>.icon {
  width:13px;
  height:13px
}
.event-row>div:last-child {
  align-items:flex-end;
  gap:7px
}
.event-row time {
  font-size:8px;
  color:#93a080;
  font-family:var(--mono)
}
.event-code {
  font:10px/1.8 var(--mono);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  background:#eef3e6;
  border:1px solid #dde7d1;
  border-radius:5px;
  padding:17px;
  color:#5a7448;
  margin-top:26px
}
.event-code>span {
  color:#98a985
}
/* Responsive layout: no canvas-scale shrink, no page-level horizontal scrolling. */
@media(min-width:1550px) {
  .portfolio-hero {
    padding-top:80px;
    padding-bottom:40px
  }
  .case-card {
    height:386px
  }
  .case-card h3 {
    font-size:28px
  }
  .case-card-copy>p {
    font-size:12px
  }
  .case-card .text-link {
    font-size:12px
  }
  .case-card-copy {
    padding-top:31px
  }
  .home-hero {
    min-height:640px
  }
  .home-system-visual {
    height:490px
  }
  .hero-system-panel {
    top:80px
  }
  .chaos-inputs {
    top:128px
  }
}
@media(max-width:1250px) {
  .container,.header-inner,.footer-bottom {
    width:calc(100% - 72px)
  }
  .header-inner {
    gap:20px
  }
  .primary-nav {
    gap:22px
  }
  .header-right {
    gap:18px
  }
  .header-cta {
    padding-left:18px;
    gap:12px
  }
  .portfolio-hero {
    grid-template-columns:1fr 135px 230px;
    gap:20px
  }
  .portfolio-hero h1 {
    font-size:90px
  }
  .hero-subtitle {
    font-size:18px
  }
  .portfolio-note {
    font-size:22px
  }
  .work-count .eyebrow,.count-line {
    display:none
  }
  .portfolio-toolbar {
    gap:15px
  }
  .filter-button {
    font-size:9px;
    padding:8px 13px
  }
  .case-card {
    height:348px
  }
  .case-card-copy {
    padding:24px 0 21px 24px
  }
  .case-card h3 {
    font-size:24px;
    margin-top:19px
  }
  .case-card-copy>p {
    font-size:10px;
    line-height:1.65
  }
  .case-card .text-link {
    font-size:10px
  }
  .case-tags {
    font-size:7px
  }
  .case-tags span {
    padding:4px 7px
  }
  .card-note {
    font-size:18px
  }
  .card-monitoring .case-card-visual {
    right:11px;
    left:43%
  }
  .card-monitoring .is-compact .service-row {
    grid-template-columns:1.1fr .8fr 32px;
    gap:7px
  }
  .card-monitoring .sparkline {
    display:none
  }
  .card-analytics .is-compact .ui-main {
    padding:14px 12px
  }
  .card-analytics .is-compact .analytics-total>strong {
    font-size:22px
  }
  .card-analytics .is-compact .analytics-kpis strong {
    font-size:13px
  }
  .case-card-visual {
    right:13px
  }
  .footer-inner {
    grid-template-columns:250px 1fr 205px 95px
  }
  .footer-nav {
    gap:18px;
    font-size:9px
  }
  .footer-contact {
    padding-left:23px;
    font-size:9px
  }
  .footer-mark {
    padding-left:16px
  }
  .footer-art>span {
    right:12px;
    font-size:7px;
    width:75px
  }
  .cta-section {
    grid-template-columns:1.3fr 1fr auto;
    gap:23px
  }
  .cta-section h2 {
    font-size:36px
  }
  .cta-section p {
    font-size:11px
  }
  .cta-section .button {
    padding-inline:22px;
    font-size:11px
  }
  .home-hero {
    grid-template-columns:1fr 1.05fr;
    gap:25px
  }
  .home-hero h1 {
    font-size:88px
  }
  .home-hero-copy>p {
    font-size:14px
  }
  .home-system-visual {
    height:430px
  }
  .chaos-inputs {
    width:155px;
    top:100px;
    gap:16px
  }
  .input-fragment {
    font-size:8px;
    gap:7px;
    padding:9px 8px;
    min-height:48px
  }
  .fragment-icon {
    width:24px;
    height:24px
  }
  .hero-system-panel {
    left:160px;
    right:-5px;
    top:56px
  }
  .hero-system-panel .is-compact .ui-main {
    padding:19px 16px
  }
  .hero-system-panel .is-compact .ui-topbar>strong {
    font-size:17px
  }
  .hero-system-panel .ui-controls {
    display:none
  }
  .hero-note {
    font-size:21px;
    top:0
  }
  .system-note {
    font-size:21px;
    bottom:0
  }
  .hero-signoff {
    font-size:7px
  }
  .home-hero .hero-actions {
    gap:15px
  }
  .home-hero .hero-actions>.button {
    padding-inline:22px;
    font-size:11px
  }
  .technology-strip {
    gap:25px
  }
  .technology-strip>div {
    gap:27px
  }
  .technology-strip>div>span {
    font-size:11px
  }
  .section-heading h2 {
    font-size:42px
  }
  .section-heading {
    gap:26px
  }
  .section-heading>p {
    font-size:11px
  }
  .section-heading>.text-link {
    font-size:11px
  }
  .service-card {
    padding:22px 19px 18px
  }
  .service-card h3 {
    font-size:22px
  }
  .service-card>div {
    font-size:7px
  }
  .price-card {
    padding:24px
  }
  .price-name>span {
    font-size:7px
  }
  .price-name h3 {
    font-size:26px
  }
  .approach-statement>p {
    font-size:35px
  }
  .faq-section {
    gap:65px
  }
  .case-hero {
    gap:45px
  }
  .case-hero h1 {
    font-size:57px
  }
  .case-hero-copy>p {
    font-size:13px
  }
  .case-hero-preview .is-compact .ui-main {
    padding:18px
  }
  .case-hero-preview .is-compact .ui-sidebar {
    width:90px;
    padding-inline:9px
  }
  .case-hero-preview .is-compact .kanban {
    min-width:300px
  }
  .case-hero--analytics h1 {
    font-size:64px
  }
  .case-hero--bot {
    gap:55px;
    padding-right:30px;
    grid-template-columns:1.25fr 1fr
  }
  .case-hero--bot .case-hero-note {
    right:-36px
  }
  .case-hero--reports {
    gap:45px
  }
  .case-hero--catalog .case-hero-art {
    min-height:395px
  }
  .case-hero--catalog .is-compact .product-name {
    font-size:9px;
    gap:6px
  }
  .case-hero--catalog .is-compact .ui-table td {
    padding:13px 5px
  }
  .case-hero--workspace .case-hero-art {
    min-height:430px
  }
  .workspace-time {
    font-size:119px;
    top:-10px
  }
  .case-hero--workspace .case-hero-note {
    font-size:22px
  }
  .case-context,.case-outcomes,.case-feature {
    gap:60px
  }
  .case-context h2,.case-feature h2 {
    font-size:35px
  }
  .case-live-section .section-heading h2 {
    font-size:37px
  }
  .case-metadata {
    gap:19px
  }
  .case-metadata>div {
    padding-right:19px
  }
  .case-metadata p {
    font-size:10px
  }
  .data-equation {
    gap:15px
  }
  .data-equation>div {
    padding:25px 17px
  }
  .data-equation>div>span {
    font-size:28px
  }
  .conversation-steps>div {
    padding:22px
  }
  .conversation-steps h3 {
    font-size:21px
  }
  .feature-monitoring {
    padding:45px 32px;
    gap:40px
  }
  .clock-numeral {
    font-size:112px
  }
  .feature-foot {
    gap:55px
  }
  .legal-hero {
    grid-template-columns:minmax(0,1.2fr) 105px minmax(230px,.6fr);
    gap:20px
  }
  .legal-hero h1 {
    font-size:75px
  }
  .legal-hero>div>p {
    font-size:15px
  }
  .legal-note {
    font-size:22px
  }
  .legal-principles>div {
    font-size:16px;
    gap:12px;
    padding-inline:19px
  }
  .legal-layout {
    grid-template-columns:235px minmax(0,1fr);
    gap:45px
  }
  .legal-privacy .legal-hero {
    grid-template-columns:1.2fr 95px .7fr
  }
  .page-legal[data-lang=ru] .legal-hero h1,.page-legal[data-lang=ua] .legal-hero h1 {
    font-size:46px
  }
  .legal-privacy[data-lang=ru] .legal-hero h1,.legal-privacy[data-lang=ua] .legal-hero h1 {
    font-size:40px
  }
  .contact-main {
    gap:27px;
    grid-template-columns:.85fr 1.35fr .7fr
  }
  .contact-heading h1 {
    font-size:92px
  }
  .project-form {
    padding:29px
  }
  .project-form>h2 {
    font-size:29px
  }
  .contact-intro>p {
    font-size:12px
  }
  .contact-services {
    gap:24px
  }
  .contact-services>div {
    gap:13px
  }
  .contact-services .service-icon {
    height:34px;
    width:34px
  }
  .contact-services h3 {
    font-size:11px
  }
  .contact-services p {
    font-size:10px
  }
  .contact-process>h2 {
    font-size:28px
  }
  .contact-process h3 {
    font-size:19px
  }
  .contact-process p {
    font-size:9px
  }
  .contact-process li {
    gap:27px
  }
  .contact-process>ol:before {
    left:35px
  }
  .contact-process li:before {
    left:32px
  }
  .error-note {
    font-size:23px;
    right:5px;
    top:140px
  }
  .error-hero h1 {
    font-size:96px;
    max-width:880px
  }
}
@media(max-width:1020px) {
  html {
    scroll-padding-top:95px
  }
  .container,.header-inner,.footer-bottom {
    width:calc(100% - 56px)
  }
  .header-inner {
    height:84px
  }
  .wordmark {
    font-size:22px
  }
  .header-right {
    gap:20px
  }
  .header-cta {
    padding-left:20px
  }
  .menu-toggle {
    display:block
  }
  .primary-nav {
    display:none;
    position:absolute;
    top:84px;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:16px 28px 24px;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:0 15px 30px #182d1712
  }
  .primary-nav.is-open {
    display:flex
  }
  .primary-nav>a {
    font-size:16px;
    padding:13px 0
  }
  .primary-nav>a:after {
    display:none
  }
  .portfolio-hero {
    grid-template-columns:1fr 180px;
    gap:20px;
    padding-top:50px
  }
  .portfolio-hero h1 {
    font-size:86px
  }
  .portfolio-note {
    display:none
  }
  .portfolio-aside {
    font-size:11px
  }
  .hero-subtitle {
    font-size:17px;
    max-width:550px
  }
  .portfolio-toolbar {
    flex-wrap:wrap;
    margin-bottom:26px;
    gap:15px;
    margin-top:10px
  }
  .filter-list {
    gap:7px
  }
  .filter-button {
    font-size:10px;
    padding:9px 14px
  }
  .work-count {
    margin-left:auto
  }
  .case-card,.featured-grid .case-card {
    height:361px
  }
  .case-card:nth-child(n) {
    grid-column:span 6
  }
  .case-card-copy {
    padding:23px 0 21px 20px;
    width:48%
  }
  .case-card h3 {
    font-size:24px;
    margin-top:18px;
    line-height:1.16
  }
  .case-card-copy>p {
    font-size:10px;
    min-height:0;
    margin-bottom:15px
  }
  .case-card-visual {
    left:50%;
    right:-43px;
    top:43px;
    bottom:28px
  }
  .case-card .text-link {
    font-size:10px;
    gap:9px
  }
  .case-tags {
    font-size:6px;
    gap:3px
  }
  .case-tags span {
    padding:4px 6px
  }
  .card-crm .case-card-visual {
    left:49%;
    right:-107px;
    top:26px;
    bottom:0
  }
  .card-crm .is-compact .ui-sidebar {
    display:none
  }
  .card-crm .is-compact .kanban {
    min-width:270px;
    gap:6px
  }
  .card-crm .is-compact .ui-summary {
    flex-direction:column;
    align-items:flex-start;
    gap:4px
  }
  .card-analytics .case-card-copy {
    padding-left:20px;
    width:47%
  }
  .card-analytics .case-card-visual {
    left:51%;
    right:-35px;
    top:48px;
    bottom:34px
  }
  .card-analytics .is-compact .ui-pill {
    display:none
  }
  .card-analytics .is-compact .analytics-kpis {
    gap:5px
  }
  .card-analytics .is-compact .analytics-kpis>div {
    padding:9px 5px
  }
  .card-integrations .case-card-visual {
    left:41%;
    right:1px;
    top:65px;
    bottom:18px
  }
  .card-integrations .case-card-copy {
    width:48%
  }
  .card-integrations .is-compact .integration-node {
    width:39px;
    height:41px
  }
  .card-integrations .is-compact .hub-core {
    width:54px;
    height:57px
  }
  .card-integrations .is-compact .hub-core>.x-symbol {
    font-size:34px
  }
  .card-integrations .is-compact .hub-core>small {
    font-size:4px
  }
  .card-integrations .card-note {
    font-size:17px;
    top:20px
  }
  .card-bot .case-card-visual {
    left:52%;
    right:-35px;
    top:35px;
    bottom:0
  }
  .card-monitoring .case-card-copy {
    width:46%
  }
  .card-monitoring .case-card-visual {
    left:49%;
    right:-84px;
    top:55px;
    bottom:28px
  }
  .card-monitoring .card-note {
    font-size:15px;
    bottom:13px;
    max-width:95px
  }
  .card-automation .case-card-copy {
    padding-left:20px;
    width:46%
  }
  .card-automation .case-card-visual {
    left:51%;
    right:-86px;
    top:60px;
    bottom:20px
  }
  .card-automation .card-note {
    font-size:16px;
    top:10px
  }
  .card-reports .case-card-visual {
    left:51%;
    right:-25px;
    top:29px;
    bottom:-37px
  }
  .card-reports .card-note {
    font-size:16px;
    right:9px;
    top:10px
  }
  .card-catalog .case-card-visual {
    left:50%;
    right:-120px;
    top:49px;
    bottom:25px
  }
  .card-deployment .case-card-visual {
    left:50%;
    right:-66px;
    top:45px;
    bottom:30px
  }
  .card-deployment .card-note {
    font-size:15px
  }
  .card-workspace .case-card-visual {
    left:52%;
    right:-80px;
    top:48px;
    bottom:20px
  }
  .cta-section {
    grid-template-columns:1fr auto;
    gap:25px;
    padding:50px 0
  }
  .cta-section>div {
    grid-column:1/-1
  }
  .cta-section h2 {
    font-size:46px;
    max-width:700px;
    margin-top:15px
  }
  .cta-section p {
    font-size:12px;
    max-width:520px
  }
  .cta-section .button {
    font-size:12px
  }
  .footer-inner {
    grid-template-columns:205px 1fr 175px 70px
  }
  .footer-art {
    height:140px
  }
  .footer-art>span {
    font-size:6px;
    width:66px;
    right:9px
  }
  .footer-nav {
    gap:18px;
    flex-wrap:wrap;
    padding:20px;
    font-size:9px
  }
  .footer-contact {
    padding-left:18px;
    font-size:9px
  }
  .footer-mark {
    padding-left:10px
  }
  .footer-mark>svg {
    width:40px
  }
  .footer-mark>span {
    font-size:6px
  }
  .footer-bottom {
    font-size:8px;
    gap:15px
  }
  .footer-bottom>div {
    gap:16px
  }
  .home-hero {
    grid-template-columns:1fr 1fr;
    gap:30px;
    padding-top:43px;
    padding-bottom:35px;
    min-height:550px
  }
  .home-hero h1 {
    font-size:77px
  }
  .home-hero-copy>p {
    font-size:13px;
    margin-top:22px
  }
  .home-hero-copy .eyebrow {
    font-size:8px
  }
  .home-hero .hero-actions {
    gap:15px;
    align-items:flex-start;
    flex-direction:column
  }
  .home-hero .secondary-link {
    font-size:10px
  }
  .hero-signoff {
    margin-top:25px;
    font-size:6px;
    gap:10px
  }
  .home-system-visual {
    height:440px
  }
  .chaos-inputs {
    left:-10px;
    top:78px;
    width:151px;
    gap:13px
  }
  .hero-system-panel {
    left:104px;
    top:158px;
    right:-4px;
    transform:rotate(2deg);
    z-index:4
  }
  .hero-system-panel .ui-workspace {
    min-height:253px
  }
  .hero-system-panel .is-compact .ui-main {
    padding:16px 13px
  }
  .hero-system-panel .is-compact .ui-topbar>strong {
    font-size:15px
  }
  .hero-system-panel .is-compact .task-row {
    min-height:40px;
    padding:9px 0
  }
  .hero-system-panel .is-compact .task-row>span>strong {
    font-size:7px
  }
  .hero-system-panel .is-compact .workspace-kpis {
    margin-top:13px;
    gap:5px;
    margin-bottom:18px
  }
  .hero-system-panel .is-compact .workspace-kpis>div {
    padding:9px 7px
  }
  .hero-system-panel .is-compact .workspace-kpis strong {
    font-size:17px
  }
  .system-connected {
    font-size:7px;
    padding:8px 11px
  }
  .hero-note {
    font-size:19px;
    left:0;
    top:-5px
  }
  .hero-note svg {
    width:45px;
    height:33px
  }
  .system-note {
    right:20px;
    bottom:-13px;
    font-size:18px;
    display:none
  }
  .technology-strip {
    display:block;
    padding:24px 0
  }
  .technology-strip>.eyebrow {
    max-width:none;
    font-size:8px
  }
  .technology-strip>div {
    gap:24px;
    justify-content:space-between;
    margin-top:19px
  }
  .technology-strip>div>span {
    font-size:11px
  }
  .technology-strip>div>span>.icon {
    width:17px;
    height:17px
  }
  .section {
    padding:62px 0
  }
  .section-heading {
    grid-template-columns:1.2fr 1fr;
    gap:26px;
    margin-bottom:30px
  }
  .section-heading h2 {
    font-size:38px
  }
  .section-heading>.eyebrow {
    font-size:9px
  }
  .section-heading>.text-link {
    align-self:end;
    justify-self:end
  }
  .section-heading>p {
    font-size:11px
  }
  .problem-grid {
    gap:25px
  }
  .problem-grid article {
    padding-right:25px
  }
  .problem-grid h3 {
    font-size:23px
  }
  .problem-grid p {
    font-size:11px
  }
  .featured-grid .case-card h3 {
    font-size:24px
  }
  .featured-grid .card-analytics .case-card-copy {
    padding-left:20px
  }
  .demo-tabs>button {
    padding:14px 22px;
    font-size:11px;
    gap:9px
  }
  .demo-tabs>button>span {
    margin-left:8px;
    font-size:8px
  }
  .demo-note {
    font-size:18px;
    right:6px;
    top:-65px;
    max-width:135px
  }
  .live-demo .ui-sidebar {
    width:145px;
    padding:22px 12px
  }
  .live-demo .ui-main {
    padding:25px
  }
  .live-demo .kanban {
    gap:9px
  }
  .live-demo .kanban-column {
    padding:11px 7px
  }
  .live-demo .deal-card {
    padding:11px 9px
  }
  .live-demo .deal-card>strong {
    font-size:10px
  }
  .live-demo .deal-task {
    font-size:8px;
    min-height:33px
  }
  .live-demo .ui-summary>strong {
    font-size:22px
  }
  .live-demo .ui-navigation>span {
    font-size:9px
  }
  .live-demo .ui-analytics .ui-main {
    padding:25px 30px
  }
  .services-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px
  }
  .service-card {
    padding:25px
  }
  .service-card h3 {
    font-size:26px
  }
  .service-card p {
    font-size:12px;
    min-height:35px;
    max-width:300px
  }
  .service-card>div {
    font-size:8px
  }
  .pricing-grid {
    gap:15px
  }
  .price-card {
    padding:23px 20px
  }
  .price-name {
    flex-wrap:wrap;
    gap:9px;
    min-height:58px;
    align-items:flex-start
  }
  .price-card>p {
    font-size:10px;
    min-height:50px;
    margin-top:10px
  }
  .price>strong {
    font-size:39px
  }
  .price>strong>span {
    font-size:24px
  }
  .price-card ul {
    font-size:10px;
    gap:10px
  }
  .price-card .button {
    font-size:10px;
    padding-inline:14px;
    gap:12px
  }
  .process-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    row-gap:30px;
    column-gap:32px;
    margin-bottom:55px
  }
  .process-grid:before {
    display:none
  }
  .process-grid p {
    font-size:11px;
    max-width:220px
  }
  .process-grid h3 {
    font-size:14px
  }
  .process-number {
    margin-bottom:18px
  }
  .approach-statement {
    grid-template-columns:70px 1fr;
    gap:30px
  }
  .approach-statement>.eyebrow {
    display:none
  }
  .approach-statement>.x-symbol {
    font-size:90px
  }
  .approach-statement>p {
    font-size:34px
  }
  .faq-section {
    grid-template-columns:.85fr 1.2fr;
    gap:40px
  }
  .faq-section h2 {
    font-size:35px
  }
  .faq-list summary {
    font-size:12px
  }
  .faq-list p {
    font-size:11px
  }
  .case-hero {
    gap:35px;
    min-height:515px;
    padding-top:43px
  }
  .case-hero h1 {
    font-size:48px
  }
  .case-hero .hero-actions {
    gap:17px
  }
  .case-hero .hero-actions .button {
    font-size:10px;
    min-height:43px;
    padding-inline:18px
  }
  .case-hero .hero-actions .text-link {
    font-size:10px
  }
  .case-hero-copy>.eyebrow {
    font-size:8px;
    gap:14px
  }
  .case-hero-copy>p {
    font-size:12px;
    line-height:1.75
  }
  .case-hero-art {
    min-height:400px
  }
  .case-hero-preview .is-compact .ui-sidebar {
    display:none
  }
  .case-hero-note {
    font-size:21px
  }
  .case-hero--analytics h1 {
    font-size:61px
  }
  .case-hero--analytics .case-hero-art {
    width:85%;
    min-height:330px
  }
  .case-hero--analytics .case-hero-note {
    right:-42px;
    font-size:18px
  }
  .case-hero--analytics .case-hero-preview .is-compact .bar-chart {
    height:140px
  }
  .case-hero--integrations {
    gap:20px
  }
  .case-hero--integrations .is-compact .integration-map {
    height:325px
  }
  .case-hero--integrations .is-compact .integration-node {
    width:51px;
    height:55px
  }
  .case-hero--integrations .is-compact .hub-core {
    width:78px;
    height:80px
  }
  .case-hero--integrations .is-compact .hub-core>.x-symbol {
    font-size:48px
  }
  .case-hero--integrations .case-hero-note {
    right:0;
    font-size:20px
  }
  .case-hero--bot {
    gap:42px;
    padding-right:15px;
    grid-template-columns:1.1fr 1fr
  }
  .case-hero--bot .case-hero-note {
    right:-15px;
    bottom:8px;
    font-size:20px
  }
  .case-hero--monitoring .is-compact .service-row {
    grid-template-columns:1.1fr .7fr 42px;
    font-size:9px;
    gap:8px
  }
  .case-hero--monitoring .sparkline {
    display:none
  }
  .case-hero--monitoring .is-compact .health-head strong {
    font-size:10px
  }
  .case-hero--automation .case-hero-preview .is-compact .job-row {
    grid-template-columns:28px 1fr auto;
    gap:8px
  }
  .case-hero--automation .is-compact .job-row strong {
    font-size:10px
  }
  .case-hero--automation .is-compact .job-row small {
    font-size:8px
  }
  .case-hero--reports {
    gap:38px;
    grid-template-columns:1.1fr 1fr
  }
  .case-hero--reports .case-hero-preview {
    max-width:295px
  }
  .case-hero--reports .is-compact .report-paper {
    padding:24px;
    min-height:425px
  }
  .case-hero--reports .is-compact .report-paper>h3 {
    font-size:29px
  }
  .case-hero--catalog {
    gap:26px;
    grid-template-columns:1.05fr 1fr
  }
  .case-hero--catalog .is-compact .ui-table th {
    font-size:6px
  }
  .case-hero--catalog .is-compact .ui-table td {
    padding:12px 4px
  }
  .case-hero--catalog .is-compact .product-name {
    font-size:8px
  }
  .case-hero--catalog .is-compact .ui-table .ui-pill {
    font-size:5px
  }
  .case-hero--catalog .case-hero-note {
    font-size:20px;
    bottom:9px
  }
  .case-hero--workspace .case-hero-art {
    min-height:380px
  }
  .case-hero--workspace .case-hero-note {
    bottom:-6px;
    font-size:19px
  }
  .workspace-time {
    font-size:104px;
    top:0
  }
  .case-context {
    grid-template-columns:1fr;
    gap:32px;
    padding:60px 0
  }
  .case-context h2 {
    max-width:650px;
    font-size:36px
  }
  .before-after {
    gap:40px
  }
  .before-after p {
    font-size:12px
  }
  .case-feature {
    gap:38px;
    padding:62px 0
  }
  .case-feature h2 {
    font-size:32px
  }
  .case-feature p {
    font-size:11px
  }
  .customer-journey {
    padding:23px 20px
  }
  .journey-inputs {
    gap:9px
  }
  .journey-inputs>span {
    font-size:9px;
    padding:9px 13px
  }
  .journey-track {
    gap:8px
  }
  .journey-track h3 {
    font-size:8px
  }
  .journey-record strong {
    font-size:9px
  }
  .journey-record small {
    font-size:7px
  }
  .data-equation {
    gap:12px;
    padding-bottom:30px
  }
  .data-equation>div {
    padding:23px 14px
  }
  .data-equation>div>span {
    font-size:24px
  }
  .data-equation>div>small {
    font-size:8px
  }
  .feature-foot {
    gap:40px
  }
  .feature-bot>div:first-child {
    gap:0 40px
  }
  .conversation-steps {
    gap:16px;
    margin-top:35px
  }
  .conversation-steps>div {
    padding:20px 17px
  }
  .conversation-steps h3 {
    font-size:21px
  }
  .conversation-steps p {
    font-size:8px;
    padding:6px 8px
  }
  .contract-code>div {
    font-size:8px;
    padding-inline:20px
  }
  .contract-code pre {
    font-size:10px;
    padding:20px
  }
  .feature-monitoring {
    padding:35px 28px;
    gap:30px;
    margin-top:50px
  }
  .feature-monitoring h2 {
    font-size:30px
  }
  .incident-story {
    padding:20px
  }
  .incident-story strong {
    font-size:9px
  }
  .incident-story small {
    font-size:8px
  }
  .incident-story>div:not(.eyebrow) {
    gap:12px
  }
  .clock-numeral {
    font-size:97px
  }
  .schedule-art>.eyebrow {
    font-size:7px
  }
  .scheduled-label {
    padding:12px;
    font-size:10px;
    gap:7px
  }
  .scheduled-label>span {
    font-size:8px
  }
  .report-blocks {
    gap:10px
  }
  .report-block {
    padding:19px 13px;
    min-height:195px
  }
  .report-block>span {
    font-size:6px
  }
  .report-block>.icon {
    width:37px;
    height:37px
  }
  .report-block>small {
    font-size:4px
  }
  .import-compare {
    padding:23px
  }
  .version-path {
    padding:23px
  }
  .version-path>div:not(.version-arrow) {
    padding:19px 15px;
    gap:10px
  }
  .version-path>div>span {
    font-size:8px
  }
  .version-path strong {
    font-size:13px
  }
  .day-story {
    padding-left:21px
  }
  .day-story>div {
    grid-template-columns:68px 1fr;
    gap:15px
  }
  .day-story>div:before {
    left:-25px;
    top:28px
  }
  .day-story time {
    font-size:23px
  }
  .day-story strong {
    font-size:10px
  }
  .day-story p {
    font-size:9px
  }
  .case-live-section {
    padding:62px 0
  }
  .case-live-section .section-heading {
    gap:40px
  }
  .case-live-section .section-heading h2 {
    font-size:35px
  }
  .case-outcomes {
    gap:50px;
    padding-top:60px
  }
  .case-outcomes h2 {
    font-size:39px
  }
  .outcomes-list h3 {
    font-size:13px
  }
  .outcomes-list>div {
    gap:17px;
    padding:22px 0
  }
  .case-metadata {
    grid-template-columns:1fr 1fr;
    gap:24px
  }
  .case-metadata>div:nth-child(2) {
    border:0
  }
  .case-metadata p {
    font-size:11px
  }
  .case-metadata .eyebrow {
    font-size:8px
  }
  .next-case {
    gap:25px;
    padding:32px 0
  }
  .next-number {
    font-size:55px;
    min-width:60px
  }
  .next-case h2 {
    font-size:26px
  }
  .live-demo .integration-two {
    grid-template-columns:1fr 1fr
  }
  .map-side,.event-side {
    padding:25px
  }
  .map-side>.integration-map {
    min-height:300px
  }
  .connection-info {
    gap:8px;
    font-size:8px
  }
  .connection-info strong {
    font-size:11px
  }
  .event-row strong {
    font-size:9px
  }
  .event-row small {
    font-size:8px
  }
  .event-row .ui-pill {
    font-size:7px
  }
  .event-row time {
    font-size:7px
  }
  .event-code {
    font-size:9px;
    padding:15px
  }
  .live-demo .report-workbench {
    grid-template-columns:210px 1fr
  }
  .report-controls {
    padding:28px 21px
  }
  .report-paper {
    width:calc(100% - 50px);
    padding:27px;
    min-height:450px
  }
  .report-paper>h3 {
    font-size:30px
  }
  .catalog-bulk>span {
    display:none
  }
  .workspace-columns {
    grid-template-columns:1.3fr 1fr;
    gap:25px
  }
  .task-row {
    gap:8px
  }
  .task-row strong {
    font-size:10px
  }
  .task-row time {
    font-size:8px
  }
  .legal-hero {
    grid-template-columns:1fr 240px;
    gap:35px;
    padding-top:48px
  }
  .legal-hero h1 {
    font-size:69px
  }
  .legal-note {
    display:none
  }
  .legal-summary {
    padding:22px;
    margin-top:0
  }
  .legal-summary h3 {
    font-size:21px
  }
  .legal-summary p {
    font-size:10px
  }
  .legal-principles {
    padding:24px 20px
  }
  .legal-principles>div {
    font-size:15px;
    gap:10px;
    padding-inline:15px;
    align-items:flex-start
  }
  .legal-principles .icon {
    width:21px;
    height:21px
  }
  .legal-layout {
    grid-template-columns:195px minmax(0,1fr);
    gap:32px
  }
  .legal-toc {
    top:105px;
    max-height:calc(100vh - 120px)
  }
  .legal-toc nav a {
    font-size:9px;
    gap:9px
  }
  .legal-toc nav a>span {
    font-size:8px
  }
  .legal-help {
    padding:21px
  }
  .legal-help h3 {
    font-size:28px
  }
  .legal-help .button {
    font-size:9px;
    padding-inline:15px;
    gap:10px
  }
  .legal-section h2 {
    font-size:29px
  }
  .legal-section p,.legal-section li {
    font-size:12px
  }
  .legal-privacy .legal-hero {
    grid-template-columns:1fr 245px;
    gap:30px
  }
  .legal-privacy .legal-layout {
    grid-template-columns:195px 1fr;
    gap:35px
  }
  .page-legal[data-lang=ru] .legal-hero h1,.page-legal[data-lang=ua] .legal-hero h1 {
    font-size:45px
  }
  .legal-privacy[data-lang=ru] .legal-hero h1,.legal-privacy[data-lang=ua] .legal-hero h1 {
    font-size:37px
  }
  .contact-heading {
    gap:30px;
    padding-top:40px;
    grid-template-columns:1fr 1.1fr
  }
  .contact-heading h1 {
    font-size:79px
  }
  .contact-architecture {
    padding-top:15px;
    min-height:250px
  }
  .contact-architecture>img {
    height:260px
  }
  .contact-architecture>.handnote {
    top:0;
    left:0;
    font-size:20px
  }
  .contact-main {
    grid-template-columns:1fr 1.5fr;
    gap:40px;
    padding-top:35px
  }
  .contact-form-column {
    margin-top:-20px
  }
  .contact-process {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:220px 1fr;
    gap:0 30px;
    border-top:1px solid var(--line);
    padding-top:32px;
    margin-top:20px
  }
  .contact-process>.eyebrow {
    grid-column:1;
    align-self:end
  }
  .contact-process>h2 {
    grid-column:1;
    grid-row:2;
    margin:12px 0 0;
    font-size:34px;
    align-self:start
  }
  .contact-process>ol {
    grid-column:2;
    grid-row:1/3;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px
  }
  .contact-process>ol:before {
    display:none
  }
  .contact-process li {
    display:flex;
    gap:12px
  }
  .contact-process li:before {
    display:none
  }
  .contact-process h3 {
    font-size:18px
  }
  .contact-process p {
    font-size:9px
  }
  .contact-process li>span {
    font-size:8px
  }
  .contact-direct {
    grid-template-columns:1.2fr 1fr 1fr;
    gap:28px
  }
  .contact-direct h2 {
    font-size:44px
  }
  .contact-direct .eyebrow {
    font-size:8px
  }
  .contact-direct>a {
    gap:13px
  }
  .contact-direct strong {
    font-size:10px
  }
  .contact-direct>a>.icon {
    width:22px;
    height:22px
  }
  .contact-direct>a>.arrow {
    width:14px
  }
  .error-hero {
    padding-top:50px
  }
  .error-hero h1 {
    font-size:83px;
    max-width:740px
  }
  .error-hero>p {
    font-size:15px;
    max-width:560px
  }
  .error-note {
    top:145px;
    right:0;
    font-size:22px;
    max-width:125px
  }
  .error-route {
    padding-left:35px;
    min-height:330px
  }
  .error-number {
    font-size:145px
  }
  .route-recovery {
    width:265px
  }
}
@media(max-width:760px) {
  html {
    scroll-padding-top:89px
  }
  .container,.header-inner,.footer-bottom {
    width:calc(100% - 40px)
  }
  .header-inner {
    height:76px;
    gap:18px
  }
  .wordmark {
    font-size:21px
  }
  .header-right {
    gap:15px
  }
  .header-cta {
    padding-left:15px;
    border-left:1px solid var(--line)
  }
  .header-cta>span:first-child {
    display:none
  }
  .circle-arrow {
    width:34px;
    height:34px
  }
  .language-switch {
    gap:9px
  }
  .language-switch a {
    font-size:8px
  }
  .menu-toggle {
    width:31px;
    height:34px;
    padding:6px
  }
  .primary-nav {
    top:76px;
    padding:16px 20px 24px
  }
  .portfolio-hero {
    grid-template-columns:1fr;
    gap:0;
    padding-top:40px;
    padding-bottom:24px
  }
  .portfolio-hero h1 {
    font-size:74px;
    white-space:normal
  }
  .portfolio-hero .eyebrow {
    font-size:8px;
    margin-bottom:17px
  }
  .hero-subtitle {
    font-size:17px;
    max-width:570px;
    margin-top:17px
  }
  .portfolio-aside {
    display:none
  }
  .portfolio-toolbar {
    margin-top:0;
    margin-bottom:25px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:20px
  }
  .filter-list {
    gap:7px
  }
  .filter-button {
    font-size:10px;
    padding:8px 13px
  }
  .work-count {
    margin-left:0;
    font-size:9px;
    width:100%;
    gap:10px
  }
  .work-count>i {
    width:8px;
    height:8px
  }
  .count-line {
    display:block;
    flex:1;
    margin:0 7px;
    width:auto
  }
  .work-count .eyebrow {
    display:block;
    font-size:6px;
    letter-spacing:.1em
  }
  .case-grid {
    grid-template-columns:1fr;
    gap:18px
  }
  .case-card:nth-child(n),.featured-grid .case-card:nth-child(n),.case-grid.is-filtered .case-card {
    grid-column:1
  }
  .case-card,.featured-grid .case-card {
    height:355px
  }
  .case-card-copy {
    width:45%;
    padding:25px 0 22px 25px
  }
  .case-card h3,.featured-grid .case-card h3 {
    font-size:29px;
    margin:18px 0 16px
  }
  .case-card-copy>p {
    font-size:11px;
    max-width:225px;
    line-height:1.75;
    margin-bottom:17px
  }
  .case-card .text-link {
    font-size:11px
  }
  .case-tags {
    font-size:7px;
    gap:5px
  }
  .case-tags span {
    padding:4px 8px
  }
  .case-card-visual {
    left:47%;
    right:18px;
    top:33px;
    bottom:24px
  }
  .card-crm .case-card-visual {
    left:46%;
    right:-37px;
    top:30px;
    bottom:0
  }
  .card-crm .is-compact .ui-sidebar {
    display:flex;
    width:73px;
    font-size:7px
  }
  .card-crm .is-compact .ui-sidebar .ui-brand {
    font-size:7px;
    gap:4px
  }
  .card-crm .is-compact .ui-sidebar .ui-navigation>span {
    font-size:6px
  }
  .card-crm .is-compact .kanban {
    min-width:270px
  }
  .card-crm .is-compact .ui-summary {
    flex-direction:row;
    align-items:center;
    gap:7px
  }
  .card-analytics .case-card-copy {
    width:43%;
    padding-left:25px
  }
  .card-analytics .case-card-visual {
    left:47%;
    right:17px;
    top:37px;
    bottom:28px
  }
  .card-analytics .is-compact .ui-pill {
    display:inline-flex
  }
  .card-analytics .is-compact .ui-main {
    padding:18px 16px
  }
  .card-analytics .is-compact .analytics-total>strong {
    font-size:26px
  }
  .card-analytics .is-compact .analytics-kpis>div {
    padding:9px 8px
  }
  .card-analytics .is-compact .analytics-kpis strong {
    font-size:16px
  }
  .card-integrations .case-card-copy {
    width:44%
  }
  .card-integrations .case-card-visual {
    left:43%;
    right:8px;
    top:45px;
    bottom:25px
  }
  .card-integrations .is-compact .integration-node {
    width:47px;
    height:49px
  }
  .card-integrations .is-compact .hub-core {
    width:65px;
    height:67px
  }
  .card-integrations .is-compact .hub-core>.x-symbol {
    font-size:43px
  }
  .card-integrations .is-compact .hub-core>small {
    font-size:5px
  }
  .card-integrations .card-note {
    font-size:20px;
    right:23px;
    top:13px
  }
  .card-bot .case-card-visual {
    left:48%;
    right:15px;
    top:28px;
    bottom:-20px
  }
  .card-monitoring .case-card-copy {
    width:41%
  }
  .card-monitoring .case-card-visual {
    left:45%;
    right:20px;
    top:35px;
    bottom:28px
  }
  .card-monitoring .is-compact .service-row {
    grid-template-columns:1.1fr .7fr .8fr 32px;
    font-size:7px;
    gap:7px
  }
  .card-monitoring .sparkline {
    display:block
  }
  .card-monitoring .card-note {
    font-size:17px;
    right:23px;
    bottom:17px
  }
  .card-automation .case-card-copy {
    width:43%;
    padding-left:25px
  }
  .card-automation .case-card-visual {
    left:48%;
    right:10px;
    top:48px;
    bottom:25px
  }
  .card-automation .card-note {
    font-size:18px;
    right:19px
  }
  .card-reports .case-card-visual {
    left:48%;
    right:22px;
    top:20px;
    bottom:-35px
  }
  .card-reports .card-note {
    font-size:18px;
    right:12px;
    top:18px
  }
  .card-catalog .case-card-visual {
    left:46%;
    right:-28px;
    top:33px;
    bottom:25px
  }
  .card-deployment .case-card-visual {
    left:46%;
    right:18px;
    top:35px;
    bottom:28px
  }
  .card-deployment .card-note {
    font-size:18px;
    right:17px;
    bottom:9px
  }
  .card-workspace .case-card-visual {
    left:48%;
    right:-18px;
    top:33px;
    bottom:24px
  }
  .portfolio-disclosure {
    font-size:9px;
    line-height:1.9;
    margin-top:22px
  }
  .cta-section {
    padding:45px 0;
    gap:23px
  }
  .cta-section h2 {
    font-size:41px
  }
  .cta-section p {
    font-size:11px;
    max-width:380px
  }
  .cta-section .eyebrow {
    font-size:8px
  }
  .cta-section .button {
    font-size:11px;
    padding-inline:22px;
    min-height:46px
  }
  .footer-inner {
    grid-template-columns:190px 1fr 170px;
    align-items:stretch;
    min-height:120px
  }
  .footer-art {
    height:130px
  }
  .footer-nav {
    font-size:9px;
    justify-content:flex-start;
    gap:12px 19px;
    align-content:center;
    padding:23px
  }
  .footer-contact {
    align-self:center;
    padding-left:20px;
    font-size:8px;
    gap:6px
  }
  .footer-contact>.eyebrow {
    font-size:7px;
    margin-bottom:4px
  }
  .footer-mark {
    display:none
  }
  .footer-bottom {
    flex-wrap:wrap;
    font-size:8px;
    gap:14px;
    padding:18px 0
  }
  .footer-bottom>span:last-child {
    display:none
  }
  .footer-bottom>div {
    gap:16px
  }
  .home-hero {
    grid-template-columns:1fr;
    gap:15px;
    padding:39px 0 20px;
    min-height:0
  }
  .home-hero h1 {
    font-size:91px;
    max-width:640px
  }
  .home-hero-copy>p {
    font-size:14px;
    max-width:580px;
    line-height:1.75;
    margin-top:25px
  }
  .home-hero .hero-actions {
    flex-direction:row;
    align-items:center;
    gap:23px;
    margin-top:25px
  }
  .home-hero .hero-actions>.button {
    font-size:12px;
    min-height:49px;
    padding-inline:24px
  }
  .home-hero .secondary-link {
    font-size:11px
  }
  .hero-signoff {
    margin-top:22px;
    font-size:7px
  }
  .home-system-visual {
    height:370px;
    max-width:610px;
    margin:0 auto;
    width:100%
  }
  .chaos-inputs {
    left:10px;
    width:175px;
    top:65px;
    gap:14px
  }
  .input-fragment {
    font-size:9px;
    min-height:50px;
    padding:10px 12px
  }
  .fragment-icon {
    height:26px;
    width:26px
  }
  .hero-note {
    font-size:21px;
    top:0;
    left:9px
  }
  .hero-note svg {
    display:none
  }
  .hero-system-panel {
    top:32px;
    left:215px;
    right:12px;
    transform:rotate(1.5deg)
  }
  .hero-system-panel .is-compact .ui-main {
    padding:23px 19px
  }
  .hero-system-panel .is-compact .ui-topbar>strong {
    font-size:19px
  }
  .hero-system-panel .is-compact .workspace-kpis {
    margin-top:20px;
    gap:8px
  }
  .hero-system-panel .is-compact .workspace-kpis>div {
    padding:13px 10px
  }
  .hero-system-panel .is-compact .workspace-kpis strong {
    font-size:22px
  }
  .hero-system-panel .is-compact .task-row {
    padding:10px 0;
    min-height:43px
  }
  .hero-system-panel .is-compact .task-row>span>strong {
    font-size:8px
  }
  .hero-system-panel .is-compact .task-row small {
    font-size:7px
  }
  .system-connected {
    padding:10px 14px;
    font-size:8px
  }
  .technology-strip {
    padding:24px 0
  }
  .technology-strip>div {
    gap:16px;
    flex-wrap:wrap;
    justify-content:flex-start
  }
  .technology-strip>div>span {
    font-size:10px
  }
  .technology-strip>div>span>.icon {
    width:15px;
    height:15px
  }
  .section {
    padding:50px 0
  }
  .section-heading {
    grid-template-columns:1fr;
    gap:20px;
    align-items:start;
    margin-bottom:28px
  }
  .section-heading .eyebrow {
    font-size:8px;
    margin-bottom:17px
  }
  .section-heading h2 {
    font-size:39px;
    max-width:620px
  }
  .section-heading>p {
    font-size:12px;
    max-width:580px;
    margin-top:0;
    line-height:1.8
  }
  .section-heading>.text-link {
    justify-self:start;
    padding-bottom:0;
    font-size:11px;
    margin-top:0
  }
  .problem-grid {
    grid-template-columns:repeat(3,1fr);
    gap:18px
  }
  .problem-grid article {
    padding-right:18px
  }
  .problem-grid h3 {
    font-size:23px
  }
  .problem-grid p {
    font-size:10px;
    line-height:1.8
  }
  .problem-no {
    right:15px;
    font-size:8px
  }
  .service-icon {
    width:40px;
    height:40px
  }
  .service-icon>.icon {
    width:22px;
    height:22px
  }
  .featured-grid .card-analytics .case-card-copy {
    padding-left:25px
  }
  .demo-tabs {
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,1fr)
  }
  .demo-tabs>button {
    justify-content:center;
    font-size:10px;
    gap:9px;
    padding:14px 12px
  }
  .demo-tabs>button>span {
    display:none
  }
  .demo-note {
    display:none
  }
  .live-demo .ui-sidebar {
    display:none
  }
  .live-demo .ui-main {
    padding:23px
  }
  .live-demo .product-ui {
    min-height:0
  }
  .live-demo .ui-topbar>strong {
    font-size:18px
  }
  .live-demo .kanban {
    gap:10px
  }
  .live-demo .kanban-column {
    padding:11px 8px
  }
  .live-demo .deal-card {
    padding:12px 10px
  }
  .live-demo .deal-card>strong {
    font-size:10px
  }
  .live-demo .deal-bottom {
    margin-top:15px
  }
  .live-demo .deal-bottom>small {
    font-size:7px
  }
  .live-demo .deal-task {
    font-size:9px;
    min-height:30px
  }
  .live-demo .ui-summary {
    margin-bottom:19px
  }
  .live-demo .analytics-details {
    gap:30px
  }
  .live-demo .ui-analytics .ui-main {
    padding:23px
  }
  .analytics-kpis {
    gap:12px
  }
  .analytics-kpis>div {
    padding:15px
  }
  .analytics-total>strong {
    font-size:32px
  }
  .analytics-details .product-row {
    font-size:9px
  }
  .analytics-details .product-row>strong {
    font-size:9px
  }
  .channel-row {
    grid-template-columns:73px 1fr 25px;
    gap:8px;
    font-size:9px
  }
  .services-grid {
    gap:15px
  }
  .service-card {
    padding:25px 22px
  }
  .service-card h3 {
    font-size:25px
  }
  .service-card p {
    font-size:11px;
    min-height:53px
  }
  .pricing-grid {
    grid-template-columns:1fr;
    gap:17px
  }
  .price-card {
    padding:27px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 32px
  }
  .price-name {
    min-height:0;
    align-items:center;
    grid-column:1;
    display:flex;
    flex-wrap:wrap;
    gap:10px
  }
  .price-name h3 {
    font-size:29px
  }
  .price-name>span {
    font-size:7px
  }
  .price-card>p {
    min-height:0;
    grid-column:1;
    font-size:11px;
    margin-top:16px
  }
  .price {
    grid-column:1;
    margin-top:19px
  }
  .price>strong {
    font-size:43px
  }
  .price-time {
    grid-column:1;
    font-size:10px;
    margin-top:5px
  }
  .price-card ul {
    grid-column:2;
    grid-row:1/4;
    font-size:11px;
    align-self:start;
    margin:3px 0 15px;
    gap:13px
  }
  .price-card .button {
    grid-column:2;
    grid-row:4/6;
    align-self:end;
    margin-top:15px;
    font-size:11px;
    min-height:43px
  }
  .process-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:33px 25px;
    margin:37px 0 42px
  }
  .process-grid h3 {
    font-size:13px
  }
  .process-grid p {
    font-size:10px
  }
  .approach-statement {
    grid-template-columns:60px 1fr;
    gap:26px;
    padding-top:35px
  }
  .approach-statement>.x-symbol {
    font-size:80px
  }
  .approach-statement>p {
    font-size:32px
  }
  .faq-section {
    grid-template-columns:1fr;
    gap:30px
  }
  .faq-section>div:first-child {
    position:relative
  }
  .faq-section h2 {
    font-size:38px;
    max-width:400px
  }
  .faq-section .handnote {
    display:none
  }
  .faq-section>div:first-child>.text-link {
    margin-top:20px;
    font-size:11px
  }
  .faq-list summary {
    font-size:13px
  }
  .faq-list p {
    font-size:12px
  }
  .breadcrumbs {
    font-size:9px;
    padding-top:19px;
    gap:9px
  }
  .case-top {
    padding-bottom:30px
  }
  .case-hero {
    grid-template-columns:1fr;
    gap:32px;
    padding:35px 0 43px;
    min-height:0
  }
  .case-hero h1 {
    font-size:59px;
    max-width:670px
  }
  .case-hero-copy>.eyebrow {
    font-size:8px;
    margin-bottom:20px
  }
  .case-hero-copy>p {
    font-size:13px;
    max-width:590px;
    margin-top:23px
  }
  .case-hero .hero-actions {
    gap:22px;
    margin-top:26px
  }
  .case-hero .hero-actions .button {
    font-size:11px;
    min-height:47px;
    padding-inline:22px
  }
  .case-hero .hero-actions .text-link {
    font-size:11px
  }
  .case-hero-art {
    min-height:375px;
    max-width:575px;
    width:100%;
    margin-inline:auto;
    padding:15px 25px 0
  }
  .case-hero-art>.route-line {
    left:-20px;
    width:calc(100% + 40px);
    top:-15px;
    height:calc(100% + 10px)
  }
  .case-hero-preview .is-compact .ui-main {
    padding:22px
  }
  .case-hero-preview .is-compact .ui-sidebar {
    display:flex;
    width:98px;
    padding:20px 10px
  }
  .case-hero-preview .is-compact .ui-brand {
    font-size:9px
  }
  .case-hero-preview .is-compact .ui-navigation>span {
    font-size:8px
  }
  .case-hero-preview .is-compact .ui-settings {
    font-size:8px
  }
  .case-hero-preview .is-compact .ui-topbar>strong {
    font-size:17px
  }
  .case-hero-preview .is-compact .ui-summary>strong {
    font-size:22px
  }
  .case-hero-preview .is-compact .kanban {
    min-width:300px;
    gap:9px
  }
  .case-hero-note {
    bottom:-15px;
    right:30px;
    font-size:21px
  }
  .case-metadata {
    padding-top:23px;
    gap:22px 30px
  }
  .case-metadata .eyebrow {
    font-size:8px
  }
  .case-metadata p {
    font-size:11px;
    margin-top:8px
  }
  .case-hero--analytics {
    text-align:left
  }
  .case-hero--analytics .case-hero-copy>.eyebrow {
    justify-content:flex-start
  }
  .case-hero--analytics .case-hero-copy>p {
    margin-inline:0
  }
  .case-hero--analytics .hero-actions {
    justify-content:flex-start
  }
  .case-hero--analytics .case-hero-art {
    width:100%;
    padding:10px 0 0;
    min-height:335px
  }
  .case-hero--analytics h1 {
    font-size:59px
  }
  .case-hero--analytics .case-hero-note {
    right:5px;
    bottom:-15px;
    font-size:18px
  }
  .case-hero--integrations {
    gap:25px
  }
  .case-hero--integrations .case-hero-art {
    max-width:530px;
    min-height:405px;
    padding:10px 25px
  }
  .case-hero--integrations .is-compact .integration-map {
    height:365px
  }
  .case-hero--integrations .is-compact .integration-node {
    height:61px;
    width:61px
  }
  .case-hero--integrations .is-compact .hub-core {
    height:88px;
    width:85px
  }
  .case-hero--integrations .case-hero-note {
    bottom:-10px;
    right:20px;
    font-size:22px
  }
  .case-hero--bot {
    padding-right:0;
    gap:20px
  }
  .case-hero--bot .case-hero-art {
    min-height:500px;
    padding:10px 35px;
    max-width:430px
  }
  .case-hero--bot .case-hero-preview {
    max-width:330px
  }
  .case-hero--bot .case-hero-note {
    bottom:-5px;
    right:0;
    font-size:21px
  }
  .case-bot .live-demo>[data-demo] {
    padding:30px
  }
  .case-hero--monitoring .case-hero-art {
    padding:10px 20px;
    min-height:360px
  }
  .case-hero--monitoring .is-compact .service-row {
    grid-template-columns:1fr .75fr 1fr 35px;
    font-size:9px;
    gap:15px;
    padding:15px 0
  }
  .case-hero--monitoring .is-compact .sparkline {
    display:block
  }
  .case-hero--monitoring .is-compact .health-head strong {
    font-size:12px
  }
  .case-hero--automation .case-hero-art {
    max-width:505px;
    padding:8px 20px;
    min-height:360px
  }
  .case-hero--automation .case-hero-preview .is-compact .job-row {
    grid-template-columns:34px 1fr auto;
    padding:23px 0;
    gap:13px
  }
  .case-hero--automation .is-compact .job-row strong {
    font-size:12px
  }
  .case-hero--automation .is-compact .job-row small {
    font-size:9px
  }
  .case-hero--automation .case-hero-note {
    bottom:-14px;
    right:20px
  }
  .case-hero--reports {
    gap:25px
  }
  .case-hero--reports .case-hero-art {
    min-height:510px;
    max-width:430px;
    padding:15px 45px
  }
  .case-hero--reports .case-hero-preview {
    max-width:340px
  }
  .case-hero--reports .is-compact .report-paper {
    min-height:445px;
    padding:26px
  }
  .case-hero--reports .case-hero-note {
    right:0;
    bottom:-13px;
    font-size:23px
  }
  .case-hero--catalog .case-hero-art {
    min-height:365px;
    padding:10px
  }
  .case-hero--catalog .is-compact .ui-table th {
    font-size:8px
  }
  .case-hero--catalog .is-compact .ui-table td {
    padding:14px 7px
  }
  .case-hero--catalog .is-compact .product-name {
    font-size:10px;
    gap:13px
  }
  .case-hero--catalog .is-compact .ui-table .ui-pill {
    font-size:7px
  }
  .case-hero--catalog .case-hero-note {
    bottom:-14px;
    right:25px
  }
  .case-hero--deployment .case-hero-art {
    min-height:370px;
    padding:10px 23px
  }
  .case-hero--workspace .case-hero-art {
    min-height:425px;
    padding:10px 25px;
    max-width:530px
  }
  .workspace-time {
    font-size:119px;
    right:20px;
    top:-13px
  }
  .case-hero--workspace .case-hero-note {
    bottom:-16px;
    right:15px;
    font-size:22px
  }
  .case-context {
    padding:50px 0;
    gap:29px
  }
  .case-context h2 {
    font-size:35px;
    margin-top:18px
  }
  .case-context>.eyebrow {
    font-size:8px
  }
  .before-after {
    gap:30px
  }
  .before-after p {
    font-size:11px;
    line-height:1.9
  }
  .case-feature {
    padding:55px 0;
    grid-template-columns:1fr;
    gap:35px
  }
  .case-feature h2 {
    font-size:36px;
    margin-top:17px
  }
  .case-feature p {
    font-size:12px;
    line-height:1.85;
    max-width:630px;
    margin-top:21px
  }
  .customer-journey {
    padding:27px 30px
  }
  .journey-inputs {
    gap:21px
  }
  .journey-inputs>span {
    font-size:11px;
    padding:12px 21px
  }
  .journey-track {
    gap:18px
  }
  .journey-track h3 {
    font-size:10px
  }
  .journey-record {
    padding:18px
  }
  .journey-record strong {
    font-size:11px
  }
  .journey-record small {
    font-size:9px
  }
  .data-equation {
    flex-wrap:wrap;
    gap:14px;
    padding-top:0;
    padding-bottom:26px;
    justify-content:space-between
  }
  .data-equation>div {
    padding:22px 14px;
    flex:1
  }
  .data-equation>div>span {
    font-size:23px
  }
  .data-equation>div>small {
    font-size:8px
  }
  .data-equation>b {
    font-size:21px
  }
  .feature-foot {
    grid-template-columns:1fr;
    gap:0;
    padding-top:4px
  }
  .contract-code pre {
    font-size:12px;
    padding:25px
  }
  .contract-code>div {
    font-size:9px;
    padding:16px 25px
  }
  .feature-bot>div:first-child {
    display:block
  }
  .feature-bot>div:first-child>p {
    margin-top:21px
  }
  .conversation-steps {
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    margin-top:33px
  }
  .conversation-steps h3 {
    font-size:22px
  }
  .conversation-steps>div {
    padding:21px 17px
  }
  .conversation-steps p {
    font-size:9px;
    line-height:1.6;
    margin-top:19px
  }
  .feature-monitoring {
    padding:32px;
    margin-top:40px;
    gap:29px
  }
  .feature-monitoring h2 {
    font-size:36px
  }
  .incident-story {
    padding:26px
  }
  .incident-story strong {
    font-size:12px
  }
  .incident-story small {
    font-size:9px
  }
  .incident-story>div:not(.eyebrow) {
    gap:20px
  }
  .feature-automation {
    gap:35px
  }
  .feature-automation .schedule-art {
    order:2;
    padding-top:0
  }
  .clock-numeral {
    font-size:126px
  }
  .schedule-art>.eyebrow {
    font-size:9px;
    margin-top:10px
  }
  .scheduled-label {
    font-size:12px;
    padding:17px 21px
  }
  .scheduled-label>span {
    font-size:10px
  }
  .report-blocks {
    gap:20px;
    padding:12px 0 0
  }
  .report-block {
    min-height:220px;
    padding:25px 20px
  }
  .report-block>span {
    font-size:7px
  }
  .report-block>.icon {
    width:46px;
    height:46px
  }
  .report-block>small {
    font-size:5px
  }
  .import-compare {
    padding:28px
  }
  .import-compare>.eyebrow {
    font-size:8px
  }
  .import-table>div {
    font-size:13px
  }
  .import-table strong {
    font-size:12px
  }
  .import-safety {
    font-size:10px
  }
  .version-path {
    padding:30px
  }
  .version-path>div:not(.version-arrow) {
    padding:22px 25px;
    gap:20px
  }
  .version-path>div>span {
    font-size:11px
  }
  .version-path strong {
    font-size:17px
  }
  .day-story {
    order:2;
    padding-left:29px
  }
  .day-story>div {
    grid-template-columns:100px 1fr;
    gap:25px;
    padding:24px 0
  }
  .day-story>div:before {
    left:-33px;
    top:33px
  }
  .day-story time {
    font-size:31px
  }
  .day-story strong {
    font-size:13px
  }
  .day-story p {
    font-size:11px;
    margin-top:8px
  }
  .case-live-section {
    padding:53px 0
  }
  .case-live-section .section-heading {
    grid-template-columns:1fr;
    gap:19px
  }
  .case-live-section .section-heading h2 {
    font-size:37px;
    line-height:1.2
  }
  .case-live-section .section-heading>p {
    font-size:12px;
    max-width:630px
  }
  .case-outcomes {
    grid-template-columns:1fr;
    gap:27px;
    padding:48px 0 25px
  }
  .case-outcomes h2 {
    font-size:38px
  }
  .case-outcomes h2 br {
    display:none
  }
  .outcomes-list>div {
    padding:23px 0;
    gap:20px
  }
  .outcomes-list h3 {
    font-size:14px;
    max-width:none
  }
  .case-provenance {
    font-size:9px;
    line-height:1.9;
    padding-bottom:24px
  }
  .next-case {
    gap:23px
  }
  .next-case h2 {
    font-size:25px
  }
  .next-number {
    font-size:56px;
    min-width:60px
  }
  .next-icon {
    width:43px;
    height:43px
  }
  .next-icon>.arrow {
    width:20px
  }
  .live-demo .integration-two {
    grid-template-columns:1fr
  }
  .map-side,.event-side {
    padding:27px
  }
  .map-side>.integration-map {
    height:330px;
    max-width:410px;
    flex:auto
  }
  .connection-info {
    font-size:10px;
    gap:12px
  }
  .event-row strong {
    font-size:11px
  }
  .event-row small {
    font-size:9px
  }
  .event-row time {
    font-size:9px
  }
  .event-row .ui-pill {
    font-size:8px
  }
  .event-code {
    font-size:11px;
    padding:20px
  }
  .event-icon {
    height:29px;
    width:29px
  }
  .event-row {
    grid-template-columns:30px 1fr auto;
    gap:15px
  }
  .job-row {
    gap:12px;
    grid-template-columns:32px 1fr auto auto
  }
  .job-row strong {
    font-size:10px
  }
  .job-row small {
    font-size:8px
  }
  .job-row>.ui-button {
    font-size:9px;
    padding-inline:9px
  }
  .schedule-strip {
    padding:18px;
    gap:15px
  }
  .schedule-strip span {
    font-size:7px
  }
  .schedule-strip strong {
    font-size:11px
  }
  .live-demo .report-workbench {
    grid-template-columns:185px 1fr
  }
  .report-controls {
    padding:24px 17px
  }
  .report-controls>.ui-brand {
    font-size:11px;
    gap:7px
  }
  .report-controls label:not(.ui-checkbox) {
    font-size:8px
  }
  .report-controls select {
    font-size:10px;
    padding:9px
  }
  .report-controls .ui-subhead {
    font-size:10px
  }
  .report-controls .ui-checkbox {
    font-size:9px
  }
  .report-paper {
    margin:26px auto;
    width:calc(100% - 35px);
    padding:24px 21px;
    min-height:450px
  }
  .report-paper>h3 {
    font-size:28px
  }
  .report-wordmark {
    font-size:7px
  }
  .report-wordmark span {
    font-size:5px
  }
  .report-edition {
    font-size:6px
  }
  .report-metric>strong {
    font-size:30px
  }
  .report-metric>small {
    font-size:6px
  }
  .paper-stock {
    font-size:8px
  }
  .paper-stock>strong {
    font-size:18px
  }
  .paper-footer {
    font-size:5px
  }
  .catalog-table {
    font-size:10px;
    min-width:540px
  }
  .catalog-table th {
    font-size:8px
  }
  .catalog-table td {
    padding:13px 8px
  }
  .catalog-table .product-name {
    font-size:10px;
    gap:10px
  }
  .catalog-toolbar>.ui-search {
    max-width:300px
  }
  .catalog-bulk {
    padding:15px;
    gap:15px
  }
  .catalog-bulk>.ui-button {
    font-size:9px;
    gap:7px
  }
  .catalog-bulk>strong {
    font-size:10px
  }
  .workspace-columns {
    grid-template-columns:1.2fr 1fr;
    gap:25px
  }
  .workspace-kpis {
    gap:12px
  }
  .workspace-kpis>div {
    padding:15px
  }
  .workspace-kpis strong {
    font-size:24px
  }
  .workspace-kpis small {
    font-size:8px
  }
  .workspace-columns .ui-subhead {
    font-size:10px
  }
  .task-row {
    flex-wrap:wrap;
    gap:8px
  }
  .task-row>time {
    font-size:7px
  }
  .task-row>span>strong {
    font-size:9px
  }
  .document-link {
    font-size:9px;
    gap:8px
  }
  .meeting-card {
    padding:16px
  }
  .meeting-card>strong {
    font-size:12px
  }
  .sticky-note {
    padding:16px
  }
  .sticky-note>span {
    font-size:19px
  }
  .sticky-note>textarea {
    font-size:10px
  }
  .ui-monitoring .service-row {
    grid-template-columns:1fr .75fr .9fr 42px;
    gap:15px;
    font-size:10px
  }
  .service-row>.service-status {
    font-size:8px
  }
  .monitor-actions {
    gap:15px
  }
  .monitor-actions>.ui-button {
    font-size:10px
  }
  .monitor-actions>span {
    font-size:8px
  }
  .legal-hero {
    grid-template-columns:1fr;
    gap:26px;
    padding-top:40px;
    padding-bottom:36px
  }
  .legal-hero h1 {
    font-size:68px
  }
  .legal-hero>div>p {
    font-size:15px;
    max-width:570px;
    margin-top:20px
  }
  .legal-hero .eyebrow {
    font-size:8px
  }
  .legal-date {
    font-size:9px;
    margin-top:22px
  }
  .legal-summary {
    max-width:none;
    padding:24px;
    display:grid;
    grid-template-columns:48px 1fr;
    gap:0 21px
  }
  .legal-summary>.icon {
    grid-column:1;
    grid-row:1/4;
    align-self:start;
    max-width:24px;
    max-height:24px;
    margin:0
  }
  .legal-summary h3 {
    grid-column:2;
    font-size:24px
  }
  .legal-summary p {
    grid-column:2;
    font-size:11px;
    margin:9px 0 15px
  }
  .legal-summary .text-link {
    grid-column:2;
    font-size:11px;
    width:max-content
  }
  .legal-principles {
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:24px;
    gap:26px 23px;
    margin-bottom:30px
  }
  .legal-principles>div {
    padding:0!important;
    align-items:center;
    font-size:18px;
    border:0;
    gap:13px
  }
  .legal-principles .icon {
    height:23px;
    width:23px
  }
  .legal-layout,.legal-privacy .legal-layout {
    grid-template-columns:1fr;
    gap:23px;
    padding-bottom:45px
  }
  .legal-toc {
    position:static;
    max-height:none;
    overflow:visible;
    padding:0!important;
    border:0!important
  }
  .legal-toc>.eyebrow {
    font-size:8px;
    margin:0 0 15px
  }
  .legal-toc nav {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px 25px
  }
  .legal-toc nav a {
    font-size:10px;
    line-height:1.6;
    padding:7px 0;
    gap:9px
  }
  .legal-help {
    display:none
  }
  .print-button {
    max-width:100%;
    width:auto;
    font-size:10px;
    padding-top:16px;
    margin-top:18px
  }
  .legal-content {
    border-top:1px solid var(--line)
  }
  .legal-section,.legal-privacy .legal-section {
    padding:31px 0;
    scroll-margin-top:95px
  }
  .legal-section:first-child,.legal-privacy .legal-section:first-child {
    padding-top:29px
  }
  .legal-section h2 {
    font-size:32px;
    margin:17px 0 20px
  }
  .legal-section p,.legal-section li {
    font-size:13px;
    line-height:1.9
  }
  .legal-privacy .legal-hero {
    grid-template-columns:1fr;
    gap:28px;
    padding-top:40px;
    padding-bottom:32px
  }
  .legal-privacy .legal-section:first-child>p:first-of-type {
    font-size:14px
  }
  .page-legal[data-lang=ru] .legal-hero h1,.page-legal[data-lang=ua] .legal-hero h1 {
    font-size:57px
  }
  .legal-privacy[data-lang=ru] .legal-hero h1,.legal-privacy[data-lang=ua] .legal-hero h1 {
    font-size:44px;
    overflow-wrap:normal
  }
  .contact-heading {
    display:block;
    padding-top:40px
  }
  .contact-heading h1 {
    font-size:82px;
    margin-top:22px
  }
  .contact-architecture {
    position:absolute;
    right:0;
    top:46px;
    width:52%;
    opacity:.7;
    z-index:-1;
    padding:0
  }
  .contact-architecture>img {
    height:265px
  }
  .contact-architecture>.handnote {
    display:none
  }
  .contact-main {
    grid-template-columns:1fr 1.5fr;
    gap:25px;
    padding-top:28px;
    padding-bottom:46px
  }
  .contact-intro>p {
    font-size:12px;
    line-height:1.8
  }
  .contact-services {
    margin:29px 0 40px;
    gap:23px
  }
  .contact-services>div {
    gap:12px
  }
  .contact-services .service-icon {
    height:31px;
    width:31px;
    border-radius:7px
  }
  .contact-services .service-icon>.icon {
    width:19px;
    height:19px
  }
  .contact-services h3 {
    font-size:10px
  }
  .contact-services p {
    font-size:9px;
    line-height:1.7
  }
  .contact-intro>.handnote {
    font-size:23px
  }
  .contact-form-column {
    margin-top:0
  }
  .project-form {
    padding:25px
  }
  .project-form>h2 {
    font-size:29px
  }
  .project-form>p {
    font-size:10px;
    margin-bottom:25px
  }
  .project-form label:not(.consent-label) {
    font-size:7px;
    margin-bottom:18px;
    gap:7px
  }
  .project-form input:not([type=checkbox]):not([type=hidden]),.project-form textarea,.project-form select {
    font-size:11px;
    padding:10px
  }
  .project-form .form-row {
    grid-template-columns:1fr;
    gap:0
  }
  .consent-label {
    font-size:8px;
    gap:8px
  }
  .project-form .button {
    font-size:10px;
    padding-inline:18px;
    min-height:44px;
    gap:17px
  }
  .project-form .form-local-note {
    font-size:7px
  }
  .contact-process {
    grid-template-columns:1fr;
    gap:0;
    padding-top:31px;
    margin-top:5px
  }
  .contact-process>.eyebrow,.contact-process>h2 {
    grid-column:1;
    grid-row:auto
  }
  .contact-process>h2 {
    font-size:35px;
    line-height:1.2;
    margin-top:15px
  }
  .contact-process>h2 br {
    display:none
  }
  .contact-process>ol {
    grid-column:1;
    grid-row:auto;
    margin-top:29px;
    grid-template-columns:repeat(3,1fr);
    gap:24px
  }
  .contact-process h3 {
    font-size:21px
  }
  .contact-process p {
    font-size:10px
  }
  .contact-process li>span {
    font-size:9px;
    padding-top:2px
  }
  .contact-direct {
    grid-template-columns:1fr 1fr;
    gap:30px 25px;
    padding:35px 0 45px
  }
  .contact-direct>div {
    grid-column:1/-1
  }
  .contact-direct h2 {
    font-size:46px
  }
  .contact-direct>a {
    gap:17px;
    font-size:12px
  }
  .contact-direct strong {
    font-size:12px
  }
  .contact-direct a>.icon {
    width:25px;
    height:25px
  }
  .contact-direct a>.arrow {
    width:16px
  }
  .brief-result {
    padding:24px
  }
  .brief-result h2 {
    font-size:27px
  }
  .brief-result>p {
    font-size:10px
  }
  .brief-result pre {
    font-size:9px
  }
  .brief-actions .button {
    font-size:9px
  }
  .error-hero {
    padding:40px 0 30px
  }
  .error-hero h1 {
    font-size:66px;
    max-width:100%;
    margin-top:22px
  }
  .error-hero>p {
    font-size:14px;
    max-width:570px;
    margin-top:24px
  }
  .error-note {
    display:none
  }
  .error-route {
    min-height:300px;
    margin-top:10px;
    margin-bottom:40px;
    padding-left:8px
  }
  .error-number {
    font-size:132px;
    margin-top:100px
  }
  .route-recovery {
    width:260px
  }
  .route-recovery>a {
    font-size:11px;
    padding:16px 18px;
    gap:15px
  }
  .route-recovery>.eyebrow {
    font-size:7px
  }
  .demo-disclosure {
    font-size:9px
  }
  .toast {
    font-size:11px;
    padding:12px 17px;
    bottom:17px
  }
  dialog {
    padding:32px;
    max-height:calc(100dvh - 36px)
  }
  #dialog-body>h2 {
    font-size:29px
  }
  .detail-list>div {
    font-size:11px
  }
  #dialog-body .ui-table {
    font-size:10px
  }
}
@media(max-width:480px) {
  .container,.header-inner,.footer-bottom {
    width:calc(100% - 36px)
  }
  .header-inner {
    height:72px;
    gap:12px
  }
  .wordmark {
    font-size:20px
  }
  .wordmark>span {
    margin-left:3px
  }
  .header-right {
    gap:11px
  }
  .header-cta {
    display:none
  }
  .language-switch {
    gap:8px
  }
  .language-switch a {
    font-size:8px
  }
  .menu-toggle {
    width:30px;
    height:34px
  }
  .primary-nav {
    top:72px;
    padding-inline:18px
  }
  .portfolio-hero {
    padding-top:35px;
    padding-bottom:24px
  }
  .portfolio-hero h1 {
    font-size:61px;
    line-height:1.09;
    letter-spacing:-.07em
  }
  .portfolio-hero .eyebrow {
    font-size:7px;
    letter-spacing:.14em;
    margin-bottom:19px
  }
  .hero-subtitle {
    font-size:15px;
    line-height:1.65;
    letter-spacing:-.025em;
    margin-top:17px
  }
  .portfolio-toolbar {
    gap:19px;
    margin-bottom:21px
  }
  .filter-list {
    gap:7px 6px
  }
  .filter-button {
    padding:8px 12px;
    font-size:9px
  }
  .work-count {
    font-size:8px;
    gap:9px
  }
  .work-count .eyebrow {
    font-size:6px;
    line-height:1.5;
    letter-spacing:.09em
  }
  .count-line {
    margin-inline:3px
  }
  .case-grid {
    gap:17px
  }
  .case-card,.featured-grid .case-card {
    height:562px;
    display:flex;
    flex-direction:column;
    border-radius:7px
  }
  .case-card-copy,.card-analytics .case-card-copy,.card-integrations .case-card-copy,.card-monitoring .case-card-copy,.card-automation .case-card-copy,.featured-grid .card-analytics .case-card-copy {
    padding:23px 24px 0;
    width:100%;
    height:auto;
    flex-shrink:0
  }
  .case-number {
    font-size:10px
  }
  .case-card h3,.featured-grid .case-card h3 {
    font-size:30px;
    line-height:1.16;
    letter-spacing:-.055em;
    margin:16px 0 12px;
    max-width:285px;
    min-height:0
  }
  .case-card-copy>p {
    font-size:11px;
    line-height:1.75;
    max-width:285px;
    margin-bottom:14px;
    min-height:0
  }
  .case-card .text-link {
    font-size:10px;
    gap:12px;
    margin:0
  }
  .case-tags {
    position:absolute;
    right:19px;
    top:23px;
    max-width:205px;
    justify-content:flex-end;
    gap:4px;
    margin-top:0;
    font-size:6px
  }
  .case-tags span {
    padding:4px 7px
  }
  .case-card .card-note {
    display:none
  }
  .case-card>.route-line {
    left:0;
    top:115px;
    width:100%;
    height:390px;
    z-index:1;
    opacity:.8
  }
  .case-card .case-card-visual {
    position:absolute;
    top:auto;
    left:21px;
    right:21px;
    bottom:-23px;
    height:280px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    transform:none!important;
    z-index:2
  }
  .case-card .preview-interface {
    max-width:400px
  }
  .case-card .is-compact .ui-main {
    padding:18px
  }
  .case-card .is-compact .ui-topbar>strong {
    font-size:14px
  }
  .card-crm .case-card-visual {
    left:20px;
    right:-27px;
    bottom:-21px;
    height:293px
  }
  .card-crm .is-compact .ui-sidebar {
    width:82px;
    display:flex;
    padding:17px 9px
  }
  .card-crm .is-compact .ui-sidebar .ui-brand {
    font-size:8px
  }
  .card-crm .is-compact .ui-sidebar .ui-navigation>span {
    font-size:7px;
    gap:7px
  }
  .card-crm .is-compact .ui-main {
    padding:18px 15px
  }
  .card-crm .is-compact .ui-summary {
    margin-bottom:15px
  }
  .card-crm .is-compact .ui-summary>strong {
    font-size:20px
  }
  .card-crm .is-compact .kanban {
    min-width:290px;
    gap:8px
  }
  .card-crm .is-compact .kanban-title {
    font-size:8px
  }
  .card-crm .is-compact .deal-card>strong {
    font-size:8px
  }
  .card-crm .is-compact .deal-amount {
    font-size:7px
  }
  .card-analytics .case-card-visual {
    left:22px;
    right:22px;
    bottom:19px;
    height:264px;
    align-items:center
  }
  .card-analytics .is-compact .ui-main {
    padding:18px 20px
  }
  .card-analytics .is-compact .ui-topbar {
    margin-bottom:10px
  }
  .card-analytics .is-compact .analytics-total {
    margin:4px 0 2px
  }
  .card-analytics .is-compact .analytics-total>strong {
    font-size:27px
  }
  .card-analytics .is-compact .ui-pill {
    display:inline-flex;
    font-size:6px
  }
  .card-analytics .is-compact .analytics-total .ui-pill {
    font-size:5px
  }
  .card-analytics .is-compact .bar-chart {
    height:86px;
    gap:6px
  }
  .card-analytics .is-compact .analytics-kpis {
    margin-top:13px;
    gap:8px
  }
  .card-analytics .is-compact .analytics-kpis>div {
    padding:9px;
    gap:4px
  }
  .card-analytics .is-compact .analytics-kpis strong {
    font-size:18px
  }
  .card-analytics .is-compact .analytics-kpis small {
    font-size:7px
  }
  .card-integrations .case-card-visual {
    left:22px;
    right:22px;
    bottom:12px;
    height:272px
  }
  .card-integrations .is-compact .integration-map {
    height:263px;
    max-width:335px
  }
  .card-integrations .is-compact .integration-node {
    height:43px;
    width:43px
  }
  .card-integrations .is-compact .hub-core {
    height:63px;
    width:63px
  }
  .card-integrations .is-compact .hub-core>.x-symbol {
    font-size:40px
  }
  .card-integrations .is-compact .integration-node>.icon {
    width:23px;
    height:23px
  }
  .card-bot .case-card-visual {
    left:30px;
    right:30px;
    bottom:-99px;
    height:369px
  }
  .card-bot .is-compact .chat-messages {
    gap:9px;
    padding:14px 13px
  }
  .card-bot .is-compact .chat-header {
    padding:14px
  }
  .card-bot .is-compact .chat-header strong {
    font-size:11px
  }
  .card-bot .is-compact .chat-header small {
    font-size:7px
  }
  .card-bot .is-compact .chat-bubble {
    font-size:9px;
    padding:9px 11px
  }
  .card-bot .is-compact .chat-options .ui-button {
    font-size:8px;
    min-height:27px
  }
  .card-monitoring .case-card-visual {
    left:20px;
    right:20px;
    bottom:18px;
    height:252px;
    align-items:center
  }
  .card-monitoring .is-compact .ui-main {
    padding:20px
  }
  .card-monitoring .is-compact .health-head {
    gap:10px;
    padding-bottom:17px
  }
  .card-monitoring .is-compact .health-head strong {
    font-size:9px
  }
  .card-monitoring .is-compact .service-row {
    grid-template-columns:1fr .7fr .8fr 32px;
    gap:8px;
    font-size:7px;
    padding:11px 0
  }
  .card-monitoring .is-compact .service-status {
    font-size:6px
  }
  .card-monitoring .is-compact .sparkline {
    display:block;
    height:19px
  }
  .card-monitoring .is-compact .service-row strong {
    font-size:7px
  }
  .card-automation .case-card-visual {
    left:24px;
    right:24px;
    bottom:18px;
    height:270px;
    align-items:center
  }
  .card-automation .is-compact .job-row {
    padding:16px 0;
    gap:10px
  }
  .card-automation .is-compact .job-row strong {
    font-size:10px
  }
  .card-automation .is-compact .job-row small {
    font-size:8px
  }
  .card-automation .is-compact .job-icon {
    height:29px;
    width:29px
  }
  .card-reports .case-card-visual {
    left:40px;
    right:32px;
    bottom:-115px;
    height:380px;
    transform:rotate(3deg)!important
  }
  .card-reports .is-compact .report-paper {
    padding:25px
  }
  .card-reports .is-compact .report-paper>h3 {
    font-size:29px
  }
  .card-reports .is-compact .report-metric>strong {
    font-size:30px
  }
  .card-catalog .case-card-visual {
    left:18px;
    right:-21px;
    bottom:-12px;
    height:279px
  }
  .card-catalog .is-compact .ui-main {
    padding:17px 15px
  }
  .card-catalog .is-compact .catalog-table {
    min-width:0;
    white-space:nowrap
  }
  .card-catalog .is-compact .ui-table td {
    padding:11px 5px
  }
  .card-catalog .is-compact .ui-table th {
    padding:8px 5px
  }
  .card-catalog .is-compact .product-name {
    font-size:8px
  }
  .card-catalog .is-compact .product-name>.product-thumb {
    width:18px
  }
  .card-deployment .case-card-visual {
    left:24px;
    right:24px;
    bottom:18px;
    height:266px;
    align-items:center
  }
  .card-deployment .is-compact .build-step {
    font-size:9px;
    padding:11px 0
  }
  .card-deployment .is-compact .build-meta {
    padding-bottom:14px
  }
  .card-workspace .case-card-visual {
    left:23px;
    right:23px;
    bottom:0;
    height:285px
  }
  .card-workspace .is-compact .ui-main {
    padding:20px
  }
  .card-workspace .is-compact .workspace-kpis {
    margin-bottom:20px;
    gap:9px
  }
  .card-workspace .is-compact .workspace-kpis>div {
    padding:12px 10px
  }
  .card-workspace .is-compact .workspace-kpis strong {
    font-size:23px
  }
  .card-workspace .is-compact .workspace-kpis small {
    font-size:7px
  }
  .card-workspace .is-compact .task-row {
    padding:12px 0
  }
  .card-workspace .is-compact .task-row strong {
    font-size:8px
  }
  .portfolio-disclosure {
    font-size:9px;
    gap:8px;
    margin-top:19px
  }
  .portfolio-disclosure>.icon {
    width:13px;
    height:13px
  }
  .cta-section {
    grid-template-columns:1fr;
    gap:22px;
    padding:44px 0
  }
  .cta-section>div {
    grid-column:1
  }
  .cta-section h2 {
    font-size:38px;
    margin-top:15px;
    line-height:1.19
  }
  .cta-section p {
    font-size:12px;
    max-width:345px
  }
  .cta-section .button {
    justify-self:start;
    min-height:46px;
    font-size:11px;
    gap:25px
  }
  .footer-inner {
    grid-template-columns:132px 1fr;
    min-height:0
  }
  .footer-art {
    height:135px;
    grid-column:1;
    grid-row:1/3
  }
  .footer-art img {
    object-position:27% center;
    filter:contrast(.92)
  }
  .footer-art>span {
    right:7px;
    top:22px;
    width:60px;
    font-size:5px;
    color:#172113
  }
  .footer-nav {
    grid-column:2;
    grid-row:1;
    gap:11px 17px;
    font-size:8px;
    padding:19px 18px 6px;
    align-content:start
  }
  .footer-contact {
    grid-column:2;
    grid-row:2;
    border-left:0;
    padding:5px 18px 17px;
    gap:5px;
    font-size:8px;
    align-self:start
  }
  .footer-contact>.eyebrow {
    display:none
  }
  .footer-contact .arrow {
    height:11px;
    width:11px
  }
  .footer-bottom {
    padding:18px 0;
    display:grid;
    grid-template-columns:1fr;
    font-size:8px;
    gap:12px
  }
  .footer-bottom>div {
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    font-size:8px
  }
  .home-hero {
    padding-top:35px;
    gap:18px
  }
  .home-hero-copy .eyebrow {
    font-size:7px;
    letter-spacing:.12em;
    margin-bottom:20px
  }
  .home-hero h1 {
    font-size:72px;
    line-height:1.06;
    letter-spacing:-.07em
  }
  .home-hero-copy>p {
    font-size:13px;
    line-height:1.85;
    margin-top:23px
  }
  .home-hero .hero-actions {
    gap:18px;
    flex-wrap:wrap;
    margin-top:24px
  }
  .home-hero .hero-actions>.button {
    font-size:11px;
    min-height:47px;
    padding-inline:23px;
    gap:16px
  }
  .home-hero .secondary-link {
    font-size:9px;
    gap:8px
  }
  .play-circle {
    height:29px;
    width:29px
  }
  .play-circle>.icon {
    height:13px;
    width:13px
  }
  .hero-signoff {
    font-size:6px;
    gap:10px;
    margin-top:24px;
    letter-spacing:.08em
  }
  .hero-signoff .small-x {
    font-size:24px
  }
  .home-system-visual {
    height:350px;
    margin-top:3px
  }
  .hero-note {
    font-size:19px;
    top:4px;
    left:0;
    max-width:126px
  }
  .chaos-inputs {
    width:135px;
    left:0;
    top:77px;
    gap:13px
  }
  .input-fragment {
    min-height:47px;
    font-size:7px;
    padding:9px 8px;
    gap:7px;
    border-radius:5px
  }
  .fragment-icon {
    height:21px;
    width:21px;
    border-radius:4px
  }
  .fragment-icon>.icon {
    width:15px;
    height:15px
  }
  .input-fragment>i {
    height:4px;
    width:4px
  }
  .hero-system-panel {
    left:117px;
    right:-3px;
    top:105px;
    transform:rotate(2deg)
  }
  .hero-system-panel .ui-workspace {
    min-height:0
  }
  .hero-system-panel .is-compact .ui-main {
    padding:17px 13px
  }
  .hero-system-panel .is-compact .ui-topbar {
    margin-bottom:13px
  }
  .hero-system-panel .is-compact .ui-topbar>strong {
    font-size:14px
  }
  .hero-system-panel .is-compact .workspace-greeting {
    font-size:6px;
    margin-bottom:14px
  }
  .hero-system-panel .is-compact .workspace-kpis {
    margin-top:14px;
    gap:5px;
    margin-bottom:16px
  }
  .hero-system-panel .is-compact .workspace-kpis>div {
    padding:10px 7px;
    gap:4px
  }
  .hero-system-panel .is-compact .workspace-kpis strong {
    font-size:18px
  }
  .hero-system-panel .is-compact .workspace-kpis small {
    font-size:5px
  }
  .hero-system-panel .is-compact .ui-subhead {
    font-size:7px
  }
  .hero-system-panel .is-compact .task-row {
    padding:8px 0;
    min-height:34px;
    gap:5px
  }
  .hero-system-panel .is-compact .task-row>input {
    height:8px;
    width:8px
  }
  .hero-system-panel .is-compact .task-row strong {
    font-size:6px
  }
  .hero-system-panel .is-compact .task-row small {
    font-size:5px;
    margin-top:3px
  }
  .hero-system-panel .is-compact .task-row time {
    font-size:5px
  }
  .system-connected {
    padding:8px 11px;
    font-size:6px;
    gap:6px
  }
  .system-connected>.status-dot {
    width:4px;
    height:4px
  }
  .technology-strip {
    padding:24px 0 25px
  }
  .technology-strip>.eyebrow {
    font-size:7px;
    letter-spacing:.1em;
    max-width:300px
  }
  .technology-strip>div {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:17px 14px;
    margin-top:20px
  }
  .technology-strip>div>span {
    font-size:9px;
    gap:6px;
    white-space:nowrap
  }
  .technology-strip>div>span>.icon {
    width:15px;
    height:15px
  }
  .section {
    padding:45px 0
  }
  .section-heading {
    gap:18px;
    margin-bottom:25px
  }
  .section-heading h2 {
    font-size:35px;
    line-height:1.2
  }
  .section-heading>p {
    font-size:11px;
    line-height:1.9
  }
  .section-heading .eyebrow {
    font-size:7px;
    letter-spacing:.13em;
    margin-bottom:16px
  }
  .section-heading>.text-link {
    font-size:10px
  }
  .problem-grid {
    grid-template-columns:1fr;
    gap:0
  }
  .problem-grid article {
    padding:21px 0;
    border-right:0;
    border-bottom:1px solid var(--line);
    display:grid;
    grid-template-columns:40px 1fr;
    gap:0 18px
  }
  .problem-grid article:first-child {
    padding-top:8px
  }
  .problem-grid article>.service-icon {
    grid-column:1;
    grid-row:1/3;
    margin-top:3px;
    width:34px;
    height:34px;
    border-radius:7px
  }
  .problem-grid article>.service-icon>.icon {
    width:20px;
    height:20px
  }
  .problem-grid h3 {
    grid-column:2;
    font-size:25px;
    margin-top:0;
    padding-right:27px
  }
  .problem-grid p {
    grid-column:2;
    margin-top:11px;
    max-width:none;
    font-size:11px;
    line-height:1.8
  }
  .problem-no {
    right:0;
    top:26px;
    font-size:8px
  }
  .problem-grid article:first-child .problem-no {
    top:12px
  }
  .problem-grid article:last-child {
    padding-bottom:0
  }
  .services-grid {
    grid-template-columns:1fr;
    gap:14px
  }
  .service-card {
    padding:24px;
    display:grid;
    grid-template-columns:34px 1fr;
    gap:0 20px
  }
  .service-card .service-icon {
    grid-column:1;
    grid-row:1/3;
    width:28px;
    margin-top:2px
  }
  .service-card h3 {
    grid-column:2;
    font-size:26px;
    margin-top:0
  }
  .service-card p {
    grid-column:2;
    min-height:0;
    margin:12px 0 23px;
    font-size:11px;
    max-width:250px
  }
  .service-card>div {
    grid-column:1/-1;
    font-size:8px;
    padding-top:14px
  }
  .demo-tabs>button {
    font-size:9px;
    gap:7px;
    padding:13px 7px
  }
  .demo-tabs .icon {
    width:14px;
    height:14px
  }
  .demo-window-bar {
    height:35px;
    padding:0 13px;
    gap:8px;
    font-size:7px
  }
  .demo-indicator {
    font-size:6px;
    gap:5px
  }
  .demo-indicator .icon {
    width:9px;
    height:9px
  }
  .window-dots {
    gap:4px
  }
  .window-dots>i {
    width:4px;
    height:4px
  }
  .live-demo .ui-main {
    padding:19px 15px
  }
  .live-demo .ui-topbar>strong {
    font-size:17px
  }
  .live-demo .ui-topbar {
    gap:10px
  }
  .live-demo .ui-button {
    font-size:9px;
    padding:7px 9px;
    min-height:32px
  }
  .live-demo .ui-crumb {
    font-size:8px;
    margin-bottom:21px
  }
  .live-demo .ui-summary>strong {
    font-size:23px
  }
  .live-demo .ui-summary>strong>small {
    font-size:9px
  }
  .live-demo .ui-summary>span {
    font-size:8px
  }
  .live-demo .kanban {
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    gap:12px;
    padding:0 0 11px;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin
  }
  .live-demo .kanban-column {
    min-width:205px;
    flex:0 0 70%;
    padding:13px 10px 10px;
    scroll-snap-align:start
  }
  .live-demo .kanban-title {
    font-size:11px
  }
  .live-demo .column-total {
    font-size:11px
  }
  .live-demo .deal-card {
    padding:13px 12px
  }
  .live-demo .deal-card>strong {
    font-size:12px
  }
  .live-demo .deal-source {
    font-size:9px
  }
  .live-demo .deal-amount {
    font-size:11px
  }
  .live-demo .deal-task {
    font-size:10px;
    line-height:1.7;
    margin-top:15px
  }
  .live-demo .deal-bottom>small {
    font-size:8px
  }
  .live-demo .ui-bottom-note {
    font-size:8px;
    line-height:1.7;
    gap:9px;
    margin-top:16px
  }
  .live-demo .ui-analytics .ui-main {
    padding:20px 16px
  }
  .live-demo .analytics-total {
    gap:10px;
    flex-wrap:wrap
  }
  .live-demo .analytics-total>strong {
    font-size:29px
  }
  .live-demo .analytics-total .ui-pill {
    font-size:6px
  }
  .live-demo .ui-select-label select {
    font-size:9px;
    padding:7px 8px
  }
  .live-demo .ui-controls {
    gap:6px
  }
  .live-demo .ui-controls .ui-button>.icon {
    width:12px;
    height:12px
  }
  .live-demo .bar-chart {
    height:135px;
    gap:6px
  }
  .live-demo .chart-axis {
    font-size:7px
  }
  .live-demo .analytics-kpis {
    gap:7px;
    margin-top:20px
  }
  .live-demo .analytics-kpis>div {
    padding:12px 11px;
    gap:7px
  }
  .live-demo .analytics-kpis strong {
    font-size:20px
  }
  .live-demo .analytics-kpis small {
    font-size:8px
  }
  .live-demo .analytics-details {
    grid-template-columns:1fr;
    gap:8px
  }
  .live-demo .analytics-details .ui-subhead {
    font-size:11px
  }
  .live-demo .product-row {
    font-size:10px;
    gap:10px
  }
  .live-demo .product-row>strong {
    font-size:10px
  }
  .live-demo .channel-row {
    grid-template-columns:85px 1fr 29px;
    gap:12px;
    font-size:10px
  }
  .live-demo .ui-monitoring .ui-main,.live-demo .ui-deployment .ui-main {
    padding:23px 18px
  }
  .live-demo .health-head {
    gap:11px;
    padding-bottom:20px
  }
  .live-demo .health-head strong {
    font-size:11px
  }
  .live-demo .health-head small {
    font-size:8px
  }
  .live-demo .health-icon {
    height:33px;
    width:33px
  }
  .live-demo .service-row {
    grid-template-columns:1fr .8fr 42px;
    gap:8px;
    padding:16px 0;
    font-size:10px
  }
  .live-demo .service-row>.sparkline {
    display:none
  }
  .live-demo .service-row>span:first-child {
    gap:7px
  }
  .live-demo .service-row>span:first-child>.icon {
    width:13px;
    height:13px
  }
  .live-demo .service-status {
    font-size:8px;
    gap:5px
  }
  .live-demo .service-row strong {
    font-size:9px
  }
  .live-demo .monitor-actions {
    align-items:flex-start;
    flex-direction:column;
    gap:10px
  }
  .live-demo .monitor-actions>.ui-button {
    font-size:10px;
    padding-inline:14px
  }
  .live-demo .monitor-actions>span {
    font-size:8px
  }
  .incident-detail>h3 {
    font-size:17px;
    line-height:1.5
  }
  .incident-detail>p {
    font-size:10px;
    line-height:1.8
  }
  .incident-timeline {
    font-size:9px;
    line-height:1.7
  }
  .live-demo .ui-tabs>.ui-button {
    padding:7px 13px;
    font-size:10px
  }
  .price-card {
    display:flex;
    padding:26px;
    gap:0
  }
  .price-name {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    min-height:0;
    width:100%;
    align-items:center;
    gap:15px
  }
  .price-name h3 {
    font-size:31px
  }
  .price-name>span {
    font-size:7px;
    padding:5px 8px
  }
  .price-card>p {
    font-size:12px;
    line-height:1.7;
    margin-top:17px;
    max-width:320px
  }
  .price {
    margin-top:21px
  }
  .price>strong {
    font-size:49px
  }
  .price>small {
    font-size:10px
  }
  .price>strong>span {
    font-size:28px
  }
  .price-time {
    font-size:10px;
    margin-top:4px
  }
  .price-card ul {
    font-size:11px;
    margin:25px 0;
    gap:12px
  }
  .price-card .button {
    margin-top:0;
    font-size:11px;
    min-height:45px
  }
  .process-grid {
    grid-template-columns:1fr 1fr;
    gap:30px 27px;
    margin-top:32px
  }
  .process-number {
    width:30px;
    height:30px;
    font-size:9px;
    margin-bottom:16px
  }
  .process-grid h3 {
    font-size:13px
  }
  .process-grid p {
    font-size:10px;
    line-height:1.85
  }
  .approach-statement {
    grid-template-columns:34px 1fr;
    gap:20px;
    padding-top:30px
  }
  .approach-statement>.x-symbol {
    font-size:57px
  }
  .approach-statement>p {
    font-size:25px;
    line-height:1.35
  }
  .faq-section {
    gap:24px
  }
  .faq-section h2 {
    font-size:35px
  }
  .faq-section>div:first-child>.eyebrow {
    font-size:8px
  }
  .faq-section>div:first-child>.text-link {
    font-size:10px
  }
  .faq-list details {
    padding:20px 0
  }
  .faq-list summary {
    font-size:12px;
    line-height:1.8;
    gap:15px
  }
  .faq-list summary>.icon {
    width:17px;
    height:17px
  }
  .faq-list p {
    font-size:11px;
    line-height:1.9;
    margin-top:15px
  }
  .breadcrumbs {
    font-size:8px;
    gap:8px;
    padding-top:18px
  }
  .case-hero {
    padding:31px 0 35px;
    gap:22px
  }
  .case-hero h1,.case-hero--analytics h1 {
    font-size:47px;
    line-height:1.14;
    letter-spacing:-.06em;
    overflow-wrap:normal
  }
  .case-hero-copy>.eyebrow {
    font-size:7px;
    gap:12px;
    letter-spacing:.12em;
    margin-bottom:20px
  }
  .case-hero-copy>.eyebrow>.case-number {
    font-size:9px
  }
  .case-hero-copy>p {
    font-size:12px;
    line-height:1.9;
    margin-top:22px
  }
  .case-hero .hero-actions {
    gap:19px;
    margin-top:24px
  }
  .case-hero .hero-actions .button {
    font-size:10px;
    min-height:44px;
    padding-inline:20px;
    gap:17px
  }
  .case-hero .hero-actions .text-link {
    font-size:10px;
    gap:10px
  }
  .case-hero-art {
    min-height:325px;
    padding:12px 0 0;
    overflow:visible;
    margin-top:5px
  }
  .case-hero-art>.route-line {
    left:-9px;
    width:calc(100% + 18px);
    top:-10px;
    overflow:hidden
  }
  .case-hero-preview {
    transform:none;
    max-width:100%
  }
  .case-hero-preview>.preview-interface {
    border:1px solid #dbe1d1
  }
  .case-hero-preview .product-ui {
    border:0
  }
  .case-hero-preview .is-compact .ui-main {
    padding:18px 16px
  }
  .case-hero-preview .is-compact .ui-sidebar {
    width:70px;
    padding:16px 7px;
    display:flex
  }
  .case-hero-preview .is-compact .ui-brand {
    font-size:7px;
    gap:4px;
    white-space:nowrap
  }
  .case-hero-preview .is-compact .ui-brand>.x-symbol {
    width:14px;
    height:14px;
    font-size:16px
  }
  .case-hero-preview .is-compact .ui-navigation>span {
    font-size:6px;
    gap:5px;
    padding:11px 3px
  }
  .case-hero-preview .is-compact .ui-navigation .icon {
    height:10px;
    width:10px
  }
  .case-hero-preview .is-compact .ui-settings {
    font-size:6px;
    gap:4px;
    padding-inline:3px
  }
  .case-hero-preview .is-compact .ui-settings .icon {
    height:10px;
    width:10px
  }
  .case-hero-preview .is-compact .ui-topbar>strong {
    font-size:14px
  }
  .case-hero-preview .is-compact .ui-summary>strong {
    font-size:19px
  }
  .case-hero-preview .is-compact .ui-summary>span {
    font-size:7px
  }
  .case-hero-preview .is-compact .kanban {
    min-width:278px;
    gap:7px
  }
  .case-hero-preview .is-compact .kanban-title {
    font-size:7px
  }
  .case-hero-preview .is-compact .column-total {
    font-size:8px
  }
  .case-hero-preview .is-compact .deal-card {
    padding:9px 7px
  }
  .case-hero-preview .is-compact .deal-card>strong {
    font-size:8px
  }
  .case-hero-preview .is-compact .deal-amount {
    font-size:7px
  }
  .case-hero-preview .is-compact .deal-bottom {
    margin-top:13px
  }
  .preview-caption {
    font-size:6px;
    letter-spacing:.1em;
    padding-top:10px
  }
  .case-hero-note {
    font-size:18px;
    bottom:-18px;
    right:7px;
    display:none
  }
  .case-metadata {
    gap:23px 20px;
    padding-top:24px;
    grid-template-columns:1fr 1fr
  }
  .case-metadata>div {
    padding-right:18px
  }
  .case-metadata .eyebrow {
    font-size:7px;
    letter-spacing:.12em
  }
  .case-metadata p {
    font-size:10px;
    line-height:1.8;
    margin-top:8px
  }
  .case-hero--analytics .case-hero-art {
    min-height:295px;
    padding:10px 0 0;
    width:100%
  }
  .case-hero--analytics .is-compact .ui-main {
    padding:20px
  }
  .case-hero--analytics .case-hero-preview .is-compact .bar-chart {
    height:110px
  }
  .case-hero--analytics .is-compact .analytics-total>strong {
    font-size:26px
  }
  .case-hero--analytics .is-compact .analytics-kpis {
    gap:7px;
    margin-top:15px
  }
  .case-hero--analytics .is-compact .analytics-kpis>div {
    flex-direction:column;
    align-items:flex-start;
    padding:10px;
    gap:7px
  }
  .case-hero--analytics .is-compact .analytics-kpis small {
    font-size:7px
  }
  .case-hero--analytics .is-compact .analytics-kpis strong {
    font-size:17px
  }
  .case-hero--integrations .case-hero-art {
    min-height:320px;
    padding:5px 10px
  }
  .case-hero--integrations .preview-interface {
    border:0
  }
  .case-hero--integrations .case-hero-preview {
    max-width:100%
  }
  .case-hero--integrations .is-compact .integration-map {
    height:290px
  }
  .case-hero--integrations .is-compact .integration-node {
    height:44px;
    width:44px
  }
  .case-hero--integrations .is-compact .integration-node>.icon {
    width:23px;
    height:23px
  }
  .case-hero--integrations .is-compact .integration-node>small {
    font-size:6px
  }
  .case-hero--integrations .is-compact .hub-core {
    height:65px;
    width:65px
  }
  .case-hero--integrations .is-compact .hub-core>.x-symbol {
    font-size:41px
  }
  .case-hero--integrations .is-compact .hub-core>small {
    font-size:5px
  }
  .case-hero--bot .case-hero-art {
    min-height:447px;
    padding:12px 27px;
    max-width:360px
  }
  .case-hero--bot .case-hero-preview {
    transform:rotate(2deg)
  }
  .case-hero--bot .case-hero-preview>.preview-interface {
    border:0
  }
  .case-hero--bot .is-compact .chat-shell {
    min-height:395px
  }
  .case-hero--bot .is-compact .chat-header strong {
    font-size:11px
  }
  .case-hero--bot .is-compact .chat-header small {
    font-size:7px
  }
  .case-hero--bot .is-compact .chat-messages {
    padding:16px 13px;
    gap:10px
  }
  .case-hero--bot .is-compact .chat-bubble {
    font-size:9px;
    padding:9px 12px
  }
  .case-hero--bot .is-compact .chat-options .ui-button {
    font-size:8px
  }
  .case-bot .live-demo>[data-demo] {
    padding:17px 13px
  }
  .case-bot .live-demo .ui-bot,.case-bot .live-demo .chat-shell {
    min-height:515px
  }
  .chat-header {
    padding:15px 14px;
    gap:9px
  }
  .chat-header strong {
    font-size:11px
  }
  .chat-header small {
    font-size:7px
  }
  .chat-messages {
    padding:18px 13px;
    max-height:500px;
    gap:11px
  }
  .chat-bubble {
    font-size:10px;
    padding:11px 12px
  }
  .chat-options .ui-button {
    font-size:10px;
    min-height:37px;
    padding:8px!important
  }
  .chat-footer {
    padding:13px 12px
  }
  .chat-footer .ui-button {
    font-size:9px
  }
  .case-hero--monitoring .case-hero-art {
    min-height:330px;
    padding:10px 0
  }
  .case-hero--monitoring .preview-interface,.case-hero--deployment .preview-interface {
    border:0
  }
  .case-hero--monitoring .is-compact .ui-main {
    padding:20px 16px
  }
  .case-hero--monitoring .is-compact .health-head {
    padding:13px 0 21px
  }
  .case-hero--monitoring .is-compact .health-head strong {
    font-size:10px
  }
  .case-hero--monitoring .is-compact .service-row {
    grid-template-columns:1fr .75fr .8fr 31px;
    gap:8px;
    font-size:8px;
    padding:14px 0
  }
  .case-hero--monitoring .is-compact .service-status {
    font-size:7px
  }
  .case-hero--monitoring .is-compact .service-row strong {
    font-size:8px
  }
  .case-hero--automation .case-hero-art {
    min-height:346px;
    padding:12px 7px
  }
  .case-hero--automation .case-hero-preview .is-compact .job-row {
    padding:20px 0;
    gap:12px;
    grid-template-columns:30px 1fr auto
  }
  .case-hero--automation .is-compact .job-row strong {
    font-size:11px
  }
  .case-hero--automation .is-compact .job-row small {
    font-size:8px
  }
  .case-hero--reports .case-hero-art {
    min-height:478px;
    max-width:335px;
    padding:12px 30px
  }
  .case-hero--reports .case-hero-preview {
    transform:rotate(3deg)
  }
  .case-hero--reports .case-hero-preview>.preview-interface {
    border:0
  }
  .case-hero--reports .is-compact .report-paper {
    min-height:428px;
    padding:24px
  }
  .case-hero--reports .is-compact .report-paper>h3 {
    font-size:28px
  }
  .case-hero--reports .is-compact .report-metric>strong {
    font-size:28px
  }
  .case-hero--catalog .case-hero-art {
    min-height:330px;
    padding:10px 0
  }
  .case-hero--catalog .is-compact .ui-main {
    padding:18px 13px
  }
  .case-hero--catalog .is-compact .ui-table {
    min-width:0;
    font-size:8px
  }
  .case-hero--catalog .is-compact .ui-table th {
    font-size:6px;
    padding:7px 3px
  }
  .case-hero--catalog .is-compact .ui-table td {
    padding:12px 3px
  }
  .case-hero--catalog .is-compact .product-name {
    font-size:8px;
    gap:5px
  }
  .case-hero--catalog .is-compact .product-thumb {
    width:19px;
    transform:scale(.72)
  }
  .case-hero--catalog .is-compact .ui-table .ui-pill {
    font-size:5px;
    padding:3px 4px
  }
  .case-hero--deployment .case-hero-art {
    min-height:351px;
    padding:10px 6px
  }
  .case-hero--deployment .is-compact .build-step {
    font-size:10px;
    padding:14px 0
  }
  .case-hero--deployment .is-compact .build-step small {
    font-size:8px
  }
  .case-hero--deployment .is-compact .build-meta {
    font-size:9px
  }
  .case-hero--workspace .case-hero-art {
    min-height:383px;
    padding:10px 6px
  }
  .case-hero--workspace .case-hero-preview {
    margin-top:43px;
    transform:rotate(-1deg)
  }
  .workspace-time {
    font-size:103px;
    right:8px;
    top:-4px
  }
  .case-hero--workspace .is-compact .workspace-kpis strong {
    font-size:23px
  }
  .case-hero--workspace .is-compact .workspace-kpis small {
    font-size:7px
  }
  .case-hero--workspace .is-compact .task-row strong {
    font-size:8px
  }
  .case-hero--workspace .is-compact .task-row small {
    font-size:6px
  }
  .case-hero--workspace .is-compact .task-row time {
    font-size:7px
  }
  .case-context {
    padding:43px 0;
    gap:28px
  }
  .case-context h2 {
    font-size:31px;
    line-height:1.25
  }
  .case-context .eyebrow {
    font-size:7px
  }
  .before-after {
    grid-template-columns:1fr;
    gap:23px
  }
  .before-label,.after-label {
    font-size:8px;
    gap:8px
  }
  .before-after p {
    font-size:12px;
    margin-top:13px;
    line-height:1.85
  }
  .case-feature {
    padding:45px 0;
    gap:28px
  }
  .case-feature .eyebrow {
    font-size:7px
  }
  .case-feature h2 {
    font-size:32px;
    line-height:1.28;
    margin-top:17px
  }
  .case-feature p {
    font-size:12px;
    line-height:1.85;
    margin-top:19px
  }
  .customer-journey {
    padding:25px 20px
  }
  .journey-inputs {
    gap:9px
  }
  .journey-inputs>span {
    padding:9px 16px;
    font-size:9px
  }
  .journey-track {
    gap:11px;
    margin-top:30px
  }
  .journey-track h3 {
    font-size:8px
  }
  .journey-record {
    padding:14px;
    gap:11px
  }
  .journey-record strong {
    font-size:9px
  }
  .journey-record small {
    font-size:7px
  }
  .journey-record>.icon {
    width:18px;
    height:18px
  }
  .data-equation {
    display:grid;
    grid-template-columns:1fr 21px 1fr;
    gap:12px;
    padding-bottom:15px
  }
  .data-equation>div {
    padding:20px 16px;
    min-height:96px;
    justify-content:center
  }
  .data-equation>div>span {
    font-size:25px
  }
  .data-equation>div>small {
    font-size:8px;
    line-height:1.6
  }
  .data-equation>b {
    justify-self:center
  }
  .data-equation>b:nth-child(4) {
    display:none
  }
  .data-equation>div:nth-child(5) {
    grid-column:1;
    grid-row:2
  }
  .data-equation>b:nth-child(6) {
    grid-column:2;
    grid-row:2
  }
  .data-equation>div:nth-child(7) {
    grid-column:3;
    grid-row:2
  }
  .feature-foot {
    gap:0
  }
  .contract-code>div {
    font-size:8px;
    padding:15px 20px
  }
  .contract-code pre {
    font-size:10px;
    padding:21px;
    line-height:1.9
  }
  .contract-code pre>small {
    font-size:8px
  }
  .conversation-steps {
    grid-template-columns:1fr 1fr;
    gap:15px;
    margin-top:30px
  }
  .conversation-steps>div {
    padding:22px 18px
  }
  .conversation-steps h3 {
    font-size:23px;
    margin-top:18px
  }
  .conversation-steps p {
    font-size:9px;
    line-height:1.6;
    margin-top:21px;
    padding:7px 10px
  }
  .conversation-steps>div:after {
    display:none
  }
  .feature-monitoring {
    padding:26px 21px;
    margin-top:35px;
    gap:26px
  }
  .feature-monitoring h2 {
    font-size:30px
  }
  .feature-monitoring p {
    font-size:11px
  }
  .incident-story {
    padding:20px 16px
  }
  .incident-story>.eyebrow {
    font-size:6px;
    margin-bottom:16px
  }
  .incident-story>div:not(.eyebrow) {
    gap:12px;
    padding:16px 0
  }
  .incident-story>div>span {
    font-size:8px
  }
  .incident-story strong {
    font-size:10px;
    line-height:1.7
  }
  .incident-story small {
    font-size:8px
  }
  .incident-story .icon {
    width:14px;
    height:14px
  }
  .clock-numeral {
    font-size:102px
  }
  .schedule-art {
    padding-bottom:10px
  }
  .schedule-art>.eyebrow {
    font-size:7px;
    margin-bottom:29px
  }
  .scheduled-label {
    font-size:10px;
    padding:15px;
    gap:8px
  }
  .scheduled-label>span {
    font-size:8px
  }
  .scheduled-label>.icon {
    width:14px;
    height:14px
  }
  .report-blocks {
    gap:10px;
    padding-top:10px
  }
  .report-block {
    padding:19px 12px;
    min-height:193px
  }
  .report-block>span {
    font-size:5px;
    letter-spacing:.03em
  }
  .report-block>.icon {
    width:32px;
    height:32px;
    margin:27px 0 17px
  }
  .report-block>small {
    font-size:4px;
    line-height:1.9;
    letter-spacing:.03em
  }
  .report-block .paper-lines {
    gap:5px
  }
  .report-block:nth-child(2) {
    transform:rotate(3deg) translateY(-12px)
  }
  .import-compare {
    padding:23px 20px
  }
  .import-table>div {
    gap:13px;
    font-size:12px;
    padding:15px 0
  }
  .import-table>div:first-child {
    font-size:7px
  }
  .import-table strong {
    font-size:10px
  }
  .import-safety {
    font-size:8px;
    gap:7px
  }
  .version-path {
    padding:23px 18px
  }
  .version-path>div:not(.version-arrow) {
    padding:19px 15px;
    gap:10px
  }
  .version-path>div>.icon {
    width:16px;
    height:16px
  }
  .version-path>div>span {
    font-size:8px
  }
  .version-path strong {
    font-size:13px
  }
  .version-arrow {
    font-size:8px;
    padding:23px 0;
    gap:9px
  }
  .version-arrow>.arrow {
    width:16px;
    height:16px
  }
  .day-story {
    padding-left:20px
  }
  .day-story>div {
    grid-template-columns:79px 1fr;
    gap:17px;
    padding:24px 0
  }
  .day-story>div:before {
    left:-24px;
    top:31px
  }
  .day-story time {
    font-size:25px
  }
  .day-story strong {
    font-size:11px;
    line-height:1.7
  }
  .day-story p {
    font-size:10px;
    line-height:1.9;
    margin-top:7px
  }
  .case-live-section {
    padding:44px 0
  }
  .case-live-section .section-heading {
    gap:17px
  }
  .case-live-section .section-heading h2 {
    font-size:33px;
    line-height:1.25
  }
  .case-live-section .section-heading>p {
    font-size:11px;
    line-height:1.9
  }
  .demo-disclosure {
    font-size:8px;
    line-height:1.9;
    gap:8px;
    margin-top:17px
  }
  .demo-disclosure>.icon {
    width:12px;
    height:12px
  }
  .case-outcomes {
    padding:42px 0 22px;
    gap:24px
  }
  .case-outcomes .eyebrow {
    font-size:7px
  }
  .case-outcomes h2 {
    font-size:34px;
    margin-top:17px
  }
  .outcomes-list>div {
    gap:15px;
    padding:23px 0
  }
  .outcomes-list h3 {
    font-size:12px;
    line-height:1.8
  }
  .outcomes-list>div>span {
    font-size:9px
  }
  .outcomes-list .icon {
    height:17px;
    width:17px
  }
  .case-provenance {
    font-size:8px;
    line-height:1.95;
    padding-bottom:23px
  }
  .next-case {
    gap:17px;
    padding:29px 0
  }
  .next-number {
    font-size:40px;
    min-width:42px
  }
  .next-case h2 {
    font-size:21px;
    line-height:1.35;
    margin-top:10px
  }
  .next-case .eyebrow {
    font-size:6px;
    letter-spacing:.1em
  }
  .next-icon {
    width:37px;
    height:37px
  }
  .next-icon>.arrow {
    width:17px;
    height:17px
  }
  .live-demo .map-side,.live-demo .event-side {
    padding:23px 18px
  }
  .map-side>.integration-map {
    min-height:280px;
    height:280px
  }
  .integration-node {
    height:43px;
    width:43px
  }
  .integration-node>.icon {
    width:22px;
    height:22px
  }
  .integration-node>small {
    font-size:6px
  }
  .hub-core {
    height:68px;
    width:67px
  }
  .hub-core>.x-symbol {
    font-size:39px
  }
  .hub-core>small {
    font-size:5px
  }
  .connection-info {
    gap:8px;
    font-size:8px;
    margin-top:22px
  }
  .connection-info>strong {
    font-size:11px
  }
  .event-row {
    gap:9px;
    grid-template-columns:23px 1fr auto
  }
  .event-icon {
    width:23px;
    height:23px
  }
  .event-row strong {
    font-size:9px
  }
  .event-row small {
    font-size:8px
  }
  .event-row time {
    font-size:7px
  }
  .event-row .ui-pill {
    font-size:6px;
    padding:3px 5px
  }
  .event-code {
    font-size:9px;
    padding:16px;
    line-height:1.9
  }
  .job-row {
    grid-template-columns:28px 1fr auto;
    gap:10px;
    padding:18px 0
  }
  .job-row .job-icon {
    width:28px;
    height:28px
  }
  .job-row .job-icon>.icon {
    height:15px;
    width:15px
  }
  .job-row strong {
    font-size:10px;
    line-height:1.7
  }
  .job-row small {
    font-size:8px;
    line-height:1.7
  }
  .job-row>.ui-button {
    grid-column:2/4;
    justify-self:start;
    margin-top:1px;
    font-size:9px;
    padding-inline:14px;
    min-height:30px
  }
  .schedule-strip {
    padding:17px 14px;
    gap:14px;
    grid-template-columns:1fr 1fr
  }
  .schedule-strip>div:last-child {
    grid-column:1/-1
  }
  .schedule-strip strong {
    font-size:11px
  }
  .schedule-strip span {
    font-size:7px
  }
  .execution-log>div:not(.ui-empty) {
    font-size:9px;
    gap:9px;
    flex-wrap:wrap
  }
  .execution-log code {
    font-size:9px
  }
  .execution-log span {
    font-size:8px
  }
  .live-demo .report-workbench {
    grid-template-columns:1fr
  }
  .report-controls {
    padding:23px 20px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 15px;
    border-right:0;
    border-bottom:1px solid #dce4d1
  }
  .report-controls>.ui-brand {
    grid-column:1/-1;
    font-size:13px;
    margin-bottom:24px
  }
  .report-controls label:not(.ui-checkbox) {
    margin-bottom:18px;
    font-size:8px
  }
  .report-controls>.ui-subhead {
    grid-column:1/-1;
    margin:5px 0 13px;
    font-size:10px
  }
  .report-controls .ui-checkbox {
    font-size:10px;
    margin:8px 0
  }
  .report-controls>.ui-button {
    grid-column:1/-1;
    font-size:10px;
    margin-top:17px;
    min-height:38px
  }
  .report-paper {
    width:calc(100% - 39px);
    max-width:335px;
    min-height:480px;
    padding:26px;
    margin:25px auto
  }
  .report-wordmark {
    font-size:7px
  }
  .report-paper>h3 {
    font-size:30px
  }
  .report-edition {
    font-size:7px
  }
  .report-metric>strong {
    font-size:31px
  }
  .report-metric>span {
    font-size:9px
  }
  .report-metric>small {
    font-size:6px
  }
  .live-demo .paper-chart {
    height:108px
  }
  .paper-stock {
    font-size:9px
  }
  .paper-stock>strong {
    font-size:20px
  }
  .paper-footer {
    font-size:6px
  }
  .live-demo .catalog-table {
    min-width:515px
  }
  .catalog-bulk {
    flex-wrap:wrap;
    gap:13px;
    padding:15px
  }
  .catalog-bulk>strong {
    font-size:10px
  }
  .catalog-bulk>.ui-button {
    font-size:9px;
    margin-left:0;
    width:100%;
    padding:9px 11px
  }
  .catalog-toolbar {
    gap:10px
  }
  .catalog-toolbar .ui-search {
    max-width:80%;
    font-size:9px
  }
  .catalog-toolbar>.ui-search>input {
    font-size:9px
  }
  .catalog-toolbar>span {
    font-size:8px
  }
  .live-demo .ui-deployment .ui-button {
    font-size:9px;
    gap:7px;
    padding:8px 10px
  }
  .build-meta {
    font-size:9px;
    gap:13px;
    line-height:1.8
  }
  .build-meta code {
    font-size:9px
  }
  .build-step {
    font-size:10px;
    gap:11px
  }
  .build-step small {
    font-size:8px
  }
  .build-log {
    font-size:9px;
    line-height:1.9;
    padding:16px
  }
  .live-demo .ui-workspace .ui-topbar {
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:12px
  }
  .live-demo .ui-workspace .ui-topbar>.ui-controls {
    width:100%
  }
  .live-demo .ui-workspace .ui-topbar .ui-search {
    width:100%;
    max-width:none
  }
  .workspace-greeting {
    font-size:9px;
    margin-top:0;
    margin-bottom:21px
  }
  .workspace-kpis {
    gap:8px;
    margin-bottom:22px
  }
  .workspace-kpis>div {
    padding:13px 12px;
    gap:6px
  }
  .workspace-kpis strong {
    font-size:24px
  }
  .workspace-kpis small {
    font-size:7px
  }
  .workspace-columns {
    grid-template-columns:1fr;
    gap:26px
  }
  .task-row {
    flex-wrap:nowrap;
    gap:10px;
    padding:16px 0
  }
  .task-row>span>strong {
    font-size:10px
  }
  .task-row time {
    font-size:8px
  }
  .task-row>span>small {
    font-size:8px
  }
  .document-link {
    font-size:10px;
    padding:13px 0
  }
  .workspace-columns>aside {
    display:grid;
    grid-template-columns:1fr;
    gap:0
  }
  .meeting-card {
    padding:20px
  }
  .meeting-card>strong {
    font-size:13px
  }
  .meeting-card>span,.meeting-card>small {
    font-size:9px
  }
  .sticky-note {
    padding:22px;
    margin-top:21px
  }
  .sticky-note>span {
    font-size:23px
  }
  .sticky-note>textarea {
    font-size:12px;
    min-height:90px
  }
  .sticky-note>small {
    font-size:8px
  }
  .legal-hero {
    padding-top:35px;
    gap:24px;
    padding-bottom:31px
  }
  .legal-hero h1 {
    font-size:58px;
    margin-top:21px;
    line-height:1.17
  }
  .legal-hero>div>p {
    font-size:13px;
    line-height:1.9;
    margin-top:22px
  }
  .legal-hero .eyebrow {
    font-size:7px;
    letter-spacing:.12em
  }
  .legal-date {
    font-size:9px;
    margin-top:21px
  }
  .legal-summary {
    padding:23px 21px;
    grid-template-columns:34px 1fr;
    gap:0 16px
  }
  .legal-summary>.icon {
    max-width:22px;
    max-height:22px;
    padding:6px;
    border-radius:7px
  }
  .legal-summary h3 {
    font-size:22px
  }
  .legal-summary p {
    font-size:10px;
    line-height:1.8;
    margin:10px 0 14px
  }
  .legal-summary .text-link {
    font-size:10px;
    gap:8px
  }
  .legal-principles {
    gap:23px 21px;
    padding:23px 21px
  }
  .legal-principles>div {
    font-size:16px;
    line-height:1.5;
    gap:10px;
    align-items:flex-start
  }
  .legal-principles .icon {
    height:20px;
    width:20px;
    margin-top:1px
  }
  .legal-toc nav {
    grid-template-columns:1fr;
    gap:2px
  }
  .legal-toc nav a {
    padding:6px 0;
    font-size:11px;
    gap:11px;
    line-height:1.7
  }
  .legal-toc nav a>span {
    font-size:9px
  }
  .legal-toc>.eyebrow {
    font-size:8px
  }
  .print-button {
    font-size:10px;
    padding-top:16px;
    margin-top:19px
  }
  .legal-layout,.legal-privacy .legal-layout {
    gap:26px;
    padding-bottom:35px
  }
  .legal-section h2 {
    font-size:29px;
    margin-top:16px;
    line-height:1.35
  }
  .legal-section p,.legal-section li {
    font-size:12px;
    line-height:1.95
  }
  .legal-privacy .legal-hero {
    padding-top:35px;
    margin-bottom:27px
  }
  .page-legal[data-lang=ru] .legal-hero h1,.page-legal[data-lang=ua] .legal-hero h1 {
    font-size:43px;
    line-height:1.22
  }
  .legal-privacy[data-lang=ru] .legal-hero h1,.legal-privacy[data-lang=ua] .legal-hero h1 {
    font-size:34px;
    line-height:1.25;
    overflow-wrap:anywhere
  }
  .legal-privacy .legal-section:first-child>p:first-of-type {
    font-size:13px;
    line-height:1.95
  }
  .contact-heading {
    padding-top:35px;
    min-height:0
  }
  .contact-heading h1 {
    font-size:69px;
    line-height:1.1
  }
  .contact-heading .eyebrow {
    font-size:7px;
    letter-spacing:.12em
  }
  .contact-architecture {
    display:none
  }
  .contact-main {
    display:grid;
    grid-template-columns:1fr;
    gap:27px;
    padding-top:25px;
    padding-bottom:38px
  }
  .contact-intro {
    padding-top:0
  }
  .contact-intro>p {
    font-size:13px;
    line-height:1.85
  }
  .contact-services {
    display:none
  }
  .contact-intro>.handnote {
    display:none
  }
  .contact-form-column {
    width:100%
  }
  .project-form {
    padding:27px 24px;
    border-radius:7px
  }
  .project-form>h2 {
    font-size:31px;
    line-height:1.3
  }
  .project-form>p {
    font-size:11px;
    line-height:1.75;
    margin:14px 0 27px
  }
  .project-form label:not(.consent-label) {
    font-size:8px;
    gap:9px;
    margin-bottom:21px;
    letter-spacing:.1em
  }
  .project-form input:not([type=checkbox]):not([type=hidden]),.project-form select,.project-form textarea {
    font-size:16px;
    /* Prevent iOS automatic zoom on focus. */padding:11px 12px;
    line-height:1.5;
    min-height:45px
  }
  .project-form input::placeholder,.project-form textarea::placeholder {
    font-size:12px
  }
  .project-form select {
    font-size:12px
  }
  .project-form textarea {
    min-height:132px;
    font-size:14px
  }
  .project-form .form-row {
    grid-template-columns:1fr;
    gap:0
  }
  .consent-label {
    font-size:10px;
    gap:10px;
    margin:2px 0 23px;
    line-height:1.8
  }
  .consent-label>input {
    width:14px;
    height:14px;
    margin-top:4px
  }
  .project-form>.button {
    font-size:11px;
    min-height:46px;
    padding-inline:23px;
    gap:21px
  }
  .project-form .form-local-note {
    font-size:9px;
    gap:9px;
    margin-top:23px;
    line-height:1.85
  }
  .form-local-note>.icon {
    height:12px;
    width:12px
  }
  .contact-process {
    margin-top:7px;
    padding-top:29px;
    display:block
  }
  .contact-process>.eyebrow {
    font-size:8px
  }
  .contact-process>h2 {
    font-size:32px;
    line-height:1.3;
    margin-top:17px;
    max-width:330px
  }
  .contact-process>ol {
    display:flex;
    flex-direction:column;
    gap:22px;
    margin-top:28px
  }
  .contact-process li {
    gap:19px
  }
  .contact-process li>span {
    font-size:10px;
    padding-top:3px
  }
  .contact-process h3 {
    font-size:23px;
    margin-bottom:9px
  }
  .contact-process p {
    font-size:11px;
    line-height:1.8;
    max-width:280px
  }
  .contact-direct {
    grid-template-columns:1fr;
    gap:26px;
    padding:32px 0 38px
  }
  .contact-direct h2 {
    font-size:45px;
    line-height:1.3;
    margin-top:17px
  }
  .contact-direct>.eyebrow {
    font-size:8px
  }
  .contact-direct>a {
    gap:18px;
    border-top:1px solid var(--line);
    padding-top:24px
  }
  .contact-direct strong {
    font-size:12px
  }
  .contact-direct span:not(.eyebrow) {
    font-size:9px
  }
  .contact-direct>a>.icon {
    width:25px;
    height:25px
  }
  .brief-result {
    padding:25px 22px
  }
  .brief-result h2 {
    font-size:29px
  }
  .brief-result>p {
    font-size:11px;
    line-height:1.8
  }
  .brief-result pre {
    font-size:10px
  }
  .brief-actions .button {
    min-height:42px;
    font-size:10px;
    gap:15px
  }
  .error-hero {
    padding-top:35px;
    padding-bottom:23px
  }
  .error-hero>.eyebrow {
    font-size:9px
  }
  .error-hero h1 {
    font-size:55px;
    line-height:1.17;
    letter-spacing:-.06em
  }
  .error-hero>p {
    font-size:13px;
    line-height:1.85;
    margin-top:22px
  }
  .error-hero .hero-actions {
    gap:13px;
    margin-top:25px
  }
  .error-hero .button {
    font-size:10px;
    min-height:45px;
    gap:15px;
    padding-inline:20px
  }
  .error-route {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:0 4px;
    gap:22px;
    min-height:430px;
    margin:10px 0 35px
  }
  .error-number {
    font-size:135px;
    line-height:1;
    margin:0 0 -25px 9px
  }
  .error-route>svg {
    height:100%;
    width:calc(100% + 18px);
    left:-9px;
    overflow:hidden
  }
  .route-recovery {
    width:85%;
    max-width:305px;
    margin-left:auto;
    gap:11px
  }
  .route-recovery>a {
    min-height:61px;
    font-size:11px;
    padding:17px 20px;
    gap:18px
  }
  .route-recovery>.eyebrow {
    font-size:6px
  }
  dialog {
    padding:29px 23px;
    max-width:calc(100% - 26px);
    max-height:calc(100dvh - 32px)
  }
  .dialog-close {
    top:13px;
    right:13px;
    width:30px;
    height:30px
  }
  #dialog-body>.eyebrow {
    font-size:7px
  }
  #dialog-body>h2 {
    font-size:28px;
    line-height:1.3;
    margin:20px 0 17px
  }
  .detail-list>div {
    font-size:11px;
    padding:12px 0
  }
  .detail-list dt {
    font-size:9px
  }
  .detail-list dd {
    max-width:66%;
    line-height:1.7
  }
  .dialog-kicker {
    font-size:8px
  }
  .sample-document {
    font-size:12px;
    line-height:1.9
  }
  .sample-document h3 {
    font-size:23px
  }
  .dialog-note {
    font-size:9px!important
  }
  .toast {
    font-size:10px;
    padding:12px 16px;
    line-height:1.8;
    max-width:calc(100% - 26px);
    border-radius:7px
  }
}
@media(max-width:360px) {
  .container,.header-inner,.footer-bottom {
    width:calc(100% - 30px)
  }
  .header-inner {
    gap:9px
  }
  .wordmark {
    font-size:18px
  }
  .header-right {
    gap:8px
  }
  .language-switch {
    gap:7px
  }
  .language-switch a {
    font-size:7px
  }
  .menu-toggle {
    width:26px;
    padding:5px
  }
  .portfolio-hero h1 {
    font-size:53px
  }
  .hero-subtitle {
    font-size:14px
  }
  .filter-button {
    font-size:8px;
    padding:8px 11px
  }
  .case-card,.featured-grid .case-card {
    height:565px
  }
  .case-card-copy,.card-analytics .case-card-copy,.card-integrations .case-card-copy,.card-monitoring .case-card-copy,.card-automation .case-card-copy,.featured-grid .card-analytics .case-card-copy {
    padding-left:21px;
    padding-right:21px
  }
  .case-card h3,.featured-grid .case-card h3 {
    font-size:27px;
    max-width:244px
  }
  .case-card-copy>p {
    font-size:10px;
    line-height:1.8
  }
  .case-tags {
    right:16px;
    top:23px;
    gap:3px;
    max-width:180px;
    font-size:5px
  }
  .case-tags span {
    padding:4px 6px
  }
  .case-card .text-link {
    font-size:10px
  }
  .card-monitoring .is-compact .service-row {
    grid-template-columns:1fr .8fr 30px;
    font-size:7px
  }
  .card-monitoring .is-compact .sparkline {
    display:none
  }
  .card-analytics .is-compact .analytics-kpis strong {
    font-size:16px
  }
  .card-analytics .is-compact .analytics-kpis small {
    font-size:6px
  }
  .card-workspace .is-compact .ui-main {
    padding:18px 16px
  }
  .cta-section h2 {
    font-size:33px
  }
  .cta-section p {
    font-size:11px
  }
  .home-hero h1 {
    font-size:63px
  }
  .home-hero-copy>p {
    font-size:12px
  }
  .home-hero .hero-actions {
    gap:15px
  }
  .home-hero .hero-actions>.button {
    font-size:10px;
    padding-inline:19px;
    gap:14px
  }
  .home-hero .secondary-link {
    font-size:8px
  }
  .home-hero .secondary-link .play-circle {
    display:none
  }
  .home-system-visual {
    height:345px
  }
  .chaos-inputs {
    width:118px;
    top:78px
  }
  .input-fragment {
    font-size:6px;
    gap:5px;
    min-height:43px;
    padding:8px 6px
  }
  .hero-system-panel {
    left:100px;
    right:0;
    top:108px
  }
  .hero-system-panel .is-compact .ui-main {
    padding:16px 10px
  }
  .hero-system-panel .is-compact .ui-topbar>strong {
    font-size:12px
  }
  .hero-system-panel .is-compact .workspace-kpis>div {
    padding:9px 5px
  }
  .technology-strip>div {
    gap:17px 10px
  }
  .technology-strip>div>span {
    font-size:8px
  }
  .technology-strip>div>span>.icon {
    width:13px;
    height:13px
  }
  .section-heading h2 {
    font-size:31px
  }
  .service-card h3 {
    font-size:24px
  }
  .service-card {
    padding:23px 21px;
    gap:0 15px
  }
  .service-card p {
    font-size:11px
  }
  .approach-statement>p {
    font-size:23px
  }
  .faq-section h2 {
    font-size:32px
  }
  .price-card {
    padding:24px
  }
  .price-name>span {
    font-size:6px
  }
  .case-hero h1,.case-hero--analytics h1 {
    font-size:41px
  }
  .case-hero-copy>p {
    font-size:11px
  }
  .case-hero .hero-actions .button {
    font-size:9px;
    padding-inline:17px;
    gap:13px
  }
  .case-hero .hero-actions .text-link {
    font-size:9px;
    gap:7px
  }
  .case-metadata p {
    font-size:9px
  }
  .case-hero--catalog .is-compact .ui-table td {
    padding:12px 2px
  }
  .case-hero--catalog .is-compact .product-name {
    font-size:7px;
    gap:4px
  }
  .case-hero--catalog .is-compact .product-thumb {
    width:15px;
    transform:scale(.64)
  }
  .case-hero--catalog .is-compact .ui-table .ui-pill {
    font-size:4px
  }
  .case-hero--monitoring .is-compact .service-row {
    grid-template-columns:1fr .7fr 30px
  }
  .case-hero--monitoring .is-compact .sparkline {
    display:none
  }
  .case-hero--reports .case-hero-art {
    padding-inline:24px
  }
  .case-context h2,.case-feature h2 {
    font-size:29px
  }
  .case-feature h2 br {
    display:none
  }
  .case-live-section .section-heading h2 {
    font-size:30px
  }
  .case-outcomes h2 {
    font-size:31px
  }
  .next-case {
    gap:12px
  }
  .next-number {
    font-size:36px;
    min-width:38px
  }
  .next-case h2 {
    font-size:19px
  }
  .next-icon {
    width:34px;
    height:34px
  }
  .live-demo .ui-main {
    padding:18px 13px
  }
  .live-demo .ui-controls {
    gap:5px
  }
  .live-demo .ui-select-label select {
    font-size:8px
  }
  .live-demo .analytics-total>strong {
    font-size:27px
  }
  .live-demo .analytics-kpis>div {
    padding:11px 8px
  }
  .live-demo .analytics-kpis strong {
    font-size:18px
  }
  .live-demo .analytics-kpis small {
    font-size:7px
  }
  .live-demo .ui-topbar>strong {
    font-size:16px
  }
  .live-demo .ui-topbar .ui-pill {
    font-size:7px
  }
  .live-demo .service-row {
    font-size:9px
  }
  .live-demo .service-status {
    font-size:7px
  }
  .connection-info {
    font-size:7px
  }
  .event-row strong {
    font-size:8px
  }
  .event-row small {
    font-size:7px
  }
  .event-row time {
    font-size:6px
  }
  .event-code {
    font-size:8px
  }
  .legal-hero h1 {
    font-size:50px
  }
  .page-legal[data-lang=ru] .legal-hero h1,.page-legal[data-lang=ua] .legal-hero h1 {
    font-size:38px
  }
  .legal-privacy[data-lang=ru] .legal-hero h1,.legal-privacy[data-lang=ua] .legal-hero h1 {
    font-size:30px
  }
  .legal-summary {
    padding:21px 17px;
    gap:0 13px
  }
  .legal-summary h3 {
    font-size:20px
  }
  .legal-summary .text-link {
    font-size:9px
  }
  .legal-principles {
    padding:21px 18px;
    gap:23px 16px
  }
  .legal-principles>div {
    font-size:15px;
    gap:8px
  }
  .legal-principles .icon {
    width:18px;
    height:18px
  }
  .legal-section h2 {
    font-size:26px
  }
  .legal-section p,.legal-section li {
    font-size:11px;
    line-height:2
  }
  .contact-heading h1 {
    font-size:60px
  }
  .project-form {
    padding:25px 21px
  }
  .project-form>h2 {
    font-size:28px
  }
  .contact-process h2 {
    font-size:29px
  }
  .error-hero h1 {
    font-size:47px
  }
  .error-hero .button {
    padding-inline:17px;
    gap:13px;
    font-size:9px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
  .case-card:hover .case-card-visual,.button:hover {
    transform:none!important
  }
}
@media print {
  html,body {
    background:white;
    color:#111;
    font-size:12pt;
    scroll-behavior:auto
  }
  .site-header,.site-footer,.read-progress,.skip-link,.legal-toc,.legal-summary,.legal-note,.legal-principles,.toast,dialog,.handnote,.print-button {
    display:none!important
  }
  .container {
    width:100%;
    max-width:none;
    margin:0
  }
  .legal-hero,.legal-privacy .legal-hero {
    display:block;
    padding:0 0 20pt;
    border-bottom:1px solid #aaa;
    margin-bottom:20pt
  }
  .legal-hero h1,.page-legal[data-lang=ru] .legal-hero h1,.page-legal[data-lang=ua] .legal-hero h1 {
    font-size:28pt
  }
  .legal-hero p {
    font-size:10pt
  }
  .legal-hero>.eyebrow {
    display:none
  }
  .legal-layout,.legal-privacy .legal-layout {
    display:block;
    padding:0
  }
  .legal-section,.legal-privacy .legal-section {
    padding:15pt 0;
    break-inside:auto;
    border-bottom:1px solid #aaa
  }
  .legal-section h2 {
    font-size:18pt;
    break-after:avoid
  }
  .legal-section p,.legal-section li {
    font-size:10pt;
    line-height:1.6;
    color:#111
  }
  .legal-section strong {
    color:#111
  }
  .legal-section a {
    color:#111
  }
  .period {
    color:#111
  }
  a {
    color:inherit
  }
  .legal-date {
    font-size:9pt
  }
  .legal-content {
    max-width:none
  }
  h1,h2,h3 {
    break-after:avoid
  }
  p {
    orphans:3;
    widows:3
  }
}
/* Finishing pass: protect editorial text from the decorative route. */
@media(min-width:481px) {
  .case-card>.route-line {
    left:44%;
    width:78%
  }
  .card-analytics>.route-line {
    transform:rotate(175deg);
    left:39%
  }
  .card-integrations>.route-line {
    left:47%;
    transform:rotate(20deg)
  }
  .card-automation>.route-line {
    transform:rotate(155deg)
  }
  .card-reports>.route-line {
    transform:rotate(-25deg)
  }
  .card-catalog>.route-line {
    transform:rotate(125deg)
  }
  .card-deployment>.route-line {
    transform:rotate(-65deg)
  }
}
.portfolio-hero h1 {
  white-space:normal
}
.case-card .card-note {
  max-width:105px
}
.case-card.dark .card-note {
  color:#ff9d73
}
/* Decorative paths may not create horizontal scrolling on narrow screens. */
.case-hero-copy {
  min-width:0;
  overflow-wrap:anywhere
}
.case-hero-art>.route-line {
  left:0;
  right:0;
  width:100%;
  overflow:hidden
}
.contact-heading>div {
  min-width:0
}
.case-top {
  overflow-x:clip
}
@media(min-width:1021px) {
  .contact-process li>div {
    padding-left:10px
  }
}

/* Resend form: real progress, persistent validation, a calm in-page receipt. */
.project-form{position:relative}
.form-honeypot{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form-error{padding:16px 18px;border:1px solid #bf482e;background:#fff5ef;color:#90341e;border-radius:8px;font-size:14px;line-height:1.65}
.project-form [aria-invalid="true"]{border-color:#bf482e;outline:1px solid #bf482e}
.project-form[aria-busy="true"]{cursor:progress}
.project-form[aria-busy="true"] button[type="submit"]{opacity:.85;cursor:progress}
.submit-spinner{display:none;width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:submit-spin .85s linear infinite}
.project-form[aria-busy="true"] .submit-spinner{display:inline-block}
.project-form[aria-busy="true"] button[type="submit"]>.arrow{display:none}
.submission-success{border:1px solid var(--line,#ddded7);border-radius:10px;padding:42px;background:var(--paper,#f4f2ed);box-shadow:0 18px 60px #17191a08}
.submission-success .success-stamp{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;color:#111;background:var(--orange);margin-bottom:28px}
.success-stamp .icon{width:29px;height:29px}
.submission-success h2{font-size:clamp(32px,4vw,48px);line-height:1.2;margin:15px 0 22px}
.submission-success p{font-size:15px;line-height:1.8;color:var(--muted,#626560)}
.submission-reference{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;background:#17191a;color:#f4f2ed;padding:18px 20px;border-radius:6px;margin:26px 0}
.submission-reference span{font-size:12px}.submission-reference strong{font:16px monospace;letter-spacing:1px}
.submission-success>.text-link{margin:20px 0}.submission-success>.button{display:flex;margin-top:24px}
@keyframes submit-spin{to{transform:rotate(360deg)}}
@media(max-width:600px){.submission-success{padding:28px 23px}}
@media(prefers-reduced-motion:reduce){.submit-spinner{animation:none;border-style:dotted}}

/* Localized labels need more room than the English reference. Never clip words. */
.data-equation>div { min-width:0; }
.data-equation>div>span { overflow-wrap:anywhere; hyphens:auto; }