.business-page { --business-tint: #f2f6fa; }
.business-page h1, .business-page h2, .business-page h3 { text-wrap: balance; }
.business-page p, .business-page li, .business-page a, .business-page summary { overflow-wrap: anywhere; }
.business-header { background: #fff; border-bottom: 1px solid #e8edf2; }
.business-header-inner { min-height: 86px; display: flex; align-items: center; gap: 35px; }
.business-header .light-brand { min-width: 0; max-width: 100%; }
.business-nav { margin-left: auto; display: flex; gap: 25px; align-items: center; }
.business-nav a { max-width: 140px; font-size: 12px; line-height: 1.6; color: #515e70; }
.business-nav a:hover, .business-text-link:hover { color: var(--light-accent); }
.business-hero { position: relative; isolation: isolate; background: #f2f6fa; padding: 52px 0 250px; }
.business-hero-image {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 480px;
  object-fit: cover; object-position: center bottom; z-index: -1;
}
.business-hero-copy { text-align: center; }
.business-hero .light-eyebrow { font-size: 12px; }
.business-hero h1 { font-size: 50px; line-height: 1.2; margin: 0 auto; max-width: 920px; }
.business-hero-subtitle { font-size: 23px; font-weight: 650; margin: 20px auto 12px; }
.business-hero-description { max-width: 630px; margin: 0 auto 23px; font-size: 14px; line-height: 1.9; color: #5a6777; }
.business-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 28px; padding: 13px 23px;
  background: var(--light-accent); color: #fff !important; border-radius: 5px; font-size: 13px;
  font-weight: 650; min-height: 46px; max-width: 100%; line-height: 1.6;
}
.business-button:hover { filter: brightness(.92); }
.business-button span { font-size: 18px; }
.business-hero-note { position: absolute; bottom: 12px; right: 24px; color: #65788c; font-size: 10px; margin: 0; }
.business-hero.has-flow { display: flex; flex-direction: column; padding: 28px 0 20px; background: #f5f8fa; }
.has-flow .business-hero-copy { order: -1; position: relative; z-index: 1; }
.business-flow-stage {
  position: relative; width: min(1100px, 96vh, 100%); aspect-ratio: 3 / 1;
  align-self: center; margin-top: 8px;
}
.business-flow-labels { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.business-flow-labels text { font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif; }
.flow-label-title { font-size: 23px; font-weight: 600; fill: #253b48; }
.flow-label-secondary { font-size: 12px; fill: #7b8994; }
.has-flow .business-hero-image {
  position: static; display: block; width: 100%; height: auto; aspect-ratio: 3 / 1;
  object-fit: contain; margin: 0; z-index: auto;
}
.flow-voice { --flow-color: #427eb6; --flow-tint: #edf5fc; }
.flow-video { --flow-color: #c46a84; --flow-tint: #fcf0f4; }
.flow-geo { --flow-color: #36957e; --flow-tint: #edf8f3; }
.business-flow-link {
  position: absolute; display: block; border: 2px solid transparent; border-radius: 8px;
  transition: border-color .2s, box-shadow .2s, background .2s; cursor: pointer;
}
.business-flow-link.flow-voice { left: 33.667%; top: 10%; width: 32.666%; height: 52%; }
.business-flow-link.flow-video { left: 4.667%; top: 22.5%; width: 22.833%; height: 39.5%; }
.business-flow-link.flow-geo { left: 72.5%; top: 22.5%; width: 22.833%; height: 39.5%; }
.business-flow-link span {
  position: absolute; bottom: 6px; right: 10px; color: var(--flow-color); font-size: 20px;
  line-height: 1; transition: transform .2s;
}
.business-flow-link:hover, .business-flow-link:focus-visible {
  border-color: var(--flow-color); box-shadow: 0 0 0 4px var(--flow-tint), 0 8px 24px #304c6126;
  background: #ffffff0a; outline: none;
}
.business-flow-link:hover span, .business-flow-link:focus-visible span { transform: translate(2px, 2px); }
.business-product { position: relative; isolation: isolate; --flow-color: #427eb6; --flow-tint: #edf5fc; }
.business-product.flow-video { --flow-color: #c46a84; --flow-tint: #fcf0f4; }
.business-product.flow-geo { --flow-color: #36957e; --flow-tint: #edf8f3; }
.business-product:focus { outline: none; }
.business-product-open { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
.business-product-enter {
  position: absolute; top: 20px; right: 0; display: flex; align-items: center; gap: 12px;
  color: var(--flow-color); font-size: 12px; font-weight: 600;
}
.business-product-enter b { font-size: 24px; font-weight: 400; transition: transform .3s; }
.business-product-open:hover b, .business-product-open:focus-visible b { transform: translate(4px, -4px); }
.business-product .business-text-link, .business-product video { position: relative; z-index: 3; }
.business-product-copy { position: relative; }
.business-product-copy::before {
  content: ''; position: absolute; left: -15px; top: 0; bottom: 0; width: 3px;
  background: var(--flow-color); transform: scaleY(0); transform-origin: top;
  box-shadow: 0 0 14px var(--flow-tint); transition: transform .45s ease;
}
.business-product h3, .business-product .business-media img {
  transition: color .3s, box-shadow .4s, transform .4s;
}
.business-product:target h3, .business-product.has-workspace:is(:hover, :has(:focus-visible)) h3 {
  color: var(--flow-color);
}
.business-product:target .business-product-copy::before,
.business-product.has-workspace:is(:hover, :has(:focus-visible)) .business-product-copy::before { transform: scaleY(1); }
.business-product.has-workspace:is(:hover, :has(:focus-visible)) .business-media img {
  box-shadow: 0 24px 48px var(--flow-tint), 0 10px 28px #304c6124; transform: scale(1.015);
}
.business-product::before {
  content: ''; position: absolute; inset: 16px -12px; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, var(--flow-tint), transparent 65%);
  opacity: 0; transition: opacity .4s;
}
.business-product.has-workspace:is(:hover, :has(:focus-visible))::before { opacity: .9; }
.business-product .business-media { position: relative; }
.business-product .business-media::after {
  content: ''; position: absolute; inset: 0 0 32px; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, #ffffffa6 46%, #ffffff26 52%, transparent 65%);
  background-size: 300% 100%; background-position: 100% 0; opacity: 0; border-radius: 8px;
}
.business-product.has-workspace:is(:hover, :has(:focus-visible)) .business-media::after {
  opacity: 1; animation: business-sheen 2.6s ease-in-out infinite;
}
@keyframes business-sheen {
  0%, 15% { background-position: 100% 0; opacity: 0; }
  30% { opacity: .9; }
  70%, 100% { background-position: 0 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .business-flow-link, .business-flow-link span { transition: none; }
  .business-product::before, .business-product h3, .business-product .business-media img,
  .business-product-copy::before, .business-product-enter b { transition: none; }
  .business-product.has-workspace:is(:hover, :has(:focus-visible)) .business-media::after { animation: none; opacity: 0; }
  .business-product.has-workspace:is(:hover, :has(:focus-visible)) .business-media img { transform: none; }
}
.has-flow .business-hero-note { position: static; text-align: center; margin: 0 20px; }
.business-band.business-applications { padding-block: 30px 38px; border-bottom: 1px solid #e2e8ed; }
.business-applications .business-heading { margin-bottom: 20px; }
.business-applications .business-heading h2 { font-size: 20px; margin: 0; }
.business-applications .business-heading .light-eyebrow { margin-bottom: 8px; font-size: 10px; }
.business-launch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.business-launch {
  display: flex; align-items: center; gap: 14px; min-width: 0; min-height: 86px;
  padding: 16px 0; border-top: 2px solid var(--entry-ink); transition: background .2s;
}
.business-launch:nth-child(2) { --entry-ink: #c25c75; }
.business-launch:nth-child(3) { --entry-ink: #27816b; }
.business-launch > div { min-width: 0; }
.business-launch h3 { font-size: 17px; line-height: 1.5; margin: 0 0 4px; }
.business-launch p { font-size: 12px; line-height: 1.7; margin: 0; color: #697583; }
.business-launch-index { font: 12px monospace; color: var(--entry-ink); align-self: flex-start; padding-top: 5px; }
.business-launch-arrow { margin-left: auto; color: var(--entry-ink); font-size: 23px; flex-shrink: 0; }
.business-launch-pending { margin-left: auto; color: #697583; font-size: 11px; flex-shrink: 0; }
a.business-launch:hover { background: #f5f8fa; }
a.business-launch:focus-visible { outline: 2px solid var(--entry-ink); outline-offset: 5px; }
.business-band { padding: 76px 0; scroll-margin-top: 25px; }
.business-heading { max-width: 760px; margin-bottom: 38px; }
.business-heading h2 { font-size: 34px; line-height: 1.35; margin: 0 0 16px; }
.business-heading > p:not(.light-eyebrow) {
  color: #677180; font-size: 14px; line-height: 1.9; margin: 0;
}
.business-product-nav {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid #dce2e8;
}
.business-product-nav a { padding: 21px 15px; font-size: 15px; font-weight: 650; display: flex; gap: 19px; }
.business-product-nav a:hover { background: #f2f6fa; }
.business-product-nav a span { color: var(--light-accent); font: 12px/1.8 'DM Mono', monospace; }
.business-product {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center;
  gap: 60px; padding: 64px 0; border-bottom: 1px solid #e5e9ee; scroll-margin-top: 20px;
}
.business-product:last-child { padding-bottom: 0; border-bottom: 0; }
.business-product:nth-of-type(even) .business-media { grid-column: 1; grid-row: 1; }
.business-product:nth-of-type(even) .business-product-copy { grid-column: 2; }
.business-product-name { color: #677180; font-size: 13px; margin: 0 0 10px; }
.business-product h3 { font-size: 32px; line-height: 1.45; margin: 0 0 19px; }
.business-product-description { color: #647080; font-size: 14px; line-height: 1.9; margin: 0 0 23px; }
.business-product.product-1 h3 { font-size: 38px; }
.business-product.product-1 { padding-block: 74px; }
.business-features { list-style: none; padding: 0; margin: 0 0 27px; }
.business-features li { position: relative; padding-left: 21px; margin: 12px 0; font-size: 13px; line-height: 1.8; }
.business-features li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px;
  background: var(--light-accent); border-radius: 1px; }
.business-text-link { display: inline-flex; align-items: center; gap: 24px; font-size: 13px; font-weight: 700; }
.business-media { margin: 0; min-width: 0; }
.business-media img, .business-media video {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 8px;
  background: #f1f5f8;
}
.business-media figcaption {
  margin-top: 13px; font-size: 10px; line-height: 1.7; color: #738094; text-align: center;
}
.business-workflow { background: #f1f6f9; }
.business-video_workflow { background: #fcf8fa; }
.business-geo_workflow { background: #f4f9f6; }
.business-heading .business-detail-subtitle { font-size: 19px; font-weight: 600; margin-bottom: 12px; }
.business-detail-media { margin: 0; min-width: 0; }
.business-detail-media img, .business-detail-media video {
  display: block; width: 100%; height: auto; max-height: 660px; object-fit: contain;
}
.business-detail-media video { aspect-ratio: 16 / 9; background: #171c22; }
.business-detail-media figcaption, .business-detail-note { font-size: 12px; color: #677180; margin-top: 12px; }
.business-detail-block { padding-block: 32px; border-top: 1px solid #dde5e2; }
.business-detail-block.has-media { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.business-detail-block h3 { font-size: 23px; margin: 0 0 16px; }
.business-detail-block p { font-size: 14px; line-height: 1.9; color: #677180; white-space: pre-line; }
.business-detail-media + .business-detail-block { margin-top: 32px; }
.business-steps {
  display: grid; grid-template-columns: repeat(var(--step-count, 5), minmax(160px, 1fr));
  overflow-x: auto; padding: 0 0 16px; margin: 0; list-style: none;
}
.business-process { margin-bottom: 36px; min-width: 0; }
.business-process-title { font-size: 22px; margin: 0 0 28px; }
.business-steps li { position: relative; padding-right: 26px; min-width: 0; }
.business-steps li::before { content: ''; position: absolute; top: 20px; left: 45px; right: 10px; height: 1px;
  background: #c6d4e0; }
.business-steps li:last-child::before { display: none; }
.business-step-number { display: grid; width: 40px; height: 40px; place-items: center; background: white;
  border: 1px solid #ccd9e4; border-radius: 50%; font: 12px 'DM Mono', monospace; color: var(--light-accent); }
.business-steps h3 { font-size: 16px; margin: 25px 0 12px; }
.business-steps p { font-size: 12px; color: #687788; line-height: 1.9; margin: 0; }
.business-customers .business-heading { margin-inline: auto; text-align: center; }
.business-logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.business-logos figure { margin: 0; min-width: 0; text-align: center; }
.business-logos img { display: block; width: 100%; height: 70px; object-fit: contain; }
.business-logos figcaption { font-size: 12px; color: #657181; line-height: 1.8; }
.business-logos small { display: block; color: #818b98; font-size: 10px; }
.business-note { margin-top: 28px; color: #818b98; font-size: 11px; text-align: center; line-height: 1.7; }
.business-faq { background: #fafbfc; }
.business-faq > .light-wrap { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); gap: 80px; }
.business-questions { border-top: 1px solid #cfd9e2; }
.business-questions details { border-bottom: 1px solid #dce3ea; padding: 22px 0; }
.business-questions summary { display: flex; justify-content: space-between; gap: 20px; align-items: center;
  font-size: 15px; font-weight: 650; cursor: pointer; list-style: none; line-height: 1.7; }
.business-questions summary::-webkit-details-marker { display: none; }
.business-questions summary:focus-visible { outline: 2px solid var(--light-accent); outline-offset: 5px; }
.business-questions summary span { flex: 0 0 16px; width: 16px; height: 16px; position: relative; }
.business-questions summary span::before, .business-questions summary span::after { content: ''; position: absolute;
  width: 12px; height: 1px; background: #435571; top: 7px; left: 2px; }
.business-questions summary span::after { transform: rotate(90deg); }
.business-questions details[open] summary span::after { display: none; }
.business-questions details > p { font-size: 13px; line-height: 1.9; margin: 16px 28px 0 0; color: #687788; }
.business-contact { background: #eaf3ee; }
.business-contact .business-heading { margin-bottom: 25px; }
.business-contact .light-eyebrow { color: #29785c; }
.business-contact-actions { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; font-size: 14px; }
.business-applications .harbor-card h3 { font-size: 21px; }
.business-applications article.harbor-card:hover { transform: none; box-shadow: none; border-color: var(--line); }
@media (max-width: 1000px) {
  .business-nav { gap: 15px; }
  .business-nav a { font-size: 11px; max-width: 105px; }
  .business-product { gap: 28px; }
  .business-product h3, .business-product.product-1 h3 { font-size: 29px; }
  .business-faq > .light-wrap { gap: 32px; }
}
@media (max-width: 700px) {
  .flow-label-title { font-size: 28px; }
  .business-detail-block.has-media { grid-template-columns: 1fr; gap: 20px; }
  .business-product-enter { top: 4px; font-size: 11px; }
  .business-product-enter b { font-size: 20px; }
  .business-hero.has-flow { padding: 28px 0 18px; }
  .business-flow-stage { width: 100%; margin-top: 20px; }
  .has-flow .business-hero-image { height: auto; margin: 0; }
  .business-flow-link { border-radius: 4px; }
  .business-flow-link span { font-size: 14px; bottom: 2px; right: 3px; }
  .business-launch-grid { grid-template-columns: 1fr; gap: 0; }
  .business-launch { min-height: 80px; border-top-width: 1px; }
  .business-applications.business-band { padding-block: 24px; }
  .business-header-inner { flex-wrap: wrap; gap: 16px; padding-block: 18px 0; }
  .business-header .light-brand { max-width: 100%; }
  .business-nav { margin: 0; width: 100%; gap: 0; border-top: 1px solid #e6ebf0; flex-wrap: wrap; }
  .business-nav a { padding: 12px 10px 12px 0; flex: 1 1 auto; max-width: none; font-size: 11px; }
  .business-hero { padding: 35px 0 170px; }
  .business-hero-image { height: 340px; width: 100%; object-fit: cover; }
  .business-hero h1 { font-size: 32px; max-width: 350px; }
  .business-hero-subtitle { font-size: 18px; line-height: 1.7; }
  .business-hero-description { font-size: 13px; line-height: 1.8; }
  .business-hero .business-button { padding: 11px 20px; }
  .business-hero-note { font-size: 9px; right: 12px; bottom: 8px; }
  .business-band { padding-block: 46px; }
  .business-heading { margin-bottom: 28px; }
  .business-heading h2 { font-size: 27px; }
  .business-product-nav { grid-template-columns: 1fr; }
  .business-product-nav a { padding: 14px 4px; font-size: 14px; }
  .business-product-nav a + a { border-top: 1px solid #e7ecf1; }
  .business-product, .business-product.product-1 {
    display: flex; flex-direction: column; gap: 28px; padding-block: 40px;
  }
  .business-product h3, .business-product.product-1 h3 { font-size: 27px; }
  .business-media { width: 100%; }
  .business-steps { grid-template-columns: 1fr; gap: 26px; }
  .business-steps li { padding: 0 0 0 62px; }
  .business-step-number { position: absolute; left: 0; top: 0; }
  .business-steps li::before { left: 19px; top: 45px; bottom: -20px; width: 1px; height: auto; }
  .business-steps h3 { margin-top: 0; }
  .business-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .business-faq > .light-wrap { display: block; }
  .business-contact-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
}
