/* Keep scrolling available without drawing scrollbars in the page or panels. */
* {scrollbar-width:none!important}
*::-webkit-scrollbar {display:none;width:0;height:0}

.vpn-import-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.vpn-import-actions .button {min-width:0;justify-content:center;gap:10px;text-align:center;white-space:normal}
.vpn-import-note {margin:12px 0 0!important}
.direction-arrow {display:inline-block;width:1em;height:1em;vertical-align:-.12em;flex-shrink:0}
.hero-button .direction-arrow {width:1.05em;height:1.05em}

/* Keep the desktop artwork and its contents in the same 1920px composition. */
.hero-scene {display:contents}
@media (min-width:901px) and (pointer:fine) {
  body[data-page="landing"] .topbar {height:64px}
}
@media (min-width:1100px) and (pointer:fine) {
  .hero-scene {display:block;position:relative;height:calc(1030px * var(--hero-scale,1) + 24px);overflow:hidden;background:#080e1c url('/assets/xgruad-space-v2.jpg') center bottom/cover no-repeat}
  /* Size the layout directly: transforming the whole scene rasterizes its text. */
  .hero-scene>.hero {--s:var(--hero-scale,1);position:absolute;top:0;left:50%;width:calc(1920px * var(--s));height:calc(1030px * var(--s));min-height:0;margin-left:calc(-960px * var(--s));padding:calc(54px * var(--s)) calc(28px * var(--s)) calc(40px * var(--s));transform:none}
  .hero-scene>.hero:before {display:none}
  .hero-scene>.hero:after {display:none}
  .hero-scene>.hero {line-height:calc(24px * var(--s))}
  .hero-scene .hero-copy {max-width:calc(1050px * var(--s))}
  .hero-scene .hero-kicker {font-size:calc(12px * var(--s));letter-spacing:calc(2.5px * var(--s));margin-bottom:calc(25px * var(--s))}
  .hero-scene .hero h1 {font-size:calc(87px * var(--s));letter-spacing:calc(-4px * var(--s))}
  .hero-scene .hero h1 em {letter-spacing:calc(-4px * var(--s))}
  .hero-scene .hero-copy>p {font-size:calc(18px * var(--s));margin:calc(27px * var(--s)) auto calc(30px * var(--s));max-width:calc(690px * var(--s))}
  .hero-scene .hero-button {font-size:calc(19px * var(--s))!important;padding:calc(16px * var(--s)) calc(35px * var(--s))!important;min-height:calc(62px * var(--s))!important}
  .hero-scene .hero-note {font-size:calc(12px * var(--s));margin-top:calc(18px * var(--s))}
  .hero-scene .hero-stage {width:calc(650px * var(--s));margin:calc(80px * var(--s)) auto calc(32px * var(--s));min-height:calc(255px * var(--s));perspective:none}
  .hero-scene .access-console {width:calc(525px * var(--s));border-width:calc(3px * var(--s));border-radius:calc(18px * var(--s))}
  .hero-scene .console-top {padding:calc(15px * var(--s)) calc(18px * var(--s));gap:calc(15px * var(--s));border-bottom-width:calc(2px * var(--s))}
  .hero-scene .console-brand {font-size:calc(20px * var(--s));letter-spacing:calc(-.7px * var(--s));gap:calc(5px * var(--s))}
  .hero-scene .console-brand img {width:calc(28px * var(--s));height:calc(28px * var(--s))}
  .hero-scene .console-label,.hero-scene .console-caption {font-size:max(9px,calc(10px * var(--s)))}
  .hero-scene .console-label {letter-spacing:calc(1.7px * var(--s))}
  .hero-scene .console-led {width:calc(7px * var(--s));height:calc(7px * var(--s))}
  .hero-scene .console-main {padding:calc(24px * var(--s));gap:calc(20px * var(--s))}
  .hero-scene .console-caption {letter-spacing:calc(1.5px * var(--s))}
  .hero-scene .console-main strong {font-size:calc(30px * var(--s));letter-spacing:calc(-.7px * var(--s));margin:calc(9px * var(--s)) 0 calc(12px * var(--s))}
  .hero-scene .console-platforms,.hero-scene .console-bottom>span,.hero-scene .console-bottom small {font-size:max(10px,calc(12px * var(--s)))}
  .hero-scene .console-power {width:calc(94px * var(--s));height:calc(94px * var(--s));border-width:calc(5px * var(--s))}
  .hero-scene .console-power svg {width:calc(56px * var(--s));height:calc(56px * var(--s))}
  .hero-scene .console-bottom {padding:calc(16px * var(--s)) calc(22px * var(--s));gap:calc(18px * var(--s))}
  .hero-scene .console-bottom>span {gap:calc(8px * var(--s))}
  .hero-scene .console-bottom strong {font-size:calc(19px * var(--s))}
  .hero-scene .hero-sticker {top:calc(37px * var(--s));right:calc(-33px * var(--s));width:calc(119px * var(--s));height:calc(119px * var(--s));font-size:calc(12px * var(--s))}
  .hero-scene .scroll-cue {font-size:calc(9px * var(--s));letter-spacing:calc(2px * var(--s));gap:calc(20px * var(--s));margin-top:calc(34px * var(--s))}
  .hero-scene .scroll-cue span {font-size:calc(21px * var(--s))}
}

@media (pointer:coarse) {
  html,body {touch-action:pan-x pan-y}
  input,select,textarea {font-size:max(16px,1em)!important}
}
@media (max-width:480px) {
  .vpn-import-actions {gap:10px}
  .vpn-import-actions .button {font-size:14px!important;padding:13px 9px!important}
  .vpn-import-actions .ui-icon {width:17px;height:17px}
}