/* Bounded desktop scale and independent vertical density. Browser zoom stays
   untouched; a short laptop and a wide monitor share the same readable UI. */
.exo-redesign svg.exo-brand-original{display:block;width:100%;height:auto;aspect-ratio:260/64;flex:none;overflow:visible}
.exo-redesign .icon{display:inline-block;flex-shrink:0;vertical-align:middle}
@media (min-width:851px){
  body.exo-home{--ref-unit:calc(min(1240px,100vw - 79px)/733)}
  .exo-home .container{width:min(1240px,calc(100% - 64px));max-width:1240px}
  .exo-announcement{height:38px}
  .exo-announcement-inner{font-size:12px;line-height:1.25;gap:24px}
  .exo-announcement-inner>span{gap:8px}
  .exo-announcement .exo-status-dot{width:6px;height:6px}
  .exo-announcement a{width:auto;height:26px;font-size:11px;padding:0 10px;gap:8px;border-radius:6px}
  .exo-announcement .icon{width:12px;height:12px}
  .exo-redesign .exo-site-header{height:76px}
  .exo-home .exo-nav-inner{position:relative;width:min(calc(755 * var(--ref-unit)),calc(100% - 40px))}
  .exo-home .exo-brand{position:absolute;left:0;top:50%;transform:translateY(-50%);width:calc(129 * var(--ref-unit))}
  .exo-home .exo-payment-mark{position:absolute;left:calc(140 * var(--ref-unit));top:50%;transform:translateY(-50%);padding-left:calc(16 * var(--ref-unit))}
  .exo-home .exo-payment-mark .icon{width:22px;height:22px}
  .exo-home #main-nav{position:absolute;left:calc(194 * var(--ref-unit));top:50%;transform:translateY(-50%);display:flex;gap:calc(16 * var(--ref-unit))}
  .exo-home #main-nav a,.exo-home .exo-script-nav>summary{font-size:clamp(12px,.9vw,14px);padding:12px 0}
  .exo-home .exo-script-nav>summary{gap:6px}
  .exo-home .exo-script-nav>summary .icon{width:10px;height:10px}
  .exo-home .exo-header-actions{position:absolute;right:0;top:50%;transform:translateY(-50%);gap:clamp(8px,1vw,16px);font-size:clamp(12px,.9vw,14px);margin:0}
  .exo-home .exo-header-actions>a{gap:6px}
  .exo-home .exo-header-actions .icon{width:16px;height:16px}
  .exo-home .exo-nav-search{display:none!important}
  .exo-home :is(.exo-nav-docs span,.exo-nav-cart>span,.exo-nav-account>span){display:inline}
  .exo-home .exo-nav-docs{width:auto}
  .exo-home .exo-nav-discord{width:auto;height:36px;padding:0 10px;border-radius:6px;justify-content:center}
  .exo-home .exo-currency summary{width:58px;height:34px;padding:0;gap:7px;border-radius:6px;justify-content:center}
  .exo-home .exo-currency{padding:0;margin:0;border:0}
  .exo-home .exo-currency .icon{width:10px;height:10px}
  .exo-home .exo-nav-cart{width:auto;min-height:36px;min-width:0;justify-content:center}
  .exo-home .exo-nav-account{width:auto;height:36px;padding:0 10px;border-radius:6px;justify-content:center}
  .exo-redesign .exo-nav-account>span{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .exo-home .exo-hero-grid{height:clamp(420px,calc(var(--exo-viewport-height,100svh) - 178px),560px);min-height:0;display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch}
  .exo-home .exo-hero-copy{position:absolute;left:8px;top:clamp(28px,calc(var(--exo-viewport-height,100svh) * .045),43px);width:52%;padding:0}
  .exo-home .exo-hero-chip{height:30px;padding:0 12px;gap:8px;font-size:12px;line-height:1.2;border-radius:18px;margin-bottom:12px}
  .exo-home .exo-hero-chip .exo-status-dot{width:6px;height:6px}
  .exo-home .exo-hero-chip .icon{width:12px;height:12px;margin-left:2px}
  .exo-home .exo-hero h1{top:0;font-size:clamp(40px,4vw,62px);line-height:1.02;letter-spacing:-.055em}
  .exo-home .exo-hero-description{font-size:clamp(14px,1.15vw,16px);line-height:1.5;margin-top:18px!important;max-width:510px}
  .exo-home .exo-hero-description br{display:block}
  .exo-home .exo-hero-actions{margin-top:22px;gap:12px;flex-wrap:nowrap}
  .exo-home .exo-hero-actions .exo-button{height:46px;min-height:46px;padding:0 12px;gap:10px;font-size:14px;border-radius:8px}
  .exo-home .exo-hero-actions .exo-button:first-child{width:clamp(155px,calc(146 * var(--ref-unit)),220px)}
  .exo-home .exo-hero-actions .exo-button:nth-child(2){width:clamp(160px,calc(151 * var(--ref-unit)),228px)}
  .exo-home .exo-hero-actions .icon{width:16px;height:16px}
  .exo-home .exo-benefits{margin:16px 0 0;padding:0;gap:8px;flex-wrap:nowrap}
  .exo-home .exo-benefits li{width:auto;height:32px;padding:0 9px;gap:7px;font-size:10px;justify-content:center;border-radius:6px}
  .exo-home .exo-benefits .icon{width:14px;height:14px}
  .exo-home .exo-hero-visual{grid-column:2;height:100%;margin:0;position:relative;min-width:0;z-index:1}
  .exo-home .exo-x-stage{inset:0;height:auto}
  /* Fade the artwork at its own bounds, including when it is shorter than the
     hero on tall tablets. The model and its canvas remain separate and sharp. */
  .exo-home .exo-hero-grid::before{
    content:"";position:absolute;left:33%;top:0;width:67%;height:auto;
    aspect-ratio:1441/1092;max-height:100%;
    background:url('./reference-hero-backdrop-v2.png') left top/100% auto no-repeat;
    opacity:.76;pointer-events:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 60%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 12%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 60%,transparent);
    -webkit-mask-composite:source-in;mask-composite:intersect;
  }
  .exo-home :is(.exo-hero-visual::before,.exo-outline-brand,.exo-scene-light){display:none}
  .exo-home .exo-compatibility{height:56px;min-height:56px;padding:0;gap:28px;font-size:12px}
  .exo-home .exo-compatibility>span:first-child{font-size:9px}
  .exo-home .exo-compatibility strong{font-size:14px}
  .exo-home .exo-compatibility-payment{font-size:12px;gap:8px;padding-left:22px}
  .exo-home .exo-compatibility-payment .icon{width:18px;height:18px}

  .exo-home .exo-section-heading h2{font-size:clamp(28px,3.2vw,42px);line-height:1.15}
  .exo-home .exo-section-heading p{font-size:16px;line-height:1.6}
  .exo-home .exo-product-card{min-height:0}
  .exo-home .exo-product-content{padding:12px 6px 6px}
  .exo-home .exo-product-content h3{font-size:clamp(16px,1.3vw,18px);line-height:24px}
  .exo-home .exo-frameworks{padding-top:8px;gap:6px;min-height:0}
  .exo-home .exo-frameworks>span{font-size:10px;line-height:14px;padding:4px 6px}
  .exo-home .exo-product-price{font-size:clamp(19px,1.8vw,24px);line-height:1.25;margin:12px 0 10px!important}
  .exo-home .exo-product-cta{height:44px;min-height:44px;padding:0;font-size:13px}
  .exo-home .exo-step-content h3{font-size:clamp(18px,1.6vw,22px);line-height:1.3}
  .exo-home .exo-step-content p{font-size:16px;line-height:1.6;max-width:225px}
  .exo-home .exo-pack-copy>p{font-size:16px;line-height:1.65}
  .exo-home .exo-faq-list summary{font-size:16px;line-height:1.5}
  .exo-home .exo-faq-answer p{font-size:14px;line-height:1.7}
  .exo-home .exo-final-panel p{font-size:15px;line-height:1.6}
  .exo-home .exo-promotion .exo-promo-offer{font-size:13px;gap:18px}
  .exo-home .exo-promo-label{font-size:9px}
  .exo-home .exo-promo-action{font-size:11px}
  .exo-redesign .product-experience .resource-section-nav{top:76px}
  .exo-redesign .product-experience .media-column{top:96px}
  .exo-redesign .product-experience :is(.resource-features,.resource-specs,.resource-install,.related-resources,.resource-faq){scroll-margin-top:80px}
}
@media (min-width:851px) and (max-width:1000px){
  .exo-home :is(.exo-nav-docs span,.exo-nav-cart>span,.exo-nav-account>span){display:none}
  .exo-home .exo-nav-cart{min-width:32px}
  .exo-home .exo-header-actions{gap:10px}
}