@import '/network.css';

.home-page .site-header { position: relative; z-index: 2; }
.home-page .site-header::after { content: ''; position: absolute; bottom: 0; left: 32px; right: 32px; height: 1px; background: var(--line); }
.home-main { max-width: 1600px; margin: auto; }
.ballpark-hero { position: relative; isolation: isolate; height: clamp(650px, 61vw, 900px); overflow: hidden; }
.home-copy { position: absolute; z-index: 1; left: 20px; right: 20px; top: clamp(18px, 2.7vw, 40px); text-align: center; }
.home-copy h1 { font: 400 clamp(38px, 4.5vw, 64px)/1.06 var(--serif); letter-spacing: -.045em; }
.home-copy h1 em { color: #38694b; font-weight: 400; }
.home-asset-types { position: absolute; top: -23px; left: 0; right: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 3px 14px; padding: 0; margin: 0; list-style: none; color: #6b7569; font: 10px/1.4 var(--sans); }
.home-actions { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 23px; }
.home-actions .see-demo { margin-top: 0; }
.create-homerun { display: inline-flex; align-items: center; justify-content: center; gap: 15px; min-height: 44px; padding: 9px 15px; border: 1px solid #38694b; border-radius: 3px 5px 3px 4px; background: #38694b; color: #fffefa; font-size: 13px; text-decoration: none; }
.create-homerun:hover { background: #2b533a; }
.create-homerun:focus-visible { outline: 2px solid #38694b; outline-offset: 4px; }
.see-demo { display: inline-flex; align-items: center; gap: 13px; min-height: 44px; margin-top: 23px; font-size: 14px; text-decoration: none; position: relative; }
.see-demo::after { content: ''; position: absolute; height: 1px; background: currentColor; left: 0; right: 0; bottom: 8px; transform: rotate(-1deg); }
.see-demo span { display: inline-block; transition: transform 160ms ease; font-size: 19px; }
.see-demo:hover span { transform: translate(2px, -2px); }
#ballpark { width: 100%; height: 100%; display: block; }
.home-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-inline: auto; padding-block: 18px; font-size: 10px; }
.home-motion-toggle { border: 0; padding: 6px 0; min-height: 32px; background: transparent; color: #647060; font: inherit; cursor: pointer; }
.home-motion-toggle:focus-visible { outline: 2px solid #38694b; outline-offset: 3px; }
@media (max-width: 760px) {
  .home-page .site-header::after { left: 20px; right: 20px; }
  .ballpark-hero { height: 660px; }
  .home-copy { top: 25px; }
  .home-copy h1 { font-size: clamp(35px, 8.6vw, 52px); }
  .home-asset-types { top: -18px; font-size: 9px; gap: 3px 10px; }
  .see-demo { margin-top: 19px; }
  .home-actions { gap: 13px; flex-wrap: wrap; margin-top: 17px; }
  .home-actions .see-demo { font-size: 12px; gap: 8px; }
  .create-homerun { font-size: 12px; padding: 8px 11px; gap: 9px; }
}
@media (max-width: 360px) {
  .home-page .site-header::after { left: 16px; right: 16px; }
  .home-copy { left: 12px; right: 12px; }
  .home-copy h1 { font-size: 33px; }
  .home-actions { flex-direction: column; gap: 2px; margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .see-demo span { transition: none; } }

.home-color-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.home-color-control { display: flex; align-items: center; gap: 8px; }
.home-footer { flex-wrap: wrap; }
.home-color-controls label { white-space: nowrap; }
.home-color-control input { width: 112px; min-height: 32px; margin: 0; accent-color: #42674d; cursor: pointer; }
.home-color-control output { min-width: 3ch; font-variant-numeric: tabular-nums; text-align: right; }
.home-color-control input:focus-visible { outline: 2px solid #38694b; outline-offset: 2px; }
@media (max-width: 760px) { .home-footer { flex-wrap: wrap; gap: 4px 16px; } .home-color-controls { flex-wrap: wrap; gap: 8px; } .home-color-control input { width: 90px; } }

.home-page .site-header { position: absolute; inset: 0 0 auto; width: 100%; z-index: 2; }
.home-page .site-header::after { display: none; }
.home-copy { top: calc(76px + clamp(18px, 2.7vw, 40px)); }
@media (max-width: 760px) { .home-copy { top: 93px; } }

.home-color-control select { font: inherit; color: #293a32; background: #fffefa; border: 1px solid #bbc3b4; border-radius: 4px; min-height: 32px; padding: 3px 30px 3px 10px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23293a32' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.ballpark-hero { height: calc(clamp(650px, 61vw, 900px) + 76px); }
@media (max-width: 760px) { .ballpark-hero { height: 736px; } }

@media (max-width: 760px) {
  .ballpark-hero { height: 660px; }
  .home-copy { top: 103px; left: 16px; right: 16px; }
  .home-copy h1 { font-size: clamp(32px, 8.7vw, 48px); line-height: 1.08; }
  .home-asset-types { top: -23px; font-size: 10px; gap: 3px 9px; }
  .home-actions { flex-direction: row; flex-wrap: nowrap; gap: 16px; margin-top: 18px; }
  .home-actions .see-demo, .create-homerun { font-size: 13px; }
  .create-homerun { padding: 10px 15px; }
  .home-footer { display: block; padding: 16px 20px 22px; font-size: 12px; }
  .home-footer > span { display: block; margin-bottom: 14px; }
  .home-color-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 20px; }
  .home-color-control { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 8px; align-content: start; }
  .home-color-control label { grid-column: 1 / -1; }
  .home-color-control input { width: 100%; min-width: 0; height: 44px; }
  .home-color-control select { grid-column: 1 / -1; min-height: 44px; font-size: 16px; }
  .home-motion-toggle { grid-column: 1 / -1; justify-self: start; min-height: 44px; padding: 4px 0; }
}
@media (max-width: 360px) {
  .home-copy { left: 12px; right: 12px; }
  .home-asset-types { font-size: 9px; gap: 3px 7px; }
  .home-actions { gap: 12px; }
  .home-actions .see-demo { font-size: 12px; }
  .home-footer { padding-inline: 16px; }
}

@media (max-width: 760px) {
  .home-page .site-header { justify-content: center; }
  .home-page .brand-lockup { margin-left: 0; }
  .home-page .brand-tagline { padding-left: 0; text-align: center; }
}

#ballpark { --scene-top: 100; }
.home-copy { top: calc(100px + clamp(18px, 2.7vw, 40px)); }
.ballpark-hero { height: calc(clamp(650px, 61vw, 900px) + 100px); }
@media (max-width: 760px) {
  #ballpark { --scene-top: 104; }
  .ballpark-hero { height: 688px; }
  .home-copy { top: 131px; }
  .home-page .brand-lockup .brand { transform: translateX(calc(-.5 * (var(--brand-icon-width) + var(--brand-gap)))); }
}

#ballpark { --scene-top: 136; }
.ballpark-hero { height: calc(clamp(650px, 61vw, 900px) + 136px); }
@media (max-width: 760px) {
  #ballpark { --scene-top: 140; }
  .ballpark-hero { height: 724px; }
}

.home-asset-types { font-size: 12px; }
@media (max-width: 760px) { .home-asset-types { font-size: 11px; gap: 3px 8px; } }
@media (max-width: 360px) { .home-asset-types { font-size: 10px; gap: 3px 6px; } }