: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;
  --copper-text: var(--copper);
  --signal: #f2b84b;
  --signal-text: var(--signal);
  --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;
  --copper-text: #784600;
  --signal: #c9785a;
  --signal-text: #784600;
  --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-text);
  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-text);
}

@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;
  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:hover .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:hover .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-text);
  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;
  background: var(--bg);
}
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;
  margin-top: clamp(34px, 5vw, 62px);
  padding-top: 14px;
  border-top: 0;
}
.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 {
  position: relative;
  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;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .72), 0 6px 14px rgba(143, 211, 255, .12);
  transform: translateZ(0);
}
.hero-logo-ticker-list li::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: -4px;
  top: calc(50% + 9px);
  width: 52px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(143, 211, 255, .20), rgba(143, 211, 255, 0) 69%);
  filter: blur(5px);
  opacity: .76;
  pointer-events: none;
}
.hero-logo-ticker-list li > * {
  position: relative;
  z-index: 1;
}
.hero-logo-ticker .integration-mark {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .78)) drop-shadow(0 5px 9px rgba(143, 211, 255, .20));
}
.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-text);
  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: 0;
  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-text);
}
html[data-theme="light"] .work-story-copy h2 span {
  color: var(--copper-text);
}
/* 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-text);
  }
}

/* Isolated home override: no decorative rules or non-process numbering. */
body[data-page="home"] .benefit-grid,
body[data-page="home"] .benefit-card + .benefit-card,
body[data-page="home"] .decision-brief,
body[data-page="home"] .decision-brief-list,
body[data-page="home"] .decision-brief-list li,
body[data-page="home"] .business-friction-list li,
body[data-page="home"] .business-friction-list > li:nth-last-child(-n + 2) {
  border-color: transparent;
}
body[data-page="home"] .business-friction-list li { grid-template-columns: minmax(0, 1fr); }
body[data-page="home"] .business-friction-list li > span { display: none; }
@media (max-width: 600px) {
  body[data-page="home"] .benefit-card + .benefit-card { border-top-color: transparent; }
}

/* Softer dark-theme lift: graphite depth, not a black drop shadow. */
html:not([data-theme="light"]) .btn {
  box-shadow:
    0 2px 2px rgba(38, 49, 58, 0.34),
    0 10px 20px -12px rgba(38, 49, 58, 0.72);
}
html:not([data-theme="light"]) .btn:hover,
html:not([data-theme="light"]) .btn:focus-visible {
  box-shadow:
    0 3px 3px rgba(38, 49, 58, 0.4),
    0 13px 24px -12px rgba(38, 49, 58, 0.78);
}
.text-link {
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.1), 0 3px 6px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 12px -10px rgba(38, 49, 58, 0.5);
}
html[data-theme="light"] .text-link {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58), 0 2px 5px rgba(5, 12, 18, 0.11);
  box-shadow: 0 4px 10px -10px rgba(5, 12, 18, 0.24);
}

/* Dark theme: a deliberately visible graphite lift, lighter than the page. */
html:not([data-theme="light"]) .btn {
  box-shadow:
    0 3px 2px rgba(89, 108, 120, 0.58),
    0 12px 22px -8px rgba(70, 88, 100, 0.88);
}
html:not([data-theme="light"]) .btn:hover,
html:not([data-theme="light"]) .btn:focus-visible {
  box-shadow:
    0 4px 3px rgba(111, 133, 147, 0.66),
    0 16px 28px -8px rgba(79, 101, 116, 0.94);
}

/* Change Pack CHG-20260823-outcome-first-home: Home is a short buyer journey,
   not a product encyclopaedia. Detailed material remains on its own pages. */
body[data-page="home"] .work-story,
body[data-page="home"] .systems-showcase,
body[data-page="home"] .evidence-ledger,
body[data-page="home"] .verification-standard,
body[data-page="home"] [aria-labelledby="concierge-title"],
body[data-page="home"] [aria-labelledby="roles-title"],
body[data-page="home"] [aria-labelledby="continuity-title"],
body[data-page="home"] [aria-labelledby="process-title"],
body[data-page="home"] [aria-labelledby="control-title"],
body[data-page="home"] [aria-labelledby="faq-title"],
body[data-page="home"] .problem-bar {
  display: none;
}

/* Keep the buyer message and its first action in the opening viewport. */
body[data-page="home"] .hero {
  min-height: 0;
}
body[data-page="home"] .hero-copy {
  padding-block: clamp(38px, 4vw, 58px);
}
body[data-page="home"] .hero h1 {
  font-size: clamp(48px, 5vw, 72px);
}
body[data-page="home"] .hero-signal {
  gap: 8px;
  margin-top: 18px;
}
body[data-page="home"] .atacsys-mark-hero-signal {
  width: clamp(210px, 18vw, 260px);
  height: clamp(210px, 18vw, 260px);
  margin-block: -32px;
}
body[data-page="home"] .section {
  padding-block: clamp(72px, 7vw, 104px);
}
body[data-page="home"] .scope-record-copy {
  padding: clamp(36px, 4vw, 58px);
}
body[data-page="home"] .scope-record-boundary {
  min-height: 0;
  padding: clamp(36px, 4vw, 58px);
}
/* Change Pack CHG-20260823-outcome-first-home: name the business pressure first.
   The linked pages hold the detailed product explanation. */
body[data-page="home"] .business-friction {
  /* The ticker is part of the opening field, not a separate panel. */
  background: var(--bg);
  box-shadow: none;
}
.business-friction-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(250px, 0.62fr);
  gap: clamp(32px, 8vw, 126px);
  align-items: end;
  margin-bottom: clamp(44px, 7vw, 82px);
}
.business-friction-head h2 {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(42px, 5.6vw, 78px);
  font-weight: var(--display-weight);
  line-height: 0.94;
  letter-spacing: -0.067em;
}
.business-friction-head h2 span { color: var(--ice); }
.business-friction-head > p {
  max-width: 39ch;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}
.business-friction-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(42px, 7vw, 112px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.business-friction-list li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 16px;
  padding: 28px 0 31px;
  border-top: 1px solid var(--line);
}
.business-friction-list > li:nth-last-child(-n + 2) { border-bottom: 1px solid var(--line); }
.business-friction-list > li > span {
  padding-top: 4px;
  color: var(--quiet);
  font: 700 9px/1 var(--mono);
  letter-spacing: 0.08em;
}
.business-friction-list h3 {
  max-width: 19ch;
  margin: 0;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 590;
  line-height: 1.06;
  letter-spacing: -0.047em;
}
.business-friction-list p {
  max-width: 39ch;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.business-friction-list .text-link { display: inline-flex; margin-top: 16px; }
.business-friction-closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 30px;
  margin-top: clamp(42px, 6vw, 70px);
}
.business-friction-closing p {
  max-width: 44ch;
  margin: 0;
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 560;
  line-height: 1.18;
  letter-spacing: -0.04em;
}
html[data-theme="light"] .business-friction-head h2 span { color: var(--copper-text); }
body[data-page="home"] .decision-brief {
  padding-block: clamp(48px, 5vw, 76px);
}
@media (max-width: 600px) {
  body[data-page="home"] .hero-copy {
    padding-block: 24px 30px;
  }
  body[data-page="home"] .hero-signal {
    margin-top: 12px;
  }
  body[data-page="home"] .atacsys-mark-hero-signal {
    width: 184px;
    height: 184px;
    margin-block: -26px;
  }
  .business-friction-head,
  .business-friction-list { grid-template-columns: 1fr; }
  .business-friction-head { gap: 22px; margin-bottom: 46px; }
  .business-friction-head h2 { font-size: clamp(40px, 11.4vw, 60px); }
  .business-friction-head > p { font-size: 16px; }
  .business-friction-list { gap: 0; }
  .business-friction-list > li:nth-last-child(-n + 2) { border-bottom: 0; }
  .business-friction-list > li:last-child { border-bottom: 1px solid var(--line); }
  .business-friction-list li {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
    padding: 24px 0 27px;
  }
  .business-friction-list h3 { font-size: 22px; }
  .business-friction-closing {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
    margin-top: 42px;
  }
}
/* 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-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-text);
  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-text);
}
html[data-theme="light"] .evidence-metric-top a:hover,
html[data-theme="light"] .evidence-metric-top a:focus-visible {
  color: var(--copper-text);
}

.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);
}

/* CHG-20260823-outcome-first-home: the overview uses space and type, not
   template dividers. Links remain visibly actionable without becoming cards. */
body[data-page="home"] .announcement {
  border-bottom: 0;
}
body[data-page="home"] .announcement-inner {
  min-height: 30px;
  gap: 8px;
  justify-content: center;
  color: var(--quiet);
  font-size: 10px;
  font-weight: 540;
}
body[data-page="home"] .announcement strong {
  min-height: 0;
  color: var(--quiet);
  font-size: 10px;
  font-weight: 650;
}
body[data-page="home"] .announcement strong::before,
body[data-page="home"] .kicker::before { display: none; }
.announcement-close {
  width: 22px;
  height: 22px;
  margin-left: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--quiet);
  cursor: pointer;
  font-size: 18px;
  font-weight: 340;
  line-height: 1;
}
.announcement-close:hover,
.announcement-close:focus-visible { color: var(--ice); outline: none; }
body[data-page="home"] .atacsys-mark-hero-signal {
  width: clamp(380px, 34vw, 520px);
  height: clamp(380px, 34vw, 520px);
  margin-block: -68px;
}
body[data-page="home"] .section,
body[data-page="home"] .business-friction-list li,
body[data-page="home"] .business-friction-list > li:nth-last-child(-n + 2) {
  border-color: transparent;
}
.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 9px 6px;
  border-radius: 4px;
  box-shadow: 0 4px 10px -8px rgba(5, 12, 18, 0.55);
  text-decoration: none;
  transition: color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.text-link::after {
  position: absolute;
  right: 9px;
  bottom: 3px;
  left: 9px;
  height: 1px;
  background: var(--line-strong);
  content: "";
  transition: background-color 180ms ease, box-shadow 180ms ease;
}
.text-link:hover,
.text-link:focus-visible {
  background: color-mix(in srgb, var(--ice) 8%, transparent);
  box-shadow: 0 7px 16px -10px rgba(5, 12, 18, 0.72);
  outline: none;
}
.text-link:hover::after,
.text-link:focus-visible::after {
  background: var(--ice);
  box-shadow: 0 0 7px color-mix(in srgb, var(--ice) 75%, transparent);
}
@media (max-width: 600px) {
  body[data-page="home"] .announcement-inner {
    min-height: 28px;
    padding-block: 4px;
    justify-content: flex-start;
    font-size: 9px;
    line-height: 1.25;
  }
  body[data-page="home"] .announcement strong { font-size: 9px; }
  body[data-page="home"] .atacsys-mark-hero-signal {
    width: min(360px, 92vw);
    height: min(360px, 92vw);
    margin-block: -58px;
  }
  body[data-page="home"] .business-friction-list > li:last-child { border-bottom-color: transparent; }
}

/* Final visual clean-up for this isolated home preview. */
body[data-page="home"] .benefit-grid,
body[data-page="home"] .benefit-card + .benefit-card,
body[data-page="home"] .decision-brief,
body[data-page="home"] .decision-brief-list,
body[data-page="home"] .decision-brief-list li {
  border-color: transparent;
}
body[data-page="home"] .benefit-grid {
  padding-block: 8px;
}
body[data-page="home"] .benefit-card + .benefit-card {
  padding-left: clamp(24px, 4vw, 56px);
}
body[data-page="home"] .business-friction-list li {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
body[data-page="home"] .business-friction-list li > span { display: none; }
html:not([data-theme="light"]) .btn {
  border-color: color-mix(in srgb, white 30%, transparent);
  box-shadow:
    0 3px 5px -2px rgba(103, 120, 132, 0.42),
    0 12px 24px -8px rgba(78, 96, 108, 0.68);
}
html:not([data-theme="light"]) .btn:hover,
html:not([data-theme="light"]) .btn:focus-visible {
  box-shadow:
    0 4px 6px -2px rgba(120, 140, 154, 0.48),
    0 15px 28px -8px rgba(88, 110, 124, 0.74);
}
html[data-theme="light"] .btn { border-color: rgba(5, 12, 18, 0.28); }
.text-link {
  font-weight: 720;
  text-shadow: 0 2px 6px rgba(143, 211, 255, 0.13);
  box-shadow: 0 5px 12px -10px rgba(66, 84, 96, 0.38);
}
html[data-theme="light"] .text-link {
  text-shadow: 0 2px 6px rgba(5, 12, 18, 0.1);
  box-shadow: 0 5px 12px -10px rgba(5, 12, 18, 0.22);
}

/* Text links are the warm, tactile secondary action. Button depth is locked above. */
.text-link {
  color: var(--signal-text);
  text-shadow:
    0 1px 2px rgba(255, 246, 218, 0.38),
    0 3px 9px rgba(242, 184, 75, 0.28);
}
html[data-theme="light"] .text-link {
  color: var(--signal-text);
  text-shadow:
    0 1px 1px rgba(255, 255, 255, 0.8),
    0 3px 8px rgba(171, 116, 35, 0.2);
}

/* Text-link finish: one small raised shadow and a fine dark inner edge. */
.text-link {
  -webkit-text-stroke: 0.35px rgba(10, 15, 20, 0.78);
  paint-order: stroke fill;
  text-shadow: 0 1px 1px rgba(224, 234, 240, 0.28);
  box-shadow: 0 4px 9px -11px rgba(94, 112, 124, 0.34);
}
html[data-theme="light"] .text-link {
  -webkit-text-stroke: 0.3px rgba(39, 29, 12, 0.62);
  text-shadow: 0 1px 1px rgba(56, 43, 19, 0.24);
  box-shadow: 0 4px 9px -11px rgba(5, 12, 18, 0.18);
}

/* Text links keep the same Signal Amber in both themes. */
.text-link,
html[data-theme="light"] .text-link { color: #F2B84B; }

/* On light surfaces the same yellow needs a deeper amber value for legibility. */
html[data-theme="light"] .text-link {
  color: #784600;
  -webkit-text-stroke-color: rgba(52, 32, 4, 0.74);
  text-shadow: 0 1px 1px rgba(56, 35, 3, 0.38);
}

/* One action-control standard: the form's compact choices inherit button depth. */
.outcome-guidance button {
  border-color: var(--button-edge);
  box-shadow:
    0 3px 5px -2px rgba(103, 120, 132, 0.42),
    0 12px 24px -8px rgba(78, 96, 108, 0.68);
}
.outcome-guidance button:hover,
.outcome-guidance button:focus-visible {
  border-color: var(--button-edge-hover);
  box-shadow:
    0 4px 6px -2px rgba(120, 140, 154, 0.48),
    0 15px 28px -8px rgba(88, 110, 124, 0.74);
}
html[data-theme="light"] .outcome-guidance button {
  border-color: rgba(5, 12, 18, 0.28);
  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"] .outcome-guidance button:hover,
html[data-theme="light"] .outcome-guidance button:focus-visible {
  box-shadow:
    0 4px 7px -3px rgba(5, 8, 11, 0.24),
    0 11px 22px -7px rgba(5, 8, 11, 0.36);
}
@media (max-width: 600px) {
  body[data-page="home"] .benefit-card + .benefit-card { padding-left: 0; }
}

.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-text);
  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-text);
  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-text);
  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-text);
}

.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: 0;
  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-text);
  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: 12px 0;
  border-bottom: 1px solid var(--line);
  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-text);
  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-text);
  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-text);
  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-text);
  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-text);
  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);
  text-decoration: none;
}
html[data-theme="light"] main h1 > span,
html[data-theme="light"] main h2 > span {
  color: var(--copper-text);
}
html[data-theme="light"] [data-ice-reveal] {
  color: var(--copper-text);
  -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;
}

html[data-theme="light"] :focus-visible {
  outline-color: #20445a;
  outline-style: solid;
  outline-width: 2px;
}

@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;
  }
}

/* Fixed, frosted navigation: one stable orientation point while the page moves. */
body:has(.site-header) { padding-top: var(--header-height); }
.site-header {
  position: fixed;
  right: 0;
  left: 0;
  background: color-mix(in srgb, var(--header-bg) 66%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
  backdrop-filter: blur(20px) saturate(1.08);
}

/* The home pressure section is a small visual system, not a technical checklist. */
body[data-page="home"] .business-friction {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(78% 64% at 16% 2%, color-mix(in srgb, var(--ice) 8%, transparent), transparent 68%),
    linear-gradient(112deg, color-mix(in srgb, var(--surface) 98%, transparent) 0%, var(--surface) 55%, color-mix(in srgb, var(--bg) 18%, var(--surface)) 100%);
}
.business-visual-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 28px);
}
.business-visual-card {
  min-height: 392px;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--ice) 7%, transparent), transparent 46%),
    var(--surface-2);
  box-shadow: 0 18px 34px -30px rgba(0, 0, 0, 0.62);
}
.business-visual {
  position: relative;
  height: 134px;
  display: grid;
  place-items: center;
  margin-bottom: 32px;
  overflow: hidden;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
}
.business-visual::before,
.business-visual::after,
.business-visual i {
  position: absolute;
  display: block;
  height: 1px;
  background: color-mix(in srgb, var(--ice) 52%, transparent);
  content: "";
}
.business-visual::before { width: 62%; transform: rotate(-23deg); }
.business-visual::after { width: 42%; transform: rotate(23deg); }
.business-visual i:nth-child(1) { width: 29%; transform: translateY(-24px); }
.business-visual i:nth-child(2) { width: 46%; transform: translateY(24px); }
.business-visual i:nth-child(3) {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 12px color-mix(in srgb, var(--signal) 68%, transparent);
}
.business-visual b {
  position: relative;
  z-index: 1;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  color: var(--text);
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.15em;
}
.business-visual-card--team .business-visual::before { transform: rotate(0) translateY(-21px); }
.business-visual-card--team .business-visual::after { transform: rotate(0) translateY(21px); }
.business-visual-card--clarity .business-visual::before { width: 52%; transform: rotate(-34deg); }
.business-visual-card--clarity .business-visual::after { width: 52%; transform: rotate(34deg); }
.business-visual-card--scope .business-visual::before { width: 58%; transform: rotate(0) translateY(-18px); }
.business-visual-card--scope .business-visual::after { width: 34%; transform: rotate(0) translateY(18px); }
.business-visual-card--focus .business-visual::before { width: 62%; transform: rotate(-15deg); }
.business-visual-card--focus .business-visual::after { width: 30%; transform: rotate(15deg); }
.business-visual-card--specialists .business-visual::before { width: 50%; transform: rotate(0) translateY(-16px); }
.business-visual-card--specialists .business-visual::after { width: 50%; transform: rotate(0) translateY(16px); }
.business-visual-card--result .business-visual::before { width: 48%; transform: rotate(-28deg); }
.business-visual-card--result .business-visual::after { width: 48%; transform: rotate(28deg); }
.business-visual-card--predictable .business-visual::before { width: 58%; transform: rotate(0); }
.business-visual-card--predictable .business-visual::after { width: 7px; height: 7px; border-radius: 50%; transform: translateX(42px); }
.business-visual-card--business-time { grid-column: 1 / -1; min-height: 278px; }
.business-visual-card--business-time h3 { max-width: 17ch; }
.business-visual-card--business-time .business-visual::before { width: 70%; transform: rotate(-12deg); }
.business-visual-card--business-time .business-visual::after { width: 38%; transform: rotate(12deg); }
.business-visual-card--control .business-visual::before { width: 54%; transform: rotate(0); }
.business-visual-card--control .business-visual::after { width: 7px; height: 7px; border-radius: 50%; transform: translateX(-38px); }
.business-visual-card h3 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(23px, 2.3vw, 32px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.052em;
}
.business-visual-card p {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.48;
}
.business-visual-card .text-link { margin-top: auto; align-self: flex-start; }
html[data-theme="light"] .business-visual-card {
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--ice) 11%, transparent), transparent 46%),
    color-mix(in srgb, white 20%, var(--surface-2));
}
html[data-theme="light"] .business-visual {
  background: color-mix(in srgb, white 22%, var(--bg));
}
@media (max-width: 760px) {
  .business-visual-grid { grid-template-columns: 1fr; gap: 16px; }
  .business-visual-card { min-height: 0; }
  .business-visual-card--business-time { grid-column: auto; }
  .business-visual { height: 116px; margin-bottom: 24px; }
}

@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 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-text);
  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-text);
}
.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-text);
  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-text);
}
html[data-theme="light"] .generoy-reference-copy h2 span {
  color: var(--copper-text);
}

@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. */
#business-audit .pricing-process-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
#business-audit .plan-note {
  color: var(--muted);
  font-size: 0.875rem;
}
@media (max-width: 860px) {
  #business-audit .pricing-process-grid {
    grid-template-columns: 1fr;
  }
}

.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-text);
  -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-text);
  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-text);
}
.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-text);
}
.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-text);
  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-text);
}
.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-text);
}
.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-text);
  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-text);
  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-text);
  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-text);
}
.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-text);
  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-text);
  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-accent-text: var(--proof-accent);
}

.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: 90%;
  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-text);
}
.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-text);
}

.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-text);
  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-text) !important;
}
.proof-passport .passport-main {
  padding: 30px 30px 29px;
}
.passport-identity {
  display: grid;
  gap: 4px;
}
.proof-passport .passport-id {
  color: var(--proof-accent-text);
}
.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-text);
}
.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);
  --proof-accent-text: var(--copper-text);
}
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-text);
}

/* 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% - 70px), 330px);
  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 4px rgba(0, 0, 0, 0.2));
}
html[data-theme="dark"] .systems-orbit-track {
  border-color: transparent;
}
html[data-theme="dark"] .system-orbit-node img {
  filter: drop-shadow(0 2px 5px rgba(205, 235, 255, 0.26));
}
/* 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 5px rgba(205, 235, 255, 0.26));
}
.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 5px rgba(205, 235, 255, 0.26));
}
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-text);
}
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-text);
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.agent-bank-start-grid h3 {
  margin: 0 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: repeat(2, minmax(0, 1fr));
}
.agent-bank-card {
  min-width: 0;
  padding: clamp(25px, 3vw, 36px);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.agent-bank-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  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;
  overflow-wrap: anywhere;
}
.agent-bank-code {
  margin-top: 3px;
  color: var(--quiet);
  min-width: 76px;
  text-align: left;
}
.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: auto 0 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-text);
  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;
  overflow-wrap: anywhere;
}
.agent-bank-card--active {
  cursor: pointer;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.agent-bank-card--active:hover,
.agent-bank-card--active:focus-visible {
  border-color: var(--signal);
  box-shadow: 0 12px 28px rgba(11, 15, 19, 0.12);
  outline: none;
  transform: translateY(-3px);
}
.agent-bank-card-action {
  display: inline-flex;
  width: fit-content;
  margin-top: 20px;
  color: var(--text);
  font: 700 11px/1.2 var(--mono);
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}
.agent-bank-card-action:hover,
.agent-bank-card-action:focus-visible {
  color: var(--signal-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.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-text);
}

/* One standard overview card on desktop. Detailed role records below remain
   unconstrained so no buyer-facing information is hidden or truncated. */
@media (min-width: 641px) {
  .agent-bank-card {
    min-height: 590px;
  }
  .agent-bank-card-head {
    min-height: 98px;
  }
  .agent-bank-summary {
    min-height: 68px;
  }
}

/* Detailed public Agent Bank records. These are scope records, not a product
   dashboard: dense enough for a buyer to compare roles without suggesting that
   a credential, integration or autonomous action already exists. */
.agent-passport-directory {
  border-top: 1px solid var(--line);
}
.agent-passport-list {
  display: grid;
  gap: 12px;
  margin-top: 38px;
}
.agent-passport-loading {
  margin: 0;
  color: var(--muted);
}
.agent-passport-detail {
  padding: clamp(24px, 3.2vw, 38px);
  border: 1px solid var(--line-strong);
  background: var(--surface);
}
.agent-passport-detail > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.agent-passport-detail .agent-bank-code {
  min-width: 74px;
  margin: 5px 0 0;
  text-align: left;
}
.agent-passport-status {
  margin: 0 0 7px;
  color: var(--signal-text);
  font: 700 9px/1.35 var(--mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.agent-passport-detail h3 {
  margin: 0;
  font-size: clamp(25px, 3.1vw, 40px);
  font-weight: 590;
  line-height: 0.98;
  letter-spacing: -0.056em;
}
.agent-passport-detail .proof-chip {
  margin-top: 1px;
}
.agent-passport-summary {
  max-width: 760px;
  margin: 22px 0 26px;
  color: var(--text);
  font-size: 18px;
  font-weight: 520;
  line-height: 1.35;
  letter-spacing: -0.024em;
}
.agent-product-overview {
  max-width: 920px;
  margin: 0 0 26px;
  padding: 19px 20px 20px;
  border-left: 3px solid var(--signal);
  background: color-mix(in srgb, var(--surface) 86%, var(--paper));
}
.agent-product-overview h4 {
  margin: 0 0 10px;
  color: var(--signal-text);
  font: 700 9px/1.35 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.agent-product-overview p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.agent-product-overview p + p {
  margin-top: 9px;
}
.agent-passport-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.agent-passport-grid section {
  min-width: 0;
  padding: 18px 20px 21px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.agent-passport-grid .agent-passport-source {
  grid-column: 1 / -1;
  background: color-mix(in srgb, var(--surface) 88%, var(--paper));
}
.agent-passport-grid h4 {
  margin: 0 0 12px;
  color: var(--signal-text);
  font: 700 9px/1.35 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.agent-passport-grid p,
.agent-passport-grid ul,
.agent-passport-detail footer p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.52;
}
.agent-passport-grid ul {
  padding-left: 17px;
}
.agent-passport-grid li + li {
  margin-top: 5px;
}
.agent-passport-detail footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 19px;
}
.agent-passport-detail footer strong {
  color: var(--text);
}
html[data-theme="light"] .agent-passport-detail {
  background: rgba(255, 255, 255, 0.18);
}
html[data-theme="light"] .agent-passport-status,
html[data-theme="light"] .agent-passport-grid h4,
html[data-theme="light"] .agent-product-overview h4 {
  color: var(--copper-text);
}
html[data-theme="light"] .agent-product-overview {
  border-color: var(--copper);
}

/* Individual public Passport pages: read-only role records, not account or
   activation screens. */
.agent-profile-page { padding-top: 142px; padding-bottom: 92px; }
.agent-profile-hero { max-width: 950px; padding-bottom: 46px; border-bottom: 1px solid var(--line); }
.agent-profile-hero .text-link { display: inline-block; margin-bottom: 34px; }
.agent-profile-kicker { display: flex; align-items: center; gap: 12px; }
.agent-profile-kicker .agent-bank-code { margin: 0; }
.agent-profile-hero h1 { max-width: 850px; margin: 12px 0 18px; font-size: clamp(44px, 6.4vw, 82px); font-weight: 570; line-height: 0.92; letter-spacing: -0.07em; }
.agent-profile-hero > p:last-child { max-width: 770px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.5; }
.agent-profile-passport { display: grid; grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr); gap: 28px; margin-top: 36px; padding: 28px; border: 1px solid var(--line-strong); background: var(--surface); }
.agent-profile-passport h2, .agent-profile-grid h2, .agent-profile-boundary h2, .agent-profile-not-found h1 { margin: 0; font-size: clamp(25px, 3.1vw, 42px); font-weight: 570; line-height: 0.98; letter-spacing: -0.055em; }
.agent-profile-passport dl { margin: 0; border-top: 1px solid var(--line); }
.agent-profile-passport dl > div { display: grid; grid-template-columns: minmax(120px, 0.5fr) minmax(0, 1fr); gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.agent-profile-passport dt, .agent-profile-grid h2, .agent-profile-boundary .kicker { color: var(--signal-text); font: 700 9px/1.35 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.agent-profile-passport dd { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.48; }
.agent-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.agent-profile-grid section { min-width: 0; padding: 22px 24px 25px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.agent-profile-grid h2 { margin-bottom: 12px; }
.agent-profile-grid p, .agent-profile-grid ul, .agent-profile-boundary p, .agent-profile-not-found p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.agent-profile-grid ul { padding-left: 18px; }
.agent-profile-grid li + li { margin-top: 6px; }
.agent-profile-boundary, .agent-profile-not-found { max-width: 900px; margin-top: 36px; padding: 30px; border-left: 3px solid var(--signal); background: color-mix(in srgb, var(--surface) 86%, var(--paper)); }
.agent-profile-boundary .kicker { margin-bottom: 12px; }
.agent-profile-boundary h2 { margin-bottom: 14px; }
.agent-profile-not-found { margin-top: 0; }
.agent-profile-not-found h1 { margin: 10px 0 16px; }
.agent-profile-not-found .btn { display: inline-flex; margin-top: 22px; }
html[data-theme="light"] .agent-profile-passport { background: rgba(255, 255, 255, 0.18); }
html[data-theme="light"] .agent-profile-passport dt, html[data-theme="light"] .agent-profile-grid h2, html[data-theme="light"] .agent-profile-boundary .kicker { color: var(--copper-text); }

@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: 0;
  }
  .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;
    min-width: 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;
  }
  .agent-passport-detail > header {
    grid-template-columns: 1fr auto;
    gap: 11px;
  }
  .agent-passport-detail .agent-bank-code {
    grid-column: 1 / -1;
    min-width: 0;
  }
  .agent-passport-summary {
    margin: 19px 0 22px;
    font-size: 16px;
  }
  .agent-product-overview {
    margin-bottom: 22px;
    padding: 17px 17px 18px;
  }
  .agent-passport-grid,
  .agent-passport-detail footer {
    grid-template-columns: 1fr;
  }
  .agent-passport-detail footer {
    gap: 11px;
  }
  .agent-profile-page { padding-top: 112px; padding-bottom: 62px; }
  .agent-profile-passport,
  .agent-profile-grid { grid-template-columns: 1fr; }
  .agent-profile-passport { gap: 22px; padding: 22px 20px; }
  .agent-profile-passport dl > div { grid-template-columns: 1fr; gap: 5px; }
  .agent-profile-grid section { padding: 20px; }
  .agent-profile-hero h1 { font-size: clamp(43px, 12vw, 62px); }
}

/* 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(280px, calc(100vw - 32px));
  padding: 14px;
  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.35;
  text-align: center;
}
.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;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
  margin-top: 12px;
}
.site-analytics-consent button {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
.site-analytics-choice {
  flex: 1 1 auto;
  border: 1px solid #8fd3ff;
  background: #26313a;
  color: #e2e7ea;
  box-shadow: none;
}
.site-analytics-close {
  position: absolute;
  top: 4px;
  right: 5px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ec5d61;
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
}
.site-analytics-close:hover,
.site-analytics-close:focus-visible { color: #ff7b7f; outline: none; }
.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;
    box-sizing: border-box;
    padding: 12px 32px;
  }
}
.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);
  }
}

/* Header follows the action-control depth; the compact review message is centred. */
.site-header {
  box-shadow:
    0 3px 5px -2px rgba(103, 120, 132, 0.42),
    0 12px 24px -8px rgba(78, 96, 108, 0.68);
}
html[data-theme="light"] .site-header {
  box-shadow:
    0 3px 5px -3px rgba(5, 8, 11, 0.24),
    0 8px 18px -7px rgba(5, 8, 11, 0.32);
}
@media (max-width: 600px) {
  body[data-page="home"] .announcement-inner {
    justify-content: center;
    padding-inline: 36px;
    text-align: center;
  }
  body[data-page="home"] .announcement-close {
    position: absolute;
    right: max(14px, env(safe-area-inset-right));
  }
}

/* Refined header depth and consent close placement for the isolated home. */
.site-header {
  box-shadow:
    0 2px 3px -2px rgba(103, 120, 132, 0.22),
    0 7px 14px -10px rgba(78, 96, 108, 0.36);
}
html[data-theme="light"] .site-header {
  border-bottom-color: transparent;
  box-shadow: 0 3px 8px -8px rgba(5, 8, 11, 0.18);
}
.site-analytics-close {
  top: 8px;
  right: 8px;
}

/* One business pressure at a time. Each card moves through the viewport, and
   the full-height next scene covers the prior one before it can show through. */
body[data-page="home"] .business-visual-grid {
  display: block;
  max-width: 980px;
  margin-inline: auto;
  padding-bottom: clamp(42px, 7vw, 84px);
}
body[data-page="home"] .business-visual-card {
  --business-card-tone: var(--surface-2);
  position: sticky;
  top: calc(var(--header-height) + clamp(34px, 5.5vh, 62px));
  z-index: 1;
  /* Keep a visible page ground above and below each scene. */
  min-height: clamp(430px, 68svh, 548px);
  margin: 0;
  padding: clamp(32px, 5vw, 64px);
  border-color: color-mix(in srgb, var(--line-strong) 62%, transparent);
  /* Nearly square corners keep the photographic cards precise and architectural. */
  border-radius: 6px;
  isolation: isolate;
  background:
    radial-gradient(95% 84% at 10% 0%, color-mix(in srgb, var(--ice) 8%, transparent), transparent 66%),
    var(--business-card-tone);
  box-shadow:
    0 18px 42px -30px rgba(0, 0, 0, 0.40),
    0 8px 20px -18px rgba(0, 0, 0, 0.22);
}
html[data-theme="light"] body[data-page="home"] .business-visual-card {
  box-shadow: 0 8px 14px -12px rgba(38, 52, 61, 0.16);
}
body[data-page="home"] .business-visual-card + .business-visual-card {
  /* A generous hand-off keeps the deck paced rather than card-on-card. */
  margin-top: clamp(132px, 18vh, 224px);
}
body[data-page="home"] .business-visual-card:nth-child(1) { --business-card-tone: #10151B; }
body[data-page="home"] .business-visual-card:nth-child(2) { --business-card-tone: #121920; }
body[data-page="home"] .business-visual-card:nth-child(3) { --business-card-tone: #141D25; }
body[data-page="home"] .business-visual-card:nth-child(4) { --business-card-tone: #172129; }
body[data-page="home"] .business-visual-card:nth-child(5) { --business-card-tone: #1A252E; }
body[data-page="home"] .business-visual-card:nth-child(6) { --business-card-tone: #1D2933; }
body[data-page="home"] .business-visual-card:nth-child(7) { --business-card-tone: #202D37; }
body[data-page="home"] .business-visual-card:nth-child(8) { --business-card-tone: #22303A; }
body[data-page="home"] .business-visual-card:nth-child(9) { --business-card-tone: #24323C; }
body[data-page="home"] .business-visual-card:nth-child(10) { --business-card-tone: #26313A; }
html[data-theme="light"] body[data-page="home"] .business-visual-card:nth-child(1) { --business-card-tone: #D3DCE0; }
html[data-theme="light"] body[data-page="home"] .business-visual-card:nth-child(2) { --business-card-tone: #D6DFE3; }
html[data-theme="light"] body[data-page="home"] .business-visual-card:nth-child(3) { --business-card-tone: #D9E2E6; }
html[data-theme="light"] body[data-page="home"] .business-visual-card:nth-child(4) { --business-card-tone: #DCE5E8; }
html[data-theme="light"] body[data-page="home"] .business-visual-card:nth-child(5) { --business-card-tone: #DFE8EB; }
html[data-theme="light"] body[data-page="home"] .business-visual-card:nth-child(6) { --business-card-tone: #E2EBED; }
html[data-theme="light"] body[data-page="home"] .business-visual-card:nth-child(7) { --business-card-tone: #E5EDF0; }
html[data-theme="light"] body[data-page="home"] .business-visual-card:nth-child(8) { --business-card-tone: #E8EFF1; }
html[data-theme="light"] body[data-page="home"] .business-visual-card:nth-child(9) { --business-card-tone: #EAF0F2; }
html[data-theme="light"] body[data-page="home"] .business-visual-card:nth-child(10) { --business-card-tone: #EDF1F3; }
body[data-page="home"] .business-visual-card .business-visual {
  display: block;
  height: auto;
  margin: 0 0 clamp(36px, 6vw, 66px);
  overflow: visible;
  border-radius: 0;
  background: transparent;
}
body[data-page="home"] .business-visual-card .business-visual::before,
body[data-page="home"] .business-visual-card .business-visual::after,
body[data-page="home"] .business-visual-card .business-visual i {
  display: none;
}
body[data-page="home"] .business-visual-card .business-visual b {
  display: inline-block;
  padding: 0;
  background: transparent;
  color: var(--ice);
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.17em;
}
body[data-page="home"] .business-card-icon {
  position: absolute;
  top: clamp(27px, 4vw, 42px);
  right: clamp(24px, 4vw, 44px);
  display: grid;
  width: clamp(26.75px, 2.782vw, 36.38px);
  height: clamp(26.75px, 2.782vw, 36.38px);
  place-items: center;
  color: var(--ice);
  opacity: 0.9;
}

/* Home opening: a quiet directional pool of light, fading into the graphite field. */
html:not([data-theme="light"]) body[data-page="home"] .hero {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(82% 92% at 86% 84%, rgba(154, 183, 203, 0.18) 0%, rgba(72, 94, 108, 0.11) 36%, transparent 74%),
    linear-gradient(112deg, transparent 0 46%, rgba(132, 158, 174, 0.075) 62%, transparent 82%);
}
html:not([data-theme="light"]) body[data-page="home"] .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 15, 19, 0.22) 0%, transparent 42%, rgba(11, 15, 19, 0.38) 100%),
    linear-gradient(0deg, rgba(11, 15, 19, 0.18) 0%, transparent 48%);
}
html:not([data-theme="light"]) body[data-page="home"] .hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -24%;
  bottom: -28%;
  width: 94%;
  height: 78%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(180, 207, 220, 0.16) 0%, rgba(106, 132, 147, 0.09) 38%, transparent 72%);
  filter: blur(18px);
}
html:not([data-theme="light"]) body[data-page="home"] .hero-copy {
  position: relative;
  z-index: 1;
}

body[data-page="home"] .business-card-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-theme="light"] body[data-page="home"] .business-card-icon {
  color: #0A84FF;
  opacity: 0.9;
}
html[data-theme="light"] body[data-page="home"] .business-visual-card .business-visual b {
  color: #0A84FF;
}
body[data-page="home"] .business-visual-card h3 {
  max-width: 15ch;
  font-size: clamp(42px, 6.1vw, 82px);
  font-weight: 560;
  line-height: 0.93;
  letter-spacing: -0.065em;
}
body[data-page="home"] .business-visual-card p {
  max-width: 54ch;
  margin-top: clamp(24px, 3vw, 34px);
  font-size: clamp(16px, 1.55vw, 20px);
  line-height: 1.42;
}
body[data-page="home"] .business-visual-card .text-link {
  margin-top: auto;
  padding-top: clamp(28px, 4vw, 44px);
  margin-bottom: clamp(14px, 2vw, 28px);
}
body[data-page="home"] .business-visual-card--business-time {
  grid-column: auto;
  min-height: clamp(430px, 68svh, 548px);
}

/* Home ending: show the existing systems scope only once, after all homepage content. */
body[data-page="home"] main {
  display: flex;
  flex-direction: column;
}
body[data-page="home"] .systems-showcase {
  display: block;
  order: 100;
  margin-top: clamp(38px, 7vw, 96px);
}
body[data-page="home"] .systems-showcase-row--shift,
body[data-page="home"] .systems-showcase-row--context {
  display: none;
}

@media (max-width: 760px) {
  body[data-page="home"] .business-visual-grid { padding-bottom: 34px; }
  body[data-page="home"] .business-visual-card,
  body[data-page="home"] .business-visual-card--business-time {
    top: calc(var(--header-height) + 28px);
    min-height: clamp(390px, 66svh, 456px);
    padding: 28px 24px;
    border-radius: 6px;
  }
  body[data-page="home"] .business-visual-card + .business-visual-card { margin-top: clamp(78px, 13vh, 118px); }
  body[data-page="home"] .business-visual-card .business-visual { margin-bottom: 34px; }
  body[data-page="home"] .business-card-icon { top: 28px; right: 24px; width: 29.96px; height: 29.96px; }
  body[data-page="home"] .business-visual-card h3 { max-width: 12ch; font-size: clamp(38px, 12vw, 58px); }
  body[data-page="home"] .business-visual-card p { font-size: 16px; }
  body[data-page="home"] .business-visual-card .text-link { margin-bottom: 18px; }
}

/* Remove visual ruler lines. Information remains grouped by spacing and
   surfaces, while tables and form controls retain their functional borders. */
.motion-stage { border-left: 0; }
.motion-stage::after { display: none; }
.memory-cinema-grid { background-image: none; }
.verification-route li + li,
.evidence-metric + .evidence-metric,
.benefit-card + .benefit-card,
.metric-item,
.role-card,
.passport-access-level,
.passport-standard-facts section + section,
.control-item,
.step-card,
.generoy-capability-grid article:nth-child(3n + 2),
.generoy-capability-grid article:nth-child(3n + 3),
.commercial-scope-flow li + li { border-left: 0; border-right: 0; }
.continuity-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.continuity-divider { display: none; }

/* Home systems ticker: it belongs to the opening field, not to a separate
   strip. Keep one uninterrupted graphite ground and let each mark receive
   only a small, physical-looking lift from its own reflected light. */
html:not([data-theme="light"]) body[data-page="home"] {
  background:
    radial-gradient(92% 900px at 84% 570px, rgba(143, 171, 188, 0.11) 0%, rgba(71, 93, 107, 0.06) 38%, transparent 74%),
    var(--bg);
}
html:not([data-theme="light"]) body[data-page="home"] .hero,
html:not([data-theme="light"]) body[data-page="home"] .business-friction {
  background: transparent;
}
html:not([data-theme="light"]) body[data-page="home"] .hero {
  overflow: visible;
}
html:not([data-theme="light"]) body[data-page="home"] .hero::before {
  background: none;
}
html:not([data-theme="light"]) body[data-page="home"] .hero::after {
  opacity: 0.48;
}
body[data-page="home"] .hero-logo-ticker,
body[data-page="home"] .hero-logo-ticker-viewport {
  background: transparent;
  box-shadow: none;
}
body[data-page="home"] .hero-logo-ticker-list li {
  text-shadow:
    0 1px 1px rgba(255, 255, 255, 0.08),
    0 3px 5px rgba(0, 0, 0, 0.46),
    0 8px 16px rgba(143, 211, 255, 0.10);
}
body[data-page="home"] .hero-logo-ticker-list li::after {
  opacity: 0.52;
  filter: blur(6px);
}
body[data-page="home"] .hero-logo-ticker .integration-mark {
  filter:
    drop-shadow(0 1px 1px rgba(255, 255, 255, 0.10))
    drop-shadow(0 3px 5px rgba(0, 0, 0, 0.54))
    drop-shadow(0 8px 14px rgba(143, 211, 255, 0.12));
}

/* One quiet continuous page ground. Separators made the public pages read as
   technical documentation; hierarchy now comes from spacing, type and the few
   surfaces that carry an actual action or record. The footer remains the only
   deliberate page boundary. */
main {
  --line: transparent;
  background: var(--bg);
}
main > .page-hero,
main > .section,
main > .section.section-soft {
  border-top: 0;
  border-bottom: 0;
  background-color: transparent;
}
.site-header {
  border-bottom-color: transparent;
}
html:not([data-theme="light"]) .site-header {
  box-shadow: 0 12px 28px -24px rgba(143, 211, 255, 0.42);
}
html[data-theme="light"] .site-header {
  box-shadow: 0 12px 28px -24px rgba(16, 21, 27, 0.18);
}

/* Reversible homepage pain-card imagery.
   The body data attribute is the release switch: change "images" to "off"
   in index.html to restore the prior plain-surface deck immediately. */
body[data-page="home"][data-pain-card-media="images"] .business-visual-card {
  --business-card-image: none;
  --business-card-position: center;
  color: #F7FAFC;
  overflow: hidden;
  /* The image is defined by its own rounded edge; no visible frame or
     duplicate outline is added around it. */
  border: 0;
  background-image: var(--business-card-image);
  background-position: var(--business-card-position);
  background-size: cover;
  background-repeat: no-repeat;
  /* Exact dark-theme button lift: cards and primary controls now share one
     depth language, without adding a visible card frame. */
  box-shadow:
    0 3px 2px rgba(89, 108, 120, 0.58),
    0 12px 22px -8px rgba(70, 88, 100, 0.88);
}
body[data-page="home"][data-pain-card-media="images"] .business-visual-card > * {
  position: relative;
  z-index: 1;
}
body[data-page="home"][data-pain-card-media="images"] .business-visual-card > .business-card-icon {
  position: absolute;
  z-index: 2;
  top: clamp(34px, 4.4vw, 52px);
  right: clamp(34px, 4.4vw, 52px);
  color: #E6A18A;
  opacity: 1;
}
body[data-page="home"][data-pain-card-media="images"] .business-visual-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  /* Keep only a narrow contrast reserve under the copy. The photograph itself
     should remain the visible subject of the card, not a dark texture. */
  background:
    linear-gradient(90deg, rgba(7, 11, 15, 0.62) 0%, rgba(7, 11, 15, 0.38) 50%, rgba(7, 11, 15, 0.08) 100%),
    linear-gradient(0deg, rgba(7, 11, 15, 0.36) 0%, rgba(7, 11, 15, 0.01) 58%);
}
/* Each background corresponds to its card's pressure, so the deck reads as
   ten distinct business situations instead of repeating decorative stock. */
body[data-page="home"][data-pain-card-media="images"] .business-visual-card:nth-child(1) {
  --business-card-image: url("/assets/product/pain-office-workflow.jpg");
  --business-card-position: 66% center;
}
body[data-page="home"][data-pain-card-media="images"] .business-visual-card:nth-child(2) {
  --business-card-image: url("/assets/product/pain-tool-overload.jpg");
  --business-card-position: 68% center;
}
body[data-page="home"][data-pain-card-media="images"] .business-visual-card:nth-child(3) {
  --business-card-image: url("/assets/product/pain-specialist-call.jpg");
  --business-card-position: 62% center;
}
body[data-page="home"][data-pain-card-media="images"] .business-visual-card:nth-child(4) {
  --business-card-image: url("/assets/product/pain-scope-control.jpg");
  --business-card-position: 64% center;
}
body[data-page="home"][data-pain-card-media="images"] .business-visual-card:nth-child(5) {
  --business-card-image: url("/assets/product/pain-budget-review.jpg");
  --business-card-position: 66% center;
}
body[data-page="home"][data-pain-card-media="images"] .business-visual-card:nth-child(6) {
  --business-card-image: url("/assets/product/pain-result-briefing.jpg");
  --business-card-position: 64% center;
}
body[data-page="home"][data-pain-card-media="images"] .business-visual-card:nth-child(7) {
  --business-card-image: url("/assets/product/pain-front-desk.jpg");
  --business-card-position: 68% center;
}
body[data-page="home"][data-pain-card-media="images"] .business-visual-card:nth-child(8) {
  --business-card-image: url("/assets/product/pain-workshop-backlog.jpg");
  --business-card-position: center 42%;
}
body[data-page="home"][data-pain-card-media="images"] .business-visual-card:nth-child(9) {
  --business-card-image: url("/assets/product/pain-service-operations.jpg");
  --business-card-position: center 46%;
}
body[data-page="home"][data-pain-card-media="images"] .business-visual-card:nth-child(10) {
  --business-card-image: url("/assets/product/pain-customer-time.jpg");
  --business-card-position: 66% center;
}
body[data-page="home"][data-pain-card-media="images"] .business-visual-card h3,
body[data-page="home"][data-pain-card-media="images"] .business-visual-card p,
body[data-page="home"][data-pain-card-media="images"] .business-visual-card .text-link {
  color: #F7FAFC;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.54);
}
body[data-page="home"][data-pain-card-media="images"] .business-visual-card p {
  color: rgba(247, 250, 252, 0.86);
}
body[data-page="home"][data-pain-card-media="images"] .business-visual-card .business-visual b {
  color: #E6A18A;
  font-size: 12px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.52);
}
body[data-page="home"][data-pain-card-media="images"] .business-visual-card .text-link::after {
  background: currentColor;
}
html[data-theme="light"] body[data-page="home"][data-pain-card-media="images"] .business-visual-card {
  border: 0;
  /* Exact light-theme button shadow; no alternate card-only effect. */
  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"] body[data-page="home"][data-pain-card-media="images"] .business-visual-card .business-visual b {
  color: #E6A18A;
}
html[data-theme="light"] body[data-page="home"][data-pain-card-media="images"] .business-visual-card::before {
  background:
    linear-gradient(90deg, rgba(7, 11, 15, 0.60) 0%, rgba(7, 11, 15, 0.35) 52%, rgba(7, 11, 15, 0.07) 100%),
    linear-gradient(0deg, rgba(7, 11, 15, 0.32) 0%, rgba(7, 11, 15, 0.01) 62%);
}
@media (max-width: 760px) {
  body[data-page="home"][data-pain-card-media="images"] .business-visual-card > .business-card-icon {
    top: 30px;
    right: 30px;
  }
  body[data-page="home"][data-pain-card-media="images"] .business-visual-card {
    background-position: var(--business-card-position);
  }
  body[data-page="home"][data-pain-card-media="images"] .business-visual-card::before {
    background:
      linear-gradient(90deg, rgba(7, 11, 15, 0.67) 0%, rgba(7, 11, 15, 0.32) 100%),
      linear-gradient(0deg, rgba(7, 11, 15, 0.43) 0%, rgba(7, 11, 15, 0.03) 72%);
  }
}

/* Public-site surface alignment: both themes use one continuous, cool ground.
   Content hierarchy comes from type, spacing and a few true actions — not
   alternating white slabs or ornamental frames. */
html[data-theme="light"] {
  --bg: #D8E0E3;
  --surface: #D8E0E3;
  --surface-2: #E1E7E9;
  --panel: #E8EDEE;
  --header-bg: #E1E7E9;
  --line: rgba(16, 21, 27, 0.08);
  --line-strong: rgba(16, 21, 27, 0.15);
}
html:not([data-theme="light"]) {
  --surface-2: #141B21;
  --panel: #202A31;
  --line: rgba(143, 211, 255, 0.10);
  --line-strong: rgba(143, 211, 255, 0.18);
}
html[data-theme="light"] body,
html[data-theme="light"] main,
html[data-theme="light"] main > .section,
html[data-theme="light"] main > .page-hero,
html[data-theme="light"] .page-hero,
html[data-theme="light"] .section-soft {
  background: var(--bg);
}

/* Decorative signal strokes are removed across every public page. Functional
   form, table and focus borders remain outside this selector. */
.announcement strong::before,
.accent-segments::before,
.kicker::before,
.eyebrow > span,
.notice-panel.signal::before,
.role-search-gate::before,
.pricing-hero-note::before,
.passport-boundary::before {
  display: none !important;
}

/* Reading blocks are intentionally frameless, matching the quiet Vercel
   reference. These are non-interactive content surfaces, not inputs/tables. */
main :where(
  .scope-record,
  .decision-card,
  .notice-panel,
  .passport-boundary-record,
  .plain-card,
  .role-detail,
  .safeguard-card,
  .trial-panel,
  .role-match-card,
  .price-card,
  .subscription-card,
  .operating-model-card,
  .agent-bank-card,
  .role-card,
  .step-card
) {
  border-color: transparent;
  box-shadow: none;
}
main :where(.role-card, .step-card, .price-card, .subscription-card) {
  background: transparent;
}