/* CShark shared styles 3/3; ordered cascade. */
@keyframes profile-scheme-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.project-delivery { background: #f1f2e8; }
.equipment-delivery-track { margin: 0; padding: 0; border-top: 1px solid var(--ink); list-style: none; }
.equipment-delivery-track li { min-height: 166px; display: grid; grid-template-columns: 64px minmax(250px, .55fr) minmax(360px, 1fr) 160px; gap: 28px; align-items: center; border-bottom: 1px solid var(--line); }
.equipment-delivery-track li > span { color: var(--cyan-dark); font-family: var(--font-mono); font-size: 10px; }
.equipment-delivery-track strong { font-size: 21px; }
.equipment-delivery-track p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.equipment-delivery-track small { color: #596a70; font-family: var(--font-mono); font-size: 8px; text-align: right; text-transform: uppercase; }
.engineering-deliverables { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 70px; border-top: 1px solid #becbc8; border-left: 1px solid #becbc8; }
.engineering-deliverables > div { min-height: 160px; display: grid; grid-template-columns: 40px 1fr; align-content: center; column-gap: 12px; padding: 22px; background: rgba(255,255,255,.55); border-right: 1px solid #becbc8; border-bottom: 1px solid #becbc8; }
.engineering-deliverables svg { grid-row: 1 / 3; width: 27px; color: var(--cyan-dark); }
.engineering-deliverables strong { font-size: 14px; }
.engineering-deliverables span { margin-top: 7px; color: var(--muted); font-family: var(--font-mono); font-size: 8px; }

.capability-detail-link { display: inline-flex; align-items: center; gap: 7px; color: var(--cyan-dark); font-size: 10px; font-weight: 800; text-decoration: none; }
.capability-detail-link svg { width: 14px; }

@media (max-width: 1180px) {
  .equipment-page .inner-hero-layout { grid-template-columns: 1fr 1fr; gap: 38px; }
  .equipment-ledger-row { grid-template-columns: 42px 40px minmax(300px, 1fr) minmax(260px, .75fr); gap: 18px; }
  .entry-display-feature { grid-template-columns: 1fr; }
  .entry-display-copy { max-width: 720px; }
  .display-variants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .camera-environment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .camera-layout { grid-template-columns: 1fr; }
  .f4a-product-layout { grid-template-columns: minmax(380px, .85fr) minmax(400px, 1.15fr); }
  .f4a-product-copy { padding: 38px; }
  .f4a-product-copy h3 { font-size: 37px; }
  .f4a-coverage-layout { gap: 38px; }
  .f4a-system-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .f4a-system-flow > svg { display: none; }
  .cabinet-rack,
  .platform-flow,
  .power-backbone > div { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cabinet-rack > svg,
  .platform-flow > svg,
  .power-backbone > div > svg { display: none; }
  .cabinet-rack > div,
  .platform-flow > div,
  .power-backbone > div > span { min-width: 0; }
}

@media (max-width: 980px) {
  .equipment-page .inner-hero-layout { grid-template-columns: 1fr; }
  .equipment-page .inner-hero h1 { font-size: 50px; }
  .equipment-ledger-row { grid-template-columns: 42px 38px 1fr; padding: 28px 0; }
  .equipment-ledger-row > span { padding-top: 5px; }
  .equipment-ledger-row ul { grid-column: 3; }
  .camera-environment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f4a-product-layout { grid-template-columns: 1fr; row-gap: 32px; }
  .f4a-product-visual { min-height: 620px; }
  .f4a-coverage-layout { grid-template-columns: 1fr; gap: 44px; }
  .f4a-coverage-copy { display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px; }
  .f4a-coverage-copy .section-kicker,
  .f4a-coverage-copy h3,
  .f4a-coverage-copy > p { grid-column: 1 / -1; }
  .f4a-status-legend { align-self: start; }
  .f4a-event-sequence { margin-top: 30px; }
  .f4a-spec-heading { grid-template-columns: 1fr; gap: 22px; }
  .f4a-common-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f4a-common-specs span:nth-child(3) { border-left: 0; border-top: 1px solid var(--line-dark-strong); }
  .f4a-common-specs span:nth-child(4) { border-top: 1px solid var(--line-dark-strong); }
  .topology-nodes,
  .core-rack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topology-node + .topology-node,
  .core-rack-grid > div + div { border-left: 0; }
  .topology-node:nth-child(even),
  .core-rack-grid > div:nth-child(even) { border-left: 1px solid #263a43; }
  .topology-node,
  .core-rack-grid > div { border-bottom: 1px solid #263a43; }
  .cabinet-rack,
  .platform-flow,
  .power-backbone > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equipment-profile-stage { grid-template-columns: 1fr; }
  .equipment-delivery-track li { grid-template-columns: 48px minmax(220px, .7fr) minmax(300px, 1.3fr); }
  .equipment-delivery-track small { grid-column: 2 / -1; text-align: left; }
}

@media (max-width: 820px) {
  .f4a-spec-table-wrap { margin-right: 0; overflow: visible; border: 0; }
  .f4a-spec-table { min-width: 0; display: block; font-size: 12px; }
  .f4a-spec-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .f4a-spec-table tbody { display: grid; gap: 12px; }
  .f4a-spec-table tbody tr { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line-dark-strong); }
  .f4a-spec-table tbody th { grid-column: 1 / -1; width: auto; padding: 12px 14px; color: var(--white); background: #17252b; border-bottom: 1px solid var(--line-dark-strong); font-size: 8px; }
  .f4a-spec-table tbody td { min-width: 0; min-height: 96px; display: grid; align-content: start; gap: 8px; padding: 14px; overflow-wrap: anywhere; background: rgba(29,31,25,.68); border-bottom: 0; font-size: 12px; line-height: 1.5; }
  .f4a-spec-table tbody td::before { content: "CShark SPC"; color: var(--cyan); font-family: var(--font-mono); font-size: 7px; font-weight: 700; }
  .f4a-spec-table tbody td:nth-of-type(2)::before { content: "CShark DSPC"; }
  .f4a-spec-table tbody tr:last-child th { border-bottom: 1px solid var(--line-dark-strong); }
}

@media (max-width: 680px) {
  .equipment-page .inner-hero h1 { font-size: 38px; }
  .equipment-page .inner-hero-visual,
  body[data-page="platform"].equipment-page .inner-hero-visual { min-height: 430px; padding: 14px; }
  .equipment-live-topology > div:nth-child(n) { margin-inline: 0; }
  .equipment-live-topology > div { grid-template-columns: 22px 28px minmax(0, 1fr); }
  .equipment-live-topology > .equipment-brand-node { grid-template-columns: 22px 66px minmax(0, 1fr); }
  .equipment-live-topology > .equipment-brand-node > .ui-cshark-wordmark { width: 62px; height: 35px; }
  .equipment-live-topology b { display: none; }
  .equipment-ledger-row { min-height: 0; grid-template-columns: 30px 28px 1fr; gap: 12px; padding: 25px 0; }
  .equipment-ledger-row > svg { width: 23px; height: 23px; }
  .equipment-ledger-row h3 { font-size: 20px; }
  .equipment-ledger-row p { font-size: 12px; }
  .equipment-ledger-row ul { grid-column: 2 / -1; }
  .entry-display-feature { gap: 30px; margin-top: 26px; padding: 22px 0 54px; }
  .entrance-led-sign { min-height: 0; padding: 14px; border-width: 7px; }
  .entrance-led-sign__topline { align-items: flex-start; font-size: 7px; }
  .entrance-led-sign__summary { gap: 12px; padding: 26px 0 20px; }
  .entrance-led-sign__summary div { display: grid; gap: 8px; }
  .entrance-led-sign__summary small { max-width: 112px; font-size: 13px; }
  .entrance-led-sign__summary strong { font-size: 66px; }
  .entrance-led-sign__summary > span { padding: 8px; font-size: 8px; }
  .entrance-led-sign__levels > div { grid-template-columns: 46px 1fr 54px; min-height: 82px; padding: 10px; }
  .entrance-led-sign__levels strong { font-size: 24px; }
  .entrance-led-sign__levels span { font-size: 9px; }
  .entrance-led-sign__levels b { font-size: 34px; }
  .entrance-led-sign__levels small { grid-row: 2; justify-self: start; margin-top: 7px; padding: 4px 6px; font-size: 7px; }
  .entrance-led-sign__levels small:first-of-type { grid-column: 2; }
  .entrance-led-sign__levels small:last-of-type { grid-column: 3; }
  .entrance-led-sign__footer { align-items: flex-start; font-size: 7px; }
  .entrance-led-sign__footer b { max-width: 190px; text-align: right; }
  .display-variants-heading { align-items: flex-start; flex-direction: column; padding: 48px 0 22px; }
  .display-variants { grid-template-columns: 1fr; }
  .display-variants article { min-height: 330px; }
  .camera-copy h2 { font-size: 35px; }
  .camera-rules span { grid-template-columns: 25px 80px 1fr; }
  .camera-variants { grid-template-columns: 1fr; }
  .camera-environment-grid { grid-template-columns: 1fr; }
  .camera-environment-grid article { min-height: 190px; }
  .camera-variants article { min-height: 440px; }
  .f4a-product-layout { min-height: 0; }
  .f4a-product-visual { min-height: 490px; }
  .f4a-product-visual > img { width: min(84%, 390px); }
  .f4a-product-visual figcaption { right: auto; bottom: 10px; left: 0; min-height: 56px; padding: 0; }
  .f4a-product-visual figcaption strong { font-size: 15px; }
  .f4a-orbit-one { width: 340px; height: 340px; }
  .f4a-orbit-two { width: 410px; height: 410px; }
  .f4a-product-copy { padding: 34px 0; }
  .f4a-product-copy h3 { font-size: 31px; }
  .f4a-primary-metrics > div { min-height: 92px; padding: 13px; }
  .f4a-primary-metrics strong { font-size: 24px; }
  .f4a-function-list { grid-template-columns: 1fr; }
  .f4a-function-list li:nth-child(odd) { border-right: 0; }
  .f4a-function-list li:nth-child(even) { padding-left: 0; }
  .f4a-coverage-layout { margin-top: 78px; }
  .f4a-coverage-copy { display: block; }
  .f4a-coverage-copy h3 { font-size: 31px; }
  .f4a-space { height: 124px; gap: 6px; }
  .f4a-space > span { top: 8px; left: 8px; font-size: 8px; }
  .f4a-space > svg { width: 35px; height: 35px; }
  .f4a-space > strong { font-size: 8px; }
  .ru-plate { width: 82px; height: 25px; grid-template-columns: 1fr 24px; }
  .ru-plate > b { font-size: 9px; }
  .ru-plate > small { font-size: 6px; }
  .f4a-drive-aisle { height: 152px; }
  .f4a-map-camera { width: 76px; height: 76px; }
  .f4a-map-camera img { width: 61px; height: 61px; }
  .f4a-aisle-label { right: 4px; font-size: 8px; }
  .f4a-board-header, .f4a-board-footer { padding-inline: 2px; font-size: 9px; }
  .f4a-board-header > span { display: none; }
  .f4a-board-live { width: 100%; justify-content: space-between; gap: 6px; }
  .f4a-board-count strong { font-size: 16px; }
  .f4a-board-toggle { width: 25px; height: 25px; }
  .f4a-board-footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 5px; }
  .f4a-specification { margin-top: 78px; padding-top: 40px; }
  .f4a-spec-heading h3 { font-size: 30px; }
  .f4a-common-specs { grid-template-columns: 1fr; }
  .f4a-common-specs span + span { border-top: 1px solid var(--line-dark-strong); border-left: 0; }
  .f4a-common-specs span { min-height: 88px; }
  .f4a-system-flow { grid-template-columns: 1fr; padding: 8px; }
  .f4a-system-flow > div { min-height: 96px; }
  .connection-legend { gap: 12px; }
  .topology-schematic { margin-inline: -10px; padding: 8px; }
  .topology-tier > header { grid-template-columns: 1fr; gap: 7px; padding-block: 14px; }
  .topology-tier > header small { text-align: left; }
  .topology-nodes,
  .core-rack-grid { grid-template-columns: 1fr; }
  .topology-node:nth-child(even),
  .core-rack-grid > div:nth-child(even) { border-left: 0; }
  .topology-node { min-height: 120px; }
  .topology-link { grid-template-columns: 1fr; min-height: 76px; padding: 8px 20px 8px 54%; }
  .topology-link span,
  .topology-link b { padding: 0; text-align: left; }
  .cabinet-rack,
  .platform-flow,
  .power-backbone > div { grid-template-columns: 1fr; }
  .cabinet-rack > div,
  .platform-flow > div { width: 100%; }
  .power-backbone > div { justify-content: stretch; }
  .power-backbone > div > span { min-height: 58px; padding: 10px; border-bottom: 1px solid #a6cf32; }
  .equipment-profile-selector { width: 100%; display: grid; }
  .equipment-profile-copy { padding: 30px 22px; }
  .equipment-profile-copy h3 { font-size: 28px; }
  .profile-scheme-header { min-height: 0; align-items: flex-start; flex-direction: column; padding: 20px; }
  .profile-scheme-header strong { font-size: 16px; }
  .profile-scheme-flow { min-height: 0; grid-template-columns: 1fr; padding: 18px; }
  .profile-scheme-node { min-height: 258px; }
  .profile-scheme-link { min-height: 76px; }
  .profile-scheme-link::before { top: 0; bottom: 0; left: 50%; width: 1px; height: auto; }
  .profile-scheme-link span { position: relative; bottom: auto; width: auto; padding: 4px 8px; background: var(--panel); }
  .profile-scheme-link svg { position: absolute; bottom: 6px; transform: rotate(90deg); }
  .profile-scheme-output > header { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 12px; }
  #profile-scheme-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #profile-scheme-results > div + div { border-left: 0; }
  #profile-scheme-results > div:nth-child(even) { border-left: 1px solid var(--panel-line); }
  #profile-scheme-results > div:nth-child(n + 3) { border-top: 1px solid var(--panel-line); }
  .profile-scheme-facts { grid-template-columns: 1fr; }
  .profile-scheme-facts > div + div { border-top: 1px solid var(--panel-line); border-left: 0; }
  .equipment-delivery-track li { grid-template-columns: 34px 1fr; gap: 12px; padding: 25px 0; }
  .equipment-delivery-track p,
  .equipment-delivery-track small { grid-column: 2; }
  .engineering-deliverables { grid-template-columns: 1fr; margin-top: 48px; }
}

@media (max-width: 359px) {
  .f4a-spec-table tbody tr { grid-template-columns: 1fr; }
  .f4a-spec-table tbody th { grid-column: 1; }
  .f4a-spec-table tbody td + td { border-top: 1px solid var(--line-dark-strong); border-left: 0; }
}

.equipment-page section[id] { scroll-margin-top: calc(var(--header-height) + 72px); }

@media (max-width: 760px) {
  .equipment-section-nav .page-shell {
    min-height: 52px;
    gap: 22px;
  }
  .equipment-section-nav a { font-size: 10px; }
  .equipment-page section[id] { scroll-margin-top: calc(var(--header-height) + 64px); }
}

/* Recalculation of an existing parking project */
.retrofit-project-section {
  padding-block: 118px 132px;
  background: #eef2f0;
  scroll-margin-top: var(--header-height);
}
.retrofit-project-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  gap: 68px;
  align-items: start;
}
.retrofit-project-copy h2 {
  max-width: 820px;
  margin: 14px 0 0;
  font-size: clamp(40px, 4.5vw, 66px);
  line-height: 1.03;
  letter-spacing: 0;
  text-wrap: balance;
}
.retrofit-project-copy > p:not(.section-kicker) {
  max-width: 760px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.72;
}
.retrofit-project-copy ol {
  margin: 42px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.retrofit-project-copy li {
  min-height: 104px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.retrofit-project-copy li > span { color: var(--cyan-dark); font-size: 10px; font-weight: 760; }
.retrofit-project-copy li strong { font-size: 15px; }
.retrofit-project-copy li p { max-width: 660px; margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.retrofit-project-links { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 34px; }
.retrofit-project-links > a:not(.button) { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; text-decoration: none; }
.retrofit-project-links > a:not(.button) svg { width: 16px; height: 16px; }
.retrofit-project-output {
  position: sticky;
  top: calc(var(--header-height) + 28px);
  overflow: hidden;
  color: var(--white);
  background: var(--ink);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
}
.retrofit-project-output > header {
  min-height: 62px;
  display: grid;
  grid-template-columns: 1fr 24px 1fr;
  gap: 12px;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid var(--line-dark);
}
.retrofit-project-output > header span { color: rgba(255,255,255,.48); font-size: 8px; font-weight: 760; }
.retrofit-project-output > header svg { width: 17px; height: 17px; color: var(--cyan); }
.retrofit-project-output > header strong { justify-self: end; color: var(--cyan); font-size: 12px; }
.retrofit-project-doc {
  min-height: 126px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin: 24px;
  padding: 22px;
  background: #171814;
  border: 1px solid var(--panel-line);
  border-radius: 6px;
}
.retrofit-project-doc > svg { width: 32px; height: 32px; color: var(--cyan); }
.retrofit-project-doc span,
.retrofit-project-doc strong,
.retrofit-project-doc small { display: block; }
.retrofit-project-doc span { color: var(--cyan); font-size: 8px; font-weight: 760; }
.retrofit-project-doc strong { margin-top: 5px; font-size: 17px; }
.retrofit-project-doc small { margin-top: 4px; color: rgba(255,255,255,.5); font-size: 9px; }
.retrofit-project-process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 24px 24px;
  border-block: 1px solid var(--line-dark);
}
.retrofit-project-process span { min-height: 66px; display: flex; align-items: center; justify-content: center; gap: 7px; color: rgba(255,255,255,.66); font-size: 9px; }
.retrofit-project-process span + span { border-left: 1px solid var(--line-dark); }
.retrofit-project-process svg { width: 16px; height: 16px; color: var(--cyan); }
.retrofit-project-result { margin: 0 24px; padding: 24px; color: var(--ink); background: var(--cyan); border-radius: 6px; }
.retrofit-project-result span { font-size: 8px; font-weight: 760; }
.retrofit-project-result strong { display: block; margin-top: 7px; font-size: 24px; line-height: 1.12; }
.retrofit-project-result p { margin: 12px 0 0; font-size: 10px; line-height: 1.55; }
.retrofit-project-output > ul { display: grid; gap: 10px; margin: 24px; padding: 0; list-style: none; }
.retrofit-project-output > ul li { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.68); font-size: 10px; }
.retrofit-project-output > ul svg { width: 14px; height: 14px; color: var(--cyan); }

@media (max-width: 1020px) {
  .retrofit-project-layout { grid-template-columns: 1fr; }
  .retrofit-project-output { position: static; }
}

@media (max-width: 680px) {
  .retrofit-project-section { padding-block: 88px 100px; }
  .retrofit-project-copy h2 { font-size: 38px; }
  .retrofit-project-copy li { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding-block: 18px; }
  .retrofit-project-links { align-items: stretch; flex-direction: column; }
  .retrofit-project-links .button { width: 100%; }
  .retrofit-project-doc,
  .retrofit-project-process,
  .retrofit-project-result,
  .retrofit-project-output > ul { margin-inline: 16px; }
  .retrofit-project-output > header { padding-inline: 16px; }
  .retrofit-project-process span { align-items: center; flex-direction: column; gap: 5px; }
}

/* Project design and fast recalculation */
.project-engineering-section {
  padding: 112px 0 124px;
  background: #eef2f0;
  scroll-margin-top: var(--header-height);
}
.project-engineering-section .section-heading { margin-bottom: 50px; }
.project-engineering-section .section-heading h2 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(42px, 4.6vw, 72px);
  line-height: 1.02;
  letter-spacing: 0;
  text-wrap: balance;
}
.project-engineering-section .section-heading > p {
  align-self: end;
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.72;
}
.project-engineering-console {
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(18, 20, 15, .18);
  border-radius: 8px;
  box-shadow: 0 34px 90px rgba(22, 40, 34, .09);
}
.project-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.project-mode-tabs button {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  color: var(--muted);
  background: #f7f9f8;
  border: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 720;
  transition: color 180ms ease, background 180ms ease;
}
.project-mode-tabs button + button { border-left: 1px solid var(--line); }
.project-mode-tabs button svg { width: 18px; height: 18px; }
.project-mode-tabs button:hover { color: var(--ink); background: rgba(201, 245, 74, .24); }
.project-mode-tabs button.active { color: var(--ink); background: var(--cyan); }
.project-engineering-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr);
  align-items: stretch;
}
.project-mode-panels {
  min-width: 0;
  background: var(--white);
}
.project-mode-panels article {
  min-height: 690px;
  padding: 58px 54px 52px;
  animation: projectPanelIn 280ms var(--ease) both;
}
@keyframes projectPanelIn {
  from { opacity: 0; transform: translateY(8px); }
}
.project-panel-index {
  color: var(--cyan-dark);
  font-size: 10px;
  font-weight: 760;
}
.project-mode-panels h3 {
  max-width: 670px;
  margin: 18px 0 0;
  font-size: clamp(30px, 3vw, 45px);
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
}
.project-mode-panels article > p {
  max-width: 700px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.72;
}
.project-calculation-steps {
  margin: 38px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.project-calculation-steps li {
  min-height: 76px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.project-calculation-steps li > span {
  color: var(--cyan-dark);
  font-size: 10px;
  font-weight: 760;
}
.project-calculation-steps strong,
.project-calculation-steps small { display: block; }
.project-calculation-steps strong { font-size: 13px; }
.project-calculation-steps small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.project-panel-result {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 28px;
  padding: 18px;
  color: var(--white);
  background: var(--cyan-dark);
  border-radius: 6px;
}
.project-panel-result > svg { width: 22px; height: 22px; }
.project-panel-result p { margin: 0; }
.project-panel-result strong,
.project-panel-result span { display: block; }
.project-panel-result strong { font-size: 12px; }
.project-panel-result span { margin-top: 4px; color: var(--white); font-size: 10px; line-height: 1.5; }
.project-infrastructure-scheme {
  min-width: 0;
  margin: 0;
  padding: 30px;
  color: var(--white);
  background: var(--ink);
  border-left: 1px solid var(--line-dark);
}
.project-infrastructure-scheme figcaption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-dark);
}
.project-infrastructure-scheme figcaption span { font-size: 11px; font-weight: 760; }
.project-infrastructure-scheme figcaption small { max-width: 190px; color: rgba(255,255,255,.5); font-size: 9px; text-align: right; }
.project-scheme-flow {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: stretch;
  padding: 20px 0;
}
.project-scheme-flow > svg {
  width: 16px;
  height: 22px;
  justify-self: center;
  padding-block: 3px;
  color: var(--cyan);
}
.project-scheme-node {
  position: relative;
  min-height: 108px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  gap: 2px 14px;
  align-content: center;
  padding: 16px 18px;
  background: #171814;
  border: 1px solid var(--panel-line);
  border-radius: 6px;
}
.project-scheme-node > svg,
.project-scheme-node > img {
  grid-row: 1 / 4;
  align-self: center;
}
.project-scheme-node > svg { width: 28px; height: 28px; color: var(--cyan); }
.project-scheme-node > img { width: 44px; height: 28px; object-fit: cover; }
.project-scheme-node span { color: var(--cyan); font-size: 8px; font-weight: 760; }
.project-scheme-node strong { font-size: 15px; }
.project-scheme-node small { color: rgba(255,255,255,.58); font-size: 9px; line-height: 1.45; }
.project-infrastructure-advantage {
  padding: 20px;
  background: var(--cyan);
  border-radius: 6px;
  color: var(--ink);
}
.project-infrastructure-advantage > span { display: flex; align-items: center; gap: 10px; }
.project-infrastructure-advantage svg { width: 19px; height: 19px; }
.project-infrastructure-advantage b { font-size: 12px; }
.project-infrastructure-advantage p { margin: 10px 0 0; font-size: 10px; line-height: 1.55; }
.project-engineering-actions {
  min-height: 86px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding: 18px 28px;
  border-top: 1px solid var(--line);
  background: #f7f9f8;
}
.project-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}
.project-text-link svg { width: 15px; height: 15px; transition: transform 180ms var(--ease); }
.project-text-link:hover svg { transform: translateX(4px); }

@media (max-width: 1080px) {
  .project-engineering-layout { grid-template-columns: 1fr; }
  .project-mode-panels article { min-height: 0; }
  .project-infrastructure-scheme { border-top: 1px solid var(--line-dark); border-left: 0; }
  .project-scheme-flow { grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: center; gap: 8px; }
  .project-scheme-flow > svg { width: 20px; height: 20px; padding: 0; transform: rotate(-90deg); }
  .project-scheme-node { min-height: 170px; grid-template-columns: 1fr; grid-template-rows: 34px auto auto 1fr; gap: 5px; }
  .project-scheme-node > svg,
  .project-scheme-node > img { grid-row: auto; }
}

@media (max-width: 760px) {
  .project-engineering-section { padding: 80px 0 88px; }
  .project-engineering-section .section-heading h2 { font-size: 41px; }
  .project-mode-tabs button { min-height: 70px; padding-inline: 12px; font-size: 11px; }
  .project-mode-panels article { padding: 38px 24px; }
  .project-mode-panels h3 { font-size: 32px; }
  .project-infrastructure-scheme { padding: 24px; }
  .project-scheme-flow { grid-template-columns: 1fr; gap: 0; }
  .project-scheme-flow > svg { transform: none; }
  .project-scheme-node { min-height: 108px; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .project-scheme-node > svg,
  .project-scheme-node > img { grid-row: 1 / 4; }
  .project-engineering-actions { align-items: stretch; flex-direction: column; gap: 14px; padding: 22px; }
  .project-engineering-actions .button { width: 100%; }
}

@media (max-width: 480px) {
  .project-mode-tabs { grid-template-columns: 1fr; }
  .project-mode-tabs button + button { border-top: 1px solid var(--line); border-left: 0; }
  .project-mode-panels article { padding-inline: 20px; }
  .project-calculation-steps li { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
  .project-infrastructure-scheme { padding: 20px; }
  .project-infrastructure-scheme figcaption { align-items: flex-start; flex-direction: column; }
  .project-infrastructure-scheme figcaption small { max-width: none; text-align: left; }
}

/* Organized product navigation */
.desktop-nav-organized {
  gap: 4px;
}
.desktop-nav-organized > .nav-direct,
.nav-cluster > summary {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}
.desktop-nav-organized > .nav-direct::after { display: none; }
.desktop-nav-organized > .nav-direct:hover,
.desktop-nav-organized > .nav-direct.active,
.nav-cluster > summary:hover,
.nav-cluster[open] > summary,
.nav-cluster.is-active > summary {
  color: var(--ink);
  background: var(--cyan);
}
.site-header.scrolled .desktop-nav-organized > .nav-direct:hover,
.site-header.scrolled .desktop-nav-organized > .nav-direct.active,
.site-header.scrolled .nav-cluster > summary:hover,
.site-header.scrolled .nav-cluster[open] > summary,
.site-header.scrolled .nav-cluster.is-active > summary,
.inner-page .desktop-nav-organized > .nav-direct:hover,
.inner-page .desktop-nav-organized > .nav-direct.active,
.inner-page .nav-cluster > summary:hover,
.inner-page .nav-cluster[open] > summary,
.inner-page .nav-cluster.is-active > summary {
  color: var(--white);
  background: var(--cyan-dark);
}
.nav-cluster {
  position: relative;
}
.nav-cluster > summary {
  list-style: none;
}
.nav-cluster > summary::-webkit-details-marker { display: none; }
.nav-cluster > summary svg {
  width: 14px;
  height: 14px;
  transition: transform 180ms var(--ease);
}
.nav-cluster[open] > summary svg { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  width: min(680px, calc(100vw - 48px));
  padding: 10px;
  color: var(--ink);
  background: rgba(247, 249, 248, .98);
  border: 1px solid rgba(18, 20, 15, .18);
  border-radius: 8px;
  box-shadow: 0 26px 70px rgba(16, 17, 15, .18);
  transform: translateX(-50%);
  backdrop-filter: blur(20px);
  animation: navDropdownIn 180ms var(--ease) both;
}
.nav-dropdown-solutions { width: min(560px, calc(100vw - 48px)); }
.nav-dropdown-engineering { width: min(720px, calc(100vw - 48px)); }
.nav-dropdown > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 12px 16px;
  border-bottom: 1px solid var(--line);
}
.nav-dropdown > header span { font-size: 12px; font-weight: 760; }
.nav-dropdown > header small { color: var(--muted); font-size: 10px; }
.nav-dropdown > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  padding-top: 8px;
}
.nav-dropdown a {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 13px 12px;
  border-radius: 6px;
  text-decoration: none;
  transition: color 180ms ease, background 180ms ease, transform 180ms var(--ease);
}
.nav-dropdown a::after { display: none; }
.nav-dropdown a:hover,
.nav-dropdown a.active {
  color: var(--ink);
  background: rgba(201, 245, 74, .46);
  transform: translateY(-1px);
}
.nav-dropdown a > svg {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  color: var(--cyan-dark);
}
.nav-dropdown a span { min-width: 0; }
.nav-dropdown a strong,
.nav-dropdown a small { display: block; }
.nav-dropdown a strong { font-size: 13px; font-weight: 720; line-height: 1.3; }
.nav-dropdown a small { margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 450; line-height: 1.4; }
@keyframes navDropdownIn {
  from { opacity: 0; transform: translate(-50%, -8px); }
}

@media (max-width: 980px) {
  .mobile-nav {
    max-height: calc(100dvh - var(--header-height));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    overflow-y: auto;
    padding-top: 14px;
  }
  .mobile-nav-group {
    padding: 12px 0 16px;
    border-bottom: 1px solid var(--line);
  }
  .mobile-nav-group > span {
    display: block;
    margin-bottom: 6px;
    color: var(--cyan-dark);
    font-size: 10px;
    font-weight: 760;
    text-transform: uppercase;
  }
  .mobile-nav-group > div { display: grid; }
  .mobile-nav .mobile-nav-group a {
    min-height: 36px;
    font-size: 13px;
    font-weight: 620;
  }
  .mobile-nav .mobile-contact-link {
    justify-content: flex-start;
    gap: 9px;
    color: var(--ink);
  }
  .mobile-nav .mobile-contact-link svg {
    width: 16px;
    height: 16px;
    color: var(--cyan-dark);
  }
  .mobile-language-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 12px;
  }
  .mobile-nav .mobile-language-links a {
    min-width: 0;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 14px;
    gap: 6px;
  }
  .mobile-language-links a > span { color: var(--cyan-dark); font-size: 9px; }
  .mobile-language-links a > b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-language-links a > svg { width: 14px; height: 14px; color: var(--cyan-dark); }
  .mobile-nav-cta {
    grid-column: 1 / -1;
    min-height: 46px !important;
    justify-content: space-between;
    margin-top: 14px;
    padding: 0 14px;
    color: var(--white);
    background: var(--ink);
    border-radius: 6px;
  }
  .mobile-nav-cta svg { width: 17px; height: 17px; }
}

@media (max-width: 560px) {
  .mobile-nav { grid-template-columns: 1fr; }
  .mobile-language-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Localized layouts */
html[dir="rtl"] body { direction: rtl; text-align: right; }
html[dir="rtl"] .language-switcher-menu { right: auto; left: 0; }
html[dir="rtl"] .language-switcher-menu a { text-align: right; }
html[dir="rtl"] .nav-dropdown { text-align: right; }
html[dir="rtl"] .nav-dropdown a { grid-template-columns: 28px minmax(0, 1fr); }
html[dir="rtl"] .hero-product-showcase,
html[dir="rtl"] .desktop-product-mockup,
html[dir="rtl"] .mobile-product-mockup,
html[dir="rtl"] .camera-3d-stage,
html[dir="rtl"] .parking-coverage-demo,
html[dir="rtl"] .heatmap-board,
html[dir="rtl"] .architecture-flow,
html[dir="rtl"] .equipment-connection-visual {
  direction: ltr;
  text-align: left;
}
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select { text-align: right; }

/* Main page live scenario */
.hero-conversion {
  min-height: 0;
  overflow: hidden;
}
.hero-conversion .hero-media {
  object-position: 50% center;
  filter: saturate(.84) contrast(1.04);
}
.hero-conversion .hero-shade {
  background:
    linear-gradient(90deg, rgba(8, 15, 20, .97) 0%, rgba(8, 15, 20, .86) 48%, rgba(8, 15, 20, .24) 78%, rgba(8, 15, 20, .08) 100%),
    linear-gradient(0deg, rgba(8, 15, 20, .9) 0%, rgba(8, 15, 20, .06) 58%);
}
.hero-conversion .hero-content {
  min-height: 0;
  padding-top: 116px;
  padding-bottom: 40px;
}
.hero-conversion .hero-copy { width: min(1040px, 100%); }
.hero-conversion-title {
  max-width: 1040px;
  font-size: clamp(48px, 4.15vw, 64px);
  line-height: 1.01;
  text-wrap: balance;
}
.hero-positioning-subtitle {
  max-width: 760px;
  margin: 22px 0 0;
  color: var(--cyan);
  font-size: clamp(18px, 1.55vw, 24px);
  font-weight: 760;
  line-height: 1.25;
  text-wrap: balance;
}
.hero-conversion .hero-lead {
  max-width: 760px;
  margin-top: 16px;
  color: rgba(255, 255, 255, .76);
  font-size: 18px;
  line-height: 1.55;
  text-wrap: pretty;
}
.hero-conversion-actions { margin-top: 24px; }
.hero-conversion-actions .button { min-height: 54px; }
.hero-conversion-actions .button svg { width: 18px; height: 18px; }
.hero-secondary-action {
  color: var(--white);
  background: rgba(8, 20, 27, .66);
  border: 1px solid rgba(255, 255, 255, .24);
  backdrop-filter: blur(16px);
}
.hero-secondary-action:hover { color: var(--ink); background: var(--white); }
.hero-request-action {
  color: var(--ink);
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: 0 14px 42px rgba(0, 0, 0, .16);
}
.hero-request-action:hover {
  color: var(--ink);
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 18px 48px rgba(201, 245, 74, .2);
}

.hero-product-wrap {
  position: relative;
  inset: auto;
  z-index: 6;
  padding-bottom: 74px;
  pointer-events: auto;
}
.hero-product-showcase {
  width: min(1320px, 100%);
  height: 600px;
  overflow: visible;
  border-color: rgba(255, 255, 255, .58);
  box-shadow: 0 40px 120px rgba(2, 9, 14, .5);
}
.hero-product-toolbar {
  height: 68px;
  display: grid;
  grid-template-columns: minmax(190px, .72fr) minmax(390px, 1.2fr) minmax(220px, .82fr);
  padding: 0 16px;
}
.hero-product-brand { min-width: 0; }
.hero-product-brand span { min-width: 0; }
.hero-product-brand small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-scenario-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  background: #132630;
  border: 1px solid #29404a;
  border-radius: 6px;
}
.hero-scenario-switch button {
  min-width: 0;
  min-height: 34px;
  padding: 0 10px;
  overflow: hidden;
  color: #8ea1aa;
  background: transparent;
  border: 0;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, transform 180ms var(--ease);
}
.hero-scenario-switch button:hover { color: var(--white); background: #1b323d; }
.hero-scenario-switch button:active { transform: scale(.98); }
.hero-scenario-switch button.active { color: var(--ink); background: var(--white); }
.hero-product-status { justify-content: flex-end; }
.hero-product-status > span { white-space: nowrap; }
.hero-product-status > button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  color: var(--ink);
  background: var(--cyan);
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms var(--ease), opacity 180ms ease;
}
.hero-product-status > button:hover { background: var(--white); }
.hero-product-status > button:active { transform: scale(.97); }
.hero-product-status > button:disabled { cursor: progress; opacity: .78; }
.hero-product-status > button svg { width: 13px; height: 13px; }
.hero-product-status > button b { font-size: 8px; }
.hero-product-status > button.is-running svg { animation: heroRunPulse 900ms ease-in-out infinite alternate; }
@keyframes heroRunPulse { to { opacity: .35; transform: scale(.72); } }

.hero-product-body {
  height: calc(100% - 68px);
  grid-template-columns: 58px minmax(0, 1fr) 300px;
}
.hero-product-rail { gap: 5px; padding-top: 17px; }
.hero-product-rail button {
  position: relative;
  width: 36px;
  height: 36px;
}
.hero-product-rail button::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 5px;
  background: var(--line);
}
.hero-product-rail button:last-child::after { display: none; }
.hero-product-rail button.complete { color: var(--cyan-dark); background: rgba(201, 245, 74, .26); }
.hero-product-rail button.complete::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 4px;
  height: 4px;
  background: var(--green-dark);
  border-radius: 50%;
}
.hero-product-rail button.active { box-shadow: 0 0 0 3px rgba(201, 245, 74, .2); }
.hero-product-main { padding: 17px; }
.hero-product-heading { min-height: 45px; }
.hero-product-heading h2 {
  max-width: 640px;
  font-size: 20px;
  text-wrap: balance;
}
.hero-product-metrics { margin-top: 8px; }
.hero-product-metrics > div { min-height: 68px; }
.hero-product-metrics > div:nth-child(1) strong { color: var(--green-dark); }
.hero-product-metrics > div:nth-child(3) strong { color: var(--text); }
.hero-product-workspace {
  min-height: 315px;
  grid-template-columns: 154px minmax(0, 1fr);
  margin-top: 9px;
}
.hero-signal-summary {
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  background: var(--white);
  border: 1px solid var(--line);
}
.hero-signal-summary > div {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 7px;
  align-content: center;
  padding: 6px 9px;
  border-bottom: 1px solid var(--line);
  transition: color 240ms ease, background 240ms ease, box-shadow 240ms ease;
}
.hero-signal-summary > div:last-child { border-bottom: 0; }
.hero-signal-summary svg {
  grid-row: 1 / 3;
  align-self: center;
  width: 15px;
  height: 15px;
  color: #90a0a6;
}
.hero-signal-summary span { font-size: 8px; font-weight: 760; }
.hero-signal-summary b {
  min-width: 0;
  overflow: hidden;
  color: #5d6b70;
  font-family: var(--font-mono);
  font-size: 6px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-signal-summary > div.active {
  background: rgba(201, 245, 74, .24);
  box-shadow: inset 3px 0 0 var(--cyan-dark);
}
.hero-signal-summary > div.active svg { color: var(--cyan-dark); animation: heroSignal 620ms ease-in-out infinite alternate; }
.hero-signal-summary > div.complete svg { color: var(--green-dark); }
.hero-signal-summary > div.complete b { color: var(--green-dark); }
@keyframes heroSignal { to { opacity: .45; transform: scale(.9); } }

.hero-preview-map { min-height: 315px; }
.hero-preview-spots { top: 46px; grid-template-rows: repeat(2, 72px); gap: 64px 3px; }
.hero-preview-spots span { transition: color 280ms ease, background 280ms ease, border-color 280ms ease, box-shadow 280ms ease; }
.hero-preview-spots span.occupied-confirmed { background: #dce6e3; border-color: #7d9097; }
.hero-preview-spots span.occupied-confirmed::before { background: #53676f; }
.hero-preview-spots span.violation {
  color: #8b2723;
  background: #ffe3df;
  border: 2px solid #c84b42;
  box-shadow: 0 0 0 4px rgba(200, 75, 66, .12);
}
.hero-preview-spots span.violation::before { background: #7c3430; border-color: #5d2420; }
.hero-preview-aisle {
  top: 119px;
  height: 62px;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  justify-content: stretch;
  gap: 0;
  background: rgba(255, 255, 255, .18);
  border-top: 1px dashed #9eaeaa;
  border-bottom: 1px dashed #9eaeaa;
}
.hero-preview-lane-divider {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  z-index: 1;
  border-top: 1px dashed rgba(100, 122, 129, .62);
  transform: translateY(-.5px);
}
.hero-preview-flow {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 4vw, 34px);
  padding-inline: 44px 94px;
  overflow: hidden;
}
.hero-preview-flow svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: var(--cyan-dark);
  opacity: .76;
}
.hero-preview-flow-in svg { animation: heroLaneFlowIn 2.4s linear infinite; }
.hero-preview-flow-out svg { animation: heroLaneFlowOut 2.4s linear infinite; }
.hero-preview-flow svg:nth-of-type(2) { animation-delay: -.8s; }
.hero-preview-flow svg:nth-of-type(3) { animation-delay: -1.6s; }
.hero-preview-aisle b {
  top: 4px;
  right: 7px;
  z-index: 3;
  padding: 2px 3px;
  color: #50635a;
  background: rgba(241, 242, 232, .88);
}
@keyframes heroLaneFlowIn {
  0% { opacity: .32; transform: translateX(7px); }
  50% { opacity: .9; }
  100% { opacity: .32; transform: translateX(-7px); }
}
@keyframes heroLaneFlowOut {
  0% { opacity: .32; transform: translateX(-7px); }
  50% { opacity: .9; }
  100% { opacity: .32; transform: translateX(7px); }
}
.hero-preview-route {
  top: 135px;
  right: 9%;
  width: 38%;
  opacity: 0;
  transform: scaleX(.2);
  transform-origin: right;
  transition: opacity 320ms ease, transform 640ms var(--ease);
}
.hero-preview-map[data-scenario="guidance"][data-phase="3"] .hero-preview-route,
.hero-preview-map[data-scenario="guidance"][data-phase="4"] .hero-preview-route,
.hero-preview-map[data-scenario="guidance"][data-phase="5"] .hero-preview-route,
.hero-preview-map[data-scenario="find"][data-phase="3"] .hero-preview-route,
.hero-preview-map[data-scenario="find"][data-phase="4"] .hero-preview-route,
.hero-preview-map[data-scenario="find"][data-phase="5"] .hero-preview-route {
  opacity: 1;
  transform: scaleX(1);
}
.hero-preview-route::before { top: -56px; height: 56px; }
.hero-preview-route i { top: -61px; }
.hero-preview-route span { top: -51px; }
.hero-preview-gate {
  position: absolute;
  right: 52px;
  top: 119px;
  z-index: 6;
  width: 42px;
  height: 42px;
  color: #687b83;
  font-family: var(--font-mono);
  font-size: 5px;
  pointer-events: none;
}
.hero-preview-gate span {
  position: absolute;
  top: -9px;
  right: 50%;
  padding: 2px 3px;
  color: #50636a;
  background: rgba(241, 242, 232, .9);
  transform: translateX(50%);
}
.hero-preview-gate::after {
  content: none;
}
.hero-preview-gate svg {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 22px;
  height: 22px;
  padding: 5px;
  color: var(--ink);
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(201, 245, 74, .35);
}
.hero-preview-vehicle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;
  min-width: 74px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  color: var(--white);
  background: var(--panel-deep);
  border: 1px solid #314852;
  border-radius: 4px;
  box-shadow: 0 8px 16px rgba(4, 15, 20, .22);
  transform: translate3d(var(--vehicle-x, 0), var(--vehicle-y, 0), 0);
  transition: opacity 240ms ease, transform 790ms linear;
  will-change: transform;
}
.hero-preview-vehicle.is-resetting { transition: none; }
.hero-preview-vehicle svg { width: 12px; height: 12px; color: var(--cyan); }
.hero-preview-vehicle b { font-family: var(--font-mono); font-size: 5px; white-space: nowrap; }
.hero-preview-map[data-scenario="incident"] .hero-preview-vehicle { opacity: 0; }
.hero-preview-camera { right: 10px; bottom: 9px; }
.hero-preview-board { bottom: 9px; }

.hero-product-decision { padding: 20px 19px; }
.hero-decision-head b { transition: color 180ms ease, background 180ms ease; }
.hero-product-decision > small { margin-top: 32px; }
.hero-product-decision h3 { min-height: 52px; font-size: 22px; text-wrap: balance; }
.hero-product-decision > p { min-height: 56px; font-size: 9px; text-wrap: pretty; }
.hero-product-decision li { transition: color 220ms ease; }
.hero-product-decision li svg { color: #536a74; }
.hero-product-decision li.complete { color: var(--white); }
.hero-product-decision li.complete svg { color: var(--green); }
.hero-decision-result { margin-top: 16px; }

.hero-driver-float {
  position: absolute;
  right: 22px;
  bottom: -20px;
  z-index: 8;
  width: 286px;
  min-height: 224px;
  padding: 15px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(3, 12, 17, .25);
}
.hero-driver-float > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #52646b;
  font-family: var(--font-mono);
  font-size: 5px;
}
.hero-driver-float > div:first-child span,
.hero-driver-float > div:first-child b { display: inline-flex; align-items: center; gap: 4px; }
.hero-driver-float > div:first-child svg { width: 11px; height: 11px; color: var(--cyan-dark); }
.hero-driver-float > div:first-child b { color: var(--green-dark); }
.hero-driver-float > div:first-child b i { width: 5px; height: 5px; background: var(--green-dark); border-radius: 50%; }
.hero-driver-float > small { display: block; margin-top: 13px; color: #586a72; font-family: var(--font-mono); font-size: 6px; }
.hero-driver-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 9px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.hero-driver-facts > span {
  min-width: 0;
  min-height: 42px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 6px 8px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hero-driver-facts small { color: #5d6b70; font-family: var(--font-mono); font-size: 5px; }
.hero-driver-facts b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.hero-driver-facts > span:last-child b { color: var(--cyan-dark); }
.hero-driver-float > p { min-height: 34px; margin: 9px 0 0; color: #65767d; font-size: 8px; line-height: 1.45; }
.hero-driver-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: #596c74;
  font-size: 7px;
}
.hero-driver-actions span { min-width: 0; display: inline-flex; align-items: center; gap: 5px; }
.hero-driver-actions b { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.hero-driver-actions svg { width: 11px; height: 11px; flex: 0 0 auto; color: var(--cyan-dark); }

.hero-conversion + .capability-strip { height: 76px; }

@media (max-width: 1180px) {
  .hero-product-toolbar { grid-template-columns: minmax(170px, .6fr) minmax(360px, 1.15fr) minmax(190px, .72fr); }
  .hero-product-status > span { display: none; }
  .hero-product-body { grid-template-columns: 54px minmax(0, 1fr) 270px; }
  .hero-product-workspace { grid-template-columns: 138px minmax(0, 1fr); }
}

@media (max-width: 980px) {
  .hero-conversion .hero-content { padding-top: 104px; padding-bottom: 38px; }
  .hero-conversion-title { font-size: 50px; }
  .hero-product-wrap { padding-bottom: 64px; }
  .hero-product-showcase { height: 590px; }
  .hero-product-toolbar { grid-template-columns: minmax(160px, .7fr) minmax(340px, 1.4fr) 96px; }
  .hero-product-status > button { width: 88px; padding-inline: 8px; }
  .hero-product-body { grid-template-columns: minmax(0, 1fr) 248px; }
  .hero-product-rail { display: none; }
  .hero-product-main { padding: 14px; }
  .hero-product-workspace { grid-template-columns: 124px minmax(0, 1fr); }
  .hero-product-decision { padding: 17px; }
  .hero-driver-float { right: 14px; }
}

@media (max-width: 820px) {
  .hero-conversion .hero-content { padding-bottom: 32px; }
  .hero-product-wrap { margin-top: 0; padding-bottom: 54px; }
  .hero-product-showcase { height: 640px; }
  .hero-product-toolbar {
    height: 112px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 52px 46px;
    gap: 0 10px;
    padding-block: 7px;
  }
  .hero-scenario-switch { grid-column: 1 / -1; grid-row: 2; }
  .hero-product-status { grid-column: 2; grid-row: 1; }
  .hero-product-body { height: calc(100% - 112px); grid-template-columns: minmax(0, 1fr) 220px; }
  .hero-product-metrics > div { padding-inline: 7px; }
  .hero-product-workspace { grid-template-columns: 110px minmax(0, 1fr); }
  .hero-product-decision h3 { font-size: 18px; }
  .hero-driver-float { display: none; }
}

@media (max-width: 680px) {
  .hero-conversion .hero-media { object-position: 62% center; }
  .hero-conversion .hero-content { padding-top: 84px; padding-bottom: 26px; }
  .hero-conversion-title { font-size: 32px; line-height: 1.06; }
  .hero-conversion .hero-lead { font-size: 15px; }
  .hero-conversion-actions { display: grid; grid-template-columns: 1fr; margin-top: 18px; }
  .hero-conversion-actions .button { width: 100%; min-height: 50px; }
  .hero-product-wrap { width: min(calc(100% - 18px), var(--shell)); padding-bottom: 24px; }
  .hero-product-showcase { height: 556px; }
  .hero-product-toolbar { height: 104px; grid-template-rows: 46px 44px; padding: 7px 8px; }
  .hero-product-toolbar .ui-cshark-wordmark { width: 60px; height: 34px; }
  .hero-product-brand strong { font-size: 8px; }
  .hero-product-brand small { font-size: 4px; }
  .hero-product-status > button { width: 42px; min-height: 34px; padding: 0; }
  .hero-product-status > button b { display: none; }
  .hero-scenario-switch button { min-height: 32px; padding-inline: 4px; font-size: 7px; }
  .hero-product-body { position: relative; height: calc(100% - 104px); display: block; }
  .hero-product-main { height: 368px; padding: 9px; }
  .hero-product-heading { min-height: 36px; }
  .hero-product-heading small { font-size: 4px; }
  .hero-product-heading h2 { max-width: 270px; margin-top: 2px; font-size: 14px; }
  .hero-product-heading > span { display: none; }
  .hero-product-metrics { margin-top: 4px; }
  .hero-product-metrics > div { min-height: 50px; padding: 4px; }
  .hero-product-metrics span { font-size: 3px; }
  .hero-product-metrics strong { font-size: 10px; }
  .hero-product-metrics small { display: none; }
  .hero-product-workspace { min-height: 244px; grid-template-columns: 78px minmax(0, 1fr); gap: 4px; margin-top: 4px; }
  .hero-signal-summary > div { grid-template-columns: 15px minmax(0, 1fr); column-gap: 4px; padding: 3px 5px; }
  .hero-signal-summary svg { width: 10px; height: 10px; }
  .hero-signal-summary span { font-size: 5px; }
  .hero-signal-summary b { font-size: 3px; }
  .hero-preview-map { min-height: 244px; }
  .hero-preview-spots { top: 34px; right: 5px; left: 5px; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(2, 54px); gap: 49px 1px; }
  .hero-preview-spots span { padding-top: 2px; font-size: 3px; }
  .hero-preview-spots span::before { right: 1px; bottom: 3px; left: 1px; height: 24px; }
  .hero-preview-aisle { top: 89px; right: 4px; left: 4px; height: 47px; }
  .hero-preview-flow { gap: 10px; padding-inline: 18px 48px; }
  .hero-preview-flow svg { width: 9px; height: 9px; }
  .hero-preview-aisle b { top: 2px; right: 3px; font-size: 3px; }
  .hero-preview-route { top: 101px; }
  .hero-preview-route::before { top: -40px; height: 40px; }
  .hero-preview-route i { top: -44px; }
  .hero-preview-route span { top: -36px; }
  .hero-preview-gate { top: 89px; right: 18px; transform: scale(.75); transform-origin: right top; }
  .hero-preview-vehicle { min-width: 28px; padding: 3px; }
  .hero-preview-vehicle svg { width: 9px; height: 9px; }
  .hero-preview-vehicle b { display: none; }
  .hero-product-decision {
    position: absolute;
    right: 9px;
    bottom: 9px;
    left: 9px;
    width: auto;
    min-height: 66px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px 10px;
    padding: 9px 10px;
    border: 1px solid #314a55;
    border-radius: 5px;
    box-shadow: 0 12px 28px rgba(3, 12, 17, .3);
  }
  .hero-product-decision .hero-decision-head { grid-column: 1 / -1; display: flex; }
  .hero-product-decision > small,
  .hero-product-decision > p,
  .hero-product-decision ol,
  .hero-decision-result { display: none; }
  .hero-product-decision h3 { min-height: 0; margin: 0; font-size: 13px; }
  .deployment-choice-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-product-status > button.is-running svg,
  .hero-signal-summary > div.active svg,
  .hero-preview-flow svg { animation: none; }
  .hero-preview-route,
  .hero-preview-gate svg,
  .hero-preview-vehicle { transition-duration: 1ms; }
}

/* CShark camera lower indicator */
.camera-indicator-demo {
  --camera-light: #62ed71;
  --camera-light-rgb: 98 237 113;
  transition: box-shadow 320ms ease;
}
.camera-indicator-demo[data-camera-light="full"] { --camera-light: #ff4d52; --camera-light-rgb: 255 77 82; }
.camera-indicator-demo[data-camera-light="accessible"] { --camera-light: #a86cff; --camera-light-rgb: 168 108 255; }
.camera-indicator-demo[data-camera-light="search"] { --camera-light: #c9f54a; --camera-light-rgb: 201 245 74; }
.camera-indicator-demo[data-camera-light="service"] { --camera-light: #ff9e35; --camera-light-rgb: 255 158 53; }
.camera-indicator-demo .f4a-product-toolbar b { color: var(--camera-light); transition: color 320ms ease; }
.camera-indicator-demo .f4a-product-toolbar b i {
  background: var(--camera-light);
  box-shadow: 0 0 10px var(--camera-light);
  transition: background 320ms ease, box-shadow 320ms ease;
}
.f4a-camera-render {
  position: relative;
  z-index: 3;
  width: min(78%, 520px);
  animation: f4aProductFloat 6s ease-in-out infinite;
  isolation: isolate;
}
.f4a-camera-render > img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 38px 38px rgba(0, 0, 0, .34));
}
.f4a-camera-light-surface {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0 64%, rgb(var(--camera-light-rgb) / .4) 70%, rgb(var(--camera-light-rgb)) 100%);
  clip-path: polygon(
    13.5% 65.1%, 16% 66.3%, 18.5% 67.5%, 21.5% 69%, 25% 70.5%,
    29% 72%, 33% 73.4%, 37% 74.5%, 41.5% 75.4%, 46% 75.9%,
    50% 76.1%,
    54% 75.9%, 58.5% 75.4%, 63% 74.5%, 67% 73.4%, 71% 72%,
    75% 70.5%, 78.5% 69%, 81.5% 67.5%, 84% 66.3%, 86.5% 65.1%,
    77% 100%, 23% 100%
  );
  -webkit-mask: url("assets/cshark-spc-dspc-camera.webp?v=20260725-fast-load") center / contain no-repeat;
  mask: url("assets/cshark-spc-dspc-camera.webp?v=20260725-fast-load") center / contain no-repeat;
  mix-blend-mode: multiply;
  filter: saturate(2.24) brightness(1.5);
  opacity: 1;
  transition: background 320ms ease, opacity 320ms ease;
}
.f4a-camera-light-glow {
  position: absolute;
  z-index: 1;
  right: 18%;
  bottom: 2%;
  left: 18%;
  height: 31%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgb(var(--camera-light-rgb)), rgb(var(--camera-light-rgb) / .4) 47%, transparent 74%);
  border-radius: 50%;
  filter: blur(19px) saturate(2.24) brightness(4.5);
  opacity: 1;
  transform: translateY(8%);
  transition: background 320ms ease, opacity 320ms ease;
}
.camera-indicator-demo[data-camera-light="search"] .f4a-camera-light-surface,
.camera-indicator-demo[data-camera-light="search"] .f4a-camera-light-glow,
.camera-indicator-demo[data-camera-light="search"] .f4a-product-toolbar b i {
  animation: cameraSearchBlink 720ms steps(2, end) infinite;
}
@keyframes cameraSearchBlink { 50% { opacity: .13; } }

.camera-light-controller {
  margin-top: 28px;
  padding: 15px;
  background: #10222b;
  border: 1px solid #2d444e;
  border-radius: 6px;
}
.camera-light-current {
  min-height: 74px;
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.camera-light-current > i {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  background: var(--camera-light);
  border-radius: 50%;
  box-shadow: 0 0 14px var(--camera-light);
  transition: background 320ms ease, box-shadow 320ms ease;
}
.camera-light-current span { min-width: 0; }
.camera-light-current small,
.camera-light-current strong,
.camera-light-current p { display: block; }
.camera-light-current small { color: #8da0a8; font-family: var(--font-mono); font-size: 6px; }
.camera-light-current strong { margin-top: 5px; color: var(--white); font-size: 15px; }
.camera-light-current p { margin: 6px 0 0; color: #90a3ab; font-size: 9px; line-height: 1.5; text-wrap: pretty; }
.camera-light-modes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  margin-top: 12px;
  padding: 3px;
  background: #0a171d;
  border: 1px solid #263d47;
  border-radius: 5px;
}
.camera-light-modes button {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 6px;
  overflow: hidden;
  color: #8fa0a7;
  background: transparent;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  font-size: 7px;
  font-weight: 720;
  transition: color 180ms ease, background 180ms ease, transform 180ms var(--ease);
}
.camera-light-modes button:hover { color: var(--white); background: #19303a; }
.camera-light-modes button:active { transform: scale(.97); }
.camera-light-modes button.active { color: var(--ink); background: var(--white); }
.camera-light-modes button i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.camera-light-modes [data-camera-light-mode="free"] i { color: #62ed71; background: #62ed71; }
.camera-light-modes [data-camera-light-mode="full"] i { color: #ff4d52; background: #ff4d52; }
.camera-light-modes [data-camera-light-mode="accessible"] i { color: #a86cff; background: #a86cff; }
.camera-light-modes [data-camera-light-mode="search"] i { color: #c9f54a; background: #c9f54a; animation: cameraSearchBlink 720ms steps(2, end) infinite; }
.camera-light-modes [data-camera-light-mode="service"] i { color: #ff9e35; background: #ff9e35; }

.f4a-object-alert {
  min-height: 106px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  margin-top: 24px;
  padding: 16px;
  background: rgba(255, 158, 53, .08);
  border: 1px solid rgba(255, 158, 53, .34);
  border-left: 3px solid #ff9e35;
}
.f4a-object-alert > svg { width: 23px; height: 23px; color: #ff9e35; }
.f4a-object-alert span { min-width: 0; }
.f4a-object-alert b,
.f4a-object-alert small { display: block; }
.f4a-object-alert b { color: var(--white); font-size: 12px; }
.f4a-object-alert small { margin-top: 6px; color: #94a6ad; font-size: 9px; line-height: 1.55; text-wrap: pretty; }
.f4a-object-alert a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ffc37f;
  font-size: 8px;
  font-weight: 720;
  text-decoration: none;
  white-space: nowrap;
}
.f4a-object-alert a svg { width: 13px; height: 13px; }

@media (max-width: 1180px) {
  .camera-light-modes button { padding-inline: 4px; font-size: 6px; }
  .f4a-object-alert { grid-template-columns: 28px minmax(0, 1fr); }
  .f4a-object-alert a { grid-column: 2; }
}

@media (max-width: 680px) {
  .f4a-camera-render { width: min(84%, 390px); }
  .camera-light-controller { margin-top: 22px; padding: 12px; }
  .camera-light-current { min-height: 84px; }
  .camera-light-modes { grid-template-columns: repeat(5, minmax(54px, 1fr)); overflow-x: auto; }
  .camera-light-modes button { min-height: 40px; }
  .f4a-object-alert { grid-template-columns: 25px minmax(0, 1fr); padding: 14px; }
  .f4a-object-alert a { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .f4a-orbit,
  .f4a-camera-render,
  .camera-indicator-demo[data-camera-light="search"] .f4a-camera-light-surface,
  .camera-indicator-demo[data-camera-light="search"] .f4a-camera-light-glow,
  .camera-indicator-demo[data-camera-light="search"] .f4a-product-toolbar b i,
  .camera-light-modes [data-camera-light-mode="search"] i { animation: none; }
}
/* Video-navigation product positioning */
.find-car-hero-visual {
  min-height: 31rem;
  overflow: hidden;
  background: #0f1619;
}

.find-car-hero-phone {
  position: absolute;
  z-index: 2;
  left: clamp(1.5rem, 7%, 4rem);
  bottom: 3.5rem;
  width: min(22rem, 58%);
  padding: 1.35rem;
  border: 1px solid rgba(201, 245, 74, .36);
  border-radius: 8px;
  background: rgba(13, 21, 24, .94);
  box-shadow: 0 1.5rem 4rem rgba(2, 10, 13, .36);
}

.find-car-hero-phone > div,
.find-car-console-head,
.find-car-camera-frame figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.find-car-hero-phone img { width: 5.25rem; }
.find-car-hero-phone > div span,
.find-car-hero-phone > span,
.find-car-console-head span,
.find-car-location > span,
.find-car-route > div > span {
  font-size: .68rem;
  font-weight: 650;
  color: #9cadb3;
}
.find-car-hero-phone > strong {
  display: block;
  margin-top: 2.25rem;
  font-size: clamp(1.65rem, 4vw, 2.6rem);
  font-variant-numeric: tabular-nums;
  color: #f5f7f6;
}
.find-car-hero-phone p { margin: .45rem 0 1.65rem; color: #c1cbd0; }
.find-car-hero-phone > span { display: flex; align-items: center; gap: .5rem; color: #c9f54a; }
.find-car-hero-phone > span svg { width: 1rem; }
.find-car-hero-path { position: absolute; inset: 7rem 2.5rem 2rem 45%; }
.find-car-hero-path::before {
  content: "";
  position: absolute;
  inset: 8% 8% 16% 0;
  border-top: 1px dashed rgba(201, 245, 74, .55);
  border-right: 1px dashed rgba(201, 245, 74, .55);
  transform: skewY(-18deg);
}
.find-car-hero-path > i { position: absolute; width: .45rem; height: .45rem; border-radius: 50%; background: #c9f54a; box-shadow: 0 0 1rem rgba(201, 245, 74, .75); }
.find-car-hero-path > i:nth-child(1) { left: 0; top: 8%; }
.find-car-hero-path > i:nth-child(2) { left: 34%; top: 8%; }
.find-car-hero-path > i:nth-child(3) { right: 8%; top: 37%; }
.find-car-hero-path > i:nth-child(4) { right: 8%; bottom: 16%; }
.find-car-hero-path > b { position: absolute; right: 4%; bottom: 8%; display: grid; place-items: center; width: 4.5rem; aspect-ratio: 1; border: 1px solid #c9f54a; border-radius: 50%; color: #c9f54a; }
.find-car-hero-path > b svg { width: 1.5rem; }

.find-car-demo-section { padding-bottom: clamp(5rem, 9vw, 9rem); }
.find-car-console { overflow: hidden; border: 1px solid #314148; border-radius: 8px; background: #0c1519; }
.find-car-console-head { min-height: 4.5rem; padding: 1rem 1.35rem; border-bottom: 1px solid #314148; color: #f4f7f6; }
.find-car-console-head > div { display: flex; align-items: center; gap: 1rem; }
.find-car-console-head img { width: 5rem; }
.find-car-console-head > span { color: #c9f54a; }
.find-car-console-head > span i,
.find-car-camera-frame figcaption span i { display: inline-block; width: .45rem; height: .45rem; margin-right: .35rem; border-radius: 50%; background: #c9f54a; box-shadow: 0 0 .8rem rgba(201, 245, 74, .75); }
.find-car-search { padding: clamp(1.35rem, 3vw, 2.4rem); border-bottom: 1px solid #314148; }
.find-car-auth-state { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 48rem; margin-bottom: 1.25rem; padding: .8rem 1rem; border: 1px solid #365049; border-radius: 6px; background: #12221f; color: #dbe2e1; font-size: .76rem; }
.find-car-auth-state span { display: inline-flex; align-items: center; gap: .55rem; }
.find-car-auth-state svg { width: 1rem; color: #c9f54a; }
.find-car-auth-state b { font-weight: 650; }
.find-car-auth-state strong { color: #c9f54a; font-weight: 650; font-variant-numeric: tabular-nums; }
.find-car-search-modes { width: min(100%, 31rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 1.25rem; padding: 3px; background: #121e23; border: 1px solid #43545b; border-radius: 6px; }
.find-car-search-modes button { min-width: 0; min-height: 2.65rem; padding: .55rem .8rem; color: #91a1a7; background: transparent; border: 0; border-radius: 4px; font: 650 .76rem/1.25 Onest, sans-serif; cursor: pointer; transition: color 180ms ease, background-color 180ms ease; }
.find-car-search-modes button:hover { color: #f4f7f6; }
.find-car-search-modes button.active { color: #0c1519; background: #f4f7f6; }
.find-car-search-modes button:focus-visible { outline: 2px solid #c9f54a; outline-offset: 2px; }
.find-car-search label { display: block; margin-bottom: .65rem; font-size: .82rem; font-weight: 650; color: #dbe2e1; }
.find-car-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; max-width: 48rem; }
.find-car-search input { min-width: 0; height: 3.4rem; padding: 0 1rem; border: 1px solid #43545b; border-radius: 6px; background: #121e23; color: #fff; font: 650 1rem/1 Onest, sans-serif; text-transform: uppercase; }
.find-car-search input:focus { outline: 2px solid #c9f54a; outline-offset: 2px; }
.find-car-search p { margin: .65rem 0 0; color: #809198; font-size: .72rem; }
.find-car-search button.is-loading svg { animation: find-car-spin .7s linear infinite; }
@keyframes find-car-spin { to { transform: rotate(360deg); } }
.find-car-result { display: grid; grid-template-columns: 1.15fr .9fr .95fr; min-height: 24rem; }
.find-car-result > * { min-width: 0; }
.find-car-result > * + * { border-left: 1px solid #314148; }
.find-car-camera-frame { position: relative; min-height: 24rem; margin: 0; overflow: hidden; background: #091014; }
.find-car-camera-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.06); transition: opacity .25s ease; }
.find-car-camera-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 12, 15, .04), rgba(4, 12, 15, .62)); pointer-events: none; }
.find-car-camera-frame figcaption { position: absolute; z-index: 2; top: 0; left: 0; right: 0; padding: .8rem 1rem; color: #f4f7f6; font-size: .67rem; }
.find-car-camera-frame > b { position: absolute; z-index: 2; right: 1rem; bottom: 1rem; padding: .55rem .75rem; border-radius: 4px; background: #fff; color: #0e171b; font-size: 1rem; font-variant-numeric: tabular-nums; }
.find-car-location,
.find-car-route { padding: clamp(1.5rem, 3vw, 2.5rem); }
.find-car-location h3 { margin: .65rem 0 1rem; color: #fff; font-size: clamp(2rem, 4vw, 3.3rem); }
.find-car-location p { color: #aebbc0; line-height: 1.65; }
.find-car-location dl { margin: 2rem 0 0; }
.find-car-location dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-top: 1px solid #314148; }
.find-car-location dt { color: #7f9199; font-size: .72rem; }
.find-car-location dd { margin: 0; color: #f4f7f6; font-weight: 650; text-align: right; }
.find-car-route h3 { margin: .65rem 0 1.5rem; color: #f4f7f6; font-size: 1.15rem; }
.find-car-route ol { margin: 0; padding: 0; list-style: none; }
.find-car-route li { display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; padding: .85rem 0; border-top: 1px solid #314148; color: #cbd4d5; font-size: .82rem; line-height: 1.45; }
.find-car-route li i { color: #c9f54a; font-style: normal; font-size: .66rem; }
.find-car-result.is-updating { animation: find-car-result-in .42s ease both; }
.find-car-result.is-not-found .find-car-camera-frame { opacity: .42; }
@keyframes find-car-result-in { from { opacity: .55; transform: translateY(.3rem); } to { opacity: 1; transform: translateY(0); } }

.find-car-process-section { overflow: hidden; }
.find-car-process-section .page-intro { align-items: start; }
.find-car-process-section .page-intro h2 { text-wrap: balance; }
.find-car-flow {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line);
}
.find-car-flow article {
  position: relative;
  min-width: 0;
  min-height: 14.5rem;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  padding: 1.4rem clamp(1rem, 1.45vw, 1.4rem) 1.55rem;
  border-right: 1px solid var(--line);
  background: var(--white);
}
.find-car-flow article::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 3rem;
  height: 3px;
  background: var(--cyan-dark);
}
.find-car-flow article + article { border-left: 0; }
.find-car-flow article:last-child { border-right: 0; }
.find-car-flow span {
  color: var(--cyan-dark);
  font-size: .68rem;
  font-weight: 720;
}
.find-car-flow h3 {
  min-width: 0;
  margin: 1.8rem 0 0;
  font-size: clamp(1.12rem, 1.45vw, 1.36rem);
  line-height: 1.18;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.find-car-flow p {
  max-width: 31ch;
  margin: .85rem 0 0;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.58;
  text-wrap: pretty;
}
.find-car-channels-section .product-contours { align-items: stretch; }

@media (max-width: 1080px) {
  .find-car-result { grid-template-columns: 1fr 1fr; }
  .find-car-route { grid-column: 1 / -1; border-top: 1px solid #314148; border-left: 0 !important; }
  .find-car-flow { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .find-car-flow article:nth-child(n) {
    grid-column: span 2;
    min-height: 13rem;
    border-top: 0;
    border-right: 1px solid var(--line);
    border-left: 0;
  }
  .find-car-flow article:nth-child(3),
  .find-car-flow article:nth-child(5) { border-right: 0; }
  .find-car-flow article:nth-child(4),
  .find-car-flow article:nth-child(5) {
    grid-column: span 3;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 720px) {
  .capabilities-page .encyclopedia-rail { grid-template-columns: 1fr; }
  .find-car-auth-state { align-items: flex-start; flex-direction: column; }
  .find-car-hero-visual { min-height: 25rem; }
  .find-car-hero-phone { width: calc(100% - 3rem); left: 1.5rem; bottom: 2rem; }
  .find-car-hero-path { left: 20%; opacity: .36; }
  .find-car-search-row,
  .find-car-result { grid-template-columns: 1fr; }
  .find-car-result > * + * { border-left: 0; border-top: 1px solid #314148; }
  .find-car-camera-frame { min-height: 18rem; }
  .find-car-route { grid-column: auto; }
  .find-car-flow { grid-template-columns: 1fr; }
  .find-car-flow article:nth-child(n) {
    grid-column: auto;
    min-height: 0;
    padding: 1.3rem 1.25rem 1.45rem;
    border-top: 1px solid var(--line);
    border-right: 0;
  }
  .find-car-flow article:first-child { border-top: 0; }
  .find-car-flow h3 { margin-top: 1.15rem; }
  .find-car-search-modes { grid-template-columns: 1fr; }
}

/* Knowledge base: operational instructions for the video-navigation product */
.knowledge-procedure-list {
  border-top: 1px solid var(--line);
}

.knowledge-procedure-list article {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) 8rem;
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: start;
  padding: clamp(1.4rem, 2.7vw, 2.4rem) 0;
  border-bottom: 1px solid var(--line);
}

.knowledge-procedure-list article > span,
.knowledge-procedure-list article > strong {
  padding-top: .25rem;
  color: var(--green-dark);
  font-size: .68rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.knowledge-procedure-list h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.2;
  text-wrap: balance;
}

.knowledge-procedure-list p {
  max-width: 58rem;
  margin: .65rem 0 0;
  color: var(--muted);
  line-height: 1.65;
  text-wrap: pretty;
}

.knowledge-procedure-list article > strong {
  color: var(--muted);
  text-align: right;
}

.scenario-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(2rem, 4vw, 4rem);
  border-top: 1px solid var(--panel-line);
  border-left: 1px solid var(--panel-line);
}

.scenario-steps article {
  min-height: 13rem;
  padding: clamp(1.3rem, 2.7vw, 2.2rem);
  border-right: 1px solid var(--panel-line);
  border-bottom: 1px solid var(--panel-line);
}

.scenario-steps span {
  color: var(--cyan);
  font-size: .68rem;
  font-weight: 650;
}

.scenario-steps h3 {
  margin: 3.5rem 0 .65rem;
  color: var(--white);
  font-size: 1.15rem;
}

.scenario-steps p {
  margin: 0;
  color: #9cadaf;
  font-size: .82rem;
  line-height: 1.55;
  text-wrap: pretty;
}

@media (max-width: 900px) {
  .knowledge-procedure-list article { grid-template-columns: 4.25rem minmax(0, 1fr); }
  .knowledge-procedure-list article > strong { grid-column: 2; text-align: left; }
  .scenario-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .knowledge-procedure-list article { grid-template-columns: 1fr; gap: .6rem; }
  .knowledge-procedure-list article > strong { grid-column: auto; }
  .scenario-steps { grid-template-columns: 1fr; }
  .scenario-steps article { min-height: 10rem; }
  .scenario-steps h3 { margin-top: 2.25rem; }
}

/* Homepage: concise product overview */
.home-chapter-nav {
  color: var(--ink);
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.home-chapter-nav .page-shell {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-chapter-nav a {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: .15rem 1rem;
  min-height: 7.25rem;
  padding: 1.5rem 1.25rem;
  border-left: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background 220ms ease, color 220ms ease;
}

.home-chapter-nav a:last-child { border-right: 1px solid var(--line); }
.home-chapter-nav a:hover { color: var(--white); background: var(--green-dark); }
.home-chapter-nav span {
  grid-row: 1 / 3;
  padding-top: .2rem;
  color: var(--cyan-dark);
  font-size: .68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.home-chapter-nav a:hover span { color: var(--cyan); }
.home-chapter-nav strong { align-self: end; font-size: .95rem; line-height: 1.25; }
.home-chapter-nav small { color: var(--muted); font-size: .7rem; }
.home-chapter-nav a:hover small { color: var(--muted-dark); }

/* Homepage presentation: compact brand bar and local section navigation. */
body[data-page="overview"] .site-header {
  inset: 14px auto auto 50%;
  width: min(calc(100% - 48px), var(--shell));
  min-height: 64px;
  grid-template-columns: minmax(6rem, 1fr) auto minmax(6rem, 1fr);
  padding: 0 18px;
  color: var(--ink);
  background: rgba(250, 251, 247, .95);
  border: 1px solid rgba(16, 17, 15, .14);
  border-radius: 8px;
  box-shadow: 0 16px 44px rgba(8, 17, 12, .14);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}
body[data-page="overview"] .site-header.scrolled {
  color: var(--ink);
  background: rgba(250, 251, 247, .97);
  border-color: rgba(16, 17, 15, .16);
  box-shadow: 0 10px 34px rgba(8, 17, 12, .12);
}
body[data-page="overview"] .site-header .brand-logo { content: url("assets/cshark-logo-on-light.svg?v=20260719-transparent"); }
body[data-page="overview"] .desktop-nav { display: flex; }
body[data-page="overview"] .header-actions .button-light {
  min-height: 40px;
  display: inline-flex;
  color: var(--white);
  background: var(--ink);
}

.home-section-nav-wrap {
  position: sticky;
  top: 84px;
  z-index: 850;
  padding: 14px 0;
  pointer-events: none;
}
.home-section-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  background: rgba(250, 251, 247, .96);
  border: 1px solid rgba(16, 17, 15, .15);
  border-radius: 8px;
  box-shadow: 0 16px 44px rgba(8, 17, 12, .11);
  backdrop-filter: blur(18px);
  pointer-events: auto;
}
.home-section-nav a {
  min-width: 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 0 1.15rem;
  color: var(--ink);
  border-right: 1px solid var(--line);
  text-decoration: none;
  font-size: .76rem;
  font-weight: 700;
  transition: color 180ms ease, background 180ms ease;
}
.home-section-nav a:last-child { border-right: 0; }
.home-section-nav a:hover { background: #edf2e8; }
.home-section-nav a.active { color: var(--white); background: var(--green-dark); }
.home-section-nav span { color: var(--cyan-dark); font-size: .62rem; font-variant-numeric: tabular-nums; }
.home-section-nav a.active span { color: var(--cyan); }
body[data-page="overview"] main section[id] { scroll-margin-top: 164px; }

.home-overview-section,
.home-business-section { padding: 8rem 0 8.75rem; }
.home-overview-section { background: var(--paper); }
.home-business-section { background: var(--white); border-top: 1px solid var(--line); }
.home-business-section .section-heading > p { color: var(--muted); }
.network-heatmap-section .section-heading > p { color: var(--muted); }
.home-overview-section .section-action-copy,
.home-interface-section .section-action-copy { align-self: end; }
.home-overview-section .section-action-copy > .link-arrow:only-child { margin-top: 0; }

.home-five-ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.home-five-ledger article {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  gap: 1.5rem .75rem;
  align-content: start;
  min-width: 0;
  min-height: 15rem;
  padding: 2rem 1.35rem 2.5rem;
  border-right: 1px solid var(--line);
}
.home-five-ledger article:first-child { padding-left: 0; }
.home-five-ledger article:nth-child(-n + 4) { border-bottom: 1px solid var(--line); }
.home-five-ledger article:nth-child(4),
.home-five-ledger article:last-child { border-right: 0; }
.home-five-ledger article:nth-child(5) { padding-left: 0; }
.home-five-ledger article:last-child { grid-column: span 2; padding-right: 0; }
.home-five-ledger article > span {
  color: var(--cyan-dark);
  font-size: .68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.home-five-ledger article > svg { width: 1.65rem; height: 1.65rem; justify-self: end; color: var(--green-dark); stroke-width: 1.6; }
.home-five-ledger article > div { grid-column: 1 / -1; align-self: end; }
.home-five-ledger h3 { margin: 0 0 .65rem; font-size: 1.2rem; line-height: 1.22; text-wrap: balance; }
.home-five-ledger p { max-width: 18rem; margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.55; text-wrap: pretty; }

.home-composition-section { padding: 8rem 0 8.75rem; color: var(--white); background: var(--ink); }
.home-composition-section .section-heading > p { color: var(--muted-dark); }
.home-composition-layout {
  display: grid;
  grid-template-columns: minmax(24rem, .82fr) minmax(34rem, 1.18fr);
  gap: 4rem;
  align-items: stretch;
}

.home-camera-stage {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(20rem, 1fr) auto auto;
  min-width: 0;
  margin: 0;
  overflow: visible;
  background: transparent;
}
.home-camera-stage-head {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .35rem 0 1rem;
  color: var(--muted-dark);
  font-size: .68rem;
  font-weight: 650;
}
.home-camera-stage-head b { display: inline-flex; align-items: center; color: var(--camera-light, var(--cyan)); font-weight: 650; transition: color 320ms ease; }
.home-camera-stage-head b i { display: inline-block; width: .45rem; height: .45rem; margin-right: .45rem; border-radius: 50%; background: var(--camera-light, var(--cyan)); box-shadow: 0 0 .9rem var(--camera-light, var(--cyan)); transition: background 320ms ease, box-shadow 320ms ease; }
.home-camera-stage > .home-camera-render {
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: center;
  width: min(88%, 34rem);
  height: auto;
}
.home-camera-stage figcaption { position: relative; z-index: 2; padding: 1.25rem 0 1.35rem; background: transparent; }
.home-camera-stage figcaption strong { display: block; margin-bottom: .5rem; font-size: 1.15rem; }
.home-camera-stage figcaption p { margin: 0; color: #aeb4a9; font-size: .82rem; line-height: 1.65; text-wrap: pretty; }
.home-camera-states { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: transparent; }
.home-camera-states button { display: flex; align-items: center; gap: .65rem; min-height: 3.15rem; padding: .75rem 0; color: #aeb4a9; background: transparent; border: 0; border-top: 1px solid var(--panel-line); cursor: pointer; font-size: .68rem; text-align: left; transition: background 180ms ease, box-shadow 180ms ease, padding 180ms ease; }
.home-camera-states button:nth-child(even) { padding-left: 1.25rem; }
.home-camera-states button:last-child:nth-child(odd) { grid-column: 1 / -1; }
.home-camera-states button:hover { background: rgba(255, 255, 255, .035); }
.home-camera-states button:focus-visible { position: relative; z-index: 2; outline: 2px solid currentColor; outline-offset: -3px; }
.home-camera-states button.active { padding-left: .75rem; background: rgba(255, 255, 255, .035); box-shadow: inset 2px 0 currentColor; }
.home-camera-states i { width: .58rem; height: .58rem; flex: 0 0 auto; border-radius: 50%; background: currentColor; box-shadow: 0 0 .8rem currentColor; }
.home-camera-states .state-green { color: #62ed71; }
.home-camera-states .state-red { color: #ff4d52; }
.home-camera-states .state-violet { color: #a86cff; }
.home-camera-states .state-orange { color: #ff9e35; }
.home-camera-states .state-blink { color: var(--cyan); }
.home-camera-states .state-blink i { animation: home-camera-blink 1.25s steps(2, end) infinite; }
@keyframes home-camera-blink { 50% { opacity: .18; } }

.home-system-chain { align-self: stretch; border-top: 1px solid var(--panel-line); }
.home-system-chain article {
  display: grid;
  grid-template-columns: 2.5rem 2.75rem minmax(0, 1fr);
  gap: 1.15rem;
  align-items: start;
  min-height: 8rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--panel-line);
}
.home-system-chain article > span { padding-top: .25rem; color: var(--cyan); font-size: .68rem; font-weight: 700; }
.home-system-chain article > svg { width: 1.55rem; height: 1.55rem; color: var(--cyan); stroke-width: 1.55; }
.home-system-chain h3 { margin: 0 0 .45rem; color: var(--white); font-size: 1.2rem; line-height: 1.25; }
.home-system-chain p { max-width: 48rem; margin: 0; color: #aeb4a9; font-size: .84rem; line-height: 1.6; text-wrap: pretty; }
.home-system-chain-actions { display: flex; align-items: center; gap: 1.5rem; padding-top: 1.75rem; }
.home-system-chain-actions > a:not(.button) { color: var(--white); font-size: .78rem; font-weight: 650; text-decoration: none; }
.home-system-chain-actions > a:not(.button):hover { color: var(--cyan); }
.home-system-chain-actions svg { width: 1rem; height: 1rem; }

.home-interface-section { background: #f1f2e8; }
.home-interface-section .section-heading > .section-action-copy p { color: var(--muted); }
.home-interface-section .desktop-product-mockup figure { position: relative; }
.mobile-find-screen { padding: .6rem .55rem .75rem; color: var(--white); background: #071116; border-radius: 24px; }
.mobile-find-status { display: flex; justify-content: space-between; padding: .15rem .15rem .55rem; color: #8fa2aa; font-size: .48rem; }
.mobile-find-status b { font-weight: 600; }
.mobile-find-result { display: grid; gap: .25rem; padding: .85rem; color: #071116; background: #74d8e8; border-radius: 5px; }
.mobile-find-result small,
.mobile-find-evidence figcaption small { font-size: .5rem; font-weight: 700; text-transform: uppercase; }
.mobile-find-result strong { font-size: 1.28rem; line-height: 1; letter-spacing: 0; }
.mobile-find-result span { display: flex; align-items: center; gap: .32rem; margin-top: .15rem; font-size: .5rem; }
.mobile-find-result span i { width: .38rem; height: .38rem; border-radius: 50%; background: #087653; box-shadow: 0 0 .5rem rgba(8, 118, 83, .55); }
.mobile-find-evidence { position: relative; height: 9.35rem; margin: .45rem 0; overflow: hidden; border: 1px solid #30464f; border-radius: 5px; background: #0f2028; }
.mobile-find-evidence > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.mobile-find-evidence::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(4, 12, 17, .88) 100%); }
.mobile-find-evidence figcaption { position: absolute; z-index: 1; right: .7rem; bottom: .65rem; left: .7rem; display: grid; gap: .16rem; }
.mobile-find-evidence figcaption small { color: #8fa2aa; }
.mobile-find-evidence figcaption strong { font-size: 1.15rem; line-height: 1; }
.mobile-find-evidence figcaption span { color: #c4d0d4; font-size: .52rem; }
.mobile-find-route { display: grid; grid-template-columns: 1fr; gap: .28rem; padding: .65rem .7rem; border: 1px solid #30464f; border-radius: 5px; color: #c4d0d4; background: #0f2028; }
.mobile-find-route span { display: flex; align-items: center; gap: .35rem; font-size: .52rem; }
.mobile-find-route span svg { width: .72rem; height: .72rem; color: #74d8e8; }
.mobile-find-route > b { width: 1px; height: .6rem; margin-left: .35rem; background: #74d8e8; }
.mobile-find-session { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .45rem; border: 1px solid #30464f; border-radius: 5px; background: #0f2028; }
.mobile-find-session span { min-width: 0; display: grid; gap: .18rem; padding: .55rem .65rem; }
.mobile-find-session span + span { border-left: 1px solid #30464f; }
.mobile-find-session small { color: #8fa2aa; font-size: .45rem; }
.mobile-find-session strong { font-size: .62rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mobile-find-screen > button { width: 100%; min-height: 2.45rem; margin-top: .45rem; display: flex; align-items: center; justify-content: center; gap: .4rem; color: #071116; background: var(--cyan); border: 0; border-radius: 5px; font: inherit; font-size: .58rem; font-weight: 750; }
.mobile-find-screen > button svg { width: .82rem; height: .82rem; }

.home-business-gallery { display: grid; grid-template-columns: .92fr 1.16fr .92fr; gap: clamp(1.25rem, 2.4vw, 2.75rem); align-items: start; }
.home-business-gallery > a { min-width: 0; color: inherit; text-decoration: none; }
.home-business-gallery > a:first-child,
.home-business-gallery > a:last-child { margin-top: 4rem; }
.home-business-gallery figure { position: relative; aspect-ratio: 4 / 3; margin: 0 0 1.55rem; overflow: hidden; background: var(--paper); }
.home-business-gallery img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.82) contrast(1.03); transition: transform 600ms var(--ease), filter 300ms ease; }
.home-business-gallery > a:hover img { transform: scale(1.025); filter: saturate(1) contrast(1.03); }
.home-business-gallery figure.home-business-driver-visual {
  aspect-ratio: 3 / 4;
  background: #071116;
}
.home-business-gallery .home-business-driver-visual img {
  object-fit: contain;
  object-position: center;
  filter: none;
}
.home-business-gallery > a:hover .home-business-driver-visual img {
  filter: none;
}
.home-business-gallery span { display: block; margin-bottom: .85rem; color: var(--cyan-dark); font-size: .68rem; font-weight: 700; }
.home-business-gallery h3 { margin: 0 0 .65rem; font-size: clamp(1.25rem, 1.7vw, 1.7rem); line-height: 1.18; text-wrap: balance; }
.home-business-gallery p { max-width: 30rem; margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.6; text-wrap: pretty; }
.home-business-gallery b { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.15rem; color: var(--green-dark); font-size: .74rem; }
.home-business-gallery b svg { width: 1rem; height: 1rem; transition: transform 220ms ease; }
.home-business-gallery > a:hover b svg { transform: translateX(.25rem); }

@media (max-width: 1080px) {
  .home-chapter-nav .page-shell { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-chapter-nav a:nth-child(2) { border-right: 1px solid var(--line); }
  .home-five-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-five-ledger article,
  .home-five-ledger article:nth-child(5),
  .home-five-ledger article:last-child { min-height: 13rem; padding-inline: 1.35rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .home-five-ledger article:nth-child(2n) { border-right: 0; }
  .home-five-ledger article:first-child { padding-left: 1.35rem; }
  .home-five-ledger article:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
  .home-composition-layout { grid-template-columns: 1fr; }
  .home-camera-stage { grid-template-rows: auto minmax(24rem, 36rem) auto auto; }
  .home-business-gallery > a:first-child,
  .home-business-gallery > a:last-child { margin-top: 2rem; }
}

@media (max-width: 980px) {
  body[data-page="overview"] .site-header {
    grid-template-columns: 1fr auto;
  }
  body[data-page="overview"] .desktop-nav,
  body[data-page="overview"] .header-actions .button-light { display: none; }
  body[data-page="overview"] .site-header .menu-button { display: grid; }
}

@media (max-width: 720px) {
  body[data-page="overview"] .site-header {
    inset: 8px auto auto 50%;
    width: calc(100% - 20px);
    min-height: 56px;
    grid-template-columns: 1fr auto;
    padding: 0 10px 0 12px;
  }
  body[data-page="overview"] .site-header .brand-logo { width: 72px; height: 42px; }
  body[data-page="overview"] .header-actions .button-light { min-height: 36px; padding-inline: 11px; font-size: .7rem; }
  .home-section-nav-wrap { top: 68px; padding: 8px 0; }
  .home-section-nav { width: calc(100% - 20px); }
  .home-section-nav a { min-height: 44px; justify-content: center; gap: 0; padding: 0 .35rem; font-size: .64rem; }
  .home-section-nav span { display: none; }
  body[data-page="overview"] main section[id] { scroll-margin-top: 126px; }
  .home-chapter-nav .page-shell { width: 100%; grid-template-columns: 1fr 1fr; }
  .home-chapter-nav a { min-height: 6.4rem; padding: 1rem; }
  .home-chapter-nav a:nth-child(odd) { border-left: 0; }
  .home-chapter-nav a strong { font-size: .82rem; }
  .home-chapter-nav a small { font-size: .62rem; }
  .home-overview-section,
  .home-composition-section,
  .home-business-section { padding: 5.25rem 0 5.75rem; }
  .home-five-ledger { grid-template-columns: 1fr; }
  .home-five-ledger article,
  .home-five-ledger article:first-child,
  .home-five-ledger article:last-child { min-height: 9.5rem; padding: 1.4rem 0 1.6rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .home-five-ledger article:last-child { border-bottom: 0; }
  .home-five-ledger h3 { font-size: 1.12rem; }
  .home-five-ledger p { font-size: .82rem; }
  .home-composition-layout { gap: 2.5rem; }
  .home-camera-stage { grid-template-rows: auto minmax(17rem, 24rem) auto auto; }
  .home-camera-stage-head { align-items: flex-start; flex-direction: column; }
  .home-camera-states { grid-template-columns: 1fr; }
  .home-camera-states button,
  .home-camera-states button:nth-child(even) { padding-left: 0; border-right: 0; }
  .home-camera-states button.active { padding-left: .75rem; }
  .home-system-chain article { grid-template-columns: 2rem 2.25rem minmax(0, 1fr); gap: .8rem; }
  .home-system-chain-actions { align-items: flex-start; flex-direction: column; }
  .home-business-gallery { grid-template-columns: 1fr; gap: 3rem; }
  .home-business-gallery > a:first-child,
  .home-business-gallery > a:last-child { margin-top: 0; }
  .home-business-gallery figure { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  .home-camera-states .state-blink i { animation: none; }
}

/* Homepage hero product showcase */
.hero-conversion .hero-content {
  padding-top: 190px;
  padding-bottom: 72px;
}
.hero-conversion-actions { margin-top: 30px; }
.hero-product-wrap {
  display: grid;
  gap: 48px;
  padding-top: 18px;
  padding-bottom: 92px;
}

.hero-camera-feature {
  position: relative;
  min-height: 640px;
  display: grid;
  grid-template-columns: minmax(22rem, .88fr) minmax(28rem, 1.12fr);
  overflow: hidden;
  color: var(--white);
  background: #0d1512;
  border-radius: 8px;
  box-shadow: 0 40px 120px rgba(2, 9, 14, .5);
}
.hero-camera-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .025), transparent 42%);
  pointer-events: none;
}
.hero-camera-feature-copy {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.4rem 2.2rem 3.2rem 3rem;
}
.hero-showcase-kicker {
  margin: 0 0 1rem;
  color: var(--camera-light);
  font-size: .68rem;
  font-weight: 730;
  transition: color 320ms ease;
}
.hero-camera-feature-copy > h2 {
  max-width: 34rem;
  margin: 0;
  font-size: 2.35rem;
  line-height: 1.07;
  letter-spacing: 0;
  text-wrap: balance;
}
.hero-camera-feature-copy > p:not(.hero-showcase-kicker) {
  max-width: 35rem;
  margin: 1.15rem 0 0;
  color: #aeb8b1;
  font-size: .9rem;
  line-height: 1.62;
  text-wrap: pretty;
}
.hero-camera-feature-current {
  min-height: 82px;
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
  margin-top: 1.6rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.hero-camera-feature-current > i {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  background: var(--camera-light);
  border-radius: 50%;
  box-shadow: 0 0 16px var(--camera-light);
  transition: background 320ms ease, box-shadow 320ms ease;
}
.hero-camera-feature-current span { min-width: 0; }
.hero-camera-feature-current small,
.hero-camera-feature-current strong,
.hero-camera-feature-current b { display: block; }
.hero-camera-feature-current small { color: #7f9088; font-size: .58rem; }
.hero-camera-feature-current strong { margin-top: .25rem; color: var(--camera-light); font-size: 1rem; transition: color 320ms ease; }
.hero-camera-feature-current b { margin-top: .35rem; color: #aeb8b1; font-size: .67rem; font-weight: 480; line-height: 1.45; }
.hero-camera-feature-modes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin-top: 1rem;
}
.hero-camera-feature-modes button {
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .38rem;
  padding: 0 .35rem;
  color: #8d9b94;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  font-size: .58rem;
  font-weight: 650;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms var(--ease);
}
.hero-camera-feature-modes button:hover { color: var(--white); background: rgba(255, 255, 255, .08); }
.hero-camera-feature-modes button:active { transform: scale(.97); }
.hero-camera-feature-modes button.active { color: var(--white); border-color: currentColor; background: rgba(255, 255, 255, .08); }
.hero-camera-feature-modes button i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.hero-camera-feature-modes .state-green { color: #62ed71; }
.hero-camera-feature-modes .state-red { color: #ff4d52; }
.hero-camera-feature-modes .state-violet { color: #a86cff; }
.hero-camera-feature-modes .state-blink { color: var(--cyan); }
.hero-camera-feature-modes .state-orange { color: #ff9e35; }
.hero-camera-feature-modes .state-blink i { animation: cameraSearchBlink 720ms steps(2, end) infinite; }
.hero-camera-feature-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 1.15rem 0 0;
}
.hero-camera-feature-facts div { min-width: 0; padding-right: .8rem; }
.hero-camera-feature-facts div + div { padding-left: .8rem; border-left: 1px solid rgba(255, 255, 255, .14); }
.hero-camera-feature-facts dt { color: var(--white); font-size: .83rem; font-weight: 750; }
.hero-camera-feature-facts dd { margin: .2rem 0 0; color: #839188; font-size: .56rem; line-height: 1.4; }

.hero-camera-feature-visual {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.hero-camera-feature-visual::before {
  content: "";
  position: absolute;
  inset: 10% 4% 3%;
  background: radial-gradient(circle at center, rgb(var(--camera-light-rgb) / .11), transparent 62%);
  transition: background 320ms ease;
}
.hero-camera-feature-visual .hero-camera-render {
  z-index: 3;
  width: min(78%, 34rem);
  transform-origin: center;
}
.hero-camera-feature-visual .f4a-camera-light-surface {
  -webkit-mask-image: url("assets/cshark-spc-camera-right.webp?v=20260725-fast-load");
  mask-image: url("assets/cshark-spc-camera-right.webp?v=20260725-fast-load");
}
.hero-camera-orbit {
  position: absolute;
  z-index: 1;
  aspect-ratio: 1;
  border: 1px solid rgb(var(--camera-light-rgb) / .34);
  border-radius: 50%;
  transition: border-color 320ms ease;
}
.hero-camera-orbit::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;
  width: 8px;
  height: 8px;
  background: var(--camera-light);
  border-radius: 50%;
  box-shadow: 0 0 14px var(--camera-light);
  transition: background 320ms ease, box-shadow 320ms ease;
}
.hero-camera-orbit.orbit-one { width: 58%; animation: heroCameraOrbit 11s linear infinite; }
.hero-camera-orbit.orbit-two { width: 76%; animation: heroCameraOrbit 16s linear infinite reverse; }
.hero-camera-orbit.orbit-three { width: 94%; animation: heroCameraOrbit 22s linear infinite; }
@keyframes heroCameraOrbit { to { transform: rotate(360deg); } }
@media (max-width: 980px) {
  .hero-conversion .hero-content { padding-top: 170px; padding-bottom: 58px; }
  .hero-product-wrap { padding-top: 12px; padding-bottom: 78px; }
  .hero-camera-feature { grid-template-columns: minmax(20rem, .95fr) minmax(22rem, 1.05fr); }
  .hero-camera-feature-copy { padding: 2.7rem 1.4rem 2.7rem 2rem; }
  .hero-camera-feature-copy > h2 { font-size: 2rem; }
  .hero-camera-feature-modes button span { display: none; }
  .hero-camera-feature-modes button i { width: 10px; height: 10px; }
}

@media (max-width: 820px) {
  .hero-camera-feature { grid-template-columns: .9fr 1.1fr; }
  .hero-camera-feature-copy { padding: 2.2rem 1rem 2.2rem 1.4rem; }
  .hero-camera-feature-copy > h2 { font-size: 1.72rem; }
  .hero-camera-feature-copy > p:not(.hero-showcase-kicker) { font-size: .76rem; }
  .hero-camera-feature-current b { display: none; }
  .hero-camera-feature-facts { grid-template-columns: 1fr; gap: .4rem; }
  .hero-camera-feature-facts div,
  .hero-camera-feature-facts div + div { padding: 0; border-left: 0; }
  .hero-camera-feature-facts dd { display: inline; margin-left: .35rem; }
  .hero-camera-feature-facts dt { display: inline; }
  .hero-camera-feature-visual .hero-camera-render { width: min(92%, 29rem); }
}

@media (max-width: 680px) {
  .hero-conversion .hero-content { padding-top: 136px; padding-bottom: 48px; }
  .hero-positioning-subtitle { margin-top: 18px; }
  .hero-product-wrap { width: min(calc(100% - 18px), var(--shell)); gap: 28px; padding-top: 6px; padding-bottom: 48px; }
  .hero-camera-feature { display: block; min-height: 556px; }
  .hero-camera-feature-copy { position: absolute; inset: 0; z-index: 5; display: block; padding: 1.4rem 1.15rem; background: linear-gradient(0deg, rgba(7, 16, 12, .98) 0 29%, rgba(7, 16, 12, .62) 47%, transparent 70%); pointer-events: none; }
  .hero-showcase-kicker { margin-bottom: .55rem; font-size: .58rem; }
  .hero-camera-feature-copy > h2 { max-width: 18rem; font-size: 1.52rem; }
  .hero-camera-feature-copy > p:not(.hero-showcase-kicker) { display: none; }
  .hero-camera-feature-current { position: absolute; right: 1.15rem; bottom: 5.2rem; left: 1.15rem; min-height: 58px; margin: 0; padding: .7rem 0; pointer-events: auto; }
  .hero-camera-feature-current strong { font-size: .82rem; }
  .hero-camera-feature-modes { position: absolute; right: 1.15rem; bottom: 1rem; left: 1.15rem; margin: 0; pointer-events: auto; }
  .hero-camera-feature-modes button { min-height: 42px; }
  .hero-camera-feature-facts { display: none; }
  .hero-camera-feature-visual { position: absolute; inset: 0 0 7rem; }
  .hero-camera-feature-visual .hero-camera-render { width: min(76%, 20rem); margin-top: 8rem; }
  .hero-camera-orbit.orbit-one { width: 62%; }
  .hero-camera-orbit.orbit-two { width: 82%; }
  .hero-camera-orbit.orbit-three { width: 104%; }
}

@media (max-width: 420px) {
  .hero-camera-feature-copy > h2 { max-width: 16rem; font-size: 1.36rem; }
  .hero-camera-feature-current { bottom: 4.95rem; }
  .hero-camera-feature-modes button { min-height: 39px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-camera-orbit,
  .hero-camera-feature-visual .hero-camera-render,
  .hero-camera-feature-modes .state-blink i { animation: none; }
}

/* Editorial indexes shared by product, capability and project pages */
.module-delivery-status { display: none; }

.module-matrix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 42px;
  border-top: 1px solid var(--line);
}

.module-tile {
  position: relative;
  min-width: 0;
  min-height: 208px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: 18px;
  padding: 30px 0 28px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.module-tile > span:not(.module-delivery-status) {
  grid-column: 1;
  grid-row: 1 / -1;
  margin-top: 4px;
  color: var(--cyan-dark);
  font-size: 10px;
  font-weight: 720;
  line-height: 1;
}

.module-tile h3 {
  grid-column: 2;
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.25;
  text-wrap: balance;
}

.module-tile p {
  grid-column: 2;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.62;
  text-wrap: pretty;
}

.module-tile small {
  grid-column: 2;
  align-self: end;
  margin-top: 26px;
  color: #748078;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.35;
  text-transform: uppercase;
}

.page-band-dark .module-matrix { border-top-color: var(--line-dark); }
.page-band-dark .module-tile {
  color: var(--white);
  border-bottom-color: var(--line-dark);
}
.page-band-dark .module-tile > span:not(.module-delivery-status) { color: var(--cyan); }
.page-band-dark .module-tile h3 { color: var(--white); }
.page-band-dark .module-tile p { color: #aeb8b1; }
.page-band-dark .module-tile small { color: #7f9088; }

.module-tile-extension { background: transparent; border-color: var(--line); }
.page-band-dark .module-tile-extension { border-color: var(--line-dark); }
.module-tile-extension > span:not(.module-delivery-status),
.page-band-dark .module-tile-extension > span:not(.module-delivery-status) { color: var(--coral); }
.module-tile-extension small { color: #9d7346; }

.module-tile-link {
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease, padding 220ms var(--ease), background 180ms ease;
}
.module-tile-link::after {
  content: "";
  position: absolute;
  top: 30px;
  right: 0;
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}
.module-tile-link:hover {
  z-index: auto;
  padding-inline: 10px;
  color: var(--cyan-dark);
  background: rgba(255, 255, 255, .5);
  border-color: var(--line);
  transform: none;
}
.page-band-dark .module-tile-link:hover {
  color: var(--cyan);
  background: rgba(255, 255, 255, .035);
  border-color: var(--line-dark);
}
.module-tile-link:hover h3 { color: currentColor; }

@media (max-width: 1180px) {
  .module-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 34px;
  }
}

@media (max-width: 680px) {
  .module-matrix { grid-template-columns: 1fr; }
  .module-tile {
    min-height: 0;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 12px;
    padding: 24px 0 26px;
  }
  .module-tile h3 { font-size: 18px; }
  .module-tile p { margin-top: 10px; font-size: 12px; }
  .module-tile small { margin-top: 18px; }
  .module-tile-link:hover { padding-inline: 7px; }
}

/* Operator interface: current CShark product language */
.desktop-product-mockup {
  width: calc(100% - 118px);
  overflow: visible;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
.desktop-product-mockup:hover {
  box-shadow: none;
  transform: none;
}
.operator-ui {
  position: relative;
  min-height: 670px;
  overflow: hidden;
  color: #172019;
  background: #edf0e8;
  border: 1px solid rgba(20, 41, 30, .18);
  border-radius: 8px;
  box-shadow: 0 34px 90px rgba(27, 38, 30, .2);
  font-variant-numeric: tabular-nums;
}
.operator-ui button {
  border-radius: 4px;
  cursor: pointer;
}
.operator-ui button:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}
.operator-ui svg {
  width: 1em;
  height: 1em;
  stroke-width: 1.7;
}
.operator-ui-header {
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.2fr) minmax(210px, .8fr);
  align-items: center;
  gap: 22px;
  padding: 8px 16px;
  color: #f6f7f2;
  background: #121511;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.operator-ui-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.operator-ui-brand img {
  width: 54px;
  height: 34px;
  object-fit: contain;
  object-position: left center;
}
.operator-ui-brand span {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.operator-ui-brand strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.operator-ui-brand small {
  overflow: hidden;
  color: #9da69d;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.operator-ui-tabs {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 3px;
  background: #20251f;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 6px;
}
.operator-ui-tabs button {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 10px;
  color: #aeb6ad;
  background: transparent;
  border: 0;
  font-size: 10px;
  font-weight: 600;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}
.operator-ui-tabs button:hover { color: #fff; }
.operator-ui-tabs button:active { transform: scale(.98); }
.operator-ui-tabs button.is-active {
  color: #152016;
  background: #f4f5ee;
}
.operator-ui-tabs svg { font-size: 14px; }
.operator-ui-online {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  color: #c5ccc3;
  font-size: 8px;
}
.operator-ui-online i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(201, 245, 74, .75);
}
.operator-ui-online b {
  margin-inline-start: 8px;
  color: #fff;
  font-size: 9px;
}
.operator-ui-body {
  min-height: 606px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 286px;
}
.operator-ui-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 9px;
  background: #f7f8f3;
  border-inline-end: 1px solid rgba(20, 41, 30, .12);
}
.operator-ui-rail button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #3f4c43;
  background: transparent;
  border: 0;
  font-size: 17px;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}
.operator-ui-rail button:hover { background: #e8ece4; }
.operator-ui-rail button:active { transform: scale(.96); }
.operator-ui-rail button.is-active {
  color: #152016;
  background: var(--cyan);
}
.operator-ui-main {
  min-width: 0;
  padding: 20px;
  background: #f3f5ef;
}
.operator-ui-view {
  min-width: 0;
  opacity: 0;
  transform: translateY(8px);
}
.operator-ui-view.is-active {
  opacity: 1;
  transform: translateY(0);
  animation: operatorViewIn 260ms var(--ease);
}
@keyframes operatorViewIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.operator-ui-title {
  min-height: 58px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.operator-ui-title > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.operator-ui-title small {
  color: #167055;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
}
.operator-ui-title h3 {
  margin: 0;
  font-size: clamp(20px, 2vw, 29px);
  line-height: 1.05;
  text-wrap: balance;
}
.operator-ui-title p {
  margin: 2px 0 0;
  color: #6d776e;
  font-size: 9px;
}
.operator-ui-title > button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #405047;
  background: transparent;
  border: 1px solid rgba(20, 41, 30, .16);
  font-size: 14px;
}
.operator-ui-title > button:hover { background: #e7ebe3; }
.operator-ui-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 16px 0 14px;
  border-top: 1px solid rgba(20, 41, 30, .14);
  border-bottom: 1px solid rgba(20, 41, 30, .14);
}
.operator-ui-metrics > div {
  min-width: 0;
  min-height: 78px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  gap: 1px 8px;
  padding: 10px 14px;
}
.operator-ui-metrics > div + div { border-inline-start: 1px solid rgba(20, 41, 30, .14); }
.operator-ui-metrics span {
  color: #677168;
  font-size: 8px;
  font-weight: 650;
  text-transform: uppercase;
}
.operator-ui-metrics strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-size: 24px;
  line-height: 1;
}
.operator-ui-metrics small {
  color: #879087;
  font-size: 7px;
}
.operator-map {
  min-width: 0;
  overflow: hidden;
  background: #e7ebe3;
  border: 1px solid rgba(20, 41, 30, .16);
  border-radius: 4px;
}
.operator-map-head {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 10px;
  color: #667168;
  background: rgba(255, 255, 255, .56);
  border-bottom: 1px solid rgba(20, 41, 30, .12);
  font-size: 7px;
}
.operator-map-head b {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #12684f;
}
.operator-map-head b i {
  width: 6px;
  height: 6px;
  background: var(--cyan);
  border-radius: 50%;
}
.operator-space-row {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 4px;
  padding: 7px;
}
.operator-space {
  position: relative;
  min-width: 0;
  height: 84px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  overflow: hidden;
  color: #526057;
  background: #f8f9f5;
  border: 1px solid rgba(20, 41, 30, .16);
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.operator-space:hover {
  z-index: 1;
  color: #152016;
  border-color: #166e54;
  transform: translateY(-2px);
}
.operator-space:active { transform: translateY(0) scale(.98); }
.operator-space > span {
  position: absolute;
  top: 5px;
  left: 6px;
  color: #677269;
  font-size: 6px;
  font-weight: 700;
}
.operator-space > svg {
  width: 24px;
  height: 24px;
}
.operator-space > small {
  max-width: calc(100% - 8px);
  overflow: hidden;
  font-size: 6px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.operator-space--free { color: #197159; background: #eef7dc; }
.operator-space--occupied { color: #eff3ec; background: #66736a; }
.operator-space--occupied > span { color: #d8ded7; }
.operator-space--accessible { color: #5f3ea7; background: #eee9ff; }
.operator-space--attention { color: #805a18; background: #fff0d8; }
.operator-space.is-selected {
  z-index: 2;
  color: #152016;
  background: var(--cyan);
  border-color: #0d6048;
  box-shadow: inset 0 0 0 2px #0d6048;
}
.operator-space.is-selected > span { color: #173a2c; }
.operator-aisle {
  position: relative;
  min-height: 66px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  color: #5b6e62;
  background: #d8dfd6;
  border-top: 1px dashed #9aa89e;
  border-bottom: 1px dashed #9aa89e;
}
.operator-aisle > div {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.operator-aisle > div svg {
  width: 14px;
  color: #2b8168;
}
.operator-aisle > span {
  color: #6d796f;
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase;
}
.operator-camera-node {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  color: #152016;
  background: var(--cyan);
  border: 2px solid #f3f5ef;
  border-radius: 4px;
  box-shadow: 0 5px 15px rgba(26, 58, 42, .18);
  transform: translate(-50%, -50%);
}
.operator-camera-node--left { left: 16.6667%; }
.operator-camera-node--center { left: 50%; }
.operator-camera-node--right { left: 83.3333%; }
.operator-camera-node svg { width: 13px; }
.operator-camera-node small { font-size: 6px; }
.operator-inspector {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 18px;
  color: #eef1e9;
  background: #171b16;
  border-inline-start: 1px solid rgba(255, 255, 255, .12);
}
.operator-inspector-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.operator-inspector-head > span {
  grid-column: 1 / -1;
  color: #8f9a8f;
  font-size: 8px;
  text-transform: uppercase;
}
.operator-inspector-head strong {
  font-size: 24px;
  line-height: 1;
}
.operator-inspector-head b {
  align-self: center;
  padding: 5px 7px;
  color: #142116;
  background: var(--cyan);
  border-radius: 3px;
  font-size: 7px;
  text-transform: uppercase;
}
.desktop-product-mockup .operator-inspector-media {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 14px 0 0;
  overflow: hidden;
  background: #222922;
  border-radius: 4px;
}
.desktop-product-mockup .operator-inspector-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.8) contrast(1.04);
}
.operator-inspector-media::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(to top, rgba(10, 16, 12, .72), transparent 52%);
  pointer-events: none;
}
.operator-inspector-media figcaption {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}
.operator-inspector-media figcaption small {
  color: #dbe1d9;
  font-size: 6px;
}
.operator-inspector-media figcaption strong {
  padding: 5px 7px;
  color: #111810;
  background: #f6f7f2;
  border-radius: 3px;
  font-size: 11px;
}
.operator-inspector-vehicle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.operator-inspector-vehicle small {
  grid-column: 1 / -1;
  color: #899489;
  font-size: 7px;
  text-transform: uppercase;
}
.operator-inspector-vehicle strong { font-size: 13px; }
.operator-inspector-vehicle span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #b8c2b6;
  font-size: 6px;
}
.operator-inspector-vehicle span i {
  width: 6px;
  height: 6px;
  background: var(--cyan);
  border-radius: 50%;
}
.operator-inspector-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
}
.operator-inspector-facts > div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 12px 8px 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.operator-inspector-facts > div:nth-child(even) {
  padding-inline: 10px 0;
  border-inline-start: 1px solid rgba(255, 255, 255, .14);
}
.operator-inspector-facts dt {
  color: #879287;
  font-size: 7px;
}
.operator-inspector-facts dd {
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-size: 10px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.operator-inspector-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}
.operator-inspector-actions button {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px;
  color: #d8dfd6;
  background: #252b24;
  border: 1px solid rgba(255, 255, 255, .13);
  font-size: 7px;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.operator-inspector-actions button:hover {
  color: #fff;
  background: #30382f;
  border-color: rgba(201, 245, 74, .55);
}
.operator-inspector-actions button:active { transform: scale(.98); }
.operator-inspector.is-free .operator-inspector-media img {
  opacity: .18;
  filter: grayscale(1);
}
.operator-inspector.is-free .operator-inspector-head b { background: #eef7dc; }
.operator-event-list {
  display: grid;
  margin-top: 28px;
  border-top: 1px solid rgba(20, 41, 30, .15);
}
.operator-event-list article {
  min-height: 102px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 15px 8px;
  border-bottom: 1px solid rgba(20, 41, 30, .15);
}
.operator-event-list article > svg {
  width: 40px;
  height: 40px;
  padding: 10px;
  color: #12684f;
  background: #e6ebdf;
  border-radius: 4px;
}
.operator-event-list article.is-attention > svg {
  color: #805a18;
  background: #fff0d8;
}
.operator-event-list article > div { display: grid; gap: 5px; }
.operator-event-list strong { font-size: 13px; }
.operator-event-list span { color: #6f796f; font-size: 8px; }
.operator-event-list article > b {
  color: #a2aaa2;
  font-size: 9px;
}
.operator-analytics-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 24px;
  background: rgba(20, 41, 30, .14);
  border: 1px solid rgba(20, 41, 30, .14);
}
.operator-analytics-metrics > div {
  min-height: 114px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 16px;
  background: #f7f8f3;
}
.operator-analytics-metrics span {
  color: #667168;
  font-size: 8px;
}
.operator-analytics-metrics strong {
  font-size: 29px;
  line-height: 1;
}
.operator-analytics-metrics em {
  color: #167055;
  font-size: 8px;
  font-style: normal;
}
.operator-analytics-metrics small { color: #7a847b; font-size: 8px; }
.operator-bars {
  display: grid;
  gap: 13px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(20, 41, 30, .15);
}
.operator-bars > strong {
  margin-bottom: 4px;
  font-size: 11px;
}
.operator-bars > div {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  font-size: 8px;
}
.operator-bars i {
  position: relative;
  height: 7px;
  overflow: hidden;
  background: #dfe4dc;
  border-radius: 1px;
}
.operator-bars i::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--value);
  content: "";
  background: #167055;
}
.operator-bars b { text-align: right; }

@media (max-width: 1180px) {
  .desktop-product-mockup { width: calc(100% - 76px); }
  .operator-ui { min-height: 610px; }
  .operator-ui-header {
    grid-template-columns: minmax(180px, .8fr) minmax(280px, 1.2fr) auto;
    gap: 12px;
  }
  .operator-ui-body {
    min-height: 546px;
    grid-template-columns: 52px minmax(0, 1fr) 246px;
  }
  .operator-ui-main { padding: 16px; }
  .operator-space { height: 71px; }
  .operator-inspector { padding: 15px; }
  .operator-inspector-actions { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .desktop-product-mockup { width: calc(100% - 54px); }
  .operator-ui { min-height: 560px; }
  .operator-ui-header { grid-template-columns: minmax(170px, .8fr) minmax(250px, 1.2fr); }
  .operator-ui-online { display: none; }
  .operator-ui-body {
    min-height: 496px;
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .operator-inspector { display: none; }
  .operator-ui-title h3 { font-size: 22px; }
  .operator-space { height: 66px; }
}

@media (max-width: 680px) {
  .interface-mockup-stage { min-height: 0; }
  .desktop-product-mockup { width: 100%; overflow: hidden; }
  .operator-ui {
    min-height: 476px;
    border-radius: 6px;
    box-shadow: 0 22px 55px rgba(27, 38, 30, .18);
  }
  .operator-ui-header {
    min-height: 54px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 7px 9px;
  }
  .operator-ui-brand img { width: 42px; }
  .operator-ui-brand strong { font-size: 9px; }
  .operator-ui-brand small { font-size: 6px; }
  .operator-ui-tabs {
    display: flex;
    background: transparent;
    border: 0;
  }
  .operator-ui-tabs button {
    width: 34px;
    min-height: 34px;
    padding: 0;
    background: #242923;
    border-radius: 4px;
  }
  .operator-ui-tabs button span { display: none; }
  .operator-ui-tabs button.is-active { background: var(--cyan); }
  .operator-ui-body {
    min-height: 422px;
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .operator-ui-rail { gap: 5px; padding: 9px 5px; }
  .operator-ui-rail button { width: 30px; height: 30px; font-size: 14px; }
  .operator-ui-main { padding: 12px 9px; }
  .operator-ui-title { min-height: 52px; }
  .operator-ui-title h3 { font-size: 18px; }
  .operator-ui-title p { font-size: 7px; }
  .operator-ui-title > button { width: 30px; height: 30px; }
  .operator-ui-metrics { margin: 10px 0; }
  .operator-ui-metrics > div { min-height: 58px; display: grid; grid-template-columns: 1fr; padding: 7px; }
  .operator-ui-metrics strong { grid-row: auto; grid-column: auto; font-size: 18px; }
  .operator-ui-metrics small { display: none; }
  .operator-space-row { gap: 2px; padding: 4px; }
  .operator-space { height: 43px; gap: 1px; border-radius: 2px; }
  .operator-space > span { top: 3px; left: 3px; font-size: 4px; }
  .operator-space > svg { width: 14px; height: 14px; }
  .operator-space > small { font-size: 4px; }
  .operator-aisle { min-height: 44px; padding: 4px 7px; }
  .operator-aisle > span { display: none; }
  .operator-aisle > div { gap: 5px; }
  .operator-camera-node { padding: 4px; }
  .operator-camera-node small { display: none; }
  .operator-event-list { margin-top: 14px; }
  .operator-event-list article { min-height: 75px; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; padding: 10px 4px; }
  .operator-event-list article > svg { width: 32px; height: 32px; padding: 8px; }
  .operator-event-list strong { font-size: 9px; }
  .operator-event-list span { font-size: 6px; }
  .operator-analytics-metrics { grid-template-columns: 1fr 1fr; margin-top: 12px; }
  .operator-analytics-metrics > div { min-height: 72px; padding: 10px; }
  .operator-analytics-metrics strong { font-size: 20px; }
  .operator-bars { gap: 7px; margin-top: 13px; padding-top: 12px; }
  .mobile-product-mockup { margin-top: -12px; }
}

html[dir="rtl"] .operator-space > span {
  right: 6px;
  left: auto;
}
html[dir="rtl"] .desktop-product-mockup .operator-ui {
  direction: rtl;
  text-align: right;
}
html[dir="rtl"] .desktop-product-mockup .operator-map {
  direction: ltr;
  text-align: left;
}
html[dir="rtl"] .operator-bars i::after {
  right: 0;
  left: auto;
}

/* Client phone mockup on the vehicle-search page. */
.find-car-hero-visual.find-client-phone-host {
  min-height: 720px;
  display: grid;
  place-items: center;
  padding: 10px;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.find-client-phone-stage {
  width: 100%;
  min-height: 700px;
  display: grid;
  place-items: center;
}

.find-client-phone {
  position: relative;
  width: min(100%, 370px);
  padding: 11px 10px 13px;
  overflow: hidden;
  color: #f4f7f6;
  background: #050d12;
  border: 1px solid #314750;
  border-radius: 48px;
  box-shadow: 0 34px 72px rgba(17, 31, 28, .26);
}

.find-client-phone::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 78px;
  right: -3px;
  width: 3px;
  height: 92px;
  background: #263942;
  border-radius: 2px;
}

.find-client-phone-hardware {
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
}

.find-client-phone-hardware span {
  width: 78px;
  height: 5px;
  background: #233740;
  border-radius: 4px;
}

.find-client-phone-hardware i {
  width: 6px;
  height: 6px;
  background: #233740;
  border-radius: 50%;
}

.find-client-phone-screen {
  padding: 9px 10px 12px;
  overflow: hidden;
  background: #071116;
  border-radius: 37px;
}

.find-client-statusbar,
.find-client-appbar,
.find-client-auth,
.find-client-result-head small,
.find-client-route span,
.find-client-route-button,
.find-client-phone-footer {
  display: flex;
  align-items: center;
}

.find-client-statusbar {
  justify-content: space-between;
  min-height: 28px;
  padding-inline: 7px;
  color: #8fa2aa;
  font-size: 10px;
}

.find-client-statusbar b {
  font-weight: 650;
}

.find-client-appbar {
  justify-content: space-between;
  min-height: 48px;
  gap: 16px;
  border-bottom: 1px solid #1f343d;
}

.find-client-appbar img {
  width: 72px;
  height: auto;
}

.find-client-appbar strong {
  color: #aebcc1;
  font-size: 12px;
  font-weight: 700;
}

.find-client-search {
  padding: 12px 0;
}

.find-client-auth {
  gap: 6px;
  margin-bottom: 9px;
  color: #72d9c3;
  font-size: 9px;
  font-weight: 650;
}

.find-client-auth svg {
  width: 13px;
  height: 13px;
}

.find-client-search label {
  display: block;
  margin-bottom: 6px;
  color: #8fa2aa;
  font-size: 9px;
  font-weight: 650;
}

.find-client-search > div:last-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 43px;
  gap: 6px;
}

.find-client-search input {
  min-width: 0;
  height: 43px;
  padding: 0 12px;
  color: #f4f7f6;
  background: #10222a;
  border: 1px solid #30464f;
  border-radius: 5px;
  outline: 0;
  font: inherit;
  font-size: 16px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.find-client-search input:focus {
  border-color: #74d8e8;
  box-shadow: 0 0 0 2px rgba(116, 216, 232, .16);
}

.find-client-search button {
  display: grid;
  place-items: center;
  color: #071116;
  background: #74d8e8;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

.find-client-search button svg {
  width: 18px;
  height: 18px;
}

.find-client-search.is-searching button svg {
  animation: findClientSearch .65s linear infinite;
}

.find-client-result {
  transition: opacity .2s ease, transform .2s ease;
}

.find-client-result.is-found {
  animation: findClientResult .45s ease both;
}

.find-client-result-head {
  display: grid;
  gap: 3px;
  padding: 14px;
  color: #071116;
  background: #74d8e8;
  border-radius: 6px;
}

.find-client-result-head > span {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.find-client-result-head > strong {
  font-size: 28px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.find-client-result-head small {
  gap: 7px;
  margin-top: 3px;
  font-size: 9px;
}

.find-client-result-head small i,
.find-client-phone-footer b i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: #087653;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(8, 118, 83, .55);
}

.find-client-result figure {
  position: relative;
  height: 190px;
  margin: 7px 0;
  overflow: hidden;
  background: #0f2028;
  border: 1px solid #30464f;
  border-radius: 6px;
}

.find-client-result figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 34%, rgba(4, 12, 17, .9) 100%);
}

.find-client-result figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.find-client-result figcaption {
  position: absolute;
  z-index: 1;
  right: 14px;
  bottom: 13px;
  left: 14px;
  display: grid;
  gap: 2px;
}

.find-client-result figcaption span {
  color: #a7b7bc;
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
}

.find-client-result figcaption strong {
  font-size: 24px;
  line-height: 1;
}

.find-client-result figcaption small {
  color: #c4d0d4;
  font-size: 10px;
}

.find-client-route {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  color: #c4d0d4;
  background: #0f2028;
  border: 1px solid #30464f;
  border-radius: 6px;
}

.find-client-route span {
  gap: 7px;
  font-size: 10px;
}

.find-client-route span svg {
  width: 15px;
  height: 15px;
  color: #74d8e8;
}

.find-client-route > b {
  width: 1px;
  height: 8px;
  margin-left: 7px;
  background: #74d8e8;
}

.find-client-session {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 7px;
  background: #0f2028;
  border: 1px solid #30464f;
  border-radius: 6px;
}

.find-client-session > span {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
}

.find-client-session > span + span {
  border-left: 1px solid #30464f;
}

.find-client-session small {
  color: #8fa2aa;
  font-size: 9px;
}

.find-client-session strong {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.find-client-route-button {
  width: 100%;
  min-height: 46px;
  justify-content: center;
  gap: 8px;
  margin-top: 7px;
  color: #071116;
  background: #c9f54a;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.find-client-route-button svg {
  width: 17px;
  height: 17px;
}

.find-client-phone-footer {
  justify-content: space-between;
  min-height: 30px;
  gap: 10px;
  padding: 8px 5px 0;
  color: #71868e;
  font-size: 8px;
  text-transform: uppercase;
}

.find-client-phone-footer b {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #c9f54a;
  font-weight: 650;
}

.find-client-phone-footer b i {
  background: #c9f54a;
  box-shadow: 0 0 8px rgba(201, 245, 74, .68);
}

@keyframes findClientSearch {
  to { transform: rotate(360deg); }
}

@keyframes findClientResult {
  0% { opacity: .5; transform: translateY(5px); }
  100% { opacity: 1; transform: none; }
}

@media (max-width: 1180px) {
  .find-car-hero-visual.find-client-phone-host { min-height: 680px; }
  .find-client-phone-stage { min-height: 660px; }
  .find-client-phone { width: min(100%, 338px); }
  .find-client-result figure { height: 165px; }
}

@media (max-width: 980px) {
  .find-car-hero-visual.find-client-phone-host { min-height: 710px; padding-block: 20px; }
  .find-client-phone-stage { min-height: 680px; }
  .find-client-phone { width: min(100%, 360px); }
  .find-client-result figure { height: 180px; }
}

@media (max-width: 680px) {
  .find-car-hero-visual.find-client-phone-host {
    min-height: 660px;
    padding: 0;
  }
  .find-client-phone-stage { min-height: 650px; }
  .find-client-phone {
    width: min(100%, 330px);
    padding: 9px 8px 11px;
    border-radius: 42px;
  }
  .find-client-phone-screen { padding: 7px 8px 10px; border-radius: 33px; }
  .find-client-appbar { min-height: 42px; }
  .find-client-search { padding-block: 9px; }
  .find-client-result figure { height: 160px; }
  .find-client-result-head { padding: 11px; }
  .find-client-result-head > strong { font-size: 24px; }
  .find-client-route { padding: 8px 10px; }
  .find-client-session > span { padding: 8px 10px; }
  .find-client-route-button { min-height: 42px; }
}

html[dir="rtl"] .find-client-phone {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .find-client-search input,
html[dir="rtl"] .find-client-phone-plate {
  direction: ltr;
  text-align: left;
}

html[dir="rtl"] .find-client-session > span + span {
  border-right: 1px solid #30464f;
  border-left: 0;
}

html[dir="rtl"] .find-client-route > b {
  margin-right: 7px;
  margin-left: 0;
}

/* Reusable opening laptop: product interface reveal */
.interface-mockup-stage.has-opening-laptop {
  min-height: 790px;
}

.opening-laptop {
  position: relative;
  width: calc(100% - 118px);
  min-height: 750px;
  perspective: 1800px;
  isolation: isolate;
}

.opening-laptop-intro {
  position: absolute;
  z-index: 8;
  top: 112px;
  left: 50%;
  width: min(540px, 78%);
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  transform: translateX(-50%);
  transition: opacity 260ms ease, transform 420ms var(--ease);
}

.opening-laptop-intro span {
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.opening-laptop-intro strong {
  color: var(--ink);
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1.06;
  text-wrap: balance;
}

.opening-laptop-intro p {
  max-width: 480px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}

.opening-laptop-device {
  position: absolute;
  z-index: 2;
  inset: 0 0 16px;
  transform: translateY(-208px);
  transform-style: preserve-3d;
  transition: transform 1050ms cubic-bezier(.18, .82, .2, 1);
}

.opening-laptop-display {
  position: absolute;
  right: 1.6%;
  bottom: 37px;
  left: 1.6%;
  aspect-ratio: 16 / 9;
  transform: rotateX(-88deg);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  transition: transform 1150ms cubic-bezier(.16, .84, .18, 1);
  will-change: transform;
}

.opening-laptop-display::after {
  content: "";
  position: absolute;
  z-index: 9;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .88), rgba(181, 188, 183, .78) 45%, rgba(244, 245, 242, .94));
  border: 1px solid #9da59f;
  border-radius: 12px 12px 5px 5px;
  box-shadow: inset 0 1px 0 #fff;
  backface-visibility: hidden;
  opacity: 1;
  transition: opacity 180ms ease 130ms;
}

.opening-laptop-screen {
  position: absolute;
  inset: 0;
  padding: 11px 11px 14px;
  overflow: hidden;
  background: #171c19;
  border: 1px solid #6d756f;
  border-radius: 12px 12px 5px 5px;
  box-shadow: 0 28px 74px rgba(18, 28, 23, .24);
  backface-visibility: hidden;
}

.opening-laptop-screen::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: 4px;
  left: 50%;
  width: 4px;
  height: 4px;
  background: #4b5650;
  border-radius: 50%;
  transform: translateX(-50%);
}

.opening-laptop-screen .desktop-product-mockup {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.opening-laptop-screen .operator-ui {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 4px;
  box-shadow: none;
}

.opening-laptop-hinge {
  position: absolute;
  z-index: 6;
  right: 12%;
  bottom: 29px;
  left: 12%;
  height: 12px;
  background: linear-gradient(180deg, #aeb5b0, #727b75 55%, #cbd0cc);
  border-radius: 8px;
  box-shadow: 0 2px 3px rgba(20, 28, 23, .2);
}

.opening-laptop-base {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  height: 36px;
  background: linear-gradient(180deg, #f0f1ef, #b7bdb9 52%, #878f89 54%, #d8dcd9);
  border: 1px solid #9ca49e;
  border-radius: 3px 3px 14px 14px;
  box-shadow: 0 14px 22px rgba(31, 40, 34, .2), inset 0 1px 0 #fff;
  clip-path: polygon(2% 0, 98% 0, 100% 48%, 98% 100%, 2% 100%, 0 48%);
}

.opening-laptop-base i {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 90px;
  height: 5px;
  background: rgba(111, 120, 114, .35);
  border-radius: 0 0 5px 5px;
  transform: translateX(-50%);
}

.opening-laptop-trigger {
  position: absolute;
  z-index: 10;
  right: 7%;
  bottom: -54px;
  left: 7%;
  height: 106px;
  display: flex;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.opening-laptop-trigger:focus-visible {
  outline: 3px solid var(--green-dark);
  outline-offset: -3px;
}

.opening-laptop-screen-edge {
  position: absolute;
  z-index: 14;
  top: 0;
  right: 6%;
  left: 6%;
  height: 14px;
  padding: 0;
  background: transparent;
  border: 0;
  pointer-events: none;
  cursor: pointer;
}

.opening-laptop-screen-edge:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -3px;
}

.opening-laptop-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.opening-laptop.is-open .opening-laptop-intro {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -18px);
}

.opening-laptop.is-open .opening-laptop-device {
  transform: translateY(0);
}

.opening-laptop.is-open .opening-laptop-display {
  transform: rotateX(0deg);
}

.opening-laptop.is-open .opening-laptop-display::after {
  opacity: 0;
  transition-delay: 0ms;
}

.opening-laptop.is-open .opening-laptop-trigger {
  opacity: 0;
  pointer-events: none;
}

.opening-laptop.is-open .opening-laptop-screen-edge {
  pointer-events: auto;
}

.has-opening-laptop .mobile-product-mockup {
  opacity: 0;
  pointer-events: none;
  animation: none;
  transform: translateY(22px);
  transition: opacity 320ms ease, transform 520ms var(--ease);
}

.has-opening-laptop.is-program-open .mobile-product-mockup {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 850ms;
}

@media (max-width: 1180px) {
  .interface-mockup-stage.has-opening-laptop { min-height: 700px; }
  .opening-laptop { width: calc(100% - 72px); min-height: 660px; }
  .opening-laptop-device { transform: translateY(-170px); }
  .opening-laptop-intro { top: 94px; }
}

@media (max-width: 680px) {
  .interface-mockup-stage.has-opening-laptop {
    min-height: 0;
    display: grid;
  }

  .opening-laptop {
    width: 100%;
    min-height: 500px;
  }

  .opening-laptop-intro {
    top: 50px;
    width: 92%;
    gap: 9px;
  }

  .opening-laptop-intro span { font-size: 9px; }
  .opening-laptop-intro strong { font-size: 29px; }
  .opening-laptop-intro p { max-width: 310px; font-size: 12px; }

  .opening-laptop-device {
    bottom: 8px;
    transform: translateY(-132px);
  }

  .opening-laptop.is-open .opening-laptop-device {
    transform: translateY(-104px);
  }

  .opening-laptop-display {
    right: 0;
    bottom: 31px;
    left: 0;
    aspect-ratio: 16 / 9;
  }

  .opening-laptop-screen {
    padding: 5px 5px 7px;
    border-radius: 7px 7px 3px 3px;
  }

  .opening-laptop-screen .desktop-product-mockup {
    width: 333.333%;
    height: 333.333%;
    transform: scale(.3);
    transform-origin: 0 0;
  }

  .opening-laptop-screen .operator-ui {
    min-height: 560px;
  }

  .opening-laptop-base { height: 28px; border-radius: 2px 2px 10px 10px; }
  .opening-laptop-hinge { bottom: 22px; height: 9px; }
  .opening-laptop-base i { top: 5px; width: 58px; height: 4px; }
  .opening-laptop-trigger { bottom: -46px; height: 88px; }
  .opening-laptop-screen-edge { height: 18px; }

  .has-opening-laptop .mobile-product-mockup {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .opening-laptop-device,
  .opening-laptop-display,
  .opening-laptop-intro,
  .opening-laptop-screen-edge,
  .has-opening-laptop .mobile-product-mockup {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}

/* Homepage information architecture: system -> cycle -> composition */
.home-working-cycle {
  margin-top: clamp(4.5rem, 8vw, 7.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.home-working-cycle-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(16rem, .65fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: end;
  margin-bottom: 2.5rem;
}

.home-working-cycle-head h3 {
  max-width: 48rem;
  margin: .8rem 0 0;
  font-size: clamp(1.8rem, 3.25vw, 3.35rem);
  line-height: 1.04;
  text-wrap: balance;
}

.home-working-cycle-head > p {
  max-width: 28rem;
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.6;
}

.home-working-cycle-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.home-working-cycle-rail li {
  position: relative;
  min-width: 0;
  min-height: 11.5rem;
  display: flex;
  flex-direction: column;
  padding: 1.45rem 1.35rem 1.35rem;
  border-right: 1px solid var(--line);
}

.home-working-cycle-rail li:first-child { padding-left: 0; }
.home-working-cycle-rail li:last-child { padding-right: 0; border-right: 0; }
.home-working-cycle-rail li:not(:last-child)::after {
  content: "→";
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 0;
  width: 1.45rem;
  height: 1.45rem;
  display: grid;
  place-items: center;
  color: var(--green-dark);
  background: var(--paper);
  transform: translate(50%, -50%);
}

.home-working-cycle-rail span {
  color: var(--cyan-dark);
  font-size: .68rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.home-working-cycle-rail strong {
  max-width: 12rem;
  margin-top: auto;
  font-size: 1.05rem;
  line-height: 1.25;
  text-wrap: balance;
}

.home-working-cycle-rail small {
  margin-top: .55rem;
  color: var(--muted);
  font-size: .65rem;
  text-transform: uppercase;
}

.home-composition-flow {
  display: grid;
  gap: clamp(3.5rem, 7vw, 6.5rem);
}

.composition-camera-feature {
  width: 100%;
  min-height: 38rem;
  margin: 0;
  border-top: 1px solid var(--panel-line);
  border-bottom: 1px solid var(--panel-line);
  border-radius: 0;
  box-shadow: none;
}

.composition-camera-feature .hero-camera-feature-copy > h2 {
  max-width: 37rem;
  font-size: clamp(2rem, 3.2vw, 3.25rem);
}

.composition-camera-feature .hero-camera-feature-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.composition-camera-feature .hero-camera-feature-facts div {
  padding: 0 .8rem;
}

.composition-camera-feature .hero-camera-feature-facts div:first-child { padding-left: 0; }
.composition-camera-feature .hero-camera-feature-facts div + div {
  padding-left: .8rem;
  border-left: 1px solid rgba(255, 255, 255, .14);
}

.composition-camera-feature .hero-camera-feature-copy > .link-arrow {
  margin-top: 1.5rem;
  color: var(--white);
}

.composition-camera-feature .hero-camera-feature-copy > .link-arrow:hover { color: var(--cyan); }
.composition-camera-feature .hero-camera-feature-visual .f4a-camera-light-surface {
  -webkit-mask-image: url("assets/cshark-spc-dspc-camera.webp?v=20260725-fast-load");
  mask-image: url("assets/cshark-spc-dspc-camera.webp?v=20260725-fast-load");
}

.home-composition-flow .home-system-chain {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.home-composition-flow .home-system-chain article {
  grid-template-columns: 2.25rem minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 1.2rem .85rem;
  min-height: 13rem;
  padding: 1.6rem 1.5rem 1.8rem;
  border-right: 1px solid var(--panel-line);
}

.home-composition-flow .home-system-chain article:first-child { padding-left: 0; }
.home-composition-flow .home-system-chain article:last-of-type {
  padding-right: 0;
  border-right: 0;
}
.home-composition-flow .home-system-chain article > span { grid-column: 1; }
.home-composition-flow .home-system-chain article > svg { grid-column: 2; justify-self: end; }
.home-composition-flow .home-system-chain article > div {
  grid-column: 1 / -1;
  align-self: end;
}
.home-composition-flow .home-system-chain-actions {
  grid-column: 1 / -1;
  padding-top: 2rem;
}

@media (max-width: 980px) {
  .home-working-cycle-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-working-cycle-rail li:nth-child(3) { border-right: 0; }
  .home-working-cycle-rail li:nth-child(-n + 3) { border-bottom: 1px solid var(--line); }
  .home-working-cycle-rail li:nth-child(3)::after { display: none; }
  .home-working-cycle-rail li:nth-child(4) { padding-left: 0; }
  .home-working-cycle-rail li:nth-child(5) { border-right: 0; }
  .composition-camera-feature { grid-template-columns: minmax(20rem, .95fr) minmax(22rem, 1.05fr); }
  .home-composition-flow .home-system-chain { grid-template-columns: 1fr; }
  .home-composition-flow .home-system-chain article,
  .home-composition-flow .home-system-chain article:first-child,
  .home-composition-flow .home-system-chain article:last-of-type {
    min-height: 8.5rem;
    padding: 1.4rem 0;
    border-right: 0;
  }
}

@media (max-width: 720px) {
  .home-working-cycle-head { grid-template-columns: 1fr; gap: 1rem; }
  .home-working-cycle-rail { grid-template-columns: 1fr; }
  .home-working-cycle-rail li,
  .home-working-cycle-rail li:first-child,
  .home-working-cycle-rail li:nth-child(4),
  .home-working-cycle-rail li:last-child {
    min-height: 7.5rem;
    padding: 1.15rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .home-working-cycle-rail li:last-child { border-bottom: 0; }
  .home-working-cycle-rail li:not(:last-child)::after {
    content: "↓";
    top: auto;
    right: 0;
    bottom: 0;
    transform: translateY(50%);
  }
  .home-working-cycle-rail strong { max-width: 18rem; }

  .composition-camera-feature {
    min-height: 43rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(18rem, 23rem) auto;
  }
  .composition-camera-feature .hero-camera-feature-visual {
    position: relative;
    inset: auto;
    grid-row: 1;
    min-height: 18rem;
  }
  .composition-camera-feature .hero-camera-feature-visual .hero-camera-render {
    width: min(78%, 21rem);
    margin: 0;
  }
  .composition-camera-feature .hero-camera-feature-copy {
    position: relative;
    inset: auto;
    grid-row: 2;
    display: flex;
    padding: 1.5rem 0 2rem;
    background: transparent;
    pointer-events: auto;
  }
  .composition-camera-feature .hero-camera-feature-copy > h2 {
    max-width: 23rem;
    font-size: 1.75rem;
  }
  .composition-camera-feature .hero-camera-feature-copy > p:not(.hero-showcase-kicker) {
    display: block;
    font-size: .8rem;
  }
  .composition-camera-feature .hero-camera-feature-current,
  .composition-camera-feature .hero-camera-feature-modes {
    position: static;
    inset: auto;
    width: 100%;
    margin-top: 1rem;
  }
  .composition-camera-feature .hero-camera-feature-facts {
    display: grid;
    grid-template-columns: 1fr;
  }
  .composition-camera-feature .hero-camera-feature-facts div,
  .composition-camera-feature .hero-camera-feature-facts div:first-child,
  .composition-camera-feature .hero-camera-feature-facts div + div {
    padding: .4rem 0;
    border-left: 0;
  }
}


/* CShark unified editorial redesign — 2026-08.
   One visual system for the complete product site; interactive contracts stay intact. */
:root {
  --paper: #f7f8f3;
  --paper-soft: #eef1ea;
  --ink: #0c1512;
  --ink-2: #121d19;
  --ink-3: #1d2a25;
  --text: #0e1713;
  --muted: #667069;
  --cyan-dark: #08775a;
  --green-dark: #075f48;
  --cyan: #c8fb38;
  --green: #c8fb38;
  --line: rgba(12, 21, 18, .13);
  --line-dark: rgba(255, 255, 255, .15);
  --radius: 6px;
  --shadow: 0 34px 90px rgba(12, 25, 20, .15);
  --header-height: 64px;
  --shell: 1500px;
}

body { background: var(--paper); }
.page-shell { width: min(calc(100% - clamp(36px, 6vw, 112px)), var(--shell)); }

.site-header {
  top: 14px;
  right: clamp(18px, 3vw, 48px);
  left: clamp(18px, 3vw, 48px);
  min-height: 64px;
  padding: 0 18px 0 22px;
  color: var(--ink);
  background: rgba(247, 248, 243, .94);
  border: 1px solid rgba(12, 21, 18, .1);
  border-radius: 7px;
  box-shadow: 0 12px 40px rgba(12, 21, 18, .08);
  backdrop-filter: blur(18px);
}
.site-header.scrolled { background: rgba(247, 248, 243, .97); border-color: rgba(12, 21, 18, .16); }
.site-header .brand-logo,
.site-header.scrolled .brand-logo,
.inner-page .site-header .brand-logo { content: url("assets/cshark-logo-on-light.svg?v=20260719-transparent"); }
.site-header .button-light { color: #fff; background: var(--ink); border-color: var(--ink); }
.site-header .button-light:hover { color: var(--ink); background: var(--cyan); border-color: var(--cyan); }
.desktop-nav-organized { gap: 7px; }
.desktop-nav-organized > .nav-direct,
.desktop-nav-organized > .nav-cluster > summary {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 5px;
}
.desktop-nav-organized > .nav-direct.active,
.desktop-nav-organized > .nav-cluster.is-active > summary { color: var(--ink); background: var(--cyan); }
.nav-dropdown { top: calc(100% + 16px); border-radius: 7px; box-shadow: 0 30px 80px rgba(5, 20, 15, .2); }

.inner-main { padding-top: 0; }
.inner-hero {
  min-height: min(760px, 88dvh);
  padding: clamp(150px, 17vh, 220px) 0 clamp(92px, 11vh, 150px);
  display: flex;
  align-items: flex-end;
  color: var(--ink);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.inner-hero-layout { grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); gap: clamp(70px, 10vw, 180px); align-items: end; }
.inner-hero h1 {
  max-width: 930px;
  margin: 22px 0 28px;
  font-size: clamp(58px, 6.4vw, 112px);
  line-height: .94;
  font-weight: 720;
  letter-spacing: 0;
  text-wrap: balance;
}
.inner-lead { max-width: 720px; color: var(--muted); font-size: clamp(18px, 1.35vw, 24px); line-height: 1.55; text-wrap: pretty; }
.breadcrumb { color: #7a837d; }
.section-kicker { color: var(--green-dark); }
.inner-hero-visual {
  min-height: 500px;
  padding: 0;
  color: #fff;
  background: var(--ink);
  border: 0;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.visual-toolbar { min-height: 72px; padding: 0 28px; border-color: var(--line-dark); }
.encyclopedia-rail > div { min-height: 84px; padding: 18px 28px; border-color: var(--line-dark); }
.encyclopedia-rail > div:hover { background: rgba(200, 251, 56, .08); }

.page-band { padding: clamp(104px, 11vw, 176px) 0; }
.page-band-white { background: var(--paper); }
.page-band-dark { background: var(--ink); }
.page-band-cyan { color: var(--ink); background: var(--cyan); }
.page-band .section-heading h2,
.section-heading h2 { font-size: clamp(48px, 5.2vw, 88px); line-height: .98; text-wrap: balance; }
.section-heading { margin-bottom: clamp(54px, 7vw, 104px); }

.hero.hero-conversion {
  --hero-product-overlap: 118px;
  min-height: auto;
  padding: 112px 0 0;
  color: #fff;
  background: var(--ink);
}
.hero-conversion .hero-media { opacity: .54; filter: saturate(.72) contrast(1.08); }
.hero-conversion .hero-shade { background: linear-gradient(90deg, rgba(7,16,14,.94) 0%, rgba(7,16,14,.66) 54%, rgba(7,16,14,.18) 100%); }
.hero-conversion .hero-content {
  min-height: min(720px, 76dvh);
  padding-top: clamp(110px, 14vh, 170px);
  padding-bottom: calc(var(--hero-product-overlap) + 48px);
  align-items: flex-start;
}
.hero-conversion .hero-copy { max-width: 1080px; }
.hero-conversion-title {
  font-size: clamp(48px, 4.8vw, 78px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.hero-positioning-subtitle { max-width: 700px; margin-top: 28px; font-size: clamp(20px, 1.55vw, 28px); }
.hero-product-wrap { margin-top: calc(0px - var(--hero-product-overlap)); padding-bottom: clamp(76px, 9vw, 132px); }
.hero-product-showcase { border-radius: 7px; box-shadow: 0 40px 120px rgba(0,0,0,.34); }

.home-section-nav-wrap { background: var(--paper); border-color: var(--line); }
.home-section-nav { min-height: 82px; }
.home-overview-section,
.home-interface-section,
.home-business-section { padding: clamp(112px, 12vw, 190px) 0; }
.home-composition-section { padding: clamp(112px, 12vw, 190px) 0; }
.home-five-ledger { border-top: 1px solid var(--line); }
.home-five-ledger article { min-height: 280px; border-color: var(--line); }
.home-working-cycle { margin-top: clamp(72px, 9vw, 132px); }
.hero-camera-feature { border-radius: 0; }
.home-system-chain { margin-top: clamp(70px, 8vw, 120px); }
.interface-mockups .section-heading { margin-bottom: clamp(52px, 6vw, 92px); }
.business-value-grid { gap: clamp(48px, 7vw, 110px); }
.final-cta { padding: clamp(120px, 14vw, 220px) 0; }

.home-documentation-section {
  padding: clamp(112px, 12vw, 190px) 0;
  color: var(--text);
  background: #eef1e8;
  border-top: 1px solid var(--line);
}
.home-documentation-section .section-heading > p,
.home-documentation-section .section-action-copy > p { color: var(--muted); }
.home-documentation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(48px, 6vw, 86px);
  background: var(--line);
  border: 1px solid var(--line);
}
.home-documentation-grid > a {
  min-height: 190px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 24px;
  padding: clamp(26px, 3vw, 42px);
  color: var(--ink);
  background: var(--white);
  text-decoration: none;
  transition: color 180ms ease, background 180ms ease;
}
.home-documentation-grid > a:hover { color: var(--white); background: var(--green-dark); }
.home-documentation-grid > a > span {
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.home-documentation-grid > a:hover > span { color: var(--cyan); }
.home-documentation-grid h3 { margin: 0; font-size: clamp(21px, 2vw, 29px); line-height: 1.15; letter-spacing: -.025em; }
.home-documentation-grid p { margin: 12px 0 0; color: var(--muted); line-height: 1.6; }
.home-documentation-grid > a:hover p { color: #d8e0d7; }
.home-documentation-grid b { align-self: end; color: var(--green-dark); font-size: 12px; white-space: nowrap; }
.home-documentation-grid > a:hover b { color: var(--cyan); }
.home-documentation-meta {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 1px;
  margin-top: 1px;
  color: var(--white);
  background: rgba(255,255,255,.12);
  border: 1px solid var(--ink-3);
}
.home-documentation-meta > div {
  min-height: 146px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 28px 32px;
  background: var(--ink);
}
.home-documentation-meta span { color: #9eaa9d; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.home-documentation-meta strong { font-size: 18px; }
.home-documentation-meta small { color: #aeb7ad; }
.home-documentation-meta a { color: var(--cyan); text-decoration: none; }
.home-documentation-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-main address { max-width: 270px; color: #71848e; font-size: 13px; font-style: normal; line-height: 1.55; }
.footer-main > div > span { color: #8c9aa2; font-size: 13px; }

.content-grid,
.feature-grid,
.scenario-grid,
.solution-grid { gap: 1px; background: var(--line); border: 1px solid var(--line); }
.content-grid > article,
.feature-grid > article,
.scenario-grid > article,
.solution-grid > article { border: 0; border-radius: 0; box-shadow: none; }

@media (max-width: 1100px) {
  .hero.hero-conversion { --hero-product-overlap: 70px; }
  .site-header { grid-template-columns: 1fr auto; }
  .inner-hero { min-height: auto; padding-top: 140px; }
  .inner-hero-layout { grid-template-columns: 1fr; gap: 60px; }
  .inner-hero-visual { min-height: 420px; }
  .hero-conversion .hero-content { min-height: 660px; }
}

@media (max-width: 720px) {
  :root { --header-height: 58px; }
  .hero.hero-conversion { --hero-product-overlap: 24px; }
  .page-shell { width: min(calc(100% - 32px), var(--shell)); }
  .site-header { top: 8px; right: 8px; left: 8px; min-height: 58px; padding: 0 10px 0 14px; }
  .brand-logo { width: 70px; height: 40px; }
  .inner-hero { padding: 126px 0 78px; }
  .inner-hero h1 { font-size: clamp(44px, 13vw, 66px); line-height: .98; }
  .inner-lead { font-size: 17px; }
  .inner-hero-layout { gap: 44px; }
  .inner-hero-visual { min-height: 0; }
  .visual-toolbar { min-height: 58px; padding: 0 18px; }
  .encyclopedia-rail > div { min-height: 74px; padding: 15px 18px; }
  .page-band { padding: 84px 0 96px; }
  .page-band .section-heading h2,
  .section-heading h2 { font-size: clamp(38px, 11vw, 56px); }
  .hero.hero-conversion { padding-top: 82px; }
  .hero-conversion .hero-content { min-height: 650px; padding-top: 86px; }
  .hero-conversion-title {
    font-size: clamp(34px, 9.2vw, 44px);
    line-height: 1.04;
    overflow-wrap: anywhere;
  }
  .hero-conversion .hero-shade { background: linear-gradient(180deg, rgba(7,16,14,.88), rgba(7,16,14,.58)); }
  .hero-product-wrap { width: 100%; padding-bottom: 74px; }
  .hero-product-showcase { border-radius: 0; }
  .home-section-nav { min-height: 68px; overflow-x: auto; }
  .home-section-nav a { flex: 0 0 auto; }
  .home-overview-section,
  .home-interface-section,
  .home-business-section,
  .home-composition-section,
  .home-documentation-section { padding: 88px 0 104px; }
  .home-five-ledger article { min-height: 220px; }
  .home-documentation-grid { grid-template-columns: 1fr; }
  .home-documentation-meta { grid-template-columns: 1fr; }
  .home-documentation-meta > div { min-height: 118px; }
}

@media (max-width: 560px) {
  .home-documentation-grid > a { min-height: 0; grid-template-columns: auto minmax(0, 1fr); gap: 18px; }
  .home-documentation-grid b { grid-column: 2; justify-self: start; margin-top: 10px; }
}

@media (max-width: 920px) {
  .hero-conversion-actions {
    width: min(100%, 720px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hero-conversion-actions .button { width: 100%; }
  .hero-conversion-actions .hero-request-action { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .hero-conversion-actions { grid-template-columns: 1fr; }
  .hero-conversion-actions .hero-request-action { grid-column: auto; }
}

/* Keep the first screen immediate; defer layout and paint work for distant home sections. */
body[data-page="overview"] .home-overview-section,
body[data-page="overview"] .home-composition-section,
body[data-page="overview"] .home-interface-section,
body[data-page="overview"] .home-business-section,
body[data-page="overview"] .home-documentation-section,
body[data-page="overview"] .home-contact-section {
  content-visibility: auto;
  contain-intrinsic-block-size: 900px;
}

/* Application cases: an editorial reference library, not a feature-card wall. */
.case-page { background: var(--paper); }
.case-library-hero {
  position: relative;
  min-height: min(760px, 88svh);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--white);
  background: var(--ink) url("assets/cshark-parking-hero.webp") center 58% / cover no-repeat;
}
.case-library-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 16, 14, .72);
}
.case-library-hero .page-shell {
  position: relative;
  z-index: 1;
  padding-top: 150px;
  padding-bottom: 82px;
}
.case-library-hero .breadcrumb,
.case-article-hero .breadcrumb { margin-bottom: 54px; }
.case-library-hero .breadcrumb a,
.case-library-hero .breadcrumb span,
.case-library-hero .breadcrumb i { color: rgba(255,255,255,.68); }
.case-library-hero .section-kicker { color: var(--green); }
.case-library-hero h1 {
  max-width: 980px;
  margin: 16px 0 24px;
  font-size: clamp(52px, 6.4vw, 98px);
  line-height: .94;
  letter-spacing: 0;
}
.case-library-hero > .page-shell > p:not(.section-kicker) {
  max-width: 690px;
  margin: 0 0 34px;
  color: rgba(255,255,255,.78);
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1.45;
}
.case-library { padding: 90px 0 132px; }
.case-library-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) auto;
  gap: 60px;
  align-items: start;
  padding-bottom: 42px;
  border-bottom: 1px solid var(--line);
}
.case-library-intro p { max-width: 820px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.58; }
.case-library-intro span { color: var(--green-dark); font-size: 13px; font-weight: 750; text-transform: uppercase; }
.case-card-list { display: grid; }
.case-card {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 36px;
  gap: 28px;
  align-items: start;
  min-height: 205px;
  padding: 38px 0 42px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: color .24s ease, padding .24s ease;
}
.case-card:hover { padding-left: 14px; color: var(--green-dark); }
.case-card > span { color: var(--green-dark); font-size: 13px; font-weight: 800; }
.case-card p { margin: 0 0 11px; color: var(--green-dark); font-size: 12px; font-weight: 750; text-transform: uppercase; }
.case-card h2 { max-width: 980px; margin: 0; font-size: clamp(28px, 3vw, 46px); line-height: 1.08; letter-spacing: 0; }
.case-card small { display: block; max-width: 840px; margin-top: 18px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.case-card > svg { width: 24px; height: 24px; color: var(--green-dark); }

.case-article-hero { padding: clamp(92px, 8vw, 126px) 0 clamp(58px, 5vw, 76px); color: var(--white); background: var(--ink); }
.case-article-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(500px, 1.1fr);
  gap: clamp(44px, 5.5vw, 88px);
  align-items: start;
}
.case-article-hero .breadcrumb a,
.case-article-hero .breadcrumb span,
.case-article-hero .breadcrumb i { color: #91a19c; }
.case-article-hero .section-kicker { color: var(--green); }
.case-article-hero h1 { max-width: 760px; margin: 14px 0 24px; font-size: clamp(42px, 3.75vw, 62px); line-height: 1; letter-spacing: 0; text-wrap: balance; }
.case-article-lead { max-width: 660px; margin: 0; color: #b8c2be; font-size: clamp(18px, 1.45vw, 23px); line-height: 1.5; }
.case-article-hero figure { margin: 0; overflow: hidden; background: #10201d; }
.case-article-hero figure img { width: 100%; min-height: 360px; max-height: 520px; aspect-ratio: 16 / 10; display: block; object-fit: cover; }
.case-article-hero figcaption { min-height: 42px; display: flex; align-items: center; padding: 0 14px; color: #8fa09a; border-top: 1px solid rgba(255,255,255,.12); font-size: 10px; text-transform: uppercase; }
.case-facts { background: #0b2524; color: var(--white); }
.case-fact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.case-fact-grid > div { min-height: 180px; padding: 32px 30px; border-left: 1px solid rgba(255,255,255,.14); }
.case-fact-grid > div:last-child { border-right: 1px solid rgba(255,255,255,.14); }
.case-fact-grid span { display: block; margin-bottom: 20px; color: var(--cyan); font-size: 11px; font-weight: 750; text-transform: uppercase; }
.case-fact-grid p { margin: 0; color: #d9e1de; font-size: 15px; line-height: 1.55; }
.case-section { padding: 112px 0 124px; }
.case-two-column { display: grid; grid-template-columns: minmax(300px, .75fr) minmax(0, 1.25fr); gap: clamp(64px, 10vw, 160px); }
.case-section h2 { margin: 12px 0 0; font-size: clamp(40px, 4.2vw, 68px); line-height: 1.01; letter-spacing: 0; }
.case-task ul,
.case-result ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.case-task li,
.case-result li { position: relative; padding: 28px 0 28px 42px; color: var(--ink-2); border-bottom: 1px solid var(--line); font-size: 18px; line-height: 1.55; }
.case-task li::before,
.case-result li::before { content: "+"; position: absolute; left: 4px; top: 29px; color: var(--green-dark); font-weight: 800; }
.case-process { background: var(--white); }
.case-section-heading { display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; align-items: end; margin-bottom: 56px; }
.case-section-heading .section-kicker { align-self: start; }
.case-step-list { border-top: 1px solid var(--line); }
.case-step-list article { display: grid; grid-template-columns: 74px minmax(260px, .72fr) minmax(0, 1.28fr); gap: 30px; align-items: start; padding: 38px 0 42px; border-bottom: 1px solid var(--line); }
.case-step-list article > span { color: var(--green-dark); font-size: 13px; font-weight: 800; }
.case-step-list h2 { margin: 0 0 12px; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.12; }
.case-step-list p { max-width: 850px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.case-roles { background: #edf2ef; }
.case-role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #c4ceca; border-bottom: 1px solid #c4ceca; }
.case-role-grid article { min-height: 265px; padding: 34px 40px 40px 0; }
.case-role-grid article + article { padding-left: 40px; border-left: 1px solid #c4ceca; }
.case-role-grid h3 { margin: 0 0 22px; font-size: 25px; }
.case-role-grid p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.62; }
.case-exceptions { color: var(--white); background: var(--ink); }
.case-exceptions .section-kicker { color: var(--green); }
.case-exception-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 56px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.13); }
.case-exception-list article { min-height: 250px; padding: 34px; background: var(--ink); }
.case-exception-list h3 { margin: 0 0 20px; color: var(--white); font-size: 23px; }
.case-exception-list p { margin: 0; color: #aeb9b4; font-size: 16px; line-height: 1.62; }
.case-result { background: var(--paper); }
.case-related { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.case-related .page-shell { display: flex; align-items: center; gap: 0; min-height: 96px; overflow-x: auto; }
.case-related span,
.case-related a { flex: 0 0 auto; padding: 18px 28px; border-right: 1px solid var(--line); }
.case-related span { padding-left: 0; color: var(--muted); font-size: 12px; font-weight: 750; text-transform: uppercase; }
.case-related a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 14px; font-weight: 750; text-decoration: none; }
.case-related a:hover { color: var(--green-dark); }
.case-related svg { width: 17px; height: 17px; }
.solutions-cases-cta { border-top: 1px solid var(--line); }

@media (max-width: 980px) {
  .case-article-hero-grid { grid-template-columns: 1fr; }
  .case-article-hero figure { width: 100%; max-width: 760px; }
  .case-fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-fact-grid > div:nth-child(3) { border-top: 1px solid rgba(255,255,255,.14); }
  .case-fact-grid > div:nth-child(4) { border-top: 1px solid rgba(255,255,255,.14); }
  .case-two-column,
  .case-section-heading { grid-template-columns: 1fr; gap: 42px; }
  .case-step-list article { grid-template-columns: 50px minmax(0, 1fr); }
  .case-step-list article > div { grid-column: 2; }
  .case-role-grid,
  .case-exception-list { grid-template-columns: 1fr; }
  .case-role-grid article { min-height: 0; padding: 30px 0; }
  .case-role-grid article + article { padding-left: 0; border-top: 1px solid #c4ceca; border-left: 0; }
  .case-exception-list article { min-height: 0; }
}

@media (max-width: 640px) {
  .case-library-hero { min-height: 720px; }
  .case-library-hero .page-shell { padding-top: 116px; padding-bottom: 58px; }
  .case-library-hero .breadcrumb,
  .case-article-hero .breadcrumb { margin-bottom: 38px; }
  .case-library-hero h1 { font-size: clamp(46px, 14vw, 64px); overflow-wrap: normal; }
  .case-library-hero > .page-shell > p:not(.section-kicker) { font-size: 17px; }
  .case-library { padding: 64px 0 90px; }
  .case-library-intro { grid-template-columns: 1fr; gap: 24px; }
  .case-card { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; min-height: 0; padding: 30px 0 34px; }
  .case-card:hover { padding-left: 0; }
  .case-card > svg { display: none; }
  .case-card h2 { font-size: 29px; }
  .case-card small { font-size: 15px; }
  .case-article-hero { padding: 96px 0 48px; }
  .case-article-hero-grid { gap: 32px; }
  .case-article-hero h1 { font-size: clamp(40px, 12vw, 58px); overflow-wrap: normal; }
  .case-article-hero figure img { min-height: 0; max-height: none; aspect-ratio: 4 / 3; }
  .case-fact-grid { grid-template-columns: 1fr; }
  .case-fact-grid > div { min-height: 0; padding: 25px 0; border-top: 1px solid rgba(255,255,255,.14); border-left: 0; }
  .case-fact-grid > div:last-child { border-right: 0; }
  .case-fact-grid > div:first-child { border-top: 0; }
  .case-section { padding: 78px 0 88px; }
  .case-section h2 { font-size: clamp(36px, 11vw, 50px); }
  .case-task li,
  .case-result li { padding-left: 32px; font-size: 16px; }
  .case-step-list article { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; }
  .case-step-list h2 { font-size: 25px; }
  .case-step-list p { font-size: 16px; }
  .case-exception-list article { padding: 28px 24px; }
  .case-related .page-shell { min-height: 78px; }
  .case-related span,
  .case-related a { padding: 15px 18px; }
  .case-related span { padding-left: 0; }
}
.scenario-disclosure { padding: 18px 0; color: #25353b; background: #e8f3ee; border-top: 1px solid #cbdcd3; border-bottom: 1px solid #cbdcd3; }
.scenario-disclosure .page-shell { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.scenario-disclosure strong { color: #0f6c62; font: 800 10px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.scenario-disclosure p { margin: 0; font-size: 12px; line-height: 1.55; }
.scenario-disclosure a { color: #0f6c62; font-size: 11px; font-weight: 800; white-space: nowrap; }
@media (max-width: 760px) { .scenario-disclosure .page-shell { grid-template-columns: 1fr; gap: 8px; } .scenario-disclosure a { white-space: normal; } }

/* Homepage header integrity: keep navigation, actions and brand in separate tracks. */
body[data-page="overview"] {
  animation: none;
}

body[data-page="overview"] .site-header {
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: clamp(14px, 2vw, 32px);
}

body[data-page="overview"] .desktop-nav {
  min-width: 0;
  justify-self: center;
}

body[data-page="overview"] .header-actions {
  min-width: 0;
}

body[data-page="overview"] .header-contact-menu > summary svg:first-child,
body[data-page="overview"] .header-contact-link svg {
  color: var(--cyan-dark);
}

body[data-page="overview"] .header-contact-menu > summary:hover,
body[data-page="overview"] .header-contact-menu > summary:focus-visible {
  background: rgba(8, 119, 90, .08);
  border-color: var(--cyan-dark);
}

body[data-page="overview"] .hero-copy {
  animation: none;
}

@media (min-width: 981px) and (max-width: 1120px) {
  body[data-page="overview"] .site-header {
    column-gap: 12px;
  }

  body[data-page="overview"] .desktop-nav-organized {
    gap: 2px;
  }

  body[data-page="overview"] .desktop-nav-organized > .nav-direct,
  body[data-page="overview"] .desktop-nav-organized > .nav-cluster > summary {
    padding-inline: 10px;
  }

  body[data-page="overview"] .header-actions {
    gap: 8px;
  }
}

@media (max-width: 980px) {
  body[data-page="overview"] .site-header {
    grid-template-columns: 1fr auto;
    column-gap: 12px;
  }
}

/* Inner-page header: one-row geometry and a quieter scrolled state. */
@media (min-width: 981px) {
  .inner-page .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: 1fr;
    column-gap: clamp(14px, 2vw, 32px);
    transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, backdrop-filter 220ms ease;
  }

  .inner-page .desktop-nav {
    min-width: 0;
    justify-self: center;
  }

  .inner-page .header-actions {
    min-width: 0;
  }
}

@media (min-width: 981px) and (max-width: 1120px) {
  .inner-page .site-header {
    column-gap: 12px;
  }

  .inner-page .desktop-nav-organized {
    gap: 2px;
  }

  .inner-page .desktop-nav-organized > .nav-direct,
  .inner-page .desktop-nav-organized > .nav-cluster > summary {
    padding-inline: 10px;
  }

  .inner-page .header-actions {
    gap: 8px;
  }
}

.inner-page .site-header.scrolled {
  background: rgba(247, 248, 243, .78);
  border-color: rgba(12, 21, 18, .1);
  box-shadow: 0 10px 28px rgba(7, 16, 23, .045);
  backdrop-filter: blur(24px) saturate(.82);
}

.inner-page .site-header.scrolled .desktop-nav-organized > .nav-direct:hover,
.inner-page .site-header.scrolled .desktop-nav-organized > .nav-direct.active,
.inner-page .site-header.scrolled .nav-cluster > summary:hover,
.inner-page .site-header.scrolled .nav-cluster[open] > summary,
.inner-page .site-header.scrolled .nav-cluster.is-active > summary {
  color: var(--green-dark);
  background: rgba(8, 119, 90, .1);
  border-color: rgba(8, 119, 90, .14);
}

.inner-page .site-header.scrolled .header-actions .button-light {
  color: var(--ink);
  background: rgba(12, 21, 18, .07);
  border-color: rgba(12, 21, 18, .2);
  box-shadow: none;
}

.inner-page .site-header.scrolled .header-actions .button-light:hover,
.inner-page .site-header.scrolled .header-actions .button-light:focus-visible {
  color: var(--green-dark);
  background: rgba(8, 119, 90, .11);
  border-color: rgba(8, 119, 90, .24);
}

.inner-page .site-header.scrolled .header-contact-menu > summary,
.inner-page .site-header.scrolled .language-switcher > summary {
  color: #33423b;
  background: rgba(247, 248, 243, .28);
  border-color: rgba(12, 21, 18, .22);
}