.product-page {
  --app-accent: var(--blue);
  --app-accent-soft: var(--blue-light);
  background: var(--paper-2);
}

.product-page.branch-page { --app-accent: #2c78ad; --app-accent-soft: #76c9e9; }
.product-page.logbook-page { --app-accent: #b7782f; --app-accent-soft: #efc06b; }
.product-page.profiler-page { --app-accent: #3e8ee8; --app-accent-soft: #8ad9ef; }

.product-page .site-header {
  position: sticky;
  top: 0;
}

.product-page .site-nav [aria-current="page"]::after {
  right: 0;
}

.app-hero {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.app-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(33, 76, 94, .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33, 76, 94, .065) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}

.app-hero-inner {
  position: relative;
  z-index: 1;
  min-height: 660px;
  padding-block: 72px;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr);
  align-items: center;
  gap: clamp(54px, 8vw, 130px);
}

.app-eyebrow,
.app-panel-bar,
.app-section-label,
.app-stat span,
.feature-code,
.access-status,
.sample-head,
.sample-foot,
.app-breadcrumbs,
.app-note {
  font-family: Consolas, "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: 1.25px;
}

.app-breadcrumbs {
  display: flex;
  gap: 8px;
  margin: 0 0 34px;
  color: #788b94;
  font-size: 9px;
  font-weight: 700;
}

.app-breadcrumbs a:hover { color: var(--app-accent); }
.app-breadcrumbs span::before { content: "/"; margin-right: 8px; color: #a3afb3; }

.app-eyebrow {
  margin: 0 0 19px;
  color: var(--app-accent);
  font-size: 10px;
  font-weight: 700;
}

.app-hero h1 {
  margin: 0;
  font-size: clamp(64px, 7.2vw, 110px);
  line-height: .86;
  letter-spacing: -6px;
  font-weight: 700;
}

.app-hero h1 em {
  display: block;
  color: var(--app-accent);
  font-family: Georgia, serif;
  font-weight: 400;
}

.app-lede {
  max-width: 610px;
  margin: 35px 0 0;
  color: #506976;
  font-size: 18px;
  line-height: 1.7;
}

.access-block {
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid #bdcacc;
}

.access-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  color: #74868d;
  font-size: 9px;
  font-weight: 700;
}

.access-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a4afb2;
  box-shadow: 0 0 0 4px rgba(104, 123, 131, .1);
}

.access-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.access-button {
  min-width: 132px;
  min-height: 46px;
  padding: 12px 18px;
  border: 1px solid #82969f;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.access-button.primary {
  color: var(--white);
  background: var(--ink);
  border-color: var(--ink);
}

.access-button[disabled] {
  cursor: not-allowed;
  opacity: .52;
}

.app-note {
  margin: 12px 0 0;
  color: #829198;
  font-size: 10px;
  font-weight: 700;
}

.app-panel {
  min-width: 0;
  color: #dcebf0;
  background: var(--ink);
  border: 1px solid #2d5164;
  box-shadow: 0 28px 70px rgba(9, 39, 58, .22);
}

.app-panel-bar {
  min-height: 48px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #91aeba;
  border-bottom: 1px solid var(--dark-line);
  font-size: 9px;
  font-weight: 700;
}

.app-panel-bar span:first-child::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  vertical-align: 1px;
  background: var(--app-accent-soft);
  box-shadow: 0 0 0 4px rgba(81, 198, 245, .12);
}

.app-panel-bar span:last-child { color: #7bd3a8; }

.app-visual {
  position: relative;
  min-height: 430px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(112, 177, 200, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112, 177, 200, .08) 1px, transparent 1px);
  background-size: 26px 26px;
}

.app-visual::before {
  content: "";
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  border: 1px solid rgba(102, 182, 213, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgba(102, 182, 213, .025), 0 0 0 108px rgba(102, 182, 213, .018);
}

.app-visual svg {
  position: relative;
  z-index: 1;
  width: min(82%, 500px);
  height: auto;
  overflow: visible;
}

.app-visual .visual-line,
.app-visual .visual-branch,
.app-visual .visual-profile {
  fill: none;
  stroke: var(--app-accent-soft);
  stroke-width: 2.4;
}

.app-visual .visual-muted { fill: none; stroke: #557a8b; stroke-width: 1.4; }
.app-visual .visual-fill { fill: #0f3a4f; stroke: var(--app-accent-soft); stroke-width: 2; }
.app-visual .visual-point { fill: var(--ink); stroke: var(--app-accent-soft); stroke-width: 2.2; }
.app-visual .visual-warn { fill: rgba(239, 192, 107, .22); stroke: #efc06b; stroke-width: 1.5; }
.app-visual text { fill: #7696a3; font: 700 9px Consolas, monospace; letter-spacing: 1px; }

.app-visual-caption {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: #6c8d9b;
  font: 700 10px Consolas, monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.app-visual-logbook { padding: 22px; background: #0b2e40; }
.app-visual-logbook::before { display: none; }
.hero-logbook-sheet { position: relative; z-index: 1; width: 100%; overflow: hidden; color: #f2f5fb; background: #121827; border: 1px solid #31405b; border-radius: 17px; box-shadow: 0 18px 45px rgba(0,0,0,.22); font-family: Consolas, "Courier New", monospace; font-variant-numeric: tabular-nums; }
.hero-logbook-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 17px; color: #9cb3e4; border-bottom: 1px solid #303a50; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.hero-logbook-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.hero-logbook-table col:first-child { width: 20%; }
.hero-logbook-table col:not(:first-child) { width: 26.666%; }
.hero-logbook-table th,
.hero-logbook-table td { height: 45px; padding: 8px 12px; border-bottom: 1px solid #303a50; text-align: right; }
.hero-logbook-table th:first-child,
.hero-logbook-table td:first-child { padding-left: 14px; text-align: left; }
.hero-logbook-table thead th { height: 54px; color: #9cb3e4; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; vertical-align: middle; }
.hero-logbook-table thead th:first-child { color: #fff; }
.hero-logbook-table thead span,
.hero-logbook-table thead small { display: block; }
.hero-logbook-table thead small { margin-top: 5px; font: inherit; }
.hero-logbook-table tbody td { color: #f4f6fb; font-size: 13px; font-weight: 700; }
.hero-logbook-table tbody tr:not(.is-pending) td:first-child { border-left: 3px solid #58bdf0; }
.hero-logbook-table td.is-alert { color: #ffc62d; background: #382d0f; }
.hero-logbook-table tr.is-pending td { color: #8fa4d2; }
.hero-logbook-alert { min-height: 55px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: #9cb3e4; font-size: 10px; line-height: 1.35; }
.hero-logbook-alert strong { color: #ffc62d; }

.app-summary {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}

.app-summary-inner {
  min-height: 105px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.app-stat {
  padding: 28px 34px;
  border-left: 1px solid var(--line);
}

.app-stat:last-child { border-right: 1px solid var(--line); }
.app-stat span { display: block; color: #84959c; font-size: 10px; font-weight: 700; }
.app-stat strong { display: block; margin-top: 8px; font-size: 17px; font-weight: 600; }

.app-capabilities {
  padding: 120px 0 130px;
  color: #dcebf0;
  background: var(--ink);
}

.app-section-heading {
  display: grid;
  grid-template-columns: .56fr 1fr .7fr;
  align-items: end;
  gap: 45px;
}

.app-section-label {
  align-self: start;
  margin: 0;
  color: var(--app-accent-soft);
  font-size: 10px;
  font-weight: 700;
}

.app-section-heading h2,
.app-detail-copy h2,
.related-heading h2 {
  margin: 0;
  font-size: clamp(42px, 4.6vw, 68px);
  line-height: 1.02;
  letter-spacing: -3px;
  font-weight: 600;
}

.app-section-heading h2 em,
.app-detail-copy h2 em,
.related-heading h2 em {
  color: var(--app-accent-soft);
  font-family: Georgia, serif;
  font-weight: 400;
}

.app-section-heading > p:last-child {
  margin: 0;
  color: #8ea8b3;
  font-size: 14px;
  line-height: 1.75;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 66px;
  border-top: 1px solid var(--dark-line);
  border-left: 1px solid var(--dark-line);
}

.feature-card {
  min-height: 225px;
  padding: 28px;
  border-right: 1px solid var(--dark-line);
  border-bottom: 1px solid var(--dark-line);
  transition: background .22s, transform .22s;
}

.feature-card:hover { background: #10364b; transform: translateY(-3px); }
.feature-code { display: block; color: #658595; font-size: 10px; font-weight: 700; }
.feature-card h3 { margin: 44px 0 12px; color: var(--white); font-size: 21px; letter-spacing: -.5px; }
.feature-card p { margin: 0; color: #8da7b2; font-size: 13px; line-height: 1.7; }
.feature-grid--dense .feature-card { min-height: 205px; }
.feature-grid--dense .feature-card h3 { margin-top: 30px; }

.app-detail {
  padding: 125px 0;
  background: var(--paper);
}

.app-detail-inner {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  align-items: center;
  gap: clamp(70px, 9vw, 150px);
}

.app-detail-copy > p:not(.app-section-label) {
  max-width: 520px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

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

.detail-list li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.detail-list span { color: var(--app-accent); font: 700 9px Consolas, monospace; }

.sample-card {
  color: #dcebf0;
  background: var(--ink);
  border: 1px solid #315468;
  box-shadow: 0 26px 65px rgba(9, 39, 58, .18);
}

.sample-head,
.sample-foot {
  min-height: 48px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #7e9aa6;
  border-bottom: 1px solid var(--dark-line);
  font-size: 10px;
  font-weight: 700;
}

.sample-body { min-height: 330px; padding: 24px; }
.sample-foot { min-height: 44px; border-top: 1px solid var(--dark-line); border-bottom: 0; }
.sample-foot strong { color: var(--app-accent-soft); font-weight: 700; }

.network-ledger { display: grid; gap: 10px; }
.network-row { display: grid; grid-template-columns: 54px 1fr 72px; gap: 14px; align-items: center; min-height: 46px; padding: 0 12px; background: #0d3043; border: 1px solid #254b5e; color: #87a2ad; font: 700 9px Consolas, monospace; text-transform: uppercase; }
.network-row b { height: 3px; background: linear-gradient(90deg, var(--app-accent-soft), #2c566a); }
.network-row em { color: #7cd1a9; font-style: normal; text-align: right; }

.station-sheet { width: 100%; border-collapse: collapse; font: 700 10px Consolas, monospace; }
.station-sheet th, .station-sheet td { padding: 15px 10px; border-bottom: 1px solid #284d60; text-align: right; }
.station-sheet th:first-child, .station-sheet td:first-child { text-align: left; }
.station-sheet th { color: #678897; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.station-sheet td { color: #b1c6ce; }
.station-sheet .flagged { color: #efc06b; background: rgba(183, 120, 47, .16); }
.station-sheet .pending { color: #617d89; }

.profile-sample { position: relative; height: 280px; background-image: linear-gradient(rgba(112,177,200,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(112,177,200,.09) 1px, transparent 1px); background-size: 28px 28px; }
.profile-sample svg { width: 100%; height: 100%; }
.profile-sample .ground { fill: none; stroke: #6b8793; stroke-width: 2; }
.profile-sample .profile { fill: none; stroke: var(--app-accent-soft); stroke-width: 3; }
.profile-sample .hgl { fill: none; stroke: #7cd1a9; stroke-width: 1.6; stroke-dasharray: 7 7; }

.related-apps { padding: 105px 0 115px; background: var(--paper-2); }
.related-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.related-heading .app-section-label { color: var(--app-accent); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 54px; border-top: 1px solid var(--line); }
.related-link { min-height: 170px; padding: 25px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: color .2s, background .2s; }
.related-link:first-child { border-left: 1px solid var(--line); }
.related-link span { color: #87969c; font: 700 10px Consolas, monospace; letter-spacing: 1px; text-transform: uppercase; }
.related-link strong { display: block; margin: 43px 0 5px; font-size: 22px; }
.related-link i { color: var(--app-accent); font-style: normal; }
.related-link:hover { color: var(--white); background: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .app-panel { animation: panel-in .65s ease-out both; }
  .app-hero-copy { animation: copy-in .6s ease-out both; }
  @keyframes panel-in { from { opacity: 0; transform: translateY(18px); } }
  @keyframes copy-in { from { opacity: 0; transform: translateY(12px); } }
}

@media (max-width: 900px) {
  .app-hero-inner { grid-template-columns: 1fr; }
  .app-panel { width: min(100%, 760px); }
  .app-section-heading { grid-template-columns: 1fr 1.2fr; }
  .app-section-heading > p:last-child { grid-column: 2; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .app-detail-inner { grid-template-columns: 1fr; gap: 60px; }
}

@media (max-width: 700px) {
  .app-hero-inner { min-height: 0; padding-block: 50px 58px; gap: 48px; }
  .app-breadcrumbs { margin-bottom: 28px; }
  .app-hero h1 { font-size: clamp(58px, 19vw, 78px); letter-spacing: -4px; }
  .app-lede { margin-top: 27px; font-size: 15px; }
  .app-visual { min-height: 320px; }
  .app-visual-logbook { padding: 12px; }
  .hero-logbook-head { min-height: 42px; padding-inline: 10px; gap: 8px; font-size: 10px; letter-spacing: .5px; }
  .hero-logbook-table th, .hero-logbook-table td { height: 38px; padding: 6px; }
  .hero-logbook-table th:first-child, .hero-logbook-table td:first-child { padding-left: 8px; }
  .hero-logbook-table thead th { height: 47px; font-size: 10px; }
  .hero-logbook-table tbody td { font-size: 10px; }
  .hero-logbook-alert { display: block; min-height: 58px; padding: 9px 10px; font-size: 10px; line-height: 1.3; }
  .hero-logbook-alert span { display: block; margin-top: 3px; }
  .app-panel-bar { font-size: 10px; }
  .app-summary-inner { display: block; padding-block: 12px; }
  .app-stat { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .app-stat:last-child { border-right: 0; border-bottom: 0; }
  .app-capabilities, .app-detail { padding-block: 82px; }
  .app-section-heading { display: block; }
  .app-section-heading h2, .app-detail-copy h2, .related-heading h2 { margin-top: 25px; font-size: 42px; letter-spacing: -2px; }
  .app-section-heading > p:last-child { margin-top: 26px; }
  .feature-grid { grid-template-columns: 1fr; margin-top: 48px; }
  .feature-card { min-height: 195px; }
  .related-apps { padding-block: 78px; }
  .related-heading { display: block; }
  .related-grid { grid-template-columns: 1fr; margin-top: 40px; }
  .related-link { min-height: 135px; border-left: 1px solid var(--line); }
  .related-link strong { margin-top: 28px; }
  .sample-body { min-height: 290px; padding: 16px; }
  .network-row { grid-template-columns: 45px 1fr 62px; gap: 9px; padding-inline: 9px; font-size: 10px; }
}