/* /control-layer/ — loaded after the homepage stylesheet; reuses its tokens, nav, buttons, sections and code window. */

.cl-hero .hero-grid { grid-template-columns: .92fr 1.08fr; }
.cl-hero h1 { font-size: clamp(48px, 5vw, 68px); }
.cl-q .question-copy h2 { font-size: clamp(34px, 3.9vw, 52px); }
.cl-foot { margin: 26px 0 0; color: var(--quiet); font: 600 11px/1.7 var(--mono); letter-spacing: .02em; }
.cl-hero .hero-actions { grid-template-columns: auto auto; justify-content: start; }

/* Hero panel: one outbound transaction */
.cl-panel { min-width: 0; padding: 26px; border: 1px solid #2a2d48; border-radius: 22px; background: linear-gradient(160deg, #13152a, #1d1a3d); color: var(--white); box-shadow: 0 30px 80px rgba(19,21,42,.28); }
.cl-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.1); font: 750 10px/1.3 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.cl-live { display: inline-flex; align-items: center; gap: 8px; color: #8be3b8; }
.cl-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4fd295; box-shadow: 0 0 0 4px rgba(79,210,149,.16); }
.cl-flow { display: grid; grid-template-columns: 1fr 34px 1fr; gap: 10px; align-items: stretch; margin-top: 20px; }
.cl-box { min-width: 0; padding: 19px; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: rgba(255,255,255,.035); }
.cl-box.zt { border-color: rgba(139,114,255,.55); background: rgba(85,56,216,.16); }
.cl-box small { display: block; color: #9a9db4; font: 720 9px/1.3 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.cl-box h3 { margin: 12px 0 0; font-family: var(--display); font-size: 21px; line-height: 1.15; }
.cl-box p { margin: 8px 0 0; color: #b9bbcf; font-size: 12px; line-height: 1.5; }
.cl-fields { display: grid; gap: 7px; margin-top: 15px; }
.cl-fields span { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: 9px; background: rgba(255,255,255,.06); color: #dcdded; font: 11px/1.2 var(--mono); }
.cl-fields span::after { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #f2c14e; }
.cl-checks { display: grid; gap: 10px; margin: 15px 0 0; padding: 0; list-style: none; }
.cl-checks li { display: grid; grid-template-columns: 20px 1fr; gap: 9px; align-items: start; color: #dfe0ee; font-size: 12px; line-height: 1.45; }
.cl-checks li::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(79,210,149,.18); color: #8be3b8; font-size: 11px; font-weight: 800; }
.cl-arrow { display: grid; place-items: center; color: #9c8cff; font-size: 22px; }
.cl-rows { display: grid; gap: 8px; margin-top: 14px; }
.cl-row { display: grid; grid-template-columns: 1fr 1.1fr auto; gap: 12px; align-items: center; padding: 13px 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; }
.cl-row strong { font-size: 13px; }
.cl-row span { color: #a8abc1; font-size: 12px; }
.cl-badge { padding: 6px 10px; border-radius: 999px; font: 800 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.cl-badge.ok { background: rgba(79,210,149,.16); color: #8be3b8; }
.cl-badge.lim { background: rgba(242,193,78,.15); color: #f2cd76; }
.cl-badge.no { background: rgba(240,104,104,.16); color: #f39a9a; }
.cl-record { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin-top: 14px; padding: 14px 15px; border-radius: 12px; background: rgba(255,255,255,.06); font: 11px/1.55 var(--mono); }
.cl-record strong { color: var(--white); }
.cl-record span { color: #a8abc1; }

/* Alongside your platform */
.cl-compare { margin-top: 44px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; }
.cl-compare-row { display: grid; grid-template-columns: .7fr 1fr 1fr; }
.cl-compare-row + .cl-compare-row { border-top: 1px solid rgba(255,255,255,.1); }
.cl-compare-row > div { padding: 17px 20px; color: #c7c6d8; font-size: 14px; line-height: 1.5; }
.cl-compare-row > div:first-child { color: #bcb5f8; font: 750 10px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding-top: 20px; }
.cl-compare-row > div:last-child { background: rgba(85,56,216,.16); color: var(--white); }
.cl-compare-row.head > div { color: var(--white); font-weight: 750; font-size: 13px; }
.cl-compare-row.head > div:first-child { color: transparent; }

/* Steps */
.cl-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 46px; }
.cl-step { padding: 24px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.cl-step span { color: var(--purple); font: 750 10px/1 var(--mono); letter-spacing: .09em; }
.cl-step h3 { margin: 14px 0 0; font-family: var(--display); font-size: 23px; }
.cl-step p { margin: 9px 0 0; color: var(--text); font-size: 14px; line-height: 1.55; }
.cl-note { max-width: 820px; margin: 22px 0 0; color: var(--text); font-size: 15px; line-height: 1.6; }
.cl-note strong { color: var(--ink); }

/* Actions */
.cl-actions-sec { background: var(--paper); }
.cl-actions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 46px; }
.cl-action { padding: 22px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.cl-action code { display: inline-block; padding: 6px 9px; border-radius: 7px; background: var(--purple-soft); color: var(--purple-deep); font: 750 12px/1 var(--mono); }
.cl-action p { margin: 13px 0 0; color: var(--text); font-size: 14px; line-height: 1.55; }

/* Evidence */
.cl-evidence { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 46px; }
.cl-ev { padding: 28px; border: 1px solid var(--line); border-radius: 18px; }
.cl-ev.yes { border-color: #d5ddf7; background: var(--blue-soft); }
.cl-ev h3 { margin: 0; font-family: var(--display); font-size: 24px; }
.cl-ev ul { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.cl-ev li { position: relative; padding-left: 20px; color: var(--text); font-size: 15px; line-height: 1.5; }
.cl-ev li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.cl-ev:not(.yes) li::before { background: var(--quiet); }

/* Closing */
.cl-close .contact-grid { grid-template-columns: 1.2fr .8fr; }
.cl-close-actions { display: grid; gap: 12px; justify-items: start; }
.cl-close-actions a.mail { color: #c4c4d6; font-size: 14px; }
.cl-close-actions a.mail:hover { color: var(--white); }

@media (max-width: 1050px) {
  .cl-hero .hero-grid, .cl-close .contact-grid { grid-template-columns: 1fr; }
  .cl-steps, .cl-actions { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .cl-flow { grid-template-columns: 1fr; }
  .cl-arrow { transform: rotate(90deg); height: 28px; }
  .cl-compare-row { grid-template-columns: 1fr; }
  .cl-compare-row.head { display: none; }
  .cl-compare-row > div { padding: 12px 18px; }
  .cl-compare-row > div:first-child { padding-top: 16px; padding-bottom: 4px; }
  .cl-compare-row > div:nth-child(2)::before { content: "Platform: "; color: var(--quiet); }
  .cl-compare-row > div:last-child::before { content: "ZTroven: "; color: #bcb5f8; }
  .cl-evidence { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cl-panel { padding: 16px; border-radius: 16px; }
  .cl-panel-head { flex-direction: column; align-items: start; }
  .cl-row { grid-template-columns: 1fr auto; }
  .cl-row span { grid-column: 1 / -1; grid-row: 2; }
  .cl-record { grid-template-columns: 1fr; gap: 6px; }
  .cl-steps, .cl-actions { grid-template-columns: 1fr; }
  .cl-hero .hero-actions { grid-template-columns: 1fr; }
}