@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap";

@media (width>=1081px) {
  .desktop-nav[data-dcon-cid-nen7h5rs] {
    gap: clamp(.62rem, .9vw, 1.15rem)
  }

  .desktop-nav[data-dcon-cid-nen7h5rs] a[data-dcon-cid-nen7h5rs] {
    white-space: nowrap
  }
}

@media (width<=1360px) {
  .header-phone[data-dcon-cid-nen7h5rs] {
    display: none
  }
}

@media (width<=1210px) and (width>=1081px) {
  .header-actions[data-dcon-cid-nen7h5rs] .button[data-dcon-cid-nen7h5rs] {
    display: none
  }
}

.footer-made-in[data-dcon-cid-jo6i4kqk] {
  margin-top: .2rem
}

@media (width<=760px) {
  .footer-bottom[data-dcon-cid-jo6i4kqk] {
    gap: .8rem
  }
}

@layer reset {

  *,
  :before,
  :after {
    box-sizing: border-box
  }

  html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  ul,
  ol,
  figure,
  blockquote {
    margin: 0
  }

  ul,
  ol {
    padding: 0;
    list-style: none
  }

  img,
  svg {
    max-width: 100%;
    display: block
  }

  button,
  input,
  textarea,
  select {
    font: inherit
  }

  button,
  a {
    -webkit-tap-highlight-color: transparent
  }
}

@layer tokens {
  :root {
    --ink: oklch(20% .035 165);
    --muted: oklch(47% .025 165);
    --paper: oklch(97.2% .008 150);
    --surface: oklch(99.3% .004 145);
    --surface-2: oklch(94.5% .012 150);
    --line: oklch(86% .015 150);
    --dark: oklch(20% .052 165);
    --dark-2: oklch(26% .052 165);
    --on-dark: oklch(97% .006 150);
    --on-dark-muted: oklch(76% .025 160);
    --lime: oklch(91% .23 125);
    --green: oklch(50% .145 160);
    --cyan: oklch(79% .12 205);
    --orange: oklch(72% .18 48);
    --danger: oklch(62% .22 28);
    --button-on-green: white;
    --shadow-sm: 0 10px 30px oklch(18% .03 165/.08);
    --shadow-lg: 0 30px 90px oklch(18% .03 165/.16);
    --radius: 24px;
    --radius-lg: 36px;
    --shell: 1240px;
    --header: 72px;
    --ease: cubic-bezier(.22, 1, .36, 1)
  }

  :root[data-theme=dark] {
    --ink: oklch(93% .012 150);
    --muted: oklch(70% .02 158);
    --paper: oklch(14% .025 165);
    --surface: oklch(18% .027 165);
    --surface-2: oklch(22% .027 165);
    --line: oklch(31% .026 165);
    --dark: oklch(10.5% .03 165);
    --dark-2: oklch(16% .035 165);
    --on-dark: oklch(97% .006 150);
    --on-dark-muted: oklch(75% .025 160);
    --green: oklch(73% .16 158);
    --danger: oklch(70% .2 28);
    --button-on-green: oklch(13% .03 165);
    --shadow-sm: 0 12px 34px oklch(4% .02 165/.32);
    --shadow-lg: 0 34px 100px oklch(4% .02 165/.48)
  }

  @media (prefers-color-scheme:dark) {
    :root:not([data-theme=light]) {
      --ink: oklch(93% .012 150);
      --muted: oklch(70% .02 158);
      --paper: oklch(14% .025 165);
      --surface: oklch(18% .027 165);
      --surface-2: oklch(22% .027 165);
      --line: oklch(31% .026 165);
      --dark: oklch(10.5% .03 165);
      --dark-2: oklch(16% .035 165);
      --on-dark: oklch(97% .006 150);
      --on-dark-muted: oklch(75% .025 160);
      --green: oklch(73% .16 158);
      --danger: oklch(70% .2 28);
      --button-on-green: oklch(13% .03 165);
      --shadow-sm: 0 12px 34px oklch(4% .02 165/.32);
      --shadow-lg: 0 34px 100px oklch(4% .02 165/.48)
    }
  }

  :root {
    --radius: 7px;
    --radius-lg: 10px;
    --shell: 1320px;
    --header: 66px;
    --shadow-sm: 0 8px 24px oklch(18% .03 165/.055);
    --shadow-lg: 0 18px 48px oklch(18% .03 165/.09)
  }
}

@layer base {
  html {
    background: var(--paper)
  }

  body {
    min-width: 320px;
    color: var(--ink);
    background: linear-gradient(color-mix(in oklch, var(--ink) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--ink) 4%, transparent) 1px, transparent 1px), radial-gradient(circle at 90% -10%, color-mix(in oklch, var(--green) 9%, transparent), transparent 34rem), var(--paper);
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    background-size: 44px 44px, 44px 44px, auto, auto;
    background-attachment: local, local, local, local;
    font-family: Inter, Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
    font-size: 16px;
    line-height: 1.55
  }

  body:has([popover]:popover-open) {
    overflow: hidden
  }

  a {
    color: inherit;
    text-decoration: none
  }

  p {
    color: var(--muted)
  }

  h1,
  h2,
  h3,
  h4 {
    letter-spacing: -.042em;
    text-wrap: balance;
    font-weight: 760
  }

  ::selection {
    color: var(--dark);
    background: var(--lime)
  }

  :focus-visible {
    outline: 3px solid var(--lime);
    outline-offset: 4px
  }

  @media (prefers-reduced-motion:reduce) {
    html {
      scroll-behavior: auto
    }

    *,
    :before,
    :after {
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important
    }
  }

  html,
  body {
    max-width: 100%;
    overflow-x: clip
  }

  h1 {
    letter-spacing: -.05em;
    font-size: clamp(2.8rem, 5vw, 4.8rem);
    line-height: .97
  }

  h2 {
    letter-spacing: -.045em;
    font-size: clamp(2rem, 3.6vw, 3.45rem);
    line-height: 1.02
  }

  body {
    font-family: IBM Plex Sans, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55
  }

  h1,
  h2,
  h3,
  h4 {
    letter-spacing: -.025em;
    text-wrap: pretty;
    font-family: IBM Plex Sans, Arial, sans-serif;
    font-weight: 600
  }

  h1 {
    font-size: clamp(2.75rem, 4.7vw, 4.5rem);
    line-height: .98
  }

  h2 {
    font-size: clamp(1.9rem, 3vw, 2.9rem);
    line-height: 1.04
  }

  h3 {
    font-size: clamp(1.08rem, 1.45vw, 1.38rem);
    line-height: 1.18
  }

  code,
  kbd,
  samp,
  .product-card__meta,
  .download-row code,
  .timeline-item time {
    font-family: IBM Plex Mono, ui-monospace, SFMono-Regular, Consolas, monospace
  }

  body {
    font-variant-emoji: text
  }
}

@layer layout {
  .shell {
    width: min(calc(100% - 40px), var(--shell));
    margin-inline: auto
  }

  .section--white {
    background: var(--surface)
  }

  .section--dark {
    color: var(--on-dark);
    background: var(--dark)
  }

  .section--dark p {
    color: var(--on-dark-muted)
  }

  .section--dark h1,
  .section--dark h2,
  .section--dark h3,
  .section--dark h4,
  .section--dark strong {
    color: var(--on-dark)
  }

  .section--dark a:not(.button) {
    color: inherit
  }

  .section--dark a:not(.button):hover {
    color: var(--lime)
  }

  .section--dark .button--outline,
  .reg-hero .button--outline,
  .cta-band .button--outline,
  .site-footer .button--outline,
  .mobile-nav .button--outline {
    color: var(--on-dark);
    border-color: color-mix(in oklch, var(--on-dark) 68%, transparent);
    background: 0 0
  }

  .section--dark .button--outline:hover,
  .reg-hero .button--outline:hover,
  .cta-band .button--outline:hover,
  .site-footer .button--outline:hover,
  .mobile-nav .button--outline:hover {
    color: var(--dark);
    background: var(--lime);
    border-color: var(--lime)
  }

  .section--dark .button--outline:focus-visible,
  .reg-hero .button--outline:focus-visible,
  .cta-band .button--outline:focus-visible,
  .site-footer .button--outline:focus-visible,
  .mobile-nav .button--outline:focus-visible {
    outline-color: var(--lime)
  }

  .section-grid-bg {
    background-image: linear-gradient(color-mix(in oklch, var(--ink) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--ink) 5%, transparent) 1px, transparent 1px);
    background-size: 44px 44px
  }

  .section-head {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr);
    align-items: end;
    gap: 3rem;
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
    display: grid
  }

  .section-head__side {
    justify-self: end;
    max-width: 34rem
  }

  .section-head__side p {
    font-size: clamp(1rem, 1.5vw, 1.18rem)
  }

  .page-hero {
    min-height: 430px;
    padding-block: clamp(4.5rem, 7vw, 6rem);
    overflow: clip
  }

  .page-hero__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, .55fr);
    align-items: start;
    gap: 3rem;
    display: grid
  }

  .page-hero h1 {
    max-width: 980px;
    margin-top: 1.2rem;
    font-size: clamp(3rem, 6vw, 5.8rem)
  }

  .page-hero__side {
    align-self: end;
    gap: 2rem;
    display: grid
  }

  .lead {
    text-wrap: pretty;
    font-size: clamp(1.08rem, 1.8vw, 1.38rem);
    line-height: 1.48
  }

  .section-head {
    grid-template-columns: minmax(0, 1fr) minmax(260px, .52fr);
    gap: clamp(2rem, 4vw, 4rem);
    margin-bottom: clamp(2rem, 3.5vw, 3.25rem)
  }

  .page-hero {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    min-height: 0;
    padding-block: clamp(3.5rem, 5.5vw, 5rem)
  }

  .page-hero h1 {
    max-width: 760px;
    margin-top: 0;
    font-size: clamp(2.8rem, 4.5vw, 4.15rem);
    line-height: .98
  }

  .page-hero>.shell>.lead,
  .page-hero__grid>.lead {
    max-width: 34rem;
    font-size: clamp(1rem, 1.35vw, 1.15rem);
    line-height: 1.52
  }

  .shell {
    width: min(calc(100% - 48px), var(--shell))
  }

  .section {
    padding-block: clamp(4rem, 5.5vw, 6rem)
  }

  .section-head {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
    align-items: end;
    gap: clamp(2rem, 4vw, 5rem);
    margin-bottom: clamp(2rem, 3vw, 3rem)
  }

  .section-head h2 {
    max-width: 760px
  }

  .section-head__side {
    max-width: 430px
  }

  .section-head__side p {
    font-size: 1rem;
    line-height: 1.55
  }

  .page-hero {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding-block: clamp(3.25rem, 4.8vw, 4.75rem)
  }

  .page-hero__grid {
    grid-template-columns: minmax(0, .9fr) minmax(360px, .72fr);
    align-items: end;
    gap: clamp(2.5rem, 5vw, 6rem)
  }

  .page-hero h1 {
    max-width: 700px;
    font-size: clamp(2.5rem, 3.8vw, 3.7rem);
    line-height: 1
  }

  .page-hero .lead,
  .page-hero__grid>.lead {
    max-width: 38rem;
    font-size: 1.05rem;
    line-height: 1.58
  }
}

@layer components {
  .skip-link {
    z-index: 1000;
    color: var(--dark);
    background: var(--lime);
    border-radius: 8px;
    padding: .75rem 1rem;
    font-weight: 800;
    position: fixed;
    top: 1rem;
    left: 1rem;
    transform: translateY(-160%)
  }

  .skip-link:focus {
    transform: translateY(0)
  }

  .eyebrow {
    color: var(--green);
    letter-spacing: .13em;
    text-transform: uppercase;
    align-items: center;
    gap: .7rem;
    font-size: .72rem;
    font-weight: 850;
    display: inline-flex
  }

  .eyebrow:before {
    content: "";
    background: currentColor;
    width: 2rem;
    height: 2px
  }

  .technical-code {
    width: fit-content;
    color: var(--green);
    border: 1px solid color-mix(in oklch, var(--green) 30%, transparent);
    letter-spacing: .08em;
    border-radius: 999px;
    padding: .55rem .8rem;
    font: 700 .72rem/1 ui-monospace, SFMono-Regular, Consolas, monospace
  }

  .button {
    min-height: 52px;
    color: var(--button-on-green);
    background: var(--green);
    cursor: pointer;
    transition: translate .25s var(--ease), box-shadow .25s var(--ease), background .25s;
    border: 1px solid #0000;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    gap: .65rem;
    padding-inline: 1.3rem;
    font-size: .86rem;
    font-weight: 800;
    display: inline-flex
  }

  .button:after {
    content: "↗";
    font-size: 1rem
  }

  .button--outline {
    color: var(--ink);
    border-color: var(--line);
    background: 0 0
  }

  .button--outline:hover {
    box-shadow: none;
    border-color: var(--ink)
  }

  .button--acid {
    color: var(--dark);
    background: var(--lime)
  }

  .button--acid:hover {
    box-shadow: 0 14px 32px color-mix(in oklch, var(--lime) 22%, transparent)
  }

  .button--small {
    min-height: 44px;
    padding-inline: 1rem;
    font-size: .75rem
  }

  .site-header {
    z-index: 100;
    background: color-mix(in oklch, var(--paper) 88%, transparent);
    border-bottom: 1px solid color-mix(in oklch, var(--ink) 9%, transparent);
    backdrop-filter: blur(20px)saturate(1.25);
    position: sticky;
    top: 0
  }

  .header-main {
    min-height: var(--header);
    align-items: center;
    gap: 1.8rem;
    display: flex
  }

  .brand {
    color: var(--green);
    view-transition-name: brand;
    flex: none;
    align-items: center;
    gap: .7rem;
    display: inline-flex
  }

  .brand__mark {
    width: 42px
  }

  .brand__text {
    line-height: .86;
    display: grid
  }

  .brand__text strong {
    color: var(--ink);
    letter-spacing: .08em;
    font-size: 1.25rem
  }

  .brand__text span {
    color: var(--muted);
    letter-spacing: .2em;
    margin-top: .38rem;
    font-size: .48rem;
    font-weight: 850
  }

  .brand--compact .brand__mark {
    width: 36px
  }

  .desktop-nav {
    justify-content: center;
    align-items: stretch;
    gap: 1.35rem;
    margin-inline: auto;
    font-size: .76rem;
    font-weight: 720;
    display: flex
  }

  .desktop-nav a {
    min-height: var(--header);
    place-items: center;
    display: grid;
    position: relative
  }

  .desktop-nav a:after {
    content: "";
    background: var(--green);
    height: 2px;
    transition: right .2s var(--ease);
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 100%
  }

  .desktop-nav a:hover:after,
  .desktop-nav a.active:after {
    right: 0
  }

  .desktop-nav a.active {
    color: var(--green)
  }

  .header-actions {
    flex: none;
    align-items: center;
    gap: .55rem;
    display: flex
  }

  .header-phone {
    color: var(--ink);
    white-space: nowrap;
    flex: none;
    font-size: .82rem;
    font-weight: 800;
    transition: color .2s
  }

  .header-phone:hover {
    color: var(--green)
  }

  @media (width<=1220px) {
    .header-phone {
      display: none
    }
  }

  .theme-toggle {
    aspect-ratio: 1;
    width: 42px;
    color: var(--ink);
    background: color-mix(in oklch, var(--surface) 78%, transparent);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: border-color .2s, background .2s, translate .2s var(--ease);
    border-radius: 50%;
    place-items: center;
    padding: 0;
    display: grid;
    position: relative
  }

  .theme-toggle:hover {
    border-color: color-mix(in oklch, var(--green) 55%, var(--line));
    background: var(--surface);
    translate: 0 -2px
  }

  .theme-toggle svg {
    width: 18px;
    transition: opacity .2s, scale .25s var(--ease), rotate .25s var(--ease);
    grid-area: 1/1
  }

  .theme-toggle__moon {
    opacity: 0;
    rotate: -25deg;
    scale: .65
  }

  :root[data-theme=dark] .theme-toggle__sun {
    opacity: 0;
    rotate: 25deg;
    scale: .65
  }

  :root[data-theme=dark] .theme-toggle__moon {
    opacity: 1;
    rotate: 0deg;
    scale: 1
  }

  @media (prefers-color-scheme:dark) {
    :root:not([data-theme=light]) .theme-toggle__sun {
      opacity: 0;
      rotate: 25deg;
      scale: .65
    }

    :root:not([data-theme=light]) .theme-toggle__moon {
      opacity: 1;
      rotate: 0deg;
      scale: 1
    }
  }

  .menu-trigger {
    aspect-ratio: 1;
    width: 44px;
    color: var(--ink);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: border-color .2s, background .2s, scale .2s var(--ease);
    background: 0 0;
    border-radius: 50%;
    place-content: center;
    gap: 5px;
    padding: 0;
    display: none
  }

  .menu-trigger:hover {
    border-color: color-mix(in oklch, var(--green) 55%, var(--line));
    background: color-mix(in oklch, var(--green) 5%, transparent)
  }

  .menu-trigger:active {
    scale: .94
  }

  .menu-trigger span {
    background: currentColor;
    border-radius: 99px;
    width: 17px;
    height: 2px;
    display: block
  }

  .mobile-nav {
    width: min(100%, 430px);
    height: 100dvh;
    max-height: none;
    padding: env(safe-area-inset-top) max(clamp(12px, 3vw, 24px), env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(clamp(12px, 3vw, 24px), env(safe-area-inset-left));
    color: var(--on-dark);
    background: var(--dark);
    overscroll-behavior: contain;
    transition: translate .34s var(--ease), display .34s allow-discrete, overlay .34s allow-discrete;
    border: 0;
    border-left: 1px solid oklch(100% 0 0/.1);
    border-radius: 0;
    flex-direction: column;
    display: flex;
    inset: 0 0 0 auto;
    overflow: auto;
    translate: 102%;
    box-shadow: -28px 0 70px oklch(7% .025 165/.45)
  }

  .mobile-nav:popover-open {
    translate: 0
  }

  @starting-style {
    .mobile-nav:popover-open {
      translate: 102%
    }
  }

  .mobile-nav::backdrop {
    backdrop-filter: blur(6px);
    background: oklch(10% .02 165/.58)
  }

  .mobile-nav .brand__text strong {
    color: var(--on-dark)
  }

  .mobile-nav__head {
    min-height: var(--header);
    border-bottom: 1px solid oklch(100% 0 0/.1);
    flex: none;
    justify-content: space-between;
    align-items: center;
    display: flex
  }

  .menu-close {
    aspect-ratio: 1;
    width: 44px;
    color: var(--on-dark);
    cursor: pointer;
    transition: border-color .2s, background .2s, rotate .25s var(--ease);
    background: oklch(100% 0 0/.035);
    border: 1px solid oklch(100% 0 0/.2);
    border-radius: 50%;
    place-content: center;
    padding: 0;
    display: grid
  }

  .menu-close:hover {
    border-color: color-mix(in oklch, var(--lime) 55%, transparent);
    background: oklch(100% 0 0/.07);
    rotate: 90deg
  }

  .menu-close span {
    background: currentColor;
    border-radius: 99px;
    grid-area: 1/1;
    width: 17px;
    height: 2px;
    display: block
  }

  .menu-close span:first-child {
    rotate: 45deg
  }

  .menu-close span:last-child {
    rotate: -45deg
  }

  .mobile-nav__body {
    flex-direction: column;
    flex: 1;
    padding-top: clamp(1.5rem, 6vh, 3rem);
    display: flex
  }

  .mobile-nav nav {
    margin-bottom: 1.4rem;
    display: grid
  }

  .mobile-nav nav a {
    letter-spacing: -.03em;
    border-bottom: 1px solid oklch(100% 0 0/.1);
    align-items: baseline;
    gap: 1.4rem;
    padding-block: .82rem;
    font-size: 1.55rem;
    font-weight: 700;
    display: flex
  }

  .mobile-nav nav span {
    color: var(--lime);
    font: .65rem ui-monospace, monospace
  }

  .mobile-nav__utilities {
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    display: grid
  }

  .mobile-nav .theme-toggle {
    color: var(--on-dark);
    background: 0 0;
    border-color: oklch(100% 0 0/.16)
  }

  .mobile-nav .button {
    width: 100%;
    margin-top: auto
  }

  .site-footer {
    color: var(--on-dark);
    background: oklch(17% .04 165);
    padding: 5rem 0 1.5rem
  }

  .site-footer .brand__text strong {
    color: var(--on-dark)
  }

  .footer-grid {
    grid-template-columns: 2fr .75fr .75fr 1.2fr;
    gap: clamp(2rem, 5vw, 5rem);
    padding-bottom: 4rem;
    display: grid
  }

  .footer-brand p {
    color: oklch(72% .025 165);
    max-width: 25rem;
    margin: 1.4rem 0;
    font-size: .9rem
  }

  .footer-badge {
    color: var(--lime);
    border: 1px solid color-mix(in oklch, var(--lime) 26%, transparent);
    border-radius: 999px;
    padding: .45rem .65rem;
    font: 700 .65rem ui-monospace, monospace;
    display: inline-flex
  }

  .footer-column,
  .footer-contact {
    align-content: start;
    gap: .75rem;
    font-size: .82rem;
    display: grid
  }

  .footer-column ul {
    gap: .75rem;
    display: grid
  }

  .footer-column strong,
  .footer-contact>strong {
    color: oklch(62% .025 165);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .45rem;
    font-size: .65rem
  }

  .footer-column a:hover,
  .footer-contact a:hover {
    color: var(--lime)
  }

  .footer-phone {
    font-size: 1.25rem;
    font-weight: 760
  }

  .footer-contact p {
    color: oklch(68% .02 165);
    max-width: 18rem;
    font-size: .78rem
  }

  .footer-bottom {
    color: oklch(58% .018 165);
    border-top: 1px solid oklch(100% 0 0/.1);
    justify-content: space-between;
    padding-top: 1.4rem;
    font-size: .7rem;
    display: flex
  }

  .hero {
    padding-block: clamp(4.5rem, 8vw, 7rem) 2rem;
    position: relative;
    overflow: clip
  }

  .hero:before {
    content: "";
    z-index: -2;
    background-image: linear-gradient(color-mix(in oklch, var(--ink) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--ink) 4%, transparent) 1px, transparent 1px);
    background-size: 44px 44px;
    position: absolute;
    inset: 0;
    mask-image: linear-gradient(#000, #0000 88%)
  }

  .hero:after {
    content: "";
    z-index: -1;
    aspect-ratio: 1;
    border: 1px solid color-mix(in oklch, var(--green) 20%, transparent);
    width: 45rem;
    box-shadow: 0 0 0 8rem color-mix(in oklch, var(--green) 3%, transparent), 0 0 0 16rem color-mix(in oklch, var(--green) 2%, transparent);
    border-radius: 50%;
    position: absolute;
    top: -20rem;
    right: -18rem
  }

  .hero__intro {
    grid-template-columns: minmax(0, 1.25fr) minmax(290px, .55fr);
    align-items: end;
    gap: 3rem;
    display: grid
  }

  .hero h1 {
    max-width: 1050px;
    margin-top: 1.25rem
  }

  .hero h1 em {
    color: var(--green);
    font-style: normal
  }

  .hero__actions {
    flex-wrap: wrap;
    gap: .7rem;
    display: flex
  }

  .hero__proof {
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 20px;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 3.5rem;
    display: grid;
    overflow: clip
  }

  .proof-item {
    background: color-mix(in oklch, var(--surface) 88%, transparent);
    padding: 1.3rem
  }

  .proof-item strong {
    letter-spacing: -.04em;
    font-size: 1.65rem;
    display: block
  }

  .proof-item span {
    color: var(--muted);
    margin-top: .25rem;
    font-size: .75rem;
    line-height: 1.35;
    display: block
  }

  .trust-band {
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
    gap: .6rem 1.4rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    display: flex
  }

  .trust-band li {
    color: var(--muted);
    align-items: center;
    gap: .55rem;
    font-size: .78rem;
    font-weight: 600;
    display: inline-flex
  }

  .trust-band li:before {
    content: "";
    aspect-ratio: 1;
    background: var(--green);
    width: 7px;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--green) 14%, transparent);
    border-radius: 50%
  }

  .trust-band a {
    color: var(--green);
    font-weight: 800
  }

  .trust-band a:hover {
    text-decoration: underline
  }

  .solution-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 1.1rem;
    display: grid
  }

  .solution-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    min-height: 330px;
    transition: translate .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
    flex-direction: column;
    grid-column: span 4;
    padding: 1.7rem;
    display: flex;
    position: relative;
    overflow: clip;
    container-type: inline-size
  }

  .solution-card:first-child {
    color: var(--on-dark);
    background: var(--dark);
    border-color: #0000;
    grid-column: span 7
  }

  .solution-card:nth-child(2) {
    grid-column: span 5
  }

  .solution-card:hover {
    border-color: color-mix(in oklch, var(--green) 50%, var(--line));
    box-shadow: var(--shadow-sm);
    translate: 0 -6px
  }

  .solution-card__index {
    color: var(--green);
    font: 700 .68rem ui-monospace, monospace
  }

  .solution-card:first-child .solution-card__index {
    color: var(--lime)
  }

  .solution-card__icon {
    aspect-ratio: 1;
    width: 105px;
    color: var(--green);
    opacity: .94;
    filter: drop-shadow(0 8px 18px color-mix(in oklch, currentColor 10%, transparent));
    transition: translate .3s var(--ease), scale .3s var(--ease), opacity .3s;
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    overflow: visible
  }

  .solution-card:first-child .solution-card__icon {
    color: var(--lime)
  }

  .solution-card__icon .icon-stroke {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke
  }

  .solution-card__icon .icon-fill {
    fill: currentColor;
    fill-opacity: .1
  }

  .solution-card__icon .icon-dot {
    fill: currentColor;
    stroke: none
  }

  .solution-card:hover .solution-card__icon {
    opacity: 1;
    translate: 0 -3px;
    scale: 1.04
  }

  .solution-card h3 {
    max-width: 19rem;
    margin-top: 6.5rem
  }

  .solution-card p {
    max-width: 30rem;
    margin-top: .9rem;
    font-size: .9rem
  }

  .solution-card__points {
    flex-wrap: wrap;
    gap: .4rem .5rem;
    margin-top: auto;
    padding-top: 1.3rem;
    display: flex
  }

  .solution-card__points li {
    color: var(--muted);
    letter-spacing: .01em;
    background: color-mix(in oklch, var(--green) 8%, transparent);
    border-radius: 999px;
    padding: .3rem .6rem;
    font: 700 .66rem ui-monospace, monospace
  }

  .solution-card:first-child .solution-card__points li {
    color: var(--on-dark-muted);
    background: oklch(100% 0 0/.08)
  }

  .product-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    display: grid
  }

  .product-card {
    min-height: 500px;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--line);
    transition: translate .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
    border-radius: 22px;
    grid-template-rows: auto auto 1fr;
    padding: 1.2rem;
    text-decoration: none;
    display: grid;
    overflow: hidden;
    container-type: inline-size
  }

  .product-card:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 4px
  }

  .product-card__meta {
    color: var(--muted);
    text-transform: uppercase;
    justify-content: space-between;
    align-items: center;
    font: .62rem ui-monospace, monospace;
    display: flex
  }

  .product-card__meta strong {
    color: var(--green)
  }

  .product-card__visual {
    background: radial-gradient(circle at 50% 44%, color-mix(in oklch, var(--green) 8%, transparent), transparent 58%);
    border-radius: 16px;
    place-items: center;
    min-height: 245px;
    margin-block: .75rem 1rem;
    display: grid;
    position: relative
  }

  .product-card__visual:after {
    content: "";
    filter: blur(10px);
    background: oklch(10% .02 165/.18);
    border-radius: 50%;
    height: 10px;
    position: absolute;
    bottom: 13%;
    left: 22%;
    right: 17%
  }

  .product-card__content {
    align-content: start;
    display: grid
  }

  .product-card p {
    margin-top: .65rem;
    font-size: .82rem
  }

  .product-card__details {
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: 1.05rem;
    display: flex
  }

  .product-card__details span {
    color: var(--muted);
    background: var(--surface-2);
    border-radius: 999px;
    padding: .35rem .5rem;
    font-size: .58rem
  }

  .product-card__action {
    color: var(--green);
    border-top: 1px solid var(--line);
    justify-content: space-between;
    align-items: center;
    margin-top: 1.15rem;
    padding-top: .9rem;
    font-size: .7rem;
    font-weight: 800;
    display: flex
  }

  .product-card__action b {
    transition: translate .2s var(--ease);
    font-size: 1rem
  }

  .product-card:hover .product-card__action b {
    translate: 4px
  }

  .device-art {
    --accent: var(--lime);
    z-index: 1;
    filter: drop-shadow(16px 22px 18px oklch(18% .03 165/.24));
    width: 210px;
    min-height: 190px;
    transition: transform .4s var(--ease);
    place-items: center;
    display: grid;
    position: relative
  }

  .product-card:hover .device-art {
    transform: translateY(-3px)scale(1.015)
  }

  .device-art--cyan {
    --accent: var(--cyan)
  }

  .device-art--orange {
    --accent: var(--orange)
  }

  .device-art--white {
    --accent: oklch(92% .012 155)
  }

  .device-art--large {
    width: min(100%, 400px);
    min-height: 310px
  }

  .software-split {
    grid-template-columns: .68fr 1.32fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    display: grid
  }

  .software-copy h2 {
    margin-block: 1rem 1.4rem
  }

  .check-list {
    gap: .75rem;
    margin-block: 2rem;
    display: grid
  }

  .check-list li {
    color: var(--muted);
    align-items: flex-start;
    gap: .7rem;
    font-size: .9rem;
    display: flex
  }

  .section--dark .check-list li {
    color: var(--on-dark-muted)
  }

  .check-list li:before {
    content: "";
    aspect-ratio: 1;
    background: var(--lime);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--lime) 15%, transparent);
    border-radius: 50%;
    flex: 0 0 8px;
    margin-top: .45rem
  }

  .software-figure {
    min-width: 0
  }

  .software-figure figcaption {
    max-width: 48rem;
    color: var(--muted);
    margin-top: .9rem;
    font-size: .68rem;
    line-height: 1.45
  }

  .section--dark .software-figure figcaption {
    color: var(--on-dark-muted)
  }

  .software-panel {
    color: #1d2730;
    min-height: 560px;
    box-shadow: var(--shadow-lg), inset 0 0 0 1px #eef2f4;
    background: #cbd2d8;
    border: 1px solid #77838c;
    border-radius: 11px;
    font-family: Segoe UI, Arial, sans-serif;
    font-size: 11px;
    overflow: hidden
  }

  .software-panel__titlebar {
    color: #f6fbf8;
    background: linear-gradient(#1d4d41, #12392f);
    justify-content: space-between;
    align-items: center;
    height: 34px;
    padding-inline: 8px 5px;
    display: flex
  }

  .software-panel__titlebar>div {
    align-items: center;
    gap: 7px;
    display: flex
  }

  .software-panel__titlebar strong {
    font-size: 11px
  }

  .software-panel__titlebar span:last-child {
    color: #b9d0c8;
    font-size: 10px
  }

  .software-panel__app-mark {
    aspect-ratio: 1;
    background: #c8ff45;
    border-radius: 3px;
    place-items: center;
    width: 18px;
    font-weight: 900;
    display: grid;
    color: #17342d !important
  }

  .software-panel__window-controls {
    align-self: stretch;
    gap: 0 !important
  }

  .software-panel__window-controls i {
    place-items: center;
    width: 31px;
    font-size: 10px;
    font-style: normal;
    display: grid
  }

  .software-panel__window-controls i:last-child:hover {
    background: #c42b1c
  }

  .software-panel__menubar {
    color: #26323a;
    background: #f2f4f5;
    border-bottom: 1px solid #aeb7bd;
    align-items: center;
    gap: 16px;
    height: 26px;
    padding-inline: 9px;
    font-size: 10px;
    display: flex
  }

  .software-panel__toolbar {
    background: linear-gradient(#edf0f2, #d6dce0);
    border-bottom: 1px solid #a3adb4;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding-inline: 8px;
    display: flex
  }

  .software-panel__toolbar i {
    aspect-ratio: 1;
    background: linear-gradient(#fff, #c8d0d5);
    border: 1px solid #89959d;
    border-radius: 2px;
    width: 18px;
    box-shadow: inset 0 0 0 2px #e7ebee
  }

  .software-panel__toolbar i:after {
    content: "";
    aspect-ratio: 1;
    background: #54626c;
    border-radius: 50%;
    width: 6px;
    margin: 5px auto;
    display: block
  }

  .software-panel__toolbar i.is-green:after {
    background: #29a15a
  }

  .software-panel__toolbar i.is-red:after {
    background: #c94135
  }

  .software-panel__toolbar>span {
    background: #aeb7bd;
    width: 1px;
    height: 22px;
    margin-inline: 2px
  }

  .software-panel__toolbar b {
    color: #21603f;
    background: #d9f2df;
    border: 1px solid #9ac7a8;
    border-radius: 2px;
    margin-left: auto;
    padding: 4px 7px;
    font-size: 8px
  }

  .software-panel__workspace {
    border-bottom: 1px solid #8e9aa2;
    grid-template-columns: 138px minmax(0, 1fr);
    min-height: 314px;
    display: grid
  }

  .software-panel__tree {
    background: #eef1f3;
    border-right: 1px solid #9ba6ad;
    align-content: start;
    gap: 1px;
    padding: 8px 6px;
    display: grid
  }

  .software-panel__tree>strong {
    text-transform: uppercase;
    border-bottom: 1px solid #c1c8cd;
    margin-bottom: 6px;
    padding-bottom: 6px;
    font-size: 9px
  }

  .tree-row {
    color: #3e4a53;
    white-space: nowrap;
    padding: 4px 5px 4px 18px
  }

  .tree-row--root {
    padding-left: 5px;
    font-weight: 650
  }

  .tree-row--selected {
    color: #fff;
    background: #28765f;
    border-radius: 2px
  }

  .software-panel__map {
    background: #d8dde1;
    min-width: 0
  }

  .scada-tabs {
    background: #c1c8cd;
    border-bottom: 1px solid #929da5;
    height: 27px;
    padding: 3px 5px 0;
    display: flex
  }

  .scada-tabs span {
    border: 1px solid #0000;
    border-bottom: 0;
    min-width: 82px;
    padding: 5px 10px 4px;
    font-size: 9px
  }

  .scada-tabs span.is-active {
    background: #f3f5f6;
    border-color: #949fa6;
    border-radius: 3px 3px 0 0
  }

  .scada-canvas {
    background-color: #f7f8f8;
    background-image: linear-gradient(#e9edef 1px, #0000 1px), linear-gradient(90deg, #e9edef 1px, #0000 1px), none;
    background-position: 0 0, 0 0, 0 0;
    background-repeat: repeat, repeat, repeat;
    background-size: 20px 20px;
    background-attachment: scroll, scroll, scroll;
    background-origin: padding-box, padding-box, padding-box;
    background-clip: border-box, border-box, border-box;
    min-height: 287px;
    position: relative;
    overflow: hidden
  }

  .scada-canvas:before {
    content: "ДИСПЕТЧЕРСКАЯ РАЙОН 01";
    color: #53616a;
    letter-spacing: .08em;
    font-size: 8px;
    font-weight: 700;
    position: absolute;
    top: 12px;
    left: 14px
  }

  .scada-object {
    background: #e7ecee;
    border: 1px solid #89969e;
    border-radius: 2px;
    gap: 5px;
    width: 112px;
    padding: 8px;
    display: grid;
    position: absolute;
    box-shadow: inset 1px 1px #fff, 2px 2px 4px #5f6d761f
  }

  .scada-object b {
    color: #213039;
    font-size: 8px
  }

  .scada-object small {
    color: #5c6870;
    font-size: 7px
  }

  .scada-object--lift-one {
    top: 18%;
    left: 7%
  }

  .scada-object--lift-two {
    top: 18%;
    left: 37%
  }

  .scada-shaft {
    background: #6d7a82;
    border-radius: 2px;
    grid-auto-flow: row;
    gap: 2px;
    padding: 3px;
    display: grid
  }

  .scada-shaft i {
    background: #dce3e6;
    border: 1px solid #9ba6ad;
    height: 9px
  }

  .scada-shaft i.is-car {
    background: #88cda6;
    border-color: #337c55;
    box-shadow: inset 0 0 0 1px #cdeeda
  }

  .scada-link {
    transform-origin: 0;
    background: #4e8e78;
    height: 2px;
    position: absolute
  }

  .scada-link:before,
  .scada-link:after {
    content: "";
    aspect-ratio: 1;
    background: #4e8e78;
    border-radius: 50%;
    width: 5px;
    position: absolute;
    top: 50%;
    translate: -50% -50%
  }

  .scada-link:before {
    left: 0
  }

  .scada-link:after {
    left: 100%
  }

  .scada-link--one {
    width: 21%;
    top: 37%;
    left: 54.5%;
    rotate: -4.7deg
  }

  .scada-link--two {
    width: 9%;
    top: 49%;
    left: 84%;
    rotate: 144deg
  }

  .scada-legend {
    background: #eef1f2dd;
    border: 1px solid #aab3b8;
    gap: 10px;
    padding: 5px 7px;
    display: flex;
    position: absolute;
    bottom: 10px;
    left: 12px
  }

  .scada-legend span {
    align-items: center;
    gap: 4px;
    font-size: 7px;
    display: flex
  }

  .scada-legend i {
    aspect-ratio: 1;
    border-radius: 50%;
    width: 7px
  }

  .scada-legend i.is-normal {
    background: #38a166
  }

  .software-panel__journal {
    background: #f5f6f7;
    min-height: 126px
  }

  .journal-tabs {
    background: #c6cdd1;
    border-bottom: 1px solid #929da5;
    height: 27px;
    padding-left: 5px;
    display: flex
  }

  .journal-tabs span {
    padding: 6px 11px;
    font-size: 9px
  }

  .journal-tabs span.is-active {
    background: #f5f6f7;
    border-inline: 1px solid #9aa5ac
  }

  .journal-row {
    border-bottom: 1px solid #d4dade;
    grid-template-columns: 68px 1.2fr 1.6fr .85fr;
    align-items: center;
    min-height: 25px;
    font-size: 8px;
    display: grid
  }

  .journal-row>* {
    padding-inline: 7px;
    font-style: normal
  }

  .journal-row--head {
    color: #4d5a62;
    background: #e3e7e9;
    min-height: 22px;
    font-weight: 700
  }

  .journal-row em {
    color: #a52e25;
    font-weight: 700
  }

  .journal-row em.is-accepted {
    color: #9b6912
  }

  .journal-row em.is-normal {
    color: #277c4d
  }

  .software-panel__statusbar {
    color: #344149;
    background: #d2d8dc;
    border-top: 1px solid #f7f8f8;
    grid-template-columns: 1fr 1fr 1.5fr auto;
    gap: 1px;
    min-height: 25px;
    display: grid
  }

  .software-panel__statusbar>* {
    border-right: 1px solid #a8b1b7;
    padding: 6px 8px;
    font-size: 8px
  }

  .doc-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    display: grid
  }

  .doc-card {
    background: var(--surface);
    border: 1px solid var(--line);
    min-height: 260px;
    transition: translate .25s var(--ease), border-color .25s, box-shadow .25s var(--ease);
    border-radius: 20px;
    flex-direction: column;
    padding: 1.5rem;
    display: flex
  }

  .doc-card:hover {
    border-color: color-mix(in oklch, var(--green) 38%, var(--line));
    box-shadow: var(--shadow-sm);
    translate: 0 -4px
  }

  .doc-card__type {
    color: var(--green);
    background: color-mix(in oklch, var(--green) 8%, transparent);
    border-radius: 6px;
    align-self: start;
    padding: .35rem .5rem;
    font: .6rem ui-monospace, monospace;
    display: inline-flex
  }

  .doc-card p {
    margin-top: .8rem;
    font-size: .82rem
  }

  .doc-card__link {
    margin-top: auto;
    padding-top: 1.3rem;
    font-size: .7rem;
    font-weight: 800;
    display: inline-block
  }

  .doc-card__link:after {
    content: " ↗"
  }

  .cta-band {
    color: var(--on-dark);
    background: var(--dark);
    border-radius: var(--radius-lg);
    padding: clamp(3rem, 7vw, 5rem);
    position: relative;
    overflow: clip
  }

  .cta-band:before {
    content: "";
    background: radial-gradient(circle at 85% 10%, color-mix(in oklch, var(--lime) 18%, transparent), transparent 25rem), linear-gradient(oklch(100% 0 0/.045) 1px, transparent 1px), linear-gradient(90deg, oklch(100% 0 0/.045) 1px, transparent 1px);
    background-size: auto, 38px 38px, 38px 38px;
    position: absolute;
    inset: 0
  }

  .cta-band__inner {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 2rem;
    display: grid;
    position: relative
  }

  .cta-band h2 {
    max-width: 830px;
    font-size: clamp(2.5rem, 5vw, 4.8rem)
  }

  .cta-band p {
    max-width: 44rem;
    color: var(--on-dark-muted);
    margin-top: 1.2rem
  }

  .solution-detail {
    border-top: 1px solid var(--line);
    grid-template-columns: 100px minmax(0, .8fr) minmax(280px, .6fr);
    gap: 2rem;
    padding-block: clamp(3rem, 6vw, 5rem);
    display: grid
  }

  .solution-detail__index {
    color: var(--green);
    font: 700 .75rem ui-monospace, monospace
  }

  .solution-detail h2 {
    font-size: clamp(2.2rem, 4vw, 4.1rem)
  }

  .solution-detail p {
    max-width: 42rem;
    margin-top: 1rem
  }

  .solution-detail__equipment {
    margin-top: 1.6rem
  }

  .solution-detail__equipment>span {
    color: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .7rem;
    font: 700 .62rem ui-monospace, monospace;
    display: block
  }

  .solution-detail__products {
    flex-wrap: wrap;
    gap: .5rem;
    display: flex
  }

  .solution-detail__products a {
    color: var(--green);
    background: color-mix(in oklch, var(--green) 7%, transparent);
    border: 1px solid color-mix(in oklch, var(--green) 22%, transparent);
    transition: background .2s, border-color .2s, translate .2s var(--ease);
    border-radius: 999px;
    padding: .5rem .8rem;
    font: 800 .72rem ui-monospace, monospace
  }

  .solution-detail__products a:hover {
    background: color-mix(in oklch, var(--green) 14%, transparent);
    border-color: var(--green);
    translate: 0 -2px
  }

  .solution-detail ul {
    align-content: start;
    gap: .7rem;
    padding-top: .6rem;
    display: grid
  }

  .solution-detail li {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .8rem 1rem;
    font-size: .78rem
  }

  .catalog-filter {
    margin-bottom: 3rem
  }

  .filter-bar {
    flex-wrap: wrap;
    gap: .5rem;
    display: flex
  }

  .filter-bar a {
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .55rem .8rem;
    font-size: .7rem;
    font-weight: 750
  }

  .filter-bar a:hover {
    color: var(--button-on-green);
    background: var(--green);
    border-color: var(--green)
  }

  .product-section {
    scroll-margin-top: calc(var(--header) + 1.5rem)
  }

  .product-section+.product-section {
    margin-top: 5rem
  }

  .product-section__title {
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.6rem;
    display: flex
  }

  .product-section__title span {
    color: var(--green);
    font: .68rem ui-monospace, monospace
  }

  .product-section .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .product-section .product-grid:has(>:only-child) {
    grid-template-columns: minmax(0, .68fr)
  }

  .facts-grid {
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 20px;
    grid-template-columns: repeat(4, 1fr);
    display: grid;
    overflow: hidden
  }

  .fact {
    background: var(--surface);
    min-height: 150px;
    padding: 1.4rem
  }

  .fact strong {
    letter-spacing: -.05em;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    display: block
  }

  .fact span {
    color: var(--muted);
    margin-top: .5rem;
    font-size: .72rem;
    display: block
  }

  .timeline {
    grid-template-columns: 200px 1fr;
    gap: 2rem;
    display: grid
  }

  .timeline__rail {
    color: var(--green);
    align-self: start;
    font: 700 .72rem ui-monospace, monospace;
    position: sticky;
    top: 110px
  }

  .timeline__items {
    display: grid
  }

  .timeline-item {
    border-top: 1px solid var(--line);
    grid-template-columns: 130px 1fr;
    gap: 2rem;
    padding-block: 2rem;
    display: grid
  }

  .timeline-item time {
    color: var(--green);
    font: 800 1.3rem ui-monospace, monospace
  }

  .timeline-item p {
    max-width: 42rem;
    margin-top: .65rem
  }

  #brief {
    scroll-margin-top: 6rem
  }

  #brief:focus {
    outline: none
  }

  .brief {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    grid-template-columns: .8fr 1.2fr;
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1.8rem, 4vw, 3.2rem);
    display: grid
  }

  .brief__intro h2 {
    font-size: clamp(1.8rem, 3vw, 2.6rem)
  }

  .brief__intro p {
    color: var(--muted)
  }

  .brief__facts {
    gap: .6rem;
    margin-top: 1.4rem;
    display: grid
  }

  .brief__facts li {
    color: var(--muted);
    align-items: center;
    gap: .55rem;
    font-size: .82rem;
    font-weight: 600;
    display: flex
  }

  .brief__facts li:before {
    content: "";
    aspect-ratio: 1;
    background: var(--green);
    width: 7px;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--green) 14%, transparent);
    border-radius: 50%
  }

  .brief__form {
    gap: 1rem;
    display: grid
  }

  .brief__form label {
    gap: .4rem;
    display: grid
  }

  .brief__form label span {
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    font: 700 .68rem ui-monospace, monospace
  }

  .brief__form input,
  .brief__form select {
    width: 100%;
    color: inherit;
    font: inherit;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .8rem .9rem;
    font-size: .92rem
  }

  .brief__form input::placeholder {
    color: color-mix(in oklch, var(--muted) 80%, transparent)
  }

  .brief__form input:focus-visible,
  .brief__form select:focus-visible {
    outline: 3px solid color-mix(in oklch, var(--green) 45%, transparent);
    outline-offset: 1px;
    border-color: var(--green)
  }

  .brief__form .button {
    justify-self: start;
    margin-top: .3rem
  }

  .brief__note {
    color: var(--muted);
    font-size: .78rem
  }

  .brief__note a {
    color: var(--green);
    font-weight: 800
  }

  .contact-grid {
    grid-template-columns: .85fr 1.15fr;
    gap: 1.2rem;
    display: grid
  }

  .contact-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.8rem, 4vw, 3.2rem)
  }

  .contact-panel--dark {
    color: var(--on-dark);
    background: var(--dark);
    border-color: #0000
  }

  .contact-panel--dark p {
    color: var(--on-dark-muted)
  }

  .contact-list {
    gap: 1rem;
    margin-top: 2rem;
    display: grid
  }

  .contact-list a {
    border-bottom: 1px solid var(--line);
    justify-content: space-between;
    gap: 1rem;
    padding-block: .9rem;
    font-size: .9rem;
    display: flex
  }

  .contact-panel--dark .contact-list a {
    border-color: oklch(100% 0 0/.12)
  }

  .contact-list a span {
    color: var(--muted);
    font-size: .7rem
  }

  .contact-panel--dark .contact-list a span {
    color: oklch(65% .02 165)
  }

  .map-link {
    color: var(--lime);
    margin-top: 1.4rem;
    font-size: .8rem;
    font-weight: 800;
    display: inline-block
  }

  .map-link:hover {
    text-decoration: underline
  }

  .map-abstract {
    background: linear-gradient(130deg, oklch(29% .04 165), oklch(18% .04 165));
    border-radius: 18px;
    min-height: 420px;
    margin-top: 1.4rem;
    position: relative;
    overflow: hidden
  }

  .map-abstract:before {
    content: "";
    background: repeating-linear-gradient(28deg, #0000 0 42px, oklch(100% 0 0/.07) 43px 45px), repeating-linear-gradient(118deg, #0000 0 64px, oklch(100% 0 0/.05) 65px 67px);
    position: absolute;
    inset: -30%;
    transform: rotate(8deg)
  }

  .map-pin {
    aspect-ratio: 1;
    width: 54px;
    color: var(--dark);
    background: var(--lime);
    box-shadow: 0 0 0 10px color-mix(in oklch, var(--lime) 13%, transparent);
    border-radius: 50% 50% 50% 0;
    place-items: center;
    display: grid;
    position: absolute;
    top: 43%;
    left: 57%;
    rotate: -45deg
  }

  .map-pin span {
    font-weight: 900;
    rotate: 45deg
  }

  .download-row {
    border-top: 1px solid var(--line);
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 0;
    display: grid
  }

  .download-row:first-child {
    border-top: 0
  }

  .download-row strong {
    display: block
  }

  .download-row p {
    margin-top: .25rem;
    font-size: .75rem
  }

  .download-row code {
    min-width: 0;
    color: var(--muted);
    overflow-wrap: anywhere;
    font: .65rem ui-monospace, monospace
  }

  .download-row a {
    font-size: .72rem;
    font-weight: 800
  }

  .download-row a:after {
    content: " ↓"
  }

  .not-found {
    text-align: center;
    place-items: center;
    min-height: 75vh;
    display: grid
  }

  .not-found strong {
    color: var(--green);
    font: 900 clamp(5rem, 20vw, 14rem)/.8 ui-monospace, monospace;
    display: block
  }

  .not-found h1 {
    margin-top: 1.5rem;
    font-size: clamp(2.4rem, 5vw, 4.5rem)
  }

  .not-found p {
    max-width: 35rem;
    margin: 1rem auto 2rem
  }

  .registry-card {
    color: var(--on-dark);
    background: var(--dark);
    border-radius: var(--radius-lg);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1.8rem, 4vw, 3.2rem);
    display: grid;
    position: relative;
    overflow: clip
  }

  .registry-card:before {
    content: "";
    background: radial-gradient(circle at 88% 12%, color-mix(in oklch, var(--lime) 18%, transparent), transparent 24rem), linear-gradient(oklch(100% 0 0/.045) 1px, transparent 1px), linear-gradient(90deg, oklch(100% 0 0/.045) 1px, transparent 1px);
    background-size: auto, 38px 38px, 38px 38px;
    position: absolute;
    inset: 0
  }

  .registry-card>* {
    position: relative
  }

  .registry-card__body {
    justify-items: start;
    gap: 1.1rem;
    max-width: 46rem;
    display: grid
  }

  .registry-card__body h2 {
    font-size: clamp(1.6rem, 3.2vw, 2.6rem)
  }

  .registry-card__body p {
    color: var(--on-dark-muted)
  }

  .registry-card__body .button {
    margin-top: .5rem
  }

  .registry-card__reg {
    text-align: right;
    border-left: 1px solid oklch(100% 0 0/.14);
    justify-items: end;
    gap: .35rem;
    padding-left: clamp(1rem, 3vw, 2.5rem);
    display: grid
  }

  .registry-card__reg span {
    color: var(--on-dark-muted);
    letter-spacing: .1em;
    text-transform: uppercase;
    font: 700 .66rem ui-monospace, monospace
  }

  .registry-card__reg strong {
    color: var(--lime);
    letter-spacing: -.03em;
    font: 800 clamp(2.4rem, 6vw, 4rem)/1 ui-monospace, SFMono-Regular, monospace
  }

  .registry-card__reg small {
    color: var(--on-dark-muted);
    font-size: .7rem
  }

  .cert-list {
    border-top: 1px solid var(--line);
    display: grid
  }

  .cert-row {
    border-bottom: 1px solid var(--line);
    grid-template-columns: 128px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.4rem;
    padding: 1.35rem 0;
    transition: background .2s;
    display: grid
  }

  .cert-row:hover {
    background: color-mix(in oklch, var(--green) 4%, transparent)
  }

  .cert-row__type {
    color: var(--green);
    background: color-mix(in oklch, var(--green) 8%, transparent);
    border: 1px solid color-mix(in oklch, var(--green) 20%, transparent);
    letter-spacing: .03em;
    text-align: center;
    border-radius: 6px;
    align-self: start;
    padding: .42rem .55rem;
    font: 700 .6rem/1.1 ui-monospace, monospace
  }

  .cert-row__main {
    justify-items: start;
    gap: .28rem;
    min-width: 0;
    display: grid
  }

  .cert-row__main strong {
    font-size: .98rem
  }

  .cert-row__note {
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.4
  }

  .cert-row__number {
    color: var(--green);
    background: color-mix(in oklch, var(--green) 8%, transparent);
    border-radius: 6px;
    margin-top: .35rem;
    padding: .3rem .5rem;
    font: 700 .68rem ui-monospace, monospace
  }

  .cert-row__link {
    color: var(--green);
    white-space: nowrap;
    font-size: .72rem;
    font-weight: 800
  }

  .cert-row__link:after {
    content: " ↗"
  }

  .news-featured {
    color: var(--on-dark);
    background: var(--dark);
    border-radius: var(--radius-lg);
    transition: translate .3s var(--ease), box-shadow .3s var(--ease);
    justify-items: start;
    gap: 1rem;
    margin-bottom: 2.5rem;
    padding: clamp(1.8rem, 4vw, 3rem);
    display: grid;
    position: relative;
    overflow: clip
  }

  .news-featured:before {
    content: "";
    background: radial-gradient(circle at 90% 8%, color-mix(in oklch, var(--lime) 16%, transparent), transparent 22rem);
    position: absolute;
    inset: 0
  }

  .news-featured:hover {
    box-shadow: var(--shadow-lg);
    translate: 0 -4px
  }

  .news-featured>* {
    position: relative
  }

  .news-featured__meta {
    align-items: center;
    gap: 1rem;
    display: flex
  }

  .news-featured__meta time {
    color: var(--on-dark-muted);
    font: 700 .72rem ui-monospace, monospace
  }

  .news-featured h2 {
    max-width: 42rem;
    font-size: clamp(1.7rem, 3.4vw, 2.8rem)
  }

  .news-featured p {
    max-width: 46rem;
    color: var(--on-dark-muted)
  }

  .news-featured__link {
    color: var(--lime);
    margin-top: .4rem;
    font-size: .78rem;
    font-weight: 800
  }

  .news-featured__link:after {
    content: " →"
  }

  .news-tag {
    color: var(--green);
    background: color-mix(in oklch, var(--green) 9%, transparent);
    border: 1px solid color-mix(in oklch, var(--green) 22%, transparent);
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: .35rem .6rem;
    font: 750 .62rem/1 ui-monospace, monospace;
    display: inline-flex
  }

  .news-featured .news-tag {
    color: var(--lime);
    background: color-mix(in oklch, var(--lime) 12%, transparent);
    border-color: color-mix(in oklch, var(--lime) 30%, transparent)
  }

  .news-list {
    border-top: 1px solid var(--line);
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
  }

  .news-item {
    border-bottom: 1px solid var(--line);
    grid-template-columns: 160px minmax(0, 1fr) auto;
    align-items: start;
    gap: 2rem;
    padding: 1.8rem 0;
    transition: background .25s;
    display: grid
  }

  .news-item:hover {
    background: color-mix(in oklch, var(--green) 4%, transparent)
  }

  .news-item>time {
    color: var(--green);
    padding-top: .15rem;
    font: 700 .78rem ui-monospace, monospace
  }

  .news-item__body {
    justify-items: start;
    gap: .55rem;
    min-width: 0;
    display: grid
  }

  .news-item__body strong {
    letter-spacing: -.02em;
    font-size: 1.1rem
  }

  .news-item__excerpt {
    max-width: 44rem;
    color: var(--muted);
    font-size: .85rem;
    line-height: 1.5
  }

  .news-item__arrow {
    color: var(--muted);
    transition: translate .2s var(--ease), color .2s;
    font-size: 1.1rem
  }

  .news-item:hover .news-item__arrow {
    color: var(--green);
    translate: 3px -3px
  }

  .news-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    display: grid
  }

  .news-card {
    background: var(--surface);
    border: 1px solid var(--line);
    min-height: 250px;
    transition: translate .25s var(--ease), border-color .25s, box-shadow .25s var(--ease);
    border-radius: 20px;
    flex-direction: column;
    gap: .85rem;
    padding: 1.6rem;
    display: flex
  }

  .news-card:hover {
    border-color: color-mix(in oklch, var(--green) 38%, var(--line));
    box-shadow: var(--shadow-sm);
    translate: 0 -4px
  }

  .news-card__meta {
    align-items: center;
    gap: .7rem;
    display: flex
  }

  .news-card__meta time {
    color: var(--muted);
    font: 700 .66rem ui-monospace, monospace
  }

  .news-card h3 {
    letter-spacing: -.02em;
    font-size: 1.05rem;
    line-height: 1.25
  }

  .news-card p {
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.5
  }

  .news-card__link {
    color: var(--green);
    margin-top: auto;
    padding-top: .4rem;
    font-size: .72rem;
    font-weight: 800
  }

  .news-card__link:after {
    content: " →"
  }

  @supports (animation-timeline:view()) {
    @media (prefers-reduced-motion:no-preference) {

      .solution-card,
      .product-card,
      .doc-card,
      .news-card,
      .solution-detail,
      .timeline-item {
        animation: linear both reveal view();
        animation-range: entry 5% cover 28%
      }

      @keyframes reveal {
        0% {
          opacity: 0;
          translate: 0 28px
        }
      }
    }
  }

  @media (width<=1360px) {
    .desktop-nav {
      gap: .78rem;
      font-size: .72rem
    }

    .header-actions .button {
      padding-inline: .9rem
    }
  }

  @media (width<=1080px) {

    .desktop-nav,
    .header-actions {
      display: none
    }

    .menu-trigger {
      margin-left: auto;
      display: grid
    }

    .product-grid {
      grid-template-columns: repeat(2, 1fr)
    }

    .footer-grid {
      grid-template-columns: 1.6fr 1fr 1fr
    }

    .footer-contact {
      grid-column: 1/-1;
      padding-top: 1rem
    }
  }

  @media (width<=900px) {

    .section-head,
    .page-hero__grid,
    .hero__intro,
    .software-split,
    .contact-grid,
    .brief {
      grid-template-columns: 1fr
    }

    .section-head__side {
      justify-self: start
    }

    .solution-card,
    .solution-card:first-child,
    .solution-card:nth-child(2) {
      grid-column: span 6
    }

    .doc-grid,
    .news-cards,
    .facts-grid {
      grid-template-columns: repeat(2, 1fr)
    }

    .cta-band__inner {
      grid-template-columns: 1fr
    }

    .solution-detail {
      grid-template-columns: 70px 1fr
    }

    .solution-detail ul {
      grid-column: 2
    }

    .software-panel__workspace {
      grid-template-columns: 112px minmax(0, 1fr)
    }

    .software-panel__menubar {
      gap: 10px
    }

    .product-section .product-grid,
    .product-section .product-grid:has(>:only-child) {
      grid-template-columns: repeat(2, minmax(0, 1fr))
    }
  }

  @media (width<=680px) {
    .shell {
      width: min(calc(100% - 24px), var(--shell))
    }

    h1 {
      font-size: clamp(2.7rem, 11vw, 4.2rem)
    }

    h2 {
      font-size: clamp(2.2rem, 11vw, 3.5rem)
    }

    .hero {
      padding-top: 3.6rem
    }

    .page-hero {
      min-height: 0;
      padding-block: 3.6rem 2.8rem
    }

    .page-hero__side {
      align-self: start
    }

    .page-hero h1 {
      overflow-wrap: anywhere;
      font-size: clamp(2.45rem, 10.5vw, 3.3rem);
      line-height: .94
    }

    .hero__proof {
      grid-template-columns: 1fr
    }

    .proof-item {
      min-height: 90px
    }

    .solution-card,
    .solution-card:first-child,
    .solution-card:nth-child(2) {
      grid-column: 1/-1;
      min-height: 320px
    }

    .product-grid,
    .product-section .product-grid,
    .product-section .product-grid:has(>:only-child),
    .doc-grid,
    .news-cards {
      grid-template-columns: 1fr
    }

    .product-card {
      min-height: 485px
    }

    .device-art {
      width: 205px
    }

    .footer-grid {
      grid-template-columns: 1fr 1fr
    }

    .footer-brand,
    .footer-contact {
      grid-column: 1/-1
    }

    .footer-bottom {
      flex-direction: column;
      gap: .6rem
    }

    .software-panel {
      min-height: 526px;
      font-size: 10px
    }

    .software-panel__titlebar>div>span:last-child,
    .software-panel__menubar span:nth-child(n+5),
    .software-panel__toolbar b {
      display: none
    }

    .software-panel__workspace {
      grid-template-columns: 1fr;
      min-height: 278px
    }

    .software-panel__tree {
      display: none
    }

    .scada-tabs span {
      min-width: 72px;
      padding-inline: 7px
    }

    .scada-canvas {
      min-height: 251px
    }

    .scada-object {
      width: 88px;
      padding: 6px
    }

    .scada-object--lift-one {
      top: 20%;
      left: 4%
    }

    .scada-object--lift-two {
      top: 20%;
      left: 35%
    }

    .scada-object--itp {
      top: 20%;
      right: 3%
    }

    .scada-object--pump {
      bottom: 10%;
      right: 9%
    }

    .scada-object small {
      font-size: 6px
    }

    .scada-link {
      display: none
    }

    .scada-legend {
      gap: 6px;
      padding: 4px
    }

    .software-panel__journal {
      min-height: 119px
    }

    .journal-tabs span {
      padding-inline: 8px
    }

    .journal-row {
      grid-template-columns: 52px 1fr 1.35fr
    }

    .journal-row>:last-child {
      display: none
    }

    .journal-row>* {
      padding-inline: 5px
    }

    .software-panel__statusbar {
      grid-template-columns: 1fr 1.4fr auto
    }

    .software-panel__statusbar>:nth-child(2) {
      display: none
    }

    .facts-grid,
    .timeline {
      grid-template-columns: 1fr
    }

    .timeline__rail {
      position: static
    }

    .timeline-item {
      grid-template-columns: 1fr;
      gap: .7rem
    }

    .solution-detail {
      grid-template-columns: 1fr;
      gap: 1rem
    }

    .solution-detail ul {
      grid-column: 1
    }

    .download-row {
      grid-template-columns: 1fr auto
    }

    .download-row code {
      grid-column: 1
    }

    .contact-panel {
      padding: 1.3rem
    }

    .map-abstract {
      min-height: 320px
    }

    .cta-band {
      border-radius: 24px;
      padding: 2rem 1.4rem
    }

    .catalog-filter {
      margin-bottom: 2.3rem
    }

    .filter-bar {
      padding-inline: 12px 48px;
      scrollbar-width: none;
      flex-wrap: nowrap;
      margin-inline: -12px;
      padding-bottom: .45rem;
      overflow-x: auto;
      mask-image: linear-gradient(90deg, #000 0 calc(100% - 36px), #0000)
    }

    .filter-bar::-webkit-scrollbar {
      display: none
    }

    .filter-bar a {
      flex: none;
      align-items: center;
      min-height: 44px;
      display: inline-flex
    }

    .product-section {
      scroll-margin-top: calc(var(--header) + 1rem)
    }

    .product-section__title {
      align-items: flex-start
    }

    .product-section__title h2 {
      font-size: 2rem
    }

    .registry-card {
      grid-template-columns: 1fr;
      gap: 1.5rem
    }

    .registry-card__reg {
      text-align: left;
      border-left: 0;
      justify-items: start;
      padding-left: 0
    }

    .cert-row {
      grid-template-columns: 1fr auto;
      gap: .55rem 1rem
    }

    .cert-row__type {
      justify-self: start
    }

    .cert-row__main {
      grid-column: 1/-1
    }

    .cert-row__link {
      grid-area: 1/2;
      justify-self: end
    }

    .news-item {
      grid-template-columns: 1fr auto;
      gap: .5rem 1rem
    }

    .news-item>time {
      grid-column: 1
    }

    .news-item__body {
      grid-column: 1/-1
    }

    .news-item__arrow {
      grid-area: 1/2;
      justify-self: end
    }
  }

  .solution-card:focus-visible,
  .product-card:focus-within,
  .doc-card:focus-visible {
    outline: 3px solid var(--lime);
    outline-offset: 4px
  }

  :root[data-theme=dark] .section-grid-bg,
  :root[data-theme=dark] .hero:before {
    background-image: linear-gradient(oklch(100% 0 0/.045) 1px, #0000 1px), linear-gradient(90deg, oklch(100% 0 0/.045) 1px, #0000 1px)
  }

  .scada-object--station {
    top: 18%;
    right: 7%
  }

  .scada-object--voice {
    bottom: 12%;
    right: 14%
  }

  .scada-object.is-call {
    background: #fff5d7;
    border-color: #c88a1d;
    box-shadow: inset 4px 0 #e0a027, inset 1px 1px #fff, 2px 2px 4px #5f6d761f
  }

  .scada-object.is-active-link {
    background: #e3f3eb;
    border-color: #3a8765;
    box-shadow: inset 4px 0 #2e9b67, inset 1px 1px #fff, 2px 2px 4px #5f6d761f
  }

  .scada-station {
    background: linear-gradient(#59676f, #37444b);
    border: 1px solid #253038;
    border-radius: 2px;
    align-items: center;
    gap: 6px;
    height: 27px;
    padding: 5px 7px;
    display: flex;
    box-shadow: inset 0 0 0 1px #7d8990
  }

  .scada-station i {
    aspect-ratio: 1;
    background: #52bd78;
    border: 1px solid #236341;
    border-radius: 50%;
    width: 6px;
    box-shadow: 0 0 4px #52bd78
  }

  .scada-station i:nth-child(2) {
    box-shadow: none;
    background: #8d9ba3
  }

  .scada-voice-wave {
    background: #28483d;
    border: 1px solid #183229;
    border-radius: 2px;
    justify-content: center;
    align-items: center;
    gap: 3px;
    height: 28px;
    padding-inline: 8px;
    display: flex
  }

  .scada-voice-wave i {
    background: #8ee0ac;
    border-radius: 2px;
    width: 3px;
    height: 8px
  }

  .scada-voice-wave i:nth-child(2),
  .scada-voice-wave i:nth-child(4) {
    height: 18px
  }

  .scada-voice-wave i:nth-child(3) {
    height: 24px
  }

  .scada-legend i.is-call {
    background: #d99925
  }

  .scada-legend i.is-link {
    background: #2f9a68
  }

  .journal-row--call {
    background: #fff8e4;
    box-shadow: inset 4px 0 #d99a28
  }

  .journal-row--call em {
    color: #9b6510
  }

  @media (width<=680px) {
    .scada-object--station {
      top: 20%;
      right: 3%
    }

    .scada-object--voice {
      bottom: 10%;
      right: 9%
    }
  }

  @media (prefers-color-scheme:dark) {

    :root:not([data-theme=light]) .section-grid-bg,
    :root:not([data-theme=light]) .hero:before {
      background-image: linear-gradient(oklch(100% 0 0/.045) 1px, #0000 1px), linear-gradient(90deg, oklch(100% 0 0/.045) 1px, #0000 1px)
    }
  }

  .building-overview {
    --overview-bg: oklch(97% .01 155);
    --overview-panel: oklch(99% .004 155);
    --overview-panel-2: oklch(94% .014 155);
    --overview-ink: oklch(22% .035 165);
    --overview-muted: oklch(50% .025 165);
    --overview-line: oklch(84% .018 155);
    --overview-accent: oklch(48% .15 156);
    --overview-cyan: oklch(64% .13 205);
    --overview-orange: oklch(70% .17 62);
    color: var(--overview-ink);
    background: linear-gradient(color-mix(in oklch, var(--overview-ink) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--overview-ink) 4%, transparent) 1px, transparent 1px), var(--overview-bg);
    border: 1px solid var(--overview-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    isolation: isolate;
    background-size: 48px 48px;
    margin: clamp(2.5rem, 6vw, 4.5rem) 0 0;
    position: relative;
    overflow: clip;
    container-type: inline-size
  }

  :root[data-theme=dark] .building-overview {
    --overview-bg: oklch(15% .038 165);
    --overview-panel: oklch(20% .038 165);
    --overview-panel-2: oklch(24% .04 165);
    --overview-ink: oklch(94% .008 155);
    --overview-muted: oklch(70% .02 160);
    --overview-line: oklch(100% 0 0/.12);
    --overview-accent: var(--lime)
  }

  @media (prefers-color-scheme:dark) {
    :root:not([data-theme=light]) .building-overview {
      --overview-bg: oklch(15% .038 165);
      --overview-panel: oklch(20% .038 165);
      --overview-panel-2: oklch(24% .04 165);
      --overview-ink: oklch(94% .008 155);
      --overview-muted: oklch(70% .02 160);
      --overview-line: oklch(100% 0 0/.12);
      --overview-accent: var(--lime)
    }
  }

  .building-overview__bar {
    background: color-mix(in oklch, var(--overview-panel) 86%, transparent);
    border-bottom: 1px solid var(--overview-line);
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    min-height: 78px;
    padding: 1rem clamp(1.15rem, 3cqw, 2.2rem);
    display: flex
  }

  .building-overview__bar>div {
    gap: .25rem;
    display: grid
  }

  .building-overview__bar>div>span {
    color: var(--overview-muted);
    letter-spacing: .09em;
    text-transform: uppercase;
    font: 760 .64rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace
  }

  .building-overview__bar>div>strong {
    letter-spacing: -.035em;
    font-size: clamp(1.08rem, 2cqw, 1.6rem);
    line-height: 1.1
  }

  .building-overview__status,
  .building-model__health,
  .dispatch-console__topbar>span {
    color: var(--overview-accent);
    flex: none;
    align-items: center;
    gap: .45rem;
    font: 760 .62rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    display: inline-flex
  }

  .building-overview__status {
    background: color-mix(in oklch, var(--overview-accent) 10%, transparent);
    border: 1px solid color-mix(in oklch, var(--overview-accent) 28%, transparent);
    border-radius: 999px;
    padding: .58rem .72rem
  }

  .building-overview__status i,
  .building-model__health i,
  .dispatch-console__topbar>span i {
    aspect-ratio: 1;
    width: 7px;
    box-shadow: 0 0 0 4px color-mix(in oklch, currentColor 12%, transparent), 0 0 12px currentColor;
    background: currentColor;
    border-radius: 50%
  }

  .building-overview__switcher {
    background: color-mix(in oklch, var(--overview-panel) 70%, transparent);
    border: 0;
    border-bottom: 1px solid var(--overview-line);
    scrollbar-width: none;
    gap: .4rem;
    margin: 0;
    padding: .72rem clamp(1rem, 2.4cqw, 1.8rem);
    display: flex;
    overflow-x: auto
  }

  .building-overview__switcher::-webkit-scrollbar {
    display: none
  }

  .building-overview__switcher label {
    color: var(--overview-muted);
    cursor: pointer;
    border: 1px solid #0000;
    border-radius: 999px;
    flex: none;
    padding: .52rem .72rem;
    font-size: .68rem;
    font-weight: 760;
    line-height: 1;
    transition: color .2s, background-color .2s, border-color .2s
  }

  .building-overview__switcher input:focus-visible+label {
    outline: 2px solid var(--overview-accent);
    outline-offset: 2px
  }

  .building-overview__switcher input:checked+label {
    color: var(--overview-ink);
    background: var(--overview-panel);
    border-color: var(--overview-line);
    box-shadow: 0 5px 16px color-mix(in oklch, var(--overview-ink) 8%, transparent)
  }

  .building-overview__stage {
    grid-template-columns: minmax(290px, .92fr) 74px minmax(360px, 1.18fr);
    align-items: stretch;
    gap: clamp(.7rem, 1.5cqw, 1.1rem);
    min-height: 350px;
    padding: clamp(.9rem, 2cqw, 1.45rem);
    display: grid
  }

  .building-model,
  .dispatch-console {
    background: color-mix(in oklch, var(--overview-panel) 94%, transparent);
    border: 1px solid var(--overview-line);
    min-width: 0;
    min-height: 350px;
    box-shadow: 0 16px 36px color-mix(in oklch, var(--overview-ink) 7%, transparent);
    border-radius: 20px;
    overflow: hidden
  }

  .building-model {
    grid-template-rows: auto 1fr;
    display: grid
  }

  .building-model__head,
  .dispatch-console__topbar {
    border-bottom: 1px solid var(--overview-line);
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-height: 54px;
    padding: .72rem .9rem;
    display: flex
  }

  .building-model__head>div,
  .dispatch-console__topbar>div {
    gap: .18rem;
    min-width: 0;
    display: grid
  }

  .building-model__head>div>span,
  .dispatch-console__topbar>div>span {
    color: var(--overview-muted);
    letter-spacing: .07em;
    text-transform: uppercase;
    font: 700 .54rem/1 ui-monospace, SFMono-Regular, Consolas, monospace
  }

  .building-model__head>div>strong,
  .dispatch-console__topbar>div>strong {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .78rem;
    overflow: hidden
  }

  .building-model__body {
    grid-template-rows: .72fr 1fr 1fr 1fr 1.08fr;
    min-height: 0;
    padding: .55rem .65rem .65rem;
    display: grid
  }

  .building-floor {
    border-right: 2px solid color-mix(in oklch, var(--overview-ink) 18%, transparent);
    border-bottom: 1px solid var(--overview-line);
    border-left: 2px solid color-mix(in oklch, var(--overview-ink) 18%, transparent);
    grid-template-columns: 42px repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: .42rem;
    min-height: 0;
    padding: .34rem .4rem;
    display: grid;
    position: relative
  }

  .building-floor--roof {
    border-top: 2px solid color-mix(in oklch, var(--overview-ink) 18%, transparent);
    border-radius: 7px 7px 0 0;
    grid-template-columns: 42px minmax(0, 1fr);
    margin-inline: 9%
  }

  .building-floor--roof:before,
  .building-floor--roof:after {
    content: "";
    border-top: 2px solid color-mix(in oklch, var(--overview-ink) 18%, transparent);
    width: 45%;
    height: 12px;
    position: absolute;
    top: -11px
  }

  .building-floor--roof:before {
    left: 4%;
    rotate: -7deg
  }

  .building-floor--roof:after {
    right: 4%;
    rotate: 7deg
  }

  .building-floor--technical {
    background: color-mix(in oklch, var(--overview-cyan) 4%, transparent)
  }

  .building-floor--meters {
    background: color-mix(in oklch, var(--overview-accent) 4%, transparent);
    border-bottom-width: 2px;
    grid-template-columns: 42px repeat(3, minmax(0, 1fr))
  }

  .building-floor__label {
    color: var(--overview-muted);
    text-transform: uppercase;
    font: 720 .5rem/1 ui-monospace, SFMono-Regular, Consolas, monospace
  }

  .system-node {
    background: var(--overview-panel-2);
    border: 1px solid color-mix(in oklch, var(--overview-line) 90%, transparent);
    border-radius: 9px;
    grid-template-rows: auto auto;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    column-gap: .45rem;
    min-width: 0;
    min-height: 42px;
    padding: .36rem .44rem;
    transition: opacity .2s, translate .2s, border-color .2s, box-shadow .2s;
    display: grid;
    position: relative
  }

  .system-node>span,
  .system-node>strong {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
  }

  .system-node>span {
    color: var(--overview-muted);
    align-self: end;
    font-size: .5rem
  }

  .system-node>strong {
    align-self: start;
    font-size: .62rem;
    line-height: 1.15
  }

  .system-node__icon {
    aspect-ratio: 1;
    width: 28px;
    color: var(--overview-accent);
    background: color-mix(in oklch, currentColor 10%, transparent);
    border: 1px solid color-mix(in oklch, currentColor 22%, transparent);
    border-radius: 7px;
    grid-row: 1/3;
    place-items: center;
    font: 800 .48rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    display: grid;
    position: relative
  }

  .system-node--attention {
    border-color: color-mix(in oklch, var(--overview-orange) 45%, var(--overview-line));
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--overview-orange) 8%, transparent)
  }

  .system-node--attention .system-node__icon,
  .system-node--warning .system-node__icon {
    color: var(--overview-orange)
  }

  .building-overview:has(#building-view-lifts:checked) .system-node:not(.system-node--lifts),
  .building-overview:has(#building-view-engineering:checked) .system-node:not(.system-node--engineering),
  .building-overview:has(#building-view-metering:checked) .system-node:not(.system-node--metering),
  .building-overview:has(#building-view-network:checked) .system-node:not(.system-node--network) {
    opacity: .24
  }

  .building-overview:has(#building-view-lifts:checked) .system-node--lifts,
  .building-overview:has(#building-view-engineering:checked) .system-node--engineering,
  .building-overview:has(#building-view-metering:checked) .system-node--metering,
  .building-overview:has(#building-view-network:checked) .system-node--network {
    border-color: color-mix(in oklch, var(--overview-accent) 40%, var(--overview-line));
    box-shadow: 0 9px 20px color-mix(in oklch, var(--overview-accent) 12%, transparent);
    translate: 0 -2px
  }

  .building-overview__bus {
    color: var(--overview-muted);
    text-align: center;
    grid-template-rows: auto 1fr auto;
    justify-items: center;
    gap: .5rem;
    padding-block: 1rem;
    font: 700 .5rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    display: grid
  }

  .building-overview__bus i {
    background: linear-gradient(var(--overview-accent), var(--overview-cyan));
    width: 2px;
    min-height: 170px;
    box-shadow: 0 0 16px color-mix(in oklch, var(--overview-accent) 32%, transparent);
    position: relative
  }

  .building-overview__bus i:before,
  .building-overview__bus i:after {
    content: "";
    aspect-ratio: 1;
    background: var(--overview-panel);
    border: 2px solid var(--overview-accent);
    border-radius: 50%;
    width: 8px;
    position: absolute;
    left: 50%;
    translate: -50%
  }

  .building-overview__bus i:before {
    top: 0
  }

  .building-overview__bus i:after {
    border-color: var(--overview-cyan);
    bottom: 0
  }

  .building-overview__bus b {
    color: var(--overview-cyan);
    font-weight: 800
  }

  .dispatch-console {
    color: oklch(91% .01 155);
    background: oklch(12% .026 165);
    border-color: oklch(100% 0 0/.11);
    grid-template-rows: auto auto 1fr auto;
    display: grid
  }

  .dispatch-console__topbar {
    border-color: oklch(100% 0 0/.09)
  }

  .dispatch-console__topbar>div>span {
    color: oklch(67% .015 160)
  }

  .dispatch-console__topbar>div>strong {
    color: oklch(93% .008 155)
  }

  .dispatch-console__topbar>span {
    color: var(--lime)
  }

  .dispatch-console__metrics {
    border-bottom: 1px solid oklch(100% 0 0/.08);
    grid-template-columns: repeat(3, 1fr);
    min-height: 58px;
    display: grid
  }

  .dispatch-console__metrics>div {
    border-right: 1px solid oklch(100% 0 0/.08);
    align-content: center;
    gap: .1rem;
    padding: .55rem .7rem;
    display: grid
  }

  .dispatch-console__metrics>div:last-child {
    border-right: 0
  }

  .dispatch-console__metrics strong {
    font-size: .95rem
  }

  .dispatch-console__metrics span {
    color: oklch(65% .014 160);
    text-transform: uppercase;
    font-size: .48rem
  }

  .dispatch-console__feed {
    min-height: 0;
    padding: .55rem;
    overflow: hidden
  }

  .dispatch-feed {
    gap: .4rem;
    height: 100%;
    display: none
  }

  .building-overview:has(#building-view-all:checked) .dispatch-feed--all,
  .building-overview:has(#building-view-lifts:checked) .dispatch-feed--lifts,
  .building-overview:has(#building-view-engineering:checked) .dispatch-feed--engineering,
  .building-overview:has(#building-view-metering:checked) .dispatch-feed--metering,
  .building-overview:has(#building-view-network:checked) .dispatch-feed--network {
    display: grid
  }

  .dispatch-event {
    background: oklch(17% .028 165);
    border: 1px solid oklch(100% 0 0/.08);
    border-radius: 9px;
    grid-template-columns: 35px 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    min-height: 54px;
    padding: .5rem .58rem;
    display: grid
  }

  .dispatch-event time {
    color: oklch(62% .014 160);
    font: 650 .5rem/1 ui-monospace, SFMono-Regular, Consolas, monospace
  }

  .dispatch-event>i {
    aspect-ratio: 1;
    background: var(--lime);
    width: 7px;
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--lime) 10%, transparent);
    border-radius: 50%
  }

  .dispatch-event--alarm>i {
    background: var(--overview-orange);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--overview-orange) 12%, transparent), 0 0 12px var(--overview-orange)
  }

  .dispatch-event--warning>i {
    background: oklch(82% .16 90);
    box-shadow: 0 0 0 4px oklch(82% .16 90/.1)
  }

  .dispatch-event>div {
    gap: .16rem;
    min-width: 0;
    display: grid
  }

  .dispatch-event>div strong,
  .dispatch-event>div span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
  }

  .dispatch-event>div strong {
    color: oklch(92% .008 155);
    font-size: .62rem
  }

  .dispatch-event>div span {
    color: oklch(62% .014 160);
    font-size: .5rem
  }

  .dispatch-event>b {
    color: oklch(84% .02 155);
    white-space: nowrap;
    background: oklch(100% 0 0/.06);
    border-radius: 5px;
    padding: .32rem .4rem;
    font-size: .48rem;
    font-weight: 730
  }

  .dispatch-event--alarm>b {
    color: oklch(90% .08 70);
    background: color-mix(in oklch, var(--overview-orange) 13%, transparent)
  }

  .dispatch-console__actions {
    border-top: 1px solid oklch(100% 0 0/.08);
    gap: .4rem;
    padding: .55rem;
    display: flex;
    overflow-x: auto
  }

  .dispatch-console__actions span {
    color: oklch(72% .014 160);
    background: oklch(100% 0 0/.05);
    border: 1px solid oklch(100% 0 0/.07);
    border-radius: 6px;
    flex: none;
    padding: .42rem .55rem;
    font-size: .48rem;
    font-weight: 700
  }

  .dispatch-console__actions .is-primary {
    color: oklch(18% .025 165);
    background: var(--lime);
    border-color: #0000
  }

  .building-overview__scale {
    background: color-mix(in oklch, var(--overview-panel) 72%, transparent);
    border-top: 1px solid var(--overview-line);
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    min-height: 56px;
    padding: .75rem clamp(1rem, 2.4cqw, 1.8rem);
    display: flex
  }

  .building-overview__scale>div {
    min-width: 0;
    color: var(--overview-ink);
    white-space: nowrap;
    align-items: center;
    gap: .5rem;
    font-size: .58rem;
    font-weight: 760;
    display: flex
  }

  .building-overview__scale>div i {
    background: var(--overview-line);
    width: clamp(18px, 3cqw, 42px);
    height: 1px;
    position: relative
  }

  .building-overview__scale>div i:after {
    content: "";
    aspect-ratio: 1;
    border-top: 1px solid var(--overview-accent);
    border-right: 1px solid var(--overview-accent);
    width: 6px;
    position: absolute;
    top: 50%;
    right: 0;
    translate: 0 -50%;
    rotate: 45deg
  }

  .building-overview__scale p {
    color: var(--overview-muted);
    text-align: right;
    margin: 0;
    font: 650 .5rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace
  }

  @container (width<=920px) {
    .building-overview__stage {
      grid-template-columns: minmax(250px, .9fr) 54px minmax(330px, 1.1fr)
    }

    .building-overview__status {
      display: none
    }

    .building-floor {
      grid-template-columns: 36px repeat(2, minmax(0, 1fr))
    }

    .building-floor--roof {
      grid-template-columns: 36px minmax(0, 1fr)
    }

    .building-floor--meters {
      grid-template-columns: 36px repeat(3, minmax(0, 1fr))
    }

    .system-node {
      grid-template-columns: 24px minmax(0, 1fr);
      column-gap: .35rem;
      padding-inline: .35rem
    }

    .system-node__icon {
      width: 24px
    }
  }

  @container (width<=720px) {
    .building-overview__bar {
      min-height: 70px
    }

    .building-overview__stage {
      grid-template-columns: 1fr;
      min-height: 0
    }

    .building-model,
    .dispatch-console {
      min-height: 330px
    }

    .building-overview__bus {
      grid-template-rows: auto;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      padding: 0 .75rem
    }

    .building-overview__bus i {
      background: linear-gradient(90deg, var(--overview-accent), var(--overview-cyan));
      width: auto;
      min-width: 120px;
      height: 2px;
      min-height: 2px
    }

    .building-overview__bus i:before,
    .building-overview__bus i:after {
      top: 50%;
      translate: 0 -50%
    }

    .building-overview__bus i:before {
      left: 0
    }

    .building-overview__bus i:after {
      left: auto;
      right: 0
    }

    .building-overview__scale {
      flex-direction: column;
      align-items: flex-start;
      gap: .45rem
    }

    .building-overview__scale p {
      text-align: left
    }
  }

  @container (width<=470px) {
    .building-overview {
      border-radius: 18px;
      margin-top: 2rem
    }

    .building-overview__bar {
      padding-inline: 1rem
    }

    .building-overview__bar>div>strong {
      font-size: 1rem
    }

    .building-overview__switcher {
      padding-inline: .75rem
    }

    .building-overview__stage {
      padding: .7rem
    }

    .building-model,
    .dispatch-console {
      border-radius: 15px;
      min-height: 320px
    }

    .building-model__head,
    .dispatch-console__topbar {
      padding-inline: .7rem
    }

    .building-floor {
      grid-template-columns: 32px repeat(2, minmax(0, 1fr));
      padding-inline: .25rem
    }

    .building-floor--roof {
      grid-template-columns: 32px minmax(0, 1fr)
    }

    .building-floor--meters {
      grid-template-columns: 32px repeat(3, minmax(0, 1fr))
    }

    .system-node {
      grid-template-columns: 20px minmax(0, 1fr);
      min-height: 38px;
      padding: .28rem
    }

    .system-node__icon {
      border-radius: 5px;
      width: 20px;
      scale: .9
    }

    .system-node>span {
      font-size: .44rem
    }

    .system-node>strong {
      font-size: .54rem
    }

    .dispatch-event {
      grid-template-columns: 31px 7px minmax(0, 1fr) auto;
      gap: .4rem;
      padding-inline: .45rem
    }

    .dispatch-event>div strong {
      font-size: .56rem
    }

    .dispatch-event>b {
      text-overflow: ellipsis;
      max-width: 62px;
      overflow: hidden
    }

    .building-overview__scale>div {
      font-size: .5rem
    }
  }

  @media (prefers-reduced-motion:no-preference) {
    .building-overview__bus i:before {
      animation: 2.4s ease-in-out infinite overview-pulse
    }

    .system-node--attention .system-node__icon {
      animation: 1.8s ease-in-out infinite overview-alert
    }
  }

  @keyframes overview-pulse {

    0%,
    to {
      box-shadow: 0 0 0 0 color-mix(in oklch, var(--overview-accent) 0%, transparent)
    }

    50% {
      box-shadow: 0 0 0 7px color-mix(in oklch, var(--overview-accent) 14%, transparent)
    }
  }

  @keyframes overview-alert {

    0%,
    to {
      box-shadow: 0 0 0 0 color-mix(in oklch, var(--overview-orange) 0%, transparent)
    }

    50% {
      box-shadow: 0 0 0 5px color-mix(in oklch, var(--overview-orange) 13%, transparent)
    }
  }

  .system-map {
    --map-bg: oklch(97% .01 155);
    --map-panel: oklch(99% .005 155);
    --map-panel-2: oklch(94% .014 155);
    --map-ink: oklch(22% .035 165);
    --map-muted: oklch(50% .025 165);
    --map-line: oklch(84% .018 155);
    --map-accent: oklch(48% .15 156);
    --map-accent-soft: color-mix(in oklch, var(--map-accent) 10%, transparent);
    min-height: 0;
    color: var(--map-ink);
    background: linear-gradient(color-mix(in oklch, var(--map-ink) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--map-ink) 4%, transparent) 1px, transparent 1px), var(--map-bg);
    border: 1px solid var(--map-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    isolation: isolate;
    background-size: 56px 56px;
    margin: clamp(3rem, 7vw, 5.5rem) 0 0;
    position: relative;
    overflow: clip;
    container-type: inline-size
  }

  .system-map:before,
  .system-map:after {
    content: none
  }

  :root[data-theme=dark] .system-map {
    --map-bg: oklch(15% .038 165);
    --map-panel: oklch(20% .038 165);
    --map-panel-2: oklch(24% .04 165);
    --map-ink: oklch(94% .008 155);
    --map-muted: oklch(70% .02 160);
    --map-line: oklch(100% 0 0/.12);
    --map-accent: var(--lime);
    box-shadow: var(--shadow-lg), inset 0 1px oklch(100% 0 0/.06)
  }

  @media (prefers-color-scheme:dark) {
    :root:not([data-theme=light]) .system-map {
      --map-bg: oklch(15% .038 165);
      --map-panel: oklch(20% .038 165);
      --map-panel-2: oklch(24% .04 165);
      --map-ink: oklch(94% .008 155);
      --map-muted: oklch(70% .02 160);
      --map-line: oklch(100% 0 0/.12);
      --map-accent: var(--lime)
    }
  }

  .system-map__bar {
    z-index: 3;
    min-height: 92px;
    color: var(--map-ink);
    border-bottom: 1px solid var(--map-line);
    text-transform: none;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 1.2rem clamp(1.25rem, 3.5cqw, 2.8rem);
    display: flex;
    position: relative
  }

  .system-map__bar>div {
    gap: .25rem;
    display: grid
  }

  .system-map__bar>div>span {
    color: var(--map-muted);
    letter-spacing: .1em;
    text-transform: uppercase;
    font: 720 .68rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace
  }

  .system-map__bar>div>strong {
    letter-spacing: -.035em;
    font-size: clamp(1.2rem, 2.1cqw, 1.8rem);
    line-height: 1.1
  }

  .system-map__status {
    color: var(--map-accent);
    background: var(--map-accent-soft);
    border: 1px solid color-mix(in oklch, var(--map-accent) 28%, transparent);
    border-radius: 999px;
    flex: none;
    align-items: center;
    gap: .55rem;
    padding: .62rem .8rem;
    font: 760 .66rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    display: inline-flex
  }

  .system-map__status i {
    aspect-ratio: 1;
    width: 8px;
    box-shadow: 0 0 0 4px color-mix(in oklch, currentColor 12%, transparent), 0 0 12px currentColor;
    background: currentColor;
    border-radius: 50%
  }

  .signal-route {
    z-index: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.8rem, 1.6cqw, 1.25rem);
    padding: clamp(1rem, 2.4cqw, 1.8rem);
    display: grid;
    position: relative
  }

  .signal-route:before {
    content: "";
    z-index: -1;
    background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--map-accent) 38%, transparent) 15% 85%, transparent);
    height: 2px;
    position: absolute;
    top: 50%;
    left: 7%;
    right: 7%
  }

  .signal-step {
    background: color-mix(in oklch, var(--map-panel) 92%, transparent);
    border: 1px solid var(--map-line);
    min-width: 0;
    min-height: 545px;
    box-shadow: 0 18px 44px color-mix(in oklch, var(--map-ink) 7%, transparent);
    transition: translate .28s var(--ease), border-color .28s, box-shadow .28s;
    border-radius: clamp(18px, 2.2cqw, 26px);
    grid-template-rows: auto 1fr auto;
    padding: clamp(1rem, 1.8cqw, 1.4rem);
    display: grid;
    position: relative;
    overflow: hidden
  }

  .signal-step:before {
    content: "";
    background: linear-gradient(90deg, var(--map-accent), transparent 72%);
    opacity: .75;
    height: 3px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0
  }

  .signal-step:hover {
    border-color: color-mix(in oklch, var(--map-accent) 42%, var(--map-line));
    box-shadow: 0 24px 55px color-mix(in oklch, var(--map-ink) 10%, transparent);
    translate: 0 -5px
  }

  .signal-step__header {
    min-height: 105px
  }

  .signal-step__header span {
    color: var(--map-accent);
    letter-spacing: .08em;
    text-transform: uppercase;
    font: 800 .62rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    display: block
  }

  .signal-step__header strong {
    letter-spacing: -.035em;
    max-width: 22rem;
    margin-top: .65rem;
    font-size: clamp(1.18rem, 1.85cqw, 1.55rem);
    line-height: 1.12;
    display: block
  }

  .signal-step__result {
    border-top: 1px solid var(--map-line);
    gap: .35rem;
    min-height: 82px;
    padding-top: 1rem;
    display: grid
  }

  .signal-step__result span {
    color: var(--map-muted);
    letter-spacing: .07em;
    text-transform: uppercase;
    font: 700 .58rem/1 ui-monospace, SFMono-Regular, Consolas, monospace
  }

  .signal-step__result strong {
    max-width: 24rem;
    font-size: .76rem;
    line-height: 1.45
  }

  .lift-scene {
    background: var(--map-panel-2);
    border: 1px solid var(--map-line);
    border-radius: 18px;
    grid-template-columns: minmax(90px, .72fr) minmax(120px, 1fr);
    align-items: center;
    gap: 1rem;
    min-height: 300px;
    padding: 1rem;
    display: grid
  }

  .lift-scene__shaft {
    background: color-mix(in oklch, var(--map-ink) 5%, transparent);
    border: 1px solid color-mix(in oklch, var(--map-ink) 18%, transparent);
    border-radius: 8px 8px 3px 3px;
    grid-template-rows: repeat(5, 1fr);
    min-height: 250px;
    display: grid;
    position: relative;
    overflow: hidden
  }

  .lift-scene__shaft>span {
    border-bottom: 1px solid color-mix(in oklch, var(--map-ink) 14%, transparent)
  }

  .lift-scene__shaft>span:last-of-type {
    border-bottom: 0
  }

  .lift-scene__shaft:before,
  .lift-scene__shaft:after {
    content: "";
    background: color-mix(in oklch, var(--map-ink) 17%, transparent);
    width: 1px;
    position: absolute;
    top: 0;
    bottom: 0
  }

  .lift-scene__shaft:before {
    left: 33%
  }

  .lift-scene__shaft:after {
    right: 33%
  }

  .lift-scene__car {
    height: 44px;
    color: var(--map-bg);
    background: var(--map-accent);
    box-shadow: 0 8px 20px color-mix(in oklch, var(--map-accent) 28%, transparent);
    border-radius: 5px;
    place-items: center;
    display: grid;
    position: absolute;
    bottom: 21%;
    left: 13%;
    right: 13%
  }

  .lift-scene__car i {
    background: color-mix(in oklch, var(--map-bg) 48%, transparent);
    width: 1px;
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 50%
  }

  .lift-scene__car b {
    font: 850 .8rem ui-monospace, monospace
  }

  .lift-scene__call {
    align-content: center;
    gap: .65rem;
    display: grid
  }

  .lift-scene__call>span {
    color: var(--map-muted);
    font-size: .68rem
  }

  .lift-scene__call strong {
    align-items: center;
    gap: .55rem;
    font-size: .9rem;
    line-height: 1.25;
    display: flex
  }

  .lift-scene__call strong i {
    aspect-ratio: 1;
    background: var(--orange);
    box-shadow: 0 0 0 5px color-mix(in oklch, var(--orange) 13%, transparent), 0 0 14px var(--orange);
    border-radius: 50%;
    flex: 0 0 10px
  }

  .lift-scene__call small {
    width: fit-content;
    color: color-mix(in oklch, var(--orange) 72%, var(--map-ink));
    background: color-mix(in oklch, var(--orange) 10%, transparent);
    border-radius: 999px;
    padding: .38rem .55rem;
    font-size: .58rem;
    font-weight: 760
  }

  .equipment-chain {
    align-content: center;
    gap: .6rem;
    min-height: 300px;
    display: grid
  }

  .equipment-unit {
    background: var(--map-panel-2);
    border: 1px solid var(--map-line);
    border-radius: 16px;
    grid-template-columns: minmax(0, 1fr) 120px;
    align-items: center;
    gap: .7rem;
    min-height: 125px;
    padding: .75rem .8rem;
    display: grid
  }

  .equipment-unit__copy {
    gap: .25rem;
    min-width: 0;
    display: grid
  }

  .equipment-unit__copy span {
    color: var(--map-muted);
    font-size: .58rem
  }

  .equipment-unit__copy strong {
    letter-spacing: -.025em;
    font-size: 1.15rem
  }

  .equipment-unit__copy small {
    color: var(--map-muted);
    font-size: .55rem;
    line-height: 1.35
  }

  .equipment-unit .device-art {
    transform-origin: 50%;
    width: 120px;
    min-height: 105px;
    filter: drop-shadow(10px 13px 11px color-mix(in oklch, var(--map-ink) 18%, transparent));
    scale: .58
  }

  .equipment-link {
    color: var(--map-muted);
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .6rem;
    padding-inline: .8rem;
    font: 720 .56rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    display: grid
  }

  .equipment-link i {
    background: color-mix(in oklch, var(--map-accent) 45%, var(--map-line));
    height: 1px;
    position: relative
  }

  .equipment-link i:after {
    content: "";
    aspect-ratio: 1;
    border-top: 1px solid var(--map-accent);
    border-right: 1px solid var(--map-accent);
    width: 7px;
    position: absolute;
    top: 50%;
    right: 0;
    translate: 0 -50%;
    rotate: 45deg
  }

  .dispatch-screen {
    color: oklch(90% .01 155);
    background: oklch(12% .026 165);
    border: 5px solid oklch(28% .012 160);
    border-radius: 10px;
    min-height: 300px;
    overflow: hidden;
    box-shadow: 0 18px 34px oklch(5% .02 165/.28), inset 0 0 0 1px oklch(100% 0 0/.08)
  }

  .dispatch-screen__topbar {
    color: oklch(70% .015 160);
    background: oklch(19% .026 165);
    border-bottom: 1px solid oklch(100% 0 0/.08);
    justify-content: space-between;
    align-items: center;
    gap: .6rem;
    min-height: 34px;
    padding-inline: .7rem;
    font: 650 .52rem/1 Arial, sans-serif;
    display: flex
  }

  .dispatch-screen__topbar strong {
    color: var(--lime);
    align-items: center;
    gap: .35rem;
    display: inline-flex
  }

  .dispatch-screen__topbar strong i {
    aspect-ratio: 1;
    background: currentColor;
    border-radius: 50%;
    width: 6px
  }

  .dispatch-screen__body {
    grid-template-columns: 82px 1fr;
    min-height: 260px;
    display: grid
  }

  .dispatch-screen__tree {
    background: oklch(16% .027 165);
    border-right: 1px solid oklch(100% 0 0/.07);
    align-content: start;
    gap: 2px;
    padding: .7rem .45rem;
    display: grid
  }

  .dispatch-screen__tree strong {
    color: oklch(66% .014 160);
    text-transform: uppercase;
    margin-bottom: .35rem;
    font-size: .5rem
  }

  .dispatch-screen__tree span {
    color: oklch(68% .014 160);
    border-radius: 4px;
    padding: .38rem .4rem;
    font-size: .5rem;
    position: relative
  }

  .dispatch-screen__tree .is-active {
    color: oklch(94% .008 155);
    background: oklch(100% 0 0/.07)
  }

  .dispatch-screen__tree .has-event {
    color: oklch(94% .008 155)
  }

  .dispatch-screen__tree .has-event i {
    aspect-ratio: 1;
    color: oklch(20% .03 165);
    background: var(--orange);
    border-radius: 50%;
    place-items: center;
    width: 14px;
    font-size: .42rem;
    font-style: normal;
    font-weight: 900;
    display: grid;
    position: absolute;
    top: 50%;
    right: 4px;
    translate: 0 -50%
  }

  .dispatch-screen__workspace {
    background-color: oklch(13% .027 165);
    background-image: linear-gradient(oklch(100% 0 0/.035) 1px, #0000 1px), linear-gradient(90deg, oklch(100% 0 0/.035) 1px, #0000 1px), none;
    background-position: 0 0, 0 0, 0 0;
    background-repeat: repeat, repeat, repeat;
    background-size: 22px 22px;
    background-attachment: scroll, scroll, scroll;
    background-origin: padding-box, padding-box, padding-box;
    background-clip: border-box, border-box, border-box;
    align-content: center;
    gap: .8rem;
    padding: .8rem;
    display: grid
  }

  .dispatch-event {
    border: 1px solid color-mix(in oklch, var(--orange) 55%, transparent);
    border-left: 4px solid var(--orange);
    background: oklch(20% .033 165/.94);
    border-radius: 7px;
    padding: .85rem;
    box-shadow: 0 12px 26px oklch(5% .02 165/.25)
  }

  .dispatch-event__type {
    color: var(--orange);
    text-transform: uppercase;
    font: 780 .48rem/1 ui-monospace, monospace
  }

  .dispatch-event strong {
    margin-top: .45rem;
    font-size: .76rem;
    line-height: 1.25;
    display: block
  }

  .dispatch-event p {
    color: oklch(70% .014 160);
    margin-top: .35rem;
    font-size: .53rem;
    line-height: 1.4
  }

  .dispatch-event>div {
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .65rem;
    display: flex
  }

  .dispatch-event>div span {
    color: oklch(72% .016 160);
    background: oklch(100% 0 0/.06);
    border-radius: 3px;
    padding: .25rem .35rem;
    font: .44rem ui-monospace, monospace
  }

  .dispatch-actions {
    flex-wrap: wrap;
    gap: .4rem;
    display: flex
  }

  .dispatch-actions span {
    color: oklch(75% .014 160);
    background: oklch(100% 0 0/.06);
    border: 1px solid oklch(100% 0 0/.08);
    border-radius: 4px;
    padding: .42rem .55rem;
    font-size: .48rem
  }

  .dispatch-actions .is-primary {
    color: oklch(17% .03 165);
    background: var(--lime);
    border-color: var(--lime);
    font-weight: 800
  }

  .signal-route__flow {
    z-index: 2;
    color: var(--map-muted);
    background: color-mix(in oklch, var(--map-panel) 82%, transparent);
    border: 1px solid var(--map-line);
    border-radius: 14px;
    grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
    align-items: center;
    gap: .65rem;
    margin: 0 clamp(1rem, 2.4cqw, 1.8rem);
    padding: .85rem 1rem;
    font: 720 .58rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    display: grid;
    position: relative
  }

  .signal-route__flow i {
    background: color-mix(in oklch, var(--map-accent) 48%, var(--map-line));
    height: 1px;
    position: relative
  }

  .signal-route__flow i:after {
    content: "";
    aspect-ratio: 1;
    border-top: 1px solid var(--map-accent);
    border-right: 1px solid var(--map-accent);
    width: 6px;
    position: absolute;
    top: 50%;
    right: 0;
    translate: 0 -50%;
    rotate: 45deg
  }

  .system-map__protocols {
    z-index: 2;
    flex-wrap: wrap;
    justify-content: center;
    gap: .45rem;
    padding: 1rem clamp(1rem, 2.4cqw, 1.8rem) 1.4rem;
    display: flex;
    position: relative
  }

  .system-map__protocols span {
    color: var(--map-muted);
    background: color-mix(in oklch, var(--map-panel) 72%, transparent);
    border: 1px solid var(--map-line);
    border-radius: 999px;
    padding: .42rem .62rem;
    font: 650 .55rem/1 ui-monospace, SFMono-Regular, Consolas, monospace
  }

  .system-map--compact {
    margin-top: 0
  }

  .system-map--compact .signal-step {
    min-height: 500px
  }

  .system-map--compact .signal-step__header {
    min-height: 92px
  }

  .system-map--compact .lift-scene,
  .system-map--compact .equipment-chain,
  .system-map--compact .dispatch-screen {
    min-height: 270px
  }

  @container (width<=980px) {
    .signal-route {
      grid-template-columns: 1fr
    }

    .signal-route:before {
      display: none
    }

    .signal-step {
      min-height: 0
    }

    .signal-step__header {
      min-height: auto;
      margin-bottom: 1rem
    }

    .signal-step__result {
      min-height: auto;
      margin-top: 1rem
    }

    .lift-scene {
      grid-template-columns: 150px 1fr;
      min-height: 260px
    }

    .equipment-chain {
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      min-height: 235px
    }

    .equipment-link {
      grid-template-columns: 1fr;
      justify-items: center;
      padding: 0
    }

    .equipment-link i {
      width: 60px
    }

    .equipment-unit {
      text-align: center;
      grid-template-columns: 1fr;
      justify-items: center
    }

    .dispatch-screen {
      min-height: 280px
    }

    .signal-route__flow {
      margin-top: .35rem
    }

    .system-map--compact .signal-step {
      min-height: 0
    }
  }

  @container (width<=580px) {
    .system-map {
      border-radius: 22px
    }

    .system-map__bar {
      align-items: flex-start;
      min-height: 84px;
      padding: 1rem
    }

    .system-map__bar>div>strong {
      font-size: 1.15rem
    }

    .system-map__status {
      padding: .5rem;
      font-size: 0
    }

    .system-map__status i {
      width: 9px
    }

    .signal-route {
      padding: .75rem
    }

    .signal-step {
      border-radius: 18px;
      padding: 1rem
    }

    .lift-scene {
      grid-template-columns: 105px 1fr;
      min-height: 230px;
      padding: .75rem
    }

    .lift-scene__shaft {
      min-height: 205px
    }

    .equipment-chain {
      grid-template-columns: 1fr;
      min-height: 0
    }

    .equipment-unit {
      text-align: left;
      grid-template-columns: minmax(0, 1fr) 105px;
      justify-items: stretch;
      min-height: 120px
    }

    .equipment-unit .device-art {
      width: 105px;
      scale: .5
    }

    .equipment-link {
      grid-template-columns: auto 1fr;
      justify-items: stretch;
      padding-inline: .5rem
    }

    .equipment-link i {
      width: auto
    }

    .dispatch-screen__body {
      grid-template-columns: 68px 1fr
    }

    .dispatch-screen__tree span:first-of-type,
    .dispatch-screen__tree span:nth-of-type(5) {
      display: none
    }

    .signal-route__flow {
      text-align: center;
      grid-template-columns: 1fr;
      gap: .4rem;
      margin-inline: .75rem
    }

    .signal-route__flow i {
      width: 1px;
      height: 16px;
      margin-inline: auto
    }

    .signal-route__flow i:after {
      top: auto;
      bottom: 0;
      right: 50%;
      translate: 50%;
      rotate: 135deg
    }

    .system-map__protocols {
      scrollbar-width: none;
      flex-wrap: nowrap;
      justify-content: flex-start;
      padding-inline: .75rem;
      overflow-x: auto
    }

    .system-map__protocols::-webkit-scrollbar {
      display: none
    }

    .system-map__protocols span {
      flex: none
    }
  }

  @media (prefers-reduced-motion:reduce) {
    .signal-step {
      transition: none
    }
  }

  .hero__intro--device {
    grid-template-columns: minmax(0, .96fr) minmax(430px, .7fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 4.5rem)
  }

  .hero__message {
    align-content: center;
    display: grid
  }

  .hero__message .lead {
    max-width: 46rem;
    color: var(--muted);
    margin-top: 2rem
  }

  .hero__message .hero__actions {
    margin-top: 2rem
  }

  .hero__intro--device h1 {
    max-width: 820px;
    font-size: clamp(4.4rem, 7vw, 7.6rem)
  }

  .kun-hero {
    color: #f2f7f4;
    border: 1px solid color-mix(in oklch, var(--green) 42%, transparent);
    background-color: #0c332a;
    background-image: linear-gradient(oklch(100% 0 0/.045) 1px, #0000 1px), linear-gradient(90deg, oklch(100% 0 0/.045) 1px, #0000 1px), none;
    background-position: 0 0, 0 0, 0 0;
    background-repeat: repeat, repeat, repeat;
    background-size: 32px 32px;
    background-attachment: scroll, scroll, scroll;
    background-origin: padding-box, padding-box, padding-box;
    background-clip: border-box, border-box, border-box;
    border-radius: 30px;
    min-width: 0;
    position: relative;
    overflow: clip;
    box-shadow: 0 30px 70px oklch(20% .04 165/.22)
  }

  .kun-hero:after {
    content: "";
    pointer-events: none;
    background: radial-gradient(circle, color-mix(in oklch, var(--lime) 15%, transparent), transparent 68%);
    height: 56%;
    position: absolute;
    inset: auto -18% -35% 30%
  }

  .kun-hero__bar,
  .kun-hero__footer {
    z-index: 2;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    display: flex;
    position: relative
  }

  .kun-hero__bar {
    color: #a7c3b8;
    letter-spacing: .11em;
    text-transform: uppercase;
    border-bottom: 1px solid oklch(100% 0 0/.1);
    min-height: 52px;
    padding: .8rem 1.1rem;
    font: 700 .62rem ui-monospace, monospace
  }

  .kun-hero__bar>div {
    align-items: center;
    gap: .55rem;
    display: flex
  }

  .kun-hero__dot {
    aspect-ratio: 1;
    background: var(--lime);
    width: 8px;
    box-shadow: 0 0 12px var(--lime);
    border-radius: 50%
  }

  .kun-hero__device {
    z-index: 1;
    place-items: center;
    padding: .55rem 1rem 0;
    display: grid;
    position: relative
  }

  .kun-hero__device svg {
    width: min(100%, 430px);
    height: auto;
    display: block
  }

  .kun-device-preview {
    pointer-events: none;
    place-items: center;
    min-width: 0;
    padding: clamp(.25rem, 1vw, 1rem);
    display: grid
  }

  .kun-device-preview svg {
    filter: drop-shadow(0 28px 28px oklch(18% .035 165/.2));
    width: min(100%, 620px);
    height: auto;
    display: block;
    overflow: visible
  }

  .kun-hero__body {
    z-index: 2;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 1rem;
    padding: 0 1.25rem .85rem;
    display: grid;
    position: relative
  }

  .kun-hero__eyebrow {
    color: #9fc2b4;
    letter-spacing: .1em;
    text-transform: uppercase;
    font: 700 .57rem ui-monospace, monospace
  }

  .kun-hero h2 {
    color: #f5f8f5;
    margin-top: .4rem;
    font-size: clamp(1.55rem, 2.1vw, 2.25rem);
    line-height: .98
  }

  .kun-hero__channel {
    background: #173f35;
    border: 1px solid #4f7769;
    border-radius: 15px;
    gap: .15rem;
    min-width: 126px;
    padding: .75rem .9rem;
    display: grid
  }

  .kun-hero__channel span {
    color: #8faf9f;
    letter-spacing: .1em;
    text-transform: uppercase;
    font: 700 .55rem ui-monospace, monospace
  }

  .kun-hero__channel strong {
    font-size: .82rem
  }

  .kun-hero[data-phase=connected] .kun-hero__channel {
    border-color: var(--lime);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--lime) 10%, transparent)
  }

  .kun-hero__footer {
    background: oklch(21.7981% .0325018 174.252/.76);
    border-top: 1px solid oklch(100% 0 0/.1);
    padding: .85rem 1rem 1rem 1.25rem
  }

  .kun-hero__footer p {
    color: #8eaba0;
    text-transform: uppercase;
    max-width: 17rem;
    margin: 0;
    font: 600 .52rem/1.45 ui-monospace, monospace
  }

  .kun-hero__footer button {
    color: #102f27;
    background: var(--lime);
    white-space: nowrap;
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    justify-content: space-between;
    align-items: center;
    gap: .7rem;
    min-width: 184px;
    min-height: 44px;
    padding: .65rem .7rem .65rem 1rem;
    font: 800 .7rem Inter, Manrope, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
    display: inline-flex
  }

  .kun-hero__footer button>span:last-child {
    aspect-ratio: 1;
    background: #f3ffd3;
    border-radius: 50%;
    place-items: center;
    width: 30px;
    font-size: 1rem;
    display: grid
  }

  .kun-hero__footer button:disabled {
    cursor: wait;
    opacity: .8
  }

  .kun-hero__footer button:focus-visible {
    outline-offset: 3px;
    outline: 3px solid #fff
  }

  .kun-product-hero {
    padding-block: clamp(4.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem);
    overflow: clip
  }

  .kun-product-hero__grid {
    grid-template-columns: minmax(0, .95fr) minmax(430px, .7fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    display: grid
  }

  .kun-product-hero__copy {
    align-content: center;
    display: grid
  }

  .kun-product-hero h1 {
    max-width: 850px;
    margin-top: 1.25rem;
    font-size: clamp(4rem, 7vw, 7.4rem)
  }

  .kun-product-hero h1 em {
    color: var(--green);
    font-style: normal
  }

  .kun-product-hero .lead {
    max-width: 46rem;
    margin-top: 2rem
  }

  .kun-product-hero .hero__actions {
    margin-top: 2rem
  }

  .kun-product-note {
    letter-spacing: .04em;
    text-transform: uppercase;
    max-width: 36rem;
    margin-top: 1.2rem;
    font: 650 .58rem/1.55 ui-monospace, monospace
  }

  .kun-facts {
    background: var(--dark);
    padding-block: 1.1rem
  }

  .kun-facts__grid {
    grid-template-columns: repeat(5, 1fr);
    display: grid
  }

  .kun-facts__grid>div {
    border-left: 1px solid oklch(100% 0 0/.12);
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .75rem;
    min-height: 92px;
    padding: 1rem 1.4rem;
    display: grid
  }

  .kun-facts__grid>div:first-child {
    border-left: 0
  }

  .kun-facts strong {
    color: #f4f8f5;
    letter-spacing: -.06em;
    font-size: clamp(1.8rem, 3vw, 3rem)
  }

  .kun-facts span {
    color: #9bb3aa;
    text-transform: uppercase;
    font-size: .63rem;
    line-height: 1.25
  }

  .kun-passport {
    grid-template-columns: minmax(0, 1fr) minmax(260px, .34fr);
    align-items: start;
    gap: 1rem;
    display: grid
  }

  .kun-passport__visual {
    color: #173c32;
    background: #e8ece2;
    border: 1px solid #bbc6bb;
    border-radius: 26px;
    min-width: 0;
    padding: 1rem;
    overflow: clip
  }

  .kun-passport__labels {
    color: #53675f;
    letter-spacing: .08em;
    text-transform: uppercase;
    justify-content: space-between;
    gap: 1rem;
    padding: .1rem .5rem .8rem;
    font: 750 .58rem ui-monospace, monospace;
    display: flex
  }

  .kun-passport__visual svg {
    width: 100%;
    height: auto
  }

  .kun-passport__visual>p {
    color: #55665f;
    margin: .6rem .5rem 0;
    font: 650 .58rem/1.5 ui-monospace, monospace
  }

  .kun-passport svg .od-port.is-selected .od-hit {
    stroke: #d7ff72;
    stroke-width: 6px
  }

  .kun-passport svg .od-port:focus-visible {
    outline: none
  }

  .kun-passport svg .od-port:focus-visible .od-hit {
    stroke: var(--lime);
    stroke-width: 6px
  }

  .kun-passport__readout {
    top: calc(var(--header) + 1.2rem);
    background: #173f35;
    border: 1px solid #4d7668;
    border-radius: 22px;
    gap: .8rem;
    padding: 1.5rem;
    display: grid;
    position: sticky
  }

  .kun-passport__readout>span {
    color: var(--lime);
    letter-spacing: .1em;
    text-transform: uppercase;
    font: 750 .58rem ui-monospace, monospace
  }

  .kun-passport__readout strong {
    color: #fff;
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    line-height: 1.05
  }

  .kun-passport__readout p {
    color: #b6cbc2;
    font-size: .82rem
  }

  .kun-passport__legend {
    border-top: 1px solid oklch(100% 0 0/.12);
    gap: .6rem;
    margin-top: .5rem;
    padding-top: 1rem;
    display: grid
  }

  .kun-passport__legend span {
    color: #99b2a8;
    align-items: center;
    gap: .55rem;
    font-size: .64rem;
    display: flex
  }

  .kun-passport__legend i {
    aspect-ratio: 1;
    background: var(--lime);
    border-radius: 50%;
    width: 8px
  }

  .kun-passport__legend span:last-child i {
    background: var(--orange)
  }

  @media (width<=1060px) {
    .hero__intro--device {
      grid-template-columns: minmax(0, 1fr) minmax(390px, .78fr)
    }

    .hero__intro--device h1 {
      font-size: clamp(4rem, 7.8vw, 6.5rem)
    }

    .kun-hero__body {
      grid-template-columns: 1fr
    }

    .kun-hero__channel {
      justify-self: start
    }

    .kun-product-hero__grid {
      grid-template-columns: minmax(0, 1fr) minmax(390px, .78fr)
    }
  }

  @media (width<=900px) {
    .hero__intro--device {
      grid-template-columns: 1fr
    }

    .hero__message {
      max-width: 760px
    }

    .kun-hero {
      justify-self: center;
      width: min(100%, 650px)
    }

    .kun-product-hero__grid {
      grid-template-columns: 1fr
    }

    .kun-product-hero__copy {
      max-width: 760px
    }

    .kun-passport {
      grid-template-columns: 1fr
    }

    .kun-passport__readout {
      position: static
    }

    .kun-facts__grid {
      grid-template-columns: repeat(3, 1fr)
    }

    .kun-facts__grid>div:nth-child(4) {
      border-left: 0
    }
  }

  @media (width<=680px) {
    .hero__intro--device h1 {
      overflow-wrap: anywhere;
      font-size: clamp(2.7rem, 11vw, 4.3rem);
      line-height: .94
    }

    .hero__message .lead {
      margin-top: 1.5rem
    }

    .kun-hero {
      border-radius: 22px
    }

    .kun-hero__device {
      padding-inline: .25rem
    }

    .kun-hero__body {
      padding-inline: 1rem
    }

    .kun-hero__footer {
      flex-direction: column;
      align-items: stretch;
      padding-inline: 1rem
    }

    .kun-hero__footer p {
      max-width: none
    }

    .kun-hero__footer button {
      justify-content: space-between;
      width: 100%
    }

    .kun-product-hero {
      padding-top: 3.6rem
    }

    .kun-product-hero h1 {
      overflow-wrap: anywhere;
      font-size: clamp(2.8rem, 12vw, 4.6rem)
    }

    .kun-facts__grid {
      grid-template-columns: 1fr 1fr
    }

    .kun-facts__grid>div {
      border-bottom: 1px solid oklch(100% 0 0/.12);
      min-height: 82px;
      padding: .8rem
    }

    .kun-facts__grid>div:nth-child(odd) {
      border-left: 0
    }

    .kun-facts__grid>div:nth-child(4) {
      border-left: 1px solid oklch(100% 0 0/.12)
    }

    .kun-facts__grid>div:last-child {
      border-bottom: 0;
      grid-column: 1/-1
    }

    .kun-passport__visual {
      border-radius: 18px;
      padding: .55rem
    }

    .kun-passport__labels {
      flex-direction: column;
      align-items: flex-start;
      gap: .2rem
    }
  }

  .twin {
    color: #18342d;
    transform-origin: 50%;
    font-family: Arial, sans-serif;
    position: relative
  }

  .twin--kio {
    aspect-ratio: 3.48;
    background: linear-gradient(#dddcd2, #bcbdb7);
    border: 1px solid #7d837e;
    border-radius: 3px;
    width: 216px;
    padding: 5px 7px;
    box-shadow: inset 0 1px #fff, inset 0 -2px 4px #6b716d55
  }

  .twin-kio__face {
    background: #d6d5cb;
    border: 1px solid #9ca09a;
    height: 100%;
    position: relative
  }

  .twin-kio__power {
    grid-template-columns: 8px auto;
    align-items: center;
    gap: 2px 3px;
    font-size: 4px;
    display: grid;
    position: absolute;
    top: 10px;
    left: 6px
  }

  .twin-kio__power i {
    aspect-ratio: 1;
    background: #222;
    border: 2px solid #555;
    border-radius: 50%;
    grid-row: 1/3;
    width: 8px
  }

  .twin-kio__power b {
    font-size: 4px
  }

  .twin-kio__switch {
    justify-items: center;
    gap: 2px;
    font-size: 3px;
    display: grid;
    position: absolute;
    top: 17px;
    left: 42px
  }

  .twin-kio__switch i {
    background: linear-gradient(90deg, #111 50%, #2e3432 50%);
    border: 2px solid #171a19;
    border-radius: 1px;
    width: 18px;
    height: 20px
  }

  .twin-kio__lines {
    gap: 4px;
    display: flex;
    position: absolute;
    top: 7px;
    left: 72px
  }

  .twin-kio__lines span {
    grid-template-columns: repeat(2, 7px);
    gap: 2px;
    padding-top: 8px;
    display: grid;
    position: relative
  }

  .twin-kio__lines b {
    font-size: 6px;
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50%
  }

  .twin-kio__lines i {
    background: repeating-linear-gradient(#ef822b 0 4px, #55a857 4px 8px);
    border: 1px solid #2e653d;
    height: 24px
  }

  .twin-kio__lines small {
    white-space: nowrap;
    grid-column: 1/-1;
    font-size: 3px
  }

  .twin-kio__signals {
    gap: 6px;
    font-size: 4px;
    font-weight: 700;
    display: grid;
    position: absolute;
    top: 14px;
    left: 118px
  }

  .twin-kio__signals span {
    align-items: center;
    gap: 3px;
    display: flex
  }

  .twin-kio__signals i {
    aspect-ratio: 1;
    background: #939b94;
    border: 1px solid #4a514c;
    border-radius: 50%;
    width: 5px
  }

  .twin-kio__signals i.is-on {
    background: #2e9454;
    box-shadow: 0 0 4px #44ca72
  }

  .twin-kio__brand {
    justify-items: end;
    gap: 3px;
    display: grid;
    position: absolute;
    top: 6px;
    right: 6px
  }

  .twin-kio__brand b {
    font-size: 5px
  }

  .twin-kio__brand strong {
    font-size: 7px
  }

  .twin-kio__ports {
    align-items: end;
    gap: 3px;
    font-size: 3px;
    display: flex;
    position: absolute;
    bottom: 5px;
    right: 7px
  }

  .twin-rj45 {
    background: linear-gradient(#1c2522 0 55%, #87918b 55%);
    border: 2px solid #6d7772;
    border-radius: 1px;
    width: 16px;
    height: 13px;
    display: block
  }

  .twin-usb {
    background: #17211e;
    border: 2px solid #7d8581;
    width: 15px;
    height: 6px
  }

  .twin-terminal {
    background: repeating-linear-gradient(90deg, #69aa58 0 6px, #ee8e2d 6px 8px);
    border: 1px solid #397243;
    width: 28px;
    height: 14px;
    display: block
  }

  .twin-terminal--small {
    width: 14px
  }

  .twin--kun-ip8 {
    place-items: center;
    width: 205px;
    display: grid
  }

  .twin--kun-ip8 svg {
    width: 100%;
    height: auto;
    display: block
  }

  .twin--pcb {
    background: #0e704f;
    border: 1px solid #07513a;
    box-shadow: inset 0 0 0 2px #45a27c55
  }

  .twin--pcb:after {
    content: "";
    pointer-events: none;
    background: repeating-linear-gradient(90deg, #0000 0 12px, #8fc6a01f 12px 13px), repeating-linear-gradient(#0000 0 15px, #8fc6a018 15px 16px);
    position: absolute;
    inset: 7px
  }

  .twin--kcs {
    border-radius: 2px;
    width: 128px;
    height: 195px
  }

  .twin-terminal--left,
  .twin-terminal--right {
    z-index: 2;
    background: repeating-linear-gradient(#68b865 0 7px, #f29a35 7px 10px);
    width: 16px;
    height: 92px;
    position: absolute;
    top: 16px
  }

  .twin-terminal--left {
    left: -7px
  }

  .twin-terminal--right {
    right: -7px
  }

  .twin-terminal--bottom-left {
    z-index: 2;
    background: repeating-linear-gradient(#69b763 0 7px, #f29a35 7px 10px);
    width: 20px;
    height: 62px;
    position: absolute;
    bottom: 14px;
    left: 4px
  }

  .twin-terminal--bottom-right {
    z-index: 2;
    background: repeating-linear-gradient(#69b763 0 7px, #f29a35 7px 10px);
    width: 16px;
    height: 38px;
    position: absolute;
    bottom: 16px;
    right: 4px
  }

  .twin-pcb__chips {
    z-index: 1;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    display: grid;
    position: absolute;
    inset: 18px 27px 78px
  }

  .twin-pcb__chips i,
  .twin-kir__chips i,
  .twin-board__chips i {
    background: #15221e;
    border: 1px solid #73827a;
    min-width: 8px;
    min-height: 8px;
    box-shadow: 0 0 0 1px #c8b68133
  }

  .twin-pcb__chips i.is-wide {
    grid-column: span 2
  }

  .twin-rj45--pcb {
    z-index: 2;
    width: 24px;
    height: 22px;
    position: absolute;
    top: 94px;
    right: 17px
  }

  .twin-pcb__label {
    z-index: 2;
    color: #e8f5ee;
    gap: 2px;
    font-size: 4px;
    display: grid;
    position: absolute;
    bottom: 40px;
    left: 29px
  }

  .twin-pcb__label strong {
    font-size: 8px
  }

  .twin-pcb__status {
    z-index: 2;
    color: #e7f4ed;
    gap: 4px;
    font-size: 3px;
    display: grid;
    position: absolute;
    bottom: 59px;
    right: 7px
  }

  .twin-pcb__status span {
    align-items: center;
    gap: 2px;
    display: flex
  }

  .twin-pcb__status i {
    aspect-ratio: 1;
    background: #6b7b73;
    border-radius: 50%;
    width: 4px
  }

  .twin-pcb__status i.is-on {
    background: #bfff54;
    box-shadow: 0 0 5px #bfff54
  }

  .twin-power-module {
    z-index: 2;
    color: #d7ddd9;
    background: #101b18;
    place-items: center;
    width: 62px;
    height: 32px;
    font-size: 5px;
    display: grid;
    position: absolute;
    bottom: 5px;
    right: 24px
  }

  .twin--sealed {
    background: linear-gradient(145deg, #d2d5d0, #aeb3ae);
    border: 1px solid #878e89;
    box-shadow: inset 2px 2px 3px #fff, inset -4px -5px 7px #5c645f33
  }

  .twin--ksl,
  .twin--kup {
    border-radius: 8px;
    width: 132px;
    height: 178px
  }

  .twin-screw {
    z-index: 3;
    aspect-ratio: 1;
    background: linear-gradient(45deg, #5e6661, #d9dedb);
    border: 1px solid #626a65;
    border-radius: 50%;
    width: 8px;
    position: absolute
  }

  .twin-screw:after {
    content: "";
    background: #58605b;
    position: absolute;
    inset: 3px 1px;
    rotate: 45deg
  }

  .twin-screw--tl {
    top: 7px;
    left: 7px
  }

  .twin-screw--tr {
    top: 7px;
    right: 7px
  }

  .twin-screw--bl {
    bottom: 7px;
    left: 7px
  }

  .twin-screw--br {
    bottom: 7px;
    right: 7px
  }

  .twin-sealed__label {
    color: #222b27;
    background: #e8ebe8;
    border: 1px solid #959c97;
    position: absolute;
    left: 14px;
    right: 14px
  }

  .twin-sealed__label--ksl {
    text-align: center;
    gap: 3px;
    padding: 8px 7px;
    display: grid;
    top: 30px
  }

  .twin-sealed__label--ksl span {
    font-size: 4px
  }

  .twin-sealed__label--ksl b {
    font-size: 6px
  }

  .twin-sealed__label--ksl strong {
    font-size: 7px;
    line-height: 1.2
  }

  .twin-sealed__label--ksl small {
    letter-spacing: .05em;
    border-top: 1px solid #8f9691;
    margin-top: 3px;
    padding-top: 3px;
    font: 5px ui-monospace, monospace
  }

  .twin-sealed__label--kup {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 6px;
    display: grid;
    top: 55px
  }

  .twin-sealed__label--kup span {
    border-bottom: 1px solid #858c87;
    font: 4px ui-monospace, monospace
  }

  .twin-sealed__label--kup b {
    font-size: 7px
  }

  .twin-sealed__label--kup strong {
    text-align: right;
    font-size: 9px
  }

  .twin-sealed__label--kup small {
    text-align: center;
    border-top: 1px solid #858c87;
    grid-column: 1/-1;
    padding-top: 4px;
    font: 4px ui-monospace, monospace
  }

  .twin-warning {
    aspect-ratio: 1;
    color: #171b19;
    clip-path: polygon(50% 0, 100% 90%, 0 90%);
    background: #e9d24a;
    border: 3px solid #242a27;
    grid-row: span 2;
    place-items: center;
    width: 28px;
    margin-inline: auto;
    font: 900 17px/1 sans-serif;
    display: grid
  }

  .twin-glands {
    gap: 10px;
    display: flex;
    position: absolute;
    bottom: -5px;
    left: 50%;
    translate: -50%
  }

  .twin-glands i {
    background: #939a95;
    border: 1px solid #68706b;
    border-radius: 0 0 8px 8px;
    width: 18px;
    height: 9px
  }

  .twin--kir {
    border-radius: 1px;
    width: 69px;
    height: 190px
  }

  .twin-kir__terminals {
    z-index: 2;
    background: #5faf55;
    border: 1px solid #326d3a;
    grid-template-rows: repeat(16, 1fr);
    width: 17px;
    padding: 2px;
    display: grid;
    position: absolute;
    top: 7px;
    bottom: 8px;
    right: -7px
  }

  .twin-kir__terminals i {
    background: #ef9334;
    border-bottom: 1px solid #478446
  }

  .twin-kir__chips {
    z-index: 2;
    gap: 7px;
    display: grid;
    position: absolute;
    top: 39px;
    left: 10px
  }

  .twin-kir__chips i {
    width: 12px;
    height: 11px
  }

  .twin-kir__chips i.is-main {
    width: 25px;
    height: 44px
  }

  .twin-kir__led {
    z-index: 2;
    aspect-ratio: 1;
    background: #dd4c35;
    border: 1px solid #7f241d;
    border-radius: 50%;
    width: 7px;
    position: absolute;
    left: 10px;
    box-shadow: 0 0 4px #e84f35
  }

  .twin-kir__led--top {
    top: 8px
  }

  .twin-kir__led--bottom {
    bottom: 58px
  }

  .twin-pcb__label--vertical {
    transform-origin: 0 100%;
    white-space: nowrap;
    bottom: 16px;
    left: 31px;
    rotate: -90deg
  }

  .twin-pcb__label--vertical strong {
    font-size: 6px
  }

  .twin-pcb__label--vertical small {
    font-size: 3px
  }

  .twin--open-box {
    background: #d2d5ce;
    border: 1px solid #8b928c;
    box-shadow: inset 0 0 0 8px #e7e9e3, inset 0 0 0 10px #b5bbb5
  }

  .twin--kun2dm {
    border-radius: 9px;
    width: 200px;
    height: 150px;
    padding: 18px 16px
  }

  .twin-box__board {
    z-index: 2;
    background: #0d6a49;
    border: 1px solid #074d37;
    width: 100%;
    height: 100%;
    position: relative
  }

  .twin-box__glands {
    z-index: 1;
    justify-content: space-between;
    display: flex;
    position: absolute;
    left: 24px;
    right: 24px
  }

  .twin-box__glands--top {
    top: 2px
  }

  .twin-box__glands--bottom {
    bottom: 2px
  }

  .twin-box__glands i {
    background: #aeb4ae;
    border: 1px solid #808781;
    border-radius: 50% 50% 30% 30%;
    width: 19px;
    height: 13px
  }

  .twin-board__chips {
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    display: grid;
    position: absolute;
    inset: 10px 12px 37px
  }

  .twin-board__chips i {
    min-height: 9px
  }

  .twin-board__chips i.is-main {
    grid-column: span 2;
    min-height: 19px
  }

  .twin-board__led {
    aspect-ratio: 1;
    background: #d5422c;
    border-radius: 50%;
    width: 6px;
    position: absolute;
    top: 14px;
    left: 9px;
    box-shadow: 0 0 4px #e84d35
  }

  .twin-board__label {
    color: #d9efe5;
    font-size: 3px;
    display: grid;
    position: absolute;
    top: 9px;
    right: 9px
  }

  .twin-board__label strong {
    font-size: 6px
  }

  .twin-board__terminal {
    background: #54a84f;
    border: 1px solid #286638;
    grid-template-columns: repeat(22, 1fr);
    gap: 1px;
    height: 19px;
    padding: 2px;
    display: grid;
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px
  }

  .twin-board__terminal i {
    background: #ef9231;
    border-radius: 0 0 2px 2px
  }

  .twin--upsl {
    background: #b7bab1;
    border: 1px solid #777e79;
    border-radius: 7px;
    width: 104px;
    height: 188px;
    padding: 11px 8px;
    box-shadow: inset 0 0 0 5px #d3d5cf, inset 0 0 0 6px #868d88
  }

  .twin-upsl__title {
    text-align: center;
    margin: 1px 8px 0;
    font-size: 5px;
    display: block
  }

  .twin-upsl__speaker {
    gap: 3px;
    width: 55px;
    margin: 11px auto 7px;
    display: grid
  }

  .twin-upsl__speaker i {
    background: #17201d;
    border-radius: 999px;
    height: 3px
  }

  .twin-upsl__speaker i:nth-child(2n) {
    width: 80%;
    margin-inline: auto
  }

  .twin-upsl__dispatcher {
    border-block: 1px solid #5f6661;
    grid-template-columns: 5px 1fr 5px;
    align-items: center;
    gap: 3px;
    margin-inline: 8px;
    padding-block: 4px;
    font-size: 5px;
    display: grid
  }

  .twin-upsl__dispatcher i {
    aspect-ratio: 1;
    background: #1d2421;
    border-radius: 50%;
    width: 5px
  }

  .twin-upsl__dispatcher span {
    text-align: center
  }

  .twin-upsl__modes {
    grid-template-columns: 1fr 1fr;
    gap: 5px 7px;
    margin: 8px 7px;
    font-size: 4px;
    display: grid
  }

  .twin-upsl__modes span {
    align-items: center;
    gap: 3px;
    display: flex
  }

  .twin-upsl__modes i {
    aspect-ratio: 1;
    background: #2a302d;
    border: 1px solid #565e59;
    border-radius: 50%;
    width: 5px
  }

  .twin-upsl__modes i.is-green {
    background: #27884c
  }

  .twin-upsl__modes i.is-red {
    background: #a62e27
  }

  .twin-upsl__footer {
    text-align: center;
    border-top: 1px solid #5f6661;
    gap: 4px;
    margin: 8px 7px 0;
    padding-top: 4px;
    font-size: 4px;
    display: grid
  }

  .twin-upsl__footer strong {
    font-size: 4px
  }

  .product-card:hover h3 {
    color: var(--green)
  }

  @container (width<=300px) {
    .twin--kio {
      width: 195px
    }

    .twin--kun2dm {
      width: 180px;
      height: 135px
    }
  }

  .product-detail-hero {
    padding-block: clamp(4.5rem, 8vw, 7.5rem) clamp(3.5rem, 7vw, 6rem);
    position: relative;
    overflow: clip
  }

  .product-detail-hero:before {
    content: "";
    pointer-events: none;
    background: radial-gradient(circle at 48% 45%, color-mix(in oklch, var(--green) 11%, transparent), transparent 60%);
    position: absolute;
    inset: 0 0 0 54%
  }

  .product-detail-hero[data-accent=orange]:before {
    background: radial-gradient(circle at 48% 45%, color-mix(in oklch, var(--orange) 13%, transparent), transparent 60%)
  }

  .product-detail-hero[data-accent=cyan]:before {
    background: radial-gradient(circle at 48% 45%, color-mix(in oklch, var(--cyan) 13%, transparent), transparent 60%)
  }

  .product-detail-hero__grid {
    grid-template-columns: minmax(0, .95fr) minmax(390px, .75fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
    display: grid;
    position: relative
  }

  .product-detail-hero__copy {
    min-width: 0
  }

  .product-detail__breadcrumb {
    color: var(--muted);
    letter-spacing: .05em;
    text-transform: uppercase;
    align-items: center;
    gap: .55rem;
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
    font: 700 .68rem ui-monospace, monospace;
    display: flex
  }

  .product-detail__breadcrumb a {
    color: var(--green)
  }

  .product-detail-hero h1 {
    letter-spacing: -.08em;
    margin-top: 1.1rem;
    font-size: clamp(5rem, 10vw, 10rem);
    line-height: .82
  }

  .product-detail-hero h2 {
    max-width: 49rem;
    color: var(--green);
    margin-top: 1.4rem;
    font-size: clamp(2rem, 4vw, 4.3rem);
    line-height: .95
  }

  .product-detail-hero .lead {
    max-width: 44rem;
    margin-top: 1.8rem
  }

  .product-detail__chips {
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.6rem;
    display: flex
  }

  .product-detail__chips span {
    color: var(--muted);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .45rem .65rem;
    font-size: .65rem
  }

  .product-detail__note {
    max-width: 43rem;
    color: var(--muted);
    letter-spacing: .025em;
    text-transform: uppercase;
    margin-top: 1.35rem;
    font: 650 .65rem/1.55 ui-monospace, monospace
  }

  .product-detail__visual {
    place-items: center;
    min-height: 520px;
    margin: 0;
    display: grid;
    position: relative
  }

  .product-detail__visual:before {
    content: "";
    aspect-ratio: 1;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 38px;
    width: min(88%, 500px);
    position: absolute;
    rotate: -2deg;
    box-shadow: inset 0 0 0 1px oklch(100% 5.96046e-8 none/.48)
  }

  .product-detail__visual:has([data-visual=controller]):before {
    aspect-ratio: 1.42;
    border-radius: 34px;
    width: 100%;
    rotate: 1deg
  }

  .product-detail__visual:has([data-visual=meter]):before {
    aspect-ratio: .8;
    border-radius: 44px;
    width: min(70%, 350px);
    rotate: 2deg
  }

  .product-detail__visual:has([data-visual=gateway]):before {
    border-radius: 30% 70% 42% 58%/45% 35% 65% 55%
  }

  .product-detail__visual:has([data-visual=intercom]):before {
    aspect-ratio: .82;
    border-radius: 46px;
    width: min(72%, 380px);
    rotate: -1deg
  }

  .product-detail__visual .device-art {
    filter: drop-shadow(22px 32px 25px oklch(18% .03 165/.22));
    width: 100%;
    min-height: 430px
  }

  .product-detail__visual .twin {
    scale: 1.55
  }

  .product-detail__visual [data-visual=controller] .twin {
    scale: 2
  }

  .product-detail__visual [data-visual=meter] .twin {
    scale: 1.38
  }

  .product-detail__visual figcaption {
    max-width: 34rem;
    color: var(--muted);
    letter-spacing: .025em;
    text-align: center;
    text-transform: uppercase;
    margin-inline: auto;
    font: 650 .62rem/1.5 ui-monospace, monospace;
    position: absolute;
    bottom: .35rem;
    left: 0;
    right: 0
  }

  .product-signal {
    color: #eff8f3;
    background: #0b2d25
  }

  .product-signal__grid {
    grid-template-columns: repeat(3, 1fr);
    display: grid
  }

  .product-signal__grid>li {
    border-left: 1px solid oklch(100% 0 0/.12);
    align-content: center;
    gap: .55rem;
    min-height: 132px;
    padding: 1.6rem;
    display: grid;
    position: relative
  }

  .product-signal__grid>li:first-child {
    border-left: 0
  }

  .product-signal__grid>li:not(:last-child):after {
    content: "→";
    z-index: 2;
    aspect-ratio: 1;
    color: #16342b;
    background: var(--lime);
    border-radius: 50%;
    place-items: center;
    width: 34px;
    font-weight: 900;
    display: grid;
    position: absolute;
    top: 50%;
    right: -17px;
    translate: 0 -50%
  }

  .product-signal__grid span {
    color: #84a89a;
    letter-spacing: .08em;
    font: 700 .58rem ui-monospace, monospace
  }

  .product-signal__grid .is-device strong {
    color: var(--lime)
  }

  .product-detail__content {
    grid-template-columns: minmax(0, .78fr) minmax(430px, 1.22fr);
    align-items: start;
    gap: clamp(2.5rem, 7vw, 7rem);
    display: grid
  }

  .product-detail__role h2 {
    margin-top: 1rem
  }

  .product-detail__role .lead {
    margin-top: 1.5rem
  }

  .product-detail__uses {
    gap: .8rem;
    display: grid
  }

  .product-detail__uses article {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    grid-template-columns: 52px 1fr;
    align-items: center;
    gap: 1rem;
    min-height: 105px;
    padding: 1.25rem;
    display: grid
  }

  .product-detail__uses article>span {
    aspect-ratio: 1;
    width: 44px;
    color: var(--green);
    background: var(--surface-2);
    border-radius: 50%;
    place-items: center;
    font: 800 .65rem ui-monospace, monospace;
    display: grid
  }

  .product-detail__uses h3 {
    font-size: clamp(1.05rem, 2vw, 1.45rem)
  }

  .product-specs-layout {
    grid-template-columns: minmax(0, .78fr) minmax(520px, 1.22fr);
    align-items: start;
    gap: clamp(2.5rem, 7vw, 7rem);
    display: grid
  }

  .product-selection {
    top: calc(var(--header) + 2rem);
    position: sticky
  }

  .product-selection h2 {
    margin-top: 1rem
  }

  .product-selection .lead {
    margin-top: 1.5rem
  }

  .product-specs {
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    display: grid;
    overflow: hidden
  }

  .product-specs>div {
    background: var(--surface);
    min-height: 135px;
    padding: 1.35rem
  }

  .product-specs dt {
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    font: 700 .66rem/1.35 ui-monospace, monospace
  }

  .product-specs dd {
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
    margin: 1.4rem 0 0;
    font-size: clamp(1.15rem, 2vw, 1.75rem);
    font-weight: 780;
    line-height: 1.05
  }

  .product-specs>div:last-child:nth-child(odd) {
    grid-column: 1/-1
  }

  .product-document-grid {
    grid-template-columns: minmax(0, .9fr) minmax(360px, .55fr);
    align-items: center;
    gap: clamp(2.5rem, 7vw, 7rem);
    display: grid
  }

  .product-document-grid h2 {
    max-width: 50rem;
    margin-top: 1rem
  }

  .product-document-grid .lead {
    max-width: 50rem;
    margin-top: 1.4rem
  }

  .product-document {
    color: #f2f8f4;
    min-height: 260px;
    transition: translate .25s var(--ease), border-color .25s var(--ease);
    background: #123b31;
    border: 1px solid #47766a;
    border-radius: 24px;
    gap: 1.1rem;
    padding: 1.7rem;
    text-decoration: none;
    display: grid
  }

  .product-document:hover {
    border-color: var(--lime);
    translate: 0 -4px
  }

  .product-document:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 4px
  }

  .product-document>span {
    color: var(--lime);
    letter-spacing: .08em;
    text-transform: uppercase;
    font: 750 .58rem ui-monospace, monospace
  }

  .product-document strong {
    align-self: end;
    font-size: clamp(1.55rem, 3vw, 2.7rem);
    line-height: 1
  }

  .product-document small {
    color: #a9c1b8;
    font-weight: 750
  }

  .product-document b {
    color: var(--lime);
    align-self: end;
    font-size: .78rem
  }

  .product-document-stack {
    gap: .8rem;
    display: grid
  }

  .product-next-step {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.1rem;
    padding: 1rem;
    display: grid
  }

  .product-next-step>div {
    gap: .25rem;
    display: grid
  }

  .product-next-step span {
    color: var(--green);
    letter-spacing: .06em;
    text-transform: uppercase;
    font: 750 .62rem ui-monospace, monospace
  }

  .product-next-step strong {
    font-size: .9rem;
    line-height: 1.25
  }

  .product-next-step .button {
    white-space: nowrap;
    min-height: 44px;
    padding-inline: 1rem;
    font-size: .72rem
  }

  @media (width<=960px) {

    .product-detail-hero__grid,
    .product-detail__content,
    .product-specs-layout,
    .product-document-grid {
      grid-template-columns: 1fr
    }

    .product-detail__visual {
      justify-self: center;
      width: min(100%, 650px)
    }

    .product-detail__content {
      gap: 3rem
    }

    .product-selection {
      position: static
    }

    .product-document {
      min-height: 220px
    }
  }

  @media (width<=680px) {
    .product-detail-hero {
      padding-top: 3.6rem
    }

    .product-detail-hero h1 {
      overflow-wrap: anywhere;
      font-size: clamp(3.6rem, 19vw, 6.4rem)
    }

    .product-detail-hero h2 {
      font-size: clamp(1.8rem, 9.5vw, 3.2rem)
    }

    .product-detail__visual {
      min-height: 370px
    }

    .product-detail__visual:before {
      width: 95%
    }

    .product-detail__visual .device-art {
      min-height: 320px;
      scale: .82
    }

    .product-signal__grid {
      grid-template-columns: 1fr
    }

    .product-signal__grid>li {
      border-top: 1px solid oklch(100% 0 0/.12);
      border-left: 0;
      min-height: 105px
    }

    .product-signal__grid>li:first-child {
      border-top: 0
    }

    .product-signal__grid>li:not(:last-child):after {
      top: auto;
      bottom: -17px;
      right: 1.2rem;
      rotate: 90deg
    }

    .product-detail__uses article {
      grid-template-columns: 44px 1fr;
      padding: 1rem
    }

    .product-specs {
      grid-template-columns: 1fr
    }

    .product-specs>div:last-child:nth-child(odd) {
      grid-column: auto
    }

    .product-next-step {
      grid-template-columns: 1fr
    }

    .product-next-step .button {
      width: 100%
    }
  }

  html.menu-open,
  html.menu-open body {
    overscroll-behavior: none;
    overflow: hidden
  }

  .site-header {
    transition: color .24s, background .24s, border-color .24s
  }

  .menu-trigger {
    isolation: isolate;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    position: relative
  }

  .menu-trigger span {
    transition: translate .22s var(--ease), rotate .22s var(--ease), width .22s var(--ease);
    transform-origin: 50%;
    grid-area: 1/1
  }

  .menu-trigger span:first-child {
    translate: 0 -3.5px
  }

  .menu-trigger span:last-child {
    translate: 0 3.5px
  }

  .menu-trigger[aria-expanded=true] span {
    width: 19px;
    translate: 0
  }

  .menu-trigger[aria-expanded=true] span:first-child {
    rotate: 45deg
  }

  .menu-trigger[aria-expanded=true] span:last-child {
    rotate: -45deg
  }

  .mobile-nav {
    z-index: 200;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    color: var(--on-dark);
    box-shadow: none;
    overscroll-behavior: none;
    visibility: hidden;
    pointer-events: none;
    background: 0 0;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    transition: visibility 0s linear .34s;
    display: block;
    position: fixed;
    inset: 0;
    overflow: hidden;
    translate: none
  }

  .mobile-nav.is-open {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s
  }

  .mobile-nav__backdrop {
    appearance: none;
    opacity: 0;
    cursor: default;
    touch-action: manipulation;
    background: oklch(10% .02 165/.62);
    border: 0;
    border-radius: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    transition: opacity .24s ease-out;
    position: absolute;
    inset: 0
  }

  .mobile-nav.is-open .mobile-nav__backdrop {
    opacity: 1
  }

  .mobile-nav__panel {
    width: min(100%, 430px);
    height: 100%;
    padding-top: var(--header);
    color: var(--on-dark);
    background: var(--dark);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    backface-visibility: hidden;
    contain: layout paint;
    border: 0;
    border-left: 1px solid oklch(100% 0 0/.1);
    border-radius: 0;
    flex-direction: column;
    margin: 0;
    transition: transform .32s cubic-bezier(.22, 1, .36, 1);
    display: flex;
    position: absolute;
    inset: 0 0 0 auto;
    overflow: hidden auto;
    transform: translate(100%);
    box-shadow: -28px 0 70px oklch(7% .025 165/.45)
  }

  .mobile-nav.is-open .mobile-nav__panel {
    transform: translate(0, 0)
  }

  .mobile-nav__body {
    min-height: 0;
    padding: clamp(1rem, 3vh, 1.5rem) max(20px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
    flex-direction: column;
    flex: 1;
    display: flex
  }

  .mobile-nav nav {
    border-top: 1px solid oklch(100% 0 0/.1);
    margin-bottom: 1rem;
    display: grid
  }

  .mobile-nav nav a {
    min-height: 54px;
    color: var(--on-dark);
    letter-spacing: -.02em;
    border-bottom: 1px solid oklch(100% 0 0/.1);
    align-items: center;
    padding: .78rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.2;
    display: flex
  }

  .mobile-nav nav a[aria-current=page],
  .mobile-nav nav a:hover {
    color: var(--lime)
  }

  .mobile-nav__utilities {
    grid-template-columns: 1fr 1fr 42px;
    align-items: center;
    gap: .5rem;
    margin-top: .25rem;
    display: grid
  }

  .mobile-nav__utilities>a {
    min-height: 42px;
    color: var(--on-dark-muted);
    text-align: center;
    border: 1px solid oklch(100% 0 0/.14);
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    padding: .6rem .7rem;
    font-size: .72rem;
    font-weight: 600;
    display: flex
  }

  .mobile-nav__utilities>a:hover {
    color: var(--on-dark);
    border-color: oklch(100% 0 0/.28)
  }

  .mobile-nav .theme-toggle {
    width: 42px;
    height: 42px;
    color: var(--on-dark);
    background: 0 0;
    border-color: oklch(100% 0 0/.16);
    border-radius: 6px
  }

  .mobile-nav__cta {
    border-radius: 6px;
    width: 100%;
    min-height: 44px;
    margin-top: .75rem
  }

  @media (width>=1081px) {
    .mobile-nav {
      display: none
    }
  }

  @media (width<=1080px) {
    .site-header.is-menu-open {
      z-index: 201;
      width: 100%;
      color: var(--on-dark);
      background: var(--dark);
      backdrop-filter: none;
      border-bottom-color: oklch(100% 0 0/.1);
      position: fixed;
      inset: 0 0 auto
    }

    .site-header.is-menu-open .brand__text strong {
      color: var(--on-dark)
    }

    .site-header.is-menu-open .brand__text span {
      color: var(--on-dark-muted)
    }

    .site-header.is-menu-open .menu-trigger {
      color: var(--on-dark);
      background: oklch(100% 0 0/.035);
      border-color: oklch(100% 0 0/.2)
    }
  }

  @media (width<=680px) {
    .mobile-nav__panel {
      width: 100%;
      box-shadow: none;
      border-left: 0
    }
  }

  @media (prefers-reduced-motion:reduce) {

    .site-header,
    .menu-trigger span,
    .mobile-nav,
    .mobile-nav__backdrop,
    .mobile-nav__panel {
      transition-duration: .01ms
    }
  }

  .deadline {
    color: inherit;
    margin: 0
  }

  .deadline__value {
    gap: .1rem;
    display: grid
  }

  .deadline b {
    letter-spacing: -.05em;
    font-variant-numeric: tabular-nums;
    color: var(--green);
    font-size: clamp(3.4rem, 9vw, 5.4rem);
    line-height: .85
  }

  .deadline [data-deadline-word] {
    color: var(--ink);
    font-size: 1.1rem;
    font-weight: 800
  }

  .deadline__label {
    color: var(--muted);
    font-size: .85rem;
    font-weight: 600
  }

  .reg-card .deadline b {
    color: var(--lime)
  }

  .reg-card .deadline [data-deadline-word] {
    color: var(--on-dark)
  }

  .reg-card .deadline__label {
    color: var(--on-dark-muted)
  }

  .reg-hero {
    padding-block: clamp(3.4rem, 6vw, 5.4rem);
    overflow: clip
  }

  .reg-hero__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    align-items: start;
    gap: clamp(2rem, 5vw, 4rem);
    display: grid
  }

  .reg-hero h1 {
    max-width: 18ch;
    margin-top: 1.2rem;
    font-size: clamp(2.7rem, 5.4vw, 5rem)
  }

  .reg-hero .lead {
    max-width: 46rem;
    margin-top: 1.6rem
  }

  .reg-hero .hero__actions {
    margin-top: 2.2rem
  }

  .reg-hero__side {
    gap: 1rem;
    display: grid
  }

  .reg-counter {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.4rem, 3vw, 2rem)
  }

  .reg-counter p {
    margin-top: 1rem;
    font-size: .8rem
  }

  .reg-hero__facts {
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    gap: 1px;
    display: grid;
    overflow: hidden
  }

  .reg-hero__facts li {
    background: var(--surface);
    gap: .3rem;
    padding: 1rem 1.2rem;
    display: grid
  }

  .reg-hero__facts b {
    letter-spacing: -.02em;
    font-size: 1.05rem
  }

  .reg-hero__facts span {
    color: var(--muted);
    font-size: .78rem
  }

  .audience {
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
    align-items: start;
    gap: clamp(2rem, 4vw, 3.5rem);
    display: grid
  }

  .audience__main h2 {
    font-size: clamp(1.9rem, 3.4vw, 3rem)
  }

  .audience__main p+p {
    margin-top: 1rem
  }

  .audience__split {
    gap: 1rem;
    display: grid
  }

  .audience__card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem
  }

  .audience__card strong {
    letter-spacing: -.02em;
    font-size: 1rem;
    display: block
  }

  .audience__card ul {
    gap: .5rem;
    margin-top: 1rem;
    display: grid
  }

  .audience__card li {
    color: var(--muted);
    padding-left: 1.4rem;
    font-size: .86rem;
    position: relative
  }

  .audience__card li:before {
    content: "—";
    color: var(--line);
    position: absolute;
    left: 0
  }

  .audience__card p {
    margin-top: 1rem;
    font-size: .8rem
  }

  .audience__card--yes {
    color: var(--on-dark);
    background: var(--dark);
    border-color: #0000
  }

  .audience__card--yes li {
    color: var(--on-dark-muted)
  }

  .audience__card--yes li:before {
    content: "✓";
    color: var(--lime);
    font-weight: 800
  }

  .reg-note {
    border-left: 2px solid var(--green);
    max-width: 58rem;
    color: var(--muted);
    margin-top: 2.4rem;
    padding-left: 1.2rem;
    font-size: .86rem
  }

  .section--dark .reg-note {
    color: var(--on-dark-muted)
  }

  .req-list {
    border-radius: var(--radius);
    background: oklch(100% 0 0/.12);
    border: 1px solid oklch(100% 0 0/.12);
    gap: 1px;
    display: grid;
    overflow: hidden
  }

  .req-row {
    background: var(--dark);
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr) minmax(150px, .5fr);
    align-items: start;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: clamp(1.4rem, 3vw, 2rem);
    scroll-margin-top: 6rem;
    display: grid
  }

  .req-row h3 {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem)
  }

  .req-row__basis {
    color: var(--lime);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-top: .6rem;
    font: 700 .66rem ui-monospace, SFMono-Regular, Consolas, monospace;
    display: block
  }

  .req-row p {
    color: var(--on-dark-muted);
    font-size: .9rem
  }

  .req-row__kit {
    flex-wrap: wrap;
    align-content: start;
    gap: .4rem;
    display: flex
  }

  .req-row__kit li {
    color: var(--on-dark);
    border: 1px solid oklch(100% 0 0/.2);
    border-radius: 999px;
    padding: .3rem .65rem;
    font: 700 .7rem ui-monospace, SFMono-Regular, Consolas, monospace
  }

  .scenario-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    display: grid
  }

  .scenario-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    align-content: start;
    gap: .9rem;
    padding: clamp(1.4rem, 3vw, 2rem);
    display: grid
  }

  .scenario-card__code {
    aspect-ratio: 1;
    width: 2.2rem;
    color: var(--dark);
    background: var(--lime);
    border-radius: 50%;
    place-items: center;
    font: 850 .9rem ui-monospace, monospace;
    display: grid
  }

  .scenario-card ul {
    flex-wrap: wrap;
    gap: .4rem;
    display: flex
  }

  .scenario-card li {
    color: var(--green);
    border: 1px solid color-mix(in oklch, var(--green) 30%, transparent);
    border-radius: 999px;
    padding: .28rem .6rem;
    font: 700 .7rem ui-monospace, monospace
  }

  .scenario-card__link {
    color: var(--green);
    margin-top: .3rem;
    font-size: .82rem;
    font-weight: 800
  }

  .scenario-card__link:hover {
    text-decoration: underline
  }

  .checklist {
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    display: grid;
    overflow: hidden
  }

  .checklist__item {
    background: var(--surface);
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.1rem;
    padding: clamp(1.3rem, 2.5vw, 1.8rem);
    display: grid
  }

  .checklist__index {
    color: var(--green);
    font: 800 .9rem ui-monospace, monospace
  }

  .checklist__item h3 {
    font-size: 1.05rem
  }

  .checklist__item p {
    margin-top: .5rem;
    font-size: .86rem
  }

  .checklist__item:last-child:nth-child(odd) {
    grid-column: 1/-1
  }

  .lead-block {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    grid-template-columns: .85fr 1.15fr;
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1.8rem, 4vw, 3.2rem);
    display: grid
  }

  .lead-block__intro h2 {
    font-size: clamp(1.8rem, 3vw, 2.6rem)
  }

  .lead-route {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    margin-top: 1.8rem;
    padding: 1.1rem 1.3rem
  }

  .lead-route>span {
    color: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    font: 700 .66rem ui-monospace, monospace
  }

  .lead-route ol {
    counter-reset: route;
    gap: .5rem;
    margin-top: .8rem;
    display: grid
  }

  .lead-route li {
    color: var(--muted);
    counter-increment: route;
    padding-left: 1.6rem;
    font-size: .82rem;
    position: relative
  }

  .lead-route li:before {
    content: counter(route);
    color: var(--green);
    font: 800 .72rem ui-monospace, monospace;
    position: absolute;
    left: 0
  }

  .lead-route code {
    color: var(--ink);
    font-size: .78rem
  }

  .lead-form textarea {
    width: 100%;
    color: inherit;
    font: inherit;
    background: var(--paper);
    border: 1px solid var(--line);
    resize: vertical;
    border-radius: 12px;
    padding: .8rem .9rem;
    font-size: .92rem
  }

  .lead-form textarea:focus-visible {
    outline: 3px solid color-mix(in oklch, var(--green) 45%, transparent);
    outline-offset: 1px;
    border-color: var(--green)
  }

  .lead-form__row {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    display: grid
  }

  .lead-form__segments {
    border: 0;
    gap: .55rem;
    padding: 0;
    display: grid
  }

  .lead-form__segments legend {
    color: var(--muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 0 0 .55rem;
    font: 700 .68rem ui-monospace, monospace
  }

  .lead-option {
    background: var(--paper);
    border: 1px solid var(--line);
    cursor: pointer;
    border-radius: 14px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .75rem;
    padding: .85rem 1rem;
    transition: border-color .2s, background .2s;
    display: grid
  }

  .lead-option:hover {
    border-color: var(--green)
  }

  .lead-option:has(input:checked) {
    background: color-mix(in oklch, var(--green) 8%, var(--paper));
    border-color: var(--green)
  }

  .lead-option:has(input:focus-visible) {
    outline: 3px solid var(--lime);
    outline-offset: 2px
  }

  .lead-option input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--green);
    margin-top: .18rem
  }

  .lead-form .lead-option__body {
    color: var(--ink);
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
    gap: .2rem;
    display: grid
  }

  .lead-option strong {
    letter-spacing: -.01em;
    font-size: .9rem
  }

  .lead-option small {
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.4
  }

  .lead-form__trap {
    clip-path: inset(50%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden
  }

  .lead-status {
    border-radius: 16px;
    padding: 1rem 1.2rem;
    font-size: .86rem;
    display: block
  }

  .lead-status[hidden] {
    display: none
  }

  .lead-status strong {
    margin-bottom: .35rem;
    display: block
  }

  .lead-status ul {
    gap: .3rem;
    margin-top: .5rem;
    display: grid
  }

  .lead-status li {
    text-indent: -1rem;
    padding-left: 1rem
  }

  .lead-status li:before {
    content: "· ";
    color: var(--green);
    font-weight: 800
  }

  .lead-status a {
    color: var(--green);
    font-weight: 800;
    text-decoration: underline
  }

  .lead-status[data-state=pending] {
    color: var(--muted);
    background: var(--paper);
    border: 1px solid var(--line)
  }

  .lead-status[data-state=ok] {
    color: var(--ink);
    background: color-mix(in oklch, var(--green) 12%, var(--paper));
    border: 1px solid color-mix(in oklch, var(--green) 40%, transparent)
  }

  .lead-status[data-state=error] {
    color: var(--ink);
    background: color-mix(in oklch, var(--danger) 10%, var(--paper));
    border: 1px solid color-mix(in oklch, var(--danger) 40%, transparent)
  }

  .owner-block {
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3rem);
    display: grid
  }

  .owner-block h2 {
    font-size: clamp(1.8rem, 3vw, 2.6rem)
  }

  .owner-facts {
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    margin-top: 2rem;
    display: grid;
    overflow: hidden
  }

  .owner-facts>div {
    background: var(--paper);
    padding: 1.1rem 1.3rem
  }

  .owner-facts dt {
    color: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    font: 700 .66rem ui-monospace, monospace
  }

  .owner-facts dd {
    margin: .4rem 0 0;
    font-size: .95rem;
    font-weight: 700
  }

  .owner-facts a {
    color: var(--green)
  }

  .owner-block__aside {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.4rem, 3vw, 2rem)
  }

  .owner-block__aside .check-list {
    margin-block: 1.2rem 0
  }

  .faq-list {
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    gap: 1px;
    display: grid;
    overflow: hidden
  }

  .faq-item {
    background: var(--surface)
  }

  .faq-item summary {
    letter-spacing: -.02em;
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem clamp(1.2rem, 3vw, 2rem);
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    font-weight: 760;
    list-style: none;
    display: flex
  }

  .faq-item summary::-webkit-details-marker {
    display: none
  }

  .faq-item summary:after {
    content: "+";
    color: var(--green);
    flex: none;
    font: 800 1.3rem/1 ui-monospace, monospace
  }

  .faq-item[open] summary:after {
    content: "–"
  }

  .faq-item p {
    max-width: 62rem;
    padding: 0 clamp(1.2rem, 3vw, 2rem) 1.4rem;
    font-size: .9rem
  }

  .source-list {
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    gap: 1px;
    display: grid;
    overflow: hidden
  }

  .source-row {
    background: var(--paper);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.2rem clamp(1.2rem, 3vw, 2rem);
    display: grid
  }

  .source-row:hover {
    background: var(--surface-2)
  }

  .source-row strong {
    font-size: .96rem
  }

  .source-row p {
    margin-top: .3rem;
    font-size: .82rem
  }

  .source-row>span {
    color: var(--green);
    white-space: nowrap;
    font-size: .8rem;
    font-weight: 800
  }

  @media (width<=1080px) {
    .req-row {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr)
    }

    .req-row__kit {
      grid-column: 1/-1
    }

    .scenario-grid {
      grid-template-columns: 1fr
    }
  }

  @media (width<=900px) {

    .reg-hero__grid,
    .audience,
    .lead-block,
    .owner-block,
    .checklist {
      grid-template-columns: 1fr
    }
  }

  @media (width<=680px) {
    .reg-hero h1 {
      overflow-wrap: anywhere;
      font-size: clamp(2.35rem, 10vw, 3.2rem)
    }

    .req-row,
    .lead-form__row,
    .owner-facts {
      grid-template-columns: 1fr
    }

    .source-row {
      grid-template-columns: 1fr;
      gap: .5rem
    }
  }

  .header-main,
  .desktop-nav,
  .hero__message,
  .kun-device-preview,
  .section-head>*,
  .software-split>*,
  .solution-card,
  .doc-card,
  .product-card {
    min-width: 0
  }

  .hero__intro--device {
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, .68fr);
    gap: clamp(1.75rem, 3vw, 3.5rem)
  }

  .hero__intro--device h1 {
    max-width: 100%;
    font-size: clamp(3.6rem, 5vw, 5.7rem);
    line-height: .92
  }

  .kun-device-preview {
    justify-self: stretch;
    width: 100%
  }

  .kun-device-preview svg {
    width: min(100%, 560px);
    max-width: 100%;
    margin-inline: auto
  }

  .solution-card,
  .solution-card:first-child,
  .solution-card:nth-child(2) {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: stretch;
    min-height: 390px;
    display: grid
  }

  .solution-card__index {
    grid-area: 1/1;
    align-self: start
  }

  .solution-card__icon {
    grid-area: 1/2;
    place-self: start end;
    width: clamp(72px, 7vw, 96px);
    margin: -.25rem -.2rem 0 1rem;
    position: static
  }

  .solution-card h3 {
    overflow-wrap: normal;
    grid-area: 2/1/auto/-1;
    max-width: 22ch;
    margin-top: 1.35rem;
    font-size: clamp(1.55rem, 2.15vw, 2.15rem);
    line-height: 1.04
  }

  .solution-card p {
    grid-area: 3/1/auto/-1;
    align-self: start;
    margin-top: .9rem
  }

  .solution-card__points {
    grid-area: 4/1/auto/-1;
    align-self: end;
    margin-top: 1.45rem;
    padding-top: 0
  }

  @media (width<=1320px) {
    .header-main {
      gap: 1rem
    }

    .desktop-nav {
      gap: .62rem;
      font-size: .68rem
    }

    .header-phone {
      display: none
    }
  }

  @media (width<=1180px) {

    .desktop-nav,
    .header-actions {
      display: none
    }

    .menu-trigger {
      margin-left: auto;
      display: grid
    }

    .hero__intro--device {
      grid-template-columns: minmax(0, 1fr) minmax(320px, .62fr)
    }

    .hero__intro--device h1 {
      font-size: clamp(3.3rem, 5.6vw, 4.8rem)
    }
  }

  @media (width<=1040px) {
    .hero__intro--device {
      grid-template-columns: 1fr
    }

    .hero__message {
      max-width: 780px
    }

    .kun-device-preview {
      justify-self: center;
      width: min(100%, 680px)
    }
  }

  @media (width<=680px) {
    .hero__intro--device h1 {
      font-size: clamp(2.65rem, 10.6vw, 4rem);
      line-height: .94
    }

    .solution-card,
    .solution-card:first-child,
    .solution-card:nth-child(2) {
      min-height: 0
    }

    .solution-card__icon {
      width: 76px
    }

    .solution-card h3 {
      max-width: none;
      margin-top: 1rem;
      font-size: clamp(1.55rem, 8vw, 2rem)
    }
  }

  .home-hero {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding-block: clamp(3.5rem, 5vw, 5rem) clamp(3rem, 4vw, 4rem)
  }

  .home-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 470px);
    align-items: center;
    gap: clamp(3rem, 5vw, 5.5rem);
    display: grid
  }

  .home-device {
    min-width: 0;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    transition: translate .25s var(--ease), border-color .25s, box-shadow .25s;
    border-radius: 22px;
    display: grid;
    overflow: hidden;
    box-shadow: 0 18px 50px oklch(18% .025 165/.08)
  }

  .home-device:hover {
    border-color: color-mix(in oklch, var(--green) 42%, var(--line));
    translate: 0 -3px;
    box-shadow: 0 24px 62px oklch(18% .025 165/.12)
  }

  .home-device__topline {
    border-bottom: 1px solid var(--line);
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 1rem 1.15rem;
    display: flex
  }

  .home-device__topline strong {
    letter-spacing: -.02em;
    font-size: 1rem
  }

  .home-device__topline span {
    color: var(--muted);
    font-size: .78rem
  }

  .home-device__visual {
    background: linear-gradient(color-mix(in oklch, var(--ink) 2.5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--ink) 2.5%, transparent) 1px, transparent 1px), color-mix(in oklch, var(--surface) 96%, var(--green) 4%);
    background-size: 36px 36px;
    place-items: center;
    min-height: 320px;
    padding: 1.2rem 1.2rem .6rem;
    display: grid
  }

  .home-device .kun-device-preview {
    width: 100%;
    padding: 0
  }

  .home-device .kun-device-preview svg {
    filter: drop-shadow(0 18px 18px oklch(18% .03 165/.14));
    width: min(100%, 410px);
    max-height: 300px;
    margin-inline: auto
  }

  .home-device__facts {
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
    gap: .45rem;
    padding: .9rem 1rem;
    display: flex
  }

  .home-device__facts span {
    color: var(--muted);
    background: var(--surface-2);
    border-radius: 999px;
    padding: .38rem .58rem;
    font-size: .7rem;
    font-weight: 650
  }

  .home-device__link {
    color: var(--green);
    border-top: 1px solid var(--line);
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.1rem 1rem;
    font-size: .78rem;
    font-weight: 750;
    display: flex
  }

  .home-device__link b {
    font-size: 1rem;
    font-weight: 600
  }

  .home-directory-section {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding-block: clamp(3.5rem, 5vw, 5rem)
  }

  .home-directory {
    border-top: 1px solid var(--line);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid
  }

  .home-directory__item {
    border-bottom: 1px solid var(--line);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
    min-width: 0;
    padding: 1.15rem 0;
    transition: color .2s, background .2s, padding .2s;
    display: grid
  }

  .home-directory__item:nth-child(odd) {
    border-right: 1px solid var(--line);
    padding-right: 1.75rem
  }

  .home-directory__item:hover {
    color: var(--green)
  }

  .home-directory__item h3 {
    letter-spacing: -.025em;
    font-size: 1.05rem
  }

  .home-directory__item p {
    max-width: 30rem;
    margin-top: .3rem;
    font-size: .78rem;
    line-height: 1.4
  }

  .home-directory__arrow {
    color: var(--green);
    font-size: .95rem
  }

  .home-solutions .solution-grid {
    gap: 1rem
  }

  .home-solutions .solution-card {
    border-radius: 18px;
    min-height: 330px
  }

  .home-solutions .solution-card__icon {
    width: 64px
  }

  .home-solutions .solution-card h3 {
    max-width: 22ch;
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    line-height: 1.08
  }

  .home-solutions .solution-card p {
    max-width: 34rem;
    font-size: .84rem;
    line-height: 1.5
  }

  @media (width<=1040px) {
    .home-hero__grid {
      grid-template-columns: 1fr;
      gap: 2.5rem
    }

    .home-hero .hero__message {
      max-width: 760px
    }

    .home-device {
      width: min(100%, 650px)
    }
  }

  @media (width<=760px) {
    .home-hero {
      padding-block: 2.6rem 2.25rem
    }

    .home-hero h1 {
      font-size: clamp(2.45rem, 10.5vw, 3.25rem);
      line-height: .98
    }

    .home-hero .lead {
      margin-top: 1.2rem;
      font-size: 1rem
    }

    .home-hero .hero__actions {
      margin-top: 1.4rem
    }

    .home-device__visual {
      min-height: 250px;
      padding-inline: .75rem
    }

    .home-device .kun-device-preview svg {
      max-height: 240px
    }

    .home-directory {
      grid-template-columns: 1fr
    }

    .home-directory__item,
    .home-directory__item:nth-child(odd),
    .home-directory__item:nth-child(2n) {
      border-right: 0;
      padding: 1rem 0
    }
  }

  .solution-card h2 {
    letter-spacing: -.04em;
    grid-area: 2/1/auto/-1;
    max-width: 22ch;
    margin-top: 1.35rem;
    font-size: clamp(1.55rem, 6.5cqw, 2.35rem);
    line-height: 1.04
  }

  @media (width<=680px) {
    .home-hero h1 {
      letter-spacing: -.055em;
      overflow-wrap: normal;
      font-size: clamp(2.35rem, 9.8vw, 3.35rem);
      line-height: .94
    }

    .home-hero .lead {
      overflow-wrap: break-word;
      max-width: 100%
    }

    .solution-card h2 {
      max-width: none;
      margin-top: 1rem;
      font-size: clamp(1.55rem, 8vw, 2rem);
      line-height: 1.03
    }

    .product-detail-hero {
      padding-top: 3rem
    }

    .product-detail-hero h1 {
      letter-spacing: -.075em;
      white-space: nowrap;
      overflow-wrap: normal;
      max-width: 100%;
      font-size: clamp(3.05rem, 15.5vw, 4.65rem);
      line-height: .86
    }

    .product-detail-hero h2 {
      font-size: clamp(1.7rem, 8.2vw, 2.75rem);
      line-height: .97
    }

    .product-detail__breadcrumb {
      margin-bottom: 2rem
    }

    .kun-product-hero h1 {
      overflow-wrap: normal
    }
  }

  .eyebrow,
  .technical-code,
  .solution-card__index,
  .home-directory__code {
    display: none !important
  }

  .button,
  .button--small {
    border-radius: 9px
  }

  .button {
    min-height: 46px;
    padding-inline: 1.05rem;
    font-size: .8rem
  }

  .button--small {
    min-height: 40px;
    font-size: .72rem
  }

  .theme-toggle,
  .menu-trigger {
    border-radius: 9px
  }

  .solution-card,
  .solution-card:first-child,
  .solution-card:nth-child(2) {
    min-height: 320px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: none;
    border-radius: 14px;
    grid-column: span 4;
    padding: 1.5rem
  }

  .solution-card:hover,
  .solution-card:first-child:hover {
    border-color: color-mix(in oklch, var(--green) 48%, var(--line));
    box-shadow: none;
    translate: 0
  }

  .solution-card:first-child p {
    color: var(--muted)
  }

  .solution-card__icon,
  .solution-card:first-child .solution-card__icon {
    width: 62px;
    color: var(--green);
    filter: none
  }

  .solution-card h2,
  .solution-card h3 {
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    line-height: 1.08
  }

  .solution-card__points {
    border-top: 1px solid var(--line);
    gap: .35rem 1rem;
    padding-top: 1rem
  }

  .solution-card__points li,
  .solution-card:first-child .solution-card__points li {
    color: var(--muted);
    background: 0 0;
    border-radius: 0;
    padding: 0 0 0 .75rem;
    font: 650 .67rem/1.35 Inter, Manrope, ui-sans-serif, system-ui, sans-serif;
    position: relative
  }

  .solution-card__points li:before {
    content: "";
    aspect-ratio: 1;
    background: var(--green);
    width: 4px;
    position: absolute;
    top: .48em;
    left: 0
  }

  .product-card {
    border-radius: 14px;
    min-height: 470px;
    padding: 1.1rem;
    transition: border-color .2s
  }

  .product-card:hover {
    border-color: color-mix(in oklch, var(--green) 48%, var(--line));
    box-shadow: none;
    translate: 0
  }

  .product-card__meta {
    letter-spacing: 0;
    text-transform: none;
    font: 650 .65rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace
  }

  .product-card__visual {
    border-bottom: 1px solid var(--line);
    background: 0 0;
    border-radius: 0;
    min-height: 225px;
    margin-block: .7rem .9rem
  }

  .product-card__visual:after {
    opacity: .65
  }

  .product-card h3 {
    font-size: clamp(1.12rem, 1.55vw, 1.42rem)
  }

  .product-card__details {
    gap: .35rem .9rem;
    margin-top: .9rem
  }

  .product-card__details span {
    color: var(--muted);
    background: 0 0;
    border-radius: 0;
    padding: 0;
    font-size: .62rem;
    position: relative
  }

  .product-card__details span:not(:last-child):after {
    content: "·";
    color: color-mix(in oklch, var(--muted) 65%, transparent);
    position: absolute;
    right: -.55rem
  }

  .product-card__action {
    font-size: .69rem
  }

  .filter-bar a {
    border-radius: 7px
  }

  .doc-card,
  .news-card {
    border-radius: 14px
  }

  .doc-card:hover,
  .news-card:hover {
    box-shadow: none;
    translate: 0
  }

  .doc-card__type {
    background: 0 0;
    border-radius: 0;
    padding: 0;
    font: 700 .65rem ui-monospace, monospace
  }

  .news-tag {
    background: 0 0;
    border-radius: 0;
    padding: 0
  }

  .check-list li:before {
    width: 5px;
    box-shadow: none;
    border-radius: 1px;
    margin-top: .55rem
  }

  .cta-band h2 {
    font-size: clamp(2rem, 3vw, 3rem)
  }

  .product-detail-hero {
    padding-block: clamp(3.5rem, 5.5vw, 5rem)
  }

  .product-detail-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(340px, .68fr);
    gap: clamp(2.5rem, 5vw, 5rem)
  }

  .product-detail__breadcrumb {
    margin-bottom: 1.8rem
  }

  .product-detail-hero h1 {
    white-space: nowrap;
    margin-top: 0;
    font-size: clamp(3.2rem, 6vw, 5.5rem);
    line-height: .9
  }

  .product-detail-hero h2 {
    max-width: 40rem;
    margin-top: 1rem;
    font-size: clamp(1.7rem, 2.8vw, 2.75rem);
    line-height: 1
  }

  .product-detail-hero .lead {
    margin-top: 1.3rem;
    font-size: 1rem
  }

  .product-detail__visual {
    min-height: 410px
  }

  .product-detail__visual .device-art {
    min-height: 350px
  }

  .product-detail__note {
    margin-top: 1rem;
    font-size: .6rem
  }

  .software-copy h2 {
    font-size: clamp(2.4rem, 4vw, 3.8rem)
  }

  .registry-card h2 {
    font-size: clamp(2.1rem, 3.7vw, 3.35rem)
  }

  @media (width<=960px) {

    .page-hero__grid,
    .product-detail-hero__grid {
      grid-template-columns: 1fr
    }

    .page-hero__grid {
      gap: 1.3rem
    }

    .page-hero>.shell>.lead,
    .page-hero__grid>.lead {
      max-width: 46rem
    }

    .solution-card,
    .solution-card:first-child,
    .solution-card:nth-child(2) {
      grid-column: span 6
    }
  }

  @media (width<=680px) {
    .section {
      padding-block: 3.25rem
    }

    .section-head {
      grid-template-columns: 1fr;
      gap: 1rem;
      margin-bottom: 2rem
    }

    .section-head__side {
      justify-self: start
    }

    .page-hero {
      padding-block: 2.75rem
    }

    .page-hero h1 {
      font-size: clamp(2.25rem, 10vw, 3rem)
    }

    .solution-card,
    .solution-card:first-child,
    .solution-card:nth-child(2) {
      grid-column: 1/-1;
      min-height: 0
    }

    .product-detail-hero h1 {
      white-space: normal;
      overflow-wrap: normal;
      font-size: clamp(2.8rem, 14vw, 4rem)
    }

    .product-detail-hero h2 {
      font-size: clamp(1.6rem, 7.5vw, 2.25rem)
    }
  }

  .product-section__title {
    gap: 0;
    margin-bottom: 1.35rem
  }

  .product-section__title>span {
    display: none !important
  }

  .product-section__title h2 {
    font-size: clamp(1.75rem, 2.8vw, 2.45rem)
  }

  @media (width>=961px) {

    .solution-card:nth-child(4),
    .solution-card:nth-child(5) {
      grid-column: span 6
    }
  }

  @media (width<=680px) {
    .page-hero h1 {
      font-size: clamp(2rem, 8.5vw, 2.5rem)
    }

    .solution-card:nth-child(4),
    .solution-card:nth-child(5) {
      grid-column: 1/-1
    }
  }

  .button,
  .button--small {
    letter-spacing: 0;
    border-radius: 4px;
    min-height: 44px;
    padding-inline: 1rem;
    font-size: .82rem;
    font-weight: 600
  }

  .button:after {
    content: none
  }

  .button:hover {
    box-shadow: none;
    translate: 0
  }

  .site-header {
    background: color-mix(in oklch, var(--paper) 94%, transparent)
  }

  .header-main {
    gap: 1.45rem
  }

  .desktop-nav {
    gap: 1.15rem;
    font-size: .77rem;
    font-weight: 600
  }

  .header-phone {
    font-size: .82rem;
    font-weight: 600
  }

  .theme-toggle,
  .menu-trigger {
    border-radius: 4px;
    width: 40px
  }

  .ui-icon {
    flex: none
  }

  .home-hero {
    background: var(--paper);
    padding-block: clamp(3.75rem, 5vw, 5.5rem)
  }

  .home-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 520px);
    align-items: center;
    gap: clamp(3.5rem, 6vw, 7rem)
  }

  .home-hero .hero__message {
    max-width: 700px
  }

  .home-hero h1 {
    letter-spacing: -.035em;
    max-width: 700px;
    font-size: clamp(3rem, 4.7vw, 4.6rem);
    line-height: .98
  }

  .home-hero .lead {
    max-width: 41rem;
    margin-top: 1.35rem;
    font-size: clamp(1.03rem, 1.25vw, 1.16rem);
    line-height: 1.58
  }

  .home-hero .hero__actions {
    margin-top: 1.65rem
  }

  .home-device {
    border: 1px solid var(--line);
    box-shadow: none;
    border-radius: 7px;
    transition: border-color .2s
  }

  .home-device:hover {
    border-color: color-mix(in oklch, var(--green) 55%, var(--line));
    box-shadow: none;
    translate: 0
  }

  .home-device__topline {
    min-height: 50px;
    padding: .75rem 1rem
  }

  .home-device__topline strong {
    font: 600 .88rem/1 IBM Plex Mono, monospace
  }

  .home-device__topline span {
    font-size: .78rem
  }

  .home-device__visual {
    background: linear-gradient(color-mix(in oklch, var(--ink) 2.5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--ink) 2.5%, transparent) 1px, transparent 1px), var(--surface);
    background-size: 32px 32px;
    min-height: 350px;
    padding: 1.4rem 1rem .7rem
  }

  .home-device .kun-device-preview svg {
    filter: drop-shadow(0 12px 12px oklch(18% .03 165/.12));
    width: min(100%, 430px);
    max-height: 320px
  }

  .home-device__facts {
    border-top: 1px solid var(--line);
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 0;
    display: grid
  }

  .home-device__facts span {
    color: var(--muted);
    border-right: 1px solid var(--line);
    background: 0 0;
    border-radius: 0;
    padding: .72rem .8rem;
    font: 500 .68rem/1.3 IBM Plex Mono, monospace
  }

  .home-device__facts span:last-child {
    border-right: 0
  }

  .home-device__link {
    min-height: 48px;
    padding: .75rem 1rem;
    font-size: .76rem;
    font-weight: 600
  }

  .home-directory-section {
    background: var(--surface);
    padding-block: clamp(3.5rem, 4.5vw, 4.75rem)
  }

  .home-directory-section>.shell>h2 {
    margin-bottom: 1.6rem;
    font-size: clamp(1.9rem, 2.7vw, 2.6rem)
  }

  .home-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .home-directory__item {
    grid-template-columns: 42px minmax(0, 1fr) 24px;
    gap: 1rem;
    min-height: 100px;
    padding-block: 1.15rem
  }

  .home-directory__item:nth-child(odd) {
    padding-right: 2rem
  }

  .home-directory__item:nth-child(2n) {
    padding-left: 2rem
  }

  .home-directory__item:hover {
    color: var(--ink);
    background: color-mix(in oklch, var(--green) 3.5%, transparent)
  }

  .home-directory__item:nth-child(odd):hover {
    padding-left: .6rem
  }

  .home-directory__item:nth-child(2n):hover {
    padding-left: 2.6rem
  }

  .home-directory__icon {
    width: 30px;
    height: 30px;
    color: var(--green);
    stroke-width: 1.65px;
    margin-top: .08rem
  }

  .home-directory__item h3 {
    font-size: 1.05rem;
    font-weight: 600
  }

  .home-directory__item p {
    margin-top: .28rem;
    font-size: .79rem;
    line-height: 1.45
  }

  .home-directory__arrow {
    align-self: center;
    font-size: .9rem
  }

  .solution-grid {
    gap: .9rem
  }

  .solution-card,
  .solution-card:first-child,
  .solution-card:nth-child(2) {
    min-height: 285px;
    box-shadow: none;
    border-radius: 7px;
    grid-template-rows: auto auto 1fr auto;
    padding: 1.45rem;
    display: grid
  }

  .solution-card__icon,
  .solution-card:first-child .solution-card__icon {
    width: 42px;
    height: 42px;
    color: var(--green);
    opacity: 1;
    filter: none;
    stroke-width: 1.55px;
    margin-bottom: 2.5rem;
    position: static
  }

  .solution-card:hover .solution-card__icon {
    translate: 0;
    scale: 1
  }

  .solution-card h2,
  .solution-card h3,
  .home-solutions .solution-card h3 {
    max-width: 20ch;
    margin-top: 0;
    font-size: clamp(1.3rem, 1.8vw, 1.65rem);
    line-height: 1.12
  }

  .solution-card p,
  .home-solutions .solution-card p {
    margin-top: .7rem;
    font-size: .86rem;
    line-height: 1.5
  }

  .solution-card__points {
    border-top: 1px solid var(--line);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .42rem 1rem;
    margin-top: 1rem;
    padding-top: .9rem;
    display: grid
  }

  .solution-card__points li,
  .solution-card:first-child .solution-card__points li {
    padding-left: .7rem;
    font-family: IBM Plex Sans, Arial, sans-serif;
    font-size: .68rem;
    font-weight: 500
  }

  .product-grid {
    gap: .8rem
  }

  .product-card {
    min-height: 450px;
    box-shadow: none;
    border-radius: 7px;
    padding: 1rem
  }

  .product-card:hover {
    box-shadow: none;
    translate: 0
  }

  .product-card__visual {
    min-height: 220px
  }

  .product-card h3 {
    font-size: 1.2rem;
    font-weight: 600
  }

  .product-card p {
    font-size: .8rem;
    line-height: 1.48
  }

  .product-card__details {
    gap: .28rem;
    display: grid
  }

  .product-card__details span {
    border-top: 1px solid color-mix(in oklch, var(--line) 70%, transparent);
    padding: .28rem 0;
    font-size: .62rem
  }

  .product-card__details span:not(:last-child):after {
    content: none
  }

  .filter-bar {
    border-bottom: 1px solid var(--line);
    gap: 0
  }

  .filter-bar a {
    background: 0 0;
    border: 0;
    border-bottom: 2px solid #0000;
    border-radius: 0;
    padding: .6rem .85rem .65rem;
    font-size: .72rem;
    font-weight: 500
  }

  .filter-bar a:hover {
    color: var(--green);
    border-bottom-color: var(--green);
    background: 0 0
  }

  .doc-grid,
  .news-cards {
    gap: 1.1rem
  }

  .doc-card,
  .news-card {
    border: 0;
    border-top: 2px solid var(--ink);
    background: 0 0;
    border-radius: 0;
    min-height: 220px;
    padding: 1.25rem 0 0
  }

  .doc-card:hover,
  .news-card:hover {
    border-top-color: var(--green)
  }

  .doc-card h3 {
    margin-top: 1.45rem
  }

  .news-tag {
    font-family: IBM Plex Mono, monospace;
    font-size: .6rem;
    font-weight: 500
  }

  .registry-card,
  .cta-band {
    border-radius: 8px
  }

  .registry-card:before,
  .cta-band:before {
    opacity: .55
  }

  .repair-hero {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding-block: clamp(3.5rem, 5vw, 5rem)
  }

  .repair-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    align-items: end;
    gap: clamp(3rem, 6vw, 7rem);
    display: grid
  }

  .repair-hero h1 {
    max-width: 700px;
    font-size: clamp(2.7rem, 4.5vw, 4.1rem)
  }

  .repair-hero .lead {
    max-width: 42rem;
    margin-top: 1.2rem;
    font-size: 1.05rem
  }

  .repair-hours {
    border-top: 1px solid var(--line);
    display: grid
  }

  .repair-hours>div {
    border-bottom: 1px solid var(--line);
    justify-content: space-between;
    gap: 2rem;
    padding: .9rem 0;
    display: flex
  }

  .repair-hours span {
    color: var(--muted)
  }

  .repair-hours strong {
    font: 600 .9rem/1.4 IBM Plex Mono, monospace
  }

  .repair-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
    display: grid
  }

  .repair-step {
    border-top: 2px solid var(--ink);
    padding-top: 1.25rem
  }

  .repair-step>.ui-icon {
    color: var(--green);
    stroke-width: 1.6px
  }

  .repair-step h2 {
    margin-top: 2.5rem;
    font-size: 1.55rem
  }

  .repair-step>p {
    margin-top: .8rem;
    font-size: .9rem;
    line-height: 1.55
  }

  .repair-list {
    margin-top: .9rem;
    display: grid
  }

  .repair-list>div {
    border-top: 1px solid var(--line);
    padding: .75rem 0
  }

  .repair-list dt {
    font-size: .75rem;
    font-weight: 600
  }

  .repair-list dd {
    color: var(--muted);
    margin: .2rem 0 0;
    font-size: .8rem
  }

  .repair-contact-lines {
    border-top: 1px solid var(--line);
    margin-top: 1rem;
    display: grid
  }

  .repair-contact-lines>* {
    border-bottom: 1px solid var(--line);
    padding: .75rem 0;
    font-size: .82rem;
    font-style: normal
  }

  .repair-contact-lines a {
    color: var(--green);
    font-weight: 600
  }

  @media (width<=1100px) {
    .home-hero__grid {
      grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
      gap: 3rem
    }

    .home-hero h1 {
      font-size: clamp(2.8rem, 5vw, 3.8rem)
    }

    .repair-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .repair-step--contact {
      grid-column: 1/-1
    }
  }

  @media (width<=960px) {
    .shell {
      width: min(calc(100% - 36px), var(--shell))
    }

    .home-hero__grid,
    .repair-hero__grid,
    .page-hero__grid {
      grid-template-columns: 1fr
    }

    .home-device {
      width: min(100%, 650px)
    }

    .home-directory__item:nth-child(odd) {
      padding-right: 1.3rem
    }

    .home-directory__item:nth-child(2n) {
      padding-left: 1.3rem
    }

    .home-directory__item:nth-child(2n):hover {
      padding-left: 1.7rem
    }
  }

  @media (width<=760px) {
    .shell {
      width: min(calc(100% - 28px), var(--shell))
    }

    .section {
      padding-block: 3.5rem
    }

    .section-head {
      grid-template-columns: 1fr;
      gap: .9rem
    }

    .home-hero {
      padding-block: 2.8rem
    }

    .home-hero h1 {
      font-size: clamp(2.45rem, 10vw, 3.2rem)
    }

    .home-device {
      border-radius: 5px
    }

    .home-device__visual {
      min-height: 250px
    }

    .home-device__facts {
      grid-template-columns: 1fr
    }

    .home-device__facts span {
      border-right: 0;
      border-bottom: 1px solid var(--line)
    }

    .home-device__facts span:last-child {
      border-bottom: 0
    }

    .home-directory {
      grid-template-columns: 1fr
    }

    .home-directory__item,
    .home-directory__item:nth-child(odd),
    .home-directory__item:nth-child(2n) {
      border-right: 0;
      padding: 1rem 0
    }

    .home-directory__item:hover,
    .home-directory__item:nth-child(odd):hover,
    .home-directory__item:nth-child(2n):hover {
      padding-left: 0
    }

    .solution-card__points,
    .repair-grid {
      grid-template-columns: 1fr
    }

    .repair-step--contact {
      grid-column: auto
    }

    .repair-hero h1 {
      font-size: clamp(2.4rem, 10vw, 3rem)
    }
  }

  @media (width>=821px) {
    .product-section .product-grid:has(>:only-child) {
      grid-template-columns: 1fr
    }

    .product-section .product-grid:has(>:only-child) .product-card {
      grid-template-rows: auto 1fr;
      grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
      min-height: 350px;
      padding: 1rem 1.15rem 1.15rem
    }

    .product-section .product-grid:has(>:only-child) .product-card__meta {
      grid-column: 1/-1
    }

    .product-section .product-grid:has(>:only-child) .product-card__visual {
      border-right: 1px solid var(--line);
      border-bottom: 0;
      grid-area: 2/1;
      min-height: 290px;
      margin: .7rem 0 0;
      padding-right: 1.5rem
    }

    .product-section .product-grid:has(>:only-child) .product-card__content {
      grid-area: 2/2;
      align-content: start;
      padding: 2.1rem 1rem .2rem 2rem
    }

    .product-section .product-grid:has(>:only-child) .product-card h3 {
      max-width: 28ch;
      font-size: clamp(1.45rem, 2.2vw, 2rem)
    }

    .product-section .product-grid:has(>:only-child) .product-card p {
      max-width: 48rem;
      margin-top: .8rem;
      font-size: .9rem
    }

    .product-section .product-grid:has(>:only-child) .product-card__details {
      margin-top: 1.4rem
    }

    .product-section .product-grid:has(>:only-child) .product-card__details span {
      padding-block: .48rem;
      font-size: .7rem
    }
  }

  @media (width<=760px) {
    .catalog-filter {
      overscroll-behavior-inline: contain;
      scroll-snap-type: x proximity;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      flex-wrap: nowrap;
      gap: 0;
      margin-inline: -14px;
      padding-inline: 14px;
      display: flex;
      overflow-x: auto
    }

    .catalog-filter::-webkit-scrollbar {
      display: none
    }

    .catalog-filter a {
      scroll-snap-align: start;
      white-space: nowrap;
      flex: none
    }
  }

  .home-system {
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    margin: 0;
    overflow: hidden
  }

  .home-system__header {
    border-bottom: 1px solid var(--line);
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1rem;
    display: flex
  }

  .home-system__header strong {
    font: 600 .9rem/1 IBM Plex Mono, monospace
  }

  .home-system__header span,
  .home-system figcaption,
  .home-system__core small,
  .home-system__dispatch span {
    color: var(--muted);
    font-size: .72rem
  }

  .home-system__objects {
    grid-template-columns: repeat(3, 1fr);
    display: grid
  }

  .home-system__objects>div {
    border-right: 1px solid var(--line);
    text-align: center;
    place-items: center;
    gap: .65rem;
    min-height: 112px;
    padding: 1rem .6rem;
    display: grid
  }

  .home-system__objects>div:last-child {
    border-right: 0
  }

  .home-system__objects .ui-icon {
    color: var(--green);
    stroke-width: 1.55px
  }

  .home-system__objects span {
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.25
  }

  .home-system__bus {
    color: var(--green);
    background: var(--line);
    border-block: 1px solid var(--line);
    text-align: center;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    padding: .55rem 0;
    font: 600 .66rem/1.2 IBM Plex Mono, monospace;
    display: grid;
    position: relative
  }

  .home-system__bus span {
    background: var(--surface);
    padding: .3rem .5rem
  }

  .home-system__core {
    text-align: center;
    justify-items: center;
    gap: .5rem;
    padding: 1.5rem 1rem;
    display: grid;
    position: relative
  }

  .home-system__core:before,
  .home-system__dispatch:before {
    content: "";
    background: var(--green);
    width: 1px;
    height: 14px;
    position: absolute;
    top: -14px;
    left: 50%
  }

  .home-system__devices {
    grid-template-columns: repeat(4, 44px);
    gap: 6px;
    display: grid
  }

  .home-system__devices span {
    min-height: 34px;
    color: var(--green);
    background: color-mix(in oklch, var(--green) 7%, var(--surface));
    border: 1px solid color-mix(in oklch, var(--green) 28%, var(--line));
    place-items: center;
    font: 600 .62rem/1 IBM Plex Mono, monospace;
    display: grid
  }

  .home-system__core>strong {
    font-size: 1rem
  }

  .home-system__dispatch {
    background: color-mix(in oklch, var(--green) 4%, var(--surface));
    border-top: 1px solid var(--line);
    justify-content: center;
    align-items: center;
    gap: .8rem;
    padding: 1.15rem 1rem;
    display: flex;
    position: relative
  }

  .home-system__dispatch .ui-icon {
    color: var(--green);
    stroke-width: 1.55px
  }

  .home-system__dispatch>div {
    gap: .15rem;
    display: grid
  }

  .home-system__dispatch strong {
    font: 600 .86rem/1.2 IBM Plex Mono, monospace
  }

  .home-system figcaption {
    border-top: 1px solid var(--line);
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 1rem;
    display: flex
  }

  .product-detail-hero {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding-block: clamp(3rem, 4.5vw, 4.5rem)
  }

  .product-detail-hero:before {
    display: none
  }

  .product-detail-hero__grid {
    grid-template-columns: minmax(0, .95fr) minmax(360px, 480px);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 6rem)
  }

  .product-detail__breadcrumb {
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 2rem;
    font: 500 .64rem/1.3 IBM Plex Mono, monospace
  }

  .product-detail__group {
    color: var(--green);
    margin-bottom: .65rem;
    font: 600 .7rem/1.3 IBM Plex Mono, monospace
  }

  .product-detail-hero h1 {
    letter-spacing: -.045em;
    white-space: nowrap;
    margin: 0;
    font-size: clamp(3.1rem, 5vw, 4.8rem);
    line-height: .95
  }

  .product-detail-hero h2 {
    max-width: 34rem;
    color: var(--ink);
    letter-spacing: -.025em;
    margin-top: .9rem;
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    line-height: 1.08
  }

  .product-detail-hero .lead {
    max-width: 39rem;
    margin-top: 1.15rem;
    font-size: 1rem;
    line-height: 1.55
  }

  .product-hero-specs {
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 1.6rem 0 0;
    display: grid
  }

  .product-hero-specs>div {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    min-width: 0;
    padding: .72rem .8rem
  }

  .product-hero-specs dt {
    color: var(--muted);
    font-size: .67rem;
    line-height: 1.25
  }

  .product-hero-specs dd {
    overflow-wrap: anywhere;
    margin: .3rem 0 0;
    font: 600 .82rem/1.3 IBM Plex Mono, monospace
  }

  .product-detail__visual {
    border: 1px solid var(--line);
    background: var(--paper);
    border-radius: 6px;
    min-height: 430px;
    padding: 1rem
  }

  .product-detail__visual:before,
  .product-detail__visual:has([data-visual=controller]):before,
  .product-detail__visual:has([data-visual=meter]):before,
  .product-detail__visual:has([data-visual=gateway]):before,
  .product-detail__visual:has([data-visual=intercom]):before {
    aspect-ratio: auto;
    background: linear-gradient(color-mix(in oklch, var(--ink) 2.5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--ink) 2.5%, transparent) 1px, transparent 1px), var(--surface);
    width: auto;
    height: auto;
    rotate: 0;
    box-shadow: none;
    background-size: 28px 28px;
    border-radius: 3px;
    inset: 1rem
  }

  .product-detail__visual .device-art {
    filter: drop-shadow(14px 18px 18px oklch(18% .03 165/.15));
    min-height: 350px
  }

  .product-detail__visual figcaption {
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    max-width: none;
    font: 500 .6rem/1.4 IBM Plex Sans, Arial, sans-serif;
    bottom: .75rem;
    left: 1rem;
    right: 1rem
  }

  .product-signal__grid>li {
    min-height: 106px;
    padding: 1.15rem 1.35rem
  }

  .product-signal__grid span {
    letter-spacing: 0;
    font: 500 .6rem/1.2 IBM Plex Mono, monospace
  }

  .product-signal__grid strong {
    font-size: clamp(.95rem, 1.45vw, 1.25rem)
  }

  .product-signal__grid>li:not(:last-child):after {
    border-radius: 2px;
    width: 22px;
    font-size: .7rem;
    right: -11px
  }

  .product-purpose-layout,
  .product-revision-layout,
  .product-source-layout {
    grid-template-columns: minmax(0, .8fr) minmax(420px, 1.2fr);
    align-items: start;
    gap: clamp(2.5rem, 6vw, 6rem);
    display: grid
  }

  .product-purpose-layout h2,
  .product-revision-layout h2,
  .product-source-layout h2,
  .product-section-title h2,
  .product-selection h2 {
    font-size: clamp(1.8rem, 2.7vw, 2.6rem)
  }

  .product-purpose-layout .lead {
    margin-top: 1rem;
    font-size: 1rem
  }

  .product-use-list,
  .product-revision-list {
    border-top: 1px solid var(--line);
    display: grid
  }

  .product-use-list li,
  .product-revision-list li {
    border-bottom: 1px solid var(--line);
    padding: .9rem 0 .9rem 1.15rem;
    font-size: .88rem;
    line-height: 1.5;
    position: relative
  }

  .product-use-list li:before,
  .product-revision-list li:before {
    content: "";
    background: var(--green);
    width: 5px;
    height: 5px;
    position: absolute;
    top: 1.35rem;
    left: 0
  }

  .product-engineering-section {
    background: var(--paper)
  }

  .product-section-title {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    align-items: end;
    gap: 2rem;
    margin-bottom: 2rem;
    display: grid
  }

  .product-section-title>p {
    font-size: .9rem;
    line-height: 1.5
  }

  .product-section-title--dark>p {
    color: var(--on-dark-muted)
  }

  .product-engineering-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.4rem, 3vw, 3rem);
    display: grid
  }

  .product-engineering-grid article {
    border-top: 2px solid var(--ink);
    padding-top: 1.1rem
  }

  .product-engineering-grid h3 {
    font-size: 1.08rem
  }

  .product-engineering-grid p {
    margin-top: .65rem;
    font-size: .85rem;
    line-height: 1.55
  }

  .product-specs-layout--flat {
    align-items: start
  }

  .product-specs-layout--flat .product-selection {
    position: static
  }

  .product-specs-layout--flat .product-selection .lead {
    margin-top: 1rem;
    font-size: .92rem
  }

  .product-specs-layout--flat .product-specs {
    border: 0;
    border-top: 1px solid var(--line);
    background: 0 0;
    border-radius: 0;
    grid-template-columns: 1fr;
    gap: 0;
    overflow: visible
  }

  .product-specs-layout--flat .product-specs>div,
  .product-specs-layout--flat .product-specs>div:last-child:nth-child(odd) {
    border-bottom: 1px solid var(--line);
    background: 0 0;
    grid-column: auto;
    grid-template-columns: minmax(150px, .85fr) minmax(0, 1.15fr);
    gap: 1rem;
    min-height: 0;
    padding: .78rem 0;
    display: grid
  }

  .product-specs-layout--flat .product-specs dt {
    letter-spacing: 0;
    text-transform: none;
    font: 500 .72rem/1.4 IBM Plex Sans, Arial, sans-serif
  }

  .product-specs-layout--flat .product-specs dd {
    letter-spacing: 0;
    text-align: right;
    margin: 0;
    font: 600 .82rem/1.4 IBM Plex Mono, monospace
  }

  .product-revision-layout>div>p,
  .product-source-layout>div>p {
    max-width: 38rem;
    margin-top: 1rem;
    font-size: .92rem;
    line-height: 1.55
  }

  .product-source-links {
    border-top: 1px solid var(--line);
    display: grid
  }

  .product-source-link {
    border-bottom: 1px solid var(--line);
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem 1rem;
    padding: 1rem 0;
    display: grid
  }

  .product-source-link>span {
    color: var(--green);
    grid-row: 1/span 2;
    align-self: start;
    font: 600 .68rem/1.3 IBM Plex Mono, monospace
  }

  .product-source-link strong {
    font-size: .94rem
  }

  .product-source-link small {
    color: var(--muted);
    grid-column: 2;
    font-size: .72rem;
    line-height: 1.4
  }

  .product-source-link b {
    color: var(--green);
    white-space: nowrap;
    grid-area: 1/3/span 2;
    font-size: .72rem;
    font-weight: 600
  }

  .product-demo-layout {
    grid-template-columns: minmax(260px, .48fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5rem);
    display: grid
  }

  .product-demo-layout>div>p {
    color: var(--on-dark-muted);
    margin-top: 1rem;
    font-size: .9rem;
    line-height: 1.55
  }

  @media (width<=1040px) {
    .home-hero__grid {
      grid-template-columns: minmax(0, 1fr) minmax(360px, 450px);
      gap: 3rem
    }

    .product-detail-hero__grid {
      grid-template-columns: minmax(0, 1fr) minmax(330px, 420px);
      gap: 3rem
    }
  }

  @media (width<=900px) {

    .home-hero__grid,
    .product-detail-hero__grid,
    .product-purpose-layout,
    .product-specs-layout,
    .product-revision-layout,
    .product-source-layout,
    .product-demo-layout {
      grid-template-columns: 1fr
    }

    .home-system {
      width: min(100%, 620px)
    }

    .product-detail__visual {
      justify-self: start;
      width: min(100%, 620px)
    }

    .product-engineering-grid {
      grid-template-columns: 1fr
    }

    .product-section-title {
      grid-template-columns: 1fr;
      gap: .75rem
    }
  }

  @media (width<=680px) {
    .home-system__objects>div {
      min-height: 94px;
      padding-inline: .4rem
    }

    .home-system__objects span {
      font-size: .68rem
    }

    .home-system__devices {
      grid-template-columns: repeat(4, 38px)
    }

    .home-system figcaption {
      gap: .2rem;
      display: grid
    }

    .product-detail-hero {
      padding-block: 2.5rem 3rem
    }

    .product-detail__breadcrumb {
      margin-bottom: 1.35rem
    }

    .product-detail-hero h1 {
      white-space: normal;
      overflow-wrap: normal;
      font-size: clamp(2.8rem, 13vw, 4rem)
    }

    .product-detail-hero h2 {
      font-size: clamp(1.35rem, 6vw, 1.75rem)
    }

    .product-detail-hero .lead {
      font-size: .94rem
    }

    .product-hero-specs {
      margin-top: 1.25rem
    }

    .product-hero-specs>div {
      padding: .65rem
    }

    .product-detail__visual {
      min-height: 320px;
      padding: .6rem
    }

    .product-detail__visual:before,
    .product-detail__visual:has([data-visual=controller]):before,
    .product-detail__visual:has([data-visual=meter]):before,
    .product-detail__visual:has([data-visual=gateway]):before,
    .product-detail__visual:has([data-visual=intercom]):before {
      inset: .6rem
    }

    .product-detail__visual .device-art {
      min-height: 270px;
      scale: .86
    }

    .product-detail__visual figcaption {
      font-size: .56rem;
      bottom: .55rem;
      left: .75rem;
      right: .75rem
    }

    .product-purpose-layout,
    .product-revision-layout,
    .product-source-layout {
      gap: 1.75rem
    }

    .product-specs-layout--flat .product-specs>div,
    .product-specs-layout--flat .product-specs>div:last-child:nth-child(odd) {
      grid-template-columns: 1fr;
      gap: .25rem
    }

    .product-specs-layout--flat .product-specs dd {
      text-align: left
    }

    .product-source-link {
      grid-template-columns: 42px minmax(0, 1fr)
    }

    .product-source-link>span {
      grid-row: auto
    }

    .product-source-link strong,
    .product-source-link small {
      grid-column: 2
    }

    .product-source-link b {
      grid-area: auto/2;
      margin-top: .2rem
    }
  }

  .integration-hero {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding-block: clamp(3.5rem, 5vw, 5.5rem)
  }

  .integration-hero__grid {
    grid-template-columns: minmax(0, .95fr) minmax(420px, .8fr);
    align-items: center;
    gap: clamp(3rem, 6vw, 7rem);
    display: grid
  }

  .integration-hero h1 {
    letter-spacing: -.04em;
    max-width: 760px;
    font-size: clamp(2.8rem, 4.8vw, 4.8rem);
    line-height: .98
  }

  .integration-hero .lead {
    max-width: 45rem;
    margin-top: 1.5rem;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.6
  }

  .integration-map {
    border: 1px solid var(--line);
    background: var(--surface);
    align-items: stretch;
    display: grid
  }

  .integration-map__sources {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid
  }

  .integration-map__sources span {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    align-items: center;
    min-height: 68px;
    padding: 1rem;
    font: 600 .78rem/1.25 IBM Plex Mono, ui-monospace, monospace;
    display: flex
  }

  .integration-map__sources span:nth-child(2n) {
    border-right: 0
  }

  .integration-map__sources span:nth-last-child(-n+2) {
    border-bottom: 0
  }

  .integration-map__line {
    height: 42px;
    position: relative
  }

  .integration-map__line:before {
    content: "";
    background: var(--green);
    width: 1px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%
  }

  .integration-map__line:after {
    content: "";
    border-right: 1px solid var(--green);
    border-bottom: 1px solid var(--green);
    width: 8px;
    height: 8px;
    position: absolute;
    bottom: 0;
    left: calc(50% - 4px);
    rotate: 45deg
  }

  .integration-map__gateway,
  .integration-map__scada {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    gap: .35rem;
    padding: 1.1rem 1.25rem;
    display: grid
  }

  .integration-map__gateway strong,
  .integration-map__scada strong {
    font-size: 1rem;
    font-weight: 600
  }

  .integration-map__gateway span,
  .integration-map__scada span {
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.45
  }

  .integration-map__scada {
    color: #eff8f3;
    background: #0b2d25;
    border-bottom: 0
  }

  .integration-map__scada span {
    color: #9ab7ad
  }

  .integration-protocols,
  .integration-check-layout,
  .integration-related-layout {
    grid-template-columns: minmax(0, .72fr) minmax(520px, 1.28fr);
    align-items: start;
    gap: clamp(3rem, 6vw, 7rem);
    display: grid
  }

  .integration-section-copy {
    max-width: 34rem
  }

  .integration-section-copy--wide {
    max-width: 54rem;
    margin-bottom: 2.5rem
  }

  .integration-section-copy h2,
  .integration-check-layout h2,
  .integration-related-layout h2 {
    font-size: clamp(2rem, 3vw, 3rem)
  }

  .integration-section-copy p,
  .integration-check-layout>div>p,
  .integration-related-layout>div>p {
    color: var(--muted);
    margin-top: 1rem;
    line-height: 1.6
  }

  .integration-protocol-table {
    border-top: 2px solid var(--ink);
    margin: 0
  }

  .integration-protocol-table>div {
    border-bottom: 1px solid var(--line);
    grid-template-columns: minmax(130px, .36fr) minmax(0, 1fr);
    gap: 1.4rem;
    padding: 1.1rem 0;
    display: grid
  }

  .integration-protocol-table dt {
    font: 600 .78rem/1.4 IBM Plex Mono, ui-monospace, monospace
  }

  .integration-protocol-table dd {
    gap: .35rem;
    margin: 0;
    display: grid
  }

  .integration-protocol-table dd strong {
    font-size: .92rem;
    font-weight: 600
  }

  .integration-protocol-table dd span {
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.5
  }

  .integration-routes-section {
    background: var(--surface)
  }

  .integration-routes {
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid
  }

  .integration-route {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    padding: clamp(1.5rem, 2.5vw, 2.25rem)
  }

  .integration-route h3 {
    font-size: 1.25rem
  }

  .integration-route__scheme {
    flex-wrap: wrap;
    gap: 0;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
    display: flex
  }

  .integration-route__scheme li {
    color: var(--ink);
    margin-right: .8rem;
    padding: .45rem .8rem .45rem 0;
    font: 500 .67rem/1.35 IBM Plex Mono, ui-monospace, monospace;
    position: relative
  }

  .integration-route__scheme li:not(:last-child):after {
    content: "→";
    color: var(--green);
    position: absolute;
    right: -.35rem
  }

  .integration-route>p {
    color: var(--muted);
    margin-top: 1.35rem;
    font-size: .86rem;
    line-height: 1.55
  }

  .integration-examples {
    border-top: 2px solid var(--ink)
  }

  .integration-examples article {
    border-bottom: 1px solid var(--line);
    grid-template-columns: minmax(150px, .32fr) minmax(240px, .68fr) minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
    padding: 1.25rem 0;
    display: grid
  }

  .integration-examples h3 {
    font-size: 1rem
  }

  .integration-examples p {
    color: var(--muted);
    margin: 0;
    font-size: .82rem;
    line-height: 1.52
  }

  .integration-examples__products {
    font-weight: 500;
    color: var(--ink) !important
  }

  .integration-wiki-link {
    color: var(--ink);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    grid-template-columns: 180px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
    padding: 1.25rem 0;
    text-decoration: none;
    display: grid
  }

  .integration-wiki-link span {
    color: var(--muted);
    font-size: .75rem
  }

  .integration-wiki-link strong {
    font-size: 1rem
  }

  .integration-wiki-link b {
    color: var(--green);
    font-size: .78rem
  }

  .integration-check-list {
    border-top: 2px solid var(--ink);
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid
  }

  .integration-check-list li {
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    padding: 1rem 0 1rem 1.5rem;
    font-size: .88rem;
    line-height: 1.55;
    position: relative
  }

  .integration-check-list li:before {
    content: "";
    background: var(--green);
    width: 6px;
    height: 6px;
    position: absolute;
    top: 1.48rem;
    left: 0
  }

  .integration-tools {
    border-top: 2px solid var(--ink);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    display: grid
  }

  .integration-tools article {
    border-bottom: 1px solid var(--line);
    min-height: 190px;
    padding: 1.35rem 1.5rem 1.35rem 0
  }

  .integration-tools article+article {
    border-left: 1px solid var(--line);
    padding-left: 1.5rem
  }

  .integration-tools code {
    color: var(--green);
    font-size: .82rem;
    font-weight: 600
  }

  .integration-tools p {
    color: var(--muted);
    margin-top: 2.2rem;
    font-size: .84rem;
    line-height: 1.55
  }

  .integration-tools__links {
    gap: 1.5rem;
    margin-top: 1.25rem;
    font-size: .82rem;
    font-weight: 600;
    display: flex
  }

  .integration-related {
    border-top: 2px solid var(--ink)
  }

  .integration-related a {
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    grid-template-columns: 110px minmax(0, 1fr) 24px;
    align-items: start;
    gap: 1.25rem;
    padding: 1.1rem 0;
    text-decoration: none;
    display: grid
  }

  .integration-related strong {
    font: 600 .8rem/1.4 IBM Plex Mono, ui-monospace, monospace
  }

  .integration-related span {
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.5
  }

  .integration-related b {
    color: var(--green);
    text-align: right
  }

  @media (width<=980px) {

    .integration-hero__grid,
    .integration-protocols,
    .integration-check-layout,
    .integration-related-layout {
      grid-template-columns: 1fr
    }

    .integration-map {
      width: min(100%, 680px)
    }

    .integration-routes {
      grid-template-columns: 1fr
    }
  }

  @media (width<=680px) {
    .integration-hero {
      padding-block: 3rem 3.5rem
    }

    .integration-hero h1 {
      font-size: clamp(2.55rem, 12vw, 3.5rem)
    }

    .integration-map__sources {
      grid-template-columns: 1fr
    }

    .integration-map__sources span {
      border-right: 0;
      min-height: 52px;
      border-bottom: 1px solid var(--line) !important
    }

    .integration-map__sources span:last-child {
      border-bottom: 0 !important
    }

    .integration-protocol-table>div,
    .integration-examples article {
      grid-template-columns: 1fr;
      gap: .55rem
    }

    .integration-route__scheme {
      display: grid
    }

    .integration-route__scheme li {
      margin-right: 0;
      padding-bottom: 1rem;
      padding-right: 0
    }

    .integration-route__scheme li:not(:last-child):after {
      content: "↓";
      bottom: -.05rem;
      left: 0;
      right: auto
    }

    .integration-wiki-link {
      grid-template-columns: 1fr;
      gap: .45rem
    }

    .integration-tools {
      grid-template-columns: 1fr
    }

    .integration-tools article {
      min-height: 0;
      padding: 1.25rem 0
    }

    .integration-tools article+article {
      border-left: 0;
      padding-left: 0
    }

    .integration-tools p {
      margin-top: .8rem
    }

    .integration-tools__links {
      gap: .75rem;
      display: grid
    }

    .integration-related a {
      grid-template-columns: 88px minmax(0, 1fr) 18px;
      gap: .8rem
    }
  }

  .home-system--map {
    color: var(--ink);
    background: linear-gradient(color-mix(in oklch, var(--ink) 3%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--ink) 3%, transparent) 1px, transparent 1px), color-mix(in oklch, var(--surface) 96%, var(--green) 4%);
    border: 1px solid color-mix(in oklch, var(--green) 24%, var(--line));
    background-size: 28px 28px;
    border-radius: 10px;
    margin: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 70px oklch(12% .03 165/.08)
  }

  .home-system--map .home-system__header {
    z-index: 2;
    background: color-mix(in oklch, var(--surface) 88%, transparent);
    border-bottom: 1px solid color-mix(in oklch, var(--green) 18%, var(--line));
    backdrop-filter: blur(12px);
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    min-height: 54px;
    padding: .9rem 1rem;
    display: flex;
    position: relative
  }

  .home-system--map .home-system__header strong {
    letter-spacing: .02em;
    font: 650 .92rem/1 IBM Plex Mono, ui-monospace, monospace
  }

  .home-system--map .home-system__header span {
    color: var(--muted);
    font: 500 .65rem/1.2 IBM Plex Mono, ui-monospace, monospace
  }

  .home-system__diagram {
    padding: 1rem;
    position: relative
  }

  .home-system--map .home-system__objects {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    display: grid
  }

  .home-system__object {
    background: color-mix(in oklch, var(--surface) 88%, transparent);
    border: 1px solid color-mix(in oklch, var(--green) 16%, var(--line));
    border-radius: 6px;
    grid-template-rows: auto auto auto;
    justify-items: start;
    gap: .35rem;
    min-width: 0;
    min-height: 112px;
    padding: .8rem .75rem .72rem;
    display: grid;
    position: relative
  }

  .home-system__object:after {
    content: "";
    background: color-mix(in oklch, var(--green) 60%, var(--line));
    width: 1px;
    height: 18px;
    position: absolute;
    bottom: -18px;
    left: 50%
  }

  .home-system__object-icon {
    width: 34px;
    height: 34px;
    color: var(--green);
    background: color-mix(in oklch, var(--green) 8%, var(--surface));
    border: 1px solid color-mix(in oklch, var(--green) 24%, var(--line));
    border-radius: 5px;
    place-items: center;
    display: grid
  }

  .home-system__object-icon .ui-icon {
    stroke-width: 1.65px
  }

  .home-system__object strong {
    letter-spacing: -.02em;
    align-self: end;
    font-size: .75rem;
    line-height: 1.15
  }

  .home-system__object small {
    color: var(--muted);
    font-size: .56rem;
    line-height: 1.2
  }

  .home-system--map .home-system__protocols {
    background: 0 0;
    border: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    margin-top: 1.1rem;
    padding-block: .6rem;
    display: grid;
    position: relative
  }

  .home-system--map .home-system__protocols:before {
    content: "";
    background: color-mix(in oklch, var(--green) 34%, var(--line));
    height: 1px;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0
  }

  .home-system--map .home-system__protocols>span {
    z-index: 1;
    min-width: 0;
    color: var(--ink);
    background: color-mix(in oklch, var(--surface) 96%, transparent);
    border: 1px solid color-mix(in oklch, var(--green) 22%, var(--line));
    text-align: left;
    border-radius: 5px;
    grid-template-rows: auto auto;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: .42rem;
    padding: .45rem .55rem;
    display: grid;
    position: relative
  }

  .home-system__protocols>span>i {
    background: var(--lime);
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--lime) 10%, transparent), 0 0 14px color-mix(in oklch, var(--lime) 52%, transparent);
    border-radius: 50%;
    grid-row: 1/span 2;
    animation: 2.8s ease-in-out infinite home-system-pulse
  }

  .home-system__protocols>span:nth-child(2)>i {
    animation-delay: .45s
  }

  .home-system__protocols>span:nth-child(3)>i {
    animation-delay: .9s
  }

  .home-system__protocols b {
    color: var(--green);
    font: 650 .66rem/1.1 IBM Plex Mono, ui-monospace, monospace
  }

  .home-system__protocols small {
    color: var(--muted);
    font-size: .52rem;
    line-height: 1.1
  }

  .home-system__rack {
    background: color-mix(in oklch, var(--surface) 92%, transparent);
    border: 1px solid color-mix(in oklch, var(--green) 20%, var(--line));
    border-radius: 7px;
    margin-top: .25rem;
    padding: .85rem;
    position: relative
  }

  .home-system__rack:before,
  .home-system__dispatch:before {
    content: "";
    background: var(--green);
    width: 1px;
    height: 17px;
    box-shadow: 0 0 10px color-mix(in oklch, var(--green) 35%, transparent);
    position: absolute;
    top: -17px;
    left: 50%
  }

  .home-system__rack-head {
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: .7rem;
    display: flex
  }

  .home-system__rack-head strong {
    font-size: .78rem;
    line-height: 1.15
  }

  .home-system__rack-head span {
    color: var(--muted);
    font: 500 .54rem/1.2 IBM Plex Mono, ui-monospace, monospace
  }

  .home-system__modules {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .4rem;
    padding-block: .48rem;
    display: grid;
    position: relative
  }

  .home-system__modules:before {
    content: "";
    background: linear-gradient(180deg, color-mix(in oklch, var(--ink) 11%, transparent), color-mix(in oklch, var(--ink) 4%, transparent));
    border-block: 1px solid color-mix(in oklch, var(--ink) 13%, transparent);
    height: 8px;
    position: absolute;
    top: 50%;
    left: -.85rem;
    right: -.85rem;
    translate: 0 -50%
  }

  .home-system__module {
    z-index: 1;
    min-width: 0;
    min-height: 72px;
    color: var(--ink);
    background: color-mix(in oklch, var(--surface) 96%, var(--green) 4%);
    border: 1px solid color-mix(in oklch, var(--green) 34%, var(--line));
    border-radius: 4px;
    grid-template-rows: auto auto auto;
    grid-template-columns: 6px 1fr;
    column-gap: .42rem;
    padding: .46rem .42rem .42rem;
    display: grid;
    position: relative;
    box-shadow: 0 7px 16px oklch(12% .02 165/.08)
  }

  .home-system__module-strip {
    background: color-mix(in oklch, var(--green) 62%, var(--surface));
    border-radius: 2px;
    grid-row: 1/-1;
    width: 4px;
    height: 100%
  }

  .home-system__leds {
    align-items: center;
    gap: 3px;
    min-height: 7px;
    display: flex
  }

  .home-system__leds i {
    background: color-mix(in oklch, var(--green) 35%, var(--line));
    border-radius: 50%;
    width: 4px;
    height: 4px
  }

  .home-system__leds i:first-child {
    background: var(--lime);
    box-shadow: 0 0 7px color-mix(in oklch, var(--lime) 55%, transparent)
  }

  .home-system__module b {
    color: var(--green);
    align-self: end;
    font: 650 .64rem/1 IBM Plex Mono, ui-monospace, monospace
  }

  .home-system__module small {
    color: var(--muted);
    font-size: .48rem;
    line-height: 1.1
  }

  .home-system__rack>p {
    color: var(--muted);
    margin-top: .65rem;
    font-size: .56rem;
    line-height: 1.25
  }

  .home-system--map .home-system__dispatch {
    background: color-mix(in oklch, var(--dark) 92%, var(--green) 8%);
    border: 1px solid color-mix(in oklch, var(--green) 36%, var(--line));
    border-radius: 6px;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .7rem;
    margin-top: 1.05rem;
    padding: .82rem;
    display: grid;
    position: relative
  }

  .home-system__dispatch-icon {
    width: 38px;
    height: 38px;
    color: var(--lime);
    background: oklch(100% 0 0/.04);
    border: 1px solid oklch(100% 0 0/.12);
    border-radius: 5px;
    place-items: center;
    display: grid
  }

  .home-system__dispatch-copy {
    gap: .18rem;
    min-width: 0;
    display: grid
  }

  .home-system__dispatch-copy strong {
    color: var(--on-dark);
    font: 650 .76rem/1.15 IBM Plex Mono, ui-monospace, monospace
  }

  .home-system__dispatch-copy span {
    color: var(--on-dark-muted);
    font-size: .56rem
  }

  .home-system__online {
    color: var(--on-dark-muted);
    align-items: center;
    gap: .35rem;
    font: 600 .52rem/1 IBM Plex Mono, ui-monospace, monospace;
    display: inline-flex
  }

  .home-system__online i {
    background: var(--lime);
    width: 6px;
    height: 6px;
    box-shadow: 0 0 9px color-mix(in oklch, var(--lime) 60%, transparent);
    border-radius: 50%
  }

  .home-system--map figcaption {
    color: var(--muted);
    background: color-mix(in oklch, var(--surface) 90%, transparent);
    border-top: 1px solid color-mix(in oklch, var(--green) 18%, var(--line));
    justify-content: space-between;
    gap: 1rem;
    padding: .72rem 1rem;
    font-size: .57rem;
    line-height: 1.3;
    display: flex
  }

  .home-directory__arrow {
    width: 30px;
    height: 30px;
    color: var(--green);
    background: color-mix(in oklch, var(--green) 4%, transparent);
    border: 1px solid color-mix(in oklch, var(--green) 25%, var(--line));
    transition: color .2s, background .2s, border-color .2s, transform .2s var(--ease);
    border-radius: 5px;
    flex: 0 0 30px;
    place-items: center;
    font-size: 0;
    display: grid
  }

  .home-directory__arrow:before {
    content: "";
    border-top: 1.5px solid;
    border-right: 1.5px solid;
    width: 7px;
    height: 7px;
    transform: translate(-1px)rotate(45deg)
  }

  .home-directory__item:hover .home-directory__arrow,
  .home-directory__item:focus-visible .home-directory__arrow {
    color: var(--button-on-green);
    background: var(--green);
    border-color: var(--green);
    transform: translate(2px)
  }

  @keyframes home-system-pulse {

    0%,
    to {
      opacity: .45;
      scale: .8
    }

    50% {
      opacity: 1;
      scale: 1.12
    }
  }

  @media (prefers-reduced-motion:reduce) {
    .home-system__protocols>span>i {
      animation: none
    }
  }

  @media (width<=760px) {
    .home-system--map .home-system__header span {
      display: none
    }

    .home-system__diagram {
      padding: .75rem
    }

    .home-system--map .home-system__objects {
      gap: .4rem
    }

    .home-system__object {
      min-height: 98px;
      padding: .65rem .55rem
    }

    .home-system__object-icon {
      width: 30px;
      height: 30px
    }

    .home-system__object strong {
      font-size: .68rem
    }

    .home-system__object small {
      display: none
    }

    .home-system--map .home-system__protocols {
      gap: .35rem
    }

    .home-system--map .home-system__protocols>span {
      padding: .4rem
    }

    .home-system__protocols small,
    .home-system__rack-head span {
      display: none
    }

    .home-system__modules {
      gap: .28rem
    }

    .home-system__module {
      min-height: 64px;
      padding: .4rem .32rem
    }

    .home-system__module small {
      display: none
    }

    .home-system--map .home-system__dispatch {
      grid-template-columns: auto 1fr
    }

    .home-system__online {
      display: none
    }

    .home-system--map figcaption {
      gap: .25rem;
      display: grid
    }
  }

  main {
    background: linear-gradient(color-mix(in oklch, var(--ink) 5.5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--ink) 5.5%, transparent) 1px, transparent 1px), radial-gradient(circle at 88% 0%, color-mix(in oklch, var(--green) 7%, transparent), transparent 34rem), var(--paper);
    background-size: 44px 44px, 44px 44px, auto, auto
  }

  .home-hero,
  .home-directory-section,
  .page-hero,
  .product-detail-hero,
  .repair-hero,
  .integration-hero,
  .section--white,
  .product-engineering-section {
    background-color: color-mix(in oklch, var(--paper) 84%, transparent)
  }

  .section--dark,
  .site-footer,
  .mobile-menu {
    background-color: var(--dark)
  }

  @media (width<=760px) {
    main {
      background-size: 32px 32px, 32px 32px, auto, auto
    }

    .home-system--map .home-system__objects {
      grid-template-columns: 1fr;
      gap: .38rem
    }

    .home-system--map .home-system__object {
      grid-template-rows: auto auto;
      grid-template-columns: 32px minmax(0, 1fr);
      place-items: center start;
      gap: .08rem .65rem;
      min-height: 0;
      padding: .58rem .65rem
    }

    .home-system--map .home-system__object:after {
      display: none
    }

    .home-system--map .home-system__object-icon {
      grid-row: 1/span 2;
      width: 30px;
      height: 30px
    }

    .home-system--map .home-system__object strong {
      align-self: end;
      font-size: .73rem
    }

    .home-system--map .home-system__object small {
      align-self: start;
      font-size: .54rem;
      display: block
    }

    .home-system--map .home-system__protocols {
      grid-template-columns: 1fr;
      gap: .32rem;
      margin-top: .55rem;
      padding-block: .35rem
    }

    .home-system--map .home-system__protocols:before {
      display: none
    }

    .home-system--map .home-system__protocols>span {
      grid-template-rows: 1fr;
      grid-template-columns: auto auto minmax(0, 1fr);
      gap: .5rem;
      padding: .5rem .6rem
    }

    .home-system--map .home-system__protocols>span>i {
      grid-row: auto
    }

    .home-system--map .home-system__protocols small {
      text-align: right;
      justify-self: end;
      font-size: .52rem;
      display: block
    }

    .home-system--map .home-system__rack {
      margin-top: .45rem;
      padding: .7rem
    }

    .home-system--map .home-system__rack:before {
      height: 10px;
      top: -10px
    }

    .home-system--map .home-system__rack-head {
      margin-bottom: .55rem
    }

    .home-system--map .home-system__rack-head span {
      font-size: .5rem;
      display: block
    }

    .home-system--map .home-system__modules {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .4rem;
      padding-block: .4rem
    }

    .home-system--map .home-system__module {
      min-height: 66px;
      padding: .45rem
    }

    .home-system--map .home-system__module small {
      font-size: .48rem;
      display: block
    }

    .home-system--map .home-system__modules:before {
      left: -.7rem;
      right: -.7rem
    }

    .home-system--map .home-system__dispatch {
      grid-template-columns: auto minmax(0, 1fr);
      margin-top: .8rem;
      padding: .7rem
    }

    .home-system--map .home-system__online {
      display: none
    }
  }

  .home-directory__arrow,
  .news-item__arrow {
    width: 28px;
    min-width: 28px;
    height: 28px;
    color: var(--green);
    border: 1px solid color-mix(in oklch, var(--green) 38%, var(--line));
    background: 0 0;
    border-radius: 4px;
    place-items: center;
    padding: 0;
    font-size: 0;
    line-height: 0;
    transition: color .18s, background .18s, border-color .18s, transform .18s;
    display: inline-grid;
    position: relative;
    overflow: hidden
  }

  .home-directory__arrow:before,
  .news-item__arrow:before {
    content: "";
    border-top: 1.6px solid;
    border-right: 1.6px solid;
    width: 7px;
    height: 7px;
    transform: translate(-2px)rotate(45deg)
  }

  .home-directory__item:hover .home-directory__arrow,
  .home-directory__item:focus-visible .home-directory__arrow,
  .news-item:hover .news-item__arrow,
  .news-item:focus-visible .news-item__arrow {
    color: var(--button-on-green);
    background: var(--green);
    border-color: var(--green)
  }

  .home-directory__item:hover .home-directory__arrow:before,
  .news-item:hover .news-item__arrow:before {
    transform: translate(0)rotate(45deg)
  }

  .doc-card__link:after,
  .news-card__link:after {
    content: none !important
  }

  .product-card__action b {
    font-variant-emoji: text;
    font-family: IBM Plex Sans, Arial, sans-serif
  }

  @media (width<=760px) {

    .home-directory__item,
    .home-directory__item:nth-child(odd),
    .home-directory__item:nth-child(2n) {
      grid-template-columns: 32px minmax(0, 1fr) 28px;
      align-items: start;
      gap: .8rem;
      padding: 1rem 0
    }

    .home-directory__item:nth-child(odd):hover,
    .home-directory__item:nth-child(2n):hover {
      padding-left: 0;
      padding-right: 0
    }

    .home-directory__icon {
      width: 26px;
      height: 26px;
      margin-top: .12rem
    }

    .home-directory__arrow {
      justify-self: end;
      margin-top: .05rem
    }

    .news-item__arrow {
      place-self: start end;
      margin-top: .05rem
    }
  }

  @media (hover:none) {

    .home-directory__item:hover,
    .home-directory__item:nth-child(odd):hover,
    .home-directory__item:nth-child(2n):hover {
      background: 0 0;
      padding-left: 0;
      padding-right: 0
    }

    .home-directory__item:active .home-directory__arrow,
    .news-item:active .news-item__arrow {
      color: var(--button-on-green);
      background: var(--green);
      border-color: var(--green)
    }
  }
}

@layer utilities {
  .text-green {
    color: var(--green)
  }

  .text-lime {
    color: var(--lime)
  }

  .mt-2 {
    margin-top: 2rem
  }

  .mt-3 {
    margin-top: 3rem
  }

  .sr-only {
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden
  }
}