:root {
  color-scheme: dark;
  --bg: #0b0f13;
  --surface: #10151b;
  --surface-2: #161d24;
  --panel: #26313a;
  --text: #f4f7f9;
  --muted: #9aa6b2;
  --quiet: #74808b;
  --line: rgba(143, 211, 255, 0.14);
  --line-strong: rgba(143, 211, 255, 0.28);
  --header-bg: #10151b;
  --header-nav: #bcc7d0;
  --ice: #8fd3ff;
  --ice-ink: #07131a;
  --ice-edge: #26313a;
  /* Dark controls use a quiet light edge: visible, never a bright white frame. */
  --button-edge: rgba(231, 240, 244, 0.3);
  --button-edge-hover: rgba(246, 250, 252, 0.48);
  --copper: #c9785a;
  --signal: #f2b84b;
  --signal-hover: #ffd06a;
  /* Partner marks stay deliberately quiet: they describe possible scope, not a live connection. */
  --integration-tone: #9aa6b2;
  --signal-ink: #1d1403;
  --danger: #ef8d7c;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
  /* Shared public/account aliases; keep legacy components on the theme tokens. */
  --paper: var(--surface-2);
  --ink: var(--text);
  --ink-text: #f4f7f9;
  --shadow-soft: 0 16px 42px rgba(0, 0, 0, 0.18);
  --sans:
    Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  /* The compact statement style is the public reference: clear, dense and calm. */
  --display-weight: 650;
  --max: 1240px;
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --header-height: 74px;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #c7d0d4;
  --surface: #c4ced3;
  --surface-2: #edf1f3;
  --panel: #f6f8f9;
  --text: #10151b;
  /* Keep supporting copy and micro-labels legible on the cool light canvas. */
  --muted: #3e4d57;
  --quiet: #4a5963;
  --line: rgba(16, 21, 27, 0.13);
  --line-strong: rgba(16, 21, 27, 0.26);
  --header-bg: #edf1f3;
  --header-nav: #35434d;
  --ice: #8fd3ff;
  --ice-ink: #07131a;
  /* The matching light-theme control edge is a quiet graphite, never blue. */
  --button-edge: rgba(16, 21, 27, 0.36);
  --button-edge-hover: rgba(16, 21, 27, 0.54);
  --copper: #c9785a;
  --signal: #c9785a;
  --signal-hover: #aa6148;
  --integration-tone: #26313a;
  --signal-ink: #10151b;
  --danger: #a84535;
  --shadow: 0 28px 80px rgba(45, 59, 68, 0.16);
  --paper: var(--surface-2);
  --ink: var(--text);
  --ink-text: #f4f7f9;
  --shadow-soft: 0 16px 42px rgba(45, 59, 68, 0.12);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  background: var(--bg);
}
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html.nav-open {
  overflow: hidden;
  overscroll-behavior: none;
}
body.nav-open {
  position: fixed;
  right: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}
body.nav-open .site-header {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 80;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
img {
  display: block;
  max-width: 100%;
}
::selection {
  background: var(--ice);
  color: var(--ice-ink);
}

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: grid;
  place-content: center;
  gap: 15px;
  background: var(--bg);
  color: var(--text);
  pointer-events: none;
  opacity: 1;
  transition: opacity 380ms ease;
}
.site-loader-mark {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  margin-inline: auto;
  border: 1px solid var(--text);
  transform: rotate(45deg);
  animation: loader-turn 540ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.site-loader-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -9px;
  width: 60px;
  height: 2px;
  background: var(--ice);
  transform: translateY(-50%) rotate(-45deg);
  transform-origin: center;
}
.site-loader-label {
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.2em;
  text-align: center;
}
body.motion-ready .site-loader {
  opacity: 0;
}

@keyframes loader-turn {
  from {
    opacity: 0;
    transform: rotate(45deg) scale(0.72);
  }
  to {
    opacity: 1;
    transform: rotate(45deg) scale(1);
  }
}
@keyframes brief-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -7px, 0);
  }
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 1000;
  transform: translateY(-160%);
  padding: 11px 15px;
  border-radius: var(--radius-xs);
  background: var(--ice);
  color: var(--ice-ink);
  font-weight: 700;
}
.skip-link:focus {
  transform: translateY(0);
}

.container {
  width: min(calc(100% - 40px), var(--max));
  margin-inline: auto;
}
.narrow {
  width: min(calc(100% - 40px), 820px);
  margin-inline: auto;
}
.section-action {
  margin: 30px 0 0;
}
.concierge-actions {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}
.section-action-wide {
  margin: 34px 0 0;
}
.section-head-single {
  grid-template-columns: 1fr;
}
.stack {
  display: grid;
  gap: 18px;
}
.stack-lg {
  display: grid;
  gap: 32px;
}
.eyebrow-note {
  color: var(--quiet);
  font: 10px/1.5 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* V2 positioning: evidence is a route to a role, not a generic score card. */
.verification-standard {
  border-block: 1px solid var(--line);
  background: var(--surface-2);
}
.verification-standard-head {
  margin-bottom: clamp(32px, 5vw, 56px);
}
.verification-standard-head h2 {
  max-width: 17ch;
}
.verification-standard-head h2 span {
  color: var(--ice);
}
.verification-standard-head > p {
  max-width: 43ch;
}
.verification-route {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  list-style: none;
  background: var(--line);
}
.verification-route li {
  min-height: 205px;
  display: grid;
  align-content: space-between;
  gap: 16px;
  padding: 22px;
  background: var(--surface);
}
.verification-route li + li {
  border-left: 1px solid var(--line-strong);
}
.verification-route span {
  color: var(--signal);
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.12em;
}
.verification-route strong {
  display: block;
  color: var(--text);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 1;
}
.verification-route p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.verification-standard .section-action {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
}
.verification-standard .text-link {
  font-size: 14px;
}
html[data-theme="light"] .verification-standard-head h2 span {
  color: var(--copper);
}

@media (max-width: 860px) {
  .verification-route {
    grid-template-columns: 1fr;
  }
  .verification-route li {
    min-height: 0;
    grid-template-columns: 44px 1fr;
    gap: 11px 15px;
    align-content: start;
    padding: 20px;
  }
  .verification-route li + li {
    border-top: 1px solid var(--line-strong);
    border-left: 0;
  }
  .verification-route li span {
    grid-row: span 2;
    padding-top: 3px;
  }
  .verification-route strong,
  .verification-route p {
    grid-column: 2;
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  height: var(--header-height);
  border-bottom: 1px solid var(--line-strong);
  background: var(--header-bg);
  backdrop-filter: blur(18px);
}
.no-js-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 18px 5vw;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
}
.no-js-nav a {
  color: var(--muted);
  font-size: 13px;
}
.no-js-nav .no-js-brand {
  margin-right: auto;
  color: var(--text);
  font: 700 15px var(--sans);
  letter-spacing: 0.08em;
}
.no-js-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 24px 5vw;
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--quiet);
  font-size: 12px;
}
.no-js-footer a {
  color: var(--muted);
}
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 24px);
}
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: max-content;
}
.atacsys-mark-hover {
  position: relative;
  display: inline-grid;
  isolation: isolate;
  aspect-ratio: 1 / 1;
  place-items: center;
  line-height: 0;
  transform: scale(1);
  transform-origin: center;
}
.atacsys-mark-hover.atacsys-mark-emphasis {
  transform: scale(1.1);
}
.atacsys-mark-hover > img {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}
.atacsys-mark-bar {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
}
.brand-mark {
  width: 100%;
  height: 100%;
}
html[data-theme="light"] .atacsys-mark-hover > img {
  filter: none;
}

/* The blue diagonal is the only animated part of the ATACSYS mark. */
@keyframes atacsys-stripe-flash {
  0%,
  100% {
    opacity: 0;
    filter: brightness(1) saturate(1) drop-shadow(0 1px 1px rgba(15, 27, 38, 0.34));
  }
  50% {
    opacity: 1;
    filter: brightness(1.9) saturate(1.35) drop-shadow(0 0 7px rgba(143, 211, 255, 0.92));
  }
}
.atacsys-mark-hover::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: #8fd3ff;
  clip-path: polygon(61.719% 31.055%, 63.867% 34.18%, 39.453% 75.586%, 35.547% 75.586%);
  opacity: 0;
  transform: translateZ(0);
  animation: atacsys-stripe-flash 4.2s ease-in-out infinite;
}
/* Every canonical public mark has the same quiet live-status pulse. */
.site-header .atacsys-mark-bar::after {
  animation-duration: 3.6s;
}
.atacsys-mark-footer::after {
  animation-delay: -0.7s;
}
@media (prefers-reduced-motion: reduce) {
  .atacsys-mark-hover::after {
    animation: none !important;
    opacity: 0 !important;
  }
}
.brand-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.14em;
}
/* The header lockup is deliberately prominent now that navigation lives in the menu. */
.header-brand-link {
  margin-left: clamp(8px, 1.2vw, 18px);
}
.site-header .brand-lockup {
  gap: 14px;
}
.site-header .brand-name {
  font-size: 18px;
  letter-spacing: 0.13em;
}
.site-header .brand-note {
  font-size: 10px;
  letter-spacing: 0.09em;
}
.brand-note {
  display: inline-block;
  margin-left: 7px;
  color: var(--muted);
  font: 700 10px/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The small text-roll is reserved for Agent Bank role names. Desktop users can
   inspect it on hover; touch users see it once as a name enters view. Reading
   never depends on the motion, and words preserve their natural line breaks. */
.text-roll {
  display: block;
  overflow: hidden;
  white-space: normal;
}
.text-roll__word {
  display: inline-flex;
  margin-right: 0.3em;
  white-space: nowrap;
}
.text-roll__slot {
  display: inline-block;
  height: 1.16em;
  overflow: hidden;
}
.text-roll__track {
  display: flex;
  flex-direction: column;
  will-change: transform;
  transition: transform 240ms cubic-bezier(0.22, 0.78, 0.26, 1);
  transition-delay: calc(var(--roll-index) * 14ms);
}
.text-roll__glyph {
  display: block;
  height: 1.16em;
  line-height: 1.16;
}
@media (hover: hover) and (pointer: fine) {
  .text-roll:hover .text-roll__track {
    transform: translate3d(0, -50%, 0);
  }
}
.text-roll.is-text-roll-visible .text-roll__track {
  transform: translate3d(0, -50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .text-roll__track {
    transition: none;
  }
}

.atacsys-mark-footer {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
}
.header-context {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin-right: auto;
  color: var(--header-nav);
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.header-context::before {
  content: "";
  width: 16px;
  height: 1px;
  flex: 0 0 auto;
  background: var(--signal);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.theme-toggle,
.menu-toggle {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition:
    transform 320ms cubic-bezier(0.2, 1.45, 0.5, 1),
    color 180ms ease,
    background-color 180ms ease;
}
.theme-orb {
  width: 18px;
  height: 18px;
  overflow: visible;
  transform: rotate(-45deg);
}
.theme-orb circle {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.3;
}
.theme-orb-dark {
  fill: #0b0f13;
}
.theme-orb-light {
  fill: #c7d0d4;
}
.theme-toggle:hover,
.menu-toggle:hover {
  transform: translateY(-1px) scale(1.09);
  background: transparent;
  color: var(--ice);
}
.theme-toggle:focus-visible,
.menu-toggle:focus-visible {
  background: transparent;
  color: var(--ice);
}
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="light"] .menu-toggle:hover,
html[data-theme="light"] .theme-toggle:focus-visible,
html[data-theme="light"] .menu-toggle:focus-visible {
  color: #10151b;
}
/* A menu is an explicit state: its control keeps the Ice Blue signal in either theme. */
.menu-toggle[aria-expanded="true"] {
  color: #8FD3FF;
}
.menu-toggle {
  display: inline-grid;
}
.menu-glyph {
  display: grid;
  width: 18px;
  gap: 4px;
}
.menu-glyph i {
  display: block;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
}
.menu-glyph i:nth-child(2) {
  height: 3px;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--button-edge);
  border-width: 1px;
  border-radius: 3px;
  overflow: visible;
  background: var(--ice);
  color: var(--ice-ink);
  /* Dark-theme actions float on the deepest available shadow, never a blue or white halo. */
  box-shadow:
    0 3px 7px -3px rgba(0, 0, 0, 0.94),
    0 10px 22px -7px rgba(0, 0, 0, 0.88);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}
.btn:hover,
.btn:focus-visible {
  border-color: var(--button-edge-hover);
  border-width: 1px;
  transform: translateY(-2px);
  box-shadow:
    0 4px 9px -3px rgba(0, 0, 0, 0.96),
    0 13px 26px -7px rgba(0, 0, 0, 0.92);
}
.btn:active {
  border-color: var(--button-edge-hover);
  border-width: 1px;
  transform: translateY(3px);
  box-shadow:
    0 2px 5px -3px rgba(0, 0, 0, 0.88),
    0 6px 13px -7px rgba(0, 0, 0, 0.8);
}
.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--button-edge);
}
/* Controls lift on hover, but the edge always remains one pixel. */
.btn-secondary:hover,
.btn-secondary:focus-visible {
  border-color: var(--button-edge-hover);
}
.btn-signal {
  background: var(--signal);
  color: var(--signal-ink);
}
.btn-small {
  min-height: 38px;
  padding-inline: 15px;
  font-size: 10px;
}
.btn-block {
  width: 100%;
}
.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

html[data-theme="light"] .skip-link {
  border: 1px solid var(--button-edge);
}
html[data-theme="light"] .btn {
  box-shadow:
    0 3px 5px -3px rgba(5, 8, 11, 0.24),
    0 8px 18px -7px rgba(5, 8, 11, 0.32);
}
html[data-theme="light"] .btn:hover,
html[data-theme="light"] .btn:focus-visible {
  box-shadow:
    0 4px 7px -3px rgba(5, 8, 11, 0.24),
    0 11px 22px -7px rgba(5, 8, 11, 0.36);
}
html[data-theme="light"] .btn:active {
  box-shadow:
    0 2px 4px -3px rgba(5, 8, 11, 0.22),
    0 5px 11px -7px rgba(5, 8, 11, 0.25);
}

/* The dark and light systems intentionally share geometry, not edge colour. */
html:not([data-theme="light"]) .btn {
  border-color: var(--button-edge);
}

.mobile-nav {
  position: fixed;
  inset: var(--header-height) 0 0;
  z-index: 70;
  display: none;
  padding: 18px max(20px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  isolation: isolate;
}
.mobile-nav.is-open {
  display: block;
}
.mobile-nav a {
  display: block;
  min-height: 64px;
  padding: 19px 2px;
  border-bottom: 0;
  font-size: 24px;
  letter-spacing: -0.04em;
}
.mobile-nav .mobile-nav-link {
  display: flex !important;
  align-items: center;
  padding: 19px 2px 19px 46px;
}
.mobile-nav-label {
  min-width: 0;
}
.mobile-nav-mark {
  width: 0;
  height: 40px;
  flex: 0 0 auto;
  margin-right: 0;
  opacity: 0;
  transform: translate3d(-12px, 0, 0);
  transition:
    width 240ms ease,
    margin-right 240ms ease,
    opacity 180ms ease,
    transform 240ms ease;
}
.mobile-nav-mark > img {
  width: 40px;
  height: 40px;
}
/*
 * Safari can retain :hover after a tap. Limit the expanding desktop affordance
 * to a real fine pointer so a touch cannot leave arbitrary menu rows marked.
 */
@media (hover: hover) and (pointer: fine) {
  .mobile-nav-link:is(:hover, :focus-visible) .mobile-nav-mark {
    width: 40px;
    margin-right: 14px;
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
/* On touch, the first tap identifies one exact route before the second tap follows it. */
.mobile-nav-link.is-mobile-nav-armed .mobile-nav-mark {
  width: 40px;
  margin-right: 14px;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* The menu mark keeps its Ice Blue stripe in both colour themes. */
.mobile-nav-link .mobile-nav-mark::after {
  background: #8FD3FF;
}
@media (hover: hover) and (pointer: fine) {
  .mobile-nav-link:is(:hover, :focus-visible) .mobile-nav-mark::after {
    opacity: 0.72;
    animation: atacsys-stripe-flash 1.7s ease-in-out infinite;
  }
}
.mobile-nav a[aria-current="page"] {
  color: var(--text);
}
.mobile-nav-current {
  margin-left: auto;
  padding-left: 14px;
  color: var(--signal);
  font: 700 9px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* The revealed canonical mark is the menu's focus indicator; avoid a second blue frame. */
.mobile-nav a:focus-visible {
  outline: none;
  color: var(--text);
}
.mobile-nav .mobile-cta {
  display: flex;
  width: auto;
  min-height: 44px;
  margin: 18px 0 0 46px;
  padding: 0;
  border: 0;
}
.mobile-nav .mobile-cta:focus-visible {
  box-shadow: none;
}
.mobile-nav .mobile-cta-signal {
  width: min(100%, 190px);
  min-height: 44px;
  padding: 11px 18px;
  background: var(--signal);
  color: var(--signal-ink);
  font-size: 13px;
}

@keyframes mobile-nav-item-enter {
  from {
    opacity: 0;
    transform: translate3d(-18px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.announcement {
  border-bottom: 1px solid var(--line-strong);
  background: var(--surface);
}
.announcement-inner {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 620;
  text-align: center;
}
.announcement strong {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  gap: 8px;
  padding-inline: 0;
  color: var(--muted);
  font-weight: 720;
}
.announcement strong::before,
.accent-segments::before {
  content: "";
  width: 21px;
  height: 7px;
  flex: 0 0 auto;
}
.announcement strong::before {
  /* The review bar is one continuous signal, not a broken ornament. */
  background: linear-gradient(var(--signal), var(--signal)) center / 21px 1px no-repeat;
}
.accent-segments::before {
  background:
    linear-gradient(var(--signal), var(--signal)) 0 3px / 7px 1px no-repeat,
    linear-gradient(var(--signal), var(--signal)) 10px 3px / 4px 1px no-repeat,
    linear-gradient(var(--signal), var(--signal)) 17px 3px / 4px 1px no-repeat;
}
.announcement a {
  color: var(--muted);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.hero {
  position: relative;
  min-height: min(820px, calc(100vh - 116px));
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
}
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(72px, 9vw, 128px) clamp(28px, 6vw, 86px);
}
.kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 24px;
  color: var(--muted);
  font: 10px/1.4 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--signal);
}
.hero h1 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(52px, 6.8vw, 100px);
  font-weight: var(--display-weight);
  line-height: 0.92;
  letter-spacing: -0.072em;
}
.hero h1 span {
  color: var(--ice);
}
/* Shared display accents retain the correct theme color before motion starts. */
main h1 > span,
main h2 > span,
[data-ice-reveal] {
  color: var(--ice);
}
.hero-lead {
  max-width: 600px;
  margin: 30px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.52;
  letter-spacing: -0.018em;
}
.hero-signal {
  display: grid;
  justify-items: start;
  gap: 26px;
  max-width: 100%;
  margin-top: 50px;
}
.atacsys-mark-hero-signal {
  width: clamp(360px, 32vw, 460px);
  height: clamp(360px, 32vw, 460px);
}
/* The locked mark is never redrawn: only its canonical Ice Blue diagonal receives a short pulse. */
.atacsys-mark-hero-signal::after {
  animation: atacsys-stripe-flash 2.9s ease-in-out infinite;
}
.hero-signal-line {
  min-height: 1.54em;
  max-width: 100%;
  margin: 0;
  padding-block: 0.1em;
  color: var(--text);
  font: 650 clamp(14px, 1.3vw, 17px) / 1.34 var(--mono);
  letter-spacing: 0.075em;
  white-space: nowrap;
}
.hero-signal-static {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
}
.hero-signal-cells {
  display: none;
  align-items: flex-start;
  max-width: 100%;
  overflow: hidden;
  padding-inline: 0.06ch;
  white-space: pre;
}
.hero-signal.is-animated .hero-signal-static {
  display: none;
}
.hero-signal.is-animated .hero-signal-cells {
  display: inline-flex;
}
.hero-signal-cell {
  position: relative;
  display: inline-block;
  width: 1.16ch;
  height: 1.54em;
  overflow: hidden;
  vertical-align: top;
}
.hero-signal-cell.is-space {
  width: 0.58ch;
}
.hero-signal-drum-current,
.hero-signal-drum-next {
  position: absolute;
  inset: 0.1em 0 auto;
  display: block;
  height: 1.34em;
  line-height: 1.34em;
  will-change: opacity, transform;
}
.hero-signal-drum-next {
  transform: translate3d(0, 108%, 0);
  opacity: 0;
}
.hero-signal-cell.is-ticking .hero-signal-drum-current {
  animation: hero-signal-drum-out 58ms linear both;
}
.hero-signal-cell.is-ticking .hero-signal-drum-next {
  animation: hero-signal-drum-in 58ms linear both;
}
@keyframes hero-signal-drum-out {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(0, -108%, 0);
    opacity: 0;
  }
}
@keyframes hero-signal-drum-in {
  from {
    transform: translate3d(0, 108%, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
/* The home opening is intentionally one centered statement: no secondary
   product-card competes with the logo, counter line or the first decision. */
body[data-page="home"] .hero {
  grid-template-columns: minmax(0, 1fr);
  min-height: min(980px, calc(100vh - 116px));
  place-items: center;
}
body[data-page="home"] .hero-copy {
  width: min(100%, 1000px);
  min-height: 0;
  align-items: center;
  margin-inline: auto;
  padding: clamp(82px, 8vw, 132px) clamp(24px, 6vw, 86px);
  text-align: center;
}
body[data-page="home"] .hero-copy .kicker,
body[data-page="home"] .hero-actions,
body[data-page="home"] .hero-assurance {
  justify-content: center;
}
body[data-page="home"] .hero h1 {
  max-width: 14ch;
}
body[data-page="home"] .hero-signal {
  justify-items: center;
}
/* The canonical square intentionally includes generous clear space around the
   triangle. Negative layout margins remove only that empty space, not any part
   of the locked mark, so the signal line stays in the opening viewport. */
body[data-page="home"] .atacsys-mark-hero-signal {
  margin-block: -52px;
}
body[data-page="home"] .hero-lead {
  margin-inline: auto;
}
body[data-page="home"] .hero-logo-ticker {
  /* The systems line is a page-wide continuity cue. It deliberately escapes
     the centred hero copy but remains clipped by its own viewport. */
  width: 100vw;
  max-width: 100vw;
  align-self: center;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 34px;
}
.hero-assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 22px;
  margin-top: clamp(50px, 7vw, 88px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.hero-assurance span {
  color: var(--quiet);
  font: 10px/1.45 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-logo-ticker {
  /* Eight pixels is roughly 10% of the ticker's visual height. Reserve the
     space as well, so moving the marks down never crowds the next section. */
  --hero-ticker-offset: 8px;
  display: block;
  overflow: hidden;
  padding-bottom: var(--hero-ticker-offset);
  isolation: isolate;
}
.hero-logo-ticker-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* A mask on Safari can flash as the translated duplicate list returns to
     its starting point. The two identical lists meet outside this clipped
     viewport, so a normal paint boundary is both seamless and stable. */
  contain: paint;
  transform: translate3d(0, var(--hero-ticker-offset), 0);
}
.hero-logo-ticker-track {
  display: flex;
  width: max-content;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.hero-logo-ticker-list {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero-logo-ticker-list li {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 14px;
  min-width: 248px;
  min-height: 42px;
  padding-right: clamp(28px, 4.6vw, 54px);
  color: var(--integration-tone);
  font: 760 16px/1 var(--sans);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.hero-logo-ticker .integration-mark {
  width: 26px;
  height: 26px;
}
.integration-bitrix24-lockup,
.integration-amocrm-lockup {
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  /* Bitrix24 is shown as a possible scoped system, not a promoted live
     connection. Keep the supplied official mark intact, but neutralise its
     vendor blue so it follows the same calm monochrome system as the rest of
     the integration strip. */
  filter: grayscale(1) brightness(1.42) contrast(0.78);
}
html[data-theme="light"] .integration-bitrix24-lockup,
html[data-theme="light"] .integration-amocrm-lockup {
  filter: grayscale(1) brightness(0.42) contrast(1.22);
}
.integration-bitrix24-lockup {
  width: 94px;
  height: 20px;
}
.integration-amocrm-lockup {
  width: 102px;
  height: 20px;
}
.hero-logo-ticker .integration-brand-item--bitrix24 {
  min-width: 150px;
}
.hero-logo-ticker .integration-brand-item--amocrm {
  min-width: 158px;
}
html.motion-enabled .hero-logo-ticker-track {
  animation: hero-logo-ticker-drift 52s linear infinite;
  will-change: transform;
}
@keyframes hero-logo-ticker-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.motion-stage {
  position: relative;
  min-height: 680px;
  display: grid;
  place-items: center;
  overflow: hidden;
  overflow: clip;
  contain: paint;
  border-left: 1px solid var(--line);
  background: var(--surface);
}
.motion-stage::before {
  content: "";
  position: absolute;
  width: min(68vw, 640px);
  aspect-ratio: 1;
  border: 1px solid var(--line);
  transform: rotate(-18deg);
}
.motion-stage::after {
  content: "";
  position: absolute;
  width: min(72%, 480px);
  height: 1px;
  background: var(--ice);
  opacity: 0.35;
  transform: rotate(-18deg);
}
.motion-stage-inner {
  position: relative;
  z-index: 1;
  width: min(76%, 540px);
  display: grid;
  place-items: center;
  transform: none;
  transition: none;
}
.role-brief {
  width: 100%;
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow);
  transform: none;
  transition: box-shadow 180ms ease-out;
}
.role-brief-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  color: var(--quiet);
  font: 9px/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.role-brief-top b {
  color: var(--signal);
  font-weight: 600;
}
.role-brief-title {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: clamp(26px, 4vw, 42px) 0;
}
.role-brief-title > div {
  min-width: 0;
}
.atacsys-mark-motion {
  width: clamp(58px, 7vw, 78px);
  height: clamp(58px, 7vw, 78px);
  flex: 0 0 auto;
}
.role-brief-title .motion-logo {
  width: 100%;
  height: 100%;
}
.role-brief-title strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 520;
  line-height: 0.94;
  letter-spacing: -0.06em;
}
.role-brief-title span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}
.role-brief-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--line);
}
.role-brief-facts div {
  min-height: 112px;
  padding: 16px;
  background: var(--surface);
}
.role-brief-facts dt {
  color: var(--quiet);
  font: 9px/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.role-brief-facts dd {
  margin: 10px 0 0;
  overflow-wrap: anywhere;
  font-size: 15px;
  font-weight: 560;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.motion-corner {
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--quiet);
  font: 9px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html.motion-enabled [data-reveal] {
  opacity: 1;
  transform: none;
}
html.motion-enabled [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
html.motion-enabled .motion-stage::after {
  animation: brief-drift 6s ease-in-out infinite;
}

/* The home promise and benefit copy enter only as their section becomes useful. */
@media (prefers-reduced-motion: no-preference) {
  html.motion-enabled [data-copy-reveal-item] {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
      opacity 380ms ease-out,
      transform 560ms cubic-bezier(0.22, 0.8, 0.28, 1);
    will-change: opacity, transform;
  }
  html.motion-enabled [data-copy-reveal-item].is-copy-visible,
  html.motion-enabled [data-copy-reveal].is-copy-visible [data-copy-reveal-item] {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  html.motion-enabled .hero [data-copy-reveal-item] {
    transform: translate3d(0, 0.34em, 0);
    transition-delay: 80ms;
  }
  html.motion-enabled .hero [data-copy-reveal-item].is-copy-visible {
    transform: translate3d(0, 0, 0);
  }
  html.motion-enabled .benefit-card [data-copy-reveal-item]:nth-child(2) {
    transition-delay: 85ms;
  }
  html.motion-enabled .benefit-card [data-copy-reveal-item]:nth-child(3) {
    transition-delay: 170ms;
  }
  html.motion-enabled [data-ice-reveal] {
    display: inline-block;
    max-width: 100%;
    opacity: 0;
    transform: translate3d(-0.42em, 0, 0);
    transition:
      opacity 420ms ease-out,
      transform 620ms cubic-bezier(0.22, 0.8, 0.28, 1);
    will-change: opacity, transform;
  }
  html.motion-enabled [data-ice-reveal].is-ice-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  html.motion-enabled [data-display-reveal] {
    opacity: 0;
    transform: translate3d(-0.28em, 0, 0);
    transition:
      opacity 420ms ease-out,
      transform 680ms cubic-bezier(0.22, 0.8, 0.28, 1);
    will-change: opacity, transform;
  }
  html.motion-enabled [data-display-reveal].is-display-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .mobile-nav.is-open > a {
    animation: mobile-nav-item-enter 440ms cubic-bezier(0.22, 0.8, 0.28, 1) both;
  }
  .mobile-nav.is-open > a:nth-child(2) {
    animation-delay: 55ms;
  }
  .mobile-nav.is-open > a:nth-child(3) {
    animation-delay: 110ms;
  }
  .mobile-nav.is-open > a:nth-child(4) {
    animation-delay: 165ms;
  }
  .mobile-nav.is-open > a:nth-child(5) {
    animation-delay: 220ms;
  }
  .mobile-nav.is-open > a:nth-child(6) {
    animation-delay: 275ms;
  }
  .mobile-nav.is-open > a:nth-child(7) {
    animation-delay: 330ms;
  }
}

.integration-marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 130px 0 58px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.integration-marquee-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  margin-top: 76px;
  text-align: center;
}
.integration-marquee-head p {
  margin: 0;
  color: var(--quiet);
  font: 700 9px/1.2 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.integration-marquee-head span {
  color: var(--muted);
  font-size: 11px;
}
.integration-marquee-viewport {
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}
.integration-marquee-track {
  display: flex;
  width: max-content;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* The two lists are identical. Moving exactly one list-width keeps the loop invisible in Safari. */
html.motion-enabled .integration-marquee-track {
  animation: integration-drift-left 60s linear infinite both;
  will-change: transform;
}
.integration-marquee-list {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.integration-marquee-list li {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 236px;
  padding: 14px 36px;
  color: var(--integration-tone);
  font-size: 15px;
  font-weight: 760;
  letter-spacing: 0.035em;
  white-space: nowrap;
}
.integration-mark {
  display: block;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}
.integration-google {
  -webkit-mask-image: url("/assets/integrations/google.svg");
  mask-image: url("/assets/integrations/google.svg");
}
.integration-anthropic {
  -webkit-mask-image: url("/assets/integrations/anthropic.svg");
  mask-image: url("/assets/integrations/anthropic.svg");
}
.integration-apple {
  -webkit-mask-image: url("/assets/integrations/apple.svg");
  mask-image: url("/assets/integrations/apple.svg");
}
.integration-asana {
  -webkit-mask-image: url("/assets/integrations/asana.svg");
  mask-image: url("/assets/integrations/asana.svg");
}
.integration-shopify {
  -webkit-mask-image: url("/assets/integrations/shopify.svg");
  mask-image: url("/assets/integrations/shopify.svg");
}
.integration-notion {
  -webkit-mask-image: url("/assets/integrations/notion.svg");
  mask-image: url("/assets/integrations/notion.svg");
}
.integration-hubspot {
  -webkit-mask-image: url("/assets/integrations/hubspot.svg");
  mask-image: url("/assets/integrations/hubspot.svg");
}
.integration-stripe {
  -webkit-mask-image: url("/assets/integrations/stripe.svg");
  mask-image: url("/assets/integrations/stripe.svg");
}
.integration-zapier {
  -webkit-mask-image: url("/assets/integrations/zapier.svg");
  mask-image: url("/assets/integrations/zapier.svg");
}
.integration-airtable {
  -webkit-mask-image: url("/assets/integrations/airtable.svg");
  mask-image: url("/assets/integrations/airtable.svg");
}
.integration-trello {
  -webkit-mask-image: url("/assets/integrations/trello.svg");
  mask-image: url("/assets/integrations/trello.svg");
}
.integration-amocrm {
  -webkit-mask-image: url("/assets/integrations/amocrm.svg");
  mask-image: url("/assets/integrations/amocrm.svg");
}
.integration-clickup {
  -webkit-mask-image: url("/assets/integrations/clickup.svg");
  mask-image: url("/assets/integrations/clickup.svg");
}
.integration-intercom {
  -webkit-mask-image: url("/assets/integrations/intercom.svg");
  mask-image: url("/assets/integrations/intercom.svg");
}
.integration-whatsapp {
  -webkit-mask-image: url("/assets/integrations/whatsapp.svg");
  mask-image: url("/assets/integrations/whatsapp.svg");
}
.integration-zendesk {
  -webkit-mask-image: url("/assets/integrations/zendesk.svg");
  mask-image: url("/assets/integrations/zendesk.svg");
}
.integration-wordmark {
  width: 29px;
  height: 29px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 6px;
  font: 800 11px/1 var(--sans);
  letter-spacing: -0.08em;
}
.integration-openai {
  border-radius: 50%;
  letter-spacing: -0.13em;
}
.integration-microsoft {
  width: 28px;
  height: 28px;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}
.integration-microsoft i {
  background: currentColor;
}
@keyframes integration-drift-left {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.problem-bar {
  border-bottom: 0;
}
.problem-grid {
  display: grid;
  grid-template-columns: 1.1fr repeat(3, 1fr);
}
.problem-grid > div {
  min-height: 132px;
  padding: 26px 28px;
  border-right: 0;
}
.problem-grid small {
  display: block;
  color: var(--quiet);
  font: 9px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.problem-grid strong {
  display: block;
  margin-top: 14px;
  font-size: clamp(17px, 1.7vw, 23px);
  font-weight: 530;
  line-height: 1.22;
  letter-spacing: -0.035em;
}
.problem-intro strong {
  color: var(--text);
}

.section {
  padding-block: clamp(86px, 10vw, 144px);
  border-bottom: 1px solid var(--line);
}
.section-soft {
  background: var(--surface);
}
.section-head {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  margin-bottom: clamp(48px, 7vw, 86px);
}
/* Decorative section ordinals were removed to keep the public experience human and task-led. */
.section-index {
  display: none;
}
.section-head h2,
.page-hero h1 {
  margin: 0;
  max-width: 880px;
  font-size: clamp(42px, 6.1vw, 82px);
  font-weight: var(--display-weight);
  line-height: 0.94;
  letter-spacing: -0.067em;
}
.section-head p {
  max-width: 640px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: -0.015em;
}

/* The first role is a single operating record, not a generic set of product cards. */
.scope-record-section {
  background: var(--surface);
}
.scope-record {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(320px, 0.84fr);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.scope-record-copy {
  padding: clamp(36px, 6vw, 78px);
  background: var(--surface);
}
.scope-record-copy h2 {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(42px, 5.25vw, 70px);
  font-weight: var(--display-weight);
  line-height: 0.93;
  letter-spacing: -0.067em;
}
.scope-record-copy > p {
  max-width: 53ch;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}
.scope-record-fields {
  display: grid;
  gap: 0;
  max-width: 600px;
  margin: 42px 0 28px;
  border-top: 1px solid var(--line);
}
.scope-record-fields div {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.scope-record-fields dt {
  color: var(--quiet);
  font: 9px/1.3 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.scope-record-fields dd {
  margin: 0;
  font-size: 15px;
  font-weight: 620;
  line-height: 1.35;
}
.scope-record-cta {
  margin-top: 2px;
}
.scope-record-boundary {
  display: flex;
  flex-direction: column;
  padding: clamp(36px, 5vw, 66px);
  background: var(--signal);
  color: var(--signal-ink);
}
.scope-record-boundary small {
  font: 9px/1.3 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.72;
}
.scope-record-boundary strong {
  display: block;
  margin-top: 44px;
  font-size: clamp(45px, 5.5vw, 76px);
  font-weight: 560;
  line-height: 0.9;
  letter-spacing: -0.075em;
}
.scope-record-boundary ul {
  display: grid;
  gap: 12px;
  margin: auto 0 0;
  padding: 38px 0 0;
  list-style: none;
}
.scope-record-boundary li {
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  font-size: 13px;
}

.work-story {
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.work-story-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(42px, 8vw, 126px);
  align-items: center;
}
.work-story-copy h2 {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(40px, 5.3vw, 72px);
  font-weight: var(--display-weight);
  line-height: 0.94;
  letter-spacing: -0.067em;
}
.work-story-copy h2 span {
  color: var(--ice);
}
.work-story-copy p {
  max-width: 45ch;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.58;
}
.work-story-copy .text-link {
  display: inline-flex;
  margin-top: 28px;
}
.work-story-flow {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
  list-style: none;
}
.work-story-step {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}
.work-story-number {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--line-strong);
  color: var(--quiet);
  font: 700 9px/1 var(--mono);
  letter-spacing: 0.08em;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}
.work-story-step small {
  display: block;
  margin-bottom: 7px;
  color: var(--quiet);
  font: 700 9px/1.3 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 180ms ease;
}
.work-story-step strong {
  display: block;
  max-width: 35ch;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 590;
  line-height: 1.17;
  letter-spacing: -0.04em;
}
.work-story-step:hover {
  background: color-mix(in srgb, var(--signal) 10%, transparent);
  border-bottom-color: color-mix(in srgb, var(--signal) 48%, var(--line));
  box-shadow: inset 3px 0 0 var(--signal);
}
.work-story-step:hover .work-story-number {
  border-color: var(--signal);
  background: var(--signal);
  color: var(--signal-ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 16%, transparent);
}
.work-story-step:hover small {
  color: var(--signal);
}
html[data-theme="light"] .work-story-copy h2 span {
  color: var(--copper);
}
/* Reading rows are not selectable controls. On a touch device they briefly
   acknowledge a tap, then return to their document-like resting state. */
@media (hover: none), (pointer: coarse) {
  .work-story-step,
  .evidence-metric,
  .operating-model-card {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
  }
  .work-story-step[data-touch-feedback="true"] {
    background: color-mix(in srgb, var(--ice) 9%, transparent);
    border-bottom-color: color-mix(in srgb, var(--ice) 42%, var(--line));
    box-shadow: inset 2px 0 0 var(--ice);
  }
  .work-story-step[data-touch-feedback="true"] .work-story-number {
    border-color: var(--ice);
    background: color-mix(in srgb, var(--ice) 16%, var(--surface));
    color: var(--text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ice) 12%, transparent);
  }
  .work-story-step[data-touch-feedback="true"] small {
    color: var(--ice);
  }
  html[data-theme="light"] .work-story-step[data-touch-feedback="true"] {
    background: color-mix(in srgb, var(--copper) 8%, transparent);
    border-bottom-color: color-mix(in srgb, var(--copper) 40%, var(--line));
    box-shadow: inset 2px 0 0 var(--copper);
  }
  html[data-theme="light"] .work-story-step[data-touch-feedback="true"] .work-story-number {
    border-color: var(--copper);
    background: color-mix(in srgb, var(--copper) 12%, var(--surface));
  }
  html[data-theme="light"] .work-story-step[data-touch-feedback="true"] small {
    color: var(--copper);
  }
}
/* A compact evidence ledger: market context is shown as a measured signal, not as a generic SaaS counter block. */
.evidence-ledger {
  position: relative;
  overflow: hidden;
  padding-block: clamp(86px, 10vw, 144px);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.evidence-ledger::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(20px, calc((100% - var(--max)) / 2));
  width: clamp(52px, 8vw, 112px);
  height: 2px;
  background: var(--signal);
}
.evidence-ledger-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(250px, 0.85fr);
  gap: clamp(30px, 8vw, 120px);
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.evidence-ledger-head h2 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(42px, 5.8vw, 78px);
  font-weight: var(--display-weight);
  line-height: 0.93;
  letter-spacing: -0.067em;
}
.evidence-ledger-head h2 span {
  color: var(--ice);
}
.evidence-ledger-head p {
  max-width: 39ch;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}
.evidence-ledger-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.evidence-metric {
  position: relative;
  display: grid;
  align-content: start;
  gap: 28px;
  min-height: 286px;
  padding: 24px clamp(20px, 2.6vw, 34px) 30px;
}
.evidence-metric > * {
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}
.evidence-metric.is-evidence-refreshing > * {
  opacity: 0.42;
  transform: translateY(3px);
}
.evidence-metric + .evidence-metric {
  border-left: 1px solid var(--line);
}
.evidence-metric::after {
  content: "";
  position: absolute;
  right: clamp(20px, 2.6vw, 34px);
  bottom: 0;
  left: clamp(20px, 2.6vw, 34px);
  height: 2px;
  background: var(--line-strong);
  opacity: 1;
  transition: background-color 160ms ease;
}
@media (hover: hover) {
  .evidence-metric:hover::after {
    background: var(--signal);
  }
}
@media (hover: none), (pointer: coarse) {
  .evidence-metric[data-touch-feedback="true"]::after {
    background: var(--ice);
  }
  html[data-theme="light"] .evidence-metric[data-touch-feedback="true"]::after {
    background: var(--copper);
  }
}
.evidence-metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--quiet);
  font: 700 9px/1.3 var(--mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.evidence-metric-top a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
}
.evidence-metric-top a:hover,
.evidence-metric-top a:focus-visible {
  color: var(--ice);
  text-decoration-color: currentColor;
}
.evidence-value {
  display: block;
  color: var(--text);
  font-size: clamp(68px, 9vw, 122px);
  font-weight: 610;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 0.78;
  letter-spacing: -0.095em;
}
.evidence-metric p {
  max-width: 31ch;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.evidence-ledger-note {
  display: grid;
  grid-template-columns: minmax(140px, 0.45fr) minmax(260px, 1fr) auto;
  gap: 24px;
  align-items: start;
  padding: 22px 0 0;
}
.evidence-ledger-note > span {
  padding-top: 4px;
  color: var(--signal);
  font: 700 9px/1.3 var(--mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.evidence-ledger-note p {
  max-width: 62ch;
  margin: 0;
  color: var(--quiet);
  font-size: 13px;
  line-height: 1.5;
}
.evidence-ledger-note .text-link {
  white-space: nowrap;
}
html[data-theme="light"] .evidence-ledger-head h2 span {
  color: var(--copper);
}
html[data-theme="light"] .evidence-metric-top a:hover,
html[data-theme="light"] .evidence-metric-top a:focus-visible {
  color: var(--copper);
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding-block: 34px 42px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.benefit-card {
  min-height: 0;
  padding: 4px 0;
}
.benefit-card + .benefit-card {
  padding-left: clamp(24px, 4vw, 56px);
  border-left: 1px solid var(--line);
}
.benefit-card h3 {
  margin: 0 0 16px;
  font-size: 32px;
  font-weight: 520;
  line-height: 1.04;
  letter-spacing: -0.055em;
}
.benefit-card p {
  max-width: 340px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.benefit-card .text-link {
  display: inline-block;
  margin-top: 28px;
}

.text-link {
  color: var(--text);
  font-size: 13px;
  font-weight: 680;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 5px;
}
.text-link:hover,
.text-link:focus-visible {
  text-decoration-color: var(--ice);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.metric-item {
  min-height: 170px;
  padding: 26px;
  border-right: 1px solid var(--line);
  background: var(--surface);
}
.metric-item:last-child {
  border-right: 0;
}
.metric-item small {
  display: block;
  color: var(--quiet);
  font: 9px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.metric-item strong {
  display: block;
  margin-top: 46px;
  font-size: 25px;
  font-weight: 540;
  line-height: 1.05;
  letter-spacing: -0.045em;
}
.metric-item span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

.decision-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.decision-card {
  min-height: 250px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.decision-card small {
  color: var(--signal);
  font: 9px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.decision-card h3 {
  margin: 54px 0 12px;
  font-size: 27px;
  font-weight: 540;
  letter-spacing: -0.045em;
}
.decision-card p {
  margin: 0;
  color: var(--muted);
}

.notice-panel {
  padding: 22px 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
}
.notice-panel strong {
  color: var(--text);
}
.notice-panel.signal {
  position: relative;
  padding-top: 34px;
}
.notice-panel.signal::before,
.role-search-gate::before,
.pricing-hero-note::before {
  position: absolute;
  top: 17px;
  left: 22px;
  width: 24px;
  height: 1px;
  content: "";
  background: var(--signal);
}

.status-list {
  display: grid;
  border-top: 1px solid var(--line);
}
.status-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.status-row > span:first-child {
  color: var(--signal);
  font: 9px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.status-row strong {
  font-size: 18px;
  font-weight: 550;
}
.status-row em {
  color: var(--quiet);
  font: normal 9px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* A Passport boundary is a technical record, not a generic warning card. */
.passport-boundary-record {
  position: relative;
  display: grid;
  gap: 17px;
  max-width: 52rem;
  padding: clamp(26px, 4vw, 42px);
  border: 1px solid var(--line);
  border-radius: 0;
  background:
    linear-gradient(var(--signal), var(--signal)) 0 0 / 30px 1px no-repeat,
    linear-gradient(var(--signal), var(--signal)) 0 0 / 1px 30px no-repeat,
    linear-gradient(var(--signal), var(--signal)) 100% 0 / 30px 1px no-repeat,
    linear-gradient(var(--signal), var(--signal)) 100% 0 / 1px 30px no-repeat,
    linear-gradient(var(--signal), var(--signal)) 0 100% / 30px 1px no-repeat,
    linear-gradient(var(--signal), var(--signal)) 0 100% / 1px 30px no-repeat,
    linear-gradient(var(--signal), var(--signal)) 100% 100% / 30px 1px no-repeat,
    linear-gradient(var(--signal), var(--signal)) 100% 100% / 1px 30px no-repeat,
    var(--surface);
}
.passport-boundary-record p {
  margin: 0;
}
.passport-boundary-code {
  color: var(--signal);
  font: 700 10px/1.35 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.passport-boundary-statement {
  max-width: 25ch;
  color: var(--text);
  font-size: clamp(22px, 2.2vw, 31px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.045em;
}
.passport-boundary-detail {
  max-width: 50ch;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  background: var(--surface);
}
.compare-table th,
.compare-table td {
  padding: 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.compare-table th {
  color: var(--quiet);
  font: 9px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.compare-table td {
  color: var(--muted);
}
.compare-table td:first-child {
  color: var(--text);
  font-weight: 560;
}

.video-reserve {
  min-height: 520px;
  display: grid;
  place-items: center;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: center;
}
.video-reserve-inner {
  max-width: 560px;
}
.video-reserve img {
  width: 112px;
  height: 112px;
  margin: 0 auto 28px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: #0b0f13;
}
.video-reserve h3 {
  margin: 0;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 520;
  letter-spacing: -0.06em;
}
.video-reserve p {
  margin: 18px auto 0;
  color: var(--muted);
}
.video-reserve small {
  display: block;
  margin-top: 24px;
  color: var(--quiet);
  font: 9px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
}
.role-card {
  position: relative;
  min-height: 280px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.role-card:nth-child(odd) {
  border-left: 1px solid var(--line);
}
.role-card h3 {
  margin: 12px 0 10px;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 520;
  line-height: 1;
  letter-spacing: -0.06em;
}
.role-card p {
  max-width: 430px;
  margin: 0;
  color: var(--muted);
}
.role-card footer {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 25px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--quiet);
  font-size: 12px;
  line-height: 1.3;
}
.role-card.featured {
  background: var(--ice);
  color: var(--ice-ink);
}
.role-card.featured p,
.role-card.featured footer {
  color: rgba(7, 19, 26, 0.66);
}
.role-card.featured footer {
  border-color: rgba(7, 19, 26, 0.18);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 120px);
  align-items: center;
}
.split-copy h2 {
  margin: 0;
  font-size: clamp(40px, 5.6vw, 72px);
  font-weight: var(--display-weight);
  line-height: 0.94;
  letter-spacing: -0.067em;
}
.split-copy h2 span {
  color: var(--ice);
}
.split-copy > p {
  max-width: 560px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}
.split-actions {
  margin-top: 30px;
}

.passport-card {
  overflow: hidden;
}
.passport-standard-card {
  position: relative;
  border: 1px solid rgba(7, 19, 26, 0.42);
  border-radius: 0;
  background: var(--ice);
  color: var(--ice-ink);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.16);
}
.passport-standard-head {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  min-height: 70px;
  align-items: center;
  border-bottom: 1px solid rgba(7, 19, 26, 0.28);
  background: #c4ced3;
}
.passport-access-level {
  align-self: stretch;
  display: grid;
  place-content: center;
  gap: 1px;
  min-width: 70px;
  border-right: 1px solid rgba(7, 19, 26, 0.34);
  color: #07131a;
  text-align: center;
}
.passport-access-level span {
  font: 700 7px/1 var(--mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.passport-access-level strong {
  font: 800 29px/0.88 var(--mono);
  letter-spacing: -0.1em;
}
.passport-access-a0 {
  background: #85939d;
}
.passport-access-a1 {
  background: var(--signal);
}
.passport-access-a2 {
  background: var(--copper);
}
.passport-access-a3 {
  background: var(--ice);
}
.passport-standard-label,
.passport-standard-state,
.passport-standard-reference span,
.passport-standard-facts span,
.passport-standard-compatibility span,
.passport-standard-history > span {
  font: 700 8px/1.35 var(--mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.passport-standard-label {
  padding-inline: 18px;
}
.passport-standard-state {
  padding: 0 18px;
  color: rgba(7, 19, 26, 0.62);
  text-align: right;
}
.passport-standard-reference {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 18px 20px 17px;
  border-bottom: 1px solid rgba(7, 19, 26, 0.28);
}
.passport-standard-reference > div {
  display: grid;
  gap: 6px;
}
.passport-standard-reference code {
  color: var(--ice-ink);
  font: 800 clamp(20px, 3vw, 30px) / 1 var(--mono);
  letter-spacing: -0.075em;
  overflow-wrap: anywhere;
}
.passport-standard-reference p {
  margin: 0;
  color: rgba(7, 19, 26, 0.66);
  font-size: 12px;
  line-height: 1.35;
  text-align: right;
}
.passport-standard-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid rgba(7, 19, 26, 0.28);
}
.passport-standard-facts section {
  min-width: 0;
  padding: 17px 18px 18px;
}
.passport-standard-facts section + section {
  border-left: 1px solid rgba(7, 19, 26, 0.28);
}
.passport-standard-facts strong {
  display: block;
  margin-top: 8px;
  color: var(--ice-ink);
  font-size: clamp(14px, 1.45vw, 18px);
  font-weight: 760;
  line-height: 1.12;
  letter-spacing: -0.04em;
}
.passport-standard-facts p {
  margin: 8px 0 0;
  color: rgba(7, 19, 26, 0.68);
  font-size: 10px;
  line-height: 1.38;
}
.passport-standard-compatibility,
.passport-standard-history {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(7, 19, 26, 0.28);
}
.passport-standard-compatibility strong,
.passport-standard-history strong {
  color: var(--ice-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.34;
}
.passport-standard-history {
  border-bottom: 0;
}
.passport-standard-note {
  margin: 0;
  padding: 0 20px 16px;
  color: rgba(7, 19, 26, 0.68);
  font-size: 9px;
  line-height: 1.42;
}

/* Passport evidence stays editorial and text-led: no decorative media scene. */
.passport-proof-copy .kicker {
  margin-bottom: 14px;
}
.passport-proof-copy h2.editorial-statement {
  max-width: 17ch;
}
.passport-proof-copy > p:not(.passport-proof-meta) {
  max-width: 34rem;
}
.passport-proof-meta {
  margin-top: 28px !important;
  color: var(--quiet) !important;
  font: 10px/1.55 var(--mono) !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.timeline {
  border-top: 1px solid var(--line);
}
.timeline-row {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.timeline-row > span {
  display: none;
}
.timeline-row h3 {
  margin: 0;
  font-size: 25px;
  font-weight: 520;
  letter-spacing: -0.04em;
}
.timeline-row p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
}

.continuity-flow {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  gap: 22px;
  align-items: stretch;
}
.continuity-divider {
  background: var(--line);
}
.continuity-step {
  min-height: 0;
  padding: 26px 0;
}
.continuity-step h3 {
  margin: 0 0 12px;
  font-size: 27px;
  font-weight: 520;
  letter-spacing: -0.045em;
}
.continuity-step p {
  margin: 0;
  color: var(--muted);
}

.memory-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(440px, 1.2fr);
  gap: clamp(40px, 7vw, 104px);
  align-items: center;
}
.memory-feature-intro {
  max-width: 510px;
  margin: 0 0 30px;
  color: var(--text);
  font-size: clamp(21px, 2.1vw, 30px);
  font-weight: 520;
  line-height: 1.12;
  letter-spacing: -0.045em;
}
.memory-evidence-list {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--line);
}
.memory-evidence-list > div {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 20px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.memory-evidence-list dt {
  color: var(--quiet);
  font: 9px/1.45 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.memory-evidence-list dd {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.memory-cinema {
  position: relative;
  min-height: 540px;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: #0b0f13;
}
.memory-cinema-grid {
  position: absolute;
  inset: 34% -24% -42%;
  z-index: -2;
  background-image:
    linear-gradient(rgba(143, 211, 255, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 211, 255, 0.11) 1px, transparent 1px);
  background-size: 42px 42px;
  transform: perspective(760px) rotateX(68deg) translateY(30px);
  transform-origin: bottom;
  opacity: 0.46;
}
.memory-cinema-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 68% 43%, rgba(143, 211, 255, 0.16), transparent 23%),
    radial-gradient(circle at 46% 50%, rgba(255, 255, 255, 0.07), transparent 30%);
  pointer-events: none;
}
.memory-projection {
  position: absolute;
  inset: 0;
}
.memory-core {
  position: absolute;
  top: 50%;
  left: 59%;
  display: grid;
  width: 130px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(143, 211, 255, 0.42);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 211, 255, 0.16), rgba(16, 21, 27, 0.94) 58%);
  box-shadow:
    0 0 0 18px rgba(143, 211, 255, 0.035),
    0 0 92px rgba(143, 211, 255, 0.14);
  transform: translate(-50%, -50%);
}
.memory-core::before,
.memory-core::after {
  content: "";
  position: absolute;
  inset: -25px;
  border: 1px solid rgba(143, 211, 255, 0.2);
  border-radius: 50%;
}
.memory-core::after {
  inset: -48px;
  border-color: rgba(255, 255, 255, 0.1);
}
.memory-core-halo {
  position: absolute;
  width: 190px;
  height: 56px;
  border: 1px solid rgba(143, 211, 255, 0.42);
  border-radius: 50%;
  transform: rotateX(68deg);
}
.atacsys-mark-memory {
  position: relative;
  width: 84px;
  height: 84px;
}
.memory-core-mark {
  width: 100%;
  height: 100%;
}
.memory-fragment {
  position: absolute;
  display: grid;
  gap: 7px;
  width: min(37%, 222px);
  padding: 16px 17px;
  border: 1px solid rgba(143, 211, 255, 0.22);
  border-radius: var(--radius-sm);
  background: rgba(16, 21, 27, 0.8);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
}
.memory-fragment span,
.memory-fragment small {
  color: #8fa0ad;
  font: 9px/1.25 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.memory-fragment strong {
  color: #f4f7f9;
  font-size: 16px;
  font-weight: 560;
  line-height: 1.06;
  letter-spacing: -0.035em;
}
.memory-fragment-process {
  top: 15%;
  left: 9%;
}
.memory-fragment-skill {
  top: 54%;
  left: 7%;
}
.memory-fragment-style {
  top: 12%;
  right: 8%;
}
.memory-fragment-state {
  right: 7%;
  bottom: 14%;
}
.memory-thread {
  position: absolute;
  z-index: -1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ice), rgba(143, 211, 255, 0.1));
  transform-origin: right center;
  opacity: 0.75;
}
.memory-thread-one {
  top: 31%;
  left: 29%;
  width: 35%;
  transform: rotate(18deg);
}
.memory-thread-two {
  top: 61%;
  left: 27%;
  width: 34%;
  transform: rotate(-14deg);
}
.memory-thread-three {
  top: 31%;
  left: 58%;
  width: 29%;
  transform: rotate(-14deg);
}
.memory-thread-four {
  top: 66%;
  left: 56%;
  width: 29%;
  transform: rotate(14deg);
}
.memory-cinema-caption {
  position: absolute;
  right: 22px;
  bottom: 18px;
  left: 22px;
  margin: 0;
  color: #8fa0ad;
  font: 9px/1.45 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.control-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.control-item {
  min-height: 0;
  padding: 28px 26px 30px 0;
  border-right: 1px solid var(--line);
  background: transparent;
}
.control-item + .control-item {
  padding-left: 26px;
}
.control-item:last-child {
  border-right: 0;
}
.control-item h3 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 560;
  letter-spacing: -0.035em;
}
.control-item p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.safeguards-head {
  max-width: 760px;
}
.safeguard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.safeguard-card {
  min-height: 266px;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.safeguard-icon {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: clamp(34px, 5vw, 58px);
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ice);
}
.safeguard-icon svg {
  width: 23px;
  height: 23px;
}
.safeguard-card h3 {
  max-width: 18ch;
  margin: 0 0 12px;
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 580;
  letter-spacing: -0.045em;
}
.safeguard-card p {
  max-width: 47ch;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.58;
}
.safeguards-note {
  max-width: 74ch;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 13px;
}
html[data-theme="light"] .safeguard-icon {
  color: var(--copper);
}

.trial-panel {
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.trial-copy {
  padding: clamp(36px, 6vw, 78px);
  background: var(--surface);
}
.trial-copy h2 {
  margin: 0;
  max-width: 700px;
  font-size: clamp(38px, 5.25vw, 68px);
  line-height: 0.95;
  letter-spacing: -0.067em;
  font-weight: var(--display-weight);
}
.trial-copy p {
  max-width: 600px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 17px;
}
.trial-copy .hero-actions {
  margin-top: 30px;
}
.trial-spec {
  padding: clamp(36px, 5vw, 66px);
  background: var(--signal);
  color: var(--signal-ink);
}
.trial-spec small {
  font: 9px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.72;
}
.trial-spec strong {
  display: block;
  margin-top: 44px;
  font-size: clamp(45px, 6vw, 78px);
  font-weight: 560;
  line-height: 0.9;
  letter-spacing: -0.075em;
}
.trial-spec ul {
  display: grid;
  gap: 12px;
  margin: 38px 0 0;
  padding: 0;
  list-style: none;
}
.trial-spec li {
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  font-size: 13px;
}

/* Homepage closing step: a decision document, not another scope-and-control panel. */
.decision-brief-section {
  background: var(--surface);
}
.decision-brief {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(34px, 6vw, 92px);
  padding: clamp(36px, 6vw, 76px) 0;
  border-top: 1px solid var(--line-strong);
}
.decision-brief-copy h2 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(40px, 5vw, 68px);
  font-weight: var(--display-weight);
  line-height: 0.94;
  letter-spacing: -0.067em;
}
.decision-brief-copy > p {
  max-width: 43ch;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}
.decision-brief-copy .hero-actions {
  margin-top: 28px;
}
.decision-brief-list {
  display: grid;
  align-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.decision-brief-list li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.decision-brief-list li > span {
  color: var(--signal);
  font: 700 10px/1.3 var(--mono);
  letter-spacing: 0.1em;
}
.decision-brief-list strong {
  display: block;
  margin: 0 0 7px;
  color: var(--text);
  font-size: clamp(18px, 1.65vw, 24px);
  font-weight: 620;
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.decision-brief-list p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.48;
}

.faq-list {
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-size: 21px;
  font-weight: 540;
  letter-spacing: -0.03em;
}
.faq-question span:last-child {
  color: var(--quiet);
  font: 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.faq-answer {
  max-width: 780px;
  display: none;
  padding: 0 0 26px;
  color: var(--muted);
}
.faq-item.is-open .faq-answer {
  display: block;
}

.page-hero {
  padding: clamp(86px, 11vw, 150px) 0 clamp(70px, 9vw, 120px);
  border-bottom: 1px solid var(--line);
}
.page-hero .kicker {
  margin-bottom: 28px;
}
.page-hero p {
  max-width: 720px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.55;
}
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 34px;
}
.page-actions-center {
  justify-content: center;
}
.page-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 50px;
}
.proof-chip {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--quiet);
  font: 9px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.section-display {
  margin: 0;
  font-size: clamp(40px, 5.6vw, 72px);
  font-weight: var(--display-weight);
  line-height: 0.94;
  letter-spacing: -0.067em;
}
.section-lead {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.58;
}
.split-form {
  grid-template-columns: 0.72fr 1.28fr;
  align-items: start;
}

.content-grid {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 64px;
}
.content-aside {
  position: sticky;
  top: calc(var(--header-height) + 28px);
  align-self: start;
}
.content-aside small {
  color: var(--quiet);
  font: 10px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.content-aside nav {
  display: grid;
  margin-top: 22px;
}
.content-aside a {
  padding: 10px 0;
  color: var(--muted);
  font-size: 13px;
}
.content-aside a:hover,
.content-aside a:focus-visible {
  color: var(--text);
}
.content-body section {
  scroll-margin-top: calc(var(--header-height) + 30px);
  padding: 0 0 72px;
  margin: 0 0 72px;
  border-bottom: 1px solid var(--line);
}
.content-body section:last-child {
  margin-bottom: 0;
}
.content-body h2 {
  margin: 0;
  font-size: clamp(32px, 4.1vw, 54px);
  font-weight: var(--display-weight);
  line-height: 1;
  letter-spacing: -0.057em;
}
.content-body h3 {
  margin: 36px 0 12px;
  font-size: 23px;
  font-weight: 560;
  letter-spacing: -0.035em;
}
.content-body p,
.content-body li {
  color: var(--muted);
  line-height: 1.65;
}
.content-body ul,
.content-body ol {
  padding-left: 20px;
}
/* Callouts carry policy copy, so they intentionally do not imitate a control or
   a status indicator with a decorative dash marker. */
.content-body .callout {
  position: relative;
  margin-top: 30px;
  padding: 22px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-sm);
}
.content-body .callout strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
}

.plain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.plain-card {
  min-height: 250px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.plain-card small {
  color: var(--signal);
  font: 9px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.plain-card h2,
.plain-card h3 {
  margin: 52px 0 12px;
  font-size: 27px;
  font-weight: 540;
  line-height: 1.04;
  letter-spacing: -0.045em;
}
.plain-card p {
  margin: 0;
  color: var(--muted);
}
.plain-card ul {
  margin: 18px 0 0;
  padding-left: 18px;
  color: var(--muted);
}
.plain-card li + li {
  margin-top: 8px;
}

.role-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.role-detail {
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.role-detail-grid > .role-detail:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.role-detail header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
}
.role-detail header small {
  color: var(--signal);
  font: 9px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.role-detail h2 {
  margin: 48px 0 14px;
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 520;
  line-height: 0.96;
  letter-spacing: -0.06em;
}
.role-detail > p {
  margin: 0;
  color: var(--muted);
}
.role-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.role-columns strong {
  display: block;
  margin-bottom: 10px;
  color: var(--quiet);
  font: 9px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.role-columns ul {
  margin: 0;
  padding-left: 17px;
  color: var(--muted);
  font-size: 13px;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.step-card {
  min-height: 300px;
  padding: 26px;
  border-right: 1px solid var(--line);
  background: var(--surface);
}
.step-card:last-child {
  border-right: 0;
}
.step-card h2,
.step-card h3 {
  margin: 56px 0 13px;
  font-size: 25px;
  font-weight: 540;
  letter-spacing: -0.045em;
}
.step-card p {
  margin: 0;
  color: var(--muted);
}

.data-list {
  display: grid;
  border-top: 1px solid var(--line);
}
.data-row {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: 36px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.data-row strong {
  font-size: 17px;
  font-weight: 560;
}
.data-row p {
  margin: 0;
  color: var(--muted);
}

/* Operation guide: one tangible proof image replaces a stack of divider-heavy rules. */
.operation-proof {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(280px, 0.64fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  margin-top: clamp(32px, 5vw, 64px);
}
.operation-proof-copy {
  display: grid;
  gap: 28px;
}
.operation-proof-intro {
  max-width: 37ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(18px, 1.8vw, 23px);
  font-weight: 520;
  line-height: 1.28;
  letter-spacing: -0.035em;
}
.operation-proof-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.operation-proof-rules li {
  position: relative;
  display: grid;
  gap: 6px;
  padding-left: 16px;
}
.operation-proof-rules li::before {
  content: "";
  position: absolute;
  top: 0.58em;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--signal);
}
.operation-proof-rules strong {
  font-size: 15px;
  font-weight: 620;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.operation-proof-rules span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.operation-proof-visual {
  width: min(100%, 430px);
  justify-self: end;
  margin: 0;
}
.operation-proof-image {
  width: 100%;
  height: auto;
}
.operation-proof-image-light {
  display: none;
}
html[data-theme="light"] .operation-proof-image-dark {
  display: none;
}
html[data-theme="light"] .operation-proof-image-light {
  display: block;
}

.legal-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 28px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--quiet);
  font: 9px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.legal-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
}

.empty-state {
  padding: clamp(38px, 7vw, 84px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: center;
}
.empty-state .atacsys-mark-empty {
  width: 86px;
  height: 86px;
  margin: 0 auto 26px;
}
.empty-state h1,
.empty-state h2 {
  margin: 0;
  font-size: clamp(40px, 6.55vw, 76px);
  font-weight: var(--display-weight);
  line-height: 0.94;
  letter-spacing: -0.067em;
}
.empty-state p {
  max-width: 620px;
  margin: 22px auto 0;
  color: var(--muted);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.price-card {
  min-height: 460px;
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.price-card.featured {
  border-color: var(--ice);
  box-shadow: inset 0 3px 0 var(--ice);
}
.price-card small {
  color: var(--signal);
  font: 9px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.price-card h2 {
  margin: 20px 0 0;
  font-size: 29px;
  font-weight: 560;
  letter-spacing: -0.05em;
}
.price {
  margin-top: 26px;
  font-size: 42px;
  font-weight: 520;
  letter-spacing: -0.065em;
}
.price span {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0;
}
.price-card p {
  min-height: 70px;
  color: var(--muted);
  font-size: 14px;
}
.price-card ul {
  display: grid;
  gap: 11px;
  margin: 22px 0 28px;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.price-card li {
  color: var(--muted);
  font-size: 13px;
}
.price-card .btn {
  margin-top: auto;
}
.pricing-note {
  margin-top: 22px;
  color: var(--quiet);
  font-size: 12px;
}

.role-request-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: clamp(28px, 5vw, 60px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.role-request-form[hidden] {
  display: none !important;
}
.outcome-guidance {
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.outcome-guidance > span {
  color: var(--quiet);
  font: 9px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.outcome-guidance > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.outcome-guidance button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--button-edge);
  border-radius: 3px;
  background: transparent;
  box-shadow: 0 3px 7px -5px rgba(0, 0, 0, 0.46);
  color: var(--text);
  cursor: pointer;
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.outcome-guidance button:hover,
.outcome-guidance button:focus-visible {
  border-color: var(--button-edge-hover);
  border-width: 1px;
  background: color-mix(in srgb, var(--ice) 12%, transparent);
  box-shadow: 0 4px 9px -4px rgba(0, 0, 0, 0.52);
  outline: none;
  transform: translateY(-1px);
}
html[data-theme="light"] .outcome-guidance button {
  box-shadow: 0 3px 6px -4px rgba(5, 8, 11, 0.28);
}
html[data-theme="light"] .outcome-guidance button:hover,
html[data-theme="light"] .outcome-guidance button:focus-visible {
  box-shadow: 0 4px 9px -4px rgba(5, 8, 11, 0.34);
}
.form-field {
  display: grid;
  gap: 8px;
}
.form-field.full {
  grid-column: 1 / -1;
}
.form-field label {
  color: var(--quiet);
  font: 9px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  outline: 0;
  background: var(--bg);
  color: var(--text);
}
.form-field textarea {
  min-height: 140px;
  resize: vertical;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--ice);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ice) 16%, transparent);
}
.form-note {
  grid-column: 1 / -1;
  color: var(--quiet);
  font-size: 12px;
}
.form-status {
  grid-column: 1 / -1;
  min-height: 24px;
  color: var(--signal);
  font-size: 13px;
}
.consent-row {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.consent-row input {
  width: 18px;
  min-height: 18px;
  margin: 2px 0 0;
  accent-color: var(--ice);
}
.consent-row span {
  display: block;
}
.website-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.website-field[hidden] {
  display: none !important;
}
.form-submit {
  grid-column: 1 / -1;
  justify-self: start;
}
.role-request-confirmation {
  display: grid;
  align-content: start;
  gap: 20px;
  padding: clamp(28px, 5vw, 60px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.role-request-confirmation[hidden] {
  display: none;
}
.role-request-confirmation h3 {
  margin: 0;
  font-size: clamp(30px, 3vw, 48px);
  font-weight: 520;
  line-height: 0.98;
  letter-spacing: -0.055em;
}
.role-request-confirmation p {
  max-width: 58ch;
  margin: 0;
  color: var(--muted);
}
.role-request-confirmation-steps {
  display: grid;
  gap: 0;
  margin: 4px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.role-request-confirmation-steps li {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 12px;
  align-items: start;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
.role-request-confirmation-steps li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.48em;
  border-radius: 50%;
  background: var(--signal);
}
.field-optional {
  color: var(--muted);
  font-size: 0.82em;
  font-weight: 500;
}
.role-match-results,
.role-customization,
.role-setup-brief {
  display: grid;
  grid-column: 1 / -1;
  align-content: start;
  gap: 20px;
  padding: clamp(28px, 5vw, 60px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.role-match-results[hidden],
.role-customization[hidden],
.role-setup-brief[hidden] {
  display: none;
}
.role-search-gate {
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: clamp(40px, 5vw, 52px) clamp(28px, 5vw, 52px) clamp(28px, 5vw, 52px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.role-search-gate[hidden] {
  display: none;
}
.role-search-gate .kicker {
  margin-bottom: 10px;
}
.role-search-gate h2 {
  max-width: 18ch;
  margin: 0 0 10px;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 520;
  line-height: 0.98;
  letter-spacing: -0.055em;
}
.role-search-gate p {
  max-width: 60ch;
  margin: 0;
  color: var(--muted);
}
.role-match-results h3,
.role-customization h3,
.role-setup-brief h3 {
  margin: 0;
  font-size: clamp(30px, 3vw, 48px);
  font-weight: 520;
  line-height: 0.98;
  letter-spacing: -0.055em;
}
.role-match-intro,
.role-customization > p {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
}
.role-match-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.role-match-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 18px;
  align-items: stretch;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 88%, var(--paper));
}
.role-match-card > div {
  display: grid;
  align-content: start;
  gap: 0;
}
.role-match-card h4 {
  margin: 0 0 7px;
  font-size: 21px;
  letter-spacing: -0.035em;
}
.role-match-card p {
  max-width: 60ch;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.role-match-card small {
  display: block;
  margin-bottom: 8px;
  color: var(--signal);
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.role-match-card .btn {
  width: 100%;
  margin-top: auto;
  white-space: normal;
}
.role-setup-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.role-setup-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.role-setup-list strong {
  color: var(--ink);
}

.site-footer {
  padding-top: clamp(90px, 12vw, 160px);
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.footer-cta-row {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: end;
  padding-bottom: clamp(74px, 10vw, 128px);
}
.footer-cta-row h2 {
  margin: 0;
  max-width: 830px;
  font-size: clamp(46px, 7vw, 96px);
  font-weight: var(--display-weight);
  line-height: 0.91;
  letter-spacing: -0.072em;
}
.footer-cta-row h2 span {
  color: var(--ice);
}
.footer-cta-copy p {
  margin: 0 0 24px;
  color: var(--muted);
}

/* In Light theme, moving editorial accents use Oxide Copper; Ice Blue remains an interface token. */
html[data-theme="light"] .hero h1 span,
html[data-theme="light"] .split-copy h2 span,
html[data-theme="light"] .footer-cta-row h2 span {
  color: var(--copper);
  text-decoration: none;
}
html[data-theme="light"] main h1 > span,
html[data-theme="light"] main h2 > span {
  color: var(--copper);
}
html[data-theme="light"] [data-ice-reveal] {
  color: var(--copper);
  -webkit-text-stroke: 0;
  paint-order: normal;
  text-shadow: none;
}
html[data-theme="light"] .passport-id {
  color: var(--muted);
}

.footer-grid {
  display: grid;
  /* The locked brand lockup is intentionally unbroken. Reserve its full
     width before the Start column so the two never overlap on wide screens. */
  grid-template-columns: minmax(300px, 1.45fr) repeat(7, minmax(88px, 1fr));
  gap: clamp(12px, 1vw, 18px);
  padding: 46px 0 56px;
  border-top: 1px solid var(--line);
}
.footer-brand .brand-lockup {
  margin-bottom: 18px;
}
.footer-brand p {
  max-width: 260px;
  color: var(--muted);
  font-size: 13px;
}
.footer-brand .footer-location {
  margin-top: 22px;
  color: var(--quiet);
  font: 9px/1.65 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer-column {
  min-width: 0;
}
.footer-column strong {
  display: block;
  margin-bottom: 16px;
  color: var(--quiet);
  font: 9px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer-column a {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 6px 0;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.footer-column a:hover,
.footer-column a:focus-visible {
  color: var(--text);
}
.footer-note {
  display: block;
  padding: 6px 0;
  color: var(--quiet);
  font-size: 12px;
  line-height: 1.45;
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
  border-top: 1px solid var(--line);
  color: var(--quiet);
  font: 9px var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.footer-bottom a:hover,
.footer-bottom a:focus-visible {
  color: var(--text);
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
  color: var(--quiet);
  font: 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.legal-meta span {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 4px;
}

@media (max-width: 1180px) {
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 20px;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .footer-brand p {
    max-width: 520px;
  }
}

@media (max-width: 1040px) {
  .menu-toggle {
    display: inline-grid;
  }
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-copy {
    min-height: 690px;
  }
  body[data-page="home"] .hero-copy {
    min-height: 0;
  }
  .motion-stage {
    min-height: 560px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .problem-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .problem-grid > div {
    border-bottom: 0;
  }
  .benefit-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .benefit-card {
    min-height: 0;
    padding: 28px 0;
  }
  .benefit-card + .benefit-card {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .evidence-ledger-head {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .evidence-ledger-grid {
    grid-template-columns: 1fr;
  }
  .evidence-metric {
    min-height: 0;
    padding-block: 24px 28px;
  }
  .evidence-metric + .evidence-metric {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .evidence-ledger-note {
    grid-template-columns: 1fr;
    gap: 11px;
  }
  .memory-feature {
    grid-template-columns: 1fr;
  }
  .memory-cinema {
    min-height: 500px;
  }
  .control-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .control-item {
    padding: 24px 20px;
    border-bottom: 1px solid var(--line);
  }
  .control-item:nth-child(2) {
    border-right: 0;
  }
  .safeguard-card {
    min-height: 250px;
  }
  .trial-panel {
    grid-template-columns: 1fr;
  }
  .decision-brief {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .metric-grid {
    grid-template-columns: 1fr;
  }
  .metric-item {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .metric-item:last-child {
    border-bottom: 0;
  }
  .plain-grid {
    grid-template-columns: 1fr 1fr;
  }
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .step-card {
    border-bottom: 1px solid var(--line);
  }
  .step-card:nth-child(2) {
    border-right: 0;
  }
  .role-match-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  :root {
    --header-height: 66px;
  }
  body[data-page="home"] {
    padding-bottom: 82px;
  }
  .container,
  .narrow {
    width: min(calc(100% - 28px), var(--max));
  }
  .header-inner {
    gap: 10px;
  }
  .header-brand-link {
    margin-left: 4px;
  }
  .site-header .atacsys-mark-bar {
    width: 48px;
    height: 48px;
  }
  .site-header .brand-lockup {
    gap: 11px;
  }
  .site-header .brand-name {
    font-size: 17px;
  }
  .brand-note {
    display: none;
  }
  .header-context {
    gap: 6px;
    font-size: 9px;
    letter-spacing: 0.1em;
  }
  .header-context::before {
    width: 10px;
  }
  .header-actions {
    gap: 6px;
  }
  .header-actions .btn {
    display: none;
  }
  .announcement-inner {
    min-height: 48px;
    justify-content: flex-start;
    padding-block: 9px;
    text-align: left;
  }
  .announcement-inner a {
    display: none;
  }
  .hero {
    min-height: 0;
  }
  /* Keep the proof record directly after the hero's operating conditions. */
  .hero-copy {
    min-height: 0;
    padding: 70px 20px 16px;
  }
  body[data-page="home"] .hero-copy {
    padding: 70px 20px 42px;
  }
  body[data-page="home"] .atacsys-mark-hero-signal {
    margin-block: -42px;
  }
  .hero h1 {
    font-size: clamp(48px, 14vw, 68px);
  }
  .hero-lead {
    font-size: 17px;
  }
  .hero-signal {
    gap: 20px;
    margin-top: 42px;
  }
  .atacsys-mark-hero-signal {
    width: 320px;
    height: 320px;
  }
  .hero-signal-line {
    font-size: clamp(15px, 4vw, 16px);
    letter-spacing: 0.055em;
  }
  .hero-actions .btn {
    width: 100%;
  }
  .hero-assurance {
    gap: 9px 14px;
    margin-top: 48px;
  }
  .hero-logo-ticker {
    padding-top: 17px;
  }
  .hero-logo-ticker-list {
    padding-right: 0;
  }
  .hero-logo-ticker-list li {
    gap: 12px;
    min-width: 222px;
    min-height: 38px;
    padding-right: 30px;
    font-size: 15px;
  }
  .hero-logo-ticker .integration-mark {
    width: 24px;
    height: 24px;
  }
  .hero-logo-ticker .integration-bitrix24-lockup,
  .hero-logo-ticker .integration-amocrm-lockup {
    height: 18px;
  }
  .hero-logo-ticker .integration-bitrix24-lockup {
    width: 86px;
  }
  .hero-logo-ticker .integration-amocrm-lockup {
    width: 92px;
  }
  html.motion-enabled .hero-logo-ticker-track {
    animation-duration: 44s;
  }
  .motion-stage {
    min-height: 0;
    padding-block: 24px;
  }
  .hero > .proof-stage {
    padding-top: 8px;
  }
  .motion-stage-inner {
    width: 76%;
    transform: none;
  }
  .motion-corner {
    display: none;
  }
  .role-brief-title {
    align-items: flex-start;
    gap: 12px;
  }
  .integration-marquee {
    padding: 22px 0 34px;
  }
  .integration-marquee-head {
    display: block;
    margin-top: 42px;
  }
  .integration-marquee-head span {
    display: block;
    max-width: 280px;
    margin: 7px auto 0;
    font-size: 10px;
    line-height: 1.35;
  }
  .integration-marquee-list li {
    min-width: 214px;
    padding: 15px 30px;
    font-size: 15px;
  }
  .integration-mark {
    width: 27px;
    height: 27px;
  }
  .integration-wordmark {
    width: 26px;
    height: 26px;
    font-size: 10px;
  }
  .integration-microsoft {
    width: 25px;
    height: 25px;
  }
  html.motion-enabled .integration-marquee-track {
    animation-duration: 45s;
  }
  .role-brief-title strong {
    font-size: clamp(25px, 8vw, 34px);
  }
  .role-brief-facts {
    grid-template-columns: 1fr;
  }
  .role-brief-facts div {
    min-height: 0;
  }
  .problem-grid {
    grid-template-columns: 1fr;
  }
  .problem-grid > div {
    min-height: 112px;
    border-right: 0;
  }
  .section {
    padding-block: 82px;
  }
  .section-head {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .section-head h2,
  .page-hero h1 {
    font-size: clamp(40px, 11.4vw, 60px);
  }
  .section-head p {
    font-size: 16px;
  }
  .scope-record {
    grid-template-columns: 1fr;
  }
  .work-story-layout {
    grid-template-columns: 1fr;
    gap: 46px;
  }
  .scope-record-copy {
    padding: 42px 28px;
  }
  .scope-record-copy h2 {
    font-size: clamp(40px, 11.4vw, 60px);
  }
  .scope-record-fields {
    margin-top: 32px;
  }
  .scope-record-fields div {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
  }
  .scope-record-boundary {
    min-height: 360px;
    padding: 38px 28px;
  }
  .scope-record-boundary strong {
    margin-top: 34px;
  }
  .work-story {
    padding-bottom: 104px;
  }
  .work-story-layout {
    gap: 36px;
  }
  .work-story-copy h2 {
    font-size: clamp(40px, 11.4vw, 60px);
  }
  .work-story-copy p {
    font-size: 16px;
  }
  .work-story-step {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 14px;
    padding: 20px 0;
  }
  .work-story-number {
    width: 29px;
    height: 29px;
  }
  .work-story-step strong {
    font-size: 18px;
  }
  .evidence-ledger {
    padding-block: 82px;
  }
  .evidence-ledger-head h2 {
    font-size: clamp(40px, 11.4vw, 60px);
  }
  .evidence-ledger-head p {
    font-size: 16px;
  }
  .evidence-metric {
    gap: 22px;
    padding-inline: 0;
  }
  .evidence-metric::after {
    right: 0;
    left: 0;
  }
  .evidence-value {
    font-size: clamp(68px, 22vw, 94px);
  }
  .evidence-metric p {
    max-width: 38ch;
    font-size: 15px;
  }
  .evidence-ledger-note {
    padding-top: 20px;
  }
  .decision-brief {
    padding: 42px 0;
  }
  .decision-brief-copy h2 {
    font-size: clamp(40px, 11.4vw, 60px);
  }
  .role-grid {
    grid-template-columns: 1fr;
  }
  .role-card {
    border-left: 1px solid var(--line);
  }
  .split {
    grid-template-columns: 1fr;
  }
  .split-form {
    grid-template-columns: 1fr;
  }
  .split > :first-child {
    order: 2;
  }
  .split-form > :first-child,
  .split-request-details > :first-child {
    order: initial;
  }
  .timeline-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .continuity-flow {
    grid-template-columns: 1fr;
  }
  .continuity-divider {
    width: 100%;
    height: 1px;
  }
  .continuity-step {
    min-height: 200px;
  }
  .continuity-step h3 {
    margin-top: 34px;
  }
  .memory-evidence-list > div {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .memory-cinema {
    min-height: 480px;
  }
  .memory-core {
    left: 57%;
    width: 108px;
  }
  .atacsys-mark-memory {
    width: 72px;
    height: 72px;
  }
  .memory-fragment {
    width: min(46%, 178px);
    padding: 13px;
  }
  .memory-fragment strong {
    font-size: 14px;
  }
  .memory-fragment-process {
    top: 13%;
    left: 5%;
  }
  .memory-fragment-skill {
    top: 54%;
    left: 4%;
  }
  .memory-fragment-style {
    top: 13%;
    right: 4%;
  }
  .memory-fragment-state {
    right: 4%;
    bottom: 15%;
  }
  .memory-cinema-caption {
    right: 16px;
    bottom: 14px;
    left: 16px;
    font-size: 8px;
  }
  .control-grid {
    grid-template-columns: 1fr;
  }
  .control-item {
    padding: 24px 0;
    border-right: 0;
  }
  .safeguard-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .safeguard-card {
    min-height: 0;
    padding: 30px 26px;
  }
  .safeguard-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 30px;
  }
  .safeguards-note {
    margin-top: 18px;
  }
  .trial-panel {
    border-radius: var(--radius-md);
  }
  .page-hero {
    padding-top: 78px;
  }
  .content-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }
  .content-aside {
    position: static;
  }
  .content-aside nav {
    grid-template-columns: repeat(2, 1fr);
  }
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .plain-grid,
  .role-detail-grid,
  .steps-grid {
    grid-template-columns: 1fr;
  }
  .role-detail-grid > .role-detail:last-child:nth-child(odd) {
    grid-column: auto;
  }
  .step-card {
    border-right: 0;
  }
  .role-columns,
  .data-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .operation-proof {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  /* The source illustration has deliberate clear space above its title. Pull
     its frame up slightly on a phone so that clear space does not read as an
     accidental gap after the last human-handoff rule. */
  .operation-proof-visual {
    width: min(100%, 430px);
    justify-self: center;
    margin-top: -38px;
  }
  .decision-grid {
    grid-template-columns: 1fr;
  }
  .status-row {
    grid-template-columns: 78px 1fr;
  }
  .status-row em {
    grid-column: 2;
  }
  .passport-boundary-record {
    gap: 15px;
    padding: 28px 24px;
  }
  .passport-boundary-statement {
    font-size: clamp(21px, 6.4vw, 27px);
  }
  .passport-boundary-detail {
    font-size: 16px;
  }
  .compare-table {
    display: block;
    overflow-x: auto;
  }
  .role-request-form {
    grid-template-columns: 1fr;
    padding: 24px;
  }
  .role-match-cards {
    grid-template-columns: 1fr;
  }
  .role-match-card {
    padding: 20px;
  }
  .role-search-gate {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .form-field.full,
  .form-note,
  .form-status,
  .form-submit {
    grid-column: 1;
  }
  .footer-cta-row {
    grid-template-columns: 1fr;
  }
  .footer-cta-row h2 {
    font-size: clamp(46px, 13vw, 70px);
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding-block: 20px;
  }
  .no-js-nav,
  .no-js-footer {
    padding-inline: 20px;
  }
}

@media (max-width: 360px) {
  .header-inner {
    gap: 5px;
  }
  .site-header .brand-lockup {
    gap: 8px;
  }
  .site-header .brand-name {
    font-size: 16px;
  }
  .header-context {
    gap: 4px;
    font-size: 8px;
    letter-spacing: 0.08em;
  }
  .header-context::before {
    width: 0;
  }
  .header-actions {
    gap: 4px;
  }
  .hero-signal-line {
    font-size: 14px;
    letter-spacing: 0.035em;
  }
  .hero-signal-cell {
    width: 1.12ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .menu-toggle {
    transition: none;
  }
  .theme-toggle:hover,
  .menu-toggle:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .site-loader {
    display: none;
  }
  .memory-projection {
    transform: none;
    transition: none;
  }
}

/* Generoy CRM public product page — a bounded ATACSYS workspace, not a self-serve app. */
.generoy-hero {
  padding: clamp(76px, 9vw, 132px) 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.generoy-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.95fr);
  gap: clamp(46px, 8vw, 124px);
  align-items: center;
}
.generoy-hero-grid--copy-only {
  grid-template-columns: minmax(0, 720px);
  gap: 0;
}
.generoy-hero h1 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(54px, 7vw, 102px);
  font-weight: 510;
  line-height: 0.91;
  letter-spacing: -0.075em;
}
.generoy-hero h1 span,
.generoy-task-section .split-copy h2 span {
  color: var(--ice);
}
.generoy-hero-copy > p {
  max-width: 610px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.65vw, 21px);
  line-height: 1.55;
  letter-spacing: -0.018em;
}
.generoy-hero .generoy-hero-request {
  background: var(--signal);
  color: var(--signal-ink);
}
.generoy-hero .generoy-hero-request:hover,
.generoy-hero .generoy-hero-request:focus-visible {
  background: var(--signal-hover);
}
.generoy-hero-assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: clamp(42px, 6vw, 72px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.generoy-hero-assurance span {
  color: var(--quiet);
  font: 700 9px/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.generoy-reference {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 70%, var(--bg));
}
.generoy-reference-grid {
  display: grid;
  grid-template-columns: minmax(250px, 0.43fr) minmax(0, 1fr);
  gap: clamp(34px, 6vw, 90px);
  align-items: center;
}
.generoy-reference-copy h2 {
  max-width: 520px;
  margin: 16px 0 0;
  font-size: clamp(39px, 4.8vw, 68px);
  font-weight: 540;
  line-height: 0.94;
  letter-spacing: -0.07em;
}
.generoy-reference-copy h2 span {
  color: var(--ice);
}
.generoy-reference-copy > p {
  max-width: 430px;
  margin: 23px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}
.generoy-reference-copy .generoy-reference-note,
.generoy-connections .generoy-boundary {
  position: relative;
  padding: 26px 0 0;
  border: 0;
  font-size: 13px;
}
.generoy-reference-copy .generoy-reference-note::before,
.generoy-connections .generoy-boundary::before,
.editorial-boundary-note::before {
  position: absolute;
  top: 9px;
  left: 0;
  width: 29px;
  height: 5px;
  content: "";
  background:
    linear-gradient(var(--signal), var(--signal)) 0 2px / 10px 1px no-repeat,
    linear-gradient(var(--signal), var(--signal)) 14px 2px / 5px 1px no-repeat,
    linear-gradient(var(--signal), var(--signal)) 23px 2px / 6px 1px no-repeat;
}
.generoy-reference-note strong {
  color: var(--text);
}
.generoy-reference-screen {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: #edf1f3;
  box-shadow: 0 22px 52px rgba(9, 14, 18, 0.14);
}
.generoy-reference-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 42px;
  padding: 0 16px;
  border-bottom: 1px solid #c7d0d4;
  background: #f4f6f7;
  color: #53636e;
  font: 700 8px/1.2 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.generoy-reference-meta span:last-child {
  color: #8a6514;
}
.generoy-reference-screen img {
  display: block;
  width: 100%;
  height: auto;
  background: #edf1f3;
}
.generoy-reference-screen figcaption {
  padding: 11px 16px 12px;
  border-top: 1px solid #c7d0d4;
  background: #edf1f3;
  color: #53636e;
  font: 8px/1.45 var(--mono);
  letter-spacing: 0.035em;
}
.generoy-purpose .section-head {
  margin-bottom: clamp(42px, 6vw, 70px);
}
.generoy-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.generoy-capability-grid article {
  min-height: 232px;
  padding: 26px 28px 30px 0;
  border-bottom: 1px solid var(--line);
}
.generoy-capability-grid article:nth-child(3n + 2),
.generoy-capability-grid article:nth-child(3n + 3) {
  padding-left: 28px;
  border-left: 1px solid var(--line);
}
.generoy-capability-grid small {
  color: var(--signal);
  font: 700 9px/1.4 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.generoy-capability-grid h3 {
  max-width: 280px;
  margin: 38px 0 10px;
  font-size: clamp(25px, 2.6vw, 34px);
  font-weight: 550;
  line-height: 1.03;
  letter-spacing: -0.055em;
}
.generoy-capability-grid p {
  max-width: 315px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.53;
}
.generoy-connections-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(380px, 0.85fr);
  gap: clamp(48px, 9vw, 134px);
  align-items: center;
}
.generoy-connections h2 {
  max-width: 580px;
  margin: 16px 0 0;
  font-size: clamp(42px, 5.4vw, 70px);
  font-weight: 510;
  line-height: 0.94;
  letter-spacing: -0.07em;
}
.generoy-connections h2 span {
  color: var(--copper);
}
.generoy-connections p {
  max-width: 580px;
  margin: 23px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}
.generoy-connections .generoy-boundary {
  color: var(--muted);
  font-size: 14px;
}
.generoy-boundary strong {
  color: var(--text);
}
.generoy-integration-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.generoy-integration-list > span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 56px;
  padding: 14px;
  background: var(--surface-2);
  color: var(--integration-tone);
  font-size: 12px;
  font-weight: 720;
  letter-spacing: 0.015em;
}
.generoy-integration-list .integration-mark {
  width: 18px;
  height: 18px;
}
.generoy-integration-list .integration-wordmark {
  width: 18px;
  height: 18px;
  font-size: 8px;
}
.generoy-integration-list .integration-microsoft {
  width: 18px;
  height: 18px;
}
.generoy-integration-list .integration-bitrix24-lockup {
  width: 86px;
  height: 18px;
}
.generoy-integration-list .integration-amocrm-lockup {
  width: 92px;
  height: 18px;
}
.generoy-view-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.generoy-view {
  position: relative;
  min-height: 340px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.generoy-view::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  border: 1px solid var(--line);
  transform: rotate(-20deg);
  pointer-events: none;
}
.generoy-view--client::before {
  top: -58px;
  right: -28px;
}
.generoy-view--decision::before {
  right: -48px;
  bottom: -65px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  transform: none;
}
.generoy-view--guide::before {
  top: 84px;
  left: -75px;
  width: 210px;
  height: 84px;
  border-radius: 50%;
  transform: rotate(-22deg);
}
.generoy-view header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--quiet);
  font: 700 8px/1.3 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.generoy-view header small {
  color: var(--signal);
  font: inherit;
}
.generoy-view h3 {
  position: relative;
  z-index: 1;
  max-width: 290px;
  margin: 92px 0 13px;
  font-size: clamp(29px, 3.4vw, 42px);
  font-weight: 540;
  line-height: 0.98;
  letter-spacing: -0.065em;
}
.generoy-view p {
  position: relative;
  z-index: 1;
  max-width: 290px;
  margin: 0;
  color: var(--muted);
  line-height: 1.52;
}
.generoy-view footer {
  position: absolute;
  right: 24px;
  bottom: 22px;
  left: 24px;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--quiet);
  font: 700 8px/1.35 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.generoy-view footer b {
  color: var(--text);
  font-weight: 700;
  text-align: right;
}
.generoy-task-list {
  display: grid;
  border-top: 1px solid var(--line);
}
.generoy-task-list > div {
  display: grid;
  grid-template-columns: minmax(142px, 0.8fr) 1.3fr;
  gap: 24px;
  padding: 21px 0;
  border-bottom: 1px solid var(--line);
}
.generoy-task-list strong {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.025em;
}
.generoy-task-list span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
html[data-theme="light"] .generoy-hero h1 span,
html[data-theme="light"] .generoy-task-section .split-copy h2 span {
  color: var(--copper);
}
html[data-theme="light"] .generoy-reference-copy h2 span {
  color: var(--copper);
}

@media (max-width: 1040px) {
  .generoy-hero-grid,
  .generoy-connections-grid {
    grid-template-columns: 1fr;
  }
  .generoy-reference-grid {
    grid-template-columns: 1fr;
  }
  .generoy-render {
    max-width: 700px;
  }
  .generoy-view-grid {
    grid-template-columns: 1fr;
  }
  .generoy-view {
    min-height: 280px;
  }
  .generoy-view h3 {
    margin-top: 64px;
  }
}

@media (max-width: 760px) {
  .generoy-hero {
    padding: 72px 0 82px;
  }
  .generoy-hero-grid {
    gap: 42px;
  }
  .generoy-hero h1 {
    font-size: clamp(48px, 13vw, 68px);
  }
  .generoy-hero-copy > p {
    font-size: 17px;
  }
  .generoy-hero .hero-actions .btn {
    width: 100%;
  }
  .generoy-reference-copy h2 {
    font-size: clamp(39px, 11vw, 58px);
  }
  .generoy-reference-copy > p {
    font-size: 16px;
  }
  .generoy-reference-meta {
    min-height: 36px;
    padding: 0 10px;
    font-size: 6.5px;
    letter-spacing: 0.065em;
  }
  .generoy-reference-screen figcaption {
    padding: 9px 10px;
    font-size: 7px;
  }
  .generoy-capability-grid {
    grid-template-columns: 1fr;
  }
  .generoy-capability-grid article,
  .generoy-capability-grid article:nth-child(3n + 2),
  .generoy-capability-grid article:nth-child(3n + 3) {
    min-height: 0;
    padding: 24px 0;
    border-left: 0;
  }
  .generoy-capability-grid h3 {
    margin-top: 26px;
  }
  .generoy-connections h2 {
    font-size: clamp(40px, 11vw, 60px);
  }
  .generoy-connections p {
    font-size: 16px;
  }
  .generoy-integration-list {
    grid-template-columns: 1fr;
  }
  .generoy-integration-list > span {
    min-height: 52px;
  }
  .generoy-view {
    min-height: 285px;
    padding: 21px;
  }
  .generoy-view footer {
    right: 21px;
    bottom: 18px;
    left: 21px;
  }
  .generoy-task-list > div {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Pricing: scope-first proposals. Payment collection intentionally lives outside this page. */
.pricing-hero-grid,
.pricing-process-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: clamp(28px, 6vw, 100px);
  align-items: end;
}
/* Moving accents stay Ice Blue on dark and Oxide Copper on light. */
.pricing-hero h1 span,
.ice-text,
[data-ice-text] {
  color: var(--ice);
}

html[data-theme="light"] .pricing-hero h1 span,
html[data-theme="light"] .ice-text,
html[data-theme="light"] [data-ice-text] {
  color: var(--copper);
  -webkit-text-stroke: 0;
  paint-order: normal;
  text-shadow: none;
}
.pricing-hero-note {
  position: relative;
  padding: 40px 28px 26px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 74%, transparent);
}
.pricing-hero-note strong {
  display: block;
  max-width: 25ch;
  margin: 8px 0 14px;
  font-size: clamp(1.2rem, 1.7vw, 1.55rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
}
.pricing-hero-note p:last-child,
.pricing-section-head > p {
  margin-bottom: 0;
}
.section-head.editorial-section-head {
  margin-bottom: clamp(34px, 5vw, 54px);
}
.section-head h2.editorial-statement,
.split-copy h2.editorial-statement,
.editorial-boundary-note .editorial-statement {
  display: block;
  max-width: 27ch;
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1.2rem, 1.7vw, 1.55rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.035em;
}
.section-head .editorial-kicker {
  margin-bottom: 12px;
}
.section-head h2.editorial-statement + p {
  margin-top: 18px;
}
.split-copy h2.editorial-statement + p {
  margin-top: 20px;
}
.editorial-boundary-note {
  position: relative;
  align-self: center;
  max-width: 35rem;
  padding: 28px 0 12px;
  border: 0;
}
.editorial-boundary-note .kicker {
  margin-bottom: 14px;
}
.editorial-boundary-note .editorial-statement {
  max-width: 25ch;
}
.editorial-boundary-note > p:last-child {
  max-width: 40ch;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}
.pricing-path-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.pricing-path {
  position: relative;
  display: flex;
  grid-column: span 2;
  min-height: 390px;
  flex-direction: column;
  padding: 26px;
  border: 1px solid var(--line-strong);
  color: inherit;
  background: var(--panel);
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.pricing-path:nth-child(4) {
  grid-column: 2 / span 2;
}
.pricing-path:nth-child(5) {
  grid-column: 4 / span 2;
}
.pricing-path:hover,
.pricing-path:focus-visible {
  transform: translateY(-3px);
  border-color: var(--signal);
  box-shadow: inset 0 2px 0 var(--signal);
}
.pricing-path:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}
.pricing-path-icon {
  position: absolute;
  top: 24px;
  right: 24px;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: var(--signal);
  opacity: 0.92;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}
.pricing-path-icon::before,
.pricing-path-icon::after {
  position: absolute;
  width: 12px;
  height: 12px;
  content: "";
  opacity: 0.62;
}
.pricing-path-icon::before {
  top: 0;
  right: 0;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}
.pricing-path-icon::after {
  bottom: 0;
  left: 0;
  border-bottom: 1px solid currentColor;
  border-left: 1px solid currentColor;
}
.pricing-path-icon svg {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pricing-path:hover .pricing-path-icon,
.pricing-path:focus-visible .pricing-path-icon {
  color: var(--ice);
  transform: translate(2px, -2px);
}
html[data-theme="light"] .pricing-path:hover .pricing-path-icon,
html[data-theme="light"] .pricing-path:focus-visible .pricing-path-icon {
  color: var(--copper);
}
.pricing-path h3 {
  max-width: 13ch;
  margin: 12px 0;
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1;
  letter-spacing: -0.045em;
}
.pricing-path > p:not(.kicker) {
  max-width: 31ch;
  color: var(--muted);
}
.pricing-path .check-list {
  display: grid;
  gap: 9px;
  margin: 24px 0 26px;
  padding: 0;
  list-style: none;
}
.pricing-path .check-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.91rem;
  line-height: 1.42;
}
.pricing-path .check-list li::before {
  position: absolute;
  left: 0;
  content: "•";
  color: var(--ice);
}
.pricing-commercial-section {
  position: relative;
  overflow: clip;
}
.pricing-commercial-head {
  margin-bottom: clamp(32px, 4vw, 50px);
}
.pricing-commercial-head h2 span {
  color: var(--ice);
}
html[data-theme="light"] .pricing-commercial-head h2 span {
  color: var(--copper);
}
.commercial-scope-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}
.commercial-scope-flow li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  min-height: 220px;
  padding: 28px 24px 28px 0;
  border-bottom: 1px solid var(--line-strong);
}
.commercial-scope-flow li + li {
  padding-left: 24px;
  border-left: 1px solid var(--line-strong);
}
.commercial-scope-flow span {
  color: var(--signal);
  font: 700 0.7rem/1.35 var(--mono);
  letter-spacing: 0.1em;
}
.commercial-scope-flow h3 {
  max-width: 12ch;
  margin: 0 0 12px;
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.commercial-scope-flow p {
  max-width: 30ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.5;
}
.commercial-scope-note {
  display: grid;
  grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr) minmax(190px, 0.56fr);
  gap: 24px;
  align-items: start;
  padding: 22px 0 0;
}
.commercial-scope-note .kicker {
  margin: 3px 0 0;
}
.commercial-scope-note strong {
  max-width: 39ch;
  font-size: 1rem;
  line-height: 1.38;
  letter-spacing: -0.022em;
}
.commercial-scope-note p:last-child {
  max-width: 29ch;
  margin: 0;
  color: var(--quiet);
  font-size: 0.86rem;
  line-height: 1.45;
}
.pricing-operating-section {
  position: relative;
  overflow: clip;
}
.pricing-operating-section .section-head h2 span {
  color: var(--ice);
}
html[data-theme="light"] .pricing-operating-section .section-head h2 span {
  color: var(--copper);
}
.operating-model-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}
.operating-model-card {
  min-height: 352px;
  padding: 30px 26px 24px;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: var(--panel);
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease;
}
/* Comparison cards are reading material, not selected plans. The managed-role
   card deliberately keeps the same resting surface as the alternatives. */
@media (hover: none), (pointer: coarse) {
  .operating-model-card[data-touch-feedback="true"] {
    background: color-mix(in srgb, var(--panel) 82%, var(--ice) 18%);
    box-shadow: inset 0 2px 0 var(--ice);
  }
  html[data-theme="light"] .operating-model-card[data-touch-feedback="true"] {
    background: color-mix(in srgb, var(--panel) 88%, var(--ice) 12%);
    box-shadow: inset 0 2px 0 var(--copper);
  }
}
.operating-model-card .kicker {
  color: var(--signal);
}
.operating-model-card h3 {
  max-width: 13ch;
  margin: 12px 0 28px;
  font-size: clamp(1.35rem, 1.9vw, 1.85rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.operating-model-card dl {
  display: grid;
  gap: 16px;
  margin: 0;
}
.operating-model-card dl div {
  display: grid;
  gap: 4px;
}
.operating-model-card dt {
  color: var(--signal);
  font: 700 0.66rem/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.operating-model-card dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}
.operating-model-note {
  display: grid;
  grid-template-columns: minmax(130px, 0.3fr) minmax(0, 0.9fr) minmax(250px, 0.9fr);
  gap: 24px;
  align-items: start;
  padding: 23px 0 0;
}
.operating-model-note .kicker {
  margin: 3px 0 0;
}
.operating-model-note strong {
  max-width: 36ch;
  font-size: 1rem;
  line-height: 1.38;
  letter-spacing: -0.022em;
}
.operating-model-note p {
  max-width: 41ch;
  margin: 0;
  color: var(--quiet);
  font-size: 0.86rem;
  line-height: 1.48;
}
.operating-model-note .text-link {
  grid-column: 2 / -1;
  width: fit-content;
  margin-top: -8px;
}
.pricing-breakdown {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}
.pricing-breakdown article {
  min-height: 245px;
  padding: 80px 20px 22px;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.pricing-breakdown h3 {
  margin: 0 0 10px;
  font-size: 1.02rem;
  line-height: 1.18;
}
.pricing-breakdown p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}
.pricing-process-grid > div > .lead {
  max-width: 37rem;
}
.pricing-steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
}
.pricing-steps li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  padding: 21px 0;
  border-bottom: 1px solid var(--line-strong);
}
.pricing-steps span {
  color: var(--signal);
  font: 700 0.69rem/1.3 var(--mono);
  letter-spacing: 0.08em;
}
.pricing-steps h3 {
  margin: 0 0 5px;
  font-size: 1.05rem;
}
.pricing-steps p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.45;
}
.pricing-boundaries .plain-card {
  min-height: 238px;
}
.pricing-faq-section .section-head {
  margin-bottom: 28px;
}
.final-cta-section {
  background: var(--surface);
}
.pricing-plan-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.subscription-card {
  display: flex;
  min-height: 420px;
  flex-direction: column;
  padding: 25px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  transition: border-color 0.2s ease;
}
.subscription-card:hover,
.subscription-card:focus-within {
  border-color: var(--signal);
}
.subscription-card h3 {
  margin: 8px 0 18px;
  font-size: clamp(1.65rem, 2.2vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.05em;
}
.subscription-card h3 small {
  color: var(--muted);
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0;
}
.plan-annual {
  margin: -8px 0 14px;
  color: var(--signal);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
}
.subscription-intro {
  min-height: 74px;
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.46;
}
.subscription-card .check-list {
  display: grid;
  gap: 9px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}
.subscription-card .check-list li {
  position: relative;
  padding-left: 17px;
  font-size: 0.88rem;
  line-height: 1.4;
}
.subscription-card .check-list li::before {
  position: absolute;
  left: 0;
  content: "•";
  color: var(--ice);
}
.subscription-card .check-list strong {
  color: var(--signal);
}
.plan-note {
  margin: 0 0 22px;
  color: var(--quiet);
  font-size: 0.78rem;
  line-height: 1.45;
}
.subscription-card .btn {
  width: 100%;
  margin-top: auto;
}
/* Pricing cards keep their neutral surface; the Go control is the clear interactive target. */
.subscription-card [data-subscription-select] {
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}
.subscription-card .btn-secondary[data-subscription-select],
.subscription-card .btn-signal[data-subscription-select] {
  background: #f2b84b;
  border-color: var(--button-edge);
  box-shadow:
    inset 0 0 0 1px rgba(16, 21, 27, 0.3),
    0 3px 7px -3px rgba(0, 0, 0, 0.94),
    0 10px 22px -7px rgba(0, 0, 0, 0.88);
  color: #1d1403;
}
.subscription-card .btn-secondary[data-subscription-select]:hover,
.subscription-card .btn-secondary[data-subscription-select]:focus-visible {
  background: var(--copper);
  border-color: var(--button-edge-hover);
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(16, 21, 27, 0.2),
    0 4px 9px -3px rgba(0, 0, 0, 0.96),
    0 13px 26px -7px rgba(0, 0, 0, 0.92);
}
.subscription-card .btn-signal[data-subscription-select]:hover,
.subscription-card .btn-signal[data-subscription-select]:focus-visible {
  background: var(--copper);
  border-color: var(--button-edge-hover);
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(16, 21, 27, 0.2),
    0 4px 9px -3px rgba(0, 0, 0, 0.96),
    0 13px 26px -7px rgba(0, 0, 0, 0.92);
}
.pricing-disclaimer {
  max-width: 85ch;
  margin: 16px 0 0;
  color: var(--quiet);
  font-size: 0.78rem;
  line-height: 1.45;
}
.model-mode-list {
  border-top: 1px solid var(--line-strong);
}
.model-mode-list article {
  display: grid;
  grid-template-columns: 106px 1fr;
  gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line-strong);
  font-size: 0.9rem;
  line-height: 1.45;
}
.model-mode-list strong {
  color: var(--signal);
  font: 700 0.73rem/1.35 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.model-mode-list span {
  color: var(--muted);
}
.pricing-builder {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
}
.builder-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.builder-options fieldset {
  min-width: 0;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
}
.builder-options legend {
  padding: 0 7px;
  color: var(--signal);
  font: 700 0.69rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.builder-options label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 0.88rem;
  line-height: 1.35;
}
.builder-options label:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.builder-options input {
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: var(--signal);
}
.builder-options label span {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 8px;
}
.builder-options b {
  color: var(--muted);
  font-size: 0.82em;
  white-space: nowrap;
}
.builder-summary {
  padding: 25px;
  border-top: 3px solid var(--signal);
  /* Do not combine the dark-theme text token with a light surface: that made this panel appear blank. */
  background: var(--surface-2);
  color: var(--text);
}
html[data-theme="light"] .builder-summary {
  background: #10151b;
  color: #f4f7f9;
}
.builder-summary .kicker {
  color: var(--ice);
}
/* Ice Blue remains readable as the only light-theme blue text accent. */
html[data-theme="light"] .builder-summary .kicker {
  color: var(--ice);
  -webkit-text-stroke: 0.55px var(--ice-edge);
  paint-order: stroke fill;
  text-shadow: none;
}
.builder-summary > strong {
  display: block;
  margin: 6px 0 20px;
  font-size: 1.5rem;
  letter-spacing: -0.04em;
}
.builder-price {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid color-mix(in srgb, var(--ink-text) 22%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink-text) 22%, transparent);
}
.builder-price span {
  color: color-mix(in srgb, var(--ink-text) 70%, transparent);
  font-size: 0.82rem;
}
.builder-price b {
  font-size: 1.25rem;
  white-space: nowrap;
}
.builder-summary ul {
  display: grid;
  gap: 7px;
  margin: 17px 0;
  padding-left: 17px;
  color: color-mix(in srgb, var(--ink-text) 80%, transparent);
  font-size: 0.84rem;
  line-height: 1.42;
}
.builder-summary p {
  color: color-mix(in srgb, var(--ink-text) 72%, transparent);
  font-size: 0.86rem;
  line-height: 1.48;
}
.builder-payment-preview {
  margin: 18px 0;
  padding: 17px 0;
  border-top: 1px solid color-mix(in srgb, var(--ink-text) 22%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink-text) 22%, transparent);
}
.builder-payment-preview .kicker {
  margin: 0 0 6px;
  color: var(--ice);
}
.builder-payment-preview h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.2;
}
html[data-theme="light"] .builder-payment-preview h3 {
  color: #f4f7f9;
}
.builder-payment-options {
  display: grid;
  gap: 0;
  margin: 12px 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid color-mix(in srgb, var(--ink-text) 18%, transparent);
}
.builder-payment-options li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-text) 18%, transparent);
  color: color-mix(in srgb, var(--ink-text) 88%, transparent);
  font-size: 0.86rem;
}
.builder-payment-options b {
  color: color-mix(in srgb, var(--ink-text) 58%, transparent);
  font: 700 0.66rem/1.25 var(--mono);
  letter-spacing: 0.08em;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}
.builder-payment-preview > p:last-child {
  margin: 0;
}
.builder-summary .btn {
  width: 100%;
  margin-top: 6px;
}
.builder-summary small {
  display: block;
  margin-top: 12px;
  color: color-mix(in srgb, var(--ink-text) 58%, transparent);
  font-size: 0.73rem;
}

@media (max-width: 1080px) {
  .pricing-path-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pricing-path,
  .pricing-path:nth-child(4),
  .pricing-path:nth-child(5) {
    grid-column: auto;
  }
  .pricing-path:nth-child(5) {
    grid-column: 1 / -1;
  }
  .pricing-breakdown {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pricing-breakdown article {
    min-height: 215px;
  }
  .pricing-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pricing-builder {
    grid-template-columns: 1fr;
  }
  .commercial-scope-note {
    grid-template-columns: 1fr 1fr;
  }
  .commercial-scope-note .kicker {
    grid-column: 1 / -1;
  }
  .operating-model-note {
    grid-template-columns: 1fr 1fr;
  }
  .operating-model-note .kicker {
    grid-column: 1 / -1;
  }
}
@media (max-width: 860px) {
  .pricing-hero-grid,
  .pricing-process-grid {
    grid-template-columns: 1fr;
  }
  .pricing-hero-note {
    max-width: 620px;
  }
  .pricing-path-grid {
    grid-template-columns: 1fr;
  }
  .pricing-path:nth-child(5) {
    grid-column: auto;
  }
  .pricing-path {
    min-height: auto;
  }
  .commercial-scope-flow {
    grid-template-columns: 1fr;
  }
  .commercial-scope-flow li,
  .commercial-scope-flow li + li {
    min-height: 0;
    padding: 24px 0;
    border-left: 0;
  }
  .operating-model-grid {
    grid-template-columns: 1fr;
  }
  .operating-model-card {
    min-height: 0;
    padding: 26px 24px;
  }
  .operating-model-card h3 {
    max-width: 18ch;
    margin-bottom: 22px;
  }
}
@media (max-width: 640px) {
  .pricing-hero-note {
    padding: 38px 20px 22px;
  }
  .pricing-path {
    padding: 22px 20px;
  }
  .pricing-path-icon {
    top: 18px;
    right: 16px;
    width: 48px;
    height: 48px;
  }
  .editorial-boundary-note {
    padding-left: 20px;
  }
  .pricing-breakdown {
    grid-template-columns: 1fr;
  }
  .pricing-breakdown article {
    display: block;
    min-height: 0;
    padding: 26px 19px 19px;
  }
  .pricing-breakdown h3 {
    margin-bottom: 6px;
  }
  .pricing-plan-grid,
  .builder-options {
    grid-template-columns: 1fr;
  }
  .subscription-card {
    min-height: 0;
  }
  .subscription-intro {
    min-height: 0;
  }
  .pricing-commercial-section::before {
    right: 20px;
    width: 84px;
  }
  .commercial-scope-note {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding-top: 20px;
  }
  .commercial-scope-note .kicker {
    grid-column: auto;
  }
  .operating-model-note {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding-top: 20px;
  }
  .operating-model-note .kicker,
  .operating-model-note .text-link {
    grid-column: auto;
    margin-top: 0;
  }
  .model-mode-list article {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .builder-options fieldset,
  .builder-summary {
    padding: 20px;
  }
}

/* Final mobile stability layer: keep every public journey usable at phone width. */
@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }
  body {
    min-width: 0;
  }
  main,
  section,
  header,
  footer,
  .page-shell,
  .site-shell,
  .site-header,
  .site-footer {
    min-width: 0;
    max-width: 100%;
  }
  .page-shell,
  .site-shell {
    overflow-x: clip;
  }
  .pricing-plan-grid,
  .pricing-path-grid,
  .pricing-process-grid,
  .pricing-hero-grid,
  .builder-options,
  .generoy-feature-grid,
  .generoy-connection-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .subscription-card,
  .pricing-path,
  .pricing-hero-note,
  .builder-options fieldset,
  .builder-summary {
    min-width: 0;
  }
  .subscription-card button,
  .subscription-card a {
    min-height: 46px;
  }
  .site-header nav,
  .site-nav {
    min-width: 0;
  }
  .site-header a,
  .site-nav a {
    min-height: 44px;
  }
}

/* Proof System: a document trail, not a set of generic product cards. */
.proof-stage,
.proof-route,
.proof-passport {
  --proof-accent: var(--ice);
}

.proof-stage {
  min-height: 680px;
  isolation: isolate;
  background: var(--surface);
}
.proof-stage::before {
  width: min(80%, 560px);
  aspect-ratio: 1.1;
  border: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 34px 34px;
  clip-path: polygon(0 12%, 84% 0, 100% 84%, 16% 100%);
  opacity: 0.52;
  transform: rotate(-8deg);
}
.proof-stage::after {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 10%;
  width: 78%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--proof-accent), transparent);
  opacity: 0.42;
  transform: translateY(-50%);
}
.proof-stage .motion-stage-inner {
  width: min(76%, 560px);
}
.proof-brief {
  position: relative;
  padding: clamp(24px, 4vw, 42px);
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(var(--proof-accent), var(--proof-accent)) 0 0 / 32px 1px no-repeat,
    linear-gradient(var(--proof-accent), var(--proof-accent)) 0 0 / 1px 32px no-repeat,
    linear-gradient(var(--proof-accent), var(--proof-accent)) 100% 100% / 32px 1px no-repeat,
    linear-gradient(var(--proof-accent), var(--proof-accent)) 100% 100% / 1px 32px no-repeat,
    color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: none;
}
.proof-brief::before {
  content: "";
  position: absolute;
  inset: 16px;
  z-index: -1;
  border: 1px solid var(--line);
  pointer-events: none;
}
.proof-brief-top {
  padding-bottom: 16px;
  border-bottom-color: var(--line-strong);
}
.proof-brief-top b {
  color: var(--proof-accent);
}
.proof-brief-title {
  padding: clamp(30px, 4vw, 48px) 0 clamp(22px, 3vw, 32px);
}
.proof-brief-facts {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  border: 0;
  background: transparent;
}
.proof-brief-facts div {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(104px, 0.8fr) minmax(0, 1.2fr);
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
  background: transparent;
}
.proof-brief-facts div:last-child {
  border-bottom: 1px solid var(--line);
}
.proof-brief-facts dd {
  margin: 0;
}
.proof-brief-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 19px;
  color: var(--quiet);
  font: 9px/1.4 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.proof-brief-footer span::before {
  content: "•";
  margin-right: 8px;
  color: var(--proof-accent);
}

.proof-route {
  --proof-progress: 1;
  --proof-route-line: var(--ice);
  --proof-route-gap: clamp(14px, 2vw, 30px);
  --proof-route-half-gap: clamp(7px, 1vw, 15px);
  position: relative;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 46px 0 0;
  border: 0;
  background: transparent;
  list-style: none;
}
.proof-route::before {
  content: "";
  position: absolute;
  top: 21px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--line-strong);
  transform-origin: left center;
}
.proof-route::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 21px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--proof-route-line);
  transform: scaleX(var(--proof-progress));
  transform-origin: left center;
  transition: transform 760ms cubic-bezier(0.22, 0.74, 0.24, 1);
  will-change: transform;
}
.proof-route li {
  position: relative;
  z-index: 1;
  min-height: 220px;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 8px;
  padding: 0 var(--proof-route-half-gap);
  border: 0;
  background: transparent;
}
.proof-route li + li {
  border-left: 0;
}
.proof-route li:first-child {
  padding-left: 0;
}
.proof-route li:first-child .proof-route-stripes {
  left: 0;
  transform: none;
}
.proof-route-position {
  display: block;
  margin: 0;
  color: var(--quiet);
  font: 700 8px/1.2 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.proof-route-stripes {
  position: absolute;
  z-index: 1;
  top: -35px;
  /* Every band group starts from the same axis as its stage number, so the
     guide reads as consecutive measured segments instead of centre markers. */
  left: var(--proof-route-half-gap);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  transform: none;
  pointer-events: none;
}
.proof-route-stripes i {
  display: block;
  width: 3px;
  height: 20px;
  background: var(--ice);
  transform: skewX(-28deg);
}
.proof-route .proof-route-order {
  color: var(--proof-accent);
  margin-top: 1px;
}
.proof-route li > div {
  display: grid;
  gap: 11px;
}
.proof-route strong {
  max-width: 10ch;
  font-size: clamp(19px, 2.05vw, 27px);
}
.proof-route p {
  max-width: 21ch;
}
.proof-route em {
  color: var(--quiet);
  font: 9px/1.3 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.proof-passport {
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(var(--proof-accent), var(--proof-accent)) 0 0 / 34px 1px no-repeat,
    linear-gradient(var(--proof-accent), var(--proof-accent)) 0 0 / 1px 34px no-repeat,
    linear-gradient(var(--proof-accent), var(--proof-accent)) 100% 100% / 34px 1px no-repeat,
    linear-gradient(var(--proof-accent), var(--proof-accent)) 100% 100% / 1px 34px no-repeat,
    var(--panel);
  box-shadow: none;
}
.proof-passport::before {
  content: "";
  position: absolute;
  inset: 16px;
  z-index: 0;
  border: 1px solid var(--line);
  pointer-events: none;
}
.proof-passport > * {
  position: relative;
  z-index: 1;
}
.proof-passport .passport-top {
  padding: 25px 30px 17px;
  border-bottom-color: var(--line-strong);
}
.proof-passport .passport-status {
  border-radius: 0;
  background: transparent;
  color: var(--proof-accent) !important;
}
.proof-passport .passport-main {
  padding: 30px 30px 29px;
}
.passport-identity {
  display: grid;
  gap: 4px;
}
.proof-passport .passport-id {
  color: var(--proof-accent);
}
.proof-passport .passport-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 30px;
  border: 0;
  border-top: 1px solid var(--line-strong);
  background: transparent;
}
.proof-passport .passport-fact {
  display: grid;
  grid-template-columns: minmax(104px, 0.75fr) minmax(0, 1.25fr);
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.proof-passport .passport-fact strong {
  margin: 0;
}
.proof-passport .passport-stop strong {
  color: var(--proof-accent);
}
.passport-boundary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(104px, 0.75fr) minmax(0, 1.25fr);
  gap: 16px;
  align-items: baseline;
  margin-top: 20px;
  padding: 29px 0 0;
  border: 0;
}
.passport-boundary::before {
  position: absolute;
  top: 10px;
  left: 0;
  width: 29px;
  height: 5px;
  content: "";
  background:
    linear-gradient(var(--proof-accent), var(--proof-accent)) 0 2px / 10px 1px no-repeat,
    linear-gradient(var(--proof-accent), var(--proof-accent)) 14px 2px / 5px 1px no-repeat,
    linear-gradient(var(--proof-accent), var(--proof-accent)) 23px 2px / 6px 1px no-repeat;
}
.passport-boundary span {
  color: var(--quiet);
  font: 9px/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.passport-boundary strong {
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
}
.proof-passport .passport-bottom {
  margin-top: 25px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

html[data-theme="light"] .proof-stage,
html[data-theme="light"] .proof-route,
html[data-theme="light"] .proof-passport {
  --proof-accent: var(--copper);
}
html[data-theme="light"] .proof-stage {
  background: var(--surface);
}
html[data-theme="light"] .proof-brief {
  background-color: color-mix(in srgb, var(--surface) 94%, transparent);
}
html[data-theme="light"] .proof-passport .passport-id {
  color: var(--copper);
}

/* The home example uses the issued Passport standard, not the legacy dark detail card. */
.proof-passport.passport-standard-card {
  overflow: hidden;
  border: 1px solid rgba(7, 19, 26, 0.42);
  border-radius: 0;
  background: var(--ice);
  color: var(--ice-ink);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.16);
}
.proof-passport.passport-standard-card::before {
  display: none;
}
.proof-passport.passport-standard-card > * {
  position: static;
}
.proof-passport.passport-standard-card .passport-standard-label,
.proof-passport.passport-standard-card .passport-standard-state,
.proof-passport.passport-standard-card .passport-standard-reference span,
.proof-passport.passport-standard-card .passport-standard-facts span,
.proof-passport.passport-standard-card .passport-standard-compatibility span,
.proof-passport.passport-standard-card .passport-standard-history > span {
  color: rgba(7, 19, 26, 0.76);
}

@media (prefers-reduced-motion: no-preference) {
  html.motion-enabled .proof-stage::after {
    animation: none;
  }
  html.motion-enabled .proof-stage .proof-brief > *,
  html.motion-enabled .proof-route[data-proof-system] li,
  html.motion-enabled .proof-passport .passport-top,
  html.motion-enabled .proof-passport .passport-identity,
  html.motion-enabled .proof-passport .passport-fact,
  html.motion-enabled .proof-passport .passport-boundary,
  html.motion-enabled .proof-passport .passport-bottom {
    opacity: 0;
    transform: translate3d(-16px, 0, 0);
    transition:
      opacity 360ms ease-out,
      transform 480ms cubic-bezier(0.22, 0.8, 0.28, 1);
    will-change: opacity, transform;
  }
  html.motion-enabled .proof-stage.is-proof-visible .proof-brief > *,
  html.motion-enabled .proof-route.is-proof-visible li,
  html.motion-enabled .proof-passport.is-proof-visible .passport-top,
  html.motion-enabled .proof-passport.is-proof-visible .passport-identity,
  html.motion-enabled .proof-passport.is-proof-visible .passport-fact,
  html.motion-enabled .proof-passport.is-proof-visible .passport-boundary,
  html.motion-enabled .proof-passport.is-proof-visible .passport-bottom {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  html.motion-enabled .proof-stage.is-proof-visible::after {
    animation: proof-scan 760ms 220ms cubic-bezier(0.22, 0.8, 0.28, 1) both;
  }
  html.motion-enabled .proof-route {
    --proof-progress: 0;
  }
  html.motion-enabled .proof-route[data-proof-system] .proof-route-stripes i {
    opacity: 0;
    transform: skewX(-28deg) translateY(5px);
    filter: brightness(0.72);
    transition:
      opacity 280ms ease-out,
      transform 320ms cubic-bezier(0.22, 0.74, 0.24, 1),
      filter 280ms ease-out;
  }
  html.motion-enabled
    .proof-route[data-proof-system]
    li.is-proof-step-complete
    .proof-route-stripes
    i {
    opacity: 1;
    transform: skewX(-28deg) translateY(0);
    filter: brightness(1);
  }
  html.motion-enabled .proof-route[data-proof-system] .proof-route-stripes i:nth-child(2) {
    transition-delay: 140ms;
  }
  html.motion-enabled .proof-route[data-proof-system] .proof-route-stripes i:nth-child(3) {
    transition-delay: 280ms;
  }
  html.motion-enabled .proof-route[data-proof-system] .proof-route-stripes i:nth-child(4) {
    transition-delay: 420ms;
  }
  html.motion-enabled .proof-route[data-proof-system] .proof-route-stripes i:nth-child(5) {
    transition-delay: 560ms;
  }
  html.motion-enabled .proof-stage .proof-brief > :nth-child(2) {
    transition-delay: 90ms;
  }
  html.motion-enabled .proof-stage .proof-brief > :nth-child(3) {
    transition-delay: 170ms;
  }
  html.motion-enabled .proof-stage .proof-brief > :nth-child(4) {
    transition-delay: 250ms;
  }
  html.motion-enabled .proof-route li:nth-child(2) {
    transition-delay: 85ms;
  }
  html.motion-enabled .proof-route li:nth-child(3) {
    transition-delay: 170ms;
  }
  html.motion-enabled .proof-route li:nth-child(4) {
    transition-delay: 255ms;
  }
  html.motion-enabled .proof-route li:nth-child(5) {
    transition-delay: 340ms;
  }
  html.motion-enabled .proof-passport .passport-identity {
    transition-delay: 80ms;
  }
  html.motion-enabled .proof-passport .passport-fact:nth-child(1) {
    transition-delay: 140ms;
  }
  html.motion-enabled .proof-passport .passport-fact:nth-child(2) {
    transition-delay: 200ms;
  }
  html.motion-enabled .proof-passport .passport-fact:nth-child(3) {
    transition-delay: 260ms;
  }
  html.motion-enabled .proof-passport .passport-fact:nth-child(4) {
    transition-delay: 320ms;
  }
  html.motion-enabled .proof-passport .passport-boundary {
    transition-delay: 390ms;
  }
  html.motion-enabled .proof-passport .passport-bottom {
    transition-delay: 450ms;
  }
}
@keyframes proof-scan {
  0% {
    opacity: 0;
    transform: translate3d(-16%, -50%, 0) scaleX(0.08);
  }
  30% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translate3d(16%, -50%, 0) scaleX(1);
  }
}

@media (max-width: 860px) {
  .proof-route {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 0 0 28px;
  }
  .proof-route::before {
    top: 24px;
    right: auto;
    bottom: 24px;
    left: 4px;
    width: 1px;
    height: auto;
  }
  .proof-route::after {
    top: 24px;
    right: auto;
    bottom: 24px;
    left: 4px;
    width: 1px;
    height: auto;
    transform: scaleY(var(--proof-progress));
    transform-origin: top center;
  }
  .proof-route li {
    min-height: 0;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 4px 12px;
    padding: 20px 0 22px;
  }
  .proof-route li + li {
    border-top: 0;
  }
  .proof-route-stripes {
    top: 14px;
    left: -24px;
  }
  .proof-route li:first-child .proof-route-stripes {
    left: -24px;
    transform: none;
  }
  /* Keep the wider five-band mark clear of its stage label without moving the
     vertical route or breaking its first/last-axis alignment. */
  .proof-route li > .proof-route-position {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-top: 14px;
  }
  .proof-route li > .proof-route-order {
    grid-column: 1;
    grid-row: 2 / span 2;
    padding-top: 3px;
  }
  .proof-route li > div {
    grid-column: 2;
    grid-row: 2;
  }
  .proof-route li > div > strong {
    max-width: none;
  }
  .proof-route li > div > p {
    max-width: 48ch;
  }
  .proof-route li > em {
    grid-column: 2;
    grid-row: 3;
  }
}

@media (max-width: 760px) {
  .passport-standard-head {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 58px;
  }
  .passport-access-level {
    min-width: 58px;
    grid-row: 1 / span 2;
  }
  .passport-access-level strong {
    font-size: 24px;
  }
  .passport-standard-label {
    padding: 13px 15px 6px;
  }
  .passport-standard-state {
    padding: 4px 15px 12px;
    text-align: left;
  }
  .passport-standard-reference {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 16px 18px;
  }
  .passport-standard-reference code {
    font-size: clamp(19px, 6vw, 27px);
  }
  .passport-standard-reference p {
    text-align: left;
  }
  .passport-standard-facts {
    grid-template-columns: 1fr;
  }
  .passport-standard-facts section {
    padding: 16px 18px;
  }
  .passport-standard-facts section + section {
    border-top: 1px solid rgba(7, 19, 26, 0.28);
    border-left: 0;
  }
  .passport-standard-facts strong {
    font-size: 17px;
  }
  .passport-standard-compatibility,
  .passport-standard-history {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 14px 18px;
  }
  .passport-standard-note {
    padding: 0 18px 16px;
    font-size: 9px;
  }
  .proof-stage {
    min-height: 0;
    padding-block: 36px;
  }
  .proof-stage::before {
    width: 94%;
    background-size: 28px 28px;
    opacity: 0.35;
  }
  .proof-stage::after {
    left: 5%;
    width: 90%;
  }
  .proof-stage .motion-stage-inner {
    width: min(100% - 40px, 500px);
  }
  .proof-brief {
    padding: 24px 20px;
  }
  .proof-brief::before {
    inset: 10px;
  }
  .proof-brief-title {
    padding: 32px 0 24px;
  }
  .proof-brief-facts div,
  .proof-passport .passport-fact,
  .passport-boundary {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .proof-brief-footer {
    margin-top: 17px;
  }
  .proof-passport .passport-top {
    align-items: flex-start;
    padding: 22px 20px 15px;
  }
  .proof-passport .passport-main {
    padding: 28px 20px 24px;
  }
  .proof-passport::before {
    inset: 10px;
  }
  .proof-passport .passport-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

/* Dark actions use the deepest black lift. Light keeps its softer graphite lift. */
html[data-theme="light"] .subscription-card .btn-secondary[data-subscription-select],
html[data-theme="light"] .subscription-card .btn-signal[data-subscription-select] {
  box-shadow:
    inset 0 0 0 1px rgba(16, 21, 27, 0.3),
    0 3px 5px -3px rgba(5, 8, 11, 0.24),
    0 8px 18px -7px rgba(5, 8, 11, 0.32);
}
html[data-theme="light"] .subscription-card .btn-secondary[data-subscription-select]:hover,
html[data-theme="light"] .subscription-card .btn-secondary[data-subscription-select]:focus-visible,
html[data-theme="light"] .subscription-card .btn-signal[data-subscription-select]:hover,
html[data-theme="light"] .subscription-card .btn-signal[data-subscription-select]:focus-visible {
  box-shadow:
    inset 0 0 0 1px rgba(16, 21, 27, 0.2),
    0 4px 7px -3px rgba(5, 8, 11, 0.24),
    0 11px 22px -7px rgba(5, 8, 11, 0.36);
}

/* Pricing selectors follow the same one-pixel contrast rule as every other action. */
html:not([data-theme="light"]) .subscription-card .btn-secondary[data-subscription-select],
html:not([data-theme="light"]) .subscription-card .btn-signal[data-subscription-select] {
  border-color: var(--button-edge);
}
html:not([data-theme="light"]) .subscription-card .btn-secondary[data-subscription-select]:hover,
html:not([data-theme="light"])
  .subscription-card
  .btn-secondary[data-subscription-select]:focus-visible,
html:not([data-theme="light"]) .subscription-card .btn-signal[data-subscription-select]:hover,
html:not([data-theme="light"])
  .subscription-card
  .btn-signal[data-subscription-select]:focus-visible {
  border-color: var(--button-edge-hover);
}

/* Home work-systems tableau: illustrative scope, first-shift review and retained context. */
.systems-showcase {
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.systems-showcase-inner {
  border-inline: 1px solid transparent;
}
.systems-showcase-row {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(44px, 7vw, 112px);
  align-items: center;
  min-height: 540px;
  padding: clamp(58px, 8vw, 112px) 0;
  border-bottom: 1px solid var(--line-strong);
}
.systems-showcase-copy {
  max-width: 430px;
}
.systems-showcase-copy .kicker {
  margin-bottom: 16px;
  color: var(--ice);
}
.systems-showcase-copy h2 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(38px, 4.7vw, 68px);
  font-weight: var(--display-weight);
  letter-spacing: -0.065em;
  line-height: 0.98;
}
.systems-showcase-copy > p {
  max-width: 35ch;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}
.systems-checklist {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 14px;
}
.systems-checklist li {
  display: flex;
  align-items: baseline;
  gap: 11px;
}
.systems-checklist li::before {
  content: "✓";
  flex: 0 0 auto;
  color: var(--ice);
  font-size: 17px;
  font-weight: 750;
  line-height: 1;
}

.systems-map {
  --systems-caption-space: 88px;
  position: relative;
  display: grid;
  min-height: 464px;
  padding-bottom: 0;
  place-items: center;
  isolation: isolate;
}
/* All three paths share one square field, so they are true circles rather than
   stretched ellipses. The field stays fixed; only individual systems travel. */
.systems-orbit {
  position: absolute;
  top: calc((100% - var(--systems-caption-space)) / 2);
  left: 50%;
  width: min(calc(100% - 42px), 370px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.systems-orbit-track {
  position: absolute;
  display: block;
  border: 1px solid rgba(143, 211, 255, 0.15);
  border-radius: 50%;
}
.systems-orbit-track--outer {
  inset: 0;
}
.systems-orbit-track--middle {
  inset: 15% 15%;
  border-color: rgba(143, 211, 255, 0.11);
}
.systems-orbit-track--inner {
  inset: 29% 29%;
  border-color: rgba(143, 211, 255, 0.09);
}
.system-orbit-satellite {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: 50% 50%;
  will-change: transform;
}
.system-orbit-node {
  position: absolute;
  z-index: 1;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  background: transparent;
  box-shadow: none;
  will-change: transform;
}
.system-orbit-node::before,
.system-orbit-node::after {
  display: none;
}
.system-orbit-node img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}
/* Monochrome source marks need a light counterpart on the dark public
   surface. Full-colour marks retain their supplied colour; no tile or
   invented outline is added. */
html[data-theme="dark"] .system-orbit-node--notion img,
html[data-theme="dark"] .system-orbit-node--anthropic img,
html[data-theme="dark"] .system-orbit-node--clickup img,
html[data-theme="dark"] .system-orbit-node--intercom img,
html[data-theme="dark"] .system-orbit-node--whatsapp img,
html[data-theme="dark"] .system-orbit-node--zendesk img {
  filter: invert(1) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}
.systems-orbit-track--outer .system-orbit-node--google {
  top: -24px;
  left: 17%;
}
.systems-orbit-track--outer .system-orbit-node--notion {
  top: -24px;
  right: 17%;
}
.systems-orbit-track--outer .system-orbit-node--asana {
  top: 31%;
  left: -24px;
}
.systems-orbit-track--outer .system-orbit-node--shopify {
  top: 31%;
  right: -24px;
}
.systems-orbit-track--outer .system-orbit-node--hubspot {
  bottom: -24px;
  left: 19%;
}
.systems-orbit-track--outer .system-orbit-node--amocrm {
  right: 18%;
  bottom: -24px;
}
.systems-orbit-track--outer .system-orbit-node--clickup {
  top: 66%;
  left: -24px;
}
.systems-orbit-track--outer .system-orbit-node--bitrix24 {
  top: 66%;
  right: -34px;
}
.systems-orbit-track--middle .system-orbit-node--airtable {
  top: -24px;
  left: 29%;
}
.systems-orbit-track--middle .system-orbit-node--zapier {
  top: 23%;
  right: -24px;
}
.systems-orbit-track--middle .system-orbit-node--trello {
  right: 8%;
  bottom: -24px;
}
.systems-orbit-track--middle .system-orbit-node--stripe {
  bottom: -24px;
  left: 25%;
}
.systems-orbit-track--middle .system-orbit-node--intercom {
  top: 64%;
  left: -24px;
}
.systems-orbit-track--middle .system-orbit-node--zendesk {
  right: -24px;
  bottom: 29%;
}
.systems-orbit-track--inner .system-orbit-node--anthropic {
  top: -24px;
  left: 15%;
}
.systems-orbit-track--inner .system-orbit-node--apple {
  right: 6%;
  bottom: -24px;
}
.systems-orbit-track--inner .system-orbit-node--whatsapp {
  bottom: -24px;
  left: 15%;
}
.system-orbit-node--amocrm img {
  width: 54px;
  height: auto;
  max-height: 18px;
}
.system-orbit-node--bitrix24 {
  width: 70px;
  height: 32px;
}
.system-orbit-node--bitrix24 img {
  width: 66px;
  height: auto;
  filter: grayscale(1) brightness(1.42) contrast(0.78) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}
html[data-theme="light"] .system-orbit-node--bitrix24 img {
  filter: grayscale(1) brightness(0.42) contrast(1.22) drop-shadow(0 2px 3px rgba(45, 59, 68, 0.16));
}
/* These compact source marks otherwise lose their characteristic form first on
   a phone. A slight size allowance keeps the original vectors recognisable
   without reintroducing a tile, frame or invented logo treatment. */
.system-orbit-node--clickup img,
.system-orbit-node--trello img,
.system-orbit-node--zapier img {
  width: 37px;
  height: 37px;
}
.systems-map-core {
  position: absolute;
  z-index: 2;
  top: calc((100% - var(--systems-caption-space)) / 2);
  left: 50%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
}
.systems-map-mark {
  width: clamp(128px, 15vw, 176px);
  height: clamp(128px, 15vw, 176px);
}
.systems-map-mark::after {
  animation: atacsys-stripe-flash 3.6s ease-in-out infinite;
}
.systems-visual-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 5px;
  margin: 0;
  color: var(--quiet);
  text-align: center;
  font: 700 9px/1.35 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.systems-visual-caption strong {
  color: var(--text);
  font: inherit;
}
/* The lines are fixed paths. Each satellite moves on its own path while its
   small mark counter-rotates to remain upright, like a calm system orbit. */
@keyframes systems-satellite-clockwise {
  to {
    transform: rotate(360deg);
  }
}
@keyframes systems-satellite-counterclockwise {
  to {
    transform: rotate(-360deg);
  }
}
.system-orbit-satellite--google {
  --orbit-delay: -4.7s;
  --orbit-duration: 56s;
}
.system-orbit-satellite--notion {
  --orbit-delay: -12.4s;
  --orbit-duration: 64s;
}
.system-orbit-satellite--asana {
  --orbit-delay: -19.1s;
  --orbit-duration: 49s;
}
.system-orbit-satellite--shopify {
  --orbit-delay: -25.8s;
  --orbit-duration: 69s;
}
.system-orbit-satellite--hubspot {
  --orbit-delay: -31.2s;
  --orbit-duration: 59s;
}
.system-orbit-satellite--amocrm {
  --orbit-delay: -37.6s;
  --orbit-duration: 72s;
}
.system-orbit-satellite--clickup {
  --orbit-delay: -44.3s;
  --orbit-duration: 63s;
}
.system-orbit-satellite--bitrix24 {
  --orbit-delay: -50.8s;
  --orbit-duration: 72s;
}
.system-orbit-satellite--airtable {
  --orbit-delay: -2.9s;
  --orbit-duration: 38s;
}
.system-orbit-satellite--zapier {
  --orbit-delay: -9.6s;
  --orbit-duration: 47s;
}
.system-orbit-satellite--trello {
  --orbit-delay: -16.4s;
  --orbit-duration: 34s;
}
.system-orbit-satellite--stripe {
  --orbit-delay: -22.1s;
  --orbit-duration: 43s;
}
.system-orbit-satellite--intercom {
  --orbit-delay: -28.8s;
  --orbit-duration: 52s;
}
.system-orbit-satellite--zendesk {
  --orbit-delay: -35.6s;
  --orbit-duration: 46s;
}
.system-orbit-satellite--anthropic {
  --orbit-delay: -5.2s;
  --orbit-duration: 24s;
}
.system-orbit-satellite--apple {
  --orbit-delay: -14.1s;
  --orbit-duration: 29s;
}
.system-orbit-satellite--whatsapp {
  --orbit-delay: -20.4s;
  --orbit-duration: 33s;
}
/* A ring is a carousel: its marks share one velocity and retain the deliberate
   spacing in the markup. The rings have different speeds, but no mark can
   catch another, collide or mask a logo during a long visit. */
html.motion-enabled .systems-orbit-track--outer .system-orbit-satellite {
  animation: systems-satellite-clockwise 72s linear infinite;
}
html.motion-enabled .systems-orbit-track--outer .system-orbit-node {
  animation: systems-satellite-counterclockwise 72s linear infinite;
}
html.motion-enabled .systems-orbit-track--middle .system-orbit-satellite {
  animation: systems-satellite-clockwise 54s linear infinite;
}
html.motion-enabled .systems-orbit-track--middle .system-orbit-node {
  animation: systems-satellite-counterclockwise 54s linear infinite;
}
html.motion-enabled .systems-orbit-track--inner .system-orbit-satellite {
  animation: systems-satellite-clockwise 36s linear infinite;
}
html.motion-enabled .systems-orbit-track--inner .system-orbit-node {
  animation: systems-satellite-counterclockwise 36s linear infinite;
}

.first-shift-visual {
  display: grid;
  grid-template-columns: minmax(198px, 0.75fr) minmax(0, 1fr);
  gap: 24px;
  width: min(100%, 640px);
  justify-self: center;
}
.shift-flow-card,
.shift-status-card {
  border: 1px solid rgba(188, 199, 208, 0.17);
  background: #10151b;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
  color: #f4f7f9;
}
.shift-flow-card {
  min-height: 360px;
  padding: 25px;
}
.shift-flow-card > p,
.shift-status-card > p {
  margin: 0;
  color: #bcc7d0;
  font: 700 9px/1.3 var(--mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.shift-flow-card ol {
  position: relative;
  display: grid;
  gap: 25px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.shift-flow-card ol::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 11px;
  width: 1px;
  background: rgba(143, 211, 255, 0.43);
}
.shift-flow-card li {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
}
.shift-flow-card li > span {
  display: block;
  width: 23px;
  height: 23px;
  border: 2px solid #74808b;
  border-radius: 50%;
  background: #c4ced3;
  box-shadow: 0 0 0 4px #10151b;
}
.shift-flow-card li.is-complete > span {
  border-color: var(--ice);
  background: var(--ice);
}
.shift-flow-card li.is-complete > span::after {
  display: grid;
  height: 100%;
  content: "✓";
  place-items: center;
  color: #07131a;
  font-size: 13px;
  font-weight: 900;
}
.shift-flow-card li.is-current > span {
  border-color: var(--ice);
  background: #10151b;
  box-shadow:
    0 0 0 4px #10151b,
    0 0 0 5px rgba(143, 211, 255, 0.18);
}
.shift-flow-card li div {
  display: grid;
  gap: 3px;
  padding-top: 2px;
}
.shift-flow-card strong {
  font-size: 15px;
  font-weight: 680;
  line-height: 1.1;
}
.shift-flow-card small {
  color: #bcc7d0;
  font-size: 11px;
}
.shift-status-stack {
  display: grid;
  gap: 18px;
}
.shift-status-card {
  display: grid;
  align-content: start;
  min-height: 171px;
  padding: 25px;
}
.shift-status-card--progress {
  min-height: 190px;
}
.shift-status-card--progress > p {
  color: var(--ice);
}
.shift-status-card--progress > p span {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--ice);
}
.shift-status-card > strong {
  display: block;
  margin-top: 20px;
  font-size: 22px;
  font-weight: 680;
  letter-spacing: -0.045em;
  line-height: 1.05;
}
.shift-status-card > span {
  display: block;
  max-width: 28ch;
  margin-top: 10px;
  color: #bcc7d0;
  font-size: 12px;
  line-height: 1.4;
}
.shift-status-card > em {
  margin-top: 24px;
  color: var(--ice);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}
.shift-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 23px;
}
.shift-progress::before {
  grid-column: 1;
  grid-row: 1;
  height: 7px;
  content: "";
  background: #42505a;
}
.shift-progress i {
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
  display: block;
  width: 62%;
  height: 7px;
  background: var(--ice);
}
.shift-progress b {
  grid-column: 2;
  grid-row: 1;
  color: #f4f7f9;
  font: 700 12px/1 var(--mono);
}

.context-deck-wrap {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 22px;
  width: 100%;
  padding: 0 0 34px;
}
.context-deck.context-deck--passport {
  --role-passport-surface: #10151b;
  --role-passport-ink: #f4f7f9;
  --role-passport-line: rgba(244, 247, 249, 0.22);
  --role-passport-back-1: #46545e;
  --role-passport-back-2: #3b4852;
  --role-passport-back-3: #303c46;
  --role-passport-back-4: #26313a;
  position: relative;
  width: min(100%, 520px);
  height: 386px;
}
.context-deck--passport .context-deck-card {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border: 1px solid var(--role-passport-line);
  border-radius: 3px;
  transform-origin: 50% 55%;
}
.context-deck--passport .context-deck-card--back {
  pointer-events: none;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.11);
}
.context-deck--passport .context-deck-card--back-2 {
  z-index: 2;
  background: var(--role-passport-back-2);
  transform: translate3d(-36px, 0, 0) scale(0.954);
}
.context-deck--passport .context-deck-card--back-3 {
  z-index: 3;
  background: var(--role-passport-back-3);
  transform: translate3d(-24px, 0, 0) scale(0.97);
}
.context-deck--passport .context-deck-card--back-4 {
  z-index: 4;
  background: var(--role-passport-back-4);
  transform: translate3d(-12px, 0, 0) scale(0.985);
}
.context-deck--passport .context-deck-card--active {
  z-index: 5;
  background: var(--role-passport-surface);
  color: var(--role-passport-ink);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.17);
}
.role-passport-card {
  padding: clamp(26px, 3.4vw, 32px);
}
.role-passport-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--role-passport-line);
}
.role-passport-mark {
  display: block;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("/assets/brand/atacsys-mark-dark.svg") center / contain no-repeat;
  mask: url("/assets/brand/atacsys-mark-dark.svg") center / contain no-repeat;
}
.role-passport-card-head strong {
  display: block;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 650;
  line-height: 0.95;
  letter-spacing: -0.045em;
}
.role-passport-card-head span,
.role-passport-fields dt {
  display: block;
  color: currentColor;
  font: 700 9px/1.35 var(--mono);
  letter-spacing: 0.1em;
  opacity: 0.66;
  text-transform: uppercase;
}
.role-passport-card-head span {
  margin-top: 6px;
}
.role-passport-fields {
  display: grid;
  margin: 0;
}
.role-passport-fields div {
  display: grid;
  grid-template-columns: minmax(110px, 0.56fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--role-passport-line);
}
.role-passport-fields div:last-child {
  border-bottom: 0;
}
.role-passport-fields dt {
  margin: 0;
}
.role-passport-fields dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

html[data-theme="light"] .systems-showcase-copy .kicker,
html[data-theme="light"] .systems-checklist li::before,
html[data-theme="light"] .shift-status-card--progress > p,
html[data-theme="light"] .shift-status-card--progress > p span,
html[data-theme="light"] .shift-status-card > em {
  color: var(--copper);
}
html[data-theme="light"] .shift-status-card--progress > p span {
  background: var(--copper);
}

@media (max-width: 980px) {
  .systems-showcase-row {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 42px;
  }
  .systems-showcase-copy h2 {
    font-size: clamp(34px, 4.4vw, 53px);
  }
  .systems-map {
    min-height: 430px;
  }
  .first-shift-visual {
    grid-template-columns: minmax(176px, 0.7fr) minmax(0, 1fr);
    gap: 16px;
  }
  .shift-flow-card,
  .shift-status-card {
    padding: 21px;
  }
  .shift-flow-card {
    min-height: 344px;
  }
}

@media (max-width: 760px) {
  .systems-showcase-row {
    grid-template-columns: 1fr;
    gap: 38px;
    min-height: 0;
    padding: 58px 0;
  }
  .systems-showcase-copy {
    max-width: 560px;
  }
  .systems-showcase-copy h2 {
    max-width: 14ch;
    font-size: clamp(35px, 10.4vw, 48px);
  }
  .systems-map {
    width: min(100%, 560px);
    justify-self: center;
  }
  .first-shift-visual {
    width: min(100%, 560px);
  }
  .context-deck-wrap {
    width: min(100%, 560px);
  }
}

@media (max-width: 560px) {
  .systems-showcase-row {
    gap: 29px;
    padding: 46px 0;
  }
  .systems-showcase-copy > p {
    font-size: 15px;
  }
  .systems-checklist {
    gap: 10px;
    margin-top: 23px;
    font-size: 13px;
  }
  .systems-map {
    --systems-caption-space: 88px;
    min-height: 450px;
    padding: 0;
  }
  .systems-orbit {
    width: min(calc(100% - 34px), 346px);
    aspect-ratio: 1;
  }
  .system-orbit-node {
    width: 36px;
    height: 36px;
  }
  .system-orbit-node img {
    width: 29px;
    height: 29px;
  }
  .system-orbit-node--clickup img,
  .system-orbit-node--trello img,
  .system-orbit-node--zapier img {
    width: 32px;
    height: 32px;
  }
  .system-orbit-node--amocrm img {
    width: 46px;
    height: auto;
    max-height: 16px;
  }
  .system-orbit-node--bitrix24 {
    width: 60px;
    height: 28px;
  }
  .system-orbit-node--bitrix24 img {
    width: 56px;
    height: auto;
  }
  .system-orbit-node--stripe {
    bottom: -7%;
  }
  .systems-map-mark {
    width: 122px;
    height: 122px;
  }
  .systems-visual-caption {
    position: absolute;
    margin: 0;
  }
  .first-shift-visual {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .shift-flow-card {
    min-height: 0;
  }
  .shift-status-stack {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .shift-status-card,
  .shift-status-card--progress {
    min-height: 0;
  }
  .context-deck.context-deck--passport {
    width: 100%;
    height: 420px;
  }
  .context-deck--passport .context-deck-card--back-2 {
    transform: translate3d(-30px, 0, 0) scale(0.954);
  }
  .context-deck--passport .context-deck-card--back-3 {
    transform: translate3d(-20px, 0, 0) scale(0.97);
  }
  .context-deck--passport .context-deck-card--back-4 {
    transform: translate3d(-10px, 0, 0) scale(0.985);
  }
  .role-passport-card {
    padding: 27px 26px;
  }
  .role-passport-card-head {
    gap: 13px;
    padding-bottom: 19px;
  }
  .role-passport-mark {
    width: 26px;
    height: 26px;
  }
  .role-passport-card-head strong {
    font-size: 27px;
  }
  .role-passport-fields div {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 14px;
    min-height: 55px;
  }
  .role-passport-fields dd {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .evidence-metric > * {
    transition: none;
  }
  .systems-map-mark::after {
    animation: none;
    opacity: 0;
  }
  .systems-orbit,
  .systems-map-core {
    transition: none;
  }
  .systems-orbit-track,
  .systems-orbit-satellite,
  .systems-orbit-track .system-orbit-node {
    animation: none;
  }
}

/* Agent Bank: editorial role reference, deliberately static and inspectable. */
.agent-bank-hero p {
  max-width: 680px;
}
.agent-bank-start-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line);
}
.agent-bank-start-grid article {
  min-height: 230px;
  padding: 25px 25px 29px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.agent-bank-start-grid span,
.agent-bank-group-head > div > span,
.agent-bank-code {
  color: var(--signal);
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.agent-bank-start-grid h3 {
  margin: 26px 0 12px;
  font-size: 24px;
  font-weight: 610;
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.agent-bank-start-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.agent-bank-heading {
  align-items: end;
}
.agent-bank-heading .text-link {
  margin-bottom: 8px;
  white-space: nowrap;
}
.agent-bank-group {
  margin-top: 72px;
}
.agent-bank-group:first-of-type {
  margin-top: 50px;
}
.agent-bank-group-head {
  display: grid;
  grid-template-columns: minmax(260px, 0.86fr) minmax(0, 1.14fr);
  gap: 28px;
  align-items: end;
  margin-bottom: 18px;
}
.agent-bank-group-head > div {
  display: flex;
  align-items: baseline;
  gap: 13px;
}
.agent-bank-group-head h3 {
  margin: 0;
  font-size: clamp(29px, 3.35vw, 44px);
  font-weight: 560;
  line-height: 0.98;
  letter-spacing: -0.06em;
}
.agent-bank-group-head p {
  max-width: 570px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.52;
}
.agent-bank-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.agent-bank-grid-single {
  grid-template-columns: minmax(0, 1fr);
}
.agent-bank-card {
  min-width: 0;
  padding: clamp(25px, 3vw, 36px);
  border: 1px solid var(--line-strong);
  background: var(--surface);
}
.agent-bank-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.agent-bank-card h4 {
  margin: 0;
  font-size: clamp(27px, 3.05vw, 39px);
  font-weight: 590;
  line-height: 0.95;
  letter-spacing: -0.057em;
}
.agent-bank-code {
  margin-top: 3px;
  color: var(--quiet);
  text-align: right;
}
.agent-bank-summary {
  min-height: 62px;
  margin: 22px 0 25px;
  color: var(--text);
  font-size: 17px;
  font-weight: 510;
  line-height: 1.32;
  letter-spacing: -0.025em;
}
.agent-bank-card dl {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--line);
}
.agent-bank-card dl > div {
  display: grid;
  grid-template-columns: minmax(116px, 0.47fr) minmax(0, 1fr);
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.agent-bank-card dt {
  color: var(--signal);
  font: 700 9px/1.38 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.agent-bank-card dd {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.43;
}
.agent-bank-card dl > div:nth-child(3) dd {
  color: var(--text);
  font-weight: 540;
}
html[data-theme="light"] .agent-bank-card {
  background: rgba(255, 255, 255, 0.18);
}
html[data-theme="light"] .agent-bank-start-grid span,
html[data-theme="light"] .agent-bank-group-head > div > span,
html[data-theme="light"] .agent-bank-card dt {
  color: var(--copper);
}

@media (max-width: 980px) {
  .agent-bank-start-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .agent-bank-group-head {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 640px) {
  .agent-bank-start-grid {
    grid-template-columns: 1fr;
  }
  .agent-bank-start-grid article {
    min-height: 0;
    padding: 23px 20px 25px;
  }
  .agent-bank-start-grid h3 {
    margin-top: 21px;
  }
  .agent-bank-heading .text-link {
    margin-top: 20px;
  }
  .agent-bank-group {
    margin-top: 56px;
  }
  .agent-bank-group:first-of-type {
    margin-top: 38px;
  }
  .agent-bank-group-head h3 {
    font-size: 34px;
  }
  .agent-bank-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .agent-bank-card {
    padding: 23px 20px;
  }
  .agent-bank-card-head {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-bottom: 18px;
  }
  .agent-bank-code {
    margin: 0;
    text-align: left;
  }
  .agent-bank-card h4 {
    font-size: 31px;
  }
  .agent-bank-summary {
    min-height: 0;
    margin: 19px 0 21px;
    font-size: 16px;
  }
  .agent-bank-card dl > div {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 12px 0;
  }
  .agent-bank-card dd {
    font-size: 13px;
  }
}

/* Optional, first-party analytics consent.  This is intentionally a quiet,
   dismissible choice rather than a blocking wall; declining keeps the public
   site fully usable. */
.site-analytics-consent {
  position: fixed;
  z-index: 950;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(420px, calc(100vw - 32px));
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, #8fd3ff);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper) 94%, #0b0f13);
  box-shadow: 0 18px 60px rgba(11, 15, 19, 0.28);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}
.site-analytics-consent p {
  margin: 0;
}
.site-analytics-consent a {
  color: inherit;
  text-underline-offset: 3px;
}
.site-analytics-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.site-analytics-consent button {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.site-analytics-decline {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
}
.site-analytics-allow {
  border: 1px solid #8fd3ff;
  background: #8fd3ff;
  color: #0b0f13;
}
.site-analytics-consent button:focus-visible {
  outline: 3px solid #8fd3ff;
  outline-offset: 3px;
}
@media (max-width: 600px) {
  .site-analytics-consent {
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
  }
  .site-analytics-consent-actions > * {
    flex: 1 1 150px;
  }
}