/* Selected homepage hero. Shared site styles are unchanged. */
.hero-business {
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(0,1fr);
  align-items: center;
  column-gap: 16px;
  padding: 48px 48px 64px;
  color: var(--ink);
}
.hero-business-copy { min-width: 0; position: relative; z-index: 1; }
.hero-business-visual { position: relative; width: calc(100% + 48px); aspect-ratio: 700 / 620; margin-block: -40px; overflow: clip; }
.hero-orbit-stage > .hero-poster { display: block; position: absolute; inset: 0; width: 700px; height: 620px; object-fit: contain; }
.hero-orbit-stage { position: absolute; inset: 0 auto auto 0; width: 700px; height: 620px; transform: scale(var(--orbit-scale,1)); transform-origin: 0 0; overflow: clip; }
.hero-orbit-stage iframe { display: block; position: absolute; inset: 0; width: 700px; height: 620px; border: 0; }
.hero-orbit-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; touch-action: pan-y; }
.hero-orbit-stage iframe { opacity: 0; transition: opacity .25s ease; }
.hero-product[data-ready=true] iframe { opacity: 1; }
.hero-product[data-ready=true] .hero-poster { visibility: hidden; }
.hero-tools { position: absolute; right: 36px; bottom: 6px; display: flex; gap: 8px; z-index: 2; }
.hero-tools[hidden] { display: none; }
.hero-tools button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #dedede; border-radius: 50%; background: #fff; color: #111; cursor: pointer; touch-action: manipulation; }
.hero-tools button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hero-tools button:hover { background: #f4f4f4; border-color: #aaa; }
.hero-tools button:active { transform: scale(.96); }
.hero-tools button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .hero-orbit-stage iframe { transition: none; } }
.hero-business p, .hero-business h1, .hero-business ul { margin: 0; }
.hero-business h1 {
  font-size: clamp(44px, 4.4444vw, 64px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.035em;
}
.hero-business h1 span { display: block; }
.hero-business-roles { margin-top: 24px; }
.hero-business-primary-role {
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  letter-spacing: -.02em;
}
.hero-business-description {
  margin-top: 24px !important;
  max-width: 620px;
  font-size: 18px;
  line-height: 28px;
  color: #555;
}
.hero-business-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 32px;
  margin-top: 24px;
}
.hero-business-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-block: 10px;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero-business-actions a:hover { opacity: .72; }
.hero-business-actions .hero-business-discuss { color: var(--accent); }

@media (max-width: 1000px) and (min-width: 721px) {
  .hero-business { padding-inline: 32px; }
}
@media (max-width: 1100px) {
  .hero-business { display: flex; flex-direction: column; align-items: stretch; }
  .hero-business-visual { width: min(100%,620px); margin: -32px auto 0; }
}
@media (max-width: 720px) {
  .hero-business { padding: 32px 20px 48px; }
  .hero-business h1 { font-size: 36px; line-height: 1.08; letter-spacing: -.035em; }
  .hero-business-roles { margin-top: 24px; }
  .hero-business-primary-role { font-size: 26px; line-height: 34px; }
  .hero-business-description { margin-top: 20px !important; font-size: 16px; line-height: 24px; }
  .hero-business-actions { margin-top: 20px; gap: 4px 24px; }
  .hero-business-actions a { font-size: 16px; line-height: 24px; }
  .hero-tools { right: 6px; }
}
@media (max-width: 360px) {
  .hero-business h1 { font-size: 28px; }
}

/* Approved 2026-11-05: match the user's handset-size sketch.
   Dock-bottom stays fixed; layout and the six-card orbit are unchanged. */
@media (min-width:1101px) {
 .hero-business { overflow:visible; }
 /* The visible phones sit above the center of the scaled stage. */
 .hero-business-copy { inset-block-start: max(-29px, -2vw); }
 .hero-business-visual { overflow:visible; }
 .hero-orbit-stage iframe { transform:scale(1.30); transform-origin:255px 590px; }
 .hero-orbit-stage > .hero-poster { transform:scale(1.30); transform-origin:36.428571% 95.161290%; }
}