/* Isolated homepage candidate. Account/admin styles and billing stay in styles.css. */
/* Clip the full-bleed 100vw background to the page's visible width when a
   desktop scrollbar consumes part of the viewport. This creates no scroller. */
#home-page { overflow-x: clip; }
@media (min-width: 981px) and (max-width: 1280px) {
  body:has(#home-page:not([hidden])) .site-header { grid-template-columns: auto minmax(0, 1fr) auto; }
  body:has(#home-page:not([hidden])) .primary-nav { flex-wrap: wrap; justify-content: center; gap: 2px 18px; }
}
.network-hero { color: #f1f5fa; min-height: 670px; grid-template-columns: .92fr 1.08fr; gap: 38px; }
.network-hero::before { background: radial-gradient(ellipse at 78% 45%, #101e32 0, #080e1a 42%, #060b14 75%); }
.network-hero .hero-copy { padding: 65px 0; }
.network-hero .eyebrow { color: #8edcc9; letter-spacing: .12em; }
.network-hero h1 { max-width: 560px; font-weight: 620; letter-spacing: -.058em; font-size: clamp(46px, 5.1vw, 70px); line-height: 1.06; margin-bottom: 26px; }
.network-hero .hero-lede { max-width: 430px; color: #a5b5c8; font-size: 18px; line-height: 1.7; }
.network-hero .button { background: #9fe4d3; border-color: #9fe4d3; color: #071c20; border-radius: 8px; font-size: 14px; }
.network-hero .button:hover { box-shadow: 0 5px 16px #94d8c920; }
.network-hero .button-ghost { color: #dee7f2; background: transparent; border-color: #3c4b5d; }
.network-account-note { margin: 27px 0 0; color: #859aae; font-size: 13px; }
.network-visual { width: 100%; margin: 38px 0 28px; min-width: 0; }
.network-map-heading { display: flex; align-items: center; gap: 12px; padding: 0 24px; }
.network-symbol { font-size: 32px; color: #8cdbc8; }
.network-map-heading h2 { margin: 0 0 3px; font-size: 15px; font-weight: 750; letter-spacing: -.01em; }
.network-map-heading p { margin: 0; font-size: 11px; color: #819ab0; }
.earth-scene { position: relative; width: 100%; aspect-ratio: 560 / 520; }
#earth-canvas, #earth-fallback, #network-globe { position: absolute; inset: 0; width: 100%; height: 100%; }
#network-globe { overflow: visible; pointer-events: none; }
.globe-enabled-country { fill: none; stroke: #80d6c7; stroke-width: .9; opacity: .55; }
.globe-marker-ring { fill: #77e1cf14; stroke: #97e6d4; stroke-width: .7; }
.globe-marker-core { fill: #c9ffee; stroke: #4d9b8a; stroke-width: 1.5; }
.globe-country-label { font: 650 12px ui-sans-serif, system-ui, sans-serif; fill: #d4ffef; paint-order: stroke; stroke: #08131b; stroke-width: 3; }
.globe-flow { fill: none; stroke-width: 1.35; }
.globe-flow-enabled { stroke: #87e2cb; opacity: .8; }
.globe-flow-planned { stroke: #b6a476; stroke-dasharray: 3 5; opacity: .7; }
.globe-flow-particle-enabled { fill: #d8fff5; }
.globe-flow-particle-planned { fill: #c7b37c; }
.globe-origin .globe-marker-core { fill: #aacdff; stroke: #517fa6; }
.globe-origin .globe-marker-ring { stroke: #85b5e4; }
.globe-origin .globe-country-label { fill: #b9d6f4; }
.globe-planned .globe-marker-core { fill: #cabb94; stroke: #736548; }
.globe-planned .globe-marker-ring { stroke: #c2ac7c; stroke-dasharray: 2 3; }
.globe-planned .globe-country-label { fill: #ded1b0; }
.network-map-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-inline: 24px; }
.network-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; color: #91a8bb; }
.network-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.network-legend i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.legend-enabled { background: #a4edda; }
.legend-geography { background: #52728a; }
.network-legend .legend-planned { width: 12px; height: 0; border-top: 2px dashed #b6a476; border-radius: 0; }
.legend-origin { background: #85b5e4; }
.globe-controls { display: flex; gap: 4px; flex-wrap: wrap; }
.globe-controls button { min-height: 44px; padding: 5px 9px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #9bb5c9; font-size: 11px; cursor: pointer; }
.globe-controls button:hover, .globe-controls button[aria-pressed="true"] { background: #152437; border-color: #293e50; }
.globe-controls button:disabled { cursor: default; color: #7b90a3; }
.network-visual figcaption { max-width: 480px; margin: 8px 24px 0; color: #829baf; font-size: 11px; line-height: 1.6; }
#network-home :is(a,button):focus-visible { outline: 3px solid #a34b1e; outline-offset: 4px; }
.network-details { padding-block: 52px 40px; scroll-margin-top: 96px; }
.network-details-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 40px; margin-bottom: 27px; }
.network-details-heading .eyebrow { grid-column: 1 / -1; color: #436b58; margin: 0; font-size: 10px; }
.network-details-heading h2 { font-size: clamp(27px, 2.8vw, 35px); margin: 0; font-weight: 620; }
.network-details-heading > p:last-child { color: #566c61; font-size: 13px; margin: 0; max-width: 460px; }
.network-region-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.network-region { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; text-align: left; padding: 22px; color: #193d2f; background: #fff; border: 1px solid #d8e2da; border-radius: 12px; box-shadow: 0 2px 5px #193d2f04; font: inherit; }
button.network-region { cursor: pointer; }
button.network-region:hover { border-color: #718f7b; background: #f9fcf8; }
.network-region[aria-pressed="true"] { border-color: #3d7156; box-shadow: inset 0 0 0 1px #3d7156; background: #f5f9f3; }
.network-region-code { grid-row: 1 / 4; display: grid; align-self: start; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #eaf1e9; font-size: 11px; font-weight: 750; }
.network-region-name { font-size: 16px; font-weight: 650; }
.network-region-detail { color: #627366; font-size: 12px; }
.network-region-status { justify-self: start; padding: 3px 7px; border-radius: 4px; font-size: 10px; line-height: 1.5; background: #e4f0e5; color: #25583b; }
.network-region-held { color: #687064; background: #f7f8f5; box-shadow: none; }
.network-region-held .network-region-code { background: #eaece7; color: #62695e; }
.network-region-held .network-region-status { background: #efece4; color: #6c5b3e; }
.network-connection { margin-top: 22px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 8px 30px; align-items: center; padding: 22px 25px; border: 1px solid #e0e5dd; border-radius: 12px; background: #f8faf6; }
.network-connection h3 { font-size: 16px; font-weight: 650; letter-spacing: -.025em; margin: 0; }
.network-route-schematic { display: flex; align-items: center; justify-content: space-between; gap: 12px; grid-column: 2; grid-row: 1 / 3; }
.network-route-schematic > span { display: flex; align-items: center; gap: 9px; font-size: 11px; color: #45624f; }
.network-route-schematic i { display: grid; place-items: center; width: 32px; height: 32px; background: #e7eee4; border-radius: 8px; font-size: 20px; color: #376044; font-style: normal; flex: 0 0 auto; }
.network-route-schematic b { color: #91a18b; font-weight: 400; }
.network-route-note { margin: 0; color: #65755e; font-size: 11px; max-width: 420px; line-height: 1.5; }
.network-route-hold { margin: 0; font-size: 11px; color: #746349; grid-column: 1 / -1; }
.network-source { margin: 18px 0 0; color: #6b786a; font-size: 10px; }
#network-load-status { font-size: 13px; color: #5f6f61; }
#home-page .pricing-section { padding-block: 65px; background: #eef2eb; }
@media (max-width: 980px) {
  .network-hero { gap: 12px; }
  .network-hero h1 { font-size: 48px; }
  .network-map-heading, .network-map-bottom { padding-inline: 10px; }
  .network-visual figcaption { margin-inline: 10px; }
  .network-region { padding: 18px 14px; gap: 5px 10px; }
  .network-region-code { width: 34px; height: 34px; }
  .network-connection { grid-template-columns: 1fr; gap: 14px; }
  .network-route-schematic { grid-column: 1; grid-row: auto; max-width: 540px; width: 100%; }
}
@media (max-width: 700px) {
  .network-hero { display: flex; flex-direction: column; gap: 0; min-height: auto; }
  .network-hero .hero-copy { width: 100%; max-width: none; padding: 48px 0 12px; }
  .network-hero h1 { font-size: clamp(40px, 9vw, 60px); max-width: 540px; margin-bottom: 20px; }
  .network-hero .hero-lede { font-size: 16px; margin-bottom: 24px; }
  .network-hero .hero-actions { gap: 10px; }
  .network-hero .button { min-height: 46px; padding-inline: 17px; }
  .network-account-note { margin-top: 22px; }
  .network-visual { margin: 24px 0 28px; max-width: 480px; }
  .network-map-heading { padding-inline: 0; }
  .network-map-bottom { padding-inline: 0; gap: 4px; }
  .network-visual figcaption { margin-inline: 0; }
  .network-details { padding-block: 38px 32px; }
  .network-details-heading { grid-template-columns: 1fr; gap: 10px; margin-bottom: 22px; }
  .network-region-grid { grid-template-columns: 1fr; gap: 10px; }
  .network-region { padding: 17px; }
  .network-region-code { width: 40px; height: 40px; }
  .network-connection { padding: 20px 17px; }
  .network-route-schematic { gap: 6px; align-items: start; }
  .network-route-schematic > span { flex-direction: column; text-align: center; gap: 6px; flex: 1; min-width: 0; }
  .network-route-schematic b { margin-top: 5px; }
  #home-page .pricing-section { padding-block: 45px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #network-home *, #network-home *::before, #network-home *::after { transition: none !important; animation: none !important; }
}