
.hy-colocation-hero{text-align:left;height:850px;background-image:url('../images/landing/colocation-grid.png');background-size:cover}.hy-colocation-hero .hy-hero-copy{position:relative;height:100%;padding-top:95px}.hy-colocation-hero h1{max-width:800px}.hy-colocation-hero .hy-hero-copy>p{max-width:850px}.hy-colocation-hero .hy-hero-actions{justify-content:flex-start}.hy-colocation-hero .hy-review-pill{left:0;transform:none;bottom:80px}.hy-colocation-server{position:absolute;width:425px;height:auto;right:max(calc((100vw - 1408px)/2),32px);bottom:0;pointer-events:none}.hy-colocation-hero .hy-hero-copy>*{position:relative;z-index:2}.hy-colocation-hero .hy-hero-copy>.hy-review-pill{position:absolute}.hy-colocation-pricing .hy-pricing-heading{align-items:flex-start}.hy-colocation-pricing h2{font-size:46px}.hy-colocation-term{display:inline-flex;gap:70px;border:1px solid #7f9c8e;border-radius:999px;padding:8px 20px;font-size:14px}.hy-colocation-pricing .hy-plan-badge{margin-left:auto;width:max-content;max-width:100%}.hy-colocation-pricing .hy-plan{min-height:480px}.hy-colocation-pricing .hy-plan h3{font-size:20px}.hy-colocation-pricing .hy-plan-description{font-size:14px;min-height:44px}.hy-colocation-pricing .hy-plan-price{font-size:16px;white-space:normal}.hy-colocation-pricing .hy-plan-price strong{font-size:34px}.hy-colocation-old{font-size:13px;margin-top:20px!important}.hy-colocation-pricing .hy-plan-note{font-size:12px;min-height:0}.hy-colocation-pricing .hy-plan-features{font-size:14px}.hy-colocation-pricing .hy-plan-button{border-radius:8px}.hy-colocation-page .hy-reviews{padding-top:180px}
@media(max-width:1250px){.hy-colocation-server{width:340px;right:20px}.hy-colocation-hero h1{font-size:46px;max-width:640px}.hy-colocation-hero .hy-hero-copy>p{max-width:600px}.hy-colocation-pricing .hy-pricing-heading{flex-direction:column;gap:24px}.hy-colocation-pricing .hy-pricing-options{text-align:left;max-width:none}.hy-colocation-pricing .hy-plan-price strong{font-size:28px}}
@media(max-width:800px){.hy-colocation-hero{height:880px}.hy-colocation-hero .hy-hero-copy{padding-top:45px}.hy-colocation-server{width:235px;right:25px;bottom:0}.hy-colocation-hero h1{font-size:40px}.hy-colocation-hero .hy-hero-copy>p{max-width:100%}.hy-colocation-hero .hy-review-pill{bottom:30px;max-width:52%;flex-wrap:wrap;white-space:normal;justify-content:center}.hy-colocation-hero .hy-hero-actions{flex-wrap:wrap}.hy-colocation-pricing h2{font-size:36px}.hy-colocation-pricing .hy-plan-grid{grid-template-columns:1fr}.hy-colocation-pricing .hy-plan-description,.hy-colocation-pricing .hy-plan-note{min-height:0}.hy-colocation-page .hy-reviews{padding-top:90px}}
@media(max-width:540px){.hy-colocation-hero{height:940px}.hy-colocation-hero h1{font-size:34px}.hy-colocation-hero .hy-hero-actions .hy-button{min-width:0}.hy-colocation-hero .hy-review-pill{bottom:20px;left:0;max-width:100%;width:100%;font-size:10px;gap:8px}.hy-colocation-server{width:210px;right:calc(50% - 105px);bottom:90px}.hy-colocation-hero .hy-hero-copy>p br{display:none}.hy-colocation-pricing h2{font-size:30px}.hy-colocation-pricing .hy-pricing-options>p{font-size:14px}.hy-colocation-pricing .hy-plan{min-height:480px}.hy-colocation-pricing .hy-plan h3{font-size:20px}.hy-colocation-pricing .hy-plan-price strong{font-size:34px}}

/* Match the compact cards and typography of the Colocation reference. */
.hy-colocation-hero .hy-ai-pill>span{display:inline-flex;align-items:center;gap:6px}
.hy-colocation-pricing .hy-plan{padding:16px;min-height:480px;border-radius:24px}
.hy-colocation-pricing .hy-plan-badge{font-size:12px;margin-bottom:14px}
.hy-colocation-pricing .hy-plan h3{font-size:18px;margin-bottom:8px}
.hy-colocation-pricing .hy-plan-description{font-size:14px;line-height:21px}
.hy-colocation-pricing .hy-colocation-old{margin-top:14px!important}
.hy-colocation-pricing .hy-plan-price strong{font-size:28px}
.hy-colocation-pricing .hy-plan-button{margin-top:22px}
.hy-colocation-pricing .hy-plan-note{font-size:12px;line-height:20px;margin-top:14px!important;margin-bottom:18px!important}
.hy-colocation-pricing .hy-plan-features{padding-top:18px;font-size:14px;gap:10px}
.hy-colocation-page .hy-tools{padding-top:96px}
.hy-colocation-page .hy-features{padding-top:112px}
@media(min-width:1260px){.hy-colocation-pricing .hy-pricing-options{max-width:650px}.hy-colocation-pricing .hy-pricing-heading{gap:32px}.hy-colocation-pricing h2{font-size:46px;flex-shrink:0}}
@media(max-width:540px){.hy-colocation-pricing .hy-plan{min-height:0}.hy-colocation-page .hy-features{padding-top:64px}.hy-colocation-page .hy-tools{padding-top:64px}}

/* The reference uses one uninterrupted background behind navigation and hero. */
@media(min-width:801px){
.hy-colocation-page{position:relative;isolation:isolate}
.hy-colocation-page::before{content:'';position:absolute;z-index:-1;pointer-events:none;top:0;left:0;width:100%;height:950px;background:url('../images/landing/colocation-grid.png') center -65px/100% auto no-repeat;border-radius:0 0 28px 28px}
.hy-colocation-page .hy-header{background:transparent}
.hy-colocation-page .hy-colocation-hero{background:none}
.hy-colocation-page .hy-colocation-server{bottom:-12px}
.hy-colocation-page .hy-language{background:#fff;border-radius:999px;padding:10px 24px}
}

.hy-colocation-period{position:relative;display:inline-block;text-align:left;z-index:5}
.hy-colocation-term{list-style:none;cursor:pointer;align-items:center;justify-content:space-between;gap:40px;min-width:200px}
.hy-colocation-term::-webkit-details-marker{display:none}
.hy-colocation-period .hy-nav-popover{left:auto;right:0;top:calc(100% + 8px);min-width:200px}
.hy-colocation-period button{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:var(--hy-ink);text-align:left;font-size:14px}
.hy-colocation-period button:hover,.hy-colocation-period button[aria-pressed=true]{background:#d6fbdc}
.hy-colocation-period button span{visibility:hidden;color:var(--hy-green)}
.hy-colocation-period button[aria-pressed=true] span{visibility:visible}
